:root { --purple:#240085; --orange:#fc4c02; --gray:#eaeaea; --blue:#6886d6; --text:#65708d; --header-h:104px; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; color:var(--purple); background:#fff; font-family:"Gabarito",sans-serif; overflow-x:hidden; }
button { font:inherit; color:inherit; }
.skip { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.7rem 1rem; background:var(--purple); color:#fff; border-radius:.5rem; }
.skip:focus { top:1rem; }
.site-header { position:fixed; z-index:50; inset:0 0 auto; height:var(--header-h); padding:12px clamp(24px,7.2vw,120px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.91); border-bottom:1px solid rgba(36,0,133,.06); backdrop-filter:blur(16px); transition:box-shadow .25s; }
.site-header.scrolled { box-shadow:0 10px 40px rgba(36,0,133,.07); }
.logo-link { display:block; width:142px; height:77px; }
.logo-link img { width:100%; height:100%; object-fit:contain; }
nav { display:flex; align-items:center; gap:clamp(24px,3.2vw,52px); }
nav button,.menu-button { appearance:none; border:0; background:none; padding:.4rem 0; color:#4f5362; cursor:pointer; font-size:1rem; }
nav button:hover,nav button:focus-visible { color:var(--purple); }
.report-link { color:var(--purple); font-weight:700; border-bottom:2px solid var(--purple); }
.menu-button { display:none; color:var(--purple); font-weight:700; }
.scroll-stage { height:850vh; }
.viewport { position:sticky; top:0; width:100%; height:100svh; overflow:hidden; background:#fff; perspective:1000px; }
.intro-scene,.tunnel-scene,.origin-scene { position:absolute; inset:var(--header-h) 0 0; }
.intro-scene { z-index:10; background:#fff; opacity:1; transform-origin:48% 58%; will-change:transform,opacity; }
.hero-type { position:absolute; left:clamp(52px,9.4vw,158px); top:9%; width:min(84vw,1320px); display:grid; grid-template-columns:minmax(0,1.55fr) minmax(235px,.45fr); align-items:end; column-gap:clamp(28px,3.5vw,62px); }
.hero-type h1 { margin:0; line-height:.88; font-weight:900; transform-origin:43% 54%; will-change:transform; }
.hero-type h1 span { display:block; width:max-content; white-space:nowrap; }
.line-cumplimos { font-size:clamp(6.8rem,12.8vw,13.1rem); letter-spacing:.005em; }
.line-number { font-size:clamp(7.5rem,15.4vw,15.8rem); letter-spacing:-.005em; }
.line-vidas { font-size:clamp(7rem,13.5vw,13.8rem); letter-spacing:.005em; }
.outline { color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:clamp(2px,.2vw,4px) currentColor; paint-order:stroke fill; }
.outline.purple { color:var(--purple); }
.outline.orange { color:var(--orange); }
.hero-copy { align-self:end; margin-bottom:4%; max-width:390px; color:#70778a; font-size:clamp(1rem,1.35vw,1.32rem); line-height:1.26; will-change:opacity,transform; }
.hero-copy p { margin:0 0 1rem; }
.scroll-hint { position:absolute; z-index:3; left:50%; bottom:24px; width:34px; height:48px; }
.scroll-hint::before,.scroll-hint::after { content:""; position:absolute; left:50%; width:2px; height:35px; background:var(--purple); transform:translateX(-50%); }
.scroll-hint::after { bottom:3px; width:12px; height:12px; background:transparent; border-right:2px solid var(--purple); border-bottom:2px solid var(--purple); transform:translateX(-50%) rotate(45deg); }
.floating { position:absolute; border-radius:50%; filter:blur(.2px); animation:ambient-float var(--float-duration,12s) ease-in-out var(--float-delay,0s) infinite; }
.dot-one { width:26px; height:26px; left:42%; top:8%; background:#ffa267; --float-x:8px; --float-y:-7px; --float-duration:13s; }
.dot-two { width:18px; height:18px; right:7%; top:48%; background:var(--purple); --float-x:-6px; --float-y:9px; --float-duration:15s; --float-delay:-4s; }
.dot-three { width:44px; height:44px; right:14%; bottom:6%; background:#ffc9a8; --float-x:10px; --float-y:5px; --float-duration:17s; --float-delay:-7s; }
@keyframes ambient-float { 0%,100%{transform:translate3d(0,0,0)} 35%{transform:translate3d(var(--float-x,7px),var(--float-y,-6px),0)} 70%{transform:translate3d(calc(0px - var(--float-x,7px)),calc(0px - var(--float-y,-6px)),0)} }
.tunnel-scene { z-index:5; opacity:0; pointer-events:none; overflow:hidden; transform-style:preserve-3d; will-change:opacity; }
.tunnel-scene.active { pointer-events:auto; }
.tunnel-space { position:absolute; inset:0; transform-style:preserve-3d; perspective:840px; perspective-origin:50% 50%; pointer-events:none; }
.tunnel-node { position:absolute; left:50%; top:50%; border-radius:50%; transform-style:preserve-3d; will-change:transform,opacity; }
.portrait-node { z-index:2; appearance:none; padding:0; border:0; background:transparent; cursor:pointer; overflow:visible; }
.portrait-node::before,.decor-node::before { content:""; position:absolute; inset:0; border-radius:50%; animation:ambient-float var(--float-duration,13s) ease-in-out var(--float-delay,0s) infinite; }
.portrait-node::before { background-image:url("assets/demo-portraits.png"); background-repeat:no-repeat; background-size:var(--crop-size,610%) auto; background-position:var(--crop-position,20% 31%); box-shadow:0 8px 30px rgba(36,0,133,.08); }
.portrait-node:hover,.portrait-node:focus-visible,.portrait-node.selected { outline:4px solid rgba(36,0,133,.55); outline-offset:3px; }
.portrait-crop { background-image:url("assets/demo-portraits.png"); background-repeat:no-repeat; background-size:var(--crop-size,610%) auto; background-position:var(--crop-position,20% 31%); }
.crop-1 { --crop-size:610%; --crop-position:20% 31%; }.crop-2 { --crop-size:900%; --crop-position:88% 21%; }.crop-3 { --crop-size:600%; --crop-position:88% 82%; }.crop-4 { --crop-size:1150%; --crop-position:30% 67%; }.crop-5 { --crop-size:1250%; --crop-position:67% 52%; }.crop-6 { --crop-size:1700%; --crop-position:47% 77%; }.crop-7 { --crop-size:2200%; --crop-position:46% 41%; }.crop-8 { --crop-size:1900%; --crop-position:69% 32%; }
.decor-node { z-index:0; pointer-events:none!important; --node-color:var(--gray); }.decor-node.blue { --node-color:var(--blue); }.decor-node.purple { --node-color:linear-gradient(145deg,#8d65ff,var(--purple)); }
.decor-node::before { background:var(--node-color); }
.demo-label { position:absolute; z-index:4; bottom:22px; left:30px; margin:0; color:#9197a9; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; pointer-events:none; }
.journey-year { position:absolute; right:4vw; bottom:1vw; margin:0; color:rgba(36,0,133,.08); font-weight:900; font-size:clamp(5rem,12vw,12rem); line-height:1; pointer-events:none; }
.origin-scene { z-index:3; display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:4vw; padding:4vh 8vw; opacity:0; pointer-events:none; transform:scale(.96); will-change:opacity,transform; }
.origin-scene.active { pointer-events:auto; }
.origin-visual { position:relative; justify-self:end; width:min(41vw,560px); }
.origin-logo-circle { width:100%; aspect-ratio:1; border:2px solid #a48bff; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 0 90px rgba(104,134,214,.22); }
.origin-logo-circle img { width:64%; height:64%; object-fit:contain; }
.connector { position:absolute; left:93%; top:31%; width:11vw; height:80px; border-top:2px solid var(--purple); transform:skewY(-42deg); transform-origin:left; }
.connector::after { content:""; position:absolute; left:-11px; top:-12px; width:18px; height:18px; border:3px solid var(--purple); border-radius:50%; background:#fff; box-shadow:inset 0 0 0 4px #fff; }
.connector i { position:absolute; right:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--purple); }
.origin-card { position:relative; z-index:2; padding:clamp(28px,3.5vw,58px); border-radius:34px; background:rgba(255,255,255,.93); box-shadow:0 20px 90px rgba(36,0,133,.08); color:#65708d; }
.origin-card>span { font-size:clamp(1.3rem,2vw,2rem); }
.origin-card h2 { margin:.45rem 0 2rem; color:var(--purple); font-size:clamp(2.4rem,4.4vw,4.8rem); line-height:.96; letter-spacing:-.04em; }
.origin-card p { max-width:650px; margin:0; font-size:clamp(1rem,1.45vw,1.45rem); line-height:1.4; }
.reverse-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); margin:0; color:#9aa0b0; font-size:.72rem; }
.progress { position:absolute; z-index:20; right:13px; top:calc(var(--header-h) + 4vh); bottom:4vh; width:2px; background:rgba(36,0,133,.1); }
.progress i { display:block; width:100%; height:0; background:var(--purple); }
dialog { border:0; padding:0; }
dialog::backdrop { background:rgba(245,246,251,.64); backdrop-filter:blur(14px); }
.milestone { overflow:visible; width:min(92vw,1240px); max-height:88vh; background:transparent; color:var(--text); }
.milestone[open] { display:grid; grid-template-columns:.76fr 1.24fr; align-items:center; gap:5vw; }
.milestone-portrait { width:min(36vw,450px); aspect-ratio:1; justify-self:end; border:3px solid #9b7eff; border-radius:50%; background-color:#fff; box-shadow:0 0 0 10px rgba(155,126,255,.1),0 25px 90px rgba(36,0,133,.2); }
.milestone article { position:relative; z-index:2; max-height:84vh; overflow:auto; padding:clamp(30px,4vw,62px); border-radius:32px; background:rgba(255,255,255,.96); box-shadow:0 20px 100px rgba(36,0,133,.1); }
.dialog-connector { position:absolute; left:31%; top:36%; width:17%; border-top:2px solid var(--purple); transform:rotate(-17deg); transform-origin:left; }
.dialog-connector::before,.dialog-connector::after { content:""; position:absolute; width:11px; height:11px; border-radius:50%; background:var(--purple); top:-6px; }
.dialog-connector::before { left:0; box-shadow:0 0 0 5px white,0 0 0 7px var(--purple); }.dialog-connector::after { right:0; }
.milestone-year { font-size:clamp(1.3rem,2vw,2rem); }
.milestone h2 { margin:.5rem 0 1.5rem; color:var(--purple); font-size:clamp(2.3rem,4vw,4.5rem); line-height:.98; letter-spacing:-.035em; }
.milestone p { font-size:clamp(1rem,1.35vw,1.35rem); line-height:1.36; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:1.5rem; padding-top:1.6rem; border-top:1px solid #dadde8; }
.stats div { padding:0 1.4rem; border-right:1px solid #dadde8; }.stats div:first-child { padding-left:0; }.stats div:last-child { border:0; }
.stats b { display:block; color:var(--purple); font-size:clamp(1.7rem,2.4vw,2.5rem); }.stats span { font-size:.9rem; }
.close-dialog,.close-soon { position:absolute; z-index:10; right:14px; top:14px; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(36,0,133,.2); border-radius:50%; background:#fff; cursor:pointer; font-size:1.8rem; }
.soon-dialog { width:min(90vw,560px); padding:4rem; border-radius:28px; text-align:center; color:#6f7484; box-shadow:0 30px 100px rgba(36,0,133,.15); }
.soon-dialog img { width:140px; height:100px; object-fit:contain; }.soon-dialog p { margin:1rem 0 .4rem; color:var(--orange); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; }.soon-dialog h2 { margin:0 0 .8rem; color:var(--purple); font-size:3.2rem; }
@media(max-width:900px){ :root{--header-h:82px}.site-header{padding:8px 22px}.logo-link{width:105px;height:62px}.menu-button{display:block}nav{position:absolute;top:var(--header-h);right:14px;display:none;width:210px;padding:1.2rem;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(36,0,133,.15)}nav.open{display:grid;gap:.6rem}nav button{text-align:left}.hero-type{left:7vw;top:11%;width:88vw;display:block}.hero-type h1{line-height:.9}.line-cumplimos{font-size:16.6vw;letter-spacing:0}.line-number{font-size:18.5vw;letter-spacing:-.005em}.line-vidas{font-size:19.5vw;letter-spacing:0}.hero-copy{width:73vw;margin:2.1rem 0 0 11vw;font-size:.98rem}.origin-scene{grid-template-columns:1fr;align-content:center;gap:3vh;padding:4vh 8vw 3vh}.origin-visual{justify-self:start;width:min(62vw,360px)}.connector{left:88%;width:25vw}.origin-card{margin-left:8vw;padding:24px;border-radius:22px}.origin-card h2{margin-bottom:1rem;font-size:clamp(2rem,8vw,3.4rem)}.origin-card p{font-size:.92rem}.milestone{width:100%;max-height:100dvh}.milestone[open]{grid-template-columns:1fr;align-items:start;gap:1.4rem;overflow-y:auto;padding:4rem 5vw 3rem}.milestone-portrait{width:min(58vw,320px);justify-self:center;flex:none}.milestone article{max-height:none;overflow:visible;padding:26px;border-radius:24px}.close-dialog{position:fixed;right:18px;top:18px}.dialog-connector{display:none}.tunnel-node{--float-x:4px!important;--float-y:-4px!important}}
@media(max-width:520px){.hero-type{top:10%}.hero-copy{width:77vw;margin-left:7vw}.milestone[open]{padding-left:5vw;padding-right:5vw}.stats{gap:.5rem}.stats div{padding:0 .55rem}.stats b{font-size:1.4rem}.stats span{font-size:.7rem}.soon-dialog{padding:3rem 1.8rem}}
@media(prefers-reduced-motion:reduce){.scroll-stage{height:auto}.viewport{position:relative;height:auto;overflow:visible;perspective:none}.intro-scene,.tunnel-scene,.origin-scene{position:relative;inset:auto;min-height:100svh;opacity:1!important;transform:none!important}.hero-type h1{transform:none!important}.hero-copy{opacity:1!important;transform:none!important}.floating,.portrait-node::before,.decor-node::before{animation:none!important}.tunnel-scene{display:none}.origin-scene{display:grid}.progress{display:none}}