/* ======================================================
   WOWCO - Página Halloween (halloween.php)
   Estética "póster de cine de terror":
   noche índigo, horizonte en brasa, siluetas, ámbar y pergamino
====================================================== */

.hw-body {
    --hw-ink: #07050c;
    --hw-ground: #0b0612;
    --hw-ground-2: #140b1e;
    --hw-silhouette: #0b0612;
    --hw-silhouette-far: #1b1026;
    --hw-amber: #ff9b2f;
    --hw-amber-light: #ffd08a;
    --hw-ember: #e0560c;
    --hw-ember-dark: #a83a05;
    --hw-parchment: #e8d8b8;
    --hw-parchment-dim: rgba(232, 216, 184, .65);
    --hw-plum: #2a1838;

    --hw-font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
    --hw-font-caps: 'Cinzel', Georgia, serif;
    --hw-font-serif: 'Cormorant Garamond', Georgia, serif;
}

.hw-page {
    position: relative;
    overflow: hidden;
    background: var(--hw-ground);
    color: var(--hw-parchment);
}

/* ===================== HERO / CIELO ===================== */

.hw-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 34px 0 clamp(170px, 22vw, 340px);
    text-align: center;
    background:
        radial-gradient(ellipse 55% 40% at 78% 18%, rgba(120, 90, 160, .22), transparent 70%),
        radial-gradient(ellipse 90% 35% at 50% 92%, rgba(224, 86, 12, .38), transparent 70%),
        linear-gradient(180deg, #05040a 0%, #0f0a1c 32%, #221233 62%, #3f1a2a 82%, #5a2318 92%, var(--hw-ground) 100%);
}

.hw-hero__content {
    position: relative;
    z-index: 2;
}

.hw-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

/* Grano de película */
.hw-grain {
    position: absolute;
    inset: 0;
    opacity: .09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Estrellas: puntitos tenues con box-shadow */
.hw-stars,
.hw-stars::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        8vw 60px rgba(255,255,255,.8), 18vw 180px rgba(255,255,255,.5), 27vw 40px rgba(255,255,255,.7),
        36vw 210px rgba(255,255,255,.4), 44vw 120px rgba(255,255,255,.7), 52vw 30px rgba(255,255,255,.6),
        61vw 190px rgba(255,255,255,.4), 69vw 90px rgba(255,255,255,.8), 4vw 300px rgba(255,255,255,.4),
        94vw 60px rgba(255,255,255,.6), 31vw 110px rgba(255,255,255,.5), 12vw 150px rgba(255,255,255,.6),
        57vw 260px rgba(255,255,255,.3), 39vw 20px rgba(255,255,255,.6), 22vw 250px rgba(255,255,255,.3);
    animation: hw-twinkle 5s ease-in-out infinite alternate;
}

.hw-stars::after {
    content: "";
    transform: translate(4vw, 80px);
    animation-delay: 2.5s;
}

/* Luna: pálida, con cráteres y halo frío */
.hw-moon {
    position: absolute;
    /* baja, detrás de la casona: la torre queda recortada contra la luna */
    bottom: clamp(150px, 19vw, 290px);
    right: 13%;
    width: clamp(110px, 14vw, 210px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 34%, rgba(90, 80, 70, .22) 0 9%, transparent 10%),
        radial-gradient(circle at 60% 58%, rgba(90, 80, 70, .18) 0 13%, transparent 14%),
        radial-gradient(circle at 70% 26%, rgba(90, 80, 70, .15) 0 6%, transparent 7%),
        radial-gradient(circle at 40% 72%, rgba(90, 80, 70, .14) 0 7%, transparent 8%),
        radial-gradient(circle at 48% 46%, rgba(90, 80, 70, .08) 0 22%, transparent 23%),
        radial-gradient(circle at 38% 36%, #fbf3df 0%, #e9dcc0 50%, #c9b48f 100%);
    box-shadow:
        inset -18px -12px 40px rgba(60, 40, 30, .35),
        0 0 50px rgba(240, 225, 190, .35),
        0 0 140px rgba(200, 180, 230, .25);
}

/* Nubes que cruzan la luna */
.hw-cloud {
    position: absolute;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 12, 30, .85);
    filter: blur(14px);
    animation: hw-cloud 40s linear infinite;
}

