/* La portada (`/`) — su propia hoja, para su propio documento.

   PANTALLAS.md §2.2 y §3 P8: la portada y la app son dos documentos, no
   uno. Esta hoja acompaña a `web/portada.html` y no la carga nadie más;
   `estilo.css` es la de la app y acá no entra. Se escribe solo con tokens
   `--nm-*` y con los componentes de `componentes.css`.

   Tres decisiones de construcción viven acá:

   1. **Todo dentro de un contenedor centrado de 1 160 px** (corrección de
      Gonzalo del 2026-09-15): sin él los bloques quedan pegados a la
      izquierda y el aire se reparte mal.
   2. **Las franjas son la sección misma**, no un pseudo-elemento a sangre.
      `.nm-banda` y `.nm-franja-indigo` de `tokens.css` pintan su fondo con
      un `::before` que exige `position: relative; z-index: 0`, o sea un
      contexto de apilamiento por sección. Acá no hace falta: las secciones
      son hijas del `<body>` y ya miden todo el ancho, así que el fondo se
      pinta en la sección y el `::before` se apaga. Con eso **el pie y las
      franjas no crean contextos de apilamiento** y nada puede quedar
      detrás del pie (la regla de P8).
   3. **Las franjas alternan y nunca se repiten seguidas**: índigo (hero),
      papel (así funciona), base (el ejemplo), papel (lo que ganas), base
      (bajaron hoy), índigo (pie). El índigo aparece dos veces, que es lo
      único que DESIGN.md le permite: abrir y cerrar.

   Movimiento: es la única superficie donde una animación puede pasar de
   300 ms (PANTALLAS §9.1 regla 6), y aun así no hay ninguna que lo haga —
   lo que se mueve es el hover de un enlace y la presión de un botón. */

/* ── El contenedor y las franjas ───────────────────────────── */

/* El reset mínimo. La portada no carga `estilo.css`, que es donde vive el
   de la app, y sin esto el `<body>` conserva los 8 px de margen del
   navegador: las franjas dejan de llegar al borde y aparece una franja de
   fondo a los lados de una página que se pinta a sangre completa. */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; }

/* Los dos modos (revisión de Gonzalo del 2026-09-24: hasta entonces la
   portada iba siempre en claro). `tokens.css` ya resuelve `color-scheme` por
   `data-theme` / `prefers-color-scheme` en sus bloques `:root`, así que acá
   no hace falta declararlo — el `html{color-scheme:light}` fijo que había
   se fue con la decisión que forzaba el claro. */

.pg-body { overflow-x: clip; }

.pg-contenedor {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: var(--nm-esp-5);
}

/* El enlace de salto: invisible hasta que el teclado lo toma. */
.pg-saltar {
  position: absolute; left: var(--nm-esp-4); top: -60px;
  z-index: 1;
  padding: var(--nm-esp-2) var(--nm-esp-4);
  background: var(--nm-superficie-2); color: var(--nm-texto);
  border-radius: var(--nm-radio-full);
  font-size: var(--nm-b2); text-decoration: none;
  transition: top var(--nm-mov-base) var(--nm-curva-salida);
}
.pg-saltar:focus { top: var(--nm-esp-4); }

/* Las tres franjas dejan de apilar: el fondo se pinta en la sección y el
   pseudo-elemento a sangre de `tokens.css` se apaga (ver el encabezado). */
.pg-hero, .pg-banda, .pg-pie { position: static; z-index: auto; }
.pg-hero::before, .pg-banda::before, .pg-pie::before { content: none; }

/* Las dos franjas índigo se CIERRAN con una línea propia. En claro el índigo
   contrasta solo contra el papel; en oscuro `--nm-franja` y `--nm-banda` son
   el mismo tono de noche, así que sin esta línea la portada oscura no tenía
   franja superior y el colgante del hero salía de la nada (QA del rediseño
   2026, R12). La línea es de la franja —`--nm-franja-linea-fuerte`—, va en
   los dos modos, y no crea contexto de apilamiento. */
.pg-hero { border-bottom: 1px solid var(--nm-franja-linea-fuerte); }
.pg-pie { border-top: 1px solid var(--nm-franja-linea-fuerte); }

