/* ================================================================
   CASA — main.css  v1.0
   CSS compartilhado por todas as páginas do site
   ================================================================ */

/* ── Reset + tokens ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --black: #0a0a0a;
  --white: #fafaf8;
  --cream: #f4f1eb;
  --gold:  #b8973a;
  --gold-light: #d4ab50;
  --muted: #666560;
  --border: #e8e4dc;
  --surface: #ffffff;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a   { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: var(--sans); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ── NAV ─────────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 72px;
  transition: background .4s, backdrop-filter .4s, box-shadow .4s;
}
#nav.scrolled, #nav.solid {
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 36px; filter: brightness(0) invert(1); }
.nav-wordmark { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--white); letter-spacing: .1em; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); padding: 8px 14px; border-radius: 6px; transition: color .2s;
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-cta {
  margin-left: 8px; padding: 9px 22px; border-radius: 40px;
  background: var(--gold); color: var(--black);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, transform .15s;
}
.nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
#nav-toggle { display: none; color: rgba(255,255,255,.7); font-size: 22px; padding: 8px; }

/* Badge AO VIVO — visível apenas quando live ativa */
.live-badge {
  display: none; /* js mostra via .visible */
  align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-left: 6px; animation: pulse-live 2s infinite;
  text-decoration: none;
}
.live-badge.visible { display: inline-flex; }
.live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; }
@keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:.7} }

/* ── DRAWER MOBILE ───────────────────────────────────────────── */
#drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--black);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  padding: 88px 32px 48px; gap: 6px;
}
#drawer.open { transform: translateX(0); }
#drawer-close { position: absolute; top: 24px; right: 24px; color: rgba(255,255,255,.4); font-size: 22px; padding: 8px; }
.drawer-link {
  display: block; font-size: 2rem; font-family: var(--serif); font-weight: 700;
  color: rgba(255,255,255,.35); padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06); transition: color .2s;
}
.drawer-link:hover { color: var(--white); }
.drawer-cta {
  margin-top: 20px; display: block; text-align: center;
  padding: 16px 32px; border-radius: 40px;
  background: var(--gold); color: var(--black);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* ── BOTÕES GLOBAIS ──────────────────────────────────────────── */
.btn-gold {
  padding: 15px 32px; border-radius: 40px;
  background: var(--gold); color: var(--black);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, transform .15s; display: inline-block;
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-ghost {
  padding: 14px 32px; border-radius: 40px;
  border: 1.5px solid rgba(255,255,255,.25); color: var(--white);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .2s, transform .15s; display: inline-block;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.65); transform: translateY(-2px); }

/* ── SEÇÕES ──────────────────────────────────────────────────── */
.section { padding: clamp(64px,10vw,120px) clamp(20px,4vw,48px); }
.section-inner { max-width: 1320px; margin: 0 auto; }
.eyebrow { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.section-h2 { font-family: var(--serif); font-size: clamp(2.2rem,4vw,3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 20px; }
.section-p  { font-size: 16px; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 540px; }

/* ── TOAST ───────────────────────────────────────────────────── */
#toast-wrap {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: #1a1a1a; color: var(--white); padding: 12px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4); animation: toastIn .22s ease both;
  pointer-events: auto; white-space: nowrap;
}
.toast.out { animation: toastOut .22s ease both; }
.toast i { color: var(--gold); }
@keyframes toastIn  { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut { to   { opacity:0; transform:translateY(6px) scale(.96); } }

/* ── ANIMAÇÕES ───────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes breathe { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.97)} }
@keyframes heroZoom { from { transform:scale(1.1); } to { transform:scale(1.03); } }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes scrollDrop { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes spin { to { transform:rotate(360deg); } }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ── FOOTER ──────────────────────────────────────────────────── */
#footer { background:var(--black); color:var(--white); padding:72px clamp(20px,4vw,48px) 40px; }
.footer-inner { max-width:1320px; margin:0 auto; }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:56px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand { font-family:var(--serif); font-size:2rem; font-weight:900; letter-spacing:.1em; margin-bottom:12px; }
.footer-about { font-size:13px; color:rgba(255,255,255,.3); line-height:1.8; max-width:280px; margin-bottom:24px; }
.footer-socials { display:flex; gap:10px; }
.social-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.4); font-size:15px; transition:background .2s,color .2s,transform .15s;
}
.social-btn:hover { background:rgba(255,255,255,.1); color:var(--white); transform:translateY(-2px); }
.footer-col h4 {
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.25); margin-bottom:20px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:13px; color:rgba(255,255,255,.4); transition:color .2s; }
.footer-col ul li a:hover { color:var(--white); }
.footer-col > p { font-size:13px; color:rgba(255,255,255,.35); line-height:1.7; margin-bottom:6px; }
.footer-col > p i { width:16px; opacity:.5; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:12px; color:rgba(255,255,255,.2); }
.footer-legal { display:flex; gap:24px; }
.footer-legal a { font-size:12px; color:rgba(255,255,255,.2); transition:color .2s; }
.footer-legal a:hover { color:rgba(255,255,255,.55); }

/* ── RESPONSIVE NAV ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  #nav-toggle { display: block; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 580px) {
  .footer-top { grid-template-columns: 1fr; }
  .btn-gold, .btn-ghost { text-align: center; width: 200px; }
}