/* =========================================
   ESTILOS PARA EL SLIDER AUTOMÁTICO
========================================= */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 310px; /* <--- Añade esto para restringir el ancho máximo en PC (puedes probar con 350px o 400px en lugar de ocupar toda la columna) */
    margin: 0 auto;    /* <--- Esto centra el slider si le pones un ancho menor */
    aspect-ratio: 9/ 13.5; /* <--- Aquí puedes cambiar la proporción (si lo quieres más horizontal, usa 16/9; si lo quieres más cuadrado o chico, ajusta esto) */
    overflow: hidden;
    border-radius: 6px;
    border: 5px solid rgba(212, 175, 55, 0.3);
    background-color: #112240;
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Botones de navegación manual opcionales (atrás / adelante) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(5, 16, 36, 0.6);
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 50%;
    transition: background 0.3s;
    z-index: 10;
}

.slider-btn:hover {
    background-color: rgba(212, 175, 55, 0.8);
    color: #02060f;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Puntos indicadores abajo */
.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #D4AF37;
}