.sites-hero{position:relative;isolation:isolate}.sites-hero::before{content:"";position:absolute;inset:8% -12% auto auto;width:42rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.16),rgba(139,92,246,.05) 42%,transparent 70%);filter:blur(12px);z-index:-1}.site-stage{min-height:390px;display:grid;place-items:center;perspective:1100px}.site-stack{position:relative;width:min(100%,520px);aspect-ratio:16/11;transform-style:preserve-3d;transform:rotateX(7deg) rotateY(-10deg)}.site-layer{position:absolute;inset:0;border:2px solid color-mix(in srgb,var(--layer) 70%,transparent);border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--layer) 15%,#07101b),rgba(5,7,13,.96));box-shadow:0 28px 70px rgba(0,0,0,.34),0 0 40px color-mix(in srgb,var(--layer) 16%,transparent);transform:translate3d(calc(var(--depth)*16px),calc(var(--depth)*-17px),calc(var(--depth)*-46px));transition:transform .28s ease,opacity .28s ease}.site-layer:nth-child(1){--depth:0;--layer:#22d3ee;z-index:5}.site-layer:nth-child(2){--depth:1;--layer:#f71ea2;z-index:4}.site-layer:nth-child(3){--depth:2;--layer:#8b5cf6;z-index:3}.site-layer:nth-child(4){--depth:3;--layer:#22d3ee;z-index:2}.site-layer:nth-child(5){--depth:4;--layer:#f71ea2;z-index:1}.site-layer:not(:first-child){opacity:.42}.site-stack:hover .site-layer{transform:translate3d(calc(var(--depth)*24px),calc(var(--depth)*-28px),calc(var(--depth)*-62px))}.browser-bar{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px}.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--layer);box-shadow:0 0 13px var(--layer)}.browser-bar span{margin-left:8px;color:var(--muted);font:600 .68rem var(--mono)}.site-screen{padding:24px}.site-screen strong{display:block;font:800 clamp(1.5rem,3.2vw,2.4rem)/1.05 var(--display)}.site-screen p{color:var(--muted);max-width:30ch}.site-screen .mini-ui{display:grid;grid-template-columns:1.2fr .8fr;gap:10px;margin-top:22px}.mini-ui b{height:72px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--layer) 9%,transparent)}.layer-label{position:absolute;right:16px;bottom:14px;font:700 .62rem var(--mono);letter-spacing:.1em;color:var(--layer);text-transform:uppercase}.story-bridge{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;margin-top:34px}.story-node{min-height:170px;border:1px solid var(--line);border-radius:20px;padding:22px;background:rgba(11,16,32,.78)}.story-node span{font:700 .68rem var(--mono);color:var(--accent);text-transform:uppercase}.story-node strong{display:block;font:800 1.35rem var(--display);margin:.55rem 0}.story-node p{margin:0;color:var(--muted)}.story-arrow{color:var(--accent);font:800 1.7rem var(--mono)}.capability-boundary{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:32px}.capability-field{border:1px solid var(--line);border-radius:22px;padding:28px;background:linear-gradient(145deg,rgba(17,24,43,.92),rgba(7,10,19,.82))}.capability-field h3{font:800 1.45rem var(--display)}.capability-field ul{padding-left:20px;color:var(--muted)}.capability-field.limit{border-style:dashed}.blueprint{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:32px;padding:22px;border:1px solid rgba(34,211,238,.28);border-radius:24px;background-image:linear-gradient(rgba(34,211,238,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.055) 1px,transparent 1px);background-size:28px 28px}.blueprint-zone{grid-column:span 4;min-height:150px;padding:19px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:16px;background:rgba(5,7,13,.88)}.blueprint-zone.wide{grid-column:span 8}.blueprint-zone strong{display:block;font:800 1.15rem var(--display)}.blueprint-zone span{display:block;color:var(--muted);margin-top:7px}.brief-lines{counter-reset:brief;display:grid;gap:10px;margin-top:30px}.brief-line{counter-increment:brief;display:grid;grid-template-columns:48px 190px 1fr;gap:15px;align-items:start;padding:18px;border-bottom:1px solid var(--line)}.brief-line::before{content:counter(brief,decimal-leading-zero);font:700 .76rem var(--mono);color:var(--accent)}.brief-line b{font-family:var(--display)}.brief-line span{color:var(--muted)}.version-line{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:32px}.version-step{position:relative;min-height:170px;padding:18px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}.version-step::after{content:"";position:absolute;top:50%;left:100%;width:10px;height:2px;background:var(--accent)}.version-step:last-child::after{display:none}.version-step b{display:block;font-family:var(--display)}.version-step span{display:block;color:var(--muted);font-size:.85rem;margin-top:8px}.storage-lab{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:22px;margin-top:32px}.storage-controls{display:grid;gap:9px}.storage-controls button{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:16px;text-align:left;cursor:pointer}.storage-controls button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}.storage-result{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:22px;padding:26px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,transparent),rgba(11,16,32,.88))}.storage-result strong{font:800 1.6rem var(--display)}.storage-result p{color:var(--muted)}.storage-stack{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.storage-stack span{border:1px solid var(--line);border-radius:999px;padding:7px 10px;font:.68rem var(--mono);color:var(--accent)}.door-model{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:32px}.door{min-height:230px;border:1px solid var(--line);border-radius:20px;padding:24px;background:linear-gradient(180deg,rgba(17,24,43,.9),rgba(5,7,13,.92));box-shadow:inset 0 0 0 8px rgba(5,7,13,.38)}.door::before{content:"";display:block;width:22px;height:22px;border:2px solid var(--accent);border-radius:50%;margin:8px 0 30px auto;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}.door h3{font:800 1.35rem var(--display)}.door p{color:var(--muted)}.brief-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:22px;margin-top:32px}.brief-form{display:grid;gap:14px}.brief-form label{display:grid;gap:7px;font:700 .76rem var(--mono);color:var(--muted)}.brief-form input,.brief-form select,.brief-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#070a12;color:var(--ink);padding:13px 14px;outline:none}.brief-form input:focus,.brief-form select:focus,.brief-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.brief-output{position:sticky;top:92px;align-self:start;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:20px;padding:22px;background:#070a12}.brief-output pre{white-space:pre-wrap;word-break:break-word;color:#d7faff;font:400 .78rem/1.62 var(--mono);max-height:500px;overflow:auto}.inspection{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:32px}.inspection label{min-height:150px;display:grid;grid-template-rows:auto 1fr;gap:12px;border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--panel);cursor:pointer}.inspection input{accent-color:var(--accent)}.inspection b{font-family:var(--display)}.inspection span{color:var(--muted);font-size:.82rem}.split-stage{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}.split-half{min-height:290px;border:1px solid var(--line);border-radius:22px;padding:28px;background:rgba(11,16,32,.8)}.split-half h3{font:800 1.6rem var(--display)}.split-half ul{padding-left:20px;color:var(--muted)}.split-half.production{border-color:rgba(247,30,162,.42)}.takeaway{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:32px}.takeaway div{border-top:3px solid var(--accent);padding:20px;background:rgba(11,16,32,.72)}.takeaway b{display:block;font-family:var(--display)}.takeaway span{display:block;color:var(--muted);font-size:.85rem;margin-top:7px}.source-note{font-size:.82rem;color:var(--muted);margin-top:24px}.source-note a{color:var(--cyan)}
:where(a:any-link,button,input,select,textarea):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:900px){.site-stage{min-height:330px}.story-bridge{grid-template-columns:1fr}.story-arrow{transform:rotate(90deg);justify-self:center}.capability-boundary,.storage-lab,.brief-builder,.split-stage{grid-template-columns:1fr}.version-line{grid-template-columns:1fr 1fr}.version-step::after{display:none}.door-model{grid-template-columns:1fr}.inspection{grid-template-columns:1fr 1fr}.brief-output{position:static}.blueprint-zone,.blueprint-zone.wide{grid-column:1/-1}.takeaway{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-stage{min-height:270px}.site-stack{width:92%;transform:rotateX(5deg) rotateY(-5deg)}.site-screen{padding:16px}.site-screen .mini-ui{margin-top:12px}.brief-line{grid-template-columns:35px 1fr}.brief-line span{grid-column:2}.version-line,.inspection,.takeaway{grid-template-columns:1fr}.capability-field,.split-half{padding:22px}}
@media(prefers-reduced-motion:reduce){.site-stack,.site-layer,.site-stack:hover .site-layer{transform:none}.site-layer:not(:first-child){display:none}}
@media(pointer:coarse),(max-width:560px){
.site-stack,.site-layer{transform:none!important}
.site-layer:not(:first-child){display:none}
.brief-form input,.brief-form select,.brief-form textarea{min-height:44px;font-family:var(--sans);font-size:1rem;line-height:1.4}
}

/* Form controls must not inherit the compact mono label size on desktop. */
.brief-form input,.brief-form select,.brief-form textarea{font:1rem/1.4 var(--sans)}

/* Clase 4 · De archivos estáticos a decisiones explorables */
html{overflow-x:clip}.scene{content-visibility:visible;contain-intrinsic-size:auto}.cta-band{flex-wrap:wrap}.cta-band>div{min-width:0;flex:1 1 34rem}.cta-band .actions{min-width:0;flex:1 1 18rem}.cta-band .btn{max-width:100%;white-space:normal;text-align:center}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px}.section-heading h2{margin-bottom:0}.evidence-pill,.demo-label{flex:none;border:1px solid rgba(34,211,238,.38);border-radius:999px;padding:8px 11px;color:#67e8f9;background:rgba(34,211,238,.08);font:700 .68rem var(--mono);letter-spacing:.05em}.watch-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr);gap:18px;margin-top:30px;align-items:start}.video-shell{position:relative;align-self:start;width:100%;min-width:0;max-width:100%;overflow:hidden;border:1px solid rgba(34,211,238,.35);border-radius:22px;aspect-ratio:16/9;background:#02040a;box-shadow:0 22px 80px rgba(0,0,0,.34)}.video-shell iframe{display:block;min-width:0;max-width:100%;width:100%;height:100%;border:0}.moments-pending{display:flex;min-width:0;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3cqi,30px);background:linear-gradient(155deg,rgba(13,22,39,.96),rgba(7,9,17,.94));container-type:inline-size}.moments-pending h3{font:800 clamp(1.35rem,8cqi,1.9rem)/1.08 var(--display);margin:.55rem 0}.moments-pending p,.moments-pending li{color:var(--muted)}.moments-pending ul{padding-left:20px;margin:0 0 22px}.moments-pending .btn{margin-top:auto;width:100%}.static-to-live{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;margin-top:32px;padding:clamp(22px,4vw,40px);border:1px solid rgba(139,92,246,.35);border-radius:26px;background:radial-gradient(circle at 80% 50%,rgba(34,211,238,.1),transparent 38%),rgba(8,12,23,.82)}.dead-files{position:relative;display:grid;grid-template-columns:repeat(2,minmax(70px,1fr));gap:10px}.dead-files span{display:grid;place-items:center;min-height:82px;border:1px solid rgba(248,113,113,.35);border-radius:16px;color:#fecaca;background:rgba(127,29,29,.1);font:800 1.05rem var(--mono);filter:saturate(.65)}.dead-files b{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;display:grid;place-items:center;width:72px;aspect-ratio:1;border:5px solid #fb7185;border-radius:50%;color:#fb7185;background:rgba(5,7,13,.88);font:900 3rem/1 var(--display);box-shadow:0 0 32px rgba(251,113,133,.25)}.transform-arrow{color:var(--cyan);font:900 2rem var(--display);text-shadow:0 0 18px rgba(34,211,238,.55)}.live-output{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;min-height:176px;border:1px solid rgba(34,211,238,.45);border-radius:20px;padding:24px;background:linear-gradient(145deg,rgba(34,211,238,.12),rgba(139,92,246,.08))}.live-output strong{font:800 clamp(1.4rem,3vw,2rem) var(--display)}.live-output>span:last-child{grid-column:2;color:var(--muted)}.pulse-dot{width:13px;height:13px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 0 7px rgba(45,212,191,.12),0 0 22px #2dd4bf}.decision-dashboard{margin-top:30px;overflow:hidden;border:1px solid rgba(34,211,238,.32);border-radius:26px;background:linear-gradient(160deg,rgba(10,18,34,.98),rgba(6,8,15,.98));box-shadow:0 30px 90px rgba(0,0,0,.3);container-type:inline-size}.dashboard-toolbar{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}.dashboard-toolbar button{min-height:44px;flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 16px;color:var(--muted);background:#070b14;font:700 .82rem var(--sans);cursor:pointer;white-space:nowrap}.dashboard-toolbar button[aria-pressed="true"]{color:#041014;border-color:#22d3ee;background:linear-gradient(135deg,#22d3ee,#67e8f9);box-shadow:0 0 26px rgba(34,211,238,.22)}.dashboard-meta{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;color:var(--muted);font:.68rem var(--mono)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 20px 20px}.metric-card{min-width:0;min-height:142px;border:1px solid var(--line);border-radius:17px;padding:18px;background:rgba(15,23,42,.74)}.metric-card span,.metric-card small{display:block;color:var(--muted)}.metric-card strong{display:block;margin:.5rem 0;font:800 clamp(1.35rem,5cqi,2.15rem) var(--display)}.metric-card small{font-size:.72rem}.metric-card.risk{border-color:rgba(247,30,162,.42);background:rgba(247,30,162,.055)}.dashboard-insight{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:12px;padding:20px;border-top:1px solid var(--line);background:rgba(2,6,14,.48)}.dashboard-insight h3{font:800 clamp(1.35rem,3cqi,1.85rem)/1.12 var(--display);margin:.5rem 0}.dashboard-insight p{margin:0;color:var(--muted)}.next-decision{border-left:3px solid var(--accent);padding:14px 16px;background:rgba(247,30,162,.06)}.next-decision span{display:block;color:var(--accent);font:700 .68rem var(--mono);text-transform:uppercase}.next-decision strong{display:block;margin-top:8px;font-family:var(--display)}.metric-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.metric-ladder>div{position:relative;min-width:0;border-top:3px solid var(--cyan);padding:18px;background:rgba(12,18,31,.72)}.metric-ladder span{color:var(--cyan);font:700 .68rem var(--mono)}.metric-ladder strong,.metric-ladder small{display:block}.metric-ladder strong{margin:.45rem 0;font-family:var(--display)}.metric-ladder small{color:var(--muted)}

@container (max-width:720px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-insight{grid-template-columns:1fr}}
@media(max-width:900px){.section-heading{align-items:start;flex-direction:column}.watch-grid{grid-template-columns:1fr}.moments-pending .btn{margin-top:10px}.static-to-live{grid-template-columns:1fr}.transform-arrow{rotate:90deg;justify-self:center}.metric-ladder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dashboard-meta{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr;padding-inline:14px}.dashboard-insight{padding:16px}.metric-ladder{grid-template-columns:1fr}.static-to-live{padding:18px}.dead-files span{min-height:68px}.evidence-pill,.demo-label{white-space:normal}.watch-grid{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.pulse-dot{box-shadow:none}}