/* desktop-first: a base é pra tela grande, e as media queries abaixo vão
   reorganizando conforme a tela encolhe */

/* laptops menores, até 1280px */
@media (max-width: 1280px) {
  :root {
    --container-padding: clamp(1.5rem, 5vw, 4rem);
  }

  /* a headline tem que ceder a coluna 8 pro aside, senão as duas áreas
     brigam pela mesma trilha e o aside acaba caindo pra uma segunda linha */
  .hero__headline {
    grid-column: 1 / span 7;
  }

  .hero__aside {
    grid-column: 8 / span 5;
  }

  .about__intro { grid-column: 1 / span 5; }
  .about__statement-col { grid-column: 6 / span 7; }
  .about__logo-panel { grid-column: 1 / span 3; }
  .about__copy { grid-column: 4 / span 6; }
  .about__tags { grid-column: 10 / span 3; }

  .cta__intro { grid-column: 1 / span 7; }
  .cta__action { grid-column: 9 / span 4; }
}

/* tablets, até 1024px */
@media (max-width: 1024px) {
  .nav__links { display: none; }

  .menu-toggle {
    display: inline-flex;
  }

  .hero__composition {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .hero__headline { font-size: clamp(3rem, 2.4rem + 6vw, 5.5rem); }
  .hero__aside { max-width: 34rem; }

  .section-head { display: block; }

  .about__intro,
  .about__statement-col { grid-column: auto; }
  .about__statement-col { margin-top: var(--space-8); }
  .about__body { display: block; }
  /* 9rem com o padding cheio (--space-8, 32px de cada lado) deixava só uns
     80px pra logo inteira (ícone + "ELLOS SOLUÇÕES"), ficava ilegível.
     aumentei o painel e reduzi o padding só aqui, no mobile */
  /* mais largo e centralizado no mobile — antes ficava pequeno e colado
     à esquerda (bloco normal não centraliza sozinho sem margin:auto) */
  .about__logo-panel { width: min(75vw, 280px); margin-inline: auto; padding: var(--space-6); margin-bottom: var(--space-8); }
  .about__copy { max-width: 60ch; margin-bottom: var(--space-10); }
  .about__tags { max-width: 20rem; }

  .method__item { grid-template-columns: auto 1fr; row-gap: var(--space-4); }
  .method__index { grid-column: 1 / span 1; }
  .method__name { grid-column: 2 / span 1; }
  .method__desc,
  .method__item:nth-child(2n) .method__desc { grid-column: 1 / -1; grid-row: 2; }
  .method__item:nth-child(2n) .method__name { grid-column: 2 / span 1; }
  .method__rule { display: none; }

  /* abaixo de 1024px não roda o pin/scrub horizontal (isso é só desktop,
     ver initPillarsScroll em js/animations.js), então volta a ser uma
     lista vertical normal */
  .pillars__viewport { overflow: visible; padding-inline: var(--container-padding); }
  .pillars__track { flex-direction: column; width: 100%; gap: var(--space-4); }
  .pillar { width: 100%; }

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

  .cta__grid { display: block; }
  .cta__intro { margin-bottom: var(--space-12); max-width: 44rem; }
  /* tinha um padding-left:0 aqui que colava o botão e o texto na borda
     arredondada do glass-panel. tirei, fica simétrico dos dois lados */
  .cta__action { max-width: 34rem; }

  .footer__top { display: flex; flex-wrap: wrap; gap: var(--space-12); }
  .footer__brand { flex: 1 1 220px; }
  .footer__nav,
  .footer__contact { flex: 1 1 180px; }
}

/* tablets em pé / mobile grande */
@media (max-width: 640px) {
  /* 2 colunas quebram o alinhamento dos divisores verticais (fica uma
     linha "solta" no início de cada linha nova), então tiro eles no
     mobile e uso row-gap pra separar os pares */
  /* justify-items:center + padding-inline:0 tiram a dependência do padding
     de cada item (pensado pro layout de 4 colunas com divisor) pra
     centralizar o par — assim cada item encolhe pro tamanho do conteúdo
     e centraliza dentro da própria coluna, sem sobra assimétrica */
  .stats-band__inner { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10); justify-items: center; }
  .stats-band__item { padding-inline: 0; }
  .stats-band__item::before { display: none; }
}

