/* css/dia-de-muertos.css */
/* Tema Día de Muertos: colores morado/amarillo + calaveritas decorativas */

:root {
    --primary-color: #FFD923;    /* Amarillo vibrante */
    --secondary-color: #6A1B9A;  /* Morado profundo */
    --accent-color: #E91E63;     /* Rosa mexicano */
    --text-color: #212529;
    --bg-color: #ffffff;
}

/* --- HEADER --- */
.main-header {
    background-color: var(--secondary-color);
    border-bottom: 5px solid var(--primary-color);
}

.main-nav a {
    color: #ffffff;
}

.main-nav a:hover {
    color: var(--primary-color);
}

.logo img {
    filter: brightness(0) invert(1);
}

.dropdown-content {
    background-color: rgba(255, 255, 255, 0.97);
    border: 2px solid var(--secondary-color);
}

.dropdown-content a {
    color: var(--secondary-color);
}

.dropdown-content a:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color) !important;
}

/* --- RIBBON --- */
.ribbon-section {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #8E24AA 100%);
    border: 3px solid var(--primary-color);
    box-shadow: 0 6px 12px rgba(106, 27, 154, 0.4);
}

.ribbon-title {
    color: var(--primary-color);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.35);
    letter-spacing: 1px;
}

.download-menu-link {
    color: #ffffff;
}

.download-menu-link:hover {
    color: var(--primary-color);
}

/* --- FORMULARIOS Y BOTONES --- */
.newsletter-form button {
    background-color: var(--accent-color);
    color: #ffffff;
}

.newsletter-form button:hover {
    background-color: #C2185B;
}

/* --- FOOTER --- */
.main-footer {
    background-color: var(--secondary-color);
    color: #ffffff;
}

.footer-info a,
.footer-copyright a {
    color: var(--primary-color);
}

.footer-socials a {
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.footer-socials a:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* --- BOTONES FIJOS --- */
.order-online-sticky {
    background-color: var(--accent-color);
    color: #ffffff;
}

.order-online-sticky:hover {
    background-color: #C2185B;
}

.scroll-to-top {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.scroll-to-top:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* --- SECCIONES tipo pill con borde festivo --- */
.carousel-section,
.banner-section,
.multi-image-banner-section,
.slider-section {
    border: 3px solid var(--primary-color);
    box-shadow: 0 6px 12px rgba(106, 27, 154, 0.25);
}

/* ============================================================
   CALAVERITAS CAYENDO (decorativas, no interfieren con clics)
   ============================================================ */
#dia-muertos-fx {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* No bloquea clics */
    z-index: 9998;          /* Por debajo de botones fijos (999) pero por encima del contenido */
    overflow: hidden;
}

.calaverita-falling {
    position: absolute;
    top: -80px;
    width: 48px;
    height: 48px;
    background-image: url('../media/seasonal/calaverita.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.75;
    animation-name: calaverita-caer;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes calaverita-caer {
    0% {
        transform: translateY(-10px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.75;
    }
    90% {
        opacity: 0.75;
    }
    100% {
        transform: translateY(110vh) translateX(30px) rotate(180deg);
        opacity: 0;
    }
}