/* GENERADO por construir.mjs desde el <style> de index.html. No editar. */

/* ─────────────────────────  TOKENS  ───────────────────────── */
:root{
  /* Un solo tema, a propósito: fondo blanco. La mezcla celeste→morado vive sobre él. */
  color-scheme:light;
  --fondo:#F6F5FB;      /* casi blanco con sesgo violeta */
  --panel:#FFFFFF;
  --panel-2:#EEECF7;
  --linea:#DFDCEE;
  --linea-fuerte:#C9C4E2;
  --tx:#15172B;
  --tx-2:#565A7C;
  --tx-3:#666989;
  --celeste:#096275;    /* color de trabajo */
  --celeste-viva:#12A6C2;
  --violeta:#5B3ED6;    /* profundidad */
  --violeta-suave:#EDE9FD;
  --ok:#0D8757;
  --alerta:#9A6A00;
  --sombra:0 1px 2px rgba(21,23,43,.05), 0 12px 32px -18px rgba(91,62,214,.35);
  --resplandor:radial-gradient(60% 55% at 78% 8%, rgba(91,62,214,.13), transparent 70%),
               radial-gradient(45% 45% at 8% 0%, rgba(18,166,194,.13), transparent 70%);
  /* --marca es la mezcla viva de la identidad: logo y detalles.
     --marca-btn es la misma mezcla bajada de tono, para que el texto blanco se lea encima. */
  --marca:linear-gradient(118deg, var(--celeste-viva), var(--violeta));
  --marca-btn:linear-gradient(118deg, #0E7C93, #5433C9);

  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace;

  --ancho:1140px;
  --medida:62ch;
}
/* ─────────────────────────  BASE  ───────────────────────── */
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tx);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.028em; line-height:1.08; font-weight:660}
p{margin:0}
a{color:var(--celeste); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--celeste); outline-offset:3px; border-radius:4px}
ul,ol{margin:0; padding:0; list-style:none}
strong{font-weight:640; color:var(--tx)}

.env{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.banda{padding-block:clamp(64px,8.5vw,120px); border-top:1px solid var(--linea)}
.banda:first-of-type{border-top:0}

.rotulo{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx-3); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.rotulo::after{content:""; flex:1; height:1px; background:var(--linea); max-width:180px}
h2{font-size:clamp(1.85rem,3.5vw,2.6rem)}
.bajada{color:var(--tx-2); max-width:var(--medida); margin-top:18px; font-size:1.06rem}

/* ─────────────────────────  CABECERA  ───────────────────────── */
.cab{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--fondo) 82%, transparent);
  border-bottom:1px solid var(--linea);
  transition:background .3s ease, box-shadow .3s ease;
}
/* Al bajar de la portada la cabecera se asienta: se vuelve más opaca y
   proyecta sombra, para que se despegue del texto que pasa por debajo. */
.cab.baja{
  background:color-mix(in srgb, var(--fondo) 95%, transparent);
  box-shadow:0 10px 30px -24px rgba(21,23,43,.8);
}
.cab-int{display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px}
.marca{display:flex; align-items:center; gap:11px; color:var(--tx); font-weight:700; letter-spacing:.01em}
.marca:hover{text-decoration:none}
.marca svg{display:block; flex:none}
.marca .nom{font-size:1.15rem; letter-spacing:.06em}
/* Medido el 2026-08-11: iba a .62rem (9,9 px) y con --tx-3 daba 3,9:1 de
   contraste. Dos fallos a la vez, por debajo de 12 px Y por debajo del minimo
   de 4,5:1. No es purismo: es el nombre de la marca, y quien lo mire con
   sesenta anos o con el sol de frente no lo distingue. */
.marca .sub{font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; color:var(--tx-2); text-transform:uppercase; display:block; line-height:1; margin-top:4px}
.nav{display:flex; align-items:center; gap:28px}
/* `position:relative` y el relleno de abajo son para la luz: necesita un
   sitio donde vivir y un hueco donde caber sin empujar el texto. */
.nav a{
  position:relative; color:var(--tx-2); font-size:.93rem; font-weight:500;
  transition:color .28s ease;
  /* ⚠️ ALTURA DE DEDO, Y EL TEXTO NO SE MUEVE NI UN PÍXEL.
     Medía 31,5 px de alto. El mínimo cómodo para tocar son 44.

     No basta con engordar el enlace: el subrayado del apartado activo va
     pegado al FONDO de la caja (bottom:0), así que al crecer se despegaba del
     texto y quedaba flotando a media cabecera.

     Los números salen de medir, no de tantear. La caja va centrada en una
     cabecera de 64 px, así que crece 6,25 px por cada lado; el relleno se
     reparte 6 arriba y 13,5 abajo —los 7 que ya había más 6,5— y el conjunto
     queda en 44,05. El subrayado sube esos mismos 6,25 px con el bottom de
     aquí abajo, y vuelve exactamente donde estaba.

     Comprobado midiendo antes y después: texto en 18,2-38,2 y subrayado en
     45,3, igual que antes. Lo que crece es solo la zona que responde al dedo. */
  padding-top:6px; padding-bottom:13.5px;
  /* «Precio» es el enlace más corto del menú y se quedaba en 43 px de ancho:
     uno por debajo. Los demás ya pasan de sobra, así que esto solo lo toca a él. */
  min-width:44px;
}
.nav a:hover{color:var(--tx); text-decoration:none}

