/*
  typography.css — escala tipográfica única do site público.
  Carregado DEPOIS de styles.css, reviews.css, brand-motion.css, premium.css e site.css.

  Regras da escala:
  - Todos os tamanhos vêm dos tokens abaixo (fluidos, com mínimo e máximo).
  - Títulos nunca ultrapassam o contêiner: quebra de palavra segura + text-wrap balance.
  - Nenhum transform: scale() é usado para ajustar texto.
  - Fontes são self-hosted (fonts.css); sem requisições a terceiros.
*/
:root{
  --font-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --font-body:'DM Sans',system-ui,'Segoe UI',Arial,sans-serif;

  --t-h1:clamp(2.5rem,1.55rem + 3.9vw,5rem);          /* 40 → 80  título de página */
  --t-h1-page:clamp(2.5rem,1.6rem + 3vw,4.25rem);     /* 40 → 68  título de rota/página interna */
  --t-h2:clamp(2.25rem,1.5rem + 2.8vw,3.75rem);       /* 36 → 60  título de seção */
  --t-h3:clamp(1.625rem,1.35rem + 1.1vw,2.375rem);    /* 26 → 38  subtítulo de seção */
  --t-title:clamp(1.5rem,1.35rem + .55vw,1.875rem);   /* 24 → 30  nome de plano, título de card */
  --t-price:clamp(2.5rem,2.2rem + 1vw,3.25rem);       /* 40 → 52  preço */
  --t-lead:clamp(1rem,.96rem + .22vw,1.125rem);       /* 16 → 18  texto de apoio */
  --t-body:1rem;                                      /* 16 */
  --t-small:.875rem;                                  /* 14 */
  --t-micro:.75rem;                                   /* 12 */
}

/* Segurança global: nenhum título ultrapassa o contêiner. */
h1,h2,h3,h4{overflow-wrap:break-word;text-wrap:balance}
p,li{overflow-wrap:break-word}

/* ---------- Landing (index) ---------- */
#landing h2,
#landing .assessment-context h2,
#landing .coach-story h2{font-size:var(--t-h2);line-height:.98}
#landing .credentials h2,
#landing .start-cta h3{font-size:var(--t-h3);line-height:1}
#landing .steps h3{font-size:var(--t-title)}
#landing .consulting-benefits li{grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);column-gap:24px}
#landing .consulting-benefits strong{font-size:1.375rem}
@media(max-width:760px){
  #landing .consulting-benefits li{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ---------- Rota de planos e cartões (SPA: /#planos) ---------- */
#plans-page .plans-heading h1{font-size:var(--t-h1-page);line-height:.96;max-width:18ch}
#plans-page .plans-heading p{font-size:var(--t-lead)}

.plan-card{min-width:0;padding:clamp(22px,2.4vw,32px)}
.plan-card > *{min-width:0}
/* O nome do plano é um <h2>; a regra original mirava <h3> e herdava o h2 global (até 70px). */
.plan-header h2,
.plan-header h3{
  font:700 var(--t-title)/1.05 var(--font-display);
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0 0 10px;
  color:var(--text);
}
.plan-badge{font-size:var(--t-micro)}
.plan-desc{font-size:var(--t-small);line-height:1.6;min-height:0}
@media(min-width:1101px){.plan-desc{min-height:3.2em}}
.plan-price{flex-wrap:wrap;column-gap:6px;padding-bottom:20px;margin-bottom:20px}
.price-currency{font:600 1rem/1 var(--font-body)}
.price-val{font:800 var(--t-price)/1 var(--font-display);letter-spacing:-.01em}
.price-period{font-size:var(--t-small)}
.plan-features{font-size:.9375rem;gap:12px;margin-bottom:28px}
.plan-features li{line-height:1.45}
.plans-footnote{font-size:var(--t-small)}
.plan-card .plan-button{font-size:.9375rem;font-weight:700;letter-spacing:.01em;min-height:48px;padding:12px 18px}

/* Checkout */
.checkout-summary-card h3{font-size:1.125rem}

/* ---------- Páginas internas (site.css): /planos, /consultoria-online, /sobre, /blog ---------- */
.hero p.eyebrow,.eyebrow{font-size:var(--t-micro);letter-spacing:.16em;color:var(--gold,#c9a45c)}
.card p.price{color:var(--gold,#c9a45c);margin:16px 0}
.price small{font:500 var(--t-small)/1 var(--font-body);color:var(--muted,#b9b5ad);margin-left:4px;letter-spacing:0}
.hero h1{overflow-wrap:break-word}

/* Acessibilidade: link de atalho (skip link) escondido até receber foco via teclado */
.skip:not(:focus){
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.skip:focus{
  position:fixed!important;
  top:12px!important;
  left:12px!important;
  z-index:99999!important;
  padding:10px 16px!important;
  background:var(--gold,#c9a45c)!important;
  color:var(--ink,#0b0c0a)!important;
  font-weight:700!important;
  font-size:14px!important;
  border-radius:4px!important;
  outline:2px solid #fff!important;
  width:auto!important;
  height:auto!important;
  clip:auto!important;
}