/*
Theme Name: Astra Child 1
Template: astra
*/

/* 🎃 Fondo Halloween local */
body {
  background: linear-gradient(180deg, #0a0a0a, #1a0d22);
  background-image: url('images/fondo-halloween.png');
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
  color: #f2f2f2;
  font-family: 'Poppins', sans-serif;
}

/* 🕸 Encabezado con efecto neón */
header, .site-header, .main-header-bar {
  background-color: #190019;
  border-bottom: 2px solid #ff7518;
  box-shadow: 0 0 15px #ff7518;
}

/* 🦇 Banner Halloween - Astra header */
.neon-banner {
  background: transparent;
  color: #ff2b05;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
  padding: 8px 0;
  border-top: 2px solid #ff2b05;
  border-bottom: 2px solid #ff2b05;
  text-shadow: 0 0 10px #ff2b05, 0 0 20px #ff2b05, 0 0 30px #ff2b05;
  animation: flicker-banner 2s infinite alternate;
  width: 100%;
}

.neon-banner .bat {
  margin-right: 10px;
  font-size: 24px;
  animation: flap 1.5s infinite ease-in-out;
}

@keyframes flicker-banner {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}

@keyframes flap {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.banner-text {
  color: #ff2b05;
}

/* 🔧 Ajustes responsive del banner en móviles */
@media (max-width: 768px) {
  .neon-banner {
    font-size: 14px;
    padding: 5px 0;
    border-width: 1px;
    text-shadow: 0 0 6px #ff2b05, 0 0 12px #ff2b05;
  }

  .neon-banner .bat {
    font-size: 16px;
    margin-right: 6px;
  }

  .banner-text {
    display: inline-block;
    line-height: 1.2;
  }
}

/* 💚 Texto "SERVICIOS STREAMING" sin recuadro */
.titulo-streaming {
  font-family: 'Creepster', cursive;
  font-size: 60px;
  color: #00ff40;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 40px #00ff00,
    0 0 80px #00ff00;
  animation: flicker-green 2s infinite alternate;
  margin: 40px 0;
}

/* ✨ Parpadeo del texto verde */
@keyframes flicker-green {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.6;
  }
}

/* 💥 Efecto de encendido */
.titulo-streaming {
  opacity: 0;
  animation: flicker-green 2s infinite alternate, glow-in 1s ease forwards;
}
@keyframes glow-in {
  from { opacity: 0; filter: brightness(0.3); }
  to { opacity: 1; filter: brightness(1.5); }
}

/* 📱 Ajuste móvil */
@media (max-width: 768px) {
  .titulo-streaming {
    font-size: 38px;
  }
}

/* 🚫 Eliminar recuadros automáticos de Astra en la tienda */
.ast-woocommerce-container,
.ast-container,
.woocommerce-products-header,
.woocommerce-products-header__title.page-title {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Poppins:wght@400;600&display=swap');
/* 📱 Ajuste fino del título en pantallas móviles */
@media (max-width: 768px) {
  .titulo-streaming {
    font-size: 26px !important; /* antes 38px */
    letter-spacing: 2px;
    margin: 20px 0;
  }
}

/* 📱 Ajuste adicional para pantallas muy pequeñas (teléfonos compactos) */
@media (max-width: 480px) {
  .titulo-streaming {
    font-size: 22px !important;
    line-height: 1.2;
  }
}
/* 💫 Efecto de flotación suave solo en móviles */
@media (max-width: 768px) {
  .titulo-streaming {
    animation:
      flicker-green 2s infinite alternate,
      glow-in 1s ease forwards,
      floaty 3s ease-in-out infinite;
  }
}

/* 🌙 Definición de la animación flotante */
@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
/* 👻 Tarjetas de producto estilo Halloween con colores alternos */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
  background: rgba(10, 0, 10, 0.85);
  border: 2px solid #ff7518;
  border-radius: 15px;
  box-shadow: 0 0 20px #ff7518;
  padding: 15px;
  transition: all 0.3s ease-in-out;
}

/* 💚 Producto 1, 4, 7... → verde */
.woocommerce ul.products li.product:nth-child(3n+1) {
  border-color: #00ff40;
  box-shadow: 0 0 20px #00ff40;
}
.woocommerce ul.products li.product:nth-child(3n+1):hover {
  border-color: #ff2b05;
  box-shadow: 0 0 25px #ff2b05;
}

/* 🧡 Producto 2, 5, 8... → naranja */
.woocommerce ul.products li.product:nth-child(3n+2) {
  border-color: #ff7518;
  box-shadow: 0 0 20px #ff7518;
}
.woocommerce ul.products li.product:nth-child(3n+2):hover {
  border-color: #8f00ff;
  box-shadow: 0 0 25px #8f00ff;
}

/* 💜 Producto 3, 6, 9... → morado */
.woocommerce ul.products li.product:nth-child(3n+3) {
  border-color: #8f00ff;
  box-shadow: 0 0 20px #8f00ff;
}
.woocommerce ul.products li.product:nth-child(3n+3):hover {
  border-color: #00ff40;
  box-shadow: 0 0 25px #00ff40;
}

/* 🎃 Título del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: #ff7518;
  font-family: 'Creepster', cursive;
  text-align: center;
  font-size: 22px;
  text-shadow: 0 0 10px #ff7518, 0 0 20px #ff7518;
}

/* 🕸 Precio */
.woocommerce ul.products li.product .price {
  color: #00ff40 !important;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 0 8px #00ff40;
}

/* 🔮 Botón “Añadir al carrito” */
.woocommerce ul.products li.product .button {
  background-color: #ff2b05;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px #ff2b05;
}
.woocommerce ul.products li.product .button:hover {
  background-color: #00ff40;
  box-shadow: 0 0 15px #00ff40;
  color: #000;
  transform: scale(1.05);
}

/* 📱 Ajuste móvil */
@media (max-width: 768px) {
  .woocommerce ul.products li.product {
    padding: 10px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
  }
}

/* 🎃 Decoraciones Halloween para productos WooCommerce */
.woocommerce ul.products li.product {
  position: relative;
  overflow: hidden;
}

/* 🧡 Calabaza → productos impares (1, 3, 5...) */
.woocommerce ul.products li.product:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 8px; /* 👆 movida hacia arriba */
  left: 8px;
  width: 70px;
  height: 70px;
  background-image: url('http://localhost/wordpress/wp-content/uploads/2025/10/calabaza-productos.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.95;
  transform: scale(1);
  transition: transform 0.4s ease, opacity 0.3s ease;
  z-index: 2;
}

/* 💀 Mano → productos pares (2, 4, 6...) */
.woocommerce ul.products li.product:nth-child(even)::after {
  content: "";
  position: absolute;
  top: 8px; /* 👆 también arriba */
  right: 8px;
  width: 80px;
  height: 80px;
  background-image: url('http://localhost/wordpress/wp-content/uploads/2025/10/mano-productod.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.95;
  transform: scale(1);
  transition: transform 0.4s ease, opacity 0.3s ease;
  z-index: 2;
}

/* 🌀 Efecto animado al pasar el mouse */
.woocommerce ul.products li.product:hover::after {
  transform: scale(1.1);
  opacity: 1;
  filter: brightness(1.3);
}

/* 📱 Ajuste móvil */
@media (max-width: 768px) {
  .woocommerce ul.products li.product:nth-child(odd)::after,
  .woocommerce ul.products li.product:nth-child(even)::after {
    width: 60px;
    height: 60px;
    top: 6px;
    opacity: 1;
  }
}

/* 👻 Fondo decorativo detrás de los botones */
.woocommerce ul.products li.product {
  position: relative;
}

/* 🎃 Decoraciones dinámicas en las tarjetas de producto */
.woocommerce ul.products li.product {
  position: relative;
  overflow: hidden;
}

/* 🖐 Manito zombí que sale desde abajo */
.woocommerce ul.products li.product::after {
  content: "";
  position: absolute;
  bottom: -15px;
  right: -10px;
  width: 80px;
  height: 80px;
  background-image: url('http://localhost/wordpress/wp-content/uploads/2025/10/mano-productod.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

/* 🎃 Calabaza en la esquina inferior izquierda */
.woocommerce ul.products li.product::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -5px;
  width: 60px;
  height: 60px;
  background-image: url('http://localhost/wordpress/wp-content/uploads/2025/10/calabaza-productos.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

/* 💀 Efecto de movimiento al pasar el mouse */
.woocommerce ul.products li.product:hover::after {
  transform: translateY(-8px) rotate(-5deg);
  opacity: 1;
}

.woocommerce ul.products li.product:hover::before {
  transform: translateY(-5px) rotate(5deg);
  opacity: 1;
}

/* 📱 Ajuste móvil */
@media (max-width: 768px) {
  .woocommerce ul.products li.product::after {
    width: 55px;
    height: 55px;
    bottom: -10px;
  }
  .woocommerce ul.products li.product::before {
    width: 45px;
    height: 45px;
  }
}

/* Asegura capas para que el fantasma pase delante y detrás */
.titulo-streaming{
  position: relative;
  display:inline-block;
  z-index: 1;            /* el texto está en medio */
  padding: .15em .3em;
}

/* === 👻 FANTASMAS FLOTANDO DETRÁS DEL CONTENIDO === */

.fantasma-volador {
  position: fixed;
  width: 250px;
  height: 250px;
  background-image: url('https://tienda.streaming1.site/staging/wp-content/uploads/2025/10/tipos-de-fantasmas-1755026567.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.15;
  mix-blend-mode: lighten;
  filter: blur(2px) brightness(1.3) contrast(120%);
  z-index: 1;
  pointer-events: none;
}

/* 👻 Fantasma 1 - movimiento amplio y lento */
.fantasma1 {
  top: 10%;
  left: -20%;
  animation: movimientoFantasma1 45s ease-in-out infinite;
}

@keyframes movimientoFantasma1 {
  0%   { transform: translate(-10vw, 10vh) scale(1); opacity: 0.08; }
  20%  { transform: translate(50vw, 20vh) scale(1.05) rotate(5deg); opacity: 0.18; }
  40%  { transform: translate(80vw, 40vh) scale(0.95) rotate(-3deg); opacity: 0.1; }
  60%  { transform: translate(30vw, 60vh) scale(1.1) rotate(4deg); opacity: 0.2; }
  80%  { transform: translate(10vw, 30vh) scale(1); opacity: 0.12; }
  100% { transform: translate(-10vw, 10vh) scale(1); opacity: 0.08; }
}

/* 👻 Fantasma 2 - más pequeño, más rápido y más bajo */
.fantasma2 {
  top: 50%;
  right: -25%;
  width: 180px;
  height: 180px;
  animation: movimientoFantasma2 35s ease-in-out infinite;
}

@keyframes movimientoFantasma2 {
  0%   { transform: translate(10vw, 0vh) scale(0.9) rotate(0deg); opacity: 0.1; }
  25%  { transform: translate(-30vw, 10vh) scale(1) rotate(-5deg); opacity: 0.2; }
  50%  { transform: translate(-70vw, 30vh) scale(1.1) rotate(6deg); opacity: 0.15; }
  75%  { transform: translate(-20vw, 50vh) scale(0.95) rotate(-4deg); opacity: 0.18; }
  100% { transform: translate(10vw, 0vh) scale(0.9) rotate(0deg); opacity: 0.1; }
}

/* 📱 En móvil: reducir tamaño y suavizar animación */
@media (max-width: 768px) {
  .fantasma-volador {
    width: 120px;
    height: 120px;
    opacity: 0.12;
    animation-duration: 55s;
  }
}
/* === 🕸️ TELARAÑAS ANIMADAS COLGANTES === */

.telaranya {
  position: fixed;
  width: 180px;
  height: 180px;
  background-image: var(--img-telaranya);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1
  z-index: 3;
  pointer-events: none;
  animation: balanceoTelaranya 12s ease-in-out infinite alternate;
}

/* === 🕸 TELARAÑAS ANIMADAS COLGANTES === */
.telarana {
  position: fixed;
  width: 180px;
  height: 180px;
  background-image: var(--img-telarana);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6; /* más visible */
  z-index: 9999; /* encima de todo */
  pointer-events: none;
  animation: balanceoTelarana 12s ease-in-out infinite alternate;
}

/* 🧵 Cuerda */
.telarana::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  width: 2px;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0));
  transform: translateX(-50%);
}

/* Esquinas */
.telarana-izquierda {
  top: -150px;
  left: 30px;
  transform-origin: top center;
  animation-delay: 2s;
}
.telarana-derecha {
  top: -150px;
  right: 30px;
  transform-origin: top center;
}

/* Balanceo */
@keyframes balanceoTelarana {
  0%   { transform: rotate(0deg) translateY(0); opacity: 0.4; }
  25%  { transform: rotate(2deg) translateY(3px); opacity: 0.5; }
  50%  { transform: rotate(-2deg) translateY(6px); opacity: 0.55; }
  75%  { transform: rotate(1deg) translateY(3px); opacity: 0.5; }
  100% { transform: rotate(0deg) translateY(0); opacity: 0.4; }
}

/* 📱 Móvil */
@media (max-width: 768px) {
  .telarana {
    width: 110px;
    height: 110px;
    opacity: 0.4;
    animation-duration: 18s;
  }
  .telarana::before {
    height: 120px;
  }
}