/* ============================================================
   app.css — enhance.css + site.css consolidados (ordem mantida)
   ============================================================ */

/* ===== enhance.css ===== */
/* =====================================================================
   enhance.css — Camada de melhorias visuais (V3 / V4)
   Carregada DEPOIS de styles.css. Mantém estrutura, ordem, copy e fluxo.
   Toda cor de marca passa por variáveis: V3 e V4 diferem só no :root.
   Fallbacks = paleta azul atual (V1), então sem :root vira "V4".
   ===================================================================== */

:root{
  --primary:        #0064D2;
  --primary-strong: #0257B5;
  --accent:         #0064D2;
  --accent-soft:    #5BA9D9;
  --primary-soft:   #E6F0FB;
  --surface:        #F2F5F8;
  --ink:            #1A2330;
  --ink-soft:       #5B6675;
  --line:           #E3E9EF;
  --amber:          #FBBF24;
  --wa:             #25D366;
  --wa-hover:       #1EBE5B;
  --cta-shadow:     0 100 210;   /* rgb p/ sombra do CTA */
}

/* ---------- Consumo da paleta (override dos utilitários de marca) ---- */
.bg-primary        { background-color: var(--primary); }
.bg-primary-soft   { background-color: var(--primary-soft); }
.text-primary      { color: var(--accent); }
.text-primary\/55  { color: color-mix(in srgb, var(--accent) 55%, transparent); }
.bg-primary\/95    { background-color: color-mix(in srgb, var(--primary) 95%, transparent); }
.ring-primary\/10  { --tw-ring-color: color-mix(in srgb, var(--primary) 14%, transparent); }
.text-amber-400    { color: var(--amber); }
.bg-surface        { background-color: var(--surface); }
.border-line       { border-color: var(--line); }
.ring-line         { --tw-ring-color: var(--line); }
.shadow-cta        { --tw-shadow: 0 10px 26px rgba(var(--cta-shadow), .30);
                     box-shadow: var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow); }
.eyebrow           { color: var(--accent); letter-spacing:.16em; }
.eyebrow.\!text-white{ color: rgba(255,255,255,.82); }

/* botões de marca */
.btn-primary       { background-color: var(--primary); color:#fff; }
.btn-primary:hover { background-color: var(--primary-strong); }
.btn-wa            { background-color: var(--wa); color:#fff; }
.btn-wa:hover      { background-color: var(--wa-hover); }

/* placeholder de foto — tom segue a paleta */
.ph{
  --tw-gradient-from: color-mix(in srgb, var(--accent-soft) 22%, #fff) var(--tw-gradient-from-position);
  --tw-gradient-to:   color-mix(in srgb, var(--accent-soft) 22%, #fff) var(--tw-gradient-to-position) ;
  background-image: linear-gradient(150deg,
      color-mix(in srgb, var(--accent-soft) 16%, #fff),
      color-mix(in srgb, var(--primary-soft) 80%, #fff));
  border:1px solid color-mix(in srgb, var(--accent-soft) 28%, #fff);
}
.ph-tag{ background: color-mix(in srgb, var(--primary) 8%, #fff); color: var(--accent); }

/* ---------- Tipografia mais firme -------------------------------- */
body{ color: var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3{ letter-spacing:-.018em; }
.text-ink      { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }

.h-hero{
  font-weight:700; line-height:1.04; letter-spacing:-.025em;
  font-size:clamp(2.1rem, 6.2vw, 3.5rem);
}
.h2-section{
  font-weight:700; line-height:1.08; letter-spacing:-.02em;
  font-size:clamp(1.65rem, 3.4vw, 2.6rem);
}

/* eyebrow vira "kicker" com traço */
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent);
}
.kicker::before{ content:""; width:1.6rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 25%, transparent)); }

/* head-accent dots → barrinha limpa */
.head-accent i{ display:none; }
.head-accent b{ display:block; width:2.4rem; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft)); }

/* ---------- Faixa de confiança (hero) ---------------------------- */
.trust-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.trust-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .85rem; border-radius:999px; background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
  font-size:.875rem; font-weight:500; color:var(--ink); white-space:nowrap;
}
.trust-pill svg{ width:1rem; height:1rem; color:var(--accent); flex:none; }
.trust-pill .stars{ color:var(--amber); letter-spacing:.02em; }
.trust-pill--price{
  background:color-mix(in srgb, var(--primary) 7%, #fff);
  border-color:color-mix(in srgb, var(--primary) 16%, #fff);
}
.trust-pill--price b{ color:var(--primary); font-weight:700; }
.trust-pill strong{ font-weight:700; }

/* preço junto à ação (Opção 3) — informativo, sem repetir benefício da subhead */
.price-micro{ display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.95rem; color:var(--ink-soft); }
.price-micro b{ color:var(--ink); font-weight:700; }
.price-micro svg{ width:1.05rem; height:1.05rem; color:var(--accent); flex:none; }

/* ---------- Barra de benefícios → chips ------------------------- */
.benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media(min-width:768px){ .benefit-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.benefit-chip{
  display:flex; align-items:center; gap:.7rem;
  min-height:4.75rem;
  padding:.85rem 1rem; border-radius:16px; background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(26,35,48,.04);
  font-weight:600; font-size:.9rem; color:var(--ink); line-height:1.2;
}
.benefit-ic{
  flex:none; width:2.1rem; height:2.1rem; border-radius:10px;
  display:grid; place-items:center;
  background:var(--primary-soft); color:var(--accent);
}
.benefit-ic svg{ width:1.05rem; height:1.05rem; }

/* ---------- Cards mais respiráveis ------------------------------ */
.card{ border-radius:22px; padding:1.6rem; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(26,35,48,.04), 0 14px 34px rgba(26,35,48,.06); }
.card blockquote{ font-size:1rem; line-height:1.55; color:var(--ink); }

/* card flutuante do hero */
.float-card{
  border-radius:18px; background:#fff; padding:1rem 1.1rem;
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(26,35,48,.16);
}

/* ---------- Passos (Como funciona) ------------------------------ */
.step-num{
  width:3rem; height:3rem; border-radius:999px; display:grid; place-items:center;
  font-weight:700; font-size:1.15rem; color:#fff; background:var(--primary);
  box-shadow:0 8px 18px rgba(var(--cta-shadow), .22);
}
.step-card h3{ font-weight:600; }

/* ---------- FAQ ------------------------------------------------- */
.faq-item{ border-radius:18px; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(26,35,48,.04), 0 10px 26px rgba(26,35,48,.05);
  transition:border-color .2s, box-shadow .2s; }
.faq-item[open]{ border-color:color-mix(in srgb,var(--accent) 35%, var(--line)); }
.faq-q{ font-weight:600; }
.faq-q span{ transition:transform .2s; }
.faq-item[open] .faq-q span{ transform:rotate(45deg); }

/* ---------- Bandas (experiência + cta final) -------------------- */
.brand-band{
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--accent-soft) 30%, transparent), transparent 55%),
    linear-gradient(160deg, var(--primary), var(--primary-strong));
}

/* ---------- Header / botões pílula ------------------------------ */
.header-cta{ box-shadow:0 6px 16px rgba(37,211,102,.30); }

/* experiência: opções e inputs */
.opt{ border:1px solid var(--line); font-weight:500; transition:border-color .15s, background .15s; }
.opt:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%, #fff); }

/* foco acessível */
.focus\:ring-secondary:focus{ --tw-ring-color: var(--accent); }

/* ---------- Hero: foto mais curta no mobile, 4:3 no desktop ------ */
.hero-photo{ aspect-ratio:16/9; }
@media(min-width:1024px){ .hero-photo{ aspect-ratio:4/3; } }

/* ---------- Overlay da experiência: scroll seguro em telas baixas --- */
/* (o styles.css do usuário não compila overflow-y-auto; garantimos aqui) */
#exp{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* ---------- Mobile: hero enxuto -------------------------------- */
@media(max-width:1023px){
  .hero-photo-wrap{ margin-top:1.4rem; }
}

/* ===== site.css ===== */
/* =====================================================================
   site.css — Utilitários de layout do template original + paleta V3 NAVY
   Carregado DEPOIS de enhance.css para sobrescrever o :root (V4 → V3).
   ===================================================================== */

/* ---------- PALETA V3 — NAVY (#16324F) — override final ---------- */
:root{
  --primary:#16324F; --primary-strong:#0F2638;
  --accent:#2C6CA6;  --accent-soft:#5BA9D9;
  --primary-soft:#E7EEF5; --surface:#F4F7FB;
  --ink:#14212E; --ink-soft:#5B6675; --line:#E2E8EF;
  --wa:#25D366; --wa-hover:#1EBE5B; --cta-shadow:22 50 79;
}

/* ---------- Container ---------- */
.container-wide{
  width:100%;
  max-width:72rem;            /* ~1152px */
  margin-left:auto; margin-right:auto;
  padding-left:1.25rem; padding-right:1.25rem;
}
@media (min-width:1024px){
  .container-wide{ padding-left:2rem; padding-right:2rem; }
}

/* ---------- Section spacing ---------- */
.section{ padding-top:3.5rem; padding-bottom:3.5rem; }
@media (min-width:768px){ .section{ padding-top:5rem; padding-bottom:5rem; } }

.eyebrow{ display:inline-block; font-size:.75rem; line-height:1rem;
  text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--accent); }
.eyebrow.\!text-white{ color:rgba(255,255,255,.82); }

.section-head{ max-width:42rem; margin-left:auto; margin-right:auto; text-align:center; }
.head-accent{ margin:1rem auto 1.25rem; display:flex; align-items:center; justify-content:center; gap:.375rem; }
.section-head .head-accent{ display:flex; margin-top:.9rem; }

/* ---------- Border radius extra ---------- */
.rounded-xl2{ border-radius:22px; }

/* ---------- Shadows ---------- */
.shadow-card{
  box-shadow:0 1px 2px rgba(26,35,48,.04), 0 14px 34px rgba(26,35,48,.06);
}

/* ---------- Botões base ---------- */
.btn, .btn-wa, .btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  min-height:52px;
  padding:.85rem 1.5rem;
  border-radius:14px;
  font-weight:600; font-size:1rem; line-height:1;
  text-decoration:none;
  transition:background-color .15s, color .15s, border-color .15s, box-shadow .15s;
  cursor:pointer;
}
.btn-block{ width:100%; }

.btn-ghost{
  background:#fff;
  color:var(--primary);             /* texto na cor primária (navy) */
  border:1px solid var(--line);
}
.btn-ghost:hover{ background:var(--surface); border-color:var(--accent); }

/* Sombra verde: APENAS no botão do header */
.btn-wa{ box-shadow:none; }
.btn-wa:hover{ box-shadow:none; }
.header-cta{ box-shadow:0 6px 16px rgba(37,211,102,.30); }

/* Ícone do preço (carteira) na mesma cor do texto */
.price-micro svg{ color: var(--ink-soft); }

/* =====================================================================
   Canônico v3-navy / enhance.css — overrides finais para porte 1:1
   ===================================================================== */

/* Títulos */
.h-hero{ font-weight:700; line-height:1.04; letter-spacing:-.025em; font-size:clamp(2.1rem,6.2vw,3.5rem); }
.h2-section{ font-weight:700; line-height:1.08; letter-spacing:-.02em; font-size:clamp(1.65rem,3.4vw,2.6rem); text-wrap:balance; }

/* Kicker com traço */
.kicker{ display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--accent); }
.kicker::before{ content:""; width:1.6rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent)); }

/* Barrinha sob título centralizado */
.head-accent i{ display:none; }
.head-accent b{ display:block; width:2.4rem; height:3px; border-radius:3px; margin:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft)); }

/* Pílula de confiança (hero) */
.trust-pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .85rem;
  border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:none;
  font-size:.875rem; font-weight:500; color:var(--ink); white-space:nowrap; }
.trust-pill .stars{ color:var(--amber); }

/* Preço junto à ação */
.price-micro{ display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.95rem; color:var(--ink-soft); }
.price-micro b{ color:var(--ink); font-weight:700; }
.price-micro svg{ width:1.05rem; height:1.05rem; color:var(--accent); flex:none; }

/* Trust pill icon (canônico) */
.trust-pill svg{ width:1rem; height:1rem; color:var(--accent); flex:none; }
.trust-pill--price{ background:color-mix(in srgb,var(--primary) 7%,#fff);
  border-color:color-mix(in srgb,var(--primary) 16%,#fff); }
.trust-pill--price b{ color:var(--primary); font-weight:700; }

/* Benefícios */
.benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media(min-width:768px){ .benefit-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.benefit-chip{ display:flex; align-items:center; gap:.7rem; min-height:4.75rem; padding:.85rem 1rem;
  border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(26,35,48,.04);
  font-weight:600; font-size:.9rem; color:var(--ink); line-height:1.2; }
.benefit-ic{ flex:none; width:2.1rem; height:2.1rem; border-radius:10px; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--accent); }
.benefit-ic svg{ width:1.05rem; height:1.05rem; }

/* Cards */
.card{ background:#fff; border-radius:22px; padding:1.6rem; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(26,35,48,.04), 0 14px 34px rgba(26,35,48,.06); }
.card blockquote{ font-size:1rem; line-height:1.55; color:var(--ink); }
.float-card{ width:16rem; max-width:16rem; border-radius:18px; background:#fff; padding:1rem 1.1rem; border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(26,35,48,.16); }

/* Passos */
.step-num{ width:3rem; height:3rem; border-radius:999px; display:grid; place-items:center;
  font-weight:700; font-size:1.15rem; color:#fff; background:var(--primary);
  box-shadow:0 8px 18px rgba(var(--cta-shadow),.22); }
.step-card h3{ font-weight:600; }

/* FAQ */
.faq-item{ border-radius:18px; background:#fff; border:1px solid var(--line); padding:0 1.25rem;
  box-shadow:0 1px 2px rgba(26,35,48,.04), 0 10px 26px rgba(26,35,48,.05);
  transition:border-color .2s, box-shadow .2s; }
.faq-item[open]{ border-color:color-mix(in srgb,var(--accent) 35%, var(--line)); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-q span{ color:var(--accent); transition:transform .2s; }
.faq-item[open] .faq-q span{ transform:rotate(45deg); }

/* Bandas navy */
.brand-band{ background:
  radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--accent-soft) 30%, transparent), transparent 55%),
  linear-gradient(160deg, var(--primary), var(--primary-strong)); }

/* Tipografia base canônica (enhance.css) */
body{ color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3{ letter-spacing:-.018em; text-wrap:balance; }

/* Hero: foto mais curta no mobile, 4:3 no desktop */
.hero-photo{ aspect-ratio:16/9; }
@media(min-width:1024px){ .hero-photo{ aspect-ratio:4/3; } }
@media(max-width:1023px){ .hero-photo-wrap{ margin-top:1.4rem; } }

/* Experiência: opções e foco acessível (canônico) */
.opt{ border:1px solid var(--line); font-weight:500; transition:border-color .15s, background .15s; }
.opt:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,#fff); }
.focus\:ring-secondary:focus{ --tw-ring-color:var(--accent); }





/* ---------- Prose para artigos do blog (/dicas) ---------- */
.dicas-prose{ color:var(--ink); font-size:1.0625rem; line-height:1.7; }
.dicas-prose > * + *{ margin-top:1.1em; }
.dicas-prose h2{ font-size:1.5rem; font-weight:700; color:var(--primary-strong); margin-top:2em; letter-spacing:-.01em; }
.dicas-prose h3{ font-size:1.2rem; font-weight:700; color:var(--primary-strong); margin-top:1.6em; }
.dicas-prose p{ color:var(--ink); }
.dicas-prose a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
.dicas-prose a:hover{ color:var(--primary-strong); }
.dicas-prose ul, .dicas-prose ol{ padding-left:1.4em; }
.dicas-prose ul{ list-style:disc; }
.dicas-prose ol{ list-style:decimal; }
.dicas-prose li + li{ margin-top:.4em; }
.dicas-prose blockquote{ border-left:3px solid var(--accent); padding:.5em 1em; color:var(--ink-soft); background:var(--surface); border-radius:0 8px 8px 0; }
.dicas-prose strong{ color:var(--primary-strong); }
.dicas-prose img{ border-radius:12px; }