/* ============================================================================
   A CAMADA RESPONSIVA — COT-22
   ============================================================================
   POR QUE ELA EXISTE COMO ARQUIVO SEPARADO
   As pranchas são desenhadas em 1280 px e NÃO têm uma única `@media`. Esta
   folha entra DEPOIS de base.css e do CSS de cada prancha, então ganha no
   cascata sem precisar de `!important` em lugar nenhum.

   ---------------------------------------------------------------------------
   POR QUE OS SELETORES SÃO ENUMERADOS, E NÃO UMA REGRA ESPERTA
   ---------------------------------------------------------------------------
   Dava para escrever `.folha [class*="grade"] { grid-template-columns: 1fr }`
   e pegar quase tudo. "Quase" é o problema: a seção que escapasse continuaria
   rolando para o lado no celular, e ninguém veria até um contador reclamar.

   A prova da COT-22 LEVANTA as grades multi-coluna de base.css e das pranchas
   a cada execução e reprova se aparecer uma sem contraparte aqui — é assim que
   a lista continua completa quando o site crescer.

   ---------------------------------------------------------------------------
   OS DOIS PONTOS DE QUEBRA, E POR QUE SÃO DOIS
   ---------------------------------------------------------------------------
   900 px: o tablet e a janela estreita. Grade de 3 e 4 colunas vira 2 — ainda
   cabe, e virar 1 aqui desperdiçaria metade da tela.
   620 px: o celular. Tudo vira coluna única, porque duas colunas em 375 px
   deixam cada uma com 160 px, que não cabe nem um preço.

   Uma exceção deliberada: o COTEJO do hero continua lado a lado até no
   celular. Ele é a imagem do produto, e "lado a lado" é o que a imagem diz.
   Empilhado, viraria dois gráficos — e a costura perderia o sentido.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   O MIOLO
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .folha {
    padding: 0 24px;
  }

  .secao {
    padding: 88px 0;
  }

  .cabeca-secao {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 44px;
  }

  .hero {
    min-height: 0;
    padding: 40px 0 80px;
  }

  /* A marca de parede sai de trás do texto: em tela estreita ela cobriria o título. */
  .hero .arco {
    right: -320px;
    opacity: 0.45;
  }

  .fecho {
    padding: 112px 0;
  }
}

@media (max-width: 620px) {
  .folha {
    padding: 0 20px;
  }

  .secao {
    padding: 64px 0;
  }

  .hero .arco {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   O CABEÇALHO
   O que fica no celular: a marca, "Entrar" e o botão de ação. O que sai: os
   links de seção e de página — o rodapé repete todos eles.

   Sem JavaScript de menu de propósito: sanfona é mais uma peça para quebrar
   numa página cujo trabalho é carregar rápido e não atrapalhar.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .menu a:not(.botao):not(.entrar) {
    display: none;
  }
}

@media (max-width: 900px) {
  .topo-linha,
  .topo.rolou .topo-linha {
    gap: 16px;
    height: auto;
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .menu {
    gap: 14px;
    font-size: 14px;
    margin-left: auto;
  }

  .topo-linha .marca img {
    height: 26px;
  }
}

/* ---------------------------------------------------------------------------
   AS GRADES
   Levantadas do CSS de base.css e das pranchas. A prova confere que esta
   lista continua cobrindo todas.
   --------------------------------------------------------------------------- */

/* De 3 e 4 colunas para 2: ainda cabe em tablet. */
@media (max-width: 900px) {
  .adiante-grade,
  .em-todos,
  .fichas,
  .garantias,
  .grade,
  .ligacoes,
  .numeros,
  .passos,
  .promessa,
  .planos,
  .perguntas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Estes já são de 2 e não cabem em tablet estreito: vão direto para 1. */
  .carteira-grade,
  .confronto,
  .corpo,
  .destaque,
  .duas,
  .hero-grade,
  .parada,
  .sigilo-grade,
  .transicao,
  .video-banda {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grade,
  .video-banda,
  .carteira-grade,
  .sigilo-grade {
    gap: 44px;
  }

  .video-banda .moldura-video {
    max-width: 100%;
  }

  /* O painel de número do destaque (Conteúdo) desce para baixo do texto. */
  .destaque-numero {
    border-left: none;
    border-top: 1px solid var(--linha-escura);
  }

  /* O índice do documento deixa de grudar: em coluna única ele vai antes do texto. */
  .indice {
    position: static;
  }

  /* A transição em coluna única: o painel do eixo gruda no topo, mais baixo,
     e os passos rolam por baixo dele. O eixo deita. */
  /* `sticky` só gruda dentro do PAI. Em coluna única, o painel precisa ter os
     passos como irmãos, no mesmo bloco — por isso a grade vira bloco e a
     coluna do eixo se dissolve (`display: contents`). */
  .transicao {
    display: block;
  }

  .eixo-coluna {
    display: contents;
  }

  .eixo-fixo {
    top: 72px;
    margin-bottom: 24px;
    /* Opaco: no celular os passos rolam POR BAIXO do painel, e vidro
       translúcido deixaria o texto de trás atravessar os números. */
    background: linear-gradient(160deg, #12404a, #072326 60%, #04161a);
    padding: 18px 20px;
    z-index: 5;
  }

  .eixo-cabeca {
    margin-bottom: 12px;
  }

  .ano-grande {
    font-size: 36px;
  }

  .eixo-corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .eixo {
    padding: 0;
    height: 28px;
  }

  .eixo-linha {
    left: 0;
    right: 0;
    top: 13px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--mineral-luz), rgba(94, 211, 200, 0.15));
  }

  /* Deitado, o eixo vira oito células iguais: o traço fica no centro de cada
     uma, e o ponto anda de centro em centro — (i + ½) / 8 da largura. */
  .eixo {
    height: 44px;
  }

  .eixo-linha {
    top: 9px;
  }

  .eixo ol {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    height: auto;
    padding-top: 22px;
    text-align: center;
  }

  .eixo li {
    padding-left: 0;
    font-size: 11px;
  }

  .eixo li::before {
    left: 50%;
    top: -16px;
    width: 2px;
    height: 8px;
    transform: translateX(-50%);
  }

  .eixo li.atual::before {
    width: 2px;
    height: 12px;
    top: -18px;
  }

  .eixo-ponto {
    top: 9px;
    left: calc((var(--i, 0) + 0.5) / 8 * 100%);
    margin: -7px 0 0 -7px;
    transform: none;
    transition: left 700ms var(--suave);
  }

  .escada-mini {
    display: none;
  }

  .eixo-lado h3 {
    min-height: 0;
    font-size: 14px;
  }

  .eixo-lado .num {
    font-size: 22px;
  }

  .eixo-lado .num.delta {
    font-size: 18px;
  }

  .passos-ano {
    padding-top: 8px;
  }

  .passo-ano {
    min-height: 0;
    padding: 28px 0 28px 24px;
    opacity: 1;
  }

  .passo-ano h3 {
    font-size: 24px;
  }

  /* Em duas colunas, o trilho de planos vira duas linhas: a régua entre elas
     é a de cima de cada plano, não a lateral. */
  .planos {
    border-top: none;
    gap: 0 32px;
  }

  .plano {
    border-right: none;
    margin-right: 0;
    border-top: 2px solid var(--tinta);
    padding-right: 0;
  }

  .plano.destaque::before {
    right: 0;
  }

  /* O fio de 1 px do confronto era vertical; deitado, vira régua horizontal. */
  .confronto > *:nth-child(2) {
    height: 1px;
    width: 100%;
    min-height: 1px;
  }

  /* A parada da linha do tempo perde a coluna fixa de 200 px: o rótulo sobe. */
  .parada {
    gap: 10px;
  }
}

@media (max-width: 620px) {
  .adiante-grade,
  .carteira-grade,
  .confronto,
  .corpo,
  .destaque,
  .dimensoes,
  .duas,
  .em-todos,
  .ficha,
  .fichas,
  .garantias,
  .grade,
  .hero-grade,
  .ligacoes,
  .linha-carteira,
  .nome-marca,
  .numeros,
  .parada,
  .passos,
  .perguntas,
  .planos,
  .promessa,
  .sigilo-grade,
  .sigilo-pontos,
  .transicao,
  .video-banda {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A exceção deliberada: o cotejo fica lado a lado, com a costura mais fina
     e menos ar entre os lados. Ver o cabeçalho deste arquivo.

     A conta que sustenta a exceção, em 375 px: 335 de folha, 28 de recuo do
     painel, 2 de costura e 20 de vão deixam 142 px por lado. "+ R$ 18.313" em
     Archivo 800 a 19 px ocupa uns 118. Cabe — e o "/mês" desce de linha. */
  .cotejo {
    grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr);
    gap: 0 20px;
  }

  .eixo-lados {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }

  .painel {
    padding: 20px 14px 18px;
  }

  .painel-topo {
    font-size: 12.5px;
    margin-bottom: 18px;
  }

  .lado h3 {
    font-size: 15px;
  }

  .escada {
    height: 88px;
    gap: 4px;
  }

  .de-para {
    font-size: 15px;
    gap: 6px;
  }

  .veredito .num {
    font-size: 19px;
  }

  /* O número é inquebrável (espaço duro no desenho); o "/mês" desce sozinho. */
  .veredito .num small {
    display: block;
    margin: 4px 0 0;
  }

  /* A tabela de perfis rola INTEIRA dentro da caixa, com as colunas na largura
     natural, e a primeira coluna fica parada: quem desliza para ver 2033 não
     pode perder de vista QUAL cliente está olhando. */
  .rolagem > table {
    min-width: 640px;
  }

  .rolagem > table th:first-child,
  .rolagem > table td:first-child {
    position: sticky;
    left: 0;
    background: var(--petroleo-0);
    box-shadow: 8px 0 12px -8px rgba(0, 0, 0, 0.5);
    padding-right: 14px;
  }

  .clara .rolagem > table th:first-child,
  .clara .rolagem > table td:first-child {
    background: var(--papel);
    box-shadow: 8px 0 12px -8px rgba(7, 35, 38, 0.18);
  }

  /* Marca + Entrar + botão têm de caber numa linha de 375: o botão perde
     um pouco de gordura. */
  .botao.miudo {
    font-size: 13.5px;
    padding: 10px 12px;
  }

  .linha-carteira {
    gap: 6px;
  }

  .linha-carteira .pilha-direita {
    align-items: flex-start;
  }

  .tocar-disco {
    width: 64px;
    height: 64px;
  }

  .so-largo {
    display: none;
  }

  .exposicao {
    align-items: center;
  }

  .exposicao b {
    font-size: 19px;
    white-space: nowrap;
  }

  .fecho .arco {
    width: 600px;
    height: 600px;
  }
}

/* ---------------------------------------------------------------------------
   O RODAPÉ
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .rodape-linha {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }

  .rodape-col {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   A TIPOGRAFIA
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  h1 {
    font-size: clamp(38px, 7vw, 56px);
  }

  h2 {
    font-size: clamp(28px, 4.8vw, 40px);
  }

  .lead {
    font-size: 18px;
  }
}

@media (max-width: 620px) {
  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 27px;
  }

  h3 {
    font-size: 19px;
  }

  .sub-hero {
    font-size: 19px;
  }

  .conclusao,
  .frase-forte,
  .fecho h2 {
    font-size: 28px;
  }

  .ficha-n {
    font-size: 40px;
  }

  .plano-preco {
    font-size: 34px;
  }
}

/* ---------------------------------------------------------------------------
   A REDE DE SEGURANÇA
   Nada, em hipótese nenhuma, pode ser mais largo que a tela. Tabela e bloco de
   código são os suspeitos de sempre: eles rolam DENTRO da própria caixa, e não
   empurram a página.
   --------------------------------------------------------------------------- */
/* `clip`, e não `hidden`: `overflow-x: hidden` no body faz dele um contêiner
   de rolagem, e todo `position: sticky` da página passa a grudar NELE — que
   nunca rola. O painel da transição sumia por isso. `clip` corta o excesso
   sem criar contêiner nenhum. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

img,
svg:not(.arco),
video {
  max-width: 100%;
  height: auto;
}

/* A rede de segurança NÃO pode valer para tabela que já rola sozinha.
   `display: block` numa tabela desliga o `table-layout: fixed`, e as colunas
   voltam a se dimensionar pelo conteúdo — foi exatamente o que desalinhou a
   tabela de planos, que já vive dentro de um `.rolagem` com overflow próprio.
   A regra continua valendo para tabela solta, que é para quem ela foi feita. */
@media (max-width: 900px) {
  :not(.rolagem) > table,
  pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Endereço longo e palavra sem espaço não esticam a caixa. */
a,
p,
li,
td,
h1,
h2,
h3 {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   MOVIMENTO
   Quem pediu para reduzir animação no sistema pediu por um motivo. Tudo o que
   anima tem estado final definido (`animation-fill-mode: both`), então com a
   duração zerada nasce pronto — não some. movimento.js lê a mesma preferência
   e não conta número nem ondula campo.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html.js [data-revela] {
    opacity: 1;
    transform: none;
  }
}