:root{
  --m:24px;
  --fg:#f2f3f6; --fg-2:#b7bbc4; --fg-3:#7d828d; --fg-4:#2f333b;
  --bg:#07080b; --bg-2:#0a0b0f; --panel:#0e1015;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --acc:#8fb3ff; --acc-2:#5878c9; --acc-bg:rgba(143,179,255,.08); --acc-line:rgba(143,179,255,.34);
  --acc-glow:rgba(143,179,255,.22);
  --frame:rgba(255,255,255,.30);
  --grid:rgba(255,255,255,.024);
  --paper:#efede7;
  --r:2px; --r-lg:2px;
  --sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --col:1056px;
  --gx:calc(50% - 528px + 12px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:var(--m) var(--m); background-position:var(--gx) 72px;
  color:var(--fg-2); font:400 16px/24px var(--sans); -webkit-font-smoothing:antialiased; overflow-x:visible;
}
@media (max-width:1104px){body{background-position:24px 72px} section,.plate{background-position:24px 0}}
img{max-width:100%}
code{font-family:var(--mono); font-size:.86em; line-height:1; color:var(--fg); background:var(--panel); outline:1px solid var(--line); outline-offset:-1px; border-radius:var(--r); padding:0 .32em}
em{font-style:italic}
b,strong{color:var(--fg); font-weight:600}
a{color:var(--acc)}
.w{max-width:1104px; margin:0 auto; padding:0 24px}
.n{max-width:720px}


.top{position:sticky; top:0; z-index:20; background:rgba(7,8,11,.72);
  backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:inset 0 -1px 0 var(--line-2)}
.top .w{display:flex; align-items:center; gap:24px; height:72px}
.logo{font-family:var(--mono); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:14px; line-height:24px;
  color:var(--fg); margin-right:auto; display:inline-flex; align-items:center; gap:10px}
.logo::before{content:""; width:12px; height:12px; border:1.5px solid var(--acc); display:block; box-shadow:inset 0 0 0 2.5px var(--bg), inset 0 0 0 5px var(--acc)}
.top nav{display:flex; gap:20px}
.top nav a{color:var(--fg-2); text-decoration:none; font-size:13.5px; line-height:24px; transition:color .12s; box-shadow:0 1px 0 transparent}
.top nav a:hover{color:var(--acc); box-shadow:0 1px 0 var(--acc)}
.top .cta{background:var(--fg); color:var(--bg); text-decoration:none; height:40px; padding:0 14px; display:inline-flex; align-items:center;
  border-radius:var(--r); font-size:13px; font-weight:500; white-space:nowrap; transition:background .12s; font-family:var(--mono); letter-spacing:.02em}
.top .cta:hover{background:var(--acc)}
@media (max-width:920px){.top nav{display:none}}


section{padding:120px 0; scroll-margin-top:72px; background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:var(--m) var(--m); background-position:var(--gx) 0}
section.tint{background-color:var(--bg-2)}
@media (max-width:760px){section{padding:96px 0}}

section > .w::before{content:""; display:block; height:24px; background:linear-gradient(var(--line-2),var(--line-2)) top/100% 1px no-repeat}
section#contact > .w::before,section#cierre > .w::before{display:none}

.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2);
  margin:0 0 24px; display:flex; width:max-content; align-items:stretch; height:24px; line-height:22px;
  outline:1px solid var(--frame); outline-offset:-1px; border-radius:var(--r); overflow:hidden; padding:0 10px 0 0; gap:10px; background:var(--panel)}
.kicker[data-i]::before{content:"SHEET " attr(data-i); color:var(--bg); background:var(--fg); padding:1px 9px 0; font-weight:500; letter-spacing:.1em}
.kicker:not([data-i]){padding:0 10px}
.mid .kicker,.close .kicker{margin-left:auto; margin-right:auto}
.close{display:flex; flex-direction:column; align-items:center}

h1{font-family:var(--disp); font-size:64px; line-height:72px; letter-spacing:-.035em; font-weight:600; color:var(--fg); margin:0 auto 24px}
h2{font-family:var(--disp); font-size:36px; line-height:48px; letter-spacing:-.028em; font-weight:600; color:var(--fg); margin:0 0 24px}
h3{font-family:var(--disp); font-size:18px; line-height:24px; letter-spacing:-.012em; font-weight:600; color:var(--fg); margin:0 0 0}
@media (max-width:760px){h1{font-size:40px; line-height:48px} h2{font-size:28px; line-height:36px}}
.brk{display:none}
@media (min-width:760px){.brk{display:inline}}
p{margin:0 0 24px}
p:last-child{margin-bottom:0}
.lead{font-size:18px; line-height:24px; color:var(--fg-2)}
.lead b{font-weight:600}
.thesis{color:var(--fg); font-weight:600}
.mid{text-align:center; margin-left:auto; margin-right:auto}
.mid h2{margin-left:auto; margin-right:auto}
.src{font-size:13px; line-height:24px; color:var(--fg-3); margin-top:24px}
.src b{color:var(--fg-2); font-weight:600}
.src code{font-size:.9em}
.src a{color:var(--acc); text-decoration:none; box-shadow:0 1px 0 var(--acc-line)}
.src a:hover{box-shadow:0 1px 0 var(--acc)}
.quote{box-shadow:inset 2px 0 0 var(--acc); padding:0 0 0 24px; margin:24px 0; font-size:17px; line-height:24px; color:var(--fg)}
.quote.tight{font-size:15px}
.quote b{font-weight:600}


.btns{display:flex; gap:12px; flex-wrap:wrap}
.btns.mid{justify-content:center}
.btn{display:inline-flex; align-items:center; height:48px; padding:0 20px; border-radius:var(--r); text-decoration:none; font-size:13.5px; font-weight:500;
  border:1px solid var(--frame); background:var(--fg); color:var(--bg); transition:background .12s, border-color .12s; font-family:var(--mono); letter-spacing:.02em}
.btn:hover{background:var(--acc); border-color:var(--acc)}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--frame)}
.btn.ghost:hover{background:var(--panel); color:var(--acc); border-color:var(--acc)}


.hero{padding:96px 0 0; text-align:center}
.eyebrow{display:flex; width:max-content; margin-left:auto; margin-right:auto; align-items:center; gap:8px; height:24px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-2); background:var(--panel); outline:1px solid var(--line-2); outline-offset:-1px; border-radius:var(--r); padding:0 12px; margin-bottom:24px}
.eyebrow i{width:6px; height:6px; background:var(--acc); display:block}
.hero .lead{max-width:576px; margin:0 auto 24px}
.hero .thesis{margin-bottom:24px}


.dim{position:relative; margin:48px 0 0; padding:24px 0 0 24px; container-type:inline-size}
.dim .dx,.dim .dy{position:absolute; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc); white-space:nowrap}
.dim .dx{top:0; left:24px; right:0; height:24px; box-shadow:inset 1px 0 0 var(--acc), inset -1px 0 0 var(--acc)}
.dim .dx::before{content:""; position:absolute; left:0; right:0; top:12px; height:1px; background:var(--acc)}
.dim .dx span{position:absolute; left:50%; top:0; transform:translateX(-50%); background:var(--bg); padding:0 9px; height:24px; line-height:24px; outline:1px solid var(--acc); outline-offset:-1px}
.dim .dy{left:0; top:24px; bottom:0; width:24px; box-shadow:inset 0 1px 0 var(--acc), inset 0 -1px 0 var(--acc)}
.dim .dy::before{content:""; position:absolute; top:0; bottom:0; left:12px; width:1px; background:var(--acc)}
.dim .dy span{position:absolute; top:50%; left:0; transform:translate(-50%,-50%) rotate(-90deg); background:var(--bg); padding:0 9px; height:24px; line-height:24px; outline:1px solid var(--acc); outline-offset:-1px}
@media (max-width:600px){.dim{padding-left:0} .dim .dy{display:none} .dim .dx{left:0} .dim .dx span{font-size:10px; padding:0 6px; max-width:100%; overflow:hidden; text-overflow:ellipsis}}

.reel{position:relative; margin:0; outline:1px solid var(--frame); outline-offset:-1px; border-radius:var(--r-lg); overflow:hidden; background:var(--paper);
  height:round(nearest, calc((100cqw - 24px) * 9 / 16), 24px)}
@media (max-width:600px){.reel{height:round(nearest, calc(100cqw * 9 / 16), 24px)}}
.reel img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; animation:reel 13.5s infinite}
.reel img:nth-of-type(1){animation-delay:0s} .reel img:nth-of-type(2){animation-delay:4.5s} .reel img:nth-of-type(3){animation-delay:9s}
@keyframes reel{0%{opacity:0}3%{opacity:1}30%{opacity:1}35%{opacity:0}100%{opacity:0}}
.tags{position:absolute; left:24px; bottom:24px; display:flex; gap:6px; z-index:2}
.tags span{font-family:var(--mono); font-size:11px; letter-spacing:.04em; height:24px; line-height:24px; padding:0 10px; border-radius:var(--r);
  background:var(--bg); color:var(--fg-3); outline:1px solid var(--line-2); outline-offset:-1px; animation:tag 13.5s infinite}
.tags span:nth-child(1){animation-delay:0s} .tags span:nth-child(2){animation-delay:4.5s} .tags span:nth-child(3){animation-delay:9s}
@keyframes tag{0%,35%,100%{color:var(--fg-3); outline-color:var(--line-2); background:var(--bg)} 4%,30%{color:var(--bg); outline-color:var(--acc); background:var(--acc)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .reel img{animation:none; opacity:0} .reel img:nth-of-type(1){opacity:1} .tags span{animation:none} .tags span:nth-child(1){color:var(--bg); outline-color:var(--acc); background:var(--acc)}}


:root{--plate:#090a10; --plate-2:#0f1119; --cream:#f4f5f8; --cream-2:#b7bbc4; --cream-3:#7d828d; --plate-line:rgba(255,255,255,.14); --plate-grid:rgba(255,255,255,.035)}
.plate{background-color:var(--plate);
  background-image:linear-gradient(var(--plate-grid) 1px, transparent 1px), linear-gradient(90deg, var(--plate-grid) 1px, transparent 1px);
  background-size:var(--m) var(--m); background-position:var(--gx) 0; color:var(--cream-2)}
.plate h2,.plate b,.plate strong{color:var(--cream)}
.plate .lead{color:var(--cream-2)}
.plate .btn{background:var(--cream); color:var(--plate); border-color:var(--frame)}
.plate .btn:hover{background:#fff; border-color:#fff}
.plate .btn.ghost{background:transparent; color:var(--cream); border-color:var(--frame)}
.plate .btn.ghost:hover{background:rgba(239,232,214,.08); color:var(--cream)}
.plate .src{color:var(--cream-3)}
.plate .kicker{outline-color:var(--frame); color:var(--cream); background:transparent}
.plate .close{outline-color:var(--frame); background:var(--plate-2)}
.plate .close::before,.plate .close::after{border-color:var(--frame)}
section.plate{padding-bottom:0}
footer.plate{box-shadow:inset 0 1px 0 var(--plate-line)}
.plate .tb{outline-color:var(--frame); background:var(--plate-2)}
.plate .tb > div{box-shadow:inset -1px 0 0 var(--plate-line)}
.plate .tb span{color:var(--cream-3)}
.plate .tb b{color:var(--cream)}
footer.plate p{color:var(--cream-3)}


.diagram,.dotfig,.scroll,.unlock,.stats,.tldr,.ask,.readout,.card,.bars,.tile,.close,.more{position:relative; outline-offset:-1px}
.diagram::before,.scroll::before,.unlock::before,.stats::before,.tldr::before,.ask::before,.dotfig::before,.close::before{
  content:""; position:absolute; left:0; top:0; width:10px; height:10px; border-left:1.5px solid var(--acc); border-top:1.5px solid var(--acc); pointer-events:none; z-index:1}
.diagram::after,.scroll::after,.unlock::after,.stats::after,.tldr::after,.ask::after,.dotfig::after,.close::after{
  content:""; position:absolute; right:0; bottom:0; width:10px; height:10px; border-right:1.5px solid var(--acc); border-bottom:1.5px solid var(--acc); pointer-events:none; z-index:1}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
.card{outline:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; background:var(--panel)}
.card.on{outline-color:var(--acc); background:var(--acc-bg)}
.card .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); margin-bottom:24px; display:block; width:max-content;
  outline:1px solid var(--frame); outline-offset:-1px; height:24px; line-height:24px; padding:0 8px; background:var(--panel); position:relative}
.card .lbl::before{content:""; position:absolute; left:-25px; top:50%; width:24px; height:1px; background:var(--frame)}
.card figure{margin:0 0 24px}
.card svg{display:block; width:100%; height:auto}
.card .say{font-size:16px; line-height:24px; color:var(--fg); margin:0; font-weight:500}
.card .out{font-family:var(--mono); font-size:12px; line-height:24px; color:var(--fg-3); margin:0}
.card.on .out{color:var(--acc)}

.readout{outline:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--panel); margin-top:24px; overflow:hidden}
.readout .hd{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3);
  height:48px; padding:0 24px; box-shadow:inset 0 -1px 0 var(--line); background:var(--bg-2); margin:0}
