/* ═══════════════════════════════════════════════════════════════
   GUZTEC - MOBILE FIXES & RESPONSIVE IMPROVEMENTS
   Correções para garantir que nada fique fora da tela no mobile
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── */
/* 1. CORREÇÕES GERAIS - PREVENIR OVERFLOW */
/* ─────────────────────────────────────────────────────────────── */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

* {
  max-width: 100%;
}

/* Todas as imagens responsivas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─────────────────────────────────────────────────────────────── */
/* 2. CORREÇÃO DO VÍDEO HERO - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Hero banner com vídeo */
  .hero-banner-industrial {
    height: 300px !important;
    /* margin-top agora controlado por header-fix-universal.css */
    overflow: hidden;
    position: relative;
  }
  
  /* Vídeo hero - garantir que funcione no mobile */
  .hero-banner-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
  
  /* Fallback: se o vídeo não carregar, mostra a imagem */
  .hero-banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Conteúdo sobre o vídeo - ajustado para mobile */
  .banner-content {
    padding: 1rem !important;
    max-width: 95% !important;
    width: 95% !important;
  }
  
  /* Títulos ajustados */
  .banner-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .banner-subtitle {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  
  /* Hexágonos decorativos - ocultar no mobile */
  .hexagon-decor {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hero-banner-industrial {
    height: 250px !important;
  }
  
  .banner-title {
    font-size: 1.5rem !important;
  }
  
  .banner-subtitle {
    font-size: 0.9rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 3. CORREÇÃO DE IMAGENS ESPECÍFICAS */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Logo no header */
  .logo-image {
    width: 90vw !important; /* 90% da largura da tela no mobile */
    height: auto !important;
    max-width: 600px !important;
    min-width: 300px !important;
  }
  
  /* Foto do fundador */
  .founder-photo img,
  img[src*="jose-guzman"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  /* Imagens da timeline/jornada */
  img[src*="sdt-rolling-mill"],
  img[src*="warehouse"],
  img[src*="office-team"] {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  /* Imagens de notícias */
  img[src*="news/"] {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  
  /* Container de imagens */
  .team-photo,
  .founder-photo,
  .news-image,
  .product-image {
    width: 100% !important;
    overflow: hidden !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 4. GRID RESPONSIVO - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Todos os grids viram 1 coluna no mobile */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Grid de expertise/cards */
  .expertise-grid,
  .innovation-grid,
  .awards-grid,
  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 5. CONTAINER & SECTIONS - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Container principal */
  .container {
    padding: 0 1rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Seções */
  .section {
    padding: 3rem 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Hero internas */
  .hero,
  .hero-internal {
    margin-top: 150px !important; /* Espaço para header fixo */
    padding: 2rem 1rem !important;
    min-height: 250px !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 6. TIPOGRAFIA - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Títulos grandes */
  h1, .h1 {
    font-size: 2rem !important;
    line-height: 1.3 !important;
  }
  
  h2, .h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h3, .h3 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  /* Section titles */
  .section-title {
    font-size: 1.75rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Textos */
  p, .card-text {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  h1, .h1 {
    font-size: 1.75rem !important;
  }
  
  h2, .h2 {
    font-size: 1.5rem !important;
  }
  
  .section-title {
    font-size: 1.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 7. CARDS & COMPONENTES - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Cards */
  .card,
  .expertise-card,
  .award-card,
  .news-card {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Ícones hexagonais */
  .hexagon-icon,
  .icon-hexagon {
    width: 80px !important;
    height: 80px !important;
  }
  
  .hexagon-icon i,
  .icon-hexagon i {
    font-size: 2rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 8. TIMELINE - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Timeline */
  .timeline,
  .journey-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .timeline-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
  }
  
  .timeline-icon {
    position: static !important;
    margin-bottom: 1rem !important;
    width: 60px !important;
    height: 60px !important;
    font-size: 1.5rem !important;
  }
  
  .timeline-content {
    width: 100% !important;
    padding: 0 !important;
  }
  
  .timeline-year {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 9. FOUNDER SECTION - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Intro do fundador */
  .founder-intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .founder-photo {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
  
  .founder-photo img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }
  
  /* Métricas do fundador */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 10. FOOTER - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Footer grid */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  /* Social icons */
  .social-icons {
    justify-content: center !important;
    gap: 1rem !important;
  }
  
  .social-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 11. HEADER/MENU MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Header compacto */
  .header {
    padding: 0.5rem 0 !important;
    height: 70px !important;
  }
  
  .logo-row {
    height: 60px !important;
  }
  
  /* Ajuste do padding do body */
  body {
    padding-top: 70px !important;
  }
  
  body.header-scrolled {
    padding-top: 70px !important;
  }
  
  /* Menu mobile */
  .menu-toggle {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0.5rem !important;
  }
  
  .nav-menu {
    position: fixed !important;
    top: 70px !important;
    right: -100% !important;
    width: 80% !important;
    max-width: 300px !important;
    height: calc(100vh - 70px) !important;
    background: #fff !important;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2) !important;
    transition: right 0.3s ease !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
  }
  
  .nav-menu.active {
    right: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 12. LANGUAGE SELECTOR - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .language-selector {
    position: fixed !important;
    bottom: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    transform: none !important;
    background: rgba(0, 33, 71, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 25px !important;
    z-index: 999 !important;
  }
  
  .lang-option {
    padding: 0.5rem !important;
    aspect-ratio: 1 / 1 !important; /* Círculo perfeito */
    flex-shrink: 0 !important;
  }
  
  .lang-option img {
    width: 20px !important;
    height: 20px !important;
    display: block !important; /* Remove espaçamento */
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 13. CORREÇÕES ADICIONAIS - PREVENT OVERFLOW */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Prevenir que qualquer elemento ultrapasse a tela */
  * {
    max-width: 100vw !important;
  }
  
  /* Containers */
  .container,
  .section,
  .hero,
  .hero-internal,
  .footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Remover margens negativas */
  * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Tabelas responsivas */
  table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
  }
  
  /* Iframes e vídeos embed */
  iframe,
  embed,
  object {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 14. BOTÕES - MOBILE */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-secondary {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
  
  /* CTA buttons */
  .cta-button,
  .hero-cta {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 15. FIX ESPECÍFICO PARA O VÍDEO NÃO RODAR */
/* ─────────────────────────────────────────────────────────────── */

/* Garantir que o vídeo seja carregado e tocado em dispositivos móveis */
@media (max-width: 768px) {
  .hero-banner-video {
    /* Forçar hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    /* Garantir que o vídeo seja visível */
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Remover qualquer pointer-events que possa bloquear */
    pointer-events: none !important;
  }
  
  /* Se o vídeo não carregar, mostrar imagem de fallback */
  .hero-banner-image {
    display: block !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIM DAS CORREÇÕES MOBILE
   ═══════════════════════════════════════════════════════════════ */