@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url("/site/fonts/archivo-400-700-latin.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400 700;font-display:swap;src:url("/site/fonts/libre-baskerville-400-700-latin.woff2") format("woff2")}

:root{
  --forest:#1b4332;
  --deep:#0f2d20;
  --cream:#f7f5ee;
  --cream-mid:#ede9df;
  --gold:#9a7a3a;
  --ink:#1b4332;
  --line:rgba(27,67,50,.18);
  --display:"Libre Baskerville",Georgia,serif;
  --sans:"Archivo",Arial,sans-serif;
  --mono:"Archivo",Arial,sans-serif;
}

/* ── Reset ──────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--display);letter-spacing:-.03em;font-weight:400}
h1 em,h2 em{font-style:normal;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:4px}

/* ── Skip link ──────────────────────────────── */
.skip-link{position:absolute;left:12px;top:-60px;background:var(--cream);color:var(--forest);padding:12px 18px;z-index:10;font-weight:700}
.skip-link:focus{top:12px}

/* ── Topbar ─────────────────────────────────── */
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;transition:background .3s,backdrop-filter .3s}
.topbar.scrolled{background:rgba(27,67,50,.92);backdrop-filter:blur(12px)}
.brand img{display:block;width:190px;height:auto}
.nav-cta{font-size:12px;font-weight:700;letter-spacing:.06em;border:1px solid rgba(247,245,238,.6);color:var(--cream);padding:10px 18px;transition:background .2s,border-color .2s}
.nav-cta:hover{background:rgba(247,245,238,.12);border-color:var(--cream)}
.legal-placeholder{background:var(--cream);color:var(--forest)}
.legal-brand img{width:220px}

/* ── Eyebrow ─────────────────────────────────── */
.eyebrow{font:700 10px/1.3 var(--mono);letter-spacing:.2em;margin:0 0 22px;color:rgba(27,67,50,.55)}
.on-dark .eyebrow,.hero .eyebrow,.demo .eyebrow,.proof .eyebrow,.marshal-teaser .eyebrow,.quick-card .eyebrow{color:rgba(247,245,238,.6)}

/* ── Buttons ────────────────────────────────── */
.button{display:inline-flex;align-items:center;gap:12px;font:700 12px/1 var(--mono);letter-spacing:.08em;padding:17px 28px;border:1px solid transparent;transition:transform .18s,box-shadow .18s;white-space:nowrap}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.button-cream{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.button-forest{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.button-line{background:transparent;color:var(--forest);border-color:var(--forest)}
.text-link{font:600 13px/1 var(--sans);border-bottom:1px solid currentColor;padding-bottom:3px;opacity:.85}
.text-link:hover{opacity:1}

/* ── Section scaffold ───────────────────────── */
.section{padding:110px 6vw}

/* ── Hero ───────────────────────────────────── */
.hero{overflow:hidden;background:var(--forest);color:var(--cream);padding:160px 6vw 80px;min-height:820px;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 80% 60%,rgba(154,122,58,.08) 0%,transparent 70%);pointer-events:none}
.hero-copy{max-width:740px;position:relative;z-index:1}
h1{font-size:clamp(3.2rem,7.6vw,7rem);line-height:.94;margin-bottom:32px;max-width:820px}
.lede{font-size:19px;line-height:1.58;max-width:560px;color:rgba(247,245,238,.82)}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:40px;flex-wrap:wrap}
.hero-note{font:500 11px/1.5 var(--mono);letter-spacing:.06em;margin-top:52px;color:rgba(247,245,238,.5)}

.hero-device{position:relative;width:min(100%,300px);height:360px;margin:56px auto -48px;z-index:0}
.sun-disc{position:absolute;width:clamp(240px,80vw,400px);height:clamp(240px,80vw,400px);top:20px;left:50%;transform:translateX(-50%);background:transparent;border:1px solid rgba(247,245,238,.2);border-radius:50%;box-shadow:inset 0 0 0 32px rgba(247,245,238,.04),0 0 0 1px rgba(247,245,238,.08)}
.phone{position:absolute;top:0;left:50%;width:min(66%,250px);transform:translateX(-50%);background:var(--deep);border:6px solid var(--deep);border-radius:28px;box-shadow:24px 32px 60px rgba(0,0,0,.38);overflow:hidden}
.product-shot{width:100%;height:auto}
.device-caption{position:absolute;bottom:8px;left:0;font:700 8px var(--mono);letter-spacing:.18em;transform:rotate(-4deg);color:rgba(247,245,238,.5);white-space:nowrap}

