/* ═══════════════════════════════════════════
   MenuOS Landing — styles.css
   Dark theme · Accent #7155E5 · Mobile-first
═══════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #070615; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── Variables ─── */
:root {
  /* Backgrounds */
  --bg:        #070615;
  --surface:   #0F0D1E;
  --surface-2: #161428;
  --surface-3: #1C1A2E;

  /* Borders */
  --border:        rgba(255,255,255,0.07);
  --border-2:      rgba(255,255,255,0.13);
  --border-accent: rgba(113,85,229,0.28);

  /* Text */
  --text:   #EEEAF8;
  --text-2: rgba(238,234,248,0.58);
  --text-3: rgba(238,234,248,0.50);

  /* Accent */
  --accent:      #7155E5;
  --accent-h:    #8567F2;
  --accent-soft: rgba(113,85,229,0.12);
  --accent-glow: rgba(113,85,229,0.18);

  /* Danger (problem indicators) */
  --danger-soft:   #FF6B6B;
  --danger-muted:  rgba(255,107,107,0.14);
  --danger-border: rgba(255,107,107,0.26);

  /* Shadows (heavier in dark context) */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-phone: 0 40px 100px rgba(0,0,0,0.8), 0 8px 24px rgba(0,0,0,0.5),
                  inset 0 1px 0 rgba(255,255,255,0.07);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 9999px;

  --max-w: 1120px;
  --px: 22px;
  --section-py: 80px;
}

/* ─── Base ─── */
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(113,85,229,0.08), transparent 42%),
    #070615;
  -webkit-font-smoothing: antialiased;
}

section[id] { scroll-margin-top: 72px; }

/* ─── Container ─── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px);
}

/* ─── Section base ─── */
.section { padding-block: var(--section-py); }
.section--raised { background: transparent; }

.section__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.section__header--center {
  text-align: center;
  margin-inline: auto;
}
.section__headline {
  font-size: clamp(1.625rem, 3.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 16px;
}
.br-d { display: none; }
.section__body {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 10px;
}
.section__body:last-child { margin-bottom: 0; }

/* ─── Eyebrow ─── */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-h);
  margin-bottom: 14px;
  opacity: 0.9;
}

/* ─── Wordmark ─── */
.wordmark {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.wordmark__os { color: var(--accent); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--r-pill);
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn--sm { font-size: 0.875rem; padding: 8px 18px; }
.btn--lg { font-size: 0.9375rem; padding: 10px 22px; }

.btn--accent {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}
.btn--accent:hover { background: var(--accent-h); border-color: var(--accent-h); }

.btn--outline {
  background: transparent;
  color: var(--text-2);
  border: 2px solid var(--border-2);
}
.btn--outline:hover { border-color: var(--accent); color: var(--text); }

/* CTA final: full-width buttons on mobile */
.cta-card__actions .btn { width: 100%; }

/* ─── Nav (floating glass pill — hug content) ─── */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: fit-content;
  max-width: calc(100vw - 32px);
  background: rgba(50,44,82,0.42);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.nav--scrolled {
  background: rgba(50,44,82,0.62);
  border-color: rgba(255,255,255,0.11);
  box-shadow: 0 8px 32px rgba(0,0,0,0.26);
}

.nav__inner {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px 0 14px;
  gap: 0;
}
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid rgba(255,255,255,0.10);
}
.nav__logo .wordmark {
  font-size: 0.875rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(238,234,248,0.45);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 7px;
  border-radius: var(--r-pill);
  transition: color 0.15s;
}
.nav__link:hover { color: rgba(238,234,248,0.80); }
.nav__link--active { color: var(--text); }
.nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Active dot indicator */
.nav__dot {
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.80);
  pointer-events: none;
  opacity: 0;
  /* transition handled by JS lerp in main.js */
}
.nav__dot--visible { opacity: 1; }

/* ═══════════════════════════════════════════
   S1 — HERO
═══════════════════════════════════════════ */
.section--hero {
  padding-top: 140px;
  padding-bottom: 60px;
  position: relative;
}

/* Mobile: columna única */
.hero__layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero__copy   { margin-bottom: 36px; }
.hero__visual { margin-bottom: 6px; }

.hero__copy {
  text-align: center;
  max-width: 500px;
  margin-inline: auto;
}
.hero__headline {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 18px;
}
.hero__sub {
  font-size: 1.0625rem;
  color: rgba(238,234,248,0.76);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 400px;
  margin-inline: auto;
}
.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.hero__ctas .btn {
  min-height: 48px;
  justify-content: center;
}
.hero__ctas .btn--outline {
  color: rgba(238,234,248,0.82);
  border-color: rgba(255,255,255,0.30);
}
.hero__note {
  text-align: center;
  font-size: 0.875rem;
  color: rgba(238,234,248,0.76);
  line-height: 1.65;
  max-width: 400px;
  margin-inline: auto;
}

/* ─── Hero visual — full bleed mobile ─── */
.hero__visual {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: none;
  box-shadow: none;
  width: calc(100% + 2 * var(--px));
  margin-inline: calc(-1 * var(--px));
}
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 22%),
    linear-gradient(to left,  var(--bg) 0%, transparent 22%);
  pointer-events: none;
}

.hero__picture {
  display: block;
  width: 100%;
}

.hero__photo {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}


/* ─── Phone frame ─── */
.phone-wrap { position: relative; display: inline-flex; }
.phone {
  width: 264px;
  height: 530px;
  background: var(--surface);
  border-radius: 40px;
  border: 1.5px solid rgba(255,255,255,0.11);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.phone__notch {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-pill);
  z-index: 10;
}
.phone__screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
}
.phone__screen::-webkit-scrollbar { display: none; }

/* ─── Carta inside phone (dark mode) ─── */
.c-hdr {
  height: 116px;
  background: linear-gradient(165deg, #0A0914 0%, #181208 55%, #100A1A 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.c-hdr::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(113,85,229,0.08) 0%, transparent 70%);
}
.c-hdr__content {
  position: relative;
  z-index: 1;
  padding: 32px 14px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.c-hdr__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.c-hdr__sub {
  font-size: 0.5625rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.c-body {
  background: #12101E;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.c-cats {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.c-cats::-webkit-scrollbar { display: none; }
.c-cat {
  font-size: 0.5625rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-pill);
  padding: 4px 9px;
  background: transparent;
  white-space: nowrap;
  font-family: inherit;
  cursor: default;
}
.c-cat--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.c-products {
  padding: 9px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c-product {
  background: #181628;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 9px 10px;
}
.c-product--featured {
  display: flex;
  gap: 9px;
  background: #1C1A2E;
  border: 1px solid rgba(113,85,229,0.28);
  box-shadow: 0 0 20px rgba(113,85,229,0.07);
}
.c-product__thumb {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  flex-shrink: 0;
}
.c-product__thumb--a {
  background: linear-gradient(135deg, #2C2040 0%, #1A1428 100%);
}
.c-product__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-badge {
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 700;
  color: #B69CF5;
  background: rgba(113,85,229,0.18);
  border: 1px solid rgba(113,85,229,0.3);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-bottom: 3px;
  letter-spacing: 0.01em;
}
.c-product__name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
}
.c-product__desc {
  font-size: 0.5625rem;
  color: rgba(255,255,255,0.35);
  margin-top: 1px;
  line-height: 1.4;
}
.c-product__price {
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}


/* ═══════════════════════════════════════════
   S2 — PROBLEMA
═══════════════════════════════════════════ */
.problem-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.problem-layout__copy .section__header { margin-bottom: 0; }
.problem-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.problem-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.problem-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--danger-muted);
  border: 1px solid var(--danger-border);
  color: var(--danger-soft);
  flex-shrink: 0;
}
.problem-card p {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.55;
}


/* ═══════════════════════════════════════════
   S4 — BENEFICIOS
═══════════════════════════════════════════ */
.ben-list {
  display: flex;
  flex-direction: column;
  height: 360px;
  overflow: hidden;
  overflow-anchor: none;
}
#beneficios {
  overflow-anchor: none;
}
.ben-item {
  position: relative;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  transition: padding-left 0.25s ease;
}
.ben-item:last-child { border-bottom: none; }
.ben-item--open { padding-left: 18px; }
.ben-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ben-item__hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  text-align: left;
  color: inherit;
}
.ben-item__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.ben-item__caret {
  margin-left: auto;
  transition: transform 0.25s ease;
  color: var(--text-3);
  flex-shrink: 0;
}
.ben-item--open .ben-item__caret { transform: rotate(180deg); }
.ben-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.ben-item__body p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.6;
  padding-bottom: 18px;
}
.ben-item--open .ben-item__body { max-height: 160px; }

/* vertical progress bar — left edge of open item */
.ben-item__bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0%;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0;
  transition: none;
}
.ben-item--open .ben-item__bar { opacity: 0.7; }

/* ═══════════════════════════════════════════
   S5 — STEPS
═══════════════════════════════════════════ */
.steps-columns {
  display: flex;
  flex-direction: column;
}
.steps-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* line drawn per-step so it stops before step 05 */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 26px;
  top: 74px;
  bottom: -22px;
  width: 1px;
  background: rgba(113,85,229,0.22);
  z-index: 0;
}
/* mobile: bridge line between list 1 (ends at 03) and list 2 (starts at 04) */
.steps-columns .steps-list:first-child .step:last-child::after {
  content: '';
  position: absolute;
  left: 26px;
  top: 74px;
  bottom: -22px;
  width: 1px;
  background: rgba(113,85,229,0.22);
  z-index: 0;
}
.step {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  position: relative;
}
.step__num {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #9478F4;
  background: #1A1630;
  border: 1.5px solid rgba(113,85,229,0.35);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.step__content { padding-top: 8px; }
.step__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.step__text {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 540px;
}

/* ═══════════════════════════════════════════
   S6 — PANEL EDITABLE
═══════════════════════════════════════════ */
.panel-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.panel-layout__copy   { max-width: 520px; }
.panel-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-chip {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #B69CF5;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-pill);
  padding: 7px 18px;
  background: var(--accent-soft);
}
.panel-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panel-action__from {
  font-size: 0.8125rem;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  background: var(--surface-2);
  flex: 1;
  text-align: center;
}
.panel-action__sep { color: var(--text); font-weight: 600; font-size: 0.9rem; flex-shrink: 0; }
.panel-action__to {
  font-size: 0.8125rem;
  padding: 5px 12px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-pill);
  color: #B69CF5;
  background: var(--accent-soft);
  font-weight: 600;
  flex: 1;
  text-align: center;
}

/* Panel video */
.panel-video-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 48px rgba(113,85,229,0.06);
  background: var(--surface-2);
}
.panel-video {
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════════
   S7 — COMPARE
═══════════════════════════════════════════ */
#diferencia .section__header { max-width: 800px; }

.compare-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.compare-card {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  overflow: hidden;
}
.compare-card--menuos {
  border-color: var(--border-accent);
  box-shadow: 0 0 32px rgba(113,85,229,0.08);
}
.compare-card__hdr {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.compare-card--pdf .compare-card__hdr {
  background: rgba(239,68,68,0.07);
  border-bottom-color: rgba(239,68,68,0.16);
}
.compare-card--pdf .compare-card__label { color: var(--text); }
.compare-card--menuos .compare-card__hdr {
  background: rgba(113,85,229,0.08);
  border-bottom-color: var(--border-accent);
}
.compare-card__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-2);
}
.compare-card--menuos .compare-card__label { color: var(--text); }
.compare-list { padding: 8px 0; }
.compare-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.5;
}
.compare-item::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.compare-item--con::before {
  background-color: rgba(239,68,68,0.12);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='%23EF4444' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.compare-item--pro::before {
  background-color: rgba(34,197,94,0.12);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5l3 3 4-5' stroke='%2322C55E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════
   S9 — PARA QUIÉN
═══════════════════════════════════════════ */
#para-quien .section__header { margin-bottom: 20px; }
.rubros {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 48px;
}
.rubro {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #B69CF5;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-pill);
  padding: 7px 18px;
  background: var(--accent-soft);
}
.audience-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 44px;
}
.audience-list li {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}
.audience-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
}
.section__intro-list {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 0;
  margin-bottom: 14px;
}

.audience-note {
  border-left: 2px solid var(--accent);
  background: rgba(113,85,229,0.06);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 12px 16px;
  margin-bottom: 0;
}
.audience-note__title {
  font-size: 0.9375rem;
  font-weight: 400;
  font-style: italic;
  color: #B69CF5;
  margin-bottom: 0;
}
.audience-note__body {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════
   S10 — CTA FINAL (dark card elevada, no bloque full)
═══════════════════════════════════════════ */
.section--cta { padding-block: var(--section-py); }
.cta-card {
  background: var(--surface-2);
  border: 1px solid var(--border-accent);
  border-radius: 24px;
  padding: 48px 28px;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  box-shadow: 0 0 60px rgba(113,85,229,0.12), var(--shadow-lg);
}
.cta-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9478F4;
  margin-bottom: 14px;
}
.cta-card__headline {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 28px;
}
.cta-card__body {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 480px;
  margin-inline: auto;
}
.cta-card__close {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-2);
  line-height: 1.55;
  margin: 28px 0;
  padding: 0;
  opacity: 0.85;
}
.cta-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 44px;
}
.cta-card__note {
  font-size: 0.8125rem;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 400px;
  margin-inline: auto;
  margin-top: 20px;
}

/* ─── Footer ─── */
.footer {
  padding-block: 36px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.footer__tag {
  font-size: 0.875rem;
  color: var(--text-3);
}

/* ═══════════════════════════════════════════
   BEFORE/AFTER SLIDER
═══════════════════════════════════════════ */
.bfr-slider {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: 32px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-accent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 32px rgba(113,85,229,0.08);
  --bfr-pos: 50%;
  user-select: none;
  touch-action: pan-y;
}

/* After layer — image, defines proportions */
.bfr-slider__after {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bfr-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Before layer — clipped over after */
.bfr-slider__before {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--bfr-pos)) 0 0);
}

.bfr-static__hdr {
  height: 5px;
  width: 55%;
  margin-inline: auto;
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
  flex-shrink: 0;
}

.bfr-static__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.bfr-static__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bfr-static__ttl {
  height: 3px;
  background: rgba(255,255,255,0.16);
  border-radius: 2px;
  margin-top: 6px;
  margin-bottom: 2px;
  width: 70%;
  flex-shrink: 0;
}

.bfr-line {
  height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 1px;
  flex-shrink: 0;
}
.bfr-line--w90 { width: 90%; }
.bfr-line--w85 { width: 85%; }
.bfr-line--w80 { width: 80%; }
.bfr-line--w75 { width: 75%; }
.bfr-line--w70 { width: 70%; }
.bfr-line--w65 { width: 65%; }
.bfr-line--w60 { width: 60%; }
.bfr-line--w55 { width: 55%; }
.bfr-line--w50 { width: 50%; }

.bfr-zoom-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
  color: var(--text-3);
  font-size: 0.6875rem;
  flex-shrink: 0;
}

/* Divider line */
.bfr-slider__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--bfr-pos);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.bfr-slider__divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.75);
}

/* Handle */
.bfr-slider__handle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Labels */
.bfr-slider__lbl {
  position: absolute;
  top: 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(10,8,20,0.88);
  pointer-events: none;
  white-space: nowrap;
}
.bfr-slider__lbl--l { left: 12px; color: rgba(255,255,255,0.80); }
.bfr-slider__lbl--r { right: 12px; color: #9478F4; }

/* Range input — invisible full overlay */
.bfr-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 900px) {
  .bfr-slider { max-width: 680px; margin-inline: auto; aspect-ratio: 16 / 9; margin-bottom: 40px; }
}

/* ═══════════════════════════════════════════
   ANIMACIONES
═══════════════════════════════════════════ */
.will-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.will-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* admin flash animation */
.admin-row--flash { background: rgba(251,191,36,0.08) !important; }
.admin-row--flash .admin-row__price { color: #FCD34D !important; }
.admin-row--saved { background: rgba(34,197,94,0.06) !important; transition: background 0.7s ease; }

/* compare cards entrance */
.compare-card { transition: opacity 0.4s ease, transform 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .will-reveal, .will-reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .admin-row, .compare-card { transition: none; }
}

/* ─── Focus ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Visibility utilities ─── */
.desktop-only { display: none; }

/* ═══════════════════════════════════════════
   RESPONSIVE — 600px+
═══════════════════════════════════════════ */
@media (min-width: 600px) {
  :root { --px: 28px; }

  /* hero CTAs become row with equal sizing */
  .hero__ctas { flex-direction: row; justify-content: center; align-items: center; }
  .hero__ctas .btn { min-height: unset; }

  .compare-grid { grid-template-columns: repeat(2, 1fr); }

  /* CTA final equal width buttons */
  .cta-card__actions { flex-direction: row; justify-content: center; }
  .cta-card__actions .btn { width: auto; min-width: 200px; }

  .desktop-only { display: block; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 900px+
═══════════════════════════════════════════ */
@media (min-width: 900px) {
  :root {
    --px: 40px;
    --section-py: 100px;
  }

  /* nav: desktop sizing */
  .nav__inner { padding: 0 14px 0 18px; height: 48px; }
  section[id] { scroll-margin-top: 78px; }
  .nav__logo { padding-right: 16px; margin-right: 16px; }
  .nav__logo .wordmark { font-size: 1rem; }
  .nav__link { font-size: 0.875rem; padding: 6px 12px; }

  /* ─── Hero desktop: compacto, imagen como fondo ─── */
  .section--hero {
    height: clamp(540px, 68svh, 660px);
    min-height: unset;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }

  /* imagen desktop full-bleed como fondo */
  .section--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('./assets/hero_aura_phone_desktop.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 0;
  }

  /* legibilidad izquierda + fade inferior hacia la siguiente sección */
  .section--hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,  rgba(9,8,26,0.88) 0%, rgba(9,8,26,0.54) 38%, transparent 64%),
      linear-gradient(to bottom, transparent 55%, rgba(7,6,21,0.90) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .hero__layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hero__copy   { margin-bottom: 0; }
  .hero__visual { display: none; margin-bottom: 0; }

  .hero__copy {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 560px;
    margin-inline: 0;
  }
  .hero__sub  { max-width: 460px; margin-inline: 0; }
  .hero__ctas { align-items: flex-start; justify-content: flex-start; }
  /* microcopy: oculto en desktop, visible en mobile */
  .hero__note { display: none; }
  .section--hero .btn--outline {
    color: rgba(238,234,248,0.82);
    border-color: rgba(255,255,255,0.35);
  }

  /* como-funciona: header centrado, timeline columna única */
  #como-funciona .section__header { max-width: none; text-align: center; }
  #como-funciona .steps-wrap {
    max-width: 600px;
    margin-inline: auto;
  }

  /* diferencia: header centrado + cards acotadas */
  #diferencia .section__header { text-align: center; margin-inline: auto; }
  #diferencia .section__body { max-width: 660px; margin-inline: auto; }
  #diferencia .compare-grid { max-width: 860px; margin-inline: auto; }
  .bfr-slider__img { object-position: center; }

  /* problema: centrado, copy + cards apilados */
  .problem-layout { flex-direction: column; align-items: center; gap: 48px; }
  .problem-layout__copy { text-align: center; width: 100%; }
  .problem-layout__copy .section__header { max-width: none; }
  .problem-layout__copy .section__headline { max-width: none; }
  .problem-layout__copy .section__body { max-width: 660px; margin-inline: auto; }
  .problem-layout__cards { width: 100%; }
  .problem-grid { flex-direction: row; gap: 16px; }
  .problem-grid .problem-card { flex: 1; }

  /* beneficios: centrar copy, 3+2 grid */
  #beneficios .section__header { text-align: center; max-width: none; }
  .ben-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: auto; min-height: 0; overflow: visible; }
  .ben-item {
    border-bottom: none;
    border: 1px solid var(--border-accent);
    border-radius: var(--r-lg);
    padding: 22px;
    background: rgba(113,85,229,0.06);
    grid-column: span 2;
  }
  .ben-item:last-child { border-bottom: none; }
  .ben-item:nth-child(4) { grid-column: 2 / span 2; }
  .ben-item:nth-child(5) { grid-column: 4 / span 2; }
  .ben-item__hdr {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    cursor: default;
    pointer-events: none;
  }
  .ben-item__caret { display: none; }
  .ben-item__body { max-height: none !important; overflow: visible; transition: none !important; }
  .ben-item__body p { padding-bottom: 0 !important; }
  .ben-item__bar { display: none !important; }
  .ben-item--open { padding-left: 22px; } /* reset to card padding */

  /* para quien: columna única centrada */
  #para-quien .section__header { max-width: none; margin-bottom: 20px; text-align: center; }
  #para-quien .section__headline { max-width: 900px; margin-inline: auto; }
  .br-d { display: inline; }
  #para-quien .rubros { justify-content: center; gap: 8px; margin-bottom: 48px; }
  #para-quien .audience-body { width: fit-content; max-width: 520px; margin-inline: auto; }
  #para-quien .audience-list { gap: 14px; margin-bottom: 44px; }
  #para-quien .audience-note { width: fit-content; }

  /* panel: 2 columnas — copy+chips izq / video der */
  .panel-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .panel-layout__copy   { max-width: none; }
  .panel-actions        { margin-top: 24px; }

  /* CTA card */
  .cta-card { padding: 56px 48px; }
}

/* ─── Font weight compensation — SF Pro vs Segoe UI synthesis ─── */
@media (max-width: 899px) {
  .hero__headline,
  .cta-card__headline { font-weight: 900; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 1100px+
═══════════════════════════════════════════ */