/* ── Leax 2026 · piel nueva de la demo (rediseño aprobado el 27-sep) ─────────
   Va después de demo.css y cambia solo el aspecto: mismas pantallas, mismos
   textos, mismo recorrido. Los colores de bloque significan lo mismo que en la
   app y en la página de presentación:
     amarillo = espera tu OK · lima = listo · coral = mira esto
     verde = lo que gasta · lila = lo preparó la IA · acero = tu web       */

body{background:var(--surface)}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'opsz' 96;letter-spacing:-.03em}

/* Franja de arriba (meta de la demo): tinta, sobria */
.meta{background:#1B2437;color:#F3F6F9}
.meta-logo{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:17px;letter-spacing:-.02em}
.meta .modo button{color:#C7D9E5}
.meta .modo button.on{background:#FFFFFF;color:#1B2437}

/* Barra guía */
.guia{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--outline-v)}
.guia.terminado{background:linear-gradient(90deg,#DCF2A9,#fff 60%)}
.chip{background:#1B2437;border-radius:999px;letter-spacing:.06em}
.guia.terminado .chip{background:var(--success)}
.gbtn{border-radius:999px;padding:8px 14px;border-color:#D5E0E9;color:var(--ink)}
.gbtn:hover{border-color:var(--ink);color:var(--ink)}
.gbtn.pri{background:var(--primary);border-color:var(--primary)}

/* Menú lateral: logo B y cuadraditos de color lleno */
.side{background:#fff;border-right:0;margin:12px 0 12px 12px;border-radius:26px;
  box-shadow:var(--shadow);min-height:calc(100vh - 114px)}
.brand{padding:10px 12px 18px}
.logo-leax{display:inline-flex;align-items:baseline;font-family:'Gloock',Georgia,serif;font-size:34px;
  line-height:1;letter-spacing:-.03em;color:#1B2437}
.logo-leax svg{height:.47em;width:.5em;margin-left:.02em}
.side .grupo{color:#567C8E;letter-spacing:.08em;font-weight:600}
.nav{border-radius:14px;color:var(--ink);font-weight:500;font-size:14px}
.nav:hover{background:#F3F6F9}
.nav.on{background:#F3F6F9;color:var(--ink);border-color:transparent;font-weight:600}
.nav .ico{background:var(--hue);color:var(--hue-ink,#1B2437);font-weight:700;font-size:12.5px;border-radius:9px}
.nav.on .ico{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--hue)}
.nav .hecho{color:var(--success)}
.plan{background:#F7F9FB;border:0;border-radius:18px}

/* Contenido */
.main{padding:30px 34px 64px}
.head h1{font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1}
.head p{font-size:15px;margin-top:8px}
.panel{border:0;border-radius:var(--radius);box-shadow:var(--shadow)}
.p{padding:20px 22px}
h3.t{font-size:18px;font-weight:600}
.notice{border-left:0;border-radius:16px;background:#E9EBFF;color:#1E2F7A;padding:12px 16px}
.notice.warn{background:#FFF3D1;color:#4A3200}
.bar{height:8px;background:#E3ECF2}
.bar.ok i{background:#8FCB4F}

/* Botones en píldora */
.cta{border-radius:999px;padding:10px 18px;font-weight:600}
.cta.sm{border-radius:999px;padding:8px 14px}
.cta.gh{background:#fff;color:var(--ink);border:0;box-shadow:inset 0 0 0 1.5px #D5E0E9}
.cta.gh:hover{box-shadow:inset 0 0 0 1.5px var(--ink);filter:none}
.cta.ok{background:#2F7A3A}

/* Estados con los colores de bloque, texto oscuro legible */
.tag{border-radius:999px;letter-spacing:.04em;padding:5px 10px;background:#E9EBFF;color:#1E2F7A}
.tag.g{background:#DCF2A9;color:#2F4A12}
.tag.w{background:#FACF64;color:#4A3200}
.tag.n{background:#EEF2F7;color:#4A5A70}

/* Pasos */
.step.done .ck{background:#DCF2A9;border-color:#DCF2A9;color:#2F4A12}
.step.now{background:#E9EBFF;border-color:transparent}
.step .dot{background:#FACF64;box-shadow:0 0 0 4px #FFF3D1}

/* Números grandes y finos */
.kpi{padding:18px 20px}
.kpi .v{font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'opsz' 96;font-weight:300;
  font-size:44px;letter-spacing:-.04em;line-height:1}
.kpi .l{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;margin-top:6px}
.ring .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:44px;letter-spacing:-.04em}

/* ── Inicio: «Para hoy», bloques de color arriba ── */
.hoy{margin:6px 0 18px}
.hoy .fecha{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#567C8E;font-weight:600}
.hoy h2{margin:8px 0 0;font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.04em;line-height:1}
.hoy h2 em{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-variation-settings:'SOFT' 100,'opsz' 144;color:var(--primary)}
.bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:16px}
.blq{position:relative;overflow:hidden;border-radius:26px;padding:22px;min-height:220px;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.blq img{position:absolute;right:-38px;top:-38px;width:210px;height:210px;object-fit:cover;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 71%);
  mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 71%);
  animation:flota 7s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.blq .chipb{position:relative;align-self:flex-start;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.72);color:#1B2437}
.blq .tx{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.blq b{font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'opsz' 96;font-weight:600;font-size:30px;letter-spacing:-.035em;line-height:1;color:#1B2437}
.blq p{margin:0;font-size:14px;line-height:1.5;max-width:34ch}
.blq .cta{margin-top:6px;background:#1B2437}
.blq-ok{background:#FACF64;color:#4A3200}
.blq-listo{background:#DCF2A9;color:#2F4A12}
.blq-paso{background:#E9EBFF;color:#1E2F7A}
.blq-paso .cta{background:var(--primary)}
.blq-mira{background:#F77255;color:#1B2437}

/* Tour y menú */
#spot{border-color:var(--primary);border-radius:22px}
#globo{border:0;border-radius:24px}
#globo h3{font-size:22px;font-weight:600}
#menu .caja{border-radius:26px}
#menu .it{border-radius:16px}
#menu .it:hover{border-color:var(--primary);background:#F7F9FB}
dialog{border:0;border-radius:26px}
.pieza{border:0;border-radius:18px;box-shadow:var(--shadow)}
.lead-col{background:#EEF2F7;border-radius:18px}
.lead-card{border:0;border-radius:14px;box-shadow:0 1px 0 rgba(27,36,55,.04),0 12px 24px -20px rgba(27,36,55,.4)}
.email-tabs button[aria-pressed=true]{background:#1B2437;border-color:#1B2437}

@media (max-width:1100px){
  .side{display:none}
  .bloques{grid-template-columns:1fr}
}
@media (max-width:760px){
  .main{padding:18px 14px 44px}
  .blq{min-height:170px}
}
@media (prefers-reduced-motion:reduce){ .blq img{animation:none} }
.donde{color:#1E2F7A;background:#E9EBFF;border-radius:999px}