/* ============================================================
   Q²tec · sitio.css
   Dirección: «El dato situado». El elemento firma es la banda de
   contexto: ninguna cifra importante aparece sin su escala.
   Orden: tokens · reinicio · tipografía · maquetación ·
          componentes · utilidades · movimiento · consultas.
   Los contrastes salen de scripts/contraste.mjs, no de la vista.
   ============================================================ */

/* ---------- 0. fuentes ----------
   Autoalojadas y recortadas al subconjunto latino, que cubre el español
   entero: ñ, Ñ, los acentos, ü, ç, ¿, ¡ y las comillas españolas.
   Nunca desde el CDN de Google, que manda la IP de cada visitante a un
   tercero. Las cuatro suman 110 KB. */
@font-face{
  font-family:Archivo;
  src:url(/assets/fuentes/archivo-var.woff2) format("woff2-variations");
  font-weight:500 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url(/assets/fuentes/plexsans-var.woff2) format("woff2-variations");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url(/assets/fuentes/plexmono-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url(/assets/fuentes/plexmono-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* respaldos con métricas ajustadas, para que el cambio de fuente no
   mueva el texto de sitio mientras carga */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial");
  size-adjust:98%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}
@font-face{
  font-family:"IBM Plex Sans Fallback";
  src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");
  size-adjust:101%;ascent-override:95%;descent-override:25%;line-gap-override:0%;
}

/* ---------- 1. tokens ---------- */
:root{
  /* color. Ninguna pareja en uso baja de su mínimo WCAG. */
  --lienzo:#f2f4f4;          /* papel frío, tintado al grado de sus fotos */
  --lienzo-alt:#e8ecec;      /* banda alterna, rompe la monotonía */
  --panel:#ffffff;
  --texto:#1f2020;           /* del logo. 14,79:1 sobre lienzo */
  --texto-suave:#4a5151;     /* 7,35:1 */
  --texto-tenue:#656e6d;     /* 4,75:1 */
  --acento:#1a99a2;          /* del logo. Solo gráfico: puntos y superficies */
  --acento-texto:#0f757c;    /* 4,93:1 sobre lienzo. Enlaces y botones */
  --acento-hover:#0a5a60;    /* 7,94:1 en botón */
  --acento-suave:#e7f3f3;
  --borde:#d5dbda;           /* línea decorativa */
  --borde-fuerte:#656e6d;    /* borde de elemento interactivo. 4,75:1 */

  /* tipografía. Escala de tercera mayor, 1.25, abierta con clamp */
  --f-display:Archivo,"Archivo Fallback",system-ui,sans-serif;
  --f-cuerpo:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,sans-serif;
  --f-codigo:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-xs:.78rem;
  --t-s:.885rem;
  --t-b:1rem;
  --t-m:clamp(1.05rem,.98rem + .32vw,1.24rem);
  --t-l:clamp(1.32rem,1.12rem + .95vw,1.82rem);
  --t-xl:clamp(1.72rem,1.33rem + 1.9vw,2.75rem);
  --t-2xl:clamp(2.25rem,1.55rem + 3.3vw,4.1rem);

  /* espaciado. Base 4, saltos que se repiten en toda la web */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px;
  --e-5:24px; --e-6:32px; --e-7:44px; --e-8:60px;
  --e-9:80px; --e-10:clamp(56px,8vw,116px);

  --canal:clamp(20px,4.5vw,48px);   /* margen lateral */
  --ancho:1180px;                    /* ancho máximo de contenido */
  --ancho-texto:66ch;                /* longitud de línea, por debajo de 80 */

  --r:2px;                           /* radio. Casi recto: es una web técnica */
  --r-g:3px;
  --borde-fino:1px solid var(--borde);
}

/* ---------- 2. reinicio ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  overflow-x:clip;
  scroll-padding-top:88px;
}
body{
  margin:0;
  overflow-x:hidden;
  overflow-x:clip;
  background:var(--lienzo);
  color:var(--texto);
  font-family:var(--f-cuerpo);
  font-size:17px;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
img{background:var(--lienzo-alt)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--acento-texto);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--acento-hover)}

/* foco visible en TODO lo enfocable. La web anterior tenía outline:none
   y ni un solo :focus-visible que lo sustituyera. */
:focus-visible{
  outline:2px solid var(--acento-texto);
  outline-offset:3px;
  border-radius:1px;
}
:focus:not(:focus-visible){outline:none}

.saltar{
  position:absolute;left:var(--canal);top:-100px;z-index:99;
  background:var(--texto);color:var(--lienzo);
  padding:12px 18px;font-weight:600;
  transition:top .15s ease;
}
.saltar:focus{top:12px}

/* la capa de fondo: un grano finísimo, quieto, del grado de las fotos.
   Hace que bajar por la página se sienta como moverse por un sitio. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

/* ---------- 3. tipografía ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h1{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.03em}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l);letter-spacing:-.018em}
h4{font-size:var(--t-m);font-weight:600;letter-spacing:-.01em}

p{max-width:var(--ancho-texto);text-wrap:pretty}
.prosa>*+*{margin-top:var(--e-4)}

/* Las listas dentro de .prosa se leían como un párrafo corrido: sin
   separación entre elementos y sin marca. Con siete listas de frases
   largas en el móvil, incluidas las dos de la portada que sostienen la
   premisa, eso era ilegible. */
.prosa ul,.prosa ol{display:grid;gap:var(--e-3)}
.prosa li{max-width:var(--ancho-texto);padding-left:22px;position:relative}
.prosa ul>li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1.5px;background:var(--acento);
}
.prosa ol{counter-reset:n}
.prosa ol>li{counter-increment:n}
.prosa ol>li::before{
  content:counter(n);position:absolute;left:0;top:0;
  font-family:var(--f-codigo);font-size:.78rem;color:var(--acento-texto);
}

/* Las tablas se pintaban con los valores por defecto del navegador dentro
   de una web maquetada: sin relleno de celda y sin línea de separación. */
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.tabla th,.tabla td{
  text-align:left;vertical-align:top;
  padding:var(--e-3) var(--e-4);
  border-bottom:var(--borde-fino);
}
.tabla th{
  font-family:var(--f-display);font-weight:600;
  color:var(--texto);
}
.tabla thead th{
  font-family:var(--f-codigo);font-weight:500;
  font-size:var(--t-xs);letter-spacing:.08em;
  /* texto-suave y no texto-tenue: el tenue sobre la banda alterna cae a
     4,41:1 y no llega al minimo. Lo cazo el autotest. */
  color:var(--texto-suave);
  background:var(--lienzo-alt);
  border-bottom:1px solid var(--borde-fuerte);
}
.tabla tbody tr:last-child td,.tabla tbody tr:last-child th{border-bottom:0}
/* Toda tabla vive dentro de su propio carril de desplazamiento: el body
   lleva overflow-x:clip, así que una tabla ancha sin esto deja columnas
   literalmente inalcanzables en el móvil. */
.tabla-carril{
  overflow-x:auto;
  border:var(--borde-fino);
  border-radius:var(--r);
  background:var(--panel);
  -webkit-overflow-scrolling:touch;
}
.tabla-carril>.tabla{min-width:520px}

/* el párrafo de respuesta: 40 a 60 palabras, lo primero bajo cada titular.
   Es el trozo que un buscador de IA puede extraer y citar tal cual. */
.respuesta{
  font-size:var(--t-m);
  color:var(--texto-suave);
  max-width:60ch;
  margin-top:var(--e-4);
}

.codigo{font-family:var(--f-codigo);font-size:.92em;letter-spacing:-.01em}
.marca{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em}
.marca sup{font-size:.62em;vertical-align:.42em;font-weight:700}

/* etiqueta de sección. Solo cuando codifica algo que no está en el titular:
   una categoría real, una fecha, un estado, un número de caso. */
.et{
  display:inline-block;
  font-family:var(--f-codigo);
  font-size:var(--t-xs);
  letter-spacing:.1em;
  color:var(--acento-texto);
  margin-bottom:var(--e-3);
}

/* ---------- 4. maquetación ---------- */
.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--canal);
}
.seccion{padding-block:var(--e-10)}
.seccion--alt{background:var(--lienzo-alt)}
.seccion--panel{background:var(--panel)}
.seccion__cabeza{max-width:34ch;margin-bottom:var(--e-8)}
.seccion__cabeza .respuesta{max-width:56ch}

/* esqueletos. Dos secciones seguidas nunca comparten uno.
   El generador avisa si dos vecinas repiten el mismo. */
.esq-dos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--e-10) clamp(32px,5vw,72px);
  align-items:center;
}
.esq-dos--texto-izq>*:first-child{order:0}
.esq-dos--texto-der>*:first-child{order:1}

.esq-rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
  border-top:var(--borde-fino);
}
/* sin tarjetas con sombra: las piezas se separan con líneas, que es
   como se separa la información en un plano, no en un catálogo SaaS */
.esq-rejilla>*{
  padding:var(--e-6) var(--e-5) var(--e-7);
  border-bottom:var(--borde-fino);
  border-right:var(--borde-fino);
}
.esq-rejilla>*:last-child{border-right:0}

.esq-pila{display:grid;gap:var(--e-5)}
.esq-ancho{max-width:none}

.medio{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--lienzo-alt);
}
.medio img{width:100%;height:100%;object-fit:cover}
.medio--alto{aspect-ratio:4/5}
.medio--ancho{aspect-ratio:16/9}

/* ---------- 5. componentes ---------- */

/* 5.1 cabecera */
.cabecera{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--lienzo) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:var(--borde-fino);
}
.nav{
  display:flex;align-items:center;gap:var(--e-5);
  min-height:72px;
}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img,.nav__logo svg{height:30px;width:auto}
.nav__menu{
  display:flex;align-items:center;gap:var(--e-5);
  margin-left:auto;
}
.nav__menu a{
  color:var(--texto-suave);
  text-decoration:none;
  font-size:var(--t-s);
  font-weight:500;
  padding-block:var(--e-2);
  border-bottom:2px solid transparent;
}
.nav__menu a:hover{color:var(--texto)}
.nav__menu a[aria-current="page"]{color:var(--texto);border-bottom-color:var(--acento)}
.nav__cta{flex:none}
.nav__cta .corto{display:none}
.nav__boton{
  display:none;flex:none;
  background:none;border:1px solid var(--borde-fuerte);
  border-radius:var(--r);
  padding:9px 11px;cursor:pointer;line-height:0;
}
.nav__boton svg{width:22px;height:22px;stroke:var(--texto);fill:none;stroke-width:2;stroke-linecap:round}
.cajon{display:none;border-top:var(--borde-fino);background:var(--panel)}
.cajon[data-abierto]{display:block}
.cajon ul{padding:var(--e-3) 0 var(--e-5)}
/* Solo los enlaces de la lista, NUNCA el botón: ".cajon a" tiene más
   especificidad que ".boton--principal" y le pisaba el color, dejando
   tinta sobre turquesa a 3:1. Lo cazó el autotest. */
.cajon ul a{
  display:block;padding:14px 0;
  color:var(--texto);text-decoration:none;font-weight:500;
  border-bottom:var(--borde-fino);
}
.cajon .boton{margin-top:var(--e-4);width:100%}

/* 5.2 botones. El texto dice qué pasa al pulsarlos, y la página de
   destino se titula igual. Nunca una flecha pegada al texto. */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-cuerpo);font-weight:600;font-size:var(--t-s);
  padding:13px 22px;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.boton--principal{background:var(--acento-texto);color:#fff}
.boton--principal:hover{background:var(--acento-hover);color:#fff}
.boton--secundario{
  background:transparent;color:var(--texto);
  border-color:var(--borde-fuerte);
}
.boton--secundario:hover{background:var(--panel);border-color:var(--texto)}
.boton svg{width:17px;height:17px;flex:none}

.enlace-lista{
  display:inline-block;
  color:var(--acento-texto);font-weight:600;font-size:var(--t-s);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--acento-texto) 35%,transparent);
  padding-bottom:1px;
}
.enlace-lista:hover{border-bottom-color:currentColor}

/* 5.3 LA BANDA DE CONTEXTO. El elemento firma.
   Ninguna cifra importante aparece sin dónde empieza su escala,
   dónde acaba, y dónde cae ella. Si se quita, la web se convierte
   en un sitio técnico blanco indistinguible de cualquier otro. */
.dato{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--e-3) clamp(24px,4vw,48px);
  padding:var(--e-5) var(--e-5) var(--e-4);
  background:var(--panel);
  border:var(--borde-fino);
  border-left:3px solid var(--acento);
  border-radius:var(--r);
}
.dato__cifra{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3rem);
  line-height:.88;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dato__cifra .u{font-size:.42em;font-weight:600;color:var(--texto-tenue);margin-left:.12em}
.dato__frase{
  grid-column:1/-1;
  font-size:var(--t-s);color:var(--texto-suave);
  margin-top:var(--e-3);max-width:62ch;
}
.dato__fuente{
  display:block;margin-top:var(--e-1);
  font-size:var(--t-xs);color:var(--texto-tenue);
}
/* Se dibuja con HTML y CSS, no con SVG. Un SVG estirado a lo ancho con
   preserveAspectRatio="none" aplasta las etiquetas, que es justo lo que
   no puede pasarle al elemento firma. Así además anima con una sola
   propiedad y pesa cero. La posición del valor va en --v. */
.banda{--v:0%;width:100%;min-width:0;padding-block:var(--e-1)}
.banda__pista{position:relative;height:18px}
.banda__riel{position:absolute;left:0;right:0;top:8px;height:1.5px;background:var(--borde)}
.banda__lleno{position:absolute;left:0;top:7.25px;height:3px;width:var(--v);background:var(--acento)}
.banda__hito{position:absolute;top:2px;width:1.5px;height:14px;background:var(--borde);margin-left:-.75px}
.banda__punto{
  position:absolute;top:9px;left:var(--v);
  width:9px;height:9px;border-radius:50%;
  background:var(--acento);transform:translate(-50%,-50%);
}
.banda__punto::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:var(--acento);opacity:.16;
}
.banda__escala{
  position:relative;height:15px;margin-top:var(--e-1);
  font-family:var(--f-codigo);font-size:10.5px;
  color:var(--texto-tenue);letter-spacing:.05em;
}
.banda__escala span{position:absolute;white-space:nowrap;top:0}
.banda__escala .ini{left:0}
.banda__escala .fin{right:0}
.banda__escala .viva{
  left:var(--v);transform:translateX(-50%);
  color:var(--acento-texto);font-weight:500;
}

/* 5.4 sellos y certificaciones. Con su enlace de verificación
   cuando el organismo lo publica. */
.sellos{display:flex;flex-wrap:wrap;gap:var(--e-6);align-items:center}
.sello{display:flex;align-items:center;gap:var(--e-3);text-decoration:none;color:inherit}
.sello img{height:64px;width:auto;background:none}
.sello__txt{font-size:var(--t-xs);color:var(--texto-suave);max-width:22ch;line-height:1.4}
.sello:hover .sello__txt{color:var(--texto)}

/* 5.5 colaboradores. Sus logotipos reales, nunca redibujados con
   tipografía. En gris para que no compitan con la señal, pero con
   opacidad alta: algunos son claros y a .72 desaparecían. */
.socios{display:flex;flex-wrap:wrap;gap:var(--e-7);align-items:center;justify-content:center}
.socios img{
  height:34px;width:auto;background:none;
  opacity:.88;filter:grayscale(1) contrast(1.12);
  transition:opacity .18s ease,filter .18s ease;
}
.socios a:hover img,.socios a:focus-visible img{opacity:1;filter:none}

/* 5.11 artículo de noticia */
.articulo{padding-top:var(--e-7)}
.articulo h1{max-width:20ch}
.articulo__fecha{
  font-family:var(--f-codigo);font-size:var(--t-s);color:var(--texto-tenue);
  margin-top:var(--e-4);
}
/* La ficha de noticia abría con el titular sobre papel y una imagen pequeña
   al lado: 2,4 pantallas con el 35% vacío. La cabecera va en banda oscura,
   como el resto del sitio. Sin foto de fondo: las imágenes de noticia son
   del cliente y no todas dan el ancho, y poner una genérica sería mentir
   sobre lo que ilustra. */
.articulo__cabeza{padding-block:clamp(56px,7vw,96px)}
.articulo__cabeza h1{max-width:24ch}
.articulo__cabeza .articulo__fecha{color:rgba(255,255,255,.72)}
.franja .miga{color:rgba(255,255,255,.72)}
.franja .miga a{color:rgba(255,255,255,.78)}
.franja .miga a:hover{color:#fff}
.franja .miga [aria-current]{color:rgba(255,255,255,.86)}
.articulo__medio{margin:var(--e-7) 0 var(--e-7);border:var(--borde-fino);background:var(--panel)}
.articulo__medio img{width:100%;height:auto}
/* las verticales y las pequeñas se contienen, pero con sitio de verdad:
   340 px de alto las dejaba en sello de correos */
.articulo__medio--contener{padding:var(--e-6);text-align:center;max-width:min(100%,760px);margin-inline:auto}
.articulo__medio--contener img{width:auto;max-height:min(560px,70vh);margin-inline:auto}
.articulo__cuerpo{max-width:68ch}
.articulo__cuerpo h2{font-size:var(--t-l);margin-top:var(--e-7)}
.articulo__cuerpo h3{font-size:var(--t-m);margin-top:var(--e-6)}
.articulo__cuerpo ul{display:grid;gap:var(--e-2);margin-top:var(--e-4)}
.articulo__cuerpo li{padding-left:22px;position:relative}
.articulo__cuerpo li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1.5px;background:var(--acento);
}
.articulo__aviso{
  margin-top:var(--e-8);padding-top:var(--e-4);
  border-top:var(--borde-fino);
  font-size:var(--t-s);color:var(--texto-tenue);
}
.volver{margin-top:var(--e-6)}

/* 5.12 rutas del 404 */
.rutas404{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0;margin-top:var(--e-7);border-top:var(--borde-fino);
}
.ruta404{
  display:block;padding:var(--e-5) var(--e-5) var(--e-6);
  border-bottom:var(--borde-fino);border-right:var(--borde-fino);
  text-decoration:none;color:inherit;
}
.ruta404:last-child{border-right:0}
.ruta404:hover{background:var(--panel)}
.ruta404__t{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:var(--t-m);color:var(--acento-texto);margin-bottom:var(--e-2);
}
.ruta404__d{display:block;font-size:var(--t-s);color:var(--texto-suave)}

/* 5.6 miga de pan */
.miga{font-size:var(--t-xs);color:var(--texto-tenue);margin-bottom:var(--e-4)}
.miga ol{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.miga li:not(:last-child)::after{content:"›";margin-left:var(--e-2);color:var(--borde-fuerte)}
.miga a{color:var(--texto-tenue);text-decoration:none}
.miga a:hover{color:var(--acento-texto)}

/* 5.7 FAQ. Sale de las objeciones reales de sus compradores. */
.faq{border-top:var(--borde-fino)}
.faq details{border-bottom:var(--borde-fino)}
.faq summary{
  display:flex;align-items:flex-start;gap:var(--e-4);
  padding:var(--e-5) 0;cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:var(--t-m);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;margin-left:auto;margin-top:.35em;
  width:12px;height:12px;
  border-right:2px solid var(--acento-texto);
  border-bottom:2px solid var(--acento-texto);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .cuerpo{padding:0 0 var(--e-5)}
.faq .cuerpo p{color:var(--texto-suave)}

/* 5.8 fichas de noticia */
.noticias{display:grid;gap:var(--e-6);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.noticia{display:flex;flex-direction:column;background:var(--panel);border:var(--borde-fino);border-radius:var(--r)}
.noticia__medio{aspect-ratio:16/10;overflow:hidden;border-bottom:var(--borde-fino)}
.noticia__medio img{width:100%;height:100%;object-fit:cover}
.noticia__medio img.contener{object-fit:contain;padding:var(--e-4);background:var(--panel)}
.noticia__cuerpo{padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-3);flex:1}
.noticia__fecha{font-family:var(--f-codigo);font-size:var(--t-xs);color:var(--texto-tenue)}
.noticia h3{font-size:var(--t-m)}
.noticia h3 a{color:inherit;text-decoration:none}
.noticia h3 a:hover{color:var(--acento-texto)}
.noticia p{font-size:var(--t-s);color:var(--texto-suave);flex:1}

/* 5.9 pie */
.pie{background:var(--texto);color:#c9cfce;padding-block:var(--e-9) var(--e-6)}
.pie a{color:#e4e9e8}
.pie a:hover{color:#fff}
.pie__rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--e-7)}
.pie__titulo{color:#fff;font-size:var(--t-s);font-weight:600;letter-spacing:0;margin-bottom:var(--e-3)}
.pie ul{display:grid;gap:var(--e-2)}
.pie li{font-size:var(--t-s)}
/* background:none igual que .sello img y .socios img: el reinicio pone
   fondo de marcador a toda imagen y aquí dejaba una placa gris clara
   detrás del logo, sobre el pie oscuro, en las 33 páginas. */
.pie__logo{height:30px;width:auto;margin-bottom:var(--e-4);background:none}
.pie__lema{color:#9aa4a2;font-size:var(--t-s);max-width:34ch}
.pie__legal{
  margin-top:var(--e-8);padding-top:var(--e-5);
  border-top:1px solid #3a4140;
  display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-5);
  align-items:center;justify-content:space-between;
  font-size:var(--t-xs);color:#9aa4a2;
}
.pie__legal a{text-decoration:none}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4)}
.pie__credito{color:#9aa4a2}
.pie__nota{
  margin-top:var(--e-5);font-size:var(--t-xs);color:#8b9694;
  max-width:78ch;line-height:1.6;
}

/* 5.10 bloque de cierre. Baja hacia la única llamada a la acción. */
.cierre{
  background:var(--panel);
  border:var(--borde-fino);
  border-top:3px solid var(--acento);
  border-radius:var(--r);
  padding:clamp(32px,5vw,56px);
  display:flex;flex-wrap:wrap;gap:var(--e-5);
  align-items:center;justify-content:space-between;
}
.cierre h2{max-width:18ch}
.cierre p{color:var(--texto-suave);margin-top:var(--e-3);max-width:46ch}

/* ---------- 6. utilidades ---------- */
.visualmente-oculto{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.centrado{margin-inline:auto;text-align:center}
.centrado p{margin-inline:auto}
.sin-margen{max-width:none}

/* ---------- 7. movimiento ----------
   Un solo momento orquestado: al cargar, la banda del hero se dibuja
   una vez y el punto aterriza. Nada de desvanecer y subir en cada
   sección, que es el patrón que hace que una web se lea como generada.
   El contenido se sirve VISIBLE y la animación lo mejora, nunca al revés. */
@media (prefers-reduced-motion:no-preference){
  .banda--anima .banda__lleno{
    width:0;
    animation:crecer .9s cubic-bezier(.22,.61,.36,1) .2s forwards;
  }
  .banda--anima .banda__punto,
  .banda--anima .banda__escala .viva{
    opacity:0;
    animation:aterrizar .35s ease-out .95s forwards;
  }
}
@keyframes crecer{to{width:var(--v)}}
@keyframes aterrizar{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---------- 8. consultas de medios ---------- */
@media (max-width:940px){
  .esq-dos{grid-template-columns:1fr;gap:var(--e-7)}
  .esq-dos--texto-der>*:first-child{order:0}
  .esq-dos .medio{order:-1}
  .pie__rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* El menú se pliega, pero la ÚNICA llamada a la acción de la web no se
     esconde: toda la web está construida alrededor de esa conversión y
     escondiéndola no había ni un botón en pantalla en siete páginas. */
  .nav__menu{display:none}
  .nav__cta{margin-left:auto;padding:10px 14px;font-size:var(--t-xs)}
  .nav__cta .largo{display:none}
  .nav__cta .corto{display:inline}
  .nav__boton{display:block;margin-left:var(--e-3)}
  .esq-rejilla>*{border-right:0}
  .cierre{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .dato{grid-template-columns:1fr}
  .pie__rejilla{grid-template-columns:1fr;gap:var(--e-6)}
  .sellos{gap:var(--e-5)}
  .sello img{height:52px}
  .socios{gap:var(--e-5)}
}

/* ---------- 9. impresión ---------- */
@media print{
  .cabecera,.cajon,.cierre,.saltar{display:none}
  body{background:#fff;font-size:11pt}
  body::before{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ============================================================
   10. CAPA VISUAL
   Añadida después de ver la web construida a tamaño real: la
   portada medía 12,4 pantallas con el 28,7% del alto completamente
   vacío, el mayor hueco continuo era de 600 px, y las imágenes
   ocupaban el 1,2% del área. Todo el contenido vivía en una
   columna de 500 px dentro de un contenedor de 1180.
   Esto es lo que faltaba: escala, imagen a sangre y densidad.
   ============================================================ */

/* ---------- 10.1 hero a sangre ---------- */
.hero{
  position:relative;
  min-height:min(88vh,780px);
  display:flex;align-items:flex-end;
  padding-block:var(--e-10) var(--e-9);
  background:var(--texto);
  overflow:hidden;
  isolation:isolate;
}
.hero__fondo{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  background:none;
}
/* El velo: sin él, un titular blanco sobre una nave clara no se lee.
   Iba denso ARRIBA (.88) y se abría a .34 justo en el tramo de abajo... que
   es exactamente donde cae el texto, porque .hero alinea a flex-end. Medido
   sobre los píxeles con scripts/contraste-hero.mjs, el párrafo llegaba a
   2,29:1 sobre un lucernario. Ahora el peso va abajo, que es donde está el
   texto, y hay un sesgo a la izquierda por la misma razón.
   Un blanco puro necesita .55 de velo para llegar a 4,5:1; el tramo del
   texto queda por encima de eso con margen. */
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(12,16,17,.26) 0%,rgba(12,16,17,.12) 34%,rgba(12,16,17,.34) 74%,rgba(12,16,17,.56) 100%),
    linear-gradient(96deg,rgba(12,16,17,.34) 0%,rgba(12,16,17,.1) 58%,rgba(12,16,17,0) 88%);
}
.hero__cuerpo{position:relative;max-width:62ch}
/* el párrafo se queda en la mitad protegida, no cruza a la zona clara */
.hero__cuerpo .respuesta{max-width:52ch}
/* La sombra va DETRÁS DEL TEXTO, no sobre toda la foto. Oscurecer el hero
   entero para salvar el contraste dejaba la nave casi negra y quitaba al
   hero lo único que aporta. Así la mancha sigue al bloque, mida lo que
   mida el titular, y la foto se sigue viendo alrededor. */
.hero__cuerpo::before{
  content:'';position:absolute;
  inset:-52px -140px -80px -160px;
  pointer-events:none;
  background:radial-gradient(118% 108% at 24% 56%,
    rgba(12,16,17,.86) 0%,rgba(12,16,17,.68) 42%,rgba(12,16,17,.3) 70%,rgba(12,16,17,0) 88%);
}
/* En una pantalla de 390 px, esos 140-160 px de margen a cada lado tapaban
   la foto de borde a borde y el hero volvía a quedarse en negro: el mismo
   fallo que se corrigió en escritorio, colado por medir solo allí. Aquí el
   velo se ciñe al texto y se apoya más en el velo general. */
@media (max-width:700px){
  .hero__cuerpo::before{
    inset:-24px -20px -32px -22px;
    background:radial-gradient(128% 116% at 34% 54%,
      rgba(12,16,17,.8) 0%,rgba(12,16,17,.6) 46%,rgba(12,16,17,.24) 74%,rgba(12,16,17,0) 94%);
  }
}
.hero__cuerpo>*{position:relative}
/* La miga del hero iba en estilos en línea, y la página actual a .55 de
   opacidad se quedaba en 3,46:1 sobre la foto. Medido con
   scripts/contraste-hero.mjs. Aquí, y no en cada ficha, para que no vuelva
   a irse cada página por su lado. */
.hero .miga{color:rgba(255,255,255,.72)}
.hero .miga a{color:rgba(255,255,255,.78)}
.hero .miga a:hover{color:#fff}
.hero .miga [aria-current]{color:rgba(255,255,255,.86)}
.hero h1{
  color:#fff;
  font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:.98;letter-spacing:-.035em;
  text-wrap:balance;
}
.hero .cita{
  margin-top:var(--e-5);
  font-size:clamp(1rem,1.6vw,1.2rem);
  color:rgba(255,255,255,.84);
  border-left:2px solid var(--acento);
  padding-left:var(--e-4);
  max-width:54ch;
}
.hero .cita cite{display:block;font-style:normal;font-size:.86em;color:rgba(255,255,255,.62);margin-top:var(--e-2)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-7)}
.hero .boton--secundario{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .boton--secundario:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.hero .et{color:#7fdbe1}

/* ---------- 10.2 tira de cifras, montada sobre el hero ---------- */
.tira{position:relative;z-index:2;margin-top:calc(var(--e-8) * -1)}
.tira__caja{
  background:var(--panel);
  border:var(--borde-fino);
  border-radius:var(--r);
  box-shadow:0 18px 48px -28px rgba(16,24,25,.45);
  display:grid;grid-template-columns:repeat(4,1fr);
  overflow:hidden;
}
.tira__dato{padding:var(--e-6) var(--e-5);border-left:var(--borde-fino)}
.tira__dato:first-child{border-left:0}
.tira__cifra{
  display:block;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.7rem,2.7vw,2.4rem);line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.tira__cifra .u{color:var(--acento-texto)}
.tira__pie{display:block;margin-top:var(--e-2);font-size:var(--t-s);color:var(--texto-suave)}

/* ---------- 10.3 franja a sangre, con imagen de fondo ---------- */
.franja{
  position:relative;
  padding-block:clamp(80px,11vw,150px);
  background:var(--texto);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.franja__fondo{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;background:none;
}
.franja__velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,16,17,.93) 0%,rgba(12,16,17,.8) 46%,rgba(12,16,17,.42) 100%);
}
.franja h2{color:#fff;font-size:clamp(1.9rem,4vw,3.1rem);max-width:20ch}
.franja h3{color:#fff}
.franja p{color:rgba(255,255,255,.8)}
.franja .respuesta{color:rgba(255,255,255,.88)}
.franja__cuerpo{max-width:58ch}
.franja .destacado{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.3rem,2.5vw,1.9rem);
  color:#fff;line-height:1.24;max-width:26ch;
  border-left:3px solid var(--acento);padding-left:var(--e-5);
}
.franja .boton--secundario{color:#fff;border-color:rgba(255,255,255,.5)}
.franja .boton--secundario:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.franja .enlace-lista{color:#7fdbe1;border-bottom-color:rgba(127,219,225,.42)}
.franja .enlace-lista:hover{color:#fff}
.franja .et{color:#7fdbe1}
.franja ul.prosa li::before,.franja .prosa ul>li::before{background:#7fdbe1}

/* ---------- 10.4 tarjetas de línea, con imagen ---------- */
.lineas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--e-5);
}
/* Cuatro piezas hermanas. Con el mínimo de 290px caben 3 y la cuarta se
   queda huérfana en una segunda fila. Con 240px entran las cuatro en una
   sola fila y sigue plegando a 3, 2 y 1 columna al estrechar. */
.lineas--cuatro{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.linea{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:var(--borde-fino);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.linea:hover{border-color:var(--acento);transform:translateY(-3px)}
.linea__medio{aspect-ratio:16/9;overflow:hidden;border-bottom:var(--borde-fino);background:var(--lienzo-alt)}
.linea__medio img{width:100%;height:100%;object-fit:cover}
.linea__cuerpo{padding:var(--e-5) var(--e-5) var(--e-6);display:flex;flex-direction:column;gap:var(--e-3);flex:1}
.linea__n{
  font-family:var(--f-codigo);font-size:var(--t-xs);
  color:var(--acento-texto);letter-spacing:.1em;
}
.linea h3{font-size:var(--t-m)}
.linea p{font-size:var(--t-s);color:var(--texto-suave);flex:1;max-width:none}
.linea a{margin-top:auto}

/* ---------- 10.5 media a sangre ---------- */
.sangre{width:100vw;margin-inline:calc(50% - 50vw);max-width:100vw}
.medio--sangre{border-radius:0;aspect-ratio:21/9}
@media (max-width:700px){.medio--sangre{aspect-ratio:4/3}}

/* ---------- 10.6 marquesina de colaboradores ---------- */
.marquesina{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquesina__pista{display:flex;width:max-content;gap:var(--e-9);align-items:center}
@media (prefers-reduced-motion:no-preference){
  .marquesina__pista{animation:desfilar 42s linear infinite}
  .marquesina:hover .marquesina__pista{animation-play-state:paused}
}
@keyframes desfilar{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquesina{-webkit-mask-image:none;mask-image:none}
  .marquesina__pista{flex-wrap:wrap;width:auto;justify-content:center;gap:var(--e-7)}
  .marquesina__pista>.grupo:nth-child(2){display:none}
}
.marquesina .grupo{display:flex;gap:var(--e-9);align-items:center}
/* Los PNG del cliente son de 400x177 con mucho aire alrededor del logotipo,
   así que a 36 px de caja la marca quedaba diminuta. */
.marquesina img{height:clamp(44px,4vw,58px);width:auto;background:none;opacity:.9;filter:grayscale(1) contrast(1.12)}

/* ---------- 10.7 cierre a sangre en la señal ---------- */
.cierre--fuerte{
  /* El degradado se queda en el tramo oscuro del turquesa: llegando
     hasta el de marca, el blanco encima caia a 3,43:1. Y lleva
     background-color ademas del degradado, para que se pueda medir. */
  background-color:var(--acento-hover);
  background-image:linear-gradient(115deg,var(--acento-hover),#0d6b71 60%,var(--acento-texto));
  border:0;color:#fff;
  padding:clamp(44px,6vw,72px);
}
.cierre--fuerte h2{color:#fff;max-width:20ch}
.cierre--fuerte p{color:rgba(255,255,255,.9)}
.cierre--fuerte .boton--principal{background:#fff;color:var(--acento-hover)}
.cierre--fuerte .boton--principal:hover{background:var(--lienzo);color:var(--acento-hover)}
/* El correo y el teléfono del cierre se quedaban en el turquesa de enlace
   sobre el turquesa del panel: 1,46:1. En claro, y con el subrayado marcado
   para que se sigan leyendo como enlaces sin depender del color. */
.cierre--fuerte a:not(.boton){color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.cierre--fuerte a:not(.boton):hover{color:#fff;border-bottom-color:#fff}
.cierre--fuerte .enlace-lista{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

/* ---------- 10.8 densidad ----------
   Las secciones respiraban de más: 116 px arriba y abajo con el
   contenido en media columna dejaba huecos de 600 px seguidos. */
.seccion{padding-block:clamp(52px,6.5vw,88px)}
.seccion--apretada{padding-block:clamp(36px,4vw,56px)}
.seccion__cabeza{max-width:42ch;margin-bottom:var(--e-7)}
.esq-dos{gap:var(--e-8) clamp(32px,4.5vw,64px)}
/* el texto suelto no se queda en media columna cuando no hay nada al lado */
.contenedor>.prosa,.contenedor>.esq-pila>.prosa{max-width:none}

@media (max-width:860px){
  .tira__caja{grid-template-columns:repeat(2,1fr)}
  .tira__dato:nth-child(3){border-left:0}
  .tira__dato:nth-child(n+3){border-top:var(--borde-fino)}
}
@media (max-width:560px){
  .tira{margin-top:calc(var(--e-6) * -1)}
  .tira__caja{grid-template-columns:1fr}
  .tira__dato{border-left:0;border-top:var(--borde-fino)}
  .tira__dato:first-child{border-top:0}
  .hero{min-height:auto;padding-block:var(--e-9) var(--e-8)}
}