/* ============================================================
   A JORNADA — folha de estilo base
   Compartilhada por index.html, workshop.html e obrigado.html
   ============================================================ */

:root{
  --ink:        #1B2430;
  --ink-soft:   #4A5765;
  --ink-faint:  #667080;   /* escurecido: o antigo #8A94A0 dava 2.81:1 sobre --paper (reprova AA) */
  --paper:      #F4F5F2;
  --card:       #FFFFFF;
  --line:       #DDE0DA;

  --accent:     #2F5D50;   /* verde eucalipto — clínico, calmo */
  --accent-dk:  #234840;
  --accent-sf:  #E4EBE7;

  --ochre:      #8A6320;   /* usado APENAS no lado "expectativa" e no preço.
                              escurecido: o antigo #B8832B dava 2.88:1 sobre --ochre-sf (reprova AA) */
  --ochre-sf:   #F6EEDC;

  --w-text: 40rem;   /* coluna de leitura */
  --w-wide: 64rem;   /* blocos largos */

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem);
  --step-1:  clamp(1.30rem, 1.20rem + 0.50vw, 1.60rem);
  --step-2:  clamp(1.65rem, 1.45rem + 1.00vw, 2.30rem);
  --step-3:  clamp(2.10rem, 1.70rem + 2.00vw, 3.40rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.015em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:var(--step-3); }
h2{ font-size:var(--step-2); }
h3{ font-size:var(--step-1); }
p{ margin:0 0 1.1em; text-wrap:pretty; }
strong{ font-weight:700; }

a{
  color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color .15s ease;
}
a:hover{ color:var(--accent-dk); text-decoration-thickness:2px; }

/* foco visível em TUDO que recebe teclado, não só no .cta.
   mesmo tom do anel do botão: passa em fundo claro e escuro. */
:where(a, summary, button, [tabindex]):focus-visible{
  outline:3px solid #A8741F;
  outline-offset:3px;
  border-radius:2px;
}

::selection{ background:var(--accent-sf); color:var(--ink); }

/* ---------- estrutura ---------- */
.wrap{ width:min(100% - 2.5rem, var(--w-text)); margin-inline:auto; }
.wrap-wide{ width:min(100% - 2.5rem, var(--w-wide)); margin-inline:auto; }

section{ padding-block:clamp(3rem, 7vw, 5.5rem); }
section + section{ padding-top:0; }
.band{ background:var(--card); border-block:1px solid var(--line); }
.band + section{ padding-top:clamp(3rem, 7vw, 5.5rem); }

/* ---------- rótulo (eyebrow) ---------- */
.label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
}
.label--ochre{ color:var(--ochre); }

