/* ============================================================
   TOKENS — versão clara: papel/marfim + verniz âmbar,
   como madeira clara recém-envernizada sob luz de estúdio.
   ============================================================ */
:root{
  --bg:            #edeee5;   /* papel/marfim claro */
  --bg-panel:      #ffffff;   /* painel / card */
  --bg-panel-2:    #f3ead9;   /* painel elevado (hover, círculos da timeline) */
  --border:        rgba(36,28,14,0.10);
  --border-strong: rgba(36,28,14,0.20);

  --ink:           #241d12;   /* texto principal, "castanho quase-preto" */
  --ink-dim:       #5b5142;   /* texto secundário */
  --ink-faint:     #8c8271;   /* texto terciário / legendas */

  --varnish:       #b5722a;   /* verniz âmbar — cor de assinatura */
  --varnish-light: #8b7258;   /* variante escura, para texto sobre claro */
  --varnish-dim:   #f4e2c4;   /* tinta de fundo suave */

  --lacquer:       #93331f;   /* laca vermelha — Atenção */
  --lacquer-dim:   #f6e0da;

  --sage:          #4f6b46;   /* verde seco — Dica */
  --sage-dim:      #e7edde;

  --info:          #38607c;   /* azul acinzentado — Recomendação */
  --info-dim:      #dfe9ee;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --sidebar-w: 264px;
  --shadow-card: 0 2px 14px rgba(36,28,14,0.05);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(181,114,42,0.09), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; margin:0; }
p{ margin:0 0 12px; color:var(--ink-dim); }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--varnish); color:#fff; }

/* Foco visível para navegação por teclado */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--varnish-light);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ============================================================
   HERO — assinatura da página: um verniz de luz que escorre
   uma única vez sobre o título ao carregar.
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  padding:96px 28px 72px;
  border-bottom:1px solid var(--border);
  background:
    repeating-linear-gradient(100deg, rgba(36,28,14,0.014) 0px, rgba(36,28,14,0.014) 1px, transparent 1px, transparent 7px),
    linear-gradient(180deg, #fffdf8, #edeee5);
}

.hero-inner{ max-width:900px; margin:0 auto; position:relative; z-index:2; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--varnish-light); margin-bottom:22px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--varnish); }

.hero h1{
  font-size:clamp(2.4rem, 5.6vw, 4.4rem);
  line-height:1.04;
  position:relative;
  display:inline-block;
  background-image:linear-gradient(100deg, var(--ink) 40%, var(--varnish) 50%, var(--ink) 60%);
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:sheen 2.6s 0.3s ease-out forwards;
}
@keyframes sheen{
  0%{ background-position:180% 0; }
  100%{ background-position:-40% 0; }
}

.hero .sub{
  margin-top:20px;
  font-size:1.08rem;
  max-width:640px;
  color:var(--ink-dim);
}

.hero-stats{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:40px;
}
.stat{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 20px;
  min-width:140px;
  box-shadow:var(--shadow-card);
}
.stat b{
  display:block; font-family:var(--font-mono); font-size:1.5rem; color:var(--varnish-light);
}
.stat span{ font-size:12.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; }

/* ============================================================
   LAYOUT — sidebar (índice) + conteúdo em grid
   ============================================================ */
.layout{
  max-width:1280px;
  margin:0 auto;
  padding:48px 28px 96px;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap:48px;
  align-items:start;
}

/* --- Índice lateral fixo --- */
aside#indice{ scroll-margin-top:24px; }
.toc{
  position:sticky; top:24px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px 18px;
  box-shadow:var(--shadow-card);
}
.toc h2{
  font-size:12px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--ink-faint); font-family:var(--font-mono); font-weight:600;
  margin-bottom:14px; padding:0 6px;
}
.toc ul{ display:flex; flex-direction:column; gap:2px; }
.toc a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-size:14.5px;
  color:var(--ink-dim);
  padding:9px 10px;
  border-radius:var(--radius-sm);
  transition:background 0.15s, color 0.15s;
}
.toc a .n{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.toc a:hover{ background:var(--bg-panel-2); color:var(--ink); }
.toc a.active{ background:var(--varnish-dim); color:var(--varnish-light); }
.toc a.active .n{ color:var(--varnish-light); }

/* Botão hambúrguer — só aparece em telas estreitas */
.toc-toggle{
  display:none;
  align-items:center; gap:10px;
  background:var(--bg-panel);
  border:1px solid var(--border-strong);
  color:var(--ink);
  font-family:var(--font-mono); font-size:13px;
  padding:12px 16px; border-radius:var(--radius-md);
  cursor:pointer; width:100%; margin-bottom:20px;
  box-shadow:var(--shadow-card);
}

main{ display:flex; flex-direction:column; gap:56px; min-width:0; }

section{ scroll-margin-top:24px; }

.section-head{ margin-bottom:22px; }
.section-head .tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--varnish-light); margin-bottom:8px; display:block;
}
.section-head h2{ font-size:1.9rem; color:var(--ink); }
.section-head p{ margin-top:10px; max-width:640px; }

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px;
  position:relative;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
