/* =============================================================================
   Nexory English — landing page
   HTML + CSS puros, sem framework e sem JavaScript.

   A paleta sai de dois lugares, e nenhum dos dois é gosto pessoal:

   1. Do produto. A plataforma (web/src/app/globals.css) já define as cores
      institucionais e elas são repetidas aqui como variáveis de mesmo nome,
      para que o site e o sistema pareçam a mesma empresa:

        fundo #f8fbff · superficie #d9ecff · borda #9bc8ff
        acao  #3b78c8 · tinta      #1a2340

   2. Do logotipo. A seta do "o" vai do ciano ao roxo — é o único elemento de
      marca com movimento, e vira aqui o gradiente de destaque:

        ciano #12b8ff → azul #2563eb → roxo #7c3aed

   Contraste: o texto de apoio NÃO usa opacidade. Opacidade esconde a conta
   dentro de uma multiplicação e sempre acaba ilegível em algum fundo. Em vez
   disso há duas cores nomeadas e medidas — `--tinta-fraca` sobre claro e
   `--claro-fraco` sobre escuro —, ambas acima de 4.5:1 nos fundos em que
   aparecem.
   ========================================================================= */

/* ─── Fontes ──────────────────────────────────────────────────────────────
   As duas fontes moram aqui dentro, em vez de virem do Google.

   Vindas do Google, elas custavam duas origens novas no caminho crítico:
   o navegador tinha que resolver DNS, abrir TLS e baixar um CSS de
   fonts.googleapis.com — tudo isso ANTES de pintar a primeira tela — e só
   então descobrir que precisava de mais um host, fonts.gstatic.com, para os
   arquivos em si. No wi-fi do escritório não se nota. No 4G de ônibus, que é
   onde essa página vai ser aberta, são dois handshakes a mais antes de
   qualquer pixel.

   Servidas daqui, elas entram pela mesma conexão do resto do site e o
   @font-face já chega junto com este arquivo, que o navegador ia baixar de
   qualquer jeito.

   Dois arquivos, não oito: o Google hoje entrega Inter e Sora como fontes
   variáveis, então o mesmo .woff2 cobre todos os pesos (confirmei por md5 —
   os sete arquivos que baixei eram dois arquivos repetidos). Daí o
   `font-weight` em intervalo. 263 kB viraram 72 kB.

   Só o subconjunto latino. Português inteiro cabe em U+0000-00FF: ã, õ, ç,
   á, é, í, ó, ú, â, ê, ô estão todos lá. Os subconjuntos cirílico, grego e
   vietnamita que vinham junto nunca teriam uma letra usada nesta página.

   `swap`: o texto aparece na hora, na fonte do sistema, e troca quando a
   fonte chega. Nunca há tela em branco esperando tipografia.

   Brinde: nenhuma requisição do visitante para o Google. Uma coisa a menos
   para explicar na política de privacidade. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fontes/inter-variavel.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fontes/sora-variavel.woff2') format('woff2');
}

/* ─── Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Institucionais (espelham a plataforma) */
  --fundo:        #f8fbff;
  --superficie:   #d9ecff;
  --borda:        #9bc8ff;
  --acao:         #3b78c8;
  --acao-forte:   #346ab0;
  --tinta:        #1a2340;
  --tinta-fraca:  #58679d;

  /* Escuros — derivados da `tinta`, não cores novas */
  --breu:         #0b1226;
  --breu-claro:   #131d3d;
  --claro:        #ffffff;
  --claro-fraco:  #b7c4e8;   /* 8.9:1 sobre --breu */

  /* Marca em movimento (gradiente do logotipo) */
  --ciano:        #12b8ff;
  --azul:         #2563eb;
  --roxo:         #7c3aed;
  --gradiente:    linear-gradient(100deg, var(--ciano), var(--azul) 52%, var(--roxo));

  --sucesso:      #2c765a;

  /* Medidas */
  --raio:         18px;
  --raio-g:       28px;
  --largura:      1180px;
  --respiro:      clamp(64px, 9vw, 120px);

  --sombra-leve:  0 1px 2px rgb(26 35 64 / .06), 0 8px 24px -12px rgb(26 35 64 / .18);
  --sombra-forte: 0 24px 60px -28px rgb(26 35 64 / .45);

  --transicao:    220ms cubic-bezier(.22, .61, .36, 1);
}

/* ─── Base ────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;   /* cabeçalho fixo + folga */
  -webkit-text-size-adjust: 100%;

  /* `clip` e não `hidden`: hidden num elemento de rolagem cria um contexto de
     scroll e quebra o `position: sticky` do cabeçalho. clip só corta. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: "Sora", "Inter", system-ui, sans-serif;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

/* Link de pulo — existe para teclado, some para o resto */
.pular {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--claro);
  color: var(--tinta);
  border-radius: 10px;
  font-weight: 600;
  box-shadow: var(--sombra-forte);
  transition: top var(--transicao);
}
.pular:focus { top: 16px; }

.envelope {
  width: min(100% - 48px, var(--largura));
  margin-inline: auto;
}
.envelope-estreito { width: min(100% - 48px, 860px); }

/* ─── Tipografia de seção ─────────────────────────────────────────────── */

.secao { padding-block: var(--respiro); position: relative; }
.secao-clara { background: var(--claro); }

.rotulo {
  margin-bottom: 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acao-forte);
}
.rotulo-centro { text-align: center; }

.titulo {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  font-weight: 700;
  margin-bottom: 20px;
}
.titulo-centro { text-align: center; }

.texto {
  font-size: 1.07rem;
  color: var(--tinta-fraca);
}
.texto strong { color: var(--tinta); font-weight: 600; }
.texto-centro { text-align: center; margin-inline: auto; }
.texto-estreito { max-width: 62ch; }

.gradiente {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Botões ──────────────────────────────────────────────────────────── */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  /* A borda transparente existe só para igualar a altura: o `.botao-fantasma`
     tem borda visível, e sem ela os botões ficariam 2px mais baixos que o
     fantasma na mesma linha. */
  border: 1px solid transparent;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), border-color var(--transicao);
}

.botao-destaque {
  background: var(--gradiente);
  /* Conserta a lasca roxa que aparecia nas PONTAS do botão.

     O padrão do CSS é `background-origin: padding-box` com
     `background-clip: border-box`. Para cor sólida dá no mesmo, mas para
     GRADIENTE não: ele é calculado numa caixa 1px menor (a do padding) e
     pintado numa caixa 1px maior (a da borda, mesmo transparente). Sobra um
     anel de 1px fora do gradiente e, como `background-repeat` é `repeat` por
     padrão, esse anel recebe a repetição, ou seja, a ponta OPOSTA do
     gradiente. O botão vai de ciano a roxo da esquerda para a direita, então
     na ponta esquerda nascia uma lasca roxa. Numa pílula de raio 999px a
     curvatura é máxima justo nas pontas, que é por que só ali se via.

     Precisa vir DEPOIS do `background` acima: o atalho `background` reseta
     `background-origin` para `padding-box`. Declarei isso no `.botao` antes e
     não funcionou exatamente por causa disso. */
  background-origin: border-box;
  color: var(--claro);
  box-shadow: 0 10px 30px -10px rgb(37 99 235 / .7);
}
.botao-destaque:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgb(37 99 235 / .8);
}

.botao-fantasma {
  background: rgb(255 255 255 / .06);
  color: var(--claro);
  border-color: rgb(183 196 232 / .35);
  backdrop-filter: blur(8px);
}
.botao-fantasma:hover {
  background: rgb(255 255 255 / .14);
  border-color: rgb(183 196 232 / .6);
}

.botao-claro {
  background: var(--claro);
  color: var(--tinta);
}
.botao-claro:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }

.botao-pequeno { padding: 11px 20px; font-size: .92rem; }
.botao-grande  { padding: 20px 42px; font-size: 1.1rem; }
.botao-largo   { width: 100%; margin-top: 20px; }

.seta { transition: transform var(--transicao); }
.botao:hover .seta { transform: translateX(4px); }

/* ─── Faixa de topo ───────────────────────────────────────────────────── */

.faixa-topo {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  background: var(--gradiente);
  color: var(--claro);
  font-size: .9rem;
  text-align: center;
}
.faixa-topo strong { font-weight: 700; }

.faixa-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--claro);
  box-shadow: 0 0 0 0 rgb(255 255 255 / .7);
  animation: pulsar 2.4s infinite;
}
@keyframes pulsar {
  70%  { box-shadow: 0 0 0 10px rgb(255 255 255 / 0); }
  100% { box-shadow: 0 0 0 0   rgb(255 255 255 / 0); }
}

/* ─── Cabeçalho ───────────────────────────────────────────────────────── */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(11 18 38 / .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgb(183 196 232 / .12);
}

.cabecalho-linha {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 14px;
}

.marca img { width: 150px; }

.menu {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: .95rem;
  font-weight: 500;
}
.menu a {
  position: relative;
  color: var(--claro-fraco);
  padding-block: 4px;
  transition: color var(--transicao);
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gradiente);
  transform: scaleX(0);
  transition: transform var(--transicao);
}
.menu a:hover { color: var(--claro); }
.menu a:hover::after { transform: scaleX(1); }

/* ─── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--breu);
  color: var(--claro);
  padding-block: clamp(72px, 10vw, 128px) clamp(80px, 10vw, 130px);
  isolation: isolate;
}

/* Duas luzes de fundo. Ficam atrás de tudo e não recebem evento. */
.hero-brilho {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 90%;
  z-index: -2;
  background:
    radial-gradient(45% 55% at 22% 32%, rgb(18 184 255 / .30), transparent 70%),
    radial-gradient(42% 52% at 78% 20%, rgb(124 58 237 / .34), transparent 70%),
    radial-gradient(60% 60% at 50% 90%, rgb(37 99 235 / .22), transparent 70%);
  filter: blur(10px);
}

.hero-grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(183 196 232 / .07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(183 196 232 / .07) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 100%);
}

.hero-conteudo { text-align: center; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 30px;
  border-radius: 999px;
  border: 1px solid rgb(183 196 232 / .26);
  background: rgb(255 255 255 / .05);
  backdrop-filter: blur(8px);
  font-size: .9rem;
  font-weight: 500;
  color: var(--claro-fraco);
}
.selo-bolinha {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 10px #35d07f;
}

.hero-titulo {
  font-size: clamp(2.4rem, 1rem + 5.4vw, 4.6rem);
  font-weight: 800;
  margin-bottom: 26px;
}

.riscado {
  position: relative;
  color: var(--claro-fraco);
  white-space: nowrap;
}
/* O risco é desenhado, não é text-decoration: assim fica na grossura e no
   ângulo certos em qualquer tamanho de fonte. */
.riscado::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: .075em;              /* em, para a espessura acompanhar a fonte fluida */
  border-radius: 4px;
  background: var(--roxo);
  transform: rotate(-2.2deg);
}

.hero-texto {
  max-width: 64ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  color: var(--claro-fraco);
}
.hero-texto strong { color: var(--claro); font-weight: 600; }

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
}
.hero-acoes-centro { justify-content: center; }

.hero-garantia {
  margin-top: 22px;
  font-size: .95rem;
  color: var(--claro-fraco);
}
.hero-garantia strong { color: var(--claro); }

/* Números */
.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 64px 0 0;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: rgb(183 196 232 / .16);          /* vira a linha divisória */
  border: 1px solid rgb(183 196 232 / .16);
}
.numero {
  padding: 28px 18px;
  background: rgb(19 29 61 / .72);
  backdrop-filter: blur(6px);

  /* Os quatro valores têm de ficar na MESMA linha de base, e o rótulo nem
     sempre tem o mesmo número de linhas ("alunos já morando fora" quebra em
     duas no celular, "aulas por semana" não). Empurrar o valor para o fim da
     célula resolve sem precisar adivinhar altura de rótulo. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.numero dt {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--claro-fraco);
}
.numero-valor {
  margin: 8px 0 0;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.03em;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Dor ─────────────────────────────────────────────────────────────── */

.dor-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.lista-contraste { display: grid; gap: 12px; }

.lista-contraste li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--raio);
  font-size: 1rem;
}
.lista-contraste .contra {
  background: var(--fundo);
  border: 1px solid var(--superficie);
  color: var(--tinta-fraca);
}
.lista-contraste .pro {
  background: var(--breu);
  border: 1px solid var(--breu);
  color: var(--claro);
  font-weight: 600;
  box-shadow: var(--sombra-forte);
}

.icone-x, .icone-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  margin-top: 2px;
}
.icone-x     { background: var(--superficie); color: var(--tinta-fraca); }
.icone-check { background: var(--gradiente);  color: var(--claro); }

/* ─── Cartões de vantagem ─────────────────────────────────────────────── */

/* O `min(310px, 100%)` não é firula: `minmax(310px, 1fr)` puro é um piso
   RÍGIDO. Num celular de 320px o envelope tem 296px de conteúdo, e a trilha
   continuava valendo 310px, ou seja, os cartões ficavam 14px mais largos que
   a coluna e furavam a margem direita que todas as outras seções respeitam.

   E furavam calados, porque o `overflow-x: clip` do body apara a sobra sem
   criar barra de rolagem. O sintoma era só a borda direita dos cartões
   encostando na tela enquanto títulos e parágrafos recuavam. É a terceira
   vez que esse mesmo `clip` esconde um estouro neste arquivo; quando algo
   parecer desalinhado só à direita, desconfie dele antes de qualquer coisa.

   Com `min(310px, 100%)` o piso vira "310px, ou a largura toda se ela for
   menor que isso", e aí a trilha encolhe junto. */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 22px;
  margin-top: 56px;
}

.cartao {
  position: relative;
  padding: 34px 30px 32px;
  border-radius: var(--raio-g);
  background: var(--claro);
  border: 1px solid var(--superficie);
  box-shadow: var(--sombra-leve);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
/* A linha de marca no topo só aparece no hover: no estado parado a grade
   fica calma, e a cor vira recompensa de interação. */
.cartao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradiente);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.cartao:hover {
  transform: translateY(-5px);
  border-color: var(--borda);
  box-shadow: var(--sombra-forte);
}
.cartao:hover::before { transform: scaleX(1); }

.cartao-icone {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: var(--superficie);
  color: var(--acao-forte);
}
.cartao-icone svg { width: 26px; height: 26px; }

.cartao-tag {
  display: inline-block;
  margin-bottom: 10px;
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acao-forte);
}

.cartao h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.cartao p {
  font-size: 1rem;
  color: var(--tinta-fraca);
}

/* Os dois cartões de "R$ 0" carregam o argumento mais forte da página e
   ganham o fundo de marca por isso — não para enfeitar. */
