/* ============================================================
   TZO — Adaptação por largura (mobile-first: 360px funcional)
   ============================================================ */

@media (max-width: 1200px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .hero__art { max-width: 420px; justify-self: center; }
  .case { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: minmax(0, 1fr); }

  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6) var(--space-6);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .nav__menu[hidden] { display: none; }
  .nav__link { padding-block: var(--space-3); font-size: var(--text-md); }
  .nav__menu .btn { justify-content: center; }
  .nav__menu .lang-toggle { align-self: flex-start; }
  .nav__menu .phone { justify-content: center; }

  /* O megamenu vira acordeão dentro do menu compacto */
  .nav__item { width: 100%; }
  .nav__disclosure { width: 100%; justify-content: space-between; font-size: var(--text-md); }
  .megamenu {
    position: static;
    transform: none;
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    max-width: none;
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  .megamenu__item { padding: var(--space-3) var(--space-2); }
}

@media (max-width: 720px) {
  :root {
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 2.5rem;
  }

  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-16); }
  .hero { padding-block: var(--space-16); }

  .grid--2,
  .grid--4,
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar { border-right: 0; border-bottom: 1px solid var(--border); }
  .pillar:last-child { border-bottom: 0; }

  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  /* No celular a ilustração entra menor para não empurrar a primeira seção
     para muito abaixo da dobra. */
  .hero__art { max-width: 300px; }
  .hero__actions .btn { width: 100%; }

  .band { padding: var(--space-8); }
  .case { padding: var(--space-6); }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}


/* ---------- Componentes: trilha, time e tecnologias ---------- */

@media (max-width: 1200px) {
  .stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-10); }
  /* Com 4 por linha, o trilho de cada linha começa e termina nas pontas */
  .stepper__step:nth-child(4n + 1) .stepper__marker::before { left: 50%; }
  .stepper__step:nth-child(4n) .stepper__marker::before { right: 50%; }
  .team { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

@media (max-width: 900px) {
  .cloud-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  /* A trilha vira uma linha vertical: número à esquerda, texto à direita. */
  .stepper { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stepper__step {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: var(--space-4);
    row-gap: 0;
    padding-bottom: var(--space-6);
    text-align: left;
  }
  .stepper__marker { grid-row: 1; grid-column: 1; align-items: flex-start; }
  .stepper__marker::before {
    left: 50%;
    right: auto;
    top: 52px;
    bottom: calc(-1 * var(--space-6));
    height: auto;
    width: 2px;
    transform: translateX(-50%);
  }
  .stepper__step:last-child .stepper__marker::before { display: none; }
  /* No vertical os dois slots ocupam a MESMA célula: o que tem conteúdo
     aparece, o vazio some. Esconder por posição apagaria o texto dos
     passos pares, que guardam o rótulo no slot de baixo. */
  .stepper__label--top,
  .stepper__label--bottom {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    padding-inline: 0;
    visibility: visible;
  }
  .stepper__label:empty { display: none; }

  .team__count { font-size: 3.5rem; }
  .logo-wall { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .tech-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

  /* Alvo de toque mínimo onde o dedo encosta */
  .footer__list a,
  .nav__link,
  .nav__disclosure { min-height: var(--tap-min); }
  .contact__channel { min-height: var(--tap-min); }
}

/* ---------- Clientes, cases e tecnologias ---------- */

@media (max-width: 1100px) {
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .partner-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .client-grid { grid-template-columns: minmax(0, 1fr); }
  .case__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
  .case__stat-value { font-size: var(--text-3xl); }
  /* 18ch quebrava "mais conteúdo em vídeo" em duas linhas com espaço de sobra */
  .case__stat-label { max-width: none; }
  /* "+ Velocidade" em tamanho de h3 não cabe na coluna de 390px e encostava na
     coluna vizinha; menor, respira e continua legível como destaque. */
  .case__stat-value--word { font-size: var(--text-lg); }
  .logo-wall--dense { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}


/* O 0800 é o atalho mais direto no celular: some o rótulo para caber, mas o
   botão continua na barra — dentro da gaveta ninguém acha na hora da dúvida. */
@media (max-width: 900px) {
  .nav__inner { gap: var(--space-3); }
  .phone__text small { display: none; }
}

@media (max-width: 520px) {
  .phone { padding: var(--space-2); gap: 0; }
  .phone__text { display: none; }
}