/* ============================================================
   SAYONARA CABELEIREIROS — Sistema visual
   Display: Bodoni Moda (serifa elegante alto contraste)
   Corpo:   Hanken Grotesk (substituto próximo da Google Sans,
            que não é distribuída publicamente)
   Cores:   Preto + vermelho do logo (sol japonês) + off-white quente
   ============================================================ */

:root{
  --bg:        #070707;
  --bg-2:      #0e0d0c;
  --bg-3:      #141210;
  --ink:       #f4f1ec;
  --ink-dim:   #b8b2a9;
  --muted:     #837d74;
  --red:       #e2231a;
  --red-deep:  #b81812;
  --line:      rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.055);

  --maxw: 1180px;
  --gutter: clamp(22px, 6vw, 64px);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --serif-wt: 600;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:380;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* fictício — destaca dados a confirmar */
.placeholder-data{ color:var(--red); }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter);
  background:linear-gradient(to bottom, rgba(7,7,7,.92), rgba(7,7,7,.55) 70%, transparent);
  backdrop-filter:blur(8px);
}
.topbar .brand img{ height:38px; width:auto; }
.topbar .ig-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; transition:.3s var(--ease);
}
.topbar .ig-link:hover{ color:var(--ink); border-color:var(--red); }
.topbar .ig-link svg{ width:16px; height:16px; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.01em;
  padding:16px 30px; border-radius:999px; cursor:pointer; border:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.btn-wa{
  background:var(--red); color:#fff;
  box-shadow:0 0 0 0 rgba(226,35,26,.45);
}
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 14px 38px -10px rgba(226,35,26,.6); }
.btn-wa svg{ width:21px; height:21px; }
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-ghost svg{ width:19px; height:19px; }

/* ---------- Eyebrow / heritage ---------- */
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--red); display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--red); display:inline-block; }

/* ============================================================
   HERO — base
   ============================================================ */
.hero{ position:relative; }
.hero h1{
  font-family:var(--serif);
  font-weight:var(--serif-wt);
  line-height:.96;
  letter-spacing:-.01em;
  font-size:clamp(54px, 13.5vw, 140px);
}
.hero h1 em{ font-style:italic; color:var(--red); }
.hero .sub{
  color:var(--ink-dim); max-width:34ch;
  font-size:clamp(16px,2.1vw,19px); line-height:1.55;
}
.hero .sub strong{ color:var(--ink); font-weight:600; }

/* sol japonês decorativo */
.sun{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #ff4136, var(--red) 46%, var(--red-deep) 100%);
  filter:drop-shadow(0 0 60px rgba(226,35,26,.35));
  z-index:0;
}

/* --- Variante 1 : Centralizado / herança --- */
body[data-variant="1"] .hero-1{ display:block; }
.hero-1{ display:none; text-align:center; position:relative; padding:clamp(40px,9vh,90px) 0 clamp(56px,10vh,110px); }
.hero-1 .sun{
  width:min(78vw,560px); aspect-ratio:1; left:50%; top:46%;
  transform:translate(-50%,-50%); opacity:.16; filter:blur(2px) drop-shadow(0 0 90px rgba(226,35,26,.5));
}
.hero-1 .inner{ position:relative; z-index:2; }
.hero-1 .crest{ height:clamp(74px,15vw,120px); width:auto; margin:0 auto clamp(26px,5vh,46px); }
.hero-1 .eyebrow{ justify-content:center; margin-bottom:26px; }
.hero-1 h1{ margin-bottom:30px; }
.hero-1 .sub{ margin:0 auto 38px; text-align:center; }
.hero-1 .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* --- Variante 2 : Full-bleed foto --- */
body[data-variant="2"] .hero-2{ display:grid; }
.hero-2{ display:none; min-height:92vh; align-content:end; position:relative; padding-bottom:clamp(46px,8vh,80px); }
.hero-2 .photo{ position:absolute; inset:0; z-index:0; }
.hero-2 .photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 4%, rgba(7,7,7,.35) 48%, rgba(7,7,7,.55) 100%);
}
.hero-2 .inner{ position:relative; z-index:2; }
.hero-2 .eyebrow{ margin-bottom:22px; }
.hero-2 h1{ margin-bottom:24px; }
.hero-2 .sub{ margin-bottom:34px; }
.hero-2 .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* --- Variante 3 : Editorial split --- */
body[data-variant="3"] .hero-3{ display:block; }
.hero-3{ display:none; padding:clamp(30px,6vh,64px) 0 clamp(50px,9vh,96px); }
.hero-3 .grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center;
}
.hero-3 .col-txt{ position:relative; }
.hero-3 .rule{ width:46px; height:2px; background:var(--red); margin-bottom:28px; }
.hero-3 .eyebrow{ margin-bottom:22px; }
.hero-3 h1{ margin-bottom:26px; }
.hero-3 .sub{ margin-bottom:34px; }
.hero-3 .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-3 .col-img{ position:relative; }
.hero-3 .col-img .ph{ aspect-ratio:4/5; border-radius:6px; }
.hero-3 .col-img .sun{ width:120px; height:120px; right:-22px; top:-22px; opacity:.9; z-index:3; }

/* ============================================================
   Placeholder de imagem (faixas + legenda mono)
   ============================================================ */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 11px),
    linear-gradient(145deg, #1a1714, #0d0c0b);
  border:1px solid var(--line-soft);
  display:grid; place-items:center;
}
.ph .ph-label{
  font-family:"Hanken Grotesk", monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding:10px 16px; line-height:1.6;
}
.ph .ph-label b{ display:block; color:var(--ink-dim); font-weight:600; margin-bottom:3px; letter-spacing:.22em; }

/* ============================================================
   Faixa de herança
   ============================================================ */
.heritage{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:var(--bg-2);
}
.heritage .row{
  display:grid; grid-template-columns:repeat(3,1fr);
  text-align:center;
}
.heritage .cell{ padding:clamp(34px,6vw,56px) 18px; border-right:1px solid var(--line-soft); }
.heritage .cell:last-child{ border-right:none; }
.heritage .num{
  font-family:var(--serif); font-weight:var(--serif-wt); font-size:clamp(44px,7.5vw,70px); line-height:1;
  color:var(--ink); margin-bottom:10px;
}
.heritage .num em{ color:var(--red); font-style:italic; }
.heritage .lab{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   Reels
   ============================================================ */
.reels{ padding:clamp(58px,9vh,108px) 0; }
.reels .head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(28px,4vw,44px); flex-wrap:wrap;
}
.reels .head h2{
  font-family:var(--serif); font-weight:var(--serif-wt); line-height:1;
  font-size:clamp(34px,6vw,60px); letter-spacing:-.01em;
}
.reels .head h2 em{ font-style:italic; color:var(--red); }
.reels .head .ig-handle{ color:var(--ink-dim); font-size:15px; display:inline-flex; gap:9px; align-items:center; }
.reels .head .ig-handle:hover{ color:var(--red); }
.reels .head .ig-handle svg{ width:18px; height:18px; }

.reels-track{
  display:flex; gap:clamp(14px,2vw,22px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:18px; margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter);
  scrollbar-width:none;
}
.reels-track::-webkit-scrollbar{ display:none; }
.reel{
  flex:0 0 auto; width:clamp(230px,62vw,300px); aspect-ratio:4/5;
  border-radius:10px; scroll-snap-align:start; position:relative; overflow:hidden;
  transition:transform .4s var(--ease); background:#111;
}
.reel:hover{ transform:translateY(-6px); }
.reel .cover{ position:absolute; inset:0; }
.reel .cover img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.reel:hover .cover img{ transform:scale(1.05); }
.reel .veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0) 45%);
  opacity:.7; transition:opacity .35s var(--ease);
}
.reel:hover .veil{ opacity:.25; }

/* ============================================================
   Rodapé
   ============================================================ */
.footer{ border-top:1px solid var(--line-soft); background:var(--bg-2); padding:clamp(54px,8vh,90px) 0 36px; }
.footer .top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(30px,5vw,64px);
  padding-bottom:clamp(38px,6vh,56px); border-bottom:1px solid var(--line-soft);
}
.footer .brand img{ height:46px; margin-bottom:20px; }
.footer .brand p{ color:var(--muted); max-width:34ch; font-size:15px; }
.footer h4{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--red);
  margin-bottom:18px; font-weight:600;
}
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer ul a, .footer ul li{ color:var(--ink-dim); font-size:15px; transition:.25s; }
.footer ul a:hover{ color:var(--ink); }
.footer .addr{ color:var(--ink-dim); font-size:15px; line-height:1.7; }
.footer .bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:30px; flex-wrap:wrap;
}
.footer .bottom .legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer .bottom a, .footer .bottom span{ color:var(--muted); font-size:13px; }
.footer .bottom a:hover{ color:var(--ink-dim); }

/* ============================================================
   WhatsApp flutuante
   ============================================================ */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:inline-flex; align-items:center; gap:11px;
  background:#25d366; color:#fff; font-weight:700; font-size:15px;
  padding:14px 20px 14px 16px; border-radius:999px;
  box-shadow:0 14px 40px -8px rgba(37,211,102,.55);
  transition:transform .35s var(--ease);
}
.fab:hover{ transform:translateY(-3px) scale(1.02); }
.fab svg{ width:24px; height:24px; }
.fab .fab-txt{ white-space:nowrap; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Páginas de texto (Termos / Privacidade)
   ============================================================ */
.legal-hero{ padding:clamp(48px,9vh,96px) 0 clamp(30px,5vh,52px); border-bottom:1px solid var(--line-soft); }
.legal-hero .eyebrow{ margin-bottom:22px; }
.legal-hero h1{
  font-family:var(--serif); font-weight:var(--serif-wt); line-height:1; letter-spacing:-.01em;
  font-size:clamp(40px,8vw,82px);
}
.legal-hero h1 em{ font-style:italic; color:var(--red); }
.legal-hero .meta{ margin-top:20px; color:var(--muted); font-size:14px; }

.legal-body{ padding:clamp(40px,7vh,72px) 0 clamp(60px,9vh,110px); }
.legal-body .col{ max-width:760px; }
.legal-body h2{
  font-family:var(--serif); font-weight:var(--serif-wt); font-size:clamp(26px,4vw,36px);
  margin:48px 0 14px; line-height:1.15; letter-spacing:-.01em;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h2 .n{ color:var(--red); font-size:.7em; margin-right:14px; vertical-align:baseline; }
.legal-body h3{ font-size:17px; font-weight:600; color:var(--ink); margin:26px 0 8px; }
.legal-body p{ color:var(--ink-dim); margin-bottom:14px; }
.legal-body ul{ color:var(--ink-dim); margin:0 0 16px 0; padding-left:0; list-style:none; }
.legal-body li{ position:relative; padding-left:24px; margin-bottom:10px; }
.legal-body li::before{ content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; background:var(--red); border-radius:50%; }
.legal-body a{ color:var(--ink); border-bottom:1px solid var(--red); }
.legal-body a:hover{ color:var(--red); }
.legal-body strong{ color:var(--ink); font-weight:600; }
.legal-note{
  border:1px solid var(--line); border-left:3px solid var(--red);
  background:var(--bg-2); border-radius:6px; padding:20px 24px; margin:30px 0;
  font-size:14.5px; color:var(--ink-dim);
}
.legal-back{
  display:inline-flex; align-items:center; gap:9px; margin-top:46px;
  font-size:14px; letter-spacing:.04em; color:var(--ink-dim);
}
.legal-back:hover{ color:var(--ink); }
.legal-back svg{ width:16px; height:16px; }

/* ============================================================
   Página de comparação (escolher)
   ============================================================ */
.choose{ min-height:100vh; padding:clamp(34px,6vh,64px) 0 80px; }
.choose .lead{ text-align:center; max-width:680px; margin:0 auto clamp(38px,6vh,62px); }
.choose .lead img{ height:54px; margin:0 auto 28px; }
.choose .lead h1{ font-family:var(--serif); font-weight:var(--serif-wt); font-size:clamp(34px,6vw,56px); line-height:1.04; margin-bottom:16px; }
.choose .lead h1 em{ font-style:italic; color:var(--red); }
.choose .lead p{ color:var(--ink-dim); }
.choose-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); }
.opt{ display:flex; flex-direction:column; }
.opt .label{ display:flex; align-items:baseline; gap:11px; margin-bottom:16px; }
.opt .label .tag{
  font-family:var(--serif); font-style:italic; color:var(--red); font-size:26px; line-height:1;
}
.opt .label .name{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); font-weight:600; }
.opt .label .desc{ display:block; font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:400; margin-top:3px; }
.opt .frame{
  position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#000; aspect-ratio:9/16; box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.opt .frame:hover{ border-color:var(--red); transform:translateY(-4px); }
.opt .frame iframe{
  position:absolute; top:0; left:0; width:250%; height:250%;
  transform:scale(.4); transform-origin:top left; border:0;
}
.opt .actions{ display:flex; gap:10px; margin-top:16px; }
.opt .actions a{ flex:1; text-align:center; font-size:14px; padding:13px 14px; border-radius:999px; }
.opt .open{ background:var(--ink); color:#111; font-weight:600; }
.opt .open:hover{ background:#fff; }
@media (max-width:900px){
  .choose-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:880px){
  .hero-3 .grid{ grid-template-columns:1fr; }
  .hero-3 .col-img{ order:-1; }
  .hero-3 .col-img .ph{ aspect-ratio:16/11; }
  .footer .top{ grid-template-columns:1fr 1fr; }
  .footer .brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .topbar .ig-link span{ display:none; }
  .heritage .row{ grid-template-columns:1fr; }
  .heritage .cell{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .heritage .cell:last-child{ border-bottom:none; }
  .footer .top{ grid-template-columns:1fr; }
  .fab .fab-txt{ display:none; }
  .fab{ padding:15px; }
  .reels .head .ig-handle{ display:none; }
}