/*
 * Tema Halloween — noche en el inicio.
 * Superficies oscuras + araña + figuras voladoras.
 */

html.halloween-active {
    color-scheme: dark;
}

body.halloween-active {
    position: relative;
    z-index: 0;
    background-color: #0c1210 !important;
    color: #e8dfd0;
}

/* ——— Navbar ——— */
body.halloween-active .navbar {
    background: rgba(10, 14, 18, 0.94) !important;
    box-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(243, 234, 216, 0.08);
}

body.halloween-active .nav-menu a,
body.halloween-active .nav-menu .dropdown-toggle,
body.halloween-active .nav-menu .nav-track-btn {
    color: #f3ead8 !important;
}

body.halloween-active .nav-menu a:hover,
body.halloween-active .nav-menu .dropdown-toggle:hover,
body.halloween-active .nav-menu .nav-track-btn:hover {
    color: #ffb347 !important;
    background: rgba(243, 146, 0, 0.12) !important;
}

body.halloween-active .dropdown-menu {
    background: #141a22 !important;
    border-color: rgba(243, 234, 216, 0.12) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

body.halloween-active .dropdown-menu a,
body.halloween-active .dropdown-menu .nav-track-btn {
    color: #e8dfd0 !important;
}

body.halloween-active .dropdown-menu a:hover,
body.halloween-active .dropdown-menu .nav-track-btn:hover {
    background: rgba(243, 146, 0, 0.16) !important;
    color: #ffb347 !important;
}

body.halloween-active .btn-register {
    background: #f39200 !important;
    border-color: #f39200 !important;
    color: #fff !important;
}

body.halloween-active .btn-register:hover {
    background: #d98200 !important;
    border-color: #d98200 !important;
    color: #fff !important;
}

body.halloween-active .navbar .nav-cta-calc {
    background: #f39200 !important;
    border-color: #f39200 !important;
    color: #fff !important;
}

body.halloween-active .nav-actions .ib-btn-ghost {
    color: #ffb347 !important;
}

body.halloween-active .btn-login:hover,
body.halloween-active .btn-nav-rastrear:hover {
    background: #f39200 !important;
    border-color: #f39200 !important;
    color: #fff !important;
}

body.halloween-active .mobile-toggle span {
    background: #f3ead8 !important;
}

@media (max-width: 959px) {
    body.halloween-active .nav-actions .nav-cta-login {
        color: #fff !important;
        background: #f39200 !important;
        border-color: #f39200 !important;
    }

    body.halloween-active .nav-menu {
        background: #10161c !important;
    }

    body.halloween-active .nav-menu a,
    body.halloween-active .nav-menu .dropdown-toggle,
    body.halloween-active .nav-menu .btn-nav-rastrear,
    body.halloween-active .nav-menu .nav-track-btn {
        color: #f3ead8 !important;
        border-bottom-color: rgba(243, 234, 216, 0.1) !important;
    }

    body.halloween-active .dropdown-menu {
        background: rgba(255, 255, 255, 0.04) !important;
        border-left-color: #f39200 !important;
    }
}

/* ——— Secciones ——— */
body.halloween-active .services,
body.halloween-active .services-showcase,
body.halloween-active .how-it-works,
body.halloween-active .pricing,
body.halloween-active .ib-home-calc,
body.halloween-active .ib-routes,
body.halloween-active .ib-import,
body.halloween-active .ib-rewards,
body.halloween-active .ib-app,
body.halloween-active .ib-track,
body.halloween-active .ib-trust,
body.halloween-active .faq,
body.halloween-active .customer-gallery-section,
body.halloween-active .home-promo-section {
    background: rgba(8, 12, 16, 0.38) !important;
    background-image: none !important;
}

body.halloween-active .ib-routes-bg,
body.halloween-active .ib-faq-bg {
    display: none !important;
}

body.halloween-active .how-it-works::before,
body.halloween-active .customer-gallery-section::before {
    display: none;
}

body.halloween-active .stores-carousel-section,
body.halloween-active .ib-stores {
    background: rgba(8, 12, 16, 0.55) !important;
}

body.halloween-active .carousel-wrapper::before {
    background: linear-gradient(to right, rgba(8, 12, 16, 0.92), rgba(8, 12, 16, 0)) !important;
}

body.halloween-active .carousel-wrapper::after {
    background: linear-gradient(to left, rgba(8, 12, 16, 0.92), rgba(8, 12, 16, 0)) !important;
}

body.halloween-active .contact {
    position: relative;
    z-index: 1;
    background: #10161c !important;
    background-image: none !important;
}

/* ——— Títulos ——— */
body.halloween-active .section-title,
body.halloween-active .services .section-title,
body.halloween-active .services-showcase .section-title,
body.halloween-active .how-it-works .section-title,
body.halloween-active .pricing .section-title,
body.halloween-active .ib-home-calc .ib-h2,
body.halloween-active .ib-routes .ib-h2,
body.halloween-active .ib-import .ib-h2,
body.halloween-active .ib-rewards .ib-h2,
body.halloween-active .ib-rewards .ib-rewards-step-title,
body.halloween-active .ib-app .ib-h2,
body.halloween-active .ib-track .ib-h2,
body.halloween-active .ib-trust .ib-h2,
body.halloween-active .ib-faq .ib-h2,
body.halloween-active .ib-stores .ib-h2,
body.halloween-active .ib-clients .ib-h2,
body.halloween-active .faq .section-title,
body.halloween-active .contact h2,
body.halloween-active .customer-gallery-section .section-title,
body.halloween-active .stores-carousel-section .section-title {
    color: #f3ead8 !important;
}

body.halloween-active .section-subtitle,
body.halloween-active .ib-home-calc .ib-lead,
body.halloween-active .ib-routes .ib-lead,
body.halloween-active .ib-import .ib-lead,
body.halloween-active .ib-import .ib-import-note,
body.halloween-active .ib-rewards .ib-lead,
body.halloween-active .ib-rewards .ib-rewards-step-text,
body.halloween-active .ib-rewards .ib-rewards-note,
body.halloween-active .ib-app .ib-lead,
body.halloween-active .ib-app .ib-app-list,
body.halloween-active .ib-track .ib-lead,
body.halloween-active .ib-track .ib-track-hint,
body.halloween-active .ib-trust .ib-trust-text,
body.halloween-active .ib-stores .ib-lead,
body.halloween-active .ib-clients .ib-lead,
body.halloween-active .contact-info > p {
    color: rgba(243, 234, 216, 0.78) !important;
}

/* ——— Recompensas ——— */
body.halloween-active .ib-rewards-glow {
    background: radial-gradient(circle, rgba(243, 146, 0, 0.12) 0%, rgba(243, 146, 0, 0) 65%);
}

body.halloween-active .ib-rewards-step-icon {
    background: rgba(243, 146, 0, 0.14);
    color: #ffb347;
}

body.halloween-active .ib-rewards-note strong {
    color: #f3ead8;
}

body.halloween-active .ib-rewards .ib-btn-ghost {
    color: #ffb347 !important;
}

body.halloween-active .ib-rewards-card {
    background: linear-gradient(145deg, #121a24 0%, #1b2532 60%, #2a1a08 100%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(243, 146, 0, 0.25) inset;
}

body.halloween-active .ib-rewards-toast {
    background: #16202b;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

body.halloween-active .ib-rewards-toast-text strong {
    color: #f3ead8;
}

body.halloween-active .ib-rewards-toast-text small {
    color: rgba(243, 234, 216, 0.65);
}

/* ——— Cómo funciona ——— */
body.halloween-active .step-card {
    background: rgba(16, 22, 30, 0.88) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(243, 234, 216, 0.1);
}

body.halloween-active .step-content h3 {
    color: #f3ead8 !important;
}

body.halloween-active .step-content p,
body.halloween-active .step-features span {
    color: rgba(243, 234, 216, 0.72) !important;
}

body.halloween-active .step-arrow i {
    color: #ffb347 !important;
}

/* ——— Tarifas: el bloque blanco de fondo desaparece; las tarjetas de ruta se quedan ——— */

/* ——— Tiendas: logos blancos sobre noche ——— */
body.halloween-active .store-logo {
    background: #f7f4ee;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

/* ——— Galería ——— */
body.halloween-active .customer-card {
    background: rgba(16, 22, 30, 0.92);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

body.halloween-active .customer-card h3,
body.halloween-active .customer-name {
    color: #f3ead8 !important;
}

body.halloween-active .gallery-stats {
    background: rgba(16, 22, 30, 0.78) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(243, 234, 216, 0.1);
}

body.halloween-active .ib-clients .ib-clients-stats {
    background: none !important;
    box-shadow: none;
    border: 0;
}

body.halloween-active .ib-clients .stat-item {
    background: rgba(16, 22, 30, 0.9) !important;
    border: 1px solid rgba(243, 234, 216, 0.1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

body.halloween-active .ib-clients .customer-card {
    border-color: rgba(243, 234, 216, 0.1);
}

body.halloween-active .stat-number,
body.halloween-active .ib-clients .stat-number {
    color: #ffb347;
}

body.halloween-active .stat-label {
    color: #f3ead8;
}

body.halloween-active .btn-view-more {
    background: #f39200 !important;
    box-shadow: 0 10px 28px rgba(243, 146, 0, 0.35);
}

body.halloween-active .btn-view-more:hover {
    background: #d98200 !important;
}

/* ——— FAQ ——— */
body.halloween-active .ib-trust-item,
body.halloween-active .faq-item {
    background: rgba(16, 22, 30, 0.9) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(243, 234, 216, 0.1);
}

body.halloween-active .ib-trust-icon {
    background: rgba(243, 146, 0, 0.16);
    color: #ffb347;
}

body.halloween-active .ib-how-step,
body.halloween-active .ib-import-item {
    --how-ink: #f3ead8;
    --how-paper: #1c2632;
    background: rgba(16, 22, 30, 0.88) !important;
    border-color: rgba(243, 234, 216, 0.1);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

body.halloween-active .ib-how-art,
body.halloween-active .ib-how-step:nth-child(even) .ib-how-art,
body.halloween-active .ib-import-item:nth-child(even) .ib-how-art {
    background: radial-gradient(circle at 50% 62%, rgba(243, 146, 0, 0.2) 0%, rgba(243, 146, 0, 0.06) 55%, rgba(255, 255, 255, 0.02) 100%);
}

body.halloween-active .ib-how-num {
    background: #f39200;
    color: #10161e;
    box-shadow: 2px 3px 0 rgba(243, 234, 216, 0.6);
}

body.halloween-active .ib-how-kicker {
    color: #ffb347;
}

body.halloween-active .ib-how-text,
body.halloween-active .ib-import-text {
    color: rgba(243, 234, 216, 0.72) !important;
}

body.halloween-active .ib-how-arrow {
    background: #10161e;
    border-color: rgba(243, 234, 216, 0.14);
    color: #ffb347;
}

body.halloween-active .ib-how .ib-h2,
body.halloween-active .ib-how-title,
body.halloween-active .ib-import-title,
body.halloween-active .ib-trust-title,
body.halloween-active .faq-question {
    color: #f3ead8 !important;
}

body.halloween-active .faq-question:hover {
    background: rgba(243, 146, 0, 0.1) !important;
}

body.halloween-active .faq-question i {
    color: #ffb347 !important;
}

body.halloween-active .faq-answer p {
    color: rgba(243, 234, 216, 0.75) !important;
}

/* ——— Promo home ——— */
body.halloween-active .home-promo-card {
    background: #141a22;
    border-color: rgba(243, 234, 216, 0.12);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

/* ——— Contacto (noche, opaco para no mezclar con el pie) ——— */
body.halloween-active .contact-item h4 {
    color: #f3ead8 !important;
}

body.halloween-active .contact-item p {
    color: rgba(243, 234, 216, 0.72) !important;
}

body.halloween-active .social-links a {
    background: rgba(243, 234, 216, 0.1) !important;
    color: #ffb347 !important;
}

body.halloween-active .social-links a:hover {
    background: #f39200 !important;
    color: #fff !important;
}

body.halloween-active .contact-form-wrapper {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(243, 234, 216, 0.12);
}

body.halloween-active .contact-form input,
body.halloween-active .contact-form textarea {
    background: rgba(8, 12, 16, 0.72) !important;
    border-color: rgba(243, 234, 216, 0.18) !important;
    color: #f3ead8 !important;
}

body.halloween-active .contact-form input::placeholder,
body.halloween-active .contact-form textarea::placeholder {
    color: rgba(243, 234, 216, 0.45);
}

body.halloween-active .contact-form input:focus,
body.halloween-active .contact-form textarea:focus {
    border-color: #f39200 !important;
    box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.22);
}

/* ——— Rastreo (modal del inicio) ——— */
body.halloween-active .ib-track-panel,
body.halloween-active .tracking-card,
body.halloween-active .tracking-card--modal {
    background: #141a22 !important;
    color: #e8dfd0;
}

body.halloween-active .tracking-header h2,
body.halloween-active .tracking-header h3 {
    color: #f3ead8 !important;
}

body.halloween-active .tracking-header p,
body.halloween-active .tracking-form label {
    color: rgba(243, 234, 216, 0.75) !important;
}

body.halloween-active .tracking-form input {
    background: rgba(8, 12, 16, 0.72) !important;
    border-color: rgba(243, 234, 216, 0.18) !important;
    color: #f3ead8 !important;
}

body.halloween-active .tracking-modal__close {
    background: rgba(20, 26, 34, 0.95);
    color: #f3ead8;
}

/* ——— Footer ——— */
body.halloween-active .footer {
    position: relative;
    z-index: 1;
    background: #0a0e12 !important;
    background-image: none !important;
    border-top: 1px solid rgba(243, 234, 216, 0.08);
}

body.halloween-active .footer-col p,
body.halloween-active .footer-col ul li a,
body.halloween-active .footer-bottom,
body.halloween-active .ib-footer-wa a {
    color: rgba(243, 234, 216, 0.88);
}

body.halloween-active .footer-col ul li a:hover {
    color: #ffb347;
}

/* ——— Araña en hilo (izquierda) ——— */
body.halloween-active .hw-spider {
    position: fixed;
    top: var(--navbar-height, 72px);
    left: 18px;
    z-index: 45;
    pointer-events: none;
    width: 74px;
    animation: hw-spider-drop 7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body.halloween-active .hw-spider__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: hw-spider-sway 4.4s ease-in-out 7s infinite;
}

body.halloween-active .hw-spider__silk {
    display: block;
    width: 1px;
    height: 232px;
    background: linear-gradient(
        180deg,
        rgba(243, 234, 216, 0.15) 0%,
        rgba(243, 234, 216, 0.8) 18%,
        rgba(243, 234, 216, 0.65) 100%
    );
    box-shadow: 0 0 4px rgba(255, 179, 71, 0.45);
}

body.halloween-active .hw-spider__body {
    display: block;
    width: 68px;
    height: auto;
    margin-top: -2px;
    filter:
        drop-shadow(0 0 1px rgba(255, 179, 71, 0.95))
        drop-shadow(0 0 6px rgba(243, 146, 0, 0.75))
        drop-shadow(0 0 14px rgba(243, 146, 0, 0.35));
}

@keyframes hw-spider-drop {
    0% { transform: translateY(-300px); }
    72% { transform: translateY(10px); }
    86% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

@keyframes hw-spider-sway {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(6deg); }
}

/* ——— Figuras (de a una: se acercan y salen por el borde más cercano) ——— */
body.halloween-active .hw-flyer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 48;
    pointer-events: none;
    opacity: 0;
    outline: none;
    will-change: transform;
}

body.halloween-active .hw-flyer.is-flying {
    animation: hw-flyer-flight 4s cubic-bezier(0.32, 0.05, 0.45, 1) forwards;
}

body.halloween-active .hw-flyer__img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 55%;
    animation: hw-flyer-tilt 1.2s ease-in-out infinite;
}

body.halloween-active .hw-bat {
    width: 220px;
    filter:
        drop-shadow(0 0 1.5px rgba(255, 179, 71, 0.95))
        drop-shadow(0 0 8px rgba(243, 146, 0, 0.7))
        drop-shadow(0 0 20px rgba(243, 146, 0, 0.35));
}

body.halloween-active .hw-pumpkin {
    width: 168px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}

body.halloween-active .hw-ghost {
    width: 170px;
    filter:
        drop-shadow(1px 0 0 #1a1510)
        drop-shadow(-1px 0 0 #1a1510)
        drop-shadow(0 1px 0 #1a1510)
        drop-shadow(0 -1px 0 #1a1510)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4));
}

@keyframes hw-flyer-flight {
    0% {
        transform: translate(var(--hw-x0), var(--hw-y0)) scale(0.14);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--hw-xOut), var(--hw-yOut)) scale(1.5);
        opacity: 1;
    }
}

@keyframes hw-flyer-tilt {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

@media (max-width: 768px) {
    body.halloween-active .hw-spider {
        left: 6px;
        width: 58px;
    }

    body.halloween-active .hw-spider__silk {
        height: 140px;
    }

    body.halloween-active .hw-spider__body {
        width: 52px;
    }

    body.halloween-active .hw-bat {
        width: 150px;
    }

    body.halloween-active .hw-pumpkin,
    body.halloween-active .hw-ghost {
        width: 118px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.halloween-active .hw-spider,
    body.halloween-active .hw-spider__inner {
        animation: none;
    }

    body.halloween-active .hw-flyer,
    body.halloween-active .hw-flyer__img {
        display: none;
        animation: none;
    }
}

/* Rastreo — modal de resultado */
body.halloween-active .ibtr-card { background: #151d27 !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important; }
body.halloween-active .ibtr-summary { background: radial-gradient(circle at 110% -10%, rgba(255, 122, 0, .5), transparent 45%), linear-gradient(160deg, #2a1a3d 0%, #0d1117 100%) !important; }
body.halloween-active .ibtr-history-head h4,
body.halloween-active .ibtr-step-head strong { color: #f3ead8 !important; }
body.halloween-active .ibtr-history-head span { background: rgba(255, 122, 0, .18) !important; color: #ffb366 !important; }
body.halloween-active .ibtr-step-body { background: #1c2632 !important; border-color: #2d3a4a !important; }
body.halloween-active .ibtr-step.is-current .ibtr-step-body { background: #222e3c !important; }
body.halloween-active .ibtr-step time,
body.halloween-active .ibtr-step-note { color: #b8c1cc !important; }
body.halloween-active .ibtr-step-dot { background: #151d27; }
body.halloween-active .ibtr-step::before { background: repeating-linear-gradient(to bottom, #3a4757 0 6px, transparent 6px 11px) !important; }
body.halloween-active .ibtr-actions { border-color: #2d3a4a !important; }
body.halloween-active .ibtr-close { background: #1c2632 !important; border-color: #2d3a4a !important; }
body.halloween-active .ibtr-close svg { stroke: #f3ead8 !important; }
body.halloween-active .ibtr-alert { background: #2a1517 !important; border-color: #5c2427 !important; border-left-color: #ef4444 !important; color: #fecaca !important; }
body.halloween-active .ibtr-alert-body strong { color: #fca5a5 !important; }

/* ——— Servicio Viajero ——— */
body.halloween-active .ib-trip { background: rgba(8, 12, 16, 0.38) !important; background-image: none !important; }
body.halloween-active .ib-trip-sky-path { stroke: rgba(243, 146, 0, .25) !important; }
body.halloween-active .ib-trip .ib-h2,
body.halloween-active .ib-trip .ib-trip-step-title { color: #f3ead8 !important; }
body.halloween-active .ib-trip .ib-lead,
body.halloween-active .ib-trip .ib-trip-step-text { color: rgba(243, 234, 216, 0.78) !important; }
body.halloween-active .ib-trip-step,
body.halloween-active .ib-trip-rate { background: #151d27 !important; border-color: #2d3a4a !important; }
body.halloween-active .ib-trip-rate { color: #f3ead8 !important; }
body.halloween-active .ib-trip-rate::before { background-color: rgba(243, 146, 0, .18) !important; }
body.halloween-active .ib-trip-pass { background: #1c2632 !important; box-shadow: 0 26px 60px rgba(0, 0, 0, .55) !important; }
body.halloween-active .ib-trip-pass-main { background: radial-gradient(circle at 100% 0%, rgba(255, 122, 0, .45), transparent 40%), linear-gradient(150deg, #2a1a3d, #0d1117) !important; }
body.halloween-active .ib-trip-pass-stub { border-color: #3a4757 !important; }
body.halloween-active .ib-trip-pass-stub::before,
body.halloween-active .ib-trip-pass-stub::after { background: #0e141a !important; }
body.halloween-active .ib-trip-stub-label { color: rgba(243, 234, 216, .65) !important; }
body.halloween-active .ib-trip-barcode { background: repeating-linear-gradient(90deg, #f3ead8 0 2px, transparent 2px 4px, #f3ead8 4px 7px, transparent 7px 9px) !important; opacity: .6 !important; }
body.halloween-active .ib-trip-ink,
body.halloween-active .ib-trip-bag-body,
body.halloween-active .ib-trip-tag { stroke: #f3ead8 !important; }
body.halloween-active .ib-trip-wheel { fill: #f3ead8 !important; }
body.halloween-active .ib-trip .ib-btn-ghost { color: #ffb366 !important; border-color: rgba(255, 179, 102, .5) !important; }