/* ============================================================================
   EITA · Camada de responsividade para TABLET (site marketing)
   ----------------------------------------------------------------------------
   - NÃO altera o desktop (>= 1280px) nem o mobile (< 768px).
   - Carregado DEPOIS do <style> inline de cada página -> mesma especificidade,
     vence por ordem de cascata.
   - Alvo: 768-900px (retrato), faixa onde o breakpoint 900px do layout desktop
     super-colapsa quase tudo para 1 coluna. De 901px pra cima o layout desktop
     ja funciona (verificado em 1024px), entao nao mexemos la.
   - Objetivo: restaurar nessa faixa o MESMO arranjo que ja existe em >=901px,
     evitando o "pulo" brusco no breakpoint e o visual de "celular esticado".
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FEATURES — o card escuro lateral foi removido. A grid era 1fr 1fr (texto +
   card); sem o card, o conteudo ficaria espremido na metade esquerda. Aqui ele
   passa a ocupar UMA coluna centralizada, e a lista de features vira 2x2 no
   desktop (>=901px) para preencher melhor a largura. Regra geral (sem media)
   para valer em todas as larguras das paginas desktop das 4 linguas.
   ---------------------------------------------------------------------------- */
.features-grid { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; }
@media (min-width: 901px) {
  .features-list { grid-template-columns: 1fr 1fr; column-gap: 44px; }
}

@media (min-width: 768px) and (max-width: 900px) {

  /* ---- HERO -------------------------------------------------------------
     Empilhado: a reordenacao (chat ENTRE subtitulo e botoes) e o espacamento
     ficam no bloco @media (max-width:900px) mais abaixo. */

  /* ---- STATS compactas: voltam a 3 colunas (em vez de empilhar) ---------- */
  .movement-stats   { grid-template-columns: repeat(3, 1fr); }
  .hero-strip-stats { grid-template-columns: repeat(3, 1fr); }

  /* ---- Secoes split (texto + visual): 2 colunas, como em >=901px --------- */
  .solution-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* ---- Grids de cards de imprensa: 2 colunas ----------------------------- */
  .media-feat { grid-template-columns: 1fr 1fr; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Planos e itens inclusos: voltam a multi-coluna -------------------- */
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .incl-grid    { grid-template-columns: repeat(3, 1fr); }

  /* ---- BLOG (classes proprias, nao colidem com o marketing) -------------
     posts-grid e 3-col no desktop e colapsa para 1-col em <=900px. No tablet
     usamos 2 colunas; o card "featured" ocupa a largura toda (span 2). */
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card.featured { grid-column: span 2; }
}

/* ============================================================================
   Foto da Anaclaudia (secao .scientist) — corte natural no fim da secao
   ----------------------------------------------------------------------------
   No DOM a foto (.scientist-photo) vem ANTES do texto (.scientist-text). No
   layout 2-col (>=901px) isso poe a foto na coluna da esquerda, encostada no
   fim da secao (padding-bottom:0) — o corte da imagem funde com a borda.
   Quando a secao EMPILHA (<=900px) a foto sobe para o topo e o corte fica
   evidente no meio. Reordenamos para a foto ficar SEMPRE por ultimo (no fim
   da secao). So afeta o estado empilhado; >=901px (2 colunas) fica intacto.
   ============================================================================ */
@media (max-width: 900px) {
  .scientist-text  { order: 1; }
  .scientist-photo { order: 2; }

  /* HERO empilhado: a simulacao de conversa entra ENTRE o subtitulo e os botoes.
     .hero-text vira display:contents (promove seus filhos a itens do grid),
     permitindo intercalar o .hero-chat via order. gap:0 -> o espacamento volta
     a ser o das margens originais de cada elemento. */
  .hero-grid         { gap: 0; }
  .hero-text         { display: contents; }
  .hero-eyebrow-wrap { order: 1; }
  .hero h1           { order: 2; }
  .hero-sub          { order: 3; }
  .hero-chat         { order: 4; margin: 8px auto 24px; }
  .hero-actions      { order: 5; }
  .hero-meta         { order: 6; }
  .hero-channels     { order: 7; }
}

/* ----------------------------------------------------------------------------
   NORMALYZE — estilo "fan": deixa de ser uma faixa cheia com fundo proprio e
   vira um BOX (borda + raio) sobre o MESMO fundo escuro da secao anterior
   (.final). Texto inalterado; botao abaixo do texto. Regra geral (sem media),
   vale em todas as larguras das paginas desktop das 4 linguas.
   ---------------------------------------------------------------------------- */
/* Titulos de secao (.h2) — maiores, ocupando melhor a linha. */
.h2 { font-size: clamp(32px, 4.4vw, 60px); }

/* Big numbers (.mv-stat) — numero grande em DESTAQUE (em cima), label embaixo,
   ocupando melhor o card (em vez de numero+label lado a lado com vazio). */
.mv-stat { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px; }
.mv-stat .num { font-size: clamp(38px, 3.8vw, 54px); }
.mv-stat .lbl { font-size: 13.5px; }

/* Acronimo (E.I.T.A.) — mesmo conceito do titulo principal: maior e responsivo,
   ocupa melhor a linha e escala/quebra conforme a largura reduz. */
.acronym-phrase { font-size: clamp(30px, 5.8vw, 68px); }
/* letras destacadas como inline (nao inline-block): nao criam oportunidade de
   quebra no meio da palavra -> "Treino" nao parte em "T" / "reino". */
.acronym-phrase .l { display: inline; }

.cta-zone { position: relative; background: var(--ink); overflow: hidden; }
.cta-zone::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 70% at 50% 6%, rgba(0,239,169,0.16) 0%, transparent 55%),
    radial-gradient(80% 60% at 82% 90%, rgba(0,239,169,0.07) 0%, transparent 60%);
}
.cta-zone > .final,
.cta-zone > .normalyze { position: relative; z-index: 1; background: transparent; }
.cta-zone > .final::before { display: none; }
.cta-zone > .normalyze::before { display: none; }
.final { padding-bottom: 36px; }
.normalyze { border-top: 0; padding: 0 0 90px; }

/* Normalyze = box compacto; texto a esquerda, botao A DIREITA (menor) */
.normalyze-simple {
  display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 28px 36px;
  background: rgba(255,255,255,0.03);
  max-width: none;
}
.normalyze-simple > .normalyze-text { max-width: 760px; }
.normalyze-simple .normalyze-sub { margin-bottom: 0; }
.normalyze-simple > .normalyze-cta {
  justify-self: end; align-self: center; margin-top: 0; white-space: nowrap;
  height: 46px; padding: 0 22px; font-size: 14px; border-radius: 12px;
}
@media (max-width: 760px) {
  .normalyze-simple { grid-template-columns: 1fr; gap: 18px; }
  .normalyze-simple > .normalyze-cta { justify-self: start; }
}