/* ============================================================
   Matrix Brinquedos — CSS base
   Task 3: tokens, reset, utilitários, header sticky, hero
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root {
  --amarelo: #FFDD00;
  --azul: #0075BF;
  --vermelho: #E30613;
  --verde: #3CB170;
  --azul-escuro: #054F7D;
  --branco: #FFFFFF;
  --fonte-display: "Baloo 2", system-ui, sans-serif;
  --fonte-corpo: "Nunito", system-ui, sans-serif;
  --radius: 14px;
  --sombra: 0 10px 30px rgb(5 79 125 / .15);
}

/* --- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte-corpo); color: #1c2b3a; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--fonte-display); line-height: 1.1; margin: 0 0 .5em; }
.container { width: min(1240px, 92vw); margin-inline: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* --- Utilitários ------------------------------------------------ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.btn {
  display: inline-block; font-family: var(--fonte-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--branco);
  padding: .8em 1.9em; border: 0; border-radius: 999px; cursor: pointer;
  text-decoration: none; font-size: 1rem; transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--sombra); }
.btn-red { background: var(--vermelho); }
.btn-green { background: var(--verde); }
.btn-blue { background: var(--azul); }

/* ============================================================
   Header sticky
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--amarelo);
  transition: background .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: rgb(255 221 0 / .85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgb(5 79 125 / .12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  font-family: var(--fonte-display);
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  text-underline-offset: 6px;
}

.nav-menu a:hover,
.nav-menu a.active {
  text-decoration: underline 3px var(--vermelho);
  text-underline-offset: 6px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--azul);
  transition: transform .3s, opacity .3s;
}

.header-social {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.header-social a {
  display: inline-flex;
  color: var(--azul);
  transition: color .2s, transform .2s;
}

.header-social a:hover {
  color: var(--vermelho);
  transform: translateY(-2px);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background: var(--amarelo);
  position: relative;
  padding: 4rem 0 0;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  align-items: center;
}

.hero-copy h1 {
  color: var(--vermelho);
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  font-weight: 800;
  min-height: 2.2em; /* reserva 2 linhas p/ o typewriter não deslocar o layout */
}

.hero-copy h1 .dots {
  color: inherit;
}

.hero-copy p {
  color: var(--vermelho);
  max-width: 34ch;
  margin: 0 0 1.6em;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

.hero-floats {
  position: relative;
  z-index: 2; /* letras acima da onda (.wave-divider fica em z 0) */
}

.hero-truck {
  width: 100%;
  max-width: 1000px; /* 1097px natural — sem upscale além do original */
  margin-inline: auto;
}

.float-letter {
  position: absolute;
  line-height: 1;
  pointer-events: none;
}

/* Span do "I" — único que ainda é texto; mantém o estilo tipográfico
   original e é o único com a variável --rot (o JS do parallax usa
   `rotate(var(--rot, 0deg))`, então nos demais fica 0deg). */
.float-letter-text {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6.5rem);
  text-shadow: 4px 4px 0 rgb(5 79 125 / .25);
}

/* Letras-imagem: já vêm rotacionadas/3D na própria arte, sem --rot CSS. */
.float-letter-img {
  width: clamp(60px, 8vw, 130px);
  height: auto;
}

/* Faixa inferior do hero — podem invadir a região da onda (renderizam
   acima dela via z-index do .hero-inner). */
.float-letter[data-float="1"] { left: 0%;  top: 68%; }
.float-letter[data-float="2"] { left: 17%; top: 80%; }
.float-letter[data-float="3"] { left: 40%; top: 84%; }
.float-letter[data-float="4"] { left: 58%; top: 72%; }
.float-letter[data-float="5"] { left: 77%; top: 78%; color: var(--verde); --rot: -9deg; transform: rotate(var(--rot)); }
.float-letter[data-float="6"] { left: 86%; top: 64%; }

.wave-divider {
  position: relative;
  z-index: 0; /* abaixo do .hero-inner/.hero-floats — letras podem invadir a onda */
  overflow: hidden;
  width: 100%;
  height: 90px;
  margin-top: -2px;
}

.wave-divider svg {
  display: block;
  width: 200%;
  max-width: none;
  height: 90px;
  animation: ondular 45s linear infinite;
}

@keyframes ondular {
  to { transform: translateX(-50%); }
}

/* ============================================================
   Seção Cadastro (parceiros)
   ============================================================ */
.section-cadastro {
  background: var(--azul);
  padding: 4.5rem 0 5rem;
  color: var(--branco);
}

.kicker {
  color: var(--amarelo);
  font-family: var(--fonte-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.section-cadastro .section-head-light h2 {
  color: var(--branco);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
}

.form-parceiros {
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 2rem;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.form-parceiros input,
.form-parceiros select {
  width: 100%;
  padding: .75em 1em;
  border: 1.5px solid #d5dde5;
  border-radius: 8px;
  font: inherit;
  color: #1c2b3a;
  background: var(--branco);
}

.form-parceiros input:focus,
.form-parceiros select:focus {
  border-color: var(--azul);
  outline: 2px solid rgb(0 117 191 / .25);
}

.form-parceiros.was-validated input:invalid,
.form-parceiros.was-validated select:invalid {
  border-color: var(--vermelho);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-3 {
  grid-template-columns: 1.4fr 1fr .7fr;
}

.form-actions {
  display: flex;
  gap: 1rem;
}

.form-actions .btn {
  flex: 1;
  text-align: center;
}

.form-status {
  min-height: 1.4em;
  margin: 0;
}

.form-status.ok { color: var(--verde); }
.form-status.erro { color: var(--vermelho); }

/* ============================================================
   Seção Produtos + Carrossel
   ============================================================ */
.section-produtos {
  background: var(--branco);
  padding: 4.5rem 0 0;
  position: relative;
}

.faixa-amarela {
  background: var(--amarelo);
  height: 180px;
  margin-top: -140px;
}

.section-produtos .section-head h2 {
  color: var(--azul);
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem);
}

.section-produtos .section-head p {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

.carousel {
  position: relative;
  z-index: 1;
  padding: 2rem 0 3rem;
}

.carousel-track {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 1rem .2rem 2rem;
  list-style: none;
  margin: 0;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.product-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 min(240px, 70vw);
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 1.2rem;
  transition: transform .25s, box-shadow .25s;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.06);
  z-index: 2;
}

.stars {
  color: #F5A623;
  letter-spacing: .15em;
}

.product-card h3 {
  color: var(--azul-escuro);
}

.product-card p {
  font-size: .85rem;
  color: #6b7c8d;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--azul);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .2s;
}

.carousel-btn:hover {
  background: var(--vermelho);
}

.carousel-btn-prev { left: -8px; }
.carousel-btn-next { right: -8px; }

/* ============================================================
   Turmatrix
   ============================================================ */
.section-turmatrix {
  background: var(--amarelo);
  padding: 4rem 0 0;
  position: relative;
  z-index: 1;
}

.turmatrix-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 3rem;
  row-gap: 2rem;
  align-items: center;
}

.turmatrix-copy {
  color: var(--azul-escuro);
  padding-bottom: 4rem;
}

.turmatrix-copy h2 {
  color: var(--vermelho);
  text-transform: uppercase;
}

/* Personagens alinhados pela base. O overlap com a seção seguinte
   (margin-bottom negativo) é específico da home — ver
   `.section-turmatrix .turmatrix-chars` abaixo. Em outras páginas que
   reusam `.turmatrix-chars` (ex.: turmatrix.html) fica sem overlap. */
.turmatrix-chars {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(.25rem, 1vw, 1rem);
  min-width: 0;
  position: relative;
  z-index: 5;
}

/* Overlap com a seção A Matrix (azul) logo abaixo — só na home. */
.section-turmatrix .turmatrix-chars {
  margin-bottom: -60px;
}

.turmatrix-chars .char {
  width: auto;
  transform-origin: bottom center;
}

.char-robo-azul     { height: clamp(100px, 11vw, 120px); }
.char-menino         { height: clamp(160px, 17vw, 190px); }
.char-monstro         { height: clamp(145px, 15vw, 175px); }
.char-menina          { height: clamp(160px, 17vw, 190px); }
.char-robo-vermelho   { height: clamp(115px, 13vw, 145px); }

/* Entrada escalonada: a classe .revealed chega no wrapper inteiro
   (mesmo IntersectionObserver de sempre); o atraso por personagem
   fica a cargo do animation-delay via nth-child. Roda só enquanto o
   wrapper NÃO tem .entered — .entered é adicionado (via JS, no
   animationend do último personagem) depois que o bounce-in termina
   de verdade, e a partir daí a entrada nunca mais re-roda (sem o bug
   de "some e reaparece" ao tirar o hover). */
.turmatrix-chars.revealed:not(.entered) .char {
  animation: bounce-in .9s cubic-bezier(.34,1.56,.64,1) both;
}
.turmatrix-chars.revealed:not(.entered) .char:nth-child(1) { animation-delay: 0s; }
.turmatrix-chars.revealed:not(.entered) .char:nth-child(2) { animation-delay: .12s; }
.turmatrix-chars.revealed:not(.entered) .char:nth-child(3) { animation-delay: .24s; }
.turmatrix-chars.revealed:not(.entered) .char:nth-child(4) { animation-delay: .36s; }
.turmatrix-chars.revealed:not(.entered) .char:nth-child(5) { animation-delay: .48s; }

.turmatrix-chars.entered .char {
  animation: none;
}

/* Hover por personagem — só onde hover é confiável (mouse), nunca
   em touch, e nunca sob reduced-motion. Balança de um lado para o
   outro sem sumir (usa a propriedade `rotate`, que não conflita com
   `transform`/`translate` usados alhures). */
@media (hover: hover) and (pointer: fine) {
  @keyframes balancar {
    0%, 100% { rotate: 0deg; }
    25% { rotate: -7deg; }
    75% { rotate: 7deg; }
  }

  .turmatrix-chars.entered .char:hover {
    animation: balancar .6s ease-in-out infinite;
  }
}

/* ============================================================
   A Matrix
   ============================================================ */
.section-a-matrix {
  background: var(--azul);
  color: var(--branco);
  padding: calc(4.5rem + 80px) 0 4.5rem;
}

.a-matrix-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

.a-matrix-copy h2 {
  color: var(--amarelo);
  text-transform: uppercase;
}

.a-matrix-copy p {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

/* As fotos reais são 300×394 / 255×170 / 195×293 — o grid abaixo
   limita cada card a ~1.3x a largura natural (via aspect-ratio +
   max-width por card) em vez de esticar para preencher a linha. */
.a-matrix-fotos {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 300px);
  grid-template-rows: repeat(2, auto);
  gap: .6rem;
  justify-content: end;
}

.a-matrix-fotos figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 100%;
  justify-self: end;
}

.a-matrix-fotos .foto-grande {
  grid-row: span 2;
  align-self: center;
  background: var(--branco);
  aspect-ratio: 300 / 394;
  max-width: 340px; /* 300 natural × 1.13 */
}

.a-matrix-fotos .foto-amarela {
  background: var(--amarelo);
  aspect-ratio: 255 / 170;
  max-width: 300px; /* 255 natural × 1.18 */
}

.a-matrix-fotos .foto-verde {
  background: var(--verde);
  aspect-ratio: 195 / 293;
  max-width: 254px; /* 195 natural × 1.3 */
}

.a-matrix-fotos img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.a-matrix-fotos .foto img {
  transition: transform .35s ease;
}

.a-matrix-fotos .foto:hover img {
  transform: scale(1.05);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--azul-escuro);
  color: var(--branco);
  padding: 3.5rem 0 2.5rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-phones a,
.footer-mail {
  color: var(--amarelo);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

.footer-brand address {
  font-style: normal;
  opacity: .85;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.footer-nav a {
  color: var(--branco);
  text-decoration: none;
  transition: color .2s;
}

.footer-nav a:hover {
  color: var(--amarelo);
}

.footer-social .social {
  display: flex;
  gap: .8rem;
  margin-top: .8rem;
}

.footer-social .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--branco);
  color: var(--branco);
  transition: background .2s, color .2s;
}

.footer-social .social a:hover {
  background: var(--amarelo);
  color: var(--azul-escuro);
}

/* ============================================================
   Animações (Task 6)
   ============================================================ */

/* Scroll reveal */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].revealed { opacity: 1; transform: none; }

/* Flutuação contínua — só o caminhão (data-float="0"); as letras usam
   a entrada "pingar" abaixo e depois ficam estáticas. */
@keyframes flutuar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}
.hero-truck { animation: flutuar 5s ease-in-out infinite; }

