/* ==========================================================================
   DR. HUDSON — DESIGN SYSTEM (fonte única de verdade)
   Reutilizado por todos os materiais do kit comercial.
   Editar aqui atualiza a identidade em todas as peças.
   ========================================================================== */

/* Fontes 100% offline — nenhuma dependência externa.
   Serifada sofisticada (Palatino) para títulos · Sans limpa (Segoe UI) para texto.
   Fallbacks cobrem Windows, macOS e Linux. */

/* --------------------------------------------------------------------------
   1. TOKENS — Paleta oficial
   -------------------------------------------------------------------------- */
:root{
  /* Cores principais */
  --azul-petroleo:#173F4F;   /* cor principal */
  --off-white:#F7F6F3;       /* fundo editorial */
  --grafite:#2B2B2B;         /* texto */
  --champagne:#C6A86A;       /* detalhes / fios / autoridade */
  --cinza-claro:#D9D9D9;     /* linhas, divisórias */

  /* Acentos temáticos (uso restrito) */
  --verde-salvia:#7A8F83;    /* apenas conteúdos regenerativos */
  --bordo:#6B2433;           /* apenas conteúdos científicos/anatômicos */

  /* Derivados */
  --petroleo-90:rgba(23,63,79,.90);
  --petroleo-08:rgba(23,63,79,.08);
  --petroleo-04:rgba(23,63,79,.045);
  --champagne-linha:rgba(198,168,106,.55);
  --papel:#FBFAF8;

  /* Tipografia — stacks offline */
  --serif:'Palatino Linotype','Book Antiqua',Palatino,'Palatino LT STD',Georgia,'Times New Roman',serif;
  --sans:'Segoe UI','Segoe UI Variable',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;

  /* Escala de espaçamento (base 8) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px;

  /* Grid editorial */
  --medida:720px;            /* largura de coluna de leitura */
  --pagina:210mm;            /* A4 */
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--sans);
  color:var(--grafite);
  background:var(--off-white);
  line-height:1.65;
  font-weight:300;
  letter-spacing:.01em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--azul-petroleo);line-height:1.12}
.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(44px,7vw,84px);
  letter-spacing:-.01em;
  line-height:1.02;
}
h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:clamp(20px,2.4vw,26px)}
h4{font-size:19px}

.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--champagne);
}
.kicker{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--azul-petroleo);
  opacity:.6;
}
.lead{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(20px,2.4vw,26px);
  line-height:1.5;
  color:var(--azul-petroleo);
}
p{margin-bottom:1.1em;max-width:var(--medida)}
p.wide{max-width:none}
strong{font-weight:500;color:var(--azul-petroleo)}
em{font-style:italic}
small{font-size:12.5px;letter-spacing:.02em}

.serif{font-family:var(--serif)}
.center{text-align:center}
.muted{color:rgba(43,43,43,.62)}

/* --------------------------------------------------------------------------
   4. MARCA / LOGO
   -------------------------------------------------------------------------- */
.brand{display:inline-flex;align-items:center;gap:14px}
.brand__mark{width:44px;height:44px;flex:none;color:var(--azul-petroleo)}
.brand--light .brand__mark{color:var(--off-white)}
.brand__mark svg{width:100%;height:100%;display:block}
.brand__word{line-height:1}
.brand__word .top{
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:.02em;
  color:var(--azul-petroleo);
  display:block;
}
.brand__word .sub{
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--champagne);
  display:block;
  margin-top:3px;
}
.brand--light .top{color:var(--off-white)}
.brand--light .sub{color:var(--champagne)}

/* Monograma solto */
.monogram{width:64px;height:64px}
.monogram svg{width:100%;height:100%}

/* --------------------------------------------------------------------------
   5. LAYOUT — Página editorial (A4)
   -------------------------------------------------------------------------- */
.page{
  width:var(--pagina);
  min-height:297mm;
  margin:24px auto;
  background:var(--papel);
  padding:26mm 24mm;
  position:relative;
  box-shadow:0 6px 40px rgba(23,63,79,.10);
  display:flex;
  flex-direction:column;
}
.page--dark{background:var(--azul-petroleo);color:var(--off-white)}
.page--dark h1,.page--dark h2,.page--dark h3{color:var(--off-white)}
.page--dark .lead{color:rgba(247,246,243,.85)}
.page--dark p{color:rgba(247,246,243,.78)}

.page__num{
  position:absolute;bottom:14mm;right:24mm;
  font-size:11px;letter-spacing:.3em;color:var(--champagne);
}
.page__foot{
  position:absolute;bottom:14mm;left:24mm;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(43,43,43,.4);
}
.page--dark .page__foot{color:rgba(247,246,243,.4)}

.stack>*+*{margin-top:var(--s3)}
.flow>*+*{margin-top:1.15em}
.spacer{flex:1}

/* Container fluido (para telas, não impressão) */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--s4)}
.section{padding:var(--s7) 0}

