/* ═══════════════════════════════════════════════════════════════════════════
   krvaletius.com — folha principal
   Pele: vantablack (.theme-cinzas do app AUTOR) — preto absoluto + ouro.
   Tipografia da casa: Cinzel (display) · EB Garamond (serif) · Inter (sans).
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body {
  margin:0;
  background:var(--bg0);
  color:var(--t2);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── o AMBIENTE vantablack: poeira de ouro + trama diagonal ─────────────── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.32;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,216,106,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 72%, rgba(230,185,74,.10) 0 1px, transparent 2px),
    repeating-linear-gradient(135deg, transparent 0 64px, rgba(230,185,74,.012) 65px, transparent 66px);
  background-size:260px 220px,320px 270px,auto;
}
/* névoa fria no alto — o gelo de Despoina */
body::after {
  content:''; position:fixed; inset:0 0 auto; height:70vh; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(230,185,74,.045), transparent 70%);
}
main,header,footer { position:relative; z-index:1; }

/* ── tipografia ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--display);
  color:var(--t1);
  font-weight:600;
  line-height:1.15;
  letter-spacing:.01em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1 { font-size:clamp(2rem,5.2vw,3.6rem); }
h2 { font-size:clamp(1.55rem,3.4vw,2.5rem); }
h3 { font-size:clamp(1.2rem,2.1vw,1.6rem); }
p  { margin:0 0 1.1em; }
a  { color:var(--accent); text-decoration:none; transition:color .18s ease; }
a:hover { color:var(--gold-flare); }
strong { color:var(--t1); font-weight:600; }
img { max-width:100%; height:auto; display:block; }
:focus-visible { outline:2px solid var(--gold-polished); outline-offset:3px; border-radius:3px; }

.dourado { color:var(--accent); }
.eyebrow {
  font-family:var(--display); font-size:.78rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--t3);
  margin:0 0 1rem;
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { width:min(1140px,92vw); margin-inline:auto; }
.wrap-estreito { width:min(760px,92vw); margin-inline:auto; }
section { padding:clamp(3.5rem,8vw,7rem) 0; }

/* fio de ouro que separa as seções */
.fio {
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),var(--gold-polished),var(--gold-deep),transparent);
  opacity:.5;
}

/* ── cabeçalho / navegação ──────────────────────────────────────────────── */
.topo {
  position:sticky; top:0; z-index:50;
  background:var(--glass);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topo-in { display:flex; align-items:center; gap:1.4rem; padding:.75rem 0; }
.marca { display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.marca img { width:34px; height:auto; }
.marca span {
  font-family:var(--display); font-weight:600; font-size:.95rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--t1);
}
.nav { display:flex; gap:1.5rem; align-items:center; }
.nav a {
  font-family:var(--display); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--t3);
  padding:.3rem 0; border-bottom:1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color:var(--gold-polished); border-bottom-color:var(--gold-deep); }

.menu-btn {
  display:none; background:none; border:1px solid var(--border2); border-radius:4px;
  color:var(--accent); padding:.45rem .6rem; cursor:pointer; line-height:0;
}
@media (max-width:860px){
  .menu-btn { display:block; }
  .nav {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--glass2); border-bottom:1px solid var(--border2);
    padding:.5rem 4vw 1rem;
    display:none;
  }
  .nav.aberto { display:flex; }
  .nav a { padding:.75rem 0; border-bottom:1px solid var(--border); }
}

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 2rem; border-radius:3px; cursor:pointer;
  border:1px solid var(--gold-deep);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-align:center;
}
.btn-ouro {
  background:linear-gradient(145deg,var(--gold-polished),var(--accent) 55%,var(--gold-deep));
  color:#140e02; border-color:var(--gold-polished);
  box-shadow:var(--glow);
}
.btn-ouro:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(255,216,106,.42),0 0 54px rgba(230,185,74,.16); color:#140e02; }
.btn-fantasma { background:rgba(255,216,106,.028); color:var(--accent); }
.btn-fantasma:hover { background:var(--bg-hover); color:var(--gold-flare); transform:translateY(-2px); }
.btn-largo { width:100%; }

/* ── cartões ────────────────────────────────────────────────────────────── */
.cartao {
  background:linear-gradient(145deg,var(--surface-sheen-soft),transparent),var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--shadow2);
  transition:border-color .2s ease, transform .2s ease;
}
.cartao:hover { border-color:var(--border2); transform:translateY(-3px); }
.grade { display:grid; gap:1.4rem; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }

/* preço */
.preco { font-family:var(--display); font-size:2rem; font-weight:600; color:var(--gold-polished); line-height:1; margin:.2rem 0; }
.preco small { display:block; font-family:var(--sans); font-size:.78rem; font-weight:400; color:var(--t3); letter-spacing:.04em; text-transform:none; margin-top:.45rem; }

/* ── rodapé ─────────────────────────────────────────────────────────────── */
.rodape {
  border-top:1px solid var(--border);
  background:var(--bg1);
  padding:3rem 0 2rem;
  font-size:.85rem; color:var(--t3);
}
.rodape a { color:var(--t2); }
.rodape a:hover { color:var(--accent); }
.rodape-grade { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:2.2rem; }
.rodape h4 { font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--t2); margin-bottom:.9rem; }
.rodape ul { list-style:none; margin:0; padding:0; }
.rodape li { margin-bottom:.5rem; }
.rodape-base { border-top:1px solid var(--border); padding-top:1.5rem; font-size:.78rem; color:var(--t4); line-height:1.7; }

/* ── utilidades ─────────────────────────────────────────────────────────── */
.centro { text-align:center; }
.pular {
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#140e02; padding:.7rem 1.2rem; z-index:100;
  font-family:var(--display); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
}
.pular:focus { left:1rem; top:1rem; }