/* Layout: a single long page that walks a family from "we just noticed something" to "we are not alone": hero with the app, the road (six stops along a dotted path), warnings, our story, and how to join. Same palette and rounded type as the app so families recognize it. */
:root{
  --bg:#FFF8EC; --surface:#FFFFFF; --ink:#1B1F3B; --muted:#5D6280; --line:#E7DCC8; --soft:#F6EEDD;
  --accent:#6C3BEB; --accent-ink:#FFFFFF; --hl:#FFD25E; --focus:#FFB800;
  --k-orange:#F26A00; --k-green:#12A150; --k-blue:#2D7FF9; --k-yellow:#FFC915; --k-pink:#F0479B; --k-red:#E8323C; --k-purple:#8B4DFF;
  --shape-1:#FFD25E; --shape-2:#7FD6FF; --shape-3:#FF9BC9; --shape-4:#9BE59E;
  --hard:0 5px 0 rgba(27,31,59,.85);
  --f-kid:"Fredoka", ui-rounded, "Baloo 2", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --emo:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  --max:1120px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#141833; --surface:#20264A; --ink:#F4F5FF; --muted:#AEB3D6; --line:#343B6B; --soft:#1A1F40;
  --accent:#A07CFF; --accent-ink:#140A33; --hl:#6B5A1E; --focus:#FFC93C;
  --shape-1:#3B3570; --shape-2:#21416B; --shape-3:#4A2650; --shape-4:#204A3A;
  --hard:0 5px 0 rgba(0,0,0,.55); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#141833; --surface:#20264A; --ink:#F4F5FF; --muted:#AEB3D6; --line:#343B6B; --soft:#1A1F40;
  --accent:#A07CFF; --accent-ink:#140A33; --hl:#6B5A1E; --focus:#FFC93C;
  --shape-1:#3B3570; --shape-2:#21416B; --shape-3:#4A2650; --shape-4:#204A3A;
  --hard:0 5px 0 rgba(0,0,0,.55); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 var(--f-body);overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:6px}
