/* ============================================================
   PÁGINA DE VENDAS — versão B: DESIGN SYSTEM DA MARCA
   Guia de Conduta na Fratura Operada (R$97)

   Mesmo conteúdo e mesmos 14 blocos da versão A (guia-fixacao-lp/),
   montados no sistema da MARCA: abyss/azure/coral, Lato + Manrope,
   pill 999px, vidro sobre imagem.

   Existe para comparação lado a lado — a Caroline escolhe.
   Regras seguidas do DESIGN.md: pill em botão/tag, vidro só sobre imagem,
   coral no máximo uma vez por tela, sem emoji, sem ícone inventado.
   ============================================================ */

* { box-sizing: border-box; }
body { margin:0; background:var(--bg-page); color:var(--text-primary);
       font-family:var(--font-body); -webkit-font-smoothing:antialiased; }

.sec { padding:96px 24px; position:relative; }
.sec-deep { background:var(--abyss-950); }
.sec-base { background:var(--bg-page); }
.sec-up   { background:var(--abyss-800); }
/* seção clara: usa o .theme-light do proprio Design System (#F1F5FA — cinza
   azulado, nunca branco puro). As variaveis semanticas fazem o resto sozinhas:
   texto, bordas, superficies e o acento (que vira azure-700, mais escuro). */
.sec-claro { background:var(--bg-page); }
.in { max-width:1180px; margin:0 auto; position:relative; }
.in-narrow { max-width:760px; }

/* ---- tipografia ---- */
.eyebrow { font-family:var(--font-mono); font-size:var(--size-caption); letter-spacing:var(--ls-caps);
           text-transform:uppercase; color:var(--accent-primary); display:block; }
h1.hero { font-family:var(--font-display); font-weight:700; font-size:var(--size-display-2);
          line-height:var(--lh-tight); letter-spacing:var(--ls-display);
          color:var(--text-primary); margin:22px 0 0; }
h1.hero em { font-style:normal; color:var(--accent-primary); }
h2.sec-t { font-family:var(--font-display); font-weight:700; font-size:var(--size-h1);
           line-height:var(--lh-snug); letter-spacing:var(--ls-display);
           color:var(--text-primary); margin:14px 0 0; }
h3.blk { font-family:var(--font-display); font-weight:700; font-size:var(--size-h3);
         line-height:var(--lh-snug); color:var(--text-primary); margin:0; }
p.t { font-size:var(--size-body-lg); line-height:var(--lh-normal); color:var(--text-secondary); margin:18px 0 0; }
p.t strong { color:var(--text-primary); }
p.t.big { font-size:1.28rem; }

/* ---- bloco 1 ---- */
.hero-wrap { position:relative; min-height:660px; display:flex; align-items:center;
             padding:96px 24px; overflow:hidden; background:var(--abyss-950); }

/* A radiografia entra como FIGURA a direita, nao como fundo esticado.
   Ela tem 1383x2074: em faixa de ~620px ela e REDUZIDA, nunca ampliada —
   e imagem reduzida fica nitida. Ampliar alem do nativo foi o que borrou. */
.hero-bg { position:absolute; top:0; right:0; bottom:0; width:min(56%,760px); }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:52% 56%;
               opacity:.85; filter:contrast(1.16) brightness(1.06); }
/* fade na borda esquerda: a figura se dissolve no navy em vez de recortar */
.hero-bg::after { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--abyss-950) 0%, rgba(5,12,24,.92) 22%, rgba(5,12,24,.28) 62%, rgba(5,12,24,.55) 100%),
             linear-gradient(180deg, rgba(5,12,24,.55) 0%, rgba(5,12,24,0) 26%, rgba(5,12,24,.5) 100%); }

/* painel de vidro — assinatura da marca, e aqui ha imagem por baixo (DESIGN.md) */
.glass { background:var(--bg-glass); border:1px solid var(--border-default);
         border-radius:var(--radius-lg); backdrop-filter:blur(var(--blur-glass));
         box-shadow:var(--shadow-glass); padding:44px; }
.hero-sub { font-size:1.18rem; line-height:var(--lh-normal); color:var(--text-secondary); margin-top:22px; max-width:52ch; }
.chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.chip { font-family:var(--font-mono); font-size:var(--size-caption); letter-spacing:.1em;
        text-transform:uppercase; color:var(--accent-primary);
        border:1px solid rgba(127,200,245,.32); background:rgba(127,200,245,.09);
        border-radius:var(--radius-pill); padding:8px 15px; }
@media (max-width:820px) {
  .hero-bg { width:100%; }
  .hero-bg::after { background:linear-gradient(180deg, rgba(5,12,24,.72) 0%, rgba(5,12,24,.88) 60%, var(--abyss-950) 100%); }
}

/* ---- checklist de dor ---- */
.dor { list-style:none; padding:0; margin:28px 0 0; }
.dor li { display:flex; gap:15px; align-items:flex-start; padding:17px 0;
          border-bottom:1px solid var(--border-default); }
.dor li .mk { color:var(--accent-primary); font-family:var(--font-mono); font-size:var(--size-mono); flex:none; margin-top:4px; }
.dor li span { font-size:1.06rem; line-height:var(--lh-normal); color:var(--text-secondary); }

/* ---- passos ---- */
.passos { display:grid; gap:22px; margin-top:38px; }
@media (min-width:820px) { .passos { grid-template-columns:repeat(3,1fr); } }
.card { background:var(--bg-surface); border:1px solid var(--border-default);
        border-radius:var(--radius-lg); padding:28px; }
.card .n { font-family:var(--font-mono); font-size:var(--size-caption); letter-spacing:var(--ls-caps);
           color:var(--accent-primary); }
.card h4 { font-family:var(--font-display); font-weight:700; font-size:var(--size-h4);
           color:var(--text-primary); margin:12px 0 0; line-height:var(--lh-snug); }
.card p { font-size:var(--size-body); line-height:var(--lh-normal); color:var(--text-secondary); margin:11px 0 0; }

/* ---- entregáveis ---- */
.itens { display:grid; gap:24px; margin-top:38px; }
@media (min-width:780px) { .itens { grid-template-columns:repeat(2,1fr); } }
.item { display:flex; gap:20px; align-items:flex-start; background:var(--bg-surface);
        border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:22px; }
.item img { width:118px; flex:none; border-radius:var(--radius-sm);
            box-shadow:0 16px 40px -16px rgba(0,0,0,.8); }
/* o selo se sobrepoe ao canto da capa, como um selo de verdade */
.item { position:relative; }
/* sobre a capa preta o azure some: o selo do card inverte — disco claro,
   marca escura — e ganha um anel do fundo para descolar da arte */
.selo-isbn.selo-card { position:absolute; left:92px; top:12px; width:54px; height:54px;
                       border-radius:999px;
                       box-shadow:0 0 0 3px var(--bg-surface), 0 6px 18px -6px rgba(0,0,0,.9); }
.badge { font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
         color:var(--text-on-accent); background:var(--accent-primary);
         border-radius:var(--radius-pill); padding:4px 11px; display:inline-block; }
.badge.selo { background:transparent; color:var(--accent-primary);
              border:1px solid rgba(127,200,245,.42); margin-left:6px; }
.item h4 { font-family:var(--font-display); font-weight:700; font-size:var(--size-h4);
           color:var(--text-primary); margin:11px 0 0; line-height:var(--lh-snug); }
.item p { font-size:var(--size-body-sm); line-height:var(--lh-normal); color:var(--text-secondary); margin:9px 0 0; }
.transicao { text-align:center; margin:56px 0 0; font-family:var(--font-display); font-weight:700;
             font-size:var(--size-h2); color:var(--accent-primary); line-height:var(--lh-snug); }

/* ---- ancoragem ---- */
.anc { list-style:none; padding:0; margin:30px 0 0; }
.anc li { display:flex; justify-content:space-between; gap:16px; padding:14px 0;
          border-bottom:1px solid var(--border-default); font-size:var(--size-body); }
.anc li b { font-weight:700; color:var(--text-primary); display:inline-flex;
            align-items:center; gap:10px; }
/* Selo oficial do ISBN (CBL). Logo institucional nao se recolore — entra como
   e, e ganha um anel claro para nao se fundir com o navy do fundo. */
.selo-isbn { width:46px; height:46px; flex:none; border-radius:999px;
             box-shadow:0 0 0 2px rgba(234,242,250,.22); }
.anc li .v { font-family:var(--font-mono); font-size:var(--size-mono); color:var(--text-muted); white-space:nowrap; }
.anc-total { display:flex; justify-content:space-between; gap:16px; padding:20px 0 0;
             font-family:var(--font-display); font-weight:700; font-size:var(--size-h3); color:var(--text-primary); }
.anc-total .v { text-decoration:line-through; color:var(--text-muted); }

/* ---- oferta ---- */
.oferta { text-align:center; }
/* o Tudao ja traz sombra propria e fundo transparente: sem borda, sem caixa */
.tudao { max-width:760px; width:100%; margin:0 auto 30px; display:block; }
.preco-de { font-family:var(--font-mono); font-size:var(--size-mono); letter-spacing:.1em;
            text-transform:uppercase; color:var(--text-muted); text-decoration:line-through; }
.preco { font-family:var(--font-display); font-weight:900; font-size:var(--size-display-2);
         line-height:1; color:var(--text-primary); margin:10px 0 0; letter-spacing:var(--ls-display); }
.preco span { color:var(--accent-primary); }
.preco small { display:block; font-family:var(--font-body); font-weight:400; font-size:var(--size-body);
               color:var(--text-secondary); margin-top:14px; letter-spacing:0; }
/* CTA: azure com glow — o padrão da marca. Pill é a assinatura de forma */
.btn { display:inline-block; margin-top:32px; padding:20px 46px; border-radius:var(--radius-pill);
       background:var(--accent-primary); color:var(--text-on-accent);
       font-family:var(--font-body); font-weight:800; font-size:1.06rem; text-decoration:none;
       box-shadow:var(--glow-accent); }
.btn-note { font-family:var(--font-mono); font-size:var(--size-caption); letter-spacing:.1em;
            text-transform:uppercase; color:var(--text-muted); margin-top:18px; }
/* coral: um uso por tela, na escassez */
.urgencia { display:inline-block; margin-bottom:22px; font-family:var(--font-mono);
            font-size:var(--size-caption); letter-spacing:var(--ls-caps); text-transform:uppercase;
            color:var(--accent-critical); border:1px solid rgba(217,74,62,.42);
            border-radius:var(--radius-pill); padding:8px 16px; }

/* ---- conversa séria ---- */
.conversa p { font-size:1.1rem; line-height:var(--lh-loose); color:var(--text-secondary); margin:20px 0 0; }
.conversa strong { color:var(--accent-primary); }

/* ---- autoridade ---- */
.aut { display:grid; gap:38px; align-items:center; margin-top:20px; }
@media (min-width:860px) { .aut { grid-template-columns:0.8fr 1.2fr; } }
.aut img { width:100%; border-radius:var(--radius-lg); filter:grayscale(.4) contrast(1.04); }
.credenciais { list-style:none; padding:0; margin:24px 0 0; }
.credenciais li { font-size:var(--size-body); line-height:var(--lh-normal); color:var(--text-secondary);
                  padding-left:24px; position:relative; margin-top:10px; }
.credenciais li::before { content:''; position:absolute; left:0; top:11px; width:11px; height:1px;
                          background:var(--accent-primary); }

/* ---- faq ---- */
.faq { margin-top:32px; }
.faq details { border:1px solid var(--border-default); border-radius:var(--radius-lg);
               padding:20px 24px; margin-top:12px; background:var(--bg-surface); }
.faq summary { font-family:var(--font-display); font-weight:700; font-size:var(--size-h4);
               color:var(--text-primary); cursor:pointer; list-style:none;
               display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--accent-primary); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after { content:'−'; }
.faq p { font-size:var(--size-body); line-height:var(--lh-normal); color:var(--text-secondary); margin:14px 0 0; }

/* ---- rodapé ---- */
.rodape { background:var(--abyss-950); padding:56px 24px; text-align:center;
          border-top:1px solid var(--border-default); }
.rodape .marca { font-family:var(--font-display); font-weight:700; font-size:var(--size-h3); color:var(--text-primary); }
.rodape p { font-size:var(--size-body-sm); color:var(--text-muted); margin:10px 0 0; line-height:1.9; }

/* ---- pendências (só na prévia) ---- */
.todo { outline:2px dashed var(--accent-critical); outline-offset:6px; position:relative; }
.todo::after { content:attr(data-todo); position:absolute; top:-14px; left:0;
               font-family:var(--font-mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
               background:var(--accent-critical); color:#fff; padding:2px 9px; border-radius:var(--radius-pill); }
body.limpo .todo { outline:none; }
body.limpo .todo::after { display:none; }
body.limpo .oculto { display:none !important; }