/* ============================================================================
   Charlles de Tiringa 4088  ·  estilo
   Azul-marinho dominante, foto sangrando, numeracao grande, sem moldura.
   Cores: paleta APROVADA da marca. Nenhum hex solto abaixo dos tokens.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Alfa Slab One';
  src: url('../assets/fonts/alfaslabone.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
/* script do lema, a cursiva da peça de campanha */
@font-face {
  font-family: 'Hurricane';
  src: url('../assets/fonts/hurricane.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

:root {
  /* paleta APROVADA da marca, com a hierarquia do proprio manual */
  --ambar:      #FAA519;
  --azul:       #16469D;
  --laranja:    #F36F21;
  --azul-fundo: #011F5E;
  --verde:      #37B44A;
  --alerta:     #C81E1E;

  --papel:      #F4EDE0;
  --papel-2:    #EADFCB;
  --tinta:      #0A1730;
  --tinta-fraca: rgba(244,237,224,.66);

  /* titulo na Montserrat no peso maximo; a slab de madeira fica so no cordel */
  --display: 'Montserrat', system-ui, sans-serif;
  --texto:   'Montserrat', system-ui, -apple-system, sans-serif;
  --serif:   'Alfa Slab One', Georgia, serif;
  --script:  'Hurricane', 'Snell Roundhand', cursive;

  --xilo-sulco: var(--azul-fundo);

  --u: 4px;
  --lg: min(1240px, 90vw);
  --raio: 0px;                      /* nenhum bloco tem canto arredondado */
}

/* -------------------------------------------------------------------- BASE */
*, *::before, *::after { box-sizing: border-box }
/* clip no html tambem: overflow-x no body sozinho nao segura elemento
   deslocado por transform durante a animacao */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  line-height: 1.6;
  color: var(--papel);
  background: var(--azul-fundo);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block }
img { height: auto }
a { color: inherit }
main, header, footer { position: relative; z-index: 1 }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1; margin: 0; letter-spacing: -.03em }
h2 { font-size: clamp(34px, 6.4vw, 76px); color: var(--papel); text-transform: uppercase }
h3 { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.01em }
p { margin: 0 0 calc(var(--u) * 4) }

.lg { width: var(--lg); margin-inline: auto }
.secao { padding: clamp(64px, 11vw, 140px) 0; position: relative }
/* o cabecalho e fixo: sem esta folga ele cobre o titulo de quem chega pelo menu
   ou por um link com #ancora */
.secao, #inicio { scroll-margin-top: 84px }
/* Ritmo: as secoes ancora (mapa, propostas, faca parte) respiram; as de
   listagem (diario, galeria) sao mais compactas. Rolagem com cadencia em vez
   de nove blocos do mesmo tamanho. */
#diario, #galeria { padding-block: clamp(48px, 7vw, 92px) }
#depoimentos, #perguntas { padding-block: clamp(56px, 9vw, 116px) }
#mapa, #propostas, #faca-parte { padding-block: clamp(72px, 12vw, 156px) }

/* alternancia de fundo: marinho, azul, marinho. Sem textura. */
.secao--azul { background: var(--azul) }
.secao--papel2 { background: var(--papel); color: var(--tinta) }
.secao--papel2 h2 { color: var(--azul-fundo) }
.secao--ambar { background: var(--ambar); color: var(--azul-fundo) }
.secao--ambar h2 { color: var(--azul-fundo) }

/* fio ambar curto acima de cada titulo, no lugar da moldura */
.secao h2::before {
  content: ''; display: block; width: 64px; height: 6px;
  background: var(--ambar); margin-bottom: calc(var(--u)*6);
}
.secao--ambar h2::before { background: var(--azul-fundo) }

