/* ═══════════════════════════════════════════
   CONSTANCY — Mobile Redesign — Tokens & Base
   ═══════════════════════════════════════════ */
:root {
  /* Brand colors — kept from original Constancy */
  --slate-deep: #122740;
  --slate: #1B3559;
  --slate-light: #243F6A;
  --slate-deeper: #0B1929;

  --green: #00a859;       /* "terracotta" in original, but is green */
  --green-hover: #00904a;
  --green-light: #2BC078;
  --green-soft: rgba(0, 168, 89, 0.08);

  --cream: #FAF8F5;
  --cream-dark: #EFEAE1;
  --cream-warm: #F5EFE5;
  --warm-white: #F5F0E8;

  --ink: #16181C;          /* primary text */
  --ink-2: #2A2F38;        /* secondary text */
  --muted: #595F6B;        /* muted, AAA on cream */
  --muted-2: #7B828F;      /* hint text */
  --hairline: rgba(18, 39, 64, 0.10);
  --hairline-dark: rgba(245, 240, 232, 0.10);

  /* Type — bigger for 45+ audience */
  --fs-body: 18px;
  --fs-body-sm: 16px;
  --fs-caption: 14px;
  --fs-label: 13px;
  --fs-h1: 44px;
  --fs-h2: 36px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --lh-body: 1.55;
  --lh-tight: 1.1;

  --serif: 'Fraunces', 'Playfair Display', ui-serif, Georgia, serif;
  --sans: 'Manrope', 'Geist', ui-sans-serif, system-ui, sans-serif;

  /* Variant defaults (Premium) */
  --radius-card: 22px;
  --radius-btn: 999px;
  --card-bg: rgba(255, 255, 255, 0.75);
  --card-bg-dark: rgba(245, 240, 232, 0.04);
  --card-border: rgba(18, 39, 64, 0.06);
  --card-border-dark: rgba(245, 240, 232, 0.08);
  --card-shadow: 0 2px 10px rgba(18, 39, 64, 0.04), 0 12px 36px rgba(18, 39, 64, 0.06);
  --card-blur: 14px;
  --section-pad-y: 64px;
  --section-pad-x: 22px;
}

/* ── Variants ──────────────────────────── */
[data-variant="calmo"] {
  --radius-card: 14px;
  --radius-btn: 12px;
  --card-bg: #FFFFFF;
  --card-bg-dark: rgba(245, 240, 232, 0.025);
  --card-border: rgba(18, 39, 64, 0.10);
  --card-border-dark: rgba(245, 240, 232, 0.12);
  --card-shadow: 0 1px 0 rgba(18, 39, 64, 0.04);
  --card-blur: 0px;
}
[data-variant="conversa"] {
  --radius-card: 28px;
  --radius-btn: 18px;
  --card-bg: #FFFFFF;
  --card-bg-dark: #1B3559;
  --card-border: transparent;
  --card-border-dark: transparent;
  --card-shadow: 0 8px 0 rgba(0, 0, 0, 0.04);
  --card-blur: 0px;
}

/* ── Reset / Base ──────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: #0B1929;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: var(--lh-tight); }

/* ── Stage / Phone frame (preview only) ── */
#stage {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #14304F 0%, #0B1929 60%, #060F1A 100%);
  display: flex;
  justify-content: center;
  padding: 0;
}
#phone-frame {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--cream);
  position: relative;
  overflow-x: clip;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 30px 80px rgba(0,0,0,0.5);
}
@media (max-width: 460px) {
  #phone-frame {
    box-shadow: none;
  }
}
#phone-screen { position: relative; }

/* ═══════════════════════════════════════════
   DESKTOP shell — break out of phone frame
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) {
  #stage { background: var(--cream); padding: 0; }
  #phone-frame { max-width: 100%; box-shadow: none; }

  :root {
    --section-pad-y: 120px;
    --section-pad-x: 80px;
  }

  section { padding-left: 0; padding-right: 0; }

  /* Inner container — every section wraps its content with .container on desktop */
  .container-desktop {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 80px;
    position: relative;
    z-index: 1;
  }

  /* Section transition radius bigger on desktop */
  .section-round-top { border-radius: 64px 64px 0 0; margin-top: -48px; }

  /* Typography scales bigger */
  .h1 { font-size: clamp(48px, 5vw, 80px) !important; }
  .h2 { font-size: clamp(40px, 4vw, 64px) !important; }
}

@media (min-width: 1280px) {
  :root { --section-pad-y: 140px; }
}

/* Single-column sections — center inner content on desktop */
@media (min-width: 1024px) {
  #vsl > *,
  #realidade > *,
  #faq > *,
  #comprar > *,
  #app-footer > * {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  /* FAQ items get a slight bump in size on desktop */
  #faq > div { max-width: 820px; }
  /* FinalCTA pricing card sits a bit wider */
  #comprar > div { max-width: 720px; }

  /* PhotoCarousel — keep scroll but center its track and allow wider items */
  .scroll-x {
    padding-left: max(80px, calc((100vw - 1100px) / 2));
    padding-right: max(80px, calc((100vw - 1100px) / 2));
  }
  .scroll-x > div { width: 340px !important; }
}

/* ═══════════════════════════════════════════
   Typography utilities
   ═══════════════════════════════════════════ */
.serif { font-family: var(--serif); font-weight: 400; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.sans { font-family: var(--sans); }

.h1 {
  font-size: clamp(36px, 11vw, var(--fs-h1));
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.h2 {
  font-size: clamp(30px, 8.5vw, var(--fs-h2));
  letter-spacing: -0.022em;
  line-height: 1.05;
}
.h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.h4 {
  font-size: var(--fs-h4);
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  flex-shrink: 0;
}
.eyebrow.centered { justify-content: center; }
.eyebrow.on-dark { color: var(--green-light); }
.eyebrow.on-dark::before { background: var(--green-light); }

/* ═══════════════════════════════════════════
   Card primitives — re-skinned by variant
   ═══════════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
  box-shadow: var(--card-shadow);
  padding: 24px;
}
.card-dark {
  background: var(--card-bg-dark);
  border: 1px solid var(--card-border-dark);
  border-radius: var(--radius-card);
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
  padding: 24px;
}
[data-variant="conversa"] .card-dark {
  background: #1B3559;
}

/* ═══════════════════════════════════════════
   Buttons — large tap targets (56px+)
   ═══════════════════════════════════════════ */
.btn {
  min-height: 56px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .2s ease, background .2s ease, box-shadow .25s ease;
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--green);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0,168,89,0.30);
}
.btn-primary:hover { background: var(--green-hover); box-shadow: 0 12px 32px rgba(0,168,89,0.40); }

.btn-secondary {
  background: rgba(0,168,89,0.08);
  color: var(--green-hover);
  border: 1.5px solid rgba(0,168,89,0.25);
}
.btn-secondary.on-dark {
  background: rgba(245,240,232,0.06);
  color: #FFFFFF;
  border-color: rgba(245,240,232,0.18);
}

.btn-ghost-dark {
  background: rgba(245,240,232,0.04);
  color: var(--warm-white);
  border: 1px solid rgba(245,240,232,0.12);
}

/* ═══════════════════════════════════════════
   Reveal animations
   ═══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1), transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════
   Float animations (hero images)
   ═══════════════════════════════════════════ */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-10px) rotate(0.8deg); }
}
@keyframes float-delay {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  33%       { transform: translateY(-8px) rotate(-4deg); }
  66%       { transform: translateY(-3px) rotate(-5.5deg); }
}
.float-slow  { animation: float-slow 7s ease-in-out infinite; }
.float-delay { animation: float-delay 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .float-slow, .float-delay { animation: none; }
}

/* ═══════════════════════════════════════════
   Section base
   ═══════════════════════════════════════════ */
section {
  position: relative;
  padding: var(--section-pad-y) var(--section-pad-x);
  overflow: hidden;
}
.bg-cream { background: var(--cream); }
.bg-cream-dark { background: var(--cream-dark); }
.bg-slate-deep { background: var(--slate-deep); color: var(--warm-white); }
.bg-slate-grad {
  background: linear-gradient(180deg, var(--slate) 0%, var(--slate-deep) 100%);
  color: var(--warm-white);
}

/* Section rounded transitions */
.section-round-top {
  border-radius: 36px 36px 0 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════
   Hairline divider
   ═══════════════════════════════════════════ */
.hairline { height: 1px; background: var(--hairline); }
.hairline-dark { height: 1px; background: var(--hairline-dark); }

/* ═══════════════════════════════════════════
   Photo carousel scrollbar hide
   ═══════════════════════════════════════════ */
.scroll-x {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 4px 22px 24px;
  margin: 0 -22px;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: center; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   Number watermark
   ═══════════════════════════════════════════ */
.num-watermark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 96px;
  line-height: 0.7;
  color: rgba(0, 168, 89, 0.10);
  letter-spacing: -0.03em;
  user-select: none;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   Floating UI (Whatsapp + sticky CTA)
   ═══════════════════════════════════════════ */
.fab-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 80;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(37,211,102,0.40);
  transition: transform .25s ease;
}
.fab-whatsapp:active { transform: scale(0.95); }
@media (min-width: 1024px) {
  .fab-whatsapp { width: 64px; height: 64px; bottom: 32px; right: 32px; }
}

.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 70;
  width: calc(100% - 24px);
  max-width: 406px;
  transform: translateX(-50%) translateY(120%);
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), opacity .35s;
  opacity: 0;
  display: flex;
  gap: 10px;
  pointer-events: none;
}
.sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta .btn { flex: 1; min-height: 52px; }
.sticky-cta .btn-secondary { background: rgba(255,255,255,0.94); color: var(--green-hover); border-color: rgba(0,168,89,0.20); backdrop-filter: blur(8px); }
@media (min-width: 1024px) {
  .sticky-cta { display: none !important; }
}

/* ═══════════════════════════════════════════
   Variant-specific tweaks
   ═══════════════════════════════════════════ */
[data-variant="calmo"] .num-watermark { display: none; }
[data-variant="calmo"] section { --section-pad-y: 72px; }
[data-variant="calmo"] .eyebrow { letter-spacing: 0.22em; }

[data-variant="conversa"] section { --section-pad-y: 56px; }
[data-variant="conversa"] .h1 { font-size: clamp(40px, 12vw, 52px); }
[data-variant="conversa"] .h2 { font-size: clamp(32px, 9.5vw, 40px); }
[data-variant="conversa"] .btn { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
[data-variant="conversa"] .card,
[data-variant="conversa"] .card-dark { box-shadow: none; }

/* ═══════════════════════════════════════════
   Misc helpers
   ═══════════════════════════════════════════ */
.grid-stack { display: grid; gap: 14px; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.center { text-align: center; }

.accent-bar {
  width: 48px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,168,89,0.08);
  color: var(--green-hover);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tag.on-dark {
  background: rgba(245,240,232,0.06);
  color: var(--green-light);
  border: 1px solid rgba(0,168,89,0.18);
}