/* ===== OSCS design system ===== */

:root{
  --green:#639451; --green-deep:#2F5E3B; --green-deeper:#20472b; --green-deepest:#173420;
  --sage:#E9F1E7; --sage-2:#DCE8DB; --sage-3:#F4F8F2;
  --lime:#9CCB3B; --purple:#AD3D75; --ink:#1b2a20; --ink-soft:#586b5d; --paper:#ffffff; --line:rgba(27,42,32,.10);
  --r:20px; --r-lg:30px; --r-xl:40px; --r-sm:14px;
  --shadow:0 30px 60px -30px rgba(20,50,30,.35); --shadow-sm:0 16px 34px -20px rgba(20,50,30,.28);
  --maxw:1200px; --ease:cubic-bezier(.22,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* el header fijo mide ~77px: los destinos de ancla reservan su altura */
:target,section[id],[id^="faq"],#main,#apply,#programs,#involved,#accountability{scroll-margin-top:96px}
body{font-family:"Raleway",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:"Yantramanav",sans-serif;font-weight:700;line-height:1.06;letter-spacing:-.01em;text-transform:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{font-family:"Raleway";font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-deep);display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green-deep);opacity:.5}
.eyebrow.on-dark{color:var(--sage)}.eyebrow.on-dark::before{background:var(--lime);opacity:1}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:"Raleway";font-weight:700;font-size:.98rem;padding:.9rem 1.7rem;border-radius:100px;border:0;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s;will-change:transform}
.btn-green{background:var(--green-deep);color:#fff;box-shadow:0 14px 30px -14px rgba(47,94,59,.7)}
.btn-green:hover{background:var(--green-deeper);box-shadow:0 20px 38px -14px rgba(47,94,59,.8)}
.btn-ghost{background:transparent;border:1.6px solid var(--green-deep);color:var(--green-deep)}
.btn-ghost:hover{background:var(--green-deep);color:#fff}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost.on-dark:hover{background:#fff;color:var(--green-deep)}
.btn-white{background:#fff;color:var(--green-deep)}
.petal{position:absolute;pointer-events:none;opacity:.5}
svg.petal-mark{display:block}
.logo-img{height:42px;width:auto}
/* images filling placeholders */
.imgfill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* taller so subtle parallax never reveals a gap */
.hero-photo img,.visual img,.prog .ph img{height:112%;top:-6%}

header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s var(--ease)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.1rem 26px;max-width:var(--maxw);margin:0 auto;transition:padding .4s var(--ease)}
header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 8px 30px -22px rgba(20,50,30,.7)}
header.scrolled .nav{padding:.6rem 26px}
.navlinks{display:flex;align-items:center;gap:1.25rem;font-weight:600;font-size:.9rem}
.navlinks a{color:var(--ink-soft);transition:color .2s}.navlinks a:hover{color:var(--green-deep)}
.nav-cta{display:flex;align-items:center;gap:.7rem}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:24px;height:2.5px;background:var(--green-deep);border-radius:2px}

.hero{position:relative;background:linear-gradient(180deg,var(--sage) 0%,var(--sage-3) 100%);padding:140px 0 90px;overflow:hidden}
.hero .petal{opacity:.3}
.hero .p1{top:12%;right:8%;width:120px;color:var(--green);animation:sway 9s ease-in-out infinite}
.hero .p2{bottom:14%;left:4%;width:80px;color:var(--green-deep);animation:sway 11s ease-in-out infinite reverse}
@keyframes sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(20px) rotate(8deg)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;position:relative;z-index:3}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1;margin:1.1rem 0 1.2rem}
.hero h1 .accent{color:var(--green-deep)}
.hero p.lead{font-size:1.16rem;color:var(--ink-soft);max-width:510px}
.hero-btns{display:flex;gap:.8rem;margin-top:1.9rem;flex-wrap:wrap}
.trust{display:flex;gap:1.6rem;margin-top:2.3rem;flex-wrap:wrap}
.trust .t{display:flex;flex-direction:column}
.trust .t .n{font-family:"Yantramanav";font-weight:900;font-size:1.7rem;color:var(--green-deep);line-height:1}
.trust .t .l{font-size:.8rem;color:var(--ink-soft)}
.trust .divider{width:1px;background:var(--line)}
.hero-visual{position:relative}
.hero-photo{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;position:relative;box-shadow:var(--shadow);background:var(--sage-2)}
.chip{position:absolute;background:#fff;border-radius:var(--r);padding:.9rem 1.2rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:.7rem;z-index:4}
.chip .ic{width:42px;height:42px;border-radius:12px;background:var(--sage);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.chip .tx b{font-family:"Yantramanav";font-weight:900;font-size:1.1rem;color:var(--green-deep);display:block;line-height:1}
.chip .tx span{font-size:.76rem;color:var(--ink-soft)}
.chip.c1{left:-28px;top:22%}.chip.c2{right:-24px;bottom:12%}

section.block{padding:92px 0}
.center{text-align:center}
.section-head{max-width:680px;margin-bottom:3rem}
.section-head.center{margin-left:auto;margin-right:auto}
.section-head h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:.7rem 0 .6rem}
.section-head p{color:var(--ink-soft);font-size:1.05rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.visual{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;position:relative;box-shadow:var(--shadow);background:var(--sage-2)}
.split h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:.7rem 0 1rem}
.split p{color:var(--ink-soft);margin-bottom:1rem}
.split .note{font-size:.82rem;opacity:.7}
.mini-list{list-style:none;margin:1.2rem 0 1.6rem}
.mini-list li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.6rem;font-weight:500}
.mini-list .tick{color:var(--green);font-weight:900;margin-top:.1rem}

.progs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.prog{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.prog:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.prog .ph{aspect-ratio:16/11;position:relative;overflow:hidden;background:var(--sage-2)}
.prog .body{padding:1.7rem}
.prog h3{font-size:1.4rem;margin-bottom:.5rem}
.prog p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1rem}
.prog .meta{font-size:.8rem;font-weight:700;color:var(--green);letter-spacing:.02em;margin-bottom:.8rem}
.prog .lnk{color:var(--green-deep);font-weight:700;font-size:.92rem;display:inline-flex;gap:.4rem;transition:gap .25s}
.prog:hover .lnk{gap:.8rem}


/* animated tabs (framer-motion style, vanilla) */
.tabs{max-width:980px;margin:0 auto}
.tabbar{position:relative;display:flex;gap:.3rem;background:#fff;border:1px solid var(--line);border-radius:100px;padding:.4rem;box-shadow:var(--shadow-sm);width:max-content;max-width:100%;margin:0 auto 1.8rem;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab-indicator{position:absolute;top:.4rem;left:0;height:calc(100% - .8rem);background:var(--green-deep);border-radius:100px;z-index:0;transition:transform .55s var(--ease),width .55s var(--ease);box-shadow:0 8px 20px -8px rgba(47,94,59,.7)}
.tab-btn{position:relative;z-index:1;border:0;background:none;cursor:pointer;font-family:"Raleway";font-weight:700;font-size:.92rem;white-space:nowrap;color:var(--ink-soft);padding:.7rem 1.3rem;border-radius:100px;transition:color .35s}
.tab-btn.is-active{color:#fff}
.tab-btn:hover:not(.is-active){color:var(--green-deep)}
.tab-panel{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:1.7rem;min-height:340px;overflow:hidden}
.tab-content{display:none;grid-template-columns:1fr 1fr;gap:1.9rem;align-items:center;will-change:transform,opacity,filter}
.tab-content.is-active{display:grid}
.tc-media{border-radius:var(--r);overflow:hidden;aspect-ratio:16/12;background:var(--sage-2)}
.tc-media img{width:100%;height:100%;object-fit:cover;display:block}
.tc-text .meta{font-size:.8rem;font-weight:700;color:var(--green);letter-spacing:.02em;margin-bottom:.5rem}
.tc-text h3{font-size:1.7rem;margin-bottom:.6rem}
.tc-text p{color:var(--ink-soft);margin-bottom:1rem}
.tc-list{list-style:none;margin-bottom:1.2rem}
.tc-list li{display:flex;gap:.6rem;font-weight:500;font-size:.94rem;margin-bottom:.4rem;color:var(--ink)}
.tc-list .tick{color:var(--green);font-weight:900}
.tc-text .lnk{color:var(--green-deep);font-weight:700;font-size:.95rem;display:inline-flex;gap:.4rem;transition:gap .25s}
.tc-text .lnk:hover{gap:.8rem}
@media(max-width:760px){.tab-content{grid-template-columns:1fr}.tc-media{aspect-ratio:16/10}}

.values-sec{background:linear-gradient(160deg,var(--green-deep),var(--green-deeper));color:#fff;position:relative;overflow:hidden}
.values-sec .petal{opacity:.12;top:-40px;right:-40px;width:280px;color:#fff}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;position:relative;z-index:2}
.value{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:1.6rem;transition:background .3s}
.value:hover{background:rgba(255,255,255,.12)}
.value .ic{width:48px;height:48px;border-radius:14px;background:rgba(156,203,59,.2);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem}
.value h4{font-size:1.08rem;margin-bottom:.35rem;color:#fff}
.value p{font-size:.92rem;color:rgba(255,255,255,.78)}

.impact{background:var(--sage)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-bottom:2.4rem}
.stat{background:#fff;border-radius:var(--r);padding:1.8rem 1.3rem;text-align:center;box-shadow:var(--shadow-sm)}
.stat .n{font-family:"Yantramanav";font-weight:900;font-size:clamp(2.3rem,4vw,3.2rem);color:var(--green-deep);line-height:1}
.stat .l{font-size:.87rem;color:var(--ink-soft);margin-top:.5rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.fact{background:#fff;border-radius:var(--r);padding:1.4rem;border-top:3px solid var(--green)}
.fact p{color:var(--ink-soft);font-size:.94rem}.fact b{color:var(--ink)}

.give-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.give-card{background:var(--sage-3);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.1rem 1.8rem;text-align:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.give-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);background:#fff}
.give-ph{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;margin-bottom:1.2rem;position:relative;background:var(--sage-2)}
.give-card .amt{font-family:"Yantramanav";font-weight:900;font-size:2.7rem;color:var(--green-deep)}
.give-card p{color:var(--ink-soft);margin-top:.2rem}

.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.story{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.story:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.story .ph{aspect-ratio:16/10;background:linear-gradient(150deg,var(--green),var(--green-deeper));position:relative}
.story .ph::after{content:"📷 blog image";position:absolute;top:12px;left:14px;color:rgba(255,255,255,.6);font-size:.7rem;font-weight:600}
.story .date{position:absolute;left:14px;bottom:-20px;background:var(--lime);color:var(--green-deepest);border-radius:12px;width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Yantramanav";font-weight:700;line-height:1;box-shadow:var(--shadow-sm);z-index:2}
.story .date .d{font-size:1.35rem}.story .date .m{font-size:.66rem;font-weight:600;text-transform:uppercase}
.story .body{padding:1.9rem 1.5rem 1.6rem}
.story .tag{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.story h3{font-size:1.16rem;margin:.4rem 0 .4rem;line-height:1.15}
.story p{color:var(--ink-soft);font-size:.9rem}
.story .lnk{color:var(--green-deep);font-weight:700;font-size:.9rem;margin-top:.7rem;display:inline-block}

.quote-sec{background:var(--green-deepest);color:#fff;position:relative;overflow:hidden}
.quote-sec .petal{opacity:.12;bottom:-60px;left:-40px;width:300px;color:var(--lime)}
.quote{max-width:820px;margin:0 auto;text-align:center;position:relative;z-index:2}
.q-avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;margin:0 auto 1.4rem;border:3px solid rgba(156,203,59,.55)}
.quote p{font-family:"Yantramanav";font-weight:500;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3}
.quote .who{font-family:"Raleway";font-size:.95rem;color:var(--sage);margin-top:1.4rem;font-weight:600}

.cta-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:2rem;align-items:stretch}
.vol-photo{border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:380px;box-shadow:var(--shadow);background:var(--sage-2)}
.vol-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-box{border-radius:var(--r-xl);padding:52px 48px;position:relative;overflow:hidden}
.cta-donate{color:#fff;background:linear-gradient(150deg,var(--green-deep),var(--green-deeper));display:flex;flex-direction:column;justify-content:center}
.cta-donate .petal{opacity:.16;top:-40px;right:-40px;width:200px;color:#fff}
.cta-donate .eyebrow{margin-bottom:.4rem}
.cta-donate h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:.3rem 0 .7rem;position:relative}
.cta-donate p{color:rgba(255,255,255,.88);margin-bottom:1.5rem;position:relative;max-width:440px}
.cta-donate .row{display:flex;gap:.7rem;flex-wrap:wrap;position:relative}
.news-band{margin-top:2rem;background:var(--sage);border-radius:var(--r-xl);padding:2rem 2.8rem;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.news-band h3{font-size:1.55rem;margin-bottom:.2rem}
.news-band p{color:var(--ink-soft);font-size:.98rem}
.news-form{display:flex;gap:.5rem;background:#fff;border-radius:100px;padding:.4rem .4rem .4rem 1.3rem;min-width:min(430px,92vw)}
.news-form input{border:0;outline:0;flex:1;font-family:inherit;background:transparent}

footer{background:var(--green-deepest);color:rgba(255,255,255,.72);padding:70px 0 30px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:2rem}
.foot-logo{display:inline-block;margin-bottom:.9rem}
.foot-logo img{height:52px}
.foot-brand .tag{color:var(--sage);font-weight:600;font-size:.92rem;margin-bottom:.7rem}
.foot-brand .soc{display:flex;gap:.7rem;margin-top:.4rem}
.foot-brand .soc a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:.2s}
.foot-brand .soc a:hover{background:var(--lime);color:var(--green-deepest)}
footer h5{color:#fff;font-family:"Raleway";font-weight:800;font-size:.95rem;margin-bottom:.9rem}
footer ul{list-style:none}footer ul li{margin-bottom:.5rem;font-size:.9rem}
footer ul li a{opacity:.8;transition:.2s}footer ul li a:hover{opacity:1;color:var(--lime)}
.loc{font-size:.84rem;margin-bottom:.9rem;line-height:1.5}
.loc b{color:#fff;font-weight:700;display:block;font-size:.86rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.6rem;padding-top:1.4rem;display:flex;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:.6rem}


/* line icons */
.ic svg{width:24px;height:24px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip .ic{color:var(--green-deep)}
.aicon{transition:transform .35s var(--ease)}
.value:hover .aicon{transform:scale(1.14) rotate(-5deg)}
.chip:hover .aicon,.hero-visual:hover .chip .aicon{transform:scale(1.1)}
.aicon .heart-pulse{transform-origin:12px 12px}
/* cursor-glow cards */
.glow-card{position:relative;isolation:isolate}
.glow-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),var(--glow,rgba(95,148,81,.95)),transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:4}
.glow-card:hover::before{opacity:1}
.glow-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),var(--glowfill,rgba(95,148,81,.10)),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
.glow-card:hover::after{opacity:1}
.values-sec .glow-card{--glow:rgba(156,203,59,.95);--glowfill:rgba(156,203,59,.14)}
.reveal{opacity:1}

@media(max-width:980px){
  .navlinks{display:none}.hamburger{display:flex}
  .hero-grid,.split,.cta-wrap{grid-template-columns:1fr;gap:2.4rem}
  .hero-visual{max-width:460px;margin:0 auto;width:100%}
  .progs,.values,.stories,.give-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}.facts{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .progs,.values,.stories,.give-grid,.stat-grid{grid-template-columns:1fr}
  .chip.c1{left:6px}.chip.c2{right:6px}.foot-grid{grid-template-columns:1fr}.trust{gap:1.1rem}
}


/* ===== interior pages ===== */
:root{
  --green:#639451; --green-deep:#2F5E3B; --green-deeper:#20472b; --green-deepest:#173420;
  --sage:#E9F1E7; --sage-2:#DCE8DB; --sage-3:#F4F8F2;
  --lime:#9CCB3B; --purple:#AD3D75; --ink:#1b2a20; --ink-soft:#586b5d; --paper:#fff; --line:rgba(27,42,32,.10);
  --r:20px; --r-lg:30px; --r-xl:40px; --r-sm:14px;
  --shadow:0 30px 60px -30px rgba(20,50,30,.35); --shadow-sm:0 16px 34px -20px rgba(20,50,30,.28);
  --maxw:1200px; --ease:cubic-bezier(.22,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Raleway",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:"Yantramanav",sans-serif;font-weight:700;line-height:1.06;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.center{text-align:center}
.eyebrow{font-family:"Raleway";font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-deep);display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green-deep);opacity:.5}
.eyebrow.on-dark{color:var(--sage)}.eyebrow.on-dark::before{background:var(--lime);opacity:1}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:"Raleway";font-weight:700;font-size:.98rem;padding:.9rem 1.7rem;border-radius:100px;border:0;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s}
.btn-green{background:var(--green-deep);color:#fff;box-shadow:0 14px 30px -14px rgba(47,94,59,.7)}
.btn-green:hover{background:var(--green-deeper)}
.btn-ghost{background:transparent;border:1.6px solid var(--green-deep);color:var(--green-deep)}
.btn-ghost:hover{background:var(--green-deep);color:#fff}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost.on-dark:hover{background:#fff;color:var(--green-deep)}
.btn-white{background:#fff;color:var(--green-deep)}
.logo-img{height:42px;width:auto}
.petal{position:absolute;pointer-events:none;opacity:.5}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s var(--ease)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.1rem 26px;max-width:var(--maxw);margin:0 auto;transition:padding .4s var(--ease)}
header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 8px 30px -22px rgba(20,50,30,.7)}
header.scrolled .nav{padding:.6rem 26px}
.navlinks{display:flex;align-items:center;gap:1.25rem;font-weight:600;font-size:.9rem}
.navlinks a{color:var(--ink-soft);transition:color .2s;position:relative}
.navlinks a:hover,.navlinks a.act{color:var(--green-deep)}
.navlinks a.act::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--lime);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:.7rem}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:24px;height:2.5px;background:var(--green-deep);border-radius:2px}

/* interior hero */
.ihero{position:relative;background:linear-gradient(180deg,var(--sage) 0%,var(--sage-3) 100%);padding:150px 0 70px;overflow:hidden}
.ihero .petal{color:var(--green);width:120px;top:16%;right:7%;opacity:.28;animation:sway 10s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(18px) rotate(7deg)}}
.ihero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;position:relative;z-index:2}
.crumb{font-size:.8rem;color:var(--ink-soft);margin-bottom:.8rem;font-weight:600;letter-spacing:.02em}
.ihero h1{font-size:clamp(2.3rem,5vw,3.8rem);margin:.9rem 0 1rem}
.ihero .lead{font-size:1.12rem;color:var(--ink-soft);max-width:520px}
.ihero-media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow);background:var(--sage-2)}
.ihero-media img{width:100%;height:100%;object-fit:cover}

/* sections */
section.block{padding:80px 0}
.section-head{max-width:680px;margin-bottom:2.6rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:.6rem 0 .5rem}
.section-head p{color:var(--ink-soft);font-size:1.04rem}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center}
.visual{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow);background:var(--sage-2)}
.visual img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:.6rem 0 1rem}
.split p{color:var(--ink-soft);margin-bottom:1rem}
.mini-list{list-style:none;margin:1.1rem 0 1.5rem}
.mini-list li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.55rem;font-weight:500}
.mini-list .tick{color:var(--green);font-weight:900;margin-top:.1rem}

/* feature cards */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.fcard h3{font-size:1.3rem;margin:.3rem 0 .5rem}
.fcard p{color:var(--ink-soft);font-size:.95rem}
.ic{width:52px;height:52px;border-radius:14px;background:var(--sage);color:var(--green-deep);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aicon{transition:transform .35s var(--ease)}
.fcard:hover .aicon{transform:scale(1.14) rotate(-5deg)}

/* stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.stat{background:#fff;border-radius:var(--r);padding:1.7rem 1.2rem;text-align:center;box-shadow:var(--shadow-sm)}
.stat .n{font-family:"Yantramanav";font-weight:900;font-size:clamp(2.2rem,4vw,3rem);color:var(--green-deep);line-height:1}
.stat .l{font-size:.86rem;color:var(--ink-soft);margin-top:.5rem}

/* timeline */
.timeline{max-width:760px;margin:0 auto;position:relative}
.timeline::before{content:"";position:absolute;left:90px;top:10px;bottom:10px;width:2px;background:var(--sage-2)}
.tl-item{display:grid;grid-template-columns:78px 24px 1fr;align-items:start;gap:1rem;margin-bottom:1.6rem;position:relative}
.tl-year{font-family:"Yantramanav";font-weight:900;color:var(--green-deep);text-align:right;font-size:1.15rem;padding-top:.1rem}
.tl-dot{width:14px;height:14px;border-radius:50%;background:var(--lime);border:3px solid #fff;box-shadow:0 0 0 2px var(--sage-2);margin:.35rem auto 0;position:relative;z-index:1}
.tl-text{color:var(--ink);font-weight:500;padding-top:.05rem}

/* give grid */
.give-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.give-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.1rem 1.7rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.give-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.give-ph{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;margin-bottom:1.1rem}
.give-ph img{width:100%;height:100%;object-fit:cover}
.give-card .amt{font-family:"Yantramanav";font-weight:900;font-size:2.6rem;color:var(--green-deep)}
.give-card p{color:var(--ink-soft);margin-top:.2rem}

/* cta band */
.cta-band{background:linear-gradient(150deg,var(--green-deep),var(--green-deeper));color:#fff;border-radius:var(--r-xl);padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band .petal{opacity:.16;top:-40px;right:-40px;width:200px;color:#fff}
.cta-band h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:.3rem 0 .5rem;position:relative}
.cta-band p{color:rgba(255,255,255,.88);position:relative;max-width:460px}
.cta-band .row{display:flex;gap:.7rem;flex-wrap:wrap;position:relative}

/* contact form */
.cform{display:flex;flex-direction:column;gap:.8rem;max-width:520px}
.cform .frow{display:flex;gap:.8rem}
.cform input,.cform textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:.95rem;background:#fff;outline:none;transition:border .2s}
.cform input:focus,.cform textarea:focus{border-color:var(--green)}
.cform .btn{align-self:flex-start;margin-top:.3rem}
.mapph{border-radius:var(--r-xl);background:linear-gradient(150deg,var(--green),var(--green-deeper));min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#fff;box-shadow:var(--shadow);text-align:center;padding:1rem}
.mapph .ic{background:rgba(255,255,255,.15);color:#fff}
.mapph small{opacity:.6;font-size:.72rem}
.hours{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;margin-top:1.2rem;box-shadow:var(--shadow-sm)}
.hours .ic{margin-bottom:0;flex:0 0 52px}
.hours b{color:var(--ink)}

/* glow cards */
.glow-card{position:relative;isolation:isolate}
.glow-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),var(--glow,rgba(95,148,81,.95)),transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:4}
.glow-card:hover::before{opacity:1}
.glow-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),rgba(95,148,81,.10),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
.glow-card:hover::after{opacity:1}

/* footer */
footer{background:var(--green-deepest);color:rgba(255,255,255,.72);padding:70px 0 30px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:2rem}
.foot-logo{display:inline-block;margin-bottom:.9rem}
.foot-logo img{height:52px}
.foot-brand .tag{color:var(--sage);font-weight:600;font-size:.92rem;margin-bottom:.7rem}
.foot-brand .soc{display:flex;gap:.7rem}
.foot-brand .soc a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:.2s}
.foot-brand .soc a:hover{background:var(--lime);color:var(--green-deepest)}
footer h5{color:#fff;font-family:"Raleway";font-weight:800;font-size:.95rem;margin-bottom:.9rem}
footer ul{list-style:none}footer ul li{margin-bottom:.5rem;font-size:.9rem}
footer ul li a{opacity:.8}footer ul li a:hover{opacity:1;color:var(--lime)}
.loc{font-size:.84rem;margin-bottom:.9rem;line-height:1.5}
.loc b{color:#fff;font-weight:700;display:block;font-size:.86rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.6rem;padding-top:1.4rem;display:flex;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:.6rem}

.reveal{opacity:1}

@media(max-width:980px){
  .navlinks{display:none}.hamburger{display:flex}
  .ihero-grid,.split{grid-template-columns:1fr;gap:2.2rem}
  .ihero-media{max-width:520px}
  .fgrid{grid-template-columns:1fr 1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}
  .give-grid{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .fgrid,.stat-grid,.give-grid,.foot-grid{grid-template-columns:1fr}
  .cform .frow{flex-direction:column}
  .timeline::before{left:70px}.tl-item{grid-template-columns:60px 20px 1fr}
}

/* ===== v6: componentes de las páginas nuevas ===== */
/* Values, Staff & Board, Employment, News & Events, Volunteer,
   Donate, Subscribe, Need Shelter, Learn English                */

/* accesibilidad */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:8px}
main:focus{outline:none}

/* nota de contenido pendiente (solo prototipo) */
.ph-note{background:var(--sage-3);border:1px dashed var(--green);border-radius:var(--r-sm);padding:.85rem 1.1rem;font-size:.84rem;color:var(--ink-soft);margin-top:1.4rem;line-height:1.55}
.ph-note b{color:var(--green-deep)}

/* aviso destacado */
.alert{display:flex;gap:1.1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:5px solid var(--lime);border-radius:var(--r);padding:1.4rem 1.6rem;box-shadow:var(--shadow-sm)}
.alert .ic{flex:0 0 52px;margin-bottom:0}
.alert h3{font-size:1.25rem;margin-bottom:.35rem}
.alert p{color:var(--ink-soft);font-size:.96rem}
.alert b{color:var(--ink)}

/* enlace de texto con flecha */
.linkline{color:var(--green-deep);font-weight:700;display:inline-flex;gap:.4rem;transition:gap .25s var(--ease)}
.linkline:hover{gap:.8rem}
.meta-line{font-size:.8rem;font-weight:700;color:var(--green);letter-spacing:.02em;margin-top:.7rem}

/* dos columnas genérico */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}

/* ----- Our Values: lista detallada ----- */
.vlist{display:flex;flex-direction:column;gap:1.1rem;max-width:900px;margin:0 auto}
.vrow{display:grid;grid-template-columns:52px 1fr;gap:1.4rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem 1.8rem;box-shadow:var(--shadow-sm)}
.vrow h3{font-size:1.25rem;margin-bottom:.4rem}
.vrow p{color:var(--ink-soft);font-size:.97rem}
.vrow .mini-list{margin:.9rem 0 0}
.vrow .mini-list li{font-size:.92rem}
.vrow-ic{margin-bottom:0}

/* ----- Staff & Board ----- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1.2rem}
.tmember{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem 1.2rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tmember:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tmember .av{width:82px;height:82px;border-radius:50%;margin:0 auto .9rem;background:linear-gradient(150deg,var(--green),var(--green-deeper));color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Yantramanav";font-weight:900;font-size:1.45rem;letter-spacing:.03em}
.tmember h4{font-size:1.02rem;margin-bottom:.15rem}
.tmember .role{font-size:.85rem;color:var(--green-deep);font-weight:700;line-height:1.35}
.tmember .bio{font-size:.83rem;color:var(--ink-soft);margin-top:.6rem;line-height:1.5}

/* ----- Employment: vacantes ----- */
.jobs{display:flex;flex-direction:column;gap:.9rem}
.job{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.6rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.job:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.job h3{font-size:1.2rem;margin-bottom:.25rem}
.job p{color:var(--ink-soft);font-size:.94rem;max-width:640px}
.job .meta{display:flex;gap:.45rem;flex-wrap:wrap}
.job .btn{flex:0 0 auto}
.badge{font-size:.73rem;font-weight:700;letter-spacing:.03em;background:var(--sage);color:var(--green-deep);border-radius:100px;padding:.3rem .85rem}

/* ----- pasos numerados ----- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.5rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .num{width:44px;height:44px;border-radius:50%;background:var(--green-deep);color:#fff;font-family:"Yantramanav";font-weight:900;font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.step h3{font-size:1.08rem;margin-bottom:.4rem}
.step p{color:var(--ink-soft);font-size:.92rem}

/* ----- FAQ (acordeón) ----- */
.faq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;background:none;border:0;cursor:pointer;text-align:left;font-family:"Yantramanav",sans-serif;font-weight:700;font-size:1.1rem;line-height:1.25;color:var(--ink);padding:1.2rem 1.4rem}
.faq-q:hover{color:var(--green-deep)}
.faq-q .pm{flex:0 0 28px;height:28px;border-radius:50%;background:var(--sage);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:700;transition:transform .35s var(--ease),background .25s,color .25s}
.faq-q[aria-expanded="true"] .pm{transform:rotate(45deg);background:var(--green-deep);color:#fff}
.faq-a{height:0;overflow:hidden}
.faq-a>div{padding:0 1.4rem 1.3rem;color:var(--ink-soft);font-size:.96rem}

/* ----- News & Events ----- */
.chipbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.chipf{border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:100px;padding:.55rem 1.2rem;font-family:"Raleway";font-weight:700;font-size:.86rem;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chipf:hover{border-color:var(--green);color:var(--green-deep)}
.chipf[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.pcard .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sage-2)}
.pcard .date{position:absolute;left:14px;bottom:14px;background:var(--lime);color:var(--green-deepest);border-radius:12px;width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Yantramanav";font-weight:700;line-height:1;box-shadow:var(--shadow-sm)}
.pcard .date .d{font-size:1.3rem}
.pcard .date .m{font-size:.65rem;font-weight:600;text-transform:uppercase}
.pcard .body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.pcard .tag{font-size:.71rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.pcard h3{font-size:1.16rem;margin:.4rem 0 .5rem;line-height:1.2}
.pcard p{color:var(--ink-soft);font-size:.92rem;flex:1}
.pcard .lnk{color:var(--green-deep);font-weight:700;font-size:.9rem;margin-top:1rem;display:inline-flex;gap:.4rem;transition:gap .25s var(--ease)}
.pcard:hover .lnk{gap:.8rem}
.evlist{display:flex;flex-direction:column;gap:1rem}
.event{display:grid;grid-template-columns:92px 1fr auto;gap:1.4rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.5rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.event:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.event .when{background:var(--sage);border-radius:var(--r-sm);text-align:center;padding:.7rem .4rem;font-family:"Yantramanav";color:var(--green-deep)}
.event .when .d{font-size:1.7rem;font-weight:900;line-height:1}
.event .when .m{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.event h3{font-size:1.15rem;margin-bottom:.2rem}
.event p{color:var(--ink-soft);font-size:.9rem}

/* ----- Donate ----- */
.dbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:2.2rem;box-shadow:var(--shadow)}
.freq{display:flex;gap:.2rem;background:var(--sage-3);border:1px solid var(--line);border-radius:100px;padding:.3rem;width:max-content;max-width:100%;margin-bottom:1.4rem}
.freq button{border:0;background:none;cursor:pointer;font-family:"Raleway";font-weight:700;font-size:.92rem;color:var(--ink-soft);padding:.6rem 1.6rem;border-radius:100px;transition:background .3s var(--ease),color .3s}
.freq button[aria-pressed="true"]{background:var(--green-deep);color:#fff;box-shadow:0 8px 18px -10px rgba(47,94,59,.8)}
.amt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:.8rem}
.amt-opt{border:1.6px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:1rem .5rem;font-family:"Yantramanav";font-weight:900;font-size:1.45rem;color:var(--green-deep);cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.amt-opt:hover{border-color:var(--green);transform:translateY(-3px)}
.amt-opt[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.amt-custom{display:flex;align-items:center;gap:.6rem;border:1.6px solid var(--line);border-radius:var(--r-sm);padding:0 1rem;margin-bottom:1.2rem;transition:border-color .2s}
.amt-custom:focus-within{border-color:var(--green)}
.amt-custom>span[aria-hidden]{font-family:"Yantramanav";font-weight:900;font-size:1.25rem;color:var(--green-deep)}
.amt-custom input{flex:1;border:0;outline:0;background:transparent;font-family:"Raleway";font-weight:600;font-size:1rem;padding:.85rem 0}
.dsum{background:var(--sage-3);border-radius:var(--r-sm);padding:1rem 1.15rem;font-size:.95rem;color:var(--ink-soft);margin-bottom:1.2rem;line-height:1.5}
.dsum b{color:var(--green-deep)}
.dbox>.btn{width:100%;justify-content:center;font-size:1.02rem;padding:1rem 1.6rem}
.trust-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1rem;font-size:.79rem;color:var(--ink-soft);justify-content:center}

/* ----- formularios (subscribe / volunteer / ELC) ----- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.2rem 0 .6rem}
.check{display:flex;gap:.6rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.75rem .95rem;font-size:.91rem;font-weight:600;cursor:pointer;transition:border-color .2s}
.check:hover{border-color:var(--green)}
.check input{accent-color:var(--green-deep);width:17px;height:17px}
.cform .sel,select.sel{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);outline:none;transition:border-color .2s;cursor:pointer}
.cform .sel:focus{border-color:var(--green)}
.cform fieldset{border:0;padding:0}

@media(max-width:980px){
  .two-col{grid-template-columns:1fr;gap:2.4rem}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .event{grid-template-columns:80px 1fr;row-gap:1rem}
  .event .btn{grid-column:1/-1;justify-content:center}
}
@media(max-width:620px){
  .team-grid,.pgrid,.steps,.checks{grid-template-columns:1fr}
  .amt-grid{grid-template-columns:1fr 1fr}
  .vrow{grid-template-columns:1fr;gap:1rem}
  .job{flex-direction:column;align-items:flex-start}
  .job .btn{width:100%;justify-content:center}
  .event{grid-template-columns:1fr}
  .event .when{width:max-content;padding:.6rem 1.1rem}
  .dbox{padding:1.5rem}
  .alert{flex-direction:column;gap:.9rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   v7: menú con submenús (replica el árbol del sitio real) + huecos
   marcados para contenido pendiente. Este bloque va AL FINAL del
   archivo a propósito: redefine la navegación de las versiones previas.
   ===================================================================== */

/* skip link */
.skiplink{position:absolute;left:-9999px;top:0;z-index:300;background:var(--green-deep);color:#fff;padding:.8rem 1.3rem;border-radius:0 0 12px 0;font-weight:700;font-size:.9rem}
.skiplink:focus{left:0}

/* ---------- barra principal ---------- */
.nav{gap:1rem}
.logo-link{flex:0 0 auto}
.navlinks{display:flex;align-items:center;gap:.9rem;font-weight:600;font-size:.83rem}
.navlinks>a,.navitem>a{color:var(--ink-soft);transition:color .2s;position:relative;white-space:nowrap}
.navlinks>a:hover,.navitem>a:hover,.navlinks>a.act,.navitem>a.act{color:var(--green-deep)}
.navlinks>a.act::after,.navitem>a.act::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--lime);border-radius:2px}
.navitem{position:relative;display:flex;align-items:center;gap:.2rem;padding:1.1rem 0}
.subtoggle{display:flex;align-items:center;justify-content:center;background:none;border:0;padding:2px;cursor:pointer;color:var(--ink-soft);border-radius:6px}
.subtoggle svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.navitem:hover .subtoggle,.navitem:focus-within .subtoggle{color:var(--green-deep)}
.navitem:hover .subtoggle svg,.navitem:focus-within .subtoggle svg{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:-14px;min-width:262px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:.5rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;z-index:130}
.navitem:hover>.submenu,.navitem:focus-within>.submenu{opacity:1;visibility:visible;transform:none}
.submenu a{padding:.62rem .85rem;border-radius:12px;font-size:.86rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:background .2s,color .2s}
.submenu a:hover{background:var(--sage-3);color:var(--green-deep)}
.submenu a.act{background:var(--sage);color:var(--green-deep)}
.navdim{display:none}

/* ---------- drawer móvil (≤1320px) ---------- */
@media(max-width:1320px){
  .navlinks{position:fixed;top:0;right:0;bottom:0;width:min(370px,88vw);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:92px 0 40px;background:var(--green-deep);overflow-y:auto;transform:translateX(102%);transition:transform .42s var(--ease);box-shadow:-20px 0 60px -30px rgba(0,0,0,.6);z-index:115}
  .navlinks.open{transform:none}
  .navlinks>a{color:#fff;padding:.95rem 1.7rem;font-size:.92rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .navlinks>a:hover,.navitem>a:hover{color:var(--lime)}
  .navlinks>a.act::after,.navitem>a.act::after{display:none}
  .navlinks>a.act,.navitem>a.act{color:var(--lime)}
  .navitem{flex-wrap:wrap;padding:0;border:0}
  .navitem>a{flex:1;color:#fff;padding:.95rem 1.7rem;font-size:.92rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .subtoggle{color:#fff;padding:.95rem 1.7rem;flex:0 0 auto}
  .navitem:hover .subtoggle svg,.navitem:focus-within .subtoggle svg{transform:none}
  .navitem.open>.subtoggle svg{transform:rotate(180deg)}
  .submenu{position:static;width:100%;min-width:0;background:rgba(0,0,0,.14);border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;padding:.3rem 0;display:none}
  .navitem.open>.submenu{display:flex}
  .submenu a{color:rgba(255,255,255,.86);padding:.7rem 2.6rem;font-size:.83rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:normal;border-radius:0}
  .submenu a:hover,.submenu a.act{background:transparent;color:var(--lime)}
  .hamburger{display:flex;position:relative;z-index:125}
  .hamburger span{transition:transform .3s var(--ease),opacity .2s}
  body.nav-open .hamburger span{background:var(--green-deep)}
  body.nav-open .hamburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.nav-open .hamburger span:nth-child(2){opacity:0}
  body.nav-open .hamburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .navdim{display:block;position:fixed;inset:0;background:rgba(23,52,32,.5);backdrop-filter:blur(2px);z-index:112;opacity:0;transition:opacity .35s}
  .navdim.show{opacity:1}
  body.nav-open{overflow:hidden}
}
/* El overlay solo existe cuando el menu esta abierto, en cualquier ancho.
   Si esta regla vive dentro de un @media, en el otro lado del breakpoint la capa
   queda encima de la pagina y se come todos los clics. */
.navdim[hidden]{display:none!important}
.navdim:not(.show){pointer-events:none}
.navdim.show{pointer-events:auto}

/* ---------- huecos de imagen pendientes ---------- */
.imgph{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;background:repeating-linear-gradient(135deg,var(--sage-3) 0 14px,var(--sage-2) 14px 28px);border:2px dashed var(--green);border-radius:inherit;color:var(--green-deep);text-align:center;padding:1rem}
.imgph svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.imgph span{font-family:"Yantramanav";font-weight:700;font-size:.95rem;letter-spacing:.02em}
.imgph small{font-size:.76rem;color:var(--ink-soft);max-width:26ch;line-height:1.35}
/* cuando no está dentro de un contenedor posicionado */
.imgph-box{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--sage-3)}

/* archivo pendiente (PDF, formulario, doc) */
.filebox{display:flex;align-items:center;gap:1rem;background:#fff;border:1px dashed var(--green);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--shadow-sm)}
.fb-ic{flex:0 0 42px;height:42px;border-radius:12px;background:var(--sage);color:var(--green-deep);display:flex;align-items:center;justify-content:center}
.fb-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fb-tx{display:flex;flex-direction:column;flex:1}
.fb-tx b{font-size:.96rem}
.fb-tx small{font-size:.8rem;color:var(--ink-soft)}
.filelist{display:flex;flex-direction:column;gap:.7rem}
.filegroup+.filegroup{margin-top:2.4rem}
.fg-title{font-size:1.05rem;margin-bottom:.9rem;color:var(--green-deep)}

/* archivo real: la caja entera es el enlace */
.filebox-link{border-style:solid;border-color:var(--line);color:inherit;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s}
.filebox-link:hover,.filebox-link:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green)}
.filebox-link:hover .fb-ic,.filebox-link:focus-visible .fb-ic{background:var(--green-deep);color:#fff}
.filebox-link .fb-ic{transition:background .25s,color .25s}
.badge-action{display:inline-flex;align-items:center;gap:.35rem;background:var(--green-deep);color:#fff;white-space:nowrap}
.fb-arrow{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.filebox-link:hover .fb-arrow,.filebox-link:focus-visible .fb-arrow{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.filebox-link,.fb-arrow{transition:none}.filebox-link:hover{transform:none}}

/* sello Candid pendiente en el footer */
/* aviso de interpretacion en 13 idiomas */
.translist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.translist li{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1.05rem;display:grid;grid-template-columns:132px 1fr;gap:1rem;align-items:baseline}
.tr-lang{font-family:"Raleway";font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep)}
.tr-text{font-size:.94rem;line-height:1.75;color:var(--ink-soft);overflow-wrap:anywhere}
/* Cada alfabeto con su Noto. Se cargan solo en esta pagina, asi que el resto
   del sitio no paga el peso. Raleway va primero: los idiomas en alfabeto
   latino y cirilico siguen viendose como el resto de la web. */
.translist li[lang="am"] .tr-text{font-family:"Raleway","Noto Sans Ethiopic",sans-serif}
.translist li[lang="my"] .tr-text,
.translist li[lang="ksw"] .tr-text{font-family:"Raleway","Noto Sans Myanmar",sans-serif}
.translist li[lang="km"] .tr-text{font-family:"Raleway","Noto Sans Khmer",sans-serif}
.translist li[lang="lo"] .tr-text{font-family:"Raleway","Noto Sans Lao",sans-serif}
.translist li[lang="ko"] .tr-text{font-family:"Raleway","Noto Sans KR",sans-serif}

/* estas escrituras necesitan mas interlineado para no cortarse los diacriticos */
.translist li[lang="am"] .tr-text,.translist li[lang="my"] .tr-text,
.translist li[lang="ksw"] .tr-text,.translist li[lang="km"] .tr-text,
.translist li[lang="lo"] .tr-text{line-height:2.1}
@media(max-width:640px){
  .translist li{grid-template-columns:1fr;gap:.25rem;padding:.75rem .9rem}
  .tr-text{font-size:.88rem}
}

/* sello de Candid en el pie */
.seal{display:inline-block;margin-top:1.1rem;border-radius:10px;overflow:hidden;line-height:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.seal img{width:120px;height:120px;display:block}
.seal:hover,.seal:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(0,0,0,.55)}
@media(max-width:760px){.seal img{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){.seal{transition:none}.seal:hover{transform:none}}

/* kits (OSH volunteer) */
.kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.kit{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem 1.7rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.kit:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.kit h3{font-size:1.15rem;margin-bottom:.4rem}
.kit>p{color:var(--ink-soft);font-size:.92rem}
.kit-list{list-style:none;margin-top:.9rem;display:flex;flex-direction:column;gap:.38rem}
.kit-list li{position:relative;padding-left:1.1rem;font-size:.9rem;font-weight:500;line-height:1.45}
.kit-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--green)}
.kit-note{margin-top:.9rem;font-size:.82rem;color:var(--ink-soft);font-style:italic}

/* tabla simple (horarios, montos) */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.tbl th,.tbl td{padding:.9rem 1.1rem;text-align:left;font-size:.93rem;border-bottom:1px solid var(--line)}
.tbl th{background:var(--sage);font-family:"Yantramanav";font-weight:700;color:var(--green-deep);font-size:.95rem}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:var(--ink)}
.tbl-wrap{overflow-x:auto}

/* lista de personas compacta (board members) */
.namelist{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.namelist div{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1.1rem;font-weight:600;font-size:.94rem;box-shadow:var(--shadow-sm)}

/* teléfono grande (need shelter) */
.bigphone{display:inline-flex;align-items:center;gap:.8rem;background:var(--green-deep);color:#fff;border-radius:100px;padding:1rem 1.9rem;font-family:"Yantramanav";font-weight:900;font-size:1.7rem;letter-spacing:.01em;box-shadow:0 18px 40px -18px rgba(47,94,59,.9);margin:.5rem 0}
.bigphone svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}
.bigphone:hover{background:var(--green-deeper)}

@media(max-width:980px){
  .kit-grid{grid-template-columns:1fr 1fr}
  .namelist{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .kit-grid,.namelist{grid-template-columns:1fr}
  .bigphone{font-size:1.35rem;padding:.9rem 1.4rem}
}

/* ---------- v7b: destacados de la home, citas y placeholders de form ---------- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.feat-card{display:flex;align-items:center;gap:1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.7rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feat-card .ic{margin-bottom:0;flex:0 0 52px}
.feat-card h3{font-size:1.35rem;margin:.25rem 0 .3rem}
.feat-card p{color:var(--ink-soft);font-size:.93rem}
.feat-arrow{margin-left:auto;font-size:1.5rem;color:var(--green-deep);transition:transform .3s var(--ease)}
.feat-card:hover .feat-arrow{transform:translateX(6px)}

.pullquote{font-family:"Yantramanav",sans-serif;font-weight:500;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.32;color:var(--green-deep);border-left:4px solid var(--lime);padding-left:1.4rem;margin:0}

/* boton deshabilitado a proposito (integracion pendiente) */
.btn.is-disabled,.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;pointer-events:auto}
.btn.is-disabled:hover,.btn:disabled:hover{transform:none}

/* retrato real dentro del avatar circular */
.tmember .av-photo{padding:0;background:var(--sage-2);overflow:hidden}
.tmember .av-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* cuerpo de un articulo: prosa legible, ancho de lectura */
.article{max-width:760px;margin:0 auto}
.article-meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.article-meta time{font-size:.88rem;color:var(--ink-soft);font-weight:600}
.article p{font-size:1.05rem;line-height:1.78;color:var(--ink-soft);margin-bottom:1.1rem}
.article p:last-child{margin-bottom:0}
.article h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:2.2rem 0 .9rem}
.article h3{font-size:1.2rem;margin:1.8rem 0 .7rem;color:var(--green-deep)}
.article h4{font-size:1.05rem;margin:1.5rem 0 .6rem}
.article ul,.article ol{margin:0 0 1.2rem 1.3rem;color:var(--ink-soft)}
.article li{margin-bottom:.5rem;line-height:1.7}
.article a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.article a:hover{color:var(--green-deeper)}
.article strong,.article b{color:var(--ink)}
.article blockquote{border-left:4px solid var(--green);background:var(--sage-3);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.1rem 1.3rem;margin:1.4rem 0;font-style:italic}
.article blockquote p{margin-bottom:0;color:var(--ink)}
.article figure{margin:1.6rem 0}
.article figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:.5rem}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}}

/* tablas anchas: se desplazan dentro de su caja en vez de romper la pagina */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.tbl-scroll>table{min-width:420px}
/* una URL pegada dentro de un articulo no debe desbordar */
.article{overflow-wrap:anywhere}
.article a{word-break:break-word}

/* ---------- ritmo entre bloques ----------
   Una rejilla seguida de otro bloque (aviso, nota, lista de archivos, galeria)
   quedaba pegada. En vez de parchear cada caso, la rejilla reserva su espacio. */
.fgrid:not(:last-child),.give-grid:not(:last-child),.kit-grid:not(:last-child),
.steps:not(:last-child),.team-grid:not(:last-child),.pgrid:not(:last-child),
.progs:not(:last-child),.two-col:not(:last-child),.filelist:not(:last-child),
.namelist:not(:last-child),.tbl:not(:last-child){margin-bottom:2rem}
.stat-grid:not(:last-child){margin-bottom:2.4rem}
/* un aviso o una tarjeta suelta detras de texto tampoco se pega */
.alert+.alert,.alert+.filelist,.filelist+.alert{margin-top:1.2rem}

/* ---------- utilidades de espaciado ----------
   Habia 32 estilos de margen escritos a mano con 7 valores distintos de
   margin-top. Estas clases son la escala unica: todo el sitio usa las mismas. */
.wrap-narrow{max-width:760px;margin-left:auto;margin-right:auto}
.wrap-mid{max-width:820px;margin-left:auto;margin-right:auto}
.wrap-wide{max-width:900px;margin-left:auto;margin-right:auto}
.mt-1{margin-top:1.2rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:2.8rem}
.center-row{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem}
.h2-mid{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:.6rem 0 1rem}

/* bloque "Get involved": se reutiliza en varias paginas, asi que su fondo se
   decide segun lo que tenga delante y nunca se funde con la seccion anterior */
.get-involved{background:var(--sage)}
.block[style*="--sage)"]+.get-involved,.get-involved+.get-involved{background:var(--sage-3)}

/* nota al pie de una cifra (el asterisco de "students") */
.footnote{font-size:.83rem;color:var(--ink-soft);line-height:1.55;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.footnote b{color:var(--ink)}

/* titulo de una columna de datos (Revenue / Expenses) */
.col-title{font-size:1.15rem;color:var(--green-deep);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--sage-2)}

/* una stat-grid seguida de otra cosa necesita aire */
.stat-grid+.two-col,.stat-grid+.gal,.stat-grid+.mini-list{margin-top:2.4rem}

/* galeria: varias fotos en UN contenedor compacto, del tamaño de cualquier
   otra imagen del sitio. Nunca a ancho completo. */
.gal{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);max-width:520px}
.two-col .gal,.split .gal{max-width:100%}
.gal-stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sage-2)}
.gal-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s var(--ease)}
.gal-slide.is-on{opacity:1;visibility:visible}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--green-deep);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .25s,transform .25s var(--ease);z-index:2}
.gal-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gal-nav:hover,.gal-nav:focus-visible{background:#fff;transform:translateY(-50%) scale(1.08)}
.gal-prev{left:10px}.gal-next{right:10px}
.gal-count{position:absolute;top:10px;right:10px;background:rgba(27,42,32,.6);color:#fff;font-size:.72rem;font-weight:700;padding:.22rem .6rem;border-radius:100px;z-index:2}
.gal-bar{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.8rem 1rem}
.gal-cap{font-size:.82rem;color:var(--ink-soft);margin:0;flex:1;line-height:1.5}
.gal-dots{display:flex;gap:.4rem;flex-shrink:0}
.gal-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--sage-2);cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.gal-dot:hover{background:var(--green)}
.gal-dot.is-on{background:var(--green-deep);transform:scale(1.35)}
.gal-dot:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px}
@media (max-width:640px){.gal{max-width:100%}.gal-nav{width:32px;height:32px}.gal-bar{padding:.7rem .9rem;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.gal-slide,.gal-nav{transition:none}}



/* barra de años de los Annual Reports */
.year-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.chip-year{display:inline-flex;align-items:center;padding:.55rem 1.2rem;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-family:"Raleway";font-weight:700;font-size:.9rem;text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.chip-year:hover,.chip-year:focus-visible{border-color:var(--green);color:var(--green-deep);transform:translateY(-2px)}
.chip-year.is-on{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

/* desglose financiero: etiqueta a la izquierda, % y monto a la derecha */
.tbl.money .trow span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl.money .trow span:last-child b{color:var(--green-deep)}

/* parrafo de entrada de una pagina de texto corrido */
.lead-body{font-size:1.12rem;line-height:1.75;color:var(--ink-soft)}

/* pagina de "gracias" tras enviar un formulario */
.thanks-box{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2.6rem 2rem;box-shadow:var(--shadow-sm)}
.thanks-box .ic{margin:0 auto 1.1rem}
.thanks-box h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:.9rem}
.thanks-box p{color:var(--ink-soft)}
.thanks-box p+p{margin-top:.7rem}
@media (max-width:640px){.thanks-box{padding:1.8rem 1.2rem}}

/* filas simples clave/valor (horarios) dentro de una tarjeta */
.tbl .trow{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--line);font-size:.93rem}
.tbl .trow:last-child{border-bottom:0}
.tbl .trow span:first-child{font-weight:700;color:var(--ink)}
.tbl .trow span:last-child{color:var(--ink-soft);text-align:right}

/* cita destacada dentro de texto corrido (lenguaje sugerido de legado, etc.) */
.quote-block{border-left:4px solid var(--green);background:var(--sage-3);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.1rem 1.3rem;margin:1rem 0;font-style:italic;color:var(--ink);line-height:1.6}
/* sufijo "/mo" en montos recurrentes */
.amt .per{font-family:"Raleway";font-weight:700;font-size:1rem;color:var(--ink-soft);margin-left:.15rem}
/* lista de descargas/enlaces dentro de una tarjeta */
.give-card .amt+p{margin-top:.2rem}

/* formularios maquetados (ffield/fform) */
.fform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--shadow-sm)}
.fform-intro{color:var(--ink-soft);font-size:.96rem;margin-bottom:1.6rem}
.fform-intro p+p{margin-top:.7rem}
.fform-foot{font-size:.83rem;color:var(--ink-soft);margin-top:1rem}
.fgrid-f{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem}
.fld{display:flex;flex-direction:column;gap:.4rem;grid-column:1/-1}
.fld-half{grid-column:auto}
.fld>label,.fld legend{font-weight:700;font-size:.88rem;color:var(--ink)}
.fld .req{color:var(--green);margin-left:.15rem}
.fld-hint{font-size:.8rem;color:var(--ink-soft);font-weight:400;line-height:1.45}
.fld input:not([type="checkbox"]):not([type="radio"]),.fld select,.fld textarea{width:100%;padding:.8rem .95rem;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s}
.fld input:not([type="checkbox"]):not([type="radio"]):focus,.fld select:focus,.fld textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(95,148,81,.16)}
.fld textarea{resize:vertical;min-height:96px}
.fld fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fld .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.55rem}
/* casillas y radios: tamaño real, etiqueta pegada al control */
.fld .check{display:flex;align-items:center;gap:.6rem;text-align:left;line-height:1.4}
.fld .check input[type="checkbox"],.fld .check input[type="radio"]{flex:0 0 18px;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:0;accent-color:var(--green-deep);background:none}
.fld .check:has(input:checked){border-color:var(--green);background:var(--sage-3)}
.fld .check:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(95,148,81,.16)}
.fsec-title{grid-column:1/-1;font-size:1.1rem;color:var(--green-deep);margin:1.2rem 0 -.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.fgrid-f>.fsec-title:first-child{margin-top:0;padding-top:0;border-top:0}
.fform .captcha-ph{margin:1.6rem 0 1.2rem}
@media (max-width:760px){.fgrid-f{grid-template-columns:1fr}.fld-half{grid-column:1/-1}.fform{padding:1.3rem}}
.captcha-ph{border:1px dashed var(--green);border-radius:12px;background:var(--sage-3);color:var(--ink-soft);font-size:.85rem;padding:.9rem 1.1rem;text-align:center}

.alert-urgent{border-left-color:var(--green-deep)}
.alert-urgent .bigphone{margin:.9rem 0}

@media(max-width:820px){.feat-grid{grid-template-columns:1fr}}

/* =====================================================================
   v8 — pasada de pulido: sin guion en los eyebrow, imágenes que llenan
   su contenedor sin recortes raros, grillas sin filas huérfanas,
   ritmo vertical parejo y móvil fluido.  Va al final: manda sobre todo
   lo anterior.
   ===================================================================== */

/* ---------- 1. eyebrow sin el guion ---------- */
.eyebrow::before,.eyebrow.on-dark::before{content:none!important;display:none!important}
.eyebrow{gap:0;letter-spacing:.16em;font-size:.76rem}
.section-head .eyebrow{margin-bottom:.55rem}

/* ---------- 2. imágenes: llenar el contenedor, sin zoom extra ---------- */
.imgfill{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* el parallax escalaba las fotos 12% y las recortaba de más: solo queda en el hero */
.visual img,.prog .ph img,.give-ph img,.pcard .ph img,.ihero-media img{height:100%;top:0}
.hero-photo img{height:108%;top:-4%}

/* proporciones alineadas a las fotos reales (3:2 la mayoría, 4:3 las de $) */
.ihero-media{aspect-ratio:3/2}
.visual{aspect-ratio:3/2}
.prog .ph{aspect-ratio:3/2}
.pcard .ph{aspect-ratio:3/2}
.give-ph{aspect-ratio:4/3}
.hero-photo{aspect-ratio:4/5}
.imgph-box{aspect-ratio:3/2}
/* todo contenedor de imagen posicionado y recortado limpio */
.ihero-media,.visual,.prog .ph,.pcard .ph,.give-ph,.hero-photo,.imgph-box{position:relative;overflow:hidden;background:var(--sage-2)}
.portrait-box{position:relative;overflow:hidden;background:var(--sage-2);aspect-ratio:4/5;border-radius:var(--r-lg);max-width:340px}
.portrait-cap{font-size:.85rem;color:var(--ink-soft);margin-top:.7rem;max-width:340px}

/* hueco de imagen: más tranquilo, sin rayas */
.imgph{background:var(--sage-3);border:1.5px dashed rgba(95,148,81,.55);gap:.4rem}
.imgph svg{opacity:.55}
.imgph span{font-size:.9rem;font-weight:700}

/* ---------- 3. tarjetas parejas: el enlace siempre abajo ---------- */
.fcard,.kit,.step,.tmember,.prog,.pcard,.give-card,.feat-card{height:100%}
.fcard{display:flex;flex-direction:column}
.fcard>p:last-of-type{margin-bottom:0}
.fcard .linkline,.fcard .btn,.fcard .meta-line{margin-top:auto;padding-top:.9rem;align-self:flex-start}
.fcard .mini-list{margin-bottom:0}
.prog{display:flex;flex-direction:column}
.prog .body{display:flex;flex-direction:column;flex:1}
.prog .lnk{margin-top:auto;padding-top:.9rem}
.kit{display:flex;flex-direction:column}
.kit .kit-note{margin-top:auto;padding-top:.9rem}
.give-card{display:flex;flex-direction:column}

/* ---------- 4. grillas sin filas huérfanas ---------- */
.fgrid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.fgrid-2{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.kit-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.team-grid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}

.namelist{grid-template-columns:repeat(2,1fr)}
/* El home paso de dos programas a tres ("What we do" separa el albergue de la
   vivienda permanente). Con auto-fit la rejilla se adapta al numero de
   tarjetas en vez de quedar clavada a dos. */
.progs{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.values{align-items:stretch}
.value{display:flex;flex-direction:column}

/* ---------- 5. ritmo y armonía ---------- */
section.block{padding:88px 0}
.section-head{margin-bottom:2.8rem}
.section-head.center{text-align:center}
.split{gap:3.4rem}
.split p,.two-col>div>p{max-width:64ch}
.split .row,.two-col .row{margin-top:1.4rem}
.mini-list{margin:1.2rem 0 1.4rem}
/* mismas esquinas en las piezas de apoyo */
.hours,.filebox,.alert,.ph-note,.captcha-ph{border-radius:var(--r-lg)}
.hours{padding:1.2rem 1.4rem;gap:1.1rem}
.ph-note{padding:1rem 1.2rem}
/* botones agrupados siempre con el mismo aire */
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
/* listas de contacto en tarjeta: un poco más de aire entre párrafos */
.fcard p+p{margin-top:.55rem}
.crumb{opacity:.85}
/* CTA final: texto y botones alineados arriba */
.cta-band{align-items:center}
.cta-band .row{flex-shrink:0}

/* ---------- 6. tablas y bloques anchos ---------- */
.tbl-wrap{border-radius:var(--r);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{min-width:420px}

/* ---------- 7. drawer móvil: por encima de la cortina ---------- */
.navdim{z-index:90}
@media(max-width:1320px){
  header#hdr{z-index:120}
  .navlinks{z-index:1}
  body.nav-open header#hdr{background:rgba(255,255,255,.98);backdrop-filter:blur(12px)}
}

/* ---------- 8. escalones responsive ---------- */
@media(max-width:1320px){
  .team-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  section.block{padding:68px 0}
  .fgrid,.fgrid-2{grid-template-columns:repeat(2,1fr)}
  .progs{grid-template-columns:1fr}
  .split,.ihero-grid,.hero-grid,.two-col{grid-template-columns:1fr;gap:2.4rem}
  .ihero-media,.hero-visual{max-width:560px}
  .split .visual{max-width:100%}
  .cta-band{padding:44px 34px}
  .section-head{margin-bottom:2.2rem}
}
@media(max-width:820px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wrap{padding:0 22px}
  section.block{padding:56px 0}
  .ihero{padding:124px 0 52px}
  .hero{padding:118px 0 64px}
  .section-head{margin-bottom:1.8rem}
  .fgrid,.fgrid-2,.give-grid,.stat-grid,.kit-grid,.namelist,.pgrid,.steps{grid-template-columns:1fr}
  .split,.ihero-grid,.hero-grid{gap:2rem}
  .cta-band{padding:36px 26px;text-align:left}
  .cta-band .row{width:100%}
  .cta-band .btn{flex:1 1 auto;justify-content:center}
  .news-band{padding:1.7rem 1.5rem;gap:1.2rem}
  .news-form{min-width:0;width:100%}
  .hero-visual{max-width:100%}
  .hero-photo{aspect-ratio:4/5}
  .chip{padding:.7rem .95rem}
  .chip .ic{width:36px;height:36px}
  .chip.c1{left:8px;top:auto;bottom:12%}
  .chip.c2{right:8px;bottom:4%}
  .trust{gap:1.2rem}
  .dbox{padding:1.5rem}
  .bigphone{width:100%;justify-content:center;font-size:1.3rem}
  .foot-grid{grid-template-columns:1fr;gap:2.2rem}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:.5rem}
  .timeline::before{left:62px}
  .tl-item{grid-template-columns:54px 18px 1fr;gap:.8rem}
  .tl-year{font-size:1rem}
  .event{grid-template-columns:1fr;row-gap:.9rem}
  .event .when{width:max-content;padding:.55rem 1.1rem}
  .event .btn{width:100%;justify-content:center}
  .job{flex-direction:column;align-items:flex-start}
  .job .btn{width:100%;justify-content:center}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .tmember{padding:1.3rem .9rem}
  .tmember .av{width:66px;height:66px;font-size:1.2rem}
  .vrow{grid-template-columns:1fr;gap:.9rem}
  .filebox{flex-wrap:wrap}
  .filebox .badge{margin-left:52px}
  .checks{grid-template-columns:1fr}
  .quote p{font-size:1.35rem}
  .faq-q{font-size:1rem;padding:1rem 1.1rem}
  .faq-a>div{padding:0 1.1rem 1.1rem}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .team-grid{grid-template-columns:1fr}
  .amt-grid{grid-template-columns:1fr 1fr}
  .freq{width:100%}
  .freq button{flex:1;padding:.6rem .6rem}
  .btn{padding:.85rem 1.4rem;font-size:.94rem}
  .ihero h1{font-size:clamp(2rem,8vw,2.6rem)}
}

/* ---------- v8b: filas finales equilibradas ---------- */
/* grilla de 2 columnas con número impar de tarjetas: la última ocupa la fila */
.fgrid-2>*:last-child:nth-child(odd){grid-column:1/-1}
/* los 5 valores: 3 arriba + 2 centrados abajo */
.values{grid-template-columns:repeat(6,1fr)}
.values .value{grid-column:span 2}
.values .value:nth-child(4):nth-last-child(2),.values .value:nth-child(5):last-child{grid-column:span 3}
/* seis métricas del ELC en dos filas de tres */
.stat-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){
  .values{grid-template-columns:repeat(2,1fr)}
  .values .value,.values .value:nth-child(4):nth-last-child(2),.values .value:nth-child(5):last-child{grid-column:auto}
  .values .value:last-child:nth-child(odd){grid-column:1/-1}
  .stat-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .values{grid-template-columns:1fr}
  .values .value:last-child:nth-child(odd){grid-column:auto}
  .stat-grid-3{grid-template-columns:1fr}
}

/* ---------- v8c: correcciones del drawer móvil ----------
   backdrop-filter en el header crea un contenedor para position:fixed,
   lo que rompía el drawer a pantalla completa. En móvil va sólido.     */
@media(max-width:1320px){
  header#hdr,header#hdr.scrolled,body.nav-open header#hdr{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Estos dos fondos eran blancos de cuando la barra era clara. Al invertirla
     a verde se quedaron aqui, y como llevan un selector de ID ganaban por
     especificidad a la regla nueva: en movil la barra salia BLANCA con el logo
     blanco y la hamburguesa blanca encima, o sea invisibles. Solo pasaba por
     debajo de 1320px, que es justo donde no llegaban las pruebas de escritorio. */
  header#hdr.scrolled{background:var(--green-deepest)}
  body.nav-open header#hdr{background:var(--green-deep);box-shadow:none}
  .navlinks{will-change:transform}
}
/* Safari: prefijo donde sí usamos blur */
header.scrolled{-webkit-backdrop-filter:blur(12px)}
.navdim{-webkit-backdrop-filter:blur(2px)}

/* .row dentro de un bloque de texto necesita su aire propio */
.split .row,.two-col .row,.fcard .row{margin-top:1.4rem}
.hero-btns{margin-top:1.8rem}
.ihero .hero-btns{margin-top:1.6rem}

/* =====================================================================
   v9 — hero en móvil: los chips dejaban de flotar bien sobre la foto
   (se montaban entre sí y el de la derecha desbordaba). Debajo de
   760px pasan a flujo normal, en una fila de dos bajo la imagen.
   ===================================================================== */
@media(max-width:760px){
  .hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;max-width:520px;margin:0 auto;width:100%}
  .hero-photo{grid-column:1/-1;margin-bottom:.2rem}
  .hero-photo img{height:100%;top:0}              /* sin overscale: nada de recorte extra */
  .chip{position:static;width:auto;padding:.8rem .95rem;gap:.6rem;box-shadow:var(--shadow-sm)}
  .chip.c1,.chip.c2{left:auto;right:auto;top:auto;bottom:auto}
  .chip .ic{width:38px;height:38px;flex:0 0 38px}
  .chip .tx b{font-size:1rem}
  .chip .tx span{font-size:.72rem;line-height:1.3;display:block}
}
@media(max-width:430px){
  .hero-visual{grid-template-columns:1fr}
}
/* red de seguridad contra desbordes horizontales en móvil */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .hero,.ihero,section.block{overflow-x:clip}
}
/* fila de números del hero: en pantallas chicas, grilla sin separadores */
@media(max-width:620px){
  .trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:1rem 1.2rem;margin-top:2rem}
  .trust .divider{display:none}
  .trust .t .n{font-size:1.5rem}
}

/* =====================================================================
   v11 — pasada de alineación e iconos.
   Va al final a propósito: manda sobre todo lo anterior.
   ===================================================================== */

/* ---------- 1. iconos sociales del footer (antes eran letras sueltas) ---------- */
.foot-brand .soc a{font-size:0}
.foot-brand .soc svg{width:17px;height:17px;display:block;fill:currentColor}

/* ---------- 2. timeline: la línea vertical no pasaba por los puntos ----------
   la línea estaba fija en 90px mientras el punto cae en
   col1 + gap + mitad de col2 (105px). Ahora se calcula.               */
.timeline{--tl-c1:78px;--tl-gap:1rem;--tl-dot:24px}
.tl-item{grid-template-columns:var(--tl-c1) var(--tl-dot) 1fr;gap:var(--tl-gap)}
.timeline::before{left:calc(var(--tl-c1) + var(--tl-gap) + var(--tl-dot)/2 - 1px)}

/* ---------- 3. texto centrado: que no se estire a 1200px ---------- */
p.center,.center>p{max-width:68ch;margin-left:auto;margin-right:auto;color:var(--ink-soft)}
.section-head p{margin-left:auto;margin-right:auto}
/* el letter-spacing agrega aire DESPUÉS del último carácter y descentra el texto */
.section-head.center .eyebrow{margin-right:-.16em}
.pcard .date .m,.event .when .m,.story .date .m{margin-right:-.1em}

/* ---------- 4. iconos dentro de cajas centradas ---------- */
.mapph .ic{margin-bottom:0}
.bigphone svg{stroke-linecap:round;stroke-linejoin:round}

/* ---------- 5. dos columnas: tarjetas a la misma altura ----------
   sin convertir .reveal en flex: eso estiraba los botones sueltos
   (p. ej. "Register online") a todo el ancho de la columna.        */
.two-col{align-items:stretch}
/* height:100% de v8 haría crecer también a las tarjetas que comparten columna */
.two-col>.reveal>.fcard{height:auto}
.two-col>.reveal>.fcard:only-child{height:100%}

/* tablas lado a lado: sin table-layout cada una partía sus columnas
   por su cuenta y las dos tablas no alineaban entre sí */
.two-col .tbl{table-layout:fixed}

/* ---------- 6. archivo pendiente: el badge no se alineaba con el texto ---------- */
@media(max-width:760px){
  /* el badge nunca llegaba a saltar de línea: el texto quedaba en una
     columna estrechísima. flex-basis lo empuja a la fila siguiente,
     alineado con el texto (icono 42px + gap 1rem = 58px, no 52).      */
  .filebox .fb-tx{flex:1 1 calc(100% - 58px)}
  .filebox .badge{margin-left:58px}
}
@media(max-width:760px){
  .timeline{--tl-c1:54px;--tl-gap:.8rem;--tl-dot:18px}
}

/* ---------- 7. hero: la fila de cifras se partía y dejaba un separador suelto ----------
   con flex-wrap las tres etiquetas no entraban en la columna del hero y
   "350 / Adult English students" caía a una segunda línea.                */
@media(min-width:621px){
  .trust{flex-wrap:nowrap;align-items:stretch}
  .trust .t{flex:1 1 0;min-width:0}
}

/* ---------- 8. última fila huérfana en la grilla de 3 (Ways to Give) ----------
   11 tarjetas en 3 columnas dejan 2 sueltas pegadas a la izquierda.
   Con 6 columnas y span 2, las dos últimas quedan centradas.        */
@media(min-width:981px){
  .fgrid-c{grid-template-columns:repeat(6,1fr)}
  .fgrid-c>*{grid-column:span 2}
  .fgrid-c>*:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}
}

/* ---------- 9. margen fantasma del icono en las filas horizontales ----------
   .ic trae margin-bottom:1.1rem porque en las tarjetas el icono va ARRIBA del
   texto. En una fila con align-items:center ese margen entra en la caja de
   margen del flex item, así que el icono sube la MITAD del margen (8.8px).
   Estaba reseteado en .hours/.alert/.feat-card/.vrow pero NO en .chip.
   Se agrupan todos acá para que el próximo contexto horizontal no se olvide.  */
.chip .ic,.hours .ic,.alert .ic,.feat-card .ic,.mapph .ic,.vrow-ic{margin-bottom:0}

/* ==========================================================================
   MOVIL — componentes añadidos en esta pasada
   ========================================================================== */
@media(max-width:980px){
  .wrap-mid,.wrap-wide,.wrap-narrow{max-width:100%}
  .gal{max-width:100%}
  .team-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
}

@media(max-width:760px){
  :target,section[id],[id^="faq"],#main,#apply,#programs,#involved,#accountability{scroll-margin-top:84px}
  /* articulo: prosa mas compacta y sin desbordes horizontales */
  .article{max-width:100%}
  .article p{font-size:1rem;line-height:1.7}
  .article h2{font-size:1.35rem;margin:1.7rem 0 .7rem}
  .article h3{font-size:1.08rem;margin:1.4rem 0 .5rem}
  .article ul,.article ol{margin-left:1.1rem}
  .article blockquote{padding:.9rem 1rem;margin:1.1rem 0}
  .article-meta{gap:.6rem;margin-bottom:1.2rem;padding-bottom:.9rem}
  .article-meta time{font-size:.82rem}
  /* la escala de espaciado se reduce un paso */
  .mt-1{margin-top:1rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2rem}
  .fgrid:not(:last-child),.give-grid:not(:last-child),.kit-grid:not(:last-child),
  .steps:not(:last-child),.team-grid:not(:last-child),.pgrid:not(:last-child),
  .progs:not(:last-child),.two-col:not(:last-child),.filelist:not(:last-child),
  .namelist:not(:last-child),.tbl:not(:last-child){margin-bottom:1.5rem}
  .stat-grid:not(:last-child){margin-bottom:1.8rem}
  /* filas clave/valor: la etiqueta y el dato se apilan si no caben */
  .tbl .trow{flex-wrap:wrap;gap:.2rem;padding:.65rem .95rem}
  .tbl .trow span:last-child{text-align:left}
  .col-title{font-size:1.05rem}
  .footnote{margin-top:1.1rem;padding-top:.8rem}
  /* galeria: pie y puntos apilados, sin apretarse */
  .gal-bar{flex-direction:column;align-items:flex-start;gap:.6rem}
  .gal-cap{font-size:.8rem}
  .gal-stage{aspect-ratio:4/3}
  /* retrato del director centrado */
  .portrait-box{max-width:100%;margin:0 auto}
  .portrait-cap{max-width:100%;text-align:center}
  /* barra de años de los reportes */
  .year-bar{gap:.45rem}
  .chip-year{padding:.45rem .9rem;font-size:.83rem}
}

@media(max-width:560px){
  .team-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .tmember{padding:1.1rem .7rem}
  .tmember .av{width:58px;height:58px;font-size:1.05rem}
  .tmember h4{font-size:.92rem}
  .tmember .role{font-size:.78rem}
  /* formularios: los grupos de casillas a una columna */
  .fld .checks{grid-template-columns:1fr}
  .fform{padding:1.1rem}
  .fsec-title{font-size:1rem;margin-top:1rem;padding-top:1rem}
  /* la galeria ocupa el ancho y las flechas se separan del borde */
  .gal-stage{aspect-ratio:3/2}
  .gal-count{font-size:.68rem;top:8px;right:8px}
  /* documentos: el peso baja de linea en vez de apretar el titulo */
  .filebox{gap:.8rem}
  .fb-tx b{font-size:.9rem}
  .fb-tx small{font-size:.76rem}
}

@media(max-width:340px){
  /* solo en pantallas muy estrechas: la mayoria de moviles son 375-430px
     y ahi caben dos personas por fila */
  .team-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .gal-nav{width:30px;height:30px}
  .gal-nav svg{width:16px;height:16px}
}

/* ==========================================================================
   MOVIL — densidad
   En movil las rejillas caen a una columna y cada tarjeta pasa a ocupar el
   ancho completo, asi que la pagina se volvia el doble de larga que en
   escritorio. Aqui se compacta. Nada de esto afecta a escritorio.
   ========================================================================== */
@media(max-width:760px){
  section.block{padding:48px 0}
  .section-head{margin-bottom:1.8rem}
  .section-head h2{font-size:clamp(1.55rem,6vw,2rem);margin:.45rem 0 .4rem}
  .section-head p{font-size:.96rem}
  /* tarjetas: menos aire interior */
  .fcard{padding:1.25rem}
  .kit{padding:1.15rem 1.25rem}
  .give-card{padding:.9rem .9rem 1.3rem}
  .fcard h3,.kit h3{font-size:1.05rem}
  .fcard p,.kit p{font-size:.93rem;line-height:1.6}
  .kit-list li,.mini-list li{font-size:.9rem;margin-bottom:.4rem}
  /* imagenes laterales: mas anchas que altas, ocupan menos scroll */
  .visual,.ihero-media{aspect-ratio:16/10}
  .give-ph{aspect-ratio:16/9}
  .prog .ph{aspect-ratio:16/9}
  .imgph-box{aspect-ratio:16/9}
  .cta-band{padding:32px 24px}
  .cta-band h2{font-size:1.5rem}
}

