/* Landings de escuta — Soldado Sampaio.
   Um arquivo, uma requisicao. O publico chega de anuncio no celular, em
   Roraima, muitas vezes em rede fraca: cada request a mais custa conversao.

   ESTRATEGIA DE COR: Committed. O roxo da Sheridan banha o hero — e' a paleta
   que o MIV reserva para a vice, a parte do sistema de marca que fala com
   mulher, e distingue estas paginas do material geral (escudo, chevron,
   "soldado"). O formulario fica em superficie clara: relato longo se escreve
   melhor sobre claro. Amarelo da bandeira de Roraima so no botao.

   Todas as cores saem do MIV. As unicas derivadas sao tons de claridade do
   proprio roxo e dos neutros — nenhum matiz novo foi inventado.

   Neutros puxados para o matiz do roxo (282), NAO para o quente. Neutro
   quente-claro e' o default de IA de 2026 e nao tem nada a ver com esta marca. */

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* MIV — Sheridan */
  --roxo: #494495;

  /* MIV — bandeira de Roraima, PM/Sampaio, contraste */
  --amarelo: #F2BF0D;
  --amarelo-claro: #f4e34e;
  --amarelo-sombra: #C79D07; /* tom escuro do proprio amarelo, para o degrau do botao */
  --azul-palido: #C9E1F6;
  --petroleo: #143F4D;
  /* O verde #22AC00 do MIV rende 2,87:1 no claro — abaixo do minimo de
     3:1 para elemento grafico. Escurecido so onde carrega sentido. */
  --verde-selo: #1F9C00;

  /* Tinta sobre o roxo */
  --sobre-roxo: #FFFFFF;
  --sobre-roxo-2: var(--azul-palido);

  /* Superficies claras, matiz 282 */
  --superficie: #f8f8fc;
  --superficie-2: #f1f2f9;
  --tinta: #17323C;
  --tinta-2: #4A6570;
  --tinta-3: #666779;
  --linha: #dcdde7;
  --linha-forte: #858695;

  --erro: #A32B1C;

  --medida: 34rem;

  /* Ritmo: apertado dentro do grupo, generoso entre grupos. */
  --s1: 0.375rem;
  --s2: 0.75rem;
  --s3: 1.125rem;
  --s4: 1.75rem;
  --s5: 2.75rem;
  --s6: clamp(3.5rem, 9vw, 6rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Escala semantica. Nada de 999. */
  --z-pular: 20;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--superficie);
  color: var(--tinta);
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

:where(a) { color: var(--roxo); text-underline-offset: 0.2em; }

:focus-visible {
  outline: 3px solid var(--roxo);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Dentro do hero roxo o anel roxo sumiria. */
.hero :focus-visible,
.topo :focus-visible {
  outline-color: var(--amarelo-claro);
}

.pular {
  position: absolute;
  left: -9999px;
  background: var(--amarelo);
  color: var(--petroleo);
  font-weight: 700;
  padding: var(--s2) var(--s3);
  z-index: var(--z-pular);
}
.pular:focus { left: var(--s3); top: var(--s3); }

/* ---------------------------------------------------------------- casca */

.casca {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* --------------------------------------------------------- hero drenched */

/* A faixa roxa vai de ponta a ponta; o conteudo respeita a casca.
   Chapado, nao degrade: a classe cobre o cabecalho e o hero, que sao dois
   elementos separados (o <header> fica fora do <main> para nao perder o
   landmark). Qualquer degrade reiniciaria no segundo e criaria emenda. */
.capa {
  background: var(--roxo);
  color: var(--sobre-roxo);
}

.hero.capa {
  position: relative;
  overflow: hidden;
}

.topo { padding-block: var(--s4) 0; }

.topo img { width: clamp(9rem, 26vw, 12rem); }

.hero { padding-block: var(--s5) 0; }

/* Kicker unico da pagina: e' o nome da operacao da campanha, nao andaime
   de secao. Nao se repete em nenhuma outra secao. */
.chapeu {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarelo-claro);
  margin: 0 0 var(--s3);
}

/* Peso 800 no lugar de Podium Sharp: Podium e' Adobe Fonts e nao pode ser
   servida sem kit web. Montserrat esta no MIV como familia de apoio. */
h1 {
  font-size: clamp(2.125rem, 1.4rem + 3.6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s4);
  max-width: 15ch;
  text-wrap: balance;
  color: var(--sobre-roxo);
}

.hero-texto p {
  max-width: var(--medida);
  margin: 0 0 var(--s3);
  color: var(--sobre-roxo-2);
}

/* A pergunta e' o pedido da pagina. Carrega peso por tamanho, cor e ar —
   nao por faixa lateral. */
.pergunta {
  margin: var(--s5) 0 var(--s4);
  max-width: 32rem;
}

.pergunta h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--amarelo-claro);
  margin: 0;
  text-wrap: pretty;
}

.enfase {
  font-weight: 700;
  color: var(--sobre-roxo);
  max-width: var(--medida);
  margin: 0 0 var(--s5);
}

/* ------------------------------------------------------------------ foto */

/* A chapa inteira, maos abertas no 10. Foto deitada (1,13:1), nao em pe:
   toda a regra abaixo existe para dar largura a ela, porque numa foto
   deitada largura e' o que faz tamanho de rosto.
   No celular ela sangra dos DOIS lados — anula o padding da casca e ocupa a
   tela inteira. Sangrando so a direita, como a foto em pe sangrava, sobraria
   um vazio a esquerda do Sampaio e a dupla ficaria fora de prumo com o texto.
   Apoiada na base da faixa roxa: o recorte encosta no fio de baixo do PNG,
   entao a foto termina exatamente onde o roxo termina. */
.hero-foto {
  margin-top: var(--s5);
  margin-inline: calc(-1 * clamp(1.25rem, 5vw, 3rem));
  display: flex;
  justify-content: flex-end;
}

.hero-foto img {
  width: 100%;
  /* Teto na mesma medida do texto. Sem ele, entre o celular e o desktop
     (tablet em pe, 800px) a foto ia a 800px de largura e ficava com rosto
     em tamanho quase natural ao lado de um texto de 17px — desproporcao que
     so aparece nessa faixa. Travada na medida, foto e texto andam juntos.
     Abaixo de 34rem nada muda: a foto continua sangrando de ponta a ponta. */
  max-width: var(--medida);
  margin-bottom: -1px; /* mata o subpixel entre a foto e a borda da faixa */
}

/* ------------------------------------------------------------------- cta */

/* No celular o botao acompanha os campos: largura total.
   Campo cheio com botao pela metade le como elemento secundario, e o alvo
   fica menor justo na acao que a pagina inteira existe para pedir.
   No desktop volta a ser do tamanho do conteudo (regra em @media). */
.cta {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  border: 0;
  background: var(--amarelo);
  color: var(--petroleo);
  font: inherit;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  padding: 1.0625rem var(--s5);
  min-height: 3.25rem;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--amarelo-sombra);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

/* Guarda de hover: no toque, :hover fica grudado depois do tap e o botao
   parece travado no estado de passagem. */
@media (hover: hover) {
  .cta:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--amarelo-sombra); }
}

.cta:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--amarelo-sombra); }
.cta[hidden] { display: none; }
.cta[disabled] { opacity: 0.55; cursor: progress; transform: none; }

.cta svg { width: 1em; height: 1em; flex: none; }

/* ---------------------------------------------------------------- painel */

/* Etapa 2. Progressive disclosure sem modal: a pagina cresce, a rolagem
   continua, e o botao "voltar" do celular nao vira armadilha. */
.painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
  background: var(--superficie);
}

.painel[data-aberto='sim'] { grid-template-rows: 1fr; }

/* `hidden` e' display:none no estilo do navegador, e o display:grid acima
   ganha dele. Sem isto o formulario continua na tela depois do envio, com o
   botao travado em "Enviando…" logo acima do agradecimento. */
.painel[hidden] { display: none; }

.painel > div { overflow: hidden; }

.painel-corpo { padding-block: var(--s6); }

.painel h2 {
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s3);
  max-width: 18ch;
  text-wrap: balance;
  color: var(--tinta);
}

.painel-intro {
  max-width: var(--medida);
  color: var(--tinta-2);
  margin: 0 0 var(--s5);
}

/* So aparece quando o <noscript> entra em jogo. Borda inteira, nao faixa. */
.aviso-sem-js {
  display: none;
  max-width: var(--medida);
  margin: 0 0 var(--s4);
  padding: var(--s3);
  border: 1px solid var(--amarelo);
  background: color-mix(in oklab, var(--amarelo) 12%, var(--superficie));
  color: var(--tinta);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ form */

/* Mesma medida de leitura do texto acima. Sem isto os campos esticam ate a
   largura da casca e a coluna perde o prumo — e escrever um relato numa
   linha de 870px e' desconfortavel. */
#form { max-width: var(--medida); }

/* O fieldset dos chips traz borda em relevo e padding do navegador. */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

legend { padding: 0; }

.campo { margin-bottom: var(--s4); }

/* Rotulo em caixa normal. Maiuscula com tracking em todo rotulo vira
   gramatica de andaime — e le pior para quem tem pouca escolaridade. */
.campo label,
.grupo-legenda {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: var(--s2);
}

.opcional {
  font-weight: 500;
  color: var(--tinta-3);
}

input[type='text'],
input[type='tel'],
textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--superficie-2);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  padding: 0.875rem var(--s3);
  min-height: 3rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder, textarea::placeholder { color: var(--tinta-3); }

input:focus, textarea:focus {
  border-color: var(--roxo);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--roxo) 22%, transparent);
  outline: none;
}

/* O relato dela e' o produto desta pagina. O campo e' folha pautada, nao
   caixa de cadastro — campo livre em branco e' onde formulario de escuta
   perde gente. */
textarea {
  min-height: 11.5rem;
  resize: vertical;
  line-height: 2rem;
  /* Acoplado ao passo de 2rem da pauta: muda um, muda o outro. */
  padding-block: 0.75rem;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    var(--linha) calc(2rem - 1px),
    var(--linha) 2rem
  );
  background-position: 0 0.75rem;
  background-attachment: local;
}

.contador {
  font-size: 0.875rem;
  color: var(--tinta-3);
  text-align: right;
  margin-top: var(--s1);
  font-variant-numeric: tabular-nums;
}

/* Chips: dao comeco de frase sem tirar dela a palavra final. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding: 0;
  border: 0;
}

.chip {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--roxo);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--roxo) 45%, transparent);
  border-radius: 100px;
  /* 44px de altura minima: ela esta no celular, uma mao, muitas vezes andando. */
  min-height: 2.75rem;
  padding: var(--s1) var(--s3);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

@media (hover: hover) {
  .chip:hover {
    background: color-mix(in oklab, var(--roxo) 10%, transparent);
    border-color: var(--roxo);
  }
}

.chip:active { transform: scale(0.97); }

.chip[aria-pressed='true'] {
  background: var(--roxo);
  border-color: var(--roxo);
  color: var(--sobre-roxo);
}

.dica {
  font-size: 0.9375rem;
  color: var(--tinta-2);
  margin: 0 0 var(--s2);
}

.prefixado { display: flex; align-items: stretch; }

.prefixado span {
  display: grid;
  place-items: center;
  padding-inline: var(--s3);
  background: var(--linha);
  border: 1px solid var(--linha-forte);
  border-right: 0;
  border-radius: 2px 0 0 2px;
  color: var(--tinta-2);
  font-weight: 600;
}

.prefixado input { border-radius: 0 2px 2px 0; }

/* LGPD: alvo grande. Ela esta no celular, com uma mao. */
.consentimento {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3);
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--superficie-2);
  margin-bottom: var(--s4);
  cursor: pointer;
}

.consentimento input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--roxo);
}

.consentimento span {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.erro {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--erro);
  margin-top: var(--s1);
}

[aria-invalid='true'] { border-color: var(--erro); }

/* Honeypot: fora da tela, sem display:none — leitor de tela ignora pelo
   aria-hidden, robo preenche assim mesmo. */
.mel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- sucesso */

.sucesso { padding-block: var(--s6); }

.sucesso[hidden] { display: none; }

/* O titulo recebe foco por codigo, para o leitor de tela anunciar a
   confirmacao. Ela nao chegou ali pelo teclado, entao o anel so pareceria
   caixa de erro em volta do agradecimento. */
.sucesso h2:focus { outline: none; }

.selo {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--s4);
  color: var(--verde-selo);
}

.sucesso h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s3);
  max-width: 18ch;
  text-wrap: balance;
}

.sucesso p {
  max-width: var(--medida);
  color: var(--tinta-2);
  margin: 0 0 var(--s3);
}

/* ------------------------------------------------------------------ rodape */

.rodape {
  border-top: 1px solid var(--linha);
  padding-block: var(--s5);
}

/* Assinatura da campanha. Racked Brush e' licenca desktop: nao pode ser
   servida como fonte. Aqui e' mascara alpha, colorida pelo CSS. */
.assinatura {
  width: min(20rem, 78vw);
  aspect-ratio: 1064 / 120;
  background-color: var(--roxo);
  -webkit-mask: url('img/assinatura.webp') no-repeat center / contain;
  mask: url('img/assinatura.webp') no-repeat center / contain;
  margin-bottom: var(--s3);
}

.rodape p {
  font-size: 0.875rem;
  color: var(--tinta-2);
  margin: 0;
  max-width: 44ch;
  text-wrap: pretty;
}

.rodape a { color: var(--tinta-2); }

/* ------------------------------------------------------------------ desktop */

/* Ate aqui a pagina e' uma coluna so, que e' o certo no celular — 99% do
   trafego. Daqui para cima a faixa roxa vira composicao: o texto de um lado,
   ela do outro, encostada na base. */
@media (min-width: 60rem) {
  .topo { padding-block: var(--s5) 0; }

  .hero { padding-block: var(--s5) 0; }

  h1 {
    font-size: clamp(2.75rem, 1.4rem + 3.4vw, 4rem);
    max-width: 16ch;
  }

  .hero-grid {
    display: grid;
    /* Porcentagem, nao largura fixa: a foto deitada precisa de largura para
       o rosto nao encolher, mas em 60rem de tela uma coluna fixa de 27rem
       espremia o texto. Assim a foto cresce junto com a tela e para em
       27rem, que e' onde a casca para de crescer. */
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 44%, 27rem);
    gap: clamp(2rem, 5vw, 4.5rem);
    /* start, nao end: com `end` a coluna de texto tambem desce e abre um
       buraco embaixo do titulo. So a foto encosta na base. */
    align-items: start;
  }

  /* A coluna de texto nao encosta na base da faixa. Sem esta folga o CTA
     fica rente a borda do roxo, e com copy mais longa chega a tocar. */
  /* Volta a ser do tamanho do conteudo: no desktop um botao de ponta a
     ponta da coluna vira uma barra, nao um botao. */
  .cta {
    display: inline-flex;
    width: auto;
  }

  .hero-texto { padding-bottom: var(--s5); }

  .hero-foto {
    margin-top: 0;
    margin-inline: 0;
    justify-content: flex-end;
    align-self: end;
  }

  .hero-foto img { width: 100%; }

  /* Tarefa focada depois de um hero drenched: a mudanca de superficie marca
     "agora e' com voce". */
  .painel-grid {
    max-width: 38rem;
    margin-inline: auto;
  }

  .painel h2 { max-width: 20ch; }

  #form { max-width: none; }

  /* Fica no eixo do formulario que ela acabou de preencher — senao o eixo
     muda no meio do fluxo.
     Precisa de .sucesso.casca: o elemento carrega as duas classes, e a regra
     de .casca da media query de tela larga vem depois no arquivo. Com a mesma
     especificidade, quem vem depois ganha. */
  .sucesso.casca {
    max-width: 38rem;
    margin-inline: auto;
  }

  /* Mesma grade do hero: a coluna da direita do rodape encosta na mesma
     linha vertical da coluna da foto. Com `auto 1fr` o texto legal caia
     66px fora do prumo — o tipo de coisa que so aparece medindo. */
  .rodape {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }

  .assinatura { margin-bottom: 0; }

  .rodape p {
    text-align: left;
    max-width: none;
  }
}

/* Telas largas de verdade: nada estica alem do que da' para ler. */
@media (min-width: 90rem) {
  .casca { max-width: 74rem; }
}

/* ------------------------------------------------------------------ motion */

/* Uma entrada orquestrada na carga, so no hero — nada de fade-on-scroll em
   cada secao, que e' o default saturado.
   Anima SO transform. Nunca opacity a partir do zero: se a animacao nao
   rodar (aba em segundo plano, render sem animacao, motor antigo), o texto
   fica onde esta em vez de sumir. O conteudo nunca depende do reveal. */
@media (prefers-reduced-motion: no-preference) {
  .revela {
    animation: assenta 0.55s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@keyframes assenta {
  from { transform: translateY(0.75rem); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .painel { transition: none; }
}