.readout .hd i{width:6px; height:6px; background:var(--acc); display:block}
.row{display:flex; gap:16px; align-items:flex-start; padding:12px 24px; box-shadow:inset 0 -1px 0 var(--line); line-height:24px}
.row:last-child{box-shadow:none}
.row .f{font-family:var(--mono); font-size:13px; line-height:24px; color:var(--fg-3); min-width:9rem; flex-shrink:0}
.row .v{font-size:15px; line-height:24px; color:var(--fg-2)}
.row .v b{font-weight:600}
@media (max-width:560px){.row{flex-direction:column; gap:0} .row .f{min-width:0}}


.scroll{margin-top:24px; outline:1px solid var(--frame); border-radius:var(--r-lg); overflow:hidden; background:var(--panel)}
.scroll .pane{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:14px; line-height:24px; min-width:38rem}
th,td{text-align:left; padding:12px 16px; vertical-align:top; color:var(--fg-2)}
th:first-child,td:first-child{padding-left:24px; white-space:nowrap}
th:last-child,td:last-child{padding-right:24px}
td.v{white-space:nowrap}
.tfoot{box-shadow:inset 0 1px 0 var(--line-2); background:var(--bg-2); padding:24px; font-size:12.5px; line-height:24px; color:var(--fg-3)}
.tfoot b{color:var(--fg-2); font-weight:600}
.tfoot code{font-size:.9em}
.tfoot p{margin:0}
@media (min-width:900px){.tfoot{columns:2; column-gap:48px}}
thead th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2); font-weight:500; background:var(--bg-2);
  box-shadow:inset 0 -1px 0 var(--frame); white-space:nowrap}
tbody td{box-shadow:inset 0 -1px 0 var(--line)}
tbody tr:last-child td{box-shadow:none}
td.num{font-family:var(--mono); font-size:13px; white-space:nowrap}
tr.us td{background:var(--acc-bg)}
tr.us td:first-child{color:var(--acc); font-weight:600}
.yes{color:var(--acc); font-weight:600}
.no{color:var(--fg-3)}


.stages{margin-top:24px; box-shadow:inset 0 1px 0 var(--line-2)}
.stage{display:grid; grid-template-columns:72px 1fr 240px; gap:24px; align-items:start; padding:24px 0; box-shadow:inset 0 -1px 0 var(--line)}
.stage .no{font-family:var(--mono); font-size:12px; line-height:24px; color:var(--fg); letter-spacing:.08em}
.stage p{font-size:15px; line-height:24px; margin-bottom:24px}
.tile{outline:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; background:var(--panel)}
.tile .v{font-family:var(--mono); font-size:20px; line-height:24px; font-weight:500; letter-spacing:-.03em; color:var(--fg); display:block}
.tile .k{font-size:12.5px; line-height:24px; color:var(--fg-3); display:block}
@media (max-width:900px){.stage{grid-template-columns:48px 1fr; gap:24px} .stage .tile{grid-column:2}}


.bars{margin-top:24px; outline:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; background:var(--panel)}
.bars .cap{font-family:var(--mono); font-size:11px; line-height:24px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin:0 0 24px}
.bar{display:grid; grid-template-columns:11rem 1fr; gap:16px; align-items:center; height:24px}
.bar .lb{font-size:13px; color:var(--fg-2)}
.bar .tr{height:24px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center}
.bar .fill{height:8px; border-radius:1px; background:var(--fg-4); min-width:6px}
.bar.hi .fill{background:var(--acc)}
.bar .vl{font-family:var(--mono); font-size:12.5px; color:var(--fg-3); white-space:nowrap}
.bar.hi .vl{color:var(--acc)}
@media (max-width:620px){.bar{grid-template-columns:1fr; height:48px; gap:0} .bar .lb{font-size:12.5px; color:var(--fg-3)}}


figure{margin:24px 0 0; container-type:inline-size}
figure img{width:100%; height:round(up, calc(100cqw * var(--ar, .7)), 24px); object-fit:contain; background:var(--paper); display:block; outline:1px solid var(--line-2); outline-offset:-1px; border-radius:var(--r-lg)}
figcaption{font-size:13px; line-height:24px; color:var(--fg-3); margin-top:0}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:24px}
.duo figure{margin:0}
.duo figure img{object-fit:contain; background:var(--paper)}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.diagram{margin-top:24px; outline:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--panel); padding:24px; overflow-x:auto; container-type:inline-size}
.diagram > svg{display:block; width:100%; min-width:640px; height:round(up, calc(max(100cqw - 48px, 640px) * var(--ar, .43)), 24px)}
.diagram.tightpad{padding:24px}
.dotfig{margin-top:24px; outline:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--panel); padding:24px; container-type:inline-size}
.dotfig svg{display:block; width:100%; max-width:432px; height:round(up, calc(min(100cqw - 48px, 432px) * var(--ar, .45)), 24px)}
.dotfig .lg{display:flex; gap:24px; margin-top:24px; flex-wrap:wrap; line-height:24px}
.dotfig .lg span{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-3)}
.dotfig .lg i{width:9px; height:9px; border-radius:50%; display:block; background:var(--line-2)}
.dotfig .lg span.on i{background:var(--acc)}


.stats{display:grid; grid-template-columns:repeat(4,1fr); outline:1px solid var(--frame); border-radius:var(--r-lg); overflow:hidden; margin-top:24px; background:var(--panel)}
.stats div{padding:24px 16px; text-align:center; position:relative; box-shadow:inset -1px 0 0 var(--line-2)}
.stats div:last-child{box-shadow:none}
.stats div::before{content:""; position:absolute; left:16px; right:16px; top:12px; height:1px; background:var(--acc); opacity:.55}
.stats .v{font-family:var(--disp); font-size:31px; line-height:48px; font-weight:600; letter-spacing:-.035em; color:var(--fg); display:block}
.stats .k{font-family:var(--mono); font-size:11.5px; line-height:24px; letter-spacing:.02em; color:var(--fg-3); display:block}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr} .stats div:nth-child(2){box-shadow:inset 0 -1px 0 var(--line-2)} .stats div:nth-child(1){box-shadow:inset -1px -1px 0 var(--line-2)}}


.tldr{margin:48px 0 0; outline:1px solid var(--frame); border-radius:var(--r-lg); background:var(--panel); overflow:hidden; text-align:left}
.tldr a{color:var(--acc); text-decoration:none; box-shadow:0 1px 0 var(--acc-line); white-space:nowrap}
.tldr a:hover{box-shadow:0 1px 0 var(--acc)}
.tldr .hd{display:flex; align-items:center; gap:8px; height:48px; padding:0 24px; background:var(--bg-2); box-shadow:inset 0 -1px 0 var(--frame);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2); margin:0}
.tldr .hd i{width:6px; height:6px; background:var(--acc); display:block}
.tldr .r{display:grid; grid-template-columns:168px 1fr; align-items:start; gap:24px; padding:24px; box-shadow:inset 0 -1px 0 var(--line); align-items:baseline}
.tldr .r:last-child{box-shadow:none}
.tldr .r > .q{font-family:var(--mono); font-size:11.5px; line-height:24px; letter-spacing:.06em; color:var(--acc); text-transform:uppercase}
.tldr .r > .a{font-size:15px; line-height:24px; color:var(--fg-2); margin:0}
.tldr .r > .a b{color:var(--fg); font-weight:600}
@media (max-width:680px){.tldr .r{grid-template-columns:1fr; gap:0}}


.ask{margin-top:24px; outline:1px solid var(--acc); border-radius:var(--r-lg); background:var(--acc-bg); overflow:hidden}
.ask .q{padding:24px; box-shadow:inset 0 -1px 0 var(--acc-line); background:var(--panel)}
.ask .q p{margin:0; font-size:16.5px; line-height:24px; color:var(--fg); font-weight:500}
.ask .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; display:block; width:max-content; height:24px; line-height:24px; padding:0 8px; margin-bottom:24px; background:var(--panel); outline-offset:-1px}
.ask .q .lbl{color:var(--fg); outline:1px solid var(--frame)}
.ask .a{padding:24px}
.ask .a .lbl{color:var(--acc); outline:1px solid var(--acc)}
.hop{display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:0; margin:0 0 24px}
.hop span{font-family:var(--mono); font-size:12.5px; height:24px; line-height:24px; padding:0 11px; border-radius:var(--r); background:var(--panel); outline:1px solid var(--acc-line); outline-offset:-1px; color:var(--fg-2); white-space:nowrap}
.hop span.end{background:var(--acc); outline-color:var(--acc); color:var(--bg)}
.hop em{color:var(--acc); font-style:normal; font-size:13px; opacity:.7; line-height:24px}
.ask .why{box-shadow:inset 0 1px 0 var(--acc-line); padding-top:24px; margin-top:0}
.ask .why p{font-size:14px; line-height:24px; color:var(--fg-2); margin:0 0 24px}
.ask .why p:last-child{margin-bottom:0}
.ask .why code{background:var(--panel); outline-color:var(--acc-line)}


.close{outline:1px solid var(--frame); border-radius:var(--r-lg); background:var(--panel); padding:72px 24px; text-align:center}
.close .lead{max-width:600px; margin-left:auto; margin-right:auto}
footer{padding:0 0 48px; background:var(--bg)}
.tb{display:grid; grid-template-columns:repeat(6,1fr); outline:1px solid var(--frame); outline-offset:-1px; background:var(--panel)}
.tb > div{padding:12px 16px; box-shadow:inset -1px 0 0 var(--line-2); min-width:0}
.tb > div:last-child{box-shadow:none}
.tb span{display:block; font-family:var(--mono); font-size:10px; line-height:24px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}
.tb b{display:block; font-family:var(--mono); font-size:12.5px; line-height:24px; font-weight:500; color:var(--fg); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb > div:first-child b{font-weight:600; letter-spacing:.12em; text-transform:uppercase}
footer p{font-size:12px; line-height:24px; color:var(--fg-3); margin:24px 0 0; font-family:var(--mono); letter-spacing:.02em}
@media (max-width:860px){.tb{grid-template-columns:repeat(3,1fr)} .tb > div:nth-child(3){box-shadow:inset 0 -1px 0 var(--line-2)} .tb > div:nth-child(-n+2){box-shadow:inset -1px -1px 0 var(--line-2)}}
@media (max-width:520px){.tb{grid-template-columns:1fr 1fr} .tb > div{box-shadow:inset -1px -1px 0 var(--line-2)} .tb > div:nth-child(2n){box-shadow:inset 0 -1px 0 var(--line-2)}}


.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px}
@media (max-width:860px){.grid-3{grid-template-columns:1fr}}
.grid-3 .card p{font-size:15px; line-height:24px; color:var(--fg-2); margin:0}
.grid-3 .card h3{margin-bottom:0}
.grid-3 .card .lbl{margin-bottom:24px}


.unlock{display:grid; grid-template-columns:1fr 1fr; outline:1px solid var(--frame); border-radius:var(--r-lg); overflow:hidden; margin-top:24px; background:var(--panel)}
.unlock > div{background:var(--panel); padding:24px; box-shadow:inset -1px -1px 0 var(--line-2)}
.unlock > div:nth-child(2n){box-shadow:inset 0 -1px 0 var(--line-2)}
.unlock > div:nth-last-child(-n+2){box-shadow:inset -1px 0 0 var(--line-2)}
.unlock > div:last-child{box-shadow:none}
.unlock h3{margin-bottom:0}
.unlock p{font-size:14.5px; line-height:24px; color:var(--fg-3); margin:0}
.unlock p b{color:var(--fg-2); font-weight:600}
.unlock .t{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); margin:0 0 24px;
  display:block; width:max-content; outline:1px solid var(--frame); outline-offset:-1px; height:24px; line-height:24px; padding:0 8px; background:var(--panel); position:relative}
.unlock .t::before{content:""; position:absolute; left:-25px; top:50%; width:24px; height:1px; background:var(--frame)}
.unlock .t::after{content:""; position:absolute; left:-27px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--acc)}
@media (max-width:760px){.unlock{grid-template-columns:1fr} .unlock > div{box-shadow:inset 0 -1px 0 var(--line-2)} .unlock > div:last-child{box-shadow:none}}


.more{margin-top:24px; outline:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--panel)}
.more > summary{list-style:none; cursor:pointer; height:48px; padding:0 24px; display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--fg-2); transition:color .12s}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"+"; margin-left:auto; color:var(--fg-3); font-size:16px; line-height:1; display:inline-block; transition:transform .15s}
.more[open] > summary::after{transform:rotate(45deg)}
.more > summary:hover{color:var(--fg)}
.more[open] > summary{box-shadow:inset 0 -1px 0 var(--line)}
.more .body{padding:0 24px 24px}
.more .body > :first-child{margin-top:24px}
.more .body .stages{box-shadow:none; margin-top:0}
.more .body .scroll{margin-top:24px}


.doc{display:none}
body[data-lang="en"] #doc-en{display:block}
body[data-lang="es"] #doc-es{display:block}
.lang{display:inline-flex; outline:1px solid var(--frame); outline-offset:-1px; border-radius:var(--r); overflow:hidden; background:var(--panel); flex-shrink:0; height:32px}
.lang button{appearance:none; border:0; background:transparent; cursor:pointer; font:500 11.5px/1 var(--mono); letter-spacing:.06em; color:var(--fg-3); padding:0 9px; transition:color .12s, background .12s}
.lang button:hover{color:var(--fg)}
.lang button.on{background:var(--fg); color:var(--bg)}
@media (max-width:520px){.lang button{padding:0 7px; font-size:11px}}
.theme{display:inline-flex; align-items:center; height:32px; padding:0 9px; text-decoration:none; font:500 11.5px/1 var(--mono); letter-spacing:.06em; flex-shrink:0; border-radius:var(--r); outline-offset:-1px; transition:color .12s, background .12s}
.theme{outline:1px solid var(--frame); background:var(--panel); color:var(--fg-3)}
.theme:hover{color:var(--fg); background:var(--bg-2)}


.hero{padding-top:120px}
.hero h1{margin-bottom:48px}
.hero .thesis{margin-bottom:24px}
.hero .lead:not(.thesis){margin-bottom:48px; color:var(--fg-3)}
.hero .lead:not(.thesis) b{font-weight:400; color:var(--fg-2)}
.hero .dim{margin-top:96px}
@media (max-width:760px){.hero h1{margin-bottom:24px} .hero .lead:not(.thesis){margin-bottom:24px} .hero .dim{margin-top:48px}}


@media (max-width:640px){

  .top .w{gap:10px}
  .logo{font-size:0; gap:0; margin-right:auto}
  .lang{height:40px} .lang button{padding:0 12px; font-size:12px}
  .theme{height:40px; padding:0 11px; font-size:12px}
  .top .cta{padding:0 12px; font-size:12.5px}

  section{padding:72px 0}
  section#problem,section#problema,section#contact,section#cierre{padding-top:72px !important}
  .hero{padding-top:72px}

  .kicker,.eyebrow,.card .lbl,.unlock .t,.ask .lbl,.tb span,.stats .k,.card .out,.tldr .r > .q,.readout .hd,.tldr .hd,.bars .cap,thead th,.stage .no,.tile .k,.tags span,.dim .dx,.dim .dy{font-size:11.5px}
  .tb b{font-size:12.5px}

  .tags{left:12px; bottom:12px; right:12px; gap:4px; flex-wrap:wrap}
  .tags span{white-space:nowrap; padding:0 8px; font-size:10.5px; letter-spacing:.02em}

  .hero .btns{flex-direction:column; align-items:stretch}
  .hero .btn{justify-content:center}

  .close{padding:48px 20px}
  .quote{padding-left:16px}
}

  .unlock > div,.card,.grid-2 > *,.grid-3 > *{min-width:0}
  .unlock .t,.card .lbl,.ask .lbl,.kicker,.eyebrow{max-width:100%; height:auto; min-height:24px; white-space:normal}
  .dim .dx span{font-size:11px}



.scroll .pane,.diagram{transition:box-shadow .2s}
.scroll .pane.can-scroll,.diagram.can-scroll{box-shadow:inset -56px 0 36px -36px var(--bg-2)}


