/* ==========================================================================
   AUTOMOCIÓN REMECA · styles.css
   Hoja global única. Requiere tokens.css cargado antes.
   Toda página servida debe enlazar LAS DOS hojas, incluidas 404 y legales:
   si una plantilla se salta esta hoja, el botón de WhatsApp y el de volver
   arriba desaparecen sin avisar.

   Índice
     01 · Reinicio y base
     02 · Tipografía y utilidades
     03 · Contenedores, secciones y encabezados de sección
     04 · Botones y enlaces
     05 · Marco de imagen (idea visual del proyecto)
     06 · Aparición al entrar en pantalla
     07 · Cabecera, navegación y buscador
     08 · Encabezado con pase de fotografías
     09 · Cabecera de página interior
     10 · Bloque orbital de servicios
     11 · Tarjetas
     12 · Cifras y datos
     13 · Proceso de trabajo (acordeón con imagen)
     14 · Bandas de llamada a la acción
     15 · Preguntas frecuentes
     16 · Formularios
     17 · Contacto y mapa
     18 · Índice de consejos y buscador
     19 · Contenido de artículo
     20 · Pie de página
     21 · Botón lateral de WhatsApp y volver arriba
     22 · Aviso de cookies (complemento del CSS inyectado)
     23 · Movimiento reducido
     24 · Impresión
   ========================================================================== */

/* ── 01 · Reinicio y base ─────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-header-scrolled) + 1rem);
}

body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--lh-body);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.nav-abierta{overflow:hidden;}

img,picture,video,svg{display:block;max-width:100%;}
img{height:auto;}

/* <picture> es un contenedor sin altura propia. Aunque sea display:block, su
   alto se resuelve por el contenido, así que un `img{height:100%}` dentro de
   él resolvía contra `auto` y la imagen tomaba su altura natural: en los
   contenedores que fijan proporción (el marco 3:4 de El taller, las
   diapositivas del encabezado) quedaba un hueco de hasta 340 px por debajo de
   la fotografía. El <picture> tiene que heredar la caja completa. */
.marco picture,
.tarjeta__media picture,
.proceso__capa picture,
.cab-pagina__media picture,
.hero__slide picture{display:block;width:100%;height:100%;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{padding:0;list-style:none;}
a{color:var(--c-brand);text-decoration-thickness:1px;text-underline-offset:.18em;}
a:hover{color:var(--c-brand-600);}

:focus-visible{
  outline:3px solid var(--c-cyan-700);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.tema-oscuro :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible{outline-color:var(--c-cyan);}

::selection{background:var(--c-cyan-a45);color:var(--c-ink-900);}

/* Salto al contenido: visible solo con teclado. */
.saltar{
  position:absolute;left:var(--sp-4);top:-100px;z-index:200;
  padding:.7rem 1.2rem;border-radius:var(--r-sm);
  background:var(--c-red);color:var(--c-inv);font-weight:700;
  transition:top var(--tr);
}
.saltar:focus{top:var(--sp-4);color:var(--c-inv);}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── 02 · Tipografía y utilidades ─────────────────────────────────────── */

h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  font-weight:700;
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--c-text);
  text-wrap:balance;
}
h1{font-size:var(--text-4xl);}
h2{font-size:var(--text-3xl);}
h3{font-size:var(--text-xl);}
h4{font-size:var(--text-lg);}
p{text-wrap:pretty;}

.tema-oscuro h1,.tema-oscuro h2,.tema-oscuro h3,.tema-oscuro h4{color:var(--c-inv);}
.tema-oscuro{color:var(--c-inv-2);background:var(--c-ink-800);}

/* Antetítulo: rótulo corto con guion e índice numérico. Es la voz técnica
   del sitio y aparece en todas las secciones. */
.antetitulo{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-head);
  font-size:var(--text-xs);font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--c-cyan-700);
  margin-bottom:var(--sp-3);
}
.tema-oscuro .antetitulo,.hero .antetitulo{color:var(--c-cyan);}
.antetitulo::before{
  content:"";width:clamp(18px,3vw,34px);height:2px;flex:none;
  background:linear-gradient(90deg,currentColor,transparent);
}
.antetitulo b{font-weight:700;font-variant-numeric:tabular-nums;opacity:.65;}

.entradilla{
  font-size:var(--text-lg);
  line-height:1.65;
  color:var(--c-text-2);
  max-width:64ch;
}
.tema-oscuro .entradilla{color:var(--c-inv-2);}

.medida{max-width:68ch;}
.centrado{text-align:center;}
.centrado .antetitulo{justify-content:center;}
.centrado .entradilla{margin-inline:auto;}

.acento{color:var(--c-cyan-700);}
.tema-oscuro .acento,.hero .acento{color:var(--c-cyan);}

/* ── 03 · Contenedores, secciones y encabezados de sección ────────────── */

.contenedor{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--pad-x);
}
.contenedor--estrecho{max-width:var(--container-narrow);}

.seccion{padding-block:var(--sp-sec);position:relative;}
.seccion--alt{background:var(--g-seccion);}
.seccion--oscura{background:var(--c-ink-800);color:var(--c-inv-2);}
.seccion--marca{background:var(--g-marca);color:var(--c-inv-2);}
.seccion--compacta{padding-block:calc(var(--sp-sec) * .62);}

.sec-cab{margin-bottom:var(--sp-7);}
.sec-cab h2{margin-bottom:var(--sp-3);}
.sec-cab--dos{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--sp-5) var(--sp-gut);align-items:end;
}
@media (max-width:900px){.sec-cab--dos{grid-template-columns:1fr;align-items:start;}}

/* Trama de puntos: textura de fondo enmascarada para que no se vea el canto
   del rectángulo. Se usa en secciones oscuras y dentro de los marcos. */
.trama{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(var(--c-cyan-a25) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(85% 80% at 50% 45%,#000 20%,transparent 100%);
  mask-image:radial-gradient(85% 80% at 50% 45%,#000 20%,transparent 100%);
}

/* Rejillas reutilizables: 3 → 2 → 1 */
.rejilla{display:grid;gap:var(--sp-gut);}
.rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1000px){
  .rejilla--3,.rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:1fr;}
}

/* Bloque de dos columnas texto + imagen */
.dueto{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-gut) clamp(2rem,1rem + 4vw,5rem);align-items:center;
}
.dueto--invertido .dueto__media{order:-1;}
@media (max-width:980px){
  .dueto{grid-template-columns:1fr;}
  .dueto--invertido .dueto__media{order:0;}
}

/* ── 04 · Botones y enlaces ───────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  font-family:var(--font-head);font-size:var(--text-sm);font-weight:700;
  letter-spacing:.01em;
  border-radius:var(--r-pill);border:2px solid transparent;
  text-decoration:none;white-space:nowrap;
  transition:background var(--tr),color var(--tr),border-color var(--tr),
             transform var(--t-fast) var(--ease),box-shadow var(--tr);
}
.btn svg{width:18px;height:18px;flex:none;}
.btn:active{transform:translateY(1px);}

/* Rojo: exclusivamente acción principal. Blanco sobre #DA0D01 = 5,2:1. */
.btn--principal{background:var(--c-red);color:var(--c-inv);box-shadow:var(--sh-red);}
.btn--principal:hover{background:var(--c-red-700);color:var(--c-inv);transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(218,13,1,.4);}

.btn--secundario{background:var(--c-brand);color:var(--c-inv);}
.btn--secundario:hover{background:var(--c-brand-600);color:var(--c-inv);transform:translateY(-2px);}

.btn--linea{border-color:var(--c-line-strong);color:var(--c-text);background:var(--c-bg);}
.btn--linea:hover{border-color:var(--c-brand);color:var(--c-brand);transform:translateY(-2px);}

.btn--linea-inv{border-color:var(--c-line-inv-2);color:var(--c-inv);background:transparent;}
.btn--linea-inv:hover{border-color:var(--c-cyan);color:var(--c-cyan);background:var(--c-cyan-a12);}

.btn--wa{background:#1FA855;color:#fff;}   /* verde institucional de WhatsApp */
.btn--wa:hover{background:#17904a;color:#fff;transform:translateY(-2px);}

.btn--ancho{width:100%;}
.btn--grande{min-height:56px;padding:1rem 2rem;font-size:var(--text-base);}

.btn-grupo{display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.centrado .btn-grupo{justify-content:center;}

/* Enlace con flecha: el desplazamiento de la punta indica afordancia sin
   necesidad de subrayado. */
.enlace-flecha{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:26px;
  font-family:var(--font-head);font-size:var(--text-sm);font-weight:700;
  color:var(--c-brand);text-decoration:none;
}
.enlace-flecha::after{
  content:"";width:16px;height:8px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13M9.5.8 13.2 4 9.5 7.2' fill='none' stroke='%23000' stroke-width='1.4'/%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 8'%3E%3Cpath d='M0 4h13M9.5.8 13.2 4 9.5 7.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--tr);
}
.enlace-flecha:hover::after{transform:translateX(5px);}
.tema-oscuro .enlace-flecha,.hero .enlace-flecha{color:var(--c-cyan);}

/* ── 05 · Marco de imagen ─────────────────────────────────────────────────
   Idea visual propia del proyecto: la «retícula de diagnóstico».
   Las fotografías disponibles son genéricas, así que ninguna se publica
   desnuda. Todas van dentro de un marco con escuadras de cian, trama de
   puntos, velo degradado y, cuando aporta, una etiqueta con índice.
   El resultado se lee como lectura instrumental, no como foto de archivo.
   ------------------------------------------------------------------------ */

.marco{
  position:relative;isolation:isolate;
  border-radius:var(--r-md);overflow:hidden;
  background:var(--c-ink-800);
  box-shadow:var(--sh-md);
}
.marco img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,center);}

/* Velo: sostiene el texto superpuesto y hunde la imagen en la marca. */
.marco::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,11,24,.06) 0%,rgba(5,11,24,.34) 62%,rgba(5,11,24,.78) 100%),
    linear-gradient(90deg,rgba(10,46,140,.24) 0%,rgba(10,46,140,0) 55%);
}

/* Escuadras: cuatro ángulos en L dibujados con degradados, sin elementos
   extra. Se separan del borde al pasar el ratón. */
.marco::after{
  content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--c-cyan),var(--c-cyan)) 0 0/1px var(--bracket) no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) 0 0/var(--bracket) 1px no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) 100% 0/1px var(--bracket) no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) 100% 0/var(--bracket) 1px no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) 0 100%/1px var(--bracket) no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) 0 100%/var(--bracket) 1px no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) 100% 100%/1px var(--bracket) no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) 100% 100%/var(--bracket) 1px no-repeat;
  opacity:.72;
  transition:inset var(--t-slow) var(--ease-out),opacity var(--tr);
}
.marco:hover::after,.marco:focus-within::after{inset:7px;opacity:1;}

