/* ==========================================================================
   SGÓTICA — Landing Page
   style.css — Design tokens, reset, layout base e componentes
   ========================================================================== */

/* --------------------------------------------------------------------
   1. FONTES
   -------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------- */
:root{
  /* Cores — Azul escuro / Dourado / Branco */
  --navy-950: #060B1A;
  --navy-900: #0A1128;
  --navy-800: #0D1B3E;
  --navy-700: #142450;
  --navy-600: #1C3268;
  --blue-500: #2E5CFF;
  --blue-400: #5B85FF;

  --gold-500: #D4AF37;
  --gold-400: #E8C468;
  --gold-300: #F3DFA0;
  --gold-glow: rgba(212, 175, 55, .35);

  --white: #FFFFFF;
  --paper: #F7F8FC;
  --paper-dim: #EEF1F8;

  --ink-900: #0A1128;
  --ink-600: #4A5578;
  --ink-400: #8791AC;

  --line: rgba(255,255,255,.10);
  --line-soft: rgba(10,17,40,.08);

  /* Glass */
  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-strong: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.14);
  --glass-blur: blur(20px);

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  /* Espaçamento */
  --section-pad: clamp(72px, 10vw, 140px);
  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-soft: 0 20px 60px -20px rgba(6,11,26,.35);
  --shadow-deep: 0 40px 100px -30px rgba(6,11,26,.55);
  --shadow-gold: 0 12px 40px -8px rgba(212,175,55,.45);

  /* Transições */
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: .25s var(--ease);
  --t-med: .5s var(--ease);
  --t-slow: .9s var(--ease);
}

/* --------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-900);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
svg{ display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------
   4. LAYOUT BASE
   -------------------------------------------------------------------- */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
section{ position: relative; }
.section-dark{ background: var(--navy-900); color: var(--white); }
.section-light{ background: var(--paper); color: var(--ink-900); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:'';
  width: 18px; height: 1px;
  background: var(--gold-500);
}

.section-head{
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
}
h2{ font-size: clamp(32px, 4vw, 46px); font-weight: 500; }
h2 em, h1 em{ font-style: italic; color: var(--gold-500); font-weight: 500; }
.section-light h2{ color: var(--navy-900); }

p.lead{
  font-size: 18px;
  color: var(--ink-600);
  margin-top: 16px;
}
.section-dark p.lead{ color: rgba(255,255,255,.68); }

/* --------------------------------------------------------------------
   5. LENTE — elemento de assinatura óptica (usado em toda a página)
   -------------------------------------------------------------------- */
.lens-mark{
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-500);
}
.lens-mark::after{
  content:'';
  position:absolute; inset: 8px;
  border-radius:50%;
  background: radial-gradient(circle at 32% 30%, var(--blue-400), var(--navy-700) 70%);
}

/* --------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -8px rgba(212,175,55,.55);
}
.btn-ghost{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn-ghost:hover{ background: var(--glass-bg-strong); transform: translateY(-2px); }
.btn-dark{
  background: var(--navy-900);
  color: var(--white);
}
.btn-dark:hover{ background: var(--navy-700); transform: translateY(-2px); }
.btn-outline-gold{
  background: transparent;
  color: var(--gold-400);
  border: 1.5px solid var(--gold-500);
}
.btn-outline-gold:hover{
  background: rgba(212,175,55,.12);
  transform: translateY(-2px);
}
.btn-lg{ padding: 20px 44px; font-size: 16.5px; }
.btn svg{ width: 18px; height: 18px; }

/* --------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------- */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: padding var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.header.scrolled{
  padding: 12px 0;
  background: rgba(6,11,26,.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.4);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 34px; width: auto; }
.brand-name{ font-family: var(--font-display); font-size: 20px; color: var(--white); letter-spacing: -.01em; }
.brand-name span{ color: var(--gold-500); }
/* A logo completa (ícone + wordmark) já traz o nome escrito por extenso,
   por isso o texto .brand-name ao lado dela fica oculto por padrão. */
.brand .brand-name{ display: none; }

.nav-links{ display:flex; align-items:center; gap: 26px; }
.nav-links a{
  font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.75);
  transition: color var(--t-fast);
  position: relative;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background: var(--gold-500); transition: width var(--t-fast);
}
.nav-links a:hover{ color: var(--white); }
.nav-links a:hover::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:16px; }
.btn-sm{ padding: 11px 22px; font-size: 13.5px; }

.nav-toggle{ display:none; }

/* Menu mobile — estado padrão SEMPRE escondido fora da tela.
   As regras de exibição do botão (.nav-toggle) ficam em responsive.css,
   mas a posição/ocultação do painel precisa valer em qualquer largura,
   por isso está aqui no CSS base (evita o menu "vazar" no desktop). */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy-950);
  display:flex;
  flex-direction: column;
  padding: 24px;
  transform: translateX(100%);
  transition: transform var(--t-med);
  visibility: hidden;
}
.mobile-menu.open{
  transform: translateX(0);
  visibility: visible;
}

/* --------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------- */
.hero{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(46,92,255,.28), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(212,175,55,.16), transparent 55%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 40%, var(--navy-800));
  color: var(--white);
  padding: 168px 0 120px;
  overflow: hidden;
  position: relative;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent);
  pointer-events: none;
}
.hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  font-size: 13px; font-weight: 500;
  color: var(--gold-300);
  margin-bottom: 28px;
}
.hero h1{
  font-size: clamp(38px, 5.6vw, 68px);
  color: var(--white);
  margin-bottom: 22px;
}
.hero p.lead{
  max-width: 600px;
  margin-left:auto; margin-right:auto;
  font-size: clamp(16px, 1.6vw, 19px);
}
.hero-actions{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top: 40px; flex-wrap: wrap;
}
.hero-seals{
  display:flex; align-items:center; justify-content:center; gap: 28px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.seal{
  display:flex; align-items:center; gap:9px;
  font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.82);
}
.seal svg{ width:17px; height:17px; color: var(--gold-500); flex-shrink:0; }

/* Mockup do notebook */
.hero-visual{
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 84px auto 0;
}
.notebook{
  position: relative;
  perspective: 1400px;
}
.notebook-screen{
  background: #0C1730;
  border-radius: 16px 16px 4px 4px;
  padding: 14px 14px 0;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-deep);
  transform: rotateX(3deg);
}
.notebook-bar{
  display:flex; align-items:center; gap:7px;
  padding: 0 6px 12px;
}
.notebook-bar span{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.18); }
.notebook-screenshot{
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  aspect-ratio: 16/10;
}
.notebook-screenshot img{ width:100%; height:100%; object-fit: cover; object-position: top; }
.notebook-base{
  height: 18px;
  background: linear-gradient(180deg, #1a2647, #0A1128);
  border-radius: 0 0 10px 10px;
  position: relative;
}
.notebook-base::after{
  content:'';
  position:absolute; left:50%; top:0; transform: translateX(-50%);
  width: 90px; height: 6px;
  background: #060B1A;
  border-radius: 0 0 6px 6px;
}

/* Cards flutuantes */
.floating-card{
  position:absolute;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
  z-index: 3;
}
.fc-1{ top: 6%; left: -6%; width: 200px; animation: floatY 6s ease-in-out infinite; }
.fc-2{ bottom: 12%; right: -7%; width: 210px; animation: floatY 7s ease-in-out infinite 1s; }
.fc-3{ top: 42%; right: -3%; width: 168px; animation: floatY 5.5s ease-in-out infinite .5s; }
.fc-label{ font-size: 11px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing:.08em; margin-bottom: 6px; font-family: var(--font-mono); }
.fc-value{ font-family: var(--font-display); font-size: 24px; color: var(--white); }
.fc-value small{ font-size: 13px; color: var(--gold-400); font-family: var(--font-body); font-weight: 600; }
.fc-row{ display:flex; align-items:center; gap:10px; }
.fc-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background: rgba(212,175,55,.16); color: var(--gold-500); flex-shrink:0; }
.fc-icon svg{ width:17px; height:17px; }

@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

/* --------------------------------------------------------------------
   9. OFERTA
   -------------------------------------------------------------------- */
.offer{
  padding: var(--section-pad) 0;
  background: var(--navy-900);
  color: var(--white);
  position: relative;
}
.offer-card{
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 64px);
  position: relative;
  overflow: hidden;
}
.offer-card::before{
  content:'';
  position: absolute; top:-40%; left:50%; transform: translateX(-50%);
  width: 480px; height: 320px;
  background: radial-gradient(circle, rgba(212,175,55,.28), transparent 65%);
  pointer-events: none;
}
.offer-eyebrow{ position:relative; }
.price-old{
  font-size: 19px;
  color: rgba(255,255,255,.45);
  text-decoration: line-through;
  margin-bottom: 6px;
  position: relative;
}
.price-new{
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 84px);
  color: var(--gold-400);
  line-height: 1;
  position: relative;
}
.price-new sup{ font-size: .35em; top: -.9em; margin-right:2px; }
.price-tags{
  display:flex; align-items:center; justify-content:center; gap: 14px;
  margin-top: 22px; flex-wrap: wrap;
  position: relative;
}
.price-tag{
  font-size: 13.5px; font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-border);
}
.offer-card .btn{ margin-top: 34px; position: relative; }
.offer-note{
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  position: relative;
}

/* --------------------------------------------------------------------
   10. BENEFÍCIOS
   -------------------------------------------------------------------- */
.benefits{ padding: var(--section-pad) 0; background: var(--paper); }
.benefits-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.bcard{
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  opacity: 0;
  transform: translateY(24px);
}
.bcard.in-view{ opacity:1; transform: translateY(0); }
.bcard:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold-glow);
}
.bcard-icon{
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px;
  color: var(--gold-400);
}
.bcard-icon svg{ width: 22px; height:22px; }
.bcard h3{ font-size: 18px; margin-bottom: 8px; color: var(--navy-900); font-weight: 600; font-family: var(--font-body); }
.bcard p{ font-size: 14.5px; color: var(--ink-600); }

/* --------------------------------------------------------------------
   11. DIFERENCIAIS
   -------------------------------------------------------------------- */
.diff{ padding: var(--section-pad) 0; background: var(--white); }
.diff-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.diff-visual{
  position:relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
  padding: 44px;
  overflow: hidden;
  min-height: 420px;
  display:flex; align-items:center; justify-content:center;
}
.diff-visual::before{
  content:'';
  position:absolute; width: 320px; height:320px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.35);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.diff-visual::after{
  content:'';
  position:absolute; width: 230px; height:230px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.diff-compare{
  position: relative;
  z-index: 2;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  width: 100%;
  max-width: 320px;
}
.diff-row{ display:flex; align-items:center; justify-content:space-between; padding: 13px 0; border-bottom: 1px solid var(--line); }
.diff-row:last-child{ border-bottom:none; }
.diff-row span:first-child{ font-size: 13.5px; color: rgba(255,255,255,.6); }
.diff-row span:last-child{ font-family: var(--font-display); font-size: 19px; color: var(--gold-400); }

.diff-list{ margin-top: 28px; display:flex; flex-direction:column; gap:20px; }
.diff-item{ display:flex; gap:16px; }
.diff-item-icon{
  width: 38px; height:38px; border-radius:11px; flex-shrink:0;
  background: var(--paper-dim); color: var(--navy-800);
  display:flex; align-items:center; justify-content:center;
}
.diff-item-icon svg{ width:19px; height:19px; }
.diff-item h4{ font-family: var(--font-body); font-size: 16px; font-weight:600; margin-bottom:4px; }
.diff-item p{ font-size: 14px; color: var(--ink-600); }

/* --------------------------------------------------------------------
   12. DEMONSTRAÇÃO
   -------------------------------------------------------------------- */
.demo{ padding: var(--section-pad) 0; background: var(--paper-dim); }
.demo-player{
  max-width: 920px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-deep);
  aspect-ratio: 16/9;
  background: var(--navy-950);
}
.demo-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  background:#000;
}
.demo-play{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  z-index: 3;
  width: 84px; height:84px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: var(--glass-blur);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.demo-play:hover{ transform: translate(-50%,-50%) scale(1.07); background: rgba(212,175,55,.28); }
.demo-play svg{ width: 26px; height:26px; color: var(--white); margin-left:3px; }
.demo-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding: 24px 28px;
  color: var(--white);
  background: linear-gradient(180deg, transparent, rgba(6,11,26,.75));
  transition: opacity var(--t-fast);
}
.demo-caption span{ font-family: var(--font-mono); font-size:12px; color: var(--gold-400); letter-spacing:.08em; }
.demo-caption h4{ font-family: var(--font-body); font-weight:600; font-size:17px; margin-top:4px; }

/* Quando o vídeo está tocando, esconde o botão de play e a legenda
   para não sobrepor os controles nativos do player. */
.demo-player.playing .demo-play,
.demo-player.playing .demo-caption{
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------
   13. GALERIA
   -------------------------------------------------------------------- */
.gallery{ padding: var(--section-pad) 0; background: var(--white); }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.gallery-item{
  border-radius: var(--radius-md);
  overflow:hidden;
  position:relative;
  border: 1px solid var(--line-soft);
  aspect-ratio: 4/3;
  cursor: pointer;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; object-position: top; transition: transform var(--t-med); }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent, rgba(6,11,26,.82));
  color: var(--white);
  font-size: 13.5px; font-weight: 600;
  opacity:0; transition: opacity var(--t-fast);
}
.gallery-item:hover .gallery-caption{ opacity:1; }

.gallery-zoom-hint{
  position:absolute; top:12px; right:12px;
  width: 34px; height:34px;
  border-radius:50%;
  background: rgba(6,11,26,.55);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: var(--glass-blur);
  display:flex; align-items:center; justify-content:center;
  color: var(--white);
  opacity:0; transform: scale(.85);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.gallery-zoom-hint svg{ width:16px; height:16px; }
.gallery-item:hover .gallery-zoom-hint{ opacity:1; transform: scale(1); }

/* --------------------------------------------------------------------
   14. LIGHTBOX
   -------------------------------------------------------------------- */
.lightbox{
  position: fixed; inset:0; z-index: 300;
  background: rgba(6,11,26,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
  padding: 24px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width: min(1100px, 90vw);
  max-height: 82vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
  border: 1px solid var(--line);
  opacity:0; transform: scale(.96);
  transition: opacity var(--t-med), transform var(--t-med);
}
.lightbox.open img{ opacity:1; transform: scale(1); }
.lightbox-close{
  position:absolute; top: 24px; right: 24px;
  width: 46px; height:46px; border-radius:50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox-close:hover{ background: rgba(212,175,55,.28); transform: rotate(90deg); }
.lightbox-close svg{ width:20px; height:20px; }
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width: 50px; height:50px; border-radius:50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--t-fast);
}
.lightbox-nav:hover{ background: rgba(212,175,55,.28); }
.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-prev{ left: 24px; }
.lightbox-next{ right: 24px; }
.lightbox-caption{
  position:absolute; bottom: 32px; left:0; right:0;
  text-align:center;
  color: rgba(255,255,255,.75);
  font-size: 14px; font-weight:500;
}

/* --------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------- */
.faq{ padding: var(--section-pad) 0; background: var(--paper-dim); }
.faq-list{ max-width: 780px; margin: 0 auto; }
.faq-item{
  border-bottom: 1px solid var(--line-soft);
}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 24px 4px;
  text-align:left;
  font-size: 16.5px; font-weight: 600;
  color: var(--navy-900);
}
.faq-q svg{ width:20px; height:20px; flex-shrink:0; color: var(--gold-500); transition: transform var(--t-fast); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); }
.faq-a{
  max-height: 0;
  overflow:hidden;
  transition: max-height var(--t-med), padding var(--t-med);
  color: var(--ink-600);
  font-size: 14.5px;
  padding: 0 4px;
}
.faq-item.open .faq-a{ max-height: 240px; padding: 0 4px 24px; }

/* --------------------------------------------------------------------
   16. SUPORTE
   -------------------------------------------------------------------- */
.support{
  padding: var(--section-pad) 0;
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: var(--white);
  text-align:center;
  position: relative;
  overflow:hidden;
}
.support::before{
  content:'';
  position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.18), transparent 65%);
  top:-200px; left:50%; transform:translateX(-50%);
}
.support-inner{ position:relative; z-index:2; max-width: 560px; margin:0 auto; }
.support .btn{ margin-top: 30px; }

/* --------------------------------------------------------------------
   17. RODAPÉ
   -------------------------------------------------------------------- */
.footer{
  background: var(--navy-950);
  color: rgba(255,255,255,.6);
  padding: 56px 0 28px;
}
.footer-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 40px; flex-wrap:wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.footer-brand{ max-width: 300px; }
.footer-brand .brand{ margin-bottom: 14px; }
.footer-brand .brand img{ height: 52px; }
.footer-brand p{ font-size: 13.5px; line-height:1.7; }
.footer-cols{ display:flex; gap: 64px; flex-wrap:wrap; }
.footer-col h5{ font-size: 13px; color: var(--white); text-transform: uppercase; letter-spacing:.06em; margin-bottom: 16px; font-family: var(--font-body); }
.footer-col a{ display:block; font-size: 14px; margin-bottom: 11px; transition: color var(--t-fast); }
.footer-col a:hover{ color: var(--gold-400); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 26px; font-size: 12.5px; flex-wrap:wrap; gap:12px;
}

/* --------------------------------------------------------------------
   18. PROVA SOCIAL — depoimentos reais via WhatsApp + contador de vendas
   -------------------------------------------------------------------- */
.social-proof{ padding: var(--section-pad) 0; background: var(--paper-dim); }

.proof-stat{
  display:flex; align-items:center; justify-content:center; gap: 14px;
  margin: 0 auto 44px;
  width: fit-content;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
}
.proof-stat-number{
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--navy-900);
  line-height:1;
}
.proof-stat-number span{ color: var(--gold-500); }
.proof-stat-label{
  font-size: 13px; font-weight: 600;
  color: var(--ink-600);
  border-left: 1px solid var(--line-soft);
  padding-left: 14px;
}

.proof-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}
.proof-card{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.proof-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.proof-card img{ width:100%; display:block; aspect-ratio: 3/4; object-fit: cover; }
.proof-card-tag{
  display:flex; align-items:center; gap:8px;
  padding: 14px 16px;
  font-size: 12.5px; font-weight:600;
  color: var(--ink-600);
}
.proof-card-tag svg{ width:15px; height:15px; color:#25D366; flex-shrink:0; }

/* --------------------------------------------------------------------
   19. VERSÃO WEB — hero com ilustração, cards de preparação e
       formulário de lista de espera (usado em versao-web.html)
   -------------------------------------------------------------------- */

/* Ilustração da nuvem no hero, substitui o mockup do notebook nesta página */
.cloud-illustration{
  max-width: 640px;
  margin: 72px auto 0;
  position: relative;
}
.cloud-illustration svg{ width:100%; height:auto; }
.cloud-illustration .floating-card{ position:absolute; }
.cloud-illustration .fc-1{ top: -6%; left: -8%; width: 180px; }
.cloud-illustration .fc-2{ bottom: -4%; right: -8%; width: 190px; }

/* Cards "o que está sendo preparado" */
.prep{ padding: var(--section-pad) 0; background: var(--paper); }
.prep-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.prep-card{
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.prep-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold-glow);
}
.prep-card-icon{
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px;
  color: var(--gold-400);
}
.prep-card-icon svg{ width: 22px; height:22px; }
.prep-card h3{ font-size: 17.5px; margin-bottom: 8px; color: var(--navy-900); font-weight: 600; font-family: var(--font-body); }
.prep-card p{ font-size: 14px; color: var(--ink-600); }
.prep-card-tag{
  display:inline-block;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-500);
  background: rgba(212,175,55,.1);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

/* Lista de espera */
.waitlist{
  padding: var(--section-pad) 0;
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.waitlist::before{
  content:'';
  position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.16), transparent 65%);
  top:-220px; right:-120px;
}
.waitlist-card{
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 56px);
}
.waitlist-head{ text-align:center; margin-bottom: 36px; }
.waitlist-head h2{ color: var(--white); }
.waitlist-head p.lead{ margin-top: 12px; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field{ display:flex; flex-direction:column; gap: 8px; text-align:left; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.78);
}
.form-field input{
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--white);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-field input::placeholder{ color: rgba(255,255,255,.35); }
.form-field input:focus{
  outline: none;
  border-color: var(--gold-500);
  background: rgba(255,255,255,.1);
}
.form-field input.invalid{ border-color: #E56A6A; }
.form-error{
  font-size: 12px;
  color: #FF9A9A;
  min-height: 15px;
}
.waitlist-form .btn{
  width: 100%;
  margin-top: 8px;
}
.waitlist-note{
  text-align:center;
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
  margin-top: 16px;
}

/* Mensagem de sucesso, exibida no lugar do formulário após o envio */
.waitlist-success{
  display: none;
  text-align: center;
  padding: 20px 0;
}
.waitlist-success.show{ display:block; }
.waitlist-success-icon{
  width: 64px; height:64px; margin: 0 auto 20px;
  border-radius:50%;
  background: rgba(46, 204, 113, .16);
  display:flex; align-items:center; justify-content:center;
  color:#2ECC71;
}
.waitlist-success-icon svg{ width: 28px; height:28px; }
.waitlist-success h3{ font-family: var(--font-display); font-size: 22px; color: var(--white); margin-bottom: 10px; font-weight: 500; }
.waitlist-success p{ font-size: 14.5px; color: rgba(255,255,255,.7); max-width: 420px; margin: 0 auto; }
.waitlist-form.hide{ display:none; }

/* --------------------------------------------------------------------
   21. PÁGINAS LEGAIS — Termos de Uso / Política de Privacidade
   -------------------------------------------------------------------- */
.legal-hero{
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: var(--white);
  padding: 152px 0 64px;
}
.legal-hero .container{ max-width: 800px; }
.legal-hero h1{ font-size: clamp(30px, 4vw, 42px); color: var(--white); margin-bottom: 14px; }
.legal-hero .updated{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size: 12.5px;
  color: rgba(255,255,255,.55);
  margin-top: 6px;
}

.legal-content{ background: var(--white); padding: 64px 0 var(--section-pad); }
.legal-content .container{ max-width: 760px; }
.legal-body h2{
  font-size: 22px;
  color: var(--navy-900);
  margin-top: 44px;
  margin-bottom: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.legal-body h2:first-child{ margin-top: 0; border-top: none; padding-top: 0; }
.legal-body p{ font-size: 15px; color: var(--ink-600); margin-bottom: 14px; }
.legal-body ul{ margin: 0 0 14px; padding-left: 20px; }
.legal-body li{ font-size: 15px; color: var(--ink-600); margin-bottom: 8px; list-style: disc; }
.legal-body li::marker{ color: var(--gold-500); }
.legal-body strong{ color: var(--navy-900); font-weight: 600; }
.legal-highlight{
  background: var(--paper-dim);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 14.5px;
  color: var(--ink-600);
}
.legal-toc{
  background: var(--paper-dim);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  margin-bottom: 40px;
}
.legal-toc h3{ font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing:.06em; color: var(--ink-400); margin-bottom: 14px; }
.legal-toc ol{ padding-left: 18px; display:flex; flex-direction:column; gap: 7px; }
.legal-toc li{ font-size: 14px; }
.legal-toc a{ color: var(--navy-800); font-weight: 500; }
.legal-toc a:hover{ color: var(--gold-500); }

/* --------------------------------------------------------------------
   22. UTILITÁRIOS DE ANIMAÇÃO (controlados via animations.js)
   -------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }