/* =====================================================
   ESTILO DO SITE DA BOB'S TEAM
   Um arquivo só. Para mudar cores, fontes e espaços,
   mexa apenas nas VARIÁVEIS da seção 1 (logo abaixo).
   O resto do arquivo usa essas variáveis.
   Ordem do arquivo:
   1. Variáveis (cores, fontes, espaços)
   2. Base (reset e textos)
   3. Faixas claras e escuras
   4. Botões
   5. Linha das faixas (assinatura visual)
   6. Barra de anúncio e cabeçalho
   7. Uma seção por vez (hero, prova, caminhos...)
   8. Rodapé e barra fixa do celular
   9. Movimento reduzido
   ===================================================== */


/* =====================================================
   1. VARIÁVEIS
   ===================================================== */
:root {
  /* ---------- CORES PRINCIPAIS ---------- */
  --cor-preto: #0B0B0B;                 /* fundo das faixas escuras e texto principal */
  --cor-off-white: #F4F3F1;             /* fundo das faixas claras */
  --cor-branco: #FFFFFF;                /* fundo das faixas brancas e texto sobre preto */
  --cor-grafite: #595D63;               /* cinza das proteções de parede da academia */
  --cor-cinza-claro: #E6E4E2;           /* linhas finas e divisores nas faixas claras */
  --cor-texto-secundario: #6B6B6B;      /* texto de apoio nas faixas claras */
  --cor-texto-secundario-escuro: #B9BABD; /* texto de apoio nas faixas escuras */

  /* ---------- CORES DE DESTAQUE ---------- */
  --cor-destaque: #F2A90C;              /* âmbar: só em detalhes pequenos (palavra sublinhada, número, botão principal na faixa escura) */
  --cor-destaque-claro: #FFC23D;        /* âmbar um pouco mais claro, usado quando passa o mouse no botão */
  --cor-whatsapp: #25D366;              /* verde do WhatsApp: só na barra fixa do celular */

  /* ---------- CORES DAS FAIXAS (linha de assinatura) ---------- */
  --cor-faixa-branca: #F4F3F1;
  --cor-faixa-azul: #1F4FA3;
  --cor-faixa-roxa: #5B2C83;
  --cor-faixa-marrom: #6B4226;
  --cor-faixa-preta: #0B0B0B;
  --cor-faixa-ponteira: #C8102E;        /* vermelho da ponta da faixa preta */

  /* ---------- CORES DOS CARTÕES ESCUROS ---------- */
  --cor-cartao-escuro: #151515;         /* fundo dos cartões nas faixas escuras */
  --cor-linha-escura: #2E2E30;          /* linhas finas nas faixas escuras */

  /* ---------- FONTES ---------- */
  --fonte-titulo: 'Archivo', 'Arial Black', Arial, sans-serif;  /* títulos (caixa alta, largos) */
  --fonte-texto: 'Archivo', Arial, Helvetica, sans-serif;       /* textos corridos */
  --largura-titulo: 125%;               /* quão "larga" é a letra dos títulos (62% a 125%) */
  --peso-titulo: 800;                   /* peso dos títulos */

  /* ---------- TAMANHOS DE TEXTO ---------- */
  --tamanho-texto: 1.0625rem;           /* texto corrido no celular (17px) */
  --tamanho-texto-grande: 1.125rem;     /* texto corrido no computador (18px) */
  --tamanho-titulo-hero: clamp(2rem, 0.6rem + 6vw, 5.25rem);       /* título principal (H1) */
  --tamanho-titulo-secao: clamp(1.75rem, 1rem + 4vw, 3.75rem);     /* título de cada seção (H2) */
  --tamanho-titulo-cartao: clamp(1.375rem, 1rem + 1.4vw, 1.875rem); /* títulos menores (H3) */

  /* ---------- ESPAÇOS ---------- */
  --margem-lateral: 16px;               /* margem das laterais no celular (mínimo 16px) */
  --largura-maxima: 1200px;             /* largura máxima do conteúdo no computador */
  --espaco-secao: clamp(72px, 11vw, 144px); /* respiro em cima e embaixo de cada seção */
  --altura-cabecalho: 64px;             /* altura do cabeçalho */
  --altura-barra-celular: 76px;         /* altura da barra fixa do celular */

  /* ---------- FORMAS ---------- */
  --raio-botao: 999px;                  /* botões em pílula */
}


/* =====================================================
   2. BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-texto);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cor-preto);
  background: var(--cor-preto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* espaço para a barra fixa do celular não cobrir o fim da página */
  padding-bottom: var(--altura-barra-celular);
}

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

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--tamanho-titulo-hero); line-height: 0.98; }
h2 { font-size: var(--tamanho-titulo-secao); line-height: 1.02; }
h3 { font-size: var(--tamanho-titulo-cartao); line-height: 1.05; }

/* Foco visível para quem usa teclado */
:focus-visible {
  outline: 3px solid var(--cor-foco, var(--cor-preto));
  outline-offset: 3px;
}

/* Âncoras: não ficam escondidas atrás do cabeçalho fixo */
[id] { scroll-margin-top: calc(var(--altura-cabecalho) + 16px); }

/* Largura e margens do conteúdo */
.conteudo {
  width: 100%;
  max-width: calc(var(--largura-maxima) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

/* Texto para leitores de tela (não aparece na tela) */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" (aparece só com o teclado) */
.pular-para-conteudo {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--raio-botao);
  background: var(--cor-destaque);
  color: var(--cor-preto);
  font-weight: 700;
}
.pular-para-conteudo:focus { top: 12px; }

/* Palavra com sublinhado âmbar (título principal) */
.destaque-sublinhado {
  text-decoration: underline;
  text-decoration-color: var(--cor-destaque);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

/* Sobretítulo: linha pequena em caixa alta acima de um título */
.sobretitulo {
  margin: 0 0 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Citações: caixa alta é a voz da escola; frase normal entre aspas é a voz de uma pessoa */
.citacao {
  margin: 0;
  padding-left: 20px;
  border-left: 4px solid var(--cor-destaque);
}
.citacao p {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.3;
}
.citacao footer {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}


/* =====================================================
   3. FAIXAS CLARAS E ESCURAS
   Cada seção é uma faixa. A cor de fundo muda de faixa em faixa
   e é isso que separa uma seção da outra.
   ===================================================== */
.secao {
  position: relative;
  padding-block: var(--espaco-secao);
}

.secao-escura {
  background: var(--cor-preto);
  color: var(--cor-branco);
  --cor-foco: var(--cor-destaque);
  --texto-suave: var(--cor-texto-secundario-escuro);
  --linha: var(--cor-linha-escura);
  --linha-faixas: #3A3A3D;
  --botao-fundo: var(--cor-destaque);
  --botao-fundo-hover: var(--cor-destaque-claro);
  --botao-texto: var(--cor-preto);
  --botao-vazado-cor: var(--cor-branco);
}

.secao-clara {
  background: var(--cor-off-white);
  color: var(--cor-preto);
  --cor-foco: var(--cor-preto);
  --texto-suave: var(--cor-texto-secundario);
  --linha: var(--cor-cinza-claro);
  --linha-faixas: #CFCDCA;
  --botao-fundo: var(--cor-preto);
  --botao-fundo-hover: #2B2B2D;
  --botao-texto: var(--cor-branco);
  --botao-vazado-cor: var(--cor-preto);
}

.secao-branca {
  background: var(--cor-branco);
  color: var(--cor-preto);
  --cor-foco: var(--cor-preto);
  --texto-suave: var(--cor-texto-secundario);
  --linha: var(--cor-cinza-claro);
  --linha-faixas: #CFCDCA;
  --botao-fundo: var(--cor-preto);
  --botao-fundo-hover: #2B2B2D;
  --botao-texto: var(--cor-branco);
  --botao-vazado-cor: var(--cor-preto);
}

/* Texto de apoio abaixo de títulos */
.texto-suave { color: var(--texto-suave); }

.introducao {
  max-width: 34em;
  margin-top: 24px;
}


/* =====================================================
   4. BOTÕES (sempre em pílula)
   ===================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 54px;
  padding: 0 30px;
  border: 2px solid transparent;
  border-radius: var(--raio-botao);
  font-family: var(--fonte-texto);
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.botao:active { transform: scale(0.97); }

/* Botão principal: âmbar nas faixas escuras, preto nas faixas claras */
.botao-principal {
  background: var(--botao-fundo);
  color: var(--botao-texto);
}
.botao-principal:hover { background: var(--botao-fundo-hover); }

/* Botão vazado (só a borda) */
.botao-vazado {
  background: transparent;
  color: var(--botao-vazado-cor);
  border-color: var(--botao-vazado-cor);
}
.botao-vazado:hover {
  background: var(--botao-vazado-cor);
  color: var(--cor-fundo-contraste, var(--cor-preto));
}
.secao-escura .botao-vazado { --cor-fundo-contraste: var(--cor-preto); }
.secao-clara .botao-vazado,
.secao-branca .botao-vazado { --cor-fundo-contraste: var(--cor-branco); }

/* Botão branco para usar em cima de fotos */
.botao-sobre-foto {
  background: var(--cor-branco);
  color: var(--cor-preto);
  min-height: 46px;
  padding: 0 24px;
  font-size: 0.8125rem;
}
.botao-sobre-foto:hover { background: var(--cor-destaque); }

.grupo-botoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Link de texto simples (sublinhado) */
.link-texto {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.link-texto:hover { text-decoration-color: var(--cor-destaque); }


/* =====================================================
   5. LINHA DAS FAIXAS (assinatura visual)
   Branca, azul, roxa, marrom e preta com a ponta vermelha.
   É decorativa: não indica nível nem tempo para trocar de faixa.
   ===================================================== */
.divisor-faixas {
  width: 100%;
  height: 8px;
  border: 1px solid var(--linha-faixas, #3A3A3D);
  background: linear-gradient(to right,
    var(--cor-faixa-branca) 0 20%,
    var(--cor-faixa-azul) 20% 40%,
    var(--cor-faixa-roxa) 40% 60%,
    var(--cor-faixa-marrom) 60% 80%,
    var(--cor-faixa-preta) 80% 92%,
    var(--cor-faixa-ponteira) 92% 100%);
}
.divisor-faixas-curto {
  width: 144px;
  height: 10px;
  margin-bottom: 24px;
}


/* =====================================================
   6. BARRA DE ANÚNCIO E CABEÇALHO
   ===================================================== */
.barra-anuncio {
  background: var(--cor-preto);
  color: var(--cor-branco);
  border-bottom: 1px solid var(--cor-linha-escura);
  --cor-foco: var(--cor-destaque);
}
.barra-anuncio p {
  margin: 0;
  padding: 10px var(--margem-lateral);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.barra-anuncio a {
  margin-left: 6px;
  color: var(--cor-destaque);
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

/* Cabeçalho: fica no topo ao rolar. Sobre o hero ele é transparente
   (nos navegadores que sabem fazer isso) e vira preto ao rolar. */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--altura-cabecalho);
  margin-bottom: calc(var(--altura-cabecalho) * -1);
  background: var(--cor-preto);
  color: var(--cor-branco);
  --cor-foco: var(--cor-destaque);
  --botao-fundo: var(--cor-destaque);
  --botao-fundo-hover: var(--cor-destaque-claro);
  --botao-texto: var(--cor-preto);
}

@supports (animation-timeline: scroll()) {
  .cabecalho {
    background-color: transparent;
    animation: cabecalho-escurece linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 160px;
  }
  @keyframes cabecalho-escurece {
    from { background-color: transparent; }
    to { background-color: var(--cor-preto); }
  }
}

.cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.cabecalho-logo { display: block; line-height: 0; }
.cabecalho-logo img { height: 34px; width: auto; }

.menu ul { list-style: none; }
.menu a {
  color: var(--cor-branco);
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Celular com JavaScript: o menu abre e fecha pelo botão "Menu" */
.botao-menu {
  display: none;
  min-height: 42px;
  padding: 0 20px;
  border: 2px solid var(--cor-branco);
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--cor-branco);
  font-family: var(--fonte-texto);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tem-js .botao-menu { display: inline-flex; align-items: center; }

.botao-cabecalho { display: none; }

@media (max-width: 1023px) {
  .tem-js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--margem-lateral) 28px;
    background: var(--cor-preto);
    border-top: 1px solid var(--cor-linha-escura);
  }
  .tem-js .cabecalho.menu-aberto .menu { display: block; }
  .tem-js .cabecalho.menu-aberto {
    animation: none;
    background-color: var(--cor-preto);
  }
  .menu li { border-bottom: 1px solid var(--cor-linha-escura); }
  .menu a {
    display: block;
    padding: 18px 0;
    font-size: 1.0625rem;
  }
  .menu .menu-item-botao { border-bottom: 0; padding-top: 24px; }
  .menu .menu-item-botao a { display: flex; padding: 0 30px; }

  /* Sem JavaScript no celular: o cabeçalho vira uma barra comum com o menu visível */
  html:not(.tem-js) .cabecalho {
    position: static;
    height: auto;
    margin-bottom: 0;
    padding-block: 12px;
    animation: none;
    background-color: var(--cor-preto);
  }
  html:not(.tem-js) .cabecalho-interno { flex-direction: column; align-items: flex-start; gap: 4px; }
  html:not(.tem-js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
  html:not(.tem-js) .menu li { border-bottom: 0; }
  html:not(.tem-js) .menu a { padding: 8px 0; font-size: 0.8125rem; }
  html:not(.tem-js) .menu .menu-item-botao { display: none; }
}

@media (min-width: 1024px) {
  .cabecalho-logo img { height: 40px; }
  .botao-menu, .tem-js .botao-menu { display: none; }
  .menu { margin-inline: auto; }
  .menu ul { display: flex; gap: 32px; }
  .menu a {
    display: block;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
  }
  .menu a:hover { border-bottom-color: var(--cor-destaque); }
  .menu .menu-item-botao { display: none; }
  .botao-cabecalho {
    display: inline-flex;
    min-height: 46px;
    padding: 0 26px;
    font-size: 0.8125rem;
  }
}


/* =====================================================
   7. SEÇÕES
   ===================================================== */

/* ---------- SEÇÃO 2: HERO ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - 40px);
  min-height: calc(100svh - 40px);
  padding-top: calc(var(--altura-cabecalho) + 64px);
  padding-bottom: 40px;
  overflow: hidden;
}
.hero-foto, .hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-foto img { object-position: 36% center; }

/* Camada escura: protege o texto e o cabeçalho */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(11, 11, 11, 0.62) 0,
      rgba(11, 11, 11, 0) 160px,
      rgba(11, 11, 11, 0) 30%,
      rgba(11, 11, 11, 0.68) 62%,
      rgba(11, 11, 11, 0.95) 100%),
    linear-gradient(to right,
      rgba(11, 11, 11, 0.55) 0,
      rgba(11, 11, 11, 0) 70%);
}

.hero-conteudo { position: relative; z-index: 2; }
.hero .sobretitulo {
  color: var(--cor-branco);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.hero h1 { max-width: 11.5em; }
.hero-texto {
  max-width: 34em;
  margin: 24px 0 32px;
  font-size: 1.0625rem;
  color: #E9E9EA;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-conteudo { animation: hero-sobe 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes hero-sobe {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- SEÇÃO 3: BARRA DE PROVA ---------- */
.faixa-prova { padding-block: clamp(32px, 5vw, 56px); }
.prova-lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
.prova-item { background: var(--cor-off-white); }
.prova-item > a,
.prova-item > div {
  display: block;
  height: 100%;
  padding: 24px 18px;
  text-decoration: none;
}
.prova-valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem);
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: 1.05;
  text-transform: uppercase;
}
.prova-legenda {
  display: block;
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.prova-item > a:hover .prova-valor { text-decoration: underline; text-decoration-color: var(--cor-destaque); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }

/* ---------- SEÇÃO 4: ESCOLHE TEU CAMINHO ---------- */
.caminhos-grade {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}
.cartao-caminho {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cor-preto);
  color: var(--cor-branco);
  --cor-foco: var(--cor-destaque);
}
.cartao-caminho > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cartao-caminho::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 11, 11, 0.94) 0, rgba(11, 11, 11, 0.62) 38%, rgba(11, 11, 11, 0) 72%);
  pointer-events: none;
}
.cartao-caminho-texto {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  padding: 24px;
}
.cartao-caminho-texto h3 { margin-bottom: 12px; }
.cartao-caminho-texto p {
  margin: 0 0 20px;
  max-width: 24em;
  font-size: 1rem;
  line-height: 1.5;
  color: #E9E9EA;
}
/* O cartão inteiro vira clicável pelo link dentro dele */
.cartao-caminho-texto a::after {
  content: "";
  position: absolute;
  inset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .cartao-caminho > img { transition: transform 0.5s ease; }
  .cartao-caminho:hover > img { transform: scale(1.035); }
}
.caminhos-rodape {
  margin: 40px 0 0;
  font-size: 1.0625rem;
  color: var(--texto-suave);
}
.caminhos-rodape a { margin-left: 4px; color: var(--cor-preto); }

/* ---------- SEÇÃO 5: A PRIMEIRA AULA É INDIVIDUAL ---------- */
.primeira-aula-grade {
  display: grid;
  gap: 48px;
}
.primeira-aula-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
}
.passos {
  list-style: none;
  counter-reset: passo;
  margin: 36px 0 0;
  border-bottom: 1px solid var(--linha);
}
.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--linha);
}
.passos li::before {
  content: counter(passo);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: 1.2;
  color: var(--cor-destaque);
}
.caixa-preco {
  margin: 40px 0 28px;
  padding: 28px;
  border: 1px solid #4A4A4D;
}
.caixa-preco-rotulo {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.caixa-preco-valor {
  margin: 8px 0 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(3.25rem, 2rem + 6vw, 5.5rem);
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: 1;
}
.caixa-preco-valor::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 14px;
  background: var(--cor-destaque);
}
.caixa-preco-nota { margin: 14px 0 0; color: var(--texto-suave); }
.primeira-aula-citacao { margin-top: 48px; }

/* ---------- SEÇÃO 6: COMO SE APRENDE AQUI ---------- */
.linha-do-tempo {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: 56px;
}
.etapa {
  position: relative;
  padding: 0 0 36px 32px;
}
.etapa:last-child { padding-bottom: 0; }
/* Barra colorida de cada etapa: juntas formam a faixa */
.etapa::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: var(--cor-etapa);
}
.etapa:nth-child(1) { --cor-etapa: var(--cor-faixa-branca); }
.etapa:nth-child(1)::before { border: 1px solid var(--linha-faixas); }
.etapa:nth-child(2) { --cor-etapa: var(--cor-faixa-azul); }
.etapa:nth-child(3) { --cor-etapa: var(--cor-faixa-roxa); }
.etapa:nth-child(4) { --cor-etapa: var(--cor-faixa-marrom); }
.etapa:nth-child(5) { --cor-etapa: var(--cor-faixa-preta); }
/* Ponta vermelha da faixa preta */
.etapa:nth-child(5)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 10px;
  height: 36px;
  background: var(--cor-faixa-ponteira);
}
.etapa-numero {
  display: block;
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-size: 2.5rem;
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: 1;
}
.etapa h3 { margin-bottom: 10px; font-size: 1.25rem; }
.etapa p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--texto-suave); }

