/* ============ Tokens ============ */
:root{
  --bg:#111A2E;
  --panel:#1B2740;
  --btn:#263B62;
  --accent:#6E8BB8;
  --text:#F4EBDD;
  --gold:#D9B56D;
  --hair:#E8CBA0;
  --mood:#E8B9AC;

  --text-dim:color-mix(in srgb, var(--text) 68%, transparent);
  --text-mute:color-mix(in srgb, var(--text) 58%, transparent);

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:26px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:600}
p{margin:0}
em{font-style:normal;color:var(--accent)}
::selection{background:var(--gold);color:var(--bg)}

.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--gold);color:var(--bg);padding:10px 16px;border-radius:8px}

/* ============ Eyebrow ============ */
.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:22px;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-size:.95rem;font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn--primary{background:var(--text);color:var(--bg)}
.btn--primary:hover{background:#fff}
.btn--ghost{border-color:color-mix(in srgb,var(--text) 22%,transparent);color:var(--text)}
.btn--ghost:hover{border-color:color-mix(in srgb,var(--text) 45%,transparent);background:color-mix(in srgb,var(--text) 6%,transparent)}
.btn--lg{padding:17px 30px;font-size:1rem}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ Nav ============ */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.nav.is-stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom-color:color-mix(in srgb,var(--text) 8%,transparent)}
.nav__inner{display:flex;align-items:center;gap:34px;height:76px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;font-size:1.05rem}
.brand__mark{color:var(--gold);font-size:.9rem}
.nav__links{display:flex;gap:30px;margin-left:auto}
.nav__links a{font-size:.9rem;color:var(--text-dim);transition:color .2s}
.nav__links a:hover{color:var(--text)}
.nav__cta{padding:10px 20px;font-size:.88rem}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.nav__toggle span{width:22px;height:1.5px;background:var(--text);display:block}
.menu{display:none;flex-direction:column;padding:8px 22px 22px;background:var(--panel);border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.menu a{padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent);font-size:1rem}
.menu a:last-child{border:0;color:var(--gold)}

/* ============ Hero ============ */
.hero{position:relative;padding:140px 0 80px;overflow:hidden}
.hero__glow{
  position:absolute;top:-18%;right:-14%;width:min(950px,90vw);aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent) 0%,transparent 62%);
  filter:blur(38px);pointer-events:none;
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero__title{font-size:clamp(2.7rem,5.6vw,4.45rem);letter-spacing:-.035em;line-height:1.02}
.hero__title em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--gold);letter-spacing:-.01em}
.hero__sub{margin-top:28px;max-width:44ch;font-size:1.07rem;color:var(--text-dim);line-height:1.7}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__trust{margin-top:30px;font-size:.86rem;color:var(--text-mute);max-width:42ch;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--gold) 45%,transparent)}

.hero__art{position:relative;display:flex;justify-content:center;align-items:center}
.hero__art img{max-height:none}
.hero__halo{
  position:absolute;inset:6% 4%;
  background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--hair) 14%,transparent) 0%,transparent 65%);
  filter:blur(30px);
}
/* El hero ya no es un recorte: es una escena nocturna completa.
   Se sirve a su proporción nativa (5:4) y el borde se disuelve con máscara,
   así el cielo de la ilustración se funde con el navy de la página. */
.hero__img{
  position:relative;
  width:100%;
  max-width:560px;
  height:auto;
  aspect-ratio:5/4;
  object-fit:cover;
  /* closest-side: la máscara llega a alfa 0 justo en el borde de la caja,
     así no se ve el rectángulo de la imagen sobre el navy de la página. */
  --hero-edge:radial-gradient(ellipse closest-side at 50% 50%,#000 52%,transparent 100%);
  -webkit-mask-image:var(--hero-edge);
  mask-image:var(--hero-edge);
  transform-origin:50% 56%;
  animation:float 9s var(--ease-soft) infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-9px) scale(1.012)}
}

.hero__status{
  position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-dim);
  white-space:nowrap;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);transition:background .45s ease,box-shadow .45s ease}
.dot[data-state="think"]{background:var(--gold);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 70%,transparent)}
.dot[data-state="talk"]{background:#A8D8B0;box-shadow:0 0 12px color-mix(in srgb,#A8D8B0 70%,transparent)}

/* ============ Sections ============ */
.section{padding:118px 0}
.section--panel{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 55%,transparent),transparent 85%)}
.section--tight{padding:80px 0}
.section__title{font-size:clamp(2rem,3.9vw,3.05rem);letter-spacing:-.03em}
.section__title--sm{font-size:clamp(1.75rem,3vw,2.35rem)}
.section__title em{font-family:var(--serif);font-style:italic;color:var(--gold)}
.section__lede{margin-top:22px;max-width:56ch;color:var(--text-dim);font-size:1.03rem}

/* ============ Grid + cards ============ */
.grid{display:grid;gap:18px;margin-top:54px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:linear-gradient(165deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--panel) 55%,transparent));
  border:1px solid color-mix(in srgb,var(--text) 7%,transparent);
  border-radius:var(--r-md);
  padding:30px 28px 32px;
  transition:border-color .25s ease,transform .25s ease;
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 34%,transparent);transform:translateY(-3px)}
.card h3{font-size:1.16rem;margin-bottom:12px;letter-spacing:-.015em}
.card p{font-size:.95rem;color:var(--text-dim);line-height:1.62}
.card__eg{margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent);font-size:.88rem;color:var(--text-mute);font-style:italic}
.card--accent{border-color:color-mix(in srgb,var(--gold) 26%,transparent);background:linear-gradient(165deg,color-mix(in srgb,var(--gold) 9%,var(--panel)),color-mix(in srgb,var(--panel) 55%,transparent))}
.card__ico{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:22px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.card__ico svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card--accent .card__ico{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.card--accent .card__ico svg{stroke:var(--gold)}

/* ============ Split ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.ticks{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:16px}
.ticks li{position:relative;padding-left:30px;font-size:.95rem;color:var(--text-dim);line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:13px;border-radius:50%;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 22%,transparent)}
.ticks strong{color:var(--text);font-weight:600}
.ticks--sm{margin-top:26px;gap:12px;font-size:.92rem}

.expr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.expr-grid figure{margin:0;background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:var(--r-sm);padding:6px 6px 9px;text-align:center;overflow:hidden;display:flex;flex-direction:column;gap:0}
.expr-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;transition:transform .3s ease}
.expr-grid figure:hover img{transform:scale(1.06)}
.expr-grid figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);margin-top:6px}

/* ============ States ============ */
.states .state{text-align:center;padding:40px 20px}
.state__orb{width:74px;height:74px;border-radius:50%;margin:0 auto 26px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.state__orb--idle{background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--accent) 88%,transparent),color-mix(in srgb,var(--btn) 92%,transparent));box-shadow:0 0 40px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
.state__orb--think{background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--gold) 90%,transparent),color-mix(in srgb,var(--hair) 35%,transparent));box-shadow:0 0 44px -6px color-mix(in srgb,var(--gold) 60%,transparent);animation:pulse 2.6s ease-in-out infinite}
.state__orb--talk{background:radial-gradient(circle at 38% 32%,#A8D8B0,color-mix(in srgb,#6FAF7C 70%,transparent));box-shadow:0 0 44px -6px color-mix(in srgb,#8FD09B 60%,transparent)}
@keyframes pulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.state h3{font-size:1.05rem;margin-bottom:10px}
.state p{font-size:.92rem;color:var(--text-dim)}

/* ============ Privacy ============ */
.priv__item{padding:28px 0;border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.priv__item h3{font-size:1.08rem;margin-bottom:10px}
.priv__item p{font-size:.93rem;color:var(--text-dim);max-width:44ch}
.honest{margin-top:46px;max-width:70ch;font-size:.92rem;line-height:1.72;color:var(--text-mute);padding:20px 24px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);background:color-mix(in srgb,var(--gold) 5%,transparent)}
.honest strong{color:var(--gold);font-weight:600}

/* ============ Steps ============ */
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps li{position:relative;padding:34px 28px;border-radius:var(--r-md);background:color-mix(in srgb,var(--panel) 60%,transparent);border:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.steps__n{font-family:var(--mono);font-size:.78rem;color:var(--gold);letter-spacing:.1em;display:block;margin-bottom:20px}
.steps h3{font-size:1.1rem;margin-bottom:10px}
.steps p{font-size:.93rem;color:var(--text-dim)}

/* ============ Limits ============ */
.limits{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px}
.limits li{position:relative;padding-left:26px;font-size:.94rem;color:var(--text-dim)}
.limits li::before{content:"—";position:absolute;left:0;color:var(--text-mute)}

/* ============ Plans ============ */
.plan{padding:38px 34px 40px;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--bg) 40%,transparent);display:flex;flex-direction:column}
.plan--now{border-color:color-mix(in srgb,var(--gold) 34%,transparent);background:linear-gradient(170deg,color-mix(in srgb,var(--gold) 8%,var(--panel)),transparent)}
.plan h3{font-size:1.15rem;margin-bottom:14px}
.plan__price{font-family:var(--serif);font-size:2.6rem;color:var(--text);letter-spacing:-.03em;line-height:1}
.plan__price small{display:block;font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--text-mute);letter-spacing:.02em;margin-top:10px}
.plan .btn{margin-top:auto;justify-content:center}
.plan .ticks{margin-bottom:32px}

/* ============ FAQ ============ */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.faq__side{position:sticky;top:110px}
.faq__list details{border-bottom:1px solid color-mix(in srgb,var(--text) 9%,transparent);padding:22px 0}
.faq__list summary{cursor:pointer;list-style:none;font-size:1.02rem;font-weight:500;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"+";font-family:var(--mono);color:var(--gold);font-size:1.15rem;transition:transform .25s;flex:none}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list details p{margin-top:14px;font-size:.94rem;color:var(--text-dim);max-width:56ch}

/* ============ Final CTA ============ */
.cta-final{position:relative;overflow:hidden;isolation:isolate}
.cta-final__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55;filter:saturate(.9)}
/* Velo: la escena se ve, el texto se lee. Sesgo hacia la izquierda, que es
   donde vive el bloque de texto, más dos desvanecidos arriba y abajo para
   que la sección no empiece ni acabe en un corte duro. */
.cta-final::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,color-mix(in srgb,var(--bg) 94%,transparent) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 36%,transparent 74%),
    linear-gradient(180deg,var(--bg) 0%,transparent 15%,transparent 82%,var(--bg) 100%);
}
/* Bloque de texto arriba a la izquierda, acción abajo a la derecha:
   el reparto de la referencia, con el contenido que ya existía. */
.cta-final__inner{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:56px;
  text-align:left;
  padding:clamp(84px,11vh,130px) 0 clamp(56px,7vh,80px);
  min-height:clamp(500px,70vh,660px);
}
.cta-final__head{max-width:36ch}
.cta-final h2{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.03em}
.cta-final h2 em{font-family:var(--serif);font-style:italic;color:var(--gold)}
.cta-final__sub{margin-top:22px;max-width:46ch;color:var(--text-dim)}
.cta-final__foot{display:flex;align-items:center;justify-content:space-between;gap:32px 40px;flex-wrap:wrap}
.cta-final__small{margin:0;font-size:.8rem;color:var(--text-mute);max-width:44ch}

/* ============ Footer ============ */
.foot{border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent);padding:44px 0}
.foot__inner{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}
.foot__brand{display:flex;align-items:center;gap:9px;font-weight:600}
.foot__note{font-size:.82rem;color:var(--text-mute);margin-left:auto}
.foot__note--muted{opacity:.7}

/* ============================================================
   CAPA DE VIDA — fantasía nocturna acogedora
   Solo atmósfera, movimiento y micro-interacción. No altera
   estructura, copy, tipografía, paleta ni layout.
   Regla: animar únicamente transform y opacity.
   ============================================================ */
:root{
  /* Curvas del mundo: llegadas confiadas, nunca lineales */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
}

/* --- Cielo del hero --- */
.hero{isolation:isolate}
.night{
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.night__stars,.night__drift,.night__shoot{position:absolute;inset:0}

/* Estrellas: el titileo vive en CSS (compositor) y el ritmo de cada una
   entra por variables --o / --tw / --td. Así no hay una escritura de estilo
   por estrella y por frame: solo tres capas se mueven con el puntero. */
.starfield{
  position:absolute;inset:0;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.star{
  position:absolute;
  border-radius:50%;
  background:var(--text);
  /* --o es el brillo que trae cada estrella desde JS; --atten la atenúa
     por zona (lado del copy, footer) sin sobrescribir el valor inline. */
  opacity:calc(var(--o,.6) * var(--atten,1));
  animation:twinkle var(--tw,6s) var(--ease-soft) var(--td,0s) infinite alternate;
}
.star--gold{background:var(--gold)}
/* Las estrellas del lado del copy se atenúan: legibilidad primero */
.star--quiet{--atten:.45}
/* Capa cercana: apenas un halo, nunca un foco */
.star--glow{box-shadow:0 0 7px 1px color-mix(in srgb,var(--gold) 42%,transparent)}
@keyframes twinkle{
  from{opacity:calc(var(--o,.6) * var(--atten,1) * .42)}
  to{opacity:calc(var(--o,.6) * var(--atten,1))}
}

/* Brasa dorada: 4px de halo difuso, como una mota de luz, no un foco */
.star--ember{
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--gold) 55%,transparent);
}

/* Glow radial azul muy tenue que respira bajo el titular */
.night__glow{
  position:absolute;
  left:-6%;top:8%;
  width:58%;aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent) 13%,transparent) 0%,
    color-mix(in srgb,var(--accent) 5%,transparent) 42%,
    transparent 70%);
  filter:blur(20px);
  opacity:.8;
  will-change:transform,opacity;
  animation:breathe 13s var(--ease-soft) infinite;
}
@keyframes breathe{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.06)}
}

/* Cruce esporádico de un destello */
.night__shoot i{
  position:absolute;
  width:110px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 85%,transparent));
  border-radius:2px;
  opacity:0;
  will-change:transform,opacity;
}
.night__shoot i.is-falling{
  animation:shootFall 1.5s var(--ease-out) forwards;
}
.night__shoot i.is-falling::after{
  content:"";position:absolute;right:-1px;top:-1px;
  width:3px;height:3px;border-radius:50%;
  background:var(--text);
  box-shadow:0 0 6px 2px color-mix(in srgb,var(--text) 60%,transparent);
}
@keyframes shootFall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--ang,-28deg)) scaleX(.35)}
  18%{opacity:.9}
  70%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--dx,180px),var(--dy,96px),0) rotate(var(--ang,-28deg)) scaleX(1)}
}

/* Deriva lenta: la partícula dorada / mariposa */
.drifter{
  position:absolute;
  color:var(--gold);
  opacity:.55;
  will-change:transform;
  animation:drift var(--dur,26s) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
  transform:translateZ(0);
}
.drifter svg{width:100%;height:100%;display:block;overflow:visible}
.drifter path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.drifter path.wing{fill:color-mix(in srgb,var(--gold) 22%,transparent);animation:wing .9s ease-in-out infinite alternate;transform-origin:center}
@keyframes drift{
  0%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%{transform:translate3d(14px,-18px,0) rotate(5deg)}
  100%{transform:translate3d(-10px,-34px,0) rotate(-3deg)}
}
@keyframes wing{
  from{transform:scaleX(1)}
  to{transform:scaleX(.62)}
}

/* Footer: misma deriva, más discreta */
.foot{position:relative;overflow:hidden}
.foot__drift{position:absolute;inset:0;pointer-events:none}
.foot__drift .drifter{opacity:.4}

/* --- Aurora: el cielo entero se mece muy despacio ---
   Nota de rendimiento: nada de filter:blur aquí y nada de animar scale.
   Un degradado radial ya es suave; con blur + scale el navegador vuelve a
   rasterizar la capa en cada frame y el hero caía a ~20 fps.
   Solo translate, sobre una capa ya promovida. */
.night__aurora{
  position:absolute;inset:-14% -14% auto -14%;height:128%;
  background:
    radial-gradient(58% 44% at 22% 24%,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 64%),
    radial-gradient(44% 36% at 78% 14%,color-mix(in srgb,var(--gold) 7%,transparent) 0%,transparent 68%);
  opacity:.55;
  will-change:transform;
  animation:aurora 34s var(--ease-soft) infinite alternate;
}
@keyframes aurora{
  from{transform:translate3d(-1.5%,-1%,0)}
  to{transform:translate3d(2%,1.5%,0)}
}

/* --- Motas de luz: polvo dorado que sube y se apaga --- */
.night__motes,.foot__motes{position:absolute;inset:0;overflow:hidden}
.mote{
  position:absolute;
  border-radius:50%;
  background:color-mix(in srgb,var(--gold) 80%,var(--text));
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--gold) 30%,transparent);
  opacity:0;
  will-change:transform,opacity;
  animation:rise var(--dur,24s) linear var(--delay,0s) infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.7)}
  14%{opacity:var(--peak,.5)}
  72%{opacity:calc(var(--peak,.5) * .75)}
  100%{opacity:0;transform:translate3d(var(--dx,16px),-42vh,0) scale(1)}
}

/* --- Cielo del footer: el mismo mundo, más discreto --- */
.foot__sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.foot__stars{position:absolute;inset:0}
.foot__sky .star{--atten:.8}

/* --- Entrada del hero: la primera pantalla se abre sola, sin tocar el layout --- */
.hero__copy > *{animation:heroIn .85s var(--ease-out) both}
.hero__copy > *:nth-child(1){animation-delay:.05s}
.hero__copy > *:nth-child(2){animation-delay:.12s}
.hero__copy > *:nth-child(3){animation-delay:.22s}
.hero__copy > *:nth-child(4){animation-delay:.3s}
.hero__copy > *:nth-child(5){animation-delay:.38s}
.hero__status{animation:heroStatusIn .9s var(--ease-out) .5s both}
@keyframes heroIn{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
/* La píldora de estado se centra con translateX(-50%): la entrada
   tiene que conservarlo o se va a la derecha. */
@keyframes heroStatusIn{
  from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* --- Cada cielo descansa cuando no está a la vista; la pestaña oculta los apaga todos.
   Las clases las pone main.js en <html>. Un transform animado fuera de pantalla
   sigue gastando GPU: pausarlo es gratis y se nota en batería. --- */
.hero-away .night *,
.foot-away .foot__sky *,
.foot-away .foot__drift .drifter,
.page-hidden .night *,
.page-hidden .foot__sky *,
.page-hidden .foot__drift .drifter,
.page-hidden .cta-final__bg{animation-play-state:paused!important}

/* --- El hero se apaga al alejarse (lo escribe main.js con --fade) --- */
.night{opacity:calc(1 - var(--fade,0) * .55)}
.hero__glow,.hero__halo{opacity:calc(1 - var(--fade,0) * .45)}

/* --- La escena del CTA respira: una imagen en movimiento, no un póster --- */
.cta-final__bg{
  transform-origin:50% 50%;
  animation:nightDrift 46s var(--ease-soft) infinite alternate;
}
@keyframes nightDrift{
  from{transform:scale(1.02) translate3d(-.8%,0,0)}
  to{transform:scale(1.08) translate3d(.8%,-1.4%,0)}
}

/* --- Parallax sutil del hero (solo desktop, por JS) ---
   Sin will-change permanente: se activa solo mientras el puntero está dentro,
   para no reservar una capa de compositing todo el tiempo. */
.hero.is-tracking .hero__copy,
.hero.is-tracking .hero__art{will-change:transform}

/* --- ✦ del brand y footer: parpadeo ocasional --- */
.brand__mark{
  display:inline-block;
  transform-origin:center;
  animation:twinkleGlyph 9s var(--ease-soft) infinite;
}
@keyframes twinkleGlyph{
  0%,88%,100%{opacity:1;transform:scale(1)}
  92%{opacity:.55;transform:scale(.86)}
  96%{opacity:1;transform:scale(1.06)}
}

/* --- Nav: subrayado animado --- */
.nav__links a{position:relative}
.nav__links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-6px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after{transform:scaleX(1)}

/* --- Botones: sheen suave al pasar --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--text) 16%,transparent) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .55s var(--ease-out);
  pointer-events:none;
}
.btn--primary::after{
  background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--gold) 26%,transparent) 50%,transparent 62%);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}
.btn{transition:transform .25s var(--ease-out),background .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.btn--primary:hover{box-shadow:0 10px 30px -12px color-mix(in srgb,var(--text) 45%,transparent)}
.btn--ghost:hover{box-shadow:0 10px 28px -16px color-mix(in srgb,var(--accent) 70%,transparent)}

/* --- Tarjetas: elevación con borde de brillo --- */
.card,.steps li,.plan,.expr-grid figure,.priv__item{
  transition:transform .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -24px #000,0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
.card--accent:hover{
  box-shadow:0 18px 40px -24px #000,0 0 28px -14px color-mix(in srgb,var(--gold) 45%,transparent);
}
.steps li:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--gold) 26%,transparent);
  box-shadow:0 16px 36px -26px #000;
}
.expr-grid figure:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--gold) 30%,transparent);
  box-shadow:0 12px 26px -18px #000;
}

/* --- Reveal on scroll: transición declarada en CSS ---
   El estado inicial lo pone JS (clase .reveal) para que sin JS
   el contenido sea siempre visible. */
.reveal{
  opacity:0;
  transform:translateY(14px);
}
.reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* Títulos de sección: llegada más tenue, sin desplazamiento grande */
.section .eyebrow,
.section__title,
.section__lede,
.cta-final__head > *,
.cta-final__foot > *{
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}

