/* Mobile-first overrides and sensible defaults */

/* Ensure fixed header does not overlap first section on small screens */
body { padding-top: 64px; }

/* Container and spacing tuned for small screens */
.container {
    max-width: 100%;
    padding: 0 16px;
}

/* Reduce vertical spacing across sections for compact mobile layout */
/* Increase top padding for .servicos to create a slightly larger gap after the hero image */
.hero { padding: 28px 0 18px; }

/* Ensure services section sits clearly below the hero on small screens */
.servicos { padding: 24px 0 18px; margin-top: 32px; }
.sobre, .faq, .redes-sociais, .cta-final { padding: 28px 0; }

/* Hero: single column, smaller typography */
.hero-content { display: block; gap: 12px; }
.hero-card { padding: 16px; border-radius: 18px; }
.hero-title { font-size: 28px; line-height: 1.15; margin-bottom: 12px; }
.hero-subtitle { font-size: 14px; margin-bottom: 18px; }
.hero-cta { flex-direction: column; gap: 10px; }

/* Image card sizing */
.image-card { height: 220px; border-radius: 18px; }
.image-card img { border-radius: 18px; }

/* Section headers */
.section-title { font-size: 28px; margin-bottom: 8px; }
.section-subtitle { font-size: 14px; }

/* Services accordion simplified spacing */
.services-accordion { gap: 12px; max-width: 100%; }
.service-accordion-header { padding: 18px; gap: 12px; }
.service-accordion-body { padding: 0 18px 18px 18px; }
.service-accordion-icon { width: 48px; height: 48px; }

/* Sobre section stacked layout */
.sobre-content { display: block; gap: 16px; }
.sobre-card { padding: 16px; border-radius: 18px; }
.sobre-text h2 { font-size: 22px; margin-bottom: 12px; }
.sobre-text p { font-size: 15px; }

/* Info grid becomes single column */
.info-grid { display: block; gap: 14px; }

/* Cards and CTA compact */
.info-card, .social-card, .cta-card, .glass-card { padding: 16px; border-radius: 18px; }
.cta-card h2 { font-size: 22px; }
.cta-card p { font-size: 14px; }

/* Social cards stack */
.social-grid { grid-template-columns: 1fr; gap: 14px; }
.social-icon { width: 56px; height: 56px; border-radius: 16px; }

/* Footer compact */
.footer { padding: 28px 0 12px; }
.footer-content { display: block; gap: 18px; }
.footer-logo img { max-width: 160px; }

/* Header/logo adjustments for mobile */
.header { padding: 8px 0; }
/* larger mobile logo while keeping header height the same via transform */
.logo img { height: 64px; transform: scale(1.8) !important; }

/* Buttons and targets bigger and touch friendly */
.btn-glass { padding: 12px 18px; min-height: 44px; font-size: 15px; }
.btn-large { padding: 12px 20px; }

/* Modal adjustments */
.modal-content { padding: 20px; max-width: 92%; }
.form-group input, .form-group textarea { padding: 12px 14px; }

/* Reduce large shadows and filters on mobile for performance */
.glass-card, .modal-content, .mobile-menu, .whatsapp-float {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Ensure interactive elements meet touch size */
.hamburger { padding: 10px; }
.hamburger span { height: 3px; }

/* Make hero image fit well on narrow screens */
.image-mask { height: 220px; overflow: hidden; }

/* Accessibility: keep focus outlines visible only on interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.btn-glass:focus,
.hamburger:focus,
.mobile-nav-item:focus {
    outline: 2px solid var(--green-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Larger screens: restore grid and desktop spacing */
@media (min-width: 769px) {
    .container { max-width: 1200px; padding: 0 24px; }
    .hero { padding: 100px 0 60px; }
    .hero-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
    .hero-card { padding: 48px; }
    .image-card, .image-mask { height: auto; }
    .hero-title { font-size: 56px; }
    .hero-subtitle { font-size: 18px; }
    .section-title { font-size: 48px; }
    .sobre-content { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; }
    .services-accordion { max-width: 900px; margin: 0 auto; }
    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .social-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; max-width: 900px; margin: 0 auto; }
    .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
    .logo img { height: 120px; transform: scale(1.84); transform-origin: left center; }
}