.metodo-fecho {
  display: grid;
  gap: 32px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--linha);
}
.frase-apoio {
  margin: 0;
  max-width: 22em;
  font-size: clamp(1.375rem, 1rem + 1.8vw, 2.125rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.2;
  text-wrap: balance;
}
.metodo-fecho .citacao { align-self: end; }
.metodo-fecho .citacao { border-left-color: var(--cor-preto); }

/* ---------- SEÇÃO 7: HISTÓRIAS REAIS ---------- */
.historias { padding-top: 0; }
.historias-topo {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 360px;
  margin-bottom: 56px;
  isolation: isolate;
}
.historias-topo img {
  grid-area: 1 / 1;
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.historias-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(11, 11, 11, 0.9) 0, rgba(11, 11, 11, 0.35) 55%, rgba(11, 11, 11, 0) 100%);
}
.historias-topo .conteudo { padding-block: 40px; }
.avaliacoes-grade {
  display: grid;
  gap: 16px;
}
.avaliacao {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 28px;
  background: var(--cor-cartao-escuro);
  border: 1px solid var(--cor-linha-escura);
}
.estrelas {
  font-size: 1.125rem;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--cor-destaque);
}
.avaliacao p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.avaliacao footer {
  margin-top: auto;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.avaliacao footer strong { display: block; color: var(--cor-branco); font-weight: 700; }
.historias-rodape { margin-top: 40px; }

/* ---------- SEÇÃO 8: QUEM ENSINA ---------- */
.equipe-grade {
  display: grid;
  gap: 48px;
}
.equipe-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 40%;
}
.professor {
  padding-top: 28px;
  margin-top: 32px;
  border-top: 1px solid var(--linha);
}
.professor h3 { margin-bottom: 10px; }
.professor-funcao {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-grafite);
}
.professor p:last-child { margin-bottom: 0; }
/* Lista compacta da equipe (nome e função, sem fotos por enquanto) */
.equipe-lista-bloco {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--linha);
}
.equipe-lista-titulo {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-grafite);
}
.equipe-lista { list-style: none; }
.equipe-lista li {
  display: grid;
  grid-template-columns: 7.75rem 1fr;
  align-items: baseline;
  gap: 2px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--linha);
}
.equipe-lista li:first-child { border-top: 0; }
.equipe-lista strong {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: var(--peso-titulo);
  font-stretch: 112%;
  text-transform: uppercase;
}
.equipe-lista span { color: var(--cor-grafite); }

/* ---------- SEÇÃO 9: ESTRUTURA PARA A TUA ROTINA ---------- */
.estrutura-topo {
  display: grid;
  gap: 24px;
  margin-bottom: 48px;
}
.estrutura-topo .introducao { margin-top: 0; }
.estrutura-fotos {
  display: grid;
  gap: 16px;
}
.estrutura-fotos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.estrutura-fotos .foto-recepcao { object-position: center 42%; }
.estrutura-fotos .foto-tatame { object-position: center 36%; }

/* ---------- SEÇÃO 10: HORÁRIOS (grade por turma) ---------- */
.horarios-topo .introducao { margin-top: 24px; }

/* Três colunas no computador: segunda/quarta/sexta, terça/quinta e (sábado + Kids).
   No celular os blocos ficam um embaixo do outro. */
.grade-dias {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}
.grade-coluna-extra {
  display: grid;
  align-content: start;
  gap: 16px;
}
.grade-bloco {
  padding: 24px 20px 12px;
  background: var(--cor-branco);
  border: 1px solid var(--linha);
}
.grade-bloco h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}
.grade-lista { list-style: none; }
.grade-linha {
  display: grid;
  grid-template-columns: 5rem 1fr;
  column-gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--linha);
}
.grade-linha:first-child { border-top: 0; }
.grade-hora {
  grid-row: 1 / span 2;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: 1.2;
  white-space: nowrap;
}
.grade-turma {
  grid-column: 2;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.grade-professor {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--texto-suave);
}
.grade-nota {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto-suave);
}
.grade-kids {
  margin: 0;
  padding-bottom: 12px;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.grade-rodape {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
.grade-funcionamento {
  margin: 0;
  max-width: 40em;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* ---------- SEÇÃO 11: PLANOS ---------- */
.planos-grade {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}
.plano {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--cor-off-white);
  border: 1px solid var(--linha);
}
.plano h3 { margin-bottom: 24px; }
.plano-lista { list-style: none; }
.plano-linha {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--linha);
}
.plano-linha-quebra { flex-wrap: wrap; justify-content: flex-start; }
.plano-linha-quebra .plano-rotulo { flex-basis: 100%; }
.plano-rotulo {
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.plano-preco {
  white-space: nowrap;
  font-family: var(--fonte-titulo);
  font-size: 1.4375rem;
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: 1.1;
}
.plano-preco small {
  font-family: var(--fonte-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--texto-suave);
}
.planos-rodape {
  display: grid;
  gap: 28px;
  margin-top: 48px;
}
.planos-rodape p { margin: 0; max-width: 40em; }

/* ---------- SEÇÃO 12: PERGUNTAS FREQUENTES ---------- */
.faq-grade {
  display: grid;
  gap: 40px;
}
.faq-lista { border-bottom: 1px solid var(--linha); }
.faq-lista details { border-top: 1px solid var(--linha); }
.faq-lista summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: "+";
  flex: none;
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-lista details[open] summary::after { content: "\2212"; }
.faq-lista summary:hover { text-decoration: underline; text-decoration-color: var(--cor-destaque); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.faq-resposta {
  max-width: 38em;
  padding-bottom: 24px;
  color: var(--cor-grafite);
}
.faq-resposta p { margin: 0; }

/* ---------- SEÇÃO 13: FECHAMENTO ---------- */
.fechamento-topo {
  display: grid;
  gap: 48px;
}
.fechamento-citacao {
  margin: 0 0 40px;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.12;
  text-wrap: balance;
}
.fechamento-citacao p { margin: 0; }
.fechamento-citacao footer {
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.fechamento-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
}
.fechamento-base {
  display: grid;
  gap: 40px;
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--linha);
}
.fachada {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 40%;
}
.mapa {
  width: 100%;
  height: 320px;
  margin-top: 48px;
  border: 0;
  /* mapa em preto e branco para combinar com o site; apague a linha abaixo para voltar às cores */
  filter: grayscale(1) contrast(1.05);
}
.contato h3 { margin-bottom: 24px; }
.contato-lista {
  list-style: none;
  display: grid;
  gap: 22px;
  margin: 0 0 8px;
}
.contato-rotulo {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.contato-lista a { font-weight: 600; }
.contato address { font-style: normal; }
.contato address + a { display: inline-block; margin-top: 8px; }
.contato-regiao {
  margin: 22px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--texto-suave);
}


/* =====================================================
   8. RODAPÉ E BARRA FIXA DO CELULAR
   ===================================================== */
.rodape {
  background: var(--cor-preto);
  color: var(--cor-branco);
  --cor-foco: var(--cor-destaque);
  --texto-suave: var(--cor-texto-secundario-escuro);
  --linha-faixas: #3A3A3D;
}
.rodape-miolo {
  display: grid;
  gap: 40px;
  padding-block: 64px 48px;
}
.rodape-logo img { width: 168px; height: auto; }
.rodape-nome {
  margin: 20px 0 0;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}
.rodape-links { list-style: none; display: grid; gap: 4px 24px; grid-template-columns: repeat(2, auto); justify-content: start; }
.rodape-links a {
  display: block;
  padding: 8px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.rodape-links a:hover { text-decoration: underline; text-decoration-color: var(--cor-destaque); text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
.rodape-copia {
  margin: 0;
  padding-block: 24px 32px;
  border-top: 1px solid var(--cor-linha-escura);
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* Barra fixa no celular: botão largo "Agendar aula individual" */
.barra-celular {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px var(--margem-lateral) calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 11, 11, 0.96);
  border-top: 1px solid var(--cor-linha-escura);
  --cor-foco: var(--cor-branco);
}
.barra-celular a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: var(--raio-botao);
  background: var(--cor-whatsapp);
  color: var(--cor-preto);
  font-size: 0.9375rem;
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.barra-celular a:active { transform: scale(0.98); }
.barra-celular svg { width: 24px; height: 24px; flex: none; fill: currentColor; }

/* Nos navegadores que sabem, a barra só aparece depois de rolar a primeira tela
   (no topo o hero já tem o mesmo botão). Nos outros, ela fica sempre visível. */
@supports (animation-timeline: scroll()) {
  .barra-celular {
    transform: translateY(100%);
    animation: barra-aparece linear both;
    animation-timeline: scroll(root block);
    animation-range: 360px 520px;
  }
  @keyframes barra-aparece {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  body { padding-bottom: 0; }
  .rodape { padding-bottom: var(--altura-barra-celular); }
}


/* =====================================================
   TELAS MAIORES
   ===================================================== */
@media (min-width: 640px) {
  :root { --margem-lateral: 28px; }

  .grupo-botoes { flex-direction: row; flex-wrap: wrap; }
  .caminhos-grade { gap: 20px; }
  .cartao-caminho { aspect-ratio: 16 / 10; }
  .cartao-caminho-texto { padding: 32px; }
  .avaliacoes-grade { grid-template-columns: repeat(2, 1fr); }
  .planos-grade { grid-template-columns: 1fr; }
  .estrutura-fotos { grid-template-columns: repeat(2, 1fr); }
  .estrutura-fotos img { aspect-ratio: 4 / 3; }
  .fechamento-foto img { aspect-ratio: 16 / 11; }
  .rodape-links { grid-template-columns: repeat(3, auto); }
  .historias-topo { min-height: 460px; }
  .metodo-fecho { grid-template-columns: 1.3fr 1fr; gap: 56px; }

  /* Grade de horários: dois blocos lado a lado; sábado e Kids ocupam a linha de baixo */
  .grade-dias { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grade-coluna-extra { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grade-bloco { padding: 28px 24px 16px; }
}

/* Grade de horários em três colunas (precisa de largura para o nome da turma não quebrar) */
@media (min-width: 1100px) {
  .grade-dias { grid-template-columns: repeat(3, 1fr); }
  .grade-coluna-extra { grid-column: auto; grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  :root { --margem-lateral: 40px; }

  body { font-size: var(--tamanho-texto-grande); }
  .hero-texto { font-size: 1.1875rem; }
  .hero { padding-bottom: 72px; }
  .hero .grupo-botoes { gap: 16px; }

  .prova-lista { grid-template-columns: repeat(4, 1fr); }
  .prova-item > a,
  .prova-item > div { padding: 36px 26px; }
  .prova-valor { font-size: 1.375rem; }

  .caminhos-grade { grid-template-columns: repeat(3, 1fr); }
  .cartao-caminho { aspect-ratio: 4 / 5; }

  .primeira-aula-grade { grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; }
  .primeira-aula-foto { position: sticky; top: calc(var(--altura-cabecalho) + 32px); }
  .primeira-aula-foto img { aspect-ratio: 4 / 5; }
  .caixa-preco { padding: 32px 36px; }

  .linha-do-tempo { grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 72px; }
  .etapa { padding: 34px 28px 0 0; }
  .etapa:last-child { padding-bottom: 0; }
  .etapa h3 { min-height: 2.1em; }
  .etapa::before { right: 0; bottom: auto; width: auto; height: 10px; }
  .etapa:nth-child(1)::before { border: 1px solid var(--linha-faixas); }
  .etapa:nth-child(5)::after { left: auto; right: 0; top: 0; bottom: auto; width: 44px; height: 10px; }
  .etapa:nth-child(5) { padding-right: 0; }

  .historias-topo { min-height: 560px; margin-bottom: 72px; }
  .historias-topo .conteudo { padding-block: 64px; }
  .avaliacoes-grade { grid-template-columns: repeat(4, 1fr); gap: 20px; }

  .equipe-grade { grid-template-columns: 5fr 7fr; gap: 88px; align-items: center; }
  .equipe-foto img { aspect-ratio: 4 / 5; }

  .estrutura-topo { grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; margin-bottom: 72px; }
  .estrutura-fotos { gap: 20px; }
  .estrutura-fotos img { aspect-ratio: 4 / 3; }

  .grade-rodape { grid-template-columns: 1fr auto; align-items: center; gap: 56px; }

  .planos-grade { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .plano { padding: 36px 32px; }
  .plano h3 { min-height: 3.2em; }
  .plano-preco { font-size: 1.5rem; }
  .planos-rodape { grid-template-columns: 1fr auto; align-items: center; gap: 56px; }

  .faq-grade { grid-template-columns: 4fr 8fr; gap: 88px; align-items: start; }
  .faq-grade h2 { position: sticky; top: calc(var(--altura-cabecalho) + 32px); }
  .faq-lista summary { font-size: 1.125rem; }

  .fechamento-topo { grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; }
  .fechamento-foto img { aspect-ratio: 4 / 5; }
  .fechamento-base { grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; }
  .fachada { aspect-ratio: 16 / 10; }
  .mapa { height: 400px; margin-top: 72px; }

  .rodape-miolo { grid-template-columns: 1fr auto; align-items: start; gap: 64px; }
}

@media (min-width: 1024px) {
  :root { --margem-lateral: 48px; }

  /* A barra fixa é só do celular: no computador o botão fica no cabeçalho */
  body { padding-bottom: 0; }
  .barra-celular { display: none; }
  .rodape { padding-bottom: 0; }
}

/* Sem suporte à animação por rolagem, o hero precisa de folga para a barra fixa não cobrir os botões */
@supports not (animation-timeline: scroll()) {
  @media (max-width: 1023px) {
    .hero { padding-bottom: calc(var(--altura-barra-celular) + 24px); }
  }
}


/* =====================================================
   9. MOVIMENTO REDUZIDO
   Quem pede menos movimento no aparelho não vê animações.
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  @supports (animation-timeline: scroll()) {
    .barra-celular { transform: none; }
    .cabecalho { background-color: var(--cor-preto); }
  }
}


/* =====================================================
   10. BLOCOS NOVOS DA VERSÃO 1.2 (reunião de 04/11/2026)
   Primeira aula (nota do kimono e caixa do graduado), método,
   "Dos 3 aos 70", escola diplomada e "Ninguém chega sozinho".
   ===================================================== */

/* Primeira aula: nota do kimono, logo abaixo dos passos */
.nota-chegada {
  margin: 28px 0 0;
  padding: 18px 20px;
  border-left: 4px solid var(--cor-destaque);
  background: var(--cor-cartao-escuro);
  color: var(--texto-suave);
}
.nota-chegada strong { color: var(--cor-branco); }

/* Primeira aula: caixa para quem já é graduado ou parou */
.caixa-graduado {
  margin-top: 48px;
  padding: 28px;
  border: 1px solid #4A4A4D;
}
.caixa-graduado-rotulo {
  margin: 0 0 14px;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: 1.1;
  text-transform: uppercase;
}
.caixa-graduado p:not(.caixa-graduado-rotulo) { color: var(--texto-suave); }
.caixa-graduado .link-texto { color: var(--cor-branco); }

/* Método: frase menor embaixo da frase grande */
.metodo-apoio {
  margin: 20px 0 0;
  max-width: 30em;
  color: var(--texto-suave);
}

/* Dos 3 aos 70 */
.quem-treina-topo .introducao { margin-top: 24px; }
.perfis-grade {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 48px;
}
.perfil {
  padding: 24px;
  background: var(--cor-branco);
  border-top: 4px solid var(--cor-preto);
}
.perfil p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--texto-suave); }
.perfil .perfil-rotulo {
  margin-bottom: 10px;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: var(--peso-titulo);
  font-stretch: 112%;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cor-preto);
}
.perfil-convite { background: var(--cor-preto); border-top-color: var(--cor-destaque); }
.perfil-convite .perfil-rotulo,
.perfil-convite p { color: var(--cor-branco); }
.perfil-convite .link-texto { display: inline-block; margin-top: 12px; color: var(--cor-destaque); }

/* Escola diplomada (dentro da seção "Quem ensina") */
.caixa-diplomada {
  display: grid;
  gap: 24px;
  margin-top: 72px;
  padding: 32px 24px;
  background: var(--cor-preto);
  color: var(--cor-branco);
  --texto-suave: var(--cor-texto-secundario-escuro);
  --cor-foco: var(--cor-destaque);
}
.caixa-diplomada .sobretitulo { color: var(--cor-destaque); margin-bottom: 12px; }
.caixa-diplomada h3 { max-width: 14em; }
.caixa-diplomada-texto p { color: var(--texto-suave); }
.caixa-diplomada-texto strong { color: var(--cor-branco); }
.caixa-diplomada-texto p:last-child { margin-bottom: 0; }
.caixa-diplomada-filiacao {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cor-linha-escura);
}
.caixa-diplomada .link-texto { color: var(--cor-branco); }

/* Ninguém chega sozinho */
.recepcao-topo .introducao { margin-top: 24px; }
.recepcao-grade {
  display: grid;
  gap: 0;
  margin-top: 48px;
}
.recepcao-item {
  padding: 28px 0;
  border-top: 1px solid var(--linha);
}
.recepcao-rotulo {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-grafite);
}
.recepcao-item h3 { margin-bottom: 12px; }
.recepcao-item p:last-child { margin-bottom: 0; color: var(--texto-suave); }

@media (min-width: 640px) {
  .perfis-grade { grid-template-columns: repeat(2, 1fr); }
  .recepcao-grade { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .caixa-diplomada { padding: 40px; }
}
@media (min-width: 900px) {
  .caixa-graduado { padding: 32px 36px; }
  .perfis-grade { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .caixa-diplomada { grid-template-columns: 5fr 7fr; gap: 64px; padding: 56px; align-items: start; }
  .recepcao-grade { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
}

/* Correção v1.2: entre 900 e 1199 px os três planos lado a lado não cabiam (a página rolava para o lado). */
@media (min-width: 900px) and (max-width: 1199px) {
  .planos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plano { padding: 28px 22px; }
  .plano-linha { flex-wrap: wrap; }
  .plano-preco { font-size: 1.25rem; }
}