/* ============ Responsive ============ */
@media (max-width:1040px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .split,.faq{grid-template-columns:1fr;gap:48px}
  .faq__side{position:static}
}
@media (max-width:880px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .menu.is-open{display:flex}
  .hero{padding:118px 0 70px}
  .hero__inner{grid-template-columns:1fr;gap:44px}
  .hero__art{order:-1}
  /* La escena necesita ancho para leerse: en móvil ocupa la columna entera */
  .hero__img{width:100%;max-width:420px}
  .hero__status{bottom:-8px}
  .section{padding:84px 0}
  .steps{grid-template-columns:1fr}
  .limits{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .grid--3,.grid--4{grid-template-columns:1fr}
  .expr-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .grid{margin-top:38px}
  .card{padding:26px 22px 28px}
  .limits{gap:12px}
  .foot__note{margin-left:0;flex-basis:100%}
}
@media (max-width:880px){
  .night__glow{width:96%;left:-18%;top:2%}
}
@media (max-width:620px){
  /* Menos partículas y menos desplazamiento en móvil */
  .night__glow{filter:blur(14px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* Apaga lo puramente decorativo aunque JS insista */
  .night__stars,.night__shoot,.drifter,.night__glow,.night__aurora,.night__motes,
  .foot__drift,.foot__sky,.brand__mark{display:none!important}
  .cta-final__bg{animation:none!important;transform:none!important}
  .night{opacity:1!important}
  .hero__glow,.hero__halo{opacity:1!important}
  .reveal{opacity:1!important;transform:none!important}
  .btn::after{display:none}
  .hero__copy,.hero__art{transform:none!important}
}

/* ==========================================================
   TARJETAS DE "APRENDIZAJE CONTINUO" — grimorio
   Todo va acotado a #aprende: las tarjetas de Capacidades y del
   resto del sitio conservan su forma. La paleta es la de siempre
   (panel, gold, accent); lo que cambia es el ornamento: marco
   interior grabado, cuatro ✦ de la marca en las esquinas, medallón
   con halo y composición centrada.
   ========================================================== */
#aprende{
  position:relative;isolation:isolate;
  /* El glifo de la marca, una sola vez: se reutiliza en las cuatro esquinas */
  --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 7.3 4.7 12 6 7.3 7.3 6 12 4.7 7.3 0 6 4.7 4.7Z' fill='%23D9B56D' fill-opacity='.55'/%3E%3C/svg%3E");
}
/* Un resplandor muy tenue detrás de la rejilla: la sección deja de ser plana */
#aprende::before{
  content:"";position:absolute;inset:6% 0 auto;height:70%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 18%,color-mix(in srgb,var(--accent) 11%,transparent) 0%,transparent 72%);
}

#aprende .card{
  position:relative;
  text-align:center;
  padding:34px 26px 30px;
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  background:
    radial-gradient(130% 76% at 50% -14%,color-mix(in srgb,var(--gold) 11%,transparent) 0%,transparent 62%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,transparent),color-mix(in srgb,var(--bg) 86%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gold) 20%,transparent);
  transition:border-color .25s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}

/* Marco interior, una línea por dentro del borde */
#aprende .card::before{
  content:"";position:absolute;inset:7px;
  border:1px solid color-mix(in srgb,var(--gold) 13%,transparent);
  border-radius:calc(var(--r-md) - 5px);
  pointer-events:none;
  transition:border-color .3s var(--ease-out);
}

/* Cuatro ✦ en las esquinas: el mismo glifo de la marca, no un adorno nuevo */
#aprende .card::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  /* Cuatro capas, una por esquina: con una sola capa el navegador descarta
     las demás posiciones y el glifo solo aparece arriba a la izquierda. */
  background-image:var(--rune),var(--rune),var(--rune),var(--rune);
  background-repeat:no-repeat;
  background-size:9px 9px;
  background-position:12px 12px,calc(100% - 12px) 12px,12px calc(100% - 12px),calc(100% - 12px) calc(100% - 12px);
  opacity:.7;
  transition:opacity .3s var(--ease-out);
}

#aprende .card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--gold) 38%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--gold) 34%,transparent),
    0 26px 46px -34px color-mix(in srgb,var(--gold) 45%,transparent);
}
#aprende .card:hover::before{border-color:color-mix(in srgb,var(--gold) 24%,transparent)}
#aprende .card:hover::after{opacity:1}

/* Medallón: el icono deja de ser un cuadro y pasa a ser una joya */
#aprende .card__ico{
  width:64px;height:64px;
  margin:0 auto 20px;
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--gold) 22%,transparent) 0%,color-mix(in srgb,var(--accent) 13%,transparent) 46%,transparent 73%),
    color-mix(in srgb,var(--bg) 55%,transparent);
  box-shadow:
    0 0 26px -8px color-mix(in srgb,var(--gold) 55%,transparent),
    inset 0 0 16px -6px color-mix(in srgb,var(--gold) 45%,transparent);
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
#aprende .card__ico svg{width:23px;height:23px;stroke:var(--gold)}
#aprende .card:hover .card__ico{
  border-color:color-mix(in srgb,var(--gold) 62%,transparent);
  box-shadow:
    0 0 34px -6px color-mix(in srgb,var(--gold) 70%,transparent),
    inset 0 0 18px -4px color-mix(in srgb,var(--gold) 55%,transparent);
}

/* Título en la serif de la casa: es la que ya habla en los <em> */
#aprende .card h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.2rem;
  line-height:1.25;
  letter-spacing:-.01em;
  margin-bottom:14px;
}
#aprende .card p{font-size:.92rem;text-align:center}
/* La nota al pie pierde la raya y gana un ✦ de separación */
#aprende .card__eg{
  margin-top:20px;
  padding-top:0;
  border-top:0;
  font-size:.84rem;
  text-align:center;
}
#aprende .card__eg::before{
  content:"✦";
  display:block;
  margin-bottom:11px;
  font-size:.66rem;
  font-style:normal;
  color:color-mix(in srgb,var(--gold) 60%,transparent);
}

