/* ============================================================================
   LOOVUS — PROMO HALLOWEEN 2026 · Letreros Neón LED
   ----------------------------------------------------------------------------
   Todo lo de la promo vive en este archivo y en promo-halloween.js.
   Para quitar la promo del sitio: borra las dos etiquetas que los llaman en
   index.html y la carpeta /neon-halloween/. Nada más se toca.

   Los colores y la tipografía de la promo NO tocan al resto del sitio: todo
   cuelga de .promo-hw o del <body class="neon-page">.
   ========================================================================== */

:root {
  --hw-naranja: #FF7A1A;
  --hw-morado: #B05CFF;
  --hw-negro: #050505;
  --hw-negro-2: #0d0d0d;
  --hw-carta: #16121c;
  --hw-linea: rgba(176, 92, 255, .28);
  --hw-texto: #f4f1f6;
  --hw-suave: #b9b2c4;
}

/* La palabra «Halloween» — y solo esa — va en Creepster. */
.hw-creepster {
  font-family: 'Creepster', 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
}

/* ============================================================================
   1. BARRA SUPERIOR (solo en el inicio)
   ========================================================================== */

/* El encabezado del sitio es `position:fixed`, así que la barra también tiene
   que serlo y colocarse por encima; luego el JS mide su altura real, la guarda
   en --hw-barra-h y con eso se empuja el encabezado y el contenido. */
.promo-hw-barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: block;
  padding: 9px 16px;
  background: linear-gradient(90deg, var(--hw-naranja) 0%, #ff9240 38%, var(--hw-morado) 100%);
  color: #120a04;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: filter .2s ease;
}

.promo-hw-barra:hover,
.promo-hw-barra:focus-visible { filter: brightness(1.08); }

.promo-hw-barra b { font-weight: 700; }

.promo-hw-barra .promo-hw-barra-cta {
  display: inline-block;
  margin-left: 6px;
  padding-bottom: 1px;
  border-bottom: 1.5px solid rgba(18, 10, 4, .55);
  font-weight: 700;
  white-space: nowrap;
}

/* Hueco para la barra: el encabezado fijo baja y el contenido también. */
body.promo-hw-con-barra { padding-top: var(--hw-barra-h, 38px); }
body.promo-hw-con-barra .site-header { top: var(--hw-barra-h, 38px); }

@media (max-width: 460px) {
  .promo-hw-barra { padding: 8px 12px; font-size: .74rem; }
  .promo-hw-barra .promo-hw-barra-cta { margin-left: 4px; }
}

/* ============================================================================
   2. VENTANA EMERGENTE
   ========================================================================== */

.promo-hw-fondo {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 2, 6, .82);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .28s ease;
  /* Respeta el notch y la barra del navegador en celular. */
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
}

.promo-hw-fondo.esta-visible { opacity: 1; }

.promo-hw-caja {
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
  margin: auto;
  padding: 34px 26px 26px;
  border: 1px solid var(--hw-linea);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(176, 92, 255, .20) 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(255, 122, 26, .16) 0%, transparent 60%),
    var(--hw-carta);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 122, 26, .10);
  color: var(--hw-texto);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: center;
  transform: translateY(14px) scale(.97);
  transition: transform .3s cubic-bezier(.2, .75, .2, 1);
  overflow-y: auto;
}

.promo-hw-fondo.esta-visible .promo-hw-caja { transform: none; }

/* --- Botón de cerrar: 48×48 reales, zona táctil cómoda en celular --- */
.promo-hw-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(10, 8, 14, .72);
  color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.promo-hw-cerrar:hover,
.promo-hw-cerrar:focus-visible {
  background: rgba(255, 122, 26, .22);
  border-color: var(--hw-naranja);
  transform: scale(1.06);
}

.promo-hw-logo {
  display: block;
  width: 118px;
  height: auto;
  margin: 0 auto 18px;
}

.promo-hw-eyebrow {
  margin: 0 0 6px;
  color: var(--hw-naranja);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.promo-hw-titulo {
  margin: 0 0 4px;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* «Especial Halloween» — la primera línea. Solo la palabra Halloween va en
   Creepster, que es un tipo decorativo y mucho más ancho que Poppins: por eso
   la línea puede partirse y el tamaño está limitado con clamp(). */
.promo-hw-titulo .promo-hw-linea1 {
  display: block;
  margin-bottom: 4px;
  color: var(--hw-morado);
  font-size: clamp(1.3rem, 6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

.promo-hw-titulo .hw-creepster {
  font-size: 1.35em;
  text-shadow: 0 0 18px rgba(176, 92, 255, .55);
}

.promo-hw-precio {
  margin: 14px 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hw-texto);
}

.promo-hw-precio strong {
  color: var(--hw-naranja);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.promo-hw-antes {
  margin-left: 8px;
  color: var(--hw-suave);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: line-through;
}

.promo-hw-nota {
  margin: 8px 0 20px;
  color: var(--hw-suave);
  font-size: .8rem;
  line-height: 1.5;
}

.promo-hw-acciones {
  display: grid;
  gap: 10px;
}

.promo-hw-boton {
  display: block;
  padding: 14px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--hw-naranja);
  color: #140b02;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s, transform .2s;
}

.promo-hw-boton:hover,
.promo-hw-boton:focus-visible { filter: brightness(1.1); transform: translateY(-1px); }

.promo-hw-boton-wa {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--hw-texto);
}

.promo-hw-boton-wa:hover,
.promo-hw-boton-wa:focus-visible {
  border-color: #25d366;
  background: rgba(37, 211, 102, .12);
  color: #fff;
}

.promo-hw-boton-wa svg { vertical-align: -3px; margin-right: 7px; }

/* Bloquea el desplazamiento del fondo mientras la ventana está abierta. */
body.promo-hw-abierta { overflow: hidden; }

@media (max-width: 420px) {
  .promo-hw-caja { padding: 30px 18px 20px; border-radius: 14px; }
  .promo-hw-titulo { font-size: 1.32rem; }
  .promo-hw-precio strong { font-size: 1.65rem; }
}

/* Pantallas bajas (celular acostado): que nunca se corte el botón. */
@media (max-height: 560px) {
  .promo-hw-fondo { align-items: flex-start; }
  .promo-hw-logo { width: 92px; margin-bottom: 12px; }
  .promo-hw-caja { padding-top: 28px; }
  .promo-hw-nota { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-hw-fondo,
  .promo-hw-caja,
  .promo-hw-boton,
  .promo-hw-cerrar { transition: none; }
  .promo-hw-caja { transform: none; }
}

/* ============================================================================
   3. PÁGINA /neon-halloween/
   ========================================================================== */

body.neon-page {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--hw-negro);
}

.neon-page .container { width: min(1120px, calc(100vw - 40px)); margin-inline: auto; }

/* --- Portada --- */
/* El encabezado del sitio es fijo y mide 84 px: la portada tiene que empezar
   por debajo o el primer renglón le queda encima. */
.neon-hero {
  position: relative;
  padding: 132px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 18% 10%, rgba(176, 92, 255, .22) 0%, transparent 60%),
    radial-gradient(60% 50% at 88% 30%, rgba(255, 122, 26, .18) 0%, transparent 62%),
    var(--hw-negro);
}

.neon-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}

.neon-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 13px;
  border: 1px solid var(--hw-naranja);
  border-radius: 999px;
  color: var(--hw-naranja);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.neon-hero h1 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2rem, 5.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
}

.neon-hero h1 .hw-creepster {
  color: var(--hw-morado);
  font-size: 1.22em;
  font-weight: 400;
  text-shadow: 0 0 26px rgba(176, 92, 255, .5);
}

.neon-hero-lead {
  max-width: 46ch;
  margin: 0 0 24px;
  color: var(--hw-suave);
  font-size: 1.02rem;
  line-height: 1.65;
}

.neon-precio-caja {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  padding: 14px 20px;
  border: 1px solid var(--hw-linea);
  border-radius: 12px;
  background: rgba(176, 92, 255, .07);
}

.neon-precio-caja .neon-desde { color: var(--hw-suave); font-size: .9rem; font-weight: 500; }
.neon-precio-caja .neon-cifra { color: var(--hw-naranja); font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; }
.neon-precio-caja .neon-antes { color: var(--hw-suave); font-size: 1rem; text-decoration: line-through; }
.neon-precio-caja .neon-medida { width: 100%; color: var(--hw-suave); font-size: .82rem; }

.neon-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.neon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--hw-naranja);
  color: #140b02;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s, transform .2s;
}

.neon-btn:hover, .neon-btn:focus-visible { filter: brightness(1.1); transform: translateY(-1px); }

.neon-btn-wa {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--hw-texto);
}

.neon-btn-wa:hover, .neon-btn-wa:focus-visible {
  border-color: #25d366;
  background: rgba(37, 211, 102, .12);
  color: #fff;
}

.neon-hero-media { margin: 0; }

.neon-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hw-linea);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.neon-hero-media figcaption {
  margin-top: 10px;
  color: var(--hw-suave);
  font-size: .82rem;
  text-align: center;
}

/* --- Fecha límite --- */
.neon-limite {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 122, 26, .06);
}

.neon-limite-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  text-align: center;
}

.neon-limite-icono { font-size: 1.5rem; line-height: 1; }
.neon-limite p { margin: 0; color: var(--hw-texto); font-size: .98rem; font-weight: 600; }
.neon-limite small { display: block; margin-top: 3px; color: var(--hw-suave); font-size: .84rem; font-weight: 400; }

/* --- Los 5 pasos --- */
.neon-pasos { padding: 64px 0 56px; }

.neon-seccion-titulo { margin: 0 0 8px; color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 700; letter-spacing: -.015em; }
.neon-seccion-lead { max-width: 54ch; margin: 0 0 40px; color: var(--hw-suave); font-size: .98rem; line-height: 1.65; }

.neon-paso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.neon-paso:nth-child(even) .neon-paso-media { order: 2; }

.neon-paso-media { margin: 0; }

.neon-paso-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hw-linea);
  border-radius: 14px;
}

.neon-paso-num {
  display: block;
  margin-bottom: 6px;
  color: var(--hw-naranja);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.neon-paso h3 { margin: 0 0 8px; color: var(--hw-morado); font-size: 1.32rem; font-weight: 700; }
.neon-paso p { margin: 0; color: var(--hw-suave); font-size: .98rem; line-height: 1.68; }

/* --- Cierre --- */
.neon-cierre {
  padding: 58px 0 66px;
  text-align: center;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(176, 92, 255, .16) 0%, transparent 65%),
    var(--hw-negro-2);
}

.neon-cierre h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; }
.neon-cierre h2 .hw-creepster { color: var(--hw-morado); font-size: 1.2em; font-weight: 400; }
.neon-cierre > .container > p { max-width: 52ch; margin: 0 auto 26px; color: var(--hw-suave); font-size: 1rem; line-height: 1.65; }
.neon-cierre .neon-acciones { justify-content: center; }

.neon-letra-chica {
  max-width: 62ch;
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #8e8798;
  font-size: .8rem;
  line-height: 1.6;
}

.neon-letra-chica strong { color: var(--hw-suave); font-weight: 600; }

/* --- Celular --- */
@media (max-width: 860px) {
  .neon-hero { padding: 104px 0 32px; }
  .neon-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .neon-hero-media { order: -1; }
  .neon-paso { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; }
  .neon-paso:nth-child(even) .neon-paso-media { order: 0; }
  .neon-pasos { padding: 44px 0 36px; }
  .neon-acciones .neon-btn { flex: 1 1 100%; justify-content: center; }
}