.hw-cloud--1 { bottom: clamp(220px, 24vw, 360px); right: -20%; width: 420px; }
.hw-cloud--2 { bottom: clamp(280px, 30vw, 440px); right: -30%; width: 300px; height: 28px; opacity: .7; animation-duration: 55s; animation-delay: -20s; }

/* Telarañas sutiles */
.hw-web {
    position: absolute;
    top: 0;
    width: clamp(110px, 15vw, 210px);
    height: auto;
    color: rgba(232, 216, 184, .16);
}

.hw-web--left  { left: 0; }
.hw-web--right { right: 0; transform: scaleX(-1); }

/* Araña colgando del hilo */
.hw-spider {
    position: absolute;
    top: 0;
    left: clamp(70px, 9vw, 130px);
    width: 22px;
    transform-origin: top center;
    animation: hw-spider 7s ease-in-out infinite;
}

.hw-spider::before {
    content: "";
    display: block;
    width: 1px;
    height: 120px;
    margin: 0 auto;
    background: linear-gradient(rgba(232, 216, 184, 0), rgba(232, 216, 184, .35));
}

.hw-spider svg {
    display: block;
    width: 22px;
    margin-top: -4px;
    fill: #120a1a;
    stroke: rgba(232, 216, 184, .35);
}

.hw-spider svg ellipse,
.hw-spider svg circle {
    stroke: rgba(232, 216, 184, .25);
    stroke-width: .8;
}

/* Murciélagos: bandada pequeña cruzando el cielo */
.hw-bat-wrap {
    position: absolute;
    display: block;
    animation: hw-bat-drift 16s ease-in-out infinite;
}

.hw-bat {
    display: block;
    width: 100%;
    fill: #08050d;
    transform-origin: center 60%;
    animation: hw-flap .32s ease-in-out infinite alternate;
}

.hw-bat--1 { bottom: clamp(280px, 30vw, 430px); right: 19%; width: 34px; }
.hw-bat--2 { bottom: clamp(320px, 34vw, 480px); right: 25%; width: 22px; animation-delay: -3s; }
.hw-bat--3 { bottom: clamp(250px, 27vw, 390px); right: 10%; width: 18px; animation-delay: -6s; }
.hw-bat--4 { bottom: clamp(350px, 37vw, 520px); right: 31%; width: 16px; animation-delay: -9s; }
.hw-bat--5 { top: 140px; left: 16%;  width: 26px; animation-delay: -2s;  animation-duration: 20s; }
.hw-bat--6 { top: 200px; left: 26%;  width: 14px; animation-delay: -11s; animation-duration: 18s; }
.hw-bat--7 { top: 60px;  left: 38%;  width: 18px; animation-delay: -5s;  animation-duration: 22s; }

.hw-bat--2 .hw-bat { animation-delay: -.1s; }
.hw-bat--3 .hw-bat { animation-delay: -.2s; animation-duration: .28s; }
.hw-bat--5 .hw-bat { animation-delay: -.15s; animation-duration: .36s; }
.hw-bat--7 .hw-bat { animation-delay: -.05s; }

/* Paisaje en silueta */
.hw-skyline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: clamp(180px, 24vw, 360px);
}

.hw-sky-far,
.hw-trees-far,
.hw-house {
    fill: var(--hw-silhouette-far);
    color: var(--hw-silhouette-far);
}

.hw-sky-near,
.hw-trees-near,
.hw-graves {
    fill: var(--hw-silhouette);
    color: var(--hw-silhouette);
}

.hw-fence {
    stroke: var(--hw-silhouette);
}

.hw-windows {
    fill: #ffb54a;
    filter: drop-shadow(0 0 6px rgba(255, 160, 50, .9));
    animation: hw-candle 4s ease-in-out infinite;
}

.hw-windows .hw-window--off {
    fill: #241530;
    filter: none;
}

.hw-windows .hw-window--late {
    animation: hw-window-late 9s steps(1) infinite;
}

/* Brasas */
.hw-ember {
    position: absolute;
    bottom: 12%;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: #ffb347;
    box-shadow: 0 0 6px 1px rgba(255, 140, 30, .9);
    opacity: 0;
    animation: hw-ember var(--t) linear infinite;
    animation-delay: var(--d);
}

/* Niebla */
.hw-fog {
    position: absolute;
    left: -20%;
    right: -20%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 30% 60% at 20% 60%, rgba(200, 190, 220, .10), transparent 70%),
        radial-gradient(ellipse 35% 50% at 60% 50%, rgba(200, 190, 220, .08), transparent 70%),
        radial-gradient(ellipse 25% 55% at 90% 60%, rgba(200, 190, 220, .09), transparent 70%);
    filter: blur(6px);
}

.hw-fog--1 { bottom: 0;   height: 160px; animation: hw-fog 30s ease-in-out infinite alternate; }
.hw-fog--2 { bottom: 40px; height: 120px; opacity: .7; animation: hw-fog 42s ease-in-out infinite alternate-reverse; }

/* ===================== TÍTULO ===================== */

.hw-breadcrumbs {
    justify-content: center;
    margin-bottom: 30px;
}

.hw-breadcrumbs .link,
.hw-breadcrumbs .current-page,
.hw-breadcrumbs .icon {
    color: var(--hw-parchment-dim) !important;
    font-family: var(--hw-font-caps);
    letter-spacing: .12em;
    font-size: 13px;
    text-transform: uppercase;
}

.hw-breadcrumbs .link:hover {
    color: var(--hw-amber-light) !important;
}

.hw-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 14px;
}

.hw-title__kicker {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: var(--hw-font-caps);
    font-weight: 500;
    font-size: clamp(13px, 1.8vw, 20px);
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--hw-parchment);
    padding-left: .42em; /* compensa el tracking del último caracter */
}

.hw-title__kicker::before,
.hw-title__kicker::after {
    content: "";
    width: clamp(28px, 6vw, 80px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hw-amber));
}

.hw-title__kicker::after {
    background: linear-gradient(90deg, var(--hw-amber), transparent);
}

.hw-title__main {
    margin-top: 6px;
    font-family: var(--hw-font-display);
    font-weight: 900;
    font-size: clamp(50px, 11.5vw, 156px);
    line-height: 1.02;
    letter-spacing: .02em;
    background: linear-gradient(180deg, #ffe6b0 0%, var(--hw-amber) 42%, var(--hw-ember) 72%, #6b1d05 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 3px 0 rgba(0, 0, 0, .55))
        drop-shadow(0 0 22px rgba(255, 120, 20, .35));
    animation: hw-title-flicker 6s ease-in-out infinite;
}

.hw-subtitle {
    max-width: 640px;
    margin: 10px auto 26px;
    font-family: var(--hw-font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(19px, 2.3vw, 26px);
    line-height: 1.35;
    color: var(--hw-parchment);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.hw-hl {
    font-weight: 600;
    color: var(--hw-amber-light);
}

.hw-count {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    border: 1px solid rgba(255, 155, 47, .45);
    border-radius: 2px;
    background: rgba(5, 4, 10, .45);
    font-family: var(--hw-font-caps);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--hw-parchment);
    backdrop-filter: blur(3px);
}

/* ===================== PRODUCTOS ===================== */

.hw-products {
    position: relative;
    isolation: isolate;
    padding: 10px 0 220px;
    background:
        radial-gradient(ellipse 60% 30% at 50% 100%, rgba(224, 86, 12, .16), transparent 70%),
        linear-gradient(180deg, var(--hw-ground) 0%, var(--hw-ground-2) 45%, var(--hw-ground) 100%);
}

.hw-section-label {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 34px;
    font-family: var(--hw-font-caps);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--hw-parchment-dim);
}

.hw-section-label::before,
.hw-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 155, 47, .45), transparent);
}

/* Máximo 5 columnas: 10 productos = 2 filas parejas */
.hw-page .wowco-product-grid.hw-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 30px 22px;
}

@media (max-width: 1199px) {
    .hw-page .wowco-product-grid.hw-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    .hw-page .wowco-product-grid.hw-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px 16px;
    }
}

@media (max-width: 767px) {
    .hw-page .wowco-product-grid.hw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 12px;
    }
}

.hw-empty p {
    text-align: center;
    font-family: var(--hw-font-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--hw-parchment);
}

/* ===================== CARDS ===================== */

.hw-page .wowco-product-grid .card-product.style-5.hw-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 10px 14px;
    border-radius: 14px;
    background: #fbf6ee;
    border: 1px solid rgba(255, 155, 47, .35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .6) inset,
        0 18px 40px rgba(0, 0, 0, .55);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hw-page .wowco-product-grid .card-product.style-5.hw-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 155, 47, .8);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .6) inset,
        0 0 0 1px rgba(255, 155, 47, .25),
        0 0 36px rgba(255, 120, 20, .28),
        0 24px 48px rgba(0, 0, 0, .6) !important;
}

.hw-page .hw-card .card-product_info {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
}

.hw-page .hw-card .wowco-product-buybox {
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.hw-page .wowco-product-grid .card-product.style-5.hw-card .card-product_wrapper {
    border: 0;
    border-radius: 10px;
    background: #fff !important;
}

.hw-page .hw-card .name-product {
    color: #1d1426 !important;
    font-weight: 700;
}

.hw-page .hw-card .name-product:hover {
    color: var(--hw-ember-dark) !important;
}

.hw-page .hw-card .price-new {
    color: var(--hw-ember-dark) !important;
    font-weight: 800;
}

.hw-page .hw-card .product-desc {
    color: #6a5d70;
}

/* Botón Agregar: ámbar sobrio */
.hw-page .wowco-product-grid .card-product.style-5 [data-cart-add] {
    background: var(--hw-ember) !important;
    border: 1px solid var(--hw-ember-dark) !important;
    box-shadow: 0 6px 14px rgba(224, 86, 12, .25);
}

.hw-page .wowco-product-grid .card-product.style-5 [data-cart-add] .btn-text,
.hw-page .wowco-product-grid .card-product.style-5 [data-cart-add] i,
.hw-page .wowco-product-grid .card-product.style-5 [data-cart-add] .icon {
    color: #fff !important;
    font-weight: 700;
}

.hw-page .wowco-product-grid .card-product.style-5 [data-cart-add]:hover,
.hw-page .wowco-product-grid .card-product.style-5 [data-cart-add]:focus {
    background: var(--hw-plum) !important;
    border-color: var(--hw-plum) !important;
    box-shadow: 0 8px 18px rgba(42, 24, 56, .35);
}

/* Botón "Ingresá para comprar" (no logueados) */
.hw-page .wowco-btn-login-required {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--hw-plum) !important;
    color: var(--hw-parchment) !important;
    border: 1px solid var(--hw-plum) !important;
    box-shadow: 0 6px 14px rgba(42, 24, 56, .25);
    font-weight: 700 !important;
}

.hw-page .wowco-btn-login-required .btn-text {
    color: var(--hw-parchment) !important;
}

.hw-page .wowco-btn-login-required:hover {
    background: var(--hw-ember) !important;
    border-color: var(--hw-ember-dark) !important;
    transform: translateY(-1px);
}

.hw-page .wowco-btn-login-required:hover .btn-text {
    color: #fff !important;
}

.hw-page .wowco-cart-stepper {
    border-color: var(--hw-ember);
}

.hw-page .wowco-bulk-btn {
    border-color: rgba(42, 24, 56, .5);
    color: var(--hw-plum);
    background: #fff;
    font-weight: 700;
}

.hw-page .wowco-bulk-btn:hover,
.hw-page .wowco-bulk-btn:focus {
    background: var(--hw-plum);
    border-color: var(--hw-plum);
    color: #fff;
    box-shadow: 0 8px 16px rgba(42, 24, 56, .3);
}

