/* ============================================================
   MARIA AMÉLIA — SITE OFICIAL · v3.0
   Design system: verde-floresta + lima da marca + fio dourado
   Tipografia: Fraunces (display) · Instrument Sans (texto)
   ============================================================ */

:root{
  --floresta:#0D3907;
  --floresta-2:#0A2C05;
  --verde:#1E6B10;
  --verde-claro:#2F8A1C;
  --lima:#9FD335;
  --lima-suave:#E9F5CF;
  --ouro:#E2B33C;
  --ouro-claro:#F6E3AE;
  --areia:#F8F7EF;
  --branco:#FFFFFF;
  --tinta:#182410;
  --tinta-2:#4A5C3D;
  --linha:rgba(24,36,16,.12);
  --sombra-s:0 2px 14px rgba(13,57,7,.08);
  --sombra-m:0 14px 40px rgba(13,57,7,.14);
  --sombra-g:0 28px 70px rgba(13,57,7,.22);
  --raio:18px;
  --raio-s:10px;
  --tr:.35s cubic-bezier(.4,0,.2,1);
  --display:"Playfair Display",Georgia,serif;
  --texto:"Instrument Sans",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--texto);
  color:var(--tinta);
  background:var(--areia);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--lima);color:var(--floresta)}

.wrap{width:min(1180px,92%);margin-inline:auto}

/* ── Tipos base ── */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.01em}
.destaque{font-style:italic;font-weight:500;color:var(--verde)}
.destaque-ouro{font-style:italic;font-weight:500;color:var(--ouro)}
strong{color:var(--verde);font-weight:650}

/* Eyebrow — etiqueta de seção com fio dourado */
.etiqueta{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--verde);
}
.etiqueta::before{content:'';width:34px;height:2px;background:var(--ouro);border-radius:2px}
.etiqueta.clara{color:var(--lima)}

.sec-cab{max-width:680px;margin-bottom:3.2rem}
.sec-cab h2{font-size:clamp(2rem,4.4vw,3.1rem);margin:.8rem 0 1rem}
.sec-cab p{color:var(--tinta-2);font-size:1.06rem}
.sec-cab.centro{margin-inline:auto;text-align:center}
.sec-cab.centro .etiqueta{justify-content:center}
.sec-cab.centro .etiqueta::after{content:'';width:34px;height:2px;background:var(--ouro);border-radius:2px}

section{padding:6.5rem 0}

/* ── Botões ── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;
  font-weight:600;font-size:.98rem;transition:var(--tr);
}
.btn i{font-size:.95em}
.btn-cheio{background:var(--verde);color:#fff;box-shadow:var(--sombra-s)}
.btn-cheio:hover{background:var(--floresta);transform:translateY(-2px);box-shadow:var(--sombra-m)}
.btn-ouro{background:var(--ouro);color:var(--floresta)}
.btn-ouro:hover{background:var(--ouro-claro);transform:translateY(-2px)}
.btn-linha{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.btn-linha:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-linha-verde{border:1.5px solid var(--verde);color:var(--verde)}
.btn-linha-verde:hover{background:var(--verde);color:#fff}
.btn-zap{background:#25d366;color:#fff}
.btn-zap:hover{background:#1eb355;transform:translateY(-2px)}

/* ── Loader ── */
#ldr{
  position:fixed;inset:0;z-index:9999;background:var(--floresta);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  transition:opacity .6s ease,visibility .6s ease;
}
#ldr img{width:min(220px,55vw)}
#ldr .fio{width:120px;height:2px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
#ldr .fio::after{content:'';display:block;width:40%;height:100%;background:var(--ouro);animation:fio 1.1s ease-in-out infinite}
@keyframes fio{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
#ldr.out{opacity:0;visibility:hidden}

/* ── Header ── */
#hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:1.1rem 0;transition:var(--tr);
}
#hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
#hdr .logo img{height:44px;transition:var(--tr)}
#hdr .logo .lg-preto{display:none}
.nav-d{display:flex;align-items:center;gap:1.9rem}
.nav-d a{font-size:.92rem;font-weight:550;color:rgba(255,255,255,.88);position:relative;padding:.3rem 0}
.nav-d a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--ouro);transition:var(--tr)}
.nav-d a:hover::after,.nav-d a.ativo::after{width:100%}
.nav-d .btn{padding:.62rem 1.3rem;font-size:.88rem}
#hdr.sc{background:rgba(248,247,239,.86);backdrop-filter:blur(14px);box-shadow:var(--sombra-s);padding:.7rem 0}
#hdr.sc .nav-d a{color:var(--tinta)}
#hdr.sc .logo .lg-branco{display:none}
#hdr.sc .logo .lg-preto{display:block}

/* Hamburger */
#ham{display:none;flex-direction:column;gap:5px;padding:.4rem;z-index:960}
#ham span{width:26px;height:2px;background:#fff;border-radius:2px;transition:var(--tr)}
#hdr.sc #ham span{background:var(--tinta)}
#ham.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#ham.on span:nth-child(2){opacity:0}
#ham.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu mobile */
#mob-ov{position:fixed;inset:0;background:rgba(10,44,5,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:var(--tr);z-index:940}
#mob-ov.on{opacity:1;visibility:visible}
#mob-m{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:950;
  background:var(--floresta);padding:5.5rem 2.2rem 2.2rem;
  transform:translateX(102%);transition:transform .45s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;gap:.4rem;
}
#mob-m.on{transform:none}
#mob-m a.mob-l{
  color:rgba(255,255,255,.9);font-size:1.08rem;font-weight:550;
  padding:.85rem .4rem;border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;align-items:center;
}
#mob-m a.mob-l:hover{color:var(--lima);padding-left:.8rem;transition:var(--tr)}
#mob-m .btn{margin-top:1.6rem;justify-content:center}
#mob-x{position:absolute;top:1.4rem;right:1.4rem;color:#fff;font-size:1.5rem;padding:.4rem}

/* ── HERO ── */
#hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:8.5rem 0 5rem;background:var(--floresta);overflow:hidden;
}
#hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;
}
#hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,rgba(10,44,5,.94) 0%,rgba(13,57,7,.78) 45%,rgba(13,57,7,.35) 100%);
}
#hero::after{ /* respiro dourado inferior */
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--ouro),var(--lima));
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);border-radius:999px;
  padding:.5rem 1.15rem;color:var(--ouro-claro);
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.hero-tag i{color:var(--lima)}
#hero h1{
  color:#fff;font-size:clamp(2.6rem,6vw,4.6rem);font-weight:550;
  margin:1.4rem 0 1.6rem;
}
#hero h1 em{font-style:italic;color:var(--ouro)}
.hero-cred{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem}
.hero-cred span{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.5rem 1rem;
  color:rgba(255,255,255,.92);font-size:.86rem;font-weight:500;
}
.hero-cred i{color:var(--lima);font-size:.8rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}

/* Retrato */
.hero-foto{position:relative;justify-self:center}
.hero-foto .moldura{
  width:min(400px,80vw);border-radius:26px;overflow:hidden;
  box-shadow:var(--sombra-g);
  border:1px solid rgba(255,255,255,.25);
  transform:rotate(1.5deg);
}
.hero-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.hero-foto .selo{
  position:absolute;left:-1.4rem;bottom:2rem;
  background:var(--areia);border-radius:14px;box-shadow:var(--sombra-m);
  padding:.9rem 1.3rem;display:flex;align-items:center;gap:.8rem;
  transform:rotate(-2deg);
}
.hero-foto .selo i{color:var(--verde);font-size:1.3rem}
.hero-foto .selo b{display:block;font-size:.88rem;color:var(--tinta)}
.hero-foto .selo small{font-size:.76rem;color:var(--tinta-2)}

.hero-scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.6);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.hero-scroll::after{content:'';width:1px;height:34px;background:linear-gradient(var(--ouro),transparent);animation:desce 1.8s ease-in-out infinite}
@keyframes desce{0%,100%{opacity:.4;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ── Faixa de valores (marquee) ── */
#valores-faixa{
  background:var(--floresta-2);padding:1.05rem 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.marquee{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee span{
  font-family:var(--display);font-style:italic;font-size:1.05rem;color:rgba(255,255,255,.85);
  padding:0 1.6rem;display:flex;align-items:center;gap:3.2rem;white-space:nowrap;
}
.marquee span::after{content:'✦';color:var(--ouro);font-style:normal;font-size:.8rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── QUEM É ── */
#quem{background:var(--areia)}
.quem-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:4.5rem;align-items:center}
.quem-foto{position:relative}
.quem-foto img{border-radius:var(--raio);box-shadow:var(--sombra-m);aspect-ratio:4/5;object-fit:cover;width:100%}
.quem-foto::before{
  content:'';position:absolute;inset:1.4rem -1.4rem -1.4rem 1.4rem;
  border:2px solid var(--ouro);border-radius:var(--raio);z-index:-1;
}
.quem-txt .etiqueta{margin-bottom:.9rem}
.quem-txt h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:1.4rem}
.quem-txt p{color:var(--tinta-2);margin-bottom:1.1rem;font-size:1.03rem}
.quem-valores{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 2rem}
.quem-valores span{
  background:var(--lima-suave);color:var(--verde);border-radius:999px;
  padding:.45rem 1.05rem;font-size:.86rem;font-weight:600;
}

/* ── TRAJETÓRIA — fio dourado ── */
#trajetoria{background:var(--floresta);position:relative;overflow:hidden}
#trajetoria .sec-cab h2,#trajetoria .sec-cab p{color:#fff}
#trajetoria .sec-cab p{opacity:.75}
.tl{position:relative;max-width:900px;margin-inline:auto}
.tl::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(var(--ouro) 0 10px,transparent 10px 20px); /* fio pontilhado */
  opacity:.75;
}
.tl-item{
  position:relative;width:calc(50% - 3rem);margin-bottom:3.4rem;
}
.tl-item:nth-child(odd){margin-left:auto}
.tl-item::before{ /* nó do fio */
  content:'';position:absolute;top:1.6rem;width:14px;height:14px;border-radius:50%;
  background:var(--ouro);border:3px solid var(--floresta);box-shadow:0 0 0 2px var(--ouro);
}
.tl-item:nth-child(odd)::before{left:-3rem;transform:translateX(-50%)}
.tl-item:nth-child(even)::before{right:-3rem;transform:translateX(50%)}
.tl-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--raio);overflow:hidden;backdrop-filter:blur(6px);
  transition:var(--tr);
}
.tl-card:hover{transform:translateY(-4px);border-color:rgba(226,179,60,.5)}
.tl-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tl-corpo{padding:1.5rem 1.6rem 1.7rem}
.tl-ano{
  display:inline-block;background:var(--ouro);color:var(--floresta);
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:.3rem .85rem;margin-bottom:.8rem;
}
.tl-corpo h3{color:#fff;font-size:1.35rem;margin-bottom:.6rem}
.tl-corpo p{color:rgba(255,255,255,.72);font-size:.94rem}
.tl-corpo strong{color:var(--lima)}

/* Placeholder de foto — espaço marcado para verificação */
.foto-pend{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 12px,transparent 12px 24px),
    linear-gradient(140deg,rgba(159,211,53,.10),rgba(226,179,60,.10));
  border-bottom:1px dashed rgba(226,179,60,.45);
  color:rgba(255,255,255,.55);text-align:center;padding:1rem;
}
.foto-pend i{font-size:1.7rem;color:var(--ouro);opacity:.8}
.foto-pend b{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-claro)}
.foto-pend small{font-size:.78rem;max-width:280px}
.foto-pend.clara{ /* versão para fundos claros */
  background:
    repeating-linear-gradient(45deg,rgba(13,57,7,.05) 0 12px,transparent 12px 24px),
    linear-gradient(140deg,rgba(159,211,53,.14),rgba(226,179,60,.14));
  border:1.5px dashed rgba(30,107,16,.4);border-radius:var(--raio-s);
  color:var(--tinta-2);
}
.foto-pend.clara b{color:var(--verde)}
.foto-pend.clara i{color:var(--verde)}

/* ── AÇÕES SOCIAIS ── */
#acoes{background:var(--areia)}
.acoes-banner{
  position:relative;border-radius:var(--raio);overflow:hidden;margin-bottom:3.4rem;
  box-shadow:var(--sombra-m);
}
.acoes-banner img{width:100%;aspect-ratio:21/8;object-fit:cover}
.acoes-banner figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.2rem 2rem 1.4rem;
  background:linear-gradient(transparent,rgba(10,44,5,.88));
  color:#fff;font-size:.92rem;
}
.acoes-banner figcaption b{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.15rem;display:block}
.acoes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.acao-card{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.65rem;
  transition:var(--tr);position:relative;overflow:hidden;
}
.acao-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ouro),var(--lima));
  transform:scaleX(0);transform-origin:left;transition:var(--tr);
}
.acao-card:hover{transform:translateY(-5px);box-shadow:var(--sombra-m);border-color:transparent}
.acao-card:hover::before{transform:scaleX(1)}
.acao-meta{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ouro);color:#B8860B}
.acao-card .acao-meta{color:var(--verde)}
.acao-card h3{font-size:1.22rem}
.acao-card p{color:var(--tinta-2);font-size:.92rem;flex:1}
.acao-card .mais{color:var(--verde);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.45rem}
.acao-card:hover .mais{gap:.75rem;transition:var(--tr)}

/* ── BANDEIRAS ── */
#bandeiras{background:linear-gradient(var(--lima-suave) 0,var(--areia) 340px)}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.band-card{
  background:#fff;border-radius:var(--raio);padding:1.9rem 1.7rem;
  border:1px solid var(--linha);cursor:pointer;transition:var(--tr);
  display:flex;flex-direction:column;gap:.7rem;text-align:left;
}
.band-card:hover{transform:translateY(-5px);box-shadow:var(--sombra-m);border-color:rgba(226,179,60,.5)}
.band-ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--verde),var(--verde-claro));color:#fff;font-size:1.25rem;
}
.band-card h3{font-size:1.18rem}
.band-card p{color:var(--tinta-2);font-size:.92rem;flex:1}
.band-card .mais{color:var(--verde);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.45rem}

/* Modal bandeiras */
#modal{
  position:fixed;inset:0;z-index:970;display:flex;align-items:center;justify-content:center;
  background:rgba(10,44,5,.6);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:var(--tr);padding:1.2rem;
}
#modal.on{opacity:1;visibility:visible}
.m-box{
  background:var(--areia);border-radius:22px;max-width:640px;width:100%;
  max-height:86vh;overflow-y:auto;padding:2.6rem 2.4rem;position:relative;
  transform:translateY(24px) scale(.97);transition:var(--tr);
  border-top:4px solid var(--ouro);
}
#modal.on .m-box{transform:none}
#m-x{position:absolute;top:1.1rem;right:1.2rem;font-size:1.3rem;color:var(--tinta-2);padding:.4rem}
#m-x:hover{color:var(--verde)}
#m-ico{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--verde),var(--verde-claro));color:#fff;font-size:1.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
#m-tit{font-family:var(--display);font-size:1.75rem;margin-bottom:.9rem}
#m-des{color:var(--tinta-2);margin-bottom:1.6rem}
.m-pri h4{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--verde);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.m-pri h4::before{content:'';width:26px;height:2px;background:var(--ouro)}
#m-pris li{
  position:relative;padding:.55rem 0 .55rem 1.7rem;color:var(--tinta);font-size:.96rem;
  border-bottom:1px solid var(--linha);
}
#m-pris li::before{content:'✦';position:absolute;left:.2rem;color:var(--ouro);font-size:.75rem;top:.7rem}
#m-pris li:last-child{border-bottom:none}

/* ── MÍDIA (YouTube + Instagram) ── */
#midia{background:var(--floresta);color:#fff}
#midia .sec-cab h2{color:#fff}
#midia .sec-cab p{color:rgba(255,255,255,.72)}
.midia-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.4rem;align-items:stretch}
.video-box{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-g);position:relative;border:1px solid rgba(255,255,255,.15)}
.video-box iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.video-info{padding:1.4rem 1.5rem;background:rgba(255,255,255,.05)}
.video-info b{font-family:var(--display);font-size:1.15rem;display:block;margin-bottom:.3rem}
.video-info p{color:rgba(255,255,255,.7);font-size:.92rem}
.midia-social{display:flex;flex-direction:column;gap:1.2rem}
.social-cta{
  flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--raio);padding:1.8rem;display:flex;flex-direction:column;gap:.7rem;
  transition:var(--tr);
}
.social-cta:hover{background:rgba(255,255,255,.09);border-color:rgba(226,179,60,.45);transform:translateY(-3px)}
.social-cta i.grande{font-size:1.9rem;color:var(--lima)}
.social-cta b{font-size:1.1rem}
.social-cta p{color:rgba(255,255,255,.68);font-size:.9rem;flex:1}
.social-cta span{color:var(--ouro);font-weight:600;font-size:.9rem}

/* ── DEPOIMENTOS ── */
#depoimentos{background:var(--areia);overflow:hidden}
.dep-trilho{display:flex;gap:1.4rem;width:max-content;animation:marquee 60s linear infinite;padding:.4rem 0}
.dep-trilho:hover{animation-play-state:paused}
.dep-card{
  width:360px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.8rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--sombra-s);
}
.dep-card .aspas{font-family:var(--display);font-size:2.6rem;color:var(--ouro);line-height:.5;font-style:italic}
.dep-card p{color:var(--tinta-2);font-size:.93rem;flex:1}
.dep-quem{display:flex;align-items:center;gap:.9rem;border-top:1px solid var(--linha);padding-top:1rem}
.dep-quem .ini{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--verde),var(--lima));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.dep-quem b{display:block;font-size:.94rem}
.dep-quem small{color:var(--tinta-2);font-size:.8rem}

/* ── CTA final ── */
#participe{
  background:linear-gradient(120deg,var(--floresta) 0%,var(--verde) 100%);
  position:relative;overflow:hidden;text-align:center;color:#fff;
}
#participe::before{
  content:'✦';position:absolute;font-size:22rem;font-family:var(--display);
  color:rgba(255,255,255,.045);top:-4rem;right:-3rem;line-height:1;
}
#participe h2{font-size:clamp(2rem,4.5vw,3.2rem);max-width:760px;margin:0 auto 1.2rem}
#participe h2 em{color:var(--ouro);font-style:italic}
#participe p{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 2.4rem}
#participe .hero-cta{justify-content:center}

/* ── FOOTER ── */
footer{background:var(--floresta-2);color:rgba(255,255,255,.75);padding:4.5rem 0 0}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.8rem;padding-bottom:3rem}
.ft-grid img{height:52px;margin-bottom:1.2rem}
.ft-grid p{font-size:.92rem;line-height:1.7}
.ft-social{display:flex;gap:.7rem;margin-top:1.4rem}
.ft-social a{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;transition:var(--tr);
}
.ft-social a:hover{background:var(--ouro);color:var(--floresta);transform:translateY(-3px)}
.ft-grid h4{color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem}
.ft-grid li{margin-bottom:.55rem}
.ft-grid li a{font-size:.92rem;transition:var(--tr)}
.ft-grid li a:hover{color:var(--lima);padding-left:.4rem}
.ft-grid li i{color:var(--ouro);width:20px;font-size:.85rem}
.ft-base{
  border-top:1px solid rgba(255,255,255,.09);padding:1.4rem 0;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:rgba(255,255,255,.5);
}
.ft-base a{color:rgba(255,255,255,.7)}
.ft-base a:hover{color:var(--lima)}

/* ── Flutuantes ── */
#zap-f{
  position:fixed;bottom:1.6rem;right:1.6rem;z-index:800;
  width:60px;height:60px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.7rem;
  box-shadow:0 10px 30px rgba(37,211,102,.45);transition:var(--tr);
  animation:pulso 2.6s ease-in-out infinite;
}
#zap-f:hover{transform:scale(1.1)}
@keyframes pulso{0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45)}50%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 14px rgba(37,211,102,0)}}
#btt{
  position:fixed;bottom:1.8rem;left:1.6rem;z-index:800;
  width:46px;height:46px;border-radius:50%;background:var(--floresta);color:var(--ouro);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-m);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:var(--tr);
}
#btt.sh{opacity:1;visibility:visible;transform:none}
#btt:hover{background:var(--verde)}

/* ── Cookies ── */
#cookies{
  position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,140%);z-index:850;
  width:min(640px,92vw);background:#fff;border-radius:16px;box-shadow:var(--sombra-g);
  padding:1.3rem 1.5rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  border:1px solid var(--linha);transition:transform .5s cubic-bezier(.32,.72,0,1);
}
#cookies.sh{transform:translate(-50%,0)}
#cookies p{flex:1;font-size:.86rem;color:var(--tinta-2);min-width:220px}
#cookies .btn{padding:.55rem 1.2rem;font-size:.85rem}

/* ── Reveal on scroll ── */
.rv,.rl,.rr{opacity:0;transition:opacity .8s ease,transform .8s ease}
.rv{transform:translateY(28px)}
.rl{transform:translateX(-34px)}
.rr{transform:translateX(34px)}
.rv.vs,.rl.vs,.rr.vs{opacity:1;transform:none}

/* ── PÁGINAS DE AÇÃO (acao-*.html) ── */
.pg-hero{
  position:relative;background:var(--floresta);color:#fff;
  padding:9rem 0 4.5rem;overflow:hidden;
}
.pg-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--ouro),var(--lima))}
.pg-hero .etiqueta{color:var(--lima);margin-bottom:1rem}
.pg-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:820px}
.pg-hero h1 em{color:var(--ouro);font-style:italic}
.pg-hero .lead{color:rgba(255,255,255,.78);max-width:640px;margin-top:1.2rem;font-size:1.08rem}
.pg-voltar{
  position:absolute;top:1.6rem;left:4%;z-index:5;
  display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:600;font-size:.9rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:.55rem 1.2rem;backdrop-filter:blur(8px);transition:var(--tr);
}
.pg-voltar:hover{background:var(--ouro);color:var(--floresta);border-color:var(--ouro)}
.pg-corpo{padding:5rem 0}
.pg-corpo .wrap{max-width:820px}
.pg-corpo p{color:var(--tinta-2);font-size:1.05rem;margin-bottom:1.3rem}
.pg-hl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:3rem 0}
.pg-hl article{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.6rem 1.4rem;transition:var(--tr);
}
.pg-hl article:hover{transform:translateY(-4px);box-shadow:var(--sombra-m)}
.pg-hl i{width:46px;height:46px;border-radius:12px;background:var(--lima-suave);color:var(--verde);display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:.9rem}
.pg-hl b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:.4rem}
.pg-hl p{font-size:.9rem;margin:0}
.pg-galeria{padding:0 0 5rem}
.pg-galeria .wrap{max-width:820px}
.pg-galeria h2{font-size:1.7rem;margin-bottom:1.5rem}
.pg-galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pg-galeria-grid .foto-pend.clara{aspect-ratio:1}
.pg-acao-links{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.pg-ft{background:var(--floresta-2);color:rgba(255,255,255,.6);padding:1.6rem 0;font-size:.88rem}
.pg-ft .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.pg-ft a{color:var(--lima);font-weight:600}

/* ── Acessibilidade / util ── */
:focus-visible{outline:2.5px solid var(--ouro);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .marquee,.dep-trilho{animation:none;flex-wrap:wrap;width:auto}
  html{scroll-behavior:auto}
}

/* ── Responsivo ── */
@media (max-width:1024px){
  .acoes-grid{grid-template-columns:repeat(2,1fr)}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .midia-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .hero-foto{order:-1}
  .hero-foto .moldura{width:min(320px,70vw)}
  #hero{padding-top:7.5rem}
}
@media (max-width:820px){
  .nav-d{display:none}
  #ham{display:flex}
  section{padding:4.5rem 0}
  .quem-grid{grid-template-columns:1fr;gap:3rem}
  .quem-foto{max-width:420px;margin-inline:auto}
  .tl::before{left:1rem}
  .tl-item{width:auto;margin-left:2.8rem!important}
  .tl-item::before{left:-2.8rem!important;right:auto!important;transform:translateX(-50%)!important}
  .pg-hl{grid-template-columns:1fr}
  .pg-galeria-grid{grid-template-columns:repeat(2,1fr)}
  .acoes-banner img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .acoes-grid{grid-template-columns:1fr}
  .band-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .dep-card{width:300px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-foto .selo{left:.4rem}
}

/* ============================================================
   v3.1 — hero centralizado, jingle, trajetória interativa,
   ações autoexplicativas, deck do Instagram, rodapé compacto
   ============================================================ */

/* Hero centralizado, foto reta */
.hero-centro{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:0;
}
.hero-centro h1{font-weight:600;letter-spacing:.005em}
.hero-centro .hero-cred,.hero-centro .hero-cta{justify-content:center}
.hero-centro .hero-foto{margin-top:3rem}
.hero-centro .hero-foto .moldura{transform:none;width:min(360px,76vw)}
.hero-centro .hero-foto .selo{transform:none;left:50%;translate:-50% 50%;bottom:0;white-space:nowrap}
#hero{padding:8.5rem 0 6rem;min-height:auto}
#hero::before{background:linear-gradient(180deg,rgba(10,44,5,.9) 0%,rgba(13,57,7,.72) 55%,rgba(10,44,5,.92) 100%)}

/* Botão do jingle */
.jingle-btn{position:relative}
.jingle-btn .eq{display:none;align-items:flex-end;gap:2.5px;height:14px;margin-left:.2rem}
.jingle-btn .eq i{width:3px;background:var(--ouro);border-radius:2px;animation:eq .9s ease-in-out infinite}
.jingle-btn .eq i:nth-child(1){height:60%;animation-delay:0s}
.jingle-btn .eq i:nth-child(2){height:100%;animation-delay:.15s}
.jingle-btn .eq i:nth-child(3){height:45%;animation-delay:.3s}
.jingle-btn .eq i:nth-child(4){height:80%;animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.jingle-btn.tocando{background:rgba(226,179,60,.16);border-color:var(--ouro);color:var(--ouro-claro)}
.jingle-btn.tocando .eq{display:inline-flex}

/* Trajetória interativa (stepper) */
.tlx{max-width:960px;margin-inline:auto}
.tlx-nav{
  display:flex;justify-content:space-between;position:relative;
  margin-bottom:2.6rem;overflow-x:auto;padding:.4rem .2rem 1rem;
  scrollbar-width:none;
}
.tlx-nav::-webkit-scrollbar{display:none}
.tlx-nav::before{
  content:'';position:absolute;left:0;right:0;top:1rem;height:2px;
  background:repeating-linear-gradient(90deg,var(--ouro) 0 8px,transparent 8px 16px);opacity:.5;
}
.tlx-pt{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  min-width:74px;position:relative;color:rgba(255,255,255,.55);transition:var(--tr);
}
.tlx-no{
  width:14px;height:14px;border-radius:50%;background:var(--floresta);
  border:2px solid rgba(255,255,255,.4);transition:var(--tr);
}
.tlx-rt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tlx-pt:hover{color:#fff}
.tlx-pt.ativo{color:var(--ouro)}
.tlx-pt.ativo .tlx-no{background:var(--ouro);border-color:var(--ouro);box-shadow:0 0 0 5px rgba(226,179,60,.22)}
.tlx-palco{display:grid;margin-bottom:1.8rem}
.tlx-slide{
  grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--raio);overflow:hidden;backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease,visibility .55s;
}
.tlx-slide.ativo{opacity:1;visibility:visible;transform:none}
.tlx-midia{position:relative;min-height:280px}
.tlx-midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tlx-midia .foto-pend{position:absolute;inset:0;aspect-ratio:auto;border-bottom:none;border-right:1px dashed rgba(226,179,60,.45)}
.tlx-info{padding:2.4rem 2.4rem 2.6rem;display:flex;flex-direction:column;justify-content:center}
.tlx-info h3{color:#fff;font-size:1.7rem;margin:.2rem 0 .8rem}
.tlx-info p{color:rgba(255,255,255,.75);font-size:.98rem}
.tlx-info strong{color:var(--lima)}
.tlx-ctrl{display:flex;align-items:center;justify-content:center;gap:1.4rem}
.tlx-seta{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.35);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
}
.tlx-seta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--floresta)}
.tlx-cont{color:rgba(255,255,255,.6);font-size:.9rem;letter-spacing:.12em}
.tlx-cont b{color:var(--ouro);font-size:1.05rem}

/* Ações sociais autoexplicativas */
.acoesx-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.acaox{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.8rem 1.8rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;
  transition:var(--tr);position:relative;overflow:hidden;
}
.acaox::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:linear-gradient(var(--ouro),var(--lima));
  transform:scaleY(0);transform-origin:top;transition:var(--tr);
}
.acaox:hover{transform:translateY(-4px);box-shadow:var(--sombra-m)}
.acaox:hover::before{transform:scaleY(1)}
.acaox h3{font-size:1.3rem;margin-top:.25rem}
.acaox p{color:var(--tinta-2);font-size:.95rem;flex:1}
.acaox-lk{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  color:var(--verde);font-weight:600;font-size:.86rem;
  border-bottom:1.5px solid var(--ouro);padding-bottom:2px;transition:var(--tr);
}
.acaox-lk:hover{color:var(--floresta);gap:.75rem}

/* Deck do Instagram */
.midia-insta{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.ig-deck{
  position:relative;width:min(340px,84vw);height:470px;margin-top:.6rem;
}
.ig-card{
  position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:var(--sombra-g);border:1px solid rgba(255,255,255,.35);
  transition:transform .7s cubic-bezier(.32,.72,0,1),opacity .7s ease;
  will-change:transform,opacity;
}
.ig-card iframe{width:100%;height:100%;border:0;pointer-events:none}
.ig-card.p0{transform:none;opacity:1;z-index:6}
.ig-card.p0 iframe{pointer-events:auto}
.ig-card.p1{transform:translate(7%,3%) rotate(3.5deg) scale(.96);opacity:.9;z-index:5}
.ig-card.p2{transform:translate(14%,6%) rotate(7deg) scale(.92);opacity:.7;z-index:4}
.ig-card.pfundo{transform:translate(18%,8%) rotate(9deg) scale(.9);opacity:0;z-index:3}
.ig-card.psaindo{transform:translate(-80%,-4%) rotate(-14deg);opacity:0;z-index:7}
.ig-ctrl{display:flex;align-items:center;gap:1rem}
.midia-flickr{text-align:center;margin-top:2.6rem;color:rgba(255,255,255,.7);font-size:.95rem}
.midia-flickr a{color:var(--ouro);font-weight:600;border-bottom:1.5px solid rgba(226,179,60,.5)}
.midia-flickr a:hover{color:var(--ouro-claro)}
.midia-grid{align-items:start}

/* Rodapé compacto */
footer{padding:2.6rem 0 0}
.ft-grid{gap:2rem;padding-bottom:1.6rem}
.ft-grid img{height:40px;margin-bottom:.8rem}
.ft-grid p{font-size:.87rem;line-height:1.55}
.ft-grid h4{margin-bottom:.7rem}
.ft-grid li{margin-bottom:.3rem}
.ft-grid li a,.ft-grid li span{font-size:.87rem}
.ft-social{margin-top:.9rem}
.ft-social a{width:36px;height:36px;font-size:.9rem}
.ft-base{padding:1rem 0;font-size:.8rem}

/* Responsivo v3.1 */
@media (max-width:820px){
  .hero-centro .hero-foto{margin-top:2.4rem}
  .tlx-slide{grid-template-columns:1fr}
  .tlx-midia{min-height:210px;aspect-ratio:16/9;position:relative}
  .tlx-midia .foto-pend{border-right:none;border-bottom:1px dashed rgba(226,179,60,.45)}
  .tlx-info{padding:1.7rem 1.5rem 2rem}
  .tlx-nav{justify-content:flex-start;gap:.4rem}
  .acoesx-grid{grid-template-columns:1fr}
  .ig-deck{height:440px}
}
@media (max-width:560px){
  #hero{padding:7.5rem 0 5rem}
  .jingle-btn{width:100%;justify-content:center}
  .ig-ctrl{width:100%;justify-content:space-between}
}

/* ============================================================
   v3.2 — hero lateral compacto, player no header, overlay de
   som, trajetória só texto com fundo, coração pulsante
   ============================================================ */

/* Hero: foto na lateral, textos centralizados na outra */
#hero{padding:7.5rem 0 4rem;min-height:auto}
.hero-lado{
  position:relative;z-index:2;display:grid;grid-template-columns:.78fr 1.22fr;
  gap:3.5rem;align-items:center;
}
.hero-lado .hero-foto{justify-self:center;margin:0}
.hero-lado .hero-foto .moldura{transform:none;width:min(330px,72vw)}
.hero-lado .hero-foto .selo{transform:none;left:50%;translate:-50% 50%;bottom:0;white-space:nowrap}
.hero-txt2{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-txt2 h1{font-size:clamp(2.4rem,4.8vw,4rem);margin:1.3rem 0 1.5rem;font-weight:600}
.hero-txt2 .hero-cred,.hero-txt2 .hero-cta{justify-content:center}
.hero-txt2 .hero-cred{margin-bottom:2rem}

/* Player do jingle no header */
#hdr-player{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.6rem 1.25rem;border-radius:999px;
  background:var(--ouro);color:var(--floresta);
  font-weight:700;font-size:.88rem;transition:var(--tr);
  box-shadow:0 4px 16px rgba(226,179,60,.35);
}
#hdr-player:hover{background:var(--ouro-claro);transform:translateY(-2px)}
#hdr-player .eq{display:none;align-items:flex-end;gap:2.5px;height:13px}
#hdr-player .eq i{width:3px;background:var(--floresta);border-radius:2px;animation:eq .9s ease-in-out infinite}
#hdr-player .eq i:nth-child(1){height:60%;animation-delay:0s}
#hdr-player .eq i:nth-child(2){height:100%;animation-delay:.15s}
#hdr-player .eq i:nth-child(3){height:45%;animation-delay:.3s}
#hdr-player .eq i:nth-child(4){height:80%;animation-delay:.45s}
#hdr-player.tocando .eq{display:inline-flex}
#hdr-player.tocando{animation:pulso-ouro 2.4s ease-in-out infinite}
@keyframes pulso-ouro{0%,100%{box-shadow:0 4px 16px rgba(226,179,60,.35)}50%{box-shadow:0 4px 16px rgba(226,179,60,.35),0 0 0 10px rgba(226,179,60,0)}}

/* Overlay entrar com/sem som */
#som-ov{
  position:fixed;inset:0;z-index:9990;background:rgba(10,44,5,.92);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:1.4rem;
  opacity:1;transition:opacity .5s ease,visibility .5s ease;
}
#som-ov.out{opacity:0;visibility:hidden}
.som-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.som-box img{width:min(230px,58vw)}
.som-box p{color:rgba(255,255,255,.85);font-family:var(--display);font-style:italic;font-size:1.25rem}
.som-btns{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}

/* Trajetória: fundo dela rezando o terço + cards só de texto */
#trajetoria{
  background:
    linear-gradient(rgba(9,40,5,.78),rgba(10,44,5,.9)),
    url('../img/fundo-terco.webp') center 18%/cover no-repeat fixed,
    var(--floresta);
}
.tlx-palco .tlx-slide{backdrop-filter:blur(8px)}
.tlx-slide{grid-template-columns:1fr;text-align:center}
.tlx-info{padding:3rem 3.2rem 3.2rem;align-items:center}
.tlx-info h3{font-size:1.9rem}
.tlx-info p{max-width:640px;margin-inline:auto;font-size:1.02rem}
.tlx-palco .tlx-slide{background:rgba(9,36,5,.55)}

/* Coração pulsante do WhatsApp */
#zap-f{
  background:var(--areia);
  animation:none;
}
#zap-f img{width:62%;height:62%;object-fit:contain;animation:batida 1.6s ease-in-out infinite}
@keyframes batida{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.18)}
  28%{transform:scale(1)}
  42%{transform:scale(1.14)}
  56%{transform:scale(1)}
}

/* Responsivo v3.2 */
@media (max-width:1024px){
  .hero-lado{grid-template-columns:1fr;gap:2.6rem}
  .hero-lado .hero-foto{order:-1}
  .hero-lado .hero-foto .moldura{width:min(280px,64vw)}
}
@media (max-width:820px){
  .nav-d{display:flex;gap:0}
  .nav-d a:not(:last-child){display:none}
  #hdr .wrap{gap:.8rem}
  #hdr-player{padding:.55rem 1rem;font-size:.82rem}
  .tlx-info{padding:2.2rem 1.4rem 2.4rem}
  #trajetoria{
    background:
      linear-gradient(rgba(9,40,5,.72),rgba(10,44,5,.92)),
      url('../img/fundo-terco.webp') 72% top/cover no-repeat scroll,
      var(--floresta);
  }
  .som-btns .btn{width:100%;justify-content:center}
}

/* v3.2.2 — coração do WhatsApp sem o círculo branco */
#zap-f{background:none;box-shadow:none;width:66px;height:66px}
#zap-f:hover{transform:scale(1.08)}
#zap-f img{width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(13,57,7,.45))}

/* v3.2.3 — botão do WhatsApp de volta ao círculo (com o coração) */
#zap-f{background:var(--areia);box-shadow:0 10px 30px rgba(37,211,102,.45);width:60px;height:60px;animation:pulso 2.6s ease-in-out infinite}
#zap-f:hover{transform:scale(1.1)}
#zap-f img{width:62%;height:62%;filter:none}

/* v3.2.4 — ícone original do WhatsApp e foto da capa maior */
#zap-f{background:#25d366;color:#fff}
#zap-f:hover{transform:scale(1.1)}
.hero-lado .hero-foto .moldura{width:min(395px,76vw)}
@media (max-width:1024px){.hero-lado .hero-foto .moldura{width:min(320px,68vw)}}

