/* ============================================================================
   landing.css — página pública. Depende de base.css (tokens y controles).
   Móvil primero: todo lo de aquí está escrito para 360px de ancho y crece
   con min-width. La mayoría del tráfico entra por celular.
   ========================================================================== */

/* ---------- Cabecera ----------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 62px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--text);
  font-weight: 660;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-right: auto;
  min-width: 0;
}

.marca__sigla {
  display: grid;
  place-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--brand-ink);
  flex: none;
}

.marca__sigla svg {
  width: 17px;
  height: 17px;
}

.marca__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabecera__nav {
  display: none;
  gap: var(--s2);
}

.cabecera__nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 560;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
}

.cabecera__nav a:hover {
  color: var(--text);
  background: var(--surface-alt);
}

.cabecera__cta {
  display: none;
}

@media (min-width: 860px) {
  .cabecera__nav {
    display: flex;
  }
  .cabecera__cta {
    display: inline-flex;
  }
}

/* ---------- Héroe -------------------------------------------------------- */

.heroe {
  padding-top: var(--s6);
  padding-bottom: var(--s7);
  /* Un tinte de marca muy suave en lugar del blanco plano.
     Dos motivos. Uno: la página entera era #ffffff alternando con un gris
     neutro, y el único color en toda la primera pantalla era el azul del
     botón -- lo que separa «alguien eligió esto» de «plantilla por defecto»
     son dos o tres tonos sin saturar, no un color más.
     Dos, y más importante: la tarjeta del mensaje es blanca y estaba sobre
     fondo blanco, así que no se despegaba. Se descartó meterla en un marco de
     teléfono (de 17 landings de referencia, ninguna usa uno; las dos que
     enmarcan algo usan marco de navegador, y son navegadores). La separación
     la dan el fondo tintado y la sombra, que es lo que hacen Notion, Mercury
     y Better Stack.
     El tinte es tan claro que el contraste del texto no se mueve: la tinta
     sigue por encima de 15:1 sobre el punto más oscuro del degradado. */
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--bg) 62%);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .heroe {
    padding-top: var(--s8);
    padding-bottom: var(--s8);
  }
}

.heroe__rejilla {
  display: grid;
  gap: var(--s6);
  align-items: start;
}

@media (min-width: 900px) {
  .heroe__rejilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s7);
    align-items: center;
  }
}

.heroe h1 {
  margin-bottom: var(--s4);
}

.heroe .lead {
  margin-bottom: var(--s5);
}

/* El botón principal del héroe. Hubo un intento de poner aquí un campo de
   ciudad con un botón «Continuar», copiando a Nubank y Better Stack, para
   acercar el formulario: estaba en la pantalla 8,4 en móvil.

   Se revirtió, y la razón vale la pena dejarla escrita para no repetirlo. La
   ciudad es OPCIONAL -- el valor por defecto es «cualquiera» -- así que ese
   campo obligaba a decidir algo que no hace falta decidir, y lo hacía antes de
   que la página hubiera dado una sola razón para quedarse. Con una marca
   desconocida y un tema donde la gente sospecha, pedir un dato antes de dar un
   motivo es al revés. De 17 landings de referencia, 15 usan un botón aquí y
   sólo 2 un campo; las 2 lo hacen cuando ese campo ES la conversión entera.

   El problema de fondo -- lo que convierte está muy abajo -- se resuelve con
   el botón, que ancla al formulario desde la primera pantalla. */
.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

@media (max-width: 479px) {
  .heroe__acciones .btn {
    width: 100%;
  }
}

/* Lo que antes eran dos botones del mismo peso. «Cómo funciona» competía
   visualmente con la acción principal siendo un enlace de apoyo; ahora lo
   parece. */
.heroe__secundario {
  margin-bottom: var(--s5);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.heroe__secundario a {
  color: var(--muted);
  text-underline-offset: 3px;
}

.heroe__secundario a:hover {
  color: var(--brand);
}

/* Lista de garantías del héroe: qué sí y qué no, sin rodeos. */
.heroe__hechos {
  list-style: none;
  display: grid;
  gap: var(--s3);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.heroe__hechos li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s3);
  align-items: start;
}