/* Entrada "pingando" das letras — roda 1x no load, uma de cada vez,
   depois param estáticas na posição final (translate: 0 0 no 100%). */
@keyframes pingar {
  0% { translate: 0 -60vh; opacity: 0; }
  55% { translate: 0 0; opacity: 1; }
  70% { translate: 0 -28px; }
  82% { translate: 0 0; }
  90% { translate: 0 -12px; }
  100% { translate: 0 0; }
}
.float-letter { animation: pingar .9s cubic-bezier(.5,0,.5,1) both; }
.float-letter[data-float="1"] { animation-delay: .1s; }
.float-letter[data-float="2"] { animation-delay: .35s; }
.float-letter[data-float="3"] { animation-delay: .6s; }
.float-letter[data-float="4"] { animation-delay: .85s; }
.float-letter[data-float="5"] { animation-delay: 1.1s; }
.float-letter[data-float="6"] { animation-delay: 1.35s; }

/* Entrada dos personagens Turmatrix */
@keyframes bounce-in {
  0% { opacity: 0; transform: translateY(60px) scale(.8); }
  60% { opacity: 1; transform: translateY(-12px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}

/* Acessibilidade: sem movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-truck,
  .float-letter { animation: none; }
  .turmatrix-chars.revealed .char,
  .turmatrix-chars.entered .char { animation: none; }
  .turmatrix-chars .char:hover,
  .turmatrix-chars.entered .char:hover { animation: none; transform: none; transition: none; }
  .btn, .product-card { transition: none; }
  .wave-divider svg { animation: none; }
  .a-matrix-fotos .foto img { transition: none; }
  .a-matrix-fotos .foto:hover img { transform: none; }
}

/* ============================================================
   Task 7: Responsivo + Acessibilidade
   ============================================================ */

/* --- Contraste (WCAG AA) --------------------------------------
   Auditoria de pares de cor existentes (fórmula de contraste relativo):
   - branco (#FFFFFF) sobre azul (#0075BF): 4.89:1 — ok.
   - azul (#0075BF) sobre amarelo (#FFDD00): 3.63:1 — abaixo de 4.5:1,
     mas mantido por decisão de escopo (par pré-aprovado no brief da
     tarefa; texto curto/interativo do menu com sublinhado de apoio).
   - amarelo sobre branco: não ocorre em nenhum lugar do layout (o
     amarelo só é usado como texto sobre azul/azul-escuro) — nenhuma
     correção necessária para esse par específico.
   - vermelho (#E30613) sobre amarelo no parágrafo do hero (texto
     normal, não "large text" como o h1): 3.63:1 — viola AA (mínimo
     4.5:1). Corrigido abaixo com um vermelho mais escuro do mesmo
     matiz (5.09:1).
   - estrelas do carrossel (#F5A623) sobre branco: 2.03:1 — viola AA
     mesmo com o aria-label de apoio, pois os glifos ★ ainda são texto
     visível para usuários com baixa visão. Corrigido com um dourado
     mais escuro do mesmo matiz (5.0:1).
------------------------------------------------------------- */
:root {
  --vermelho-contraste: #B8050F; /* mesmo matiz do --vermelho, escurecido: 3.63:1 -> 5.09:1 sobre --amarelo */
  --dourado-contraste: #9C6300;  /* mesmo matiz do dourado das estrelas, escurecido: 2.03:1 -> 5.0:1 sobre branco */
}

.hero-copy p { color: var(--vermelho-contraste); }
.stars { color: var(--dourado-contraste); }

/* --- Foco visível ----------------------------------------------
   :focus-visible garante que o indicador só apareça para navegação
   por teclado (não em cliques de mouse), evitando ruído visual.
------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 2px;
}

/* Sobre fundo vermelho (.btn-red) o outline vermelho fica quase
   invisível (~1:1 de contraste contra o próprio preenchimento do
   botão). Usamos outline branco, que mantém 4.88:1 contra o
   vermelho do botão. */
.btn-red:focus-visible {
  outline-color: var(--branco);
}

/* Os campos do formulário já têm um anel azul sutil em :focus
   (feedback de estado); reforçamos com o outline vermelho de foco
   por teclado por cima, sem remover o destaque de borda existente. */
.form-parceiros input:focus-visible,
.form-parceiros select:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 2px;
}

/* --- Breakpoint 960px -------------------------------------------
   Empilha as seções de 2 colunas e transforma o menu em painel
   mobile. A ordem visual (copy antes da arte no hero; personagens
   antes do texto na Turmatrix) já é a ordem do DOM, então a
   mudança para 1 coluna basta.
------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-inner,
  .turmatrix-inner,
  .a-matrix-inner {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .nav-menu {
    position: fixed;
    inset: 84px 0 auto 0;
    background: var(--amarelo);
    flex-direction: column;
    padding: 1.5rem;
    transform: translateY(-130%);
    visibility: hidden;
    transition: transform .3s, visibility 0s .3s;
  }

  .nav-menu.open {
    transform: none;
    visibility: visible;
    transition: transform .3s, visibility 0s;
    box-shadow: var(--sombra);
  }

  .nav-toggle {
    display: flex;
  }

  /* Hambúrguer colado na direita (o .nav tem flex:1 e centralizava) */
  .nav {
    justify-content: flex-end;
  }

  .header-social {
    display: none;
  }
}