.pg-banda {
  padding: var(--nm-esp-8) 0;
  border-top: 1px solid var(--nm-banda-linea);
  border-bottom: 1px solid var(--nm-banda-linea);
}
/* La sección en base. Dos secciones la usan: «La compra de una semana, con
   cifras reales» (desde el 2026-09-25; antes era «Así funciona», se
   turnaron de tono al cambiar de orden) entre las bandas de papel «Así
   funciona» y «Lo que ganas»; y «Bajaron hoy» (pasó de papel a base el
   mismo día, al sumarse «Lo que ganas» justo antes) entre «Lo que ganas»
   y el pie. Ninguna de las dos queda pegada a otra base, que es lo que
   impide dos franjas iguales seguidas. */
.pg-seccion { padding: var(--nm-esp-8) 0; }

.pg-seccion h2, .pg-banda h2 { margin: 0 0 var(--nm-esp-5); }

/* ── El hero ──────────────────────────────────────────────── */

.pg-hero { padding-bottom: var(--nm-esp-6); }

/* «El home llena la pantalla» (DESIGN.md, Layout & Spacing): el hero ocupa
   al menos el alto del viewport menos su propia nav, para que la portada no
   se lea como una página que empezó a media altura. */
.pg-hero__caja {
  display: flex; flex-direction: column;
  /* Llena la pantalla sin dejar un desierto bajo el botón: con 78svh el hero
     terminaba 230 px más abajo que su último elemento (QA del rediseño 2026,
     R13). El alto lo sigue dando el contenido y el mínimo es el piso. */
  min-height: min(460px, 56svh);
}

/* La cabecera se lee como cabecera: su propia línea bajo la nav, para que
   «Entrar a la app» no quede flotando sobre el titular (R12). */
.pg-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nm-esp-4);
  height: var(--nm-cabecera);
  border-bottom: 1px solid var(--nm-franja-linea);
}
.pg-nav__logo { font-size: 21px; text-decoration: none; color: var(--nm-texto); }
/* El lockup: isotipo + wordmark, con la proporción de la cabecera de la app
   (símbolo de 26 px junto a un wordmark de 20 px, gap 10 px). En em para
   que el pie, que es más grande, escale igual. */
.pg-logo { display: inline-flex; align-items: center; gap: 0.5em; }
.pg-logo__simbolo { width: 1.3em; height: 1.3em; flex: none; }
/* «Entrar a la app» es un ENLACE y no un botón: el único primario de la
   página es «Mira un ejemplo» (DESIGN.md, Components). */
.pg-nav__entrar {
  color: var(--nm-texto-2); font-size: var(--nm-b2); font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--nm-borde-fuerte);
  padding-bottom: 2px;
  transition: color var(--nm-t-toque) ease, border-color var(--nm-t-toque) ease;
}
.pg-nav__entrar:focus-visible { outline: 2px solid var(--nm-foco); outline-offset: 4px; }

.pg-hero__cuerpo {
  flex: 1 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nm-esp-7);
  padding: 0 0 var(--nm-esp-6);
}
.pg-hero__texto { flex: 1 1 60%; max-width: 40rem; padding: var(--nm-esp-6) 0 0; }
/* El titular es el ÚNICO momento serif de la vista (DESIGN.md, Typography):
   Bitter regular, sin tracking negativo y con aire. En escritorio sube a
   64 px, que es lo que el sistema le permite al hero del home. */
.pg-hero__titular {
  margin: 0;
  font: 400 clamp(34px, 5.2vw, 64px) / 1.08 var(--nm-serif);
  letter-spacing: 0;
}
.pg-hero__bajada { margin: var(--nm-esp-4) 0 var(--nm-esp-6); color: var(--nm-texto-2); max-width: 34ch; }
.pg-hero__primario { display: inline-flex; align-items: center; text-decoration: none; }

/* La prueba de seriedad, subida del pie al hero (revisión de Gonzalo del
   2026-09-22): las mismas cifras vivas que ya decía el pie —productos,
   tiendas—, para que se lean sin bajar hasta el final de la página.
   Metadato, no protagonista: terciario y chico. Sin fecha de actualización
   y sin fila de logos (mismo día, misma revisión): la persona espera que
   los precios estén al día siempre, y una fila de marcas ajenas en el hero
   se lee como que nos colgamos de ellas — un logo de tercero solo va donde
   cumple una función utilitaria, como en la tarjeta de una tienda. */
