/* ==========================================================================
   Vamo, uai! — landing da Rafa
   Fonte da verdade do visual: Figma "Vamo, uai! — Landing page" (frame 3:2)
   Movimento: coreografia inspirada em boraassessoria.com (referência da cliente)
   ========================================================================== */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --creme: #f3efe6;
  --creme-escuro: #e7e1d3;
  --papel: #fbf9f4;
  --grafite: #2f2d2a;
  --grafite-texto: #4e4b47;
  --cinza: #6b665f;
  --oliva: #6e7f50;
  --salvia: #9dae8a;
  --salvia-claro: #cdd6c1;
  --azul: #a7c0da;
  --azul-escuro: #3f5e7d;
  --vermelho: #c9271f;

  --display: "Anton", "Impact", sans-serif;
  --texto: "DM Sans", system-ui, sans-serif;

  --largura: 1200px;
  --gutter: clamp(20px, 5vw, 120px);

  /* curvas e tempos medidos no boraassessoria.com */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-coreografia: 820ms;
  --dur-chegada: 600ms;
  --dur-padrao: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--grafite-texto);
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure, blockquote { margin: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
em { font-style: normal; color: var(--oliva); }
mark { background: #ffe14d; color: var(--grafite); padding: 0 .2em; }
section[id] { scroll-margin-top: 120px; }

/* ---------- tipografia ---------- */
.titulo {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--grafite);
  line-height: .98;
}
.titulo > span { display: block; }
.titulo--l { font-size: clamp(44px, 5.6vw, 80px); max-width: 1000px; }
.titulo--largo { max-width: 1100px; }
.titulo--longo { font-size: clamp(38px, 4.4vw, 64px); max-width: 1100px; }
.titulo__sub { display: block; margin-top: .3em; font-size: .62em; line-height: 1.02; }
.titulo--m { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; }
.titulo--s { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.04; }
.corpo { font-size: 18px; line-height: 1.55; }
.corpo--l { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.5; }
.corpo--forte { font-weight: 700; line-height: 1.45; color: var(--grafite); }
.rotulo {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase; color: var(--salvia);
}
.rotulo--oliva { color: var(--oliva); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 30px; border-radius: 999px;
  font: 700 17px/1.2 var(--texto); text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform var(--dur-padrao) var(--ease), background var(--dur-padrao) var(--ease),
              box-shadow var(--dur-padrao) var(--ease), color var(--dur-padrao) var(--ease);
}
.botao img { width: 20px; height: 20px; transition: transform var(--dur-padrao) var(--ease); }
.botao:hover { transform: translateY(-2px); }
.botao:hover img { transform: translateX(4px); }
.botao:active { transform: translateY(0) scale(.98); }
.botao:focus-visible { outline: 3px solid var(--azul-escuro); outline-offset: 3px; }
.botao--primario { background: var(--vermelho); color: #fff; }
.botao--primario:hover { background: #b0211a; box-shadow: 0 10px 24px rgba(201, 39, 31, .28); }
.botao--contorno { border-color: var(--grafite); color: var(--grafite); }
.botao--contorno:hover { background: var(--grafite); color: var(--creme); }
.botao--contorno:hover img { filter: invert(1); }
.botao--claro { background: var(--creme); color: var(--grafite); }
.botao--claro:hover { background: #fff; }
.botao--cheio { width: 100%; }

/* ---------- menu ---------- */
.menu {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 239, 230, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--salvia-claro);
}
.menu__conteudo {
  max-width: calc(var(--largura) + 2 * var(--gutter)); margin: 0 auto;
  padding: 4px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo-oficial { display: block; flex-shrink: 0; }
.logo-oficial img { height: 112px; width: auto; margin: -6px 0; }
.menu__links { display: flex; gap: 40px; }
.menu__links a {
  position: relative; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.menu__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--vermelho); transform: scaleX(0); transform-origin: right;
  transition: transform 400ms var(--ease);
}
.menu__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- seções ---------- */
.secao { padding: 120px var(--gutter); }
.secao--azul { background: var(--azul); }
.secao--azul em { color: var(--azul-escuro); }
.secao--papel { background: var(--papel); }
.secao--escura { background: var(--grafite); }
.secao--escura .titulo { color: var(--creme); }
.secao--escura em { color: var(--salvia); }
.conteudo { max-width: var(--largura); margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.conteudo--estreito { max-width: 900px; gap: 40px; }

/* ---------- fotos ---------- */
.foto { position: relative; overflow: hidden; border-radius: 24px; background: var(--creme-escuro); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 88px var(--gutter) 200px; overflow: hidden; }
.hero__conteudo {
  position: relative; z-index: 1;
  max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 680px) 456px; gap: 64px; align-items: center;
}
.hero__texto { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.selo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 16px; border-radius: 999px;
  background: var(--papel); border: 1.5px solid var(--salvia);
  font-size: 15px; font-weight: 600; line-height: 1.5;
}
.selo__ponto {
  width: 10px; height: 10px; border-radius: 50%; background: #ee3a32;
  box-shadow: 0 0 0 0 rgba(238, 58, 50, .5); animation: pulso 2.4s var(--ease) infinite;
}
@keyframes pulso { 70% { box-shadow: 0 0 0 8px rgba(238, 58, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 58, 50, 0); } }
.hero__titulo, .final__titulo {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(52px, 6.6vw, 96px); line-height: .96; color: var(--grafite);
}
.linha { display: block; }
.hero__titulo .destaque { color: var(--oliva); }
.hero__sub { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.5; }
.hero__botoes { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__micro { font-size: 15px; color: var(--cinza); margin-top: -8px; }
.provas {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px;
  border-top: 1px solid var(--salvia-claro); padding-top: 28px;
}
.provas div { display: flex; flex-direction: column; gap: 4px; }
.provas strong { font: 400 26px/1.12 var(--display); color: var(--grafite); letter-spacing: .005em; }
.provas span { font-size: 15px; line-height: 1.5; color: var(--cinza); }
.hero__fotos { display: flex; gap: 16px; }
.hero__coluna { display: flex; flex-direction: column; gap: 16px; width: 220px; }
.hero__coluna:first-child { padding-top: 48px; }
.foto--alta { height: 300px; }
.foto--quadrada { height: 220px; }
.hero__chao { position: absolute; inset: 0; pointer-events: none; }
.etiqueta {
  position: absolute; right: 10%; bottom: 72px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 22px; border-radius: 6px; background: var(--papel);
  box-shadow: 0 10px 24px rgba(46, 43, 41, .18);
  transform: rotate(4deg);
}
.etiqueta p { font: 400 26px/1.12 var(--display); text-transform: uppercase; color: var(--grafite-texto); letter-spacing: .005em; }

/* ---------- para quem é ---------- */
.secao--azul .conteudo { gap: 48px; }
.secao--azul .titulo--l { max-width: 1080px; }
.publico__fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.publico__fotos .foto { height: 320px; }
.publico__texto { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; color: var(--grafite); }
.publico__texto > div:first-child { display: flex; flex-direction: column; gap: 20px; }
.publico__abertura { font-weight: 700; line-height: 1.45; }
.lista-tri li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid rgba(47, 45, 42, .25);
  font-weight: 700; line-height: 1.45;
}
.lista-tri li::before {
  content: ""; flex: 0 0 18px; height: 16px;
  background: url("../img/tri-lista.svg") center / contain no-repeat;
}

/* ---------- como funciona ---------- */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.passo {
  display: flex; flex-direction: column; gap: 16px;
  padding: 30px 28px; border-radius: 20px;
  background: var(--papel); border: 1.5px solid var(--salvia-claro);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}
.passo:hover { transform: translateY(-6px); border-color: var(--salvia); box-shadow: 0 18px 40px rgba(46, 43, 41, .08); }
.passo__numero { font: 400 60px/1.04 var(--display); color: var(--oliva); }
.passo strong { font-size: 22px; line-height: 1.5; color: var(--grafite); }
.apps {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px;
  padding: 48px 56px; border-radius: 24px; background: var(--creme-escuro); overflow: hidden;
}
.apps__texto { display: flex; flex-direction: column; gap: 18px; }
.apps__rotulo { font: 400 clamp(30px, 2.8vw, 40px)/1.04 var(--display); text-transform: uppercase; color: var(--grafite); }
.apps__pilulas { display: flex; flex-wrap: wrap; gap: 12px; }
.apps .pilula { background: var(--papel); }
.celulares { display: flex; gap: 28px; padding: 8px 12px 0; }
.celular { --giro: -4deg; width: 210px; display: flex; flex-direction: column; gap: 12px; align-items: center; transform: rotate(var(--giro)); }
.celular--direita { --giro: 4deg; margin-top: 36px; }
.celular__tela {
  width: 100%; aspect-ratio: 9 / 19; border-radius: 34px;
  border: 9px solid var(--grafite); background: var(--papel);
  box-shadow: 0 24px 48px rgba(46, 43, 41, .22);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 20px; text-align: center; font-size: 14px; line-height: 1.4;
  transition: transform 400ms var(--ease);
}
.celular:hover .celular__tela { transform: translateY(-8px); }
.celular__tela--sisrun { background: radial-gradient(circle at 50% 35%, #12355a, #0a1724 70%); }
.celular__tela--sisrun img { width: 80%; }
.celular__tela--mfit { background: #0070c4; gap: 18px; }
.celular__tela--mfit img { width: 82%; }
.celular__tela--mfit .celular__icone { width: 72px; border-radius: 50%; }
.celular figcaption { font-size: 14px; font-weight: 700; color: var(--grafite); }
.pilula {
  padding: 10px 18px; border-radius: 999px; background: var(--creme-escuro);
  font-weight: 700; line-height: 1.45; color: var(--grafite);
}

/* ---------- modalidades ---------- */
.modalidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.modalidade {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 20px 32px; border-radius: 24px;
  background: rgba(243, 239, 230, .06); border: 1px solid rgba(243, 239, 230, .1);
  color: var(--creme);
  transition: background 400ms var(--ease), transform 400ms var(--ease);
}
.modalidade:hover { background: rgba(243, 239, 230, .1); transform: translateY(-6px); }
.modalidade .foto { height: 400px; margin-bottom: 8px; }
.modalidade .foto img { transition: transform 1100ms var(--ease); }
.modalidade:hover .foto img { transform: scale(1.05); }
.modalidade h3, .modalidade p, .modalidade .rotulo { padding: 0 8px; }
.modalidade h3 { font: 400 30px/1.12 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.chamada {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid rgba(243, 239, 230, .2); padding-top: 40px;
}
.chamada .titulo { color: var(--creme); }

/* ---------- diferenciais ---------- */
.foto--faixa { height: 420px; }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grade__item {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px 28px 0; border-top: 2px solid rgba(47, 45, 42, .15);
}
.grade__item img { width: 30px; }
.grade__item h3 { font: 400 26px/1.12 var(--display); text-transform: uppercase; color: var(--grafite); letter-spacing: .005em; }

/* ---------- quem sou eu ---------- */
.sobre { flex-direction: row; align-items: center; gap: 80px; }
.sobre > .revela:first-child { flex: 0 0 500px; }
.foto--retrato { height: 640px; }
.sobre__texto { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.titulo--sobre { font-size: clamp(44px, 4.7vw, 68px); }
.selos { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.selos li {
  padding: 10px 16px; border-radius: 10px;
  background: var(--papel); border: 1.5px solid var(--salvia-claro);
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--grafite);
}

/* ---------- histórias ---------- */
.historias { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.trofeus { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 14px; }
.trofeus .foto { aspect-ratio: 9 / 13; }
.trofeus figcaption { font-size: 15px; line-height: 1.5; color: var(--salvia); }
.depoimentos { display: flex; flex-direction: column; gap: 20px; }
.depoimento {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 32px 24px 72px; border-radius: 20px;
  background: rgba(243, 239, 230, .06); border: 1px solid rgba(243, 239, 230, .1);
  color: rgba(243, 239, 230, .82); font-size: 17px; line-height: 1.6;
  transition: background 400ms var(--ease);
}
.depoimento:hover { background: rgba(243, 239, 230, .1); }
.depoimento::before {
  content: "\201C"; position: absolute; left: 24px; top: 14px;
  font: 400 64px/1 var(--display); color: var(--salvia);
}
.depoimento strong { color: var(--creme); font-weight: 700; }
.depoimento footer { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--salvia); }

/* ---------- planos ---------- */
.planos__intro { max-width: 760px; margin-top: 20px; }
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; }
.plano {
  display: flex; flex-direction: column; gap: 24px;
  padding: 32px; border-radius: 24px;
  background: var(--papel); border: 1.5px solid var(--salvia-claro);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.plano:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(46, 43, 41, .1); }
.plano h3 { font: 400 34px/1.12 var(--display); text-transform: uppercase; color: var(--grafite); letter-spacing: .005em; }
.plano__sub { margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--oliva); }
.plano__preco { font: 400 68px/1 var(--display); color: var(--grafite); }
.plano__nota { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.plano__itens {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 20px; border-top: 1px solid rgba(47, 45, 42, .15); color: var(--grafite);
}
.plano__itens li { display: flex; gap: 10px; align-items: flex-start; }
.plano__itens li::before {
  content: ""; flex: 0 0 20px; height: 20px; margin-top: 3px;
  background: url("../img/check-oliva.svg") center / contain no-repeat;
}
.plano__economia { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--oliva); }
.plano--destaque { background: var(--grafite); border-color: var(--grafite); padding-top: 28px; color: var(--creme); }
.plano--destaque h3, .plano--destaque .plano__preco, .plano--destaque .plano__itens { color: var(--creme); }
.plano--destaque .plano__sub { color: var(--salvia); }
.plano--destaque .plano__itens { border-color: rgba(243, 239, 230, .2); }
.plano--destaque .plano__itens li::before { background-image: url("../img/check-salvia.svg"); }
.plano__selo {
  align-self: flex-start; padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--vermelho); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
}
.planos__aviso span { display: flex; align-items: center; gap: 12px; }
.planos__aviso img { flex: 0 0 20px; }

/* ---------- dúvidas ---------- */
.faq { border-bottom: 1px solid rgba(47, 45, 42, .3); }
.faq details { border-top: 1px solid rgba(47, 45, 42, .3); interpolate-size: allow-keywords; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--grafite);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 28px; height: 28px;
  background: url("../img/mais.svg") center / contain no-repeat;
  transition: transform 400ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--oliva); }
.faq summary:focus-visible { outline: 3px solid var(--azul-escuro); outline-offset: 4px; }
.faq details[open] summary { padding-bottom: 14px; }
.faq details p { max-width: 780px; padding-bottom: 26px; }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 500ms var(--ease), content-visibility 500ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* ---------- chamada final ---------- */
.final { position: relative; overflow: hidden; background: var(--azul); padding: 120px var(--gutter) 140px; text-align: center; }
.final__conteudo {
  position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.final__titulo .destaque { color: var(--azul-escuro); }
.final .corpo--l { max-width: 680px; color: var(--grafite); }
.final__logo { width: min(760px, 100%); margin: -40px 0 -48px; }
.final__logo img { width: 100%; }

/* ---------- rodapé ---------- */
.rodape { background: var(--grafite); color: var(--creme); padding: 72px var(--gutter) 40px; }
.rodape__topo, .rodape__base { max-width: var(--largura); margin: 0 auto; display: flex; justify-content: space-between; gap: 32px; }
.rodape__topo { flex-wrap: wrap; }
.rodape__topo > div { display: flex; flex-direction: column; gap: 12px; }
.rodape__topo > div:first-child { gap: 8px; }
.rodape__logo { width: 280px; height: auto; margin: -12px 0 0 -16px; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__base {
  flex-wrap: wrap; margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(243, 239, 230, .2); font-size: 15px; opacity: .75;
}

/* ==========================================================================
   MOVIMENTO — vocabulário do boraassessoria.com
   .revela  → grupo observado; ganha .visivel quando entra na tela (uma vez só)
   .entra   → texto/bloco: sobe 1.2rem revelado por máscara de baixo pra cima
   .solta   → foto: aparece e o zoom "assenta" de 1.09 para 1
   --atraso → cascata, calculada no main.js pela ordem dentro do grupo
   Tudo só vale com html.tem-anima: sem JS, o site aparece inteiro.
   ========================================================================== */
.tem-anima .entra {
  clip-path: inset(0 0 100%);
  transform: translateY(1.2rem);
  opacity: .001;
  transition: clip-path var(--dur-coreografia) var(--ease) var(--atraso, 0ms),
              transform var(--dur-coreografia) var(--ease) var(--atraso, 0ms),
              opacity 300ms linear var(--atraso, 0ms);
}
.tem-anima .visivel .entra {
  clip-path: inset(-8% -4% -10%);
  transform: none;
  opacity: 1;
}
/* depois que chega, solta o clip pra hover/sombra/foco não serem cortados */
.tem-anima .visivel .entra.chegou { clip-path: none; transition: transform var(--dur-padrao) var(--ease), opacity 300ms linear; }
.tem-anima .visivel .passo.chegou, .tem-anima .visivel .modalidade.chegou, .tem-anima .visivel .plano.chegou {
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), background 400ms var(--ease), border-color 400ms var(--ease);
}

.tem-anima .solta { opacity: 0; transition: opacity 700ms var(--ease) var(--atraso, 0ms); }
.tem-anima .solta img { transform: scale(1.09) translateY(16px); transition: transform 1100ms var(--ease) var(--atraso, 0ms); }
.tem-anima .visivel .solta { opacity: 1; }
.tem-anima .visivel .solta img { transform: none; }

/* celulares sobem já inclinados */
.tem-anima .celular { opacity: 0; transform: translateY(60px) rotate(calc(var(--giro) * 3)); }
.tem-anima .visivel .celular {
  opacity: 1; transform: rotate(var(--giro));
  transition: opacity 700ms var(--ease) var(--atraso, 0ms), transform 1100ms var(--ease) var(--atraso, 0ms);
}

/* etiqueta cai e gira até o ângulo final */
.tem-anima .etiqueta { opacity: 0; transform: translateY(-40px) rotate(-8deg); }
.tem-anima .visivel .etiqueta {
  opacity: 1; transform: rotate(4deg);
  transition: opacity 400ms linear 900ms, transform 1100ms cubic-bezier(.34, 1.56, .64, 1) 900ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   RESPONSIVO — o Figma só tem desktop; abaixo disso é adaptação
   ========================================================================== */
@media (max-width: 1180px) {
  .menu__links { gap: 24px; }
  .hero__conteudo { grid-template-columns: 1fr; }
  .hero__fotos { justify-content: center; }
  .etiqueta { display: none; }
  .hero { padding-bottom: 96px; }
  .apps { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .apps__pilulas { justify-content: center; }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .sobre { gap: 48px; }
  .sobre > .revela:first-child { flex-basis: 40%; }
}
@media (max-width: 1100px) {
  .menu__links { display: none; }
}
@media (max-width: 980px) {
  .modalidades, .planos { grid-template-columns: 1fr; max-width: 520px; width: 100%; margin: 0 auto; }
  .historias { grid-template-columns: 1fr; }
  .trofeus { position: static; max-width: 520px; width: 100%; margin: 0 auto; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .publico__fotos { grid-template-columns: repeat(2, 1fr); }
  .publico__texto { grid-template-columns: 1fr; gap: 40px; }
  .sobre { flex-direction: column; align-items: stretch; }
  .sobre > .revela:first-child { flex-basis: auto; }
  .foto--retrato { height: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  body { font-size: 17px; }
  .menu__conteudo { padding-top: 4px; padding-bottom: 4px; }
  .logo-oficial img { height: 80px; margin: -4px 0; }
  .botao--menu { padding: 13px 20px; font-size: 15px; }
  .secao { padding-top: 80px; padding-bottom: 80px; }
  .conteudo { gap: 40px; }
  .hero { padding-top: 48px; padding-bottom: 64px; }
  .hero__texto { gap: 24px; }
  .hero__fotos { gap: 10px; }
  .hero__coluna { width: auto; flex: 1; gap: 10px; }
  .hero__coluna:first-child { padding-top: 32px; }
  .foto--alta { height: auto; aspect-ratio: 11 / 15; }
  .foto--quadrada { height: auto; aspect-ratio: 1; }
  .provas { grid-template-columns: 1fr; }
  .provas strong { font-size: 24px; }
  .apps { padding: 36px 20px; }
  .celulares { gap: 14px; }
  .celular { width: min(40vw, 170px); }
  .celular__tela { border-width: 7px; border-radius: 26px; padding: 12px; font-size: 12px; }
  .publico__fotos .foto { height: auto; aspect-ratio: 9 / 10; }
  .passos, .grade { grid-template-columns: 1fr; }
  .modalidade .foto { height: auto; aspect-ratio: 342 / 400; }
  .foto--faixa { height: 260px; }
  .plano { padding: 28px 24px; }
  .depoimento { padding: 52px 20px 20px; font-size: 16px; }
  .depoimento::before { left: 18px; top: 10px; font-size: 52px; }
  .plano__preco { font-size: 56px; }
  .faq summary { font-size: 19px; padding: 22px 0; }
  .final { padding-top: 72px; padding-bottom: 96px; }
  .botao { white-space: normal; text-align: center; }
  .rodape__topo { flex-direction: column; }
}