/* ============================================== */
/* 1. Paleta de Colores y Variables CSS */
/* ============================================== */
:root {
    /* Colores primarios de la Clínica Guaranda Sana */
    --color-green: #4CAF50;     /* Verde principal (Salud y Bienestar) */
    --color-blue: #4d80dd;      /* Azul principal (Confianza y Profesionalismo) */
    --color-red: #E53935;       /* Rojo para Urgencias y alertas */
    
    /* Variaciones de colores */
    --color-green-dark: #388E3C; 
    --color-blue-dark: #1976D2;  
    
    /* Colores Neutros */
    --color-gray-900: #111827; /* Gris oscuro para texto principal */
    --color-gray-700: #374151; /* Gris medio para párrafos */
    --color-gray-100: #F3F4F6; /* Gris claro para fondos secundarios */
    --color-blue-900: #0d3483; /* azul claro para fondos secundarios */
}

/* ============================================== */
/* 2. Clases de Color Personalizadas (Reemplazando Tailwind) */
/* NOTA: Estas clases se usan cuando no se puede usar la configuración de Tailwind */
/* ============================================== */

/* Textos */
.text-primary-green { color: var(--color-green); }
.text-primary-blue { color: var(--color-blue); }
.text-danger-red { color: var(--color-red); }

/* Fondos */
.bg-primary-green { background-color: var(--color-green); }
.bg-primary-blue { background-color: var(--color-blue); }
.bg-danger-red { background-color: var(--color-red); }

/* Efectos Hover */
.hover\:bg-primary-green-dark:hover { background-color: var(--color-green-dark); }
.hover\:bg-primary-blue-dark:hover { background-color: var(--color-blue-dark); }


/* ============================================== */
/* 3. Estilos CRÍTICOS para el Carrusel (FADE EFFECT) */
/* ============================================== */

/* Contenedor del Carrusel */
/* --- CSS CRÍTICO PARA EL CARRUSEL DESLIZANTE (SLIDE) --- */

/* 1. Contenedor de slides: Permite la fila horizontal de imágenes */
#slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Velocidad de la animación de deslizamiento */
    width: 500%; /* CLAVE: 100% * número de slides (3 slides * 100% = 300%) */
    height: 100%;
}

/* 2. Cada slide: Ocupa exactamente el 100% del ancho visible */
.slider-slide {
    width: calc(100% / 5); /* Ancho del track / número de slides */
    flex-shrink: 0; /* Evita que el slide se encoja */
    height: 100%;
    position: relative;
}

/* 3. Botones de navegación (Flechas) */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    padding: 1rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border-radius: 50%;
    transition: background 0.2s;
    /* Tailwind ya tiene las clases para el icono, pero estas son esenciales */
}
#prev-slide { left: 1rem; }
#next-slide { right: 1rem; }