/* v3.4 — compilado de redes sociais antes do rodapé */
#redes{background:var(--areia);padding-top:5.5rem}
.redes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rede-card{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.2rem;
  transition:var(--tr);position:relative;overflow:hidden;
}
.rede-card b{font-size:1.12rem;margin-top:.75rem}
.rede-card small{color:var(--tinta-2);font-size:.88rem}
.rede-ico{
  width:52px;height:52px;border-radius:14px;color:#fff;font-size:1.35rem;
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
}
.rede-ir{
  margin-top:1rem;color:var(--verde);font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;gap:.45rem;transition:var(--tr);
}
.rede-card:hover{transform:translateY(-5px);box-shadow:var(--sombra-m)}
.rede-card:hover .rede-ir{gap:.8rem}
.rd-ig .rede-ico{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.rd-wa .rede-ico{background:#25d366}
.rd-yt .rede-ico{background:#ff0000}
.rd-fb .rede-ico{background:#1877f2}
.rd-x  .rede-ico{background:#0f1419}
.rd-fl .rede-ico{background:linear-gradient(90deg,#0063dc 50%,#ff0084 50%)}
.rd-ig:hover{border-color:#cc2366}.rd-wa:hover{border-color:#25d366}
.rd-yt:hover{border-color:#ff0000}.rd-fb:hover{border-color:#1877f2}
.rd-x:hover{border-color:#0f1419}.rd-fl:hover{border-color:#0063dc}
@media (max-width:820px){.redes-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.redes-grid{grid-template-columns:1fr}.rede-card{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.9rem}.rede-card b{margin:0}.rede-card small{width:100%;order:3;margin-left:calc(52px + .9rem);margin-top:-.9rem}.rede-ir{margin:0 0 0 auto}}

/* ============================================================
   v3.5 — REVISÃO GERAL
   Tema escuro unificado (títulos brancos), correção do bug de
   rolagem/zoom, timeline mobile, rodapé reespaçado
   ============================================================ */

/* Títulos de todas as seções em branco (fundo verde profundo) */
.sec-cab h2{color:#fff}
.sec-cab p{color:rgba(255,255,255,.75)}
.etiqueta{color:var(--lima)}
.sec-cab h2 .destaque{color:var(--ouro)}

#quem{background:var(--floresta)}
#acoes{background:var(--floresta-2)}
#bandeiras{background:var(--floresta)}
#midia{background:var(--floresta-2)}
#depoimentos{background:var(--floresta)}
#redes{background:var(--floresta-2)}

/* Textos da seção Quem é sobre o fundo escuro */
.quem-txt p{color:rgba(255,255,255,.78)}
.quem-txt strong{color:var(--lima)}
.quem-foto::before{border-color:rgba(226,179,60,.65)}

/* Fundo do terço sem "fixed" (causava sensação de zoom ao rolar) */
#trajetoria{
  background:
    linear-gradient(rgba(9,40,5,.8),rgba(10,44,5,.92)),
    url('../img/fundo-terco.webp') center 20%/cover no-repeat scroll,
    var(--floresta);
}

/* Cards claros ganham borda sutil para descolar do fundo escuro */
.acaox,.band-card,.dep-card,.rede-card{border-color:rgba(255,255,255,.06)}
.acao-meta{color:var(--verde)}

/* Depoimentos: cartões sobre o escuro */
.dep-card{box-shadow:0 14px 40px rgba(0,0,0,.28)}

/* Marquee de valores: transição para o tema escuro */
#valores-faixa{border-bottom:1px solid rgba(255,255,255,.06)}

/* Rodapé reespaçado e separado */
footer{background:#071F03;border-top:1px solid rgba(226,179,60,.25);padding:3.4rem 0 0}
.ft-grid{gap:2.6rem;padding-bottom:2.4rem}
.ft-grid img{height:44px;margin-bottom:1rem}
.ft-grid h4{margin-bottom:1rem}
.ft-grid li{margin-bottom:.55rem}
.ft-base{padding:1.3rem 0;gap:1.2rem}

/* Header: no topo o fundo é escuro; ao rolar continua o vidro claro */
#hdr.sc{background:rgba(9,32,4,.9)}
#hdr.sc .nav-d a{color:rgba(255,255,255,.88)}
#hdr.sc .logo .lg-branco{display:block}
#hdr.sc .logo .lg-preto{display:none}
#hdr.sc #ham span{background:#fff}

/* Player "Aumente o som" mais discreto no mobile */
@media (max-width:820px){
  #hdr-player{padding:.5rem .9rem;font-size:.78rem;gap:.45rem}
}

/* Timeline no mobile — reconfigurada */
@media (max-width:820px){
  .tlx-nav{
    justify-content:flex-start;gap:1.1rem;padding:.4rem .4rem 1rem;
    scroll-snap-type:x proximity;
  }
  .tlx-nav::before{top:.95rem}
  .tlx-pt{min-width:auto;scroll-snap-align:center;flex-shrink:0}
  .tlx-rt{font-size:.66rem;letter-spacing:.05em}
  .tlx-no{width:12px;height:12px}
  .tlx-info{padding:1.9rem 1.3rem 2.1rem}
  .tlx-info h3{font-size:1.45rem}
  .tlx-info p{font-size:.95rem}
  .tlx-ctrl{gap:1rem;margin-top:.2rem}
  .tlx-seta{width:42px;height:42px}
}
@media (max-width:560px){
  .hero-lado .hero-foto .moldura{width:min(300px,80vw)}
  #hero{padding:6.5rem 0 3.5rem}
  .sec-cab{margin-bottom:2.4rem}
  section{padding:4rem 0}
  .ft-base{flex-direction:column;text-align:center;gap:.5rem}
}

/* ============================================================
   v3.6 — mobile no estilo app: barra superior (menu | logo |
   som) e barra de navegação inferior fixa
   ============================================================ */
#barra-mob{display:none}

@media (max-width:820px){
  /* Barra superior: menu à esquerda, logo centralizado, som à direita */
  #hdr{background:rgba(9,32,4,.92);backdrop-filter:blur(12px);padding:.65rem 0;box-shadow:0 1px 0 rgba(255,255,255,.07)}
  #hdr .wrap{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:.4rem}
  #ham{order:-1;grid-column:1;justify-self:start}
  #hdr .logo{grid-column:2;justify-self:center}
  #hdr .logo img{height:36px}
  .nav-d{grid-column:3;justify-self:end;display:flex}
  .nav-d a{display:none!important}
  #hdr.sc{padding:.65rem 0}

  /* Player vira botão circular compacto */
  #hdr-player{width:42px;height:42px;padding:0;justify-content:center;border-radius:50%}
  #hdr-player .hp-tit{display:none}
  #hdr-player .eq{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);height:8px}
  #hdr-player .eq i{width:2px}

  /* Barra inferior fixa (estilo app) */
  #barra-mob{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:890;
    background:var(--areia);border-top:1px solid var(--linha);
    padding:.45rem .3rem calc(.45rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(0,0,0,.18);
  }
  .bm-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:.22rem;
    color:var(--tinta-2);font-size:.66rem;font-weight:600;padding:.25rem 0;
    transition:var(--tr);
  }
  .bm-item i{font-size:1.12rem}
  .bm-item.ativo{color:var(--verde)}
  .bm-item.ativo i{transform:translateY(-1px)}

  /* Elementos flutuantes acima da barra */
  body{padding-bottom:70px}
  #zap-f{bottom:86px;right:1rem;width:54px;height:54px;font-size:1.5rem}
  #btt{display:none}
  #cookies{bottom:82px}
}

/* ============================================================
   v3.7 — correção do estouro horizontal, timeline mobile em
   pílulas, foto da capa em arco com brilho
   ============================================================ */

/* Estouro horizontal: nada pode vazar da largura da tela */
html,body{overflow-x:hidden;max-width:100vw}
#mob-m{visibility:hidden}
#mob-m.on{visibility:visible}
#valores-faixa{max-width:100vw}

/* Foto da capa: moldura em arco, anel dourado e brilho de fundo */
.hero-lado .hero-foto{position:relative}
.hero-lado .hero-foto .moldura{
  border-radius:999px 999px 30px 30px;
  border:none;
  box-shadow:0 34px 80px rgba(0,0,0,.5);
}
.hero-lado .hero-foto .moldura img{
  filter:saturate(1.06) contrast(1.03);
  object-position:center top;
}
.hero-lado .hero-foto::before{ /* anel dourado */
  content:'';position:absolute;inset:-15px;pointer-events:none;
  border:1.5px solid rgba(226,179,60,.65);
  border-radius:999px 999px 36px 36px;
}
.hero-lado .hero-foto::after{ /* brilho suave atrás */
  content:'';position:absolute;inset:-70px -95px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(159,211,53,.25),rgba(226,179,60,.08) 55%,transparent 75%);
}

/* Timeline mobile: navegação por pílulas (sem linha quebrada) */
@media (max-width:820px){
  .tlx-nav::before{content:none}
  .tlx-no{display:none}
  .tlx-nav{gap:.55rem;padding:.2rem .2rem .9rem;justify-content:flex-start}
  .tlx-pt{
    flex-direction:row;flex-shrink:0;min-width:auto;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
    border-radius:999px;padding:.52rem 1.05rem;color:rgba(255,255,255,.75);
  }
  .tlx-pt.ativo{background:var(--ouro);border-color:var(--ouro);color:var(--floresta);box-shadow:0 0 0 4px rgba(226,179,60,.2)}
  .tlx-rt{font-size:.72rem;letter-spacing:.06em}
}

/* ============================================================
   v3.8 — capa em camadas (fundo + logo + recorte), rodapé
   enxuto, foto do terço centralizada no rosto (mobile)
   ============================================================ */

/* Composição da capa */
.hero-compo{
  position:relative;justify-self:center;
  width:min(440px,86vw);aspect-ratio:683/1024;
  border-radius:26px;overflow:hidden;
  box-shadow:0 36px 90px rgba(0,0,0,.55);
}
.hero-compo::after{ /* brilho atrás */
  content:'';position:absolute;inset:-70px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(159,211,53,.22),transparent 74%);
}
.hc-fundo,.hc-frente{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-fundo{filter:saturate(1.05)}
.hc-logo{
  position:absolute;z-index:2;left:50%;top:13.5%;transform:translateX(-50%);
  width:94%;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
.hc-frente{z-index:3;filter:saturate(1.04) contrast(1.02)}
.hero-compo::before{ /* leve vinheta inferior para ancorar */
  content:'';position:absolute;left:0;right:0;bottom:0;height:34%;z-index:4;pointer-events:none;
  background:linear-gradient(transparent,rgba(9,36,5,.45));
}

/* Rodapé enxuto */
footer{padding:0}
.ft-base{padding:1.15rem 0;font-size:.82rem;justify-content:space-between}
.ft-links a{color:rgba(255,255,255,.75);font-weight:600}
.ft-links a:hover{color:var(--lima)}
.ft-links i{color:var(--ouro);margin-right:.3rem}

/* Trajetória no mobile: rosto centralizado */
@media (max-width:820px){
  #trajetoria{
    background:
      linear-gradient(rgba(9,40,5,.72),rgba(10,44,5,.92)),
      url('../img/fundo-terco.webp') 66% 24%/cover no-repeat scroll,
      var(--floresta);
  }
  .hero-compo{width:min(360px,88vw);margin-inline:auto}
  .hc-logo{width:96%}
}
@media (max-width:560px){
  .ft-base{flex-direction:column;text-align:center;gap:.35rem}
}

/* v3.9 — faixa com as 35 RAs (loop mais lento) e rótulo do som no mobile */
.marquee{animation-duration:150s}
@media (max-width:820px){
  #hdr .wrap{grid-template-columns:auto 1fr auto}
  #hdr-player{width:auto;height:auto;border-radius:999px;padding:.5rem .95rem;gap:.45rem}
  #hdr-player .hp-tit{display:inline;font-size:.74rem;white-space:nowrap}
  #hdr-player .eq{position:static;transform:none;height:11px}
  #hdr .logo img{height:32px}
}

/* v3.9.1 — etiquetas das seções (AÇÕES SOCIAIS, TRAJETÓRIA...) em branco */
.etiqueta,.etiqueta.clara{color:#fff}

/* v3.9.1 — etiquetas das seções em branco */
.etiqueta,.etiqueta.clara{color:#fff}

/* ============================================================
   v4.0 — tipografia moderna (Plus Jakarta Sans, pegada da
   referência), ações sociais em vidro com número fantasma,
   correção da fonte azul (iOS) nas bandeiras
   ============================================================ */

/* Fonte azul dos botões no iPhone (bandeiras) */
button{color:inherit}

/* Tipografia nova em todo o site */
:root{
  --display:"Plus Jakarta Sans",system-ui,sans-serif;
  --texto:"Plus Jakarta Sans",system-ui,sans-serif;
}
h1,h2,h3{font-weight:800;letter-spacing:-.025em}
.destaque,.destaque-ouro{font-style:normal;font-weight:800}
.sec-cab h2 .destaque{color:var(--ouro)}
#hero h1 em,.hero-txt2 h1 em{font-style:normal}
.marquee span{font-style:normal;font-weight:600;font-size:.95rem;letter-spacing:.04em}
.tl-ano{font-weight:800}
.etiqueta{font-weight:700}
.dep-card .aspas{font-style:normal}
.acoes-banner figcaption b,.video-info b,.som-box p{font-style:normal}

/* Ações sociais — cards de vidro com número fantasma (referência) */
#acoes{position:relative}
.acaox{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:22px;position:relative;overflow:hidden;
  padding:1.9rem 1.8rem 1.7rem;
}
.acaox::before{content:none}
.acaox::after{ /* número fantasma */
  content:attr(data-n);
  position:absolute;right:1.1rem;bottom:.2rem;z-index:0;
  font-family:var(--display);font-weight:800;font-size:5.6rem;line-height:1;
  color:rgba(226,179,60,.16);pointer-events:none;
}
.acaox:hover{transform:translateY(-5px);border-color:rgba(226,179,60,.5);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.acaox h3{color:#fff;position:relative;z-index:1}
.acaox p{color:rgba(255,255,255,.75);position:relative;z-index:1}
.acaox strong{color:var(--lima)}
.acaox .acao-meta{color:var(--ouro)}
.acaox-lk{
  color:var(--ouro-claro);border:1.5px solid rgba(226,179,60,.55);border-radius:999px;
  padding:.5rem 1.05rem;font-size:.82rem;z-index:1;
}
.acaox-lk:hover{background:var(--ouro);color:var(--floresta);gap:.5rem}

/* Mobile: carrossel deslizável com o próximo card aparecendo */
@media (max-width:820px){
  .acoesx-grid{
    display:flex;overflow-x:auto;gap:1rem;
    scroll-snap-type:x mandatory;padding:0 .2rem 1rem;
    scrollbar-width:none;
  }
  .acoesx-grid::-webkit-scrollbar{display:none}
  .acaox{min-width:84%;scroll-snap-align:center}
}

/* peso extrabold garantido nos títulos principais */
#hero h1,.hero-txt2 h1,.sec-cab h2,#m-tit{font-weight:800!important}

/* ============================================================
   v4.1 — ações sociais: carrossel igual no PC e no mobile,
   cards clicáveis abrindo modal (como as bandeiras)
   ============================================================ */
.acoesx-wrap{position:relative}
.acoesx-grid{
  display:flex!important;overflow-x:auto;gap:1.1rem;
  grid-template-columns:none;
  scroll-snap-type:x mandatory;padding:.3rem .2rem 1.1rem;
  scrollbar-width:none;
}
.acoesx-grid::-webkit-scrollbar{display:none}
.acaox{
  min-width:min(370px,84vw);max-width:min(370px,84vw);
  scroll-snap-align:start;cursor:pointer;text-align:left;
}
.acaox .mais{color:var(--ouro);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:.45rem;position:relative;z-index:1;transition:var(--tr)}
.acaox:hover .mais{gap:.8rem}
.acoesx-ctrl{display:flex;justify-content:center;gap:1rem;margin-top:.6rem}
.acoesx-ctrl .tlx-seta{border-color:rgba(255,255,255,.3)}

/* Fotos trocadas: enquadramento do banner e da foto do Quem é */
.quem-foto img{object-position:center 18%}

/* ============================================================
   v4.2 — capa panorâmica (bandeira + Maria Amélia), hierarquia
   dos cards de ação (instituição maior) e botão "+"
   ============================================================ */

/* HERO com a imagem como capa */
#hero{
  position:relative;min-height:92svh;display:flex;align-items:center;
  padding:7.5rem 0 4.5rem;background:var(--floresta-2);overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center right;
}
#hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(7,31,3,.9) 0%,rgba(7,31,3,.62) 42%,rgba(7,31,3,.08) 75%,transparent 100%),
    linear-gradient(rgba(7,31,3,.25),transparent 30%,transparent 70%,rgba(7,31,3,.55));
}
.hero-conteudo{
  position:relative;z-index:2;max-width:660px;margin-left:calc((100% - min(1180px,92%))/2 + 0px);
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
#hero .wrap.hero-conteudo{width:min(1180px,92%);margin-inline:auto}
#hero .hero-conteudo h1{font-size:clamp(2.5rem,5vw,4.2rem);margin:1.3rem 0 1.5rem;max-width:640px}
.hero-conteudo .hero-cred{justify-content:flex-start;margin-bottom:2rem}
.hero-conteudo .hero-cta{justify-content:flex-start}

/* Cards de ação: hierarquia e botão + */
.acaox-topo{display:flex;flex-direction:column;gap:.3rem}
.acaox h3{font-size:1.45rem;line-height:1.2}
.acaox-sub{
  color:var(--ouro);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  position:relative;z-index:1;
}
.acaox .acao-meta{color:rgba(255,255,255,.55);font-size:.7rem}
.acaox p{font-size:.92rem;margin-top:.4rem}
.acaox-plus{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(226,179,60,.7);color:var(--ouro);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  position:relative;z-index:1;transition:var(--tr);margin-top:.4rem;
}
.acaox:hover .acaox-plus{background:var(--ouro);color:var(--floresta);transform:rotate(90deg)}

/* Responsivo do novo hero */
@media (max-width:820px){
  #hero{min-height:88svh;padding:6.5rem 0 3.5rem;align-items:flex-end}
  .hero-bg{object-position:68% center}
  #hero::before{
    background:
      linear-gradient(rgba(7,31,3,.55),rgba(7,31,3,.2) 30%,rgba(7,31,3,.5) 62%,rgba(7,31,3,.95) 100%);
  }
  #hero .hero-conteudo h1{font-size:clamp(2.1rem,8.5vw,2.8rem)}
  .hero-conteudo .hero-cta,.hero-conteudo .hero-cta .btn{width:100%;justify-content:center}
}

/* v4.2.1 — banner da fachada em resolução coerente + selo discreto de IA */
.acoes-banner{max-width:880px;margin-inline:auto;margin-bottom:3rem}
.acoes-banner img{aspect-ratio:16/11;object-position:center 58%}
@media (max-width:820px){
  .acoes-banner img{aspect-ratio:4/5;object-position:center 45%}
}
.hero-ia{
  position:absolute;right:1.1rem;bottom:.85rem;z-index:2;
  font-size:.66rem;letter-spacing:.08em;color:rgba(255,255,255,.45);
  background:rgba(7,31,3,.35);backdrop-filter:blur(4px);
  padding:.28rem .7rem;border-radius:999px;pointer-events:none;
}
@media (max-width:820px){
  .hero-ia{right:.8rem;bottom:.7rem;font-size:.6rem}
}

/* ============================================================
   v4.3 — capa sem zoom/desfoque, conteúdo preenchendo a
   esquerda, faixa das RAs integrada à capa, banner maior
   ============================================================ */

/* Conteúdo da capa ocupa a tela desde a esquerda */
.hero-conteudo{
  margin:0 auto!important;
  width:min(1560px,94%)!important;
  max-width:none!important;
}
.hero-conteudo > *{max-width:700px}
#hero{min-height:88svh;padding-bottom:7rem}
.hero-bg{object-position:center 30%}

/* Faixa das RAs integrada à capa (fita de vidro sobre a imagem) */
#valores-faixa{
  position:relative;z-index:5;margin-top:-3.4rem;
  background:rgba(7,31,3,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(226,179,60,.45);
  border-bottom:1px solid rgba(226,179,60,.45);
  padding:.85rem 0;
}
.marquee span{color:rgba(255,255,255,.9);font-size:.9rem}

/* Banner da Solidariedade mais largo */
.acoes-banner{max-width:1020px}
.acoes-banner img{aspect-ratio:16/10}

@media (max-width:820px){
  #hero{padding-bottom:6.5rem}
  #valores-faixa{margin-top:-2.6rem;padding:.7rem 0}
  .acoes-banner img{aspect-ratio:4/5}
}

/* ============================================================
   v4.4 — fachada como fundo das ações, mural em movimento,
   faixa das RAs fechando o hero, foto visível no mobile
   ============================================================ */

/* Faixa das RAs presa ao fim do hero */
#hero #valores-faixa{
  position:absolute;left:0;right:0;bottom:0;margin:0;z-index:3;
}
#hero{padding-bottom:8.5rem}
.hero-ia{bottom:4.2rem}

/* Fundo do hero: menos gradiente na base para a foto aparecer sob a fita */
#hero::before{
  background:
    linear-gradient(90deg,rgba(7,31,3,.9) 0%,rgba(7,31,3,.6) 40%,rgba(7,31,3,.06) 72%,transparent 100%),
    linear-gradient(rgba(7,31,3,.3),transparent 26%);
}

/* Ações sociais: fachada como plano de fundo */
#acoes{
  background:
    linear-gradient(rgba(7,28,3,.88),rgba(9,36,5,.93)),
    url('../img/fachada.webp') center 32%/cover no-repeat,
    var(--floresta-2);
}

/* Mural com movimento contínuo */
.mural-linha{overflow:hidden;margin-bottom:1.15rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.mural-trilho{display:flex;gap:1.15rem;width:max-content;padding:.25rem .1rem}
.mural-trilho.anima{animation:mural 60s linear infinite}
.mural-linha[data-dir="dir"] .mural-trilho.anima{animation-direction:reverse}
.mural-linha:hover .mural-trilho.anima{animation-play-state:paused}
@keyframes mural{to{transform:translateX(-50%)}}
.mural .acaox{min-width:370px;max-width:370px;background:rgba(9,30,4,.55)}
.mural .acaox:hover{background:rgba(9,30,4,.75)}

/* Mobile: linhas viram trilhos de arrasto e o hero mostra o rosto dela */
@media (max-width:820px){
  #hero{padding-bottom:7.5rem;min-height:86svh}
  .hero-bg{object-position:76% 24%}
  #hero::before{
    background:
      linear-gradient(rgba(7,31,3,.34),transparent 24%,transparent 40%,rgba(7,31,3,.72) 66%,rgba(7,31,3,.96) 100%);
  }
  .hero-ia{bottom:3.6rem}
  .mural-linha{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-mask-image:none;mask-image:none}
  .mural-linha::-webkit-scrollbar{display:none}
  .mural-trilho{animation:none!important}
  .mural .acaox{min-width:82vw;max-width:82vw;scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){
  .mural-trilho.anima{animation:none}
}

/* v4.4.1 — hero cabe na tela (barra das RAs inteira visível) e selo de IA mais alto */
#hero{min-height:100svh;padding:6.2rem 0 8rem}
#hero .hero-conteudo h1{margin:1.1rem 0 1.3rem}
.hero-conteudo .hero-cred{margin-bottom:1.7rem}
.hero-ia{bottom:5.1rem;right:1.2rem;color:rgba(255,255,255,.6)}
@media (max-width:820px){
  #hero{min-height:100svh;padding:5.8rem 0 7.2rem}
  .hero-ia{bottom:4.5rem;right:.9rem}
}

/* v4.5.1 — pente fino de posicionamento */
/* 1) linha da trajetória alinhada ao centro exato das bolinhas */
.tlx-nav::before{top:13px}
@media (max-width:820px){
  /* 2) logo perfeitamente centralizado entre menu e player */
  #hdr .wrap{grid-template-columns:1fr auto 1fr}
  #ham{grid-column:1;justify-self:start}
  #hdr .logo{grid-column:2}
  .nav-d{grid-column:3;justify-self:end}
  /* 3) selo de IA à esquerda para não encostar no coração do WhatsApp */
  .hero-ia{left:.9rem;right:auto}
}

/* v4.5.2 — header mobile: player compacto para o logo centralizar de verdade */
@media (max-width:820px){
  #hdr .logo img{height:29px}
  #hdr-player{font-size:.67rem;padding:.42rem .75rem;gap:.35rem}
  #hdr-player .eq{height:9px}
}

/* v4.5.3 — logo do header mobile centralizado por posicionamento absoluto */
@media (max-width:820px){
  #hdr .wrap{position:relative}
  #hdr .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);grid-column:auto}
}

/* v4.5.4 — sem sobreposição: logo um ponto menor e, em telas muito
   estreitas, o player mostra apenas o ícone */
@media (max-width:820px){
  #hdr .logo img{height:26px}
}
@media (max-width:374px){
  #hdr-player .hp-tit{display:none}
  #hdr-player{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  #hdr-player .eq{display:none!important}
}

/* v4.5.5 — ajuste fino final do header mobile (folga garantida) */
@media (max-width:820px){
  #hdr .logo img{height:24px}
  #hdr-player{font-size:.64rem;padding:.4rem .68rem}
}

/* v4.5.6 — rótulo curto do player nas larguras 341–413px */
.hp-tit2{display:none}
@media (max-width:413px){
  #hdr-player .hp-tit{display:none}
  #hdr-player .hp-tit2{display:inline;font-size:.64rem;white-space:nowrap}
  #hdr-player .eq{display:none!important}
  #hdr .logo img{height:22px}
}
@media (max-width:340px){
  #hdr-player .hp-tit2{display:none}
  #hdr-player{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
}

/* ============================================================
   v4.7 — fundo novo das ações, ícones em bolha, X fixo no
   modal, transições fluidas e dobras (seções) uniformes
   ============================================================ */

/* Fundo novo da seção de ações */
#acoes{
  background:
    linear-gradient(rgba(7,28,3,.9),rgba(9,36,5,.94)),
    url('../img/acoes-fundo.webp') center 40%/cover no-repeat,
    var(--floresta-2);
}

/* Ícone em bolha nos cards (referência) */
.acaox-ico{
  width:62px;height:62px;border-radius:50%;flex-shrink:0;
  background:var(--areia);color:var(--verde);font-size:1.45rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  position:relative;z-index:1;margin-bottom:1rem;
  border:2px solid rgba(226,179,60,.55);
}

/* X do modal sempre visível durante a rolagem */
#m-x{
  position:sticky;top:0;float:right;margin:-1.2rem -1rem 0 0;
  width:42px;height:42px;border-radius:50%;
  background:var(--areia);box-shadow:0 4px 14px rgba(13,57,7,.25);
  display:flex;align-items:center;justify-content:center;z-index:10;
  border:1px solid var(--linha);
}
#m-x:hover{background:var(--ouro);color:var(--floresta)}

/* Transições mais fluidas */
.rv,.rl,.rr{transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv{transform:translateY(20px)}
.rl{transform:translateX(-24px)}
.rr{transform:translateX(24px)}
#modal{transition:opacity .4s ease,visibility .4s ease}
.m-box{transition:transform .5s cubic-bezier(.22,1,.36,1)}
#modal.on .m-box{transform:none}
.tlx-slide{transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1),visibility .65s}
.mural-trilho.anima{will-change:transform}
.dep-trilho,.marquee{will-change:transform}
.acaox,.band-card,.rede-card,.btn,.tlx-seta{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,background .35s ease,border-color .35s ease,color .35s ease}

/* Dobras uniformes: mesmo respiro em todas as seções */
#quem,#trajetoria,#acoes,#bandeiras,#midia,#depoimentos,#redes{padding:5.5rem 0}
.sec-cab,.sec-cab.centro{margin-bottom:2.8rem}
@media (max-width:820px){
  #quem,#trajetoria,#acoes,#bandeiras,#midia,#depoimentos,#redes{padding:4rem 0}
  .sec-cab,.sec-cab.centro{margin-bottom:2.2rem}
  .bm-item{font-size:.62rem}
  .bm-item i{font-size:1.05rem}
}

/* ============================================================
   v4.8 — capa mais distante, header maior, barra das RAs
   visível, mural em linha única sempre em movimento, botão do
   WhatsApp maior, painel de canais, bandeiras compactas
   ============================================================ */

/* Capa: rosto mais distante e elegante */
.hero-bg{transform:scale(.94);transform-origin:60% 22%;object-position:center 24%}
#hero{background:#0A2703}
@media (max-width:820px){
  #hero{min-height:74svh;padding:5.4rem 0 6.8rem}
  .hero-bg{transform:none;object-position:72% 14%}
  #hero .hero-conteudo h1{font-size:clamp(1.9rem,7.4vw,2.5rem)}
  .hero-cred span{font-size:.8rem;padding:.42rem .85rem}
}

/* Header mais alto (PC e mobile) */
#hdr{padding:1.45rem 0}
#hdr.sc{padding:1rem 0}
#hdr .logo img{height:50px}
@media (max-width:820px){
  #hdr{padding:1rem 0}
  #hdr.sc{padding:1rem 0}
  #hdr .logo img{height:24px}
}
@media (max-width:413px){
  #hdr .logo img{height:24px}
}

/* Mural: uma linha só, sempre em movimento */
.mural-trilho.anima{animation:mural 80s linear infinite}
@media (max-width:820px){
  .mural-linha{overflow:hidden;scroll-snap-type:none}
  .mural-trilho{animation:mural 80s linear infinite!important;width:max-content}
  .mural .acaox{min-width:300px;max-width:300px}
  .mural-linha{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}

/* Botão do WhatsApp maior */
#zap-f{width:70px;height:70px;font-size:2rem}
@media (max-width:820px){
  #zap-f{width:62px;height:62px;font-size:1.75rem;bottom:88px}
}

/* Painel de canais (referência) */
.canais-painel{
  background:linear-gradient(165deg,var(--verde) 0%,var(--floresta) 90%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;padding:1.6rem 1.8rem;
  display:flex;flex-direction:column;gap:.4rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.canal-item{
  display:flex;align-items:center;gap:1.1rem;
  padding:.75rem .4rem;border-radius:16px;transition:var(--tr);
}
.canal-item:hover{background:rgba(255,255,255,.08);padding-left:.9rem}
.canal-ico{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--ouro);color:var(--floresta);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
}
.canal-item b{color:#fff;font-size:1.08rem;font-weight:600}

/* Bandeiras compactas e proporcionais */
.band-grid{grid-template-columns:repeat(4,1fr);gap:1rem}
.band-card{padding:1.35rem 1.25rem;gap:.55rem;border-radius:16px}
.band-ico{width:42px;height:42px;border-radius:12px;font-size:1.05rem}
.band-card h3{font-size:1.02rem}
.band-card p{font-size:.83rem}
.band-card .mais{font-size:.82rem}
@media (max-width:1024px){.band-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .band-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .band-card{padding:1.05rem .95rem}
  .band-card p{display:none}
  .band-ico{width:38px;height:38px;font-size:.95rem}
  .band-card h3{font-size:.9rem}
}

/* ============================================================
   v4.9 — seção termina na barra das RAs, bandeiras em acordeão
   elegante (PC e mobile), painel de canais nas Redes Sociais
   ============================================================ */

/* Sem sobra depois da barra das RAs */
#hero{padding-bottom:6.2rem}
#quem{padding-top:4.2rem}
@media (max-width:820px){
  #hero{padding-bottom:5rem}
  #quem{padding-top:2.6rem}
  .hero-ia{bottom:3.4rem}
}

/* Bandeiras: acordeão premium */
.band-acc{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem}
.band-it{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;overflow:hidden;
  backdrop-filter:blur(8px);transition:border-color .35s ease,background .35s ease;
}
.band-it:hover{border-color:rgba(226,179,60,.45)}
.band-it.aberto{background:rgba(255,255,255,.08);border-color:var(--ouro)}
.band-cab{
  width:100%;display:flex;align-items:center;gap:1.1rem;
  padding:1.15rem 1.4rem;text-align:left;color:#fff;
}
.band-cab .band-ico{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;font-size:1.1rem;
  background:linear-gradient(135deg,var(--verde),var(--verde-claro));color:#fff;
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
}
.band-it.aberto .band-ico{background:var(--ouro);color:var(--floresta)}
.band-cab h3{flex:1;font-size:1.12rem;color:#fff;font-weight:700}
.band-seta{color:var(--ouro);font-size:.85rem;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.band-it.aberto .band-seta{transform:rotate(180deg)}
.band-corpo{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1);
}
.band-it.aberto .band-corpo{grid-template-rows:1fr}
.band-miolo{overflow:hidden;padding:0 1.5rem}
.band-it.aberto .band-miolo{padding:0 1.5rem 1.5rem}
.band-miolo p{color:rgba(255,255,255,.78);font-size:.96rem;margin-bottom:1.1rem}
.band-miolo h4{
  font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem;
}
.band-miolo h4::before{content:'';width:24px;height:2px;background:var(--ouro)}
.band-pris li{
  position:relative;padding:.42rem 0 .42rem 1.5rem;
  color:rgba(255,255,255,.85);font-size:.92rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.band-pris li::before{content:'✦';position:absolute;left:.1rem;top:.55rem;color:var(--ouro);font-size:.7rem}
.band-pris li:last-child{border-bottom:none}
@media (max-width:820px){
  .band-cab{padding:1rem 1.05rem;gap:.85rem}
  .band-cab h3{font-size:1rem}
  .band-cab .band-ico{width:40px;height:40px;font-size:1rem}
  .band-miolo{padding:0 1.1rem}
  .band-it.aberto .band-miolo{padding:0 1.1rem 1.2rem}
}

/* v4.9.1 — capa mobile fecha rente à barra das RAs */
@media (max-width:820px){
  #hero{padding-bottom:3.3rem;min-height:70svh}
  .hero-ia{bottom:3rem;font-size:.58rem}
  #hero::before{
    background:
      linear-gradient(rgba(7,31,3,.34),transparent 24%,transparent 42%,rgba(7,31,3,.68) 68%,rgba(7,31,3,.88) 100%);
  }
}

/* v4.9.2 — selo de IA no topo da capa no mobile (rodapé ficou justo) */
@media (max-width:820px){
  .hero-ia{top:4.5rem;bottom:auto;left:auto;right:.8rem}
}

/* v5.0 — capa mobile em retrato cobrindo a 1ª tela inteira até a barra */
@media (max-width:820px){
  #hero{min-height:100svh;padding-bottom:5.4rem}
  .hero-bg{object-position:center top;transform:none}
  #hero::before{
    background:
      linear-gradient(rgba(7,31,3,.28),transparent 26%,transparent 44%,rgba(7,31,3,.62) 68%,rgba(7,31,3,.85) 100%);
  }
}

/* v5.0.1 — mobile ainda mais rente: capa→barra→História sem vãos */
@media (max-width:820px){
  #hero{padding-bottom:3.9rem}
  #quem{padding-top:1.4rem}
  #quem .sec-cab{margin-bottom:1.6rem}
}

/* v5.1 — mobile: ela mais distante na capa e barra das RAs mais fina */
@media (max-width:820px){
  .hero-bg{object-position:center top}
  #hero::before{
    background:linear-gradient(rgba(7,31,3,.3),transparent 22%,transparent 46%,rgba(7,31,3,.5) 66%,rgba(7,31,3,.78) 100%);
  }
  #hero #valores-faixa{padding:.5rem 0}
  #valores-faixa .marquee span{font-size:.78rem;padding:0 1.1rem}
  #hero{padding-bottom:3.4rem}
  .hero-ia{top:4.2rem;font-size:.55rem}
}

/* v5.1.1 — capa mobile compacta: tudo + barra das RAs cabem na 1ª tela */
@media (max-width:820px){
  #hero{padding-top:4.2rem;padding-bottom:3.2rem}
  #hero .hero-conteudo h1{font-size:clamp(1.75rem,6.8vw,2.3rem);margin:.8rem 0 1rem}
  .hero-tag{font-size:.72rem;padding:.42rem .95rem}
  .hero-cred{gap:.45rem;margin-bottom:1.3rem}
  .hero-cred span{font-size:.76rem;padding:.38rem .78rem}
  .hero-cta .btn{padding:.85rem 1.5rem;font-size:.92rem}
}

/* v5.1.3 — botão da caminhada um pouco mais alto dentro da 1ª seção */
@media (max-width:820px){
  #hero{padding-bottom:4.8rem}
}

/* ============================================================
   v5.2 — CTA mais alto, logo maior, bandeiras com animações
   elegantes (borda viva, cascata de prioridades, entrada em série)
   ============================================================ */

/* CTA mais alto no mobile */
@media (max-width:820px){
  #hero{padding-bottom:6rem}
}

/* Logo maior no cabeçalho */
#hdr .logo img{height:54px}
@media (max-width:820px){
  #hdr .logo img{height:28px}
}
@media (max-width:480px){
  #hdr-player .hp-tit{display:none}
  #hdr-player .hp-tit2{display:inline;font-size:.64rem;white-space:nowrap}
  #hdr-player .eq{display:none!important}
  #hdr .logo img{height:28px}
}

/* Bandeiras: entrada em cascata */
.band-acc .band-it{transition-property:opacity,transform,border-color,background;transition-duration:.7s}
.band-acc .band-it:nth-child(1){transition-delay:.02s}
.band-acc .band-it:nth-child(2){transition-delay:.07s}
.band-acc .band-it:nth-child(3){transition-delay:.12s}
.band-acc .band-it:nth-child(4){transition-delay:.17s}
.band-acc .band-it:nth-child(5){transition-delay:.22s}
.band-acc .band-it:nth-child(6){transition-delay:.27s}
.band-acc .band-it:nth-child(7){transition-delay:.32s}
.band-acc .band-it:nth-child(8){transition-delay:.37s}
.band-acc .band-it:nth-child(9){transition-delay:.42s}
.band-acc .band-it:nth-child(10){transition-delay:.47s}
.band-acc .band-it:nth-child(11){transition-delay:.52s}
.band-acc .band-it:nth-child(12){transition-delay:.57s}
.band-acc .band-it.vs{transition-delay:inherit}

/* Bandeira aberta: borda dourada viva (gradiente girando) */
.band-it{position:relative}
.band-it.aberto{border-color:transparent;background:rgba(255,255,255,.07)}
.band-it.aberto::before{
  content:'';position:absolute;inset:0;border-radius:18px;padding:1.5px;
  background:conic-gradient(from var(--giro,0deg),
    rgba(226,179,60,.15),var(--ouro),var(--lima),rgba(226,179,60,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:giraBorda 4.5s linear infinite;pointer-events:none;
}
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes giraBorda{to{--giro:360deg}}

/* Ícone da bandeira aberta pulsa suave; hover balança */
.band-cab:hover .band-ico{transform:rotate(-6deg) scale(1.06)}
.band-it.aberto .band-ico{animation:brilhoIco 2.6s ease-in-out infinite}
@keyframes brilhoIco{
  0%,100%{box-shadow:0 0 0 0 rgba(226,179,60,.45)}
  50%{box-shadow:0 0 0 9px rgba(226,179,60,0)}
}

/* Prioridades entram em cascata ao abrir */
.band-pris li{opacity:0;transform:translateX(-10px)}
.band-it.aberto .band-pris li{animation:entraPri .5s cubic-bezier(.22,1,.36,1) both}
.band-it.aberto .band-pris li:nth-child(1){animation-delay:.18s}
.band-it.aberto .band-pris li:nth-child(2){animation-delay:.26s}
.band-it.aberto .band-pris li:nth-child(3){animation-delay:.34s}
.band-it.aberto .band-pris li:nth-child(4){animation-delay:.42s}
.band-it.aberto .band-pris li:nth-child(5){animation-delay:.50s}
.band-it.aberto .band-pris li:nth-child(6){animation-delay:.58s}
.band-it.aberto .band-pris li:nth-child(7){animation-delay:.66s}
@keyframes entraPri{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .band-it.aberto::before{animation:none}
  .band-it.aberto .band-ico{animation:none}
  .band-pris li{opacity:1;transform:none;animation:none!important}
}

/* v5.2.1 — CTA da caminhada mais alto ainda no mobile */
@media (max-width:820px){
  #hero{padding-bottom:7.4rem}
}

/* ============================================================
   v5.3 — CTA mais alto, bandeiras vivas: fundo em ondas de
   seda, brilho varrendo os cards, ícones flutuando, seta pulsando
   ============================================================ */
@media (max-width:820px){
  #hero{padding-bottom:8.8rem}
}

/* Fundo da seção com ondas suaves (tecido de bandeira) */
#bandeiras{position:relative;overflow:hidden}
#bandeiras::after{
  content:'';position:absolute;inset:-12%;pointer-events:none;z-index:0;
  background:
    radial-gradient(55% 38% at 18% 28%, rgba(159,211,53,.09), transparent 70%),
    radial-gradient(48% 34% at 82% 72%, rgba(226,179,60,.10), transparent 70%),
    radial-gradient(40% 30% at 55% 45%, rgba(255,255,255,.035), transparent 70%);
  animation:ondas 13s ease-in-out infinite alternate;
}
@keyframes ondas{to{transform:translate3d(3.5%,-2.5%,0) scale(1.07) rotate(1.2deg)}}
#bandeiras .wrap{position:relative;z-index:1}

/* Brilho dourado varrendo cada bandeira (convite ao clique) */
.band-it::after{
  content:'';position:absolute;top:0;bottom:0;left:-65%;width:42%;z-index:0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.08) 45%,rgba(226,179,60,.18) 55%,transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:varre 8.5s ease-in-out infinite;
}
.band-acc .band-it:nth-child(2)::after{animation-delay:.7s}
.band-acc .band-it:nth-child(3)::after{animation-delay:1.4s}
.band-acc .band-it:nth-child(4)::after{animation-delay:2.1s}
.band-acc .band-it:nth-child(5)::after{animation-delay:2.8s}
.band-acc .band-it:nth-child(6)::after{animation-delay:3.5s}
.band-acc .band-it:nth-child(7)::after{animation-delay:4.2s}
.band-acc .band-it:nth-child(8)::after{animation-delay:4.9s}
.band-acc .band-it:nth-child(9)::after{animation-delay:5.6s}
.band-acc .band-it:nth-child(10)::after{animation-delay:6.3s}
.band-acc .band-it:nth-child(11)::after{animation-delay:7s}
.band-acc .band-it:nth-child(12)::after{animation-delay:7.7s}
@keyframes varre{0%,74%{left:-65%}90%,100%{left:120%}}
.band-it.aberto::after{content:none}

/* Ícones flutuando suavemente */
.band-cab .band-ico{animation:flutua 4s ease-in-out infinite}
.band-acc .band-it:nth-child(even) .band-ico{animation-delay:1.2s}
.band-acc .band-it:nth-child(3n) .band-ico{animation-delay:2.1s}
@keyframes flutua{50%{transform:translateY(-3px)}}

/* Seta convidando ao toque */
.band-it:not(.aberto) .band-seta{animation:chama 2.6s ease-in-out infinite}
@keyframes chama{50%{transform:translateY(3px);opacity:.55}}
.band-it.aberto .band-seta{animation:none}

@media (prefers-reduced-motion:reduce){
  #bandeiras::after,.band-it::after{animation:none}
  .band-cab .band-ico,.band-seta{animation:none!important}
}

/* v5.3.1 — CTA um pouco mais para baixo no mobile */
@media (max-width:820px){
  #hero{padding-bottom:7rem}
}

/* v5.4 — capa sem quebra na direita (PC) e painel de redes compacto */
@media (min-width:821px){
  .hero-bg{transform:none;object-position:center 26%}
}

.canais-painel{max-width:620px;margin-inline:auto;padding:1.15rem 1.3rem;gap:.15rem}
.canal-item{padding:.55rem .5rem;gap:.9rem;border-radius:13px}
.canal-ico{width:42px;height:42px;font-size:1.05rem}
.canal-item b{font-size:.98rem}
@media (max-width:820px){
  .canais-painel{max-width:100%;padding:1rem 1.05rem}
  .canal-ico{width:40px;height:40px;font-size:1rem}
  .canal-item b{font-size:.94rem}
}

/* v5.5 — header do PC ocupando a linha inteira + ícone de som criativo */
@media (min-width:821px){
  #hdr .wrap{width:min(1560px,94%)}
}

/* Nota musical balançando no botão de som (parada) */
#hdr-player #hp-ico.fa-music{
  animation:balanca 2.6s ease-in-out infinite;
  transform-origin:50% 80%;
}
@keyframes balanca{
  0%,100%{transform:rotate(-10deg)}
  50%{transform:rotate(12deg)}
}
/* anéis de som irradiando do botão (convite) */
#hdr-player{position:relative}
#hdr-player:not(.tocando)::after{
  content:'';position:absolute;inset:-3px;border-radius:999px;
  border:1.5px solid rgba(226,179,60,.55);
  animation:irradia 2.6s ease-out infinite;pointer-events:none;
}
@keyframes irradia{
  0%{opacity:.8;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.22)}
}
@media (prefers-reduced-motion:reduce){
  #hdr-player::after,#hdr-player #hp-ico.fa-music{animation:none}
}

/* v5.5.1 — barra das RAs logo abaixo do botão (posição da seta) */
@media (max-width:820px){
  #hero{padding-bottom:4.4rem}
}

/* ============================================================
   v5.6 — rodapé estilo referência (PC), barra de rolagem
   dourada, barra das RAs na posição da seta
   ============================================================ */

/* Barra de rolagem dourada (PC) */
html{scrollbar-color:var(--ouro) #0A2703;scrollbar-width:thin}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0A2703}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--ouro),#c99a2e);border-radius:8px;border:2px solid #0A2703}
::-webkit-scrollbar-thumb:hover{background:var(--ouro-claro)}

/* Barra das RAs na posição da seta */
@media (max-width:820px){
  #hero{padding-bottom:4rem}
}

/* Rodapé estilo referência, somente PC */
.rn-logo-b,.rn-frase,.rn-links,.rn-foto,.rn-redes h3{display:none}
.rn-logo-p{display:none}
@media (min-width:821px){
  #redes{background:linear-gradient(180deg,#E9BC49 0%,var(--ouro) 100%);padding:4.2rem 0 3.4rem}
  #redes .sec-cab{display:none}
  .redes-nik{
    display:grid;grid-template-columns:1.05fr .7fr .9fr 1.15fr;
    gap:2.2rem;align-items:center;
  }
  .rn-marca{display:flex;flex-direction:column;gap:.4rem}
  .rn-logo-p{display:block;width:min(240px,90%)}
  .rn-frase{
    display:block;font-family:"Caveat",cursive;font-weight:700;
    font-size:2.3rem;line-height:1.05;color:var(--floresta);
    transform:rotate(-4deg);margin-top:.6rem;
  }
  .rn-links{display:flex;flex-direction:column;gap:0;align-self:center}
  .rn-links a{
    color:var(--floresta);font-weight:800;font-size:.95rem;
    letter-spacing:.08em;text-transform:uppercase;
    padding:.85rem .1rem;border-bottom:2px solid rgba(13,57,7,.45);
    transition:var(--tr);
  }
  .rn-links a:hover{padding-left:.6rem;border-color:var(--floresta)}
  .rn-foto{display:flex;align-items:flex-end;justify-content:center;align-self:end;margin-bottom:-3.4rem}
  .rn-foto img{
    width:min(300px,100%);
    filter:drop-shadow(0 18px 40px rgba(13,57,7,.35));
  }
  .rn-redes{display:block}
  .rn-redes h3{
    display:block;color:var(--floresta);font-size:1.5rem;font-weight:800;
    margin-bottom:.9rem;
  }
  #redes .canais-painel{margin:0;max-width:100%;box-shadow:0 24px 55px rgba(13,57,7,.3)}
}
@media (max-width:820px){
  .redes-nik{display:block}
  .rn-marca,.rn-links,.rn-foto{display:none}
}

/* v5.6.1 — rodapé sem a foto recortada (grade em 3 colunas) */
@media (min-width:821px){
  .redes-nik{grid-template-columns:1.1fr .75fr 1.25fr;gap:3rem}
}

/* ============================================================
   v5.7 — laterais aproveitadas, fotos mais claras, rodapé
   mais estreito, respiros conferidos
   ============================================================ */

/* Conteúdo ocupando melhor as laterais */
.wrap{width:min(1440px,94%)}

/* Fotos mais claras (capa e retrato) */
.hero-bg{filter:brightness(1.09) saturate(1.06)}
#hero::before{
  background:
    linear-gradient(90deg,rgba(7,31,3,.82) 0%,rgba(7,31,3,.5) 40%,rgba(7,31,3,.04) 72%,transparent 100%),
    linear-gradient(rgba(7,31,3,.22),transparent 26%);
}
@media (max-width:820px){
  #hero::before{
    background:linear-gradient(rgba(7,31,3,.22),transparent 22%,transparent 48%,rgba(7,31,3,.42) 66%,rgba(7,31,3,.7) 100%);
  }
}
.quem-foto img{filter:brightness(1.06) saturate(1.03)}

/* Rodapé dourado mais estreito */
@media (min-width:821px){
  .redes-nik{max-width:1040px;margin-inline:auto}
}

/* Respiros coerentes com o texto */
.sec-cab{max-width:720px}
.sec-cab p{font-size:1.02rem}
.tlx{max-width:1000px}
.band-acc{max-width:860px}
.dep-card{width:380px}

/* ============================================================
   v5.8 — verde mais leve em todo o site, ícones das bandeiras
   interativos (giro 3D, ondulação), frase nova no rodapé
   ============================================================ */

/* Paleta mais leve e viva */
:root{
  --floresta:#17512B;
  --floresta-2:#1B5E33;
}
#hero{background:#164C29}
footer{background:#123F21}
::-webkit-scrollbar-track{background:#123F21}
html{scrollbar-color:var(--ouro) #123F21}
#hero #valores-faixa{background:rgba(18,63,33,.55)}

/* Overlays das fotos mais leves */
#trajetoria{
  background:
    linear-gradient(rgba(18,58,30,.72),rgba(20,70,37,.85)),
    url('../img/fundo-terco.webp') center 20%/cover no-repeat scroll,
    var(--floresta);
}
#acoes{
  background:
    linear-gradient(rgba(16,52,27,.82),rgba(20,70,37,.88)),
    url('../img/acoes-fundo.webp') center 40%/cover no-repeat,
    var(--floresta-2);
}
#hero::before{
  background:
    linear-gradient(90deg,rgba(10,40,20,.78) 0%,rgba(10,40,20,.46) 40%,rgba(10,40,20,.03) 72%,transparent 100%),
    linear-gradient(rgba(10,40,20,.2),transparent 26%);
}
@media (max-width:820px){
  #hero::before{
    background:linear-gradient(rgba(10,40,20,.2),transparent 22%,transparent 48%,rgba(10,40,20,.4) 66%,rgba(12,45,23,.68) 100%);
  }
}
.mural .acaox{background:rgba(16,50,26,.5)}
.mural .acaox:hover{background:rgba(16,50,26,.72)}
.tlx-palco .tlx-slide{background:rgba(15,48,25,.5)}

/* Ícones das bandeiras: giro 3D no hover + ondulação dourada */
.band-cab .band-ico{
  transition:transform .7s cubic-bezier(.22,1,.36,1),background .4s ease,color .4s ease;
  position:relative;
}
.band-cab:hover .band-ico{transform:rotateY(360deg) scale(1.08);background:var(--ouro);color:var(--floresta)}
.band-cab .band-ico::after{
  content:'';position:absolute;inset:-4px;border-radius:inherit;
  border:2px solid rgba(226,179,60,.7);opacity:0;transform:scale(.9);
}
.band-cab:hover .band-ico::after{animation:ondula .8s ease-out}
@keyframes ondula{
  0%{opacity:.9;transform:scale(.92)}
  100%{opacity:0;transform:scale(1.45)}
}
.band-it.aberto .band-ico{transform:rotateY(360deg)}
@media (prefers-reduced-motion:reduce){
  .band-cab:hover .band-ico{transform:none}
  .band-cab .band-ico::after{animation:none!important}
}

/* ============================================================
   v5.9 — seções sem foto em BRANCO (alternância clara/escura)
   ============================================================ */

/* Fundos claros nas seções sem imagem */
#quem,#bandeiras,#midia{background:#FBFAF4}
#depoimentos{background:var(--areia)}

/* Textos dessas seções no tom escuro */
#quem .sec-cab h2,#bandeiras .sec-cab h2,#midia .sec-cab h2,#depoimentos .sec-cab h2{color:var(--tinta)}
#quem .sec-cab h2 .destaque,#bandeiras .sec-cab h2 .destaque,#midia .sec-cab h2 .destaque-ouro,#depoimentos .sec-cab h2 .destaque{color:var(--verde)}
#quem .etiqueta,#bandeiras .etiqueta,#midia .etiqueta,#depoimentos .etiqueta{color:var(--verde)}
#quem .sec-cab p,#bandeiras .sec-cab p,#midia .sec-cab p,#depoimentos .sec-cab p{color:var(--tinta-2)}
.quem-txt p{color:var(--tinta-2)}
.quem-txt strong{color:var(--verde)}

/* Bandeiras: acordeão claro */
#bandeiras::after{opacity:.55}
.band-it{background:#fff;border-color:var(--linha);backdrop-filter:none}
.band-it:hover{border-color:rgba(226,179,60,.6)}
.band-it.aberto{background:#fff}
.band-cab h3{color:var(--tinta)}
.band-cab{color:var(--tinta)}
.band-miolo p{color:var(--tinta-2)}
.band-miolo h4{color:#9C7514}
.band-pris li{color:var(--tinta);border-bottom-color:var(--linha)}
.band-it::after{ /* brilho de varredura visível no claro */
  background:linear-gradient(105deg,transparent,rgba(226,179,60,.14) 45%,rgba(226,179,60,.26) 55%,transparent);
}
.band-it{box-shadow:0 6px 20px rgba(13,57,7,.06)}
.band-it.aberto{box-shadow:0 14px 36px rgba(13,57,7,.12)}

/* Mídia: componentes sobre o claro */
.video-box{border-color:var(--linha);background:var(--floresta)}
.midia-flickr{color:var(--tinta-2)}
.midia-flickr a{color:var(--verde);border-bottom-color:rgba(30,107,16,.4)}
#midia .tlx-seta{border-color:rgba(23,81,43,.45);color:var(--verde)}
#midia .tlx-seta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--floresta)}
.ig-card{border-color:var(--linha)}

/* Depoimentos: cartões com contorno suave */
.dep-card{border-color:var(--linha);box-shadow:0 10px 30px rgba(13,57,7,.08)}

/* Redes: branco no mobile (no PC segue o dourado) */
@media (max-width:820px){
  #redes{background:#FBFAF4}
  #redes .sec-cab h2{color:var(--tinta)}
  #redes .sec-cab h2 .destaque{color:var(--verde)}
  #redes .etiqueta{color:var(--verde)}
  #redes .sec-cab p{color:var(--tinta-2)}
}

/* ============================================================
   v6.0 — trajetória com o rosto centralizado (mobile), Ações
   Sociais em branco, Redes de volta ao verde no mobile
   ============================================================ */

/* Trajetória: rosto dela centralizado no mobile */
@media (max-width:820px){
  #trajetoria{
    background:
      linear-gradient(rgba(18,58,30,.7),rgba(20,70,37,.84)),
      url('../img/fundo-terco.webp') 63% 22%/cover no-repeat scroll,
      var(--floresta);
  }
}

/* Ações Sociais em branco */
#acoes{background:#FBFAF4}
#acoes .sec-cab h2{color:var(--tinta)}
#acoes .sec-cab h2 .destaque{color:var(--verde)}
#acoes .etiqueta{color:var(--verde)}
#acoes .sec-cab p{color:var(--tinta-2)}
.mural .acaox{
  background:#fff;border:1px solid var(--linha);
  box-shadow:0 8px 24px rgba(13,57,7,.07);backdrop-filter:none;
}
.mural .acaox:hover{background:#fff;border-color:rgba(226,179,60,.6);box-shadow:0 16px 40px rgba(13,57,7,.13)}
.acaox h3{color:var(--tinta)}
.acaox p{color:var(--tinta-2)}
.acaox strong{color:var(--verde)}
.acaox .acao-meta{color:var(--tinta-2)}
.acaox-sub{color:#9C7514}
.acaox::after{color:rgba(226,179,60,.3)}
.acoesx-ctrl .tlx-seta{border-color:rgba(23,81,43,.45);color:var(--verde)}
.acoesx-ctrl .tlx-seta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--floresta)}

/* Redes Sociais de volta ao verde no mobile */
@media (max-width:820px){
  #redes{background:var(--floresta)}
  #redes .sec-cab h2{color:#fff}
  #redes .sec-cab h2 .destaque{color:var(--ouro)}
  #redes .etiqueta{color:#fff}
  #redes .sec-cab p{color:rgba(255,255,255,.75)}
}

/* v5.9.1 — rosto centralizado no fundo da Trajetória (mobile) e
   Redes Sociais de volta ao verde no mobile (só ela e a hero escuras) */
@media (max-width:820px){
  #trajetoria{
    background:
      linear-gradient(rgba(18,58,30,.72),rgba(20,70,37,.85)),
      url('../img/fundo-terco.webp') 67% 22%/cover no-repeat scroll,
      var(--floresta);
  }
  #redes{background:var(--floresta-2)}
  #redes .sec-cab h2{color:#fff}
  #redes .sec-cab h2 .destaque{color:var(--ouro)}
  #redes .etiqueta{color:#fff}
  #redes .sec-cab p{color:rgba(255,255,255,.75)}
}

/* v6.0.1 — Ações Sociais DE VOLTA com a imagem de fundo
   (cards brancos por cima, títulos claros) */
#acoes{
  background:
    linear-gradient(rgba(16,52,27,.84),rgba(20,70,37,.9)),
    url('../img/acoes-fundo.webp') center 40%/cover no-repeat,
    var(--floresta-2)!important;
}
#acoes .sec-cab h2{color:#fff}
#acoes .sec-cab h2 .destaque{color:var(--ouro)}
#acoes .etiqueta{color:#fff}
#acoes .sec-cab p{color:rgba(255,255,255,.78)}
.acoesx-ctrl .tlx-seta{border-color:rgba(255,255,255,.4);color:#fff}
.acoesx-ctrl .tlx-seta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--floresta)}
@media (max-width:820px){
  #acoes{
    background:
      linear-gradient(rgba(16,52,27,.84),rgba(20,70,37,.9)),
      url('../img/acoes-fundo.webp') center 40%/cover no-repeat scroll,
      var(--floresta-2)!important;
  }
}

/* ============================================================
   v6.1 — Ações Sociais com a foto de fundo de volta; bandeiras
   nos quadradinhos, refinados para o tema claro
   ============================================================ */

/* Ações Sociais: foto de fundo restaurada (cards brancos por cima) */
#acoes{
  background:
    linear-gradient(rgba(16,52,27,.84),rgba(20,70,37,.9)),
    url('../img/acoes-fundo.webp') center 40%/cover no-repeat,
    var(--floresta-2)!important;
}
#acoes .sec-cab h2{color:#fff}
#acoes .sec-cab h2 .destaque{color:var(--ouro)}
#acoes .etiqueta{color:#fff}
#acoes .sec-cab p{color:rgba(255,255,255,.8)}

/* Bandeiras: grade de quadradinhos profissional (tema claro) */
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.band-card{
  background:#fff;border:1px solid var(--linha);border-radius:18px;
  padding:1.5rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;
  text-align:left;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 6px 20px rgba(13,57,7,.06);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .35s ease;
}
.band-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(13,57,7,.14);border-color:rgba(226,179,60,.6)}
.band-card .band-ico{
  width:46px;height:46px;border-radius:13px;font-size:1.1rem;
  background:linear-gradient(135deg,var(--verde),var(--verde-claro));color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .7s cubic-bezier(.22,1,.36,1),background .4s ease,color .4s ease;
}
.band-card:hover .band-ico{transform:rotateY(360deg);background:var(--ouro);color:var(--floresta)}
.band-card h3{color:var(--tinta);font-size:1.04rem;line-height:1.25}
.band-card p{color:var(--tinta-2);font-size:.84rem;flex:1}
.band-card .mais{color:var(--verde);font-weight:700;font-size:.84rem;display:inline-flex;align-items:center;gap:.45rem;transition:gap .35s ease}
.band-card:hover .mais{gap:.8rem}
.band-card::after{ /* brilho dourado varrendo */
  content:'';position:absolute;top:0;bottom:0;left:-65%;width:42%;
  background:linear-gradient(105deg,transparent,rgba(226,179,60,.13) 45%,rgba(226,179,60,.24) 55%,transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:varre 9s ease-in-out infinite;
}
.band-grid .band-card:nth-child(3n)::after{animation-delay:2.2s}
.band-grid .band-card:nth-child(3n+1)::after{animation-delay:4.4s}
@media (max-width:1024px){.band-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .band-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .band-card{padding:1.1rem 1rem;border-radius:16px}
  .band-card p{display:none}
  .band-card .band-ico{width:42px;height:42px;font-size:1rem}
  .band-card h3{font-size:.92rem}
  .band-card .mais{font-size:.78rem}
}

/* ============================================================
   v6.2 — cor creme da amostra nos fundos claros, Depoimentos
   em verde do site, Redes Sociais em amarelo também no mobile
   ============================================================ */

/* Creme da amostra nas seções claras */
#quem,#bandeiras,#midia{background:#F5F4EC}
@media (max-width:820px){
  #redes{background:linear-gradient(180deg,#E9BC49 0%,var(--ouro) 100%)}
  #redes .sec-cab h2{color:var(--floresta)}
  #redes .sec-cab h2 .destaque{color:#fff}
  #redes .etiqueta{color:var(--floresta)}
  #redes .sec-cab p{color:rgba(13,57,7,.75)}
}

/* Depoimentos: verde do site */
#depoimentos{background:var(--floresta)}
#depoimentos .sec-cab h2{color:#fff}
#depoimentos .sec-cab h2 .destaque{color:var(--ouro)}
#depoimentos .etiqueta{color:#fff}
#depoimentos .sec-cab p{color:rgba(255,255,255,.78)}
.dep-card{border-color:rgba(255,255,255,.1);box-shadow:0 14px 40px rgba(0,0,0,.22)}

/* ============================================================
   v6.3 — bandeiras dinâmicas (holofote + inclinação 3D),
   setas no mural, transições de rolagem naturais
   ============================================================ */
.mural-trilho{animation:none!important}
.mural-ctrl{display:flex;justify-content:center;gap:1rem;margin-top:1.1rem}
.mural-ctrl .tlx-seta{border-color:rgba(255,255,255,.4);color:#fff}
.mural-ctrl .tlx-seta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--floresta)}

