/* Capa de luces neón: el hero (arco, chispas, logo y aros encendidos) y, de la sección
   Tecnología hacia abajo, brillos dorados, luz que sigue al cursor en las tarjetas y
   aparición al hacer scroll.
   Todo es decorativo; sin JavaScript la página se ve completa, solo sin la interacción.
   Variables que escribe assets/js/ui/lights.js:
     --gx / --gy  posición del cursor dentro de cada tarjeta (px)
     --scroll     avance del scroll de la página (0 a 1) */
:root {
  --neon: #ffd27a;
  --neon-soft: rgba(255, 210, 122, 0.45);
  --neon-faint: rgba(255, 196, 92, 0.16);
  --neon-glow: 0 0 6px rgba(255, 214, 140, 0.9), 0 0 18px rgba(255, 190, 80, 0.55), 0 0 42px rgba(214, 150, 50, 0.35);
  --neon-ring: 0 0 0 1px rgba(255, 210, 122, 0.7), 0 0 16px rgba(255, 190, 80, 0.45), 0 0 46px rgba(214, 150, 50, 0.25);
}

/* ---------- Barra de progreso neón bajo la cabecera ---------- */
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon) 20%, #fff3cf 50%, var(--neon) 80%, transparent);
  box-shadow: 0 0 10px var(--neon), 0 0 24px rgba(255, 190, 80, 0.5);
  transform-origin: left; transform: scaleX(var(--scroll, 0));
  pointer-events: none;
}
.site-nav__list a:hover { text-shadow: 0 0 12px rgba(255, 210, 122, 0.6); }
.site-nav__list a.is-active { text-shadow: 0 0 14px rgba(255, 210, 122, 0.55); }
@media (min-width: 1024px) {
  .site-nav__list a.is-active::after { box-shadow: 0 0 8px var(--neon), 0 0 18px rgba(255, 190, 80, 0.6); }
}

/* ---------- Botones con brillo ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after {
  content: ''; position: absolute; inset: -2px; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform 700ms var(--ease-out);
}
.btn--gold { background-color: #d8ab55; }
.btn--gold:hover::after { transform: translateX(120%); }
.btn--gold:hover, .btn--gold:focus-visible {
  box-shadow: 0 0 0 1px rgba(255, 228, 160, 0.8), 0 0 22px rgba(255, 196, 92, 0.65), 0 0 60px rgba(214, 150, 50, 0.4);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--neon); color: #fff3d6;
  box-shadow: var(--neon-ring), inset 0 0 18px rgba(255, 196, 92, 0.18);
}

/* ---------- Hero: luces neón e interacción ----------
   Arco de neón detrás del sillón que se enciende al cargar (parpadeo de tubo real) y luego
   respira, reflejo en el piso, chispas doradas flotando, logo con destello, aros de
   Salud/Relax/Bienestar/Calidad que se encienden por turnos y un borde de luz que recorre
   los beneficios. En computadora el sillón se inclina con el cursor y un foco de luz lo sigue.
   Variables que escribe assets/js/ui/hero-fx.js:
     --mx / --my  posición del cursor en el hero (px)
     --tx / --ty  inclinación del sillón (-1 a 1)
     --hs         avance del scroll dentro del hero (0 a 1) */
@property --perk-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero__copy { position: relative; z-index: 1; }
.hero__title, .hero__tagline { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65); }

/* Foco de luz que sigue al cursor (solo computadora: hero-fx.js pone .has-pointer) */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), rgba(255, 200, 110, 0.16), transparent 65%);
  opacity: 0; transition: opacity 500ms var(--ease-out);
}
.hero.has-pointer:hover::after { opacity: 1; }

/* Chispas doradas (canvas dibujado por hero-fx.js) */
.hero__sparks { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* Logo: brillo neón que respira y destello que cruza la palabra ALUX */
.lockup__emblem { animation: emblem-glow 4.5s ease-in-out infinite; }
@keyframes emblem-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 200, 100, 0.45)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)); }
  50% { filter: drop-shadow(0 0 22px rgba(255, 214, 140, 0.85)) drop-shadow(0 0 48px rgba(255, 180, 70, 0.45)); }
}
.lockup__word {
  background-image: linear-gradient(105deg, #e9c46f 0%, #d8ab55 35%, #fff6d8 47%, #ffe3a0 50%, #d8ab55 62%, #a9772b 80%, #e8c674 100%);
  background-size: 250% 100%; background-position: 100% 0;
  filter: drop-shadow(0 0 14px rgba(255, 200, 100, 0.5)) drop-shadow(0 0 34px rgba(214, 150, 50, 0.35));
  animation: word-shine 5s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}
@keyframes word-shine { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }
.lockup__country { text-shadow: 0 0 10px rgba(255, 210, 122, 0.7), 0 0 24px rgba(255, 180, 70, 0.4); }
.lockup__country::before, .lockup__country::after { box-shadow: 0 0 8px var(--neon), 0 0 18px rgba(255, 190, 80, 0.6); height: 2px; }

/* Aros de los pilares: se encienden uno tras otro; al pasar el cursor, al máximo */
.pillars__ring {
  border-color: #ffe0a0; transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
  box-shadow: 0 0 6px rgba(255, 214, 140, 0.6), 0 0 16px rgba(255, 190, 80, 0.35), inset 0 0 12px rgba(255, 190, 80, 0.25);
  animation: ring-on 6s ease-in-out infinite;
}
.pillars li:nth-child(2) .pillars__ring { animation-delay: 1.5s; }
.pillars li:nth-child(3) .pillars__ring { animation-delay: 3s; }
.pillars li:nth-child(4) .pillars__ring { animation-delay: 4.5s; }
@keyframes ring-on {
  0%, 30%, 100% { box-shadow: 0 0 6px rgba(255, 214, 140, 0.6), 0 0 16px rgba(255, 190, 80, 0.35), inset 0 0 12px rgba(255, 190, 80, 0.25); }
  12% { box-shadow: 0 0 0 1px #fff1c9, 0 0 14px #ffd27a, 0 0 36px rgba(255, 180, 70, 0.8), inset 0 0 22px rgba(255, 200, 110, 0.6); }
}
.pillars__ring .ico { filter: drop-shadow(0 0 6px rgba(255, 214, 140, 0.9)); }
.pillars li:hover .pillars__ring {
  animation-play-state: paused; transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 1px #fff1c9, 0 0 16px #ffd27a, 0 0 44px rgba(255, 180, 70, 0.85), inset 0 0 24px rgba(255, 200, 110, 0.6);
}

/* Botón principal: pulso de neón cada pocos segundos */
.hero__actions .btn--gold { animation: cta-pulse 3.2s ease-out 1.6s infinite; }
@keyframes cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 210, 122, 0.7), 0 0 18px rgba(255, 190, 80, 0.45); }
  60%, 100% { box-shadow: 0 0 0 14px rgba(255, 210, 122, 0), 0 0 18px rgba(255, 190, 80, 0.45); }
}
.hero__actions .btn--gold:hover { animation: none; }

/* Arco de neón detrás del sillón */
.hero__visual { isolation: isolate; }
.hero__arch {
  position: absolute; z-index: -1; left: 50%; bottom: 9%; width: min(78%, 470px); aspect-ratio: 0.82;
  border-radius: 999px 999px 0 0; border: 3px solid #fff1c9; border-bottom: 0;
  box-shadow:
    0 0 4px #fff1c9, 0 0 12px #ffd27a, 0 0 28px rgba(255, 190, 80, 0.9), 0 0 70px rgba(255, 170, 60, 0.55),
    inset 0 0 12px #ffd27a, inset 0 0 40px rgba(255, 180, 70, 0.45), inset 0 0 120px rgba(214, 150, 50, 0.22);
  translate: calc(-50% + var(--tx, 0) * -14px) calc(var(--ty, 0) * -10px);
  animation: neon-on 1.6s linear 0.4s both, neon-breathe 5s ease-in-out 2s infinite;
}
.hero__arch-inner {
  position: absolute; inset: 9% 9% 0; border-radius: inherit; border: 1.5px solid rgba(255, 228, 170, 0.85); border-bottom: 0;
  box-shadow: 0 0 8px rgba(255, 210, 122, 0.85), 0 0 24px rgba(255, 180, 70, 0.45), inset 0 0 14px rgba(255, 190, 80, 0.35);
  animation: neon-on 1.4s linear 0.9s both;
}
@media (max-width: 1023px) {
  .hero__visual { margin-top: var(--s-4); }
  .hero__arch { width: min(76%, 420px); aspect-ratio: 1.02; bottom: 10%; }
}
/* Encendido de tubo: parpadea y queda prendido */
@keyframes neon-on {
  0% { opacity: 0; } 8% { opacity: 0.9; } 12% { opacity: 0.1; } 20% { opacity: 1; } 24% { opacity: 0.2; }
  34% { opacity: 1; } 40% { opacity: 0.55; } 46%, 100% { opacity: 1; }
}
@keyframes neon-breathe { 50% { filter: brightness(1.3) saturate(1.1); } }

/* Reflejo en el piso */
.hero__floor {
  position: absolute; z-index: -1; left: 50%; bottom: -2%; width: min(96%, 600px); height: 80px; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 150, 0.6), rgba(255, 180, 70, 0.28) 55%, transparent);
  box-shadow: 0 0 0 0 transparent;
  animation: neon-on 1.6s linear 0.4s both, floor-breathe 5s ease-in-out 2s infinite;
}
.hero__floor::before {
  content: ''; position: absolute; inset: 22% 6%; border-radius: 50%; border: 2px solid rgba(255, 228, 170, 0.9);
  box-shadow: 0 0 10px #ffd27a, 0 0 26px rgba(255, 180, 70, 0.7), inset 0 0 12px rgba(255, 190, 80, 0.5);
}
@keyframes floor-breathe { 50% { opacity: 0.75; } }

/* Sillón: flota suave, se inclina con el cursor y sube un poco al hacer scroll */
.hero__visual img {
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 40px rgba(255, 190, 80, 0.2));
  transform: perspective(1100px) rotateY(calc(var(--tx, 0) * 7deg)) rotateX(calc(var(--ty, 0) * -5deg)) translateY(calc(var(--hs, 0) * -40px));
  transition: transform 500ms var(--ease-out);
  animation: chair-float 6s ease-in-out 1.8s infinite;
}
@keyframes chair-float { 50% { translate: 0 -10px; } }

/* Beneficios: borde de luz que da la vuelta */
.perks { position: relative; border-color: rgba(255, 210, 122, 0.4); box-shadow: 0 0 30px -8px rgba(255, 190, 80, 0.35); }
.perks::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--perk-angle), transparent 0deg, #fff1c9 20deg, #ffd27a 40deg, transparent 80deg, transparent 180deg, #ffd27a 220deg, transparent 260deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px #ffd27a);
  animation: perk-spin 7s linear infinite;
}
@keyframes perk-spin { to { --perk-angle: 360deg; } }
.perk { transition: transform 300ms var(--ease-out); }
.perk > .ico { filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.7)); transition: filter 300ms, transform 300ms var(--ease-out); }
.perk:hover { transform: translateY(-2px); }
.perk:hover > .ico { transform: scale(1.12); filter: drop-shadow(0 0 10px #ffd27a) drop-shadow(0 0 24px rgba(255, 180, 70, 0.7)); }
.perk:hover strong { color: #fff0c8; text-shadow: 0 0 12px rgba(255, 210, 122, 0.5); }

/* Entrada al cargar: el texto, luego el sillón y los beneficios, una sola vez. */
.hero__copy > *, .hero__visual, .perks {
  animation: hero-in 700ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.hero__copy > :nth-child(2) { animation-delay: 60ms; }
.hero__copy > :nth-child(3) { animation-delay: 120ms; }
.hero__copy > :nth-child(4) { animation-delay: 180ms; }
.hero__copy > :nth-child(5) { animation-delay: 240ms; }
.hero__visual { animation-delay: 200ms; }
.perks { animation-delay: 320ms; }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Títulos de sección ---------- */
.section { position: relative; }
.section::before {
  content: ''; position: absolute; top: 0; left: 50%; width: min(70%, 760px); height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  box-shadow: 0 0 10px var(--neon), 0 0 30px rgba(255, 190, 80, 0.45);
  opacity: 0.75; pointer-events: none;
}
h2 { filter: drop-shadow(0 0 16px rgba(255, 200, 100, 0.28)); }
.eyebrow { text-shadow: 0 0 10px rgba(255, 200, 100, 0.45); }
.tech__title { filter: drop-shadow(0 0 22px rgba(255, 200, 100, 0.45)); }
@keyframes arch-breathe { 50% { filter: brightness(1.25); } }
.tech__halo {
  position: absolute; left: 50%; bottom: 4%; width: min(96%, 520px); aspect-ratio: 1.6; translate: -50% 0;
  border-radius: 999px 999px 0 0; border: 3px solid #ffe6b0; border-bottom: 0;
  box-shadow: 0 0 6px #ffd27a, 0 0 18px rgba(255, 190, 80, 0.8), 0 0 50px rgba(255, 170, 60, 0.5),
    inset 0 0 22px rgba(255, 190, 80, 0.4), inset 0 0 80px rgba(214, 150, 50, 0.15);
  animation: arch-breathe 6s ease-in-out infinite;
}
.tech__halo::after {
  content: ''; position: absolute; left: -6%; right: -6%; bottom: -24px; height: 48px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, 0.5), rgba(214, 150, 50, 0.18) 60%, transparent);
}

/* ---------- Tarjetas con luz que sigue al cursor ---------- */
.benefit, .model-card, .features li, .reasons li, .step, .delivery, .payments, .quote, .mv__item, .warranty, .lead-form {
  position: relative;
}
.benefit::after, .model-card::after, .features li::after, .reasons li::after, .step::after,
.delivery::after, .payments::after, .quote::after, .mv__item::after, .warranty::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 205, 110, 0.16), transparent 60%);
  opacity: 0; transition: opacity 300ms var(--ease-out);
}
.benefit:hover::after, .model-card:hover::after, .features li:hover::after, .reasons li:hover::after, .step:hover::after,
.delivery:hover::after, .payments:hover::after, .quote:hover::after, .mv__item:hover::after, .warranty:hover::after { opacity: 1; }

.benefit, .model-card, .quote, .delivery, .payments, .step {
  transition: border-color 300ms, box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.benefit:hover, .model-card:hover, .quote:hover, .delivery:hover, .payments:hover {
  border-color: rgba(255, 210, 122, 0.75);
  box-shadow: 0 0 18px rgba(255, 190, 80, 0.25), 0 0 60px -10px rgba(214, 150, 50, 0.35), inset 0 0 30px rgba(255, 190, 80, 0.06);
  transform: translateY(-4px);
}
.step:hover { box-shadow: 0 -6px 24px -8px rgba(255, 190, 80, 0.55); }
.step { border-top-color: var(--neon); }
.step__n { text-shadow: 0 0 10px rgba(255, 210, 122, 0.7), 0 0 28px rgba(255, 180, 70, 0.4); }
.benefit__mark { box-shadow: 0 0 20px rgba(255, 190, 80, 0.25), inset 0 0 20px rgba(255, 190, 80, 0.2); transition: box-shadow 300ms, transform 300ms var(--ease-out); }
.benefit:hover .benefit__mark { box-shadow: var(--neon-ring), inset 0 0 26px rgba(255, 196, 92, 0.4); transform: scale(1.05); }
.benefit__mark .ico, .features .ico, .reasons .ico { filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.55)); }
.features li:hover strong { color: #fff0c8; }

.model-card__media img { transition: transform 600ms var(--ease-out); }
.model-card:hover .model-card__media img { transform: scale(1.04); }
.model-card__price { text-shadow: 0 0 14px rgba(255, 200, 100, 0.35); }
.chip[aria-pressed='true'] { box-shadow: 0 0 16px rgba(255, 190, 80, 0.55); }
.chip:hover { box-shadow: 0 0 12px rgba(255, 190, 80, 0.3); }
.rail__btn:hover:not(:disabled) { box-shadow: var(--neon-ring); color: #fff0c8; }

.warranty__seal { animation: seal-glow 4s ease-in-out infinite; }
@keyframes seal-glow {
  50% { box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px rgba(255, 210, 122, 0.8), 0 0 40px rgba(255, 190, 80, 0.55), 0 0 90px rgba(214, 150, 50, 0.3); }
}
.importers { box-shadow: 0 0 30px -6px rgba(255, 190, 80, 0.3); }
.contact__phone .ico { filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.7)); }
.contact__phone:hover span { text-shadow: 0 0 18px rgba(255, 210, 122, 0.6); }
.gallery li { transition: box-shadow 300ms, border-color 300ms; }
.gallery li:hover { border-color: rgba(255, 210, 122, 0.75); box-shadow: 0 0 22px rgba(255, 190, 80, 0.35); }

/* ---------- Aparición al hacer scroll (la clase la pone lights.js) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--rd, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Movimiento reducido: luces quietas, sin seguimiento ni animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  .tech__halo, .warranty__seal { animation: none !important; }
  .hero__copy > *, .hero__visual, .perks, .hero__visual img, .lockup__emblem, .lockup__word,
  .pillars__ring, .hero__actions .btn--gold, .hero__arch, .hero__arch-inner, .hero__floor, .perks::before { animation: none !important; }
  .hero__visual img { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .btn--gold::after { display: none; }
}