/* ============================================================
   Página de venta · "El día del oficio amanece ordenado"
   Familia visual de la squeeze (amanece): mismos tokens de brand/diseno.md (§17),
   mismo grano, mismas letras, misma luz. Para vestirla de otra marca se reemplazan
   SOLO los valores de este :root por los del bloque §17 de diseno.md (mismos roles).
   Ningún hex vive fuera de aquí — mantenlo así.
   ============================================================ */

:root{
  /* Paleta y letras — copiadas EXACTAS de brand/diseno.md §17 Tokens (mismo bloque que la squeeze). */
  --bg:#0F1A18;
  --surface:#16211F;
  --surface-2:#1D2C29;
  --surface-3:#2A3D3A;
  --border:#2B3A36;
  --paper:#FFFFFF;
  --paper-2:#EAF1EE;
  --ink:#15211E;
  --ink-soft:#55645F;
  --text:#D8E4E1;
  --text-muted:#9AACA7;
  --text-display:#EDF4F2;
  --text-on-accent:#FFFFFF;
  --primary:#0E6E63;
  --primary-deep:#0A5049;
  --primary-soft:#3FA898;
  --lime:#3B95AB; /* §17 no trae "lime"; rol = 4º acento fresco → teal terciario on-dark de diseno.md §17 */
  --accent:#C84726;
  --accent-bold:#E37A52;
  --accent-soft:#E8967A;
  --amber:#D99A3D;
  --earth:#4A5D57;
  --display:'Lexend', system-ui, sans-serif;
  --body:'Lexend', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --radius:14px;
  --shadow:0 24px 60px rgba(6, 12, 20, 0.45);

  --maxw:1180px; --nav-h:62px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--amber); text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.06; color:var(--text-display); text-wrap:balance; }
::selection{ background:var(--accent); color:var(--text-on-accent); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── ambiente: la luz que amanece con el scroll (var --dawn la sube el JS) ── */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 88% 114%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 55%),
    radial-gradient(85% 62% at -8% -12%, color-mix(in srgb, var(--primary-soft) 14%, transparent), transparent 60%);
  opacity:calc(.16 + var(--dawn,0)*.84);
}
/* grano fino de película */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.shell{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.kicker{
  font-family:var(--body); font-weight:500; font-size:.72rem; letter-spacing:0.128em; text-transform:uppercase;
  color:var(--amber); display:inline-flex; align-items:center; gap:8px;
}
.kicker svg{ width:14px; height:14px; stroke:var(--amber); }
.kicker--accent{ color:var(--accent-soft); } .kicker--accent svg{ stroke:var(--accent-soft); }

/* ── nav ── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,4vw,2rem);
  background:color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease;
}
.nav.solid{ background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color:var(--border); }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:30px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.8rem); }
.nav__links a{ position:relative; color:var(--text-display); font-weight:500; font-size:.95rem; }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--amber); transition:right .28s cubic-bezier(.22,.9,.24,1);
}
.nav__links a:not(.nav__cta):hover::after{ right:0; }
.nav__cta{ background:var(--accent); color:var(--text-on-accent) !important; font-weight:600; padding:.5rem .95rem; border-radius:.7rem; }
.nav__cta:hover{ background:var(--accent-bold); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; position:relative; z-index:52; }
.nav__burger span{ width:24px; height:2px; background:var(--text-display); border-radius:2px; transition:.25s; }
.nav__scrim{
  position:fixed; inset:0; z-index:40; display:none;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
body.menu-open{ overflow:hidden; }

/* ── botones ── */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--body); font-weight:700; font-size:1rem; padding:.95rem 1.7rem; border:0; cursor:pointer;
  border-radius:.8rem; text-decoration:none; transition:transform .16s ease, background .18s ease, box-shadow .18s ease;
}
.btn--brasa{ background:var(--accent); color:var(--text-on-accent); box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn--brasa:hover{ background:var(--accent-bold); }
.btn--ghost{ background:color-mix(in srgb, var(--text-display) 5%, transparent); border:1px solid var(--border); color:var(--text-display); }
.btn--ghost:hover{ border-color:var(--primary-soft); }
.btn .arw{ display:inline-flex; transition:transform .2s ease; }
.btn .arw svg{ width:18px; height:18px; stroke:currentColor; }
.btn:hover .arw{ transform:translateX(4px); }
.btn .shine{
  position:absolute; top:0; bottom:0; left:-70%; width:46%; pointer-events:none;
  background:linear-gradient(105deg,transparent,color-mix(in srgb, var(--text-on-accent) 34%, transparent),transparent);
  animation:shine 6.5s ease-in-out infinite;
}
@keyframes shine{ 0%,72%{left:-70%} 88%,100%{left:130%} }
.btn.clap{ animation:clap .4s ease; }
@keyframes clap{ 40%{transform:scale(.96)} 100%{transform:scale(1)} }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.btn-note{ color:var(--text-muted); font-family:var(--body); font-weight:500; font-size:.8rem; letter-spacing:0.032em; margin-top:1rem; }

/* ── secciones base + revelados ── */
.sec{ position:relative; padding:clamp(3.6rem,10vh,7rem) 0; }
.sec__head{ max-width:660px; margin-bottom:clamp(2rem,5vw,3rem); }
.sec__head h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin:.5rem 0 .6rem; letter-spacing:-.01em; }
.sec__head p{ color:var(--text-muted); font-size:1.08rem; }
.eyebrow{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem; }
.eyebrow .num{
  font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1; color:transparent;
  -webkit-text-stroke:1.4px var(--amber); transition:color .5s ease, -webkit-text-stroke-color .5s ease;
}
.eyebrow.in .num{ color:color-mix(in srgb, var(--amber) 22%, transparent); }
.eyebrow .lbl{ font-family:var(--body); font-weight:500; font-size:.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); }
.eyebrow .rule{ flex:1; height:1px; background:var(--border); }

.js [data-r]{ opacity:0; transform:translateY(22px); }
.js [data-r].in{ opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.22,.9,.24,1); }
.js [data-rs]>*{ opacity:0; transform:translateY(18px); }
.js [data-rs].in>*{ opacity:1; transform:none; transition:opacity .6s ease calc(var(--i,0)*90ms), transform .7s cubic-bezier(.22,.9,.24,1) calc(var(--i,0)*90ms); }

.marker{
  background-image:linear-gradient(to top,color-mix(in srgb, var(--amber) 90%, transparent),color-mix(in srgb, var(--amber) 90%, transparent));
  background-repeat:no-repeat; background-position:0 90%; background-size:100% .32em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.js .marker{ background-size:0% .32em; }
.ready .hero .marker,.in .marker{ background-size:100% .32em; transition:background-size .7s cubic-bezier(.2,.9,.3,1) .6s; }

/* ════════ S1 · HÉROE DE CINE ════════ */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--nav-h) + 3vh) 0 6vh; }
.hero-fondo{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-fondo img{ width:100%; height:100%; object-fit:cover; object-position:70% 32%; filter:saturate(1.05); }
.js .hero-fondo img{ opacity:0; transform:scale(1.1); }
.ready .hero-fondo img{ opacity:1; transform:scale(1); transition:opacity 1.1s ease .05s, transform 32s cubic-bezier(.16,.6,.24,1) .05s; }
.hero-fondo .velo{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 44%, color-mix(in srgb, var(--bg) 40%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 30%, transparent 60%, var(--bg) 98%);
}
.hero-sweep{
  position:absolute; top:-12%; bottom:-12%; left:0; width:36%; opacity:0; pointer-events:none;
  transform:translateX(-140%) skewX(-14deg); mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--amber) 30%, transparent) 42%,color-mix(in srgb, var(--accent-soft) 22%, transparent) 58%,transparent);
}
[data-sweep] .ready .hero-sweep{ animation:sweep 1.9s cubic-bezier(.3,.7,.3,1) .12s forwards; }
@keyframes sweep{ 0%{transform:translateX(-140%) skewX(-14deg);opacity:0} 12%{opacity:1} 85%{opacity:.85} 100%{transform:translateX(460%) skewX(-14deg);opacity:0} }
.hero__in{ position:relative; z-index:1; max-width:680px; }
/* glow suave detrás del texto del héroe para que resalte sobre la foto */
.hero__in::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-9%; right:-6%; top:-9%; bottom:-7%;
  background:radial-gradient(120% 82% at 30% 42%,
    color-mix(in srgb, var(--bg) 82%, transparent) 0%,
    color-mix(in srgb, var(--bg) 50%, transparent) 44%,
    transparent 74%);
  filter:blur(7px);
}
.hero h1{ font-size:clamp(2.05rem,4.4vw,3.25rem); line-height:1.08; letter-spacing:-.015em; margin:1.1rem 0 1.2rem; max-width:16ch; text-shadow:0 2px 26px color-mix(in srgb, var(--bg) 82%, transparent); }
.hero h1 .hl{ color:var(--accent-bold); }
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.js .hero h1 .w{ display:inline-block; transform:translateY(115%); opacity:0; }
.ready .hero h1 .w{ transform:none; opacity:1; transition:transform .8s cubic-bezier(.22,.9,.24,1) calc(var(--i)*50ms), opacity .5s linear calc(var(--i)*50ms); }
.hero .sub{ font-size:1.18rem; color:var(--text); max-width:56ch; margin-bottom:1.6rem; text-shadow:0 1px 18px color-mix(in srgb, var(--bg) 68%, transparent); }
.rotador{ color:var(--amber); font-style:italic; font-family:var(--display); font-weight:500; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem; }
.chips li{
  display:inline-flex; align-items:center; gap:8px; font-size:.9rem;
  background:color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter:blur(4px);
  border:1px solid var(--border); border-radius:999px; padding:9px 16px;
}
.chips svg{ width:16px; height:16px; stroke:var(--amber); flex:none; }

/* ════════ S2 · POR FIN (texto que se enciende) ════════ */
.porfin{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.porfin .shell{ max-width:1000px; text-align:center; }
.porfin .stmt{
  font-family:var(--display); font-weight:600; font-variation-settings:"opsz" 90;
  font-size:clamp(1.7rem,4.4vw,3rem); line-height:1.22; letter-spacing:-.01em; max-width:22ch; margin:0 auto;
}
.porfin .stmt .w{ color:var(--text-muted); transition:color .5s ease; }
.porfin .stmt .w.lit{ color:var(--text-display); }
.porfin .stmt .rem{ color:var(--text-muted); }
.porfin .stmt .rem.lit{ color:var(--amber); }
[data-parallax] .porfin .stmt{ animation:breathe 9s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{font-variation-settings:"opsz" 80,"wght" 560} 50%{font-variation-settings:"opsz" 120,"wght" 630} }
.porfin .firma{ margin-top:1.8rem; font-family:var(--body); font-weight:500; font-size:.8rem; letter-spacing:0.112em; text-transform:uppercase; color:var(--text-muted); position:relative; display:inline-block; }
.porfin .firma .circulo{ position:absolute; left:-10px; right:-10px; top:-8px; bottom:-8px; pointer-events:none; }
.porfin .firma .circulo path{ fill:none; stroke:var(--accent-soft); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; }
.porfin.in .firma .circulo path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.4s ease .5s; }

/* ════════ S3 · DOLOR (banda de cine + papelitos) ════════ */
.cine{ position:relative; height:clamp(320px,52vh,520px); overflow:hidden; display:flex; align-items:flex-end; }
.cine img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cine .velo{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 40%,transparent), color-mix(in srgb,var(--bg) 30%,transparent) 45%, var(--bg) 99%); }
.cine .cine__frase{ position:relative; z-index:2; width:100%; }
.cine .cine__frase p{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.3rem,3.2vw,2rem); color:var(--text-display); max-width:26ch; padding-bottom:1.6rem; text-shadow:0 2px 24px color-mix(in srgb,var(--bg) 70%,transparent); }
.js .cine img{ transform:scale(1.08); }
.in.cine img,.cine.in img{ transform:scale(1); transition:transform 14s cubic-bezier(.2,.7,.3,1); }

.dolor{ background:var(--surface); }
.papeles{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1.6rem; margin-top:.5rem; }
.papel{
  position:relative; background:var(--paper); color:var(--ink); border-radius:6px; padding:1.4rem 1.5rem 1.5rem;
  box-shadow:0 18px 40px color-mix(in srgb,var(--bg) 55%,transparent); font-size:1.02rem; line-height:1.5;
  transform:rotate(var(--rot,-1.4deg)); transition:transform .35s cubic-bezier(.22,.9,.24,1), box-shadow .35s ease;
}
.papel::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-3deg); width:70px; height:20px; background:color-mix(in srgb,var(--amber) 42%, transparent); border-radius:2px; }
.papel:nth-child(2){ --rot:1.2deg; } .papel:nth-child(3){ --rot:1deg; } .papel:nth-child(4){ --rot:-1deg; }
.papel:hover{ transform:rotate(0deg) translateY(-3px); box-shadow:0 26px 54px color-mix(in srgb,var(--bg) 62%,transparent); }
.papel b{ color:var(--accent-bold); }
.js .papeles [data-r]{ opacity:0; transform:translateY(22px) rotate(var(--rot,-1.4deg)); }
.js .papeles [data-r].in{ opacity:1; transform:rotate(var(--rot,-1.4deg)); }
.absol{ margin-top:2rem; font-family:var(--display); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.55rem); color:var(--text-display); max-width:40ch; }
.absol em{ color:var(--amber); font-style:italic; }

/* ════════ S4 · CITA ════════ */
.quote{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.quote .shell{ max-width:960px; }
.quote__card{ position:relative; padding:clamp(1.8rem,4vw,3rem) clamp(1.6rem,4vw,3rem) clamp(1.8rem,4vw,3rem) clamp(3rem,7vw,5rem); }
.quote__mark{ position:absolute; top:.4rem; left:0; width:clamp(48px,7vw,84px); height:auto; }
.quote__mark path{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520; }
.quote.in .quote__mark path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.5s ease .3s; }
.quote p{ font-family:var(--display); font-weight:500; font-size:clamp(1.35rem,3vw,2.15rem); line-height:1.34; letter-spacing:-.01em; color:var(--text-display); max-width:34ch; }

/* ════════ S5 · PORTAL (giro + comparación + vivero) ════════ */
.portal{ background:var(--surface-2); }
.portal__top{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.portal__art{ position:relative; }
.portal__blob{ position:absolute; inset:-14% -2%; z-index:0; fill:var(--surface-3); opacity:.6; filter:blur(2px); }
.mock{
  position:relative; z-index:1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow); background:var(--surface); transform:perspective(1000px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transition:transform .2s ease;
}
.mock__bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--border); }
.mock__bar i{ width:11px; height:11px; border-radius:50%; }
.mock__bar .d1{ background:var(--accent-soft); } .mock__bar .d2{ background:var(--primary-soft); } .mock__bar .d3{ background:var(--amber); }
.mock__bar .cap{ margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--text-muted); }
.mock img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.mock__glare{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--text-display) 22%,transparent) 50%,transparent 60%); transition:opacity .3s ease; }
.mock:hover .mock__glare{ opacity:1; }

/* comparación honesta */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.6rem; }
.vs{ border-radius:var(--radius); padding:1.4rem 1.4rem 1.5rem; border:1px solid var(--border); }
.vs--no{ background:var(--surface); }
.vs--si{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.vs .vs__tag{ font-family:var(--body); font-weight:500; font-size:.68rem; letter-spacing:0.112em; text-transform:uppercase; display:flex; align-items:center; gap:6px; margin-bottom:.7rem; }
.vs--no .vs__tag{ color:var(--text-muted); } .vs--si .vs__tag{ color:var(--primary-deep); }
.vs .vs__tag svg{ width:15px; height:15px; }
.vs--no .vs__tag svg{ stroke:var(--accent-soft); } .vs--si .vs__tag svg{ stroke:var(--primary-deep); }
.vs p{ font-size:.98rem; line-height:1.5; }
.vs--si p{ color:var(--ink); }

/* vivero de herramientas */
.vivero{ position:relative; margin-top:clamp(2rem,4vw,3rem); }
.vivero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.tool{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:1.3rem 1.3rem 1.4rem;
  background:linear-gradient(150deg, color-mix(in srgb, var(--ac,var(--primary-soft)) 12%, var(--surface)), var(--surface) 72%);
  border:1px solid color-mix(in srgb, var(--ac,var(--primary-soft)) 30%, transparent);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tool::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--ac,var(--primary-soft)); opacity:.9; }
.tool::after{ /* linterna que sigue el cursor */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--primary-soft) 12%,transparent), transparent 60%);
}
.tool:hover{ transform:translateY(-4px); border-color:var(--ac,var(--primary-soft)); box-shadow:0 20px 46px -20px color-mix(in srgb,var(--ac,var(--primary-soft)) 55%, transparent); }
.tool:hover::after{ opacity:1; }
.tool__head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.tool__chip{ width:42px; height:42px; border-radius:.7rem; flex:none; display:grid; place-items:center; color:var(--ac,var(--primary-soft)); background:color-mix(in srgb,var(--ac,var(--primary-soft)) 16%, transparent); border:1px solid color-mix(in srgb,var(--ac,var(--primary-soft)) 42%, transparent); }
.tool__chip svg{ width:22px; height:22px; stroke:currentColor; }
.tool .tag{ font-family:var(--mono); color:var(--ac,var(--primary-soft)); font-size:.66rem; letter-spacing:.14em; display:block; margin-bottom:.1rem; }
.tool h3{ font-size:1rem; line-height:1.2; color:var(--text-display); }
.tool p{ margin-top:.4rem; font-size:.9rem; color:var(--text-muted); }
.tool.a-verde{ --ac:var(--primary-soft); } .tool.a-lima{ --ac:var(--lime); } .tool.a-ambar{ --ac:var(--amber); } .tool.a-brasa{ --ac:var(--accent-soft); }
.js .vivero__grid[data-rs]>*{ opacity:0; transform:translateY(16px) scale(.96); }
.js .vivero__grid[data-rs].in>*{ opacity:1; transform:none; transition:opacity .5s ease calc(var(--i,0)*70ms), transform .6s cubic-bezier(.34,1.4,.5,1) calc(var(--i,0)*70ms); }
/* tarjetas fantasma: el sistema que sigue naciendo */
.fantasmas{ position:relative; z-index:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin-top:1rem; opacity:.5; }
.fantasma{ height:96px; border-radius:var(--radius); border:1px dashed var(--border); background:color-mix(in srgb,var(--surface) 60%,transparent); position:relative; overflow:hidden; }
.fantasma::before{ content:""; position:absolute; top:1rem; left:1.1rem; width:32px; height:32px; border-radius:.6rem; border:1px dashed var(--border); }
.fantasma::after{ content:""; position:absolute; top:1.4rem; left:3.6rem; right:1.4rem; height:8px; border-radius:4px; background:var(--border); opacity:.6; }
.fantasma:nth-child(2){ opacity:.7; } .fantasma:nth-child(3){ opacity:.45; } .fantasma:nth-child(4){ opacity:.28; }
[data-parallax] .fantasma{ animation:respira 6s ease-in-out infinite; }
.fantasma:nth-child(2){ animation-delay:.6s; } .fantasma:nth-child(3){ animation-delay:1.2s; } .fantasma:nth-child(4){ animation-delay:1.8s; }
@keyframes respira{ 0%,100%{opacity:.35} 50%{opacity:.6} }
.vivero__nota{ margin-top:1.2rem; font-family:var(--body); font-weight:500; font-size:.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:.6rem; }
.vivero__nota .spark{ width:16px; height:16px; stroke:var(--amber); }

/* ════════ S6 · TU MARTES (línea de tiempo vertical) ════════ */
.dia{ background:var(--surface); }
.tl{ position:relative; margin-top:1rem; padding-left:0; }
.tl__line{ position:absolute; left:calc(72px + .9rem); top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--amber), var(--primary-soft) 30%, var(--lime) 55%, var(--accent-soft) 80%, var(--accent)); opacity:.5; }
.tl__row{ position:relative; display:grid; grid-template-columns:72px 1fr; gap:1.2rem; align-items:start; padding:.7rem 0; }
.tl__hora{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.82rem; color:var(--amber); text-align:right; padding-top:.9rem; }
.tl__card{ position:relative; display:flex; gap:1.1rem; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem .9rem; margin-left:1.8rem; transition:transform .22s ease, border-color .22s ease; }
.tl__card::before{ content:""; position:absolute; left:-1.8rem; top:50%; width:13px; height:13px; border-radius:50%; background:var(--surface); border:2px solid var(--amber); transform:translate(-6px,-50%); }
.tl__card:hover{ transform:translateX(3px); border-color:var(--primary-soft); }
.tl__img{ width:118px; height:118px; flex:none; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.tl__txt{ flex:1; min-width:0; }
.tl__card .tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; color:var(--primary-soft); }
.tl__card h3{ font-size:1.02rem; margin:.15rem 0 .3rem; color:var(--text-display); }
.tl__card p{ font-size:.92rem; color:var(--text-muted); }

/* ════════ S7 · ⭐ EL RÍO DE CLIENTES ════════ */
.rio{ position:relative; background:var(--bg); }
.rio__pin{ position:sticky; top:0; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--nav-h) + 1rem) 0; }
.rio__wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; width:100%; padding:0 clamp(1rem,4vw,2rem); display:grid; grid-template-columns:1fr 300px; gap:2rem; align-items:center; }
.rio__intro{ max-width:38ch; }
.rio__intro h2{ font-size:clamp(1.8rem,4vw,2.7rem); margin:.4rem 0 .7rem; }
.rio__intro p{ color:var(--text-muted); }
.rio__stage{ position:relative; height:min(72vh,600px); }
.rio__svg{ width:100%; height:100%; display:block; overflow:visible; }
.rio__estaciones{ position:absolute; inset:0; pointer-events:none; }
.rio-est{ position:absolute; right:100%; margin-right:18px; width:210px; text-align:right; transform:translateY(-50%); opacity:.4; transition:opacity .4s ease; }
.rio-est.on{ opacity:1; }
.rio-est .et{ font-family:var(--body); font-weight:500; font-size:.66rem; letter-spacing:0.096em; text-transform:uppercase; color:var(--rc,var(--primary-soft)); }
.rio-est h4{ font-family:var(--display); font-size:1.05rem; color:var(--text-display); margin:.15rem 0; }
.rio-est .cifra{ font-family:var(--mono); font-size:1.4rem; color:var(--rc,var(--primary-soft)); }
.rio-hint{ margin-top:1.4rem; font-family:var(--body); font-weight:500; font-size:.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:.5rem; }
.rio-hint svg{ width:15px; height:15px; stroke:var(--amber); animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ════════ S8 · ANTES / DESPUÉS (arrastrable) ════════ */
.antes{ background:var(--surface-2); }
.antes__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.ba{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:4/3; user-select:none; touch-action:pan-y; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ z-index:1; }
.ba__before{ z-index:2; clip-path:inset(0 calc(100% - var(--sx,50%)) 0 0); }
.ba__tag{ position:absolute; top:12px; z-index:3; font-family:var(--body); font-weight:500; font-size:.64rem; letter-spacing:0.096em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:color-mix(in srgb,var(--bg) 70%,transparent); color:var(--text-display); }
.ba__tag--b{ left:12px; } .ba__tag--a{ right:12px; }
.ba__handle{ position:absolute; top:0; bottom:0; z-index:4; left:var(--sx,50%); width:2px; background:var(--amber); transform:translateX(-1px); cursor:ew-resize; }
.ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--amber); display:grid; place-items:center; box-shadow:0 6px 18px color-mix(in srgb,var(--bg) 60%,transparent); }
.ba__grip svg{ width:20px; height:20px; stroke:var(--bg); }
.antes__txt h2{ font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:.7rem; }
.antes__txt p{ color:var(--text-muted); max-width:46ch; }

/* ════════ S9 · PLANES ════════ */
.planes{ background:var(--surface-3); }
.planes__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2rem; align-items:stretch; }
.plan{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem 1.5rem; display:flex; flex-direction:column; transition:transform .22s ease; }
.plan:hover{ transform:translateY(-4px); }
.plan--star{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 24px 58px -24px color-mix(in srgb,var(--accent) 50%,transparent); }
.plan .ribbon{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:.34rem 1rem; border-radius:999px; background:linear-gradient(92deg,var(--amber),var(--accent-soft)); color:var(--bg); font-weight:700; font-size:.72rem; letter-spacing:.04em; }
.plan h3{ font-size:1.15rem; margin-bottom:.2rem; }
.plan .precio{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:2rem; color:var(--text-display); font-weight:500; margin:.3rem 0; }
.plan .precio span{ font-size:.85rem; color:var(--text-muted); }
.plan .quien{ color:var(--text-muted); font-size:.9rem; margin-bottom:1.1rem; }
.plan ul{ list-style:none; margin:0 0 1.5rem; display:grid; gap:.55rem; font-size:.95rem; }
.plan li{ position:relative; padding-left:1.6rem; }
.plan li svg{ position:absolute; left:0; top:5px; width:15px; height:15px; stroke:var(--primary-soft); }
.plan .btn{ margin-top:auto; justify-content:center; width:100%; }
.planes__nota{ margin-top:1.6rem; color:var(--text-muted); font-size:.95rem; max-width:70ch; }
.planes__nota b{ color:var(--text-display); }

/* ════════ S10 · OBJECIONES (chat) ════════ */
.obj{ background:var(--surface); }
.obj__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.obj__art{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:4/5; }
.obj__art img{ width:100%; height:100%; object-fit:cover; }
.obj__chat{ display:flex; flex-direction:column; gap:1rem; }
.ob{ display:grid; gap:.5rem; }
.ob .q{ align-self:flex-start; max-width:80%; background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:4px; border-radius:14px; padding:.7rem 1rem; font-weight:600; color:var(--text-display); }
.ob .a{ align-self:flex-end; max-width:88%; background:var(--paper); color:var(--ink); border-bottom-right-radius:4px; border-radius:14px; padding:.8rem 1.1rem; font-size:.96rem; line-height:1.5; }
.ob .a b{ color:var(--primary-deep); }