.heroe__hechos svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ok);
  flex: none;
}

.heroe__hechos li[data-tipo="limite"] svg {
  color: var(--muted);
}

/* --- Muestra: el aviso, con aspecto de conversación real ----------------- */

/* Los valores (verde de cabecera, papel del chat, burbuja blanca, gris de la
   hora, azul de la doble palomita) son los de una app de mensajería, porque el
   objetivo es que se reconozca de un vistazo qué es esto. No se usa el
   logotipo de nadie: la cabecera lleva nuestra propia campana y nuestro
   nombre, que es lo que el cliente verá en su teléfono. */
.muestra {
  /* ANCHO DE TELÉFONO, no de tarjeta.
     Medía 486 px, así que el texto cortaba en sitios donde un celular no
     corta y el conjunto se leía como una tarjeta de web, no como una captura
     de pantalla. 390 px es el ancho de un teléfono corriente (iPhone 14, la
     mayoría de los Android de gama media), que es exactamente el contexto en
     el que el cliente va a ver este mensaje. */
  max-width: 390px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  /* Sombra propia y más marcada: es la única pieza que tiene que LEVANTARSE
     del fondo, porque es la demostración del producto. Tres capas -- una
     corta y densa para el borde, dos largas para la elevación -- que es como
     se ve una sombra de verdad y no un desenfoque gris. */
  box-shadow:
    0 2px 4px rgba(16, 22, 32, 0.06),
    0 12px 28px rgba(16, 22, 32, 0.10),
    0 32px 56px rgba(16, 22, 32, 0.06);
}

.muestra__barra {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s4);
  background: #075e54;
  color: #ffffff;
}

.muestra__avatar {
  display: grid;
  place-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  flex: none;
}

.muestra__avatar svg {
  width: 19px;
  height: 19px;
}

.muestra__quien {
  min-width: 0;
  line-height: 1.25;
}

.muestra__quien b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 620;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muestra__quien span {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.78);
}

/* El papel del chat. El trenzado es un degradado repetido y no una imagen:
   cero peticiones y se ve nítido en cualquier densidad de pantalla. */
.muestra__hilo {
  padding: var(--s5) var(--s4);
  background-color: #efeae2;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.018) 0 2px,
      transparent 2px 9px
    );
}

/* La burbuja del que RECIBE: blanca, a la izquierda, con pico arriba. */
.burbuja {
  position: relative;
  /* `flow-root` contiene el flotante de la hora. Sin esto, la hora y las
     palomitas caían 15 px POR DEBAJO de la burbuja, sobre el papel del chat:
     la burbuja no crecía para abarcar un hijo flotado. Se usa `flow-root` y
     no `overflow: hidden`, que es el clearfix reflejo, porque ese recortaría
     el pico -- que asoma 8 px por fuera del borde izquierdo. */
  display: flow-root;
  /* Los números son los de la app, no los del sistema de diseño de esta
     página: el objetivo aquí es que se reconozca, y el tamaño del texto es la
     primera cosa que delata una imitación. Antes iba a 15 px con interlineado
     de 21,75 -- tipografía de web dentro de una burbuja de chat. */
  max-width: 85%;
  margin-left: 8px;
  padding: 6px 7px 8px 9px;
  border-radius: 0 7.5px 7.5px 7.5px;
  background: #ffffff;
  color: #111b21;
  font-size: 14.2px;
  line-height: 19px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

/* El pico. Un triángulo hecho con bordes, pegado al canto superior
   izquierdo, que es donde lo pone una app de mensajería en el primer mensaje
   de una ráfaga. */
.burbuja::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid #ffffff;
  border-left: 8px solid transparent;
  /* Sin filo visible contra el papel del chat. */
  filter: drop-shadow(-1px 0 0.5px rgba(11, 20, 26, 0.08));
}

.burbuja b {
  display: block;
  margin-bottom: 2px;
  font-weight: 620;
}

