@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400&display=swap');

/* Configuración de Tailwind para colores personalizados */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-black text-white font-roboto;
  }
}

/* Fuentes personalizadas */
.font-playfair {
    font-family: 'Playfair Display', serif;
}
.font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* Colores personalizados */
.text-gold-500 {
    color: #D4AF37; /* Un tono dorado elegante */
}
.border-gold-500 {
    border-color: #D4AF37;
}
.hover\:bg-gold-500:hover {
    background-color: #D4AF37;
}
.text-gold-400 {
    color: #E6C66A;
}

/* Estilos de la barra de navegación */
#navbar {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 50; /* Asegura que la barra esté siempre por encima */
}

.nav-link {
    position: relative;
    transition: color 0.3s;
    color: black; /* Texto negro para contraste */
    font-size: 1.2rem; /* Aumentar tamaño del texto */
    font-weight: 600; /* Hacer texto más grueso y legible */
}

.nav-link:hover {
    color: #D4AF37; /* Dorado al pasar el ratón */
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #D4AF37;
    transition: width 0.3s ease-out;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

/* Estilos para menú móvil */
.nav-mobile-link {
    position: relative;
    transition: color 0.3s;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    font-size: 1.1rem; /* Aumentar tamaño del texto */
    font-weight: 500; /* Hacer texto más grueso */
}

.nav-mobile-link:hover {
    color: #D4AF37;
}

.nav-mobile-link.active {
    color: #D4AF37;
    border-bottom-color: #D4AF37;
}

/* Animaciones */
@keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-down {
    animation: fade-in-down 1s ease-out forwards;
}

.animate-fade-in-up {
    animation: fade-in-up 1s ease-out forwards;
    animation-delay: 0.3s; /* Pequeño retraso para un efecto escalonado */
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Estilos para la imagen Parallax */
#parallax-image {
    filter: grayscale(100%);
    transition: opacity 0.3s linear; /* Transición suave solo para la opacidad */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ajustar espaciado en móviles */
    .py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* Mejorar legibilidad en textos largos */
    .text-xs {
        line-height: 1.4;
    }
    
    /* Ajustar grid en móviles */
    .grid.md\:grid-cols-2 {
        gap: 2rem;
    }
    
    /* Botones más grandes en móviles */
    .border-2 {
        border-width: 3px;
    }
    
    .py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    .px-10 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 480px) {
    /* Ajustes extra para pantallas muy pequeñas */
    h1 {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    .text-sm {
        font-size: 0.875rem;
    }
    
    .text-xs {
        font-size: 0.75rem;
    }
}