/* ═══════════════════════════════════════════════════════════════════════════
   Nomadic Creations · componentes
   ───────────────────────────────────────────────────────────────────────────
   Las reglas de esta hoja:

   1. Ningún tamaño mágico. Todo sale de un token de tokens.css.
   2. Ninguna media query por componente. Las rejillas se reorganizan solas con
      `repeat(auto-fit, minmax(…))` — así no hay un bloque que rompe a 1024 y
      el de al lado a 767, que es lo que hoy pasa en la web vieja.
   3. Nunca `overflow: hidden` para tapar un desbordamiento. Si algo se sale,
      se arregla la causa: tapar corta el texto en vez de enseñarlo.
   4. `max-width: 100%`, nunca `width: 100%` en un hijo de contenedor en fila.
      Tres hijos al 100 % suman 300 % y desbordan 927 px. Medido el 14/09.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera es fija: sin esto, un ancla deja el titular debajo de ella. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  font-weight: var(--p-normal);
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
  /* NO lleva overflow-x: hidden. Si algo se sale queremos verlo, no taparlo. */
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: var(--p-fuerte);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  /* Un titular largo en una columna estrecha parte la palabra en vez de
     salirse. Es lo que provoca el «Podcas…» de la web vieja. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { margin: 0 0 var(--e-4); max-width: var(--ancho-texto); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-acento-claro); text-underline-offset: 0.2em; }
a:hover { color: var(--c-texto); }

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

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* El foco es accesibilidad, no decoración. Se ve siempre, en todo. */
:focus-visible {
  outline: 3px solid var(--c-foco);
  outline-offset: 3px;
  border-radius: 2px;
}

.nc-solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* «Skip to content» mide 1×1 hasta que se enfoca. Es así A PROPÓSITO, y el
   auditor lo tiene en su lista de excepciones: un comprobador que lo cuenta
   como objetivo táctil pequeño grita en falso y deja de leerse. */
.nc-saltar {
  position: absolute; left: var(--e-2); top: var(--e-2);
  transform: translateY(-200%);
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--c-acento-relleno); color: var(--c-sobre-acento);
  border-radius: var(--radio); text-decoration: none;
  transition: transform var(--dur) var(--curva);
}
.nc-saltar:focus { transform: translateY(0); }

/* ── Estructura ────────────────────────────────────────────────────────── */

.nc-contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  /* El margen lateral se pone UNA vez, aquí. Ningún componente lo repite: si
     cada uno pone el suyo, un bloque anidado acaba con el doble. */
  padding-inline: var(--e-gutter);
}

.nc-seccion {
  padding-block: var(--e-seccion);
}
.nc-seccion--hondo  { background: var(--c-fondo-hondo); }
.nc-seccion--alto   { background: var(--c-fondo-alto); }
.nc-seccion--ajustada { padding-block: var(--e-bloque); }

.nc-seccion__cabeza {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e-4); text-align: center;
  margin-bottom: var(--e-bloque);
}
.nc-seccion__cabeza p { max-width: 60ch; color: var(--c-texto-tenue); }

/* La pastilla «WHO ARE WE» / «OUR SIMPLIFIED» */
.nc-etiqueta {
  display: inline-block;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--c-borde-vivo);
  border-radius: var(--radio-pastilla);
  font-size: var(--t-micro);
  font-weight: var(--p-semi);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--c-texto);
}

.nc-acento { color: var(--c-acento); }
.nc-tenue  { color: var(--c-texto-tenue); }
.nc-lead   { font-size: var(--t-lead); color: var(--c-texto-tenue); }

/* ── Botones ───────────────────────────────────────────────────────────── */

.nc-boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  /* El objetivo táctil vive aquí, en el componente, y no en cada uso. Hoy hay
     142 elementos por debajo de 40 px en la web vieja. */
  min-height: var(--tap);
  padding: var(--e-3) var(--e-6);
  border: 2px solid transparent;
  border-radius: var(--radio-pastilla);
  background: var(--c-acento-relleno);
  color: var(--c-sobre-acento);
  font-family: var(--f-titulo);
  font-size: var(--t-micro);
  font-weight: var(--p-semi);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--curva), border-color var(--dur) var(--curva),
              color var(--dur) var(--curva);
}
.nc-boton:hover { background: var(--c-acento-hover); color: var(--c-sobre-acento); }

.nc-boton--contorno {
  background: transparent;
  border-color: var(--c-borde-vivo);
  color: var(--c-texto);
}
.nc-boton--contorno:hover {
  background: var(--c-acento-relleno);
  border-color: var(--c-acento-relleno);
  color: var(--c-sobre-acento);
}

.nc-boton--fantasma {
  background: transparent; border-color: var(--c-borde); color: var(--c-texto);
}
.nc-boton--fantasma:hover { border-color: var(--c-borde-vivo); background: transparent; }

.nc-botonera {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  /* Una botonera NO es prosa, aunque se escriba con un <p>.
     Sin esto hereda el `max-width: var(--ancho-texto)` de la regla base de
     párrafo —68ch— y `justify-content: center` la centra dentro de esos 68
     caracteres, no dentro del contenedor. El botón sale visiblemente a la
     izquierda y parece un fallo de maquetación, porque lo es. */
  max-width: none;
}
.nc-botonera--centro { justify-content: center; }
/* Una botonera que cierra una sección, separada del bloque de arriba. Existe
   para que ninguna sección tenga que llevar un `style=` en línea: un tamaño
   fuera de esta hoja es un tamaño que nadie encuentra cuando hay que cambiarlo. */
.nc-botonera--suelta { margin-top: var(--e-bloque); }

.nc-icono { width: 1.125em; height: 1.125em; flex: none; fill: currentColor; }

/* ── Cabecera ──────────────────────────────────────────────────────────── */

.nc-cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-fondo-hondo);
  border-bottom: 1px solid var(--c-borde);
}

.nc-cabecera__interior {
  width: 100%; max-width: var(--ancho-max); margin-inline: auto;
  padding: var(--e-3) var(--e-gutter);
  display: flex; align-items: center;
  /* Hueco fluido, no fijo. Con 16px a 390 faltaban exactamente 8 px para que
     logo + teléfono + botón cupieran en una fila, y la cabecera se partía en
     dos: 133 px de alto en vez de 74, en todas las páginas. Medido a 360, 390,
     431 y 520. Con clamp cabe desde 360 y a 1440 sigue habiendo aire. */
  gap: clamp(0.5rem, 0.1rem + 1.5vw, 1rem);
  /* Se permite envolver. `flex-wrap: nowrap` en esta cabecera sacó el menú y
     el teléfono 754 px fuera de la pantalla. Medido el 14/09. */
  flex-wrap: wrap;
}

.nc-cabecera__logo {
  flex: none;
  display: flex; align-items: center;
  /* El logo es un enlace a la portada: tiene que poderse pulsar con un dedo.
     Sin esto mide 136x34 y el auditor lo caza, con razón. */
  min-height: var(--tap);
}
/* Tope 11,25rem = 180px. El fichero del logo mide 290px de ancho, así que a
   180 se pinta a 1,6x y se ve nítido en pantalla retina. Subirlo a 227 —lo que
   usa la web vieja— lo deja a 1,28x y se nota. */
.nc-cabecera__logo img { width: clamp(8.5rem, 5.6rem + 7.4vw, 11.25rem); height: auto; }

/* El punto 1 de Damon: el teléfono junto al logo, no en el extremo opuesto.
   Así queda sitio para el menú horizontal a partir de 900 px. */
.nc-cabecera__tel {
  flex: none;
  padding-inline: var(--e-4);
  font-size: var(--t-micro);
  letter-spacing: 0;
  text-transform: none;
}

.nc-menu { margin-left: auto; }
.nc-menu ul {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
}
.nc-menu a {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding-inline: var(--e-3);
  color: var(--c-texto); text-decoration: none;
  font-size: var(--t-micro); font-weight: var(--p-semi);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  border-radius: var(--radio);
}
.nc-menu a:hover { color: var(--c-acento-claro); }
.nc-menu a[aria-current="page"] { color: var(--c-acento-claro); }

.nc-menu-boton { display: none; }

/* El ÚNICO punto de ruptura de la cabecera. Una cabecera no se puede resolver
   con `auto-fit`: o caben los cuatro enlaces en fila, o no caben. La cuenta a
   900 px: logo 144 + teléfono 170 + menú 380 + huecos = 734. Cabe. */
@media (max-width: 899px) {
  .nc-menu-boton {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: var(--tap); height: var(--tap);
    padding: 0; border: 1px solid var(--c-borde); border-radius: var(--radio);
    background: transparent; color: var(--c-texto); cursor: pointer;
  }
  .nc-menu-boton__barras,
  .nc-menu-boton__barras::before,
  .nc-menu-boton__barras::after {
    display: block; width: 20px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform var(--dur) var(--curva), opacity var(--dur) var(--curva);
  }
  .nc-menu-boton__barras::before,
  .nc-menu-boton__barras::after { content: ''; position: absolute; }
  .nc-menu-boton__barras::before { transform: translateY(-6px); }
  .nc-menu-boton__barras::after  { transform: translateY(6px); }
  .nc-menu-boton[aria-expanded="true"] .nc-menu-boton__barras { background: transparent; }
  .nc-menu-boton[aria-expanded="true"] .nc-menu-boton__barras::before { transform: rotate(45deg); }
  .nc-menu-boton[aria-expanded="true"] .nc-menu-boton__barras::after  { transform: rotate(-45deg); }

  .nc-menu {
    flex-basis: 100%; margin-left: 0;
  }
  .nc-menu ul { flex-direction: column; gap: 0; }
  .nc-menu a { min-height: 3rem; padding-inline: var(--e-2); }

  /* SIN JavaScript el menú se ve entero y apilado. El JS lo pliega; si no
     corre, no se pierde la navegación. Por eso el estado plegado lo pone el
     propio script con [data-menu-js], no esta hoja. */
  [data-menu-js] .nc-menu {
    display: none;
  }
  [data-menu-js] .nc-menu.is-abierto { display: block; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.nc-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 14rem + 45vw, 40rem);
  isolation: isolate;
}

/* La foto va en un <img>, no en un background-image: así funciona `srcset` y
   el móvil descarga la versión de móvil. En la web vieja son fondos de CSS y
   por eso el móvil descarga el 96 % de lo que descarga el escritorio. */
.nc-hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* El vídeo va justo encima de la foto y debajo del velo. Empieza invisible y
   solo aparece cuando el navegador confirma que está reproduciendo: si lo
   bloquea —y lo bloquean a menudo— se queda la foto y nadie ve un rectángulo
   negro. */
.nc-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 600ms var(--curva);
}
.nc-hero__video.is-visible { opacity: 1; }

.nc-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--c-velo) 0%, rgb(0 0 0 / 0.35) 45%, var(--c-fondo) 100%);
}

.nc-hero__interior {
  width: 100%; max-width: var(--ancho-max); margin-inline: auto;
  padding: var(--e-seccion) var(--e-gutter) var(--e-bloque);
  display: flex; flex-direction: column; gap: var(--e-5);
  align-items: start;
}
.nc-hero h1 { max-width: 18ch; }

/* ── Audiencia · foto con el pie encima ────────────────────────────────── */

.nc-audiencia { position: relative; margin: 0; border-radius: var(--radio-gr); overflow: hidden; }
.nc-audiencia img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 20%; }
.nc-audiencia figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-bloque) var(--e-5) var(--e-5);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.9) 55%);
}
.nc-audiencia figcaption p {
  margin: 0; flex: 1 1 18rem;
  font-size: var(--t-lead); font-weight: var(--p-semi);
}

/* ── Banner de página interior ─────────────────────────────────────────── */

