/* ==========================================================================
   ATRÁPAME · TEMA HALLOWEEN 2026
   · PORTADA (home) y encabezado: versión MORADA con acentos naranja.
   · PRODUCTOS (catálogo + ventana del producto), página de información y
     páginas estáticas (categorías/productos del build.js): NARANJA protagonista.
   Todo vive dentro de  html.hw-on  → lo activa/desactiva halloween.js.
   Para quitarlo: borra las 2 líneas que enlazan halloween.css y halloween.js
   (o espera: se apaga solo el 3 de noviembre).
   ========================================================================== */

/* ==================== 1) BASE · PORTADA MORADA ==================== */
html.hw-on{
  --burgundy:#3D1766;          /* botones/títulos: morado */
  --burgundy-deep:#1A0B2E;     /* header, footer, secciones oscuras */
  --burgundy-light:#5B2A8C;
  --cream:#E8E1E8;             /* fondo lavanda muy claro */
  --cream-dark:#B9AABD;
  --gold:#FF7A1A;              /* acento: naranja calabaza */
  --gold-pale:#FFD9A8;
  --text-dark:#1C1A1A;
  --text-mid:#4A3358;
  --white:#F8F4F9;
}

/* ---------- HEADER con gotas ---------- */
html.hw-on header{position:sticky;top:0;z-index:200;border-bottom:2px solid #FF7A1A;box-shadow:0 2px 18px rgba(255,122,26,.35);}
html.hw-on header::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20120%2024%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20fill=%27%231A0B2E%27%20d=%27M0%200H120V4C116%204%20116%2015%20112%2015S108%204%20104%204H92C89%204%2089%2021%2086%2021S83%204%2080%204H62C59%204%2059%2011%2056%2011S53%204%2050%204H30C27%204%2027%2018%2024%2018S21%204%2018%204H8C5%204%205%209%203%209S0%204%200%204Z%27/%3E%3C/svg%3E") repeat-x top left/90px 16px;
}
html.hw-on .logo-img{filter:drop-shadow(0 0 8px rgba(255,122,26,.55));}
html.hw-on .menu-toggle{background:rgba(255,122,26,.14);}
html.hw-on .cart-btn{background:#FF7A1A;border-color:#FF7A1A;color:#1A0B2E;}
html.hw-on .cart-btn:hover{background:#FFB066;border-color:#FFB066;}
html.hw-on .cart-count{background:#1A0B2E;color:#FFD9A8;border-color:#FFD9A8;}
@media(max-width:480px){
  html.hw-on .cart-btn{background:#3D1766;border-color:#FF7A1A;color:#FFD9A8;}
  html.hw-on .cart-count{background:#FF7A1A;color:#1A0B2E;border-color:#1A0B2E;}
}

/* ---------- SLIDER ---------- */
html.hw-on .slide:nth-child(1){background:linear-gradient(120deg,#12061F 0%,#3B1466 55%,#1A0B2E 100%)!important;}
html.hw-on .slide:nth-child(2){background:linear-gradient(120deg,#1A0B2E 0%,#8A3200 55%,#12061F 100%)!important;}
html.hw-on .slide:nth-child(3){background:linear-gradient(120deg,#0D0416 0%,#3B1466 55%,#B34700 100%)!important;}
html.hw-on .slide:nth-child(4){background:linear-gradient(120deg,#1A0B2E 0%,#5B2A8C 55%,#12061F 100%)!important;}
html.hw-on .slide::before{
  content:"";position:absolute;right:7%;top:-18%;width:130px;height:130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#FFC27A 0%,#FF7A1A 42%,rgba(255,122,26,0) 70%);opacity:.32;
}
html.hw-on .slide-cta{background:rgba(61,23,102,.75);}
html.hw-on .slide-cta:hover{background:#FF7A1A;color:#1A0B2E;border-color:#FF7A1A;}
html.hw-on .slider-arrow{background:rgba(26,11,46,.6);}
html.hw-on .slider-arrow:hover{background:#FF7A1A;color:#1A0B2E;}

/* ---------- ACENTOS NARANJA (texto sobre fondo claro: naranja oscuro = legible) ---------- */
html.hw-on .product-cat-tag,
html.hw-on .modal-cat,
html.hw-on .how-num,
html.hw-on .ship-card-time,
html.hw-on .modal-tag-chip{color:#C2410C;}
html.hw-on .modal-tag-chip{border-color:#FF7A1A;}
html.hw-on .modal-tag-chip:hover,html.hw-on .modal-tag-chip:active{background:#FF7A1A;color:#1A0B2E;}
html.hw-on .how-connector{color:#FF7A1A;opacity:.6;}

/* ---------- TÍTULOS DE SECCIÓN ---------- */
html.hw-on .home-section-title::before,
html.hw-on .section-title::before{content:"🎃 ";letter-spacing:0;}
html.hw-on .home-section-line,
html.hw-on .section-line{background:linear-gradient(90deg,#FF7A1A,transparent);}
html.hw-on .modal-divider{background:linear-gradient(90deg,#FF7A1A,var(--cream-dark));}

/* ---------- TARJETAS / BOTONES ---------- */
html.hw-on .product-card:hover{box-shadow:0 10px 28px rgba(255,122,26,.28);border-color:rgba(255,122,26,.7);}
html.hw-on .product-badge{background:#FF7A1A;color:#1A0B2E;}
html.hw-on .badge-agotado{background:#888!important;color:#fff;}
html.hw-on .ver-btn:hover,html.hw-on .add-btn:hover,html.hw-on .modal-add-btn:hover{background:#FF7A1A;color:#1A0B2E;}
html.hw-on .ship-card{border-left-color:#FF7A1A;}
html.hw-on .ship-note{border-color:rgba(255,122,26,.4);}
html.hw-on .why-section{background:linear-gradient(180deg,#1A0B2E,#2A1048);}
html.hw-on .about-section::before{background:radial-gradient(ellipse at 80% 50%,rgba(255,122,26,.16) 0%,transparent 65%);}
html.hw-on .about-brand-tag,
html.hw-on .footer-social a{border-color:rgba(255,122,26,.5);}
html.hw-on .about-divider,
html.hw-on .footer-divider{background:linear-gradient(90deg,transparent,#FF7A1A,transparent);}
html.hw-on .contact-bar{background:linear-gradient(90deg,#3D1766,#5B2A8C,#3D1766);}
html.hw-on .toast{border:1px solid #FF7A1A;}

/* ---------- FOOTER ---------- */
html.hw-on footer{border-top:2px solid #FF7A1A;}
html.hw-on footer::before{
  content:"🎃  🦇  👻  🦇  🎃";display:block;font-size:22px;letter-spacing:6px;margin-bottom:14px;
}
html.hw-on .footer-copy::after{content:"  ·  Feliz Halloween 🎃";}

/* ---------- AGE GATE ---------- */
html.hw-on #age-gate{background:rgba(18,6,31,.82);}
html.hw-on .age-box{border-color:#FF7A1A;box-shadow:0 0 28px rgba(255,122,26,.45);}
html.hw-on .age-box::before{content:"🎃";display:block;font-size:42px;line-height:1;margin-bottom:10px;}
html.hw-on .age-logo{color:#3D1766;}
html.hw-on .age-sub{color:#C2410C;}

/* ==================== 2) ZONAS NARANJA ====================
   Productos (catálogo + ventana del producto), página de información y
   páginas estáticas. Aquí el naranja manda y el morado solo acompaña.      */
html.hw-on #page-catalog,
html.hw-on #page-info,
html.hw-on .modal-overlay,
html.hw-on body[data-hw="pg"]{
  --burgundy:#C2410C;          /* botones, precios y títulos: naranja quemado */
  --burgundy-light:#E8590C;    /* hover: naranja más vivo */
  --cream:#EFE4DA;             /* fondo cálido */
  --cream-dark:#C9B4A4;
  --gold-pale:#FFEBD0;
  --text-mid:#5A3A2E;
  --white:#FBF6F1;
}
html.hw-on #page-catalog,
html.hw-on #page-info{background:#EFE4DA;}
html.hw-on #page-catalog{min-height:70vh;}

/* Botones: hover en naranja vivo */
html.hw-on #page-catalog .ver-btn:hover,
html.hw-on #page-catalog .add-btn:hover,
html.hw-on #page-catalog .modal-add-btn:hover,
html.hw-on #page-info .ver-btn:hover,
html.hw-on #page-info .add-btn:hover,
html.hw-on #page-info .modal-add-btn:hover,
html.hw-on .modal-overlay .ver-btn:hover,
html.hw-on .modal-overlay .add-btn:hover,
html.hw-on .modal-overlay .modal-add-btn:hover,
html.hw-on body[data-hw="pg"] .ver-btn:hover,
html.hw-on body[data-hw="pg"] .add-btn:hover,
html.hw-on body[data-hw="pg"] .modal-add-btn:hover{background:#E8590C;color:#FFEBD0;}

/* Tarjetas de producto del catálogo: borde superior naranja */
html.hw-on #page-catalog .product-card{border-color:rgba(255,122,26,.4);border-top:4px solid #FF7A1A;}
html.hw-on #page-catalog .product-card:hover{box-shadow:0 10px 28px rgba(255,122,26,.38);border-color:#FF7A1A;}
html.hw-on #page-catalog .catalog-header-bar{border-bottom:2px solid rgba(255,122,26,.55);}
html.hw-on #page-catalog .search-wrap:focus-within{border-color:#FF7A1A;box-shadow:0 0 0 2px rgba(255,122,26,.25);}

/* Ventana del producto */
html.hw-on .modal-overlay{background:rgba(42,13,0,.78);}
html.hw-on .modal-box{border-top:5px solid #FF7A1A;box-shadow:0 0 34px rgba(255,122,26,.35);}
html.hw-on .modal-thumbs-strip{background:#F1C9A3;}
html.hw-on .modal-img{background:#F1C9A3;}
html.hw-on .modal-title{color:#C2410C;}
html.hw-on .modal-price{color:#C2410C;}
html.hw-on .modal-add-btn{background:linear-gradient(90deg,#C2410C,#E8590C);}
html.hw-on .modal-related{border-top:2px solid rgba(255,122,26,.5);}

/* Página de información: secciones con tinte naranja */
html.hw-on #page-info .why-section{background:linear-gradient(135deg,#1A0B2E 0%,#5A1F00 100%);}
html.hw-on #page-info .about-section::before{background:radial-gradient(ellipse at 80% 50%,rgba(255,122,26,.30) 0%,transparent 65%);}
html.hw-on #page-info .contact-bar{background:linear-gradient(90deg,#A93608,#D9500B,#A93608);}
html.hw-on #page-info .ship-section{background:#E3CDB9;}

/* ---------- PÁGINAS ESTÁTICAS (build.js) ---------- */
html.hw-on body[data-hw="pg"] header{
  background:linear-gradient(90deg,#A93608,#D9500B 50%,#A93608);
  border-bottom:3px solid #FF7A1A;box-shadow:0 2px 20px rgba(255,122,26,.5);
}
html.hw-on body[data-hw="pg"] header::after{background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20120%2024%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20fill=%27%23D9500B%27%20d=%27M0%200H120V4C116%204%20116%2015%20112%2015S108%204%20104%204H92C89%204%2089%2021%2086%2021S83%204%2080%204H62C59%204%2059%2011%2056%2011S53%204%2050%204H30C27%204%2027%2018%2024%2018S21%204%2018%204H8C5%204%205%209%203%209S0%204%200%204Z%27/%3E%3C/svg%3E") repeat-x top left/90px 16px;}
html.hw-on body[data-hw="pg"] header a{color:#FFF3E0;text-shadow:0 1px 8px rgba(0,0,0,.4);}
html.hw-on body[data-hw="pg"] .cat-hero{
  background:linear-gradient(180deg,rgba(255,122,26,.20),rgba(255,122,26,0));
  border-bottom:2px solid rgba(255,122,26,.45);padding-top:40px;max-width:none;
}
html.hw-on body[data-hw="pg"] .cat-hero h1,
html.hw-on body[data-hw="pg"] .p-wrap h1{color:#C2410C;}
html.hw-on body[data-hw="pg"] .cat-hero h1::before,
html.hw-on body[data-hw="pg"] .p-wrap h1::before{content:"🎃 ";}
html.hw-on body[data-hw="pg"] .cat-cta,
html.hw-on body[data-hw="pg"] .p-cta{
  background:linear-gradient(90deg,#C2410C,#E8590C);color:#FFF3E0;box-shadow:0 4px 14px rgba(232,89,12,.4);
}
html.hw-on body[data-hw="pg"] .cat-product-card{border-top:4px solid #FF7A1A;box-shadow:0 2px 12px rgba(194,65,12,.18);}
html.hw-on body[data-hw="pg"] .cat-product-price,
html.hw-on body[data-hw="pg"] .p-price,
html.hw-on body[data-hw="pg"] .p-cat{color:#C2410C;}
html.hw-on body[data-hw="pg"] .p-wrap img{border:3px solid #FF7A1A;box-shadow:0 6px 22px rgba(255,122,26,.35);}
html.hw-on body[data-hw="pg"] footer{background:linear-gradient(180deg,rgba(255,122,26,.16),rgba(255,122,26,0));border-top:3px solid #FF7A1A;}

/* ==================== 3) TELARAÑAS (esquinas) ==================== */
.hw-web{display:none;}
html.hw-on .hw-web{
  display:block;position:fixed;top:0;width:96px;height:96px;pointer-events:none;z-index:250;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%3E%3Cpath%20d=%27M0%200L100%200M0%200L100%2028M0%200L100%2058M0%200L86%20100M0%200L52%20100M0%200L22%20100M0%200L0%20100M22.0%200.0Q17.7%202.4%2021.2%205.9Q16.5%207.0%2019.0%2011.0Q13.7%2011.4%2014.3%2016.7Q10.0%2014.8%2010.1%2019.5Q6.1%2016.8%204.7%2021.5Q1.9%2017.8%200.0%2022.0M40.0%200.0Q32.2%204.4%2038.5%2010.8Q30.0%2012.7%2034.6%2020.1Q24.9%2020.7%2026.1%2030.3Q18.3%2027.0%2018.5%2035.5Q11.1%2030.6%208.6%2039.1Q3.5%2032.4%200.0%2040.0M58.0%200.0Q46.7%206.4%2055.9%2015.6Q43.5%2018.3%2050.2%2029.1Q36.1%2030.0%2037.8%2044.0Q26.5%2039.1%2026.8%2051.5Q16.1%2044.3%2012.5%2056.6Q5.1%2047.0%200.0%2058.0M76.0%200.0Q61.2%208.4%2073.2%2020.5Q57.0%2024.0%2065.7%2038.1Q47.3%2039.3%2049.6%2057.6Q34.7%2051.3%2035.1%2067.4Q21.1%2058.1%2016.3%2074.2Q6.7%2061.6%200.0%2076.0M94.0%200.0Q75.7%2010.4%2090.5%2025.3Q70.5%2029.7%2081.3%2047.2Q58.5%2048.6%2061.3%2071.3Q42.9%2063.4%2043.4%2083.4Q26.1%2071.8%2020.2%2091.8Q8.3%2076.2%200.0%2094.0%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-width=%271.1%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E") no-repeat top left/100% 100%;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.45));
}
html.hw-on .hw-web-l{left:0;}
html.hw-on .hw-web-r{right:0;transform:scaleX(-1);}
@media(max-width:480px){html.hw-on .hw-web{width:64px;height:64px;opacity:.5;}}

/* ==================== 4) MURCIÉLAGOS ==================== */
.hw-bats{display:none;}
html.hw-on .hw-bats{display:block;position:fixed;inset:0;pointer-events:none;z-index:240;overflow:hidden;}
.hw-bat{
  position:absolute;left:-80px;width:44px;height:22px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2064%2032%27%3E%3Cpath%20fill=%27%230D0416%27%20d=%27M32%2010c-2%200-3%202-4%204-3-3-8-5-14-4%203%202%204%205%204%208-4-1-8%200-12%203%205%200%209%202%2012%206%202-3%205-5%208-5l3%207%203-7c3%200%206%202%208%205%203-4%207-6%2012-6-4-3-8-4-12-3%200-3%201-6%204-8-6-1-11%201-14%204-1-2-2-4-4-4z%27/%3E%3C/svg%3E") no-repeat center/contain;
  animation:hwFly 18s linear infinite, hwFlap .45s ease-in-out infinite alternate;
  opacity:.9;
}
.hw-bat:nth-child(1){top:14%;animation-duration:19s,.42s;animation-delay:0s,0s;}
.hw-bat:nth-child(2){top:30%;width:34px;height:17px;animation-duration:24s,.38s;animation-delay:6s,0s;}
.hw-bat:nth-child(3){top:52%;width:52px;height:26px;animation-duration:28s,.5s;animation-delay:12s,0s;}
.hw-bat:nth-child(4){top:70%;width:30px;height:15px;animation-duration:21s,.36s;animation-delay:3s,0s;}
.hw-bat:nth-child(5){top:22%;width:38px;height:19px;animation-duration:31s,.44s;animation-delay:16s,0s;}
@keyframes hwFly{
  0%{transform:translateX(0) translateY(0);}
  25%{transform:translateX(30vw) translateY(-26px);}
  50%{transform:translateX(62vw) translateY(14px);}
  75%{transform:translateX(92vw) translateY(-20px);}
  100%{transform:translateX(125vw) translateY(0);}
}
@keyframes hwFlap{from{scale:1 1;}to{scale:1 .55;}}
@media(max-width:600px){.hw-bat:nth-child(n+4){display:none;}}
@media(prefers-reduced-motion:reduce){.hw-bats{display:none!important;}}