/* =========================================================================
   ASPIDA Ltda. — hoja de estilos
   Todos los valores salen de tokens.css. Si algo necesita un numero nuevo,
   se añade alli, no aqui.
   ========================================================================= */

@font-face{font-family:Sansation;src:url(../assets/fonts/sansation-regular.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Sansation;src:url(../assets/fonts/sansation-bold.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* --- tokens de tema: cada seccion los redefine con una clase --- */
:root{
  --txt:var(--tinta);
  --txt-2:var(--neutro-600);
  --acento-txt:var(--marca-500);
  --filete:var(--acento-500);
  --linea-c:var(--neutro-200);
  --sup:var(--blanco);
  --fondo-s:var(--blanco);
  /* alias del circuito del equipo: nombres del encargo, colores del manual */
  --azul-900:var(--marca-900);
  --azul-600:var(--acento-600);
  --azul-400:var(--acento-400);
  --azul-300:var(--acento-300);
  --gris-050:var(--papel);
  --foto-size:clamp(240px,20vw,340px);   /* el circulo del equipo, uno para todos */
  /* la placa oscura: fondo, rejilla y tintes. Todo sale de la paleta del
     manual, sin un hex nuevo. */
  --eqc-fondo:var(--noche);            /* #0A0F14 */
  --eqc-fondo-luz:var(--marca-900);    /* #151E27, el respiro detras del circuito */
  --eqc-carta:var(--marca-800);        /* #1D2936, la superficie que se despega del fondo */
  --eqc-rejilla:var(--acento-200);
  --eqc-txt:var(--blanco);
  /* el cuerpo llevaba el azul del acento y sobre la placa se leia lavado:
     va tirado a neutro, 14.6:1 sobre el fondo y 11.2:1 sobre una tarjeta */
  --eqc-txt-2:color-mix(in srgb,var(--acento-200) 62%,var(--neutro-100));
  --eqc-traza-1:var(--acento-400);     /* azul brillante */
  --eqc-traza-2:var(--icono-tinte);    /* cian */
  --eqc-vineta:color-mix(in srgb,var(--eqc-fondo) 92%,transparent);
  --eqc-txt-3:var(--acento-300);       /* lo mas apagado que se usa: copyright, 10.4:1 */
  /* el cian de las trazas da 6.6:1 y como texto se queda justo: para rotulos
     va aclarado con blanco, 9.4:1, y el de las pistas se deja como esta. */
  --eqc-cian-txt:color-mix(in srgb,var(--eqc-traza-2) 70%,var(--blanco));
  --eqc-filo:color-mix(in srgb,var(--eqc-traza-1) 34%,transparent);
  --eqc-filo-vivo:color-mix(in srgb,var(--eqc-traza-2) 60%,transparent);
  /* escala tipografica y de espaciado del modulo de equipo. Son alias de la
     escala del sitio: los nombres son otros, los valores no se duplican. */
  --fs-xs:var(--t-caption); --fs-sm:var(--t-body-sm); --fs-md:var(--t-body);
  --fs-lg:var(--t-body-lg); --fs-xl:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  --fs-2xl:clamp(1.8rem,1.3rem + 2.2vw,2.9rem);
  --fs-3xl:clamp(2.5rem,1.4rem + 5vw,5rem);
  --sp-1:var(--e-8);  --sp-2:var(--e-16); --sp-3:var(--e-24); --sp-4:var(--e-32);
  --sp-5:var(--e-48); --sp-6:var(--e-64); --sp-7:var(--e-96); --sp-8:var(--e-128);
  /* los tintes del circuito: nada de rgba sueltos repartidos por el bloque */
  --eqc-halo:color-mix(in srgb,var(--eqc-traza-1) 26%,transparent);
  --eqc-brillo:color-mix(in srgb,var(--eqc-traza-2) 45%,transparent);
  --eqc-sombra:color-mix(in srgb,var(--negro) 60%,transparent);
  /* el pulso: una sola definicion para las trazas del encabezado y las del
     circuito del equipo, que es lo que hace que se lean como un solo sistema */
  --pulso-dash:12 88; --pulso-dur:3.6s; --pulso-color:var(--acento-300);
}
.t-gris{--fondo-s:var(--papel);--sup:var(--blanco);background:var(--fondo-s)}
.t-marca{--txt:var(--blanco);--txt-2:var(--marca-200);--acento-txt:var(--marca-200);
  --filete:var(--marca-200);--linea-c:rgba(255,255,255,.24);--sup:var(--marca-600);
  --fondo-s:var(--marca-500);background:var(--fondo-s);color:var(--txt)}
.t-oscuro{--txt:var(--blanco);--txt-2:var(--marca-300);--acento-txt:var(--acento-300);
  --filete:var(--acento-400);--linea-c:rgba(255,255,255,.16);--sup:var(--marca-700);
  --fondo-s:var(--marca-800);background:var(--fondo-s);color:var(--txt)}

*{box-sizing:border-box}
/* el atributo hidden por delante de cualquier display de clase: sin esto un
   .fc-hecho{display:grid} deja visible lo que el HTML marca como oculto */
[hidden]{display:none !important}
/* El hueco de la barra se reserva siempre: si aparece y desaparece, cambia el
   ancho del viewport, se rehace el calculo y la pagina vibra. overflow-y va
   con el porque scrollbar-gutter no existe en Safari anterior al 18.2. */
html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll}
body{margin:0;background:var(--blanco);color:var(--txt);
  font:var(--pe-body) var(--t-body)/var(--lh-body) var(--fuente);
  -webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,h5,h6{font-family:var(--fuente-titulo);margin:0;color:var(--txt)}
h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);
  font-weight:var(--pe-h1)}
h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  font-weight:var(--pe-h2)}
h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);
  font-weight:var(--pe-h3)}
h4{font-size:var(--t-h4);line-height:var(--lh-h4);font-weight:var(--pe-h4)}
p{margin:0 0 var(--e-16)}

.wrap{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--aire-seccion)}
section[id]{scroll-margin-top:var(--e-96)}

.etiqueta{margin:0 0 var(--e-16);font-family:var(--fuente-titulo);
  font-size:var(--t-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);font-weight:var(--pe-caption);
  text-transform:uppercase;color:var(--acento-txt)}
.etiqueta::before{content:"";display:block;width:var(--e-48);height:3px;
  border-radius:var(--r-1);background:var(--filete);margin-bottom:var(--e-16);
  transform-origin:left;transition:transform var(--d-media) var(--e-estandar)}

.lead{color:var(--txt-2);max-width:56ch;font-size:var(--t-body-lg);
  line-height:var(--lh-body-lg)}

.saltar{position:absolute;left:-9999px;top:0;z-index:99;padding:var(--e-16) var(--e-24);
  background:var(--marca-500);color:var(--blanco);text-decoration:none}
.saltar:focus{left:0}

/* ---------- botones ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-8);
  min-height:var(--toque-min);padding:var(--e-16) var(--e-32);
  border:1px solid transparent;border-radius:var(--r-2);
  font-family:var(--fuente-titulo);font-size:var(--t-body-sm);font-weight:700;
  text-decoration:none;cursor:pointer;
  transition:background var(--d-rapida) var(--e-estandar),
             color var(--d-rapida) var(--e-estandar),
             border-color var(--d-rapida) var(--e-estandar)}
.b span{transition:transform var(--d-rapida) var(--e-estandar)}
.b:hover span{transform:translateX(4px)}
.b-1{background:var(--marca-500);color:var(--blanco)}
.b-1:hover{background:var(--marca-700)}
.b-2{background:transparent;color:var(--txt);border-color:currentColor}
.b-2:hover{background:var(--txt);color:var(--marca-500)}
.b-3{background:var(--blanco);color:var(--marca-500)}
.b-3:hover{background:var(--papel)}
:focus-visible{outline:2px solid var(--acento-500);outline-offset:3px}

.enlace{display:inline-flex;align-items:center;gap:var(--e-8);position:relative;
  font-family:var(--fuente-titulo);font-weight:700;font-size:var(--t-body-sm);
  color:var(--acento-txt);text-decoration:none}
/* subrayado que se dibuja de izquierda a derecha */
.enlace::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-media) var(--e-estandar)}
.enlace:hover::after,.enlace:focus-visible::after{transform:scaleX(1)}
.enlace span{transition:transform var(--d-rapida) var(--e-estandar)}
.enlace:hover span{transform:translateX(4px)}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:30;background:var(--marca-800);
  border-bottom:1px solid rgba(255,255,255,.16);color:var(--blanco)}
.cab-main-in{display:flex;align-items:center;gap:var(--e-32);padding-block:var(--e-16);
  transition:padding var(--d-media) var(--e-estandar)}
.cab.compacta .cab-main-in{padding-block:var(--e-8)}
.marca{position:relative;display:flex;margin-right:auto}
/* El logo va a 80% de blanco, no a 100%: si no, el reflejo seria blanco sobre
   blanco y no se veria nada. La banda lo lleva al 100% al pasar. */
.marca img{height:var(--e-64);filter:brightness(0) invert(1);opacity:.72;
  transition:height var(--d-media) var(--e-estandar)}
.cab.compacta .marca img{height:var(--e-48)}
/* Reflejo recortado al logo: el propio PNG hace de mascara, asi que la banda
   solo se ve sobre el escudo y sobre el trazo de cada letra, nunca sobre el
   fondo. Como la mascara debe quedarse quieta, lo que se mueve es el
   background-position y no un transform. Banda estrecha a proposito: al cruzar
   va encendiendo las letras de una en una. */
.marca::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 44%,#fff 50%,transparent 56%) no-repeat;
  background-size:300% 100%;background-position:200% 0;
  -webkit-mask:url(../assets/logo-azul.svg) left center/contain no-repeat;
          mask:url(../assets/logo-azul.svg) left center/contain no-repeat;
  animation:reflejo var(--d-reflejo) var(--e-estandar) infinite}
/* de 200% a -100%: la banda entra por el escudo y sale por la ultima letra */
@keyframes reflejo{0%,68%{background-position:200% 0}100%{background-position:-100% 0}}

.menu{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-32)}
.cab-cta{margin-left:var(--e-8)}
.menu a{position:relative;display:inline-flex;align-items:center;min-height:var(--toque-min);
  font-family:var(--fuente-titulo);font-size:var(--t-body-sm);
  text-decoration:none;color:var(--marca-200);
  transition:color var(--d-rapida) var(--e-estandar)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:var(--e-8);height:2px;
  background:var(--acento-400);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-media) var(--e-estandar)}
.menu a:hover{color:var(--blanco)}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1)}
.menu a.on{color:var(--blanco);font-weight:700}

.menu-btn{display:none;width:var(--toque-min);height:var(--toque-min);padding:0;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-2);
  background:none;cursor:pointer;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;left:12px;
  width:20px;height:2px;background:var(--blanco);content:"";
  transition:transform var(--d-rapida) var(--e-estandar)}
.menu-btn span{top:21px}
.menu-btn span::before{left:0;top:-6px}
.menu-btn span::after{left:0;top:6px}
/* Con el menu abierto la cabecera sube por encima de todo. .cab tiene
   z-index:30 y crea contexto de apilado: el panel, que es su descendiente,
   no puede superar ese nivel por mucho z-index que lleve, y el boton de
   volver arriba (40) y los desplegables (40) le quedaban encima. */
.cab.abierto{z-index:60}
.cab.abierto .menu-btn span{background:transparent}
.cab.abierto .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.cab.abierto .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:0;   /* sin el padding-block de section */
  background:var(--marca-800);color:var(--blanco)}
.hero-carril{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;cursor:grab}
.hero-carril::-webkit-scrollbar{display:none}
.hero-carril.arrastrando{cursor:grabbing;user-select:none}
.hero-carril.arrastrando *{pointer-events:none}

.hslide{position:relative;flex:0 0 100%;scroll-snap-align:start;isolation:isolate;
  overflow:hidden;min-height:clamp(32rem,86vh,50rem);
  display:grid;align-content:space-between;gap:var(--e-32);
  padding:var(--e-96) var(--e-64) var(--e-96)}
.hslide-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hslide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(29,41,54,.92) 10%,rgba(57,83,109,.62) 55%,
    rgba(75,124,173,.42))}
.hslide h1,.hslide h2{max-width:15ch;color:var(--blanco);
  font-size:var(--t-display);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);text-transform:uppercase}

.hslide.activa h1,.hslide.activa h2{
  animation:revela var(--d-hero) var(--e-salida) backwards}
.hslide.activa .hslide-pie>p{
  animation:sube var(--d-hero) calc(var(--paso-stagger)*3) var(--e-salida) backwards}
.hslide.activa .hslide-pie>.b{
  animation:sube var(--d-hero) calc(var(--paso-stagger)*5) var(--e-salida) backwards}
.hslide.activa .hslide-bg{animation:acerca var(--d-zoom-hero) linear backwards}
@keyframes revela{
  from{opacity:0;transform:translateY(var(--desp-entrada));clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 -8% 0)}}
@keyframes sube{from{opacity:0;transform:translateY(var(--desp-entrada))}}
@keyframes acerca{from{transform:scale(1.07)}to{transform:scale(1)}}

.hslide-pie{display:grid;gap:var(--e-16);justify-self:end;max-width:34rem}
.hslide-pie p{margin:0;color:var(--marca-100);font-size:var(--t-body-lg);
  line-height:var(--lh-body-lg)}
.hslide-pie .b{justify-self:start}

.hero-barra{position:absolute;left:0;right:0;bottom:var(--e-32);z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-32);
  width:min(100% - var(--e-48),var(--ancho));margin-inline:auto}
.hero-puntos{display:flex;gap:var(--e-24);list-style:none;margin:0;padding:0}
.hero-puntos button{position:relative;padding:0 0 var(--e-8);border:0;background:none;
  cursor:pointer;color:rgba(255,255,255,.55);font-family:var(--fuente-titulo);
  font-size:var(--t-body-sm);letter-spacing:.08em;line-height:1;
  transition:color var(--d-media) var(--e-estandar)}
/* filete que crece bajo el numero */
.hero-puntos button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(.35);transform-origin:left;
  transition:transform var(--d-media) var(--e-estandar),
             background var(--d-media) var(--e-estandar)}
.hero-puntos button:hover{color:var(--blanco)}
.hero-puntos .on button{color:var(--blanco);font-size:var(--t-h4)}
.hero-puntos .on button::after{transform:scaleX(1);background:var(--acento-400)}
.hero-pista{margin:0;font-size:var(--t-caption);letter-spacing:var(--ls-caption);
  text-transform:uppercase;color:rgba(255,255,255,.42)}

/* ---------- clientes ---------- */
.confianza{padding-block:var(--e-64)}
.confianza .etiqueta{margin-bottom:var(--e-32)}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--logo-min),1fr));
  gap:var(--e-24);list-style:none;margin:0;padding:0}
.logos li{aspect-ratio:1;border:1px solid var(--linea-c);border-radius:50%;
  display:grid;place-items:center;padding:19%;
  transition:border-color var(--d-media) var(--e-estandar),
             transform var(--d-media) var(--e-estandar)}
.logos li:hover{border-color:var(--acento-500);transform:translateY(calc(-1*var(--desp-hover)))}
.logos img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:.6;transition:opacity var(--d-media) var(--e-estandar)}
.logos li:hover img{opacity:1}
.t-oscuro .logos img,.t-marca .logos img{filter:invert(1)}

/* ---------- encabezado de seccion ---------- */
.cab-sec{display:grid;gap:var(--e-16);margin-bottom:var(--e-48)}
.cab-sec>p{margin:0;color:var(--txt-2);max-width:50ch}
/* Interaccion: al pasar por el encabezado el filete se alarga y al titular le
   crece un subrayado desde la izquierda, como a los enlaces del menu. */
.cab-sec:hover .etiqueta::before{transform:scaleX(2)}
.cab-sec h2{position:relative;display:inline-block}
.cab-sec h2::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:2px;
  background:var(--filete);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-media) var(--e-estandar)}
.cab-sec:hover h2::after{transform:scaleX(1)}

/* ---------- acordeon ---------- */
.acc{border-top:1px solid var(--linea-c)}
.acc-item{border-bottom:1px solid var(--linea-c);
  transition:background var(--d-rapida) var(--e-estandar)}
.acc-item:hover,.acc-item.abierto{background:var(--sup)}
.acc-h{margin:0;font-size:inherit;font-weight:inherit}
.acc-tit{display:flex;align-items:center;gap:var(--e-24);width:100%;
  min-height:var(--toque-min);padding:var(--e-32) var(--e-16);
  border:0;background:none;cursor:pointer;text-align:left;color:var(--txt);
  font-family:var(--fuente-titulo);font-size:var(--t-h3);line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);font-weight:700;
  transition:color var(--d-rapida) var(--e-estandar)}
.acc-tit:hover{color:var(--acento-txt)}
.acc-num{font-size:var(--t-caption);font-weight:400;color:var(--acento-txt);
  flex:0 0 var(--e-48);letter-spacing:var(--ls-caption)}
.acc-nom{flex:1}
.acc-mas{position:relative;flex:0 0 20px;width:20px;height:20px}
.acc-mas::before,.acc-mas::after{content:"";position:absolute;background:var(--filete);
  transition:transform var(--d-media) var(--e-estandar)}
.acc-mas::before{left:0;right:0;top:9px;height:2px}
.acc-mas::after{top:0;bottom:0;left:9px;width:2px}
.acc-item.abierto .acc-mas::after{transform:scaleY(0)}
.acc-cuerpo{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-media) var(--e-estandar)}
.acc-item.abierto .acc-cuerpo{grid-template-rows:1fr}
.acc-in{overflow:hidden;color:var(--txt-2);padding-inline:var(--e-16)}
.acc-in>:last-child{margin-bottom:var(--e-32)}
.acc-in p{max-width:60ch}
.acc-in ul{list-style:none;margin:0 0 var(--e-24);padding:0;display:grid;
  gap:var(--e-8);max-width:60ch}
.acc-in li{position:relative;padding-left:var(--e-24);font-size:var(--t-body-sm)}
.acc-in li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;
  background:var(--filete)}

/* enlace al modulo completo, bajo el acordeon del home */
.acc-mas-link{margin:var(--e-32) 0 0}

/* Titular a escala de portada, con los dos renglones entrando uno tras otro.
   Sin parrafo de apoyo, la rejilla de dos columnas dejaba la derecha vacia y
   estrechaba el titular a la mitad: aqui va a una sola columna. */
.servicios .cab-sec{grid-template-columns:1fr}
.servicios .cab-sec h2{font-size:var(--t-display);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);max-width:20ch}
.servicios .cab-sec h2 span{display:block}
.servicios .cab-sec h2 em{font-style:normal;color:var(--acento-600)}
.entra .cab-sec.on h2 span{animation:revela var(--d-entrada) var(--e-estandar) backwards}
.entra .cab-sec.on h2 span:nth-child(2){animation-delay:calc(var(--paso-stagger) * 2.2)}

/* servicios de un grupo que aun no tienen texto propio */
.grupo-lista{list-style:none;margin:0 0 var(--e-24);padding:0;display:grid;gap:var(--e-8);
  max-width:46ch}
.grupo-lista li{position:relative;padding-left:var(--e-32);color:var(--txt)}
.grupo-lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:var(--e-16);height:2px;background:var(--filete)}

/* marcador de grupo sin contenido escrito, como [NIT] o [FECHA] */
.grupo-pendiente{margin:0;padding:var(--e-24);border:1px dashed var(--linea-c);
  border-radius:var(--r-1);max-width:46ch;
  font-family:var(--fuente-mono);font-size:var(--t-caption);letter-spacing:.1em;
  color:var(--txt-2)}

/* las cifras arrancan justo despues del abanico: los 80px de la banda son
   toda la separacion */
.servicios{padding-bottom:0}

/* ---------- abanico de servicios del home ---------- */
/* El SVG pone los sectores y va aria-hidden; el texto es HTML de verdad,
   colocado en porcentajes sobre el mismo rectangulo que el viewBox. */
/* Se sale de la columna de 1280 con margenes negativos calculados, para que el
   abanico respire; el texto escala con el, de ahi el font-size en vw. */
/* el 4% de abajo dejaba un vacio enorme antes de las cifras */
.abanico{--w:min(96vw,1760px);position:relative;width:var(--w);
  margin:var(--e-64) calc((100% - var(--w)) / 2) 0;
  font-size:clamp(.72rem,.05rem + 1.2vw,1.38rem)}
.abanico-fondo{display:block;width:100%;height:auto}
/* La lista tapa todo el rectangulo del abanico: sin esto se queda con los
   eventos del raton y el sector coloreado nunca recibe el hover, asi que solo
   reaccionaba el titulo. Los enlaces si los recuperan. */
.abanico-lista{list-style:none;margin:0;padding:0;position:absolute;inset:0;
  pointer-events:none}
.abanico-item a{pointer-events:auto}
.abanico-item{position:absolute;left:var(--x);top:var(--y);width:19.5%;
  transform:translate(-50%,-50%);text-align:center;color:var(--blanco)}
.abanico-num{margin:0 0 .35em;font-family:var(--fuente-mono);font-size:.82em;
  letter-spacing:.24em;color:rgba(255,255,255,.55)}
.abanico-item.activo .abanico-num{color:var(--acento-300)}
.abanico-item h3{color:var(--blanco);margin:0 0 .5em;font-size:calc(1.1em * var(--esc,1));line-height:1.12;
  letter-spacing:.02em;text-transform:uppercase;
  /* equilibra las lineas y parte las palabras largas antes que desbordar */
  text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.abanico-item p{margin:0;font-size:.88em;line-height:1.32;text-wrap:balance;color:rgba(255,255,255,.88)}
/* la burbuja del icono, montada sobre el borde exterior del sector */
.abanico-iconos{position:absolute;inset:0;pointer-events:none}
.abanico-ico{position:absolute;left:var(--x);top:var(--y);
  width:4.6em;height:4.6em;margin:0;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;
  background:var(--blanco);color:var(--marca-500);
  box-shadow:0 6px 18px rgba(10,15,20,.28)}
.abanico-ico svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* nucleo: un escudo con el caracter del casco de la marca. La silueta va en
   clip-path con porcentajes (path() solo admite px y rompe el responsive) y es
   simetrica por construccion: el lado izquierdo es el derecho reflejado. La
   punta cae justo en la base del abanico, asi que no sobresale nada por debajo.
   Tres capas clipadas con la misma silueta: canto (el propio <a>), cara
   (::before) y destello (::after). --escudo las comparte. */
.abanico-centro{--escudo:polygon(50.0% 0.0%,63.0% 0.4%,74.3% 1.2%,83.8% 2.5%,91.3% 4.5%,96.8% 7.2%,98.0% 15.1%,98.2% 23.4%,97.6% 32.0%,96.3% 40.6%,94.2% 49.2%,92.0% 55.5%,89.2% 61.9%,85.6% 68.2%,81.3% 74.3%,76.3% 80.3%,70.7% 85.9%,64.4% 91.1%,57.5% 95.8%,50.0% 100.0%,42.5% 95.8%,35.6% 91.1%,29.3% 85.9%,23.7% 80.3%,18.7% 74.3%,14.4% 68.2%,10.8% 61.9%,8.0% 55.5%,5.8% 49.2%,3.7% 40.6%,2.4% 32.0%,1.8% 23.4%,2.0% 15.1%,3.2% 7.2%,8.7% 4.5%,16.2% 2.5%,25.7% 1.2%,37.0% 0.4%,50.0% 0.0%);
  position:absolute;left:50%;bottom:3.66%;transform:translateX(-50%);
  width:21%;aspect-ratio:1/1.14;
  clip-path:var(--escudo);
  /* el canto, con un biselado suave para que lea como metal y no como borde */
  background:linear-gradient(158deg,var(--blanco) 38%,var(--acento-200));
  padding:1.1em 1.6em 2.6em;
  display:grid;place-content:center;justify-items:center;gap:.3em;
  text-align:center;text-decoration:none;transform-origin:bottom center;
  filter:drop-shadow(0 10px 24px rgba(10,15,20,.32));
  transition:transform var(--d-media) var(--e-salida),
             filter var(--d-media) var(--e-estandar)}
/* la cara oscura, por dentro del canto. El panal es el mismo mosaico de la
   piel tecnica: background-image y no mask, asi que tambien sale con file://. */
.abanico-centro::before{content:"";position:absolute;inset:8px;z-index:0;
  clip-path:var(--escudo);
  background:linear-gradient(rgba(29,41,54,.74),rgba(10,15,20,.84)),
    url(../assets/panal.svg) repeat 50% 40%/96px 61px,
    radial-gradient(circle at 50% 28%,var(--marca-600),var(--noche))}
/* destello que recorre el escudo al pasar el cursor; lo recorta la silueta del
   padre, asi que la luz sigue la forma y no una caja */
.abanico-centro::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.28) 50%,
    transparent 60%) no-repeat;
  background-size:280% 100%;background-position:190% 0;
  transition:background-position var(--d-lenta) var(--e-estandar)}
.abanico-centro:is(:hover,:focus-visible)::after{background-position:-90% 0}
.abanico-centro>*{position:relative;z-index:1}
.abanico-centro:hover{transform:translateX(-50%) scale(1.04);
  filter:drop-shadow(0 16px 34px rgba(10,15,20,.44))}
.abanico-centro img{width:3.9em;height:auto;opacity:.95;
  filter:brightness(0) invert(1)}
.abanico-centro-t{font-family:var(--fuente-titulo);font-weight:700;line-height:1.05;
  font-size:1.15em;letter-spacing:.06em;text-transform:uppercase;color:var(--blanco)}
.abanico-centro-mas{display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--fuente-mono);font-size:.85em;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acento-300)}
.abanico-centro-mas i{font-style:normal;transition:transform var(--d-rapida) var(--e-estandar)}
.abanico-centro:hover .abanico-centro-mas i{transform:translateX(3px)}

/* --- el sector es clicable y se ilumina junto a su texto y su icono ----- */
.abanico-velo{pointer-events:none;opacity:.82;transform-box:view-box;
  transform-origin:500px 526px;
  transition:opacity var(--d-media) var(--e-estandar),
             transform var(--d-media) var(--e-salida)}
/* al activarse el velo se aclara y asoma la foto */
.abanico-velo.activo{opacity:.62;transform:scale(1.055)}
.abanico-sector{cursor:pointer;transform-box:view-box;transform-origin:500px 526px;
  stroke:#ffffff;stroke-opacity:0;stroke-width:2.5;
  transition:filter var(--d-media) var(--e-estandar),
             transform var(--d-media) var(--e-salida),
             stroke-opacity var(--d-media) var(--e-estandar)}
.abanico-item a{display:block;color:inherit;text-decoration:none}
/* crece desde el centro del abanico, asi que se despega hacia fuera */
.abanico-sector.activo{filter:brightness(1.4) saturate(1.1);
  transform:scale(1.055);stroke-opacity:.55}
/* la burbuja crece y gana anillo de acento */
.abanico-ico.activo{transform:translate(-50%,-50%) scale(1.22);
  box-shadow:0 8px 24px rgba(10,15,20,.34),0 0 0 .35em rgba(75,124,173,.28)}
.abanico-ico{transition:transform var(--d-media) var(--e-salida),
                        box-shadow var(--d-media) var(--e-estandar)}
/* el texto sube un poco y su titular pasa a blanco pleno */
.abanico-item{transition:transform var(--d-media) var(--e-salida)}
.abanico-item.activo{transform:translate(-50%,-50%) scale(1.06)}
.abanico-item.activo h3{text-shadow:0 2px 12px rgba(0,0,0,.45)}

/* --- iconos vivos mientras el cursor esta sobre la pestaña -------------- */
/* Solo transform y opacity. Cada parte lleva su clase en el SVG. */
.abanico-ico svg *{transform-box:fill-box;transform-origin:center}
/* antena: las ondas se expanden sin parar, una detras de otra */
.abanico-ico.activo .ico-onda1{animation:onda 1.8s var(--e-salida) infinite}
.abanico-ico.activo .ico-onda2{animation:onda 1.8s var(--e-salida) .35s infinite}
.abanico-ico.activo .ico-nucleo{animation:latido 1.8s var(--e-salida) infinite}
@keyframes onda{0%{opacity:.15;transform:scale(.55)}
  45%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
/* seguridad: el visto se traza y el escudo respira */
.abanico-ico.activo .ico-visto{animation:visto 1.6s var(--e-salida) infinite}
.abanico-ico.activo .ico-escudo{animation:latido 2.4s var(--e-salida) infinite}
@keyframes visto{0%,70%{opacity:1;transform:scale(1)}
  80%{opacity:.2;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
/* nube: la flecha sube y vuelve a entrar por abajo */
.abanico-ico.activo .ico-flecha{animation:sube-flecha 1.5s var(--e-salida) infinite}
@keyframes sube-flecha{0%{opacity:0;transform:translateY(22%)}
  30%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-22%)}}
/* codigo: los angulos se abren y la barra pasa */
.abanico-ico.activo .ico-izq{animation:abre-izq 1.6s var(--e-salida) infinite}
.abanico-ico.activo .ico-der{animation:abre-der 1.6s var(--e-salida) infinite}
.abanico-ico.activo .ico-barra{animation:pasa-barra 1.6s var(--e-salida) infinite}
@keyframes abre-izq{0%,100%{transform:translateX(0)}50%{transform:translateX(-12%)}}
@keyframes abre-der{0%,100%{transform:translateX(0)}50%{transform:translateX(12%)}}
@keyframes pasa-barra{0%,100%{opacity:1;transform:translateX(0)}
  50%{opacity:.45;transform:translateX(8%)}}
/* soporte: la pantalla parpadea como al arrancar */
.abanico-ico.activo .ico-pantalla{animation:parpadeo 2.2s steps(1,end) infinite}
@keyframes parpadeo{0%,44%,52%,60%,100%{opacity:1}48%,56%{opacity:.25}}

/* --- entrada: los sectores crecen desde el centro, luego las burbujas --- */
.entra .abanico.on .abanico-sector{transform-box:view-box;transform-origin:500px 526px;
  animation:sector-entra var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger) * var(--i))}