@media(max-width:560px){
  section.block{padding:40px 0}
  /* Tarjeta de articulo en horizontal: la foto pequeña a la izquierda.
     Cada tarjeta baja de ~500px a ~150px, y hay 20 en News and Events. */
  .pcard{display:grid;grid-template-columns:112px 1fr;align-items:stretch}
  .pcard .ph{aspect-ratio:auto;height:100%;min-height:112px}
  .pcard .date{left:6px;bottom:6px;width:40px;height:40px;border-radius:9px}
  .pcard .date .d{font-size:.95rem;line-height:1}
  .pcard .date .m{font-size:.55rem}
  .pcard .body{padding:.8rem .95rem}
  .pcard .tag{font-size:.64rem;letter-spacing:.09em}
  .pcard h3{font-size:.97rem;margin:.25rem 0 .3rem;line-height:1.25}
  .pcard .body p{font-size:.83rem;line-height:1.45;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pcard .lnk{margin-top:.45rem;font-size:.82rem;padding-top:0}
  .pgrid{gap:.8rem}
  /* montos de donacion: dos por fila en vez de uno */
  .give-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .give-card .amt{font-size:1.9rem}
  .give-card p{font-size:.82rem;line-height:1.45}
  /* cifras: dos por fila */
  .stat-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .stat .n{font-size:1.9rem}
  .stat .l{font-size:.8rem;line-height:1.35}
  /* pasos numerados mas juntos */
  .steps{gap:.8rem}
  .step{padding:1.1rem}
  .step h3{font-size:1rem}
  .step p{font-size:.9rem}
}

@media(max-width:560px) and (min-width:361px){
  /* listas de articulos cortos en dos columnas: la mitad de scroll, misma info.
     display:block es imprescindible: `columns` no aplica sobre un contenedor flex. */
  .kit-list{display:block;columns:2;column-gap:1rem}
  .kit-list li{break-inside:avoid;font-size:.85rem;margin-bottom:.35rem}
  .kit .kit-note{font-size:.8rem}
}

@media(max-width:400px){
  /* con muy poco ancho la tarjeta horizontal aprieta: la foto se achica mas */
  .pcard{grid-template-columns:92px 1fr}
  .pcard .ph{min-height:92px}
  .give-grid,.stat-grid{grid-template-columns:1fr 1fr;gap:.6rem}
}

/* ==========================================================================
   HEADER — barra invertida y mas grande
   El cliente pidio la barra en oscuro con texto claro, y el logo en su
   version blanca para que contraste.
   ========================================================================== */
.logo-img{height:62px}
.nav{padding:1.35rem 26px}
header.scrolled .nav{padding:.8rem 26px}

/* la barra siempre en verde oscuro, tambien al hacer scroll */
header{background:var(--green-deep)}
header.scrolled{background:var(--green-deepest);backdrop-filter:none;
  box-shadow:0 8px 30px -20px rgba(0,0,0,.55)}
header .navlinks>a,header .navitem>a,header .subtoggle{color:rgba(255,255,255,.88)}
header .navlinks>a:hover,header .navitem>a:hover,
header .navitem:hover .subtoggle,header .navitem:focus-within .subtoggle{color:var(--lime)}
header .navlinks>a.act,header .navitem>a.act{color:#fff}
header .navlinks>a.act::after,header .navitem>a.act::after{background:var(--lime)}
header .hamburger span{background:#fff}
/* el boton Donate necesita separarse del verde de la barra */
header .nav-cta .btn-green{background:var(--lime);color:var(--green-deepest);
  box-shadow:0 12px 26px -14px rgba(156,203,59,.5)}
header .nav-cta .btn-green:hover{background:#aede4d}
/* el submenu desplegable sigue siendo una tarjeta clara */
header .submenu a{color:var(--ink-soft)}
header .submenu a:hover,header .submenu a.act{color:var(--green-deep)}
/* la pagina empieza debajo de una barra que ya no es transparente */
body{padding-top:0}
.hero,.ihero{padding-top:132px}

.nav{padding-left:20px;padding-right:20px;gap:1rem;max-width:1280px}
@media(min-width:1321px){
  /* el menu del cliente trae siete apartados con etiquetas largas
     ("Want to Learn English?"): el espaciado se aprieta para que quepan */
  .navlinks{font-size:.95rem;gap:.62rem}
  .submenu a{font-size:.92rem}
  .subtoggle{padding:0}
  .nav-cta .btn{padding:.85rem 1.5rem}
}
@media(max-width:1320px){
  /* con el drawer abierto la hamburguesa queda sobre fondo claro */
  body.nav-open header .hamburger span{background:#fff}
}
@media(max-width:760px){
  .logo-img{height:50px}
  .nav{padding:1.05rem 20px}
  .hero,.ihero{padding-top:112px}
}

/* ==========================================================================
   PASO 3: paleta de marca
   Los cuatro HEX oficiales presentes en todo el sitio, sin romper el
   equilibrio actual: los verdes siguen mandando y el morado es un acento
   puntual.
   ========================================================================== */

/* --- Donate: "otro tipo de verde", en lima con texto oscuro ---
   El verde medio de marca da solo 3.57 con texto blanco, por debajo del 4.5
   de WCAG AA, asi que no sirve para un boton relleno. El lima con texto
   oscuro da 7.12 y cumple el encargo igual de bien.
   Se selecciona por destino, sin tocar el HTML.                          */
a.btn-green[href*="donate"],header .nav-cta .btn-green{
  background:var(--lime);color:var(--green-deepest);
  box-shadow:0 14px 30px -16px rgba(156,203,59,.65)}
a.btn-green[href*="donate"]:hover,header .nav-cta .btn-green:hover{background:#aede4d}

/* --- Verde medio de marca: donde es grafico, no texto --- */
/* Con 3.57 no vale para texto, pero como color de trazo y de borde es el
   primario de marca y ya aparece en 35 puntos del sistema.               */
.ic{color:var(--green)}
.fcard:hover,.kit:hover,.give-card:hover{border-color:var(--green)}
.filebox-link:hover,.filebox-link:focus-visible{border-color:var(--green)}

/* --- Lima en los estados activos --- */
.navlinks>a.act::after,.navitem>a.act::after{background:var(--lime)}
.cta-band .btn-white{color:var(--green-deep)}

/* --- Morado: solo tres sitios, pequeños y repetidos --- */
/* 1. etiqueta de categoria de un articulo: distingue "categoria" del resto
      de la interfaz, que es toda verde */
.pcard .tag{color:var(--purple)}
.article-meta .tag{color:var(--purple)}
/* 2. asterisco de campo obligatorio: marca de atencion, no de marca */
.fld .req{color:var(--purple)}
/* 3. resaltado al seleccionar texto */
::selection{background:rgba(173,61,117,.18);color:var(--ink)}

/* ==========================================================================
   HERO CON MARQUEE
   El texto y la tira ocupan filas distintas de una rejilla: asi el boton
   nunca cae sobre las fotos, pase lo que pase con el alto de pantalla.
   ========================================================================== */
.mq-hero{position:relative;width:100%;min-height:100vh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;background:var(--paper)}

.mq-content{align-self:center;justify-self:center;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:5rem 1.5rem 4rem;max-width:100%}

.mq-title{font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.06;font-weight:900;
  letter-spacing:-.04em;color:var(--ink);margin:0}
.mq-title .w{display:inline-block;opacity:0;transform:translateY(10px);
  animation:mqIn .55s cubic-bezier(.22,.7,.3,1) forwards;animation-delay:var(--d)}
@keyframes mqIn{to{opacity:1;transform:none}}

.mq-desc{margin-top:1.8rem;max-width:38rem;font-size:1.125rem;line-height:1.7;
  color:var(--ink-soft);opacity:0;animation:mqIn .55s cubic-bezier(.22,.7,.3,1) .5s forwards}

.mq-cta{margin-top:2.4rem;padding:.95rem 2.4rem;font-size:1.05rem;font-weight:700;
  opacity:0;animation:mqIn .55s cubic-bezier(.22,.7,.3,1) .6s forwards}

/* --- tira de fotos --- */
/* En su propia fila: no se superpone con nada. La mascara solo suaviza los
   extremos laterales, que es donde el corte se notaria. */
.mq-strip{position:relative;overflow:hidden;padding-bottom:3.5rem;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}

/* el margen va en la foto, no como gap: asi la tira mide exactamente el doble
   de un juego y el bucle empalma sin dejar hueco */
.mq-track{display:flex;width:max-content;animation:mqScroll 80s linear infinite}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-track:hover{animation-play-state:paused}

.mq-item{flex-shrink:0;height:15rem;aspect-ratio:3/4;margin-right:1.25rem}
.mq-item:nth-child(odd){transform:rotate(-2deg)}
.mq-item:nth-child(even){transform:rotate(3deg)}
.mq-item img{width:100%;height:100%;object-fit:cover;border-radius:1rem;display:block;
  box-shadow:0 10px 24px -14px rgba(20,50,30,.45)}

@media(max-width:900px){
  .mq-content{padding:3.5rem 1.25rem 3rem}
  .mq-desc{margin-top:1.4rem;font-size:1.02rem}
  .mq-cta{margin-top:1.9rem}
  .mq-item{height:11rem;margin-right:.9rem}
  .mq-strip{padding-bottom:2.5rem}
}
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .mq-title .w,.mq-desc,.mq-cta{animation:none;opacity:1;transform:none}
}

/* --- banda de datos: mismas tarjetas que el resto del sitio --- */
.factband{background:var(--paper);border-top:1px solid var(--line)}
.stat-grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.stat-grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.stat-grid-5{grid-template-columns:repeat(2,1fr)}}


/* ==========================================================================
   PASO 8 — sistema de color y ritmo de seccion, para TODA la web
   --------------------------------------------------------------------------
   Dos reglas de significado, no de decoracion. Se aplican igual en las 56
   paginas porque cuelgan de los componentes compartidos:

     LIMA   = accion.    Boton principal, marca de seccion, fondo de los
                         bloques que piden hacer algo.
     MORADO = etiqueta.  Categoria, cita, campo obligatorio. Nunca estructura.

   Los verdes siguen mandando: lo demas es acento.
   ========================================================================== */

:root{
  --lime-light:#CDE59A;           /* lima aclarado: rotulos sobre verde oscuro */
  --cream:#FBEFD2;                /* crema calido: las luces del duotono */
  --purple-wash:#F8EFF4;          /* morado de marca al ~8% sobre blanco.
                                     Primero fue al 13% (#F4E6ED), como el verde
                                     claro; se pidio un tono mas claro */
  --lime-wash:#F5FAEB;            /* lima al 10% sobre blanco */
  --lime-wash-2:#EDF6DC;          /* lima al 18% */
  --lime-soft:rgba(156,203,59,.22);
  --purple-deep:#8F2F60;          /* morado para TEXTO sobre el malva claro:
                                    el de marca da 5,04 y este 7,0 */
  --purple-soft:rgba(173,61,117,.10);
}

/* --------------------------------------------------------------------------
   1. DIVISION ENTRE SECCIONES
   Cada cambio de seccion se marca con una linea fina y un tramo de lima
   centrado encima. Funciona aunque dos secciones seguidas tengan el mismo
   fondo, que era donde antes se fundian.
   -------------------------------------------------------------------------- */
section.block{position:relative}
section.block+section.block::before,.factband::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);pointer-events:none}
section.block+section.block::after,.factband::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:64px;height:3px;background:var(--lime);border-radius:0 0 3px 3px;
  pointer-events:none}

/* En las secciones oscuras la linea sobra: el propio cambio de fondo ya
   divide, y una linea clara sobre verde oscuro se ve sucia. */
.values-sec::before,.values-sec::after,
.quote-sec::before,.quote-sec::after,
.values-sec+section.block::before,.values-sec+section.block::after,
.quote-sec+section.block::before,.quote-sec+section.block::after{display:none}
/* la cinta de datos ya traia su propia linea: se queda solo con la del sistema */
.factband{border-top:0}

/* El eyebrow NO recupera su guion: una pasada anterior lo quito a proposito
   (linea 881, con !important) y la marca de seccion ya la lleva el divisor.
   Poner dos marcas lima seguidas seria repetir el mismo gesto dos veces. */

/* --------------------------------------------------------------------------
   2. LIMA = ACCION
   Un solo color para el boton principal en toda la web. El verde medio de
   marca da 3.57 con texto blanco (por debajo del 4.5 de AA); el lima con
   texto verde oscuro da 7.88 y hace el mismo trabajo.
   -------------------------------------------------------------------------- */
a.btn-green[href*="donate"],header .nav-cta .btn-green,
.cta-band .btn-white,.cta-donate .btn-white{
  background:var(--lime);color:var(--green-deepest);
  box-shadow:0 14px 30px -16px rgba(156,203,59,.55)}
a.btn-green[href*="donate"]:hover,header .nav-cta .btn-green:hover,
.cta-band .btn-white:hover,.cta-donate .btn-white:hover{
  background:#aede4d;color:var(--green-deepest)}

/* Los bloques que piden hacer algo llevan el fondo de accion, apenas tenido. */
.get-involved,.get-involved+.get-involved,
.block[style*="--sage)"]+.get-involved{background:var(--lime-wash)}
.news-band{background:var(--lime-wash-2)}

/* --------------------------------------------------------------------------
   3. TARJETAS: LOS VERDES SE INTERCALAN
   El chip del icono rota entre tres tonos. Al ir por :nth-child el ciclo
   entra solo en cualquier rejilla de cualquier pagina.
   -------------------------------------------------------------------------- */
.fgrid>*:nth-child(3n+2)>.ic,
.vlist>*:nth-child(3n+2)>.ic,
.feat-grid>*:nth-child(3n+2)>.ic{background:var(--lime-soft);color:var(--green-deepest)}
.fgrid>*:nth-child(3n)>.ic,
.vlist>*:nth-child(3n)>.ic,
.feat-grid>*:nth-child(3n)>.ic{background:var(--green-deep);color:#fff}

/* pasos numerados: el circulo avanza de verde oscuro a lima y vuelve */
.steps>.step:nth-child(4n+2) .num{background:var(--green)}
.steps>.step:nth-child(4n+3) .num{background:var(--lime);color:var(--green-deepest)}
.steps>.step:nth-child(4n+4) .num{background:var(--green-deepest)}

/* cifras: cada tarjeta lleva su filete arriba, del tono que le toca */
.stat{position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--green-deep)}
.stat-grid>.stat:nth-child(4n+2)::before{background:var(--lime)}
.stat-grid>.stat:nth-child(4n+3)::before{background:var(--green)}
.stat-grid>.stat:nth-child(4n+4)::before{background:var(--green-deepest)}

/* fichas de dato: el filete alterna, y una de cada tres es morada */
.facts>.fact:nth-child(3n+2){border-top-color:var(--lime)}
.facts>.fact:nth-child(3n){border-top-color:var(--purple)}
/* la fuente de un dato va en letra pequena y apagada, no al mismo peso */
.fact small{display:block;margin-top:.5rem;font-size:.78rem;color:var(--ink-soft);opacity:.85}

/* importes de donacion: el tercero en morado, para que la fila no sea plana */
.give-grid>.give-card:nth-child(3n+2) .amt{color:var(--green)}
.give-grid>.give-card:nth-child(3n) .amt{color:var(--purple)}

/* etiquetas de una vacante: la segunda en lima, la tercera en morado */
.job .meta .badge:nth-child(2){background:var(--lime-soft);color:var(--green-deepest)}
.job .meta .badge:nth-child(3){background:var(--purple-soft);color:var(--purple)}

/* --------------------------------------------------------------------------
   4. MORADO: solo etiquetas, y muy poco
   Sobre blanco da 5.67, asi que tambien vale para texto pequeno.
   -------------------------------------------------------------------------- */
.pcard .tag,.story .tag,.article-meta .tag{color:var(--purple)}
/* El verde medio de marca da 3.57 sobre blanco: sirve de grafico, no de texto.
   Estos cinco eran los ultimos sitios donde se usaba escrito. */
.mini-list .tick,.tc-list .tick{color:var(--green-deep)}
.prog .meta,.tc-text .meta,.meta-line{color:var(--green-deep)}
.fld .req{color:var(--purple)}
.article blockquote{border-left-color:var(--purple)}
.timeline .tl-item:nth-child(4n) .tl-dot{background:var(--purple)}
::selection{background:rgba(173,61,117,.18);color:var(--ink)}

/* --------------------------------------------------------------------------
   5. HERO: los tres call to action
   Donate primero; detras Volunteer y Need shelter?, que es el enlace que
   necesita quien llega buscando alojamiento y no puede quedar solo en el menu.
   -------------------------------------------------------------------------- */
.mq-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;
  margin-top:2.2rem;opacity:0;
  animation:mqIn .55s cubic-bezier(.22,.7,.3,1) .6s forwards}
.mq-actions .btn{padding:.9rem 1.9rem;font-size:1rem}
.mq-cta{margin-top:0;opacity:1;animation:none}
.mq-help svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){
  .mq-actions{width:100%;flex-direction:column;align-items:stretch}
  .mq-actions .btn{justify-content:center}
}

/* --------------------------------------------------------------------------
   6. HERO + CINTA: menos aire muerto
   Entre el final del carrete y las cifras sobraba casi media pantalla.
   -------------------------------------------------------------------------- */
/* El hero heredaba de .hero un padding de 132/90px que se sumaba al de
   .mq-content: 90px muertos justo debajo del carrete. Aqui se anula y el
   espacio lo decide un unico sitio.
   Ojo con la especificidad: `section.block` (0,1,1) gana a `.factband`
   (0,1,0), asi que la banda tiene que escribirse con el elemento delante. */
.mq-hero{min-height:auto;padding:106px 0 0}
.mq-content{padding:3rem 1.5rem 2.4rem}
.mq-strip{padding-bottom:1.75rem}
section.block.factband{padding:38px 0}
.factband .stat-grid{gap:.9rem;margin-bottom:0}
.factband .stat{padding:1.25rem .9rem}
.factband .stat .n{font-size:clamp(1.8rem,3vw,2.5rem)}
.factband .stat .l{font-size:.82rem;margin-top:.35rem;line-height:1.4}
@media(max-width:900px){
  .mq-hero{padding-top:96px}
  .mq-content{padding:2.2rem 1.25rem 1.8rem}
  .mq-strip{padding-bottom:1.2rem}
  section.block.factband{padding:28px 0}
}
/* cinco cifras en dos columnas dejan una suelta: la ultima ocupa la fila */
@media(max-width:700px){.factband .stat-grid-5>.stat:last-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){
  .mq-actions{animation:none;opacity:1}
}

/* --------------------------------------------------------------------------
   7. MISION
   El cliente esta reescribiendo mision y vision. Mientras tanto el bloque no
   se queda vacio: lleva la mision que hoy esta publicada en oscs-mn.org y,
   debajo, la de cada programa. Es contenido real, no un hueco, y cuando
   llegue la redaccion nueva se sustituye sin tocar el diseno.
   -------------------------------------------------------------------------- */
.mission-pair{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;
  max-width:1040px;margin:2.8rem auto 0;padding-top:2.2rem;
  border-top:1px solid rgba(255,255,255,.18);text-align:left}
.mission-pair h3{font-family:"Raleway";font-weight:800;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-bottom:.5rem}
.mission-pair p{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.65}
@media(max-width:760px){
  .mission-pair{grid-template-columns:1fr;gap:1.7rem;margin-top:2.2rem;padding-top:1.8rem}
}
@media(max-width:980px) and (min-width:761px){
  .mission-pair{grid-template-columns:1fr 1fr}
}


/* ==========================================================================
   PASO 9 — menos ruido de caja
   Medido antes de tocar nada: 36.6 cajas por pagina, cinco radios distintos
   y el 85% con sombra. Se ordena la escala, se baja el radio y la sombra
   pasa a significar algo (que ese elemento reacciona) en vez de estar en todo.
   ========================================================================== */

:root{
  /* la escala baja alrededor de un 40% y mantiene los cuatro escalones que ya
     usaba el codigo, asi que es un cambio de token, no de estructura */
  --r-sm:10px;      /* campos, etiquetas, controles pequenos */
  --r:14px;         /* la tarjeta corriente */
  --r-lg:18px;      /* paneles mayores: articulo, programa, formulario */
  --r-xl:24px;      /* medios grandes: foto de portada, banda de CTA */
}

/* --- la sombra deja de ser el estado normal --- */
/* Estas tarjetas ya tienen filete: con la sombra encima el bloque entero
   parecia flotar. En reposo van planas; al pasar el raton siguen levantando,
   que es cuando la sombra dice algo. */
.fcard,.kit,.give-card,.step,.job,.event,.faq-item,.filebox,.pcard,
.alert,.vrow,.tmember,.hours,.dbox,.gal,.namelist div,.tbl,.check,
.tab-panel,.tabbar,.chipf{box-shadow:none}

/* Estas se sostenian solo con la sombra: sin ella desaparecerian sobre el
   blanco, asi que reciben el filete que les faltaba. */
.stat,.prog,.story{box-shadow:none;border:1px solid var(--line)}

/* Las fotos si conservan profundidad: ahi la sombra separa la imagen del
   fondo, no adorna. Se suaviza un poco. */
:root{--shadow:0 24px 48px -32px rgba(20,50,30,.34)}
.visual,.ihero-media,.hero-photo,.vol-photo,.tc-media,.mq-item img{box-shadow:var(--shadow)}

/* el carrete usaba su propio radio: al token */
.mq-item img{border-radius:var(--r)}

/* al quitar la sombra de reposo, el filete tiene que verse un poco mas */
.fcard,.kit,.give-card,.step,.job,.event,.faq-item,.pcard,.vrow,
.tmember,.hours,.dbox,.gal,.stat,.prog,.story{border-color:rgba(27,42,32,.13)}

/* el hover sigue levantando: es lo unico que lleva sombra ahora */
.fcard:hover,.kit:hover,.give-card:hover,.step:hover,.job:hover,.event:hover,
.pcard:hover,.tmember:hover,.prog:hover,.story:hover,
.filebox-link:hover,.filebox-link:focus-visible{box-shadow:var(--shadow)}


/* ==========================================================================
   PASO 10 — HERO DE MOSAICO
   Replica del planteamiento de smallsums.org, que es la referencia que dio
   el equipo: rejilla de caras a sangre, todas tenidas del mismo color para
   que se lean como una sola imagen, y el titular encima.
   ========================================================================== */
.collage-hero{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;padding:132px 1.5rem 4rem;background:var(--green-deepest)}

.collage-grid{position:absolute;inset:0;z-index:0;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3px;
  background:var(--green-deepest);
  /* en blanco y negro las seis fotos comparten rango tonal; sin esto el tinte
     no consigue unificarlas porque cada una viene con su propio color */
  filter:grayscale(1) contrast(1.04)}
/* min-height:0 es imprescindible. Un elemento de rejilla lleva min-height:auto
   por defecto, asi que la fila crece hasta el alto natural de la foto en vez de
   respetar el 1fr: con retratos cuadrados la rejilla medía 1214px dentro de un
   hero de 970 y el overflow cortaba la fila de abajo por el cuello.
   object-position sube un poco el encuadre para que, cuando la casilla sea mas
   ancha que alta, lo que se recorte sean los hombros y no la frente. */
.collage-grid img{width:100%;height:100%;min-height:0;min-width:0;
  object-fit:cover;object-position:50% 42%;display:block}

/* el tinte de marca */
.collage-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:var(--green-deep);mix-blend-mode:multiply;opacity:.66;pointer-events:none}
/* y encima el velo que hace legible el texto. Es lo justo para que el blanco
   pase el 4.5 de AA sobre la zona mas clara: las caras tienen que verse. */
.collage-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,45,28,.40),rgba(20,45,28,.24) 45%,rgba(20,45,28,.46))}

.collage-content{position:relative;z-index:3;text-align:center;max-width:900px;
  display:flex;flex-direction:column;align-items:center}

.collage-title{font-size:clamp(2.4rem,6vw,5rem);line-height:1.02;font-weight:900;
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0;
  text-shadow:0 2px 24px rgba(10,26,16,.35)}
.collage-desc{margin-top:1.6rem;max-width:42rem;font-size:1.12rem;line-height:1.65;
  color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(10,26,16,.4)}
.collage-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem}
.collage-actions .btn{padding:.95rem 2rem;font-size:1rem}

/* la barra flota sobre el mosaico hasta que se hace scroll */
header.hdr-over:not(.scrolled){background:transparent;box-shadow:none}

@media(max-width:900px){
  /* en vertical caben mejor dos columnas y tres filas */
  .collage-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  .collage-hero{padding:112px 1.25rem 3rem;min-height:92vh}
  .collage-desc{margin-top:1.2rem;font-size:1rem}
  .collage-actions{margin-top:1.7rem}
}
@media(max-width:520px){
  .collage-actions{width:100%;flex-direction:column;align-items:stretch}
  .collage-actions .btn{justify-content:center}
}


/* ==========================================================================
   PASO 11 — VARIEDAD Y DENSIDAD
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANDA DE FOTO A SANGRE
   Lo unico del sitio que se sale de la caja de 1200px. Por eso funciona:
   despues de varias secciones centradas, el ancho completo se nota.
   -------------------------------------------------------------------------- */
.photoband{position:relative;min-height:440px;display:grid;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--green-deepest)}
.photoband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photoband::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,45,28,.90) 0%,rgba(20,45,28,.72) 46%,rgba(20,45,28,.34) 100%)}
.pb-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:3.4rem 26px;color:#fff}
.photoband h2{font-size:clamp(1.8rem,3.8vw,2.9rem);margin:.5rem 0 .7rem;
  max-width:18ch;color:#fff;text-transform:uppercase;line-height:1.04}
.photoband p{color:rgba(255,255,255,.9);max-width:46ch;font-size:1.04rem}
.pb-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
@media(max-width:760px){
  .photoband{min-height:360px}
  .pb-inner{padding:2.6rem 20px}
  .photoband::after{background:linear-gradient(180deg,rgba(20,45,28,.72),rgba(20,45,28,.88))}
  .photoband p{max-width:none}
}

/* --------------------------------------------------------------------------
   2. TITULARES DE SECCION EN MAYUSCULAS
   Es de donde sale casi todo el caracter de la referencia. Solo el titulo de
   seccion: los titulos de tarjeta y de articulo se quedan como estan, que ahi
   la mayuscula estorba la lectura.
   -------------------------------------------------------------------------- */
.section-head h2,.cta-band h2,.cta-donate h2{text-transform:uppercase;letter-spacing:-.005em}

/* --------------------------------------------------------------------------
   3. MENOS AIRE
   88px de padding por seccion mas 2.6rem bajo cada titular era demasiado para
   la cantidad de texto que suele haber.
   -------------------------------------------------------------------------- */
section.block{padding:60px 0}
.section-head{margin-bottom:1.9rem;max-width:720px}
.section-head p{font-size:1.02rem}
.split{gap:2.6rem}
.fgrid,.give-grid,.kit-grid,.steps,.pgrid,.progs,.stories{gap:1.1rem}
.stat-grid{gap:1rem}
.fgrid:not(:last-child),.give-grid:not(:last-child),.kit-grid:not(:last-child),
.steps:not(:last-child),.team-grid:not(:last-child),.pgrid:not(:last-child),
.progs:not(:last-child),.two-col:not(:last-child),.filelist:not(:last-child),
.namelist:not(:last-child),.tbl:not(:last-child){margin-bottom:1.5rem}
.stat-grid:not(:last-child){margin-bottom:1.7rem}
.mt-3{margin-top:2rem}
.fcard{padding:1.5rem}
.step{padding:1.5rem 1.3rem}
.kit{padding:1.4rem 1.5rem}

/* dos secciones seguidas del mismo tono se juntan mas: la linea ya las separa */
/* Esta escala va al final del archivo, asi que manda sobre las anteriores.
   Tiene que ir de mas a menos: si solo se declara el tramo de 900px, en los
   anchos menores pisa a las reglas mas apretadas que ya existian y el movil
   acaba con MAS aire, no con menos. */
@media(max-width:900px){
  section.block{padding:44px 0}
  .section-head{margin-bottom:1.5rem}
}
@media(max-width:760px){
  section.block{padding:38px 0}
}
@media(max-width:560px){
  section.block{padding:32px 0}
  .section-head{margin-bottom:1.25rem}
}


/* ==========================================================================
   PASO 12 — MENOS CAJAS
   Regla: una cifra o un dato suelto NO necesita caja. La caja se reserva para
   lo que se puede pulsar o para lo que de verdad agrupa cosas distintas.
   ========================================================================== */

/* --- cifras: fuera fondo, borde y sombra; queda la tipografia --- */
.stat{background:none;border:0;box-shadow:none;padding:1rem .6rem;overflow:visible}
.stat::before{display:none}
.stat .n{color:var(--green-deep)}
.stat .l{max-width:22ch;margin-left:auto;margin-right:auto}
/* una linea fina las separa, en vez de cinco marcos */
.stat-grid>.stat{border-left:1px solid var(--line)}
.stat-grid>.stat:first-child{border-left:0}
@media(max-width:980px){.stat-grid>.stat{border-left:0}}

/* --- los valores, en una sola linea --- */
.valuerow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:0;max-width:1100px;margin:0 auto}
.valuerow li{padding:.2rem 1.1rem;border-left:1px solid var(--line);
  font-family:"Yantramanav",sans-serif;font-weight:700;font-size:1.02rem;
  line-height:1.22;color:var(--ink);text-transform:uppercase;letter-spacing:.005em}
.valuerow li:first-child{border-left:0}
@media(max-width:900px){
  .valuerow{grid-template-columns:1fr 1fr;gap:1rem 0}
  .valuerow li{border-left:0;padding:0 1rem;border-top:2px solid var(--lime);padding-top:.7rem}
}
@media(max-width:560px){.valuerow{grid-template-columns:1fr}}

/* --- Did you know: la cifra manda, el texto acompana --- */
.dyk{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.6rem;max-width:1100px;margin:0 auto}
.dyk-item{display:flex;flex-direction:column;gap:.35rem}
.dyk-item b{font-family:"Yantramanav",sans-serif;font-weight:900;line-height:.95;
  font-size:clamp(2.4rem,4.4vw,3.4rem);color:var(--green-deep);
  font-variant-numeric:tabular-nums}
.dyk-item:nth-child(3n+2) b{color:var(--green)}
.dyk-item:nth-child(3n) b{color:var(--purple)}
.dyk-item span{font-size:.95rem;line-height:1.5;color:var(--ink-soft);max-width:30ch}
.dyk-item small{display:block;margin-top:.4rem;font-size:.75rem;opacity:.75}
@media(max-width:900px){.dyk{grid-template-columns:1fr 1fr;gap:1.6rem 2rem}}
/* Seis cifras apiladas en una columna ocupaban 1.266px en un movil. En dos
   columnas la cifra sigue leyendose grande y la seccion baja a la mitad. */
@media(max-width:560px){.dyk{grid-template-columns:1fr 1fr;gap:1.4rem 1.1rem}
  .dyk-item b{font-size:2.1rem}
  .dyk-item span{font-size:.86rem;max-width:none}}

/* --- lista de archivos: filas, no 21 marcos ---
   Ways to Give lista 21 PDF. Con un borde completo cada uno son 21 cajas
   apiladas; como filas separadas por una linea se lee de un vistazo y es
   exactamente la misma informacion. */
.filelist{gap:0}
.filebox{border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:.95rem .4rem;background:none;box-shadow:none}
.filelist>.filebox:last-child{border-bottom:0}
.filebox-link:hover,.filebox-link:focus-visible{transform:none;box-shadow:none;
  background:var(--sage-3);border-radius:var(--r-sm)}
/* el hueco pendiente si conserva su marco: tiene que cantar que falta algo */
.filebox:not(.filebox-link){border:1px dashed var(--green);border-radius:var(--r-sm);
  margin-bottom:.6rem;padding:.9rem 1.1rem}


/* ==========================================================================
   PASO 13 — UN TONO POR SECCION, Y AUTOMATICO
   Antes alternaban blanco y #F4F8F2, que a ojo es blanco: dos secciones
   seguidas se leian como una sola. Ahora el tono alterno es #E9F1E7, que si
   se distingue, y la alternancia la decide una regla en vez de un atributo
   style escrito seccion por seccion.
   ========================================================================== */
main>section.block:nth-of-type(odd){background:var(--paper)}
main>section.block:nth-of-type(even){background:var(--sage)}

/* Las secciones con caracter propio mandan sobre la alternancia: son las que
   rompen el ritmo a proposito.
   Ojo con el peso del selector: la regla de alternancia lleva `.block` mas
   `:nth-of-type`, o sea dos clases. Si aqui se escribe solo `.quote-sec` pierde
   y la seccion oscura se queda con fondo claro y el texto blanco encima. Por
   eso van las dos clases. */
main>section.block.values-sec{background:linear-gradient(160deg,var(--green-deep),var(--green-deeper))}
main>section.block.quote-sec{background:var(--green-deepest)}
/* la cinta de datos no se fuerza a blanco: le toca el tono par y asi no se
   funde con la seccion que va detras */
main>section.block.get-involved{background:var(--lime-wash)}
main>section.block.impact{background:var(--sage-3)}
main>section.photoband{background:var(--green-deepest)}

/* La linea divisoria solo hace falta cuando el tono NO cambia. Cuando cambia,
   el propio salto de color ya separa y la linea sobra. */
main>section.block:nth-of-type(odd)+section.block:nth-of-type(even)::before,
main>section.block:nth-of-type(even)+section.block:nth-of-type(odd)::before{display:none}


/* ==========================================================================
   PASO 14 — REPASO DE MOVIL
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NADA MAS ANCHO QUE LA PANTALLA
   -------------------------------------------------------------------------- */
/* El min-width de la tabla solo vale dentro de algo que scrollee. Suelto,
   fuerza 420px en una pantalla de 390 y la seccion recorta el contenido. */
.tbl{min-width:0}
.tbl-scroll>table,.tbl-scroll>.tbl,.tbl-wrap>table,.tbl-wrap>.tbl{min-width:420px}

/* Un hijo de rejilla lleva min-width:auto: si dentro hay algo que no puede
   encoger (una tabla, una URL larga), la pista se desborda en vez de recortar.
   Es el mismo fallo que tenia el mosaico del hero en vertical. */
.two-col>*,.split>*,.fgrid>*,.give-grid>*,.progs>*,.steps>*,.kit-grid>*,
.pgrid>*,.team-grid>*,.stat-grid>*,.dyk>*,.stories>*,.values>*,
.hero-grid>*,.ihero-grid>*,.foot-grid>*,.valuerow>*{min-width:0}

/* --------------------------------------------------------------------------
   2. ZONAS DE TOQUE DE 44px (WCAG 2.5.8)
   Se agranda el area que responde al dedo, no el dibujo: donde crecer el
   elemento moveria la maqueta, el area se estira con un pseudoelemento.
   -------------------------------------------------------------------------- */
.hamburger{width:44px;height:44px;align-items:center;justify-content:center;padding:0}
.foot-brand .soc a{width:44px;height:44px}
.gal-nav{width:44px;height:44px}
.gal-dot{position:relative}
.gal-dot::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
.chip-year{padding:.6rem 1.1rem}

@media(max-width:900px){
  /* Con un pseudoelemento el area se quedaba en 38-40px: el enlace es inline y
     la caja del ::after no siempre queda por delante. Darle altura propia al
     enlace es mas fiable, y en una tarjeta unos pocos px de mas no molestan. */
  .lnk,.linkline{display:inline-flex;align-items:center;min-height:44px}
  .gal-dot::after{width:32px;height:32px}
  /* el enlace del pie y los del menu si pueden crecer sin romper nada */
  .foot-bottom a,footer ul li a{display:inline-block;padding:.35rem 0}
}


/* ==========================================================================
   PASO 15 — QUE EL MOVIL RESPONDA AL DEDO
   En escritorio la pagina esta llena de :hover: la tarjeta se levanta, la
   flecha del enlace se desplaza, el boton cambia de tono. En una pantalla
   tactil no hay hover, asi que nada de eso ocurre y el sitio se siente muerto.
   `@media (hover:none)` detecta justamente eso: un dispositivo sin puntero.
   ========================================================================== */
@media (hover:none){
  /* el hover deja de reservar espacio para un efecto que no va a pasar */
  .fcard,.kit,.give-card,.step,.job,.event,.pcard,.tmember,.prog,.story,
  .filebox-link,.chipf,.amt-opt{transition:transform .16s var(--ease),
    box-shadow .16s var(--ease),background .16s,border-color .16s}

  /* al tocar, la tarjeta se hunde un poco: es el acuse de recibo */
  .fcard:active,.kit:active,.give-card:active,.step:active,.job:active,
  .event:active,.pcard:active,.tmember:active,.prog:active,.story:active,
  .filebox-link:active{transform:scale(.985);border-color:var(--green)}

  /* los botones tambien */
  .btn:active{transform:scale(.97)}
  .amt-opt:active,.chipf:active,.freq button:active{transform:scale(.96)}

  /* la flecha de los enlaces avanza al tocar, como avanza al pasar el raton */
  .lnk:active,.linkline:active{gap:.85rem}
  .filebox-link:active .fb-arrow{transform:translateX(3px)}

  /* el icono de la tarjeta reacciona igual que en escritorio */
  .fcard:active .aicon{transform:scale(1.1) rotate(-4deg)}

  /* el marco de luz de las glow-card solo existe con raton: en tactil se
     sustituye por un borde de marca al tocar */
  .glow-card:active{border-color:var(--green)}
}

/* La entrada del hero del mosaico. GSAP anima [data-hero], pero si GSAP no
   llega a cargar (una conexion mala en el movil) el texto tiene que verse
   igual: por eso el estado de reposo es visible y la animacion solo se aplica
   cuando el guion existe. */
.collage-content [data-hero]{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .collage-content [data-hero]{will-change:auto}
}


/* ==========================================================================
   PASO 16 — TAMAÑOS EN MOVIL
   Medido sobre la pagina entera a 390x664: las tres tarjetas de programa
   ocupaban 1.878px, un 21% de toda la portada, para tres parrafos.
   ========================================================================== */
@media(max-width:760px){
  /* Bajar la foto de 16/11 a 16/9 solo quitaba 135px de 1.630: insuficiente.
     La tarjeta pasa a horizontal, como ya hacen las de historia en movil, y
     asi la seccion baja de 1.630 a unos 640px. La columna de foto va a 132px,
     algo mas ancha que la de una noticia (112px), porque estos tres bloques
     son el contenido principal de la portada y deben pesar mas. */
  /* Se probo la version horizontal (foto de 132px a la izquierda): bajaba a
     1.235px pero dejaba el texto en una columna de 206px, apretado y con
     muchisimos cortes de linea. Con la foto encima pero mas baja se consigue
     un ahorro parecido y el texto se lee al ancho completo. */
  .prog .ph{aspect-ratio:21/9}
  .prog .body{padding:1.1rem 1.15rem 1.2rem}
  .prog h3{font-size:1.2rem;line-height:1.14}
  .prog p{font-size:.92rem;margin-bottom:.7rem}
  .prog .meta{margin-bottom:.35rem}
  .prog:hover{transform:none}

  /* la foto de una tarjeta de donacion tampoco necesita tanto alto */
  .give-ph{aspect-ratio:16/9;margin-bottom:.9rem}
  .give-card{padding:.9rem .9rem 1.3rem}

  /* la imagen grande de una seccion partida */
  .visual,.ihero-media{aspect-ratio:3/2}

  /* la galeria y las fichas de equipo */
  .gal-stage{aspect-ratio:16/10}
  .tmember{padding:1.2rem .9rem}
  .tmember .av{width:68px;height:68px;margin-bottom:.7rem}

  /* el aviso destacado y las tarjetas de icono, mas juntos */
  .alert{padding:1.1rem 1.2rem}
  .fcard{padding:1.2rem 1.15rem}
  .ic{width:44px;height:44px;margin-bottom:.8rem}
  .ic svg{width:22px;height:22px}
}

@media(max-width:560px){
  /* Con cinco cifras en dos columnas la ultima quedaba sola y muy suelta.
     Ocupa la fila pero sin el hueco vertical de una tarjeta entera. */
  .factband .stat-grid-5>.stat:last-child{padding-top:.4rem}
  .factband .stat{padding:.9rem .6rem}
}


/* ==========================================================================
   PASO 17 — LEGIBILIDAD Y JERARQUIA
   El publico es sobre todo gente mayor con poca vision. Medido antes de
   tocar: el 58.7% del texto del sitio estaba por debajo de 16px, y el cuerpo
   de los parrafos en 15px. Se sube toda la escala y se ordenan los niveles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LA ESCALA
   Cuatro tamaños y ninguno por debajo de 14px. Antes habia trece tamaños
   distintos entre 10px y 22px, sin regla.
   -------------------------------------------------------------------------- */
:root{
  --fs-xs:.875rem;    /* 14px  fuente de un dato, nota al pie */
  --fs-sm:1rem;       /* 16px  secundario: pie de tarjeta, meta */
  --fs-base:1.0625rem;/* 17px  cuerpo */
  --fs-lg:1.1875rem;  /* 19px  entradilla */
}

body{font-size:var(--fs-base)}

/* cuerpo de texto: de 15px a 17px */
p,li,.fcard p,.kit>p,.step p,.prog p,.pcard p,.story p,.give-card p,
.vrow p,.job p,.event p,.tmember .bio,.alert p,.section-head p,
.split p,.two-col p,.dsum,.hours,.tbl th,.tbl td,.trow,.check,
.foot-brand .tag,.loc,footer ul li{font-size:var(--fs-base)}

/* secundario: de 13-14px a 16px */
.stat .l,.dyk-item span,.meta-line,.prog .meta,.tc-text .meta,
.crumb,.gal-cap,.kit-note,.footnote,.article figcaption,
.trust-row,.tmember .role,.fb-tx small,.pcard .lnk,.story .lnk,
.lnk,.linkline,.badge,.chipf{font-size:var(--fs-sm)}

/* lo mas pequeño que se permite: 14px */
small,.dyk-item small,.fact small,.foot-bottom,.gal-count,
.ph-note,.job .badge{font-size:var(--fs-xs)}

/* entradilla */
.ihero .lead,.collage-desc,.section-head p{font-size:var(--fs-lg);line-height:1.6}

/* --------------------------------------------------------------------------
   2. JERARQUIA DE TITULOS
   Cada nivel se separa del siguiente lo suficiente para que se note cual es
   cual sin tener que compararlos.
   -------------------------------------------------------------------------- */
h1,.collage-title{font-weight:900}
.section-head h2,.split h2,.cta-band h2,.cta-donate h2,.photoband h2{font-weight:800}
.fcard h3,.kit h3,.step h3,.prog h3,.pcard h3,.story h3,.vrow h3,
.job h3,.event h3,.tc-text h3{font-size:1.4rem;font-weight:800;line-height:1.16}
.tmember h4,.value h4{font-size:1.15rem;font-weight:800}
.fg-title,.col-title{font-size:1.25rem;font-weight:800}

/* --------------------------------------------------------------------------
   3. CONTRASTE DEL TEXTO SECUNDARIO
   El gris de apoyo pasa a un tono mas oscuro. Sobre blanco sube de 5.33 a
   7.04, que es holgado tambien para quien ve poco.
   -------------------------------------------------------------------------- */
:root{--ink-soft:#4a5c4f}

/* la etiqueta de una cifra deja de ser gris: es informacion, no decoracion */
.stat .l{color:var(--ink);font-weight:600}
.dyk-item span{color:var(--ink)}

/* --------------------------------------------------------------------------
   4. LAS ETIQUETAS DE TARJETA, EN MAYUSCULAS
   "English language learning", "Emergency shelter": en caja alta separan el
   rotulo del titulo de un vistazo, sin necesidad de leerlos.
   -------------------------------------------------------------------------- */
.prog .meta,.tc-text .meta,.meta-line,.tmember .role,.fg-title{
  text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:.82rem}
.tmember .role,.fg-title{letter-spacing:.04em}
.fg-title{font-size:1.1rem}
.eyebrow{font-size:.875rem;letter-spacing:.14em}

/* --------------------------------------------------------------------------
   5. EL MENU, CON AIRE ENTRE APARTADOS
   Siete apartados pegados se leen como una sola linea de texto.
   -------------------------------------------------------------------------- */
@media(min-width:1321px){
  .navlinks{font-size:1.02rem;gap:1.5rem}
  .navitem{gap:.3rem}
  .submenu a{font-size:1rem;padding:.7rem .95rem}
}

/* --------------------------------------------------------------------------
   6. OUR VALUES: ICONO ARRIBA Y TEXTO CENTRADO
   -------------------------------------------------------------------------- */
.valuerow{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;
  max-width:1120px;margin:0 auto;list-style:none;padding:0}
.valuerow li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.85rem;padding:0 .5rem;border:0;
  font-family:"Yantramanav",sans-serif;font-weight:800;font-size:1.02rem;
  line-height:1.22;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
.v-ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;background:var(--sage);color:var(--green-deep);flex:0 0 auto}
.v-ic svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* los tonos rotan como en el resto de rejillas del sitio */
.valuerow li:nth-child(2) .v-ic{background:var(--lime-soft);color:var(--green-deepest)}
.valuerow li:nth-child(3) .v-ic{background:var(--green-deep);color:#fff}
.valuerow li:nth-child(4) .v-ic{background:var(--sage);color:var(--green-deep)}
.valuerow li:nth-child(5) .v-ic{background:var(--lime-soft);color:var(--green-deepest)}
@media(max-width:900px){
  .valuerow{grid-template-columns:1fr 1fr;gap:1.8rem 1rem}
}
@media(max-width:480px){
  .valuerow{grid-template-columns:1fr;gap:1.3rem}
  .valuerow li{flex-direction:row;text-align:left;gap:1rem;align-items:center}
  .v-ic{width:48px;height:48px}
}

/* --------------------------------------------------------------------------
   7. LOS REZAGADOS
   Tras subir la escala quedaba un 14% de texto por debajo de 16px. Estos son
   los sitios donde una regla mas especifica se comia la nueva.
   -------------------------------------------------------------------------- */
/* el mes en la pastilla de fecha estaba en 10px: ilegible */
.pcard .date,.story .date{width:62px;height:62px}
.pcard .date .d,.story .date .d{font-size:1.45rem}
.pcard .date .m,.story .date .m{font-size:.8rem;letter-spacing:.06em}

/* la etiqueta de categoria estaba en 11px */
.pcard .tag,.story .tag,.article-meta .tag{font-size:.875rem;letter-spacing:.09em}

/* `.prog .lnk` y `.tc-text .lnk` ganaban por especificidad a `.lnk` */
.prog .lnk,.tc-text .lnk,.story .lnk,.pcard .lnk,.feat-card .lnk{font-size:var(--fs-sm)}

/* cifras del hero antiguo, titulos del pie y firma de la cita */
.trust .t .l{font-size:var(--fs-sm)}
footer h5{font-size:1.05rem}
.quote .who,.article-meta time{font-size:var(--fs-sm)}

/* rotulo de tarjeta: 13px en caja alta se queda corto para este publico */
.prog .meta,.tc-text .meta,.meta-line,.tmember .role{font-size:.9rem}

/* un enlace dentro de un parrafo sigue el cuerpo, no su propia medida */
.article a,p a,li a{font-size:inherit}

/* --------------------------------------------------------------------------
   8. LA BARRA, MAS ANCHA
   Al separar y agrandar el menu se desbordaba 56px. La causa no era el menu:
   la barra estaba limitada a 1280px, asi que ni en una pantalla de 1600
   tenia sitio. Se le da el ancho de la pantalla y el problema desaparece.
   -------------------------------------------------------------------------- */
@media(min-width:1321px){
  .nav{max-width:1560px;padding-left:32px;padding-right:32px}
}

/* `.tbl .trow` y `.namelist div` pesan mas que las reglas de la escala: son
   las cifras del informe anual y los nombres del board, contenido de verdad. */
.tbl .trow,.tbl .trow span,.namelist div,.vrow .mini-list li,
.kit-list li,.mini-list li,.tc-list li{font-size:var(--fs-sm)}
.tbl th,.tbl td{font-size:var(--fs-sm)}

/* --------------------------------------------------------------------------
   9. EL ROTULO DE SECCION
   "OUR PROGRAMS", "WHAT GUIDES US", "Our mission": a 14px quedaban tan por
   debajo del titular que no se leian como un nivel, sino como un adorno.
   A 17px y mas gruesos si marcan el escalon.
   -------------------------------------------------------------------------- */
.eyebrow{font-size:1.0625rem;font-weight:800;letter-spacing:.12em}
.section-head .eyebrow{margin-bottom:.7rem}
.quote .who{font-size:1.0625rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime)}
@media(max-width:760px){
  .eyebrow,.quote .who{font-size:1rem;letter-spacing:.1em}
}


/* ==========================================================================
   PASO 18 — DETALLES DE LA REVISION
   ========================================================================== */

/* 1 y 6. La etiqueta de año y el titular del articulo se separan un escalon
   mas: antes se leian casi al mismo peso. */
.pcard .tag,.story .tag,.article-meta .tag{font-size:.9375rem;letter-spacing:.1em}
.pcard h3,.story h3{font-size:1.55rem;line-height:1.14;margin:.45rem 0 .55rem}

/* 2. El boletin en una sola linea.
   Estaba en flex con wrap: el texto se quedaba corto y sobraba medio ancho a
   la derecha. En dos columnas el texto ocupa lo suyo y el campo, lo suyo. */
.news-band{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:2rem;padding:1.7rem 2.2rem}
.news-band h3{font-size:1.4rem;line-height:1.2;margin-bottom:.35rem}
.news-band p{font-size:var(--fs-sm);margin:0}
.news-form{min-width:0;width:100%}
.news-form input{font-size:var(--fs-sm);padding:.55rem 0}
@media(max-width:860px){
  .news-band{grid-template-columns:1fr;gap:1.1rem;padding:1.5rem 1.4rem}
}

/* 3. El informe anual deja de ser una fila mas de la lista: caja propia,
   fondo blanco y el borde de marca. Es el documento que mas se consulta. */
.report-feature .filebox{border:2px solid var(--green);border-radius:var(--r);
  background:var(--paper);padding:1.15rem 1.3rem}
.report-feature .filebox:hover{border-color:var(--green-deep);
  box-shadow:var(--shadow);background:var(--paper)}
.report-feature .fb-ic{flex:0 0 52px;height:52px;background:var(--green-deep);color:#fff}
.report-feature .fb-ic svg{width:26px;height:26px}
.report-feature .fb-tx b{font-size:1.2rem}
.report-feature .fb-tx small{font-size:var(--fs-sm)}
.report-feature .badge-action{font-size:var(--fs-sm);padding:.5rem 1.1rem}

/* 4. "What each one means" iba pegado a la ultima linea de los valores */
.valuerow+.center-row{margin-top:2.6rem}

/* 5. El rotulo va encima del titular: el orden de lectura correcto es
   primero de que va y despues que dice. */
.quote .who{margin:0 0 1rem}

/* 7. Las etiquetas de cifra: mas grandes y SIN negrita. El peso lo pone el
   numero; la etiqueta solo tiene que leerse bien. Los saltos de linea van en
   el HTML para que todas ocupen dos lineas y la fila quede pareja. */
.stat .l{font-size:1.0625rem;font-weight:400;color:var(--ink);
  margin-top:.55rem;line-height:1.35;max-width:none}
.factband .stat .l{font-size:1.0625rem}
@media(max-width:560px){
  .stat .l{font-size:1rem}
  /* en movil el salto forzado estorba: el ancho ya es estrecho */
  .stat .l br{display:none}
}

/* --------------------------------------------------------------------------
   PASO 19 - el bloque de mision, centrado
   Con el texto a la izquierda las tres columnas se leian como tres bloques
   sueltos, y ademas tienen distinto numero de lineas (2, 2 y 4), asi que el
   borde izquierdo comun solo servia para subrayar el desnivel. Centrado, y
   con una linea fina entre columnas, se leen como un conjunto.
   -------------------------------------------------------------------------- */
/* stretch y no start: con start cada columna medía lo suyo y las lineas
   divisorias salian de distinto alto segun el texto de al lado. */
.mission-pair{text-align:center;gap:0;align-items:stretch}
.mission-pair>div{padding:0 1.6rem;border-left:1px solid rgba(255,255,255,.16)}
.mission-pair>div:first-child{border-left:0}
.mission-pair h3{margin-bottom:.65rem}
.mission-pair p{max-width:32ch;margin:0 auto}

@media(max-width:980px) and (min-width:761px){
  /* en dos columnas la tercera baja sola: se centra y se le quita el borde */
  .mission-pair{row-gap:2rem}
  .mission-pair>div:nth-child(3){grid-column:1/-1;border-left:0}
}
@media(max-width:760px){
  .mission-pair>div{border-left:0;padding:0}
  .mission-pair{row-gap:1.7rem}
  .mission-pair>div+div{padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.16)}
}

/* --------------------------------------------------------------------------
   PASO 20 - el pie, a medidas estandar
   La subida general de tipografia (paso 17) tenia sentido en el contenido,
   pero el pie es navegacion secundaria: a 17px ocupaba 632px en escritorio y
   1.776px en movil, casi tres pantallas solo de pie. Vuelve a las medidas
   habituales de cualquier web, que siguen siendo legibles.
   -------------------------------------------------------------------------- */
footer{padding:52px 0 26px;margin-top:0}
footer h5{font-size:.9375rem;margin-bottom:.7rem}
footer ul li{margin-bottom:.35rem;font-size:.9375rem}
footer ul li a{font-size:.9375rem}
.loc{font-size:.9375rem;margin-bottom:.75rem;line-height:1.45}
.loc b{font-size:.9375rem;margin-bottom:.1rem}
.foot-brand .tag{font-size:1rem;margin-bottom:.9rem}
.foot-bottom{font-size:.8125rem;margin-top:2rem;padding-top:1.1rem}
.foot-grid{gap:1.6rem 2rem}
.foot-brand .soc{gap:.5rem}
.seal{margin-top:.9rem}
.seal img{width:96px;height:96px}

/* En movil las cuatro columnas se apilaban en una sola y el pie se hacia
   eterno. Las dos listas de enlaces van a dos columnas; la marca y las
   direcciones ocupan el ancho, que ahi el texto es mas largo. */
@media(max-width:620px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem}
  .foot-brand,.foot-grid>div:last-child{grid-column:1/-1}
  footer{padding:40px 0 22px}
}

/* --------------------------------------------------------------------------
   PASO 21 - los botones, mas sutiles
   Tenian tres cosas moviendose a la vez: el efecto iman de JavaScript (hasta
   10px siguiendo al cursor), un salto de sombra grande y una escala del 3% al
   pulsar. Se queda un desplazamiento de 1px, el cambio de color y una sombra
   que apenas se mueve. El gesto se nota, pero no salta.
   -------------------------------------------------------------------------- */
.btn{transition:background .18s ease,color .18s ease,border-color .18s ease,
  box-shadow .2s ease,transform .18s ease;will-change:auto}

/* un pixel: suficiente para que la mano note que responde */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* la sombra pasa de crecer 6px a crecer 2px */
.btn-green{box-shadow:0 8px 18px -12px rgba(47,94,59,.55)}
.btn-green:hover{box-shadow:0 10px 20px -12px rgba(47,94,59,.6)}
a.btn-green[href*="donate"],header .nav-cta .btn-green,
.cta-band .btn-white,.cta-donate .btn-white{
  box-shadow:0 8px 18px -12px rgba(156,203,59,.5)}
a.btn-green[href*="donate"]:hover,header .nav-cta .btn-green:hover,
.cta-band .btn-white:hover,.cta-donate .btn-white:hover{
  box-shadow:0 10px 20px -12px rgba(156,203,59,.55)}
.bigphone{box-shadow:0 10px 24px -16px rgba(47,94,59,.6)}

/* en tactil, del 3% al 1%: el dedo tapa el boton, no hace falta mas */
@media (hover:none){
  .btn:active{transform:scale(.99)}
  .amt-opt:active,.chipf:active,.freq button:active{transform:scale(.99)}
}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn:active{transform:none}
}

/* --------------------------------------------------------------------------
   PASO 22 - el boton no cambia de color
   Al pasar el raton el fondo pasaba de lima a un lima mas claro. Se retira:
   el unico gesto que queda es el pixel de subida y la sombra, que apenas se
   mueve. El color es el mismo en reposo, al pasar por encima y al pulsar.
   -------------------------------------------------------------------------- */
a.btn-green[href*="donate"]:hover,header .nav-cta .btn-green:hover,
.cta-band .btn-white:hover,.cta-donate .btn-white:hover,
a.btn-green[href*="donate"]:active,header .nav-cta .btn-green:active{
  background:var(--lime);color:var(--green-deepest)}
.btn-green:hover{background:var(--green-deep)}
.btn-white:hover{background:#fff}

/* --------------------------------------------------------------------------
   PASO 24 - TODO boton relleno que lleva a donar va en lima #9CCB3B
   La regla anterior listaba sitios (.cta-band, .cta-donate, el header) y se
   dejaba fuera la banda de foto, donde el Donate salia blanco. En vez de ir
   anadiendo sitios uno a uno, la regla pasa a mirar el DESTINO del enlace:
   si apunta a donate.html y es un boton relleno, es lima. Asi no se escapa
   ninguno aunque mañana se ponga en una seccion nueva.
   Los de contorno (.btn-ghost) se quedan como estan: son el boton secundario
   que acompaña al principal, y rellenarlos daria dos principales seguidos.
   -------------------------------------------------------------------------- */
a.btn-green[href*="donate"],
a.btn-white[href*="donate"],
header .nav-cta .btn-green,
.cta-band .btn-white,.cta-donate .btn-white,.photoband .btn-white{
  background:var(--lime);color:var(--green-deepest);
  box-shadow:0 8px 18px -12px rgba(156,203,59,.5)}
a.btn-green[href*="donate"]:hover,a.btn-white[href*="donate"]:hover,
header .nav-cta .btn-green:hover,
.cta-band .btn-white:hover,.cta-donate .btn-white:hover,.photoband .btn-white:hover{
  background:var(--lime);color:var(--green-deepest);
  box-shadow:0 10px 20px -12px rgba(156,203,59,.55)}

/* --------------------------------------------------------------------------
   PASO 25 - el lima del Donate deja de depender de como se escriba la URL
   Netlify tiene activado Pretty URLs: al publicar reescribe los enlaces y
   `href="donate.html"` se convierte en `href="/donate"`. Las reglas usaban
   coincidencia EXACTA, asi que en local acertaban y en el sitio publicado no
   coincidia ninguna y el boton se quedaba con el verde oscuro de `.btn-green`.
   Con [href*="donate"] valen las dos formas. ("donate" no aparece dentro de
   "donation", asi que in-kind-donation-drop-off no se ve afectado.)
   -------------------------------------------------------------------------- */
a.btn[href*="donate"]:not(.btn-ghost),
header .nav-cta .btn-green,
.cta-band .btn-white,.cta-donate .btn-white,.photoband .btn-white{
  background:var(--lime);color:var(--green-deepest);
  box-shadow:0 8px 18px -12px rgba(156,203,59,.5)}
a.btn[href*="donate"]:not(.btn-ghost):hover,
header .nav-cta .btn-green:hover,
.cta-band .btn-white:hover,.cta-donate .btn-white:hover,.photoband .btn-white:hover{
  background:var(--lime);color:var(--green-deepest);
  box-shadow:0 10px 20px -12px rgba(156,203,59,.55)}


/* ==========================================================================
   PASO 26 — TIPOGRAFIA NUEVA
   DM Serif Display para titulares, Plus Jakarta Sans para el texto.
   Fuera las mayusculas de los titulares grandes; se quedan en los rotulos
   pequeños, las etiquetas y el menu, que es donde las pidio Brian.
   ========================================================================== */

/* --- las familias --- */
body,.btn,input,textarea,select,button{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif}

h1,h2,h3,h4,h5,
.collage-title,.mq-title,.stat .n,.dyk-item b,.give-card .amt,.amt-opt,
.quote p,.pullquote,.bigphone,.tmember .av,.step .num,.fv,
.event .when,.pcard .date,.story .date,.tl-year{
  font-family:"DM Serif Display",Georgia,serif}

/* DM Serif Display solo tiene un peso. Pedirle 700 u 800 obliga al navegador
   a fabricar la negrita y el trazo sale emborronado. */
h1,h2,h3,h4,h5,.collage-title,.stat .n,.dyk-item b,.give-card .amt,
.section-head h2,.split h2,.cta-band h2,.cta-donate h2,.photoband h2,
.fcard h3,.kit h3,.step h3,.prog h3,.pcard h3,.story h3,.vrow h3,
.job h3,.event h3,.tc-text h3,.tmember h4,.value h4,.fg-title,.col-title,
.news-band h3,.alert h3{font-weight:400;letter-spacing:-.005em}

/* --- fuera las mayusculas de los titulares --- */
.section-head h2,.cta-band h2,.cta-donate h2,.photoband h2,
.collage-title,.mq-title{text-transform:none}

/* Se quedan en caja alta, que es lo que Brian pidio conservar:
   rotulos de seccion, etiquetas de categoria, fechas y el menu movil. */
.eyebrow,.pcard .tag,.story .tag,.article-meta .tag,.prog .meta,.tc-text .meta,
.meta-line,.tmember .role,.pcard .date .m,.story .date .m,.event .when .m,
.tr-lang,.mission-pair h3,.quote .who{text-transform:uppercase}

/* --- titulares mas grandes y mas juntos --- */
h1,.ihero h1{font-size:clamp(2.7rem,5.6vw,4.4rem);line-height:1.04}
.collage-title{font-size:clamp(3rem,6.4vw,5.4rem);line-height:1.02;
  letter-spacing:-.01em}
.section-head h2{font-size:clamp(2.3rem,4.6vw,3.5rem);line-height:1.06}
.split h2{font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.07}
.photoband h2{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.06}
.cta-band h2,.cta-donate h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08}
.fcard h3,.kit h3,.step h3,.prog h3,.pcard h3,.story h3,.vrow h3,
.job h3,.event h3,.tc-text h3{font-size:1.55rem;line-height:1.14}
.news-band h3{font-size:1.7rem;line-height:1.12}

