/* === GLOBAL.CSS === */
/* Estilos generales, fuentes y estructura base del slider */

/* --- Importación de Fuentes --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300&display=swap');

/* --- Variables Globales --- */
:root {
    --color-yellow: #F2E96B;
    --color-dark-blue: #0A2628;
    --color-background: #FDFCEC;
    --animation-duration: 0.8s;
}

/* --- Reseteo Básico y Estilos del Body --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-background);
    color: var(--color-dark-blue);
    overflow: hidden; 
}

/* --- Estructura General del Slider --- */
#slide-viewer {
    width: 100vw;
    height: 100vh;
    transition: opacity 0.3s ease-in-out;
}

.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 2.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.slide-inner-content {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.slide-header, .slide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.slide-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- Flechas de Navegación Base --- */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
    color: var(--color-dark-blue); /* Color por defecto */
}
.arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}
.next-arrow { right: 2.5rem; }
.prev-arrow { left: 2.5rem; }

/* --- Animación Base --- */
.anim-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
}
.slide.active .anim-item {
    opacity: 1;
    transform: translateY(0);
}