/* ============================================================
   NUSAN · Bridge Page — Aninha Albina (@arosadinha)
   Design system on-brand (manual NUSAN)
   ============================================================ */

/* ---------- Fontes da marca ---------- */
/* Display (títulos) — Fredoka: rounded/bold, substitui a Moara */
@font-face{
  font-family:'Fredoka';
  src:url('../fonts/fredoka-600.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* Texto/botões — Montserrat: substitui a Gotham (quase idêntica) */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --bordo:#A0110A;
  --bordo-dark:#7d0d06;
  --creme:#FEE3D2;
  --creme-soft:#fff3ea;
  --preto:#222222;
  --cinza:#8B898E;
  --verde:#2e9d00;
  --laranja:#ff7a1a;
  --star:#ffb300;
  --shadow:0 14px 40px rgba(125,13,6,.16);
  --shadow-sm:0 6px 18px rgba(125,13,6,.10);
  --radius:22px;
  --radius-pill:100px;
  --col:460px;
  --font-display:'Fredoka',system-ui,sans-serif;
  --font-bold:'Montserrat',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; background:var(--creme)}
body{
  position:relative;
  font-family:var(--font-body); font-weight:300;
  color:var(--preto);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--creme-soft) 0%, var(--creme) 55%, #f7d3bd 100%);
  background-attachment:scroll;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{ /* marca d'agua diagonal NUSAN — cobre a pagina inteira */
  content:''; position:absolute; inset:0; z-index:0;
  background:url('../img/watermark.webp') center/cover no-repeat;
  opacity:.9; pointer-events:none;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ---------- Shell / coluna ---------- */
.wrap{
  position:relative; z-index:1;
  width:100%; max-width:var(--col);
  margin:0 auto; padding:18px 18px 40px;
  display:flex; flex-direction:column; gap:18px;
}

/* ---------- Hero banner ---------- */
.hero{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); line-height:0;
  border:3px solid #fff;
}
.hero img{width:100%;height:auto}

/* ---------- Countdown ---------- */
.promo{
  background:var(--bordo);
  color:var(--creme);
  border-radius:var(--radius);
  padding:16px 18px 18px;
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.promo__label{
  font-family:var(--font-bold); font-weight:700;
  font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  opacity:.95;
}
.promo__timer{
  display:flex; justify-content:center; gap:10px; margin-top:10px;
}
.promo__unit{
  background:var(--bordo-dark);
  border:1px solid rgba(254,227,210,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:14px; padding:9px 6px; min-width:64px;
}
.promo__num{
  font-family:var(--font-bold); font-weight:700; font-size:30px; line-height:1; color:#fff;
  letter-spacing:.01em;
}
.promo__cap{
  font-family:var(--font-bold); font-weight:700;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  opacity:.8; margin-top:5px;
}

/* ---------- Card de perfil ---------- */
.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 22px 24px;
  text-align:center;
}
.avatar{
  width:104px;height:104px;border-radius:50%;
  margin:0 auto 12px; object-fit:cover;
  border:4px solid var(--creme);
  outline:2px solid var(--bordo);
  box-shadow:var(--shadow-sm);
}
.name{
  font-family:var(--font-display); font-size:27px; color:var(--bordo);
  line-height:1; letter-spacing:.01em;
}
.handle{
  font-family:var(--font-bold); font-weight:700;
  font-size:14px; color:var(--cinza); margin-top:5px;
}
.rating{
  margin-top:14px; display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 16px; border-radius:var(--radius-pill);
  background:var(--creme-soft); border:1px solid #f3cdb6;
}
.rating__label{
  font-family:var(--font-bold); font-weight:700;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
}
.rating__stars{ color:var(--star); font-size:16px; letter-spacing:2px; line-height:1 }

/* ---------- Headline ---------- */
.head{ text-align:center; padding:4px 6px }
.head__q{
  font-family:var(--font-bold); font-weight:700; font-size:17px; color:var(--preto);
}
.head__sub{
  font-family:var(--font-display); font-size:26px; color:var(--bordo); margin-top:4px;
}

/* ---------- Botões CTA ---------- */
.cta{ display:flex; flex-direction:column; gap:13px }
.btn{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-bold); font-weight:700; font-size:18px;
  padding:18px 20px; border-radius:var(--radius-pill);
  border:2px solid var(--bordo);
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.975) }
.btn__emoji{ font-size:20px; filter:saturate(1.1) }
/* Primário (Privacy / Laranjinha) */
.btn--primary{
  background:var(--bordo); color:var(--creme);
  box-shadow:0 10px 26px rgba(160,17,10,.30);
}
.btn--primary:hover{ background:var(--bordo-dark) }
/* Outline (Telegram / OnlyFans) */
.btn--outline{
  background:#fff; color:var(--bordo);
  box-shadow:var(--shadow-sm);
}
.btn--outline:hover{ background:var(--creme-soft) }
/* Badge de promoção */
.badge{
  position:absolute; top:-10px; right:14px;
  background:var(--verde); color:#fff;
  font-family:var(--font-bold); font-weight:700;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 11px; border-radius:var(--radius-pill);
  box-shadow:0 4px 12px rgba(46,157,0,.4);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

/* ---------- Rodapé ---------- */
.foot{
  text-align:center; margin-top:6px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.foot__logo{ width:42px; height:42px }
.foot__txt{
  font-family:var(--font-bold); font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cinza);
}

/* ============================================================
   Notificação de prova social (popup)
   ============================================================ */
.notif{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,140%);
  z-index:50; width:min(92vw, 420px);
  background:#fff; border-radius:18px;
  box-shadow:0 18px 50px rgba(34,34,34,.28);
  padding:13px 15px; display:flex; align-items:center; gap:12px;
  opacity:0; transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s;
}
.notif.show{ transform:translate(-50%,0); opacity:1 }
.notif__icon{
  flex:0 0 auto; width:44px;height:44px;border-radius:13px;
  background:#fff;
  display:grid; place-items:center; font-size:24px;
  box-shadow:0 6px 16px rgba(255,122,26,.45), inset 0 0 0 2px rgba(255,122,26,.30);
}
.notif__body{ flex:1; min-width:0 }
.notif__title{
  font-family:var(--font-bold); font-weight:700; font-size:13.5px; color:var(--bordo);
  display:flex; align-items:center; gap:6px;
}
.notif__dot{ width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 0 rgba(46,157,0,.5);animation:live 1.6s infinite }
@keyframes live{ 0%{box-shadow:0 0 0 0 rgba(46,157,0,.5)} 100%{box-shadow:0 0 0 8px rgba(46,157,0,0)} }
.notif__text{
  font-family:var(--font-body); font-weight:300; font-size:13px; color:var(--preto);
  margin-top:2px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.notif__text b{ font-family:var(--font-bold); font-weight:700 }
.notif__time{ font-size:11px; color:var(--cinza); margin-top:2px }

/* ============================================================
   Gate de swipe (/arraste)
   ============================================================ */
.gate{
  position:relative; z-index:1; min-height:100dvh;
  display:grid; place-items:center; padding:24px;
}
.gate__card{
  background:#fff; border-radius:28px; box-shadow:var(--shadow);
  padding:34px 26px; width:100%; max-width:380px; text-align:center;
}
.gate__title{
  font-family:var(--font-display); font-size:30px; color:var(--bordo);
}
.gate__sub{
  font-family:var(--font-body); font-weight:300; font-size:15px; color:var(--preto);
  margin-top:8px;
}
.slider{
  position:relative; margin-top:26px; height:66px; border-radius:var(--radius-pill);
  background:var(--creme-soft); border:1px solid #f0c4a8; overflow:hidden;
  user-select:none; touch-action:none;
}
.slider__track{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-bold); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cinza); pointer-events:none;
}
.slider__fill{
  position:absolute; left:0; top:0; bottom:0; width:66px;
  background:linear-gradient(90deg, rgba(160,17,10,.16), rgba(160,17,10,.04));
}
.slider__knob{
  position:absolute; left:5px; top:5px; width:56px; height:56px;
  border-radius:50%; background:var(--bordo); color:var(--creme);
  display:grid; place-items:center; font-size:24px; cursor:grab;
  box-shadow:0 6px 16px rgba(160,17,10,.4);
}
.slider__knob:active{ cursor:grabbing }
.slider.done .slider__track{ color:var(--verde) }
.ts-wrap{ display:flex; justify-content:center; margin:18px 0 6px; min-height:65px }
.slider.is-locked{ opacity:.5; pointer-events:none }
.slider.is-locked .slider__knob{ background:var(--cinza); box-shadow:none; cursor:not-allowed }
.slider.is-locked .slider__track{ color:var(--cinza) }

/* ---------- Desktop polish ---------- */
@media(min-width:560px){
  .wrap{ padding-top:32px }
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}