/* Fundación Polígonos · sistema visual (paleta petróleo y coral, ver manual de logo)
   Concepto: el pentágono de los Cinco Dominios como forma recurrente; verde bosque sereno,
   un acento cálido reservado para «Donar», mucho blanco y datos siempre visibles.
   Todos los colores y fuentes están en tokens: la identidad gráfica definitiva se aplica cambiando :root. */
:root{
  --ink:#1D3539; --ink-soft:#4A5E61; --paper:#FFFFFF; --mist:#F3F7F6; --line:#DCE6E4;
  --forest:#0F5C63; --forest-2:#0A4248; --sage:#CFE8E4; --sage-2:#E3F1EF;
  --accent:#C2522F; --accent-ink:#A8401F; --accent-tint:#FCE7E0;
  --display:'Montserrat','Segoe UI',system-ui,sans-serif; --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:22px; --radius-s:14px; --max:1200px; --gutter:clamp(16px,4vw,40px);
  --shadow:0 1px 0 rgba(29,53,57,.05),0 14px 32px -20px rgba(29,53,57,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--forest);text-underline-offset:3px} a:hover{color:var(--forest-2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;letter-spacing:-.015em;text-wrap:balance;font-weight:800}
h1{font-size:clamp(40px,5.8vw,74px);font-weight:800}
h2{font-size:clamp(30px,3.8vw,48px)}
h3{font-size:22px;line-height:1.2}
p{margin:0}
.page-width{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:780px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-2)}
.eyebrow::before{content:"";width:12px;height:12px;background:currentColor;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.muted{color:var(--ink-soft)}
.section{padding-block:clamp(64px,8vw,104px)}
.section--mist{background:var(--mist)} .section--forest{background:var(--forest);color:#F3F7F6} .section--sage{background:var(--sage-2)}
.section--forest a{color:#fff} .section--forest .eyebrow{color:#9FDCD3} .section--forest .muted{color:#C6DEDC}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin-bottom:44px}
.section-head > div{display:flex;flex-direction:column;gap:14px;max-width:720px}
.section-head > p{max-width:440px}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.55}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 26px;border-radius:999px;background:var(--forest);color:#fff;font:700 16px/1.2 var(--sans);text-decoration:none;border:2px solid var(--forest);cursor:pointer;transition:transform .15s ease,background .15s ease}
.button:hover{color:#fff;background:var(--forest-2);border-color:var(--forest-2);transform:translateY(-1px)}
.button--donate{background:var(--accent);border-color:var(--accent);color:#fff} .button--donate:hover{background:#A8401F;border-color:#A8401F;color:#fff}
.button--ghost{background:transparent;color:var(--forest)} .button--ghost:hover{background:var(--sage-2);color:var(--forest)}
.section--forest .button--ghost{color:#fff;border-color:#fff} .section--forest .button--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.button--small{min-height:42px;padding:8px 18px;font-size:15px}
.link-arrow{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.ph{background:var(--accent-tint);color:var(--accent-ink);border-radius:6px;padding:0 5px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section--forest .ph{background:rgba(233,112,79,.24);color:#FFD1C2}
.skip-link{position:absolute;left:-9999px} .skip-link:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:40}

/* placeholder de foto */
.photo{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--sage);min-height:260px;display:flex;align-items:flex-end}
.photo::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 14l20 14.5-7.6 23.5H23.6L16 28.5z' fill='none' stroke='%230F5C63' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E");background-size:72px}
.photo figcaption{position:relative;margin:16px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);display:flex;gap:8px;align-items:center}
.photo figcaption svg{width:16px;height:16px;flex:none}
.photo--tall{min-height:420px} .photo--short{min-height:200px}

/* barra superior y encabezado */
.topbar{background:var(--forest);color:#E3F1EF;font-size:13.5px}
.topbar .page-width{display:flex;justify-content:space-between;gap:12px;padding-block:8px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.header-wrapper{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;min-height:78px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{height:44px;width:auto;flex:none;display:block}
.logo span{font:800 19px/1 var(--display);letter-spacing:-.02em}
.logo small{display:block;font:600 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.menu{display:flex;align-items:center;gap:4px 26px;list-style:none;margin:0;padding:0;font-weight:600;font-size:15.5px}
.menu a{text-decoration:none;color:var(--ink)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--forest-2);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.header__actions{display:flex;gap:10px;align-items:center}
.drawer{display:none}
@media (max-width:980px){
  .header__nav{display:none}
  .drawer{display:block}
  .drawer summary{list-style:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;cursor:pointer;background:var(--mist)}
  .drawer summary::-webkit-details-marker{display:none}
  .drawer[open] .drawer__panel{display:flex}
  .drawer__panel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:#fff;padding:10px var(--gutter) 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .drawer__panel a{font:700 24px/1.3 var(--display);text-decoration:none;color:var(--ink);padding:8px 0}
}
@media (max-width:520px){.header__actions .button--ghost{display:none}.logo svg{height:36px}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;align-items:center;padding-block:56px 72px}
.hero__text{display:flex;flex-direction:column;gap:22px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__media{position:relative}
.hero__badge{position:absolute;left:-18px;bottom:28px;background:#fff;border-radius:var(--radius-s);box-shadow:var(--shadow);padding:14px 18px;display:flex;gap:12px;align-items:center;max-width:280px;font-size:14px;line-height:1.35}
.hero__badge strong{font:800 28px/1 var(--display);color:var(--forest)}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:28px}.hero__badge{left:12px}}

/* contadores */
.counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.counter{background:#fff;padding:26px 24px;display:flex;flex-direction:column;gap:6px}
.counter strong{font:800 clamp(34px,4vw,48px)/1 var(--display);color:var(--forest);font-variant-numeric:tabular-nums}
.counter span{font-size:15px;color:var(--ink-soft)}
.counters-note{margin-top:14px;font-size:14px;color:var(--ink-soft)}
@media (max-width:820px){.counters{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* tarjetas */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))} .cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cards,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.cards--2,.cards--4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.card .photo{border-radius:0;min-height:190px}
.card__body{padding:24px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.card__body .link-arrow{margin-top:auto;align-self:flex-start;color:var(--forest)}
.card__tag{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-2)}
.icon-badge{width:52px;height:52px;border-radius:14px;background:var(--sage-2);display:grid;place-items:center}
.icon-badge svg{width:28px;height:28px}

/* cómo funciona */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:step;list-style:none;margin:0;padding:0}
.flow li{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-s);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.flow li::before{counter-increment:step;content:counter(step);font:800 15px/1 var(--display);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
.flow h3{font-size:19px}
.flow p{font-size:15px;color:#C6DEDC}
@media (max-width:980px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow{grid-template-columns:1fr}}

/* proyectos */
.project__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--ink-soft)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--sage-2);color:var(--forest)}
.status--next{background:var(--accent-tint);color:var(--accent-ink)}
.progress{display:flex;flex-direction:column;gap:6px;font-size:14px}
.progress__bar{height:10px;border-radius:999px;background:var(--mist);overflow:hidden}
.progress__bar span{display:block;height:100%;background:var(--forest-2);border-radius:999px}
.progress__row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-s)}
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--mist);color:var(--ink-soft)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* donación */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.breakdown{display:flex;flex-direction:column;gap:14px}
.breakdown__bar{display:flex;height:22px;border-radius:999px;overflow:hidden}
.breakdown__bar span:nth-child(1){background:var(--forest)} .breakdown__bar span:nth-child(2){background:var(--forest-2);opacity:.55} .breakdown__bar span:nth-child(3){background:var(--accent)}
.breakdown ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.breakdown li{display:flex;gap:12px;align-items:baseline}
.breakdown li i{width:12px;height:12px;border-radius:3px;flex:none;transform:translateY(1px)}
.donate-box{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:18px;border:1px solid var(--line)}
.donate-box h3{font-size:24px}
.toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--mist);border-radius:999px;padding:4px;border:0;margin:0}
.toggle legend{position:absolute;left:-9999px}
.toggle label{display:grid;place-items:center;min-height:44px;border-radius:999px;font-weight:700;cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle input:checked + span{background:#fff;box-shadow:var(--shadow)}
.toggle label span{display:grid;place-items:center;width:100%;height:100%;border-radius:999px}
.amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;padding:0;margin:0}
.amounts legend{position:absolute;left:-9999px}
.amount{position:relative}
.amount input{position:absolute;opacity:0}
.amount > span{display:flex;flex-direction:column;gap:2px;border:2px solid var(--line);border-radius:var(--radius-s);padding:12px 12px;cursor:pointer;min-height:84px}
.amount strong{font:800 20px/1.1 var(--display);font-variant-numeric:tabular-nums}
.amount small{font-size:12.5px;color:var(--ink-soft);line-height:1.3}
.amount input:checked + span{border-color:var(--forest);background:var(--sage-2)}
.amount input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:600}
.field input,.field select,.field textarea{font:16px var(--sans);padding:12px 16px;min-height:48px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--forest);flex:none}
.donate-note{font-size:13px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
.form-msg{display:none;background:var(--accent-tint);color:var(--accent-ink);border-radius:12px;padding:12px 14px;font-size:14.5px;font-weight:600}
.form-msg.is-visible{display:block}

/* masi */
.brand-band{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px 56px;align-items:center;background:var(--accent-tint);border-radius:var(--radius);padding:clamp(28px,5vw,56px)}
@media (max-width:860px){.brand-band{grid-template-columns:1fr}}
.brand-band__mark{font:800 clamp(56px,8vw,96px)/1 var(--display);color:var(--accent-ink);letter-spacing:-.04em}
.brand-band__logo{display:block;width:clamp(180px,26vw,300px);height:auto;margin-bottom:14px}
/* La franja de Masi usa el crema de su propia marca para distinguirla de la Fundación */
.brand-band{background:#FBF4EA}

/* newsletter */
.newsletter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:center}
@media (max-width:860px){.newsletter{grid-template-columns:1fr}}
.inline-form{display:flex;flex-wrap:wrap;gap:10px}
.inline-form input{flex:1 1 240px;min-width:0;font:16px var(--sans);padding:12px 20px;min-height:52px;border-radius:999px;border:1.5px solid var(--line)}

/* páginas internas */
.page-hero{background:var(--mist);padding-block:48px 56px;border-bottom:1px solid var(--line)}
.page-hero .page-width{display:flex;flex-direction:column;gap:16px}
.page-hero h1{font-size:clamp(38px,5vw,62px);max-width:900px}
.page-hero .lead{max-width:760px}
.breadcrumbs{font-size:14px;color:var(--ink-soft)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.breadcrumbs li+li::before{content:"›";margin-right:6px}
.prose{font-size:17.5px;line-height:1.72}
.prose h2{font-size:clamp(26px,3vw,34px);margin:48px 0 14px;scroll-margin-top:110px}
.prose h3{margin:28px 0 10px}
.prose p,.prose ul,.prose ol,.prose .table-wrap,.prose blockquote{margin:0 0 18px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose blockquote{background:var(--sage-2);border-radius:var(--radius-s);padding:18px 22px}
.callout{background:var(--accent-tint);border-radius:var(--radius-s);padding:20px 24px}
.checklist{list-style:none;padding:0!important}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.checklist li::before{content:"";flex:none;width:18px;height:18px;margin-top:5px;border:2px solid var(--forest-2);border-radius:5px}
.domains{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:980px){.domains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.domains{grid-template-columns:1fr}}
.domain{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:20px;display:flex;flex-direction:column;gap:8px}
.domain b{font:800 30px/1 var(--display);color:var(--accent)}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:860px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{display:flex;flex-direction:column;gap:10px}
.person .photo{min-height:240px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{font-weight:700;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;font-size:17.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--forest-2)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:18px}

/* footer */
.footer{background:var(--ink);color:#C7D5D6;padding-block:64px 28px;font-size:15px}
.footer a{color:#fff;text-decoration:none} .footer a:hover{text-decoration:underline}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:36px 48px}
@media (max-width:860px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer .logo{color:#fff} .footer .logo small{color:#9CB7B8}
.footer h2{font:700 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9CB7B8;margin-bottom:12px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer__legal{border-top:1px solid #2E4A4D;margin-top:44px;padding-top:22px;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.antifraud{display:flex;gap:10px;align-items:flex-start;background:#25403F;border-radius:12px;padding:12px 16px}
.antifraud svg{width:20px;height:20px;flex:none;margin-top:2px}
.donate-note svg{width:18px;height:18px;flex:none;margin-top:2px}
.counter strong .ph,.hero__badge strong .ph,.brand-band .ph{font:inherit;padding:0 6px}
h1 .ph,h2 .ph,h3 .ph{font:inherit}
.hero__badge{bottom:auto;top:28px}
.hero h1{font-size:clamp(40px,5.2vw,66px)}
.counter strong .ph{color:var(--forest)}
@media (max-width:480px){.amounts{grid-template-columns:1fr}.amount > span{flex-direction:row;align-items:baseline;gap:10px;min-height:0}}

/* ---------- flujo de donación ---------- */
.donate-box__head{display:flex;flex-direction:column;gap:4px}
.donate-box__why{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin-top:-4px}
.amounts{grid-template-columns:repeat(2,minmax(0,1fr))}
.amount > span{position:relative}
.amount--featured > span{border-color:var(--forest-2)}
.amount__badge{position:absolute;top:-10px;right:10px;background:var(--forest);color:#fff;font:700 11px/1 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px}
.amount--other strong{font-size:17px}
.donate-box__daily{font-size:14px;font-weight:600;color:var(--forest);margin-top:-6px}
.donate-box__fields{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.donate-box__cert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.donate-box__cert[hidden]{display:none}
.button--block{width:100%;min-height:56px;font-size:17px}
.button[disabled]{opacity:.7;cursor:progress}
.donate-box__secure{font-size:13px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.donate-box__secure svg{width:18px;height:18px;flex:none;margin-top:1px}
.donate-box__alt{font-size:13.5px;color:var(--ink-soft);margin-top:-8px}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--forest);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.form-msg a{color:inherit}
@media (max-width:480px){.amounts{grid-template-columns:1fr 1fr}.amount > span{flex-direction:column;align-items:flex-start;gap:2px;min-height:84px}.donate-box__cert{grid-template-columns:1fr}}

.donate-pitch{display:flex;flex-direction:column;gap:20px}
.story{margin:0;display:flex;flex-direction:column;gap:12px}
.story figcaption{font-size:15.5px;line-height:1.55}
.goal{display:flex;flex-direction:column;gap:8px;background:var(--mist);border-radius:var(--radius-s);padding:16px 18px}
.goal__row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px;font-variant-numeric:tabular-nums}
.goal .progress__bar span{background:var(--accent)}
.goal small{font-size:13px}
.promise{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.promise svg{width:22px;height:22px;flex:none;margin-top:1px}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--ink-soft)}
.trust li{display:flex;gap:10px;align-items:flex-start}
.trust svg{width:20px;height:20px;flex:none;margin-top:2px}

/* página /dona/: en móvil el formulario va justo después del título */
.dona{padding-block:28px clamp(56px,7vw,88px)}
.dona__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-areas:"intro form" "story form";gap:28px 64px;align-items:start}
.dona__intro{grid-area:intro;display:flex;flex-direction:column;gap:16px}
.dona__intro h1{font-size:clamp(34px,4.4vw,54px)}
.dona__form{grid-area:form;position:sticky;top:96px;scroll-margin-top:96px}
.dona__story{grid-area:story;display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.dona__grid{grid-template-columns:1fr;grid-template-areas:"intro" "form" "story"}.dona__form{position:static}}

/* barra fija de donación en móvil */
.sticky-donate{display:none}
@media (max-width:760px){
  .sticky-donate{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(29,53,57,.4);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font-weight:700;font-size:14.5px}
  body{padding-bottom:72px}
}

/* página de gracias */
.gracias h1{font-size:clamp(36px,5vw,56px);margin:10px 0 14px}
.gracias [hidden]{display:none!important}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.upsell,.share{margin-top:36px;display:flex;flex-direction:column;gap:12px}
.upsell{background:var(--accent-tint);border-radius:var(--radius);padding:24px}
.upsell h2,.share h2{font-size:clamp(24px,3vw,30px)}
.gracias .callout{background:var(--mist)}
.donate-box__abroad{font-size:13.5px;color:var(--ink-soft);margin-top:-8px}

/* servicios */
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.city{display:inline-flex;gap:8px;align-items:baseline;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:15px;color:var(--ink-soft)}
.city em{font-style:normal;font-size:13.5px}
.city--on{border-color:var(--forest);background:var(--sage-2);color:var(--ink)}
.city--on em:first-of-type{color:var(--forest);font-weight:700}
.price{font-weight:700;color:var(--forest);font-size:15px}
.flow--light li{background:#fff;border-color:var(--line)}
.flow--light p{color:var(--ink-soft)}
.flow--light{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.flow--light{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow--light{grid-template-columns:1fr}}
.button svg{width:20px;height:20px}
.bank{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.bank__row{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.bank__row:last-child{border-bottom:0}
.bank__row span{font-size:13.5px;color:var(--ink-soft)}
.bank__row strong{font-size:16.5px;overflow-wrap:anywhere}
@media (max-width:480px){.bank__row{grid-template-columns:1fr auto}.bank__row span{grid-column:1/-1}}
.nowrap{white-space:nowrap}
.form-msg.is-error{background:#FCE7E0;color:#A8401F}

/* Versión simple (--simple): símbolo en lugar de foto en el hero */
.hero__media--simbolo{display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.hero__media--simbolo img{width:min(100%,420px);height:auto}
.soon{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--font-head,Montserrat),sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent-ink,#C2522F);padding:8px 14px;border-radius:999px}

/* Franja de idioma: solo aparece si el navegador está en inglés y la página es en español (se cierra una vez). */
.lang-banner{background:var(--forest,#0F5C63);color:#fff;font-size:14.5px}
.lang-banner[hidden]{display:none}
.lang-banner .page-width{display:flex;align-items:center;gap:14px;min-height:44px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.lang-banner a{color:#fff;font-weight:700;text-decoration:underline}
.lang-banner button{margin-left:auto;background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}

/* Portada de marca (versión simple, mientras no hay fotos): ícono del tema sobre verde claro, misma proporción que la foto. */
.cover{display:grid;place-items:center;aspect-ratio:3/2;background:var(--sage-2,#E3F1EF);border-radius:var(--radius-s,12px);overflow:hidden}
.cover.photo--short{aspect-ratio:16/9}
.cover svg{width:28%;max-width:120px;height:auto}
.cover img{width:30%;max-width:130px;height:auto;opacity:.9}
.card>.cover{border-radius:var(--radius-s,12px) var(--radius-s,12px) 0 0}