/* ===============================================
   UBIVET MOBILE GAMING CSS - VERSIÓN ORGANIZADA
   =============================================== */

/* ===== TABLA DE CONTENIDOS =====
   1. Reset Desktop - Layout Original
   2. Sistema Mobile Gaming - Layout Compacto
   3. Secciones Específicas - Veterinarios
   4. Secciones Específicas - Clínicas  
   5. Secciones Específicas - Empresas
   6. Área de Descripción Gaming
   7. Optimizaciones Landscape Móvil
   8. Utilidades y Helpers
*/

/* ===== 1. RESET DESKTOP - LAYOUT ORIGINAL ===== */
@media (min-width: 768px) {
    /* Restaurar grid desktop */
    .grid.lg\:grid-cols-3,
    section .grid.lg\:grid-cols-3,
    div .grid.lg\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 3rem !important;
    }
    
    /* Restaurar orders desktop */
    .order-2.lg\:order-1 {
        order: 1 !important;
        grid-column: 1 !important;
    }
    
    .order-1.lg\:order-2 {
        order: 2 !important;
        grid-column: 2 !important;
    }
    
    /* Mostrar columna derecha en desktop */
    .order-3 {
        order: 3 !important;
        grid-column: 3 !important;
        display: block !important;
    }
    
    /* Restaurar botones desktop */
    .responsive-button-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        max-width: none !important;
        width: 100% !important;
    }
    
    .phone-nav-button {
        min-height: auto !important;
        max-height: none !important;
        width: 100% !important;
        padding: 1.5rem !important;
        text-align: left !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 2px solid transparent !important;
        border-radius: 1.5rem !important;
        box-shadow: none !important;
        display: block !important;
        transition: all 0.3s ease !important;
    }
    
    .phone-nav-button:hover {
        border-color: #4ECDC4 !important;
        transform: scale(1.05) !important;
    }
    
    .phone-nav-button .w-12.h-12 {
        width: 3rem !important;
        height: 3rem !important;
        margin-right: 1rem !important;
        background: #4ECDC4 !important;
        border-radius: 0.75rem !important;
    }
    
    .phone-nav-button h3,
    .phone-nav-button p {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .phone-nav-button .flex.items-center {
        flex-direction: row !important;
        margin-bottom: 0.75rem !important;
        display: flex !important;
    }
    
    /* Asegurar que los iconos se muestren correctamente en desktop */
    .phone-nav-button .w-12.h-12 svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
        color: white !important;
        display: block !important;
    }
    
    /* Forzar layout desktop en todas las resoluciones >= 768px */
    section#veterinarios .phone-nav-button,
    section#clinicas .phone-nav-button,
    section#empresas .phone-nav-button {
        min-height: auto !important;
        max-height: none !important;
        width: 100% !important;
        padding: 1.5rem !important;
        text-align: left !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* Contraste específico para secciones con fondo oscuro */
    section#veterinarios .phone-nav-button.active,
    section#empresas .phone-nav-button.active {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: #4ECDC4 !important;
        box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4) !important;
    }
}