@keyframes sector-entra{from{opacity:0;transform:scale(.62)}}
/* el arco punteado se dibuja solo */
.abanico-arco{stroke-dashoffset:0}
.entra .abanico.on .abanico-arco{
  animation:arco-dibuja calc(var(--d-lenta) * 2.4) var(--e-salida) backwards}
@keyframes arco-dibuja{from{stroke-dasharray:0 9;opacity:0}}
.entra .abanico.on .abanico-marca{
  animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger) * 6)}
.entra .abanico.on .abanico-ico,.entra .abanico.on .abanico-item{
  animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger) * (var(--i) + 5))}
.entra .abanico.on .abanico-centro{
  animation:escudo-entra var(--d-lenta) calc(var(--paso-stagger) * 10)
    var(--e-salida) backwards}
@keyframes escudo-entra{
  from{opacity:0;transform:translateX(-50%) translateY(var(--desp-entrada))}}

/* ---------- tarjetas ---------- */
.tarjetas{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--linea-c);border:1px solid var(--linea-c)}
.tarjetas li{transition:transform var(--d-media) var(--e-estandar),
                      box-shadow var(--d-media) var(--e-estandar)}
.tarjetas li:hover{transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(10,15,20,.28)}
.tarjeta-ete{margin:0;font-family:var(--fuente-titulo);font-size:var(--t-caption);
  font-weight:700;letter-spacing:var(--ls-caption);text-transform:uppercase;
  color:var(--acento-txt)}
.tarjetas h3{margin:0}
/* Tarjeta enlazada: el ::after estirado hace clicable toda la celda, no solo el texto. */
.tarjetas li:has(a){position:relative}
.tarjetas a{display:grid;gap:var(--e-16);align-content:start;
  color:inherit;text-decoration:none}
.tarjetas a::after{content:"";position:absolute;inset:0}
.tarjetas p{margin:0;color:var(--txt-2);font-size:var(--t-body-sm);
  line-height:var(--lh-body-sm)}

/* ---------- cifras -------------------------------------------------------
   Cuatro celdas a lo ancho, separadas por un filete vertical y no por aire.
   El fondo se hunde por los bordes para despegar la banda de las secciones
   vecinas sin salirse de la paleta. */
.cifras{position:relative;overflow:hidden;isolation:isolate;
  padding-block:80px;
  background:linear-gradient(180deg,var(--noche) 0%,var(--marca-900) 50%,
    var(--noche) 100%)}
.cifras .doc-red{opacity:.04}
.cifras>.wrap{position:relative;z-index:1}
.cifras-rej{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,1fr)}
.cifra-c{position:relative;isolation:isolate;display:grid;justify-items:center;
  align-content:start;gap:0;padding:60px 32px;text-align:center}
/* el filete de acento, que crece al pasar por encima */
.cifra-c::after{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:40px;height:2px;
  background:color-mix(in srgb,var(--icono-tinte) 50%,transparent);
  transition:width 300ms var(--e-estandar)}
.cifra-c:hover::after{width:80px}
/* el resplandor detras del numero */
.cifra-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb,var(--icono-tinte) 12%,transparent),transparent 70%);
  transition:opacity 280ms var(--e-estandar)}
.cifra-c:hover .cifra-luz{opacity:1}
.cifra{margin:0;display:flex;align-items:flex-start;justify-content:center;
  font-family:var(--fuente-titulo);font-weight:800;
  font-size:clamp(52px,5vw,80px);line-height:1;color:var(--blanco);
  font-variant-numeric:tabular-nums;
  transition:translate 280ms var(--e-estandar),color 280ms var(--e-estandar)}
.cifra-c:hover .cifra{translate:0 -4px;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
.cifra-mas{margin-right:4px;font-size:.6em;line-height:1;
  color:color-mix(in srgb,var(--icono-tinte) 60%,var(--blanco))}
.cifra-t{margin:12px 0 0;font-size:16px;line-height:1.4;
  color:color-mix(in srgb,var(--blanco) 60%,transparent)}
/* el mapa ocupa el sitio del numero; el alto sale de la proporcion del pais */
.cifra-co{width:56px;height:auto;
  color:color-mix(in srgb,var(--icono-tinte) 70%,transparent);
  transition:rotate 280ms var(--e-estandar),color 280ms var(--e-estandar)}
.cifra-c:hover .cifra-co{rotate:3deg;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
/* Bogota, latiendo. transform-box:fill-box para que la escala salga del centro
   del circulo y no del origen del lienzo, que es lo que hace por defecto. */
.cifra-bogota{transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 6px var(--icono-tinte));
  animation:cifra-pulso 2s var(--e-estandar) infinite;
  transition:filter 280ms var(--e-estandar)}
@keyframes cifra-pulso{0%,100%{scale:1;opacity:1}50%{scale:1.6;opacity:.4}}
.cifra-c:hover .cifra-bogota{filter:drop-shadow(0 0 12px var(--icono-tinte))}
/* Entrada aditiva, como el resto del sitio: sin JS todo se ve igual, y la
   clase .vista solo dispara la animacion. El escalonado sale de --i. */
.cifras-rej.vista .cifra{
  animation:aparece 600ms var(--e-salida) calc(var(--i,0) * 200ms) backwards}
.cifras-rej.vista .cifra-co{
  animation:cifra-entra 800ms var(--e-salida) calc(var(--i,0) * 200ms) backwards}
@keyframes cifra-entra{from{opacity:0;scale:.85}}

/* divisores: solo los de dentro, al 60% de alto y centrados */
.cifra-c+.cifra-c::before{content:"";position:absolute;left:0;top:20%;
  width:1px;height:60%;
  background:color-mix(in srgb,var(--icono-tinte) 18%,transparent)}
/* a dos columnas el divisor vertical solo va entre columna y columna, y las
   dos filas se separan con uno horizontal */
@media (max-width:767px){
  .cifra-c:nth-child(odd)::before{display:none}
  .cifra-c:nth-child(n+3){border-top:1px solid
    color-mix(in srgb,var(--icono-tinte) 18%,transparent)}
  .cifra-c{padding:40px 20px}
  .cifra{font-size:clamp(40px,8vw,52px)}
}
@media (min-width:768px){
  .cifras-rej{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:768px) and (max-width:1023px){
  .cifra-c{padding:40px 20px}
  .cifra{font-size:clamp(40px,4vw,52px)}
}
@media (max-width:479px){
  .cifra-c{padding:32px 16px}
  .cifra{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  .cifras-rej.vista :is(.cifra,.cifra-co){animation:none}
  .cifra-bogota{animation:none;opacity:.9}
  .cifra-c:hover .cifra{translate:none}
  .cifra-c:hover .cifra-co{rotate:none}
  .cifra-c::after,.cifra-luz,.cifra,.cifra-co{transition:none}
}

/* =========================================================================
   MODULO DE SERVICIOS  ·  servicios.html
   Portada con rejilla tecnica y grupos escalonados. Nada de esto se comparte
   con el modulo legal a proposito: alli el lenguaje es aurora + panal + casco;
   aqui es rejilla ortogonal + haces diagonales + rotulo en degradado.
   ========================================================================= */

/* ---- portada ---------------------------------------------------------- */
.srv-portada{position:relative;overflow:hidden;padding-block:var(--e-96) var(--e-64);
  background:linear-gradient(152deg,var(--noche) 0%,var(--marca-800) 46%,
    var(--acento-900) 100%);
  border-bottom:2px solid var(--acento-500)}
.srv-portada>:not(.srv-rejilla,.srv-haz,.circ){position:relative;z-index:1}
/* Rejilla: dos degradados repetidos, sin imagen. La mascara la apaga hacia el
   borde, asi no hay corte duro. Se anima solo el transform. */
.srv-rejilla{position:absolute;inset:-12%;z-index:0;pointer-events:none;
  --celda:68px;
  background:repeating-linear-gradient(90deg,rgba(122,159,197,.2) 0 1px,
      transparent 1px var(--celda)),
    repeating-linear-gradient(0deg,rgba(122,159,197,.14) 0 1px,
      transparent 1px var(--celda));
  -webkit-mask:radial-gradient(72% 92% at 26% 40%,#000,transparent 78%);
          mask:radial-gradient(72% 92% at 26% 40%,#000,transparent 78%);
  animation:srv-rejilla var(--d-rejilla) linear infinite}
@keyframes srv-rejilla{to{transform:translate3d(-68px,-68px,0)}}
/* Dos haces diagonales que cruzan despacio por detras del titular. */
.srv-haz{position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(75,124,173,.42) 50%,
      transparent 57%),
    linear-gradient(104deg,transparent 64%,rgba(72,163,184,.3) 70%,transparent 76%);
  filter:blur(28px);opacity:.72;
  animation:srv-haz var(--d-haces) var(--e-estandar) infinite alternate}
@keyframes srv-haz{to{transform:translate3d(9%,-4%,0) scale(1.1)}}


/* ---- carrusel de grupos ------------------------------------------------
   El desplazamiento lo hace el navegador: overflow-x mas scroll-snap, que
   ademas deja funcionar los enlaces del indice tal cual estaban (un ancla a
   una lamina desplaza el carril, sin una linea de JS). El script solo mueve
   la vista con las flechas y marca cual esta delante. */
.srv-carrusel{position:relative}
.srv-carril{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none}
.srv-carril::-webkit-scrollbar{display:none}
/* mientras se arrastra: sin seleccion de texto y sin desplazamiento suave */
.srv-carril.arrastrando{cursor:grabbing;scroll-behavior:auto;user-select:none}
/* cada grupo, una lamina entera; el hueco de abajo es para los puntos */
/* flex en columna para que la tarjeta quede centrada: todas las laminas miden
   lo que la mas alta y las cortas se quedaban con el hueco debajo */
.srv-carril>.srv{flex:0 0 100%;scroll-snap-align:start;
  padding-block:var(--e-64) var(--e-96);
  display:flex;flex-direction:column;justify-content:center}
.srv-flecha{position:absolute;top:50%;translate:0 -50%;z-index:2;
  display:grid;place-items:center;
  width:clamp(44px,5vw,56px);aspect-ratio:1;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.45);
  background:rgba(21,30,39,.45);color:var(--blanco);cursor:pointer;
  font-size:1.7rem;line-height:1;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background var(--d-media) var(--e-estandar),
             opacity var(--d-media) var(--e-estandar)}
.srv-prev{left:clamp(8px,2vw,24px)}
.srv-sig{right:clamp(8px,2vw,24px)}
.srv-flecha:is(:hover,:focus-visible){background:var(--acento-500)}
.srv-flecha[disabled]{opacity:.28;cursor:default}
/* los puntos van sobre su propio riel: detras pasan fondos claros y oscuros */
.srv-puntos{position:absolute;left:0;right:0;bottom:var(--e-24);z-index:2;
  width:max-content;margin-inline:auto;
  display:flex;justify-content:center;list-style:none;padding:0 var(--e-8);
  border-radius:999px;background:rgba(21,30,39,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.srv-puntos button{display:grid;place-items:center;
  width:var(--toque-min);height:var(--toque-min);
  padding:0;border:0;background:none;cursor:pointer}
.srv-puntos button::before{content:"";width:10px;height:10px;border-radius:50%;
  border:1px solid var(--blanco);
  transition:background var(--d-media) var(--e-estandar),
             transform var(--d-media) var(--e-salida)}
.srv-puntos button[aria-current="true"]::before{background:var(--blanco);
  transform:scale(1.4)}

/* texto que solo leen los lectores de pantalla */
.vis-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- trazas de circuito en las esquinas -------------------------------
   Un unico <symbol> en el HTML y dos <use> por esquina: la traza fija y
   encima el mismo dibujo con un guion corto que corre, o sea un pulso de
   luz recorriendo la pista. Con pathLength=100 todos los trazos miden lo
   mismo, asi un solo stroke-dasharray sirve para los seis. El dibujo se
   hizo para la esquina superior izquierda; las otras tres son la misma
   pieza volteada. */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.circ{position:absolute;z-index:0;pointer-events:none;
  width:clamp(150px,22vw,330px);aspect-ratio:1;
  --circ:var(--acento-500);color:var(--circ);fill:var(--circ);stroke:var(--circ);
  stroke-width:1.4;
  /* la mascara sale de la esquina y muere antes del centro: la pieza crece
     sin invadir el titular. Va antes del transform, asi que el `at 0 0`
     sigue siendo la esquina buena en las cuatro copias. */
  -webkit-mask:radial-gradient(circle at 0 0,#000 42%,transparent 88%);
          mask:radial-gradient(circle at 0 0,#000 42%,transparent 88%)}
.t-oscuro .circ{--circ:var(--acento-300)}
.c-si{top:0;left:0}
.c-sd{top:0;right:0;transform:scaleX(-1)}
.c-ii{bottom:0;left:0;transform:scaleY(-1)}
.c-id{bottom:0;right:0;transform:scale(-1)}
/* la pista apagada de fondo, con los nodos latiendo despacio */
.circ-t{opacity:.42;animation:circ-nodos 3.4s var(--e-estandar) infinite}
@keyframes circ-nodos{0%,100%{fill-opacity:1}50%{fill-opacity:.2}}
/* el pulso: solo trazo, sin nodos, y con halo para que se lea como luz */
/* Este es el pulso de referencia de todo el sitio: el circuito del equipo usa
   estas mismas variables y este mismo keyframe. */
.circ-p{fill:none;stroke-dasharray:var(--pulso-dash);
  filter:drop-shadow(0 0 3px currentColor);
  animation:pulso var(--pulso-dur) linear infinite}
@keyframes pulso{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.c-sd .circ-p{animation-delay:-.9s}
.c-ii .circ-p{animation-delay:-1.8s}
.c-id .circ-p{animation-delay:-2.7s}
/* en la tarjeta de cada grupo va una sola, metida bajo el canto redondeado */
.srv-txt .circ{z-index:-1;width:clamp(110px,15vw,200px)}
.srv-txt .c-si{top:10px;left:10px}

.srv-portada-in{padding-top:var(--e-32)}
.srv-portada h1{max-width:14ch;margin-bottom:var(--e-24);
  font-size:var(--t-display);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);text-transform:uppercase}
.srv-portada h1 span{display:block}
/* Rotulo en degradado. Va dentro de @supports: si background-clip:text no
   estuviera, color:transparent dejaria el titular invisible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .srv-grad{background:linear-gradient(96deg,var(--acento-300) 0%,
      var(--icono-tinte) 32%,var(--blanco) 52%,var(--acento-300) 78%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:srv-brillo var(--d-brillo-titulo) var(--e-estandar) infinite}
}
@keyframes srv-brillo{0%,55%{background-position:100% 0}100%{background-position:-60% 0}}
.srv-lead-portada{margin:0 0 var(--e-24);max-width:44ch;
  font-family:var(--fuente-titulo);font-weight:700;font-size:var(--t-h4);
  line-height:var(--lh-h4);color:var(--acento-txt)}
/* linea de lectura con piloto, como la de las fichas */
.srv-conteo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-16);
  margin:0 0 var(--e-32);
  font-family:var(--fuente-mono);font-size:var(--t-caption);letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-2)}
.srv-piloto{position:relative;width:8px;height:8px;border-radius:50%;
  background:var(--icono-tinte);box-shadow:0 0 12px var(--icono-tinte)}
.srv-piloto::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--icono-tinte);
  animation:srv-piloto 2.2s var(--e-salida) infinite}
@keyframes srv-piloto{from{opacity:.85;transform:scale(.4)}to{opacity:0;transform:scale(1)}}

/* indice: atajo a cada grupo y primera interaccion de la pagina */
.srv-indice ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--e-8)}
.srv-indice a{display:inline-flex;align-items:center;gap:var(--e-8);
  padding:var(--e-8) var(--e-16);min-height:var(--toque-min);
  border:1px solid var(--linea-c);color:var(--txt);text-decoration:none;
  font-family:var(--fuente-titulo);font-weight:700;font-size:var(--t-body-sm);
  clip-path:polygon(var(--chaflan) 0,100% 0,100% calc(100% - var(--chaflan)),
    calc(100% - var(--chaflan)) 100%,0 100%,0 var(--chaflan));
  transition:background var(--d-rapida) var(--e-estandar),
             border-color var(--d-rapida) var(--e-estandar),
             transform var(--d-media) var(--e-salida)}
.srv-indice a{background:rgba(255,255,255,.05)}
.srv-indice a:is(:hover,:focus-visible){background:var(--blanco);
  color:var(--marca-500);border-color:var(--blanco);transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(10,15,20,.4)}
.srv-indice a:is(:hover,:focus-visible) .srv-chip-n{color:var(--acento-600)}
.srv-chip-n{font-family:var(--fuente-mono);font-weight:400;
  font-size:var(--t-caption);color:var(--acento-300)}
.srv-chip-f{margin-left:auto;font-style:normal;color:var(--acento-300);
  transition:transform var(--d-rapida) var(--e-estandar),
             color var(--d-rapida) var(--e-estandar)}
.srv-indice a:is(:hover,:focus-visible) .srv-chip-f{transform:translateX(4px);
  color:var(--marca-500)}

/* ---- grupos escalonados ----------------------------------------------- */
/* Claro y oscuro alternados de arriba abajo: portada clara, 01 oscuro, 02
   claro, 03 oscuro... El lado del panel visual va del brazo del tema, asi que
   el escalonado y la alternancia de fondo son el mismo ritmo y no dos. */
/* -izq y -der dicen ya solo de que lado va el texto; el tema lo dice
   t-oscuro y nada mas, asi que se pueden intercambiar sin tocar el resto.
   Sin cuadricula: sobre la foto era ruido. Queda el halo del grupo. */
.srv{position:relative;padding-block:var(--e-64);overflow:hidden;
  --panel:rgba(255,255,255,.26);--fondo-s:var(--blanco);background:var(--fondo-s);
  --vidrio-canto:rgba(255,255,255,.7);--vidrio-luz:rgba(255,255,255,.85);
  --vidrio-luz-lat:rgba(255,255,255,.5);--vidrio-sombra:rgba(29,41,54,.16);
  --vidrio-sombra-lat:rgba(29,41,54,.08);
  --vidrio-reflejo:rgba(255,255,255,.34);--vidrio-destello:rgba(255,255,255,.4);
  --vidrio-boton:rgba(255,255,255,.55)}
.srv.t-oscuro{--panel:rgba(21,30,39,.2);--fondo-s:var(--marca-900);
  --vidrio-canto:rgba(255,255,255,.26);--vidrio-luz:rgba(255,255,255,.42);
  --vidrio-luz-lat:rgba(255,255,255,.22);--vidrio-sombra:rgba(10,15,20,.5);
  --vidrio-sombra-lat:rgba(10,15,20,.3);
  --vidrio-reflejo:rgba(255,255,255,.12);--vidrio-destello:rgba(255,255,255,.08);
  --vidrio-boton:rgba(255,255,255,.12)}
/* Sin desenfoque de fondo la tarjeta translucida no protege el texto, asi que
   ahi sube la opacidad. Es la unica diferencia entre los dos casos. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .srv{--panel:rgba(255,255,255,.86)}
  .srv.t-oscuro{--panel:rgba(21,30,39,.86)}
}

/* La foto del grupo, de fondo de la seccion entera y apagada. Al pasar el
   cursor sube: con 'screen' sobre los bloques oscuros la foto aclara y con
   'multiply' sobre los claros oscurece, que es lo mismo en los dos casos
   —revelarse— pero en la direccion que le toca a cada tema. */
.srv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--foto) 50% 50%/cover no-repeat;
  opacity:var(--op);
  transition:opacity var(--d-lenta) var(--e-estandar),
             transform var(--d-lenta) var(--e-salida)}
.srv::before{mix-blend-mode:multiply}
.srv.t-oscuro::before{mix-blend-mode:screen}
.srv:is(:hover,:focus-within)::before{opacity:var(--op-h)}
.srv:is(:hover,:focus-within)::before{transform:scale(1.04)}
/* filete divisorio que se apaga hacia los lados */
/* La foto ocupa el fondo entero de la seccion; el ::after solo pone el filete
   que separa un bloque del siguiente. Lo que asegura la lectura es la tarjeta
   del texto, no un velo a media seccion. */
.srv::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--linea-c) 22%,
    var(--linea-c) 78%,transparent)}
.srv>.wrap{position:relative;z-index:1}

.srv-in{display:grid;justify-items:center;gap:var(--e-32)}
.srv-txt>.etiqueta{margin-bottom:var(--e-8)}
.srv-txt h2{margin:0 0 var(--e-16);text-wrap:balance}
/* La tarjeta de lectura: fondo propio sobre la foto, chaflan del sitio y todo
   el contenido colgando del mismo borde y con el mismo ancho. Es lo que deja
   que la foto vaya a fondo completo sin comerse el texto. */
/* --- vidrio liquido ------------------------------------------------------
   Cinco capas, todas recortadas por el mismo border-radius:
     el propio elemento   fondo translucido + backdrop-filter
     border               canto luminoso
     box-shadow inset     grosor del vidrio: luz arriba/izquierda, sombra
                          abajo/derecha
     ::before             reflejo de luz en la parte alta
     ::after              destello especular, solo al pasar el cursor
   Va con border-radius y no con el chaflan del resto del sitio: el chaflan es
   un clip-path y clip-path recorta tambien la sombra exterior, que es
   justamente lo que hace flotar la tarjeta. */
.srv-txt{position:relative;z-index:1;isolation:isolate;max-width:45rem;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--e-32);background:var(--panel);border-radius:28px;
  -webkit-backdrop-filter:blur(15px) saturate(180%);
          backdrop-filter:blur(15px) saturate(180%);
  border:1px solid var(--vidrio-canto);
  box-shadow:
    inset 0 1px 0 var(--vidrio-luz),
    inset 1px 0 0 var(--vidrio-luz-lat),
    inset 0 -1px 0 var(--vidrio-sombra),
    inset -1px 0 0 var(--vidrio-sombra-lat),
    0 26px 60px -14px rgba(10,15,20,.42),
    0 4px 14px -6px rgba(10,15,20,.28);
  transition:transform var(--d-media) var(--e-salida),
             box-shadow var(--d-media) var(--e-salida)}
/* el brillo de la parte alta, como la luz que se apoya en el canto del vidrio */
.srv-txt::before{content:"";position:absolute;inset:0 0 auto;height:22%;
  z-index:-1;pointer-events:none;border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,var(--vidrio-reflejo),transparent)}
/* destello especular: una sola pasada al entrar el cursor, sin seguir al raton */
.srv-txt::after{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;border-radius:inherit;overflow:hidden;
  background:linear-gradient(104deg,transparent 44%,var(--vidrio-destello) 50%,
    transparent 56%) no-repeat;
  background-size:260% 100%;background-position:180% 0;
  transition:background-position var(--d-lenta) var(--e-estandar)}
.srv:is(:hover,:focus-within) .srv-txt::after{background-position:-80% 0}
.srv:is(:hover,:focus-within) .srv-txt{transform:translateY(-5px);
  box-shadow:
    inset 0 1px 0 var(--vidrio-luz),
    inset 1px 0 0 var(--vidrio-luz-lat),
    inset 0 -1px 0 var(--vidrio-sombra),
    inset -1px 0 0 var(--vidrio-sombra-lat),
    0 34px 74px -14px rgba(10,15,20,.5),
    0 6px 18px -6px rgba(10,15,20,.32)}
.srv-txt>*{width:100%;max-width:100%}
.srv-txt>:last-child{margin-bottom:0}
/* el filete del ultimo servicio cerraba la lista contra el borde de la caja */
.srv .acc-item:last-child{border-bottom:0}
.srv-lead{margin:0 0 var(--e-32);color:var(--txt-2);font-size:var(--t-body-lg)}

/* Cabecera del bloque: burbuja del icono y ordinal. Antes vivian sobre el
   panel de foto; la foto se fue al fondo de la seccion y ellos se quedan. */
/* Dentro de la tarjeta todo va centrado y la escala baja un paso, con el mismo
   ritmo vertical de arriba abajo. Lo unico que no se centra es el cuerpo
   desplegado del acordeon: parrafos y listas largas centradas no se leen. */
.srv-txt{text-align:center;text-shadow:0 1px 2px rgba(255,255,255,.75);
  --txt-2:var(--txt)}
.srv.t-oscuro .srv-txt{text-shadow:0 1px 3px rgba(10,15,20,.65);
  --txt-2:var(--blanco)}
/* el servicio abierto gana respaldo propio: es donde hay mas texto seguido */
.srv .acc-item.abierto{background:rgba(255,255,255,.4)}
.srv.t-oscuro .acc-item.abierto{background:rgba(10,15,20,.4)}
.srv-txt .acc,.srv-txt .grupo-lista,.srv-txt .grupo-pendiente{align-self:stretch}
.srv-cab{display:flex;align-items:center;justify-content:center;
  gap:clamp(.6rem,.4rem + .6vw,1rem);margin:0 0 var(--e-24)}
.srv-txt .etiqueta::before{margin-inline:auto}
.srv-txt .srv-lead{margin-inline:auto}
.srv .acc-nom{text-align:center}
.srv .grupo-lista{justify-items:center;max-width:none}
.srv .grupo-pendiente{text-align:center}
.srv .acc-in{text-align:left}
/* --- «Conocer más» dentro de la tarjeta -----------------------------------
   El enlace subrayado del sitio se pierde sobre el vidrio: aqui es una pastilla
   con el mismo lenguaje que la tarjeta —fondo translucido, canto luminoso y su
   propio desenfoque— y se invierte a azul de marca al pasar el cursor. */
.srv .acc-in .enlace{margin-top:var(--e-16);padding:.62em 1.2em;
  border-radius:999px;border:1px solid var(--vidrio-canto);
  background:var(--vidrio-boton);color:var(--txt);
  font-size:clamp(.9rem,.87rem + .14vw,.98rem);letter-spacing:.005em;
  -webkit-backdrop-filter:blur(8px) saturate(160%);
          backdrop-filter:blur(8px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--vidrio-luz),0 6px 16px -7px rgba(10,15,20,.45);
  transition:background var(--d-rapida) var(--e-estandar),
             color var(--d-rapida) var(--e-estandar),
             border-color var(--d-rapida) var(--e-estandar),
             transform var(--d-media) var(--e-salida),
             box-shadow var(--d-media) var(--e-salida)}
/* el subrayado heredado sobra: ya hay pastilla */
.srv .acc-in .enlace::after{content:none}
.srv .acc-in .enlace:is(:hover,:focus-visible){
  background:var(--marca-500);color:var(--blanco);border-color:var(--marca-500);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -8px rgba(10,15,20,.55)}
.srv.t-oscuro .acc-in .enlace:is(:hover,:focus-visible){
  background:var(--blanco);color:var(--marca-500);border-color:var(--blanco)}
.srv .acc-in .enlace span{font-size:1.15em;line-height:1}
/* titular: el ancla de la tarjeta. Peso 700, interlineado corto y el
   entreletra negativo que pide un cuerpo grande. */
.srv-txt h2{margin:0 0 var(--e-16);
  font-size:clamp(1.65rem,1.28rem + 1.62vw,2.45rem);line-height:1.14;
  letter-spacing:-.022em;font-weight:700;text-wrap:balance}
/* etiqueta: mono, pequena y muy espaciada. Es un rotulo, no un antetitulo. */
.srv-txt .etiqueta{margin-bottom:var(--e-16);
  font-family:var(--fuente-mono);font-weight:400;
  font-size:clamp(.72rem,.68rem + .18vw,.84rem);letter-spacing:.24em}
.srv-txt .etiqueta::before{width:var(--e-32);height:2px;margin-bottom:var(--e-16)}
/* resumen: cuerpo comodo, medida corta y aire entre lineas */
.srv-txt .srv-lead{margin-bottom:var(--e-24);max-width:44ch;
  font-size:clamp(1.05rem,.99rem + .26vw,1.2rem);line-height:1.6}
.srv-txt .acc{margin-top:var(--e-8)}
/* nombres de servicio: un escalon por debajo del titular */
.srv .acc-tit{gap:var(--e-16);padding:var(--e-24) var(--e-8);
  font-size:clamp(1.14rem,1.05rem + .38vw,1.35rem);line-height:1.3;
  letter-spacing:-.006em}
