/* ===== Valiante Produções Artísticas — design tokens ===== */
:root{
  --navy: #0d1660;
  --navy-dark: #080d40;
  --navy-soft: #1c2a8f;
  --white: #ffffff;
  --off-white: #f5f6fb;
  --ink: #10133a;
  --muted: #6b6f95;
  --border: #e3e4f2;
  --radius: 18px;
  --container: 1180px;
  /* Manual da marca: uma fonte só, a Futura PT. Ela é licenciada (ParaType) e
     não pode ser servida sem licença de webfont — enquanto essa licença não
     entra, quem desenha na tela é a Jost, releitura livre da Futura no Google
     Fonts. Com a licença em mãos, basta carregar a Futura PT (Adobe Fonts ou
     .woff2 próprio): o nome já está na frente da fila e ela assume sozinha. */
  --ff: 'Futura PT', 'Jost', system-ui, sans-serif;
  /* Uma fonte só significa uma variável só. As três continuam existindo porque
     o resto do CSS as usa, mas apontam todas para a mesma família — a hierarquia
     agora vem de peso e caixa, não de trocar de fonte. */
  --ff-display: var(--ff);
  --ff-display-sm: var(--ff);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--ff);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
/* Manual da marca: título é CAIXA ALTA e BOLD.
   Sobre o letter-spacing: caixa alta em geométrica normalmente pede um respiro,
   mas isso vale para texto pequeno. Nos tamanhos de título daqui as letras já se
   separam sozinhas, e o espaço extra soltava as palavras umas das outras — o
   olho lia letra por letra em vez de varrer a frase. Zerado, a palavra volta a
   ser um bloco só. Quem é caixa alta e pequeno (.eyebrow, .tag, .obra-credito)
   tem tracking próprio, mais largo, e não passa por aqui. */
h1,h2,h3,h4{
  font-family: var(--ff-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0;
  line-height:1.12;
  margin:0;
}
p{ margin:0; }

.container{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding: 0 24px;
}

/* ===== buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight:700;
  font-size:0.95rem;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary{ background: var(--white); color: var(--navy); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(13,22,96,.25); }
.btn-ghost{ border-color: rgba(255,255,255,.5); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn-lg{ padding: 16px 36px; font-size:1.05rem; }

/* ===== decorative V pattern (used on hero + section accents) ===== */
.v-pattern-bg{
  background-image:
    linear-gradient(135deg, transparent 45%, rgba(255,255,255,.08) 45% 55%, transparent 55%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.05) 0 2px, transparent 2px 46px);
}

/* ===== header ===== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 18px 0;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(13,22,96,.08);
  padding: 12px 0;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{ height: 64px; width:auto; }
.main-nav ul{ display:flex; align-items:center; gap: 26px; }
.main-nav a{
  font-weight:600;
  font-size:.9rem;
  color: #fff;
  transition: color .25s ease, opacity .25s ease;
  position:relative;
}
.site-header.scrolled .main-nav a{ color: var(--navy); }
.main-nav a:not(.nav-cta):after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background: currentColor;
  transition: width .25s ease;
}
.main-nav a:not(.nav-cta):hover:after{ width:100%; }
.nav-cta{
  background: #fff;
  color: var(--navy) !important;
  padding: 10px 22px;
  border-radius: 100px;
}
.site-header.scrolled .nav-cta{ background: var(--navy); color:#fff !important; }

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.menu-toggle span{
  width: 26px; height: 2px; background:#fff; border-radius:2px; transition: all .3s ease;
}
.site-header.scrolled .menu-toggle span{ background: var(--navy); }

/* ===== hero ===== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(160deg, rgba(13,22,96,.65) 0%, rgba(8,13,64,.82) 100%),
    url('../assets/img/hero-bg.png');
  background-size: cover;
  background-position: center;
  overflow:hidden;
}
.hero-inner{ position:relative; padding-top: 90px; }
.eyebrow{
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size:.8rem;
  font-weight:700;
  margin-bottom: 24px;
}
.hero h1{
  color:#fff;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: -0.01em;
}
/* block (e nao inline-block) para a palavra ocupar sempre a linha inteira: as
   curtas como "oficinas" cabiam ao lado de "Levamos" e subiam para a primeira
   linha, quebrando o alinhamento das longas. O <br> saiu do HTML porque depois
   de um bloco ele geraria uma linha vazia. */
.rotating-word{
  display:block;
  color: #ffd23f;
  position: relative;
}
.hero-lead{
  color: rgba(255,255,255,.8);
  font-size: 1.15rem;
  max-width: 620px;
  line-height: 1.6;
  margin-top: 28px;
}
.hero-tagline{
  margin-top: 22px;
  color: #ffd23f;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.01em;
}
.hero-actions{
  display:flex;
  gap:18px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.scroll-cue{
  position:absolute;
  bottom: 36px; left:50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 20px;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; transform: translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:#fff;
  animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; transform: translate(-50%,0); }
  100%{ opacity:0; transform: translate(-50%,14px); }
}

