@charset "utf-8";
/* CSS Document */

/*
//----------------------//
Estructura del estilos de Slide
Generales 
*/

.hero-slide-section {
	width:100%; height: 450px;
}


.slide-content {
	width: 100%; height: 450px; 
	/*max-width: 1200px;*/
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	margin: 0;
}

.slide-wrapper {

	display: flex; 
    transition: transform 0.5s ease-in-out; /* Debe ser 0.5s */
	cursor: grab;

}

.slide-wrapper.transition-on {
    transition: transform 0.5s ease-in-out; 
}

.slide-wrapper .dragging {
	cursor: grabbing;
	transition: none;
}

.slide {
	flex: 0 0 100%;
	width: 100%; height: 450px;
	display: flex;
	flex-direction: column; justify-content: center;
	align-items: center; user-select: none; 
}

 .slide-1 { background: linear-gradient(135deg, #4c004c, #990099); }
 .slide-2 { background: linear-gradient(135deg, #007bff, #00c6ff); }
 .slide-3 { background: linear-gradient(135deg, #ff5722, #ffcc00); }
 .slide-4 { background: linear-gradient(135deg, #4caf50, #8bc34a); }


.partner-content .slide-wrapper {
    /* Usamos la clase general .slide-wrapper */
	cursor: grab;
}

.partner-slide {
	/* CADA SLIDE DE PARTNER */
    /* Hacemos que cada slide ocupe el 25% del viewport para mostrar 4 a la vez */
	flex: 0 0 25%;
	width: 25%; 
    height: 150px; /* Igual al alto del contenedor */
	display: flex;
    background-color: #ffffff;
    border-right: 1px solid #eee; /* Separador sutil entre logos */
    
	flex-direction: column; justify-content: center;
	align-items: center; user-select: none; 
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
	box-sizing: border-box;
	margin: 0 10px;
}


.nav-button {
	position: absolute; top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.4);
    color: white; border: none;
    padding: 10px 15px; cursor: pointer;
    z-index: 1;
    font-size: 1.5rem;
    line-height: 1; border-radius: 50%;
    transition: background 0.3s;
    display: flex;
    align-items: center; justify-content: center;
}

 .nav-button:hover {
    background: rgba(0, 0, 0, 0.7);
 }

 .prev-button { 
            left: 20px; 
            right: auto; /* Asegura que 'right' no interfiera */
        }

 .next-button { 
            right: 20px; 
            left: auto; /* Asegura que 'left' no interfiera y se ancle a la derecha */
        }

.slide-dots-container {
            position: absolute;
            bottom: 20px !important; /* FORZAMOS el anclaje a 20px del borde inferior */
            top: auto !important; /* ANULAMOS la regla 'top: 0px' de la regla universal '*' */
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            display: flex;
            gap: 8px; /* Espacio entre los dots */
        }

        /* Estilo de cada Dot (Cuadrado) */
.slide-dot {
            width: 12px;
            height: 12px;
            background-color: rgba(255, 255, 255, 0.5); /* Color blanco semi-transparente */
            border-radius: 2px; /* Ligeramente redondeado para ser un "cuadrado" suave */
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }

        /* Estilo del Dot Activo */
.slide-dot.active {
            background-color: white;
            transform: scale(1.2); /* Se agranda un poco para destacarse */
        }

/* Ajustes de botones y dots para el carrusel de partners */

.partner-content .nav-button {
    /* Mismos estilos generales, pero ajustamos la posición vertical */
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    font-size: 1.2rem;
}

.partner-content .slide-dots-container {
    /* Ocultamos los dots en este carrusel ya que muestra 4 slides y se vería extraño */
    display: none; 
}