/* Alado — page layout. Components live in alado.css; values come from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;overflow-x:clip}
img{max-width:100%;height:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--space-6);padding-right:var(--space-6)}
@media (max-width:720px){.wrap{padding-left:var(--space-4);padding-right:var(--space-4)}}
.sec{position:relative;background:var(--ground);color:var(--ink);padding:var(--space-10) 0}
@media (max-width:720px){.sec{padding:var(--space-8) 0}}
.sec--tight{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.stack{display:grid;gap:var(--space-5);align-content:start}
.stack-lg{display:grid;gap:var(--space-7);align-content:start}
.head{display:grid;gap:var(--space-4);margin-bottom:var(--space-9);max-width:1100px}
@media (max-width:720px){.head{margin-bottom:var(--space-7)}}
.measure{max-width:64ch}
.muted{color:var(--ink-muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-9);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--space-7)}}
.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-7)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.al p{margin:0}
.al ul.list,.al ol.list{margin:0;padding-left:1.1em;display:grid;gap:var(--space-2)}
.al ul.list li::marker{color:var(--ink-faint)}
.al .rule{border:0;height:1px;background:var(--line);margin:0}
.al a.link{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.al a.link:hover{color:var(--brasa)}
.todo{box-shadow:inset 0 -2px 0 var(--brasa)}

/* Nav */
.site-nav{position:sticky;top:0;z-index:var(--z-nav)}
.site-nav .al-nav{padding-left:max(var(--space-6),calc((100% - 1440px)/2 + var(--space-6)));padding-right:max(var(--space-6),calc((100% - 1440px)/2 + var(--space-6)))}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:var(--ink);border-radius:var(--radius-key);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
.nav-cta{min-height:40px}
.nav-sheet{display:none}
@media (max-width:720px){
  .site-nav .al-nav{padding-left:var(--space-4);padding-right:var(--space-4)}
  .nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .nav-sheet{display:block;position:absolute;left:0;right:0;top:100%;background:var(--ground);box-shadow:inset 0 -1px 0 var(--line);padding:var(--space-3) var(--space-4) var(--space-5)}
  .nav-sheet[hidden]{display:none}
  .nav-sheet ul{list-style:none;margin:0;padding:0;display:grid}
  .nav-sheet a{display:block;padding:var(--space-4) 0;font:600 22px/1.2 var(--font-sans);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line)}
}

/* Phone bar */
.phone-bar{display:none}
@media (max-width:720px){.phone-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav)}body{padding-bottom:72px}}

/* Hero */
.hero{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-7);padding-top:var(--space-5);padding-bottom:var(--space-7);overflow:hidden}
.hero__bg{position:absolute;inset:0;background:url(../img/eclipse-noche.webp) 78% 40%/cover no-repeat;opacity:.38;pointer-events:none}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ground) 18%,rgba(10,10,10,.4) 60%,rgba(10,10,10,.1))}
.hero>*{position:relative}
.hero__body{display:grid;gap:var(--space-7)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,560px);gap:var(--space-8);align-items:end}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr}}
.hero h1{max-width:15ch;font-size:clamp(52px,min(10vw,13.5vh),184px)}
.hero__demo{display:grid;gap:var(--space-3)}

/* Work */
.frame{position:relative;aspect-ratio:16/10;background:var(--ground-raised);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;text-align:center;padding:var(--space-6);overflow:hidden}
.frame__bar{position:absolute;left:0;right:0;top:0;height:28px;box-shadow:inset 0 -1px 0 var(--line);display:flex;gap:6px;align-items:center;padding:0 12px}
.frame__bar i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
blockquote{margin:0;padding:0}
.quote{font:600 28px/1.25 var(--font-sans);letter-spacing:-.02em;max-width:30ch}

/* Real change */
.real{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);box-shadow:0 0 0 1px var(--line)}
.real>div{background:var(--ground);padding:var(--space-5);display:grid;gap:var(--space-2);align-content:start}
@media (max-width:900px){.real{grid-template-columns:1fr 1fr}}

/* Plans footnotes */
.notes{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-7);margin-top:var(--space-6)}

/* Close */
.close{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:var(--space-6)}

/* Section anchors in long pages */
.toc{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-6)}
.toc a{font:500 11px/1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink-muted)}
.toc a:hover{color:var(--brasa)}
.block{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:var(--space-8);padding:var(--space-9) 0;box-shadow:inset 0 1px 0 var(--line)}
.block:first-of-type{box-shadow:none}
@media (max-width:900px){.block{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-8) 0}}
.block h2{position:sticky;top:96px}
@media (max-width:900px){.block h2{position:static}}
.price-line{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:baseline}

/* Form */
.form{display:grid;gap:var(--space-5);max-width:560px}
.check{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;font-size:15px;line-height:1.45}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.al-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}

/* 404 */
.lost{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;gap:var(--space-6)}

/* Selector extra */
.al-sel__q span{padding-right:var(--space-3)}