.marco__trama{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(76,198,255,.5) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 52%);
  mask-image:linear-gradient(200deg,#000 0%,transparent 52%);
}

/* Etiqueta de esquina con índice: convierte la foto en una toma catalogada. */
.marco__eti{
  position:absolute;left:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .95rem .5rem .85rem;
  background:rgba(5,11,24,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-top:1px solid var(--c-cyan-a45);
  border-right:1px solid var(--c-cyan-a45);
  border-top-right-radius:var(--r-sm);
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-inv);
}
.marco__eti b{color:var(--c-cyan);font-variant-numeric:tabular-nums;}

/* Nota al pie del marco: se usa para declarar que una imagen es ilustrativa. */
.marco-nota{
  margin-top:var(--sp-2);
  font-size:var(--text-xs);color:var(--c-text-2);
}
.tema-oscuro .marco-nota{color:var(--c-inv-3);}

/* Zoom lento al pasar el ratón, solo donde el marco es un enlace. */
.marco--vivo img{transition:transform 1.1s var(--ease-out);}
.marco--vivo:hover img,.marco--vivo:focus-within img{transform:scale(1.05);}

.marco--16-9{aspect-ratio:16/9;}
.marco--4-3{aspect-ratio:4/3;}
.marco--3-4{aspect-ratio:3/4;}
.marco--1-1{aspect-ratio:1/1;}

/* Marco desplazado: dos capas con una lámina de cian detrás. */
.marco-desplazado{position:relative;}
.marco-desplazado::before{
  content:"";position:absolute;inset:auto -18px -18px auto;
  width:62%;height:62%;z-index:-1;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--c-cyan-a25),transparent 65%);
  border:1px solid var(--c-cyan-a25);
}

/* ── 06 · Aparición al entrar en pantalla ─────────────────────────────── */

.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s var(--ease);
}
.reveal.rx-l{transform:translateX(-24px);}
.reveal.rx-r{transform:translateX(24px);}
/* Por debajo de 1080 px el desplazamiento lateral se convierte en vertical:
   translateX sobre un bloque a ancho completo desborda en horizontal. */
@media (max-width:1080px){
  .reveal.rx-l,.reveal.rx-r{transform:translateY(20px);}
}
.reveal.is-in{opacity:1;transform:none;}
/* Salida de emergencia: sin JavaScript nada queda oculto. */
.no-js .reveal{opacity:1;transform:none;}

.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;}
.reveal[data-retardo="6"]{transition-delay:.54s;}

/* ── 07 · Cabecera, navegación y buscador ─────────────────────────────── */

.site-header{
  position:fixed;inset:0 0 auto;z-index:var(--z-header);
  background:rgba(5,11,24,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-line-inv);
  transition:background var(--tr),border-color var(--tr);
}
.no-js .site-header{position:absolute;}
.site-header.scrolled{background:rgba(5,11,24,.96);box-shadow:0 10px 30px rgba(3,8,20,.45);}

/* Barra superior: datos de contacto y acceso rápido. */
.barra-sup{
  border-bottom:1px solid var(--c-line-inv);
  font-size:var(--text-xs);color:var(--c-inv-3);
}
.barra-sup__in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:34px;
}
.barra-sup__datos{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;}
.barra-sup a{color:var(--c-inv-2);text-decoration:none;display:inline-flex;align-items:center;gap:.42rem;}
.barra-sup a:hover{color:var(--c-cyan);}
.barra-sup svg{width:13px;height:13px;color:var(--c-cyan);flex:none;}
.barra-sup__horario{display:inline-flex;align-items:center;gap:.42rem;}
.site-header.scrolled .barra-sup{display:none;}
@media (max-width:900px){.barra-sup{display:none;}}

/* Barra principal */
.barra-nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:calc(var(--h-header) - 34px);
  transition:min-height var(--tr);
}
.site-header.scrolled .barra-nav{min-height:var(--h-header-scrolled);}

.marca{display:flex;align-items:center;flex:none;}
.marca img{
  width:auto;height:clamp(44px,5.4vw,62px);
  transition:height var(--tr);
}
.site-header.scrolled .marca img{height:clamp(38px,4.4vw,50px);}

.nav-principal{margin-left:auto;}
.nav-lista{display:flex;align-items:center;gap:clamp(.2rem,1vw,1.1rem);}
.nav-lista > li{position:relative;}
.nav-lista > li > a,.nav-desplegable__btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.65rem .55rem;
  font-family:var(--font-head);font-size:var(--text-sm);font-weight:600;
  color:var(--c-inv-2);text-decoration:none;
  border-radius:var(--r-xs);
  transition:color var(--tr);
}
.nav-lista > li > a::after,.nav-desplegable__btn::after{
  content:"";position:absolute;left:.55rem;right:.55rem;bottom:.3rem;height:2px;
  background:var(--c-cyan);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-lista > li > a:hover,.nav-desplegable__btn:hover,
.nav-lista > li > a:focus-visible,.nav-desplegable__btn:focus-visible{color:var(--c-inv);}
.nav-lista > li > a:hover::after,.nav-desplegable__btn:hover::after,
.nav-lista > li.activo > a::after,.nav-lista > li.activo .nav-desplegable__btn::after{transform:scaleX(1);}
.nav-lista > li.activo > a,.nav-lista > li.activo .nav-desplegable__btn{color:var(--c-inv);}

.nav-desplegable__btn .chevron{
  width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--tr);
}
.nav-desplegable[aria-expanded="true"] .chevron,
.nav-desplegable:hover .chevron{transform:rotate(-135deg) translateY(-2px);}

.submenu{
  position:absolute;top:calc(100% + 6px);left:-.6rem;min-width:290px;
  padding:.55rem;border-radius:var(--r-md);
  background:var(--c-ink-700);
  border:1px solid var(--c-ink-500);
  box-shadow:var(--sh-inv);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t);
}
.nav-desplegable:hover .submenu,
.nav-desplegable:focus-within .submenu,
.nav-desplegable.abierto .submenu{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.submenu a{
  display:flex;align-items:center;gap:.7rem;
  padding:.62rem .8rem;border-radius:var(--r-sm);
  font-size:var(--text-sm);color:var(--c-inv-2);text-decoration:none;
  transition:background var(--tr),color var(--tr);
}
.submenu a:hover,.submenu a:focus-visible{background:var(--c-ink-600);color:var(--c-inv);}
.submenu a::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--c-cyan);opacity:.35;transition:opacity var(--tr),transform var(--tr);
}
.submenu a:hover::before{opacity:1;transform:scale(1.5);}

.nav-acciones{display:flex;align-items:center;gap:var(--sp-2);flex:none;}

.icono-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-pill);
  color:var(--c-inv-2);
  transition:background var(--tr),color var(--tr);
}
.icono-btn:hover{background:var(--c-ink-600);color:var(--c-cyan);}
.icono-btn svg{width:20px;height:20px;}

/* Hamburguesa: tres trazos que se convierten en aspa. */
.hamburguesa{display:none;width:44px;height:44px;position:relative;border-radius:var(--r-sm);}
.hamburguesa span{
  position:absolute;left:11px;right:11px;height:2px;border-radius:2px;
  background:var(--c-inv);
  transition:transform var(--t) var(--ease),opacity var(--t-fast) linear,top var(--t) var(--ease);
}
.hamburguesa span:nth-child(1){top:15px;}
.hamburguesa span:nth-child(2){top:21px;}
.hamburguesa span:nth-child(3){top:27px;}
.hamburguesa[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg);}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburguesa[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg);}

/* Panel móvil */
@media (max-width:1120px){
  .hamburguesa{display:block;}
  /* OJO con el bloque contenedor. `.site-header` lleva backdrop-filter, y eso
     la convierte en el bloque contenedor de sus descendientes con
     position:fixed. Con `inset:var(--h-header) 0 0` el panel medía 96 px de
     alto —el hueco entre el borde inferior de la cabecera y su propio
     bottom:0— en lugar de ocupar la pantalla, y el menú aparecía recortado y
     con el contenido de la página asomando por debajo.
     Por eso la altura se declara de forma explícita en lugar de derivarla de
     `bottom:0`. No basta con subir el z-index: el problema es geométrico. */
  .nav-principal{
    position:fixed;top:var(--h-header);left:0;right:0;z-index:var(--z-menu);
    height:calc(100vh - var(--h-header));
    height:calc(100dvh - var(--h-header));
    margin:0;padding:var(--sp-5) var(--pad-x) var(--sp-9);
    background:var(--c-ink-900);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform var(--t-slow) var(--ease),visibility 0s linear var(--t-slow);
  }
  .nav-principal.abierta{transform:none;visibility:visible;transition-delay:0s;}
  .nav-lista{flex-direction:column;align-items:stretch;gap:0;}
  .nav-lista > li{border-bottom:1px solid var(--c-line-inv);}
  .nav-lista > li > a,.nav-desplegable__btn{
    width:100%;justify-content:space-between;padding:1rem .2rem;font-size:var(--text-lg);
  }
  .nav-lista > li > a::after,.nav-desplegable__btn::after{display:none;}
  .submenu{
    position:static;min-width:0;padding:0 0 .6rem .2rem;margin:0;
    background:none;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows var(--t-slow) var(--ease);
  }
  .submenu > li{overflow:hidden;grid-column:1;}
  .nav-desplegable.abierto .submenu{grid-template-rows:1fr;}
  .submenu li{max-height:0;transition:max-height var(--t-slow) var(--ease);}
  .nav-desplegable.abierto .submenu li{max-height:80px;}
  .nav-acciones .btn{display:none;}
  /* El CTA sale de la cabecera por falta de sitio: se recupera aquí, al
     final del recorrido del menú. */
  .nav-pie{display:grid;gap:.6rem;margin-top:var(--sp-6);}
}
@media (min-width:1121px){.nav-pie{display:none;}}
@media (min-width:1121px){
  .nav-principal{transform:none!important;visibility:visible!important;}
}

/* Buscador superpuesto */
.buscador-overlay{
  position:fixed;inset:0;z-index:var(--z-menu);
  display:grid;place-items:start center;
  padding:18vh var(--pad-x) 0;
  background:rgba(5,11,24,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility 0s linear var(--t);
}
.buscador-overlay.abierto{opacity:1;visibility:visible;transition-delay:0s;}
.buscador-overlay form{width:min(680px,100%);}
.buscador-overlay label{
  display:block;margin-bottom:var(--sp-3);
  font-family:var(--font-head);font-size:var(--text-sm);font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-cyan);
}
.buscador-campo{display:flex;gap:var(--sp-2);}
.buscador-campo input{
  flex:1;min-height:56px;padding:0 1.2rem;
  background:transparent;color:var(--c-inv);
  border:0;border-bottom:2px solid var(--c-line-inv-2);
  font-size:var(--text-xl);
}
.buscador-campo input::placeholder{color:var(--c-inv-3);}
.buscador-campo input:focus{outline:none;border-bottom-color:var(--c-cyan);}
.buscador-overlay .cerrar{
  position:absolute;top:1.4rem;right:var(--pad-x);
  width:44px;height:44px;border-radius:var(--r-pill);color:var(--c-inv-2);
}
.buscador-overlay .cerrar:hover{background:var(--c-ink-600);color:var(--c-inv);}