/* ---------- hero ---------- */
.hero{
  background:var(--ink);
  color:#EEF1ED;
  padding-block:clamp(3.5rem, 9vw, 6.5rem);
}
.hero .label{ color:#9FC4B5; }
.hero h1{ margin-bottom:.5em; }
.hero .sub{
  font-size:var(--step-1);
  color:#BFC7CE;
  line-height:1.45;
  max-width:34ch;
  margin-bottom:2rem;
}
.hero .meta{
  font-size:var(--step--1);
  color:#8D97A1;
  border-top:1px solid #33404E;
  padding-top:1.3rem;
  margin-top:2.8rem;
  line-height:1.55;
  max-width:46ch;   /* a credencial é linha de leitura, não legenda larga */
}
.saudacao{ color:#9FC4B5; font-weight:700; }

/* ---------- botão ---------- */
.cta{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.01em;
  padding:1.05rem 2.1rem;
  border-radius:2px;
  border:1px solid var(--accent-dk);
  transition:background .18s ease, transform .18s ease;
}
.cta:hover{ background:var(--accent-dk); transform:translateY(-1px); }
/* o anel de foco NÃO usa var(--ochre): o ochre escuro reprova (2.90:1) sobre o
   hero. Este tom passa em fundo claro e escuro — 3.86 no hero, 3.70 no paper. */
.cta:focus-visible{ outline:3px solid #A8741F; outline-offset:3px; }
.cta-note{
  font-size:var(--step--1);
  color:var(--ink-faint);
  margin-top:.85rem;
}
.hero .cta-note{ color:#8D97A1; }

/* ---------- ASSINATURA: expectativa × realidade ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  background:var(--card);
  margin:2.5rem 0;
  /* elevação de sussurro: dá peso ao componente que carrega a tese da
     página, sem virar "card flutuante". */
  box-shadow:0 1px 1px rgba(27,36,48,.03), 0 12px 28px -18px rgba(27,36,48,.22);
}
.split__col{ padding:1.6rem 1.5rem; }
.split__col + .split__col{ border-left:1px solid var(--line); }
.split__col--esp{ background:var(--ochre-sf); }
.split__col--real{ background:var(--accent-sf); }
.split__head{
  font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid currentColor;
}
.split__col--esp  .split__head{ color:var(--ochre); }
.split__col--real .split__head{ color:var(--accent); }
.split__col ul{ margin:0; padding:0; list-style:none; }
.split__col li{
  font-size:var(--step--1);
  line-height:1.5;
  padding:.65rem 0;
  border-top:1px solid rgba(27,36,48,.10);
  text-wrap:pretty;
}
.split__col li:first-child{ border-top:0; }
@media (max-width:620px){
  .split{ grid-template-columns:1fr; }
  .split__col + .split__col{ border-left:0; border-top:1px solid var(--line); }
}

/* ---------- aulas numeradas (sequência real) ---------- */
.aula{
  display:grid;
  grid-template-columns:3.4rem 1fr;
  gap:1.2rem;
  padding:1.5rem 0;
  border-top:1px solid var(--line);
}
.aula:last-child{ border-bottom:1px solid var(--line); }
.aula__n{
  font-family:"Fraunces", serif;
  font-size:1.9rem;
  color:var(--accent);
  line-height:1;
  padding-top:.15rem;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"tnum" 1;
}
.aula h3{ margin-bottom:.35em; }
.aula p{ margin:0; color:var(--ink-soft); font-size:var(--step--1); }

/* ---------- stack / entrega ---------- */
.stack{
  border:1px solid var(--line); background:var(--card);
  box-shadow:0 1px 1px rgba(27,36,48,.03), 0 12px 28px -18px rgba(27,36,48,.22);
  /* números de largura fixa: as durações e o preço alinham em coluna */
  font-variant-numeric:tabular-nums;
}
.stack__item{
  display:flex; justify-content:space-between; gap:1.2rem;
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--line);
  font-size:var(--step--1);
}
.stack__item span:last-child{ color:var(--ink-faint); white-space:nowrap; }
/* linha de soma do stack — fecha a conta antes de o preço aparecer.
   a coluna da direita não pode herdar --ink-faint aqui: sobre --accent-sf
   ela cai para 4.13:1 e reprova AA. */
.stack__item--soma{ font-weight:700; background:var(--accent-sf); }
.stack__item--soma span:last-child{ color:var(--ink); }
.stack__total{
  display:flex; justify-content:space-between; gap:1.2rem;
  padding:1.3rem 1.4rem;
  background:var(--ink); color:#fff;
  font-weight:700;
}
.preco{
  font-family:"Fraunces", serif;
  font-size:var(--step-2);
  color:var(--ochre);
  line-height:1;
}

/* ---------- âncora de mercado ---------- */
.ancora{
  width:100%; border-collapse:collapse; font-size:var(--step--1);
  font-variant-numeric:tabular-nums;   /* os valores alinham na vertical */
}
.ancora th,.ancora td{
  text-align:left; padding:.8rem .4rem;
  border-bottom:1px solid var(--line);
}
.ancora th{ font-weight:700; color:var(--ink-soft); }
.ancora td:last-child{ text-align:right; white-space:nowrap; }
.ancora tr:last-child td{ font-weight:700; color:var(--accent); border-bottom:0; }

/* ---------- depoimentos ---------- */
.dep{
  border-left:3px solid var(--accent);
  padding:.2rem 0 .2rem 1.4rem;
  margin:0 0 2rem;
}
.dep p{ margin-bottom:.6em; }
.dep cite{
  font-style:normal; font-size:var(--step--1);
  color:var(--ink-faint); display:block;
}

/* ---------- coorte ---------- */
.coorte{
  border:1px solid var(--accent);
  background:var(--accent-sf);
  padding:1.3rem 1.5rem;
  margin:2rem 0;
  font-size:var(--step--1);
}
.coorte b{ font-size:var(--step-0); }

/* ---------- FAQ ---------- */
details{
  border-bottom:1px solid var(--line);
  padding:1.05rem 0;
}
summary{
  cursor:pointer; font-weight:700; list-style:none;
  display:flex; justify-content:space-between; gap:1rem;
  transition:color .15s ease;
}
summary:hover{ color:var(--accent); }
summary::-webkit-details-marker{ display:none; }
/* o marcador gira em vez de trocar de glifo — o "+" vira "×" deitado,
   que é um "−" ótico. Movimento curto, sem chamar atenção pra si. */
summary::after{
  content:"+"; color:var(--accent); font-weight:400;
  font-size:1.4rem; line-height:1;
  transition:transform .2s ease;
}
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin:.9rem 0 0; color:var(--ink-soft); font-size:var(--step--1); }

/* ---------- rodapé ---------- */
footer{
  background:var(--ink); color:#8D97A1;
  font-size:.82rem; padding-block:2.5rem; line-height:1.6;
}
footer a{ color:#9FC4B5; }

/* ---------- utilidades ---------- */
.center{ text-align:center; }
.lead{ font-size:var(--step-1); line-height:1.45; color:var(--ink-soft); }
.hide{ display:none !important; }
/* ATENÇÃO ao mexer aqui.
   .reveal está aplicado ao .split — a tese da página. Ele começava com
   opacity:0 e só aparecia quando o track.js adicionava .in. Ou seja: se o
   JS não carregasse (bloqueador, erro, rede ruim), o bloco mais importante
   da página ficava invisível para sempre, sem deixar rastro.
   Agora o estado escondido só existe DENTRO de @media (scripting: enabled).
   Sem JS — ou em navegador que não entende a media query — a regra não se
   aplica e o conteúdo simplesmente aparece. O padrão é visível; a animação
   é o acréscimo. */
.reveal{ opacity:1; transform:none; }
@media (scripting: enabled){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }