/* CSS Responsivo - Clinica Vila Flor */

/* ============ TABLET (768px - 1024px) ============ */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero-content { grid-template-columns: 1fr; text-align: center; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .sobre-content { grid-template-columns: 1fr; }
    .servicos-grid { grid-template-columns: repeat(2, 1fr); }
    .tabs-nav { flex-wrap: wrap; }
    .vantagens-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .depoimentos .satisfaction-stats .stats-row { grid-template-columns: repeat(2, 1fr); }
    .testimonials-carousel { max-width: 600px; margin: 0 auto; }
    .moments-grid { grid-template-columns: repeat(2, 1fr); }
    .contato-content { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: repeat(2, 1fr); }
}

/* ============ MOBILE (max-width: 768px) ============ */
@media (max-width: 768px) {
    /* Typography Mobile */
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    
    /* Container Mobile */
    .container { padding: 0 var(--space); }
    
    /* Navigation Mobile */
    .navbar { padding: var(--space-sm) 0; }
    .mobile-menu-btn { display: flex; }
    .nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: var(--space-lg);
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: var(--z-modal);
    }
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .nav-menu li { margin-bottom: var(--space); }
    .btn-whatsapp { width: 100%; justify-content: center; }
    
    /* Hero Mobile */
    .hero { min-height: 80vh; padding-top: 60px; }
    .hero-content { grid-template-columns: 1fr; gap: var(--space-2xl); text-align: center; }
    .hero-title { font-size: var(--text-4xl); line-height: 1.2; }
    .hero-subtitle { font-size: var(--text-lg); }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space); }
    .hero-actions { flex-direction: column; gap: var(--space); }
    .hero-actions .btn { width: 100%; }
    .hero-card { max-width: 100%; }
    
    /* Trust Badges Mobile */
    .badges-grid { grid-template-columns: 1fr; }
    .badge { flex-direction: column; text-align: center; }
    
    /* Sobre Mobile */
    .sobre-content { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .valores-grid { grid-template-columns: 1fr; }
    .timeline-item { flex-direction: column; text-align: center; }
    .timeline-item::after { display: none; }
    .stats-grid { grid-template-columns: 1fr; }
    .diferenciais-grid { grid-template-columns: 1fr; }
    
    /* Serviços Mobile */
    .servicos-grid { grid-template-columns: 1fr; }
    .tabs-nav { flex-direction: column; }
    .tab-btn { width: 100%; justify-content: center; }
    .tab-content-wrapper { flex-direction: column; }
    .vantagens-grid { grid-template-columns: 1fr; }
    .beneficios-content { flex-direction: column; }
    .beneficios-stats { grid-template-columns: 1fr; margin-top: var(--space-lg); }
    
    /* Depoimentos Mobile */
    .satisfaction-stats .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space); }
    .testimonials-carousel { max-width: 100%; }
    .testimonial-card { margin: 0 var(--space-sm); }
    .testimonial-author { flex-direction: column; text-align: center; }
    .author-avatar { margin-bottom: var(--space); }
    .moments-grid { grid-template-columns: 1fr; }
    .testimonials-cta .cta-actions { flex-direction: column; }
    .testimonial-form .form-row { flex-direction: column; }
    .rating-input { justify-content: center; }
    
    /* Contato Mobile */
    .contato-content { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .form-row { grid-template-columns: 1fr; }
    .actions-grid { grid-template-columns: 1fr; }
    .horario-grid { grid-template-columns: 1fr; }
    .mapa-overlay { position: static; margin-top: var(--space); }
    .endereco-card { max-width: 100%; }
    
    /* Footer Mobile */
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-actions .action-buttons { flex-direction: column; }
    .footer-bottom { flex-direction: column; gap: var(--space); text-align: center; }
    
    /* Elementos Flutuantes Mobile */
    .whatsapp-float { bottom: 80px; right: 15px; width: 55px; height: 55px; }
    .back-to-top { bottom: 20px; left: 15px; width: 45px; height: 45px; }
    
    /* Cookie Notice Mobile */
    .cookie-content { flex-direction: column; text-align: center; gap: var(--space); }
    
    /* Legal Pages Mobile */
    .legal-content { padding: var(--space-lg); margin: var(--space); }
    .navbar-legal .container { flex-direction: column; gap: var(--space); }
}

/* ============ MOBILE SMALL (max-width: 480px) ============ */
@media (max-width: 480px) {
    :root {
        --text-6xl: 2.5rem;
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --space: 12px;
        --space-lg: 24px;
        --space-xl: 36px;
        --space-2xl: 48px;
        --space-3xl: 72px;
    }
    
    .container { padding: 0 var(--space-sm); }
    .section-header { margin-bottom: var(--space-2xl); }
    .hero-title { font-size: var(--text-4xl); }
    .hero-stats { grid-template-columns: 1fr; }
    .stat-item { margin-bottom: var(--space); }
    .form-container { padding: var(--space-lg); }
    .legal-content { padding: var(--space); margin: var(--space-sm); }
}

/* ============ LANDSCAPE MOBILE ============ */
@media (max-height: 600px) and (orientation: landscape) {
    .hero { min-height: 100vh; }
    .hero-content { gap: var(--space-lg); }
    .hero-title { font-size: var(--text-3xl); }
    .hero-stats { display: none; }
    .scroll-indicator { display: none; }
}

/* ============ TOUCH DEVICES ============ */
@media (hover: none) and (pointer: coarse) {
    .btn:hover, .card:hover, .diferencial:hover { transform: none; }
    .nav-link:hover::after { width: 0; }
    .whatsapp-float:hover { transform: none; }
}

/* ============ HIGH DPI DISPLAYS ============ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-bg-image { image-rendering: -webkit-optimize-contrast; }
}

/* ============ PRINT STYLES ============ */
@media print {
    * { background: white !important; color: black !important; box-shadow: none !important; }
    .navbar, .whatsapp-float, .back-to-top, .cookie-notice, .promo-banner { display: none !important; }
    .container { max-width: 100%; padding: 0; }
    a[href^="http"]:after { content: " (" attr(href) ")"; }
    h1, h2, h3 { page-break-after: avoid; }
    .legal-content { box-shadow: none; padding: 0; }
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .scroll-indicator { animation: none; }
    .banner-content i { animation: none; }
    .whatsapp-float .pulse { animation: none; }
}

/* ============ DARK MODE SUPPORT ============ */
@media (prefers-color-scheme: dark) {
    .navbar { background: rgba(26, 32, 44, 0.95); }
    .nav-link { color: white; }
    .legal-content { background: #2d3748; color: white; }
}

/* ============ HIGH CONTRAST ============ */
@media (prefers-contrast: high) {
    .btn { border-width: 3px; }
    .card { border: 2px solid var(--text-dark); }
    .form-group input, .form-group select, .form-group textarea {
        border-width: 3px;
    }
}