/* ── LA LUZ DEL APARTADO EN EL QUE ESTÁS ──────────────────────────
   Dos capas, y cada una hace una cosa:

     ::after  la barra de color, que CRECE DESDE EL CENTRO hacia los
              lados. Por eso `transform:scaleX()` y no un `width`:
              escalar no recalcula el diseño de la página, y ensanchar
              sí — con la barra pegada al menú fijo, animar `width`
              sesenta veces por segundo se nota.
     ::before un resplandor difuso justo debajo del texto, para que
              parezca que la luz SALE de ahí y no que hay una raya
              dibujada. Es lo que pediste: que ilumine desde abajo. */
.nav a::after, .nav a::before{
  content:""; position:absolute; left:0; right:0; bottom:6.25px;
  transform:scaleX(0); transition:transform .34s cubic-bezier(.4,1.3,.5,1), opacity .3s ease;
  pointer-events:none;
}
.nav a::after{height:2.5px; border-radius:2px; background:var(--marca)}
.nav a::before{
  height:16px; bottom:2.25px; opacity:0; border-radius:50%;
  background:radial-gradient(50% 100% at 50% 100%, rgba(91,62,214,.42), transparent 72%);
  filter:blur(3px);
}
.nav a.act{color:var(--tx); font-weight:640}
.nav a.act::after{transform:scaleX(1)}
.nav a.act::before{transform:scaleX(1); opacity:1}

/* ⚠️ Con «menos movimiento» la luz NO desaparece: aparece de golpe.
   Saber en qué apartado estás no es un adorno, es orientación — quitarlo
   dejaría a esa persona sin la información, que es peor que el movimiento
   que quería evitar. Lo que se quita es el deslizamiento, no la señal. */
@media (prefers-reduced-motion:reduce){
  .nav a::after, .nav a::before, .nav a{transition:none}
}

@media (max-width:860px){ .nav{display:none} }

/* ── ENTRAR A TU CUENTA ───────────────────────────────────────────
   El grupo de la derecha: un enlace discreto para quien YA es cliente
   y el botón de color para quien todavía no.

   Ese reparto no es estético. Quien viene a entrar sabe lo que busca y
   lo encuentra aunque sea pequeño; quien viene a comprar hay que
   llevarlo. Poner los dos en color haría competir a la venta consigo
   misma en la primera pantalla.

   Y sobrevive al móvil, que es donde .nav desaparece. */
.cab-acc{display:flex; align-items:center; gap:18px; flex:none}
.entrar{
  color:var(--tx-2); font-size:.93rem; font-weight:500; white-space:nowrap;
  transition:color .28s ease;
  /* ⚠️ ALTURA DE DEDO, Y NO SE VE.
     Medía 23 px de alto en el móvil. El mínimo para tocar algo son 24, así
     que fallaba por uno — y precisamente en el enlace por el que el cliente
     que ya te pagó entra a su panel desde el celular, que es por donde entra
     casi todo el mundo.
     No cambia el aspecto: `.cab-int` mide 64 px fijos y centra lo que lleva
     dentro, así que estos 44 px caben de sobra y el texto no se mueve ni un
     píxel. Lo que crece es la zona que responde al dedo. */
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
}
.entrar:hover{color:var(--tx); text-decoration:none}
/* El foco del teclado tiene que verse: es un enlace de acceso y hay quien
   navega sin ratón. */
.entrar:focus-visible{outline:2px solid var(--marca); outline-offset:3px; border-radius:4px}
/* Cuando ya entraste, el mismo enlace pasa a ser tu nombre. Lo cambia el
   guion del final de la página, preguntándole al portal.

   Sigue siendo discreto: quien ya está dentro no necesita que le griten
   dónde está su cuenta, y el botón de vender no debe perder el sitio. */
.entrar-yo{display:flex; align-items:center; gap:8px;
  background:var(--fondo-2,#f1f2f7); border:1px solid var(--linea,#e3e5ec);
  border-radius:999px; padding:4px 13px 4px 4px; color:var(--tx)}
.entrar-yo:hover{background:#e8eaf2; text-decoration:none}
.entrar-yo .yo-ini{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#12A6C2,#7B5CFF);
  font:700 13px system-ui;
}
.entrar-yo .yo-nom{
  font-weight:600; white-space:nowrap; max-width:10ch;
  overflow:hidden; text-overflow:ellipsis;
}

/* En pantallas estrechas los dos y la marca se dan de codos. */
@media (max-width:420px){
  .cab-acc{gap:12px}
  .entrar{font-size:.88rem}
  /* Con sesión se queda solo el círculo: el nombre estorba antes que la
     marca, y el círculo ya dice que hay alguien dentro y lleva a su cuenta. */
  .entrar-yo{padding:4px}
  .entrar-yo .yo-nom{display:none}
}
/* ⚠️ MEDIDO, NO ESTIMADO. En un móvil de 320 px —los pequeños siguen
   existiendo— añadir «Entrar» sacaba la cabecera 22 px fuera de la
   pantalla y la página entera se podía arrastrar de lado.

   El desborde lo causaba ESTE enlace: sin él, cero. Comprobado quitándolo
   en el navegador y volviendo a medir, en vez de suponerlo.

   Se recupera de tres sitios a la vez en lugar de encoger uno solo hasta
   dejarlo ilegible. Lo que NO se hace es esconder «Entrar» aquí: son
   justo los teléfonos más humildes, y su dueño también tiene que poder
   entrar a su panel. */
@media (max-width:400px){
  .cab-int{gap:10px}
  .cab-acc{gap:10px}
  .btn-chico{padding:9px 12px}
  .marca .sub{font-size:.68rem; letter-spacing:.1em}
}

/* ─────────────────────────  BOTONES  ───────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:10px;
  font-weight:600; font-size:.97rem; border:1px solid transparent; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-a{background:var(--marca-btn); color:#fff; box-shadow:0 8px 22px -12px var(--violeta)}
.btn-a:hover{box-shadow:0 14px 30px -12px var(--violeta)}
.btn-b{background:var(--panel); color:var(--tx); border-color:var(--linea-fuerte)}
.btn-b:hover{border-color:var(--celeste)}
.btn-chico{padding:9px 16px; font-size:.9rem}

/* ─────────────────────────  PORTADA  ───────────────────────── */
.portada{position:relative; padding-block:clamp(56px,7vw,96px) clamp(60px,8vw,110px)}
/* El resplandor es un elemento de verdad y no un ::before porque hay que
   moverlo: al desplazar sube un poco más despacio que el texto y eso le da
   profundidad a la portada. Un pseudoelemento no se puede animar.
   Sin guion queda exactamente donde estaba, quieto. */
.brillo{
  position:absolute; inset:-64px 0 0; background:var(--resplandor);
  pointer-events:none; z-index:0;
}
.portada .env{position:relative; z-index:1}
.portada-rej{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,64px); align-items:center}
@media (max-width:980px){ .portada-rej{grid-template-columns:1fr; gap:44px} }

.pildora{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2);
  background:var(--panel); border:1px solid var(--linea); border-radius:999px; padding:6px 14px 6px 10px;
}
.punto{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent)}
h1{font-size:clamp(2.3rem,5.6vw,4.05rem); margin-top:22px; letter-spacing:-.04em; line-height:1.02}
h1 em{font-style:normal; background:var(--marca); -webkit-background-clip:text; background-clip:text; color:transparent}
.portada p.lead{margin-top:22px; font-size:1.12rem; color:var(--tx-2); max-width:52ch}
.acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.nota-precio{margin-top:20px; font-family:var(--mono); font-size:.78rem; color:var(--tx-3); letter-spacing:.02em}

/* ─────────────────────────  CHAT DEMO  ───────────────────────── */
.chat{
  background:var(--panel); border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); overflow:hidden; display:flex; flex-direction:column;
}
.chat-top{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--linea); background:var(--panel-2);
}
.chat-top .quien{font-weight:620; font-size:.92rem}
.chat-top .est{
  margin-left:auto; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  /* Verde propio, mas oscuro que --ok. Sobre el lila del cabezal del chat,
     --ok daba 3,9:1 a 10,6 px. Este pasa el 4,5:1 sin cambiar el color de
     "correcto" del resto del sitio, que sobre blanco si cumple. */
  color:#0A6B44; display:flex; align-items:center; gap:6px;
}
.hilo{
  display:flex; flex-direction:column; gap:10px; padding:18px 16px; flex:1;
  min-height:430px; max-height:min(54vh,430px); overflow-y:auto; scrollbar-width:thin;
  scrollbar-color:var(--linea-fuerte) transparent;
}
.hilo::-webkit-scrollbar{width:8px}
.hilo::-webkit-scrollbar-thumb{background:var(--linea-fuerte); border-radius:99px; border:2px solid var(--panel)}
/* Sin JS los mensajes se ven todos; con JS aparecen uno a uno y el hilo crece como una
   conversación real — por eso salen del flujo, no solo se vuelven transparentes. */
.js .hilo>li{display:none}
.js .hilo>li.on{display:flex; animation:entra .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes entra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.msg{max-width:84%; display:flex; flex-direction:column; gap:3px}
.msg p{
  padding:10px 14px; border-radius:14px; font-size:.95rem; line-height:1.5;
  background:var(--panel-2); border:1px solid var(--linea);
}
.msg .hora{font-family:var(--mono); font-size:.63rem; color:var(--tx-3); letter-spacing:.06em}
.cli{align-self:flex-start}
.cli p{border-bottom-left-radius:5px}
.bot{align-self:flex-end; align-items:flex-end}
.bot p{
  border-bottom-right-radius:5px; color:var(--tx);
  background:color-mix(in srgb, var(--celeste) 14%, var(--panel));
  border-color:color-mix(in srgb, var(--celeste) 32%, var(--linea));
}
.bot .hora{text-align:right}
.nota{
  align-self:center; display:flex; align-items:center; gap:9px; text-align:center;
  font-family:var(--mono); font-size:.68rem; line-height:1.4; letter-spacing:.02em;
  color:var(--tx-2); background:var(--violeta-suave);
  border:1px dashed color-mix(in srgb, var(--violeta) 40%, transparent);
  border-radius:8px; padding:7px 12px; max-width:92%;
}
.nota svg{flex:none; color:var(--violeta)}
.escribiendo p{display:flex; gap:4px; align-items:center; padding:13px 15px}
.escribiendo i{width:6px; height:6px; border-radius:50%; background:var(--tx-3); animation:late 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.18s}
.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes late{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}
.chat-pie{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-top:1px solid var(--linea); background:var(--panel-2);
}
.chat-pie span{font-family:var(--mono); font-size:.66rem; color:var(--tx-3); letter-spacing:.08em}
.repetir{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:none; border:0; color:var(--celeste); cursor:pointer;
  /* 44 px de alto minimo. Medido: iba a 34 px, y por debajo de 44 el dedo
     falla lo suficiente como para que la gente deje de intentarlo. */
  padding:12px 8px; min-height:44px; display:inline-flex; align-items:center;
}
.repetir:hover{text-decoration:underline; text-underline-offset:3px}

/* ─────────────────────────  TARJETAS  ───────────────────────── */
.rej-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
@media (max-width:900px){ .rej-3{grid-template-columns:1fr} }
.tarjeta{
  background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:12px; transition:border-color .2s ease, transform .2s ease;
}
.tarjeta:hover{border-color:var(--linea-fuerte); transform:translateY(-2px)}
.icono{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--violeta-suave); color:var(--violeta); margin-bottom:4px;
}
.tarjeta h3{font-size:1.14rem}
.tarjeta p{color:var(--tx-2); font-size:.97rem}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--tx-2);
  border:1px solid var(--linea); border-radius:6px; padding:3px 8px; background:var(--fondo);
}

/* ─────────────────────────  REGLAS  ───────────────────────── */
.reglas{display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px; margin-top:44px}
@media (max-width:820px){ .reglas{grid-template-columns:1fr} }
.reglas li{
  display:grid; grid-template-columns:auto 1fr; gap:0 16px;
  padding:22px 0; border-top:1px solid var(--linea);
}
.reglas .cl{
  grid-row:span 2; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--celeste) 15%, transparent); color:var(--celeste); margin-top:2px;
}
.reglas h3{font-size:1.02rem; font-weight:640}
.reglas p{color:var(--tx-2); font-size:.95rem; margin-top:5px}

/* ─────────────────────────  PASOS  ───────────────────────── */
.pasos{counter-reset:p; margin-top:44px; display:grid; gap:0}
.pasos li{
  display:grid; grid-template-columns:auto 1fr; gap:0 24px; padding:26px 0;
  border-top:1px solid var(--linea); align-items:start;
}
.pasos li::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  font-family:var(--mono); font-size:.9rem; font-variant-numeric:tabular-nums;
  color:var(--celeste); padding-top:3px; letter-spacing:.06em;
}
.pasos h3{font-size:1.16rem}
.pasos p{color:var(--tx-2); margin-top:7px; max-width:64ch}
.pasos .dur{font-family:var(--mono); font-size:.7rem; color:var(--tx-3); letter-spacing:.1em; text-transform:uppercase; margin-top:8px; display:block}

/* ─────────────────────────  PRECIO  ───────────────────────── */
.precio-caja{
  margin-top:40px; border:1px solid var(--linea); border-radius:16px; overflow:hidden; background:var(--panel);
}
.precio-cab{padding:28px clamp(20px,3vw,32px); border-bottom:1px solid var(--linea); background:var(--panel-2)}
.formula{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; font-family:var(--mono); font-size:.82rem; color:var(--tx-2)}
.formula b{
  background:var(--fondo); border:1px solid var(--linea-fuerte); border-radius:8px; padding:7px 12px;
  color:var(--tx); font-weight:600;
}
.niveles{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea)}
@media (max-width:820px){ .niveles{grid-template-columns:1fr} }
.niveles>div{background:var(--panel); padding:26px clamp(18px,2.4vw,26px)}
.niveles h3{font-size:1.05rem; display:flex; align-items:center; gap:9px}
.niveles h3::before{content:""; width:9px; height:9px; border-radius:2px; background:var(--marca)}
.niveles p{color:var(--tx-2); font-size:.94rem; margin-top:10px}
.niveles .val{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-3); display:block; margin-top:14px}
.aviso{
  display:flex; gap:12px; padding:20px clamp(20px,3vw,32px); border-top:1px solid var(--linea);
  background:var(--violeta-suave); font-size:.93rem; color:var(--tx-2);
}
.aviso svg{flex:none; color:var(--violeta); margin-top:3px}

/* ─────────────────────────  PREGUNTAS  ───────────────────────── */
.faq{margin-top:40px; border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-weight:600; font-size:1.03rem; color:var(--tx);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:17px; font-family:var(--mono); font-size:1.3rem;
  color:var(--celeste); font-weight:400; transition:transform .2s ease;
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--celeste)}
.faq .resp{padding:0 clamp(0px,4vw,60px) 22px 0; color:var(--tx-2); max-width:var(--medida)}
.faq .resp p + p{margin-top:12px}

/* ─────────────────────────  CIERRE  ───────────────────────── */
.cierre{position:relative; overflow:hidden; border-top:1px solid var(--linea)}
.cierre::before{content:""; position:absolute; inset:0; background:var(--resplandor); pointer-events:none}
.cierre .env{position:relative}
.cierre-rej{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,56px); align-items:center}
@media (max-width:860px){ .cierre-rej{grid-template-columns:1fr} }
.datos{display:flex; flex-direction:column; gap:14px}
.dato{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:12px;
  background:var(--panel); border:1px solid var(--linea); color:var(--tx);
}
.dato:hover{border-color:var(--celeste); text-decoration:none}
.dato .ico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--violeta-suave); color:var(--violeta); flex:none}
.dato .dt{display:block; font-size:.97rem; font-weight:620}
.dato .dd{display:block; font-family:var(--mono); font-size:.75rem; color:var(--tx-3); margin-top:2px}

/* ─────────────────────────  LA MAQUETA DE LA PLATAFORMA  ─────────────────────
   Una foto fiel del panel, dibujada con HTML en vez de una captura.

   Por qué no una captura de pantalla: una imagen se queda vieja el día que
   cambie el panel y nadie se entera. Esto se arma con el MISMO menú que ve el
   cliente (lo lee construir.mjs de base.ts), así que envejece solo si el panel
   envejece.

   Y pesa unos kilobytes en vez de varios cientos. */
.maqueta{
  margin-top:clamp(26px,4vw,40px); border-radius:16px; overflow:hidden;
  border:1px solid var(--linea); background:var(--panel); box-shadow:var(--sombra);
}
.mtecho{
  background:var(--marca-btn); color:#fff; padding:13px 18px;
  display:flex; align-items:center; gap:12px;
}
.mcubo{
  width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.36);
  font:800 15px var(--sans); letter-spacing:-.02em;
}
.mnom{font-weight:700; font-size:.98rem; letter-spacing:-.01em}
.mpill{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:rgba(255,255,255,.19); border:1px solid rgba(255,255,255,.3);
  border-radius:99px; padding:5px 12px; font-family:var(--mono); font-size:.74rem;
}
.mpill i{width:7px; height:7px; border-radius:99px; background:#7FF2BD}

.mcuerpo{display:grid; grid-template-columns:196px 1fr; min-height:340px}
.mlat{border-right:1px solid var(--linea); padding:14px 10px; background:var(--fondo)}
.pgrupo + .pgrupo{margin-top:14px}
.pgtit{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-3); padding:0 10px; margin-bottom:6px;
}
/* ⚠️ CADA ENTRADA DEL MENÚ ES UN <button>, NO UN <div>.
   La maqueta se puede recorrer: pulsas una sección y se abre. Un div no lo
   alcanza el tabulador ni lo anuncia un lector de pantalla, así que la mitad
   de la gente no podría abrirlas. Van con role=tab y las abre maqueta.js.
   Aquí solo se le quita al botón la pinta de botón. */
.pitem{
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px;
  font-size:.86rem; color:var(--tx-2);
  width:100%; min-height:44px; text-align:left; font-family:inherit; cursor:pointer;
  background:none; border:0; box-shadow:none; appearance:none;
  transition:background .18s ease, color .18s ease;
}
.pitem svg{width:17px; height:17px; flex:none; opacity:.75}
.pitem:hover{background:var(--panel-2); color:var(--tx)}
.pitem:focus-visible{outline:2px solid var(--violeta); outline-offset:1px}
/* La sección abierta, marcada igual que en el panel de verdad. */
.pitem.on{background:var(--violeta-suave); color:var(--violeta); font-weight:640}
.pitem.on svg{opacity:1}
/* La sección cuyo nombre cambia por giro. El asterisco lo explica la nota. */
.pitem.cambia span::after{content:"*"; color:var(--tx-3); margin-left:2px}

/* ── LAS ONCE VISTAS ────────────────────────────────────────────────
   Una por sección del panel. Solo se ve la que está abierta.

   ⚠️ SE ESCONDEN CON CSS Y NO CON EL GUION, y hay un motivo: sin JavaScript
   —o antes de que llegue— saldrían las once una debajo de otra, once pantallas
   apiladas. Así se ve solo el Resumen y las demás esperan; si el guion no
   llega, la maqueta se queda enseñando el Resumen, que es exactamente lo que
   enseñaba antes de que esto fuera interactivo. */
