/* assets/css/responsivo.css — Regras responsivas do cabeçalho, homepage e rodapé. */

/* ---------------------------------------------------
   RESPONSIVO
   --------------------------------------------------- */
@media (max-width: 980px) {
  /* Conteúdo do hero empilha em coluna (título+texto+botão em cima,
     estatísticas embaixo, em linha) — o layout lado a lado só cabe
     em telas largas. */
  .stieen-hero-slide { height: auto; min-height: 480px; padding: 40px 0; }
  .stieen-hero-conteudo { flex-direction: column; align-items: flex-start; gap: 28px; }
  .stieen-hero-titulo { font-size: calc(92px * var(--stieen-escala-fonte)); }
  /* Em telas menores que 980px a foto (composta pro corte de 1200px)
     já não sobra tanto espaço vazio à esquerda pro texto — um véu
     branco translúcido por cima garante legibilidade sem precisar
     recompor a imagem pra cada largura. */
  .stieen-hero-bg-wrap::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--stieen-veu-claro); }
  .stieen-pilares-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .stieen-pilares-grid > * { padding: 0 20px; border-left: none !important; }
  .stieen-pilar-intro { grid-column: 1 / -1; padding-bottom: 24px; border-bottom: 1px solid var(--cor-pilares-separador, var(--stieen-cinza-borda)); }
  .stieen-pilar:nth-child(3) { border-left: 1px solid var(--cor-pilares-separador, var(--stieen-cinza-borda)) !important; }
  .stieen-pilar:nth-child(4) { border-left: 1px solid var(--cor-pilares-separador, var(--stieen-cinza-borda)) !important; }
  .stieen-noticias-grid { grid-template-columns: 1fr; }
  .stieen-multimidia-grid { grid-template-columns: 1fr; }
  .stieen-multimidia-intro { grid-column: 1 / -1; }
  .stieen-footer-topo { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  /* Cabeçalho nunca teve regra própria pro mobile/tablet — a logo
     com 108px de altura fixa mais o menu horizontal completo (e o
     resto: seletor de idioma, botão Associe-se, hambúrguer) não
     cabiam numa tela de celular OU tablet e estouravam a largura da
     página inteira (scroll horizontal). O breakpoint de 1024px casa
     com o "min-width:1025px" já usado ali em cima pro hover do
     seletor de idioma — abaixo disso é tudo tratado como "mobile"
     pro cabeçalho (mesmo em tablets como iPad em pé, 768px). */
  .stieen-header-inner { padding: 12px 16px; gap: 10px; }
  /* Rodapé perde o mesmo "encostar nos 1200px" abaixo de 1024px —
     sem os 24px de gutter que .stieen-footer-topo/base não têm mais,
     o conteúdo tocaria a borda real da tela (viewport < 1200px). */
  .stieen-footer-topo { padding-left: 16px; padding-right: 16px; }
  .stieen-footer-base { padding-left: 16px; padding-right: 16px; }
  .stieen-header-idioma-btn { padding: 7px 8px; font-size: calc(14px * var(--stieen-escala-fonte)); gap: 5px; }
  /* 2026-09-14 (print temp/46.jpg): no desktop o botao de idioma
     fica lá na ponta direita do cabecalho, entao "right:0" (a
     regra original, base do arquivo) abre o dropdown pra ESQUERDA
     do botao com folga de sobra -- funciona bem. No mobile o
     idioma foi pra ponta ESQUERDA da linha 2 (rodadas anteriores
     desta sessao), entao "right:0" faz o dropdown abrir pra
     esquerda do botao só que sem espaço nenhum ali -- ele estoura
     pra fora da tela e corta o texto ("tuguês", "lish", "añol").
     Aqui no mobile o certo é abrir pra DIREITA do botão
     (left:0), que é onde sobra espaço de verdade. */
  .stieen-header-idioma-menu { left: 0; right: auto; }
  .stieen-btn-associe { padding: 10px 14px; font-size: calc(14px * var(--stieen-escala-fonte)); }
  /* Lupa e chave do cabeçalho compacto somem — a mesma função já
     mora dentro do painel do menu mobile (.stieen-menu-mobile-extra
     abaixo), sem disputar espaço com logo/idioma/Associe-se. */
  .stieen-header-acoes { display: none; }
  /* CABEÇALHO MOBILE EM 2 LINHAS (2026-09-14, 5ª rodada — layout
     trocado de novo, print temp/39.jpg) — a 4ª rodada tinha logo +
     hambúrguer na linha 1 e Associe-se + idioma na linha 2; o
     Luciano pediu pra virar diferente:
       Linha 1: só a logo, sozinha, CENTRALIZADA e maior.
       Linha 2: idioma "PT" + Associe-se + hambúrguer, todos juntos.
     A logo sozinha em 100% da largura "sobra" espaço de vento pra
     crescer sem disputar com mais nada — por isso pôde aumentar de
     52px pra 76px. Tirando a logo da 2ª linha, idioma+Associe-se+
     hambúrguer cabem folgados numa linha só (~280px de conteúdo real
     contra 360px+ de tela), com espaço de sobra pra distribuir sem
     ficar cortado nem apertado — bem diferente da 1ª tentativa (logo+
     idioma+Associe-se+hambúrguer juntos, ~420px, que é o que
     começou todo esse histórico de ajustes. */
  .stieen-header-logo img { height: 70px; }
  .stieen-header-logo-nome { font-size: 13px; font-weight: 500; max-width: none; text-align: center; }
  .stieen-header-inner { flex-wrap: wrap; row-gap: 14px; }
  .stieen-header-logo {
    order: 1;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Linha 2 (6ª rodada, 2026-09-14): Luciano pediu, direto pelo
     DevTools, pra logo aumentar mais ainda e pro botão Associe-se
     ficar CENTRALIZADO na linha 2 (não mais "colado" ao lado do
     idioma). Pra centralizar só o Associe-se sem mexer no HTML
     (idioma e Associe-se são filhos de .stieen-header-direita, um
     wrapper único), uso display:contents no wrapper — ele some da
     árvore de caixas e idioma/Associe-se passam a ser itens diretos
     do flex de .stieen-header-inner, junto com o hambúrguer. Aí dá
     pra controlar os 3 (idioma / Associe-se / hambúrguer) com
     order+flex individualmente: idioma na ponta esquerda, hambúrguer
     na ponta direita, e Associe-se com flex:1 (ocupa o espaço do
     meio) + justify-content:center (centraliza o texto dentro dele,
     já que o link já é display:flex). */
  .stieen-header-inner { justify-content: space-between; }
  .stieen-header-direita { display: contents; }
  .stieen-header-idioma { order: 1; }
  .stieen-btn-associe { order: 2; margin: 0 auto; }
  .stieen-menu-mobile-toggle { order: 3; }
  /* top:76px aqui é só o valor de FALLBACK antes do JS calcular o
     valor real (assets/js/site.js, ajustarTopoDoMenuMobile) — a
     altura do cabeçalho muda dependendo do layout (1 ou 2 linhas,
     tamanho da logo), então não dá mais pra confiar num número
     fixo aqui sozinho. */
  .stieen-menu { position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: var(--cor-header-fundo, var(--stieen-branco)); display: none; overflow-y: auto; padding: 20px; }
  .stieen-menu.stieen-menu-aberto { display: block; }
  .stieen-menu > ul { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; }
  .stieen-menu > ul > li:not(:last-child)::after { display: none; }
  .stieen-menu > ul > li > a { padding: 12px 4px; border-bottom: 1px solid var(--stieen-cinza-borda); }
  .stieen-submenu { position: static; box-shadow: none; border: none; display: none; padding-left: 16px; }
  .stieen-menu-dropdown.stieen-submenu-aberto .stieen-submenu { display: block; }
  .stieen-menu-mobile-toggle { display: block; }
  /* 2026-09-14: tinha 2 linhas quase juntas aqui -- a borda
     debaixo do ultimo item do menu (.stieen-menu > ul > li > a,
     regra ali em cima) MAIS essa border-top, com 40px de espaco
     em branco no meio. Ficava parecendo uma linha de menu vazia
     sobrando (print temp/44.jpg, seta azul). Tirei a border-top
     daqui -- so sobra a linha de baixo do ultimo item mesmo,
     o espaco (margin+padding) continua igual pra separar
     visualmente a busca/login do menu. */
  .stieen-menu-mobile-extra { display: block; margin-top: 20px; padding-top: 20px; }
  .stieen-menu-mobile-busca { display: flex; gap: 8px; margin-bottom: 16px; }
  .stieen-menu-mobile-busca input { flex: 1; border: 1px solid var(--stieen-cinza-borda); border-radius: 6px; padding: 10px 14px; font-family: inherit; font-size: calc(16px * var(--stieen-escala-fonte)); }
  .stieen-menu-mobile-busca input:focus { outline: none; border-color: var(--stieen-vermelho); }
  .stieen-menu-mobile-busca button { flex-shrink: 0; width: 42px; border: none; border-radius: 6px; background: var(--stieen-vermelho); color: var(--stieen-branco); font-size: calc(16px * var(--stieen-escala-fonte)); cursor: pointer; }
  .stieen-menu-mobile-login { display: flex; align-items: center; gap: 10px; color: var(--stieen-escuro); font-weight: 600; font-size: calc(16px * var(--stieen-escala-fonte)); padding: 10px 4px; }
  .stieen-menu-mobile-login i { color: var(--stieen-vermelho); width: 16px; text-align: center; }
}

@media (max-width: 720px) {
  /* 2026-09-14 (print temp/47.jpg): até aqui o Hero no mobile herdava
     a regra do @media 980px (.stieen-hero-slide com height:auto +
     min-height:480px) -- ou seja, a altura da IMAGEM ficava refém do
     tanto de texto empilhado dentro dela (título + parágrafo + botão
     + estatísticas, tudo em coluna). Isso fazia o bloco inteiro ficar
     bem mais alto que uma tela de celular, sobrando rolagem só pra
     terminar de ver o slide -- e a seta de navegação (centralizada
     nos 50% da altura TOTAL do slide) acabava sobrando lá embaixo,
     longe de onde a imagem "parece" acabar visualmente.
     Luciano pediu uma proporção mais parecida com 4:5 (retrato, sem
     ser o retângulo baixo que o responsivo tradicional gera), com as
     laterais da imagem podendo cortar fora da tela. Como
     .stieen-hero-bg-wrap é position:absolute;inset:0 (cobre 100% da
     altura real de .stieen-hero-slide, sempre), bastou trocar a
     altura de "o quanto o texto empilhado precisar" pra
     aspect-ratio:4/5 (baseada na LARGURA, não no conteúdo) -- a
     imagem passa a cobrir esse box exato via object-fit:cover
     (corta os lados que sobrarem, exatamente como autorizado). */
  .stieen-hero-slide { height: auto; aspect-ratio: 4 / 5; min-height: 0; padding: 24px 0; }
  /* Título+parágrafo+botão precisam caber dentro desse box mais
     enxuto -- padding lateral de 54px (herdado do desktop) sobrava
     demais numa tela de ~390px, e o gap de 28px (herdado do
     @media 980px) entre os blocos também. Reduzido os dois, e
     centralizado verticalmente (antes ficava "encostado" no topo,
     deixando um vão feio embaixo quando o slide não tem
     estatísticas). */
  .stieen-hero-conteudo { padding-left: 24px; padding-right: 24px; gap: 14px; justify-content: center; }
  /* As estatísticas (só existem no 2º slide) eram o maior peso extra
     de altura -- title+parágrafo+botão já preenchem bem o box 4:5
     sozinhos. Escondidas no celular pra não estourar a proporção;
     continuam aparecendo normalmente no desktop/tablet. */
  .stieen-hero-titulo { font-size: calc(52px * var(--stieen-escala-fonte)); }
  .stieen-hero-texto-bloco { max-width: 100%; }
  .stieen-hero-texto { font-size: calc(15px * var(--stieen-escala-fonte)); margin-bottom: 16px; }
  /* Setas do slider: em telas largas elas ficam "metade dentro,
     metade fora" da borda do Hero (-22px, ver comentário lá em
     cima) — em telas de celular isso jogaria metade do botão pra
     fora da tela, inacessível ao toque. Aqui elas voltam pra dentro,
     totalmente visíveis e tocáveis. */
  .stieen-hero-seta { width: 38px; height: 38px; }
  .stieen-hero-seta-prev { left: 10px; }
  .stieen-hero-seta-next { right: 10px; }
  /* 2026-09-14: com o Hero agora bem mais baixo (aspect-ratio 4/5,
     ver .stieen-hero-slide acima) e o conteúdo centralizado
     verticalmente (justify-content:center), a seta em 50% ou perto
     do rodapé sempre cai em cima do texto/botão. A única faixa livre
     (só a foto, sem texto por cima) é bem no topo da imagem --
     antes de o título começar. Sobe a seta pra lá. */
  .stieen-hero-seta { top: 16px; transform: none; }
}

@media (max-width: 400px) {
  /* Em telas bem estreitas, 68px estoura palavras compridas do
     título ("CATEGORIA") pra fora da coluna de texto — reduz mais
     um pouco só nessa faixa. */
  .stieen-hero-titulo { font-size: calc(52px * var(--stieen-escala-fonte)); }
  .stieen-pilares-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .stieen-pilares-grid > * { padding: 0 !important; border-left: none !important; }
  .stieen-pilar-intro { border-bottom: 1px solid var(--cor-pilares-separador, var(--stieen-cinza-borda)); padding-bottom: 20px !important; }
  .stieen-multimidia-grid { grid-template-columns: 1fr; }
  .stieen-footer-topo { grid-template-columns: 1fr; }
  .stieen-cta-inner { flex-direction: column; align-items: flex-start; }
}