/* ===== Base ===== */
:root{
  --ink:#0b0b0c;
  --paper:#f6f1e9;
  --paper-2:#efe8dc;
  --white:#ffffff;
  --red:#e8161c;
  --red-deep:#b4090e;
  --muted:#6b665f;
  --muted-claro:#b8b2a8;
  --borde:#e3ddd0;
  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-texto:'Inter', sans-serif;
  --pad-seccion: clamp(72px, 12vw, 160px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-texto);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}

.contenedor{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px, 5vw, 64px);
}
.angosto{max-width:760px}

.seccion{
  position:relative;
  padding:var(--pad-seccion) 0;
  background:var(--white);
}
.clara{background:var(--paper)}
.oscura{background:var(--ink); color:var(--paper)}

/* ===== Fixed chrome ===== */
.marca-fija{
  position:fixed;
  top:22px; left:24px;
  z-index:40;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.14em;
  color:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
}
.progreso{
  position:fixed; top:0; left:0;
  height:3px; width:0%;
  background:var(--red);
  z-index:50;
  transition:width .08s linear;
}

/* ===== Kickers / typography helpers ===== */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 22px;
}
.kicker::before{
  content:"";
  width:22px; height:2px;
  background:var(--red);
  display:inline-block;
}
.kicker-clara{color:#ff6b6f}
.kicker-clara::before{background:#ff6b6f}

.titulo-seccion{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(28px, 4.4vw, 46px);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 22px;
}
.titulo-grande{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(40px, 8vw, 88px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 28px;
}
.parrafo{
  font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.65;
  color:var(--muted);
  max-width:640px;
  margin:0 0 16px;
}
.parrafo-claro{color:#d8d3c8}

/* ===== Reveal on scroll =====
   Sin JS, todo queda visible por default (progresión segura).
   Con JS, .js lo oculta antes de animarlo al entrar en vista. */
.reveal{opacity:1; transform:none}
html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,.8,.32,1), transform .7s cubic-bezier(.16,.8,.32,1);
}
html.js .reveal.is-visible{opacity:1; transform:translateY(0)}
html.js .reveal:nth-of-type(2){transition-delay:.08s}
html.js .reveal:nth-of-type(3){transition-delay:.16s}
html.js .reveal:nth-of-type(4){transition-delay:.24s}
html.js .reveal:nth-of-type(5){transition-delay:.32s}

/* ===== HERO ===== */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(80% 60% at 82% 8%, rgba(232,22,28,.28), transparent 60%),
    var(--ink);
  color:var(--paper);
  padding-top:calc(var(--pad-seccion) + 20px);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:clamp(20px, 4vw, 60px);
}
.eyebrow{
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-claro);
  margin:0 0 26px;
}
.hero-wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(72px, 15vw, 168px);
  line-height:.88;
  letter-spacing:-.03em;
  margin:0;
  position:relative;
  display:inline-block;
}
.hero-wordmark .comilla{
  position:absolute;
  top:-0.03em;
  right:-0.15em;
  width:0.2em;
  height:auto;
  pointer-events:none;
}
.hero-claim{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(22px, 3vw, 32px);
  line-height:1.3;
  margin:26px 0 18px;
  color:var(--paper);
}
.hero-sub{
  font-size:clamp(15px, 1.6vw, 18px);
  line-height:1.6;
  color:var(--muted-claro);
  max-width:460px;
  margin:0;
}
.hero-figura{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.hero-figura img{
  width:min(360px, 80%);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
  animation:flotar 6s ease-in-out infinite;
}
@keyframes flotar{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
.globo{
  position:absolute;
  top:2%;
  right:6%;
  max-width:220px;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-texto);
  font-weight:600;
  font-size:15px;
  line-height:1.4;
  padding:12px 18px;
  border-radius:18px 18px 4px 18px;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.scroll-cue{
  position:absolute;
  bottom:34px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-claro);
}
.scroll-cue span{
  width:1px; height:34px;
  background:linear-gradient(var(--red), transparent);
  animation:bajar 1.8s ease-in-out infinite;
}
@keyframes bajar{
  0%{opacity:0; transform:scaleY(.3); transform-origin:top}
  50%{opacity:1; transform:scaleY(1); transform-origin:top}
  100%{opacity:0; transform:scaleY(.3); transform-origin:bottom}
}

.emoji{margin-inline:.22em}

/* ===== Texturas (problema) ===== */
.texturas{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.texturas span{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  padding:8px 16px;
  border:1px solid var(--borde);
  border-radius:100px;
  color:var(--muted);
  background:var(--white);
}

/* ===== MILO section ===== */
.milo-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:clamp(24px, 5vw, 60px);
  align-items:center;
}
.flujo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:36px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(16px, 2vw, 20px);
}
.flujo span:not(.flecha){
  text-transform:uppercase;
  letter-spacing:.04em;
}
.flujo span:nth-child(1){color:var(--muted)}
.flujo span:nth-child(3){color:var(--muted)}
.flujo span:nth-child(5){color:var(--ink)}
.flujo span:nth-child(7){color:var(--red)}
.flecha{color:var(--muted-claro); font-weight:400}
.milo-figura{display:flex; justify-content:center}
.milo-figura img{width:min(300px, 100%)}

/* ===== Conversación ===== */
.chat-wrap{margin-top:56px}
.chat{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--white);
  border:1px solid var(--borde);
  border-radius:24px;
  padding:clamp(20px, 4vw, 40px);
  box-shadow:0 30px 70px -30px rgba(11,11,12,.18);
}
.msg{
  max-width:78%;
  padding:13px 18px;
  border-radius:18px;
  font-size:15.5px;
  line-height:1.5;
}
html.js .msg{
  opacity:0;
  transform:translateY(14px) scale(.98);
  transition:opacity .5s ease, transform .5s ease;
}
html.js .msg.visto{opacity:1; transform:translateY(0) scale(1)}
.msg.cliente{
  align-self:flex-end;
  background:var(--paper-2);
  color:var(--ink);
  border-radius:18px 18px 4px 18px;
}
.msg.milo{
  align-self:flex-start;
  background:var(--ink);
  color:var(--white);
  border-radius:18px 18px 18px 4px;
}
.sistema{
  align-self:center;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red-deep);
  background:rgba(232,22,28,.08);
  padding:7px 14px;
  border-radius:100px;
}
html.js .sistema{opacity:0; transition:opacity .5s ease}
html.js .sistema.visto{opacity:1}

/* ===== Lo que cambia ===== */
.cambio-bloque{
  border-left:2px solid var(--borde);
  padding-left:24px;
}
.cambio-con{border-left-color:var(--red)}
.cambio-etq{
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-claro);
  margin:0 0 8px;
}
.cambio-con .cambio-etq{color:var(--red)}
.cambio-linea{
  font-size:clamp(18px, 2.4vw, 24px);
  line-height:1.45;
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  color:var(--ink);
}
.cambio-flecha{
  font-size:22px;
  color:var(--muted-claro);
  margin:26px 0 26px 22px;
}

/* ===== No es un chatbot ===== */
.contraste{margin:36px 0 40px}
.contraste p{
  font-family:var(--font-display);
  font-size:clamp(18px, 2.4vw, 24px);
  font-weight:500;
  margin:0 0 16px;
  color:var(--paper);
}
.tachado{
  color:#847f77;
  text-decoration:line-through;
  text-decoration-color:var(--red);
  text-decoration-thickness:2px;
  font-weight:400;
}
.figura-accion{width:190px}

/* ===== Potencial ===== */
.figura-festejo{width:170px; margin-top:32px}

/* ===== Cierre ===== */
.cierre{
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  padding:clamp(60px, 10vw, 100px) 24px clamp(40px, 6vw, 60px);
}
.cierre-sticker{margin:0 auto 20px}
.cierre-texto{
  font-family:var(--font-display);
  font-size:clamp(20px, 2.6vw, 26px);
  font-weight:600;
  margin:0 0 30px;
}
.cierre-marca{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-claro);
  margin:0;
}

/* ===== Responsive ===== */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; text-align:left}
  .hero-figura{margin-top:40px; justify-content:flex-start}
  .globo{left:0; right:auto}
  .milo-grid{grid-template-columns:1fr}
  .milo-figura{order:-1}
  .milo-figura img{width:200px}
  .msg{max-width:88%}
}
@media (max-width:520px){
  .marca-fija{top:16px; left:18px; font-size:12px}
  .hero-wordmark::after{right:-16px; width:14px; height:18px}
}

@media (prefers-reduced-motion: reduce){
  .reveal, .msg, .sistema{transition:none !important; opacity:1 !important; transform:none !important}
  .hero-figura img, .scroll-cue span{animation:none !important}
}