/* ── 08 · Encabezado con pase de fotografías ─────────────────────────────
   Tres mecanismos independientes sobre el mismo contenedor:
   fundido con zoom lento, constelación de círculos y columna de números con
   barra de avance. La duración de la barra (--d-slide) debe coincidir con la
   constante DELAY de main.js o la barra miente.
   ------------------------------------------------------------------------ */

.hero{
  position:relative;isolation:isolate;
  min-height:clamp(560px,86svh,860px);
  display:grid;align-items:center;
  padding-top:calc(var(--h-header) + var(--sp-7));
  padding-bottom:var(--sp-9);
  background:var(--c-ink-900);
  color:var(--c-inv);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;overflow:hidden;}
.hero__slide.is-on{opacity:1;}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);}
/* El zoom dura 12 s frente a los 6,8 s del pase: la imagen nunca llega al
   final de su recorrido, así que el movimiento no rebota. */
.hero__slide.is-on img{animation:kenburns 12s ease-out forwards;}
.hero__slide:nth-child(even).is-on img{animation-name:kenburns-alt;}
@keyframes kenburns{
  from{transform:scale(1.03) translate3d(0,0,0);}
  to  {transform:scale(1.14) translate3d(-1.4%,-1.2%,0);}
}
@keyframes kenburns-alt{
  from{transform:scale(1.14) translate3d(1.2%,-1%,0);}
  to  {transform:scale(1.03) translate3d(0,0,0);}
}

/* Velo del encabezado: sin él ningún titular alcanza 4,5:1 sobre fotografía. */
.hero__velo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(5,11,24,.94) 0%,rgba(5,11,24,.78) 42%,rgba(5,11,24,.42) 72%,rgba(5,11,24,.66) 100%),
    linear-gradient(180deg,rgba(5,11,24,.72) 0%,rgba(5,11,24,0) 32%,rgba(5,11,24,.55) 100%);
}
.hero__trama{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(76,198,255,.32) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 55%);
  mask-image:linear-gradient(160deg,#000 0%,transparent 55%);
}

.hero__in{position:relative;z-index:2;max-width:760px;}
.hero h1{
  font-size:var(--text-6xl);color:var(--c-inv);
  letter-spacing:-.028em;line-height:1.03;
  margin-bottom:var(--sp-5);
}
.hero__texto{
  font-size:var(--text-lg);color:var(--c-inv-2);
  max-width:58ch;margin-bottom:var(--sp-6);
}
.hero__texto strong{color:var(--c-inv);font-weight:700;}

/* Datos destacados bajo el encabezado */
.hero__datos{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:var(--sp-7);
  padding-top:var(--sp-5);border-top:1px solid var(--c-line-inv);
}
.hero__dato{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.055);
  border:1px solid var(--c-line-inv);
  font-size:var(--text-xs);font-weight:600;color:var(--c-inv-2);
  letter-spacing:.02em;
}
.hero__dato::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--c-cyan);box-shadow:0 0 0 3px var(--c-cyan-a25);
}

/* Constelación de círculos: SVG cuadrados en porcentaje, siempre redondos.
   pathLength="100" normaliza el perímetro de cualquier radio, así que un
   único juego de fotogramas sirve para todos. */
.hero__circulos{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hc-w{position:absolute;aspect-ratio:1;}
.hc-w svg{width:100%;height:100%;overflow:visible;}
.hc{
  fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linecap:round;
  transform-box:fill-box;transform-origin:center;
}
.hc--traza{stroke-dasharray:100;stroke-dashoffset:100;
  animation:hcTraza 13s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes hcTraza{0%{stroke-dashoffset:100;} 42%,58%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-100;}}
.hc--punt{stroke-dasharray:1.7 3.6;animation:hcGiro 34s linear infinite;}
@keyframes hcGiro{to{transform:rotate(360deg);}}
.hc-pt{fill:rgba(76,198,255,.85);animation:hcNodo 4.6s ease-in-out infinite;}
@keyframes hcNodo{0%,100%{opacity:.25;transform:scale(.7);} 50%{opacity:1;transform:scale(1.25);}}
/* Ocho modificadores con duraciones primas entre sí y retardos negativos:
   si los ciclos coinciden, el fondo late al unísono y molesta. */
.hc--a{animation-duration:12s;}
.hc--b{animation-duration:29s;animation-delay:-6s;}
.hc--c{animation-duration:17s;animation-delay:-4s;}
.hc--d{animation-duration:23s;animation-delay:-11s;animation-direction:reverse;}
.hc--e{animation-duration:31s;animation-delay:-3s;}
.hc--f{animation-duration:19s;animation-delay:-9s;animation-direction:reverse;}
.hc--g{animation-duration:37s;animation-delay:-14s;}
.hc--h{animation-duration:40s;animation-delay:-21s;animation-direction:reverse;}
.hc-pt--1{animation-delay:-1.2s;}
.hc-pt--2{animation-delay:-3.1s;}
.hc-pt--3{animation-delay:-2.4s;}

.hc-w--g1{width:clamp(150px,19vw,320px);right:4%;top:8%;}
.hc-w--g2{width:clamp(230px,32vw,540px);right:-7%;bottom:0%;}
.hc-w--g3{width:clamp(96px,12vw,190px);right:27%;bottom:24%;}
.hc-w--g4{width:clamp(120px,15vw,230px);left:-5%;bottom:-8%;}
@media (max-width:1080px){
  .hc-w--g1{right:-6%;top:6%;}
  .hc-w--g3{display:none;}
  .hc-w--g2{opacity:.6;}
}

/* Columna de números con raíl de avance.

   El estado activo se pinta solo a partir de aria-selected: un único atributo
   sirve para el estilo y para el lector de pantalla.

   El raíl es continuo. Cada número aporta su tramo, y como el tramo se estira
   a la altura de su fila (align-self:stretch) la línea no se parte aunque el
   dígito activo sea el triple de grande que los demás.

   El dígito activo se rellena de cian de abajo arriba durante el mismo tiempo
   que dura la fotografía: es el temporizador, y a la vez la razón de que el
   número se lea como un contador y no como un adorno. */
.hero__nums{
  position:absolute;right:clamp(.9rem,3vw,3.2rem);top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:0;
}
.hero__num{
  display:flex;align-items:center;gap:clamp(.7rem,1.2vw,1.1rem);
  min-height:56px;padding:0 .3rem;
  color:rgba(255,255,255,.55);
}
.hero__num-track{
  width:3px;flex:none;align-self:stretch;border-radius:3px;
  background:var(--c-line-inv-2);overflow:hidden;
  transition:background var(--tr),width var(--tr);
}
.hero__num-fill{display:block;width:100%;height:0;background:var(--c-cyan);
  box-shadow:0 0 10px rgba(76,198,255,.7);}
.hero__num-n{
  font-family:var(--font-head);font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.02em;
  transition:font-size .45s var(--ease-back),color var(--t) var(--ease);
}
.hero__num:hover .hero__num-n,.hero__num:focus-visible .hero__num-n{color:var(--c-inv);}
.hero__num:hover .hero__num-track{background:var(--c-cyan-a45);}

.hero__num[aria-selected="true"]{color:var(--c-inv);}
.hero__num[aria-selected="true"] .hero__num-track{width:5px;}
.hero__num[aria-selected="true"] .hero__num-fill{animation:numAvance var(--d-slide) linear forwards;}
.hero__nums.is-paused .hero__num[aria-selected="true"] .hero__num-fill{animation:none;height:100%;}

/* El dígito activo se rellena de color de abajo arriba. El degradado ocupa el
   doble del alto de la caja y se desplaza; recortado al texto con
   background-clip, lo que sube es el color dentro de la propia cifra. */
.hero__num[aria-selected="true"] .hero__num-n{
  font-size:clamp(2.6rem,5vw,4.2rem);
  background-image:linear-gradient(to top,var(--c-cyan) 50%,var(--c-inv) 50%);
  background-size:100% 200%;
  background-position:0 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:numEntra .5s var(--ease-out),numRelleno var(--d-slide) linear forwards;
}
.hero__nums.is-paused .hero__num[aria-selected="true"] .hero__num-n{
  animation:none;background-position:0 100%;
}
@keyframes numRelleno{from{background-position:0 0;} to{background-position:0 100%;}}
@keyframes numEntra{
  0%{opacity:0;transform:translateY(14px) scale(.7);filter:blur(4px);}
  60%{opacity:1;filter:blur(0);}
  100%{opacity:1;transform:none;}
}
@keyframes numAvance{from{height:0;} to{height:100%;}}

/* En modo de contraste forzado del sistema, background-clip:text deja el
   número invisible porque el degradado se descarta. Se devuelve el color. */
@media (forced-colors:active){
  .hero__num[aria-selected="true"] .hero__num-n{
    -webkit-text-fill-color:currentColor;color:CanvasText;background-image:none;
  }
}

@media (max-width:820px){
  .hero{min-height:auto;padding-bottom:var(--sp-6);}
  .hero__nums{
    position:static;transform:none;flex-direction:row;justify-content:center;
    gap:.9rem;margin-top:var(--sp-6);
  }
  .hero__num{flex-direction:column-reverse;gap:.45rem;min-height:auto;}
  .hero__num-track{width:30px;height:3px;align-self:auto;}
  .hero__num-n{font-size:1.25rem;}
  .hero__num[aria-selected="true"] .hero__num-n{font-size:2.3rem;}
  .hero__num[aria-selected="true"] .hero__num-track{width:52px;height:4px;}
  .hero__num-fill{width:0;height:100%;}
  .hero__num[aria-selected="true"] .hero__num-fill{animation-name:numAvanceH;}
  .hero__nums.is-paused .hero__num[aria-selected="true"] .hero__num-fill{width:100%;height:100%;}
  @keyframes numAvanceH{from{width:0;} to{width:100%;}}
}

/* Aviso de imagen ilustrativa: obligación editorial, no decoración. */
.hero__aviso{
  position:absolute;left:var(--pad-x);bottom:.9rem;z-index:3;
  font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.42);
}
@media (max-width:820px){.hero__aviso{position:static;margin-top:var(--sp-4);}}

/* ── 09 · Cabecera de página interior ─────────────────────────────────── */

.cab-pagina{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:calc(var(--h-header) + var(--sp-8));
  padding-bottom:var(--sp-8);
  background:var(--c-ink-900);color:var(--c-inv);
}
.cab-pagina__media{position:absolute;inset:0;z-index:-2;}
.cab-pagina__media img{width:100%;height:100%;object-fit:cover;opacity:.55;}
.cab-pagina::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(5,11,24,.95) 0%,rgba(5,11,24,.8) 55%,rgba(5,11,24,.5) 100%),
    linear-gradient(180deg,rgba(5,11,24,.7),rgba(5,11,24,.35));
}
.cab-pagina h1{color:var(--c-inv);max-width:22ch;margin-bottom:var(--sp-4);}
.cab-pagina .entradilla{color:var(--c-inv-2);}

/* Miga de pan */
.miga{margin-bottom:var(--sp-5);font-size:var(--text-xs);}
.miga ol{display:flex;flex-wrap:wrap;align-items:center;gap:.42rem;}
.miga li{display:flex;align-items:center;gap:.42rem;min-height:26px;color:var(--c-inv-3);}
.miga li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--c-cyan);opacity:.6;}
.miga a{display:inline-flex;align-items:center;min-height:26px;color:var(--c-inv-2);text-decoration:none;}
.miga a:hover{color:var(--c-cyan);}
.miga [aria-current]{color:var(--c-inv);font-weight:600;}

/* ── 10 · Bloque orbital de servicios ─────────────────────────────────────
   Sin JavaScript propio: CSS puro. Solo depende de .reveal para el trazo de
   conexión. Tres columnas con el núcleo en el centro; la columna izquierda
   se refleja con row-reverse, así un único componente de ficha sirve para
   los dos lados.
   ------------------------------------------------------------------------ */

.orbital{--hub:clamp(200px,20vw,310px);position:relative;}
.orbital__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--hub) minmax(0,1fr);
  gap:clamp(1.4rem,.5rem + 3.4vw,3.6rem);
  align-items:center;
}
.orbital__col{display:grid;gap:clamp(1rem,.5rem + 1.6vw,2rem);}
.orbital__col--l{text-align:right;}
.orbital__item{
  position:relative;display:flex;align-items:flex-start;gap:.95rem;
  text-decoration:none;color:inherit;
}
.orbital__col--l .orbital__item{flex-direction:row-reverse;}
.orbital__ico{
  position:relative;flex:none;
  width:clamp(46px,4.6vw,58px);height:clamp(46px,4.6vw,58px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--c-ink-700);border:1px solid var(--c-ink-500);
  color:var(--c-cyan);
  transition:background var(--tr),border-color var(--tr),transform var(--tr);
}
.orbital__ico svg{width:24px;height:24px;}
/* El anillo discontinuo ya gira aunque esté a opacity 0; al pasar el ratón
   solo aparece, no arranca, y así no se ve el tirón inicial. */
.orbital__ico::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px dashed var(--c-cyan-a45);
  opacity:0;transition:opacity var(--tr);
  animation:hcGiro 9s linear infinite;
}
.orbital__item:hover .orbital__ico::before,
.orbital__item:focus-visible .orbital__ico::before{opacity:1;}
.orbital__item:hover .orbital__ico{background:var(--c-ink-600);border-color:var(--c-cyan-a45);transform:translateY(-2px);}
.orbital__item > span:last-child{display:block;min-width:0;}
.orbital__t{
  display:block;
  font-family:var(--font-head);font-size:var(--text-base);font-weight:700;
  color:var(--c-inv);margin-bottom:.28rem;
  transition:color var(--tr);
}
.orbital__d{display:block;font-size:var(--text-sm);color:var(--c-inv-3);line-height:1.55;}
.orbital__item:hover .orbital__t{color:var(--c-cyan);}

/* Trazo de conexión hacia el núcleo: se dibuja al entrar en pantalla y el
   degradado se invierte en la columna derecha para que el desvanecido
   apunte siempre hacia fuera. */
.orbital__item::after{
  content:"";position:absolute;top:clamp(22px,2.2vw,28px);height:1px;width:0;
  background:linear-gradient(90deg,var(--c-cyan),rgba(76,198,255,0));
  transition:width .7s var(--ease) .15s;
}
.orbital__col--l .orbital__item::after{left:100%;}
.orbital__col--r .orbital__item::after{right:100%;transform:scaleX(-1);}
.orbital__item.is-in::after{width:clamp(.9rem,2.6vw,3rem);}
.no-js .orbital__item::after{width:clamp(.9rem,2.6vw,3rem);}

/* Núcleo: cuatro capas superpuestas */
.orbital__hub{
  position:relative;width:var(--hub);height:var(--hub);
  display:grid;place-items:center;justify-self:center;
}
/* Halo cónico: la máscara radial convierte el disco en un anillo. */
.orbital__halo{
  position:absolute;inset:-6%;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,
    rgba(76,198,255,0) 0deg 165deg, rgba(76,198,255,.2) 240deg,
    rgba(76,198,255,1) 318deg, rgba(10,46,140,.85) 340deg, rgba(10,46,140,0) 358deg);
  filter:drop-shadow(0 0 12px rgba(76,198,255,.45));
  -webkit-mask:radial-gradient(circle,transparent 0 63%,#000 65%,#000 78%,transparent 80%);
  mask:radial-gradient(circle,transparent 0 63%,#000 65%,#000 78%,transparent 80%);
  animation:hcGiro 7.5s linear infinite;
}
.orbital__anillos{position:absolute;inset:0;z-index:1;}
.orbital__anillos svg{width:100%;height:100%;}
.orbital__anillos .ring{
  fill:none;stroke:var(--c-cyan-a25);stroke-width:1;
  vector-effect:non-scaling-stroke;transform-origin:150px 150px;
}
.orbital__anillos .ring--a{stroke-dasharray:3 7;animation:hcGiro 52s linear infinite;}
.orbital__anillos .ring--b{stroke-dasharray:2 9;animation:hcGiro 34s linear infinite reverse;}
/* Arco de acento: un segmento corto de 62 sobre un perímetro de ~917, con
   curva de aceleración en lugar de lineal. */
.orbital__anillos .ring--arco{
  stroke:var(--c-cyan);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:62 856;
  animation:hcGiro 11s cubic-bezier(.55,0,.45,1) infinite;
}
.orbital__sat{position:absolute;inset:0;border-radius:50%;z-index:1;animation:hcGiro 18s linear infinite;}
.orbital__sat i{
  position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:var(--c-cyan);
  box-shadow:0 0 0 4px rgba(76,198,255,.18),0 0 12px rgba(76,198,255,.8);
}
.orbital__sat--b{animation-duration:27s;animation-direction:reverse;inset:9%;}
.orbital__sat--c{animation-duration:40s;inset:18%;}
.orbital__sat--c i{width:6px;height:6px;margin-left:-3px;top:-3px;}
.orbital__nucleo{
  position:relative;z-index:2;
  width:60%;height:60%;border-radius:50%;
  display:grid;place-items:center;padding:14%;
  background:var(--c-inv);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.9),0 18px 40px rgba(3,8,20,.6);
}
.orbital__nucleo::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid var(--c-cyan-a45);
}
.orbital__nucleo img{width:100%;height:auto;}

@media (max-width:1080px){
  .orbital__grid{grid-template-columns:1fr;justify-items:center;}
  .orbital__hub{order:-1;margin-bottom:var(--sp-5);}
  .orbital__col{grid-template-columns:1fr 1fr;width:100%;}
  .orbital__col--l{text-align:left;}
  .orbital__col--l .orbital__item{flex-direction:row;}
  /* Sin el núcleo al lado, el trazo no significa nada. */
  .orbital__item::after{display:none;}
}
@media (max-width:640px){.orbital__col{grid-template-columns:1fr;}}

/* ── 11 · Tarjetas ────────────────────────────────────────────────────── */

.tarjeta{
  position:relative;display:flex;flex-direction:column;
  background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
}
.tarjeta:hover{border-color:var(--c-brand-200);box-shadow:var(--sh-lg);transform:translateY(-5px);}
.tarjeta__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c-ink-800);}
.tarjeta__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out);}
.tarjeta:hover .tarjeta__media img{transform:scale(1.06);}
.tarjeta__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,11,24,0) 45%,rgba(5,11,24,.62) 100%);
}
.tarjeta__num{
  position:absolute;left:.85rem;top:.85rem;z-index:2;
  padding:.24rem .6rem;border-radius:var(--r-xs);
  background:rgba(5,11,24,.72);border:1px solid var(--c-cyan-a45);
  font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--c-cyan);font-variant-numeric:tabular-nums;
}
.tarjeta__ico{
  position:absolute;left:.85rem;bottom:.85rem;z-index:2;
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:rgba(5,11,24,.8);border:1px solid var(--c-line-inv-2);color:var(--c-cyan);
  transition:background var(--tr),border-color var(--tr);
}
.tarjeta__ico svg{width:22px;height:22px;}
.tarjeta:hover .tarjeta__ico{background:var(--c-red);border-color:var(--c-red);color:#fff;}
.tarjeta__cuerpo{display:flex;flex-direction:column;flex:1;gap:.7rem;padding:var(--sp-5);}
.tarjeta__cuerpo h3{font-size:var(--text-lg);}
.tarjeta__cuerpo p{font-size:var(--text-sm);color:var(--c-text-2);line-height:1.62;}
.tarjeta__pie{margin-top:auto;padding-top:var(--sp-2);}
.tarjeta:hover .enlace-flecha::after{transform:translateX(5px);}

/* Tarjeta sobre fondo oscuro */
.tarjeta--inv{background:var(--c-ink-700);border-color:var(--c-ink-500);}
.tarjeta--inv h3{color:var(--c-inv);}
.tarjeta--inv p{color:var(--c-inv-3);}
.tarjeta--inv:hover{border-color:var(--c-cyan-a45);}

/* Tarjeta sin imagen, con icono grande: ventajas y motivos. */
.tarjeta-plana{
  position:relative;padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-md);
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
}
.tarjeta-plana::before{
  content:"";position:absolute;left:0;top:var(--sp-6);width:3px;height:0;
  background:var(--c-red);border-radius:0 2px 2px 0;
  transition:height var(--t-slow) var(--ease);
}
.tarjeta-plana:hover{border-color:var(--c-brand-200);box-shadow:var(--sh-md);transform:translateY(-3px);}
.tarjeta-plana:hover::before{height:38px;}
.tarjeta-plana__ico{
  width:50px;height:50px;display:grid;place-items:center;margin-bottom:var(--sp-4);
  border-radius:var(--r-sm);
  background:linear-gradient(140deg,var(--c-bg-alt2),var(--c-bg-alt));
  border:1px solid var(--c-line);color:var(--c-brand);
}
.tarjeta-plana__ico svg{width:25px;height:25px;}
.tarjeta-plana h3{font-size:var(--text-lg);margin-bottom:.5rem;}
.tarjeta-plana p{font-size:var(--text-sm);color:var(--c-text-2);line-height:1.62;}

