/* ==========================================================================
   RESPONSIVO
   Mobile-first não foi usado nos arquivos anteriores por opção editorial,
   então os ajustes de tela pequena ficam centralizados aqui.
   ========================================================================== */

/* ---- Abaixo de 480px: logo do header um pouco menor, para não disputar
   espaço com o botão de menu ---- */
@media (max-width: 480px) {
  .brand__logo {
    height: 16px;
  }
}

/* ---- Abaixo de 640px: shiny buttons com animações levemente mais
   lentas e glow interno um pouco mais discreto — mantém o efeito, só
   suaviza para telas pequenas ---- */
@media (max-width: 640px) {
  .btn-shiny-v2,
  .btn-shiny-v2--lg {
    min-height: 54px;
    padding: 0 24px;
    gap: 10px;
    font-size: 16px;
  }

  .btn-shiny-v2--lg::after {
    /* No mobile os dois tamanhos usam o mesmo "respirar" — evita manter
       dois keyframes de glow calibrados pra alturas que já convergem. */
    animation-name: btn-shiny-v2-breathe;
  }

  .btn-shiny-v2 {
    animation-duration: 4.2s;
  }

  .btn-shiny-v2::before {
    animation-duration: 4s;
  }

  .btn-shiny-v2::after {
    animation-duration: 5s;
  }

  @keyframes btn-shiny-v2-breathe {
    0%,
    100% {
      box-shadow: inset 0 -6px 8px rgba(70, 113, 239, 0.07);
    }
    50% {
      box-shadow: inset 0 -6px 10px rgba(123, 82, 230, 0.12);
    }
  }
}

/* ---- Até 640px: hero em telas pequenas — reforça contraste do vídeo,
   empilha os CTAs e evita qualquer estouro de largura ---- */
@media (max-width: 640px) {
  .hero {
    padding-top: 6.5rem;
    padding-bottom: clamp(5rem, 16vh, 6.5rem);
  }

  /* Vídeo um pouco mais visível no mobile que antes, mas ainda com
     contraste suficiente para o texto ficar legível */
  .hero__video {
    filter: brightness(0.34) contrast(0.85) saturate(0.8) blur(1.2px);
  }

  .hero__video-scrim {
    background: rgba(5, 5, 8, 0.3);
  }

  .hero__fade {
    height: clamp(160px, 30vh, 260px);
  }

  .hero__scroll-cue {
    bottom: clamp(2.5rem, 6vh, 3.5rem);
  }
}

/* ---- Até 900px: navegação desktop cede lugar ao menu mobile ---- */
@media (max-width: 899px) {
  .nav {
    display: none;
  }
}

/* ---- Até 860px: equipe vira carrossel horizontal ---- */
@media (max-width: 700px) {
  .team__list {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-sm);
    margin: 0 calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    -webkit-overflow-scrolling: touch;
  }

  .team-member {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .differentials__item {
    grid-template-columns: 2.2rem 1fr;
  }
}

/* ---- Até 860px: timeline de processo vira coluna única (linha + número à
   esquerda, card ocupando o espaço restante à direita) ---- */
@media (max-width: 860px) {
  .process-timeline__track {
    left: 27px;
  }

  .process-timeline__list {
    gap: var(--space-2xl);
  }

  .process-timeline__row,
  .process-timeline__row--left,
  .process-timeline__row--right {
    grid-template-columns: 54px 1fr;
    column-gap: var(--space-sm);
  }

  .process-timeline__row--left .process-timeline__card,
  .process-timeline__row--right .process-timeline__card {
    grid-column: 2;
    grid-row: 1;
  }

  .process-timeline__row--left .process-timeline__node,
  .process-timeline__row--right .process-timeline__node {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .process-timeline__node-label {
    display: none;
  }

  .process-timeline__card {
    padding: var(--space-sm) var(--space-md);
  }

  /* Em coluna única não há mais "esquerda/direita": os dois entram do
     mesmo lado (leve deslocamento a partir da direita do card). */
  .process-timeline.is-ready .process-timeline__row--left .process-timeline__card,
  .process-timeline.is-ready .process-timeline__row--right .process-timeline__card {
    transform: translateX(16px);
  }
}

/* ---- Até 480px: ajustes finos para não estourar a largura ---- */
@media (max-width: 480px) {
  .process-timeline__track {
    left: 21px;
  }

  .process-timeline__row,
  .process-timeline__row--left,
  .process-timeline__row--right {
    grid-template-columns: 42px 1fr;
  }

  .process-timeline__circle {
    width: 42px;
    height: 42px;
    font-size: 0.78rem;
  }

  .process-timeline__card {
    padding: var(--space-sm);
  }
}

/* ---- Telas muito pequenas ---- */
@media (max-width: 420px) {
  .team-member {
    flex-basis: 78%;
  }
}

/* ---- Telas grandes: limitar crescimento excessivo ---- */
@media (min-width: 1440px) {
  :root {
    --container-w: 1320px;
  }
}