/* =========================================================================
   responsive.css — Adaptação fluida a QUALQUER tela.
   Carregado por último (sobrepõe os demais). Cobre de celular pequeno
   (~320px) a monitores wide, 2K/4K e Smart TVs (10-foot UI).
   Recalcula container, tipografia e controles fixos conforme o viewport.
   ========================================================================= */

/* ----------------------- base fluida (todas as telas) ----------------------- */
html { font-size: clamp(15px, 0.25vw + 13.8px, 18px); }   /* escala rem suavemente com a tela */
img, video, iframe { max-width: 100%; height: auto; }      /* mídia nunca estoura (canvas gerencia o próprio tamanho) */
*, *::before, *::after { min-width: 0; }                   /* evita estouro de grid/flex */
html, body { max-width: 100%; overflow-x: hidden; }

/* container fluido padrão (ligeiramente mais largo que o base) */
.container-x { width: min(1320px, 92vw); }

/* ===================== HEADER responsivo (correção) ========================
   nav vira flex (alinha menu + contador de idioma na mesma linha; antes o
   seletor "caía" para baixo), e o menu colapsa cedo (há até 8 links). */
#site-header .header-inner { gap: 1rem; }
#site-header nav { display: flex; align-items: center; gap: 1.1rem; }
.header-left { min-width: 0; flex-shrink: 1; }
.brand { min-width: 0; }
.brand > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i18n-switch { flex-shrink: 0; }

@media (max-width: 1024px) {
  #nav-toggle { display: block; }
  #site-header .nav-links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 1rem 6vw;
    background: rgba(255,255,255,.98); border-bottom: 1px solid var(--stroke);
    box-shadow: 0 12px 24px rgba(16,42,67,.08);
    max-height: 0; overflow: hidden; transition: max-height .4s ease;
  }
  #site-header .nav-links.is-open { max-height: 80vh; overflow: auto; padding-block: 1rem; }
  #site-header .nav-links a { padding: .7rem 0; width: 100%; }
  #site-header nav { gap: .5rem; }
}
@media (max-width: 600px) { .brand small { display: none; } }
@media (max-width: 520px) { .user-counter { display: none; } }

/* mídia incorporada responsiva (vídeos dos módulos, etc.) */
.mod-video video { width: 100%; height: 100%; }

/* ====================== TABLET / telas médias (<=1024px) ===================== */
@media (max-width: 1024px) {
  .container-x { width: 94vw; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ========================= CELULAR (<=600px) ================================ */
@media (max-width: 600px) {
  :root { --header-h: 58px; }
  .container-x { width: 94vw; }
  .section { padding: clamp(30px, 7vw, 60px) 0; }

  /* tudo em coluna única */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* cabeçalho e marca compactos */
  .brand { font-size: 1rem; }
  .brand__logo { width: 34px; height: 34px; }

  /* botões e títulos confortáveis no toque */
  .btn-x { padding: .8em 1.2em; }
  .hero__cta { gap: .7rem; }
  .hero__cta .btn-x { width: 100%; justify-content: center; }

  /* controles fixos sem sobreposição */
  #copilot-fab { right: 14px; bottom: 14px; width: 54px; height: 54px; font-size: 1.4rem; }
  #copilot-panel { right: 3vw; left: 3vw; width: auto; bottom: 78px; height: min(72vh, 540px); }
  .voice-bar { left: 8px; bottom: 8px; gap: .35rem; padding: .4rem .5rem; }
  .voice-bar select { max-width: 38vw; }

  /* seletor de idioma: mostra só a bandeira para caber */
  .i18n-switch__btn .i18n-cur-label { display: none; }
  .i18n-switch { margin-left: .35rem; }

  /* tabelas/figuras largas rolam em vez de estourar */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==================== CELULAR PEQUENO (<=380px) ============================= */
@media (max-width: 380px) {
  .brand small { display: none; }
  .brand { font-size: .92rem; }
  .eyebrow { font-size: .68rem; letter-spacing: .18em; }
}

/* ============== CELULAR EM PAISAGEM (altura baixa) ========================= */
@media (max-height: 540px) and (orientation: landscape) {
  .hero { min-height: 560px; }
  #copilot-panel { height: 86vh; bottom: 64px; }
}

/* ===================== MONITORES GRANDES / WIDE (>=1700px) ================== */
@media (min-width: 1700px) {
  :root { --header-h: 78px; }
  .container-x { width: min(1560px, 88vw); }
}

/* ============================ 2K / telas muito grandes ===================== */
@media (min-width: 2200px) {
  .container-x { width: min(1840px, 85vw); }
  .section { padding: clamp(90px, 6vw, 150px) 0; }
}

/* ===================== SMART TV / 4K (10-foot UI, >=2560px) ================= */
@media (min-width: 2560px) {
  html { font-size: 24px; }                 /* leitura à distância */
  .container-x { width: min(2200px, 84vw); }
  .btn-x { padding: 1em 1.8em; font-size: 1.05rem; }
  /* controles fixos maiores p/ controle remoto/toque de longe */
  #copilot-fab { width: 84px; height: 84px; font-size: 2.1rem; }
  .i18n-switch__btn { font-size: 1rem; padding: .5rem .9rem; }
}

/* TVs/telas muito largas E altas: aproveita melhor a área */
@media (min-width: 1900px) and (min-height: 1000px) {
  .container-x { width: min(2000px, 86vw); }
}

/* respeita usuários que pedem menos animação (já no design-system, reforço) */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}