/* ===== section basics ===== */
.section{ padding: 110px 0; }
.tag{
  display:inline-block;
  font-weight:800;
  text-transform: uppercase;
  letter-spacing:.1em;
  font-size:.78rem;
  color: var(--navy-soft);
  margin-bottom:16px;
}
.tag-center{ display:block; text-align:center; }
.section-title{
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  /* mesmo aperto do h1 do hero: acima de ~2rem a caixa alta aguenta tracking
     negativo e ganha em fluidez */
  letter-spacing: -.01em;
  max-width: 780px;
  margin: 0 auto;
  text-align:center;
  color: var(--ink);
}
.section-subtitle{
  max-width: 620px;
  margin: 18px auto 0;
  text-align:center;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ===== seções em azul (alternam com as brancas) ===== */
.section-navy{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff;
}
/* duas seções navy seguidas: a de baixo vira cor chapada no tom em que a de
   cima termina. Sem isso o gradiente reinicia no tom claro e a emenda vira
   um degrau horizontal que parece defeito de renderização. */
.section-navy + .section-navy{ background: var(--navy-dark); }
.section-navy .tag{ color: #ffd23f; }
.section-navy .section-title{ color:#fff; }
.section-navy .section-subtitle,
.section-navy .placeholder-note{ color: rgba(255,255,255,.75); }
/* cards claros dentro das seções azuis voltam a herdar o texto escuro */
.section-navy .portfolio-card,
.section-navy .audience-card,
.section-navy .testimonial{ color: var(--ink); }
.section-navy .benefits-list li{ color:#fff; }
.section-navy .benefits-list li::before{ background:#fff; }
.section-navy .benefits-list li::after{ border-color: var(--navy); }
.section-navy .accordion-item{ border-bottom-color: rgba(255,255,255,.18); }
.section-navy .accordion-header{ color:#fff; }
.section-navy .accordion-icon::before,
.section-navy .accordion-icon::after{ background:#fff; }
.section-navy .accordion-panel p{ color: rgba(255,255,255,.75); }
/* o bloco split traz cor própria no texto (ink/muted), que sumiria no azul.
   O :not(.tag) importa: a tag também é um <p> e perderia o amarelo aqui. */
.section-navy .split-text .lead{ color:#fff; }
.section-navy .split-text p:not(.lead):not(.tag){ color: rgba(255,255,255,.78); }
/* precisa dos dois níveis: .split-text p:not(.lead) pinta a tag de cinza e
   tem especificidade maior que a regra geral .section-navy .tag */
.section-navy .split-text .tag{ color:#ffd23f; }

/* ===== missão / split ===== */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.split-media img{
  border-radius: var(--radius);
  aspect-ratio: 4/5;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(13,22,96,.18);
}
.split-text .lead{
  font-size: 1.2rem;
  font-weight:600;
  color: var(--ink);
  margin-bottom: 18px;
}
.split-text p:not(.lead){
  color: var(--muted);
  font-size: 1.02rem;
  line-height:1.7;
}
.split-text h2{ margin-bottom: 22px; font-size: clamp(1.8rem,3vw,2.4rem); }

/* ===== portfolio ===== */
.portfolio-grid{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.portfolio-card{
  background: var(--off-white);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.portfolio-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px rgba(13,22,96,.15); }
.portfolio-media{ aspect-ratio: 4/3; overflow:hidden; background: var(--navy); }
.portfolio-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.portfolio-card:hover .portfolio-media img{ transform: scale(1.06); }
/* cartaz: enquadrar inteiro, sem cortar título nem créditos */
.portfolio-media.is-poster img{ object-fit: contain; }
.portfolio-card:hover .portfolio-media.is-poster img{ transform:none; }
/* sem registro disponível ainda */
.portfolio-media.is-empty{
  background: rgba(13,22,96,.06);
  border-bottom: 1px solid var(--border);
}
.portfolio-body{ padding: 22px 24px 26px; }
.portfolio-body h3{ font-size:1.15rem; margin-bottom:10px; }
.portfolio-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.portfolio-tags span{
  font-size:.72rem;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.04em;
  color: var(--navy-soft);
  background: rgba(13,22,96,.08);
  padding: 5px 10px;
  border-radius: 100px;
}
.portfolio-body p{ color: var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:16px; }
.portfolio-link{ font-weight:700; color: var(--navy); font-size:.92rem; }
.portfolio-link:hover{ text-decoration: underline; }

/* ===== catálogo: abas de formato + carrossel de obras ===== */
.cat{ margin-top: 48px; }
.cat-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom: 40px;
}
.cat-tab{
  font-family: var(--ff);
  font-weight:700;
  font-size:.92rem;
  padding: 11px 24px;
  border-radius:100px;
  border:2px solid rgba(255,255,255,.28);
  background:none;
  color:#fff;
  cursor:pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cat-tab:hover{ border-color:#fff; }
.cat-tab.is-active{ background:#ffd23f; border-color:#ffd23f; color: var(--navy); }

.cat-panel[hidden]{ display:none; }
.cat-track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 56px) / 3);
  gap: 28px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width:none;
  /* a trilha sempre reserva 3 colunas, então painéis com 1 ou 2 obras sobravam
     encostados à esquerda. o "safe" é o que evita o bug clássico de centralizar
     conteúdo que transborda: quando não cabe, ele volta a alinhar pelo início e
     o carrossel continua rolável até a primeira obra */
  justify-content: safe center;
}
.cat-track::-webkit-scrollbar{ display:none; }

.obra{
  scroll-snap-align:start;
  background: var(--off-white);
  border-radius: var(--radius);
  overflow:hidden;
  color: var(--ink);
}
.obra-media{ aspect-ratio:4/3; background: var(--navy); overflow:hidden; }
.obra-media img{ width:100%; height:100%; object-fit:cover; }
.obra-media.is-poster img{ object-fit:contain; }
/* fotos bem panorâmicas perdem 25% da largura no recorte 4:3 do card. quando a
   cena não está no meio do quadro original, o corte central desencosta a dupla
   do centro — daí puxar o enquadramento para a esquerda nesses casos */
.obra-media.foco-esquerda img{ object-position: 20% center; }
/* foto quase quadrada: no recorte 4:3 padrão ela perdia um quarto da altura,
   cortando chapéus em cima e figurinos embaixo. aqui a caixa acompanha a
   proporção da imagem, então o card fica mais alto e nada é cortado */
.obra-media.is-quadrada{ aspect-ratio: 1/1; }
.obra-media.is-quadrada img{ object-fit: contain; }
.obra-body{ padding: 20px 22px 24px; }
.obra-nome{ font-size:1.05rem; margin-bottom:8px; }
.obra-credito{
  color: var(--navy-soft);
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
/* leva ao formulário com o nome da obra já escrito na mensagem: o interesse é
   capturado onde ele nasce, olhando a obra, e não cinco seções abaixo */
/* sem pílula: o botão competia com o nome da obra, que é o que a pessoa veio ler.
   sobra o mínimo que ainda diz "clique aqui" — cor de link, sublinhado e a seta */
.obra-interesse{
  display:inline-flex;
  align-items:center;
  gap:6px;
  /* o padding de cima não aparece (não há fundo nem moldura), mas engorda a área
     de toque no celular, que sem a pílula ficaria da altura de uma linha de texto */
  margin-top:6px;
  padding:8px 0 4px;
  border-bottom:1.5px solid var(--border);
  color: var(--navy);
  font-size:.84rem;
  font-weight:700;
  transition: border-color .2s ease, color .2s ease;
}
/* a seta anda no hover: reforça que leva a algum lugar, sem precisar de moldura */
.obra-interesse::after{
  content:'›';
  font-size:1.05rem;
  line-height:1;
  transition: transform .2s ease;
}
.obra-interesse:hover{ border-color: var(--navy); }
.obra-interesse:hover::after{ transform: translateX(3px); }
/* ----- obra com sinopse: no hover, um véu claro sobe sobre a foto ----- */
.obra.tem-sinopse{ outline-offset: 4px; }
.obra.tem-sinopse .obra-media{ position: relative; }
.obra.tem-sinopse .obra-media img{
  transition: filter .4s ease, transform .4s ease;
}
/* desfoque leve, só o suficiente para a foto virar fundo sem deixar de ser
   reconhecível. o scale acompanha porque o blur amostra o vazio além da borda
   da imagem e criaria uma moldura clara nos quatro lados */
.obra.tem-sinopse:hover .obra-media img,
.obra.tem-sinopse:focus-within .obra-media img{
  filter: blur(3px);
  transform: scale(1.09);
}
.obra-sinopse{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 26px 24px;
  /* véu claro: é ele que sustenta o texto escuro. quanto menor a opacidade,
     mais a foto aparece — 55% é o ponto em que a cena mais escura do catálogo
     ainda deixa o texto acima de 5:1 de contraste. abaixo de 50% o texto
     começa a sumir nas fotos escuras */
  background: rgba(245, 246, 251, .55);
  color: var(--ink);
  opacity: 0;
  transition: opacity .35s ease;
}
.obra.tem-sinopse:hover .obra-sinopse,
.obra.tem-sinopse:focus-within .obra-sinopse{ opacity: 1; }
.obra-sinopse p{
  font-size: .92rem;
  line-height: 1.55;
  transform: translateY(8px);
  transition: transform .35s ease;
}
.obra.tem-sinopse:hover .obra-sinopse p,
.obra.tem-sinopse:focus-within .obra-sinopse p{ transform: none; }

@media (prefers-reduced-motion: reduce){
  .obra.tem-sinopse .obra-media img{ transition: none; }
  .obra-sinopse, .obra-sinopse p{ transition: none; }
  .obra-sinopse p{ transform: none; }
}

/* vaga ainda sem obra cadastrada */
.obra.is-empty{
  background: rgba(255,255,255,.05);
  border: 2px dashed rgba(255,255,255,.2);
  min-height: 340px;
}

.cat-nav{ display:none; justify-content:center; gap:12px; margin-top:28px; }
.cat-arrow{
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:none;
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  transition: background .25s ease, border-color .25s ease;
}
.cat-arrow:hover{ border-color:#fff; background: rgba(255,255,255,.1); }
.cat-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin-top: 44px; }

/* O catálogo nasceu em seção azul: abas, setas, cards e botões são todos
   brancos, o que some quando a seção é clara. Aqui cada um ganha a versão
   escura. Escopo em .producoes para não afetar as seções azuis. */
/* :not(.is-active) porque estas regras vêm depois na folha e, com a mesma
   especificidade, roubariam a cor e a borda amarela da aba selecionada */
.producoes .cat-tab:not(.is-active){ border-color: var(--border); color: var(--ink); }
.producoes .cat-tab:not(.is-active):hover{ border-color: var(--navy); }
/* a aba ativa continua amarela: sobre ela o texto é navy, não amarelo,
   então a leitura não cai como cairia com amarelo sobre branco */
.producoes .cat-arrow{ border-color: var(--border); color: var(--navy); }
.producoes .cat-arrow:hover{ border-color: var(--navy); background: rgba(13,22,96,.06); }
/* card off-white sobre seção branca precisa de contorno para não se dissolver */
.producoes .obra{ border: 1px solid var(--border); }
.producoes .obra.is-empty{ background: var(--off-white); border: 2px dashed var(--border); }
.producoes .btn-primary{ background: var(--navy); color:#fff; }
.producoes .btn-ghost{ border-color: rgba(13,22,96,.35); color: var(--navy); }
.producoes .btn-ghost:hover{ border-color: var(--navy); background: rgba(13,22,96,.06); }

/* ===== services ===== */
.services-list{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 48px;
}
.service-item{
  display:flex;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.service-num{
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: rgba(13,22,96,.25);
  flex-shrink:0;
}
.service-item h3{ font-size:1.15rem; margin-bottom:8px; }
.service-item p{ color: var(--muted); line-height:1.6; }

/* ===== padrões incluídos em toda entrega ===== */
.standards{ margin-top: 64px; }
.standards-title{
  text-align:center;
  font-weight:800;
  text-transform: uppercase;
  letter-spacing:.1em;
  font-size:.78rem;
  color: var(--navy-soft);
  margin-bottom: 24px;
}
.standards-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.standard-card{
  background: var(--off-white);
  border-radius: var(--radius);
  border-left: 4px solid var(--navy);
  padding: 28px 30px;
}
.standard-card h3{ font-size:1.15rem; margin-bottom:10px; }
.standard-card p{ color: var(--muted); line-height:1.6; }

/* ===== parcerias / captação ===== */
.benefits-list{
  max-width: 720px;
  margin: 48px auto 0;
  display:grid;
  gap: 16px;
}
.benefits-list li{
  position:relative;
  padding-left: 34px;
  font-weight:600;
  color: var(--ink);
  line-height:1.5;
}
.benefits-list li::before{
  content:'';
  position:absolute; left:0; top:2px;
  width:20px; height:20px;
  border-radius:50%;
  background: var(--navy);
}
.benefits-list li::after{
  content:'';
  position:absolute; left:6px; top:6px;
  width:9px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform: rotate(-45deg);
}
.parcerias-cta{ text-align:center; margin-top: 36px; }

.audience-grid{
  margin-top: 72px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.audience-card{
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 32px 28px;
  border-top: 4px solid var(--navy);
}
.audience-num{
  display:block;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: rgba(13,22,96,.3);
  margin-bottom: 14px;
}
.audience-card h3{ font-size:1.15rem; margin-bottom:10px; }
.audience-card p{ color: var(--muted); line-height:1.6; }

/* ===== números (dentro de prova social) ===== */
/* faixa azul: é o que permite o amarelo da marca nos números.
   Sobre branco o amarelo fica em 1,44:1 — ilegível. Sobre este azul, 11,2:1. */
.stats-band{
  margin-top: 56px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius);
  padding: 52px 40px 44px;
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align:center;
}
.stats-band .stat p{ color: rgba(255,255,255,.78); }
.stats-note{
  text-align:center;
  margin-top: 32px;
  color: rgba(255,255,255,.55);
  font-size:.8rem;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.08em;
}
.stat-num{
  display:block;
  font-family: var(--ff-display);
  /* o número é o argumento da faixa, não uma legenda: peso e tamanho precisam
     ser declarados aqui. A fonte antiga já vinha preta de fábrica e mascarava
     essa falta — a de agora tem a escala inteira de pesos e obedece ao que
     estiver escrito, então nada é herdado por acidente. */
  font-weight: 800;
  font-size: clamp(2.9rem, 5vw, 4.2rem);
  line-height: 1;
  color: #ffd23f;
  margin-bottom: 14px;
  /* dígitos de largura fixa: evita o número tremer enquanto a contagem sobe */
  font-variant-numeric: tabular-nums;
}
.stat p{ color: var(--muted); font-size:1rem; max-width: 260px; margin: 0 auto; line-height:1.5; }

/* ===== prova social ===== */
.social-proof-grid{
  margin: 56px auto 0;
  max-width: 980px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.social-proof-media{
  aspect-ratio: 4/3;
  border: 2px dashed rgba(13,22,96,.3);
  border-radius: var(--radius);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 24px;
  background: rgba(13,22,96,.04);
}
.social-proof-media p{ color: var(--muted); font-size:.9rem; max-width: 340px; line-height:1.6; font-style: italic; }
.social-proof-media.has-media{
  margin:0;
  padding:0;
  border: none;
  overflow: hidden;
  background: var(--navy);
}
.social-proof-media.has-media img{ width:100%; height:100%; object-fit: cover; }
.play-icon{
  width:0; height:0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent rgba(13,22,96,.35);
  margin-bottom: 16px;
}

.logo-strip-title{
  text-align:center;
  margin-top: 72px;
  font-size:.85rem;
  font-weight:800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing:.08em;
}
/* Faixa de logos em movimento. O .logo-track guarda duas cópias idênticas da
   lista (a segunda é clonada pelo main.js), então deslocar a trilha em -50%
   deixa a cópia 2 exatamente onde a cópia 1 começou: o salto do fim da
   animação cai num quadro idêntico e o loop fica invisível. */
.logo-marquee{
  margin-top: 28px;
  overflow-x: auto;
  /* as pontas desbotam para os logos entrarem e saírem em vez de serem cortados */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.logo-track{
  display:flex;
  width: max-content;
  gap: 16px;
}
/* a trilha define largura fixa por logo: as porcentagens do grid antigo
   não valem dentro de uma faixa rolante */
.logo-track .logo-slot{ flex: 0 0 180px; }
/* só rola depois que o main.js clonou a lista; sem JS a faixa continua
   legível como uma fila que o usuário arrasta na horizontal */
.logo-marquee.is-rolling{ overflow: hidden; }
.logo-marquee.is-rolling .logo-track{ animation: logo-marquee 30s linear infinite; }
.logo-marquee.is-rolling:hover .logo-track{ animation-play-state: paused; }
@keyframes logo-marquee{
  /* metade da trilha, mais metade do gap que separa as duas cópias */
  to{ transform: translateX(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: reduce){
  .logo-marquee.is-rolling{ overflow-x: auto; }
  .logo-marquee.is-rolling .logo-track{ animation: none; }
}
.logo-slot{
  aspect-ratio: 3/2;
  border: 2px dashed var(--border);
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-size:.7rem;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.03em;
  text-align:center;
  padding: 8px;
}
.logo-slot.has-logo{
  border: 1px solid var(--border);
  background: var(--white);
  padding: 14px;
}
.logo-slot.has-logo img{ max-width:100%; max-height:100%; object-fit: contain; }
/* instituições que só publicam o logo em versão branca precisam de fundo escuro */
.logo-slot.has-logo.is-dark{ background: var(--navy); border-color: var(--navy); }
.placeholder-note{
  text-align:center;
  margin-top: 28px;
  color: var(--muted);
  font-size:.85rem;
  font-style: italic;
  max-width: 620px;
  margin-left:auto;
  margin-right:auto;
}

.testimonial.is-placeholder{ background: transparent; border: 2px dashed var(--border); border-top: 2px dashed var(--border); }
.testimonial.is-placeholder p{ color: var(--muted); font-style: italic; }
.testimonial.is-placeholder footer strong,
.testimonial.is-placeholder footer span{ color: var(--muted); }

.section-navy .testimonial.is-placeholder{ border-color: rgba(255,255,255,.28); }
.section-navy .testimonial.is-placeholder p,
.section-navy .testimonial.is-placeholder footer strong,
.section-navy .testimonial.is-placeholder footer span{ color: rgba(255,255,255,.6); }

/* ===== accordion ===== */
.accordion{ margin-top: 56px; max-width: 820px; margin-left:auto; margin-right:auto; }
.accordion-item{ border-bottom: 1px solid var(--border); }
.accordion-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:none;
  text-align:left;
  padding: 24px 4px;
  font-family: var(--ff);
  font-weight:700;
  font-size:1.08rem;
  color: var(--ink);
  cursor:pointer;
}
.accordion-icon{
  position:relative;
  width:18px; height:18px; flex-shrink:0;
}
.accordion-icon::before,.accordion-icon::after{
  content:''; position:absolute; background: var(--navy);
  transition: transform .3s ease;
}
.accordion-icon::before{ top:8px; left:0; width:18px; height:2px; }
.accordion-icon::after{ top:0; left:8px; width:2px; height:18px; }
.accordion-item.is-open .accordion-icon::after{ transform: rotate(90deg) translate(0,0); opacity:0; }
.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.accordion-item.is-open .accordion-panel{ max-height: 240px; padding-bottom: 24px; }
.accordion-panel p{ color: var(--muted); line-height:1.7; padding-right: 40px; }

/* ===== testimonials ===== */
.testimonials-grid{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}
.testimonial{
  margin:0;
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 32px;
  border-top: 4px solid var(--navy);
}
.testimonial p{ font-size:1.02rem; line-height:1.65; color: var(--ink); margin-bottom:22px; }
.testimonial footer strong{ display:block; font-size:.95rem; }
.testimonial footer span{ display:block; color: var(--muted); font-size:.85rem; }
/* a cidade é a terceira linha da assinatura — caixa alta pra não ser lida
   como mais um nome de instituição */
.testimonial footer .testimonial-cidade{
  margin-top: 6px;
  font-size:.75rem;
  font-weight:600;
  text-transform: uppercase;
  letter-spacing:.06em;
}

/* ===== cidades atendidas (dentro de depoimentos) ===== */
.cidades-bloco{
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,.18);
  text-align:center;
}
.cidades-titulo{
  font-family: var(--ff-display-sm);
  font-weight:800;
  font-size:1.15rem;
  margin-bottom: 26px;
}
.cidades-lista{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px 12px;
}
.cidades-lista li{
  border:1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 9px 18px;
  font-size:.92rem;
  font-weight:500;
}
/* vaga ainda sem cidade cadastrada */
.cidades-lista li.is-placeholder{
  border-style: dashed;
  color: rgba(255,255,255,.6);
  font-style: italic;
}

/* ===== cta final ===== */
.cta-final{
  background: var(--off-white);
  text-align:center;
  color: var(--ink);
}
.cta-final h2{ font-size: clamp(2rem,4vw,2.8rem); margin-bottom:16px; }
.cta-final p{ color: var(--muted); font-size:1.1rem; margin-bottom:36px; }
/* o btn-primary padrão é branco sobre azul; aqui o fundo é claro, então inverte */
.cta-final .btn-primary{ background: var(--navy); color:#fff; }

/* ===== formulário de contato (vive no rodapé) ===== */
/* rótulo só para leitor de tela: o campo se identifica pelo placeholder, que
   some ao digitar — sem isto o formulário fica mudo em leitor de tela */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.contato-form{ display: grid; gap: 14px; }
.contato-form[hidden]{ display:none; }

.contato-campo{
  width:100%;
  border: 2px solid transparent;
  border-radius: 100px;
  background:#fff;
  color: var(--ink);
  font-family: var(--ff);
  font-size: 1rem;
  padding: 17px 26px;
}
.contato-campo::placeholder{ color: var(--muted); }
.contato-campo:focus{ outline:none; border-color:#ffd23f; }
/* a pílula não funciona em várias linhas: o texto encosta nos cantos curvos */
.contato-area{ border-radius: 26px; resize: vertical; line-height:1.55; }

/* formatos: caixas de seleção, várias ao mesmo tempo. ficam com a cara de
   etiqueta e não de campo, para não competirem com as pílulas brancas */
.contato-formatos{ border:0; padding:0; margin: 2px 0 0; }
.contato-formatos legend{
  padding:0;
  margin-bottom:10px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(255,255,255,.6);
}
.contato-formatos legend span{
  margin-left:6px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  color: rgba(255,255,255,.4);
}
/* os cinco formatos em uma linha só. Com a caixinha nativa eles somam 505px e a
   coluna tem 420, então o quadradinho sai e quem marca o escolhido é a cor mais
   o sublinhado — cor sozinha não serve para quem não a distingue.
   O wrap fica ligado mesmo assim: no celular a coluna encolhe e a linha quebra
   sozinha, em vez de vazar para fora da tela. */
.contato-caixas{ display:flex; flex-wrap:wrap; gap: 10px 15px; }
.contato-caixas label{
  position:relative;
  padding-bottom:4px;
  font-size:.82rem;
  white-space:nowrap;
  color: rgba(255,255,255,.62);
  cursor:pointer;
  transition: color .2s ease;
}
.contato-caixas label:hover{ color:#fff; }
.contato-caixas label:has(input:checked){ color:#ffd23f; }
.contato-caixas label:has(input:checked)::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:#ffd23f;
}
/* a caixa some da tela mas continua existindo: o clique, o teclado e o envio
   dependem dela */
.contato-caixas input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.contato-caixas label:has(input:focus-visible){ outline:2px solid #ffd23f; outline-offset:4px; }

/* aparência própria some no Firefox e no Safari junto com a seta, então ela é
   redesenhada como fundo — o SVG vai embutido para não virar mais um arquivo */
.contato-select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 52px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6f95' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 12px;
}
/* enquanto nada foi escolhido o select mostra o item desabilitado, que precisa
   ter a cor de placeholder e não a de texto preenchido */
.contato-select:invalid{ color: var(--muted); }

.contato-enviar{
  margin-top: 6px;
  border:0;
  border-radius: 100px;
  background:#ffd23f;
  color: var(--navy);
  font-family: var(--ff);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 18px 26px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.contato-enviar:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.contato-enviar[disabled]{ opacity:.6; cursor: progress; transform:none; box-shadow:none; }

.contato-consentimento{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top: 6px; /* vem antes do botão: precisa respirar do campo de texto */
  font-size:.86rem;
  line-height:1.5;
  color: rgba(255,255,255,.7);
  cursor: pointer;
}
.contato-consentimento input{ accent-color:#ffd23f; width:18px; height:18px; flex-shrink:0; margin-top:1px; }
/* O link fica dentro do <label>, mas clicar nele abre a política sem marcar a
   caixa: pela especificação, o label não age quando o clique cai num descendente
   interativo. Sublinhado porque, em texto pequeno sobre azul, só a cor não
   bastaria para dizer que ali tem um link. */
.contato-consentimento a{
  color:#ffd23f;
  font-weight:600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contato-consentimento a:hover{ color:#fff; }
/* a caixa opcional é a segunda: encosta na obrigatória e vem um tom abaixo, para
   ler como oferta e não como mais uma exigência antes de enviar */
.contato-newsletter{ margin-top: 2px; color: rgba(255,255,255,.55); }
.contato-opcional{
  margin-left: 4px;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

.contato-armadilha{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contato-status{ min-height: 22px; font-size:.9rem; font-weight:700; }
.contato-status.is-erro{ color:#ffb4a8; }

.contato-sucesso h3{ color:#fff; font-size:1.5rem; margin-bottom:12px; }
/* o amarelo da marca sobre o azul: a palavra que carrega a confirmação sai do
   branco e vira o ponto para onde o olho vai primeiro */
.destaque-amarelo{ color:#ffd23f; }
.contato-sucesso p{ color: rgba(255,255,255,.78); line-height:1.6; }

/* ===== footer ===== */
.site-footer{
  background: var(--navy-dark);
  color: rgba(255,255,255,.72);
  padding: 92px 0 28px;
  position: relative;
  overflow: hidden; /* segura o V que sangra pela direita */
}
/* o V da marca, grande e quase apagado. entra por máscara e não por <img> para a
   cor vir do CSS — o arquivo é o mesmo símbolo usado no selo redondo */
.footer-grafismo{
  position: absolute;
  top: 30%;
  right: -6%;
  width: min(46vw, 520px);
  aspect-ratio: 908 / 812;
  background: #fff;
  opacity: .045;
  -webkit-mask: url(../assets/img/simbolo-valiante.svg) no-repeat center / contain;
  mask: url(../assets/img/simbolo-valiante.svg) no-repeat center / contain;
  pointer-events: none;
}
/* a coluna da direita é o formulário, que atravessa as duas linhas; à esquerda
   ficam os blocos de informação e, embaixo deles, a navegação */
.footer-inner{
  position: relative; /* na frente do grafismo */
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0, 420px);
  /* o formulário atravessa as duas linhas e é mais alto que os blocos: com as
     duas linhas em auto, a sobra dele inflava a primeira e abria um buraco entre
     os blocos e a navegação. Em 1fr, a sobra desce para a segunda linha */
  grid-template-rows: auto 1fr;
  gap: 52px 64px;
  align-items: start;
}
/* posição explícita nos três: um item com linha definida é colocado antes dos
   automáticos, e sem isto o formulário roubava a primeira coluna */
.footer-info{ grid-column: 1; grid-row: 1; }
.footer-nav{ grid-column: 1; grid-row: 2; }
.footer-contato{
  grid-column: 2;
  grid-row: 1 / span 2;
  scroll-margin-top: 90px; /* o cabeçalho é fixo e cobriria o topo da caixa */
}
.footer-contato h4{
  color:#fff;
  font-size:1.35rem;
  letter-spacing:-.01em;
  margin-bottom: 18px;
}

/* blocos de informação: 2 colunas x 2 linhas, como na referência */
.footer-info{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 52px 40px;
}
.footer-block h4{
  color:#fff;
  font-size:1.35rem;
  letter-spacing:-.01em;
  margin-bottom: 18px;
}
.footer-block p{ font-size:.95rem; line-height:1.55; }
.footer-contact a{ display:inline-block; padding: 1px 0; }
.footer-contact a:hover{ color:#fff; }
/* dois destinos no mesmo número: tocar no número liga, tocar na etiqueta abre a
   conversa. A etiqueta precisa parecer botão para ficar claro que são dois links */
/* seletor mais específico que o ".footer-contact a" acima, que zera o padding */
.footer-contact a.footer-zap{
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(255,210,63,.16);
  color:#ffd23f;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform: uppercase;
  vertical-align: 2px;
  transition: background .2s ease, color .2s ease;
}
/* sem isto o :hover geral do rodapé pintaria a etiqueta de branco sobre amarelo */
.footer-contact a.footer-zap:hover{ background:#ffd23f; color: var(--navy); }


.footer-social{ display:flex; gap:12px; }
.footer-social a{
  display:grid;
  place-items:center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  color: rgba(255,255,255,.8);
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-social a:hover{ color:#fff; border-color:#fff; transform: translateY(-2px); }
.footer-social svg{
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* menu alinhado à direita */
/* alinhada à esquerda porque agora fica embaixo dos blocos de informação, e não
   mais na coluna da direita — que passou a ser do formulário */
.footer-nav ul{ display:grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap:14px 34px; justify-content: start; }
.footer-nav a{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size:1.35rem;
  color:#fff;
  transition: color .2s ease;
}
.footer-nav a:hover{ color:#ffd23f; }
.footer-nav a.is-current{ color:#ffd23f; }

/* assinatura tipográfica de largura total */
.footer-wordmark-wrap{ margin-top: 88px; }
.footer-wordmark{
  display:block;
  width: min(100%, 760px);
  height: auto;
}
.footer-wordmark-sub{
  margin-top: 22px;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.footer-wordmark-sub span{ margin: 0 6px; color:#ffd23f; }

.footer-bottom{
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size:.82rem;
}

/* ===== responsive ===== */
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns: repeat(2,1fr); }
  .services-list{ grid-template-columns:1fr; }
  .standards-grid{ grid-template-columns:1fr; }
  /* menos de 3 obras visíveis: as setas passam a ser necessárias */
  .cat-track{ grid-auto-columns: calc((100% - 28px) / 2); }
  .cat-nav{ display:flex; }
  .testimonials-grid{ grid-template-columns:1fr; }
  .audience-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 44px 24px; }
  .stats-band{ padding: 44px 28px 36px; }
  .social-proof-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:48px; }
  .footer-info{ max-width:none; gap: 40px 32px; }
  /* empilhado, cada um volta a ser só mais um bloco na sequência */
  .footer-info, .footer-nav, .footer-contato{ grid-column: auto; grid-row: auto; }
  /* no celular o V ocupa a tela inteira e vira sujeira atrás do texto: encolhe e
     sai mais pela borda, para continuar sendo um canto e não um fundo */
  .footer-grafismo{ width: 68vw; right: -24%; opacity: .04; }
  .footer-wordmark-wrap{ margin-top: 64px; }
}
@media (max-width: 720px){
  .main-nav{
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 80vw);
    background: var(--navy);
    padding: 100px 32px 32px;
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:24px; }
  .main-nav a{ color:#fff !important; font-size:1.1rem; }
  .menu-toggle{ display:flex; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .cat-track{ grid-auto-columns: 100%; }
  .cat-tab{ padding: 10px 18px; font-size:.85rem; }
  .cidades-bloco{ margin-top: 48px; padding-top: 40px; }
  .cidades-lista{ gap: 8px; }
  .cidades-lista li{ padding: 8px 14px; font-size:.85rem; }
  .section{ padding: 76px 0; }
  .site-footer{ padding: 64px 0 24px; }
  .footer-info{ grid-template-columns:1fr; gap: 34px; }
  .footer-block h4{ font-size:1.15rem; }
  .footer-nav a{ font-size:1.15rem; }
  .footer-wordmark-wrap{ margin-top: 48px; }
}
@media (max-width: 560px){
  .stats-grid{ grid-template-columns:1fr; gap: 36px; }
  .stats-band{ padding: 40px 22px 32px; }
}

/* .btn nasceu para <a>; como <button> ele não herda a fonte do site */
button.btn{ font-family: var(--ff); cursor: pointer; }

/* ===== páginas de texto corrido (privacidade e o que vier depois) ===== */
/* Faixa azul de abertura. Ela não é decoração: o cabeçalho é fixo e, antes de
   rolar, tem logo e menu brancos — sem fundo escuro no topo eles sumiriam numa
   página de fundo claro. O padding de cima é o que tira o título de baixo dele. */
.pagina-hero{
  background: var(--navy);
  color:#fff;
  padding: 186px 0 84px;
}
.pagina-hero h1{
  color:#fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -.01em;
}
.pagina-hero-lead{
  color: rgba(255,255,255,.8);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 660px;
  margin-top: 24px;
}
.pagina-data{
  margin-top: 26px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Coluna estreita: texto de lei já é cansativo, e linha longa piora. ~68
   caracteres é onde o olho ainda acha o começo da linha seguinte sozinho. */
.prosa{ max-width: 760px; }
.prosa h2{
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--navy);
  margin: 52px 0 16px;
}
.prosa h2:first-child{ margin-top: 0; }
.prosa p{
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 14px;
}
.prosa a{
  color: var(--navy-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prosa a:hover{ color: var(--navy); }
.prosa strong{ font-weight: 700; }

/* marcador em losango, o mesmo gesto do V da marca reduzido a um pingo */
.lista-legal{ margin: 4px 0 18px; }
.lista-legal li{
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  line-height: 1.7;
}
.lista-legal li::before{
  content:'';
  position:absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px;
  background: #ffd23f;
  transform: rotate(45deg);
}
.contato-legal{ font-size: 1.05rem; line-height: 1.9; }
.voltar-link{ display:inline-block; margin-top: 18px; }

/* rodapé sem o formulário: a segunda coluna existia só para ele */
.footer-inner.is-simples{ grid-template-columns: minmax(0,1fr); }

@media (max-width: 720px){
  .pagina-hero{ padding: 140px 0 60px; }
  .prosa h2{ margin-top: 42px; }
}