.srv .acc-num{font-size:clamp(.72rem,.68rem + .18vw,.84rem);letter-spacing:.14em}
.srv .acc-in{font-size:clamp(1rem,.96rem + .18vw,1.1rem);line-height:1.64}
.srv .acc-in li{font-size:1em}
.srv .grupo-lista li{font-size:clamp(1.02rem,.98rem + .2vw,1.14rem)}
/* marcadores pendientes: lo mas discreto de la caja */
.srv .grupo-pendiente{max-width:none;padding:var(--e-16);
  font-size:clamp(.68rem,.64rem + .16vw,.8rem);letter-spacing:.14em;opacity:.85}
.srv-ord{font-family:var(--fuente-titulo);font-weight:700;line-height:.8;
  font-size:clamp(2.1rem,1.66rem + 1.9vw,3rem);letter-spacing:-.045em;
  transition:color var(--d-media) var(--e-estandar),
             transform var(--d-media) var(--e-salida)}
.srv .srv-ord{color:var(--brillo)}
.srv.t-oscuro .srv-ord{color:rgba(255,255,255,.34)}
.srv-ico{display:grid;place-items:center;
  flex:0 0 clamp(2.5rem,2.05rem + 1.7vw,3.3rem);
  width:clamp(2.5rem,2.05rem + 1.7vw,3.3rem);height:clamp(2.5rem,2.05rem + 1.7vw,3.3rem);
  border-radius:50%;background:var(--blanco);color:var(--marca-500);
  box-shadow:0 8px 22px rgba(10,15,20,.32);
  transition:transform var(--d-media) var(--e-salida),
             box-shadow var(--d-media) var(--e-estandar)}
.srv-ico svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.srv-ico svg *{transform-box:fill-box;transform-origin:center}

/* al pasar por el bloque entero, no solo por la cabecera */
.srv:is(:hover,:focus-within) .srv-ord{transform:translateY(-4px)}
.srv:is(:hover,:focus-within) .srv-ord{color:var(--marca-500)}
.srv.t-oscuro:is(:hover,:focus-within) .srv-ord{color:rgba(255,255,255,.6)}
.srv:is(:hover,:focus-within) .srv-ico{transform:scale(1.1) rotate(-4deg);
  box-shadow:0 12px 30px rgba(10,15,20,.42)}
/* una animacion por icono, solo mientras el cursor esta en el bloque */
.srv:is(:hover,:focus-within) .ico-visto{animation:visto 2.4s var(--e-salida) infinite}
.srv:is(:hover,:focus-within) .ico-nucleo{animation:latido 2s var(--e-estandar) infinite}
.srv:is(:hover,:focus-within) .ico-onda1{animation:onda 1.8s var(--e-salida) infinite}
.srv:is(:hover,:focus-within) .ico-onda2{animation:onda 1.8s .25s var(--e-salida) infinite}
.srv:is(:hover,:focus-within) .ico-flecha{animation:sube-flecha 1.8s var(--e-salida) infinite}
.srv:is(:hover,:focus-within) .ico-izq{animation:abre-izq 1.8s var(--e-estandar) infinite}
.srv:is(:hover,:focus-within) .ico-der{animation:abre-der 1.8s var(--e-estandar) infinite}
.srv:is(:hover,:focus-within) .ico-barra{animation:pasa-barra 1.8s var(--e-estandar) infinite}
.srv:is(:hover,:focus-within) .ico-pantalla{animation:parpadeo 2.6s var(--e-estandar) infinite}

/* ---- acordeon dentro de un grupo -------------------------------------- */
/* Barra de acento que crece desde arriba: marca la fila activa sin mover nada
   de sitio, solo escala. */
.srv .acc-item{position:relative}
.srv .acc-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brillo);transform:scaleY(0);transform-origin:top;
  transition:transform var(--d-media) var(--e-salida)}
.srv .acc-item:is(:hover,:focus-within)::before,
.srv .acc-item.abierto::before{transform:scaleY(1)}
.srv .acc-tit{gap:var(--e-16);
  transition:color var(--d-rapida) var(--e-estandar),
                         padding-left var(--d-media) var(--e-salida)}
.srv .acc-item:is(:hover,:focus-within) .acc-tit,
.srv .acc-item.abierto .acc-tit{padding-left:var(--e-16)}
.srv .acc-num{transition:color var(--d-rapida) var(--e-estandar)}
.srv .acc-item:is(:hover,:focus-within),.srv .acc-item.abierto{
  background:rgba(122,159,197,.09)}
.srv .acc-item.abierto .acc-num{color:var(--icono-tinte)}

/* ---- entradas al hacer scroll ----------------------------------------- */
.srv-portada .etiqueta.rev.on{animation:sube var(--d-lenta) var(--e-salida) backwards}
.srv-portada h1.rev.on{animation:revela var(--d-hero) var(--e-salida) backwards}
.srv-portada .srv-lead-portada.rev.on{
  animation:sube var(--d-lenta) calc(var(--paso-stagger)*2) var(--e-salida) backwards}
.srv-portada .srv-conteo.rev.on{
  animation:sube var(--d-lenta) calc(var(--paso-stagger)*3) var(--e-salida) backwards}
.srv-portada .srv-indice.rev.on li{
  animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger)*4 + var(--i)*var(--paso-stagger))}
.entra .srv-txt .srv-cab.on{
  animation:srv-entra var(--d-entrada) var(--e-salida) backwards}
@keyframes srv-entra{from{opacity:0;transform:translateY(var(--desp-entrada)) scale(.94)}}
.entra .srv-txt .etiqueta.on{
  animation:sube var(--d-lenta) calc(var(--paso-stagger)*1.5) var(--e-salida) backwards}
.entra .srv-txt h2.on{
  animation:revela var(--d-entrada) calc(var(--paso-stagger)*2) var(--e-estandar) backwards}
.entra .srv-txt .srv-lead.on{
  animation:sube var(--d-lenta) calc(var(--paso-stagger)*3) var(--e-salida) backwards}
.entra .srv-txt .acc.on>*,.entra .srv-txt .grupo-lista.on>li{
  animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger)*4 + var(--i,0)*var(--paso-stagger))}

/* A una columna el texto ocupa todo el ancho, asi que el velo tambien: si se
   quedara en el lateral, la mitad derecha del parrafo caeria sobre la foto. */
/* El indice se va a la derecha del encabezado y baja en columna: deja el
   titular respirando a la izquierda y se lee como un sumario del modulo. */
@media (min-width:900px){
  .srv-portada-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--e-32) var(--e-64);align-items:start}
  .srv-portada-in>:not(.srv-indice){grid-column:1}
  .srv-indice{grid-column:2;grid-row:1/6;align-self:center;justify-self:end}
  .srv-indice ul{flex-direction:column;flex-wrap:nowrap;gap:var(--e-16);
    min-width:23rem}
  .srv-indice li{display:flex}
  .srv-indice a{flex:1;justify-content:flex-start;gap:var(--e-16);
    padding:var(--e-16) var(--e-24);font-size:var(--t-body)}
  .srv-indice .srv-chip-n{font-size:var(--t-body-sm)}
  .srv-indice .srv-chip-f{font-size:1.25em}
}

@media (min-width:900px){
  /* Sin panel de foto, el escalonado lo lleva la columna de texto: rejilla de
     dos y el texto cambia de lado. La mitad libre deja respirar el fondo. */
  /* la tarjeta va centrada en la seccion y la foto se ve entera por detras */
  .srv-txt{padding:var(--e-64) var(--e-48)}
  .srv{padding-block:var(--e-96)}
  .srv-portada{padding-block:var(--e-128) var(--e-96)}
}

/* ---------- certificaciones ---------- */
/* El sello manda: va grande y a color, tal cual lo emite Kiwa o el CCS. No se
   tiñe ni se recolorea, es un documento. La tarjeta solo lo enmarca. */
.certis-lista{list-style:none;margin:var(--e-48) 0 0;padding:0;
  display:grid;gap:var(--e-16);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.certis-lista a{position:relative;isolation:isolate;display:grid;align-content:start;
  gap:var(--e-8);height:100%;
  padding:var(--e-32) var(--e-24) var(--e-24);
  background:linear-gradient(170deg,var(--sup) 58%,var(--acento-50));
  border:1px solid var(--linea-c);text-decoration:none;color:var(--txt);overflow:hidden;
  clip-path:polygon(var(--chaflan) 0,100% 0,100% calc(100% - var(--chaflan)),
    calc(100% - var(--chaflan)) 100%,0 100%,0 var(--chaflan));
  transition:border-color var(--d-rapida) var(--e-estandar),
             box-shadow var(--d-media) var(--e-salida),
             transform var(--d-media) var(--e-salida)}
.certis-lista a:is(:hover,:focus-visible){border-color:var(--acento-500);
  transform:translateY(-6px);box-shadow:0 18px 38px rgba(29,41,54,.18)}

/* Filete de acento en el canto de arriba: es lo que queda del rotulo del
   emisor, que sobraba. Crece de izquierda a derecha al pasar el cursor. */
.certis-lista a::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  z-index:3;background:var(--acento-500);transform:scaleX(.22);transform-origin:left;
  transition:transform var(--d-media) var(--e-salida)}
.certis-lista a:is(:hover,:focus-visible)::before{transform:scaleX(1)}

/* Destello diagonal: una sola pasada al entrar el cursor. Solo se mueve el
   background-position, que no provoca reflujo. */
.certi-sello::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(75,124,173,.18) 50%,
    transparent 62%) no-repeat;
  background-size:280% 100%;background-position:190% 0;
  transition:background-position var(--d-lenta) var(--e-estandar)}
.certis-lista a:is(:hover,:focus-visible) .certi-sello::before{background-position:-90% 0}

/* El sello: grande, a color y con alto fijo. El del CCS es mucho mas apaisado,
   asi que el ancho es libre y object-fit lo encaja sin deformarlo. */
/* el sello va sobre su propio panel, como un documento enmarcado */
.certi-sello{position:relative;overflow:hidden;display:grid;place-items:center;
  min-height:clamp(58px,6vw,84px);margin-bottom:var(--e-24);
  padding:var(--e-16) var(--e-8);background:var(--blanco);
  border:1px solid var(--linea-c);border-radius:var(--r-2);
  transition:border-color var(--d-rapida) var(--e-estandar)}
.certis-lista a:is(:hover,:focus-visible) .certi-sello{border-color:var(--acento-400)}
.certi-sello img{display:block;height:clamp(58px,6vw,84px);width:auto;max-width:100%;
  object-fit:contain;
  transition:transform var(--d-media) var(--e-salida),
             filter var(--d-media) var(--e-estandar)}
.certis-lista a:is(:hover,:focus-visible) .certi-sello img{transform:scale(1.07);
  filter:drop-shadow(0 6px 14px rgba(29,41,54,.22))}

.certi-norma{margin:0;font-family:var(--fuente-mono);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento-600);
  transition:color var(--d-rapida) var(--e-estandar)}
.certi-d{margin:0;font-family:var(--fuente-titulo);font-weight:700;
  font-size:var(--t-body-sm);line-height:var(--lh-body-sm);text-wrap:balance}
/* filete bajo el nombre, se extiende al pasar */
.certi-d::after{content:"";display:block;width:var(--e-32);height:2px;
  margin-top:var(--e-8);background:var(--acento-500);transform-origin:left;
  transition:transform var(--d-media) var(--e-estandar)}
.certis-lista a:is(:hover,:focus-visible) .certi-d::after{transform:scaleX(2.6)}

/* cantoneras en las dos esquinas que el chaflan deja rectas */
.certis-lista a::after{content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;
  --l:var(--acento-500);--g:18px;
  background:
    linear-gradient(var(--l),var(--l)) 100% 0/var(--g) 1px no-repeat,
    linear-gradient(var(--l),var(--l)) 100% 0/1px var(--g) no-repeat,
    linear-gradient(var(--l),var(--l)) 0 100%/var(--g) 1px no-repeat,
    linear-gradient(var(--l),var(--l)) 0 100%/1px var(--g) no-repeat;
  opacity:0;transition:opacity var(--d-media) var(--e-estandar)}
.certis-lista a:is(:hover,:focus-visible)::after{opacity:.8}

/* entrada: el sello aparece un paso despues que su tarjeta */
.entra .certis-lista.on .certi-sello img{
  animation:sello-entra var(--d-entrada) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger)*5 + var(--i,0)*var(--paso-stagger))}
@keyframes sello-entra{from{opacity:0;transform:scale(.82)}}

/* ---------- cta ---------- */
/* Reutiliza la piel tecnica del modulo legal: .aurora, .paneles y .casco3d ya
   estan definidos arriba, aqui solo se declara el lienzo y se ordena la capa. */
.cta{position:relative;overflow:hidden;padding-block:clamp(3rem,5vw,4.5rem);
  background:linear-gradient(140deg,var(--marca-700) 0%,var(--marca-500) 46%,
    var(--acento-700) 100%)}
.cta>.wrap{position:relative;z-index:1}
/* el escudo del fondo pesa menos aqui que en las portadas legales */
.cta .casco3d::before{opacity:.14}
.cta .etiqueta{font-family:var(--fuente-mono);letter-spacing:.2em}
.cta h2{margin:0;max-width:20ch}
.cta h2 span{display:block}
.cta h2 em{font-style:normal;color:var(--marca-300)}
.cta-lead{margin:var(--e-16) 0 var(--e-24);color:var(--txt-2);max-width:52ch}

/* Boton principal: se levanta y le cruza un destello. Solo transform, opacity
   y background-position, asi que no hay reflow. */
.cta .b-3{position:relative;overflow:hidden;
  transition:background var(--d-rapida) var(--e-estandar),
             transform var(--d-media) var(--e-salida),
             box-shadow var(--d-media) var(--e-salida)}
.cta .b-3>span{position:relative;z-index:1}
.cta .b-3::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(57,83,109,.26) 50%,
    transparent 60%) no-repeat;
  background-size:300% 100%;background-position:200% 0;
  transition:background-position var(--d-lenta) var(--e-estandar)}
.cta .b-3:is(:hover,:focus-visible){transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(10,15,20,.35)}
.cta .b-3:is(:hover,:focus-visible)::after{background-position:-60% 0}

/* entrada escalonada del bloque */
.entra .cta-in.on .etiqueta{animation:sube var(--d-lenta) var(--e-salida) backwards}
.entra .cta-in.on .etiqueta::before{
  animation:filete var(--d-lenta) calc(var(--paso-stagger)*1.5) var(--e-estandar) backwards}
.entra .cta-in.on h2 span{animation:revela var(--d-entrada) var(--e-estandar) backwards}
.entra .cta-in.on h2 span:nth-child(2){animation-delay:calc(var(--paso-stagger)*2.2)}
.entra .cta-in.on .cta-lead{
  animation:sube var(--d-lenta) calc(var(--paso-stagger)*3) var(--e-salida) backwards}
.entra .cta-in.on .b-3{
  animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger)*4 + var(--i,0)*var(--paso-stagger))}

/* ---------- portada de equipo ---------- */
.eq-portada{padding-block:var(--e-128)}
.eq-portada .etiqueta:hover::before{transform:scaleX(2)}
.eq-portada h1.rev.on{animation:revela var(--d-hero) var(--e-salida) backwards}
.eq-portada h1{max-width:12ch;margin-bottom:var(--e-24);font-size:var(--t-display);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.eq-destacado{margin:0 0 var(--e-32);max-width:36ch;font-family:var(--fuente-titulo);
  font-weight:700;font-size:var(--t-h4);line-height:var(--lh-h4);color:var(--acento-txt)}
.eq-texto{display:grid;gap:var(--e-24);max-width:68ch;margin-bottom:var(--e-32)}
.eq-texto p{margin:0;color:var(--txt-2)}

/* las esquinas de circuito tambien en la portada del equipo */
.eq-portada{position:relative;overflow:hidden}
/* el contenido por delante de las trazas, que se quedan absolutas en su esquina */
.eq-portada>:not(.circ){position:relative;z-index:1}

/* ---------- equipo: la ruta de circuito -------------------------------
   La seccion es una placa oscura: una sola traza la recorre del encabezado
   al cierre, entra por cada foto y sale hacia la siguiente. El recorrido lo
   calcula app.js con las posiciones reales (y lo rehace en cada resize),
   porque el camino depende del ancho: serpentea a dos lados cuando hay sitio
   y cae en columna cuando no. El SVG va detras y la foto es opaca, asi que
   la traza se ve entrar y salir de cada circulo sin un corte.

   Para agregar un integrante: copiar un <li class="eqc-nodo"> de equipo.html,
   subir el numero del badge, cambiar foto, alt, nombre y cargo, y darle el
   siguiente --i (es el retardo de entrada). La traza se recalcula sola.
   El encuadre de la foto se ajusta en el propio li, con tres perillas:
     --foco  object-position. Estas fotos son 520x640 recortadas a un circulo,
             asi que solo manda el valor vertical: 0% recorta desde arriba
             (el rostro baja dentro del circulo) y 100% desde abajo (sube).
     --zoom  acerca la foto. Solo hace falta cuando la persona no esta
             centrada y hay que correrla, porque es lo que crea el sobrante.
     --desv  corre la foto <x> <y>. El maximo sin que asome un hueco es
             (zoom - 1) / 2; con --zoom:1.5 se puede correr hasta un 25%.
   Ninguna de las tres toca el tamano del circulo: el zoom vive dentro de la
   lente, que es la que recorta. El diametro sale solo de --foto-size y no se
   modifica en ningun sitio, ni por indice ni por clase. */
.eqc{--gap-nodo:clamp(2.5rem,4.5vh,4.5rem);   /* lo que separa un integrante del otro */
  --sube-cita:clamp(19rem,33vh,28rem);        /* cuanto sube la cita sobre la fila del gerente */
  position:relative;overflow:hidden;
  padding-block:var(--sp-2) var(--sp-7);
  color:var(--eqc-txt)}
.eqc .s-600{stop-color:var(--eqc-traza-1)}
.eqc .s-300{stop-color:var(--eqc-traza-2)}
/* rejilla de placa: dos degradados repetidos, sin imagen, apagados hacia los
   bordes por la mascara para que no compitan con el texto */
.eqc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --celda:46px;opacity:.05;
  background:repeating-linear-gradient(90deg,var(--eqc-rejilla) 0 1px,transparent 1px var(--celda)),
    repeating-linear-gradient(0deg,var(--eqc-rejilla) 0 1px,transparent 1px var(--celda));
  -webkit-mask:radial-gradient(120% 65% at 50% 34%,#000 30%,transparent 78%);
          mask:radial-gradient(120% 65% at 50% 34%,#000 30%,transparent 78%)}
.eqc>.wrap{position:relative;z-index:1}

/* --- encabezado: el titulo cuelga del mismo recorrido ------------------ */
.eqc-cab{position:relative;display:grid;gap:var(--sp-2);
  margin-bottom:calc(var(--sp-8) + var(--sp-5));max-width:62ch}
.eqc-ojo{margin:0;font-family:var(--fuente-mono);font-size:var(--fs-xs);
  letter-spacing:.24em;color:var(--eqc-cian-txt)}
.eqc-cab h2{margin:0;color:var(--eqc-txt);font-size:var(--fs-3xl);line-height:1.02;
  letter-spacing:-.025em;text-wrap:balance}
.eqc-azul{color:var(--eqc-cian-txt)}
.eqc-sub{margin:0;max-width:60ch;color:var(--eqc-txt-2);font-size:var(--fs-md)}
/* de aqui arranca la traza: el JS mide este punto */
.eqc-arranque{position:absolute;bottom:calc(-1 * var(--sp-3));left:0;
  width:1px;height:1px}

/* --- la placa y su trazado -------------------------------------------- */
/* abajo hay que dejar sitio al cabo final y a sus dos brazos */
.eqc-placa{position:relative;padding-bottom:var(--sp-7)}
.eqc-trazado{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;overflow:visible}
.eqc-circuito{transition:opacity var(--d-media) var(--e-estandar)}
/* mientras se mira a un integrante, el resto del circuito se retira */
.eqc-placa[data-foco] .eqc-circuito,
.eqc-placa[data-foco] .eqc-pulsos{opacity:.4}
.eqc-pulsos{transition:opacity var(--d-media) var(--e-estandar)}
.eqc-via{fill:var(--eqc-traza-2);animation:eqc-late 3.4s var(--e-estandar) infinite;
  animation-delay:var(--t,0s)}
.eqc-anillo{fill:none;stroke:var(--eqc-traza-1);stroke-width:3;
  animation:eqc-late 3.4s var(--e-estandar) infinite;animation-delay:var(--t,0s)}
@keyframes eqc-late{0%,72%,100%{opacity:.8}84%{opacity:1}}

/* El pulso es el mismo que recorre las trazas del encabezado: mismas
   variables, mismo keyframe. Cambiar --pulso-* los cambia a todos a la vez. */
.eqc-pulso{fill:none;stroke:var(--pulso-color);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--pulso-dash);
  animation:pulso var(--pulso-dur) linear infinite;
  animation-delay:var(--d,0s)}
.eqc-pulso-fino{stroke-width:2}
/* los dos brazos del cierre y los pads donde muere el recorrido */
.eqc-brazo{stroke-width:3}
.eqc-faro{fill:var(--eqc-traza-2)}

/* tramos de realce: van encima, apagados, y solo se encienden los del
   integrante que se esta mirando */
.eqc-tramo{opacity:0;filter:drop-shadow(0 0 8px var(--eqc-traza-2));
  transition:opacity var(--d-media) var(--e-estandar)}
.eqc-tramo path{fill:none;stroke:var(--eqc-traza-2);stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round}
.eqc-tramo circle{fill:var(--eqc-traza-2)}   /* las vias de ese tramo, encendidas */
.eqc-tramo.on{opacity:1}

.eqc-ruta{list-style:none;margin:0;padding:0;position:relative;z-index:1;
  display:grid;gap:var(--gap-nodo)}
.eqc-nodo{display:flex;align-items:center;justify-content:center}
.eqc-ficha{display:flex;align-items:center;gap:var(--sp-4)}

/* --- el pad: foto, anillos y badge -------------------------------------
   El diametro sale de --foto-size y de ningun otro sitio. La lente de dentro
   es la que recorta la foto, de modo que el --zoom del encuadre no puede
   agrandar el circulo: antes lo hacia y por eso unos se veian mayores. */
.eqc-pad{position:relative;flex:0 0 var(--foto-size);
  width:var(--foto-size);height:var(--foto-size);aspect-ratio:1/1;
  padding:6px;border-radius:50%;
  background:var(--eqc-fondo-luz);
  border:3px solid var(--eqc-traza-1);
  box-shadow:0 0 0 1px var(--eqc-halo),0 0 22px var(--eqc-halo),
             0 18px 40px -18px var(--eqc-sombra);
  transition:transform var(--d-media) var(--e-salida),
             box-shadow var(--d-media) var(--e-salida)}
/* segundo anillo, punteado y mayor: el pad de soldadura. Gira solo cuando se
   le pasa por encima, y desde donde estaba */
.eqc-pad::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px dashed var(--eqc-traza-2);opacity:.6;pointer-events:none;
  animation:eqc-gira 26s linear infinite paused}
@keyframes eqc-gira{to{transform:rotate(1turn)}}
.eqc-nodo:is(:hover,:focus-within) .eqc-pad::before{animation-play-state:running}
.eqc-lente{position:relative;display:block;width:100%;height:100%;
  border-radius:50%;overflow:hidden}
.eqc-lente img{width:100%;height:100%;
  object-fit:cover;object-position:var(--foco,50% 30%);
  scale:var(--zoom,1);translate:var(--desv,0)}
/* vineteado: la foto se funde con la placa en vez de quedar pegada encima */
.eqc-lente::after{content:"";position:absolute;inset:0;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,transparent 54%,var(--eqc-vineta) 100%)}
/* el que esta de verdad en pantalla lleva el anillo mas encendido */
.eqc-nodo.activo .eqc-pad{box-shadow:0 0 0 1px var(--eqc-halo),
  0 0 34px var(--eqc-brillo),0 18px 40px -18px var(--eqc-sombra)}
.eqc-nodo:is(:hover,:focus-within) .eqc-pad{transform:translateY(-6px);
  box-shadow:0 0 0 1px var(--eqc-halo),0 0 44px var(--eqc-brillo),
             0 26px 50px -20px var(--eqc-sombra)}
/* el numero, en hexagono montado en el canto del circulo, fuera de la cara */
.eqc-num{position:absolute;right:-4%;bottom:4%;left:auto;z-index:2;
  display:grid;place-items:center;
  width:56px;aspect-ratio:1;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:var(--eqc-fondo);color:var(--eqc-cian-txt);
  box-shadow:0 0 0 2px var(--eqc-traza-1),0 0 16px var(--eqc-halo);
  font-family:var(--fuente-mono);font-size:var(--fs-sm);letter-spacing:.06em;
  transition:background var(--d-media) var(--e-estandar),
             color var(--d-media) var(--e-estandar)}
.eqc-nodo:is(:hover,:focus-within) .eqc-num{background:var(--eqc-traza-1);
  color:var(--eqc-fondo)}

/* el texto: mismo tamano en todas las tarjetas, de la escala y nada mas */
.eqc-txt{min-width:0}
.eqc-txt h3{margin:0;color:var(--eqc-txt);font-size:var(--fs-xl);
  line-height:1.12;letter-spacing:-.01em}
.eqc-cargo{margin:var(--sp-1) 0 0;color:var(--eqc-txt-2);font-size:var(--fs-md)}
.eqc-perfil{margin:var(--sp-1) 0 0;color:var(--eqc-txt-2);font-size:var(--fs-sm);
  max-width:34ch}

/* --- entrada: la traza se suelda y el nodo sube ------------------------
   Quien pone la clase .on es el IntersectionObserver que ya vive en app.js
   para todo el sitio. El estado de partida vive en los keyframes con
   'backwards': si el observador no llega a pasar, el circuito se ve entero
   en vez de quedarse invisible. */
.eqc-traza{stroke-dasharray:100}
.entra .eqc-placa.on .eqc-traza{animation:eqc-dibujo 2.4s var(--e-estandar) backwards}
.entra .eqc-placa.on .eqc-ramales,.entra .eqc-placa.on .eqc-vias{
  animation:eqc-vias var(--d-lenta) var(--e-salida) backwards;animation-delay:1.1s}
.entra .eqc-nodo.on .eqc-ficha{animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--i,0)*var(--paso-stagger))}
.entra .eqc-cab.on>*{animation:sube var(--d-lenta) var(--e-salida) backwards}
.entra .eqc-cab.on>:nth-child(2){animation-delay:var(--paso-stagger)}
.entra .eqc-cab.on>:nth-child(3){animation-delay:calc(var(--paso-stagger)*2)}
@keyframes eqc-dibujo{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes eqc-vias{from{opacity:0}to{opacity:1}}
/* Donde haya timeline de scroll, la traza se suelda al bajar la pagina en vez
   de dibujarse de una vez al entrar. El resto sigue con el observador. */
@supports (animation-timeline:view()){
  .eqc-placa{view-timeline:--placa block}
  .entra .eqc-placa .eqc-traza,.entra .eqc-placa.on .eqc-traza{
    animation:eqc-dibujo linear both;
    animation-timeline:--placa;animation-range:entry 30% cover 55%}
}

/* --- columna centrada: movil y anchos medianos -------------------------
   Aqui el nombre cae justo debajo del circulo, en el camino de la traza, asi
   que lleva respaldo propio: la traza entra y sale de el igual que entra y
   sale de las fotos, como una etiqueta serigrafiada sobre la placa.
   Los circulos comparten eje; el recorrido sigue quebrando y cruzando de
   lado, solo que con menos amplitud. */
.eqc-ficha{flex-direction:column;text-align:center;gap:var(--sp-2)}
.eqc-txt{position:relative;z-index:1;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-3);
  background:color-mix(in srgb,var(--eqc-fondo) 88%,transparent)}
@media (max-width:767px){
  .eqc-pad::before{inset:-10px}
  .eqc-num{width:48px}
}

/* --- escritorio: la ruta serpenteando a los dos lados ----------------- */
@media (min-width:1025px){
  .eqc-ficha{flex-direction:row;text-align:left;gap:var(--sp-4)}
  .eqc-txt{padding:0;background:none}   /* alli la traza no pasa por el texto */
  .eqc-nodo{width:50%}
  .eqc-nodo:nth-child(odd){margin-right:auto;justify-content:flex-end}
  .eqc-nodo:nth-child(odd) .eqc-ficha{flex-direction:row-reverse;text-align:right}
  .eqc-nodo:nth-child(even){margin-left:auto;justify-content:flex-start}
  .eqc-nodo:nth-child(even) .eqc-num{left:-4%;right:auto}
  .eqc-nodo{position:relative}
  /* El nodo del gerente ocupa la fila entera y se parte en dos mitades: la
     ficha contra el eje y la cita al otro lado. Va en flujo y no en absoluto
     a proposito: asi el nodo crece con lo mas alto de los dos y no hay manera
     de que la cita se monte sobre el encabezado ni sobre el siguiente. */
  .eqc-nodo:has(.eqc-cita){width:100%;margin:0;justify-content:center;
    align-items:center;gap:var(--sp-5)}
  /* la ficha va en row-reverse, asi que su 'start' es el borde de la derecha:
     es lo que la deja pegada al eje */
  .eqc-nodo:has(.eqc-cita) .eqc-ficha{flex:0 1 50%;justify-content:flex-start}
  /* la cita no se centra con la ficha: arranca arriba y ademas sube al hueco
     que deja el subtitulo del encabezado, que solo ocupa la mitad izquierda.
     Asi se lee antes y la columna de la derecha respira. */
  .eqc-nodo:has(.eqc-cita) .eqc-cita{flex:0 1 50%;margin:calc(-1 * var(--sube-cita)) 0 0;
    align-self:start;justify-items:start;text-align:left}
}
/* --- de 1024 para abajo: el nodo del gerente deja de ser dos columnas ---
   Sin esto, .eqc-nodo sigue siendo un flex en fila y la ficha y la cita se
   reparten el ancho: en un movil la frase se quedaba en una columna de dos
   palabras por renglon y se salia de la pantalla. */
@media (max-width:1024px){
  .eqc-nodo:has(.eqc-cita){flex-direction:column;align-items:center;
    gap:var(--sp-4)}
  .eqc-nodo:has(.eqc-cita) .eqc-ficha,
  .eqc-nodo:has(.eqc-cita) .eqc-cita{flex:0 1 auto;width:100%;max-width:100%}
  .eqc-cita{margin-top:var(--sp-4);justify-items:center;text-align:center}
  /* a 375px el minimo del clamp seguia siendo de titular: la frase ocupaba
     media pantalla de alto */
  .eqc-cita q{font-size:clamp(1.2rem,.85rem + 1.5vw,1.9rem);line-height:1.25}
}
/* el nombre en una sola linea, como el resto de las fichas. Desde 1200px hay
   sitio de sobra junto a la foto; por debajo se deja partir para que no se
   salga del nodo, que esta limitado al 50%. */
@media (min-width:1200px){.eqc-txt h3{white-space:nowrap}}

/* ---------- tema placa: la pagina entera en oscuro ---------------------
   Va colgado de <body class="tema-placa"> y no de :root a proposito: el resto
   del sitio (inicio, servicios, contacto) sigue en claro, y aqui se oscurece
   todo lo que la pagina toca —canvas, cabecera, pie y los bloques de en
   medio— sin tocar una sola regla compartida.
   El fondo lo lleva el body: al no tener fondo <html>, el navegador lo
   propaga al lienzo, asi que el overscroll tambien queda oscuro. */
html:has(.tema-placa),.tema-placa{color-scheme:dark}
.tema-placa{background:var(--eqc-fondo);color:var(--eqc-txt)}
/* la rejilla de placa, fija y a toda la ventana: no se corta al acabar una
   seccion ni se mueve con el scroll */
.tema-placa::before{content:"";position:fixed;inset:0;z-index:-1;
  pointer-events:none;--celda:46px;opacity:.09;
  background:repeating-linear-gradient(90deg,var(--eqc-rejilla) 0 1px,transparent 1px var(--celda)),
    repeating-linear-gradient(0deg,var(--eqc-rejilla) 0 1px,transparent 1px var(--celda));
  -webkit-mask:radial-gradient(130% 70% at 50% 40%,#000 28%,transparent 80%);
          mask:radial-gradient(130% 70% at 50% 40%,#000 28%,transparent 80%)}

/* --- cabecera: misma placa, con el filo luminoso de las trazas --------- */
.tema-placa .cab{background:color-mix(in srgb,var(--eqc-fondo) 88%,transparent);
  border-bottom:1px solid var(--eqc-filo);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%)}
.tema-placa .menu a{color:var(--eqc-txt-2)}
.tema-placa .menu a:hover{color:var(--eqc-txt)}
.tema-placa .menu a.on{color:var(--eqc-cian-txt)}
.tema-placa .menu a::after{background:var(--eqc-traza-2)}
.tema-placa .m-tit{color:var(--eqc-txt-2)}
.tema-placa .submenu{background:var(--eqc-carta);border-color:var(--eqc-filo)}
/* el panel del menu en movil, del mismo negro que la placa */
.tema-placa .cab.abierto .menu{background:var(--eqc-fondo)}
/* el boton de la cabecera y el del cierre comparten tratamiento: canto cian
   sobre la placa, y al pasar se enciende */
.tema-placa .cab-cta,.eqc-b{background:transparent;color:var(--eqc-cian-txt);
  border:1px solid var(--eqc-traza-2);box-shadow:0 0 18px -6px var(--eqc-brillo)}
.tema-placa .cab-cta:is(:hover,:focus-visible),.eqc-b:is(:hover,:focus-visible){
  background:var(--eqc-traza-2);color:var(--eqc-fondo);
  box-shadow:0 0 26px -4px var(--eqc-brillo)}
.tema-placa .miga{color:var(--eqc-txt-2)}
.tema-placa .arriba{background:var(--eqc-carta);color:var(--eqc-cian-txt);
  border:1px solid var(--eqc-filo)}

/* --- secciones de en medio -------------------------------------------- */
/* Las secciones no pintan fondo propio: el negro y la rejilla del body se ven
   de arriba abajo, sin manchas de luz ni cortes de franja. */
.tema-placa :is(.eq-portada,.eqc){background:none}
.tema-placa .eqc::before{content:none}   /* la rejilla ya la pone el body */

/* --- pie: una traza fina lo separa y el copyright se apaga ------------- */
/* El pie si cambia de color, pero sin franja: arranca en el mismo negro de
   la placa y se va hundiendo hacia el azul profundo del manual, de modo que
   el cambio se ve y no hay costura. El filete cian marca donde empieza. */
.tema-placa footer{position:relative;color:var(--eqc-txt-2);
  margin-top:var(--sp-7);--linea-c:var(--eqc-filo);
  background:linear-gradient(180deg,transparent 0,
    color-mix(in srgb,var(--acento-900) 55%,transparent) 40%,
    color-mix(in srgb,var(--acento-900) 90%,transparent) 100%)}
.tema-placa footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--eqc-traza-1) 18%,
    var(--eqc-traza-2) 50%,var(--eqc-traza-1) 82%,transparent);opacity:.7}
.tema-placa .pie h3{color:var(--eqc-cian-txt);font-family:var(--fuente-mono);
  letter-spacing:.18em}
.tema-placa .pie a{color:var(--eqc-txt-2)}
.tema-placa .pie a:hover{color:var(--eqc-txt)}
.tema-placa .pie-marca img{filter:brightness(0) invert(1);opacity:.8}
.tema-placa .pie-fin{color:var(--eqc-txt-3);font-size:var(--fs-xs)}

/* ---------- portada: el nombre y el rumbo de la empresa ----------------
   Sin foto y sin panel de cristal: el nombre, en una sola linea, se apoya
   en una barra de bus que cruza hacia la mision y la vision, y esas dos
   cuelgan de ella. Las trazas de las esquinas son las del resto del sitio. */
.eq-marco{display:grid;gap:var(--sp-6)}
.eq-panel{position:relative;display:grid;gap:var(--sp-3);padding-bottom:var(--sp-4)}
/* la barra y su via de arranque: el mismo lenguaje del circuito de abajo */
.eq-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--eqc-traza-2),var(--eqc-traza-1) 40%,
    var(--eqc-filo) 78%,transparent)}
.eq-panel::before{content:"";position:absolute;left:0;bottom:-4px;z-index:1;
  width:9px;height:9px;border-radius:50%;background:var(--eqc-traza-2);
  box-shadow:0 0 14px var(--eqc-brillo)}
/* el nombre nunca parte: por debajo de cierto ancho manda el vw */
.eq-panel h1{margin:0;max-width:none;white-space:nowrap;color:var(--eqc-txt);
  font-size:min(var(--t-display),12vw);
  text-shadow:0 0 60px color-mix(in srgb,var(--eqc-traza-2) 30%,transparent)}
.eq-panel .eqc-azul{color:var(--eqc-cian-txt);
  text-shadow:0 0 28px var(--eqc-brillo)}
.eq-nota{margin:0;max-width:44ch;color:var(--eqc-txt-2);
  font-family:var(--fuente-mono);font-size:var(--fs-sm);line-height:1.6;
  letter-spacing:.06em}
/* las trazas de la portada, mas grandes que las de las tarjetas */
.eq-portada>.circ{width:clamp(180px,26vw,420px)}
/* mas pista repartida: la seccion del equipo y el pie tambien llevan
   esquinas, y las del pie van mas apagadas para no pelear con el texto */
.eqc>.circ{width:clamp(160px,22vw,360px);opacity:.75}
.tema-placa footer .circ{width:clamp(130px,16vw,260px);opacity:.5}
/* en la placa oscura todas las pistas van con el azul claro */
.tema-placa .circ{--circ:var(--acento-300)}
/* y el texto del pie por delante de ellas */
.tema-placa .pie{position:relative;z-index:1}

/* ---------- mision y vision: dos placas a la vista --------------------
   Nada plegado: las dos se leen enteras. Cada una es una placa con su
   chaflan, su filete de traza y una esquina de circuito propia. */
.mv{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.mv-caja{position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:var(--sp-3);align-content:start;
  padding:var(--sp-5);color:var(--eqc-txt-2);
  background:linear-gradient(160deg,var(--eqc-carta),var(--eqc-fondo-luz));
  border:1px solid var(--eqc-filo);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),
    calc(100% - 22px) 100%,0 100%,0 22px);
  transition:border-color var(--d-media) var(--e-estandar),
             box-shadow var(--d-media) var(--e-estandar)}
/* el filete superior, donde muere el bajante de la barra */
.mv-caja::before{content:"";position:absolute;top:0;left:22px;right:0;height:2px;
  z-index:1;background:linear-gradient(90deg,var(--eqc-traza-2),
    var(--eqc-traza-1) 60%,transparent)}
/* escuadra de esquina: el detalle de serigrafia que llevan las placas */
.mv-caja::after{content:"";position:absolute;left:13px;bottom:13px;
  width:16px;height:16px;z-index:1;
  border-left:1px solid var(--eqc-filo-vivo);border-bottom:1px solid var(--eqc-filo-vivo)}
/* su traza de esquina, metida bajo el chaflan y apagada hasta que se pasa */
.mv-caja .circ{z-index:-1;width:clamp(120px,16vw,220px);opacity:.5;
  transition:opacity var(--d-media) var(--e-estandar)}
.mv-caja:hover{border-color:var(--eqc-filo-vivo);
  box-shadow:0 0 34px -14px var(--eqc-halo)}
.mv-caja:hover .circ{opacity:1}
.mv-eti{margin:0;display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--fuente-mono);font-size:var(--fs-md);letter-spacing:.2em;
  text-transform:uppercase;color:var(--eqc-cian-txt)}
/* la via que remata el rotulo, igual que las del circuito */
.mv-ico{flex:none;width:9px;height:9px;border-radius:50%;background:var(--eqc-traza-2);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--eqc-traza-2) 20%,transparent),
             0 0 14px var(--eqc-brillo)}
.mv-caja>p+p{margin:0;font-size:var(--fs-md);line-height:1.7;max-width:60ch}
.entra .eq-panel.on>*,.entra .mv.on .mv-caja{
  animation:sube var(--d-lenta) var(--e-salida) backwards}
.entra .eq-panel.on>:nth-child(2){animation-delay:var(--paso-stagger)}
.entra .eq-panel.on>:nth-child(3){animation-delay:calc(var(--paso-stagger) * 2)}
.entra .mv.on .mv-caja:nth-child(2){animation-delay:var(--paso-stagger)}

.eq-texto{display:grid;gap:var(--sp-4);margin:0;max-width:none;text-align:left}
.tema-placa .eq-texto p{margin:0;color:var(--eqc-txt-2);font-size:var(--fs-md)}
.eq-lema{margin:0;padding-left:var(--sp-3);border-left:2px solid var(--eqc-traza-2);
  color:var(--eqc-txt);font-family:var(--fuente-titulo);font-size:var(--fs-md);
  text-align:left}

/* --- la cita, al lado del gerente -------------------------------------
   Vive dentro de su nodo: en escritorio se sale al lado libre del eje y a
   la altura de la foto; cuando la ruta cae en columna, se queda debajo. */
/* el nodo del gerente y su cita pesan mas que el resto */
.eqc-nodo:first-child .eqc-txt h3{font-size:var(--fs-2xl)}
.eqc-nodo:first-child .eqc-cargo{font-size:var(--fs-lg)}
/* La cita va suelta sobre la placa, sin caja ni respaldo: lo unico que la
   sostiene es la propia traza, que le pasa por el costado. La sombra es solo
   para que no se pierda si el recorrido le cruza por detras. */
.eqc-cita{position:relative;z-index:1;margin:var(--sp-4) 0 0;
  display:grid;gap:var(--sp-3);justify-items:center;text-align:center;
  max-width:40ch}
.eqc-cita q{font-family:var(--fuente-titulo);font-weight:700;
  font-size:clamp(1.55rem,1.1rem + 1.7vw,2.6rem);line-height:1.16;
  letter-spacing:-.015em;color:var(--eqc-txt-2);
  text-shadow:0 2px 16px var(--eqc-fondo)}
.eqc-cita q b{color:var(--eqc-txt);font-weight:inherit}
.eqc-cita cite{font-style:normal;font-family:var(--fuente-mono);
  font-size:var(--fs-sm);letter-spacing:.14em;color:var(--eqc-cian-txt)}

/* ---- la nube de cada cargo -------------------------------------------
   Se abre al pasar el raton por el integrante, al enfocar con teclado y al
   tocar en movil, que en un <button> es lo mismo que enfocarlo. No lleva JS:
   el cargo es un boton, la nube su tooltip, y :hover/:focus-within hacen el
   resto. Como esta en absoluto, no mueve ni una linea del circuito. */
.eqc-txt{position:relative}
.eqc-pista{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;
  display:inline-flex;align-items:baseline;gap:var(--sp-1);text-align:inherit;
  cursor:help;transition:color var(--d-media) var(--e-estandar)}
.eqc-pista:is(:hover,:focus-visible){color:var(--eqc-cian-txt)}
.eqc-pista:focus-visible{outline:2px solid var(--eqc-traza-2);outline-offset:4px;
  border-radius:2px}
/* la pastilla de aviso: un punto que late despacio, como las vias */
.eqc-mas{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--eqc-traza-2);box-shadow:0 0 10px var(--eqc-brillo);
  animation:eqc-late 3.4s var(--e-estandar) infinite}
.eqc-nodo:is(:hover,:focus-within) .eqc-mas{background:var(--eqc-cian-txt)}

.eqc-nube{position:absolute;top:calc(100% + 12px);left:0;z-index:5;
  width:max-content;max-width:min(30ch,20rem);margin:0;
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  text-align:left;color:var(--eqc-txt);font-size:var(--fs-sm);line-height:1.55;
  background:var(--eqc-carta);border:1px solid var(--eqc-filo-vivo);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),
    calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 18px 40px -18px var(--eqc-sombra),0 0 26px -10px var(--eqc-halo);
  opacity:0;visibility:hidden;translate:0 -6px;
  transition:opacity var(--d-media) var(--e-estandar),
             translate var(--d-media) var(--e-salida),
             visibility 0s linear var(--d-media)}
/* el cable que la ata al cargo, en lugar del picudo de bocadillo */
.eqc-nube::before{content:"";position:absolute;left:18px;top:-12px;
  width:2px;height:12px;background:var(--eqc-traza-2)}
/* y el filete de traza que le recorre el canto izquierdo */
.eqc-nube::after{content:"";position:absolute;left:0;top:14px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--eqc-traza-2),transparent)}
.eqc-nodo:is(:hover,:focus-within){z-index:4}
.eqc-nodo:is(:hover,:focus-within) .eqc-nube{opacity:1;visibility:visible;
  translate:0 0;transition-delay:0s}
/* En un movil la nube se abre al TOCAR el cargo, que en un <button> es lo
   mismo que enfocarlo. Y ahi deja de flotar: en absoluto no ocupa sitio y se
   montaba encima de la cita, que ademas la tapaba por estar en otro contexto
   de apilado. En flujo empuja lo de abajo y no hay nada que pelear. */
@media (max-width:1024px){
  .eqc-nube{position:relative;top:auto;left:auto;right:auto;
    width:auto;max-width:none;margin-top:12px;
    /* sin animacion aqui: de alto 0 a alto automatico no se puede interpolar
       sin meter un envoltorio, y al tocar un despliegue seco se lee igual */
    display:none;opacity:1;visibility:visible;translate:none;transition:none}
  .eqc-nodo:is(:hover,:focus-within) .eqc-nube{display:block;translate:none}
  /* el cable que la ataba al cargo ya no ata nada */
  .eqc-nube::before{display:none}
  /* el cargo tiene que verse como pulsable: sin raton no hay hover que lo diga */
  .eqc-pista{text-decoration:underline dotted;text-underline-offset:4px}
}
/* en las fichas de la izquierda el texto va alineado a la derecha: la nube
   tambien, y el cable le baja por ese lado */
@media (min-width:1025px){
  .eqc-nodo:nth-child(odd) .eqc-nube{left:auto;right:0;
    padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,
      14px 100%,0 calc(100% - 14px))}
  .eqc-nodo:nth-child(odd) .eqc-nube::before{left:auto;right:18px}
  .eqc-nodo:nth-child(odd) .eqc-nube::after{left:auto;right:0;
    top:0;bottom:14px}
  /* las de la derecha crecen hacia fuera: se acotan para que el recorte de
     la seccion no se las coma en pantallas de 1025 justos */
  .eqc-nodo:nth-child(even) .eqc-nube{max-width:min(26ch,15rem)}
}

/* ---------- formularios ---------- */
form{display:grid;gap:var(--e-16);max-width:38rem;margin-top:var(--e-32)}
input,select,textarea{font:inherit;min-height:var(--toque-min);
  padding:var(--e-16);border:1px solid var(--neutro-300);border-radius:var(--r-2);
  background:var(--blanco);color:var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--neutro-600)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento-500);
  box-shadow:0 0 0 3px rgba(75,124,173,.22)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error)}
form .b{justify-self:start}

/* ---------- contacto ----------------------------------------------------
   El hueco de la derecha del hero lo ocupa el formulario. La caja y los
   campos hablan el idioma de las fichas de politicas.html: bisel, escuadras
   en L y cristal muy tenue sobre la placa oscura. Los tintes salen del cian
   del manual (--icono-tinte) en vez del rgba del encargo, que era otro azul
   y se habria peleado con el resto del sitio. */
/* El alcance cubre contacto y asesoria: comparten el hero de dos columnas,
   la caja del formulario y sus variables. Lo que cambia entre las dos es el
   contenido, no el armazon. */
:is(.pag-contacto,.pag-asesoria){--fc-linea:color-mix(in srgb,var(--icono-tinte) 20%,transparent);
  --fc-linea-2:color-mix(in srgb,var(--icono-tinte) 15%,transparent);
  --fc-vidrio:color-mix(in srgb,var(--blanco) 3%,transparent);
  /* el rojo del manual (--error #B3261E) no llega a AA sobre la placa: este
     da 7.4:1 sobre el fondo del hero */
  --fc-rojo:#FF8080;
  /* el verde del acierto: solo vive 1,5s tras corregir un campo */
  --fc-verde:#7FFFB4}
/* Una sola seccion para toda la pagina: sin overflow:hidden, que convertiria
   la seccion en el contenedor de desplazamiento y dejaria sin efecto el
   sticky de la columna izquierda. Nada se sale: la red de circuitos es un
   absolute a inset:0. */
/* .eq-portada lleva overflow:hidden por las trazas de esquina, que aqui no
   hay; con el puesto, la seccion seria el contenedor de scroll. El padding
   vale igual para contacto y para el radicador de PQRSF. */
:is(.pag-contacto,.pag-asesoria) .eq-portada{padding-block:80px;isolation:isolate;
  overflow:visible}
.ct-txt .miga{padding:0;margin-bottom:var(--e-24)}
:is(.pag-contacto,.pag-asesoria) .doc-red{opacity:.06}
/* .eq-portada pone position:relative a todos sus hijos menos .circ, y a la
   red de circuitos eso la sacaria del fondo */
:is(.pag-contacto,.pag-asesoria) .eq-portada>.doc-red{position:absolute;z-index:0}

/* Tres piezas: el texto con sus fichas, el formulario y el mapa. En
   escritorio el formulario ocupa las dos filas de la derecha y el mapa cae
   bajo el texto; en una columna, el mapa se va al final.
   Sin sticky: con el mapa dentro, la izquierda pasa a ser la columna mas
   alta y supera el alto de la pantalla, y un sticky por arriba dejaria el
   mapa y su boton fuera de alcance mientras esta pegada. */
.ct-rejilla{display:grid;gap:var(--e-64);align-items:start}
/* Un 40fr lleva minimo automatico = min-content: si el contenido de una
   columna no cabe, la columna crece, y lo que mide contra ella (el titular,
   que va en cqi) cambia de tamano y vuelve a medir. Con min-width:0 la
   rejilla reparte por los fr y no hay ida y vuelta posible. */
.ct-txt,.fc,.ct-mapa{min-width:0}
@media (max-width:1023px){
  .fc{order:2}
  .ct-mapa{order:3}
}
/* El titular se mide contra SU columna, no contra la ventana: "CONTACTANOS"
   es una sola palabra de 7,7 em y a 4.8vw se salia de la columna a 1200 y a
   1440. Con cqi la fuente sigue el ancho real y no puede invadir la tarjeta. */
.ct-txt{container-type:inline-size}
:is(.pag-contacto,.pag-asesoria) .eq-portada h1{font-size:clamp(34px,12cqi,72px)}
@media (min-width:1024px){
  .ct-txt{grid-column:1;grid-row:1;padding-right:24px}
  .ct-mapa{grid-column:1;grid-row:2}
  .fc{grid-column:2;grid-row:1 / span 2}
}
/* 48px de separacion vertical entre las fichas y el mapa; el aire entre
   columnas es el otro numero del gap */
@media (min-width:1024px) and (max-width:1199px){
  .ct-rejilla{grid-template-columns:42fr 58fr;gap:28px 56px}
}
@media (min-width:1200px){
  .ct-rejilla{grid-template-columns:40fr 60fr;gap:28px 88px}
}
/* el corte entre el texto y las vias directas */
.ct-sep{height:1px;margin:36px 0 28px;border:0;
  background:color-mix(in srgb,var(--icono-tinte) 14%,transparent)}
.ct-tit{margin:0 0 16px;font-family:var(--fuente-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 40%,var(--blanco))}

/* --- la caja del formulario --- */
.fc{position:relative;padding:32px;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--blanco) 4.5%,transparent),
    color-mix(in srgb,var(--blanco) 1.5%,transparent) 55%,
    color-mix(in srgb,var(--icono-tinte) 3%,transparent));
  border:1px solid var(--fc-linea);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),
    calc(100% - 18px) 100%,0 100%,0 18px);
  /* drop-shadow y no box-shadow: dentro de un clip-path la sombra se recorta */
  filter:drop-shadow(0 8px 32px color-mix(in srgb,var(--negro) 30%,transparent))}
/* las escuadras, pegadas al chaflan: a 22px (el valor de las fichas de
   politicas) se leian sueltas en una caja de este tamano */
.fc>.doc-esq{top:12px;left:12px;width:24px;height:24px}
.fc>.doc-esq-fin{top:auto;left:auto;bottom:12px;right:12px}
.fc-barra{margin:0 0 var(--e-24);display:flex;align-items:center;gap:var(--e-8);
  font-family:var(--fuente-mono);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:color-mix(in srgb,var(--icono-tinte) 55%,var(--blanco))}

/* --- campos --- */
/* mismo aire entre todos los grupos de campos */
.fc-form{display:grid;gap:18px;max-width:none;margin:0}
/* Dos correcciones sobre ese aire. La de abajo es grande porque el grupo de
   la casilla lleva reservado su renglon de aviso (18px): 22 de gap + 18 del
   renglon - 16 = los 24 netos que se ven entre la casilla y el boton. */
.fc-campo-auto{margin-top:-2px}
.fc .fc-enviar{margin-top:-16px}
.fc-fila{display:grid;gap:18px;align-items:start}
.fc-campo{display:grid;gap:8px;margin:0}
/* el asterisco de obligatorio y la marca de opcional */
.fc-req{margin-left:5px;font-size:15px;
  color:color-mix(in srgb,var(--icono-tinte) 55%,var(--blanco))}
.fc-opc{font-size:12px;text-transform:lowercase;letter-spacing:0;font-weight:400;
  color:color-mix(in srgb,var(--blanco) 35%,transparent)}
/* La etiqueta manda sobre la pista del campo: 14px de mono en versales pesa
   mas que los 15px de texto normal del placeholder, y el 600 lo remata.
   El 65% de cian sobre blanco es el equivalente en nuestra paleta al
   rgba(127,211,255,.9) del encargo: 6,6:1 sobre la tarjeta, el mismo. */
.fc-campo>label:not(.fc-check){font-family:var(--fuente-mono);font-size:15px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 65%,var(--blanco))}
.fc-campo :is(input,select,textarea){
  width:100%;padding:12px 15px;min-height:var(--toque-min);
  font-family:var(--fuente);
  /* 17px: mas cuerpo del que pedia el minimo, y nunca por debajo de 16, que
     es cuando iOS hace zoom al enfocar el campo */
  font-size:17px;font-weight:400;line-height:1.45;color:var(--blanco);
  background:var(--fc-vidrio);border:1px solid var(--fc-linea-2);border-radius:0;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),
    calc(100% - 6px) 100%,0 100%,0 6px);
  transition:border-color 200ms var(--e-estandar),
             background 200ms var(--e-estandar),box-shadow 200ms var(--e-estandar)}
/* El autorrelleno de Chrome impone su propio fondo (amarillo o azul claro) y
   solo lo pisa una sombra interior enorme. La transicion de 9999s evita el
   destello del color nativo antes de que entre la sombra. */
.fc-campo :is(input,select,textarea):is(:-webkit-autofill,
  :-webkit-autofill:hover,:-webkit-autofill:focus){
  -webkit-text-fill-color:var(--blanco);
  caret-color:var(--blanco);
  -webkit-box-shadow:0 0 0 1000px var(--fc-vidrio) inset;
          box-shadow:0 0 0 1000px var(--fc-vidrio) inset;
  transition:background-color 9999s ease-in-out 0s}
/* y en foco manda el anillo de siempre, que si no lo tapa la sombra anterior */
.fc-campo :is(input,select,textarea):-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--fc-vidrio) inset,
                     inset 0 0 0 2px color-mix(in srgb,var(--icono-tinte) 22%,transparent);
          box-shadow:0 0 0 1000px var(--fc-vidrio) inset,
                     inset 0 0 0 2px color-mix(in srgb,var(--icono-tinte) 22%,transparent)}
.fc-campo textarea{resize:vertical;height:120px;min-height:120px}
/* el aviso y el contador comparten el renglon de pie del area de texto: uno a
   cada lado. Asi no se suman dos lineas de hueco antes de la casilla. */
.fc-campo-msj{grid-template-columns:1fr auto}
.fc-campo-msj>:is(label,textarea){grid-column:1 / -1}
.fc-campo-msj .fc-error{grid-column:1;grid-row:3}
.fc-campo-msj .fc-cuenta{grid-column:2;grid-row:3;margin-top:0}
/* mientras no hay opcion elegida, el texto del select es un marcador */
.fc-campo select:invalid{font-size:16px;
  color:color-mix(in srgb,var(--blanco) 35%,transparent)}
/* el prefijo fijo del telefono: texto, no un campo mas */
.fc-tel{position:relative;display:block}
.fc-pre{position:absolute;left:15px;top:50%;translate:0 -50%;pointer-events:none;
  font-size:17px;color:var(--blanco)}
.fc-tel input{padding-left:50px}
.fc-campo :is(input,select,textarea)::placeholder{
  /* apagado a proposito: la pista tiene que pesar menos que lo escrito */
  font-size:16px;color:color-mix(in srgb,var(--blanco) 28%,transparent)}
/* el anillo de foco va por dentro: un box-shadow exterior lo cortaria el bisel */
.fc-campo :is(input,select,textarea):focus{outline:none;
  border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 6%,transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--icono-tinte) 22%,transparent)}
.fc-campo :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--fc-rojo)}
/* recien corregido: verde tenue que se apaga solo (lo quita el JS a 1,5s) */
.fc-campo :is(input,select,textarea).fc-bien{
  border-color:color-mix(in srgb,var(--fc-verde) 45%,transparent)}
/* la altura de un renglon esta siempre reservada: el aviso no mueve nada */
.fc-error{min-height:17px;font-size:14px;line-height:1.25;color:var(--fc-rojo)}
/* en las filas de dos columnas el aviso ocupa dos renglones (el del correo es
   largo): se reserva el alto o la fila se descuadra al aparecer */
.fc-fila .fc-error{min-height:34px}
/* el contador del mensaje, abajo a la derecha y sin llamar la atencion */
.fc-cuenta{justify-self:end;margin-top:6px;
  font-family:var(--fuente-mono);font-size:12px;
  color:color-mix(in srgb,var(--blanco) 35%,transparent)}
/* El select tiene que verse desplegable y no campo de texto: la zona del
   chevron va separada por un filete, y la flecha es grande. Los dos son
   fondos del propio campo; un pseudoelemento no cabe en un <select>. */
.fc-campo select{appearance:none;padding-right:56px;cursor:pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2348A3B8' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(color-mix(in srgb,var(--icono-tinte) 22%,transparent),
                    color-mix(in srgb,var(--icono-tinte) 22%,transparent));
  background-repeat:no-repeat;
  background-position:right 14px center,right 48px center;
  background-size:20px 20px,1px 60%;
  transition:border-color 200ms var(--e-estandar),
             background 200ms var(--e-estandar),box-shadow 200ms var(--e-estandar)}
/* al enfocar, la flecha se da la vuelta: la unica forma sin pseudoelemento
   es cambiar el propio SVG, que es lo que hace este segundo fondo */
.fc-campo select:focus{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 12l5-5 5 5' fill='none' stroke='%2348A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--icono-tinte),var(--icono-tinte))}
.fc-campo select option{background:var(--marca-900);color:var(--blanco)}
/* la casilla de autorizacion: sigue siendo un checkbox de verdad (teclado y
   lector de pantalla intactos), solo que dibujado por nosotros. El margen de
   2px pone su centro a la altura de la primera linea del texto. */
/* La casilla es una casilla: cuadrada, con esquina redonda y su check. Antes
   llevaba el chaflan del resto de la caja y a 18px parecia otra cosa. */
.fc-check{display:flex;align-items:flex-start;gap:12px;
  font-size:15px;font-weight:400;line-height:1.5;white-space:normal;
  color:var(--blanco);cursor:pointer}
/* El selector lleva [type=checkbox] a proposito: el min-height de 52px que
   PQRSF pone a los campos se declara mas abajo y con el mismo peso, asi que
   por orden le ganaba y estiraba la casilla a 22x52. */
.fc-campo .fc-check input[type="checkbox"]{appearance:none;flex:none;
  width:22px;height:22px;aspect-ratio:1;min-height:0;
  margin:3px 0 0;padding:0;cursor:pointer;
  background:transparent;border-radius:4px;
  border:1.5px solid color-mix(in srgb,var(--icono-tinte) 40%,transparent);
  transition:background 200ms var(--e-estandar),border-color 200ms var(--e-estandar)}
.fc-campo .fc-check input[type="checkbox"]:checked{border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 20%,transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.2 5 9.7 12.5 1.8' fill='none' stroke='%2348A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/14px no-repeat}
.fc-campo .fc-check input[type="checkbox"]:focus-visible{outline:2px solid var(--icono-tinte);
  outline-offset:2px}
/* la nota cuelga del texto, no de la casilla: mismo sangrado que el hueco */
.fc-campo-anon .fc-nota{padding-left:34px}
.fc-check a{color:var(--icono-tinte);text-underline-offset:3px}
/* la casilla y el enlace, en el mismo renglon; el aviso baja al siguiente */
.fc-campo-auto{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.fc-campo-auto .fc-error{flex-basis:100%;margin-top:2px}
.fc-ver{font-size:14px;color:var(--icono-tinte);
  text-decoration:underline;text-underline-offset:3px}

/* --- boton y estados --- */
.fc .fc-enviar{justify-self:start;cursor:pointer;
  padding:18px 36px;min-width:230px;justify-content:center;
  font-size:14px;letter-spacing:.14em}
.fc .fc-enviar .doc-flecha{font-size:16px}
.fc-enviar:disabled{cursor:progress;opacity:.7}
.fc-punto{display:none;width:8px;height:8px;border-radius:50%;
  background:var(--icono-tinte);
  filter:drop-shadow(0 0 6px var(--icono-tinte));
  animation:doc-late 1.1s var(--e-estandar) infinite}
.fc-enviar[aria-busy="true"] .fc-punto{display:block}
.fc-enviar[aria-busy="true"] .doc-flecha{display:none}
.fc-fallo{margin:0;font-size:14px;line-height:1.5;color:var(--fc-rojo)}
.fc-fallo a{color:inherit;text-underline-offset:3px}
.fc-hecho{display:grid;gap:var(--e-16);justify-items:start}
.fc-hecho-ico{width:48px;height:48px;color:var(--icono-tinte);
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--icono-tinte) 45%,transparent))}
.fc-hecho h2{font-size:var(--t-h4);line-height:var(--lh-h4)}
.fc-hecho p{margin:0;color:color-mix(in srgb,var(--blanco) 62%,transparent)}
.fc-otro{padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--fuente-mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--icono-tinte);
  text-decoration:underline;text-underline-offset:5px;
  transition:color 200ms var(--e-estandar)}
.fc-otro:hover{color:var(--blanco)}

/* --- las vias directas: cuatro fichas pequenas, 2x2 -------------------
   Las filas van a 1fr para que las cuatro midan lo mismo aunque el correo
   de una parta en dos lineas. */
/* Apiladas y en horizontal: el cuadro del icono, el dato y la flecha. A tres
   columnas el ancho no daba y el telefono y el correo partian en dos; con la
   columna entera cualquier valor cabe de corrido. */
.datos{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:1fr}
.ct-dato{display:grid}
.ct-dato-in{position:relative;display:grid;align-items:center;
  grid-template-columns:40px 1fr auto;gap:16px;
  padding:16px 20px;text-decoration:none;
  background:color-mix(in srgb,var(--blanco) 2.8%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 16%,transparent);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),
    calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background 200ms var(--e-estandar),
             border-color 200ms var(--e-estandar),translate 200ms var(--e-estandar)}
:is(a,button).ct-dato-in{cursor:pointer}
/* el boton no hereda ni la fuente ni la alineacion del texto */
button.ct-dato-in{width:100%;text-align:left;font:inherit;color:inherit}
/* copiar y confirmar: se turnan en el mismo hueco, asi nada se mueve */
.ct-ico-ok{display:none;color:var(--icono-tinte);opacity:1}
.ct-copia.copiado .ct-ico-copia{display:none}
.ct-copia.copiado .ct-ico-ok{display:block}
.ct-copia.copiado{border-color:color-mix(in srgb,var(--icono-tinte) 50%,transparent)}
:is(a,button).ct-dato-in:is(:hover,:focus-visible){translate:0 -2px;
  background:color-mix(in srgb,var(--blanco) 5.5%,transparent);
  border-color:color-mix(in srgb,var(--icono-tinte) 50%,transparent)}
/* el cuadro del icono */
.ct-caja{display:grid;place-items:center;width:40px;height:40px;
  background:color-mix(in srgb,var(--icono-tinte) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 16%,transparent);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),
    calc(100% - 6px) 100%,0 100%,0 6px);
  transition:background 200ms var(--e-estandar),
             border-color 200ms var(--e-estandar)}
:is(a,button).ct-dato-in:is(:hover,:focus-visible) .ct-caja{
  background:color-mix(in srgb,var(--icono-tinte) 14%,transparent);
  border-color:color-mix(in srgb,var(--icono-tinte) 40%,transparent)}
.ct-cuerpo{display:grid;gap:2px;min-width:0}
/* el valor y su coletilla: si no caben juntos, la coletilla baja sola */
.ct-linea{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0}
/* la flecha, al final de la fila: la senal de que la ficha lleva a algun sitio */
.ct-flecha{flex:none;width:16px;height:16px;
  color:var(--icono-tinte);opacity:.45;
  transition:opacity 200ms var(--e-estandar),translate 200ms var(--e-estandar)}
:is(a,button).ct-dato-in:is(:hover,:focus-visible) .ct-flecha{opacity:1;translate:2px -2px}
.ct-copia:is(:hover,:focus-visible) .ct-flecha{translate:none}
/* el bisel recorta el contorno, asi que el foco se pinta por dentro */
:is(a,button).ct-dato-in:focus-visible{outline:none;
  box-shadow:inset 0 0 0 2px var(--icono-tinte)}
/* una sola escuadra, arriba a la izquierda: con cuatro fichas pequenas, dos
   por ficha serian ruido */
.ct-dato-in>.doc-esq{top:5px;left:5px;width:14px;height:14px;border-width:1px;
  pointer-events:none}
.ct-ico{width:22px;height:22px;color:var(--icono-tinte);
  opacity:.75;transition:opacity 200ms var(--e-estandar)}
:is(a,button).ct-dato-in:is(:hover,:focus-visible) .ct-ico{opacity:1}
/* el encargo pedia blanco al 45%: al 52% da 4.9:1 y cumple el AA */
.ct-sub{font-size:13px;line-height:1.3;white-space:nowrap;
  color:color-mix(in srgb,var(--blanco) 52%,transparent)}
.ct-eti{font-family:var(--fuente-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
.ct-val{min-width:0;font-size:17px;font-weight:500;line-height:1.35;
  color:var(--blanco);
  /* el dato no se parte nunca: si algun dia no cupiera, puntos suspensivos
     antes que dos renglones, y el valor entero se queda en el title */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Un formulario largo se lee por bloques: cada uno con su rotulo y su filete,
   que marcan donde acaba uno y empieza el siguiente. Va como parrafo y no
   como fieldset/legend a proposito: un legend dentro de un fieldset en grid
   lo coloca cada navegador a su manera. El agrupado semantico lo da cada
   etiqueta, que aqui todas son explicitas. */
.fc-rotulo{margin:6px 0 -4px;padding-bottom:10px;
  display:flex;align-items:center;gap:10px;
  font-family:var(--fuente-mono);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco));
  border-bottom:1px solid color-mix(in srgb,var(--icono-tinte) 14%,transparent)}
.fc-rotulo:first-of-type{margin-top:0}
.fc-rotulo::before{content:"";flex:none;width:6px;height:6px;
  background:color-mix(in srgb,var(--icono-tinte) 70%,transparent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* ---------- asesoria comercial ------------------------------------------
   Reaprovecha entero el armazon de contacto: .eq-portada, .ct-rejilla,
   .ct-txt y la caja .fc con sus campos. Lo unico propio es el escudo de
   fondo, los tres sellos del hero y los dos bloques de debajo. */
/* aqui el escudo va detras del formulario y sale por el canto derecho: es
   fondo, no protagonista como en politicas.html. Sin overflow:hidden se
   saldria de la seccion. */
.pag-asesoria .eq-portada{overflow:hidden}
/* El formulario tiene que caber entero en 1440x900 sin scroll: con las
   medidas de contacto se pasaba 55px. Se recortan aqui y solo aqui el aire
   del hero, el relleno de la caja y el hueco entre grupos de campos; el
   formulario de contacto, que convive con el mapa y las fichas, no cambia. */
.pag-asesoria .eq-portada{padding-block:48px 80px}
/* La caja del formulario, opaca. La de contacto puede ser cristal porque
   detras solo hay circuito; aqui el escudo se transparentaba y el formulario
   se confundia con el fondo. El degradado se conserva encima de la placa. */
.pag-asesoria .fc{padding:24px 28px;
  background:
    linear-gradient(160deg,
      color-mix(in srgb,var(--blanco) 5%,transparent),
      color-mix(in srgb,var(--blanco) 2%,transparent) 55%,
      color-mix(in srgb,var(--icono-tinte) 4%,transparent)),
    color-mix(in srgb,var(--marca-900) 88%,var(--noche));
  border-color:color-mix(in srgb,var(--icono-tinte) 28%,transparent)}
.pag-asesoria .fc-form{gap:14px}
/* .eq-portada pone position:relative a todos sus hijos: al escudo eso lo
   sacaria del fondo, igual que a la red de circuitos */
/* El escudo se leia a traves del formulario y competia con los campos: baja
   a un cuarto y se corre hacia fuera, para que quede detras de la columna de
   texto y solo asome por el canto derecho. */
.pag-asesoria .eq-portada>.as-marca{position:absolute;z-index:0;
  top:auto;bottom:0;height:78%;opacity:.22;right:-12%}
.pag-asesoria .hl-casco{opacity:.8;
  filter:drop-shadow(0 0 70px color-mix(in srgb,var(--acento-500) 35%,transparent))}

/* los tres sellos: lo que quita el miedo a rellenar el formulario */
.as-sellos{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;
  margin:var(--e-32) 0 0;padding:0}
.as-sello{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fuente-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 40%,var(--blanco))}
.as-sello svg{flex:none;width:15px;height:15px;color:var(--icono-tinte)}

.as-pie-form{margin:var(--e-16) 0 0;font-size:13px;line-height:1.5;
  color:color-mix(in srgb,var(--blanco) 50%,transparent)}

/* --- la ultima salida: quien no rellena formularios, llama -------------- */
.as-llama{padding-block:var(--e-48);text-align:center;
  background:var(--marca-900);
  border-top:1px solid color-mix(in srgb,var(--icono-tinte) 12%,transparent)}
.as-llama p{margin:0;font-size:18px;
  color:color-mix(in srgb,var(--blanco) 60%,transparent)}
.as-llama a{display:inline-flex;align-items:center;gap:10px;margin-left:10px;
  font-weight:600;color:var(--icono-tinte);text-decoration:none}
.as-llama a:is(:hover,:focus-visible){text-decoration:underline;
  text-underline-offset:4px}
.as-llama svg{flex:none;width:22px;height:22px}

@media (max-width:1023px){
  /* en una columna el escudo caeria detras del texto */
  .as-marca{display:none}
}
@media (max-width:767px){
  .as-llama p{font-size:16px}
  .as-llama a{display:flex;justify-content:center;margin:8px 0 0}
}

/* ---------- PQRSF -------------------------------------------------------
   Comparte con contacto.html el armazon: dos columnas 40/60 y marco HUD con
   bisel y escuadras. Lo que cambia es el contenido de cada lado: alli son
   los datos de contacto y un formulario entero a la vista, y aqui el
   selector de tipo permanente y un formulario repartido en tres pasos. */
.pq2{position:relative;isolation:isolate;padding-block:80px 120px;
  /* clip y no hidden: overflow:hidden convertiria la seccion en contenedor
     de scroll y el sticky de la columna izquierda dejaria de pegarse */
  overflow:clip;
  /* El tema oscuro va aqui y no por la clase .t-oscuro porque esa trae
     ademas su propio background y taparia el degradado. Sin estos tokens la
     miga heredaba los del tema claro -tinta sobre oscuro- y no se leia. */
  --txt:var(--blanco);--txt-2:var(--marca-300);--acento-txt:var(--acento-300);
  --linea-c:rgba(255,255,255,.16);
  /* el rojo se declara aqui: --fc-rojo solo existe en .pag-contacto y el
     body de esta pagina no lleva clase */
  --fc-rojo:#FF8080;
  color:var(--txt);
  background:
    /* dos focos: uno tras el selector y otro, mas tenue, tras el formulario */
    radial-gradient(48% 42% at 20% 22%,
      color-mix(in srgb,var(--icono-tinte) 11%,transparent),transparent 72%),
    radial-gradient(42% 38% at 82% 58%,
      color-mix(in srgb,var(--acento-500) 9%,transparent),transparent 74%),
    linear-gradient(180deg,
      var(--noche) 0%,
      color-mix(in srgb,var(--acento-900) 55%,var(--noche)) 42%,
      var(--marca-900) 100%)}
.pq2>.wrap{position:relative;z-index:1}

/* La rejilla. El 40% es literal y no un fr: la columna izquierda lleva el
   titular, que se mide contra su propio ancho, y con fr el titular cambiaria
   de tamano al cambiar la columna y la columna al cambiar el titular. */
.pq2-rejilla{display:grid;align-items:start;gap:80px;
  grid-template-columns:40% minmax(0,1fr)}
.pq2-col,.pq2-marco{min-width:0}
/* la izquierda acompana el scroll: el formulario es mas alto y sigue bajando */
.pq2-col{position:sticky;top:100px}
.pq2-red{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;opacity:.09;
  /* la red se apaga hacia el centro: alli manda el nodo */
  -webkit-mask-image:radial-gradient(50% 40% at 24% 36%,transparent 10%,#000 75%);
          mask-image:radial-gradient(50% 40% at 24% 36%,transparent 10%,#000 75%)}
/* el nodo: la red converge tras la columna de los tipos */
.pq2-nodo{position:absolute;top:36%;left:24%;z-index:0;
  width:clamp(220px,26vw,380px);aspect-ratio:1;translate:-50% -50%;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--icono-tinte) 30%,transparent) 0 2%,
    color-mix(in srgb,var(--icono-tinte) 10%,transparent) 14%,
    transparent 62%);
  animation:pq2-late 5.5s var(--e-estandar) infinite}
@keyframes pq2-late{0%,100%{opacity:.75;scale:1}50%{opacity:1;scale:1.06}}

.pq2 .miga{padding:0;margin-bottom:var(--e-16)}
/* la ruta se lee sin tener que buscarla, y la pagina actual manda */
.pq2 .miga ol{color:color-mix(in srgb,var(--blanco) 62%,transparent)}
.pq2 .miga a{color:inherit;text-underline-offset:3px}
.pq2 .miga a:hover{color:var(--blanco);text-decoration:underline}
.pq2 .miga [aria-current]{color:var(--icono-tinte);font-weight:600}
/* el encabezado, a lo ancho y centrado, por encima de las dos columnas */
.pq2-cab{max-width:840px;margin:0 auto var(--e-32);text-align:center}
.pq2-cab .etiqueta{display:inline-block;font-size:13px;letter-spacing:.2em}
.pq2-cab .etiqueta::before{margin:0 auto var(--e-16)}
/* 36 y no 44: a 44 el titular se comia dos renglones altos y empujaba las
   dos columnas fuera de la primera pantalla */
.pq2-cab h1{margin:var(--e-16) 0 0;font-size:clamp(24px,3vw,36px);
  font-weight:700;line-height:1.15;
  letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--blanco);
  text-wrap:balance}
.pq2-sub{margin:var(--e-16) auto 0;max-width:58ch;font-size:16px;line-height:1.6;
  color:color-mix(in srgb,var(--blanco) 60%,transparent)}

/* --- las cinco tarjetas: apiladas y en fila, son el selector de tipo ----
   Cuadro del icono, nombre con su explicacion y plazo, y el testigo de
   radio a la derecha. */
.pq2-tipos-eti{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:0 0 16px;
  font-family:var(--fuente-mono);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
.pq2-tipos-eti .pq2-error{flex:1 1 auto;min-height:0;text-align:right;
  font-family:var(--fuente);font-weight:400;letter-spacing:0;text-transform:none}
.pq2-tipos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pq2-tipo{position:relative;display:grid;width:100%;
  grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:16px;
  padding:14px 16px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:color-mix(in srgb,var(--blanco) 2%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 15%,transparent);
  border-radius:12px;
  transition:translate 240ms var(--e-estandar),
             border-color 240ms var(--e-estandar),
             background 240ms var(--e-estandar)}
.pq2-tipo:is(:hover,:focus-visible){translate:4px 0;
  background:color-mix(in srgb,var(--blanco) 4%,transparent);
  border-color:color-mix(in srgb,var(--icono-tinte) 40%,transparent)}
.pq2-tipo:focus-visible{outline:2px solid var(--icono-tinte);outline-offset:3px}
.pq2-tipo.on{border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 8%,transparent)}
.pq2-tipo-caja{display:grid;place-items:center;width:44px;height:44px;
  border-radius:10px;
  background:color-mix(in srgb,var(--icono-tinte) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 14%,transparent);
  transition:background 240ms var(--e-estandar)}
.pq2-tipo.on .pq2-tipo-caja{background:color-mix(in srgb,var(--icono-tinte) 16%,transparent)}
.pq2-tipo-ico{width:28px;height:28px;color:var(--icono-tinte);opacity:.6;
  transition:opacity 240ms var(--e-estandar)}
.pq2-tipo:is(:hover,:focus-visible) .pq2-tipo-ico,
.pq2-tipo.on .pq2-tipo-ico{opacity:1}
.pq2-tipo-txt{display:grid;gap:3px;min-width:0}
.pq2-tipo-n{font-size:15px;font-weight:600;color:var(--blanco)}
.pq2-tipo-d{font-size:13px;line-height:1.35;text-wrap:pretty;
  color:color-mix(in srgb,var(--blanco) 52%,transparent)}
.pq2-tipo-plazo{margin-top:2px;
  font-family:var(--fuente-mono);font-size:11px;line-height:1.3;letter-spacing:.04em;
  color:color-mix(in srgb,var(--icono-tinte) 38%,var(--blanco))}
/* El testigo es un reticulo: circulo vacio con dos escuadras en L en las
   esquinas opuestas. Las escuadras son cuatro fondos planos y no pseudos,
   que ya estan ocupados por el circulo y el punto. */
.pq2-tipo-radio{--ret:color-mix(in srgb,var(--icono-tinte) 25%,transparent);
  position:relative;width:28px;height:28px;
  background-image:linear-gradient(var(--ret),var(--ret)),
                   linear-gradient(var(--ret),var(--ret)),
                   linear-gradient(var(--ret),var(--ret)),
                   linear-gradient(var(--ret),var(--ret));
  background-size:6px 1.5px,1.5px 6px,6px 1.5px,1.5px 6px;
  background-position:0 0,0 0,100% 100%,100% 100%;
  background-repeat:no-repeat}
.pq2-tipo-radio::before{content:"";position:absolute;inset:3px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--icono-tinte) 30%,transparent);
  background:radial-gradient(circle,
    color-mix(in srgb,var(--icono-tinte) 3%,transparent),transparent 70%);
  transition:border-color 240ms var(--e-estandar)}
.pq2-tipo-radio::after{content:"";position:absolute;top:50%;left:50%;
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--icono-tinte);scale:0;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--icono-tinte) 60%,transparent));
  transition:scale 300ms cubic-bezier(.34,1.56,.64,1)}
.pq2-tipo.on .pq2-tipo-radio{--ret:var(--icono-tinte)}
.pq2-tipo.on .pq2-tipo-radio::before{border-color:var(--icono-tinte)}
/* el rebote primero y el latido despues: de ahi el retraso de la animacion */
.pq2-tipo.on .pq2-tipo-radio::after{scale:1;
  animation:pq2-pulso 2s var(--e-estandar) 300ms infinite}
@keyframes pq2-pulso{0%,100%{scale:1}50%{scale:1.15}}
/* si se intenta avanzar sin elegir: dos segundos en rojo, los pone app.js */
.pq2-tipos-mal .pq2-tipo{border-color:color-mix(in srgb,var(--fc-rojo) 55%,transparent)}

/* --- la caja de preguntas ---------------------------------------------- */
/* el contexto del tipo elegido, bajo las tarjetas */
.pq2-info{margin:16px 0 0;padding:14px 16px;
  border-radius:8px;font-size:14px;line-height:1.6;
  color:color-mix(in srgb,var(--blanco) 72%,transparent);
  background:color-mix(in srgb,var(--icono-tinte) 5%,transparent);
  border-left:3px solid var(--icono-tinte)}

/* --- el marco HUD: el mismo idioma que las fichas de politicas.html ---- */
.pq2-marco{position:relative;padding:24px;
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--blanco) 4%,transparent) 0%,
    color-mix(in srgb,var(--icono-tinte) 2%,transparent) 40%,
    color-mix(in srgb,var(--blanco) 1.5%,transparent) 100%);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 22%,transparent);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),
    calc(100% - 18px) 100%,0 100%,0 18px);
  /* el filete de luz del canto superior va por dentro: el clip-path recorta
     todo lo que sale de la forma, sombras incluidas, asi que la sombra
     exterior se queda en el drop-shadow del filtro */
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--icono-tinte) 8%,transparent);
  filter:drop-shadow(0 8px 40px color-mix(in srgb,var(--negro) 35%,transparent))}
.pq2-marco>.doc-esq{top:12px;left:12px;width:24px;height:24px;opacity:.5}
.pq2-marco>.doc-esq-fin{top:auto;left:auto;bottom:12px;right:12px;opacity:.5}
.pq2-barra{margin:0 0 10px;display:flex;align-items:center;gap:var(--e-8);
  font-family:var(--fuente-mono);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:color-mix(in srgb,var(--icono-tinte) 55%,var(--blanco))}
/* la barra de avance: retroalimentacion constante, ademas del stepper */
.pq2-avance{height:3px;margin-bottom:12px;border-radius:2px;overflow:hidden;
  background:color-mix(in srgb,var(--icono-tinte) 8%,transparent)}
.pq2-avance-b{--avance:.33;display:block;height:100%;border-radius:2px;
  width:calc(var(--avance) * 100%);background:var(--icono-tinte);
  transition:width 400ms var(--e-salida)}

/* el stepper: los tres pasos y la linea que los une hace de barra de avance */
.pq2-pasos{list-style:none;display:flex;align-items:center;margin:0 0 16px;padding:0}
.pq2-paso{position:relative;display:flex;align-items:center;gap:10px;flex:1 1 0;
  font-family:var(--fuente-mono);letter-spacing:.12em;
  text-transform:uppercase;font-size:11px;
  /* 35% daba 3.1:1 sobre la placa del marco: no llegaba a AA */
  color:color-mix(in srgb,var(--blanco) 52%,transparent);
  transition:color 300ms var(--e-estandar)}
/* la linea va del numero de este paso al del siguiente */
.pq2-paso:not(:last-child)::after{content:"";flex:1 1 auto;height:1px;
  margin-inline:10px;
  background:color-mix(in srgb,var(--icono-tinte) 18%,transparent);
  transition:background 300ms var(--e-estandar)}
.pq2-paso-n{flex:none;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;font-size:14px;
  border:1px solid color-mix(in srgb,var(--icono-tinte) 25%,transparent);
  transition:background 300ms var(--e-estandar),
             border-color 300ms var(--e-estandar),color 300ms var(--e-estandar)}
.pq2-paso.on{color:var(--blanco)}
.pq2-paso.on .pq2-paso-n{border-color:var(--icono-tinte);color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 14%,transparent)}
/* los pasos ya cumplidos: el numero macizo y la linea encendida */
.pq2-paso.ya{color:color-mix(in srgb,var(--blanco) 60%,transparent)}
.pq2-paso.ya .pq2-paso-n{border-color:var(--icono-tinte);color:var(--noche);
  background:var(--icono-tinte)}
.pq2-paso.ya::after{background:var(--icono-tinte)}

/* el distintivo del tipo elegido, dentro del formulario */
/* al lado del rotulo y no en un renglon propio: asi no cuesta alto cuando
   aparece, que es justo cuando el formulario ya esta en marcha */
.pq2-elegido{display:inline-flex;align-items:center;gap:8px;margin:0 0 0 auto;
  padding:5px 12px;border-radius:6px;
  font-family:var(--fuente-mono);font-size:12px;letter-spacing:.08em;
  text-transform:none;
  color:var(--blanco);
  background:color-mix(in srgb,var(--icono-tinte) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 30%,transparent);
  animation:aparece 200ms var(--e-estandar)}
.pq2-elegido-ico{flex:none;width:16px;height:16px;color:var(--icono-tinte)}
.pq2-elegido-ok{color:var(--icono-tinte)}

/* La hoja tiene una regla global para <form> con margen, hueco entre filas
   y ancho maximo; sirve para los formularios sueltos del sitio y aqui
   sobraba por los cuatro costados. contacto.html la anula en .fc-form y este
   formulario no tenia equivalente: de ahi el aire de mas. */
#pq2-form{display:block;gap:0;max-width:none;margin:0}
/* cada paso es solo un grupo de campos: el marco lo pone .pq2-marco */
.pq2-p{position:relative;margin:0}
/* asunto, descripcion e interruptor se leen como un solo bloque: "tu
   solicitud". Sueltos parecian tres preguntas sin relacion. */
.pq2-grupo{padding:12px;border-radius:8px;
  background:color-mix(in srgb,var(--blanco) 1.5%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 8%,transparent)}
.pq2-grupo>.pq2-campo:first-child{margin-top:0}
/* el divisor ya pone la separacion: el margen del campo la duplicaba */
.pq2-div+.pq2-campo{margin-top:0}
/* el divisor es la separacion entre bloques: 10+10 deja los 20 de rigor */
.pq2-div{height:1px;margin:10px 0 9px;border:0;
  background:color-mix(in srgb,var(--icono-tinte) 8%,transparent)}
/* el que precede al interruptor abre un poco mas: cierra el bloque */
.pq2-div:has(+.pq2-switch){margin:12px 0 11px}
.pq2-p[hidden]{display:none}
.pq2-entra{animation:pq2-entra 250ms var(--e-salida)}
@keyframes pq2-entra{from{opacity:0;translate:0 14px}}
/* el rotulo que separa los tres bloques de campos */
.pq2-rotulo{display:flex;align-items:center;gap:10px;
  margin:28px 0 0;padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb,var(--icono-tinte) 14%,transparent);
  font-family:var(--fuente-mono);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
.pq2-rotulo:first-child,.pq2-rotulo-1{margin-top:0}
.pq2-rotulo::before{content:"";flex:none;width:6px;height:6px;
  background:color-mix(in srgb,var(--icono-tinte) 70%,transparent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* el campo: sin caja, solo una linea que se enciende */
.pq2-campo{position:relative;margin:20px 0 0;display:grid;min-width:0}
/* la etiqueta es tecnica: mono, versales y cian, para que pese mas que el
   marcador de posicion del campo */
.pq2-campo>label{margin-bottom:4px;
  font-family:var(--fuente-mono);font-size:15px;font-weight:700;line-height:1.35;
  letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 60%,var(--blanco))}
.pq2-req{color:var(--icono-tinte)}
/* la aclaracion, en la de texto y apagada: acompana, no compite */
.pq2-ayuda{margin:0 0 8px;font-family:var(--fuente);font-size:13px;line-height:1.5;
  /* 55 y no 45: a 45 se quedaba en 4.2:1 sobre la placa del marco */
  color:color-mix(in srgb,var(--blanco) 55%,transparent)}
.pq2-ayuda-2{margin:var(--e-16) 0 0}
/* Caja de verdad, no una linea suelta. El bisel va en las esquinas
   contrarias a las de contacto (arriba-derecha y abajo-izquierda): mismo
   idioma, distinta pagina. */
.pq2-campo :is(input,select,textarea){
  width:100%;min-height:48px;padding:14px 16px;
  font-family:var(--fuente);font-size:15px;line-height:1.4;color:var(--blanco);
  background:color-mix(in srgb,var(--blanco) 3%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 18%,transparent);
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),
    calc(100% - 8px) 100%,0 100%,0 8px);
  transition:border-color 200ms var(--e-estandar),
             background 200ms var(--e-estandar),
             box-shadow 200ms var(--e-estandar)}
.pq2-campo textarea{height:96px;min-height:96px;resize:vertical;line-height:1.6}
/* el contador y el aviso comparten renglon, uno a cada lado: apilados se
   comian 23px de hueco por nada */
.pq2-campo-area{grid-template-columns:minmax(0,1fr) auto}
.pq2-campo-area>:is(label,.pq2-ayuda,textarea){grid-column:1 / -1}
.pq2-campo-area .pq2-error{grid-column:1}
.pq2-campo-area .pq2-cuenta{grid-column:2;align-self:center}
/* El anillo de foco va por DENTRO. Un box-shadow exterior no se veria: el
   clip-path recorta todo lo que sale de la forma, sombras incluidas. */
.pq2-campo :is(input,select,textarea):focus{outline:none;
  border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 6%,transparent);
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--icono-tinte) 16%,transparent)}
.pq2-campo :is(input,textarea)::placeholder{
  /* apagado a proposito: la pista tiene que pesar menos que lo escrito */
  font-size:15px;color:color-mix(in srgb,var(--blanco) 28%,transparent)}
/* El autorrelleno de Chrome impone su propio fondo y solo lo pisa una sombra
   interior enorme. La transicion de 9999s evita el destello del color nativo. */
.pq2-campo :is(input,select,textarea):is(:-webkit-autofill,
  :-webkit-autofill:hover,:-webkit-autofill:focus){
  -webkit-text-fill-color:var(--blanco);
  caret-color:var(--blanco);
  -webkit-box-shadow:0 0 0 1000px color-mix(in srgb,var(--blanco) 3%,var(--marca-900)) inset;
          box-shadow:0 0 0 1000px color-mix(in srgb,var(--blanco) 3%,var(--marca-900)) inset;
  transition:background-color 9999s ease-in-out 0s}
.pq2-campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2348A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.pq2-campo select:invalid{font-size:15px;
  color:color-mix(in srgb,var(--blanco) 28%,transparent)}
.pq2-campo select option{background:var(--marca-900);color:var(--blanco)}
.pq2-dos{display:grid;gap:20px;margin-top:20px}
.pq2-dos .pq2-campo{margin:0}
@media (min-width:600px){
  /* el tipo de documento pide menos sitio que el numero, y el correo mas
     que el telefono */
  .pq2-dos{grid-template-columns:1fr 1fr;gap:20px}
  .pq2-dos:has(.pq2-campo-corto){grid-template-columns:minmax(0,.45fr) minmax(0,1fr)}
}
/* el prefijo fijo comparte celda de rejilla con el campo, asi no depende de
   ninguna altura calculada a mano */
.pq2-campo-tel .pq2-pre{grid-row:2;grid-column:1;align-self:center;justify-self:start;
  padding-left:16px;font-size:15px;color:var(--blanco);pointer-events:none}
.pq2-campo-tel input{grid-row:2;grid-column:1;padding-left:50px}
/* --- el medio de respuesta: dos botones, no un desplegable ------------- */
.pq2-rotulo{margin:var(--e-32) 0 var(--e-16);font-size:16px;font-weight:600;
  line-height:1.4;color:var(--blanco)}
.pq2-medios{display:grid;gap:12px}
@media (min-width:600px){.pq2-medios{grid-template-columns:1fr 1fr}}
.pq2-medio{display:flex;align-items:center;gap:12px;padding:16px 18px;
  cursor:pointer;border-radius:10px;font-size:15px;
  color:color-mix(in srgb,var(--blanco) 70%,transparent);
  background:color-mix(in srgb,var(--blanco) 2%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 16%,transparent);
  transition:border-color 200ms var(--e-estandar),background 200ms var(--e-estandar)}
.pq2-medio svg{flex:none;width:22px;height:22px;color:var(--icono-tinte);opacity:.55;
  transition:opacity 200ms var(--e-estandar)}
.pq2-medio input{position:absolute;opacity:0;width:0;height:0}
.pq2-medio:hover{border-color:color-mix(in srgb,var(--icono-tinte) 34%,transparent)}
.pq2-medio:has(:checked){color:var(--blanco);border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 8%,transparent)}
.pq2-medio:has(:checked) svg{opacity:1}
.pq2-medio:has(:focus-visible){outline:2px solid var(--icono-tinte);outline-offset:3px}
.pq2-nota-2{margin-top:var(--e-16)}
/* rojo mientras no se llega al minimo; apagado en cuanto se cumple */
.pq2-cuenta{justify-self:end;margin-top:6px;
  font-family:var(--fuente-mono);font-size:12px;color:var(--fc-rojo)}
.pq2-cuenta.ok{color:color-mix(in srgb,var(--blanco) 55%,transparent)}
/* la altura de un renglon esta siempre reservada: el aviso no mueve nada */
/* Vacio no ocupa: un min-height fijo reservaba 26px bajo CADA campo y era
   el grueso del hueco entre uno y el siguiente. El aire solo aparece cuando
   hay algo que decir. En el area de texto ni se nota, porque comparte
   renglon con el contador, que si esta siempre. */
.pq2-error{margin:0;min-height:0;font-size:13px;line-height:1.3;
  color:var(--fc-rojo)}
.pq2-error:not(:empty){margin-top:6px}
/* el campo que falla se sacude */
.pq2-mal :is(input,select,textarea){border-color:var(--fc-rojo)}
.pq2-mal{animation:pq2-sacude 400ms var(--e-estandar)}
@keyframes pq2-sacude{
  0%,100%{translate:0}20%{translate:-8px}40%{translate:8px}
  60%{translate:-5px}80%{translate:5px}}
/* El interruptor: rectangular y no de pastilla, que es lo que lo aleja del
   switch generico de movil y lo acerca al resto de la pagina. */
.pq2-switch{display:flex;align-items:center;gap:14px;cursor:pointer}
.pq2-switch input{position:absolute;opacity:0;width:0;height:0}
.pq2-switch-v{flex:none;position:relative;width:48px;height:24px;
  border-radius:4px;
  background:color-mix(in srgb,var(--blanco) 3%,transparent);
  border:1.5px solid color-mix(in srgb,var(--icono-tinte) 30%,transparent);
  transition:background 250ms var(--e-estandar),border-color 250ms var(--e-estandar)}
/* el candado vive en la pista, sobre el sitio final del pulsador: asi puede
   fundirse, que una imagen de fondo del propio pulsador no podria */
.pq2-switch-v::before{content:"";position:absolute;top:50%;right:8px;z-index:1;
  width:10px;height:10px;margin-top:-5px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0F14' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='11' rx='2'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E")
    center/contain no-repeat;
  transition:opacity 200ms var(--e-estandar) 150ms}
.pq2-switch-v::after{content:"";position:absolute;top:50%;left:2px;
  width:18px;height:18px;margin-top:-9px;border-radius:3px;
  background:color-mix(in srgb,var(--blanco) 50%,transparent);
  box-shadow:0 0 4px color-mix(in srgb,var(--negro) 30%,transparent);
  transition:translate 250ms cubic-bezier(.22,1,.36,1),
             background 250ms var(--e-estandar),box-shadow 250ms var(--e-estandar)}
.pq2-switch input:checked+.pq2-switch-v{border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 15%,transparent)}
.pq2-switch input:checked+.pq2-switch-v::before{opacity:1}
.pq2-switch input:checked+.pq2-switch-v::after{translate:24px 0;
  background:var(--icono-tinte);
  box-shadow:0 0 10px color-mix(in srgb,var(--icono-tinte) 50%,transparent)}
.pq2-switch input:focus-visible+.pq2-switch-v{outline:2px solid var(--icono-tinte);
  outline-offset:3px}
.pq2-switch-txt{display:grid;gap:4px;min-width:0}
.pq2-switch-n{font-size:14px;font-weight:500;color:var(--blanco)}
.pq2-switch-d{font-size:12px;line-height:1.4;
  color:color-mix(in srgb,var(--blanco) 55%,transparent)}

/* --- botones ----------------------------------------------------------- */
.pq2-nav{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
/* tras el bloque agrupado, sus 16px de relleno ya cuentan */
.pq2-grupo+.pq2-nav{margin-top:12px}
.pq2-b{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-width:200px;padding:14px 32px;border-radius:0;cursor:pointer;
  font-family:var(--fuente-mono);font-size:15px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--blanco);
  background:color-mix(in srgb,var(--icono-tinte) 12%,transparent);
  border:1.5px solid color-mix(in srgb,var(--icono-tinte) 50%,transparent);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,
    8px 100%,0 calc(100% - 8px));
  transition:background 220ms var(--e-estandar),border-color 220ms var(--e-estandar),
             translate 220ms var(--e-estandar),scale 220ms var(--e-estandar),
             opacity 200ms var(--e-estandar)}
.pq2-b:is(:hover,:focus-visible){translate:0 -2px;
  background:color-mix(in srgb,var(--icono-tinte) 20%,transparent);
  border-color:var(--icono-tinte)}
/* El anillo de foco va por dentro y la sombra de hover se queda fuera: el
   clip-path recorta box-shadow y outline por igual. */
.pq2-b:focus-visible{outline:none;
  box-shadow:inset 0 0 0 2px var(--icono-tinte)}
.pq2-b:active{scale:.98;translate:0}
/* la flecha de avanzar acompana el gesto; la de volver no, que apunta atras */
.pq2-b>span:last-child{transition:translate 220ms var(--e-estandar)}
.pq2-b:not(.pq2-b-2):is(:hover,:focus-visible)>span:last-child{translate:5px 0}
/* el secundario no compite con el principal */
.pq2-b-2{min-width:0;padding:14px 24px;font-size:14px;letter-spacing:.12em}
.pq2-b-2{background:transparent;
  border-color:color-mix(in srgb,var(--icono-tinte) 22%,transparent);margin-right:auto}

/* --- el resumen del paso 3 --------------------------------------------- */
.pq2-ticket{margin-top:12px;padding:20px 22px;border-radius:12px;
  background:color-mix(in srgb,var(--blanco) 4%,transparent);
  border:1px dashed color-mix(in srgb,var(--icono-tinte) 30%,transparent)}
.pq2-ticket dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;margin:0}
.pq2-ticket dt{font-family:var(--fuente-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding-top:3px;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
.pq2-ticket dd{margin:0;font-size:15px;line-height:1.4;color:var(--blanco);
  overflow-wrap:anywhere}
.pq2-anon-aviso{margin:0 0 var(--e-8);padding:14px 16px;border-radius:8px;
  font-size:14px;line-height:1.5;
  color:color-mix(in srgb,var(--blanco) 62%,transparent);
  background:color-mix(in srgb,var(--blanco) 3%,transparent);
  border:1px dashed color-mix(in srgb,var(--icono-tinte) 22%,transparent)}
.pq2-check{display:flex;align-items:flex-start;gap:12px;margin-top:24px;
  font-size:15px;line-height:1.5;color:var(--blanco);cursor:pointer}
.pq2-check input{appearance:none;flex:none;width:22px;height:22px;aspect-ratio:1;
  margin:2px 0 0;cursor:pointer;background:transparent;border-radius:4px;
  border:1.5px solid color-mix(in srgb,var(--icono-tinte) 40%,transparent);
  transition:background 200ms var(--e-estandar),border-color 200ms var(--e-estandar)}
.pq2-check input:checked{border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 20%,transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.2 5 9.7 12.5 1.8' fill='none' stroke='%2348A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/14px no-repeat}
.pq2-check input:focus-visible{outline:2px solid var(--icono-tinte);outline-offset:2px}
.pq2-check a{color:var(--icono-tinte);text-underline-offset:3px}
.pq2-enviar{width:100%;height:60px;margin-top:var(--e-24);font-size:16px}
.pq2-punto{display:none;width:8px;height:8px;border-radius:50%;background:var(--blanco);
  animation:doc-late 1.1s var(--e-estandar) infinite}
.pq2-enviar[aria-busy="true"] .pq2-punto{display:block}
.pq2-fallo{margin:var(--e-16) 0 0;font-size:14px;color:var(--fc-rojo)}
.pq2-fallo a{color:inherit;text-underline-offset:3px}
.pq2-fallo-por{display:block;margin-top:4px;font-family:var(--fuente-mono);
  font-size:12px;color:color-mix(in srgb,var(--blanco) 55%,transparent)}

/* --- la pantalla de exito ---------------------------------------------- */
.pq2-hecho{margin:var(--e-24) 0 0;text-align:center;
  display:grid;justify-items:center;gap:var(--e-24)}
.pq2-hecho-ico{width:80px;height:80px;color:var(--icono-tinte)}
.pq2-hecho-c{opacity:.35}
.pq2-hecho-v{stroke-dasharray:60;stroke-dashoffset:60;
  animation:pq2-traza 600ms var(--e-salida) forwards}
@keyframes pq2-traza{to{stroke-dashoffset:0}}
.pq2-hecho h2{margin:0;font-size:clamp(24px,3vw,32px);font-weight:700;
  color:var(--blanco);text-wrap:balance;
  animation:aparece 400ms var(--e-salida) 400ms backwards}
/* el comprobante: es lo que se guarda o se fotografia, asi que se lee como
   un recibo y no como parte de la pagina */
.pq2-recibo{width:100%;text-align:left;padding:28px 30px;border-radius:14px;
  background:color-mix(in srgb,var(--blanco) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 26%,transparent)}
.pq2-recibo-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  margin:0 0 var(--e-24);padding-bottom:14px;
  border-bottom:1px solid color-mix(in srgb,var(--icono-tinte) 16%,transparent);
  font-family:var(--fuente-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 40%,var(--blanco))}
.pq2-recibo-cab span:first-child{color:var(--blanco);font-weight:700}
.pq2-recibo-d{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0 0 var(--e-24)}
.pq2-recibo-d dt{font-family:var(--fuente-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding-top:4px;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
.pq2-recibo-d dd{margin:0;font-size:16px;line-height:1.3;color:var(--blanco);
  overflow-wrap:anywhere}
.pq2-rad-n{font-family:var(--fuente-mono);font-size:19px;letter-spacing:.06em;
  color:color-mix(in srgb,var(--icono-tinte) 35%,var(--blanco))}
.pq2-recibo-t{margin:0 0 var(--e-16);padding-top:var(--e-16);
  border-top:1px dashed color-mix(in srgb,var(--icono-tinte) 22%,transparent);
  font-family:var(--fuente-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco))}
.pq2-hecho-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pq2-hecho-nav .pq2-b-2{margin-right:0}
.pq2-copiar.copiado{border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 26%,transparent)}
.pq2-sigue{list-style:none;margin:0;padding:0;display:grid;gap:14px;text-align:left}
.pq2-sigue li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  font-size:15px;line-height:1.5;
  color:color-mix(in srgb,var(--blanco) 66%,transparent)}
.pq2-sigue-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-family:var(--fuente-mono);font-size:13px;color:var(--icono-tinte);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 40%,transparent)}

@media (max-width:1199px){
  .pq2-rejilla{grid-template-columns:36% minmax(0,1fr);gap:56px}
  .pq2-marco{padding:32px}
}
@media (max-width:1023px){
  /* una sola columna: el texto, los tipos en fila y luego el formulario */
  .pq2-rejilla{grid-template-columns:1fr;gap:var(--e-48)}
  .pq2-col{position:static}
  .pq2-cab{margin-bottom:var(--e-32)}
  /* en fila caben los cinco, pero sin la explicacion ni el testigo */
  .pq2-tipos{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .pq2-tipo{grid-template-columns:1fr;justify-items:center;gap:10px;
    padding:16px 10px;text-align:center}
  .pq2-tipo-txt{justify-items:center}
  .pq2-tipo-d,.pq2-tipo-radio{display:none}
  .pq2-tipo:is(:hover,:focus-visible){translate:0 -3px}
  .pq2-tipos-eti .pq2-error{text-align:left;flex:1 0 100%}
}
@media (max-width:767px){
  /* los cinco no caben de frente: se deslizan de lado */
  .pq2-tipos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:10px;padding-bottom:6px}
  .pq2-tipo{flex:none;width:112px;scroll-snap-align:start;padding:14px 8px}
  .pq2-tipo-n{font-size:14px;text-wrap:balance}
  .pq2-marco{padding:20px}
  .pq2-grupo{padding:12px}
  /* solo los circulos y las lineas: los rotulos no caben en una linea */
  .pq2-paso{flex:0 1 auto;gap:0}
  .pq2-paso-n{width:28px;height:28px}
  .pq2-paso:not(:last-child){flex:1 1 auto}
  .pq2-paso:not(:last-child)::after{margin-inline:8px}
  .pq2-info{font-size:13px}
  .pq2-recibo{padding:22px 20px}
  .pq2-hecho-nav{flex-direction:column;align-items:stretch}
  .pq2-rotulo{margin-top:var(--e-32)}
  .pq2-campo>label{font-size:14px;letter-spacing:.1em}
  /* los biseles de 8 y 10px no se leen a este ancho: una esquina redonda
     dice lo mismo y no come area de pulsacion */
  .pq2-campo :is(input,select,textarea),.pq2-b{clip-path:none;border-radius:4px}
  /* 16px y no 15: por debajo de 16 iOS hace zoom al enfocar el campo */
  .pq2-campo :is(input,select,textarea){padding:12px 14px;font-size:16px}
  .pq2-campo textarea{min-height:100px}
  .pq2-campo-tel input{padding-left:48px}
  .pq2-campo-tel .pq2-pre{padding-left:14px;font-size:16px}
  .pq2-nav{flex-direction:column-reverse}
  .pq2-b,.pq2-b-2{width:100%;min-width:0;padding:14px 20px}
  .pq2-b-2{margin-right:0}
  .pq2-switch{gap:12px}
  .pq2-ticket dl{grid-template-columns:1fr;gap:2px}
  .pq2-ticket dd{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .pq2-nodo,.pq2-mal,.pq2-punto,.pq2-hecho h2,.pq2-entra,
  .pq2-elegido{animation:none}
  .pq2-hecho-v{stroke-dashoffset:0;animation:none}
  .pq2-tipo-radio::after{animation:none}
  .pq2-tipo,.pq2-tipo-ico,.pq2-tipo-radio::after,.pq2-paso,.pq2-paso-n,.pq2-b,.pq2-switch-v,
  .pq2-switch-v::after,.pq2-switch-v::before,.pq2-medio,.pq2-medio svg{transition:none}
  .pq2-tipo:is(:hover,:focus-visible){translate:none}
}

/* --- el mapa: mismo marco que las fichas ------------------------------
   El embed de Google es claro y sobre la placa cantaria; se invierte y se
   gira el tono para dejarlo en la gama fria del sitio. */
.ct-mapa{position:relative;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--icono-tinte) 18%,transparent);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),
    calc(100% - 14px) 100%,0 100%,0 14px)}
.ct-mapa>.doc-esq{top:6px;left:6px;width:16px;height:16px;border-width:1px;z-index:2;
  pointer-events:none}
.ct-mapa-lienzo{position:relative;display:block;height:160px}
.ct-mapa-lienzo iframe{display:block;width:100%;height:100%;border:0;
  /* el mapa de Google es claro: se dessatura, se invierte y se lleva al azul
     de la placa. Son cuatro perillas; si queda sucio, bajar el invert. */
  filter:grayscale(.4) invert(.92) hue-rotate(185deg) contrast(.92) brightness(1.05)}
/* La pastilla de "abrir en Maps" la monta Google dentro del iframe y no hay
   CSS que la alcance: esta capa se queda con el clic y lleva a la misma ruta
   que el boton de abajo, que es quien pone la version accesible. */
.ct-mapa-capa{position:absolute;inset:0;z-index:1}
/* El boton es el canto de abajo del marco: sin borde propio ni bisel. Va
   doblemente escrito (.ct-mapa .ct-mapa-b) porque .hb y .hb-2 se definen mas
   abajo en la hoja y con una sola clase le ganarian. */
.ct-mapa .ct-mapa-b{justify-content:center;width:100%;clip-path:none;border:0;
  border-top:1px solid color-mix(in srgb,var(--icono-tinte) 15%,transparent);
  padding:18px;font-size:13px;
  background:color-mix(in srgb,var(--icono-tinte) 6%,transparent)}
.ct-mapa .ct-mapa-b:is(:hover,:focus-visible){
  background:color-mix(in srgb,var(--icono-tinte) 14%,transparent)}
.ct-mapa .ct-mapa-b:focus-visible{box-shadow:inset 0 0 0 2px var(--icono-tinte)}

@media (min-width:768px){
  .fc-fila{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  .ct-val{font-size:16px}
}
@media (max-width:767px){
  .fc{padding:24px}
  .fc .fc-enviar{justify-self:stretch;width:100%;min-width:0;padding:18px 24px}
  .ct-dato-in{padding:14px 16px;gap:12px}
  .ct-mapa-lienzo{height:160px}
  :is(.pag-contacto,.pag-asesoria) .eq-portada{padding-block:var(--e-64)}
  .ct-sep{margin:32px 0}
}
@media (prefers-reduced-motion:reduce){
  .ct-dato-in,.ct-ico,.ct-flecha,
  .fc-campo :is(input,select,textarea){transition:none}
  :is(a,button).ct-dato-in:is(:hover,:focus-visible) .ct-flecha{translate:none}
  :is(a,button).ct-dato-in:is(:hover,:focus-visible){translate:none}
  .fc-punto{animation:none}
}

/* ---------- pie ---------- */
/* El pie se despega de lo que venga encima, que en las paginas oscuras es
   del mismo azul y no se veia donde acababa una cosa y empezaba la otra:
   un filete cian marca el arranque y el fondo se hunde hacia el azul
   profundo del manual. Mismo tratamiento que el pie de equipo.html. */
footer{position:relative;color:var(--marca-200);
  background:linear-gradient(180deg,var(--noche) 0%,
    color-mix(in srgb,var(--acento-900) 70%,var(--noche)) 45%,
    var(--acento-900) 100%);
  padding-block:var(--e-64) var(--e-32);font-size:var(--t-body-sm);
  --linea-c:rgba(255,255,255,.16)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acento-400) 18%,
    var(--icono-tinte) 50%,var(--acento-400) 82%,transparent);opacity:.7}
.pie{display:grid;gap:var(--e-48);padding-bottom:var(--e-48);
  border-bottom:1px solid var(--linea-c);justify-items:center;text-align:center}
.pie-marca{display:grid;justify-items:center}
.pie-marca img{height:var(--e-64);margin-bottom:var(--e-24);
  filter:brightness(0) invert(1);opacity:.9}
.pie-marca p{margin:0;max-width:44ch}
/* --- las redes, en el pie -----------------------------------------------
   Aqui y no en la cabecera: se encuentran cuando se buscan y no compiten con
   la navegacion. Fichas cuadradas con el mismo bisel que el resto del sitio;
   apagadas en reposo y encendidas al pasar por encima. */
/* --- la barra fija del canto derecho ------------------------------------
   Pegada al borde y siempre a la vista, pero de 44px y fuera de la columna
   de lectura: no tapa contenido. Debajo de la cabecera (30) y del boton de
   volver arriba (40), que vive en la esquina de abajo y no la cruza.
   Sin clip-path a proposito: recortaria el rotulo que sale por la izquierda. */
.redes{position:fixed;right:0;top:50%;translate:0 -50%;z-index:20;
  list-style:none;margin:0;padding:6px 0;display:grid;gap:2px;
  background:color-mix(in srgb,var(--noche) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 20%,transparent);
  border-right:0}
/* el canto izquierdo: un filete que recorre la barra de arriba abajo */
.redes::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--icono-tinte),transparent);
  background-size:100% 55%;background-repeat:no-repeat;
  animation:redes-recorre 5s var(--e-estandar) infinite}
@keyframes redes-recorre{
  0%,100%{background-position:0 -60%}50%{background-position:0 160%}}

/* cada ficha entra desde el borde, una detras de otra */
.redes li{position:relative;
  animation:redes-entra 480ms var(--e-salida) calc(var(--i) * 90ms) backwards}
@keyframes redes-entra{from{opacity:0;translate:30px 0}}

.redes a{position:relative;display:grid;place-items:center;width:44px;height:40px;
  color:color-mix(in srgb,var(--icono-tinte) 50%,var(--blanco));
  transition:background 240ms var(--e-estandar),color 240ms var(--e-estandar)}
.redes svg{width:20px;height:20px;
  transition:scale 240ms cubic-bezier(.34,1.56,.64,1),filter 240ms var(--e-estandar)}
/* el filete de acento crece desde el centro al pasar por encima */
.redes-filete{position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--icono-tinte);scale:1 0;
  transition:scale 240ms var(--e-salida)}
.redes a:is(:hover,:focus-visible){color:var(--blanco);
  background:color-mix(in srgb,var(--icono-tinte) 18%,transparent)}
.redes a:is(:hover,:focus-visible) .redes-filete{scale:1 1}
.redes a:is(:hover,:focus-visible) svg{scale:1.12;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--icono-tinte) 55%,transparent))}
.redes a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--icono-tinte)}

/* el nombre sale por la izquierda; el texto lo pone data-red del <li> */
.redes li::after{content:attr(data-red);position:absolute;right:calc(100% + 10px);
  top:50%;translate:10px -50%;opacity:0;pointer-events:none;white-space:nowrap;
  padding:6px 12px;
  font-family:var(--fuente-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blanco);
  background:color-mix(in srgb,var(--noche) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 35%,transparent);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),
    calc(100% - 6px) 100%,0 100%,0 6px);
  transition:opacity 240ms var(--e-estandar),translate 240ms var(--e-salida)}
.redes li:has(a:is(:hover,:focus-visible))::after{opacity:1;translate:0 -50%}

/* en pantallas estrechas la barra se comeria el margen del texto: alli manda
   la del pie, que es la misma lista */
@media (max-width:1023px){.redes{display:none}}
@media (min-width:1024px){.pie-redes{display:none}}
@media (prefers-reduced-motion:reduce){
  .redes li,.redes::before{animation:none}
  .redes a,.redes svg,.redes-filete,.redes li::after{transition:none}
}

.pie-redes{list-style:none;display:flex;gap:12px;margin:var(--e-24) 0 0;padding:0}
.pie-redes a{display:grid;place-items:center;width:42px;height:42px;
  color:color-mix(in srgb,var(--icono-tinte) 45%,var(--blanco));
  background:color-mix(in srgb,var(--blanco) 3%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 22%,transparent);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),
    calc(100% - 8px) 100%,0 100%,0 8px);
  transition:background 220ms var(--e-estandar),border-color 220ms var(--e-estandar),
             color 220ms var(--e-estandar),translate 220ms var(--e-estandar)}
.pie-redes svg{width:20px;height:20px;
  transition:scale 240ms cubic-bezier(.34,1.56,.64,1)}
.pie-redes a:is(:hover,:focus-visible) svg{scale:1.12}
.pie-redes a:is(:hover,:focus-visible){translate:0 -3px;color:var(--blanco);
  border-color:var(--icono-tinte);
  background:color-mix(in srgb,var(--icono-tinte) 16%,transparent)}
/* el anillo va por dentro: un outline lo recortaria el bisel */
.pie-redes a:focus-visible{outline:none;
  box-shadow:inset 0 0 0 2px var(--icono-tinte)}
@media (prefers-reduced-motion:reduce){.pie-redes a{transition:none}}
.pie-cols{width:100%;display:grid;gap:var(--e-48);justify-items:center}
.pie h3{font-family:var(--fuente-titulo);font-size:var(--t-caption);
  letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--blanco);
  margin-bottom:var(--e-16)}
.pie-nav{display:grid;gap:var(--e-8);align-content:start}
.pie-nav a,.pie-datos a{display:inline-flex;align-items:center;min-height:var(--e-32);
  text-decoration:none;transition:color var(--d-rapida) var(--e-estandar)}
.pie-nav a:hover,.pie-datos a:hover{color:var(--blanco)}
.pie-datos{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-8);
  align-content:start}
.pie-fin{display:grid;gap:var(--e-16);padding-top:var(--e-24);text-align:center;
  font-size:var(--t-body-sm)}

/* Creditos de las fotos: discretos y plegados. Solo aparecen en las paginas que
   llevan fotos de tarjeta. */
.creditos{justify-self:center;max-width:64ch;text-align:left;
  font-size:var(--t-caption);color:var(--neutro-400)}
.creditos summary{text-align:center;cursor:pointer;list-style:none;
  color:var(--neutro-400);opacity:.75;
  transition:opacity var(--d-rapida) var(--e-estandar)}
.creditos summary::-webkit-details-marker{display:none}
.creditos summary::after{content:" +"}
.creditos[open] summary::after{content:" \2212 "}
.creditos summary:hover{opacity:1}
.creditos ul{list-style:none;margin:var(--e-16) 0 0;padding:0;display:grid;gap:var(--e-8)}
.creditos a{color:inherit;text-underline-offset:3px}
.creditos a:hover{color:var(--blanco)}
.creditos p{margin:var(--e-16) 0 0;opacity:.8}
.pie-fin p{margin:0;color:var(--neutro-400)}

.arriba{position:fixed;right:var(--e-24);bottom:var(--e-24);z-index:40;
  width:var(--toque-min);height:var(--toque-min);padding:0;border:0;border-radius:50%;
  cursor:pointer;background:var(--marca-500);color:var(--blanco);
  font:400 1.3rem/1 var(--fuente);opacity:0;pointer-events:none;
  transform:translateY(var(--e-8));box-shadow:var(--sombra-2);
  transition:opacity var(--d-media) var(--e-estandar),
             transform var(--d-media) var(--e-estandar),
             background var(--d-rapida) var(--e-estandar)}
.arriba.on{opacity:1;pointer-events:auto;transform:none}
.arriba:hover{background:var(--acento-500)}

/* ---------- desplegable del menu ---------- */
.m-item,.m-sub{position:relative;display:flex}
.m-tit{display:inline-flex;align-items:center;gap:var(--e-8);min-height:var(--toque-min);
  padding:0;border:0;background:none;cursor:pointer;color:var(--marca-200);
  font-family:var(--fuente-titulo);font-size:var(--t-body-sm);
  transition:color var(--d-rapida) var(--e-estandar)}
.m-tit:hover,.m-tit[aria-expanded="true"],.m-tit.on{color:var(--blanco)}
.m-tit.on{font-weight:700}
.caret{width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--d-media) var(--e-estandar)}
.m-tit[aria-expanded="true"] .caret{transform:rotate(-135deg) translate(-3px,-3px)}
.submenu{position:absolute;top:100%;left:calc(-1*var(--e-16));z-index:40;
  min-width:16rem;display:grid;padding:var(--e-8) 0;
  background:var(--marca-700);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-2);box-shadow:var(--sombra-2)}
.submenu[hidden]{display:none}
.submenu a{display:flex;align-items:center;min-height:var(--toque-min);
  padding:0 var(--e-24);color:var(--marca-200);text-decoration:none;
  font-family:var(--fuente-titulo);font-size:var(--t-body-sm);
  transition:background var(--d-rapida) var(--e-estandar),
             color var(--d-rapida) var(--e-estandar)}
.submenu a::after{display:none}
.submenu a:hover{background:rgba(255,255,255,.08);color:var(--blanco)}
.submenu strong{font-weight:700;color:var(--blanco)}

/* ---------- breadcrumbs ---------- */
.miga{padding-block:var(--e-24) 0}
.miga ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e-8);margin:0;padding:0;
  font-size:var(--t-body-sm);color:var(--txt-2)}
.miga li{display:flex;align-items:center;gap:var(--e-8)}
.miga li+li::before{content:"/";color:var(--txt-2);opacity:.6}
.miga a{color:var(--txt-2);text-decoration:none;
  transition:color var(--d-rapida) var(--e-estandar)}
.miga a:hover{color:var(--txt)}
.miga [aria-current]{color:var(--txt);font-weight:600}

/* ---------- pie a cuatro columnas ---------- */
.pie-col{display:grid;gap:var(--e-8);align-content:start;justify-items:center;
  list-style:none;margin:0;padding:0}
.pie-col a.on{color:var(--blanco);font-weight:700}
.pie-col a{display:inline-flex;align-items:center;min-height:var(--e-32);
  text-decoration:none;transition:color var(--d-rapida) var(--e-estandar)}
.pie-col a:hover{color:var(--blanco)}

/* ---------- entrada al viewport ---------- */
/* Aditiva: el contenido es visible por defecto y .on solo dispara la animacion. */
.rev.on{animation:aparece var(--d-entrada) var(--e-salida) backwards}
@keyframes aparece{from{opacity:0;transform:translateY(var(--desp-entrada))}}

/* Modulos con .entra reciben la secuencia del hero, escalonada por --i */
.entra .rev.on{animation:none}
.entra .cab-sec.on .etiqueta{animation:sube var(--d-lenta) var(--e-salida) backwards}
.entra .cab-sec.on .etiqueta::before,.eq-portada .etiqueta.rev.on::before{
  animation:filete var(--d-lenta) var(--e-salida) backwards}
@keyframes filete{from{transform:scaleX(0)}}
.entra .cab-sec.on h2{animation:none}
.entra .cab-sec.on>p{animation:sube var(--d-lenta) calc(var(--paso-stagger)*2.5)
  var(--e-salida) backwards}
.entra .rejilla.on>*,.entra .tarjetas.on>*,
.entra .docs.on>*,.entra .arts.on>*,.entra .fichas.on>*,
.entra .certis-lista.on>*{
  animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger)*4 + var(--i,0)*var(--paso-stagger))}
.entra .acc.on>*{animation:sube var(--d-lenta) var(--e-salida) backwards;
  animation-delay:calc(var(--paso-stagger)*3.5 + var(--i,0)*var(--paso-stagger)*.8)}
.entra .pol-in.on .pol-ord{animation:revela var(--d-entrada) var(--e-salida) backwards}
.entra .pol-in.on .pol-txt{animation:sube var(--d-lenta) var(--paso-stagger)
  var(--e-salida) backwards}

/* ---------- portada legal ---------------------------------------------
   Capas, de atras hacia delante: el circuito (1), el velo (2), el casco (3)
   y el texto (4). El circuito se desvanece hacia la derecha para no ensuciar
   la silueta, y solo tres trazos siguen hasta el borde del escudo, como si
   lo alimentaran. Alto fijo, asi que no hay salto de maquetacion. */
.hero-legal{position:relative;overflow:hidden;isolation:isolate;
  min-height:620px;display:grid;align-content:center;
  padding-block:var(--e-64) var(--e-96);   /* mas abajo que arriba: centrado optico */
  background:linear-gradient(135deg,var(--marca-800) 0%,var(--marca-900) 55%,
    var(--noche) 100%)}
/* El circuito cubre y recorta, nunca se deforma: los 45 grados se mantienen.
   Llega de lado a lado; el casco se recorta de el con una
   segunda capa de mascara —su silueta ya engordada 14px— restada de la
   primera. Va por CSS y no por <mask> en el SVG a proposito: la capa de
   mascara se coloca con las mismas reglas que el casco (right:0, alto
   completo, misma proporcion), asi que el calce es exacto sin tener que
   traducir el viewBox del circuito, que va en modo slice. */
.hl-circuito{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 88%,rgba(0,0,0,.5) 100%),
    url(../assets/casco-silueta.png);
          mask-image:linear-gradient(to right,#000 0,#000 88%,rgba(0,0,0,.5) 100%),
    url(../assets/casco-silueta.png);
  -webkit-mask-position:0 0,right center;  mask-position:0 0,right center;
  -webkit-mask-size:100% 100%,auto 100%;   mask-size:100% 100%,auto 100%;
  -webkit-mask-repeat:no-repeat;           mask-repeat:no-repeat;
  -webkit-mask-composite:source-out;       mask-composite:subtract}
.hl-vias{fill:var(--icono-tinte)}
.hl-pulso{stroke:var(--icono-tinte);stroke-dasharray:60 940;
  animation:hl-corre 8s linear infinite}
.hl-pulso-2{animation-duration:10s;animation-delay:-3.2s}
.hl-pulso-3{animation-duration:6.5s;animation-delay:-1.6s}
@keyframes hl-corre{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
/* los tres cables que llegan al escudo: fuera de la mascara, mueren en su canto */
.hl-alimenta{position:absolute;top:0;z-index:4;height:100%;
  /* el casco mide el 67% del alto del hero; los cables arrancan mas a la
     izquierda de eso para no cruzarlo nunca */
  right:clamp(300px,34vw,470px);width:clamp(120px,14vw,220px);
  pointer-events:none;color:var(--icono-tinte);opacity:.5}
/* velo de izquierda a derecha: el texto conserva su contraste */
.hl-velo{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--noche) 92%,transparent) 0%,
    color-mix(in srgb,var(--noche) 78%,transparent) 34%,
    color-mix(in srgb,var(--noche) 30%,transparent) 62%,
    transparent 100%)}

/* --- el escudo: vectorial y con sus trazas encendidas ------------------
   El cuerpo son las piezas del logotipo oficial. La luz va en dos capas
   sobre el, enmascaradas con las trazas internas del propio casco, asi que
   el pulso se ve correr por sus lineas y no por una caja. */
.hl-marca{position:absolute;top:0;right:0;z-index:3;
  height:100%;aspect-ratio:603/900;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 60%,transparent);
          mask-image:linear-gradient(to left,#000 60%,transparent)}
.hl-casco{display:block;width:100%;height:100%;object-fit:contain;opacity:.92;
  filter:drop-shadow(0 0 60px color-mix(in srgb,var(--acento-500) 55%,transparent))}
.hl-casco-luz{position:absolute;inset:0;
  --luz:color-mix(in srgb,var(--icono-tinte) 55%,var(--blanco));
  background:linear-gradient(180deg,transparent 0%,var(--luz) 12%,
    var(--blanco) 20%,var(--luz) 28%,transparent 42%);
  background-size:100% 260%;background-repeat:no-repeat;
  -webkit-mask:url(../assets/casco-trazas.png) center/100% 100% no-repeat;
          mask:url(../assets/casco-trazas.png) center/100% 100% no-repeat;
  filter:drop-shadow(0 0 6px var(--luz));
  animation:hl-recorre 6s linear infinite}
/* la segunda capa va mas lenta y al reves: los nodos no laten todos a la vez */
.hl-casco-luz-2{animation-duration:9s;animation-delay:-3s;
  background:linear-gradient(180deg,transparent 0%,var(--luz) 16%,transparent 30%);
  opacity:.7}
@keyframes hl-recorre{from{background-position:0 -160%}to{background-position:0 160%}}
/* y un latido de fondo para que las trazas nunca queden del todo apagadas */
.circuito-casco{will-change:background-position}

/* --- el texto: miga, etiqueta, titulo y pie en un solo eje ------------- */
.hero-legal>.wrap{position:relative;z-index:4}
.hl-in{max-width:620px;margin-left:0;margin-right:auto;text-align:left}
.hl-in .miga{padding:0;margin-bottom:var(--e-24)}
.hl-in .miga ol{font-size:14px}
.hl-in .miga a{color:rgba(255,255,255,.62)}
.hl-in .miga a:hover{color:var(--blanco)}
.hl-in .miga li+li::before{color:rgba(255,255,255,.3);opacity:1}
.hl-in .miga [aria-current]{color:var(--blanco);font-weight:600}
.hero-legal h1{margin:0 0 var(--e-24);font-size:var(--t-display);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  text-transform:uppercase}
.hl-lead{margin:0 0 var(--e-32);max-width:36ch;font-family:var(--fuente-titulo);
  font-weight:700;font-size:var(--t-h4);line-height:var(--lh-h4);
  color:var(--acento-txt)}
.hero-legal .rev.on{animation:sube var(--d-lenta) var(--e-salida) backwards}
.hero-legal h1.rev.on{animation:revela var(--d-hero) var(--e-salida) backwards}

/* tableta: el escudo pierde peso y se va fuera del borde */
@media (max-width:1199px){
  .hero-legal{min-height:520px}
  .hl-marca{opacity:.6;right:-14%}
  .hl-circuito{-webkit-mask-position:0 0,right -14vw center;
                       mask-position:0 0,right -14vw center}
  .hl-alimenta{opacity:.35}
}
/* movil: el escudo pasa a ser fondo centrado y el texto ocupa todo */
@media (max-width:767px){
  .hero-legal{min-height:440px;padding-inline:24px}
  .hl-marca{right:auto;left:50%;translate:-50% 0;opacity:.12;
    -webkit-mask-image:none;mask-image:none}
  .hl-alimenta{display:none}
  .hl-circuito{-webkit-mask-image:none;mask-image:none;
    -webkit-mask-composite:add;mask-composite:add}
  .hl-velo{background:linear-gradient(180deg,
    color-mix(in srgb,var(--noche) 72%,transparent),
    color-mix(in srgb,var(--noche) 88%,transparent))}
  .hl-in{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hl-pulso{animation:none;stroke-dasharray:none;opacity:.5}
  .hl-casco-luz{animation:none;background-position:0 40%}
}

/* --- variante del hero para las paginas de visor ----------------------
   Mismo armazon que politicas.html; solo cambia la escala del titular,
   que aqui es una frase larga y en versales de display no cabria. */
.hero-doc .hl-in{max-width:640px}
.hero-doc h1{font-size:clamp(38px,4.5vw,64px);line-height:1.1;
  letter-spacing:-.02em;text-transform:none}

/* --- acciones del hero: botones con el mismo molde que "VER POLITICA" --- */
.hl-desc{margin:0 0 var(--e-32);max-width:44ch;font-size:17px;line-height:1.7;
  color:color-mix(in srgb,var(--blanco) 62%,transparent)}
.hl-acc{display:flex;flex-wrap:wrap;gap:16px}
.hl-meta{margin:var(--e-16) 0 0;font-family:var(--fuente-mono);font-size:13px;
  letter-spacing:.06em;color:color-mix(in srgb,var(--blanco) 50%,transparent)}
.hb{--d-doc:260ms;--e-doc:cubic-bezier(.22,1,.36,1);
  display:inline-flex;align-items:center;gap:10px;padding:16px 28px;
  font-family:var(--fuente-mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blanco);text-decoration:none;
  background:color-mix(in srgb,var(--icono-tinte) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 45%,transparent);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),
    calc(100% - 12px) 100%,0 100%,0 12px);
  transition:background var(--d-doc) var(--e-doc),
             border-color var(--d-doc) var(--e-doc),scale var(--d-doc) var(--e-doc)}
.hb-2{background:transparent;
  border-color:color-mix(in srgb,var(--icono-tinte) 25%,transparent)}
.hb:is(:hover,:focus-visible){
  background:color-mix(in srgb,var(--icono-tinte) 20%,transparent);
  border-color:var(--icono-tinte)}
.hb-2:is(:hover,:focus-visible){background:color-mix(in srgb,var(--icono-tinte) 12%,transparent)}
.hb:is(:hover,:focus-visible) .doc-flecha{translate:5px 0}
.hb:active{scale:.98}
/* el contorno de foco no puede ir en el boton: el clip-path lo recortaria */
.hb:focus-visible{outline:none;
  box-shadow:inset 0 0 0 2px var(--icono-tinte),
             inset 0 0 0 4px color-mix(in srgb,var(--icono-tinte) 25%,transparent)}

/* --- el visor, con el mismo marco que las tarjetas ----------------------
   El aire de arriba es padding de la seccion y no margen del marco: un
   margen del primer hijo se escapa de la seccion (se colapsa), deja fuera
   ese trozo sin fondo y ahi se veia el blanco del body. El fondo arranca
   en el mismo negro con el que acaba el hero, como #documentos. */
.visor-caja{position:relative;overflow:hidden;isolation:isolate;
  padding-block:80px 120px;
  background:linear-gradient(180deg,var(--noche) 0%,var(--marca-900) 60%,
    var(--marca-800) 100%)}
.visor-caja .doc-red{opacity:.06}
.visor-caja>.wrap{position:relative;z-index:1}
.visor-marco{position:relative;padding-bottom:44px;
  background:color-mix(in srgb,var(--blanco) 3%,transparent);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 18%,transparent);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),
    calc(100% - 18px) 100%,0 100%,0 18px);
  filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--negro) 35%,transparent))}
.visor-barra{display:flex;flex-wrap:wrap;gap:var(--e-8);
  padding:14px 24px;font-family:var(--fuente-mono);font-size:12px;letter-spacing:.1em;
  color:color-mix(in srgb,var(--blanco) 55%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--icono-tinte) 12%,transparent)}
/* el PDF se lee entero: por debajo de esto el navegador corta a media frase */
.visor-marco .visor{border:0;min-height:85vh}
/* Las escuadras van sobre la barra y sobre el zocalo, nunca sobre el PDF:
   el visor nativo se compone en su propia capa y tapa cualquier z-index. */
.visor-marco .doc-esq{top:14px;left:14px;z-index:2;pointer-events:none}
.visor-marco .doc-esq-fin{top:auto;left:auto;bottom:12px;right:14px}
@media (max-width:767px){
  .visor-caja{padding-block:48px 80px}
  .hl-acc{flex-direction:column;align-items:stretch}
  .hb{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hb,.hb .doc-flecha{transition:none}
  .hb:is(:hover,:focus-visible) .doc-flecha{translate:none}
  .hb:active{scale:none}
}

/* ---------- el modulo de documentos, en la misma gama -----------------
   Sigue al encabezado sin corte: arranca en el mismo negro azulado con el
   que acaba el hero y sube un punto hacia el azul de la placa. La red de
   circuito es la misma del hero, reusada con <use> y bajada de opacidad. */
#documentos{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--noche) 0%,var(--marca-900) 70%,
    var(--marca-800) 100%)}
.doc-red{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;opacity:.08}
#documentos>.wrap{position:relative;z-index:1}
/* el titulo ocupa el ancho entero: aqui el encabezado no va a dos columnas */
#documentos{padding-block:120px}
#documentos .cab-sec{grid-template-columns:1fr;margin-bottom:72px}
#documentos .cab-sec h2{font-size:clamp(34px,3.4vw,52px);line-height:1.08}
#documentos .etiqueta{font-family:var(--fuente-mono);letter-spacing:.24em}
.docs-sub{margin:var(--e-16) 0 0;max-width:560px;font-size:16px;line-height:1.6;
  color:color-mix(in srgb,var(--blanco) 60%,transparent)}
/* las dos fichas ocupan el ancho del contenedor, en columnas iguales */
#documentos .docs{list-style:none;margin:0;padding:0;width:100%;
  display:grid;gap:32px;grid-template-columns:repeat(2,minmax(0,1fr))}

/* --- la ficha -----------------------------------------------------------
   Sombras y halos van en el <li>, que no esta recortado: un box-shadow
   dentro del clip-path se corta con el, y un drop-shadow aqui sigue el
   chaflan. */
.doc{--d-doc:260ms;--e-doc:cubic-bezier(.22,1,.36,1);
  display:grid;transition:filter var(--d-doc) var(--e-doc);
  filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--negro) 28%,transparent))}
.doc:has(.doc-lig:is(:hover,:focus-visible)){
  filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--negro) 35%,transparent))
         drop-shadow(0 0 24px color-mix(in srgb,var(--icono-tinte) 10%,transparent))}
.doc:has(.doc-lig:focus-visible){outline:2px solid var(--icono-tinte);outline-offset:3px}
/* la tarjeta entera es el enlace; el contenido se reparte de arriba abajo */
.doc-lig{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:420px;padding:48px;cursor:pointer;
  text-decoration:none;color:var(--blanco);
  background:
    radial-gradient(circle at 0% 0%,
      color-mix(in srgb,var(--icono-tinte) 7%,transparent),transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb,var(--blanco) 4.5%,transparent) 0%,
      color-mix(in srgb,var(--blanco) 1.5%,transparent) 55%,
      color-mix(in srgb,var(--icono-tinte) 3%,transparent) 100%);
  border:1px solid color-mix(in srgb,var(--icono-tinte) 20%,transparent);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),
    calc(100% - 18px) 100%,0 100%,0 18px);
  transition:border-color var(--d-doc) var(--e-doc),
             translate var(--d-doc) var(--e-doc)}
.doc-lig:is(:hover,:focus-visible){
  border-color:color-mix(in srgb,var(--icono-tinte) 55%,transparent);
  translate:0 -4px}
.doc-lig:focus-visible{outline:none}   /* el contorno lo pinta el <li> */
/* filete de acento que crece de izquierda a derecha por el canto de arriba */
.doc-lig::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:var(--icono-tinte);transform:scaleX(0);transform-origin:left;
  transition:transform 320ms var(--e-doc)}
.doc-lig:is(:hover,:focus-visible)::before{transform:scaleX(1)}
/* escuadras en L: superior izquierda e inferior derecha, por dentro del bisel */
.doc-esq{position:absolute;top:22px;left:22px;width:28px;height:28px;z-index:1;
  border-top:2px solid color-mix(in srgb,var(--icono-tinte) 45%,transparent);
  border-left:2px solid color-mix(in srgb,var(--icono-tinte) 45%,transparent);
  transition:border-color var(--d-doc) var(--e-doc)}
.doc-esq-fin{top:auto;left:auto;bottom:22px;right:22px;border:0;
  border-bottom:2px solid color-mix(in srgb,var(--icono-tinte) 45%,transparent);
  border-right:2px solid color-mix(in srgb,var(--icono-tinte) 45%,transparent)}
.doc-lig:is(:hover,:focus-visible) .doc-esq{border-color:var(--icono-tinte)}
/* el numero al agua: da fondo sin competir, y el overflow lo contiene */
.doc-marca{position:absolute;right:-6px;bottom:-56px;z-index:0;pointer-events:none;
  user-select:none;font-family:var(--fuente-mono);font-size:180px;font-weight:700;
  line-height:1;rotate:-8deg;
  color:color-mix(in srgb,var(--icono-tinte) 4%,transparent);
  transition:color var(--d-doc) var(--e-doc)}
.doc-lig:is(:hover,:focus-visible) .doc-marca{
  color:color-mix(in srgb,var(--icono-tinte) 7%,transparent)}
/* el contenido, siempre por delante del numero */
.doc-cab,.doc-cuerpo,.doc-pie{position:relative;z-index:1}
.doc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-16)}
.doc-eti{margin:0;display:flex;align-items:center;gap:var(--e-8);
  font-family:var(--fuente-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:color-mix(in srgb,var(--icono-tinte) 55%,var(--blanco))}
.doc-punto{width:8px;height:8px;border-radius:50%;
  background:color-mix(in srgb,var(--icono-tinte) 70%,transparent);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--icono-tinte) 60%,transparent));
  animation:doc-late 2.8s var(--e-estandar) infinite;
  transition:background var(--d-doc) var(--e-doc),filter var(--d-doc) var(--e-doc)}
.doc-lig:is(:hover,:focus-visible) .doc-punto{background:var(--icono-tinte);
  filter:drop-shadow(0 0 12px var(--icono-tinte))}
@keyframes doc-late{0%,100%{opacity:.45}50%{opacity:1}}
.doc-ico{flex:none;width:32px;height:32px;color:var(--icono-tinte);opacity:.75;
  transition:translate var(--d-doc) var(--e-doc),opacity var(--d-doc) var(--e-doc)}
.doc-lig:is(:hover,:focus-visible) .doc-ico{translate:0 -2px;opacity:1}
.doc-cuerpo{display:grid;gap:var(--e-16)}
.doc h3{margin:0;font-size:clamp(24px,2vw,30px);line-height:1.2;
  font-weight:700;color:var(--blanco)}
/* la descripcion va en la tipografia de texto del sitio, no en mono: el
   .tec de esta pagina pone mono a todos los <p> de .docs y aqui estorba */
.doc-res{margin:0;max-width:44ch;font-family:var(--fuente);font-size:17px;
  line-height:1.7;color:color-mix(in srgb,var(--blanco) 62%,transparent)}
/* el pie: la linea divisoria y el boton, anclados abajo */
.doc-pie{display:block;padding-top:28px;
  border-top:1px solid color-mix(in srgb,var(--icono-tinte) 12%,transparent)}
.doc-b{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;
  border:1px solid color-mix(in srgb,var(--icono-tinte) 45%,transparent);
  font-family:var(--fuente-mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blanco);
  transition:background var(--d-doc) var(--e-doc),
             border-color var(--d-doc) var(--e-doc),scale var(--d-doc) var(--e-doc)}
.doc-flecha{transition:translate var(--d-doc) var(--e-doc)}
.doc-lig:is(:hover,:focus-visible) .doc-b{
  background:color-mix(in srgb,var(--icono-tinte) 10%,transparent);
  border-color:var(--icono-tinte)}
.doc-lig:is(:hover,:focus-visible) .doc-flecha{translate:5px 0}
.doc-lig:active .doc-b{scale:.98}
/* entran escalonadas: .entra apaga el fade generico, asi que va explicita.
   El observador es el del sitio, que solo anade .on una vez. */
.entra .doc.rev.on{animation:sube var(--d-lenta) var(--e-doc) backwards;
  animation-delay:calc(var(--i,0) * 120ms)}

/* con siete fichas, en pantallas anchas caben tres por fila: las tarjetas
   pierden alto y aire, y la rejilla deja de ser una columna interminable */
@media (min-width:1400px){
  #documentos .docs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doc-lig{min-height:360px;padding:36px}
  .doc-marca{font-size:150px;bottom:-46px}
}
@media (max-width:1199px){
  .doc-lig{min-height:380px;padding:36px}
  .doc-marca{font-size:150px;bottom:-46px}
}
@media (max-width:1023px){
  #documentos .docs{grid-template-columns:1fr;gap:var(--e-24)}
  .doc-lig{min-height:320px}
}
@media (max-width:767px){
  /* el lateral de 24px ya lo pone .wrap; repetirlo aqui rompia el eje */
  #documentos{padding-block:var(--e-96)}
  .doc-lig{min-height:0;padding:28px;gap:24px}
  .doc h3{font-size:24px}
  .doc-marca{font-size:120px;bottom:-34px}
  .doc-esq{top:14px;left:14px}
  .doc-esq-fin{bottom:14px;right:14px}
}
@media (prefers-reduced-motion:reduce){
  .doc-punto{animation:none;opacity:.9}
  .doc-lig,.doc,.doc-b,.doc-flecha,.doc-ico,.doc-lig::before{
    transition-property:background,border-color,color,filter}
  .doc-lig:is(:hover,:focus-visible){translate:none}
  .doc-lig:is(:hover,:focus-visible) .doc-ico{translate:none}
  .doc-lig:is(:hover,:focus-visible) .doc-flecha{translate:none}
  .doc-lig:is(:hover,:focus-visible)::before{transform:scaleX(1)}
  .doc-lig:active .doc-b{scale:none}
  .entra .doc.rev.on{animation:none}
}

/* ---------- paginas legales: apartados numerados ---------- */
.legal-fecha{margin:0;font-size:var(--t-caption);color:var(--txt-2)}
.legal-intro{margin:0 0 var(--e-48);max-width:60ch;color:var(--txt-2);
  font-size:var(--t-body-lg);line-height:var(--lh-body-lg)}
.arts{list-style:none;margin:0;padding:0;display:grid}
.art{display:grid;gap:var(--e-16);padding:var(--e-48) var(--e-24);
  margin-inline:calc(-1*var(--e-24));border-top:1px solid var(--linea-c);
  transition:background var(--d-media) var(--e-estandar)}
.art:first-child{border-top:0;padding-top:0}
.art:hover{background:var(--papel)}
.t-oscuro .art:hover,.t-marca .art:hover{background:rgba(255,255,255,.05)}
.art-ord{transition:color var(--d-rapida) var(--e-estandar),
                    opacity var(--d-rapida) var(--e-estandar)}
.art:hover .art-ord{color:var(--acento-txt);opacity:1}
.art-ord{margin:0;font-family:var(--fuente-titulo);font-weight:700;line-height:1;
  font-size:var(--t-h3);color:var(--filete);opacity:.5}
.art-txt{display:grid;gap:var(--e-16);max-width:66ch}
.art-txt h2{margin:0;font-size:var(--t-h4);line-height:var(--lh-h4)}
.art-txt p{margin:0;color:var(--txt-2)}
.art-txt ol{margin:0;padding-left:var(--e-24);display:grid;gap:var(--e-8);color:var(--txt-2)}
.art-txt a{color:var(--acento-txt);text-decoration-thickness:1px;text-underline-offset:3px}
.art-txt a:hover{color:var(--txt)}

/* ---------- el documento de cada pagina ---------- */
.doc-uno{display:grid;gap:var(--e-24);padding:var(--e-32)}
.doc-acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-16)}
.doc-meta{margin:0;font-size:var(--t-caption);color:var(--txt-2)}
.doc-aqui summary{display:inline-flex;align-items:center;gap:var(--e-8);
  min-height:var(--toque-min);cursor:pointer;list-style:none;
  font-family:var(--fuente-titulo);font-size:var(--t-body-sm);font-weight:700;
  color:var(--acento-txt);transition:color var(--d-rapida) var(--e-estandar)}
.doc-aqui summary::-webkit-details-marker{display:none}
.doc-aqui summary::before{content:"";width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--d-media) var(--e-estandar)}
.doc-aqui[open] summary::before{transform:rotate(-135deg) translate(-3px,-3px)}
.doc-aqui summary:hover{color:var(--txt)}
.doc-aqui .visor{margin-top:var(--e-24)}

.docs{list-style:none;margin:var(--e-32) 0 0;padding:0;display:grid;gap:var(--e-24);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.docs li .cara{justify-items:start}
.docs h3{margin:0;font-size:var(--t-h5);line-height:var(--lh-h5)}
.docs .b{width:100%}
.docs p{margin:0;font-size:var(--t-caption);color:var(--txt-2)}

/* ---------- franjas de politica ---------- */
.pol-in{display:grid;gap:var(--e-32)}
.pol-ord{margin:0;font-family:var(--fuente-titulo);font-weight:700;line-height:.9;
  font-size:var(--t-display);color:var(--filete);opacity:.28;
  transition:opacity var(--d-media) var(--e-estandar)}
.pol:hover .pol-ord{opacity:.6}
.pol:hover .etiqueta::before{transform:scaleX(2)}
.pol-txt{display:grid;gap:var(--e-16);align-content:start}
.pol-txt h2{margin:0}
.pol-meta{margin:0;font-size:var(--t-caption);letter-spacing:.06em;
  color:var(--acento-txt)}
.pol-res{margin:0;max-width:52ch;color:var(--txt-2);font-size:var(--t-body-lg);
  line-height:var(--lh-body-lg)}
.pol-puntos{list-style:none;margin:var(--e-8) 0 var(--e-16);padding:0;display:grid;
  gap:var(--e-8);max-width:52ch}
.pol-puntos li{position:relative;padding-left:var(--e-32);color:var(--txt-2);
  font-size:var(--t-body-sm)}
.pol-puntos li::before{content:"";position:absolute;left:0;top:.62em;
  width:var(--e-16);height:2px;background:var(--filete)}
.pol-acc{display:flex;flex-wrap:wrap;gap:var(--e-16)}

/* ---------- visor de PDF ---------- */
.visor-cab{padding-block:var(--e-64) var(--e-48)}
.visor-top{display:grid;gap:var(--e-32)}
.visor-id h1{margin-bottom:var(--e-16)}
.visor-sub{margin:0;max-width:52ch;color:var(--txt-2)}
.visor-acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-16)}
.visor-meta{margin:0;font-size:var(--t-caption);color:var(--txt-2)}
.visor{display:block;width:100%;height:min(82vh,1000px);
  border:1px solid var(--linea-c);background:var(--marca-900)}
/* Solo se ve si el navegador no sabe pintar el PDF: es el contenido del <object>. */
.visor-no{display:grid;gap:var(--e-16);justify-items:start;padding:var(--e-64) var(--e-32)}
.visor-no h2{font-size:var(--t-h4);line-height:var(--lh-h4)}
.visor-movil{display:none}
.visor-no p{margin:0;color:var(--txt-2)}

/* ---------- hueco de imagen de la tarjeta ---------- */
/* Reservado: hoy muestra un marcador y manana basta con meterle un <img>
   dentro; el object-fit ya esta puesto y no hay que tocar nada mas. */
/* La imagen sangra hasta el borde de la tarjeta (margenes negativos del --pad)
   y un degradado la funde con el fondo por abajo, para que no quede pegada. */
.tarjeta-img{position:relative;display:grid;place-items:center;overflow:hidden;
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  aspect-ratio:16/10;border:0;
  border-radius:0;
  background:linear-gradient(135deg,rgba(72,163,184,.12),transparent 70%)}
.tarjeta-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,28,37,.1) 0 40%,var(--tarjeta-fondo) 100%)}
/* sin imagen todavia, el marcador va sobre un punteado suave */
/* Sin foto todavia: un campo tenue en vez del recuadro punteado, que dentro
   del panel achaflanado hacia un segundo marco. */
.tarjeta-img:not(:has(img)){border:0;border-radius:0;margin:0;width:100%;
  background:
    linear-gradient(135deg,rgba(72,163,184,.12),transparent 65%),
    repeating-linear-gradient(115deg,transparent 0 9px,rgba(122,159,197,.05) 9px 10px)}
.tarjeta-img img{width:100%;height:100%;display:block;object-fit:cover}
.tarjeta-img span{font-family:var(--fuente-mono);font-size:var(--t-caption);
  letter-spacing:.16em;text-transform:uppercase;color:var(--icono-tinte);opacity:.7}
/* si algun dia llega la imagen, el marcador sobra */
.tarjeta-img:has(img) span{display:none}

/* el correo del reverso: lleva al modulo de contacto */
/* Boton de contacto de la tarjeta: mismo lenguaje que .b pero compacto, que
   dentro de una tarjeta el boton normal come demasiado alto. */
/* Va fuera de .flip-in, que es lo unico que rota: asi no desaparece al voltear
   y se puede pulsar aunque el cursor haya girado la tarjeta. */
.ficha>.tarjeta-correo{position:absolute;left:var(--e-32);bottom:var(--e-32);z-index:3;
  margin:0}
.ficha{position:relative}
.tarjeta-correo{margin-top:var(--e-8);justify-self:start;
  display:inline-flex;align-items:center;gap:var(--e-8);
  padding:var(--e-8) var(--e-16);min-height:var(--e-32);
  border:1px solid var(--icono-tinte);border-radius:var(--r-2);
  font-family:var(--fuente-mono);font-size:var(--t-caption);letter-spacing:.04em;
  color:var(--icono-tinte);text-decoration:none;
  transition:background var(--d-rapida) var(--e-estandar),
             color var(--d-rapida) var(--e-estandar),
             box-shadow var(--d-rapida) var(--e-estandar)}
.tarjeta-correo:hover{background:var(--icono-tinte);color:var(--noche);
  box-shadow:0 0 16px rgba(72,163,184,.35)}
.tarjeta-correo span{transition:transform var(--d-rapida) var(--e-estandar)}
.tarjeta-correo:hover span{transform:translateX(3px)}

/* ---------- revelado de las tarjetas ---------- */
/* Barrido limpio en vez del holograma: el reverso se descubre de arriba abajo
   con un clip-path y una linea de acento que lo recorre una sola vez. Fuera la
   banda tornasolada, el parpadeo y las lineas de barrido continuas. */
.flip{display:grid;position:relative;perspective:900px;
  /* app.js las escribe en cada pointermove; sin JS se quedan en reposo */
  --rx:0deg;--ry:0deg}
.flip-in{display:grid;position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform var(--d-tilt) var(--e-salida)}
.cara{grid-area:1/1;
  transition:opacity var(--d-revelado) var(--e-salida),
             transform var(--d-revelado) var(--e-salida),
             clip-path var(--d-revelado) var(--e-salida)}
.cara-atras{opacity:0;pointer-events:none;transform:translateY(8px);
  clip-path:inset(0 0 100% 0)}
.flip:is(:hover,:focus-within,.volteada) .cara-atras{
  opacity:1;pointer-events:auto;transform:none;clip-path:inset(0 0 0 0)}
/* El frente no se desvanece: el reverso va despues en el DOM y en la misma
   celda, asi que al abrirse su clip lo tapa. Si ademas se desvaneciera, a mitad
   del barrido se veria el fondo de la pagina por la parte aun sin cubrir. */
.flip:is(:hover,:focus-within,.volteada) .cara-frente{pointer-events:none}

/* la linea de acento que recorre el reverso al descubrirlo, una sola pasada */
.cara-atras::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--acento-300),transparent) no-repeat;
  background-size:100% 2px;background-position:0 -2px;opacity:0}
.flip:is(:hover,:focus-within,.volteada) .cara-atras::before{
  animation:barrido var(--d-revelado) var(--e-salida)}
@keyframes barrido{
  0%{opacity:0;background-position:0 -2px}
  20%,80%{opacity:1}
  100%{opacity:0;background-position:0 calc(100% + 2px)}}

/* filete que se abre al pie, como una barra de estado */
.flip::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  pointer-events:none;z-index:2;background:var(--acento-400);
  transition:width var(--d-revelado) var(--e-salida)}
.flip:is(:hover,:focus-within,.volteada)::after{width:100%}

.cara-frente{position:relative;overflow:hidden;align-content:space-between}
/* La marca de agua de los pilares: el ordinal. Los iconos SVG se retiraron. */
.tarjeta-marca{position:absolute;right:-3%;bottom:-4%;width:42%;max-width:8rem;
  display:block;padding:0;border:0;background:none;color:var(--icono-tinte);
  opacity:.24;pointer-events:none;z-index:0;
  transition:opacity var(--d-media) var(--e-estandar),
             transform var(--d-media) var(--e-estandar)}
.flip:hover .tarjeta-marca{opacity:.34;transform:scale(1.05)}
.tarjetas .tarjeta-marca{margin:0;width:auto;right:4%;bottom:-2%;opacity:.3;
  font-family:var(--fuente-titulo);font-weight:700;font-size:var(--t-display);
  line-height:.85;color:var(--acento-txt)}
/* filete entre el hueco de imagen y el titular */
.flip .cara-frente h3{font-size:var(--t-h4);line-height:var(--lh-h4);
  padding-top:var(--e-16);border-top:1px solid var(--linea-c)}

/* ---------- apartados en tarjeta (politica-privacidad) ---------- */
.fichas{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-24)}
/* Borde de color vivo: dos capas de fondo, el relleno recortado al padding-box
   y el degradado al border-box. Se anima la posicion de la segunda capa.
   ponytail: son ~12 tarjetas repintando su marco a la vez; si algun dia pesa,
   mover la animacion a :hover. */
/* La tarjeta redefine los tokens de tema, igual que .t-oscuro: asi es oscura
   este donde este y el texto, los filetes y los iconos se recolocan solos. */
.ficha,.docs li,.tarjetas li,.doc-uno{
  --txt:var(--blanco);--txt-2:var(--marca-300);--acento-txt:var(--acento-300);
  --linea-c:rgba(255,255,255,.16);--sup:var(--tarjeta-fondo);
  color:var(--txt)}
/* Silueta de panel de instrumento: dos esquinas cortadas en diagonal. El
   chaflan sustituye al borde de color animado, que tenia a doce tarjetas
   repintando su marco continuamente. */
.ficha .cara,.docs li .cara,.doc-uno,.tarjetas .cara,
.flip-in::after{clip-path:polygon(0 0,calc(100% - var(--chaflan)) 0,
  100% var(--chaflan),100% 100%,var(--chaflan) 100%,0 calc(100% - var(--chaflan)))}
.ficha .cara,.docs li .cara,.doc-uno,.tarjetas .cara{border:0;border-radius:0;
  background:var(--sup);
  box-shadow:inset 0 0 0 1px rgba(122,159,197,.18);
  transition:box-shadow var(--d-media) var(--e-estandar)}
.flip:is(:hover,:focus-within,.volteada) .cara{
  box-shadow:inset 0 0 0 1px rgba(122,159,197,.5)}

/* ---- cantoneras de visor, en las dos esquinas sin chaflan -------------- */
.flip-in::after{content:"";position:absolute;inset:9px;z-index:3;pointer-events:none;
  --l:var(--acento-400);--g:16px;
  background:
    linear-gradient(var(--l),var(--l)) 0 0/var(--g) 1px no-repeat,
    linear-gradient(var(--l),var(--l)) 0 0/1px var(--g) no-repeat,
    linear-gradient(var(--l),var(--l)) 100% 100%/var(--g) 1px no-repeat,
    linear-gradient(var(--l),var(--l)) 100% 100%/1px var(--g) no-repeat;
  opacity:.45;transition:opacity var(--d-media) var(--e-estandar)}
.flip:is(:hover,:focus-within,.volteada) .flip-in::after{opacity:1}

/* ---- franja de lectura: ordinal automatico y piloto -------------------- */
.fichas{counter-reset:tarjeta}
.docs{counter-reset:tarjeta}
.tarjetas{counter-reset:tarjeta}
.fichas>li,.docs>li,.tarjetas>li{counter-increment:tarjeta}
.cara-frente::before{position:absolute;left:0;right:0;top:0;z-index:3;
  display:flex;align-items:center;height:var(--e-32);padding:0 var(--pad);
  font-family:var(--fuente-mono);font-size:var(--t-caption);letter-spacing:.2em;
  color:var(--acento-300);
  background:linear-gradient(90deg,rgba(10,15,20,.92),rgba(10,15,20,.35)),
    radial-gradient(circle at calc(100% - var(--pad)) 50%,
      var(--icono-tinte) 0 3px,transparent 3.5px);
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(122,159,197,.22)}
.fichas .cara-frente::before{content:"APARTADO " counter(tarjeta,decimal-leading-zero)}
.docs .cara-frente::before{content:"DOC " counter(tarjeta,decimal-leading-zero)}
.tarjetas .cara-frente::before{content:"PILAR " counter(tarjeta,decimal-leading-zero)}
/* la franja ya dice el pilar; el antetitulo de la cara frontal sobra */
.tarjetas .cara-frente .tarjeta-ete{display:none}

/* La tarjeta solo pone la perspectiva y el realce; el relleno, el borde y el
   fondo viven en cada cara, que es lo que gira. */
.ficha,.docs li{
  transition:transform var(--d-media) var(--e-estandar),
             box-shadow var(--d-media) var(--e-estandar)}
/* --pad en una variable: el hueco de imagen la usa en negativo para sangrar */
.cara{--pad:var(--e-24)}
.ficha .cara{--pad:var(--e-32)}
.ficha .cara,.docs li .cara,.tarjetas .cara{position:relative;overflow:hidden;
  padding:var(--pad)}
/* hueco al pie de las dos caras de .ficha: ahi flota el boton de contacto */
.ficha .cara{padding-bottom:calc(var(--pad) + var(--e-48))}
.flip:is(:hover,:focus-within,.volteada) .cara-atras{
  box-shadow:inset 0 0 0 1px rgba(72,163,184,.35)}
.ficha:hover{transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(10,15,20,.18),0 0 0 1px var(--acento-500)}
.docs li:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,15,20,.3)}
/* destello que cruza la tarjeta al pasar el cursor */
.ficha .cara::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(75,124,173,.16) 50%,
    transparent 58%) no-repeat;
  background-size:260% 100%;background-position:210% 0;
  transition:background-position var(--d-lenta) var(--e-estandar)}
.ficha:hover .cara::after{background-position:-60% 0}
.ficha .cara>*,.docs .cara>*{position:relative;z-index:1}
.tarjetas .cara>:not(.tarjeta-marca){position:relative;z-index:1}

.ficha-ord{margin:0;font-family:var(--fuente-mono);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.ficha h3{margin:0;font-size:var(--t-h5);line-height:var(--lh-h5)}
.ficha p{margin:0;color:var(--txt-2);font-size:var(--t-body-sm);
  line-height:var(--lh-body-sm)}
.ficha ol{margin:0;padding-left:var(--e-24);display:grid;gap:var(--e-8);
  color:var(--txt-2);font-size:var(--t-body-sm)}
.ficha a{color:var(--acento-txt);text-underline-offset:3px}

/* ---------- piel tecnica: solo el modulo de politicas (body.tec) ----------
   Las paginas de visor son oscuras de cabo a rabo: si por un colapso de
   margenes o un hueco entre secciones asomara el body, asomaria en blanco. */
.tec:has(.visor-caja){background:var(--noche)}
.tec .eq-portada,.tec .visor-cab{position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--noche) 0%,var(--marca-900) 38%,
    var(--marca-800) 70%,var(--acento-900) 100%)}
/* Dos manchas de luz que se mueven despacio detras de todo. Se anima solo el
   transform, asi que lo compone la GPU y no repinta la seccion entera. */
.aurora{position:absolute;inset:-25%;pointer-events:none;z-index:0;
  background:radial-gradient(38% 52% at 28% 38%,rgba(75,124,173,.38),transparent 70%),
             radial-gradient(34% 46% at 78% 68%,rgba(38,102,142,.3),transparent 70%);
  animation:aurora 22s var(--e-estandar) infinite alternate}
@keyframes aurora{to{transform:translate3d(7%,-5%,0) scale(1.14)}}
/* Red de paneles difuminada: tres degradados repetidos y un blur. Sin imagen
   y sin mascara url(), asi que funciona tambien con doble clic. */
/* Panal hexagonal: un mosaico SVG de 66x38.1 que repite sin costura.
   Es background-image, no mask, asi que tambien se ve con doble clic. */
.paneles{position:absolute;inset:-18%;pointer-events:none;z-index:0;
  background:url(../assets/panal.svg) repeat;
  background-size:var(--hex) calc(var(--hex)*.635);   /* 66x38.1 del mosaico */
  --hex:104px;
  opacity:.16;filter:blur(1.5px);
  -webkit-mask:linear-gradient(165deg,#000,transparent 82%);
          mask:linear-gradient(165deg,#000,transparent 82%);
  animation:paneles var(--d-paneles) var(--e-estandar) infinite alternate}
@keyframes paneles{to{transform:translate3d(-6%,3.5%,0) scale(1.08)}}

/* El escudo: quieto, en 3D y de perfil derecho. rotateY negativo acerca el
   canto izquierdo y aleja el derecho, que es lo que lo pone de ese perfil. */
/* El escudo, plano y sangrando por el borde: se le ve solo la mitad de la cara.
   El desplazamiento es la mitad exacta de su propio ancho, de ahi el calc. */
.casco3d{position:absolute;inset-block:0;right:0;z-index:0;pointer-events:none;
  /* Sin height: con top y bottom a 0 se estira a todo el alto del encabezado y
     el aspect-ratio saca el ancho de ahi. El translateX del 50% se resuelve
     contra el propio elemento, asi que siempre sangra media cara sea cual sea
     el alto; un right en % se resolveria contra la seccion y no cuadraria. */
  aspect-ratio:128/192;transform:translateX(50%)}
.casco3d::before{content:"";position:absolute;inset:0;
  background:url(../assets/casco.png) center/contain no-repeat;
  filter:brightness(0) invert(1);opacity:.42}
/* Reflejo: la propia silueta hace de mascara, asi que la luz recorre el trazo
   del escudo y no una caja. Igual que el reflejo del logo de la cabecera. */
.casco3d::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.75) 50%,
    transparent 58%) no-repeat;
  background-size:300% 100%;background-position:200% 0;
  -webkit-mask:url(../assets/casco.png) center/contain no-repeat;
          mask:url(../assets/casco.png) center/contain no-repeat;
  animation:reflejo-escudo var(--d-brillo) var(--e-estandar) infinite}
/* El barrido propio del escudo: pasa rapido (el ultimo 8% del ciclo, ~1,1s) pero
   se repite poco. El del logo usa otro reparto, por eso no comparten keyframe. */
@keyframes reflejo-escudo{0%,92%{background-position:200% 0}100%{background-position:-100% 0}}
/* Linea de escaneo: una sola pasada al cargar. */
.tec .eq-portada::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(122,159,197,.28),transparent) no-repeat;
  background-size:100% var(--e-64);background-position:0 calc(-1*var(--e-64));
  animation:escaneo var(--d-escaneo) var(--e-salida) backwards}
/* rejilla y escaneo van detras del contenido, no encima */
/* la aurora queda fuera: si no, este position:relative le pisa el absolute */
.tec .eq-portada>:not(.aurora,.paneles,.casco3d),
.tec .visor-cab>:not(.aurora,.paneles,.casco3d){position:relative;z-index:1}
@keyframes escaneo{to{background-position:0 130%}}

.tec .etiqueta{font-family:var(--fuente-mono);letter-spacing:.2em}
.tec .pol-ord,.tec .art-ord,.tec .visor-meta,.tec .doc-meta,.tec .docs p,
.tec .legal-fecha,.tec .pol-meta{font-family:var(--fuente-mono)}
.tec .t-oscuro .etiqueta::before,.tec .eq-portada .etiqueta::before,
.tec .visor-cab .etiqueta::before{box-shadow:0 0 14px rgba(75,124,173,.7)}
.tec .pol-puntos li::before{box-shadow:0 0 10px rgba(75,124,173,.6)}
/* el borde del boton fantasma se enciende al pasar */
.tec .b-2{transition:box-shadow var(--d-rapida) var(--e-estandar),
                     background var(--d-rapida) var(--e-estandar),
                     color var(--d-rapida) var(--e-estandar),
                     border-color var(--d-rapida) var(--e-estandar)}
.tec .b-2:hover{box-shadow:0 0 18px rgba(122,159,197,.45)}

/* ---------- responsive: mobile-first ---------- */
@media (max-width:479px){.logos li:nth-child(n+13){display:none}}

@media (min-width:720px){
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .fichas{grid-template-columns:repeat(2,1fr)}
  .tarjetas-3{grid-template-columns:repeat(3,1fr)}   /* 3 fichas: sin celdas vacias */
  .acc-in{padding-left:var(--e-64)}
  .logos{grid-template-columns:repeat(auto-fill,minmax(var(--logo-min-lg),1fr))}
}

@media (min-width:900px){
  .certis-lista{grid-template-columns:repeat(3,1fr);gap:var(--e-24)}
  .cab-sec{grid-template-columns:1fr 1fr;gap:var(--e-48);align-items:end}
  .eq-texto{grid-template-columns:1fr 1fr;gap:var(--e-48);max-width:none}
  .pol-in{grid-template-columns:auto 1fr;gap:var(--e-64);align-items:start}
  .art{grid-template-columns:4rem 1fr;gap:var(--e-48)}
  .visor-top{grid-template-columns:1fr auto;align-items:end}
  .visor-acc{justify-content:flex-end}
  .pie-cols{grid-template-columns:repeat(4,1fr);gap:var(--e-32);
    align-items:start}
  .cta-lead{margin-bottom:var(--e-32)}
}

@media (min-width:1100px){.tarjetas{grid-template-columns:repeat(5,1fr)}
  .fichas{grid-template-columns:repeat(3,1fr)}
  .tarjetas-3{grid-template-columns:repeat(3,1fr)}}

@media (max-width:899px){
  /* El abanico no cabe: por debajo de 900px se cae a una lista normal y el
     grafico se retira, que a ese tamaño el texto dentro de los sectores seria
     ilegible. */
  .abanico-fondo,.abanico-iconos,.abanico-centro{display:none}
  .abanico{font-size:1rem;width:auto;margin:var(--e-32) 0 0}
  /* Cada frente pasa a ficha con su fotografia: son las mismas cinco que el
     abanico pinta dentro de los sectores y en movil se tiraban a la basura.
     La foto llega por --foto, en el style del <li>, porque attr() no sirve
     para construir una url. */
  .abanico-lista{position:static;display:grid;gap:12px}
  .abanico-item{position:static;width:auto;transform:none;text-align:left;
    padding:0;border:1px solid var(--neutro-200);background:var(--blanco);
    box-shadow:var(--sombra-1);
    clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),
      calc(100% - 14px) 100%,0 100%,0 14px);
    transition:border-color 220ms var(--e-estandar)}
  .abanico-item:has(a:active){border-color:var(--acento-500)}
  .abanico-item a{display:grid;grid-template-columns:84px minmax(0,1fr) 14px;
    align-items:center;gap:14px;padding:12px;text-decoration:none;color:inherit}
  /* la foto, con el azul de marca por encima para que las cinco casen entre si */
  .abanico-item a::before{content:"";grid-column:1;grid-row:1 / span 3;
    align-self:stretch;min-height:84px;border-radius:var(--r-3);
    background-image:linear-gradient(
        color-mix(in srgb,var(--marca-500) 22%,transparent),
        color-mix(in srgb,var(--marca-900) 28%,transparent)),var(--foto);
    background-size:cover;background-position:center}
  /* la punta de flecha, a la derecha */
  .abanico-item a::after{content:"";grid-column:3;grid-row:1 / span 3;
    width:8px;height:8px;justify-self:end;
    border-right:2px solid var(--acento-500);border-top:2px solid var(--acento-500);
    rotate:45deg;opacity:.7}
  .abanico-item :is(.abanico-num,h3,p){grid-column:2;margin:0}
  /* --marca-500 y no --acento-500: ese da 4.39:1 sobre blanco y a 12px no
     llega al minimo. Este da 7.98. */
  .abanico-num{font-family:var(--fuente-mono);font-size:12px;letter-spacing:.14em;
    color:var(--marca-500)}
  .abanico-item h3{color:var(--txt);font-size:var(--t-h5);line-height:1.2;
    margin-top:2px}
  .abanico-item p{color:var(--txt-2);font-size:var(--t-body-sm);line-height:1.45;
    margin-top:4px}
  @media (prefers-reduced-motion:reduce){.abanico-item{transition:none}}
  /* ponytail: en movil ningun navegador incrusta el PDF, asi que se oculta el
     visor y se ofrecen los botones. Si algun dia hace falta verlo en el sitio,
     el camino es pdf.js, no mas CSS. */
  .visor{display:none}
  .visor-marco{display:none}   /* sin PDF dentro, el marco seria un cuadro vacio */
  .visor-movil{display:grid;gap:var(--e-16);justify-items:start;
    padding:var(--e-64) var(--e-32);border:1px solid var(--linea-c)}
  .cab-main-in{flex-wrap:nowrap;gap:var(--e-16);justify-content:space-between}
  .marca img,.cab.compacta .marca img{height:var(--e-32)}
  .menu-btn{display:block}
  /* panel a pantalla completa */
  /* dvh y no vh: en movil la barra de direcciones entra y sale, y con vh el
     panel se quedaba mas alto que la ventana y cortaba los ultimos enlaces */
  .menu{display:none;position:fixed;inset:0;height:100dvh;z-index:35;
    overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    padding:var(--e-96) var(--e-24) var(--e-48);background:var(--marca-800)}
  .cab.abierto .menu{display:flex}
  /* el panel es descendiente de .cab: subir el z-index del padre no sirve,
     hay que elevar el logo y la X dentro del mismo contexto de apilado */
  .cab.abierto .marca,.cab.abierto .menu-btn{position:relative;z-index:36}
  .menu>a,.m-tit{min-height:var(--e-64);font-size:var(--t-h4);
    border-bottom:1px solid rgba(255,255,255,.14)}
  .m-sub{flex-direction:column;align-items:stretch}
  .m-tit{width:100%;justify-content:space-between}
  .submenu{position:static;min-width:0;border:0;border-radius:0;box-shadow:none;
    background:rgba(255,255,255,.05);padding-left:var(--e-16)}
  .menu a::after{display:none}
  .cab-cta{margin:var(--e-32) 0 0;justify-self:start;align-self:flex-start}
  .hslide{padding:var(--e-48) var(--e-24) var(--e-96);align-content:center;
    gap:var(--e-48)}
  .hslide-pie{justify-self:start}
  .hero-pista{display:none}
}

@media (prefers-reduced-motion:reduce){
  html,.hero-carril{scroll-behavior:auto}
  .circ-p{display:none}
  .circ-t{animation:none}
  .rev.on,.entra .cab-sec.on .etiqueta,.entra .cab-sec.on h2,.entra .cab-sec.on>p,
  .entra .rejilla.on>*,.entra .tarjetas.on>*,.entra .acc.on>*,
  .entra .docs.on>*,.entra .arts.on>*,.entra .fichas.on>*,
  .entra .certis-lista.on>*,.entra .certis-lista.on .certi-sello img,
  .entra .pol-in.on .pol-ord,
  .entra .pol-in.on .pol-txt,.entra .cab-sec.on .etiqueta::before,
  .eq-portada .etiqueta.rev.on::before,.eq-portada h1.rev.on,
  .tec .eq-portada::after,.aurora,.paneles,.casco3d::after,
  .ficha,.docs li,.doc-uno,
  .hslide.activa h1,.hslide.activa h2,.hslide.activa .hslide-pie>p,
  .hslide.activa .hslide-pie>.b,.hslide.activa .hslide-bg,
  .marca::after{animation:none}
  .cara{transition:none}
  .flip-in{transform:none;transition:none}
  .flip:is(:hover,:focus-within,.volteada) .cara-atras::before{animation:none}
  .abanico-ico.activo svg *{animation:none}
  .srv-rejilla,.srv-haz,.srv-grad,.srv-piloto::after,
  .srv:is(:hover,:focus-within) .srv-ico svg *,
  .srv-portada .etiqueta.rev.on,.srv-portada h1.rev.on,
  .srv-portada .srv-lead-portada.rev.on,
  .srv-portada .srv-conteo.rev.on,.srv-portada .srv-indice.rev.on li,
  .entra .srv-txt .srv-cab.on,.entra .srv-txt .etiqueta.on,.entra .srv-txt h2.on,
  .entra .srv-txt .srv-lead.on,.entra .srv-txt .acc.on>*,
  .entra .srv-txt .grupo-lista.on>li{animation:none}
  /* el circuito del equipo: sin dibujo ni pulso, pero entero a la vista */
  /* el circuito del equipo: sin pulsos ni recorridos. La traza aparece ya
     soldada y el raton solo cambia el color, nada se mueve. */
  .eqc-pulso{display:none}
  .eqc-via,.eqc-anillo,.eqc-pad::before,
  .entra .eqc-nodo.on .eqc-ficha,.entra .eqc-cab.on>*,
  .entra .eqc-placa .eqc-traza,.entra .eqc-placa.on .eqc-traza,
  .entra .eqc-placa.on .eqc-ramales,.entra .eqc-placa.on .eqc-vias{animation:none}
  .entra .eqc-placa .eqc-traza{stroke-dashoffset:0}
  .eqc-nodo:is(:hover,:focus-within) .eqc-pad{transform:none}
  .entra .cta-in.on .etiqueta,.entra .cta-in.on .etiqueta::before,
  .entra .cta-in.on h2 span,.entra .cta-in.on .cta-lead,
  .entra .cta-in.on .b-3{animation:none}
  *{animation-duration:1ms!important;transition-duration:1ms!important}
}