/* ==========================================
   GUIA DE RECICLATGE - SPECIFIC STYLES
   ========================================== */

.headerSection img {
    max-height: 500px !important;
    margin-bottom: -4rem;
    width: auto;
    max-width: 75%;
}

/* ==========================================
   SI/NO CARDS - Tarjetas SÍ y NO
   ========================================== */
.si-no-card {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.si-no-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Altura uniforme para cards SÍ/NO en cada sección */
.organicaSection .row:has(.si-no-card),
.envasosSection .row:has(.si-no-card),
.paperSection .row:has(.si-no-card),
.vidreSection .row:has(.si-no-card) {
    display: flex;
    flex-wrap: wrap;
}

.organicaSection .row:has(.si-no-card) > [class*="col-"],
.envasosSection .row:has(.si-no-card) > [class*="col-"],
.paperSection .row:has(.si-no-card) > [class*="col-"],
.vidreSection .row:has(.si-no-card) > [class*="col-"] {
    display: flex;
}

.si-no-card.height-100 {
    flex: 1;
    width: 100%;
}

/* Lista con estilo */
.list-styled {
    list-style: disc;
    padding-left: 1.5rem;
}

.list-styled li {
    position: relative;
}

/* ==========================================
   CONTACT ICON - Iconos SVG en tarjetas
   ========================================== */
.contact-icon {
    width: 40px;
    height: 40px;
    stroke: #333;
    color: #333;
}

/* ==========================================
   BENEFIT CARDS - Tarjetas de ubicación
   ========================================== */
.benefit-card {
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   RESIDUOS ESPECIALES - Fondo decorativo
   ========================================== */
.specialsSection--voluminosos-bg {
    background-image: url('../assets/images/voluminosos.png');
    background-image: image-set(
        url('../assets/images/voluminosos.webp') type('image/webp'),
        url('../assets/images/voluminosos.png') type('image/png')
    );
    height: 39em;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: min(560px, 92%);
    padding-bottom: 20rem;
}

@media (max-width: 767px) {
    .specialsSection--voluminosos-bg {
        background-size: min(420px, 95%);
        padding-bottom: 14rem;
    }
}

/* ==========================================
   AVIS CARDS - Tarjetas de aviso/consejo
   ========================================== */
.avis-card {
    transition: all 0.3s ease;
}

/* ==========================================
   CONTACTE CARD - Tarjeta de contacto
   ========================================== */
.contacte-card {
    transition: all 0.3s ease;
}

.contacte-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   ECOPARC MOBIL CARD - Tarjeta con ubicación y horario
   ========================================== */
.ecoparc-mobil-card {
    transition: all 0.3s ease;
}

.ecoparc-mobil-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.ecoparc-mobil-card [class*="col-md"][onclick] {
    cursor: pointer;
}

.ecoparc-mobil-card .icon-circle {
    transition: transform 0.3s ease;
}

.ecoparc-mobil-card:hover .icon-circle {
    transform: scale(1.05);
}

/* ==========================================
   PUNTS NETS LOCATIONS - Hover animaciones
   ========================================== */
.puntsNetsSection .ecoparc-mobil-card [class*="col-md"] {
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.puntsNetsSection .ecoparc-mobil-card [class*="col-md"]:hover {
    background-color: #f9f9f9;
}

.puntsNetsSection .ecoparc-mobil-card [class*="col-md"] .icon-circle {
    transition: transform 0.3s ease;
}

.puntsNetsSection .ecoparc-mobil-card [class*="col-md"]:hover .icon-circle {
    transform: scale(1.1);
}

@media (max-width: 767px) {
    .ecoparc-mobil-card .col-md-6 {
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .ecoparc-mobil-card .col-md-6:last-child {
        border-bottom: none;
    }
}

/* ==========================================
   LAYOUT HELPERS
   ========================================== */
.height-100 {
    height: 100%;
}

/* ==========================================
   WEEKLY SCHEDULE - Calendario semanal Recicladora
   ========================================== */
.weekly-schedule {
    transition: all 0.3s ease;
}

.weekly-schedule:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.weekly-schedule .schedule-day {
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.weekly-schedule .schedule-day:hover {
    background-color: #f9f9f9;
}

.weekly-schedule .day-badge {
    transition: transform 0.3s ease;
}

.weekly-schedule .schedule-day:hover .day-badge {
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .weekly-schedule .row {
        flex-wrap: wrap !important;
    }
    
    .weekly-schedule .schedule-day {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .weekly-schedule .schedule-day:nth-child(even) {
        border-right: none !important;
    }
    
    .weekly-schedule .schedule-day:nth-child(5) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: none;
    }
}

@media (max-width: 575px) {
    .weekly-schedule .schedule-day {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border-right: none !important;
    }
    
    .weekly-schedule .schedule-day:last-child {
        border-bottom: none;
    }
}

/* ==========================================
   ECOPARC BUTTON
   ========================================== */
.btn-ecoparc {
    background-color: #333 !important;
    color: #fff !important;
    border: 2px solid #333 !important;
    padding: 14px 36px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn-ecoparc::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-ecoparc:hover {
    background-color: #B9DCA3 !important;
    border-color: #B9DCA3 !important;
    color: #333 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-ecoparc:hover::before {
    left: 100%;
}

.btn-ecoparc:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .contact-icon {
        width: 35px;
        height: 35px;
    }

    .btn-ecoparc {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 18px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        text-transform: none !important;
    }
}