.tema-oscuro .tarjeta-plana{background:var(--c-ink-700);border-color:var(--c-ink-500);}
.tema-oscuro .tarjeta-plana h3{color:var(--c-inv);}
.tema-oscuro .tarjeta-plana p{color:var(--c-inv-3);}
.tema-oscuro .tarjeta-plana__ico{background:var(--c-ink-600);border-color:var(--c-ink-500);color:var(--c-cyan);}

/* Lista con palomitas */
.lista-check{display:grid;gap:.65rem;}
.lista-check li{
  position:relative;padding-left:1.9rem;
  font-size:var(--text-base);line-height:1.6;
}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:18px;height:18px;border-radius:50%;
  background:var(--c-cyan-a12);border:1px solid var(--c-cyan-a45);
}
.lista-check li::after{
  content:"";position:absolute;left:5.5px;top:.72em;
  width:7px;height:4px;border-left:2px solid var(--c-cyan-700);border-bottom:2px solid var(--c-cyan-700);
  transform:rotate(-45deg);
}
.tema-oscuro .lista-check li::after{border-color:var(--c-cyan);}

/* Lista de síntomas: rejilla densa de dos columnas */
.lista-sintomas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem var(--sp-5);}
.lista-sintomas li{
  position:relative;padding-left:1.5rem;font-size:var(--text-sm);
  color:var(--c-text-2);line-height:1.55;
}
.lista-sintomas li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--c-red);
}
@media (max-width:640px){.lista-sintomas{grid-template-columns:1fr;}}

/* ── 12 · Cifras y datos ──────────────────────────────────────────────── */

.cifras{
  /* Dos columnas: el bloque vive dentro de una columna a media anchura y
     con cuatro celdas el rótulo largo desborda. */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--c-line-inv);
  border:1px solid var(--c-line-inv);border-radius:var(--r-md);overflow:hidden;
}
.cifra{
  padding:var(--sp-6) var(--sp-4);text-align:center;
  background:var(--c-ink-800);
  transition:background var(--tr);
}
.cifra:hover{background:var(--c-ink-700);}
.cifra__n{
  display:block;font-family:var(--font-head);
  font-size:var(--text-3xl);font-weight:800;line-height:1;
  color:var(--c-inv);font-variant-numeric:tabular-nums;
  margin-bottom:.5rem;
}
.cifra__n .suf{color:var(--c-cyan);}
.cifra__t{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--c-inv-3);}
/* Variante para valores que no son números: un rótulo largo a --text-3xl
   desborda la celda. */
.cifra__n--texto{font-size:var(--text-xl);letter-spacing:-.01em;}
@media (max-width:820px){.cifras{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ── 13 · Proceso de trabajo ─────────────────────────────────────────────
   Acordeón donde la fotografía es el índice: cada paso ilumina su franja de
   la imagen y el resto queda en penumbra. El estado se comparte entre el
   acordeón y la ilustración, por eso no se usa <details>.
   ------------------------------------------------------------------------ */

.proceso__grid{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-gut) clamp(2rem,1rem + 3.5vw,4rem);
  /* stretch, no center: la escena tiene que ocupar toda la altura de la
     columna de pasos, que es lo que hace que la franja iluminada recorra la
     ilustración de arriba abajo. */
  align-items:center;
}
@media (max-width:980px){.proceso__grid{grid-template-columns:1fr;}}

/* La caja conserva la proporción exacta del banner y toma su altura de la
   columna vecina; el ancho sale solo. Es la única forma de que los
   porcentajes del clip-path sigan casando con la ilustración: si la imagen se
   recortara con object-fit:cover, las franjas se desplazarían. */
.proceso__escena{
  position:relative;overflow:hidden;
  border-radius:var(--r-md);
  aspect-ratio:942/1402;
  /* Altura DETERMINADA, no height:100%. Con height:100% sobre una fila que a
     su vez se dimensiona por su contenido se crea una dependencia circular:
     la escena cambiaba de tamaño cada vez que se abría un paso con un texto
     de distinta longitud, y la ilustración daba un salto al pasar el ratón.
     Fijando la altura aquí, el banner manda en el alto del bloque y la
     columna de pasos se centra a su lado. */
  height:clamp(430px,48vw,600px);
  width:auto;
  max-width:min(430px,40vw);
  justify-self:start;
  background:var(--c-ink-900);
  box-shadow:0 22px 48px rgba(4,10,25,.5),inset 0 0 0 1px var(--c-cyan-a25);
}
@media (max-width:980px){
  .proceso__escena{
    height:auto;width:100%;max-width:min(400px,86vw);
    margin-inline:auto;justify-self:center;
  }
}
.proceso__capa{position:absolute;inset:0;}
.proceso__capa img{width:100%;height:100%;object-fit:cover;}
/* Penumbra del resto de la ilustración. */
.proceso__capa--base img{filter:grayscale(.55) brightness(.34) contrast(.95);}
.proceso__capa--foco{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .95s cubic-bezier(.5,.12,.22,1);
}
.proceso__capa--foco img{filter:saturate(1.12) brightness(1.06);}

/* Franjas medidas sobre ESTE banner concreto (942 × 1402):
     0-19 % logo y ondas · 17-37 % silueta del vehículo ·
     36-59 % rueda y disco · 57-81 % nave del taller ·
     79-100 % frontal y equipo de diagnosis.
   Al sustituir la ilustración hay que volver a medirlas. */
.proceso.is-p0 .proceso__capa--foco{clip-path:inset(0 0 81% 0);}
.proceso.is-p1 .proceso__capa--foco{clip-path:inset(17% 0 63% 0);}
.proceso.is-p2 .proceso__capa--foco{clip-path:inset(36% 0 41% 0);}
.proceso.is-p3 .proceso__capa--foco{clip-path:inset(57% 0 19% 0);}
.proceso.is-p4 .proceso__capa--foco{clip-path:inset(79% 0 0 0);}

/* Banda: dos filetes de cian arriba y abajo de la franja activa. Sin ellos el
   corte del clip-path parece un fallo de render; con ellos se lee como una
   medición. */
.proceso__banda{
  position:absolute;left:0;right:0;top:0;height:19%;z-index:2;pointer-events:none;
  border-top:1px solid var(--c-cyan);border-bottom:1px solid var(--c-cyan);
  box-shadow:0 0 34px rgba(76,198,255,.4) inset;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  opacity:0;
  transition:top .95s cubic-bezier(.5,.12,.22,1),height .95s cubic-bezier(.5,.12,.22,1),opacity var(--t) var(--ease);
}
.proceso.is-p0 .proceso__banda{top:0;   height:19%;opacity:1;}
.proceso.is-p1 .proceso__banda{top:17%; height:20%;opacity:1;}
.proceso.is-p2 .proceso__banda{top:36%; height:23%;opacity:1;}
.proceso.is-p3 .proceso__banda{top:57%; height:24%;opacity:1;}
.proceso.is-p4 .proceso__banda{top:79%; height:21%;opacity:1;}

.proceso__trama{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.28;
  background-image:radial-gradient(rgba(76,198,255,.5) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 55%);
  mask-image:linear-gradient(200deg,#000,transparent 55%);
}

.proceso__pasos{display:grid;align-content:center;gap:0;}
.paso{border-bottom:1px solid var(--c-line-inv);}
.paso:first-child{border-top:1px solid var(--c-line-inv);}
.paso__btn{
  display:flex;align-items:center;gap:var(--sp-4);width:100%;
  padding:1.15rem .2rem;text-align:left;
  font-family:var(--font-head);color:var(--c-inv-2);
  transition:color var(--tr);
}
.paso__btn:hover{color:var(--c-inv);}
.paso__n{
  flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--c-ink-500);
  font-size:var(--text-xs);font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--c-inv-3);
  transition:background var(--tr),border-color var(--tr),color var(--tr);
}
.paso__t{flex:1;font-size:var(--text-lg);font-weight:700;}
.paso.is-open .paso__btn{color:var(--c-inv);}
.paso.is-open .paso__n{background:var(--c-cyan);border-color:var(--c-cyan);color:var(--c-ink-900);}
.paso.is-open .paso__t{color:var(--c-cyan);}

/* Apertura con filas de rejilla: anima sin conocer la altura. */
.paso__p{
  display:grid;grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows var(--t-slow) var(--ease),opacity .4s ease;
}
.paso__p > div{overflow:hidden;}
.paso__p p{
  padding:0 0 1.1rem calc(34px + var(--sp-4));
  font-size:var(--text-sm);color:var(--c-inv-3);line-height:1.7;
}
/* El estado cerrado solo existe cuando el guion ha arrancado: sin JavaScript
   los cinco textos quedan abiertos y la ilustración entera visible. */
.proceso--js .paso__p{grid-template-rows:0fr;opacity:0;}
.proceso--js .paso__p > div{visibility:hidden;transition:visibility 0s linear var(--t-slow);}
.proceso--js .paso.is-open .paso__p{grid-template-rows:1fr;opacity:1;}
.proceso--js .paso.is-open .paso__p > div{visibility:visible;transition-delay:0s;}

.paso__avance{display:block;height:2px;background:var(--c-line-inv);overflow:hidden;}
.paso__avance i{display:block;width:0;height:100%;background:var(--c-cyan);}
.paso.is-open .paso__avance i{animation:pasoAvance var(--d-proceso) linear forwards;}
.proceso.is-paused .paso.is-open .paso__avance i{animation:none;width:100%;}
@keyframes pasoAvance{from{width:0;} to{width:100%;}}

/* ── 14 · Bandas de llamada a la acción ───────────────────────────────── */

.cta{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(3rem,2rem + 4vw,5rem);
  background:var(--g-marca);color:var(--c-inv);
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background-image:radial-gradient(rgba(76,198,255,.28) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 130% at 88% 50%,#000,transparent 72%);
  mask-image:radial-gradient(70% 130% at 88% 50%,#000,transparent 72%);
}
.cta__grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5) var(--sp-7);align-items:center;
}
.cta h2{color:var(--c-inv);font-size:var(--text-3xl);margin-bottom:.6rem;}
.cta p{color:var(--c-inv-2);max-width:56ch;}
@media (max-width:860px){.cta__grid{grid-template-columns:1fr;}}

/* Banda estrecha con el teléfono, para el pie de las páginas de servicio. */
.cta-tel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-md);
  background:var(--c-bg-alt);border:1px solid var(--c-line);
  border-left:4px solid var(--c-red);
}
.cta-tel__t{font-family:var(--font-head);font-weight:700;font-size:var(--text-lg);}
.cta-tel__d{font-size:var(--text-sm);color:var(--c-text-2);}

/* ── 14b · Carrusel de opiniones ─────────────────────────────────────────
   Una reseña visible cada vez. El texto completo de TODAS está siempre en el
   DOM —solo se oculta con visibility, no con display— para que un lector de
   pantalla pueda recorrerlas sin depender del temporizador.
   ------------------------------------------------------------------------ */

.opiniones{position:relative;}
.opi__marco{
  position:relative;
  /* Alto suficiente para la ficha más larga: las fichas están superpuestas en
     la misma celda del grid, así que sin un mínimo el bloque daría un salto
     cada vez que rota a un texto de distinta longitud. */
  min-height:clamp(190px,18vw,220px);
  display:grid;align-items:center;
  /* Las fichas están superpuestas en la misma celda, así que el marco no
     empuja al titular: hay que separarlo a mano o las comillas de apertura
     se montan sobre el h2. */
  margin-top:var(--sp-6);
}
.opi{
  grid-area:1/1;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s;
}
.opi.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.no-js .opi{opacity:1;visibility:visible;transform:none;position:static;}
.no-js .opi__marco{display:grid;gap:var(--sp-7);}

/* Comillas de apertura: marca de agua, no decoración gratuita — señala que
   lo que sigue es una cita literal y no texto de la empresa. */
.opi__comillas{
  font-family:var(--font-head);font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;
  line-height:.55;color:var(--c-cyan-700);opacity:.35;
}
.opi__estrellas{display:flex;gap:.22rem;}
.opi__estrellas svg{width:19px;height:19px;fill:#F5A623;}
.opi__texto{
  font-size:var(--text-xl);line-height:1.6;color:var(--c-text);
  max-width:58ch;font-weight:500;
}
.tema-oscuro .opi__texto,.seccion--oscura .opi__texto{color:var(--c-inv);}
.opi__autor{
  display:flex;flex-direction:column;gap:.15rem;
  font-size:var(--text-sm);color:var(--c-text-2);
}
.tema-oscuro .opi__autor,.seccion--oscura .opi__autor{color:var(--c-inv-3);}
.opi__nombre{
  font-family:var(--font-head);font-weight:700;font-size:var(--text-base);color:var(--c-text);
}
.tema-oscuro .opi__nombre,.seccion--oscura .opi__nombre{color:var(--c-inv);}

.opi__mandos{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.opi__flecha{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--c-line-strong);color:var(--c-text-2);
  transition:border-color var(--tr),color var(--tr),background var(--tr);
}
.opi__flecha:hover{border-color:var(--c-brand);color:var(--c-brand);background:var(--c-bg-alt);}
.opi__flecha svg{width:17px;height:17px;}
.tema-oscuro .opi__flecha{border-color:var(--c-line-inv-2);color:var(--c-inv-2);}
.tema-oscuro .opi__flecha:hover{border-color:var(--c-cyan);color:var(--c-cyan);background:var(--c-ink-700);}

.opi__puntos{display:flex;gap:.3rem;}
/* El punto visible mide 9 px pero su botón mide 44: el área de activación no
   se agranda estirando el punto, se envuelve. */
.opi__punto{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);
}
.opi__punto::after{
  content:"";width:9px;height:9px;border-radius:var(--r-pill);
  background:var(--c-line-strong);
  transition:background var(--tr),width var(--tr);
}
.tema-oscuro .opi__punto::after{background:var(--c-line-inv-2);}
.opi__punto:hover::after{background:var(--c-brand-400);}
.opi__punto[aria-selected="true"]::after{width:26px;background:var(--c-red);}
.tema-oscuro .opi__punto[aria-selected="true"]::after{background:var(--c-cyan);}

/* Variante «lo que valoran»: texto de la propia empresa, no cita de un
   tercero. Sin comillas, sin estrellas y sin nombre, precisamente para que no
   se pueda leer como un testimonio atribuido. El rótulo inferior nombra el
   ámbito, no a una persona. */
.opi--valor .opi__texto{
  font-size:var(--text-2xl);line-height:1.45;font-weight:600;
  letter-spacing:-.012em;max-width:38ch;
}
.opi__ambito{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--c-cyan-700);
}
.opi__ambito::before{
  content:"";width:26px;height:2px;flex:none;
  background:linear-gradient(90deg,currentColor,transparent);
}
.tema-oscuro .opi__ambito,.seccion--oscura .opi__ambito{color:var(--c-cyan);}

/* Reseña real sin comentario: se muestran las estrellas y el nombre, y se
   dice expresamente que no hay texto. Antes que inventarlo. */
.opi__estrella-off svg{fill:var(--c-line-strong);}
.opi__solo-estrellas{
  font-size:var(--text-base);font-style:italic;color:var(--c-text-2);
}

/* ── 15 · Preguntas frecuentes ────────────────────────────────────────────
   details/summary nativos: cero JavaScript, funcionan con el navegador sin
   guiones, se encuentran con Ctrl+F en los navegadores que despliegan al
   buscar y son accesibles de origen.
   ------------------------------------------------------------------------ */

.faq{display:grid;gap:0;}
.faq details{border-bottom:1px solid var(--c-line);}
.faq details:first-of-type{border-top:1px solid var(--c-line);}
.faq summary{
  position:relative;list-style:none;cursor:pointer;
  padding:1.15rem 3rem 1.15rem 0;
  font-family:var(--font-head);font-size:var(--text-base);font-weight:700;
  color:var(--c-text);
  transition:color var(--tr);
}
/* Hacen falta las dos reglas para quitar el triángulo del navegador. */
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--c-brand);}
.faq summary::after{
  content:"";position:absolute;right:.9rem;top:1.5rem;
  width:11px;height:11px;
  border-right:2px solid var(--c-cyan-700);border-bottom:2px solid var(--c-cyan-700);
  transform:rotate(45deg);transition:transform var(--tr),top var(--tr);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem;}
.faq details[open] summary{color:var(--c-brand);}
.faq__r{padding:0 3rem 1.35rem 0;}
.faq__r p{font-size:var(--text-sm);color:var(--c-text-2);line-height:1.72;}
.faq__r p+p{margin-top:.7rem;}

/* Variante de portada: dos columnas temáticas con ficha por pregunta. */
.faq--dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-gut);align-items:start;}
@media (max-width:860px){.faq--dos{grid-template-columns:1fr;}}
.faq__col{display:grid;gap:.7rem;align-content:start;}
.faq__cab{
  display:flex;align-items:center;gap:.8rem;margin-bottom:.3rem;
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-cyan-700);
}
.faq__cab::after{content:"";flex:1;height:1px;background:var(--c-line);}
.faq--dos details{
  position:relative;border:1px solid var(--c-line);border-radius:var(--r-sm);
  background:var(--c-bg);
  transition:border-color var(--tr),box-shadow var(--tr);
}
.faq--dos details:first-of-type{border-top:1px solid var(--c-line);}
.faq--dos details::before{
  content:"";position:absolute;left:-1px;top:.7rem;bottom:.7rem;width:3px;
  border-radius:3px;background:var(--c-red);opacity:0;transition:opacity var(--tr);
}
.faq--dos details[open]{border-color:var(--c-brand-200);box-shadow:var(--sh-md);}
.faq--dos details[open]::before{opacity:1;}
.faq--dos summary{
  display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;
  align-items:start;padding:1rem 1rem 1rem .95rem;
}
.faq--dos summary::after{display:none;}
.faq__n{
  font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--c-cyan-700);
  font-variant-numeric:tabular-nums;padding-top:.25em;
}
.faq__q{display:block;font-size:var(--text-sm);line-height:1.5;}
.faq__tag{
  display:inline-block;margin-top:.35rem;padding:.1rem .5rem;border-radius:var(--r-xs);
  background:var(--c-bg-alt2);color:var(--c-text-2);
  font-family:var(--font-body);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.faq__mas{
  position:relative;width:26px;height:26px;border-radius:var(--r-xs);flex:none;
  border:1px solid var(--c-line);
  transition:background var(--tr),border-color var(--tr);
}
.faq__mas::after{
  content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;
  border-right:2px solid var(--c-cyan-700);border-bottom:2px solid var(--c-cyan-700);
  transform:rotate(45deg);transition:transform var(--tr);
}
.faq--dos summary:hover .faq__mas{background:var(--c-cyan-a12);border-color:var(--c-cyan-a45);}
.faq--dos details[open] .faq__mas{background:var(--c-brand);border-color:var(--c-brand);}
.faq--dos details[open] .faq__mas::after{border-color:#fff;transform:rotate(-135deg);}
/* El desplegable respeta la sangría del texto: alineado bajo la pregunta,
   no bajo el número. */
.faq--dos .faq__r{padding:0 1rem 1rem calc(.95rem + 2.15rem);}
@media (max-width:480px){.faq--dos .faq__r{padding-left:.95rem;}}

/* ── 16 · Formularios ─────────────────────────────────────────────────── */

.formulario{display:grid;gap:var(--sp-4);}
.campo{display:grid;gap:.42rem;}
.campo--doble{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}
@media (max-width:640px){.campo--doble{grid-template-columns:1fr;}}
.campo label{
  font-family:var(--font-head);font-size:var(--text-sm);font-weight:600;color:var(--c-text);
}
.campo label .req{color:var(--c-red);}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:50px;padding:.8rem 1rem;
  background:var(--c-bg);color:var(--c-text);
  border:1px solid var(--c-line-strong);border-radius:var(--r-sm);
  font-size:var(--text-base);
  transition:border-color var(--tr),box-shadow var(--tr);
}
.campo textarea{min-height:140px;resize:vertical;line-height:1.6;}
.campo select{appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2352607A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--c-brand);box-shadow:0 0 0 3px rgba(10,46,140,.14);
}
.campo input:user-invalid,.campo textarea:user-invalid{border-color:var(--c-err);}
.campo .ayuda{font-size:var(--text-xs);color:var(--c-text-2);}

.campo-check{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--text-sm);line-height:1.55;}
.campo-check input{width:24px;height:24px;min-height:0;flex:none;margin-top:.05rem;accent-color:var(--c-brand);}

/* Honeypot: oculto visualmente, nunca con display:none (algunos robots lo
   detectan) y fuera del orden de tabulación. */
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}

.captcha{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-4);border-radius:var(--r-sm);
  background:var(--c-bg-alt);border:1px dashed var(--c-line-strong);
}
.captcha label{margin:0;white-space:nowrap;}
.captcha input{max-width:110px;min-height:46px;}

.form-aviso{
  padding:var(--sp-4);border-radius:var(--r-sm);
  font-size:var(--text-sm);line-height:1.6;
}
.form-aviso[hidden]{display:none;}
.form-aviso--ok{background:#E7F5EE;border:1px solid #B5DFC9;color:var(--c-ok);}
.form-aviso--err{background:#FDECEA;border:1px solid #F3C2BD;color:var(--c-err);}

.btn[aria-disabled="true"],.btn:disabled{opacity:.6;pointer-events:none;}

/* ── 17 · Contacto y mapa ─────────────────────────────────────────────── */

.contacto__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--sp-gut) clamp(2rem,1rem + 4vw,4.5rem);
  align-items:start;
}
/* En la página de contacto las dos columnas se igualan en altura: la de datos
   mide unos 1.280 px por el mapa y la tabla de horarios, y el formulario se
   quedaba 260 px más corto, dejando un escalón. */
.contacto__grid--igualadas{align-items:stretch;}
@media (max-width:980px){
  .contacto__grid,.contacto__grid--igualadas{grid-template-columns:1fr;align-items:start;}
}

/* ── Panel del formulario ───────────────────────────────────────────────
   Fondo azul noche frente al blanco de la columna de datos. No es solo
   decoración: separa de un vistazo «aquí está la información» de «aquí se
   escribe», y el rojo del botón de envío gana todo el peso que necesita el
   único punto de conversión de la página.
   -------------------------------------------------------------------- */
.panel-form{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  padding:clamp(1.5rem,1rem + 2vw,2.6rem);
  border-radius:var(--r-lg);
  background:var(--c-ink-800);
  box-shadow:var(--sh-inv);
}
.panel-form::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(76,198,255,.22) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 55% at 88% 2%,#000,transparent 72%);
  mask-image:radial-gradient(70% 55% at 88% 2%,#000,transparent 72%);
}
.panel-form .antetitulo{color:var(--c-cyan);}
.panel-form h2{color:var(--c-inv);}
.panel-form > p{color:var(--c-inv-2);}

/* El formulario ocupa el alto sobrante y el campo de descripción absorbe la
   diferencia: es el campo que más se agradece grande. */
.panel-form .formulario{flex:1;display:flex;flex-direction:column;gap:var(--sp-4);}
.campo--crece{flex:1;min-height:150px;}
.campo--crece textarea{flex:1;height:100%;min-height:150px;max-height:340px;}

/* Campos sobre fondo oscuro */
.panel-form .campo label{color:var(--c-inv);}
.panel-form .campo input,
.panel-form .campo select,
.panel-form .campo textarea{
  /* background-color, NO la abreviada `background`: la abreviada reinicia
     background-repeat, -position y -size, y la flecha del <select> pasaba a
     repetirse en mosaico por todo el campo. */
  background-color:rgba(255,255,255,.06);
  color:var(--c-inv);
  /* --c-line-inv-2 (28 % de blanco) daba 2,48:1 sobre el panel: por debajo
     del 3:1 que WCAG 1.4.11 exige al contorno de un control. Con un 38 % sube
     a 3,5:1 y el campo se distingue del fondo sin recargar el conjunto. */
  border-color:rgba(255,255,255,.38);
}
.panel-form .campo input::placeholder,
.panel-form .campo textarea::placeholder{color:var(--c-inv-3);}
.panel-form .campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238FA3C7' stroke-width='1.6'/%3E%3C/svg%3E");
}
.panel-form .campo select option{background:var(--c-ink-700);color:var(--c-inv);}
.panel-form .campo input:focus,
.panel-form .campo select:focus,
.panel-form .campo textarea:focus{
  border-color:var(--c-cyan);
  box-shadow:0 0 0 3px var(--c-cyan-a25);
  background-color:rgba(255,255,255,.09);
}
.panel-form .ayuda{color:var(--c-inv-3);}
.panel-form .campo-check{color:var(--c-inv-2);}
.panel-form .campo-check input{accent-color:var(--c-cyan);}
.panel-form .campo-check a{color:var(--c-cyan);}
.panel-form .captcha{
  background-color:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.38);
}
.panel-form .form-aviso--ok{background:rgba(15,123,79,.16);border-color:#2F9E6B;color:#8FE7BF;}
.panel-form .form-aviso--err{background:rgba(179,38,30,.16);border-color:#C9564E;color:#FFB4AE;}
.panel-form .form-aviso a{color:var(--c-cyan);}
/* El pie de ayuda se pega abajo: si sobra alto, el hueco queda antes de él y
   no entre los campos. */
.panel-form .formulario > .ayuda:last-child{
  margin-top:auto;padding-top:var(--sp-2);
  font-size:var(--text-xs);line-height:1.6;
}

.datos-lista{display:grid;gap:var(--sp-4);}
.dato{display:flex;gap:var(--sp-4);align-items:flex-start;}
.dato__ico{
  flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--c-ink-700);border:1px solid var(--c-ink-500);color:var(--c-cyan);
}
.dato__ico svg{width:21px;height:21px;}
.seccion:not(.seccion--oscura):not(.seccion--marca) .dato__ico{
  background:var(--c-bg-alt2);border-color:var(--c-line);color:var(--c-brand);
}
.dato__t{
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-2);margin-bottom:.2rem;
}
.tema-oscuro .dato__t,.seccion--oscura .dato__t,.seccion--marca .dato__t{color:var(--c-inv-3);}
.dato__v{font-size:var(--text-base);font-weight:600;line-height:1.5;}
.dato__v a{display:inline-flex;align-items:center;min-height:26px;text-decoration:none;}
.seccion--oscura .dato__v,.seccion--marca .dato__v{color:var(--c-inv);}
.seccion--oscura .dato__v a,.seccion--marca .dato__v a{color:var(--c-inv);}
.seccion--oscura .dato__v a:hover,.seccion--marca .dato__v a:hover{color:var(--c-cyan);}

.horario-tabla{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
.horario-tabla th,.horario-tabla td{padding:.62rem 0;text-align:left;border-bottom:1px solid var(--c-line);}
.horario-tabla th{font-weight:600;color:var(--c-text-2);}
.horario-tabla td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;}
.tema-oscuro .horario-tabla th,.seccion--oscura .horario-tabla th{color:var(--c-inv-3);border-color:var(--c-line-inv);}
.tema-oscuro .horario-tabla td,.seccion--oscura .horario-tabla td{color:var(--c-inv);border-color:var(--c-line-inv);}

/* El mapa se carga en diferido y con las escuadras del marco, para que no
   parezca un recuadro pegado. */
.mapa{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:16/10;background:var(--c-ink-800);
  border:1px solid var(--c-line);
}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.28) contrast(1.04);}
@media (max-width:640px){.mapa{aspect-ratio:4/3;}}

/* ── 18 · Índice de consejos y buscador ───────────────────────────────── */

.filtros{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;
  padding-bottom:var(--sp-5);margin-bottom:var(--sp-6);border-bottom:1px solid var(--c-line);
}
.filtros__cats{display:flex;flex-wrap:wrap;gap:.45rem;}
.chip{
  padding:.5rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--c-line-strong);background:var(--c-bg);
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;
  color:var(--c-text-2);
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.chip:hover{border-color:var(--c-brand);color:var(--c-brand);}
.chip[aria-pressed="true"]{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-inv);}

.paginacion{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:var(--sp-7);}
.paginacion button{
  min-width:44px;min-height:44px;padding:0 .8rem;border-radius:var(--r-sm);
  border:1px solid var(--c-line);font-family:var(--font-head);font-size:var(--text-sm);font-weight:700;
  color:var(--c-text-2);transition:var(--tr);
}
.paginacion button:hover{border-color:var(--c-brand);color:var(--c-brand);}
.paginacion button[aria-current="page"]{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-inv);}
.paginacion button:disabled{opacity:.4;pointer-events:none;}

.sin-resultados{
  padding:var(--sp-8) var(--sp-5);text-align:center;
  border:1px dashed var(--c-line-strong);border-radius:var(--r-md);
  color:var(--c-text-2);
}
.resultado{padding:var(--sp-5) 0;border-bottom:1px solid var(--c-line);}
.resultado h2{font-size:var(--text-lg);margin-bottom:.35rem;}
.resultado h2 a{text-decoration:none;}
.resultado .url{font-size:var(--text-xs);color:var(--c-cyan-700);word-break:break-all;}
.resultado p{font-size:var(--text-sm);color:var(--c-text-2);margin-top:.35rem;}
.resultado mark{background:var(--c-cyan-a25);color:inherit;padding:0 .12em;border-radius:2px;}

/* ── 19 · Contenido de artículo ───────────────────────────────────────── */

.contenido{max-width:var(--container-narrow);}
.contenido > * + *{margin-top:var(--sp-5);}
.contenido h2{font-size:var(--text-2xl);margin-top:var(--sp-8);}
.contenido h3{font-size:var(--text-xl);margin-top:var(--sp-6);}
.contenido p{font-size:var(--text-md);line-height:var(--lh-loose);color:var(--c-text-2);}
.contenido strong{color:var(--c-text);font-weight:700;}
.contenido ul:not([class]){display:grid;gap:.6rem;}
.contenido ul:not([class]) li{position:relative;padding-left:1.5rem;font-size:var(--text-md);color:var(--c-text-2);line-height:1.7;}
.contenido ul:not([class]) li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--c-cyan-700);
}
.contenido ol:not([class]){counter-reset:n;display:grid;gap:.6rem;}
.contenido ol:not([class]) li{position:relative;padding-left:2.1rem;font-size:var(--text-md);color:var(--c-text-2);line-height:1.7;counter-increment:n;}
.contenido ol:not([class]) li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;color:var(--c-cyan-700);
}

.aviso-caja{
  padding:var(--sp-5);border-radius:var(--r-md);
  background:var(--c-bg-alt);border-left:4px solid var(--c-cyan-700);
}
.aviso-caja p{font-size:var(--text-sm);color:var(--c-text-2);line-height:1.7;}
.aviso-caja strong{color:var(--c-text);}

/* Aside pegajoso de las páginas de servicio */
.con-aside{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:var(--sp-gut) clamp(2rem,1rem + 3vw,4rem);align-items:start;
}
@media (max-width:1080px){.con-aside{grid-template-columns:1fr;}}
.aside-caja{
  position:sticky;top:calc(var(--h-header-scrolled) + 1.2rem);
  display:grid;gap:var(--sp-4);
  padding:var(--sp-5);border-radius:var(--r-md);
  background:var(--c-ink-800);color:var(--c-inv-2);
}
.aside-caja h2{font-size:var(--text-lg);color:var(--c-inv);}
.aside-caja p{font-size:var(--text-sm);color:var(--c-inv-3);}
.aside-serv{display:grid;gap:.1rem;}
.aside-serv a{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .7rem;border-radius:var(--r-sm);
  font-size:var(--text-sm);color:var(--c-inv-2);text-decoration:none;
  transition:background var(--tr),color var(--tr);
}
.aside-serv a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-cyan);opacity:.35;flex:none;transition:opacity var(--tr);}
.aside-serv a:hover{background:var(--c-ink-700);color:var(--c-inv);}
.aside-serv a:hover::before{opacity:1;}
.aside-serv a[aria-current="page"]{background:var(--c-ink-700);color:var(--c-cyan);font-weight:700;}
.aside-serv a[aria-current="page"]::before{opacity:1;}
@media (max-width:1080px){.aside-caja{position:static;}}

/* ── 20 · Pie de página ───────────────────────────────────────────────── */

