:root{
  --selva:#1E4A3B; --selva-deep:#163A2E; --hoja:#3F7A5A; --caliza:#EFEADF; --papel:#F7F4EC; --miel:#C39237; --miel-ink:#7E5B1C; --miel-light:#E2B862; --on-miel:#0F2A20;
  --ink:#17231E; --muted:#56635C; --line:rgba(30,74,59,.16);
  --serif:"Marcellus", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(18px, 5vw, 40px);
  --radius:16px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important} /* layout rules (e.g. desktop snap) must never unhide things */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:72px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--papel); color:var(--ink); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
body.intro-on{overflow:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding-inline:var(--gutter)}
section{padding-block:clamp(64px, 10vw, 112px)}
:focus-visible{outline:3px solid var(--miel); outline-offset:3px; border-radius:6px}

/* Honey text at small sizes: darker on light grounds, lighter on green, to meet WCAG AA contrast. */
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--miel-ink); margin-bottom:14px; text-wrap:balance}
.hero .eyebrow,.how .eyebrow{color:var(--miel-light)}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--miel); color:var(--on-miel); padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
h2{font:400 clamp(34px, 5.4vw, 54px)/1.08 var(--serif); color:var(--selva); letter-spacing:.005em}
h3{font-size:19px; line-height:1.3; font-weight:700; color:var(--selva)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font:700 16.5px/1 var(--sans); text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background-color .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-honey{background:var(--miel); color:var(--on-miel)}
.btn-honey:hover{background:#D0A248}
.btn-ghost{color:var(--caliza); border-color:rgba(239,234,223,.45)}
.btn-ghost:hover{border-color:var(--caliza)}
.btn-small{min-height:40px; padding:0 18px; font-size:15px; background:var(--miel); color:var(--on-miel)}
.btn-block{width:100%}
.ico{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* Header */
.site-header{position:fixed; top:0; left:0; right:0; z-index:30; padding-top:env(safe-area-inset-top,0px); color:var(--caliza); transition:background-color .25s ease, box-shadow .25s ease}
.site-header.solid{background:var(--selva); box-shadow:0 6px 24px rgba(15,42,32,.22)}
.site-header.solid .header-in{min-height:64px}
.header-in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; transition:min-height .25s ease}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{width:38px; height:38px; color:var(--caliza)}
.brand-word{font:400 26px/1 var(--serif); letter-spacing:.01em}
.nav{display:none; gap:28px; font-size:15.5px; font-weight:500}
.nav a{text-decoration:none; opacity:.85}
.nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px}
.header-actions{display:flex; align-items:center; gap:10px}
.lang{background:transparent; color:var(--caliza); border:1.5px solid rgba(239,234,223,.45); border-radius:999px; min-width:44px; min-height:40px; font:700 13.5px/1 var(--sans); letter-spacing:.08em; cursor:pointer}
.lang:hover{border-color:var(--caliza)}
@media (min-width:860px){ .nav{display:flex} }

/* Hero */
.hero{position:relative; background:var(--selva); color:var(--caliza); overflow:hidden; padding-block:calc(84px + env(safe-area-inset-top,0px)) clamp(56px, 8vw, 96px)}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(to bottom, transparent, rgba(22,58,46,.6)); pointer-events:none}
.rain{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero-in{position:relative; z-index:1; display:grid; gap:20px; align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:22px; max-width:640px}
.hero .eyebrow{margin-bottom:0}
.hero h1{font:400 clamp(35px, 9.4vw, 60px)/1.06 var(--serif); letter-spacing:.005em; color:var(--caliza)}
.lead{font-size:clamp(18px, 2.1vw, 20.5px); line-height:1.55; color:#D5DDD6; max-width:52ch}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px}
.trust{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px; color:#BFCBC2}
.trust li{display:flex; align-items:center; gap:8px}
.trust li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--miel)}
.hero-art{display:flex; justify-content:center; order:-1}
.mark{width:min(48vw, 200px); height:auto; overflow:visible}
.mark .canopy{fill:var(--caliza)}
.mark .trunk{fill:var(--caliza)}
.mark .branches{stroke:var(--caliza)}
.mark .people{fill:var(--miel)}
@media (min-width:880px){
  .hero{min-height:680px; display:flex; align-items:center}
  .hero-in{grid-template-columns:1.1fr .9fr; width:100%}
  .hero-art{order:0}
  .mark{width:min(100%, 440px)}
}

/* Story */
.story{background:var(--caliza); position:relative}
.story-grid{display:grid; gap:44px}
.story-copy{display:flex; flex-direction:column; gap:18px; max-width:62ch}
.story-copy h2{margin-bottom:6px}
.story-copy p{font-size:19px; line-height:1.65; color:#2B3A33}
.story-copy .strong{font-weight:600; color:var(--selva); border-left:3px solid var(--miel); padding-left:18px}
.ceiba-keys{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px; font-size:15px; color:var(--muted)}
.ceiba-keys b{color:var(--selva); font-weight:700}
.story-art{position:relative; margin:0; border-radius:var(--radius); background:linear-gradient(to bottom, #E4DFD2, var(--caliza) 70%); padding:clamp(14px, 3vw, 32px) clamp(10px, 3vw, 32px) 20px; overflow:hidden}
.story-art svg{display:block; width:100%; height:auto; position:relative}
.story-art .fig{transition:opacity .35s ease, transform .35s ease}
.story-art .fig.off{opacity:0 !important}
/* Rain ↔ sun: warm sky, a sun that moves along an arc behind the tree, and the canopy's shade on the ground. */
.story-art::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, #F5E2B5, var(--caliza) 75%); opacity:0; transition:opacity 1.2s ease; pointer-events:none}
.story-art.sunny::before{opacity:1}
.story-art .sun{position:absolute; left:0; top:0; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; background:radial-gradient(circle, #EDB44A 0 21%, rgba(237,180,74,.32) 22%, rgba(237,180,74,0) 70%); opacity:0; transition:opacity 1s ease; pointer-events:none}
.story-art.sunny .sun{opacity:1}
.story-art .rain{transition:opacity .8s ease}
.story-art.sunny .rain{opacity:0}
.story-art .shade{opacity:0; transition:opacity 1s ease}
.story-art .figs{transition:fill 1s ease}
.story-art.sunny .figs{fill:#9C7430}
.story-art.sunny .shade{opacity:var(--shade-o, .3)}
.story-art.sunny{touch-action:pan-y}
.weather{position:absolute; top:10px; right:10px; z-index:1; display:flex; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.8); border:1px solid var(--line)}
.weather button{font:600 13px/1 var(--sans); min-height:30px; padding:0 12px; border:0; border-radius:999px; background:none; color:var(--selva); cursor:pointer}
.weather button[aria-pressed="true"]{background:var(--selva); color:#fff}
.counter{position:relative; display:flex; align-items:baseline; justify-content:center; gap:10px; margin-top:6px; color:var(--selva); font-size:17px}
.count{font:400 44px/1 var(--serif); color:var(--selva); font-variant-numeric:tabular-nums; min-width:2ch; text-align:right}
@media (min-width:980px){
  .story-grid{grid-template-columns:.85fr 1.15fr; align-items:center}
}

/* Help */
.help{background:var(--papel)}
.help h2{margin-bottom:40px}
.areas{margin:-6px 0 20px; font-size:16.5px; line-height:1.6; color:var(--muted); max-width:75ch}
.areas b{color:var(--selva); font-weight:600}
.cards{list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
.card{background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 28px; display:flex; flex-direction:column; gap:10px}
.card-ico{width:46px; height:46px; fill:none; stroke:var(--hoja); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:6px}
.card p{color:var(--muted); font-size:16px}
.moment-link{margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; border-radius:var(--radius); background:var(--selva); color:var(--caliza); text-decoration:none; transition:transform .15s ease}
.moment-link:hover{transform:translateY(-2px)}
.moment-link-text{font-size:17px; line-height:1.5; color:#D5DDD6}
.moment-link-text strong{color:var(--caliza)}
.moment-link-go{flex:none; width:44px; height:44px; border-radius:50%; background:var(--miel); color:var(--on-miel); display:grid; place-items:center; font-size:20px; font-weight:700}

/* How */
.how{background:var(--selva); color:var(--caliza)}
.how h2{color:var(--caliza); margin-bottom:44px}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:28px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); counter-reset:none}
.step{display:flex; gap:18px; align-items:flex-start; padding-top:22px; border-top:1px solid rgba(239,234,223,.2)}
.step-n{flex:none; width:48px; height:48px; border-radius:50%; background:var(--miel); color:var(--on-miel); display:grid; place-items:center; font:400 24px/1 var(--serif)}
.step h3{color:var(--caliza); margin-bottom:6px; font-size:20px}
.step p{color:#C9D3CB; font-size:16.5px}

/* About */
.about{background:radial-gradient(120% 90% at 0% 0%, rgba(63,122,90,.09), transparent 55%), var(--papel)}
.about-in{display:grid; gap:32px; align-items:center; max-width:960px}
.avatar{width:180px; height:180px; border-radius:50%; background:var(--selva); display:grid; place-items:center; box-shadow:0 0 0 8px var(--caliza), 0 0 0 9px var(--line)}
.avatar{overflow:hidden}
.avatar img{display:block; width:100%; height:100%; border-radius:50%}
.about-copy{display:flex; flex-direction:column; gap:16px; max-width:60ch}
.about-copy h2{margin-bottom:4px}
.about-copy p{font-size:18.5px; color:#2B3A33}
.signature{font-weight:600; color:var(--selva) !important; font-size:16px !important; letter-spacing:.02em}
.affiliation{font-size:14.5px !important; color:var(--muted) !important}
@media (min-width:760px){ .about-in{grid-template-columns:auto 1fr; gap:56px} .avatar{width:220px; height:220px} }

/* Agenda */
.agenda{background:var(--caliza)}
.agenda-in{display:grid; gap:32px; align-items:start}
.agenda-copy{display:flex; flex-direction:column; gap:14px; max-width:48ch}
.agenda-copy p{font-size:18px; color:#2B3A33}
.form{background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px, 4vw, 34px); display:flex; flex-direction:column; gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-weight:600; font-size:15.5px; color:var(--selva)}
.field input,.field select{font:inherit; font-size:16.5px; color:var(--ink); background:var(--papel); border:1.5px solid rgba(30,74,59,.22); border-radius:12px; min-height:52px; padding:0 14px; width:100%}
.field select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--selva) 50%), linear-gradient(135deg, var(--selva) 50%, transparent 50%); background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px}
.field input:focus,.field select:focus{outline:none; border-color:var(--hoja); box-shadow:0 0 0 3px rgba(63,122,90,.2)}
.field input[aria-invalid="true"]{border-color:#B4462F}
.error{color:#9C3A26; font-size:14.5px}
@media (min-width:900px){ .agenda-in{grid-template-columns:1fr 1fr; gap:64px} }

/* FAQ */
.faq{background:var(--papel); padding-top:clamp(40px, 6vw, 72px)}
.faq-in{display:grid; gap:28px; max-width:860px}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:20px 40px 20px 0; font-weight:600; font-size:18px; color:var(--selva); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font:400 26px/1 var(--sans); color:var(--miel)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px; color:var(--muted); font-size:17px; max-width:62ch}

/* Footer */
.site-footer{background:var(--selva-deep); color:#C9D3CB; padding-block:48px calc(96px + env(safe-area-inset-bottom,0px))}
.footer-in{display:grid; gap:24px}
.footer-brand{display:flex; flex-direction:column; gap:6px}
.footer-brand .brand-word{color:var(--caliza); font-size:30px}
.brand-sub{font-size:11px; letter-spacing:.34em; text-transform:uppercase; font-weight:600; color:var(--miel-light)}
.footer-brand p{margin-top:8px; font-size:15px}
.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:15.5px}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline; text-underline-offset:4px}
.footer-legal{font-size:13.5px; color:#93A399}
.footer-legal .affiliation{display:block; margin-bottom:4px; color:#C9D3CB !important}
@media (min-width:760px){ .footer-in{grid-template-columns:1fr auto; align-items:end} .footer-legal{grid-column:1 / -1} .site-footer{padding-bottom:48px} }

/* Floating WhatsApp */
.wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:20; width:60px; height:60px; border-radius:50%; background:var(--miel); color:var(--on-miel); display:grid; place-items:center; box-shadow:0 8px 24px rgba(22,58,46,.35); transition:transform .15s ease}
.wa-float:hover{transform:scale(1.06)}
.js .wa-float{opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .25s ease, transform .25s ease}
.js .wa-float.show{opacity:1; transform:none; pointer-events:auto}
.js .wa-float.show:hover{transform:scale(1.06)}
.wa-float .ico{width:30px; height:30px; stroke-width:1.6}

/* Intro */
.intro{position:fixed; inset:0; z-index:50; display:grid; place-items:center; cursor:pointer}
.intro-bg{position:absolute; inset:0; background:var(--selva)}
.intro canvas{position:absolute; inset:0; width:100%; height:100%}
.intro .mark{position:relative; width:min(64vw, 280px); transform-origin:0 0}
.intro-hint{position:absolute; left:0; right:0; bottom:calc(32px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(239,234,223,.55)}

/* Desktop: one section per scroll. Each section fills the screen and the scroll stops at each one.
   Phones and short screens scroll freely. */
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion: no-preference){
  html{scroll-snap-type:y mandatory; scroll-padding-top:0}
  main > section[class]{min-height:100vh; display:flex; flex-direction:column; justify-content:center; scroll-snap-align:start}
  main > section[class] > .wrap{width:100%} /* auto margins would otherwise shrink it inside the flex column */
  .site-footer{scroll-snap-align:end}
}
/* Short desktop screens (e.g. 1280×720): less padding so each section still fits in one screen. */
@media (min-width:1024px) and (min-height:640px) and (max-height:820px){
  body:not(.momento-page) section{padding-block:56px}
  .help h2{margin-bottom:22px} .areas{margin-bottom:14px} .card{padding-block:20px 22px}
}
@media (min-width:880px){ .hero-in{gap:36px} }
@media (max-width:420px){ .btn-small{padding:0 14px; font-size:14px} .brand-word{font-size:23px} }

/* Story counter turns honey when all 50 are sheltered. */
.counter.full .count{color:var(--miel-ink)}

/* ---------- Entrance animations ---------- */
.reveal{transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s)}
.js .reveal.pending{opacity:0; transform:translateY(22px)}