/* ============================================================================
   responsive.css — camada de responsividade do site Sellum
   ----------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   O site é servido como HTML estático com um build já compilado do Tailwind v4
   (css/styles.css). Não há package.json nem etapa de build disponível, então
   NÃO é possível adicionar novas utilities responsivas (md:, lg:, …) no HTML:
   elas simplesmente não existem no CSS compilado e não teriam efeito algum.
   O HTML inteiro usa apenas 23 classes responsivas distintas, quase todas no
   único breakpoint md: (768px) — daí a responsividade fraca.

   Por isso a responsividade é resolvida aqui, em CSS autoral, com media
   queries reais sobre a estrutura existente.

   ESPECIFICIDADE — LEIA ANTES DE EDITAR
   As utilities do build carregam o hack do Tailwind v4 `:not(#\#)` repetido 8x,
   o que dá especificidade (8,1,0). Sobrescrevê-las de um stylesheet normal exige
   !important.

   ARMADILHA: o preflight do build traz
     *,:after,:before,::backdrop { box-sizing; border; margin:0; padding:0 }
   com o MESMO hack repetido 16x — especificidade (16,0,0). Ou seja, QUALQUER
   `margin` ou `padding` declarado aqui sem !important é silenciosamente
   descartado, mesmo com seletor de classe e mesmo carregando por último.
   Toda regra de margin/padding neste arquivo precisa de !important.

   ORDEM DE CARGA
   Este arquivo precisa vir DEPOIS de css/styles.css e do <style> inline.

   CONTRATO DE DESIGN
   O layout desktop (>= 1024px) permanece pixel-idêntico ao atual. Todas as
   clamp() abaixo têm o teto exatamente no valor de desktop medido, e as media
   queries de layout são todas max-width.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. TIPOGRAFIA FLUIDA
   Antes: tamanhos fixos (h1 48px, h2 36px, CTA 48px, lead 20px) idênticos em
   360px e em 1440px. A 390px o H2 de #produtos quebrava em "Da prospecção do /
   lead," e o H2 do CTA ocupava a tela inteira.
   Cada clamp() interpola de 360px até 1024px e trava no valor de desktop.
   --------------------------------------------------------------------------- */

/* !important porque o <h1> traz um style inline vindo do build; sem ele esta
   regra perderia. Quem manda no tamanho do título do hero é ESTA linha — o
   inline do HTML é inerte, ainda que ambos estejam sincronizados. */
#hero h1 {
  font-size: clamp(32px, calc(10.31px + 6.02vw), 72px) !important;
  line-height: 1.2 !important;
}

/* Títulos de seção (utility text-[36px] do build) */
.text-\[36px\] {
  font-size: clamp(26px, calc(20.6px + 1.51vw), 36px) !important;
  line-height: 1.22 !important;
}

/* Título do CTA (utility text-[48px] do build) */
.text-\[48px\] {
  font-size: clamp(30px, calc(20.2px + 2.71vw), 48px) !important;
  line-height: 1.2 !important;
}

/* Parágrafos de apoio / lead */
.text-\[20px\] {
  font-size: clamp(16px, calc(13.8px + 0.6vw), 20px) !important;
  line-height: 1.5 !important;
}

/* Quebra de linha equilibrada nos títulos — evita a "órfã" de uma palavra
   sozinha na última linha. Degrada sem efeito em browsers antigos. */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* EXCEÇÃO: o H1 do hero. Ele não é texto corrido — a segunda linha é montada
   por JS, palavra a palavra, em spans inline-block (.hero-word-clip) que são
   recriados a cada troca de frase. Com `balance` o navegador reavalia a quebra
   sobre essa estrutura instável e pode separar "com" de "IA nativa", jogando a
   frase em duas linhas.
   `nowrap` no wrapper garante que a frase rotativa fique sempre inteira numa
   linha só. Com o título em 72px a mais larga ("com força de vendas") passou
   a pedir mais espaço, e por isso a caixa do hero foi de 768 para 960px em
   site.css — no mobile encolhe junto com a fonte. */
#hero h1 {
  text-wrap: wrap;
}

.hero-phrase-wrap {
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   2. CABEÇALHOS DE SEÇÃO — ponte para tablet
   Antes: `md:flex-row md:items-start md:justify-between` virava 2 colunas já em
   768px, espremendo o H2 em uma coluna estreita (3 linhas quebradas) enquanto
   sobrava largura. São 5 ocorrências, todas cabeçalhos "título | descrição".
   Agora só viram 2 colunas a partir de 900px.
   O seletor combina as duas classes para NÃO atingir a barra inferior do
   rodapé, que usa `md:items-center` e deve continuar em linha.
   --------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .md\:items-start.md\:justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
}


/* ---------------------------------------------------------------------------
   3. HERO — densidade em telas pequenas
   Antes: pt-28 (112px) + um bloco min-h-[520px] com justify-end deixavam ~325px
   de vazio acima do H1 em um viewport de 844px de altura.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #hero {
    padding-top: 14px !important;
  }
}

@media (max-width: 479px) {
  #hero {
    padding-top: 12px !important;
  }
}


/* ---------------------------------------------------------------------------
   4. CARROSSEL DE PRODUTOS — o defeito mais grave encontrado
   Antes: .products-carousel tinha padding-inline: 64px FIXO. Em um viewport de
   390px sobravam 350 - 128 = 222px úteis para um card de 340px (w-[340px]),
   então o card aparecia cortado nos dois lados simultaneamente, com as setas
   de navegação por cima do conteúdo.
   Agora o respiro lateral acompanha o container (20px no mobile → 64px no
   desktop) e o card encolhe para caber, deixando o próximo card "espiando",
   que é a affordance correta de que a lista rola.
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .products-carousel {
    padding-left: clamp(20px, 4.5vw, 64px) !important;
    padding-right: clamp(20px, 4.5vw, 64px) !important;
    scroll-padding-inline: clamp(20px, 4.5vw, 64px) !important;
  }

  /* 100vw - 96px = 20px de padding do container + 20px de padding do carrossel
     de cada lado, + 16px reservados para a "espiada" do card seguinte.
     Determinístico em qualquer largura (78vw errava por 1px em 360px). */
  .products-carousel > li {
    width: min(340px, calc(100vw - 96px)) !important;
  }
}

/* Setas: abaixo de 768px elas ficam por cima do card (não há margem lateral
   sobrando para posicioná-las fora). A faixa rola nativamente com swipe e com
   arrasto, então some com elas — o card seguinte "espiando" já sinaliza que a
   lista continua. Critério é a LARGURA, não o tipo de ponteiro: uma janela
   estreita no desktop sofre exatamente a mesma sobreposição. */
@media (max-width: 767px) {
  .carousel-btn {
    display: none !important;
  }
}

/* Entre 768px e 1023px as setas continuam, com alvo de toque de 44px
   (estavam 40x40, abaixo do mínimo das WCAG 2.2). */
@media (min-width: 768px) and (max-width: 1023px) {
  .carousel-btn {
    width: 44px !important;
    height: 44px !important;
  }
}


/* ---------------------------------------------------------------------------
   5. GRID DE INTEGRAÇÕES (ERP / Frete / Pagamento)
   Antes: .erp-cell tinha width/height fixos de 168px. Em 360px de viewport
   cabiam 2 células (336px) num container de ~280px, então caía para 1 por
   linha e a seção virava uma coluna altíssima.
   Agora a célula é proporcional: sempre 2 por linha no mobile, 3 no tablet.
   O -1px de margem que colapsa as bordas adjacentes é preservado.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .erp-cell {
    /* flex-basis, não width: a regra base usa flex e o basis tem precedência */
    flex: 0 0 50% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 132px;
    padding: 20px 12px !important;
    gap: 10px;
  }

  /* Sem regra de altura aqui de propósito: quem dimensiona os logos é o
     cálculo óptico por largura no <style> de index.html. Fixar height no
     mobile brigaria com aquelas larguras e distorceria as marcas. Como a
     célula fica estreita, o `max-width: 100%` da regra base já reduz as
     marcas largas proporcionalmente. */

  /* Com um número ímpar de células a última sobra sozinha na última linha.
     Centralizada em meia linha ela fica com a divisória solta no vazio, já
     que as divisórias são desenhadas à direita/abaixo de cada célula. Ocupar
     a linha inteira fecha o grid — e a divisória some, recortada pelo
     `overflow: hidden`. aspect-ratio precisa cair junto: em 100% de largura
     ela geraria uma célula de altura igual ao viewport. */
  .erp-cell:last-child:nth-child(odd) {
    flex-basis: 100% !important;
    aspect-ratio: auto;
    height: 112px;
    min-height: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Uma única linha, como no desktop: com 5 células, 3 por linha deixaria a
     segunda linha incompleta e centralizada, com o mesmo problema de
     divisória solta descrito acima. */
  .erp-cell {
    flex: 1 1 0 !important;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}


/* ---------------------------------------------------------------------------
   6. DIAGRAMA DE INTEGRAÇÕES (.integ-card)
   Antes: os itens são posicionados em % absolutos e os rótulos têm
   white-space: nowrap, então o item mais à direita vazava do card
   (30px cortados em 360px, 4px em 390px).
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .integ-label {
    font-size: 10px;
    padding: 3px 7px !important;
  }

  /* As posições mobile do build (top 6–48%, left 4–63%) foram pensadas para os
     rótulos, que são white-space: nowrap e chegam a ~120px. Em 350px de card
     os pares acabavam se sobrepondo — "Plataformas de SAC" por cima de
     "Dashboards", com os círculos Zendesk/PowerBI colidindo.

     Layout determinístico: 3 linhas x 2 colunas. A coluna da esquerda é
     ancorada por `left`, a da direita por `right`, de modo que os rótulos
     cresçam sempre para DENTRO do card. Cada item ocupa ~67px de altura
     (rótulo ~17 + gap 8 + círculo 42), então as linhas ficam em 4% / 26% / 48%
     (15px / 96px / 178px de 370px) — a última termina em ~245px, bem acima do
     logo central, que começa em ~278px (bottom: 24px + box de 68px).

     Os pares foram distribuídos para que a soma das larguras caiba: o rótulo
     mais largo ("Controles em planilhas") divide linha com o mais estreito
     do lado direito.

     As linhas pontilhadas acompanham sozinhas: o script do rodapé redesenha
     os paths a cada requestAnimationFrame a partir da posição real dos ícones. */

  /* SEM !important, e de propósito — não é esquecimento.
     O arrasto do diagrama escreve `left`/`top` INLINE no item a cada
     touchmove. Declaração !important do autor vence estilo inline, então com
     `top: 4% !important` aqui o item ficava cravado no lugar durante todo o
     percurso: o dedo andava, a posição não. Só a absorção no logo (que roda
     por `transform`/`opacity`, não sobrescritos) aparecia — daí a impressão de
     que a peça "some" sem nunca ter se movido.
     A sobrescrita das posições do build continua valendo pela ordem de carga:
     lá em css/styles.css os seletores são de classe simples e este arquivo
     carrega depois. */
  .integ-item--vtex {
    top: 4%;
    left: 3%;
    right: auto;
  }

  /* Coluna da direita: ancorada por `right` para o rótulo (white-space:
     nowrap) crescer para dentro do card, nunca para fora.
     `width: max-content` é a largura que o item já tinha por shrink-to-fit —
     visualmente idêntico — mas deixa a caixa SOBREDETERMINADA no instante em
     que o arrasto define `left`. Com left + width + right todos resolvidos, a
     regra do CSS manda ignorar o `right`; sem isso o item apenas esticaria a
     própria largura em vez de acompanhar o dedo. */
  .integ-item--pipedrive {
    top: 4%;
    left: auto;
    right: 3%;
    width: max-content;
  }

  .integ-item--excel {
    top: 26%;
    left: 3%;
    right: auto;
  }

  .integ-item--powerbi {
    top: 26%;
    left: auto;
    right: 3%;
    width: max-content;
  }

  .integ-item--chatgpt {
    top: 48%;
    left: 3%;
    right: auto;
  }

  .integ-item--zendesk {
    top: 48%;
    left: auto;
    right: 3%;
    width: max-content;
  }
}

/* Arrastar é gesto próprio, não rolagem. Sem touch-action o navegador assume o
   toque como scroll no compositor e o preventDefault() do touchmove chega tarde
   demais para cancelar — a página desliza e a bolinha fica para trás.
   Fora da media query porque vale para qualquer tela com toque, inclusive
   notebook com tela sensível, onde `pointer: coarse` não casa. */
.integ-item {
  touch-action: none;
}


/* ---------------------------------------------------------------------------
   6b. PILLS DE FUNCIONALIDADES (Force e Copiloto) — carrossel no mobile
   Antes: .copilot-feat-grid é flex-wrap: wrap, então as 5 pills quebravam em
   4-5 linhas empilhadas, comendo altura da tela sem comunicar que formam um
   conjunto navegável.
   Agora: faixa horizontal rolável com scroll-snap, sangrando até as bordas da
   tela (margin negativa compensada por padding) para deixar claro que a lista
   continua. Vale para as duas navs (Force e Copiloto).
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .copilot-feat-grid {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Sangra 20px para cada lado (padding do .container-page no mobile) e
       devolve como padding, para a primeira pill nascer alinhada ao texto e a
       última poder encostar na borda. */
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .copilot-feat-grid::-webkit-scrollbar {
    display: none;
  }

  .copilot-feat-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}


/* ---------------------------------------------------------------------------
   6c. DEPOIMENTOS — carrossel no mobile
   Antes: .tst-grid é grid de 1 coluna no mobile, então os 2 cards de
   min-height 360px empilhavam e ocupavam ~920px de altura, com bastante área
   vazia em cada um (o autor é ancorado no rodapé do card por
   justify-content: space-between).
   Agora: faixa horizontal com scroll-snap mandatory, mesma sangria e mesma
   "espiada" do carrossel de produtos, para manter a linguagem consistente.
   No desktop segue o grid original de 2 colunas (1.6fr 1fr).
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .tst-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tst-grid::-webkit-scrollbar {
    display: none;
  }

  /* 100vw - 72px deixa ~32px do card seguinte à mostra. Os cards continuam
     com altura igual porque são flex items com align-items: stretch. */
  .tst-card {
    flex: 0 0 auto;
    width: min(420px, calc(100vw - 72px));
    scroll-snap-align: start;
  }

  /* Régua de logos de imprensa (Valor, O Globo, terra, iG).
     Era flex-wrap: wrap com gap de 40px, então quebrava em 2 linhas
     desalinhadas no mobile. Vira faixa rolável na mesma linguagem dos demais
     carrosséis, com gap menor para caber mais marcas na primeira tela. */
  .tst-logos {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 28px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tst-logos::-webkit-scrollbar {
    display: none;
  }

  .tst-brand {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}


/* ---------------------------------------------------------------------------
   6d. CABEÇALHO — menu sanduíche no mobile
   O CSS base do cabeçalho está em css/site.css (é design, não responsividade).
   Aqui fica só o comportamento por breakpoint.

   POR QUE 899px
   Medido: logo (118) + menu (355) + Login/CTA (238) + gaps (32) + padding
   lateral (40) = 783px de conteúdo rígido. Abaixo de ~900px não sobra folga
   para o menu ficar de fato centralizado e os itens começam a se comprimir.

   O QUE HAVIA ANTES
   A barra quebrava em duas linhas e o menu virava uma faixa rolável na
   horizontal. Funcionava, mas: (a) o cabeçalho fixo comia 172px de tela,
   (b) "Recursos" perdia todo o submenu de produtos e soluções e (c) "Suporte"
   e "Empresa" simplesmente não existiam no celular.

   AGORA
   Menu, Login e CTA ficam dentro do painel do sanduíche, montado por
   js/header.js a partir do próprio cabeçalho. A barra mobile fica com o logo
   à esquerda e o botão sanduíche à direita.

   .hdr-has-burger é adicionada pelo JS só depois de montar o painel — sem ela
   nada aqui esconde o menu antigo. Se o script falhar, o cabeçalho anterior
   continua utilizável em vez de restar um logo sozinho.
   --------------------------------------------------------------------------- */

/* Botão sanduíche: escondido por padrão, revelado no breakpoint mobile. */
.hdr-burger {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  /* !important em padding/border/color: o preflight (16,0,0) zera padding e
     border em <button> e aplica `color: inherit`. */
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
  border-radius: 12px;
  color: #e6e6e6 !important;
  cursor: pointer;
}

.hdr-burger__ico {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

/* As três barras ficam em posição absoluta (topo / meio / base) para que virar
   "X" seja só transform — sem layout, roda no compositor. */
.hdr-burger__ico > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.15s ease;
}

.hdr-burger__ico > span:nth-child(1) {
  top: 0;
}

.hdr-burger__ico > span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hdr-burger__ico > span:nth-child(3) {
  bottom: 0;
}

/* 6,25px = distância do centro de cada barra externa até o centro do ícone
   (altura 14, barras de 1,5). É o deslocamento que faz as duas se cruzarem
   exatamente no meio. */
.hdr-burger[aria-expanded="true"] .hdr-burger__ico > span:nth-child(1) {
  transform: translateY(6.25px) rotate(45deg);
}

.hdr-burger[aria-expanded="true"] .hdr-burger__ico > span:nth-child(2) {
  opacity: 0;
}

.hdr-burger[aria-expanded="true"] .hdr-burger__ico > span:nth-child(3) {
  transform: translateY(-6.25px) rotate(-45deg);
}

/* --- Painel --- */
/* Vai da base do cabeçalho até o fim da tela. --hdr-b é medido pelo JS na hora
   de abrir, porque a altura da linha de news varia com a frase.
   O painel é filho do <header> (z-40), então o z-index aqui só o ordena
   dentro daquele contexto de empilhamento. */
.hdr-mobile {
  display: block;
  position: fixed;
  top: var(--hdr-b, 103px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #080808;
  padding: 18px 20px 48px !important;
}

.hdr-mobile[hidden] {
  display: none;
}

.hdr-mob-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Os dois botões são clones dos reais, então já herdam .hdr-btn. Aqui só
   passam a ocupar a linha inteira, como na referência. */
.hdr-mobile .hdr-btn {
  display: flex;
  width: 100%;
  height: 48px;
  font-size: 15px;
}

.hdr-mobile .hdr-btn-plain {
  justify-content: center;
  border: 1px solid #2b2b2b !important;
}

/* Os utilitários já vêm depois da borda inferior do último item do menu —
   um separador próprio desenharia uma segunda linha a poucos pixels da
   primeira. Aqui só o respiro que os separa do bloco de cima. */
.hdr-mob-utils {
  display: block;
  margin-top: 22px !important;
}

.hdr-mob-menu {
  display: block;
  margin-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Linha do menu — item simples ou gatilho de acordeão: mesma altura, mesma
   tipografia, alvo de toque de 48px. */
.hdr-mob-link,
.hdr-mob-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.2;
  color: #f4f4f4 !important;
  text-align: left;
  cursor: pointer;
}

.hdr-mob-trigger__rot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hdr-mob-trigger[aria-expanded="true"] .hdr-chev {
  transform: rotate(180deg);
}

.hdr-mob-acc__painel {
  padding: 4px 2px 14px !important;
}

.hdr-mob-acc__painel[hidden] {
  display: none;
}

.hdr-mob-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0 !important;
  font-size: 15px;
  line-height: 1.2;
  color: #e0e0e0 !important;
}

.hdr-mob-prod__ico {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  color: #8f8f8f;
}

/* Soluções: as mesmas pílulas do mega-menu, alinhadas sob o nome do produto
   (26px = 16 do ícone + 10 do gap). */

.hdr-mob-sub a {
  display: block;
  padding: 11px 2px !important;
  font-size: 15px;
  line-height: 1.2;
  color: #c9c9c9 !important;
}

.hdr-mob-sub a.is-secondary {
  color: #8f8f8f !important;
}

.hdr-mob-sub a[aria-current="true"] {
  color: #fff !important;
}

.hdr-mob-globe {
  flex: 0 0 auto;
  width: 15px !important;
  height: 15px !important;
  color: #8f8f8f;
}

@media (max-width: 899px) {
  /* O cabeçalho fixo passa a ter duas linhas curtas: news (39) + barra (56). */
  html {
    scroll-padding-top: 108px;
  }

  .hdr-burger {
    display: inline-flex;
  }

  .hdr-bar {
    min-height: 56px;
  }

  /* Tudo que migrou para dentro do painel sai da barra. Só some quando o JS
     confirmou que o painel existe. */
  .hdr-has-burger .hdr-nav,
  .hdr-has-burger .hdr-col-b > .hdr-btn,
  .hdr-has-burger .hdr-util {
    display: none;
  }

  /* Sem os utilitários ao lado, a frase do webinar tem a linha inteira e não
     precisa mais da versão abreviada. */
  .hdr-has-burger .hdr-news-full {
    display: inline;
  }

  .hdr-has-burger .hdr-news-short {
    display: none;
  }

  /* O painel de 4 colunas do mega-menu não cabe, e "hover" não existe no
     toque. Seu conteúdo está reproduzido dentro do sanduíche. */
  .hdr-mega {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdr-burger__ico > span {
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
   6e. LINHA DE NEWS no mobile
   Os três utilitários (idioma / Suporte / Empresa) pediam 336px dos 350px
   úteis em 390px e espremiam a frase do webinar até largura ZERO.

   Antes, dois deles eram simplesmente escondidos no celular. Agora os três
   estão dentro do menu sanduíche (bloco 6d), então esta linha fica só com a
   frase e o botão de inscrição — e a frase completa volta a caber.

   As regras abaixo são a rede de segurança para telas muito estreitas ou
   fontes maiores: a frase encolhe e trunca em vez de sumir.
   --------------------------------------------------------------------------- */

@media (max-width: 899px) {
  /* Sem os utilitários do lado direito, `space-between` não tem mais nada
     para separar e a frase ficava encostada na margem esquerda. Centralizada,
     ela lê como o aviso único que de fato é. */
  .hdr-news-bar {
    justify-content: center;
  }

  /* flex-grow 0 para o bloco medir exatamente o conteúdo — com grow 1 ele
     ocuparia a linha inteira e a centralização não teria efeito visível.
     shrink 1 preservado: em telas muito estreitas a frase ainda encolhe e
     trunca em vez de estourar a linha. */
  .hdr-news {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .hdr-news-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Abaixo de 400px a frase completa (179px) disputa espaço com o botão de
   inscrição; a versão curta cabe inteira e evita as reticências. */
@media (max-width: 399px) {
  .hdr-has-burger .hdr-news-full {
    display: none;
  }

  .hdr-has-burger .hdr-news-short {
    display: inline;
  }
}


/* ---------------------------------------------------------------------------
   7. RODAPÉ — auditado, sem alteração (intencional)
   A suspeita inicial era que as 2 colunas de 159px em 390px estivessem
   apertadas demais. Verificado na renderização: os rótulos são curtos, a coluna
   "Baixe o app" já ocupa a linha inteira via col-span-2 e os dois badges cabem
   lado a lado. Forçar 1 coluna só deixaria o rodapé muito mais alto.
   Registrado aqui para não ser "reinvestigado" depois.

   Nota para quem for mexer: forçar grid-template-columns: 1fr neste elemento
   NÃO produz uma coluna só. O último filho tem col-span-2, o que cria uma
   segunda coluna implícita e resulta em colunas desiguais (208px/110px) — pior
   que o padrão atual. Para uma coluna real seria preciso também zerar o span:
   .footer-top-grid > * { grid-column: auto !important; }
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   8. ALVOS DE TOQUE
   Antes: 37 elementos interativos abaixo de 44x44px — o mínimo recomendado
   pelas WCAG 2.2 (2.5.8 Target Size) e pelo HIG da Apple. As listas de
   features/abas tinham 39px de altura.
   Aplicado só em ponteiro grosso (dedo), sem alterar o desktop.
   --------------------------------------------------------------------------- */

@media (pointer: coarse) {
  /* Cabeçalhos clicáveis dos acordeões de features (9 no documento) e os itens
     de feature do Copiloto (10). Nomes conferidos no DOM renderizado. */
  .feature-tab-header,
  .copilot-feat-item:not(.prod-feat__btn) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* As funcionalidades dos cards de produto TAMBÉM são .copilot-feat-item, mas
     ali o botão não é pill: é texto corrido, e a seta do marcador é o ::before
     do <li>, ancorado no topo (top: 0.1em). Esticar esse botão para 44px de
     altura fazia o <button> centralizar o próprio conteúdo na caixa — o rótulo
     descia ~12px e a seta ficava sozinha lá em cima. Por isso a exceção acima.

     O alvo de 44px continua existindo, só que vindo do padding vertical
     (12 + 20,3 da linha + 12 ≈ 44) em vez do min-height: a altura tocável é a
     mesma e a primeira linha do texto permanece no topo, ao lado da seta.
     `vertical-align: top` encosta o inline-block no topo da linha, para o
     cálculo do ::before logo abaixo ser exato — e continua valendo se algum
     rótulo quebrar em duas linhas, porque a seta acompanha a PRIMEIRA.
     padding com !important por causa do preflight do build (ver cabeçalho). */
  .prod-card__lista .prod-feat__btn {
    padding-block: 12px !important;
    vertical-align: top;
  }

  /* Só os itens COM ficha: são os que ganharam o padding acima. Os da loja
     virtual são .prod-feat--inerte (texto puro, <li> de 20px) e continuam com
     a seta no topo, como no desktop — deslocá-los aqui desalinharia justamente
     os que nunca estiveram errados. */
  .prod-card__lista .prod-feat:not(.prod-feat--inerte)::before {
    top: calc(12px + 0.1em);
  }

  footer a,
  .social-ico {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* O próprio alvo de 44px já separa os links; somado ao gap-2 (8px) do build,
     o passo virava 52px e as colunas do rodapé ficavam esparramadas — quase o
     dobro dos 28px do desktop. O respiro passa a sair só do alvo. */
  footer nav > ul {
    gap: 0 !important;
  }

  .social-ico {
    width: 44px;
    height: 44px;
  }
}


/* ---------------------------------------------------------------------------
   9. SALVAGUARDA CONTRA SCROLL HORIZONTAL
   Nenhum overflow de documento foi detectado nos testes (360/390/768/1024/1440),
   mas mídia sem restrição é a causa mais comum de regressão nesse ponto.
   --------------------------------------------------------------------------- */

img,
svg,
video {
  max-width: 100%;
}

/* Exceção: dentro do carrossel e do diagrama a mídia é dimensionada pelo
   próprio componente, e um max-width global distorceria o layout. */
.integ-card svg.integ-lines {
  max-width: none;
}