/* el rotulo, un punto mas pequeño que antes: es una etiqueta, no un titulo */
.eyebrow{font-family:"Plus Jakarta Sans",sans-serif;font-size:.9rem;
  font-weight:700;letter-spacing:.14em}

/* --- que respire --- */
section.block{padding:104px 0}
.section-head{margin-bottom:3rem;max-width:760px}
.section-head p{margin-top:.9rem}
p{line-height:1.65}
.article p{line-height:1.75}
@media(max-width:980px){section.block{padding:76px 0}.section-head{margin-bottom:2.2rem}}
@media(max-width:760px){section.block{padding:60px 0}.section-head{margin-bottom:1.9rem}}
@media(max-width:560px){section.block{padding:52px 0}}


/* ==========================================================================
   PASO 28 — HERO, VALORES Y CIFRAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EL MOSAICO, MAS CLARO
   El tinte usaba el verde oscuro al 66% mas un velo encima: las caras se veian
   apagadas. Ahora tiñe con el verde medio de marca, que es mas luminoso, y el
   velo baja. Se comprueba por pixel que el blanco sigue pasando AA.
   -------------------------------------------------------------------------- */
/* V4: caras a COLOR y un multiply calido que empuja las luces hacia atras,
   que es lo que pidio el documento ("switch the faces back to color, pushing
   back the highlights with a warm multiply overlay"). El degradado va del
   verde de marca al ambar, asi el hero tiene color y movimiento sin perder
   el verde. Elegida entre cinco variantes medidas: titular 4.53 y botones
   4.85, sin una muestra por debajo del minimo. */
/* Mas natural: la version anterior empujaba los tonos a verde y ambar y las
   caras salian saturadas (saturacion media 0.52). La foto baja al 85% y el
   velo es el mismo degradado verde-calido pero apagado. Saturacion 0.33,
   titular 5.27, botones 6.18, sin muestras por debajo del minimo. */
