/* ============================================
   ENERGIA SOLAR FOTOVOLTAICA RIO PRETO
   Arquivo: responsive.css
   Descrição: Estilos responsivos para mobile
   ============================================ */

/* ===== TABLETS E MENORES (MAX 992PX) ===== */
@media (max-width: 992px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .service-features {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .company-differentials {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .footer-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* ===== MOBILE GRANDE (MAX 768PX) ===== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 15px;
        --spacing-xs: 0.4rem;
        --spacing-sm: 0.8rem;
        --spacing-md: 1.2rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-xxl: 2.5rem;
    }
    
    /* Header */
    .header-container {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .logo-section {
        flex: 1 1 100%;
        order: 1;
    }
    
    .logo {
        font-size: 1.2rem;
    }
    
    .header-icons {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
    }
    
    .header-buttons {
        order: 2;
        flex: 1 1 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-call,
    .btn-whatsapp-header {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Hero */
    .hero {
        padding: var(--spacing-xl) 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .btn-cta-primary {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }
    
    .hero-image-placeholder {
        min-height: 300px;
        padding: var(--spacing-lg);
    }
    
    .placeholder-icon {
        font-size: 4rem;
    }
    
    .placeholder-text {
        font-size: 1.2rem;
    }
    
    /* Sections */
    .section-title {
        font-size: 1.8rem;
    }
    
    .service-features,
    .service-highlights,
    .process-steps,
    .company-differentials,
    .ev-benefits {
        grid-template-columns: 1fr;
    }
    
    .areas-grid {
        grid-template-columns: 1fr;
    }
    
    /* Final CTA */
    .final-cta-title {
        font-size: 1.8rem;
    }
    
    .final-cta-description {
        font-size: 1rem;
    }
    
    .final-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-cta-outline {
        width: 100%;
        justify-content: center;
    }
    
    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* WhatsApp Float */
    .whatsapp-float {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 9999 !important;
    }
    
    .whatsapp-button {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* ===== MOBILE PEQUENO (MAX 576PX) ===== */
@media (max-width: 576px) {
    :root {
        --font-size-base: 14px;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .header-container {
        padding: 0 var(--spacing-sm);
    }
    
    .logo {
        font-size: 1rem;
    }
    
    .header-icons {
        gap: 0.5rem;
    }
    
    .icon-emoji {
        font-size: 1.5rem;
    }
    
    .btn-call,
    .btn-whatsapp-header {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .btn-text {
        display: none;
    }
    
    .btn-icon {
        font-size: 1.5rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-description {
        font-size: 0.95rem;
    }
    
    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .content-text p,
    .service-content p {
        font-size: 1rem;
    }
    
    .feature-card,
    .step-card,
    .differential-card,
    .ev-card {
        padding: var(--spacing-md);
    }
    
    .feature-icon,
    .diff-icon,
    .ev-icon {
        font-size: 2.5rem;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        line-height: 40px;
    }
    
    .whatsapp-text {
        font-size: 0.85rem;
    }
    
    .final-cta-title {
        font-size: 1.5rem;
    }
    
    .final-cta-description {
        font-size: 0.95rem;
    }
}

/* ===== MOBILE MUITO PEQUENO (MAX 380PX) ===== */
@media (max-width: 380px) {
    .logo {
        font-size: 0.9rem;
    }
    
    .header-icons {
        display: none;
    }
    
    .hero-title {
        font-size: 1.3rem;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .btn-cta-primary,
    .btn-cta-secondary,
    .btn-cta-outline {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }
    
    .cta-text {
        font-size: 0.85rem;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: var(--spacing-lg) 0;
    }
    
    .hero-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .hero-image-placeholder {
        min-height: 250px;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .header,
    .whatsapp-float,
    .btn-cta-primary,
    .btn-cta-secondary,
    .cta-between-sections,
    .progress-bar {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    .hero,
    .service-section,
    .footer {
        page-break-inside: avoid;
    }
}