/* ===== 2. SISTEMA MOBILE GAMING - LAYOUT COMPACTO ===== */
@media (max-width: 767px) {
    /* Mejoras para el logo en móvil */
    nav .flex.items-center img[alt="UbiVet Logo"] {
        height: 2.75rem !important;
        max-width: none !important;
        object-fit: contain !important;
        margin-left: 0.25rem !important;
    }
    
    /* Ajustar altura del navbar en móvil */
    nav .flex.justify-between.items-center {
        height: 4.25rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Logo en sidebar móvil */
    aside img[alt="UbiVet Logo"] {
        height: 2.75rem !important;
        max-width: none !important;
        object-fit: contain !important;
    }
    
    /* Reducir espaciado general en móvil */
    .mb-20 {
        margin-bottom: 3rem !important;
    }
    
    .mb-16 {
        margin-bottom: 2rem !important;
    }
    
    /* FORZAR Layout principal móvil - BOTONES A LOS LADOS - SOLO TUTORES */
    section#tutores .grid.lg\:grid-cols-3 {
        position: relative !important;
        width: 100% !important;
        min-height: 550px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* FORZAR Botones izquierda - posicionamiento absoluto - SOLO TUTORES */
    section#tutores .order-2.lg\:order-1 {
        position: absolute !important;
        left: calc(50% - 200px) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 55px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        z-index: 3 !important;
        align-items: center !important;
    }
    
    /* FORZAR Celular centro - centrado absoluto - SOLO TUTORES */
    section#tutores .order-1.lg\:order-2 {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 1 !important;
        width: auto !important;
    }
    
    /* Asegurar centrado del phone mockup */
    .phone-mockup {
        margin: 0 auto !important;
        display: block !important;
        position: relative !important;
    }
    
    /* MOSTRAR columna derecha en móvil también - posicionamiento absoluto - SOLO TUTORES */
    section#tutores .order-3.responsive-button-grid {
        position: absolute !important;
        left: calc(50% + 145px) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 55px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        z-index: 3 !important;
        align-items: center !important;
    }
    
    /* FORZAR Grid de botones gaming - VERTICAL COMPACTO */
    .responsive-button-grid,
    section .responsive-button-grid,
    div .responsive-button-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 55px !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* OVERRIDE cualquier space-y */
    .space-y-6,
    section .space-y-6,
    div .space-y-6 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
    }
    
    .space-y-6 > *,
    section .space-y-6 > *,
    div .space-y-6 > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Estilo botones gaming - ÁREA DE TOQUE OPTIMIZADA */
    .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        padding: 0.75rem !important;
        text-align: center !important;
        border-radius: 0.75rem !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%) !important;
        border: 2px solid rgba(78, 205, 196, 0.3) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        box-sizing: border-box !important;
    }

    
    .phone-nav-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3) !important;
        border-color: rgba(78, 205, 196, 0.5) !important;
    }
    
    .phone-nav-button.active {
        background: linear-gradient(135deg, #4ECDC4 0%, #2BB8B1 100%) !important;
        border-color: #2BB8B1 !important;
        transform: scale(1) !important;
        box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4) !important;
    }
    
    .phone-nav-button.active h3 {
        color: white !important;
    }
    
    /* Layout interno del botón - SOLO ICONO, SIN INTERCEPTAR CLICKS */
    .phone-nav-button .flex.items-center {
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important; /* El contenedor flex no intercepta clicks */
    }
    
    /* Iconos gaming - COMPACTOS CON ÁREA DE TOQUE EXPANDIDA */
    .phone-nav-button .w-12.h-12 {
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin: 0 !important;
        border-radius: 0.25rem !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important; /* El ícono no intercepta clicks */
    }
    
    .phone-nav-button.active .w-12.h-12 {
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* SVG dentro del icono - SIN INTERCEPTAR CLICKS */
    .phone-nav-button .w-12.h-12 svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
        color: #4ECDC4 !important;
        pointer-events: none !important; /* El SVG no intercepta clicks */
    }
    
    .phone-nav-button.active .w-12.h-12 svg {
        color: white !important;
    }
    
    /* Ocultar todo el texto */
    .phone-nav-button h3,
    .phone-nav-button p {
        display: none !important;
    }
}

/* Ajustes para pantallas muy pequeñas - SOLO TUTORES */
@media (max-width: 360px) {
    section#tutores .order-2.lg\:order-1 {
        left: calc(50% - 130px) !important;
    }
    
    section#tutores .order-3.responsive-button-grid {
        left: calc(50% + 75px) !important;
    }
    
    section#tutores .phone-mockup {
        width: 200px !important;
        height: 400px !important;
    }
}

@media (max-width: 320px) {
    section#tutores .order-2.lg\:order-1 {
        left: calc(50% - 110px) !important;
    }
    
    section#tutores .order-3.responsive-button-grid {
        left: calc(50% + 55px) !important;
    }
    
    section#tutores .phone-mockup {
        width: 180px !important;
        height: 360px !important;
    }
}