.olho {
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; color: var(--tinta-fraca);
  margin: calc(var(--u)*4) 0 calc(var(--u)*8); max-width: 46ch;
}
.secao--papel2 .olho { color: rgba(10,23,48,.66) }
.secao--ambar .olho { color: rgba(1,31,94,.75) }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
a.sr:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: 99;
  width: auto; height: auto; clip-path: none; overflow: visible;
  min-height: 48px; display: inline-flex; align-items: center; padding: 0 20px;
  background: var(--ambar); color: var(--azul-fundo); font-weight: 700; text-decoration: none;
}
:where(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px }

/* ------------------------------------------------------------------ BOTOES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u)*2);
  min-height: 56px; padding: 0 calc(var(--u)*8);
  font: 700 1rem var(--texto); letter-spacing: .02em; text-decoration: none;
  background: var(--ambar); color: var(--azul-fundo); border: 2px solid var(--ambar);
  border-radius: 0; cursor: pointer; transition: background .16s, color .16s;
}
.btn:hover { background: transparent; color: var(--ambar) }
.btn--vazado { background: transparent; color: var(--papel); border-color: rgba(244,237,224,.45) }
.btn--vazado:hover { background: var(--papel); color: var(--azul-fundo); border-color: var(--papel) }
.btn--azul { background: var(--azul-fundo); border-color: var(--azul-fundo); color: var(--papel) }
.btn--azul:hover { background: transparent; color: var(--azul-fundo) }
.secao--papel2 .btn--azul:hover, .secao--ambar .btn--azul:hover { color: var(--azul-fundo) }

/* ------------------------------------------------------------ XILOGRAVURAS */
/* xilogravura como detalhe pequeno (icones das propostas, capa do cordel),
   nao como ornamento de pagina */
.xilo { width: 1em; height: 1em; fill: currentColor }

/* ---------------------------------------------------------------- REVELAÇÃO */
/* Quem revela e o anime.js (js/anima.js). O CSS entrega tudo VISIVEL de
   proposito: se o modulo nao carregar (navegador sem ESM, rede caindo), a
   pagina continua legivel em vez de ficar em branco. O JS esconde e anima. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}

/* ------------------------------------------------------------------ HEADER */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: calc(var(--u)*5);
  padding: calc(var(--u)*3) max(calc(var(--u)*5), 4vw);
  background: rgba(1,31,94,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(244,237,224,.16);
  transform: translateY(-105%); transition: transform .3s ease;
}
.topo.aparece { transform: none }
.topo__logo { height: 32px; width: auto; margin-right: auto }
.topo__nav { display: none; gap: calc(var(--u)*7) }
.topo__nav a { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: var(--papel) }
.topo__nav a:hover { color: var(--ambar) }
.topo .btn { min-height: 44px; padding: 0 calc(var(--u)*5); font-size: .84rem }
@media (min-width: 900px) { .topo__nav { display: flex } }

/* -------------------------------------------------------------------- HERO */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  background: var(--azul-fundo); color: var(--papel);
  display: grid; align-items: center;
  padding: calc(var(--u)*30) 5vw calc(var(--u)*26);
}
/* Andorinhas em marca d'agua. Duas regras que valem ouro aqui: cada uma
   aparece INTEIRA (cortada pela borda ela vira um risco diagonal que parece
   defeito, nao ornamento) e nenhuma passa por tras do rosto dele. */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    url('../assets/andorinha.svg') no-repeat 8% 88% / clamp(120px, 17vw, 250px),
    url('../assets/andorinha.svg') no-repeat 52% 14% / clamp(80px, 11vw, 160px),
    url('../assets/andorinha.svg') no-repeat 40% 62% / clamp(56px, 7vw, 105px);
  opacity: .07;
}
.hero__dentro {
  position: relative; z-index: 2;
  display: grid; justify-items: start; gap: calc(var(--u)*5);
  max-width: 1240px; margin-inline: auto; width: 100%;
}

