/* styles.css — Nodalya, sitio público
 *
 * Los valores salen de tokens.css, que se genera desde el sistema de diseño.
 * Acá no se escribe un color, un radio ni un espaciado a mano: si hace falta uno
 * que no existe, se agrega como extensión en scripts/build-tokens.mjs con su
 * razón, y se declara en DESIGN.md §4.
 */

/* ═══ Base ═════════════════════════════════════════════════════════════════ */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--fontFamily-base);
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* El anillo de foco es obligatorio, no decorativo: sin él la página no se puede
   recorrer con teclado. DESIGN.md §7. */
:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Perfil `marketing`: aireado. El respiro entre secciones es lo que hace que se
   lea un mensaje por pantalla y no una lista. */
.section {
  padding-block: var(--space-24);
}

@media (max-width: 720px) {
  .section {
    padding-block: var(--space-16);
  }
}

/* ═══ Hero ═════════════════════════════════════════════════════════════════
 *
 * La promesa, con la composición fotográfica del teléfono. En escritorio la
 * foto es el FONDO: trae el lado izquierdo vacío A PROPÓSITO (así se generó)
 * y el copy vive encima de ese vacío — por eso no es un grid de dos columnas:
 * sería duplicar el espacio que la foto ya trae.
 *
 * Texto navy sobre el gradiente casi blanco de la foto: contraste sobrado,
 * verificado contra la esquina más oscura del área de texto.
 *
 * En el teléfono el orden se invierte: primero el copy, después la foto,
 * recortada al teléfono y más chica. Hasta el 2026-09-01 el hero móvil era
 * una cortina (una foto vertical pegajosa a pantalla completa y el copy
 * subiendo encima): dejaba la primera pantalla sin titular, con la foto de la
 * entrada de la app —otro eslogan y botones que parecían tocables— y la
 * promesa aparecía después de 1,6 pantallas. El arquetipo 11 pide leerla sin
 * scroll. Decisión de Evert, 2026-09-01, sobre la crítica de ese día.
 */

.hero {
  position: relative;
  background: var(--surface-page);
}

.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-stage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop empty space on the left when the text needs a taller section. */
  object-position: right center;
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  /* Keep the complete 16:9 composition visible, including the phone frame. */
  min-height: min(56.25vw, 1080px);
  padding-block: var(--space-16);
}

/* La mitad que la foto dejó vacía. En angosto ocupa todo el ancho. */
.hero-copy {
  max-width: 46%;
}

@media (min-width: 1920px) {
  .hero-stage__img {
    /* Once the section height is capped, leave empty space on the left. */
    object-fit: contain;
  }
}

/* Angosto: columna, copy arriba y foto abajo. La foto es la misma de
   escritorio recortada al teléfono con object-position (el teléfono ocupa el
   54–80 % del ancho de la imagen, medido): un solo archivo para los dos
   tamaños y ninguna pantalla de entrada con botones falsos. El alto de la
   foto es un cuadrado del ancho: a 375 px el hero completo mide ~1,1
   pantallas y el teléfono asoma bajo el botón sin scrollear. */
@media (max-width: 859px) {
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero-stage {
    order: 2;
    position: static;
    aspect-ratio: 1;
  }

  .hero-stage__img {
    object-fit: cover;
    object-position: 84% center;
  }

  .hero-layout {
    display: block;
    min-height: 0;
    padding-block: var(--space-8) var(--space-6);
  }

  .hero-copy {
    max-width: none;
  }
}

/* La categoría, arriba del titular: responde «¿esto qué es?» en una línea
   (qué es, para qué, con qué), para que el titular pueda ser el beneficio
   sin dejar al visitante frío adivinando. Mismo tratamiento de etiqueta que
   el resto del sitio. */
.hero-kicker {
  margin-bottom: var(--space-4);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.hero-title {
  font-family: var(--fontFamily-display);
  font-size: var(--fontSize-3xl);
  line-height: var(--lineHeight-3xl);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .hero-title {
    font-size: var(--fontSize-4xl);
    line-height: var(--lineHeight-4xl);
  }
}

.hero-lead {
  margin-top: var(--space-4);
  max-width: 44ch;
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-md);
  color: var(--text-secondary);
}

.hero-actions {
  margin-top: var(--space-8);
}

.hero-alt {
  margin-top: var(--space-4);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

.hero-alt a {
  color: inherit;
}

/* ═══ Tipografía de sección ════════════════════════════════════════════════ */

/* El encabezado se centra en todos los tamanos, y el titular escala para que
   eso sea legal: el sistema prohibe centrar bloques de mas de dos lineas, y a
   40 px en un telefono el titular caia en tres. A 32 px entra en dos, medido a
   375 px de ancho. Antes se resolvia alineandolo a la izquierda solo en movil,
   y quedaba desencajado contra la tarjeta centrada que va justo debajo. */
.section-head {
  /* En px y no en `ch`: el `ch` de este contenedor se mide con Inter a 16px, no
     con el titular a 56 — con 34ch el titular caia en cuatro lineas. */
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.section-title {
  font-family: var(--fontFamily-display);
  font-size: var(--fontSize-2xl);
  line-height: var(--lineHeight-2xl);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: -0.02em;
}

.section-lead {
  max-width: 52ch;
  margin: var(--space-4) auto 0;
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-md);
  color: var(--text-secondary);
}

/* Los títulos de sección paran en 40 px. El titular del hero llega a 56 en
   escritorio y tiene que ser el único en el escalón más alto (guides/web.md):
   antes los ocho titulares medían lo mismo y la promesa pesaba igual que
   cualquier capítulo. */
@media (min-width: 900px) {
  .section-title {
    font-size: var(--fontSize-3xl);
    line-height: var(--lineHeight-3xl);
  }
}

/* ═══ Precios ══════════════════════════════════════════════════════════════
 *
 * No es el arquetipo 14 (planes y precios): ése es una PÁGINA para comparar
 * opciones, y acá no hay nada que elegir — la cuota la determina lo que el
 * operador vendió el mes pasado.
 *
 * Dos piezas. La regla, en la tarjeta oscura: «de cada $100.000 que vendes,
 * como mucho $3.000 son para Nodalya». Es lo que se entiende en segundos y lo
 * que el operador repite en una llamada; la misma tarjeta sale como imagen
 * para WhatsApp (scripts/capturar-tarjetas-precio.mjs). Después el recibo,
 * blanco, con el número exacto de cada quien y la razón en una frase.
 *
 * La tabla de tramos se fue a las condiciones (2026-10-12). Mostraba el tope
 * de cada fila con el título «pagas como máximo», y ese tope casi nunca es lo
 * que se cobra: con $800.000 vendidos la fila decía $45.000 y se cobran
 * $24.000. Era el primer precio que se veía, y hacía ver a Nodalya igual de
 * cara que una suscripción por router.
 */

.pricing {
  background: var(--nd-cobalt-soft);
}

.price-layout {
  display: grid;
  gap: var(--space-6);
  max-width: 560px;
  margin-inline: auto;
  margin-top: var(--space-12);
}

@media (min-width: 940px) {
  .price-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    max-width: 940px;
    align-items: start;
  }
}

.price-layout > * {
  min-width: 0;
}

/* La regla. Fondo navy de las bandas oscuras: es la respuesta de la sección y
   la pieza que viaja sola como imagen, así que se despega del cobalto sin
   sombra (las superficies en flujo se separan con fondo, no con elevación). */
.price-rule {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--nd-navy-deep);
  color: var(--neutral-0);
  border-radius: var(--radius-sheet);
}

@media (max-width: 480px) {
  .price-rule {
    padding: var(--space-6);
  }
}

.price-rule__claim {
  margin: 0;
  font-family: var(--fontFamily-display);
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-xl);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Cien cuadros, tres de la cuota. Es la frase dibujada: el lector ve la
   proporción antes de leer un número. */
.price-squares {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
}

.price-squares i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--neutral-0) 14%, transparent);
}

.price-squares i.is-cuota {
  background: var(--brand-primary);
}

.price-squares__caption {
  margin: calc(var(--space-2) * -1) 0 0;
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-xs);
  color: color-mix(in srgb, var(--neutral-0) 72%, transparent);
}

.price-examples {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--neutral-0) 16%, transparent);
}

.price-examples__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.price-examples dt {
  color: color-mix(in srgb, var(--neutral-0) 78%, transparent);
}

.price-examples dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-weight: var(--fontWeight-semibold);
  font-variant-numeric: tabular-nums;
}

/* El recibo. Blanco sobre el cobalto, como las tarjetas de la sección. */
.price-calc {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface-raised);
  border-radius: var(--radius-sheet);
}

@media (max-width: 480px) {
  .price-calc {
    padding: var(--space-6);
  }
}

.price-calc > *,
.price-calc__controls > * {
  min-width: 0;
}

.price-calc__title {
  margin: 0;
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-md);
  font-weight: var(--fontWeight-semibold);
}

.price-calc__example {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--text-secondary);
}

.price-calc__controls {
  display: grid;
  gap: var(--space-3);
}

.price-calc__controls[hidden] {
  display: none;
}

.price-calc__input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
}

.price-calc__input:focus-within {
  outline: 3px solid var(--border-focus);
  outline-offset: 1px;
}

.price-calc__input span {
  font-size: var(--fontSize-xl);
  color: var(--text-secondary);
}

.price-calc__input input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding-block: var(--space-3);
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fontSize-xl);
  font-weight: var(--fontWeight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.price-calc input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--brand-primary);
}

.price-calc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.price-calc__chip {
  padding: 6px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.price-calc__chip[aria-pressed="true"] {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: var(--fontWeight-semibold);
}

.price-receipt {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-default);
}

.price-receipt p {
  margin: 0;
}

.price-receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.price-receipt__row span {
  color: var(--text-secondary);
}

.price-receipt__row strong {
  font-weight: var(--fontWeight-semibold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* La cuota es el dato de la tarjeta: el único número grande del recibo. */
.price-receipt__row--fee strong {
  font-size: var(--fontSize-2xl);
  line-height: var(--lineHeight-2xl);
  color: var(--brand-primary);
}

.price-receipt__why {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-control);
}

.price-receipt__why b {
  font-weight: var(--fontWeight-semibold);
}

.price-receipt__free {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

/* Moneda, cuándo se paga y el enlace a la tabla completa. Es un párrafo: se
   lee desde la izquierda, en el ancho de las dos tarjetas. */
.price-note {
  max-width: 560px;
  margin: var(--space-6) auto 0;
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-base);
  color: var(--text-secondary);
}

@media (min-width: 940px) {
  .price-note {
    max-width: 940px;
  }
}

.price-note a {
  color: inherit;
}

/* ═══ Convivencia ══════════════════════════════════════════════════════════
 *
 * Responde una objeción con forma de tiempo — «tengo algo andando, no puedo
 * parar» — así que la composición es una línea de tiempo y no una lista de
 * ventajas. Tres momentos: hoy, el día que conectas, después.
 *
 * Fondo blanco a propósito: la sección de precios es cobalto y van pegadas.
 * Dos bloques de color seguidos se leen como uno solo.
 *
 * Cada afirmación del copy sale del código del producto, no del folleto:
 *   - «nadie se cae» → `activate_radius`: es un cambio de profile, no de
 *     server, y las sesiones activas sobreviven.
 *   - «las fichas que ya vendiste siguen sirviendo» → el script nunca borra
 *     usuarios locales del hotspot (`local_users_coexistence_block`).
 *   (todo en backend/app/services/mikrotik_migration.py y
 *   docs/backend-capability-map.md)
 *
 * Tres renglones, no tres párrafos: la versión anterior explicaba el respaldo
 * de la configuración y la no duplicación de fichas, que son tranquilidad para
 * un técnico y ruido para el dueño. Siguen en la matriz de claims por si hace
 * falta volver a decirlos.
 *
 * No se nombra al competidor. El blueprint §Capa 3 midió que el competidor real
 * es lo gratis —Excel, scripts, Mikhmon—, así que nombrar una marca le habla a
 * una minoría y le hace publicidad. «Lo que usas hoy» cubre a los tres.
 */

.coexist-steps {
  display: grid;
  gap: var(--space-8);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .coexist-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* La línea de tiempo son los tres bordes superiores, no una regla continua que
   los atraviese: alinear un punto sobre una línea obliga a que las tres
   etiquetas midan igual de alto, y «El día que conectas» ocupa dos renglones
   donde «Hoy» ocupa uno. Con el borde arriba de cada paso la alineación no
   depende del texto, y tres segmentos separados dicen «tres momentos», que es
   exactamente lo que son. */
.coexist-step {
  padding-top: var(--space-6);
  border-top: 2px solid var(--border-default);
}

/* El momento en el que pasa cada cosa. Mismo tratamiento que la etiqueta del
   cero en precios: es la señal de la página para «esto rotula lo de abajo». */
.coexist-step__when {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.coexist-step__title {
  margin-top: var(--space-2);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-lg);
  font-weight: var(--fontWeight-semibold);
  text-wrap: balance;
}

/* Alineado a la izquierda, como todo párrafo del sitio. La regla del sistema
   prohíbe centrar bloques de más de dos líneas y estos tienen tres o cuatro. */
.coexist-step__body {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
  color: var(--text-secondary);
}

/* ═══ Vendedores ═══════════════════════════════════════════════════════════
 *
 * Responde «yo ya vendo, ¿qué cambia?». Antes esta sección repetía el titular
 * del hero palabra por palabra y volvía a explicar el problema del cuaderno
 * en 48 palabras; el problema ya lo contó Darío en la sección anterior. Ahora
 * dice lo que NO cambia (cobras como siempre) y lo que sí, en tres renglones.
 *
 * Cobalto sólido: el arquetipo 11 es el único lugar donde el color de marca
 * puede ocupar un área grande, por la excepción de perfil `marketing`. Blanco
 * sobre cobalto mide 5,69:1 — verificado, no estimado. Es el único bloque de
 * ese color en la página, y por eso pesa.
 */

.sellers-list {
  max-width: 720px;
  margin: var(--space-12) auto 0;
  padding: var(--space-4) var(--space-8);
  list-style: none;
  background: var(--brand-primary);
  color: var(--brand-onPrimary);
  border-radius: var(--radius-sheet);
}

/* Un renglón por cambio, separados por una regla tenue del mismo blanco: son
   tres hechos, no un párrafo. Alineados a la izquierda, como todo texto del
   sitio que no sea un cartel. */
.sellers-list li {
  padding-block: var(--space-4);
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-md);
  font-weight: var(--fontWeight-semibold);
}

.sellers-list li + li {
  border-top: 1px solid color-mix(in srgb, var(--brand-onPrimary) 25%, transparent);
}

/* ═══ Pantallas ════════════════════════════════════════════════════════════
 *
 * Responde «¿se ve bien? ¿es de verdad?», así que la sección no argumenta:
 * muestra. Seis tarjetas de pantalla (DESIGN.md §6: la captura con su pie,
 * sin marco de dispositivo dibujado — la proporción ya se lee como teléfono).
 *
 * Tira horizontal con scroll y no rejilla: seis teléfonos en rejilla ocupan
 * tres pantallas de página y la regla del perfil es un mensaje por pantalla.
 * El corte del último visible es el aviso de que hay más — por eso el ancho
 * de tarjeta en móvil es menor que el viewport (76vw) y el snap alinea al
 * inicio, no al centro.
 *
 * Cada pie afirma solo lo que la matriz de claims permite; el de routers
 * entró a la matriz con su evidencia en su propio PR, como exige el README.
 */

/* Fondo hundido, como el estudio de un mockup: sobre blanco puro los
   teléfonos no flotan. Además separa esta sección de la historia (2, clara)
   y de vendedores (4, blanca con tarjeta cobalto). */
.screens {
  background: var(--surface-sunken);
}

/* La tira vive FUERA del contenedor y sangra hasta el borde derecho de la
   ventana: el teléfono que queda cortado ahí es la señal de que hay más —
   pedido por Evert (2026-08-31) junto con los teléfonos grandes. El padding
   izquierdo la alinea con el texto del contenedor sin usar 100vw, que en
   Windows suma el ancho del scrollbar y desborda la página. */
.screens-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(380px, 76vw);
  gap: var(--space-6);
  margin-top: var(--space-12);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline-start: max(var(--space-6), calc(50% - (var(--container) / 2) + var(--space-6)));
  padding-inline-end: var(--space-6);
  /* El primer y el último teléfono alinean con el margen del texto al hacer
     snap, no con el borde de la ventana. */
  scroll-padding-inline: max(var(--space-6), calc(50% - (var(--container) / 2) + var(--space-6)));
  /* La sombra del teléfono cae ~28px por debajo del marco; sin este aire el
     overflow de la tira la recorta en seco. */
  padding-bottom: var(--space-8);
}

.screen-card {
  margin: 0;
  scroll-snap-align: start;
}

/* La composición fotográfica (decisión de Evert, 2026-08-31, segunda vuelta:
   reemplaza al teléfono dibujado en CSS, que quedó tosco). Cada imagen ya trae
   el iPhone, su fondo de estudio y su sombra — generadas por IA a partir de
   las capturas de mockup/, verificadas una a una contra el original para que
   ningún dato de la pantalla haya cambiado. Acá solo se les redondea la
   esquina para que el rectángulo de la foto se funda con el fondo hundido de
   la sección. Dimensiones declaradas en el HTML: la página no salta. */
.screen-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sheet);
}

.screen-card figcaption {
  margin-top: var(--space-3);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-base);
  color: var(--text-secondary);
}

/* ═══ Preguntas ════════════════════════════════════════════════════════════
 *
 * El bloque de objeciones menores del arquetipo 11 — las que no merecieron
 * sección propia. No hay arquetipo «FAQ» y no hace falta: igual que el bloque
 * de precios no es el arquetipo 14, esto es un bloque de la landing, no una
 * página (DESIGN.md §5).
 *
 * Las cinco preguntas salen de la persona y de la historia de origen, no de
 * una plantilla: quien hereda la red se queda sin técnico («¿tengo que saber
 * de routers?»), quien viene de una licencia anual cara pregunta por el pago.
 * Dos quedaron afuera por falta de claim verificable en la matriz: qué pasa
 * cuando se va la luz o el internet, y si una ficha se puede compartir.
 * Entran cuando el repo del producto documente la evidencia.
 *
 * <details> nativo: se abre en el lugar, sin JavaScript. Fondo hundido para
 * separarse de convivencia (blanca) sin gastar otro bloque de color justo
 * antes del cierre (cobalto suave).
 */

.faq {
  background: var(--surface-sunken);
}

/* Centrada como el encabezado: con el ancho limitado y sin auto, la lista
   quedaba pegada al borde izquierdo del contenedor en escritorio. */
.faq-list {
  margin: var(--space-12) auto 0;
  max-width: 66ch;
}

/* Separadas por reglas y no por tarjetas: cinco cajas apiladas pesan más que
   las preguntas que contienen. La última cierra la lista con su propio borde. */
.faq-item {
  border-top: 1px solid var(--border-default);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border-default);
}

.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-lg);
  font-weight: var(--fontWeight-semibold);
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

/* El indicador es texto, no un icono: «+» abre y «−» cierra. flex-shrink 0
   para que una pregunta de dos renglones no lo aplaste. */
.faq-item__q::after {
  content: "+";
  flex-shrink: 0;
  font-weight: var(--fontWeight-regular);
  color: var(--text-secondary);
}

.faq-item[open] .faq-item__q::after {
  content: "−";
}

/* padding y no margin: el margen de un párrafo colapsa a través del <details>
   y la respuesta queda pegada a la regla de la pregunta siguiente. */
.faq-item__a {
  margin: 0;
  padding-bottom: var(--space-6);
  max-width: 60ch;
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
  color: var(--text-secondary);
}

/* ═══ Cierre ═══════════════════════════════════════════════════════════════
 *
 * La misma acción, tercera vez (arquetipo 11): quien llegó hasta acá ya leyó
 * la promesa, el precio y la convivencia. No se argumenta nada nuevo — se pone
 * la salida delante. El titular es el mensaje ganador del blueprint (Capa 1):
 * lo que se promete no es soltar el control, es conservarlo sin el cuaderno.
 *
 * Sobre cobalto suave y no sobre --nd-navy-deep: el botón de descarga es
 * cobalto sólido en sus dos variantes declaradas (DESIGN.md §6) y sobre la
 * banda oscura no contrasta. Además convivencia (6) es blanca: el cambio de
 * fondo dice que la página terminó de argumentar.
 */

.closing {
  background: var(--nd-cobalt-soft);
}

.closing-action {
  margin-top: var(--space-8);
  text-align: center;
}

/* EL botón de la página. DESIGN.md §6: mismo texto y mismo aspecto las dos
   veces que aparece (hero y cierre), y no se usa para nada que no sea ir a
   Google Play. Por eso vive acá como clase suelta y no como parte de
   .closing: el hero lo reutiliza tal cual. */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  background: var(--brand-primary);
  color: var(--brand-onPrimary);
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
  font-weight: var(--fontWeight-semibold);
  text-decoration: none;
  border-radius: var(--radius-full);
  /* Un botón partido en dos renglones se lee como roto. A 320 px el texto en
     `base` con este padding entra en una línea, medido; el nowrap es el seguro
     por si un título futuro es más largo. */
  white-space: nowrap;
}

/* En angosto ocupa todo el ancho de la columna: pegado al margen izquierdo
   se leía como puesto ahí sin querer (reportado por Evert con captura), y a
   ancho completo es lo que el pulgar espera en el teléfono. Vale para las dos
   veces que aparece, así se ven iguales. */
@media (max-width: 599px) {
  .btn-download {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* El icono de Google Play, en la misma tinta que el texto (currentColor): el
   destino del botón, dicho también en dibujo. Monocromo a propósito — el
   logo multicolor de la tienda pelea contra el cobalto del botón. */
.btn-download__icon {
  /* En em y no en px: el glifo escala con el texto del botón, como una letra
     más — no introduce un tamaño nuevo en la escala. */
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* La salida secundaria aprobada en la matriz de claims: una duda, no una
   demo. En texto y no en botón: un segundo botón partiría la única acción. */
.closing-alt {
  margin-top: var(--space-4);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

.closing-alt a {
  color: inherit;
}

/* ═══ Páginas legales ══════════════════════════════════════════════════════
 *
 * Arquetipo 13 (página de contenido), declarado en DESIGN.md §5. Tres páginas
 * —/terminos, /privacidad, /eliminar-cuenta— cuyas URLs no pueden cambiar
 * porque la ficha de Google Play las enlaza. Comparten estos estilos por ser
 * la misma clase de documento: una columna de lectura a la medida del sistema
 * (--measure) y sin ornamento — en una página legal el documento ES el
 * contenido, y todo lo que flota alrededor le resta seriedad.
 */

.legal-top {
  border-bottom: 1px solid var(--border-default);
}

.legal-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.legal-top__brand {
  font-family: var(--fontFamily-display);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-lg);
  font-weight: var(--fontWeight-semibold);
  color: var(--text-primary);
  text-decoration: none;
}

.legal-top__back {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

.legal {
  padding-block: var(--space-16) var(--space-24);
}

/* La columna de lectura, centrada en la página: el arquetipo pide un ancho
   de línea limitado, y a pantalla ancha dejarla pegada al borde parte la
   página en texto y vacío. Se centra la COLUMNA, no los renglones: el texto
   dentro sigue alineado a la izquierda. El footer alinea al mismo eje. */
.legal-head,
.legal-callout,
.legal-toc,
.legal-body,
.legal-foot__inner {
  max-width: var(--measure);
  margin-inline: auto;
}

.legal-head__kicker {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.legal-head__title {
  margin-top: var(--space-2);
  font-family: var(--fontFamily-display);
  font-size: var(--fontSize-2xl);
  line-height: var(--lineHeight-2xl);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .legal-head__title {
    font-size: var(--fontSize-3xl);
    line-height: var(--lineHeight-3xl);
  }
}

.legal-head__meta {
  margin-top: var(--space-3);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

/* A quién aplica el documento, antes del índice. Cobalto suave: es el único
   bloque destacado de la página y se lee primero. */
.legal-callout {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--nd-cobalt-soft);
  border-radius: var(--radius-surface);
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
}

.legal-toc {
  margin-top: var(--space-8);
}

.legal-toc h2 {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.legal-toc ol {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-6);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

.legal-toc li {
  margin-bottom: var(--space-2);
}

/* Columnas CSS y no grid: el índice se lee en vertical (1–7 en la primera
   columna, 8–14 en la segunda), no en zigzag por filas. */
@media (min-width: 720px) {
  .legal-toc ol {
    columns: 2;
    column-gap: var(--space-8);
  }
}

.legal-toc a {
  color: inherit;
}

.legal-body section {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-default);
  /* El índice ancla acá: sin este margen el título queda pegado al borde. */
  scroll-margin-top: var(--space-8);
}

/* Los títulos de cláusula van en Inter, no en la serif: la display es de
   titulares de sección de la landing (DESIGN.md §3) y catorce cláusulas con
   serif convierten el documento en un folleto. */
.legal-body h2 {
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-xl);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: -0.01em;
}

.legal-body h3 {
  margin-top: var(--space-6);
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-md);
  font-weight: var(--fontWeight-semibold);
}

.legal-body p {
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.legal-body ul,
.legal-body ol {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.legal-body strong {
  color: var(--text-primary);
  font-weight: var(--fontWeight-semibold);
}

.legal-body a {
  color: inherit;
}

/* Tabla de documento (las bandas de la política de precios). Es la única
   tabla de tramos del sitio: la landing la enlaza desde el recibo. No vende,
   informa — sin fondo propio, solo filas separadas. La cuota a la derecha en
   números tabulares, para que los escalones se lean como una escala. */
.legal-table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
}

.legal-table th,
.legal-table td {
  padding: var(--space-3) var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  vertical-align: top;
}

.legal-table thead th {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-xs);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-table .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* La fila gratis es la puerta de entrada y se destaca — la misma decisión
   que en la sección de precios de la landing. */
.legal-table .is-free td {
  background: var(--nd-cobalt-soft);
  color: var(--text-primary);
}

.legal-foot {
  border-top: 1px solid var(--border-default);
  padding-block: var(--space-8);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

.legal-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-foot__links a {
  color: inherit;
}

.legal-foot__copy {
  margin-top: var(--space-4);
}

/* ═══ Botón flotante ═══════════════════════════════════════════════════════
 *
 * Cromo global, no una sección: la salida de contacto siempre a mano, solo
 * icono. Pedido por Evert (2026-08-31). Hasta el 2026-09-01 eran dos, Play y
 * WhatsApp: el de Play repetía el botón de descarga que la página ya muestra
 * dos veces y en el teléfono se le montaba encima, así que se quitó (decisión
 * de Evert sobre la crítica de ese día). Queda WhatsApp, la única salida
 * distinta: la burbuja verde se lee como «dudas», no como segunda oferta, y
 * el arquetipo 11 (una sola acción) queda respetado.
 *
 * Sin sombra: el sistema separa con color, y el verde saturado se despega
 * solo de los fondos claros del sitio.
 */

.float-actions {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 20;
}

.float-btn {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  color: var(--brand-onPrimary);
}

.float-btn svg {
  width: var(--space-6);
  height: var(--space-6);
}

.float-btn--wa {
  background: var(--nd-whatsapp);
}

/* Mientras el hero o el cierre están a la vista el flotante sobra —los dos
   traen el enlace de WhatsApp— y en el teléfono tapaba justamente ese enlace
   (medido a 375 px). Se esconde con una animación ligada al scroll, en CSS
   puro: la del hero lo trae cuando su bloque de acción termina de salir por
   arriba; la del cierre lo guarda cuando el suyo empieza a entrar por abajo.
   Propiedades distintas (translate y scale) para que cualquiera de las dos lo
   esconda sin pisar a la otra. Donde el navegador no soporta scroll-driven
   animations queda siempre visible, como antes. */
@supports (animation-timeline: view()) {
  body {
    timeline-scope: --hero-cta, --closing-cta;
  }

  .hero-actions {
    view-timeline-name: --hero-cta;
  }

  .closing-action {
    view-timeline-name: --closing-cta;
  }

  .float-actions {
    animation:
      float-after-hero linear both,
      float-before-closing linear both;
    animation-timeline: --hero-cta, --closing-cta;
  }

  @keyframes float-after-hero {
    0%, 85% { translate: 0 200%; }
    100% { translate: 0 0; }
  }

  @keyframes float-before-closing {
    0% { scale: 1; }
    15%, 100% { scale: 0; }
  }
}

/* ═══ Historia ═════════════════════════════════════════════════════════════
 *
 * La prueba, con la menor cantidad de texto posible (pedido de Evert: la
 * primera versión tenía dos párrafos y tres citas — la historia la cuentan
 * las citas, no nosotros). Queda UNA tarjeta: la cita de la plata perdida y,
 * debajo, el después en sus palabras. Se fueron la línea de puente (hablaba
 * de nosotros, «Nodalya se construyó para él») y la banda «Confían en
 * Nodalya»: con dos nombres, uno todavía sin permiso, decía «tenemos dos
 * clientes» en vez de dar confianza. El testimonio de Carlos entra como
 * segunda tarjeta, no como logo.
 *
 * Las citas son textuales y se recortan sin retocar. La tarjeta se centra
 * como bloque pero su texto se lee desde la izquierda: la cita tiene más de
 * dos líneas y la regla del sistema prohíbe centrarlas.
 */

.testimonial {
  max-width: 720px;
  margin: var(--space-12) auto 0;
  padding: var(--space-8);
  background: var(--nd-cobalt-soft);
  border-radius: var(--radius-sheet);
}

/* Dos tarjetas apiladas, una por cliente con permiso (DESIGN.md): la segunda
   pega más cerca que la primera del título, para que se lean como par. */
.testimonial + .testimonial {
  margin-top: var(--space-6);
}

/* El navegador le pone 40 px de margen a cada lado a todo blockquote; en un
   teléfono eso era un cuarto de la tarjeta en blanco y la cita quedaba
   corrida respecto del «Hoy» y de la firma (visto el 2026-09-02). */
.testimonial__quote {
  margin: 0;
}

.testimonial__quote p {
  font-family: var(--fontFamily-display);
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-xl);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: -0.01em;
}

@media (min-width: 700px) {
  .testimonial__quote p {
    font-size: var(--fontSize-2xl);
    line-height: var(--lineHeight-2xl);
  }
}

/* El después, en sus palabras y más chico: la cita grande es el dolor, esta
   línea es la salida. Sin ella la sección solo mostraba el problema. */
.testimonial__after {
  margin-top: var(--space-6);
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
  color: var(--text-secondary);
}

.testimonial__who {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
  color: var(--text-secondary);
}

.testimonial__who strong {
  color: var(--text-primary);
}

.testimonial__logo {
  width: auto;
  height: var(--space-12);
}

/* La cifra debajo de la tarjeta (2026-09-01): un número exacto y medido, no
   redondo, sin moneda para que valga en las cinco versiones por país. Mismo
   ancho y mismo margen interior que la tarjeta, texto desde la izquierda como
   ella. El número va en display y el resto en texto secundario: se lee como
   dato, no como nota al pie. */
.story__proof {
  max-width: 720px;
  margin: var(--space-6) auto 0;
  padding-inline: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-4);
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
  color: var(--text-secondary);
}

.story__proof-number {
  font-family: var(--fontFamily-display);
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-xl);
  font-weight: var(--fontWeight-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* =============================================================================
   Blog: las guías de la serie «Vender internet por fichas como negocio».
   Reusa el cromo de las páginas legales (legal-top, legal-head, legal-body,
   legal-foot) para que una guía y /terminos se sientan un solo sitio; acá
   solo va lo que una guía tiene y un documento legal no: citas, listas con
   viñeta, la tarjeta de cierre, la navegación entre guías y el índice.
   ========================================================================== */
.post {
  padding-bottom: var(--space-16);
}

.post .legal-body ul {
  list-style: disc;
}

.post .legal-body section:first-child {
  margin-top: var(--space-8);
}

.post-quote {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--brand-primary);
  background: var(--surface-sunken);
  border-radius: 0 var(--radius-surface) var(--radius-surface) 0;
}

.post-quote p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-md);
}

.legal-table--sin-cabecera tbody tr:last-child td {
  color: var(--text-primary);
  font-weight: var(--fontWeight-semibold);
}

.post-cta {
  margin-top: var(--space-12);
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
}

.post-nav__link {
  display: grid;
  gap: var(--space-1);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--fontWeight-semibold);
}

.post-nav__link span {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--fontWeight-regular);
}

.post-nav__link--next {
  text-align: right;
}

.post-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.post-list__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-surface);
  background: var(--surface-raised);
  color: var(--text-primary);
  text-decoration: none;
}

.post-list__link:hover {
  border-color: var(--brand-primary);
}

.post-list__num {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: var(--fontWeight-semibold);
}

.post-list__title {
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-md);
  font-weight: var(--fontWeight-semibold);
}

.post-list__desc {
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .post-nav {
    grid-template-columns: 1fr;
  }
  .post-nav__link--next {
    text-align: left;
  }
}

/* The contact bubble must not cover a Mexican fee while pricing is visible. */
@supports (animation-timeline: view()) {
  html body { timeline-scope: --hero-cta, --closing-cta, --country-prices; }
  html .pricing { view-timeline-name: --country-prices; }
  html .float-actions {
    animation: float-after-hero linear both, float-before-closing linear both, float-outside-prices linear both;
    animation-timeline: --hero-cta, --closing-cta, --country-prices;
  }
  @keyframes float-outside-prices {
    0%, 100% { visibility: visible; }
    0.01%, 99.99% { visibility: hidden; }
  }
}