/* ════════ S11 · CIERRE ════════ */
.cierre{ position:relative; min-height:80vh; display:flex; align-items:center; overflow:hidden; text-align:center; }
.cierre .hero-fondo img{ object-position:50% 55%; }
.cierre__in{ position:relative; z-index:1; max-width:60ch; margin:0 auto; }
.cierre h2{ font-size:clamp(2rem,4.6vw,3rem); margin:1rem 0 .8rem; }
.cierre .sub{ color:var(--text); font-size:1.15rem; max-width:52ch; margin:0 auto 1.6rem; text-shadow:0 1px 18px color-mix(in srgb,var(--bg) 66%,transparent); }
.cierre .btn-row{ justify-content:center; }
.cierre .btn-note{ text-align:center; }

/* ── footer ── */
.foot{ position:relative; z-index:1; padding:2.6rem 1.5rem; text-align:center; color:var(--text-muted); font-size:.85rem; border-top:1px solid var(--border); }
.foot__logo{ display:inline-block; position:relative; margin-bottom:.9rem; }
.foot__logo img{ height:26px; opacity:.9; }
.foot__brote{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); width:34px; height:34px; opacity:0; pointer-events:none; }
.foot__brote .hoja,.foot__brote .tallo,.foot__brote .brote-flor{ opacity:0; }
[data-humor] .foot__logo:hover .foot__brote{ opacity:1; }
[data-humor] .foot__logo:hover .tallo{ opacity:1; transition:opacity .3s ease; }
[data-humor] .foot__logo:hover .hoja--i{ opacity:1; transition:opacity .4s ease .15s; }
[data-humor] .foot__logo:hover .hoja--d{ opacity:1; transition:opacity .4s ease .3s; }
[data-humor] .foot__logo:hover .brote-flor{ opacity:1; transition:opacity .4s ease .5s; }
.foot__mini{ margin-top:.3rem; opacity:.8; }

/* ════════ responsivo ════════ */
@media (max-width:960px){
  .portal__top{ grid-template-columns:1fr; }
  /* el río, en móvil, es una línea de tiempo vertical con la misma gradiente del viaje (sin el SVG serpenteante) */
  .rio__wrap{ grid-template-columns:1fr; gap:1rem; }
  .rio__stage{ height:auto; }
  .rio__svg{ display:none; }
  .rio-hint{ display:none; }
  .rio__estaciones{ position:relative; display:grid; gap:1.5rem; margin-top:1.4rem; padding-left:1.8rem; }
  .rio__estaciones::before{ content:""; position:absolute; left:5px; top:.5rem; bottom:.5rem; width:2px; background:linear-gradient(180deg,var(--primary-soft),var(--lime) 35%,var(--amber) 68%,var(--accent-soft)); opacity:.6; }
  .rio-est{ position:relative; top:auto !important; right:auto; left:auto; width:auto; text-align:left; margin:0; transform:none; opacity:1; }
  .rio-est::before{ content:""; position:absolute; left:-1.8rem; top:.4rem; width:12px; height:12px; border-radius:50%; background:var(--rc); box-shadow:0 0 0 3px var(--bg); }
  .obj__grid{ grid-template-columns:1fr; } .obj__art{ aspect-ratio:16/9; max-height:280px; }
  .antes__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav__burger{ display:flex; }
  .nav__scrim{ display:block; } .nav__scrim.open{ opacity:1; visibility:visible; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; z-index:51; flex-direction:column; gap:0;
    background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:.5rem 0; border-bottom:1px solid var(--border); box-shadow:0 18px 40px color-mix(in srgb,var(--bg) 50%,transparent);
    transform:translateY(-130%); transition:transform .28s ease; visibility:hidden;
  }
  .nav__links.open{ transform:translateY(0); visibility:visible; }
  .nav__links a{ width:100%; padding:.9rem clamp(1rem,4vw,2rem); }
  .nav__links a:not(.nav__cta)::after{ display:none; }
  .nav__cta{ border-radius:0; margin:.4rem clamp(1rem,4vw,2rem); text-align:center; }
  .nav__burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .papeles{ grid-template-columns:1fr; }
  .versus{ grid-template-columns:1fr; }
  .fantasmas{ display:none; }
  .planes__grid{ grid-template-columns:1fr; }
  /* línea de tiempo en móvil: hora más angosta, foto más chica, para que respire el texto */
  .tl__row{ grid-template-columns:48px 1fr; gap:.7rem; }
  .tl__line{ left:calc(48px + .9rem); }
  .tl__card{ gap:.8rem; padding:.7rem; }
  .tl__img{ width:82px; height:82px; }
  .tl__hora{ font-size:.74rem; }
  .hero-fondo img{ object-position:64% 26%; }
  .hero-fondo .velo{ background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 66%,transparent), color-mix(in srgb,var(--bg) 52%,transparent) 42%, var(--bg) 97%); }
  .rio__pin{ min-height:auto; position:relative; }
}

/* ════════ menos movimiento: quieto y legible ════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .js [data-r],.js [data-rs]>*,.js .hero h1 .w,.js .vivero__grid[data-rs]>*{ opacity:1 !important; transform:none !important; }
  .js .hero-fondo img,.js .cine img{ opacity:1 !important; transform:none !important; }
  .hero-sweep{ display:none !important; }
  .js .marker,.in .marker{ background-size:100% .32em !important; }
  .porfin .stmt .w{ color:var(--text-display) !important; } .porfin .stmt .rem{ color:var(--amber) !important; }
  .quote__mark path,.porfin .firma .circulo path{ stroke-dashoffset:0 !important; }
}

/* ============================================================
   08 · LA PRUEBA — variante RESEÑAS (arquetipo `flujo-diario`)
   Ocupa la MISMA ranura que el comparador antes/después y reusa su rejilla
   (.antes__grid), así que el responsive de la 08 ya la cubre: acá solo vive el
   hilo —la reseña, el aviso, la respuesta y la vuelta del mismo cliente—, que es
   lo que en este arquetipo hace las veces de la foto antes/después.
   ============================================================ */
.rsn{ display:grid; gap:.85rem; }
.rsn__card{ background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.rsn__card--mala{ border-left-color:var(--accent); }
.rsn__card--buena{ border-left-color:var(--lime); }
.rsn__card--respuesta{ --sangria:clamp(1.2rem,4vw,2.2rem); position:relative; margin-left:var(--sangria); background:var(--surface-3); border-left-color:var(--primary-soft); }
.rsn__card--respuesta::before{ content:""; position:absolute; left:calc(-1 * var(--sangria)); top:-.9rem; height:calc(50% + .9rem); width:calc(var(--sangria) - 8px); border-left:1px solid var(--border); border-bottom:1px solid var(--border); border-bottom-left-radius:12px; }
.rsn__top{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; margin-bottom:.5rem; }
.rsn__stars{ display:inline-flex; gap:2px; }
.rsn__stars svg{ width:15px; height:15px; fill:var(--surface-3); }
.rsn__stars svg.on{ fill:var(--amber); }
.rsn__who{ font-weight:600; font-size:.92rem; color:var(--text-display); }
.rsn__when{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-left:auto; }
.rsn__body{ font-size:.94rem; line-height:1.55; color:var(--text-muted); }
/* Misma pildora que la de la variante de expediente, mismo motivo: ambar sobre relleno
   ambar al 16% quedaba en 4.50:1, justo en el filo del minimo. */
.rsn__aviso{ display:flex; align-items:center; gap:.55rem; justify-self:start; padding:.42rem .8rem; border-radius:999px; background:color-mix(in srgb,var(--amber) 9%,transparent); border:1px solid color-mix(in srgb,var(--amber) 42%,transparent); }
.rsn__aviso svg{ flex:none; width:15px; height:15px; stroke:var(--amber); }
.rsn__aviso span{ font-family:var(--body); font-weight:500; font-size:.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); }

@media (max-width:760px){
  /* La fecha deja de empujarse al extremo: en una columna angosta partía la línea
     y dejaba al nombre solo en su renglón. */
  .rsn__when{ margin-left:0; }
  .rsn__card--respuesta{ --sangria:1rem; }
}

/* ============================================================
   08 · LA PRUEBA — variante EXPEDIENTE (arquetipo `cita-expediente`)
   Ocupa la MISMA ranura que el comparador antes/después y reusa su rejilla
   (.antes__grid), igual que la variante de reseñas: acá solo vive el hilo en el
   tiempo —el pedazo regado, el expediente que ya lo tenía, la cita que salió sola
   y la vuelta del mismo cliente—, que es lo que en este arquetipo hace las veces
   de la foto antes/después.
   Namespace propio (.exp*) a propósito: reusar .rsn* ataría dos arquetipos
   distintos al mismo bloque, y le pondría a una clínica clases que dicen «reseña».
   ============================================================ */
.exp{ display:grid; gap:.85rem; }
.exp__card{ background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.exp__card--regada{ border-left-color:var(--accent); }
.exp__card--vuelta{ border-left-color:var(--lime); }
/* Ojo: la hermana .rsn__card--respuesta usa --surface-3 y esta usa --surface-2. No es
   descuido: esta lleva la fecha en teal, y teal sobre surface-3 da 3.86:1. Medido. */
.exp__card--ficha{ --sangria:clamp(1.2rem,4vw,2.2rem); position:relative; margin-left:var(--sangria); background:var(--surface-2); border-left-color:var(--primary-soft); }
.exp__card--ficha::before{ content:""; position:absolute; left:calc(-1 * var(--sangria)); top:-.9rem; height:calc(50% + .9rem); width:calc(var(--sangria) - 8px); border-left:1px solid var(--border); border-bottom:1px solid var(--border); border-bottom-left-radius:12px; }
.exp__top{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; margin-bottom:.5rem; }
.exp__who{ font-weight:600; font-size:.92rem; color:var(--text-display); }
.exp__when{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-left:auto; }
.exp__body{ font-size:.94rem; line-height:1.55; color:var(--text-muted); }
.exp__marca{ display:inline-flex; }
.exp__marca svg{ width:15px; height:15px; stroke:var(--lime); }

/* Los tres pedazos regados son el dolor raíz hecho visible (papel · WhatsApp ·
   memoria). Van DENTRO de la tarjeta del dolor, no sueltos: sueltos parecerían
   funciones del producto en vez de el problema que tiene hoy. */
.exp__pedazos{ list-style:none; margin:.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.exp__pedazos li{ font-family:var(--body); font-weight:500; font-size:.64rem; letter-spacing:0.064em; text-transform:uppercase; color:var(--text-muted); padding:.28rem .6rem; border-radius:999px; border:1px dashed var(--border); background:var(--bg); }

/* El historial lleva TRES renglones fijos: con menos no se lee como historial, y
   esa lectura es justamente la prueba del arquetipo. Es estructura, no ranura. */
.exp__hist{ list-style:none; margin:0; padding:0; display:grid; gap:.42rem; }
.exp__hist li{ display:flex; align-items:baseline; gap:.7rem; font-size:.9rem; line-height:1.4; }
.exp__hist li + li{ border-top:1px solid var(--border); padding-top:.42rem; }
.exp__hist-fecha{ flex:none; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-soft); }
.exp__hist-que{ color:var(--text); }

/* Las píldoras son el software actuando; las tarjetas, lo que ve una persona.
   Alternadas a propósito: esa alternancia es el argumento de la sección. */
.exp__aviso{ display:flex; align-items:center; gap:.55rem; justify-self:start; padding:.42rem .8rem; border-radius:999px; background:color-mix(in srgb,var(--amber) 9%,transparent); border:1px solid color-mix(in srgb,var(--amber) 42%,transparent); }
.exp__aviso svg{ flex:none; width:15px; height:15px; stroke:var(--amber); }
.exp__aviso span{ font-family:var(--body); font-weight:500; font-size:.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); }

@media (max-width:760px){
  /* Mismo ajuste que la variante de reseñas: en una columna angosta la fecha
     empujada al extremo parte la línea y deja al nombre solo en su renglón. */
  .exp__when{ margin-left:0; }
  .exp__card--ficha{ --sangria:1rem; }
}

/* ============================================================
   01 · HÉROE — variante FICHA (arquetipo `cita-expediente`)
   El héroe base es de una columna y deja media pantalla vacía: la página habla de IA
   y no la enseña. Acá la sección gana una segunda columna con la ficha del paciente
   armándose en tres tiempos, que es lo único que esa IA hace y se puede mirar.
   Lo que muestra la tarjeta sale del contrato real de la app (app_spec.py --code A283).
   Los cuatro puntos de abajo son las cuatro estaciones del río de la sección 07.
   ============================================================ */
.hero--ficha{ min-height:auto; padding:calc(var(--nav-h) + 5.5vh) 0 7vh; }

/* El velo del héroe base tapa la foto al 92% y deja una mancha oscura. Acá se afloja:
   a la izquierda lo justo para que el texto se lea, a la derecha casi nada, porque es
   lo que el cristal de la tarjeta tiene que difuminar. */
.hero--ficha .velo{
  background:
    linear-gradient(90deg, color-mix(in srgb,var(--bg) 84%,transparent) 0%, color-mix(in srgb,var(--bg) 56%,transparent) 48%, color-mix(in srgb,var(--bg) 28%,transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg) 48%,transparent) 0%, transparent 24%, transparent 56%, var(--bg) 99%);
}
.hero--ficha .hero-fondo img{ object-position:62% 22%; }

.hero--ficha .hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,3.2vw,3.4rem); align-items:center;
}
.hero--ficha .hero__in{ max-width:none; }
/* Cuando el renglon de arriba parte en dos lineas, el icono centrado se ve suelto. */
.hero--ficha .kicker{ align-items:flex-start; }
.hero--ficha .kicker svg{ margin-top:.22em; }
/* El titular partía en cuatro renglones, cada uno más largo que el anterior. `balance`
   los empareja; el ancho en `ch` evita que se estire de lado a lado de la columna. */
.hero--ficha h1{ max-width:18ch; text-wrap:balance; font-size:clamp(2rem,3.4vw,2.95rem); margin:1rem 0 1.1rem; }
.hero--ficha .sub{ font-size:1.08rem; max-width:44ch; margin-bottom:1.4rem; }
.hero--ficha .btn-row{ margin-top:1.4rem; gap:.7rem; }
/* Los dos botones tienen que caber en un renglon: partidos, el fantasma queda
   solo y parece un error de armado. */
.hero--ficha .btn{ font-size:.96rem; padding:.88rem 1.35rem; }
.hero--ficha .chips{ margin-top:1.3rem; }
.hero--ficha .chips li{ font-size:.85rem; padding:7px 13px; }

.hero--ficha .hero__obra{ display:grid; gap:1rem; align-content:center; }

/* ── la tarjeta de cristal ── */
.ficha{
  position:relative; overflow:hidden; padding:1.05rem 1.15rem 1.2rem;
  border-radius:calc(var(--radius) + 4px);
  border:1px solid color-mix(in srgb,var(--primary-soft) 24%,var(--border));
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--surface-2) 96%,transparent),
    color-mix(in srgb,var(--surface) 95%,transparent));
  backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:var(--shadow);
}
.ficha::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--primary-soft) 75%,transparent) 30%,
    color-mix(in srgb,var(--amber) 60%,transparent) 72%,transparent);
}
.ficha__top{ display:flex; align-items:center; gap:.55rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
.ficha__marca{ flex:none; display:grid; place-items:center; width:27px; height:27px; border-radius:9px;
  background:color-mix(in srgb,var(--primary-soft) 15%,transparent); }
.ficha__marca svg{ width:15px; height:15px; stroke:var(--primary-soft); }
.ficha__titulo{ font-size:.98rem; font-weight:600; letter-spacing:-.01em; color:var(--text-display); }
.ficha__muestra{
  margin-left:auto; font-family:var(--body); font-weight:500; font-size:.6rem; letter-spacing:0.096em; text-transform:uppercase;
  color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 42%,transparent);
  background:color-mix(in srgb,var(--amber) 12%,transparent); border-radius:999px; padding:.22rem .52rem;
}

.ficha__paso{ padding-top:.85rem; }
.ficha__paso + .ficha__paso{ margin-top:.85rem; border-top:1px dashed color-mix(in srgb,var(--border) 92%,transparent); }
.ficha__lbl{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--text-muted); margin-bottom:.55rem; }
.ficha__num{ flex:none; display:grid; place-items:center; width:17px; height:17px; border-radius:50%;
  font-family:var(--mono); font-size:.6rem; line-height:1; color:var(--bg); background:var(--primary-soft); }

/* Paso 1 · lo que el dueño pega: se ve como un pedazo pegado, no como un dato ordenado. */
.ficha__crudo{
  display:flex; align-items:flex-start; gap:.5rem; font-size:.82rem; line-height:1.45; color:var(--text);
  background:color-mix(in srgb,var(--bg) 44%,transparent);
  border-left:2px solid color-mix(in srgb,var(--text-muted) 42%,transparent);
  border-radius:0 8px 8px 0; padding:.42rem .6rem;
}
.ficha__crudo + .ficha__crudo{ margin-top:.36rem; }
.ficha__crudo svg{ flex:none; width:14px; height:14px; margin-top:.2rem; stroke:var(--text-muted); }

/* Paso 2 · lo mismo, ya en orden. La primera fila va resaltada: es la que acaba de entrar. */
.ficha__hist{ list-style:none; display:grid; gap:.3rem; }
.ficha__hist li{ display:grid; grid-template-columns:4.3rem 1fr; align-items:baseline; gap:.6rem;
  font-size:.84rem; padding:.3rem .35rem; border-radius:7px; }
.ficha__hist li:first-child{ box-shadow:inset 2px 0 0 var(--primary-soft); padding-left:.6rem; }
.ficha__fecha{ font-family:var(--mono); font-size:.72rem; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; color:var(--primary-soft); }
.ficha__que{ color:var(--text); }

/* Paso 3 · lo que falta y el próximo paso, las otras dos cosas que la app devuelve. */
.ficha__pend,.ficha__sig{ display:flex; align-items:flex-start; gap:.5rem; font-size:.82rem; line-height:1.45; }
.ficha__sig{ margin-top:.42rem; }
.ficha__pend svg,.ficha__sig svg{ flex:none; width:15px; height:15px; margin-top:.16rem; }
.ficha__pend svg{ stroke:var(--amber); } .ficha__pend span{ color:var(--amber); }
.ficha__sig svg{ stroke:var(--primary-soft); } .ficha__sig span{ color:var(--text-display); }

/* El pie NO es adorno: la app no guarda sola entre visitas, y la página no puede prometerlo. */
.ficha__pie{ display:flex; align-items:flex-start; gap:.5rem; padding:0 .3rem;
  font-size:.78rem; line-height:1.5; color:var(--text-muted); }
.ficha__pie svg{ flex:none; width:14px; height:14px; margin-top:.2rem; stroke:var(--amber); }

/* ── las cuatro estaciones del río, dibujadas ── */
.hero__rio{ padding-top:.9rem; border-top:1px solid color-mix(in srgb,var(--border) 80%,transparent); }
.hero__rio-lbl{ font-family:var(--body); font-weight:500; font-size:.62rem; letter-spacing:0.112em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.65rem; }
.hero__rio-via{ list-style:none; position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; }
.hero__rio-via::before{
  content:""; position:absolute; top:5px; left:5px; right:5px; height:1px; opacity:.6;
  background:linear-gradient(90deg,var(--primary-soft),color-mix(in srgb,var(--primary-soft) 50%,var(--amber)),var(--amber));
}
.hero__rio-via li{ position:relative; padding-top:1.1rem; font-size:.68rem; line-height:1.28; color:var(--text-muted); }
.hero__rio-pt{ position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%;
  border:1.5px solid var(--primary-soft); background:var(--bg); }
.hero__rio-via li:last-child{ color:var(--amber); }
.hero__rio-via li:last-child .hero__rio-pt{ border-color:var(--amber); background:var(--amber); }

/* ── los tres tiempos ── */
.js .hero--ficha .ficha{ opacity:0; transform:translateY(14px) scale(.986); }
.ready .hero--ficha .ficha{ opacity:1; transform:none;
  transition:opacity .7s ease .25s, transform .8s cubic-bezier(.22,.9,.24,1) .25s; }
.hero--ficha .ficha__pie{ --t:4; } .hero--ficha .hero__rio{ --t:5; }
.js .hero--ficha .ficha__paso,.js .hero--ficha .ficha__pie,.js .hero--ficha .hero__rio{
  opacity:0; transform:translateY(9px); }
.ready .hero--ficha .ficha__paso,.ready .hero--ficha .ficha__pie,.ready .hero--ficha .hero__rio{
  opacity:1; transform:none;
  transition:opacity .5s ease calc(var(--t,1)*250ms + 380ms),
             transform .55s cubic-bezier(.22,.9,.24,1) calc(var(--t,1)*250ms + 380ms);
}

@media (max-width:1020px){
  .hero--ficha .hero__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .hero--ficha .hero__obra{ max-width:520px; }
  .hero--ficha h1{ max-width:20ch; }
  .hero--ficha .hero-fondo img{ object-position:64% 26%; }
  .hero--ficha .velo{ background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 74%,transparent), color-mix(in srgb,var(--bg) 58%,transparent) 42%, var(--bg) 97%); }
}
@media (max-width:560px){
  /* Sin esto la tarjeta arranca a ~910px y en el telefono no la ve nadie: el argumento
     de la seccion es que la IA se VEA, asi que tiene que asomar en la primera pantalla. */
  .hero--ficha{ padding:calc(var(--nav-h) + 2.5vh) 0 5vh; }
  .hero--ficha h1{ font-size:clamp(1.8rem,7.4vw,2.15rem); margin:.7rem 0 .8rem; max-width:none; }
  .hero--ficha .sub{ font-size:1rem; margin-bottom:1.1rem; }
  .hero--ficha .btn-row{ margin-top:1.05rem; }
  .hero--ficha .btn{ font-size:.92rem; padding:.8rem 1.2rem; }
  .hero--ficha .btn-note{ margin-top:.7rem; }
  .hero--ficha .chips{ margin-top:.95rem; gap:7px; }
  .hero--ficha .chips li{ font-size:.76rem; padding:6px 11px; }
  .ficha{ padding:.9rem .85rem 1rem; }
  .ficha__hist li{ grid-template-columns:3.8rem 1fr; gap:.45rem; }
  /* En dos columnas la línea que une los puntos ya no une nada: mejor sin ella. */
  .hero__rio-via{ grid-template-columns:repeat(2,1fr); gap:.75rem .5rem; }
  .hero__rio-via::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .js .hero--ficha .ficha,.js .hero--ficha .ficha__paso,
  .js .hero--ficha .ficha__pie,.js .hero--ficha .hero__rio{ opacity:1 !important; transform:none !important; }
}

.foot__legal{ margin-top:.55rem; font-size:.82rem; color:var(--text-muted); }
.foot__legal a{ color:var(--text-muted); }
.foot__legal a:hover{ color:var(--amber); }

/* ============================================================
   PÁGINAS LEGALES (website/legal/*.html)
   Documentos de lectura larga, no secciones de venta: columna angosta, mucho aire
   entre bloques y jerarquía sobria. Heredan la paleta del :root de arriba — acá no
   vive ni un hex, igual que en el resto de la hoja.
   ============================================================ */
.legal-nav{
  position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;
  padding:.9rem clamp(1rem,4vw,2rem); background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.legal-nav__marca{ display:inline-flex; align-items:center; gap:.55rem; margin-right:auto; }
.legal-nav__marca img{ height:26px; width:auto; }
.legal-nav a{ color:var(--text-muted); font-size:.9rem; }
.legal-nav a:hover{ color:var(--text-display); }
.legal-nav a[aria-current="page"]{ color:var(--amber); font-weight:500; }

.legal{ max-width:70ch; margin:0 auto; padding:clamp(2.2rem,6vw,4rem) clamp(1rem,4vw,2rem) 5rem; }
.legal h1{ font-size:clamp(1.9rem,4.4vw,2.7rem); line-height:1.12; letter-spacing:-.015em;
  color:var(--text-display); text-wrap:balance; }
.legal__fecha{ margin-top:.6rem; font-size:.82rem; letter-spacing:.02em; color:var(--text-muted); }
.legal h2{ font-size:1.18rem; font-weight:600; color:var(--text-display);
  margin:2.6rem 0 .7rem; letter-spacing:-.005em; }
.legal h2 .legal__num{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:.82rem; color:var(--amber); margin-right:.55rem; }
.legal p{ margin:.7rem 0; }
.legal ul{ margin:.7rem 0 .7rem 1.1rem; }
.legal li{ margin:.35rem 0; }
.legal strong{ color:var(--text-display); font-weight:600; }

/* La ficha del responsable: son datos, no prosa, y se leen mejor en filas. */
.legal__datos{ margin:1.2rem 0; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); overflow:hidden; }
.legal__datos div{ display:grid; grid-template-columns:minmax(9rem,13rem) 1fr; gap:.2rem 1rem;
  padding:.7rem 1rem; }
.legal__datos div + div{ border-top:1px solid var(--border); }
.legal__datos dt{ color:var(--text-muted); font-size:.86rem; }
.legal__datos dd{ margin:0; color:var(--text-display); }

/* Un aviso corto y honesto, del tipo «esto todavía no existe». No es adorno. */
.legal__aviso{ display:flex; gap:.7rem; align-items:flex-start; margin:1.3rem 0;
  padding:.85rem 1rem; border-radius:var(--radius); border:1px solid var(--border);
  border-left:3px solid var(--amber); background:color-mix(in srgb,var(--surface) 70%,transparent); }
.legal__aviso svg{ flex:none; width:17px; height:17px; margin-top:.2rem; stroke:var(--amber); }

/* La leyenda que la ley obliga a exhibir, palabra por palabra. No es un aviso nuestro, es una
   cita textual de la norma: por eso no lleva el ámbar del aviso sino el gris de lo citado. */
.legal__leyenda{ margin:1.4rem 0 0; padding:.8rem 1rem; border-left:2px solid var(--border);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text-muted); font-size:.78rem; line-height:1.6; }

.legal-pie{ border-top:1px solid var(--border); padding:2rem clamp(1rem,4vw,2rem) 3rem;
  text-align:center; color:var(--text-muted); font-size:.9rem; }
.legal-pie strong{ color:var(--text-display); font-weight:600; }
.legal-pie p + p{ margin-top:.35rem; font-size:.82rem; }

@media (max-width:560px){
  .legal-nav{ gap:.8rem; }
  .legal-nav a{ font-size:.82rem; }
  .legal__datos div{ grid-template-columns:1fr; }
  .legal__datos dt{ font-size:.78rem; }
}