/* ============================================================================
   DESIGN SYSTEM — Faculdade da Beleza
   Fonte unica de verdade visual. Todas as paginas do funil importam este CSS.

   Referencia: faculdadedabeleza.com (pagina principal)
   Atualizado: 2026-04-16
   ============================================================================ */

/* FONT */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url(/fonts/jakarta-latin.woff2) format('woff2')
}

/* RESET */
*,::after,::before{box-sizing:border-box;margin:0;padding:0}

/* TOKENS */
:root{
  /* Backgrounds */
  --bg:#000000;
  --surface:#111111;
  --surface2:#1a1a1a;
  --surface3:#222222;

  /* Accent */
  --green:#2DD4A0;
  --green2:#22b88a;
  --green-bg:rgba(45,212,160,.06);
  --green-border:rgba(45,212,160,.15);
  --gold:#D4AF37;
  --gold-light:#F5D67B;
  --gold-bg:rgba(212,175,55,.08);
  --gold-border:rgba(212,175,55,.25);
  --purple:#8B7FE8;
  --red:#EF4444;
  --red-bg:rgba(239,68,68,.08);
  --blue:#60A5FA;

  /* Text */
  --text:#e8eaf0;
  --text2:#9ba3bc;
  --muted:#6b7280;

  /* Borders */
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.12);

  /* Typography */
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

  /* Radius */
  --radius:8px;
  --radius-md:12px;
  --radius-lg:16px;

  /* Safe area */
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* BASE */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100dvh;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ============================================================================
   COMPONENTS
   ============================================================================ */

/* TOPBAR — header sticky com blur (igual faculdadedabeleza.com) */
.fdb-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:14px 32px;
  display:flex;justify-content:space-between;align-items:center
}
.fdb-logo{
  font-family:var(--sans);font-weight:800;font-size:18px;
  background:linear-gradient(135deg,var(--gold),#F4E5A1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
  text-decoration:none;letter-spacing:0.02em;
  display:flex;align-items:center;gap:10px
}
.fdb-logo::before{
  content:'';width:28px;height:28px;
  background:linear-gradient(135deg,#D4AF37,#F5D67B);
  border-radius:6px;flex-shrink:0;
  box-shadow:0 4px 14px rgba(212,175,55,0.4);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 0,transparent 6px,#000 7px);
  mask:radial-gradient(circle at 50% 50%,transparent 0,transparent 6px,#000 7px)
}
.fdb-login-btn{
  background:linear-gradient(135deg,var(--gold),#F4E5A1);
  color:#000;padding:9px 18px;border-radius:var(--radius);
  font-size:13px;font-weight:700;text-decoration:none
}

/* CONTAINER */
.fdb-container{max-width:560px;margin:0 auto;padding:0 16px}
.fdb-container-wide{max-width:1200px;margin:0 auto;padding:0 32px}

/* SECTION */
.fdb-section{padding:32px 0}

/* CARD */
.fdb-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  margin-bottom:16px
}
.fdb-card-highlight{border-color:var(--gold-border);box-shadow:0 0 0 1px rgba(212,175,55,.1)}

/* HEADLINES */
.fdb-h1{
  font-family:var(--sans);font-size:clamp(24px,5vw,40px);
  font-weight:800;line-height:1.1;letter-spacing:-0.02em;
  color:#fff;margin-bottom:12px
}
.fdb-h1-gold{
  background:linear-gradient(135deg,#fff 0%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent
}
.fdb-h2{
  font-family:var(--sans);font-size:clamp(20px,4vw,28px);
  font-weight:700;color:#fff;line-height:1.2;margin-bottom:8px
}
.fdb-h3{
  font-family:var(--sans);font-size:17px;
  font-weight:700;color:#fff;line-height:1.25
}
.fdb-sub{font-size:16px;color:var(--text2);line-height:1.7}

/* BADGE */
.fdb-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-bg);border:1px solid var(--gold-border);
  border-radius:100px;padding:5px 14px;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)
}
.fdb-badge-green{
  background:var(--green-bg);border-color:var(--green-border);color:var(--green)
}

/* BUTTON CTA — padrao unico em todo o funil */
.fdb-btn{
  width:100%;padding:18px 24px;
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#000;
  font-family:var(--sans);font-size:18px;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;
  border:none;border-radius:var(--radius-md);
  cursor:pointer;
  transition:transform .15s,box-shadow .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:58px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
.fdb-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(45,212,160,.3)}
.fdb-btn:active{transform:translateY(0)}
.fdb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.fdb-btn-gold{
  background:linear-gradient(135deg,var(--gold),#F4E5A1);
  color:#000
}
.fdb-btn-gold:hover{box-shadow:0 12px 32px rgba(212,175,55,.3)}
.fdb-btn-outline{
  background:transparent;
  border:1.5px solid var(--border2);
  color:var(--text2)
}
.fdb-btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:none;box-shadow:none}

/* INPUT — padrao unico */
.fdb-input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:var(--radius-md);
  padding:16px 16px;
  color:var(--text);
  font-family:var(--sans);font-size:17px;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
  min-height:54px
}
.fdb-input::placeholder{color:var(--muted)}
.fdb-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(45,212,160,.1)}

