/* * e-speed: estilos de marca sobre Kadence. * Colores y medidas del design system de e-speed. Kadence aporta la paleta global (--global-palette1…9), * que se configura en Personalizar > Colores con los mismos valores (ver la guía). */ :root { --es-papel: #FFFFFF; --es-niebla: #F4F6F9; --es-filete: #E1E6EE; --es-texto: #0B1B33; --es-gris: #4F5E75; --es-noche: #001B40; --es-noche-suave: #14294A; --es-texto-noche: #FFFFFF; --es-gris-noche: #AEBBD0; --es-marino: #003D8F; --es-marino-hover: #002B66; --es-azul: #3095D5; --es-celeste: #2FC7E6; --es-amarillo: #FCAA00; --es-whatsapp: #1F8F4E; --es-sans: Manrope, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --es-serif: "Playfair Display", Georgia, "Times New Roman", serif; --es-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace; --es-gutter: 20px; --es-section: 72px; --es-radius-md: 14px; --es-radius-lg: 24px; --es-pill: 999px; } @media (min-width: 768px) { :root { --es-gutter: 32px; --es-section: 112px; } } @media (min-width: 1100px) { :root { --es-section: 136px; } } /* ---------- Base ---------- */ :focus-visible { outline: 2px solid var(--es-celeste); outline-offset: 3px; } .es-ico { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Cursiva de marca: una palabra por titular */ h1 em, h2 em, .wp-block-heading em { font-family: var(--es-serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; color: var(--es-marino); } .es-night h1 em, .es-night h2 em { color: var(--es-celeste); } .es-label { font-family: var(--es-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--es-marino); margin: 0; } .es-dato { font-family: var(--es-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .es-lead { font-size: 18px; line-height: 1.6; color: var(--es-gris); max-width: 52ch; } @media (max-width: 767px) { .es-dato { font-size: 12.5px; } } /* Kadence es un tema clásico: WordPress mete el contenido de cada grupo en un .wp-block-group__inner-container. Lo hacemos transparente para que las rejillas de e-speed actúen sobre los bloques de dentro. */ .wp-block-group[class*="es-"] > .wp-block-group__inner-container { display: contents; } .es-head > .wp-block-group__inner-container > *, .es-hero-copy > .wp-block-group__inner-container > *, .es-benefit > .wp-block-group__inner-container > *, .es-card > .wp-block-group__inner-container > *, .es-step > .wp-block-group__inner-container > *, .es-legal-note > .wp-block-group__inner-container > *, .es-final .es-wrap > .wp-block-group__inner-container > * { margin: 0 !important; } /* ---------- Secciones (grupos de ancho completo) ---------- */ .es-section { padding-block: var(--es-section); } /* Las bandas de la home van pegadas, sin el espacio que WordPress pone entre bloques */ .es-section, .es-hero, .es-promises { margin-block: 0 !important; } .es-section.es-alt { background: var(--es-niebla); } .es-night { background: var(--es-noche); color: var(--es-texto-noche); } .es-night .es-label { color: var(--es-gris-noche); } .es-night .es-lead { color: var(--es-gris-noche); } .es-wrap { max-width: 1200px; margin-inline: auto; padding-inline: max(var(--es-gutter), env(safe-area-inset-left, 0px)) max(var(--es-gutter), env(safe-area-inset-right, 0px)); } .es-head { display: grid; gap: 22px; align-content: start; margin-bottom: 56px; max-width: 760px; } .es-head > * { margin: 0 !important; } .es-section h1, .es-section h2, .es-hero h1 { text-wrap: balance; letter-spacing: -.025em; } .es-section h1, .es-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.02; font-weight: 800; } .es-section h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.06; font-weight: 800; } .es-section h3 { font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; } /* ---------- Botones ---------- */ .wp-block-button.es-btn .wp-block-button__link, .es-btn-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--es-pill); background: var(--es-marino); color: var(--es-papel); font-weight: 700; font-size: 16px; text-decoration: none; } .wp-block-button.es-btn .wp-block-button__link:hover, .es-btn-link:hover { background: var(--es-marino-hover); color: var(--es-papel); } .es-night .wp-block-button.es-btn .wp-block-button__link { background: var(--es-papel); color: var(--es-noche); } .es-night .wp-block-button.es-btn .wp-block-button__link:hover { background: var(--es-celeste); } /* ---------- Hero ---------- */ .es-hero { padding-block: 48px 72px; } @media (min-width: 768px) { .es-hero { padding-block: 72px 104px; } } .es-hero-grid { display: grid; gap: 44px; align-items: center; } @media (min-width: 980px) { .es-hero-grid { grid-template-columns: 1.08fr .92fr; gap: 72px; } } .es-hero-copy { display: grid; gap: 22px; min-width: 0; } .es-hero-copy > * { margin: 0 !important; } .es-tagline { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -.015em; color: var(--es-marino); line-height: 1.2; } .es-finder { display: grid; gap: 12px; } .es-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; } .es-brand { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 10px; border-radius: var(--es-pill); border: 1px solid var(--es-filete); background: var(--es-papel); color: var(--es-texto); font-weight: 700; font-size: 15px; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .es-brand:hover { border-color: var(--es-marino); color: var(--es-marino); } .es-night .es-brand { border-color: var(--es-papel); color: var(--es-noche); } .es-night .es-brand:hover { background: var(--es-celeste); border-color: var(--es-celeste); color: var(--es-noche); } /* Cuentakilómetros */ .es-instrument { background: var(--es-noche); color: var(--es-texto-noche); border-radius: var(--es-radius-lg); padding: 28px 24px 24px; display: grid; gap: 18px; min-width: 0; } .es-instrument-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--es-gris-noche); } .es-gauge { width: 100%; max-width: 440px; height: auto; margin-inline: auto; display: block; } .es-gauge .es-limit { transition: opacity .25s; } .es-gauge.is-free .es-limit { opacity: .35; } .es-gauge-state { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; } .es-gauge-state::before { content: ""; width: 8px; height: 8px; border-radius: var(--es-pill); background: var(--es-amarillo); } .es-gauge-state.is-free { color: var(--es-celeste); } .es-gauge-state.is-free::before { background: var(--es-celeste); } .es-unit { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: var(--es-radius-md); background: var(--es-noche-suave); } .es-unit svg { width: 132px; height: auto; } .es-unit p { margin: 0; font-size: 15px; color: var(--es-gris-noche); line-height: 1.5; } .es-unit p b { color: var(--es-texto-noche); display: block; font-size: 16px; } /* ---------- Promesas ---------- */ .es-promises { border-block: 1px solid var(--es-filete); background: var(--es-niebla); } .es-promises ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding-block: 22px; } @media (min-width: 900px) { .es-promises ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .es-promises li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; color: var(--es-texto); margin: 0; } .es-promises .es-ico { color: var(--es-marino); } /* ---------- Ventajas y garantías ---------- */ .es-grid-4 { display: grid; gap: 40px 32px; } @media (min-width: 640px) { .es-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .es-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .es-benefit { display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--es-filete); padding-top: 24px; } .es-benefit > * { margin: 0 !important; } .es-benefit .es-ico, .es-card .es-ico { width: 32px; height: 32px; color: var(--es-marino); } .es-benefit p, .es-card p { color: var(--es-gris); } .es-cards { gap: 16px; } .es-card { display: grid; gap: 12px; align-content: start; padding: 26px 24px; border: 1px solid var(--es-filete); border-radius: var(--es-radius-md); background: var(--es-papel); } .es-card > * { margin: 0 !important; } /* ---------- Pasos ---------- */ .es-steps { display: grid; gap: 40px 32px; } @media (min-width: 860px) { .es-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .es-step { display: grid; gap: 12px; align-content: start; border-top: 2px solid var(--es-marino); padding-top: 22px; } .es-step:last-child { border-top-color: var(--es-celeste); } .es-step > * { margin: 0 !important; } .es-step .es-dato { color: var(--es-marino); } .es-step p { color: var(--es-gris); } /* ---------- Vídeo ---------- */ .es-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--es-radius-lg); background: var(--es-noche); overflow: hidden; color: var(--es-gris-noche); } .es-video iframe, .es-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .es-video .es-play { width: 84px; height: 84px; border-radius: var(--es-pill); background: var(--es-celeste); display: grid; place-items: center; border: 0; cursor: pointer; } .es-video .es-play svg { width: 30px; height: 30px; fill: var(--es-noche); margin-left: 4px; } /* ---------- Tablas de compatibilidad (home y fichas) ---------- */ .es-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--es-filete); border-radius: var(--es-radius-md); background: var(--es-papel); } .es-table { width: 100%; border-collapse: collapse; margin: 0; min-width: 600px; } .es-table th, .es-table td { text-align: left; padding: 18px 22px; border: 0; border-bottom: 1px solid var(--es-filete); vertical-align: middle; } .es-table tr:last-child td { border-bottom: 0; } .es-table th { font-family: var(--es-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--es-marino); background: var(--es-niebla); } .es-table .es-brand-name { font-weight: 800; font-size: 18px; } .es-table .es-brand-name small { display: block; font-size: 14px; color: var(--es-gris); font-weight: 400; } .es-table .es-ref { font-family: var(--es-mono); font-size: 13px; letter-spacing: .06em; color: var(--es-marino); } .es-table .es-muted { color: var(--es-gris); font-size: 15px; } .es-go { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-weight: 700; color: var(--es-marino); text-decoration: none; white-space: nowrap; } .es-go .es-ico { width: 20px; height: 20px; } .es-note { margin-top: 14px; color: var(--es-gris); font-size: 15px; } /* En móvil cada fila es una ficha apilada, sin scroll lateral */ @media (max-width: 640px) { .es-table, .es-table tbody { display: block; min-width: 0; } .es-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .es-table tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; padding: 18px; border-bottom: 1px solid var(--es-filete); } .es-table tr:last-child { border-bottom: 0; } .es-table td { display: block; padding: 0; border: 0; } .es-table td:nth-child(n+3) { grid-column: 1 / -1; } .es-table td.es-empty { display: none; } /* En las fichas la primera columna es la referencia: una sola columna, referencia arriba */ .es-table-ref tr { grid-template-columns: 1fr; } } /* ---------- Preguntas frecuentes (bloque Detalles de WordPress) ---------- */ .es-faq-grid { display: grid; gap: 40px; } @media (min-width: 980px) { .es-faq-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; } } .es-faq { border-top: 1px solid var(--es-filete); } .es-faq .wp-block-details, .es-faq details { border-bottom: 1px solid var(--es-filete); margin: 0; padding: 0; } .es-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; min-height: 44px; cursor: pointer; font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .es-faq summary::-webkit-details-marker { display: none; } .es-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: var(--es-pill); border: 1px solid var(--es-filete); display: grid; place-items: center; color: var(--es-marino); font-weight: 400; font-size: 20px; line-height: 1; transition: transform .2s; } .es-faq details[open] summary::after { transform: rotate(45deg); border-color: var(--es-marino); } .es-faq details > :not(summary) { margin: 0 0 24px; padding-right: 44px; color: var(--es-gris); max-width: 62ch; } .es-legal-note { display: grid; gap: 8px; padding: 22px 24px; border-radius: var(--es-radius-md); background: var(--es-papel); border: 1px solid var(--es-filete); color: var(--es-gris); font-size: 15px; } .es-legal-note > * { margin: 0 !important; } .es-legal-note strong { color: var(--es-texto); } /* ---------- Banda final ---------- */ .es-final .es-wrap { display: grid; gap: 28px; } .es-final .es-wrap > * { margin: 0 !important; } .es-final .es-brands { max-width: 640px; } .es-final .es-dato { color: var(--es-gris-noche); } /* ---------- Ficha de producto (WooCommerce) ---------- */ .single-product div.product .product_title { font-size: clamp(2.25rem, 4.4vw, 3.6rem); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; } .single-product div.product p.price, .single-product div.product .woocommerce-variation-price .price { font-size: 35px; font-weight: 800; letter-spacing: -.02em; color: var(--es-texto); } .single-product div.product .woocommerce-product-details__short-description { color: var(--es-gris); } /* Selector de motor: el JS convierte el desplegable en botones */ .es-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .es-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 4px 0 8px; } .es-swatch { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: var(--es-radius-md); border: 1px solid var(--es-filete); background: var(--es-papel); color: var(--es-texto); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; } .es-swatch b { font-size: 15px; line-height: 1.35; font-weight: 800; } .es-swatch span { font-family: var(--es-mono); font-size: 12px; letter-spacing: .06em; color: var(--es-gris); } .es-swatch:hover { border-color: var(--es-marino); } /* Kadence pinta los