.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-ink-900);color:var(--c-inv-3);
  padding-top:var(--sp-9);
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.4;
  background-image:radial-gradient(rgba(76,198,255,.22) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 90% at 12% 0%,#000,transparent 70%);
  mask-image:radial-gradient(60% 90% at 12% 0%,#000,transparent 70%);
}
.footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:var(--sp-6) var(--sp-gut);padding-bottom:var(--sp-8);
}
@media (max-width:980px){.footer__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.footer__grid{grid-template-columns:1fr;text-align:center;}}
.footer__marca img{height:clamp(56px,6vw,76px);width:auto;margin-bottom:var(--sp-4);}
@media (max-width:600px){.footer__marca img{margin-inline:auto;}}
.footer__desc{font-size:var(--text-sm);line-height:1.7;max-width:38ch;}
@media (max-width:600px){.footer__desc{margin-inline:auto;}}
.footer h2{
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-inv);
  margin-bottom:var(--sp-4);padding-bottom:.6rem;position:relative;
}
.footer h2::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--c-cyan);}
@media (max-width:600px){.footer h2::after{left:50%;transform:translateX(-50%);}}
.footer__lista{display:grid;gap:.15rem;}
.footer__lista a{display:inline-block;padding-block:.34rem;font-size:var(--text-sm);color:var(--c-inv-3);text-decoration:none;transition:color var(--tr),padding-left var(--tr);}
.footer__lista a:hover{color:var(--c-cyan);padding-left:5px;}
@media (max-width:600px){.footer__lista a:hover{padding-left:0;}}
.footer__contacto{display:grid;gap:var(--sp-3);font-size:var(--text-sm);}
.footer__contacto a{color:var(--c-inv-2);text-decoration:none;display:inline-flex;align-items:flex-start;gap:.55rem;min-height:26px;padding-block:.2rem;}
.footer__contacto a:hover{color:var(--c-cyan);}
.footer__contacto svg{width:16px;height:16px;color:var(--c-cyan);flex:none;margin-top:.2em;}
@media (max-width:600px){.footer__contacto a{justify-content:center;}}

.footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-3) var(--sp-5);
  padding-block:var(--sp-4);border-top:1px solid var(--c-line-inv);
  font-size:var(--text-xs);
}
.footer__legal nav{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem var(--sp-4);}
.footer__legal a{display:inline-block;padding-block:.3rem;color:var(--c-inv-3);text-decoration:none;}
.footer__legal a:hover{color:var(--c-cyan);}
.footer__firma a{color:var(--c-inv-2);}

/* Firma del estudio. Va en cian y nunca en rojo: el rojo está reservado a las
   acciones del taller y usarlo aquí lo devaluaría. El brillo barre cada 6 s
   con una larga espera integrada en los propios fotogramas —el barrido real
   ocupa del 66 % al 92 % del ciclo—, que es la forma de tener un destello
   ocasional con una sola animación infinita. */
.firma-btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem 1.1rem;min-height:38px;
  border-radius:var(--r-pill);
  border:1px solid var(--c-line-inv);
  background:rgba(255,255,255,.04);
  text-decoration:none;white-space:nowrap;
  transition:border-color var(--tr),background var(--tr),transform var(--t-fast) var(--ease),box-shadow var(--tr);
}
.firma-btn__eti{
  font-size:var(--text-xs);color:var(--c-inv-3);
  transition:color var(--tr);
}
.firma-btn__marca{
  font-family:var(--font-head);font-size:var(--text-xs);font-weight:800;
  letter-spacing:.13em;color:var(--c-inv);
  transition:color var(--tr);
}
.firma-btn__brillo{
  position:absolute;inset:-60% -130%;z-index:-1;
  background:linear-gradient(74deg,transparent 40%,rgba(76,198,255,.55) 50%,transparent 60%);
  transform:translateX(-45%);
  animation:firmaBrillo 6s ease-in-out 2s infinite;
}
@keyframes firmaBrillo{
  0%,66%{transform:translateX(-45%);}
  92%,100%{transform:translateX(45%);}
}
.firma-btn:hover,.firma-btn:focus-visible{
  border-color:var(--c-cyan);
  background:var(--c-cyan-a12);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(76,198,255,.18);
}
.firma-btn:hover .firma-btn__marca,.firma-btn:focus-visible .firma-btn__marca{color:var(--c-cyan);}
.firma-btn:hover .firma-btn__eti,.firma-btn:focus-visible .firma-btn__eti{color:var(--c-inv-2);}
.firma-btn:active{transform:translateY(0);}

.footer__legal{gap:var(--sp-3) var(--sp-5);}
@media (max-width:700px){
  .footer__legal{justify-content:center;text-align:center;}
}
/* El enlace de reapertura del panel de cookies es un <button> por
   accesibilidad (no navega), pero debe leerse y medir como los demás. */
.footer__legal button{
  display:inline-block;padding-block:.3rem;
  font:inherit;color:var(--c-inv-3);text-decoration:underline;cursor:pointer;
}
.footer__legal button:hover{color:var(--c-cyan);}

/* ── 21 · Botón lateral de WhatsApp y volver arriba ───────────────────────
   El de WhatsApp es CSS puro: panel pegado al lateral que se despliega al
   pasar el ratón o al recibir foco y muestra el teléfono.
   Debe estar en TODAS las páginas servidas, incluida 404.html.
   ------------------------------------------------------------------------ */

.wa{
  /* Tres cuartos de la altura de la ventana, no la mitad: a media altura
     competía con el contenido principal del encabezado. */
  position:fixed;right:0;top:74%;transform:translateY(-50%);
  z-index:var(--z-flot);
  display:flex;align-items:center;
  height:var(--wa-size);
  /* El icono está posicionado en absoluto sobre la derecha y ocupa --wa-size
     de ancho: el relleno derecho tiene que reservarle ESE espacio entero, más
     un respiro. Antes se le restaban 14 px y el número se metía debajo del
     icono. */
  padding-right:calc(var(--wa-size) + .5rem);
  border-radius:var(--r-md) 0 0 var(--r-md);
  background:#1FA855;color:#fff;text-decoration:none;
  box-shadow:-6px 8px 26px rgba(3,8,20,.4);
  max-width:var(--wa-size);
  overflow:hidden;
  transition:max-width var(--t-slow) var(--ease-out),background var(--tr);
}
.wa:hover,.wa:focus-visible{
  /* En el estado desplegado el relleno derecho NO puede bajar: el icono sigue
     ahí. Antes pasaba a 1,4 rem y el texto se montaba encima. */
  max-width:340px;background:#17904a;color:#fff;
}
.wa__ico{
  position:absolute;right:0;top:0;
  width:var(--wa-size);height:var(--wa-size);
  display:grid;place-items:center;flex:none;
}
.wa__ico svg{width:29px;height:29px;fill:currentColor;}
/* Anillo pulsante: llama la atención sin ocupar espacio. */
.wa__ico::before{
  content:"";position:absolute;inset:9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  animation:waPulso 2.6s ease-out infinite;
}
@keyframes waPulso{
  0%{transform:scale(.85);opacity:.85;}
  70%{transform:scale(1.5);opacity:0;}
  100%{transform:scale(1.5);opacity:0;}
}
.wa__txt{
  display:grid;gap:.05rem;padding-left:1.15rem;padding-right:.2rem;white-space:nowrap;
  opacity:0;transition:opacity var(--t) var(--ease) .12s;
}
.wa:hover .wa__txt,.wa:focus-visible .wa__txt{opacity:1;}
.wa__t{font-family:var(--font-head);font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85;}
.wa__n{font-family:var(--font-head);font-size:var(--text-lg);font-weight:800;letter-spacing:.01em;line-height:1.1;}
.wa:focus-visible{outline:3px solid #fff;outline-offset:-3px;}
@media (max-width:600px){
  .wa{top:auto;bottom:calc(var(--wa-size) + 26px);transform:none;}
}

/* Volver arriba: su posición se calcula sobre el alto del botón de WhatsApp
   o en móvil se solapan. Es un fallo que no se ve revisando en escritorio. */
.arriba{
  position:fixed;right:16px;bottom:16px;z-index:var(--z-flot);
  width:48px;height:48px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--c-ink-800);color:var(--c-inv);
  border:1px solid var(--c-line-inv-2);
  box-shadow:var(--sh-inv);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--tr),transform var(--tr),visibility 0s linear var(--t),background var(--tr);
}
.arriba.visible{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.arriba:hover{background:var(--c-brand);border-color:var(--c-brand);}
.arriba svg{width:19px;height:19px;}

/* ── 22 · Aviso de cookies ────────────────────────────────────────────── */
/* cookies.js inyecta su propio CSS para ser autónomo en cualquier plantilla.
   Aquí solo se alinean los colores con los tokens del proyecto. */
.ck-banner,.ck-modal{font-family:var(--font-body);}
.ck-banner .ck-btn--ok,.ck-modal .ck-btn--ok{background:var(--c-red);}
.ck-banner .ck-btn--ok:hover,.ck-modal .ck-btn--ok:hover{background:var(--c-red-700);}

/* ── 23 · Movimiento reducido ────────────────────────────────────────────
   No basta con animation:none. Si una animación deja el elemento en su
   estado inicial (un trazo con stroke-dashoffset:100 es un círculo
   invisible), hay que fijar además el estado visible.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto;}
  .reveal{opacity:1!important;transform:none!important;}
  .hero__slide.is-on img{animation:none;transform:scale(1.06);}
  .hc--traza{stroke-dashoffset:0;}          /* trazo completo, no invisible */
  .hc--punt{opacity:.5;}
  .hc-pt{opacity:.9;transform:none;}
  .wa__ico::before{display:none;}
  .firma-btn__brillo{display:none;}
  .orbital__halo{opacity:.5;}
  .orbital__sat i{opacity:.8;}
  .hero__num-fill{height:100%;}
  .hero__num[aria-selected="true"] .hero__num-fill{height:100%;}
  .hero__num[aria-selected="true"] .hero__num-n{background-position:0 100%;}
  .paso__avance i{width:100%;}
  .orbital__item::after{width:clamp(.9rem,2.6vw,3rem);}
  .marco::after{inset:10px;}
}

/* ── 24 · Impresión ───────────────────────────────────────────────────── */

@media print{
  .site-header,.wa,.arriba,.hero__nums,.hero__circulos,.buscador-overlay,
  .ck-banner,.ck-modal,.filtros,.paginacion,.saltar{display:none!important;}
  body{color:#000;background:#fff;font-size:11pt;}
  .hero,.cab-pagina{padding-top:0;background:none;color:#000;min-height:0;}
  .hero h1,.cab-pagina h1,.tema-oscuro h2{color:#000;}
  .hero__media,.hero__velo,.cab-pagina__media{display:none;}
  .seccion{padding-block:1.2rem;}
  .faq--dos{grid-template-columns:1fr;}
  .faq details{break-inside:avoid;}
  .faq__r{display:block!important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}