/* La hora y la doble palomita, alineadas abajo a la derecha DENTRO de la
   burbuja, como en la app. `float` y no flex: así el texto fluye alrededor y
   la última línea no se corta para dejarles sitio. */
.burbuja__meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 4px 0 0 8px;
  font-size: 11px;
  color: #667781;
  white-space: nowrap;
}

.burbuja__visto {
  width: 15px;
  height: 11px;
  color: #53bdeb;
}

.muestra__pie {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

/* ---------- Franja de cifras -------------------------------------------- */

.franja {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s5);
}

/* La franja pasó de cuatro CIFRAS a tres GARANTÍAS, y el CSS se quedó con la
   forma anterior. Dos consecuencias visibles en producción:

   1. Los SVG salían a 250x250 px. Los iconos no traen width/height -- sólo
      viewBox -- así que sin una regla que los limite ocupan todo el ancho de
      su celda. Antes no se notaba porque aquí no había iconos, sólo números.
   2. La rejilla seguía pidiendo cuatro columnas para tres elementos, y `b`
      seguía a 1.5rem, que era el tamaño de un número grande y es demasiado
      para una etiqueta.

   auto-fit en vez de un número fijo de columnas: si mañana se añade o se quita
   una garantía, no hay que volver aquí. */
.franja__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

@media (min-width: 720px) {
  .franja__rejilla {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s5);
  }
}

.franja__dato {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s3);
  /* `start` y no `center`: con `center` cada bloque se centraba por separado,
     así que la garantía con una línea de descripción quedaba 5 px más alta que
     las dos de dos líneas. Cinco píxeles no se nombran, pero se ven: es
     exactamente la clase de desajuste que hace que una página parezca no
     revisada. Con `start` los tres títulos arrancan a la misma altura. */
  align-items: start;
  align-content: start;
}

/* El chip: 44x44 con el icono de 20 px dentro. Es el formato que usan las
   referencias del sector para que un icono tenga presencia sin convertirse en
   ilustración. El tamaño mínimo obligatorio de WCAG 2.2 (nivel AA) para un
   objetivo táctil es 24x24; 44 es nivel AAA, y aquí además no es un objetivo
   táctil sino decoración, así que la medida es puramente visual. */
.franja__dato svg {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  box-sizing: content-box;
  padding: 12px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  flex: none;
}

.franja__dato b {
  font-size: var(--fs-sm);
  font-weight: 640;
  line-height: 1.25;
}

.franja__dato span {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- Encabezado de sección --------------------------------------- */

.seccion__cabeza {
  max-width: var(--measure);
  margin-bottom: var(--s6);
  /* Centrada. Estaba alineada a la izquierda con un ancho máximo de 62
     caracteres dentro de un contenedor de 1120 px, así que dejaba unos 500 px
     en blanco a su derecha en Cómo funciona, Cobertura, Precio y Solicitud.
     Ese hueco es lo que producía la sensación de «falta algo».

     Y resuelve de paso una incoherencia: en Cómo funciona la cabecera iba a la
     izquierda y las tres tarjetas de paso ya iban centradas. Dos ejes de
     alineación en la misma sección es de las señales más fiables de página no
     revisada. */
  margin-inline: auto;
  text-align: center;
}

.seccion__cabeza .eyebrow {
  display: block;
  margin-bottom: var(--s2);
}

.seccion__cabeza h2 + p {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* ---------- Pasos -------------------------------------------------------- */

/* `list-style: none` is not cosmetic here: .pasos is an <ol>, so without it
   the browser draws its own "1." NEXT TO the counter drawn below, and every
   step shows its number twice. The <ol> stays because the order is part of
   the meaning -- a screen reader should still announce these as a sequence. */
.pasos {
  list-style: none;
  display: grid;
  gap: var(--s6);
  counter-reset: paso;
}

@media (min-width: 760px) {
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s5);
  }
}

.paso {
  position: relative;
  text-align: center;
  padding-top: var(--s3);
}

/* The rule that joins the three numbers into a sequence. It is drawn behind
   the circles and stops at the first and last step, so the line never runs
   off the edge of the section. Desktop only: stacked on a phone the steps
   already read top to bottom, and a horizontal line there would be noise. */
@media (min-width: 760px) {
  .paso::after {
    content: "";
    position: absolute;
    top: calc(var(--s3) + 28px);
    /* Overhang half the grid gap on each side. Without this the line is
       drawn inside each column and stops at its edge, leaving a visible
       break in the middle of every gap -- three dashes instead of one
       line, which reads as a mistake rather than as a sequence. */
    left: calc(var(--s5) / -2);
    right: calc(var(--s5) / -2);
    height: 2px;
    background: var(--line);
    z-index: 0;
  }
  .paso:first-child::after { left: 50%; }
  .paso:last-child::after { right: 50%; }
}

.paso::before {
  counter-increment: paso;
  content: counter(paso);
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  /* The circle sits ON the connecting line, so it needs the page's own
     background as a ring -- otherwise the line crosses straight through it. */
  box-shadow: 0 0 0 6px var(--bg);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.paso h3 {
  margin-bottom: var(--s2);
}

.paso p {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ---------- Cobertura ---------------------------------------------------- */

.cobertura__rejilla {
  display: grid;
  gap: var(--s5);
}

/* Con un solo trámite la lista desaparece del marcado y este bloque se queda
   con una sola columna, que ocupa el ancho entero. Así la nube de ciudades
   -- lo único aquí que es a la vez cierto y llamativo -- deja de estar
   apretada en la columna estrecha mientras media tarjeta vacía ocupaba la
   ancha. */
.cobertura__rejilla[data-uno="si"] {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .cobertura__rejilla {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s6);
    align-items: start;
  }

  .cobertura__rejilla[data-uno="si"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Con una sola columna, los tres bloques de dato se reparten en fila en vez
     de apilarse en una tira estrecha y larguísima.

     Tres columnas iguales desde que la lista de ciudades se plegó en un
     `<details>`: mientras estaba desplegada, ese bloque medía varias veces más
     que los otros dos y había que darle la fila entera. Cerrada, los tres
     miden lo mismo y la excepción sobra. */
  .cobertura__rejilla[data-uno="si"] .cobertura__lado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--s5);
    align-items: start;
  }
}

.tramites {
  list-style: none;
  display: grid;
  gap: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s4);
}

@media (min-width: 560px) {
  .tramites {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2) var(--s5);
    padding: var(--s5);
  }
}

.tramites li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s3);
  align-items: baseline;
  font-size: var(--fs-sm);
  padding-block: 3px;
}

.tramites li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-2px);
  margin-left: 5px;
}

.cobertura__lado {
  display: grid;
  gap: var(--s4);
}

.dato-bloque {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
  background: var(--surface);
}

/* El mismo chip que la franja de garantías: 44x44, esquinas de 12, fondo de
   marca claro, icono de 20 px con trazo 1,75. Un solo formato para todos los
   iconos de la página; tres formatos distintos es lo que hace que una landing
   parezca ensamblada por piezas.

   Estos van con `width`/`height` explícitos por la misma razón que los de la
   franja: los SVG sólo traen `viewBox`, y sin medida se estiran hasta llenar
   la celda -- ahí salieron a 250x250 px. */
.dato-bloque__icono {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s3);
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
}

.dato-bloque__icono svg {
  width: 20px;
  height: 20px;
}

.dato-bloque h3 {
  font-size: var(--fs-sm);
  margin-bottom: var(--s2);
}

.dato-bloque p {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.ciudades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

/* La lista completa, plegada. Existe para el que quiere comprobar que su
   ciudad está; el que sólo quiere saber si hay cobertura ya lo leyó en la
   frase de arriba y no tiene que pasar por encima de 51 nombres propios.
   Plegada además deja que Ctrl+F del navegador la encuentre en cuanto se
   abre, que es como se busca una ciudad en una lista larga. */
.ciudades-detalle {
  margin-top: var(--s3);
}

.ciudades-detalle > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
  /* El marcador por defecto de `summary` se ve distinto en cada navegador y
     en algunos ni se ve. Uno propio, con la misma flecha en todos. */
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.ciudades-detalle > summary::-webkit-details-marker {
  display: none;
}

.ciudades-detalle > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}