/* ── Problem ─────────────────────────────────── */
.problem{background:var(--cream);border-top:1px solid var(--line)}
.section-head h2{font-size:clamp(2.8rem,6vw,5.4rem);line-height:.97;margin:0}
.scene-list{padding:0;list-style:none;margin:80px 0 0;max-width:860px}
.scene-list li{border-top:1px solid var(--line);display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:28px 0}
.scene-list span,.step-no,.proof-list b{font:700 11px var(--mono);letter-spacing:.1em;color:rgba(27,67,50,.45)}
.scene-list p{font:400 clamp(19px,2.8vw,30px)/1.28 var(--display);margin:0}
.problem-close{max-width:640px;margin:52px 0 0 auto;font-size:20px;line-height:1.45;border-left:3px solid var(--gold);padding-left:24px}

/* ── Presentation video ──────────────────────── */
.presentation-video{background:var(--cream-mid);border-top:1px solid var(--line)}
.presentation-copy{text-align:center;margin:0 auto 46px}
.presentation-copy h2{font-size:clamp(2.8rem,6vw,5.2rem);line-height:.97;margin:0}
.lazy-video-player{width:min(100%,420px);margin:0 auto;aspect-ratio:9/16;background:var(--deep);position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(15,45,32,.22)}
.lazy-video-player video{width:100%;height:100%;object-fit:cover}
.video-start{position:absolute;inset:0;border:0;background:linear-gradient(to top,rgba(15,45,32,.84),rgba(15,45,32,0) 42%);color:var(--cream);display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:0 20px 28px;font:700 11px/1 var(--mono);letter-spacing:.12em;cursor:pointer}
.video-start span{display:grid;place-items:center;width:42px;height:42px;padding-left:3px;border:1px solid rgba(247,245,238,.8);border-radius:50%;background:rgba(15,45,32,.72)}
.lazy-video-player.started .video-start{display:none}

/* ── Demo ───────────────────────────────────── */
.demo{background:var(--deep);color:var(--cream)}
.demo-intro h2{font-size:clamp(3rem,6vw,5.4rem);line-height:.97;margin:0 0 52px}
.video-frame{width:min(100%,390px);margin:auto;aspect-ratio:9/16;background:#1a3328;position:relative;overflow:hidden;border:1px solid rgba(247,245,238,.1);box-shadow:0 40px 80px rgba(0,0,0,.4)}
.video-frame video,.video-poster{width:100%;height:100%;object-fit:cover}
.video-poster{filter:saturate(.75) contrast(.88)}
.video-pending{position:absolute;z-index:1;left:0;right:0;bottom:0;margin:0;padding:18px 22px;background:linear-gradient(to top,rgba(15,45,32,.95) 60%,transparent);color:var(--cream);font:700 9px/1.6 var(--mono);letter-spacing:.14em}
.video-pending span{display:inline-block;margin:0 .6em;opacity:.5}

/* ── Reto del Marshal ───────────────────────── */
.marshal-teaser{background:var(--forest);color:var(--cream);border-top:1px solid rgba(247,245,238,.12)}
.marshal-teaser[hidden]{display:none}
.marshal-copy{max-width:780px}
.marshal-copy h2{font-size:clamp(2.8rem,6vw,5.2rem);line-height:.97;margin:0}
.marshal-copy>p:not(.eyebrow){max-width:480px;font-size:18px;line-height:1.55;margin:28px 0 36px;color:rgba(247,245,238,.8)}

/* ── How ────────────────────────────────────── */
.how{background:var(--cream)}
.steps{margin-top:72px}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);border-top:1px solid var(--line);padding:28px 0 40px;gap:8px}
.step h3{font:700 clamp(24px,3.8vw,38px)/1.1 var(--display);margin:0 0 12px}
.step p{max-width:520px;font-size:16px;line-height:1.5;color:rgba(27,67,50,.8);margin:0}
.how-shot{margin:72px auto 0;max-width:240px;position:relative}
.how-shot img{width:100%;border:6px solid var(--deep);border-radius:22px;box-shadow:16px 20px 48px rgba(27,67,50,.2)}
.how-shot figcaption{font:700 8px var(--mono);letter-spacing:.2em;margin-top:16px;text-align:center;color:rgba(27,67,50,.5)}

