/* Fuentes de Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* Configuración de desplazamiento suave */
html, body {
    scroll-behavior: smooth;
    background-color: #3D2422; /* El color mahogany de tu marca */
}

/* Estilos personalizados del Hero con imagen de fondo */
.hero-gradient {
    background: linear-gradient(rgba(61, 36, 34, 0.9), rgba(61, 36, 34, 0.7)), 
                url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80&w=2070');
    background-size: cover;
    background-position: center;
}

/* Ajustes de transición para imágenes */
.img-grayscale {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.img-grayscale:hover {
    filter: grayscale(0%);
}

/* Scroll Reveal Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay utilitario para aparición escalonada */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }