/* LA PORTADA, CUARTA VERSIÓN (25 sep 2026: la referencia de Aker).
   `sitio.css` trae los tokens, la voz, la barra, las píldoras y el pie.
   Aquí va solo lo que la portada añade: el video.

   ══════════════════════════════════════════════════════════════════
   QUE NO SE VEAN CORTADOS — la regla, y por qué es una regla
   ══════════════════════════════════════════════════════════════════

   `object-fit: cover` SIEMPRE recorta. Lo que decide si se nota es la
   proporción del hueco donde metes el video:

     · Si el hueco tiene LA MISMA proporción que el video, no se recorta
       nada. Es el caso de todo lo que no es el hero, y por eso cada
       `.marco` lleva su `aspect-ratio` escrito a mano, sacado del
       archivo de verdad (1600×900, 720×1366, 720×1280).

     · Si el hueco tiene que llenar la pantalla —el hero— el recorte es
       inevitable y lo único que se puede hacer es ELEGIR QUÉ SE PIERDE.
       En una computadora (≈2.1 de proporción) un video 16:9 pierde un
       17% de alto, arriba y abajo, y el sujeto está al centro: no se
       nota. En un TELÉFONO (0.46) ese mismo video perdería el 74% del
       ancho, y eso sí es un desastre.

   POR ESO EL HERO CAMBIA DE VIDEO EN EL TELÉFONO. Arriba va el
   mostrador (1600×900); en el teléfono va el reloj (720×1366), que en
   una pantalla de 390×844 pierde un 13% y nada más. Lo decide
   `inicio.js` con `matchMedia`, y le pone el `src` SOLO al que se va a
   ver: los dos en el HTML significaría bajar los dos.

   NINGÚN VIDEO LLEVA AUDIO, ninguno pesa más de 1.2 MB, y todos llevan
   su cartel: lo que se ve mientras baja, y lo único que se ve con
   `prefers-reduced-motion`.

   NADA EN LÍNEA: la CSP no admite `style=""`; el navegador lo descarta
   en silencio y la pantalla queda mal sin que nada falle a gritos. */

html { scroll-behavior: smooth; background: var(--sitio-papel); }

/* ── EL VIDEO, EN CUALQUIER HUECO ───────────────────────────────────
   `.marco` es el hueco; el video lo llena. El marco NUNCA se estira: su
   alto sale de su proporción. */
.inicio .marco { position: relative; overflow: hidden; background: var(--sitio-char); }
.inicio .marco video,
.inicio .marco img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* El cartel vive debajo del video: mientras el video no ha llegado se ve
   él, y con `prefers-reduced-motion` se ve él y ya. */
.inicio .marco img { z-index: 0; }
.inicio .marco video { z-index: 1; }

/* Las tres proporciones que existen en esta página, sacadas de los
   archivos y no inventadas. */
/* CUANDO EL VIDEO NO ARRANCA SOLO (25 sep 2026). iOS en modo de bajo
   consumo, y el navegador de WhatsApp o Instagram, no dejan que un
   video arranque por su cuenta: la pagina se quedaba con el cartel
   quieto y parecia descompuesta. Lo que si permiten es que lo arranque
   una persona, asi que se ofrece: un triangulo discreto encima del
   cartel. No es un reproductor con barra; es una senal de que ahi hay
   algo que se mueve. */
.inicio .marco.tocar-para-ver { cursor: pointer; }
.inicio .marco.tocar-para-ver::after {
  content: "";
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 0; height: 0;
  transform: translate(-42%, -50%);
  border-left: 22px solid rgba(255, 255, 255, 0.92);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}
.inicio .apaisado { aspect-ratio: 16 / 9; }
.inicio .retrato-reloj { aspect-ratio: 720 / 1366; }
.inicio .retrato-oficina { aspect-ratio: 720 / 1280; }

/* ── EL HERO ────────────────────────────────────────────────────────
   A sangre y a toda la altura de la ventana, con el logotipo abajo a la
   izquierda y el párrafo de entrada arriba. Es el patrón de la
   referencia, literal. */
/* EL REBOTE AL ARRASTRAR, DEL COLOR DEL HERO, Y NADA MAS (dueno, 25 sep
   2026). El fondo va en `html`, que es lo que iOS pinta por detras de la
   pagina; el BODY sigue en papel.
   AQUI SE PINTO EL BODY DE MIDNIGHT Y SE ROMPIO LA PAGINA ENTERA: las
   secciones sobre papel no declaran fondo —lo heredan— asi que «Cuatro
   ecosistemas» y las de abajo salieron con el texto oscuro sobre negro
   («me arrojó muchas cosas en negro»). Un fondo de body no se cambia
   para arreglar una franja de cincuenta pixeles.
   La franja del reloj la arregla la etiqueta
   `apple-mobile-web-app-status-bar-style`, que es de esa franja y de
   nada mas, y vive en `inicio.html`. */
html.raiz-inicio { background: var(--sitio-midnight); }
/* LA FRANJA DEL RELOJ. Sobre el hero no se pinta -y por ahi sube el
   video, que es lo que el dueno pidio-; al salir del hero la barra ya se
   pone `sobre-papel`, y entonces la franja se pinta de tinta: con
   `black-translucent` la hora va siempre en blanco y sobre una seccion
   clara desapareceria. Fuera de un iPhone, `env()` vale 0 y esta franja
   no ocupa nada. */
body.sitio.inicio::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  z-index: 21; pointer-events: none;
  background: transparent;
  transition: background 0.25s ease;
}
body.sitio.inicio.sobre-papel::before { background: var(--sitio-tinta); }
@media (prefers-reduced-motion: reduce) { body.sitio.inicio::before { transition: none; } }
.inicio .hero {
  position: relative; overflow: hidden;
  /* LA CAJA DEL VIDEO, EL ALTO GRANDE; EL TEXTO, EL CHICO.
     `lvh` es el alto de la ventana SIN las barras que el navegador
     ensena y esconde: con el, por abajo no queda hueco nunca -ni en la
     aplicacion instalada ni en Safari- y ya no depende de cuanto mida la
     franja del sistema ni de si la aplicacion se declara instalada, que
     son las dos cosas que desde aqui no se pueden comprobar y me costaron
     dos intentos.
     `svh` queda de respaldo para un navegador que no entienda `lvh`. */
  min-height: 100svh;
  min-height: 100lvh;
}
.inicio .hero .marco { position: absolute; inset: 0; aspect-ratio: auto; }
/* EL VELO. La referencia dice que el oscurecimiento viene del propio
   sujeto y no de una capa; con estos videos —un mostrador con luz de
   tienda— el texto blanco no se leería. Es un velo plano, no un
   degradado: el sistema es plano por diseño. */
.inicio .hero .velo {
  position: absolute; inset: 0; z-index: 2;
  background: var(--sitio-midnight);
  /* 0.52 y no 0.42: el mostrador tiene paredes blancas y luz de tienda,
     y con menos velo el párrafo de entrada no se leía. Se mide con la
     captura, no a ojo. */
  opacity: 0.52;
}
.inicio .hero .contenido {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100svh;
  padding: 104px clamp(20px, 3vw, 40px) clamp(28px, 4vw, 40px);
  box-sizing: border-box;
  gap: 40px;
}
.inicio .hero .entrada { max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.inicio .hero .entrada .cuerpo { color: var(--sitio-papel); max-width: 400px; }

/* ── DOS COLUMNAS: el texto a un lado, el video al otro ───────────── */
.inicio .par {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.inicio .par.al-reves .lado-texto { order: 2; }
.inicio .par.al-reves .lado-video { order: 1; }
@media (max-width: 860px) {
  .inicio .par { grid-template-columns: 1fr; gap: 28px; }
  .inicio .par.al-reves .lado-texto,
  .inicio .par.al-reves .lado-video { order: 0; }
}
.inicio .bloque { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ── LA REJILLA DE DOS TARJETAS ────────────────────────────────────
   La izquierda es Mist con su texto; la derecha es video a sangre con
   el texto encima. Las dos miden lo mismo de alto. */
.inicio .dos-tarjetas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: stretch;
}
.inicio .tarjeta-video { position: relative; border-radius: var(--sitio-radio); overflow: hidden; min-height: 340px; }
.inicio .tarjeta-video .marco { position: absolute; inset: 0; aspect-ratio: auto; }
.inicio .tarjeta-video .velo { position: absolute; inset: 0; z-index: 2; background: var(--sitio-midnight); opacity: 0.44; }
.inicio .tarjeta-video .texto {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(24px, 3vw, 40px); box-sizing: border-box;
}
.inicio .tarjeta-video h2, .inicio .tarjeta-video h3, .inicio .tarjeta-video .micro { color: var(--sitio-papel); }
.inicio .tarjeta { display: flex; flex-direction: column; }
.inicio .tarjeta .pie-tarjeta { margin-top: auto; padding-top: 28px; }

@media (max-width: 860px) {
  .inicio .dos-tarjetas { grid-template-columns: 1fr; }
  /* EN EL TELÉFONO EL TEXTO BAJA DEBAJO DEL VIDEO, y no es un capricho:
     medido, la tarjeta quedaba de 350×340 —casi cuadrada— y un video 16:9
     ahí dentro perdía el 42%. Apilados, el video va en su proporción y no
     pierde nada; la tarjeta sigue siendo una sola pieza oscura. */
  .inicio .tarjeta-video { min-height: 0; background: var(--sitio-char); display: flex; flex-direction: column; }
  .inicio .tarjeta-video .marco { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .inicio .tarjeta-video .velo { display: none; }
  .inicio .tarjeta-video .texto { position: relative; height: auto; }
}

/* ── LA COLUMNA VERTICAL ────────────────────────────────────────────
   Los dos videos verticales viven aquí, en un hueco de su propia
   proporción: entran ENTEROS. Meterlos en una banda apaisada era
   enseñar el 30% de cada uno. */
.inicio .con-retrato {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
@media (max-width: 860px) {
  .inicio .con-retrato { grid-template-columns: 1fr; gap: 28px; }
  /* En el teléfono el vertical no necesita achicarse: es su terreno. */
  .inicio .con-retrato .marco { max-width: 300px; }
}
.inicio .marco.redondo { border-radius: var(--sitio-radio); }

/* ── LOS CINCO FRENTES ───────────────────────────────────────────── */
/* DOS COLUMNAS FIJAS, no `auto-fit`: con cinco renglones el auto-fit
   daba cuatro y uno, que se lee como un error. Dos y dos y uno se lee
   como una lista. */
/* LOS FRENTES YA NO SON UNA REJILLA DE DOS: son pestanas, y su hoja
   esta al final de este archivo. Estas cuatro reglas ponian los cinco
   en dos columnas y peleaban con las nuevas por el `display`. */

/* ── LAS CAPTURAS DEL PRODUCTO ──────────────────────────────────────
   No desaparecen: son lo que hace honesta a la página. Pasan a una
   rejilla de tarjetas, que es donde esta referencia pone la imagen que
   no va a sangre. */
/* LAS CUATRO CAJAS MIDEN LO MISMO Y NINGUNA RECORTA. Las capturas
   vienen con proporciones distintas (1132×250, 740×343, 1109×335), y
   dejarlas a su aire dejaba una rejilla dentada con huecos. La caja es
   igual para las cuatro y la imagen entra ENTERA con `contain`: el
   sobrante es papel blanco, que se lee como un marco, no como un
   recorte. Recortarlas sería justo lo que él pidió evitar. */
/* ══════════════════════════════════════════════════════════════════════
 * «WORKSPACE»: LAS PANTALLAS DE VERDAD
 *
 * La primera versión eran cuatro capturas a 1x metidas en cajas de 16:7
 * con `object-fit: contain`: se encogían hasta que no se leía una sola
 * cifra, y cuatro rectángulos iguales con un dibujito dentro no enseñan
 * el producto, lo insinúan. El dueño lo devolvió: «esas imágenes se ven
 * horribles, unas más cerca y que no enseñe el producto así de plano».
 *
 * TRES COSAS CAMBIARON, Y LA TERCERA ES LA QUE IMPORTA:
 *   1. Se volvieron a tomar A 2x y recortadas de cerca: el podio de
 *      puntualidad, los kilos que se echan a perder, los gastos con su
 *      importe. No la pantalla entera.
 *   2. La imagen LLENA su marco, de canto a canto. Antes flotaba en
 *      medio de una caja gris con aire alrededor, que es lo que se veía
 *      plano.
 *   3. UNA POR FILA Y ALTERNANDO LADO. Un tablero entero a 600 px no se
 *      lee NUNCA, por muy bien recortado que esté: a media página caben
 *      ~700 px de imagen y ahí el texto se lee del tamaño en que se
 *      escribió. Cuatro en rejilla era la decisión equivocada de fondo.
 * ══════════════════════════════════════════════════════════════════ */
.inicio .capturas { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); margin-top: 26px; }
.inicio .captura {
  display: grid; gap: clamp(18px, 3vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
/* Alternando: la segunda y la cuarta con el texto a la izquierda. Sin
   tocar el ORDEN del HTML, que es el que se lee en voz alta.

   SE COLOCAN EN LA REJILLA Y NO CON `order`. Con `order` la imagen caía
   en la SEGUNDA celda, que es la angosta (1fr), así que la segunda y la
   cuarta salían con la captura chiquita y el texto enorme: justo lo que
   se estaba arreglando. `order` cambia el sitio en la fila, no el ancho
   de la columna. */
.inicio .captura:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.inicio .captura:nth-child(even) .marco-captura { grid-column: 2; grid-row: 1; }
.inicio .captura:nth-child(even) figcaption { grid-column: 1; grid-row: 1; }
.inicio .marco-captura {
  border-radius: var(--sitio-radio);
  overflow: hidden;
  background: var(--sitio-bruma);
  aspect-ratio: 16 / 10;
}
.inicio .marco-captura img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* EL TELEFONO NO VA EN UNA CAJA. Las otras tres capturas son anchas y se
   recortan dentro de un 16/10; un aparato vertical ahi sale diminuto y
   con un rectangulo de hueso alrededor. Este se apoya en la banda, con
   su propia sombra, y la columna del texto le gana el ancho. */
/* LOS TRES TELEFONOS VAN A TODO EL ANCHO. En media fila, tres aparatos
   se quedan a setenta pixeles cada uno y no se lee ni el titulo. El
   texto va encima, como un pie que precede. */
.inicio .captura.telefonos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.inicio .captura.telefonos .marco-captura.suelto {
  background: none; border-radius: 0; aspect-ratio: auto;
}
.inicio .captura.telefonos .marco-captura.suelto img {
  /* CON LA CAJA RESERVADA ANTES DE TENER LA IMAGEN: con `height: auto` y
     sin proporcion, la imagen mide 0x0 hasta que llega y `loading="lazy"`
     no la pide nunca, porque una caja de 0x0 no entra en pantalla. */
  width: 100%; height: auto; aspect-ratio: 1800 / 798; object-fit: contain;
}
/* EN EL TELEFONO, UN SOLO TELEFONO. Tres aparatos en 350 px de ancho son
   tres manchas: no se lee ni el titulo. Es el mismo mecanismo «-cerca»
   que ya usan las otras cuatro fichas, y la proporcion cambia con el
   archivo. */
@media (max-width: 860px) {
  .inicio .captura.telefonos .marco-captura.suelto img { aspect-ratio: 760 / 802; }
}
.inicio .captura figcaption { display: flex; flex-direction: column; gap: 8px; }
.inicio .captura figcaption .micro { margin: 0; }
.inicio .captura figcaption h3 {
  margin: 0; font-weight: 300; font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
.inicio .captura figcaption .apoyo { margin: 0; color: var(--sitio-humo); line-height: 1.5; }
@media (max-width: 860px) {
  .inicio .captura { grid-template-columns: 1fr; }
  /* La tira del teléfono es 4:1, no 16:10: ahí se enseña un renglón, no
     una tabla. La proporción tiene que casar con la del archivo o
     `cover` recorta justo lo que se recortó a propósito. */
  .inicio .marco-captura { aspect-ratio: 4 / 1; }
  /* En el teléfono el orden manda y el texto va siempre debajo. */
  .inicio .captura:nth-child(even) { grid-template-columns: 1fr; }
  .inicio .captura:nth-child(even) .marco-captura,
  .inicio .captura:nth-child(even) figcaption { grid-column: 1; grid-row: auto; }
}

/* ── EL FORMULARIO ─────────────────────────────────────────────────
   Campos con hilo, radio de ocho, y el botón en píldora de ochenta. */
.inicio .forma { display: flex; flex-direction: column; gap: 18px; max-width: 600px; }
.inicio .campo { display: flex; flex-direction: column; gap: 8px; }
.inicio .campo label { font-size: 12px; color: var(--sitio-ceniza); letter-spacing: 0.01em; }
.inicio .campo input {
  width: 100%; box-sizing: border-box;
  background: var(--sitio-papel); border: 1px solid var(--sitio-filo); border-radius: var(--sitio-radio);
  color: var(--sitio-tinta); font: inherit; font-size: 16px; padding: 14px 16px; min-height: 52px;
}
.inicio .campo input::placeholder { color: var(--sitio-humo); }
.inicio .campo input:focus { outline: 0; border-color: var(--sitio-tinta); }
.inicio .campo input:focus-visible { outline: 2px solid var(--sitio-tinta); outline-offset: 2px; }
.inicio .forma .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.inicio .forma button { align-self: flex-start; margin-top: 4px; }
.inicio .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inicio .aviso-datos { font-size: 12px; line-height: 1.5; color: var(--sitio-pizarra); max-width: 600px; }
.inicio .aviso-datos a { color: var(--sitio-tinta); }
.inicio .aviso { min-height: 1.4em; font-size: 13px; }
.inicio .aviso.mal { color: #b3261e; }
.inicio .aviso.bien { color: var(--sitio-tinta); }
@media (max-width: 640px) { .inicio .forma .dos { grid-template-columns: 1fr; } }

/* El salto al contenido: invisible hasta que el teclado lo enfoca. */

/* SI ALGUIEN PIDIÓ QUE NADA SE MUEVA, nada se mueve: se queda el cartel.
   `inicio.js` ni siquiera le pone `src` a los videos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inicio .marco video { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
 * EL NAP QUE SE DESPLIEGA AL DESLIZAR (25 sep 2026)
 *
 * El alto de la sección ES el recorrido del scroll: dentro va una
 * pantalla pegada con el lienzo, y `nap-3d.js` reparte el avance (0 → 1)
 * entre las tres frases y los tres movimientos de la placa.
 *
 * DOS PANTALLAS Y MEDIA y no cinco: el dueño ya devolvió una portada por
 * larga. Lo que hay que contar son tres cosas.
 * ══════════════════════════════════════════════════════════════════ */
/* DOS PANTALLAS (30 sep 2026, segunda vuelta): con 150vh el viaje útil era
   MEDIA pantalla y un giro de rueda ya la tenía volteada («ni se inicia
   bien, me lo manda hasta el fondo»). 200vh da una pantalla entera de
   viaje, y la placa igual abre temprano. No dos y media (dueño, 30 sep 2026: «que el recorrido
   sea corto»). Vive en /nap desde ese día; la portada ya no la carga. */
.inicio .recorrido-nap { height: 200vh; position: relative; background: var(--sitio-bruma); }
.inicio .fijo-nap {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.inicio #nap3d { display: block; width: 100%; height: 100%; grid-area: 1 / 1; }
.inicio .sin-3d-aviso { display: none; }

/* Las tres frases, abajo y relevándose. `--v` la rellena el guion. */
.inicio .frases-nap {
  grid-area: 1 / 1; align-self: end;
  display: grid; place-items: center;
  padding: 0 20px clamp(96px, 16vh, 180px);
  pointer-events: none; width: 100%; box-sizing: border-box;
}
.inicio .frase-nap {
  --v: 0; grid-area: 1 / 1; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; max-width: 34ch;
  opacity: var(--v);
  transform: translateY(calc((1 - var(--v)) * 14px));
}
.inicio .frase-nap b {
  font-weight: 300; font-size: clamp(24px, 3.6vw, 40px);
  letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance;
}
.inicio .frase-nap span { color: var(--sitio-humo); font-size: 15px; line-height: 1.5; }

/* SIN WebGL NO SE QUEDA UN HUECO NEGRO. `con-nap3d` la pone el guion solo
   cuando el lienzo arrancó de verdad; sin ella la sección se encoge y las
   tres frases se leen como una lista, que es lo que dicen. */
html:not(.con-nap3d) .inicio .recorrido-nap { height: auto; }
html:not(.con-nap3d) .inicio .fijo-nap {
  position: static; height: auto; overflow: visible;
  display: block; padding: clamp(40px, 7vw, 80px) clamp(20px, 3vw, 40px);
}
html:not(.con-nap3d) .inicio #nap3d { display: none; }
html:not(.con-nap3d) .inicio .sin-3d-aviso {
  display: block; margin: 0 0 18px; color: var(--sitio-humo);
}
html:not(.con-nap3d) .inicio .frases-nap {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 22px; padding: 0; max-width: 1200px; margin: 0 auto;
}
html:not(.con-nap3d) .inicio .frase-nap {
  --v: 1; align-items: flex-start; text-align: left; transform: none;
}

/* Con `prefers-reduced-motion` la placa se dibuja UNA vez y se queda de
   frente; las frases no se relevan, se leen las tres. */
@media (prefers-reduced-motion: reduce) {
  .inicio .recorrido-nap { height: auto; }
  .inicio .fijo-nap { position: static; height: 68svh; }
  .inicio .frases-nap { position: static; }
  .inicio .frase-nap { --v: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
 * LOS CUATRO, Y LOS TRES PASOS (25 sep 2026)
 *
 * De la referencia que eligió el dueño: una tira de cuatro razones justo
 * debajo del video, y más abajo el 1·2·3 de cómo se usa.
 *
 * SIN CAJAS. Lo que separa una razón de la siguiente es una línea fina y
 * el aire, no un recuadro: cuatro recuadros iguales es lo que ya devolvió
 * una vez con las capturas —«así de plano»—.
 * ══════════════════════════════════════════════════════════════════ */
.inicio .beneficios-tira { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.inicio .beneficios {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.inicio .beneficios li {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--sitio-linea);
}
.inicio .beneficios b {
  font-weight: 300; font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
.inicio .beneficios span { color: var(--sitio-humo); font-size: 14px; line-height: 1.5; }

.inicio .pasos-tres h2 { margin: 6px 0 clamp(24px, 3.5vw, 44px); }
.inicio .pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: paso;
}
.inicio .pasos li {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 18px;
  border-top: 2px solid var(--sitio-tinta);
}
/* El número no es adorno: dice que hay un ORDEN y que son tres. */
.inicio .pasos .num {
  font-size: 13px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--sitio-humo);
}
.inicio .pasos b {
  font-weight: 300; font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
.inicio .pasos .que { color: var(--sitio-humo); font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
  .inicio .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio .pasos { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .inicio .beneficios { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
 * LOS FRENTES, EN PESTAÑAS (25 sep 2026)
 *
 * De la referencia: una fila de pestañas y un panel que cambia. El texto
 * es el que el dueño corrigió; lo único que cambia es que se reparte en
 * vez de enseñarse todo de golpe.
 *
 * SIN JAVASCRIPT SE VEN LOS CINCO. La clase `con-pestanas` la pone el
 * guion DESPUÉS de enganchar, así que mientras no esté, la fila de
 * pestañas se esconde y los paneles se leen uno tras otro. Al revés
 * —esconder los paneles en la hoja— una página sin guion se quedaría con
 * un frente de cinco y nadie sabría que faltan cuatro.
 * ══════════════════════════════════════════════════════════════════ */
.inicio .frentes .tiras-frente { display: none; }
.inicio .frentes.con-pestanas .tiras-frente {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 26px 0 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sitio-linea);
}
.inicio .tiras-frente button {
  min-height: 42px; padding: 0 18px;
  border: 0; border-radius: var(--sitio-pildora);
  background: transparent; color: var(--sitio-humo);
  font-family: var(--sitio-sans); font-size: 14px; font-weight: 500;
  width: auto; cursor: pointer;
}
.inicio .tiras-frente button:hover { color: var(--sitio-tinta); }
/* La puesta, en negro sólido: es la única de las cinco que se está
   leyendo, y el sistema reserva el relleno para lo elegido. */
.inicio .tiras-frente button[aria-selected="true"] {
  background: var(--sitio-char); color: var(--sitio-papel);
}

/* Sin pestañas, uno tras otro y separados por la línea fina. */
.inicio .frentes .frente {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--sitio-linea);
}
.inicio .frentes.con-pestanas .frente { border-top: 0; padding: 0; }
.inicio .frentes .frente h3 {
  margin: 0; font-weight: 300;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.12;
  letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch;
}
.inicio .frentes .frente .apoyo { margin: 0; max-width: 56ch; color: var(--sitio-humo); line-height: 1.5; }

/* QUÉ CONTESTA ESA PREGUNTA. No se repiten las capturas —abajo ya están
   grandes— y en su lugar cada frente dice con qué módulos se contesta,
   con su enlace a Negocios. */
.inicio .modulos-frente { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 0; }
.inicio .modulos-frente a {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 14px;
  border-radius: var(--sitio-pildora);
  background: var(--sitio-bruma); color: inherit;
  text-decoration: none; font-size: 14px;
}
.inicio .modulos-frente a:hover { background: var(--sitio-char); color: var(--sitio-papel); }

/* ══════════════════════════════════════════════════════════════════════
 * LA CONFIANZA, Y LOS TESTIMONIOS CUANDO LOS HAYA (25 sep 2026)
 *
 * En vez de inventar «+120 negocios», las tres pruebas que SÍ se pueden
 * dar hoy: el estado del servicio en vivo, el aviso legible y la API
 * abierta. Son tres enlaces a páginas que ya existen, así que no
 * prometen nada que no se pueda comprobar en el momento.
 * ══════════════════════════════════════════════════════════════════ */
.inicio .pruebas {
  display: grid; gap: 12px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.inicio .prueba {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border-radius: var(--sitio-radio);
  background: var(--sitio-papel); color: inherit; text-decoration: none;
}
.inicio .prueba b { font-weight: 500; font-size: 17px; }
.inicio .prueba span { color: var(--sitio-humo); font-size: 14px; line-height: 1.5; }
.inicio .prueba:hover { background: var(--sitio-char); color: var(--sitio-papel); }
.inicio .prueba:hover span { color: inherit; opacity: 0.85; }

.inicio .testimonios {
  display: grid; gap: 12px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* EL AVISO VA EN ROJO Y OCUPA TODA LA FILA: mientras esto sea un ejemplo
   tiene que gritarlo, para que nadie lo dé por bueno de un vistazo. */
.inicio .aviso-ejemplo {
  grid-column: 1 / -1; margin: 0;
  padding: 12px 16px; border-radius: var(--sitio-radio);
  background: #b3261e; color: #fff;
  font-size: 13px; font-weight: 500;
}
.inicio .testimonio {
  margin: 0; padding: 20px; border-radius: var(--sitio-radio);
  background: var(--sitio-papel);
  display: flex; flex-direction: column; gap: 14px;
}
.inicio .testimonio blockquote {
  margin: 0; font-size: 16px; line-height: 1.5;
}
.inicio .testimonio figcaption { display: flex; flex-direction: column; gap: 2px; }
.inicio .testimonio figcaption b { font-weight: 500; font-size: 14px; }
.inicio .testimonio figcaption span { color: var(--sitio-humo); font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════
 * EL PROBLEMA, LA COMPARACIÓN Y LAS PREGUNTAS (25 sep 2026)
 * ══════════════════════════════════════════════════════════════════ */

/* Los tres caminos que ya usa un negocio hoy. Sin viñetas de punto: una
   raya corta pesa menos y no parece una lista de la compra. */
.inicio .hoy { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; }
.inicio .hoy li {
  padding: 16px 0 16px 26px; position: relative;
  border-top: 1px solid var(--sitio-linea);
  font-size: clamp(16px, 1.9vw, 20px); line-height: 1.4;
}
.inicio .hoy li::before {
  content: ""; position: absolute; left: 0; top: 27px;
  width: 14px; height: 1px; background: var(--sitio-humo);
}

/* ── La comparación ────────────────────────────────────────────────── */
/* La tabla se desliza sola en un teléfono en vez de romper la página: es
   la regla de `overflow-x: auto` en su propio contenedor. */
.inicio .tabla-envuelta { overflow-x: auto; margin-top: 26px; }
.inicio .comparacion { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
.inicio .comparacion th, .inicio .comparacion td {
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--sitio-linea);
  vertical-align: top;
}
.inicio .comparacion thead th {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sitio-humo); border-bottom: 2px solid var(--sitio-linea);
}
.inicio .comparacion tbody th { font-weight: 500; color: var(--sitio-tinta); white-space: nowrap; }
.inicio .comparacion td { color: var(--sitio-humo); }
/* La columna de None: sobre papel y en tinta, para que se lea que esa es
   la respuesta. Un color pleno aquí convertiría la tabla en un anuncio. */
.inicio .comparacion .suya { background: var(--sitio-papel); color: var(--sitio-tinta); font-weight: 500; }
.inicio .comparacion thead .suya { color: var(--sitio-tinta); border-bottom-color: var(--sitio-tinta); }
.inicio .oculto { position: absolute; left: -9999px; }

/* ── Las preguntas ─────────────────────────────────────────────────── */
.inicio .faq { margin-top: 26px; border-top: 1px solid var(--sitio-linea); }
.inicio .faq details { border-bottom: 1px solid var(--sitio-linea); }
.inicio .faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 34px 18px 0; position: relative;
  font-size: clamp(16px, 1.9vw, 20px); line-height: 1.35;
}
.inicio .faq summary::-webkit-details-marker { display: none; }
/* La cruz que gira: una flecha pide una dirección y esto no lleva a otra
   página, se abre donde está. */
.inicio .faq summary::after,
.inicio .faq summary::before {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 13px; height: 1.5px; background: var(--sitio-tinta);
  transition: transform 0.18s ease-out;
}
.inicio .faq summary::before { transform: rotate(90deg); }
.inicio .faq details[open] summary::before { transform: rotate(0deg); }
.inicio .faq details p {
  margin: 0; padding: 0 34px 20px 0;
  color: var(--sitio-humo); line-height: 1.55; max-width: 62ch;
}
@media (prefers-reduced-motion: reduce) {
  .inicio .faq summary::after, .inicio .faq summary::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
 * QUINTA VERSIÓN: LOS ECOSISTEMAS, LOS SECTORES Y LA SEGURIDAD
 *
 * Tres rejillas, las tres sin caja: lo que separa un elemento del
 * siguiente es una línea fina y el aire. Cuatro recuadros iguales es lo
 * que ya se devolvió una vez —«así de plano»— y además es la estética de
 * plantilla que el brief manda evitar.
 * ══════════════════════════════════════════════════════════════════ */

/* El hero abre con un h1, no con un párrafo suelto. */
.inicio .entrada-hero { max-width: 660px; gap: 20px; }
.inicio .entrada-hero h1 {
  margin: 0; color: var(--sitio-papel);
  font-weight: 300; font-size: clamp(34px, 5vw, 62px);
  line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance;
}
.inicio .entrada-hero .cuerpo { max-width: 52ch; }
.inicio .hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* EL «DESDE» DEL HERO. Debajo de los botones y en pequeno: es una respuesta,
   no un titular. Con el mismo tono tenue que el resto del texto sobre el
   video, que ya lleva su velo detras. El hueco nace `hidden` y lo enciende
   `inicio.js` cuando el servidor contesta la cifra. */
.inicio .hero .desde {
  margin: 10px 0 0;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--sitio-papel) 78%, transparent);
}
/* En una pantalla baja, el hero se lee desde arriba en vez de centrarse. */
.inicio .hero .contenido { justify-content: center; }

/* ── Los cuatro ecosistemas ────────────────────────────────────────── */
.inicio .ecosistemas {
  display: grid; gap: clamp(18px, 2.5vw, 32px); margin-top: 34px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.inicio .ecosistema {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; text-decoration: none; color: inherit;
  border-top: 2px solid var(--pilar, var(--sitio-linea));
}
.inicio .ecosistema[data-pilar="entrepreneur"] { --pilar: #E8631A; }
.inicio .ecosistema[data-pilar="scholastic"] { --pilar: #1259B8; }
.inicio .ecosistema[data-pilar="financial"] { --pilar: #1F8A5B; }
.inicio .ecosistema[data-pilar="meta"] { --pilar: #6A3FD1; }
.inicio .ecosistema .micro { margin: 0; }
.inicio .ecosistema h3 {
  margin: 0; font-weight: 300; font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.15; letter-spacing: -0.02em;
}
.inicio .ecosistema .que { margin: 0; color: var(--sitio-humo); font-size: 14px; line-height: 1.5; }
.inicio .ecosistema .ver { margin-top: 4px; font-size: 13px; }
.inicio .ecosistema .ver::after { content: " \2192"; }
.inicio .ecosistema:hover .ver { text-decoration: underline; text-underline-offset: 4px; }

/* ── Los sectores ──────────────────────────────────────────────────── */
.inicio .sectores {
  display: grid; gap: 1px; margin-top: 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--sitio-linea);
  border: 1px solid var(--sitio-linea);
}
.inicio .sector {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px; background: var(--sitio-papel);
  text-decoration: none; color: inherit;
}
.inicio .sector b { font-weight: 500; font-size: 17px; }
.inicio .sector span { color: var(--sitio-humo); font-size: 13.5px; }
/* ICONOS QUE SÍ SE VEAN (dueño, 4 oct 2026 — cambio 3 de docs/29: tan
   tenues que el de Hostelería «parecía un bug»): más cuadro, más trazo
   y tinta franca. */
.inicio .sector .ico-caja.chica { width: 40px; height: 40px; background: var(--sitio-bruma); color: var(--sitio-tinta); }
.inicio .sector .ico-caja.chica .ico { width: 22px; height: 22px; stroke-width: 1.75; }
.inicio .sector:hover .ico-caja.chica { background: rgba(255, 255, 255, 0.16); color: var(--sitio-papel); }
.inicio .sector:hover { background: var(--sitio-tinta); color: var(--sitio-papel); }
.inicio .sector:hover span { color: inherit; opacity: 0.8; }

/* ── Seguridad ─────────────────────────────────────────────────────── */
.inicio .seguridad {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: clamp(18px, 2.5vw, 30px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.inicio .seguridad li {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--sitio-linea);
}
.inicio .seguridad b { font-weight: 500; font-size: 17px; }
.inicio .seguridad span { color: var(--sitio-humo); font-size: 14.5px; line-height: 1.55; }
.inicio .seguridad a { color: var(--sitio-tinta); }

/* ── El paso express del cierre (4 oct 2026, decisión d) ───────────── */
.inicio .cierre-express { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; max-width: 640px; }
.inicio .cierre-express input {
  flex: 1 1 180px; min-width: 0; min-height: 48px; box-sizing: border-box;
  padding: 0 16px; font: inherit; font-size: 15px;
  background: var(--sitio-papel); color: var(--sitio-tinta);
  border: 0; border-radius: var(--sitio-pildora);
}
.inicio .cierre-express input:focus { outline: 2px solid var(--sitio-papel); outline-offset: 2px; }
.inicio .cierre-express .pildora { background: var(--sitio-papel); color: var(--sitio-tinta); }
.inicio .aviso-express { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--sitio-papel); }
.inicio .aviso-express:empty { display: none; }

/* ── El cierre: texto y formulario, a dos columnas ─────────────────── */
.inicio .con-forma {
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.inicio .con-forma .bloque { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 900px) {
    .inicio .ecosistemas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio .sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio .seguridad { grid-template-columns: 1fr; }
  .inicio .con-forma { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .inicio .ecosistemas { grid-template-columns: 1fr; }
  .inicio .sectores { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   LOS ICONOS, Y LAS FICHAS QUE LOS LLEVAN (25 sep 2026)
   ══════════════════════════════════════════════════════════════════
   El diagnostico del dueno era exacto: las secciones eran tipografia
   sobre blanco y nada mas. Lo que se anade es lo minimo que da peso sin
   volverse ruido: UN icono por ficha, dentro de un cuadro del color de
   su pilar, y un filo que cierra la ficha.

   Los iconos son decorativos y van con `aria-hidden`: lo que dicen esta
   escrito al lado. Un lector de pantalla no debe oir «icono de birrete,
   Educacion, colegios y academias». */
.sprite-iconos { display: none; }

.ico {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* EL CUADRO DEL ICONO. El color del pilar se usa de fondo al 10 % y de
   trazo al 100 %: el mismo criterio que ya seguian las lineas y el menu
   -el color es filo, nunca bloque-. Sin pilar, tinta sobre el hueso. */
.ico-caja {
  width: 42px; height: 42px; border-radius: var(--sitio-radio);
  display: grid; place-items: center;
  background: var(--pilar-suave, var(--sitio-bruma));
  color: var(--pilar, var(--sitio-tinta));
}
.ico-caja.chica { width: 34px; height: 34px; }
.ico-caja.chica .ico { width: 19px; height: 19px; }

/* ── Los cuatro ecosistemas, ahora fichas ──────────────────────────── */
.inicio .ecosistema {
  gap: 10px; padding: 20px; border-radius: var(--sitio-radio);
  border: 1px solid var(--sitio-linea);
  border-top: 2px solid var(--pilar, var(--sitio-linea));
  background: var(--sitio-papel);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.inicio .ecosistema[data-pilar="entrepreneur"] { --pilar-suave: #fdf0e8; }
.inicio .ecosistema[data-pilar="scholastic"] { --pilar-suave: #e9f0fb; }
.inicio .ecosistema[data-pilar="financial"] { --pilar-suave: #e9f4ef; }
.inicio .ecosistema[data-pilar="meta"] { --pilar-suave: #f0ebfb; }
.inicio .ecosistema .micro { margin-top: 4px; }
.inicio .ecosistema:hover {
  border-color: var(--pilar);
  box-shadow: 0 2px 14px rgb(0 0 0 / 0.06);
  transform: translateY(-2px);
}
.inicio .ecosistema .ver { margin-top: auto; padding-top: 6px; }

/* ── Los sectores: el icono delante del nombre ─────────────────────── */
.inicio .sector { flex-direction: row; align-items: center; gap: 14px; }
.inicio .sector .quien { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inicio .sector:hover .ico-caja { background: var(--sitio-papel); }

/* ── Seguridad: cuatro fichas con su icono ─────────────────────────── */
.inicio .seguridad li {
  padding: 20px; border-radius: var(--sitio-radio);
  border: 1px solid var(--sitio-linea); border-top: 1px solid var(--sitio-linea);
  background: var(--sitio-papel); gap: 10px;
}

/* ── El NAP: lo que no necesita, en cuatro ─────────────────────────── */
.inicio .rasgos-nap {
  display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Tres rasgos desde el 29 sep 2026 (docs/22): energía y cableado se fusionaron. */
.inicio .rasgos-nap.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inicio .rasgo-nap {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: var(--sitio-radio);
  border: 1px solid var(--sitio-linea); background: var(--sitio-papel);
}
.inicio .rasgo-nap b { font-weight: 500; font-size: 15.5px; }
.inicio .rasgo-nap span { color: var(--sitio-pizarra); font-size: 13.5px; line-height: 1.5; }

/* ── Los tres pasos: numero grande, icono y una linea ──────────────── */
.inicio .pasos {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: paso;
}
.inicio .pasos li {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 18px; border-top: 2px solid var(--sitio-tinta);
}
/* A la altura del numero y al otro extremo: cierra el renglon del paso.
   Suelto en su linea se quedaba huerfano entre el numero y el titulo. */
.inicio .pasos > li > .ico { position: absolute; top: 22px; right: 0; }
.inicio .pasos li::before {
  counter-increment: paso; content: counter(paso);
  font-size: clamp(30px, 4vw, 44px); font-weight: 200; line-height: 1;
  letter-spacing: -0.03em; color: var(--sitio-tinta);
}
.inicio .pasos b { font-weight: 500; font-size: 16px; }
.inicio .pasos span { color: var(--sitio-pizarra); font-size: 14px; line-height: 1.55; }
.inicio .pasos .ico { width: 22px; height: 22px; color: var(--sitio-pizarra); }

/* ── Antes del formulario: tres frases, no tres promesas ───────────── */
.inicio .antes-forma {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.inicio .antes-forma li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--sitio-pizarra);
}
.inicio .antes-forma .ico { width: 19px; height: 19px; margin-top: 1px; color: var(--sitio-tinta); }

@media (max-width: 900px) {
  .inicio .rasgos-nap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio .pasos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .inicio .rasgos-nap { grid-template-columns: 1fr; }
}
/* Sin movimiento, sin desplazamiento: la ficha solo cambia de filo. */
@media (prefers-reduced-motion: reduce) {
  .inicio .ecosistema { transition: none; }
  .inicio .ecosistema:hover { transform: none; }
}

/* LA CLÁUSULA DEL ASTERISCO, al pie. Va más tenue que la línea legal —esa
   nombra a la empresa y esta explica un cargo— y por encima de ella, para
   que se lean en el orden en que importan. */
.sitio .pie-sitio .nota-precio { opacity: 0.72; }

/* ══════════════════════════════════════════════════════════════════════
 * LA CABEZA DE /nap (30 sep 2026). El dueño vio los cuatro renglones
 * amontonados («esa basura de texto amontonada») y tenía razón: su
 * redacción se maqueta con jerarquía y aire, no como una lista pegada.
 * ══════════════════════════════════════════════════════════════════ */
.inicio #nap-intro { padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); }
.inicio .nap-titulo {
  margin: 0; font-size: clamp(38px, 5vw, 54px); line-height: 1;
  letter-spacing: -0.04em; font-weight: 700;
}
.inicio .nap-subtitulo {
  margin: 14px 0 0; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sitio-humo);
}
.inicio .nap-lead {
  margin: clamp(36px, 5vw, 56px) 0 0; max-width: 24ch;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12;
  letter-spacing: -0.02em; font-weight: 600; text-wrap: balance;
}
.inicio .nap-parrafo {
  margin: 22px 0 0; max-width: 54ch;
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--sitio-humo);
}
.inicio .nap-desliza { margin: clamp(32px, 4vw, 48px) 0 0; font-size: 14px; color: var(--sitio-humo); opacity: 0.75; }

/* ══════════════════════════════════════════════════════════════════════
 * /nap, CUARTA VUELTA DEL DUEÑO (30 sep 2026): «por tercera ocasión el
 * texto se pierde ahí; los espacios de al lado en blanco se ven meh; el
 * texto se corta cuando la pantalla se bloquea para mostrar el render».
 * SE ACABÓ EL TEXTO ENCIMADO ABAJO: en pantalla ancha las frases viven a
 * la IZQUIERDA, centradas verticalmente —ocupan el blanco que sobraba—,
 * y la placa gira a la derecha. Nada pelea con el borde inferior. En el
 * teléfono siguen abajo, con más aire.
 * ══════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  .inicio .fijo-nap {
    display: grid;
    grid-template-columns: minmax(300px, 430px) 1fr;
    align-items: center;
    padding-left: clamp(32px, 6vw, 110px);
    box-sizing: border-box;
  }
  .inicio #nap3d { grid-column: 2; grid-row: 1; }
  .inicio .frases-nap {
    grid-column: 1; grid-row: 1;
    align-self: center;
    place-items: start;
    padding: 0;
  }
  .inicio .frase-nap {
    align-items: flex-start;
    text-align: left;
    max-width: 26ch;
  }
}

/* EL CAMBIO DE ESCENA ES UN FUNDIDO (4 oct 2026): mientras se precarga
   el cartel elegido, la entrada baja su opacidad y texto+foto llegan
   juntos; sin movimiento reducido no hay transición. */
.hero .entrada-hero { transition: opacity 0.18s ease; }
.hero.cambiando .entrada-hero { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero .entrada-hero { transition: none; } }