.mvis{display:none}
.mvis.on{display:block; animation:mvent .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes mvent{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
/* Quien pidió menos movimiento cambia de sección sin transición. Es
   navegación: tiene que ser instantánea, no bonita. */
@media (prefers-reduced-motion: reduce){ .mvis.on{animation:none} }

.mtit{font-size:1.12rem; letter-spacing:-.02em; margin:0 0 3px; font-weight:700}
.mlede{font-size:.83rem; color:var(--tx-3); margin:0 0 14px}

.mvista{padding:16px 18px 20px; min-width:0}
.mruta{font-family:var(--mono); font-size:.72rem; color:var(--tx-3); margin-bottom:14px}
.mtar{display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:10px; margin-bottom:14px}
.mt{border:1px solid var(--linea); border-radius:11px; padding:11px 12px; background:var(--panel)}
.mt span{display:block; font-size:.74rem; color:var(--tx-3)}
.mt b{display:block; font-size:1.42rem; letter-spacing:-.03em; margin:2px 0 1px}
.mt i{display:block; font-style:normal; font-size:.68rem; color:var(--tx-3)}
.mcaja{border:1px solid var(--linea); border-radius:11px; overflow:hidden}
.mcaja + .mcaja{margin-top:12px}

/* El gráfico de actividad, con la misma forma que el del panel: siete
   columnas, el número encima y la letra del día debajo. Las alturas van en
   PORCENTAJE igual que allí — en píxeles se quedarían enanas si la caja
   crece. Aquí las barras están fijas porque son de muestra. */
.mpad{padding:12px 13px 14px}
.mdim{font-size:.72rem; color:var(--tx-3); margin-bottom:8px}
/* 150 px es la altura mínima que usa el gráfico del panel de verdad. Con
   menos, las barras salen achatadas y el número flota lejos de su columna. */
.mgraf{display:flex; gap:8px; align-items:flex-end; height:150px}
.mcol{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%}
.mv{font-family:var(--mono); font-size:.7rem; color:var(--tx-3)}
.mbw{width:100%; flex:1; display:flex; align-items:flex-end; justify-content:center}
.mbar{width:100%; max-width:30px; border-radius:6px 6px 2px 2px; background:var(--marca)}
.mdl{font-family:var(--mono); font-size:.64rem; color:var(--tx-3); letter-spacing:.06em}
/* La columna de hoy va marcada, igual que en el panel: es la que se mira. */
.mcol.hoy .mv{color:var(--violeta); font-weight:700}
.mcol.hoy .mdl{color:var(--violeta); font-weight:700}
.mcab{padding:10px 13px; border-bottom:1px solid var(--linea); font-weight:660; font-size:.85rem}
.mfila{display:flex; align-items:center; gap:10px; padding:9px 13px; font-size:.82rem}
.mfila + .mfila{border-top:1px solid var(--linea)}
.mav{
  width:26px; height:26px; border-radius:99px; flex:none; display:grid; place-items:center;
  background:var(--violeta-suave); color:var(--violeta);
  font-family:var(--mono); font-size:.62rem; font-weight:700;
}
.mq{font-weight:640; flex:none}
.mtx{color:var(--tx-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mnota{margin-top:14px; font-size:.82rem; color:var(--tx-3); line-height:1.7}
.mnota b{color:var(--tx-2)}
.mast{color:var(--violeta); font-weight:700}

/* ── LO QUE VA DENTRO DE CADA VISTA ─────────────────────────────────
   Piezas sueltas que se reparten entre las once. Los nombres van con el
   mismo prefijo «m» que el resto de la maqueta para no chocar con el sitio:
   este CSS y el de la página viven en el mismo archivo. */

/* La barra de resumen que llevan varias pantallas del panel: unos cuantos
   números seguidos y, a la derecha, lo que se puede hacer. */
.mbarra{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
  border:1px solid var(--linea); border-radius:11px; padding:10px 13px; margin-bottom:12px;
  font-size:.8rem; color:var(--tx-3);
}
.mbarra b{color:var(--tx); font-size:.95rem; margin-right:3px}
.mbacc{margin-left:auto; display:flex; gap:8px}
.mbtn{
  border-radius:8px; padding:6px 11px; font-size:.76rem; font-weight:640;
  background:var(--violeta-suave); color:var(--violeta); white-space:nowrap;
}
/* ⚠️ «--marca-btn» Y NO «--marca». Los dos son el degradado de la marca, pero
   el segundo es el de LUCIR y el primero el de PULSAR: arranca en #0E7C93 en
   vez de #12A6C2 justo para que el texto blanco encima se lea.
   Medido: con --marca daba 2,89:1 —por debajo del mínimo de 4,5— en los tres
   botones de acción de la maqueta. Con --marca-btn, 4,86:1. Para eso existe
   la segunda variable; yo cogí la primera sin mirar. */
.mbtn.pri{background:var(--marca-btn); color:#fff}

/* Los filtros de Conversaciones, con su cuenta al lado. */
.mchips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px}
.mchip{
  border:1px solid var(--linea); border-radius:99px; padding:5px 12px;
  font-size:.75rem; color:var(--tx-2); white-space:nowrap;
}
.mchip.on{background:var(--violeta); border-color:var(--violeta); color:#fff; font-weight:640}
.mchip.ojo{border-color:#e8b98a; color:#a35b12}

/* Etiquetas pequeñas: el canal, el estado, la oferta. */
.metq{
  display:inline-block; border-radius:6px; padding:2px 7px; font-size:.68rem; font-weight:700;
  font-family:var(--mono); letter-spacing:.02em; white-space:nowrap;
}
.metq.wa{background:#dcf5e6; color:#186b3d}
.metq.esc{background:#fdf0dc; color:#8a5210}
.metq.ok{background:#dcf5e6; color:#186b3d}
.metq.mal{background:#fbe3e0; color:#9b2c20}
.metq.of{background:var(--violeta-suave); color:var(--violeta)}

/* Una fila de lista con su hora a la derecha. */
.mfila .mhora{margin-left:auto; font-family:var(--mono); font-size:.68rem; color:var(--tx-3); flex:none}
.mfila.col{display:block}
.mfila.col .mcab2{display:flex; align-items:center; gap:8px; margin-bottom:3px}
.mfila.col .msub{font-size:.78rem; color:var(--tx-2); margin-left:36px}

/* ── EL CATÁLOGO ────────────────────────────────────────────────────
   Es la pantalla que más se pidió ver: aquí es donde el dueño mete lo que
   vende, con su foto y su precio, y de aquí saca el bot lo que contesta. */
.mcatg{font-size:.82rem; font-weight:700; margin:12px 0 8px; display:flex; gap:7px; align-items:baseline}
.mcatg em{font-style:normal; font-weight:400; color:var(--tx-3); font-family:var(--mono); font-size:.72rem}
.mrej{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px}
.mfic{border:1px solid var(--linea); border-radius:11px; overflow:hidden; background:var(--panel)}

/* ⚠️ LA FOTO VA DIBUJADA, NO ES UNA FOTOGRAFÍA.
   El catálogo de verdad lleva fotos que sube el dueño. Aquí se dibujan en
   SVG por dos razones: una foto real de comida en esta página son cientos de
   kilobytes en la pantalla que más visitas recibe, y sobre todo no habría
   forma honesta de conseguirla — enseñar el plato de un cliente en la web de
   venta es usar sus datos sin permiso. Dibujado se entiende igual que el
   catálogo lleva foto, sin afirmar que ese plato exista. */
.mfoto{
  display:block; aspect-ratio:4/3; width:100%;
  background:linear-gradient(150deg,#EDF6F8,#EFEBFB);
  border-bottom:1px solid var(--linea);
}
.mfoto svg{width:100%; height:100%; display:block}
.mficc{padding:9px 10px 10px}
.mfnom{font-size:.8rem; font-weight:640; line-height:1.32}
.mfdes{font-size:.71rem; color:var(--tx-3); margin-top:2px; line-height:1.4}
.mfpie{display:flex; align-items:center; gap:7px; margin-top:7px; flex-wrap:wrap}
.mfpre{font-size:.95rem; font-weight:700; letter-spacing:-.02em}
.mfantes{font-size:.72rem; color:var(--tx-3); text-decoration:line-through}
.mfsin{font-size:.78rem; color:var(--tx-3)}
/* Las existencias, con el mismo código de color que el panel: verde hay,
   ámbar quedan pocas, rojo agotado. */
.mfex{
  font-family:var(--mono); font-size:.66rem; font-weight:700; border-radius:5px; padding:2px 6px;
}
.mfex.hay{background:#dcf5e6; color:#186b3d}
.mfex.poco{background:#fdf0dc; color:#8a5210}
.mfex.nada{background:#fbe3e0; color:#9b2c20}

/* ── EL CALENDARIO ──────────────────────────────────────────────────── */
.mmes{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:12px 13px}
.mdia{
  aspect-ratio:1; border-radius:7px; border:1px solid var(--linea);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--mono); font-size:.68rem; color:var(--tx-3);
}
.mdia.fuera{border-color:transparent; opacity:.35}
.mdia.hay{background:var(--violeta-suave); border-color:transparent; color:var(--violeta); font-weight:700}
.mdia i{width:4px; height:4px; border-radius:99px; background:var(--violeta); display:block}
.msem{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:10px 13px 0;
  font-family:var(--mono); font-size:.62rem; color:var(--tx-3); text-align:center; letter-spacing:.06em;
}

/* ── EL FLUJO ───────────────────────────────────────────────────────
   Los pasos van NUMERADOS, y aquí sí significa algo: es el orden en que el
   agente razona. Numerar tarjetas que no son una secuencia se quitó del
   panel a propósito; esto es lo contrario. */
.mpasos{counter-reset:p; padding:4px 0}
.mpaso{display:flex; gap:10px; padding:9px 13px; font-size:.8rem; align-items:flex-start}
.mpaso + .mpaso{border-top:1px solid var(--linea)}
.mpaso::before{
  counter-increment:p; content:counter(p);
  width:21px; height:21px; border-radius:99px; flex:none; margin-top:1px;
  display:grid; place-items:center; background:var(--violeta-suave); color:var(--violeta);
  font-family:var(--mono); font-size:.66rem; font-weight:700;
}
.mpaso b{font-weight:640; display:block}
.mpaso span{color:var(--tx-3); font-size:.75rem}

/* ── AJUSTES (Configuración) ────────────────────────────────────────── */
.mcampo{display:flex; align-items:center; gap:10px; padding:9px 13px; font-size:.8rem}
.mcampo + .mcampo{border-top:1px solid var(--linea)}
.mcampo span{color:var(--tx-3); flex:none; min-width:104px}
.mcampo b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mcampo .metq{margin-left:auto}

/* ⚠️ EL HUECO DE LA CABECERA SE APRIETA EN LAS PANTALLAS DE 320.
   Al dar a «Entrar» sus 44 px de ancho para el dedo, la cabecera pasó a
   desbordar 3 px justo ahí: logo + Entrar + Conversemos ya no cabían con 18 px
   de separación. Medido, no visto — a 320 px la página se podía arrastrar de
   lado, que es el fallo que más veces se ha colado en este proyecto.
   Se recorta el hueco, que no el tamaño de lo que se toca. */
@media (max-width:380px){
  .cab-acc{gap:10px}
  .cab-int{gap:12px}
  /* Medido a 320: la marca son 115,6 px y el bloque de la derecha 177,7 —de
     los cuales 123,7 se los lleva el botón «Conversemos»—. Con los 40 px de
     margen de la página hacen 325,3 y la ventana tiene 320. Se recorta el
     relleno del botón, que es lo único que sobra sin quitarle tamaño a nada
     que se toque: el botón sigue midiendo de sobra para el dedo. */
  .cab-acc .btn-chico{padding-inline:9px}
}

/* En un móvil la barra lateral del panel se queda en iconos, igual que en el
   panel de verdad. Enseñar una maqueta con un menú que en el panel real no se
   ve así sería enseñar algo que no existe. */
@media (max-width:720px){
  .mcuerpo{grid-template-columns:1fr}
  .mlat{
    border-right:0; border-bottom:1px solid var(--linea);
    display:flex; gap:6px; overflow-x:auto; padding:10px;
  }
  /* ⚠️ «display:contents» y no «margin:0».
     La barra es un flex, pero sus hijos directos son los GRUPOS, no las
     secciones — así que se colocaban tres bloques en fila, cada uno apilando
     lo suyo hacia abajo: tres columnas de iconos en vez de una fila.
     Con esto los grupos desaparecen como caja y las secciones pasan a ser
     hijas directas de la barra, que es lo que hace falta para que vayan
     una detrás de otra. */
  .pgrupo{display:contents}
  .pgtit{display:none}
  /* ⚠️ «width:auto» deshace el «width:100%» del botón.
     Al pasar el menú de divs a botones se le puso ancho completo para que la
     zona pulsable llegue de lado a lado en la columna. Aquí es una TIRA
     horizontal: con ancho completo, cada botón ocupaba toda la pantalla y las
     once secciones quedaban una detrás de otra en un desplazamiento eterno. */
  /* En la tira de iconos cada botón medía 37 px de ancho. La tira ya se
     desplaza de lado, así que ensancharlos no aprieta nada. */
  .pitem{flex:none; width:auto; min-width:44px; justify-content:center; padding:7px 9px}
  .pitem span{display:none}
  .pitem svg{width:19px; height:19px}

  /* Las fichas del catálogo, en dos columnas: a una sola cada foto ocupa
     media pantalla y hay que desplazarse tres veces para ver cuatro platos. */
  .mrej{grid-template-columns:repeat(2,1fr); gap:8px}
  .mbarra{font-size:.75rem; gap:6px 12px}
  .mbacc{margin-left:0; width:100%}
  .mcampo{flex-wrap:wrap; gap:4px 10px}
  .mcampo span{min-width:0}
}

/* ─────────────────────────  EL ACOMPAÑANTE  ─────────────────────────────
   ⚠️ NACE INVISIBLE Y ASÍ SE QUEDA SI ALGO FALLA.

   `opacity:0` de fábrica. Solo lo enciende el guion, y solo dentro del
   bloque que ya exige pantalla grande y «sin preferencia de menos
   movimiento». Eso cubre tres casos de una vez, sin escribir tres reglas:

     · sin JavaScript ................ no aparece
     · con «menos movimiento» ........ no aparece
     · en un móvil ................... no aparece

   Un muñeco que se queda quieto en una esquina porque su animación no
   arrancó se lee como un fallo. Prefiero que no exista.

   Y en un celular de 390 px no cabe: taparía el texto, que es justo lo que
   la persona vino a leer. */
.zbot{
  position:fixed; right:clamp(8px, 2.2vw, 34px); top:0; z-index:40;
  opacity:0; pointer-events:none; will-change:transform;
}
.zbot-i{will-change:transform}
.zbot svg{display:block; filter:drop-shadow(0 10px 18px rgba(21,23,43,.18))}

/* ⚠️ EL ÚNICO TROZO CLICABLE ES EL MUÑECO, NO SU CAJA.
   `.zbot` sigue siendo intocable —va flotando encima del contenido y no
   puede comerse un clic destinado a un botón—. Se devuelve el tacto SOLO al
   dibujo, que ocupa 72×90 px en el margen derecho, donde no hay nada
   debajo. `cursor:pointer` porque si no, nadie descubre que se puede tocar. */
.zbot-i svg{pointer-events:auto; cursor:pointer}
/* ⚠️ 1360 px, Y ESTÁ MEDIDO, NO ESTIMADO.
   El contenido mide 1140 px centrados, y el bot ocupa 72 px más 34 de
   separación: necesita 106 px de margen libre a la derecha. Por debajo de
   1360 no los hay y se monta encima del texto.

   Medido el 2026-08-12 en un navegador de verdad:
       1180 px → se monta 78 px encima
       1260 px → se monta 40 px encima
       1320 px → se monta 11 px encima
       1400 px → 27 px de holgura ✓

   El umbral estaba en 1100 y era demasiado bajo. Con el bot solo mirando
   era feo; desde que se le puede hacer CLIC es un fallo, porque encima del
   texto se comería el clic de un enlace o un botón. */
@media (max-width:1359px){ .zbot{display:none} }
@media (prefers-reduced-motion:reduce){ .zbot{display:none} }

.pie{border-top:1px solid var(--linea); padding-block:34px; background:var(--panel)}
.pie-int{display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; justify-content:space-between}
.pie small{color:var(--tx-3); font-size:.83rem; font-family:var(--mono); letter-spacing:.03em}
.pie .marcas{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pie .legal{display:flex; gap:8px 20px; flex-wrap:wrap; margin:-10px 0}
/* Medidos a 22 px de alto: la mitad del minimo para un dedo. Uno de estos
   enlaces es el Libro de Reclamaciones, que por ley tiene que estar al
   alcance — y estaba, pero fallando al tocarlo. Se agranda la zona
   tactil con relleno, sin mover nada de sitio (por eso el margen negativo
   de arriba). */
.pie .legal a{color:var(--tx-2); font-size:.83rem;
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px}
.pie .legal a:hover{color:var(--celeste)}

/* ─────────────────────────  MOVIMIENTO  ─────────────────────────
   La página se dibuja escondida y GSAP la va mostrando. Eso solo vale si hay
   una salida, y la salida es `quieto` en el <html>: con esa clase se ve TODO
   de golpe y no se crea ni una animación. Se pone en tres casos —GSAP no
   llegó, tardó más de segundo y medio, o el visitante pidió menos movimiento—.

   Que la conexión lenta se lleve la versión quieta es a propósito, no un
   descuido: una portada en blanco esperando 122 KB de librería es peor que
   una portada sin coreografía. Aquí se vende desde Áncash y hay gente
   entrando con datos del celular. */
.js .rv{opacity:0}
.js.quieto .rv{opacity:1; transform:none}
.js.quieto .hilo>li{display:flex}

/* El escondite es SOLO opacidad, sin `transform`. Si el CSS también moviera
   el elemento, GSAP no podría devolverle el transform a la hoja de estilos al
   terminar —y tiene que devolvérselo, porque el `transform` en línea que deja
   le gana al `:hover` y las tarjetas se quedarían sin su levantada—. */
.js .tarjeta.rv{transition:none}

/* El hilo del chat se acomoda solo conforme van llegando los mensajes. */
.js .hilo{scroll-behavior:smooth}

/* Los números de los pasos se encienden conforme los vas leyendo. Sin guion
   salen encendidos desde el principio, que es como estaban siempre. */
.js .pasos li::before{color:var(--tx-3); transition:color .4s ease}
.js .pasos li.act::before,
.js.quieto .pasos li::before{color:var(--celeste)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .js .rv{opacity:1; transform:none}
  .js .hilo>li{display:flex}
  .js .hilo{scroll-behavior:auto}
  .js .pasos li::before{color:var(--celeste)}
}