/* UbiVet Responsive CSS */

/* Mobile First - Responsive mejorado */

/* OVERRIDE TAILWIND SPACE-Y */
.space-y-6 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.space-y-6 > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* LAYOUT MÓVIL: MOCKUP ARRIBA, BOTONES ABAJO EN GRID 2x2 */
@media (max-width: 767px) {
    /* Reorganizar grid principal */
    .grid.lg\\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    /* Mockup primero */
    .order-1.lg\\:order-2 {
        order: 1 !important;
    }
    
    /* Botones izquierdos segundo */
    .order-2.lg\\:order-1 {
        order: 2 !important;
    }
    
    /* Ocultar botones de la derecha SOLO en móvil */
    .order-3.responsive-button-grid {
        display: none !important;
    }
    
    /* Grid 2x2 para botones SOLO en mobile */
    .order-2.lg\\:order-1.responsive-button-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
        width: 100% !important;
    }
    
    /* BOTONES ESTILO GAMING COMPACTOS */
    .phone-nav-button {
        min-height: 85px !important;
        padding: 0.75rem 0.5rem !important;
        text-align: center !important;
        border-radius: 1rem !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%) !important;
        border: 2px solid rgba(78, 205, 196, 0.2) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .phone-nav-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px 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(0.98) !important;
    }
    
    .phone-nav-button.active h3 {
        color: white !important;
    }
    
    /* Fix para texto en botones on-dark-bg activos - texto teal oscuro sobre fondo blanco */
    .phone-nav-button.active.on-dark-bg h3 {
        color: #0f766e !important;
        font-weight: 700 !important;
    }
    
    .phone-nav-button .flex.items-center {
        flex-direction: column !important;
        margin-bottom: 0.5rem !important;
        gap: 0.375rem !important;
        width: 100% !important;
    }
    
    .phone-nav-button .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0.75rem !important;
        background: linear-gradient(135deg, #4ECDC4 0%, #2BB8B1 100%) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        flex-shrink: 0 !important;
    }
    
    .phone-nav-button.active .w-12.h-12 {
        background: rgba(255,255,255,0.2) !important;
    }
    
    /* Fix para botones on-dark-bg en móvil - icono con fondo teal oscuro */
    .phone-nav-button.active.on-dark-bg .w-12.h-12 {
        background: #2BB8B1 !important;
    }
    
    .phone-nav-button h3 {
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0 !important;
        font-weight: 600 !important;
        color: #374151 !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .phone-nav-button p {
        display: none !important;
    }
}

/* Área de descripción dinámica estilo gaming */
.description-area {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.98) 100%);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-top: 1.5rem;
    border: 2px solid rgba(78, 205, 196, 0.3);
    min-height: 80px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    backdrop-filter: blur(8px);
}

.description-area:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.2);
    border-color: rgba(78, 205, 196, 0.5);
}

@media (min-width: 768px) {
    .description-area {
        display: none !important;
    }
}

/* Base mobile styles (320px+) - Móviles muy pequeños */
.phone-mockup {
    width: 260px;
    height: 520px;
    margin: 0 auto;
    /* Mantener el filtro drop-shadow de desktop */
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.4));
}

/* Ajustes especiales para móviles muy pequeños */
@media (max-width: 374px) {
    .phone-nav-button {
        min-height: 90px;
        padding: 0.875rem;
    }
    
    .phone-nav-button h3 {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }
    
    .phone-nav-button p {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    .phone-nav-button .w-12.h-12 {
        width: 2.75rem;
        height: 2.75rem;
    }
    
    .phone-nav-button .flex.items-center {
        margin-bottom: 0.5rem;
    }
}

.phone-nav-button {
    padding: 1rem;
    margin-bottom: 0.5rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.phone-nav-button .flex.items-center {
    margin-bottom: 0.5rem;
}

.phone-nav-button .w-12.h-12 {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

.phone-nav-button h3 {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 600;
}

.phone-nav-button p {
    font-size: 0.875rem;
    line-height: 1.4;
    flex-grow: 1;
    color: #6b7280;
}

/* Grid 2 columnas para botones en mobile */
.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* DESKTOP: Layout vertical por columnas */
@media (min-width: 768px) {
    .responsive-button-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }
    
    .responsive-button-grid > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        flex: none !important;
    }
    
    /* Grid principal: mantener 3 columnas como veterinarios */
    .grid.lg\\:grid-cols-3 {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 3rem !important;
    }
    
    /* Asegurar orden correcto en todas las secciones */
    .order-2.lg\\:order-1 {
        order: 1 !important;
    }
    
    .order-1.lg\\:order-2 {
        order: 2 !important;
    }
    
    .order-3 {
        order: 3 !important;
    }
    
    /* Mostrar botones de la derecha en desktop */
    .order-3.responsive-button-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Botones desktop - estilo completo */
    .phone-nav-button {
        padding: 1.5rem !important;
        text-align: left !important;
        border-radius: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-height: auto !important;
    }
    
    .phone-nav-button .flex.items-center {
        flex-direction: row !important;
        margin-bottom: 0.75rem !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .phone-nav-button .w-12.h-12 {
        width: 3rem !important;
        height: 3rem !important;
        margin-right: 1rem !important;
        flex-shrink: 0 !important;
    }
    
    .phone-nav-button h3 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        text-align: left !important;
        max-width: none !important;
    }
    
    .phone-nav-button p {
        display: block !important;
        font-size: 0.875rem !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
    }
}

/* Phablets (375px+) */
@media (min-width: 375px) {
    .phone-mockup {
        width: 250px;
        height: 500px;
    }
    
    .phone-nav-button {
        padding: 1rem;
        min-height: 110px;
    }
    
    .phone-nav-button h3 {
        font-size: 0.875rem;
    }
    
    .phone-nav-button p {
        font-size: 0.75rem;
    }
}

/* Small tablets (480px+) */
@media (min-width: 480px) {
    .phone-mockup {
        width: 280px;
        height: 560px;
    }
    
    .phone-nav-button {
        padding: 1.25rem;
        min-height: 110px;
    }
    
    .phone-nav-button h3 {
        font-size: 1.1rem;
    }
    
    .phone-nav-button p {
        font-size: 0.95rem;
    }
    
    .responsive-button-grid {
        gap: 1.25rem !important;
    }
}

/* Tablets (768px+) */
@media (min-width: 768px) {
    .phone-mockup {
        width: 300px;
        height: 600px;
    }
    
    .button-grid {
        display: block;
    }
    
    .phone-nav-button {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    /* Espaciado optimizado para tablets */
    section {
        padding: 4rem 0;
    }
    
    h2 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* Better grid gap para tablets */
    .grid {
        gap: 2rem;
    }
}

/* Desktop pequeño (1024px+) */
@media (min-width: 1024px) {
    .phone-mockup {
        width: 320px;
        height: 640px;
    }
    
    .phone-nav-button {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .phone-nav-button h3 {
        font-size: 1.125rem;
    }
    
    .phone-nav-button p {
        font-size: 0.875rem;
    }
    
    /* === CONTACTO DESKTOP LAYOUT === */
    
    /* Grid 2 columnas en desktop */
    section[id="contacto"] .contact-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
        align-items: start !important;
    }
    
    /* Formulario a la izquierda */
    section[id="contacto"] .form-section {
        order: 1 !important;
        grid-column: 1 !important;
    }
    
    /* Descarga a la derecha */
    section[id="contacto"] .download-section {
        order: 2 !important;
        grid-column: 2 !important;
        margin-bottom: 0 !important;
    }
    
    /* App buttons verticales en desktop */
    section[id="contacto"] .download-section .flex {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Tamaños desktop para app buttons */
    section[id="contacto"] .download-section img {
        height: 3.5rem !important;
    }
    
    section[id="contacto"] .download-section .bg-black {
        height: 3.5rem !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Ajustes específicos por breakpoint */

/* Mobile (hasta 767px) - DEFINITIVO CON MÁXIMA PRIORIDAD */
@media (max-width: 767px) {
    /* Grid principal de 3 columnas a 1 columna - FORZAR */
    section .grid,
    section .grid.lg\:grid-cols-3,
    .grid.lg\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Reorganizar orden mobile - FORZAR */
    .order-2.lg\:order-1 {
        order: 1 !important;
    }
    
    .order-1.lg\:order-2 {
        order: 2 !important;
    }
    
    .order-3 {
        order: 3 !important;
    }
    
    /* Botones en grid 2x2 - FORZAR TODOS LOS SELECTORES */
    .space-y-6,
    .responsive-button-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Eliminar márgenes de Tailwind space-y - CRÍTICO */
    .space-y-6 > *,
    .responsive-button-grid > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Phone frame - mantener calidad de desktop */
    .phone-frame {
        padding: 6px;
        border-radius: 40px;
        /* Mantener gradientes y sombras de calidad */
        background: 
            linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 25%, #1a1a1a 50%, #0f0f0f 75%, #000 100%);
        box-shadow: 
            /* Bordes metálicos */
            inset 0 0 0 1px rgba(255,255,255,0.1),
            inset 0 0 0 2px rgba(0,0,0,0.8),
            inset 0 0 0 3px rgba(255,255,255,0.05),
            /* Sombras externas */
            0 0 15px rgba(0,0,0,0.6),
            0 3px 25px rgba(0,0,0,0.4);
    }
    
    /* Dynamic Island - mantener calidad */
    .phone-frame::before {
        width: 90px;
        height: 25px;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 18px;
        background: 
            linear-gradient(145deg, #000 0%, #1a1a1a 50%, #000 100%);
        box-shadow: 
            inset 0 1px 3px rgba(255,255,255,0.1),
            inset 0 -1px 3px rgba(0,0,0,0.9);
    }
    
    /* Cámara frontal */
    .phone-frame::after {
        width: 8px;
        height: 8px;
        top: 25px;
        left: calc(50% - 10px);
        background: 
            radial-gradient(circle at 30% 30%, rgba(100,100,255,0.3) 0%, #000 70%);
        border-radius: 50%;
        box-shadow: 
            inset 0 1px 2px rgba(255,255,255,0.2),
            0 0 3px rgba(0,0,0,0.8);
    }
    
    .phone-sensor {
        top: 28px;
        left: calc(50% + 8px);
        width: 5px;
        height: 5px;
    }
    
    /* Botones físicos - mantener calidad */
    .volume-up {
        top: 120px;
        height: 25px;
        width: 3px;
        left: -2px;
        background: linear-gradient(90deg, #666 0%, #333 50%, #111 100%);
        border-radius: 0 2px 2px 0;
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
    }
    
    .volume-down {
        top: 150px;
        height: 25px;
        width: 3px;
        left: -2px;
        background: linear-gradient(90deg, #666 0%, #333 50%, #111 100%);
        border-radius: 0 2px 2px 0;
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
    }
    
    .power-button {
        top: 135px;
        height: 35px;
        width: 3px;
        right: -2px;
        background: linear-gradient(90deg, #111 0%, #333 50%, #666 100%);
        border-radius: 2px 0 0 2px;
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
    }
    
    .speaker-grill {
        width: 40px;
        height: 3px;
        bottom: 15px;
        background: 
            linear-gradient(90deg, transparent 0%, #333 20%, #111 50%, #333 80%, transparent 100%);
        border-radius: 2px;
    }
    
    .phone-screen {
        border-radius: 35px;
        margin-top: 6px;
        /* Mantener gradientes y efectos de pantalla */
        background: 
            radial-gradient(circle at 50% 0%, rgba(255,255,255,0.1) 0%, transparent 50%),
            linear-gradient(180deg, #000 0%, #111  100%);
        box-shadow: 
            inset 0 2px 8px rgba(0,0,0,0.5),
            inset 0 -2px 8px rgba(0,0,0,0.3);
    }
    
    .phone-content-area {
        border-radius: 32px;
        overflow: hidden;
    }
    
    .screen-content {
        border-radius: 0;
    }
    
    /* Contenido pantalla optimizado */
    .screen-content .p-6 {
        padding: 0.75rem;
    }
    
    .screen-content h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .screen-content .text-sm {
        font-size: 0.75rem;
    }
    
    .screen-content .w-16 {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    .screen-content .space-y-3 {
        gap: 0.5rem;
    }
    
    /* Desactivar animaciones en mobile */
    .phone-frame {
        animation: none !important;
    }
    
    .phone-float-left, .phone-float-right {
        animation: none !important;
        transform: none !important;
    }
    
    /* === COLORES Y GRADIENTES - SECCIÓN DEFINITIVA === */
    
    /* Fondos de secciones principales */
    section[id="inicio"] {
        background: linear-gradient(135deg, #4ECDC4, #2BB8B1) !important;
        min-height: 100vh !important;
    }
    
    section[id="veterinarios"] {
        background: linear-gradient(to bottom right, #4ECDC4, #2BB8B1) !important;
    }
    
    section[id="tutores"] {
        background: linear-gradient(to bottom, #f8f9fa, white) !important;
    }
    
    section[id="clinicas"] {
        background: white !important;
    }
    
    section[id="contacto"] {
        background: #4ECDC4 !important;
        background-color: #4ECDC4 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 400px !important;
    }
    
    /* Gradientes específicos de clases */
    .bg-gradient-to-br.from-vet-teal.to-vet-teal-dark {
        background: linear-gradient(135deg, #4ECDC4, #2BB8B1) !important;
    }
    
    .bg-gradient-to-b.from-gray-50.to-white {
        background: linear-gradient(180deg, #f8f9fa, white) !important;
    }
    
    .bg-gradient-to-r.from-vet-teal\/5.to-vet-teal\/10 {
        background: linear-gradient(90deg, rgba(78, 205, 196, 0.05), rgba(78, 205, 196, 0.1)) !important;
    }
    
    /* Gradientes universales */
    .bg-gradient-to-r {
        background-image: linear-gradient(90deg, var(--tw-gradient-stops)) !important;
    }
    
    .bg-gradient-to-br {
        background-image: linear-gradient(135deg, var(--tw-gradient-stops)) !important;
    }
    
    .bg-gradient-to-b {
        background-image: linear-gradient(180deg, var(--tw-gradient-stops)) !important;
    }
    
    /* Screen content gradientes */
    .screen-content.bg-gradient-to-br.from-vet-teal.to-vet-teal-dark {
        background: linear-gradient(135deg, #4ECDC4, #2BB8B1) !important;
    }
    
    .screen-content.bg-gradient-to-br.from-blue-500.to-blue-600 {
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    }
    
    .screen-content.bg-gradient-to-br.from-purple-500.to-purple-600 {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    }
    
    .screen-content.bg-gradient-to-br.from-green-500.to-green-600 {
        background: linear-gradient(135deg, #10b981, #059669) !important;
    }
    
    .screen-content.bg-gradient-to-br.from-orange-500.to-orange-600 {
        background: linear-gradient(135deg, #f97316, #ea580c) !important;
    }
    
    /* Colores de botones activos */
    .phone-nav-button.active {
        background: rgba(78, 205, 196, 0.1) !important;
        border-color: #4ECDC4 !important;
        box-shadow: 0 8px 25px rgba(78, 205, 196, 0.3) !important;
    }
    
    .phone-nav-button.active.on-dark-bg {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: #2BB8B1 !important;
        box-shadow: 0 8px 25px rgba(43, 184, 177, 0.5) !important;
    }
    
    /* Colores de acento */
    .bg-vet-teal {
        background-color: #4ECDC4 !important;
    }
    
    .text-vet-teal {
        color: #4ECDC4 !important;
    }
    
    .border-vet-teal {
        border-color: #4ECDC4 !important;
    }
    
    .hover\:border-vet-teal:hover {
        border-color: #4ECDC4 !important;
    }
    
    /* Navigation mobile */
    nav .h-16 {
        height: 3.5rem !important;
    }
    
    nav img {
        height: 2rem !important;
    }
    
    /* === SECCIÓN CONTACTO MOBILE === */
    
    /* Container principal - layout apilado en mobile */
    section[id="contacto"] .contact-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Download section - primera en mobile */
    section[id="contacto"] .download-section {
        order: 1 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Form section - segunda en mobile */
    section[id="contacto"] .form-section {
        order: 2 !important;
    }
    
    /* App store buttons en fila horizontal en mobile */
    section[id="contacto"] .download-section .flex {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1rem !important;
        flex-wrap: nowrap !important;
    }
    
    /* Formulario responsive */
    section[id="contacto"] .form-section {
        padding: 1.5rem !important;
        margin-bottom: 0 !important;
    }
    
    section[id="contacto"] input,
    section[id="contacto"] textarea {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.5rem !important;
    }
    
    section[id="contacto"] button {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }
    
    section[id="contacto"] label {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* App store buttons compactos en mobile */
    section[id="contacto"] .download-section img {
        height: 2.75rem !important;
        width: auto !important;
    }
    
    section[id="contacto"] .download-section .bg-black {
        height: 2.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Títulos contacto mobile */
    section[id="contacto"] h2 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    section[id="contacto"] h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Textos contacto mobile */
    section[id="contacto"] p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Información de contacto mobile */
    section[id="contacto"] .border-t {
        margin-top: 1.5rem !important;
        padding-top: 1.5rem !important;
    }
    
    /* Ocultar ilustraciones en mobile */
    section[id="contacto"] .absolute img {
        display: none !important;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .phone-frame {
        padding: 6px;
        border-radius: 35px;
    }
    
    /* Dynamic Island tablet */
    .phone-frame::before {
        width: 90px;
        height: 28px;
        top: 18px;
        border-radius: 18px;
    }
    
    .phone-frame::after {
        width: 9px;
        height: 9px;
        top: 27px;
        left: calc(50% - 18px);
    }
    
    .phone-sensor {
        top: 29px;
        left: calc(50% + 10px);
        width: 5px;
        height: 5px;
    }
    
    /* Botones tablet */
    .volume-up, .volume-down {
        width: 3px;
        height: 22px;
        left: -1.5px;
    }
    
    .volume-down {
        top: 140px;
    }
    
    .power-button {
        width: 3px;
        height: 30px;
        right: -1.5px;
        top: 125px;
    }
    
    .speaker-grill {
        width: 45px;
        height: 3px;
        bottom: 18px;
    }
    
    .phone-screen {
        border-radius: 30px;
    }
    
    .phone-content-area, .screen-content {
        border-radius: 30px;
    }
    
    /* IMPORTANTE: Estilos para botones en rango tablet - evitar círculos blancos */
    section#veterinarios .phone-nav-button,
    section#clinicas .phone-nav-button,
    section#empresas .phone-nav-button,
    section#tutores .phone-nav-button,
    .responsive-button-grid .phone-nav-button,
    .space-y-6 .phone-nav-button {
        min-height: auto !important;
        max-height: none !important;
        width: 100% !important;
        padding: 1.25rem !important;
        text-align: left !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 2px solid transparent !important;
        border-radius: 1.25rem !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        transition: all 0.3s ease !important;
    }
    
    section#veterinarios .phone-nav-button:hover,
    section#clinicas .phone-nav-button:hover,
    section#empresas .phone-nav-button:hover,
    section#tutores .phone-nav-button:hover,
    .responsive-button-grid .phone-nav-button:hover,
    .space-y-6 .phone-nav-button:hover {
        border-color: #4ECDC4 !important;
        transform: scale(1.03) !important;
    }
    
    section#veterinarios .phone-nav-button .w-12.h-12,
    section#clinicas .phone-nav-button .w-12.h-12,
    section#empresas .phone-nav-button .w-12.h-12,
    section#tutores .phone-nav-button .w-12.h-12,
    .responsive-button-grid .phone-nav-button .w-12.h-12,
    .space-y-6 .phone-nav-button .w-12.h-12 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin-right: 1rem !important;
        background: #4ECDC4 !important;
        border-radius: 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    section#veterinarios .phone-nav-button h3,
    section#clinicas .phone-nav-button h3,
    section#empresas .phone-nav-button h3,
    section#tutores .phone-nav-button h3,
    .responsive-button-grid .phone-nav-button h3,
    .space-y-6 .phone-nav-button h3,
    section#veterinarios .phone-nav-button p,
    section#clinicas .phone-nav-button p,
    section#empresas .phone-nav-button p,
    section#tutores .phone-nav-button p,
    .responsive-button-grid .phone-nav-button p,
    .space-y-6 .phone-nav-button p {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    section#veterinarios .phone-nav-button h3,
    section#clinicas .phone-nav-button h3,
    section#empresas .phone-nav-button h3,
    section#tutores .phone-nav-button h3,
    .responsive-button-grid .phone-nav-button h3,
    .space-y-6 .phone-nav-button h3 {
        font-size: 1rem !important;
        font-weight: bold !important;
        color: #1f2937 !important;
        margin-bottom: 0.25rem !important;
    }
    
    section#veterinarios .phone-nav-button p,
    section#clinicas .phone-nav-button p,
    section#empresas .phone-nav-button p,
    section#tutores .phone-nav-button p,
    .responsive-button-grid .phone-nav-button p,
    .space-y-6 .phone-nav-button p {
        font-size: 0.875rem !important;
        color: #4b5563 !important;
        line-height: 1.4 !important;
    }
    
    section#veterinarios .phone-nav-button .flex.items-center,
    section#clinicas .phone-nav-button .flex.items-center,
    section#empresas .phone-nav-button .flex.items-center,
    section#tutores .phone-nav-button .flex.items-center,
    .responsive-button-grid .phone-nav-button .flex.items-center,
    .space-y-6 .phone-nav-button .flex.items-center {
        flex-direction: row !important;
        margin-bottom: 0.75rem !important;
        display: flex !important;
        align-items: center !important;
    }
    
    section#veterinarios .phone-nav-button .w-12.h-12 svg,
    section#clinicas .phone-nav-button .w-12.h-12 svg,
    section#empresas .phone-nav-button .w-12.h-12 svg,
    section#tutores .phone-nav-button .w-12.h-12 svg,
    .responsive-button-grid .phone-nav-button .w-12.h-12 svg,
    .space-y-6 .phone-nav-button .w-12.h-12 svg {
        width: 1.375rem !important;
        height: 1.375rem !important;
        color: white !important;
        display: block !important;
    }
    
    /* Contraste específico para secciones con fondo oscuro en tablets */
    section#veterinarios .phone-nav-button.active,
    section#empresas .phone-nav-button.active {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: #4ECDC4 !important;
        box-shadow: 0 6px 20px rgba(78, 205, 196, 0.3) !important;
    }
}

/* Mobile muy pequeño (hasta 374px) */
@media (max-width: 374px) {
    /* Teléfonos muy pequeños - layout ultra compacto */
    .phone-mockup {
        width: 220px;
        height: 440px;
    }
    
    .phone-frame {
        padding: 3px;
        border-radius: 18px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    /* Dynamic Island mínimo */
    .phone-frame::before {
        width: 35px;
        height: 12px;
        top: 8px;
        border-radius: 6px;
    }
    
    .phone-frame::after {
        width: 3px;
        height: 3px;
        top: 12px;
        left: calc(50% - 8px);
    }
    
    .phone-sensor {
        top: 13px;
        left: calc(50% + 4px);
        width: 2px;
        height: 2px;
    }
    
    /* Ocultar botones físicos */
    .volume-up, .volume-down, .power-button, .speaker-grill {
        display: none;
    }
    
    .phone-screen {
        border-radius: 15px;
        margin-top: 3px;
    }
    
    .phone-content-area, .screen-content {
        border-radius: 15px;
    }
    
    /* Botones navegación ultra compactos */
    .space-y-6 {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.25rem !important;
    }
    
    .phone-nav-button {
        padding: 0.5rem !important;
        border-radius: 8px;
    }
    
    .phone-nav-button h3 {
        font-size: 0.75rem !important;
        margin-bottom: 0.125rem;
    }
    
    .phone-nav-button p {
        font-size: 0.625rem !important;
        line-height: 1.1;
    }
    
    .phone-nav-button .w-12 {
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin-right: 0.25rem;
    }
    
    /* Contenido pantalla mínimo */
    .screen-content .p-6 {
        padding: 0.5rem !important;
    }
    
    .screen-content h2 {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem;
    }
    
    .screen-content .text-sm {
        font-size: 0.625rem !important;
    }
    
    .screen-content .w-16 {
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin-bottom: 0.25rem;
    }
    
    .screen-content .space-y-3 {
        gap: 0.25rem;
    }
    
    .screen-content .bg-white\/10 {
        padding: 0.25rem;
        border-radius: 4px;
    }
    
    /* Secciones más compactas */
    section {
        padding: 2rem 0 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* === CONTACTO ULTRA MÓVIL === */
    
    /* Container más compacto */
    section[id="contacto"] .contact-container {
        gap: 1rem !important;
    }
    
    /* Formulario ultra compacto */
    section[id="contacto"] .form-section {
        padding: 1rem !important;
    }
    
    section[id="contacto"] input,
    section[id="contacto"] textarea {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    section[id="contacto"] button {
        padding: 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    section[id="contacto"] label {
        font-size: 0.75rem !important;
    }
    
    /* App buttons aún más pequeños */
    section[id="contacto"] .download-section img {
        height: 2.25rem !important;
    }
    
    section[id="contacto"] .download-section .bg-black {
        height: 2.25rem !important;
        padding: 0.375rem 0.5rem !important;
    }
    
    /* Títulos más pequeños */
    section[id="contacto"] h3 {
        font-size: 1.125rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Performance optimizations para mobile */
@media (max-width: 767px) {
    /* Mantener gradientes pero simplificar efectos pesados */
    .hover\:scale-105:hover {
        transform: none !important;
    }
    
    /* Simplificar sombras pero mantener esenciales */
    .shadow-lg, .shadow-xl {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    
    /* Optimizar gradientes complejos pero mantener colores */
    .bg-gradient-to-br {
        background-image: linear-gradient(135deg, var(--tw-gradient-stops)) !important;
    }
    
    .bg-gradient-to-r {
        background-image: linear-gradient(90deg, var(--tw-gradient-stops)) !important;
    }
}