.hw-page .wowco-catalogo-message {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #f6ead6;
    color: #6b3a10;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.hw-page .hw-card.wowco-product-out {
    filter: grayscale(.6);
    opacity: .75;
}

/* ===================== SUELO + CALABAZAS ===================== */

.hw-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 100% at 12% 100%, #06040a 60%, transparent 61%),
        radial-gradient(ellipse 50% 90% at 88% 100%, #06040a 60%, transparent 61%),
        radial-gradient(ellipse 60% 60% at 50% 100%, #08050d 60%, transparent 61%);
}

.hw-fog--ground {
    bottom: 30px;
    height: 140px;
    animation: hw-fog 36s ease-in-out infinite alternate;
}

.hw-pumpkin {
    position: absolute;
    bottom: 22px;
    width: clamp(90px, 11vw, 150px);
    filter: drop-shadow(0 0 28px rgba(255, 120, 20, .45));
}

.hw-pumpkin--left  { left: 5%; }
.hw-pumpkin--small { left: calc(5% + clamp(80px, 10vw, 140px)); bottom: 14px; width: clamp(54px, 6vw, 84px); filter: drop-shadow(0 0 18px rgba(255, 120, 20, .35)); }
.hw-pumpkin--right { right: 5%; width: clamp(70px, 8vw, 115px); }

.hw-pumpkin__glow {
    animation: hw-candle 2.8s ease-in-out infinite;
}

/* ===================== ANIMACIONES ===================== */

@keyframes hw-twinkle {
    from { opacity: .4; }
    to   { opacity: 1; }
}

@keyframes hw-cloud {
    from { transform: translateX(0); }
    to   { transform: translateX(-160vw); }
}

@keyframes hw-spider {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(26px) rotate(2deg); }
    60%      { transform: translateY(10px) rotate(-2deg); }
}

@keyframes hw-bat-drift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-30px, -12px); }
    50%      { transform: translate(-60px, 6px); }
    75%      { transform: translate(-24px, 14px); }
}

@keyframes hw-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(.45); }
}

@keyframes hw-ember {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 1; }
    70%  { opacity: .7; }
    100% { transform: translate(var(--dx), -320px); opacity: 0; }
}

@keyframes hw-fog {
    from { transform: translateX(-4%); }
    to   { transform: translateX(4%); }
}

@keyframes hw-candle {
    0%, 100% { opacity: 1; }
    20%      { opacity: .82; }
    23%      { opacity: .95; }
    55%      { opacity: .86; }
    70%      { opacity: 1; }
}

@keyframes hw-window-late {
    0%, 100% { fill: #ffb54a; }
    40%      { fill: #241530; }
    70%      { fill: #ffb54a; }
}

@keyframes hw-title-flicker {
    0%, 100% { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(255, 120, 20, .35)); }
    48%      { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(255, 120, 20, .5)); }
    50%      { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 16px rgba(255, 120, 20, .25)); }
    53%      { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(255, 120, 20, .45)); }
}

@media (prefers-reduced-motion: reduce) {
    .hw-page *,
    .hw-page *::before,
    .hw-page *::after {
        animation: none !important;
    }

    .hw-ember {
        display: none;
    }
}

/* ===================== MOBILE ===================== */

@media (max-width: 767px) {
    .hw-hero {
        padding-top: 22px;
    }

    .hw-moon {
        bottom: auto;
        top: 30px;
        right: -24px;
        opacity: .75;
    }

    .hw-bat--4,
    .hw-bat--6,
    .hw-bat--7,
    .hw-spider,
    .hw-cloud--2 {
        display: none;
    }

    .hw-title__kicker {
        gap: 10px;
        letter-spacing: .28em;
    }

    .hw-page .wowco-product-grid .card-product.style-5.hw-card {
        padding: 6px 6px 10px;
        border-radius: 12px;
    }

    .hw-page .wowco-btn-login-required {
        min-height: 52px;
        line-height: 1.15;
    }

    .hw-pumpkin--small {
        display: none;
    }

    .hw-products {
        padding-bottom: 160px;
    }
}