:root { --bg: #05060A; --fg: #E8ECF5; --muted: rgba(232,236,245,0.60); --muted-40: rgba(232,236,245,0.40); --border: rgba(232,236,245,0.10); --glass: rgba(14,18,32,0.40); --glass-strong: rgba(14,18,32,0.72); --glass-heavy: rgba(14,18,32,0.55); --accent: #1B4DFF; --accent-2: #6FA8FF; --gold: #F2C879; } html { scroll-behavior: smooth; } body { margin:0; background:var(--bg); color:var(--fg); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-wrap:break-word; } *, *::before, *::after { box-sizing:border-box; } a { color:var(--accent-2); text-decoration:none; } a:hover { color:var(--fg); } :focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; } ::selection { background:var(--accent); color:var(--fg); } input::placeholder, textarea::placeholder { color:rgba(232,236,245,0.35); } h1,h2,h3,p,ul,ol,fieldset,legend,blockquote,figure { margin:0; padding:0; } ul, ol { list-style:none; } button { font:inherit; } [hidden] { display:none !important; } @keyframes xaDrift { 0% { transform:scale(1.06) translate3d(0,0,0); } 100% { transform:scale(1.14) translate3d(-1.5%,-1.5%,0); } } @keyframes xaSpinX { 0% { transform:rotateX(15deg) rotateY(0deg); } 100% { transform:rotateX(15deg) rotateY(360deg); } } @keyframes xaDepth { 0%,100% { opacity:0.30; } 50% { opacity:0.85; } } @keyframes xaScrollL { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } @keyframes xaScrollR { 0% { transform:translateX(-50%); } 100% { transform:translateX(0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } [data-reveal] { opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; transition-delay:0s !important; } .card-line { width:100% !important; transition:none !important; } } /* Ambient starfield: sits above the viewport background (painted by with the same var(--bg)) and below every bit of content, including #xa-particles. .page must stay transparent or its opaque fill would hide the layer. */ #xa-dust { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; } .page { position:relative; } .wrap { position:relative; width:min(90%,1280px); margin:0 auto; padding-inline:clamp(16px,4vw,48px); } .section { position:relative; padding:0 0 clamp(120px,14vh,200px); } .eyebrow { margin:0 0 18px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .eyebrow-lg { margin:0 0 clamp(48px,7vh,80px); } .eyebrow-md { margin:0 0 40px; } .eyebrow-sistema { margin:0 0 20px; } .h2 { margin:0 0 44px; font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(1.5rem,4vw,3.5rem); letter-spacing:-0.03em; line-height:1.05; text-transform:lowercase; } .glow { position:absolute; pointer-events:none; } .glow-purple { left:-25%; top:0; width:80%; height:70%; background:radial-gradient(circle at 40% 40%,rgba(107,75,168,0.12),transparent 65%); } .glow-red { right:-20%; bottom:-10%; width:70%; height:60%; background:radial-gradient(circle at 60% 60%,rgba(122,27,51,0.10),transparent 65%); } .glow-red-2 { right:-25%; top:-10%; width:75%; height:80%; background:radial-gradient(circle at 60% 40%,rgba(122,27,51,0.12),transparent 62%); } .glow-purple-2 { left:-20%; bottom:0; width:60%; height:60%; background:radial-gradient(circle at 40% 60%,rgba(107,75,168,0.10),transparent 65%); } /* ---------- Split button ---------- */ .split-btn { display:inline-flex; gap:1px; align-items:stretch; flex:0 0 auto; width:auto; max-width:100%; cursor:pointer; } .split-btn-label { display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0 22px; height:46px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--border); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); transition:background 0.5s cubic-bezier(0.4,0,0.2,1), color 0.5s cubic-bezier(0.4,0,0.2,1); color:var(--fg); } .split-btn-icon { position:relative; overflow:hidden; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); transition:background 0.5s cubic-bezier(0.4,0,0.2,1); color:var(--fg); } .split-btn-icon-static { width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--accent); border:1px solid var(--border); color:var(--fg); } .split-btn .arrow { position:absolute; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); } .split-btn .arrow-1 { transform:translateX(0); } .split-btn .arrow-2 { transform:translateX(-220%); } .split-btn:hover .arrow-1, .split-btn:focus-visible .arrow-1 { transform:translateX(220%); } .split-btn:hover .arrow-2, .split-btn:focus-visible .arrow-2 { transform:translateX(0); } .split-btn--glass .split-btn-label, .split-btn--glass .split-btn-icon { background:rgba(232,236,245,0.08); } .split-btn--glass:hover .split-btn-label, .split-btn--glass:focus-visible .split-btn-label, .split-btn--glass:hover .split-btn-icon, .split-btn--glass:focus-visible .split-btn-icon { background:var(--accent); } .split-btn--solid .split-btn-label, .split-btn--solid .split-btn-icon { background:var(--accent); } .split-btn--full { width:100%; } .split-btn--full .split-btn-label { flex:1 1 auto; } .split-btn--submit { padding:0; background:transparent; border:0; width:auto; } /* estado provisional: sin número de prueba configurado todavía */ .split-btn--disabled { cursor:default; opacity:0.45; pointer-events:none; } /* ---------- Nav ---------- */ .nav-bar { position:fixed; top:0; left:0; right:0; padding-top:24px; z-index:60; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease; display:flex; justify-content:center; pointer-events:none; } .nav { pointer-events:auto; display:flex; align-items:center; gap:clamp(16px,3vw,48px); padding:10px 12px 10px 22px; border-radius:999px; background:rgba(14,18,32,0.40); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); border:1px solid var(--border); width:min(92vw,1180px); justify-content:space-between; } .nav-logo { display:flex; align-items:center; color:var(--fg); } .nav-logo-text { font-family:'Sora',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.14em; } .nav-logo-x { color:var(--accent); } .nav-links { display:flex; align-items:center; gap:clamp(18px,2.6vw,40px); } .nav-link { display:block; height:14px; overflow:hidden; color:var(--muted); } .nav-link-track { display:block; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); } .nav-link-track span { display:block; height:14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; } .nav-link-track span:last-child { color:var(--fg); } .nav-link:hover .nav-link-track, .nav-link:focus-visible .nav-link-track { transform:translateY(-14px); } .burger { display:none; flex-direction:column; gap:5px; background:transparent; border:0; padding:14px; cursor:pointer; } .burger span { display:block; width:20px; height:1px; background:var(--fg); } .menu-overlay { position:fixed; inset:0; z-index:70; background:rgba(5,6,10,0.86); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); display:flex; flex-direction:column; justify-content:center; gap:8px; padding:10vw; transition:opacity 0.4s ease; opacity:0; pointer-events:none; visibility:hidden; } .menu-overlay.is-open { opacity:1; pointer-events:auto; visibility:visible; } .menu-close { position:absolute; top:36px; right:8vw; background:transparent; border:1px solid var(--border); color:var(--fg); width:44px; height:44px; border-radius:999px; cursor:pointer; font-family:'JetBrains Mono',monospace; } .menu-link { font-family:'Sora',sans-serif; font-weight:400; font-size:clamp(2rem,9vw,3.5rem); letter-spacing:-0.03em; text-transform:lowercase; color:var(--fg); } /* ---------- Hero ---------- */ .hero { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:0; padding:clamp(80px,10vh,120px) 0 28px; } .hero-bg { position:absolute; inset:0; overflow:hidden; background:var(--bg); } .hero-poster { position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 30% 20%,rgba(27,77,255,0.18),transparent 55%), radial-gradient(circle at 75% 70%,rgba(107,75,168,0.16),transparent 60%), var(--bg); background-image:url('assets/image-2.jpg'); background-size:cover; background-position:center; } .hero-video-wrap { position:absolute; inset:0; z-index:1; overflow:hidden; } .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity 0.8s ease-in-out; opacity:0; } .hero-fade { position:absolute; inset:0; } .hero-fade-a { background:linear-gradient(to top,rgba(5,6,10,0.85) 0%,rgba(5,6,10,0.50) 30%,rgba(5,6,10,0.15) 50%,transparent 70%); } .hero-fade-b { background:linear-gradient(to top,rgba(5,6,10,0.92) 0%,rgba(5,6,10,0.75) 18%,rgba(5,6,10,0.10) 45%,rgba(5,6,10,0.35) 100%); } .hero-fade-c { left:-10%; bottom:-10%; width:70%; height:60%; right:auto; top:auto; background:radial-gradient(ellipse at 30% 70%,rgba(5,6,10,0.85),transparent 70%); } .hero-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; left:-2px; top:90px; } .hero-label-wrap { position:relative; z-index:3; width:min(90%,1280px); margin:0 auto; padding-inline:clamp(16px,4vw,48px); text-align:left; } .hero-label { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .hero-bottom { position:relative; z-index:3; margin:auto auto 0; width:min(90%,1280px); padding-inline:clamp(16px,4vw,48px); display:flex; flex-wrap:wrap; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; } .hero-bottom-left { min-width:0; display:flex; flex-direction:column; gap:clamp(22px,3vh,34px); width:auto; max-width:60%; align-items:flex-start; } .hero-h1 { font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(2.5rem,4.5vw,4.5rem); letter-spacing:-0.03em; line-height:1.05; text-transform:lowercase; text-align:left; white-space:nowrap; overflow-wrap:break-word; } .hero-cta-row { display:flex; flex-wrap:wrap; flex-direction:row; gap:8px; width:auto; padding-inline:0; } .hero-p { width:auto; max-width:380px; align-self:flex-end; text-align:left; padding-inline:0; font-size:clamp(0.9rem,1.4vw,1.2rem); line-height:1.65; color:var(--muted); text-wrap:pretty; } .hero-p strong { color:var(--fg); font-weight:600; } .hero-scroll-bar { position:relative; z-index:3; width:min(90%,1280px); margin:0 auto; padding-inline:clamp(16px,4vw,48px); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:24px; } .hero-scroll-bar span { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } /* ---------- Problema ---------- */ .problema { padding:clamp(120px,14vh,200px) 0; overflow:hidden; } .words { margin:0; max-width:20ch; perspective:800px; font-family:'Sora',sans-serif; font-weight:300; font-size:clamp(1.3rem,5vw,3rem); line-height:1.25; letter-spacing:-0.02em; transform-origin:0% 50%; } .scrub-stack { display:flex; flex-direction:column; align-items:center; gap:clamp(60px,8vh,120px); margin-top:clamp(80px,12vh,160px); } .scrub-line { max-width:600px; text-align:center; font-size:clamp(1.1rem,2vw,1.5rem); line-height:1.55; color:var(--muted); text-wrap:pretty; } .stat-row { display:flex; flex-wrap:wrap; flex-direction:row; gap:clamp(32px,8vw,120px); margin-top:clamp(64px,8vh,110px); } .stat { flex:0 1 auto; } .stat-label { margin:0 0 8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .stat-value { font-family:'Sora',sans-serif; font-size:clamp(1.25rem,2.4vw,1.5rem); font-weight:400; } /* ---------- Solucion cards ---------- */ .card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:20px; align-items:stretch; } .card { min-width:0; position:relative; padding:clamp(28px,3vw,44px); background:var(--glass); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); border:1px solid var(--border); } .card-line { position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--accent); transition:width 1.1s cubic-bezier(0.16,1,0.3,1) 0.15s; } .card-num { margin:0 0 28px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; color:var(--muted); } .card-title { margin:0 0 14px; font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(1.15rem,2vw,1.35rem); letter-spacing:-0.02em; } .card-body { font-size:clamp(0.9rem,1.4vw,1.05rem); line-height:1.7; color:var(--muted); text-wrap:pretty; } /* ---------- Recorrido ---------- */ .h2-recorrido { margin-bottom:clamp(56px,8vh,96px); } .timeline { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; } .timeline-line { position:absolute; left:0; top:3px; width:100%; height:1px; background:var(--border); } .timeline-fill { position:absolute; left:0; top:0; width:0%; height:100%; background:var(--accent); opacity:0.55; } .timeline-item { position:relative; display:flex; flex-direction:column; gap:14px; padding-top:34px; padding-left:0; } .timeline-dot { position:absolute; left:0; top:0; width:6px; height:6px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 4px rgba(27,77,255,0.18); transition:width 0.4s ease, height 0.4s ease; } .timeline-num { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; color:var(--muted); } .timeline-title { font-family:'Sora',sans-serif; font-weight:600; font-size:clamp(1.05rem,1.8vw,1.15rem); letter-spacing:-0.01em; } .timeline-body { font-size:clamp(0.9rem,1.4vw,1rem); line-height:1.6; color:var(--muted); } /* ---------- Sistema ---------- */ .sistema-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(40px,6vw,96px); align-items:start; } .sistema-sticky { min-width:0; position:sticky; top:140px; } .sphere-wrap { width:100%; max-width:350px; aspect-ratio:1; position:relative; perspective:900px; margin:0; } .sphere { position:absolute; inset:0; transform-style:preserve-3d; animation:xaSpinX 20s linear infinite; } .sphere-ring { position:absolute; inset:0; transform-style:preserve-3d; } .sphere-ring-a { transform:rotateZ(45deg); } .sphere-ring-b { transform:rotateZ(-45deg); } .sphere-ring span { position:absolute; left:4%; right:4%; top:50%; height:4px; border-radius:3px; background:rgba(255,255,255,0.42); box-shadow:0 0 12px rgba(27,77,255,0.35); animation:xaDepth 20s linear infinite; } .sphere-glow { position:absolute; inset:0; background:radial-gradient(circle,rgba(27,77,255,0.18),transparent 62%); } .sistema-aside { margin:-28px 0 44px; } .sistema-aside a { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); transition:color 0.3s ease; } .sistema-aside a:hover { color:var(--fg); } .sistema-list { min-width:0; } .sistema-item { display:flex; gap:clamp(20px,4vw,56px); padding:clamp(24px,3vh,36px) 0; border-bottom:1px solid var(--border); } .sistema-item-num { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; color:var(--muted); padding-top:6px; } .sistema-item-title { margin:0 0 8px; font-family:'Sora',sans-serif; font-weight:600; font-size:clamp(1.05rem,1.8vw,1.15rem); letter-spacing:-0.01em; } .sistema-item-body { font-size:clamp(0.9rem,1.4vw,1.05rem); line-height:1.6; color:var(--muted); } /* ---------- Numeros ---------- */ .numbers-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(32px,5vw,64px); } .number { display:flex; flex-direction:column; gap:14px; min-width:0; } .number-value { font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(3rem,8vw,6rem); line-height:0.95; letter-spacing:-0.03em; color:var(--gold); opacity:0; transition:opacity 0.8s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1); display:block; } .number-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; line-height:1.7; color:var(--muted); } /* ---------- Demo ---------- */ .demo-panel { padding:clamp(28px,4vw,64px); background:var(--glass); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); border:1px solid var(--border); } .demo-panel > .h2 { margin-bottom:40px; } .demo-embed { position:relative; aspect-ratio:16/9; width:100%; border:1px solid var(--border); background:linear-gradient(135deg,rgba(27,77,255,0.10),rgba(14,18,32,0.6)); display:flex; align-items:center; justify-content:center; overflow:hidden; } .demo-embed-pattern { position:absolute; inset:0; background-image:repeating-linear-gradient(135deg,rgba(232,236,245,0.045) 0 1px,transparent 1px 9px); } .demo-embed-inner { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; } .demo-play { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:999px; border:1px solid rgba(232,236,245,0.20); background:rgba(5,6,10,0.4); } .demo-play span { display:block; width:0; height:0; border-left:12px solid var(--fg); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; } .demo-caption { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .demo-footer { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-end; margin-top:40px; } .demo-copy-wrap { max-width:520px; display:flex; flex-direction:column; gap:10px; } .demo-copy { font-size:clamp(0.9rem,1.4vw,1.1rem); line-height:1.7; color:var(--muted); text-wrap:pretty; } .demo-pending { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); } /* ---------- Testimonios ---------- */ .testimonios { padding:0 0 clamp(24px,3vh,48px); overflow:hidden; } .quotes { position:relative; display:flex; flex-direction:column; gap:24px; overflow:hidden; padding:4px 0 20px; cursor:grab; } .quotes-row { display:flex; gap:24px; width:max-content; animation-duration:60s; animation-timing-function:linear; animation-iteration-count:infinite; } .quotes-row-l { animation-name:xaScrollL; } .quotes-row-r { animation-name:xaScrollR; } .quotes.is-paused .quotes-row { animation-play-state:paused; } .quote { flex:0 0 400px; min-width:400px; padding:clamp(24px,3vw,40px); background:var(--glass-strong); border:1px solid var(--border); display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:260px; contain:layout style paint; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease; } .quote:hover { transform:scale(1.03); border-color:rgba(255,255,255,0.2); } .quote p { font-family:'Sora',sans-serif; font-weight:300; font-size:clamp(1.05rem,1.9vw,1.5rem); line-height:1.4; letter-spacing:-0.02em; text-wrap:pretty; } .quote footer { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } /* ---------- Planes ---------- */ .planes { padding:clamp(72px,9vh,120px) 0 clamp(120px,14vh,200px); overflow:hidden; } .planes-bg { position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(27,77,255,0.10),transparent 55%), radial-gradient(circle at 70% 70%,rgba(107,75,168,0.10),transparent 55%), var(--bg); background-image:url('assets/image-2.jpg'); background-size:cover; background-position:center; } .planes-veil { position:absolute; inset:0; background:rgba(5,6,10,0.85); } .h2-planes { margin-bottom:clamp(48px,7vh,80px); } .plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; align-items:stretch; } .plan { min-width:0; padding:clamp(28px,3vw,40px); background:var(--glass); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); border:1px solid var(--border); display:flex; flex-direction:column; gap:24px; } .plan-featured { padding:clamp(32px,3.4vw,48px); background:var(--glass-heavy); border:1px solid var(--accent); box-shadow:0 40px 120px -40px rgba(27,77,255,0.55); margin-block:0; } .plan-featured-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .plan-head-col { display:flex; flex-direction:column; gap:6px; } .plan-name { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .plan-sub { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted-40); } .plan-badge { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--fg); background:var(--accent); padding:5px 10px; } /* --- billing toggle --- */ .billing-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; margin:0 0 clamp(32px,5vh,48px); } .billing-toggle { display:inline-flex; padding:4px; gap:4px; border-radius:999px; background:rgba(232,236,245,0.06); border:1px solid var(--border); } .billing-opt { cursor:pointer; padding:10px 22px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; transition:background 0.3s ease, color 0.3s ease; } .billing-opt:hover { color:var(--fg); } .billing-opt.is-active { background:var(--accent); color:var(--fg); } .billing-badge { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(242,200,121,0.45); border-radius:999px; padding:6px 12px; } /* --- price block --- */ .plan-pricing { display:flex; flex-direction:column; gap:8px; } .plan-tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); } .plan-price-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; } .plan-price-was { font-family:'Inter',sans-serif; font-size:clamp(0.95rem,1.6vw,1.1rem); color:var(--muted); text-decoration:line-through; } .plan-price-now { font-family:'Sora',sans-serif; font-weight:400; font-size:clamp(1.6rem,3.2vw,2rem); letter-spacing:-0.02em; color:var(--gold); } .plan-price-now--lg { font-size:clamp(1.8rem,3.6vw,2.3rem); } .plan-price-now--quote { font-size:clamp(1.5rem,2.9vw,1.85rem); } .plan-price-per { font-size:0.5em; letter-spacing:0; color:var(--gold); } .plan-price-note { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .plan-equiv { font-size:clamp(0.82rem,1.2vw,0.92rem); color:var(--muted); } .plan-save { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); background:rgba(242,200,121,0.10); border:1px solid rgba(242,200,121,0.35); border-radius:999px; padding:4px 10px; } .plan-setup { font-size:clamp(0.8rem,1.15vw,0.88rem); line-height:1.5; color:var(--muted); } /* Only one billing view is rendered at a time. Re-showing a row restarts the keyframe, so the swap animates without any JS timing. */ .planes[data-billing="mensual"] .plan-price-row[data-billing-view="anual"], .planes[data-billing="anual"] .plan-price-row[data-billing-view="mensual"] { display:none; } /* The savings note only exists in the yearly view, so it keeps its space in the monthly one: otherwise stacked cards on mobile grow when you flip the toggle. */ .planes[data-billing="mensual"] .plan-price-note { visibility:hidden; } @keyframes xaPriceIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } [data-billing-view] { animation:xaPriceIn 0.32s cubic-bezier(0.16,1,0.3,1) both; } @media (prefers-reduced-motion: reduce) { [data-billing-view] { animation:none; } .billing-opt { transition:none; } } /* --- premium add-ons (GALAXIA) --- */ .plan-premium { padding:20px; border:1px solid rgba(27,77,255,0.45); background:rgba(27,77,255,0.06); display:flex; flex-direction:column; gap:8px; } .plan-premium-title { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); } .plan-premium-note { font-size:clamp(0.78rem,1.1vw,0.85rem); line-height:1.5; color:var(--muted); } .plan-premium-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; } /* name may wrap, but the price stays on the first line and right-aligned so both rows read the same way regardless of name length */ .plan-premium-list li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:clamp(0.85rem,1.25vw,0.95rem); line-height:1.5; color:var(--fg); } .plan-premium-name { min-width:0; } .plan-premium-price { flex:0 0 auto; white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); } .plan-list { display:flex; flex-direction:column; gap:12px; font-size:clamp(0.88rem,1.3vw,1rem); line-height:1.6; color:var(--muted); flex:1; } .plans-note { margin:40px 0 0; max-width:600px; font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.9; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); } /* ---------- Contacto ---------- */ .contacto { padding:clamp(120px,14vh,200px) 0 clamp(80px,10vh,120px); } .contact-panel { padding:clamp(28px,4vw,72px); background:var(--glass); backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); border:1px solid var(--border); } .h2-contact { margin-bottom:44px; max-width:22ch; } .contact-form { display:flex; flex-direction:column; gap:20px; max-width:760px; } .form-row { display:flex; flex-wrap:wrap; gap:20px; } .form-field { display:flex; flex-direction:column; gap:8px; } .form-row .form-field { flex:1 1 240px; } .form-field label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .form-field input { width:100%; padding:14px 16px; background:rgba(232,236,245,0.06); border:1px solid var(--border); color:var(--fg); font-family:'Inter',sans-serif; font-size:clamp(0.9rem,1.4vw,1rem); } .form-channels { border:0; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:14px; } .form-channels legend { padding:0; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .chip-row { display:flex; flex-wrap:wrap; gap:10px; } .chip { cursor:pointer; padding:10px 18px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; transition:all 0.3s ease; background:rgba(232,236,245,0.06); border:1px solid var(--border); color:var(--fg); } .chip[aria-pressed="true"] { background:rgba(27,77,255,0.22); border-color:var(--accent); } .form-submit-row { display:flex; justify-content:flex-end; margin-top:12px; } .success-panel { display:flex; flex-direction:column; gap:16px; max-width:620px; padding:36px; border:1px solid rgba(27,77,255,0.5); background:rgba(27,77,255,0.08); } .success-panel[hidden] { display:none; } .success-eyebrow { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent-2); } .success-title { font-family:'Sora',sans-serif; font-weight:400; font-size:clamp(1.2rem,2.6vw,1.5rem); letter-spacing:-0.02em; text-transform:lowercase; } .success-body { font-size:clamp(0.9rem,1.4vw,1.05rem); line-height:1.7; color:var(--muted); } .contact-direct { display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); align-items:center; margin-top:56px; padding-top:32px; border-top:1px solid var(--border); } .contact-direct-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .contact-direct a { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; } /* ---------- Footer ---------- */ .site-footer { width:min(90%,1280px); margin:0 auto; padding-inline:clamp(16px,4vw,48px); padding-bottom:40px; } .footer-grid { display:flex; flex-wrap:wrap; flex-direction:row; gap:clamp(40px,6vw,120px); padding-bottom:64px; } .footer-brand { flex:1 1 220px; } .footer-logo { margin:0 0 16px; font-family:'Sora',sans-serif; font-weight:600; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:0.06em; } .footer-tagline { max-width:26ch; font-size:clamp(0.88rem,1.3vw,1rem); line-height:1.7; color:var(--muted); } .footer-col { flex:0 1 auto; display:flex; flex-direction:column; gap:14px; } .footer-col-title { margin:0 0 6px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .footer-col a { font-size:clamp(0.88rem,1.3vw,0.95rem); color:var(--muted); transition:color 0.3s ease; } .footer-col a:hover { color:var(--fg); } .footer-bottom { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border); } .footer-bottom span { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .footer-legal { display:flex; gap:14px; } .footer-legal a { color:var(--muted); transition:color 0.3s ease; } .footer-legal a:hover { color:var(--fg); } /* ---------- Phone country selector (intl-tel-input v29 dark overrides) ---------- Scoped to the contact form's tel field; class names are v29's. */ .form-field .iti { width:100%; display:block; } .form-field .iti__tel-input { width:100%; } .iti__country-container { padding:1px; } .iti__selected-country, .iti__selected-country-primary { background:transparent; border-radius:0; } .iti__selected-country:hover, .iti__selected-country:focus-visible, .iti--inline-country-selector .iti__selected-country-primary:hover { background:rgba(232,236,245,0.10); } .iti__selected-dial-code { font-family:'JetBrains Mono',monospace; font-size:0.9em; color:var(--fg); } .iti__arrow { border-top-color:var(--muted); } .iti__arrow--up { border-bottom-color:var(--muted); } /* dropdown panel */ .iti__country-selector, .iti__dropdown-content { background:#0E1220; border:1px solid var(--border); border-radius:0; color:var(--fg); box-shadow:0 24px 60px -20px rgba(0,0,0,0.75); } .iti__search-input-wrapper { background:#0E1220; border-bottom:1px solid var(--border); } .iti__search-input { background:rgba(232,236,245,0.06); border:1px solid var(--border); color:var(--fg); font-family:'Inter',sans-serif; padding:12px 14px; width:100%; } .iti__search-input::placeholder { color:rgba(232,236,245,0.35); } .iti__search-icon-svg, .iti__search-clear-svg { fill:var(--muted); } .iti__country-list { background:#0E1220; border:0; } .iti__country { color:var(--fg); padding:11px 14px; } .iti__country-name { color:var(--fg); } .iti__dial-code { color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:0.9em; } .iti__country.iti__highlight, .iti__country[aria-selected="true"] { background:rgba(27,77,255,0.22); } .iti__no-results { color:var(--muted); padding:14px; } /* comfortable touch targets on phones */ @media (max-width:767.98px) { .iti__country { padding:14px; } .iti__search-input { font-size:16px; } /* keeps iOS from zooming on focus */ } /* ---------- Scroll reveal ---------- Un solo motor: opacity + transform, 0.7s ease-out, se dispara una vez. La variante la elige cada seccion con data-reveal="up|left|right|scale|title". */ [data-reveal] { opacity:0; transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } [data-reveal="up"] { transform:translateY(26px); } [data-reveal="left"] { transform:translateX(-40px); } [data-reveal="right"] { transform:translateX(40px); } [data-reveal="scale"] { transform:scale(0.96); } [data-reveal="title"] { transform:translateY(40px); clip-path:inset(100% 0 -0.2em 0); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1), clip-path 0.8s cubic-bezier(0.16,1,0.3,1); } [data-reveal].is-in { opacity:1; transform:none; } [data-reveal="title"].is-in { clip-path:inset(0 0 -0.2em 0); } .card.is-in .card-line { width:100%; } /* el marquee de testimonios usa transform, asi que el reveal lateral va en un wrapper aparte */ .quotes-reveal { min-width:0; } /* ---------- Legal pages (/privacidad, /terminos) ---------- No canvases here on purpose: these pages are for reading. */ body.legal { background:var(--bg); } body.legal::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 20% 0%,rgba(27,77,255,0.07),transparent 55%), radial-gradient(ellipse at 85% 100%,rgba(107,75,168,0.06),transparent 60%); } .legal-wrap { width:min(100%,720px); margin:0 auto; padding:clamp(28px,6vh,64px) clamp(20px,5vw,32px) clamp(64px,10vh,110px); } .legal-back { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:clamp(32px,6vh,56px); transition:color 0.3s ease; } .legal-back:hover { color:var(--fg); } .legal-title { font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(1.6rem,4.2vw,2.6rem); line-height:1.15; letter-spacing:-0.03em; margin:0 0 14px; color:var(--fg); } /* scoped with .legal-wrap so it outranks the generic `.legal-wrap p` rule below */ .legal-wrap .legal-updated { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin:0 0 clamp(28px,5vh,44px); } .legal-wrap h2 { font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:-0.02em; line-height:1.3; margin:clamp(36px,6vh,52px) 0 12px; color:var(--fg); } .legal-wrap h3 { font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(1rem,1.9vw,1.12rem); letter-spacing:-0.01em; line-height:1.4; margin:26px 0 10px; color:var(--fg); } .legal-wrap p { font-family:'Inter',sans-serif; font-size:clamp(0.92rem,1.35vw,1rem); line-height:1.75; color:var(--fg); margin:0 0 16px; text-wrap:pretty; } .legal-wrap ul { display:flex; flex-direction:column; gap:10px; margin:0 0 18px; padding-left:22px; list-style:disc; } .legal-wrap li { font-family:'Inter',sans-serif; font-size:clamp(0.92rem,1.35vw,1rem); line-height:1.7; color:var(--fg); text-wrap:pretty; } .legal-wrap li::marker { color:var(--accent-2); } .legal-wrap strong { color:var(--fg); font-weight:600; } .legal-wrap a { color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; } .legal-wrap a:hover { color:var(--fg); } .legal-wrap .legal-intro { color:var(--muted); } .legal-callout { border-left:2px solid rgba(27,77,255,0.55); padding-left:16px; } .legal-foot { width:min(100%,720px); margin:0 auto; padding:0 clamp(20px,5vw,32px) clamp(48px,8vh,80px); border-top:1px solid var(--border); padding-top:24px; } /* ---------- Text-page header with particles ---------- The canvas is confined to the header box; the body below stays flat. */ .page-head { position:relative; padding-bottom:clamp(24px,4vh,40px); } .page-head > *:not(#xa-head-dust) { position:relative; z-index:1; } /* full-bleed out of the reading column so it reads as a header band, not a box */ #xa-head-dust { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; z-index:0; pointer-events:none; } /* ---------- Process pages (/proceso/*) ---------- */ body.proceso { background:var(--bg); } body.proceso::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 20% 0%,rgba(27,77,255,0.08),transparent 55%), radial-gradient(ellipse at 85% 100%,rgba(107,75,168,0.06),transparent 60%); } .proc-wrap { width:min(100%,760px); margin:0 auto; padding:clamp(28px,6vh,64px) clamp(20px,5vw,32px) clamp(40px,6vh,64px); } .proc-back { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:clamp(32px,6vh,56px); transition:color 0.3s ease; } .proc-back:hover { color:var(--fg); } .proc-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; } .proc-title { font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(1.7rem,4.6vw,2.9rem); line-height:1.1; letter-spacing:-0.03em; text-transform:lowercase; color:var(--fg); margin:0 0 18px; } .proc-sub { font-family:'Inter',sans-serif; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.6; color:var(--muted); margin:0 0 clamp(28px,5vh,40px); text-wrap:pretty; } .proc-intro { font-family:'Inter',sans-serif; font-size:clamp(0.95rem,1.4vw,1.05rem); line-height:1.75; color:var(--fg); margin:0 0 clamp(36px,6vh,56px); text-wrap:pretty; } .proc-steps { display:flex; flex-direction:column; gap:clamp(26px,4.5vh,38px); margin:0 0 clamp(36px,6vh,52px); } .proc-step { display:flex; gap:clamp(16px,3vw,26px); align-items:flex-start; } .proc-step-num { flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(242,200,121,0.35); background:rgba(242,200,121,0.08); font-family:'Sora',sans-serif; font-size:1rem; font-weight:500; color:var(--gold); } .proc-step-body { min-width:0; } .proc-step-title { font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(1.05rem,2vw,1.3rem); letter-spacing:-0.02em; line-height:1.35; color:var(--fg); margin:8px 0 10px; } .proc-step-text { font-family:'Inter',sans-serif; font-size:clamp(0.92rem,1.35vw,1rem); line-height:1.75; color:var(--muted); margin:0 0 12px; text-wrap:pretty; } .proc-step-list { display:flex; flex-direction:column; gap:10px; margin:0 0 12px; padding-left:20px; list-style:disc; } .proc-step-list li { font-family:'Inter',sans-serif; font-size:clamp(0.92rem,1.35vw,1rem); line-height:1.7; color:var(--muted); } .proc-step-list li::marker { color:var(--accent-2); } .proc-step-text strong, .proc-step-list strong { color:var(--fg); font-weight:600; } .proc-note { display:block; padding:18px 20px; margin:0 0 clamp(30px,5vh,44px); border:1px solid rgba(242,200,121,0.40); background:rgba(242,200,121,0.07); border-radius:10px; font-family:'Inter',sans-serif; font-size:clamp(0.95rem,1.4vw,1.05rem); line-height:1.6; color:var(--gold); } .proc-highlight { padding:clamp(20px,3vw,26px); margin:0 0 clamp(36px,6vh,52px); border-radius:12px; border:1px solid rgba(27,77,255,0.45); background:rgba(27,77,255,0.07); display:flex; flex-direction:column; gap:10px; } .proc-highlight-title { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); } .proc-highlight-text { font-family:'Inter',sans-serif; font-size:clamp(0.95rem,1.4vw,1.05rem); line-height:1.75; color:var(--fg); text-wrap:pretty; } .proc-close { border-left:2px solid var(--accent); padding-left:18px; margin:0 0 clamp(40px,6vh,56px); font-family:'Inter',sans-serif; font-size:clamp(0.98rem,1.5vw,1.1rem); line-height:1.7; color:var(--fg); text-wrap:pretty; } .proc-close strong { font-weight:600; } .proc-cta { display:flex; justify-content:flex-start; margin:0 0 clamp(48px,8vh,72px); } .proc-more { border-top:1px solid var(--border); padding-top:26px; } .proc-more-title { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; } .proc-more-links { display:flex; flex-wrap:wrap; gap:12px 22px; } .proc-more-links a { font-family:'Inter',sans-serif; font-size:clamp(0.88rem,1.3vw,0.95rem); color:var(--muted); text-decoration:none; transition:color 0.3s ease; } .proc-more-links a:hover { color:var(--fg); } .proc-more-links a[aria-current="page"] { color:var(--gold); } .proc-foot { width:min(100%,760px); margin:0 auto; padding:0 clamp(20px,5vw,32px) clamp(48px,8vh,80px); } @media (max-width:767.98px) { .proc-step { gap:14px; } .proc-step-num { width:38px; height:38px; font-size:0.9rem; } .proc-cta .split-btn { width:100%; } .proc-cta .split-btn-label { flex:1 1 auto; } } /* ---------- Cookie consent banner ---------- z-index 65: above the nav (60) but under the mobile menu overlay (70). */ .cookie-banner { position:fixed; left:0; right:0; bottom:0; z-index:65; display:flex; justify-content:center; padding:clamp(12px,2vw,20px); pointer-events:none; } .cookie-card { pointer-events:auto; width:min(100%,760px); display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.5vw,24px); padding:clamp(18px,2.4vw,22px) clamp(18px,2.6vw,24px); background:#0E1220; border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 70px -20px rgba(0,0,0,0.80); opacity:0; transform:translateY(16px); transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1); } .cookie-banner.is-open .cookie-card { opacity:1; transform:none; } .cookie-text { flex:1 1 320px; min-width:0; font-size:clamp(0.85rem,1.2vw,0.95rem); line-height:1.6; color:var(--muted); text-wrap:pretty; } .cookie-link { color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; } .cookie-link:hover { color:var(--fg); } .cookie-actions { display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; } .cookie-btn { cursor:pointer; padding:11px 20px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg); transition:background 0.3s ease, border-color 0.3s ease; } .cookie-btn--solid { background:var(--accent); border:1px solid var(--accent); } .cookie-btn--solid:hover { background:#1740d6; border-color:#1740d6; } .cookie-btn--ghost { background:rgba(232,236,245,0.06); border:1px solid var(--border); } .cookie-btn--ghost:hover { background:rgba(232,236,245,0.12); } .footer-legal-btn { background:transparent; border:0; padding:0; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); transition:color 0.3s ease; } .footer-legal-btn:hover { color:var(--fg); } @media (prefers-reduced-motion: reduce) { .cookie-card { transition:none; } } @media (max-width:767.98px) { .cookie-card { flex-direction:column; align-items:stretch; } /* the 320px basis is a width hint for the row layout; in a column it would become a height and blow the card up, so it is reset here */ .cookie-text { flex:0 1 auto; } .cookie-actions { width:100%; } .cookie-btn { flex:1 1 0; } } /* ---------- data-chars ---------- */ [data-chars] span { display:inline-block; } /* ================= Responsive: narrow < 1024px ================= */ @media (max-width:1023.98px) { .nav-links, .nav-cta { display:none; } .burger { display:flex; } .hero { padding:max(300px,32svh) 0 28px; } .hero-bottom { flex-direction:column; align-items:flex-start; gap:40px; } .hero-bottom-left { max-width:100%; width:100%; } .hero-h1 { font-size:clamp(2rem,5vw,3.5rem); white-space:normal; } .hero-p { max-width:100%; width:100%; align-self:auto; } .timeline { grid-template-columns:1fr; gap:40px; } .timeline-line { left:0; top:0; width:1px; height:100%; } .timeline-fill { width:100%; height:0%; } .timeline-item { padding-top:0; padding-left:28px; } .timeline-dot { left:-3px; top:6px; } .sistema-grid { grid-template-columns:1fr; } .sistema-sticky { position:static; } .sphere-wrap { max-width:350px; } } /* ================= Responsive: mobile < 768px ================= */ @media (max-width:767.98px) { .hero { padding:max(280px,34svh) 0 28px; gap:24px; } .hero-bottom { align-items:center; gap:24px; } .hero-bottom-left { align-items:center; } .hero-label-wrap, .hero-bottom, .hero-scroll-bar { text-align:center; } .hero-h1 { font-size:clamp(1.8rem,7vw,2.8rem); text-align:center; } .hero-cta-row { flex-direction:column; width:100%; padding-inline:16px; } .hero-cta-row .split-btn { width:100%; } .hero-cta-row .split-btn-label { flex:1 1 auto; } .hero-p { text-align:center; padding-inline:16px; } .stat-row { flex-direction:column; gap:24px; } .footer-grid { flex-direction:column; gap:32px; } .sphere-wrap { max-width:200px; margin:0 auto; } .quote { flex-basis:300px; min-width:300px; } }