/* Variables de color */
:root {
    --titulo: #5C4635;
    --subtitulo: #978667;
    --texto: #4A3B2A;
    --botonbg: #B38E5D;
    --botonbg-hover: #C9A678;
    --enlace: #A1743B;
    --enlace-hover: #8C5E32;
    --fondo-claro: #E5D5BE;
    --fondo-oscuro: #3B2A1A;
}

/* Animaciones y efectos base */
.slide-animated {
    opacity: 0;
    transform: translateY(30px);
}

.slide-animated.one {
    animation: fadeInUp 1s ease forwards;
}

.slide-animated.two {
    animation: fadeInUp 1s ease forwards 0.3s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efectos de parallax y overlays */
.jarallax {
    position: relative;
    z-index: 0;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(59, 42, 26, 0.4), rgba(59, 42, 26, 0.7));
    z-index: 1;
}

/* Estilos de texto personalizados */
h2 {
    color: var(--titulo);
}

h3, h4 {
    color: var(--subtitulo);
}

.recorrido p {
    color: var(--texto);
}

/* Efectos de hover y transiciones */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Efecto diagonal para secciones */
.diagonal-bg {
    position: relative;
    overflow: hidden;
}

.diagonal-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--fondo-claro);
    transform: skewY(-12deg);
    transform-origin: 100%;
    z-index: -1;
    opacity: 0.3;
}

/* Estilos para botones */
.btn-custom {
    background-color: var(--botonbg);
    color: white;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    background-color: var(--botonbg-hover);
    transform: translateY(-2px);
}

/* Estilos para enlaces */
.recorrido a {
    color: var(--enlace);
    transition: color 0.3s ease;
}

.recorrido a:hover {
    color: var(--enlace-hover);
}

/* Efectos para iconos */
.icon {
    color: var(--subtitulo);
    transition: transform 0.3s ease;
}

.icon:hover {
    transform: scale(1.2);
}

/* Efectos para imágenes */
.img-hover {
    transition: transform 0.6s ease;
    overflow: hidden;
}

.img-hover:hover img {
    transform: scale(1.1);
}

/* Fondos con gradientes */
.gradient-bg {
    background: linear-gradient(135deg, var(--fondo-claro), white);
}

/* Media queries */
@media (max-width: 768px) {
    .diagonal-bg::before {
        transform: skewY(-8deg);
    }
    
    .slide-animated.two {
        animation-delay: 0.2s;
    }
}


/* Animaciones hero */
.slide-animated {
    opacity: 0;
    transform: translateY(30px);
}

.slide-animated.one {
    animation: fadeInUp 1s ease forwards;
}

.slide-animated.two {
    animation: fadeInUp 1s ease forwards 0.3s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efectos Parallax */
.jarallax {
    position: relative;
    z-index: 0;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(59, 42, 26, 0.4), rgba(59, 42, 26, 0.7));
    z-index: 1;
}


/* Estilos para la galería */
.gallery-carousel .gallery-item {
    padding: 10px;
}

.gallery-carousel .gallery-item img {
    transition: transform 0.3s ease;
}

.gallery-carousel .gallery-item:hover img {
    transform: scale(1.05);
}

/* Personalización de flechas del Owl Carousel */
.gallery-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}

.gallery-carousel .owl-nav button {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    pointer-events: auto;
}

.gallery-carousel .owl-nav button.owl-prev {
    left: -20px;
}

.gallery-carousel .owl-nav button.owl-next {
    right: -20px;
}

.gallery-carousel .owl-nav button span {
    font-size: 24px;
    color: #5C4635;
    line-height: 1;
}

/* Personalización de dots del Owl Carousel */
.gallery-carousel .owl-dots {
    margin-top: 20px;
}

.gallery-carousel .owl-dots .owl-dot span {
    background: #D1C4B7;
    transition: all 0.3s ease;
}

.gallery-carousel .owl-dots .owl-dot.active span,
.gallery-carousel .owl-dots .owl-dot:hover span {
    background: #5C4635;
}

/* Timeline Animations */
.timeline-content {
    transition: all 0.6s ease;
}

.timeline-content.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.timeline-item .w-5 {
    transition: all 0.3s ease;
}

.timeline-item .w-5.active {
    transform: scale(1.2);
    background-color: #C9A678;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .timeline-content {
        text-align: left !important;
        padding-left: 2rem !important;
        transform: translateX(0) !important;
    }
    
    .slide-animated.two {
        animation-delay: 0.2s;
    }

    .timeline-item .relative {
        margin-left: 2rem;
    }
}


/* Modal */