/* Técnicas Americanas — estilo do site
   Paleta, tipografia, componentes e espaçamento: Manual da Marca v3.
   Ouro: no máximo três usos por tela. */

/* Fontes de reserva com métricas próximas das fontes da marca.
   Se o Google Fonts não carregar, o layout não pula nem quebra. */
@font-face { font-family: "Cormorant Reserva"; src: local("Georgia"), local("Times New Roman"); size-adjust: 86%; ascent-override: 92%; descent-override: 29%; }
@font-face { font-family: "Inter Reserva"; src: local("Arial"), local("Helvetica"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

:root {
  --preto: #121212;
  --azul: #1A2530;
  --ouro: #C5A059;
  --ouro-escuro: #A8874A;
  --luz: #E9EAEC;
  --cinza: #8A9099;

  --linha: rgba(138,144,153,.22);   /* Cinza Lente a 22%: fio de separação */
  --azul-claro: rgba(26,37,48,.55); /* Azul Noturno a 55%: linha alternada da tabela */

  --serif: "Cormorant Garamond", "Cormorant Reserva", Georgia, serif;
  --sans: Inter, "Inter Reserva", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 48px; --e6: 64px; --e7: 96px;
  --margem: var(--e3);
  --texto: 640px;                   /* coluna de texto: no máximo 640 px (Briefing 3.1), cerca de 70 caracteres */
}
@media (min-width: 768px) { :root { --margem: var(--e6); } }

*, *::before, *::after { box-sizing: border-box; }
/* O fundo da página (canvas) fica Azul Noturno para a área do "elástico" do celular, abaixo do rodapé,
   não aparecer como uma faixa preta. O corpo continua Preto Cena. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--azul); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--preto);
  color: var(--luz);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (min-width: 768px) { body { font-size: 18px; } }

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--cinza); text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 4px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--margem); }
.estreito { max-width: var(--texto); }
.wrap.estreito { max-width: calc(var(--texto) + 2 * var(--margem)); }   /* seção só de texto: coluna centralizada */

/* ---------------- Tipografia ----------------
   Um tamanho por nível:
   H1 56/36 · H2 44/30 · H3 32/24, sempre em Cormorant Garamond 600.
   Texto 18/17 em Inter. Texto pequeno 16 (só crédito, fonte e linha legal). */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0 0 var(--e3); text-wrap: balance; }
h1 { font-size: 36px; line-height: 1.1; }
h2 { font-size: 30px; line-height: 1.15; }
h3 { font-size: 24px; line-height: 1.2; margin-bottom: var(--e2); }
@media (min-width: 768px) {
  h1 { font-size: 56px; }
  h2 { font-size: 44px; }
  h3 { font-size: 32px; }
}

p { margin: 0 0 var(--e2); max-width: var(--texto); }
p:last-child { margin-bottom: 0; }
.lead { font-size: 18px; line-height: 1.55; }
@media (min-width: 768px) { .lead { font-size: 20px; } }
.credito { color: var(--cinza); font-size: 16px; line-height: 1.4; margin-top: var(--e3); }

/* Bloco seguinte a um parágrafo ou lista ganha respiro maior */
p + h3, ul + h3, .lista + h3 { margin-top: var(--e5); }
p + .lista, h2 + .lista, h3 + .lista { margin-top: var(--e2); }

.lista { list-style: none; margin: 0 0 var(--e3); padding: 0; max-width: var(--texto); }
.lista li { position: relative; padding-left: var(--e3); }
.lista li + li { margin-top: var(--e1); }
.lista li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--cinza); }
.lista:last-child { margin-bottom: 0; }

/* ---------------- Botões ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--e2) var(--e4); border: 1px solid transparent; border-radius: 4px;
  background: var(--ouro); color: var(--preto);
  font: 600 16px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--ouro-escuro); }
.btn--sec { background: transparent; color: var(--ouro); border-color: var(--ouro); }
.btn--sec:hover { background: transparent; color: var(--ouro-escuro); border-color: var(--ouro-escuro); }
.acao { margin: var(--e4) 0 var(--e2); }
.acao:last-child { margin-bottom: 0; }
@media (max-width: 599px) { .btn { width: 100%; line-height: 1.25; } }

/* ---------------- Cabeçalho ---------------- */
.topo { border-bottom: 1px solid var(--linha); background: var(--preto); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding-top: var(--e3); padding-bottom: var(--e3); }
.logo { display: block; line-height: 0; flex-shrink: 0; }
.logo img { height: 38px; width: auto; display: block; }   /* logo horizontal: letra legível e sem rolagem lateral em 390 px */
@media (max-width: 374px) { .logo img { height: 32px; } }
@media (min-width: 768px) { .logo img { height: 72px; } }
.topo nav { display: flex; gap: var(--e4); }
.topo nav a { font: 500 16px/1.2 var(--sans); text-decoration: none; padding: 12px 0; border-bottom: 1px solid transparent; }
.topo nav a:hover { border-bottom-color: var(--cinza); }
@media (max-width: 479px) { .topo-in { gap: var(--e2); } .topo nav { gap: var(--e2); } }
@media (max-width: 599px) { .topo-in { padding-top: var(--e2); padding-bottom: var(--e2); } }

/* ---------------- Seções ---------------- */
.secao { padding: var(--e6) 0; }
@media (min-width: 768px) { .secao { padding: var(--e7) 0; } }
.secao--azul { background: var(--azul); }
.secao--fio { border-top: 1px solid var(--linha); }
.abre { margin-bottom: var(--e5); }
@media (min-width: 768px) { .abre { margin-bottom: var(--e6); } }
.abre.abre--curto { margin-bottom: var(--e4); }

/* ---------------- Hero ---------------- */
.hero { display: grid; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: min(78vh, 640px); }
  .hero > .hero-texto { display: flex; flex-direction: column; justify-content: center; padding: var(--e6) var(--e6) var(--e6) var(--margem); }
  /* Hub e presencial: bloco de texto alinhado ao topo, mais perto da barra do logo (a página de anúncio continua centralizada) */
  .hero--compacto > .hero-texto { justify-content: flex-start; }
  .hero > .hero-foto { position: relative; }
}
.hero-texto { padding: var(--e6) var(--margem); max-width: 720px; }
@media (min-width: 900px) { .hero-texto { max-width: 620px; margin-left: auto; } }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
/* Celular: o rosto entra na primeira tela, numa faixa de cinema acima do título */
@media (max-width: 899px) {
  .hero-foto { order: -1; aspect-ratio: 21 / 9; }
  .hero-foto img { object-position: center var(--foco-celular, 30%); }
  .hero-texto { padding-top: var(--e3); }
}
.hero-foto--corpo { --foco-celular: 6%; }
.hero-foto--rosto { --foco-celular: 34%; }
/* Primeira tela do presencial (aula-hero.jpg): rosto da aluna, cabeça e mão do Velson sempre visíveis */
.hero-foto--aula { --foco-celular: 75%; }
@media (max-width: 899px) { .hero-foto--aula { aspect-ratio: 5 / 3; } }
/* No computador a foto tem quase a mesma proporção da coluna, então o object-position quase não recorta.
   A aproximação tira o teto vazio e centraliza no Velson, na aluna e na câmera. */
@media (min-width: 900px) {
  .hero-foto--aula img { object-position: center 72%; }
  /* Sem zoom: a altura do quadro passa a ser a do texto ao lado, e a área visível desce,
     cortando o teto vazio. A foto continua na mesma escala, porque a largura não muda. */
  .hero--compacto .hero-foto--aula { position: relative; }
  .hero--compacto .hero-foto--aula img { position: absolute; inset: 0; object-position: center 100%; }
}

/* ---------------- Enquadramento (marcas de canto) ----------------
   Só em foto de destaque, citação e bloco de credencial. */
.enquadro { position: relative; }
.enquadro::after {
  --t: 40px; --e: 1.5px; --m: var(--ouro);
  content: ""; position: absolute; inset: 16px; pointer-events: none;
  background:
    linear-gradient(var(--m),var(--m)) top left / var(--t) var(--e) no-repeat,
    linear-gradient(var(--m),var(--m)) top left / var(--e) var(--t) no-repeat,
    linear-gradient(var(--m),var(--m)) top right / var(--t) var(--e) no-repeat,
    linear-gradient(var(--m),var(--m)) top right / var(--e) var(--t) no-repeat,
    linear-gradient(var(--m),var(--m)) bottom left / var(--t) var(--e) no-repeat,
    linear-gradient(var(--m),var(--m)) bottom left / var(--e) var(--t) no-repeat,
    linear-gradient(var(--m),var(--m)) bottom right / var(--t) var(--e) no-repeat,
    linear-gradient(var(--m),var(--m)) bottom right / var(--e) var(--t) no-repeat;
}
.enquadro--fora::after { inset: -14px; }
@media (max-width: 599px) { .enquadro--fora::after { inset: -10px; } }

/* ---------------- Grades ---------------- */
.duo { display: grid; gap: var(--e5); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--e6); } }
.trio { display: grid; gap: var(--e5); }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3,1fr); gap: var(--e6); } }
.trio > div { border-top: 1px solid var(--linha); padding-top: var(--e3); }

.retrato { display: grid; gap: var(--e5); align-items: start; }
@media (min-width: 900px) { .retrato { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--e6); } .retrato--invertido { grid-template-columns: minmax(0,7fr) minmax(0,5fr); } }
@media (min-width: 900px) { .retrato > figure { position: sticky; top: var(--e4); } }
.retrato--invertido > figure { order: 2; }
@media (max-width: 899px) { .retrato--invertido > figure { order: 0; } }
.foto { margin: 0; background: var(--azul); overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto--retrato { aspect-ratio: 3 / 4; }
.enquadro.foto { overflow: visible; }
.enquadro.foto img { position: relative; }

/* ---------------- Produtos ---------------- */
.produto { border-top: 1px solid var(--linha); padding-top: var(--e5); display: grid; gap: var(--e4); }
@media (min-width: 900px) { .produto { grid-template-columns: .9fr 1.1fr; gap: var(--e7); } }
.produto + .produto { margin-top: var(--e7); }
@media (min-width: 900px) { .produto + .produto { margin-top: calc(2 * var(--e7) + var(--e6)); } }   /* entre blocos grandes, o respiro dobra (Briefing 3.1) */
.preco { font: 600 36px/1.1 var(--serif); margin: 0 0 var(--e2); }
@media (min-width: 768px) { .preco { font-size: 44px; } }
.preco small { font: 400 18px/1.2 var(--sans); margin-left: var(--e1); }
.ressalva { border-left: 1px solid var(--cinza); padding-left: var(--e3); margin: var(--e3) 0 var(--e2); }

/* ---------------- Selo da indicação ao Prêmio APCA ----------------
   Louros desenhados em SVG no HTML, em ouro: conta como um uso de ouro da tela.
   Exceção aprovada pelo Velson em 21/09/2026: linhas pequenas em maiúsculas com espaçamento, como é comum em selos.
   Sem ano no selo. */
.selo { position: relative; width: 320px; max-width: 100%; aspect-ratio: 360 / 310; color: var(--ouro); margin: var(--e4) 0; }
.selo-louros { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.selo-texto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.selo-linha { display: block; font: 600 16px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .14em; }
.selo-destaque { display: block; font: 600 32px/1.05 var(--serif); margin: 4px 0 6px; }
.selo-linha + .selo-linha { margin-top: 4px; }

/* ---------------- Depoimentos (Manual 2.6) ----------------
   Citação em Cormorant Garamond, foto circular de 56 px, nome e trabalho em Inter 500 no Cinza Lente.
   Marcas de canto em Cinza Lente (aprovado em 21/09/2026), para não passar de três usos de ouro por tela. */
.depoimentos { display: grid; gap: var(--e5); }
@media (min-width: 900px) {
  .depoimentos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .depoimentos--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pé do card: 16 px até a marca de canto + 40 px da marca + 24 px de respiro */
.depoimento { margin: 0; padding: var(--e5) var(--e4) calc(var(--e2) + 40px + var(--e3)); display: flex; flex-direction: column; }
.enquadro--cinza::after { --m: var(--cinza); }
.depoimento-texto { margin: 0 0 var(--e4); }
.depoimento-texto p { font: 600 20px/1.5 var(--serif); margin: 0; }
/* Autor preso no pé do card, na mesma altura em todos; foto alinhada ao topo do nome */
.depoimento-autor { display: flex; align-items: flex-start; gap: var(--e2); margin-top: auto; }
/* Lado a lado: os cards dividem as linhas da grade, então o bloco de autor começa na mesma altura em todos */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .depoimento { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--e4); }
    .depoimento-texto { margin: 0; }
    .depoimento-autor { margin-top: 0; }
  }
}
.depoimento-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.depoimento-foto--victor { object-position: 50% 32%; }
.depoimento-foto--gustavo { object-position: 50% 30%; }
.depoimento-foto--carolina { object-position: 76% 50%; }
.depoimento-foto--carlos { object-position: 53% 40%; }
.depoimento-nome { display: block; color: var(--luz); font: 600 17px/1.4 var(--sans); }
@media (min-width: 768px) { .depoimento-nome { font-size: 18px; } }
.depoimento-trabalho { display: block; color: var(--cinza); font: 400 16px/1.45 var(--sans); margin-top: 2px; }

/* ---------------- Turmas ---------------- */
.turmas-grade { display: grid; gap: var(--e5); margin-bottom: var(--e5); }
@media (min-width: 900px) { .turmas-grade { grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: start; } }
.turmas { width: 100%; border-collapse: collapse; }
.turmas caption { text-align: left; padding: 0 0 var(--e3); }
.turmas caption .prof { display: block; font: 600 24px/1.2 var(--serif); margin-bottom: var(--e1); }
@media (min-width: 768px) { .turmas caption .prof { font-size: 32px; } }
.turmas caption .valor { display: block; font: 400 18px/1.4 var(--sans); }
.turmas th, .turmas td { padding: 12px var(--e2); text-align: left; font-size: 18px; }
.turmas thead th { background: var(--azul); font-weight: 600; }
.secao--azul .turmas thead th { background: var(--preto); }
.turmas tbody th { font-weight: 400; }
.turmas td a { display: inline-block; padding: var(--e1) 0; font-weight: 600; }
/* Celular: células mais justas para "Agendar aula gratuita" caber em até duas linhas */
@media (max-width: 599px) {
  .turmas th, .turmas td { padding-left: var(--e1); padding-right: var(--e1); }
  .turmas th:first-child, .turmas td:first-child { padding-left: var(--e2); }
  .turmas td:last-child, .turmas thead th:last-child { width: 50%; }
}
.turmas tbody tr:nth-child(even) { background: var(--azul-claro); }
.info { margin-top: var(--e5); }
.info p { max-width: var(--texto); }

/* ---------------- FAQ e blocos que abrem e fecham ---------------- */
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-of-type { border-top: 1px solid var(--linha); }
.faq summary, .bio-completa summary { cursor: pointer; list-style: none; position: relative; padding: var(--e3) var(--e5) var(--e3) 0; font: 600 18px/1.4 var(--sans); }
.faq summary::-webkit-details-marker, .bio-completa summary::-webkit-details-marker { display: none; }
.faq summary::after, .bio-completa summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 28px/1 var(--sans); color: var(--cinza); }
.faq details[open] summary::after, .bio-completa[open] summary::after { content: "\2212"; }
.faq .resposta { padding: 0 0 var(--e4); }

.bio-completa { margin-top: var(--e4); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); max-width: var(--texto); }
.bio-completa .resposta { padding: 0 0 var(--e4); }
.link-final { margin-top: var(--e4); }

/* ---------------- Espaços reservados e pendências ---------------- */
.reservado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e1); padding: var(--e4); text-align: center; height: 100%; min-height: 200px;
  color: var(--cinza); font: 500 16px/1.45 var(--sans); background: var(--azul);
  border: 1px dashed var(--linha);
}
.secao--azul .reservado { background: var(--preto); }
.reservado small { font: 400 16px/1.45 var(--sans); }
.pendente {
  border: 1px dashed var(--cinza); border-radius: 8px; padding: var(--e3);
  margin: var(--e3) 0 0; color: var(--cinza); font: 400 16px/1.55 var(--sans); max-width: var(--texto);
}
.pendente strong { color: var(--luz); font-weight: 600; }

/* ---------------- Faixa de imagem (Briefing 3.4) ----------------
   Largura total, proporção de cinema, como pausa entre seções. */
.faixa { margin: 0; aspect-ratio: 21 / 9; background: var(--azul); overflow: hidden; }
.faixa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faixa--dentro { margin: 0 0 var(--e5); }
@media (min-width: 768px) { .faixa--dentro { margin-bottom: var(--e6); } }
.faixa--dentro + .wrap > .produto:first-child { border-top: 0; padding-top: 0; }
/* Foto dentro de um bloco de texto: recorte horizontal, uma só por seção */
.foto-bloco { aspect-ratio: 4 / 3; margin: var(--e3) 0 0; max-width: var(--texto); }
.foto-bloco img { object-position: center 76%; }
.duo--foto { margin-top: var(--e5); align-items: center; }
@media (min-width: 768px) { .duo--foto { margin-top: var(--e6); } }
.duo--foto .foto-bloco { margin: 0; }
.faixa .reservado { min-height: 0; border: 1px dashed var(--cinza); padding: var(--e3); }

/* ---------------- Rodapé ---------------- */
.rodape { background: var(--azul); padding: var(--e6) 0 var(--e5); border-top: 1px solid var(--linha); }
.rodape-grid { display: grid; gap: var(--e5); }
@media (min-width: 768px) { .rodape-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e6); } }
.rodape-logo { height: 48px; width: auto; display: block; margin-bottom: var(--e3); }
@media (min-width: 768px) { .rodape-logo { height: 56px; } }
.rodape p, .rodape address { margin: 0 0 var(--e1); font-style: normal; }
.rodape .rodape-tit { font-weight: 600; margin-bottom: var(--e2); }
.rodape .legal { margin-top: var(--e6); color: var(--cinza); font-size: 16px; max-width: none; }
.rodape .legal:first-child { margin-top: 0; }