.destaque-zero {
  background: linear-gradient(170deg, #f2f8ff, #ffffff 60%);
  border-color: var(--borda);
  /* Mesmo motivo dos botões (ver `.botao`): gradiente mais borda pede
     `border-box`, senão sobra 1px do tom oposto na quina. Aqui a lasca era
     quase invisível porque o gradiente vai de #f2f8ff a branco, mas o defeito
     é o mesmo e só se notaria num monitor melhor. */
  background-origin: border-box;
}
.destaque-zero .cartao-icone {
  background: var(--gradiente);
  color: var(--claro);
}
.destaque-zero .cartao-tag {
  font-size: 1.6rem;
  letter-spacing: -.02em;
  text-transform: none;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Método ──────────────────────────────────────────────────────────── */

.secao-escura {
  background: var(--breu);
  color: var(--claro);
  overflow: hidden;
  isolation: isolate;
}
.secao-escura .rotulo { color: var(--ciano); }
.secao-escura .texto  { color: var(--claro-fraco); }

.metodo-brilho {
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 70%;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 30% 50%, rgb(37 99 235 / .28), transparent 70%),
    radial-gradient(40% 60% at 72% 40%, rgb(124 58 237 / .26), transparent 70%);
}

/* Três colunas fixas, não `auto-fit`. Com quatro passos o `auto-fit` caía
   bonito em 2+2 no tablet; com três ele cai em 2+1 e sobra um cartão solto
   na segunda fileira, que lê como erro de layout. Para três itens não existe
   quebra intermediária elegante, então vai de 3 direto para 1. */
.passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.passo {
  position: relative;
  padding: 32px 26px 30px;
  border-radius: var(--raio-g);
  background: rgb(255 255 255 / .045);
  border: 1px solid rgb(183 196 232 / .16);
  backdrop-filter: blur(10px);
  transition: background var(--transicao), border-color var(--transicao),
              transform var(--transicao);
}
.passo:hover {
  background: rgb(255 255 255 / .08);
  border-color: rgb(183 196 232 / .34);
  transform: translateY(-4px);
}

/* Número à esquerda, prazo à direita, na mesma linha. O prazo entra sem custar
   altura nenhuma: ocupa espaço horizontal que já estava vazio ao lado do "01".
   `baseline` para o número grande e a pílula pequena assentarem na mesma
   linha de escrita em vez de o olho ver dois objetos soltos. */
.passo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.passo-numero {
  font-family: "Sora", sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.04em;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* O prazo é a informação nova desta seção, então não pode ser sussurro:
   `--claro` cheio, e não `--claro-fraco`. É o que separa "a gente promete
   que você fala" de "você fala na primeira aula". */
.passo-quando {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgb(183 196 232 / .3);
  background: rgb(255 255 255 / .06);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--claro);
  /* "Nesta semana" e "Na primeira aula" quebrariam em duas linhas dentro da
     pílula e ela viraria um retângulo gordo. Em uma linha só, sempre. */
  white-space: nowrap;
}

.passo h3 { font-size: 1.18rem; margin-bottom: 10px; }
.passo p  { font-size: .98rem; color: var(--claro-fraco); }

/* ─── Resultados: o que o inglês abre ─────────────────────────────────── */

/* A coluna da esquerda era a menor (.9fr) quando continha só texto e selos
   curtos. Agora carrega as seis portas em duas colunas internas, e a razão
   inverteu: quem precisa de largura é ela. */
.mundo-grade {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

/* As portas que o inglês abre.

   Era uma fileira de selos de país, em pílula. Virou lista em duas colunas
   porque o conteúdo mudou de natureza: "US" cabe numa pílula, "vaga remota em
   empresa de fora" não — pílula com seis palavras vira caixa de texto com
   canto redondo, e seis delas lado a lado viram sopa. */
.portas-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}
.portas-lista li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--claro);
  border: 1px solid var(--superficie);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: var(--sombra-leve);
}

.porta-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--gradiente);
  color: var(--claro);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
}

/* O bloco do "descontraído".

   Fica em fundo escuro, e não em mais um cartão branco, porque é o único
   argumento EMOCIONAL de uma seção inteira feita de argumentos práticos. Se
   parecesse com os seis itens acima dele, seria lido como o sétimo. */
.leve {
  margin-top: 26px;
  padding: 28px 30px;
  border-radius: var(--raio-g);
  background: var(--breu);
  color: var(--claro);
  box-shadow: var(--sombra-forte);
}
.leve h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.leve p {
  font-size: .98rem;
  color: var(--claro-fraco);
}

/* ─── Carrossel de depoimentos ────────────────────────────────────────────
   Substituiu três cartões de texto com depoimentos inventados. A troca não
   foi só de conteúdo: print de conversa se verifica no olho, texto entre
   aspas não. Por isso o print aparece inteiro, com relógio, tique duplo e o
   fundo rabiscado do WhatsApp — é tudo isso junto que diz "não fui eu que
   escrevi".

   O recorte foi mínimo de propósito: só saiu o que não podia ficar (um link
   de sala do Meet) e o que não falava da aula. Print muito aparado começa a
   parecer montagem, que é exatamente o contrário do que ele serve. */

.dep-bloco {
  margin-top: 34px;
  /* `min-width: 0` é o que faz o carrossel rolar em vez de esticar a página.
     Item de grid nasce com `min-width: auto`, que significa "não encolha
     abaixo do seu conteúdo mínimo". O conteúdo mínimo daqui são quatro
     slides de 420px que não encolhem: 1732px de coluna. A faixa então nunca
     ficava menor que o próprio conteúdo e `overflow-x: auto` não tinha o que
     rolar — a página é que vazava para o lado.

     E vazava em silêncio, porque o `overflow-x: clip` do body cortava a
     sobra sem gerar barra de rolagem. O sintoma visível seria só os
     depoimentos sumindo pela direita. Mesma armadilha do rodapé em três
     colunas; é sempre `fr` encontrando conteúdo que se recusa a encolher. */
  min-width: 0;
  /* Teto de 560px porque o print mais estreito tem 592px de largura real.
     Acima disso o navegador passaria a ESTICAR a imagem além do tamanho
     original, e print esticado fica borrado justo onde precisa estar nítido:
     no texto da conversa. Vale para o trecho entre 560 e 980px, em que a
     coluna é única e larga. */
  max-width: 560px;
}

.dep-chamada {
  display: flex;
  /* `baseline`, não `center`: quando o rótulo quebra em duas linhas no
     celular, `center` joga a bolinha para o meio do bloco — ela fica boiando
     entre as linhas, sem pertencer a nenhuma. Na baseline ela senta na
     primeira linha, que é onde o olho espera. */
  align-items: baseline;
  gap: 9px;
  margin-bottom: 14px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
/* Bolinha verde de "online", empréstimo do próprio WhatsApp. */
.dep-selo { color: #25d366; font-size: .7rem; line-height: 1; }

.carrossel {
  display: flex;
  /* A faixa tem a altura do slide mais alto, e isso é proposital: altura fixa
     significa que as bolinhas não pulam embaixo do dedo enquanto se arrasta.
     Faixa que encolhe e cresce a cada swipe é desorientador.

     O preço é sobra vertical nos prints mais baixos. Com `start` essa sobra se
     acumulava toda embaixo da legenda — 161px de vazio logo acima das
     bolinhas, que o olho lê como defeito. Com `center` ela se divide em cima e
     embaixo e vira respiro: ninguém estranha 50px de folga em volta de um
     cartão, todo mundo estranha 160px pendurados de um lado só. */
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Encaixa o slide alinhado à esquerda, com 2px de folga para a sombra. */
  scroll-padding-inline: 2px;
  padding: 2px 2px 4px;
  /* Sem isso, o swipe que chega ao fim da faixa vira "voltar página" no
     Chrome do Android e no Safari. O usuário perde a página inteira. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* A barra some; quem indica que há mais prints são as bolinhas embaixo. */
  scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 4px;
  border-radius: var(--raio);
}

/* Um print por vez, ocupando a largura inteira da faixa.
   A primeira versão deixava o próximo slide "espiando" na borda, como convite
   para arrastar. Na prática o que aparecia era meio cartão serrado no meio da
   página, e meio cartão não parece convite: parece coisa quebrada. O corte só
   funciona quando acontece na borda da TELA, onde o olho já espera que o
   conteúdo acabe. No meio de uma coluna branca, não.

   Quem avisa que há mais são as quatro bolinhas embaixo, que é o sinal que
   todo mundo já aprendeu a ler em carrossel de celular. */
.dep-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
}

/* A moldura abraça o print, em vez de o print ter que caber numa caixa.

   Passei por três versões erradas antes desta, todas pela mesma razão: eu
   impunha uma altura e deixava a imagem se virar. Com altura fixa ela era
   cortada; com proporção fixa ela sobrava em 63% de tarja escura no celular,
   que é espaço vertical demais para gastar numa tela de 375px.

   Os quatro prints têm proporções muito diferentes (de 3,6:1 a 1,4:1), então
   não existe caixa única que sirva para todos sem desperdício. A saída é não
   ter caixa: cada imagem aparece na largura total do slide, na altura que ela
   pedir, e a moldura acompanha. Legibilidade máxima e zero vazio.

   Como só um slide aparece por vez, as alturas diferentes não se comparam
   lado a lado. O que sobra embaixo dos prints mais baixos é fundo da página,
   não buraco preto. */
.dep-moldura {
  padding: 12px;
  border-radius: var(--raio-g);
  /* Fundo escuro da marca em vez do preto do WhatsApp: o print tem a própria
     moldura escura e os dois encostam sem costura visível. */
  background: var(--breu);
  box-shadow: var(--sombra-forte);
}
.dep-moldura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.dep-slide figcaption {
  margin-top: 13px;
  padding-inline: 4px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tinta-fraca);
}
.dep-slide figcaption strong { color: var(--tinta); font-weight: 600; }

.dep-bolinhas {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}
/* Alvo de 44px (WCAG 2.5.8) com ponto de 9px no meio: o dedo acerta uma área
   confortável e o olho vê um ponto discreto. */
.dep-bolinhas a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
}
.dep-bolinhas a::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--borda);
  transition: background var(--transicao), transform var(--transicao);
}
.dep-bolinhas a:hover::before,
.dep-bolinhas a:focus-visible::before {
  background: var(--acao);
  transform: scale(1.35);
}
.dep-bolinhas a:focus-visible { outline: 2px solid var(--acao); outline-offset: -6px; }

/* Só visível para leitor de tela. As bolinhas precisam de nome acessível, e
   um ponto colorido não tem nenhum. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Comparativo de investimento ─────────────────────────────────────── */

.comparativo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  align-items: start;
}

.coluna-preco {
  padding: 36px 34px;
  border-radius: var(--raio-g);
  background: var(--fundo);
  border: 1px solid var(--superficie);
}

.coluna-titulo {
  font-family: "Sora", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.coluna-preco ul { display: grid; gap: 2px; }
.coluna-preco li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--superficie);
  font-size: .98rem;
}
.coluna-preco li span { color: var(--tinta-fraca); }
.coluna-preco li b    { font-weight: 600; }

.coluna-total {
  margin-top: 26px;
  font-size: 1.02rem;
  color: var(--tinta-fraca);
}
.coluna-total strong { font-size: 1.2rem; color: var(--tinta); }

.coluna-nota {
  display: inline-block;
  margin-top: 8px;
  font-size: .9rem;
}

/* O valor em que a Nexory ganha a comparação.

   Chamava-se `.zero` enquanto todos os ganhos eram R$ 0. Com "até 3 anos" na
   tabela o nome passou a mentir sobre o próprio conteúdo — e classe que mente
   é classe que alguém usa errado depois. `.ganho` diz o que a cor significa,
   não qual era o valor no dia em que ela nasceu. */
.ganho { color: var(--sucesso); font-weight: 700; }

.coluna-nexory {
  position: relative;
  background: var(--claro);
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--claro), var(--claro)),
    var(--gradiente);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--sombra-forte);
}

.selo-fita {
  position: absolute;
  top: -15px; left: 34px;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--gradiente);
  color: var(--claro);
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.coluna-nexory li { border-bottom-color: #eaf3ff; }

/* ─── Dúvidas ─────────────────────────────────────────────────────────── */

.acordeao { display: grid; gap: 12px; margin-top: 48px; }

/* <details> dá acordeão acessível sem uma linha de JavaScript: o estado é do
   navegador, o teclado já funciona e o leitor de tela já anuncia. */
.acordeao details {
  border-radius: var(--raio);
  background: var(--claro);
  border: 1px solid var(--superficie);
  box-shadow: var(--sombra-leve);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.acordeao details[open] {
  border-color: var(--borda);
  box-shadow: var(--sombra-forte);
}

.acordeao summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
}
.acordeao summary::-webkit-details-marker { display: none; }

/* O "+" que vira "×": um pseudo-elemento girando, sem ícone extra. */
.acordeao summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--acao-forte);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--transicao), background var(--transicao),
              color var(--transicao);
}
.acordeao details[open] summary::after {
  content: "+";
  transform: rotate(45deg);
  background: var(--gradiente);
  color: var(--claro);
}

.acordeao details p {
  padding: 0 26px 24px;
  font-size: 1rem;
  color: var(--tinta-fraca);
  max-width: 72ch;
}

/* ─── CTA final ───────────────────────────────────────────────────────── */

.cta-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--breu);
  color: var(--claro);
  padding-block: var(--respiro);
  text-align: center;
}

.cta-brilho {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 160%;
  z-index: -1;
  background:
    radial-gradient(38% 46% at 26% 42%, rgb(18 184 255 / .32), transparent 70%),
    radial-gradient(40% 48% at 74% 38%, rgb(124 58 237 / .34), transparent 70%),
    radial-gradient(60% 50% at 50% 78%, rgb(37 99 235 / .24), transparent 70%);
}

.cta-conteudo h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  font-weight: 800;
  margin-bottom: 20px;
}
.cta-conteudo > p {
  max-width: 58ch;
  margin-inline: auto;
  font-size: 1.08rem;
  color: var(--claro-fraco);
}
.cta-nota {
  margin-top: 24px;
  font-size: .94rem;
  color: var(--claro-fraco);
}
.cta-nota strong { color: var(--claro); }

/* ─── Rodapé ──────────────────────────────────────────────────────────── */

.rodape {
  background: #070d1d;
  color: var(--claro-fraco);
  padding-block: 64px 28px;
  font-size: .95rem;
}

.rodape-grade {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgb(183 196 232 / .14);
}

.rodape-texto { margin-top: 18px; max-width: 42ch; }

.rodape-titulo {
  margin-bottom: 16px;
  font-family: "Sora", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--claro);
}

.rodape nav, .rodape-grade > div:last-child { display: grid; align-content: start; gap: 10px; }
.rodape a { color: var(--claro-fraco); transition: color var(--transicao); width: fit-content; }
.rodape a:hover { color: var(--claro); }

.rodape-fim { padding-top: 24px; font-size: .88rem; }

/* ─── Botão flutuante do WhatsApp ─────────────────────────────────────── */

.zap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 30px -8px rgb(37 211 102 / .7);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.zap svg { width: 30px; height: 30px; }
.zap:hover { transform: scale(1.08); box-shadow: 0 16px 38px -8px rgb(37 211 102 / .85); }

/* ─── Barra fixa de ação (só no celular) ──────────────────────────────── */

/* Nasce desligada e só é ligada no @media de 980px. O padrão é o desktop,
   que não tem barra; o celular é que acrescenta. */
.barra-fixa { display: none; }

/* ─── Entrada em cena ─────────────────────────────────────────────────── */

/* Animação de scroll em CSS puro. Onde `animation-timeline` existe, os blocos
   sobem ao entrar na viewport; onde não existe, a regra inteira é ignorada e
   o conteúdo aparece normalmente — nunca escondido. É por isso que o estado
   inicial mora DENTRO do @supports: sem suporte, nada fica invisível. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* `.dep-bloco`, e não cada slide: o `view()` de um slide se mede contra o
       scrollport mais próximo, que ali é a faixa horizontal do carrossel — o
       slide entraria animando de lado, não de baixo. O bloco inteiro está no
       fluxo normal da página e se comporta como os outros. */
    .cartao, .passo, .dep-bloco, .coluna-preco, .acordeao details, .dor-grade > * {
      animation: surgir linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes subir-barra {
  from { transform: translateY(125%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Responsivo ──────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .menu { display: none; }           /* nav vira o CTA sozinho; sem JS, sem gaveta */
  .cabecalho-linha { gap: 16px; }
  .marca img { width: 128px; }

  .dor-grade, .mundo-grade, .comparativo { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; }

  /* O rodapé em três colunas era o que criava 90px de ROLAGEM HORIZONTAL:
     1.6fr + 1fr + 1fr com 44px de gap não cabem em 375px, e `fr` não encolhe
     abaixo do conteúdo mínimo. Em coluna única o problema não existe. */
  .rodape-grade {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 34px;
  }

  /* Na coluna única, o preço da Nexory vem primeiro: é o que convence. */
  .comparativo .coluna-nexory { order: -1; }

  /* --- Barra fixa de ação ------------------------------------------------
     No dedo, o alvo principal fica onde o polegar já está. A bolinha do
     WhatsApp sai de cena para não haver dois flutuantes disputando o canto. */
  .zap { display: none; }

  .barra-fixa {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: flex;
    padding: 28px 18px 14px;
    /* `env()` é a faixa do gesto de home do iPhone. Sem isso o botão fica
       debaixo da barrinha e o toque é roubado pelo sistema. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));

    /* Sem fundo nenhum.

       Passou por duas versões antes desta. Primeiro uma tarja escura opaca —
       um bloco atravessado na página, que sobre as seções claras parecia peça
       de outro site. Depois um degradê escuro, mais suave, mas ainda uma
       lavagem escura por cima de conteúdo claro.

       A terceira versão foi perceber que o scrim não precisava existir. Ele
       serve para dar contraste a um elemento que não tem o seu — e este botão
       tem de sobra: é um gradiente saturado, opaco, com sombra própria. Ele
       se separa do fundo sozinho, em seção clara ou escura. O scrim só estava
       escurecendo a página para resolver um problema que não havia. */
    background: none;
    pointer-events: none;   /* a área vazia não rouba toque do conteúdo */
  }

  .barra-fixa-acao {
    flex: 1;
    padding: 16px 20px;
    font-size: 1rem;
    pointer-events: auto;   /* ...mas o botão continua clicável */

    /* Duas sombras, duas funções. A azul é o brilho da marca, que o botão já
       tinha. A preta é o que substitui o scrim: separa a pílula do que estiver
       passando atrás dela, sem pintar a página inteira de escuro. */
    box-shadow:
      0 10px 30px -8px rgb(37 99 235 / .55),
      0 4px 22px -4px rgb(11 18 38 / .35);
  }

  /* A barra só entra depois que o hero sai.
     Na primeira tela ela seria o MESMO botão que está logo acima dela, duas
     vezes, a 40px de distância — repetição que só rouba a dobra. A partir
     daí o botão do hero já passou e a barra vira o único caminho.

     `animation-timeline: scroll()` liga o quadro da animação à posição da
     rolagem, não ao relógio: é um "apareça aos 60% da tela" em CSS puro. No
     navegador que não entende, o @supports inteiro é ignorado e a barra fica
     parada onde sempre esteve — visível. Falha para o lado seguro. */
  @supports (animation-timeline: scroll()) {
    .barra-fixa {
      animation: subir-barra linear both;
      animation-timeline: scroll(root block);
      animation-range: 55vh 80vh;
    }
  }

  /* O rodapé precisa terminar ACIMA da barra, senão a última linha fica
     para sempre coberta. */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* --- Alvos de toque ----------------------------------------------------
     No mouse, um link de 25px de altura é trivial de acertar. No dedo, não:
     a área de contato tem cerca de 9mm e o mínimo recomendado é 44px (WCAG
     2.5.8, e a mesma conta nas diretrizes da Apple e do Google).

     Os links do rodapé vinham com 25px. O remédio é padding, não font-size —
     o texto continua do tamanho que deve, só a área clicável cresce. O gap
     encolhe junto porque o padding já afasta uma linha da outra. */
  .rodape nav, .rodape-grade > div:last-child { gap: 0; }
  .rodape nav a,
  .rodape-grade > div:last-child a {
    padding-block: 10px;
    width: 100%;
  }

  .marca { padding-block: 7px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .envelope, .envelope-estreito { width: calc(100% - 32px); }

  /* O cabeçalho encolhe junto, então o alvo da âncora sobe. */
  html { scroll-padding-top: 76px; }

  .faixa-topo { font-size: .8rem; padding: 8px 14px; line-height: 1.45; }
  .faixa-extra { display: none; }

  .cabecalho-linha { padding-block: 10px; }
  .marca img { width: 112px; }
  .botao-pequeno { padding: 11px 16px; font-size: .86rem; }

  .hero { padding-block: 44px 56px; }
  .selo {
    margin-bottom: 22px;
    padding: 8px 14px;
    font-size: .8rem;
    line-height: 1.4;
    text-align: left;
  }
  .hero-titulo { font-size: clamp(2.05rem, 1.1rem + 4.6vw, 2.6rem); }
  .hero-texto { font-size: 1rem; }
  .hero-acoes { margin-top: 28px; gap: 12px; }
  .hero-acoes .botao { width: 100%; }

  /* Dois em cima, um ocupando a linha inteira embaixo.

     Três colunas em 375px dariam ~115px por célula e "TAXA DE MATRÍCULA"
     quebraria em três linhas. Uma coluna só empilharia os três e empurraria o
     resto da página para fora do primeiro scroll.

     O 2+1 não é só o que coube: os dois de cima são a mesma espécie de fato
     (custo, ambos R$ 0) e se leem como par; o de baixo é de outra espécie
     (frequência) e ganha a linha inteira por isso. */
  .numeros { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .numero:last-child { grid-column: 1 / -1; }
  .numero { padding: 18px 14px; }
  .numero dt { font-size: .68rem; letter-spacing: .05em; }
  .numero-valor { font-size: 1.65rem; }

  .titulo { font-size: clamp(1.7rem, 1.1rem + 3.2vw, 2.2rem); }
  .cartoes, .passos, .comparativo, .acordeao { margin-top: 34px; }
  .cartoes, .passos { gap: 14px; }

  .cartao, .passo, .coluna-preco { padding: 26px 22px; }
  .dep-moldura { padding: 8px; }
  .cartao h3 { font-size: 1.18rem; }
  .cartao-icone { width: 46px; height: 46px; margin-bottom: 16px; }
  .passo { padding-block: 24px; }
  .passo-topo { margin-bottom: 10px; }
  .passo-numero { font-size: 1.7rem; }
  .passo-quando { font-size: .72rem; padding: 4px 10px; }

  .lista-contraste li { padding: 15px 18px; font-size: .95rem; }

  /* Duas colunas de 160px espremeriam "vaga remota em empresa de fora" em
     quatro linhas. Em coluna única cada porta ocupa uma linha e pronto. */
  .portas-lista { grid-template-columns: 1fr; gap: 8px; }
  .leve { padding: 24px 22px; }

  .acordeao summary { padding: 17px 18px; font-size: .97rem; gap: 12px; }
  .acordeao details p { padding: 0 18px 20px; }

  /* O preço quebra em duas linhas em vez de espremer rótulo e valor. */
  .coluna-preco li { flex-direction: column; gap: 2px; padding: 12px 0; }
  .coluna-preco li b { font-size: 1.02rem; }

  .cta-conteudo h2 { font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.3rem); }
  .botao-grande { padding: 17px 28px; font-size: 1rem; }

  /* Troca de técnica do risco.

     No desktop ele é um `::after` absoluto e girado -2°, que é o que dá o ar
     de rabisco à mão. Absoluto só funciona enquanto o texto couber numa
     linha: em duas, uma única barra atravessaria o vão entre elas.

     Aqui o risco vira BACKGROUND do próprio span. Com
     `box-decoration-break: clone` cada fragmento de linha ganha o seu, então
     quebre em quantas linhas quiser que o risco acompanha. Perde-se o ângulo
     — e nessa largura ninguém sente falta. */
  .riscado { white-space: normal; }
  .riscado::after { display: none; }
  .riscado {
    background-image: linear-gradient(var(--roxo), var(--roxo));
    background-size: 100% .075em;
    background-position: 0 56%;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* Telas muito estreitas (iPhone SE, 320px) */
@media (max-width: 380px) {
  .envelope, .envelope-estreito { width: calc(100% - 24px); }
  .hero-titulo { font-size: 1.95rem; }
  .marca img { width: 100px; }
  .botao-pequeno { padding: 12px 13px; font-size: .8rem; }
  .barra-fixa { padding-inline: 12px; }
  .barra-fixa-acao { padding-inline: 12px; font-size: .95rem; }
}

/* O dedo não tem hover. Sem isto, no iOS o primeiro toque num cartão aplica o
   estado :hover e o segundo é que navega — o famoso "tive que clicar duas
   vezes". */
@media (hover: none) {
  .cartao:hover, .passo:hover,
  .botao:hover, .zap:hover, .botao-claro:hover {
    transform: none;
  }
  .dep-bolinhas a:hover::before { transform: none; background: var(--borda); }
  .cartao:hover::before { transform: scaleX(0); }
  .botao:hover .seta { transform: none; }

  /* Em compensação, o toque dá retorno imediato. */
  .botao:active { transform: scale(.98); }
  .acordeao summary:active { background: var(--fundo); border-radius: var(--raio); }
}