.pg-hero__cifras { margin: var(--nm-esp-5) 0 0; color: var(--nm-texto-3); }

/* El colgante: la aparición grande del motivo. Su sitio y su color los da
   `.nm-colgante` de `tokens.css` —incluido el `display` por forma, que lo
   esconde en teléfono—; acá solo el lienzo del que cuelga, que arranca en
   el borde inferior de la nav. */
.pg-hero__motivo { position: relative; flex: 0 0 220px; align-self: stretch; min-height: 280px; }
.pg-hero__motivo .nm-colgante { right: 40px; width: 160px; max-height: 280px; }

/* ── La compra de ejemplo ─────────────────────────────────── */

/* Una sola pieza, no dos columnas (simplificada el 2026-09-23, decisión de
   Gonzalo: «hay demasiados números, hay que hacerlo simple»): la tarjeta
   del trofeo es ahora toda la sección — el titular del ahorro y, debajo,
   `.pg-comparativa`, la misma compra en cada tienda. */
.pg-trofeo { padding: var(--nm-esp-5); max-width: 30rem; margin: 0 auto; }
.pg-trofeo .nm-trofeo__cifra { margin: var(--nm-esp-1) 0 0; }
/* «frente a comprar todo en una sola tienda»: cierra la misma frase que
   empieza la premisa + la cifra, en cuerpo, no en la explicación de dos
   frases que tenía hasta el 2026-09-22 (esa nombraba una cadena). */
.pg-trofeo__explicacion { margin: var(--nm-esp-1) 0 0; color: var(--nm-texto-2); }
/* «S/ 213» nunca se parte: el símbolo solo al final de la línea y el número
   en la siguiente se leía roto. */
.pg-trofeo__monto { white-space: nowrap; }
.pg-trofeo > .nm-meta { margin: var(--nm-esp-1) 0 0; }
/* «Ver esta compra»: el enlace secundario a la demo cargada, nunca un
   segundo primario (revisión de Gonzalo del 2026-09-22). */
.pg-trofeo__ver { display: inline-block; margin-top: var(--nm-esp-4); }

/* «La misma compra, tienda por tienda»: una fila por tienda de
   `comparacion_por_tienda` —logo, nombre, total— y una fila final
   «Repartida entre tiendas» en oro, el único de la pieza. Lista limpia y
   no el quipu-chart de cuerdas: con hasta 5-6 tiendas una fila de texto se
   lee de un vistazo en móvil sin depender de la longitud relativa de una
   cuerda, que a este ancho (una columna, ~340 px) queda casi ilegible.
   Reemplaza a la escalera de 3/2/1 carritos y a las tarjetas del reparto
   por tienda (2026-09-23): tres lecturas del mismo dato se volvían una. */
.pg-comparativa {
  list-style: none; margin: var(--nm-esp-5) 0 0; padding: var(--nm-esp-2) 0 0;
  display: grid; border-top: 1px solid var(--nm-borde-sutil);
}
.pg-comparativa__fila {
  display: grid; align-items: center; column-gap: var(--nm-esp-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--nm-esp-3) 0;
}
.pg-comparativa__fila + .pg-comparativa__fila { border-top: 1px solid var(--nm-borde-sutil); }
.pg-comparativa__logo { width: 28px; height: 28px; grid-row: 1 / 3; }
.pg-comparativa__nombre {
  font: 700 var(--nm-b2) / 1.3 var(--nm-cuerpo); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-comparativa__total {
  font: 700 var(--nm-b1) / 1.2 var(--nm-cuerpo); text-align: right;
}
/* «+N en otras»: terciario, bajo el nombre — el único dato extra permitido
   por fila (Gonzalo, 2026-09-23: «sin más cifras»). Sin logo propio: cae en
   la segunda columna, debajo del nombre. */
.pg-comparativa__falta {
  grid-column: 2; color: var(--nm-texto-3);
}
/* «Repartida entre tiendas»: sin logo (no es una sola tienda). Su total va
   en tinta, no en oro (hallazgo del 2026-09-24: la sección ya tenía el
   ahorro del titular en oro arriba — DESIGN.md, «el oro se gana»: el
   trofeo de la portada es el ahorro, no el total repartido). */
.pg-comparativa__fila--repartida { grid-template-columns: minmax(0, 1fr) auto; }
.pg-comparativa__fila--repartida .pg-comparativa__nombre { font-weight: 700; }
/* Sin PNG de la cadena, la inicial en un círculo tonal: nunca un hueco. */
.nm-tienda__logo--letra {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nm-superficie-2); color: var(--nm-texto-2);
  font: 700 14px var(--nm-cuerpo);
}

