/* ==========================================================================
   Netto — folha de estilo única
   Paleta e tipografia derivadas dos ativos de marca. Não alterar os hex sem
   antes conferir contraste: a dupla azul/limão só sustenta texto grande.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Cores — amostradas do logo original */
  --azul: #0143b1;
  --azul-fundo: #013a99;
  --azul-escuro: #002e7a;
  --limao: #bfde52;
  --limao-escuro: #a8c63f;
  --papel: #fbfaf6;
  --papel-fundo: #f2efe6;
  --tinta: #0a1f44;
  --tinta-suave: #3d4d6e;
  --linha: #d8d4c8;
  --branco: #ffffff;

  /* Tipografia */
  --fonte-display: "Fredoka", "Trebuchet MS", sans-serif;
  --fonte-corpo: "Atkinson Hyperlegible", "Verdana", sans-serif;

  --txt-xs: 0.95rem;
  --txt-sm: 1.05rem;
  --txt-base: 1.1875rem; /* 19px quando o padrão do navegador é 16px */
  --txt-lg: 1.35rem;
  --txt-xl: clamp(1.45rem, 2.5vw, 1.75rem);
  --txt-2xl: clamp(1.8rem, 4vw, 2.6rem);
  --txt-3xl: clamp(2.3rem, 6vw, 3.9rem);

  /* Espaçamento */
  --esp-secao: clamp(3.5rem, 8vw, 6.5rem);
  --esp-lateral: clamp(1.25rem, 5vw, 2.5rem);
  --largura-max: 72rem;
  --largura-texto: 40rem;

  /* Contexto — trocado por seção para manter contraste do foco */
  --cor-foco: var(--azul);

  /* Faixa postal */
  --faixa-altura: 0.9rem;
  --faixa-passo: 1.05rem;

  /* Movimento — um vocabulário só, usado por todo o site.
     A curva desacelera no fim: o elemento chega e assenta, sem quicar.
     Nada aqui se repete em laço: movimento infinito distrai a leitura e
     exigiria um controle de pausa (WCAG 2.2.2). */
  --mov-rapido: 180ms;
  --mov-medio: 520ms;
  --mov-curva: cubic-bezier(0.22, 0.75, 0.25, 1);
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */

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

html {
  /* Nunca fixar px aqui: quebraria a preferência de tamanho de fonte do usuário */
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
}

h1 {
  font-size: var(--txt-3xl);
}
h2 {
  font-size: var(--txt-2xl);
}
h3 {
  font-size: var(--txt-xl);
}

p {
  margin: 0 0 1.15em;
  max-width: var(--largura-texto);
}

a {
  color: inherit;
}

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

ul {
  padding-left: 1.3em;
}

li {
  margin-bottom: 0.5em;
}

strong {
  font-weight: 700;
}

/* Foco: sempre visível, cor trocada conforme o fundo da seção */
:focus-visible {
  outline: 4px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Com o cabeçalho fixo, um alvo de âncora pararia escondido atrás dele.
   Esta folga vale para "Pular para o conteúdo" e para os links de privacidade. */
[id] {
  scroll-margin-top: 7rem;
}

/* Pular para o conteúdo */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--limao);
  color: var(--tinta);
  padding: 1rem 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

.pular:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--esp-lateral);
}

/* Espaçamento vertical governado por UMA classe. Os modificadores abaixo
   mudam apenas cor — nunca padding — para não haver regras se anulando. */
.secao {
  padding-block: var(--esp-secao);
}

.secao--azul {
  background: var(--azul);
  color: var(--branco);
  --cor-foco: var(--limao);
}

.secao--papel {
  background: var(--papel);
}

.secao--fundo {
  background: var(--papel-fundo);
}

.secao--limao {
  background: var(--limao);
  color: var(--tinta);
  --cor-foco: var(--azul-escuro);
}

.secao--azul h1,
.secao--azul h2,
.secao--azul h3 {
  color: var(--branco);
}

.medida {
  max-width: var(--largura-texto);
}

.frase-destaque {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--txt-xl);
  color: var(--azul);
  letter-spacing: -0.01em;
}

.espaco-acima {
  margin-top: 2.5rem;
}

.centro {
  margin-inline: auto;
  text-align: center;
}

.centro p {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   4. Faixa postal — o elemento de assinatura
   Replica a moldura de envelope já usada nos cartões impressos da marca.
   -------------------------------------------------------------------------- */

.faixa-postal {
  height: var(--faixa-altura);
  background: repeating-linear-gradient(
    -45deg,
    var(--limao) 0 var(--faixa-passo),
    var(--azul) var(--faixa-passo) calc(var(--faixa-passo) * 2)
  );
}

/* Moldura completa de envelope, usada ao redor do formulário */
.moldura-envelope {
  padding: var(--faixa-altura);
  background: repeating-linear-gradient(
    -45deg,
    var(--limao) 0 var(--faixa-passo),
    var(--azul) var(--faixa-passo) calc(var(--faixa-passo) * 2)
  );
}

.moldura-envelope__interior {
  background: var(--papel);
  padding: clamp(1.5rem, 5vw, 3rem);
}

/* Variante fina: emoldura uma foto sem engolir a imagem. */
.moldura-envelope--fina {
  padding: 0.5rem;
}

.moldura-envelope--fina .moldura-envelope__interior {
  padding: 0;
  /* Sem isso sobra um vão embaixo da imagem, por ela ser inline. */
  line-height: 0;
}

/* Retrato da dupla. A foto é em pé (proporção ~2:3); solta na coluna ela
   ficaria alta demais ao lado de um texto curto, daí o limite de largura. */
.retrato {
  max-width: 380px;
  margin-inline: auto;
  width: 100%;
}

.retrato img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   5. Cabeçalho e navegação
   -------------------------------------------------------------------------- */

.cabecalho {
  background: var(--azul);
  color: var(--branco);
  --cor-foco: var(--limao);

  /* Acompanha a leitura. No desktop custa 12% da tela; no celular, onde a
     navegação ocupa duas linhas, ele se recolhe ao descer (regra mais abaixo). */
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform 0.25s ease;
}

/* Separa o cabeçalho do conteúdo assim que a página sai do topo. Uma linha
   sólida, não as listras: em 4px o padrão diagonal vira ruído serrilhado. */
.cabecalho::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--limao);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cabecalho--rolado {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.cabecalho--rolado::after {
  opacity: 1;
}

/* No celular o cabeçalho tem quase 200px. Mantê-lo fixo comeria um terço da
   tela, então ele sai de cena ao descer e volta ao primeiro gesto para cima. */
.cabecalho--recolhido {
  transform: translateY(-100%);
}

/* Nunca esconder de quem navega por teclado. */
.cabecalho:focus-within {
  transform: none;
}

.cabecalho__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--branco);
  min-height: 48px;
}

.marca__mascote {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
}

.marca__nome {
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--limao);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.9rem 3px;
  color: var(--branco);
  text-decoration: none;
  font-size: var(--txt-base);
  font-weight: 700;
  border-radius: 4px;
  transition: color var(--mov-rapido) var(--mov-curva);
}

/* O traço cresce da esquerda em vez de simplesmente aparecer. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0;
  height: 3px;
  background: var(--limao);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mov-rapido) var(--mov-curva);
}

.nav__link:hover {
  color: var(--limao);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--limao);
}

.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.75rem 1.75rem;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  font-weight: 700;
  text-decoration: none;
  border: 3px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--mov-rapido) var(--mov-curva),
    color var(--mov-rapido) var(--mov-curva),
    border-color var(--mov-rapido) var(--mov-curva),
    transform var(--mov-rapido) var(--mov-curva),
    box-shadow var(--mov-rapido) var(--mov-curva);
}

/* Só o que é clicável se move ao passar o mouse. Cartões e blocos de texto
   ficam parados de propósito: elevá-los sugeriria um clique que não existe. */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Limão com tinta: 10,7:1 — AAA */
.btn--limao {
  background: var(--limao);
  color: var(--tinta);
}

.btn--limao:hover {
  background: var(--limao-escuro);
}

/* Azul com branco: 8,6:1 — AAA */
.btn--azul {
  background: var(--azul);
  color: var(--branco);
}

.btn--azul:hover {
  background: var(--azul-escuro);
}

/* Contorno sobre fundo azul. Texto 19px bold qualifica como texto grande,
   então 5,65:1 atende AAA para esse tamanho. */
.btn--contorno {
  background: transparent;
  color: var(--limao);
  border-color: var(--limao);
}

.btn--contorno:hover {
  background: var(--limao);
  color: var(--tinta);
}

.btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--azul);
  color: var(--branco);
  --cor-foco: var(--limao);
  padding-block: clamp(3rem, 9vw, 6rem);
  position: relative;
  overflow: hidden;
}

/* Páginas internas: o hero apresenta, não precisa ocupar a tela toda */
.hero--interno {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.hero__carimbo {
  display: inline-block;
  border: 3px solid var(--limao);
  color: var(--limao);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  transform: rotate(-3deg);
  margin-bottom: 2rem;
}

.hero__titulo {
  max-width: 24ch;
  margin-bottom: 0.5em;
}

.hero__destaque {
  color: var(--limao);
}

.hero__texto {
  font-size: var(--txt-lg);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__grade {
    grid-template-columns: 1fr auto;
  }
}

/* Selo: o "carimbo de cera" da marca, jogado ao lado do título no hero —
   fora do centro e torto de propósito, como algo carimbado à mão. */
.hero__selo {
  justify-self: center;
  align-self: start;
  width: clamp(170px, 23vw, 248px);
  flex-shrink: 0;
  margin-top: clamp(0.5rem, 2vw, 2.5rem);
  transform: rotate(8deg);
}

.hero__selo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.selo__anel {
  fill: var(--limao);
  stroke: var(--branco);
  stroke-width: 15;
}

/* --------------------------------------------------------------------------
   8. Cartões e grades
   -------------------------------------------------------------------------- */

.grade {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 2.5rem;
}

.grade--2 {
  grid-template-columns: 1fr;
}

.grade--3 {
  grid-template-columns: 1fr;
}

.cartao {
  background: var(--branco);
  border: 2px solid var(--linha);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.cartao h3 {
  margin-bottom: 0.5em;
}

.cartao p:last-child {
  margin-bottom: 0;
}

.cartao--destaque {
  border-color: var(--azul);
  border-width: 3px;
}

/* Cartão sobre fundo azul */
.secao--azul .cartao {
  background: var(--azul-fundo);
  border-color: rgba(191, 222, 82, 0.45);
  color: var(--branco);
}

/* Rótulo de seção */
.rotulo {
  display: inline-block;
  /* 19px em negrito: acima de 18,66px o limao sobre azul ja conta como
     texto grande e alcanca AAA sem mexer na cor da marca. */
  font-size: var(--txt-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
  color: var(--azul);
}

.secao--azul .rotulo {
  color: var(--limao);
}

.secao--limao .rotulo {
  color: var(--tinta);
}

/* Lista de camadas numerada — a ordem aqui carrega informação real:
   o encontro vem primeiro, a comunidade digital sustenta o que sobrou dele. */
.camada {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  padding-block: 2rem;
  border-top: 2px solid var(--linha);
}

.camada:last-child {
  border-bottom: 2px solid var(--linha);
}

.camada__numero {
  font-family: var(--fonte-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--azul);
}

.secao--azul .camada {
  border-color: rgba(255, 255, 255, 0.28);
}

.secao--azul .camada__numero {
  color: var(--limao);
}

.camada__corpo p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Formulário
   -------------------------------------------------------------------------- */

.formulario {
  display: grid;
  gap: 1.75rem;
}

.campo {
  display: grid;
  gap: 0.5rem;
}

.campo__rotulo {
  font-weight: 700;
  font-size: var(--txt-sm);
}

.campo__opcional {
  font-weight: 400;
  color: var(--tinta);
  opacity: 0.75;
}

.campo__ajuda {
  font-size: var(--txt-xs);
  opacity: 0.8;
  margin: 0;
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 56px;
  padding: 0.75rem 1rem;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  color: var(--tinta);
  background: var(--branco);
  border: 2px solid var(--tinta);
  border-radius: 6px;
}

.campo textarea {
  min-height: 130px;
  resize: vertical;
}

.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%),
    linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px),
    calc(100% - 15px) calc(50% + 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

/* Precisa repetir os seletores de atributo da regra base: sem isso
   ".campo input[type=text]" (0,2,1) vence ".campo--erro input" (0,1,1)
   e o campo com erro continua com a borda normal. */
.campo--erro input[type="text"],
.campo--erro input[type="tel"],
.campo--erro input[type="email"],
.campo--erro select,
.campo--erro textarea {
  border-color: #b3261e;
  background: #fdf3f2;
}

.campo__erro {
  display: none;
  font-size: var(--txt-sm);
  font-weight: 700;
  color: #8c1d18;
}

.campo--erro .campo__erro {
  display: block;
}

/* Consentimento */
.consentimento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  background: var(--papel-fundo);
  border: 2px solid var(--linha);
  border-radius: 6px;
  padding: 1.25rem;
}

.consentimento input[type="checkbox"] {
  /* Grande de propósito: alvo de toque confortável para quem tem menos
     precisão de movimento. Abaixo de 44px este campo é difícil de marcar. */
  width: 44px;
  height: 44px;
  margin: 0;
  accent-color: var(--azul);
  flex-shrink: 0;
}

.consentimento label {
  font-size: var(--txt-sm);
  line-height: 1.5;
}

.consentimento.campo--erro {
  border-color: #b3261e;
  background: #fdf3f2;
}

/* Mensagem geral do formulário */
.aviso {
  padding: 1.15rem 1.35rem;
  border-radius: 6px;
  border-left: 6px solid;
  font-size: var(--txt-sm);
}

.aviso--erro {
  background: #fdf3f2;
  border-color: #b3261e;
  color: #8c1d18;
}

.aviso--info {
  background: var(--papel-fundo);
  border-color: var(--azul);
}

.aviso p:last-child {
  margin-bottom: 0;
}

/* Estado de sucesso, que substitui o formulário */
.sucesso {
  text-align: center;
}

.sucesso p {
  margin-inline: auto;
}

.sucesso__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--limao);
  color: var(--tinta);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.oculto {
  display: none !important;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ferramenta de desenvolvimento — sai quando houver endpoint real */
.painel-dev {
  margin-top: 2.5rem;
  border: 2px dashed var(--linha);
  border-radius: 8px;
  padding: 1.25rem;
  background: var(--papel-fundo);
  font-size: var(--txt-xs);
}

.painel-dev summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.painel-dev__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn--pequeno {
  min-height: 48px;
  padding: 0.5rem 1.15rem;
  font-size: var(--txt-sm);
}

/* --------------------------------------------------------------------------
   10. Contato direto
   -------------------------------------------------------------------------- */

.canais {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.canais li {
  margin: 0;
}

.canal {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 56px;
  padding: 0.9rem 1.15rem;
  background: var(--branco);
  border: 2px solid var(--linha);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  transition: border-color var(--mov-rapido) var(--mov-curva),
    background-color var(--mov-rapido) var(--mov-curva),
    transform var(--mov-rapido) var(--mov-curva);
}

.canal:hover {
  border-color: var(--azul);
  background: var(--papel-fundo);
  transform: translateY(-2px);
}

.canal__icone {
  font-size: 1.4rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   11. Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  background: var(--azul);
  color: var(--branco);
  --cor-foco: var(--limao);
  padding-block: 3rem 2rem;
}

.rodape__grade {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.rodape h2 {
  font-size: var(--txt-lg);
  font-weight: 700;
  color: var(--limao);
  margin-bottom: 0.8em;
}

.rodape__lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rodape__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--branco);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rodape__lista a:hover {
  color: var(--limao);
}

.rodape__base {
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  padding-top: 1.5rem;
  font-size: var(--txt-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}

.rodape__base p {
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   12. Responsivo
   -------------------------------------------------------------------------- */

@media (min-width: 40rem) {
  .grade--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .camada {
    grid-template-columns: auto 1fr;
    gap: 2rem;
  }

  .rodape__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .canais {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .grade--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .rodape__grade {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .cabecalho__interior {
    flex-wrap: nowrap;
  }
}

/* --------------------------------------------------------------------------
   13. Movimento
   -------------------------------------------------------------------------- */

/* Regra de ouro deste bloco: o texto nunca depende de animação para ser lido.
   Só elementos visuais (cartões, molduras, blocos numerados) entram com
   movimento; títulos e parágrafos são pintados de imediato. */

.revela {
  transition: opacity var(--mov-medio) var(--mov-curva),
    transform var(--mov-medio) var(--mov-curva);
}

/* O estado escondido só existe quando há JavaScript para desfazê-lo.
   Sem esta guarda, com JS desligado o conteúdo ficaria invisível para sempre. */
.js .revela {
  opacity: 0;
  transform: translateY(14px);
}

.js .revela--visivel {
  opacity: 1;
  transform: none;
}

/* --- Entrada do hero -------------------------------------------------------
   Roda uma vez, no carregamento, em cascata curta. O carimbo é batido como
   um carimbo de verdade: chega grande e torto, e assenta. */

@keyframes netto-entrar {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes netto-carimbar {
  0% {
    opacity: 0;
    transform: rotate(-11deg) scale(1.2);
  }
  55% {
    opacity: 1;
    transform: rotate(-3deg) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: rotate(-3deg) scale(1);
  }
}

@keyframes netto-carimbar-selo {
  0% {
    opacity: 0;
    transform: rotate(24deg) scale(1.25);
  }
  55% {
    opacity: 1;
    transform: rotate(5deg) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: rotate(8deg) scale(1);
  }
}

.js .hero__carimbo {
  animation: netto-carimbar 560ms var(--mov-curva) both;
}

.js .hero__titulo {
  animation: netto-entrar 620ms var(--mov-curva) 140ms both;
}

.js .hero__texto {
  animation: netto-entrar 620ms var(--mov-curva) 240ms both;
}

.js .hero__acoes {
  animation: netto-entrar 620ms var(--mov-curva) 340ms both;
}

.js .hero__selo {
  animation: netto-carimbar-selo 620ms var(--mov-curva) 420ms both;
}

/* --- Selo de confirmação do formulário ------------------------------------
   Mesmo gesto do carimbo do hero: fecha o fluxo com a marca da casa. */

.js .sucesso:not(.oculto) .sucesso__selo {
  animation: netto-carimbar 620ms var(--mov-curva) both;
}

.js .sucesso:not(.oculto) h2 {
  animation: netto-entrar 520ms var(--mov-curva) 160ms both;
}

.js .sucesso:not(.oculto) p:not(.sucesso__selo) {
  animation: netto-entrar 520ms var(--mov-curva) 260ms both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .revela,
  .js .revela {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. Impressão
   -------------------------------------------------------------------------- */

@media print {
  .cabecalho,
  .rodape,
  .faixa-postal,
  .painel-dev {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* --------------------------------------------------------------------------
   15. Foco em botões cuja cor coincide com a cor de foco da seção
   No hero e nas seções azuis a cor de foco é o limão — que sobre um botão
   limão desaparece. Nestes casos o anel vai para dentro do botão, onde
   contrasta 10,7:1, e deixa de depender da cor do fundo da seção.
   -------------------------------------------------------------------------- */

.btn--limao:focus-visible {
  outline-color: var(--tinta);
  outline-offset: -7px;
}

.secao--azul .btn--contorno:focus-visible,
.hero .btn--contorno:focus-visible {
  outline-color: var(--branco);
}

.secao--limao .btn--azul:focus-visible {
  outline-color: var(--limao);
  outline-offset: -7px;
}