/* ==========================================================================
   O Clube do Midas · LP de vendas · styles.css
   L4 (PROVA VISUAL) da esteira lp-build, @dev, 2026-09-16. Base do L5.
   🔴 Todo número aqui vem do 02-composicao.yaml. Nenhum valor inventado.
   Identidade: os 6 tokens do kit v2 do cliente (Mesa #016). Nenhuma cor da Infusion.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* tokens.cor — kit v2 */
  --sala: #12151C;
  --sala-elevada: #171B23;
  --indigo-praca: #8D86EE;
  --indigo-profundo: #4A55C8;
  --prata-lua: #C3C9D6;
  --pedra: #F2F1EE;

  /* tokens.derivados_por_opacidade (mesmos tokens com alfa, nunca cor nova) */
  --filete-sala: rgb(195 201 214 / 0.18);
  --filete-elevada: rgb(195 201 214 / 0.22);
  --borda-ritmo-cor: rgb(195 201 214 / 0.55);

  /* global.scale — 7 degraus */
  --h1: clamp(38px, 5.6vw, 66px);
  --h2: clamp(30px, 3.8vw, 48px);
  --h3: clamp(19px, 1.7vw, 22px);
  --lead: clamp(18px, 1.6vw, 21px);
  --body: clamp(16px, 1.3vw, 18px);
  --small: clamp(14px, 1.1vw, 15px);
  --price: clamp(56px, 9vw, 104px);

  /* rhythm.valores */
  --compacta: clamp(40px, 5vw, 64px);
  --media: clamp(64px, 8vw, 104px);
  --ampla: clamp(88px, 11vw, 152px);

  /* global.gutter (360) */
  --gutter: 20px;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --corpo: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sala);
  color: var(--prata-lua);
  font-family: var(--corpo);
  font-size: var(--body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- escala --- */
.t-h1 { font-family: var(--display); font-size: var(--h1); line-height: 1.04; letter-spacing: -0.025em; font-weight: 600; color: var(--pedra); margin: 0; }
.t-h2 { font-family: var(--display); font-size: var(--h2); line-height: 1.1; letter-spacing: -0.015em; font-weight: 500; color: var(--pedra); margin: 0; }
.t-h3 { font-family: var(--corpo); font-size: var(--h3); line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; color: var(--pedra); margin: 0; }
.t-lead { font-size: var(--lead); line-height: 1.5; letter-spacing: 0; font-weight: 400; color: var(--prata-lua); margin: 0; }
.t-body { font-size: var(--body); line-height: 1.6; letter-spacing: 0; font-weight: 400; color: var(--prata-lua); margin: 0; }
.t-small { font-size: var(--small); line-height: 1.45; letter-spacing: 0.01em; font-weight: 500; color: var(--prata-lua); margin: 0; }
.t-price { font-family: var(--display); font-size: var(--price); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; color: var(--pedra); margin: 0; }

/* ----------------------------------------------- depth.borda_ritmo (9/4, 1px) --- */
/* Acompanha os 4 lados; o segmento não se concentra nos cantos (não é grampo). */
.borda-ritmo {
  background-image:
    repeating-linear-gradient(90deg, var(--borda-ritmo-cor) 0 9px, transparent 9px 13px),
    repeating-linear-gradient(90deg, var(--borda-ritmo-cor) 0 9px, transparent 9px 13px),
    repeating-linear-gradient(180deg, var(--borda-ritmo-cor) 0 9px, transparent 9px 13px),
    repeating-linear-gradient(180deg, var(--borda-ritmo-cor) 0 9px, transparent 9px 13px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
}

/* -------------------------------------------------------------------- CTA --- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: var(--indigo-praca);
  color: var(--sala);
  font-family: var(--corpo);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.cta:hover { background: color-mix(in srgb, var(--indigo-praca) 88%, var(--pedra) 12%); transform: translateY(-2px); }
.cta:active { background: color-mix(in srgb, var(--indigo-praca) 90%, var(--sala) 10%); transform: translateY(0); }
.cta:focus-visible { outline: 2px solid var(--pedra); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cta, .cta:hover { transform: none; transition: none; } }
@media (min-width: 768px) { .cta { width: auto; } }
@media (min-width: 1280px) { .cta { min-height: 60px; padding: 0 36px; min-width: 320px; } }

.cta-micro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.cta-micro .icone-cadeado { width: 14px; height: 14px; flex: none; color: var(--prata-lua); }

/* ============================================================== S1 · Topo === */
.s1 {
  padding: var(--compacta) var(--gutter) var(--media);
}
.s1__painel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background-color: var(--sala-elevada);
  padding: 28px 20px 0;
  overflow: hidden;              /* a arte sangra DENTRO do painel, nunca para fora da página */
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .s1__painel { padding: 48px 40px 0; row-gap: 32px; } }
@media (min-width: 1280px) {
  .s1__painel {
    padding: 56px 64px 0;
    grid-template-columns: 600px 1fr;
    column-gap: 40px;
  }
}
/* a borda ritmo fica POR CIMA da arte, para não ser apagada pela sangria */
.s1__borda {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.s1__texto { position: relative; z-index: 1; padding-bottom: 32px; }
@media (min-width: 1280px) { .s1__texto { padding-bottom: 72px; } }

.s1__marca img { width: 176px; height: 37px; }
.s1__tagline { margin-top: 10px; }
.s1__marca { margin-bottom: 32px; }
@media (min-width: 1280px) {
  .s1__marca img { width: 208px; height: 44px; }
  .s1__marca { margin-bottom: 48px; }
}

.s1 .t-h1 { max-width: 600px; text-wrap: balance; }   /* L4: em 66px a headline fecha 4 linhas e deixava "fora." sozinho */
.s1 .t-lead { max-width: 540px; margin-top: 20px; }
.s1__cta { margin-top: 32px; }

.s1__arte {
  position: relative;
  z-index: 1;
  align-self: end;
  /* sangria: encosta na base e na lateral do painel, anulando o padding */
  margin: 0 -20px;
}
.s1__arte picture, .s1__arte img { width: 100%; height: auto; }
@media (min-width: 768px) { .s1__arte { margin: 0 -40px; } }
/* L4, medido em 1440: 600 (texto) + 40 (gap) + 640 (arte) = 1280, mas o miolo do painel tem 1152.
   A arte de 640 transbordava 64px além da borda e era cortada. Ajuste pontual do L4: a arte ocupa
   a trilha dela MAIS a sangria de 64 à direita (576px), em escala proporcional (576×504), sem
   esticar. Registrado no 04-prova-visual.md. */
@media (min-width: 1280px) {
  .s1__arte { margin: 0 -64px 0 0; justify-self: stretch; }
}

/* ============================================= S5 · Vídeo de demonstração === */
.s5 { padding: var(--media) var(--gutter); background: var(--sala); }
.s5__inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.s5__moldura { background-color: var(--sala-elevada); padding: 8px; width: 100%; }
@media (min-width: 1280px) { .s5__moldura { padding: 16px; width: auto; } }
.s5__video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
@media (min-width: 1280px) { .s5__video { width: 928px; height: 522px; } }
.s5__capa { width: 100%; height: 100%; object-fit: cover; }   /* L4: o seletor `> img` pegava também o play e o esticava sobre a capa */
.s5__play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); cursor: default; }
.s5__faixa { height: 44px; display: flex; align-items: center; justify-content: flex-end; }
.s5__faixa img { width: 104px; height: 22px; }
.s5__legenda { max-width: 680px; margin-top: -4px; }   /* gap 24 da coluna − 4 = 20 declarados */

/* ================================================ S6 · O que você recebe === */
.s6 { padding: var(--ampla) var(--gutter); background: var(--sala-elevada); }
.s6__inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.s6__cab .t-lead { margin-top: 16px; }

.tabela { width: 100%; }
.tabela__cabecalho { display: none; }
.tabela__linha { padding: 24px 0; border-top: 1px solid var(--filete-elevada); display: grid; grid-template-columns: 16px 1fr; column-gap: 16px; row-gap: 8px; }
.tabela__linha:last-child { border-bottom: 1px solid var(--filete-elevada); }
.tabela__linha .marcador { width: 16px; height: 16px; margin-top: 5px; grid-row: span 2; }
@media (min-width: 768px) {
  .tabela__cabecalho {
    display: grid; grid-template-columns: 16px 5fr 6fr; column-gap: 16px; padding-bottom: 12px;
    font-size: var(--small); line-height: 1.45; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; color: var(--prata-lua);
  }
  .tabela__linha { grid-template-columns: 16px 5fr 6fr; }
  .tabela__linha .marcador { grid-row: auto; }
}
.s6__onde { margin-top: 24px; color: var(--pedra); }

.bonus__titulo { position: relative; padding-top: 18px; }
.bonus__titulo::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 2px; background: var(--indigo-praca); }
.bonus__tabela { margin-top: 20px; background: var(--sala); border: 1px solid var(--filete-elevada); padding: 20px; }
@media (min-width: 1280px) { .bonus__tabela { padding: 32px; } }
.bonus__linha { display: grid; grid-template-columns: 2fr 3fr; column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--filete-elevada); }
.bonus__linha:first-child { border-top: 0; padding-top: 0; }
.bonus__linha:last-child { padding-bottom: 0; }
.bonus__item { font-size: var(--body); line-height: 1.6; font-weight: 600; color: var(--pedra); margin: 0; }
.bonus__nota { display: block; margin-top: 4px; font-style: italic; }

/* ==========================================================================
   L5 · BUILD (@dev, 2026-09-16) — S2 a S15 e o que fica fora do fluxo.
   Números: 02-composicao.yaml. Comportamento: 05-ux-spec.md.
   Números que o L2 não declarou estão marcados com [L5] e listados no 06-qc.md.
   ========================================================================== */

/* título de seção → conteúdo  [L5] */
.sec-titulo { margin-bottom: 32px; }
@media (min-width: 1280px) { .sec-titulo { margin-bottom: 40px; } }
.centro { text-align: center; }

/* ------------------------------------------------------- blocos de botão --- */
.cta-bloco { padding: var(--compacta) var(--gutter); background: var(--sala); }
.cta-bloco__inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cta-bloco .cta-micro { justify-content: center; text-align: center; }
.s9 { padding-bottom: var(--media); }

/* ============================================================ S2 · Para quem === */
.s2 { padding: var(--ampla) var(--gutter) var(--media); background: var(--sala); }
.s2__inner { max-width: 960px; margin: 0 auto; }
.s2__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px)  { .s2__grid { grid-template-columns: 5fr 4fr; } }
@media (min-width: 1280px) { .s2__grid { gap: 32px; } }
.s2__col { padding: 24px; }
@media (min-width: 1280px) { .s2__col { padding: 40px; } }
.s2__col--e { background: var(--sala-elevada); }
.s2__col--nao { background: var(--sala); border: 1px solid var(--filete-sala); }
.s2__col--nao .t-h3 { color: var(--prata-lua); }
.s2__lista { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }  /* [L5] 24 do cabeçalho à lista */
.s2__lista li { display: grid; grid-template-columns: 16px 1fr; column-gap: 12px; }                             /* [L5] 12 */
.s2__lista img { width: 16px; height: 16px; margin-top: 5px; }
.s2__col--e li { color: var(--pedra); }

/* ============================================================== S3 · Ciclo === */
.s3 { padding: var(--ampla) var(--gutter); background: var(--sala-elevada); }
.s3__inner { max-width: 1120px; margin: 0 auto; }
.ciclo-wrap { position: relative; }
@media (min-width: 1280px) { .ciclo-wrap { max-width: 1024px; margin: 0 auto; } }
.ciclo { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; }
.ciclo__estacao { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; }  /* mobile: escada à esquerda */
.ciclo__glifo { width: 64px; height: 64px; position: relative; z-index: 1; background: var(--sala-elevada); }
.ciclo__num { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--indigo-praca); line-height: 1.2; display: block; }
.ciclo__nome { margin-top: 4px; }
/* L5: com flex, o glifo ficava solto à direita quando o título quebrava em 2 linhas. Inline, ele acompanha a última palavra. */
.ciclo__nome img { display: inline-block; width: 20px; height: 20px; vertical-align: -3px; margin-left: 6px; }
.ciclo__texto { max-width: 320px; margin-top: 8px; }
.ciclo__cadencia { margin-top: 12px; }
/* mobile: fio traço-vão ligando as estações (o conector-v de 720px não se estica: CSS, mesmo ritmo 9/4) */
.ciclo::before {
  content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--prata-lua) 0 9px, transparent 9px 13px);
}
@media (min-width: 1280px) {
  .ciclo { max-width: 1024px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-bottom: 40px; }
  .ciclo::before { display: none; }
  .ciclo__estacao { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ciclo__glifo { margin-bottom: 20px; }
  .ciclo__conector { position: absolute; left: 0; top: 0; width: 1024px; height: 96px; clip-path: inset(0 0 40px 0); pointer-events: none; }
  /* o retorno da 3ª à 1ª passa POR BAIXO do texto (no asset, y=88 cruzaria o nome do passo) */
  .ciclo::after {
    content: ""; position: absolute; left: 16.1%; right: 16.1%; bottom: 0; height: 24px;
    background:
      repeating-linear-gradient(90deg, var(--prata-lua) 0 9px, transparent 9px 13px) bottom / 100% 1.5px no-repeat,
      repeating-linear-gradient(180deg, var(--prata-lua) 0 9px, transparent 9px 13px) left / 1.5px 100% no-repeat,
      repeating-linear-gradient(180deg, var(--prata-lua) 0 9px, transparent 9px 13px) right / 1.5px 100% no-repeat;
  }
}
@media (max-width: 1279px) { .ciclo__conector { display: none; } }
.s3__fecho { max-width: 680px; margin: 64px auto 0; text-align: center; }
.s3__fecho .t-lead { color: var(--pedra); }
.s3__fecho .t-body { margin-top: 16px; }

/* ======================================================= S8 · Preço === */
.s8 { padding: var(--ampla) var(--gutter) var(--media); background: var(--sala); }
.s8__inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.s8__card { background-color: var(--sala-elevada); padding: 32px 20px; text-align: center; }
@media (min-width: 1280px) { .s8__card { padding: 56px 64px; } }
.s8__card .t-lead { margin-top: 16px; }
.s8__card .t-lead strong { color: var(--pedra); font-weight: 600; }
.alt__intro { color: var(--pedra); margin-bottom: 12px; }   /* [L5] 12 */
.alt__linha { padding: 20px 0; border-top: 1px solid var(--filete-sala); display: grid; grid-template-columns: 1fr; row-gap: 6px; }
.alt__linha:last-child { border-bottom: 1px solid var(--filete-sala); }
@media (min-width: 768px) { .alt__linha { grid-template-columns: 2fr 3fr; column-gap: 24px; } }
.s8__lembrete { margin-top: 24px; text-align: center; }

/* ========================================================== S10 · FAQ === */
.s10 { padding: var(--media) var(--gutter); background: var(--sala-elevada); }
.s10__inner { max-width: 820px; margin: 0 auto; }
.faq { border-top: 1px solid var(--filete-elevada); }
.faq__item { border-bottom: 1px solid var(--filete-elevada); }
.faq__item h3 { margin: 0; }
.faq__gatilho {
  width: 100%; min-height: 56px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--corpo); font-size: var(--h3); line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; color: var(--pedra);
}
.faq__gatilho:hover { background: rgb(242 241 238 / 0.03); }
.faq__gatilho:hover .faq__chevron { color: var(--indigo-praca); }
.faq__gatilho:focus-visible { outline: 2px solid var(--indigo-praca); outline-offset: 2px; }
.faq__chevron { width: 20px; height: 20px; flex: none; color: var(--prata-lua); transition: transform 180ms ease-out; }
.faq__chevron svg { width: 20px; height: 20px; }
.faq__gatilho[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__resposta { padding-bottom: 24px; max-width: 680px; }
@media (prefers-reduced-motion: reduce) { .faq__chevron { transition: none; } }

/* ============================================== S11 · Garantia (moment) === */
.s11 { position: relative; padding: calc(var(--ampla) + 72px) var(--gutter) var(--ampla); background: var(--pedra); }
.s11__selo { position: absolute; left: 50%; top: 0; width: 144px; height: 144px; transform: translate(-50%, -50%); z-index: 2; }
.s11__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.s11 .t-h2 { color: var(--sala); }
.s11 .t-body { color: var(--sala); }
.s11 .s11__porque { opacity: 0.82; }
.s11 .cta { background: var(--indigo-profundo); color: var(--pedra); margin-top: 12px; }   /* [L5] 12 + gap 20 */
.s11 .cta:hover { background: color-mix(in srgb, var(--indigo-profundo) 88%, var(--sala) 12%); }
.s11 .cta:focus-visible { outline-color: var(--sala); }

/* ====================================================== S12 · Quem mapeia === */
.s12 { padding: var(--media) var(--gutter); background: var(--sala); }
.s12__inner { max-width: 960px; margin: 0 auto; }
.s12__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 768px)  { .s12__grid { grid-template-columns: 200px 1fr; gap: 40px; } }
@media (min-width: 1280px) { .s12__grid { gap: 56px; } }
.s12__retrato { padding: 6px; border: 1px solid rgb(195 201 214 / 0.30); width: 172px; }
.s12__retrato img { width: 160px; height: 160px; }
@media (min-width: 768px) { .s12__retrato { width: 200px; } .s12__retrato img { width: 186px; height: 186px; } }
.s12__cred { color: var(--prata-lua); margin-top: 4px; }
.s12__desc { margin-top: 16px; }
.s12__fecho { margin-top: 24px; }

/* ====================================================== S13 · Fechamento === */
.s13 { padding: var(--ampla) var(--gutter); background: var(--sala-elevada); }
.s13__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.s13__arte { width: 320px; height: 107px; }
@media (min-width: 768px) { .s13__arte { width: 480px; height: 160px; } }
.s13 .cta-bloco__cta { margin-top: 12px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.s13 .cta-micro { justify-content: center; }

/* ========================================================= S14 · Rodapé === */
.s14 { padding: 24px var(--gutter); background: var(--sala); border-top: 1px solid var(--filete-sala); text-align: center; }
@media (max-width: 767px) { .s14 { padding-bottom: calc(24px + 88px); } }

/* ============================================ S15 · WhatsApp (oculto) === */
.s15 { position: fixed; right: 20px; bottom: 96px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--indigo-praca); z-index: 40; }
.s15[hidden] { display: none; }
.s15 img { width: 28px; height: 28px; }
@media (min-width: 768px) { .s15 { bottom: 32px; } }

/* ===================================================== Barra fixa mobile === */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 80px;
  padding: 12px var(--gutter); background: var(--sala); border-top: 1px solid var(--filete-sala);
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  transform: translateY(100%); transition: transform 200ms ease-out;
}
.barra-fixa.is-visivel { transform: translateY(0); }
.barra-fixa .cta { min-height: 56px; width: 100%; }
.barra-fixa__preco { white-space: nowrap; }
@media (min-width: 768px) { .barra-fixa { display: none; } }
@media (prefers-reduced-motion: reduce) { .barra-fixa { transition: none; } }

/* ======================================================= Pop-up Safety Net === */
body.sn-aberto { overflow: hidden; }
.sn {
  width: min(480px, calc(100% - 32px)); max-width: 480px; margin: auto; padding: 32px 20px;
  background: var(--sala-elevada); color: var(--prata-lua); border: 1px solid var(--indigo-praca); border-radius: 0;
}
@media (min-width: 1280px) { .sn { padding: 32px; } }
.sn::backdrop { background: rgb(18 21 28 / 0.82); }
@media (max-width: 767px) {
  .sn { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100% - 16px); overflow-y: auto; border-width: 1px 0 0; }
}
.sn__fechar {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--prata-lua); cursor: pointer; font-size: 28px; line-height: 1;
}
.sn__fechar:hover { color: var(--pedra); }
.sn__fechar:focus-visible { outline: 2px solid var(--indigo-praca); }
.sn { position: fixed; }
.sn__corpo { display: flex; flex-direction: column; gap: 16px; }
.sn__sub { margin-top: -8px; }

.progresso { list-style: none; margin: 0 0 4px; padding: 0 0 20px; max-width: 416px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.progresso li { padding-top: 10px; border-top: 2px solid rgb(195 201 214 / 0.30); font-size: var(--small); line-height: 1.45; font-weight: 500; color: var(--prata-lua); }   /* [L5] 10 do trilho ao texto */
.progresso li[aria-current="step"] { border-top-color: var(--indigo-praca); color: var(--indigo-praca); font-weight: 600; }

.campo { display: flex; flex-direction: column; gap: 6px; }   /* [L5] 6 */
.campo label { font-size: var(--small); line-height: 1.45; font-weight: 500; color: var(--prata-lua); }
.campo input {
  height: 52px; padding: 0 14px; background: var(--sala); color: var(--pedra); border: 1px solid rgb(195 201 214 / 0.30); border-radius: 0;
  font-family: var(--corpo); font-size: 16px;   /* 16 mínimo: o iOS dá zoom em campo menor */
}
.campo input:focus { outline: none; border: 2px solid var(--indigo-praca); padding: 0 13px; }
.campo input[aria-invalid="true"] { border: 2px solid var(--indigo-praca); padding: 0 13px; }
.campo__erro { min-height: 0; font-size: var(--small); line-height: 1.45; color: var(--pedra); }
.campo__erro:not(:empty)::before { content: "! "; color: var(--indigo-praca); font-weight: 600; }
.sn .cta { width: 100%; margin-top: 4px; }
.sn .cta[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ==========================================================================
   AJUSTES DO H3 (Rafael, 2026-09-16) — lista pontual no L5, nada voltou de estágio.
   Cada bloco abaixo SOBRESCREVE a regra anterior de propósito, para o diff ler como ajuste.
   ========================================================================== */

/* H3-1 · Botão "na dobra que dobra a cor": o bloco de botão passa a PERTENCER à seção de
   cima (mesma superfície, sem faixa própria). A arquitetura já dizia: o argumento fica na
   seção anterior, e o botão é o fecho dela. */
.s3 { padding-bottom: var(--media); }
.s6 { padding-bottom: var(--media); }
.s8 { padding-top: var(--media); padding-bottom: var(--media); }   /* o bloco de botão acima já fecha com --ampla */
.cta-bloco { padding: 0 var(--gutter) var(--ampla); }
.s4.cta-bloco, .s7.cta-bloco { background: var(--sala-elevada); }
.s9.cta-bloco { background: var(--sala); padding-bottom: var(--ampla); }

/* H3-2 · Tamanho do botão, rodada 3.
   Rodada 1 (Rafael): "bem pequenininho" → foi para 64 × min 400, fonte 18.
   Rodada 2 (Rafael): "destoando demais". Medido: 6 blocos de cor de 400 × 64 numa página
   tipográfica, o da S9 com 434 e, no celular, quebrando em 2 linhas (mais alto que os outros).
   Agora: UMA proporção, a do texto. Altura 56, fonte 17, respiro 40 dos lados, largura do
   próprio texto (sem mínimo que vira bloco). No celular, largura total, fonte 16, uma linha. */
.cta { min-width: 0; }
@media (min-width: 768px) {
  .cta { min-height: 56px; min-width: 0; padding: 0 40px; font-size: 17px; white-space: nowrap; }
}
@media (max-width: 767px) {
  .cta { min-height: 52px; padding: 0 16px; font-size: 16px; }
}

/* H3-2 · Tamanho do botão, rodada 4 — A LEITURA CERTA.
   Rafael, com print: "olha como é que disto um número gigante e o botão minúsculo. Isso acontece
   em diversos locais. Tem que deixar o botão maior."
   🔴 A rodada 3 leu "destoando" como PESADO e diminuiu. Era o contrário: o botão destoava da
   ESCALA da página (preço 104, h1 66, h2 48) por ser pequeno. A medida certa não é o botão sozinho,
   é o botão contra o maior texto do bloco.
   Escala nova: o botão acompanha o degrau h3 × ~1,1 (21 px) e a altura fica ~1/1,4 do h2.
   Sem largura mínima: cresce pelo respiro, não vira laje. */
@media (min-width: 1280px) {
  .cta { min-height: 80px; padding: 0 64px; font-size: 22px; letter-spacing: 0; }
  .cta-micro { font-size: 16px; margin-top: 14px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .cta { min-height: 68px; padding: 0 48px; font-size: 19px; }
}
@media (max-width: 767px) {
  .cta { min-height: 60px; padding: 0 16px; font-size: 17px; }
  /* a barra fixa tem 80 px e divide a linha com o preço: fica no tamanho dela */
  .barra-fixa .cta { min-height: 56px; padding: 0 12px; font-size: 15px; }
}
.barra-fixa .cta { min-height: 52px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
/* abaixo de 375 o botão e o preço não cabem lado a lado em uma linha: fica só o botão */
@media (max-width: 374px) { .barra-fixa { grid-template-columns: 1fr; } .barra-fixa__preco { display: none; } }

/* H3-3 · Títulos: todos os h2 de seção CENTRALIZADOS (antes, 4 à esquerda e 5 ao centro). */
.sec-titulo, .s6__cab { text-align: center; }
.s6__cab .t-lead { max-width: 680px; margin-left: auto; margin-right: auto; }

/* H3-4 · "Bônus" com o mesmo padrão de título de seção (Newsreader, escala h2, centro),
   com o filete de acento centralizado acima. Semântica continua h3 (subseção da S6). */
.bonus__titulo {
  font-family: var(--display); font-size: var(--h2); line-height: 1.1; letter-spacing: -0.015em; font-weight: 500;
  text-align: center; padding-top: 24px;
}
.bonus__titulo::before { left: 50%; transform: translateX(-50%); }
.bonus__tabela { margin-top: 32px; }

/* H3-B · Preço: faixa de ponta a ponta em Sala Elevada, para o preço deixar de ficar perdido. */
.s8__inner { gap: 0; }
.s8__faixa {
  margin: 40px calc(-1 * var(--gutter)) 48px;
  padding: 56px var(--gutter);
  background-color: var(--sala-elevada);
  background-image:
    repeating-linear-gradient(90deg, var(--borda-ritmo-cor) 0 9px, transparent 9px 13px),
    repeating-linear-gradient(90deg, var(--borda-ritmo-cor) 0 9px, transparent 9px 13px);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  text-align: center;
}
@media (min-width: 1280px) { .s8__faixa { padding: 88px var(--gutter); margin-top: 48px; } }
.s8__faixa .t-lead { margin-top: 16px; }
.s8__faixa .t-lead strong { color: var(--pedra); font-weight: 600; }
.s8 { overflow-x: clip; }
@media (min-width: 1056px) {
  /* a faixa sai da coluna de 960 e encosta nas bordas da janela */
  .s8__faixa { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

/* H3-A · Retrato grande, colorido, em corte 4:5 (a foto fria "parecia de luto"). */
.s12__grid { align-items: center; }
@media (min-width: 768px)  { .s12__grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (min-width: 1280px) { .s12__grid { gap: 56px; } }
.s12__retrato, .s12__retrato img { width: 100%; }
.s12__retrato { padding: 0; border: 0; }
.s12__retrato img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 768px) { .s12__retrato { width: 100%; } .s12__retrato img { width: 100%; height: auto; } }

/* ==========================================================================
   AJUSTE DO JOÃO (PLANTA-AJUSTE-JOAO-2026-09-16.md, aprovada pelo Rafael em 16/09)
   Lista pontual no L5 depois do H3: nada voltou de estágio (veto V4).
   Paleta intacta: só os 6 tokens do kit v2 e os mesmos tokens com alfa.
   ========================================================================== */

/* J1 · Marca legível: símbolo + nome em HTML, com a fonte da página ----------- */
.marca { display: flex; align-items: center; gap: 14px; }
.marca__nome { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -0.01em; color: var(--pedra); white-space: nowrap; }
.s1__marca .marca__simbolo, .marca__simbolo { width: 48px; height: 48px; flex: none; }
@media (min-width: 1280px) {
  .s1__marca .marca__simbolo { width: 60px; height: 60px; }
  .s1__marca .marca__nome { font-size: 34px; }
}
.marca--mini { gap: 8px; }
.marca--mini .marca__simbolo { width: 22px; height: 22px; }
.marca--mini .marca__nome { font-size: 15px; }

/* J2 + J4 · Topo: luz índigo atrás do Saldanha, sem painel chapado nem borda tracejada */
.s1 {
  position: relative;
  padding: var(--compacta) var(--gutter) 0;
  overflow: hidden;
  background:
    radial-gradient(52% 62% at 76% 52%, rgb(74 85 200 / 0.55), rgb(74 85 200 / 0) 72%),
    radial-gradient(38% 46% at 8% 0%, rgb(141 134 238 / 0.14), rgb(141 134 238 / 0) 70%),
    linear-gradient(180deg, var(--sala-elevada) 0%, var(--sala) 100%);
}
.s1::after {   /* a base do topo se dissolve na seção seguinte, sem linha de corte */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
  background: linear-gradient(180deg, rgb(18 21 28 / 0), var(--sala));
}
.s1__painel { background: none; padding: 0; overflow: visible; }
@media (min-width: 768px) { .s1__painel { padding: 0; } }
@media (min-width: 1280px) {
  .s1__painel { padding: 0; grid-template-columns: minmax(0, 620px) 1fr; column-gap: 24px; align-items: end; }
}
.s1__texto { padding-bottom: 8px; }
@media (min-width: 1280px) { .s1__texto { padding: 24px 0 var(--ampla); } }
.s1__marca { margin-bottom: 40px; }
@media (min-width: 1280px) { .s1__marca { margin-bottom: 64px; } }

.s1__foto { position: relative; z-index: 1; margin: 0 calc(-1 * var(--gutter)); }
.s1__foto img {
  width: 100%; height: 440px; object-fit: cover; object-position: 50% 8%;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
@media (min-width: 768px) { .s1__foto img { height: 560px; } }
@media (min-width: 1280px) {
  .s1__foto { margin: 0; align-self: end; justify-self: center; width: 100%; max-width: 560px; }
  .s1__foto img {
    height: auto; aspect-ratio: 820 / 1027;
    -webkit-mask-image: radial-gradient(78% 72% at 50% 38%, #000 58%, transparent 100%);
            mask-image: radial-gradient(78% 72% at 50% 38%, #000 58%, transparent 100%);
  }
}

/* J4 · Ritmo claro/escuro: S3 e S6 viram faixas claras, e os blocos de botão acompanham ---- */
.s3, .s4.cta-bloco, .s6, .s7.cta-bloco { background: var(--pedra); }
.s3 .t-h2, .s6 .t-h2, .s3 .t-h3, .s6 .t-h3 { color: var(--sala); }
.s3 .t-body, .s6 .t-body, .s3 .t-lead, .s6 .t-lead { color: rgb(18 21 28 / 0.74); }
.s4 .cta-micro, .s7 .cta-micro { color: rgb(18 21 28 / 0.7); }
.s4 .cta, .s7 .cta { background: var(--indigo-profundo); color: var(--pedra); }
.s4 .cta:hover, .s7 .cta:hover { background: color-mix(in srgb, var(--indigo-profundo) 88%, var(--sala) 12%); }
.s4 .icone-cadeado, .s7 .icone-cadeado { filter: invert(1) brightness(0.3); }

/* J5 · S3: três cartões com ícone preenchido ----------------------------------- */
.passos { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.passo {
  position: relative; padding: 28px 24px 32px;
  background: rgb(255 255 255 / 0.55);
  border: 1px solid rgb(18 21 28 / 0.08);
  box-shadow: 0 1px 0 rgb(18 21 28 / 0.04), 0 18px 40px -24px rgb(18 21 28 / 0.35);
}
@media (min-width: 1280px) { .passo { padding: 36px 32px 40px; } }
.passo__icone {
  display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin-bottom: 24px;
  background: radial-gradient(90% 90% at 70% 20%, rgb(74 85 200 / 0.55), rgb(74 85 200 / 0) 70%), var(--sala);
}
.passo__icone img { width: 52px; height: 52px; }
.passo__cadencia { display: block; margin-bottom: 8px; color: var(--indigo-profundo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.passo .t-body { margin-top: 10px; }
.s3__fecho { max-width: 720px; margin: 48px auto 0; text-align: center; }
.s3 .s3__fecho strong { color: var(--sala); font-weight: 600; }

/* J5 · S6: o que você recebe em cartões, e bônus com capa -------------------------- */
.recebe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .recebe { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.recebe__item {
  padding: 24px; background: rgb(255 255 255 / 0.55); border: 1px solid rgb(18 21 28 / 0.08);
  box-shadow: 0 18px 40px -26px rgb(18 21 28 / 0.35);
}
.recebe__item img { width: 44px; height: 44px; margin-bottom: 16px; }
.recebe__item .t-body { margin-top: 8px; }
.s6__onde { margin-top: 20px; text-align: center; color: rgb(18 21 28 / 0.7); }
.s6__onde strong { color: var(--sala); }
.s6__inner { max-width: 1080px; }

.bonus__titulo { color: var(--sala); }
.bonus__cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px)  { .bonus__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bonus__cards { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.bonus__card { display: flex; flex-direction: column; background: var(--sala); box-shadow: 0 24px 48px -28px rgb(18 21 28 / 0.6); }
.bonus__card > img { width: 100%; height: auto; aspect-ratio: 320 / 200; }
.bonus__corpo { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.bonus__card .bonus__item { color: var(--pedra); font-size: var(--body); }
.bonus__card .t-small { color: var(--prata-lua); }
.bonus__card .bonus__nota { color: var(--indigo-praca); font-style: normal; font-weight: 600; margin-top: 0; }

/* S8 · pagamento sob o preço (a pergunta do FAQ saiu) */
.s8__pagamento { margin-top: 10px; }

/* S12 · palco, número grande */
.s12__nome { font-family: var(--display); font-size: var(--h2); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.s12__numero { margin: 20px 0 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.s12__numero strong { font-family: var(--display); font-size: clamp(56px, 6vw, 80px); font-weight: 500; line-height: 0.9; color: var(--indigo-praca); letter-spacing: -0.03em; }
.s12__numero .t-body { color: var(--pedra); max-width: 280px; }
.s12__desc { margin-top: 20px; }

/* S13 · fechamento com a mesma luz do topo, no lugar da arte de pictograma */
.s13 {
  background:
    radial-gradient(50% 70% at 50% 0%, rgb(74 85 200 / 0.4), rgb(74 85 200 / 0) 72%),
    var(--sala);
}
.s13__simbolo { width: 80px; height: 80px; }
@media (min-width: 768px) { .s13__simbolo { width: 96px; height: 96px; } }

/* J2 · o hero agora é RECORTE com transparência (_gerador/recortar-saldanha-hero.py):
   a luz índigo aparece atrás dele, e só a base se dissolve. */
.s1__foto img { object-fit: contain; object-position: 50% 100%; }
@media (min-width: 1280px) {
  .s1__foto { max-width: 600px; margin-bottom: 0; }
  .s1__foto img {
    aspect-ratio: 950 / 1190;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
}

/* J5 · S5: capa do vídeo com a foto real, escurecida para o play ler. Placeholder até o vídeo existir. */
.s5__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 21 28 / 0.15), rgb(18 21 28 / 0.55)); pointer-events: none; }
.s5__play { z-index: 1; }

/* J4 · respiro: nas faixas claras, o bloco de botão fecha com --media, não --ampla */
.s4.cta-bloco, .s7.cta-bloco { padding-bottom: var(--media); }
/* J5 · o rosto do Saldanha fica no centro-direita da foto: o play vai para o terço esquerdo, na parede, para não cobrir o rosto */
.s5__play { left: 24%; top: 58%; }

/* ==========================================================================
   BÔNUS v2 (Rafael, 16/09: "a única parte que ficou fraca")
   Mockup de produto fotografado de cena HTML, no lugar da capa geométrica.
   CFL em destaque (único bônus com prazo); os outros três em cartões iguais.
   ========================================================================== */
.bonus__destaque, .bonus__card { background: var(--sala); overflow: hidden; box-shadow: 0 30px 60px -30px rgb(18 21 28 / 0.65); }
.bonus__mockup { display: block; width: 100%; height: auto; }
.bonus__selo {
  display: inline-block; align-self: flex-start; padding: 6px 10px; margin-bottom: 12px;
  font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sala); background: var(--indigo-praca);
}
.bonus__nome { margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: var(--pedra); font-size: 26px; }
.bonus__destaque { margin-top: 32px; display: grid; grid-template-columns: 1fr; }
.bonus__destaque .bonus__mockup { aspect-ratio: 1200 / 760; }
.bonus__texto { padding: 24px 24px 32px; display: flex; flex-direction: column; }
.bonus__texto .t-body { margin-top: 12px; color: var(--prata-lua); }
.bonus__prazo { margin: 16px 0 0; font-size: var(--small); font-weight: 600; color: var(--indigo-praca); }
@media (min-width: 1024px) {
  .bonus__destaque { grid-template-columns: 7fr 5fr; align-items: center; }
  .bonus__texto { padding: 40px 48px 40px 16px; }
  .bonus__destaque .bonus__nome { font-size: 40px; }
}
.bonus__cards { margin-top: 20px; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .bonus__cards { grid-template-columns: repeat(3, 1fr); } }
.bonus__card { display: flex; flex-direction: column; }
.bonus__card .bonus__mockup { aspect-ratio: 960 / 600; }
.bonus__card .bonus__corpo { padding: 20px 22px 26px; gap: 0; }
.bonus__card .bonus__nome { font-size: 24px; }
.bonus__card .t-small { margin-top: 8px; color: var(--prata-lua); }
/* Bônus v2 · CFL: as duas trilhas nomeadas (Rafael, 16/09: "não fala das duas trilhas, não deixa claro que é o nosso treinamento") */
.bonus__trilhas { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.bonus__trilhas li { display: grid; gap: 2px; padding: 12px 14px; border-left: 2px solid var(--indigo-praca); background: rgb(195 201 214 / 0.05); }
.bonus__trilhas strong { color: var(--pedra); font-weight: 600; font-size: var(--body); }
.bonus__trilhas span { color: var(--prata-lua); font-size: var(--small); }
@media (min-width: 1280px) { .bonus__texto .t-body { font-size: 17px; } }
@media (min-width: 1024px) {
  .bonus__destaque { align-items: stretch; }
  .bonus__destaque .bonus__mockup { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
}
@media (min-width: 1024px) {
  /* imagem inteira (sem cortar o notebook), centralizada; a coluna leva a mesma luz do palco para não sobrar faixa chapada */
  .bonus__destaque { background: radial-gradient(55% 60% at 30% 45%, rgb(74 85 200 / 0.35), rgb(74 85 200 / 0) 75%), var(--sala); }
  .bonus__destaque .bonus__mockup { height: auto; aspect-ratio: 1200 / 760; object-fit: contain; align-self: center; }
}
/* CFL: o mockup é transparente; a luz é do próprio card, contínua em todos os tamanhos */
.bonus__destaque { background: radial-gradient(60% 55% at 32% 40%, rgb(74 85 200 / 0.5), rgb(74 85 200 / 0) 72%), var(--sala); }
@media (max-width: 1023px) { .bonus__destaque { background: radial-gradient(90% 45% at 50% 18%, rgb(74 85 200 / 0.5), rgb(74 85 200 / 0) 72%), var(--sala); } }