/* ═══════════════════════════════════════════════════════════════
   GUZTEC - RESPONSIVIDADE UNIFICADA
   Escala proporcional baseada no padrão PC
   Desktop (100%) → Tablet (85%) → Mobile (70%)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── */
/* TABLET: 640px - 1023px (85% do PC) */
/* ─────────────────────────────────────────────────────────────── */

@media (min-width: 640px) and (max-width: 1023px) {
  /* Variáveis de Tipografia - 85% do PC */
  :root {
    --font-size-hero: 2.55rem;     /* 3rem × 0.85 = 2.55rem */
    --font-size-h1: 2.55rem;       /* 3rem × 0.85 = 2.55rem */
    --font-size-h2: 1.91rem;       /* 2.25rem × 0.85 = 1.91rem */
    --font-size-h3: 1.49rem;       /* 1.75rem × 0.85 = 1.49rem */
    --space-xl: 3.4rem;            /* 4rem × 0.85 = 3.4rem */
    --space-lg: 2.55rem;           /* 3rem × 0.85 = 2.55rem */
  }

  /* Logo - 85% do PC */
  .logo-image {
    width: 357px !important;       /* 420px × 0.85 = 357px */
    min-width: 357px !important;
    height: auto !important;
  }

  /* Body Padding - 85% do PC */
  body {
    padding-top: 187px !important; /* 220px × 0.85 = 187px */
  }

  /* Vídeo Hero - 85% do PC */
  .hero-banner-industrial {
    height: 306px !important;      /* 360px × 0.85 = 306px */
  }

  /* Bandeiras - 85% do PC */
  .lang-option {
    width: 17px !important;        /* 20px × 0.85 = 17px */
    height: 17px !important;
  }

  .lang-option img {
    width: 17px !important;
    height: 17px !important;
  }

  /* Marcadores do Mapa - 85% do PC */
  .custom-marker-container {
    width: 42px !important;        /* 50px × 0.85 = 42.5px ≈ 42px */
    height: 42px !important;
  }

  /* Navegação - Mantém horizontal */
  .nav-section {
    gap: 0.48rem;                  /* 0.56rem × 0.85 = 0.476rem */
    padding: 0.15rem 0;            /* 0.18rem × 0.85 = 0.153rem */
  }

  .nav-menu li a {
    padding: 0.21rem 0.6rem;       /* 0.25rem 0.7rem × 0.85 */
    font-size: 0.85rem;            /* 1rem × 0.85 = 0.85rem */
  }

  /* Grid - 2 colunas */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* MOBILE: < 639px (70% do PC) */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
  /* Variáveis de Tipografia - 70% do PC */
  :root {
    --font-size-hero: 2.1rem;      /* 3rem × 0.70 = 2.1rem */
    --font-size-h1: 2.1rem;        /* 3rem × 0.70 = 2.1rem */
    --font-size-h2: 1.58rem;       /* 2.25rem × 0.70 = 1.575rem */
    --font-size-h3: 1.23rem;       /* 1.75rem × 0.70 = 1.225rem */
    --font-size-body: 0.9rem;      /* 1rem × 0.90 = 0.9rem */
    --space-xl: 2.8rem;            /* 4rem × 0.70 = 2.8rem */
    --space-lg: 2.1rem;            /* 3rem × 0.70 = 2.1rem */
    --space-md: 1.4rem;            /* 2rem × 0.70 = 1.4rem */
  }

  /* Logo - 70% do PC */
  .logo-image {
    width: 294px !important;       /* 420px × 0.70 = 294px */
    min-width: 294px !important;
    height: auto !important;
  }

  /* Body Padding - 70% do PC */
  body {
    padding-top: 154px !important; /* 220px × 0.70 = 154px */
  }

  /* Vídeo Hero - 70% do PC */
  .hero-banner-industrial {
    height: 252px !important;      /* 360px × 0.70 = 252px */
  }

  /* Bandeiras - 70% do PC */
  .lang-option {
    width: 14px !important;        /* 20px × 0.70 = 14px */
    height: 14px !important;
  }

  .lang-option img {
    width: 14px !important;
    height: 14px !important;
  }

  /* Marcadores do Mapa - 70% do PC */
  .custom-marker-container {
    width: 35px !important;        /* 50px × 0.70 = 35px */
    height: 35px !important;
  }

  /* Navegação - Mantém horizontal (compacto) */
  .nav-wrapper-full-width {
    padding: 0.5rem 0;
  }

  .nav-section {
    flex-wrap: wrap;
    gap: 0.35rem;                  /* 0.50rem × 0.70 = 0.35rem */
    padding: 0.13rem 0;            /* 0.18rem × 0.70 = 0.126rem */
    justify-content: center;
  }

  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
  }

  .nav-menu li a {
    padding: 0.18rem 0.5rem;       /* 0.25rem 0.7rem × 0.70 */
    font-size: 0.75rem;            /* Legível mas compacto */
  }

  /* Language selector - compacto */
  .language-selector {
    gap: 0.35rem;                  /* 0.5rem × 0.70 = 0.35rem */
    padding: 0.28rem 0.42rem;      /* 0.4rem 0.6rem × 0.70 */
  }

  /* Container - padding ajustado */
  .container {
    padding: 0 1rem;               /* ~70% de var(--space-md) */
  }

  /* Grid - 1 coluna */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Títulos ajustados */
  .hero-title {
    font-size: 2.1rem;             /* 3rem × 0.70 = 2.1rem */
  }

  .banner-title {
    font-size: 1.58rem;            /* 2.25rem × 0.70 = 1.575rem */
  }

  .banner-subtitle {
    font-size: 0.95rem;            /* ~70% */
  }

  /* Menu Toggle - caso necessário */
  .menu-toggle {
    display: none; /* Mantém menu horizontal */
  }

  /* Mapa - altura proporcional */
  .global-map-container {
    height: 252px !important;      /* 360px × 0.70 = 252px */
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* MOBILE PEQUENO: < 480px (60% do PC) */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Ajustes extras para telas muito pequenas */
  
  /* Logo - 60% do PC */
  .logo-image {
    width: 252px !important;       /* 420px × 0.60 = 252px */
    min-width: 252px !important;
  }

  /* Vídeo - 60% do PC */
  .hero-banner-industrial {
    height: 216px !important;      /* 360px × 0.60 = 216px */
  }

  /* Body Padding - 60% do PC */
  body {
    padding-top: 132px !important; /* 220px × 0.60 = 132px */
  }

  /* Tipografia - reduzida */
  :root {
    --font-size-hero: 1.8rem;      /* 3rem × 0.60 = 1.8rem */
    --font-size-h1: 1.8rem;
    --font-size-h2: 1.35rem;       /* 2.25rem × 0.60 = 1.35rem */
    --font-size-h3: 1.05rem;       /* 1.75rem × 0.60 = 1.05rem */
  }

  /* Navegação - super compacta */
  .nav-menu li a {
    padding: 0.15rem 0.4rem;
    font-size: 0.70rem;
  }

  /* Bandeiras - menores */
  .lang-option,
  .lang-option img {
    width: 12px !important;        /* 20px × 0.60 = 12px */
    height: 12px !important;
  }

  /* Marcadores - menores */
  .custom-marker-container {
    width: 30px !important;        /* 50px × 0.60 = 30px */
    height: 30px !important;
  }

  /* Mapa - menor */
  .global-map-container {
    height: 216px !important;      /* 360px × 0.60 = 216px */
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* DESKTOP SCALE: > 1024px (Scale Adjustment mantido) */
/* ─────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  /* Scale adjustment já existe em scale-adjustment.css */
  /* Mantém o comportamento atual */
}

/* ─────────────────────────────────────────────────────────────── */
/* GARANTIAS GLOBAIS */
/* ─────────────────────────────────────────────────────────────── */

/* Círculos perfeitos em todas as resoluções */
.lang-option,
.custom-marker-container {
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Garantia extra para bandeiras circulares */
.lang-option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
}

.lang-option img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bordas douradas de ponta a ponta em todas as resoluções */
.nav-wrapper-full-width {
  width: 100% !important;
  /* border-top removida - apenas borda inferior */
  border-bottom: 2px solid var(--color-gold) !important;
}

/* Vídeo sempre proporcional */
.hero-banner-video,
.hero-banner-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Logo sempre centralizada */
.logo-section {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.logo-image {
  margin: 0 auto !important;
  display: block !important;
}

/* Navegação sempre centralizada */
.nav-section {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIM - RESPONSIVIDADE UNIFICADA
   ═══════════════════════════════════════════════════════════════ */