/* ===== 3. SECCIONES ESPECÍFICAS - TUTORES ===== */
@media (max-width: 767px) {
    /* TUTORES - Forzar botones gaming con área de toque optimizada y z-index sobre flotantes */
    section#tutores .order-2.lg\:order-1 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }

    section#tutores .order-3 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }

    /* Prevenir interceptación de clicks en elementos hijos */
    section#tutores .phone-nav-button .w-12.h-12 {
        pointer-events: none !important;
    }

    section#tutores .phone-nav-button .w-12.h-12 svg {
        pointer-events: none !important;
    }

    section#tutores .phone-nav-button .flex.items-center {
        pointer-events: none !important;
    }

    /* CRÍTICO: Últimos dos botones con z-index MÁS ALTO que botones flotantes (z-50) */
    section#tutores .order-3 .phone-nav-button[data-destination="tutorItem5"],
    section#tutores .order-3 .phone-nav-button[data-destination="tutorItem6"] {
        z-index: 9999 !important; /* Más alto que z-50 de botones flotantes */
        position: relative !important;
        isolation: isolate !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
    }

    /* Asegurar que los contenedores de botones también tengan prioridad sobre flotantes */
    section#tutores .order-2.lg\:order-1,
    section#tutores .order-3.responsive-button-grid {
        z-index: 9997 !important;
        isolation: isolate !important;
    }


}

/* ===== 4. SECCIONES ESPECÍFICAS - VETERINARIOS ===== */
@media (max-width: 767px) {
    /* LAYOUT ESPECÍFICO PARA VETERINARIOS - Gaming Style */
    section#veterinarios .grid.lg\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Botones superiores en veterinarios - Gaming cuadraditos */
    section#veterinarios .order-2.lg\:order-1 {
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 200px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Forzar botones gaming en veterinarios superiores */
    section#veterinarios .order-2.lg\:order-1 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }
    
    /* MacBook centro en veterinarios - Centrado perfecto */
    section#veterinarios .order-1.lg\:order-2 {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        transition: all 0.3s ease !important;
    }
    
    /* Centrar MacBook mockup */
    section#veterinarios .order-1.lg\:order-2 .laptop-mockup {
        margin: 0 auto !important;
        transform: scale(0.9) !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Botones inferiores en veterinarios - Gaming cuadraditos */
    section#veterinarios .order-3 {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 200px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Forzar botones gaming en veterinarios inferiores */
    section#veterinarios .order-3 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }

}

/* ===== 5. SECCIONES ESPECÍFICAS - CLÍNICAS ===== */
@media (max-width: 767px) {
    /* Grid principal de clínicas */
    section#clinicas .grid.lg\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Botones superiores en clínicas - Gaming cuadraditos */
    section#clinicas .order-2.lg\:order-1 {
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 200px !important;
    }
    
    /* Forzar botones gaming en clínicas superiores */
    section#clinicas .order-2.lg\:order-1 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }
    
    /* MacBook centro en clínicas - Centrado perfecto */
    section#clinicas .order-1.lg\:order-2 {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Centrar MacBook mockup */
    section#clinicas .order-1.lg\:order-2 .laptop-mockup {
        margin: 0 auto !important;
        transform: scale(0.9) !important;
    }
    
    /* Botones inferiores en clínicas - Gaming cuadraditos */
    section#clinicas .order-3 {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 200px !important;
    }
    
    /* Forzar botones gaming en clínicas inferiores */
    section#clinicas .order-3 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }

}

/* ===== 6. SECCIONES ESPECÍFICAS - EMPRESAS ===== */
@media (max-width: 767px) {
    /* Grid principal de empresas */
    section#empresas .grid.lg\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Botones superiores en empresas - Gaming cuadraditos */
    section#empresas .order-2.lg\:order-1 {
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 200px !important;
    }
    
    /* Forzar botones gaming en empresas superiores */
    section#empresas .order-2.lg\:order-1 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }
    
    /* MacBook centro en empresas - Centrado perfecto */
    section#empresas .order-1.lg\:order-2 {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Centrar MacBook mockup */
    section#empresas .order-1.lg\:order-2 .laptop-mockup {
        margin: 0 auto !important;
        transform: scale(0.9) !important;
    }
    
    /* Botones inferiores en empresas - Gaming cuadraditos */
    section#empresas .order-3 {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 200px !important;
    }
    
    /* Forzar botones gaming en empresas inferiores */
    section#empresas .order-3 .phone-nav-button {
        min-height: 60px !important;
        max-height: 60px !important;
        width: 60px !important;
        margin: 0 !important;
        z-index: 9998 !important; /* Sobre botones flotantes z-50 */
        position: relative !important;
    }

}

