/* ──────────────────────────────────────────────────────────────────────────
   TOPOO · la landing

   Lo propio de esta página. La paleta, las superficies, los botones, la marca y
   Topito viven en `topoo.css` y **acá no se redefinen**: si algo de la base no
   alcanza, se estira desde acá, pero el color y la forma se deciden en un solo
   lugar. Por eso en este archivo no hay ni un `#xxx`; todo sale de un token, y
   el modo oscuro sale gratis con ellos.

   ## Lo que esta página tiene que lograr

   Que se entienda de un vistazo, en un teléfono, sin leer. El orden es:
   **Topito dice qué hace → se ve haciéndolo → los números lo respaldan**. El
   peso visual va en ese orden y no en otro: la demo pesa más que los números,
   porque un número convence a quien ya entendió, y la demo es la que hace
   entender.

   Los cuatro colores con significado se usan **solo donde significan**: la
   brasa en el descuento y en lo que se toca, el musgo en lo vigente y lo
   confirmado por una persona, el ocre en lo que está por vencer, la terracota
   en la promesa de no inventar. Un ocre puesto por lindo le quita el sentido a
   los otros tres.
   ────────────────────────────────────────────────────────────────────────── */

/* ── el titular ────────────────────────────────────────────────────────────
   En teléfono Topito va arriba y grande: es la marca y lo primero que se ve.
   De 640 px para arriba se sienta al lado del texto, porque una columna de
   texto de 760 px de ancho se lee mal y el dibujo la acota. */
.heroe{display:grid;gap:14px;justify-items:center;text-align:center;
  margin-bottom:30px}
.heroe .grande{width:min(180px,52vw);height:auto}
.heroe .dice{min-width:0}
.heroe h1{margin-bottom:10px}
.heroe .apoyo{font-size:clamp(16px,4vw,19px);margin-bottom:20px}
.heroe .nota{margin:9px 0 0}

/* «Topito te ayuda»: quien habla tiene nombre. Es lo primero que se lee, así
   que es chico y en brasa, no un título más compitiendo con el titular. */
.quien{display:inline-flex;align-items:center;gap:7px;margin:0 0 6px;
  color:var(--acento);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase}
.quien::before{content:"";width:22px;height:2px;background:var(--acento);
  border-radius:var(--r-pill)}

@media (min-width:640px){
  .heroe{grid-template-columns:1fr auto;justify-items:start;text-align:left;
    align-items:center;gap:24px;margin-bottom:38px}
  .heroe .grande{grid-column:2;width:200px}
  .heroe .dice{grid-column:1;grid-row:1}
}

/* ── antes / ahora ─────────────────────────────────────────────────────────
   Los dos párrafos que explicaban el problema, vueltos dos bloques que se
   comparan solos. El hoyo es el trabajo que nadie hace; la brasa, el que sí.
   Puestos uno al lado del otro no hace falta la frase que los unía. */
.tira{display:grid;gap:12px;margin:0 0 34px}
.tira>*{padding:16px 18px}
.tira p{margin:0;color:var(--tinta)}
.tira .etiqueta{display:block;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta3);margin-bottom:5px}
.tira .ahora .etiqueta{color:var(--acento)}
.tira .ahora p{font-weight:600}
/* La esquina chica de la madriguera se apoya en el suelo: espejada en el par,
   las dos miran hacia adentro y el conjunto se lee como una pieza. */
.tira .ahora{border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg)}
@media (min-width:560px){ .tira{grid-template-columns:1fr 1fr;align-items:stretch} }

/* ── la demo ───────────────────────────────────────────────────────────────
   El bloque que más pesa de la página: es el producto, no su descripción. Se
   hunde respecto del resto y lleva la textura de tierra para que se lea como
   otra superficie —la madriguera donde pasa la conversación— y no como un
   párrafo más con un recuadro. */
.demo{background:var(--tierra), var(--hondo);background-size:var(--tierra-tam), auto;
  border-radius:var(--r-xl);padding:20px 16px 22px;margin:0 0 34px}
.demo h2{margin-bottom:16px;text-align:center}
@media (min-width:560px){ .demo{padding:24px 24px 26px} }

/* Las burbujas. La de la persona a la derecha y en brasa suave; la de Topito a
   la izquierda, junto a su cara. Es el mismo reparto del chat: quien mira la
   landing y después entra no encuentra otra página. */
.demo .burbuja{border-radius:var(--r-lg);padding:11px 15px;line-height:1.5;
  max-width:min(88%,460px);overflow-wrap:anywhere}
.demo .burbuja.yo{margin:0 0 14px auto;background:var(--acento-suave);
  color:var(--tinta);border-bottom-right-radius:var(--r-xs)}
.demo .burbuja.bot{background:var(--papel);border:1px solid var(--linea);
  border-bottom-left-radius:var(--r-xs);margin-bottom:10px;
  box-shadow:var(--sombra)}
.demo .turno{display:flex;gap:10px;align-items:flex-start}
.demo .turno .avatar{width:36px;height:32px;margin-top:2px}
.demo .turno .dice{min-width:0;flex:1}

/* La tarjeta de oferta. **Es la del chat**, con la misma información y el mismo
   orden: descuento y tope arriba, dónde y cuándo al medio, vigencia y rastro
   abajo. Se define acá y no en la base porque la base es lo que comparten las
   tres páginas, y esta tarjeta la pintan dos. */
.demo .oferta{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-madriguera);padding:15px;box-shadow:var(--sombra-alta)}
.demo .cab{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.demo .cab h3{margin:0;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.demo .precio{text-align:right;flex:none}
.demo .dcto{font-family:Fraunces,Georgia,serif;font-size:26px;font-weight:600;
  color:var(--acento);line-height:1;font-variant-numeric:tabular-nums}
/* El tope, pegado al descuento y no escondido abajo: un 20 % con techo de
   $50.000 no es un 20 % suelto, y ese matiz es el producto entero. */
.demo .tope{font-size:11.5px;color:var(--tinta2);margin-top:3px;white-space:nowrap}
.demo .linea{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;
  font-size:13px;color:var(--tinta)}
.demo .dato b{color:var(--tinta3);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.demo .vig{display:inline-block;margin:12px 0 0;padding:3px 10px;font-size:11.5px;
  color:var(--vida);background:var(--vida-suave);border-radius:var(--r-pill)}

.demo details{margin-top:10px;border-top:1px solid var(--linea);padding-top:9px}
.demo summary{font-size:12px;color:var(--tinta2);cursor:pointer}
.demo summary:hover{color:var(--acento)}
.demo .chica{font-size:11.5px;color:var(--tinta2);margin:8px 0 0;line-height:1.55;
  overflow-wrap:anywhere}
.demo .enlace{display:inline-block;margin-top:8px}
/* El rastro es el argumento, así que se ve sin abrir nada. Monoespaciado para
   que se lea como lo que es: un identificador que se puede ir a buscar.

   **Y se tiene que poder leer.** Con `--tinta3` a 10,5 px quedaba tan tenue que
   desaparecía —más en oscuro—, y una página que tres bloques más abajo dice «cada
   oferta viaja con su offer_id» no puede esconder justo ese dato. Sube a `--tinta2`
   y se apoya en una superficie hundida: se lee como identificador, no como ruido. */
.demo .ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;color:var(--tinta2);background:var(--hondo);
  border-radius:var(--r-xs);padding:5px 8px;margin:10px 0 0;
  overflow-wrap:anywhere;line-height:1.45}
.demo .mas{margin:10px 0 0}

/* ── los números ───────────────────────────────────────────────────────────
   Eran una tabla de siete filas. Son las mismas cifras: lo que cambia es que
   ahora se escanean. La grande manda —1.180 es el argumento— y las fichas se
   leen en cualquier orden, que es como se lee una landing de verdad. */
.numeros{margin:0 0 34px}
.numeros h2{text-align:center;margin-bottom:16px}
.grande{text-align:center;margin-bottom:14px;padding:18px 16px;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-xl);box-shadow:var(--sombra)}
.grande .cifra{display:block;font-size:clamp(56px,17vw,104px);line-height:.95;
  color:var(--acento);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.grande p{margin:8px auto 0;max-width:28ch}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:12px}
.ficha{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-madriguera);padding:14px 15px}
.ficha svg{width:20px;height:20px;fill:none;stroke:var(--tinta3);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:8px}
.ficha .cifra{display:block;font-size:28px;line-height:1.05;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.ficha p{margin:4px 0 0;font-size:12.5px;line-height:1.45}

/* Cada variante pinta lo que ese color significa y nada más: brasa el tope
   —que es una promesa sobre plata—, musgo lo que confirmó una persona, ocre lo
   que está por vencer. */
.ficha.acento{background:var(--acento-suave);border-color:transparent}
.ficha.acento .cifra, .ficha.acento svg{color:var(--acento);stroke:var(--acento)}
.ficha.vida{background:var(--vida-suave);border-color:transparent}
.ficha.vida .cifra, .ficha.vida svg{color:var(--vida);stroke:var(--vida)}
.ficha.cuidado{background:var(--cuidado-suave);border-color:transparent}
.ficha.cuidado .cifra, .ficha.cuidado svg{color:var(--cuidado);stroke:var(--cuidado)}
/* La fecha de vencimiento ocupa la fila entera: es la razón por la que este
   sistema se mira más de una vez, y una ficha chica no lo dice. */
.ficha.ancha{grid-column:1/-1;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap}
.ficha.ancha svg{margin:0}
.ficha.ancha .cifra{font-size:34px}
.ficha.ancha p{flex:1;min-width:11rem}

/* ── por qué creerle ───────────────────────────────────────────────────────
   Tres promesas verificables, cada una con su color: lo rastreable en brasa,
   lo derivado en ocre, lo que no existe en terracota. La barra de la izquierda
   es el color entero —no hay ícono— para que la lista se lea como tres reglas
   y no como tres párrafos. */
.confianza{padding:20px 18px;margin:0 0 34px}
.confianza ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.confianza li{background:var(--papel);border-radius:var(--r-sm);
  padding:12px 14px;border-left:4px solid var(--linea);font-size:14px;
  color:var(--tinta2)}
.confianza .con-rastro{border-left-color:var(--acento)}
.confianza .con-cuidado{border-left-color:var(--cuidado)}
.confianza .con-mal{border-left-color:var(--mal)}
.confianza .con-mal strong{color:var(--mal)}

/* ── el cierre ─────────────────────────────────────────────────────────── */
.cierre{text-align:center}
.cierre p{margin:0 auto 16px;max-width:46ch}