/* IZA PERSONALIZADOS — Clean Black
   Paleta: fundo preto #060607, tinta #F5F4F1, muted #A7AAB0.
   Hero: vídeo P&B opaco, alto — desce até atrás do conteúdo.
   Logo: crua — sem bordas, sem radius, sem sombra, sem margem.
   Botão: branco sólido (contraste no preto). Assinatura: filete + coração. */

:root{
  --bg:#060607;
  --card:#101012;
  --ink:#F5F4F1;
  --muted:#A7AAB0;
  --line:#232427;
  --accent:#FFFFFF;
  --accent-ink:#0B0B0C;
  --gold:#D4A838;
  --gold-soft:rgba(212,168,56,.45);
  --radius:18px;
  --shadow-btn:0 14px 34px rgba(0,0,0,.55);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HERO P&B — desce até o meio da página ---------- */
.hero{
  position:relative;
  width:100%;
  height:560px;
  overflow:hidden;
  background:#000;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  /* pedido: preto e branca + levemente opaca */
  filter:grayscale(1) contrast(1.08) brightness(.92);
  opacity:.38;
  /* dissolve a base do vídeo — sem corte rígido */
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.55) 74%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.55) 74%,transparent 98%);
}
.hero-veil{
  position:absolute;
  inset:0;
  /* degradê longo hero → background, sem corte rígido */
  background:linear-gradient(to bottom,
    rgba(6,6,7,.10) 0%,
    rgba(6,6,7,.28) 38%,
    rgba(6,6,7,.55) 60%,
    rgba(6,6,7,.82) 80%,
    rgba(6,6,7,.96) 92%,
    var(--bg) 100%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.5;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 60%,transparent 99%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- CONTEÚDO (sobre o vídeo) ---------- */
.wrap{
  width:100%;
  max-width:560px;
  padding:0 22px 40px;
  margin-top:-380px;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* LOGO CRUA — sem bordas, sem radius, sem sombra, sem margem */
.avatar{
  margin:0;
  padding:0;
  line-height:0;
}
.avatar img{
  display:block;
  width:min(230px,68vw);
  height:auto;
  margin:0;
  padding:0;
  border:none;
  outline:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.handle{
  margin-top:6px;
  font-size:15px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
}
.handle:hover{color:var(--gold);text-decoration:underline}

.bio{
  margin-top:12px;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  max-width:42ch;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

/* assinatura: filete fino + coração */
.signature{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:320px;
  margin:22px 0 24px;
}
.signature .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.signature .heart{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#F0D98A,var(--gold) 55%,#9A7418);
  color:#231A05;
  font-size:12px;
  box-shadow:0 4px 16px rgba(212,168,56,.35);
}

/* ---------- BOTÃO ÚNICO (branco no preto) ---------- */
.links{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.btn-whats{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  background:var(--accent);
  color:var(--accent-ink);
  text-decoration:none;
  border:1px solid var(--gold-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-btn);
  transition:transform .18s ease, box-shadow .18s ease;
  text-align:left;
}
.btn-whats:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,0,0,.65),0 0 0 1px var(--gold-soft),0 6px 26px rgba(212,168,56,.22)}
.btn-whats:active{transform:translateY(0)}
.btn-whats .fa-whatsapp{font-size:30px;flex-shrink:0}
.btn-whats span{flex:1;display:flex;flex-direction:column;gap:2px}
.btn-whats strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.btn-whats small{font-size:13px;opacity:.65;font-weight:500}
.btn-whats .arrow{font-size:15px;color:#9A7418;opacity:.9}

.hint{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

.footer{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid var(--line);
  width:100%;
}
.footer p{font-size:12.5px;color:var(--muted)}

/* entrada em cascata */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* toques dourados finais */
::selection{background:var(--gold);color:#231A05}
a:focus-visible,.btn-whats:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:380px){
  .hero{height:500px}
  .wrap{margin-top:-340px}
  .avatar img{width:min(200px,66vw)}
}