/* ══════════════════════════════════════════════
   ISTORIFY — BRAND SYSTEM v3
   Violeta · Ciano · Navy · Premium
   ══════════════════════════════════════════════ */

/* ── VARIÁVEIS GLOBAIS ── */
:root {
  /* Violeta → Ciano (paleta do logo) */
  --p:    #885EFA;
  --pl:   #A07EFC;
  --pd:   #6B4FE0;
  --p-rgb: 136,94,250;

  /* Gradiente principal do logo */
  --grad: linear-gradient(135deg, #885EFA 0%, #39B8FC 100%);
  --grad-r: linear-gradient(135deg, #39B8FC 0%, #885EFA 100%);

  /* Texto / Navy */
  --navy: #071340;
  --gray: #4A5070;

  /* Ciano — acento secundário */
  --cyan:  #39B8FC;
  --cyand: #1A9EE8;

  /* Âmbar / ouro — para preços e destaques de valor */
  --amber:  #F5A623;
  --amberd: #D4880F;

  /* Backgrounds suaves */
  --lav:  #F0EEFF;
  --lavm: #E2DCFF;

  /* Acentos */
  --pink:  #F43F9A;
  --blue:  #39B8FC;
  --green: #10B981;
  --red:   #EF4444;

  /* Shadows */
  --sh:  0 1px 0 rgba(136,94,250,.08), 0 2px 8px rgba(136,94,250,.08);
  --shm: 0 2px 16px rgba(136,94,250,.12);
  --shl: 0 4px 24px rgba(136,94,250,.16);
}

/* ── RESET BASE ── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

/* ── NAV / TOPBAR ── */
.topbar,
.nav {
  border-bottom: 1.5px solid var(--lavm) !important;
  box-shadow: none !important;
}
.nav-login {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: var(--gray) !important;
}
.nav-links a {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* ── LOGO ── */
.logo-icon,
.logo-ico,
.logo-mark-sq,
.logo-ipill {
  background: var(--grad) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

/* ── BOTÕES PRIMÁRIOS — gradiente ── */
.btn-primary,
.btn-p,
.btn-main,
a.nav-cta,
.btn-nav-primary {
  background: var(--grad) !important;
  box-shadow: 0 3px 14px rgba(136,94,250,.28) !important;
  border-radius: 100px !important;
  transition: opacity .18s, transform .18s !important;
}
.btn-primary:hover:not(:disabled),
.btn-p:hover:not(:disabled),
.btn-main:hover:not(:disabled),
.btn-nav-primary:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(136,94,250,.38) !important;
}

/* ── BOTÕES ÂMBAR / CTA PRINCIPAL ── */
.btn-a,
.btn-amber {
  background: var(--grad) !important;
  box-shadow: 0 3px 14px rgba(136,94,250,.28) !important;
  border-radius: 100px !important;
}
.btn-a:hover:not(:disabled),
.btn-amber:hover:not(:disabled) {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* ── BOTÃO BIG / HERO CTA ── */
a.btn-big,
a.hero-cta,
a.btn-create,
a.btn-download,
a.btn-buy,
a.btn-new {
  box-shadow: none !important;
}
.btn-download,
.btn-buy-big {
  background: var(--grad) !important;
  box-shadow: none !important;
}
.btn-download:hover,
.btn-buy-big:hover {
  opacity: .9 !important;
}

/* ── CARDS ── */
.wcard {
  box-shadow: none !important;
  border: 1.5px solid var(--lavm) !important;
}
.faq-item,
.book-card,
.book-card:hover {
  box-shadow: none !important;
  border: 1.5px solid var(--lavm) !important;
}
.book-card:hover {
  border-color: var(--p) !important;
}
.book-cover-card,
.page-card {
  box-shadow: none !important;
  border: 1.5px solid var(--lavm) !important;
}

/* ── SECÇÕES ── */
.section { background: transparent; overflow: hidden; position: relative; }
.section:nth-child(even) { background: var(--lav); }

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--lav) !important;
  border-top: 1px solid var(--lavm) !important;
  border-bottom: 1px solid var(--lavm) !important;
}

/* ── INPUTS ── */
.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px rgba(136,94,250,.14) !important;
}

/* ── PROGRESS ── */
.mini-progress-bar,
.stepper-progress {
  background: var(--grad) !important;
}
.st.active .st-dot {
  box-shadow: none !important;
  animation: none !important;
}

/* ── FAQ ── */
.faq-q:hover { background: var(--lav) !important; }
.faq-item.open .faq-arrow { color: var(--p) !important; }

/* ── FOOTER ── */
footer,
.footer {
  background: #040D28 !important;
}

/* ── BADGES / TAGS ── */
.stag,
.hero-tag,
.faq-hero-tag {
  background: var(--lavm) !important;
  color: var(--p) !important;
}

/* ── STICKY BAR ── */
.sticky-bar { box-shadow: 0 -2px 0 var(--lavm) !important; }

/* ── SURPRISE BUTTON ── */
button[onclick="surpriseMe()"] {
  background: linear-gradient(135deg, #F43F9A, #885EFA) !important;
  box-shadow: none !important;
}

/* ── UPLOAD ZONE ── */
.upload-zone { border-color: var(--lavm) !important; }
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--p) !important;
  background: var(--lav) !important;
}

/* ── CHECKOUT / TRUST ── */
.trust-card {
  background: var(--lav) !important;
  border: 1px solid var(--lavm) !important;
}

/* ── SUCESSO HERO ── */
.success-hero {
  background: var(--grad) !important;
}

/* ── LINKS ── */
a.link { color: var(--p) !important; }

/* ── PHOTO TIPS ── */
.photo-tips-box {
  background: var(--lav) !important;
  border-color: var(--lavm) !important;
}