/* ==========================================================================
   responsive.css — ADAPTAÇÃO PARA TABLETS E CELULARES
   --------------------------------------------------------------------------
   Pontos de quebra usados (do maior para o menor):
     1600px  monitores grandes
     1440px  notebooks grandes
     1200px  notebooks
     1024px  tablets deitados  -> aqui o menu vira gaveta
      768px  tablets em pé / celulares grandes
      480px  celulares
      360px  celulares pequenos (a partir de 320px)
   ========================================================================== */


/* ==========================================================================
   MONITORES GRANDES (acima de 1600px)
   Só aumenta um pouco o respiro; a largura máxima continua valendo.
   ========================================================================== */
@media (min-width: 1600px) {
  :root { --espaco-secao: 110px; }
  .banner-principal { height: 700px; }
  .banner__titulo { font-size: 64px; }
}


/* ==========================================================================
   NOTEBOOKS (até 1440px)
   ========================================================================== */
@media (max-width: 1440px) {
  .container,
  .container-estreito { padding: 0 30px; }

  /* Setas do carrossel voltam para dentro para não sair da tela */
  .vitrine__seta--anterior { left: -8px; }
  .vitrine__seta--proxima { right: -8px; }

  .menu-principal { gap: 20px; }
  .mega-menu { width: 880px; padding: 34px 36px; gap: 26px; }
}


/* ==========================================================================
   NOTEBOOKS MENORES (até 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --espaco-secao: 74px; }

  .secao-titulo { font-size: 34px; }
  .banner-principal { height: 520px; }
  .banner__titulo { font-size: 46px; }

  /* 4 produtos visíveis no carrossel */
  .vitrine__trilho { grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; }
  .grade-produtos { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }

  .historia { gap: 50px; }
  .historia__titulo { font-size: 34px; }
  .bloco-institucional { gap: 44px; }

  .rodape__colunas { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .menu-principal { gap: 15px; }
  .menu-principal > li > a { font-size: 11px; letter-spacing: 0.06em; }
}


/* ==========================================================================
   TABLETS (até 1024px)
   Aqui o menu de desktop some e entra a gaveta lateral.
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --altura-cabecalho: 72px; }

  /* --- Cabeçalho --- */
  .nav-principal { display: none; }
  .botao-menu-mobile { display: flex; grid-column: 1; justify-self: start; }
  .faixa-topo__links { display: none; }
  .faixa-topo .container { justify-content: center; }
  /* No celular a frase ocupa duas linhas. A altura fixa cortava o texto,
     então aqui a faixa cresce conforme o conteúdo. */
  .faixa-topo { height: auto; min-height: var(--altura-faixa-topo); padding: 7px 0; }
  .faixa-topo__mensagem { text-align: center; font-size: 11px; line-height: 1.45; margin: 0; }

  .logo__nome { font-size: 22px; }
  .logo__slogan { font-size: 8px; }
  .icone-acao { width: 40px; height: 40px; }
  .icone-conta { display: none; }   /* conta fica dentro da gaveta no mobile */

  /* --- Banner --- */
  .banner-principal { height: 460px; }
  .banner__titulo { font-size: 38px; }
  .banner__subtitulo { font-size: 15px; margin-bottom: 24px; }
  .banner__seta { opacity: 1; width: 42px; height: 42px; }
  .banner__seta--anterior { left: 14px; }
  .banner__seta--proxima { right: 14px; }

  /* --- Benefícios: vira carrossel deslizante --- */
  .beneficios__lista {
    grid-template-columns: repeat(3, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .beneficios__lista::-webkit-scrollbar { display: none; }
  .beneficio { scroll-snap-align: center; padding: 26px 20px; }
  .beneficio + .beneficio::before { display: none; }

  /* --- Vitrines: ~2,4 produtos visíveis --- */
  .vitrine__trilho { grid-auto-columns: calc((100% - 20px) / 2.4); gap: 20px; }
  .vitrine__seta { display: none; }   /* no toque, arrasta com o dedo */

  .grade-produtos,
  .grade-produtos--tres { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }

  /* --- Categorias --- */
  .grade-categorias { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* --- Banners intermediários --- */
  .banners-duplos { grid-template-columns: 1fr; gap: 20px; }
  .banner-duplo { aspect-ratio: 16 / 9; }

  /* --- Institucional: uma coluna, imagem antes do texto --- */
  .historia { grid-template-columns: 1fr; gap: 34px; }
  .historia__imagem { order: 1; aspect-ratio: 16 / 10; }
  .historia__texto { order: 2; max-width: 100%; }

  .bloco-institucional { grid-template-columns: 1fr; gap: 26px; }
  .bloco-institucional + .bloco-institucional { margin-top: 54px; }
  .bloco-institucional__imagem,
  .bloco-institucional--invertido .bloco-institucional__imagem { order: 1; }
  .bloco-institucional__texto,
  .bloco-institucional--invertido .bloco-institucional__texto { order: 2; }

  /* --- Instagram --- */
  .instagram__grade { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* --- Rodapé --- */
  .rodape__colunas { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .rodape__base { flex-direction: column; text-align: center; }

  /* --- Página de produto --- */
  .produto-topo { grid-template-columns: 1fr; gap: 34px; padding-bottom: 46px; }
  .produto-info__nome { font-size: 30px; }
  .galeria__miniaturas { grid-template-columns: repeat(5, 1fr); gap: 8px; }

  /* --- Página de categoria: filtros viram gaveta --- */
  .categoria-layout { grid-template-columns: 1fr; gap: 0; }
  .categoria-cabecalho__titulo { font-size: 34px; }
  .botao-filtros-mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #fff;
  }
  .filtros {
    position: fixed;
    top: 0; left: 0;
    width: 330px;
    max-width: 86vw;
    height: 100%;
    background: #fff;
    z-index: calc(var(--z-gaveta) + 1);
    padding: 24px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transicao);
  }
  .filtros.aberta { transform: translateX(0); }
  .filtros__topo {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cor-borda);
  }

  /* --- Página de carrinho --- */
  .carrinho-layout { grid-template-columns: 1fr; gap: 34px; }
  .resumo-pedido { position: static; }
}


/* ==========================================================================
   CELULARES GRANDES / TABLETS EM PÉ (até 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root { --espaco-secao: 56px; }

  body { font-size: 14px; }

  .container,
  .container-estreito { padding: 0 18px; }

  .secao-titulo { font-size: 27px; }
  .secao-cabecalho { margin-bottom: 30px; }
  .secao-descricao { font-size: 14px; }

  /* --- Banner: a imagem vertical para celular é escolhida pelo <picture> --- */
  .banner-principal { height: 78vh; max-height: 560px; min-height: 400px; }
  .banner__slide::after,
  .banner__slide[data-posicao="direita"]::after {
    background: linear-gradient(to top, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.12) 70%);
  }
  /* No celular o texto sempre fica embaixo e centralizado */
  .banner__conteudo,
  .banner__slide[data-posicao="direita"] .banner__conteudo,
  .banner__slide[data-posicao="centro"] .banner__conteudo {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding-bottom: 74px;
  }
  .banner__caixa { max-width: 100%; }
  .banner__titulo { font-size: 30px; }
  .banner__subtitulo { font-size: 14px; margin-bottom: 20px; }
  .banner__chapeu { font-size: 10px; margin-bottom: 12px; }
  .banner__seta { display: none; }
  .banner__indicadores { bottom: 20px; }

  /* --- Benefícios: um por tela --- */
  .beneficios__lista { grid-template-columns: repeat(3, 88%); }
  .beneficio { gap: 14px; padding: 22px 16px; }
  .beneficio__icone { width: 34px; height: 34px; }

  /* --- Vitrines: ~1,6 produto visível (dá a dica de que tem mais) --- */
  .vitrine__trilho { grid-auto-columns: calc((100% - 14px) / 1.6); gap: 14px; }
  .grade-produtos,
  .grade-produtos--tres { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }

  /* Cards: fonte e botões proporcionais, alvo de toque confortável */
  .card-produto__nome { font-size: 15px; }
  .card-produto__preco { font-size: 17px; }
  .card-produto__variacao { font-size: 11px; margin-bottom: 8px; }
  .card-produto__corpo { padding-top: 14px; }
  .card-produto__acoes .botao { min-height: 44px; font-size: 11px; letter-spacing: 0.08em; padding: 12px 10px; }
  /* No toque não existe hover: o "ver detalhes" fica sempre visível de forma discreta */
  .card-produto__espiar { display: none; }

  .filtros-abas { gap: 8px; margin-bottom: 28px; }
  .filtro-aba { padding: 8px 14px; font-size: 11px; }

  /* --- Categorias --- */
  .grade-categorias { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-categoria__nome { font-size: 18px; }
  .card-categoria__conteudo { padding: 20px 14px; }
  .card-categoria__link { opacity: 1; transform: none; font-size: 10px; }

  /* --- Banners intermediários: nada importante pode ser cortado --- */
  .banner-duplo { aspect-ratio: 4 / 3; }
  .banner-duplo__titulo { font-size: 26px; }

  /* --- Institucional --- */
  .historia__titulo { font-size: 27px; }
  .historia__texto p { font-size: 15px; }
  .bloco-institucional__titulo { font-size: 24px; }

  /* --- Instagram --- */
  .instagram__grade { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* --- Newsletter: campo e botão empilhados --- */
  .newsletter__titulo { font-size: 26px; }
  .newsletter__formulario { flex-direction: column; }
  .newsletter__campo { width: 100%; }

  /* --- Rodapé em uma coluna --- */
  .rodape { padding-top: 46px; text-align: center; }
  .rodape__colunas { grid-template-columns: 1fr; gap: 30px; padding-bottom: 34px; }
  .rodape__sobre { margin-left: auto; margin-right: auto; }
  .rodape__redes { justify-content: center; }
  .rodape__selos { justify-content: center; }
  .rodape__contato li { justify-content: center; text-align: left; }
  .rodape__base-links { flex-direction: column; gap: 8px; }

  /* --- Minicarrinho ocupa quase toda a largura --- */
  .gaveta-carrinho { width: 100%; max-width: 100%; }
  .gaveta-carrinho__itens { padding: 6px 18px; }
  .gaveta-carrinho__rodape { padding: 16px 18px 22px; }
  .item-carrinho { grid-template-columns: 70px 1fr; gap: 12px; }
  .item-carrinho__imagem { width: 70px; height: 70px; }

  /* --- Página de produto --- */
  .produto-info__nome { font-size: 25px; }
  .produto-info__preco { font-size: 28px; }
  .galeria__miniaturas { grid-template-columns: repeat(4, 1fr); }
  .produto-compra { grid-template-columns: 1fr; }
  .produto-compra .seletor-quantidade { width: 100%; justify-content: space-between; }
  .abas-navegacao { gap: 18px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .abas-navegacao::-webkit-scrollbar { display: none; }
  .faq-pergunta { font-size: 16px; }

  /* --- Página de carrinho: cada item vira um bloco --- */
  .carrinho-tabela__cabecalho { display: none; }
  .carrinho-linha {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "imagem  info"
      "imagem  quantidade"
      "total   total";
    gap: 6px 14px;
    padding: 18px 0;
  }
  .carrinho-linha img { grid-area: imagem; width: 80px; height: 80px; }
  .carrinho-linha__info { grid-area: info; }
  .carrinho-linha__quantidade { grid-area: quantidade; }
  .carrinho-linha__total { grid-area: total; text-align: left; font-size: 16px; }
  .carrinho-linha__remover { position: absolute; right: 0; }
  .carrinho-linha { position: relative; }

  /* --- Aviso de cookies empilhado --- */
  .aviso-cookies .container { flex-direction: column; text-align: center; gap: 14px; }
  .aviso-cookies { font-size: 12px; }

  /* --- Flutuantes um pouco menores --- */
  .botao-whatsapp-flutuante { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .botao-whatsapp-flutuante svg { width: 26px; height: 26px; }
  .botao-topo { width: 42px; height: 42px; right: 16px; bottom: 76px; }
  .aviso-flutuante { left: 16px; right: 16px; top: auto; bottom: 140px; justify-content: center; }
}


/* ==========================================================================
   CELULARES (até 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .secao-titulo { font-size: 24px; }
  .banner__titulo { font-size: 26px; }

  /* Um produto por linha na grade, com card mais largo e legível */
  .grade-produtos,
  .grade-produtos--tres { grid-template-columns: 1fr; gap: 30px; }
  .vitrine__trilho { grid-auto-columns: 74%; }

  .grade-categorias { grid-template-columns: 1fr; }
  .card-categoria { aspect-ratio: 16 / 10; }

  .instagram__grade { grid-template-columns: repeat(2, 1fr); }

  .gaveta-menu { width: 100%; max-width: 100%; }
  .produto-info__nome { font-size: 22px; }
  .categoria-cabecalho__titulo { font-size: 28px; }
}


/* ==========================================================================
   CELULARES PEQUENOS (320px a 360px)
   ========================================================================== */
@media (max-width: 360px) {
  .container,
  .container-estreito { padding: 0 14px; }

  .logo__nome { font-size: 19px; letter-spacing: 0.1em; }
  .logo__slogan { display: none; }
  .icone-acao { width: 38px; height: 38px; }
  .icone-acao svg { width: 19px; height: 19px; }

  .secao-titulo { font-size: 22px; }
  .banner__titulo { font-size: 23px; }
  .banner-principal { min-height: 360px; }

  .vitrine__trilho { grid-auto-columns: 82%; }
  .botao { padding: 12px 20px; font-size: 11px; }
}


/* ==========================================================================
   IMPRESSÃO — versão limpa da página
   ========================================================================== */
@media print {
  .cabecalho, .faixa-topo, .rodape, .banner-principal,
  .botao-whatsapp-flutuante, .botao-topo, .aviso-cookies,
  .gaveta-carrinho, .gaveta-menu, .sobreposicao { display: none !important; }
  body { color: #000; }
}