/* ================================================================
  ONE PAGE — TROPA DO LULA / EXPLICADOR-GERAL
  Identidade: tarjas gráficas diagonais, impacto editorial, cores
  vibrantes e componentes 100% em HTML/CSS. A foto de fundo e o
  logotipo são os únicos arquivos de imagem usados no site.

  CORES PERSONALIZÁVEIS: troque as variáveis logo abaixo.
================================================================ */
:root {
  --vermelho: #f5000b;
  --vermelho-escuro: #ab0010;
  --amarelo: #ffdc00;
  --azul: #073bda;
  --verde: #00bc37;
  --papel: #f4f2eb;
  --branco: #fff;
  --preto: #17120c;
  --texto-suave: #e3dce1;
  --largura: 1240px;
  --fonte-titulos: "Noto Sans Display ExtraCondensed Black", Impact, "Arial Narrow", "Arial Black", sans-serif;
  --fonte-texto: "Arial", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #3a0008; color: var(--branco); font-family: var(--fonte-texto); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 4px solid var(--amarelo); outline-offset: 5px; }
/* A FOTO original ocupa o fundo. Somente os overlays CSS mudam sua aparência. */
.backdrop { position: fixed; z-index: 0; inset: 0; background: url("assets/fundo-tropa-lula.png") center 46% / cover no-repeat; pointer-events: none; }
.backdrop::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(64,0,9,.96) 0%, rgba(75,0,9,.93) 25%, rgba(87,0,11,.74) 49%, rgba(28,7,10,.38) 75%, rgba(20,8,9,.25) 100%),
    linear-gradient(180deg, rgba(22,0,3,.29) 0%,rgba(45,0,7,.08) 45%,rgba(21,0,4,.78) 100%);
}
.site { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow: clip; }
.topline { display: grid; grid-template-columns: 42% 23% 17% 18%; width: 100%; height: 9px; box-shadow: 0 4px 0 rgba(10,0,0,.23); }
.topline i:nth-child(1) { background: var(--vermelho); }
.topline i:nth-child(2) { background: var(--amarelo); }
.topline i:nth-child(3) { background: var(--azul); }
.topline i:nth-child(4) { background: var(--verde); }
.page-content { width: min(var(--largura), calc(100% - 110px)); margin: 0 auto; flex: 1; }
.bio { min-height: 970px; display: grid; grid-template-columns: minmax(0,650px) minmax(0,1fr); column-gap: clamp(12px,3vw,50px); align-items: center; padding: 42px 0 45px; }
.bio__content { position: relative; z-index: 2; max-width: 650px; }
.brand-row { display: flex; align-items: center; gap: 32px; margin-bottom: 19px; }
.brand-logo { display: block; object-fit: contain; height: auto; width: clamp(170px,14vw,209px); filter: drop-shadow(5px 7px 0 rgba(8,10,12,.5)); }
.brand-row__tag { color: #fff; border-left: 5px solid var(--amarelo); padding-left: 13px; font: 800 11px/1.45 var(--fonte-texto); letter-spacing: .11em; text-transform: uppercase; opacity: .91; }
.brand-row__tag span { color: var(--amarelo); }
.headline { margin: 0 0 20px; }
.headline h1 { margin: 0; font-weight: 900; font-family: var(--fonte-titulos); text-transform: uppercase; line-height: .98; }
.headline h1 > span { display: table; }
.headline__strap { color: var(--amarelo); font-size: clamp(52px,5.55vw,84px); letter-spacing: -.02em; transform: skewX(-5deg); text-shadow: 4px 5px 0 rgba(15,5,6,.65); }
.headline__main { position: relative; margin: 5px 0 9px -5px; padding: 5px 29px 12px 19px; background: var(--vermelho); color: var(--branco); font-size: clamp(79px,8.5vw,124px); line-height: 1.0; transform: skew(-6deg,-1deg); box-shadow: 9px 10px 0 var(--azul); clip-path: polygon(0% 7%,94% 0%,100% 14%,100% 94%,6% 100%,0 92%); }
.headline__main > span:first-child { display: inline-block; transform: skew(6deg); }
.headline__star { position: absolute; right: 16px; top: 15%; transform: skew(6deg) rotate(-14deg); font: 900 .30em/1 var(--fonte-titulos); color: var(--amarelo); }
.headline__last { background: var(--amarelo); color: var(--azul); font-size: clamp(43px,4.9vw,72px); letter-spacing: -.018em; padding: 8px 20px 11px 13px; transform: skew(-5deg) rotate(-1deg); clip-path: polygon(0 6%,94% 0,100% 16%,100% 93%,3% 100%,0 90%); box-shadow: none; }
.subtitle { margin: 25px 0 16px; padding: 2px 0 2px 15px; border-left: 6px solid var(--amarelo); font-size: clamp(17px,1.5vw,21px); font-weight: 800; line-height: 1.35; display: flex; align-items: flex-start; gap: 8px; max-width: 602px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.subtitle__emoji { flex: none; }
.description { max-width: 620px; color: var(--texto-suave); font-size: 14px; line-height: 1.7; margin: 0 0 10px; font-weight: 500; }
.description-highlight { margin: 10px 0 22px; font-weight: 850; color: #fff; font-size: 15px; line-height: 1.6; }
.description-highlight strong { box-shadow: inset 0 -6px rgba(245,0,11,.72); }
.link-area { width: min(100%, 625px); }
.link-area__heading { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; text-transform: uppercase; color: #fff; font-family: var(--fonte-titulos); font-size: 19px; letter-spacing: .025em; }
.link-area__accent { color: var(--amarelo); font-size: 26px; }
.link-area__rule { flex: 1; height: 2px; background: rgba(255,255,255,.42); }
.link-area__count { color: rgba(255,255,255,.8); font: 800 11px/1 var(--fonte-texto); letter-spacing: .1em; white-space: nowrap; }
.social-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 16px; }
.ribbon-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 9px; height: 66px; padding: 10px 24px 12px 20px; color: #fff; isolation: isolate; transition: translate .18s ease, filter .18s ease; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.48)); }
.ribbon-link::before { position: absolute; content: ""; z-index: -1; inset: 0; background: var(--cor-botao); clip-path: polygon(0 14%,94% 0,100% 16%,100% 87%,6% 100%,0 86%); }
.ribbon-link:nth-child(even)::before { clip-path: polygon(0 8%,92% 0%,100% 17%,100% 88%,6% 100%,0 91%); }
.ribbon-link--red { --cor-botao: var(--vermelho); --cor-texto: #fff; }
.ribbon-link--yellow { --cor-botao: var(--amarelo); --cor-texto: var(--azul); }
.ribbon-link--green { --cor-botao: var(--verde); --cor-texto: #fff; }
.ribbon-link--blue { --cor-botao: var(--azul); --cor-texto: #fff; }
.ribbon-link { color: var(--cor-texto); }
.ribbon-link__label { font: 900 clamp(28px,2.75vw,40px)/1 var(--fonte-titulos); letter-spacing: -.015em; transform: skew(-6deg) rotate(-1deg); white-space: nowrap; text-shadow: 1px 2px 0 rgba(0,0,0,.05); }
.ribbon-link__arrow { font: 900 25px/1 var(--fonte-texto); transform: rotate(2deg); }
.ribbon-link:hover { translate: 0 -4px; filter: drop-shadow(6px 9px 0 rgba(0,0,0,.65)) brightness(1.07); }
.ribbon-link:active { translate: 0 1px; }
.join-label { font-family: var(--fonte-titulos); color: var(--amarelo); font-size: clamp(22px,2vw,29px); letter-spacing: .02em; margin: 24px 0 12px; }
.join-button { display: flex; justify-content: flex-start; align-items: center; position: relative; width: 100%; min-height: 88px; padding: 17px 22px; gap: 15px; background: var(--amarelo); color: var(--azul); clip-path: polygon(0 8%,95% 0,100% 16%,100% 87%,5% 100%,0 91%); filter: drop-shadow(4px 6px 0 var(--azul)); transition: transform .2s ease, background .2s ease; }
.join-button::after { position: absolute; content: ""; inset: 0; border: 0; pointer-events: none; }
.join-button__star { flex: none; font-size: 29px; color: var(--vermelho); transform: rotate(-12deg); }
.join-button__title { font: 900 clamp(39px,4.0vw,56px)/1 var(--fonte-titulos); letter-spacing: .004em; transform: skew(-5deg); }
.join-button__arrow { margin-left: auto; font-size: 32px; font-weight: 900; }
.join-button:hover { background: #ffe632; transform: translateY(-4px); }
.bio__image-space { position: relative; min-height: 700px; align-self: stretch; pointer-events: none; }
.bio__vertical-label { position: absolute; right: -36px; bottom: 55px; color: rgba(255,255,255,.9); font: 900 12px/1 var(--fonte-texto); letter-spacing: .15em; writing-mode: vertical-rl; text-shadow: 1px 2px 8px rgba(0,0,0,.5); }
.bio__vertical-label span { color: var(--amarelo); }
.footer { position: relative; width: 100%; min-height: 70px; padding: 21px max(55px,calc((100vw - var(--largura))/2)); color: #f6eddf; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: rgba(53,0,7,.85); border-top: 4px solid var(--amarelo); font-size: 11px; letter-spacing: .1em; font-weight: 800; text-transform: uppercase; }
.footer__decor { display: flex; gap: 3px; }
.footer__decor i { width: 18px; height: 7px; display: block; transform: skew(-22deg); }
.footer__decor i:nth-child(1){background:var(--vermelho)} .footer__decor i:nth-child(2){background:var(--amarelo)} .footer__decor i:nth-child(3){background:var(--azul)} .footer__decor i:nth-child(4){background:var(--verde)}
.toast { position: fixed; z-index: 5; left: 50%; bottom: 25px; transform: translateX(-50%); padding: 14px 20px; border: 3px solid #141414; background: var(--amarelo); color: var(--preto); max-width: calc(100vw - 28px); width: max-content; font-weight: 800; box-shadow: 5px 6px 0 var(--azul); }
/* Tablet */
@media (max-width: 1110px) {
  .page-content { width: min(100% - 64px, 1000px); }
  .bio { grid-template-columns: minmax(0,590px) minmax(0,1fr); min-height: 960px; }
  .headline__strap { font-size: clamp(50px,5.7vw,72px); }
  .headline__main { font-size: clamp(80px,9vw,105px); }
  .headline__last { font-size: clamp(43px,5.15vw,61px); }
  .ribbon-link__label { font-size: clamp(28px,3.15vw,35px); }
  .join-button__title { font-size: clamp(40px,4.1vw,53px); }
  .footer { padding-inline: 32px; }
}
/* Mobile: same one page, large single-column social links */
@media (max-width: 760px) {
  .backdrop { background-position: 58% top; }
  .backdrop::after { background: linear-gradient(180deg,rgba(58,0,7,.82) 0%,rgba(64,0,8,.89) 23%,rgba(68,0,9,.97) 56%,rgba(58,0,8,.99) 100%); }
  .page-content { width: min(100% - 34px,520px); }
  .bio { display: block; min-height: auto; padding: 26px 0 41px; }
  .bio__image-space { display: none; }
  .brand-row { gap: 20px; margin-bottom: 26px; }
  .brand-logo { width: 158px; }
  .brand-row__tag { font-size: 9px; }
  .headline { margin-bottom: 23px; }
  .headline__strap { font-size: clamp(48px, 10.8vw, 68px); }
  .headline__main { font-size: clamp(83px, 21vw, 114px); margin-block: 9px 10px; }
  .headline__last { font-size: clamp(39px,8.3vw,56px); }
  .subtitle { margin: 26px 0 17px; font-size: 19px; }
  .description { font-size: 14px; line-height: 1.78; }
  .description-highlight { font-size: 14.5px; margin-bottom: 26px; }
  .link-area__heading { font-size: 18px; }
  .social-links { gap: 12px; }
  .ribbon-link { height: 69px; padding: 13px 17px; }
  .ribbon-link__label { font-size: clamp(28px,6.2vw,37px); }
  .join-button { min-height: 84px; }
  .join-button__title { font-size: clamp(36px,7.5vw,47px); }
  .footer { padding: 23px 17px; font-size: 10px; flex-wrap: wrap; }
}
@media (max-width: 500px) {
  .social-links { grid-template-columns: 1fr; gap: 8px; }
  .ribbon-link { height: 61px; padding-inline: 21px; }
  .ribbon-link__label { font-size: clamp(33px,9.3vw,43px); }
  .headline__strap { font-size: clamp(43px, 10.7vw,55px); }
  .headline__main { font-size: clamp(77px,20vw,102px); }
  .headline__last { font-size: clamp(35px,8.3vw,44px); }
  .brand-row__tag { font-size: 8px; }
  .join-button { min-height: 73px; }
  .join-button__title { font-size: clamp(35px,8.7vw,44px); }
  .join-button__star { font-size: 22px; }
  .join-button__arrow { font-size: 28px; }
  .footer__decor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* V6: O convite e botão principal ocupam a antiga área de texto,
   logo após o título. As redes sociais continuam abaixo. */
.cta-top { width: min(100%,625px); margin: 20px 0 32px; }
.cta-top .join-label { margin: 0 0 14px; }
.link-area { margin-top: 0; }
@media (max-width:760px) {
  .cta-top { margin: 23px 0 32px; }
}


/* V7 — Cabeçalho substituído pela nova marca principal */
.brand-row, .headline { display:none; }
.hero-brand { width:min(100%, 640px); margin: 6px 0 18px; }
.hero-brand__image { display:block; width:100%; height:auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.38)); }
.cta-top { margin-top: 8px; }
@media (max-width: 1110px) {
  .hero-brand { width:min(100%, 600px); margin-bottom: 16px; }
}
@media (max-width: 760px) {
  .hero-brand { width:min(100%, 520px); margin: 2px 0 16px; }
  .hero-brand__image { filter: drop-shadow(0 8px 14px rgba(0,0,0,.32)); }
}
@media (max-width: 500px) {
  .hero-brand { width:min(100%, 470px); margin-bottom: 14px; }
}

/* V8 — Convite principal, agora destacado acima das redes sociais */
.hero-brand { margin-bottom: 5px; }
.cta-top { width: min(100%,625px); margin: 9px 0 38px; }
.cta-top .join-label { margin: 0 0 13px; }
.cta-top .join-button { width: 100%; }
.link-area__heading { margin-bottom: 15px; }
@media (max-width:760px) {
  .hero-brand { margin-bottom: 5px; }
  .cta-top { margin: 15px 0 30px; }
  .cta-top .join-label { margin-bottom: 11px; }
}
@media (max-width:500px) {
  .cta-top { margin: 12px 0 28px; }
  .cta-top .join-button { gap: 8px; padding: 14px 15px; }
  .cta-top .join-button__title { font-size: clamp(26px,7.6vw,34px); white-space:nowrap; }
  .cta-top .join-button__star { font-size: 20px; }
  .cta-top .join-button__arrow { font-size: 25px; }
}

/* V9 — Créditos integrados discretamente ao rodapé, sem alterar o resto da página */
.footer--credits { min-height: 80px; padding-block: 18px; gap: 22px; }
.footer__credits { display:flex; flex-direction:column; gap: 5px; }
.footer__credits p { margin:0; }
.footer__copyright { font-size: 11px; line-height:1.4; font-weight:800; letter-spacing:.045em; text-transform:none; }
.footer__signature { color:#f4dca9; font-size: 11px; line-height:1.4; letter-spacing:.035em; font-weight:500; text-transform:none; }
.footer__signature strong { color:var(--amarelo); font-weight:800; }
.footer--credits .footer__decor { flex-shrink:0; }
@media (max-width:760px) {
  .footer--credits { min-height:80px; padding:20px 18px; justify-content:center; }
  .footer__credits { width:100%; text-align:center; }
  .footer__copyright, .footer__signature { font-size:10.5px; }
  .footer--credits .footer__decor { display:none; }
}


/* ================================================================
   V11 — NOVO FUNDO ESTILIZADO + PALETA AZUL
   A imagem original anexada pelo usuário é preservada como arquivo
   de fundo do lado direito. O efeito azul é todo feito em CSS.
================================================================ */
body { background: #031754; }
.backdrop { background: linear-gradient(135deg, #041a62 0%, #072f9a 45%, #02164d 100%); }
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/fundo-pessoas-estilizado.png");
  background-repeat: no-repeat;
  background-position: right -54px bottom 0;
  background-size: auto 82%;
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(2,18,70,.98) 0%,
      rgba(4,24,90,.96) 24%,
      rgba(5,31,111,.81) 40%,
      rgba(4,28,102,.34) 58%,
      rgba(2,22,84,.14) 100%),
    linear-gradient(180deg,
      rgba(2,15,56,.20) 0%,
      rgba(2,15,56,.04) 38%,
      rgba(1,10,40,.44) 100%);
}
@media (min-width:761px) {
  .backdrop::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 24%, #000 43%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 24%, #000 43%, #000 100%);
  }
}
@media (min-width: 761px) and (max-width: 1150px) {
  .backdrop::before {
    background-size: auto 76%;
    background-position: right -30px bottom 0;
  }
  .backdrop::after {
    background:
      linear-gradient(90deg, rgba(2,18,70,.98) 0%, rgba(4,24,90,.95) 38%, rgba(5,31,111,.80) 58%, rgba(4,28,102,.26) 100%),
      linear-gradient(180deg, rgba(1,10,40,.50) 0%, rgba(1,10,40,.18) 36%, rgba(1,10,40,.56) 100%);
  }
}
@media (max-width:760px) {
  body { background: #041754; }
  .backdrop { background: linear-gradient(180deg, #05206d 0%, #031650 100%); }
  .backdrop::before {
    background-size: 156% auto;
    background-position: 54% 128px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 98%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 98%);
  }
  .backdrop::after {
    background: linear-gradient(180deg,
      rgba(3,18,70,.90) 0%,
      rgba(4,26,96,.56) 20%,
      rgba(4,30,108,.46) 40%,
      rgba(3,20,78,.85) 72%,
      rgba(2,14,56,.98) 100%);
  }
}
@media (max-width:380px) {
  .backdrop::before { background-size: 165% auto; background-position: 54% 116px; }
}


/* =====================================================================
  V12 — ACABAMENTO FINAL DA ONE PAGE
  - Imagem ORIGINAL com transparência, sobreposta ao fundo azul.
  - Fundo azul contínuo sem retângulo branco nem corte entre camadas.
  - Rodapé vinho substituído pelo vermelho da amostra: #FA0404.
  - Ruído cinematográfico quase imperceptível, sobre o cenário apenas.
  - Apenas CSS organiza, posiciona e escala a fotografia em cada tela.
 ===================================================================== */
:root { --vermelho-fundo-rodape: #FA0404; --azul-fundo-escuro: #021B65; --azul-fundo-base: #00279C; }
html { background: var(--azul-fundo-escuro); }
body { background: var(--azul-fundo-escuro); }
.backdrop {
  overflow: hidden;
  background: radial-gradient(ellipse at 82% 45%, #0843bb 0%, #002f9f 34%, #052578 61%, #03154f 100%);
}
.backdrop::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 1;
  background: url("assets/duas-pessoas-transparente.png") no-repeat right 4px bottom 42px / min(62vw, 930px) auto;
  /* Fotos integradas sem máscaras recortando rostos nem bordas. */
  -webkit-mask-image: none;
  mask-image: none;
}
.backdrop::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2,18,69,.98) 0%,
      rgba(2,19,74,.96) 27%,
      rgba(2,23,85,.76) 43%,
      rgba(3,29,92,.16) 65%,
      rgba(2,21,75,.02) 100%),
    linear-gradient(0deg, rgba(0,14,54,.52) 0%, transparent 25%, transparent 84%, rgba(0,14,54,.18) 100%);
}
/* Grão atrás do conteúdo; a opacidade pequena evita alterar a textura dos rostos. */
.backdrop__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url("assets/textura-ruido-leve.png") repeat;
  background-size: 192px 192px;
  mix-blend-mode: soft-light;
  opacity: .19;
}
.footer--credits {
  background: var(--vermelho-fundo-rodape);
  color: #fff;
  border-top-color: var(--amarelo);
}
.footer__signature { color: #fff4de; }
.footer__signature strong { color: var(--amarelo); }
.footer__copyright { color: #fff; }
@media (min-width: 1600px) {
  .backdrop::before { background-size: min(61vw, 1040px) auto; background-position: right 3vw bottom 45px; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .backdrop::before { background-size: min(80vw, 900px) auto; background-position: right -35px bottom 35px; }
  .backdrop::after { background:
    linear-gradient(90deg, rgba(2,18,69,.99) 0%, rgba(2,19,74,.96) 35%, rgba(2,23,85,.77) 58%, rgba(3,29,92,.08) 100%),
    linear-gradient(0deg, rgba(0,14,54,.56), transparent 25%);
  }
}
@media (max-width: 760px) {
  .backdrop { background: linear-gradient(180deg, #032982 0%, #04236f 45%, #021852 100%); }
  .backdrop::before {
    background-size: min(150vw, 760px) auto;
    background-position: center 124px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .backdrop::after { background:
    linear-gradient(180deg,
      rgba(1,20,74,.30) 0%,
      rgba(1,20,74,.36) 27%,
      rgba(1,20,74,.78) 47%,
      rgba(1,17,62,.96) 72%,
      rgba(1,16,60,.98) 100%);
  }
  .backdrop__grain { opacity: .15; }
}
@media (max-width: 380px) {
  .backdrop::before { background-size: 150vw auto; background-position: center 140px; }
}

/* Mobile: respiro visual entre marca e CTA para evitar cobrir os rostos.
   A imagem continua transparente no FUNDO azul e sem caixa branca. */
@media (max-width: 760px) {
  .hero-brand { margin-bottom: 188px; }
  .backdrop::before {
    background-size: min(113vw, 550px) auto;
    background-position: center 207px;
  }
  .backdrop::after {
    background: linear-gradient(180deg,
      rgba(2,20,73,.36) 0%,
      rgba(3,21,74,.20) 28%,
      rgba(3,21,74,.12) 39%,
      rgba(2,18,67,.80) 58%,
      rgba(1,16,61,.97) 76%,
      rgba(1,15,57,.99) 100%);
  }
}
@media (max-width: 380px) {
  .hero-brand { margin-bottom: 178px; }
  .backdrop::before { background-size: 114vw auto; background-position: center 205px; }
}


/* ==============================================================
   V13 — TESTE DE TARJAS COM CORES E ÍCONES DA REFERÊNCIA.
   A Versão 12 original permanece intacta.
=============================================================== */
.social-links--teste { gap: 14px 16px; }
.social-links--teste .ribbon-link {
  height: 76px;
  padding: 9px 13px 10px 11px;
  gap: 10px;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,.43));
  min-width: 0;
}
.social-links--teste .ribbon-link::before {
  clip-path: polygon(0 12%,95% 0,100% 13%,100% 88%,5% 100%,0 89%);
}
.social-links--teste .ribbon-link:nth-child(even)::before {
  clip-path: polygon(0 7%,94% 0,100% 14%,100% 90%,5% 100%,0 87%);
}
.social-links--teste .ribbon-link__icon {
  width: 53px;
  height: 53px;
  flex: 0 0 53px;
  object-fit: cover;
  display: block;
  border-radius: 13px;
  box-shadow: 1px 3px 8px rgba(0,0,0,.20);
}
.social-links--teste .ribbon-link__icon--site {
  display:flex; align-items:center;justify-content:center;
  background:rgba(255,255,255,.15);
  box-shadow:none;
}
.social-links--teste .ribbon-link__label {
  font-size:clamp(23px,2.1vw,31px);
  white-space:nowrap;
  min-width:0;
  flex:1;
  line-height:1;
}
.social-links--teste .ribbon-link__arrow {font-size:23px; flex:0 0 auto; }
.social-links--teste .ribbon-link--instagram { --cor-botao:#e52960; --cor-texto:#fff; }
.social-links--teste .ribbon-link--youtube { --cor-botao:#f2f2f2; --cor-texto:#f20e20; }
.social-links--teste .ribbon-link--tiktok { --cor-botao:#252525; --cor-texto:#fff; }
.social-links--teste .ribbon-link--x { --cor-botao:#353535; --cor-texto:#fff; }
.social-links--teste .ribbon-link--facebook { --cor-botao:#2878dd; --cor-texto:#fff; }
.social-links--teste .ribbon-link--site { --cor-botao:#f5000b; --cor-texto:#fff; }
.social-links--teste .ribbon-link--site .ribbon-link__label { font-size:clamp(21px,1.9vw,28px); }
@media (min-width:761px) and (max-width:1200px){
  .social-links--teste .ribbon-link {gap:7px; padding-inline:8px;}
  .social-links--teste .ribbon-link__icon{width:45px;height:45px;flex-basis:45px;border-radius:10px;}
  .social-links--teste .ribbon-link__label {font-size:clamp(20px,2.3vw,28px);}
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:clamp(18px,2.0vw,25px);}
}
@media (max-width:760px) and (min-width:501px) {
  .social-links--teste {gap:10px;}
  .social-links--teste .ribbon-link {height:72px;padding:10px 8px;gap:6px;}
  .social-links--teste .ribbon-link__icon {width:43px;height:43px;flex-basis:43px;border-radius:10px;}
  .social-links--teste .ribbon-link__label {font-size:clamp(20px,3.6vw,28px);}
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:clamp(17px,3.1vw,23px);}
  .social-links--teste .ribbon-link__arrow {font-size:20px;}
}
@media (max-width:500px) {
  .social-links--teste {gap:11px;}
  .social-links--teste .ribbon-link {height:73px;padding:10px 15px 10px 12px;gap:11px;}
  .social-links--teste .ribbon-link__icon {width:52px;height:52px;flex-basis:52px;border-radius:12px;}
  .social-links--teste .ribbon-link__label {font-size:clamp(27px,8.0vw,34px);}
  .social-links--teste .ribbon-link--site .ribbon-link__label{font-size:clamp(24px,7vw,32px);}
  .social-links--teste .ribbon-link__arrow {font-size:23px;}
}
@media (max-width:350px){
  .social-links--teste .ribbon-link {gap:7px;padding-inline:10px;}
  .social-links--teste .ribbon-link__icon {width:44px;height:44px;flex-basis:44px;}
  .social-links--teste .ribbon-link__label {font-size:25px;}
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:23px;}
}


/* V14 — Ícones-teste com o rosto solicitado (sem o fundo vermelho da foto)
   O projeto V12 original e o teste V13 continuam preservados. */
.social-links--teste .ribbon-link { height: 79px; padding-left: 8px; gap: 9px; }
.social-links--teste .ribbon-link__icon {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.social-links--teste .ribbon-link__label { font-size: clamp(22px, 2.0vw, 29px); }
.social-links--teste .ribbon-link--site .ribbon-link__label { font-size: clamp(20px,1.85vw,27px); }
.social-links--teste .ribbon-link__icon--site {border-radius:12px;background:rgba(255,255,255,.15)}
@media (min-width:761px) and (max-width:1200px) {
  .social-links--teste .ribbon-link {gap: 5px;}
  .social-links--teste .ribbon-link__icon {width:51px;height:51px;flex-basis:51px;}
  .social-links--teste .ribbon-link__label {font-size:clamp(19px,2.3vw,26px)}
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:clamp(18px,2vw,24px)}
}
@media (max-width:760px) and (min-width:501px) {
  .social-links--teste .ribbon-link__icon {width:46px;height:46px;flex-basis:46px;}
  .social-links--teste .ribbon-link__label {font-size:clamp(18px,3.2vw,26px)}
}
@media (max-width:500px) {
  .social-links--teste .ribbon-link {height:77px;gap:10px;padding-left:7px;}
  .social-links--teste .ribbon-link__icon {width:64px;height:64px;flex-basis:64px;}
  .social-links--teste .ribbon-link__label {font-size:clamp(25px,7.5vw,33px);}
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:clamp(23px,6.9vw,29px);}
}
@media (max-width:350px) {
  .social-links--teste .ribbon-link__icon {width:54px;height:54px;flex-basis:54px;}
  .social-links--teste .ribbon-link__label {font-size:24px;}
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:21px;}
}


/* =============================================================
  V15 TESTE — REFINAMENTO SOLICITADO
  - Rostos intactos: o PNG original e seus pixels não são alterados.
  - A fotografia passa a pertencer ao hero em vez do fundo fixo.
  - Ajustes em cores das tarjas, título, CTA e crédito.
============================================================= */
.backdrop::before { display: none !important; }
.backdrop::after {
  background:
    radial-gradient(circle at 72% 36%, rgba(1,65,177,.15),transparent 45%),
    linear-gradient(90deg,rgba(2,14,62,.18),rgba(2,16,62,.06));
}
.bio {
  position: relative;
  isolation: isolate;
}
.bio__people {
  position: absolute;
  width: min(64vw, 810px);
  height: auto;
  right: -7.6vw;
  bottom: -5px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);
}
/* Camada suavíssima no lado esquerdo: o texto mantém contraste sem retocar o arquivo dos rostos. */
.bio::before {
  content:""; position:absolute;z-index:1;inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,14,58,.22) 0%,rgba(2,14,58,.1) 40%,transparent 72%);
}
.bio__content{position:relative;z-index:3;}
.bio__image-space{z-index:2;}
.bio__vertical-label{display:none;}

/* Evita um retângulo sobre o gradiente do fundo ao manter as pessoas intactas. */
.bio::before{display:none!important;}

/* Recuo entre logo e chamada principal na versão de computador. */
.hero-brand{margin-bottom: 44px;}
.cta-top{margin-top: 11px;margin-bottom: 43px;}
.cta-top .join-label{margin-bottom: 14px;}

/* Cabeçalho de redes: tipografia da referência vermelha sobre papel branco. */
.link-area__heading{gap:11px;margin-bottom:21px;}
.link-area__heading-text{
  display:inline-block;
  padding:8px 14px 9px;
  background:#fff;
  color:#f5000b;
  font:900 clamp(19px,1.75vw,24px)/1.12 "Arial Black",Arial,Helvetica,sans-serif;
  letter-spacing:-.04em;
  clip-path:polygon(0 0,97% 0,100% 26%,100% 100%,3% 100%,0 85%);
  box-shadow: inset 0 -2px rgba(5,37,106,.12);
}
.link-area__accent{font-size:25px;line-height:1;color:var(--amarelo);flex:none;}
.link-area__rule,.link-area__count{display:none!important;}

/* Correspondência cromática baseada no fundo sólido de cada ícone, não em cores genéricas. */
.social-links--teste .ribbon-link--youtube  { --cor-botao:#f1f1f1;--cor-texto:#ee0307; }
.social-links--teste .ribbon-link--instagram{ --cor-botao:#e9034d;--cor-texto:#fff; }
.social-links--teste .ribbon-link--tiktok   { --cor-botao:#1b1b1b;--cor-texto:#fff; }
.social-links--teste .ribbon-link--x        { --cor-botao:#292929;--cor-texto:#fff; }
.social-links--teste .ribbon-link--facebook { --cor-botao:#0058de;--cor-texto:#fff; }
.social-links--teste .ribbon-link--site     { --cor-botao:#f5000b;--cor-texto:#fff; }
.social-links--teste .ribbon-link--site .ribbon-link__icon--site {
  background:#f5000b;border: 1px solid rgba(255,255,255,.22);
}
.footer__author-link{
  color:var(--amarelo);font-weight:800;text-decoration:none;
  text-underline-offset:4px;transition:color .2s ease;
}
.footer__author-link:hover,.footer__author-link:focus-visible { color:#fff;text-decoration:underline; }




































@media(min-width:1600px){.bio__people{right:-7vw;width:850px;}}
@media(min-width:761px) and (max-width:1200px){
 .bio__people{width:min(76vw,790px);right:-9vw;}
 .bio__vertical-label{right:-15px;}
}
@media(max-width:760px){
  .bio{position:relative;}
  .bio::before{display:none;}
  .bio__people{
    z-index:0;width:min(105vw,530px);max-width:none;
    left:50%;right:auto;top:195px;bottom:auto;
    transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  }
  .hero-brand{margin-bottom:190px;}
  .cta-top{margin-top:12px;margin-bottom:38px;}
  .link-area__heading{margin-bottom:18px;}
  .link-area__heading-text{font-size:clamp(18px,4.5vw,24px);padding:8px 11px 9px;}
  .link-area__accent{font-size:21px;}
  
}
@media(max-width:500px){
  .bio__people{top:193px;width:107vw;}
  .hero-brand{margin-bottom:194px;}
  .cta-top{margin-bottom:34px;}
  .link-area__heading-text{font-size:clamp(17px,5vw,21px);}
  
  
  
  
  
  
  
  
  
  
  
  
}
@media(max-width:350px){
  .link-area__heading-text{font-size:17px;}
  
  
}









/* ==================================================================
   V17 — CORREÇÕES DAS BORDAS DA FOTO
   O arquivo original PNG não foi editado: a máscara fica só no CSS.
   As bordas da foto original terminam no meio das mangas. O fade
   nas laterais evita cortes retos visíveis, sem modificar rostos.
================================================================== */
@media (min-width:761px) {
  .bio__people {
    right:-1vw;
    width:min(64vw,810px);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
    mask-composite: intersect;
  }
}
@media (min-width: 1600px) {
  .bio__people{right:-1vw;width:850px;}
}
@media (min-width:761px) and (max-width:1200px) {
  .bio__people{right:-1.2vw;width:min(76vw,790px);}
}
@media (max-width:760px) {
  .bio__people {
    width:min(100vw,500px);
    left:50%;right:auto;
    top:195px;
    transform:translateX(-50%);
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0%,#000 13%,#000 88%,transparent 100%),
      linear-gradient(180deg,#000 0%,#000 67%,transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg,transparent 0%,#000 13%,#000 88%,transparent 100%),
      linear-gradient(180deg,#000 0%,#000 67%,transparent 100%);
    mask-composite: intersect;
  }
}
@media (max-width:500px) {
  .bio__people {width:min(99vw,500px);top:194px;}
}










/* =====================================================================
   V19 — REFINAMENTO DAS REDES SOCIAIS
   1. Os avatares passam a caber COMPLETAMENTE dentro de cada tarja;
      nenhuma quina da imagem ultrapassa o fundo inclinado.
   2. O topo das tarjas foi ajustado para acolher os avatares sem recorte.
   3. Rótulos mais leves, condensados e inclinados (sem tipografia Black).
   4. Mesma cor de fundo das respectivas artes. Sem edição dos PNGs.
   A fotografia original, o CTA, o rodapé e as demais seções não mudam.
 ===================================================================== */
.social-links--teste { gap: 14px 16px; }
.social-links--teste .ribbon-link {
  height: 78px;
  padding: 10px 15px 10px 13px;
  gap: 10px;
  align-items: center;
  filter: drop-shadow(4px 5px 0 rgba(0, 8, 39, .57));
}
.social-links--teste .ribbon-link::before,
.social-links--teste .ribbon-link:nth-child(even)::before {
  clip-path: polygon(0 5%,93% 0%,100% 13%,100% 90%,5% 100%,0% 92%);
}
.social-links--teste .ribbon-link__icon {
  display:block;
  position:relative;
  z-index:1;
  width:60px;
  height:60px;
  flex:0 0 60px;
  object-fit:contain;
  align-self:center;
  margin:0;
  border:0;
  border-radius:9px;
  box-shadow:none;
  transform:none;
}
.social-links--teste .ribbon-link__label,
.social-links--teste .ribbon-link--site .ribbon-link__label {
  font-family: "Noto Sans Display", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  font-stretch: ultra-condensed;
  font-style:italic;
  font-weight:700;
  font-size:clamp(24px,2.15vw,29px);
  line-height:1;
  letter-spacing:-.025em;
  transform: skewX(-4deg);
  text-shadow:none;
  white-space:nowrap;
}
.social-links--teste .ribbon-link__arrow { font-size:23px; margin-left:auto; line-height:1; }
/* Fundo do ícone e tarja pertencem à mesma família cromática. */
.social-links--teste .ribbon-link--youtube  { --cor-botao:#f0f0f1; }
.social-links--teste .ribbon-link--instagram{ --cor-botao:#e70349; }
.social-links--teste .ribbon-link--tiktok   { --cor-botao:#1b1b1b; }
.social-links--teste .ribbon-link--x        { --cor-botao:#292929; }
.social-links--teste .ribbon-link--facebook { --cor-botao:#0058de; }
.social-links--teste .ribbon-link--site     { --cor-botao:#f5000b; }
.social-links--teste .ribbon-link__icon--site {
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.23);
  border-radius:9px;
}
@media (min-width:761px) and (max-width:1200px) {
  .social-links--teste .ribbon-link {gap:8px;padding-inline:10px;height:75px;}
  .social-links--teste .ribbon-link__icon {width:56px;height:56px;flex-basis:56px;}
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:clamp(19px,2.25vw,27px);}
}
@media (max-width:760px) {
  .social-links--teste {gap:10px;}
  .social-links--teste .ribbon-link {height:75px;padding:10px 12px;gap:11px;}
  .social-links--teste .ribbon-link__icon {width:58px;height:58px;flex-basis:58px;}
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:clamp(25px,5.8vw,32px);}
}
@media (max-width:380px) {
  .social-links--teste .ribbon-link {height:70px;padding-inline:9px;gap:8px;}
  .social-links--teste .ribbon-link__icon {width:53px;height:53px;flex-basis:53px;}
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label {font-size:clamp(23px,6.1vw,28px);}
  .social-links--teste .ribbon-link__arrow {font-size:20px;}
}


/* =====================================================================
   V20 — CHAMADA PRINCIPAL
   Apenas textos e o tamanho discreto do emoji: fotos, logotipo,
   tarjas sociais e a geometria do CTA são preservados.
 ===================================================================== */
.cta-top .join-label__emoji {
  display:inline-block;
  font-size:1.17em; /* ampliação sutil do emoji 👇 */
  line-height:0.9;
  vertical-align:-0.07em;
  margin-right:.16em;
  transform-origin:center;
}
@media (max-width:760px) {
  /* Mantém a chamada legível em telas estreitas sem comprometer as tarjas. */
  .cta-top .join-label { font-size:clamp(18px,4.7vw,24px); }
}
@media (max-width:360px) {
  .cta-top .join-label { font-size:18px; letter-spacing:0; }
  .cta-top .join-label__emoji { margin-right:.12em; }
}


/* ======================================================================
 V21 — TESTE DE TIPOGRAFIA (SOMENTE FONTE E SEU ENCAIXE)
 Ref. 1 "FIQUE POR DENTRO" -> Montserrat Black nas duas chamadas.
 Ref. 2 "PÁGINAS ESPECIAIS" -> Inter ExtraBold no cabeçalho e redes.
 Cores/font-colors, ícones, fotografias, formas, ângulos das tarjas,
 backgrounds, logotipo e links continuam idênticos aos da V20.
 As fontes remotas são opcionais: fallbacks preservam a hierarquia offline.
 ====================================================================== */
:root {
  --fonte-chamada-v21: "Montserrat", "Inter Display", "Arial Black", Arial, sans-serif;
  --fonte-redes-v21: "Inter", "Arial", Helvetica, sans-serif;
}
.cta-top .join-label {
  font-family: var(--fonte-chamada-v21);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.04em;
}
.cta-top .join-button__title {
  font-family: var(--fonte-chamada-v21);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -.055em;
  transform: none;
  font-size: clamp(30px, 3.5vw, 47px);
  white-space: nowrap;
}
.link-area .link-area__heading-text {
  font-family: var(--fonte-redes-v21);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.035em;
}
.social-links--teste .ribbon-link__label,
.social-links--teste .ribbon-link--site .ribbon-link__label {
  font-family: var(--fonte-redes-v21);
  font-weight: 800;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: -.04em;
  transform: none;
  font-size: clamp(18px, 1.9vw, 27px);
  white-space: nowrap;
}
@media (min-width:761px) and (max-width:1200px) {
  .cta-top .join-button__title { font-size: clamp(29px,3.7vw,43px); }
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label { font-size: clamp(17px,2.1vw,23px); }
}
@media (max-width:760px) {
  .cta-top .join-label { font-size: clamp(16px,4.35vw,22px); }
  .cta-top .join-button__title { font-size: clamp(23px,6.1vw,34px); }
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label { font-size:clamp(20px,5.9vw,27px); }
}
@media (max-width:380px) {
  .cta-top .join-label { font-size:clamp(15px,4.3vw,18px); }
  .cta-top .join-button__title { font-size:clamp(20px,5.9vw,24px); }
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label { font-size:clamp(18px,5.7vw,22px); }
}


/* ===============================================================
 V22 — RODAPÉ AZUL + LINHA MULTICOLORIDA IDÊNTICA À DO TOPO
 Mantém fonte, logo, links, ícones, fotos e todo o resto da V21.
 =============================================================== */
.footer.footer--credits {
  background: linear-gradient(115deg, #021852 0%, #04277e 58%, #031b65 100%);
  color: #fff;
  border-top: 0;
  padding-top: 29px;
}
/* Reutiliza exatamente o componente .topline do topo, incluindo
   proporções 42/23/17/18, cores e espessura de 9px. */
.footer--credits .footer__topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 9px;
  pointer-events: none;
  box-shadow: 0 4px 0 rgba(10,0,0,.23);
}


/* ======================================================================
   V23 — AJUSTES FINAIS DE HIERARQUIA, SOMBRA E RODAPÉ
   - "CONHEÇA NOSSAS REDES" sem tarja branca, no mesmo espírito de
     "JUNTOS SOMOS MAIS FORTES!", porém em branco.
   - Estrela PT no lugar do símbolo ✦.
   - Tarjas com sombra na mesma família visual do logotipo.
   - Rodapé com tipografia e acabamento mais próximos da referência.
   ====================================================================== */
:root {
  --sombra-logo-v23: drop-shadow(0 10px 18px rgba(0,0,0,.38));
}

.hero-brand__image {
  filter: var(--sombra-logo-v23);
}

/* Mais respiro entre a logo e a chamada principal */
.hero-brand {
  margin-bottom: 26px;
}
.cta-top {
  margin-top: 0;
  margin-bottom: 34px;
}
.cta-top .join-label {
  font-family: var(--fonte-chamada-v21);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -.045em;
  margin-bottom: 14px;
}

/* Cabeçalho das redes agora sem placa branca */
.link-area__heading {
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
}
.link-area__heading-text {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: #fff;
  clip-path: none;
  box-shadow: none;
  font-family: var(--fonte-chamada-v21);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1;
  letter-spacing: -.05em;
  text-shadow: 0 3px 0 rgba(4,16,58,.34);
}
.link-area__accent {
  flex: none;
}
.link-area__accent--pt {
  display: inline-grid;
  place-items: center;
  width: 1.08em;
  height: 1.08em;
  background: var(--amarelo);
  color: var(--vermelho);
  border-radius: .22em;
  font-family: var(--fonte-chamada-v21);
  font-size: 1.02em;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(4,16,58,.28);
  transform: rotate(-10deg);
}

/* Sombra das tarjas na mesma família da marca */
.social-links--teste .ribbon-link,
.cta-top .join-button {
  filter: var(--sombra-logo-v23);
}
.social-links--teste .ribbon-link:hover {
  filter: drop-shadow(0 13px 22px rgba(0,0,0,.46));
}

/* Remove a sensação de caixinha por trás do rostinho */
.social-links--teste .ribbon-link__icon {
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.social-links--teste .ribbon-link__icon--site {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
}

/* Ajuste fino da proporção das tarjas e tipografia */
.social-links--teste {
  gap: 13px 16px;
}
.social-links--teste .ribbon-link {
  height: 76px;
}
.social-links--teste .ribbon-link__label,
.social-links--teste .ribbon-link--site .ribbon-link__label {
  font-size: clamp(17px, 1.82vw, 25px);
  letter-spacing: -.05em;
}

/* Rodapé no estilo da referência: limpo, direto e elegante */
.footer.footer--credits {
  min-height: 92px;
  padding-top: 30px;
  padding-bottom: 22px;
}
.footer__credits {
  gap: 7px;
}
.footer__copyright,
.footer__signature {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: -.015em;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}
.footer__copyright {
  font-weight: 800;
}
.footer__author-link {
  color: #ffffff;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.footer__author-link:hover,
.footer__author-link:focus-visible {
  color: #fff;
  text-decoration-thickness: 2px;
}

@media (min-width:761px) and (max-width:1200px) {
  .hero-brand { margin-bottom: 22px; }
  .cta-top { margin-bottom: 30px; }
  .link-area__heading-text { font-size: clamp(18px, 2vw, 24px); }
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label { font-size: clamp(16px, 1.95vw, 22px); }
}

@media (max-width:760px) {
  .hero-brand { margin-bottom: 188px; }
  .cta-top { margin-top: 8px; margin-bottom: 29px; }
  .cta-top .join-label { font-size: clamp(18px, 4.65vw, 23px); }
  .link-area__heading { margin-bottom: 15px; }
  .link-area__heading-text { font-size: clamp(18px, 5vw, 23px); }
  .link-area__accent--pt { font-size: .95em; }
  .social-links--teste .ribbon-link { height: 72px; }
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label { font-size: clamp(18px, 5vw, 24px); }
  .footer.footer--credits { min-height: 88px; padding: 28px 18px 20px; }
  .footer__copyright, .footer__signature { font-size: 12px; line-height: 1.45; }
}

@media (max-width:380px) {
  .link-area__heading-text { font-size: 17px; }
  .social-links--teste .ribbon-link__label,
  .social-links--teste .ribbon-link--site .ribbon-link__label { font-size: clamp(17px, 5.4vw, 22px); }
}


/* ===================================================================
   V24 — ACABAMENTO PREMIUM REFINADO
   Mantém a identidade aprovada: nenhuma mudança nos rostos ou cores.
   =================================================================== */
:root {
 --sombra-marca-final: drop-shadow(0 10px 18px rgba(0,0,0,.38));
}
.hero-brand__image,
.social-links--teste .ribbon-link,
.cta-top .join-button {
 filter: var(--sombra-marca-final);
}
.social-links--teste .ribbon-link:hover {
 filter: drop-shadow(0 12px 22px rgba(0,0,0,.43));
}
.cta-top .join-button:hover {
 filter: drop-shadow(0 12px 22px rgba(0,0,0,.43));
}
/* Título em branco: mesma linguagem do convite, sem fundo, borda ou tarja */
.link-area .link-area__heading {
 gap: 10px;
 margin-bottom: 19px;
}
.link-area .link-area__heading-text {
 margin: 0;
 padding: 0;
 border: 0;
 background: none;
 color: #fff;
 -webkit-clip-path: none;
 clip-path: none;
 box-shadow: none;
 font-family: var(--fonte-chamada-v21);
 font-size: clamp(20px,2vw,29px);
 font-weight: 900;
 letter-spacing: -.045em;
 line-height: 1.1;
 text-shadow: 0 3px 0 rgba(0,16,70,.28);
}
/* PT: estrela vermelha, bordas arredondadas e acabamento semelhante a emoji */
.link-area .link-area__accent--pt {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: clamp(24px,2.15vw,31px);
 height: clamp(24px,2.15vw,31px);
 flex: none;
 margin: 0;
 padding: 0;
 background: transparent;
 border: 0;
 border-radius: 0;
 box-shadow: none;
 transform: rotate(-8deg);
 font-size: inherit;
}
.link-area__pt-mark {
 display: block;
 width: 100%;
 height: 100%;
 overflow: visible;
 filter: drop-shadow(0 2px 1px rgba(0,0,0,.32));
}
/* Integra os avatares às cores das faixas, sem retocar os PNGs.
   O desvanecimento leve retira a sensação de quadrado sobreposto. */
.social-links--teste .ribbon-link__icon:not(.ribbon-link__icon--site) {
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 object-fit: contain;
 -webkit-mask-image: radial-gradient(ellipse 59% 68% at 50% 50%, #000 0%, #000 61%, transparent 91%);
 mask-image: radial-gradient(ellipse 59% 68% at 50% 50%, #000 0%, #000 61%, transparent 91%);
}
/* Site oficial mantém o ícone do globo legível sem fundo quadrado. */
.social-links--teste .ribbon-link__icon--site,
.social-links--teste .ribbon-link--site .ribbon-link__icon--site {
 border: 0 !important;
 background: transparent !important;
 border-radius: 0;
 box-shadow: none;
}
/* Ritmo e altura mais homogêneos: evita sensação de empilhamento. */
.social-links--teste { row-gap: 14px; column-gap: 18px; }
.social-links--teste .ribbon-link { height: 76px; }
.social-links--teste .ribbon-link__label,
.social-links--teste .ribbon-link--site .ribbon-link__label {
 font-family: var(--fonte-redes-v21);
 font-weight: 800;
 font-style: normal;
 letter-spacing: -.043em;
}
/* Rodapé: texto compacto, branco, claro e link subtilmente sublinhado */
.footer.footer--credits {
 min-height: 82px;
 padding-top: 31px;
 padding-bottom: 18px;
}
.footer__credits {gap: 5px;}
.footer__credits p {
 font-family: 'Inter', Arial, Helvetica, sans-serif;
 font-size: 12.5px;
 font-weight: 700;
 line-height: 1.5;
 letter-spacing: -.014em;
 color: #eaf0ff;
}
.footer__copyright {font-weight: 700 !important;}
.footer__author-link {
 color: #c9d9ff;
 font-weight: 800;
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 2px;
}
.footer__author-link:hover,
.footer__author-link:focus-visible { color: #fff; text-decoration-thickness: 2px; }
@media (max-width:760px) {
 .link-area .link-area__heading {gap: 8px; margin-bottom: 16px;}
 .link-area .link-area__heading-text {font-size: clamp(17px,4.8vw,23px); letter-spacing: -.054em;}
 .link-area .link-area__accent--pt {width: clamp(23px,6vw,27px); height: clamp(23px,6vw,27px);}
 .social-links--teste {row-gap: 12px;}
 .social-links--teste .ribbon-link {height: 73px;}
 .footer.footer--credits {padding: 29px 18px 20px;}
 .footer__credits p {font-size: 11.5px;}
}
@media (max-width:380px) {
 .link-area .link-area__heading-text {font-size: 17px;}
 .social-links--teste .ribbon-link__label,
 .social-links--teste .ribbon-link--site .ribbon-link__label {font-size: clamp(17px,5.2vw,20px);}
 .footer__credits p {font-size: 11px;}
}

/* Ajuste de leitura: preserva espaços entre palavras nas fontes geométricas. */
.cta-top .join-label { letter-spacing: -.018em; }
.cta-top .join-button__title { letter-spacing: -.035em; }
.link-area .link-area__heading-text { letter-spacing: -.018em; }
@media (max-width:760px) {
 .cta-top .join-label { letter-spacing: -.025em; }
 .link-area .link-area__heading-text { letter-spacing: -.025em; }
}


/* =======================================================================
   V26 — REFINAMENTO APENAS DE RODAPÉ E SOMBRAS DAS TARJAS
   Base preservada: V24 (sem ícone do WhatsApp; seta original mantida).
   ======================================================================= */
:root {
  /* Exatamente os mesmos parâmetros de sombra usados no logo principal. */
  --sombra-marca-v26: drop-shadow(0 10px 18px rgba(0,0,0,.38));
}

/* O logo conserva sua sombra original. Todas as seis tarjas sociais e o
   convite amarelo passam a compartilhar seu mesmo acabamento. */
.hero-brand__image,
.social-links--teste .ribbon-link,
.cta-top .join-button {
  filter: var(--sombra-marca-v26);
}
.social-links--teste .ribbon-link:hover,
.cta-top .join-button:hover {
  /* Uma diferença sutil de elevação, sem perder a identidade da sombra. */
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.40));
}

/* Rodapé: referência de texto branco, leve, regular e perfeitamente centrado.
   Não altera fundo azul, faixa de quatro cores, ícones ou estrutura. */
.footer.footer--credits {
  justify-content: center;
  text-align: center;
  padding-top: 34px;
  padding-bottom: 26px;
  min-height: 114px;
}
.footer.footer--credits .footer__credits {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.footer.footer--credits .footer__credits p,
.footer.footer--credits .footer__copyright,
.footer.footer--credits .footer__signature {
  font-family: "Montserrat", "Inter", Arial, Helvetica, sans-serif;
  font-weight: 500 !important;
  font-size: clamp(13px, 1.13vw, 15px);
  line-height: 1.5;
  letter-spacing: -.012em;
  text-transform: none;
  text-align: center;
  color: #fff;
  margin: 0;
}
.footer.footer--credits .footer__author-link {
  color: #f5f8ff;
  font: inherit;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: rgba(255,255,255,.65);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.footer.footer--credits .footer__author-link:hover,
.footer.footer--credits .footer__author-link:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}
/* Elemento gráfico de versões antigas: não competir com os créditos. */
.footer.footer--credits .footer__decor { display: none; }

@media (max-width: 760px) {
  .footer.footer--credits {
    min-height: 104px;
    padding: 31px 17px 24px;
  }
  .footer.footer--credits .footer__credits { gap: 7px; }
  .footer.footer--credits .footer__credits p,
  .footer.footer--credits .footer__copyright,
  .footer.footer--credits .footer__signature {
    font-size: clamp(12px, 3.4vw, 13.5px);
    line-height: 1.48;
    letter-spacing: -.018em;
  }
}

/* V27 — ESTRELA VERMELHA ESTILO EMOJI 3D, SEM LETRAS "PT". */
.link-area .link-area__accent--pt {
  width: clamp(38px, 3.3vw, 46px);
  height: clamp(40px, 3.48vw, 48px);
  transform: rotate(-7deg);
  flex: 0 0 auto;
  overflow: visible;
}
.link-area .link-area__pt-mark {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 1px rgba(8,0,18,.34)) drop-shadow(0 4px 5px rgba(0,0,0,.27));
}
@media(max-width:760px) {
  .link-area .link-area__accent--pt { width: 38px; height: 40px; }
  .link-area .link-area__heading { gap: 7px; }
}
@media(max-width:380px) {
  .link-area .link-area__accent--pt { width: 34px; height: 36px; }
  .link-area .link-area__heading { gap: 6px; }
}


/* =======================================================================
   V28 — TEXTURA DE PAPEL NO FUNDO AZUL
   Aplicação editorial sutil: preserva contraste, pessoas e identidade.
   ======================================================================= */
:root {
  --textura-papel-url: url("assets/textura-papel-branco.png");
}

/* Base azul com mais profundidade, mantendo a leitura forte do layout. */
html,
body {
  background: #041e69;
}

.backdrop {
  background:
    linear-gradient(145deg, #032a86 0%, #0637a3 32%, #042b87 58%, #031b62 100%);
}

/* Pessoas intactas, apenas preservadas. */
.backdrop::before {
  filter: drop-shadow(0 20px 38px rgba(0,0,0,.22));
}

/* Mistura de textura + véu azul para gerar acabamento premium. */
.backdrop::after {
  background:
    linear-gradient(180deg,
      rgba(3, 21, 79, .34) 0%,
      rgba(3, 28, 96, .18) 14%,
      rgba(4, 38, 121, .10) 33%,
      rgba(3, 24, 83, .22) 58%,
      rgba(2, 17, 61, .42) 100%),
    var(--textura-papel-url) center center / 520px 520px repeat;
  opacity: .72;
  mix-blend-mode: soft-light;
}

/* Filme de granulação extra, bem leve, para unir tudo. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.06) 0%, transparent 36%),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.045) 0%, transparent 32%),
    radial-gradient(circle at 50% 88%, rgba(255,255,255,.05) 0%, transparent 38%),
    var(--textura-papel-url) center center / 760px 760px repeat;
  opacity: .115;
  mix-blend-mode: screen;
}

.page-shell,
.footer {
  position: relative;
  z-index: 1;
}

/* Em telas menores, suaviza a textura para não pesar atrás do conteúdo. */
@media (max-width: 760px) {
  .backdrop::after {
    background:
      linear-gradient(180deg,
        rgba(3, 21, 79, .38) 0%,
        rgba(3, 28, 96, .20) 18%,
        rgba(4, 38, 121, .12) 36%,
        rgba(3, 24, 83, .25) 63%,
        rgba(2, 17, 61, .45) 100%),
      var(--textura-papel-url) center center / 420px 420px repeat;
    opacity: .68;
  }
  body::before {
    background:
      radial-gradient(circle at 22% 14%, rgba(255,255,255,.05) 0%, transparent 34%),
      radial-gradient(circle at 80% 28%, rgba(255,255,255,.038) 0%, transparent 30%),
      var(--textura-papel-url) center center / 560px 560px repeat;
    opacity: .095;
  }
}


/* =======================================================================
   V29 — IDENTIDADE FINAL DAS TARJAS + HARMONIZAÇÃO DO CENÁRIO
   - A MESMA textura de papel da V28 nos fundos de todas as 7 tarjas.
   - Borda branca fina e diagonal seguindo exatamente o shape original.
   - Drop-shadow externo com os mesmos parâmetros do logotipo.
   - A amarela JUNTE-SE À TROPA! recebe O MESMO acabamento das 6 sociais.
   - Foto harmonizada com alteração tonal mínima, sem recriar nenhum rosto.
   ======================================================================= */
:root {
  --tarja-mesma-sombra-do-logotipo: drop-shadow(0 10px 18px rgba(0,0,0,.38));
  --tarja-papel: url("assets/textura-papel-tarjas.png");
  --tarja-contorno: #fff;
  --tarja-borda: 2.4px;
}

/* Regra única de sombra: segue o contorno irregular, não o retângulo. */
.hero-brand__image,
.social-links--teste .ribbon-link,
.cta-top .join-button {
  filter: var(--tarja-mesma-sombra-do-logotipo);
}
.social-links--teste .ribbon-link:hover,
.cta-top .join-button:hover {
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.42));
}

/* Em cada faixa, o ::before desenha a borda branca; o ::after é a
   superfície colorida+textura. Assim a borda acompanha cada diagonal. */
.social-links--teste .ribbon-link {
  --forma-tarja: polygon(0 5%,93% 0%,100% 13%,100% 90%,5% 100%,0% 92%);
  background: transparent;
  isolation: isolate;
  overflow: visible;
}
.social-links--teste .ribbon-link:nth-child(even) {
  --forma-tarja: polygon(0 5%,93% 0%,100% 13%,100% 90%,5% 100%,0% 92%);
}
.social-links--teste .ribbon-link::before,
.social-links--teste .ribbon-link:nth-child(even)::before {
  content: "";
  z-index: -2;
  inset: 0;
  background: var(--tarja-contorno);
  clip-path: var(--forma-tarja);
}
.social-links--teste .ribbon-link::after {
  content: "";
  position: absolute;
  inset: var(--tarja-borda);
  z-index: -1;
  pointer-events: none;
  clip-path: var(--forma-tarja);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.047) 0%, transparent 55%, rgba(0,0,0,.06) 100%),
    var(--tarja-papel);
  background-color: var(--cor-botao);
  background-position: center, center;
  background-size: cover, 190px auto;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, multiply;
}
.social-links--teste .ribbon-link__icon,
.social-links--teste .ribbon-link__label,
.social-links--teste .ribbon-link__arrow {
  position: relative;
  z-index: 1;
}

/* Tarja AMARELA recebe exatamente a mesma textura, moldura e sombra.
   Mantém a estrela, o texto azul e a SETA ORIGINAL. */
.cta-top .join-button {
  isolation: isolate;
  background: #fff;
  --forma-tarja-amarela: polygon(0 8%,95% 0%,100% 16%,100% 87%,5% 100%,0% 91%);
  clip-path: var(--forma-tarja-amarela);
}
.cta-top .join-button::before {
  content: "";
  position: absolute;
  inset: var(--tarja-borda);
  z-index: 0;
  pointer-events: none;
  clip-path: var(--forma-tarja-amarela);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 58%, rgba(0,0,0,.045) 100%),
    var(--tarja-papel);
  background-color: var(--amarelo);
  background-size: cover, 210px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, multiply;
}
.cta-top .join-button:hover { background: #fff; }
.cta-top .join-button:hover::before {background-color: #ffe632;}
.cta-top .join-button__star,
.cta-top .join-button__title,
.cta-top .join-button__arrow { position: relative; z-index: 1; }

/* Temperatura ambiente discreta nos tons escuros da foto já harmonizada.
   Arquivo da foto original permanece na pasta /assets, intocado. */
.bio__people {
  filter: contrast(.992) saturate(.975)
          drop-shadow(0 14px 26px rgba(0,12,62,.19));
}

@media (max-width:760px) {
  :root { --tarja-borda: 2.1px; }
  .social-links--teste .ribbon-link::after { background-size: cover, 180px auto; }
  .cta-top .join-button::before { background-size: cover, 190px auto; }
}


/* =======================================================================
   V30 — ÍCONES VETORIAIS + FAIXAS SEM BORDAS + CTA VERDE
   • Remoção integral dos filetes brancos (social e CTA).
   • A textura de papel colore a tarja de ponta a ponta.
   • A sombra externa permanece na mesma família do logotipo.
   • Estrelas e mão vetoriais FLAT, sem volume/brilho 3D, com sombra.
   • CTA usa verde WhatsApp #25D366, sem acrescentar ícone WhatsApp.
   ======================================================================= */
:root {
  --cta-verde-whatsapp: #25D366;
  --cta-verde-hover: #2fe077;
}

/* As duas camadas ocupam TODO o mesmo polígono: sem contorno branco,
   sem bordas internas e sem espaços transparentes nas diagonais. */
.social-links--teste .ribbon-link::before,
.social-links--teste .ribbon-link:nth-child(even)::before {
  inset: 0;
  background: var(--cor-botao);
  clip-path: var(--forma-tarja);
}
.social-links--teste .ribbon-link::after,
.social-links--teste .ribbon-link:nth-child(even)::after {
  inset: 0;
  border: 0;
  clip-path: var(--forma-tarja);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.042) 0%, transparent 55%, rgba(0,0,0,.058) 100%),
    var(--tarja-papel);
  background-color: var(--cor-botao);
  background-position: center, center;
  background-size: cover, 190px auto;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, multiply;
}

/* Tarja principal: verde WhatsApp, textura contínua até os recortes,
   tipografia e seta originais preservadas. */
.cta-top .join-button {
  background: var(--cta-verde-whatsapp);
  color: var(--azul);
  border: 0;
  --tarja-borda: 0px;
}
.cta-top .join-button::before {
  inset: 0;
  border: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 58%, rgba(0,0,0,.052) 100%),
    var(--tarja-papel);
  background-color: var(--cta-verde-whatsapp);
  background-size: cover, 210px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, multiply;
}
.cta-top .join-button:hover { background: var(--cta-verde-hover); }
.cta-top .join-button:hover::before { background-color: var(--cta-verde-hover); }

/* Símbolos flat em vetor, uma única cor sólida por forma, mais a sombra.
   Não usar filtros de brilho, gradients, chanfros ou extrusão. */
.cta-top .join-label__emoji {
  display: inline-flex;
  width: 1.15em;
  height: 1.15em;
  align-items: center;
  justify-content: center;
  vertical-align: -.16em;
  margin-right: .13em;
  transform: rotate(-5deg);
  line-height: 1;
}
.cta-top .join-label__emoji .icone-mao-vetorial {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 2px rgba(0,12,46,.58));
}
.cta-top .join-button__star {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transform: rotate(-9deg);
}
.cta-top .join-button__star .icone-estrela-vetorial,
.link-area .link-area__pt-mark {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 3px rgba(0,10,42,.54));
}
.link-area .icone-estrela-vetorial {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 3px rgba(0,10,42,.54));
}

@media (max-width: 760px) {
  .cta-top .join-button__star {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }
  .social-links--teste .ribbon-link::after {
    background-size: cover, 180px auto;
  }
  .cta-top .join-button::before {
    background-size: cover, 190px auto;
  }
}
@media (max-width: 380px) {
  .cta-top .join-button__star { width: 24px; height: 24px; flex-basis: 24px; }
}


/* =======================================================================
   VERSÃO 31 — CTA verde com título branco e ícone WhatsApp branco
   ======================================================================= */
.cta-top .join-button {
  color: #fff;
}
.cta-top .join-button__title,
.cta-top .join-button__arrow {
  color: #fff;
}
.cta-top .join-button__star {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  transform: rotate(-6deg);
}
.cta-top .join-button__star .icone-whatsapp-vetorial {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 3px rgba(0,10,42,.52));
}
.cta-top .join-label__emoji {
  width: 1.18em;
  height: 1.18em;
  margin-right: .14em;
  transform: rotate(-4deg);
}
.cta-top .join-label__emoji .icone-mao-vetorial {
  filter: drop-shadow(0 3px 2px rgba(0,12,46,.54));
}
@media (max-width: 760px) {
  .cta-top .join-button__star { width: 38px; height: 38px; flex-basis: 38px; }
}
@media (max-width: 380px) {
  .cta-top .join-button__star { width: 34px; height: 34px; flex-basis: 34px; }
}


/* =====================================================================
   V32 — PERSONAGEM ORIGINAL NA CHAMADA (SUBSTITUI SOMENTE MÃOZINHA)
   Retrato transparente fornecido pelo cliente; tamanho contido e sombra
   delicada, preservando a faixa verde e todas as outras áreas.
   ===================================================================== */
.cta-top .join-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  line-height: 1.08;
}
.cta-top .join-label__emoji {
  display: inline-flex;
  flex: 0 0 46px;
  width: 46px;
  height: 47px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  transform: none;
  vertical-align: baseline;
  overflow: visible;
  line-height: 1;
}
.cta-top .join-label__personagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: drop-shadow(0 3px 5px rgba(0, 9, 49, .34));
}
.cta-top .join-label__text {
  min-width: 0;
  display: inline-block;
  white-space: normal;
}
@media (max-width: 760px) {
  .cta-top .join-label {
    gap: 7px;
    font-size: clamp(16px, 4.4vw, 21px);
    letter-spacing: -.025em;
  }
  .cta-top .join-label__emoji {
    flex-basis: 40px;
    width: 40px;
    height: 41px;
  }
}
@media (max-width: 380px) {
  .cta-top .join-label {
    gap: 6px;
    font-size: clamp(15px, 4.4vw, 17px);
  }
  .cta-top .join-label__emoji {
    flex-basis: 36px;
    width: 36px;
    height: 37px;
  }
}


/* ==============================================================
   V33 — PERSONAGEM APROXIMADAMENTE 3x MAIOR
   Manter retrato original, sombra sutil e responsividade.
   Antes: 46 x 47 desktop; 40 x 41 mobile; 36 x 37 <380px.
   Agora: 138 x 141 desktop; 120 x 123 mobile; 108 x 111 <380px.
   ============================================================== */
.cta-top .join-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 141px;
  margin-bottom: 14px;
}
.cta-top .join-label__emoji {
  display: inline-flex;
  flex: 0 0 138px;
  width: 138px;
  height: 141px;
  margin: 0;
  padding: 0;
  transform: none;
  overflow: visible;
}
.cta-top .join-label__personagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0, 8, 42, .32));
}
.cta-top .join-label__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  white-space: normal;
  line-height: 1.18;
}
@media (max-width: 760px) {
  .cta-top .join-label { gap: 10px; min-height: 123px; margin-bottom: 12px; }
  .cta-top .join-label__emoji { flex: 0 0 120px; width: 120px; height: 123px; }
  .cta-top .join-label__text { font-size: clamp(16px, 4.4vw, 21px); }
}
@media (max-width: 380px) {
  .cta-top .join-label { gap: 8px; min-height: 111px; }
  .cta-top .join-label__emoji { flex: 0 0 108px; width: 108px; height: 111px; }
  .cta-top .join-label__text { font-size: clamp(15px, 4.4vw, 17px); }
}


/* ===============================================================
   V34 — HARMONIA DA CHAMADA: PERSONAGEM E TEXTO AMARELO
   Redução proporcional, encaixe central, tipografia legível e sombra
   discreta. Preserva imagem, CTA, demais cores e todo o layout.
   =============================================================== */
.cta-top .join-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 96px;
  gap: 12px;
  padding: 0;
  margin: 0 0 14px;
  color: #ffe12c;
}
.cta-top .join-label__emoji {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0;
  padding: 0;
  transform: none;
  align-self: center;
}
.cta-top .join-label__personagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 4px 7px rgba(0, 8, 46, .36));
}
.cta-top .join-label__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-family: var(--fonte-chamada-v21);
  font-size: clamp(22px, 2.0vw, 27px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.034em;
  white-space: normal;
  overflow-wrap: normal;
  color: #ffe12c;
  text-shadow: 0 3px 6px rgba(0, 13, 59, .56);
}
.cta-top .join-label__second { display: inline; }
@media (max-width: 760px) {
  .cta-top .join-label { min-height: 84px; gap: 11px; margin-bottom: 12px; }
  .cta-top .join-label__emoji { flex: 0 0 84px; width: 84px; height: 84px; }
  .cta-top .join-label__text {
    font-size: clamp(18px, 4.9vw, 21px);
    line-height: 1.11;
    letter-spacing: -.032em;
  }
  .cta-top .join-label__second { display: block; }
}
@media (max-width: 380px) {
  .cta-top .join-label { min-height: 76px; gap: 9px; margin-bottom: 12px; }
  .cta-top .join-label__emoji { flex: 0 0 76px; width: 76px; height: 76px; }
  .cta-top .join-label__text { font-size: clamp(16px, 4.85vw, 18.3px); }
}


/* V38 — apenas acessibilidade/SEO técnico, sem mudanças visuais */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}