.emo{font-family:var(--emo);font-style:normal}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-kid);line-height:1.05;text-wrap:balance;margin:0}
h2{font-size:clamp(34px, 6vw, 56px);font-weight:700;letter-spacing:-.01em}
h3{font-size:clamp(22px, 3.4vw, 28px);font-weight:600}
p{margin:0}
.eyebrow{font:700 14px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lede{font-size:clamp(19px, 2.4vw, 22px);color:var(--muted);max-width:62ch}
mark{background:linear-gradient(transparent 58%, var(--hl) 58%);color:inherit;padding:0 .08em}
section{padding-block:clamp(64px, 10vw, 110px)}
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px, 5vw, 52px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px;border-radius:999px;border:3px solid rgba(27,31,59,.9);
  background:var(--surface);color:var(--ink);font:600 19px/1 var(--f-kid);text-decoration:none;box-shadow:var(--hard);transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(27,31,59,.85)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn svg{width:22px;height:22px;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 24px/1 var(--f-kid)}
.logo img{width:40px;height:40px;border-radius:11px;border:2px solid rgba(27,31,59,.9)}
.nav ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{display:block;padding:10px 14px;border-radius:999px;text-decoration:none;font:600 16px/1 var(--f-kid);color:var(--muted)}
.nav ul a:hover{background:var(--surface);color:var(--ink)}
.nav .btn{min-height:44px;font-size:16px;padding:0 18px;box-shadow:0 3px 0 rgba(27,31,59,.85)}
@media (max-width:900px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* Hero */
.hero{position:relative;padding-block:clamp(40px, 7vw, 90px) clamp(56px, 8vw, 100px);overflow:hidden}
.shapes span{position:absolute;display:block;pointer-events:none;z-index:0}
.shapes .s1{width:560px;height:560px;border-radius:50%;background:var(--shape-1);opacity:.55;top:-260px;right:-180px}
.shapes .s2{width:380px;height:380px;border-radius:38% 62% 55% 45%/50% 40% 60% 50%;background:var(--shape-2);opacity:.5;bottom:-160px;left:-170px}
.shapes .s3{width:90px;height:90px;background:var(--shape-3);opacity:.8;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);bottom:70px;right:6%}
@media (max-width:820px){.shapes .s3{display:none}}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px, 5vw, 64px);align-items:center}
.hero h1{font-size:clamp(44px, 7.6vw, 86px);font-weight:700;letter-spacing:-.02em;margin-block:16px 22px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{color:var(--ink);opacity:.85}
.hero .btns{margin-top:30px}
.promise{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:26px;padding:0;list-style:none;font-weight:700;font-size:16px}
.promise li{display:flex;align-items:center;gap:8px}
.promise i{width:26px;height:26px;border-radius:50%;background:var(--k-green);display:grid;place-items:center;border:2px solid rgba(27,31,59,.9)}
.promise i svg{width:14px;height:14px}
@media (max-width:820px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero .phone-col{order:2}}

/* Phone mockup */
.phone-col{display:grid;place-items:center;padding-top:40px}
.phone{position:relative;width:min(300px, 78vw);aspect-ratio:300/440;border-radius:44px;background:#1B1F3B;padding:12px;box-shadow:0 14px 0 rgba(27,31,59,.2);transform:rotate(3deg)}
.screen{height:100%;border-radius:33px;background:#FFF8EC;padding:16px 12px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;color:#1B1F3B}
.ptabs{display:flex;gap:6px}
.ptab{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 5px;border-radius:999px;border:3px solid var(--c);font:600 13px/1 var(--f-kid);background:#fff}
.ptab.on{background:var(--c);color:#fff}
.ptab u{text-decoration:none;font-family:var(--emo);font-size:12px;width:20px;height:20px;border-radius:50%;background:#fff;display:grid;place-items:center}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pcard{border-radius:14px;border:2px solid #1B1F3B;background:var(--kc);padding:3px 3px 1px;box-shadow:0 3px 0 rgba(27,31,59,.85);text-align:center;color:#fff;font:600 15px/1.3 var(--f-kid)}
.pcard .p{aspect-ratio:1/.9;border-radius:10px;background:#fff;display:grid;place-items:center;font-family:var(--emo);font-size:clamp(40px, 13vw, 54px);line-height:1}
.pcard .p svg{width:76%;height:76%}
.pcard.hit{box-shadow:0 0 0 4px #FFB800, 0 3px 0 rgba(27,31,59,.85)}
.psay{margin-top:auto;border:3px solid #1B1F3B;border-radius:16px;background:#fff;padding:6px 8px;display:flex;align-items:center;gap:8px;font:600 16px/1 var(--f-kid)}
.psay u{text-decoration:none;font-family:var(--emo);font-size:20px}
.psay b{margin-left:auto;width:32px;height:32px;border-radius:50%;background:#6C3BEB;display:grid;place-items:center}
.bubble{position:absolute;top:-30px;left:-56px;background:#fff;color:#1B1F3B;border:3px solid #1B1F3B;border-radius:22px;padding:10px 18px;font:700 clamp(20px, 5vw, 26px)/1 var(--f-kid);box-shadow:0 5px 0 rgba(27,31,59,.85);transform:rotate(-7deg);white-space:nowrap}
.bubble::after{content:"";position:absolute;right:30px;bottom:-22px;width:24px;height:24px;background:#fff;border-right:3px solid #1B1F3B;border-bottom:3px solid #1B1F3B;transform:rotate(45deg)}

/* App section */
.app-sec{background:var(--surface);border-block:3px solid var(--line)}
.feats{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
@media (max-width:820px){.feats{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:520px){.feats{grid-template-columns:minmax(0,1fr)}}
.feat{display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;align-items:start;padding:20px;border-radius:22px;background:var(--bg);border:2px solid var(--line)}
.feat .ic{width:60px;height:60px;border-radius:18px;background:var(--c);display:grid;place-items:center;font-size:32px;border:3px solid rgba(27,31,59,.9);box-shadow:0 4px 0 rgba(27,31,59,.85)}
.feat h3{font-size:22px;margin-bottom:6px}
.feat p{color:var(--muted);font-size:16px;line-height:1.5}
.install{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px;border-radius:26px;background:var(--soft);border:2px dashed var(--line)}
.install ol{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
@media (max-width:760px){.install{grid-template-columns:minmax(0,1fr)}}

/* The road */
.road{position:relative;display:flex;flex-direction:column;gap:22px;max-width:880px}
.road::before{content:"";position:absolute;left:31px;top:40px;bottom:40px;border-left:5px dotted var(--line)}
.stop{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start}
.stop .num{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:700 28px/1 var(--f-kid);border:3px solid rgba(27,31,59,.9);box-shadow:0 4px 0 rgba(27,31,59,.85)}
.stop .num.dark{color:#3A2A00}
details.card{border-radius:24px;background:var(--surface);border:3px solid var(--line);overflow:hidden}
details.card[open]{border-color:var(--c)}
details.card summary{list-style:none;cursor:pointer;padding:18px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
details.card summary::-webkit-details-marker{display:none}
details.card summary h3{font-size:clamp(22px, 3.4vw, 27px)}
details.card summary p{color:var(--muted);font-size:16px;margin-top:4px}
details.card summary .chev{width:40px;height:40px;border-radius:50%;background:var(--soft);display:grid;place-items:center;transition:transform .2s}
details.card[open] summary .chev{transform:rotate(180deg)}
.card-body{padding:0 22px 24px;display:flex;flex-direction:column;gap:16px}
.card-body ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.week{padding:16px 18px;border-radius:18px;background:var(--soft);border-left:6px solid var(--c)}
.week b{display:block;font:700 15px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.week ul{list-style:none;padding:0}
.week li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px}
.week li::before{content:"";width:20px;height:20px;margin-top:4px;border-radius:6px;border:3px solid var(--c);background:var(--surface)}
.note{font-size:15px;color:var(--muted)}
.road-foot{margin-top:30px;max-width:880px;padding:18px 22px;border-radius:18px;background:var(--surface);border:2px solid var(--line);font-size:16px;color:var(--muted)}

/* Warnings */
.warn-sec{background:var(--soft);border-block:3px solid var(--line)}
.warn-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start}
@media (max-width:860px){.warn-grid{grid-template-columns:minmax(0,1fr)}}
.flags{display:flex;flex-direction:column;gap:12px}
.flag{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:20px;background:var(--surface);border:3px solid color-mix(in srgb, var(--k-red) 55%, var(--line))}
.flag i{width:46px;height:46px;border-radius:14px;background:var(--k-red);color:#fff;display:grid;place-items:center;font:700 26px/1 var(--f-kid);font-style:normal;border:3px solid rgba(27,31,59,.9)}
.flag strong{display:block;font:600 20px/1.25 var(--f-kid);margin-bottom:2px}
.flag span{color:var(--muted);font-size:16px}
.ask{padding:24px;border-radius:24px;background:var(--surface);border:3px solid var(--k-green)}
.ask h3{margin-bottom:14px}
.ask ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:10px}
.ask .note{margin-top:14px}

/* Story */
.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px, 5vw, 64px);align-items:center}
@media (max-width:820px){.story{grid-template-columns:minmax(0,1fr)}}
.inf{display:inline-block;width:1.9em;height:auto;vertical-align:-.3em}
.story-art .inf{width:70%;vertical-align:0}
.story-art{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin:0 auto;border-radius:42% 58% 50% 50%/48% 44% 56% 52%;background:#FFFFFF;display:grid;place-items:center;border:3px solid rgba(27,31,59,.9);box-shadow:0 8px 0 rgba(27,31,59,.85)}
.story-art .emo{font-size:clamp(90px, 18vw, 150px);line-height:1}
.story-art .tag{position:absolute;bottom:8%;right:-4%;background:var(--surface);border:3px solid rgba(27,31,59,.9);border-radius:18px;padding:10px 16px;font:600 18px/1.2 var(--f-kid);box-shadow:var(--hard);transform:rotate(-4deg)}
.story blockquote{margin:0;display:flex;flex-direction:column;gap:18px;font-size:clamp(19px, 2.3vw, 22px);line-height:1.6}
.story blockquote p:first-child{font:600 clamp(26px, 3.6vw, 34px)/1.25 var(--f-kid)}
.story cite{font-style:normal;font:700 20px/1 var(--f-kid);color:var(--accent)}

/* Join */
.join{background:var(--accent);color:#fff}
.join .eyebrow{color:#FFD25E}
.join .lede{color:#E9E1FF}
.ways{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
@media (max-width:860px){.ways{grid-template-columns:minmax(0,1fr)}}
.way{padding:24px;border-radius:24px;background:#fff;color:#1B1F3B;border:3px solid #1B1F3B;box-shadow:0 6px 0 rgba(27,31,59,.85);display:flex;flex-direction:column;gap:10px}
.way .emo{font-size:40px;line-height:1}
.way p{color:#4E5373;font-size:16px}
.contact{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;font:600 20px var(--f-kid)}
.mail{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#1B1F3B;border-radius:999px;padding:12px 22px;border:3px solid #1B1F3B;box-shadow:0 5px 0 rgba(27,31,59,.85);font:700 22px/1 var(--f-kid);text-decoration:none;user-select:all}

/* Footer */
footer{padding-block:48px calc(48px + env(safe-area-inset-bottom,0px));font-size:15px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
@media (max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr)}}
footer h4{margin:0 0 8px;font:600 18px var(--f-kid);color:var(--ink)}
footer p + p{margin-top:10px}
.made{grid-column:1/-1;padding-top:24px;border-top:2px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.btn,details.card summary .chev{transition:none}}

/* Two parts: the app (for the child) and everything else (guide and community, for the family) */
.nav .parts{display:flex;gap:6px;list-style:none;margin:0 0 0 auto;padding:4px;border-radius:999px;background:var(--surface);border:2px solid var(--line)}
.nav .parts a{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;text-decoration:none;font:600 16px/1 var(--f-kid);color:var(--muted);white-space:nowrap}
.nav .parts a:hover{color:var(--ink)}
.nav .parts li[class^="part-"] a[aria-current="true"]{background:var(--pc);color:#fff}
.nav .parts .emo{font-size:17px}
.nav .parts .short{display:none}
@media (max-width:900px){.nav .parts{display:flex}.nav .btn{margin-left:0}}
@media (max-width:640px){.nav .wrap{gap:10px}.nav .parts .long{display:none}.nav .parts .short{display:inline}.nav .parts a{padding:9px 12px}.nav .btn{display:none}}

.doors{padding-block:0 clamp(48px, 8vw, 80px)}
.doors .wrap{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:18px}
@media (max-width:760px){.doors .wrap{grid-template-columns:minmax(0,1fr)}}
.door{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:28px;background:var(--surface);border:3px solid var(--pc);box-shadow:0 7px 0 color-mix(in srgb, var(--pc) 70%, #1B1F3B);text-decoration:none;color:var(--ink);transition:transform .12s}
.door:hover{transform:translateY(-3px)}
.door .tag{align-self:flex-start;font:700 13px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--pc);padding:7px 12px;border-radius:999px}
.door .ic{font-size:44px;line-height:1}
.door h2{font-size:clamp(28px, 4.4vw, 40px)}
.door p{color:var(--muted);font-size:17px}
.door ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.door li{font:600 15px/1 var(--f-kid);padding:8px 12px;border-radius:999px;background:var(--soft);border:2px solid var(--line)}
.door .go{margin-top:auto;font:700 19px/1 var(--f-kid);color:var(--pc)}
.part-app{--pc:#6C3BEB}
.part-guia{--pc:#0E8A43}

.part-band{background:var(--pc);color:#fff;padding-block:clamp(36px, 6vw, 56px);border-block:3px solid rgba(27,31,59,.9)}
.part-band .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.part-band .ic{width:84px;height:84px;border-radius:26px;background:#fff;display:grid;place-items:center;font-size:46px;border:3px solid rgba(27,31,59,.9);box-shadow:0 5px 0 rgba(27,31,59,.85)}
.part-band .kicker{font:700 14px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.part-band h2{margin-top:8px;font-size:clamp(32px, 5.4vw, 50px)}
.part-band p{margin-top:8px;font-size:clamp(17px, 2.2vw, 20px);opacity:.95;max-width:60ch}
.part-band nav{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.part-band nav a{font:600 16px/1 var(--f-kid);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.6);color:#fff;text-decoration:none}
.part-band nav a:hover{background:rgba(255,255,255,.3)}
@media (max-width:560px){.part-band .wrap{grid-template-columns:minmax(0,1fr)}.part-band .ic{width:64px;height:64px;font-size:34px;border-radius:20px}}
.part-band + .app-sec{border-top:0}

/* Monterrey: what families share, grouped by theme */
.mty-sec{background:var(--surface);border-block:3px solid var(--line)}
.voices{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px;margin-bottom:clamp(32px, 5vw, 48px)}
@media (max-width:980px){.voices{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:520px){.voices{grid-template-columns:minmax(0,1fr)}}
.voice{position:relative;margin:0;padding:18px 20px;border-radius:22px;background:var(--bg);border:3px solid var(--c);font:600 19px/1.35 var(--f-kid)}
.voice::before{content:"“";display:block;font:700 44px/.6 var(--f-kid);color:var(--c);margin-bottom:6px}
.themes{display:flex;flex-direction:column;gap:14px;max-width:880px}
.themes .ico{font-family:var(--emo);font-size:28px;margin-right:10px}
.themes summary h3{display:flex;align-items:center}
.themes .card-body h4{margin:0;font:700 15px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.needs{margin-top:clamp(36px, 6vw, 56px);padding:26px;border-radius:26px;background:var(--soft);border:2px dashed var(--line)}
.needs h3{margin-bottom:6px}
.needs > p{color:var(--muted);font-size:17px}
.needs ol{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;counter-reset:n}
@media (max-width:700px){.needs ol{grid-template-columns:minmax(0,1fr)}}
.needs li{counter-increment:n;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:18px;background:var(--surface);border:2px solid var(--line);font-size:17px}
.needs li::before{content:counter(n);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--k-green);color:#fff;font:700 20px/1 var(--f-kid);border:3px solid rgba(27,31,59,.9)}
.needs .btns{margin-top:20px}
.src{margin-top:24px;font-size:15px;color:var(--muted);max-width:880px}

/* ---------- Guide hub on the home page ---------- */
.hub{padding-block:clamp(40px, 7vw, 72px)}
.tiles{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:minmax(0,1fr)}}
.tile{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:start;padding:20px;border-radius:24px;background:var(--surface);border:3px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .12s, border-color .12s}
.tile:hover{transform:translateY(-2px);border-color:var(--c)}
.tile .ic{width:58px;height:58px;border-radius:18px;background:var(--c);display:grid;place-items:center;font-family:var(--emo);font-size:30px;border:3px solid rgba(27,31,59,.9);box-shadow:0 4px 0 rgba(27,31,59,.85)}
.tile h3{font-size:23px;margin-bottom:4px}
.tile p{color:var(--muted);font-size:16px;line-height:1.45}
.tile .go{display:block;margin-top:8px;font:700 16px/1 var(--f-kid);color:var(--accent)}
.tile.first{grid-column:1/-1;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;border-color:var(--c)}
.tile.first .ic{width:72px;height:72px;font-size:38px;border-radius:22px}
.tile.first h3{font-size:28px}
@media (max-width:560px){.tile.first{grid-template-columns:58px minmax(0,1fr)}.tile.first .ic{width:58px;height:58px;font-size:30px}.tile.first .btn{grid-column:1/-1}}

/* ---------- Inner pages ---------- */
.pg-hero{background:var(--pc);color:#fff;padding-block:clamp(28px, 5vw, 56px) clamp(32px, 5vw, 60px);border-bottom:3px solid rgba(27,31,59,.9)}
.pg-hero .crumb{display:inline-flex;align-items:center;gap:6px;font:600 16px/1 var(--f-kid);color:#fff;text-decoration:none;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55)}
.pg-hero .crumb:hover{background:rgba(255,255,255,.3)}
.pg-hero .kicker{margin-top:22px;font:700 14px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.pg-hero h1{font-size:clamp(38px, 7vw, 68px);margin-block:10px 14px;letter-spacing:-.02em}
.pg-hero .lede{color:#fff;opacity:.95}
.pg-hero .lede mark{background:linear-gradient(transparent 58%, rgba(255,210,94,.55) 58%)}
.pg-sec{padding-block:clamp(44px, 7vw, 80px)}
.pg-sec.alt{background:var(--surface);border-block:3px solid var(--line)}
.pg-sec .sec-head h2{font-size:clamp(30px, 5vw, 46px)}
.h2s{font-size:clamp(26px, 4vw, 34px);margin-bottom:14px}
.note{font-size:16px;color:var(--muted)}

.vs{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
@media (max-width:700px){.vs{grid-template-columns:minmax(0,1fr)}}
.vs-col{padding:22px;border-radius:24px;background:var(--surface);border:3px solid var(--c)}
.vs-col h3{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--c)}
.vs-col h3 .emo{font-size:32px}
.vs-col ul,.dodont ul,.ticks{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.vs-foot{margin-top:18px;padding:18px 20px;border-radius:20px;background:var(--soft);border:2px dashed var(--line);font-size:18px}
.dodont{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
@media (max-width:700px){.dodont{grid-template-columns:minmax(0,1fr)}}
.dodont > div{padding:22px;border-radius:24px;background:var(--bg);border:3px solid var(--c)}
.dodont .do{--c:var(--k-green)} .dodont .dont{--c:var(--k-red)}
.dodont h3{margin-bottom:12px}
.callout{margin-top:24px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 22px;border-radius:22px;background:var(--soft);border:2px solid var(--line);font-size:17px}
.callout > .emo{font-size:38px;line-height:1}
.callout h3{margin-bottom:6px}
.callout p{color:var(--muted)}
@media (max-width:700px){.callout{grid-template-columns:auto minmax(0,1fr)}.callout .btn{grid-column:1/-1;justify-self:start}}
.steps-n{margin:0 0 30px;padding-left:26px;display:flex;flex-direction:column;gap:10px;max-width:760px;font-size:18px}
.msg{padding:24px;border-radius:26px;background:var(--surface);border:3px solid var(--k-green);max-width:820px}
.msg h3{margin-bottom:6px}
.msg-fields{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.fld{display:flex;flex-direction:column;gap:6px;font:700 15px var(--f-body);color:var(--muted)}
.fld input,.fld select,.msg textarea{font:400 17px/1.5 var(--f-body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:10px 14px}
.msg textarea{width:100%;resize:vertical;margin-bottom:14px}
.ideas{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
@media (max-width:900px){.ideas{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.ideas{grid-template-columns:minmax(0,1fr)}}
.idea{padding:20px;border-radius:22px;background:var(--bg);border:2px solid var(--line)}
.idea > .emo{font-size:34px;line-height:1;display:block;margin-bottom:10px}
.idea h3{font-size:22px;margin-bottom:6px}
.idea p{color:var(--muted);font-size:16px;line-height:1.5}
.flow{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;counter-reset:f}
@media (max-width:760px){.flow{grid-template-columns:minmax(0,1fr)}}
.flow li{counter-increment:f;position:relative;padding:22px;border-radius:24px;background:var(--surface);border:3px solid var(--line)}
.flow li::before{content:counter(f);position:absolute;top:16px;right:18px;font:700 34px/1 var(--f-kid);color:var(--line)}
.flow .emo{font-size:36px;line-height:1;display:block;margin-bottom:10px}
.flow h3{font-size:22px;margin-bottom:6px}
.flow p{color:var(--muted);font-size:16px}
.join-cards{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:18px}
@media (max-width:760px){.join-cards{grid-template-columns:minmax(0,1fr)}}
.jc{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:26px;border-radius:26px;background:var(--bg);border:3px solid var(--c);box-shadow:0 6px 0 color-mix(in srgb, var(--c) 70%, #1B1F3B)}
.jc > .emo{font-size:42px;line-height:1}
.jc p{color:var(--muted);font-size:17px}
.jc .btn{margin-top:auto;background:var(--c);color:#fff}
.two-col{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(24px, 4vw, 48px)}
@media (max-width:760px){.two-col{grid-template-columns:minmax(0,1fr)}}
.ticks{margin-bottom:14px}

/* Directory */
.dir-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:18px 20px;border-radius:20px;background:var(--soft);border:2px dashed var(--line);font-size:16px;margin-bottom:22px}
.dir-note > .emo{font-size:32px;line-height:1}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.filters button{font:600 16px/1 var(--f-kid);padding:11px 16px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.filters button.on{background:var(--k-green);border-color:var(--k-green);color:#fff}
.places{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
@media (max-width:760px){.places{grid-template-columns:minmax(0,1fr)}}
.place{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:22px;background:var(--surface);border:2px solid var(--line)}
.place[hidden]{display:none}
.pl-top{display:flex;flex-wrap:wrap;gap:6px}
.badge{font:700 13px/1 var(--f-body);padding:6px 10px;border-radius:999px;background:var(--soft);color:var(--muted);border:1.5px solid var(--line)}
.badge.free{background:var(--k-green);color:#fff;border-color:var(--k-green)}
.badge.fee{background:var(--k-blue);color:#fff;border-color:var(--k-blue)}
.badge.low{background:var(--k-orange);color:#fff;border-color:var(--k-orange)}
.place h3{font-size:22px}
.place p{font-size:16px;color:var(--muted)}
.place dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:15px}
.place dt{font-weight:700}
.place dd{margin:0}
.place .src{margin-top:auto;font-size:14px;color:var(--muted)}
.callout.big{grid-template-columns:auto minmax(0,1fr) auto}

/* What's next */
.next{padding-block:clamp(40px, 6vw, 64px);background:var(--soft);border-top:3px solid var(--line)}
.next h2{font-size:clamp(28px, 4.5vw, 40px);margin-bottom:20px}
.next .tiles{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:900px){.next .tiles{grid-template-columns:minmax(0,1fr)}}

/* El camino: step index, fact boxes, report glossary, sources */
.step-index{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.step-index a{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--f-kid);padding:8px 14px 8px 8px;border-radius:999px;background:var(--surface);border:2px solid var(--line);text-decoration:none}
.step-index a:hover{border-color:var(--c)}
.step-index b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:700 15px/1 var(--f-kid)}
.road .card-body h4{margin:6px 0 0;font:700 15px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts{padding:16px 18px;border-radius:18px;background:var(--bg);border:3px solid var(--c);display:flex;flex-direction:column;gap:8px}
.facts > b{font:700 18px/1.2 var(--f-kid);color:var(--c)}
.facts ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.mini-steps{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:6px}
details.mini{border-radius:18px;border:2px solid var(--line);background:var(--bg)}
details.mini summary{cursor:pointer;padding:14px 18px;font:600 19px/1.2 var(--f-kid);list-style:none;display:flex;align-items:center;gap:10px}
details.mini summary::-webkit-details-marker{display:none}
details.mini summary::after{content:"⌄";margin-left:auto;transition:transform .2s}
details.mini[open] summary::after{transform:rotate(180deg)}
.mini-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px}
.mini-body ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.gloss{margin:0;display:flex;flex-direction:column;gap:10px}
.gloss dt{font-weight:700}
.gloss dd{margin:2px 0 0;color:var(--muted);font-size:16px}
details.sources{margin-top:30px;max-width:880px;padding:16px 20px;border-radius:18px;background:var(--surface);border:2px solid var(--line);font-size:16px}
details.sources summary{cursor:pointer;font:600 18px var(--f-kid)}
details.sources ul{margin:12px 0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.danger-list{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
@media (max-width:760px){.danger-list{grid-template-columns:minmax(0,1fr)}}
.dl-item{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:var(--surface);border:2px solid var(--line);border-left:8px solid var(--k-orange);font-size:16px}
.dl-item.bad{border-left-color:var(--k-red)}
.dl-item > b{font:600 19px/1.2 var(--f-kid)}
.dl-item span{color:var(--muted)}
@media (max-width:560px){
  .road{gap:16px}
  .road::before{left:19px}
  .stop{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .stop .num{width:40px;height:40px;font-size:20px}
  details.card summary{padding:16px}
  .card-body{padding:0 16px 20px}
  .mini-body{padding:0 14px 16px}
}

/* Our story page */
.story-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px, 5vw, 56px);align-items:start}
@media (max-width:900px){.story-page{grid-template-columns:minmax(0,1fr)}}
.tale{max-width:680px;font-size:clamp(18px, 2.1vw, 20px);line-height:1.75}
.tale h2{font-size:clamp(26px, 3.6vw, 32px);margin:34px 0 10px;color:var(--accent)}
.tale h2:first-child{margin-top:0}
.tale p + p{margin-top:14px}
.tale em{font-style:italic}
.pull{margin:22px 0;padding:6px 0 6px 20px;border-left:6px solid var(--k-blue);font:600 clamp(24px, 3.4vw, 30px)/1.3 var(--f-kid)}
.tale .sign{margin-top:28px;font:700 22px/1 var(--f-kid);color:var(--accent)}
.learned{position:sticky;top:96px;padding:22px;border-radius:24px;background:var(--surface);border:3px solid var(--k-green)}
@media (max-width:900px){.learned{position:static}}
.learned h3{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.learned ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px;font-size:16px}
.learned a{display:inline-block;margin-top:4px;font-weight:700;color:var(--accent)}
.thanks{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
@media (max-width:900px){.thanks{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.thanks{grid-template-columns:minmax(0,1fr)}}
.thank{padding:22px;border-radius:24px;background:var(--bg);border:3px solid var(--c)}
.thank > .emo{font-size:36px;line-height:1;display:block;margin-bottom:10px}
.thank h3{font-size:22px;margin-bottom:6px;color:var(--c)}
.thank p{color:var(--muted);font-size:16px}
.thank .who{font:700 15px/1.3 var(--f-body);color:var(--ink);margin:-2px 0 8px}
.shout{margin:20px 0 6px !important;padding:22px 24px;border-radius:24px;background:linear-gradient(90deg,#E8323C,#F26A00,#FFC915,#12A150,#2D7FF9,#8B4DFF);color:#fff;font:700 clamp(28px, 4.6vw, 40px)/1.15 var(--f-kid);text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.25);box-shadow:0 6px 0 rgba(27,31,59,.85);border:3px solid rgba(27,31,59,.9)}