/* ====================================================================
   CORREÇÕES RESPONSIVAS ADICIONAIS
   Arquivo complementar para garantir 100% de responsividade
   ==================================================================== */

/* Previne overflow horizontal em TODOS os elementos */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

* {
    box-sizing: border-box;
}

/* Força containers a respeitarem os limites da tela */
.container,
[class*="container"],
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Grid responsivo universal */
.grid {
    display: grid;
    width: 100%;
}

/* Imagens sempre responsivas */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* SVG responsivo */
svg {
    max-width: 100%;
    height: auto;
}

/* Vídeos e iframes responsivos */
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* ====================================================================
   CORREÇÕES ESPECÍFICAS POR SEÇÃO
   ==================================================================== */

/* HERO SECTION - Responsividade Total */
@media (max-width: 768px) {
    .hero-gradient .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    .hero-gradient .justify-end {
        justify-content: center !important;
    }
    
    /* Força textos a quebrarem corretamente */
    .hero-gradient h1,
    .hero-gradient p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Ajusta espaçamento dos cards de estatísticas */
    .hero-gradient > .hero-content > .container > .grid > div > .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* SEÇÃO MOVIMENTO - Bento Grid Responsivo */
@media (max-width: 1024px) {
    #movimento .grid.lg\:grid-cols-12 {
        grid-template-columns: 1fr !important;
    }
    
    #movimento .lg\:col-span-3,
    #movimento .lg\:col-span-6 {
        grid-column: span 1 !important;
    }
    
    /* Mostra bento items apenas em desktop */
    #movimento .bento-item {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    #movimento .bento-item {
        display: block !important;
    }
}

/* CONFERÊNCIA - Layout Responsivo */
@media (max-width: 1024px) {
    #conferencia .lg\:flex-row {
        flex-direction: column !important;
    }
    
    #conferencia .lg\:w-7\/12,
    #conferencia .lg\:w-5\/12 {
        width: 100% !important;
    }
    
    #conferencia iframe {
        position: relative !important;
        transform: scale(1) !important;
        height: 250px !important;
    }
    
    .clip-diagonal {
        clip-path: none !important;
    }
}

/* SVG FACES - Responsividade Completa */
@media (max-width: 768px) {
    #faces-svg {
        min-height: 450px !important;
        max-height: 600px !important;
    }
    
    .face-pill-rect {
        rx: 20 !important;
        ry: 20 !important;
    }
}

@media (max-width: 480px) {
    #faces-svg {
        min-height: 400px !important;
        max-height: 500px !important;
    }
    
    .face-pill-text {
        font-size: 9px !important;
    }
    
    .face-pill-bubble-text {
        font-size: 7px !important;
    }
}

/* PARCEIROS SCROLLER - Mobile Friendly */
@media (max-width: 768px) {
  .scroller-x {
    transform: rotate(-2deg); /* mantém a inclinação */
    border-radius: 80px !important;
    padding: 0.75rem 0 !important;
  }

  .scroller-x__list {
    transform: rotate(2deg); /* mantém a contra-rotação */
  }

  .brand-btn {
    padding: 0.5rem 1.5rem !important;
  }

  .brand-btn img {
    max-height: 30px !important;
  }
}

/* ECOSSISTEMA - Cards Empilhados */
@media (max-width: 768px) {
    #ecossistema .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .eco-card {
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* FOOTER - Layout Mobile */
@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }
    
    footer .flex.space-x-4 {
        justify-content: center !important;
    }
    
    footer ul {
        text-align: center;
    }
}

/* ====================================================================
   CORREÇÕES DE OVERFLOW E SCROLL
   ==================================================================== */

/* Remove scroll horizontal forçado */
.overflow-hidden {
    overflow-x: hidden !important;
}

/* Garante que elementos flutuantes não causem overflow */
.floating-element,
.floating-blob {
    pointer-events: none;
    z-index: 0;
}


/* ====================================================================
   TIPOGRAFIA RESPONSIVA FLUIDA
   ==================================================================== */

/* Títulos com escala fluida */
h1 {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.35rem, 4vw, 2.5rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.1rem, 3vw, 1.75rem);
    line-height: 1.4;
}

p {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    line-height: 1.6;
}

/* ====================================================================
   NAVEGAÇÃO MOBILE - Melhorias
   ==================================================================== */

@media (max-width: 768px) {
    nav > .container {
        padding: 0.0rem 1rem !important;
    }
    
    #mobileMenu {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    #mobileMenu a {
        padding: 1rem !important;
        font-size: 1rem;
    }
}

/* ====================================================================
   PERFORMANCE E ACESSIBILIDADE
   ==================================================================== */

/* Reduz animações em dispositivos com preferência */


/* Touch-friendly em mobile */
@media (max-width: 768px) {
    button,
    a,
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.5rem;
    }
    
    /* Aumenta área de toque */
    .face-item {
        padding: 0.5rem;
    }
}

/* ====================================================================
   FIXES PARA DISPOSITIVOS ESPECÍFICOS
   ==================================================================== */

/* iPhone SE e dispositivos muito pequenos */
@media (max-width: 375px) {
    :root {
        font-size: 14px;
    }
    
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .section-padding {
        padding: 1.5rem 0.75rem !important;
    }
}

/* Tablets em landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .hero-gradient {
        min-height: auto;
        padding: 1rem 0;
    }
    
    section {
        padding: 3rem 0;
    }
}

/* iPads e tablets grandes */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 90% !important;
    }
}

/* ====================================================================
   PRINT STYLES (Bonus)
   ==================================================================== */