/* =========================================================
   TELECABLE - Tema Halloween 2026
   Ruta en servidor: public/css/halloween.css
   Solo se carga cuando $halloween = true en matrix.blade.php
   Todo queda acotado a body.theme-halloween
   Sintaxis clasica: compatible con el editor de cPanel

   Version: paso 8b (niebla en dos capas + brillo en carrusel)
   Version: paso 9 (habitantes por seccion).
   Version: paso 10 (nosotros: papel tapiz y brillo en valores).
   Version: paso 11 (planes: sellos, brillo y papel tapiz)
   Version: paso 12b (inicio: papel tapiz en apps y planes)

   Colores de marca (tomados del header real):
     Azul Telecable .. #0066FF
     Azul marino ..... #001F4F
     Blanco .......... #FFFFFF
   Acentos Halloween:
     Calabaza ........ #F2780C
     Calabaza oscuro . #B85500
   ========================================================= */


/* ---------- 1. Utilidad para vistas hijas ----------
   Las vistas que extienden matrix no ven $halloween.
   Usar class="hw-only" en cualquier elemento tematico:
   se oculta solo cuando el tema NO esta activo. */
body:not(.theme-halloween) .hw-only {
  display: none;
}


/* ---------- 2. Header: linea calabaza ---------- */
.theme-halloween > header {
  border-bottom: 3px solid #F2780C;
}


/* ---------- 3. Header: sombrero sobre el logo ----------
   Ajustar top / left si no calza con la forma del logo */
.theme-halloween .hw-logo a {
  position: relative;
  display: inline-block;
}

.theme-halloween .hw-logo__sombrero {
  position: absolute;
  top: -16px;
  left: -14px;
  width: 36px;
  height: 36px;
  background-image: url('../images/halloween/sombrero-bruja.svg');
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-18deg);
  pointer-events: none;
}


/* ---------- 4. Decoracion colgando del header ----------
   Se ubica justo debajo del header (top: 100%), sea cual
   sea su altura. No captura clics y se desvanece al
   hacer scroll (clase hw-scrolled, script en el header). */