@media (max-width: 768px) {
  .nav__actions .nav__cta { display: none; }

  /* só 3 dos 5 itens cabem numa linha sem quebrar no mobile. Formato e
     Contato somem, e os outros 3 dividem o espaço */
  .quickfacts__inner { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-3); }
  .quickfacts__divider { display: none; }
  .quickfacts__item--mobile-hide { display: none; }

  .quickfacts__item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
  }

  .hero { padding-top: 6.5rem; }
  .hero__top-row { margin-bottom: var(--space-16); align-items: flex-start; }
  .hero__coords { display: none; }

  .hero__headline { grid-column: 1 / -1; }
  .hero__composition { display: block; }
  .hero__aside { margin-top: var(--space-10); max-width: 100%; }

  /* no mobile tira o indicador "Pilares 01 → 03" e põe no lugar um CTA
     direto pra Soluções, centralizado — o pedido foi de dar um caminho
     mais claro pra rolar até lá em vez de só um número solto */
  .hero__indicator--pilares { display: none; }
  .hero__mobile-cta {
    display: inline-flex;
    align-self: center;
    margin-top: var(--space-4);
  }

  /* vira carrossel só no mobile. no desktop os dois depoimentos já cabem
     lado a lado numa boa. aqui é scroll com snap, e deixo o próximo card
     espiando na borda pra dar a dica visual de que dá pra arrastar */
  .testimonials__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-5);
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

  .testimonials__grid::-webkit-scrollbar {
    display: none;
  }

  .testimonial {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }

  /* mesma lógica do carrossel de depoimentos: no mobile os 9 cards viram
     scroll horizontal com snap, em vez de empilhar um embaixo do outro
     (a lista ficava enorme, rolando pra sempre). deixo o próximo card
     espiando na borda, é a dica visual de que dá pra arrastar */
  .solutions__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-5);
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

  .solutions__grid::-webkit-scrollbar {
    display: none;
  }

  /* redução extra de altura, só no mobile (o carrossel horizontal fica
     mais gostoso de arrastar com cards mais baixos) — no desktop/tablet
     o padding/gap continuam os do sections.css, não mexi lá */
  .solution {
    flex: 0 0 94%;
    scroll-snap-align: center;
    gap: var(--space-3);
    padding: 1.25rem;
  }

  /* botão de cada card de solução: no desktop é uma pilulazinha alinhada
     à esquerda, mas com o card ocupando a largura toda no mobile, um botão
     pequeno solto no canto fica com aparência de erro (alvo de toque
     pequeno demais também). full-width fica proporcional ao card e mais
     fácil de tocar */
  .btn--solution { align-self: stretch; justify-content: center; }

  .lead-form__row { grid-template-columns: 1fr; }
  .lead-form { padding: var(--space-6); }

  /* mesma lógica do botão de solução: enviar formulário merece um alvo de
     toque full-width no mobile */
  .lead-form__submit { align-self: stretch; justify-content: center; }

  /* botão de "Fale Conosco" do rodapé, mesma lógica: full-width fica mais
     proporcional e mais fácil de tocar (o do CTA final já é full-width
     em qualquer tamanho de tela, ver .cta__action no sections.css) */
  .footer__cta { width: 100%; justify-content: center; }

  .section { padding-block: clamp(4rem, 3.4rem + 4vw, 6rem); }
}

/* mobile */
@media (max-width: 560px) {
  .eyebrow { gap: var(--space-2); }
  .eyebrow::before { width: 16px; }

  .method__name { font-size: var(--text-heading-m); }

  .pillar__title { font-size: var(--text-heading-m); }

  .indicator { padding: var(--space-3) var(--space-4); }
  .indicator__value { font-size: var(--text-heading-m); }

  .footer__bottom { flex-direction: column; gap: var(--space-4); align-items: flex-start; }

  .btn--glass,
  .btn--gold { padding: var(--space-3) var(--space-6); }
}

/* telas de celular estreitas (a maioria dos aparelhos reais: 320 a 420px).
   a fórmula do ≤1024px pra .hero__headline foi calculada pensando em
   telas maiores — fiz a conta e em larguras abaixo de ~420px a palavra
   "Estratégia" sozinha estourava a linha (cada linha do headline é um
   <span> com overflow:hidden, pra animação de entrada, então o que
   ultrapassa fica cortado, não quebra pra linha de baixo). esse tamanho
   aqui é mais conservador de propósito, calculado pra caber com folga
   mesmo no iPhone SE (320px) */
@media (max-width: 420px) {
  .hero__headline { font-size: clamp(2.5rem, 2.3rem + 2vw, 2.875rem); }
}

/* celular deitado: o menu tem 6 links em fonte grande e passa da altura
   da tela nesse formato */
@media (max-height: 500px) {
  .menu-overlay__links { gap: var(--space-3); }
  .menu-overlay__links a { font-size: clamp(1.5rem, 1.2rem + 3vw, 2.25rem); }
}