/* ---------------- Topo / navegação ---------------- */
.topo{
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.6rem 5vw; background:var(--preto); color:var(--branco);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.topo-marca{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--branco); font-weight:900; font-style:italic; font-size:1.15rem;
  white-space:nowrap;
}
.topo-marca img{ height:38px; width:38px; border-radius:50%; display:block }
.topo-links{ display:flex; flex-wrap:wrap; gap:.2rem .4rem; justify-content:flex-end }
.topo-links a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--branco); text-decoration:none; font-weight:800; font-size:.95rem;
  padding:.45rem .8rem; border-radius:999px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.topo-links a:hover, .topo-links a:focus-visible{ background:var(--amarelo); color:var(--preto) }
.topo-links a.destaque-nav{ background:var(--vermelho) }
.topo-links a.destaque-nav:hover{ background:var(--amarelo); color:var(--preto) }
/* ==============================================================
   Time Raposinha — identidade oficial da pré-campanha
   Cores e fontes: edite as variáveis abaixo.
   Marcas e texturas: substitua os arquivos em img/ (mesmos nomes).
   ============================================================== */
:root{
  --laranja:  #F58634;
  --telha:    #ED502D;
  --vermelho: #C42025;
  --amarelo:  #FFCF4B;
  --preto:    #141414;
  --papel:    #faf7f2;
  --branco:   #ffffff;
  --fonte: 'Nunito', system-ui, sans-serif; /* rounded, próxima do lettering da marca */
  --sombra: 0 10px 30px rgba(20,20,20,.12);
}

*{ box-sizing:border-box; margin:0 }
html{ scroll-behavior:smooth }

/* ---------------- Pular para o conteúdo (a11y) ---------------- */
.pular-conteudo{
  position:absolute; left:1rem; top:-3rem; z-index:100;
  background:var(--amarelo); color:var(--preto); font-weight:800;
  padding:.7rem 1.2rem; border-radius:8px; text-decoration:none;
  transition:top .15s ease;
}
.pular-conteudo:focus{ top:1rem }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *{ transition:none !important; animation:none !important } }

body{
  font-family:var(--fonte);
  color:var(--preto);
  background:var(--papel);
  line-height:1.6;
}

img{ max-width:100% }

/* ---------------- Botões ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.9rem; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--fonte); font-weight:900; font-style:italic; font-size:1.05rem;
  text-decoration:none; transition:transform .15s ease, background .15s ease;
}
.btn:hover, .btn:focus-visible{ transform:translateY(-2px) }
.btn-principal{ background:var(--amarelo); color:var(--preto); box-shadow:var(--sombra) }
.btn-principal:hover{ background:#ffd968 }
.btn-escuro{ background:var(--preto); color:var(--amarelo) }
.btn-azulado{ background:var(--vermelho); color:var(--branco); justify-content:center; width:100% }
.btn-azulado:hover{ background:var(--telha) }
.btn .icone{ width:1.25em; height:1.25em }
.btn .seta{ font-style:normal; transition:transform .15s ease }
.btn:hover .seta{ transform:translateX(4px) }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 85% 15%, rgba(255,207,75,.18), transparent 60%),
    linear-gradient(150deg, var(--laranja) 0%, var(--telha) 55%, var(--vermelho) 100%);
  color:var(--branco);
  padding:4.5rem 6vw 10rem;
  overflow:hidden;
}
/* pattern "Raposinha" bem sutil por trás, como no manual */
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('../img/pattern-1.png');
  background-size:520px; opacity:.10; pointer-events:none;
}
.hero-conteudo{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr;
  gap:2rem; max-width:1150px; margin:0 auto; align-items:center;
}
.pilula{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);
  padding:.4rem 1rem; border-radius:999px; font-size:.85rem; font-weight:800;
  margin-bottom:1.6rem;
}
.pilula .ponto{
  width:.55rem; height:.55rem; border-radius:50%; background:#7CFFA0;
  box-shadow:0 0 8px #7CFFA0;
}
.hero-marca{ width:min(400px,88%); display:block; margin-bottom:1.4rem;
  filter:drop-shadow(0 6px 18px rgba(20,20,20,.25)) }
.hero h1{
  font-size:clamp(2.4rem,5.2vw,3.8rem); font-weight:900; font-style:italic;
  line-height:1.05; margin-bottom:1rem; letter-spacing:-.01em;
}
.hero h1 em{ color:var(--amarelo); font-style:italic }
.hero-sub{ max-width:32rem; font-size:1.1rem; margin-bottom:2rem; opacity:.95 }
.hero-sub strong{ color:var(--amarelo) }

.hero-foto{ position:relative; display:flex; justify-content:center }
.foto-placeholder{
  width:min(340px,90%); aspect-ratio:3/4; border-radius:18px;
  border:3px dashed rgba(255,255,255,.55);
  display:grid; place-items:center; text-align:center;
  font-weight:800; background:rgba(20,20,20,.18);
}
.foto-placeholder small{ font-weight:400; opacity:.8 }
/* grade de pontos decorativa, como na referência */
.pontos{
  position:absolute; top:-1.5rem; right:-1rem; width:120px; height:120px; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.55) 2.5px, transparent 3px);
  background-size:20px 20px;
}

/* cards sobrepostos na base do hero (fluxo normal, sem truques frágeis) */
.cards-hero{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
  max-width:1150px; margin:-6.5rem auto 0; padding:0 6vw;
}
.card-mini{
  background:var(--branco); color:var(--preto);
  border-radius:16px; padding:1.3rem 1.4rem;
  display:flex; gap:.9rem; align-items:flex-start;
  box-shadow:var(--sombra);
}
.card-mini .card-icone{
  flex:0 0 auto; width:2.7rem; height:2.7rem; border-radius:50%;
  background:var(--vermelho); color:var(--branco);
  display:grid; place-items:center;
}
.card-icone svg{ width:1.4rem; height:1.4rem }
.card-mini h2{ font-size:1rem; font-weight:800; line-height:1.3 }
.card-mini p{ font-size:.88rem; color:#6b645b }

/* ---------------- Faixa de redes ---------------- */
.faixa-redes{
  margin-top:3.5rem;
  padding:0 6vw 1rem;
}
.faixa-conteudo{
  max-width:1150px; margin:0 auto;
  background:
    radial-gradient(600px 300px at 90% 10%, rgba(255,207,75,.35), transparent 60%),
    linear-gradient(120deg, var(--vermelho), var(--telha));
  color:var(--branco); border-radius:22px;
  padding:2.6rem 3rem; display:grid; grid-template-columns:1.2fr .8fr;
  gap:2rem; align-items:center; box-shadow:var(--sombra);
}
.faixa-conteudo h2{
  font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:900; font-style:italic;
  line-height:1.1; margin-bottom:.6rem;
}
.faixa-conteudo p{ margin-bottom:1.4rem; opacity:.95 }
.faixa-marca{ justify-self:center; width:min(240px,80%); opacity:.95 }

/* ---------------- Seções ---------------- */
.secao{ padding:3.5rem 6vw 4.5rem; max-width:1150px; margin:0 auto }
.titulo-secao{
  font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:900; font-style:italic;
  margin-bottom:2rem;
}
.titulo-secao::after{
  content:""; display:block; width:80px; height:7px; margin-top:.5rem;
  background:var(--laranja); transform:skewX(-20deg);
}
.cartoes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem }
.cartao{
  background:var(--branco); border-radius:16px; padding:1.7rem;
  border-top:6px solid var(--laranja); box-shadow:var(--sombra);
}
.cartao:nth-child(2){ border-top-color:var(--telha) }
.cartao:nth-child(3){ border-top-color:var(--amarelo) }
.cartao h3{ font-weight:900; font-style:italic; margin-bottom:.5rem }
.centralizado{ text-align:center; margin-top:2.5rem }