/* Holofote dourado seguindo o mouse nos quadradinhos */
.band-card::before{
  content:'';position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(226,179,60,.2),transparent 65%);
  pointer-events:none;
}
.band-card:hover::before{opacity:1}
.band-card > *{position:relative;z-index:1}
.band-card{transform-style:preserve-3d;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .band-card::before{display:none}
}

/* v6.3.1 — frase do rodapé contida e menor que a logo */
@media (min-width:821px){
  .rn-frase{
    font-size:1.55rem;line-height:1.12;max-width:250px;
    transform:rotate(-3deg);margin-top:.55rem;
  }
}

/* v6.3.2 — frase do rodapé em 2 linhas dentro da largura da logo */
@media (min-width:821px){
  .rn-frase{font-size:1.38rem;max-width:242px;white-space:nowrap;line-height:1.15}
  .rn-frase br + *{white-space:nowrap}
}

/* v6.3.3 — marca do rodapé como a referência: logo e frase centralizadas, sem rotação */
@media (min-width:821px){
  .rn-marca{align-items:center;text-align:center}
  .rn-logo-p{width:min(250px,90%)}
  .rn-frase{
    transform:none;max-width:none;white-space:normal;
    font-size:1.6rem;line-height:1.18;text-align:center;margin-top:.45rem;
  }
}

/* v6.3.4 — rodapé ocupando toda a largura da seção (marca à esquerda) */
@media (min-width:821px){
  .redes-nik{
    max-width:none;
    grid-template-columns:auto auto minmax(400px,540px);
    justify-content:space-between;column-gap:3.5rem;
  }
  .rn-marca{justify-self:start}
  .rn-links{justify-self:center}
  .rn-redes{justify-self:end;width:100%}
}