/* aresta superior com brilho — remete à borda de uma peça envernizada */
.card::before{
  content:'';
  position:absolute; top:0; left:22px; right:22px; height:2px;
  background:linear-gradient(90deg, transparent, var(--varnish), transparent);
  opacity:0.6;
}

.card h3{ font-size:1.2rem; color:var(--ink); margin-bottom:4px; }
.card .kicker{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-bottom:14px; display:block; }
.card ul{ display:flex; flex-direction:column; gap:9px; }
.card li{
  font-size:14.5px; color:var(--ink-dim);
  padding-left:18px; position:relative;
}
.card li::before{
  content:'—'; position:absolute; left:0; color:var(--varnish);
}
.card .indicado{
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--border-strong);
  font-size:13.5px; color:var(--varnish-light);
}

/* Botão "voltar ao índice" dentro do card */
.card-footer{
  margin-top:20px; padding-top:16px;
  border-top:1px solid var(--border);
  display:flex; justify-content:flex-end;
}
.card-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px;
  color:var(--varnish-light);
  background:var(--varnish-dim);
  border:1px solid var(--border);
  padding:7px 13px;
  border-radius:999px;
  text-decoration:none;
  transition:background 0.15s, transform 0.15s;
}
.card-back:hover{ background:var(--varnish); color:#fff; transform:translateY(-1px); }

/* Grade de comparação (substitui tabelas) */
.compare-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:20px;
}

/* ============================================================
   CALLOUTS — Dica / Atenção / Recomendação
   ============================================================ */
.callout{
  border-radius:var(--radius-md);
  padding:18px 20px;
  border:1px solid var(--border);
  border-left:3px solid var(--ink-faint);
  display:flex; gap:14px;
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}
.callout .icon{
  font-size:1.3rem; line-height:1; flex-shrink:0; margin-top:2px;
}
.callout .body b{
  display:block; font-family:var(--font-mono); font-size:11.5px;
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:5px;
}
.callout .body p{ margin:0; font-size:14.5px; color:var(--ink-dim); }

.callout.dica{ border-left-color:var(--sage); background:var(--sage-dim); }
.callout.dica b{ color:var(--sage); }

.callout.atencao{ border-left-color:var(--lacquer); background:var(--lacquer-dim); }
.callout.atencao b{ color:var(--lacquer); }

.callout.recomendacao{ border-left-color:var(--info); background:var(--info-dim); }
.callout.recomendacao b{ color:var(--info); }

.callout-stack{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }

/* ============================================================
   TIMELINE — para as etapas e procedimentos (ordem real importa)
   ============================================================ */
.timeline{
  position:relative;
  padding-left:38px;
}
.timeline::before{
  content:'';
  position:absolute; left:13px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, var(--varnish), var(--border-strong) 90%);
}
.tl-step{ position:relative; padding-bottom:26px; }
.tl-step:last-child{ padding-bottom:0; }
.tl-step::before{
  content:attr(data-n);
  position:absolute; left:-38px; top:0;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--bg-panel);
  border:1px solid var(--varnish);
  color:var(--varnish-light);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
}
.tl-step h4{ font-size:1rem; color:var(--ink); margin-bottom:4px; }
.tl-step p{ font-size:14px; margin-bottom:0; }
.tl-step .dur{
  display:inline-block; margin-top:8px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);
  background:var(--bg-panel-2); border:1px solid var(--border); border-radius:20px; padding:4px 10px;
}

/* Alternador de método (Pistola / Pincel-Rolo) */
.method-switch{
  display:inline-flex; background:var(--bg-panel-2); border:1px solid var(--border-strong);
  border-radius:999px; padding:4px; margin-bottom:26px; gap:4px;
}
.method-switch button{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.02em;
  background:transparent; border:none; color:var(--ink-faint);
  padding:9px 18px; border-radius:999px; cursor:pointer; transition:all 0.15s;
}
.method-switch button.active{ background:var(--varnish); color:#fff; font-weight:600; }
.method-panel{ display:none; }
.method-panel.active{ display:block; }

/* ============================================================
   CHECKLIST final
   ============================================================ */
.checklist{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:12px;
}
.check-item{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:13px 14px;
  font-size:14px; color:var(--ink-dim);
  box-shadow:var(--shadow-card);
}
.check-item .box{
  flex-shrink:0; width:20px; height:20px; border-radius:6px;
  background:var(--varnish);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; margin-top:1px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  border-top:1px solid var(--border);
  padding:32px 28px 60px;
  text-align:center;
}
footer p{ font-size:13px; color:var(--ink-faint); margin:0; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 920px){
  .layout{ grid-template-columns:1fr; }
  .toc-toggle{ display:flex; }
  .toc{
    position:static;
    display:none;
  }
  .toc.open{ display:block; margin-bottom:8px; }
}

@media (max-width: 560px){
  .hero{ padding:64px 20px 52px; }
  .layout{ padding:36px 18px 72px; gap:32px; }
  .card{ padding:20px; }
}