/* A marca e o logo SEM a andorinha mais a andorinha por cima, posta na posicao
   exata em que ela nasce no arquivo original. As porcentagens saem da bounding
   box dela dentro do viewBox do logo, entao o encaixe e o mesmo em qualquer
   largura. Sem JS ela ja fica no lugar: a animacao so a tira e devolve. */
.hero__marca { position: relative; width: min(400px, 68vw); margin: 0; font: inherit; letter-spacing: normal }
.hero__logo { width: 100%; height: auto }
.hero__andorinha {
  position: absolute;
  left: 77.218%; top: -0.229%; width: 22.950%; height: 43.534%;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* o retrato recortado, sangrando pela base como na referencia.
   As duas mascaras dissolvem a foto no azul: uma pela esquerda (para ela nao
   bater de frente com o texto) e outra pelo pe (para nao ficar borda dura na
   base). mask-composite: intersect quer dizer "so onde as duas deixam passar".
   Navegador sem suporte a mask ignora e mostra o recorte cheio: nada quebra. */
.hero__retrato {
  position: absolute; z-index: 1; bottom: 0; right: 0;
  /* o teto e a propria altura do hero: assim ela cresce o maximo possivel sem
     cortar o bone dele no topo */
  height: min(96vh, 100%, 980px); width: auto; max-width: none;
  object-fit: contain; object-position: bottom right;
  pointer-events: none;

  --fade: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%),
          linear-gradient(to top, transparent 0%, #000 20%);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* enquanto o modulo de animacao nao assume, o slogan fica invisivel: quem poe e
   tira essa marca e o script no <head>, com timer de seguranca */
[data-escrevendo] .hero__lema { opacity: 0 }
.hero__lema {
  font-family: var(--script); font-weight: 400; letter-spacing: 0; line-height: 1.02;
  font-size: clamp(46px, 9.4vw, 118px); color: var(--papel);
  text-transform: none; margin: calc(var(--u)*3) 0 0; max-width: 16ch;
  /* a script tem descendente longa: sem folga o "P" e o "b" cortam */
  padding-bottom: .12em;
}
/* o fio cresce da esquerda quando a escrita termina. Sem JS, --fio nao existe
   e o fallback 1 deixa ele inteiro desde o inicio. */
.hero__lema::after {
  content: ''; display: block; width: 90px; height: 8px; background: var(--ambar);
  margin-top: calc(var(--u)*5); transform-origin: left center;
  transform: scaleX(var(--fio, 1));
}
.hero__sub { font-size: clamp(17px, 2vw, 23px); font-weight: 500; color: rgba(244,237,224,.86); margin: 0; max-width: 32ch }
.hero__acoes { display: flex; flex-wrap: wrap; gap: calc(var(--u)*3); margin-top: calc(var(--u)*5) }
/* a esquerda, e nao a direita: do lado direito ele ficava atras do retrato */
.hero__rolar {
  position: absolute; bottom: calc(var(--u)*6); left: 5vw; z-index: 3;
  display: grid; justify-items: start; gap: calc(var(--u)*2);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244,237,224,.7); text-decoration: none;
}
.hero__rolar span { font-size: 1.3rem; animation: desce 1.8s ease-in-out infinite }
@keyframes desce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(7px) } }

/* Faixa do tablet: a foto e grande demais para caber ao lado do texto. */
@media (min-width: 800px) and (max-width: 1100px) {
  .hero__retrato { height: min(62vh, 600px); right: -18% }
  .hero__lema { font-size: clamp(44px, 7.6vw, 82px) }
}

/* No celular o hero PRECISA caber numa tela so: reservar espaco embaixo para a
   foto fazia o bloco passar de 950px numa tela de 664, e o visitante nunca via
   logo e botao juntos. Aqui a foto fica no canto, atras do texto, e o degrade
   dela garante a leitura. */
@media (max-width: 799px) {
  .hero {
    align-content: center;
    padding: calc(var(--u)*22) 5vw calc(var(--u)*8);
  }
  .hero__dentro { gap: calc(var(--u)*3); z-index: 2 }
  .hero__marca { width: min(300px, 58vw) }
  .hero__lema { font-size: clamp(34px, 10.5vw, 52px); max-width: 9ch; margin-top: calc(var(--u)*2) }
  .hero__lema::after { width: 64px; height: 6px; margin-top: calc(var(--u)*3) }
  .hero__sub { font-size: 1rem; max-width: 22ch }
  .hero__acoes { gap: calc(var(--u)*2); margin-top: calc(var(--u)*3) }
  .hero__acoes .btn { min-height: 50px; padding: 0 calc(var(--u)*5); font-size: .92rem }
  /* a foto encosta no canto de baixo e some no azul antes de chegar no texto */
  .hero__retrato { height: 46vh; right: -10%; z-index: 0 }
  .hero__rolar { display: none }        /* a foto ja ocupa o pe da tela */
}

/* Tela baixa (iPhone SE, paisagem, navegador com barra grande): aperta o
   suficiente para o hero continuar cabendo de uma vez. */
@media (max-width: 799px) and (max-height: 620px) {
  .hero { padding-top: calc(var(--u)*16); padding-bottom: calc(var(--u)*5) }
  .hero__marca { width: min(250px, 50vw) }
  .hero__lema { font-size: clamp(30px, 9vw, 42px) }
  .hero__sub { font-size: .94rem }
  .hero__acoes .btn { min-height: 46px; font-size: .86rem }
  .hero__retrato { height: 40vh }
}

/* --------------------------------------------------------------- BIOGRAFIA */
/* numeracao grande no lugar da moldura: 01, 02, 03... */
#historia .lg { counter-reset: cap }
.capitulos { display: grid; gap: 0 }
.cap {
  counter-increment: cap;
  display: grid; gap: calc(var(--u)*6); align-items: center;
  padding: calc(var(--u)*8) 0;
  border-top: 1px solid rgba(244,237,224,.2);
  background: none; border-radius: 0;
}
.cap:first-child { border-top: 0 }
.cap__foto { width: 100%; aspect-ratio: 16/11; object-fit: cover; border-radius: 0; background: rgba(244,237,224,.07) }
/* o placeholder tem que ocupar o MESMO espaco da foto que vai entrar, senao o
   layout muda de cara no dia que a campanha mandar o material */
.cap .foto-vazia { aspect-ratio: 16/11; min-height: 0 }
.cap__marco { color: var(--ambar); margin-bottom: calc(var(--u)*3); text-transform: uppercase; letter-spacing: .01em }
.cap__marco::before {
  content: '0' counter(cap);
  display: block; font-size: clamp(52px, 8vw, 96px); font-weight: 800;
  color: rgba(244,237,224,.14); line-height: .9; margin-bottom: calc(var(--u)*2); letter-spacing: -.04em;
}
.cap__texto { font-size: clamp(21px, 3vw, 34px); font-weight: 600; line-height: 1.22; letter-spacing: -.02em; margin: 0 }
.seta { display: none }
@media (min-width: 800px) {
  .cap { grid-template-columns: 1fr 1fr; gap: calc(var(--u)*14) }
  .cap:nth-child(4n+3) .cap__foto { order: 2 }
}

/* -------------------------------------------------------------------- MAPA */
.mapa__quadro {
  background: none; border: 0; border-radius: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* sombra na borda direita enquanto houver mapa fora da tela: e o aviso de
     que da para arrastar. Some sozinha ao chegar no fim. */
  background-image: linear-gradient(to left, rgba(1,31,94,.85), transparent 44px);
  background-position: right center; background-size: 44px 100%;
  background-repeat: no-repeat; background-attachment: local, scroll;
}
@media (min-width: 1100px) { .mapa__quadro { background-image: none } }
@media (min-width: 1100px) { .mapa__quadro { margin-inline: calc(var(--u)*-8) } }
.mapa__svg { width: 100%; min-width: 560px; height: auto }
.mapa__contorno { fill: rgba(244,237,224,.06); stroke: var(--ambar); stroke-width: 3; stroke-linejoin: round }
.mapa__ponto { cursor: pointer; fill: var(--ambar); stroke: none; transition: r .15s, fill .15s }
.mapa__ponto:hover, .mapa__ponto:focus-visible { fill: var(--papel); r: 15 }
.mapa__rotulo {
  font: 700 16px var(--texto); fill: var(--papel);
  /* contorno na cor do fundo: o nome fica legivel mesmo por cima do traco */
  paint-order: stroke; stroke: var(--azul); stroke-width: 4px; stroke-linejoin: round;
}
.mapa__dica { font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(244,237,224,.55); margin-top: calc(var(--u)*6) }
.secao--azul .mapa__contorno { fill: rgba(1,31,94,.4) }

/* -------------------------------------------------- DEPOIMENTOS e PERGUNTAS */
.grade { display: grid; gap: calc(var(--u)*7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) }
#perguntas .grade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
#perguntas .video-card__capa { aspect-ratio: 16/10 }
/* o diario e listagem: tres por linha fecha certo com seis posts */
@media (min-width: 900px) { #diario-grade { grid-template-columns: repeat(3, 1fr) } }
.video-card {
  display: grid; gap: 0; padding: 0; text-align: left; width: 100%;
  background: none; border: 0; border-radius: 0; overflow: hidden;
  cursor: pointer; font: inherit; color: inherit;
}
.video-card:hover { transform: none }
.video-card__capa {
  position: relative; aspect-ratio: 4/5; background: rgba(244,237,224,.08);
  display: grid; place-items: center; border: 0; overflow: hidden;
}
.video-card__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.video-card:hover .video-card__capa img { transform: scale(1.05) }
.video-card__play {
  position: relative; z-index: 2; width: 66px; height: 66px; border-radius: 50%;
  background: var(--ambar); border: 0; display: grid; place-items: center;
  color: var(--azul-fundo); font-size: 1.3rem; padding-left: 4px; transition: transform .2s;
}
.video-card:hover .video-card__play { transform: scale(1.08) }
.video-card__txt { padding: calc(var(--u)*4) 0 0 }
.video-card__quem {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; line-height: 1.2;
  letter-spacing: -.01em; color: var(--papel); text-transform: uppercase;
  /* a pergunta pode ter duas linhas: sem isso ela era cortada na base do card */
  margin: 0; text-wrap: balance;
}
.secao--papel2 .video-card__quem { color: var(--azul-fundo) }
.video-card__nome { font-size: .88rem; color: var(--tinta-fraca); margin: calc(var(--u)) 0 0 }

/* ------------------------------------------------- DEPOIMENTOS EM ESPERA */
/* Enquanto nenhum video foi gravado, os cards viram uma faixa de nomes: diz
   quem vai falar sem fingir que ja existe conteudo. O app.js poe a classe
   sozinho e a tira no dia em que o primeiro video entrar no conteudo.js. */
.grade--espera {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: calc(var(--u)*3);
}
.grade--espera .video-card {
  flex-direction: row; display: flex; align-items: center; gap: calc(var(--u)*4);
  border: 1px solid rgba(244,237,224,.22); padding: calc(var(--u)*4);
  cursor: default;
}
.grade--espera .video-card__capa {
  aspect-ratio: 1; width: 42px; flex: none; background: none;
  border: 1px solid rgba(244,237,224,.3); border-radius: 50%;
}
.grade--espera .video-card__capa img { display: none }
.grade--espera .video-card__play {
  width: 100%; height: 100%; background: none; color: rgba(244,237,224,.55);
  font-size: .8rem; padding-left: 2px;
}
.grade--espera .video-card:hover .video-card__play { transform: none }
.grade--espera .video-card__txt { padding: 0 }
.grade--espera .video-card__quem { font-size: .92rem }
.grade--espera .video-card__nome { display: none }
/* a tarja de "a preencher" seria uma por card: aqui um aviso so basta */
.grade--espera .ph { outline: 0 }
.grade--espera .ph::after { content: none }

/* --------------------------------------------------------------- PROPOSTAS */
#propostas .lg { counter-reset: prop }
.propostas { display: grid; gap: 0; grid-template-columns: 1fr }
.proposta {
  counter-increment: prop;
  background: none; border: 0; border-radius: 0; border-bottom: 1px solid rgba(244,237,224,.2);
  padding: calc(var(--u)*8) 0;
  display: grid; gap: calc(var(--u)*3); align-items: start;
  grid-template-columns: auto 1fr;
  --xilo-sulco: var(--azul);
}
.proposta .xilo { width: 44px; height: 44px; color: var(--ambar); grid-row: span 2 }
.proposta h3 {
  color: var(--papel); text-transform: uppercase; align-self: center;
  display: flex; align-items: baseline; gap: calc(var(--u)*3);
  font-size: clamp(24px, 3.4vw, 40px);
}
.proposta h3::before {
  content: '0' counter(prop);
  font-size: .5em; font-weight: 800; color: var(--ambar); letter-spacing: 0;
}
.proposta p { margin: 0; grid-column: 2; font-size: 1.02rem; color: rgba(244,237,224,.8); max-width: 58ch }
@media (min-width: 900px) {
  .proposta { grid-template-columns: auto minmax(0,.5fr) minmax(0,1fr); align-items: center; gap: calc(var(--u)*7) }
  .proposta p { grid-column: 3 }
}

/* ------------------------------------------------------------------ DIARIO */
.post { position: relative; aspect-ratio: 1; border: 0; border-radius: 0; overflow: hidden;
  background: rgba(244,237,224,.07); display: block; text-decoration: none }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.post:hover img { transform: scale(1.06) }
.post__legenda {
  position: absolute; inset: auto 0 0; padding: calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*4);
  background: linear-gradient(transparent, rgba(1,31,94,.55) 45%, rgba(1,31,94,.95));
  color: var(--papel); display: grid; gap: 2px;
}
.post__legenda strong { font-size: .94rem; font-weight: 700; line-height: 1.25 }
.post__legenda em {
  font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ambar);
}
.diario__cta { display: flex; margin-top: calc(var(--u)*10) }

/* ------------------------------------------------------------------ CORDEL */
/* unico bloco claro da pagina: o folheto respira sozinho */
.folheto {
  background: var(--papel); color: var(--tinta); border: 0; border-radius: 0;
  padding: clamp(28px, 5vw, 72px); max-width: 940px; margin-inline: auto; box-shadow: none;
}
.folheto__capa { text-align: center; border-bottom: 1px solid rgba(10,23,48,.2); padding-bottom: calc(var(--u)*6); margin-bottom: calc(var(--u)*8) }
.folheto__capa .xilo { width: 60px; height: 60px; color: var(--azul-fundo); margin-inline: auto; --xilo-sulco: var(--papel) }
.folheto__titulo { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 40px); color: var(--azul-fundo); margin: calc(var(--u)*4) 0 0; letter-spacing: 0 }
.folheto__autoria { font-size: .78rem; color: rgba(10,23,48,.55); letter-spacing: .16em; text-transform: uppercase }
.estrofes { columns: 1; column-gap: calc(var(--u)*12) }
.estrofe { break-inside: avoid; margin: 0 0 calc(var(--u)*7); font-family: var(--serif); font-size: .98rem; line-height: 2 }
.estrofe span { display: block }
.folheto__acoes { display: flex; justify-content: center; margin-top: calc(var(--u)*8) }
@media (min-width: 700px) { .estrofes { columns: 2 } }

/* ----------------------------------------------------------------- GALERIA */
/* Grade uniforme. O destaque 2x2 na primeira foto era bonito no papel, mas com
   oito fotos sobrava uma celula vazia no fim da grade. */
.galeria { display: grid; gap: calc(var(--u)*2); grid-template-columns: repeat(2, 1fr) }
.galeria button {
  padding: 0; border: 0; border-radius: 0; overflow: hidden;
  background: rgba(244,237,224,.07); cursor: pointer; aspect-ratio: 1;
}
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.galeria button:hover img { transform: scale(1.06) }
/* No celular sao duas colunas: quando o total e impar a ultima ocupa a linha
   inteira, em vez de deixar meia linha vazia. A regra se adapta sozinha se a
   campanha somar ou tirar uma foto. */
@media (max-width: 759px) {
  .galeria button:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16/9 }
}
/* tres colunas: as nove fotos fecham 3x3 sem sobrar celula vazia, e cada uma
   fica grande o bastante para valer o clique */
@media (min-width: 760px) { .galeria { grid-template-columns: repeat(3, 1fr) } }

/* -------------------------------------------------------------- FAÇA PARTE */
/* Em tela larga o formulario sozinho deixava metade do bloco vazia: titulo e
   chamada de um lado, campos do outro. */
@media (min-width: 900px) {
  #faca-parte .lg {
    display: grid; grid-template-columns: 1fr 1fr;
    /* a terceira linha absorve a sobra: sem ela o titulo e a chamada eram
       esticados pela altura do formulario e abriam um vao entre os dois */
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(48px, 7vw, 110px); align-items: start;
  }
  /* a andorinha ocupa a sobra da coluna do texto, no lugar de ar parado */
  #faca-parte .lg::after {
    content: ''; grid-column: 1; grid-row: 3; align-self: end; justify-self: start;
    width: clamp(160px, 20vw, 300px); aspect-ratio: 217/245;
    background: url('../assets/andorinha.svg') no-repeat center / contain;
    opacity: .13;
  }
  #faca-parte h2   { grid-column: 1; grid-row: 1 }
  #faca-parte .olho { grid-column: 1; grid-row: 2; margin-bottom: 0; font-size: clamp(19px, 1.9vw, 25px) }
  #faca-parte .form { grid-column: 2; grid-row: 1 / -1; max-width: none }
}
.form {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; max-width: 560px; margin-inline: 0;
  display: grid; gap: calc(var(--u)*6);
}
.campo { display: grid; gap: calc(var(--u)*2) }
.campo label { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--azul-fundo) }
.campo input {
  min-height: 56px; padding: 0 calc(var(--u)*4); font: inherit; color: var(--azul-fundo);
  background: transparent; border: 0; border-bottom: 2px solid rgba(1,31,94,.4); border-radius: 0;
}
.campo input::placeholder { color: rgba(1,31,94,.45) }
.campo input:focus { border-bottom-color: var(--azul-fundo); outline-offset: 6px }
.campo input:invalid:not(:placeholder-shown) { border-bottom-color: var(--alerta) }
.intencoes { display: grid; gap: calc(var(--u)*2) }
.intencoes legend { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--azul-fundo); padding: 0; margin-bottom: calc(var(--u)*3) }
.intencao { display: flex; align-items: center; gap: calc(var(--u)*3); min-height: 48px; cursor: pointer }
.intencao input { width: 22px; height: 22px; accent-color: var(--azul-fundo) }
fieldset { border: 0; padding: 0; margin: 0 }
.form__aviso { font-size: .82rem; color: rgba(1,31,94,.66); margin: 0 }
.secao--ambar .btn--azul:hover { background: transparent; color: var(--azul-fundo); border-color: var(--azul-fundo) }

/* ------------------------------------------------------------------ RODAPE */
.rodape { background: var(--azul-fundo); color: var(--papel); padding: calc(var(--u)*20) 0 calc(var(--u)*10); border-top: 1px solid rgba(244,237,224,.2) }
.rodape__topo { display: grid; gap: calc(var(--u)*10); align-items: start }
.rodape__logo { width: 220px; max-width: 66vw; height: auto }
.rodape__redes { display: flex; gap: calc(var(--u)*3); flex-wrap: wrap }
.rodape__redes a {
  min-height: 48px; min-width: 48px; padding: 0 calc(var(--u)*5);
  display: inline-flex; align-items: center;
  border: 1px solid rgba(244,237,224,.35); border-radius: 0;
  text-decoration: none; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
}
.rodape__redes a:hover { background: var(--ambar); color: var(--azul-fundo); border-color: var(--ambar) }
.rodape__numero { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 13vw, 150px); color: var(--ambar); line-height: .82; letter-spacing: -.05em }
.rodape__legal { border-top: 1px solid rgba(244,237,224,.16); margin-top: calc(var(--u)*12); padding-top: calc(var(--u)*7); font-size: .76rem; color: rgba(244,237,224,.5) }
@media (min-width: 800px) { .rodape__topo { grid-template-columns: 1.1fr 1fr auto } }

/* ---------------------------------------------------------------- DIALOGOS */
dialog {
  border: 0; border-radius: 0; padding: 0;
  background: var(--papel); color: var(--tinta);
  width: min(900px, 94vw); max-height: 90svh; overflow: auto;
}
dialog::backdrop { background: rgba(1,31,94,.92) }
.dlg__topo { display: flex; align-items: center; gap: calc(var(--u)*4); padding: calc(var(--u)*5); border-bottom: 1px solid rgba(10,23,48,.15) }
.dlg__topo h3 { color: var(--azul-fundo); margin-right: auto; text-transform: uppercase }
.dlg__fechar {
  min-width: 48px; min-height: 48px; border-radius: 0; border: 1px solid rgba(10,23,48,.3);
  background: none; color: var(--azul-fundo); font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.dlg__fechar:hover { background: var(--azul-fundo); color: var(--papel) }
.dlg__corpo { padding: calc(var(--u)*5) }
.dlg__corpo img, .dlg__corpo video, .dlg__corpo iframe { width: 100%; border-radius: 0 }
.dlg__corpo iframe, .dlg__corpo video { aspect-ratio: 16/9; height: auto; border: 0 }
.dlg__nav { display: flex; justify-content: space-between; gap: calc(var(--u)*3); padding: 0 calc(var(--u)*5) calc(var(--u)*5) }
.dlg__nav .btn { background: var(--azul-fundo); border-color: var(--azul-fundo); color: var(--papel) }
.dlg__nav .btn:hover { background: transparent; color: var(--azul-fundo) }

/* ------------------------------------------------------------- PLACEHOLDER */
.ph { position: relative; outline: 1px dashed rgba(200,30,30,.7); outline-offset: 2px }
.ph::after {
  content: 'a preencher'; position: absolute; top: 0; right: 0; z-index: 3;
  background: var(--alerta); color: #fff; font: 700 10px/1 var(--texto);
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px;
}
.foto-vazia {
  display: grid; place-items: center; background: rgba(244,237,224,.07);
  color: rgba(244,237,224,.45); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .12em; text-align: center; padding: calc(var(--u)*6); min-height: 120px;
}
.secao--papel2 .foto-vazia, dialog .foto-vazia { background: rgba(10,23,48,.06); color: rgba(10,23,48,.45) }

/* --------------------------------------------------------------- IMPRESSAO */
@media print {
  body { background: #fff; color: #000 }
  .secao:not(#cordel) { display: none !important }
  #cordel { padding: 0; background: #fff }
  #cordel h2, #cordel .olho, .folheto__acoes { display: none }
  .folheto { border: 1px solid #000; box-shadow: none; max-width: 100%; page-break-inside: avoid }
  .estrofes { columns: 2 }
}