/* Nexora — bold color blocks, condensed display type, scroll-driven hero */
:root{--orange:#e8571c;--ember:#c9440f;--yellow:#f6b42c;--pink:#e3197c;--ink:#1c0d07;--cream:#fff4e3;--display:'Anton',Impact,'Arial Narrow',sans-serif;--head:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head)}
body{margin:0;background:var(--ink);color:var(--ink);font:400 15px/1.6 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:.9;margin:0}
em{font-style:normal}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;display:flex;justify-content:space-between;gap:20px}

/* Header */
header{position:sticky;top:0;z-index:20;height:var(--head);padding:0 max(4%,calc((100vw - 1320px)/2));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:var(--ink);color:var(--cream)}
/* Equal side columns keep the nav on the page's true centre, whatever the logo's width */
header .contact{grid-column:3;justify-self:end}
.brand{display:flex;align-items:center}
.brand img{height:40px;width:auto;display:block}
nav{display:flex;gap:4px;padding:4px;border:1px solid #fff4e326;border-radius:99px}
nav a{color:#fff4e3a6;padding:9px 18px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.04em;transition:background .3s,color .3s}
nav a:hover{background:var(--yellow);color:var(--ink)}
.contact{border:0;background:var(--orange);color:var(--cream);padding:11px 20px;border-radius:99px;font-size:12px;font-weight:600;transition:transform .25s,background .25s}
.contact:hover{background:var(--pink);transform:translateY(-2px)}
.contact span{margin-left:8px}

/* Websites hero — sticky stage, motion.js drives --progress 0→1 */
.hero{position:relative;height:220vh;background:var(--orange);color:var(--cream);--progress:0}
.hero-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));min-height:560px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:28px 4% 0;isolation:isolate}
.hero-stage:before{content:'NEXORA NEXORA NEXORA';position:absolute;z-index:-1;top:50%;left:0;white-space:nowrap;font:min(42vw,560px)/.8 var(--display);color:var(--ember);transform:translate(calc(-8% - var(--progress) * 30%),-42%)}
.hero .eyebrow{width:100%;max-width:1320px;color:#fff4e3cc}
.availability{display:flex;align-items:center;gap:8px}
.availability i,.soon i{width:7px;height:7px;border-radius:50%;background:var(--yellow);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.3}}
.headline{text-align:center;margin-top:3vh}
/* transform on h1, not .headline, so .heroaside stays positioned against the stage */
.hero h1{font-size:clamp(64px,10.5vw,170px);line-height:.86;transform:scale(calc(1 + var(--progress) * .25));opacity:calc(1 - var(--progress) * 1.4)}
.hero h1 em{color:var(--yellow)}
.heroaside{position:absolute;left:max(4%,calc((100vw - 1320px)/2));right:max(4%,calc((100vw - 1320px)/2));bottom:28px;display:flex;justify-content:space-between;align-items:end;gap:20px;z-index:2}
.heroaside p{margin:0;font-size:13px;line-height:1.6;color:#fff4e3d9;max-width:240px}
.textlink{background:var(--yellow);color:var(--ink);padding:13px 22px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:transform .25s,background .25s}
.textlink:hover{background:var(--cream);transform:translateY(-2px)}
.textlink span{margin-left:8px}
.hero figure{margin:-5vw 0 0;width:min(620px,58vw);aspect-ratio:4/3;flex:none;border-radius:14px;overflow:hidden;box-shadow:0 50px 80px -20px #4a160080,0 0 0 8px var(--ink);transform:perspective(1400px) rotateX(calc(18deg - var(--progress) * 18deg)) rotateY(calc(-28deg + var(--progress) * 28deg)) rotateZ(calc(-7deg + var(--progress) * 7deg)) translateY(calc(var(--progress) * -16vh)) scale(calc(.9 + var(--progress) * .25))}
.hero figure img{width:100%;height:100%;object-fit:cover;display:block}
.hero figcaption,.imagefoot{display:none}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:600;letter-spacing:.2em;color:#fff4e3b3;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:calc(1 - var(--progress) * 3)}
.scroll-cue span{width:1px;height:30px;background:currentColor}

/* Story — dark block */
.story{background:var(--ink);color:var(--cream);padding:130px max(5%,calc((100vw - 1200px)/2))}
.story>.eyebrow{color:var(--orange);margin-bottom:40px}
.story>div:last-child{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end}
.story h2{font-size:clamp(58px,8vw,128px);color:var(--yellow)}
.story h2 em{color:var(--orange)}
.storycopy{display:flex;gap:22px}
.asterisk{font-size:56px;line-height:1;color:var(--pink)}
.storycopy p{margin:0 0 18px;color:#fff4e3bf;font-size:15px}
.storycopy small{font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--yellow)}

/* Experience (built by motion.js) — pink block */
.experience{background:var(--pink);color:var(--cream);padding:120px max(5%,calc((100vw - 1200px)/2))}
.experience-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:56px}
.experience .eyebrow{margin-bottom:22px;color:#fff4e3cc}
.experience h2{font-size:clamp(52px,7vw,110px)}
.experience h2 em{color:var(--ink)}
.experience-top>p{margin:0;font-size:14px;max-width:260px;color:#fff4e3d9}
.demo-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;align-items:center}
.demo-controls{display:flex;flex-direction:column}
.demo-choice{border:0;border-top:1px solid #fff4e340;background:none;text-align:left;padding:22px 0;display:flex;gap:18px;align-items:start;color:#fff4e399;transition:color .3s}
.demo-choice>span{font-size:11px;font-weight:700;padding-top:6px}
.demo-choice strong{display:block;font:400 34px/1 var(--display);text-transform:uppercase}
.demo-choice small{display:block;margin-top:8px;font-size:13px;line-height:1.55;max-width:280px}
.demo-choice[aria-pressed=true]{color:var(--cream)}
.demo-choice[aria-pressed=true]>span{color:var(--yellow)}
.demo-screen{background:var(--cream);color:var(--ink);border-radius:16px;overflow:hidden;min-height:370px;box-shadow:0 40px 70px -25px #5a00288c,0 0 0 6px var(--ink)}
.demo-bar{height:36px;background:var(--ink);display:flex;align-items:center;gap:6px;padding:0 14px}
.demo-bar i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.demo-bar i:nth-child(2){background:var(--yellow)}.demo-bar i:nth-child(3){background:var(--pink)}
.demo-bar span{margin:auto;font-size:10px;color:#fff4e399}
.demo-content{padding:30px;animation:demoin .45s ease}
@keyframes demoin{from{opacity:0;transform:translateY(12px)}}
.demo-brand{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--orange)}
.demo-content h3{font-size:40px;margin:20px 0 12px}
.demo-content p{font-size:13px;color:#1c0d07b3;margin:0}
.demo-visual{height:96px;margin-top:22px;border-radius:10px;background:var(--orange);display:flex;justify-content:center;align-items:center;gap:12px}
.demo-visual span{width:46px;height:46px;border-radius:50%;background:var(--yellow)}
.demo-visual span:nth-child(2){background:var(--pink);border-radius:8px;transform:rotate(15deg)}
.demo-visual span:nth-child(3){background:var(--cream)}
.demo-row{display:flex;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid #1c0d071f;font-size:13px}
.demo-row b{color:var(--orange);font-weight:600}
.demo-tag{font-size:10px;font-weight:600;background:var(--yellow);padding:4px 10px;border-radius:99px}
.demo-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:22px 0 8px}
.demo-days span{border:1px solid #1c0d0726;border-radius:8px;padding:10px 2px;text-align:center;font-size:11px;line-height:1.4}
.demo-days span.chosen{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.demo-disclaimer{font-size:9px;font-weight:600;letter-spacing:.15em;text-align:right;margin-top:16px;color:#fff4e3b3}

/* Plans — yellow block */
.plans{background:var(--yellow);padding:120px max(5%,calc((100vw - 1200px)/2)) 90px}
.plans>.eyebrow{margin-bottom:22px}
.plansheading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:56px}
.plansheading h2{font-size:clamp(64px,9vw,150px)}
.plansheading h2 em{color:var(--orange)}
.plansheading p{margin:0;font-size:14px;max-width:300px}
.plangrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{display:flex;flex-direction:column;padding:34px 30px;border:2px solid var(--ink);border-radius:22px;background:#fff4e366;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s}
.plan:hover{transform:translateY(-8px) rotate(-.6deg);background:var(--cream)}
.plan.featured{background:var(--ink);color:var(--cream)}
.planno{font-size:11px;font-weight:700;letter-spacing:.18em;margin-bottom:26px;display:flex;justify-content:space-between}
.planno span{color:var(--orange)}
/* Sized to the card, so the longest name (AUTONOMÍA) stays on one line at any width */
.plan{container-type:inline-size}
.plan .plan-name{font-size:56px;font-size:clamp(40px,19cqi,96px);line-height:.9;color:var(--orange);margin-bottom:10px;white-space:nowrap}
.plan-tag{font-weight:700!important;font-size:13px!important;letter-spacing:.14em;text-transform:uppercase;opacity:1!important}
.plan.featured .plan-name{color:var(--yellow)}
.plan.featured{transform:translateY(-14px);box-shadow:0 30px 60px -30px #1c0d0799}
.plan.featured:hover{transform:translateY(-22px) rotate(-.6deg)}
.plan p{margin:0 0 22px;font-size:14px;opacity:.8}
.plan ul{list-style:none;padding:0;margin:0 0 28px;flex:1}
.plan li{padding:11px 0;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 20%,transparent);font-size:14px;display:flex;gap:10px}
.plan li:before{content:'+';font-weight:700;color:var(--orange)}
.quote{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;opacity:.7}
.plan button{border:0;border-radius:99px;padding:15px 20px;background:var(--ink);color:var(--cream);font-weight:600;font-size:13px;display:flex;justify-content:space-between;transition:background .25s,transform .25s}
.plan.featured button{background:var(--orange)}
.plan button:hover{background:var(--pink);transform:translateY(-2px)}
.scope{text-align:center;font-size:12px;margin:34px 0 0;opacity:.7}

/* Closing — orange block */
.closing{background:var(--orange);color:var(--cream);padding:110px max(5%,calc((100vw - 1200px)/2)) 120px}
.closing>.eyebrow{margin-bottom:30px;color:#fff4e3cc}
.closing>button{border:0;background:none;padding:0;text-align:left;font:400 clamp(64px,11vw,190px)/.86 var(--display);text-transform:uppercase;color:var(--cream);display:block;width:100%}
.closing>button em{color:var(--ink);display:block;transition:color .3s}
.closing>button:hover em{color:var(--yellow)}
.closing>button span{display:inline-grid;place-items:center;width:.8em;height:.8em;margin-top:.15em;border-radius:50%;background:var(--ink);color:var(--yellow);font-size:.45em;transition:transform .4s}
.closing>button:hover span{transform:rotate(45deg)}

footer{background:var(--ink);color:#fff4e3b3;padding:34px max(5%,calc((100vw - 1200px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px}
.footer-logo{height:34px;width:auto}
main{overflow:clip}

/* Plan dialog */
dialog{border:0;border-radius:24px;padding:40px;width:min(520px,calc(100% - 32px));background:var(--cream);color:var(--ink)}
dialog::backdrop{background:#1c0d07b3;backdrop-filter:blur(6px)}
dialog .eyebrow{color:var(--orange);margin-bottom:16px}
dialog h2{font-size:56px;margin-bottom:16px}
dialog h2 em{color:var(--orange)}
dialog p{font-size:14px;margin:0 0 14px}
#selection{display:inline-block;background:var(--yellow);padding:4px 12px;border-radius:99px;font-weight:600;font-size:12px}
#selection:empty{display:none}
dialog label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:20px 0 8px}
dialog input,dialog textarea{width:100%;border:2px solid var(--ink);border-radius:14px;padding:14px;font:inherit;background:transparent;resize:vertical}
.copy{margin-top:14px;border:0;border-radius:99px;padding:14px 22px;background:var(--orange);color:var(--cream);font-weight:600}
.copy:hover{background:var(--ink)}
.close{position:absolute;top:16px;right:18px;border:0;background:none;font-size:28px;line-height:1}
#copy-status{margin:12px 0 0;font-size:13px}

/* Reveal */
.motion-ready .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.motion-ready .reveal.visible{opacity:1;transform:none}

@media(max-width:800px){
  :root{--head:58px}
  header{padding:0 16px}
  .brand img{height:30px}
  nav{display:none}
  .hero{height:170vh}
  .hero-stage{padding:22px 16px 0}
  .availability{display:none}
  .headline{margin-top:5vh}
  .hero h1{font-size:15vw}
  .hero figure{width:86vw;margin-top:4vh;box-shadow:0 30px 50px -20px #4a160080,0 0 0 5px var(--ink)}
  .heroaside{left:16px;right:16px;bottom:20px}
  .heroaside p{display:none}
  .scroll-cue{display:none}
  .story,.experience,.plans,.closing{padding:80px 16px}
  .story>div:last-child,.demo-layout{grid-template-columns:1fr;gap:34px}
  .experience-top,.plansheading{display:block}
  .experience-top>p,.plansheading p{margin-top:18px}
  .demo-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .demo-choice{flex-direction:column;gap:6px;padding:16px 0}
  .demo-choice strong{font-size:20px}
  .demo-choice small{display:none}
  .demo-content{padding:24px 20px}
  .plangrid{grid-template-columns:1fr}
  .plan:hover,.plan.featured,.plan.featured:hover{transform:none}
  footer{padding:28px 16px;flex-direction:column;align-items:start}
  dialog{padding:30px 22px}
  dialog h2{font-size:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:auto}
  .hero-stage{position:relative;top:auto;height:auto;padding-bottom:110px}
  .hero-stage:before,.hero h1,.hero figure{transform:none;opacity:1}
  .scroll-cue{display:none}
  .motion-ready .reveal{opacity:1;transform:none;transition:none}
  .availability i,.demo-content{animation:none}
}
dialog label small{text-transform:none;letter-spacing:0;font-weight:500;opacity:.6}
dialog .plan-note-hint{margin:12px 0 0;font-size:12px;opacity:.6}