@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Beau+Rivage&family=Petit+Formal+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root { 
    --crema: #EDEEE9; 
    --marron: #3d2b1f;
}

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

.titulo-historia {
    font-family: "Beau Rivage", cursive;
    font-size: clamp(3rem, 8vw, 5rem);
    margin-bottom: 20px;
}

.texto-mision, .foto-caption {
    font-family: "Petit Formal Script", cursive;
    font-size: clamp(1rem, 3vw, 1.2rem);
}

.aboreto-style, .navbar-brand, .btn, .form-label, .form-select, .form-control, h2, h3, h5 { 
    font-family: "Aboreto", system-ui; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.texto-reflexivo {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
    padding: 0 15px;
}

.logo-central-animado {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto 30px auto;
    animation: latidoFlotante 4s ease-in-out infinite;
    filter: drop-shadow(0px 10px 15px rgba(61, 43, 31, 0.4));
}

@keyframes latidoFlotante {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-15px) scale(1.03); }
    100% { transform: translateY(0px) scale(1); }
}

.imagen-animada, .video-animado {
    border-radius: 12px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
    box-shadow: 0 4px 8px rgba(61, 43, 31, 0.1);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.imagen-animada:hover, .video-animado:hover {
    transform: scale(1.08) translateY(-10px);
    box-shadow: 0 15px 30px rgba(61, 43, 31, 0.5);
    z-index: 2;
    position: relative;
}

.timeline-img, .timeline-video { 
    transition: all 0.4s ease; 
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    cursor: pointer;
}

.timeline-img:hover, .timeline-video:hover { 
    transform: scale(1.1);
    box-shadow: 0 15px 25px rgba(0,0,0,0.4);
}

.timeline-container { 
    overflow-x: auto;
    display: flex; 
    gap: 20px;
    padding: 30px 10px; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.timeline-container::-webkit-scrollbar { 
    display: none; 
}

.glass-caption {
    background: rgba(61, 43, 31, 0.8);
    backdrop-filter: blur(5px);
    padding: 10px;
    border-radius: 0 0 12px 12px;
}

.admin-card {
    border-radius: 15px;
    border: none;
}

.btn-glass {
    background: var(--marron);
    color: var(--crema);
    border: 1px solid var(--marron);
    transition: all 0.3s;
}

.btn-glass:hover {
    background: transparent;
    color: var(--marron);
}