:root { --navy: #0a1428; --navy-soft: #14213d; --gold: #c9a961; --gold-dark: #a8873f; --cream: #f7f3ea; --cream-dim: #ebe4d6; --ink: #1b1b1b; --muted: #5c5c5c; --muted-light: #b8bfcc; --white: #ffffff; --gold-line: rgba(201, 169, 97, 0.3); --gold-line-soft: rgba(201, 169, 97, 0.2); --overlay-soft: rgba(255, 255, 255, 0.04); --overlay-line: rgba(255, 255, 255, 0.07); --ink-line: rgba(0, 0, 0, 0.12); --z-sticky: 40; --z-header: 50; --z-nav: 60; --font-title: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --wrap: 1140px; --gutter: 20px; --radius: 4px; --header-h: 62px;

  /* ----------------------------------------------------------
     Escala tipografica. Antes eram 34 tamanhos distintos, varios
     separados por menos de 1px - diferenca invisivel, hierarquia
     turva. Agora sao 4 papeis de texto mais 3 de numero display.

     Base 18px em rem (nao px) para respeitar o ajuste de fonte do
     browser. Publico de 45-65 lendo no celular: o PRODUCT.md fecha
     18-19px e piso de 15px.
     ---------------------------------------------------------- */
  --t-caption: 0.9375rem;                      /* 15px - legal, rotulo, meta */
  --t-body:    1.125rem;                       /* 18px - corpo e descricoes */
  --t-lead:    1.375rem;                       /* 22px - entrada, destaque */
  --t-h3:      1.625rem;                       /* 26px */
  --t-h2:      clamp(1.875rem, 4.6vw, 2.5rem); /* 30 -> 40px */
  --t-h1:      clamp(2.25rem, 6.4vw, 3.375rem);/* 36 -> 54px */

  /* Numeros display: papel proprio, fora da rampa de texto */
  --t-preco:   clamp(2.75rem, 11vw, 3.5rem);
  --t-stat:    clamp(1.9rem, 5vw, 2.4rem);
  --t-passo:   1.5rem;


  /* Escala de espacamento. Eram 33 valores px distintos, varios
     separados por 1-2px. Base 4px, mesma logica da rampa de tipo. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px;
  --s-16: 64px; --s-18: 72px; --s-22: 88px; --s-24: 96px;
}
*, ::before, ::after { box-sizing: border-box; }
html { text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0px; font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; color: var(--ink); background: var(--cream); overflow-x: hidden; font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility; overflow-wrap: break-word; }

/* Texto claro sobre fundo escuro perde peso percebido em tres eixos ao
   mesmo tempo. Corrigir so um nao resolve: entrelinha, tracking e peso. */
.hero, .section-dark, .site-footer { line-height: 1.68; letter-spacing: 0.012em; }
.hero h1, .section-dark h2, .section-dark h3 { letter-spacing: 0em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.18; margin: 0px 0px 0.5em; letter-spacing: -0.01em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0px 0px 1rem; }
ul, ol { margin: 0px; padding: 0px; list-style: none; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
main[id], main [id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.ico { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ico-sm { width: 18px; height: 18px; }
/* 0.16em estava acima da faixa util (5-12%) para caixa alta: tracking
   largo demais e um dos tells de scaffold gerado. */
.eyebrow { font-size: var(--t-caption); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 0.9rem; }
.btn { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: var(--t-body); line-height: 1.3; text-align: center; text-decoration: none; padding: var(--s-4) var(--s-8); border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--gold); }
.btn-lg { display: block; width: 100%; font-size: var(--t-body); padding: var(--s-5) var(--s-6); }
.site-header { position: fixed; inset: 0px 0px auto; z-index: var(--z-header); height: var(--header-h); background: var(--navy); border-bottom: 1px solid var(--gold-line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--font-title); font-weight: 600; font-size: var(--t-lead); color: var(--cream); text-decoration: none; letter-spacing: 0.02em; display: inline-flex; align-items: center; min-height: 44px; }
.logo span { color: var(--gold); margin-left: 0.28em; }
.burger { width: 44px; height: 44px; margin-right: calc(var(--s-3) * -1); padding: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-1); background: none; border: 0px; cursor: pointer; }
.burger span { display: block; width: 23px; height: 2px; background: var(--cream); }
.nav { position: absolute; top: var(--header-h); left: 0px; right: 0px; background: var(--navy); border-bottom: 1px solid var(--gold-line); display: none; }
body.nav-open .nav { display: block; }
.nav ul { padding: var(--s-2) var(--gutter) var(--s-5); }
.nav li { border-top: 1px solid var(--overlay-line); }
.nav a { display: block; padding: var(--s-4) 0px; color: var(--cream); text-decoration: none; font-size: var(--t-body); }
.nav .nav-cta { margin-top: var(--s-4); padding: var(--s-3) var(--s-5); background: var(--gold); color: var(--navy); font-weight: 600; text-align: center; border-radius: var(--radius); }
.nav li:has(.nav-cta) { border-top: 0px; }
.hero { background: var(--navy); color: var(--cream); padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-10); }
.hero-copy h1 { color: var(--cream); margin-bottom: 0.25em; text-wrap: balance; }
.hero-highlight { font-family: var(--font-title); font-size: var(--t-lead); font-weight: 600; line-height: 1.3; color: var(--gold); margin-bottom: 1.1rem; text-wrap: balance; }
.hero .sub { font-size: var(--t-body); color: var(--muted-light); margin-bottom: 1.8rem; max-width: 60ch; text-wrap: pretty; }
.hero .btn-primary { width: 100%; }
.hero-note { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: var(--s-4) 0px 0px; font-size: var(--t-caption); font-weight: 600; color: var(--muted-light); }
.hero-media { margin: var(--s-8) 0px 0px; }
/* Entre 640 e 960 o hero fica empilhado e a imagem ia a 709px de largura
   por 886 de altura - dominava a tela e pedia um arquivo de 1418px que a
   origem nao tem. Limitar resolve o peso e o layout ao mesmo tempo. */
@media (min-width: 640px) and (max-width: 959px) {
  .hero-media { max-width: 420px; margin-inline: auto; }
}
.hero-media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--gold-line); }
.strip { background: var(--white); color: var(--navy); padding: var(--s-8) 0px; border-bottom: 1px solid var(--cream-dim); }
.strip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
.strip-list li:last-child { grid-column: 1 / -1; }
.strip-list li { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.badge-ring { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border: 2px solid var(--gold); border-radius: 50%; background: var(--cream); }
.badge-ring .ico { width: 32px; height: 32px; stroke: var(--gold-dark); stroke-width: 1.6; }
/* max-width: 100% e obrigatorio aqui: o li e flex column com
   align-items:center, o que dimensiona o filho por max-content. Sem isto
   o rotulo estoura a celula quando o texto e ampliado. */
.strip-list strong { font-size: var(--t-body); font-weight: 700; line-height: 1.3; color: var(--navy); max-width: 100%; overflow-wrap: break-word; }
.section { padding: var(--s-12) 0px; }
.section-alt { background: var(--cream-dim); }
.section-dark { background: var(--navy); color: var(--cream); }
.section-dark h2, .section-dark h3 { color: var(--cream); }
.section-dark .lead { color: var(--muted-light); }
.section-head { max-width: 660px; margin: 0px auto var(--s-6); text-align: center; }
.section-head .lead { font-size: var(--t-body); color: var(--muted); margin: 0px; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
/* O numero ocupava uma linha inteira so para ele. Agora vive na coluna
   ao lado do titulo e do texto: mesma informacao, ~40px a menos por cartao. */
.step { position: relative; background: var(--white); border: 1px solid var(--cream-dim); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.section-alt .step { background: var(--cream); }
/* O filho direto do grid e o <picture>, nao o <img>: posicionar so o img
   deixa o picture sem lugar definido e ele colide com o numero. */
.step > picture { grid-column: 1 / -1; grid-row: 1; display: block; }
.step img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.step-num { grid-column: 1; grid-row: 2 / span 2; font-family: var(--font-title); font-size: var(--t-passo); font-weight: 700; color: var(--gold); padding: var(--s-4) 0px var(--s-5) var(--s-5); font-variant-numeric: lining-nums; line-height: 1.2; }
.step h3 { grid-column: 2; grid-row: 2; padding: var(--s-4) var(--s-5) 0px var(--s-3); margin-bottom: 0.2em; }
.step p { grid-column: 2; grid-row: 3; padding: 0px var(--s-5) var(--s-5) var(--s-3); margin: 0px; font-size: var(--t-body); color: var(--muted); }
/* Sem declarar colunas, a coluna implicita e "auto", limitada por
   min-content: com texto ampliado o filho empurrava o container. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.split-media { margin: 0px; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.split-copy h2 { text-wrap: balance; }
.lead-copy { font-size: var(--t-body); color: var(--muted); margin: 0px; max-width: 60ch; text-wrap: pretty; }
.sub-head { font-size: var(--t-h3); margin: var(--s-8) 0px var(--s-4); }
.therapy-list, .therapy-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.therapy-list li, .therapy-duo li { position: relative; padding-left: var(--s-8); }
.therapy-list li::before, .therapy-duo li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 13px; height: 7px; border-left: 2.5px solid var(--gold-dark); border-bottom: 2.5px solid var(--gold-dark); transform: rotate(-45deg); }
.therapy-list h4, .therapy-duo h4 { font-family: var(--font-body); font-size: var(--t-body); font-weight: 700; margin: 0px 0px 0.15em; }
.therapy-list p, .therapy-duo p { margin: 0px; font-size: var(--t-body); color: var(--muted); text-wrap: pretty; }
.income { max-width: 62ch; margin-inline: auto; text-align: center; }
.income h2 { text-wrap: balance; }
.income p { font-size: var(--t-body); color: var(--muted); text-wrap: pretty; }
.income strong { color: var(--ink); }
.income-note { margin: var(--s-6) 0px 0px; padding-top: var(--s-5); border-top: 1px solid var(--cream-dim); font-size: var(--t-body); font-style: italic; }
.section-alt .income-note { border-top-color: var(--ink-line); }
.modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0px; max-width: 760px; margin-inline: auto; }
.modules li { padding: var(--s-5) 0px; border-top: 1px solid var(--cream-dim); }
.modules li:last-child { border-bottom: 1px solid var(--cream-dim); }
.module-label { display: flex; align-items: center; gap: var(--s-3); margin: 0px 0px 0.3em; font-size: var(--t-body); font-weight: 700; color: var(--gold-dark); }
.module-label .tag { padding: 3px var(--s-3); background: var(--navy); color: var(--gold); border-radius: var(--radius); font-size: var(--t-caption); font-weight: 700; }
.modules h3 { margin-bottom: 0.25em; }
.modules p { margin: 0px; font-size: var(--t-body); color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.teacher-kicker { text-align: center; margin-bottom: var(--s-6); }
/* minmax(0,1fr) em vez de 1fr: "1fr" equivale a minmax(auto,1fr), e o
   minimo automatico impede a coluna de encolher abaixo do min-content do
   conteudo. Com texto em 200% isso empurrava a coluna para 394px dentro
   de um container de 331px e estourava a pagina. WCAG 1.4.4. */
.teacher-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.teacher-photo { margin: 0px; }
.teacher-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--gold-line); }
.teacher-copy h2 { text-wrap: balance; }
.teacher-copy p { font-size: var(--t-body); color: var(--muted-light); max-width: 60ch; text-wrap: pretty; }
.teacher-mission { font-style: italic; color: var(--cream) !important; }
/* Flex com wrap em vez de grid de 3 colunas fixas: com o texto ampliado
   os numeros quebram linha em vez de forcar o container a crescer. */
.stats { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.stats li { flex: 1 1 90px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-5) var(--s-2); border: 1px solid var(--gold-line); border-radius: 10px; }
.stat-num { font-family: var(--font-title); font-size: var(--t-stat); font-weight: 700; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.stat-label { font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-light); }
.highlight-box { margin: var(--s-8) 0px 0px; padding: var(--s-6) var(--s-6); background: var(--navy); color: var(--cream); border-radius: var(--radius); font-family: var(--font-title); font-size: var(--t-lead); font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; }
/* Galeria: uma coluna no celular. Os arquivos tem 900px e estavam sendo
   exibidos a 156px. A peca e o pico de desejo da pagina; merece o tamanho. */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); max-width: 940px; margin-inline: auto; }
.gallery li { background: none; border: 0; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--cream-dim); }
.gallery span { display: block; padding: var(--s-3) 2px 0; font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.includes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.includes li { padding: var(--s-5); background: var(--overlay-soft); border: 1px solid var(--gold-line); border-radius: var(--radius); }
.includes h3 { margin: var(--s-4) 0px 0.35em; }
.includes p { margin: 0px; font-size: var(--t-body); color: var(--muted-light); }
.testimonials { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.testimonial { background: var(--white); border: 1px solid var(--cream-dim); border-radius: var(--radius); padding: var(--s-6); }
.stars { margin: 0px 0px var(--s-3); color: var(--gold); font-size: var(--t-body); letter-spacing: 0.12em; }
.testimonial blockquote { margin: 0px 0px var(--s-5); }
.testimonial blockquote p { margin: 0px; font-size: var(--t-body); color: var(--ink); }
.person { display: flex; align-items: center; gap: var(--s-3); margin: 0px; padding-top: var(--s-4); border-top: 1px solid var(--cream-dim); }
.person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.person figcaption { display: flex; flex-direction: column; font-size: var(--t-caption); line-height: 1.35; }
.person span { color: var(--muted); font-size: var(--t-caption); }
.offer { background: var(--navy); }
.offer .section-head { margin-bottom: var(--s-8); }
.offer-head { color: var(--cream); text-wrap: balance; }
.offer-card { max-width: 560px; margin-inline: auto; background: var(--cream); border: 1px solid var(--gold); border-radius: var(--radius); padding: var(--s-8) var(--s-6); text-align: center; }
.badges { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); text-align: left; margin-bottom: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--cream-dim); }
.badges li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: center; line-height: 1.3; }
.badges .ico { grid-row: span 2; width: 26px; height: 26px; stroke: var(--gold-dark); }
.badges strong { font-size: var(--t-body); font-weight: 700; }
.badges span { font-size: var(--t-caption); color: var(--muted); }
.price-block { margin-bottom: var(--s-6); }
.price-label { margin: 0px; font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* lining-nums e obrigatorio: o Playfair usa algarismos de estilo antigo por
   padrao, e "47,00" saia com o 4 e os zeros em alturas diferentes. Em preco
   isso le como erro, nao como estilo. */
.price { font-family: var(--font-title); font-size: var(--t-preco); font-weight: 700; line-height: 1; color: var(--navy); margin: 0.08em 0px 0.12em; font-variant-numeric: lining-nums; }
.price-cash { font-size: var(--t-body); font-weight: 600; color: var(--muted); margin: 0px 0px var(--s-4); }
.discount { display: inline-block; margin: 0px; padding: var(--s-2) var(--s-4); background: var(--navy); color: var(--gold); border-radius: var(--radius); font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.social-proof { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-5) 0px 0px; padding-top: var(--s-5); border-top: 1px solid var(--cream-dim); font-size: var(--t-body); font-weight: 600; color: var(--muted); text-align: left; }
.social-proof .ico { width: 22px; height: 22px; stroke: var(--gold-dark); }
.site-footer { background: var(--navy); color: var(--muted-light); padding: var(--s-10) 0px var(--s-12); text-align: center; font-size: var(--t-caption); border-top: 1px solid var(--gold-line-soft); }
.site-footer .logo { display: inline-block; margin-bottom: var(--s-4); }
.site-footer a { color: var(--cream); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); }
.site-footer .disclaimer { max-width: 46ch; margin-inline: auto; opacity: 0.7; font-size: var(--t-caption); }
@media (min-width: 640px) {
  /* h1/h2 agora sao clamp(): escalam sozinhos, sem override por breakpoint */
  .hero .btn-primary { width: auto; min-width: 300px; }
  .hero-note { justify-content: flex-start; }
  .strip-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); max-width: 900px; margin-inline: auto; }
  .strip-list li:last-child { grid-column: auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .therapy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
  .therapy-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
  .section { padding: var(--s-18) 0px; }
  .offer-card { padding: var(--s-10) var(--s-10); }
}
@media (min-width: 960px) {
  :root { --header-h: 74px; }
  .burger { display: none; }
  .nav { position: static; display: block; background: none; border: 0px; }
  .nav ul { display: flex; align-items: center; gap: var(--s-6); padding: 0px; }
  .nav li { border-top: 0px; }
  .nav a { padding: 0px; }
  .nav .nav-cta { margin-top: 0px; padding: var(--s-3) var(--s-6); }
  .hero { padding: calc(var(--header-h) + var(--s-16)) 0 var(--s-18); }
  .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-14); align-items: center; }
  .hero-media { margin: 0px; }
  .hero-media img { aspect-ratio: 4 / 5; object-fit: cover; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .includes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
  .teacher-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-12); }
  .stats { gap: var(--s-4); margin-top: var(--s-8); }
  .therapy-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sub-head { font-size: var(--t-lead); margin: var(--s-14) 0px var(--s-6); }
  .highlight-box { font-size: var(--t-lead); padding: var(--s-8) var(--s-8); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-14); align-items: center; }
  .section { padding: var(--s-22) 0px; }
  .btn-lg { display: inline-block; width: auto; min-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* ============================================================
   Estados de interacao
   A pagina nao tinha nenhum. Foco visivel nao e opcional: e o unico
   caminho de quem navega por teclado.
   ============================================================ */

.btn { transition: background-color .16s cubic-bezier(.22,1,.36,1), border-color .16s cubic-bezier(.22,1,.36,1), transform .08s ease-out; }

/* Hover so em quem tem hover de verdade. No celular o :hover "gruda"
   depois do toque e o botao fica com cara de pressionado ate o proximo
   toque em outro lugar. */
@media (hover: hover) {
  .btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
  .btn-outline:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
  .nav a:not(.nav-cta):hover { text-decoration: underline; text-underline-offset: 5px; }
  .nav-cta:hover { background: var(--gold-dark); color: var(--white); }
  .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* :active vale para os dois: e o feedback do toque */
.btn-primary:active { transform: translateY(1px); }
.btn-outline:active { transform: translateY(1px); }

/* Ponteiro grosso = dedo ou caneta. Vale em notebook com tela sensivel,
   nao so em celular: o tamanho do alvo depende do dedo, nao da tela. */
@media (pointer: coarse) {
  .nav a { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .site-footer a { min-height: 48px; }
  .burger { width: 48px; height: 48px; }
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.section-dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--cream); }

/* ============================================================
   Barra fixa de compra (mobile)
   Padrao escondida por transform, nunca por display: a barra existe
   no DOM mesmo sem JS ou em renderizacao headless.
   ============================================================ */

.barra-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--navy);
  border-top: 1px solid var(--gold-line);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.22,1,.36,1), visibility .28s;
}
body.cta-visivel .barra-cta { transform: translateY(0); visibility: visible; }

.barra-preco { display: flex; flex-direction: column; line-height: 1.2; }
.barra-preco strong { font-family: var(--font-title); font-size: var(--t-lead); font-weight: 700; color: var(--gold); font-variant-numeric: lining-nums; }
.barra-preco span { font-size: var(--t-caption); color: var(--muted-light); font-weight: 600; }
.barra-cta .btn { flex: 1; padding: var(--s-4) var(--s-5); font-size: var(--t-body); min-height: 52px; }

/* folga para a barra nao cobrir o fim do rodape */
.site-footer { padding-bottom: var(--s-24); }

@media (min-width: 960px) {
  .barra-cta { display: none; }
  .site-footer { padding-bottom: var(--s-12); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:active, .btn-outline:active { transform: none; }
  .barra-cta { transition: none; }
}