/* ============================================================
   tpl-nocturne.css — Skin "Nocturne": oscuro premium.
   Pensado para specs con theme.dark=true, pero debe verse bien
   también en claro. Solo refina piel sobre las clases sbx-*.
   Scope: body.sbx-tpl-nocturne. El theme llega en vars --sbx-*.
   ============================================================ */

/* Tipografía display: presencia y contraste */
.sbx-tpl-nocturne h1, .sbx-tpl-nocturne h2, .sbx-tpl-nocturne h3 {
  font-weight: 700; letter-spacing: -0.015em;
}
.sbx-tpl-nocturne .sbx-brand { letter-spacing: .02em; }

/* Hero: glow radial del accent */
.sbx-tpl-nocturne .sbx-hero {
  position: relative; padding: 100px 0 88px;
  background:
    radial-gradient(720px 380px at 50% 0%, color-mix(in srgb, var(--sbx-accent) 14%, transparent), transparent 72%);
}
.sbx-tpl-nocturne.sbx-dark .sbx-hero {
  background:
    radial-gradient(720px 380px at 50% 0%, color-mix(in srgb, var(--sbx-accent) 26%, transparent), transparent 72%),
    radial-gradient(1100px 520px at 50% 110%, color-mix(in srgb, var(--sbx-primary) 30%, transparent), transparent 75%);
}
.sbx-tpl-nocturne .sbx-hero-badge {
  border: 1px solid color-mix(in srgb, var(--sbx-accent) 45%, transparent);
  padding: 6px 14px; border-radius: 999px;
}

/* Cards glass: fondo translúcido + borde blanco fino */
.sbx-tpl-nocturne .sbx-card,
.sbx-tpl-nocturne .sbx-testi,
.sbx-tpl-nocturne .sbx-product,
.sbx-tpl-nocturne .sbx-summary,
.sbx-tpl-nocturne .sbx-faq-item {
  background: color-mix(in srgb, var(--sbx-bg) 55%, rgba(255, 255, 255, .5));
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(10, 14, 26, .12), 0 16px 40px -18px rgba(10, 14, 26, .28);
}
.sbx-tpl-nocturne.sbx-dark .sbx-card,
.sbx-tpl-nocturne.sbx-dark .sbx-testi,
.sbx-tpl-nocturne.sbx-dark .sbx-product,
.sbx-tpl-nocturne.sbx-dark .sbx-summary,
.sbx-tpl-nocturne.sbx-dark .sbx-faq-item {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 50px -22px rgba(0, 0, 0, .7);
}
@media (hover: hover) {
  .sbx-tpl-nocturne .sbx-product:hover {
    border-color: color-mix(in srgb, var(--sbx-accent) 55%, transparent);
  }
}

/* Botones con sombra del accent */
.sbx-tpl-nocturne .sbx-btn {
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--sbx-accent) 55%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
@media (hover: hover) {
  .sbx-tpl-nocturne .sbx-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px -8px color-mix(in srgb, var(--sbx-accent) 70%, transparent);
  }
}
.sbx-tpl-nocturne .sbx-btn:active { transform: translateY(0); filter: brightness(.97); }
.sbx-tpl-nocturne .sbx-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sbx-accent) 75%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sbx-accent) 26%, transparent);
}
.sbx-tpl-nocturne .sbx-btn--ghost { box-shadow: none; }
@media (hover: hover) {
  .sbx-tpl-nocturne .sbx-btn--ghost:hover {
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--sbx-accent) 45%, transparent);
  }
}

/* Secciones alternadas con franja sutil */
.sbx-tpl-nocturne .sbx-main > .sbx-sec:nth-of-type(even) {
  background: color-mix(in srgb, var(--sbx-primary) 4%, transparent);
}
.sbx-tpl-nocturne.sbx-dark .sbx-main > .sbx-sec:nth-of-type(even) {
  background: rgba(255, 255, 255, .025);
}

/* Header: línea inferior con acento tenue */
.sbx-tpl-nocturne .sbx-header {
  border-bottom: 1px solid color-mix(in srgb, var(--sbx-accent) 22%, transparent);
}
.sbx-tpl-nocturne .sbx-nav a:hover { color: var(--sbx-accent); }

/* Números y stats con brillo del accent */
.sbx-tpl-nocturne .sbx-stat-v { color: var(--sbx-accent); }
.sbx-tpl-nocturne .sbx-step-n {
  background: var(--sbx-accent);
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--sbx-accent) 65%, transparent);
}
.sbx-tpl-nocturne .sbx-icon {
  background: color-mix(in srgb, var(--sbx-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sbx-accent) 30%, transparent);
}

/* Banda CTA: degradado profundo con glow */
.sbx-tpl-nocturne .sbx-ctaband {
  background:
    radial-gradient(620px 300px at 50% -20%, color-mix(in srgb, var(--sbx-accent) 38%, transparent), transparent 75%),
    var(--sbx-primary);
}

/* Inputs integrados al glass */
.sbx-tpl-nocturne.sbx-dark .sbx-input {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16);
}
.sbx-tpl-nocturne.sbx-dark .sbx-input:focus { outline-color: var(--sbx-accent); }

/* Precio destacado con el accent en oscuro */
.sbx-tpl-nocturne.sbx-dark .sbx-price { color: var(--sbx-accent); }

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}