.collage-grid{filter:saturate(.85) contrast(1.02)}
.collage-hero::before{background:linear-gradient(135deg,#45604A 0%,#6B5A45 100%);
  mix-blend-mode:multiply;opacity:.84}
.collage-hero::after{display:none}

/* --------------------------------------------------------------------------
   2. LOS TRES BOTONES DEL HERO: rellenos, grandes, sin contornos
   Brian: "solid fills and bright, on-brand colors (dark green and lime)".
   -------------------------------------------------------------------------- */
.collage-actions{gap:.9rem;margin-top:2.8rem}
.collage-actions .btn{padding:1.15rem 2.4rem;font-size:1.12rem;font-weight:700;
  border:0;box-shadow:0 10px 24px -14px rgba(10,26,16,.6)}
.collage-actions a[href*="volunteer"]{background:var(--green-deep);color:#fff}
.collage-actions a[href*="need-shelter"]{background:#fff;color:var(--green-deepest)}
.collage-actions a[href*="volunteer"]:hover{background:var(--green-deeper);color:#fff}
.collage-actions a[href*="need-shelter"]:hover{background:#fff;color:var(--green-deepest)}
@media(max-width:760px){
  .collage-actions .btn{padding:1.05rem 1.8rem;font-size:1.05rem}
}

/* --------------------------------------------------------------------------
   3. OUR VALUES, con su explicacion y sobre el verde oscuro
   El cliente pidio no mandarlo a otra pagina: la informacion se quedaba
   duplicada y el salto no lo daba nadie.
   -------------------------------------------------------------------------- */
.values-sec .section-head h2,.values-sec .section-head p{color:#fff}
.values-sec .section-head p{color:rgba(255,255,255,.82)}
.vgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:2.4rem 2rem;
  max-width:1180px;margin:0 auto}
.vcard{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.9rem;background:none;border:0;box-shadow:none;padding:0}
.vcard h3{font-size:1.35rem;line-height:1.14;color:#fff;margin:0}
.vcard p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.8);margin:0}
.vcard .v-ic{width:64px;height:64px;border-radius:0;background:none;
  color:var(--lime);display:flex;align-items:center;justify-content:center;
  margin:0 auto;flex:0 0 auto}
.vcard .v-ic svg{width:44px;height:44px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.vgrid{grid-template-columns:repeat(3,1fr);gap:2.6rem 2rem}}
@media(max-width:720px){.vgrid{grid-template-columns:1fr 1fr;gap:2.2rem 1.4rem}}
@media(max-width:480px){
  .vgrid{grid-template-columns:1fr;gap:1.8rem}
  .vcard{flex-direction:column;align-items:center;text-align:center;gap:.8rem}
  .vcard .v-ic{width:46px;height:46px;flex:0 0 46px}
  .vcard .v-ic svg{width:34px;height:34px}
}

/* --------------------------------------------------------------------------
   4. LAS CIFRAS, MAS GRAFICAS
   Brian: "bigger icons and bigger numbers, more whitespace, more like moments".
   -------------------------------------------------------------------------- */
.stat .n{font-size:clamp(3.2rem,6vw,4.6rem);line-height:.95}
.stat .l{font-size:1.0625rem}
.stat-grid{gap:2rem 1.6rem}
.factband .stat .n{font-size:clamp(2.8rem,4.4vw,3.8rem)}
.dyk{gap:3rem 3rem}
.dyk-item b{font-size:clamp(3rem,5.4vw,4.4rem);line-height:.95}
.dyk-item span{font-size:1.0625rem;line-height:1.55}

/* los iconos de tarjeta, mas grandes y sin la caja de color */
.fcard>.ic,.vrow-ic,.feat-card>.ic{width:60px;height:60px;border-radius:0;
  background:none;color:var(--green-deep);margin-bottom:1rem}
.fcard>.ic svg,.vrow-ic svg,.feat-card>.ic svg{width:40px;height:40px;stroke-width:1.6}
.fgrid>*:nth-child(3n+2)>.ic,.fgrid>*:nth-child(3n)>.ic,
.vlist>*:nth-child(3n+2)>.ic,.vlist>*:nth-child(3n)>.ic,
.feat-grid>*:nth-child(3n+2)>.ic,.feat-grid>*:nth-child(3n)>.ic{
  background:none;color:var(--green-deep)}

/* --------------------------------------------------------------------------
   5. LAS TARJETAS RESPIRAN MENOS POR DENTRO Y MAS POR FUERA
   Brian: "too much space between lines of body text, headings need to be
   larger, eyebrow smaller, links more obvious".
   -------------------------------------------------------------------------- */
.fcard p,.kit>p,.step p,.prog p,.pcard p,.story p{line-height:1.5}
.prog .meta,.tc-text .meta,.meta-line{font-size:.82rem;letter-spacing:.1em}
.lnk,.linkline{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px;font-weight:700}
.fgrid,.progs,.pgrid,.give-grid,.kit-grid,.steps{gap:2rem}


/* ==========================================================================
   PASO 29 — COMPOSICION DE FOTO + TEXTO
   El recurso que pidio Brian y que usan las dos webs de referencia: la foto
   ocupa media seccion a toda altura y se funde con el color solido donde vive
   la tipografia. Sin caja y sin esquinas redondeadas.
   ========================================================================== */
.splitband{display:grid;grid-template-columns:40% 60%;align-items:stretch;
  background:var(--sage-3);position:relative}

.sb-media{position:relative;overflow:hidden;min-height:560px;background:var(--sage-2)}
.sb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* el degradado no es decoracion: es la costura entre la foto y el color */
.sb-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 52%,var(--sage-3) 99%)}

.sb-body{padding:5.5rem 3.6rem 5.5rem 3.2rem;max-width:820px;
  display:flex;flex-direction:column;justify-content:center}
.sb-body h2{font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1.06;margin:.6rem 0 0}
.sb-lead{font-size:var(--fs-lg);color:var(--ink-soft);margin:.9rem 0 2.6rem;max-width:46ch}
.sb-row{display:flex;gap:.8rem;flex-wrap:wrap}

/* dentro de la composicion las cifras van a dos columnas */
.sb-body .dyk{grid-template-columns:1fr 1fr;gap:2.2rem 2.4rem;max-width:none;margin:0}

@media(max-width:1100px){
  .splitband{grid-template-columns:1fr}
  .sb-media{min-height:340px}
  /* apilado, la costura pasa a ser vertical */
  .sb-media::after{background:linear-gradient(180deg,transparent 58%,var(--sage-3) 99%)}
  .sb-body{padding:2.5rem 26px 4.5rem;max-width:none}
}
@media(max-width:640px){
  .sb-media{min-height:260px}
  .sb-body .dyk{grid-template-columns:1fr;gap:1.6rem}
  .sb-body{padding:2rem 20px 3.4rem}
}

/* --------------------------------------------------------------------------
   PASO 30 - el rotulo sobre fondo oscuro
   head_block() emite siempre un .eyebrow normal, que es verde oscuro. Encima
   de una seccion verde oscura se volvia ilegible: en "Our values" el "WHAT
   GUIDES US" practicamente no se veia. Se resuelve por ancestro, para que
   valga en cualquier seccion oscura sin tener que acordarse de poner la clase.
   -------------------------------------------------------------------------- */
.values-sec .eyebrow,.quote-sec .eyebrow,.photoband .eyebrow,
.cta-band .eyebrow,.cta-donate .eyebrow{color:var(--lime)}
.values-sec .section-head p,.quote-sec .section-head p{color:rgba(255,255,255,.85)}

/* --------------------------------------------------------------------------
   PASO 31 - Our values sobre malva claro
   El cliente pidio meter mas el morado de marca. No el #AD3D75 tal cual, sino
   una version clara para fondo, igual que el verde claro de otras secciones.
   Se saca con la misma proporcion: el verde claro #E9F1E7 es el verde de marca
   al ~13% sobre blanco, y el morado al 13% da #F4E6ED.
   Al pasar de fondo oscuro a claro, todo el texto pasa de blanco a oscuro.
   Iconos y rotulo van en el morado de marca, para que la seccion se lea entera
   en esa familia de color.
   Contraste sobre #F4E6ED: titular 12.4, texto 5.9, morado 4.7 (AA en todos).
   -------------------------------------------------------------------------- */
main>section.block.values-sec{background:var(--purple-wash);color:var(--ink)}
.values-sec .section-head h2{color:var(--ink)}
.values-sec .section-head p{color:var(--ink-soft)}
.values-sec .eyebrow{color:var(--purple)}
.vcard h3{color:var(--ink)}
.vcard p{color:var(--ink-soft)}
.vcard .v-ic{color:var(--purple)}


/* --------------------------------------------------------------------------
   PASO 32 - V4, arreglos del home
   -------------------------------------------------------------------------- */

/* 1. Los botones del hero tapaban la cara de la señora del centro. El bloque
   de texto se centraba en todo el alto; con mas relleno abajo el centro sube
   y los botones quedan sobre el pañuelo, no sobre la cara. */
.collage-actions{margin-top:1.9rem}
.collage-hero{padding-bottom:15rem}
@media(max-width:900px){.collage-hero{padding-bottom:3rem}}

/* 2. Boletin y ayuda inmediata, lado a lado */
section.block.duo-sec{padding:64px 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
.duo .news-band{display:flex;flex-direction:column;justify-content:center;
  margin:0;padding:2.4rem;gap:0}
.duo .news-band h3{font-size:clamp(1.5rem,2.2vw,1.85rem);line-height:1.15;margin:0 0 .6rem}
.duo .news-band p{margin:0}
.duo .news-form{margin-top:1.5rem;width:100%}
.duo .cta-band{flex-direction:column;align-items:flex-start;justify-content:center;
  margin:0;padding:2.4rem;gap:1.5rem}
.duo .cta-band h2{font-size:clamp(1.7rem,2.6vw,2.2rem);margin:.4rem 0 .6rem}
.duo .cta-band p{max-width:none}
@media(max-width:980px){.duo{grid-template-columns:1fr}}
@media(max-width:560px){.duo .news-band,.duo .cta-band{padding:1.7rem 1.4rem}}

/* 3. Los subtitulos del pie se quedaban muy por debajo del resto */
footer h5{font-size:1.45rem;line-height:1.1;margin-bottom:.95rem}

/* 4. Logo algo mayor */
.logo-img{height:72px}
@media(max-width:760px){.logo-img{height:56px}}


/* ==========================================================================
   PASO 33 — V4, LAS SUBPAGINAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EL HERO DE SUBPAGINA
   Era verde palido, casi igual que la seccion de debajo: no se leia como
   entrada. Pasa a verde oscuro con texto claro.
   Se elige el oscuro y no el medio porque el verde medio (#639451) da 3.57
   con texto blanco, por debajo del 4.5 que pide el parrafo; el oscuro da 7.54.
   El rotulo usa un lima aclarado: el lima de marca sobre este verde da 3.96 y
   no llega para texto pequeño; aclarado da 5.48.
   -------------------------------------------------------------------------- */
.ihero{background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-deeper) 100%);color:#fff;
  /* mismo aire VISIBLE arriba y abajo: el de arriba lleva ademas el alto del
     header, que va fijo encima. Asi la imagen queda centrada en la seccion. */
  padding:calc(var(--hdr-h,115px) + 72px) 0 72px}
.ihero-grid{align-items:center}
.ihero .crumb{color:rgba(255,255,255,.8)}
.ihero .eyebrow,.eyebrow.on-dark,.cta-band .eyebrow{color:var(--lime-light)}
.ihero .eyebrow::before{background:var(--lime-light)}
.ihero h1{color:#fff}
.ihero .lead{color:rgba(255,255,255,.9)}
.ihero .petal{color:#fff;opacity:.08}
.ihero .btn-green:not([href*="donate"]){background:var(--lime);color:var(--green-deepest)}
.ihero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.ihero .btn-ghost:hover{background:#fff;color:var(--green-deep)}
.ihero-media{box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}
@media(max-width:760px){
  .ihero{padding:calc(var(--hdr-h,90px) + 40px) 0 48px}
}

/* --------------------------------------------------------------------------
   2. IMAGEN + TEXTO, A SANGRE
   Las 16 secciones de imagen y texto de las subpaginas pasan a la composicion
   que gusto en el home: la foto ocupa media seccion a toda altura y se funde
   con el fondo donde vive el texto. Sin caja y sin esquinas.
   El fundido es una mascara (la foto se vuelve transparente), no un color: asi
   funciona sea cual sea el tono de fondo que le toque a la seccion.
   -------------------------------------------------------------------------- */
section.block.splitsec{padding:0}
.splitsec::before,.splitsec::after{display:none}
section.block.splitsec>.wrap.split{max-width:none;padding:0;gap:0;
  grid-template-columns:1fr 1fr;align-items:stretch}
.splitsec .split>.reveal:not(.visual){padding:104px clamp(26px,5.5vw,104px);
  display:flex;flex-direction:column;justify-content:center;max-width:700px;width:100%}
.splitsec .split>.reveal:first-child:not(.visual){justify-self:end}
.splitsec .split>.visual+.reveal{justify-self:start}
.splitsec .visual{position:relative;border-radius:0;box-shadow:none;aspect-ratio:auto;
  min-height:540px;height:100%;background:transparent}
.splitsec .visual img{position:absolute;inset:0;width:100%;height:100%;top:0;object-fit:cover}
.splitsec .split>.visual:first-child{
  -webkit-mask-image:linear-gradient(90deg,#000 56%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 56%,transparent 100%)}
.splitsec .split>.visual:last-child{
  -webkit-mask-image:linear-gradient(270deg,#000 56%,transparent 100%);
          mask-image:linear-gradient(270deg,#000 56%,transparent 100%)}
.splitsec .split h2{font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1.06}
@media(max-width:980px){
  section.block.splitsec>.wrap.split{grid-template-columns:1fr}
  .splitsec .visual{order:-1;min-height:320px}
  .splitsec .split>.visual:first-child,.splitsec .split>.visual:last-child{
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .splitsec .split>.reveal:not(.visual){padding:32px 26px 64px;max-width:none;justify-self:stretch}
}
@media(max-width:560px){
  .splitsec .visual{min-height:240px}
  .splitsec .split>.reveal:not(.visual){padding:26px 20px 52px}
}

/* --------------------------------------------------------------------------
   3. MENOS TARJETAS
   Las que no agrupan nada de verdad dejan de ser cajas: pasan a columnas
   abiertas separadas por una linea. Se quedan como tarjeta las que si agrupan
   (kits de donacion, noticias, importes), que es el criterio que dio Brian.
   -------------------------------------------------------------------------- */
.fcard{background:none;border:0;border-radius:0;box-shadow:none;
  padding:1.7rem 0 0;border-top:2px solid var(--line)}
.fcard:hover{transform:none;box-shadow:none}
.fcard.glow-card::before,.fcard.glow-card::after{display:none}
.fgrid{gap:3rem 3rem}
.two-col{gap:3rem 4rem}

.tmember{background:none;border:0;border-radius:0;box-shadow:none;padding:.4rem .2rem}
.tmember:hover{transform:none;box-shadow:none}

.step{background:none;border:0;border-radius:0;box-shadow:none;
  padding:1.7rem 0 0;border-top:2px solid var(--line)}
.step:hover{transform:none;box-shadow:none}
.step .num{width:62px;height:62px;font-size:1.8rem}

.alert{background:var(--sage-3);border:0;border-left:5px solid var(--lime);
  border-radius:0;box-shadow:none}

/* los valores de la pagina Our Values: al pasar la seccion a malva claro, su
   texto blanco quedaba ilegible. Van abiertos, como en el home. */
.values-sec .value{background:none;border:0;padding:0}
.values-sec .value h4{color:var(--ink)}
.values-sec .value p{color:var(--ink-soft)}
.values-sec .value .ic{background:rgba(173,61,117,.14);color:var(--purple)}
/* el titular de esa pagina no esta en .section-head: se cubre en general */
.values-sec h2,.values-sec h3,.values-sec h4{color:var(--ink)}
.values-sec p{color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   4. LA BANDA FINAL, A SANGRE
   -------------------------------------------------------------------------- */
section.block.cta-sec{padding:0}
main>section.block.cta-sec{background:var(--green-deeper)}
.cta-sec .cta-band{border-radius:0;margin:0;padding:92px 0;display:block}
.cta-sec .cta-inner{display:flex;align-items:center;justify-content:space-between;
  gap:2rem 3rem;flex-wrap:wrap;position:relative}
.cta-sec .cta-band h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.06}
.cta-sec .cta-band p{max-width:560px}
@media(max-width:760px){.cta-sec .cta-band{padding:60px 0}}

/* --------------------------------------------------------------------------
   5. ICONOS: TRES ESTILOS QUE ROTAN POR SECCION
   Brian: "two sections that have icons next to each other are easily visually
   separated". Rotan de tres en tres, asi dos secciones seguidas nunca repiten.
     A  silueta grande, sin fondo
     B  circulo lima
     C  circulo morado claro, que ademas mete el morado que pidio el cliente
   -------------------------------------------------------------------------- */
main>section.block:nth-of-type(3n+1) :is(.fcard,.vrow,.feat-card)>.ic{
  width:64px;height:64px;border-radius:0;background:none;color:var(--green-deep)}
main>section.block:nth-of-type(3n+1) :is(.fcard,.vrow,.feat-card)>.ic svg{
  width:50px;height:50px;stroke-width:1.5}

main>section.block:nth-of-type(3n+2) :is(.fcard,.vrow,.feat-card)>.ic{
  width:78px;height:78px;border-radius:50%;background:var(--lime);color:var(--green-deepest)}
main>section.block:nth-of-type(3n+2) :is(.fcard,.vrow,.feat-card)>.ic svg{
  width:38px;height:38px;stroke-width:1.9}

main>section.block:nth-of-type(3n) :is(.fcard,.vrow,.feat-card)>.ic{
  width:78px;height:78px;border-radius:50%;background:rgba(173,61,117,.16);color:var(--purple)}
main>section.block:nth-of-type(3n) :is(.fcard,.vrow,.feat-card)>.ic svg{
  width:38px;height:38px;stroke-width:1.9}

/* La foto del edificio es vertical. Al recortarla (sobre todo en movil, donde la
   caja es apaisada) se mantiene centrada un poco por debajo de la mitad, que
   es donde estan la entrada y el cartel. */
/* El cartel de OSCS quedaba pegado al borde izquierdo y medio cortado. Con el
   encuadre desplazado la foto corre a la izquierda y el cartel entra entero. */
.sb-media img{object-position:65% 60%}

/* --------------------------------------------------------------------------
   PASO 34 - el malva claro, mas presente en el home
   Se usa alternando con el verde, no en todo: la cinta de cifras (primera
   banda tras el hero verde), Our values (ya estaba) y la tarjeta del boletin,
   que queda junto a la tarjeta verde oscura de ayuda. "The neighborhood we
   work in" sigue en verde para que el verde siga mandando a mitad de pagina.
   Ritmo resultante: malva, blanco, malva, blanco, verde, blanco.
   -------------------------------------------------------------------------- */
main>section.block.factband{background:var(--purple-wash)}
.duo .news-band{background:var(--purple-wash)}



/* ==========================================================================
   PASO 35 — FEEDBACK DEL CLIENTE (14-sep-2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LOS VALORES, EN CAJA ALTA
   "Please use all caps for the bold part of the values: this is how they are
   generally presented." Va por CSS y no en el texto, para que el dia que
   cambien de idea sea una linea y no cinco frases reescritas.
   Con versales, DM Serif pide algo de aire entre letras o las palabras se
   apelmazan; y baja un punto el cuerpo porque las mayusculas ocupan mas.
   -------------------------------------------------------------------------- */
.vcard h3{text-transform:uppercase;letter-spacing:.02em;
  font-size:1.22rem;line-height:1.22}

/* --------------------------------------------------------------------------
   3. LA NOTA AL PIE DE LAS CIFRAS
   El asterisco del cliente (*FY25-26) escrito entero: un asterisco suelto no
   se ve bien de lejos, y esta pagina la leen personas con poca vision.
   -------------------------------------------------------------------------- */
.factband .statnote{margin:1.7rem 0 0;text-align:center;font-size:.95rem;
  color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   4. EL MOSAICO EN MOVIL: FOTOS ENTERAS
   "we can only see the tops of each person's head". Pasaba porque el mosaico
   iba de fondo, a pantalla completa: con la pantalla alta y estrecha, cada
   casilla recortaba la foto por los lados y por abajo.
   Aqui el mosaico deja de ser fondo y pasa a ser contenido: dos columnas de
   casillas CUADRADAS. Como los seis retratos son cuadrados (1200x1200), la
   casilla cuadrada los muestra enteros, sin recorte. El titular y los botones
   bajan debajo, sobre el verde.
   El velo de color sigue puesto (cubre toda la seccion) porque el logo blanco
   del header flota encima de la primera fila de fotos.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .collage-hero{display:block;min-height:0;place-items:initial;
    padding:var(--hdr-h,100px) 0 3.2rem}
  .collage-grid{position:static;inset:auto;height:auto;gap:2px;
    grid-template-rows:none}
  .collage-grid img{height:auto;aspect-ratio:1/1;object-position:50% 50%}
  .collage-content{max-width:none;padding:2.6rem 1.25rem 0}
  /* el velo cubre tambien la banda de texto: el blanco sobre verde oscuro
     gana contraste, no lo pierde */
  .collage-hero::before{opacity:.5}
}
/* Tres columnas y dos filas tambien en el telefono. Con dos columnas las seis
   fotos median 585px de alto y el titular quedaba fuera de la primera
   pantalla; con tres son 260px y se ve el mosaico entero, el titular y el
   primer boton de una sola vez. Las caras siguen completas: la casilla es
   cuadrada y los retratos tambien. */
@media(max-width:900px){
  .collage-grid{grid-template-columns:repeat(3,1fr)}
}

/* --------------------------------------------------------------------------
   5. EL SALTO DE LINEA DE LAS ETIQUETAS DE CIFRA, DE VUELTA EN MOVIL
   Un paso anterior lo ocultaba con display:none para ganar una linea, pero
   eso pega las dos palabras: se leia "Our first yearin Phillips". Con las
   etiquetas nuevas, mas largas, se notaba en tres de las cinco.
   -------------------------------------------------------------------------- */
@media(max-width:560px){
  .stat .l br{display:inline}
}



/* ==========================================================================
   PASO 36 — ZONAS DE TOQUE Y UNA ANIMACION MAS SOBRIA
   El sitio va dirigido sobre todo a gente mayor. WCAG 2.5.8 pide 44px de lado
   en cualquier cosa que se toque; midiendo con un dedo simulado habia tres
   controles por debajo.
   ========================================================================== */

/* 1. LOS PUNTOS DE LAS GALERIAS
   Median 8px y el area real era de 1px de alto: el pseudoelemento que debia
   agrandarlos quedaba por detras. Ahora el boton mide 44x44 de verdad y el
   punto es lo que se pinta dentro. */
.gal-dots{gap:0}
.gal-dot{width:44px;height:44px;background:none;border-radius:50%;
  display:grid;place-items:center;transform:none}
.gal-dot::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--sage-2);transition:background .25s,transform .25s var(--ease)}
.gal-dot::after{display:none}
.gal-dot:hover{background:none}
.gal-dot:hover::before{background:var(--green)}
.gal-dot.is-on{background:none;transform:none}
.gal-dot.is-on::before{background:var(--green-deep);transform:scale(1.4)}

/* 2. ONE-TIME / MONTHLY, en la pagina de donar: median 36px de alto */
.freq button{min-height:44px}

/* 3. LOS CHIPS DE AÑO de los informes: se quedaban justo en el limite */
.chip-year{min-height:48px}

/* 4. LA ENTRADA DE LOS ICONOS, MAS SOBRIA
   Entraban desde escala 0 girando 40 grados y con rebote. Queda un
   desplazamiento corto, en la linea de lo que hicimos con los botones. */


/* ==========================================================================
   PASO 37 — LA TARJETA DEL BOLETIN, EN NEGATIVO
   Antes: fondo malva claro, texto oscuro y boton verde que no se despegaba.
   Ahora: morado de marca oscurecido, texto blanco y boton claro. Hace pareja
   con la tarjeta verde oscura de al lado, y el malva claro sigue presente en
   la cinta de cifras y en Our Values.
   La pildora del formulario deja de ser blanca: sobre blanco, un boton claro
   no se ve. Pasa a un blanco translucido con borde, y el boton claro manda.
   ========================================================================== */
.duo .news-band{background:#7E2B57;color:#fff}
.duo .news-band h3{color:#fff}
.duo .news-band p{color:rgba(255,255,255,.86)}
.duo .news-band .news-form{background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45)}
.duo .news-band .news-form input{color:#fff}
.duo .news-band .news-form input::placeholder{color:rgba(255,255,255,.72)}
.duo .news-band .btn{background:var(--purple-wash);color:#5E1F41}
.duo .news-band .btn:hover,.duo .news-band .btn:focus-visible{background:#fff;color:#5E1F41}



/* ==========================================================================
   PASO 38 — "DID YOU KNOW?", MAS CORTA
   Era la seccion mas larga del home: 2,2 pantallas de telefono ella sola.
   Se han quitado las dos cifras que eran de la organizacion y no del barrio
   (ya salen en la cinta de debajo del mosaico) y los cuatro datos que quedan
   van en dos columnas tambien en el telefono, donde antes se apilaban.
   ========================================================================== */
.sb-body .dyk{gap:1.9rem 2.2rem}
@media(max-width:640px){
  .sb-body .dyk{grid-template-columns:1fr 1fr;gap:1.5rem 1.1rem}
  .sb-body .dyk-item b{font-size:2.4rem}
  .sb-body .dyk-item span{font-size:.92rem;line-height:1.45}
  .sb-body{padding:2rem 20px 2.8rem}
}



/* ==========================================================================
   PASO 39 — EL SITIO EN UN iPHONE
   Medido sobre las 56 paginas a 390x844 con densidad 3. No habia desbordes ni
   imagenes borrosas, pero si cuatro cosas que en un telefono se notan mucho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SAFARI NO DEBE HACER ZOOM AL TOCAR UN CAMPO
   Si un campo tiene menos de 16px, iOS amplia la pagina entera al enfocarlo y
   el usuario se queda con la web descuadrada y sin saber por que. Los campos
   estaban a 15,2px. Es el fallo que mas se nota al rellenar un formulario.
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .fld input:not([type="checkbox"]):not([type="radio"]),
  .fld select,.fld textarea,
  .cform input,.cform textarea,.cform .sel,select.sel,
  .amt-custom input,.news-form input{font-size:16px}
}

/* --------------------------------------------------------------------------
   2. TEXTO Y ZONAS DE TOQUE DEL PIE
   Los enlaces del pie median 13px y 33px de alto. Este sitio lo lee sobre todo
   gente mayor: en el telefono suben a 16px y a 44px de alto, que es el minimo
   que pide WCAG 2.5.8 y lo que necesita un dedo.
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  footer ul li a{font-size:1rem;display:flex;align-items:center;min-height:44px;opacity:.92}
  footer ul li{margin:0}
  .foot-bottom{font-size:.95rem;color:rgba(255,255,255,.72);gap:.2rem}
  .foot-bottom a{display:flex;align-items:center;min-height:44px;padding:0}
}

/* --------------------------------------------------------------------------
   3. EL MENU DESPLEGABLE, MAS LEGIBLE
   14,7px en versales y con mucho espaciado entre letras se lee mal de un
   vistazo. Sube a 16px y el renglon a 52px, que ademas da una zona de toque
   comoda sin tocar el diseno de escritorio.
   -------------------------------------------------------------------------- */
@media(max-width:1320px){
  .navlinks>a,.navitem>a{font-size:1rem;letter-spacing:.03em}
  .navlinks>a,.navitem>a,.submenu a{min-height:52px;display:flex;align-items:center}
}

/* --------------------------------------------------------------------------
   4. EL ALTO REAL DE LA PANTALLA EN iOS
   En Safari, 100vh es mas alto que lo que se ve: la barra de direcciones tapa
   la diferencia, asi que el hero quedaba cortado. svh mide lo que se ve de
   verdad. La linea de vh se queda debajo para los navegadores que no lo
   entienden todavia.
   -------------------------------------------------------------------------- */
.collage-hero{min-height:100vh;min-height:100svh}
.mq-hero{min-height:100vh;min-height:100svh}
@media(max-width:900px){
  .collage-hero{min-height:0}
}

/* --------------------------------------------------------------------------
   5. LA MUESCA Y LA BARRA INFERIOR DEL iPHONE
   Con viewport-fit=cover la pagina ocupa toda la pantalla, tambien la zona de
   la muesca. Estos margenes evitan que el logo o los enlaces queden debajo.
   -------------------------------------------------------------------------- */
header .nav{padding-left:max(1.25rem,env(safe-area-inset-left));
  padding-right:max(1.25rem,env(safe-area-inset-right))}
footer{padding-bottom:max(2rem,env(safe-area-inset-bottom))}
@media(max-width:1320px){
  .navlinks{padding-bottom:max(1rem,env(safe-area-inset-bottom))}
}

/* --------------------------------------------------------------------------
   6. DOS AJUSTES FINOS DE iOS
   El primero evita que Safari agrande el texto por su cuenta al girar el
   telefono. El segundo quita el destello gris al tocar un enlace, que en iOS
   sale por defecto y parece un fallo.
   -------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,[role="button"]{-webkit-tap-highlight-color:rgba(156,203,59,.25)}

/* --------------------------------------------------------------------------
   7. NADA DE LETRA MENUDA EN EL TELEFONO
   Quedaban textos a 13 y 14 px: los resumenes de los articulos, los rotulos
   de seccion, los cargos de la junta y los nombres de los documentos. En una
   pantalla de mano, y con el publico de este sitio, eso no se lee.
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  .pcard p,.story p{font-size:1rem;line-height:1.55}
  .eyebrow{font-size:.95rem;letter-spacing:.1em}
  .tmember .role{font-size:.95rem}
  .fb-tx b,.fg-title,.filebox b{font-size:1rem}
  .fb-tx small,.dyk-item small,.fact small{font-size:.875rem}
}

/* Los ultimos rincones de letra menuda. Las tarjetas de articulo en el
   telefono son horizontales y compactas, pero 13px de resumen y 15px de
   titular se quedaban cortos; y las etiquetas de formulario, a 14px, son
   justo lo que hay que leer para no equivocarse al rellenar. */
@media(max-width:560px){
  .pcard .body p{font-size:.95rem;line-height:1.45}
  .pcard h3{font-size:1.08rem;line-height:1.22}
  .pcard .lnk{font-size:.95rem}
}
/* Nada por debajo de 15px en el telefono, ni las etiquetas ni los pesos de
   archivo: por debajo de eso ya cuesta leer con una vista cansada. */
@media(max-width:1024px){
  .pcard .tag,.story .tag,.article-meta .tag{font-size:.9375rem;letter-spacing:.08em}
  .fb-tx small,.filebox small{font-size:.9375rem}
  .ph-note,.ph-note b{font-size:.9375rem}
  .skiplink{font-size:1rem}
}
@media(max-width:1024px){
  .fld>label,.fld legend{font-size:1rem}
  .chip-year{font-size:.95rem}
  .captcha-ph{font-size:.95rem}
}

/* La letra pequena de verdad (avisos, notas al pie de una tarjeta, contadores
   de galeria). Se queda pequena respecto al texto, pero nunca por debajo de
   15px en un telefono. */
.fineprint{font-size:.9rem;color:var(--ink-soft)}
@media(max-width:1024px){
  small,.fineprint,.gal-count,.mapph small,.fld-hint{font-size:.9375rem}
  .sb-body .dyk-item span{font-size:.95rem}
  .kit .kit-note,.kit-note{font-size:.9375rem}
  .dyk-item small,.fact small,.fb-tx small{font-size:.9375rem}
  .prog .meta,.tc-text .meta,.meta-line{font-size:.9375rem}
  .freq button{font-size:1rem}
}

/* El aviso de no discriminacion es el texto que mas falta hace que se lea:
   son trece idiomas para gente que no lee ingles. En el telefono estaba a
   11,8 y 14,1 px. */
@media(max-width:1024px){
  .tr-lang{font-size:.9375rem}
  .tr-text{font-size:1rem;line-height:1.6}
}

/* La pagina de valores usa su propio componente y se habia quedado fuera del
   repaso de tamanos. */
@media(max-width:1024px){
  .value p,.vrow p{font-size:1rem;line-height:1.55}
}



/* ==========================================================================
   PASO 40 — EL RITMO DE COLOR, EN TODO EL SITIO
   El home alterna blanco y malva claro y el cliente lo dio por bueno. El resto
   del sitio seguia con blanco y verde palido.
   Aqui el fondo de seccion pasa a un ciclo de tres: blanco, malva, verde
   palido. Tres y no dos porque con dos, una pagina de seis secciones acaba
   siendo mitad malva, y el malva deja de ser un acento para volverse el fondo
   de la casa.
   El ciclo cuenta TODAS las secciones, incluida la cabecera de la subpagina,
   asi que cada pagina arranca por un tono distinto segun como este construida:
   el ritmo se nota, pero no se vuelve una plantilla.
   ========================================================================== */
main>section.block:nth-of-type(3n+1){background:var(--paper)}
main>section.block:nth-of-type(3n+2){background:var(--purple-wash)}
main>section.block:nth-of-type(3n){background:var(--sage)}

/* --------------------------------------------------------------------------
   LAS QUE MANDAN SOBRE EL RITMO
   Se vuelven a declarar aqui, y no antes, porque pesan lo mismo que las reglas
   de arriba (dos clases): en un empate gana la ultima que se escribe. Si se
   quedan mas arriba del archivo, el ciclo las pisa y una seccion oscura
   amanece con fondo claro y el texto blanco encima, ilegible.
   -------------------------------------------------------------------------- */
main>section.block.cta-sec{background:var(--green-deeper)}
main>section.block.quote-sec{background:var(--green-deepest)}
main>section.block.get-involved{background:var(--lime-wash)}
main>section.block.impact{background:var(--sage-3)}
main>section.photoband{background:var(--green-deepest)}

/* El home, tal y como se aprobo: malva en la cinta de cifras y en los valores,
   blanco en programas, historias y la pareja de tarjetas del final. */
main>section.block.factband{background:var(--purple-wash)}
main>section.block.values-sec{background:var(--purple-wash);color:var(--ink)}
main>section.block#programs,
main>section.block.stories-sec,
main>section.block.duo-sec{background:var(--paper)}

/* --------------------------------------------------------------------------
   PANTALLAS DE 320px (iPhone SE de primera generacion)
   Las dos tarjetas del final median 377px en una pantalla de 320: el campo de
   email no bajaba de su ancho natural (un input trae 20 caracteres de ancho
   por defecto y, dentro de un flex, no encoge por si solo) y los botones de
   texto largo tampoco. A este ancho, campo y botones se apilan.
   -------------------------------------------------------------------------- */
.news-form input{min-width:0}
@media(max-width:480px){
  .news-form{flex-direction:column;align-items:stretch;border-radius:18px;padding:.5rem}
  .news-form input{width:100%;padding:.75rem .9rem}
  .news-form .btn{width:100%;justify-content:center}
  .duo .cta-band .row{flex-direction:column;align-items:stretch}
  .duo .cta-band .row .btn{width:100%;justify-content:center}
  .btn{white-space:normal}
}

/* --------------------------------------------------------------------------
   PROPORCION DE LAS IMAGENES CON MEDIDAS DECLARADAS
   Desde que cada <img> lleva width y height (para que la pagina no de saltos
   al cargar), una imagen a la que el CSS solo le fija el alto toma el ancho
   del atributo y sale estirada. Le pasaba al logo del pie: 354x52 cuando su
   proporcion real son 621x186.
   -------------------------------------------------------------------------- */
.logo-img,.foot-logo img{width:auto}

/* --------------------------------------------------------------------------
   SUELO DE 15px TAMBIEN EN ESCRITORIO
   Lo de arriba arreglaba el telefono, pero en el ordenador seguian a 13px la
   linea legal del pie y sus enlaces, y a 14,4 los rotulos de seccion. La web
   la lee sobre todo gente mayor: 15px es el minimo razonable para algo que se
   espera que alguien lea, aunque sea secundario.
   -------------------------------------------------------------------------- */
.foot-bottom,.foot-bottom a{font-size:.9375rem}
.eyebrow{font-size:.9375rem}
.tmember .role,.captcha-ph,.ph-note,.ph-note b,.skiplink{font-size:.9375rem}
/* Las etiquetas de formulario y los chips de ano, tambien en escritorio:
   una etiqueta mal leida es un formulario mal rellenado. */
.fld>label,.fld legend,.chip-year,.fineprint,small{font-size:.9375rem}
/* y los ultimos rincones, en cualquier pantalla */
.dyk-item small,.fact small,.fb-tx small,.mapph small,.gal-count,
.prog .meta,.tc-text .meta,.meta-line,.freq button{font-size:.9375rem}
.fld-hint{font-size:.9375rem}

/* ==========================================================================
   PASO 42 — LA CINTA DE CIFRAS, AHORA CON SIETE
   Suben las tres cifras de la organizacion que vivian en la seccion del
   barrio. Con siete, una rejilla fija deja huerfanas: en flexible, la ultima
   fila se centra sola y queda 4 + 3 en el ordenador, 3 + 3 + 1 en tableta y
   dos columnas en el telefono.
   ========================================================================== */
.statband-7{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
.statband-7>.stat{flex:0 1 calc(25% - .7rem);min-width:0}
@media(max-width:1100px){.statband-7>.stat{flex-basis:calc(33.333% - .6rem)}}
@media(max-width:700px){.statband-7>.stat{flex-basis:calc(50% - .5rem)}}

/* El tercer boton del mosaico lleva al ancla de programas, dentro del propio
   home, y va en blanco como iba el anterior. */
.collage-actions a[href*="#programs"],
.collage-actions a[href*="#programs"]:hover{background:#fff;color:var(--green-deepest)}

/* El asterisco de las cifras: la nota al pie explica de que ejercicio son. */
.factband .statnote{margin-top:1.4rem}



/* ==========================================================================
   PASO 43 — LA CABECERA DE LAS SUBPAGINAS, COMO EL HOME
   El cliente pide que las subpaginas se vean del mismo sitio que la portada.
   Los componentes ya eran los mismos; lo que quedaba distinto era justo lo
   primero que se ve: en el home la foto va a sangre y aqui era una caja
   redondeada con sombra, el ultimo rectangulo de ese tipo que quedaba arriba.
   Ahora la foto ocupa la mitad derecha de lado a lado y se funde con el verde,
   igual que "The neighborhood we are based in".
   ========================================================================== */
@media(min-width:981px){
  .ihero{padding-top:0;padding-bottom:0}
  .ihero .wrap.ihero-grid{grid-template-columns:minmax(0,1fr);max-width:none;padding:0}
  /* el texto se queda en la misma columna que el resto de la pagina: mismo
     ancho maximo y mismo margen que .wrap, para que no baile respecto a las
     secciones de debajo */
  .ihero-grid>.reveal:first-child{
    max-width:calc((1200px - 2*26px) * .52);
    margin-left:max(26px, calc((100vw - 1200px) / 2 + 26px));
    padding:calc(var(--hdr-h,115px) + 76px) 0 76px}
  /* La foto empezaba en el borde de arriba de la seccion, o sea DEBAJO de la
     barra fija: la cabecera tapaba la primera franja, que es justo donde caen
     las caras. Ahora arranca donde termina la barra. */
  .ihero-media{position:absolute;top:var(--hdr-h,115px);right:0;bottom:0;width:48%;
    aspect-ratio:auto;max-width:none;border-radius:0;box-shadow:none;z-index:1;
    -webkit-mask-image:linear-gradient(270deg,#000 58%,transparent 100%);
            mask-image:linear-gradient(270deg,#000 58%,transparent 100%)}
  /* la foto es mas ancha que alta y el hueco es alto: encuadrando un poco
     mas arriba, las caras no se quedan cortadas por el borde superior */
  .ihero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
  /* el petalo decorativo estorbaba encima de la foto */
  .ihero .petal{display:none}
}

/* En tableta y telefono la foto pasa a ser una banda a lo ancho, tambien a
   sangre, y el texto debajo: es lo que hace el home cuando se estrecha. */
@media(max-width:980px){
  .ihero{padding:0 0 48px}
  .ihero .wrap.ihero-grid{max-width:none;padding:0;gap:0}
  .ihero-media{order:-1;max-width:none;border-radius:0;box-shadow:none;
    aspect-ratio:16/10;margin-top:var(--hdr-h,90px)}
  .ihero-grid>.reveal:first-child{padding:2.2rem 26px 0}
}
@media(max-width:640px){
  .ihero-grid>.reveal:first-child{padding:2rem 20px 0}
  .ihero-media{aspect-ratio:4/3}
}



/* ==========================================================================
   PASO 44 — UNIFORMIDAD EN TODO EL SITIO
   Cuatro cosas que rompian la linea del home, y una regla de color.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAS ULTIMAS CAJAS BLANCAS
   Los "kits" de la pagina de voluntariado seguian siendo rectangulos blancos
   con borde, sombra y esquinas redondeadas: el unico componente que quedaba
   asi, justo lo que el cliente pidio quitar. Pasan al mismo tratamiento que
   las demas fichas: una linea arriba y aire, sin caja.
   -------------------------------------------------------------------------- */
.kit{background:none;border:0;border-top:2px solid var(--line);border-radius:0;
  box-shadow:none;padding:1.5rem 0 0}
.kit:hover{transform:none;box-shadow:none}
.kit-grid{gap:2rem 2.4rem}

/* --------------------------------------------------------------------------
   2. BOTONES QUE SE ESTIRABAN
   Dentro de las secciones de foto y texto, la columna es un flex vertical: sus
   hijos se estiran a todo lo ancho por defecto, y un boton de tres palabras
   acababa midiendo media pantalla.
   -------------------------------------------------------------------------- */
.splitsec .split>.reveal .btn,
.splitsec .split>.reveal .row,
.splitsec .split>.reveal .hero-btns,
.splitsec .split>.reveal .lnk,
.splitsec .split>.reveal .linkline{align-self:flex-start}

/* --------------------------------------------------------------------------
   3. FRASES ENTERAS EN MAYUSCULAS
   .meta-line se usa para avisos de una o dos frases ("Contact the Volunteer
   Coordinator in advance, space is limited..."). En versales no se lee: las
   mayusculas valen para una etiqueta de dos palabras, no para un parrafo.
   -------------------------------------------------------------------------- */
.meta-line{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:500;
  color:var(--ink-soft);line-height:1.55;border-left:3px solid var(--line);
  padding-left:.9rem;margin-top:1rem}

/* --------------------------------------------------------------------------
   4. EL COLOR DE LOS ACENTOS SIGUE AL FONDO
   El cliente pide mas morado sin perder uniformidad. La regla es simple y vale
   para todo el sitio: en las secciones malvas el acento es morado; en las
   blancas y verdes seguia siendo verde. Asi el color no se reparte al azar.
   El morado de los textos es el oscuro (7,0 de contraste sobre el malva); el
   de marca se reserva para iconos y adornos, donde no hay que leer.
   -------------------------------------------------------------------------- */
main>section.block:nth-of-type(3n+2) .eyebrow,
main>section.block.factband .eyebrow,
main>section.block.values-sec .eyebrow{color:var(--purple-deep)}
main>section.block:nth-of-type(3n+2) :is(.lnk,.linkline,.fb-arrow),
main>section.block:nth-of-type(3n+2) a:not(.btn):not(.chip-year):hover{color:var(--purple-deep)}
main>section.block:nth-of-type(3n+2) :is(.tick,.kit-list li::before,.v-ic){color:var(--purple)}
main>section.block:nth-of-type(3n+2) .kit-list li::before{background:var(--purple)}
main>section.block:nth-of-type(3n+2) .kit{border-top-color:rgba(173,61,117,.22)}
main>section.block:nth-of-type(3n+2) .fcard{border-top-color:rgba(173,61,117,.22)}
/* el boton secundario, tambien: verde sobre verde no se despegaba */
main>section.block:nth-of-type(3n+2) .btn-ghost:not(.on-dark){
  border-color:var(--purple);color:var(--purple-deep)}
main>section.block:nth-of-type(3n+2) .btn-ghost:not(.on-dark):hover{
  background:var(--purple);border-color:var(--purple);color:#fff}

/* --------------------------------------------------------------------------
   LA FIRMA DE LAS CITAS, TAMBIEN SOBRE FONDO CLARO
   .quote nacio para las secciones oscuras, asi que su firma iba en verde muy
   claro (var(--sage)). Al usar la cita en una seccion clara, esa firma se
   quedaba en 1,69 de contraste: practicamente invisible. Ahora el color lo
   decide el fondo.
   -------------------------------------------------------------------------- */
.quote .who{color:var(--green-deep)}
.quote-sec .quote .who,.photoband .quote .who,
[class*="on-dark"] .quote .who,section.block.cta-sec .quote .who{color:var(--sage)}
main>section.block:nth-of-type(3n+2) .quote .who{color:var(--purple-deep)}

/* --------------------------------------------------------------------------
   EL SUBMENU DEL MOVIL, EN CLARO
   En el escritorio el submenu es una tarjeta blanca, y por eso sus enlaces van
   en tinta oscura (`header .submenu a`). Esa regla no estaba limitada al
   escritorio, asi que dentro del drawer, que es verde oscuro, los apartados de
   "About Us" salian casi negros sobre verde: 1,4 de contraste.
   Aqui se devuelven al blanco, con el activo en lima como el resto del menu.
   -------------------------------------------------------------------------- */
@media(max-width:1320px){
  header .submenu a{color:rgba(255,255,255,.88)}
  header .submenu a:hover,header .submenu a:focus-visible,
  header .submenu a.act{color:var(--lime)}
  /* y el apartado abierto se distingue del resto del panel */
  .navitem.open>.submenu{background:rgba(0,0,0,.2)}
}

/* ==========================================================================
   PASO 45 — TARJETAS COMPACTAS EN EL TELEFONO
   Las tarjetas de programa ocupaban media pantalla cada una: foto grande,
   rotulo, titular, tres lineas de texto y el enlace. Tres seguidas obligaban
   a un scroll largo para ver algo que se resume en "que es y donde leer mas".
   En el telefono pasan al mismo formato horizontal que ya usan las tarjetas de
   articulo: foto pequena a la izquierda, titulo y enlace a la derecha, y el
   texto recortado a dos lineas. La informacion no se borra, se resume: quien
   quiera leer entra.
   ========================================================================== */
@media(max-width:700px){
  .progs{gap:.9rem}
  .prog{display:grid;grid-template-columns:118px 1fr;align-items:stretch;
    border-radius:var(--r);box-shadow:none;border:1px solid var(--line)}
  .prog:hover{transform:none;box-shadow:none}
  .prog .ph{aspect-ratio:auto;height:100%;min-height:118px}
  .prog .body{padding:.9rem 1rem;display:flex;flex-direction:column;justify-content:center}
  .prog .meta{font-size:.8125rem;margin-bottom:.25rem;letter-spacing:.06em}
  .prog h3{font-size:1.12rem;line-height:1.2;margin-bottom:.3rem}
  .prog p{font-size:.95rem;line-height:1.45;margin-bottom:.55rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prog .lnk{font-size:.95rem;margin-top:auto}
}
/* En pantallas muy estrechas la foto se reduce mas, para que al titulo le
   queden al menos dos palabras por linea. */
@media(max-width:380px){
  .prog{grid-template-columns:96px 1fr}
  .prog .ph{min-height:96px}
}



/* ==========================================================================
   PASO 46 — CAJA POR CAJA EN EL TELEFONO
   Revisadas una a una, fotografiando cada componente a 390px. Cinco no
   aguantaban el ancho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAS TABLAS DE HORARIOS SE CORTABAN
   Dos columnas en 390px no caben: la hora quedaba fuera ("8:00 a.m. - 10:0...")
   y habia que arrastrar de lado para leerla. En la pagina de "Need Shelter?"
   eso es informacion critica. En el telefono cada fila pasa a dos lineas:
   el dia arriba y la hora debajo, en negrita. Sin arrastrar y sin cortar.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{border-bottom:1px solid var(--line);padding:.85rem 0}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border:0;padding:0}
  .tbl td:first-child{color:var(--ink-soft);font-size:.95rem;margin-bottom:.15rem}
  .tbl td:last-child{font-size:1.05rem}
  .tbl-scroll{overflow-x:visible}
  .tbl{min-width:0}
}

/* --------------------------------------------------------------------------
   2. LAS FICHAS DE DOCUMENTO
   Icono, titulo, subtitulo y un boton "Open" debajo: cuatro renglones para
   decir "abre esto". En el telefono se ordenan en una fila: el icono a la
   izquierda, el texto en medio y la flecha a la derecha.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  /* una sola fila: icono, texto y la accion a la derecha. El texto puede
     partir en dos lineas, que ocupa menos que mandar el boton a una fila
     propia. El min-width:0 es imprescindible: sin el, un titulo largo no
     encoge y empuja el boton fuera de la caja. */
  .filebox{gap:.75rem;padding:.85rem 1rem;align-items:center;flex-wrap:nowrap}
  .filebox .fb-ic{flex:0 0 auto}
  .filebox .fb-tx{flex:1 1 auto;min-width:0}
  .fb-tx b{font-size:1rem;line-height:1.25}
  .filebox .badge{margin-left:0;flex:0 0 auto;align-self:center}
  .filebox .badge-action{min-height:40px}
}

/* --------------------------------------------------------------------------
   3. LAS LISTAS DE LOS KITS, EN UNA COLUMNA
   A dos columnas en 390px, "One twin size sheet set" partia en dos lineas y la
   lista se leia en zigzag.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  .kit-list{columns:1;column-count:1;display:flex;flex-direction:column}
}

/* --------------------------------------------------------------------------
   4. LAS FICHAS DE PERSONA
   El nombre en serif grande y el cargo en versales ocupaban tres lineas en una
   ficha de 187px de ancho. Bajan de tamano y el cargo deja de romperse.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  .tmember h4{font-size:.98rem;line-height:1.2}
  /* 15px es el suelo que nos pusimos para este publico: el cargo baja de
     tamano respecto al nombre, pero no por debajo de ahi. */
  .tmember .role{font-size:.9375rem;letter-spacing:.02em;line-height:1.25}
  .tmember .av,.tmember .av-photo{width:66px;height:66px;margin-bottom:.6rem}
}

/* --------------------------------------------------------------------------
   5. LAS TARJETAS DE IMPORTE
   "$25 / Provides meals for shelter guests" ocupaba tres lineas enormes y la
   tarjeta medida casi 300px de alto, con dos por fila.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  .give-card{padding:0 0 1rem}
  .give-card .amt{font-size:2rem}
  .give-card p{font-size:.95rem;line-height:1.35;padding:0 .8rem}
}
/* el rotulo de las dos tarjetas de programa de About seguia a 13px */
@media(max-width:1024px){ .tc-text .meta,.prog .meta{font-size:.9375rem} }



/* ==========================================================================
   PASO 47 — CADA SECCION, EN SU PROPIA FAMILIA DE COLOR
   El cliente: "the contrasting green on pink and pink on green is looking a
   little too funky. I think the monochromatic look is better suited (light
   green and dark green paired together & light pink and dark pink paired
   together)... these icons would look better as the same color as their
   background just in a lighter or darker shade."
   Asi que el icono, el rotulo y los detalles dejan de contrastar con el fondo
   y pasan a ser el mismo color, mas claro o mas oscuro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LOS ICONOS
   Antes rotaban tres estilos (silueta, circulo lima, circulo morado) sin mirar
   el fondo: en una seccion verde salia un circulo rosa y en una rosa uno lima.
   Ahora el circulo es un tono claro del fondo y el dibujo, uno oscuro.
   -------------------------------------------------------------------------- */
main>section.block :is(.fcard,.vrow,.feat-card)>.ic{
  width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center}
main>section.block :is(.fcard,.vrow,.feat-card)>.ic svg{
  width:38px;height:38px;stroke-width:1.9}

/* blanco -> verde claro con el dibujo en verde oscuro */
main>section.block:nth-of-type(3n+1) :is(.fcard,.vrow,.feat-card)>.ic{
  background:var(--sage);color:var(--green-deep)}
/* malva -> malva un punto mas fuerte con el dibujo en morado oscuro */
main>section.block:nth-of-type(3n+2) :is(.fcard,.vrow,.feat-card)>.ic{
  background:rgba(173,61,117,.13);color:var(--purple-deep)}
/* verde palido -> verde un punto mas fuerte, dibujo en verde oscuro */
main>section.block:nth-of-type(3n) :is(.fcard,.vrow,.feat-card)>.ic{
  background:var(--sage-2);color:var(--green-deep)}
/* y las secciones que mandan sobre el ritmo, con su propio par */
main>section.block.factband :is(.fcard,.vrow,.feat-card)>.ic,
main>section.block.values-sec :is(.fcard,.vrow,.feat-card)>.ic{
  background:rgba(173,61,117,.13);color:var(--purple-deep)}
main>section.block.get-involved :is(.fcard,.vrow,.feat-card)>.ic{
  background:var(--lime-wash-2);color:var(--green-deep)}
/* sobre verde oscuro no hay tono claro del fondo: el circulo es el blanco
   translucido de siempre */
main>section.block.cta-sec :is(.fcard,.vrow,.feat-card)>.ic,
main>section.block.quote-sec :is(.fcard,.vrow,.feat-card)>.ic{
  background:rgba(255,255,255,.14);color:#fff}

/* los iconos de los valores del home van sin circulo, solo el dibujo */
.vcard .v-ic{color:var(--purple)}

/* --------------------------------------------------------------------------
   2. LOS ROTULOS SOBRE FONDO OSCURO
   "Get Involved", "Can't teach right now?" y "Never miss a story" salian en
   morado sobre verde oscuro: 1,9 de contraste, ilegibles. La regla del malva
   los alcanzaba porque pesa mas que la del fondo oscuro. Se vuelven a declarar
   aqui, con mas peso, para que el rotulo sobre oscuro sea SIEMPRE claro.
   -------------------------------------------------------------------------- */
main>section.block .cta-band .eyebrow,
main>section.block .cta-donate .eyebrow,
main>section .photoband .eyebrow,
main>section.photoband .eyebrow,
main>section .eyebrow.on-dark,
main>section.block.quote-sec .eyebrow{color:var(--lime-light)}
main>section.block .cta-band .lnk,
main>section.block .cta-band a:not(.btn){color:var(--lime-light)}

/* --------------------------------------------------------------------------
   3. LOS DETALLES DE LAS SECCIONES MALVAS, EN MALVA OSCURO
   (esto ya estaba, se mantiene: rotulo, enlaces, vinetas y boton secundario)
   pero sin tocar nada que viva dentro de una banda oscura.
   -------------------------------------------------------------------------- */
main>section.block:nth-of-type(3n+2) .kit{border-top-color:rgba(173,61,117,.22)}
main>section.block:nth-of-type(3n+2) .fcard{border-top-color:rgba(173,61,117,.22)}

/* --------------------------------------------------------------------------
   4. LOS RETRATOS DE STAFF Y JUNTA, MAS GRANDES
   El cliente: "Can we make the headshots larger? Photos look way too small".
   Median 82px dentro de columnas de 168px. Las columnas pasan a 230px y el
   retrato a 150px, que es donde se empieza a reconocer una cara.
   -------------------------------------------------------------------------- */
.team-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem}
.tmember .av,.tmember .av-photo{width:150px;height:150px;font-size:2.2rem;margin-bottom:1.1rem}
.tmember h4{font-size:1.12rem}
@media(max-width:980px){
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .tmember .av,.tmember .av-photo{width:128px;height:128px}
}
@media(max-width:620px){
  /* en el telefono siguen dos por fila, pero con la cara grande */
  .team-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .tmember{padding:1.2rem .8rem}
  .tmember .av,.tmember .av-photo{width:118px;height:118px;margin-bottom:.7rem}
}

/* --------------------------------------------------------------------------
   5. EL BOTON DENTRO DE UNA FICHA, CON AIRE
   El cliente, sobre "Apply here" del ELC: "It looks super squished right now
   and could use some breathing room above it". Pegaba con el telefono de
   arriba. Los botones dentro de una ficha se separan del texto.
   -------------------------------------------------------------------------- */
.fcard .btn,.fcard .row{margin-top:1.3rem}
.fcard p+.btn{margin-top:1.4rem}

/* --------------------------------------------------------------------------
   6. GUARDIA: NADA MALVA DENTRO DE UNA BANDA OSCURA
   Las reglas de acento por seccion (el malva del apartado 3) se aplican por
   la POSICION de la seccion, y una seccion oscura puede caer en esa posicion.
   Cuando pasa, el morado acaba sobre verde oscuro: la firma de la cita de
   learn-english marcaba 1,77 de contraste. Este bloque va al final y con mas
   peso, para que dentro de lo oscuro el color sea siempre claro.
   -------------------------------------------------------------------------- */
main>section.block.quote-sec :is(.who,.eyebrow,.lnk,.linkline,.tick),
main>section.block.cta-sec :is(.who,.eyebrow,.lnk,.linkline,.tick),
main>section.photoband :is(.who,.eyebrow,.lnk,.linkline,.tick),
main>section.block .cta-band :is(.who,.eyebrow,.lnk,.linkline,.tick),
main>section.block .cta-donate :is(.who,.eyebrow,.lnk,.linkline,.tick){color:var(--lime-light)}
main>section.block.quote-sec .btn-ghost,
main>section.block.cta-sec .btn-ghost,
main>section.block .cta-band .btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
main>section.block.quote-sec .btn-ghost:hover,
main>section.block.cta-sec .btn-ghost:hover,
main>section.block .cta-band .btn-ghost:hover{background:#fff;color:var(--green-deep)}
/* la firma de la cita necesita el mismo numero de clases que la regla del
   malva (.block + :nth-of-type + .quote + .who) para poder ganarle: por eso
   aqui va .quote escrito entero y no dentro del :is(). */
main>section.block.quote-sec .quote .who,
main>section.block.cta-sec .quote .who,
main>section.photoband .quote .who,
main>section.block .cta-band .quote .who{color:var(--lime-light)}
/* Los cargos largos ("Permanent Supportive Housing Program Manager") no caben
   en una columna de 170px: se permite partir palabra antes que desbordar. */
.tmember .role{overflow-wrap:anywhere;hyphens:auto}

/* --------------------------------------------------------------------------
   LOS SEIS IMPORTES DE DONACION
   Pasan de tres tarjetas con foto a seis sin foto (los importes que mando el
   cliente). Sin caja ni sombra, con una linea arriba: el mismo tratamiento que
   las demas fichas del sitio.
   -------------------------------------------------------------------------- */
.give-grid{grid-template-columns:repeat(3,1fr);gap:2rem 2.4rem}
.give-card{background:none;border:0;border-top:2px solid var(--line);border-radius:0;
  box-shadow:none;padding:1.4rem 0 0;text-align:left}
.give-card:hover{transform:none;box-shadow:none}
.give-card .amt{font-size:2.4rem;line-height:1}
.give-card p{font-size:1rem;line-height:1.5;margin-top:.35rem;max-width:34ch}
@media(max-width:900px){.give-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
@media(max-width:620px){
  .give-grid{grid-template-columns:repeat(2,1fr);gap:1.3rem 1.1rem}
  .give-card{padding-top:1rem}
  .give-card .amt{font-size:1.9rem}
  .give-card p{font-size:.95rem}
}


/* ==========================================================================
   PASO 48 — "COMMUNICATION / S DIRECTOR"
   En el telefono, la columna de cada persona mide 168px y con el relleno deja
   146px utiles. "COMMUNICATIONS" en versales mide 151px: no cabia por cinco
   pixeles, y el navegador partia la palabra donde le venia bien, dejando una
   "S" suelta en la linea siguiente.
   El tamano no se puede bajar, este sitio tiene suelo de 15px por el publico
   al que va dirigido, asi que hay que darle sitio a la palabra.
   ========================================================================== */

/* 1. De 360px para arriba caben dos columnas si se recorta el relleno y el
      espacio entre letras. Con eso la palabra entra entera. */
@media(max-width:620px){
  .team-grid{gap:.6rem}
  .tmember{padding:1.1rem .45rem}
  .tmember .role{letter-spacing:0}
  .tmember h4,.tmember .role{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
}

/* 2. Por debajo de 370px no hay forma: dos columnas dejan 135px de texto y la
      palabra necesita 147. La ficha pasa a una fila, la foto a la izquierda y
      el texto a la derecha. Se lee mejor Y la pagina queda mas corta, porque
      26 personas en una columna de tarjetas altas es un scroll eterno. */
@media(max-width:369px){
  .team-grid{grid-template-columns:1fr;gap:.55rem}
  /* rejilla, no flex: el nombre y el cargo son hermanos sueltos, sin ninguna
     caja que los envuelva, y en flex se habrian puesto uno al lado del otro */
  .tmember{display:grid;grid-template-columns:62px 1fr;
    grid-template-areas:"foto nombre" "foto cargo";
    column-gap:.85rem;align-content:center;align-items:center;
    text-align:left;padding:.7rem .85rem}
  .tmember .av,.tmember .av-photo{grid-area:foto;width:62px;height:62px;margin:0;align-self:center}
  .tmember h4{grid-area:nombre;align-self:end;margin-bottom:.1rem}
  .tmember .role{grid-area:cargo;align-self:start;line-height:1.3}
  .tmember .bio{display:none}
}



/* ==========================================================================
   PASO 49 — EL RECUADRO BLANCO AL PASAR EL RATON
   Las tarjetas de importe nacieron siendo cajas blancas, y su hover las
   aclaraba a blanco puro para levantarlas del fondo. Cuando el cliente pidio
   quitarles la caja (PASO final de los seis importes) se les quito el fondo,
   el borde y la sombra, pero el hover siguió vivo: al pasar por encima
   aparecia un rectangulo blanco recortado detras del texto, sobre el verde
   palido de la seccion, y encima el filete de arriba se volvia verde.
   Ya no son una caja ni llevan enlace, asi que no tienen que reaccionar a
   nada. Comprobado componente por componente forzando :hover en las 12
   paginas con fichas: es el unico que pintaba un fondo donde no habia caja.
   ========================================================================== */
.give-grid>.give-card:hover,
.give-grid>.give-card:focus-within,
.give-grid>.give-card:active{
  background:none;border-top-color:var(--line);box-shadow:none;transform:none}


/* ==========================================================================
   PASO 50 — LA REVISION FINAL DEL CLIENTE
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRONOMBRES Y EMPLEADOR EN LAS FICHAS DE PERSONA
   El cliente los quiere de vuelta. Van debajo del cargo y no pegados al
   nombre: la columna mide 168px en el telefono y "La'Quadra “Qually” Neal
   (she/her)" se parte en cuatro lineas.
   El empleador se lee como dato, en gris; los pronombres, mas discretos
   todavia, pero nunca por debajo de 15px, que es el suelo de este sitio.
   -------------------------------------------------------------------------- */
.tmember .affil{font-size:.95rem;line-height:1.3;color:var(--ink-soft);margin-top:.3rem}
.tmember .pron{font-size:.95rem;line-height:1.3;color:var(--ink-soft);opacity:.85;margin-top:.15rem}
@media(max-width:620px){
  .tmember .affil,.tmember .pron{font-size:.95rem}
}
@media(max-width:369px){
  /* en la ficha de una fila, los dos datos van con el cargo */
  .tmember .affil,.tmember .pron{grid-area:cargo}
  .tmember{grid-template-areas:"foto nombre" "foto cargo" "foto extra" "foto extra2"}
  .tmember .role{grid-area:cargo}
  .tmember .affil{grid-area:extra}
  .tmember .pron{grid-area:extra2}
}

/* --------------------------------------------------------------------------
   2. EL DESCARGO DE RESPONSABILIDAD
   Lo piden "en letra pequena" en Ways to Give y en Planned Giving. El suelo
   del sitio son 15px por el publico al que va dirigido, asi que se distingue
   por color, por el filete de arriba y por el ancho, no encogiendolo mas.
   -------------------------------------------------------------------------- */
.legal{font-size:.95rem;line-height:1.5;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:1rem;margin-top:2.2rem;max-width:62ch}

/* --------------------------------------------------------------------------
   3. ABOUT US, EN UN SOLO COLOR
   El cliente: "it seems like ELC items are purple, and everything else is
   green". Y tenia razon en lo que veia, aunque la causa no era esa: el morado
   no marcaba el ELC, seguia al fondo de la seccion, que se alterna por
   posicion. O sea que pintaba de color algo que no significaba nada.
   De las dos salidas que proponen (un tercer color o todo de un color) se
   elige la segunda, y solo en esta pagina: un tercer tono no existe en su
   paleta, y el nombre del programa ya dice de que programa se habla.
   Los fondos malvas se quedan: lo que se quita es el color de las palabras.
   -------------------------------------------------------------------------- */
body.p-about main>section.block .eyebrow{color:var(--green-deep)}
body.p-about main>section.block :is(.lnk,.linkline,.fb-arrow){color:var(--green-deep)}
body.p-about main>section.block a:not(.btn):hover{color:var(--green-deep)}
body.p-about main>section.block :is(.tick,.v-ic){color:var(--green)}
body.p-about main>section.block .fcard{border-top-color:rgba(27,42,32,.13)}
/* sobre las bandas oscuras manda el claro, como en el resto del sitio */
body.p-about main>section.block.cta-sec .eyebrow,
body.p-about main>section.block.quote-sec .eyebrow,
body.p-about main>section .photoband .eyebrow{color:var(--lime-light)}
body.p-about main>section.block.cta-sec a:not(.btn),
body.p-about main>section.block.cta-sec a:not(.btn):hover{color:var(--lime-light)}

/* --------------------------------------------------------------------------
   4. LAS CARAS DEL MOSAICO DEL HOME
   El cliente: "we’re not representing the gentleman with the glasses very
   well — Asha took a really balanced photo, and I think we’ve kind of
   washed him out to be able to put words over his face."
   Tenia razon y la causa estaba clara: el velo verde cubria la foto ENTERA al
   84% para que se leyera un titular que solo ocupa el centro. Se oscurecia a
   seis personas para resolver un problema de dos lineas de texto.
   Ahora el velo general baja y vuelve el segundo velo, pero concentrado en el
   centro, justo detras del titular y los botones. Las caras recuperan luz y el
   texto conserva su fondo. Comprobado el contraste despues del cambio.
   -------------------------------------------------------------------------- */
.collage-grid{filter:saturate(.95) contrast(1.1) brightness(1.08)}
.collage-hero::before{opacity:.68}
.collage-hero::after{display:block;background:
  radial-gradient(ellipse 72% 58% at 50% 54%,
    rgba(16,38,24,.60) 0%, rgba(16,38,24,.42) 55%, rgba(16,38,24,.16) 100%)}
@media(max-width:900px){
  /* apilado el mosaico ocupa mucho mas alto: el velo del centro no llega a los
     extremos, asi que ahi se reparte de arriba abajo */
  .collage-hero::after{background:
    linear-gradient(180deg,rgba(16,38,24,.46),rgba(16,38,24,.30) 45%,rgba(16,38,24,.50))}
}

/* --------------------------------------------------------------------------
   5. LOS VISTOS DE LAS LISTAS
   Al mover secciones de sitio, varios vistos quedaron en un fondo donde su
   color no llega: el morado de marca sobre malva da 3,6 y el verde medio
   sobre salvia 3,1, cuando el minimo son 4,5. Pasan a los tonos oscuros, que
   es lo que ya usa el texto al lado. Las bandas oscuras se vuelven a declarar
   despues, porque ahi el visto tiene que ser claro.
   -------------------------------------------------------------------------- */
main>section.block :is(.mini-list,.tc-list) .tick{color:var(--green-deep)}
main>section.block:nth-of-type(3n+2) :is(.mini-list,.tc-list) .tick{color:var(--purple-deep)}
main>section.block.quote-sec :is(.mini-list,.tc-list) .tick,
main>section.block.cta-sec :is(.mini-list,.tc-list) .tick,
main>section.photoband :is(.mini-list,.tc-list) .tick,
main>section.block .cta-band :is(.mini-list,.tc-list) .tick{color:var(--lime-light)}
body.p-about main>section.block :is(.mini-list,.tc-list) .tick{color:var(--green-deep)}


/* ==========================================================================
   PASO 51 — EL REPASO DE MOVIL
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAS TABLAS DE HORARIOS SE SEGUIAN ARRASTRANDO DE LADO
   En la pagina de clases y en la del refugio aparecia una barra gris debajo de
   la tarjeta y la tabla se cortaba por la derecha. El PASO 46 ya apilaba las
   filas, pero no servia de nada: una regla anterior le pone a la tabla
   min-width 420px con un selector de mas peso (.tbl-wrap>.tbl) que el que la
   anulaba (.tbl). Ganaba la de 420 aunque estuviera antes en el archivo.
   Se vuelve a anular con el mismo peso, dentro del movil.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  .tbl-scroll>table,.tbl-scroll>.tbl,.tbl-wrap>table,.tbl-wrap>.tbl{min-width:0}
  .tbl-wrap,.tbl-scroll{overflow-x:visible}
}

/* --------------------------------------------------------------------------
   2. LAS FICHAS CON ICONO, EN FILA
   En el telefono cada ficha gastaba un renglon entero solo para el circulo del
   icono: 74px de alto mas el aire de arriba y de abajo, por ficha. En "Ways to
   Give" eso sumaba 3.700px de scroll para una seccion.
   El icono pasa al lado del titulo, como ya hacen las tarjetas de programa y
   las fichas de persona. El texto sigue a todo lo ancho, que es donde se lee.
   Misma informacion, un tercio menos de scroll.
   -------------------------------------------------------------------------- */
/* Ojo con el peso del selector: el tamano del circulo lo fijan tres reglas
   con :nth-of-type (una por tono de seccion), que pesan mas que un
   .fcard>.ic normal. Hay que igualarles el peso o no se mueven. */
@media(max-width:620px){
  main>section.block .fcard{
    display:grid;grid-template-columns:46px 1fr;column-gap:.85rem;row-gap:.5rem;
    align-items:center}
  main>section.block:nth-of-type(n) .fcard>.ic{
    grid-column:1;grid-row:1;width:46px;height:46px;min-width:0;margin:0;flex:0 0 46px}
  main>section.block:nth-of-type(n) .fcard>.ic svg{width:24px;height:24px;stroke-width:2}
  main>section.block .fcard>h3{grid-column:2;grid-row:1;margin:0;line-height:1.25}
  /* todo lo demas, a lo ancho y debajo */
  main>section.block .fcard>*:not(.ic):not(h3){grid-column:1 / -1;margin-top:0}
  main>section.block .fcard>p{margin-bottom:0}
  main>section.block .fcard>p + p{margin-top:.5rem}
  main>section.block .fcard>.linkline,
  main>section.block .fcard>.lnk{margin-top:.2rem}
}

/* --------------------------------------------------------------------------
   3. EL HUECO MUERTO DEBAJO DE LA GALERIA
   Los puntitos dejaban 150px de blanco antes de que terminara la tarjeta.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  .gal{padding-bottom:0}
  .gal-bar{padding-bottom:.9rem}
}

/* --------------------------------------------------------------------------
   4. PANTALLAS DE 320px: PALABRAS Y CIFRAS QUE NO CABEN
   En un iPhone SE de los viejos (320px) hay tres sitios donde el contenido se
   sale de su caja: "Nondiscrimination" en un titular, las cifras grandes de
   los informes y una palabra en negrita del boletin. Son palabras sueltas sin
   donde partir, asi que o se les deja partir con guion o se encogen.
   -------------------------------------------------------------------------- */
@media(max-width:400px){
  h1,h2,h3,h4,h5,.collage-title,.sb-body h2,.quote p,.stat .l{
    overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  /* las cifras no se parten: se ajustan al ancho de su columna */
  .stat .n,.dyk-item b{font-size:clamp(1.45rem,9.5vw,2.3rem);overflow-wrap:normal;hyphens:none}
  .fcard b,.fcard strong,.hours b,.alert b{overflow-wrap:break-word}
}

/* --------------------------------------------------------------------------
   5. LOS DOS ULTIMOS DE 320px
   La cifra "1.000+" se salia 4px de su columna: la regla que la encoge no
   pesaba lo suficiente, hay que igualarle el peso a la que fija el tamano.
   Y la ficha de documento dejaba el titulo en una columna de 73px, porque el
   icono y el boton se quedaban con todo el ancho: ahora el titulo reclama un
   minimo y el boton se baja solo a la linea de abajo cuando no cabe.
   -------------------------------------------------------------------------- */
@media(max-width:400px){
  .stat-grid .stat .n,.statband-7 .stat .n{font-size:clamp(1.4rem,9vw,2.1rem)}
}
@media(max-width:420px){
  .filebox{flex-wrap:wrap;row-gap:.55rem}
  .filebox .fb-tx{flex:1 1 150px;min-width:150px}
  .filebox .badge,.filebox .badge-action,.filebox .btn{margin-left:auto}
}

/* ==========================================================================
   PASO 52 — LA INSCRIPCION DEL ELC: SOLO EL FORMULARIO
   La directora del programa: quien llega aqui todavia no habla ingles, no debe
   encontrarse ni una palabra de mas ni tener que desplazarse para ver el
   primer campo. La pagina ya va sin portada; aqui se recorta el aire que
   quedaba encima y el titulo se dice en los dos idiomas, en dos lineas.
   ========================================================================== */
/* Ojo con el peso: section.block{padding:...} pesa mas que .block-form y
   ademas usa el atajo "padding", que resetea el de arriba. Por eso el titulo
   acababa 11px POR DETRAS de la barra verde en escritorio y 38px en movil, que
   es lo que el cliente vio como "demasiado cerca del verde". Hay que escribirlo
   con el mismo elemento delante para ganarle. */
section.block.block-form{padding-top:calc(var(--hdr-h,115px) + 2.5rem)}
.form-title{font-size:clamp(1.5rem,4.4vw,2.1rem);line-height:1.15;margin:0 0 1.4rem;
  text-wrap:balance}
.form-title span{display:block;font-family:var(--sans,inherit);font-weight:500;
  font-size:.62em;color:var(--ink-soft);margin-top:.25rem}
@media(max-width:620px){
  section.block.block-form{padding-top:calc(var(--hdr-h,90px) + 1.75rem);padding-bottom:2rem}
  .form-title{margin-bottom:1rem}
}


/* ==========================================================================
   MISION Y VISION (pedido del cliente, 22-oct-2026)
   Dos declaraciones y nada mas: el rotulo y la frase. En el home va en verde
   oscuro entre Programas (blanco) y Valores (malva), que es donde la pidieron;
   en Overview va en verde claro porque la portada de arriba ya es oscura.
   Sustituye al bloque .mission-pair que se dejo previsto y nunca se uso.
   ========================================================================== */
main>section.block.mv-sec{background:linear-gradient(160deg,var(--green-deep),var(--green-deeper));
  color:#fff;position:relative;overflow:hidden}
.mv-sec .petal{opacity:.12;top:-40px;right:-40px;width:280px;color:#fff}
.mv-sec::before,.mv-sec::after,
.mv-sec+section.block::before,.mv-sec+section.block::after{display:none}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:0 auto;
  position:relative;z-index:2;align-items:stretch}
.mv-grid>div{padding:0 clamp(1.6rem,4.5vw,3.6rem);border-left:1px solid rgba(255,255,255,.18)}
.mv-grid>div:first-child{border-left:0;padding-left:0}
.mv-grid>div:last-child{padding-right:0}
.mv-grid h2{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);
  line-height:1.2;margin:0 0 1rem}
.mv-grid p{font-family:"DM Serif Display",Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.28;margin:0;color:#fff;
  max-width:24ch;text-wrap:balance}
main>section.block.mv-sec.mv-light{background:var(--sage);color:var(--ink)}
.mv-light .petal{color:var(--green);opacity:.14}
.mv-light .mv-grid>div{border-left-color:var(--line)}
.mv-light .mv-grid h2{color:var(--green-deep)}
.mv-light .mv-grid p{color:var(--ink)}
@media(max-width:760px){
  .mv-grid{grid-template-columns:1fr;gap:2rem}
  .mv-grid>div{padding:0;border-left:0}
  .mv-grid>div+div{padding-top:2rem;border-top:1px solid rgba(255,255,255,.18)}
  .mv-light .mv-grid>div+div{border-top-color:var(--line)}
  .mv-grid p{max-width:none}
}


/* Introduccion del formulario de voluntariado del ELC (22-oct-2026): las tres
   secciones del formulario viejo, antes de los campos. */
.intro-about{max-width:760px;margin:0 auto 2.6rem}
.intro-about h3{font-size:1.45rem;margin:1.9rem 0 .6rem}
.intro-about h3:first-child{margin-top:0}
.intro-about p{color:var(--ink-soft)}
.intro-about p+p{margin-top:.8rem}