/* --- Breakpoint 640px -------------------------------------------
   Ajustes finos para telas pequenas: menos padding vertical nas
   seções, ações do formulário empilhadas, setas do carrossel
   escondidas (o scroll-snap já responde a swipe nativo) e metade
   das letras flutuantes do hero escondidas para não poluir.
------------------------------------------------------------- */
@media (max-width: 640px) {
  .section-cadastro,
  .footer {
    padding: 3rem 0;
  }

  /* .hero e .section-produtos precisam manter padding-bottom: 0 —
     o .wave-divider e a .faixa-amarela ficam colados na borda
     inferior dessas seções; um padding-bottom > 0 abriria um vão
     visual (amarelo liso antes do azul / branco entre a faixa
     amarela e a seção amarela seguinte). */
  .hero,
  .section-produtos {
    padding: 3rem 0 0;
  }

  /* .section-turmatrix mantém padding-bottom: 0 pelo mesmo motivo —
     os personagens usam margin-bottom negativo para atravessar a
     divisa com .section-a-matrix, então um padding aqui reabriria
     o vão. */
  .section-turmatrix {
    padding: 3rem 0 0;
  }

  .carousel-btn {
    display: none;
  }

  .form-actions {
    flex-direction: column;
  }

  /* Todas as 6 letras visíveis no mobile — só menores */
  .float-letter-img { width: clamp(38px, 11vw, 60px); }
  .float-letter-text { font-size: clamp(1.9rem, 10vw, 3rem); }

  /* Turmatrix: personagens menores, overlap menor, sem hover
     (hover já fica fora do alcance por (hover: hover) and (pointer: fine)
     em telas touch, mas os tamanhos precisam de ajuste próprio). */
  .turmatrix-chars {
    gap: .3rem;
  }

  .section-turmatrix .turmatrix-chars {
    margin-bottom: -30px;
  }

  .char-robo-azul     { height: clamp(50px, 14vw, 72px); }
  .char-menino         { height: clamp(75px, 20vw, 110px); }
  .char-monstro         { height: clamp(72px, 19vw, 102px); }
  .char-menina          { height: clamp(75px, 20vw, 110px); }
  .char-robo-vermelho   { height: clamp(55px, 15vw, 85px); }

  .section-a-matrix {
    padding: calc(3rem + 60px) 0 3rem;
  }
}

/* ============================================================
   Rodada 4 — Página "A Turmatrix" (turmatrix.html)
   Prefixo tm- para todas as classes novas desta página.
   ============================================================ */

/* --- Intro (fundo azul) ----------------------------------------- */
.tm-intro {
  background: var(--azul);
  color: var(--branco);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}

.tm-intro-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
  align-items: center;
}

.tm-intro-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: .8em;
}

.tm-intro-copy p {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

/* Wrapper reusa .turmatrix-chars (mesma animação/hover da home), mas
   aqui SEM overlap (ver rescopo de `.section-turmatrix .turmatrix-chars`
   acima) e alinhado à direita da coluna. */
.tm-intro .turmatrix-chars {
  justify-content: flex-end;
}

/* Alturas ~30% acima das da home. */
.tm-intro .char-robo-azul     { height: clamp(130px, 14vw, 156px); }
.tm-intro .char-menino         { height: clamp(208px, 22vw, 247px); }
.tm-intro .char-monstro         { height: clamp(188px, 20vw, 227px); }
.tm-intro .char-menina          { height: clamp(208px, 22vw, 247px); }
.tm-intro .char-robo-vermelho   { height: clamp(150px, 17vw, 188px); }

/* --- Perfil dos personagens (fundo azul, continuação) ------------ */
.tm-perfil {
  background: var(--azul);
  color: var(--branco);
  padding: 0 0 4.5rem;
}

.tm-perfil-title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 3rem;
}

.tm-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.tm-row-max {
  align-items: center;
  margin-bottom: 3.5rem;
}

.tm-row-trio {
  align-items: start;
}

.tm-name {
  color: var(--amarelo);
  margin-bottom: .5em;
}

.tm-row-text p,
.tm-trio-item p {
  font-size: .98rem;
}

/* Card verde: Max + Malu lado a lado, alinhados pela base, levemente
   cortados pelo fundo do card. */
.tm-card-duo {
  background: var(--verde);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .5rem;
  padding-top: 1rem;
}

/* Só a largura é travada — a altura fica em `auto` para preservar a
   proporção natural de cada personagem (menino e menina têm razões
   largura/altura diferentes). O leve corte pelo fundo do card vem do
   `translate` empurrando a imagem para baixo por cima do
   `overflow: hidden` do `.tm-card-duo`, não de espremer a imagem. */
.tm-card-duo img {
  width: 46%;
  height: auto;
  translate: 0 12%;
}

/* Cards amarelos: personagem recortado tipo "busto" (mostra
   cabeça/tronco, corta o resto via object-position). */
.tm-trio-item {
  text-align: center;
}

.tm-card-solo {
  background: var(--amarelo);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
}

.tm-card-solo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .3s ease;
}

.tm-trio-item:hover .tm-card-solo img,
.tm-card-duo:hover img {
  transform: scale(1.06);
}

/* Entrada escalonada dos cards do trio (mesmo espírito do stagger da
   entrada dos personagens da home, via transition-delay do data-reveal). */
.tm-row-trio [data-reveal]:nth-child(1) { transition-delay: 0s; }
.tm-row-trio [data-reveal]:nth-child(2) { transition-delay: .12s; }
.tm-row-trio [data-reveal]:nth-child(3) { transition-delay: .24s; }

/* --- Como tudo começou (fundo amarelo) ---------------------------- */
.tm-historia {
  background: var(--amarelo);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}

.tm-historia-title {
  color: var(--vermelho);
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}

.tm-historia-inner {
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

.tm-historia-photo {
  margin: 0;
}

.tm-historia-photo img {
  border-radius: var(--radius);
  max-width: 460px;
  width: 100%;
}

.tm-historia-copy {
  color: var(--azul);
}

.tm-historia-copy p {
  margin: 0 0 1.2em;
}

.tm-historia-closing {
  color: var(--vermelho);
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 700;
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin: 0;
  /* Fica acima da marca d'água (.am-watermark, z-index:0) adicionada
     em .tm-historia — sem isso, um elemento position:absolute com
     z-index:0 pinta por cima de conteúdo não-posicionado no fluxo
     normal (regra de stacking do CSS 2.1, apêndice E). */
  position: relative;
  z-index: 1;
}

/* --- O encontro (fundo azul) --------------------------------------- */
.tm-encontro {
  background: var(--azul);
  padding: 4.5rem 0;
}

.tm-encontro-inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 3rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.tm-encontro-copy {
  color: var(--branco);
}

.tm-encontro-copy p {
  margin: 0 0 1.2em;
}

.tm-encontro-photo {
  margin: 0;
}

.tm-encontro-photo img {
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  transition: transform .35s ease;
}

.tm-encontro-photo:hover img {
  transform: scale(1.04);
}

.tm-encontro-closing {
  color: var(--amarelo);
  font-family: var(--fonte-display);
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin: 0;
}

/* --- Reduced motion (aditivo, mesmo critério das regras já
   existentes acima) ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .tm-card-solo img,
  .tm-encontro-photo img {
    transition: none;
  }
  .tm-trio-item:hover .tm-card-solo img,
  .tm-card-duo:hover img,
  .tm-encontro-photo:hover img {
    transform: none;
  }
}

/* --- Responsivo: 960px --------------------------------------------- */
@media (max-width: 960px) {
  .tm-intro-inner {
    grid-template-columns: 1fr;
  }

  .tm-intro .turmatrix-chars {
    justify-content: flex-start;
  }

  .tm-row {
    grid-template-columns: 1fr;
  }

  .tm-row-max {
    text-align: center;
  }

  .tm-card-duo {
    max-width: 420px;
    margin-inline: auto;
  }

  .tm-historia-inner,
  .tm-encontro-inner {
    grid-template-columns: 1fr;
  }

  .tm-historia-photo img,
  .tm-encontro-photo img {
    margin-inline: auto;
  }

  .tm-encontro-inner .tm-encontro-photo {
    order: -1;
  }
}

/* --- Responsivo: 640px ----------------------------------------------- */
@media (max-width: 640px) {
  .tm-intro,
  .tm-perfil,
  .tm-historia,
  .tm-encontro {
    padding: 3rem 0;
  }

  .tm-intro .char-robo-azul     { height: clamp(65px, 18vw, 94px); }
  .tm-intro .char-menino         { height: clamp(98px, 26vw, 143px); }
  .tm-intro .char-monstro         { height: clamp(94px, 25vw, 133px); }
  .tm-intro .char-menina          { height: clamp(98px, 26vw, 143px); }
  .tm-intro .char-robo-vermelho   { height: clamp(72px, 20vw, 111px); }
}

/* --- Marca d'água de letras (reusa .am-watermark/.am-watermark img,
   já definidas mais abaixo no bloco da Rodada 5) em 2 seções: Intro
   (fundo azul) e "Como tudo começou" (fundo amarelo). `.tm-intro` e
   `.tm-historia` ganharam `position:relative; overflow:hidden` acima
   para conter o `position:absolute; inset:0` do `.am-watermark` sem
   criar scroll horizontal, mesmo padrão de amatrix.html. Como a
   marca d'água é `position:absolute` com `z-index:0`, o conteúdo em
   fluxo normal dessas duas seções precisa virar um contexto de
   empilhamento próprio (z-index:1) para continuar pintando por cima
   — feito aqui para `.container` e em `.tm-historia-closing`
   (parágrafo fora do `.container`) separadamente. */
.tm-intro .container,
.tm-historia .container {
  position: relative;
  z-index: 1;
}

/* Fundo amarelo: opacidade um pouco menor que o padrão (.08) para não
   competir com o título/texto sobre um fundo mais claro — mantém a
   textura decorativa sem prejudicar a leitura. */
.tm-historia .am-watermark img {
  opacity: .05;
}

.tm-intro .am-watermark img:nth-child(1) { top: -8%;  left: -5%;  width: 260px; rotate: -12deg; }
.tm-intro .am-watermark img:nth-child(2) { bottom: 5%; right: -4%; width: 220px; rotate: 15deg; opacity: .07; }
.tm-intro .am-watermark img:nth-child(3) { top: 38%;  left: 45%;  width: 190px; rotate: -8deg; opacity: .06; }

.tm-historia .am-watermark img:nth-child(1) { top: -6%;  right: -5%; width: 240px; rotate: 10deg; }
.tm-historia .am-watermark img:nth-child(2) { bottom: 0%; left: -4%; width: 200px; rotate: -14deg; }
.tm-historia .am-watermark img:nth-child(3) { top: 45%;  right: 32%; width: 170px; rotate: 16deg; }

/* ============================================================
   Rodada 5 — Página "A Matrix" (amatrix.html)
   Prefixo am- para todas as classes novas desta página.
   Página inteira com fundo azul (footer continua azul-escuro,
   estilo já definido em .footer acima — não tocado aqui).
   ============================================================ */

.am-page {
  background: var(--azul);
  /* Os personagens "am-peek" ficam parcialmente fora da borda das
     seções (efeito "encostado na parede"); overflow-x: hidden aqui
     é a segunda camada de proteção contra scroll horizontal (a
     primeira é o `overflow: hidden` de cada `.am-section`, que já
     corta a parte que sai da seção — ver medição no relatório). */
  overflow-x: hidden;
}

.am-section {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
  color: var(--branco);
}

.am-section .container {
  position: relative;
  z-index: 1;
}

/* --- Efeito B: letras MATRIX como marca d'água --------------------
   Estáticas (sem animação, por performance), atrás do conteúdo da
   seção (z-index 0; `.am-section .container` acima fica em z-index 1),
   não interceptam o mouse. */
.am-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.am-watermark img {
  position: absolute;
  opacity: .08;
  height: auto;
}

.am-intro .am-watermark img:nth-child(1) { top: -8%;  left: -6%;  width: 320px; rotate: -10deg; }
.am-intro .am-watermark img:nth-child(2) { bottom: 4%; left: 40%; width: 200px; rotate: 14deg; opacity: .07; }
.am-intro .am-watermark img:nth-child(3) { top: 18%;  right: -4%; width: 260px; rotate: -16deg; opacity: .09; }
.am-intro .am-watermark img:nth-child(4) { top: 84%;  left: 2%;   width: 160px; rotate: 22deg; opacity: .06; }
.am-intro .am-watermark img:nth-child(5) { bottom: -6%; right: 22%; width: 210px; rotate: -6deg; opacity: .08; }

.am-historia .am-watermark img:nth-child(1) { top: -6%;  right: -5%; width: 240px; rotate: 9deg; opacity: .08; }
.am-historia .am-watermark img:nth-child(2) { bottom: 6%; left: -4%; width: 200px; rotate: -13deg; opacity: .07; }
.am-historia .am-watermark img:nth-child(3) { top: 48%;  right: 30%; width: 260px; rotate: 17deg; opacity: .06; }

.am-manifesto .am-watermark img:nth-child(1) { top: -6%;   right: -5%; width: 300px; rotate: 12deg; opacity: .07; }
.am-manifesto .am-watermark img:nth-child(2) { bottom: 2%; left: -4%;  width: 260px; rotate: -10deg; }
.am-manifesto .am-watermark img:nth-child(3) { top: 46%;   right: 26%; width: 220px; rotate: 18deg; opacity: .09; }
.am-manifesto .am-watermark img:nth-child(4) { top: 20%;   left: 30%;  width: 190px; rotate: -20deg; opacity: .06; }
.am-manifesto .am-watermark img:nth-child(5) { bottom: 22%; right: 4%; width: 170px; rotate: 8deg; opacity: .07; }

.am-cadastro .am-watermark img:nth-child(1) { top: -5%;   left: -5%;  width: 230px; rotate: -11deg; opacity: .08; }
.am-cadastro .am-watermark img:nth-child(2) { bottom: 4%; right: 6%;  width: 190px; rotate: 15deg; opacity: .07; }
.am-cadastro .am-watermark img:nth-child(3) { top: 40%;   left: 32%;  width: 280px; rotate: -6deg; opacity: .06; }

/* --- Efeito A: personagens espiando das bordas --------------------
   `position: absolute` dentro da seção (que é `position: relative` +
   `overflow: hidden`); a parte que passa da borda da seção (= borda
   da página, seções full-width) fica cortada pela própria seção —
   é isso que produz o efeito "encostado na parede". Decorativos:
   `aria-hidden`, `alt=""`, `pointer-events: none`. Somem em ≤960px
   (não crowdar em telas menores). */
.am-peek {
  position: absolute;
  z-index: 2;
  width: auto;
  pointer-events: none;
}

/* Entrada ao rolar: reusa [data-reveal]/.revealed (sem JS novo), mas
   com transform de origem lateral (translateX) em vez do translateY
   global — precisa de mais especificidade que `.js [data-reveal]`
   para sobrescrever (ver ATENÇÃO no brief da rodada). */
.js .am-peek[data-reveal] {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.js .am-peek-right[data-reveal] { transform: translateX(60px) rotate(var(--am-rot, 0deg)); }
.js .am-peek-left[data-reveal]  { transform: translateX(-60px) rotate(var(--am-rot, 0deg)); }
.js .am-peek[data-reveal].revealed {
  opacity: 1;
  transform: rotate(var(--am-rot, 0deg));
}

/* Distribuição (alturas variadas, lados alternados — nunca dois
   personagens no mesmo nível dentro de uma mesma seção, já que cada
   seção tem só um `.am-peek`). Tamanhos ~35-45% maiores que a versão
   original (variados entre si, não um clamp uniforme repetido) e
   offset negativo maior (personagem sai mais para fora da seção) —
   ajuste pedido em revisão. O monstro (Conceito) recebeu o maior
   aumento proporcional e o maior offset (-60px): na versão original,
   por causa da silhueta mais estreita/pontuda do char-monstro
   (chapéu), a caixa delimitadora rotacionada tocava a borda da seção
   só numa faixa vertical pequena — visualmente parecia "flutuar"
   longe da borda, diferente dos outros 4. Aumentar tamanho + offset
   aqui resolve sem mudar o mecanismo (mesmo `overflow:hidden` da
   seção continua cortando a parte que sai). */
.am-intro .am-peek     { right: -50px; top: 15%;   height: clamp(168px, 18vw, 216px); --am-rot: -12deg; }
.am-historia .am-peek  { left: -48px;  bottom: 10%; height: clamp(179px, 19vw, 223px); --am-rot: 10deg; }
.am-conceito .am-peek  { right: -60px; top: 40%;   height: clamp(176px, 19vw, 218px); --am-rot: -14deg; }
.am-manifesto .am-peek { left: -42px;  top: 20%;   height: clamp(189px, 21vw, 235px); --am-rot: 13deg; }
.am-cadastro .am-peek  { right: -50px; bottom: 15%; height: clamp(174px, 19vw, 207px); --am-rot: -10deg; }

@media (max-width: 960px) {
  .am-peek { display: none; }
}

/* --- Intro (Isso que é Matrix) ------------------------------------- */
.am-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.am-intro-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: .8em;
}

.am-intro-copy p {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.am-intro-foto {
  margin: 0;
  max-width: 560px;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
}

.am-intro-foto img {
  transition: transform .35s ease;
}

.am-intro-foto:hover img {
  transform: scale(1.05);
}

/* --- História - do fundo do baú ------------------------------------ */
.am-historia-inner {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 3rem;
  align-items: center;
}

.am-historia-foto {
  margin: 0;
}

.am-historia-foto img {
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
}

.am-historia-title {
  color: var(--amarelo);
}

.am-historia-copy p {
  margin: 0 0 1.2em;
}

/* --- Conceito + Missão / Visão / Valores --------------------------- */
.am-conceito-inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.am-conceito-title {
  color: var(--amarelo);
}

.am-conceito-text {
  max-width: 62ch;
  margin-inline: auto;
}

.am-mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
  text-align: left;
}

.am-mvv-icon {
  /* 2x o tamanho original (56px → 112px). Só o tamanho renderizado
     muda — os keyframes dos ícones animados (am-traco-desenha,
     am-bandeira-tremular, am-olho-piscar, am-diamante-pulso,
     am-sparkle-piscar) usam `transform-box: view-box`, então todo
     `transform-origin` já é relativo ao viewBox (0 0 56 56) do SVG,
     não a pixels renderizados — escala junto automaticamente, sem
     precisar reajustar nenhum valor de origem. */
  width: 112px;
  height: 112px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: .8rem;
}

.am-mvv-title {
  color: var(--branco);
  font-weight: 700;
}

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

.am-valores li {
  margin-bottom: .5em;
}

/* Entrada escalonada dos 3 cards (mesmo padrão do stagger já usado
   em `.tm-row-trio` acima, via transition-delay do data-reveal). */
.am-mvv [data-reveal]:nth-child(1) { transition-delay: 0s; }
.am-mvv [data-reveal]:nth-child(2) { transition-delay: .12s; }
.am-mvv [data-reveal]:nth-child(3) { transition-delay: .24s; }

/* --- Ícones animados Missão/Visão/Valores ----------------------------
   Cada `.am-mvv-item` já tem `data-reveal` individual (não é o wrapper
   `.am-mvv` que recebe `.revealed` — o observer em animations.js observa
   cada `[data-reveal]` separadamente), então os loops abaixo, presos a
   `.am-mvv-item.revealed`, já nascem escalonados pelo mesmo stagger de
   `transition-delay` das regras acima. Antes do reveal (sem `.js` não
   há hidden nem loop — progressive enhancement, ícone estático completo). */

/* Missão: o traço (contorno da montanha + haste) se desenha 1x via
   `pathLength="1"` (normaliza dasharray/dashoffset independente do
   comprimento real do path); a bandeirinha entra depois e passa a
   tremular em loop, com origem na base do mastro. */
.js .icone-traco path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.am-mvv-item.revealed .icone-traco path {
  animation: am-traco-desenha 1.2s ease forwards;
}
.am-mvv-item.revealed .icone-traco path:nth-child(2) {
  animation-delay: .15s;
}

.js .icone-bandeira { opacity: 0; }
.icone-bandeira {
  transform-box: view-box;
  transform-origin: 28px 8px;
}
.am-mvv-item.revealed .icone-bandeira {
  animation:
    am-bandeira-entra .25s ease 1.15s forwards,
    am-bandeira-tremular 2.5s ease-in-out 1.4s infinite;
}

@keyframes am-traco-desenha {
  to { stroke-dashoffset: 0; }
}
@keyframes am-bandeira-entra {
  to { opacity: 1; }
}
@keyframes am-bandeira-tremular {
  0%, 100% { transform: skewY(0deg) rotate(0deg); }
  25%      { transform: skewY(4deg) rotate(2deg); }
  50%      { transform: skewY(-2deg) rotate(-1deg); }
  75%      { transform: skewY(3deg) rotate(1deg); }
}

/* Visão: piscada periódica (pálpebra) a cada ~4s, ~120ms de duração;
   micro-movimento opcional da pupila via `translate` (sem precisar de
   transform-origin, mesmo padrão já usado em `flutuar`/`pingar` acima). */
.icone-olho {
  transform-box: view-box;
  transform-origin: 28px 28px;
}
.am-mvv-item.revealed .icone-olho {
  animation: am-olho-piscar 4s ease-in-out infinite;
}
.am-mvv-item.revealed .icone-pupila {
  animation: am-pupila-mover 6s ease-in-out infinite;
}
@keyframes am-olho-piscar {
  0%, 91%, 100% { transform: scaleY(1); }
  92.5%         { transform: scaleY(.08); }
  94%           { transform: scaleY(1); }
}
@keyframes am-pupila-mover {
  0%, 100% { translate: 0 0; }
  50%      { translate: 1px 0; }
}

/* Valores: diamante com pulso leve de brilho + sparkles ao redor
   piscando alternados (opacity/scale, delays diferentes). */
.icone-diamante {
  transform-box: view-box;
  transform-origin: 28px 29px;
}
.am-mvv-item.revealed .icone-diamante {
  animation: am-diamante-pulso 3s ease-in-out infinite;
}
@keyframes am-diamante-pulso {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.02); opacity: .85; }
}

.js .icone-sparkle { opacity: 0; }
.icone-sparkle {
  fill: currentColor;
  stroke: none;
  transform-box: view-box;
}
.icone-sparkle-1 { transform-origin: 9px 5px; }
.icone-sparkle-2 { transform-origin: 48px 9px; }
.icone-sparkle-3 { transform-origin: 50px 42px; }
.am-mvv-item.revealed .icone-sparkle-1 { animation: am-sparkle-piscar 2s ease-in-out infinite; }
.am-mvv-item.revealed .icone-sparkle-2 { animation: am-sparkle-piscar 2s ease-in-out .6s infinite; }
.am-mvv-item.revealed .icone-sparkle-3 { animation: am-sparkle-piscar 2s ease-in-out 1.2s infinite; }
@keyframes am-sparkle-piscar {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1); }
}

/* --- Manifesto ------------------------------------------------------ */
.am-manifesto-inner {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 3rem;
  align-items: start;
}

.am-manifesto-foto {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.am-manifesto-foto img {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.am-manifesto-title {
  color: var(--amarelo);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: 1.2em;
}

.am-manifesto-sub {
  display: block;
  color: var(--amarelo);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  margin-top: .4em;
}

.am-manifesto-block {
  margin-bottom: 1.8rem;
}

.am-manifesto-block h3 {
  color: var(--branco);
  font-weight: 700;
  margin-bottom: .4em;
}

.am-manifesto-block p {
  margin: 0;
}

/* Entrada escalonada dos 5 blocos de texto do manifesto. */
.am-manifesto-copy .am-manifesto-block:nth-of-type(1) { transition-delay: 0s; }
.am-manifesto-copy .am-manifesto-block:nth-of-type(2) { transition-delay: .08s; }
.am-manifesto-copy .am-manifesto-block:nth-of-type(3) { transition-delay: .16s; }
.am-manifesto-copy .am-manifesto-block:nth-of-type(4) { transition-delay: .24s; }
.am-manifesto-copy .am-manifesto-block:nth-of-type(5) { transition-delay: .32s; }

/* --- Cadastro (reusa .form-parceiros/.btn/.form-* verbatim) -------- */
.am-cadastro {
  padding: 4.5rem 0 5rem;
}

.am-cadastro-title {
  color: var(--branco);
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  margin-bottom: 2rem;
}

/* Centraliza o card do form nesta página (só aqui — `.form-parceiros`
   é compartilhada com o form da home, que continua alinhada à
   esquerda; não tocar a regra base). Em mobile o form já ocupa
   100% da largura disponível até o `max-width:560px` existente,
   sem mudança adicional. */
.am-cadastro .form-parceiros {
  margin-inline: auto;
}

/* --- Reduced motion (aditivo) --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* A regra global `.js [data-reveal] { transform: none }` (acima)
     também bate no `.am-peek` (é um `[data-reveal]`); aqui restauramos
     só a rotação de repouso — sem ela, os personagens perderiam o
     ângulo "encostado" mesmo já visíveis. A transição em si já fica
     `none` pela regra global (mesma propriedade, não sobrescrita
     aqui), então nada anima. */
  .js .am-peek[data-reveal] {
    transform: rotate(var(--am-rot, 0deg));
  }
  .am-intro-foto img {
    transition: none;
  }
  .am-intro-foto:hover img {
    transform: none;
  }

  /* Ícones am-mvv: desliga os 3 loops (traço, bandeira, olho, pupila,
     diamante, sparkles) e força o estado final estático e visível,
     independente de `.revealed` já ter chegado ou não. */
  .icone-traco path,
  .icone-bandeira,
  .icone-olho,
  .icone-pupila,
  .icone-diamante,
  .icone-sparkle {
    animation: none;
  }
  .js .icone-traco path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .js .icone-bandeira {
    opacity: 1;
  }
  .js .icone-sparkle {
    opacity: 1;
  }
}

/* --- Responsivo: 960px ----------------------------------------------- */
@media (max-width: 960px) {
  .am-intro-inner,
  .am-historia-inner,
  .am-manifesto-inner {
    grid-template-columns: 1fr;
  }

  .am-historia-inner .am-historia-foto {
    order: -1;
  }

  .am-mvv {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --- Responsivo: 640px ------------------------------------------------ */
@media (max-width: 640px) {
  .am-section {
    padding: 3rem 0;
  }

  .am-cadastro {
    padding: 3rem 0 3.5rem;
  }
}

/* ============================================================
   Rodada 6 — Página "Contato" (contato.html)
   Prefixo ct- para todas as classes novas desta página.
   ============================================================ */

/* --- Seção Contato (fundo amarelo) ---------------------------------
   Texto vermelho (kicker sobrescrito) + foto à direita. Mesmo padrão
   de marca d'água das outras páginas (`.am-watermark`, definida na
   Rodada 5), com `position:relative; overflow:hidden` no container
   direto (só desta seção — não afeta o card do form, que fica na
   seção seguinte). */
.ct-contato {
  background: var(--amarelo);
  /* padding-bottom generoso: reserva o espaço vazio que o card do form
     (seção seguinte) invade por cima via margin-top negativo — medido
     em headless para o texto/foto nunca ficarem sob o card (ver
     `.ct-form-card` abaixo). */
  padding: 4.5rem 0 18rem;
  position: relative;
  overflow: hidden;
}

.ct-contato .container {
  position: relative;
  z-index: 1;
}

.ct-contato-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

/* Reusa a tipografia de `.kicker` (Baloo 2, uppercase, letter-spacing);
   sobrescreve só a cor — nesta seção o fundo é amarelo, então o texto
   precisa ser vermelho (não amarelo como nas seções azuis). */
.ct-contato-title {
  color: var(--vermelho);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: .6em;
}

.ct-contato-copy p {
  color: var(--vermelho);
  margin: 0 0 1.2em;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.ct-contato-foto {
  margin: 0;
  max-width: 560px;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
}

.ct-contato-foto img {
  transition: transform .35s ease;
}

.ct-contato-foto:hover img {
  transform: scale(1.05);
}

.ct-contato .am-watermark img:nth-child(1) { top: -6%;   right: -5%; width: 220px; rotate: 12deg; }
.ct-contato .am-watermark img:nth-child(2) { bottom: 4%; left: -4%;  width: 240px; rotate: -14deg; opacity: .07; }
.ct-contato .am-watermark img:nth-child(3) { top: 42%;   left: 42%;  width: 300px; rotate: 8deg; opacity: .06; }

/* --- Seção do formulário (fundo azul) -------------------------------
   O card branco do form COMEÇA na seção amarela e ATRAVESSA para a
   azul: ele é filho desta seção (azul), mas ganha um margin-top
   negativo grande o bastante para a borda de cima ficar sobre a
   divisa entre as duas seções. Como esta seção vem DEPOIS da amarela
   no DOM (e nenhuma das duas usa z-index/overflow para inverter a
   ordem natural de pintura), o card pinta por cima do rodapé da seção
   amarela sem precisar de truque de z-index — mesmo raciocínio do
   `margin-bottom` negativo usado em `.section-turmatrix .turmatrix-chars`,
   espelhado (lá o filho da seção anterior invade a seguinte por baixo
   + z-index explícito; aqui o filho da seção seguinte invade a
   anterior por cima, e a ordem do DOM já resolve sozinha). Valor
   calibrado em headless (ver relatório da Rodada 6) para o card
   cruzar a divisa mais ou menos na metade, sem cobrir o texto
   vermelho acima nem as infos à direita (colunas diferentes do grid,
   nunca se sobrepõem horizontalmente). */
.ct-form-section {
  background: var(--azul);
  color: var(--branco);
  padding: 4.5rem 0 5rem;
}

.ct-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 3rem;
  align-items: start;
}

.ct-form-card {
  margin-top: -260px;
  /* a seção amarela anterior é position:relative (watermark) e pintaria
     por cima do card; o card precisa ser posicionado com z maior */
  position: relative;
  z-index: 2;
}

/* Textarea da mensagem: `.form-parceiros input, .form-parceiros select`
   (Rodada 3) não cobre `textarea`, então replica os mesmos estilos
   aqui explicitamente. */
.ct-mensagem {
  width: 100%;
  padding: .75em 1em;
  border: 1.5px solid #d5dde5;
  border-radius: 8px;
  font: inherit;
  color: #1c2b3a;
  background: var(--branco);
  resize: vertical;
}

.ct-mensagem:focus {
  border-color: var(--azul);
  outline: 2px solid rgb(0 117 191 / .25);
}

.ct-mensagem:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 2px;
}

.form-parceiros.was-validated .ct-mensagem:invalid {
  border-color: var(--vermelho);
}

.ct-form-info {
  padding-top: 1.4rem;
}

.ct-info-label {
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--branco);
  margin: 0 0 .4em;
}

.ct-form-info .ct-info-label:not(:first-child) {
  margin-top: 1.8em;
}

.ct-info-phones {
  margin: 0 0 .6em;
}

.ct-info-phones a,
.ct-info-mail {
  color: var(--amarelo);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.35rem;
  text-decoration: none;
}

.ct-info-address {
  font-style: normal;
  color: var(--branco);
  margin: 0;
}

/* Botões centralizados ABAIXO do card, fora do <form> — ligados a ele
   via atributo `form="form-contato"` (funciona para type="submit" e
   type="reset" mesmo fora da marcação do form). */
.ct-form-actions {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.2rem;
}

.ct-btn-limpar {
  background: var(--amarelo);
  color: var(--vermelho);
}

/* --- Reduced motion (aditivo) --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ct-contato-foto img {
    transition: none;
  }
  .ct-contato-foto:hover img {
    transform: none;
  }
}

/* --- Responsivo: 960px ----------------------------------------------- */
@media (max-width: 960px) {
  .ct-contato-inner {
    grid-template-columns: 1fr;
  }

  .ct-form-grid {
    grid-template-columns: 1fr;
  }

  .ct-form-card {
    margin-top: -120px;
  }

  .ct-form-info {
    padding-top: 0;
  }
}

/* --- Responsivo: 640px ------------------------------------------------ */
@media (max-width: 640px) {
  .ct-contato {
    padding: 3rem 0 7rem;
  }

  .ct-form-section {
    padding: 3rem 0;
  }

  .ct-form-card {
    margin-top: -110px;
  }

  .ct-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
}