/* 1. CONFIGURACIÓN DE VARIABLES Y FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400&display=swap');

:root {
    --cian: #12b1de;
    --vino: #7d344d;
    --blanco: #ffffff;
    --sombra: 0 10px 30px rgba(0,0,0,0.1);
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Roboto', sans-serif; 
    overflow-x: hidden;
    background-color: var(--blanco);
}

/* --- 2. HEADER Y NAVEGACIÓN (CORREGIDO) --- */
.header-principal {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 0 5%; 
    background: var(--blanco); 
    height: 80px;
    position: sticky; /* Se queda fijo al bajar */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logo-img { max-height: 55px; }

.navegacion ul { 
    display: flex; 
    list-style: none; 
    gap: 30px; 
    align-items: center;
}

/* Estilo de letra: Morado y Montserrat */
.navegacion a { 
    text-decoration: none !important; 
    color: var(--vino) !important; /* Empieza en Morado */
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
    font-size: 16px;
    transition: 0.3s;
    border-bottom: none !important; /* Sin líneas */
}

/* Efecto de Iluminación: Al pasar el cursor cambia a Azul */
.navegacion a:hover, 
.navegacion a.active { 
    color: var(--cian) !important; /* Cambia a Azul */
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Botón de Donar */
.btn-donar { 
    background: var(--vino) !important; 
    color: white !important; 
    padding: 10px 22px !important; 
    border-radius: 30px !important; 
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    transition: 0.3s;
    display: inline-block;
}

.btn-donar:hover {
    background: var(--cian) !important;
    color: white !important;
}

/* --- 3. SECCIÓN SLIDER TRAYECTORIA --- */
.trayectoria-completa { 
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--blanco); 
}

.slider-master-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.mascara-slider { 
    width: 100%; 
    height: 100%;
    overflow: hidden; 
}

.riel-movil { 
    display: flex; 
    height: 100%;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); 
}

.tarjeta-item { 
    min-width: 100vw; 
    height: 100%;
}

.tarjeta-cuerpo { 
    display: flex; 
    width: 100%; 
    height: 100%;
}

/* Columna de Texto */
.columna-info { 
    width: 40%; 
    height: 100%;
    background: var(--blanco); 
    padding: 40px 5%; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    text-align: left;
    z-index: 100;
    opacity: 0;
    transform: translateX(-30px);
    transition: 1s ease-out;
}

.anio-destacado { 
    font-size: 5.5rem; 
    font-weight: bold; 
    color: var(--cian); 
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
}

.columna-info h3 {
    margin-bottom: 20px;
    color: var(--vino);
    font-size: 1.7rem; 
    line-height: 1.2;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.columna-info p {
    color: #444;
    line-height: 1.7;
    font-size: 1.05rem; 
    max-width: 95%; 
}

/* Columna de Fotos */
.columna-foto { 
    width: 60%; 
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.columna-foto img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0; 
    transition: 1.5s ease; 
}

/* --- 4. ANIMACIONES Y CONTROLES --- */
.tarjeta-item.activa .columna-info { 
    opacity: 1; 
    transform: translateX(0);
}

.tarjeta-item.activa .columna-foto img { 
    animation: animacionFade 12s infinite; 
}

.tarjeta-item.activa .columna-foto img:nth-child(1) { animation-delay: 0s; }
.tarjeta-item.activa .columna-foto img:nth-child(2) { animation-delay: 4s; }
.tarjeta-item.activa .columna-foto img:nth-child(3) { animation-delay: 8s; }

@keyframes animacionFade {
    0% { opacity: 0; }
    8% { opacity: 1; }
    33% { opacity: 1; }
    41% { opacity: 0; }
    100% { opacity: 0; }
}

.control-flecha {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    background: var(--blanco); 
    border: none; 
    color: var(--cian); 
    width: 55px; 
    height: 55px;
    border-radius: 50%; 
    cursor: pointer; 
    z-index: 1000; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: 0.3s;
}

.control-flecha:hover {
    background: var(--cian);
    color: white;
}

.prev { left: 25px; } 
.next { right: 25px; }

/* --- 5. RESPONSIVE --- */
@media (max-width: 992px) {
    .header-principal { height: auto; padding: 15px 5%; flex-direction: column; gap: 10px; }
    .navegacion ul { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .tarjeta-cuerpo { flex-direction: column; }
    .columna-info, .columna-foto { width: 100%; height: 50%; }
    .anio-destacado { font-size: 3.5rem; }
}