/* ==========================================================================
   ESTILOS TERRORÍFICOS DE HALLOWEEN - DIVISION 117
   Se activan únicamente en modo Halloween con la clase .theme-halloween
   ========================================================================== */

/* === Paleta de Terror: Sangre, Calabaza Neón, Morado Bruja y Ectoplasma === */
html.theme-halloween {
    --hw-blood: #dc2626;
    --hw-blood-glow: rgba(220, 38, 38, 0.7);
    --hw-orange: #FF6D2B;
    --hw-orange-glow: rgba(255, 109, 43, 0.8);
    --hw-purple: #9333ea;
    --hw-purple-glow: rgba(147, 51, 234, 0.7);
    --hw-dark: #040108;
}

/* === Fondo Sombrío con Niebla Tenebrosa Activa === */
html.theme-halloween body {
    background-color: #050109 !important;
    background-image: 
        radial-gradient(circle at 10% 8%, rgba(147, 51, 234, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 90% 15%, rgba(220, 38, 38, 0.24) 0%, transparent 50%),
        radial-gradient(circle at 50% 45%, rgba(255, 109, 43, 0.16) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 20% 90%, rgba(220, 38, 38, 0.20) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
}

/* === Barra de navegación gótica / Halloween con telarañas confinadas únicamente a esta barra === */
html.theme-halloween #main-nav {
    position: sticky !important;
    overflow: hidden !important;
    border-bottom: 2px solid rgba(220, 38, 38, 0.7) !important;
    background: rgba(8, 2, 14, 0.97) !important;
    box-shadow: 0 4px 30px rgba(220, 38, 38, 0.35), 0 0 20px rgba(147, 51, 234, 0.3) !important;
}

/* Telaraña confinada en la esquina izquierda del Navbar */
html.theme-halloween #main-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.7'%3E%3Cpath fill='none' stroke='%23d8b4fe' stroke-width='0.9' d='M0,0 L100,0 M0,0 L90,30 M0,0 L75,60 M0,0 L60,75 M0,0 L30,90 M0,0 L0,100 M20,0 Q18,18 0,20 M40,0 Q36,36 0,40 M60,0 Q54,54 0,60 M80,0 Q72,72 0,80 M100,0 Q90,90 0,100'/%3E%3Ccircle cx='58' cy='58' r='1.8' fill='%23ef4444'/%3E%3Cline x1='58' y1='0' x2='58' y2='58' stroke='%23d8b4fe' stroke-width='0.4' stroke-dasharray='1,1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.7));
}

/* Telaraña confinada en la esquina derecha del Navbar */
html.theme-halloween #main-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.7'%3E%3Cpath fill='none' stroke='%23d8b4fe' stroke-width='0.9' d='M0,0 L100,0 M0,0 L90,30 M0,0 L75,60 M0,0 L60,75 M0,0 L30,90 M0,0 L0,100 M20,0 Q18,18 0,20 M40,0 Q36,36 0,40 M60,0 Q54,54 0,60 M80,0 Q72,72 0,80 M100,0 Q90,90 0,100'/%3E%3Ccircle cx='62' cy='62' r='1.8' fill='%23f97316'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 6px rgba(255, 109, 43, 0.6));
}

/* Contenido del Navbar por encima de las telarañas */
html.theme-halloween #main-nav > div {
    position: relative;
    z-index: 10;
}

@media (max-width: 640px) {
    html.theme-halloween #main-nav::before,
    html.theme-halloween #main-nav::after {
        width: 75px !important;
        opacity: 0.5 !important;
    }
}

/* Título de la marca en Navbar con efecto naranja fuego */
html.theme-halloween #main-nav .brand-font {
    text-shadow: 0 0 14px rgba(255, 109, 43, 0.9), 0 0 25px rgba(220, 38, 38, 0.8) !important;
}

/* Botones del Navbar con estética Halloween */
html.theme-halloween #main-nav a.border-\[\#FF6D2B\]\/50,
html.theme-halloween #main-nav a.border-\[\#8b5cf6\]\/50 {
    border-color: rgba(220, 38, 38, 0.7) !important;
    background: rgba(20, 5, 25, 0.9) !important;
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.3) !important;
}

html.theme-halloween #main-nav a.border-\[\#FF6D2B\]\/50:hover,
html.theme-halloween #main-nav a.border-\[\#8b5cf6\]\/50:hover {
    border-color: #FF6D2B !important;
    background: linear-gradient(135deg, #b91c1c, #ea580c) !important;
    color: #fff !important;
    box-shadow: 0 0 22px rgba(220, 38, 38, 0.9), 0 0 15px rgba(255, 109, 43, 0.8) !important;
}

/* === Titileo de luces siniestras en títulos (Flicker) === */
@keyframes spooky-flicker-neon {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 
            0 0 8px #FF6D2B,
            0 0 16px #FF6D2B,
            0 0 32px #dc2626,
            0 0 55px #9333ea;
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: 0 0 3px #FF6D2B;
        opacity: 0.75;
    }
}

html.theme-halloween h1,
html.theme-halloween h2 {
    animation: spooky-flicker-neon 7s infinite alternate;
}

/* Resplandor especial en "CATEGORIAS" */
html.theme-halloween section h2 {
    color: #fff !important;
    letter-spacing: 3px;
}

/* === Tarjetas de categorías en portada durante Halloween === */
html.theme-halloween .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > div {
    background: linear-gradient(180deg, rgba(22, 6, 32, 0.92) 0%, rgba(8, 2, 14, 0.98) 100%) !important;
    border-color: rgba(147, 51, 234, 0.45) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(147, 51, 234, 0.1) !important;
    transition: all 0.4s ease;
}

html.theme-halloween .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > div:hover {
    border-color: #FF6D2B !important;
    box-shadow: 0 0 35px rgba(255, 109, 43, 0.55), 0 0 20px rgba(147, 51, 234, 0.6) !important;
    transform: translateY(-6px);
}

/* === Banner superior animado con bordes ardientes === */
#halloween-banner-bar {
    background: linear-gradient(90deg, #2e0854 0%, #450a0a 35%, #581c87 65%, #2e0854 100%) !important;
    border-bottom: 2px solid #FF6D2B !important;
    box-shadow: 0 0 25px rgba(255, 109, 43, 0.5), 0 0 15px rgba(147, 51, 234, 0.4) !important;
}

/* === Murciélagos animados cruzando la pantalla en el fondo === */
@keyframes bat-flight-1 {
    0% { transform: translate(-150px, 0) scale(0.9) rotate(8deg); opacity: 0; }
    12% { opacity: 0.9; }
    50% { transform: translate(50vw, -70px) scale(1.08) rotate(-4deg); opacity: 0.95; }
    88% { opacity: 0.9; }
    100% { transform: translate(115vw, -130px) scale(1.18) rotate(12deg); opacity: 0; }
}

@keyframes bat-flight-2 {
    0% { transform: translate(115vw, 0) scale(0.85) scaleX(-1) rotate(6deg); opacity: 0; }
    15% { opacity: 0.85; }
    50% { transform: translate(50vw, 85px) scale(1.02) scaleX(-1) rotate(-6deg); opacity: 0.9; }
    85% { opacity: 0.85; }
    100% { transform: translate(-150px, 140px) scale(1.12) scaleX(-1) rotate(10deg); opacity: 0; }
}

@keyframes bat-flight-3 {
    0% { transform: translate(-150px, 0) scale(0.78) rotate(-6deg); opacity: 0; }
    15% { opacity: 0.8; }
    50% { transform: translate(50vw, -30px) scale(0.92) rotate(6deg); opacity: 0.85; }
    85% { opacity: 0.8; }
    100% { transform: translate(115vw, -80px) scale(1.05) rotate(-8deg); opacity: 0; }
}

.spooky-bat {
    position: fixed;
    top: 22%;
    left: 0;
    width: 52px;
    height: 27px;
    pointer-events: none;
    z-index: 45;
    animation: bat-flight-1 18s linear infinite;
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.7));
    will-change: transform, opacity;
}

.spooky-bat svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.spooky-bat .bat-wing-l {
    transform-origin: 94px 38px;
    animation: bat-flap-l 0.15s infinite alternate ease-in-out;
}

.spooky-bat .bat-wing-r {
    transform-origin: 106px 38px;
    animation: bat-flap-r 0.15s infinite alternate ease-in-out;
}

.spooky-bat-2 {
    top: 62%;
    width: 42px;
    height: 22px;
    animation: bat-flight-2 22s linear infinite;
    animation-delay: 6s;
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.7));
}

.spooky-bat-3 {
    top: 42%;
    width: 36px;
    height: 19px;
    animation: bat-flight-3 26s linear infinite;
    animation-delay: 13s;
    filter: drop-shadow(0 0 6px rgba(255, 109, 43, 0.7));
}

/* === Barra de scroll con estilo Halloween === */
html.theme-halloween::-webkit-scrollbar {
    width: 10px;
}
html.theme-halloween::-webkit-scrollbar-track {
    background: #08020e;
}
html.theme-halloween::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dc2626, #FF6D2B);
    border-radius: 5px;
    border: 1px solid #9333ea;
}

/* === Título Hero Terrorífico en Halloween === */
.halloween-hero-title {
    font-family: 'Vermin Vibes 2', 'Orbitron', sans-serif !important;
}

.halloween-title-top {
    color: #f3f4f6;
    letter-spacing: 5px;
    text-shadow: 
        0 0 10px rgba(220, 38, 38, 0.9),
        0 0 25px rgba(147, 51, 234, 0.8),
        0 0 50px rgba(0, 0, 0, 0.9);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
}

.halloween-brand-glow {
    color: #ffffff;
    letter-spacing: 4px;
    text-shadow: 
        0 0 12px #FF6D2B,
        0 0 25px #dc2626,
        0 0 50px #991b1b,
        0 0 80px #581c87;
    animation: blood-pulse-glow 3s infinite ease-in-out alternate;
}

@keyframes blood-pulse-glow {
    0% {
        text-shadow: 
            0 0 10px #FF6D2B,
            0 0 22px #dc2626,
            0 0 45px #991b1b,
            0 0 75px #581c87;
        filter: brightness(1);
    }
    50% {
        text-shadow: 
            0 0 16px #f97316,
            0 0 35px #ef4444,
            0 0 65px #dc2626,
            0 0 95px #9333ea,
            0 0 120px rgba(220, 38, 38, 0.8);
        filter: brightness(1.2);
    }
    100% {
        text-shadow: 
            0 0 8px #FF6D2B,
            0 0 18px #dc2626,
            0 0 35px #7f1d1d,
            0 0 60px #3b0764;
        filter: brightness(0.95);
    }
}

/* === Animación de Enjambre de Murciélagos hacia la pantalla al pulsar VER EVENTO === */
#bat-swarm-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: auto;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(35, 8, 20, 0.3) 0%, rgba(8, 2, 14, 0.94) 80%);
    backdrop-filter: blur(2px);
    opacity: 0;
    animation: bat-overlay-in 0.88s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes bat-overlay-in {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 1; background-color: #040108; }
}

.bat-flyer {
    position: absolute;
    width: 68px;
    height: 36px;
    will-change: transform, opacity;
    animation: fly-toward-screen var(--anim-duration, 0.85s) cubic-bezier(0.18, 0.1, 0.25, 1) forwards;
    transform-origin: center center;
    pointer-events: none;
}

.bat-flyer svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Aleteo articulado e independiente de las alas izquierda y derecha */
.bat-flyer .bat-wing-l {
    transform-origin: 94px 38px;
    animation: bat-flap-l 0.12s infinite alternate ease-in-out;
}
.bat-flyer .bat-wing-r {
    transform-origin: 106px 38px;
    animation: bat-flap-r 0.12s infinite alternate ease-in-out;
}

@keyframes bat-flap-l {
    0% { transform: rotate(26deg) scaleY(0.7); }
    100% { transform: rotate(-24deg) scaleY(1.08); }
}
@keyframes bat-flap-r {
    0% { transform: rotate(-26deg) scaleY(0.7); }
    100% { transform: rotate(24deg) scaleY(1.08); }
}

@keyframes fly-toward-screen {
    0% {
        transform: translate(-50%, -50%) scale(0.15) rotate(var(--rot-start, 0deg));
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(var(--target-scale, 3.2)) rotate(var(--rot-end, 15deg));
        opacity: 0.95;
    }
}

/* === Cementerio de Halloween: Lápidas sin Nombre y Brazos Zombis Surgiendo === */
#halloween-graveyard {
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(9, 2, 16, 0.95) 40%, #000 100%);
}

.graveyard-fog {
    background: radial-gradient(ellipse at 50% 100%, rgba(147, 51, 234, 0.3) 0%, rgba(220, 38, 38, 0.15) 45%, transparent 75%);
    animation: graveyard-fog-pulse 5s ease-in-out infinite alternate;
}

@keyframes graveyard-fog-pulse {
    0% { opacity: 0.45; transform: scaleY(0.9); }
    100% { opacity: 0.85; transform: scaleY(1.15); }
}

.tombstone {
    transition: transform 0.4s ease;
}

.tombstone.tombstone-1 { width: 75px !important; height: 110px !important; }
.tombstone.tombstone-2 { width: 60px !important; height: 115px !important; }
.tombstone.tombstone-3 { width: 90px !important; height: 125px !important; }
.tombstone.tombstone-4 { width: 70px !important; height: 100px !important; }
.tombstone.tombstone-5 { width: 75px !important; height: 105px !important; max-height: 105px !important; }
.tombstone.tombstone-6 { width: 60px !important; height: 100px !important; }

@media (max-width: 640px) {
    .tombstone.tombstone-1 { width: 55px !important; height: 80px !important; }
    .tombstone.tombstone-3 { width: 65px !important; height: 90px !important; }
    .tombstone.tombstone-4 { width: 50px !important; height: 75px !important; }
    .tombstone.tombstone-5 { width: 55px !important; height: 75px !important; max-height: 75px !important; }
    .tombstone.tombstone-6 { width: 45px !important; height: 75px !important; }
}

/* Brazos zombis ocultos bajo tierra por defecto */
.zombie-arm-wrapper {
    position: absolute;
    bottom: -6px;
    transform: translateY(115%) rotate(var(--arm-rot, 0deg));
    transition: transform 1.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    will-change: transform;
    pointer-events: none;
}

/* Cuando el usuario llega abajo, los brazos zombis emergen de la tierra */
.graveyard-risen .zombie-arm-wrapper {
    transform: translateY(0%) rotate(var(--arm-rot, 0deg));
    pointer-events: auto !important;
    cursor: pointer;
}

.graveyard-risen .zombie-arm-wrapper.arm-1 {
    transition-delay: 0.12s;
}
.graveyard-risen .zombie-arm-wrapper.arm-2 {
    transition-delay: 0.38s;
}
.graveyard-risen .zombie-arm-wrapper.arm-3 {
    transition-delay: 0.22s;
}
.graveyard-risen .zombie-arm-wrapper.arm-4 {
    transition-delay: 0.48s;
}

/* Animación sutil y continua de garras zombis retorciéndose al estar fuera */
@keyframes zombie-claw-idle {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    30% {
        transform: translateY(-8px) rotate(4deg);
    }
    65% {
        transform: translateY(-3px) rotate(-4deg);
    }
}

.graveyard-risen .zombie-arm-inner {
    animation: zombie-claw-idle 4s ease-in-out infinite;
    pointer-events: auto !important;
    cursor: pointer;
}

.graveyard-risen .arm-2 .zombie-arm-inner {
    animation-delay: 0.8s;
    animation-duration: 4.6s;
}

.graveyard-risen .arm-3 .zombie-arm-inner {
    animation-delay: 1.5s;
    animation-duration: 3.9s;
}

.graveyard-risen .arm-4 .zombie-arm-inner {
    animation-delay: 0.4s;
    animation-duration: 4.3s;
}

/* Agitación / espasmo zombi al pasar el ratón por encima */
@keyframes zombie-claw-agitate {
    0% { transform: translateY(0px) rotate(0deg) scale(1); }
    15% { transform: translateY(-5px) rotate(-7deg) scale(1.04); }
    30% { transform: translateY(-2px) rotate(8deg) scale(1.06); }
    45% { transform: translateY(-8px) rotate(-6deg) scale(1.07); }
    60% { transform: translateY(-3px) rotate(7deg) scale(1.05); }
    75% { transform: translateY(-6px) rotate(-4deg) scale(1.04); }
    90% { transform: translateY(-2px) rotate(4deg) scale(1.02); }
    100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

.graveyard-risen .zombie-arm-wrapper:hover .zombie-arm-inner {
    animation: zombie-claw-agitate 0.38s ease-in-out infinite !important;
}

.graveyard-risen .zombie-arm-inner svg {
    transition: filter 0.25s ease;
}

/* Efecto de resplandor reactivo al pasar el ratón por encima */
.graveyard-risen .arm-1:hover svg,
.graveyard-risen .arm-3:hover svg {
    filter: drop-shadow(0 0 16px rgba(74, 222, 128, 0.95)) drop-shadow(0 0 25px rgba(34, 197, 94, 0.7)) !important;
}

.graveyard-risen .arm-2:hover svg {
    filter: drop-shadow(0 0 16px rgba(248, 113, 113, 0.95)) drop-shadow(0 0 25px rgba(239, 68, 68, 0.7)) !important;
}

.graveyard-risen .arm-4:hover svg {
    filter: drop-shadow(0 0 16px rgba(251, 146, 60, 0.95)) drop-shadow(0 0 25px rgba(249, 115, 22, 0.7)) !important;
}

/* === Zoom Lento y Continuo del Banner con Monstruo en Halloween === */
.halloween-banner-monster {
    transform: scale(1.0);
    transform-origin: center center;
    transition: transform 3.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.halloween-hero-banner-container:hover .halloween-banner-monster {
    animation: monster-slow-zoom 15s ease-in-out infinite;
}

@keyframes monster-slow-zoom {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.085); /* Pequeño zoom hacia el centro */
    }
    100% {
        transform: scale(1.0); /* Vuelve hacia atrás lentamente */
    }
}

/* === Mano Zombi Agarrando Botones por Abajo a la Derecha en Hover === */
html.theme-halloween .hw-zombie-btn,
html.theme-halloween button,
html.theme-halloween a[href*="wa.me"],
html.theme-halloween a[href*="tarifas"].inline-flex,
html.theme-halloween a[href*="tarifas"]:not(:has(img)),
html.theme-halloween a[href*="halloween"].inline-flex,
html.theme-halloween a[href*="halloween"].hw-zombie-btn,
html.theme-halloween a[href*="halloween"].btn-halloween-promo,
html.theme-halloween a[href*="categoria"].inline-flex,
html.theme-halloween a[href*="faq"].inline-flex,
html.theme-halloween a[href*="instagram"].inline-flex,
html.theme-halloween #main-nav .grid a,
html.theme-halloween #main-nav .flex a,
html.theme-halloween .btn-halloween-promo {
    position: relative !important;
    overflow: visible !important;
}

html.theme-halloween .hw-zombie-btn::after,
html.theme-halloween button::after,
html.theme-halloween a[href*="wa.me"]::after,
html.theme-halloween a[href*="tarifas"].inline-flex::after,
html.theme-halloween a[href*="tarifas"]:not(:has(img))::after,
html.theme-halloween a[href*="halloween"].inline-flex::after,
html.theme-halloween a[href*="halloween"].hw-zombie-btn::after,
html.theme-halloween a[href*="halloween"].btn-halloween-promo::after,
html.theme-halloween a[href*="categoria"].inline-flex::after,
html.theme-halloween a[href*="faq"].inline-flex::after,
html.theme-halloween a[href*="instagram"].inline-flex::after,
html.theme-halloween #main-nav .grid a::after,
html.theme-halloween #main-nav .flex a::after,
html.theme-halloween .btn-halloween-promo::after {
    content: "";
    position: absolute;
    bottom: -28px;
    right: -16px;
    width: 52px;
    height: 70px;
    background-image: url("/static/img/generales/halloween/mano_zombie.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transform: translate(6px, 16px) scale(0.85);
    transition: opacity 0.2s ease-out, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 4px rgba(220, 38, 38, 0.5));
}

/* Al pasar el ratón por encima, la mano zombi realista emerge y agarra la esquina del botón con la palma */
html.theme-halloween .hw-zombie-btn:hover::after,
html.theme-halloween button:hover::after,
html.theme-halloween a[href*="wa.me"]:hover::after,
html.theme-halloween a[href*="tarifas"].inline-flex:hover::after,
html.theme-halloween a[href*="tarifas"]:not(:has(img)):hover::after,
html.theme-halloween a[href*="halloween"].inline-flex:hover::after,
html.theme-halloween a[href*="halloween"].hw-zombie-btn:hover::after,
html.theme-halloween a[href*="halloween"].btn-halloween-promo:hover::after,
html.theme-halloween a[href*="categoria"].inline-flex:hover::after,
html.theme-halloween a[href*="faq"].inline-flex:hover::after,
html.theme-halloween a[href*="instagram"].inline-flex:hover::after,
html.theme-halloween #main-nav .grid a:hover::after,
html.theme-halloween #main-nav .flex a:hover::after,
html.theme-halloween .btn-halloween-promo:hover::after {
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
}

/* Excluir estrictamente enlaces que son imágenes, tarjetas de categorías o banners */
html.theme-halloween a:has(img),
html.theme-halloween a:has(picture),
html.theme-halloween a.md\:col-span-5,
html.theme-halloween a[class*="col-span"],
html.theme-halloween a.aspect-\[3\/4\],
html.theme-halloween a.aspect-video,
html.theme-halloween a.aspect-square {
    overflow: hidden !important;
}

html.theme-halloween a:has(img)::after,
html.theme-halloween a:has(picture)::after,
html.theme-halloween a.md\:col-span-5::after,
html.theme-halloween a[class*="col-span"]::after,
html.theme-halloween a.aspect-\[3\/4\]::after,
html.theme-halloween a.aspect-video::after,
html.theme-halloween a.aspect-square::after {
    display: none !important;
    content: none !important;
}

/* === LÁPIDAS (TOMBSTONES) DE TARIFAS EN HALLOWEEN === */
.tombstone-card {
    background: linear-gradient(180deg, #3d3935 0%, #2c2825 10%, #1e1b19 35%, #151312 70%, #0e0c0b 100%);
    border: 2px solid #57534e;
    border-top: 4px solid #8c857e;
    border-bottom: 8px solid #1c1917;
    border-radius: 80px 80px 12px 12px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.95),
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -8px 20px rgba(0, 0, 0, 0.9),
        0 0 25px rgba(0, 0, 0, 0.6);
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tombstone-card:hover {
    transform: translateY(-8px);
    border-color: #8b5cf6;
    border-top-color: #c084fc;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.98),
        0 0 35px rgba(139, 92, 246, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -8px 20px rgba(0, 0, 0, 0.9);
}

.tombstone-inset {
    border: 1px dashed rgba(168, 162, 158, 0.28);
    border-radius: 68px 68px 8px 8px;
    background: radial-gradient(circle at 50% 12%, rgba(68, 64, 60, 0.22) 0%, rgba(18, 16, 15, 0.5) 50%, rgba(8, 7, 6, 0.85) 100%);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.85);
}

.tombstone-carved-title {
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    color: #f5f5f4 !important;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.95), -1px -1px 0 rgba(255, 255, 255, 0.15);
    letter-spacing: 1.5px;
}

.tombstone-carved-text {
    color: #d6d3d1 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95);
}

.tombstone-price-slot {
    background: #0a0807 !important;
    border: 1px solid #292524 !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.stone-crack {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 40px;
    opacity: 0.35;
    pointer-events: none;
}