/* =====================================================================
   ESTRELLITA – TEMA HALLOWEEN
   Se carga DESPUÉS de style.css y solo sobreescribe estilos.
   Para quitarlo después de Halloween: borra la línea <link> en index.php.
   ===================================================================== */

:root {
    /* Paleta: morado noche + naranja calabaza + crema hueso */
    --secondary: #0B0610;
    --primary: #8A5DB5;
    --accent: #E08A2E;
    --bg-color: #140B1B;
    --text-color: #F2E8D5;

    --hw-panel: #1D1127;
    --hw-line: #4A2A5E;
    --hw-orange-line: #C97A2B;
    --hw-cream: #F2E8D5;
    --hw-soft: #CDBFE0;

    /* Íconos decorativos (SVG incrustados) */
    --ic-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238A5DB5' d='M12 9c-1-3-4-4-8-4 1.5 1.5 1.5 4 0 6 1.5 0 3 .5 4 2 1-1.5 2.5-1.5 4 0 1.5-1.5 3-1.5 4 0 1-1.5 2.5-2 4-2-1.5-2-1.5-4.5 0-6-4 0-7 1-8 4z'/%3E%3C/svg%3E");
    --ic-bat-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235E3A82' d='M12 9c-1-3-4-4-8-4 1.5 1.5 1.5 4 0 6 1.5 0 3 .5 4 2 1-1.5 2.5-1.5 4 0 1.5-1.5 3-1.5 4 0 1-1.5 2.5-2 4-2-1.5-2-1.5-4.5 0-6-4 0-7 1-8 4z'/%3E%3C/svg%3E");
    --ic-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5DB5' stroke-width='.6'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M12 1.5v21M1.5 12h21M4.5 4.5l15 15M19.5 4.5l-15 15'/%3E%3C/svg%3E");
    --ic-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E08A2E' d='M12 3l2.600 5.800 6.400.7-4.800 4.300 1.400 6.200L12 16.800 6.400 20l1.400-6.200L3 9.500l6.400-.7z'/%3E%3C/svg%3E");
    --ic-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E08A2E' d='M20 14.5A8.500 8.500 0 1 1 10.500 3a6.500 6.500 0 0 0 9.500 11.5z'/%3E%3C/svg%3E");
    --ic-moon-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238A5DB5' d='M20 14.5A8.500 8.500 0 1 1 10.500 3a6.500 6.500 0 0 0 9.500 11.5z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
body {
    background: radial-gradient(ellipse at 50% 0%, #2A1438 0%, #140B1B 55%) fixed;
    color: var(--hw-cream);
}
h1, h2, h3, h4 { color: var(--hw-cream); }

/* ---------- Encabezado ---------- */
.main-header {
    background: var(--secondary);
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.header-top {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--hw-line);
}
.header-top::before { /* telaraña esquina superior derecha */
    content: '';
    position: absolute; top: -14px; right: -14px;
    width: 90px; height: 90px;
    background: var(--ic-web) no-repeat center / contain;
    opacity: .85; pointer-events: none;
}
.header-top::after { /* murciélago esquina inferior izquierda */
    content: '';
    position: absolute; left: 14px; bottom: 2px;
    width: 26px; height: 26px;
    background: var(--ic-bat-dark) no-repeat center / contain;
    pointer-events: none;
}
.header-logo {
    /* Tiñe el logo a naranja. Si no te gusta el tono, ajusta hue-rotate o quita esta línea */
    filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(.95);
}
.mobile-menu-btn { color: var(--accent); }
.header-search { border-color: var(--hw-orange-line); }
.cart-icon { background: rgba(224, 138, 46, .15); color: var(--hw-cream); }
.cart-icon:hover { background: rgba(224, 138, 46, .3); }

.header-nav { background: var(--secondary); }
.nav-item:hover { color: var(--accent); }
#link-ofertas { color: var(--accent) !important; }
#search-catalog-mobile { color: var(--hw-cream) !important; border-color: var(--hw-orange-line) !important; }
.dropdown-content { background: var(--hw-panel); border: 1px solid var(--hw-line); color: var(--hw-cream); }
.header-select { background: #140B1B; color: var(--hw-cream); border: 1px solid var(--hw-line); }

/* ---------- Recuadros de colecciones (foto + nombre encima) ---------- */
.collection-box {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: var(--hw-panel);
    border: 1px solid var(--hw-orange-line);
    border-radius: 20px;
}
.collection-box:hover {
    box-shadow: 0 0 26px rgba(224, 138, 46, .35);
}
.collection-box .product-image-container {
    height: 320px;
    border-radius: 0;
    background: #1A0F24;
    /* Tono cálido y oscuro para que todas las fotos combinen */
    filter: sepia(.3) saturate(1.15) brightness(.85) contrast(1.05);
}
.collection-box .product-title {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0; padding: 48px 12px 14px;
    background: linear-gradient(180deg, rgba(20, 10, 28, 0), rgba(20, 10, 28, .95));
    color: var(--hw-cream);
    font-family: var(--font-sans);
    font-weight: 600;
    z-index: 1;
}
.collection-box::after { /* ícono decorativo en la esquina */
    content: '';
    position: absolute; right: 12px; bottom: 12px;
    width: 24px; height: 24px;
    background: no-repeat center / contain;
    pointer-events: none; z-index: 2;
}
.collection-box:nth-child(1)::after { background-image: var(--ic-bat); }
.collection-box:nth-child(2)::after { background-image: var(--ic-web); }
.collection-box:nth-child(3)::after { background-image: var(--ic-star); }
.collection-box:nth-child(4)::after { background-image: var(--ic-moon); }
.collection-box:nth-child(5)::after { background-image: var(--ic-moon-purple); }
.collection-box:nth-child(6)::after { background-image: var(--ic-bat); }

/* ---------- Catálogo / productos ---------- */
.slider-container { border-radius: 14px; border: 1px solid rgba(201, 122, 43, .5); }
.product-info h3 { color: var(--hw-soft); }
.product-info .price { color: var(--hw-cream); }
.btn-add-circular { color: #140B1B; }
.btn-add-circular:hover { background-color: #F29B3F; }
.watermark-agotado { background-color: #3A1F52; }
.catalog > p[style*="#666"] { color: var(--hw-soft) !important; }

.btn-primary {
    background: transparent;
    color: var(--hw-cream);
    border: 1px solid var(--accent);
}
.btn-primary:hover {
    background: var(--accent);
    color: #140B1B;
    box-shadow: 0 5px 18px rgba(224, 138, 46, .4);
}
.btn-primary:disabled { background-color: #2A1D35; color: #8f84a0; border: none; }

/* ---------- Modales y carrito ---------- */
.modal { background: rgba(8, 3, 12, .8); }
.modal-content {
    background: var(--hw-panel);
    color: var(--hw-cream);
    border: 1px solid var(--hw-line);
    border-radius: 20px;
}
.modal-content h2 { color: var(--hw-cream) !important; }
.modal-info .description { color: var(--hw-soft); }
.close-modal { color: var(--hw-soft); }
.close-modal:hover { color: var(--accent); }
.modal-gallery img#modal-main-img { border-radius: 14px; }

#cart-modal .modal-content span:not(#cart-total) { color: var(--hw-soft) !important; }
#cart-modal .modal-content [style*="border-top"] { border-top-color: var(--hw-line) !important; }
.cart-empty-msg { color: var(--hw-soft); }
.cart-item { border-bottom-color: var(--hw-line); }
.cart-item-title { color: var(--hw-cream); }
.cart-item-price { color: var(--hw-soft); }
.qty-btn { background: #2A1D35; color: var(--hw-cream); }
.qty-btn:hover { background: var(--hw-line); }
.remove-btn { color: #ff9a8a; }

/* ---------- Pie de página ---------- */
footer {
    position: relative;
    overflow: hidden;
    background: var(--secondary);
    color: var(--hw-soft);
    border-top: 1px solid var(--hw-line);
}
footer::before {
    content: '';
    position: absolute; left: -10px; bottom: -14px;
    width: 72px; height: 72px;
    background: var(--ic-web) no-repeat center / contain;
    opacity: .85; pointer-events: none;
}

/* ---------- Botón de ayuda y popup promocional ---------- */
.tutorial-flotante { background-color: #1A0F24; border-color: var(--accent); }
.tutorial-flotante .icono-info { color: var(--accent); }
.tutorial-flotante:hover { background-color: var(--accent); border-color: var(--accent); }
.tutorial-flotante:hover .icono-info { color: #140B1B; }

.faded-popup { background-color: rgba(29, 17, 39, .92); border-color: var(--accent); }
.close-promo { color: var(--hw-cream); }
.promo-header p { color: var(--hw-soft); }
.promo-item { background: #140B1B; border-color: var(--hw-line); }
.promo-item:hover { border-color: var(--accent); }
.promo-item-info h4 { color: var(--hw-cream); }

/* ---------- Móvil ---------- */
@media (max-width: 850px) {
    .collection-box { padding: 0; }
    .collection-box .product-image-container { height: 190px; }
    .collection-box .product-title { font-size: 15px; padding: 40px 8px 10px; }
    .collection-box::after { width: 20px; height: 20px; right: 10px; bottom: 10px; }

    .mobile-bottom-nav {
        background: #1A0F24;
        border-top: 1px solid var(--hw-line);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .5);
    }
    .bottom-nav-item { color: #A98BD0; }
    .bottom-nav-item[href*="ofertas"] { color: var(--accent) !important; }
    .mobile-badge { background: var(--accent); color: #140B1B; }
}