/* =============================================================================
   base-fluida.css — a base que nao deixa o bug nascer.
   Cole no topo da landing, ANTES do CSS da peca. Cor e fonte NAO moram aqui
   (vem do design system do cliente; ver references/tokens.md).

   POR QUE EXISTE (Golden Set, 182 pedidos medidos em 2026-07-26):
     44 pedidos de layout · 21 de espacamento · 18 de responsivo
     "altura VSL vs card" 9x · "vao entre cards" 4x na mesma sessao
     "otimizar desktop e depois mobile" custou 2 dos 4 dias da pagina do Combo
     497 !important na pagina do Combo = guerra de especificidade sem camada

   A ideia: cada bloco abaixo mata uma CLASSE de bug, nao um caso.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. CAMADAS — acaba a guerra de especificidade (a origem dos 497 !important)
   Quem vem depois na lista vence, independente de quao "forte" e o seletor.
   Um seletor simples em `peca` vence um seletor pesado em `base`. Sem !important.
   -------------------------------------------------------------------------- */
@layer base, blocos, peca, ajuste;

/* -----------------------------------------------------------------------------
   2. ESCALA FLUIDA — o texto e o espaco interpolam entre 2 polos.
   Metodo Utopia: em vez de acertar cada breakpoint na mao, declaro o valor no
   mobile (360px) e no desktop (1440px); o clamp() cuida de TODO o meio.
   Mata o "otimiza desktop, depois mobile, depois tablet, depois 2K".

   Como ler `clamp(min, preferido, max)`: nunca menor que min, nunca maior que
   max, e no meio cresce junto com a largura da tela.
   -------------------------------------------------------------------------- */
@layer base {
  :root {
    /* tipografia: do menor ao maior, cada passo cresce ~1.25x */
    --passo--2: clamp(0.69rem, 0.66rem + 0.16vw, 0.80rem);
    --passo--1: clamp(0.83rem, 0.78rem + 0.26vw, 1.00rem);
    --passo-0:  clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);   /* corpo */
    --passo-1:  clamp(1.20rem, 1.06rem + 0.68vw, 1.56rem);
    --passo-2:  clamp(1.44rem, 1.23rem + 1.04vw, 1.95rem);
    --passo-3:  clamp(1.73rem, 1.42rem + 1.54vw, 2.44rem);
    --passo-4:  clamp(2.07rem, 1.63rem + 2.22vw, 3.05rem);
    --passo-5:  clamp(2.49rem, 1.86rem + 3.15vw, 3.82rem);   /* H1 */

    /* espaco: os mesmos degraus, pra padding/margin/gap nunca serem px avulso */
    --espaco-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);
    --espaco-2xs: clamp(0.50rem, 0.46rem + 0.22vw, 0.63rem);
    --espaco-xs:  clamp(0.75rem, 0.68rem + 0.33vw, 0.94rem);
    --espaco-s:   clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);
    --espaco-m:   clamp(1.50rem, 1.37rem + 0.65vw, 1.88rem);
    --espaco-l:   clamp(2.00rem, 1.83rem + 0.87vw, 2.50rem);
    --espaco-xl:  clamp(3.00rem, 2.74rem + 1.30vw, 3.75rem);
    --espaco-2xl: clamp(4.00rem, 3.65rem + 1.74vw, 5.00rem);
    --espaco-3xl: clamp(6.00rem, 5.48rem + 2.61vw, 7.50rem);

    /* largura de leitura: linha longa demais cansa; 65 caracteres e o teto */
    --medida: 65ch;
  }

  /* --------------------------------------------------------------------------
     3. VIUVA — palavra sozinha na ultima linha.
     Ja era regra escrita na MEMORIA.md desde 15/07 e apareceu 2x depois disso
     na pagina da Dani. Regra escrita nao pega; default no CSS pega.
     `balance` equilibra titulo curto; `pretty` evita a orfa no corpo.
     ----------------------------------------------------------------------- */
  /* A escala so vale se for APLICADA. Declarar os passos e nao usar deixa o
     corpo preso em 16px enquanto o titulo cresce - medido na primeira prova
     desta base (2026-07-26): titulo 42->61px, corpo 16px em todas as larguras. */
  body {
    font-size: var(--passo-0);
    line-height: 1.5;
  }
  h1 { font-size: var(--passo-5); line-height: 1.1; }
  h2 { font-size: var(--passo-4); line-height: 1.15; }
  h3 { font-size: var(--passo-2); line-height: 1.2; }
  h4 { font-size: var(--passo-1); line-height: 1.25; }
  small, .legenda { font-size: var(--passo--1); }

  h1, h2, h3, h4, .titulo {
    text-wrap: balance;
  }
  p, li, blockquote, .corpo {
    text-wrap: pretty;
    max-width: var(--medida);
  }

  /* imagem nunca estoura o container nem distorce */
  img, video, svg, canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

/* -----------------------------------------------------------------------------
   4. LADO A LADO E SEMPRE GRID — mata a "altura desigual entre irmaos" (9x)
   `align-items: stretch` e o DEFAULT do Grid: irmaos na mesma linha ja saem com
   a mesma altura, sem hack, sem JS, sem height fixo.
   A armadilha era flex com wrap: itens em LINHAS diferentes nao se coordenam.
   -------------------------------------------------------------------------- */
@layer blocos {
  .lado-a-lado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min, 20rem), 100%), 1fr));
    gap: var(--espaco-m);
    /* align-items: stretch e implicito. NAO sobrescrever com start/center sem
       motivo: e ai que a altura desigual volta. */
  }

  /* duas colunas de peso diferente (ex: VSL | card lateral) */
  .duas-colunas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-m);
  }
  @container (min-width: 48rem) {
    .duas-colunas {
      grid-template-columns: var(--proporcao, 2fr 1fr);
    }
  }

  /* --------------------------------------------------------------------------
     5. CARD QUE ALINHA POR DENTRO — subgrid.
     Sem isso, 3 cards com titulos de tamanhos diferentes desalinham o botao.
     Com isso, titulo alinha com titulo e botao com botao, entre cards distintos.
     ----------------------------------------------------------------------- */
  .card-alinhado {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3; /* titulo / corpo / acao */
    gap: var(--espaco-xs);
  }

  /* --------------------------------------------------------------------------
     6. CONTAINER QUERY — o bloco responde ao ESPACO DELE, nao a tela.
     Mata o "componente quebra quando reusado em coluna estreita": o mesmo card
     numa coluna de 300px se comporta como no mobile, mesmo num monitor 4K.
     ----------------------------------------------------------------------- */
  .bloco {
    container-type: inline-size;
  }

  /* --------------------------------------------------------------------------
     7. :has() — o bloco se ajusta ao proprio conteudo, sem JS.
     Ex: card sem imagem nao deve deixar buraco onde a imagem estaria.
     ----------------------------------------------------------------------- */
  .card:not(:has(img)) {
    --altura-midia: 0;
  }
  .card:has(video, iframe) {
    --proporcao: 1fr; /* midia pesada manda no espaco */
  }

  /* secao: respiro vertical sempre da escala, nunca px avulso */
  .secao {
    padding-block: var(--espaco-3xl);
    padding-inline: var(--espaco-m);
  }
  .secao > * {
    margin-inline: auto;
    max-width: var(--largura-max, 75rem);
  }
}

/* -----------------------------------------------------------------------------
   8. MOVIMENTO — respeita quem pediu pra reduzir animacao (acessibilidade e
   tambem quem tem enjoo). Nao e enfeite: e requisito.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}