.theme-halloween .hw-header-decor {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hw-scrolled .hw-header-decor {
  opacity: 0;
  visibility: hidden;
}

.theme-halloween .hw-decor__web {
  position: absolute;
  top: 0;
  width: 11vw;
  min-width: 80px;
  max-width: 160px;
  height: 11vw;
  min-height: 80px;
  max-height: 160px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

.theme-halloween .hw-decor__web--izq {
  left: 0;
  background-image: url('../images/halloween/telarana-izq.svg');
  background-position: left top;
}

.theme-halloween .hw-decor__web--der {
  right: 0;
  background-image: url('../images/halloween/telarana-der.svg');
  background-position: right top;
}

.theme-halloween .hw-decor__murcielagos {
  position: absolute;
  top: 28px;
  right: 14vw;
  width: 16vw;
  min-width: 120px;
  max-width: 230px;
  height: 5.3vw;
  min-height: 40px;
  max-height: 77px;
  background-image: url('../images/halloween/murcielagos.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  animation: hw-vuelo 9s ease-in-out infinite;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Los murcielagos se van apenas hay scroll (clase hw-scroll-min) */
.hw-scroll-min .hw-decor__murcielagos {
  opacity: 0;
  visibility: hidden;
}

@keyframes hw-vuelo {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-14px, 8px); }
  100% { transform: translate(0, 0); }
}


/* ---------- 4a. Header: mano zombi en "Lo quiero ahora" ----------
   Dos piezas: los dedos se doblan sobre el borde superior
   del boton y la muneca sale por el borde inferior, como si
   la mano lo sujetara desde atras. No capturan clics. Suben
   un poco al pasar el mouse. Permanecen visibles al hacer
   scroll; solo se ocultan al abrir el menu movil. */
.theme-halloween .hw-cta {
  position: relative;
  display: block;
}

.theme-halloween .hw-cta__dedos,
.theme-halloween .hw-cta__muneca {
  position: absolute;
  right: 14px;
  width: 64px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.4s ease, visibility 0.4s ease;
}

.theme-halloween .hw-cta__dedos {
  top: -18px;
  height: 32px;
  background-image: url('../images/halloween/mano-zombi-dedos.svg');
}

.theme-halloween .hw-cta__muneca {
  top: 100%;
  height: 72px;
  background-image: url('../images/halloween/mano-zombi-muneca.svg');
}

.theme-halloween .hw-cta:hover .hw-cta__dedos,
.theme-halloween .hw-cta:hover .hw-cta__muneca {
  transform: translateY(-3px);
}

.overflow-hidden .hw-cta__dedos,
.overflow-hidden .hw-cta__muneca {
  display: none;
}


/* ---------- 4b. Footer: silueta de cerros ----------
   Bloque propio antes del <footer>: ocupa su espacio y no
   se superpone a formularios ni contenido. El cerro del
   frente usa el mismo #00388C del footer. */
.theme-halloween .hw-footer-silueta {
  display: block;
  width: 100%;
  height: 110px;
  margin-bottom: -1px;
  background-image: url('../images/halloween/silueta-footer.svg');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 1600px 110px;
  pointer-events: none;
}

.theme-halloween footer a:hover {
  color: #FF9A3D;
}


/* ---------- 4c. Inicio: cementerio (concepto A) ----------
   Franja entre la seccion de apps y el banner azul
   "Internet, full velocidad". La loma del frente usa el
   mismo #0066FF del banner. Las animaciones (lapidas,
   murcielagos, calabazas) viven dentro del SVG y respetan
   la opcion de reducir movimiento. */
.theme-halloween .hw-cementerio {
  position: relative;
  display: block;
  width: 100%;
  height: 160px;
    margin-top: -60px;
  margin-bottom: -1px;
    background-color: transparent;
  background-color: #FFFFFF;
  background-image: url('../images/halloween/cementerio.svg');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 1600px 200px;
  pointer-events: none;
}


/* ---------- 4d. Inicio: sellos en las tarjetas de planes ----------
   <span class="hw-cinta" hidden><span>Texto</span></span> en cada
   .plan-card. El atributo hidden lo mantiene oculto cuando el
   tema esta apagado; aqui se muestra solo con el tema activo.
   Estilo por defecto: sello calabaza. Para probar la cinta
   diagonal, agregar la clase hw-cinta--diagonal. */
.theme-halloween .plan-card {
  position: relative;
}

.theme-halloween .hw-cinta {
  position: absolute;
  top: 12px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background-color: #F2780C;
  box-shadow: 0 4px 10px rgba(0, 31, 79, 0.25);
  color: #001F4F;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(12deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* Texto interno: ancho limitado para no tocar el anillo */
.theme-halloween .hw-cinta span {
  position: relative;
  z-index: 1;
  max-width: 64px;
}

/* Anillo punteado interior */
.theme-halloween .hw-cinta::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border: 2px dashed #FFD27A;
  border-radius: 50%;
}

/* Tallo de la calabaza */
.theme-halloween .hw-cinta::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 4px;
  height: 11px;
  margin-left: -2px;
  border-radius: 2px;
  background-color: #001F4F;
  transform: rotate(18deg);
}

.theme-halloween .plan-card:hover .hw-cinta {
  transform: rotate(0deg) scale(1.06);
}

/* Variante: cinta diagonal en la esquina */
.theme-halloween .hw-cinta--diagonal {
  top: 26px;
  right: -44px;
  width: 170px;
  height: 30px;
  border-radius: 0;
  font-size: 11px;
  transform: rotate(45deg);
}

.theme-halloween .hw-cinta--diagonal::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  border-top: 2px solid #B85500;
  border-bottom: 2px solid #B85500;
  border-radius: 0;
}

.theme-halloween .hw-cinta--diagonal::after {
  display: none;
}

.theme-halloween .hw-cinta--diagonal span {
  max-width: none;
}

.theme-halloween .plan-card:hover .hw-cinta--diagonal {
  transform: rotate(45deg);
}


/* ---------- 4e. Inicio: anochecer andino (Cable y TC Play) ----------
   La seccion promo pasa de blanco a celeste; la silueta del
   footer, solo en Inicio (clase hw-footer-silueta--noche),
   crece y continua el cielo hasta azul noche con estrellas,
   luna detras de los cerros y una bruja que la cruza.
   Capas: el div (cielo), ::before (escena) y ::after (cerros),
   un fondo por regla para el validador de cPanel.
   Las animaciones viven dentro de noche-escena.svg. */
.theme-halloween .promo-section {
  background-image: url('../images/halloween/noche-promo.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

.theme-halloween .hw-footer-silueta--noche {
  position: relative;
  height: 200px;
  background-image: url('../images/halloween/noche-cielo.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

/* Capa media: estrellas, luna y bruja */
.theme-halloween .hw-footer-silueta--noche::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 240px;
  background-image: url('../images/halloween/noche-escena.svg');
  background-repeat: no-repeat;
  background-position: 65% bottom;
  background-size: 1920px 240px;
}

/* Capa superior: cerros con calabazas iluminadas */
.theme-halloween .hw-footer-silueta--noche::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 110px;
  background-image: url('../images/halloween/silueta-footer-noche.svg');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 1600px 110px;
}


/* ---------- 4f. Inicio: hero (sombra de bruja + niebla) ----------
   Dos elementos independientes dentro de .hero-section, entre
   la imagen de fondo (z-index 1) y el contenido (z-index 2).
   Llevan el atributo hidden: sin el tema no ocupan espacio.
   Para quitar uno, borrar su linea en index.blade.php.
   La sombra aparece en el borde diagonal del panel azul y
   cruza solo hacia la izquierda, sin pasar sobre la persona. */
.theme-halloween .hw-hero-sombra {
  position: absolute;
  top: 14%;
  left: 0;
  z-index: 1;
  display: block;
  width: 360px;
  height: 204px;
  background-image: url('../images/halloween/bruja-sombra.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.16;
  pointer-events: none;
  transform: translate(-460px, 0);
  animation: hw-sombra 30s linear infinite;
}

@keyframes hw-sombra {
  0%   { transform: translate(42vw, 10px); opacity: 0; }
  6%   { opacity: 0.16; }
  28%  { transform: translate(-460px, -6px); opacity: 0.16; }
  29%  { transform: translate(-460px, -6px); opacity: 0; }
  100% { transform: translate(-460px, -6px); opacity: 0; }
}

.theme-halloween .hw-hero-niebla {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 4800px;
  height: 220px;
  pointer-events: none;
  animation: hw-niebla 80s linear infinite;
}

/* Capa de fondo: celeste grisacea, mas lenta */
.theme-halloween .hw-hero-niebla::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -1600px;
  width: 6400px;
  height: 100%;
  background-image: url('../images/halloween/niebla-fondo.svg');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 1600px 220px;
  animation: hw-niebla-fondo 160s linear infinite;
}

/* Capa delantera: blanca con bordes de nube */
.theme-halloween .hw-hero-niebla::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4800px;
  height: 100%;
  background-image: url('../images/halloween/niebla.svg');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 1600px 220px;
}

@keyframes hw-niebla {
  from { transform: translate(0, 0); }
  to   { transform: translate(-1600px, 0); }
}

@keyframes hw-niebla-fondo {
  from { transform: translate(0, 0); }
  to   { transform: translate(1600px, 0); }
}

@keyframes hw-niebla-fondo-movil {
  from { transform: translate(0, 0); }
  to   { transform: translate(1130px, 0); }
}

@keyframes hw-niebla-movil {
  from { transform: translate(0, 0); }
  to   { transform: translate(-1130px, 0); }
}


/* Carrusel del hero: brillo calabaza bajo el boton activo.
   Se mueve solo, porque el carrusel ya rota cada 3 s. */
.theme-halloween .carousel-container .active::after {
  content: "";
  position: absolute;
  right: 25%;
  bottom: 7px;
  left: 25%;
  height: 3px;
  border-radius: 2px;
  background-color: #F2780C;
  box-shadow: 0 0 12px 3px rgba(242, 120, 12, 0.65);
}

/* ---------- 4g. Inicio: habitantes por seccion ----------
   Fantasma (apps), arana (planes internet), gato (planes duo)
   y caramelos cayendo (cable y tc play). Cada uno es un
   elemento con atributo hidden dentro de su seccion; las
   animaciones viven dentro de cada SVG. */
.theme-halloween .apps-section,
.theme-halloween .plans-section,
.theme-halloween .promo-section {
  position: relative;
}

.theme-halloween .promo-container {
  position: relative;
  z-index: 1;
}

.theme-halloween .hw-fantasma {
  position: absolute;
  top: 36px;
  right: 14%;
  display: block;
  width: 84px;
  height: 100px;
  background-image: url('../images/halloween/fantasma.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

.theme-halloween .hw-arana {
  position: absolute;
  top: 0;
  left: 3%;
  display: block;
  width: 44px;
  height: 300px;
  background-image: url('../images/halloween/arana.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  pointer-events: none;
}

.theme-halloween .hw-gato {
  position: absolute;
  bottom: 8px;
  left: 3%;
  display: block;
  width: 80px;
  height: 84px;
  background-image: url('../images/halloween/gato.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
}

.theme-halloween .hw-caramelos {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
  background-image: url('../images/halloween/caramelos.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  pointer-events: none;
}

/* ---------- 4h. Nosotros ----------
   La clase hw-p-nosotros la pone matrix.blade.php en el body
   solo con el tema activo (hw-p- + nombre de la pagina).
   Papel tapiz: iconos al 6 % detras del contenido de main;
   la seccion de testimonios conserva su propia textura. */

.hw-p-nosotros main,
.hw-p-servicios main,
.hw-p-contacto main,
.hw-p-inicio .apps-section,
.hw-p-inicio .plans-section,
.hw-p-acceso main {
  background-image: url('../images/halloween/papel-tapiz.svg');
  background-repeat: repeat;
  background-position: center top;
  background-size: 240px 240px;
}

/* Brillo calabaza bajo el bloque de valores destacado */
.theme-halloween .hw-valor {
  position: relative;
}

.theme-halloween .hw-valor::after {
  content: "";
  position: absolute;
  right: 25%;
  bottom: 10px;
  left: 25%;
  height: 3px;
  border-radius: 2px;
  background-color: #F2780C;
  box-shadow: 0 0 12px 3px rgba(242, 120, 12, 0.65);
}

/* ---------- 4i. Planes (servicios) ----------
   Las tarjetas las arma Alpine con la clase plan-card-img.
   El sello (hw-cinta) y el brillo (hw-valor) reutilizan las
   reglas de Inicio y Nosotros; aqui solo el efecto hover. */
.theme-halloween .plan-card-img:hover .hw-cinta {
  transform: rotate(0deg) scale(1.06);
}

/* ---------- 5. Detalles finos ---------- */
.theme-halloween ::selection {
  background-color: #F2780C;
  color: #FFFFFF;
}


/* ---------- 6. Movil ---------- */
@media (max-width: 640px) {
  .theme-halloween .hw-decor__web--der,
  .theme-halloween .hw-decor__murcielagos {
    display: none;
  }

  .theme-halloween .hw-cta__dedos,
  .theme-halloween .hw-cta__muneca {
    right: 18px;
    width: 52px;
  }

  .theme-halloween .hw-cta__dedos {
    top: -14px;
    height: 26px;
  }

  .theme-halloween .hw-cta__muneca {
    height: 59px;
  }

  .theme-halloween .hw-cementerio {
    height: 70px;
    margin-top: -40px;
    background-color: transparent;
    background-size: 800px 100px;
  }
  .theme-halloween .hw-footer-silueta {
    height: 80px;
    background-size: 1164px 80px;
  }

  /* En movil no hay panel azul: la sombra pasaria sobre la persona */
  .theme-halloween .hw-hero-sombra {
    display: none;
  }

  .theme-halloween .hw-hero-niebla {
    height: 155px;
    animation-name: hw-niebla-movil;
  }

  .theme-halloween .hw-hero-niebla::before {
    left: -1130px;
    background-size: 1130px 155px;
    animation-name: hw-niebla-fondo-movil;
  }

  .theme-halloween .hw-hero-niebla::after {
    background-size: 1130px 155px;
  }

  .theme-halloween .hw-footer-silueta--noche {
    height: 100px;
    background-size: 100% 100%;
  }
   .theme-halloween .hw-cinta {
    top: 8px;
    right: 6px;
    width: 60px;
    height: 60px;
    font-size: 7px;
  }

  .theme-halloween .hw-cinta span {
    max-width: 44px;
  }

  .theme-halloween .hw-cinta::before {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-width: 1px;
  }

  .theme-halloween .hw-cinta::after {
    top: -6px;
    width: 3px;
    height: 8px;
  }
  
    /* Planes: tarjeta mas ancha, sello intermedio y mas adentro */
  .theme-halloween .plan-card-img .hw-cinta {
    top: 16px;
    right: 16px;
    width: 74px;
    height: 74px;
    font-size: 8.5px;
  }

  .theme-halloween .plan-card-img .hw-cinta span {
    max-width: 54px;
  }
  
 .theme-halloween .hw-fantasma {
    top: 8px;
    right: 12px;
    width: 44px;
    height: 52px;
  }

  .theme-halloween .hw-arana {
    left: 8px;
    width: 28px;
    height: 190px;
  }

  .theme-halloween .hw-gato {
    bottom: 4px;
    left: 10px;
    width: 44px;
    height: 46px;
  }
  .theme-halloween .hw-footer-silueta--noche::before {
    height: 132px;
    background-size: 1056px 132px;
  }

  .theme-halloween .hw-footer-silueta--noche::after {
    height: 80px;
    background-size: 1164px 80px;
  }

  .theme-halloween .hw-logo__sombrero {
    top: -12px;
    left: -10px;
    width: 28px;
    height: 28px;
  }
}


/* ---------- 7. Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .theme-halloween .hw-decor__murcielagos {
    animation: none;
    transition: none;
  }

  .theme-halloween .hw-hero-sombra {
    display: none;
  }

  .theme-halloween .hw-hero-niebla,
  .theme-halloween .hw-hero-niebla::before {
    animation: none;
  }

  .theme-halloween .hw-header-decor,
  .theme-halloween .hw-cinta,
  .theme-halloween .hw-cta__dedos,
  .theme-halloween .hw-cta__muneca {
    transition: none;
  }
}


/* ---------- Siguientes pasos ----------
   Paginas: inicio, nosotros, planes, deudas, contacto */