/* ============================================================
   🎛️ PANEL DE CONTROL DE ESTILOS — EDITA SOLO ESTE BLOQUE
   ============================================================ */

:root {

  /* ------------------------------------
     🎨 Colores de textos y títulos
     ------------------------------------ */
  --title-color: #ffffff;        /* Color del título */
  --text-color: #f2f2f2;         /* Color del texto */

  /* ------------------------------------
     🧊 Fondo del bloque de texto
     ------------------------------------ */
  --textblock-bg: rgba(0,0,0,0.55);      /* Fondo desktop */
  --textblock-bg-mobile: rgba(0,0,0,0.70); /* Fondo móvil */

  /* Para quitar fondo:
     --textblock-bg: transparent;
     --textblock-bg-mobile: transparent;
  */

  /* ------------------------------------
     🔵 Botón premium
     ------------------------------------ */
  --btn-bg: #1e6bff;             /* Fondo */
  --btn-text: #ffffff;           /* Texto */
  --btn-border: #1e6bff;         /* Borde */

  --btn-bg-hover: #ffffff;       /* Fondo hover */
  --btn-text-hover: #1e6bff;     /* Texto hover */
  --btn-border-hover: #ffffff;   /* Borde hover */

/* Overlay cinematográfico ligeramente más cálido y más claro */
--overlay-top: rgba(70, 50, 20, 0.28);     /* gris cálido con un toque ámbar */
--overlay-bottom: rgba(20, 15, 5, 0.18);   /* sombra cálida pero sigue siendo gris */

  /* Para desactivar overlay:
     --overlay-top: transparent;
     --overlay-bottom: transparent;
  */

  /* ------------------------------------
     📽️ Ruido cinematográfico
     ------------------------------------ */
  --noise-opacity: 0.12;   /* 0.08 suave | 0.12 cine | 0.18 dramático */

  /* Para desactivar ruido:
     --noise-opacity: 0;
  */

  /* ------------------------------------
     🖼️ Tarjetas
     ------------------------------------ */
  --card-shadow: rgba(0,0,0,0.12);   /* Sombra base */
  --card-shadow-hover: rgba(0,0,0,0.35); /* Sombra hover */

  /* ------------------------------------
     ⚙️ Ajustes generales
     ------------------------------------ */
  --blur-textblock: 10px;     /* Blur del bloque de texto */
  --blur-textblock-mobile: 12px;
  --btn-blur: 4px;            /* Blur del botón */
}


/* ============================
   CONTENEDOR PRINCIPAL
   ============================ */

.marquee-mask.marquee-4 {
  height: 85vh;
  min-height: 700px;
  max-height: 950px;
  overflow: hidden;
  position: relative;
  perspective: 1800px;
  perspective-origin: center;
}

/* FILAS */
.marquee-tilt {
  position: absolute;
  left: -12%;
  width: 124%;
}

/* POSICIONES */
.tilt-1 { top: -650px; transform: rotate(10deg); }
.tilt-2 { top: -45px;  transform: rotate(10deg); }
.tilt-3 { top: 558px;  transform: rotate(10deg); }
.tilt-4 { top: 1160px; transform: rotate(10deg); }

/* VIEWPORT */
.marquee-viewport {
  transform: rotate(8deg);
  width: 190%;
  margin-left: -45%;
  overflow: hidden;
}

/* TRACK */
.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  gap: 30px;
  will-change: transform;
}

/* ANIMACIONES */
.track-left {
  animation: marquee-left 16s ease-in-out infinite alternate;
}

.track-right {
  animation: marquee-right 22s ease-in-out infinite alternate;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-6%); }
}

@keyframes marquee-right {
  from { transform: translateX(-6%); }
  to   { transform: translateX(0); }
}

/* ============================
   TARJETAS (Apple TV + flotación)
   ============================ */

.marquee-card {
  flex: 0 0 auto;
  width: 750px;
  height: 550px;
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease;
  clip-path: inset(0 round 18px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  animation: float 6s ease-in-out infinite;

  /* ESTA LÍNEA ES LA QUE ACTIVA EL EFECTO 3D */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

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

/* BRILLO DINÁMICO */
.marquee-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.25), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.marquee-card:hover::after {
  opacity: 1;
}

.marquee-card:hover {
  transform: rotateY(12deg) rotateX(6deg) scale(1.06);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}

/* ============================
   TEXTO SUPERPUESTO
   ============================ */

.marquee-text-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  max-width: 80%;
  padding: 32px 38px;

  background: var(--textblock-bg);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  text-align: center;
  text-shadow: 0 6px 20px rgba(0,0,0,0.7);
}

.marquee-text-block h2 {
  font-size: 48px;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: var(--title-color);
}

.marquee-text-block p {
  font-size: 22px;
  margin: 0 0 26px 0;
  color: var(--text-color);
}

/* ============================
   BOTÓN PREMIUM
   ============================ */

.marquee-btn {
  display: inline-block;
  padding: 16px 40px;
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  color: var(--btn-text);
  font-size: 20px;
  font-weight: 600;
  border-radius: 14px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(4px);
}

.marquee-btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  border-color: var(--btn-border-hover);
  transform: scale(1.06);
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 768px) {

  .marquee-mask.marquee-4 {
    height: 95vh;
  }

  .marquee-card {
    width: 300px;
    height: 240px;
  }

  .marquee-viewport {
    width: 140%;
    margin-left: -20%;
    transform: rotate(5deg);
  }

  .marquee-track {
    gap: 14px;
  }

  .tilt-1 { top: -180px; }
  .tilt-2 { top: 80px; }
  .tilt-3 { top: 340px; }
  .tilt-4 { top: 600px; }

  .marquee-text-block {
    max-width: 90%;
    padding: 22px 26px;
    background: var(--textblock-bg-mobile);
    backdrop-filter: blur(12px);
  }

  .marquee-text-block h2 {
    font-size: 28px;
  }

  .marquee-text-block p {
    font-size: 16px;
  }

  .marquee-btn {
    font-size: 16px;
    padding: 12px 24px;
  }
}

/* OVERLAY CINEMATOGRÁFICO */
.marquee-mask {
  position: relative;
  overflow: hidden;
}

.marquee-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: linear-gradient(
    to bottom,
    var(--overlay-top),
    var(--overlay-bottom)
  );
}

/* BOTÓN CON CAMBIO DE TEXTO EN HOVER — VERSIÓN DEFINITIVA */
.marquee-btn.btn-hover-domain {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  color: transparent !important; /* Oculta el texto real */
  background: var(--btn-bg) !important; /* Mantiene fondo normal */
}

/* Texto normal */
.marquee-btn.btn-hover-domain::before {
  content: "Ir a la tienda oficial ➜";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .25s ease;
  color: var(--btn-text) !important;
  pointer-events: none;
  z-index: 3;
}

/* Texto en hover */
.marquee-btn.btn-hover-domain::after {
  content: "Ir a metacrilatolaser.com ➜";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
  color: var(--btn-text-hover) !important;
  pointer-events: none;
  z-index: 4;
}

/* Cambio */
.marquee-btn.btn-hover-domain:hover::before {
  opacity: 0 !important;
}

.marquee-btn.btn-hover-domain:hover::after {
  opacity: 1 !important;
}

/* MUY IMPORTANTE: evitar que Elementor cambie el color en hover */
.marquee-btn.btn-hover-domain:hover {
  color: transparent !important;
}

/* Arreglo crítico: evitar que la transición del botón bloquee los pseudo-elementos */
.marquee-btn.btn-hover-domain {
  transition: none !important;
}

/* Evitar que el fondo del hover tape los pseudo-elementos */
.marquee-btn.btn-hover-domain:hover {
  background: transparent !important;
  border-color: var(--btn-border-hover) !important;
}