/* ---------------- Rodapé em faixa ---------------- */
.rodape{ background:var(--preto); color:var(--branco) }
.rodape-faixa{
  background:var(--vermelho);
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.6rem 5vw; flex-wrap:wrap;
}
.rodape-logos{ display:flex; align-items:center; gap:2.2rem; flex-wrap:wrap }
.rodape-logos img{ height:56px; width:auto; display:block }
.rodape-lockup{ display:grid; justify-items:end }
.rodape-lockup .lockup-nome{ font-size:2rem; text-shadow:none }
.rodape-lockup .lockup-badges{ margin-left:1.2rem; margin-top:-.3em }
.rodape-lockup .badge-preto{ font-size:.6rem }
.rodape-lockup .badge-vermelho{ font-size:.8rem; background:var(--preto) }
.rodape-legal{ text-align:center; padding:1.4rem 6vw }

.rodape .legal{ font-size:.8rem; opacity:.65; margin-top:.4rem }
.rodape a{ color:var(--amarelo) }

/* ---------------- Modais ---------------- */
.modal-fundo{
  position:fixed; inset:0; z-index:50;
  background:rgba(10,8,6,.62); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:1rem;
}
.modal-fundo[hidden]{ display:none }
.modal{
  background:var(--branco); color:var(--preto);
  width:min(460px,100%); max-height:92vh; overflow:auto;
  border-radius:18px; padding:1.8rem; position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.modal-fechar{
  position:absolute; top:.8rem; right:1rem; border:0; background:none;
  font-size:1.7rem; cursor:pointer; color:#8a8378; line-height:1;
}
.modal-fechar:hover{ color:var(--preto) }
.modal-cabeca{ display:flex; gap:.9rem; align-items:center; margin-bottom:1.3rem }
.modal-icone{
  flex:0 0 auto; width:3rem; height:3rem; border-radius:50%;
  background:var(--laranja); color:var(--branco); display:grid; place-items:center;
}
.modal-icone svg{ width:1.6rem; height:1.6rem }
.modal-cabeca h2{ font-size:1.25rem; font-weight:900; font-style:italic }
.modal-cabeca p{ font-size:.85rem; color:#6b645b }

#form-lead{ display:grid; gap:.9rem }
#form-lead label{ font-weight:800; font-size:.85rem; display:grid; gap:.3rem }
#form-lead input:not([type=checkbox]), #form-lead select{
  font-family:var(--fonte); font-size:1rem;
  padding:.75rem 1rem; border:2px solid #e7ddcf; border-radius:10px;
  background:var(--branco); width:100%;
}
#form-lead input:focus-visible, #form-lead select:focus-visible{
  outline:3px solid var(--laranja); outline-offset:1px;
}
.hp{ position:absolute; left:-9999px; height:0; opacity:0 }
.lgpd{ display:flex !important; gap:.6rem; align-items:flex-start;
  font-weight:600 !important; font-size:.82rem !important }
.lgpd input{ margin-top:.2rem }
.lgpd a{ color:var(--vermelho) }
#form-msg{ min-height:1.3rem; font-weight:800; font-size:.9rem }
#form-msg.ok{ color:#1c6b32 }
#form-msg.erro{ color:var(--vermelho) }

/* ---------------- Página de links ---------------- */
.pagina-links{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:3.2rem 1.2rem 2rem; color:var(--branco);
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(255,207,75,.2), transparent 60%),
    linear-gradient(160deg, var(--laranja), var(--telha) 55%, var(--vermelho));
  position:relative; overflow:hidden;
}
.pagina-links::before{
  content:""; position:absolute; inset:0;
  background:url('../img/pattern-1.png'); background-size:520px;
  opacity:.10; pointer-events:none;
}
.pagina-links > *{ position:relative }
.links-marca{ width:min(320px,82%); margin-bottom:.9rem;
  filter:drop-shadow(0 6px 18px rgba(20,20,20,.25)) }
.links-bio{ text-align:center; max-width:26rem; margin-bottom:2rem; font-weight:700 }
.lista-links{ display:grid; gap:.95rem; width:min(440px,100%) }
.link-botao{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--branco); color:var(--preto);
  padding:1.05rem 1.2rem; border-radius:16px; text-decoration:none;
  font-weight:900; font-style:italic; font-size:1.05rem;
  border-bottom:4px solid rgba(20,20,20,.85);
  transition:transform .15s ease, background .15s ease;
}
.link-botao:hover, .link-botao:focus-visible{ transform:translateY(-3px); background:var(--amarelo) }
.link-botao svg{ width:1.3rem; height:1.3rem; flex:0 0 auto }
.link-botao.destaque{ background:var(--amarelo) }
.pagina-links .legal{ margin-top:2.6rem; font-size:.8rem; opacity:.85; text-align:center }

/* ---------------- Responsivo ---------------- */
@media (max-width:900px){
  .cards-hero{ grid-template-columns:1fr }
}
@media (max-width:760px){
  .hero{ padding:3rem 6vw 8rem }
  .hero-conteudo{ grid-template-columns:1fr }
  .hero-foto{ order:-1 }
  .foto-placeholder{ width:min(240px,70%) }
  .faixa-conteudo{ grid-template-columns:1fr; padding:2rem 1.6rem; text-align:center }
  .faixa-marca{ display:none }
}


/* ---------------- Lockup da marca (pré-campanha, em HTML/CSS) ---------------- */
.lockup{ display:grid; justify-items:start; margin-bottom:1.4rem }
.lockup-nome{
  font-weight:900; font-style:italic; letter-spacing:-.02em;
  font-size:clamp(3rem,7vw,4.6rem); line-height:.95; color:var(--branco);
  text-shadow:0 6px 18px rgba(20,20,20,.25);
}
.lockup-badges{ display:grid; justify-items:start; margin-left:clamp(2rem,6vw,5rem); margin-top:-.35em }
.badge-preto, .badge-vermelho{
  font-style:italic; font-weight:900; color:var(--branco); line-height:1;
  padding:.28em .7em; transform:skewX(-4deg);
}
.badge-preto{ background:var(--preto); font-size:.9rem }
.badge-vermelho{ background:var(--vermelho); font-size:1.25rem; text-transform:uppercase; margin-top:-1px }

/* ---------------- Retrato no hero ---------------- */
.foto-moldura{
  position:relative; z-index:1; width:min(340px,90%);
  display:flex; align-items:flex-end; justify-content:center;
}
.foto-moldura::before{
  content:""; position:absolute; inset:auto 0 0 0; height:78%;
  background:linear-gradient(150deg, rgba(255,207,75,.35), rgba(196,32,37,.45));
  border-radius:24px; border:2px solid rgba(255,255,255,.35);
}
.foto-moldura img{
  position:relative; width:100%; display:block;
  filter:drop-shadow(0 14px 30px rgba(20,20,20,.35));
}

/* ---------------- Botão contorno / grande ---------------- */
.btn-contorno{ border:3px solid var(--branco); color:var(--branco); background:transparent }
.btn-contorno:hover, .btn-contorno:focus-visible{ background:var(--branco); color:var(--vermelho) }
.btn-grande{ font-size:1.2rem; padding:1.2rem 2.4rem }
.cta-linha{ display:flex; gap:1rem; flex-wrap:wrap }

/* ---------------- Hero compacto (páginas internas) ---------------- */
.hero-compacto{ padding:3.2rem 6vw 3.6rem }
.hero-compacto .hero-conteudo{ grid-template-columns:1fr }

/* ---------------- Seção doar ---------------- */
.secao-doar{ padding:0 6vw 4rem; scroll-margin-top:6rem }

