/* ==========================================================================
   SecurApp Design System — Components (components.css)
   Skiper UI-inspired, vanilla CSS
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn {
  /* Layout */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* Box Model */
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);

  /* Typography */
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  /* Interaction */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  /* Animation */
  transition: var(--transition-fast);
}

.btn:active {
  transform: scale(0.98);
}

/* --- Primary (gradient + glass depth — NO white overlays) --------------- */
.btn--primary {
  --glass-reflex-light: 0;
  --glass-reflex-dark: 1;
  background: linear-gradient(155deg, #0f1a4d 0%, #1e2e7a 40%, #5170FF 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--glass-shadow),
              0 2px 8px rgba(81, 112, 255, 0.15);
}

.btn--primary::after { display: none; }

.btn--primary:hover {
  --glass-reflex-dark: 1.4;
  transform: translateY(-1px) scale(1.02);
  color: #ffffff;
  filter: brightness(1.15);
  box-shadow: var(--glass-shadow),
              0 4px 16px rgba(81, 112, 255, 0.25);
}

.btn--primary:active {
  transform: translateY(0) scale(0.98);
  --glass-reflex-dark: 0.8;
  color: #ffffff;
}

/* Dark primary — navy→violet gradient */
[data-theme="dark"] .btn--primary {
  --glass-reflex-light: 0;
  --glass-reflex-dark: 1.2;
  background: linear-gradient(155deg, #0d0620 0%, #2a1050 40%, #8B2FC9 100%);
  color: var(--text-on-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .btn--primary:hover {
  --glass-reflex-dark: 1.6;
  color: var(--text-on-primary);
  filter: brightness(1.15);
  box-shadow: var(--glass-shadow),
              0 4px 16px rgba(139, 47, 201, 0.25);
}

/* --- Secondary (liquid glass — neutral translucent) -------------------- */
.btn--secondary {
  --glass-reflex-light: 1.3;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid color-mix(in srgb, var(--glass-light) 28%, transparent);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}

.btn--secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 35%,
    transparent 55%
  );
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

.btn--secondary:hover {
  --glass-reflex-light: 2.2;
  transform: translateY(-2px) scale(1.04);
  background-color: var(--glass-bg-hover);
  border-color: color-mix(in srgb, var(--glass-light) 50%, transparent);
  box-shadow: var(--glass-shadow),
              0 8px 24px color-mix(in srgb, var(--glass-dark) 10%, transparent),
              0 0 0 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .btn--secondary {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--glass-light) 10%, transparent);
}

[data-theme="dark"] .btn--secondary::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 35%
  );
}

[data-theme="dark"] .btn--secondary:hover {
  --glass-reflex-light: 0.7;
  border-color: color-mix(in srgb, var(--glass-light) 18%, transparent);
}

/* --- Ghost (transparent → glass on hover) ------------------------------ */
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn--ghost:hover {
  --glass-reflex-light: 1.4;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-color: color-mix(in srgb, var(--glass-light) 20%, transparent);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}

[data-theme="dark"] .btn--ghost:hover {
  --glass-reflex-light: 0.5;
  border-color: color-mix(in srgb, var(--glass-light) 8%, transparent);
}

/* --- Size variants ----------------------------------------------------- */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

/* --- Full-width button ------------------------------------------------- */
.btn--block {
  width: 100%;
  justify-content: center;
}

/* --- Icon button (square) ---------------------------------------------- */
.btn--icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}

/* --- Disabled state ---------------------------------------------------- */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* --- Button group ------------------------------------------------------ */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.btn-group .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .btn-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-group .btn {
    width: auto;
  }
}


/* ==========================================================================
   2. CARDS
   ========================================================================== */
.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: var(--glass-backdrop-soft);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  transition: var(--transition-normal);
  overflow: hidden;
}

.card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--shadow-lg),
              0 4px 20px rgba(81, 112, 255, 0.08),
              0 0 0 1px rgba(81, 112, 255, 0.06);
  transform: translateY(-2px);
}

[data-theme="dark"] .card:hover {
  box-shadow: var(--shadow-lg),
              0 4px 24px rgba(206, 50, 255, 0.12),
              0 0 0 1px rgba(255, 62, 137, 0.08);
}

.card__header {
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.card__description {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
}

.card__body {
  margin-bottom: var(--space-4);
}

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--gradient-card);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: var(--text-xl);
}

[data-theme="dark"] .card__icon {
  color: #CE32FF;
}

/* Card glow on hover — optional */
.card--glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: var(--gradient-card);
  transition: opacity var(--duration-normal) var(--ease-smooth);
  pointer-events: none;
}

.card--glow:hover::before {
  opacity: 1;
}

/* Card size variants */
.card--sm {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.card--lg {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}

/* Flat card (no hover animation) */
.card--flat {
  backdrop-filter: none;
}

.card--flat:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}

/* Aurora card — blue glow interior (Skiper pricing style) */
.card--aurora {
  overflow: hidden;
}

.card--aurora::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(81, 112, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
  z-index: 0;
}

[data-theme="light"] .card--aurora::after {
  background: radial-gradient(ellipse, rgba(81, 112, 255, 0.08) 0%, transparent 70%);
}


/* ── Plan Cards — Liquid Glass + Flame ───────────────── */

/* Base: real iOS liquid glass (10-layer reflex system) */
.card--plan {
  --glass-reflex-light: 1;
  --glass-reflex-dark: 0.6;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid color-mix(in srgb, var(--glass-light) 15%, transparent);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  box-shadow: var(--glass-shadow);
  transition: background var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.card--plan:hover {
  background: var(--glass-bg-hover);
  border-color: color-mix(in srgb, var(--glass-light) 25%, transparent);
}

/* ── Plastic light sweep — hover effect ── */
.card--plan::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.18) 42%,
    rgba(255, 255, 255, 0.08) 49%,
    transparent 64%
  );
  transform: translateX(-100%) skewX(-15deg);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.card--plan:hover::after {
  opacity: 1;
  animation: card-light-sweep 1.4s var(--ease-smooth) forwards;
}

/* Light mode Modular card: stronger light band to show on glass */
[data-theme="light"] .card--plan:not(.card--highlighted)::after,
:root:not([data-theme="dark"]) .card--plan:not(.card--highlighted)::after {
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255, 255, 255, 0.18) 30%,
    rgba(255, 255, 255, 0.45) 42%,
    rgba(255, 255, 255, 0.18) 54%,
    transparent 69%
  );
}

/* Pro card: brighter light band for dark background */
.card--plan.card--highlighted::after {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.06) 35%,
    rgba(255, 255, 255, 0.22) 42%,
    rgba(255, 255, 255, 0.06) 49%,
    transparent 64%
  );
}

/* ── Neon watermark — vertical (bottom to top), both cards ── */
.card--plan::before {
  content: attr(data-plan-label);
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: clamp(4.5rem, 14vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(81, 112, 255, 0.18);
  text-shadow:
      0 0 40px rgba(81, 112, 255, 0.08),
      0 0 80px rgba(81, 112, 255, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

[data-theme="dark"] .card--plan::before {
  -webkit-text-stroke-color: rgba(81, 112, 255, 0.1);
  text-shadow:
      0 0 40px rgba(81, 112, 255, 0.04),
      0 0 80px rgba(81, 112, 255, 0.02);
}

/* ── Z-index layers: flame(0) → watermark(0/1) → content(2) ── */
.card--plan .card__header,
.card--plan .card__price,
.card--plan .card__body,
.card--plan .card__footer,
.card--plan .card__badge {
  position: relative;
  z-index: 2;
}

/* ── Header ── */
.card--plan .card__header {
  margin-bottom: var(--space-4);
}

.card--plan .card__plan-name {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}

.card--plan .card__plan-description {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
}

/* ── Price block — two lines, same height both cards ── */
.card--plan .card__price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 5.5rem;
  margin-bottom: var(--space-6);
}

.card--plan .card__price-label {
  font-size: clamp(1.75rem, 7vw, 3rem);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
}

.card--plan .card__price-amount {
  font-size: clamp(1.75rem, 7vw, 3rem);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.card--plan .card__price-period {
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  color: var(--text-muted);
}

/* Hide old modules line */
.card--plan .card__plan-modules {
  display: none;
}

/* ── Body: features grow to fill space ── */
.card--plan .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Features label — no divider line */
.card--plan .card__features-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Features list */
.card--plan .card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card--plan .card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.card--plan .card__features li svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Footer: button always at bottom ── */
.card--plan .card__footer {
  border-top: none;
  padding-top: var(--space-6);
  margin-top: auto;
}

/* ── Shared button — liquid glass transparent ── */
.card--plan .btn--plan-individual,
.card--plan .btn--plan-pro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid color-mix(in srgb, var(--glass-light) 15%, transparent);
  backdrop-filter: var(--glass-backdrop-soft);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  box-shadow: var(--glass-shadow);
  transition: background var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth);
}

.card--plan .btn--plan-individual:hover,
.card--plan .btn--plan-pro:hover {
  background: var(--glass-bg-hover);
  border-color: color-mix(in srgb, var(--glass-light) 25%, transparent);
  transform: translateY(-1px);
}

.card--plan .btn--plan-individual:focus-visible,
.card--plan .btn--plan-pro:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.card--plan .btn--plan-individual svg,
.card--plan .btn--plan-pro svg {
  width: 1rem;
  height: 1rem;
}

/* ══════════════════════════════════════════════════════
   PRO CARD — always dark + flame video
   ══════════════════════════════════════════════════════ */
.card--plan.card--highlighted,
[data-theme="light"] .card--plan.card--highlighted {
  --glass-reflex-light: 0.3;
  --glass-reflex-dark: 2;
  background: rgba(10, 10, 15, 0.65);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fafafa;
}

.card--plan.card--highlighted:hover,
[data-theme="light"] .card--plan.card--highlighted:hover {
  background: rgba(10, 10, 15, 0.7);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Pro watermark — same vertical, white stroke, above flame */
/* Light mode: slightly more visible stroke */
[data-theme="light"] .card--plan.card--highlighted::before,
:root:not([data-theme="dark"]) .card--plan.card--highlighted::before {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
  text-shadow:
      0 0 30px rgba(81, 112, 255, 0.12),
      0 0 60px rgba(81, 112, 255, 0.06);
  z-index: 1;
}

/* Dark mode: same style as Modular but more vibrant */
[data-theme="dark"] .card--plan.card--highlighted::before {
  -webkit-text-stroke: 1.5px rgba(81, 112, 255, 0.18);
  text-shadow:
      0 0 40px rgba(81, 112, 255, 0.08),
      0 0 80px rgba(81, 112, 255, 0.04);
  z-index: 1;
}

/* Flame video — diagonal Skiper-style, always visible */
.card--plan__flame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transform: rotate(-45deg) scale(1.8) translateY(22%);
  transform-origin: center center;
}

/* Pro: all text white */
.card--plan.card--highlighted .card__plan-name,
[data-theme="light"] .card--plan.card--highlighted .card__plan-name {
  color: #fff;
}

.card--plan.card--highlighted .card__plan-description,
[data-theme="light"] .card--plan.card--highlighted .card__plan-description {
  color: rgba(255, 255, 255, 0.65);
}

.card--plan.card--highlighted .card__price-label,
[data-theme="light"] .card--plan.card--highlighted .card__price-label {
  color: #fff;
}

.card--plan.card--highlighted .card__price-amount,
[data-theme="light"] .card--plan.card--highlighted .card__price-amount {
  color: #fff;
}

.card--plan.card--highlighted .card__price-period,
[data-theme="light"] .card--plan.card--highlighted .card__price-period {
  color: #fff;
}

.card--plan.card--highlighted .card__features-label,
[data-theme="light"] .card--plan.card--highlighted .card__features-label {
  color: rgba(255, 255, 255, 0.4);
}

.card--plan.card--highlighted .card__features li,
[data-theme="light"] .card--plan.card--highlighted .card__features li {
  color: rgba(255, 255, 255, 0.8);
}

.card--plan.card--highlighted .card__features li svg,
[data-theme="light"] .card--plan.card--highlighted .card__features li svg {
  stroke: rgba(255, 255, 255, 0.7);
}

/* Pro button — white glass on dark */
.card--plan.card--highlighted .btn--plan-pro,
[data-theme="light"] .card--plan.card--highlighted .btn--plan-pro {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.card--plan.card--highlighted .btn--plan-pro:hover,
[data-theme="light"] .card--plan.card--highlighted .btn--plan-pro:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}

/* "Más popular" badge — absolute, doesn't push content */
.card--plan .card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(200, 220, 255, 0.9);
  background: rgba(81, 112, 255, 0.12);
  border: 1px solid rgba(81, 112, 255, 0.25);
  border-radius: var(--radius-full);
  backdrop-filter: var(--glass-backdrop-soft);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  box-shadow:
      inset 0 1px 0 rgba(81, 112, 255, 0.15),
      0 1px 4px rgba(0, 0, 0, 0.15);
}

.card--plan .card__badge svg {
  width: 10px;
  height: 10px;
  stroke: rgba(160, 185, 255, 0.85);
  stroke-width: 2;
  fill: none;
}

/* ── Plan card responsive ── */
@media (min-width: 640px) {
  .card--plan .card__price {
      min-height: 6.5rem;
  }

  .card--plan .card__price-label,
  .card--plan .card__price-amount {
      font-size: clamp(2.75rem, 5vw, 3.5rem);
  }
}

@media (min-width: 1024px) {
  .card--plan .card__price {
      min-height: 7rem;
  }

  .card--plan .card__price-label,
  .card--plan .card__price-amount {
      font-size: clamp(3rem, 3.5vw, 3.75rem);
  }
}


/* ==========================================================================
   3. BADGES
   ========================================================================== */
.badge {
  --glass-reflex-light: 1;
  --glass-reflex-dark: 0.4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"] .badge {
  --glass-reflex-light: 0.3;
  --glass-reflex-dark: 1.2;
}

/* Default badge — glass */
.badge--default {
  background: var(--glass-bg);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--glass-light) 18%, transparent);
}

/* Outline badge — minimal glass */
.badge--outline {
  background: var(--glass-bg);
  color: var(--text-tertiary);
  border-color: color-mix(in srgb, var(--glass-light) 12%, transparent);
}

/* Brand colour variants — glass tinted */
.badge--primary {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--glass-bg));
  color: var(--color-primary);
  border-color: var(--color-primary-muted);
}

.badge--secondary {
  background: color-mix(in srgb, var(--color-secondary) 12%, var(--glass-bg));
  color: var(--color-secondary);
  border-color: var(--color-secondary-muted);
}

/* Module type badges — glass tinted */
.badge--estandar {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--glass-bg));
  color: var(--color-primary);
  border-color: rgba(81, 112, 255, 0.2);
}

.badge--especializado {
  background: color-mix(in srgb, var(--color-secondary) 10%, var(--glass-bg));
  color: var(--color-secondary);
  border-color: rgba(206, 50, 255, 0.2);
}

.badge--base {
  background: color-mix(in srgb, var(--color-success) 10%, var(--glass-bg));
  color: var(--color-success);
  border-color: rgba(34, 197, 94, 0.2);
}

.badge--personalizado {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--glass-bg));
  color: var(--color-accent);
  border-color: rgba(255, 62, 137, 0.2);
}

/* Size: large */
.badge--lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.badge--accent {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  border-color: var(--color-accent-muted);
}

/* Semantic variants */
.badge--success {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
  border-color: rgba(34, 197, 94, 0.2);
}

.badge--warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border-color: rgba(245, 158, 11, 0.2);
}

.badge--error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border-color: rgba(239, 68, 68, 0.2);
}

/* Module-type badges (contextual) */
.badge--core       { background-color: rgba(81,112,255,0.1); color: var(--color-primary); border-color: rgba(81,112,255,0.2); }
.badge--security   { background-color: rgba(206,50,255,0.1); color: var(--color-secondary); border-color: rgba(206,50,255,0.2); }
.badge--operations { background-color: rgba(34,197,94,0.1);  color: var(--color-success); border-color: rgba(34,197,94,0.2); }
.badge--analytics  { background-color: rgba(255,62,137,0.1); color: var(--color-accent); border-color: rgba(255,62,137,0.2); }
.badge--catering   { background-color: rgba(245,158,11,0.1); color: var(--color-warning); border-color: rgba(245,158,11,0.2); }

/* Size variants */
.badge--sm {
  padding: 1px var(--space-2);
  font-size: var(--text-2xs);
}

/* Dot indicator */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}


/* ==========================================================================
   4. MODAL
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background-color: var(--overlay);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              visibility var(--duration-normal) var(--ease-smooth);
}

.modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-smooth);
}

.modal-backdrop.is-active .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.modal__close:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.modal__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  padding-right: var(--space-8);
}

.modal__body {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.modal--lg {
  max-width: 720px;
}

.modal--sm {
  max-width: 400px;
  padding: var(--space-6);
}


/* ==========================================================================
   5. TOOLTIP
   ========================================================================== */
.tooltip {
  position: relative;
}

.tooltip__content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--leading-snug);
  color: var(--text-on-primary);
  background-color: var(--text-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-smooth) 200ms,
              transform var(--duration-fast) var(--ease-smooth) 200ms,
              visibility var(--duration-fast) var(--ease-smooth) 200ms;
  z-index: var(--z-tooltip);
}

/* Arrow */
.tooltip__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--text-primary) transparent transparent transparent;
}

.tooltip:hover .tooltip__content,
.tooltip:focus-within .tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip positions */
.tooltip--bottom .tooltip__content {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.tooltip--bottom .tooltip__content::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent var(--text-primary) transparent;
}

.tooltip--bottom:hover .tooltip__content {
  transform: translateX(-50%) translateY(0);
}


/* ==========================================================================
   6. INPUT FIELD
   ========================================================================== */
.input-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.input-field__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.input-field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.input-field__input::placeholder {
  color: var(--text-muted);
}

.input-field__input:hover {
  border-color: var(--border-strong);
}

.input-field__input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.input-field__helper {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.input-field--error .input-field__input {
  border-color: var(--color-error);
}

.input-field--error .input-field__input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.input-field--error .input-field__helper {
  color: var(--color-error);
}

/* Textarea variant */
.input-field__textarea {
  min-height: 120px;
  resize: vertical;
}


/* ==========================================================================
   7. TAGS
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--text-tertiary);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.tag--clickable {
  cursor: pointer;
  transition: var(--transition-fast);
}

.tag--clickable:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}


/* ==========================================================================
   8. DIVIDER
   ========================================================================== */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-default);
  border: none;
  margin: var(--space-6) 0;
}

.divider--subtle {
  background-color: var(--border-subtle);
}

.divider--gradient {
  height: 1px;
  background: var(--gradient-border);
  border: none;
}

.divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--space-4);
}


/* ==========================================================================
   9. AVATAR
   ========================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
  border: 2px solid var(--border-default);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--sm  { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--lg  { width: 56px; height: 56px; font-size: var(--text-lg); }
.avatar--xl  { width: 72px; height: 72px; font-size: var(--text-xl); }

/* Avatar group (overlapping) */
.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--bg-primary);
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}


/* ==========================================================================
   10. SKELETON LOADING
   ========================================================================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.8s infinite var(--ease-smooth);
}


.skeleton--text {
  height: 16px;
  border-radius: var(--radius-sm);
}

.skeleton--title {
  height: 28px;
  width: 60%;
  border-radius: var(--radius-sm);
}

.skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.skeleton--card {
  height: 200px;
  border-radius: var(--radius-lg);
}

.skeleton--image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}


/* ==========================================================================
   11. FLOATING PILL NAVIGATION — Apple Liquid Glass (Mobile-first)
   ========================================================================== */

/* Glass and nav tokens defined in variables.css (:root) */

/* --- Pill container (mobile: positioning wrapper, no glass) -------------- */
.pill-nav {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-sticky);

  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Mobile collapsed: NO glass — dock and expand have their own */
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition: transform var(--duration-slow) var(--ease-spring),
              opacity var(--duration-slow) ease,
              width var(--duration-slow) var(--ease-spring),
              background var(--duration-slow) var(--ease-smooth),
              border-color var(--duration-slow) ease,
              box-shadow var(--duration-slow) ease,
              padding var(--duration-slow) var(--ease-spring),
              border-radius var(--duration-slow) var(--ease-spring),
              gap var(--duration-slow) var(--ease-spring);
}

/* Specular edge — hidden on mobile collapsed, visible when open + desktop */
.pill-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.5) 70%,
    transparent 100%
  );
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

/* --- Navigation item ----------------------------------------------------- */
.pill-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 16px;
  color: var(--text-primary);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--duration-fast) ease,
              background-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}

.pill-nav__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (hover: hover) {
  .pill-nav__item:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
  }

  [data-theme="dark"] .pill-nav__item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

.pill-nav__item:active {
  transform: scale(0.92);
  color: var(--text-primary);
}

/* Active item — liquid glass bubble (same reflex system as parent, brand-tinted) */
.pill-nav__item.is-active {
  --glass-color: #6878cc;
  --glass-reflex-dark: 1.8;
  background-color: color-mix(in srgb, var(--glass-color) 28%, transparent);
  backdrop-filter: var(--glass-backdrop-soft) url(#glass-distort);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  border: none;
  box-shadow: var(--glass-shadow);
}

.pill-nav__item.is-active svg,
.pill-nav__item.is-active svg path,
.pill-nav__item.is-active:active svg,
.pill-nav__item.is-active:active svg path {
  fill: url(#gradient-active);
}

/* Prevent browser default :active link color from flashing on tap */
.pill-nav__item.is-active:active {
  color: var(--text-primary);
}

.pill-nav__item.is-active .pill-nav__label {
  background: var(--gradient-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: var(--fw-semibold);
}

[data-theme="dark"] .pill-nav__item.is-active {
  --glass-color: #9a40cc;
  --glass-reflex-light: 0.6;
  --glass-reflex-dark: 2.5;
  background-color: color-mix(in srgb, var(--glass-color) 30%, transparent);
}

[data-theme="dark"] .pill-nav__item.is-active .pill-nav__label {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Label --------------------------------------------------------------- */
.pill-nav__label {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* --- Bar: dock pill + expand circle side by side (mobile) --------------- */
.pill-nav__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--duration-normal) var(--ease-smooth);
}

/* --- Dock: primary items in glass pill (mobile) ------------------------- */
.pill-nav__dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 22px;

  /* Liquid Glass — iOS 26 reflex system (auto-adapts to theme) */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop-soft) url(#glass-distort);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  border: none;
  box-shadow: var(--glass-shadow);

  transition: background-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) ease,
              padding var(--duration-normal) var(--ease-spring),
              border-radius var(--duration-normal) ease;
}

/* --- Secondary items: hidden globally ----------------------------------- */
.pill-nav__item--secondary {
  display: none;
}

/* --- Tray: secondary items, vertical list, collapsed (mobile) ----------- */
.pill-nav__tray {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-smooth),
              padding var(--duration-slow) var(--ease-spring);
}

.pill-nav__tray .pill-nav__item--secondary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
}

.pill-nav__tray .pill-nav__label {
  display: block;
}

/* --- Expand button: glass circle, same height as dock (mobile) ---------- */
.pill-nav__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  -webkit-tap-highlight-color: transparent;

  /* Liquid Glass — iOS 26 reflex system */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop-soft) url(#glass-distort);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  border: none;
  box-shadow: var(--glass-shadow);

  transition: transform var(--duration-normal) var(--ease-spring),
              background-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) ease,
              width var(--duration-normal) var(--ease-spring),
              opacity var(--duration-fast) ease,
              padding var(--duration-normal) var(--ease-spring);
}

.pill-nav__expand svg {
  width: 18px;
  height: 18px;
}

.pill-nav__expand:active {
  transform: scale(0.9);
}

/* --- Expanded: "+" merges, tray rises from centered container ----------- */
.pill-nav.is-open {
  /* Stays centered — NO left/right stretch */
  width: 260px;
  gap: 2px;
  padding: 10px;
  border-radius: 20px;

  /* Glass merges onto the combined container — iOS 26 reflex system */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop-soft) url(#glass-distort);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  border: none;
  box-shadow: var(--glass-shadow);
}

.pill-nav.is-open::before {
  opacity: 1;
}

/* Wrappers become transparent — items interleave via order */
.pill-nav.is-open .pill-nav__bar {
  display: contents;
}

.pill-nav.is-open .pill-nav__dock {
  display: contents;
}

.pill-nav.is-open .pill-nav__tray {
  display: contents;
}

/* All items become vertical list when expanded */
.pill-nav.is-open .pill-nav__item {
  justify-content: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
}

.pill-nav.is-open .pill-nav__label {
  display: block;
}

/* Prevent focus ring on items after expand (touch devices) */
.pill-nav.is-open .pill-nav__item:focus-visible {
  outline: none;
  color: var(--text-secondary);
}

.pill-nav.is-open .pill-nav__item.is-active:focus-visible {
  color: var(--text-primary);
}

/* "+" collapses into the pill — water-drop merge */
.pill-nav.is-open .pill-nav__expand {
  display: none;
}

/* --- Item order — fixed by aria-label, survives DOM moves --------------- */
.pill-nav__item[aria-label="Inicio"]       { order: 1; }
.pill-nav__item[aria-label="Esencia"]      { order: 2; }
.pill-nav__item[aria-label="Módulos"]      { order: 3; }
.pill-nav__item[aria-label="Planes"]       { order: 4; }
.pill-nav__item[aria-label="Experiencias"] { order: 5; }
.pill-nav__item[aria-label="magIA"]        { order: 6; }
.pill-nav__item[aria-label="Modo Free"]    { order: 7; }
.pill-nav__item[aria-label="Secur LAB"]    { order: 8; }
.pill-nav__item[aria-label="Blog"]         { order: 9; }
.pill-nav__item[aria-label="Contacto"]     { order: 10; }

/* --- Mobile overlay ------------------------------------------------------ */
.pill-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  background-color: var(--overlay);
  backdrop-filter: var(--glass-backdrop-soft);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease;
}

.pill-nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Float controls on dark backgrounds — force dark reflex multipliers */
.float-controls--on-dark {
  --glass-reflex-light: 0.3;
  --glass-reflex-dark: 2;
}

.float-controls--on-dark .float-controls__btn {
  color: rgba(255, 255, 255, 0.7);
}

.float-controls--on-dark .float-controls__btn:hover {
  color: rgba(255, 255, 255, 0.95);
}

.float-controls--on-dark .float-tooltip__label {
  color: rgba(255, 255, 255, 0.9);
}

.float-controls--on-dark .float-tooltip__keys kbd {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

.float-controls--on-dark .float-tooltip__keys .key-sep {
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   BREADCRUMB — Chip-style interactive navigation with connected glass dropdown
   ========================================================================== */

.breadcrumb {
  position: relative;
}

/* Tighter gap to hero title when breadcrumb precedes it */
.breadcrumb + .hero-mini__content {
  padding-top: var(--space-3);
}

/* Scrollable track — horizontal scroll on mobile, never wraps */
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumb__list::-webkit-scrollbar {
  display: none;
}

/* Dynamic scroll indicators — mobile only, toggled via JS */
.breadcrumb.has-scroll-left .breadcrumb__list {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 100%);
  mask-image: linear-gradient(to right, transparent, black 20px, black 100%);
}
.breadcrumb.has-scroll-right .breadcrumb__list {
  -webkit-mask-image: linear-gradient(to left, transparent, black 20px, black 100%);
  mask-image: linear-gradient(to left, transparent, black 20px, black 100%);
}
.breadcrumb.has-scroll-left.has-scroll-right .breadcrumb__list {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}

/* --- Items --- */
.breadcrumb__item {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- SVG chevron separator --- */
.breadcrumb__separator {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.5;
}
.breadcrumb__separator svg {
  width: 1em;
  height: 1em;
}

/* --- Chip (shared base for home, links, and current) --- */
.breadcrumb__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--fw-medium);
  text-decoration: none;
  background: var(--glass-bg);
  border: 1px solid color-mix(in srgb, var(--glass-light) 18%, transparent);
  border-radius: var(--radius-full);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              border-radius var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth);
}
.breadcrumb__chip:hover {
  color: var(--color-primary);
  background: rgba(81, 112, 255, 0.08);
  border-color: rgba(81, 112, 255, 0.2);
  box-shadow: var(--glass-shadow),
              0 2px 8px rgba(81, 112, 255, 0.06);
}
.breadcrumb__chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Icon inside chip */
.breadcrumb__chip i {
  font-size: 0.9em;
  flex-shrink: 0;
  opacity: 0.7;
}
.breadcrumb__chip:hover i {
  opacity: 1;
}

/* Label truncation */
.breadcrumb__label {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Active chip (current page) — gradient text per theme --- */
.breadcrumb__chip--active {
  background: rgba(81, 112, 255, 0.08);
  border-color: rgba(81, 112, 255, 0.2);
  font-weight: var(--fw-semibold);
}
.breadcrumb__chip--active .breadcrumb__label {
  background: linear-gradient(155deg, #0f1a4d 0%, #1e2e7a 40%, #5170FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .breadcrumb__chip--active .breadcrumb__label {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.breadcrumb__chip--active i {
  color: #5170FF;
  opacity: 1;
}
.breadcrumb__chip--active .breadcrumb__chevron {
  color: #5170FF;
}

/* Active chip without children: non-interactive */
span.breadcrumb__chip--active {
  cursor: default;
}

/* Active chip with children (button): show pointer */
button.breadcrumb__chip--active {
  cursor: pointer;
}
button.breadcrumb__chip--active:hover {
  background: rgba(81, 112, 255, 0.14);
  border-color: rgba(81, 112, 255, 0.3);
  box-shadow: 0 2px 8px rgba(81, 112, 255, 0.1);
}

/* Inline chevron for dropdown trigger */
.breadcrumb__chevron {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--duration-fast) var(--ease-smooth),
              opacity var(--duration-fast) var(--ease-smooth);
}
.breadcrumb__item.is-open .breadcrumb__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Open state: highlight ── */
.breadcrumb__item.is-open .breadcrumb__chip {
  background: rgba(81, 112, 255, 0.12);
  border-color: rgba(81, 112, 255, 0.3);
}

/* ── Overlay — mobile only, behind bottom sheet ── */
.breadcrumb__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-popover) - 1);
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              visibility var(--duration-normal);
}
.breadcrumb__overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── Dropdown — mobile: bottom sheet, desktop: folder tab ── */
.breadcrumb__dropdown {
  position: fixed;
  z-index: var(--z-popover);
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-4) var(--space-6);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity var(--duration-slow) var(--ease-spring),
              transform var(--duration-slow) var(--ease-spring),
              visibility var(--duration-slow);
  pointer-events: none;
  scrollbar-width: none;
}
.breadcrumb__dropdown::-webkit-scrollbar {
  display: none;
}
.breadcrumb__dropdown.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Grab handle — mobile bottom sheet indicator */
.breadcrumb__dropdown::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto var(--space-3);
  background: var(--border-subtle);
  border-radius: var(--radius-full);
}

/* Dropdown items */
.breadcrumb__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth);
}
.breadcrumb__dropdown-item:hover,
.breadcrumb__dropdown-item:active {
  color: var(--color-primary);
  background-color: rgba(81, 112, 255, 0.1);
}
.breadcrumb__dropdown-item i {
  font-size: 1.1em;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Dark mode --- */
[data-theme="dark"] .breadcrumb__chip {
  background: var(--glass-bg);
  border-color: color-mix(in srgb, var(--glass-light) 8%, transparent);
}
[data-theme="dark"] .breadcrumb__chip:hover {
  color: #CE32FF;
  background: color-mix(in srgb, #CE32FF 8%, transparent);
  border-color: rgba(206, 50, 255, 0.25);
  box-shadow: var(--glass-shadow),
              0 2px 8px rgba(206, 50, 255, 0.08);
}
[data-theme="dark"] .breadcrumb__chip--active {
  background: rgba(206, 50, 255, 0.1);
  border-color: rgba(206, 50, 255, 0.2);
}
[data-theme="dark"] .breadcrumb__chip--active i {
  color: #CE32FF;
}
[data-theme="dark"] .breadcrumb__chip--active .breadcrumb__chevron {
  color: #CE32FF;
}
[data-theme="dark"] button.breadcrumb__chip--active:hover {
  background: rgba(206, 50, 255, 0.18);
  border-color: rgba(206, 50, 255, 0.35);
  box-shadow: 0 2px 8px rgba(206, 50, 255, 0.1);
}
[data-theme="dark"] .breadcrumb__item.is-open .breadcrumb__chip {
  background: rgba(206, 50, 255, 0.15);
  border-color: rgba(206, 50, 255, 0.35);
}
[data-theme="dark"] .breadcrumb__dropdown {
  background: rgba(15, 15, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .breadcrumb__dropdown::before {
  background: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .breadcrumb__overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* --- Tablet (640px+) --- */
@media (min-width: 640px) {
  .breadcrumb__chip {
    padding: var(--space-2) var(--space-4);
  }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  .breadcrumb__list {
    font-size: var(--text-base);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .breadcrumb__chip {
    padding: var(--space-2) var(--space-4);
  }

  /* Overlay hidden on desktop */
  .breadcrumb__overlay {
    display: none;
  }

  /* Open state: folder-tab morph (desktop only) */
  .breadcrumb__item.is-open .breadcrumb__chip {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-color: var(--border-subtle);
    border-bottom-color: transparent;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: var(--glass-backdrop);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  }

  /* Dropdown: positioned below chip (JS sets top/left) */
  .breadcrumb__dropdown {
    bottom: auto;
    left: auto;
    right: auto;
    max-height: 320px;
    padding: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-top: none;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px);
    transition: opacity var(--duration-normal) var(--ease-spring),
                transform var(--duration-normal) var(--ease-spring),
                visibility var(--duration-normal);
  }
  .breadcrumb__dropdown.is-visible {
    transform: translateY(0);
  }

  /* No grab handle on desktop */
  .breadcrumb__dropdown::before {
    display: none;
  }

  /* Smaller items on desktop */
  .breadcrumb__dropdown-item {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
  }
  .breadcrumb__dropdown-item i {
    font-size: 0.9em;
  }

  /* Dark mode desktop overrides */
  [data-theme="dark"] .breadcrumb__item.is-open .breadcrumb__chip {
    background: rgba(15, 15, 30, 0.88);
    border-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: transparent;
    backdrop-filter: var(--glass-backdrop);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  }
  [data-theme="dark"] .breadcrumb__dropdown {
    background: rgba(15, 15, 30, 0.88);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  }
}


/* ==========================================================================
   FOOTER — Apple/Linear inspired, always on section--dark
   ========================================================================== */

/* --- Container override: footer uses less vertical padding than sections -- */
.footer {
  padding-block: var(--space-8) var(--space-20);
  border-top: 1px solid var(--border-subtle);
}

@media (min-width: 1024px) {
  .footer {
    padding-bottom: var(--space-8);
  }
}

/* --- Grid: 3col mobile → 4col tablet ----------------------------------- */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: var(--space-5) clamp(var(--space-6), 8vw, var(--space-16));
  padding-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(3, auto);
    gap: var(--space-5) var(--space-24);
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    justify-content: initial;
    gap: var(--space-12);
  }
}

/* --- Brand column -------------------------------------------------------- */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  grid-column: 1 / -1;
  padding-bottom: var(--space-2);
}

@media (min-width: 1024px) {
  .footer__brand {
    align-items: flex-start;
    text-align: left;
    grid-column: auto;
    padding-bottom: 0;
  }
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.footer__logo:hover {
  opacity: 0.8;
}

.footer__logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.footer__logo-text {
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: 28ch;
}

/* --- Social icons -------------------------------------------------------- */
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-1);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);

  font-size: var(--text-base);
  color: var(--text-muted);
  text-decoration: none;

  transition: color var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth);
}

.footer__social-link:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Link columns -------------------------------------------------------- */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__heading {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  line-height: var(--leading-normal);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.footer__links a:hover {
  color: var(--text-primary);
}

.footer__links i {
  width: 1em;
  margin-right: var(--space-1);
  opacity: 0.6;
}

/* --- Contact items: icon + text inline ---------------------------------- */
.footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.footer__contact-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.footer__contact-item span {
  font-size: var(--text-xs);
}

@media (min-width: 640px) {
  .footer__contact-item span {
    font-size: var(--text-sm);
  }
}

/* --- Bottom bar ---------------------------------------------------------- */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer__company {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.footer__company strong {
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
}

.footer__legal {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Dark mode contrast fix: bump muted for WCAG AA on small text ------- */
[data-theme="dark"] .footer {
  --text-muted:     #8c8c94;
  --text-tertiary:  #acacb4;
}

/* --- Light mode: soft gray instead of forced dark (Apple style) ---------- */
[data-theme="light"] .footer {
  --bg-primary:      #f5f5f7;
  --bg-tertiary:     #ebebed;
  --text-primary:    #1d1d1f;
  --text-secondary:  #424245;
  --text-tertiary:   #5e5e63;
  --text-muted:      #6e6e73;
  --border-subtle:   #d8d8dc;
  --border-default:  #c8c8cd;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

[data-theme="light"] .footer__social-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pill-nav,
  .pill-nav__item,
  .pill-nav__label,
  .pill-nav__item--secondary,
  .pill-nav-toggle,
  .pill-nav-overlay {
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   12. FLOATING CONTROLS — Liquid Glass
   ========================================================================== */

.float-controls {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 8px;
}

.float-controls--left {
  right: auto;
  left: var(--space-4);
  display: none;
}

@media (min-width: 1024px) {
  .float-controls--left {
    display: flex;
  }
}

.float-controls__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;

  /* Liquid Glass — iOS 26 reflex system (auto-adapts to theme) */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop-soft) url(#glass-distort);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  border: none;
  box-shadow: var(--glass-shadow);

  color: var(--text-secondary);
  transition: transform var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              color var(--duration-fast) ease,
              background-color var(--duration-fast) ease;
}

.float-controls__btn svg {
  width: 18px;
  height: 18px;
}

.float-controls__btn:hover {
  transform: translateY(-1px);
  color: var(--text-primary);
  background-color: var(--glass-bg-hover);
}

.float-controls__btn:active {
  transform: translateY(0) scale(0.96);
}

/* --- Theme icon: Dark Inner toggle — counter-rotating paths -------------- */
.theme-icon {
  width: 18px;
  height: 18px;
}

.theme-icon__inner,
.theme-icon__outer {
  transform-origin: 16px 16px;
  transition: transform var(--duration-slower) var(--ease-in-out);
}

[data-theme="dark"] .theme-icon__outer {
  transform: rotate(180deg);
}

[data-theme="dark"] .theme-icon__inner {
  transform: rotate(-180deg);
}

/* --- Nav toggle: sidebar panel — pure sliding, no opacity ---------------- */
.float-controls__btn--nav svg {
  overflow: visible;
}

.nav-icon__sidebar,
.nav-icon__content {
  transition: transform var(--duration-slower) var(--ease-slide);
}

/* Default (nav visible): sidebar open, gap visible */
.nav-icon__sidebar {
  transform: translateX(0);
}

.nav-icon__content {
  transform: translateX(0);
}

/* Nav hidden: content slides left closing just the gap (1.25px) — no overlap */
.float-controls__btn--nav.is-active .nav-icon__content {
  transform: translateX(-1.25px);
}

/* Sidebar stays in place — only the content panel slides */
.float-controls__btn--nav.is-active .nav-icon__sidebar {
  transform: translateX(0);
}

/* --- Tooltips (desktop only, >=1024px) — Vercel-style with arrow --------- */
.float-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 12px;

  /* Liquid Glass — iOS 26 reflex system */
  background-color: var(--glass-bg-strong);
  backdrop-filter: var(--glass-backdrop-soft) url(#glass-distort);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  border: none;
  box-shadow: var(--glass-shadow);

  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip);

  /* Vercel spring entrance */
  opacity: 0;
  transform: translateY(-3px) scale(0.96);
  transform-origin: top right;
  transition: opacity var(--duration-fast) var(--ease-tooltip),
              transform var(--duration-fast) var(--ease-tooltip);
}

/* Arrow indicator pointing up to the button */
.float-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 14px;
  border: 5px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--glass-color) 36%, transparent);
}

/* Left-side controls: tooltip + arrow anchored left */
.float-controls--left .float-tooltip {
  right: auto;
  left: 0;
  transform-origin: top left;
}

.float-controls--left .float-tooltip::before {
  right: auto;
  left: 14px;
}

/* Hover: Vercel spring in */
.float-controls__btn:hover .float-tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Label */
.float-tooltip__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  line-height: 1;
}

/* Shortcut keys */
.float-tooltip__keys {
  display: flex;
  align-items: center;
  gap: 3px;
}

.float-tooltip__keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  border: 0.5px solid rgba(0, 0, 0, 0.07);
}

.float-tooltip__keys .key-sep {
  font-size: var(--text-2xs);
  line-height: 1;
  color: var(--text-muted);
}

/* Mac: hide "+" separator, ⌘ symbol style */
.is-mac .float-tooltip__keys .key-sep {
  display: none;
}

.is-mac .float-tooltip__keys .key-mod {
  font-size: var(--text-xs);
  min-width: auto;
  padding: 0 2px;
}

/* --- Dark theme tooltip text --------------------------------------------- */
[data-theme="dark"] .float-tooltip__label {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .float-tooltip__keys kbd {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .float-tooltip__keys .key-sep {
  color: rgba(255, 255, 255, 0.3);
}

/* --- Hide tooltips on mobile, show on desktop ----------------------------- */
.float-tooltip {
  display: none;
}

@media (min-width: 1024px) {
  .float-tooltip {
    display: flex;
  }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .float-controls__btn,
  .theme-icon__inner,
  .theme-icon__outer,
  .nav-icon__sidebar,
  .nav-icon__content,
  .float-tooltip {
    transition-duration: 0.01ms !important;
  }
}


/* --- On-dark: icon colors adapt (all breakpoints) ----------------------- */
.pill-nav--on-dark .pill-nav__item {
  color: rgba(255, 255, 255, 0.6);
}

.pill-nav--on-dark .pill-nav__item.is-active svg,
.pill-nav--on-dark .pill-nav__item.is-active svg path {
  fill: #CE32FF;
}

.pill-nav--on-dark .pill-nav__label {
  color: rgba(255, 255, 255, 0.9);
}

.pill-nav--on-dark .pill-nav__item.is-active .pill-nav__label {
  background: linear-gradient(135deg, #D94FFF, #FF5599);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   13. PILL NAV — DESKTOP OVERRIDES (>= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
  /* Hide mobile-only elements */
  .pill-nav-overlay {
    display: none;
  }

  /* All wrappers become transparent — children act as pill-nav's children */
  .pill-nav__bar {
    display: contents;
  }

  .pill-nav__dock {
    display: contents;
    /* Reset mobile glass */
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .pill-nav__tray {
    display: contents;
    max-height: none;
    opacity: 1;
    overflow: visible;
  }

  .pill-nav__expand {
    display: none;
  }

  /* Pill: vertical, left side, centered — glass restored here */
  .pill-nav {
    left: var(--space-5);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: 24px;
    width: 60px;
    max-height: none;
    overflow: hidden;

    /* Liquid Glass — iOS 26 reflex system (auto-adapts to theme) */
    background-color: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop-soft) url(#glass-distort);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
    border: none;
    box-shadow: var(--glass-shadow);

    transition: width var(--duration-normal) var(--ease-smooth),
                padding var(--duration-normal) var(--ease-smooth),
                opacity var(--duration-normal) ease,
                transform var(--duration-normal) ease;
  }

  .pill-nav::before {
    opacity: 1;
  }

  /* Reset mobile expanded state */
  .pill-nav.is-open {
    left: var(--space-5);
    right: auto;
    width: 60px;
    transform: translateY(-50%);
    border-radius: 24px;
    max-height: none;
    overflow: hidden;
    padding: 10px;
    gap: 2px;
  }

  .pill-nav.is-open .pill-nav__item {
    justify-content: center;
    padding: 10px;
    gap: 0;
  }

  /* Expand on hover */
  .pill-nav:hover {
    width: 190px;
  }

  /* Items: centered icon at rest */
  .pill-nav__item {
    justify-content: center;
    padding: 10px;
    border-radius: 14px;
  }

  .pill-nav__item svg {
    width: 22px;
    height: 22px;
  }

  .pill-nav__item:active {
    transform: scale(0.95);
  }

  /* Labels: fully removed at rest so they don't affect flex centering */
  /* Specificity (0,2,0) to beat .pill-nav__tray .pill-nav__label */
  .pill-nav .pill-nav__label {
    display: none;
  }

  /* Hover: left-align items and show labels */
  .pill-nav:hover .pill-nav__item {
    justify-content: flex-start;
    gap: 12px;
  }

  .pill-nav:hover .pill-nav__label {
    display: block;
  }

  /* Secondary items: hidden at rest, visible on hover */
  /* Must match .pill-nav__tray specificity (0,2,0) to override */
  .pill-nav__tray .pill-nav__item--secondary {
    display: none;
  }

  .pill-nav__item--secondary.is-active,
  .pill-nav:hover .pill-nav__item--secondary {
    display: flex;
  }

  /* Active secondary at rest: center icon like primary items */
  .pill-nav:not(:hover) .pill-nav__item--secondary.is-active {
    justify-content: center;
    gap: 0;
    padding: 8px;
  }

  /* Ctrl+B hide (desktop only) */
  .pill-nav.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-20px);
  }

  /* --- Scroll color adaptation (desktop only) ---------------------------- */
  .pill-nav--on-dark .pill-nav__item {
    color: rgba(255, 255, 255, 0.6);
  }

  .pill-nav--on-dark .pill-nav__item:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
  }

  .pill-nav--on-dark .pill-nav__item.is-active {
    --gradient-active-from: #D94FFF;
    --gradient-active-to:   #FF5599;
    --glass-color: #9a40cc;
    --glass-reflex-light: 0.6;
    --glass-reflex-dark: 2.5;
    background-color: color-mix(in srgb, var(--glass-color) 30%, transparent);
  }

  .pill-nav--on-dark .pill-nav__item.is-active .pill-nav__label {
    background: linear-gradient(135deg, #D94FFF, #FF5599);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .pill-nav--on-dark .pill-nav__label {
    color: rgba(255, 255, 255, 0.9);
  }

  .pill-nav--on-dark {
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 100%
    );
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
      0 2px 16px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
  }

  .pill-nav--on-dark::before {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0.22) 50%,
      rgba(255, 255, 255, 0.15) 70%,
      transparent 100%
    );
  }
}


/* ==========================================================================
   13. WHATSAPP FLOATING BUTTON
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  left: var(--space-4);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-whatsapp);
  color: var(--text-on-primary);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35),
              0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-spring);
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45),
              0 3px 6px rgba(0, 0, 0, 0.12);
  background-color: var(--color-whatsapp-hover);
}

.whatsapp-float:active {
  transform: scale(0.95);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: #ffffff;
}

@media (min-width: 1024px) {
  .whatsapp-float {
    bottom: var(--space-6);
    left: var(--space-6);
  }
}

/* Optional label on hover */
.whatsapp-float__label {
  position: absolute;
  left: calc(100% + 12px);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(-4px);
  pointer-events: none;
  transition: var(--transition-fast);
}

.whatsapp-float:hover .whatsapp-float__label {
  opacity: 1;
  transform: translateX(0);
}

/* Hide WhatsApp when mobile nav is open */
.whatsapp-float.is-nav-open {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.8);
}


/* ==========================================================================
   14. THEME TOGGLE
   ========================================================================== */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  overflow: hidden;
}

.theme-toggle:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.theme-toggle__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.theme-toggle:hover .theme-toggle__icon {
  transform: rotate(15deg);
}

/* Sun icon (shown in dark mode) */
.theme-toggle__sun {
  display: none;
}

/* Moon icon (shown in light mode) */
.theme-toggle__moon {
  display: block;
}

[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

[data-theme="dark"] .theme-toggle__moon {
  display: none;
}


/* ==========================================================================
   15. GRADIENT TEXT UTILITY
   ========================================================================== */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ==========================================================================
   16. PROSE (Rich text content)
   ========================================================================== */
.prose {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p + p {
  margin-top: var(--space-4);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
  margin-top: var(--space-1-5);
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--color-primary-hover);
}

.prose code {
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
  color: var(--text-tertiary);
  font-style: italic;
}

.prose img {
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}


/* ==========================================================================
   ERROR PAGES
   ========================================================================== */
/* --- Error Page — Pyramid code + flame video ----------------------------- */
/* Force dark mode always — error pages are always on dark bg */
.error-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  overflow: hidden;
  background: #060610;
  color: #fafafa;
}

/* Theme forced to dark via JS — fallback override if somehow light */
[data-theme="light"] .error-page {
  background: #060610;
  color: #fafafa;
}

/* ── Flame video — ignites like a gas stove ── */
.error-page__flame-video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 85%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0.3);
  transform-origin: bottom center;
}

/* ── Content — vertically centered ── */
.error-page__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* ── Error code — Pyramid layout ── */
.error-page__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.15rem, 0.5vw, 0.5rem);
  margin-bottom: var(--space-6);
}

/* Hide all animated elements until GSAP runs — prevents flash */
[data-error-anim],
.error-page__actions,
.error-page__hint {
  opacity: 0;
}

/* ── Numbers — white with stacked depth shadow ── */
.error-page__number {
  font-size: clamp(6rem, 18vw, 13rem);
  font-weight: var(--fw-extrabold);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.15),
    0 2px 0 rgba(0, 0, 0, 0.12),
    0 3px 0 rgba(0, 0, 0, 0.10),
    0 4px 0 rgba(0, 0, 0, 0.08),
    0 5px 0 rgba(0, 0, 0, 0.06),
    0 6px 0 rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.25);
}

.error-page__number--left {
  transform-origin: bottom right;
  animation: error-float-left 5s var(--ease-in-out) infinite;
}

.error-page__number--right {
  transform-origin: bottom left;
  animation: error-float-right 5s var(--ease-in-out) infinite;
}

/* ── Brandmark / Icon — clean, no glass, scaled to match numbers ── */
.error-page__brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: error-brand-float 6s var(--ease-in-out) infinite;
}

.error-page__brand-img {
  height: clamp(7.5rem, 20vw, 13rem);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4))
          drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
}

.error-page__icon-glyph {
  font-size: clamp(5rem, 14vw, 10rem);
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.10),
    0 3px 0 rgba(0, 0, 0, 0.08),
    0 4px 0 rgba(0, 0, 0, 0.06),
    0 6px 12px rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

/* ── Typography ── */
.error-page__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.15);
}

.error-page__text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.3);
}

/* ── Actions — same pattern as hero__actions / cta-final__actions ── */
.error-page__actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.error-page__actions .btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Fill button — navy→blue gradient like stats cards */
.error-page__btn-fill {
  background: linear-gradient(155deg, #0f1a4d 0%, #1e2e7a 40%, #5170FF 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.error-page__btn-fill:hover {
  color: #ffffff;
  filter: brightness(1.15);
}

/* Ghost button — liquid glass always visible on dark flame bg */
.error-page__btn-ghost {
  color: rgba(255, 255, 255, 0.9);
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--glass-shadow);
}

.error-page__btn-ghost:hover {
  color: #ffffff;
  background-color: var(--glass-bg-hover);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Code hint ── */
.error-page__hint {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.7),
    0 3px 10px rgba(0, 0, 0, 0.5);
}

.error-page__hint code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-backdrop-soft);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  padding: 0.25em 0.65em;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: inherit;
  color: #ffffff;
}

/* ── Disabled theme toggle on error pages ── */
.float-controls__btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Responsive — Tablet ── */
@media (min-width: 640px) {
  .error-page__content {
    padding: var(--space-10) var(--space-6);
  }

  .error-page__flame-video {
    object-position: center 75%;
  }

  .error-page__title {
    font-size: var(--text-2xl);
  }

  .error-page__text {
    font-size: var(--text-base);
  }

  .error-page__actions {
    gap: var(--space-3);
  }

  .error-page__actions .btn {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-md);
  }
}

/* ── Responsive — Desktop ── */
@media (min-width: 1024px) {
  .error-page__flame-video {
    object-position: center 70%;
  }

  .error-page__title {
    font-size: var(--text-3xl);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .error-page__flame-video {
    animation: none !important;
    opacity: 0.6;
  }

  .error-page__number,
  .error-page__brand {
    animation: none !important;
  }

  .error-page__number--left {
    transform: rotate(-12deg);
  }

  .error-page__number--right {
    transform: rotate(12deg);
  }
}


/* ==========================================================================
   COMING SOON PAGE
   Reusable "Próximamente" — shares error-page skeleton + flame video
   ========================================================================== */

.coming-soon__icon {
  width: clamp(5rem, 15vw, 8rem);
  height: clamp(5rem, 15vw, 8rem);
  margin: 0 auto var(--space-5);
  filter:
    drop-shadow(0 2px 4px rgba(255, 255, 255, 0.15))
    drop-shadow(0 6px 16px rgba(255, 255, 255, 0.08))
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
}

.coming-soon__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coming-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-radius: var(--radius-full);
  box-shadow: var(--glass-shadow);
}

/* Hide animated elements until GSAP runs */
[data-cs-anim] {
  opacity: 0;
}

@media (min-width: 640px) {
  .coming-soon__icon {
    margin-bottom: var(--space-6);
  }
}


/* ==========================================================================
   COMMAND PALETTE (Ctrl+K)
   Spotlight-style search — Liquid Glass centered dialog
   ========================================================================== */

/* --- Root overlay -------------------------------------------------------- */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4);
  padding-top: 25vh;

  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              visibility var(--duration-normal) var(--ease-smooth);
}

.cmd-palette.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Backdrop (blur + dim) ----------------------------------------------- */
.cmd-palette__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--overlay);
  backdrop-filter: var(--glass-backdrop-soft);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
}

/* --- Dialog — Liquid Glass reflex system --------------------------------- */
.cmd-palette__dialog {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: min(68vh, 480px);
  display: flex;
  flex-direction: column;

  /* Liquid Glass — iOS 26 reflex system (higher opacity for readability) */
  --glass-color: #d0d0d4;
  background-color: color-mix(in srgb, var(--glass-color) 65%, transparent);
  backdrop-filter: var(--glass-backdrop) url(#glass-distort);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  overflow: hidden;

  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-smooth);
}

.cmd-palette.is-open .cmd-palette__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* --- Light mode — glass-compatible internals ----------------------------- */
[data-theme="light"] .cmd-palette__search-icon {
  color: var(--color-primary);
}

[data-theme="light"] .cmd-palette__header {
  border-bottom-color: color-mix(in srgb, var(--glass-dark) 8%, transparent);
}

[data-theme="light"] .cmd-palette__esc {
  background: color-mix(in srgb, var(--glass-dark) 5%, transparent);
  border-color: color-mix(in srgb, var(--glass-dark) 10%, transparent);
  color: var(--text-secondary);
}

[data-theme="light"] .cmd-palette__group + .cmd-palette__group {
  border-top-color: color-mix(in srgb, var(--glass-dark) 8%, transparent);
}

[data-theme="light"] .cmd-palette__item:hover {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

[data-theme="light"] .cmd-palette__item-icon {
  background: color-mix(in srgb, var(--glass-dark) 4%, transparent);
  border-color: color-mix(in srgb, var(--glass-dark) 8%, transparent);
  color: var(--text-secondary);
}

[data-theme="light"] .cmd-palette__item:hover .cmd-palette__item-icon {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}

[data-theme="light"] .cmd-palette__item-keys kbd {
  background: color-mix(in srgb, var(--glass-dark) 5%, transparent);
  border-color: color-mix(in srgb, var(--glass-dark) 10%, transparent);
  color: var(--text-secondary);
}

[data-theme="light"] .cmd-palette__footer {
  border-top-color: color-mix(in srgb, var(--glass-dark) 8%, transparent);
}

[data-theme="light"] .cmd-palette__hint kbd {
  background: color-mix(in srgb, var(--glass-dark) 5%, transparent);
  border-color: color-mix(in srgb, var(--glass-dark) 10%, transparent);
  color: var(--text-secondary);
}

[data-theme="light"] .cmd-palette__hint {
  color: var(--text-tertiary);
}

/* --- Dark mode — dark-tinted glass --------------------------------------- */
[data-theme="dark"] .cmd-palette__dialog {
  --glass-color: #181828;
  background-color: color-mix(in srgb, var(--glass-color) 75%, transparent);
}

[data-theme="dark"] .cmd-palette__esc {
  color: var(--text-secondary);
}

[data-theme="dark"] .cmd-palette__item-keys kbd {
  color: var(--text-secondary);
}

[data-theme="dark"] .cmd-palette__hint kbd {
  color: var(--text-secondary);
}

[data-theme="dark"] .cmd-palette__hint {
  color: var(--text-tertiary);
}

/* --- Header / search input ----------------------------------------------- */
.cmd-palette__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-light) 10%, transparent);
}

.cmd-palette__search-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.cmd-palette__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  outline: none;
}

.cmd-palette__input::placeholder {
  color: var(--text-tertiary);
}

.cmd-palette__esc {
  flex-shrink: 0;
  display: none;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--glass-color) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-dark) 8%, transparent);
  border-radius: 6px;
  line-height: var(--leading-normal);
}

/* --- Body / results ------------------------------------------------------ */
.cmd-palette__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cmd-palette__body::-webkit-scrollbar {
  display: none;
}

/* Group */
.cmd-palette__group {
  padding: var(--space-1) 0;
}

.cmd-palette__group + .cmd-palette__group {
  border-top: 1px solid color-mix(in srgb, var(--glass-light) 10%, transparent);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}

.cmd-palette__group-title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Item */
.cmd-palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  transition: background-color var(--duration-fast) var(--ease-smooth);
}

.cmd-palette__item:hover {
  background-color: color-mix(in srgb, var(--glass-color) 16%, transparent);
}

/* Active item — glass bubble with brand tint (same philosophy as pill-nav) */
.cmd-palette__item.is-active {
  --glass-color: #6878cc;
  --glass-reflex-dark: 1.8;
  background-color: color-mix(in srgb, var(--glass-color) 28%, transparent);
  box-shadow: var(--glass-shadow);
}

.cmd-palette__item.is-active .cmd-palette__item-icon {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Gradient icon for active — Font Awesome via background-clip */
.cmd-palette__item.is-active .cmd-palette__item-icon i {
  background: var(--gradient-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .cmd-palette__item.is-active .cmd-palette__item-icon i {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .cmd-palette__item.is-active {
  --glass-color: #9a40cc;
  --glass-reflex-light: 0.6;
  --glass-reflex-dark: 2.5;
  background-color: color-mix(in srgb, var(--glass-color) 30%, transparent);
}

[data-theme="dark"] .cmd-palette__item.is-active .cmd-palette__item-icon {
  background: color-mix(in srgb, var(--color-secondary) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 25%, transparent);
}

/* Item icon — glass mini-bubble */
.cmd-palette__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--glass-color) 18%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border: 1px solid color-mix(in srgb, var(--glass-dark) 6%, transparent);
  transition: color var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth);
}

.cmd-palette__item:hover .cmd-palette__item-icon {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

[data-theme="dark"] .cmd-palette__item:hover .cmd-palette__item-icon {
  color: var(--color-secondary);
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

/* Item text */
.cmd-palette__item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cmd-palette__item-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.cmd-palette__item-desc {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keyboard shortcut badges (desktop only) */
.cmd-palette__item-keys {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.cmd-palette__item-keys kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-1-5);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--glass-color) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-dark) 8%, transparent);
  border-radius: 4px;
  line-height: var(--leading-normal);
}

/* Arrow chevron for navigation items */
.cmd-palette__item-arrow {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.cmd-palette__item:hover .cmd-palette__item-arrow,
.cmd-palette__item.is-active .cmd-palette__item-arrow {
  opacity: 1;
}

/* Empty state */
.cmd-palette__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-tertiary);
  text-align: center;
}

.cmd-palette__empty-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.cmd-palette__empty-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* --- Footer / keyboard hints --------------------------------------------- */
.cmd-palette__footer {
  display: none;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--glass-light) 10%, transparent);
}

.cmd-palette__hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

.cmd-palette__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--glass-color) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-dark) 8%, transparent);
  border-radius: 4px;
  line-height: 1.5;
}

/* --- Tablet (640px+) ----------------------------------------------------- */
@media (min-width: 640px) {
  .cmd-palette {
    padding: var(--space-6);
    padding-top: 20vh;
  }

  .cmd-palette__header {
    padding: var(--space-4) var(--space-5);
  }

  .cmd-palette__input {
    font-size: var(--text-md);
  }

  .cmd-palette__item-keys {
    display: flex;
  }

  .cmd-palette__esc {
    display: inline-flex;
  }

  .cmd-palette__footer {
    display: flex;
    padding: var(--space-3) var(--space-5);
  }
}

/* --- Desktop (1024px+) --------------------------------------------------- */
@media (min-width: 1024px) {
  .cmd-palette {
    padding-top: 18vh;
  }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cmd-palette,
  .cmd-palette__dialog {
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   MODULES STATS — Stepout-style interactive expanding cards
   Shared component: used on /modulos and home page
   ========================================================================== */
.modules-stats {
  padding-block: var(--space-4) var(--space-8);
}

/* ── FAQ Section — reusable accordion component (Liquid Glass) ── */

.faq-section .section__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.faq-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-section__item {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop-soft);
  -webkit-backdrop-filter: var(--glass-backdrop-soft);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth),
              background var(--duration-normal) var(--ease-smooth);
}

.faq-section__item:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--glass-shadow),
              0 4px 16px rgba(81, 112, 255, 0.06);
}

.faq-section__item[open] {
  border-color: rgba(81, 112, 255, 0.15);
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow),
              0 4px 20px rgba(81, 112, 255, 0.08);
}

[data-theme="dark"] .faq-section__item[open] {
  border-color: rgba(206, 50, 255, 0.15);
  box-shadow: var(--glass-shadow),
              0 4px 20px rgba(206, 50, 255, 0.06);
}

.faq-section__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-section__question::-webkit-details-marker {
  display: none;
}

.faq-section__question::marker {
  display: none;
  content: '';
}

.faq-section__chevron {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-spring),
              color var(--duration-normal) var(--ease-smooth);
}

.faq-section__item:hover .faq-section__chevron {
  color: var(--color-primary);
}

[data-theme="dark"] .faq-section__item:hover .faq-section__chevron {
  color: var(--color-secondary);
}

.faq-section__item[open] .faq-section__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

[data-theme="dark"] .faq-section__item[open] .faq-section__chevron {
  color: var(--color-secondary);
}

.faq-section__answer {
  padding: 0 var(--space-4) var(--space-4);
  animation: faq-open var(--duration-normal) var(--ease-spring);
}

.faq-section__answer p,
.faq-section__answer a {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.faq-section__answer p {
  color: var(--text-tertiary);
}

.faq-section__answer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-section__answer a:hover {
  color: var(--color-primary-hover);
}

@media (min-width: 640px) {
  .faq-section__question {
    min-height: 4rem;
    padding: var(--space-5) var(--space-6);
    font-size: var(--text-base);
  }

  .faq-section__answer {
    padding: 0 var(--space-6) var(--space-6);
  }
}


/* Scroll wrap — positioning context for chevron indicators */
/* ── Glass Swiper — reusable transform-based horizontal swiper ── */

.glass-swiper__viewport {
  overflow: visible;
  touch-action: pan-y;
}

.glass-swiper__track {
  display: flex;
  gap: var(--space-4);
  padding-inline: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-spring);
  will-change: transform;
}

.glass-swiper__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-inline: var(--space-6);
  margin-top: var(--space-4);
}

.glass-swiper__btn {
  --glass-reflex-light: 1;
  --glass-reflex-dark: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--glass-btn-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-btn-border);
  box-shadow: var(--glass-shadow);
  color: var(--glass-btn-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth),
              opacity var(--duration-normal) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-spring);
}

.glass-swiper__btn:hover:not(:disabled) {
  --glass-reflex-light: 1.4;
  background-color: color-mix(in srgb, #3D5CE5 12%, transparent);
  border-color: rgba(61, 92, 229, 0.28);
  box-shadow: var(--glass-shadow),
              0 2px 8px rgba(61, 92, 229, 0.08);
  transform: translateY(-1px) scale(1.02);
}

.glass-swiper__btn:active:not(:disabled) {
  transform: scale(0.96);
  --glass-reflex-light: 0.8;
  transition-duration: var(--duration-fast);
}

.glass-swiper__btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.glass-swiper__btn svg {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.glass-swiper__btn--prev:hover:not(:disabled) svg {
  transform: translateX(-2px);
}

.glass-swiper__btn--next:hover:not(:disabled) svg {
  transform: translateX(2px);
}

[data-theme="dark"] .glass-swiper__btn {
  --glass-reflex-light: 0.3;
  --glass-reflex-dark: 1.2;
  background-color: var(--glass-btn-bg);
  border-color: var(--glass-btn-border);
  color: var(--glass-btn-color);
}

[data-theme="dark"] .glass-swiper__btn:hover:not(:disabled) {
  --glass-reflex-light: 0.5;
  background-color: color-mix(in srgb, #b820e6 14%, transparent);
  border-color: rgba(184, 32, 230, 0.3);
  box-shadow: var(--glass-shadow),
              0 2px 8px rgba(184, 32, 230, 0.08);
}


/* ── Stats scroll wrapper + chevrons ── */

.modules-stats__scroll-wrap {
  position: relative;
  margin-inline: calc(-1 * var(--space-6));
}

/* Swiper — plain horizontal scroll inside the wrap */
.modules-stats__swiper {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modules-stats__swiper::-webkit-scrollbar {
  display: none;
}

/* ---- Liquid Glass scroll chevrons (shared, JS-created) ---- */

.scroll-chevron {
  --glass-reflex-light: 1.2;
  --glass-reflex-dark: 0.8;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  background-color: var(--glass-bg-hover);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  background-position: center;
  background-size: 55%;
  background-repeat: no-repeat;
  border: 1px solid color-mix(in srgb, var(--glass-light) 25%, transparent);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  z-index: 3;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-smooth);
}

.scroll-chevron:active {
  transform: translateY(-50%) scale(0.9);
}

.scroll-chevron--prev {
  left: var(--space-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2318181b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  opacity: 0;
  pointer-events: none;
}

.scroll-chevron--next {
  right: var(--space-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2318181b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

/* Parent class toggles visibility */
:not(.at-start) > .scroll-chevron--prev {
  opacity: 1;
  pointer-events: auto;
}

.at-end > .scroll-chevron--next {
  opacity: 0;
  pointer-events: none;
}

/* Dark mode */
[data-theme="dark"] .scroll-chevron {
  --glass-reflex-light: 0.3;
  --glass-reflex-dark: 1.4;
  background-color: color-mix(in srgb, var(--glass-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--glass-light) 8%, transparent);
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"] .scroll-chevron--prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] .scroll-chevron--next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

.modules-stats__grid {
  min-width: 100%;
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  flex-wrap: nowrap;
  padding-inline: var(--space-6);
}

/* ---- Base card (inactive) ---- */
.modules-stats__item {
  position: relative;
  flex: 0 0 7.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  font-family: var(--font-sans);
  text-align: left;
  background: rgba(81, 112, 255, 0.22);
  border: 1px solid rgba(81, 112, 255, 0.28);
  border-radius: var(--radius-xl);
  cursor: pointer;
  overflow: hidden;
  transition: flex var(--duration-slow) var(--ease-spring),
              background var(--duration-slow) var(--ease-smooth),
              border-color var(--duration-slow) var(--ease-smooth),
              box-shadow var(--duration-slow) var(--ease-smooth);
}

/* Grid pattern — 16px squares with diagonal fade */
.modules-stats__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
      linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to top right, transparent 10%, rgba(0,0,0,0.3) 40%, black 75%);
  -webkit-mask-image: linear-gradient(to top right, transparent 10%, rgba(0,0,0,0.3) 40%, black 75%);
}

.modules-stats__item > * {
  position: relative;
  z-index: 1;
}

/* SVG icon — stroke only, left-aligned */
.modules-stats__icon {
  width: 20px;
  height: 20px;
  align-self: flex-start;
  color: #3D5CE5;
  margin-bottom: var(--space-1);
  flex-shrink: 0;
  transition: color var(--duration-normal) var(--ease-smooth);
}

.modules-stats__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
}

.modules-stats__icon svg * {
  fill: none;
}

/* Decorative watermark */
.modules-stats__watermark {
  position: absolute;
  top: 3%;
  right: -10%;
  width: 62%;
  aspect-ratio: 1;
  color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth);
}

.modules-stats__item > .modules-stats__watermark {
  z-index: 0;
}

.modules-stats__watermark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 0.8;
}

.modules-stats__watermark svg * {
  fill: none;
}

.modules-stats__item.is-active .modules-stats__watermark {
  opacity: 1;
}

/* Metric row */
.modules-stats__metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-self: flex-start;
  gap: 0;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
}

.modules-stats__number,
.modules-stats__suffix {
  font-weight: var(--fw-extrabold);
  line-height: 0.85;
  color: #3D5CE5;
  transition: font-size var(--duration-slow) var(--ease-spring),
              color var(--duration-slow) var(--ease-smooth),
              -webkit-text-stroke var(--duration-normal) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-spring);
}

.modules-stats__number {
  font-size: var(--text-hero);
  min-width: 0;
}

/* Override animations.css .counter { min-width: 2ch } — higher specificity wins */
.modules-stats__number.counter {
  min-width: 0;
}

/* Abbreviated metric (e.g. "50K") — always visible on mobile.
   Full number only shown on desktop active.
   Specificity 0-2-0 beats animations.css .counter { display: inline-block } (0-1-0). */
.modules-stats__item .modules-stats__metric--full {
  display: none;
}

.modules-stats__suffix {
  font-size: var(--text-2xl);
}

/* Label */
.modules-stats__label {
  flex-basis: 100%;
  text-align: right;
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  color: #3D5CE5;
  line-height: var(--leading-tight);
  white-space: nowrap;
  margin-top: var(--space-1);
  transition: color var(--duration-normal) var(--ease-smooth),
              font-size var(--duration-slow) var(--ease-spring);
}

/* Short label visible on inactive, hidden on active */
.modules-stats__label--full {
  display: none;
}

/* Active: show full label, hide short */
.modules-stats__item.is-active .modules-stats__label--short {
  display: none;
}

.modules-stats__item.is-active .modules-stats__label--full {
  display: inline;
}

/* Detail — hidden on inactive, revealed on active */
.modules-stats__detail {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: max-height var(--duration-slow) var(--ease-spring),
              opacity var(--duration-slow) var(--ease-smooth);
}

/* Hover inactive */
.modules-stats__item:hover {
  background: rgba(81, 112, 255, 0.28);
}

.modules-stats__item:hover .modules-stats__number,
.modules-stats__item:hover .modules-stats__suffix {
  -webkit-text-stroke: 1px currentColor;
  transform: scale(1.03);
}

/* ---- Active card ---- */
.modules-stats__item.is-active {
  flex: 0 0 14rem;
  padding: var(--space-3);
  background: linear-gradient(155deg, #0f1a4d 0%, #1e2e7a 40%, #5170FF 100%);
  border-color: rgba(81, 112, 255, 0.2);
  box-shadow: 0 4px 24px rgba(81, 112, 255, 0.12);
}

.modules-stats__item.is-active::before {
  background-image:
      linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

.modules-stats__item.is-active .modules-stats__icon {
  color: rgba(255, 255, 255, 0.9);
}

.modules-stats__item.is-active .modules-stats__number,
.modules-stats__item.is-active .modules-stats__suffix {
  color: rgba(255, 255, 255, 0.9);
}

.modules-stats__item.is-active .modules-stats__number {
  font-size: var(--text-hero);
}

.modules-stats__item.is-active .modules-stats__suffix {
  font-size: var(--text-4xl);
}

/* Active metric: nowrap so label sits next to number */
.modules-stats__item.is-active .modules-stats__metric {
  flex-wrap: nowrap;
  gap: 0.3em;
}

/* Label inline with number on active */
.modules-stats__item.is-active .modules-stats__label {
  flex-basis: auto;
  text-align: left;
  margin-top: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  color: rgba(255, 255, 255, 0.85);
}

/* Detail revealed on active */
.modules-stats__item.is-active .modules-stats__detail {
  max-height: 4em;
  opacity: 1;
  color: rgba(255, 255, 255, 0.65);
}

.modules-stats__item.is-active:hover .modules-stats__number,
.modules-stats__item.is-active:hover .modules-stats__suffix {
  color: #fff;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
  transform: scale(1.02);
}

.modules-stats__item.is-active:hover {
  background: linear-gradient(155deg, #0f1a4d 0%, #1e2e7a 40%, #5170FF 100%);
}

/* ---- Dark mode — inactive ---- */
[data-theme="dark"] .modules-stats__item {
  background: rgba(206, 50, 255, 0.08);
  border-color: rgba(206, 50, 255, 0.12);
}

[data-theme="dark"] .modules-stats__item::before {
  background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

[data-theme="dark"] .modules-stats__item:hover {
  background: rgba(206, 50, 255, 0.12);
}

[data-theme="dark"] .modules-stats__icon {
  color: #b820e6;
}

[data-theme="dark"] .modules-stats__number,
[data-theme="dark"] .modules-stats__suffix {
  color: #b820e6;
}

[data-theme="dark"] .modules-stats__label {
  color: #b820e6;
}

[data-theme="dark"] .modules-stats__item.is-active .modules-stats__watermark {
  color: rgba(255, 255, 255, 0.06);
}

/* ---- Dark mode — active ---- */
[data-theme="dark"] .modules-stats__item.is-active {
  background: linear-gradient(155deg, #0d0620 0%, #2a1050 40%, #8B2FC9 100%);
  border-color: rgba(206, 50, 255, 0.2);
  box-shadow: 0 4px 24px rgba(206, 50, 255, 0.1);
}

[data-theme="dark"] .modules-stats__item.is-active:hover {
  background: linear-gradient(155deg, #0d0620 0%, #2a1050 40%, #8B2FC9 100%);
}

[data-theme="dark"] .modules-stats__item.is-active::before {
  background-image:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

[data-theme="dark"] .modules-stats__item.is-active .modules-stats__icon {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .modules-stats__item.is-active .modules-stats__number,
[data-theme="dark"] .modules-stats__item.is-active .modules-stats__suffix {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .modules-stats__item.is-active .modules-stats__label {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .modules-stats__item.is-active .modules-stats__detail {
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Tablet (640px+) ---- */
@media (min-width: 640px) {
  .modules-stats__scroll-wrap {
    margin-inline: 0;
  }

  .modules-stats__scroll-wrap > .scroll-chevron {
    display: none;
  }

  .modules-stats__swiper {
    overflow: visible;
  }

  .modules-stats__grid {
    padding-inline: 0;
  }

  .modules-stats__item {
    flex: 1;
    padding: var(--space-3);
  }

  .modules-stats__item.is-active {
    flex: 3;
    padding: var(--space-4);
  }

  .modules-stats__icon {
    width: 24px;
    height: 24px;
  }

  .modules-stats__number {
    font-size: var(--text-4xl);
  }

  .modules-stats__suffix {
    font-size: var(--text-3xl);
  }

  .modules-stats__item.is-active .modules-stats__number {
    font-size: var(--text-hero);
  }

  .modules-stats__item.is-active .modules-stats__suffix {
    font-size: var(--text-4xl);
  }

  .modules-stats__label {
    font-size: var(--text-sm);
  }

  .modules-stats__item.is-active .modules-stats__label {
    font-size: var(--text-base);
  }

  .modules-stats__item.is-active .modules-stats__detail {
    font-size: var(--text-base);
  }
}

/* ---- Desktop (1024px+) ---- */
@media (min-width: 1024px) {
  /* Switch to full number on active (e.g. 50K → 50.000+) */
  .modules-stats__item.is-active .modules-stats__metric--abbrev {
    display: none;
  }

  .modules-stats__item.is-active .modules-stats__metric--full {
    display: inline;
  }

  .modules-stats__item {
    padding: var(--space-3);
  }

  .modules-stats__item.is-active {
    flex: 3;
    padding: var(--space-5);
  }

  .modules-stats__icon {
    width: 28px;
    height: 28px;
  }

  .modules-stats__number {
    font-size: var(--text-hero);
  }

  .modules-stats__suffix {
    font-size: var(--text-3xl);
  }

  .modules-stats__item.is-active .modules-stats__number {
    font-size: var(--text-hero);
  }

  .modules-stats__item.is-active .modules-stats__suffix {
    font-size: var(--text-4xl);
  }

  .modules-stats__label {
    font-size: var(--text-sm);
  }

  .modules-stats__item.is-active .modules-stats__label {
    font-size: var(--text-xl);
  }

  .modules-stats__item.is-active .modules-stats__detail {
    font-size: var(--text-base);
  }
}


/* ==========================================================================
   CTA FINAL — Shared call-to-action component
   Used across: home, about, modules, plans, magia, free, experiences
   ========================================================================== */
.cta-final {
    padding-block: var(--space-12);
    text-align: center;
}

.cta-final__content {
    max-width: 640px;
    margin-inline: auto;
}

.cta-final__title {
    font-size: var(--text-3xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
}

.cta-final__text {
    font-size: var(--text-base);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-6);
    line-height: var(--leading-relaxed);
}

.cta-final__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .cta-final__actions {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .cta-final {
        padding-block: var(--space-20);
    }

    .cta-final__title {
        font-size: var(--text-4xl);
        margin-bottom: var(--space-6);
    }

    .cta-final__text {
        font-size: var(--text-lg);
        margin-bottom: var(--space-8);
    }
}