/* ── Proof ──────────────────────────────────── */
.proof{background:var(--forest);color:var(--cream)}
.proof-title h2{font-size:clamp(3rem,6vw,5.4rem);line-height:.97}
.proof-list{margin-top:64px}
.proof-list article{border-top:1px solid rgba(243,238,223,.15);padding:26px 0;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start}
.proof-list p{font-size:19px;line-height:1.52;margin:0}
.proof-list b{color:rgba(247,245,238,.4);margin-top:5px}

/* ── Quick consult ──────────────────────────── */
.quick{background:var(--cream-mid);border-top:1px solid var(--line)}
.quick-card{background:var(--forest);color:var(--cream);padding:52px 36px;position:relative;overflow:hidden}
.quick-card::before{content:"";position:absolute;top:-60px;right:-60px;width:280px;height:280px;border:1px solid rgba(247,245,238,.08);border-radius:50%}
.quick h2{font-size:clamp(2.6rem,5.6vw,5rem);line-height:.97;margin-bottom:28px}
.quick-card>p:not(.eyebrow){max-width:500px;line-height:1.52;color:rgba(247,245,238,.82)}
.question-demo{background:var(--cream);color:var(--forest);margin:36px -4px -4px;padding:0;border:none}
.question-demo summary{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 22px 20px;list-style:none;font:inherit;cursor:pointer}
.question-demo summary::-webkit-details-marker{display:none}
.question-demo summary>span,.question-demo summary i{font:700 10px var(--mono);letter-spacing:.12em;font-style:normal;color:rgba(27,67,50,.5)}
.question-demo summary>strong{font:700 19px/1.2 var(--display)}
.question-demo summary i{display:flex;align-items:center;gap:8px}
.question-demo summary b{font:400 22px/10px var(--sans);transition:transform .2s;line-height:1}
.question-demo[open] summary b{transform:rotate(45deg)}
.quick-answer{border-top:1px solid var(--line);padding:20px 22px 24px}
.quick-answer p{margin:0;color:rgba(27,67,50,.8);font-size:14px;line-height:1.55}
.quick-answer-rule{display:flex;align-items:baseline;gap:14px;margin-bottom:10px!important}
.quick-answer-rule strong{font:700 24px/1 var(--display);color:var(--forest)}
.quick-answer-rule span{font:700 9px var(--mono);letter-spacing:.14em;color:rgba(27,67,50,.55)}

/* ── Pricing ─────────────────────────────────── */
.pricing{background:var(--cream)}
.pricing-subtitle{margin:28px 0 0;font-size:19px;line-height:1.5;color:rgba(27,67,50,.7)}
.plans{margin-top:64px;display:grid;gap:14px}
.plan{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);background:var(--cream);position:relative}
.plan.featured{border:2px solid var(--forest);background:var(--forest);color:var(--cream)}
.badge{margin:0 0 10px;color:var(--gold);font:700 9px var(--mono);letter-spacing:.16em}
.plan.featured .badge{color:rgba(247,245,238,.6)}
.plan-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.plan h3{font:700 22px/1.1 var(--display);margin:0}
.price{flex:none;font:700 28px/1 var(--display);margin:0}
.price small{font:700 9px var(--mono);letter-spacing:.08em}
.plan-summary{margin:10px 0 0;font-size:15px;line-height:1.4}
.unit{margin:6px 0 0;font-size:13px;color:rgba(27,67,50,.6)}
.plan.featured .unit{color:rgba(247,245,238,.65)}
.plan-closing{margin:12px 0 0;font-size:15px;font-weight:700}
.plan-savings{margin:5px 0 0;font-size:13px;color:var(--gold)}
.plan.featured .plan-savings{color:rgba(247,245,238,.7)}
.plan .button{width:100%;min-height:54px;margin-top:18px;font-size:12px;justify-content:center}
.button-line{color:var(--forest)}
.plan.featured .button{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.featured .button{min-height:60px}
.payment-note{text-align:center;font:700 10px var(--mono);letter-spacing:.1em;margin:28px 0 0;color:rgba(27,67,50,.5)}
.payment-note span{padding:0 10px;color:rgba(27,67,50,.3)}

/* ── Install ─────────────────────────────────── */
.install{background:var(--cream-mid);border-top:1px solid var(--line)}
.install-lede{font-size:17px;line-height:1.5;max-width:440px;margin:32px 0 0;color:rgba(27,67,50,.75)}
.install-grid{display:grid;gap:20px;margin-top:56px}
.install-card{background:var(--cream);border:1px solid var(--line);padding:24px}
.platform{font:700 10px var(--mono);letter-spacing:.2em;color:rgba(27,67,50,.5);margin-bottom:16px}
.install-real{margin:0;max-height:340px;overflow:hidden;border:4px solid var(--forest)}
.install-real img{width:100%;height:auto;object-fit:cover;object-position:top}
.install-card ol{padding-left:20px;margin:20px 0 0;font-size:13px;line-height:1.9;color:rgba(27,67,50,.8)}
.install-button{margin:40px auto 0;display:flex;width:max-content}

/* ── FAQ ────────────────────────────────────── */
.faq{background:var(--cream)}
.faq-list{margin-top:60px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;list-style:none;font:700 20px/1.3 var(--display);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary span{font:300 28px/1 var(--sans);transition:transform .2s;flex:none;color:rgba(27,67,50,.5)}
details[open] summary span{transform:rotate(45deg)}
details p{line-height:1.58;max-width:680px;margin:20px 40px 4px 0;color:rgba(27,67,50,.75);font-size:16px}

/* ── Footer ─────────────────────────────────── */
footer{background:var(--deep);color:var(--cream);padding:56px 6vw 32px}
.footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-bottom:56px;border-bottom:1px solid rgba(247,245,238,.1)}
.footer-top p{font:700 28px/1.2 var(--display);margin:0;max-width:380px}
.footer-bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:18px;font:600 10px/1.6 var(--mono);letter-spacing:.06em;color:rgba(247,245,238,.5)}
.footer-bottom a:hover{color:var(--cream)}
.footer-bottom small{width:100%;max-width:620px;margin-top:4px}

/* ── Legal page ─────────────────────────────── */
.legal-placeholder{min-height:100vh;padding:48px 7vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:820px}
.legal-placeholder .brand{margin-bottom:64px}
.legal-placeholder h1{font-size:clamp(3rem,10vw,6rem)}
.legal-placeholder>p:not(.eyebrow){font-size:18px;line-height:1.55;max-width:620px;margin-bottom:32px}

/* ── Desktop ─────────────────────────────────── */
@media(min-width:860px){
  .topbar{height:80px}
  .brand img{width:224px}
  .hero{padding:180px 8vw 100px;min-height:920px}
  .hero-device{position:absolute;right:6vw;bottom:-40px;width:420px;height:660px;margin:0}
  .sun-disc{width:520px;height:520px;top:60px;left:-20px;transform:none}
  .phone{width:270px;left:auto;right:40px;transform:none}
  .device-caption{bottom:60px;left:-40px;transform:rotate(-9deg)}
  .section{padding:140px 8vw}
  .problem .section-head{max-width:none}
  .scene-list{margin-left:auto;max-width:820px}
  .demo{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
  .demo-intro h2{margin:0}
  .video-frame{margin:0;width:340px}

  /* HOW — title + steps stacked, shot right; no overlaps */
  .how-inner{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}
  .how-left{}
  .steps{margin-top:60px}
  .how-shot{margin:0;max-width:none}
  .how-shot img{border-radius:18px}

  .proof{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
  .proof-list{margin-top:0}
  .quick{padding:130px 8vw}
  .quick-card{padding:80px 7vw}
  .question-demo{max-width:480px;margin:44px 0 -4px auto}
  .plans{grid-template-columns:1.14fr 1fr 1fr;align-items:stretch;gap:16px}
  .plan{padding:28px}
  .plan .button{margin-top:auto}
  .featured{min-height:360px}
  .install-grid{grid-template-columns:1fr 1fr;gap:24px}
  .install-card{padding:28px}
  .install-real{max-height:420px}
  .faq{display:grid;grid-template-columns:40% 1fr;gap:12%}
  .faq-list{margin-top:0}
  .footer-top{flex-direction:row;align-items:center;justify-content:space-between}
  .footer-top p{font-size:34px}
  .footer-bottom small{margin-left:auto;text-align:right}
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
  .reveal.visible{opacity:1;transform:none}
}

/* ── Wide ────────────────────────────────────── */
@media(min-width:1200px){
  .section{padding:160px 10vw}
  .hero{padding:200px 10vw 120px}
  .quick{padding:160px 15vw}
  .quick-card{padding:90px 9vw}
}

/* ── Reduced motion ─────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

@media(prefers-color-scheme:dark){
  .presentation-video{background:var(--deep);color:var(--cream);border-color:rgba(247,245,238,.12)}
  .presentation-video .eyebrow{color:rgba(247,245,238,.6)}
  .lazy-video-player{border-color:rgba(247,245,238,.18);box-shadow:0 30px 70px rgba(0,0,0,.4)}
}