.nc-banner {
  position: relative;
  padding-block: var(--e-seccion) var(--e-bloque);
  background: var(--c-fondo-hondo);
  border-bottom: 1px solid var(--c-borde);
  isolation: isolate;
}
.nc-banner--foto {
  padding-block: calc(var(--e-seccion) * 1.4) var(--e-bloque);
  /* Sin fondo propio cuando lleva foto: el `background` opaco de `.nc-banner`
     tapaba la foto entera, que se descargaba igual y no se veía en ninguna de
     las seis subpáginas de servicios. Lo cazó `img-tapada`; la auditoría
     anterior daba cero, porque un banner negro no desborda nada. */
  background: transparent;
}
.nc-banner__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
}
.nc-banner--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.85));
}
.nc-banner h1 { margin-bottom: var(--e-3); }

.nc-migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  font-size: var(--t-micro); color: var(--c-texto-tenue);
}
.nc-migas a {
  display: inline-flex; align-items: center;
  /* Una miga es un enlace y se pulsa con el dedo como todo lo demás. */
  min-height: var(--tap); padding-inline: var(--e-1);
  color: var(--c-texto-tenue);
}
.nc-migas a:hover { color: var(--c-acento-claro); }
 /* Con `--c-borde` daba 1,66:1 sobre el fondo hondo. Es una barra pequeña,
    pero es texto que se ve y que estructura la miga. */
.nc-migas__sep { color: var(--c-texto-tenue); }

/* ── Rejillas ──────────────────────────────────────────────────────────── */

/* Todas las rejillas de la web son esta, con distinto mínimo. Ninguna lleva
   media query: se reorganizan solas y por eso no hay un ancho donde media
   página está apilada y la otra media no. */
.nc-rejilla {
  display: grid;
  gap: var(--e-canal);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.nc-rejilla--ancha  { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.nc-rejilla--estrecha { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

/* `min(18rem, 100%)` y no `18rem` a secas: con el rem a pelo, a 320 px de
   pantalla la pista mide más que la pantalla y la rejilla desborda. */

.nc-dos-col {
  display: grid;
  gap: var(--e-bloque);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  align-items: center;
}

/* ── Tarjeta con foto y titular encima ─────────────────────────────────── */

.nc-tarjeta-foto {
  position: relative;
  display: block;
  border-radius: var(--radio);
  /* Aquí sí: el overflow recorta la esquina redondeada de la foto, no tapa un
     desbordamiento de texto. Es la única excepción de la hoja y por eso está
     comentada. */
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--c-texto);
  background: var(--c-fondo-alto);
}
.nc-tarjeta-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-larga) var(--curva);
}
.nc-tarjeta-foto:hover img { transform: scale(1.04); }
.nc-tarjeta-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.8) 100%);
}
.nc-tarjeta-foto__texto {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.nc-tarjeta-foto__texto h3 { font-size: var(--t-h4); }
.nc-tarjeta-foto__enlace {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--tap);
  font-size: var(--t-micro); font-weight: var(--p-semi);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--c-acento-claro);
}

/* ── Tarjeta normal ────────────────────────────────────────────────────── */

.nc-tarjeta {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5);
  background: var(--c-fondo-alto);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
}
.nc-tarjeta h3 { font-size: var(--t-h4); }
.nc-tarjeta p { color: var(--c-texto-tenue); }

/* ── Servicio · foto y texto alternando lado ───────────────────────────── */

.nc-servicios { display: grid; gap: var(--e-seccion); }

.nc-servicio {
  display: grid;
  gap: var(--e-bloque);
  align-items: center;
  /* Dos columnas cuando caben, una cuando no. Sin media query: el punto donde
     se apila lo decide el contenido, y así es el mismo para los seis. */
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.nc-servicio picture { border-radius: var(--radio-gr); overflow: hidden; }
.nc-servicio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nc-servicio__texto { display: flex; flex-direction: column; align-items: start; gap: var(--e-4); }

/* Alterna el lado de la foto. `order` solo tiene efecto cuando hay dos
   columnas; apilado, la foto vuelve arriba sola y el orden de lectura no se
   rompe — que es justo por lo que se hace con order y no con direction. */
@supports (grid-template-columns: subgrid) {
  .nc-servicio--invertido > picture { order: 2; }
}

.nc-puntos { display: grid; gap: var(--e-2); }
.nc-puntos li {
  position: relative; padding-left: var(--e-5);
  color: var(--c-texto-tenue);
}
.nc-puntos li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-acento);
}