/* ── Así funciona ─────────────────────────────────────────── */

/* El video (2026-09-24) y los pasos, uno AL LADO del otro en escritorio y
   uno ARRIBA del otro en móvil — el video primero en el marcado, así que
   en móvil ya cae arriba sin tocar el orden. Los pasos son la lectura de
   respaldo: sin video (Google, `prefers-reduced-data`, quien no toca
   play) siguen siendo una franja de texto completa por sí sola. */
.pg-como {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--nm-esp-5); align-items: start;
}
/* El reproductor: tarjeta como el resto del sistema (radio 12, borde de
   tokens, sin sombra dura) y `aspect-ratio` para que reservar el espacio
   no salte el layout mientras `preload="none"` no ha traído nada todavía. */
.pg-como__video { margin: 0; }
.pg-como__reproductor {
  /* `height: auto` es a propósito y no adorno: los atributos `width`/
     `height` del HTML (necesarios para que el navegador reserve el alto
     ANTES de tener el poster) se traducen a un `height` de presentación
     fijo que le gana a `aspect-ratio` si no se lo pisa acá — el video
     quedaba 1280×720 real dentro de una caja angosta, con medio cartel en
     blanco arriba. */
  display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--nm-borde-tarjeta); border-radius: var(--nm-radio-lg);
  background: var(--nm-superficie-2);
}

/* Los tres pasos, EN LÍNEA (revisión de Gonzalo del 2026-09-22: tres
   tarjetas grandes con una frase cada una sumaban 576 px en móvil) y en una
   sola columna: antes iban en 3 columnas propias, pero desde que comparten
   franja con el video (2026-09-24) esa columna es más angosta y tres
   al hilo volvían a apretarse. */
.pg-pasos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--nm-esp-3);
}
/* Enmarcados, como el resto del sistema (R16): tres pasos sueltos sobre la
   base se leían como texto corrido y no como tres cosas. El número y el
   texto van en la misma fila —no en bloques apilados— para que cada paso
   quepa en una franja chica. */
.pg-paso {
  display: flex; align-items: flex-start; gap: var(--nm-esp-3);
  padding: var(--nm-esp-3) var(--nm-esp-4);
}
.pg-paso__n { flex: none; color: var(--nm-texto-3); font-weight: 700; }
.pg-paso__texto { margin: 0; color: var(--nm-texto-2); }
.pg-paso__titulo { color: var(--nm-texto); }
/* El paso 1 ofrece el camino a Mi semana como enlace en línea, no como
   sección aparte (revisión de Gonzalo del 2026-09-22). */
.pg-paso__enlace { color: var(--nm-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Lo que ganas ─────────────────────────────────────────── */

/* Seis bloques (ícono, titular, línea), 3×2 en escritorio y 1 columna en
   teléfono (media query de abajo) — nunca 2 en móvil: con titulares de
   hasta 5 palabras dos columnas angostas partían línea en casi todos los
   bloques. Cada bloque es una tarjeta como el resto del sistema, sin
   ninguna destacada (DESIGN.md: una sola tarjeta destacada por pantalla, y
   acá ninguna lo es) y sin oro — es información, no un trofeo. */
.pg-beneficios {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nm-esp-4);
}
.pg-beneficio { padding: var(--nm-esp-4); display: grid; gap: var(--nm-esp-2); align-content: start; }
/* El ícono en tinta, nunca en el oro que DESIGN.md reserva para el dato que
   celebra: acá no hay ninguna cifra que festejar, solo seis cosas que la
   app hace. 30 px y no los 20 px de `.nm-ico` (revisión del dueño de
   producto, 2026-09-25: a 20 px el carrito y los dos envases no se leían):
   el escalado es del mismo `viewBox="0 0 24 24"`, así que el trazo crece
   en la misma proporción y no queda más fino que el resto del sistema. */
.pg-beneficio__ico { width: 30px; height: 30px; color: var(--nm-texto-3); }
.pg-beneficio__titulo { margin: 0; font-weight: 700; color: var(--nm-texto); }
.pg-beneficio__enlace { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pg-beneficio__linea { margin: 0; }

/* ── Bajaron hoy ──────────────────────────────────────────── */

/* Un CARRUSEL con scroll-snap y todas las bajadas del día (R17), no tres
   tarjetas fijas: lo que bajó hoy es la razón de la sección, y quedarse con
   tres escondía el resto. Lleva `tabindex="0"` porque un contenedor que se
   desplaza tiene que poder recorrerse con el teclado. */
.pg-bajadas {
  list-style: none; margin: 0 0 var(--nm-esp-5); padding: 0 0 var(--nm-esp-3);
  display: grid; gap: var(--nm-esp-4);
  grid-auto-flow: column; grid-auto-columns: minmax(15rem, 16rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 0;
}
.pg-bajadas:focus-visible { outline: 2px solid var(--nm-foco); outline-offset: 4px; }
.pg-bajada {
  padding: var(--nm-esp-4); display: grid; gap: var(--nm-esp-2);
  align-content: start; scroll-snap-align: start;
}
.pg-bajada__puerta {
  display: flex; align-items: center; gap: var(--nm-esp-3);
  color: inherit; text-decoration: none;
}
/* La miniatura de `seo.miniatura`, en su versión mínima: la portada no
   carga `estilo.css`, así que repite la caja y la mezcla del chip —no la
   regla entera de `.miniatura`, que resuelve superficies que acá no hay—.
   En claro el blanco de la foto toma el tono de la tarjeta (`multiply`); en
   oscuro va la placa cal, que es lo que evita el cuadrado blanco flotando. */
.miniatura {
  position: relative; flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; overflow: hidden;
  border-radius: var(--nm-radio-md);
}
.miniatura:not(.miniatura--vacia) img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain; padding: 2px;
  mix-blend-mode: multiply;
}
.miniatura--vacia img { width: 26px; height: 26px; opacity: .6; }
/* Oscuro (desde el 2026-09-24 la portada también lo pinta): el mismo par de
   reglas que compensa `estilo.css` para `.miniatura` — `multiply` sobre el
   fondo profundo apagaría la foto, así que se queda con la placa cal y la
   mezcla se apaga. Doble selector por lo mismo que allá: atributo explícito
   y, si nadie lo fijó, la preferencia del sistema. */
:root[data-theme="oscuro"] .miniatura {
  background: var(--nm-p-cal);
  border-color: var(--nm-borde-sutil);
}
:root[data-theme="oscuro"] .miniatura img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .miniatura {
    background: var(--nm-p-cal);
    border-color: var(--nm-borde-sutil);
  }
  :root:not([data-theme="claro"]) .miniatura img { mix-blend-mode: normal; }
}
.pg-bajada__foto { width: 48px; height: 48px; flex: 0 0 auto; }
.pg-bajada__nombre { font: 700 var(--nm-b2) / 1.3 var(--nm-cuerpo); }
.pg-bajada p { margin: 0; }
.pg-bajada__cifras { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nm-esp-3); }
/* El precio de hoy es un total a pagar: tinta. El porcentaje de la bajada lo
   acompaña entre paréntesis, en la misma línea y en terciario —«S/ 12.90
   (−18 %)», pedido de Gonzalo del 2026-09-16—. */
.pg-bajada__ahora { font: 700 18px / 1.2 var(--nm-cuerpo); white-space: nowrap; }
.pg-bajada__pct { color: var(--nm-texto-3); font-size: var(--nm-b3); font-weight: 600; }
/* La bajada es plata que se gana: oro de texto (PANTALLAS §8, decisión del
   2026-09-15). */
.pg-bajada__menos { font: 700 var(--nm-b2) / 1.3 var(--nm-cuerpo); color: var(--nm-acento); }

.pg-enlace {
  color: var(--nm-texto); font-weight: 600; font-size: var(--nm-b2);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── El pie completo ──────────────────────────────────────── */

.pg-pie { padding: var(--nm-esp-8) 0 var(--nm-esp-7); }
.pg-pie__arriba {
  display: grid; gap: var(--nm-esp-6);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  padding-bottom: var(--nm-esp-6);
  border-bottom: 1px solid var(--nm-borde);
}
.pg-pie__logo { font-size: 24px; text-decoration: none; color: var(--nm-texto); }
.pg-pie__linea { margin: var(--nm-esp-3) 0 0; color: var(--nm-texto-2); }
/* Las redes de la marca: íconos en la tinta secundaria, toque de 40 px. */
.pg-pie__redes {
  display: flex; gap: var(--nm-esp-1);
  margin: var(--nm-esp-4) 0 0 calc(-1 * var(--nm-esp-2));
}
.pg-pie__red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--nm-radio-md);
  color: var(--nm-texto-2); transition: color var(--nm-t-toque) ease;
}
.pg-pie__columnas {
  display: grid; gap: var(--nm-esp-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pg-pie__columna { display: grid; gap: var(--nm-esp-2); align-content: start; }
.pg-pie__titulo { color: var(--nm-texto-3); }
.pg-pie__enlace {
  color: var(--nm-texto-2); font-size: var(--nm-b2); text-decoration: none;
  transition: color var(--nm-t-toque) ease;
}
.pg-pie__cierre {
  display: flex; flex-wrap: wrap; gap: var(--nm-esp-2) var(--nm-esp-5);
  justify-content: space-between; align-items: baseline;
  margin: var(--nm-esp-5) 0 0;
}
.pg-pie__cierre span { max-width: 70ch; }
/* El único enlace a la casa matriz: discreto como el resto del cierre, pero
   subrayado para que se lea como enlace dentro de la línea legal. */
.pg-pie__curaca {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--nm-t-toque) ease;
}

/* ── Hover: solo con mouse fino (PANTALLAS §9.1 regla 5) ──── */

@media (hover: hover) and (pointer: fine) {
  .pg-nav__entrar:hover { color: var(--nm-texto); border-color: var(--nm-texto); }
  .pg-pie__enlace:hover { color: var(--nm-texto); }
  .pg-pie__curaca:hover { color: var(--nm-texto); }
  .pg-pie__red:hover { color: var(--nm-texto); }
  .pg-bajada__puerta:hover .pg-bajada__nombre { text-decoration: underline; text-underline-offset: 3px; }
}

/* ── Teléfono: la misma portada de marketing, en una columna ─ */

@media (max-width: 860px) {
  .pg-hero__cuerpo, .pg-pie__arriba { grid-template-columns: 1fr; display: grid; }
  .pg-trofeo { max-width: none; }
  .pg-hero__texto { max-width: none; }
  /* El colgante deja de ocultarse en móvil (revisión de Gonzalo del
     2026-09-22): el ÚNICO cambio es a `.pg-hero`, así que la app y el resto
     del sistema —que sí lo ocultan en pantallas chicas— no se enteran. Se
     adapta: chico y a la DERECHA del primario y las cifras, en el hueco que
     el botón deja libre. Hasta el 2026-09-27 iba en el flujo debajo de las
     cifras y le sumaba ~170 px al hero en blanco —«hace la página larga
     innecesariamente», Gonzalo—; fuera del flujo, el hero mide lo que
     miden el titular, la bajada, el botón y las cifras. */
  .pg-hero { --nm-colgante-display: block; }
  .pg-hero__cuerpo { position: relative; }
  .pg-hero__motivo {
    display: flex; justify-content: center;
    position: absolute; right: 0; bottom: 0; flex: none;
    width: 84px; min-height: 0; height: 96px;
    margin: 0;
  }
  .pg-hero__motivo .nm-colgante {
    position: static; right: auto; width: 84px; height: 96px; max-height: 96px;
  }
  .pg-hero__caja { min-height: 0; }
  .pg-hero { padding-bottom: var(--nm-esp-7); }
  .pg-banda, .pg-seccion, .pg-pie { padding: var(--nm-esp-7) 0; }
  .pg-como { grid-template-columns: 1fr; }
  .pg-beneficios { grid-template-columns: 1fr; }
  .pg-pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}