/*!
 * CSS Responsive para Móviles - ArrayanMed
 * Optimizado para dispositivos móviles
 */

/* ============================================
   MOBILE FIRST - BASE STYLES
   ============================================ */

/* Hero Section Mobile */
@media (max-width: 768px) {
    /* Logo más pequeño en móvil */
    #logo-box {
        width: 200px !important;
        height: 200px !important;
    }
    
    /* Título responsive */
    #main-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    #main-title span {
        font-size: 1.5rem !important;
    }
    
    /* Subtítulo más pequeño */
    #subtitle {
        font-size: 1.1rem !important;
    }
    
    /* Botones CTA móvil */
    .cta-mobile {
        padding: 12px 24px !important;
        font-size: 1rem !important;
        width: 100%;
        max-width: 280px;
    }
    
    #cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Caja de contacto */
    #contact-box {
        padding: 15px !important;
        margin: 15px 10px !important;
    }
    
    .contact-address {
        font-size: 1rem !important;
    }
    
    .contact-info-line {
        font-size: 0.95rem !important;
    }
    
    .contact-hours {
        font-size: 0.95rem !important;
    }
    
    /* Separar teléfono y horario en líneas diferentes */
    .contact-info-line::after {
        content: '\A';
        white-space: pre;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    /* Logo aún más pequeño */
    #logo-box {
        width: 160px !important;
        height: 160px !important;
    }
    
    /* Título más compacto */
    #main-title {
        font-size: 1.6rem !important;
    }
    
    #subtitle {
        font-size: 1rem !important;
    }
    
    /* Botones full width */
    .cta-mobile {
        width: 90% !important;
        max-width: none !important;
    }
    
    /* Ajustar padding general */
    .hero {
        padding: 10px 0 !important;
    }
    
    .hero-content {
        padding: 5px 10px !important;
    }
}

/* Barra superior móvil */
@media (max-width: 768px) {
    .top-info-bar {
        display: none !important; /* Ocultar en móvil para ahorrar espacio */
    }
    
    /* Remover espaciador */
    .top-info-bar + div {
        height: 0 !important;
    }
}

/* Header móvil */
@media (max-width: 768px) {
    .header-content {
        padding: 0 10px !important;
    }
    
    .btn-header {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .contact-flip-container {
        display: none !important; /* Simplificar header en móvil */
    }
}

/* Navegación de especialidades móvil */
@media (max-width: 768px) {
    .especialidades-nav {
        padding: 10px !important;
    }
    
    .especialidades-nav a {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
}

/* Tarjetas del equipo móvil */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    .team-card {
        margin: 0 auto !important;
        max-width: 100% !important;
    }
    
    .team-card-image {
        height: 250px !important;
    }
}

/* Proceso de trabajo móvil */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
    }
}

/* Footer móvil */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 20px 15px !important;
    }
    
    .footer-map {
        height: 200px !important;
    }
}

/* Botón flotante móvil */
@media (max-width: 768px) {
    .agendar-float-btn {
        bottom: 15px !important;
        right: 15px !important;
        width: 56px !important;
        height: 56px !important;
    }
}

/* Instagram flotante móvil */
@media (max-width: 768px) {
    .instagram-float-btn {
        display: none !important; /* Ocultar en móvil para no saturar */
    }
}

/* WhatsApp flotante móvil */
@media (max-width: 768px) {
    .mobile-whatsapp-float {
        bottom: 15px !important;
        left: 15px !important;
        width: 56px !important;
        height: 56px !important;
    }
}

/* Secciones generales móvil */
@media (max-width: 768px) {
    .section {
        padding: 30px 15px !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
}

/* Texto general móvil */
@media (max-width: 480px) {
    p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
}

/* Optimización de performance móvil */
@media (max-width: 768px) {
    /* Deshabilitar animaciones complejas */
    * {
        animation-duration: 0.2s !important;
    }
    
    /* Simplificar sombras */
    .team-card,
    .process-card,
    #contact-box {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Reducir gradientes complejos */
    .hero {
        background: var(--bg-light) !important;
    }
}

/* Orientación horizontal móvil */
@media (max-width: 812px) and (orientation: landscape) {
    #logo-box {
        width: 120px !important;
        height: 120px !important;
    }
    
    #main-title {
        font-size: 1.5rem !important;
    }
    
    .hero {
        padding: 5px 0 !important;
    }
}

/* Fix para iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* Fix para botones en iOS */
    .btn,
    .cta-mobile {
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Fix para scroll suave */
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Accesibilidad móvil */
@media (max-width: 768px) {
    /* Áreas táctiles mínimas de 44x44px */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Mayor contraste en móvil */
    .contact-info-line a {
        font-weight: 700 !important;
    }
}