/* =========================================================
   Luta pela Paz — folha de estilo do site
   Portada do protótipo v3 (03/09/2026) e adequada ao Manual da Marca v1.0 (jun/2026,
   docs/marca/manual-marca-lpp-v1.0-2026-06.pdf; resumo em docs/marca/diretrizes-resumo.md;
   auditoria em docs/auditoria-marca.md).

   Paleta oficial (p. 21-22):
     primárias   azul marinho profundo #201B54 (base) · ciano vibrante #0DA6DF (assinatura)
     secundárias amarelo impacto #F6F722 · laranja ação #FD6100 · rosa poder #D64191
                 azul elétrico #0452F6 · verde progresso #059101
     terciárias  cinza neutro #C7C7C7 · cinza nuvem #EDF1F3 · branco #FFFFFF
   Sistema de uso (contraste WCAG 2.1 AA, auditoria seção 5):
     fundo claro → texto navy; secundário --muted #58547F (navy a 75 %, 7,0:1); link azul elétrico;
                   botão primário navy sólido/branco; secundário contorno navy; foco navy 3 px.
     fundo navy  → texto branco/cinza nuvem; secundário cinza neutro; link e destaque ciano;
                   botão primário ciano/texto navy; secundário contorno branco; foco amarelo.
     amarelo só como acento pontual sobre navy (linha do eyebrow, foco) — nunca sobre fundo claro.
     laranja/rosa/verde só em formas, ícones e títulos grandes (≥ 24 px).
     profundidade sobre navy: overlays rgba de preto/branco (nunca novos hex de navy).
   Fora da paleta, por acessibilidade (documentado): --error #A61820 (erro de formulário, 7,6:1
   sobre branco — a paleta não tem vermelho); --muted #58547F; --field rgba(32,27,84,.55)
   (borda de campo, 3,7:1 sobre branco).
   Tipografia (p. 24): títulos FRANCHISE PRO ROUNDED BOLD, caixa alta — Barlow Condensed 700/800
   é substituto TEMPORÁRIO até a licença; texto e interface em SORA (variável 100-800, OFL).
   Seletores por página: <main class="page-<reverse_id>"> (page-home, page-quem-somos, page-impacto,
   page-historias, page-story, page-noticias, page-doar, page-contato, page-participar…).
   ========================================================= */

/* Sora (texto e interface) — fonte variável, subconjuntos latin / latin-ext */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Barlow Condensed — substituto temporário da Franchise Pro Rounded (títulos) */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800.woff2) format('woff2')}
/* Franchise Pro Rounded Bold (p. 24) — descomentar quando o arquivo licenciado chegar em
   config/static/fonts/franchise-pro-rounded-bold.woff2 (Fase B do plano).
@font-face{font-family:'Franchise Pro Rounded';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/franchise-pro-rounded-bold.woff2) format('woff2')}
*/

/* ---------- tokens ---------- */
:root{
  /* paleta oficial */
  --navy:#201B54;--cyan:#0DA6DF;--yellow:#F6F722;
  --orange:#FD6100;--pink:#D64191;--electric:#0452F6;--green:#059101;
  --gray:#C7C7C7;--cloud:#EDF1F3;--paper:#FFFFFF;
  --blue:var(--cyan); /* alias legado do protótipo */
  /* papéis */
  --text:var(--navy);--muted:#58547F;--link:var(--electric);--mist:var(--cloud);--line:var(--gray);
  --on-navy:var(--cloud);--on-navy-2:var(--gray);
  --field:rgba(32,27,84,.55);   /* borda de campo (navy a 55 %) */
  --error:#A61820;              /* vermelho funcional de erro — fora da paleta, exigido pela acessibilidade */
  /* profundidade sobre navy */
  --ink:rgba(0,0,0,.28);--ink-2:rgba(0,0,0,.45);--glow:rgba(255,255,255,.12);--glow-2:rgba(255,255,255,.2);
  --display:"Franchise Pro Rounded","Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Sora","Helvetica Neue",Arial,sans-serif;
  --hdr-h:88px;
  --r:16px;--r-sm:10px;--r-lg:28px;
  --shadow-xs:0 2px 10px rgba(32,27,84,.06);
  --shadow-sm:0 8px 24px rgba(32,27,84,.09);
  --shadow-md:0 18px 50px rgba(32,27,84,.14);
  --shadow-lg:0 28px 80px rgba(32,27,84,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);font-family:var(--body)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
[hidden]{display:none!important}

/* ---------- base ---------- */
.site{container-type:inline-size;container-name:site;background:var(--paper);color:var(--text);line-height:1.6;font-size:16px;position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.site>main{flex:1}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
h1,h2,h3{font-family:var(--display);margin:0;text-transform:uppercase;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(52px,7.2cqw,108px);font-weight:800;line-height:.89}
h2{font-size:clamp(38px,4.4cqw,60px);font-weight:800;line-height:.94}
h3{font-size:26px;font-weight:700;line-height:1.04}
.h2-sm{font-size:40px;margin-bottom:14px}
p{margin:0 0 1em;max-width:72ch}
.lead{font-size:20px;line-height:1.5;max-width:60ch}
.lead p{margin:0 0 .6em;max-width:none}
.lead p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
a{color:var(--link);transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
main:focus{outline:none}
:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:6px}
/* Contextos navy: foco amarelo (13,55:1), texto branco, links ciano. A lista é reutilizada abaixo. */
:is(.hdr,.hero,.pagehead,.navy,.location-cta,.summary,.ft,.card-mockup,.map,.tier,.val,blockquote) :focus-visible{outline-color:var(--yellow)}
:is(.corner,.card,.dbox,.stat,.story,.news article,.newslist article,.tl div,.pillar,.place,.bigstat,.bars,.news-tools,.tabs,.toggle,.pay label) :focus-visible{outline-color:var(--navy)}
.skip{position:absolute;left:-9999px;top:8px;z-index:99}
.skip:focus{left:12px;background:var(--navy);color:#fff;padding:8px 12px;font-weight:700;outline-color:var(--yellow)}
.center{text-align:center}

/* Botões. Primário (.btn-primary / .btn-yellow legado): navy sólido em fundo claro, ciano com texto
   navy em contexto navy. Secundário: .btn-line (contorno navy, fundo claro) / .btn-ghost (contorno
   branco, fundo navy) — cada um assume a forma do outro fora do seu contexto. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1.2 var(--body);letter-spacing:0;text-decoration:none;padding:13px 22px;border-radius:999px;border:2px solid transparent;cursor:pointer;min-height:50px;white-space:nowrap;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary,.btn-yellow,.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover,.btn-yellow:hover,.btn-navy:hover{background:linear-gradient(var(--glow),var(--glow)) var(--navy)}
.btn-line,.btn-ghost{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-line:hover,.btn-ghost:hover{background:var(--cloud)}
:is(.hdr,.hero,.pagehead,.sec.navy,.location-cta,.summary,.ft) :is(.btn-primary,.btn-yellow){background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
:is(.hdr,.hero,.pagehead,.sec.navy,.location-cta,.summary,.ft) :is(.btn-primary,.btn-yellow):hover{background:linear-gradient(var(--glow-2),var(--glow-2)) var(--cyan);border-color:transparent}
:is(.hdr,.hero,.pagehead,.sec.navy,.location-cta,.summary,.ft) .btn-navy{background:#fff;border-color:#fff;color:var(--navy)}
:is(.hdr,.hero,.pagehead,.sec.navy,.location-cta,.summary,.ft) .btn-navy:hover{background:var(--cloud);border-color:var(--cloud)}
:is(.hdr,.hero,.pagehead,.sec.navy,.location-cta,.summary,.ft) :is(.btn-line,.btn-ghost){background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
:is(.hdr,.hero,.pagehead,.sec.navy,.location-cta,.summary,.ft) :is(.btn-line,.btn-ghost):hover{background:var(--glow);border-color:#fff}
.btn-lg{font-size:18px;padding:16px 28px}
.btn-sm{font-size:14px;padding:9px 16px;min-height:40px}
.btn-block{width:100%}

.eyebrow{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:0 0 18px;color:var(--navy);font:800 12px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase}
.eyebrow span{display:block;width:32px;height:3px;border-radius:3px;background:currentColor;flex-shrink:0}
/* Sobre navy: texto branco e a linha em amarelo (acento pontual). */
:is(.hero,.pagehead,.sec.navy,.location-cta) .eyebrow{color:#fff}
:is(.hero,.pagehead,.sec.navy,.location-cta) .eyebrow span{background:var(--yellow)}

/* ---------- cabeçalho ---------- */
.hdr{position:sticky;top:0;z-index:20;color:#fff;background:var(--navy);box-shadow:0 9px 28px rgba(0,0,0,.18);isolation:isolate}
.cms-toolbar-expanded .hdr{top:46px}
/* Cabeçalho = 3× a altura do logo em Linha Única: no manual (p. 16) o módulo x dessa
   versão é a altura do ícone (= altura do logo) e a área de proteção mínima é 1x. */
.hdr-in{--hdr-h:96px;display:flex;align-items:center;gap:32px;height:var(--hdr-h)}
/* Logo oficial (Linha Única, arte do manual em SVG). Só a altura é definida; a largura
   segue a proporção do arquivo (370×76) — nunca esticar nem recompor (p. 14). */
.logo{display:flex;align-items:center;flex-shrink:0;color:#fff;text-decoration:none}
.logo img{display:block;height:32px;width:auto}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--on-navy);text-decoration:none;font-weight:600;font-size:14px;padding:10px 10px;border:0;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--glow)}
.nav a[aria-current=page]{background:rgba(13,166,223,.2);color:#fff}
.hdr-cta{margin-left:auto;display:flex;gap:9px;align-items:center}
.burger{display:none;background:none;border:2px solid rgba(255,255,255,.6);color:#fff;border-radius:12px;width:44px;height:44px;font-size:20px;cursor:pointer;place-items:center}
/* Linha de assinatura em ciano (substitui a faixa tricolor "cordas" do protótipo). */
.brand-line{display:block;height:4px;background:var(--cyan)}
.page-progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:6;pointer-events:none}
.page-progress i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 12px rgba(13,166,223,.6);transition:width .1s linear}
.nav-scrim{display:none}

/* ---------- fotos e placeholders ---------- */
/* Placeholders são formas sólidas da paleta (sem listras nem gradientes). */
.ph{position:relative;min-height:200px;display:flex;align-items:flex-end;color:var(--on-navy);background:var(--navy)}
.ph>span{font:500 12px/1.3 var(--body);padding:10px 12px;background:var(--ink-2)}
.ph.warm{background:var(--orange);color:var(--navy)}
.ph.warm>span{background:rgba(255,255,255,.45);color:var(--navy)}
.ph.gold{background:var(--yellow);color:var(--navy)}
.ph.gold>span{background:rgba(255,255,255,.45);color:var(--navy)}
.ph.sky{background:var(--cyan);color:var(--navy)}
.ph.sky>span{background:rgba(255,255,255,.45);color:var(--navy)}
/* A foto real entra por style="--img:url(...)" + classe .img (só use .img quando houver imagem) */
.img{background-image:var(--img);background-size:cover;background-position:center;background-repeat:no-repeat}
.img>span{display:none}
.img.img-contain{background-color:var(--navy);background-size:contain;background-position:center bottom}
.img.img-athlete{background-color:var(--navy);background-size:auto 96%;background-position:right 6% bottom}
.ph.rounded{border-radius:24px;box-shadow:var(--shadow-md)}
.ico{position:absolute;left:24px;bottom:-30px;width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:#fff center/74% no-repeat;background-image:var(--img);box-shadow:0 10px 24px rgba(0,0,0,.22)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:720px;display:flex;align-items:flex-end;color:#fff;background:var(--navy);overflow:hidden}
.hero .ph{position:absolute;inset:0;min-height:0;transform:scale(1.015)}
.hero .ph>span{position:absolute;top:14px;left:14px}
/* Overlay escuro (preto translúcido) para legibilidade sobre foto/vídeo. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 47%,rgba(0,0,0,.08) 75%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.86) 100%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:92px;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:62px;align-items:end}
.hero .wrap.no-corner{grid-template-columns:1fr}
.hero h1{font-size:clamp(64px,7.25cqw,112px);max-width:9.4ch;text-shadow:0 5px 30px rgba(0,0,0,.24)}
.hero .lead{color:var(--on-navy);max-width:55ch;margin:25px 0 30px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;color:var(--on-navy);font-size:13px}
.hero-proof span{display:flex;align-items:center;gap:8px}
.hero-proof span::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--glow);color:var(--cyan);font-weight:800}
.hero-proof strong{color:#fff}
.corner{align-self:end;padding:26px 26px 24px;border-radius:22px;background:rgba(255,255,255,.96);color:var(--navy);border:1px solid rgba(255,255,255,.65);border-top:6px solid var(--cyan);box-shadow:var(--shadow-lg);backdrop-filter:blur(12px)}
.corner small{display:block;color:var(--link);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.corner b{display:block;font:700 30px/.95 var(--display);text-transform:uppercase;margin:10px 0 16px}
.corner a{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:700;text-decoration:none}
.corner a::after{content:"→";transition:transform .2s ease}
.corner a:hover::after{transform:translateX(4px)}
.hero-flat{min-height:520px}
.hero-flat::before{background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.08) 76%)}
.hero-flat::after{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7))}
.hero-flat .wrap{grid-template-columns:1fr;padding-top:100px}
.hero-flat h1{font-size:clamp(44px,5.6cqw,80px);max-width:14ch}
.article-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.article-meta span{padding:7px 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.09);color:#fff;font-size:13px;font-weight:700}

/* ---------- cabeçalho de página ---------- */
.pagehead{position:relative;isolation:isolate;padding:96px 0 84px;color:#fff;background:var(--navy);overflow:hidden}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{font-size:clamp(58px,6.2cqw,94px);max-width:14ch}
.pagehead.compact h1{font-size:clamp(44px,5.6cqw,80px)}
.pagehead .lead{margin-top:23px;color:var(--on-navy);max-width:67ch}
.pagehead.compact{padding-bottom:72px}
.pagehead.compact .lead{margin-top:14px}
.pagehead.athlete::after{content:"";position:absolute;right:4%;bottom:-6px;width:230px;height:100%;background:url(../img/atleta.webp) center bottom/contain no-repeat;pointer-events:none;z-index:1}
.pagehead.athlete .lead{max-width:46ch}

/* ---------- faixa de números (cards sobre o hero) ---------- */
.strip{position:relative;z-index:4;margin-top:-44px;padding:0 0 76px;background:transparent;color:var(--text)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{position:relative;min-height:165px;padding:25px 24px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:var(--cyan)}
.stat b{position:relative;z-index:1;display:block;font:800 64px/1 var(--display);color:var(--navy);letter-spacing:-.025em}
.stat span{position:relative;z-index:1;display:block;color:var(--muted);font-size:13px;max-width:24ch;margin-top:6px;line-height:1.4}
.page-home>.sec:first-of-type{padding-top:40px}

/* ---------- seções ---------- */
.sec{padding:104px 0}
.sec.mist{background:var(--cloud)}
.sec.navy{position:relative;color:#fff;background:var(--navy);overflow:hidden}
.sec.navy>.wrap{position:relative;z-index:1}
.sec.navy .lead{color:var(--on-navy)}
.sec.navy .muted{color:var(--on-navy-2)}
.sec.navy a:not(.btn){color:var(--cyan)}
/* Caixas brancas dentro de seção navy voltam ao sistema de fundo claro. */
.sec.navy :is(.card,.dbox,.news article,.newslist article,.tl div,.pillar,.place,.bigstat,.bars,.story) a:not(.btn){color:var(--link)}
.sec.navy a.story{color:var(--text)}
.sec.navy :is(.card,.dbox,.news article,.newslist article,.tl div,.pillar,.place,.bigstat,.bars,.story) :is(.btn-line,.btn-ghost){background:#fff;color:var(--navy);border-color:var(--navy)}
.sec.navy :is(.card,.dbox,.news article,.newslist article,.tl div,.pillar,.place,.bigstat,.bars,.story) :is(.btn-line,.btn-ghost):hover{background:var(--cloud);border-color:var(--navy)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:48px}
.sec-head h2{position:relative;padding-top:18px}
.sec-head h2::before{content:"";position:absolute;left:0;top:0;width:54px;height:5px;border-radius:5px;background:var(--cyan)}
.sec-head p{margin:0;max-width:52ch;color:var(--muted);font-size:17px;line-height:1.55}
.sec.navy .sec-head p{color:var(--on-navy)}
.sec-cta{margin-top:28px}
.sec-cta.center{text-align:center}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.g2.start{align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--field)}
.card .ph{min-height:240px;overflow:visible;background-size:cover;transition:transform .35s ease,filter .35s ease}
.card:hover .ph{transform:scale(1.02);filter:saturate(1.08)}
.card-b{padding:25px 25px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.card .card-b{padding-top:46px}
.card .ph:not(:has(.ico))+.card-b{padding-top:25px}
.card-b h3{font-size:34px}
.card-b p{color:var(--muted);margin:0;flex:1;font-size:15px;line-height:1.55}
.card-b>a{display:inline-flex;align-items:center;gap:7px;width:max-content;font-weight:700;text-decoration:none}
.card-b>a::after{content:"→";transition:transform .2s ease}
.card-b>a:hover::after{transform:translateX(4px)}
.topline{border-top:3px solid var(--navy);padding:18px 0 0}

.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pillar{position:relative;min-height:220px;padding:74px 22px 24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-xs);overflow:hidden}
.pillar::before{content:attr(data-index);position:absolute;left:20px;top:18px;font:800 34px/1 var(--display);color:var(--navy)}
.pillar::after{content:"";position:absolute;left:20px;top:59px;width:36px;height:4px;background:var(--cyan);border-radius:4px}
.pillar b{display:block;font:700 27px/.98 var(--display);text-transform:uppercase;margin-bottom:12px}
.pillar span{font-size:14px;color:var(--muted);line-height:1.5;display:block}

.feat{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.feat .ph{min-height:480px;border-radius:24px;box-shadow:var(--shadow-md)}
.page-home .feat,.page-historias .feat{padding:30px;border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:var(--shadow-sm)}
.page-home .feat .ph,.page-historias .feat .ph{min-height:510px}
.quote{font:600 38px/1.13 var(--display);text-transform:none;color:var(--navy);letter-spacing:-.012em;margin:0 0 18px}
.byline{font-weight:600;color:var(--muted);line-height:1.5;margin-bottom:22px}
.story-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.story-list.two{grid-template-columns:1fr 1fr;margin-top:20px}
.story{display:flex;gap:16px;align-items:center;min-height:122px;padding:15px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-xs);text-decoration:none;color:var(--text);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.story:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--field)}
.story .ph{width:86px;height:86px;min-height:0;border-radius:50%;flex-shrink:0;overflow:hidden;border:4px solid #fff;box-shadow:0 5px 18px rgba(32,27,84,.16)}
.story .ph>span{display:none}
.story b{display:block;font:700 24px/1 var(--display);text-transform:uppercase;margin-bottom:4px}
.story span{font-size:14px;color:var(--muted)}
.story-list.two .story{min-height:105px}
/* Avatar ilustrativo (silhueta branca) sobre a cor sólida do placeholder. */
.story-list.two .ph:not(.img){background-image:radial-gradient(circle at 50% 34%,rgba(255,255,255,.9) 0 13%,transparent 14%),radial-gradient(ellipse at 50% 96%,rgba(255,255,255,.72) 0 34%,transparent 35%);background-repeat:no-repeat}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px;align-items:stretch}
.tier{position:relative;display:block;min-height:235px;padding:32px 28px;border-radius:22px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;text-decoration:none;box-shadow:0 14px 35px rgba(0,0,0,.12);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.tier:hover{border-color:var(--cyan);background:rgba(255,255,255,.13);transform:translateY(-5px)}
.tier b{display:block;font:800 60px/1 var(--display);color:#fff}
.tier small{display:block;font-size:13px;color:var(--on-navy);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:12px}
.tier p{margin:16px 0 0;font-size:15px;color:var(--on-navy);line-height:1.55}
.tier.hot{background:var(--cyan);color:var(--navy);border-color:var(--cyan);transform:translateY(-8px);box-shadow:0 20px 48px rgba(0,0,0,.24)}
.tier.hot:hover{background:linear-gradient(var(--glow-2),var(--glow-2)) var(--cyan);transform:translateY(-11px)}
.tier.hot b,.tier.hot p,.tier.hot small{color:var(--navy)}
.tier-badge{position:absolute;right:18px;top:18px;padding:6px 10px;border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ---------- notícias ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news article{padding:0 0 24px;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;box-shadow:var(--shadow-xs);transition:transform .25s ease,box-shadow .25s ease}
.news article:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.news article .ph{min-height:215px;margin:0 0 20px;border-radius:0}
.news article time,.news article h3,.news article p{margin-left:22px;margin-right:22px}
.news time,.newslist time{font-size:13px;color:var(--muted);font-weight:600}
.news h3,.newslist h3{font-size:25px;text-transform:none;line-height:1.12;margin:6px 0 8px}
.news article h3{font-size:27px}
.news h3 a,.newslist h3 a{color:var(--text);text-decoration:none}
.news h3 a:hover,.newslist h3 a:hover{color:var(--link)}
.news p,.newslist p{color:var(--muted);font-size:14px;margin:0}
.news article p{line-height:1.5}
.news-tools{display:grid;gap:18px;margin-bottom:34px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--cloud);box-shadow:var(--shadow-xs)}
.news-search{position:relative;max-width:650px}
.news-search>span{position:absolute;left:16px;top:50%;transform:translateY(-52%);font-size:25px;color:var(--navy);pointer-events:none}
.news-search .inp{padding-left:48px;background:#fff}
.news-filters{display:flex;gap:8px;flex-wrap:wrap}
.news-filter{display:inline-flex;align-items:center;border:1px solid var(--field);border-radius:999px;background:#fff;color:var(--navy);padding:9px 15px;font:700 13px var(--body);cursor:pointer;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.news-filter:hover{border-color:var(--navy);background:var(--cloud)}
.news-filter.on{background:var(--navy);border-color:var(--navy);color:#fff}
.news-count{margin:0;color:var(--muted);font-size:13px;font-weight:600}
.newslist{display:grid;gap:16px}
.newslist article{position:relative;display:grid;grid-template-columns:250px 1fr;gap:28px;padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-xs);align-items:start;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.newslist article:hover{transform:translateX(5px);box-shadow:var(--shadow-sm);border-color:var(--field)}
.nthumb{height:150px;min-height:150px;border-radius:14px}
.news-cat{display:inline-flex;margin-right:12px;padding:5px 9px;border-radius:999px;background:var(--cloud);color:var(--link);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.newslist time{font-size:13px}
.newslist h3{font-size:29px;line-height:1.08;margin:12px 0 8px}
.newslist p{font-size:15px;line-height:1.5}
.news-empty{padding:40px;text-align:center;border:2px dashed var(--field);border-radius:20px;background:var(--cloud)}
.news-empty b,.news-empty span{display:block}.news-empty b{font:800 30px var(--display);color:var(--navy)}.news-empty span{color:var(--muted)}
.news-actions{justify-content:center}
.pager{display:flex;gap:10px;margin-top:32px;align-items:center;justify-content:center;flex-wrap:wrap}
.pager span{color:var(--muted);font-size:14px}

/* ---------- parceiros / newsletter ---------- */
.page-home>.sec.mist:last-of-type .g2{align-items:stretch;gap:22px}
.page-home>.sec.mist:last-of-type .g2>div{padding:34px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-xs)}
/* Logos de parceiros em cor original, separados por linha divisória fina (p. 18). */
.logos{display:flex;flex-wrap:wrap;gap:20px 0;align-items:center}
.logos img{height:42px;width:auto;padding:0 17px;transition:transform .2s ease}
.logos img+img{border-left:1px solid var(--line)}
.logos img.low{height:22px;box-sizing:content-box}
.logos img:hover{transform:translateY(-2px)}
.nl{display:flex;gap:10px;max-width:none}

/* ---------- linha do tempo, valores, equipe, transparência ---------- */
.tl{display:grid;gap:12px}
.tl div{position:relative;min-height:78px;padding:19px 20px 18px 94px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-xs)}
.tl b{position:absolute;left:18px;top:15px;display:grid;place-items:center;width:58px;min-height:48px;padding:5px;border-radius:12px;background:var(--navy);color:#fff;font:800 24px/1 var(--display);text-align:center}
.page-quem-somos>.sec:first-of-type .ph{border-radius:26px;box-shadow:var(--shadow-md)}
.vals{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.val{position:relative;min-height:220px;padding:72px 22px 24px;border-radius:20px;color:#fff;background:var(--navy);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.val::before{content:attr(data-index);position:absolute;left:20px;top:18px;font:800 35px var(--display);color:var(--cyan)}
.val b{display:block;font:800 32px/1 var(--display);text-transform:uppercase;color:#fff;margin-bottom:8px}
.val span{font-size:14px;color:var(--on-navy);line-height:1.5}
.dbox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow-sm)}
.dbox.tint{background:var(--cloud);border-color:var(--line)}
.dbox>h3{margin-bottom:14px}
.doclist a{position:relative;display:block;padding:15px 34px 15px 0;border-top:1px solid var(--line);font-weight:600;text-decoration:none;color:var(--navy)}
.doclist a::after{content:"↓";position:absolute;right:5px;color:var(--link);font-weight:800}
.doclist a:hover{color:var(--link);padding-left:5px}

/* ---------- abas ---------- */
.tabs{display:flex;width:max-content;max-width:100%;padding:6px;border:1px solid var(--line);border-radius:999px;background:var(--cloud);box-shadow:var(--shadow-xs);margin-bottom:40px}
.tab{background:none;border:0;margin:0;padding:13px 24px;border-radius:999px;font:700 23px var(--display);text-transform:uppercase;color:var(--muted);cursor:pointer}
.tab:hover{background:#fff;color:var(--navy)}
.tab[aria-selected=true]{background:var(--navy);color:#fff;box-shadow:0 7px 20px rgba(32,27,84,.2)}
.panel{display:none}.panel.on{display:block;animation:panel-in .35s ease}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel .g2{gap:58px}
.panel .ph{border-radius:26px;box-shadow:var(--shadow-md)}
.panel-extra{margin-top:48px}
.panel .topline{padding:24px;border:1px solid var(--line);border-top:5px solid var(--cyan);border-radius:18px;background:#fff;box-shadow:var(--shadow-xs)}
.panel .topline h3{margin-bottom:10px}

/* ---------- impacto ---------- */
.bigstats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bigstat{position:relative;min-height:250px;padding:32px;border:1px solid var(--line);border-top:0;border-radius:22px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.bigstat::before{content:"";position:absolute;left:0;top:0;width:100%;height:6px;background:var(--cyan)}
.bigstat::after{content:attr(data-index);position:absolute;right:22px;top:19px;font:800 30px var(--display);color:var(--field)}
.bigstat b{display:block;font:800 clamp(66px,6.2cqw,92px)/1 var(--display);color:var(--navy);letter-spacing:-.035em}
.bigstat span{display:block;font-size:16px;line-height:1.55;color:var(--muted);max-width:40ch;margin-top:8px}
.bars{display:grid;gap:20px;padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-xs)}
.bar{display:grid;grid-template-columns:170px 1fr 80px;align-items:center;gap:15px;font-size:14px}
.bar i{display:block;height:34px;border-radius:999px;background:var(--cyan)}
.bar b{font:800 25px var(--display);color:var(--navy)}
.page-impacto>section.sec:last-of-type{background:var(--cloud)} /* fix: sem o tag "section", :last-of-type casava tambem com a div.pagehead (unica div .sec) e clareava o hero */

/* ---------- página de história / artigo ---------- */
.article{max-width:900px}
.article>.lead{font-size:23px;color:var(--navy);font-weight:500}
.article>p:not(.lead),.article .article-body p{font-size:17px;line-height:1.75}
.article .ph{border-radius:24px;box-shadow:var(--shadow-md)}
.article blockquote{position:relative;padding:28px 30px 28px 38px;border:0;border-radius:20px;background:var(--navy);color:#fff;box-shadow:var(--shadow-sm);margin:0 0 28px}
.article blockquote::before{content:"“";position:absolute;left:14px;top:-5px;font:800 70px var(--display);color:var(--cyan);opacity:.9}
.article-body h2{font-size:38px;margin:32px 0 12px}
.article-body h3{margin:26px 0 10px}
.article-body img{max-width:100%;height:auto;border-radius:16px}
.article-body ul,.article-body ol{padding-left:22px}
.article-body figure{margin:32px 0}

/* ---------- mapa e lugares ---------- */
/* O fundo é img/world.svg em projeção equirretangular recortada: a longitude
   -170..180 ocupa 0..100% da largura e a latitude +78..-56 ocupa 0..100% da
   altura. Como a projeção é linear nos dois eixos, background-size:100% 100%
   (imagem esticada) + aspect-ratio 1000/383 (proporção do SVG) mantêm os pinos
   — posicionados em % a partir de lat/lon, ver lpp_blocks.models.Pin — em cima
   dos continentes. Fundo navy sólido (a grade de pontinhos do protótipo saiu).
   container-type/name: os rótulos dos pinos escalam com a LARGURA DO MAPA
   (unidade cqw), não com a da janela — ver .pin b. */
.map{container-type:inline-size;container-name:map;position:relative;width:100%;aspect-ratio:1000/383;height:auto;min-height:200px;border-radius:28px;overflow:hidden;background-color:var(--navy);background-image:url(../img/world.svg);background-size:100% 100%;background-position:center;background-repeat:no-repeat;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.12)}
.pin{position:absolute;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:13px;height:13px;color:#fff}
.pin.has-label{z-index:3}  /* a pílula do rótulo passa por cima dos pinos vizinhos */
.pin:hover,.pin:focus-within{z-index:4}
/* Pinos: Academias em ciano; organizações da Aliança (.blue) em branco. */
.pin i{position:relative;width:13px;height:13px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(13,166,223,.22);flex-shrink:0}
.pin i::after{content:"";position:absolute;inset:-7px;border:1px solid currentColor;border-radius:50%;animation:pin-pulse 2s ease-out infinite;color:var(--cyan)}
/* Rótulo em pílula compacta ao lado do ponto. No mapa-múndi as academias
   brasileiras caem quase umas sobre as outras (Maré e São Paulo ficam a ~1%
   de distância), então os rótulos giram entre quatro posições — abaixo (padrão),
   acima, à direita e à esquerda. O lado vem do HTML (classe .lb-*, escolhida em
   lpp_blocks.models.Map.pin_rows contando só os pinos COM rótulo), e não de
   :nth-child: no modo de edição o django CMS insere <template> entre os pinos e
   a contagem por irmãos saía diferente da página pública.
   A pílula inteira (fonte, espaçamento e afastamento em em) escala com a largura
   do mapa: 1.1207cqw = 13px quando o mapa tem 1160px (desktop 1440px). Assim a
   geometria dos rótulos é a mesma em qualquer largura e eles não se sobrepõem. */
.pin b{position:absolute;left:50%;top:calc(100% + .54em);transform:translateX(-50%);padding:.385em .692em;border-radius:999px;background:rgba(32,27,84,.9);font-weight:600;font-size:clamp(9px,1.1207cqw,13px);line-height:1.25;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.22);backdrop-filter:blur(5px)}
.pin.lb-above b{top:auto;bottom:calc(100% + .54em)}
.pin.lb-right b{left:calc(100% + .692em);top:50%;transform:translateY(-50%)}
.pin.lb-left b{left:auto;right:calc(100% + .692em);top:50%;transform:translateY(-50%)}
.pin.blue i{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.22)}
.pin.blue i::after{color:#fff}
@keyframes pin-pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.55);opacity:0}}
/* A legenda é irmã do .map, não filha: dentro do role="img" o texto era
   ignorado pelos leitores de tela, e no mobile ela vira uma linha abaixo do
   mapa (ver o bloco de 880px). No desktop continua flutuando sobre o canto do
   mapa, com z-index acima dos pinos (2, 3 com rótulo, 4 no hover) — sem isso um
   pino cai em cima da legenda e come uma letra do texto. */
.map-wrap{position:relative}
.legend{position:absolute;z-index:5;right:20px;bottom:18px;padding:8px 11px;border-radius:10px;background:rgba(32,27,84,.88);color:var(--on-navy);font-size:13px;backdrop-filter:blur(4px)}
.places{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.place{position:relative;min-height:175px;padding:58px 20px 22px;border:1px solid var(--line);border-top:0;border-radius:18px;background:#fff;box-shadow:var(--shadow-xs)}
.place::before{content:attr(data-index);position:absolute;left:18px;top:15px;font:800 27px/1 var(--display);color:var(--link)}
.place::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--cyan);border-radius:18px 18px 0 0}
.place b{display:block;font:700 26px/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.place span{font-size:14px;color:var(--muted);display:block;line-height:1.55}
.location-cta{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;margin-top:34px;padding:36px;border-radius:26px;background:var(--navy);color:#fff;box-shadow:var(--shadow-md)}
.location-cta h2{font-size:42px;max-width:20ch}
.location-cta p{margin:13px 0 0;color:var(--on-navy)}
.location-cta .eyebrow{margin-bottom:12px}

/* ---------- participar e contato ---------- */
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:24px}
.benefit-grid span{position:relative;padding:13px 14px 13px 40px;border:1px solid var(--line);border-radius:13px;background:var(--cloud);font-weight:700;color:var(--navy)}
.benefit-grid span::before{content:"✓";position:absolute;left:14px;color:var(--link)}
.contact-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:23px 0}
.contact-options>div{padding:16px 13px;border:1px solid var(--line);border-radius:15px;background:var(--cloud)}
.contact-options span{display:grid;place-items:center;width:34px;height:34px;margin-bottom:10px;border-radius:10px;background:var(--navy);color:var(--cyan);font-weight:800}
.contact-options b,.contact-options small{display:block}.contact-options b{color:var(--navy)}.contact-options small{color:var(--muted);line-height:1.35;margin-top:3px}
.page-contato .g2 .ph.img{border-radius:22px;box-shadow:var(--shadow-md)}

/* ---------- formulários ---------- */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-weight:600;font-size:14px;color:var(--navy);letter-spacing:.01em}
.inp{font:inherit;width:100%;min-height:52px;padding:13px 15px;border:1.5px solid var(--field);border-radius:12px;background:#fff;color:var(--text);box-shadow:inset 0 1px 2px rgba(32,27,84,.03);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
textarea.inp{resize:vertical;min-height:145px}
.inp:hover{border-color:var(--navy)}
/* Foco: o mesmo anel de 3px do resto do site (navy no claro, amarelo sobre navy); a
   borda também escurece, para não depender só do outline. */
.inp:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy);box-shadow:none}
:is(.hero,.pagehead,.sec.navy,.location-cta,.summary,.ft) .inp:focus-visible{outline-color:var(--yellow)}
.inp[aria-invalid=true],.inp.is-invalid{border-color:var(--error);box-shadow:0 0 0 4px rgba(166,24,32,.1)}
.field .err{font-size:13px;color:var(--error);font-weight:600}
.hint{font-size:13px;color:var(--muted);line-height:1.45}
.form-status{min-height:0;margin-top:12px;padding:0;font-size:14px;font-weight:600;border-radius:12px;transition:background-color .2s ease,min-height .2s ease}
.form-status:not(:empty){min-height:44px;padding:12px 14px}
/* Sucesso: texto navy, verde progresso só na borda/ícone (o verde dá 4,15:1 sobre branco). */
.form-status.success{background:var(--cloud);color:var(--navy);border:1px solid var(--green)}
.form-status.success::before{content:"✓ ";color:var(--green);font-weight:800}
.form-status.error{background:#fff;color:var(--error);border:1px solid var(--error)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- doação ---------- */
.page-doar>.sec.mist{padding-top:62px;background:var(--cloud)}
.doar-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:34px;align-items:start}
#dform{padding:38px;scroll-margin-top:104px}
.steps{display:flex;gap:10px;margin-bottom:32px;font-size:13px;font-weight:600;color:var(--muted)}
.steps span{flex:1;padding:11px 4px 0;border-top:5px solid var(--line)}
.steps span.done{border-top-color:var(--cyan);color:var(--navy)}
.steps span.cur{border-top-color:var(--navy);color:var(--navy);font-weight:800}
.dstep{display:none}.dstep.on{display:block}
.toggle{width:100%;display:grid;grid-template-columns:1fr 1fr;padding:5px;border:1px solid var(--field);border-radius:15px;background:var(--cloud);margin-bottom:22px}
.toggle button{background:transparent;border:0;border-radius:10px;padding:13px;font:700 15px var(--body);color:var(--navy);cursor:pointer}
.toggle button.on{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(32,27,84,.18)}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:12px}
.chip{min-height:68px;border:1.5px solid var(--field);background:#fff;border-radius:15px;padding:16px 8px;font:800 30px var(--display);color:var(--navy);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.chip.on{border-color:var(--navy);background:var(--cloud);box-shadow:inset 0 0 0 1px var(--navy)}
.impact-line{border:0;border-left:5px solid var(--cyan);border-radius:12px;background:var(--cloud);padding:17px 18px;margin:16px 0 24px;font-size:15px}
.pay{display:grid;gap:9px;margin-bottom:22px}
.pay label{display:flex;align-items:center;gap:12px;min-height:58px;border:1.5px solid var(--field);border-radius:14px;padding:14px 16px;background:#fff;cursor:pointer;font-weight:600}
.pay label:hover{border-color:var(--navy)}
.pay label.on{border-color:var(--navy);background:var(--cloud);box-shadow:inset 0 0 0 1px var(--navy)}
.pay label input{width:20px;height:20px;accent-color:var(--navy);margin:0}
.pay .tag{margin-left:auto;font-size:11px;font-weight:700;background:var(--navy);color:#fff;padding:5px 9px;border-radius:999px}
.pay-panel{margin:25px 0}
.payment-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:13px 0 0;color:var(--muted);font-size:13px}
.payment-note span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cloud);color:var(--green);font-weight:800}
.qr{width:220px;height:220px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px;margin:0 auto 18px;display:block;fill:var(--navy);box-shadow:var(--shadow-sm)}
.pixcode{display:flex;gap:8px;margin-bottom:22px;align-items:stretch}
.pixcode .inp{font-family:monospace;font-size:13px}
.pixcode .btn{flex:none}
.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card-mockup{position:relative;max-width:470px;aspect-ratio:1.65;margin:0 auto 24px;padding:26px;border-radius:22px;background:var(--navy);color:#fff;box-shadow:var(--shadow-md);overflow:hidden}
.card-mockup .card-brand{display:block;color:var(--cyan);font:800 15px var(--display);letter-spacing:.08em}
.card-mockup>b{display:block;margin-top:58px;font:700 24px var(--body);letter-spacing:.08em}
.card-mockup>div{display:flex;justify-content:space-between;gap:20px;margin-top:24px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.boleto-box{text-align:center;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--cloud)}
.boleto-icon{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 15px;border-radius:22px;background:var(--navy);color:var(--cyan);font-size:39px}
.boleto-box h4{margin:0 0 7px;font:800 30px/1 var(--display);text-transform:uppercase;color:var(--navy)}
.boleto-box p{margin:0 auto 20px;color:var(--muted)}
.summary{position:sticky;top:118px;padding:30px;border-radius:24px;color:#fff;background:var(--navy);box-shadow:var(--shadow-lg);overflow:hidden}
.cms-toolbar-expanded .summary{top:164px}
.summary h3,.summary dl,.summary .tot,.summary .trust,.summary .trust-badges{position:relative;z-index:1}
.summary h3{color:var(--cyan);font-size:31px;margin-bottom:14px}
.summary dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:11px 16px;font-size:15px}
.summary dt{color:var(--on-navy)}.summary dd{margin:0;font-weight:700;text-align:right;max-width:18ch;overflow-wrap:anywhere}
.summary .tot{border-top:1px solid rgba(255,255,255,.2);margin-top:14px;padding-top:14px;font:800 43px/1 var(--display);color:#fff}
.trust{margin-top:16px;font-size:13px;color:var(--on-navy);line-height:1.5}
.trust-badges{display:grid;gap:8px;margin-top:20px}
.trust-badges span{position:relative;padding-left:25px;color:var(--on-navy);font-size:12px;font-weight:600}
.trust-badges span::before{content:"✓";position:absolute;left:0;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--glow);color:var(--cyan)}
.okbox{text-align:center;padding:42px 25px;background:url(../img/confetti.webp) center/cover no-repeat}
.okbox .mark{width:84px;height:84px;border-radius:50%;background:var(--navy);display:grid;place-items:center;margin:0 auto 18px;font:800 34px var(--display);color:#fff;box-shadow:0 12px 28px rgba(32,27,84,.28)}
.okbox h2{font-size:44px;margin-bottom:10px}

/* ---------- rodapé ---------- */
/* Navy com overlay preto (mais fundo que as seções navy), sem gradiente colorido. */
.ft{position:relative;background:linear-gradient(var(--ink),var(--ink)) var(--navy);color:var(--on-navy);padding:0 0 24px;font-size:14px}
.ft .brand-line{margin-bottom:58px}
.ft-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.25fr;gap:45px;margin-bottom:48px}
.ft h4{font:700 22px/1 var(--display);text-transform:uppercase;color:#fff;margin:0 0 12px}
.ft a{color:var(--on-navy);text-decoration:none;display:block;padding:6px 0}
.ft a:hover{color:var(--cyan)}
.ft .logo{margin-bottom:36px;display:inline-flex} /* área de proteção 1x (= altura do logo) até o texto */
.ft .logo img{height:36px}
.ft address{font-style:normal;margin:0 0 14px;line-height:1.6}
.ft address a,.ft .legal a{display:inline;padding:0}
.ft address a{color:#fff}
.ft .legal{border-top:1px solid rgba(255,255,255,.15);padding-top:26px;font-size:13px;line-height:1.55;max-width:none;color:var(--on-navy-2)}
.ft .legal a{color:#fff;text-decoration:underline}
.ft-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:var(--on-navy-2);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.social{display:flex;gap:8px;margin-top:14px}
.social a,.social span{width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:inherit;text-decoration:none;padding:0;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.social a:hover{background:var(--cyan);border-color:var(--cyan);color:var(--navy);transform:translateY(-2px)}
.social.dark a,.social.dark span{border-color:var(--navy);color:var(--navy)}
.social.dark a:hover{background:var(--navy);color:#fff}

/* ---------- header compacto (Sora é mais larga que Barlow) ----------
   Abaixo de 1280px o menu completo + dois CTAs não cabem: o CTA secundário
   "Quero participar" sai do header (segue no rodapé e em /participar/) e o
   menu encolhe; abaixo de 1000px vira burger. */
@container site (max-width:1280px){
  .hdr-in{gap:16px}.nav{gap:2px}.nav a{padding:9px 7px;font-size:13px}.logo img{height:28px}.hdr-cta{gap:6px}.hdr-cta .btn{padding-left:14px;padding-right:14px;font-size:13px}
  .hdr-cta .btn-ghost{display:none}
}

/* ---------- tablet ---------- */
@container site (max-width:1100px){
  .wrap{padding:0 30px}
  .hero .wrap{grid-template-columns:minmax(0,1fr) 300px;gap:34px}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .vals{grid-template-columns:repeat(3,1fr)}
  .places{grid-template-columns:repeat(3,1fr)}
  .ft-grid{grid-template-columns:1.2fr 1fr 1fr;gap:30px}.ft-grid>div:last-child{grid-column:1/-1}
}

/* ---------- header compacto (menu burger) ---------- */
@container site (max-width:1000px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;z-index:4;gap:4px;padding:18px 20px 25px;background:var(--navy);box-shadow:0 22px 42px rgba(0,0,0,.28)}
  .nav.open a{padding:13px 14px;border:0;border-radius:12px;font-size:16px}.nav.open a:hover{background:var(--glow)}
  .nav-scrim{display:block;position:absolute;z-index:2;left:0;right:0;top:100%;height:100vh;border:0;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;pointer-events:none;backdrop-filter:blur(4px);transition:opacity .2s ease,visibility .2s ease}
  .nav-scrim.on{opacity:1;visibility:visible;pointer-events:auto}
  .burger{display:grid}
  .hdr-cta .btn{min-height:42px;padding:9px 14px;font-size:14px}
}

/* ---------- mobile ---------- */
@container site (max-width:880px){
  .wrap{padding:0 20px}
  /* 76px de cabeçalho com logo de 26px ≈ 3× o logo: proteção ~1x acima e abaixo. */
  .hdr-in{--hdr-h:76px;height:var(--hdr-h);gap:12px}
  .hdr .logo img{height:26px}
  .cms-toolbar-expanded .hdr{top:0}
  .hero{min-height:650px}
  .hero .wrap{grid-template-columns:1fr;gap:22px;padding-top:92px;padding-bottom:40px}
  .hero h1{font-size:clamp(54px,14cqw,68px);max-width:8.8ch}
  .hero .lead{font-size:17px;margin:18px 0 22px}
  .hero-proof{gap:10px 18px;margin-top:18px}.hero-proof span{font-size:12px}
  .corner{padding:18px 19px;border-radius:17px}.corner b{font-size:24px}
  .strip{margin-top:-18px;padding-bottom:50px}.strip .wrap{grid-template-columns:1fr 1fr;gap:10px}.stat{min-height:146px;padding:21px 16px 17px;border-radius:16px}.stat b{font-size:46px}.stat span{font-size:12px}
  .page-home>.sec:first-of-type{padding-top:26px}
  .lead{font-size:17px}
  .sec{padding:68px 0}.pagehead{padding:62px 0 54px}.pagehead h1{font-size:52px}.pagehead .lead{font-size:17px;margin-top:17px}
  .eyebrow{font-size:11px;margin-bottom:14px}.eyebrow span{width:25px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:30px}.sec-head h2{padding-top:14px}.sec-head p{font-size:15px}
  .g2,.g3,.feat,.story-list,.tiers,.news,.doar-grid,.ft-grid,.bigstats,.places,.vals,.location-cta{grid-template-columns:1fr}
  .story-list.two{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr 1fr;gap:10px}
  .pillar{min-height:205px;padding:70px 18px 20px;border-radius:16px}.pillar b{font-size:24px}
  .card{border-radius:18px}.card .ph{min-height:220px}.card-b h3{font-size:31px}
  .page-home .feat,.page-historias .feat{padding:18px;border-radius:22px}.feat .ph,.page-home .feat .ph,.page-historias .feat .ph{min-height:340px;border-radius:16px}.quote{font-size:29px}.story-list{gap:10px}.story{padding:12px}
  .tier,.tier.hot{min-height:auto;padding:25px 22px;transform:none}.tier.hot:hover{transform:translateY(-3px)}.tier b{font-size:51px}
  .news article .ph{min-height:205px}.newslist article{grid-template-columns:1fr;gap:14px;padding:14px}.nthumb{height:190px;min-height:190px}.newslist h3{font-size:25px}.newslist article:hover{transform:translateY(-3px)}
  .news-tools{padding:16px}.news-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.news-filter{white-space:nowrap}
  .page-home>.sec.mist:last-of-type .g2>div{padding:24px}
  .nl{flex-direction:column}
  .tl div{padding:18px 16px 18px 82px}.tl b{left:14px;width:53px}
  .val{min-height:190px}
  .tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:16px;overflow:visible}.tab{min-width:0;font-size:15px;padding:11px 5px;white-space:nowrap;text-align:center}.panel .g2{gap:32px}.panel .ph{min-height:320px;border-radius:20px}
  .bigstat{min-height:215px;padding:27px}.bigstat b{font-size:63px}.bars{padding:18px}.bar{grid-template-columns:1fr;gap:7px}.bar i{height:28px}.bar b{font-size:23px}
  .hero-flat{min-height:590px}.hero-flat .wrap{padding-top:100px}.article-meta{margin-top:18px}.article>.lead{font-size:20px}
  /* min-height:0: abaixo de ~520px de largura o min-height:200px vencia o
     aspect-ratio e esticava os continentes ~50% na vertical. */
  /* A legenda sai de cima do mapa: com 134px de altura em 390px de largura a
     faixa cobria o hemisfério sul e escondia três pinos. */
  .map{border-radius:20px;min-height:0}.pin b{display:none}
  .legend{position:static;display:block;margin-top:10px;padding:0;background:none;backdrop-filter:none;color:var(--muted);font-size:13px;line-height:1.4;text-align:center}.places{gap:10px}.place{min-height:150px;padding-top:52px}
  .location-cta{padding:25px;border-radius:20px}.location-cta h2{font-size:35px}.location-cta .hero-ctas{flex-direction:column;align-items:stretch}.location-cta .btn{width:100%}
  .benefit-grid{grid-template-columns:1fr 1fr}.contact-options{grid-template-columns:1fr}
  .dbox,#dform{padding:23px;border-radius:18px}
  .doar-grid{gap:22px}.summary{position:static;padding:23px;border-radius:19px}.summary .tot{font-size:37px}.trust-badges{grid-template-columns:1fr 1fr}.chips{grid-template-columns:1fr 1fr}.payment-grid{grid-template-columns:1fr}.card-mockup{padding:20px}.card-mockup>b{font-size:18px;margin-top:42px}.pixcode{flex-direction:column}.pixcode .btn{width:100%}
  .h2-sm{font-size:34px}
  h3{font-size:24px}
  .pagehead.athlete::after{display:none}
  .pagehead.athlete .lead{max-width:none}
  .img.img-athlete{background-position:right -40px bottom}
  .hero .img{background-position:70% center}
  .ft .brand-line{margin-bottom:42px}.ft-grid{gap:28px}.ft-grid>div:last-child{grid-column:auto}.ft-bottom{flex-direction:column;gap:7px}
}

@container site (max-width:520px){
  /* Empilhados e com largura total (como .location-cta): cada rótulo cabe em uma linha.
     white-space:normal fica como rede de segurança para rótulos longos digitados no CMS. */
  .hero-ctas{width:100%;flex-direction:column;align-items:stretch}.hero-ctas .btn{width:100%;white-space:normal;text-align:center}
  .hero-ctas .btn-lg{padding-left:16px;padding-right:16px;font-size:15px}
  .pillars{grid-template-columns:1fr}.pillar{min-height:170px}
  .strip .wrap{grid-template-columns:1fr 1fr}.stat b{font-size:42px}
  .vals{grid-template-columns:1fr}.val{min-height:165px}
  .contact-options,.benefit-grid{grid-template-columns:1fr}
  .map .pin i{width:11px;height:11px}.legend{font-size:12px}
  .trust-badges{grid-template-columns:1fr}
  .pagehead.athlete::after{opacity:.28;right:-55px;display:block}
}

@media (prefers-reduced-motion:reduce){
  .panel.on,.pin i::after{animation:none!important}
  .btn,.card,.story,.news article,.newslist article{transition:none!important}
}

/* --- vídeo (acréscimo pós-protótipo) --- */
/* Vídeo de fundo do hero: preenche o .ph e fica atrás dos overlays
   (.hero::before/::after têm z-index:1; o .ph não tem z-index). */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
/* Plugin "Vídeo" (YouTube sem cookies ou MP4) nas seções. */
.video-embed{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--navy)}
.video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- ícones das redes sociais (acréscimo pós-protótipo: SVG no lugar das siglas) --- */
.social svg{width:19px;height:19px;fill:currentColor;display:block}
.social a,.social span{padding:0}

/* --- hero com vídeo acompanha o tamanho do navegador (acréscimo pós-protótipo) ---
   Quando há vídeo de fundo, a altura do hero passa a seguir a janela (92svh,
   com piso/teto), em vez dos 720px fixos do protótipo — o vídeo cresce e
   encolhe junto com o browser em qualquer largura/altura. */
.hero:has(.hero-video){min-height:clamp(560px,92svh,1000px)}
@container site (max-width:880px){
  .hero:has(.hero-video){min-height:clamp(480px,88svh,760px)}
}