/* ==========================================================================
   Wizard · Inglês online para brasileiros na Austrália
   Sistema visual derivado da LP do curso online (lp-ingles-online/), com a
   paleta reposicionada: aqui o vermelho da marca é a cor primária e o azul
   escuro sobrou como detalhe. O grafite substituiu o azul-marinho nas
   superfícies escuras, para a página ler como premium e adulta.

   Ordem: fontes → tokens → contexto de superfície → reset → utilitários
          → botões → header → seções (na ordem da página) → motion
   ========================================================================== */

/* ------------------------------- 1. Fontes -------------------------------
   Inter variável, hospedada aqui mesmo. Dois recortes: latin cobre o
   português inteiro e carrega primeiro; latin-ext só é buscado se a página
   usar algum caractere fora dele.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------- 2. Tokens -------------------------------
   Hexadecimal primeiro, para navegadores antigos; OKLCH sobrescreve quando
   há suporte. Os dois vermelhos da marca são preservados exatamente.
   -------------------------------------------------------------------------- */

:root {
  /* Vermelho: a cor primária desta página. O #ff0000 é o vermelho exato da
     marca e só aparece em superfície grande e em traço; sobre ele, texto
     branco não cumpre a norma. Quem carrega botão, número e destaque é o
     --red-action, que mede 4,63:1 com branco. */
  --red-brand: #ff0000;
  --red-action: #eb0000;
  --red-hover: #c40000;
  --red-deep: #8f0000;
  /* Um vermelho só na página inteira: o --red-action, o mesmo do preço do
     hero. Ele vale como texto no claro e no escuro. Onde texto pequeno não
     alcançaria contraste sobre o azul (as etiquetas), o vermelho entra como
     preenchimento sólido com rótulo branco, e não como cor de letra. */
  --red-wash: #fff1f1;
  --red-edge: #ffd4d4;

  /* Azul da marca: é ele que carrega as superfícies escuras da página,
     igual à LP do curso online. A escala inteira sai de #021167. */
  --ink-1000: #010c46;
  --ink-900: #021167;
  --ink-800: #0a2a8c;
  --ink-700: #1c3f9e;
  --ink-600: #2b56bd;

  /* Azul claro, para link e detalhe sobre fundo escuro. */
  --blue-lift: #9dc0ff;

  /* Verde do valor da Wizard: é ele que faz o preço ler como vantagem, e
     não como custo. Usa os mesmos dois degraus dos vistos de confirmação,
     um para fundo claro e outro para o azul, então não entra cor nova na
     página. O vermelho fica com o preço do concorrente. */

  /* Verde do WhatsApp com rótulo branco, cor definida pelo cliente.
     Branco sobre #00c307 mede 2,38:1, abaixo do mínimo de 4,5:1 da WCAG AA.
     É decisão consciente e herdada da LP do online: o botão verde de
     WhatsApp é reconhecido na hora e é o padrão do mercado brasileiro. O
     peso 700 recupera parte da legibilidade real. Se um dia a norma pesar
     mais que o reconhecimento, #0a8043 dá 5,02:1 e continua lendo verde. */
  --whatsapp: #00c307;
  --whatsapp-hover: #00a806;
  --whatsapp-ink: #ffffff;
  /* Verde de confirmação, para os vistos das listas. Não é ação. */
  --green-ink: #0a8043;
  --green-lift: #3ddb84;

  /* Neutros claros */
  --white: #ffffff;
  --paper: #f6f7f9;
  --paper-sunk: #eceef3;
  --line-light: #dfe3ea;

  /* Texto */
  --on-dark: #ffffff;
  --on-dark-body: #d6d9e1;
  --on-dark-dim: #a5acbb;
  --on-light: #021167;
  --on-light-body: #3a4256;
  --on-light-dim: #5f677d;

  /* Métrica */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 62px;

  /* Escala tipográfica fluida.
     H1  34px no celular → 60px no desktop
     H2  28px no celular → 42px no desktop
     Corpo 16px → 18px */
  --t--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --t-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-1: clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
  --t-2: clamp(1.25rem, 1.14rem + 0.55vw, 1.625rem);
  --t-3: clamp(1.5rem, 1.31rem + 0.94vw, 2rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.72vw, 2.625rem);
  --t-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  --t-num: clamp(2.75rem, 1.9rem + 3.6vw, 4.25rem);

  /* Espaçamento */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: clamp(2.5rem, 6vw, 5rem);
  --sp-8: clamp(3.5rem, 8vw, 7.5rem);

  /* Raio */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Sombras leves, nunca pesadas. */
  --sh-1: 0 2px 6px -2px rgba(2, 17, 103, 0.08), 0 8px 24px -12px rgba(2, 17, 103, 0.14);
  --sh-2: 0 4px 12px -4px rgba(2, 17, 103, 0.1), 0 20px 44px -20px rgba(2, 17, 103, 0.22);
  --sh-3: 0 8px 20px -8px rgba(2, 17, 103, 0.14), 0 36px 70px -30px rgba(2, 17, 103, 0.32);

  /* Empilhamento semântico */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-float: 300;

  /* Movimento: 200 a 400ms, como pede a direção. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-mid: 320ms;
  --dur-slow: 400ms;
}

@supports (color: oklch(0.5 0.1 260)) {
  :root {
    --red-action: oklch(0.595 0.245 29);
    --red-hover: oklch(0.52 0.225 28.5);
    --red-deep: oklch(0.42 0.19 29);
    --red-wash: oklch(0.968 0.014 25);
    --red-edge: oklch(0.9 0.05 25);

    --paper: oklch(0.973 0.003 264);
    --paper-sunk: oklch(0.945 0.006 264);
    --line-light: oklch(0.902 0.008 264);

    --on-dark-body: oklch(0.878 0.008 264);
    --on-dark-dim: oklch(0.73 0.014 264);
    --on-light-body: oklch(0.34 0.045 264);
    --on-light-dim: oklch(0.48 0.035 264);
  }
}

@media (min-width: 768px) {
  :root {
    --header-h: 76px;
  }
}

/* ------------------- 3. Contexto de superfície -------------------
   Os componentes não sabem se estão no claro ou no escuro: leem estas
   variáveis. Trocar o fundo de uma seção reajusta tudo dentro dela.
   ---------------------------------------------------------------- */

.surface-dark {
  --title: var(--on-dark);
  --body: var(--on-dark-body);
  --dim: var(--on-dark-dim);
  --line: var(--ink-700);
  --raised: var(--ink-800);
  --inset: var(--ink-1000);
  --accent: var(--red-action);
  --focus: #ffffff;
  color: var(--body);
}

.surface-light {
  --title: var(--on-light);
  --body: var(--on-light-body);
  --dim: var(--on-light-dim);
  --line: var(--line-light);
  --raised: var(--white);
  --inset: var(--paper-sunk);
  --accent: var(--red-action);
  --focus: var(--red-action);
  color: var(--body);
}

/* -------------------------------- 4. Reset -------------------------------- */

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

* {
  margin: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100svh;
  background: var(--white);
  color: var(--on-light-body);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  line-height: 1.1;
  text-wrap: balance;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--title, var(--on-light));
}

p {
  text-wrap: pretty;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus, var(--red-action));
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--red-action);
  color: #fff;
}

/* ----------------------------- 5. Utilitários ----------------------------- */

.shell {
  width: min(100% - (var(--gutter) * 2), 1200px);
  margin-inline: auto;
}

/* Âncora não pode parar debaixo do header fixo. */
[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: calc(var(--z-header) + 1);
  transform: translateY(-150%);
  background: var(--white);
  color: var(--ink-900);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.section {
  padding-block: var(--sp-8);
}

.section--white {
  background: var(--white);
}

.section--paper {
  background: var(--paper);
}

.section--sunk {
  background: var(--paper-sunk);
}

.section--dark {
  background: var(--ink-900);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.section__head--center {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.section__head h2 {
  font-size: var(--t-h2);
  line-height: 1.06;
}

.section__lead {
  font-size: var(--t-1);
  line-height: 1.62;
  max-width: 58ch;
  margin-top: var(--sp-3);
  color: var(--body);
}

.section__head--center .section__lead {
  margin-inline: auto;
}

/* Etiqueta de contexto acima do título. Curta, em maiúsculas, com o
   vermelho carregando o olho até ali. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  gap: 0.5rem;
  margin-bottom: var(--sp-3);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--red-action);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Grifo do que precisa ser lido primeiro dentro de um título. Sem nowrap:
   frase grifada que não pode quebrar empurra a página para os lados no
   celular, e scroll horizontal é o pior defeito que uma landing pode ter. */
.mark {
  position: relative;
  color: var(--red-action);
}

/* Em títulos longos o grifo quebra linha, então o nowrap sai do caminho. */
.mark--wrap {
  white-space: normal;
}

.mark:not(.mark--wrap)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.06em;
  height: 0.09em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.28;
}

/* Lista de confirmação, usada em vários cards. */
.checks {
  display: grid;
  gap: 0.7rem;
}

.checks li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--t-0);
  line-height: 1.5;
  color: var(--body);
}

.checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.5 2.2 8.5l1.5-1.5 2.5 2.5 6.1-6.1 1.5 1.5z' fill='%23ffffff'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.eyebrow--muted {
  background: var(--paper-sunk);
  color: var(--on-light-body);
}

.surface-dark .checks li::before {
  background-color: var(--green-lift);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.5 2.2 8.5l1.5-1.5 2.5 2.5 6.1-6.1 1.5 1.5z' fill='%23021167'/%3E%3C/svg%3E");
}

.checks b {
  font-weight: 700;
  color: var(--title);
}

/* O outro lado da comparação: mesma estrutura da lista de vistos, com o X
   vermelho no lugar do visto verde. */
.checks--cross li::before {
  background: var(--red-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.4 4.9 11 3.5 8 6.6 4.9 3.5 3.5 4.9 6.6 8l-3.1 3.1 1.4 1.4L8 9.4l3.1 3.1 1.4-1.4L9.4 8z' fill='%23ffffff'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Ressalva de rodapé de seção: cinza, pequena, sem caixa. */
.fineprint {
  margin-top: var(--sp-4);
  max-width: 72ch;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--dim);
}

/* Bandeiras desenhadas em SVG. Emoji de bandeira não renderiza no Windows,
   então o desenho é a única forma de ela aparecer igual em todo lugar. */
.flag {
  flex: none;
  width: 20px;
  height: 10px;
  border-radius: 1px;
}

.flag--lg {
  width: 30px;
  height: 15px;
  border-radius: 2px;
}

/* A bandeira do Brasil é 10:7 e a da Austrália é 2:1: cada uma leva a sua
   proporção, senão o SVG fica com faixa vazia dos dois lados. */
.flag--br,
.clock__face--br .clock__flag,
.route__end--br .route__flag {
  aspect-ratio: 10 / 7;
  height: auto;
}

.eyebrow .flag {
  width: 18px;
  height: 9px;
}

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


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: var(--r-md);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* O botão de conversão da página inteira é este: verde de WhatsApp. */
.btn--wa {
  background: var(--whatsapp);
  color: var(--whatsapp-ink);
  font-weight: 700;
  box-shadow: 0 12px 28px -14px rgba(0, 195, 7, 0.8);
}

.btn--wa:hover {
  background: var(--whatsapp-hover);
  box-shadow: 0 16px 34px -14px rgba(0, 195, 7, 0.9);
  transform: translateY(-1px);
}

/* Vermelho fica para o CTA do header, onde o verde brigaria com a logo. */
.btn--red {
  background: var(--red-action);
  color: #fff;
  font-weight: 700;
}

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

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--title);
}

.btn--ghost:hover {
  background: var(--inset);
}

.btn--lg {
  min-height: 60px;
  padding: 1.05rem 1.9rem;
  font-size: var(--t-1);
}

.btn--sm {
  min-height: 44px;
  padding: 0.55rem 1rem;
  font-size: var(--t--1);
}

.btn--block {
  display: flex;
  width: 100%;
}

@media (min-width: 560px) {
  .btn--block {
    display: inline-flex;
    width: auto;
  }

  .btn--block-always {
    display: flex;
    width: 100%;
  }
}

.btn:active {
  transform: translateY(1px);
}

.ico {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  fill: currentColor;
}

/* Microcópia colada ao botão. */
.cta-note {
  margin-top: var(--sp-3);
  font-size: var(--t--1);
  line-height: 1.55;
  color: var(--dim);
  max-width: 46ch;
}

/* ------------------------------ 7. Header ------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: var(--ink-900);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

.site-header.is-stuck {
  border-bottom-color: var(--ink-700);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-right: auto;
}

.site-header__logo img {
  width: auto;
  height: 28px;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 34px;
  }
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
}

.nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-dark-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__list a:hover {
  color: #fff;
}

/* O CTA do header acompanha a logo em todas as larguras: no celular ele
   encolhe para ícone + rótulo curto, mas nunca some. */
.site-header .btn {
  flex: none;
}

.site-header__label {
  display: none;
}

@media (min-width: 420px) {
  .site-header__label {
    display: inline;
  }
}

/* Botão do menu no celular. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  color: #fff;
  cursor: pointer;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__close {
  display: block;
}

/* Painel do menu no celular: desce do header, sem cobrir a página inteira. */
@media (max-width: 979px) {
  .nav {
    display: block;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--ink-900);
    border-bottom: 1px solid var(--ink-700);
    padding: var(--sp-2) var(--gutter) var(--sp-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility var(--dur-fast);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    display: grid;
    gap: 0;
  }

  .nav__list li + li {
    border-top: 1px solid var(--ink-800);
  }

  .nav__list a {
    min-height: 52px;
    width: 100%;
    font-size: 1.0625rem;
  }
}

@media (min-width: 980px) {
  .nav {
    display: block;
    margin-right: var(--sp-4);
  }

  .nav-toggle {
    display: none;
  }
}

/* -------------------------------- 8. Hero --------------------------------
   Grafite escuro com duas luzes vermelhas discretas. A dobra precisa
   entregar, sem rolagem: Austrália, oferta, horário, aula ao vivo e o botão.
   ---------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-6);
  background-color: var(--ink-900);
  background-image:
    radial-gradient(125% 95% at 0% 6%, rgba(28, 88, 224, 0.3) 0%, rgba(28, 88, 224, 0) 62%),
    radial-gradient(85% 72% at 99% 96%, rgba(32, 104, 240, 0.24) 0%, rgba(32, 104, 240, 0) 66%),
    radial-gradient(85% 72% at 60% 38%, rgba(1, 8, 48, 0.72) 0%, rgba(1, 8, 48, 0) 70%);
}

.hero,
.closer {
  --on-dark-dim: #c6cbd9;
}

@supports (color: oklch(0.5 0.1 260)) {

  .hero,
  .closer {
    --on-dark-dim: oklch(0.82 0.018 262);
  }
}

/* Grão fino, para o gradiente não bandear em tela grande. */
.hero::after,
.closer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: 1.04fr 0.96fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.hero__title {
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--on-dark);
  max-width: 16ch;
}

.hero__lead {
  margin-top: var(--sp-4);
  font-size: var(--t-1);
  line-height: 1.6;
  color: var(--on-dark-body);
  max-width: 46ch;
}

/* A oferta entra logo abaixo da subheadline, ainda na primeira tela.
   Cartão claro dentro do hero escuro: é o objeto de maior contraste da
   dobra depois do botão. */
.hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp-5);
  padding: 0.9rem 1.35rem 1rem;
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-3);
}

.hero__price-figure {
  display: grid;
  justify-items: start;
  gap: 0.05rem;
}

.hero__price-from {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-light-dim);
}

.hero__price-value {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--green-ink);
}

.hero__price-times {
  font-size: 0.52em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-light);
}

.hero__price-cur {
  font-size: 0.62em;
}

.hero__price-note {
  max-width: 15ch;
}

@media (max-width: 979px) {
  .hero__price-note {
    max-width: none;
  }
}

.hero__price-note {
  font-size: var(--t--1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-light);
}

.hero__price-note span {
  display: block;
  font-weight: 400;
  color: var(--on-light-dim);
}

.hero__facts {
  display: grid;
  gap: 0.7rem;
  margin-top: var(--sp-5);
}

.hero__facts li {
  position: relative;
  padding-left: 1.95rem;
  font-size: var(--t-0);
  line-height: 1.45;
  color: var(--on-dark-body);
}

.hero__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--green-lift) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.5 2.2 8.5l1.5-1.5 2.5 2.5 6.1-6.1 1.5 1.5z' fill='%23021167'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.hero__facts b {
  color: #fff;
  font-weight: 700;
}

.hero__cta {
  margin-top: var(--sp-5);
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-700);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-dark-dim);
}

.hero__proof svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--red-action);
}

@media (max-width: 979px) {
  .hero__title,
  .hero__lead {
    max-width: none;
  }

  .hero__cta .btn {
    width: 100%;
  }
}

/* --- Sala de aula online, montada em HTML e CSS --- */

.live {
  position: relative;
  width: min(100%, 580px);
  margin-inline: auto;
}

.call {
  border-radius: 18px;
  border: 1px solid var(--ink-700);
  background: var(--ink-800);
  box-shadow: 0 40px 80px -42px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}

.call__bar {
  display: flex;
  gap: 7px;
  padding: 11px 14px;
}

.call__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.call__dot:nth-child(1) {
  background: #ff5f57;
}

.call__dot:nth-child(2) {
  background: #febc2e;
}

.call__dot:nth-child(3) {
  background: #28c840;
}

.call__body {
  display: grid;
  gap: 8px;
  padding: 0 10px;
}

@media (min-width: 420px) {
  .call__body {
    grid-template-columns: 1fr 84px;
  }
}

.call__stage {
  aspect-ratio: 4 / 3.05;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-1000);
}

.call__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.call__people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (min-width: 420px) {
  .call__people {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }
}

.call__person {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px 4px;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}

.call__avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.call__person:nth-child(1) .call__avatar {
  background: #b8452f;
}

.call__person:nth-child(2) .call__avatar {
  background: #2f6fe0;
}

.call__person:nth-child(3) .call__avatar {
  background: #2f7f6a;
}

.call__person:nth-child(4) .call__avatar {
  background: #6a4fb0;
}

.call__name {
  font-size: 0.625rem;
  line-height: 1;
  color: var(--on-dark-dim);
}

.call__controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}

.call__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  min-width: 32px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: var(--on-dark-dim);
}

.call__key svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.call__key b {
  font-size: 0.75rem;
  color: var(--on-dark);
}

.call__key--end {
  background: var(--red-action);
  color: #fff;
  min-width: 46px;
}

.call__key--end svg {
  transform: rotate(135deg);
}

.live__badge {
  position: absolute;
  top: -14px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--red-action);
  color: #fff;
  font-size: var(--t--1);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
}

.live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: live-pulse 2.4s var(--ease-out) infinite;
}

@keyframes live-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

/* Etiqueta de fuso presa ao canto da chamada: é o dado que responde
   "e o horário funciona pra mim?" antes mesmo da segunda seção. */
.live__zone {
  position: absolute;
  left: -6px;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--on-light);
  box-shadow: var(--sh-2);
}

.live__zone b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.live__zone span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-light-dim);
}

.live__zone i {
  font-style: normal;
  color: var(--red-action);
  font-weight: 800;
}

@media (max-width: 979px) {
  .live__zone {
    position: static;
    width: fit-content;
    margin: var(--sp-4) auto 0;
  }
}

/* ------------------- 9. Preço e horário (seção 2) -------------------
   Duas colunas grandes logo depois do hero: viabilidade financeira à
   esquerda, viabilidade de horário à direita.
   -------------------------------------------------------------------- */

.deal {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 900px) {
  .deal {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: stretch;
  }
}

.deal__card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--sh-1);
}

.deal__card--price {
  border-color: var(--red-edge);
  background:
    linear-gradient(180deg, var(--red-wash) 0%, #fff 42%);
}

.deal__price {
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  margin-top: var(--sp-1);
  font-size: var(--t-num);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--green-ink);
}

.deal__price-times {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-light);
}

.deal__price-cur {
  font-size: 0.6em;
}

.deal__text {
  margin-top: var(--sp-3);
  line-height: 1.6;
  color: var(--body);
}

.deal__card .checks {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.deal__card .btn {
  margin-top: auto;
}

.deal__card .checks + .btn,
.deal__card .clock + .btn,
.deal__card .deal__text + .btn {
  margin-top: var(--sp-5);
}

/* Os dois relógios: Brasil de um lado, Austrália do outro, seta no meio. */
.clock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.clock__face {
  text-align: center;
}

.clock__flag {
  width: 34px;
  height: 17px;
  margin-inline: auto;
  border-radius: 2px;
}

.clock__where {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-light-dim);
}

.clock__time {
  display: block;
  margin-top: 0.2rem;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--on-light);
}

.clock__face--au .clock__time {
  color: var(--red-action);
}

.clock__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--sh-1);
}

.clock__arrow svg {
  width: 18px;
  height: 18px;
  fill: var(--on-light-dim);
}

@media (max-width: 559px) {
  .clock {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-4);
  }

  .clock__arrow {
    justify-self: center;
  }

  .clock__arrow svg {
    transform: rotate(90deg);
  }
}

/* --------------- 10. Comparação financeira (seção 3) --------------- */

.compare {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 900px) {
  .compare {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }
}

.compare__col {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--r-xl);
}

.compare__col--wizard {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  box-shadow: var(--sh-2);
}

.compare__col--other {
  background: var(--white);
  border: 1px solid var(--line-light);
}

.compare__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-bottom: var(--sp-3);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(61, 219, 132, 0.16);
  color: var(--green-lift);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.compare__title {
  font-size: var(--t-2);
}

.compare__price {
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  margin-top: var(--sp-2);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--green-lift);
}

.compare__price-times {
  font-size: 0.5em;
  font-weight: 700;
  color: #fff;
}

.compare__price-cur {
  font-size: 0.6em;
}

.compare__price--other {
  color: var(--red-action);
}

.compare__price--other .compare__price-times {
  color: var(--on-light-dim);
}

.compare__price-unit {
  font-size: 0.32em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--dim);
}

/* Linha curta logo abaixo do número, para os dois lados dizerem em que
   moeda e em que periodicidade estão. Sem ela a comparação não fecha. */
.compare__basis {
  margin-top: 0.6rem;
  font-size: var(--t--1);
  line-height: 1.45;
  color: var(--dim);
}

.compare__col .checks {
  margin-top: var(--sp-4);
}

.compare__note {
  margin-top: var(--sp-3);
  line-height: 1.6;
  color: var(--body);
}

/* A conta que o visitante faria de cabeça, feita para ele. Fica no rodapé do
   card azul, na mesma altura da ressalva do card ao lado. */
.compare__gap {
  margin-top: auto;
  padding-top: var(--sp-4);
  /* Nunca abaixo de 19px: em negrito, é o tamanho a partir do qual o
     vermelho da marca sobre o azul cumpre o contraste exigido. */
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: #fff;
}

.compare__gap b {
  color: var(--green-lift);
}

/* Frase de impacto que fecha a comparação. Card escuro, largura inteira: o
   contraste com as duas colunas claras acima é o que faz a frase parar o
   olho, sem precisar de cor no contorno. */
.punch {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--ink-900);
  box-shadow: var(--sh-2);
}

@media (min-width: 860px) {
  .punch {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-6);
  }
}

.punch p {
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
  color: #fff;
  max-width: 30ch;
}

.punch .btn {
  justify-self: start;
}

/* --------------- 11. Identificação com a dor (seção 4) --------------- */

.pains {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 640px) {
  .pains {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .pains {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Os dois últimos cards ocupam metade cada, para a grade não deixar
     um buraco solto na terceira coluna. */
  .pains li:nth-child(4) {
    grid-column: span 2;
  }
}

.pain {
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.pain:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

.pain__where {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--red-action);
}

.pain__where svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pain p:not(.pain__where) {
  margin-top: var(--sp-3);
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--on-light);
}

.pain q {
  quotes: '“' '”';
  font-style: italic;
}

/* ----------------- 12. Transformações (seção 5) ----------------- */

.gains {
  display: grid;
  gap: var(--sp-3);
  counter-reset: gain;
}

@media (min-width: 640px) {
  .gains {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .gains {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gain {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-1);
  counter-increment: gain;
}

.gain::before {
  content: counter(gain, decimal-leading-zero);
  position: absolute;
  top: clamp(1.25rem, 3vw, 1.75rem);
  right: clamp(1.25rem, 3vw, 1.75rem);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--red-edge);
}

.gain__area {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-light-dim);
}

.gain h3 {
  margin-top: var(--sp-2);
  padding-right: 2.5rem;
  font-size: var(--t-1);
  line-height: 1.25;
}

.gain p {
  margin-top: var(--sp-2);
  line-height: 1.6;
}

/* ------------- 13. Professor que entende brasileiro (seção 6) ------------- */

.teacher {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 980px) {
  .teacher {
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}

.teacher__copy h2 {
  font-size: var(--t-h2);
  line-height: 1.06;
}

.teacher__copy p {
  margin-top: var(--sp-3);
  font-size: var(--t-1);
  line-height: 1.62;
}

.teacher__grid {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 560px) {
  .teacher__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.teacher__item {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
}

.teacher__item h3 {
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.teacher__item p {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.55;
}

/* Regra da casa, dita em uma linha. */
.callout {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  color: #fff;
}

.callout svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--red-action);
}

.callout p {
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #fff;
}

/* --------- 14. Aula ao vivo vs. estudar sozinho (seção 7) --------- */

.versus {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 860px) {
  .versus {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: stretch;
  }
}

.versus__col {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--r-xl);
}

.versus__col--muted {
  border: 1px solid var(--line-light);
  background: var(--paper);
}

.versus__col--brand {
  background: var(--ink-900);
  box-shadow: var(--sh-2);
}

.versus__title {
  font-size: var(--t-2);
  margin-bottom: var(--sp-4);
}

.versus__list {
  display: grid;
  gap: 0.7rem;
}

.versus__list li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.5;
}

.versus__list--cross li::before,
.versus__list--check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.versus__list--cross li::before {
  background: var(--paper-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.4 4.9 11 3.5 8 6.6 4.9 3.5 3.5 4.9 6.6 8l-3.1 3.1 1.4 1.4L8 9.4l3.1 3.1 1.4-1.4L9.4 8z' fill='%23666e7e'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.versus__list--check li::before {
  background: var(--green-lift) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.5 2.2 8.5l1.5-1.5 2.5 2.5 6.1-6.1 1.5 1.5z' fill='%23021167'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.versus__list b {
  color: var(--title);
  font-weight: 700;
}

/* ------------------- 15. Como funciona (seção 8) ------------------- */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  counter-increment: step;
}

.step:last-child {
  padding-bottom: 0;
}

/* O fio que liga um passo ao seguinte. */
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}

.step__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--white);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--on-light);
}

.step__num::before {
  content: counter(step);
}

.step__body {
  padding-top: 0.35rem;
}

.step__body h3 {
  font-size: var(--t-1);
  line-height: 1.3;
}

.step__body p {
  margin-top: 0.5rem;
  line-height: 1.6;
  max-width: 58ch;
}

/* O passo do material é o diferencial da página, então é o único com peso. */
.step--hero .step__num {
  border-color: var(--red-action);
  background: var(--red-action);
  color: #fff;
}

.step--hero .step__body {
  padding: var(--sp-4);
  margin-top: -0.85rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--red-edge);
  background: var(--red-wash);
}

@media (min-width: 760px) {
  .steps {
    width: min(100%, 760px);
  }

  .step {
    grid-template-columns: 56px 1fr;
    gap: var(--sp-5);
  }

  .step:not(:last-child)::before {
    left: 27px;
    top: 60px;
  }

  .step__num {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }
}

/* --------------- 16. Metodologia Wizard (seção 9) --------------- */

.pillars {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 620px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 940px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pillar {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--raised);
}

.pillar__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--red-wash);
}

.pillar__ico svg {
  width: 22px;
  height: 22px;
  fill: var(--red-action);
}

.pillar h3 {
  font-size: var(--t-1);
  line-height: 1.25;
}

.pillar p {
  margin-top: 0.4rem;
  line-height: 1.6;
}

/* --------------- 17. Material na Austrália (seção 10) --------------- */

.ship {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 940px) {
  .ship {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.ship__copy h2 {
  font-size: var(--t-h2);
  line-height: 1.06;
}

.ship__copy p {
  margin-top: var(--sp-3);
  font-size: var(--t-1);
  line-height: 1.62;
}

.ship__copy .checks {
  margin-top: var(--sp-4);
}

/* Rota Brasil → Austrália, desenhada em CSS. Sem imagem, sem byte extra. */
.route {
  display: grid;
  grid-template-columns: 1fr minmax(72px, 0.8fr) 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--sh-1);
}

.route__end {
  text-align: center;
}

.route__flag {
  width: clamp(38px, 3.4vw, 48px);
  height: auto;
  aspect-ratio: 2 / 1;
  margin-inline: auto;
  border-radius: 3px;
}

.route__end b {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--on-light);
}

.route__end span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t--1);
  line-height: 1.35;
  color: var(--on-light-dim);
}

/* A linha tracejada com o avião no meio. */
.route__line {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 46px;
  padding-inline: 0.25rem;
}

.route__line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
}

.route__plane {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red-action);
  box-shadow: 0 12px 26px -12px rgba(235, 0, 0, 0.7);
}

.route__plane svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  transform: rotate(45deg);
}

@media (max-width: 559px) {
  .route {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  /* O fio tracejado gira junto com a rota: agora ele desce. Precisa de
     altura sobrando, senão o avião cobre os tracinhos e some a ideia de
     percurso. */
  .route__line {
    min-height: 92px;
  }

  .route__line::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background-image: linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
    background-size: 2px 12px;
  }

  .route__plane svg {
    transform: rotate(180deg);
  }
}

.route__box {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.route__box p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--on-light-dim);
}

.route__box b {
  display: block;
  font-size: var(--t-0);
  font-weight: 700;
  color: var(--on-light);
}

/* ------------------- 18. Vida real (seção 11) ------------------- */

.reallife {
  display: grid;
  gap: var(--sp-2);
  counter-reset: rl;
}

.reallife li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  counter-increment: rl;
}

.reallife li:first-child {
  border-top: 1px solid var(--line);
}

.reallife li::before {
  content: counter(rl, decimal-leading-zero);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--dim);
}

.reallife p {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--title);
  max-width: 30ch;
}

.reallife__end {
  margin-top: var(--sp-6);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--title);
  max-width: 32ch;
}

.reallife__end b {
  color: var(--red-action);
}

/* ------------------ 19. Prova social (seção 12) ------------------ */

.voices {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 760px) {
  .voices {
    grid-template-columns: repeat(2, 1fr);
  }
}

.voice {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--sh-1);
}

.voice blockquote p {
  font-size: var(--t-1);
  line-height: 1.55;
  color: var(--on-light);
}

.voice blockquote p::before {
  content: '“';
  color: var(--red-edge);
  font-size: 1.6em;
  font-weight: 800;
  line-height: 0;
  vertical-align: -0.22em;
  margin-right: 0.06em;
}

.voice figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* Moldura da foto real, que entra quando o cliente enviar. */
.voice__photo {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px dashed var(--line-light);
  background: var(--paper);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  color: var(--on-light-dim);
  overflow: hidden;
}

.voice__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice figcaption b {
  display: block;
  font-size: var(--t-0);
  font-weight: 700;
  color: var(--on-light);
}

.voice figcaption span {
  display: block;
  font-size: var(--t--1);
  color: var(--on-light-dim);
}

/* Cobertura por cidade. Fica no lugar dos depoimentos enquanto eles não
   chegam, e continua fazendo sentido depois deles. */
.cities {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--paper);
}

.cities__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--on-light-dim);
}

.cities__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-3);
}

.cities__list li {
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-light);
  background: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-light);
}

.cities__list li:last-child {
  border-style: dashed;
  font-weight: 400;
  color: var(--on-light-dim);
}

/* -------------------- 20. Oferta (seção 13) -------------------- */

.offer {
  width: min(100%, 720px);
  margin-inline: auto;
  padding: clamp(1.75rem, 4.5vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--sh-3);
  text-align: center;
}

.offer__name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-light-dim);
}

.offer__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.14em;
  margin-top: var(--sp-2);
  font-size: var(--t-num);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--green-ink);
}

.offer__price-times {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-light);
}

.offer__price-cur {
  font-size: 0.6em;
}

.offer__sub {
  margin-top: var(--sp-2);
  font-size: var(--t-0);
  font-weight: 600;
  color: var(--on-light);
}

.offer .checks {
  margin: var(--sp-5) 0;
  padding: var(--sp-5) 0;
  border-block: 1px solid var(--line-light);
  text-align: left;
}

@media (min-width: 700px) {
  .offer .checks {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-4);
  }
}

.offer .cta-note {
  margin-inline: auto;
}

/* ------------------ 21. Certificado (seção 14) ------------------ */

.cert {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--white);
}

@media (min-width: 480px) {
  .cert {
    grid-template-columns: auto 1fr;
    gap: clamp(1.25rem, 4vw, 2.5rem);
  }
}

.cert__seal {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--red-wash);
  border: 2px solid var(--red-edge);
}

@media (min-width: 480px) {
  .cert__seal {
    width: 96px;
    height: 96px;
  }
}

.cert__seal svg {
  width: 34px;
  height: 34px;
  fill: var(--red-action);
}

@media (min-width: 480px) {
  .cert__seal svg {
    width: 44px;
    height: 44px;
  }
}

.cert h2 {
  font-size: var(--t-3);
  line-height: 1.15;
}

.cert p {
  margin-top: var(--sp-3);
  line-height: 1.6;
  max-width: 62ch;
}

/* -------------------------------- 22. FAQ -------------------------------- */

.faq {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 940px) {
  .faq {
    grid-template-columns: 0.76fr 1.24fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
}

.faq__head h2 {
  font-size: var(--t-h2);
  line-height: 1.06;
}

.faq__head .section__lead {
  font-size: var(--t-0);
}

.qa {
  border-top: 1px solid var(--line);
}

.qa:last-child {
  border-bottom: 1px solid var(--line);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding-block: var(--sp-3);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--title);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary:hover {
  color: var(--red-action);
}

.qa__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.qa__icon::before,
.qa__icon::after {
  content: '';
  position: absolute;
  background: var(--dim);
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-mid) var(--ease-out);
}

.qa__icon::before {
  left: 0;
  top: 9px;
  width: 20px;
  height: 2px;
}

.qa__icon::after {
  left: 9px;
  top: 0;
  width: 2px;
  height: 20px;
}

.qa[open] .qa__icon::after {
  transform: scaleY(0);
  opacity: 0;
}

.qa__body {
  padding-bottom: var(--sp-4);
  max-width: 62ch;
  line-height: 1.7;
}

/* Abertura animada onde o navegador já suporta; degrada para instantâneo. */
@supports (interpolate-size: allow-keywords) {
  html {
    interpolate-size: allow-keywords;
  }

  .qa::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-mid) var(--ease-out),
      content-visibility var(--dur-mid) allow-discrete;
  }

  .qa[open]::details-content {
    block-size: auto;
  }
}

/* ------------------------ 23. CTA final (seção 16) ------------------------ */

.closer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--sp-8);
  text-align: center;
  background-color: var(--ink-900);
  background-image:
    radial-gradient(105% 80% at 6% 0%, rgba(23, 82, 208, 0.26) 0%, rgba(23, 82, 208, 0) 60%),
    radial-gradient(80% 70% at 96% 100%, rgba(26, 92, 224, 0.22) 0%, rgba(26, 92, 224, 0) 64%);
}

.closer__inner {
  position: relative;
  z-index: 1;
}

.closer__title {
  font-size: var(--t-h2);
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--on-dark);
  max-width: 24ch;
  margin-inline: auto;
}

.closer__lead {
  margin: var(--sp-4) auto 0;
  max-width: 56ch;
  font-size: var(--t-1);
  line-height: 1.6;
  color: var(--on-dark-body);
}

.closer__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.14em;
  margin: var(--sp-5) 0;
  font-size: var(--t-num);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--green-lift);
}

.closer__price-times {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.closer__price-cur {
  font-size: 0.6em;
}

.closer .cta-note {
  margin-inline: auto;
  color: var(--on-dark-dim);
}

/* ------------------------------- 24. Rodapé ------------------------------- */

.site-footer {
  background: var(--ink-1000);
  color: var(--on-dark-dim);
  padding-block: var(--sp-6);
  font-size: var(--t--1);
  --focus: #ffffff;
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 760px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--sp-6);
  }
}

.site-footer__brand img {
  width: auto;
  height: 44px;
  margin-bottom: var(--sp-3);
}

.site-footer__meta {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 760px) {
  .site-footer__meta {
    justify-items: end;
    text-align: right;
  }
}

.site-footer b {
  color: var(--on-dark-body);
  font-weight: 600;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue-lift);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-footer__legal {
  color: var(--on-dark-dim);
  opacity: 0.75;
}

/* -------------------- 25. WhatsApp persistente --------------------
   Celular: barra inferior. Desktop: botão flutuante no canto direito.
   ------------------------------------------------------------------ */

.sticky-cta {
  position: fixed;
  z-index: var(--z-float);
  inset: auto 0 0 0;
  background: var(--ink-900);
  border-top: 1px solid var(--ink-700);
  padding: 0.7rem var(--gutter);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
  --focus: #ffffff;
}

.sticky-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: 1200px;
  margin-inline: auto;
}

.sticky-cta__text {
  display: none;
  line-height: 1.15;
}

.sticky-cta__text b {
  display: block;
  font-size: var(--t-0);
  font-weight: 700;
  color: var(--green-lift);
}

.sticky-cta__text span {
  font-size: var(--t--1);
  color: var(--on-dark-dim);
}

.sticky-cta .btn {
  flex: 1 1 auto;
  min-height: 50px;
}

@media (min-width: 380px) {
  .sticky-cta__text {
    display: block;
  }

  .sticky-cta .btn {
    flex: 0 0 auto;
  }
}

body.has-sticky {
  padding-bottom: 78px;
}

@media (min-width: 940px) {
  .sticky-cta {
    inset: auto var(--sp-4) var(--sp-4) auto;
    background: transparent;
    border-top: 0;
    padding: 0;
    transform: translateY(16px) scale(0.97);
  }

  .sticky-cta__text {
    display: none;
  }

  .sticky-cta .btn {
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55);
  }

  /* Elevação leve no hover, sem pulsar. */
  .sticky-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 52px -16px rgba(0, 0, 0, 0.6);
  }

  body.has-sticky {
    padding-bottom: 0;
  }
}

/* -------------------------------- 26. Motion --------------------------------
   O conteúdo é visível por padrão. O estado inicial só é aplicado quando o JS
   confirma suporte e marca <html class="js">, e um temporizador de segurança
   revela tudo caso o observador não dispare.
   ---------------------------------------------------------------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Escalonamento dos cards dentro de uma grade revelada em conjunto. */
html.js .reveal.is-in > * {
  animation: rise var(--dur-slow) var(--ease-out) both;
}

html.js .reveal.is-in > *:nth-child(1) { animation-delay: 0ms; }
html.js .reveal.is-in > *:nth-child(2) { animation-delay: 60ms; }
html.js .reveal.is-in > *:nth-child(3) { animation-delay: 120ms; }
html.js .reveal.is-in > *:nth-child(4) { animation-delay: 180ms; }
html.js .reveal.is-in > *:nth-child(5) { animation-delay: 240ms; }
html.js .reveal.is-in > *:nth-child(6) { animation-delay: 300ms; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

html.js .hero .reveal[data-reveal-order='1'] { transition-delay: 40ms; }
html.js .hero .reveal[data-reveal-order='2'] { transition-delay: 100ms; }
html.js .hero .reveal[data-reveal-order='3'] { transition-delay: 160ms; }
html.js .hero .reveal[data-reveal-order='4'] { transition-delay: 220ms; }
html.js .hero .reveal[data-reveal-order='5'] { transition-delay: 280ms; }
html.js .hero .reveal[data-reveal-order='6'] { transition-delay: 140ms; }

@media (prefers-reduced-motion: reduce) {

  html.js .reveal,
  html.js .reveal.is-in {
    transform: none;
    transition: opacity 200ms linear;
    transition-delay: 0ms;
  }

  html.js .reveal.is-in > * {
    animation: none;
  }

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

  .live__dot {
    opacity: 1;
  }
}

/* ------------------------------ 27. Impressão ------------------------------ */

@media print {

  .site-header,
  .sticky-cta {
    display: none !important;
  }

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