@media (max-width:620px){
  #aprende .card{padding:28px 20px 26px}
  #aprende .card__ico{width:56px;height:56px;margin-bottom:18px}
}

/* ==========================================================
   "Cómo funciona" — la ventana de Alice como atmósfera de fondo
   La captura va detrás del contenido, atenuada y desvanecida en los
   bordes para que no parezca una imagen pegada: se lee como el aire
   de la sección, no como un pantallazo.
   ========================================================== */
#como-funciona{position:relative;isolation:isolate;overflow:hidden}
#como-funciona .how__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  opacity:.34;
  -webkit-mask-image:radial-gradient(ellipse 82% 74% at 50% 44%,#000 22%,transparent 84%);
  mask-image:radial-gradient(ellipse 82% 74% at 50% 44%,#000 22%,transparent 84%);
  pointer-events:none;
}
/* Desvanecido vertical: la sección entra y sale del mismo navy */
#como-funciona::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%);
}

@media (max-width:620px){
  #como-funciona .how__bg{opacity:.26}
  .cta-final__inner{min-height:auto;gap:38px;padding:78px 0 58px}
  .cta-final__foot{flex-direction:column;align-items:flex-start;gap:24px}
  .cta-final__foot .btn{width:100%;justify-content:center}
}

/* ==========================================================
   "Acceso" — los castillos flotantes detrás de los planes
   La escena entra al 58 % con un velo diagonal que nace a la
   izquierda (donde vive el titular) y dos desvanecidos verticales
   para que la sección no corte en seco ni arriba ni abajo.
   ========================================================== */
#acceso{position:relative;isolation:isolate;overflow:hidden}
#acceso .acceso__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  /* La fuente original traía barras negras horneadas (126 px arriba,
     114 px abajo) que se veían como bandas dentro de la sección. Ya están
     recortadas en el archivo, así que la escena cubre de borde a borde.
     El encuadre se abre al 55 % para dejar la luna y el castillo dentro. */
  object-fit:cover;object-position:55% 50%;
  opacity:.58;
  filter:saturate(.95);
  pointer-events:none;
}
#acceso::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 66%,transparent) 34%,transparent 72%),
    /* Sólo un roce arriba y abajo: la escena ya se apaga sola en sus bordes */
    linear-gradient(180deg,var(--bg) 0%,transparent 7%,transparent 93%,var(--bg) 100%);
}

@media (max-width:620px){
  #acceso .acceso__bg{opacity:.42}
}

/* ============================================================
   PANEL DE ALICE — "Así se ve", viva
   Reconstrucción del frame de Figma (1440×1024) en DOM real:
   tres columnas 260 / 880 / 300, trazos de 2 px, radios de 25.
   Todo se mide en cqw para que escale como una captura y siga
   siendo texto. Solo se animan transform, opacity y color.
   ============================================================ */
.app{
  --app-deep:#111a2e;
  --app-side:#141b2a;
  --app-chat:#1a202c;
  --app-card:rgba(217,217,217,.05);
  --app-line:rgba(255,255,255,.075);
  --app-text:#f4ebdd;
  --app-dim:rgba(244,235,221,.72);
  --app-mute:rgba(244,235,221,.45);
  --app-gold:#fba404;
  --app-gold-soft:#fbc666;
  --app-bubble:#6f727a;

  margin-top:52px;
  container-type:inline-size;
  isolation:isolate;
}
.app__window{
  display:grid;
  grid-template-columns:18.06fr 61.1fr 20.84fr;
  gap:.14cqw;
  background:
    radial-gradient(62% 78% at 112% -16%,rgba(250,222,176,.5),rgba(186,158,115,.17) 44%,rgba(102,102,102,0) 76%),
    radial-gradient(38% 58% at -8% 44%,rgba(251,164,4,.13),rgba(102,102,102,0) 74%),
    var(--app-deep);
  border:1px solid var(--app-line);
  border-radius:1.74cqw;
  aspect-ratio:1440/1024;
  box-shadow:0 60px 110px -70px #000;
  overflow:hidden;
  font-size:clamp(9px,1.02cqw,15px);
  color:var(--app-text);
}
.app__note{
  margin-top:20px;text-align:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-mute);
}

/* ---------- Columna izquierda ---------- */
.app__side{
  display:flex;flex-direction:column;gap:.5cqw;
  padding:2cqw 1.25cqw 1.4cqw;
  background:var(--app-side);
  overflow:hidden;
}
.app__brand{
  display:flex;align-items:center;gap:.85cqw;
  font-size:1.5cqw;font-weight:600;letter-spacing:-.01em;
  margin-bottom:1.1cqw;
}
.app__brandimg{
  width:6.95cqw;height:6.95cqw;border-radius:50%;object-fit:cover;
  background:radial-gradient(circle at 40% 30%,#3a3226,#20242e);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.app__nav{display:grid;gap:.1cqw;margin-bottom:.7cqw;font-size:max(9px,.85cqw)}
.app__nav span{padding:.24cqw .5cqw;border-radius:.35cqw;color:var(--app-dim)}
.app__nav span:first-child{color:var(--app-text)}
.app__label{
  font-size:max(9px,.74cqw);color:var(--app-mute);
  margin:.75cqw 0 .2cqw;padding-left:.5cqw;
}
.app__list{list-style:none;margin:0;padding:0;display:grid;gap:.05cqw;font-size:max(9px,.82cqw)}
.app__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:.4cqw;
  padding:.26cqw .45cqw;border-radius:.4cqw;line-height:1.25;
  color:var(--app-dim);
}
.app__list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__list li em{
  font-style:normal;font-size:.7cqw;color:var(--app-mute);white-space:nowrap;flex:none;
}
.app__list--hist li:first-child{background:rgba(255,255,255,.06);color:var(--app-text)}
.app__me{
  margin-top:auto;display:flex;align-items:center;gap:.65cqw;
  padding:.85cqw .5cqw .2cqw;border-top:1px solid var(--app-line);
  font-size:.86cqw;color:var(--app-dim);
}
.app__meimg{
  width:1.7cqw;height:1.7cqw;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#f7d9a3,#c9922f);
}

/* ---------- Conversación ---------- */
.app__main{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:2cqw;padding:7.9cqw 1.7cqw 3.3cqw;
  background:var(--app-chat);
  overflow:hidden;
}
.app__msgs{position:relative;display:grid;gap:6.04cqw;align-content:start}
.msg{
  max-width:70%;padding:.82cqw 1.15cqw;border-radius:1.15cqw;
  font-size:max(10.5px,1cqw);line-height:1.5;letter-spacing:-.005em;
}
.msg--user{
  justify-self:end;
  background:rgba(251,164,4,.82);color:#1a1204;
  border-bottom-right-radius:.34cqw;
  box-shadow:0 12px 28px -16px rgba(251,164,4,.9);
}
.msg--alice{
  justify-self:start;
  background:rgba(217,217,217,.5);color:#ffffff;
  border-bottom-left-radius:.34cqw;
}
.msg__text{grid-area:1/1}
.msg__dots{
  position:absolute;left:1.15cqw;bottom:.7cqw;opacity:0;
  display:inline-flex;gap:.24cqw;
}
.msg__dots i{
  width:.36cqw;height:.36cqw;border-radius:50%;background:#12151c;
  animation:dotPulse 1.1s var(--ease-soft) infinite;
  animation-delay:calc(var(--i,0)*.14s);
}

/* ---------- Composer ---------- */
.app__composer{
  display:flex;align-items:center;justify-content:space-between;gap:1cqw;
  margin-inline:2.9cqw;min-height:5.5cqw;
  padding:.95cqw 1.1cqw;border-radius:1.39cqw;
  background:var(--app-compose,var(--app-card));
  background:rgba(217,217,217,.07);
  border:1px solid rgba(255,255,255,.05);
}
.app__ph{font-size:max(9.5px,.88cqw);color:var(--app-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.app__tools{display:flex;align-items:center;gap:.6cqw;flex:none}
.app__chip{
  display:inline-flex;align-items:center;gap:.32cqw;
  padding:.28cqw .6cqw;border-radius:999px;
  background:rgba(255,255,255,.05);
  font-size:.74cqw;color:var(--app-dim);
}
.app__chip i{font-style:normal;color:var(--app-gold-soft)}
.app__ring{
  width:1.1cqw;height:1.1cqw;border-radius:50%;
  border:.14cqw solid rgba(251,164,4,.55);
}
.app__send{
  width:2.08cqw;height:2.08cqw;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--app-gold-soft);
}
.app__send svg{width:1.05cqw;height:1.05cqw;fill:none;stroke:#241802;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Columna derecha ---------- */
.app__panel{
  display:grid;gap:1.11cqw;align-content:start;
  padding:2.2cqw 1.74cqw 2.9cqw;
  background:var(--app-chat);
  overflow:hidden;
}
.app__usage{
  display:flex;align-items:center;gap:.55cqw;
  font-family:var(--mono);font-size:.68cqw;color:var(--app-mute);
  margin-bottom:.4cqw;
}
.app__usage .bar{flex:1}
.app__portrait{
  position:relative;border-radius:1.74cqw;overflow:hidden;
  aspect-ratio:1;
  background:
    radial-gradient(120% 92% at 50% 18%,rgba(216,152,74,.5),rgba(32,38,52,0) 68%),
    rgba(255,255,255,.04);
  display:grid;place-items:end center;
}
.app__portrait img{
  width:96%;height:auto;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));
  transform:translateY(1%);
}
.app__card{
  display:grid;gap:.34cqw;min-height:6.94cqw;align-content:start;
  padding:.95cqw 1.05cqw;border-radius:1.39cqw;
  background:var(--app-card);
  border:1px solid rgba(255,255,255,.045);
}
.app__card--now{min-height:10.4cqw}
.app__card--mem{min-height:8.33cqw}
.app__cardtitle{font-size:.74cqw;color:var(--app-mute);letter-spacing:.02em}
.app__task,.app__body{font-size:.88cqw;color:var(--app-dim);line-height:1.35}
.app__pct{color:var(--app-gold-hi,var(--app-gold-soft));font-variant-numeric:tabular-nums}
.bar{
  display:block;height:.46cqw;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.11);
}
.bar--thin{height:.32cqw}
.bar b{
  display:block;height:100%;width:100%;border-radius:inherit;
  background:linear-gradient(90deg,#e09a18,var(--app-gold-soft));
  transform:scaleX(var(--v,0));transform-origin:left center;
}
.app__checks{list-style:none;margin:.15cqw 0 0;padding:0;display:grid;gap:.32cqw}
.app__checks li{display:flex;align-items:center;gap:.45cqw;font-size:.82cqw;color:var(--app-dim)}
.app__checks i{
  width:1.04cqw;height:1.04cqw;border-radius:50%;flex:none;
  background:var(--app-gold);display:grid;place-items:center;
}
.app__checks i::after{
  content:"";width:.2cqw;height:.4cqw;
  border:.13cqw solid #fff;border-top:0;border-left:0;
  transform:rotate(42deg) translate(-.02cqw,-.04cqw);
}
.app__grid{display:grid;grid-template-columns:repeat(13,1fr);gap:.24cqw;margin-top:.1cqw}
.app__cell{aspect-ratio:1;border-radius:.16cqw;background:rgba(248,249,251,.055)}
.app__cell.is-dim{background:rgba(250,222,176,.3)}
.app__cell.is-on{background:var(--app-gold)}
.app__cell.is-hi{background:rgba(250,222,176,.92)}
.app__card--music{
  grid-template-columns:auto 1fr;grid-template-areas:"cover track" "cover wave";
  align-items:center;gap:.5cqw .6cqw;
}
.app__cover{
  grid-area:cover;width:2.5cqw;height:2.5cqw;border-radius:.5cqw;
  background:linear-gradient(140deg,#2f4a7a,#8a5b2a 70%);
}
.app__track{grid-area:track;display:grid;line-height:1.25;gap:.05cqw}
.app__track strong{font-size:.82cqw;font-weight:600;color:var(--app-dim)}
.app__track em{font-style:normal;font-size:.68cqw;color:var(--app-mute)}
.app__wave{grid-area:wave;display:flex;align-items:flex-end;gap:.13cqw;height:.8cqw}
.app__wave i{
  flex:1;border-radius:.1cqw;
  background:rgba(251,198,102,.75);
  animation:eq 1.7s var(--ease-soft) infinite alternate;
  animation-delay:calc(var(--i,0)*-.2s);
  transform-origin:bottom center;
}
.app__wave i:nth-child(1){height:40%}
.app__wave i:nth-child(2){height:78%}
.app__wave i:nth-child(3){height:52%}
.app__wave i:nth-child(4){height:92%}
.app__wave i:nth-child(5){height:44%}
.app__wave i:nth-child(6){height:70%}
.app__wave i:nth-child(7){height:34%}
.app__wave i:nth-child(8){height:60%}

/* ---------- Coreografía ----------
   Las animaciones se declaran siempre. El JS solo agrega
   .is-armed (pausa todo en su primer cuadro) y .is-live (lo
   suelta cuando el panel entra en pantalla). Si el JS nunca
   corre, la escena se reproduce al cargar: nunca queda vacía. */
.app__window{animation:winIn .9s var(--ease-out) both}
.app__side > *{
  animation:appLeft .55s var(--ease-out) both;
  animation-delay:calc(.25s + var(--i,0)*.05s);
}
.app__panel > *{
  animation:appUp .55s var(--ease-out) both;
  animation-delay:calc(.4s + var(--i,0)*.11s);
}
.msg--user{animation:appUp .6s var(--ease-out) .9s both}
.msg--alice{animation:appUp .5s var(--ease-out) 2.3s both}
.msg__dots{animation:dotsLife .85s var(--ease-out) 1.4s both}
.app__checks i::after{
  animation:appPop .35s var(--ease-out) both;
  animation-delay:calc(3.3s + var(--i,0)*.22s);
}
.app__cell.is-on,.app__cell.is-dim,.app__cell.is-hi{
  animation:cellOn .5s var(--ease-out) both;
  animation-delay:calc(3.9s + (var(--r,0) + var(--c,0))*.045s);
}
.app__wave i{animation:eq 1.7s var(--ease-soft) infinite alternate;animation-delay:calc(var(--i,0)*-.2s)}
.app__dots i,.msg__dots i{animation-delay:calc(var(--i,0)*.14s)}

.app.is-armed *{animation-play-state:paused}
@keyframes appUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes appFade{from{opacity:0}to{opacity:1}}
@keyframes appLeft{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes appPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes dotPulse{0%,55%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-.16em);opacity:1}}
@keyframes eq{from{transform:scaleY(.5)}to{transform:scaleY(1)}}
@keyframes winIn{from{opacity:0;transform:scale(.985) translateY(18px)}to{opacity:1;transform:none}}
@keyframes dotsLife{0%{opacity:0;transform:translateY(4px)}18%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
@keyframes cellOn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}

/* --- Adaptación ---
   Aquí no se encoge el diseño hasta volverse ilegible: se cae lo
   que no cabe. Primero el panel derecho, luego el sidebar. La
   conversación —lo único que hay que leer— siempre sobrevive. */
@media (max-width:1100px){
  .app__window{grid-template-columns:19.5fr 1fr}
  .app__panel{display:none}
  .msg{max-width:78%}
}
@media (max-width:720px){
  .app__window{grid-template-columns:minmax(0,1fr);padding:.6rem;gap:0;border-radius:1rem;aspect-ratio:auto}
  .app__side{display:none}
  .app__main{padding:1.3rem 1.1rem 1.15rem;border-radius:.8rem;min-height:340px;gap:1.4rem}
  .app__msgs{gap:1.15rem}
  .msg{font-size:13.5px;line-height:1.5;padding:11px 15px;border-radius:15px;max-width:88%}
  .msg__dots i{width:5px;height:5px}
  .app__composer{margin-inline:0;padding:11px 13px;border-radius:13px;gap:8px;min-height:0}
  .app__ph{font-size:11.5px}
  .app__chip{font-size:10.5px;padding:4px 9px;gap:4px}
  .app__ring{width:15px;height:15px;border-width:1.6px}
  .app__send{width:27px;height:27px}
  .app__send svg{width:14px;height:14px}
  .app__note{font-size:.68rem}
}