/* ============================================================
   Overrides custom da Elevo (carregado DEPOIS do main4.css).
   Não editar main4.css (fidelidade ao recorte) — ajustes vêm aqui.
   ============================================================ */

/* --- Autoplay garantido dos marquees (logos de clientes + ticker do hero) ---
   No main4.css o @keyframes fica aninhado dentro de @media (prefers-reduced-motion),
   o que não roda quando o SO tem "reduzir movimento" ligado. Aqui o keyframe é global
   e a animação é incondicional (autoplay é requisito do cliente para os logos). */
@keyframes elevo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.band-track,
.ticker-track {
  animation: elevo-marquee 38s linear infinite !important;
  will-change: transform;
}

/* pausa ao passar o mouse */
.logos-band:hover .band-track,
.ticker:hover .ticker-track {
  animation-play-state: paused !important;
}

/* congelar só para screenshots/preview (?static) */
html.is-static .band-track,
html.is-static .ticker-track {
  animation-play-state: paused !important;
}

/* mesmo em "reduzir movimento", os logos precisam ficar em linha (não quebrar/empilhar) */
@media (prefers-reduced-motion: reduce) {
  .band-track, .ticker-track { flex-wrap: nowrap; }
  .band-set[aria-hidden="true"], .ticker-set[aria-hidden="true"] { display: flex; }
}

/* ============================================================
   AJUSTES DO CARD "Ajustes" (Monday, 13/08) — feedback da cliente
   sobre o layout v5. Cada bloco cita o print correspondente.
   Carregado DEPOIS do main5.css, por isso vence sem !important.
   ============================================================ */

/* [print 1] "aqui o tamanho do espaçamento ficou muito grande"
   Sobra abaixo das listas (Projetos para / Módulos) até o fim do card.
   No main5.css o padding-bottom do .projeto-corpo é 72–110px. */
.projeto-corpo {
  /* Era 72–110px: a lista terminava e sobrava meia tela vazia até o próximo
     card. Aqui fica a folga mínima que ainda separa um card do outro sem
     deixar o de baixo cobrir a última linha da lista. */
  padding-bottom: clamp(34px, 3.4vw, 52px);
}

/* [print 2] "aqui continua com pouco espaço"
   Na Mercado o texto encosta na divisória: falta respiro ENTRE a descrição e
   o bloco das listas.
   ⚠️ Os cards empilham com position:sticky — o próximo sobe POR CIMA do atual.
   Tudo que cresce aqui dentro tem de caber na altura do card, senão a lista é
   coberta pelo card seguinte. Por isso o respiro é medido, não generoso. */
.projeto-texto {
  gap: clamp(20px, 2.2vw, 30px);
}
.projeto-listas {
  padding-top: clamp(20px, 2.2vw, 30px);
}

/* [print 3] "colocar o botão ali ao invés de em cima da foto"
   O CTA saiu de dentro da <figure> (ver Index.cshtml) e agora vive no fluxo do
   texto, logo abaixo da descrição — que é onde a cliente circulou. */
/* O botão sai do fluxo vertical e sobe para o lado do texto: o bloco vira uma
   grade de duas colunas (texto | botão) e o botão ocupa a coluna da direita
   desde a primeira linha. É a altura em que a cliente circulou — na parte de
   cima da foto, não no fim da descrição. */
.projeto-texto > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.projeto-texto > div:first-child > .projeto-sub,
.projeto-texto > div:first-child > .projeto-desc {
  grid-column: 1;
}

.projeto-cta {
  /* No main5.css o botão era absoluto (ancorado sobre a foto). Aqui ele vive na
     segunda coluna, encostado no vão ao lado da imagem. */
  position: static;
  display: flex;
  width: fit-content;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: clamp(4px, .6vw, 10px);
  box-shadow: none;
}

/* No mobile as colunas empilham e não existe "ao lado da foto": a grade some e
   o botão volta a ficar abaixo do texto, alinhado à esquerda. */
@media (max-width: 900px) {
  .projeto-texto > div:first-child {
    display: block;
  }
  .projeto-cta {
    margin-top: clamp(14px, 3.5vw, 20px);
    margin-left: 0;
  }
}

