/* AyudaVE — one stylesheet for every page. Brand tokens live here only. */
:root{
  --crema:#FBF6EC; --crema2:#F4ECDB; --tinta:#1C2541; --tinta-soft:#4A5373;
  --sol:#F7C948; --cielo:#DDE9F8; --guayaba:#E8665A; --guayaba-txt:#B8402F;
  --ok-bg:#DFF3E3; --ok-tx:#1F6B3A; --warn-bg:#FCEFC0; --warn-tx:#7A4A00; --line:#E6DECB;
  --display:'Fraunces',Georgia,serif; --body:'Figtree',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 17px/1.5 var(--body)}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.wrap{width:100%;max-width:720px;margin:0 auto;padding-inline:20px}
.wrap.wide{max-width:720px}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.025em;font-variation-settings:'SOFT' 100,'opsz' 144}
mark{background:linear-gradient(transparent 62%,var(--sol) 62% 92%,transparent 92%);color:inherit;padding:0 2px}

/* header / footer (shared) */
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px}
.brand{display:flex;align-items:center;gap:8px}
.wordmark{font:600 24px var(--display);letter-spacing:-.02em;font-variation-settings:'SOFT' 100,'opsz' 72}
.wordmark b{color:var(--guayaba-txt);font-weight:600}
.nav{display:flex;align-items:center;gap:6px 18px;font-size:15px;font-weight:600;color:var(--tinta-soft)}
.nav a:hover{color:var(--guayaba-txt)}
.nav a:nth-child(2){display:none}
@media(min-width:560px){.nav a:nth-child(2){display:inline}}
.lang{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:2px}
.lang button{border:0;background:none;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700;cursor:pointer;color:var(--tinta-soft)}
.lang button.on{background:var(--tinta);color:var(--crema)}
.site-footer{margin-top:56px;padding-bottom:40px;font-size:14px;color:var(--tinta-soft)}
.foot{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:20px;border-top:1.5px solid var(--line)}
.foot a:hover{color:var(--guayaba-txt)}
.fine{margin-top:12px;font-size:13px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:18px;border:2px solid transparent;transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(28,37,65,.14)}
.btn-dark{background:var(--tinta);color:var(--crema)}
.btn-sun{background:var(--sol);color:var(--tinta)}
.btn-line{background:#fff;border-color:var(--tinta);color:var(--tinta)}
.btn-sm{min-height:46px;font-size:16px;padding:0 22px}

/* home */
.screen{padding-top:8px}
.hero{display:flex;flex-direction:column;gap:28px;padding:20px 0 48px}
.eyebrow{align-self:flex-start;background:var(--cielo);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hero h1{font-size:clamp(38px,9vw,64px);line-height:1.04}
.hero .sub{font-size:18px;color:var(--tinta-soft)}
.criteria{background:var(--sol);border-radius:32px;padding:22px;display:flex;flex-direction:column;gap:12px}
.criterion{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.62);border-radius:20px;padding:14px 16px;font-weight:700;font-size:18px;line-height:1.25}
.criterion i{width:40px;height:40px;border-radius:50%;background:var(--tinta);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.band{background:var(--tinta);color:var(--crema);border-radius:36px;padding:32px 24px}
.band-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:16px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sol)}
.draft{font-size:11.5px;letter-spacing:0;text-transform:none;border:1.5px dashed var(--sol);border-radius:999px;padding:2px 10px}
.src{font-size:11.5px;letter-spacing:0;text-transform:none;border:1.5px solid rgba(247,201,72,.5);border-radius:999px;padding:2px 10px}
.stat{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1.5px solid rgba(251,246,236,.16)}
.stat b{white-space:nowrap;font:600 clamp(30px,9vw,54px)/1 var(--display);letter-spacing:-.03em;font-variation-settings:'SOFT' 100,'opsz' 144}
.stat:nth-child(3) b{color:var(--sol)}
.stat span{font-size:15px;color:#D9DCE8;text-align:right;max-width:150px}
.steps{display:flex;flex-direction:column;gap:12px}
.step{display:flex;align-items:center;gap:16px;background:#fff;border-radius:24px;padding:16px 20px;font-weight:600;font-size:18px}
.step i{font:600 22px var(--display);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-style:normal}
.step:nth-child(1) i{background:var(--cielo)}.step:nth-child(2) i{background:var(--warn-bg)}.step:nth-child(3) i{background:#FBDDD7}
.section{display:flex;flex-direction:column;gap:24px;padding-top:56px}
.section h2{font-size:clamp(30px,8vw,46px);line-height:1.08}
.dir-card{background:var(--cielo);border-radius:36px;padding:32px 24px;display:flex;flex-direction:column;gap:20px}
.dc-l,.dc-r{display:contents}
.dir-card h2{font-size:clamp(28px,7vw,40px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;min-height:40px}
.chip.sun{background:var(--sol)}
.chip.on{background:var(--tinta);color:var(--crema)}
.meter{display:flex;height:12px;border-radius:999px;overflow:hidden;background:#fff}
.meter i{display:block;height:100%}
.meter .v{background:#4CAF50}.meter .p{background:#E8A020}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:600}
.legend .lg::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:#4CAF50}
.legend .lg-p::before{background:#E8A020}

/* directory + cards */
.page-head{display:flex;flex-direction:column;gap:12px;padding:16px 0 20px}
.page-head h1{font-size:clamp(34px,8vw,52px);line-height:1.05}
.count{font-size:15px;color:var(--tinta-soft);font-weight:600}
.filters{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}
.filters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
.filters .chips::-webkit-scrollbar{display:none}
.filters .chip{flex-shrink:0;border-color:var(--line);background:#fff}
.filters .chip.on{background:var(--tinta);border-color:var(--tinta)}
.orgs{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.orgs{grid-template-columns:1fr 1fr}}
.org{background:#fff;border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:12px}
.org[hidden]{display:none}
.org-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.org-name{font:600 22px/1.2 var(--display);letter-spacing:-.01em;font-variation-settings:'SOFT' 100,'opsz' 48}
.status{flex-shrink:0;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.status.verified{background:var(--ok-bg);color:var(--ok-tx)}
.status.partial{background:var(--warn-bg);color:var(--warn-tx)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--tinta-soft);font-weight:500}
.backing{font-size:15px;color:var(--tinta-soft)}
.backing strong{color:var(--tinta)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-block;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;line-height:1.3}
.pill.ok{background:var(--ok-bg);color:var(--ok-tx)}
.pill.warn{background:var(--warn-bg);color:var(--warn-tx)}
.pill.dim{background:var(--crema2);color:var(--tinta-soft)}
.org details{font-size:15px}
.org summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}
.org details p{padding-top:6px;color:var(--tinta)}
.org details ul{padding-top:8px;display:flex;flex-direction:column;gap:6px;color:var(--tinta-soft)}
.org details li b{color:var(--tinta)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:auto;padding-top:4px}
.actions .alt{font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--tinta-soft)}
.from{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--tinta-soft)}
.from a{background:var(--crema2);border-radius:999px;padding:5px 12px;color:var(--tinta)}
.from a:hover{background:var(--sol)}

/* text pages */
.prose{display:flex;flex-direction:column;gap:28px;padding-bottom:8px}
.prose h2{font:600 24px/1.2 var(--display);font-variation-settings:'SOFT' 100,'opsz' 48;margin-bottom:10px}
.prose p,.prose li{color:var(--tinta-soft);font-size:16.5px}
.prose p+p,.prose ul{margin-top:10px}
.prose ul{padding-left:20px;list-style:disc}

/* methodology */
.mlist{display:flex;flex-direction:column;gap:12px}
.mcard{display:flex;align-items:flex-start;gap:16px;background:#fff;border-radius:24px;padding:18px 20px}
.mcard i{width:44px;height:44px;border-radius:50%;background:var(--tinta);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mcard h3{font:600 20px/1.2 var(--display);font-variation-settings:'SOFT' 100,'opsz' 48;margin-bottom:4px}
.mcard p{font-size:15.5px;color:var(--tinta-soft)}
.mstatus{display:flex;flex-direction:column;gap:10px}
.mst{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--crema2);border-radius:24px;padding:16px 20px}
.mst p{font-size:15.5px;color:var(--tinta)}
.mst .status{font-size:13px}
.note{display:flex;align-items:flex-start;gap:14px;background:var(--cielo);border-radius:28px;padding:20px 22px}
.note i{width:40px;height:40px;border-radius:50%;background:var(--tinta);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.note p{font-size:15.5px;color:var(--tinta)}
.note p strong{font-weight:700}
.note.warn{background:var(--warn-bg)}
.prose section+section{margin-top:0}

/* test */
.test{padding-top:16px;display:flex;flex-direction:column;gap:20px}
.dots{display:flex;gap:8px}
.dots i{height:8px;flex:1;border-radius:999px;background:var(--line)}
.dots i.on{background:var(--tinta)}
.q{display:flex;flex-direction:column;gap:22px}
.q[hidden],.pick[hidden],.back[hidden],.dots[hidden]{display:none}
.q h1{font-size:clamp(34px,8.5vw,52px);line-height:1.05}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{border:2px solid var(--tinta);background:#fff;border-radius:999px;padding:14px 22px;font-weight:700;font-size:18px;cursor:pointer;min-height:56px;transition:transform .15s,background .15s}
.opt:hover{background:var(--sol);transform:translateY(-2px)}
.opts.one{flex-direction:column}
.opts.one .opt{border-radius:24px;text-align:left}
.back{align-self:flex-start;border:0;background:none;font-weight:700;font-size:16px;color:var(--tinta-soft);cursor:pointer;padding:8px 0;min-height:44px}
#results{display:flex;flex-direction:column;gap:14px}
.pick{background:#fff;border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:12px}
.pick.top{background:var(--sol)}
.pick.top .backing{color:var(--tinta)}
.pick.top .btn-sun{background:var(--tinta);color:var(--crema)}
.pick-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-soft)}
.pick.top .pick-label{color:var(--tinta)}
.pick-note{font-size:14px;color:var(--tinta-soft)}
.pick.top .pick-note{color:var(--tinta)}
.pick-note[hidden]{display:none}

/* ===== DESKTOP (>= 900px only). Nothing above this line changes for phones. ===== */
@media(min-width:900px){
  body{font-size:18px}
  .wrap.wide{max-width:1240px;padding-inline:56px}
  .site-header .bar{padding-block:30px}
  .wordmark{font-size:28px}
  .nav{font-size:16px;gap:6px 32px}
  .lang button{padding:5px 12px}

  /* buttons: bigger target, arrow nudges on hover */
  .btn{min-height:64px;padding:0 36px;font-size:19px}
  .btn svg{transition:transform .2s}
  .btn:hover svg{transform:translateX(4px)}
  .btn-sm{min-height:48px;font-size:16px;padding:0 24px}

  /* hero: headline left, yellow criteria panel right */
  .hero{display:grid;grid-template-columns:1.15fr .85fr;column-gap:96px;row-gap:28px;align-items:center;padding:64px 0 112px}
  .hero>*{grid-column:1;justify-self:start}
  .hero>.sub{justify-self:stretch}
  .hero .criteria{grid-column:2;grid-row:1/6;justify-self:stretch;gap:0;padding:20px 40px;border-radius:48px;box-shadow:16px 16px 0 var(--tinta)}
  .hero h1{font-size:clamp(60px,6vw,92px);line-height:1}
  .hero .sub{font-size:22px;max-width:480px}
  .hero .btn{min-width:340px}
  .criterion{background:none;border-radius:0;padding:30px 0;font-size:22px;gap:20px;border-bottom:2px solid rgba(28,37,65,.16)}
  .criterion:last-child{border-bottom:0}
  .criterion i{width:56px;height:56px}
  .criterion i svg{width:26px;height:26px}

  /* stats: full-bleed navy band, three columns */
  .band{border-radius:0;padding:80px 0;box-shadow:0 0 0 100vmax var(--tinta);clip-path:inset(0 -100vmax)}
  .band-top{padding-bottom:40px;font-size:14px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr)}
  .stat{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;padding:6px 48px;border-top:0;border-left:2px solid rgba(251,246,236,.18)}
  .stat:first-child{padding-left:0;border-left:0}
  .stat b{font-size:clamp(48px,5.2vw,80px)}
  .stat span{text-align:left;max-width:260px;font-size:19px}

  /* test teaser: heading + button left, timeline right */
  .section{padding-top:128px}
  .section.split{display:grid;grid-template-columns:1fr 1fr;column-gap:96px;row-gap:32px;align-items:center}
  .split h2{grid-column:1;grid-row:1;align-self:end;font-size:clamp(46px,4.8vw,68px);line-height:1.02}
  .split>.btn{grid-column:1;grid-row:2;align-self:start;justify-self:start;min-width:340px}
  .split .steps{grid-column:2;grid-row:1/3;gap:0;position:relative}
  .split .steps::before{content:"";position:absolute;left:31px;top:44px;bottom:44px;width:3px;background:var(--tinta);opacity:.18}
  .step{background:none;border-radius:0;padding:22px 0;font-size:24px;gap:28px;position:relative}
  .step i{width:64px;height:64px;font-size:30px;box-shadow:0 0 0 8px var(--crema)}

  /* directory teaser: full-bleed sky band */
  .dir-card{display:grid;grid-template-columns:1.2fr .8fr;column-gap:96px;align-items:center;padding:88px 0;border-radius:0;box-shadow:0 0 0 100vmax var(--cielo);clip-path:inset(0 -100vmax)}
  .dir-card{position:relative}
  .section:has(.dir-card){padding-top:128px}
  .dc-l,.dc-r{display:flex;flex-direction:column;gap:28px}
  .dir-card h2{font-size:clamp(44px,4.4vw,64px);line-height:1.02}
  .dir-card .chip{font-size:17px;padding:10px 20px;min-height:46px}
  .dir-card .chip:hover{background:var(--sol)}
  .dir-card .meter{height:18px}
  .dir-card .legend{font-size:16px}

  .site-footer{margin-top:0;padding-top:16px;padding-bottom:48px}
  .foot{font-size:15px;gap:8px 36px;border-top:0;background:linear-gradient(var(--line),var(--line)) center top/calc(100% - 112px) 1.5px no-repeat}

  /* directory: editorial rows instead of a grid of boxes */
  .page-head{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:32px 0}
  .page-head h1{font-size:clamp(52px,5vw,76px)}
  .filters{flex-direction:row;gap:40px;align-items:flex-start;flex-wrap:wrap;padding-bottom:36px}
  .filters .chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .orgs,.orgs{grid-template-columns:1fr;gap:0;border-top:2px solid var(--tinta)}
  .org{display:grid;grid-template-columns:300px 1fr 230px;column-gap:56px;row-gap:12px;align-items:start;background:none;border-radius:0;padding:36px 0;border-bottom:1.5px solid var(--line);transition:background .2s}
  .org:hover{background:rgba(255,255,255,.55)}
  .org .org-top{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:10px}
  .org .meta{grid-column:1;grid-row:2/4}
  .org .backing{grid-column:2;grid-row:1;font-size:17px}
  .org .pills{grid-column:2;grid-row:2}
  .org details{grid-column:2;grid-row:3;font-size:16px}
  .org .actions{grid-column:3;grid-row:1/3;margin-top:0;flex-direction:column;align-items:stretch;gap:12px}
  .org .actions .btn{width:100%}
  .org .actions .alt{text-align:center}
  .org .from{grid-column:3;grid-row:3}
  .org-name{font-size:28px}

  /* test */
  .test{padding-top:56px;max-width:1040px}
  .q{gap:34px}
  .q h1{font-size:clamp(54px,5vw,76px)}
  .opt{font-size:20px;padding:16px 30px;min-height:64px}
  .opts.one{max-width:720px}
  .test .btn{align-self:flex-start;min-width:320px}
  #results{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .pick{padding:32px;border-radius:36px}
  .pick.top{grid-column:1/-1;padding:48px;box-shadow:10px 10px 0 var(--tinta);margin-bottom:12px}
  .pick.top .org-name{font-size:38px}
  .pick.top .backing{font-size:19px;max-width:720px}

  /* methodology */
  .meth .prose{gap:44px}
  .mlist{flex-direction:row;gap:24px}
  .mcard{flex:1;flex-direction:column;gap:20px;padding:34px;border-radius:36px}
  .mstatus{flex-direction:row;gap:24px}
  .mst{flex:1;padding:28px 32px;border-radius:32px}
  .note{padding:32px 36px;border-radius:36px}
  .meth .prose>section:not(.mlist):not(.mstatus):not(.note){max-width:760px}
  .meth .btn{align-self:flex-start;min-width:320px}
}