/* ============================================================ IDIOMAS MOMO — hoja única del sitio Método ARTEMOVIL · HTML5 + CSS + JS nativo, sin dependencias. Los valores de marca están en :root. Ningún componente escribe un color en crudo. Índice 0. Tokens 1. Reset y utilidades 2. Botones y encabezados de sección 3. Cabecera y navegación 4. Hero: Ken Burns + glifos + índice de diapositivas 5. Reveal 6. Ruta de niveles A1–C2 (bloque animado) 7. Bandas de idioma 8. Tarjetas 9. Cuadro de clases por etapa 10. Cuadro de tarifas 11. Franja de datos / certificaciones 12. FAQ 13. Formulario 14. Contenido de página y artículo 15. Blog: índice y ficha 16. Buscador 17. Pie 18. Flotantes: WhatsApp lateral y volver arriba 19. Responsive 20. prefers-reduced-motion ============================================================ */ /* ============================================================ 0. TOKENS Derivados de la identidad real: logotipo azul #4A7FBF sobre gris #404040, tipografía geométrica de trazo redondeado. El acento ámbar es el único color de acción: si se usa para decorar deja de leerse como "aquí se pulsa". ============================================================ */ :root{ --brand:#4a7fbf; /* azul del logotipo — superficies y gráficos */ --brand-dark:#35659e; /* azul interactivo — texto blanco encima cumple 5.2:1 */ --brand-deep:#123252; /* azul noche — hero, pie, superficies profundas */ --brand-deeper:#0a1f35; --brand-soft:#eaf1f9; /* fondo de apoyo */ --accent:#f4a62a; /* ámbar — CTA y estado activo. Texto azul noche encima */ --accent-dark:#de8f13; --accent-ink:#8a5200; /* ámbar legible sobre blanco (5.1:1) */ --text:#2c3945; --text-light:#5c6b7a; --bg-light:#f5f8fb; --border:#dbe4ee; --border-soft:#e9eff6; --line-inv:rgba(255,255,255,.16); --inv-2:#c2d6ec; --inv-3:#8ba3bd; --white:#fff; --radius:16px; --radius-sm:10px; --radius-pill:999px; --shadow:0 10px 30px rgba(18,50,82,.10); --shadow-lg:0 20px 54px rgba(18,50,82,.18); --tr:.28s cubic-bezier(.25,.6,.3,1); --tr-slow:.7s cubic-bezier(.25,.6,.3,1); --container:1320px; --font-head:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --header-h:132px; --header-h-mobile:76px; --hero-delay:7000ms; /* debe coincidir con DELAY de main.js */ } /* ============================================================ 1. RESET Y UTILIDADES ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:hidden;overflow-x:clip} body{font-family:var(--font-body);color:var(--text);background:var(--white);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none;transition:color var(--tr)} ul,ol{list-style:none} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:none} h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--brand-deep);line-height:1.18;font-weight:700;letter-spacing:-.015em} strong{font-weight:650} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 26px} .container--lectura{max-width:920px} .section{padding:92px 0} .section--compacta{padding:62px 0} .section--clara{background:var(--bg-light)} .section--marca{background:var(--brand-soft)} .section--honda{background:var(--brand-deep);color:var(--inv-2)} .section--honda h2,.section--honda h3{color:#fff} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} .salto-contenido{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--accent);color:var(--brand-deeper);padding:.8rem 1.4rem;font-weight:700;border-radius:0 0 var(--radius-sm) 0} .salto-contenido:focus{left:0} /* ============================================================ 2. BOTONES Y ENCABEZADOS DE SECCIÓN ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--font-head);font-weight:650;font-size:.94rem;padding:.88rem 1.85rem;border-radius:var(--radius-pill);border:2px solid transparent;transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr),box-shadow var(--tr);text-align:center;line-height:1.2} .btn svg{width:18px;height:18px;flex:none} .btn-primary{background:var(--accent);color:var(--brand-deeper);border-color:var(--accent)} .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(244,166,42,.35)} .btn-marca{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)} .btn-marca:hover{background:var(--brand-deep);border-color:var(--brand-deep);transform:translateY(-2px);box-shadow:var(--shadow)} .btn-ghost{background:transparent;color:var(--brand-deep);border-color:var(--border)} .btn-ghost:hover{border-color:var(--brand-dark);color:var(--brand-dark)} .btn-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn-claro:hover{background:#fff;color:var(--brand-deep);border-color:#fff} .btn-sm{padding:.62rem 1.3rem;font-size:.86rem} .enlace-flecha{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-head);font-weight:650;font-size:.9rem;color:var(--brand-dark)} .enlace-flecha::after{content:"";width:16px;height:9px;background:currentColor;transition:transform var(--tr); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9.5 1 13 4.5 9.5 8' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9.5 1 13 4.5 9.5 8' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain} .enlace-flecha:hover{color:var(--accent-ink)} .enlace-flecha:hover::after{transform:translateX(4px)} .section-head{max-width:760px;margin:0 auto 56px;text-align:center} .section-head--izq{margin-left:0;text-align:left} .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-size:.76rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.9rem} .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px} .section--honda .eyebrow{color:var(--accent)} .section-head h2{font-size:clamp(1.75rem,3.3vw,2.5rem);font-weight:750;margin-bottom:1rem} .section-head p{color:var(--text-light);font-size:1.02rem} .section--honda .section-head p{color:var(--inv-2)} /* ============================================================ 3. CABECERA ============================================================ */ .site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;box-shadow:0 1px 0 var(--border-soft);transition:box-shadow var(--tr)} .site-header.scrolled{box-shadow:0 6px 24px rgba(18,50,82,.10)} .header-top{background:var(--brand-deep);color:var(--inv-2);font-size:.82rem} .header-top-inner{max-width:var(--container);margin:0 auto;padding:7px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px} .header-top-datos{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .header-top-datos a,.header-top-datos span{display:inline-flex;align-items:center;gap:.45rem;color:var(--inv-2)} .header-top-datos a:hover{color:var(--accent)} .header-top svg{width:15px;height:15px;stroke:var(--accent);fill:none;flex:none} .header-top-acciones{display:flex;align-items:center;gap:16px} .header-social{display:flex;gap:10px} .header-social a{display:flex;color:var(--inv-2)} .header-social svg{width:17px;height:17px} .header-social a:hover{color:var(--accent)} .search-toggle{display:flex;color:var(--inv-2)} .search-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none} .search-toggle:hover{color:var(--accent)} .header-main{max-width:var(--container);margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:26px;transition:padding var(--tr)} .site-header.scrolled .header-main{padding:8px 26px} .brand{display:flex;align-items:center;flex:none} .brand img{height:56px;width:auto;transition:height var(--tr)} .site-header.scrolled .brand img{height:44px} .main-nav>ul{display:flex;align-items:center} .main-nav>ul>li{position:relative} .main-nav a{display:block;font-family:var(--font-head);font-size:.85rem;font-weight:600;color:var(--brand-deep);padding:14px 13px;position:relative} .main-nav>ul>li>a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--tr)} .main-nav>ul>li>a:hover::after,.main-nav>ul>li>a.active::after{transform:scaleX(1)} .main-nav a.active{color:var(--brand-dark)} .main-nav .has-sub>a{padding-right:24px} .main-nav .has-sub>a::before{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.55} .main-nav .submenu{position:absolute;top:100%;left:0;min-width:272px;background:#fff;box-shadow:var(--shadow-lg);border-radius:var(--radius-sm);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--tr),transform var(--tr),visibility var(--tr);border-top:3px solid var(--accent)} .main-nav .has-sub:hover>.submenu,.main-nav .has-sub:focus-within>.submenu{opacity:1;visibility:visible;transform:none} .main-nav .submenu a{font-size:.86rem;font-weight:500;padding:9px 20px;color:var(--text)} .main-nav .submenu a:hover{color:var(--brand-dark);background:var(--brand-soft)} .header-actions{display:flex;align-items:center;gap:14px;flex:none} .nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:var(--radius-sm)} .nav-toggle span{display:block;width:24px;height:2px;background:var(--brand-deep);border-radius:2px;transition:transform var(--tr),opacity var(--tr)} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .search-bar{position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:var(--shadow);padding:20px 26px;display:none;border-top:1px solid var(--border-soft)} .search-bar.open{display:block} .search-bar form{max-width:720px;margin:0 auto;display:flex;gap:10px} .search-bar input{flex:1;padding:.82rem 1.1rem;border:2px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-light)} .search-bar input:focus{outline:none;border-color:var(--brand)} /* ============================================================ 4. HERO Variante propia: Ken Burns alterno + constelación de glifos tipográficos (no círculos) + índice horizontal con etiqueta y barra de avance sincronizada con --hero-delay. ============================================================ */ .hero{position:relative;margin-top:var(--header-h);min-height:min(82vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--brand-deeper);isolation:isolate} .hero__media{position:absolute;inset:0;z-index:-2} .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease;overflow:hidden} .hero__slide.is-on{opacity:1} .hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)} .hero__slide.is-on img{animation:kenburns 13s ease-out forwards} .hero__slide:nth-child(even).is-on img{animation-name:kenburns-alt} @keyframes kenburns{ from{transform:scale(1.04) translate3d(0,0,0)} to{transform:scale(1.15) translate3d(-1.6%,-1.1%,0)} } @keyframes kenburns-alt{ from{transform:scale(1.15) translate3d(1.3%,-.9%,0)} to{transform:scale(1.04) translate3d(0,0,0)} } .hero__velo{position:absolute;inset:0;z-index:-1; background:linear-gradient(78deg,rgba(10,31,53,.94) 0%,rgba(10,31,53,.78) 42%,rgba(10,31,53,.34) 78%,rgba(10,31,53,.52) 100%)} /* --- Constelación de glifos: solo CSS, sin imágenes ni JS --- */ .hero__glifos{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .glifo{position:absolute;font-family:var(--font-head);font-weight:700;line-height:1;color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.30);opacity:0; animation:glifoDeriva 22s ease-in-out infinite} .glifo--relleno{-webkit-text-stroke:0;color:rgba(244,166,42,.34)} @keyframes glifoDeriva{ 0%{opacity:0;transform:translate3d(0,26px,0) rotate(-6deg) scale(.94)} 18%,64%{opacity:1} 100%{opacity:0;transform:translate3d(14px,-42px,0) rotate(5deg) scale(1.06)} } /* Duraciones primas entre sí: si coinciden, el fondo late y molesta */ @media (min-width:1025px){.hero__kicker{white-space:nowrap}} /* Todos fuera de la columna de texto (que ocupa el 45 % izquierdo): un glifo sobre el titular resta legibilidad y parece un fallo de render. */ .glifo--a{right:38%;top:9%;font-size:clamp(2.6rem,5.4vw,5.2rem);animation-duration:23s;animation-delay:-3s} .glifo--b{right:6%;top:22%;font-size:clamp(2.2rem,4vw,4rem);animation-duration:29s;animation-delay:-11s} .glifo--c{right:20%;top:38%;font-size:clamp(3rem,6.5vw,6.4rem);animation-duration:31s;animation-delay:-7s} .glifo--d{right:33%;top:62%;font-size:clamp(2rem,3.6vw,3.4rem);animation-duration:19s;animation-delay:-15s} .glifo--e{right:8%;top:58%;font-size:clamp(2.6rem,5vw,5rem);animation-duration:37s;animation-delay:-21s} .glifo--f{right:47%;top:76%;font-size:clamp(1.8rem,3vw,2.8rem);animation-duration:41s;animation-delay:-5s} @media (max-width:1024px){ .glifo--a{right:6%;top:8%}.glifo--c{right:4%;top:32%}.glifo--d{right:30%;top:70%} .glifo--f{display:none} } /* --- Flechas laterales del pase --- */ .hero__flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:54px;height:54px;display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.34);border-radius:50%; background:rgba(10,31,53,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;cursor:pointer; transition:background var(--tr),border-color var(--tr),color var(--tr),transform var(--tr)} .hero__flecha svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .hero__flecha--ant{left:18px} .hero__flecha--sig{right:18px} .hero__flecha:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .hero__flecha--ant:hover{transform:translateY(-50%) translateX(-3px)} .hero__flecha--sig:hover{transform:translateY(-50%) translateX(3px)} .hero__flecha:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .no-js .hero__flecha{display:none} .hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;padding:0 26px 0} .hero__texto{color:#fff;max-width:46rem;padding:clamp(3.5rem,10vh,7rem) 0 2.2rem} .hero__kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-size:.86rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem} .hero__kicker::before{content:"";width:30px;height:2px;background:var(--accent)} .hero h1{font-size:clamp(2.35rem,5.4vw,4.15rem);font-weight:750;color:#fff;margin-bottom:1.25rem;letter-spacing:-.028em;line-height:1.08} .hero h1 em{font-style:normal;color:var(--accent)} .hero__texto p{font-size:clamp(1.08rem,1.7vw,1.34rem);line-height:1.62;color:rgba(255,255,255,.92);margin-bottom:1.55rem;max-width:37rem} .hero__texto p:last-of-type{margin-bottom:2.1rem} .hero__acciones{display:flex;flex-wrap:wrap;gap:14px} /* --- Índice de diapositivas: pestañas con etiqueta y barra --- */ .hero__indice{display:flex;gap:0;border-top:1px solid var(--line-inv);margin-top:auto} .hero__tab{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem; padding:1.15rem 1.1rem 1.5rem;text-align:left;color:rgba(255,255,255,.55);transition:color var(--tr),background var(--tr)} .hero__tab:hover{color:#fff;background:rgba(255,255,255,.05)} .hero__tab-n{font-family:var(--font-head);font-size:.74rem;font-weight:650;letter-spacing:.14em;opacity:.7} .hero__tab-t{font-family:var(--font-head);font-size:.92rem;font-weight:600;line-height:1.25; transition:font-size .45s cubic-bezier(.34,1.4,.64,1),color var(--tr); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .hero__tab[aria-selected="true"]{color:#fff} .hero__tab[aria-selected="true"] .hero__tab-n{color:var(--accent);opacity:1} .hero__tab[aria-selected="true"] .hero__tab-t{font-size:1.06rem;animation:tabEntra .5s cubic-bezier(.25,.6,.3,1)} @keyframes tabEntra{ 0%{opacity:0;transform:translateY(10px);filter:blur(3px)} 60%{opacity:1;filter:blur(0)} 100%{opacity:1;transform:none} } .hero__tab-raíl{position:absolute;left:0;right:0;top:-1px;height:2px;background:rgba(255,255,255,.14);overflow:hidden} .hero__tab-fill{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px rgba(244,166,42,.8)} .hero__tab[aria-selected="true"] .hero__tab-fill{animation:tabAvance var(--hero-delay) linear forwards} .hero__indice.is-paused .hero__tab[aria-selected="true"] .hero__tab-fill{animation:none;width:100%} @keyframes tabAvance{from{width:0}to{width:100%}} .hero__control{position:absolute;right:26px;bottom:calc(100% + 14px);display:flex;align-items:center;gap:.5rem; padding:.5rem 1rem;border-radius:var(--radius-pill);background:rgba(10,31,53,.55);border:1px solid var(--line-inv); color:#fff;font-family:var(--font-head);font-size:.78rem;font-weight:600;letter-spacing:.06em; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .hero__control:hover{border-color:var(--accent);color:var(--accent)} .hero__control svg{width:13px;height:13px;fill:currentColor} .hero__control .icono-play{display:none} .hero__control[aria-pressed="true"] .icono-play{display:block} .hero__control[aria-pressed="true"] .icono-pause{display:none} /* Sin JavaScript: se ve la primera diapositiva y el texto, nunca un hueco */ .no-js .hero__slide:first-child{opacity:1} .no-js .hero__indice,.no-js .hero__control{display:none} /* ============================================================ 5. REVEAL Por debajo de 1080 px el desplazamiento lateral pasa a vertical: translateX a ancho completo desborda en horizontal. ============================================================ */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s cubic-bezier(.25,.6,.3,1)} .reveal.rx-l{transform:translateX(-24px)} .reveal.rx-r{transform:translateX(24px)} .reveal.is-in{opacity:1;transform:none} .no-js .reveal{opacity:1;transform:none} @media (max-width:1080px){.reveal.rx-l,.reveal.rx-r{transform:translateY(20px)}} .reveal[data-retardo="1"]{transition-delay:.09s} .reveal[data-retardo="2"]{transition-delay:.18s} .reveal[data-retardo="3"]{transition-delay:.27s} .reveal[data-retardo="4"]{transition-delay:.36s} .reveal[data-retardo="5"]{transition-delay:.45s} /* ============================================================ 6. RUTA DE NIVELES A1–C2 El trazo se dibuja al entrar en pantalla y una partícula lo recorre en bucle. pathLength="100" normaliza el recorrido: un solo juego de fotogramas sirve para cualquier trazado. ============================================================ */ .ruta{position:relative;padding:18px 0 8px} .ruta__lienzo{position:relative;width:100%} .ruta__svg{width:100%;height:auto;display:block;overflow:visible} .ruta__base{fill:none;stroke:var(--border);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round} .ruta__traza{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.2s cubic-bezier(.35,.1,.25,1) .1s} .ruta.is-in .ruta__traza{stroke-dashoffset:0} .ruta__flujo{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round; stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0; filter:drop-shadow(0 0 5px rgba(244,166,42,.85))} .ruta.is-in .ruta__flujo{opacity:1;animation:rutaFlujo 5.4s linear 1.6s infinite} @keyframes rutaFlujo{to{stroke-dashoffset:0}} .ruta__nodos{position:absolute;inset:0} .ruta__nodo{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem; opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.4,.64,1)} .ruta.is-in .ruta__nodo{opacity:1} .ruta__nodo:nth-child(1){transition-delay:.35s} .ruta__nodo:nth-child(2){transition-delay:.7s} .ruta__nodo:nth-child(3){transition-delay:1.05s} .ruta__nodo:nth-child(4){transition-delay:1.4s} .ruta__nodo:nth-child(5){transition-delay:1.75s} .ruta__nodo:nth-child(6){transition-delay:2.1s} .ruta__punto{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--brand); display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1rem; color:var(--brand-deep);box-shadow:0 6px 18px rgba(18,50,82,.14);position:relative;transition:var(--tr)} .ruta__punto::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(74,127,191,.45); opacity:0;transition:opacity var(--tr);animation:rutaGiro 11s linear infinite} @keyframes rutaGiro{to{transform:rotate(360deg)}} .ruta__nodo:hover .ruta__punto,.ruta__nodo:focus-within .ruta__punto{background:var(--accent);border-color:var(--accent);transform:scale(1.08)} .ruta__nodo:hover .ruta__punto::before,.ruta__nodo:focus-within .ruta__punto::before{opacity:1} .ruta__et{font-family:var(--font-head);font-size:.76rem;font-weight:600;color:var(--text-light);white-space:nowrap;text-align:center} .ruta__lista{display:none} .no-js .ruta__lista{display:block} /* ============================================================ 7. BANDAS DE IDIOMA ============================================================ */ .bandas{display:grid;gap:24px} .banda{position:relative;display:block;border-radius:var(--radius);overflow:hidden;isolation:isolate; min-height:230px;display:flex;align-items:flex-end;box-shadow:var(--shadow);transition:transform var(--tr),box-shadow var(--tr)} .banda:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.25,.6,.3,1)} .banda:hover img{transform:scale(1.05)} .banda::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(84deg,rgba(10,31,53,.93) 0%,rgba(10,31,53,.74) 48%,rgba(10,31,53,.28) 100%)} .banda__cuerpo{padding:2rem 2.2rem;color:#fff;max-width:34rem} .banda__cuerpo h3{color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:.5rem} .banda__cuerpo p{font-size:.94rem;color:rgba(255,255,255,.85);margin-bottom:1rem} .banda__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem} .chip{display:inline-flex;align-items:center;font-family:var(--font-head);font-size:.74rem;font-weight:600; padding:.28rem .78rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.13);color:#fff;border:1px solid var(--line-inv)} .chip--acento{background:var(--accent);color:var(--brand-deeper);border-color:var(--accent)} .banda .enlace-flecha{color:var(--accent)} .banda .enlace-flecha:hover{color:#fff} /* ============================================================ 8. TARJETAS ============================================================ */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .cards--2{grid-template-columns:repeat(2,1fr)} .cards--4{grid-template-columns:repeat(4,1fr)} .card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden; display:flex;flex-direction:column;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent} .card__media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-light)} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.25,.6,.3,1)} .card:hover .card__media img{transform:scale(1.06)} .card__cuerpo{padding:24px 24px 26px;display:flex;flex-direction:column;gap:.65rem;flex:1} .card__cuerpo h3{font-size:1.1rem} .card__cuerpo p{color:var(--text-light);font-size:.92rem;flex:1} .card__ico{width:46px;height:46px;border-radius:14px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:.2rem} .card__ico svg{width:23px;height:23px;stroke:var(--brand-dark);fill:none;stroke-width:1.7} .lista-check{display:grid;gap:.7rem} .lista-check li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem} .lista-check li::before{content:"";flex:none;width:20px;height:20px;margin-top:.15rem;border-radius:50%; background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain} .section--honda .lista-check li{color:var(--inv-2)} /* Dentro de una sección honda la tarjeta sigue siendo blanca: si no se revierte el color heredado, el h3 queda blanco sobre blanco. */ .section--honda .card h3{color:var(--brand-deep)} .section--honda .card .lista-check li{color:var(--text)} .lista-check--dos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.2rem} @media (max-width:640px){.lista-check--dos{grid-template-columns:1fr}} .contacto-item .nota{display:block;margin-top:.35rem;font-size:.88rem;font-weight:400;color:var(--text-light)} /* ============================================================ 9. CUADRO DE CLASES POR ETAPA Un solo atributo data-z coordina pestañas, panel y regla de duración. Los paneles se ocultan con [hidden], que es lo que los retira del árbol de accesibilidad. ============================================================ */ .etapas{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .etapas__tabs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg-light);border-bottom:1px solid var(--border-soft)} .etapas__tab{position:relative;padding:1.15rem 1rem;text-align:center;font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--text-light);transition:color var(--tr),background var(--tr)} .etapas__tab+.etapas__tab{border-left:1px solid var(--border-soft)} .etapas__tab small{display:block;font-weight:500;font-size:.76rem;opacity:.8;margin-top:.15rem} .etapas__tab:hover{color:var(--brand-dark);background:#fff} .etapas__tab[aria-selected="true"]{color:var(--brand-deep);background:#fff} .etapas__tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);animation:etapaSub .4s cubic-bezier(.25,.6,.3,1)} @keyframes etapaSub{from{transform:scaleX(.2)}to{transform:scaleX(1)}} /* display:grid pisa la regla por defecto del navegador para [hidden]. Sin esta línea los tres paneles se ven a la vez. */ .etapas__panel[hidden]{display:none} .etapas__panel{padding:2rem 2.1rem 2.2rem;display:grid;grid-template-columns:1.15fr 1fr;gap:2.2rem;align-items:start;animation:etapaEntra .45s cubic-bezier(.25,.6,.3,1)} @keyframes etapaEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .etapas__panel h3{font-size:1.22rem;margin-bottom:.55rem} .etapas__panel p{color:var(--text-light);font-size:.95rem;margin-bottom:1.1rem} .etapas__datos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.3rem} .dato{border-left:3px solid var(--accent);padding-left:.85rem} .dato b{display:block;font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--brand-deep);line-height:1.1} .dato span{font-size:.8rem;color:var(--text-light)} /* Regla de duración: 55 y 85 min a escala real */ .regla{background:var(--bg-light);border-radius:var(--radius-sm);padding:1.3rem 1.4rem} .regla__t{font-family:var(--font-head);font-size:.78rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);margin-bottom:1rem} .regla__fila{display:flex;align-items:center;gap:.9rem;margin-bottom:.75rem} .regla__et{font-family:var(--font-head);font-size:.8rem;font-weight:600;color:var(--text-light);width:5.4rem;flex:none} .regla__barra{flex:1;height:12px;border-radius:var(--radius-pill);background:var(--border);overflow:hidden} .regla__barra i{display:block;height:100%;width:0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--brand),var(--brand-dark));transition:width 1s cubic-bezier(.25,.6,.3,1)} .regla__fila.is-on .regla__et{color:var(--brand-deep)} .regla__fila.is-on .regla__barra i{background:linear-gradient(90deg,var(--accent),var(--accent-dark))} .regla__min{font-family:var(--font-head);font-weight:700;font-size:.86rem;color:var(--brand-deep);width:3.6rem;text-align:right;flex:none} .regla__pie{font-size:.79rem;color:var(--text-light);margin-top:.9rem;line-height:1.5} /* ============================================================ 10. CUADRO DE TARIFAS El conmutador multiplica por 9 las mensualidades reales del curso (15 sep – 15 jun). No hay descuento inventado: la etiqueta dice literalmente "9 mensualidades de X €". ============================================================ */ .tarifas__conmutador{display:inline-flex;padding:5px;border-radius:var(--radius-pill);background:var(--bg-light);border:1px solid var(--border);margin:0 auto 2.6rem;position:relative} .tarifas__conmutador button{position:relative;z-index:1;padding:.6rem 1.5rem;border-radius:var(--radius-pill);font-family:var(--font-head);font-size:.86rem;font-weight:600;color:var(--text-light);transition:color var(--tr)} .tarifas__conmutador button[aria-pressed="true"]{color:var(--brand-deeper)} .tarifas__marcador{position:absolute;top:5px;bottom:5px;border-radius:var(--radius-pill);background:var(--accent);transition:left .38s cubic-bezier(.34,1.2,.64,1),width .38s cubic-bezier(.34,1.2,.64,1);z-index:0} .tarifas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} .tarifa{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.7rem 1.9rem; display:flex;flex-direction:column;gap:.55rem;overflow:hidden;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)} .tarifa::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.25,.6,.3,1)} .tarifa:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .tarifa:hover::before{transform:scaleX(1)} .tarifa--destacada{border-color:var(--brand);box-shadow:var(--shadow)} .tarifa--destacada::before{background:var(--accent);transform:scaleX(1)} .tarifa__etapa{font-family:var(--font-head);font-size:1.08rem;font-weight:700;color:var(--brand-deep)} .tarifa__edad{font-size:.83rem;color:var(--text-light)} .tarifa__precio{display:flex;align-items:baseline;gap:.3rem;margin:.9rem 0 .2rem} .tarifa__cifra{font-family:var(--font-head);font-size:3rem;font-weight:750;color:var(--brand-deep);line-height:1;font-variant-numeric:tabular-nums} .tarifa__moneda{font-family:var(--font-head);font-size:1.5rem;font-weight:650;color:var(--brand-deep)} .tarifa__periodo{font-size:.86rem;color:var(--text-light);min-height:2.4em} .tarifa__detalle{border-top:1px solid var(--border-soft);margin-top:1rem;padding-top:1.1rem;display:grid;gap:.55rem} .tarifa__detalle li{display:flex;gap:.6rem;font-size:.88rem;color:var(--text-light)} .tarifa__detalle li::before{content:"";flex:none;width:17px;height:17px;margin-top:.2rem;background:var(--brand); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain} .tarifa .btn{margin-top:1.3rem;width:100%} .tarifas__nota{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;align-items:center; background:var(--brand-soft);border-radius:var(--radius);padding:1.15rem 1.5rem} .tarifas__nota p{font-size:.9rem;color:var(--text)} .tarifas__nota b{font-family:var(--font-head);color:var(--brand-deep)} /* ============================================================ 11. FRANJA DE DATOS / CERTIFICACIONES ============================================================ */ .datos-franja{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center} .datos-franja .dato-n{font-family:var(--font-head);font-size:clamp(2.1rem,4vw,3rem);font-weight:750;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums} .datos-franja .dato-l{font-size:.88rem;color:var(--inv-2);margin-top:.55rem} .sellos{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem} .sello{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.15rem;border-radius:var(--radius-pill); border:1px solid var(--border);background:#fff;font-family:var(--font-head);font-size:.85rem;font-weight:600;color:var(--brand-deep); transition:border-color var(--tr),transform var(--tr)} .sello:hover{border-color:var(--accent);transform:translateY(-2px)} .sello::before{content:"";width:16px;height:16px;flex:none;background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 14.8 8l6.2.9-4.5 4.3 1.1 6.1L12 16.4 6.4 19.3l1.1-6.1L3 8.9 9.2 8z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 14.8 8l6.2.9-4.5 4.3 1.1 6.1L12 16.4 6.4 19.3l1.1-6.1L3 8.9 9.2 8z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain} .cita{border-left:4px solid var(--accent);padding:.4rem 0 .4rem 1.5rem;max-width:44rem;margin:0 auto} .cita p{font-family:var(--font-head);font-size:clamp(1.05rem,2vw,1.35rem);font-weight:500;color:var(--brand-deep);line-height:1.5;font-style:italic} .cita cite{display:block;margin-top:.7rem;font-style:normal;font-size:.85rem;color:var(--text-light);font-weight:600} .section--honda .cita p{color:#fff} .section--honda .cita cite{color:var(--inv-3)} /* Bloque de dos columnas texto + foto */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} .duo--inv .duo__media{order:-1} .duo__media{position:relative} .duo__media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%} .duo__media::after{content:"";position:absolute;left:-18px;bottom:-18px;width:120px;height:120px;z-index:-1;border-radius:var(--radius); background-image:radial-gradient(var(--brand) 1.5px,transparent 1.5px);background-size:14px 14px;opacity:.35} .duo__texto h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:1rem} .duo__texto p{color:var(--text-light);margin-bottom:1rem} .duo__texto .lista-check{margin:1.4rem 0} /* ============================================================ 12. FAQ —
nativo, cero JavaScript ============================================================ */ .faq details{border-bottom:1px solid var(--border-soft)} .faq summary{list-style:none;padding:1.2rem 2.6rem 1.2rem 0;position:relative;cursor:pointer; font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--brand-deep)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--brand-dark)} .faq summary::after{content:"";position:absolute;right:.5rem;top:1.6rem;width:11px;height:11px; border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform var(--tr),top var(--tr)} .faq details[open] summary::after{transform:rotate(-135deg);top:1.85rem} .faq__a{padding:0 2.6rem 1.4rem 0;color:var(--text-light);font-size:.95rem} .faq__a p+p{margin-top:.7rem} .faq--dos{display:grid;grid-template-columns:1fr 1fr;gap:0 3.2rem} .faq__col{min-width:0} .faq__cab{display:flex;align-items:center;gap:1rem;font-family:var(--font-head);font-size:.78rem;font-weight:650; letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.6rem} .faq__cab::after{content:"";flex:1;height:1px;background:var(--border)} .faq--dos details{border:1px solid var(--border-soft);border-radius:var(--radius-sm);margin-bottom:.7rem;background:#fff;position:relative;transition:border-color var(--tr),box-shadow var(--tr)} .faq--dos details[open]{border-color:var(--brand);box-shadow:var(--shadow)} .faq--dos details::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--accent);opacity:0;transition:opacity var(--tr)} .faq--dos details[open]::before{opacity:1} .faq--dos summary{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:.9rem;padding:1rem 1.1rem} .faq--dos summary::after{display:none} .faq__n{font-family:var(--font-head);font-size:.78rem;font-weight:700;color:var(--brand-dark);padding-top:.15rem} .faq__q{display:block;font-size:.95rem;line-height:1.4} .faq__mas{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);position:relative;transition:var(--tr)} .faq__mas::after{content:"";position:absolute;left:50%;top:46%;width:8px;height:8px;margin-left:-4px;margin-top:-4px; border-right:2px solid var(--brand-dark);border-bottom:2px solid var(--brand-dark);transform:rotate(45deg);transition:transform var(--tr)} .faq--dos summary:hover .faq__mas{border-color:var(--accent);background:var(--accent)} .faq--dos summary:hover .faq__mas::after{border-color:var(--brand-deeper)} .faq--dos details[open] .faq__mas{background:var(--brand-dark);border-color:var(--brand-dark)} .faq--dos details[open] .faq__mas::after{border-color:#fff;transform:rotate(-135deg);top:54%} .faq--dos .faq__a{padding:0 1.1rem 1.15rem calc(1.1rem + 1.9rem)} /* ============================================================ 13. FORMULARIO ============================================================ */ .form-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:2.4rem 2.2rem} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-field{position:relative} .form-field.full{grid-column:1/-1} .form-field label{display:block;font-size:.82rem;font-weight:600;color:var(--brand-deep);margin-bottom:.35rem;font-family:var(--font-head)} .form-field input,.form-field select,.form-field textarea{width:100%;padding:.82rem 1rem;border:2px solid var(--border); border-radius:var(--radius-sm);background:#fff;font-size:.95rem;transition:border-color var(--tr),box-shadow var(--tr)} .form-field textarea{min-height:130px;resize:vertical} .form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(74,127,191,.14)} .form-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .form-captcha{grid-column:1/-1} .form-captcha label{display:block;font-size:.84rem;font-weight:600;color:var(--brand-deep);margin-bottom:.4rem} .form-captcha input[type="number"]{width:150px;padding:.7rem 1rem;border:2px solid var(--border);border-radius:var(--radius-sm)} .form-captcha input[type="number"]:focus{outline:none;border-color:var(--brand)} .form-privacy{grid-column:1/-1;display:flex;gap:.65rem;align-items:flex-start;margin:.3rem 0} .form-privacy input[type="checkbox"]{margin-top:.3rem;width:16px;height:16px;flex:0 0 16px;accent-color:var(--brand-dark)} .form-privacy label{font-size:.85rem;color:var(--text-light);line-height:1.55;font-family:var(--font-body);font-weight:400} .form-privacy a{color:var(--brand-dark);text-decoration:underline} .form-msg{grid-column:1/-1;font-size:.92rem;padding:.8rem 1.1rem;border-radius:var(--radius-sm);display:none} .form-msg.ok{display:block;background:#e6f4ec;color:#175c34} .form-msg.err{display:block;background:#fceaea;color:#8f1f1f} .form-grid .btn{grid-column:1/-1;justify-self:start} .contacto-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,4vw,3.5rem);align-items:start} .contacto-datos{display:grid;gap:1.1rem} .contacto-item{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.15rem 1.3rem;transition:border-color var(--tr),transform var(--tr)} .contacto-item:hover{border-color:var(--brand);transform:translateX(3px)} .contacto-item svg{width:22px;height:22px;stroke:var(--brand-dark);fill:none;stroke-width:1.7;flex:none;margin-top:.2rem} .contacto-item b{display:block;font-family:var(--font-head);font-size:.8rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin-bottom:.2rem} .contacto-item span,.contacto-item a{font-size:1rem;color:var(--brand-deep);font-weight:500} .contacto-item a:hover{color:var(--brand-dark)} .mapa-embed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border-soft)} .mapa-embed iframe{width:100%;height:340px;border:0;display:block} /* ============================================================ 14. CONTENIDO DE PÁGINA Y ARTÍCULO ============================================================ */ .page-banner{position:relative;margin-top:var(--header-h);background:var(--brand-deep);color:#fff;overflow:hidden;isolation:isolate} .page-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.34} .page-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(80deg,rgba(10,31,53,.95),rgba(10,31,53,.72))} .page-banner .container{padding-top:clamp(3rem,7vw,4.6rem);padding-bottom:clamp(2.6rem,6vw,4rem)} .breadcrumb{font-size:.8rem;color:var(--inv-3);margin-bottom:1rem} .breadcrumb a{color:var(--inv-2)} .breadcrumb a:hover{color:var(--accent)} .breadcrumb span{margin:0 .45rem;opacity:.5} .page-banner h1{font-size:clamp(1.8rem,3.8vw,2.8rem);color:#fff;margin-bottom:.8rem;max-width:22em} .page-banner .entradilla{font-size:1.03rem;color:rgba(255,255,255,.86);max-width:44em} .prosa{max-width:920px;margin:0 auto} .prosa h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:2.4rem 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-soft)} .prosa h3{font-size:1.13rem;margin:1.8rem 0 .6rem} .prosa p{margin-bottom:1.1rem;line-height:1.85;font-size:1rem} .prosa ul,.prosa ol{margin:0 0 1.2rem 1.4rem;list-style:disc} .prosa ol{list-style:decimal} .prosa li{margin-bottom:.45rem;line-height:1.75} .prosa a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px} .prosa a:hover{color:var(--accent-ink)} .prosa img{border-radius:var(--radius-sm);margin:1.6rem 0;box-shadow:var(--shadow)} .prosa figure{margin:1.8rem 0} .prosa figcaption{font-size:.83rem;color:var(--text-light);margin-top:.5rem;text-align:center} .prosa blockquote{border-left:4px solid var(--accent);margin:1.6rem 0;padding:.9rem 1.4rem;background:var(--bg-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text)} .prosa table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.92rem} .prosa th{background:var(--brand-deep);color:#fff;padding:.75rem 1rem;text-align:left;font-family:var(--font-head);font-size:.84rem} .prosa td{padding:.7rem 1rem;border-bottom:1px solid var(--border-soft)} .prosa tr:nth-child(even) td{background:var(--bg-light)} .prosa .primera{font-size:1.08rem;color:var(--brand-deep)} .tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .aviso{background:var(--brand-soft);border-left:4px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1.1rem 1.3rem;margin:1.6rem 0;font-size:.94rem} .aviso b{color:var(--brand-deep)} .cta-bloque{background:linear-gradient(126deg,var(--brand-deep),var(--brand-deeper));border-radius:var(--radius);padding:clamp(2.2rem,5vw,3.2rem);text-align:center;color:#fff;position:relative;overflow:hidden;isolation:isolate} .cta-bloque::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:22px 22px; -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 20%,transparent 100%); mask-image:radial-gradient(80% 80% at 50% 50%,#000 20%,transparent 100%)} .cta-bloque h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.95rem);margin-bottom:.7rem} .cta-bloque p{color:var(--inv-2);max-width:40rem;margin:0 auto 1.7rem} .cta-bloque .acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* ============================================================ 15. BLOG Las tarjetas enlazan con ruta ABSOLUTA (/blog/slug): así no dependen de que la URL del índice termine en barra. ============================================================ */ .blog-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.2rem} .filter-label{font-family:var(--font-head);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-light);font-weight:650;margin-bottom:.6rem} .filter-bar,.sort-bar{display:flex;flex-wrap:wrap;gap:.5rem} .filter-btn,.sort-btn{border:1px solid var(--border);background:#fff;color:var(--brand-deep);padding:.45rem 1.05rem;border-radius:var(--radius-pill);font-family:var(--font-head);font-size:.82rem;font-weight:600;transition:var(--tr)} .filter-btn:hover,.sort-btn:hover{border-color:var(--brand);color:var(--brand-dark)} .filter-btn.active{background:var(--accent);border-color:var(--accent);color:var(--brand-deeper)} .sort-btn.active{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff} .blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem} .blog-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--tr),box-shadow var(--tr)} .blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .blog-card__media{display:block;aspect-ratio:980/420;overflow:hidden;background:var(--bg-light)} .blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease} .blog-card:hover .blog-card__media img{transform:scale(1.05)} .blog-card__cuerpo{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .blog-card__meta{display:flex;align-items:center;gap:.7rem;font-size:.76rem;color:var(--text-light)} .blog-card__cat{background:var(--brand-soft);color:var(--brand-dark);padding:.2rem .7rem;border-radius:var(--radius-pill);font-weight:600;font-size:.72rem;font-family:var(--font-head)} .blog-card h3{font-size:1.02rem;line-height:1.35} .blog-card h3 a:hover{color:var(--brand-dark)} .blog-card p{font-size:.88rem;color:var(--text-light);flex:1} .blog-vacio{text-align:center;padding:3rem 0;color:var(--text-light)} .blog-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.45rem;margin-top:3rem} .page-btn{min-width:42px;height:42px;padding:0 .9rem;border-radius:var(--radius-sm);border:2px solid var(--border);background:#fff;color:var(--brand-deep);font-weight:700;font-size:.88rem;font-family:var(--font-head);transition:var(--tr)} .page-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand-dark)} .page-btn.current{background:var(--accent);border-color:var(--accent);color:var(--brand-deeper)} .page-btn:disabled{opacity:.35;cursor:default} .page-info{flex-basis:100%;text-align:center;font-size:.8rem;color:var(--text-light);margin-top:.6rem} .post-meta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;font-size:.84rem;color:var(--inv-2);margin-top:.9rem} .post-cat{background:var(--accent);color:var(--brand-deeper);padding:.22rem .8rem;border-radius:var(--radius-pill);font-family:var(--font-head);font-weight:650;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase} .post-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--border-soft);flex-wrap:wrap} .post-nav a{font-family:var(--font-head);font-size:.85rem;font-weight:650;color:var(--brand-dark)} .post-nav a:hover{color:var(--accent-ink)} /* ============================================================ 16. BUSCADOR ============================================================ */ .buscar-form{display:flex;gap:.6rem;max-width:640px;margin:0 0 2rem} .buscar-form input{flex:1;padding:.9rem 1.2rem;border:2px solid var(--border);border-radius:var(--radius-pill)} .buscar-form input:focus{outline:none;border-color:var(--brand)} .search-hit{padding:1.5rem 0;border-bottom:1px solid var(--border-soft)} .search-hit h2{font-size:1.08rem;margin-bottom:.35rem;border:none;padding:0} .search-hit h2 a:hover{color:var(--brand-dark)} .search-hit .url{font-size:.79rem;color:var(--brand-dark);margin-bottom:.4rem} .search-hit p{font-size:.92rem;color:var(--text-light)} .search-hit mark{background:rgba(244,166,42,.32);color:inherit;padding:0 3px;border-radius:3px} /* ============================================================ 17. PIE ============================================================ */ /* ---- Mapa a sangre completa, sobre el pie ---- Mientras no hay consentimiento solo existe el marcador propio: ninguna petición sale a dominios de terceros. Las dos alturas (marcador e iframe) se mantienen iguales para que el pie no dé un salto al cargarse. */ .mapa{position:relative;background:var(--brand-deeper);min-height:485px; display:flex;align-items:center;justify-content:center;overflow:hidden} .mapa::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle at 22% 30%, rgba(74,127,191,.30), transparent 55%), radial-gradient(circle at 78% 72%, rgba(244,166,42,.16), transparent 55%);} .mapa__marcador{position:relative;z-index:1;padding:44px 22px;width:100%;display:flex;justify-content:center} .mapa__caja{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg); padding:30px 32px;max-width:460px;width:100%;text-align:center} .mapa__ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px; border-radius:14px;background:var(--brand-soft);margin-bottom:.9rem} .mapa__ico svg{width:24px;height:24px;stroke:var(--brand-dark);fill:none;stroke-width:1.7} .mapa__et{font-family:var(--font-head);font-size:.78rem;font-weight:650;letter-spacing:.12em; text-transform:uppercase;color:var(--brand-dark);margin:0 0 .5rem} .mapa__dir{font-family:var(--font-head);font-size:1.18rem;font-weight:650;color:var(--brand-deep); line-height:1.4;margin:0 0 .9rem} .mapa__nota{font-size:.84rem;color:var(--text-light);margin:0 0 1.4rem} .mapa__acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .mapa.is-cargado{display:block;min-height:0;background:none} .mapa.is-cargado::before{display:none} .mapa iframe{display:block;width:100%;height:485px;border:0} @media (max-width:760px){ .mapa{min-height:0} .mapa iframe{height:380px} .mapa__marcador{padding:34px 18px} .mapa__caja{padding:26px 22px} .mapa__acciones .btn{width:100%} } .site-footer{background:var(--brand-deep);color:var(--inv-2);margin-top:0} .footer-main{padding:76px 0 52px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px} .footer-brand img{height:52px;width:auto;margin-bottom:1.2rem} .footer-brand p{font-size:.92rem;max-width:28em} .footer-col h2{font-family:var(--font-head);color:#fff;font-size:.86rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px;position:relative;padding-bottom:12px} .footer-col h2::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;background:var(--accent);border-radius:2px} .footer-col li{margin-bottom:10px} .footer-col a{color:var(--inv-2);font-size:.91rem} .footer-col a:hover{color:var(--accent)} .footer-contact li{display:flex;gap:12px;align-items:flex-start;font-size:.91rem;margin-bottom:14px} .footer-contact svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.7;flex:none;margin-top:3px} .footer-contact a{color:#fff;font-weight:500} .footer-social{display:flex;gap:10px;margin-top:20px} .footer-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);color:#dbe6f2} .footer-social svg{width:19px;height:19px} .footer-social a:hover{background:var(--accent);color:var(--brand-deeper)} .footer-legal{border-top:1px solid var(--line-inv);padding:22px 0 24px; background:linear-gradient(180deg,rgba(10,31,53,0),rgba(10,31,53,.55))} .footer-legal .container{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem 32px;align-items:center} .legal-links{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;gap:8px 22px} .legal-links a,.legal-links button{color:var(--inv-2);font-size:.84rem} .legal-links a:hover,.legal-links button:hover{color:var(--accent)} .copy{grid-column:1;grid-row:2;font-size:.82rem;color:var(--inv-3)} /* Firma de la agencia: pastilla con marco, no un enlace suelto en el texto. Es la única marca ajena del pie, así que se separa del bloque legal. */ .firma{grid-column:2;grid-row:1/span 2;justify-self:end;display:inline-flex;align-items:center;gap:.85rem;padding:.5rem .5rem .5rem 1.05rem; border:1px solid var(--line-inv);border-radius:999px;background:rgba(255,255,255,.04); transition:border-color var(--tr),background var(--tr),transform var(--tr)} .firma__et{font-size:.76rem;color:var(--inv-3);white-space:nowrap} .firma__marca{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .85rem;border-radius:999px; background:var(--accent);color:var(--brand-deeper); font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.09em;white-space:nowrap} .firma__marca svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1; stroke-linecap:round;stroke-linejoin:round;transition:transform var(--tr)} .firma:hover{border-color:var(--accent);background:rgba(244,166,42,.10);transform:translateY(-2px)} .firma:hover .firma__et{color:#fff} .firma:hover .firma__marca svg{transform:translateX(3px)} .firma:focus-visible{outline:3px solid var(--accent);outline-offset:3px} /* ---- Panel del formulario ---- La columna derecha tiene que leerse como una pieza distinta de la izquierda: cabecera oscura con el avance, cuerpo claro con los campos. El indicador de avance es honesto: cuenta campos OBLIGATORIOS válidos, no campos rellenados. */ .form-panel{position:relative;border-radius:var(--radius);overflow:hidden; background:#fff;box-shadow:0 26px 64px rgba(18,50,82,.20); border:1px solid var(--border-soft)} .form-panel__cab{position:relative;overflow:hidden;padding:1.9rem 2.1rem 1.6rem; background:linear-gradient(150deg,var(--brand-deep),var(--brand-deeper))} .form-panel__cab::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse at 100% 0%, rgba(244,166,42,.22), transparent 60%), repeating-linear-gradient(118deg, rgba(255,255,255,.04) 0 2px, transparent 2px 20px)} .form-panel__titulo{position:relative;z-index:1} .form-panel__cab .eyebrow{color:var(--accent)} .form-panel__cab h2{color:#fff;font-size:1.6rem;margin:.3rem 0 .5rem} .form-panel__cab>.form-panel__titulo>p:last-child{color:var(--inv-2);font-size:.92rem;margin:0} .form-panel__cuerpo{padding:2rem 2.1rem 2.2rem} .form-avance{position:relative;z-index:1;margin-top:1.35rem} .form-avance__cifras{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; margin-bottom:.5rem} .form-avance__n{font-family:var(--font-head);font-size:.82rem;color:var(--inv-3);letter-spacing:.04em} .form-avance__n b{color:#fff;font-size:1.05rem;font-weight:700} .form-avance__n b::after{content:" / ";color:var(--inv-3);font-weight:400;font-size:.82rem} .form-avance__et{font-family:var(--font-head);font-size:.78rem;font-weight:650; letter-spacing:.09em;text-transform:uppercase;color:var(--accent);text-align:right} .form-avance__barra{height:5px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden} .form-avance__barra i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .5s cubic-bezier(.25,.6,.3,1)} .form-panel.is-completo .form-avance__barra i{background:linear-gradient(90deg,#2f9e6a,#4fc78d)} .form-panel.is-completo .form-avance__et{color:#8ee3b6} /* Campo válido: palomita a la derecha de la etiqueta, no dentro del campo (dentro chocaría con la flecha nativa de los