/* ──────────────────────────────────────────────────────────────────────────
   TOPOO · base compartida

   El topo vive bajo tierra y sale a buscar: tierra húmeda, raíces y musgo, con
   un acento de brasa para lo gastronómico, que es lo único que debe gritar.

   **Móvil primero, y no de boca**: el destino real es WhatsApp, así que el
   ancho de teléfono es el caso de diseño y el escritorio el holgado. Una
   landing pensada ancha y «adaptada» a angosto termina angosta y mal.

   ## Qué vive acá y qué no

   Este archivo es lo que las tres páginas comparten: paleta, tipografía,
   superficies, botones, formularios y la marca. Lo propio de cada página vive
   en `landing.css` y `chat.css`.

   La separación no es orden por el orden: la landing y el chat se editan por
   separado y **tienen que seguir pareciéndose**. Si cada página trajera su
   propia paleta, se despegarían en el primer cambio. Acá está lo que las
   mantiene juntas; allá, lo que cada una necesita.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  /* ── tierra ─────────────────────────────────────────────────────────── */
  --fondo:#F2EDE1;      /* arena clara */
  --papel:#FCFAF5;      /* hueso — las superficies que se levantan */
  --hondo:#E9E1D1;      /* greda — los bloques que se hunden */
  --tinta:#2E2823;      /* tierra oscura */
  --tinta2:#6B6055;     /* topo */
  --tinta3:#9C9287;     /* ceniza */
  --linea:#DED5C5;      /* borde */

  /* ── los cuatro colores con significado ─────────────────────────────────
     **No son decoración: cada uno dice algo.** El que se use por lindo en un
     lugar donde no significa eso le quita sentido a los otros tres. */
  --acento:#C4622D;     /* brasa — el descuento y las acciones */
  --vida:#4A6741;       /* musgo — vigente, confirmado por una persona */
  --cuidado:#B08427;    /* ocre — derivado, sin confirmar */
  --mal:#9E3B2E;        /* terracota — vencido, error */

  /* Las versiones suaves, para pintar fondos sin gritar. */
  --acento-suave:#F7E6D9;
  --vida-suave:#E4EADF;
  --cuidado-suave:#F6EDD6;
  --mal-suave:#F6E2DD;

  /* ── forma ──────────────────────────────────────────────────────────────
     Un radio grande y uno chico en la misma pieza: la esquina chica es la que
     apoya en el suelo. Es lo que le da carácter a un rectángulo, y es gratis. */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  --r-pill:999px;
  --r-madriguera:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);

  --sombra:0 1px 2px rgba(46,40,35,.05), 0 4px 16px rgba(46,40,35,.05);
  --sombra-alta:0 2px 4px rgba(46,40,35,.06), 0 12px 32px rgba(46,40,35,.09);

  /* ── textura ────────────────────────────────────────────────────────────
     Tierra, no ruido de plantilla: puntos ínfimos y muy separados. Se nota
     cuando no está, no cuando está — que es todo lo que se le pide. */
  --tierra:
    radial-gradient(circle at 17% 23%, rgba(110,90,70,.055) 0 1px, transparent 1.4px),
    radial-gradient(circle at 71% 58%, rgba(110,90,70,.045) 0 1px, transparent 1.4px),
    radial-gradient(circle at 43% 81%, rgba(110,90,70,.05) 0 1px, transparent 1.4px);
  --tierra-tam:37px 41px, 53px 47px, 67px 61px;
}
/* Un chat se usa de noche. El acento sube para no perder contraste sobre oscuro,
   y la textura se invierte: sobre tierra oscura la mota es luz, no sombra. */
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#1A1613; --papel:#262119; --hondo:#211C16;
    --tinta:#EDE6DA; --tinta2:#B3A797; --tinta3:#7D7365; --linea:#39322A;
    --acento:#E8804A; --vida:#7FA06F; --cuidado:#D6A741; --mal:#D4705F;
    --acento-suave:#3A2820; --vida-suave:#232B21; --cuidado-suave:#332B1B;
    --mal-suave:#321F1B;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --sombra-alta:0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
    --tierra:
      radial-gradient(circle at 17% 23%, rgba(255,240,220,.035) 0 1px, transparent 1.4px),
      radial-gradient(circle at 71% 58%, rgba(255,240,220,.028) 0 1px, transparent 1.4px),
      radial-gradient(circle at 43% 81%, rgba(255,240,220,.03) 0 1px, transparent 1.4px);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--tinta);
  background:var(--tierra), var(--fondo);
  background-size:var(--tierra-tam), auto;
  background-attachment:fixed;
  font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* 16 px de aire a los lados: sin esto el texto toca el borde en un teléfono. */
  padding:0 16px;
}
h1,h2,h3,.cifra{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600}
h1{font-size:clamp(30px,7.5vw,50px);line-height:1.06;margin:0 0 12px;letter-spacing:-.025em}
h2{font-size:clamp(21px,4.5vw,28px);line-height:1.18;margin:0 0 10px;letter-spacing:-.015em}
h3{font-size:16px;margin:0 0 6px}
p{margin:0 0 14px;color:var(--tinta2)}
strong{color:var(--tinta);font-weight:600}
a{color:var(--acento)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--hondo);border-radius:var(--r-xs);padding:1px 5px}
.envoltura{max-width:760px;margin:0 auto;padding:26px 0 64px}
.nota{font-size:12px;color:var(--tinta3)}

/* ── marca ─────────────────────────────────────────────────────────────── */
.marca{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.marca .logo,
.marca .topito{width:38px;height:34px;flex:none}
.marca .nombre{font-family:Fraunces,Georgia,serif;font-size:21px;font-weight:600;
  letter-spacing:.06em}
.marca .sub{font-size:12px;color:var(--tinta3);margin-left:auto;text-align:right}

/* ── Topito ────────────────────────────────────────────────────────────────
   **El personaje es la marca, así que es SVG propio y no una imagen.** Siendo
   SVG inline hereda las variables de la paleta: en oscuro cambia solo, y no hay
   una segunda versión del dibujo que se olvide de actualizar.

   `.topito` es el tamaño; las clases de adentro son las partes, para que cada
   página pueda animar o recolorear sin volver a dibujarlo. */
.topito{display:block;flex:none;overflow:visible}
.topito .cuerpo{fill:var(--tinta2)}
.topito .panza{fill:var(--acento-suave)}
.topito .hocico{fill:var(--acento)}
.topito .ojo{fill:var(--tinta)}
.topito .garra{stroke:var(--papel);stroke-width:1.6;stroke-linecap:round}
.topito .bigote{stroke:var(--tinta3);stroke-width:1.2;stroke-linecap:round}
.topito .tierra{fill:var(--tinta);opacity:.13}
.topito .brote{stroke:var(--vida);stroke-width:2.2;stroke-linecap:round;fill:none}
.topito .hoja{fill:var(--vida)}

/* ── superficies ───────────────────────────────────────────────────────────
   Tres alturas y nada más: lo que se levanta (`panel`), lo que se hunde
   (`hoyo`) y lo que se destaca (`brasa`). Una cuarta variante es una decisión
   que se toma dos veces y se recuerda una. */
.panel{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-madriguera);padding:18px;box-shadow:var(--sombra)}
.hoyo{background:var(--hondo);border-radius:var(--r-madriguera);padding:18px}
.brasa{background:var(--acento-suave);border:1px solid transparent;
  border-radius:var(--r-madriguera);padding:18px}

/* ── botones ───────────────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--acento);color:#fff;border:0;border-radius:var(--r-sm);
  padding:14px 24px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  width:100%;box-shadow:var(--sombra)}
.boton:hover{filter:brightness(1.07)}
.boton:active{transform:translateY(1px)}
.boton.secundario{background:var(--papel);color:var(--acento);
  border:1px solid var(--acento);box-shadow:none}
@media (min-width:640px){ .boton{width:auto} }

/* La píldora: la forma de todo lo que se ofrece para tocar dentro de un flujo
   —las opciones del chat, los filtros—. Una sola definición para que el chat y
   la landing ofrezcan cosas con la misma cara. */
.pildora{display:inline-flex;align-items:center;gap:6px;background:var(--papel);
  border:1px solid var(--linea);color:var(--tinta);border-radius:var(--r-pill);
  padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;text-align:left;
  line-height:1.3}
.pildora:hover{border-color:var(--acento);background:var(--acento-suave);
  color:var(--acento)}
.pildora .n{color:var(--tinta3);font-size:11.5px;font-variant-numeric:tabular-nums}
.pildora:hover .n{color:var(--acento)}

/* ── formulario ────────────────────────────────────────────────────────── */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;color:var(--tinta2);margin-bottom:5px}
.campo input{width:100%;padding:12px 14px;border:1px solid var(--linea);
  border-radius:var(--r-sm);background:var(--papel);color:var(--tinta);font:inherit}
.campo input:focus{outline:2px solid var(--acento);outline-offset:1px;
  border-color:transparent}
.error{background:var(--mal-suave);border:1px solid var(--mal);color:var(--mal);
  border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;margin-bottom:14px}

/* ── marcas de procedencia ─────────────────────────────────────────────────
   La landing las muestra en la demo y el chat en cada tarjeta. **Es el mismo
   vocabulario visual**: si en un lado el ocre significa «derivado» y en el otro
   no significa nada, deja de significar en los dos. */
.marca-dato{display:inline-block;font-size:10px;padding:2px 8px;
  border-radius:var(--r-pill);border:1px solid var(--linea);background:var(--fondo);
  color:var(--tinta2);white-space:nowrap;line-height:1.5}
.marca-dato.i{border-color:var(--cuidado);color:var(--cuidado);
  background:var(--cuidado-suave)}
.marca-dato.h{border-color:var(--vida);color:var(--vida);background:var(--vida-suave)}

/* Quien prefiere no ver movimiento, no lo ve. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* `hidden` tiene que ganarle a cualquier `display` de arriba. Sin esto, un
   `<div class="tres" hidden>` se sigue viendo, porque `.tres` declara `display:grid`.
   Lo usan los bloques que dependen de `landing.json`: nacen ocultos y solo aparecen
   cuando el dato llegó. */
[hidden]{display:none !important}