/* tipografía propia (seq 120/121) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* EIDARA brand.css · Lote 11 · tokens from BRAND/DESIGN.md + Brand Book v3 */
:root{
  --primary:#5B4A8A; --primary-dark:#3D2E6B; --primary-subtle:#EDEAF5;
  --accent:#D4A855; --accent-ink:#8A6D2E;
  --bg:#F8F6FB; --surface:#FFFFFF; --ink:#1A1525; --ink-2:#5C5470; --border:#E2DFF0;
  --on-accent:#1A1525; --focus:#5B4A8A;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --max:1120px; --prose:720px;
  /* aliases for legacy post markup */
  --text:var(--ink); --text-muted:var(--ink-2); --text-primary:var(--ink); --gold:var(--primary); --plum:var(--primary); --lilac:var(--primary); --cream:var(--ink-2); --card-bg:var(--surface);
}
@media (prefers-color-scheme:dark){:root{
  --primary:#A78BFA; --primary-dark:#8B6DF0; --primary-subtle:#221C33;
  --accent-ink:#D4A855;
  --bg:#0F0B1A; --surface:#1A1528; --ink:#F0EDF5; --ink-2:#A89CC4; --border:#2D2540;
  --focus:#A78BFA;
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;hyphens:auto}
img,svg{max-width:100%;height:auto}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--primary-dark)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3{font-weight:600;line-height:1.2;letter-spacing:-0.01em;hyphens:manual}
h1{font-size:clamp(2rem,6vw,3.25rem);letter-spacing:-0.02em}
h2{font-size:clamp(1.5rem,3.6vw,2rem);margin-bottom:1rem}
h3{font-size:1.15rem;margin-bottom:.4rem}
p+p{margin-top:1rem}
code,.num{font-family:var(--mono);font-size:.92em}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--surface);padding:.5rem 1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.prose{max-width:var(--prose)}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;gap:1.25rem;min-height:64px}
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo svg{height:36px;width:auto;display:block}
.lg-glyph{fill:var(--primary)}.lg-text{fill:var(--ink)}
.menu{display:flex;gap:1.25rem;list-style:none;margin-left:auto;align-items:center}
.menu a{color:var(--ink);text-decoration:none;font-size:.95rem}
.menu a:hover,.menu a[aria-current]{color:var(--primary);text-decoration:underline}
.lang{font-family:var(--mono);font-size:.85rem;color:var(--ink-2);display:flex;gap:.35rem}
.lang a{color:var(--ink-2);text-decoration:none}.lang [aria-current]{color:var(--ink);font-weight:600}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--border);border-radius:var(--r-md);padding:.45rem .7rem;color:var(--ink);font:inherit;cursor:pointer}
@media (max-width:760px){
  .menu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--bg);border-bottom:1px solid var(--border);padding:1rem 20px;gap:.9rem}
  .menu.open{display:flex}.burger{display:inline-block}
  .hdr .wrap{position:relative}
}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.3rem;border-radius:var(--r-pill);font:inherit;font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-primary{background:var(--primary);color:#FFFFFF}
.btn-primary:hover{background:var(--primary-dark);color:#FFFFFF}
@media (prefers-color-scheme:dark){.btn-primary,.btn-primary:hover{color:#0F0B1A}}
.btn-star{background:var(--accent);color:var(--on-accent)}
.btn-star:hover{filter:brightness(.94);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-sm{min-height:38px;padding:.4rem 1rem;font-size:.9rem}
.btn[disabled]{opacity:.6;cursor:not-allowed}
/* sections */
section{padding:56px 0}
.hero{padding:40px 0 48px}
.hero h1{max-width:22ch}
.hero .lead{font-size:1.2rem;color:var(--ink-2);max-width:40ch;margin:1rem 0 1.5rem}
.hero .more{display:inline-block;margin-left:1rem}
@media (max-width:480px){.hero{padding:24px 0 36px}.hero .lead{font-size:1.08rem;margin:.8rem 0 1.2rem}.hero .more{display:block;margin:1rem 0 0}}
.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.kicker{font-family:var(--mono);font-size:.8rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
@media (max-width:760px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.35rem;color:var(--ink);display:block}
.alt .card{background:var(--bg)}
a.card{text-decoration:none}a.card:hover{border-color:var(--primary)}
.card .meta{font-size:.85rem;color:var(--ink-2);margin-top:.4rem}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:inline-flex;width:32px;height:32px;border-radius:var(--r-pill);background:var(--primary-subtle);color:var(--primary);font-family:var(--mono);font-weight:600;align-items:center;justify-content:center;margin-bottom:.6rem}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.facts{list-style:none;border-top:1px solid var(--border)}
.facts li{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border);align-items:baseline}
.facts .num{color:var(--primary);font-weight:600;text-align:right}
@media (max-width:480px){.facts li{grid-template-columns:1fr}.facts .num{text-align:left}}
.yesno h3{margin-bottom:.6rem}.yesno ul{padding-left:1.1rem}.yesno li+li{margin-top:.4rem}
.note{font-size:.92rem;color:var(--ink-2)}
.health{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;margin:.8rem 0;border:1px solid var(--border)}
.health span{display:block}.h-g{background:#3E8E63}.h-a{background:var(--accent)}.h-r{background:#C0392B}
/* forms */
.wl{max-width:520px}
.wl label{display:block;font-weight:600;margin-bottom:.4rem}
.wl .row{display:flex;gap:.6rem;flex-wrap:wrap}
.wl input[type=email]{flex:1 1 240px;min-height:48px;padding:.6rem .9rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);font:inherit}
.wl input::placeholder{color:#9490A3}
.wl .msg{margin-top:.7rem;font-size:.95rem;min-height:1.4em}
.wl .err{color:#B42318}@media (prefers-color-scheme:dark){.wl .err{color:#F97066}}
.wl .ok{color:var(--ink)}
/* prose / technical */
.doc{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:start}
.toc{position:sticky;top:84px;font-size:.92rem}
.toc ol{list-style:none;border-left:2px solid var(--border)}
.toc a{display:block;padding:.3rem .9rem;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--primary)}
@media (max-width:760px){.doc{grid-template-columns:1fr}.toc{position:static}}
.doc section{padding:0 0 2.5rem}
.part{border-top:1px solid var(--border);padding:1.1rem 0}
.part .plain{color:var(--ink-2);font-size:.95rem}







table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--border);vertical-align:top}
th{font-weight:600}
.tablewrap{overflow-x:auto}
/* notices */
.notice{border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--surface);border-radius:var(--r-md);padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.95rem}
.notice strong{font-weight:600}
/* blog post (legacy markup) */
.page-hero{padding:32px 0 48px}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.article-back{display:inline-block;margin-bottom:1.2rem;font-size:.92rem}
.article-prose{max-width:var(--prose)}
.article-prose h1{margin:.6rem 0 1rem;font-size:clamp(1.9rem,5vw,2.75rem)}
.article-prose h2{margin:2.2rem 0 .8rem;font-size:clamp(1.35rem,3vw,1.7rem)}
.article-prose h3{margin:1.6rem 0 .5rem}
.article-prose p{margin-top:1rem}
.article-prose ul,.article-prose ol{margin:1rem 0 0 1.3rem}.article-prose li+li{margin-top:.4rem}
.article-prose blockquote{border-left:3px solid var(--primary);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0;color:var(--ink-2)}
.article-prose pre{background:var(--primary-subtle);border-radius:var(--r-md);padding:1rem;overflow-x:auto;margin:1rem 0;font-family:var(--mono);font-size:.88rem}
.article-prose hr{border:0;border-top:1px solid var(--border);margin:2rem 0}
.article-prose table{margin:1rem 0}
.card-tag{display:inline-block;font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:var(--r-pill);background:var(--primary-subtle);color:var(--primary)}
.section-subtle{padding:0 0 48px}
.cta-link{font-weight:600}
.post-cta{margin-top:2.5rem;padding:1.4rem;border-radius:var(--r-lg);background:var(--primary-subtle)}
.post-cta p{margin:0 0 .9rem;font-weight:600}
.byline{font-size:.92rem;color:var(--ink-2)}
/* blog index */
.secnav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.secnav a{font-size:.9rem;padding:.35rem .85rem;border:1px solid var(--border);border-radius:var(--r-pill);text-decoration:none;color:var(--ink)}
.secnav a:hover{border-color:var(--primary);color:var(--primary)}
.postlist{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
@media (max-width:760px){.postlist{grid-template-columns:1fr}}
.postlist .t{font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* footer */
.ftr{border-top:1px solid var(--border);padding:40px 0;margin-top:24px;font-size:.92rem}
.ftr .wrap{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start}
.ftr nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:flex-end}
.ftr nav a{color:var(--ink-2)}
.ftr .tag{color:var(--ink-2);margin-top:.6rem}
@media (max-width:760px){.ftr .wrap{grid-template-columns:1fr}.ftr nav{justify-content:flex-start}}
.preview-bar{background:var(--primary-subtle);color:var(--ink);font-size:.85rem;text-align:center;padding:.35rem 20px;font-family:var(--mono)}
.doc>*{min-width:0}
code{overflow-wrap:anywhere}
.table-wrap,.wp-content table,.page-hero table{display:block;overflow-x:auto;max-width:100%}
.menu .btn-primary,.menu .btn-primary:hover{color:#FFFFFF;text-decoration:none}
@media (prefers-color-scheme:dark){.menu .btn-primary,.menu .btn-primary:hover{color:#0F0B1A}}
[id]{scroll-margin-top:84px}
/* 6-oct · home shape: 02 Long document (seq 19) */
.longdoc{max-width:calc(65ch + 40px);padding-bottom:24px}
.longdoc h2{margin:3.25rem 0 .9rem;font-size:clamp(1.35rem,3vw,1.75rem)}
.longdoc h2:first-child{margin-top:1rem}
.longdoc p,.longdoc li{font-size:1.075rem}
.longdoc ul.plain{margin:1rem 0 0 1.2rem}.longdoc ul.plain li+li{margin-top:.7rem}
.longdoc form.wl{margin-top:1.5rem}
.hero-note{margin-top:.8rem}
p,li{text-wrap:pretty}h1,h2{text-wrap:balance}
.longdoc-w{max-width:calc(65ch + 40px)}
.longdoc-w .btn-star{margin-top:1.5rem}
.longdoc ul+p{margin-top:1.25rem}
/* ===== 6-oct v2 home: hero network + illustrated scenes (shape 15 Split) ===== */
.h2hero{padding:40px 0 24px}
.h2hero .wrap{display:grid;grid-template-columns:5fr 7fr;gap:2.5rem;align-items:center}
.h2hero h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:13ch}
.h2hero .lead{font-size:1.15rem;color:var(--ink-2);margin:1rem 0 1.5rem;max-width:38ch}
.h2hero .note{margin-top:.8rem}
.night{background:#0F0B1A;border-radius:var(--r-xl);position:relative;overflow:hidden;border:1px solid #2D2540}
.night canvas{display:block;width:100%;height:440px}
.night .stats{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:.78rem;color:#A89CC4;line-height:1.7}
.night .stats b{color:#F0EDF5;font-weight:600}
@media (max-width:900px){.h2hero .wrap{grid-template-columns:1fr;gap:1.5rem}.night canvas{height:340px}}
.scene{padding:72px 0}
.scene .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.scene.flip .txt{order:2}
.scene .txt{max-width:46ch}
.scene .txt p{font-size:1.075rem}
.scene .step{font-family:var(--mono);font-size:.85rem;color:var(--primary);margin-bottom:.5rem}
@media (max-width:900px){.scene{padding:48px 0}.scene .wrap{grid-template-columns:1fr;gap:1.5rem}.scene.flip .txt{order:0}}
figure.ill{margin:0}
figure.ill figcaption{font-size:.8rem;color:var(--ink-2);margin-top:.5rem}
/* app-window illustration */
.win{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.win .bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--border);font-size:.82rem;color:var(--ink-2)}
.win .bar i{width:9px;height:9px;border-radius:50%;background:var(--border);display:inline-block}
.win .bar .who{margin-left:.4rem;font-weight:600;color:var(--ink)}
.win .body{padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:88%;padding:.65rem .85rem;border-radius:var(--r-lg);font-size:.93rem;line-height:1.5}
.msg.me{align-self:flex-end;background:var(--primary);color:#FFFFFF;border-bottom-right-radius:var(--r-sm)}
@media (prefers-color-scheme:dark){.msg.me{color:#0F0B1A}}
.msg.ai{align-self:flex-start;background:var(--primary-subtle);color:var(--ink);border-bottom-left-radius:var(--r-sm)}
.tool{align-self:flex-start;font-family:var(--mono);font-size:.78rem;color:var(--ink-2);border:1px dashed var(--border);border-radius:var(--r-pill);padding:.2rem .7rem}
.tool b{color:var(--primary);font-weight:600}
/* note file illustration */
.file .path{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);padding:.6rem .9rem;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.file .ndoc{padding:1rem 1.1rem;font-size:.9rem}
.file .ndoc h4{font-size:1rem;font-weight:600;margin-bottom:.5rem}
.file .ndoc ul{list-style:none}
.file .ndoc li{padding:.35rem 0;border-top:1px solid var(--border);display:grid;grid-template-columns:auto 1fr;gap:.7rem}
.file .ndoc li span{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);padding-top:.15rem}
.file .lock{display:flex;gap:.6rem;align-items:center;padding:.7rem 1.1rem;background:var(--primary-subtle);font-size:.85rem}
.file .lock code{font-size:.8rem}
.tree{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);padding:.7rem 1.1rem 0}
.tree b{color:var(--ink);font-weight:600}
/* thread illustration */
.thread .post{padding:.8rem 1rem;border-top:1px solid var(--border);font-size:.9rem}
.thread .post:first-of-type{border-top:0}
.thread .sig{font-family:var(--mono);font-size:.75rem;color:var(--primary);margin-bottom:.25rem}
.thread .sig span{color:var(--ink-2)}
/* health chart */
.hchart{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.2rem}
.hchart .big{font-size:clamp(2.4rem,6vw,3.4rem);font-weight:600;letter-spacing:-.02em;line-height:1}
.hchart .big small{font-size:1rem;font-weight:400;color:var(--ink-2);letter-spacing:0}
.hchart .health{height:18px;margin:1rem 0 .6rem}
.hchart .legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.85rem;color:var(--ink-2)}
.hchart .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.35rem;vertical-align:-1px}
.more-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.more-facts .n{font-family:var(--mono);font-size:1.6rem;font-weight:600;color:var(--primary)}
.more-facts p{font-size:.95rem;color:var(--ink-2);margin-top:.2rem}
@media (max-width:760px){.more-facts{grid-template-columns:1fr}}
.endcta{padding:72px 0}
.endcta .wrap{max-width:calc(65ch + 40px)}

.scene .wrap.wblock{display:block}
.endcta form.wl{margin-top:1.5rem}
.night .stats{position:static;padding:0 18px 16px}
/* bento: what else is inside (shape 01, irregular sizes) */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.3rem 1.4rem}
.alt .tile{background:var(--bg)}
.t-wide{grid-column:span 2}
.tile .n{font-family:var(--mono);font-size:2.4rem;font-weight:600;color:var(--primary);line-height:1}
.tile h3{margin:.4rem 0 .4rem}
.tile p{font-size:.95rem;color:var(--ink-2)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.tags li{font-family:var(--mono);font-size:.75rem;padding:.2rem .6rem;border-radius:var(--r-pill);background:var(--primary-subtle);color:var(--primary)}
pre.mini{margin-top:.9rem;background:#0F0B1A;color:#C4B5FD;border-radius:var(--r-md);padding:.8rem 1rem;font-family:var(--mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.t-wide{grid-column:span 2}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.t-wide{grid-column:auto}}
@media (max-width:900px){.bento .tile:last-child{grid-column:span 2}}@media (max-width:560px){.bento .tile:last-child{grid-column:auto}}
/* threads scene: the selling point, set on night */
.scene.talk{background:#0F0B1A;color:#F0EDF5}
.scene.talk .step{color:#D4A855}
.scene.talk .txt p{color:#C9C1DC}
.scene.talk h2{color:#F0EDF5;font-size:clamp(1.7rem,4vw,2.4rem)}
.scene.talk figcaption{color:#A89CC4}
.nightwin{background:#1A1528;border-color:#2D2540;color:#F0EDF5}
.nightwin .bar{border-color:#2D2540;color:#A89CC4}.nightwin .bar .who{color:#F0EDF5}
.nightwin .post{border-color:#2D2540;font-size:.95rem}
.nightwin .sig{color:#C4B5FD}.nightwin .sig span{color:#A89CC4}
/* ===== seq 27: P1 air between blocks · P2 two blocks off the grid · P3 hero ===== */
:root{--gap-between:56px;--gap-star:104px}
.h2hero + .scene{margin-top:var(--gap-between)}
.scene + .scene,.scene + .endcta{margin-top:var(--gap-between)}
.scene.star,.scene + .scene.star{margin-top:var(--gap-star)}
.scene.star + .scene{margin-top:var(--gap-star)}
@media (max-width:760px){:root{--gap-between:32px;--gap-star:56px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* hero: wider text column, H1 in two lines */
.h2hero .wrap{grid-template-columns:1fr 1fr;gap:2rem}
.h2hero h1{max-width:none;font-size:clamp(2.2rem,4.3vw,3.05rem);text-wrap:balance}
.night canvas{height:470px}
@media (max-width:900px){.h2hero .wrap{grid-template-columns:1fr}.night canvas{height:360px}}
/* wide block: folder */
.scene.wide .wrap{display:block}
.whead{display:grid;grid-template-columns:5fr 6fr;gap:2.5rem;align-items:end;margin-bottom:1.75rem}
.whead h2{margin:0}
.whead p{font-size:1.075rem}
@media (max-width:900px){.whead{grid-template-columns:1fr;gap:.8rem}}
.file.split .cols{display:grid;grid-template-columns:220px 1fr}
.file .side{border-right:1px solid var(--border);padding:1rem;font-size:.88rem}
.file .side .ttl{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;margin:.2rem 0 .5rem}
.file .side ul{list-style:none;margin-bottom:1rem}
.file .side li{padding:.3rem .5rem;border-radius:var(--r-sm);color:var(--ink-2)}
.file .side li.on{background:var(--primary-subtle);color:var(--ink);font-weight:600}
.file .side li span{display:block;font-family:var(--mono);font-size:.75rem;font-weight:400;color:var(--primary);padding-left:.8rem}
.file.split .ndoc{padding:1.3rem 1.5rem;font-size:1rem}
.file.split .ndoc li{grid-template-columns:auto 1fr auto}
.file .ndoc li em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--ink-2);padding-top:.15rem}
.file.split .lock{margin-top:1rem;border-radius:var(--r-md)}
@media (max-width:640px){.file.split .cols{grid-template-columns:1fr}.file .side{border-right:0;border-bottom:1px solid var(--border)}.file .ndoc li{grid-template-columns:auto 1fr}.file .ndoc li em{grid-column:2}}
/* P5 number-led health */
.numled .wrap{display:block}
.bignum{display:flex;align-items:flex-end;gap:1.25rem;flex-wrap:wrap}
.bignum .v{font-size:clamp(4.5rem,12vw,7.5rem);font-weight:600;letter-spacing:-.04em;line-height:.9;color:var(--ink)}
.bignum .l{font-size:1.25rem;color:var(--ink-2);padding-bottom:.6rem}
.bignum .l small{font-size:.9rem}
.health.big{height:22px;margin:1.5rem 0 .8rem}
.numled .legend{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:.95rem;color:var(--ink-2)}
.numled .legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:.4rem;vertical-align:-1px}
.numline{margin-top:1.5rem;max-width:70ch;font-size:1.05rem}



.res-open{margin:8px auto 56px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2rem;border-top:1px solid var(--border);padding-top:1.25rem;color:var(--ink-2);font-size:.95rem}
.kpis .num{display:block;font-size:1.7rem;font-weight:600;color:var(--primary)}
@media (max-width:760px){.kpis{grid-template-columns:1fr 1fr}}

.scene.notfor{padding:48px 0}
.scene.notfor p{max-width:68ch}
.scene.notfor h2{font-size:clamp(1.3rem,3vw,1.6rem)}
/* 7-oct: hero counters, attachments, readable note, trail log, icon tiles, senses */
.night .stats.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:4px 18px 18px;font-family:var(--font)}
.big3 b{display:block;font-family:var(--mono);font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:600;color:#F0EDF5;line-height:1.1}
.big3 span{font-size:.82rem;color:#A89CC4;line-height:1.3;display:block;margin-top:.2rem}
.msg .att{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.78rem;opacity:.85}
.file .ndoc .sub{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);margin:-.2rem 0 .8rem}
.file .ndoc .fact{padding:.7rem 0;border-top:1px solid var(--border)}
.file .ndoc .fact p{margin:0;font-size:1rem;color:var(--ink)}
.file .ndoc .fact span{display:block;margin-top:.25rem;font-size:.78rem;color:var(--ink-2)}
.trail{background:#0F0B1A;border:1px solid #2D2540;border-radius:var(--r-lg);overflow:hidden;color:#F0EDF5}
.trail .tbar{font-family:var(--mono);font-size:.78rem;color:#A89CC4;padding:.65rem 1rem;border-bottom:1px solid #2D2540}
.trail ol{list-style:none;padding:.4rem 0}
.trail li{display:grid;grid-template-columns:56px 1fr;gap:.6rem;padding:.45rem 1rem;font-size:.92rem;line-height:1.45}
.trail time{font-family:var(--mono);font-size:.8rem;color:#D4A855;padding-top:.1rem}
.bento.g2{grid-template-columns:repeat(3,1fr)}
.tile .ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--primary-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.tile .ico svg{width:26px;height:26px;fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.senses{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.9rem}
.senses li{background:var(--primary-subtle);border-radius:var(--r-md);padding:.7rem .8rem;font-size:.88rem;color:var(--ink-2)}
.senses b{display:block;color:var(--ink);font-weight:600;margin-bottom:.2rem}
@media (max-width:560px){.senses{grid-template-columns:1fr}.night .stats.big3{grid-template-columns:1fr 1fr 1fr}.big3 span{font-size:.72rem}}
@media (max-width:900px){.bento.g2{grid-template-columns:1fr 1fr}}@media (max-width:560px){.bento.g2{grid-template-columns:1fr}.bento.g2 .t-wide{grid-column:auto}}
/* ===== seq 53 home: full-width H1, row of five, five demo shapes ===== */
.hx{padding:40px 0 28px}
.hx h1{font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:none;text-wrap:balance;letter-spacing:-.025em}
.hx-cols{display:grid;grid-template-columns:460px 1fr;gap:2.5rem;align-items:start;margin-top:1.75rem}
.hx .lead{font-size:1.15rem;color:var(--ink-2);margin:0 0 1.4rem}
.hx .note{margin-top:.8rem}
.hx .night canvas{height:430px}
.zones-cap{font-family:var(--mono);font-size:.75rem;color:#A89CC4;padding:0 18px 14px}
@media (max-width:900px){.hx-cols{grid-template-columns:1fr;gap:1.5rem}.hx .night canvas{height:340px}}
.five{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:32px}
.five .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.five a{display:block;padding:1.3rem 1rem 1.4rem;text-decoration:none;color:var(--ink);border-left:1px solid var(--border)}
.five a:first-child{border-left:0;padding-left:0}
.five a:hover b{color:var(--primary-dark)}
.five b{display:block;font-size:.875rem;font-weight:600;letter-spacing:.04em;color:var(--primary);margin-bottom:.35rem}
.five span{display:block;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
@media (max-width:900px){.five .wrap{grid-template-columns:1fr}.five a{border-left:0;border-top:1px solid var(--border);padding:1rem 0}.five a:first-child{border-top:0}}
.demo{padding:72px 0}
.demo + .demo,.five + .demo{margin-top:56px}
.demo h2{max-width:28ch;font-size:clamp(1.6rem,3.6vw,2.3rem)}
.dlead{max-width:62ch;font-size:1.075rem;color:var(--ink-2);margin:.2rem 0 1.75rem}
.cap{font-size:.85rem;color:var(--ink-2);margin-top:1rem;max-width:72ch}
.cap.wide{max-width:none}
/* 1 shared: three equal panels */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tri .win .body{min-height:220px}
@media (max-width:900px){.tri{grid-template-columns:1fr}.tri .win .body{min-height:0}}
/* 2 talk: dark full-bleed band, thread full width */
.demo.bleed{background:#0F0B1A;color:#F0EDF5;padding:88px 0}
.demo.bleed h2{color:#F0EDF5;max-width:30ch}
.demo.bleed .dlead{color:#C9C1DC}
.demo.bleed figure.ill{max-width:none}
.demo.bleed figcaption{color:#A89CC4}
.demo.bleed .nightwin .post{font-size:1.02rem;padding:1rem 1.25rem}
/* 3 private: one big object */
#private .win.file,#privada .win.file{max-width:1080px}
/* 4 self: timeline of four */
.tl{list-style:none;counter-reset:t;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:1.5rem 0 0;position:relative}
.tl li{counter-increment:t;padding:0 1.2rem 0 0;position:relative}
.tl li::before{content:counter(t);display:flex;width:36px;height:36px;border-radius:var(--r-pill);background:var(--primary);color:#FFFFFF;font-family:var(--mono);font-weight:600;align-items:center;justify-content:center;margin-bottom:.9rem;position:relative;z-index:1}
@media (prefers-color-scheme:dark){.tl li::before{color:#0F0B1A}}
.tl li::after{content:"";position:absolute;top:18px;left:36px;right:0;height:2px;background:var(--border)}
.tl li:last-child::after{display:none}
.tl b{display:block;font-weight:600;margin-bottom:.3rem}
.tl span{display:block;font-size:.93rem;color:var(--ink-2)}
@media (max-width:760px){.tl{grid-template-columns:1fr;gap:1.25rem}.tl li::after{display:none}}
#self .trail,#se-cuida .trail{margin-top:2rem;max-width:720px}
/* 5 trace: one card under the loupe, centred */
.loupe{display:flex;justify-content:center;margin-top:1rem}
.lcard{width:100%;max-width:560px;background:var(--surface);border:2px solid var(--primary);border-radius:var(--r-xl);padding:1.6rem 1.8rem}
.lfact{font-size:1.35rem;font-weight:600;margin:0 0 1.1rem}
.lcard dl div{display:grid;grid-template-columns:150px 1fr;gap:.8rem;padding:.5rem 0;border-top:1px solid var(--border);font-size:.95rem}
.lcard dt{color:var(--ink-2)}
.ldo{margin-top:1rem}
#trace .cap,#trazable .cap{text-align:center;margin-left:auto;margin-right:auto}
@media (max-width:480px){.lcard dl div{grid-template-columns:1fr;gap:.1rem}}
/* drawer */
.drawer{padding:56px 0}
.short{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2rem;margin-top:1rem}
.short li{font-size:.98rem;color:var(--ink-2);padding-top:.8rem;border-top:1px solid var(--border)}
.short b{color:var(--ink)}
@media (max-width:760px){.short{grid-template-columns:1fr}}
.nf{margin:.6rem 0 1rem 1.2rem}.nf li+li{margin-top:.3rem}

/* seq 53 real captures */
figure.shot{margin:0}
figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--line,#e5e5e5);border-radius:12px;background:#fff}
figure.shot figcaption{font-size:.8rem;color:var(--ink-2);margin-top:.5rem}
.tri.real{grid-template-columns:1fr 1.8fr 1fr;align-items:start}
.tri.real .shotwin{padding:0;overflow:hidden}
.tri.real .shotwin img{display:block;width:100%;height:auto;background:#fff}
@media (max-width:900px){.tri.real{grid-template-columns:1fr}}

/* seq 57 fixes */
figure.ill.night figcaption.zones-cap{color:#D6CCEB;font-size:.8rem;margin-top:0}
@media (min-width:901px){.tri.real{grid-template-columns:1fr 1.35fr 1fr}}
.shotlink{display:block;margin-top:.9rem;border:1px solid var(--line,#e5e5e5);border-radius:8px;overflow:hidden;background:#fff}
.shotlink img{display:block;width:100%;height:auto}
.shotnote{font-size:.78rem;color:var(--ink-2);margin:.4rem 0 0}

/* seq 57 menor: bloque final alineado a x=100 como el resto */
.endcta .wrap{max-width:1120px}
.endcta .wrap>*{max-width:65ch}


/* 12-oct · sprint seq 80-81: contact line, connector strip (illustration), privacy, cookie notice, honeypot */
.ftr .biz{max-width:46ch;margin-top:.6rem}
.ftr .biz a{color:inherit}
.biz-end{margin:2.5rem 0 1rem;color:var(--ink-2);font-size:.95rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl .fine{font-size:.8rem;margin-top:.4rem}
.tools{margin-top:2rem}
.tools ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.tools li{display:flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.4rem .8rem .4rem .6rem;font-size:.85rem;color:var(--ink)}
.tools svg{width:16px;height:16px;flex:none;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tools .cap{margin-top:.6rem}
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:.6rem .9rem;box-shadow:0 4px 18px rgba(26,21,37,.10);font-size:.85rem;color:var(--ink-2)}
.ck[hidden]{display:none}
.ck p{margin:0;flex:1 1 260px}.ck a{color:var(--ink)}
.ck-b{display:flex;gap:.5rem}.ck .btn{min-height:40px;min-width:96px}
.legal h2{margin-top:2rem}.legal td,.legal th{padding:.35rem .6rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
/* --- 12-oct · ronda móvil (seq 87-89): plegado solo en móvil; escritorio igual --- */
details.mf>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem .9rem;margin-top:1rem;border:1px solid var(--border);border-radius:var(--r-lg,12px);background:var(--surface);color:var(--primary);font-weight:600;font-size:.95rem;line-height:1.35}
details.mf>summary::-webkit-details-marker{display:none}
details.mf>summary::before{content:"+";font-family:var(--mono);font-size:1.1rem;line-height:1;width:1rem;flex:none}
details.mf[open]>summary::before{content:"–"}
details.mf[open]>summary{margin-bottom:.6rem}
.pk-btn{display:none}
@media (min-width:901px){
  details.mf>summary{display:none}
  details.mf::details-content{content-visibility:visible;block-size:auto}
}
@media (max-width:900px){
  /* fila de 5: palabras en dos columnas */
  .five .wrap{grid-template-columns:1fr 1fr;gap:0 1rem}
  .five a{padding:.75rem 0;border-top:1px solid var(--border)}
  .five a:nth-child(-n+2){border-top:0}
  .five b{margin:0;font-size:.82rem}
  /* recorte de la prueba: visible, cortado ~200 px */
  :root.js .peek{max-height:var(--pk,210px);overflow:hidden;position:relative}
  :root.js .peek::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,var(--pk-fade,var(--bg)));pointer-events:none}
  :root.js .peek.open,:root.js .demo:has(details.mf[open]) .peek{max-height:none}
  :root.js .peek.open::after,:root.js .demo:has(details.mf[open]) .peek::after{display:none}
  .thread.peek,.trail.peek{--pk-fade:#0F0B1A}
  .loupe.peek{--pk:230px}
  #pk-tri{--pk:330px}
  .tri.real .win:nth-child(2){order:-1}
  :root.js .pk-btn{display:inline-flex;align-items:center;min-height:44px;margin-top:.5rem;padding:.4rem 0;background:none;border:0;color:var(--primary);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .pk-btn[aria-expanded="true"]{display:none!important}
  #se-cuida .tl{gap:.6rem}
  .part{padding:.8rem 0}
  /* Resultados: filas apiladas */
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr:first-child{display:flex;flex-wrap:wrap;gap:0 .8rem;padding:.2rem 0 .4rem;border-top:0}
  table.stack th{display:inline;padding:0;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
  table.stack tr{padding:.75rem 0;border-top:1px solid var(--border)}
  table.stack td{border:0;padding:.1rem 0}
  table.stack td:first-child{font-weight:600}
  table.stack td.num{font-size:1.35rem;text-align:left}
  table.stack td:last-child{font-size:.88rem;color:var(--ink-2)}
  .table-wrap:has(table.stack){overflow:visible}
}
@media (max-width:760px){
  #se-cuida .tl li,.tl li{display:grid;grid-template-columns:30px 1fr;column-gap:.75rem;padding:0}
  .tl li::before{grid-row:1/span 2;width:30px;height:30px;margin:0;font-size:.85rem}
  .tl li>b,.tl li>span{grid-column:2}
}
@media (max-width:900px){
  .demo{padding:36px 0}
  .demo + .demo,.five + .demo{margin-top:0}
  .endcta{padding:44px 0}
  .scene.notfor{padding:36px 0}
  .demo .dlead{margin-bottom:1rem}
}
@media (max-width:480px){.hx .night canvas{height:290px}}
@media (max-width:900px){
  .demo.bleed{padding:44px 0}
  .demo.bleed .pk-btn,.demo.bleed .who-link a{color:#D6CCEB}
  #pk-tri{--pk:360px}
  .thread.peek,.trail.peek{--pk:190px}
  .pk-btn{margin-top:.15rem}
}
@media (min-width:901px){details.mf>p.cap:first-of-type{margin-top:.35rem}}
@media (max-width:900px){
  .scene.notfor{padding:24px 0}
  .scene.notfor h2{margin-bottom:.4rem}
  .scene.notfor .nf{margin:.3rem 0 0}
  .scene.notfor .nf li{line-height:1.45;margin:.15rem 0}
  .scene.notfor details.mf>summary{margin-top:.7rem}
  .endcta{padding:28px 0 32px}
  .endcta h2{margin-bottom:.2rem}
  .endcta form.wl{margin-top:.8rem}
  .wl .fine{margin-top:.5rem}
}
@media (max-width:900px){
  .wl .msg:empty{margin:0;height:0;overflow:hidden}
  .endcta{padding:22px 0 26px}
  .endcta .wrap>p{margin:.2rem 0 0}
}
@media (max-width:900px){.scene.notfor{padding:18px 0}}
.who-link{margin-top:.6rem}
/* 12-oct · seq 94: contraste del enlace al autor en la banda oscura (todas las anchuras), zonas táctiles, barra fija móvil */
.demo.bleed .who-link a{color:#D6CCEB}
.who-link a{display:inline-flex;align-items:center;min-height:44px}
#trazable .cap a,#trace .cap a,.wl .fine a{display:inline-block;padding:14px 0;margin:-14px 0}
.stick{display:none}
@media (max-width:900px){
  .stick{position:fixed;left:0;right:0;bottom:0;z-index:55;height:48px;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:0 .5rem 0 .75rem;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(15,11,26,.08)}
  .stick[hidden]{display:none}
  .stick .btn{min-height:38px;padding:.35rem 1.1rem;font-size:.95rem;flex:1;max-width:340px}
  .stick-x{flex:none;width:44px;height:44px;border:0;background:none;color:var(--ink-2);font-size:1.5rem;line-height:1;cursor:pointer}
}
/* --- 14-oct · Recorrido (/journey/, /es/recorrido/): espina vertical en móvil, horizontal en escritorio --- */
.jy-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.88rem;color:var(--ink-2);margin-top:.6rem}
.jy-legend .k{display:inline-flex;align-items:center;gap:.45rem}
.jy-legend .k::before{content:"";width:11px;height:11px;border-radius:50%;flex:none}
.jy-legend .post::before{background:var(--primary)}
.jy-legend .hito::before{border:2px solid var(--primary);background:var(--bg)}
.jy-wrap{padding-bottom:64px}
.jy-ph h2{font-size:1.15rem;line-height:1.3;margin:.15rem 0 0}
.jy-when{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);margin:0}
.jy-lane h3{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:1rem 0 .4rem;font-weight:600}
.jy-lane ol{list-style:none;margin:0;padding:0}
.jy-n{position:relative;padding:.45rem 0 .45rem 1.1rem;font-size:.93rem;line-height:1.4}
.jy-n::before{content:"";position:absolute;left:0;top:.95rem;width:9px;height:9px;border-radius:50%}
.jy-n.post::before{background:var(--primary)}
.jy-n.hito::before{border:2px solid var(--primary);background:var(--bg);width:9px;height:9px;box-sizing:border-box}
.jy-n time{display:block;font-family:var(--mono);font-size:.75rem;color:var(--ink-2)}
.jy-n.post a{display:block;color:var(--ink);text-decoration:none;min-height:44px}
.jy-n.post a span[lang]{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.jy-n.post a:hover span[lang]{color:var(--primary-dark);text-decoration-color:currentColor}
.jy-n.hito span{color:var(--ink-2)}
.jy-tag{display:inline-block;margin-left:.35rem;padding:0 .45rem;border:1px solid var(--border);border-radius:var(--r-pill);font-size:.72rem;color:var(--ink-2);white-space:nowrap}
.jy-next p{color:var(--ink-2);margin:.8rem 0 1rem}
/* móvil: espina vertical */
@media (max-width:900px){
  .jy-track{border-left:2px solid var(--border);margin-left:6px;padding-left:20px}
  .jy-ph{position:relative;padding:0 0 28px}
  .jy-ph::before{content:"";position:absolute;left:-28px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--bg)}
  .jy-lane.empty{display:none}
}
/* escritorio: espina horizontal, una columna por fase, carriles alineados */
@media (min-width:901px){
  .jy-wrap{max-width:none;padding-left:max(20px,calc((100vw - 1120px)/2 + 20px));padding-right:0}
  .jy-track{display:grid;grid-auto-flow:column;grid-auto-columns:260px;grid-template-rows:auto auto auto;column-gap:28px;overflow-x:auto;padding:0 40px 16px 0;scroll-snap-type:x proximity}
  .jy-ph{grid-row:span 3;display:grid;grid-template-rows:subgrid;scroll-snap-align:start}
  .jy-h{position:relative;padding-top:26px;border-top:2px solid var(--border)}
  .jy-h::before{content:"";position:absolute;left:0;top:-8px;width:14px;height:14px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--bg)}
  .jy-ph.next .jy-next{grid-row:span 2}
}
@media (min-width:901px){.jy-hero .wrap.prose{max-width:1120px}.jy-hero .wrap.prose>*{max-width:62ch}}
/* 14-oct · seq 100: hitos resumidos en una línea; señal de «sigue a la derecha» en la vía de escritorio */
.jy-n.sum::before{border:2px dashed var(--primary);background:var(--bg);width:11px;height:11px;box-sizing:border-box;top:.9rem;left:-1px}
.jy-n.sum span:not(.jy-d){color:var(--ink-2);font-style:italic}
.jy-nav{display:none}
@media (min-width:901px){
  .jy-shell{position:relative}
  .jy-shell::after{content:"";position:absolute;top:0;right:0;bottom:16px;width:96px;pointer-events:none;background:linear-gradient(to right,transparent,var(--bg));transition:opacity .2s}
  .jy-shell.at-end::after{opacity:0}
  .jy-nav{display:flex;gap:.5rem;justify-content:flex-end;padding-right:max(20px,calc((100vw - 1120px)/2 + 20px));margin:0 0 14px}
  .jy-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--primary);font-size:1.15rem;cursor:pointer}
  .jy-nav button:disabled{opacity:.35;cursor:default}
  .jy-nav button:not(:disabled):hover{border-color:var(--primary)}
}
.jy-n .jy-d{display:block;font-family:var(--mono);font-size:.75rem;color:var(--ink-2);font-style:normal}
/* ===== 14-oct · portada v2 (seq 108): héroe animado, índice, díptico ===== */



















/* índice: los cinco problemas */









/* cada problema */




































/* control seq 108: viudas, 768, zonas táctiles de la cabecera */


@media (min-width:761px){.hdr .menu a,.hdr .lang a{display:inline-flex;align-items:center;min-height:44px}}
.hdr .logo{display:inline-flex;align-items:center;min-height:44px}.burger{min-height:44px;min-width:44px}
/* seq 110: silueta de marca en el héroe; email que no se sale con el texto al 200 % */


.wl input[type=email]{width:100%;min-width:0;box-sizing:border-box}
.wl .row>*{min-width:0}

.ck-b{flex-wrap:wrap}

/* ===== 14-oct · motion (Javier: «algo chulo», engagement). build-an-animation: propósito = explicación; transform/opacity; reducido = sin movimiento ===== */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1)}


/* demo: díselo a una IA, pregúntaselo a otra */

























/* 14-oct · Javier: «los ejemplos se tienen que entender súper bien». Texto legible dentro del dibujo */










/* seq 114: el héroe da 3 vueltas y para (vuelve a empezar al reentrar); textos ≥12 px reales; díptico 04 legible */





/* seq 121: logos reales en el héroe (sin recolorear; el de OpenAI va en el color del texto, como su versión clara/oscura) */




/* ===== Sistema v4 (16-oct-2026) · agent-eidara-web =====
   Forma de la portada: 19 Mapa/diagrama (héroe en capas) + piezas + 21 Playground (problemas típicos).
   Cómo funciona: 15 Split por pieza. Interiores: banda oscura + su forma propia. Posts: 02 Documento largo (sin tocar).
   Skills aplicadas: design-a-page-from-scratch (+ type-and-colour, motion, before-you-ship), govern-a-design-system,
   build-an-animation, design-for-a-narrow-screen, review-page-accessibility, interface-copy, tell-if-a-page-looks-ai-made,
   see-a-page-as-it-really-renders, critique-a-screen.
   Reglas del sistema: ningún color, tamaño de letra ni radio en crudo fuera de este bloque de tokens.
   (Los font-size en px de las reglas .st-* son unidades internas del SVG, no tamaños de página.)
   Un solo acento (dorado = acción y dato en movimiento). Una sola familia de esquinas: suaves.
   Puntuación propia antes de entregar: específica 4 · jerarquía 4 · contención 4 · acabado 4 */
:root{
  /* escenario oscuro (héroe y cabeceras) */
  --stage:#1C1630; --stage-2:#251E3D; --stage-line:#3A3060; --stage-ink:#F2EFF9; --stage-soft:#CFC6E6; --stage-mute:#B9AEDB;
  --stage-chip:#2E2650; --stage-chip-line:#4B3F72; --stage-chip-hot:#3B2F63;
  /* núcleo DARA */
  --on-stage:#FFFFFF;           /* texto sobre el escenario oscuro y sobre el núcleo */
  --core:#5B4A8A; --core-line:#A78BFA; --on-core:#EDE9FE; --on-core-2:#E4DCFA;
  /* señales */
  --signal:#A78BFA;               /* viñetas y estados encendidos: lila, no el acento */
  --ok:#1F7A4D;
  /* tipografía: 6 escalones (~1.25×) */
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-md:1.0625rem; --fs-lg:1.3125rem;
  --fs-xl:clamp(1.8rem,3.4vw,2.4rem); --fs-2xl:clamp(2.1rem,4.6vw,3.1rem);
  /* esquinas: una familia suave */
  --r-2xl:20px;
  /* ritmo: más espacio entre secciones que dentro, y no siempre el mismo */
  --sec-s:clamp(44px,6vw,64px); --sec-m:clamp(56px,8vw,88px); --sec-l:clamp(64px,10vw,112px);
  /* sombras teñidas del tono de la marca */
  --shadow-1:0 10px 30px rgba(28,22,48,.08); --shadow-2:0 18px 40px rgba(28,22,48,.12); --shadow-tile:0 6px 12px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){:root{--ok:#4ADE80}}
h1,h2,h3,.pc-w,.def,.dm-cap{text-wrap:balance}
p,li{text-wrap:pretty}

/* ---------- héroe ---------- */
.v3-hero{background:var(--stage);color:var(--stage-ink);padding:40px 0 var(--sec-s);overflow:hidden}
.v3-ht{max-width:760px}
.v3-hero h1{color:var(--on-stage);font-size:var(--fs-2xl);line-height:1.08;letter-spacing:-.025em;font-weight:600}
.v3-hero .lead{color:var(--stage-soft);font-size:var(--fs-lg);line-height:1.5;margin:.8rem 0 1.3rem;max-width:56ch}
/* titular y valores arriba (el cuarto superior derecho ya no queda vacío, UX seq 129); el dibujo a todo el ancho debajo */
.v4-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text vals" "dia dia";column-gap:40px}
.v4-grid>.v3-ht{grid-area:text;min-width:0}.v4-grid>.v4-vals{grid-area:vals;align-self:center}.v4-grid>.v4-dia{grid-area:dia}
.v4-dia{min-width:0;padding:0 0 52px;margin-top:36px;position:relative}
.st{display:block;width:100%;height:auto}
.st-m{display:none}
.st-col{fill:var(--stage-2);stroke:var(--stage-line);stroke-width:1.2}
.st-ct{font-family:var(--font);font-size:17px;font-weight:600;fill:var(--stage-mute)}
.st-m .st-ct{font-size:15px}
.st-pil{stroke:var(--stage-line);stroke-width:2;stroke-dasharray:3 5}
.st-ai rect{fill:var(--stage-chip);stroke:var(--stage-chip-line);stroke-width:1.5;transition:fill .25s var(--ease-out),stroke .25s var(--ease-out)}
.st-ai text{font-family:var(--font);font-weight:600;fill:var(--on-stage)}
.st-ai.hot rect{fill:var(--stage-chip-hot);stroke:var(--signal)}
.lg-open,.ic-open{color:var(--signal)}
.st-ai g.lg path:not([fill]){fill:var(--on-stage)}
.st-f rect{fill:var(--on-stage);filter:drop-shadow(var(--shadow-tile))}
.st-p rect{fill:var(--stage-chip);stroke:var(--stage-chip-line);stroke-width:1.2;transition:stroke .25s var(--ease-out)}
.st-p text{font-family:var(--font);font-weight:600;fill:var(--on-core)}
.st-fold path{fill:var(--signal)}
.st-p.hot rect{stroke:var(--signal)}
.st-b{fill:var(--core);stroke:var(--core-line);stroke-width:1.5}
.st-bring{fill:none;stroke:var(--signal);stroke-width:3;opacity:0}
.st-bring.hit{animation:st-ring .7s var(--ease-out)}
@keyframes st-ring{0%{opacity:.9}100%{opacity:0}}
.st-bgl{fill:var(--on-core)}
.st-bn{font-family:var(--font);font-weight:700;font-size:34px;letter-spacing:.14em;fill:var(--on-stage)}
.st-m .st-bn{font-size:26px}
.st-bs{font-family:var(--font);font-size:16px;fill:var(--on-core-2)}
.st-m .st-bs{font-size:13.5px}
.st-pc rect{fill:var(--stage-chip);stroke:var(--core-line);stroke-width:1}
.st-pc text{font-family:var(--font);font-weight:600;font-size:13px;fill:var(--on-stage)}
.st-m .st-pc text{font-size:12px}
.pk{fill:var(--accent);opacity:.6}            /* el dato en movimiento: único dorado del dibujo */
.st-pp{position:absolute;right:0;bottom:0;font:inherit;font-size:var(--fs-xs);min-height:44px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--stage-line);background:var(--stage-2);color:var(--stage-soft);cursor:pointer}
.st-pp:hover{color:var(--on-stage)}
.v4-vals{border-left:1px solid var(--stage-line);padding:6px 0 6px 28px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.v4-vh{margin:0 0 14px;color:var(--stage-mute);font-size:var(--fs-sm);font-weight:600}
.v4-vals ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.v4-vals li{display:flex;align-items:center;gap:12px;white-space:nowrap;min-width:0;font-weight:700;font-size:var(--fs-md);letter-spacing:.06em;text-transform:uppercase;color:var(--on-stage);line-height:1.25}
.v4-vals li::before{content:"";flex:none;width:18px;height:3px;border-radius:var(--r-sm);background:var(--signal)}
@media (prefers-reduced-motion:no-preference){
  :root.js .v4-vals li{opacity:0;transform:translateX(8px);animation:v4-in .45s var(--ease-out) forwards;animation-delay:calc(300ms + var(--i) * 70ms)}
}
@keyframes v4-in{to{opacity:1;transform:none}}
@media (max-width:900px){
  .v4-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "dia" "vals"}
  .v4-dia{margin-top:28px}
  .v4-vals{border-left:0;border-top:1px solid var(--stage-line);padding:22px 0 0;margin-top:8px;align-self:stretch}
  .v4-vals ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .v4-vals li{font-size:var(--fs-xs);letter-spacing:.03em;gap:9px}
  .v4-vals li::before{width:12px}
}
@media (max-width:520px){.v4-vals ul{grid-template-columns:minmax(0,1fr);gap:10px}}  /* cada valor en una línea (Javier 17-oct) */
@media (max-width:640px){.st-d{display:none}.st-m{display:block;max-width:440px;margin:0 auto}.v3-hero{padding:32px 0 var(--sec-s)}}

/* ---------- submarcas DARA ---------- */
.sbm{display:inline-flex;align-items:center;gap:10px;line-height:1}
.sbm .sm{width:40px;height:40px;flex:none}
.sbm-w{font-size:var(--fs-lg);letter-spacing:-.01em;color:var(--ink)}
.sbm-w b{font-weight:700}.sbm-w span{color:var(--t);font-weight:600}
.sbm-sm{gap:7px}.sbm-sm .sm{width:22px;height:22px}.sbm-sm .sbm-w{font-size:var(--fs-sm);white-space:nowrap}
@media (prefers-color-scheme:dark){.sbm-w span{color:var(--td)}}

/* ---------- piezas ---------- */
.v4-pieces{padding:var(--sec-l) 0 var(--sec-m);background:var(--bg)}
.v4-pieces h2,.v4-oye h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.1;margin:0}
.v4-lead{color:var(--ink-2);font-size:var(--fs-md);margin:.6rem 0 28px}
.tc-only{display:none}
@media (hover:none),(max-width:760px){.hv-only{display:none}.tc-only{display:inline}}
.pc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pc{height:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px 18px;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out)}
.pc p{margin:0}
.pc .sbm{flex-direction:column;align-items:flex-start;gap:12px}
.pc .sbm .sm{width:52px;height:52px}
.pc .sbm-w{font-size:var(--fs-md)}
.pc-w{margin-top:16px!important;font-weight:700;font-size:var(--fs-md)}
.pc-x{margin-top:8px!important;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.45}
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .pc:hover,.pc:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--primary)}
}
/* tablet: dos columnas; móvil: una fila por pieza, glifo a la izquierda (21-oct: la tira deslizable se veía rota) */
@media (max-width:1000px){.pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .pc-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .pc{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px}
  .pc .sbm{display:contents}
  .pc .sbm .sm{grid-column:1;grid-row:1/span 3;width:44px;height:44px}
  .pc .sbm-w,.pc .pc-w,.pc .pc-x{grid-column:2}
  .pc-w{margin-top:4px!important}
}

/* ---------- problemas típicos: «Oye, …» ---------- */
.v4-oye{padding:var(--sec-m) 0 var(--sec-l);background:var(--surface);border-top:1px solid var(--border)}
.oy-win{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-2);overflow:hidden;min-height:340px}
.oy-h{display:flex;align-items:center;gap:8px;margin:0;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface);font-weight:600}
.oy-b{padding:20px;display:flex;flex-direction:column;gap:12px}
.m{margin:0;padding:12px 16px;border-radius:var(--r-xl);font-size:var(--fs-md);line-height:1.5;max-width:88%}
.m b{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:2px}
.m.you{align-self:flex-end;background:var(--primary-subtle)}
.m.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--border);min-width:120px}
.dots{display:none;gap:4px;padding:6px 0}.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);opacity:.5}
.oy-win.typing .dots{display:inline-flex}.oy-win.typing .oy-ta{display:none}
@media (prefers-reduced-motion:no-preference){.dots i{animation:dot 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}}
@keyframes dot{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.oy-tag{margin:2px 0 0;display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--ink-2)}
.vt{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-size:var(--fs-xs)}
.vt::before{content:"";width:16px;height:3px;border-radius:var(--r-sm);background:var(--primary)}
.oy-win .m,.oy-tag{transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.oy-win.pre .m,.oy-win.pre .oy-tag{opacity:0;transform:translateY(6px)}
.oy-win.pre.q1 .m.you{opacity:1;transform:none}
.oy-win.pre.a1 .m.ai,.oy-win.pre.a1 .oy-tag{opacity:1;transform:none}
.oy-win.pre.typing .m.ai{opacity:1;transform:none}
.ic{flex:none;display:inline-block;vertical-align:middle}
.ic-chatgpt path:not([fill]){fill:var(--ink)}
@media (max-width:860px){
  .m{max-width:94%}
}
@media (prefers-color-scheme:dark){.oy-win{background:var(--bg)}}

/* ---------- páginas interiores: la misma banda oscura ---------- */
.pg-hero{background:var(--stage);color:var(--stage-ink);padding:56px 0 52px}
.pg-hero h1{color:var(--on-stage);font-size:var(--fs-2xl);line-height:1.08;letter-spacing:-.025em;max-width:22ch;margin:0}
.pg-hero .lead{color:var(--stage-soft);font-size:var(--fs-lg);line-height:1.5;max-width:58ch;margin:.9rem 0 0}
.pg-hero + .hero,.pg-hero + section.hero{padding-top:36px}
@media (max-width:640px){.pg-hero{padding:36px 0 32px}}

/* ---------- Cómo funciona ---------- */
.how-dia{background:var(--stage);padding:0 0 var(--sec-s)}
.how-dia .v4-dia{padding:0;max-width:980px;margin:0 auto}
.how-nav{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--border)}
.how-nav .wrap{display:flex;gap:6px 22px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.how-nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.how-nav a:hover .sbm-w b{text-decoration:underline}
.how-def{padding:var(--sec-m) 0 8px}
.how-def .def{font-size:var(--fs-lg);line-height:1.4;font-weight:600;max-width:40ch;letter-spacing:-.01em;margin:0}
.how-pc{padding:var(--sec-s) 0;scroll-margin-top:72px}
.how-pc:first-of-type{padding-top:var(--sec-m)}
.how-pc.alt{background:var(--surface)}
.how-g{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start}
.how-mk{display:flex;justify-content:center;padding-top:6px}
.how-mk .sm{width:140px;height:140px}
.how-tx{max-width:62ch}
.how-tx h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.1;margin:.9rem 0 1rem}
.how-tx p{color:var(--ink);font-size:var(--fs-md);margin:0 0 .8rem}
.how-tx .plain{color:var(--ink-2);border-left:3px solid var(--primary);padding-left:12px}
.how-tx .met{color:var(--ink-2);font-size:var(--fs-sm)}
.how-under{padding:var(--sec-l) 0;background:var(--stage);color:var(--stage-ink)}
.how-under h2{color:var(--on-stage);font-size:var(--fs-xl);margin:0 0 28px;letter-spacing:-.02em}
.und-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.und{background:var(--stage-2);border:1px solid var(--stage-line);border-radius:var(--r-2xl);padding:22px 24px}
.und h3{color:var(--on-stage);font-size:var(--fs-lg);margin:0 0 .5rem}
.und p{color:var(--on-core-2);margin:0;font-size:var(--fs-md);line-height:1.55}
.how-end{padding:var(--sec-m) 0 var(--sec-l)}
.how-end-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.how-end h2{font-size:var(--fs-lg);margin:0 0 .6rem}
.how-end p{color:var(--ink-2);margin:0}
@media (max-width:860px){
  .how-g{grid-template-columns:minmax(0,1fr);gap:16px}
  .how-mk{display:none}
  .und-g,.how-end-g{grid-template-columns:minmax(0,1fr)}
  .how-nav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}

/* ---------- texto al 200 %: nada se sale de la pantalla ---------- */
.sbm-w{white-space:normal}
.numled *,.res-open *{min-width:0}.numled>div,.numled .row>*{min-width:0;overflow-wrap:anywhere}
.numled .num{overflow-wrap:anywhere}
.prose table,.longdoc table,.longdoc-w table,.wp table{display:block;max-width:100%;overflow-x:auto}
.cards>*,.grid>*,.postlist>*,.related>*,.keep>*{min-width:0}
.card{min-width:0;overflow-wrap:anywhere}
.pc-w,.how-tx h2,.prop-t{overflow-wrap:anywhere;hyphens:auto}
/* misma escala en todas las secciones de la portada (antes: 26 y 32 px sueltos) */
.scene.notfor h2,.notfor h2,.endcta h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.1}
.scene.notfor{padding:var(--sec-m) 0 var(--sec-s)}.endcta{padding:var(--sec-l) 0}
.wl-inside{padding:var(--sec-s) 0 var(--sec-m);border-top:1px solid var(--border)}
.wl-inside h2{font-size:var(--fs-lg);margin:0 0 .4rem}
.wl-inside p{color:var(--ink-2);margin:0 0 18px}
.wl-pcs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.wl-pcs a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center}

.card h2.h3{font-size:var(--fs-lg);margin:0 0 .4rem}
/* cabecera: con el texto grande, el menú baja de línea en vez de salirse (UX seq 129, 768 px al 200 %) */
.hdr .wrap{flex-wrap:wrap;row-gap:6px}
.hdr .menu{flex-wrap:wrap;justify-content:flex-end;row-gap:4px;min-width:0}
.hdr .menu>*{min-width:0}

/* Skills y Enablers en pareja, por oficios (seq 133) */
.pr{margin-top:var(--sec-s)}
.pr h3{font-size:var(--fs-lg);margin:0 0 .3rem;letter-spacing:-.01em}
.pr-l{color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.pr-t{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);overflow:hidden}
.pr-h,.pr-r{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px 22px;align-items:start}
.pr-h{background:var(--bg);border-bottom:1px solid var(--border);align-items:center}
.pr-r+.pr-r{border-top:1px solid var(--border)}
.pr-r b{font-size:var(--fs-md)}
.pr-r p{margin:0;color:var(--ink);font-size:var(--fs-sm);line-height:1.5}
.how-pair{padding:0 0 var(--sec-m)}
.how-pair .pr{margin-top:0}
@media (max-width:760px){
  .pr-h{display:none}
  .pr-r{grid-template-columns:minmax(0,1fr);gap:8px}
  .pr-r p::before{content:attr(data-l);display:block;font-size:var(--fs-xs);font-weight:700;color:#8D6C29;margin-bottom:2px}
  .pr-r p:last-child::before{color:#1E7F5F}
}

@media (max-width:760px) and (prefers-color-scheme:dark){.pr-r p::before{color:#E3B85C}.pr-r p:last-child::before{color:#3FC497}}

/* ===== problemas típicos como escenas (17-oct, 2.ª vuelta): mismo lenguaje que el héroe ===== */
.px-s{background:var(--stage);color:var(--stage-ink);border-top:0;padding:var(--sec-m) 0 var(--sec-l)}
.px-s h2{color:var(--on-stage);margin-bottom:var(--sec-s)}
.px-i+.px-i{margin-top:72px}
.px-t .pb-n{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--signal);letter-spacing:.08em;margin-bottom:8px}
.px-t h3{margin:0;color:var(--on-stage);font-size:clamp(28px,4.2vw,46px);line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;font-weight:800;text-wrap:balance}
.px-t p{margin:12px 0 0;font-size:var(--fs-lg);color:var(--stage-soft);text-wrap:pretty;max-width:34ch}
.sc{--u:max(1cqw,4.4px);--ar:.625;margin-top:22px;background:var(--stage-2);border:1px solid var(--stage-line);border-radius:var(--r-2xl);padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.sc-q{margin:0 0 0 auto;width:fit-content;max-width:88%;background:var(--core);color:var(--on-stage);border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:var(--fs-sm);line-height:1.45}
.sc-q b{display:block;font-size:var(--fs-xs);color:var(--on-core-2);font-weight:600}
.sc-a{margin:0;color:var(--stage-soft);font-size:var(--fs-sm);line-height:1.5}
.sc-a b{color:var(--on-stage);margin:0 4px 0 6px}
.sc-a .sc-ic{vertical-align:-3px}
.sc .ic-chatgpt path:not([fill]){fill:#fff}
.sc-v{position:relative;container-type:inline-size;aspect-ratio:1/var(--ar);margin:16px 0;border-radius:16px;background:radial-gradient(120% 80% at 50% 0%,#2C2350 0%,var(--stage) 70%);overflow:hidden}
.sc-v>*{position:absolute}
.sc-v b,.sc-v small,.sc-v li,.sc-v span{line-height:1.25}
/* piezas comunes */
.sc-ch{display:flex;align-items:center;justify-content:center;gap:calc(1.6*var(--u));height:12%;padding:0 calc(2.4*var(--u));border-radius:999px;background:var(--stage-chip);border:1px solid var(--stage-chip-line);color:#fff;font-size:calc(2.6*var(--u))}
.sc-ch b{font-weight:600}
.sc-v .sc-ic{width:calc(3.6*var(--u));height:calc(3.6*var(--u));flex:none}
.sc-dara{left:4%;right:4%;bottom:5%;height:19%;display:flex;align-items:center;gap:calc(2*var(--u));padding:0 calc(3*var(--u));background:var(--core);border:1.5px solid var(--core-line);border-radius:calc(3*var(--u));color:#fff}
.sc-dara>b{font-size:calc(3.8*var(--u));letter-spacing:.14em;font-weight:700}
.sc-dara .sc-gl{width:calc(5.6*var(--u));height:calc(5.6*var(--u));fill:var(--on-core);flex:none}
.sc-dara::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--signal);opacity:0}
.sc-pc2{margin-left:auto;display:flex;align-items:center;gap:calc(1*var(--u));background:var(--stage-chip);border:1px solid var(--core-line);border-radius:999px;padding:calc(.8*var(--u)) calc(2*var(--u));font-size:calc(2.4*var(--u));letter-spacing:0}
.sc-pc2 svg{width:calc(3.6*var(--u));height:calc(3.6*var(--u))}
.sc-pk{width:calc(2.4*var(--u));height:calc(2.4*var(--u));margin:calc(-1.2*var(--u)) 0 0 calc(-1.2*var(--u));border-radius:50%;background:var(--accent);box-shadow:0 0 calc(2*var(--u)) var(--accent);opacity:0}
.sc-card{display:flex;flex-direction:column;gap:calc(1.4*var(--u));padding:calc(2.6*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line);border-radius:calc(2.4*var(--u));color:#fff;font-size:calc(2.4*var(--u))}
.sc-card>svg{width:calc(4*var(--u));height:calc(4*var(--u))}
.sc-card>b{font-weight:600;font-size:calc(2.6*var(--u))}
.sc-card ul,.sc-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(1.2*var(--u))}
.sc-lb{font-size:calc(2.2*var(--u));font-weight:600}
/* 0 · cambiar de IA sin perder nada */
.sc0 .a1{left:6%;top:9%;width:36%}.sc0 .a2{left:58%;top:9%;width:36%}
.sc-bar{height:2.4%;border-radius:999px;background:var(--stage-chip);overflow:hidden}
.sc-bar i{display:block;height:100%;transform-origin:left}
.b1{left:6%;top:26%;width:36%}.b1 i{background:#F2808A}
.b2{left:58%;top:26%;width:36%}.b2 i{background:#3FC497;transform:scaleX(.35)}
.l1{left:6%;top:31%;color:#F7A7AE}.l2{left:58%;top:31%;color:#7FE0BC}
.k1{left:24%;top:22%}
.sc-ms{display:flex;flex-direction:column;gap:calc(1.1*var(--u))}
.sc-ms i{display:block;height:calc(2.6*var(--u));border-radius:calc(1.3*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line)}
.sc-ms i:nth-child(odd){width:82%;margin-left:auto;background:#3A2F63}.sc-ms i:nth-child(even){width:70%}
.ms1{left:6%;top:38%;width:36%}.ms2{left:58%;top:38%;width:36%}
/* 1 · el oficio por escrito */
.sc1 .c2{left:56%;top:7%;width:38%}
.sk{left:6%;top:7%;width:40%}
.sk i{display:block;height:calc(1.1*var(--u));border-radius:999px;background:var(--stage-line)}.sk i:nth-of-type(2){width:78%}.sk i:nth-of-type(3){width:56%}
.k2{left:46%;top:20%}
.sc-list{left:56%;top:24%;width:40%;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(1.2*var(--u))}
.sc-list li{display:flex;align-items:center;gap:calc(1.4*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line);border-radius:calc(1.6*var(--u));padding:calc(1.1*var(--u)) calc(1.6*var(--u));color:#fff;font-size:calc(2.2*var(--u))}
.sc-list li b{flex:none;display:grid;place-items:center;width:calc(3*var(--u));height:calc(3*var(--u));border-radius:50%;background:var(--accent);color:var(--stage);font-size:calc(1.8*var(--u))}
/* 2 · agente con reglas */
.ag{left:4%;top:6%;width:44%}
.ag li{padding-left:calc(3*var(--u));position:relative;color:var(--stage-ink)}
.ag li::before{content:"✓";position:absolute;left:0;color:#3FC497;font-weight:700}
.ag li.r2{color:var(--accent)}.ag li.r2::before{content:"●";color:var(--accent);font-size:.8em;top:.15em}
.sc-mail{left:52%;top:6%;width:44%;display:flex;flex-direction:column;gap:calc(1*var(--u));padding:calc(2.2*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line);border-radius:calc(2*var(--u));overflow:hidden}
.sc-mail small{font-size:calc(2*var(--u));color:var(--stage-mute)}
.sc-mail u{text-decoration:none;color:#F7A7AE;font-weight:700}
.sc-mail b{font-size:calc(2.4*var(--u));color:#fff;font-weight:600}
.sc-scan{position:absolute;inset:0 auto 0 0;width:30%;background:linear-gradient(90deg,transparent,rgba(167,139,250,.35),transparent);transform:translateX(-110%)}
.tg3{left:52%;top:40%;padding:calc(.8*var(--u)) calc(2*var(--u));border-radius:999px;border:1px solid #F2808A;background:rgba(242,128,138,.12);color:#F7A7AE;font-size:calc(2.2*var(--u));font-weight:600}
.sc-ask{left:52%;top:52%;width:44%;display:flex;flex-direction:column;gap:calc(.6*var(--u));padding:calc(1.6*var(--u)) calc(2.2*var(--u));background:var(--core);border:1px solid var(--core-line);border-radius:calc(1.8*var(--u))}
.sc-ask b{color:#fff;font-size:calc(2.4*var(--u))}.sc-ask small{color:#fff;font-size:max(calc(2.2*var(--u)),11px)}
/* 3 · llaves que nadie ve */
.sc-vault{left:6%;top:8%;width:30%;height:56%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1.6*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line);border-radius:calc(2.4*var(--u));color:#fff;font-size:calc(2.4*var(--u))}
.sc-vault svg{width:calc(12*var(--u));height:calc(12*var(--u))}
.sc-pub{left:48%;top:8%;width:46%;display:flex;flex-direction:column;gap:calc(2*var(--u));padding:calc(2.6*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line);border-radius:calc(2.4*var(--u));color:#fff;font-size:calc(2.6*var(--u))}
.sc-pub>b{font-weight:600}
.sc-field{display:flex;align-items:center;gap:calc(2*var(--u));padding:calc(1.4*var(--u)) calc(2*var(--u));background:var(--stage);border:1px solid var(--stage-line);border-radius:calc(1.2*var(--u));font-size:calc(2.2*var(--u));color:var(--stage-mute)}
.kd{display:flex;gap:calc(.7*var(--u))}.kd i{width:calc(1.4*var(--u));height:calc(1.4*var(--u));border-radius:50%;background:#fff}
.sc-btn{position:relative;display:grid;height:calc(6*var(--u));border-radius:999px;overflow:hidden;font-weight:700;font-size:calc(2.4*var(--u))}
.sc-btn span{grid-area:1/1;display:grid;place-items:center;border-radius:inherit}
.sc-btn .bb0{background:var(--accent);color:var(--stage)}.sc-btn .bb1{background:#3FC497;color:#0D2B20;opacity:0}
.k4{left:37%;top:30%}
/* 4 · las IAs hablan entre ellas */
.th{left:4%;top:4%;width:92%}
.th>b{color:var(--stage-mute);font-size:calc(2.2*var(--u))}
.th li{display:flex;align-items:center;gap:calc(1.4*var(--u));padding:calc(1.1*var(--u)) calc(1.8*var(--u));background:var(--stage);border:1px solid var(--stage-line);border-radius:calc(1.4*var(--u));font-size:calc(2.3*var(--u))}
.th li b{font-weight:600}.th li span{color:var(--stage-ink)}
.th li small{margin-left:auto;color:#7FE0BC;font-size:calc(1.8*var(--u))}.th li small::before{content:"✓ "}
.sc-ok{align-self:flex-end;padding:calc(1*var(--u)) calc(2.4*var(--u));border-radius:999px;background:var(--accent);color:var(--stage);font-weight:700;font-size:calc(2.2*var(--u))}
/* 5 · cada dato con su origen */
.fa{left:6%;top:6%;width:88%;gap:calc(1.8*var(--u))}
.ft{position:relative;width:fit-content;font-size:calc(3*var(--u));font-weight:600}
.ft::after{content:"";position:absolute;left:0;right:0;top:55%;height:calc(.35*var(--u));background:#F2808A;transform:scaleX(0);transform-origin:left}
.pv{display:flex;align-items:center;gap:calc(1.2*var(--u));font-size:calc(2.2*var(--u));color:var(--stage-soft)}
.pv .sc-ic{width:calc(3*var(--u));height:calc(3*var(--u))}
.p3{color:#7FE0BC;font-weight:600}
.sc-undo{align-self:flex-start;padding:calc(1*var(--u)) calc(2.4*var(--u));border-radius:999px;border:1px solid var(--signal);color:var(--signal);font-weight:600;font-size:calc(2.2*var(--u))}
/* 6 · tu memoria, en tu casa */
.sc-pc{left:7%;top:6%;width:46%;display:flex;flex-direction:column;align-items:center}
.sc-pc .scr{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;gap:calc(1.6*var(--u));background:var(--stage-chip);border:2px solid var(--stage-line);border-radius:calc(1.6*var(--u)) calc(1.6*var(--u)) calc(.4*var(--u)) calc(.4*var(--u))}
.sc-pc .scr b{font-size:calc(3.6*var(--u));letter-spacing:.14em;color:#fff}
.sc-pc .sc-gl{width:calc(7*var(--u));height:calc(7*var(--u));fill:var(--on-core)}
.sc-pc .base{width:112%;height:calc(1.4*var(--u));background:var(--stage-line);border-radius:0 0 calc(1.6*var(--u)) calc(1.6*var(--u))}
.sc-v small{display:block;font-size:calc(2.2*var(--u));color:var(--stage-mute);margin-top:calc(1.2*var(--u));text-align:center}
.sc-cloud{left:64%;top:4%;width:28%;text-align:center}
.sc-cloud svg{width:calc(15*var(--u));height:calc(10*var(--u))}
.sc-cloud path{fill:none;stroke:var(--stage-mute);stroke-width:2}.sc-cloud line{stroke:#F2808A;stroke-width:2.5;stroke-linecap:round}
.sc-bak{left:64%;top:38%;width:28%;text-align:center}
.sc-bak svg{width:calc(8*var(--u));height:calc(8*var(--u));fill:none;stroke:#7FE0BC;stroke-width:2}
.k7{left:54%;top:30%}
/* movimiento: solo con la escena activa y sin «reducir movimiento». Bucle de 8 s */
@media (prefers-reduced-motion:no-preference){
  .sc.on *{animation-duration:8s;animation-iteration-count:3;animation-timing-function:var(--ease-out);animation-fill-mode:both}
  .sc.on .sc-dara::after{animation:scRing 8s var(--ease-out) 3 both}
  @keyframes scRing{0%,44%{opacity:0;transform:scale(.98)}48%{opacity:.9;transform:none}62%,100%{opacity:0;transform:scale(1.02)}}
  /* 0 */
  .sc0.on .b1 i{animation-name:s0b1}@keyframes s0b1{0%{transform:scaleX(.15)}30%,100%{transform:scaleX(1)}}
  .sc0.on .l1{animation-name:sIn30}.sc0.on .l2{animation-name:sIn78}
  .sc0.on .b2 i{animation-name:s0b2}@keyframes s0b2{0%,72%{transform:scaleX(0)}84%,100%{transform:scaleX(.35)}}
  .sc0.on .k1{animation-name:s0k;animation-timing-function:var(--ease-in-out)}
  @keyframes s0k{0%,32%{opacity:0;transform:none}35%{opacity:1;transform:none}46%{transform:translate(0,calc(53.6cqw*var(--ar)))}60%{transform:translate(52cqw,calc(53.6cqw*var(--ar)))}72%{opacity:1;transform:translate(52cqw,0)}76%,100%{opacity:0;transform:translate(52cqw,0)}}
  .sc0.on .a2{animation-name:sHot72}
  .sc0.on .ms1 i{animation-name:s0m}.sc0.on .ms1 i:nth-child(2){animation-delay:.35s}.sc0.on .ms1 i:nth-child(3){animation-delay:.7s}.sc0.on .ms1 i:nth-child(4){animation-delay:1.05s}
  @keyframes s0m{0%,2%{opacity:0;transform:translateY(1cqw)}8%,100%{opacity:1;transform:none}}
  .sc0.on .ms2 i{animation-name:s0n}.sc0.on .ms2 i:nth-child(2){animation-delay:.35s}
  @keyframes s0n{0%,80%{opacity:0;transform:translateY(1cqw)}86%,100%{opacity:1;transform:none}}
  /* 1 */
  .sc1.on .sk{animation-name:s1sk}@keyframes s1sk{0%{opacity:0;transform:translateY(2cqw)}10%,100%{opacity:1;transform:none}}
  .sc1.on .k2{animation-name:s1k;animation-timing-function:var(--ease-in-out)}@keyframes s1k{0%,16%{opacity:0;transform:none}19%{opacity:1}32%{opacity:1;transform:translate(10cqw,calc(-6.4cqw*var(--ar)))}36%,100%{opacity:0;transform:translate(10cqw,calc(-6.4cqw*var(--ar)))}}
  .sc1.on .c2{animation-name:sHot34}
  .sc1.on .sc-list li{animation-name:sLi}.sc1.on .sc-list li:nth-child(2){animation-delay:.5s}.sc1.on .sc-list li:nth-child(3){animation-delay:1s}
  @keyframes sLi{0%,40%{opacity:0;transform:translateY(1.5cqw)}47%,100%{opacity:1;transform:none}}
  .sc1.on .sc-dara::after{animation-name:none}
  /* 2 */
  .sc2.on .sc-mail{animation-name:s2m}@keyframes s2m{0%{opacity:0;transform:translateX(6cqw)}12%,100%{opacity:1;transform:none}}
  .sc2.on .sc-scan{animation-name:s2s;animation-timing-function:linear}@keyframes s2s{0%,16%{transform:translateX(-110%)}38%,100%{transform:translateX(360%)}}
  .sc2.on .tg3{animation-name:sIn40}.sc2.on .sc-ask{animation-name:s2a}
  @keyframes s2a{0%,52%{opacity:0;transform:translateY(1.5cqw)}58%{opacity:1;transform:none}66%{transform:scale(1.03)}72%,100%{opacity:1;transform:none}}
  .sc2.on .ag li.r2{animation-name:s2r}@keyframes s2r{0%,52%{opacity:1}56%{opacity:.4}60%{opacity:1}64%{opacity:.4}68%,100%{opacity:1}}
  .sc2.on .sc-dara::after{animation-name:none}
  /* 3 */
  .sc3.on .k4{animation-name:s3k;animation-timing-function:var(--ease-in-out)}@keyframes s3k{0%,12%{opacity:0;transform:none}15%{opacity:1}30%{opacity:1;transform:translate(17cqw,0)}33%,100%{opacity:0;transform:translate(17cqw,0)}}
  .sc3.on .kd i{animation-name:s3d}@keyframes s3d{0%,32%{opacity:0;transform:scale(.4)}36%,100%{opacity:1;transform:none}}
  .sc3.on .kd i:nth-child(2){animation-delay:.08s}.sc3.on .kd i:nth-child(3){animation-delay:.16s}.sc3.on .kd i:nth-child(4){animation-delay:.24s}.sc3.on .kd i:nth-child(5){animation-delay:.32s}.sc3.on .kd i:nth-child(6){animation-delay:.4s}.sc3.on .kd i:nth-child(7){animation-delay:.48s}.sc3.on .kd i:nth-child(8){animation-delay:.56s}
  .sc3.on .sc-btn{animation-name:s3p}@keyframes s3p{0%,56%{transform:none}59%{transform:scale(.95)}62%,100%{transform:none}}
  .sc3.on .sc-btn .bb1{animation-name:sIn62}
  .sc3.on .sc-vault{animation-name:sHot12}
  .sc3.on .sc-dara::after{animation-name:none}
  /* 4 */
  .sc4.on .th li{animation-name:sLi4}.sc4.on .th li.m1{animation-delay:1.2s}.sc4.on .th li.m2{animation-delay:2.4s}
  @keyframes sLi4{0%,6%{opacity:0;transform:translateY(1.5cqw)}12%,100%{opacity:1;transform:none}}
  .sc4.on .sc-ok{animation-name:s4o}@keyframes s4o{0%,48%{opacity:0;transform:scale(.9)}54%{opacity:1;transform:none}62%{transform:scale(1.06)}68%,100%{opacity:1;transform:none}}
  .sc4.on .sc-dara::after{animation-name:none}
  /* 5 */
  .sc5.on .p1{animation-name:sIn10}.sc5.on .p2{animation-name:sIn22}
  .sc5.on .sc-undo{animation-name:s5u}@keyframes s5u{0%,34%{opacity:0}40%{opacity:1;transform:none}50%{transform:scale(.92)}54%,100%{opacity:1;transform:none}}
  .sc5.on .ft::after{animation-name:s5x}@keyframes s5x{0%,52%{transform:scaleX(0)}60%,86%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
  .sc5.on .p3{animation-name:s5r}@keyframes s5r{0%,60%{opacity:0;transform:translateY(1cqw)}66%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
  .sc5.on .sc-dara::after{animation-name:none}
  /* 6 */
  .sc6.on .k7{animation-name:s6k;animation-timing-function:var(--ease-in-out)}@keyframes s6k{0%,20%{opacity:0;transform:none}24%{opacity:1}40%{opacity:1;transform:translate(17cqw,calc(14.4cqw*var(--ar)))}44%,100%{opacity:0;transform:translate(17cqw,calc(14.4cqw*var(--ar)))}}
  .sc6.on .sc-bak{animation-name:sHot42}
  .sc6.on .sc-cloud line{animation-name:s6c}@keyframes s6c{0%,60%{opacity:1}66%{opacity:.3}72%,100%{opacity:1}}
  .sc6.on .sc-dara::after{animation-name:none}
  /* comunes */
  @keyframes sIn10{0%,8%{opacity:0;transform:translateY(1cqw)}14%,100%{opacity:1;transform:none}}
  @keyframes sIn22{0%,20%{opacity:0;transform:translateY(1cqw)}26%,100%{opacity:1;transform:none}}
  @keyframes sIn30{0%,28%{opacity:0}33%,100%{opacity:1}}
  @keyframes sIn40{0%,38%{opacity:0;transform:scale(.9)}44%,100%{opacity:1;transform:none}}
  @keyframes sIn62{0%,61%{opacity:0}65%,100%{opacity:1}}
  @keyframes sIn78{0%,76%{opacity:0}82%,100%{opacity:1}}
  @keyframes sHot12{0%,12%{transform:none}16%{transform:scale(1.04)}22%,100%{transform:none}}
  @keyframes sHot34{0%,32%{transform:none}36%{transform:scale(1.06)}42%,100%{transform:none}}
  @keyframes sHot42{0%,40%{transform:none}44%{transform:scale(1.1)}50%,100%{transform:none}}
  @keyframes sHot72{0%,72%{transform:none}75%{transform:scale(1.06)}80%,100%{transform:none}}
}
/* escritorio: pantallas en zigzag, todas del mismo tamaño y quietas; solo se mueve lo de dentro (Javier 17-oct) */
@media (min-width:981px){
  .px-i{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
  .px-i:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .px-i:nth-child(even) .px-t{order:2}
  .px-i .sc{margin-top:0}
  .px-i+.px-i{margin-top:120px}
}
.sc{display:flex;flex-direction:column}
.sc-q{min-height:calc(1.45em + 1.45em*1 + 20px)}
.sc-a{min-height:calc(1.5em*3)}
@media (max-width:600px){.sc-a{min-height:calc(1.5em*5)}.sc-q{min-height:calc(1.45em*3 + 20px)}}
@media (max-width:980px){.sc{--ar:.72}}
@media (max-width:600px){.sc{--ar:.9;padding:14px}.sc2,.sc4{--u:max(1cqw,4px)}.sc2 .sc-mail small{white-space:nowrap}.sc2 .tg3{top:42%}.sc2 .sc-ask{top:54%}}
@media (prefers-reduced-motion:reduce){.px-l .px-t,.px-stick .sc{transition:none;transform:none}}

/* ===== portada mixta (21-oct): bloques de la web actual con el sistema nuevo ===== */
.mx-st{padding:var(--sec-m) 0 var(--sec-s);text-align:center}
.mx-s1{max-width:34ch;margin:0 auto;font-size:clamp(22px,2.6vw,30px);line-height:1.35;color:var(--ink-2);text-wrap:balance}
.mx-s2{max-width:30ch;margin:22px auto 0;font-size:clamp(24px,3vw,36px);line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.mx-cmp{padding:var(--sec-s) 0 var(--sec-m)}
.mx-cmp h2,.mx-talk h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.1;margin:0 0 28px}
.mx-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.mx-c{border-radius:var(--r-2xl);padding:26px 28px}
.mx-wo{background:var(--surface);border:1px solid var(--border)}
.mx-wi{background:var(--stage);border:1px solid var(--stage-line);color:var(--stage-ink);box-shadow:0 30px 60px -34px rgba(28,22,48,.7)}
.mx-l{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mx-wo .mx-l{color:var(--ink-2)}.mx-wi .mx-l{color:var(--on-stage)}
.mx-gl{fill:var(--signal)}
.mx-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mx-c li{position:relative;padding-left:30px;font-size:var(--fs-md);line-height:1.45}
.mx-wo li{color:var(--ink-2)}.mx-wo li::before{content:"✕";position:absolute;left:0;color:#B4475A;font-weight:700}
.mx-wi li{color:var(--stage-ink)}.mx-wi li::before{content:"✓";position:absolute;left:0;color:#3FC497;font-weight:700}
.mx-talk{padding:var(--sec-m) 0}
.mx-tg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:8px}
.mx-t{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:26px 28px}
.mx-tl{margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.mx-tq{margin:12px 0 0;font-size:clamp(20px,2.2vw,26px);line-height:1.3;font-weight:700;color:var(--ink);text-wrap:balance}
.mx-ta{margin:12px 0 0;color:var(--ink-2);font-size:var(--fs-md);line-height:1.5}
@media (max-width:760px){.mx-g,.mx-tg{grid-template-columns:minmax(0,1fr)}.mx-c,.mx-t{padding:22px}}

/* ===== Cómo funciona v5 (21-oct): upgrade de la página actual con visuales ===== */
.hw-short{background:var(--stage);color:var(--stage-ink);padding:8px 0 var(--sec-m)}
.hw-short h2,.hw-arch h2{color:var(--on-stage);font-size:var(--fs-xl);letter-spacing:-.02em;margin:0}
.hw-short .v4-lead,.hw-arch .v4-lead{color:var(--stage-soft)}
.hw-sts{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hw-st{border-top:2px solid var(--stage-line);padding-top:14px}
.hw-st h3{margin:8px 0 6px;color:var(--on-stage);font-size:var(--fs-lg)}
.hw-st p{margin:0;color:var(--stage-soft)}
.hw-st .pb-n{color:var(--signal);font-weight:700;letter-spacing:.08em;font-size:var(--fs-sm);display:block}
/* el recorrido: una sola memoria en el centro */
.fl{--u:max(1cqw,3.6px);position:relative;container-type:inline-size;aspect-ratio:16/5.4;margin-top:28px;border:1px solid var(--stage-line);border-radius:var(--r-2xl);background:radial-gradient(60% 90% at 50% 50%,#2E2552 0%,var(--stage) 75%);overflow:hidden}
.fl>*{position:absolute}
.fl .sc-ch{height:auto;padding:calc(1.6*var(--u)) calc(2.6*var(--u));font-size:calc(2.2*var(--u));gap:calc(1.4*var(--u))}
.fl .sc-ic{width:calc(3*var(--u));height:calc(3*var(--u))}
.fl-a{left:5%;top:50%;transform:translateY(-50%)}
.fl-b{right:5%;top:50%;transform:translateY(-50%)}
.fl-line{top:50%;height:0;border-top:2px dashed var(--stage-line)}
.fl-line.l1{left:20%;width:18%}.fl-line.l2{right:20%;width:18%}
.fl-core{left:38%;right:38%;top:14%;bottom:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.6*var(--u));background:var(--core);border:1.5px solid var(--core-line);border-radius:calc(2.4*var(--u));color:#fff;box-shadow:0 0 calc(6*var(--u)) rgba(167,139,250,.25)}
.fl-core>b{font-size:calc(2.8*var(--u));letter-spacing:.16em}
.fl-gl{width:calc(5*var(--u));height:calc(5*var(--u));fill:var(--on-core)}
.fl-note{position:absolute;top:calc(-1*var(--u));right:calc(-1*var(--u));width:calc(6*var(--u));display:flex;flex-direction:column;gap:calc(.6*var(--u));padding:calc(1*var(--u));background:#fff;border-radius:calc(.8*var(--u));box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0}
.fl-note i{display:block;height:calc(.6*var(--u));border-radius:9px;background:#DCD6EC}.fl-note i:nth-child(2){width:80%}.fl-note i:nth-child(3){width:55%}
.fl-say{font-size:calc(1.7*var(--u));color:var(--stage-soft);font-style:italic;white-space:nowrap}
.fl-ok{font-style:normal;color:#7FE0BC;font-weight:600}
.fl-sa{left:5%;top:calc(50% + 5*var(--u))}
.fl-sf{position:absolute;bottom:calc(-4.2*var(--u));left:50%;transform:translateX(-50%)}
.fl-sr{right:5%;top:calc(50% + 5*var(--u))}
.fl .sc-pk{width:calc(1.8*var(--u));height:calc(1.8*var(--u));margin:calc(-.9*var(--u)) 0 0 calc(-.9*var(--u));top:50%}
.fl-k1{left:20%}.fl-k2{left:62%}
.fl-sf{opacity:0}.fl-sa,.fl-sr{opacity:0}
@media (prefers-reduced-motion:reduce){.fl-sf,.fl-sa,.fl-sr,.fl-note{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .hw-short.on .fl *{animation-duration:9s;animation-iteration-count:3;animation-fill-mode:both;animation-timing-function:var(--ease-in-out)}
  .hw-short.on .fl-sa{animation-name:flSa}@keyframes flSa{0%{opacity:0}4%,30%{opacity:1}36%,100%{opacity:0}}
  .hw-short.on .fl-k1{animation-name:flK1}@keyframes flK1{0%,8%{opacity:0;transform:none}11%{opacity:1}27%{opacity:1;transform:translateX(18cqw)}30%,100%{opacity:0;transform:translateX(18cqw)}}
  .hw-short.on .fl-core{animation-name:flCore}@keyframes flCore{0%,27%{box-shadow:0 0 calc(6*var(--u)) rgba(167,139,250,.25)}33%{box-shadow:0 0 0 calc(1*var(--u)) var(--signal),0 0 calc(8*var(--u)) rgba(167,139,250,.5)}45%,100%{box-shadow:0 0 calc(6*var(--u)) rgba(167,139,250,.25)}}
  .hw-short.on .fl-note{animation-name:flNote}@keyframes flNote{0%,30%{opacity:0;transform:translate(-2cqw,-2cqw) scale(1.3)}38%{opacity:1;transform:none}56%{opacity:1;transform:translate(-9cqw,8cqw) scale(.4)}60%,100%{opacity:0;transform:translate(-9cqw,8cqw) scale(.4)}}
  .hw-short.on .fl-sf{animation-name:flSf}@keyframes flSf{0%,56%{opacity:0}61%,92%{opacity:1}97%,100%{opacity:0}}
  .hw-short.on .fl-k2{animation-name:flK2}@keyframes flK2{0%,64%{opacity:0;transform:none}67%{opacity:1}83%{opacity:1;transform:translateX(18cqw)}86%,100%{opacity:0;transform:translateX(18cqw)}}
  .hw-short.on .fl-b{animation-name:flB}@keyframes flB{0%,83%{transform:translateY(-50%)}87%{transform:translateY(-50%) scale(1.07)}93%,100%{transform:translateY(-50%)}}
  .hw-short.on .fl-a{animation-name:flA}@keyframes flA{0%,5%{transform:translateY(-50%)}9%{transform:translateY(-50%) scale(1.07)}15%,100%{transform:translateY(-50%)}}
  .hw-short.on .fl-sr{animation-name:flSr}@keyframes flSr{0%,86%{opacity:0}90%,100%{opacity:1}}
  .hw-short.on .hw-st{animation:stDim 9s 3 both}.hw-short.on .hw-st:nth-child(1){animation-name:st1}.hw-short.on .hw-st:nth-child(2){animation-name:st2}.hw-short.on .hw-st:nth-child(3){animation-name:st3}
  @keyframes st1{0%,32%{border-top-color:var(--signal)}36%,100%{border-top-color:var(--stage-line)}}
  @keyframes st2{0%,32%{border-top-color:var(--stage-line)}36%,64%{border-top-color:var(--signal)}68%,100%{border-top-color:var(--stage-line)}}
  @keyframes st3{0%,64%{border-top-color:var(--stage-line)}68%,100%{border-top-color:var(--signal)}}
}
/* móvil: el recorrido en vertical */
@media (max-width:640px){
  .fl{--u:max(1cqw,3.4px);aspect-ratio:1/1.05}
  .fl .sc-ch{font-size:15px;padding:8px 14px}.fl .sc-ic{width:20px;height:20px}
  .fl-a{left:50%;top:9%;transform:translateX(-50%)}.fl-b{left:50%;right:auto;top:auto;bottom:9%;transform:translateX(-50%)}
  .fl-line{border-top:0;border-left:2px dashed var(--stage-line);width:0!important;left:50%!important;right:auto!important;height:12%}
  .fl-line.l1{top:18%}.fl-line.l2{top:70%}
  .fl-core{left:24%;right:24%;top:31%;bottom:31%}.fl-core>b{font-size:16px}.fl-gl{width:30px;height:30px}
  .fl-say{font-size:13px}
  .fl-sa{left:0;right:0;text-align:center;top:19%}
  .fl-sr{left:0;right:0;text-align:center;top:auto;bottom:2%}
  .fl .fl-sf{bottom:-34px;padding:2px 8px;border-radius:999px;background:var(--stage)}
  .fl-note{width:34px;padding:6px;gap:4px}.fl-note i{height:3px}
  .fl .sc-pk{width:10px;height:10px;margin:-5px 0 0 -5px;left:50%}
  .fl-k1{top:18%}.fl-k2{top:70%}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .hw-short.on .fl-k1{animation-name:flK1m}@keyframes flK1m{0%,8%{opacity:0;transform:none}11%{opacity:1}27%{opacity:1;transform:translateY(12cqw)}30%,100%{opacity:0;transform:translateY(12cqw)}}
  .hw-short.on .fl-k2{animation-name:flK2m}@keyframes flK2m{0%,64%{opacity:0;transform:none}67%{opacity:1}83%{opacity:1;transform:translateY(12cqw)}86%,100%{opacity:0;transform:translateY(12cqw)}}
  .hw-short.on .fl-a{animation-name:flAm}@keyframes flAm{0%,5%{transform:translateX(-50%)}9%{transform:translateX(-50%) scale(1.07)}15%,100%{transform:translateX(-50%)}}
  .hw-short.on .fl-b{animation-name:flBm}@keyframes flBm{0%,83%{transform:translateX(-50%)}87%{transform:translateX(-50%) scale(1.07)}93%,100%{transform:translateX(-50%)}}
  .hw-short.on .fl-note{animation-name:flNotem}@keyframes flNotem{0%,30%{opacity:0;transform:scale(1.3)}38%{opacity:1;transform:none}56%{opacity:1;transform:translate(-12cqw,10cqw) scale(.4)}60%,100%{opacity:0;transform:translate(-12cqw,10cqw) scale(.4)}}
}
.hw-arch{padding:var(--sec-m) 0 var(--sec-s)}
.hw-arch .v4-dia{margin-top:24px}
.hw-tools{margin:18px 0 0;color:var(--stage-soft);font-size:var(--fs-sm);max-width:70ch}
/* nota de memoria */
.hw-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.hw-2>*{min-width:0}
.hw-note,.hw-care{padding:var(--sec-m) 0}
.hw-note h2,.hw-care h2,.hw-pieces h2,.hw-safe h2,.hw-senses h2,.hw-ais h2,.hw-faq h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.1;margin:0 0 12px}
.nt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:22px 24px;box-shadow:0 30px 60px -36px rgba(28,22,48,.45)}
.nt-h{display:flex;align-items:center;gap:10px;font-family:var(--mono,monospace);font-size:var(--fs-sm);color:var(--ink-2)}
.nt-h svg{width:26px;height:26px}
.nt-z{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--primary-subtle);color:var(--ink);font-weight:600;font-family:var(--font)}
.nt h3{margin:14px 0 10px;font-size:var(--fs-lg)}
.nt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nt li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:11px 0;border-top:1px solid var(--border)}
.nt-t{color:var(--ink)}
.nt-m{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:var(--fs-xs)}
.nt-m .sc-ic{width:14px;height:14px}.nt .ic-chatgpt path:not([fill]){fill:var(--ink)}
.nt-old .nt-t{text-decoration:line-through;text-decoration-color:#B4475A;color:var(--ink-2)}
.nt-m em{font-style:normal;color:#B4475A;font-weight:600}@media (prefers-color-scheme:dark){.nt-m em{color:#FF9AA8}.nt-old .nt-t{text-decoration-color:#FF9AA8}}
.nt-new{background:linear-gradient(90deg,rgba(63,196,151,.12),transparent);margin:0 -12px;padding:11px 12px!important;border-radius:10px}
@media (prefers-reduced-motion:no-preference){
  .nt.on li{animation:ntIn 10s var(--ease-out) 1 both}
  .nt.on li.r1{animation-name:ntIn1}.nt.on li.r2{animation-name:ntIn2}.nt.on li.r3{animation-name:ntIn3}.nt.on li.r4{animation-name:ntIn4}
  @keyframes ntIn{0%{opacity:0;transform:translateY(6px)}6%,100%{opacity:1;transform:none}}
  @keyframes ntIn1{0%,10%{opacity:0;transform:translateY(6px)}16%,100%{opacity:1;transform:none}}
  @keyframes ntIn2{0%,20%{opacity:0;transform:translateY(6px)}26%,100%{opacity:1;transform:none}}
  @keyframes ntIn3{0%,30%{opacity:0;transform:translateY(6px)}36%,100%{opacity:1;transform:none}}
  @keyframes ntIn4{0%,55%{opacity:0;transform:translateY(-8px)}62%,100%{opacity:1;transform:none}}
}
/* piezas */
.hw-pieces{padding:var(--sec-m) 0;background:var(--stage);color:var(--stage-ink)}
.hw-pieces h2{color:var(--on-stage);margin-bottom:var(--sec-s)}
.hw-pc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.hw-pc+.hw-pc{margin-top:96px}
.hw-pc.hw-r{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.hw-pc.hw-r .hw-pt{order:2}
.hw-pc>*{min-width:0}
.hw-pt .sbm-w span{color:var(--td)!important}
.hw-pt .sbm-w{color:var(--on-stage)}
.hw-pt h3{margin:14px 0 10px;color:var(--on-stage);font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.02em}
.hw-pt p{margin:0 0 10px;color:var(--stage-soft)}
.hw-pt .plain{color:var(--on-stage);font-weight:600}
.hw-pv,.hw-zv{margin:0;padding:14px}
.hw-zv .sc-v>*{position:absolute}
.zv-a{left:4%;top:5%}
.zv-cap{left:4%;top:19%;font-size:calc(2.2*var(--u));color:var(--signal);font-weight:600}
.zn{width:44%;height:22%;display:flex;align-items:flex-end;padding:calc(2.4*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line);border-radius:calc(2.4*var(--u));color:var(--stage-soft);font-size:calc(2.8*var(--u));font-weight:600;opacity:.45}
.zn.z0{left:4%;top:27%;opacity:1;border-color:var(--signal);color:#fff}
.zn.z1{left:52%;top:27%}.zn.z2{left:4%;top:51%}.zn.z3{left:52%;top:51%}
.zn::after{content:"";position:absolute;right:calc(2.4*var(--u));top:calc(2.4*var(--u));width:calc(3*var(--u));height:calc(.8*var(--u));border-radius:9px;background:var(--stage-line)}
.zn.z0::after{background:var(--signal)}
@media (prefers-reduced-motion:no-preference){.hw-zv.on .zn.z0{animation:znP 3s var(--ease-in-out) 3}@keyframes znP{0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,.0)}50%{box-shadow:0 0 0 calc(1*var(--u)) rgba(167,139,250,.35)}}}
.hw-pair{padding:var(--sec-m) 0 0}
/* autocuidado */
.cyc{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;margin:0 auto;container-type:inline-size}
.cy-ring{position:absolute;inset:0;width:100%;height:100%}
.cy-ring circle:first-child{fill:none;stroke:var(--border);stroke-width:2;stroke-dasharray:4 6}
.cy-dot{fill:var(--accent);opacity:.8;transform-origin:100px 100px}
.cy-mid{position:absolute;inset:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;background:var(--stage);color:var(--stage-soft);border-radius:50%;font-size:max(3cqw,11px)}
.cy-mid span:first-of-type{color:#fff;font-weight:700;font-size:max(4cqw,13px)}
.cy-gl{width:max(9cqw,28px);height:max(9cqw,28px);fill:var(--on-core);margin-bottom:4px}
.cyc ul{list-style:none;margin:0;padding:0}
.cy{position:absolute;width:38%;display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;font-size:max(2.8cqw,12px);color:var(--ink-2);box-shadow:var(--shadow-1,0 4px 14px rgba(0,0,0,.06))}
.cy b{color:var(--ink);font-size:max(3.4cqw,13px)}
.cy.n0{left:31%;top:-2%}.cy.n1{right:-4%;top:38%}.cy.n2{left:31%;bottom:-2%}.cy.n3{left:-4%;top:38%}
@media (prefers-reduced-motion:no-preference){
  .cyc.on .cy-dot{animation:cyR 8s linear 3}@keyframes cyR{to{transform:rotate(360deg)}}
  .cyc.on .cy{animation:cyH 8s 3 both}.cyc.on .cy.n1{animation-delay:2s}.cyc.on .cy.n2{animation-delay:4s}.cyc.on .cy.n3{animation-delay:6s}
  @keyframes cyH{0%,2%{border-color:var(--signal);transform:scale(1.04)}12%,100%{border-color:var(--border);transform:none}}
}
/* red de seguridad */
.hw-safe{padding:var(--sec-m) 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sf-g{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sf{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px}
.sf h3{margin:12px 0 6px;font-size:var(--fs-md)}.sf p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.hw-i{width:46px;height:46px;padding:10px;border-radius:12px;background:var(--stage);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hw-i-light circle{stroke:none}.hw-i-light .l1{fill:#3FC497}.hw-i-light .l2{fill:#E3B85C;opacity:.35}.hw-i-light .l3{fill:#F2808A;opacity:.35}
/* sentidos */
.hw-senses{padding:var(--sec-m) 0}
.se-g{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.se{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px 20px 20px}
.se h3{margin:4px 0 6px;font-size:var(--fs-md)}.se p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.se>div{min-width:0;flex:1}
.tg{flex:none;width:38px;height:22px;border-radius:999px;background:#3FC497;position:relative;margin-top:4px}
.tg i{position:absolute;top:3px;left:19px;width:16px;height:16px;border-radius:50%;background:#fff}
.se:nth-child(3) .tg{background:#8A80A8}.se:nth-child(3) .tg i{left:3px}
/* IAs */
.hw-ais{padding:var(--sec-m) 0;background:var(--stage);color:var(--stage-ink)}
.hw-ais h2{color:var(--on-stage)}.hw-ais .v4-lead{color:var(--stage-soft)}
.ai-g{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ai-g li{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:999px;background:var(--stage-chip);border:1px solid var(--stage-chip-line);color:#fff;font-size:var(--fs-lg)}
.ai-g .ic-chatgpt path:not([fill]){fill:#fff}.ai-g .ic-open{color:#B9A4FF}
/* FAQ y cierre */
.hw-faq{padding:var(--sec-m) 0}
.fq{max-width:820px;display:flex;flex-direction:column;gap:10px;margin-top:20px}
.fq details{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:0 20px}
.fq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:var(--fs-md);list-style:none;display:flex;justify-content:space-between;gap:16px}
.fq summary::after{content:"+";color:var(--primary);font-size:22px;line-height:1}
.fq details[open] summary::after{content:"–"}
.fq summary::-webkit-details-marker{display:none}
.fq p{margin:0 0 18px;color:var(--ink-2)}
.hw-cta{text-align:center;border-top:1px solid var(--border)}
.hw-cta .v4-lead{margin-left:auto;margin-right:auto}
.hw-deeper{margin-top:22px;color:var(--ink-2);font-size:var(--fs-sm)}
@media (max-width:980px){
  .hw-sts{grid-template-columns:minmax(0,1fr)}
  .hw-2,.hw-pc,.hw-pc.hw-r{grid-template-columns:minmax(0,1fr);gap:24px}.hw-pc.hw-r .hw-pt{order:0}
  .hw-pc+.hw-pc{margin-top:64px}
  .sf-g{grid-template-columns:repeat(2,minmax(0,1fr))}.se-g{grid-template-columns:minmax(0,1fr)}.ai-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.sf-g,.ai-g{grid-template-columns:minmax(0,1fr)}
  .cyc{aspect-ratio:auto;max-width:none;display:flex;flex-direction:column;gap:12px}
  .cy-ring{display:none}
  .cy-mid{position:static;inset:auto;border-radius:20px;padding:18px;flex-direction:row;gap:10px;font-size:13px;flex-wrap:wrap;justify-content:flex-start;text-align:left}
  .cy-mid span:first-of-type{font-size:16px;width:100%}.cy-gl{width:30px;height:30px;margin:0}
  .cyc ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .cy{position:static;width:auto;font-size:13px}.cy b{font-size:15px}}

.hw-pv{overflow:hidden}.hw-pv .sc-v,.hw-zv .sc-v{margin-bottom:calc(var(--ar) * -22%)}
.hw-zv{overflow:hidden}
.fl .ic-chatgpt path:not([fill]){fill:#fff}
.fl-sf{bottom:calc(-3.8*var(--u))}
/* ===== Historia v2 (22-oct): un visual distinto por sección, con intención ===== */
.sy-start,.sy-q,.sy-name,.sy-became{padding:var(--sec-m) 0}
.sy-start h2,.sy-prob h2,.sy-q h2,.sy-refl h2,.sy-name h2,.sy-became h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.1;margin:0 0 18px}
.sy-2{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
.sy-start p,.sy-prob p{font-size:var(--fs-md);line-height:1.65;max-width:60ch}
.sy-who{display:flex;gap:16px;align-items:center;padding:22px;border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s var(--ease-out)}
.sy-who:hover{border-color:var(--primary);transform:translateY(-2px)}
.sy-av{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:700;letter-spacing:.04em}
.sy-who b{display:block;font-size:var(--fs-lg)}.sy-who small{display:block;color:var(--ink-2);margin:4px 0 8px;line-height:1.45}.sy-who em{font-style:normal;color:var(--primary);font-weight:600;font-size:var(--fs-sm)}
/* el problema: la misma pila, otra vez, cada día */
.sy-prob{background:var(--stage);color:var(--stage-ink);padding:var(--sec-m) 0}
.sy-prob h2{color:var(--on-stage)}.sy-prob p{color:var(--stage-soft)}
.syp{--u:max(1cqw,3px);position:relative;container-type:inline-size;aspect-ratio:1/.78;border:1px solid var(--stage-line);border-radius:var(--r-2xl);background:radial-gradient(90% 80% at 50% 10%,#2E2552 0%,var(--stage) 75%);overflow:hidden}
.syp>*{position:absolute}
.pv-stack{left:8%;top:22%;width:26%;height:46%}
.pv-stack i{position:absolute;inset:0;transform:translate(calc(var(--k)*1.4*var(--u)),calc(var(--k)*-1.4*var(--u)));background:#fff;border-radius:calc(1*var(--u));box-shadow:0 4px 12px rgba(0,0,0,.35);background-image:linear-gradient(#DCD6EC,#DCD6EC),linear-gradient(#DCD6EC,#DCD6EC),linear-gradient(#DCD6EC,#DCD6EC);background-size:60% 4%,72% 4%,45% 4%;background-position:20% 22%,20% 34%,20% 46%;background-repeat:no-repeat}
.pv-stack b{position:absolute;left:-10%;right:-10%;bottom:calc(-8*var(--u));text-align:center;font-size:calc(2.6*var(--u));color:var(--stage-soft);font-weight:600;white-space:nowrap}
.pv-chat{right:7%;top:12%;width:46%;height:64%;background:var(--stage-2);border:1px solid var(--stage-chip-line);border-radius:calc(2*var(--u));padding:calc(2*var(--u));display:flex;flex-direction:column;gap:calc(1.6*var(--u))}
.pv-top{display:flex;align-items:center;gap:calc(1.2*var(--u));font-size:calc(2.6*var(--u));color:#fff;padding-bottom:calc(1.4*var(--u));border-bottom:1px solid var(--stage-line)}
.pv-top .sc-ic{width:calc(3.4*var(--u));height:calc(3.4*var(--u))}
.syp .ln{display:block;height:calc(1.6*var(--u));border-radius:9px;background:#4B3F72;transform-origin:left}
.syp .l0{width:90%}.syp .l1{width:70%}.syp .l2{width:82%}.syp .l3{width:55%;background:var(--signal)}
.pv-zero{position:absolute;left:0;right:0;bottom:calc(2.4*var(--u));text-align:center;color:#FFB4A8;font-weight:600;font-size:calc(2.5*var(--u));opacity:0}
.pv-fly{left:21%;top:40%;width:calc(5*var(--u));height:calc(6*var(--u));background:#fff;border-radius:calc(.6*var(--u));box-shadow:0 0 0 2px var(--accent);opacity:0}
.pv-days{left:0;right:0;bottom:5%;height:calc(4*var(--u))}
.pv-d{position:absolute;left:0;right:0;text-align:center;font-size:calc(3*var(--u));font-weight:600;color:var(--signal);opacity:0}
.pv-d.d0{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .syp.on .pv-fly{animation:pvFly 3s var(--ease-in-out) 3 both}.syp.on .f2{animation-delay:.15s}.syp.on .f3{animation-delay:.3s}
  @keyframes pvFly{0%,4%{opacity:0;transform:none}10%{opacity:1}36%{opacity:1;transform:translate(42cqw,-6cqw) scale(.7)}42%,100%{opacity:0;transform:translate(42cqw,-6cqw) scale(.4)}}
  .syp.on .ln{animation:pvLn 3s var(--ease-out) 2.93 both}.syp.on .l1{animation-delay:.12s}.syp.on .l2{animation-delay:.24s}.syp.on .l3{animation-delay:.36s}
  @keyframes pvLn{0%,38%{transform:scaleX(0);opacity:0}50%,78%{transform:scaleX(1);opacity:1}88%,100%{transform:scaleX(0);opacity:0}}
  .syp.on .pv-zero{animation:pvZero 3s 2.93 both}@keyframes pvZero{0%,84%{opacity:0}90%,98%{opacity:1}100%{opacity:0}}
  .syp.on .pv-d{opacity:0;animation:pvDay 3s 1 both}.syp.on .d1{animation-delay:3s}.syp.on .d2{animation:pvDayL 3s 6s 1 both}
  @keyframes pvDay{0%{opacity:0;transform:translateY(6px)}10%,90%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes pvDayL{0%{opacity:0;transform:translateY(6px)}10%,100%{opacity:1;transform:none}}
}
/* la pregunta: una frase grande */
.sy-qp p{font-size:var(--fs-md);line-height:1.65;max-width:60ch;color:var(--ink-2)}
.sy-big{margin:40px 0 26px;font-size:clamp(2.3rem,6.2vw,5rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:none}
.sy-big span{background:linear-gradient(transparent 62%,rgba(167,139,250,.38) 62%) no-repeat 0 0/0% 100%;transition:background-size 1.2s var(--ease-out) .2s}
.sy-q.on .sy-big span{background-size:100% 100%}
.sy-qe{font-size:var(--fs-lg);color:var(--ink);max-width:46ch;margin:0}
/* tres reflexiones */
.sy-refl{background:var(--stage);color:var(--stage-ink);padding:var(--sec-m) 0}
.sy-refl h2{color:var(--on-stage)}.sy-refl .v4-lead{color:var(--stage-soft)}
.sy-r{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--stage-line)}
.sy-r.r1 .rv{order:-1}
.sy-n{color:var(--signal);font-weight:700;letter-spacing:.08em;font-size:var(--fs-sm)}
.sy-r h3{color:var(--on-stage);font-size:var(--fs-lg);margin:6px 0 16px}
.sy-r p{margin:0 0 14px;line-height:1.6}
.sy-r small{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:2px}
.sy-i{color:var(--stage-mute)}.sy-i small{color:var(--stage-mute)}
.sy-l{color:var(--on-stage)}.sy-l small{color:var(--signal)}
.sy-now{color:var(--stage-soft);font-size:var(--fs-sm);border-left:2px solid var(--signal);padding-left:12px}
.rv{--u:max(1cqw,3px);position:relative;container-type:inline-size;aspect-ratio:4/3;border:1px solid var(--stage-line);border-radius:var(--r-2xl);background:radial-gradient(90% 80% at 50% 0%,#2C2350 0%,var(--stage) 72%);overflow:hidden}
.rv>*{position:absolute}
.rv b{font-weight:600}
/* 01 · silos → una memoria */
.rv-silo{top:14%;width:24%;height:30%;display:grid;place-items:center;border:3px solid #6A5D96;border-radius:calc(1.4*var(--u));background:var(--stage-2);color:#fff;font-size:calc(3*var(--u))}
.rv-silo.s0{left:6%}.rv-silo.s1{left:38%}.rv-silo.s2{left:70%}
.rv-mem{left:50%;bottom:10%;width:calc(14*var(--u));height:calc(14*var(--u));margin-left:calc(-7*var(--u));display:grid;place-items:center;border-radius:50%;background:var(--core);border:1.5px solid var(--core-line);opacity:.25}
.rv-gl{width:calc(7*var(--u));height:calc(7*var(--u));fill:var(--on-core)}
.rv-ln{top:44%;height:30%;width:0;border-left:2px dashed var(--signal);transform-origin:top;opacity:0}
.rv-ln.a{left:18%;transform:rotate(-42deg)}.rv-ln.b{left:50%}.rv-ln.c{left:82%;transform:rotate(42deg)}
/* 02 · puerta con cola → todos escriben, una regla revisa */
.rv-gate{left:50%;top:9%;width:calc(10*var(--u));height:calc(10*var(--u));margin-left:calc(-5*var(--u));display:grid;place-items:center;border-radius:50%;background:var(--stage-2);border:1px solid var(--stage-chip-line)}
.rv-gate svg{width:58%;height:58%;fill:none;stroke:#FFB4A8;stroke-width:1.8}
.rv-ai{top:38%;width:28%;display:flex;flex-direction:column;align-items:center;gap:calc(1*var(--u));padding:calc(2*var(--u)) 0;border-radius:calc(1.6*var(--u));background:var(--stage-chip);border:1px solid var(--stage-chip-line);color:#fff;font-size:calc(2.8*var(--u))}
.rv-ai .sc-ic{width:calc(4*var(--u));height:calc(4*var(--u))}
.rv-ai.a0{left:5%}.rv-ai.a1{left:36%}.rv-ai.a2{left:67%}
.rv-ai small{font-size:calc(2.3*var(--u));text-transform:none;letter-spacing:0;margin:0}
.rv-ai .w{color:var(--stage-mute)}.rv-ai .s{color:#7FE0BC;display:none}
.rv-chk{left:50%;bottom:8%;transform:translateX(-50%);padding:calc(1.2*var(--u)) calc(3*var(--u));border-radius:999px;background:rgba(127,224,188,.12);border:1px solid #7FE0BC;color:#7FE0BC;font-weight:600;font-size:calc(2.6*var(--u));opacity:0}
/* 03 · árbol de cinco niveles → una nota densa */
.rv-tree{left:8%;top:12%;width:50%;height:76%}
.rv-f{position:absolute;left:calc(var(--i,0)*6%);display:flex;align-items:center;gap:calc(1.2*var(--u));color:var(--stage-soft);font-size:calc(2.8*var(--u))}
.rv-f::before{content:"";width:calc(3.6*var(--u));height:calc(2.8*var(--u));border-radius:calc(.5*var(--u));background:#6A5D96}
.rv-f.f0{top:0;--i:0}.rv-f.f1{top:20%;--i:1}.rv-f.f2{top:40%;--i:2}.rv-f.f3{top:60%;--i:3}.rv-f.f4{top:80%;--i:4}
.rv-note{right:8%;top:16%;width:38%;height:68%;padding:calc(2.4*var(--u));display:flex;flex-direction:column;gap:calc(1.6*var(--u));background:#fff;border-radius:calc(1.4*var(--u));box-shadow:0 10px 30px rgba(0,0,0,.4);overflow:hidden;opacity:.18}
.rv-note i{display:block;height:calc(1.3*var(--u));border-radius:9px;background:#DCD6EC}
.rv-note .n1{width:80%}.rv-note .n3{width:70%}.rv-note .n5{width:60%;background:var(--signal)}
.rv-scan{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(rgba(167,139,250,0),rgba(167,139,250,.35),rgba(167,139,250,0));opacity:0}
@media (prefers-reduced-motion:reduce){.rv-mem,.rv-note{opacity:1}.rv-ln{opacity:1}.rv-chk{opacity:1}.rv-gate{opacity:.3}.rv-ai .w{display:none}.rv-ai .s{display:block}}
@media (prefers-reduced-motion:no-preference){
  .sy-r.on .rv *{animation-duration:8s;animation-iteration-count:2.85;animation-fill-mode:both;animation-timing-function:var(--ease-in-out)}
  .sy-r.on .rv-silo{animation-name:rvSilo}@keyframes rvSilo{0%,40%{border-style:solid;border-color:#6A5D96;box-shadow:none}50%,92%{border-color:var(--signal);box-shadow:0 0 calc(3*var(--u)) rgba(167,139,250,.4)}100%{border-color:#6A5D96;box-shadow:none}}
  .sy-r.on .rv-ln{animation-name:rvLn}@keyframes rvLn{0%,44%{opacity:0;clip-path:inset(0 0 100% 0)}58%,92%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0}}
  .sy-r.on .rv-mem{animation-name:rvMem}@keyframes rvMem{0%,52%{opacity:.25;transform:scale(.9)}62%,92%{opacity:1;transform:none;box-shadow:0 0 calc(5*var(--u)) rgba(167,139,250,.5)}100%{opacity:.25}}
  .sy-r.on .rv-gate{animation-name:rvGate}@keyframes rvGate{0%,40%{opacity:1;transform:none}50%,92%{opacity:.15;transform:scale(.8)}100%{opacity:1}}
  .sy-r.on .rv-ai{animation-name:rvAi}@keyframes rvAi{0%,40%{opacity:.55;transform:translateY(0)}50%,92%{opacity:1;border-color:#7FE0BC;transform:translateY(-1cqw)}100%{opacity:.55}}
  .sy-r.on .rv-ai .w{animation-name:rvW}@keyframes rvW{0%,44%{opacity:1}46%,100%{opacity:0}}
  .sy-r.on .rv-ai .s{display:block;position:absolute;bottom:calc(2*var(--u));animation-name:rvS}@keyframes rvS{0%,46%{opacity:0}52%,92%{opacity:1}100%{opacity:0}}
  .sy-r.on .rv-ai .w{position:relative}
  .sy-r.on .rv-chk{animation-name:rvChk}@keyframes rvChk{0%,58%{opacity:0;transform:translate(-50%,8px)}66%,92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
  .sy-r.on .rv-f{animation-name:rvF}@keyframes rvF{0%,40%{opacity:1;transform:none}56%,92%{opacity:.18;transform:translateX(-2cqw)}100%{opacity:1}}
  .sy-r.on .rv-note{animation-name:rvNote}@keyframes rvNote{0%,44%{opacity:.18;transform:scale(.94)}56%,92%{opacity:1;transform:none}100%{opacity:.18}}
  .sy-r.on .rv-scan{animation-name:rvScan}@keyframes rvScan{0%,58%{opacity:0;transform:translateY(-100%)}62%{opacity:1}76%{opacity:1;transform:translateY(400%)}80%,100%{opacity:0;transform:translateY(400%)}}
}
/* el nombre: EI·DETIC se pliega y entra DARA */
.nm-w{display:flex;align-items:baseline;flex-wrap:nowrap;margin:8px 0 34px;font-size:clamp(3rem,11vw,7.5rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.nm-w span{display:inline-block;overflow:hidden;white-space:nowrap}
.nm-w .ei{color:var(--accent-ink)}
.nm-w .det{color:var(--ink-2);opacity:.45;max-width:5ch;transition:max-width 1s var(--ease-in-out) .6s,opacity .6s .5s}
.nm-w .da{color:var(--primary);max-width:0;transition:max-width 1s var(--ease-in-out) 1.4s}
.sy-name.on .nm-w .det{max-width:0;opacity:0}.sy-name.on .nm-w .da{max-width:5ch}
@media (prefers-reduced-motion:reduce){.nm-w .det{display:none}.nm-w .da{max-width:none}}
.nm-g{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.nm-g p{margin:0;padding-top:14px;border-top:2px solid var(--border);line-height:1.6;color:var(--ink-2)}
.nm-g p{border-top-color:var(--primary)}
.nm-g b{color:var(--ink);font-size:var(--fs-lg);display:block;margin-bottom:4px}
.nm-end{margin:28px 0 0;font-size:var(--fs-lg);color:var(--ink)}
/* en qué se convirtió: entonces → hoy */
.sy-became{border-top:1px solid var(--border)}
.bc{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:56px;position:relative}
.bc::before{content:"";position:absolute;left:calc(50% - 40px);width:80px;top:50%;border-top:2px dashed var(--primary);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease-out) .3s}
.sy-became.on .bc::before{transform:scaleX(1)}
.bc li{position:relative;padding:24px;border-radius:var(--r-2xl);border:1px solid var(--border);background:var(--surface)}
.bc-now{border-color:var(--primary)!important;box-shadow:0 18px 40px -24px rgba(91,74,138,.6)}
.bc-d{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.bc-now .bc-d{color:var(--primary)}
.bc h3{margin:6px 0 8px;font-size:var(--fs-lg)}.bc p{margin:0 0 18px;color:var(--ink-2);line-height:1.55}
.bc-files{display:flex;align-items:center;gap:8px}
.bc-files i{width:22px;height:28px;border-radius:4px;background:var(--primary-subtle);border:1px solid var(--border)}
.bc-files .one{width:28px;height:34px;background:var(--surface);border-color:var(--ink-2)}
.bc-files b{color:var(--ink-2);margin:0 4px}
.bc-ais{display:flex;align-items:center;gap:10px}
.bc-gl{fill:var(--primary);margin-left:6px}
.sy-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:30px 0 0}
.sy-links a{font-weight:600}
/* tableta y móvil */
@media (max-width:900px){.sy-2,.sy-r{grid-template-columns:1fr;gap:28px}.sy-r.r1 .rv{order:0}}
@media (max-width:640px){
  .sy-r{padding:32px 0}
  .nm-g,.bc{grid-template-columns:1fr;gap:20px}
  .bc::before{display:none}
  .syp{--u:max(1cqw,3.2px)}
  .rv{--u:max(1cqw,3.2px)}
  .rv-f{font-size:13px}.rv-silo{font-size:14px}.rv-ai{font-size:13px}.rv-ai small{font-size:11px}.rv-chk{font-size:12px}
  .pv-d{font-size:14px}.pv-stack b{font-size:12px}.pv-top{font-size:12px}.pv-zero{font-size:12px}
}
.rv .ic-chatgpt path:not([fill]){fill:#fff}

/* Cómo funciona v5.1 (22-oct): crítica UX seq 148 + condición 2 seq 149 */
html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation-play-state:paused!important}
.anim-pp{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px dashed var(--stage-chip-line);background:transparent;color:var(--stage-soft);font:600 var(--fs-sm)/1.2 var(--font);cursor:pointer}
.anim-pp::before{content:"";width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.anim-pp[aria-pressed=true]::before{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.sy-slot{margin:-8px 0 28px}.sy-slot:empty{display:none}
.anim-pp:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.anim-pp{display:none}}
.hw-short{padding-top:40px}.hw-short h1{color:var(--on-stage);margin:0;font-size:var(--fs-2xl);letter-spacing:-.025em;line-height:1.05}
.hw-short .lead{color:var(--stage-soft);font-size:var(--fs-lg);line-height:1.5;margin:.8rem 0 0;max-width:56ch}
.hw-tools{margin:22px 0 0;color:var(--stage-soft);max-width:70ch}
.hw-idx{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.hw-idx a{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--stage-chip-line);background:var(--stage-chip);color:#fff;text-decoration:none;font-size:var(--fs-sm);font-weight:600}
.hw-idx a:hover{border-color:var(--signal)}
.sk .mt{display:flex;flex-direction:column;gap:calc(.9*var(--u));margin-top:calc(1.2*var(--u))}
.sk .mt small{display:flex;text-align:left;justify-content:flex-start;gap:calc(1*var(--u));font-size:max(calc(2.05*var(--u)),11px);line-height:1.25;color:var(--stage-soft);text-transform:none;letter-spacing:0;font-weight:500}
.sk .mt small b{color:var(--signal);font-weight:700}
.care-more{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.care-more li{display:flex;gap:14px;align-items:flex-start}.care-more h3{margin:2px 0 4px;font-size:var(--fs-md)}.care-more p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.hw-i-light .l2,.hw-i-light .l3{opacity:.3}
.hw-priv{padding:var(--sec-m) 0;background:var(--surface);border-top:1px solid var(--border)}
.pz{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:center;margin-top:26px}
.pz-pc{position:relative;padding:22px;border:2px solid var(--primary);border-radius:var(--r-2xl);background:var(--bg)}
.pz-pc>b{display:block;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.pz-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pz-in span{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.35}
.pz-in span b{color:var(--ink);font-size:var(--fs-md)}
.pz-in svg{width:26px;height:26px}
.pz-out{display:flex;flex-direction:column;gap:14px}
.pz-out span{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;border:1px dashed var(--border);font-size:var(--fs-sm);color:var(--ink-2)}
.pz-out span b{color:var(--ink)}
.pz-out .ais{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}.pz-out .ais b{width:100%}
.pz-out .ic-chatgpt path:not([fill]){fill:var(--ink)}
.pz-l{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pz-l li{border-top:2px solid var(--primary);padding-top:12px}.pz-l h3{margin:0 0 6px;font-size:var(--fs-md)}.pz-l p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
@media (max-width:900px){.pz{grid-template-columns:1fr}.pz-l{grid-template-columns:1fr;gap:16px}}
@media (max-width:560px){.pz-in{grid-template-columns:1fr}}
/* Historia: tres vueltas y parar en el estado final */
.pz-in .hw-i{width:40px;height:40px;padding:9px}.pz-in .gl{width:40px;height:40px;padding:8px;border-radius:12px;background:var(--stage);fill:var(--on-core)}
.care-more .hw-i{flex:none}
/* Historia v2.1 (22-oct): crítica UX seq 152 */
.sy-av{background:#5B4A8A}
.sy-prob{padding-top:8px}.sy-prob .sy-who{margin-top:26px;background:var(--stage-2);border-color:var(--stage-line);color:var(--on-stage)}
.sy-prob .sy-who small{color:var(--stage-soft)}.sy-prob .sy-who em{color:var(--signal)}.sy-prob .sy-who:hover{border-color:var(--signal)}
.rv2 .rv-tree{left:6%;width:40%}
.rv2 .rv-note{right:5%;top:12%;width:52%;height:auto;opacity:.18;padding:calc(2.2*var(--u));gap:calc(1.4*var(--u))}
.rn-f{font-family:var(--mono);font-size:max(calc(2.1*var(--u)),10px);color:#5C5470;font-weight:600}
.rn{display:flex;flex-direction:column;gap:calc(.5*var(--u));padding-top:calc(1.3*var(--u));border-top:1px solid #E2DFF0;color:#1A1525;font-size:max(calc(2.3*var(--u)),10.5px);line-height:1.25}
.rn small{display:flex;align-items:center;gap:calc(.7*var(--u));color:#5C5470;font-size:max(calc(1.9*var(--u)),9.5px);font-weight:500;margin:0}
.rn .sc-ic{width:max(calc(2*var(--u)),10px);height:max(calc(2*var(--u)),10px)}.rn .ic-chatgpt path:not([fill]){fill:#1A1525}
@media (prefers-reduced-motion:reduce){.rv2 .rv-note{opacity:1}}
/* Cómo funciona v5.2 (22-oct, Javier): la tabla respira antes de la sección oscura; ritmo de fondos claro/oscuro, sin la banda blanca suelta */
.hw-pair{padding:var(--sec-m) 0}
.hw-priv{background:var(--stage);color:var(--stage-ink);border-top:0}
.hw-priv h2{color:var(--on-stage)}.hw-priv .v4-lead{color:var(--stage-soft)}
.hw-priv .pz-pc{background:var(--stage-2);border-color:var(--signal)}.hw-priv .pz-pc>b{color:var(--signal)}
.hw-priv .pz-in span{background:var(--stage-chip);border-color:var(--stage-chip-line);color:var(--stage-soft)}.hw-priv .pz-in span b{color:#fff}
.hw-priv .pz-in .hw-i,.hw-priv .pz-in .gl{background:var(--core)}
.hw-priv .pz-out span{border-color:var(--stage-chip-line);color:var(--stage-soft)}.hw-priv .pz-out span b{color:#fff}
.hw-priv .pz-out .ic-chatgpt path:not([fill]){fill:#fff}
.hw-priv .pz-l li{border-top-color:var(--signal)}.hw-priv .pz-l h3{color:#fff}.hw-priv .pz-l p{color:var(--stage-soft)}
/* 22-oct (Javier: «te queda pegado»): cada sección acaba con el mismo aire que empieza; el recorte de las pantallas se comía 58 px */
.hw-pieces{padding-bottom:calc(var(--sec-m) + 58px)}
.hw-faq{padding-bottom:calc(var(--sec-m) + 52px)}
/* Historia v3 (23-oct, Javier: «explicaría un poco más, cifras que impresionen, FRAIM, errores, sensores, evolución»).
   Mismo lenguaje que la portada y Cómo funciona: escenario oscuro, lila para lo encendido, dorado solo en el botón. */
.sy-evo,.sy-fraim{background:var(--stage);color:var(--stage-ink);padding:var(--sec-m) 0}
.sy-evo h2,.sy-fraim h2,.sy-num h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.1;margin:0 0 18px}
.sy-evo h2,.sy-fraim h2{color:var(--on-stage)}.sy-evo .v4-lead,.sy-fraim .v4-lead{color:var(--stage-soft)}
.ev{list-style:none;margin:30px 0 0;padding:0 0 0 34px;position:relative;max-width:780px}
.ev::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--stage-line)}
.ev::after{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--signal);transform-origin:top;transform:scaleY(0);transition:transform 2.4s var(--ease-out) .2s}
.sy-evo.on .ev::after{transform:scaleY(1)}
.ev-i{position:relative;padding:0 0 26px}
.ev-i::before{content:"";position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--stage);border:2px solid var(--stage-line);transition:border-color .4s,background .4s;transition-delay:calc(.2s + var(--i)*.3s)}
.sy-evo.on .ev-i::before{border-color:var(--signal);background:var(--core)}
.ev-i:last-child::before{box-shadow:0 0 0 6px rgba(167,139,250,.18)}
.ev-d{color:var(--signal);font-weight:700;font-size:var(--fs-sm)}
.ev-i h3{margin:2px 0 4px;color:var(--on-stage);font-size:var(--fs-lg)}
.ev-i p{margin:0;color:var(--stage-soft);line-height:1.55;max-width:60ch}
@media (prefers-reduced-motion:no-preference){.ev-i{opacity:.35;transition:opacity .5s;transition-delay:calc(.2s + var(--i)*.3s)}.sy-evo.on .ev-i{opacity:1}}
.sy-num{padding:var(--sec-m) 0}
.sy-num .v4-lead{color:var(--ink-2)}
.nu{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 28px}
.nu li{border-top:2px solid var(--primary);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.nu b{font-size:clamp(2.3rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.nu span{color:var(--ink-2);line-height:1.45;max-width:26ch}
.nu-ai{display:flex;gap:10px;margin-top:4px}.nu-ai .ic-chatgpt path:not([fill]){fill:var(--ink)}
.lt{margin-top:44px;padding:24px;border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--surface)}
.lt h3{margin:0 0 14px;font-size:var(--fs-lg)}
.lt-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--border)}
.lt-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease-out) .3s}
.sy-num.on .lt-bar i{transform:scaleX(1)}
.lt-g{background:#3FC497}.lt-a{background:#E3B85C}.lt-r{background:#E5677A}
.lt p{margin:14px 0 0;color:var(--ink-2);line-height:1.55}
.nu-date{margin:18px 0 0;color:var(--ink-2);font-size:var(--fs-sm)}
@media (prefers-reduced-motion:reduce){.lt-bar i{transform:none}.ev::after{transform:none}}
.sy-fraim h3{color:var(--on-stage);font-size:var(--fs-lg);margin:22px 0 8px}.sy-fraim p{color:var(--stage-soft);line-height:1.6}
.sy-fraim .sy-links a{color:var(--signal)}
.fr-v{display:flex;flex-direction:column;gap:0;align-items:stretch}
.fr-app{border:1px solid var(--stage-chip-line);border-radius:var(--r-2xl) var(--r-2xl) 0 0;background:var(--stage-2);padding:0 0 26px;overflow:hidden}
.fr-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--stage-line)}
.fr-top i{width:9px;height:9px;border-radius:50%;background:var(--stage-line)}
.fr-top b{margin-left:8px;color:var(--on-stage);letter-spacing:.14em;font-size:var(--fs-sm)}
.fr-org{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:26px 22px 0}
.fr-r{display:block;text-align:center;padding:10px 12px;border-radius:999px;background:var(--stage-chip);border:1px solid var(--stage-chip-line);color:#fff;font-weight:600;font-size:var(--fs-sm)}
.fr-r.r0{grid-column:1/-1;justify-self:center;min-width:52%;border-color:var(--signal)}
.fr-r.r3{grid-column:1/-1;justify-self:center;min-width:52%;border-style:dashed}
.fr-base{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:0 0 var(--r-2xl) var(--r-2xl);background:var(--core);border:1.5px solid var(--core-line);color:#fff;letter-spacing:.16em;font-weight:700}
.fr-gl{width:22px;height:22px;fill:var(--on-core)}
@media (prefers-reduced-motion:no-preference){.fr-r{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease-out)}.fr-r.r1{transition-delay:.25s}.fr-r.r2{transition-delay:.35s}.fr-r.r3{transition-delay:.6s}.sy-fraim.on .fr-r{opacity:1;transform:none}}
@media (max-width:900px){.nu{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.nu{grid-template-columns:1fr;gap:22px}.lt{padding:18px}}
/* escritorio: la línea en el centro y los hitos a un lado y a otro (que llene el ancho, como el zigzag de las piezas) */
@media (min-width:900px){
  .ev{max-width:none;padding:0}
  .ev::before,.ev::after{left:50%;margin-left:-1px}
  .ev-i{width:50%;padding:0 48px 30px 0;text-align:right}
  .ev-i:nth-child(even){margin-left:50%;padding:0 0 30px 48px;text-align:left}
  .ev-i::before{left:auto;right:-8px}
  .ev-i:nth-child(even)::before{right:auto;left:-8px}
  .ev-i p{margin-left:auto}
  .ev-i:nth-child(even) p{margin-left:0}
  .ev-i:nth-child(n+2){margin-top:-38px}
}
/* FRAIM v2 (Javier 23-oct): agentes bajo cada líder, muchos; especialistas punteados a algunos */
.fr-app{padding-bottom:0}
.fr-org2{position:relative;display:block;aspect-ratio:1/.86;container-type:inline-size;margin:4px 10px 10px}
.fr-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fr-l path{fill:none;vector-effect:non-scaling-stroke}
.fr-l .ln{stroke:var(--stage-chip-line);stroke-width:1.5}
.fr-l .dt{stroke:var(--signal);stroke-width:1.5;stroke-dasharray:3 4;opacity:.85}
.fr-p,.fr-sh,.fr-cap{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translate(-50%,-50%);white-space:nowrap}
.fr-p{display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--stage-chip);border:1px solid var(--stage-chip-line);color:#fff;font-weight:600;font-size:max(2.5cqw,9.5px)}
.fr-p.ch{width:30%;height:8%;border-color:var(--signal);background:var(--core)}
.fr-p.ld{width:21%;height:8%}
.fr-p.ag{width:10%;height:5.5%;background:var(--stage-2);border-color:#5B4F86}
.fr-p.ag::before{content:"";width:max(1.3cqw,5px);height:max(1.3cqw,5px);border-radius:50%;background:var(--stage-mute)}
.fr-p.sp{width:17%;height:7%;border:1.5px dashed var(--signal);background:transparent;color:var(--on-stage)}
.fr-sh,.fr-cap{font-size:max(2.2cqw,9px);font-weight:700;color:var(--signal);letter-spacing:.02em}
.fr-cap{color:var(--stage-soft);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .fr-p,.fr-sh,.fr-cap,.fr-l .dt{opacity:0;transition:opacity .5s}
  .fr-p.ld{transition-delay:.2s}.fr-p.ag,.fr-cap{transition-delay:.45s}.fr-p.sp,.fr-sh{transition-delay:.8s}.fr-l .dt{transition-delay:1.1s}
  .sy-fraim.on .fr-p,.sy-fraim.on .fr-sh,.sy-fraim.on .fr-cap{opacity:1}.sy-fraim.on .fr-l .dt{opacity:.85}
}
/* Historia v3.1 (24-oct, UX seq 158): línea de tiempo compacta, cifras con una protagonista, organigrama legible */
@media (min-width:900px){
  .ev.ev5{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;padding:0;margin-top:36px}
  .ev.ev5::before,.ev.ev5::after{display:none}
  .ev.ev5 .ev-i{width:auto;margin:0!important;padding:22px 0 0!important;text-align:left;border-top:2px solid var(--stage-line);transition:border-color .5s;transition-delay:calc(.2s + var(--i)*.25s)}
  .sy-evo.on .ev.ev5 .ev-i{border-top-color:var(--signal)}
  .ev.ev5 .ev-i::before{left:0!important;right:auto!important;top:-9px}
  .ev.ev5 .ev-i p{margin-left:0}
}
.nu-hero{margin:30px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;padding-bottom:26px;border-bottom:2px solid var(--primary)}
.nu-hero b{font-size:min(17vw,7.2rem);max-width:100%;overflow-wrap:anywhere;font-weight:800;letter-spacing:-.04em;line-height:.95;color:var(--primary)}
.nu-hero span{font-size:var(--fs-lg);color:var(--ink);max-width:22ch;line-height:1.3}
.nu.nu4{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));margin-top:30px}
.nu.nu4 li{border-top:0;padding-top:0}
.nu.nu4 b{font-size:clamp(2.2rem,4.4vw,3.2rem)}
.nu.nu4 span{color:var(--ink);font-weight:600}
.nu.nu4 small{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.45}
.nu.nu4 .lt-bar{height:10px;margin:4px 0 2px}
@media (max-width:900px){.nu.nu4{gap:28px 22px}}
/* organigrama de FRAIM en HTML: texto real, mínimo 12-13 px */
.fo{display:flex;flex-direction:column;align-items:center;padding:22px 18px 24px;gap:0}
.fo-p{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--stage-chip);border:1px solid var(--stage-chip-line);color:#fff;font-weight:600;font-size:14px;line-height:1.2;padding:8px 14px;white-space:nowrap;position:relative}
.fo-ch{border-color:var(--signal);background:var(--core);padding:9px 20px}
.fo-cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-top:34px}
.fo-cols::before{content:"";position:absolute;left:16.6%;right:16.6%;top:-17px;border-top:1.5px solid var(--stage-chip-line)}
.fo-cols::after{content:"";position:absolute;left:50%;top:-34px;height:17px;border-left:1.5px solid var(--stage-chip-line)}
.fo-col{display:flex;flex-direction:column;align-items:center;position:relative}
.fo-col::before{content:"";position:absolute;left:50%;top:-17px;height:17px;border-left:1.5px solid var(--stage-chip-line)}
.fo-ld{font-size:13px;padding:8px 10px}
.fo-ags{display:flex;flex-direction:column;gap:8px;margin-top:76px;position:relative;align-items:center}
.fo-ags::before{content:"";position:absolute;left:50%;top:-76px;height:76px;border-left:1.5px solid var(--stage-chip-line)}
.fo-ag{background:var(--stage-2);border-color:#5B4F86;font-size:13px;padding:6px 12px;font-weight:500;color:var(--stage-soft)}
.fo-sp{position:absolute;left:-6px;right:-6px;top:52px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;padding:7px 12px;border:1.5px dashed var(--signal);border-radius:12px;background:rgba(28,22,48,.92);font-size:13px;color:var(--on-stage);z-index:1}
.fo-sp b{color:var(--signal);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .fo-p,.fo-sp{opacity:0;transition:opacity .5s}.fo-ld{transition-delay:.2s}.fo-ag{transition-delay:.45s}.fo-sp{transition-delay:.75s}
  .sy-fraim.on .fo-p,.sy-fraim.on .fo-sp{opacity:1}
}
/* móvil: el organigrama se apila en vez de encogerse */
@media (max-width:600px){
  .fo-cols{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .fo-cols::before,.fo-cols::after{display:none}
  .fo-col{flex-direction:row;justify-content:center;gap:8px;flex-wrap:wrap}
  .fo-col::before{display:none}
  .fo-ags{flex-direction:row;margin-top:0}.fo-ags::before{display:none}
  .fo-sp{position:static;margin-top:6px}
}
.sy-evo p,.sy-fraim p,.sy-num small{hyphens:manual;-webkit-hyphens:manual}
/* 24-oct (UX seq 162): al 200 % en móvil nada empuja la columna: el dibujo de FRAIM se encoge y sus píldoras pueden pasar de línea */
.sy-2>*{min-width:0}
@media (max-width:600px){.fo-ags{flex-wrap:wrap;justify-content:center}.fo-p{white-space:normal;text-align:center}.fo-sp{text-align:center}}
/* 24-oct: hitos con submarca en la línea de tiempo + enlaces al pie de la línea de tiempo */
.ev-sbm{margin:4px 0 6px!important}
.ev-sbm .sbm-w{color:var(--on-stage)}.ev-sbm .sbm-w span{color:var(--td)!important}
.sy-evo .sy-links{margin-top:34px}.sy-evo .sy-links a{color:var(--signal)}
/* 24-oct (Javier): cifras ordenadas por pieza, cada una con su submarca y su color */
.nu-sub{margin:34px 0 0;font-size:var(--fs-md);color:var(--ink-2);font-weight:700}
.nu.nu-pc{margin-top:14px}
.nu.nu-pc li{border-top:2px solid var(--tc);padding-top:14px}
.nu.nu-pc .sbm{margin-bottom:6px}
.nu.nu-run{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));margin-top:14px}
.nu.nu-run li{border-top:2px solid var(--primary);padding-top:14px}
@media (prefers-color-scheme:dark){.nu.nu-pc li{border-top-color:var(--tcd)}}
.nu .sbm b{font-size:1em;letter-spacing:0;line-height:inherit;color:inherit;font-weight:800}