:root{color-scheme:dark;--red:#ef292e;--ink:#080809;--white:#eeeae5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--ink);color:var(--white);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--red);outline-offset:8px}.header{position:absolute;z-index:10;top:0;left:0;width:100%;padding:30px 5%;display:flex;justify-content:space-between;align-items:center}.wordmark{font-size:36px;font-weight:900;letter-spacing:-3px;font-style:italic;line-height:.85}.wordmark>span{color:var(--red)}.wordmark small{display:block;font-size:10px;letter-spacing:7px;margin:9px 0 0 5px;font-style:normal}.nav-link{font-size:14px;letter-spacing:2px;display:flex;gap:15px;align-items:center}.nav-dot{width:7px;height:7px;background:var(--red)}.journey{height:480vh;height:480svh}.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}.halo{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 66%,#422125 0,#181315 27%,#080809 65%);opacity:.8}.floor{position:absolute;left:-20%;width:140%;height:46%;bottom:-12%;background:radial-gradient(ellipse at 50% 5%,#4a414344,transparent 63%);border-top:1px solid #ffffff08;transform:perspective(700px) rotateX(40deg)}.intro{position:absolute;top:17%;width:100%;text-align:center;z-index:1;will-change:transform,opacity}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:600;color:#aaa3a4;margin:0 0 22px}h1,h2{font-weight:900;letter-spacing:-.055em;line-height:.92;margin:0}h1{font-size:clamp(56px,8.3vw,140px)}.scene{position:absolute;inset:0;z-index:2}.car{position:absolute;left:50%;top:57%;width:36vw;max-width:690px;transform:translate(-50%,-50%);will-change:transform,filter,opacity}.car img{display:block;position:relative;z-index:2;width:100%;height:auto}.shadow{position:absolute;width:85%;height:10%;left:7.5%;bottom:-1%;border-radius:50%;background:#000;filter:blur(15px);opacity:.8;z-index:1}.cupra{z-index:3}.seat,.ka{z-index:2}.chapter{position:absolute;left:6%;top:19%;z-index:4;opacity:0;pointer-events:none;will-change:transform,opacity}.chapter h2{font-size:clamp(42px,6.4vw,106px)}.chapter-two{top:18%}.chapter-two h2{font-size:clamp(44px,7.7vw,128px)}.stage-bottom{position:absolute;z-index:5;bottom:35px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center}.scroll-hint,.step{font-size:12px;letter-spacing:2px}.scroll-hint{display:flex;gap:18px;align-items:center;color:#aaa}.scroll-hint>span{font-size:22px;color:var(--red)}.progress{position:absolute;bottom:0;width:100%;height:3px;background:#ffffff12}.progress div{height:100%;background:var(--red);transform:scaleX(0);transform-origin:left;will-change:transform}.fleet{padding:110px 5% 80px;background:#0b0b0d;position:relative;z-index:6}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:65px}.section-heading h2{font-size:clamp(42px,5.5vw,88px);width:66%}.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.fleet article{position:relative;background:linear-gradient(145deg,#1b191c,#111114);padding:26px 22px 20px;border-top:1px solid #ffffff1a;overflow:hidden}.fleet article.featured{border-color:var(--red)}.number{color:#8e898b;font-size:12px;letter-spacing:2px}.fleet article img{width:100%;height:260px;object-fit:contain;margin:24px 0;transition:transform .5s}.fleet article:hover img{transform:translateY(-8px)}.card-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid #ffffff15}.card-bottom h3{font-size:23px;letter-spacing:-1px;margin:0}.card-bottom span{font-size:10px;letter-spacing:2px;color:#a9a4a5}footer{padding:38px 5%;border-top:1px solid #ffffff15;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px}.nojs{padding:20px;text-align:center}@media(min-width:1800px){.car{max-width:none}}@media(max-width:700px){.header{padding:26px 6%}.wordmark{font-size:30px}.nav-link{font-size:12px;letter-spacing:1px}.journey{height:400svh}.intro{top:20%}h1{font-size:14vw}.car{width:56vw;top:61%}.chapter{top:20%;left:7%}.chapter h2{font-size:11vw}.chapter-two h2{font-size:13vw}.eyebrow{font-size:11px;letter-spacing:2px}.stage-bottom{bottom:26px}.scroll-hint,.step{font-size:10px;letter-spacing:1px}.fleet{padding:70px 6%}.section-heading{display:block;margin-bottom:35px}.section-heading h2{width:100%;font-size:13vw}.fleet-grid{grid-template-columns:1fr}.fleet article img{height:270px}.card-bottom span{font-size:11px}footer{font-size:10px;letter-spacing:1px;padding:28px 6%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.journey{height:100svh}.fleet article img{transition:none}.chapter{display:none}.scroll-hint{display:none}}

/* Secuencia: el canvas llena la pantalla conservando las proporciones. */
.journey{height:500vh;height:500svh}
.stage{background:#000}
.sequence{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;background:#000 url("assets/frames/00000.webp") center/cover no-repeat}
.sequence-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0008,transparent 42%,transparent 80%,#0009);z-index:1}
.intro,.chapter{z-index:2;text-shadow:0 2px 20px #0009}
.intro{top:16%}
.load-status{position:absolute;bottom:80px;left:5%;right:5%;font-size:12px;color:#ddd;z-index:5}
.load-status[hidden]{display:none}
@media(max-width:700px){.intro{top:20%}.chapter,.chapter-two{top:18%}.sequence-shade{background:linear-gradient(#0005,transparent 38%,transparent 75%,#0008)}}
@media(prefers-reduced-motion:reduce){.journey{height:100svh}.intro{opacity:1!important;transform:none!important}}

/* Logo oficial siempre visible durante toda la página. */
.header{position:fixed;z-index:100;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.45) 70%,transparent);padding:20px 5% 26px}
.header a{pointer-events:auto}
.wordmark{display:block;flex-shrink:0;line-height:0}
.brand-logo{display:block;width:clamp(104px,12vw,168px);height:auto;object-fit:contain}
@media(max-width:700px){.header{padding:18px 6% 24px}.brand-logo{width:105.6px}}

/* Inter y navegación basada en la referencia: barra flotante / panel lateral. */
@font-face{font-family:Inter;src:url("assets/fonts/Inter-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/Inter-SemiBold.ttf") format("truetype");font-style:normal;font-weight:600 900;font-display:swap}
body{font-family:Inter,Arial,Helvetica,sans-serif}
.header{gap:24px;pointer-events:none;padding:22px 3.5%;background:none;align-items:center}
.header a,.header button,.header nav{pointer-events:auto}
.wordmark{position:relative;z-index:4}
.main-menu{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1vw,20px);padding:8px 9px 8px 23px;border:1px solid #ffffff33;border-radius:100px;background:linear-gradient(110deg,rgba(112,28,30,.62),rgba(36,36,39,.82) 48%);box-shadow:inset 1px 0 1px #ef292e,0 8px 32px #0005;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.main-menu a{font-size:clamp(11px,.88vw,15px);font-weight:400;white-space:nowrap;line-height:1.5;padding:11px 0;transition:color .2s,background .2s}
.main-menu a:hover,.main-menu a:focus-visible{color:var(--red)}
.main-menu .is-active{font-weight:600;color:#fff;background:#f10c15;border-radius:100px;padding:12px 17px;box-shadow:0 0 18px #ef292e22}
.main-menu .is-active:hover,.main-menu .is-active:focus-visible{background:#cf1019;color:#fff}
.menu-toggle,.menu-backdrop{display:none}
@media(max-width:1199px){
 .header{padding:19px 6%;gap:18px;flex-wrap:nowrap;background:linear-gradient(#0009,transparent)}
 .menu-toggle{position:relative;z-index:4;display:flex;flex-direction:row;align-items:center;gap:10px;width:auto;min-height:44px;border:0;background:none;color:#fff;cursor:pointer;padding:7px 0 7px 7px;border-radius:0;font:400 14px Inter,Arial,sans-serif}
 .menu-icon{display:flex;flex-direction:column;gap:5px}
 .menu-icon>span{display:block;height:3px;width:27px;border-radius:2px;background:linear-gradient(to right,#fff 53%,#ed1c24 53%);transition:transform .2s,opacity .2s}
 .menu-toggle:focus-visible{outline:2px solid var(--red);outline-offset:5px}
 .menu-toggle[aria-expanded="true"] .menu-icon>span:first-child{transform:translateY(8px) rotate(45deg)}
 .menu-toggle[aria-expanded="true"] .menu-icon>span:nth-child(2){opacity:0}
 .menu-toggle[aria-expanded="true"] .menu-icon>span:last-child{transform:translateY(-8px) rotate(-45deg)}
 .main-menu{position:fixed;z-index:3;top:0;right:0;bottom:0;display:flex;width:min(82vw,380px);height:100vh;height:100dvh;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;margin:0;padding:95px 27px 30px;border:0;border-left:1px solid #ffffff22;border-radius:0;background:linear-gradient(155deg,rgba(33,33,35,.9),rgba(16,16,18,.87));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:-16px 0 55px #0004;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;pointer-events:none;transition:transform .25s ease,visibility .25s}
 .main-menu.is-open{transform:translateX(0);visibility:visible;pointer-events:auto}
 .main-menu::before{content:"";position:absolute;top:78px;left:0;right:0;border-top:1px solid #ffffff21}
 .main-menu a{font-size:clamp(14px,3.9vw,18px);line-height:1.4;padding:17px 5px;border:0;white-space:normal}
 .main-menu .is-active{font-weight:400;color:#ef3838;background:transparent;border:1.5px solid #df2a2f;border-radius:100px;text-align:center;margin-top:17px;padding:13px 10px;box-shadow:none}
 .main-menu .is-active:hover,.main-menu .is-active:focus-visible{color:#fff;background:#e51c27}
 .menu-backdrop{position:fixed;z-index:2;inset:0;width:100%;height:100%;border:0;padding:0;background:#0003;cursor:pointer}
 .header.menu-open .menu-backdrop{display:block}
}
@media(prefers-reduced-motion:reduce){.main-menu,.menu-icon>span{transition:none}}

/* Barra flotante centrada respecto a toda la pantalla en escritorio. */
@media(min-width:1200px){
 .header .main-menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;margin:0}
}