/* [print 4] "essa parte das perguntas frequentes precisa ficar um pouco mais estreito" */
.faq-lista,
.faq-head {
  max-width: min(var(--shell-max), 968px);
}

/* [print 6] "deixar mais proporcional texto e formas, talvez até diminuir um
   pouco o tamanho" — cards do bento no mobile. Alturas e tipografia caem juntas
   para o texto ocupar a caixa em vez de nadar nela. */
@media (max-width: 860px) {
  .result-bento {
    grid-auto-rows: minmax(clamp(112px, 27vw, 148px), auto);
  }
  .result-card {
    padding: clamp(16px, 4.4vw, 24px);
  }
  .result-texto {
    max-width: 20ch;
    font-size: clamp(15px, 4.1vw, 19px);
    line-height: 1.25;
  }
  .result-span-2 .result-texto {
    max-width: 24ch;
    font-size: clamp(16px, 4.5vw, 21px);
  }

  /* A mordida arredondada com a seta continua (é a assinatura da seção). O que
     muda é a escala: os tokens do recorte são FIXOS e, com os cards mais baixos
     ("diminuir um pouco o tamanho"), a mordida ficava grande demais e saltava
     aos olhos. Encolhe junto com o card para voltar a ser detalhe de canto. */
  .result-card.cut-br {
    --bento-selo: clamp(28px, 7.6vw, 34px);
    --bento-cut: calc(var(--bento-selo) + clamp(6px, 1.6vw, 10px));
    --bento-fillet: clamp(10px, 2.6vw, 14px);
  }
}

/* [print 5] "diminuir espaço" — mobile, entre o fim dos Módulos e a próxima
   seção (Metodologia). Fecha a barriga que sobrava no fim do card. */
@media (max-width: 860px) {
  /* O vão tinha TRÊS camadas somadas: a base do card, o rodapé da seção de
     projetos (--space-section-half = 54px no celular) e o topo da seção de
     método. Cortar só a do card deixava ~106px; as três juntas fecham em ~50px. */
  .projeto-corpo {
    padding-bottom: clamp(14px, 3.5vw, 24px);
  }
  .projeto-texto { gap: clamp(20px, 5vw, 28px); }
  .projeto-listas { padding-top: clamp(18px, 4.5vw, 26px); }
  .sec-projetos { padding-bottom: clamp(16px, 4vw, 26px); }
  .sec-metodo { padding-top: clamp(16px, 4vw, 26px); }
}

/* [print 7] "deixar em carrossel automatizado" — os quatro números viram
   carrossel que anda sozinho no celular (autoplay em js/main5.js → provaCarrossel).
   No desktop nada muda: a grade de 4 colunas continua igual. */
@media (max-width: 860px) {
  .prova-grid[data-carrossel] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .prova-grid[data-carrossel]::-webkit-scrollbar { display: none; }
  .prova-grid[data-carrossel] > .prova-cell {
    scroll-snap-align: start;
    padding-inline: 4px;
  }

  .prova-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(16px, 4vw, 24px);
  }
  .prova-dot {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: currentColor;
    opacity: .28;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
  }
  .prova-dot.is-on { opacity: 1; transform: scale(1.25); }
}
/* Fora do mobile os pontos não existem. Precisa ser min-width (e não uma regra
   solta): solta, viria depois do bloco mobile e venceria por ordem, escondendo
   os pontos também no celular. */
@media (min-width: 861px) {
  .prova-dots { display: none; }
}

/* Depoimento em VÍDEO (opcional por depoimento, vem do painel).
   Sem vídeo o slide continua idêntico ao recorte. */
.depo-video {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.depo-video video {
  display: block;
  width: 100%;
  max-height: min(42vh, 320px);
  object-fit: cover;
  background: #000;
}
/* Com vídeo, a fala encolhe para os dois caberem no card. */
.depo-slide.tem-video .depo-fala > p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
}
.depo-slide.tem-video .depo-aspas { display: none; }

/* Botão flutuante de WhatsApp — fixo na viewport, em todas as páginas. */
.wa-float {
  position: fixed;
  /* Duas declarações de propósito: a primeira é o piso que TODO navegador
     entende; a segunda soma env(safe-area-inset-*) para a barra de gestos do
     iPhone. Se o navegador não suportar env(), a segunda é descartada e a
     primeira continua valendo — o botão nunca fica sem posição. */
  right: 16px;
  bottom: 16px;
  right: calc(clamp(14px, 2.2vw, 28px) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(14px, 2.2vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #25D366;
  color: #0b2b16;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.wa-float:hover,
.wa-float:focus-visible {
  background: #1fb959;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}
.wa-float-ic { fill: currentColor; flex: none; }

/* Bolha no mobile: só o ícone, para não cobrir conteúdo. */
@media (max-width: 640px) {
  .wa-float { padding: 14px; gap: 0; }
  .wa-float-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-float:hover, .wa-float:focus-visible { transform: none; }
  .prova-dot { transition: none; }
}

/* --- Header mais enxuto no celular (feedback 14/08) ---
   O botão do menu vinha de `max(44px, --topbar-h - 22px)` e a barra de
   `clamp(64px, 4.8vw, 78px)`: no celular isso vira uma faixa de 64px com um
   quadrado de 44px, que rouba altura da hero e encosta no recorte do painel.
   Aqui a barra e o botão encolhem juntos — 44px continua sendo o alvo de toque
   mínimo confortável, então o botão para em 40px com a área de toque
   preservada pelo padding do link. */
@media (max-width: 560px) {
  :root {
    --topbar-h: 54px;
  }

  .topbar-menu {
    width: 40px;
    height: 40px;
  }
  .topbar-menu svg {
    width: 18px;
    height: 18px;
  }

  /* A logo acompanha, senão fica desproporcional na barra mais baixa. */
  .topbar-brand img {
    width: 104px;
    height: auto;
  }
}

/* --- Botões da hero não passam por baixo da mordida do painel (14/08) ---
   No celular o main5.css dá `flex: 1 1 100%` aos dois botões: eles ocupam a
   largura toda e o de baixo ("Falar agora") corre por trás do recorte branco do
   canto (--panel-cut-w × --panel-cut-h), que é desenhado por cima. Reservando a
   altura do recorte embaixo, os botões terminam antes dele e a mordida volta a
   morder área vazia — como no desktop, onde o painel é alto e isso não acontece. */
@media (max-width: 560px) {
  .panel-brand {
    padding-bottom: calc(var(--panel-cut-h) + clamp(10px, 3vw, 18px));
  }
}

/* --- Rodapé centralizado no celular (14/08) ---
   Em uma coluna, tudo alinhado à esquerda deixa a marca e os links soltos na
   largura da tela. Centralizado, o bloco fecha e a logo vira o eixo.
   Só o alinhamento muda — a ordem e o conteúdo seguem os mesmos. */
@media (max-width: 620px) {
  .rodape-grid {
    justify-items: center;
    text-align: center;
  }

  .rodape-nav,
  .rodape-contato,
  .rodape-redes {
    align-items: center;
  }

  /* O parágrafo da marca quebra em duas linhas: centralizar as duas. */
  .rodape-marca,
  .rodape-marca p {
    text-align: center;
  }

  /* A faixa legal (e-mail, WhatsApp, © e a marca da agência) acompanha. */
  .rodape-legal {
    justify-content: center;
    text-align: center;
  }
}

/* --- Cards de projeto: o card tem de CABER na tela (14/08) ---
   Diagnóstico real: não era o tempo da animação. O conteúdo do card é mais alto
   que a janela, então, quando ele gruda no topo, a lista fica abaixo da dobra e
   o próximo card a cobre antes de o visitante conseguir ler. Dar mais "delay"
   não resolveria — o que está faltando nunca chega a aparecer.

   Aqui tudo que ocupa altura passa a ser medido em vh, para o card fechar
   dentro de uma tela em qualquer monitor:
     - o título gigante deixa de crescer com a LARGURA (11vw dava 164px numa tela
       ampla e sozinho comia 1/5 da altura) e passa a ter teto em vh;
     - a foto ganha teto de altura;
     - os respiros internos encolhem.

   A altura mínima de 118vh continua dando uma pista curta de rolagem: o card
   fica preso um pouco depois de já estar todo visível. O último não tem quem o
   cubra, então volta à altura do próprio conteúdo.
   Só no desktop — no celular os cards não empilham.                            */
@media (min-width: 901px) {
  .projeto-card {
    min-height: 118vh;
  }
  .projeto-card:last-child {
    min-height: 0;
  }

  /* Teto em vh: numa tela baixa o título encolhe junto e o card continua cabendo. */
  .projeto-titulo {
    font-size: min(var(--text-giant), 13vh);
    line-height: 1;
  }

  .projeto-corpo {
    padding-top: clamp(14px, 1.4vw, 22px);
    padding-bottom: clamp(20px, 2vw, 32px);
  }

  .projeto-foto {
    max-height: 42vh;
  }
  .projeto-foto img {
    height: 100%;
    object-fit: cover;
  }

  .projeto-texto {
    gap: clamp(14px, 1.4vw, 22px);
  }
  .projeto-listas {
    padding-top: clamp(14px, 1.4vw, 22px);
  }
}

/* Folga entre o fim dos projetos e a Metodologia (desktop). Somavam o rodapé da
   seção de projetos e o topo da de método, ~90px cada. */
@media (min-width: 901px) {
  .sec-projetos { padding-bottom: clamp(20px, 2vw, 32px); }
  .sec-metodo { padding-top: clamp(28px, 3vw, 44px); }
}

/* --- O card gruda quase rente ao header (14/08) ---
   --stack-top somava 34px de folga abaixo da barra fixa, e a linha divisória do
   card parava longe dela. 6px mantém a linha descolada o suficiente para não
   encostar (o que leria como falha de alinhamento) e fecha o vão.
   --stack-top só é usado por .projeto-card, então mexer aqui não afeta o resto. */
@media (min-width: 901px) {
  .projeto-card {
    top: calc(var(--topbar-h) + 6px);
  }
}

/* --- Seção "Parceiros do seu negócio" na linha de margem do site (17/08) ---
   .elevo-grid usava justify-content: center. As duas colunas não preenchem a
   largura da seção, então a sobra era dividida nos dois lados e o bloco inteiro
   nascia deslocado: em 1900px o "A ELEVO" começava em 312 enquanto Imprensa,
   Depoimentos e o próprio bloco do ecossistema logo abaixo começam em 170.
   Empacotando à esquerda, a seção passa a nascer na mesma linha das outras. */
.elevo-grid {
  justify-content: flex-start;
}

/* Com a seção empacotada à esquerda, a sobra toda passou a cair depois das
   fotos. A coluna dos executivos tinha flex-grow 0 e teto de 620px, então
   parava bem antes da margem e abria um vazio grande. Deixando ela crescer
   (grow 1) as fotos ocupam parte dessa folga; o teto novo evita que virem
   retratos enormes em telas muito largas. Só afeta o desktop: abaixo de 901px
   o main5 já joga flex-basis pra 100% e a coluna ocupa a linha inteira. */
.elevo-execs {
  flex-grow: 1;
  max-width: 820px;
}

/* --- Executivos: texto rente à margem e nomes na mesma linha (17/08) ---
   Substitui o ajuste de 14/08, que alinhava o nome ao papel recuando os dois.

   1) O papel trazia uma régua (border-left) + recuo, e o nome copiava o recuo
      pra acompanhar: o bloco de texto inteiro nascia ~15px à direita da foto.
      Imprensa e Depoimentos começam o texto rente à borda do card, então esta
      seção destoava. Zerando os dois, o texto encosta na margem da foto. */
.exec-papel {
  padding-left: 0;
  border-left: 0;
}
.exec-nome {
  padding-left: 0;
}

/* 2) Com papéis de alturas diferentes (2 linhas x 3 linhas), o nome de cada
      card parava numa altura e a dupla ficava desalinhada. O subgrid faz os
      cards dividirem as mesmas faixas — foto / papel / nome —, então o nome
      começa sempre na mesma linha, não importa o tamanho do papel.
      row-gap: 0 no card porque o subgrid herdaria o gap da lista entre as
      faixas; o respiro entre foto, papel e nome continua vindo das margens. */
@supports (grid-template-rows: subgrid) {
  .elevo-execs {
    grid-template-rows: auto auto auto;
    align-content: start;
  }
  .exec-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .exec-card .exec-foto  { grid-row: 1; }
  .exec-card .exec-papel { grid-row: 2; }
  .exec-card .exec-nome  { grid-row: 3; }
}

/* --- Rodapé: colunas juntas e centralizadas (14/08) ---
   As colunas eram 1fr cada, então cada bloco flutuava no meio do seu terço e
   sobrava um vão grande entre a marca e o menu. Agora cada coluna ocupa a
   largura do próprio conteúdo e o conjunto inteiro é centralizado, com um gap
   fixo entre eles — a informação fica junta em vez de espalhada na largura. */
@media (min-width: 621px) {
  .rodape-grid {
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    justify-items: center;
    text-align: center;
    gap: clamp(32px, 4.5vw, 80px);
  }
  .rodape-nav,
  .rodape-contato,
  .rodape-redes {
    align-items: center;
  }

  /* A faixa legal acompanha: com a grade centralizada, ela alinhada à esquerda
     ficava destoando do bloco inteiro. */
  .rodape-legal {
    justify-content: center;
    text-align: center;
  }
}

/* --- Rodapé centralizado também no desktop (14/08) ---
   As colunas são 1fr cada: com a logo e os links encostados à esquerda, sobrava
   um vão grande entre a marca e o menu. Centralizando o conteúdo de cada coluna
   o rodapé fecha e fica coerente com o mobile, que já estava centralizado. */
@media (min-width: 621px) {
  .rodape-grid {
    justify-items: center;
    text-align: center;
  }
  .rodape-nav,
  .rodape-contato,
  .rodape-redes {
    align-items: center;
  }
  /* A marca continua abrindo o rodapé à esquerda: centralizar a logo junto
     deixaria o bloco sem âncora na largura toda. */
  .rodape-marca {
    justify-self: start;
    text-align: left;
  }
}

/* --- Conteúdo do rodapé alinhado com o desenho (14/08) ---
   A aba arredondada que sobe no gradiente (.final-recorte) recua --rodape-inset
   das bordas (200px numa tela ampla). O conteúdo do rodapé usava --shell-pad
   (88px), então a logo e a faixa legal começavam ~112px FORA do desenho, como
   se não pertencessem a ele.

   Agora o rodapé usa o mesmo recuo da aba: tudo nasce dentro do limite do
   desenho. No celular segue o respiro da página — lá o recuo da aba (56px) de
   cada lado espremeria demais o texto. */
@media (min-width: 621px) {
  .rodape {
    padding-inline: var(--rodape-inset);
  }
}

/* --- Cidade sob o telefone (20/08) ---
   "Londrina/PR" qualifica o número logo acima, então anda junto dele: fica na
   mesma coluna, sem respiro extra, e um degrau abaixo na hierarquia visual —
   é legenda, não um item de contato a mais. */
.rodape-cidade {
  padding-top: 2px;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--light-58);
}

/* --- Barra legal ancorada na grade do rodapé (20/08) ---
   Ela deixou de ser irmã da grade e virou uma linha dentro dela, ocupando as
   quatro colunas. Com isso as bordas passam a ser as do próprio bloco: o "©"
   começa exatamente onde começa a coluna da logo da elevo, e a marca da agência
   fecha na direita — antes ela vinha centralizada, porque a regra de ≥621px
   mandava justify-content:center para a barra inteira.
   O alinhamento vem da grade, então continua certo se o conteúdo das colunas
   mudar de largura. */
.rodape-grid > .rodape-legal {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  max-width: none;
  /* Como linha da grade ela ja recebe o gap do rodape (~65px). A margem
     superior antiga somava a isso e abria um vao grande antes da linha. */
  margin: 0;
}
/* Empilhado no celular a linha não tem largura para separar os dois: voltam a
   ficar centralizados, um sobre o outro. */
@media (max-width: 620px) {
  .rodape-grid > .rodape-legal {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
}