/* Estilos responsivos adicionales para corregir problemas en dispositivos móviles */

/* Solución agresiva para evitar desbordamiento horizontal en TODA la página */
@media screen and (max-width: 768px) {
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
/* Quita fondo y borde del logo/nombre en móvil */
@media (max-width: 768px) {
  .flex.items-center.space-x-2.py-2.flex-shrink-0,
  .flex.items-center.space-x-2.py-2.flex-shrink-0 h1,
  .flex.items-center.space-x-2.py-2.flex-shrink-0 a {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
}

    /* Forzar que el hero y todos sus elementos respeten el ancho */
    .hero-section,
    .hero-section *,
    [class*="hero"] {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Ajustes para el encabezado en dispositivos móviles */
@media (max-width: 768px) {
    /* Ajustar el menú a la pantalla móvil */
    header.sticky {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
    }
    
    /* Mejorar el espaciado y la legibilidad en el menú móvil */
    #mobile-menu {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    #mobile-menu a {
        padding: 0.75rem 0.5rem !important;
        display: block !important;
        font-size: 1rem !important;
    }
    
    /* Corregir problemas de overlapping del logo */
    .flex.items-center.space-x-2 h1 {
        font-size: 1.25rem !important;
        max-width: 70% !important;
    }
}

/* Solucionar el problema del Hero que tapa las características */
@media (max-width: 640px) {
    /* SOLUCIÓN DIRECTA: Forzar que NADA se salga del ancho de pantalla */
    .hero-section, .hero-section * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Ajustar el espaciado y la posición del Hero */
    section.relative.h-96, .hero-section {
        height: 450px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Contenedor principal del hero */
    .hero-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin: 0 !important;
    }
    
    /* Contenido del hero */
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hacer los chips de información más visibles y que no se salgan del ancho */
    .hero-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Asegurar que los contadores son visibles y no se salen del ancho */
    .stat-card {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        margin: 0 1rem !important;
        padding: 0.75rem 1rem !important;
        background-color: rgba(255, 255, 255, 0.25) !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    /* Hacer que el contenido interno se ajuste */
    .stat-content {
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        font-size: 0.9rem !important;
        flex-wrap: nowrap !important;
    }
    
    /* Ajustar tamaños de texto */
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Ajustar la sección de filtro para que no se superponga */
    .bg-white.rounded-lg.shadow-md.p-6.-mt-10 {
        margin-top: 0 !important;
    }
}

/* Ajustes específicos para pantallas muy pequeñas */
@media (max-width: 380px) {
    /* Optimizar el logo para pantallas muy pequeñas */
    .flex.items-center.space-x-2 h1 {
        font-size: 1rem !important;
        max-width: 60% !important;
    }
    
    /* Ajustar el espacio del hero en pantallas muy pequeñas */
    .hero-section {
        height: 480px !important;
    }
    
    /* Hacer que los rectángulos de estadísticas sean aún más compactos */
    .stat-card {
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        margin: 0 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    .stat-content {
        gap: 0.25rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Reducir el título para pantallas muy pequeñas */
    .hero-title {
        font-size: 1.4rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Iconos más pequeños en pantallas muy pequeñas */
    .stat-card svg {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }
    
    /* Reducir el espaciado del contenedor principal */
    .hero-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Estilo para solucionar solapamiento de etiquetas */
.relative.container.mx-auto.px-4.h-full.flex.items-center {
    z-index: 1 !important;
}

/* Estilos adicionales para evitar desbordamiento horizontal */
@media (max-width: 768px) {
    /* Asegurar que ningún elemento se salga del viewport */
    .hero-section * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Forzar que el contenedor padre respete el ancho de pantalla */
    .hero-section .relative.container.mx-auto.px-4.h-full.flex.items-center {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Asegurar que las estadísticas nunca causen scroll horizontal */
    .hero-stats {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Estilos específicos para el contenido del hero */
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }
    
    .hero-container {
        width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Estilos específicos para el contenido de las estadísticas */
    .stat-content {
        justify-content: center !important;
        align-items: center !important;
        gap: 0.25rem !important;
        flex-wrap: nowrap !important;
    }
    
    .stat-number, .stat-label {
        font-size: 0.875rem !important;
        white-space: nowrap !important;
    }
}