/* ===== 7. ÁREA DE DESCRIPCIÓN GAMING ===== */
@media (max-width: 767px) {
    .description-area {
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.98) 100%) !important;
        border-radius: 1.25rem !important;
        padding: 1.5rem !important;
        margin-top: 2rem !important;
        border: 2px solid rgba(78, 205, 196, 0.4) !important;
        min-height: 90px !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 6px 24px rgba(0,0,0,0.15) !important;
        backdrop-filter: blur(12px) !important;
    }
    
    .description-area:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 30px rgba(78, 205, 196, 0.25) !important;
        border-color: rgba(78, 205, 196, 0.6) !important;
    }

    /* Descripción específica para veterinarios - fondo teal */
    section#veterinarios .description-area {
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.98) 100%) !important;
        color: #1f2937 !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    section#veterinarios .description-area h4 {
        color: #1f2937 !important;
    }
    
    section#veterinarios .description-area p {
        color: #4b5563 !important;
    }
    
    section#veterinarios .description-area .w-10.h-10 {
        background: rgba(78, 205, 196, 0.9) !important;
    }
    
    section#veterinarios .description-area:hover {
        box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Descripción específica para empresas - fondo teal */
    section#empresas .description-area {
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.98) 100%) !important;
        color: #1f2937 !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    section#empresas .description-area h4 {
        color: #1f2937 !important;
    }
    
    section#empresas .description-area p {
        color: #4b5563 !important;
    }
    
    section#empresas .description-area .w-10.h-10 {
        background: rgba(78, 205, 196, 0.9) !important;
    }
    
    section#empresas .description-area:hover {
        box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }
}

/* ===== 8. OPTIMIZACIONES LANDSCAPE MÓVIL ===== */
@media (max-width: 926px) and (orientation: landscape) {
    /* Reducir spacing vertical para aprovechar altura limitada */
    .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .mb-20 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-16 {
        margin-bottom: 1rem !important;
    }
    
    /* Ajustar títulos principales */
    section h2 {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    section p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Layout específico para secciones con laptop en landscape */
    section#veterinarios .grid.lg\:grid-cols-3,
    section#clinicas .grid.lg\:grid-cols-3,
    section#empresas .grid.lg\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr 2fr 1fr !important;
        gap: 1rem !important;
        align-items: center !important;
        padding: 0 0.5rem !important;
    }
    
    /* Botones más compactos en landscape */
    section#veterinarios .order-2.lg\:order-1,
    section#clinicas .order-2.lg\:order-1,
    section#empresas .order-2.lg\:order-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.3rem !important;
        max-width: none !important;
    }
    
    section#veterinarios .order-3,
    section#clinicas .order-3,
    section#empresas .order-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.3rem !important;
        max-width: none !important;
    }
    
    /* Botones gaming para landscape - TAMAÑO MÍNIMO MANTENIDO */
    .phone-nav-button {
        min-height: 48px !important;
        max-height: 48px !important;
        width: 48px !important;
        padding: 0.5rem !important;
    }
    
    .phone-nav-button .w-12.h-12 {
        width: 1.2rem !important;
        height: 1.2rem !important;
    }
    
    .phone-nav-button .w-12.h-12 svg {
        width: 1.2rem !important;
        height: 1.2rem !important;
    }
    
    /* MacBook más compacto en landscape */
    section#veterinarios .order-1.lg\:order-2 .laptop-mockup,
    section#clinicas .order-1.lg\:order-2 .laptop-mockup,
    section#empresas .order-1.lg\:order-2 .laptop-mockup {
        transform: scale(0.75) !important;
        margin: -1rem 0 !important;
    }
    
    /* Descripción área más compacta */
    .description-area {
        padding: 1rem !important;
        margin-top: 1rem !important;
        min-height: 60px !important;
    }
    
    .description-area h4 {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .description-area p {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }
    
    .description-area .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    /* Hero section más compacto */
    .hero-content h2 {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Landscape específico para teléfonos pequeños */
@media (max-width: 740px) and (orientation: landscape) {
    /* Aún más compacto para teléfonos pequeños en landscape */
    .py-20 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    section h2 {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    section p {
        font-size: 0.85rem !important;
    }
    
    /* MacBook aún más pequeño */
    section#veterinarios .order-1.lg\:order-2 .laptop-mockup,
    section#clinicas .order-1.lg\:order-2 .laptop-mockup,
    section#empresas .order-1.lg\:order-2 .laptop-mockup {
        transform: scale(0.65) !important;
        margin: -1.5rem 0 !important;
    }
    
    /* Botones para pantallas muy pequeñas - TAMAÑO MÍNIMO SEGURO */
    .phone-nav-button {
        min-height: 44px !important;
        max-height: 44px !important;
        width: 44px !important;
    }
    
    .phone-nav-button .w-12.h-12 {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    .phone-nav-button .w-12.h-12 svg {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* ===== 9. UTILIDADES Y HELPERS ===== */
/* Optimización de rendimiento para móviles */
@media (max-width: 767px) {
    .phone-nav-button {
        will-change: transform;
        backface-visibility: hidden;
    }

    .description-area {
        will-change: transform, box-shadow;
        backface-visibility: hidden;
    }
}

/* ===== 10. MENÚ INFERIOR GLASSMORPHISM MODERNO ===== */

/* Solo mostrar en móvil */
@media (min-width: 768px) {
    #bottom-menu {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* Contenedor principal del menú glass - COMPACTO */
    .glass-menu-container {
        background: rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(16px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px 12px 0 0 !important;
        box-shadow:
            0 -8px 20px rgba(0, 0, 0, 0.06),
            0 -1px 0 rgba(255, 255, 255, 0.3) inset !important;
        padding-bottom: max(env(safe-area-inset-bottom, 8px), 8px) !important;
    }

    /* Items del menú glassmorphism - MÁS COMPACTOS */
    .glass-menu-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 3px 4px 3px !important;
        border-radius: 10px !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        position: relative !important;
        overflow: hidden !important;
        min-height: 50px !important;
        max-height: 50px !important;
        text-decoration: none !important;
    }

    .glass-menu-item:hover {
        transform: translateY(-1px) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.08),
            0 1px 0 rgba(255, 255, 255, 0.3) inset !important;
    }

    .glass-menu-item:active {
        transform: translateY(0px) scale(0.98) !important;
    }

    /* Contenedores de iconos - MÁS PEQUEÑOS */
    .glass-icon-container {
        width: 26px !important;
        height: 26px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 3px !important;
        box-shadow:
            0 3px 8px rgba(0, 0, 0, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
        position: relative !important;
        overflow: hidden !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .glass-icon-container i {
        font-size: 11px !important;
    }

    .glass-menu-item:hover .glass-icon-container {
        transform: scale(1.05) !important;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.15),
            0 1px 0 rgba(255, 255, 255, 0.3) inset !important;
    }

    /* Contenedor de texto - MÁS COMPACTO */
    .glass-text-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1.0 !important;
    }

    .glass-label {
        font-size: 7px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        line-height: 1.0 !important;
        margin-bottom: 1px !important;
        text-align: center !important;
        letter-spacing: 0.01em !important;
    }

    .glass-sublabel {
        font-size: 5.5px !important;
        font-weight: 500 !important;
        color: #6b7280 !important;
        line-height: 0.9 !important;
        text-align: center !important;
        max-width: 100% !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        letter-spacing: 0.005em !important;
    }

    /* Branding glassmorphism - COMPACTO */
    .glass-branding {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 4px !important;
        gap: 6px !important;
    }

    .glass-brand-line {
        width: 24px !important;
        height: 1.5px !important;
        background: linear-gradient(90deg, transparent 0%, rgba(78, 205, 196, 0.5) 50%, transparent 100%) !important;
        border-radius: 1px !important;
    }

    .glass-brand-dot {
        width: 3px !important;
        height: 3px !important;
        background: rgba(78, 205, 196, 0.7) !important;
        border-radius: 50% !important;
        box-shadow: 0 0 6px rgba(78, 205, 196, 0.3) !important;
    }

    /* Efectos específicos por categoría */
    .glass-menu-item[data-category="contact"]:hover {
        border-color: rgba(34, 197, 94, 0.3) !important;
    }

    .glass-menu-item[data-category="tutor"]:hover {
        border-color: rgba(107, 114, 128, 0.3) !important;
    }

    .glass-menu-item[data-category="professional"]:hover {
        border-color: rgba(78, 205, 196, 0.3) !important;
    }

    /* Asegurar que el menú no interfiera con botones interactivos */
    #bottom-menu {
        z-index: 40 !important; /* Menor que botones interactivos (9998) */
    }
}

/* ===============================================
   SIDEBAR GLASSMORPHISM FUSION
   =============================================== */
.sidebar-action-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(78, 205, 196, 0.05) !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    min-height: 60px !important;
}

.sidebar-action-item:hover {
    background: rgba(78, 205, 196, 0.08) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 8px 25px rgba(78, 205, 196, 0.15),
        0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

.sidebar-action-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg,
        rgba(78, 205, 196, 0.1) 0%,
        rgba(78, 205, 196, 0.05) 50%,
        rgba(78, 205, 196, 0.02) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.sidebar-action-item:hover::before {
    opacity: 1 !important;
}

.sidebar-icon-container {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    margin-bottom: 0px !important;
    position: relative !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
}

.sidebar-action-item:hover .sidebar-icon-container {
    transform: scale(1.1) rotate(3deg) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.sidebar-text-container {
    text-align: left !important;
    line-height: 1.2 !important;
    flex: 1 !important;
}

.sidebar-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.02em !important;
}

.sidebar-sublabel {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
}

/* Efectos específicos por categoría en sidebar */
.sidebar-action-item[data-category="contact"]:hover {
    border-color: rgba(34, 197, 94, 0.4) !important;
    background: rgba(34, 197, 94, 0.05) !important;
}

.sidebar-action-item[data-category="tutor"]:hover {
    border-color: rgba(107, 114, 128, 0.4) !important;
    background: rgba(107, 114, 128, 0.05) !important;
}

.sidebar-action-item[data-category="professional"]:hover {
    border-color: rgba(78, 205, 196, 0.4) !important;
    background: rgba(78, 205, 196, 0.08) !important;
}

/* ===============================================
   COMPACT ACTION BUTTONS - NAVIGATION HEADER
   =============================================== */
.compact-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 75px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.compact-action-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.compact-action-btn:hover::before {
    opacity: 1 !important;
}

.compact-action-btn:hover {
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.compact-action-btn:active {
    transform: translateY(0px) scale(0.95) !important;
}

/* Responsive - Solo visible en móvil */
@media (min-width: 768px) {
    .compact-action-btn {
        display: none !important;
    }
}

/* ===============================================
   MINI FLOATING MENU - INFERIOR DISCRETO
   =============================================== */
#floating-sidebar {
    animation: fadeInUp 0.8s ease-out 1s both;
    z-index: 20 !important; /* Menor que botones interactivos (9998) */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.floating-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    overflow: visible !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.floating-btn:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.2),
        0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.floating-btn i {
    font-size: 20px !important;
    color: white !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Colores específicos por botón */
.floating-btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}

.floating-btn-app {
    background: linear-gradient(135deg, #007AFF 0%, #005BB5 100%) !important;
}

.floating-btn-play {
    background: linear-gradient(135deg, #34A853 0%, #137333 100%) !important;
}

.floating-btn-register {
    background: linear-gradient(135deg, #4ECDC4 0%, #2BB8B1 100%) !important;
}

/* Tooltips elegantes - Aparecen arriba */
.floating-tooltip {
    position: absolute !important;
    bottom: 56px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    z-index: 25 !important;
}

.floating-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    border-top-color: rgba(255, 255, 255, 0.95) !important;
}

.floating-btn:hover .floating-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-8px) !important;
}

.tooltip-text {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    line-height: 1.2 !important;
}

.tooltip-subtext {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
}

/* Animación de entrada desde abajo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive - Ajustar en móviles */
@media (max-width: 480px) {
    #floating-sidebar {
        bottom: 20px !important;
        right: 16px !important;
    }

    .floating-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .floating-btn i {
        font-size: 18px !important;
    }

    .floating-tooltip {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }
}

/* Ocultar en pantallas muy pequeñas donde puede interferir */
@media (max-width: 360px) {
    #floating-sidebar {
        display: none !important;
    }
}