/* ==========================================================================
   GM Insurance Group — Los 5 Secretos (landing de captación de leads)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* --- Paleta (muestreada del PDF real de la marca) --- */
  --bg: #060B1E;
  --bg-2: #0A1530;
  --bg-3: #0D1C3F;
  --card: #0C1A38;
  --card-2: #0F2148;
  --ink: #F4F6FB;
  --ink-soft: rgba(244, 246, 251, 0.74);
  --ink-mute: rgba(244, 246, 251, 0.52);
  --gold: #F3B93A;
  --gold-soft: #F7CB6B;
  --gold-deep: #C9922A;
  --blue: #2E9BFF;
  --blue-soft: #6FBBFF;
  --blue-deep: #0B6FE0;
  --line: rgba(244, 246, 251, 0.10);
  --line-strong: rgba(244, 246, 251, 0.18);

  --font-display: "Space Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 76px;
}

/* --- Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* --- Defensive: split/reveal elements never stay invisible --- */
.reveal[data-split] { opacity: 1; transform: none; }
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Kicker / eyebrow label --- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold-soft);
  display: inline-block;
}

.section-head { max-width: 640px; margin-bottom: 30px; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-top: 10px; }
.section-head p { color: var(--ink-soft); font-size: 1.02rem; margin-top: 10px; }

section { position: relative; padding-block: clamp(40px, 5.5vw, 72px); }
.section-alt { background: var(--bg-2); }

/* --- Ambient glow halos (functional, not intrusive) --- */
.halo {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  opacity: 0.55;
}
.halo-gold { background: radial-gradient(45% 55% at 30% 30%, rgba(243, 185, 58, 0.35), transparent 70%); }
.halo-blue { background: radial-gradient(45% 55% at 75% 40%, rgba(46, 155, 255, 0.30), transparent 70%); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
  will-change: transform;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  color: #1a1204;
  box-shadow: 0 10px 30px -8px rgba(243, 185, 58, 0.55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -8px rgba(243, 185, 58, 0.7); }
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(244, 246, 251, 0.06);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(244, 246, 251, 0.1); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-lg { padding: 19px 34px; font-size: 1.08rem; border-radius: 14px; }

.btn-icon { display: inline-flex; }
.btn-icon svg { width: 18px; height: 18px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(6, 11, 30, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 18px; }
/* Below 560px there isn't room for logo + phone + the gold CTA without
   squeezing the logo out of its aspect ratio (verified: it was rendering
   at 55px instead of its correct ~89px). The hero CTA covers this same
   action a few lines down, so the header button is safe to drop here. */
@media (max-width: 559px) { .header-actions .btn { display: none; } }
.phone-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--ink-soft);
  transition: color .2s;
  padding: 12px;
  margin: -12px;
}
.phone-link:hover { color: var(--gold-soft); }
.phone-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.phone-link span.phone-label { display: none; }
@media (min-width: 560px) { .phone-link span.phone-label { display: inline; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(32px, 5vw, 56px);
  overflow: hidden;
}
.hero-mesh {
  position: absolute;
  inset: -20% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 45% at 18% 22%, rgba(243, 185, 58, 0.28), transparent 68%),
    radial-gradient(42% 50% at 82% 60%, rgba(46, 155, 255, 0.24), transparent 70%);
  filter: blur(70px);
  animation: meshDrift 26s ease-in-out infinite;
}
@keyframes meshDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2%, 2%, 0) scale(1.06); }
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 40px; }
}

.hero-copy h1 {
  margin-top: 12px;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  text-wrap: balance;
  max-width: 16ch;
}
.hero-copy h1 .accent { color: var(--gold-soft); }
.hero-sub {
  margin-top: 14px;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--ink-soft);
  max-width: 52ch;
}
.hero-cta-row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero-microcopy {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
}

/* Hero book visual — interactive "look inside" preview */
.hero-visual { position: relative; display: flex; justify-content: center; }
.book-frame {
  position: relative;
  width: min(320px, 78vw);
  transform: rotate(-3deg);
  transition: transform .5s var(--ease-out);
}
.book-frame:hover { transform: rotate(-1deg) translateY(-4px); }
.book-cover { position: relative; }
.book-badge {
  position: absolute;
  top: -16px;
  right: -14px;
  z-index: 3;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  color: #1a1204;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 12px 26px -8px rgba(243,185,58,0.6);
  transform: rotate(6deg);
}
.book-glow {
  position: absolute;
  inset: 8% 4%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 45%, rgba(243,185,58,0.4), transparent 72%);
  filter: blur(46px);
}

.preview-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,0.65), 0 0 0 1px rgba(244,246,251,0.08);
}
.preview-spacer { display: block; width: 100%; visibility: hidden; }
.preview-frame img[data-preview-slide] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.preview-frame img[data-preview-slide].is-active { opacity: 1; }
.preview-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6, 11, 30, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 246, 251, 0.16);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
}
.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); flex-shrink: 0; }

.preview-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.preview-arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(244, 246, 251, 0.04);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.preview-arrow:hover { background: rgba(244, 246, 251, 0.1); }
.preview-dots { display: flex; gap: 7px; }
.preview-dots button {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0; padding: 0;
  background: var(--line-strong);
  transition: background .2s, transform .2s;
}
.preview-dots button.is-active { background: var(--gold-soft); transform: scale(1.3); }
.preview-caption {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-align: center;
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 760px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.stat-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
}
.stat-desc { margin-top: 12px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.stat-source {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Historia (dos personas)
   ========================================================================== */
.story-callout {
  margin-top: 18px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 14px;
  padding: 22px 24px;
}
.story-callout .num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue-soft);
  flex-shrink: 0;
}
.story-callout p { color: var(--ink-soft); font-size: 0.96rem; }
.story-callout strong { color: var(--ink); }

.persona-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .persona-grid { grid-template-columns: 1fr 1fr; } }
.persona-card {
  border-radius: 14px;
  padding: 22px;
  border: 1px solid var(--line);
}
.persona-card.a { background: var(--card); }
.persona-card.b { background: linear-gradient(160deg, rgba(243,185,58,0.10), var(--card)); border-color: rgba(243,185,58,0.28); }
.persona-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.persona-card.b .persona-tag { color: var(--gold-soft); }
.persona-card h4 { margin-top: 10px; font-size: 1.05rem; }
.persona-card p.detail { margin-top: 8px; color: var(--ink-soft); font-size: 0.9rem; }

.story-close {
  margin-top: 16px;
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.story-close strong { color: var(--gold-soft); }

/* ==========================================================================
   Secretos carousel
   ========================================================================== */
.secrets-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding-block: 6px 12px;
  padding-inline: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.secrets-track::-webkit-scrollbar { height: 6px; }
.secrets-track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.secret-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(300px, 78vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  transform-style: preserve-3d;
}
.secret-card:hover { border-color: var(--line-strong); box-shadow: 0 22px 48px -20px rgba(0,0,0,0.55); }
.secret-card.is-best {
  border-color: rgba(243, 185, 58, 0.45);
  background: linear-gradient(160deg, rgba(243,185,58,0.12), var(--card) 60%);
}
.secret-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-soft);
}
.secret-card.is-best .secret-num {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  color: #1a1204;
  border-color: transparent;
}
.secret-best-tag {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.secret-card h4 { margin-top: 14px; font-size: 1.1rem; }
.secret-card p { margin-top: 10px; color: var(--ink-soft); font-size: 0.9rem; }

.secrets-cta { margin-top: 20px; display: flex; justify-content: center; }

/* ==========================================================================
   Sin humo / confianza
   ========================================================================== */
.honesty-list { margin-top: 18px; display: grid; gap: 12px; }
.honesty-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.honesty-item .mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(243, 185, 58, 0.14);
  color: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}
.honesty-item p { color: var(--ink-soft); font-size: 0.94rem; }
.honesty-item strong { color: var(--ink); }

.compare-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-card { border-radius: 14px; padding: 22px; border: 1px solid var(--line); }
.compare-card.bad { background: var(--card); }
.compare-card.good { background: linear-gradient(160deg, rgba(46,155,255,0.10), var(--card)); border-color: rgba(46,155,255,0.3); }
.compare-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.compare-card.good .compare-label { color: var(--blue-soft); }
.compare-card h4 { margin-top: 10px; font-size: 1.02rem; }
.compare-card p { margin-top: 8px; color: var(--ink-soft); font-size: 0.9rem; }

.quote-block {
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(243,185,58,0.3);
  background: linear-gradient(160deg, rgba(243,185,58,0.09), var(--card));
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.quote-block strong { color: var(--gold-soft); }

/* ==========================================================================
   Formulario / Descarga
   ========================================================================== */
.download-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 940px) { .download-panel { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }

.download-copy .trust-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.trust-pill svg { width: 15px; height: 15px; color: var(--gold-soft); flex-shrink: 0; }

.form-embed-shell {
  position: relative;
  min-height: 100%;
  border-radius: 16px;
  background: #FBF9F4;
  border: 1px solid rgba(243, 185, 58, 0.28);
  box-shadow: 0 24px 56px -22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
}
.form-embed-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-soft), var(--blue-soft));
  z-index: 2;
}
.form-embed-shell iframe { width: 100%; height: 900px; min-height: 900px; border: 0; display: block; position: relative; z-index: 1; background: #FBF9F4; }
.embed-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 32px;
  background: #FBF9F4;
  transition: opacity .4s var(--ease-out);
}
.embed-placeholder.is-hidden { opacity: 0; pointer-events: none; }
.embed-placeholder .spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(11, 26, 61, 0.12);
  border-top-color: var(--gold-deep);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.embed-placeholder p { color: rgba(11, 26, 61, 0.55); font-size: 0.86rem; max-width: 32ch; }

.consent-note {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.6;
  padding-inline: 6px;
}

.manual-confirm-row { margin-top: 14px; text-align: center; }
.manual-confirm-btn {
  font-size: 0.82rem;
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.manual-confirm-btn:hover { color: var(--gold-soft); }

.form-success-panel {
  display: none;
  text-align: center;
  padding: 44px 28px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.form-success-panel.is-visible { display: block; }
.form-success-panel.is-shown { opacity: 1; transform: none; }
.form-success-panel h3 { font-size: 1.3rem; }
.form-success-panel p { margin-top: 10px; color: var(--ink-soft); font-size: 0.92rem; }
.form-success-icon { width: 60px; height: 60px; margin-inline: auto; margin-bottom: 16px; }
.form-success-icon svg { width: 26px; height: 26px; }
.form-success-link { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Expand panel (colapsable con botón) — usado por el formulario y el
   calendario, para que ninguno de los dos widgets externos ocupe espacio
   hasta que la persona decide abrirlo.
   ========================================================================== */
.expand-panel {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
}
.expand-toggle-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.expand-toggle-copy h3 { font-size: 1.15rem; }
.expand-toggle-copy p { margin-top: 6px; color: var(--ink-soft); font-size: 0.9rem; max-width: 46ch; }
.expand-embed-shell {
  margin-top: 0;
  position: relative;
  min-height: 0;
  height: 0;
  overflow: hidden;
  border-radius: 14px;
  opacity: 0;
  transition: height .4s var(--ease-out), margin-top .4s var(--ease-out), opacity .5s var(--ease-out) .1s;
}
/* When open: a scrollable "window" onto the widget. Overflow stays auto
   (not hidden) so that if the embedded form/calendar renders taller than
   this box — its own internal scroll can't always be trusted since some
   GHL widgets rely on a resize script instead — the visitor can still
   scroll THIS box to reach every field. */
.expand-embed-shell.is-open {
  margin-top: 22px;
  height: 720px;
  opacity: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.expand-embed-shell.is-form.is-open { height: 640px; }
.expand-embed-shell > iframe { width: 100%; height: 100%; min-height: 720px; border: 0; background: var(--bg-3); }

/* Brand strip — pinned to the top of the scrollable embed area so the
   visitor never loses sight of "still on our page" while scrolling
   through a third-party GHL widget whose fonts we can't restyle (its
   builder exposes no typography override — checked directly). Most
   valuable on mobile, where the widget fills nearly the whole screen. */
.embed-brand-strip {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  background: var(--card-2);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 14px 14px 0 0;
}
.embed-brand-strip span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* ==========================================================================
   Bottom sheet (mobile only) — below 760px, the form/calendar toggle moves
   its embed into this sheet instead of expanding inline. Avoids the
   double-scroll (page scroll to find the panel, then scroll inside it)
   that inline expand causes once the panel + a 900px-tall GHL iframe don't
   fit in one mobile viewport. Desktop keeps the inline panel untouched.
   The shell/consent-note/manual-confirm nodes are the SAME DOM nodes,
   physically moved here by JS and moved back on close — never duplicated,
   so there is still only ever one iframe per embed. */
.bottom-sheet { position: fixed; inset: 0; z-index: 300; display: none; }
.bottom-sheet:not([hidden]) { display: block; }
.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 11, 30, 0.65);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.bottom-sheet.is-open .bottom-sheet-backdrop { opacity: 1; }
.bottom-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.6);
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .35s var(--ease-out);
}
.bottom-sheet.is-open .bottom-sheet-panel { transform: translateY(0); }
.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--line-strong);
  flex-shrink: 0;
}
/* Fixed title row — stays put the whole time, unlike the old approach of
   letting the embed's own brand strip scroll away with the form content
   (a `position: sticky` label can only stay stuck while its own parent
   is still in view; once you scroll past the form into the consent note
   below it, the parent scrolls off and the label vanishes with it —
   correct CSS behavior, but it reads as broken/unpolished). */
.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
}
.bottom-sheet-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.bottom-sheet-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.bottom-sheet-close svg { width: 16px; height: 16px; }
.bottom-sheet-close:hover { color: var(--gold-soft); }
.bottom-sheet-body {
  /* Without flex:1 + min-height:0, a flex child defaults to min-height:auto
     — it refuses to shrink below its content (the 900px iframe), so the
     PANEL itself grew to fit everything instead of this box scrolling on
     its own. That's what made the header appear to "travel" with the
     scroll: the whole panel was moving, not just the content inside it. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.sheet-open,
body.sheet-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Inside the sheet, the embed sizes itself naturally within the sheet's
   own scroll area instead of using the inline panel's fixed height. The
   embed's own brand strip is hidden here — the sheet header above now
   carries that label permanently, so it isn't needed twice. */
.expand-embed-shell.is-in-sheet {
  height: auto;
  min-height: 0;
  margin-top: 0;
  opacity: 1;
  overflow: visible;
  transition: none;
}
.expand-embed-shell.is-in-sheet .embed-brand-strip { display: none; }
.expand-embed-shell.is-in-sheet > iframe { height: 720px; }

@media (min-width: 760px) {
  .bottom-sheet { display: none !important; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding-block: 40px 28px; border-top: 1px solid var(--line); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { height: 26px; }
.footer-contact { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.footer-contact a { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-soft); }
.footer-contact a:hover { color: var(--gold-soft); }
.footer-contact span { font-size: 0.78rem; color: var(--ink-mute); }

.legal-text {
  margin-top: 26px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--ink-mute);
  max-width: 100%;
}
.footer-bottom {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 11, 30, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform .35s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 860px) { .sticky-cta { display: none; } }

/* ==========================================================================
   Gracias (thank-you) page specific
   ========================================================================== */
.thanks-hero { padding-top: clamp(56px, 9vw, 100px); text-align: center; }
.thanks-icon {
  width: 76px; height: 76px;
  margin-inline: auto 20px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px -12px rgba(243,185,58,0.55);
}
.thanks-icon svg { width: 34px; height: 34px; color: #1a1204; }
.thanks-hero h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-top: 4px; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.thanks-hero .hero-sub { margin-inline: auto; text-align: center; }
.thanks-actions { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.thanks-note { margin-top: 6px; font-size: 0.86rem; color: var(--ink-mute); }

.thanks-book { margin-top: 46px; display: flex; justify-content: center; }

/* Tilt helper (applied via JS transform, capability-gated) */
[data-tilt] { transform-style: preserve-3d; }

/* ==========================================================================
   Utility
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }