/* ==============================================================================
   ETB HOME CAROUSEL STYLES - REFACTORED
   Consolidated carousel-specific styles only
   Variables and base styles are in design-system.css
   Hero and card base styles are in home.css
   ============================================================================== */

/* ===== CAROUSEL-SPECIFIC VARIABLES ===== */
:root {
    /* Carousel dimensions - Figma specs */
    --carousel-center-width: 635px;
    --carousel-center-height: 400px;
    --carousel-side-width: 438px;
    --carousel-side-height: 300px;
    --carousel-gap: 12px;
    --carousel-transition: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================================================================
   CAROUSEL WRAPPER & CONTAINER
   ============================================================================== */

.carousel-wrapper-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.carousel-container-home {
    overflow: hidden;
    position: relative;
}

/* ==============================================================================
   CAROUSEL TRACKS
   ============================================================================== */

.carousel-track-hogar,
.carousel-track-mobile,
.beneficios-carousel-track {
    display: flex;
    transition: transform var(--carousel-transition);
    gap: var(--carousel-gap);
    padding: 25px 0;
    align-items: center;
}

/* ==============================================================================
   CAROUSEL CARD WRAPPERS
   ============================================================================== */

.carousel-card-hogar-home,
.carousel-card-mobile-home,
.carousel-card-beneficio-home {
    flex-shrink: 0;
    width: var(--carousel-side-width);
    height: var(--carousel-side-height);
    transition: all var(--carousel-transition);
}

.carousel-card-hogar-home.active,
.carousel-card-mobile-home.active,
.carousel-card-beneficio-home.active {
    width: var(--carousel-center-width);
    height: var(--carousel-center-height);
}

/* ==============================================================================
   NAVIGATION BUTTONS
   ============================================================================== */

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--etb-white, #FFFFFF);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 200ms ease;
}

.carousel-nav-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1.05);
}

.carousel-nav-btn svg {
    color: var(--etb-cyan, #0092BC);
    width: 24px;
    height: 24px;
}

.carousel-nav-btn:hover svg {
    color: var(--etb-blue-deep, #214780);
}

.carousel-nav-prev {
    left: -24px;
}

.carousel-nav-next {
    right: -24px;
}

/* ==============================================================================
   CAROUSEL DOTS
   ============================================================================== */

.carousel-dots-home {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 35px;
}

/* Inactive dots - 10px diameter circular */
.dot-home {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--etb-neutral-25, #D5D5D5);
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
    padding: 0;
}

.dot-home:hover {
    background: var(--etb-neutral-50, #A8A8A8);
}

/* Active dots - 28px width x 10px height elongated */
.dot-home.active {
    background: var(--etb-cyan, #0092BC);
    width: 28px;
    height: 10px;
    border-radius: 5px;
}

/* ==============================================================================
   RESPONSIVE - CAROUSEL SPECIFIC
   ============================================================================== */

@media (max-width: 1024px) {
    :root {
        --carousel-center-width: 500px;
        --carousel-center-height: 320px;
        --carousel-side-width: 350px;
        --carousel-side-height: 240px;
    }
    
    .carousel-wrapper-home {
        padding: 0 40px;
    }
    
    .carousel-nav-btn {
        width: 44px;
        height: 44px;
    }
    
    .carousel-nav-prev {
        left: 0;
    }
    
    .carousel-nav-next {
        right: 0;
    }
}

@media (max-width: 768px) {
    :root {
        --carousel-center-width: 85vw;
        --carousel-center-height: 320px;
        --carousel-side-width: 75vw;
        --carousel-side-height: 280px;
    }
    
    .carousel-wrapper-home {
        padding: 0 50px;
    }
    
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .carousel-nav-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .carousel-nav-prev {
        left: 5px;
    }
    
    .carousel-nav-next {
        right: 5px;
    }
    
    .carousel-dots-home {
        margin-top: 25px;
    }
}

@media (max-width: 480px) {
    :root {
        --carousel-center-width: 90vw;
        --carousel-center-height: 300px;
        --carousel-side-width: 85vw;
        --carousel-side-height: 280px;
    }
    
    .carousel-wrapper-home {
        padding: 0 40px;
    }
    
    .carousel-nav-btn {
        width: 36px;
        height: 36px;
    }
}