/* Kuantia — web corporativa.
   Normas: «marca/Normas del sistema visual.md». Dos valores, dos pesos, doce columnas.
   Escala en px (pt de la presentación uno a uno): 120 / 72 / 48 / 30 / 24 / 18 / 15 / 13 / 11.
   --tinta y --papel son el par del contexto: se intercambian en las secciones negras y sobre foto. */

:root {
  --negro: #0A0A0A;
  --blanco: #FFFFFF;
  --tinta: var(--negro);
  --papel: var(--blanco);
  --med: 22px;
  --margen: max(83px, calc((100vw - 1440px) / 2 + 83px));
  --aire: 120px;
  --curva: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 20.5px;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

b, strong { font-weight: 500; }
h1, h2, h3 { font-weight: 300; }
img, video { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Sección ────────────────────────────────────────── */

.s {
  position: relative;
  padding: var(--aire) var(--margen);
  background: var(--papel);
  color: var(--tinta);
}

.s.negra, .s.foto, .cabecera.sobre { --tinta: var(--blanco); --papel: var(--negro); }

.s.foto {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 86svh;
  overflow: hidden;
  background-image: linear-gradient(rgba(10,10,10,var(--velo,.55)), rgba(10,10,10,var(--velo,.55))), var(--img);
  background-size: cover;
  background-position: var(--pos, center);
}
/* Con vídeo el velo va en una capa aparte, por encima del vídeo y de la foto de espera. */
/* Las entradas con vídeo ocupan la pantalla entera, en escritorio y en móvil. */
.s.foto.video { background-image: var(--img); min-height: 100svh; }

.s.foto.portada { padding-bottom: 72px; }
/* Mientras el aviso de cookies está abierto, la entrada sube su texto el alto del aviso. */
.s.foto.video:not(.cierre):not(.portada) { padding-bottom: calc(var(--aire) + var(--aviso, 0px)); transition: padding-bottom .3s var(--curva); }
.s.foto.portada { padding-bottom: calc(72px + var(--aviso, 0px)); transition: padding-bottom .3s var(--curva); }

/* Vídeo de fondo: ocupa la sección entera, con el mismo velo que la foto que queda debajo. */
.s.foto > .fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}
.s.foto.video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10,10,10,var(--velo,.55));
}
.s.foto > .r { position: relative; z-index: 1; }

/* ── Retícula: --c en escritorio, --m en móvil (cuatro columnas) ── */

.r {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--med);
  align-content: start;
}
.r > * { grid-column: var(--c, 1 / -1); }

/* ── Escala tipográfica ─────────────────────────────── */

.cifra { font-size: 120px; line-height: 112px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.t72   { font-size: 72px;  line-height: 66px;  letter-spacing: -.03em; }
.tit   { font-size: 48px;  line-height: 47px;  letter-spacing: -.025em; }
.entra { font-size: 30px;  line-height: 32px;  letter-spacing: -.015em; }
.epi   { font-size: 24px;  line-height: 26px;  letter-spacing: -.01em; font-weight: 500; }
.tx    { font-size: 18px;  line-height: 20.5px; letter-spacing: -.005em; }
.tb    { font-size: 15px;  line-height: 17px; }
.nota  { font-size: 11px;  line-height: 12.5px; }
.cab   { font-weight: 500; }
.fino  { font-weight: 300; }

.unidad { font-size: .3em; letter-spacing: 0; vertical-align: top; position: relative; top: .28em; margin-left: .06em; }

/* ── Inversión: el único énfasis ────────────────────── */

.inv { background: var(--tinta); color: var(--papel); }

.banda { margin: 0 -16px; padding: 16px; }

/* El relleno de la inversión entra desde la izquierda al pasar o enfocar. */
.ir, .nav a, .datos a {
  background-image: linear-gradient(var(--relleno), var(--relleno));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .28s var(--curva), color .28s var(--curva);
}
.ir:hover, .ir:focus-visible,
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"],
.nav .con-sub:hover > a, .nav .con-sub:focus-within > a, .nav .con-sub.tocada > a,
.datos a:hover, .datos a:focus-visible { background-size: 100% 100%; }

/* Enlace de sección: en reposo ya es un bloque invertido; al pasar vuelve al color del fondo. */
.ir {
  --relleno: var(--papel);
  display: inline-block;
  padding: 12px 16px;
  font-weight: 500;
  background-color: var(--tinta);
  color: var(--papel);
}
.ir:hover, .ir:focus-visible { color: var(--tinta); }

:focus-visible { outline: 4px solid currentColor; outline-offset: 2px; }

/* ── Cabecera: logotipo a la izquierda, secciones a la derecha ── */

.cabecera {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 40px var(--margen) 0;
  color: var(--tinta);
}

.logo img { width: 192px; height: 48px; margin-left: -5px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav ul { display: flex; gap: 4px; }
.nav a, .nav .aqui, .menu {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a { --relleno: var(--tinta); }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"],
.nav .con-sub:hover > a, .nav .con-sub:focus-within > a, .nav .con-sub.tocada > a { color: var(--papel); }
.nav .idioma { margin-left: 28px; }
/* La inversión marca la página en la que se está; la sección de la que cuelga (un sector, de «Sectores») va en Medium. */
.nav .aqui, .nav a[aria-current="true"] { font-weight: 500; }

/* Sectores: lista que se abre bajo su enlace al pasar el ratón o al llegar con el teclado, sin JavaScript.
   Siempre negra con letra blanca, esté la cabecera sobre foto, fija o sobre papel. Cerrada sigue en la página
   (solo recortada), para que el teclado y el lector de pantalla lleguen a ella.
   «cerrada» la pone Escape; «tocada», el primer toque con el dedo en tableta. En móvil va dentro del menú, más abajo. */
@media (min-width: 768px) {
  .nav .con-sub { position: relative; }
  .nav .sub {
    --tinta: var(--blanco); --papel: var(--negro);
    position: absolute;
    top: 100%; left: -8px;
    display: block;
    padding: 8px;
    background: var(--papel);
    color: var(--tinta);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .28s var(--curva);
  }
  .nav .con-sub:hover > .sub, .nav .con-sub:focus-within > .sub, .nav .con-sub.tocada > .sub { clip-path: inset(0); }
  .nav .con-sub.cerrada > .sub { visibility: hidden; }
  /* En la cabecera fija la primera línea empieza donde acaba la barra. */
  .cabecera.fija .nav .sub { padding-top: 22px; }
}

.menu { display: none; font: inherit; font-weight: 500; font-size: 13px; background: none; border: 0; color: inherit; cursor: pointer; }

/* Al subir por la página la cabecera vuelve, fija y más baja. */
.cabecera.fija {
  position: fixed;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--papel);
  transform: translateY(-100%);
  transition: transform .35s var(--curva);
}
.cabecera.fija.vista { transform: none; }
.cabecera.fija .logo img { width: 144px; height: 36px; margin-left: -4px; }

/* ── Piezas de la portada ───────────────────────────── */

.tres { margin-top: 72px; row-gap: 24px; }
.cifras { row-gap: 40px; }
.cinco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--med); row-gap: 20px; }
.no-es p { margin-bottom: 16px; }
/* Remate de sección: la nota a la derecha y el enlace a la izquierda, sobre la misma base. En móvil, la nota primero. */
.pie-seccion { margin-top: 96px; row-gap: 32px; align-items: end; grid-auto-flow: row dense; }

/* ── Páginas interiores: tablas hechas con la retícula, filas separadas por espacio ── */

.filas { margin-top: 56px; }
.fila { align-items: baseline; row-gap: 4px; }
.fila + .fila { margin-top: 20px; }
.fila.cabe { margin-bottom: 28px; }

/* Número, nombre y descripción. */
.n3 > :nth-child(1) { grid-column: 1 / 2; }
.n3 > :nth-child(2) { grid-column: 2 / 6; }
.n3 > :nth-child(3) { grid-column: 6 / 13; }
/* Nombre y descripción. */
.d2 > :nth-child(1) { grid-column: 1 / 6; }
.d2 > :nth-child(2) { grid-column: 6 / 13; }
/* Tres columnas. */
.d3 > :nth-child(1) { grid-column: 1 / 4; }
.d3 > :nth-child(2) { grid-column: 4 / 8; }
.d3 > :nth-child(3) { grid-column: 8 / 13; }
/* Comparación: el nombre y cinco respuestas. */
.comp > :nth-child(1) { grid-column: 1 / 3; }
.comp > :nth-child(n+2) { grid-column: span 2; }

.rejilla { margin-top: 56px; row-gap: 40px; }
.rejilla.de3 > * { grid-column: span 4; }
.rejilla.de4 > * { grid-column: span 3; }
.rejilla .epi, .rejilla .cab { margin-bottom: 6px; }

/* ── Textos legales: una columna de lectura ── */

.legal { max-width: 760px; }
.legal h2 { font-size: 24px; line-height: 26px; letter-spacing: -.01em; font-weight: 500; margin: 56px 0 16px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { margin-bottom: 12px; }
.legal a, .aviso a { font-weight: 500; }
.legal .fila { margin: 0 0 20px; }

/* ── Blog: el artículo es una columna de lectura; el veredicto de cada afirmación va en inversión ── */

.s.foto.baja { min-height: 62svh; }
.s.foto.baja h1 { text-wrap: balance; }
.articulo { max-width: 760px; }
.articulo p { margin-bottom: 12px; }
.articulo .entra { margin-bottom: 48px; }
.articulo h2 { font-size: 30px; line-height: 32px; letter-spacing: -.015em; margin: 72px 0 16px; }
.articulo .veredicto { margin-bottom: 20px; font-weight: 500; }
.articulo .veredicto span { display: inline-block; padding: 4px 10px; }
.articulo a:not(.ir) { font-weight: 500; }

/* ── Aviso de cookies: barra translúcida al pie; rechazar, aceptar y personalizar pesan lo mismo ── */

.aviso {
  --tinta: var(--blanco); --papel: var(--negro);
  position: fixed;
  z-index: 4;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding: 14px var(--margen);
  background: rgba(10,10,10,.62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--tinta);
}
.aviso p { flex: 1 1 320px; }
.aviso .botones { order: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.aviso .opciones { order: 2; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.aviso [hidden] { display: none; }
.aviso label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.aviso input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin: 0;
  border: 2px solid var(--tinta);
  cursor: pointer;
}
.aviso input:checked { background: var(--tinta); box-shadow: inset 0 0 0 3px var(--negro); }
.aviso input:disabled { opacity: .5; cursor: default; }
.aviso input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.aviso .ir { font: inherit; font-size: 13px; line-height: 16px; font-weight: 500; padding: 7px 12px; border: 0; cursor: pointer; }

/* ── Cierre y pie: una sola pieza sobre la imagen ───── */

.cierre { min-height: 100svh; justify-content: space-between; padding-top: 200px; padding-bottom: calc(48px + var(--aviso, 0px)); }
.datos { margin-top: 120px; row-gap: 48px; align-items: start; }
.datos address { font-style: normal; }
.datos li + li { margin-top: 6px; }
.datos .tel { display: table; margin-top: 20px; }
.datos a { --relleno: var(--tinta); padding: 2px 4px; margin: -2px -4px; }
.datos a:hover, .datos a:focus-visible { color: var(--papel); }

/* ── Movimiento: el titular grande llega línea a línea, una sola vez ── */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .rev .l {
    display: inline-block;
    clip-path: inset(0 0 100% 0);
    transform: translateY(.32em);
    transition: clip-path 1s var(--curva), transform 1s var(--curva);
    transition-delay: calc(var(--i, 0) * 120ms);
  }
  .js .rev.visto .l { clip-path: inset(-.25em -.1em); transform: none; }

  /* Portada: cabecera y frase de apoyo aparecen después del titular. */
  .portada .tx, .entra .cabecera:not(.fija) { animation: aparece 1s .7s both; }
  @keyframes aparece { from { opacity: 0; } }

  /* El vídeo entra desde negro para que no se note el cambio con la foto. */
  /* La foto de espera es el primer fotograma del vídeo y el paso es corto: un fundido largo
     entre una foto quieta y un vídeo que ya se mueve se ve doble, como desenfocado. */
  .s.foto > .fondo { opacity: 0; transition: opacity .25s linear; }
  .s.foto > .fondo.listo { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .s.foto > .fondo { display: none; }
  .ir, .nav a, .nav .sub, .datos a, .cabecera.fija { transition: none; }
}

/* ── Tableta: los tres tamaños mayores bajan un escalón ── */

@media (max-width: 1099px) {
  :root { --margen: 48px; --aire: 96px; }
  .cifra { font-size: 72px; line-height: 66px; letter-spacing: -.03em; }
  .t72   { font-size: 48px; line-height: 47px; letter-spacing: -.025em; }
  .tit   { font-size: 30px; line-height: 32px; letter-spacing: -.015em; }
  .entra, .articulo h2 { font-size: 24px; line-height: 26px; letter-spacing: -.01em; }
  /* Al mismo tamaño que la entradilla, el apartado pasa a Medium: es el epígrafe de la escala */
  .articulo h2 { font-weight: 500; }
}

/* ── Móvil: cuatro columnas ─────────────────────────── */

@media (max-width: 767px) {
  :root { --margen: 20px; --med: 16px; --aire: 64px; }

  .r { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .r > * { grid-column: var(--m, 1 / -1); }

  h1 br, h2 br, p br { display: none; }
  br.fijo { display: inline !important; }
  h1, h2, .t72, .tit { text-wrap: balance; }

  .palabra { font-size: 48px; line-height: 47px; letter-spacing: -.025em; }

  .cabecera { padding-top: 24px; flex-wrap: wrap; }
  .logo img { width: 144px; height: 36px; margin-left: -4px; }
  .nav { flex-wrap: wrap; justify-content: flex-end; }
  .nav ul { flex-wrap: wrap; justify-content: flex-end; }
  .nav .idioma { margin-left: 8px; }

  .js .menu { display: block; }
  .js .nav { display: none; }
  .js .cabecera.abierta { position: fixed; bottom: 0; align-items: flex-start; align-content: start; transform: none; animation: none; background: var(--negro); --tinta: var(--blanco); --papel: var(--negro); overflow-y: auto; }
  /* El hueco de abajo deja desplazar el menú por encima del aviso de cookies en pantallas bajas. */
  .js .cabecera.abierta .nav { display: block; width: 100%; padding: 56px 0 132px; }
  .js .cabecera.abierta .nav ul:not(.idioma) { display: block; }
  .js .cabecera.abierta .nav ul:not(.idioma) a { font-size: 30px; line-height: 32px; letter-spacing: -.015em; text-transform: none; padding: 10px 8px; margin: 0 -8px; }
  /* Los sectores, siempre a la vista bajo su enlace: más pequeños y sangrados. Sin menú (sin JavaScript) no salen: están en la página de sectores. */
  .nav .sub { display: none; }
  .js .cabecera.abierta .nav .sub { padding: 2px 0 10px 24px; }
  .js .cabecera.abierta .nav .sub li a { font-size: 18px; line-height: 20.5px; letter-spacing: -.005em; padding: 6px 8px; }
  .js .cabecera.abierta .nav .idioma { justify-content: flex-start; margin: 32px 0 0; }

  .s.foto { min-height: 72svh; }
  .s.foto.baja { min-height: 56svh; }
  .articulo h2 { margin-top: 56px; }
  .s.foto.portada { padding-bottom: calc(40px + var(--aviso, 0px)); }
  .cierre { padding-top: 120px; padding-bottom: calc(32px + var(--aviso, 0px)); }
  .datos { margin-top: 72px; row-gap: 40px; }
  .tres { margin-top: 40px; }
  .cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banda { margin: 0 -12px; padding: 12px; }

  .filas, .rejilla { margin-top: 40px; }
  .rejilla { row-gap: 28px; }
  .fila + .fila { margin-top: 24px; }
  .fila.cabe { display: none; }
  /* Filas que abren con un botón (los sectores): el botón se alinea con el texto y cada fila respira */
  .fila .epi .ir { margin-left: 0 !important; }
  .fila:has(.epi .ir) { row-gap: 6px; }
  .fila:has(.epi .ir) .epi { margin-bottom: 10px; }
  .fila:has(.epi .ir) + .fila:has(.epi .ir) { margin-top: 48px; }
  .n3 > :nth-child(1) { grid-column: 1 / 2; }
  .n3 > :nth-child(2), .n3 > :nth-child(3) { grid-column: 2 / -1; }
  .d2 > :nth-child(n), .d3 > :nth-child(n), .comp > :nth-child(n), .rejilla.de3 > * { grid-column: 1 / -1; }
  .rejilla.de4 > * { grid-column: span 2; }
  /* Sin encabezados de columna, cada respuesta lleva delante su pregunta. */
  .comp > [data-k]::before { content: attr(data-k) ". "; font-weight: 500; }
}

/* En móvil las líneas las decide el ancho, así que el titular entra de una pieza. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .rev .l, .js .rev.visto .l { display: inline; clip-path: none; transform: none; transition: none; }
  /* Con opacidad y no con recorte: un titular recortado entero cuenta como «no visible» y nunca se destaparía. */
  .js .rev { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--curva), transform 1s var(--curva); }
  .js .rev.visto { opacity: 1; transform: none; }
}