/* ---------------- Página de privacidade ---------------- */
.secao-privacidade{ max-width:760px }
.privacidade-texto{ display:grid; gap:1rem; font-size:.95rem; line-height:1.7; color:#403a33 }
.privacidade-texto h2{
  font-size:1.15rem; font-weight:900; font-style:italic; color:var(--preto);
  margin-top:.6rem;
}
.privacidade-texto a{ color:var(--vermelho); font-weight:700 }
.placeholder-legal{
  display:inline-block; background:#fff3d6; color:#7a5a12; font-weight:700;
  padding:.1em .5em; border-radius:6px; font-style:normal;
}
.doar-conteudo{
  max-width:1150px; margin:0 auto;
  background:var(--preto); color:var(--branco); border-radius:22px;
  padding:2.6rem 3rem; display:flex; gap:2rem; align-items:center;
  justify-content:space-between; flex-wrap:wrap; box-shadow:var(--sombra);
}
.doar-conteudo h2{ font-weight:900; font-style:italic; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.5rem }
.doar-conteudo p{ max-width:34rem; opacity:.9 }

/* ---------------- Página de propostas ---------------- */
.secao-proposta{
  display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:start;
}
#form-proposta{ display:grid; gap:1rem }
#form-proposta label{ font-weight:800; font-size:.9rem; display:grid; gap:.35rem }
#form-proposta input:not([type=checkbox]), #form-proposta select, #form-proposta textarea{
  font-family:var(--fonte); font-size:1rem; width:100%;
  padding:.8rem 1rem; border:2px solid #e7ddcf; border-radius:10px; background:var(--branco);
}
#form-proposta textarea{ resize:vertical; min-height:8rem }
#form-proposta input:focus-visible, #form-proposta select:focus-visible, #form-proposta textarea:focus-visible{
  outline:3px solid var(--laranja); outline-offset:1px;
}
.grade-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.contador{ justify-self:end; color:#6b645b; font-weight:600 }
.temas-lista{
  background:var(--branco); border-radius:16px; padding:1.6rem;
  border-top:6px solid var(--laranja); box-shadow:var(--sombra);
  position:sticky; top:1rem;
}
.temas-lista h2{ font-weight:900; font-style:italic; font-size:1.15rem; margin-bottom:.8rem }
.temas-lista ol{ padding-left:1.2rem; display:grid; gap:.45rem; font-size:.92rem }
.temas-lista li::marker{ font-weight:900; color:var(--telha) }

/* ---------------- Rodapé PCdoB ---------------- */


/* ---------------- VLibras: mantém o botão acima dos modais ---------------- */
[vw]{ z-index:60 }

/* ---------------- VLibras: aviso de indisponibilidade (fallback) ---------------- */
.vlibras-fallback{
  position:fixed; right:1rem; bottom:1rem; z-index:60; max-width:280px;
  background:var(--branco); color:var(--preto); border-radius:14px;
  padding:1rem 1.1rem; box-shadow:0 14px 34px rgba(20,20,20,.28);
  border-top:4px solid var(--laranja); font-size:.85rem; line-height:1.5;
}
.vlibras-fallback p{ margin-bottom:.6rem; font-weight:600 }
.vlibras-fallback a{
  color:var(--vermelho); font-weight:800; text-decoration:underline;
}
@media (max-width:480px){
  .vlibras-fallback{ right:.7rem; bottom:.7rem; max-width:calc(100vw - 1.4rem) }
}

@media (max-width:860px){
  .rodape-faixa{ justify-content:center; text-align:center }
  .rodape-lockup{ justify-items:center }
  .rodape-logos{ justify-content:center }
  .secao-proposta{ grid-template-columns:1fr }
  .temas-lista{ position:static; order:-1 }
  .grade-2{ grid-template-columns:1fr }
  .doar-conteudo{ justify-content:center; text-align:center }
  .topo{ flex-wrap:wrap; justify-content:center; gap:.5rem .9rem; padding:.7rem 4vw }
  .topo-links{ justify-content:center }
}