/* --------------------------------------------------------------------------
   6. FIOS E DIVISÓRIAS
   -------------------------------------------------------------------------- */
.rule{border:0;border-top:1px solid var(--cinza-claro);margin:var(--s3) 0}
.rule--gold{border-top:1px solid var(--champagne-linha)}
.rule--short{width:56px;border-top:1.5px solid var(--champagne);margin:var(--s2) 0}
.rule--center{margin-left:auto;margin-right:auto}
.hair{height:1px;background:var(--cinza-claro)}

/* --------------------------------------------------------------------------
   7. GRID UTILIT.
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-3{grid-template-columns:2fr 3fr}
.g-1-2{grid-template-columns:1fr 2fr}
.items-center{align-items:center}
.between{display:flex;justify-content:space-between;align-items:baseline}
.row{display:flex;gap:var(--s3);align-items:center}

/* --------------------------------------------------------------------------
   8. COMPONENTES — Tabela de tratamentos (não parecer tabela de preço)
   -------------------------------------------------------------------------- */
.menu{margin:var(--s3) 0}
.menu__cat{
  font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:var(--s2);
}
.tier{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:var(--s3);padding:15px 0;
  border-bottom:1px solid var(--petroleo-08);
}
.tier__name{font-family:var(--serif);font-size:22px;color:var(--azul-petroleo)}
.tier__desc{display:block;font-family:var(--sans);font-size:12.5px;color:rgba(43,43,43,.6);margin-top:3px;max-width:46ch}
.tier__price{
  font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:.04em;
  color:var(--grafite);white-space:nowrap;
}
.tier__price .from{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);display:block;text-align:right}
.tier__pix{display:block;text-align:right;font-size:11px;letter-spacing:.04em;color:var(--champagne);margin-top:4px;text-transform:none}

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--petroleo-08);
  padding:var(--s4);position:relative;
}
.card--pad-lg{padding:var(--s5)}
.card__label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--champagne);margin-bottom:var(--s2)}
.card__num{font-family:var(--serif);font-size:40px;color:var(--petroleo-08);line-height:1;position:absolute;top:20px;right:24px}

/* Bloco de dado / número editorial */
.stat{border-left:2px solid var(--champagne);padding-left:var(--s3)}
.stat__n{font-family:var(--serif);font-size:52px;color:var(--azul-petroleo);line-height:1}
.stat__l{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(43,43,43,.6);margin-top:6px}

/* --------------------------------------------------------------------------
   10. FLUXO / JORNADA (fluxograma elegante)
   -------------------------------------------------------------------------- */
.flow-steps{counter-reset:step;display:grid;gap:0}
.flow-step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--petroleo-08);position:relative;
}
.flow-step:last-child{border-bottom:1px solid var(--petroleo-08)}
.flow-step__n{
  counter-increment:step;
  font-family:var(--serif);font-size:15px;color:var(--champagne);
  width:44px;height:44px;border:1px solid var(--champagne-linha);border-radius:50%;
  display:grid;place-items:center;
}
.flow-step__n::before{content:counter(step,decimal-leading-zero)}
.flow-step h4{margin-bottom:4px}
.flow-step p{margin:0;font-size:14px;color:rgba(43,43,43,.66)}

/* --------------------------------------------------------------------------
   11. PILL / TAG / BADGE
   -------------------------------------------------------------------------- */
.tag{
  display:inline-block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  padding:5px 14px;border:1px solid var(--champagne-linha);color:var(--azul-petroleo);
  border-radius:100px;
}
.tag--salvia{border-color:var(--verde-salvia);color:var(--verde-salvia)}
.tag--bordo{border-color:var(--bordo);color:var(--bordo)}

/* --------------------------------------------------------------------------
   12. FAQ / Q&A
   -------------------------------------------------------------------------- */
.qa{border-top:1px solid var(--petroleo-08);padding:var(--s3) 0}
.qa__q{font-family:var(--serif);font-size:21px;color:var(--azul-petroleo);margin-bottom:8px}
.qa__a{font-size:14.5px;color:rgba(43,43,43,.72);max-width:var(--medida)}

/* --------------------------------------------------------------------------
   13. TABELAS (simulador financeiro / etc.)
   -------------------------------------------------------------------------- */
table.doc{width:100%;border-collapse:collapse;font-size:13.5px}
table.doc th{
  text-align:left;font-family:var(--sans);font-weight:400;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);
  padding:12px 14px;border-bottom:1.5px solid var(--champagne-linha);
}
table.doc td{padding:12px 14px;border-bottom:1px solid var(--petroleo-08);color:var(--grafite)}
table.doc td:last-child,table.doc th:last-child{text-align:right}
table.doc tr:hover td{background:var(--petroleo-04)}
table.doc .total td{font-weight:500;color:var(--azul-petroleo);border-bottom:none;border-top:1.5px solid var(--champagne-linha)}

/* --------------------------------------------------------------------------
   14. CHECKLIST
   -------------------------------------------------------------------------- */
.check{list-style:none;display:grid;gap:2px}
.check li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--petroleo-08);font-size:14.5px;
}
.check .box{width:18px;height:18px;border:1.5px solid var(--champagne);margin-top:2px;flex:none}
.check strong{display:block;font-weight:500}
.check span{color:rgba(43,43,43,.6);font-size:13px}

/* --------------------------------------------------------------------------
   15. CAMPOS DE FORMULÁRIO (dossiê / cadastro impresso)
   -------------------------------------------------------------------------- */
.field{margin-bottom:var(--s3)}
.field__l{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne);display:block;margin-bottom:10px}
.field__line{border-bottom:1px solid var(--cinza-claro);height:26px}
.field__box{border:1px solid var(--cinza-claro);min-height:80px;padding:12px}

/* --------------------------------------------------------------------------
   16. QUOTE / DEPOIMENTO
   -------------------------------------------------------------------------- */
.quote{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,30px);line-height:1.4;color:var(--azul-petroleo)}
.quote__mark{font-family:var(--serif);font-size:64px;color:var(--champagne);line-height:.5;display:block;height:32px}
.quote__by{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(43,43,43,.5);margin-top:var(--s3)}

/* --------------------------------------------------------------------------
   17. HERO / CAPA
   -------------------------------------------------------------------------- */
.cover{
  min-height:245mm;display:flex;flex-direction:column;justify-content:space-between;
}
.cover__center{flex:1;display:flex;flex-direction:column;justify-content:center}

/* --------------------------------------------------------------------------
   18. HUB / ÍNDICE (index.html)
   -------------------------------------------------------------------------- */
.hub-card{
  display:block;background:#fff;border:1px solid var(--petroleo-08);
  padding:var(--s4);transition:.35s;position:relative;overflow:hidden;
}
.hub-card:hover{border-color:var(--champagne);transform:translateY(-3px);box-shadow:0 12px 34px rgba(23,63,79,.10)}
.hub-card__n{font-family:var(--serif);font-size:14px;color:var(--champagne)}
.hub-card h3{margin:14px 0 8px}
.hub-card p{font-size:13px;color:rgba(43,43,43,.6);margin:0}

/* --------------------------------------------------------------------------
   19. NAV utilit. (topo dos documentos em tela)
   -------------------------------------------------------------------------- */
.docnav{
  position:sticky;top:0;z-index:10;background:var(--petroleo-90);backdrop-filter:blur(6px);
  color:var(--off-white);padding:14px var(--s4);display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.docnav a{color:var(--champagne)}
@media print{.docnav{display:none}}

/* --------------------------------------------------------------------------
   20. RESPONSIVO (mobile-first safeguards)
   -------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}            /* evita zoom automático de texto no iOS */
img{height:auto}                                /* imagens nunca distorcem/cortam */

@media (max-width:900px){
  .g2,.g3,.g4,.g-2-3,.g-1-2{grid-template-columns:1fr}
  .page{width:100%;padding:28px 20px;margin:0;min-height:auto;box-shadow:none}
  .docnav{padding:12px 20px;font-size:11px}
  .page__num,.page__foot{position:static;text-align:left;margin-top:var(--s3)}
}

@media (max-width:640px){
  /* tabelas roláveis horizontalmente, sem estourar a tela */
  table.doc{display:block;width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  /* tiers de preço empilham nome/valor */
  .tier{grid-template-columns:1fr;gap:6px}
  .tier__price,.tier__pix{text-align:left}
  /* alvos de toque confortáveis */
  a.linkrow,.chip,.hub-card{min-height:44px}
  .chip{padding:12px 16px}
  .display{font-size:clamp(38px,11vw,60px)}
  h1{font-size:clamp(30px,8vw,44px)}
  .lead{font-size:clamp(18px,4.6vw,22px)}
  .wrap{padding:0 20px}
  .section{padding:var(--s6) 0}
}

/* --------------------------------------------------------------------------
   21. IMPRESSÃO / PDF
   -------------------------------------------------------------------------- */
@media print{
  /* Força a impressão das cores/fundos (petróleo, champagne, gradientes) */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html,body{background:#fff}
  .page{
    margin:0;box-shadow:none;width:210mm;min-height:auto;
    page-break-after:always;break-after:page;overflow:hidden;
  }
  .page:last-child{page-break-after:auto;break-after:auto}
  .page--dark{background:var(--azul-petroleo) !important}
  /* evita quebrar cards/tiers no meio da página */
  .card,.tier,.qa,.flow-step,.mod,.kpi{break-inside:avoid}
  img,video{max-width:100%}
  @page{size:A4;margin:0}
}
/* garante fundo exato também fora do @media (Safari/impressão via compartilhar) */
:root{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }