/* ==========================================================================
   TEMPORADA DE HALLOWEEN — SPP · octubre 2026
   Todo vive bajo html.hw. Esa clase la pone un script de 3 líneas en el
   <head> SOLO si la fecha del visitante es anterior al 3 nov 2026, 00:00
   (hora de Ciudad de México). Sin la clase, este archivo no pinta nada:
   el sitio se ve exactamente igual que antes.
   Vista previa forzada: ?temporada=halloween · Apagar a mano: ?temporada=off
   El logotipo NO se toca: es el archivo real de la marca.
   ========================================================================== */

html.hw{
  --bg:#120A1F;
  --bg-2:#1B0F2D;
  --card:#22133A;
  --card-2:#2C1949;
  --line:rgba(201,167,245,.14);
  --line-strong:rgba(201,167,245,.30);
  --blue:#4A1F78;
  --blue-light:#D2B4FA;
  --green:#FF7A1A;
  --green-light:#FFA552;
  --hw-naranja:#FF8C1A;
  --hw-morado:#6B2FA0;
  --hw-noche:#0B0614;
  --hw-ribbon-h:52px;
}

/* cielo con estrellas, muy tenue, detrás de todo */
html.hw body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 140px 90px,rgba(255,236,200,.45),transparent 60%),
    radial-gradient(1.4px 1.4px at 230px 170px,rgba(255,255,255,.40),transparent 60%),
    radial-gradient(1px 1px at 80px 210px,rgba(210,180,250,.45),transparent 60%),
    radial-gradient(1.1px 1.1px at 300px 40px,rgba(255,255,255,.35),transparent 60%);
  background-size:320px 260px;
}
html.hw .section--alt{background-color:var(--bg-2)}

/* ---------- franja fija de temporada (siempre visible) ---------- */
.hw-ribbon{display:none}
html.hw .hw-ribbon{
  display:block;position:sticky;top:0;z-index:80;
  height:var(--hw-ribbon-h);overflow:hidden;
  background:
    radial-gradient(120px 60px at 50% 120%,rgba(255,140,26,.35),transparent 70%),
    linear-gradient(90deg,#1E0B33 0%,#3B1460 30%,#4F1C7A 50%,#3B1460 70%,#1E0B33 100%);
  border-bottom:2px solid var(--hw-naranja);
  box-shadow:0 6px 24px -10px rgba(255,140,26,.55);
  color:#fff;
}
.hw-ribbon__in{
  position:relative;z-index:2;height:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.hw-ribbon__pk{width:34px;height:31px;flex:none;animation:hw-respira 2.8s ease-in-out infinite}
.hw-ribbon__pk img{width:100%;height:100%;object-fit:contain;display:block}
.hw-ribbon p{margin:0;font-family:var(--ff-display);font-size:.98rem;line-height:1.2;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hw-ribbon strong{font-weight:700;color:#FFC27A}
.hw-ribbon__sub{color:#EBDDFB;font-family:var(--ff-body);font-size:.88rem}
.hw-ribbon__cta{
  flex:none;display:inline-flex;align-items:center;
  font-family:var(--ff-display);font-weight:700;font-size:.85rem;
  padding:7px 16px;border-radius:999px;
  background:linear-gradient(135deg,#FFB24D,#FF7A1A);color:#1A0B26;
  box-shadow:0 0 0 3px rgba(255,140,26,.18);transition:transform .16s,box-shadow .16s;
}
.hw-ribbon__cta:hover{color:#1A0B26;transform:translateY(-1px);box-shadow:0 0 0 4px rgba(255,140,26,.3),0 6px 18px -6px rgba(255,140,26,.8)}
.hw-ribbon__cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hw-ribbon .hw-web{position:absolute;top:0;width:58px;height:58px;z-index:1;opacity:.75}
.hw-ribbon .hw-web--l{left:0}
.hw-ribbon .hw-web--r{right:0;transform:scaleX(-1)}
.hw-web svg{width:100%;height:100%;display:block}

/* ---------- logotipo en versión Halloween (encabezado y pie) ----------
   Es el archivo real del logotipo recoloreado (morado/naranja con telarañas),
   no un redibujo. Mismas proporciones que el original (2.68:1). */
html.hw .lockup{background-image:url(spp-logo-halloween.webp)}

/* ---------- encabezado: araña colgando ---------- */
html.hw .site-header{background:linear-gradient(180deg,#160C26,var(--bg))}
.hw-spider{display:none}
html.hw .hw-spider{
  display:block;position:absolute;top:100%;left:calc(50% - 360px);z-index:5;
  width:26px;pointer-events:none;transform-origin:top center;
  animation:hw-cuelga 5s ease-in-out infinite;
}
.hw-spider::before{content:"";display:block;width:1px;height:46px;margin:0 auto;background:linear-gradient(rgba(235,221,251,.15),rgba(235,221,251,.7))}
.hw-spider svg{width:26px;height:26px;display:block;filter:drop-shadow(0 0 4px rgba(255,140,26,.35))}

/* ---------- hero ---------- */
html.hw .hero{padding-bottom:calc(clamp(56px,7vw,92px) + 190px)}
html.hw .hero-bg::after{
  background:linear-gradient(180deg,rgba(18,10,31,.88) 0%,rgba(18,10,31,.85) 40%,rgba(18,10,31,.95) 82%,var(--bg) 100%);
}
@media (min-width:1101px){
  html.hw .hero-bg::after{
    background:linear-gradient(280deg,var(--bg) 0%,var(--bg) 62%,rgba(18,10,31,.80) 70%,rgba(18,10,31,.25) 84%,transparent 96%);
  }
}
.hw-sky{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(150,90,230,.95) 0%,rgba(175,110,215,.9) 50%,rgba(255,150,70,.95) 100%);
  mix-blend-mode:multiply}
.hw-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hw-moon{
  position:absolute;border-radius:50%;
  width:clamp(120px,14vw,200px);aspect-ratio:1;left:4%;top:6%;
  background:
    radial-gradient(circle at 34% 40%,rgba(205,160,85,.42) 0,rgba(205,160,85,.18) 7%,transparent 10%),
    radial-gradient(circle at 63% 28%,rgba(205,160,85,.32) 0,rgba(205,160,85,.12) 5%,transparent 7.5%),
    radial-gradient(circle at 58% 66%,rgba(205,160,85,.38) 0,rgba(205,160,85,.14) 9%,transparent 13%),
    radial-gradient(circle at 28% 72%,rgba(205,160,85,.28) 0,transparent 6%),
    radial-gradient(circle at 75% 50%,rgba(205,160,85,.22) 0,transparent 5%),
    radial-gradient(circle at 38% 34%,#FFFBEA 0%,#FCEBB6 45%,#F4CF7C 85%,#E9B85E 100%);
  box-shadow:0 0 40px 12px rgba(255,214,120,.45),0 0 120px 40px rgba(255,170,60,.25);
  animation:hw-luna 6s ease-in-out infinite;
}
.hero--inner:not(.hero--foto) .hw-moon{left:auto;right:7%;top:14%;width:clamp(90px,10vw,150px)}
.hw-bat{position:absolute;color:#140820;width:58px;filter:drop-shadow(0 0 2px rgba(255,190,110,.35))}
.hw-bat svg{width:100%;display:block;animation:hw-aletea .35s ease-in-out infinite alternate;transform-origin:50% 40%}
.hw-bat--1{left:9%;top:22%;width:64px;animation:hw-vuela1 9s ease-in-out infinite}
.hw-bat--2{left:30%;top:12%;width:44px;animation:hw-vuela2 11s ease-in-out infinite}
.hw-bat--3{left:24%;top:42%;width:36px;animation:hw-vuela1 13s ease-in-out infinite reverse}
.hw-bat--4{left:4%;top:55%;width:30px;animation:hw-vuela2 10s ease-in-out infinite reverse}
.hero--inner:not(.hero--foto) .hw-bat--1{left:auto;right:16%;top:12%}
.hero--inner:not(.hero--foto) .hw-bat--2{left:auto;right:4%;top:46%}
.hero--inner:not(.hero--foto) .hw-bat--3{left:6%;top:20%}
.hero--inner:not(.hero--foto) .hw-bat--4{left:12%;top:58%}
.hw-deco .hw-web{position:absolute;top:0;left:0;width:clamp(110px,14vw,190px);aspect-ratio:1;opacity:.8}
.hero--inner .hw-deco .hw-web,.hero--foto .hw-deco .hw-web{left:auto;right:0;transform:scaleX(-1)}
/* panteón: casa con árbol seco a la izquierda, tumbas de la mitad a la derecha */
.hw-ground{position:absolute;left:0;right:0;bottom:-1px;height:230px;color:var(--bg)}
.hw-ground::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(255,118,26,.62) 0%,rgba(214,80,60,.42) 22%,rgba(120,40,160,.25) 55%,transparent 100%)}
.hw-foot-sky::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(255,118,26,.45) 0%,rgba(120,40,160,.2) 55%,transparent 100%)}
.hw-lomas,.hw-casa,.hw-tumbas{position:absolute;bottom:0;display:block}
.hw-lomas{left:0;right:0;height:34px}
.hw-casa{left:0;height:100%}
.hw-tumbas{left:40%;right:0;height:66%}
.hw-ground svg,.hw-foot-sky svg{display:block;width:100%;height:100%}
.hw-casa svg{width:auto}
/* calabazas: la misma foto, en distintos tamaños, giros y orientaciones */
.hw-pk{position:absolute;z-index:1;height:auto;filter:drop-shadow(0 0 16px rgba(255,140,30,.7)) drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.hw-pk--a{left:clamp(330px,27%,440px);bottom:6px;width:clamp(56px,6vw,92px);transform:scaleX(-1) rotate(-6deg)}
.hw-pk--b{left:58%;bottom:10px;width:clamp(40px,4vw,60px);transform:rotate(9deg)}
.hw-pk--c{right:6%;bottom:4px;width:clamp(64px,7vw,110px);transform:rotate(-3deg)}
/* murciélagos volando hacia la casa */
.hw-ban{color:#0d0418;top:auto;filter:drop-shadow(0 0 3px rgba(255,170,90,.55));animation:hw-hacia-casa 9s linear infinite}
.hw-ban--1{width:48px;bottom:150px;animation-delay:0s}
.hw-ban--2{width:36px;bottom:182px;animation-delay:1.3s;animation-duration:10s}
.hw-ban--3{width:42px;bottom:128px;animation-delay:2.6s;animation-duration:8.5s}
.hw-ban--4{width:30px;bottom:200px;animation-delay:3.9s;animation-duration:11s}
.hw-ban--5{width:40px;bottom:165px;animation-delay:5.2s}
.hw-ban--6{width:28px;bottom:140px;animation-delay:6.5s;animation-duration:9.5s}
.hw-ban--7{width:34px;bottom:190px;animation-delay:7.8s;animation-duration:10.5s}
@keyframes hw-hacia-casa{
  0%{left:96%;opacity:0;transform:translateY(0) rotate(-8deg)}
  8%{opacity:.95}
  35%{transform:translateY(-14px) rotate(-12deg)}
  65%{transform:translateY(10px) rotate(-6deg)}
  88%{opacity:.95}
  100%{left:12%;opacity:0;transform:translateY(-20px) scale(.6) rotate(-10deg)}
}

/* ---------- texto y acentos ---------- */
html.hw .grad{background:linear-gradient(100deg,#E2C6FF 5%,#FFA552 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
html.hw .eyebrow::before{background:linear-gradient(90deg,#9B5BD6,var(--hw-naranja))}
html.hw .hero-sub span::before{color:var(--hw-naranja)}
html.hw .btn--primary{
  background:linear-gradient(100deg,#4A1F78 0%,#6B2FA0 100%);
  border-color:rgba(255,140,26,.75);
  box-shadow:0 8px 26px -10px rgba(107,47,160,.95);
}
html.hw .btn--primary:hover{
  background:linear-gradient(100deg,#5A2690 0%,#7C38B5 100%);
  border-color:var(--hw-naranja);
  box-shadow:0 14px 34px -10px rgba(255,140,26,.7),0 0 0 3px rgba(255,140,26,.22);
}
html.hw .card--link:hover,html.hw a.case-card:hover,html.hw .cycle-item:hover{border-color:rgba(255,140,26,.55);box-shadow:0 14px 34px -18px rgba(255,140,26,.6)}
html.hw .card-ico{background:linear-gradient(140deg,rgba(107,47,160,.45),rgba(255,140,26,.22))}
html.hw .nav-links a:hover{border-bottom-color:var(--hw-naranja)}
html.hw .nav-links a.is-active{border-bottom-color:var(--hw-naranja)}

/* ---------- botón flotante: calabaza encendida ---------- */
html.hw .cta-float{
  background:linear-gradient(135deg,#FFB24D 0%,#FF7A1A 100%);
  color:#1A0B26;border:2px solid #FFD08A;
  padding-left:14px;gap:10px;
  animation:hw-brillo 2.4s ease-in-out infinite;
}
html.hw .cta-float:hover{color:#1A0B26;background:linear-gradient(135deg,#FFC066 0%,#FF8A2E 100%)}
.hw-float-pk{display:none}
html.hw .hw-float-pk{display:block;width:30px;height:28px;flex:none}
.hw-float-pk img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- banda final ---------- */
html.hw .cta-band{background:
  radial-gradient(600px 220px at 50% 115%,rgba(255,140,26,.30),transparent 70%),
  linear-gradient(180deg,#22103A,#170B28)}
.hw-band-pk{position:absolute;bottom:10px;z-index:1;height:auto;pointer-events:none;filter:drop-shadow(0 0 18px rgba(255,140,30,.75)) drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.hw-band-pk--l{left:4%;width:clamp(64px,8vw,120px);transform:rotate(-7deg)}
.hw-band-pk--r{right:4%;width:clamp(48px,5.5vw,82px);transform:scaleX(-1) rotate(5deg)}
.cta-band .hw-web{position:absolute;top:0;left:0;width:clamp(90px,11vw,150px);aspect-ratio:1;opacity:.6;z-index:1;pointer-events:none}

/* ---------- pie: silueta de panteón ---------- */
html.hw .site-footer{position:relative;background:var(--hw-noche)}
.hw-foot-sky{position:absolute;left:0;right:0;bottom:100%;height:96px;color:var(--hw-noche);pointer-events:none}
.hw-foot-sky .hw-tumbas{left:0;height:100%}

/* ---------- murciélagos que cruzan la pantalla ---------- */
.hw-vuelo{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.hw-vuelo .hw-bat{color:#3A1E5C;filter:drop-shadow(0 0 5px rgba(210,170,255,.55));top:0;left:0;opacity:0}
.hw-vuelo .hw-bat--x1{width:46px;animation:hw-cruza2 16s linear infinite 2s}
.hw-vuelo .hw-bat--x2{width:34px;animation:hw-cruza2 21s linear infinite 9s}
.hw-vuelo .hw-bat--x3{width:28px;animation:hw-cruza2 26s linear infinite 15s}

/* ---------- animaciones ---------- */
@keyframes hw-aletea{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes hw-vuela1{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-14px)}}
@keyframes hw-vuela2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,12px)}}
@keyframes hw-luna{0%,100%{box-shadow:0 0 40px 12px rgba(255,214,120,.45),0 0 120px 40px rgba(255,170,60,.25)}50%{box-shadow:0 0 52px 16px rgba(255,214,120,.55),0 0 150px 54px rgba(255,170,60,.3)}}
@keyframes hw-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes hw-cuelga{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(16px) rotate(2deg)}}
@keyframes hw-brillo{0%,100%{box-shadow:0 0 0 4px rgba(255,140,26,.22),0 10px 30px -6px rgba(255,122,26,.65)}50%{box-shadow:0 0 0 9px rgba(255,140,26,.10),0 10px 38px -4px rgba(255,122,26,.9)}}
@keyframes hw-cruza{0%{transform:translate(-80px,62vh);opacity:0}6%{opacity:.95}50%{transform:translate(50vw,28vh)}94%{opacity:.95}100%{transform:translate(105vw,44vh);opacity:0}}
@keyframes hw-cruza2{0%{transform:translate(105vw,30vh) scaleX(-1);opacity:0}6%{opacity:.9}50%{transform:translate(55vw,52vh) scaleX(-1)}94%{opacity:.9}100%{transform:translate(-80px,20vh) scaleX(-1);opacity:0}}

/* ---------- responsivo ---------- */
@media (max-width:920px){
  html.hw .hw-spider{left:auto;right:96px}
}
@media (max-width:760px){
  html.hw{--hw-ribbon-h:46px}
  .hw-ribbon__sub{display:none}
  .hw-ribbon__in{gap:10px;padding:0 14px}
  .hw-ribbon p{font-size:.9rem}
  .hw-ribbon .hw-web{width:44px;height:44px}
  html.hw .hero{padding-top:calc(clamp(64px,9vw,120px) + 28px);padding-bottom:calc(clamp(56px,7vw,92px) + 116px)}
  .hw-moon,.hero--inner .hw-moon,.hero--inner:not(.hero--foto) .hw-moon{width:62px;left:auto;right:16px;top:12px}
  .hw-bat--1,.hero--inner .hw-bat--1,.hero--inner:not(.hero--foto) .hw-bat--1{left:auto;right:90px;top:18px;width:40px}
  .hw-bat--2,.hero--inner .hw-bat--2,.hero--inner:not(.hero--foto) .hw-bat--2{left:18px;right:auto;top:20px;width:30px}
  .hw-bat--3,.hw-bat--4{display:none}
  .hw-deco .hw-web{width:90px}
  .hero--foto .hw-deco .hw-web,.hero--inner .hw-deco .hw-web{display:none}
  .hw-ground{height:140px}
  .hw-lomas{height:22px}
  .hw-tumbas{left:50%;height:62%}
  .hw-pk--a{left:170px;width:44px}
  .hw-pk--b{display:none}
  .hw-pk--c{right:4%;width:52px}
  .hw-ban--1,.hw-ban--3,.hw-ban--5{width:20px}
  .hw-ban--2,.hw-ban--4,.hw-ban--6,.hw-ban--7{width:15px}
  .hw-ban--1{bottom:92px}.hw-ban--2{bottom:112px}.hw-ban--3{bottom:80px}.hw-ban--4{bottom:120px}.hw-ban--5{bottom:100px}.hw-ban--6{bottom:86px}.hw-ban--7{bottom:116px}
  .hw-band-pk--l{width:50px;left:2%}
  .hw-band-pk--r{width:40px;right:2%}
  .cta-band .hw-web{width:76px}
  html.hw .cta-float{padding-left:12px}
  html.hw .hw-float-pk{width:24px;height:22px}
  .hw-foot-sky{height:64px}
  html.hw .hw-spider{right:128px}
  html.hw .hw-spider::before{height:30px}
}
@media (max-width:400px){
  .hw-ribbon__pk{width:28px;height:26px}
  .hw-ribbon p{font-size:.84rem}
  .hw-ribbon__cta{padding:6px 12px;font-size:.8rem}
}

/* quien pidió menos movimiento en su sistema: todo quieto */
@media (prefers-reduced-motion:reduce){
  html.hw *,html.hw *::before,html.hw *::after{animation:none!important}
  .hw-vuelo{display:none}
}
@media print{.hw-ribbon,.hw-deco,.hw-vuelo,.hw-spider,.hw-foot-sky,.hw-band-pk{display:none!important}}