/* LABEL */
.fdb-label{
  display:block;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px
}

/* BENEFITS LIST */
.fdb-benefits{margin-bottom:24px}
.fdb-benefit{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border)
}
.fdb-benefit:last-child{border-bottom:none}
.fdb-benefit-icon{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:2px}
.fdb-benefit span{font-size:14px;color:var(--text2);line-height:1.4}
.fdb-benefit strong{color:var(--text);font-weight:600}

/* GUARANTEE */
.fdb-guarantee{
  background:var(--green-bg);border:1px solid var(--green-border);
  border-radius:var(--radius-md);padding:16px;margin-bottom:24px;
  display:flex;gap:12px;align-items:flex-start
}
.fdb-guarantee svg{width:24px;height:24px;color:var(--green);flex-shrink:0}
.fdb-guarantee p{font-size:13px;color:var(--text2);line-height:1.5}
.fdb-guarantee strong{color:var(--text)}

/* SOCIAL PROOF */
.fdb-social{text-align:center;margin-bottom:24px;font-size:13px;color:var(--text2)}
.fdb-social strong{color:var(--gold)}

/* TIMER BAR */
.fdb-timer{
  background:var(--red-bg);border-bottom:1px solid rgba(239,68,68,.15);
  padding:10px 20px;text-align:center;
  font-size:13px;font-weight:700;color:var(--red)
}
.fdb-timer.urgent{animation:fdb-pulse 1s infinite}
@keyframes fdb-pulse{0%,100%{opacity:1}50%{opacity:.7}}
.fdb-timer-clock{
  font-family:monospace;font-size:16px;font-weight:800;
  letter-spacing:.05em;margin-left:8px
}

/* PROGRESS BAR (upsell flow) */
.fdb-progress{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:12px
}
.fdb-progress-steps{display:flex;align-items:center;gap:8px}
.fdb-progress-step{width:32px;height:4px;border-radius:2px;background:var(--border2)}
.fdb-progress-step.done{background:var(--green)}
.fdb-progress-step.current{background:var(--gold)}
.fdb-progress-label{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}

/* SKIP LINK */
.fdb-skip{
  display:block;text-align:center;margin-top:16px;
  font-size:13px;color:var(--muted);cursor:pointer;
  padding:12px;border:none;background:none;
  width:100%;font-family:var(--sans)
}
.fdb-skip:hover{color:var(--text2)}

/* STATUS MESSAGE */
.fdb-status{
  text-align:center;padding:24px;border-radius:var(--radius-md);
  margin-bottom:16px;display:none
}
.fdb-status.success{display:block;background:var(--green-bg);border:1px solid var(--green-border)}
.fdb-status.error{display:block;background:var(--red-bg);border:1px solid rgba(239,68,68,.2)}
.fdb-status h3{font-size:18px;font-weight:700;margin-bottom:4px}
.fdb-status p{font-size:14px;color:var(--text2)}

/* FOOTER */
.fdb-footer{
  padding:24px 32px;border-top:1px solid var(--border);
  text-align:center;font-size:12px;color:var(--muted)
}
.fdb-footer a{color:var(--text2);margin:0 12px}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media(max-width:600px){
  .fdb-topbar{padding:12px 16px}
  .fdb-topbar nav{display:none}
  .fdb-container{padding:0 16px}
  .fdb-container-wide{padding:0 16px}
  .fdb-h1{font-size:clamp(22px,6vw,32px)}
  .fdb-btn{font-size:16px;padding:16px 20px}
  .fdb-input{font-size:16px;padding:15px 16px}
}

/* ============================================================================
   IN-APP BROWSER FIXES (Instagram/Facebook)
   ============================================================================ */
.fdb-input,.fdb-btn{min-height:48px}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  body{padding-bottom:env(safe-area-inset-bottom,0)}
}