/* Colores y fuentes base */
:root {
    --color-primary: #BB2328; /* Rojo más intenso */
    --color-secondary: #FFD700; /* Amarillo dorado */
    --color-tertiary: #5D4037; /* Café oscuro */
}

/* Sombras personalizadas */
.shadow-custom-light {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.shadow-custom-medium {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.shadow-custom-strong {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

/* Estilos para el botón de WhatsApp flotante */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}

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

/* HERO SECTION - Fondo degradado */
.hero-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, #BB2328 100%); /* Mantener el degradado rojo para el texto */
    position: relative;
    overflow: hidden; /* Asegura que la imagen de fondo no se desborde */
}

/* Nueva clase para el fondo de imagen */
.hero-background-chiles {
    background-image: url('../img/chiles_pattern.png'); /* Ruta a tu imagen de chiles */
    background-size: cover; /* Cubre todo el área sin distorsionar */
    background-position: center; /* Centra la imagen */
    background-repeat: repeat; /* Repite la imagen para cubrir el fondo */
    opacity: 0.15; /* Ajusta la opacidad para que no opaque el texto */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Asegura que esté detrás del contenido y del degradado */
}

/* Estilos generales para el HTML */
html {
    scroll-behavior: smooth;
}

/* Clases de utilidad Tailwind CSS (si no estás usando un CDN o un archivo generado) */
/* Es buena práctica definir estas clases aquí si no tienes Tailwind compilado */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:bg-primary:hover { background-color: var(--color-primary); }

.text-secondary { color: var(--color-secondary); }
.bg-secondary { background-color: var(--color-secondary); }
.hover\:text-secondary:hover { color: var(--color-secondary); }
.hover\:bg-secondary:hover { background-color: var(--color-secondary); }

.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-open-sans { font-family: 'Open Sans', sans-serif; }