/* La lista de puntos de la línea de tiempo del proceso usa el mismo mecanismo. */
.nc-lista-puntos { display: grid; gap: var(--e-1); }
.nc-lista-puntos li {
  position: relative; padding-left: var(--e-4);
  color: var(--c-texto-tenue); font-size: var(--t-micro);
}
.nc-lista-puntos li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-borde-vivo);
}

/* ── Persona ───────────────────────────────────────────────────────────── */

.nc-persona {
  display: flex; flex-direction: column;
  background: var(--c-fondo-alto);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  overflow: hidden;          /* recorta la esquina de la foto, no texto */
}
.nc-persona img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; }
.nc-persona__texto { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); }
.nc-persona__papel {
  margin: 0; font-size: var(--t-micro); font-weight: var(--p-semi);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--c-acento-claro);
}
.nc-persona h3 { font-size: var(--t-h4); }
.nc-persona__texto p:last-child { color: var(--c-texto-tenue); }

/* ── Cifras ────────────────────────────────────────────────────────────── */

.nc-cifra {
  container-type: inline-size;    /* para que la cifra mida ESTA caja */
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-6) var(--e-5);
  background: var(--c-fondo-alto);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
}
.nc-cifra__valor {
  font-family: var(--f-titulo);
  /* La escala de cifra se ajusta al ANCHO DE LA TARJETA, no al de la ventana.
     Con `--t-cifra` a secas, «1 Billion+» a 96px pide 346 px en una tarjeta de
     252 y se sale por encima de la de al lado. Lo cazó el auditor a 600, 1024
     y 1440. `cqi` mide el contenedor, que es lo que aquí manda. */
  font-size: clamp(2rem, 13cqi, var(--t-cifra));
  font-weight: var(--p-fuerte);
  line-height: 1;
  color: var(--c-acento-claro);
  /* Y si aun así no cabe, parte antes que salirse. */
  overflow-wrap: anywhere;
}
.nc-cifra__pie { color: var(--c-texto-tenue); font-size: var(--t-micro); }

/* ── Proceso · línea de tiempo ──────────────────────────────────────────
   El filete que une los pasos se posiciona con `top` Y `bottom`, así que su
   altura **la calcula el navegador** a partir de lo que mide la fila.

   Antes tenía una altura fija —`calc(var(--e-bloque) + var(--e-2))`— y eso no
   puede funcionar: un paso con tres puntos es más alto que uno con dos, así
   que la línea llegaba a la mitad en unos y se pasaba en otros. Es un número
   adivinado donde había que medir.

   El tamaño del círculo vive en una variable y es fluido: el desplazamiento
   de la línea se deriva de ella, así que no pueden descuadrarse.            */

.nc-proceso {
  --circulo: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  --filete: 2px;
  /* El hueco entre pasos, en UNA variable: lo usan la rejilla y el filete que
     los une, y si se declararan por separado se descuadrarían a la primera. */
  --paso-hueco: var(--e-bloque);
  /* El paso se mide contra ESTA caja, no contra la ventana. Es la diferencia
     entre «responsive» y «adaptado»: si mañana la línea de tiempo se mete en
     una columna estrecha de un panel, se reorganiza igual sin tocar nada. */
  container-type: inline-size;
  display: grid;
  gap: var(--paso-hueco);
}

.nc-proceso__paso {
  position: relative;
  display: grid;
  grid-template-columns: var(--circulo) 1fr;
  gap: var(--e-canal);
  align-items: start;
}

/* El segmento que baja hasta el paso siguiente. El último no lleva ninguno,
   porque una línea que sale del último número y no va a ningún sitio es
   justo lo que hace que un diagrama parezca roto. */
/* El filete va de ARRIBA del paso hasta arriba del siguiente, y el círculo lo
   tapa por encima con su propio fondo.

   La versión anterior lo empezaba justo debajo del círculo —`top: var(--circulo)`—
   y eso se rompe en cuanto la fila es MÁS BAJA que el círculo, que es lo que
   pasa en cuanto el contenido se pone en dos columnas: el `top` cae por debajo
   del `bottom` y la línea se queda en nada. Medido: cubría el 59 %.

   Así no hay caso límite. La línea siempre cruza el hueco entero, mida lo que
   mida la fila, y el círculo se encarga de su propio trozo. */
.nc-proceso__paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--circulo) / 2 - var(--filete) / 2);
  top: 0;
  bottom: calc(var(--paso-hueco) * -1);
  width: var(--filete);
  background: var(--c-borde-vivo);
}

.nc-proceso__numero {
  position: relative;
  z-index: 1;                    /* el círculo tapa la línea, no al revés */
  display: flex; align-items: center; justify-content: center;
  width: var(--circulo); height: var(--circulo);
  box-sizing: border-box;
  border: var(--filete) solid var(--c-borde-vivo);
  border-radius: 50%;
  /* Fondo propio para que la línea no se vea cruzarlo por dentro. */
  background: var(--c-fondo-alto);
  font-family: var(--f-titulo); font-weight: var(--p-fuerte);
  font-size: var(--t-micro);
  color: var(--c-acento);
}

/* El título se centra con el círculo, no con el borde de arriba de la fila.
   El círculo mide 40-52 px y una línea de h3 mide 22-26: alineados los dos
   «arriba», el título queda nueve píxeles por encima del centro del número y
   se lee como si fueran de filas distintas.

   Se baja el CONTENIDO, no se sube el círculo: el filete que une los pasos
   arranca en `top: 0`, así que mover el círculo lo dejaría colgando. Y el
   desplazamiento se DERIVA de las mismas variables que dibujan las dos cosas
   —el diámetro y la altura de línea del titular—, así que si mañana cambia
   cualquiera de las dos, esto sigue cuadrando solo. */
.nc-proceso__paso > div {
  padding-top: max(0px, calc((var(--circulo) - var(--t-h4) * var(--lh-titulo)) / 2));
}

.nc-proceso__paso h3 { font-size: var(--t-h4); margin-bottom: var(--e-2); }
.nc-proceso__paso p { color: var(--c-texto-tenue); }

/* A partir de 46rem de CONTENEDOR, el titular y sus puntos van uno al lado
   del otro. Apilados dejaban media pantalla vacía a 1440 y estiraban la
   columna a lo alto sin necesidad: seis pasos ocupaban tres pantallas.

   Los puntos, además, se reparten en columnas que caben solas — un paso con
   dos y otro con cuatro se ven igual de compactos. */
@container (min-width: 46rem) {
  .nc-proceso__paso > div {
    display: grid;
    /* El titular manda a la izquierda y los puntos a su derecha, con un tope
       de lectura: sin él se estiraban hasta el borde y la vista tenía que
       recorrer media pantalla entre la viñeta y su texto. */
    grid-template-columns: minmax(12rem, 20ch) minmax(0, 34ch);
    gap: var(--e-canal) var(--e-bloque);
    align-items: baseline;
  }
  .nc-proceso__paso h3 { margin-bottom: 0; }
  /* Con el contenido en fila la fila es más baja, así que el aire entre pasos
     puede apretarse. Se cambia LA VARIABLE, y la rejilla y el filete la
     siguen los dos. */
  .nc-proceso { --paso-hueco: var(--e-canal); }
}

/* ── Marquesina de logos ───────────────────────────────────────────────── */

.nc-logos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--e-4);
}
.nc-logos__item {
  display: flex; align-items: center; justify-content: center;
  /* Sin `flex-wrap` esta franja se salía por la derecha a 1200 px en la web
     vieja: se ve «Gillette» cortado en la captura del 11/09. */
  flex: 0 1 clamp(7rem, 5rem + 9vw, 11rem);
  min-height: 5rem;
  padding: var(--e-4);
  background: #FFFFFF;
  border-radius: var(--radio);
}
.nc-logos__item img { max-height: 2.5rem; width: auto; object-fit: contain; }

/* Casi todos los logos del cliente son artwork OSCURO, y por eso la teja es
   blanca. PrizePicks es al revés: su wordmark es #FBF9FF y sobre blanco
   desaparece sin dar ningún error. Se vio mirando la página, no en una prueba. */
.nc-logos__item--oscuro { background: #1A1A1A; border: 1px solid var(--c-borde); }

/* ── Galería ───────────────────────────────────────────────────────────── */

.nc-galeria { display: grid; gap: var(--e-bloque); }
.nc-galeria__filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; }

.nc-chip {
  min-height: var(--tap);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-pastilla);
  background: transparent; color: var(--c-texto);
  font-family: var(--f-cuerpo); font-size: var(--t-micro);
  font-weight: var(--p-semi); letter-spacing: var(--ls-micro);
  text-transform: uppercase; cursor: pointer;
}
.nc-chip:hover { border-color: var(--c-borde-vivo); }
.nc-chip.is-activo {
  background: var(--c-acento-relleno); border-color: var(--c-acento-relleno);
  color: var(--c-sobre-acento);
}

.nc-galeria__rejilla {
  display: grid; gap: var(--e-canal);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.nc-galeria__item { margin: 0; border-radius: var(--radio); overflow: hidden; }
.nc-galeria__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.nc-galeria__item figcaption {
  padding: var(--e-3) 0; font-size: var(--t-micro); color: var(--c-texto-tenue);
}
.nc-galeria__item[hidden] { display: none; }

/* ── Vídeo · fachada ───────────────────────────────────────────────────── */

/* Un iframe de Vimeo son ~900 KB y tres conexiones a terceros ANTES de que
   nadie pulse play. Con doce vídeos la página no carga. Aquí se pinta la
   miniatura y el iframe se crea al pulsar. SIN JavaScript el enlace sigue
   llevando al vídeo: eso no se negocia. */
.nc-video {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio); overflow: hidden;
  background: var(--c-fondo-alto);
  text-decoration: none; color: var(--c-texto);
}
.nc-video img { width: 100%; height: 100%; object-fit: cover; }
.nc-video iframe { width: 100%; height: 100%; border: 0; }
.nc-video__play {
  position: absolute; inset: 0; margin: auto;
  display: flex; align-items: center; justify-content: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: var(--c-acento-relleno); color: var(--c-sobre-acento);
  transition: transform var(--dur) var(--curva), background var(--dur) var(--curva);
}
.nc-video:hover .nc-video__play { transform: scale(1.08); background: var(--c-acento-hover); }
.nc-video__play svg { width: 1.75rem; height: 1.75rem; }
.nc-video__titulo {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--e-4);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.85));
  font-weight: var(--p-semi);
}

/* ── Carrusel · plataforma, no JavaScript ──────────────────────────────── */

.nc-carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(17rem, 80%), 1fr);
  gap: var(--e-canal);
  overflow-x: auto;                  /* aquí el scroll es el componente */
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e-3);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.nc-carrusel > * { scroll-snap-align: start; }

/* ── FAQ · <details>, que ya es un acordeón ────────────────────────────── */

.nc-faq { display: grid; gap: var(--e-3); max-width: var(--ancho-texto); }
.nc-faq details {
  border: 1px solid var(--c-borde); border-radius: var(--radio);
  background: var(--c-fondo-alto);
}
.nc-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  min-height: var(--tap);
  padding: var(--e-4) var(--e-5);
  cursor: pointer;
  font-weight: var(--p-semi);
  list-style: none;
}
.nc-faq summary::-webkit-details-marker { display: none; }
.nc-faq summary::after {
  content: '+'; flex: none;
  font-size: var(--t-h4); color: var(--c-acento);
  transition: transform var(--dur) var(--curva);
}
.nc-faq details[open] summary::after { transform: rotate(45deg); }
.nc-faq details > *:not(summary) { padding: 0 var(--e-5) var(--e-5); color: var(--c-texto-tenue); }

/* Al imprimir, un acordeón cerrado es contenido perdido. */
@media print {
  .nc-faq details > *:not(summary) { display: block !important; }
}

/* ── Llamada a la acción ancha ─────────────────────────────────────────── */

.nc-cta-ancha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-6);
  background: var(--c-fondo-hondo);
  border: 1px solid var(--c-borde-vivo);
  border-radius: var(--radio-gr);
}
.nc-cta-ancha h3 { font-size: var(--t-h4); margin-bottom: var(--e-2); }
.nc-cta-ancha p { margin: 0; color: var(--c-texto-tenue); }

/* ── Formulario ────────────────────────────────────────────────────────── */

.nc-form { display: grid; gap: var(--e-4); max-width: 34rem; }
.nc-form__campo { display: grid; gap: var(--e-2); }
.nc-form label { font-size: var(--t-micro); font-weight: var(--p-semi); letter-spacing: var(--ls-micro); text-transform: uppercase; }
.nc-form input, .nc-form textarea, .nc-form select {
  min-height: var(--tap);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--c-borde); border-radius: var(--radio);
  background: var(--c-fondo-alto); color: var(--c-texto);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);      /* nunca menor: iOS hace zoom al enfocar */
  width: 100%;
}
.nc-form textarea { min-height: 8rem; resize: vertical; }
.nc-form input:focus, .nc-form textarea:focus { border-color: var(--c-borde-vivo); }
.nc-form__ayuda { font-size: var(--t-micro); color: var(--c-texto-tenue); }
.nc-form__error { font-size: var(--t-micro); color: var(--c-acento-claro); }

/* El honeypot. Un humano nunca lo ve y nunca lo rellena; un robot sí.
   `display:none` lo saltan algunos robots: esto lo saca de la pantalla
   sin quitarlo del árbol, y `tabindex="-1"` evita que lo pille el tabulador. */
.nc-form__trampa {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── Pie ───────────────────────────────────────────────────────────────── */

.nc-pie {
  background: var(--c-fondo-hondo);
  border-top: 1px solid var(--c-borde);
}
.nc-pie__interior {
  width: 100%; max-width: var(--ancho-max); margin-inline: auto;
  padding: var(--e-seccion) var(--e-gutter) var(--e-bloque);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-5);
  text-align: center;
}
.nc-pie__menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }
.nc-pie__menu a {
  display: flex; align-items: center; min-height: var(--tap);
  padding-inline: var(--e-3);
  color: var(--c-texto); text-decoration: none;
}
.nc-pie__menu a:hover { color: var(--c-acento-claro); }
.nc-pie__lema {
  font-family: var(--f-titulo); font-weight: var(--p-fuerte);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  margin: 0;
}
.nc-pie__contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-4); }
.nc-pie__legal {
  border-top: 1px solid var(--c-borde);
  background: var(--c-acento-hover);
}
.nc-pie__legal > * {
  max-width: var(--ancho-max); margin-inline: auto;
  padding-inline: var(--e-gutter);
}
.nc-pie__legal p { margin: var(--e-3) auto; max-width: none; font-size: var(--t-micro); }
.nc-pie__legal a { color: var(--c-sobre-acento); }

/* ── Impresión ─────────────────────────────────────────────────────────── */

@media print {
  .nc-cabecera, .nc-menu-boton, .nc-saltar, .nc-galeria__filtros { display: none; }
  body { background: #FFFFFF; color: #000000; }
  .nc-seccion, .nc-seccion--hondo, .nc-seccion--alto { background: #FFFFFF; padding-block: 1rem; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}