/* Hero Title Fix - Lácteos Leo */
/* Archivo específico para asegurar el tamaño correcto del título */

/* Forzar el tamaño del título principal */
.hero-titulo-elegante,
#hero-heading,
h1.hero-titulo-elegante {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
    font-family: 'Playfair Display', serif !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Forzar el tamaño en computadoras */
@media (min-width: 769px) {
    .hero-titulo-elegante,
    #hero-heading,
    h1.hero-titulo-elegante {
        font-size: clamp(2.2rem, 5vw, 4rem) !important;
    }
}

/* Forzar el tamaño en tablets */
@media (max-width: 768px) {
    .hero-titulo-elegante,
    #hero-heading,
    h1.hero-titulo-elegante {
        font-size: clamp(2.3rem, 5vw, 3.5rem) !important;
    }
}

/* Forzar el tamaño en smartphones */
@media (max-width: 480px) {
    .hero-titulo-elegante,
    #hero-heading,
    h1.hero-titulo-elegante {
        font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
        line-height: 1.3 !important;
    }
}

/* Forzar el tamaño en móviles pequeños */
@media (max-width: 360px) {
    .hero-titulo-elegante,
    #hero-heading,
    h1.hero-titulo-elegante {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important;
    }
}

/* Forzar el tamaño en pantallas muy grandes */
@media (min-width: 1600px) {
    .hero-titulo-elegante,
    #hero-heading,
    h1.hero-titulo-elegante {
        font-size: clamp(2.5rem, 4vw, 5rem) !important;
    }
}

/* Asegurar que no haya conflictos con otros estilos */
.hero-titulo-elegante *,
#hero-heading *,
h1.hero-titulo-elegante * {
    font-size: inherit !important;
    font-family: inherit !important;
}

/* ===== ESTILOS PARA TODO EL HERO SECTION ===== */

/* Subtítulo del hero */
.hero-subtitulo {
    font-size: clamp(0.8rem, 2vw, 1.2rem) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    opacity: 0.95 !important;
}

/* Botones del hero */
.btn {
    font-size: 0.75rem !important;
    padding: 0.7rem 1.5rem !important;
    min-width: 160px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Características del hero */
.feature {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.feature i {
    font-size: 1rem !important;
    color: #FFD700 !important;
}

/* Espaciado general del hero */
.hero-text-container {
    gap: 1.5rem !important;
    padding: 1.5rem !important;
}

.hero-buttons {
    gap: 1rem !important;
}

.hero-features {
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
}

/* Responsive para todo el hero */
@media (min-width: 769px) {
    .hero-subtitulo {
        font-size: clamp(0.7rem, 1.8vw, 1rem) !important;
    }
    
    .btn {
        font-size: 0.7rem !important;
        padding: 0.6rem 1.3rem !important;
        min-width: 150px !important;
    }
    
    .feature {
        font-size: 0.7rem !important;
    }
    
    .feature i {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 768px) {
    .hero-subtitulo {
        font-size: clamp(0.75rem, 1.8vw, 1rem) !important;
    }
    
    .btn {
        font-size: 0.7rem !important;
        padding: 0.6rem 1.2rem !important;
        min-width: 140px !important;
    }
    
    .feature {
        font-size: 0.7rem !important;
    }
    
    .hero-text-container {
        gap: 1.25rem !important;
        padding: 1.25rem !important;
    }
}

@media (max-width: 480px) {
    .hero-subtitulo {
        font-size: clamp(0.7rem, 1.6vw, 0.9rem) !important;
    }
    
    .btn {
        font-size: 0.65rem !important;
        padding: 0.5rem 1rem !important;
        min-width: 120px !important;
    }
    
    .feature {
        font-size: 0.65rem !important;
    }
    
    .hero-text-container {
        gap: 1rem !important;
        padding: 1rem !important;
    }
    
    .hero-buttons {
        gap: 0.75rem !important;
    }
    
    .hero-features {
        gap: 1rem !important;
        margin-top: 1rem !important;
    }
}