/* =================================================================== TRUE X · THE MOTOR HOUSE — Holding landing Brand V2026/V3 tokens + Awwwards-grade motion styling =================================================================== */ /* Google Fonts (Outfit + Oswald) se cargan con en el de index.html para evitar el @import render-blocking */ @font-face { font-family: "Horizon"; src: url("assets/fonts/Horizon.woff2") format("woff2"), url("assets/fonts/Horizon.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Saira"; src: url("assets/fonts/Saira.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; } :root { --tx-black:#0A0A0A; --tx-off-white:#EDEDED; --tx-lime:#D4FF3D; --tx-green:#3DE87A; --tx-graphite:#3A3A3A; --tx-ink:#141414; --tx-black-3:#1C1C1C; --tx-gray:#A6A6A6; --tx-muted:#C7C7C7; --tx-line:rgba(255,255,255,0.08); --tx-gradient:linear-gradient(135deg,#D4FF3D 0%,#9FF24C 50%,#3DE87A 100%); --tx-display:"Horizon","Saira","Archivo Black",Impact,sans-serif; --tx-body:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --tx-mono:"Oswald","Archivo Narrow",sans-serif; --tx-ease:cubic-bezier(0.22,1,0.36,1); --tx-dur-fast:160ms; --tx-dur-base:280ms; --tx-dur-slow:480ms; --nav-h:76px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ -webkit-text-size-adjust:100%; } body{ background:var(--tx-black); color:var(--tx-off-white); font-family:var(--tx-body); line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--tx-lime);color:var(--tx-black)} /* Lenis */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} /* ---------- Typography helpers ---------- */ .display{font-family:var(--tx-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;line-height:0.92} .eyebrow{font-family:var(--tx-mono);text-transform:uppercase;letter-spacing:0.28em;font-size:.72rem;color:var(--tx-lime)} .mono{font-family:var(--tx-mono);text-transform:uppercase;letter-spacing:0.12em} .lime{color:var(--tx-lime)} .muted{color:var(--tx-gray)} /* ---------- Reusable ---------- */ .wrap{width:min(1320px,92vw);margin-inline:auto} .btn{ display:inline-flex;align-items:center;gap:.6em; background:var(--tx-lime);color:var(--tx-black); font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem; padding:14px 26px;border-radius:4px;border:none;cursor:pointer; transition:transform var(--tx-dur-fast) var(--tx-ease),background var(--tx-dur-base) var(--tx-ease); } .btn:hover{transform:translateY(-2px)} .btn:not(.btn--ghost):hover{box-shadow:0 10px 32px -10px rgba(212,255,61,.5)} .btn:active{transform:translateY(0) scale(.98)} .btn--ghost{background:transparent;color:var(--tx-off-white);border:1px solid var(--tx-line)} .btn--ghost:hover{border-color:var(--tx-lime);color:var(--tx-lime)} /* Accessibility: visible keyboard focus + text selection */ :where(a,button,.unit,.nav-toggle,input):focus-visible{outline:2px solid var(--tx-lime);outline-offset:3px;border-radius:6px} .unit:focus-visible{outline-offset:-3px} :focus:not(:focus-visible){outline:none} ::selection{background:var(--tx-lime);color:var(--tx-black)} /* =================================================================== PRELOADER =================================================================== */ #loader{position:fixed;inset:0;z-index:100;background:var(--tx-black); display:grid;place-items:center} #loader .l-mark{font-family:var(--tx-display);font-weight:700;font-size:clamp(2.5rem,9vw,7rem); letter-spacing:-.02em;line-height:1;color:var(--tx-off-white);overflow:hidden} #loader .l-mark .x{color:var(--tx-lime)} #loader .l-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--tx-lime)} #loader .l-pct{position:absolute;right:6vw;bottom:5vh;font-family:var(--tx-mono); font-size:.8rem;letter-spacing:.1em;color:var(--tx-gray)} /* =================================================================== NAV =================================================================== */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h); display:flex;align-items:center; transition:background var(--tx-dur-base) var(--tx-ease),backdrop-filter var(--tx-dur-base)} .nav.scrolled{background:rgba(10,10,10,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--tx-line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;width:min(1320px,92vw)} .nav .brand{display:flex;align-items:baseline;gap:.55rem;font-family:var(--tx-display); font-weight:700;letter-spacing:-.02em;font-size:1.18rem} .nav .brand .x{color:var(--tx-lime)} .nav .brand small{font-family:var(--tx-mono);font-weight:500;font-size:.6rem;letter-spacing:.22em; color:var(--tx-gray);text-transform:uppercase} .nav .links{display:flex;gap:2rem;align-items:center} .nav .links a{font-size:.82rem;letter-spacing:.04em;color:var(--tx-off-white);position:relative;padding:.2rem 0} .nav .links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--tx-lime); transition:width var(--tx-dur-base) var(--tx-ease)} .nav .links a:hover::after{width:100%} .nav .links a:hover{color:var(--tx-lime)} /* hamburger */ .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--tx-line);border-radius:4px; background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px; transition:border-color var(--tx-dur-base) var(--tx-ease);z-index:80} .nav-toggle:hover{border-color:var(--tx-lime)} .nav-toggle span{display:block;width:20px;height:2px;background:var(--tx-off-white);transition:transform .3s var(--tx-ease),opacity .2s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)} /* mobile overlay menu */ .mobile-menu{position:fixed;inset:0;z-index:70;background:rgba(8,8,8,.97);backdrop-filter:blur(18px); display:flex;flex-direction:column;justify-content:center;gap:2.4rem;padding:0 8vw; opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity .4s var(--tx-ease),transform .4s var(--tx-ease),visibility .4s} .mobile-menu.open{opacity:1;visibility:visible;transform:none} .mobile-menu__links{display:flex;flex-direction:column;gap:1.1rem} .mobile-menu__links a{font-family:var(--tx-display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em; font-size:clamp(1.7rem,6.6vw,3rem);line-height:.98;color:var(--tx-off-white);display:flex;align-items:baseline;gap:.7rem; opacity:0;transform:translateY(16px);transition:color .2s var(--tx-ease)} .mobile-menu.open .mobile-menu__links a{opacity:1;transform:none;transition:opacity .5s var(--tx-ease),transform .5s var(--tx-ease)} .mobile-menu.open .mobile-menu__links a:nth-child(1){transition-delay:.08s} .mobile-menu.open .mobile-menu__links a:nth-child(2){transition-delay:.14s} .mobile-menu.open .mobile-menu__links a:nth-child(3){transition-delay:.20s} .mobile-menu.open .mobile-menu__links a:nth-child(4){transition-delay:.26s} .mobile-menu.open .mobile-menu__links a:nth-child(5){transition-delay:.32s} .mobile-menu__links a:active,.mobile-menu__links a:hover{color:var(--tx-lime)} .mobile-menu__links .mm__i{font-family:var(--tx-mono);font-size:.8rem;font-weight:500;color:var(--tx-lime);letter-spacing:.1em} .mobile-menu__cta{align-self:flex-start;font-size:1rem;padding:16px 32px} /* =================================================================== HERO =================================================================== */ .hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end} .hero__media{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform} .hero__media img{width:100%;height:116%;object-fit:cover;object-position:50% 42%;filter:contrast(1.06) saturate(.84) brightness(.7)} .hero__scrim{position:absolute;inset:0;z-index:1; background: linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.08) 24%,rgba(10,10,10,.4) 56%,rgba(10,10,10,.98) 100%), linear-gradient(90deg,rgba(10,10,10,.64) 0%,rgba(10,10,10,.16) 44%,rgba(10,10,10,0) 72%), radial-gradient(135% 95% at 74% 16%,rgba(10,10,10,0) 32%,rgba(10,10,10,.6) 100%)} .hero__inner{position:relative;z-index:2;width:min(1320px,92vw);margin-inline:auto;padding-bottom:8vh} .hero .eyebrow{display:block;margin-bottom:1.2rem;opacity:0} .hero h1{font-family:var(--tx-display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em; line-height:.86;font-size:clamp(3rem,11.5vw,11rem);color:var(--tx-off-white)} .hero h1 .line{display:block;overflow:hidden} .hero h1 .line span{display:block;transform:translateY(110%)} .hero h1 .accent{color:var(--tx-lime)} .hero__sub{margin-top:1.6rem;max-width:46ch;font-size:clamp(1rem,1.4vw,1.25rem);color:var(--tx-muted);opacity:0} .hero__cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap;opacity:0} .hero__scroll{position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);z-index:3; font-family:var(--tx-mono);font-size:.66rem;letter-spacing:.25em;color:var(--tx-gray);text-transform:uppercase; display:flex;flex-direction:column;align-items:center;gap:.5rem} .hero__scroll .dot{width:1px;height:42px;background:linear-gradient(var(--tx-lime),transparent);animation:scrolldot 2.2s var(--tx-ease) infinite} @keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* =================================================================== MANIFESTO =================================================================== */ .manifesto{padding:clamp(7rem,16vh,14rem) 0} .manifesto .eyebrow{margin-bottom:2.5rem} .manifesto__type{font-family:var(--tx-display);font-weight:700;text-transform:uppercase; letter-spacing:-.02em;line-height:1.02;font-size:clamp(1.8rem,5.2vw,4.6rem);max-width:18ch} .manifesto__type .w{display:inline-block;opacity:.16;transition:opacity .5s var(--tx-ease)} .manifesto__type .w.on{opacity:1} .manifesto__type em{font-style:normal;color:var(--tx-lime)} .manifesto__foot{margin-top:3.5rem;display:flex;gap:3rem;flex-wrap:wrap;max-width:60ch;color:var(--tx-gray);font-size:1.05rem} .manifesto__foot p{flex:1 1 240px} /* =================================================================== ECOSYSTEM (pinned horizontal) =================================================================== */ .eco{background:var(--tx-black)} .eco__head{padding:clamp(4rem,9vh,7rem) 0 2.5rem} .eco__head h2{font-size:clamp(2rem,5.5vw,4.4rem)} .eco__head .sub{margin-top:1rem;color:var(--tx-gray);max-width:52ch} .eco__track-wrap{position:relative;height:100svh;overflow:hidden} .eco__track{display:flex;gap:28px;height:100%;align-items:center;padding-inline:max(4vw,24px);will-change:transform} .unit{position:relative;flex:0 0 clamp(280px,30vw,420px);height:min(74vh,640px); border-radius:14px;overflow:hidden;border:1px solid var(--tx-line);background:var(--tx-ink);isolation:isolate} .unit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:brightness(.62) contrast(1.04) saturate(.9);transition:transform .7s var(--tx-ease),filter .7s var(--tx-ease)} .unit__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.1) 0%,rgba(10,10,10,.2) 45%,rgba(10,10,10,.92) 100%)} .unit__body{position:absolute;z-index:2;inset:auto 0 0 0;padding:26px} .unit__no{position:absolute;z-index:3;top:16px;left:22px;font-family:var(--tx-display);font-weight:700; font-size:clamp(22px,4vw,42px);line-height:1;letter-spacing:.01em;color:var(--tx-lime)} .unit__tag{position:absolute;z-index:3;top:24px;right:22px;font-family:var(--tx-mono);font-size:clamp(13px,1.4vw,18px); font-weight:700;letter-spacing:.16em;color:var(--tx-off-white);border:1px solid var(--tx-line); padding:5px 12px;border-radius:4px;text-transform:uppercase;background:rgba(10,10,10,.35)} .unit__name{font-family:var(--tx-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em; line-height:.96;font-size:clamp(1.5rem,2.3vw,2.1rem)} .unit__name .x{color:var(--tx-lime)} .unit__desc{margin-top:.55rem;color:var(--tx-muted);font-size:.95rem;max-width:30ch} .unit__go{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--tx-mono); font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--tx-lime);text-transform:uppercase; opacity:1;transition:gap var(--tx-dur-base) var(--tx-ease)} .unit:hover img{transform:scale(1.06);filter:brightness(.72) contrast(1.05) saturate(1)} .unit:hover .unit__go{gap:.85rem} .eco__progress{position:relative;height:2px;background:var(--tx-line);width:min(1320px,92vw);margin:2rem auto 0} .eco__progress i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--tx-lime)} /* =================================================================== MIAMI / AMERICAS =================================================================== */ .miami{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:center} .miami__media{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform} .miami__media img{width:100%;height:116%;object-fit:cover;filter:brightness(.6) contrast(1.05)} .miami__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.45) 50%,rgba(10,10,10,.2) 100%)} .miami__inner{position:relative;z-index:2;width:min(1320px,92vw);margin-inline:auto} .miami h2{font-size:clamp(2.2rem,6.5vw,5.5rem);max-width:16ch} .miami p{margin-top:1.4rem;max-width:44ch;color:var(--tx-muted);font-size:1.1rem} /* =================================================================== NUMBERS =================================================================== */ .stats{padding:clamp(6rem,14vh,11rem) 0;border-top:1px solid var(--tx-line)} .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem} .stat .n{font-family:var(--tx-display);font-weight:700;font-size:clamp(2.6rem,6vw,5rem);line-height:1;color:var(--tx-off-white)} .stat .n .x{color:var(--tx-lime)} .stat .l{margin-top:.7rem;font-family:var(--tx-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--tx-gray)} /* =================================================================== CTA + FOOTER =================================================================== */ .cta{position:relative;padding:clamp(7rem,18vh,15rem) 0;text-align:center;overflow:hidden} .cta__ghost{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none} .cta__ghost span{font-family:var(--tx-display);font-weight:700;font-size:min(32vw,420px);line-height:1;color:#101010} .cta__inner{position:relative;z-index:1} .cta h2{font-size:clamp(2.4rem,8vw,7rem)} .cta h2 .x{color:var(--tx-lime)} .cta p{margin:1.4rem auto 2.4rem;max-width:40ch;color:var(--tx-gray)} .footer{border-top:1px solid var(--tx-line);padding:3.5rem 0} .footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap} .footer .brand{font-family:var(--tx-display);font-weight:700;letter-spacing:-.02em;font-size:1.4rem} .footer .brand .x{color:var(--tx-lime)} .footer .brand small{display:block;font-family:var(--tx-mono);font-size:.6rem;letter-spacing:.2em;color:var(--tx-gray);margin-top:.4rem} .footer .cols{display:flex;gap:3.5rem;flex-wrap:wrap} .footer .col h4{font-family:var(--tx-mono);font-size:.68rem;letter-spacing:.16em;color:var(--tx-gray);text-transform:uppercase;margin-bottom:.9rem} .footer .col a{display:block;font-size:.9rem;color:var(--tx-muted);margin-bottom:.5rem} .footer .col a:hover{color:var(--tx-lime)} .footer .legal{width:100%;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--tx-line); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:var(--tx-gray)} /* reveal util */ .reveal{opacity:0;transform:translateY(40px)} /* =================================================================== MOTION SIMULATION (cinemagraph: Ken Burns + light sweep + grain) =================================================================== */ .kenburns{animation:kenburns 26s var(--tx-ease) infinite alternate;transform-origin:60% 50%;will-change:transform} @keyframes kenburns{ 0%{transform:scale(1.06) translate3d(0,0,0)} 100%{transform:scale(1.16) translate3d(-2.2%,-1.4%,0)} } /* moving headlight sweep across hero */ .hero__sweep{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5; background:radial-gradient(38% 60% at 20% 60%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 60%), radial-gradient(30% 50% at 50% 40%,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 60%); animation:sweep 9s ease-in-out infinite alternate;will-change:transform,opacity} @keyframes sweep{0%{transform:translateX(-12%) translateY(2%);opacity:.32}100%{transform:translateX(14%) translateY(-2%);opacity:.6}} /* film grain */ .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px;animation:grain 0.6s steps(4) infinite} @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(2%,3%)}} /* unit cards: slow drift to feel alive */ .unit img{animation:drift 22s var(--tx-ease) infinite alternate} .unit:nth-child(odd) img{animation-duration:28s;animation-direction:alternate-reverse} @keyframes drift{0%{transform:scale(1.04)}100%{transform:scale(1.12) translateX(-2%)}} .unit:hover img{animation-play-state:paused} .unit{cursor:pointer} /* =================================================================== WAREHOUSE SPECS =================================================================== */ .warehouse{padding:clamp(6rem,14vh,11rem) 0;border-top:1px solid var(--tx-line); background:linear-gradient(180deg,var(--tx-black) 0%,#0d0d0d 100%)} .warehouse .eyebrow{display:block;margin-bottom:1.4rem} .warehouse__title{font-size:clamp(2rem,5.5vw,4.4rem);max-width:16ch} .specs{margin-top:clamp(3rem,6vh,5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--tx-line);border:1px solid var(--tx-line);border-radius:14px;overflow:hidden} .spec{background:var(--tx-ink);padding:32px 24px;display:flex;flex-direction:column;gap:.5rem;min-height:200px; transition:background var(--tx-dur-base) var(--tx-ease)} .spec:hover{background:var(--tx-black-3)} .spec__n{font-family:var(--tx-display);font-weight:700;line-height:.9;font-size:clamp(2rem,3.6vw,3.4rem);color:var(--tx-off-white)} .spec__n .x{color:var(--tx-lime)} .spec__l{font-family:var(--tx-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--tx-off-white);margin-top:.2rem} .spec__d{color:var(--tx-gray);font-size:.92rem;margin-top:auto;max-width:22ch} .warehouse__closer{margin-top:2.6rem;font-family:var(--tx-display);font-weight:700;text-transform:uppercase; letter-spacing:-.01em;line-height:1.05;font-size:clamp(1.2rem,2.6vw,2rem);max-width:24ch} /* =================================================================== HERO CLAIMS + "WHAT YOU CAN DO HERE" + "WHY TRUE X" =================================================================== */ .hero__claims{font-family:var(--tx-mono);text-transform:uppercase;letter-spacing:.12em; font-size:clamp(.72rem,1.4vw,.86rem);color:var(--tx-off-white);margin-top:.9rem;opacity:0} .cando{padding:clamp(5rem,12vh,9rem) 0} .cando .eyebrow{display:block;margin-bottom:1.3rem} .cando .display{font-size:clamp(2rem,5.5vw,4.2rem);max-width:16ch} .cando__list{list-style:none;margin:clamp(2.4rem,5vh,3.6rem) 0 2.6rem;display:grid;gap:1px; background:var(--tx-line);border:1px solid var(--tx-line);border-radius:14px;overflow:hidden} .cando__list li{background:var(--tx-ink)} .cando__list a{display:flex;align-items:center;gap:1rem;padding:22px 26px;color:var(--tx-off-white); font-size:clamp(1rem,1.9vw,1.28rem);transition:background var(--tx-dur-base) var(--tx-ease), color var(--tx-dur-base) var(--tx-ease),padding-left var(--tx-dur-base) var(--tx-ease)} .cando__list a::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--tx-lime)} .cando__list a:hover{background:var(--tx-black-3);color:var(--tx-lime);padding-left:34px} .why{padding:clamp(5rem,12vh,9rem) 0;border-top:1px solid var(--tx-line)} .why .eyebrow{display:block;margin-bottom:1.3rem} .why .display{font-size:clamp(2rem,5.5vw,4.2rem);max-width:16ch} .why__body{max-width:62ch;color:var(--tx-off-white);margin-top:1.6rem;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.55} .why__points{list-style:none;margin-top:2.8rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--tx-line);border:1px solid var(--tx-line);border-radius:14px;overflow:hidden} .why__points li{background:var(--tx-ink);padding:22px 24px;font-family:var(--tx-mono);text-transform:uppercase; letter-spacing:.06em;font-size:.82rem;color:var(--tx-off-white);display:flex;align-items:center;gap:.8rem} .why__points li::before{content:"\2715";color:var(--tx-lime);font-family:var(--tx-display);font-weight:700} .cta__lead{font-family:var(--tx-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em; font-size:clamp(1.1rem,2.4vw,1.8rem);margin-bottom:.5rem} .cta__actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center} .contact-info{list-style:none;margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem} .contact-info li{font-family:var(--tx-mono);font-size:.82rem;letter-spacing:.04em;color:var(--tx-off-white)} .contact-info li span{display:block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-lime);margin-bottom:.35rem} .contact-info a{color:var(--tx-off-white)} .contact-info a:hover{color:var(--tx-lime)} .footer-addr{color:var(--tx-gray)} /* Waitlist */ .waitlist{padding:clamp(4rem,10vh,7rem) 0;border-top:1px solid var(--tx-line)} .waitlist .eyebrow{display:block;margin-bottom:1.2rem} .waitlist .display{font-size:clamp(1.8rem,5vw,3.6rem)} .waitlist__lead{max-width:52ch;color:var(--tx-off-white);margin-top:1.2rem;font-size:clamp(1rem,1.6vw,1.15rem)} .waitlist__form{margin-top:2.2rem;display:flex;gap:.8rem;flex-wrap:wrap;max-width:540px} .waitlist__form input{flex:1 1 240px;background:var(--tx-ink);border:1px solid var(--tx-line);border-radius:4px; padding:15px 16px;color:var(--tx-off-white);font-family:var(--tx-body);font-size:1rem;transition:border-color var(--tx-dur-base) var(--tx-ease)} .waitlist__form input:focus-visible{outline:2px solid var(--tx-lime);outline-offset:2px;border-color:var(--tx-lime)} .waitlist__form input::placeholder{color:var(--tx-gray)} .waitlist__msg{margin-top:1rem;font-family:var(--tx-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;min-height:1.1em;color:var(--tx-gray)} .waitlist__msg.ok{color:var(--tx-lime)} /* =================================================================== RESPONSIVE =================================================================== */ @media(max-width:860px){ .nav .links{display:none} .stats__grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1.5rem} /* mobile: horizontal swipe carousel (cards slide sideways) */ .eco__track-wrap{height:auto;overflow:visible} .eco__track{flex-wrap:nowrap;height:auto;align-items:stretch;gap:14px; padding:4px 16px 16px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .eco__track::-webkit-scrollbar{display:none} .unit{flex:0 0 84%;height:62vh;min-height:430px;scroll-snap-align:center} .hero{align-items:flex-end} .specs{grid-template-columns:repeat(2,1fr)} .spec{min-height:160px;padding:24px 18px} .spec:last-child{grid-column:1 / -1} .nav__cta{display:none} .nav-toggle{display:flex} .why__points{grid-template-columns:1fr} /* Round 2 #5: tighten post-hero spacing on mobile */ .manifesto{padding:clamp(3.5rem,9vh,5rem) 0} .manifesto .eyebrow{margin-bottom:1.4rem} .manifesto__foot{margin-top:2rem;gap:1.4rem} .eco__head{padding:clamp(2.4rem,6vh,3.6rem) 0 1.4rem} .cando{padding:clamp(3.5rem,9vh,5rem) 0} /* hero fit on small screens (no crop) */ .hero__inner{padding-bottom:6vh} .hero__sub{margin-top:1.1rem} .hero__claims{margin-top:.6rem} .hero__cta{margin-top:1.6rem;gap:.7rem} .hero__cta .btn{flex:1 1 auto;justify-content:center} .hero__scroll{display:none} } /* =================================================================== REDUCED MOTION =================================================================== */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .hero h1 .line span{transform:none} .hero .eyebrow,.hero__sub,.hero__cta{opacity:1} .reveal{opacity:1;transform:none} .manifesto__type .w{opacity:1} .hero__claims{opacity:1} .kenburns,.unit img{transform:none} .hero__sweep,.grain{display:none} } /* =================================================================== FAQ (SEO / respuestas para IA) =================================================================== */ .faq{padding:clamp(4.5rem,11vh,9rem) 0} .faq .eyebrow{display:block;margin-bottom:1.1rem} .faq h2{margin-bottom:2.6rem;font-size:clamp(2rem,5vw,3.6rem)} .faq__list{border-top:1px solid var(--tx-graphite)} .faq__item{border-bottom:1px solid var(--tx-graphite)} .faq__item summary{list-style:none;cursor:pointer;padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;gap:1.5rem; font-family:var(--tx-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em; font-size:clamp(1.05rem,2.2vw,1.5rem);color:var(--tx-off-white);transition:color var(--tx-dur-base) var(--tx-ease)} .faq__item summary::-webkit-details-marker{display:none} .faq__item summary::after{content:"+";flex:none;color:var(--tx-lime);font-family:var(--tx-body);font-weight:400;font-size:1.6em;line-height:.8;transition:transform var(--tx-dur-base) var(--tx-ease)} .faq__item[open] summary,.faq__item summary:hover{color:var(--tx-lime)} .faq__item[open] summary::after{transform:rotate(45deg)} .faq__item p{padding:0 0 1.7rem;max-width:72ch;color:var(--tx-muted);font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.65} .faq__item p a{color:var(--tx-lime);text-decoration:underline;text-underline-offset:3px}