/* ============================================================
   Livexa — correções de mobile compartilhadas por todas as páginas
   Carregado DEPOIS do <style> de cada página (vence empates).
   ============================================================ */

/* ------------------------------------------------------------
   F4 — sticky voltar a funcionar
   `overflow:hidden` num ancestral transforma ele em contexto de
   rolagem e anula `position:sticky`. `overflow-x:clip` corta o
   mesmo estouro lateral SEM criar contexto de rolagem.
   ------------------------------------------------------------ */
/* Safari < 16 nao conhece `clip` e ignora a linha: fica com `hidden`,
   ou seja, sem sticky mas tambem sem rolagem lateral — que e melhor que
   o contrario. Safari 16+, Chrome e Firefox pegam a segunda linha. */
html, body { max-width: 100%; overflow-x: hidden; }
html, body { max-width: 100%; overflow-x: clip; }

body > div[style*="overflow:hidden"],
body > div[style*="overflow: hidden"] {
  overflow-x: hidden !important;   /* fallback p/ Safari < 16 */
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ------------------------------------------------------------
   F1 — filhos de flex/grid precisam poder encolher
   Um item de flex/grid tem `min-width:auto`, ou seja, nunca fica
   menor que o próprio min-content. Com o layout desktop em 390px
   isso empurra título, texto e CTA para fora da tela — e o
   `overflow` do ancestral apaga o que sobrou.
   As páginas escrevem estilo inline compacto (`display:flex`) e
   espaçado (`display: flex`); as duas formas entram aqui.

   Só contêineres entram na regra. Aplicada em <a>/<span>/<button>
   ela faz link curto ("Saiba mais") colapsar em uma letra por
   linha — nesses o min-content é justamente o que os protege.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  [style*="display:flex"]  > div, [style*="display:flex"]  > section,
  [style*="display: flex"] > div, [style*="display: flex"] > section,
  [style*="display:grid"]  > div, [style*="display:grid"]  > section,
  [style*="display: grid"] > div, [style*="display: grid"] > section,
  [style*="display:flex"]  > form, [style*="display: flex"] > form,
  [style*="display:grid"]  > form, [style*="display: grid"] > form,
  [style*="display:flex"]  > ul,   [style*="display: flex"] > ul,
  [style*="display:grid"]  > ul,   [style*="display: grid"] > ul { min-width: 0; }

  /* URLs e e-mails longos podem quebrar em vez de esticar a caixa.
     `break-word` e não `anywhere`: `anywhere` derruba o min-content
     para um caractere e faz o flex encolher o link até sumir
     (foi o que aconteceu com o "Saiba mais" da barra do topo). */
  a[href^="http"], a[href^="mailto:"] { overflow-wrap: break-word; }
}

/* ------------------------------------------------------------
   F5 — rodapé de 4 colunas
   No desktop são quatro: marca | Plataforma | Empresa | Suporte.
   No mobile a marca ocupa a linha inteira e os grupos de links
   ficam dois por linha (Plataforma ao lado de Empresa, Suporte
   na linha de baixo).

   Os dois seletores porque o site tem dois markups de rodapé: a
   home e /recursos trazem o grid inline (`1.6fr 1fr 1fr 1fr`), as
   outras nove usam a classe `.lv-footer-grid`.
   ------------------------------------------------------------ */
@media (max-width: 900px) {

  footer [style*="1.6fr 1fr 1fr 1fr"],
  footer .lv-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 20px !important;
  }

  /* a coluna da marca (logo, frase, contatos) atravessa as duas */
  footer [style*="1.6fr 1fr 1fr 1fr"] > :first-child,
  footer .lv-footer-grid > :first-child { grid-column: 1 / -1; }

  /* o max-width de 300px foi pensado para a coluna de 1.6fr do desktop */
  footer p[style*="max-width: 300px"],
  footer p[style*="max-width:300px"] { max-width: 44ch !important; }

  /* Alvo de toque de 44px sem inflar o espaçamento entre os links.
     As duas grafias do estilo inline: a home e /recursos escrevem
     `flex-direction: column`, as outras nove `flex-direction:column`. */
  footer [style*="flex-direction: column"],
  footer [style*="flex-direction:column"] { gap: 2px !important; }

  footer [style*="flex-direction: column"] > a,
  footer [style*="flex-direction:column"] > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* o ícone não é comprimido junto com o texto ao lado */
  footer a > i { flex: 0 0 auto; }

  /* os botões de ícone do rodapé (Instagram, telefone) em 44px.
     A home não usa a classe .lv-social, as páginas internas usam —
     por isso os dois seletores. */
  footer a.lv-social,
  footer a[style*="width:36px"],
  footer a[style*="width: 36px"] {
    width: 44px !important;
    height: 44px !important;
  }

  /* a linha de CNPJ + links legais no fim */
  footer [style*="border-top"] a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ------------------------------------------------------------
   F3 — menu hambúrguer
   O `.lv-navlinks` é marcado pelo mobile.js, que detecta a
   lista de links dentro do <nav> nas duas variantes de markup.
   ------------------------------------------------------------ */

/* Desktop: nada aparece. */
.lv-burger { display: none; }
.lv-mobile-panel { display: none; }

@media (max-width: 900px) {

  /* a fileira de links horizontal sai de cena */
  .lv-navlinks { display: none !important; }

  .lv-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(42, 26, 94, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
    color: #2A1A5E;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, border-color .18s ease;
  }
  .lv-burger:hover { background: #fff; border-color: rgba(42, 26, 94, .26); }
  .lv-burger:focus-visible { outline: 2px solid #8640E9; outline-offset: 2px; }

  /* o logo e o CTA encolhem para os três caberem na barra */
  nav a > img[alt*="Livexa"] { height: 34px !important; }

  /* o CTA cabe ao lado do logo + hambúrguer sem o ícone */
  .lv-nav-cta {
    padding: 10px 15px !important;
    font-size: 13px !important;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .lv-nav-cta i { display: none !important; }

  /* a barra do nav nunca quebra em duas linhas */
  nav > div { flex-wrap: nowrap !important; gap: 10px !important; }

  /* ---- painel ---- */
  .lv-mobile-panel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #FFFDF8;
    border-bottom: 1px solid rgba(42, 26, 94, .1);
    box-shadow: 0 30px 60px -30px rgba(20, 5, 60, .45);
    padding: 8px 20px 18px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* fechado */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .lv-mobile-panel[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .lv-mobile-panel a {
    display: block;
    padding: 13px 4px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #2A1A5E;
    text-decoration: none;
    border-bottom: 1px solid rgba(42, 26, 94, .07);
  }
  .lv-mobile-panel a:last-child { border-bottom: 0; }
  .lv-mobile-panel a[data-accent="true"] { color: #8640E9; font-weight: 600; }
  .lv-mobile-panel a:focus-visible { outline: 2px solid #8640E9; outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-mobile-panel { transition: none; }
}

/* ------------------------------------------------------------
   F6 — campos de formulário
   Abaixo de 16px o Safari iOS amplia a página ao focar o campo,
   e não desfaz o zoom depois. Os campos vinham com 14px.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .lvinput,
  .lvinput[type="text"],
  .lvinput[type="email"],
  .lvinput[type="tel"],
  select.lvinput,
  textarea.lvinput {
    font-size: 16px !important;
    min-height: 46px;
  }
  textarea.lvinput { min-height: 96px; }
}

/* ------------------------------------------------------------
   F9 — alvos de toque da barra do Grupo Magazord
   O "×" tinha 9×16px. A barra só existe na home.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .lv-topbar-close {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%);
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
  }
  /* nada passa por baixo do botão de fechar */
  .lv-topbar {
    padding-right: 56px !important;
    padding-left: 20px !important;
  }
  /* o link não encolhe: quem cede espaço é o texto ao lado, que já
     quebra em duas linhas. Sem isto ele vira 40px e transborda sobre o × */
  .lv-topbar-link {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


/* ------------------------------------------------------------
   F10 — divisórias verticais órfãs
   Os três números (2M+ / R$ 150M+ / 14 anos) vinham em
   `repeat(3,1fr)` separados por `border-left`. Empilhados, as
   divisórias sobram como dois traços soltos à esquerda.
   Vale para a home e /recursos; as outras páginas já anulam
   isso nas media queries próprias.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  [style*="border-left: 1px solid rgba(42, 26, 94, 0.1)"] {
    border-left: none !important;
  }
}

/* ------------------------------------------------------------
   F11 — ícones decorativos atrás do texto
   No desktop os ícones de 110px ficam no vazio à direita do
   card. Com o card estreito o texto passa por cima deles.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  i[style*="position: absolute"][style*="font-size: 110px"],
  i[style*="position:absolute"][style*="font-size:110px"] {
    font-size: 74px !important;
    right: -6px !important;
    opacity: .45;
  }
}

/* ------------------------------------------------------------
   F12 — os mini-cards de "Plataforma Completa"
   Ficavam em duas colunas de ~160px, com título em duas linhas
   e descrição de 11,5px quebrando em três. A sintaxe inline
   `1fr 1fr` só era neutralizada dentro de <form>.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  :not(form) > [style*="grid-template-columns: 1fr 1fr"],
  :not(form) > [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------
   F17 — aviso de cookies mais compacto
   Ocupava 254px, quase um terço da tela do iPhone, cobrindo o
   hero na chegada. Sem `safe-area-inset-bottom` os botões
   encostavam na barra de gestos.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  #lv-cookie-banner {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }
  /* o ícone de 40px devolve a largura para o texto respirar */
  #lv-cookie-banner > div > span[aria-hidden="true"] { display: none !important; }
  #lv-cookie-banner > div { gap: 0 !important; }
  #lv-cookie-banner button { padding: 11px 16px !important; }
}

/* ------------------------------------------------------------
   F16 — depoimentos em carrossel
   Empilhados, os quatro cards rendiam 1.405px de rolagem
   vertical. Numa faixa que desliza, o gesto é o que o mobile já
   espera e fica visível que existe mais de um caso.
   Só CSS: scroll-snap, sem JS e sem mudar o markup.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  #testimonials [style*="repeat(2, minmax(0px, 1fr))"],
  #testimonials [style*="repeat(2,minmax(0,1fr))"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* espaço para a sombra do card não ser cortada */
    padding-bottom: 6px;
  }
  #testimonials [style*="repeat(2, minmax(0px, 1fr))"]::-webkit-scrollbar,
  #testimonials [style*="repeat(2,minmax(0,1fr))"]::-webkit-scrollbar { display: none; }

  #testimonials [style*="repeat(2, minmax(0px, 1fr))"] > *,
  #testimonials [style*="repeat(2,minmax(0,1fr))"] > * {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  #testimonials [style*="repeat(2, minmax(0px, 1fr))"] { scroll-behavior: auto; }
}