body{position:relative}
body::before{content:""; position:absolute; left:50%; top:-320px; width:min(1400px,100%); height:1000px; transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, rgba(143,179,255,.28) 0%, rgba(143,179,255,.07) 32%, transparent 62%)}
body > *{position:relative; z-index:1}
::selection{background:rgba(143,179,255,.28); color:#fff}
.logo::before{box-shadow:inset 0 0 0 2.5px var(--bg), inset 0 0 0 5px var(--acc), 0 0 14px var(--acc-glow)}
.eyebrow i,.readout .hd i,.tldr .hd i,.unlock .t::after{box-shadow:0 0 10px var(--acc)}
.dotfig .lg span.on i{box-shadow:0 0 10px var(--acc-glow)}
.btn{box-shadow:0 8px 28px rgba(143,179,255,.10)}
.btn:hover,.top .cta:hover{box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 10px 36px var(--acc-glow)}
.reel{box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 160px rgba(143,179,255,.10)}
figure img{box-shadow:0 24px 80px rgba(0,0,0,.5)}
.bar.hi .fill{box-shadow:0 0 16px var(--acc-glow)}
.hop span.end{box-shadow:0 0 18px var(--acc-glow)}
.card.on{box-shadow:0 0 60px rgba(143,179,255,.06)}
.ask{box-shadow:0 0 80px rgba(143,179,255,.06)}
h1,h2,.stats .v{background:linear-gradient(180deg, #ffffff 0%, #cfd4de 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
h2{width:max-content; max-width:100%}
section.plate{position:relative}
section.plate::before{content:""; position:absolute; left:50%; bottom:-200px; width:min(1200px,100%); height:700px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, var(--acc-glow) 0%, rgba(143,179,255,.05) 35%, transparent 65%)}
.plate > .w{position:relative}


:root{color-scheme:dark}
:root[data-theme=light]{color-scheme:light;--fg:#15130f;--fg-2:#46443f;--fg-3:#64605a;--fg-4:#c4bfb3;--bg:#f4f1ea;--bg-2:#ede9e0;--panel:#eeeae1;--line:rgba(21,19,15,.10);--line-2:rgba(21,19,15,.22);--acc:#1f3fb8;--acc-2:#4864bb;--acc-bg:rgba(31,63,184,.05);--acc-line:rgba(31,63,184,.3);--acc-glow:transparent;--frame:rgba(21,19,15,.3);--grid:rgba(21,19,15,.04)}
:root[data-theme=light] body::before{display:none}
:root[data-theme=light] h1,:root[data-theme=light] h2{-webkit-text-fill-color:var(--fg);background:none}
:root[data-theme=light] .plate h2{-webkit-text-fill-color:var(--cream)}
:root[data-theme=light] .top{background:rgba(244,241,234,.9)}
:root[data-theme=light] .showcase,:root[data-theme=light] .shot img{box-shadow:none}
button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--acc);outline-offset:4px}[hidden]{display:none!important}
.skip{position:fixed;top:-100px;left:24px;padding:12px;background:var(--fg);color:var(--bg);z-index:30}.skip:focus{top:10px}
.top .nav{gap:24px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font:600 15px/1 var(--sans);letter-spacing:-.01em;color:var(--fg)!important;margin-right:auto;flex-shrink:0}.brand svg{width:16px;height:16px;color:var(--acc);filter:drop-shadow(0 0 6px var(--acc-glow))}
.nav-links{display:flex;gap:24px}.tools{display:flex;gap:12px;align-items:center}.languages{display:flex;outline:1px solid var(--frame);outline-offset:-1px;border-radius:2px;overflow:hidden}.languages button{border:0;background:var(--panel);color:var(--fg-2);font:12px var(--mono);padding:8px 9px;min-height:32px}.languages button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.theme{border:0;min-width:55px;justify-content:center;font-size:11px}.top .nav-cta{height:40px;font-size:12px;padding:0 14px}.button{gap:12px}.hero{background:none;padding-bottom:0;scroll-margin-top:72px}.hero>.w::before{display:none}.hero-head{text-align:center}.hero .lead{line-height:24px}.hero .thesis{font-size:20px;line-height:30px}.hero h1{max-width:100%;line-height:72px}.actions{display:flex;gap:12px;justify-content:center}.hero-copy{display:none}.scales{display:none}
.showcase{text-align:left;background:var(--panel);outline:1px solid var(--frame);outline-offset:-1px;box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 160px rgba(143,179,255,.10)}.showcase-bar{display:flex;justify-content:space-between;gap:20px;padding:12px 24px;font:11px/24px var(--mono);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line-2)}.capture-label{color:var(--fg-3)}.showcase-body{position:relative;display:flex;flex-direction:column}.shot{margin:0;background:var(--paper);position:relative}.shot button{display:block;padding:0;border:0;width:100%;background:none;position:relative}.shot img{display:block;width:100%;height:528px;object-fit:contain}.zoom-mark{position:absolute;bottom:16px;right:16px;background:var(--bg);color:var(--fg);border:1px solid var(--frame);font:24px/32px var(--mono);width:34px;height:34px}.showcase-side{padding:18px 24px;display:flex;gap:32px;align-items:center;justify-content:space-between;background:var(--bg)}.view-buttons{display:flex;gap:8px;flex-shrink:0}.view-buttons button{display:flex;gap:8px;padding:8px 12px;border:1px solid var(--frame);border-radius:2px;font:11px/20px var(--mono);background:var(--panel);color:var(--fg-2)}.view-buttons button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:var(--bg)}.view-caption h2{font:500 13px/24px var(--mono);margin:0;width:auto;-webkit-text-fill-color:var(--fg);background:none}.view-caption p{font-size:12px;line-height:18px;margin:0;color:var(--fg-3);max-width:410px}.section-intro{max-width:720px;font-size:18px;line-height:26px}.cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;outline:1px solid var(--line-2);background:var(--bg-2)}.card{margin:0;padding:36px 24px;border:0;background:transparent;box-shadow:inset -1px 0 0 var(--line-2);min-width:0}.card:last-child{box-shadow:none}.card-num{font:11px/24px var(--mono);letter-spacing:.1em;color:var(--acc);margin-bottom:24px}.card h3{font-size:18px;line-height:24px;margin:0 0 24px}.card p{font-size:15px;line-height:24px;margin:0}.meaning{margin-top:96px}.meaning-note,.method-end{margin:24px 0 0;font-size:16px;line-height:24px}.semantic-figure{margin:48px 0 0;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;outline:1px solid var(--line-2);padding:36px;background:var(--bg-2)}.semantic-plan svg{display:block;width:100%;height:auto}.plan-wall{fill:none;stroke:var(--fg-3);stroke-width:3}.plan-furniture{fill:var(--acc-bg);stroke:var(--acc-2);stroke-width:1.5}.plan-name{fill:var(--acc);font:12px var(--mono);letter-spacing:1px}.selected-chair{fill:var(--acc-bg);stroke:var(--acc);stroke-width:1.5}.selected-chair circle{fill:none;stroke-dasharray:4 4}.plan-leader{stroke:var(--acc);fill:none}.plan-point{fill:var(--acc)}.plan-route{fill:none;stroke:var(--acc);stroke-dasharray:3 5}.semantic-card{padding:24px;border:1px solid var(--acc-line);background:var(--panel);min-width:0}.label{display:inline-block;font:11px/24px var(--mono);color:var(--acc);text-transform:uppercase;letter-spacing:.06em}.semantic-card h3{font-size:26px;line-height:36px;margin:12px 0 24px}.semantic-card dl{margin:0}.semantic-card dl>div{display:grid;grid-template-columns:1fr 1.5fr;gap:16px;border-top:1px solid var(--line);padding:10px 0;font-size:14px}.semantic-card dt{color:var(--acc);font-family:var(--mono);font-size:12px}.semantic-card dd{margin:0}.semantic-card .src{font-size:11px;line-height:18px;color:var(--fg-3)}
.method-figure{margin:48px 0 0}.method-nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}.method-node{padding:24px;background:var(--panel);border:1px solid var(--frame);position:relative}.method-node h3{margin:12px 0 24px}.method-node p{font-size:15px;line-height:24px}.flow-arrow{position:absolute;right:-35px;top:42%;font:25px var(--mono);color:var(--acc)}.loop-return{margin:24px 24px 0;border:1px solid var(--acc-line);border-top:0;text-align:center;padding:16px;font:12px/24px var(--mono);color:var(--acc);display:flex;gap:14px;justify-content:center}.loop-return span{font-size:24px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;padding:0;margin:48px 0 0;list-style:none;counter-reset:step}.steps li{counter-increment:step;padding:24px 0;border-top:1px solid var(--line-2)}.steps li:before{content:'0' counter(step);display:block;color:var(--acc);font:12px/24px var(--mono);margin-bottom:24px}.steps h3{margin:0 0 12px}.steps p{font-size:15px;line-height:24px}.edit{display:grid;grid-template-columns:1fr 1fr;gap:72px;border-top:1px solid var(--line-2);padding-top:72px;margin-top:72px}.edit h2{font-size:30px;line-height:36px}.requests{list-style:none;padding:0;margin:0}.requests li{padding:24px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line-2);font-size:15px}.request-note{font:11px/24px var(--mono);color:var(--fg-3)}.dotfig{margin:36px 0 0}.dotfig svg{width:100%;max-width:360px;height:auto;display:block}.dot-kept{fill:var(--fg-4);background:var(--fg-4)}.dot-selected{fill:var(--acc);background:var(--acc)}.dot-ring{fill:none;stroke:var(--acc);stroke-opacity:.5}.dot-legend{display:flex;flex-wrap:wrap;gap:8px 22px;font:11px/24px var(--mono);margin-top:18px}.dot-legend span{display:flex;align-items:center;gap:7px}.dot-legend i{display:inline-block;width:7px;height:7px;border-radius:50%}
.delivery{display:grid;grid-template-columns:1fr 1.2fr;gap:72px}.delivery h3{font-size:24px;line-height:30px;margin:0 0 24px}.formats{margin-top:24px}.format{display:flex;justify-content:space-between;gap:24px;padding:12px 0;border-top:1px solid var(--line-2);font-size:13px}.format span{color:var(--fg-3);text-align:right}.contact-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:72px}.contact h2{font-size:48px;line-height:60px}.contact-note{font-size:12px;margin-top:24px}.footer{padding:24px 0}.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line-2);padding:24px}.footer a{font:600 13px var(--mono);letter-spacing:.12em;text-decoration:none;color:var(--fg)}.footer p{margin:0;font-size:11px;text-align:right}
dialog{padding:0;border:1px solid var(--frame);background:var(--bg);color:var(--fg);max-width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}dialog::backdrop{background:rgba(0,0,0,.85)}.dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 18px;font-size:13px}.dialog-bar button{background:var(--panel);color:var(--fg);border:1px solid var(--frame);padding:8px 12px}.dialog-image{display:block;max-width:100%;max-height:calc(100dvh - 130px);object-fit:contain;margin:auto}
@media(max-width:1050px){.nav-links{gap:16px}.top .nav{gap:16px}.shot img{height:480px}.showcase-side{gap:20px}.view-caption p{display:none}}
@media(max-width:760px){.top .nav{display:flex}.nav-links{display:none}.brand{font-size:12px!important}.top .nav-cta{font-size:11px;padding:0 10px}.top .nav{gap:12px}.tools{gap:8px}.hero h1{font-size:40px;line-height:48px}.hero .thesis{font-size:18px;line-height:26px}.hero .lead{font-size:17px;line-height:26px}.hero .actions{max-width:450px;margin:auto}.hero .eyebrow{font-size:10px}.hero .dim{margin-top:48px}.shot img{height:340px}.showcase-bar{padding:10px 14px;font-size:10px;gap:10px}.showcase-side{padding:12px;justify-content:center}.view-caption{display:none}.view-buttons{gap:6px}.view-buttons button{padding:8px 10px;font-size:10px;gap:5px}.cards{grid-template-columns:1fr;margin-top:36px}.card{padding:24px;box-shadow:inset 0 -1px 0 var(--line-2)}.card h3{margin-bottom:12px}.card-num{margin-bottom:12px}.meaning{margin-top:72px}.semantic-figure{grid-template-columns:1fr;padding:18px;gap:12px;margin-top:36px}.semantic-card{padding:24px}.semantic-card dl>div{font-size:14px}.method-nodes{grid-template-columns:1fr;gap:32px}.flow-arrow{right:50%;top:auto;bottom:-30px;transform:rotate(90deg);font-size:22px}.method-node{padding:24px}.method-node h3{margin:6px 0 12px}.method-node p{margin:0}.loop-return{margin:24px 0 0;padding:12px;font-size:11px}.steps{grid-template-columns:1fr 1fr;gap:0 24px;margin-top:36px}.steps li:before{margin-bottom:12px}.steps h3{font-size:17px}.edit{grid-template-columns:1fr;gap:32px;padding-top:48px;margin-top:48px}.edit h2{font-size:28px}.delivery{grid-template-columns:1fr;gap:24px}.format{font-size:12px;gap:12px}.contact-grid{grid-template-columns:1fr;gap:24px}.contact h2{font-size:40px;line-height:48px;margin:0}.footer{padding:24px}.footer .wrap{padding:18px}.footer p{font-size:10px;line-height:18px}.section-intro{font-size:17px;line-height:26px}.semantic-card .src{font-size:11px}.dim .dx span{font-size:9px}}
@media(max-width:400px){.brand span{display:none}.top .nav{gap:12px}.brand svg{width:20px;height:20px}.hero h1{font-size:36px;line-height:43px}.steps{grid-template-columns:1fr}.shot img{height:280px}.hero .lead{font-size:16px}.view-buttons button{padding:7px}.showcase-bar{font-size:9px}.kicker{font-size:10px}.semantic-card{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.top .nav .nav-cta{color:var(--bg);background:var(--fg);border-color:var(--fg)}
@media(max-width:360px){.top .nav-cta{display:none}}
.contact-grid>*{min-width:0}.contact h2{width:auto}

/* Escena de producto: un único contexto activo. */
.shot{position:relative;aspect-ratio:1.43;overflow:hidden}
.shot>button{width:100%;height:100%}.shot>button>img{width:100%;height:100%;object-fit:cover}
.shot.has-3d:has(.demo-host[data-ready=true])>button{visibility:hidden}
.demo-host{position:absolute;inset:0;background:transparent;isolation:isolate}
.demo-host canvas{opacity:0;display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px}
.demo-host[data-ready=true] canvas{opacity:1}
.demo-status{position:absolute;top:14px;right:14px;padding:10px 14px;border-radius:4px;background:#f8f6f0eb;color:#343b3b;z-index:3;font:11px var(--mono)}
.demo-status[hidden]{display:none}
.demo-rotation{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:12px;white-space:nowrap;background:#f8f6f0e8;border:1px solid #bbb7ab70;border-radius:4px;padding:5px 8px;color:#37403f;font:10px var(--mono);box-shadow:0 2px 14px #00000012}
.demo-rotation button{border:0;background:transparent;color:inherit;cursor:pointer;min-width:32px;min-height:30px;font-size:20px}.demo-rotation button:hover{background:#dedbd1}
@media(max-width:600px){.demo-rotation{bottom:24px;font-size:9px;gap:3px;padding:2px 4px}.demo-rotation button{min-width:28px;min-height:27px}.shot{aspect-ratio:1.12}}

/* Cámara guiada de presentación, sin animación automática. */
.demo-toolbar,.demo-controls{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;color:#333c3c}
.demo-toolbar{top:18px;right:18px}.demo-controls{bottom:20px;left:50%;transform:translateX(-50%);white-space:nowrap}
.demo-toolbar button,.demo-controls button{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:40px;height:40px;padding:0 11px;border:1px solid #fff8;border-radius:5px;background:#f8f7f0ed;color:#333c3c;font:11px var(--mono);box-shadow:0 2px 12px #14242812;transition:background .15s}
.demo-toolbar button:hover,.demo-controls button:hover{background:#fff}.demo-toolbar svg{width:18px;height:18px}.demo-toolbar button:focus-visible,.demo-controls button:focus-visible{outline:2px solid #1f3fb8;outline-offset:3px}
.demo-controls .demo-rotation{position:static;transform:none;display:flex;gap:0;align-items:center;padding:0;border:1px solid #fff8;border-radius:5px;background:#f8f7f0ed;box-shadow:0 2px 12px #14242812}
.demo-controls .demo-rotation button{border:0;background:transparent;box-shadow:none;font-size:17px}.demo-controls .demo-rotation span{font:10px var(--mono);padding:0 7px;color:#333c3c}
.demo-zoom{display:flex;gap:1px}.demo-zoom button{font-size:20px}.demo-zoom button:first-child{border-radius:5px 0 0 5px}.demo-zoom button:last-child{border-radius:0 5px 5px 0}
.demo-controls [data-explore]{display:none}.demo-host[data-ready=false] .demo-toolbar,.demo-host[data-ready=false] .demo-controls{visibility:hidden}
.demo-status{top:18px;left:18px;right:auto}.demo-host canvas{cursor:grab}.demo-host canvas:active{cursor:grabbing}
dialog.demo-expanded{width:calc(100vw - 48px);height:calc(100dvh - 48px);max-width:none;max-height:none;border:1px solid var(--frame);padding:0;overflow:hidden;background:var(--bg);box-shadow:0 32px 120px #0009}
dialog.demo-expanded::backdrop{background:#070b10e8;backdrop-filter:blur(8px)}
.demo-expanded .showcase{height:100%;display:flex;flex-direction:column;box-shadow:none;outline:0}.demo-expanded .showcase-bar{flex-shrink:0}.demo-expanded .showcase-body{flex:1;min-height:0}.demo-expanded .shot{flex:1;min-height:0;aspect-ratio:auto}.demo-expanded .showcase-side{flex-shrink:0}
@media(pointer:coarse){.demo-controls [data-explore]{display:flex}.demo-controls .demo-rotation span{display:none}.demo-toolbar button,.demo-controls button{min-width:44px;height:44px}.demo-host[data-active=true]{outline:2px solid #7298bd;outline-offset:-2px}}
@media(max-width:760px){.demo-toolbar{top:10px;right:10px;gap:6px}.demo-controls{bottom:12px;gap:6px}.demo-controls .demo-rotation span{display:none}.demo-toolbar button{height:40px}.demo-expanded{margin:8px!important}dialog.demo-expanded{width:calc(100vw - 16px);height:calc(100dvh - 16px)}.demo-expanded .showcase-side{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.demo-toolbar button,.demo-controls button{transition:none}}

body:has(.demo-expanded[open]){overflow:hidden}
.demo-expanded .demo-controls [data-explore]{display:none}

.demo-host[data-detail="loading"]::after { content:"Refining detail…"; position:absolute; top:18px; left:18px; padding:9px 12px; background:rgba(24,34,35,.82); color:#fff; border:1px solid rgba(255,255,255,.24); border-radius:3px; font:11px var(--mono,monospace); pointer-events:none; }
html[lang="es"] .demo-host[data-detail="loading"]::after { content:"Cargando detalle…"; }
.demo-host[data-detail="error"]::after { content:"Detail unavailable. Reload to retry."; position:absolute;top:18px;left:18px;background:#343b3b;color:#fff;padding:9px;font-size:12px; }
html[lang="es"] .demo-host[data-detail="error"]::after { content:"Detalle no disponible. Recarga para reintentar."; }

/* La ciudad se descarga en una experiencia dedicada, sólo al abrir Demo. */
.city-demo-launch{display:block;position:relative;color:#fff;overflow:hidden;text-decoration:none;background:#141b21}
.city-demo-launch img{transition:transform .6s ease;object-fit:cover}
.city-demo-launch:hover img{transform:scale(1.025)}
.city-demo-launch:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.city-demo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding:36px 20px;background:linear-gradient(transparent 50%,#070b10bd)}
.city-demo-button{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border:1px solid #ffffff80;background:#f5f6f5;color:#172029;box-shadow:0 8px 36px #0005;font:500 13px/20px var(--mono);letter-spacing:.03em;transition:background .2s}
.city-demo-button svg{width:22px;height:22px}.city-demo-launch:hover .city-demo-button{background:#fff}
.city-demo-note{font:12px/18px var(--sans);text-align:center;color:#e3e7e9}
@media(prefers-reduced-motion:reduce){.city-demo-launch img{transition:none}.city-demo-launch:hover img{transform:none}}
@media(max-width:600px){.city-demo-overlay{padding:22px 14px}.city-demo-button{padding:13px 18px}.city-demo-note{max-width:250px}}

.city-live{position:absolute;inset:0;background:#10151c}.city-live iframe{width:100%;height:100%;border:0;display:block}.city-live-status{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:32px;background:#10151cf2;color:#f0f3f5;text-align:center;font:14px/24px var(--mono)}.city-live-status[hidden]{display:none}.city-live-controls{position:absolute;top:12px;right:12px;display:flex;gap:8px}.city-live-controls button{width:36px;height:36px;display:grid;place-items:center;background:#111820d9;border:1px solid #ffffff45;color:white;font-size:24px;line-height:1;border-radius:3px}.city-running>.city-demo-launch{visibility:hidden}.city-expanded{width:94vw;height:90vh;max-width:none;max-height:none;padding:0;border:1px solid #485366;background:#10151c;overflow:hidden}.city-expanded .shot,.city-expanded .city-demo-launch,.city-expanded .city-demo-launch img{height:100%;width:100%}.city-expanded::backdrop{background:#060b12e8;backdrop-filter:blur(8px)}body:has(.city-expanded[open]){overflow:hidden}
/* La captura real permanece visible mientras el visor se prepara. */
.city-running>.city-demo-launch{visibility:visible;pointer-events:none}
.city-running .city-demo-overlay{visibility:hidden}
.city-live{background:transparent}
.city-live iframe{opacity:0;transition:none}
.shot[data-city-ready="true"] .city-live{background:#10151c}
.shot[data-city-ready="true"] .city-live iframe{opacity:1}
.city-live-status{inset:auto auto 24px 50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);padding:12px 18px;gap:12px;border:1px solid #ffffff40;border-radius:4px;background:#10151ceb;box-shadow:0 8px 24px #0003;font:13px/20px var(--sans)}
.shot[data-city-ready="loading"] .city-live-status::before{content:"";width:18px;height:18px;border:2px solid #ffffff35;border-top-color:#fff;border-radius:50%;animation:city-loading 1s linear infinite}
@keyframes city-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.city-live iframe{transition:none}.shot[data-city-ready="loading"] .city-live-status::before{animation:none}}

/* La entrada directa a Ciudad conserva espacio para la cabecera fija. */
.shot[data-panel="0"]{scroll-margin-top:96px}

/* Popover conserva el iframe y sus buffers al ampliar, sin desmontar el documento. */
.shot.city-expanded{position:fixed;inset:5vh 3vw;margin:0;width:94vw;height:90vh;aspect-ratio:auto}

[data-continuous-view]{scroll-margin-top:96px}

[data-continuous-demo] .showcase-side{justify-content:flex-start;text-align:left}
[data-continuous-demo] .view-caption:not([hidden]){display:block}
[data-continuous-demo] .view-caption p{display:block}

[data-continuous-view] .city-live-controls button{background:#0e1116ed;border:1px solid #545962;border-radius:2px;color:#b8bdc6;font:20px/20px var(--mono);box-shadow:0 3px 16px #0002;transition:background .2s,color .2s}
[data-continuous-view] .city-live-controls button:hover{background:#202735;color:#8fb3ff}
[data-continuous-view] .city-live-controls button:focus-visible{outline:2px solid #8fb3ff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){[data-continuous-view] .city-live-controls button{transition:none}}

/* Theater presentation: one resident iframe, animated in the compositor. */
.shot.city-expanded{inset:5dvh 3vw;width:94vw;height:90dvh;border:1px solid #ffffff30;border-radius:12px;transform-origin:top left;box-shadow:0 24px 100px #0009;overscroll-behavior:contain}
.city-expanded::backdrop{background:#060b12ed;backdrop-filter:none}
[data-continuous-view] .city-live-controls{display:none}
.city-theater-placeholder{width:100%;pointer-events:none}
@media(max-width:760px){
 [data-continuous-demo] .showcase-bar{display:none}
 [data-continuous-view].shot:not(.city-expanded){height:90svh;min-height:0;aspect-ratio:auto}
 [data-continuous-view]>.city-demo-launch,[data-continuous-view]>.city-demo-launch img{height:100%;object-fit:cover}
 .shot.city-expanded{inset:5dvh 2vw;width:96vw;height:90dvh;border-radius:10px}
 [data-continuous-demo] .showcase-side{padding:16px;text-align:left}
}
@media(max-height:500px) and (max-width:1000px){
 [data-continuous-view].shot:not(.city-expanded){height:calc(100svh - 80px);min-height:0;aspect-ratio:auto;scroll-margin-top:64px}
 [data-continuous-demo] .showcase-bar{display:none}
}


/* ── Hero v2 · 2026-09-12 · superficie negra, tipografía display, escenario 3D a sangre ── */
:root{
  --bg:#050505; --bg-2:#0a0a0a; --panel:#0f0f10;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --frame:rgba(255,255,255,.18);
  --grid:transparent; --r:8px; --r-lg:14px;
  --disp:"Inter Tight", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --glow:120,160,255;
}
body{background-image:none}
body::before{display:none}
section{background-image:none}
section > .w::before{background:linear-gradient(var(--line),var(--line)) top/100% 1px no-repeat}
h1,h2,.stats .v{background:linear-gradient(180deg,#fff 0%,#c9cdd6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
h2{letter-spacing:-.035em; font-weight:500}
h3{font-weight:500; letter-spacing:-.015em}
::selection{background:rgba(var(--glow),.32); color:#fff}

/* botones: píldora */
.btn,.button{height:44px; padding:0 20px; border-radius:999px; font:500 14.5px/1 var(--sans); letter-spacing:-.005em; border:1px solid transparent;
  background:#fff; color:#000; box-shadow:none; transition:background .15s, border-color .15s, color .15s, transform .15s}
.btn:hover,.button:hover{background:#e8e8e8; border-color:transparent; box-shadow:none; color:#000}
.btn.ghost{background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.14)}
.btn.ghost:hover{background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.22)}
.btn:active{transform:translateY(1px)}

/* nav */
.top{background:rgba(5,5,5,.62); box-shadow:inset 0 -1px 0 var(--line); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px)}
.top .w{height:64px}
.brand span{color:var(--fg)}
.brand svg{filter:none; color:var(--fg)}
.nav-links{gap:4px}
.top nav a,.nav-links a{font:400 14px/1 var(--sans); color:var(--fg-2); padding:8px 11px; border-radius:999px; box-shadow:none; transition:color .12s, background .12s}
.top nav a:hover,.nav-links a:hover{color:var(--fg); background:rgba(255,255,255,.06); box-shadow:none}
.tools{gap:4px}
.languages{outline:0; background:transparent; border-radius:999px; gap:2px}
.languages button{background:transparent; color:var(--fg-3); font:500 12px/1 var(--sans); padding:0 9px; min-height:30px; border-radius:999px; transition:color .12s, background .12s}
.languages button:hover{color:var(--fg)}
.languages button[aria-pressed=true]{background:rgba(255,255,255,.08); color:var(--fg)}
.theme{outline:0; background:transparent; color:var(--fg-3); min-width:0; height:30px; padding:0 9px; border-radius:999px; font:500 12px/1 var(--sans); letter-spacing:0}
.theme:hover{color:var(--fg); background:rgba(255,255,255,.06)}
.top .nav-cta,.top .nav .nav-cta{height:36px; padding:0 16px; font-size:13.5px; background:#fff; color:#000; border-color:transparent}
.top .nav-cta:hover{background:#e8e8e8}

/* hero: titular a la izquierda, tesis a la derecha */
.hero{position:relative; padding:96px 0 0; text-align:left; overflow:visible} body{overflow-x:clip}
.hero-light{position:absolute; left:50%; top:-160px; width:min(1400px,140vw); height:1100px; transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 55% 45% at 50% 40%, rgba(var(--glow),.20) 0%, rgba(var(--glow),.06) 40%, transparent 70%)}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px 64px; align-items:end}
.hero-head{text-align:left}
.hero .eyebrow{background:none; outline:0; padding:0; width:auto; max-width:100%; flex-wrap:wrap; row-gap:4px; height:auto; margin:0 0 28px; font:500 12px/16px var(--mono); letter-spacing:.12em; color:var(--fg-3); gap:10px}
.hero .eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc)}
.hero h1{font:500 clamp(46px,7.4vw,100px)/.96 var(--disp); letter-spacing:-.045em; margin:0 0 40px; max-width:12ch}
.hero .actions{justify-content:flex-start; gap:10px}
.hero-aside{padding-bottom:4px; max-width:420px}
.hero .thesis,.hero .lead.thesis{font:500 20px/28px var(--sans); letter-spacing:-.015em; color:var(--fg); margin:0 0 14px}
.hero .lead:not(.thesis){font:400 15.5px/24px var(--sans); color:var(--fg-3); margin:0}
.hero .lead:not(.thesis) b{color:var(--fg-2); font-weight:400}

/* escenario */
.hero-stage{position:relative; z-index:1; max-width:1328px; margin:80px auto 0; padding:0 24px}
.hero-meta{display:flex; justify-content:space-between; gap:24px; margin:0 0 14px; padding:0 4px; font:500 11px/16px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}
.hero-meta span:first-child::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--acc); margin:0 10px 2px 0; box-shadow:0 0 10px var(--acc)}
.hero .showcase{border-radius:20px; overflow:hidden; outline:0; border:1px solid rgba(255,255,255,.12); background:#0a0a0a;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 60px 140px rgba(0,0,0,.75), 0 -40px 160px rgba(var(--glow),.10)}
.hero .showcase-bar{display:none}
.hero .shot{border-radius:0; background:#0a0a0a}
.hero .shot::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 18%, transparent 78%, rgba(0,0,0,.42) 100%)}
.hero .shot.city-expanded::after{display:none}
.hero .showcase-side,[data-continuous-demo] .showcase-side{padding:18px 24px; background:#0a0a0a; border-top:1px solid var(--line); gap:24px; align-items:center}
.hero .view-caption h2{font:500 15px/22px var(--sans); letter-spacing:-.01em; -webkit-text-fill-color:var(--fg); background:none; width:auto; margin:0}
.hero .view-caption p{font:400 13px/20px var(--sans); color:var(--fg-3); margin:2px 0 0; max-width:none}
.hero .view-buttons button{border-radius:999px; font:500 12.5px/20px var(--sans); background:transparent; border-color:var(--line-2); color:var(--fg-2); padding:6px 14px}
.hero .view-buttons button[aria-pressed=true]{background:#fff; border-color:#fff; color:#000}
.hero .view-buttons button span{color:var(--fg-3); font:500 11px/20px var(--mono)}
.hero .view-buttons button[aria-pressed=true] span{color:#555}
.city-live-controls button,.city-demo-button{border-radius:999px}
.city-demo-button{font:500 14px/20px var(--sans); letter-spacing:0; border-color:transparent}

@media (max-width:1050px){.hero-grid{grid-template-columns:1fr; gap:32px; align-items:start} .hero h1{max-width:14ch} .hero-aside{max-width:560px}}
@media (max-width:760px){
  .hero{padding-top:56px}
  .hero .eyebrow{margin-bottom:20px; font-size:11px}
  .hero h1{font-size:clamp(40px,11.5vw,52px); line-height:1; margin-bottom:28px; letter-spacing:-.04em; max-width:none}
  .hero .thesis,.hero .lead.thesis{font-size:18px; line-height:26px}
  .hero .lead:not(.thesis){font-size:15px; line-height:23px}
  .hero .actions{max-width:none; margin:0}
  .hero-stage{margin-top:48px; padding:0 12px}
  .hero-meta{padding:0 8px; font-size:10px; gap:12px}
  .hero-meta span:last-child{display:none}
  .hero .showcase{border-radius:16px}
  .hero .showcase-side,[data-continuous-demo] .showcase-side{padding:14px 16px}
  .top .w{height:60px}
  .top .nav-cta,.top .nav .nav-cta{height:34px; padding:0 14px; font-size:12.5px}
  .brand{font-size:15px!important}
}
@media (max-width:640px){.hero .btns{flex-direction:row; align-items:center} .hero .btn{flex:1 1 auto; justify-content:center}}
@media (max-width:400px){.hero h1{font-size:38px; line-height:1}}
@media (prefers-reduced-motion:reduce){.btn,.button,.top nav a,.languages button,.theme{transition:none}}

/* tema claro: blanco neutro */
:root[data-theme=light]{--bg:#fafafa; --bg-2:#f3f3f3; --panel:#f5f5f5; --fg:#0a0a0a; --fg-2:#3d3d3d; --fg-3:#6b6b6b; --fg-4:#cfcfcf;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14); --frame:rgba(0,0,0,.18); --grid:transparent; --acc:#2450d8; --acc-2:#3a63d9;
  --acc-bg:rgba(36,80,216,.06); --acc-line:rgba(36,80,216,.3); --acc-glow:rgba(36,80,216,.18); --glow:80,120,255}
:root[data-theme=light] body{background-image:none}
:root[data-theme=light] .top{background:rgba(250,250,250,.7)}
:root[data-theme=light] .btn,:root[data-theme=light] .button,:root[data-theme=light] .top .nav-cta,:root[data-theme=light] .top .nav .nav-cta{background:#0a0a0a; color:#fff}
:root[data-theme=light] .btn:hover,:root[data-theme=light] .button:hover,:root[data-theme=light] .top .nav-cta:hover{background:#2a2a2a; color:#fff}
:root[data-theme=light] .btn.ghost{background:rgba(0,0,0,.03); color:#0a0a0a; border-color:rgba(0,0,0,.14)}
:root[data-theme=light] .btn.ghost:hover{background:rgba(0,0,0,.07); color:#0a0a0a; border-color:rgba(0,0,0,.22)}
:root[data-theme=light] .top nav a:hover,:root[data-theme=light] .nav-links a:hover,:root[data-theme=light] .theme:hover{background:rgba(0,0,0,.05)}
:root[data-theme=light] .languages button[aria-pressed=true]{background:rgba(0,0,0,.07)}
:root[data-theme=light] .hero-light{background:radial-gradient(ellipse 55% 45% at 50% 40%, rgba(var(--glow),.14) 0%, rgba(var(--glow),.04) 40%, transparent 70%)}
:root[data-theme=light] .hero .showcase{border-color:rgba(0,0,0,.12); background:#fff; box-shadow:0 40px 120px rgba(0,0,0,.14), 0 -30px 120px rgba(var(--glow),.08)}
:root[data-theme=light] .hero .shot{background:#fff}
:root[data-theme=light] .hero .shot::after{background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, transparent 18%, transparent 80%, rgba(0,0,0,.16) 100%)}
:root[data-theme=light] .hero .showcase-side,:root[data-theme=light] [data-continuous-demo] .showcase-side{background:#fff}
:root[data-theme=light] .hero .view-buttons button[aria-pressed=true]{background:#0a0a0a; border-color:#0a0a0a; color:#fff}
:root[data-theme=light] .hero .view-buttons button[aria-pressed=true] span{color:#bbb}
:root[data-theme=light] .plate .btn{background:var(--cream); color:var(--plate)}
/* hero v2 · ajustes tras la primera captura */
.hero{padding-top:72px}
.hero-grid{max-width:1328px; padding:0 24px; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:40px 56px}
.hero h1{font-size:clamp(46px,5.9vw,84px); max-width:none; margin-bottom:32px}
.hero-stage{margin-top:56px}
.hero [data-continuous-view]>.city-demo-launch,.hero [data-continuous-view]>.city-demo-launch img{height:100%; width:100%; object-fit:cover}
@media (max-width:1050px){.hero-grid{grid-template-columns:1fr}}
@media (max-width:760px){.hero{padding-top:56px} .hero h1{font-size:clamp(40px,11.5vw,52px)} .hero-stage{margin-top:44px}}
html[lang=es] .hero h1{font-size:clamp(42px,4.9vw,70px)}
@media (max-width:760px){html[lang=es] .hero h1{font-size:clamp(36px,10.5vw,48px)}}


/* ── Secciones v2 · 2026-09-13 · ritmo, tarjetas, tira de formatos, cierre ── */
:root{--card-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); --card-bg-hover:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); --card-line:rgba(255,255,255,.10); --card-line-hover:rgba(255,255,255,.22); --tint:#0a0a0a}
:root[data-theme=light]{--card-bg:linear-gradient(180deg,#fff,#fafafa); --card-bg-hover:#fff; --card-line:rgba(0,0,0,.10); --card-line-hover:rgba(0,0,0,.22); --tint:#f3f3f3}
section{padding:128px 0}
section.tint{background-color:var(--tint)}
section > .w::before{height:0; background:none}
@media (max-width:760px){section{padding:88px 0}}

/* kicker: número + rótulo, sin caja */
.kicker{outline:0; background:transparent; padding:0; height:auto; overflow:visible; gap:12px; align-items:center; font:500 12px/16px var(--mono); letter-spacing:.14em; color:var(--fg-3); margin-bottom:28px}
.kicker[data-i]::before{content:attr(data-i); color:var(--acc); background:transparent; padding:0; font-weight:500; letter-spacing:.14em}
.kicker[data-i]::after{content:""; width:24px; height:1px; background:var(--line-2); order:-1; display:none}
.kicker:not([data-i]){padding:0}
.kicker:not([data-i])::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc)}
.plate .kicker{outline:0; background:transparent}

h2{font-size:44px; line-height:1.08; letter-spacing:-.035em; margin:0 0 24px}
.section-intro,.n .lead{font-size:18px; line-height:28px; color:var(--fg-2)}
.section-intro{max-width:640px}
.n{max-width:680px}
@media (max-width:760px){h2{font-size:32px; line-height:1.1} .section-intro,.n .lead{font-size:16.5px; line-height:26px}}

/* tarjetas */
.cards{outline:0; background:transparent; gap:12px; margin-top:56px}
.card{background:var(--card-bg); border:1px solid var(--card-line); border-radius:16px; padding:28px; box-shadow:none; transition:border-color .2s, transform .25s, background .2s}
.card:last-child{box-shadow:none}
.card:hover{border-color:var(--card-line-hover); transform:translateY(-2px)}
.card-num{font:500 11px/16px var(--mono); letter-spacing:.14em; color:var(--fg-3); margin-bottom:28px}
.card h3{font-size:19px; line-height:26px; margin:0 0 12px}
.card p{font-size:15px; line-height:24px; color:var(--fg-2)}
.card-media{margin:-28px -28px 24px; border-radius:15px 15px 0 0; overflow:hidden; aspect-ratio:4/3; background:#e9e6df; border-bottom:1px solid var(--card-line)}
.card-media img{display:block; width:124%; height:124%; margin:-12%; object-fit:cover; outline:0; border-radius:0; box-shadow:none; background:none}
.cards.bento .card:first-child .card-media img{width:100%; height:100%; margin:0; object-position:50% 40%}
@media (max-width:760px){.cards{gap:12px; margin-top:40px} .card{padding:24px; box-shadow:none} .card-media{margin:-24px -24px 20px} .card h3{margin-bottom:10px}}

/* la diferencia */
.meaning{margin-top:128px}
.semantic-figure{outline:0; border:1px solid var(--card-line); border-radius:20px; background:var(--card-bg); padding:40px; gap:56px}
.semantic-card{border-radius:14px; border-color:var(--card-line); background:var(--panel)}
.semantic-card h3{font-size:28px; line-height:34px}
.plan-wall{stroke:var(--fg-3); stroke-width:2.5}
.meaning-note,.method-end{color:var(--fg-3)}
@media (max-width:760px){.meaning{margin-top:88px} .semantic-figure{padding:20px; border-radius:16px}}

/* cómo funciona */
.method-nodes{gap:12px}
.method-node{border:1px solid var(--card-line); background:var(--card-bg); border-radius:16px; padding:28px; transition:border-color .2s}
.method-node:hover{border-color:var(--card-line-hover)}
.method-node h3{font-size:19px; line-height:26px; margin:12px 0 12px}
.method-node p{color:var(--fg-2); margin:0}
.flow-arrow{right:-16px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:var(--bg); border:1px solid var(--line-2); font:14px/18px var(--mono); text-align:center; color:var(--fg-3); z-index:1}
.loop-return{border:1px solid var(--card-line); border-radius:999px; margin:16px auto 0; width:max-content; max-width:100%; padding:10px 20px; background:var(--card-bg); color:var(--fg-2); font-size:12.5px}
.loop-return span{font-size:18px; color:var(--acc)}
@media (max-width:760px){.method-nodes{gap:12px} .flow-arrow{right:auto; left:50%; top:auto; bottom:-16px; transform:translateX(-50%) rotate(90deg)} .method-node{padding:24px} .loop-return{margin-top:24px; padding:10px 16px}}

/* flujo de trabajo */
.steps{gap:12px; margin-top:56px}
.steps li{border:1px solid var(--card-line); border-radius:16px; padding:24px; background:var(--card-bg); transition:border-color .2s; position:relative}
.steps li:hover{border-color:var(--card-line-hover)}
.steps li:before{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--acc-line); color:var(--acc); background:var(--acc-bg); font:500 11px/1 var(--mono); letter-spacing:.06em; margin-bottom:20px}
.steps h3{font-size:17px; line-height:24px; margin:0 0 8px}
.steps p{color:var(--fg-2); margin:0}
.edit{border-top:1px solid var(--line); padding-top:96px; margin-top:96px; gap:64px; align-items:start}
.edit h2{font-size:36px; line-height:1.1}
.requests li{border:1px solid var(--card-line); border-radius:14px; background:var(--card-bg); padding:18px 20px 18px 44px; position:relative; font-size:15px; line-height:24px; color:var(--fg); margin-bottom:10px}
.requests li::before{content:"›"; position:absolute; left:20px; top:17px; font:500 18px/24px var(--mono); color:var(--acc)}
.request-note{letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; margin-top:16px}
.dotfig{outline:0; background:transparent; padding:0; margin-top:32px}
.dotfig::before,.dotfig::after{display:none}
@media (max-width:760px){.steps{grid-template-columns:1fr; gap:10px; margin-top:40px} .steps li{padding:20px} .edit{padding-top:64px; margin-top:64px; gap:40px} .edit h2{font-size:30px}}

/* usos: banda con luz */
section.uses{position:relative; background-color:var(--tint); overflow:hidden}
section.uses::before{content:""; position:absolute; left:50%; top:-300px; width:min(1200px,120vw); height:800px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--glow),.12), transparent 65%)}
section.uses > .w{position:relative}

/* entrega */
.delivery{gap:64px; align-items:start}
.delivery h3{font-size:24px; line-height:30px}
.delivery p{color:var(--fg-2)}
.formats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:32px}
.format{flex-direction:column; justify-content:flex-start; gap:6px; padding:18px 20px; border:1px solid var(--card-line); border-radius:14px; background:var(--card-bg); font-size:13px; transition:border-color .2s}
.format:hover{border-color:var(--card-line-hover)}
.format strong{font:500 15px/22px var(--mono); letter-spacing:-.01em; color:var(--fg)}
.format span{text-align:left; color:var(--fg-3); font-size:12.5px}
@media (max-width:760px){.delivery{gap:32px} .formats{grid-template-columns:1fr 1fr; gap:8px} .format{padding:14px 16px}}
@media (max-width:400px){.formats{grid-template-columns:1fr}}

/* cierre */
section.contact.plate{background-color:var(--bg); background-image:none; padding:0 0 128px}
section.plate::before{display:none}
.contact > .w{max-width:1328px}
.contact-grid{border:1px solid var(--card-line); border-radius:24px; padding:72px 64px; background:var(--card-bg); position:relative; overflow:hidden; gap:64px}
.contact-grid::before{content:""; position:absolute; left:50%; top:-400px; width:1000px; height:800px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--glow),.18), transparent 65%)}
.contact-grid > *{position:relative}
.contact .kicker{margin-left:calc((100% - 1104px)/2 + 24px); margin-bottom:40px}
.contact h2{font-size:56px; line-height:1.04; -webkit-text-fill-color:transparent}
.contact p{color:var(--fg-2)}
.contact-note{color:var(--fg-3)}
.plate .btn{background:#fff; color:#000}
.plate .btn:hover{background:#e8e8e8}
:root[data-theme=light] .plate .btn,:root[data-theme=light] .contact .btn{background:#0a0a0a; color:#fff}
:root[data-theme=light] .plate .btn:hover{background:#2a2a2a}
:root[data-theme=light] .contact h2{-webkit-text-fill-color:var(--fg)}
.plate h2,.plate b,.plate strong,.plate .lead,.plate .src{color:var(--fg-2)}
.contact h2{color:var(--fg)}
@media (max-width:1180px){.contact .kicker{margin-left:24px}}
@media (max-width:760px){section.contact.plate{padding-bottom:88px} .contact-grid{padding:40px 24px; border-radius:20px; gap:32px} .contact h2{font-size:40px; line-height:1.05}}

/* pie */
.footer{padding:0 0 40px}
.footer .wrap{border:0; border-top:1px solid var(--line); padding:32px 24px 0}
.footer .brand{margin-right:0}
.footer p{font:400 13px/20px var(--sans); color:var(--fg-3); letter-spacing:0; text-align:right}
footer.plate{box-shadow:none}

/* entrada al hacer scroll: progresiva, sólo donde el navegador la soporta */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise .8s cubic-bezier(.2,.7,.2,1) both; animation-timeline:view(); animation-range:entry 0% entry 35%}
    .cards .reveal:nth-child(2),.steps .reveal:nth-child(3n+2){animation-range:entry 4% entry 40%}
    .cards .reveal:nth-child(3),.steps .reveal:nth-child(3n){animation-range:entry 8% entry 45%}
  }
}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
/* secciones v2 · ajustes tras la primera captura */
.footer .brand{font:600 15px/1 var(--sans); letter-spacing:-.01em; text-transform:none}
.footer .brand span{font:inherit}
.contact .kicker{margin-left:64px}
@media (max-width:1180px){.contact .kicker{margin-left:64px}}
@media (max-width:760px){.contact .kicker{margin-left:24px} .contact h2{font-size:34px}}


/* la sala de cerca: visor propio que se monta solo; el póster queda debajo hasta el primer cuadro */
.semantic-figure.live{background:linear-gradient(180deg,#101114,#0a0a0b)}
.room-stage{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:radial-gradient(ellipse 70% 60% at 50% 45%, #1a1c22, #08090b 75%); isolation:isolate}
.room-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; outline:0; border-radius:0; box-shadow:none; background:none; transition:opacity .6s ease; z-index:1}
.room-stage[data-room-state=ready] img{opacity:0; pointer-events:none}
.room-canvas{position:absolute; inset:0; width:100%!important; height:100%!important; display:block; z-index:2; outline:0; cursor:grab}
.room-canvas:active{cursor:grabbing}
.room-canvas[data-hover=true]{cursor:pointer}
.room-canvas:focus-visible{outline:2px solid var(--acc); outline-offset:-2px}
.room-hint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3; pointer-events:none; white-space:nowrap; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; padding:7px 12px; border-radius:999px; background:rgba(8,9,11,.72); border:1px solid rgba(255,255,255,.12); color:#d9dce3; font:400 12px/16px var(--sans); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .3s}
.room-stage[data-active=true] .room-hint{opacity:0}
.semantic-figure.live .semantic-card{display:flex; flex-direction:column; justify-content:center; padding:28px; border-radius:12px; min-width:0}
.semantic-figure.live .semantic-card h3{font-size:26px; line-height:32px; margin:10px 0 18px; transition:opacity .15s}
.semantic-figure.live .semantic-card dl>div{grid-template-columns:auto 1fr; gap:16px; font-size:14px; padding:9px 0}
.semantic-figure.live .semantic-card dt{min-width:64px}
.semantic-figure.live .semantic-card dd code{font-size:11.5px; background:transparent; outline:0; padding:0; color:var(--fg-3)}
.semantic-figure.live .semantic-card .src{margin-top:16px}
@media (prefers-reduced-motion:reduce){.room-stage img{transition:none}}
@media (max-width:900px){.semantic-figure.live{grid-template-columns:1fr; padding:12px; gap:12px} .room-hint{display:none} .semantic-figure.live .semantic-card{padding:22px}}
:root[data-theme=light] .semantic-figure.live{background:linear-gradient(180deg,#f7f7f7,#efefef)}
:root[data-theme=light] .room-stage{background:radial-gradient(ellipse 70% 60% at 50% 45%, #e9e9ec, #d9d9de 75%)}
/* la ficha no empuja al escenario: la grilla no estira y la tarjeta tiene alto reservado */
.semantic-figure.live{align-items:start}
.semantic-figure.live .semantic-card{min-height:468px; justify-content:flex-start; padding-top:32px}
.semantic-figure.live .semantic-card dd{overflow-wrap:anywhere}
.room-canvas{cursor:default; outline:0}
.room-canvas:focus-visible{outline:0}
.room-stage[data-active=true] .room-hint{opacity:1}
@media (max-width:900px){.semantic-figure.live .semantic-card{min-height:0}}

/* el mismo edificio, cinco pedidos: prompts a la izquierda, escenario que funde entre estilos a la derecha */
.edit{display:block}
.styles-figure{margin:0; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:start}
.styles-copy h2{font-size:36px; line-height:1.1}
.styles-copy .request-note{margin:24px 0 10px}
.prompts{display:grid; gap:8px}
.prompt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px; border:1px solid var(--card-line); border-radius:14px; background:var(--card-bg); color:var(--fg-2); font:400 15px/22px var(--sans); transition:border-color .2s, background .2s, color .2s}
.prompt:hover{border-color:var(--card-line-hover); color:var(--fg)}
.prompt[aria-pressed=true]{border-color:var(--acc-line); background:var(--acc-bg); color:var(--fg)}
.prompt-mark{font:500 18px/22px var(--mono); color:var(--acc); flex-shrink:0}
.styles-side{display:grid; gap:12px}
.styles-stage{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:radial-gradient(ellipse 70% 60% at 50% 40%, #202228, #0a0a0c 78%); border:1px solid var(--card-line); isolation:isolate}
.styles-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; outline:0; border-radius:0; box-shadow:none; background:none; transition:opacity .6s ease; z-index:1}
.styles-stage[data-styles-state=ready] img{opacity:0; pointer-events:none}
.styles-canvas{position:absolute; inset:0; width:100%!important; height:100%!important; display:block; z-index:2; outline:0}
.styles-caption{font:400 13.5px/20px var(--sans); color:var(--fg-3); padding:0 4px; min-height:40px}
:root[data-theme=light] .styles-stage{background:radial-gradient(ellipse 70% 60% at 50% 40%, #e4e5ea, #cfd0d6 78%)}
@media (max-width:900px){.styles-figure{grid-template-columns:1fr; gap:20px} .styles-side{order:-1} .styles-copy h2{font-size:30px} .prompt{padding:12px 14px; font-size:14.5px}}
/* la sección de estilos: pósters por estilo debajo del 3D, pista de uso, aviso si el 3D no arranca */
.styles-stage img[hidden]{display:none}
.styles-stage[data-styles-state=ready] img{opacity:0; pointer-events:none}
.styles-canvas{cursor:grab}
.styles-canvas:active{cursor:grabbing}
.styles-hint,.styles-note{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3; pointer-events:none; white-space:nowrap; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; padding:7px 12px; border-radius:999px; background:rgba(8,9,11,.72); border:1px solid rgba(255,255,255,.12); color:#d9dce3; font:400 12px/16px var(--sans); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .3s}
.styles-note{white-space:normal; text-align:center; color:#f0d9a8}
.styles-note[hidden]{display:none}
.styles-stage:not([data-styles-state=ready]) .styles-hint{display:none}
.styles-stage[data-active=true] .styles-hint{opacity:0}
@media (max-width:900px){.styles-hint{display:none}}
/* la manzana alrededor: en móvil el visor va debajo de los prompts, y la línea de «sólo cambia el seleccionado» */
.styles-only{color:var(--fg); font-weight:500; margin:-8px 0 0}
@media (max-width:900px){.styles-side{order:0}}

/* fotos del bento: modelos enteros, centrados, sin recorte */
.card-media img{width:100%; height:100%; margin:0; object-fit:cover; object-position:50% 50%}
.cards.bento .card:first-child .card-media img{object-position:50% 40%}

/* Delivery: en qué se abre lo exportado. Wordmarks de texto, sin logos de terceros. */
.works-with{display:block; text-wrap:balance; margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line-2); font:500 11px/22px var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3)}
.works-with .works-label{color:var(--fg-2); margin-right:14px}
.works-with .works-tool{position:relative; display:inline-block; margin-right:17px}
.works-with .works-tool:last-child{margin-right:0}
.works-with .works-tool:not(:last-child):after{content:'·'; position:absolute; right:-12px; color:var(--fg-4)}
@media (max-width:760px){.works-with{font-size:10.5px; line-height:20px}}

/* el resplandor del hero no puede ser más ancho que el teléfono */

/* el resplandor del hero no puede ser más ancho que el teléfono */
@media (max-width:760px){.hero-light{width:100vw}}

/* la línea del agente en la ficha de la sala */
.agent-line{display:flex; align-items:center; gap:8px; margin:0 0 14px; font:500 12px/18px var(--mono); letter-spacing:.02em; color:var(--acc-2)}
.agent-line:before{content:''; width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px var(--acc-bg); flex:none}

/* La sala manda: columna ancha, el lienzo llena la fila y la ficha se compacta */
.semantic-figure.live{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:28px; padding:28px; align-items:stretch}
.semantic-figure.live .room-stage{aspect-ratio:auto; height:100%; min-height:560px}
.semantic-figure.live .semantic-card{min-height:0; padding:26px 28px 22px; justify-content:flex-start}
.semantic-figure.live .semantic-card h3{font-size:24px; line-height:30px; margin:8px 0 14px}
.semantic-figure.live .semantic-card dl>div{padding:7px 0; font-size:13.5px; line-height:19px; gap:14px}
.semantic-figure.live .semantic-card dt{min-width:84px}
.semantic-figure.live .semantic-card .src{margin-top:14px; font-size:11px; line-height:16px}
@media (max-width:900px){.semantic-figure.live{grid-template-columns:1fr; gap:12px; padding:12px} .semantic-figure.live .room-stage{aspect-ratio:4/3; height:auto; min-height:0}}
/* altura fija: la ficha más alta mide 584 px; si el lienzo dependiera de la ficha, señalar una ventana agrandaría el lienzo, movería el puntero a otro objeto y la ficha cambiaría en lazo */
.semantic-figure.live{align-items:start}
.semantic-figure.live .room-stage{height:600px; min-height:0}
.semantic-figure.live .semantic-card{min-height:600px}
@media (max-width:900px){.semantic-figure.live .room-stage{height:auto; aspect-ratio:4/3} .semantic-figure.live .semantic-card{min-height:0}}

/* Móvil: la ficha se compacta en dos columnas con la etiqueta arriba del valor; las filas largas van a lo ancho. El lienzo queda pegado arriba mientras se lee. */
@media (max-width:760px){
 .semantic-figure.live{padding:10px; gap:10px}
 .semantic-figure.live .room-stage{position:sticky; top:60px; z-index:3; border-radius:12px}
 .semantic-figure.live .semantic-card{padding:16px 16px 12px; border-radius:12px}
 .semantic-figure.live .semantic-card .agent-line{font-size:11px; line-height:16px; margin:0 0 8px}
 .semantic-figure.live .semantic-card .label{font-size:10px}
 .semantic-figure.live .semantic-card h3{font-size:20px; line-height:26px; margin:4px 0 8px}
 .semantic-figure.live .semantic-card dl{display:grid; grid-template-columns:1fr 1fr; gap:0 14px; margin:0}
 .semantic-figure.live .semantic-card dl>div{display:flex; flex-direction:column; gap:2px; padding:7px 0; border-top:1px solid var(--line-2); font-size:12.5px; line-height:17px; min-width:0}
 .semantic-figure.live .semantic-card dl>div[data-row=articulation],.semantic-figure.live .semantic-card dl>div[data-row=collision],.semantic-figure.live .semantic-card dl>div[data-row=material],.semantic-figure.live .semantic-card dl>div[data-row=identity]{grid-column:1/-1}
 .semantic-figure.live .semantic-card dt{font-size:10px; line-height:14px; letter-spacing:.06em; text-transform:uppercase; min-width:0; color:var(--acc-2)}
 .semantic-figure.live .semantic-card dd{margin:0}
 .semantic-figure.live .semantic-card dd code{font-size:11px}
 .semantic-figure.live .semantic-card .src{font-size:10px; line-height:14px; margin-top:10px}
}
@media (max-width:360px){.semantic-figure.live .semantic-card{padding:14px 12px 10px} .semantic-figure.live .semantic-card dl{gap:0 10px} .semantic-figure.live .semantic-card dl>div{padding:6px 0; font-size:12px; line-height:16px}}

/* Móvil, del hero para abajo: aire moderado, títulos un poco más chicos, bento en carrusel con snap, pasos y formatos en dos columnas.
   El hero no se toca. Un h2 con width:max-content dentro de una columna 1fr (mínimo auto) infla la columna: el mínimo tiene que ser 0. */
@media (max-width:760px){
 body .section:not(.hero){padding:64px 0}
 body .section:not(.hero) h2{font-size:32px; line-height:38px; margin:0 0 18px}
 body .section-intro,body .meaning-note,body .method-end,body .edit p,body .delivery p{font-size:15.5px; line-height:24px}
 body .cards.bento{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:28px -16px 0; padding:0 16px 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
 body .cards.bento::-webkit-scrollbar{display:none}
 body .cards.bento .card{flex:0 0 84%; scroll-snap-align:start; padding:22px}
 body .cards.bento .card-media{margin:-22px -22px 18px; aspect-ratio:16/10}
 body .card h3{font-size:19px; line-height:25px; margin-bottom:8px}
 body .card p{font-size:14.5px; line-height:22px}
 body .method-nodes{gap:12px} body .method-node{padding:20px} body .method-node h3{font-size:18px; margin:4px 0 8px} body .method-node p{font-size:14.5px; line-height:22px}
 body .loop-return{margin:18px 0 0; padding:10px 14px; font-size:11px}
 body .steps{grid-template-columns:1fr 1fr; gap:12px; margin-top:28px} body .steps li{padding:16px} body .steps h3{font-size:15.5px; line-height:21px; margin:8px 0 6px} body .steps p{font-size:13px; line-height:19px} body .steps li:before{margin-bottom:8px}
 body .uses .card{padding:22px}
 body .formats{grid-template-columns:1fr 1fr; gap:10px; margin-top:22px} body .format{padding:14px 16px}
 body .delivery{gap:24px} body .delivery h3{font-size:21px; line-height:27px; margin-bottom:12px}
 body .edit{padding-top:44px; margin-top:44px; gap:28px}
 body .contact h2{font-size:34px; line-height:40px}
 body .meaning{margin-top:64px}
 body .styles-figure,body .semantic-figure,body .delivery,body .contact-grid,body .method-nodes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){body .steps{gap:8px} body .steps li{padding:12px} body .steps h3{font-size:14px; line-height:19px} body .steps p{font-size:12px; line-height:17px} body .formats{gap:8px} body .format{padding:12px} body .format strong{font-size:13.5px} body .cards.bento .card{flex-basis:88%}}

/* botón de reintento dentro del estado del visor de la ciudad */
.city-retry{margin-left:6px; padding:6px 12px; border-radius:999px; border:1px solid #ffffff55; background:#fff; color:#10151c; font:600 12px/16px var(--sans); cursor:pointer}
.city-retry:hover{background:#e9e9ec}

/* acciones del agente en la ficha: lo que el objeto admite en su estado actual */
.agent-actions{display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 14px}
.agent-actions:empty{display:none}
.agent-action{padding:5px 11px; border-radius:999px; border:1px solid var(--card-line); background:var(--card-bg); color:var(--fg-2); font:500 12px/16px var(--sans); cursor:pointer; transition:border-color .15s, background .15s, color .15s}
.agent-action:hover{border-color:var(--card-line-hover); color:var(--fg)}
.agent-action[aria-pressed=true]{background:var(--acc); border-color:var(--acc); color:var(--bg)}
.agent-action[title]{border-style:dashed}
@media (max-width:760px){.agent-actions{margin:-2px 0 10px} .agent-action{font-size:11.5px; padding:4px 10px}}

/* ── Páginas secundarias: bitácora y docs. Comparten la barra, los tokens y los dos temas. ── */
.page-head{padding:56px 0 24px}.page-head>.w::before{display:none}
.page-head h1{font-family:var(--disp); font-size:48px; line-height:1.08; letter-spacing:-.035em; font-weight:500; color:var(--fg); margin:0 0 24px; max-width:720px; text-align:left}
.page-meta{display:flex; flex-wrap:wrap; gap:24px; align-items:center; font:12px/20px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); margin:24px 0 0}
.page-meta a{color:var(--fg-2); text-decoration:none; box-shadow:0 1px 0 var(--line-2)}.page-meta a:hover{color:var(--acc); box-shadow:0 1px 0 var(--acc)}
.top nav a[aria-current=page],.nav-links a[aria-current=page]{color:var(--fg); background:rgba(255,255,255,.08)}
:root[data-theme=light] .top nav a[aria-current=page],:root[data-theme=light] .nav-links a[aria-current=page]{background:rgba(0,0,0,.06)}
.log{padding-top:24px}.log>.w::before{display:none}
.log-list{list-style:none; margin:0; padding:0; max-width:840px}
.log-month{font:500 12px/20px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); padding:56px 0 12px; border-bottom:1px solid var(--line-2)}
.log-month:first-child{padding-top:0}
.log-entry{display:grid; grid-template-columns:176px minmax(0,1fr); gap:4px 32px; padding:22px 0; border-bottom:1px solid var(--line); scroll-margin-top:96px}
.log-entry time{font:500 13px/24px var(--mono); color:var(--fg); letter-spacing:.02em}
.log-day{grid-column:1; font:11px/16px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3)}
.log-entry p{grid-column:2; grid-row:1/4; margin:0; font-size:16px; line-height:26px; color:var(--fg-2); max-width:640px}
.log-entry.milestone time{color:var(--acc)}
.log-milestone{grid-column:1; width:max-content; max-width:100%; font:500 10.5px/16px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--acc); background:var(--acc-bg); outline:1px solid var(--acc-line); outline-offset:-1px; border-radius:8px; padding:3px 8px; margin:4px 12px 2px 0}
.log-legend{display:inline-flex; align-items:center; gap:8px}.log-legend i{width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 6px var(--acc-glow)}
.docs{padding-top:24px}.docs>.w::before{display:none}
.docs-grid{display:grid; grid-template-columns:220px minmax(0,1fr); gap:64px; align-items:start}
.doc-toc{position:sticky; top:96px}.doc-toc .kicker{margin-bottom:12px}
.doc-toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.doc-toc a{display:block; padding:6px 0; font-size:14px; line-height:20px; color:var(--fg-2); text-decoration:none}.doc-toc a:hover{color:var(--fg)}
.doc-body{max-width:720px}
.doc-section{padding:0 0 56px; scroll-margin-top:96px}
.doc-section h2{font-size:28px; line-height:36px; margin:0 0 16px; width:auto}
.doc-section p{font-size:16px; line-height:26px; color:var(--fg-2); margin:0 0 16px}
.doc-table{overflow-x:auto; margin:8px 0 24px}
.doc-table table{width:100%; border-collapse:collapse; font-size:14px; line-height:22px}
.doc-table th,.doc-table td{text-align:left; vertical-align:top; padding:10px 20px 10px 0; border-bottom:1px solid var(--line)}
.doc-table thead th{font:500 11px/16px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); border-bottom:1px solid var(--line-2)}
.doc-table tbody th{font:500 13px/22px var(--mono); color:var(--fg); white-space:nowrap; width:1%}
.doc-table td{color:var(--fg-2)}
.doc-list{margin:0 0 24px; padding:0 0 0 20px; color:var(--fg-2); font-size:16px; line-height:26px}.doc-list li{margin:0 0 8px; padding-left:4px}
.doc-code{margin:8px 0 12px; padding:20px 24px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; overflow-x:auto; font:13px/20px var(--mono); color:var(--fg)}
.doc-code code{background:none; outline:0; padding:0; font-size:13px; line-height:20px; color:inherit}
.doc-note{font-size:14px!important; line-height:22px!important; color:var(--fg-3)!important}
.doc-section .btn{display:inline-flex; margin-top:8px}
@media(max-width:900px){.docs-grid{grid-template-columns:minmax(0,1fr); gap:32px}.doc-toc{position:static}.doc-toc ol{display:flex; flex-wrap:wrap; gap:2px 20px}}
@media(max-width:760px){.page-head{padding-top:40px}.page-head h1{font-size:32px; line-height:40px}.log-month{padding-top:40px}.log-entry{grid-template-columns:1fr; gap:6px; padding:18px 0}.log-entry p{grid-column:1; grid-row:auto; font-size:15px; line-height:24px}.log-day{display:none}.log-milestone{margin:0 0 4px}.doc-section{padding-bottom:40px}.doc-section h2{font-size:24px; line-height:30px}.doc-table th,.doc-table td{padding-right:14px}.doc-code{padding:16px}}

/* ── Contadores bajo el hero ── */
.demo-stats{padding:0 0 8px; background:var(--bg)}
.demo-stats .w{border-top:1px solid var(--line-2); padding-top:28px}
.demo-stats-label{font:500 11px/16px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin:0 0 20px}
.demo-stats-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0}
.demo-stats-grid div{min-width:0}
.demo-stats-grid dt{font-family:var(--disp); font-size:40px; line-height:44px; letter-spacing:-.03em; font-weight:500; color:var(--fg); font-variant-numeric:tabular-nums}
.demo-stats-grid dd{margin:6px 0 0; font-size:14px; line-height:20px; color:var(--fg-3)}
/* ── Beta, fundador, FAQ ── */
.founder-grid::before,.faq-grid::before{grid-column:1/-1}
.founder-grid{display:grid; grid-template-columns:280px minmax(0,1fr); gap:64px; align-items:start}
.founder-portrait{margin:0}
.founder-portrait img,.founder-initials{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; border-radius:16px; border:1px solid var(--card-line); background:var(--card-bg); object-fit:cover}
.founder-initials{font:500 56px var(--disp); letter-spacing:-.04em; color:var(--fg-3)}
.founder-portrait figcaption{margin-top:14px; font:500 15px/22px var(--sans); color:var(--fg)}
.founder-portrait figcaption span{display:block; font:400 12.5px/18px var(--mono); color:var(--fg-3); margin-top:2px}
.founder .lead{max-width:640px; margin:0 0 16px}
.founder-links{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:28px 0 0}
.founder-links .social,.footer-social a{font:500 13px/20px var(--sans); color:var(--fg-2); text-decoration:none; box-shadow:0 1px 0 var(--line-2)}
.founder-links .social:hover,.footer-social a:hover{color:var(--fg); box-shadow:0 1px 0 var(--fg)}
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:64px; align-items:start}
.faq-grid h2{width:auto}
.faq-list{display:grid; gap:0}
.faq-item{border-top:1px solid var(--line-2)}
.faq-item:last-child{border-bottom:1px solid var(--line-2)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; padding:20px 0; font:500 17px/26px var(--sans); color:var(--fg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{color:var(--fg-3); font:400 22px/26px var(--mono); transition:transform .2s}
.faq-item[open] summary span{transform:rotate(45deg)}
.faq-item p{margin:0 0 22px; font-size:15.5px; line-height:25px; color:var(--fg-2); max-width:640px}
/* ── Pie ── */
.footer .wrap{display:block}
.footer .footer-brand p,.footer .footer-title,.footer .footer-legal{text-align:left}
.footer .footer-col a{font:400 14px/22px var(--sans); letter-spacing:0}
.footer .footer-social{display:inline-flex; gap:6px; margin:0}
.footer .footer-social a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; color:var(--fg-3); box-shadow:none; transition:color .15s, background .15s}
.footer .footer-social a:hover{color:var(--fg); background:var(--panel); box-shadow:none}
.footer .footer-social svg{width:16px; height:16px; display:block}
.footer .footer-legal a{font:inherit; letter-spacing:0; color:inherit; text-decoration:none; box-shadow:0 1px 0 var(--line-2)}.footer .footer-legal a:hover{color:var(--fg)}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:40px; padding-bottom:36px}
.footer-brand p{text-align:left; margin:14px 0 0; max-width:260px}
.footer-title{font:500 11px/16px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin:4px 0 14px; text-align:left}
.footer-col a{display:block; font:400 14px/22px var(--sans); color:var(--fg-2); text-decoration:none; padding:3px 0}
.footer-col a:hover{color:var(--fg)}
.footer-legal{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px; font:400 12.5px/20px var(--mono)!important; color:var(--fg-3); text-align:left!important}
/* ── Formulario de acceso ── */
dialog.access{width:min(560px,calc(100% - 32px)); border:1px solid var(--card-line); border-radius:20px; padding:0; background:var(--bg); color:var(--fg); box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.access::backdrop{background:rgba(0,0,0,.55); backdrop-filter:blur(4px)}
.access-form{margin:0}
.access .dialog-bar{display:flex; justify-content:space-between; align-items:center; padding:12px 16px 12px 20px; border-bottom:1px solid var(--line); font:500 11px/16px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}
.access .dialog-bar button{border:0; background:none; color:var(--fg-2); font:inherit; cursor:pointer; padding:6px 8px; border-radius:8px}
.access .dialog-bar button:hover{background:var(--panel); color:var(--fg)}
.access-body{padding:28px 32px 32px}
.access-body h2{font-size:30px; line-height:36px; margin:0 0 10px; width:auto}
.access-body>p{color:var(--fg-2); margin:0 0 22px; font-size:15px; line-height:24px}
.access-body label{display:block; margin:0 0 16px}
.access-body label span{display:block; font:500 12px/18px var(--mono); letter-spacing:.04em; color:var(--fg-2); margin-bottom:6px}
.access-body input,.access-body textarea,.access-body select{width:100%; box-sizing:border-box; border:1px solid var(--line-2); border-radius:10px; background:var(--panel); color:var(--fg); font:400 15px/22px var(--sans); padding:10px 12px; outline:0; transition:border-color .15s}
.access-body input:focus,.access-body textarea:focus,.access-body select:focus{border-color:var(--acc)}
.access-body textarea{resize:vertical; min-height:72px}
.access-body .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.access-actions{margin:24px 0 0!important}
.access-actions .btn{display:inline-flex}
.access-privacy{font-size:12.5px!important; line-height:19px!important; color:var(--fg-3)!important; margin:14px 0 0!important}
.access-privacy a{color:inherit}
.access-error{font-size:13.5px!important; color:#c0392b!important; margin:12px 0 0!important}
.access-error a{color:inherit}
.access-thanks .kicker{margin-bottom:16px}
.access-form[data-busy] [data-access-submit]{opacity:.6; pointer-events:none}
/* ── Docs: muestra descargable; legales ── */
.sample-files{display:grid; gap:10px; margin:8px 0 16px}
.sample-file{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:14px 18px; border:1px solid var(--card-line); border-radius:12px; background:var(--card-bg); text-decoration:none; color:var(--fg-2); transition:border-color .2s}
.sample-file:hover{border-color:var(--card-line-hover)}
.sample-file strong{font:500 14px/22px var(--mono); color:var(--fg)}
.sample-file span{font-size:13.5px; line-height:20px}
.sample-file i{font-style:normal; color:var(--acc); font:500 16px var(--mono)}
.legal .doc-body{max-width:680px}
@media(max-width:900px){.founder-grid{grid-template-columns:200px minmax(0,1fr); gap:32px}.faq-grid{grid-template-columns:minmax(0,1fr); gap:24px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px}.footer-brand{grid-column:1/-1}}
@media(max-width:760px){.demo-stats .w{padding-top:20px}.demo-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px}.demo-stats-grid dt{font-size:30px; line-height:34px}.demo-stats-grid dd{font-size:13px}.founder-grid{grid-template-columns:minmax(0,1fr); gap:24px}.founder-portrait{max-width:160px}.faq-item summary{font-size:16px; line-height:24px; padding:16px 0}.access-body{padding:22px 20px 24px}.access-body h2{font-size:24px; line-height:30px}.sample-file{grid-template-columns:minmax(0,1fr) auto}.sample-file span{grid-column:1/-1}}
@media(max-width:480px){.footer-grid{grid-template-columns:minmax(0,1fr)}.footer-legal{flex-direction:column; align-items:flex-start; gap:10px}}