.ciudades-detalle[open] > summary::before {
  transform: rotate(90deg);
}

.ciudades-detalle > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Qué hace / qué no hace -------------------------------------- */

.limites {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 760px) {
  .limites {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
  }
}

.limites__col {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s5);
}

.limites__col h3 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.limites__col ul {
  list-style: none;
  display: grid;
  gap: var(--s3);
}

.limites__col li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.limites__col svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
}

.limites__col[data-lado="si"] svg {
  color: var(--ok);
}

.limites__col[data-lado="no"] svg {
  color: var(--err);
}

.limites__col[data-lado="no"] li {
  color: var(--muted);
}

/* ---------- Precio ------------------------------------------------------- */

/* En escritorio el título y la caja van lado a lado: si no, la mitad derecha
   de la sección queda vacía y el precio se ve desamparado. */
.precio__rejilla {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 900px) {
  .precio__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: var(--s7);
    align-items: center;
  }
  .precio__rejilla .seccion__cabeza {
    margin-bottom: 0;
  }
}

.precio-caja {
  max-width: 460px;
  border: 1px solid var(--brand-tint-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.precio-caja__cabeza {
  padding: var(--s5);
  background: var(--brand-tint);
  border-bottom: 1px solid var(--brand-tint-line);
}

.precio-caja__monto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

.precio-caja__monto b {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.precio-caja__monto span {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Cuando el precio aún es el marcador CAMBIAR_PRECIO, se ve como marcador:
   no puede pasar por un precio real si se publica por descuido. */
.precio-caja__monto b[data-marcador="si"] {
  font-size: 1.125rem;
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--warn);
  background: var(--warn-tint);
  border: 1px dashed currentColor;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

.precio-caja__lista {
  list-style: none;
  padding: var(--s5);
  display: grid;
  gap: var(--s3);
}

.precio-caja__lista li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: var(--fs-sm);
}

.precio-caja__lista svg {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--ok);
  flex: none;
}

/* Los plazos de pago. Rejilla automática en vez de columnas fijas: con cuatro
   plazos caben dos por fila en móvil y cuatro en escritorio sin escribir una
   sola media query, y si algún día se añade o se quita un plazo no hay que
   tocar este archivo. */
.precio-plazos {
  display: grid;
  /* DOS columnas fijas y no `auto-fit`. Con auto-fit entraban tres en la
     primera fila y el cuarto plazo caía solo en la segunda, dejando dos
     huecos: una rejilla 3+1 se lee como algo que se rompió, no como una
     tabla de precios. Cuatro plazos en 2x2 quedan parejos. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0 var(--s5) var(--s4);
  list-style: none;
}

.precio-plazos li {
  padding: var(--s3);
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.precio-plazos b {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* El precio sin descuento, tachado. Debajo y en pequeño, no al lado: en una
   caja de 7 rem dos importes en la misma línea se leen como uno solo mal
   partido. */
.precio-plazos__antes {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-decoration-thickness: 1px;
}

.precio-plazos span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.precio-caja__pie {
  padding: 0 var(--s5) var(--s5);
}

/* ---------- Formulario de solicitud ------------------------------------- */

.solicitud__rejilla {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 900px) {
  .solicitud__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--s7);
    align-items: start;
  }
}

.solicitud__intro h2 {
  margin-bottom: var(--s3);
}

.solicitud__intro p {
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: var(--measure);
}

.solicitud__intro p + p {
  margin-top: var(--s3);
}

.formulario {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow);
}

@media (min-width: 560px) {
  .formulario {
    padding: var(--s6);
  }
}

@media (min-width: 900px) {
  /* En escritorio el formulario queda anclado a la altura del scroll. */
  .formulario {
    position: sticky;
    top: 86px;
  }
}

.formulario__dupla {
  display: grid;
  gap: 0;
}

@media (min-width: 520px) {
  .formulario__dupla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s4);
  }
}

.formulario .casilla {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  margin-bottom: var(--s5);
}

.formulario .casilla--invalida {
  border-color: var(--err);
  background: var(--err-tint);
}

.formulario__legal {
  margin-top: var(--s4);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* Estados de envío */
.formulario__estado {
  margin-bottom: var(--s5);
}

.formulario__estado:empty {
  display: none;
  margin: 0;
}

.exito {
  display: none;
  text-align: left;
}

.formulario[data-estado="enviado"] .exito {
  display: block;
}

.formulario[data-estado="enviado"] .formulario__campos {
  display: none;
}

.exito__icono {
  display: grid;
  place-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ok-tint);
  color: var(--ok);
  margin-bottom: var(--s4);
}

.exito__icono svg {
  width: 24px;
  height: 24px;
}

.exito h3 {
  margin-bottom: var(--s3);
}

.exito p {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.exito p + p {
  margin-top: var(--s3);
}

.exito ol {
  margin: var(--s4) 0 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--s2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.exito ol + p {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* ---------- Enlace de vinculación con el bot ----------------------------
   El bloque más importante de la confirmación: es la acción que de verdad
   activa el servicio, así que pesa más que el «gracias» que tiene encima.
   Usa el tinte de marca y no el verde de éxito a propósito — verde diría
   «ya está», y todavía falta el toque del cliente. */

.vinculo {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--brand-tint-line);
  border-radius: var(--radius);
  background: var(--brand-tint);
}

.vinculo__titulo {
  font-weight: 650;
  font-size: var(--fs-body);
  color: var(--text);
  margin-bottom: var(--s2);
}

.vinculo__texto {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--s4);
}

.vinculo .btn {
  margin-bottom: var(--s4);
}

.vinculo__alterno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-top: var(--s4);
  border-top: 1px solid var(--brand-tint-line);
}

/* El enlace lleva un código sin espacios y puede ser largo: sin el
   `break-all` desborda el contenedor en móvil, que es donde se va a leer. */
.vinculo__url {
  flex: 1 1 14rem;
  min-width: 0;
  word-break: break-all;
  color: var(--text);
  font-size: var(--fs-xs);
}

.vinculo__aviso {
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  color: var(--faint);
}

.vinculo[hidden],
#bloque-sin-bot[hidden] {
  display: none;
}

/* ---------- Preguntas frecuentes ---------------------------------------- */

.faq {
  max-width: 760px;
  /* Centrada. La cabecera de sección se centró y esta lista se quedó pegada a
     la izquierda, con unos 360 px vacíos a su derecha: dos ejes de alineación
     en la misma sección, que es la señal más fiable de página no revisada. */
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  cursor: pointer;
  font-weight: 620;
  font-size: 1.0625rem;
  line-height: 1.4;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 6px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq summary:hover {
  color: var(--link);
}

.faq__cuerpo {
  padding: 0 0 var(--s5);
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.faq__cuerpo p + p {
  margin-top: var(--s3);
}

/* ---------- Pie y avisos legales ---------------------------------------- */

.pie {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding-block: var(--s7);
  /* Espacio para que la barra fija de móvil no tape el último renglón. */
  padding-bottom: calc(var(--s7) + 76px);
}

@media (min-width: 860px) {
  .pie {
    padding-bottom: var(--s7);
  }
}

.pie__aviso-clave {
  margin-bottom: var(--s6);
}

.pie__rejilla {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 860px) {
  .pie__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--s7);
  }
}

.pie h3 {
  font-size: var(--fs-sm);
  margin-bottom: var(--s3);
}

.pie p,
.pie li {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.6;
}

.pie p + p {
  margin-top: var(--s3);
}

.legal__bloque + .legal__bloque {
  margin-top: var(--s5);
}

.legal__lista {
  list-style: none;
  display: grid;
  gap: var(--s2);
  margin-top: var(--s2);
}

.legal__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
}

.legal__lista li b {
  color: var(--text);
  font-weight: 620;
}

.pie__fin {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  justify-content: space-between;
}

.pie__fin p {
  font-size: var(--fs-xs);
}

/* ---------- Barra fija de móvil ------------------------------------------ */
/* El formulario queda "a un toque de distancia" en cualquier punto del scroll.
   Sólo existe por debajo de 860px: en escritorio ya está el CTA de cabecera. */

.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px -8px rgba(16, 22, 32, 0.22);
}

.barra-movil__texto {
  min-width: 0;
  flex: 1;
}

.barra-movil__texto b {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.25;
}

.barra-movil__texto span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-movil .btn {
  flex: none;
}

@media (min-width: 860px) {
  .barra-movil {
    display: none;
  }
}

/* Cuando el formulario ya está en pantalla, la barra estorba: se retira. */
.barra-movil[hidden] {
  display: none;
}

/* ---------- Checkout: elegir cuántos meses ------------------------------- */
/* Usadas por templates/pagar.html. Cada tarjeta es un formulario POST propio
   -- y no un <select> -- para que la página funcione con JavaScript apagado y
   para que el número de meses viaje SIEMPRE como un valor del servidor, nunca
   como algo que la página calcula. */

.planes {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  border: 1px solid var(--brand-tint-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.plan__meses {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.plan__precio {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.plan__dias {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.plan .btn {
  margin-top: var(--s3);
  width: 100%;
  justify-content: center;
}

/* La lista numerada de "qué pasa después de pagar". Lista normal, con aire:
   no necesita el tratamiento de tarjetas de `.pasos`, que es para la portada. */
.pasos-lista {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 0 var(--s5);
  padding: 0;
}

.pasos-lista li {
  padding-left: var(--s2);
}

/* Modalidad cuando sólo hay una: se muestra como dato, no como desplegable.
   Un <select> con una sola opción finge una decisión que no existe. */
.campo__fijo {
  margin: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: var(--fs-sm);
  font-weight: 560;
}

.campo__fijo span {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Canales de la confirmación: una línea por canal, compacta. La versión
   anterior era un párrafo dedicado al correo, y hacía creer que sólo se
   avisaba por ahí aunque la persona hubiera elegido WhatsApp. */
.exito__canales {
  margin-top: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.exito__canales-titulo {
  margin: 0 0 var(--s2);
  font-size: var(--fs-xs);
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.exito__canales ul {
  list-style: none;
  margin: 0;
  display: grid;
  gap: var(--s2);
  font-size: var(--fs-sm);
}

.exito__pie {
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.6;
}

.exito__pie .mono {
  word-break: break-all;
}

/* Lista de guías en la home: centrada bajo su cabecera, como las demás
   secciones, en vez de pegada a la izquierda de un contenedor de 1120 px. */
.guias-lista {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: 1.25rem;
  list-style: disc;
  display: grid;
  gap: var(--s2);
}

/* ---- Guías (/iva-carro-electrico, /no-hay-citas-dian) ---- */
.guia h2 { margin-top: 2rem; }
/* En móvil el botón fijo (~76 px + la zona segura) tapaba el final del pie:
   «Política de datos» y el aviso de no afiliación. El hueco va en el pie,
   que es lo último de la página, y no en el artículo. */
@media (max-width: 899px) {
  .guia__pie { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}
.guia__respuesta { font-size: 1.15rem; }
.guia__aviso {
  margin: 1.25rem 0;
  padding: .85rem 1rem;
  border-left: 4px solid currentColor;
  background: rgba(0, 0, 0, .04);
  border-radius: .25rem;
}
.guia__verificado { font-size: .9rem; opacity: .8; }

/* Botón de un toque: fijo abajo en móvil, en el flujo en escritorio. */
.cta-fijo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.cta-fijo .btn { width: 100%; max-width: 28rem; text-align: center; }
@media (min-width: 900px) {
  .guia { padding-bottom: 0; }
  .cta-fijo { position: static; padding: 1.5rem 0 0; background: none; border: 0; }
}