/* ==========================================================================
   RESPONSIVIDADE — mudanças ESTRUTURAIS por faixa de viewport

   Divisão de responsabilidade:
     - a ESCALA dos componentes é fluida e vive nos próprios arquivos de
       componente, via clamp() sobre a viewport (05-components, 06-header,
       07-hero). Assim o tamanho acompanha a tela de forma contínua, sem
       saltos ao cruzar um breakpoint;
     - este arquivo cuida só do que MUDA DE ESTRUTURA: o que aparece, o que
       desaparece e o que muda de posição.

   As quatro decisões estruturais do hero:
     ≤ 1080px  nav e header compactam o espaçamento
     ≤  900px  nav vira hambúrguer; selo sai; botão assume o centro da base
     ≤  760px  header sai de cima do cartão e vira barra própria em fundo claro
     ≤  360px  rótulo do botão encurta para "Saiba Mais"
   ========================================================================== */

/* --------------------------------------------------------------------------
   ATÉ 1080px — laptop pequeno e tablet em paisagem
   Só o espaçamento comprime: os tamanhos já escalam por clamp().
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .main-nav { gap: clamp(14px, 1.9vw, 28px); }
    .main-nav a { letter-spacing: 0.05em; }
    .site-header__end { gap: clamp(10px, 1.4vw, 18px); }
}

/* --------------------------------------------------------------------------
   ATÉ 900px — a navegação horizontal quebraria em duas linhas

   O selo também sai: sozinho na base, um elemento encostado na lateral
   desequilibra a composição, então o botão assume o centro.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .main-nav { display: none; }
    .menu-trigger { display: block; }

    /* Entre 761 e 900px o header segue flutuando sobre o cartão (absolute):
       basta elevá-lo acima do painel para o gatilho continuar clicável. */
    .site-header { z-index: 120; }

    /* O painel desce até a base do header, sem cobrir a marca. */
    .nav-panel,
    .nav-overlay { top: var(--header-h, 96px); }
    .rotating-badge { display: none; }
    .site-header__end .btn-solid { display: none; }

    .btn-pill:not(.btn-pill--estatico) {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
}


/* --------------------------------------------------------------------------
   ATÉ 760px — mobile: o header sai de cima do cartão

   Vira barra própria sobre o fundo off-white da página, o que exige a versão
   escura do logo e texto em --ink.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .site-header.is-scrolled {
      position: sticky;
      left: auto; right: auto;
      padding-inline: calc(var(--gutter) + clamp(6px, 2.4vw, 12px));
      padding-block: clamp(9px, 2.4vw, 13px);
      min-height: 0;
      background: rgba(245, 241, 236, 0.82);
      animation: none;
    }
    .site-header.is-scrolled .brand-logo__img--horizontal {
      height: clamp(26px, 7vw, 34px);
    }

    .site-header {
      position: sticky;
      background: var(--offwhite);
      transform: none;      /* anula o alinhamento por centro do desktop */
      top: 0;
      color: var(--ink);
      grid-template-columns: 1fr auto 1fr;
      padding-inline: calc(var(--gutter) + clamp(6px, 2.4vw, 12px));
      padding-block: clamp(14px, 3.6vw, 20px);
      min-height: clamp(76px, 21vw, 96px);
    }

    /* logo cresce para ocupar o header mais alto */
    .brand-logo__img--empilhada { height: clamp(48px, 13vw, 62px); }


    .site-header__end .btn-icon {
      width: clamp(24px, 6.4vw, 30px);
      height: clamp(24px, 6.4vw, 30px);
    }


    .menu-trigger {
      width: 48px;
      height: 48px;
      margin-left: -9px;   /* alinha o traço ao gutter, não a caixa de toque */
    }
    .menu-trigger__bar {
      width: 34px;
      height: 2.5px;
      margin-left: -17px;
    }
    .menu-trigger__bar:nth-child(1) { top: 15px; }
    .menu-trigger__bar:nth-child(2) { top: 23px; }
    .menu-trigger__bar:nth-child(3) { top: 31px; }
    .menu-trigger[aria-expanded="true"] .menu-trigger__bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    .menu-trigger[aria-expanded="true"] .menu-trigger__bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    /* header sobre fundo claro pede o logo em verde escuro. Só a empilhada: a
       horizontal já é a versão verde. */
    .brand-logo__img--empilhada { content: url('../images/brand/logo-stacked-forest.png'); }

    .hero {
      margin: 0 var(--margem) var(--margem);
      margin-bottom: 0;
      height: calc(100svh - clamp(92px, 25vw, 116px));
      min-height: min(460px, 82svh);
    }

    /* headline em duas linhas, sujeito abaixo dela */
    .hero__title {
      top: 7%;
      /* duas linhas: proporção maior da largura, ainda fluida */
      font-size: clamp(56px, 26vw, 210px);
      line-height: 0.88;
      white-space: normal;
    }

    .hero__subject { height: 64%; }

    /* CTA com mais presença: é a única ação visível na dobra do celular */
    .btn-pill {
      font-size: clamp(14.5px, 3.8vw, 18px);
      padding: clamp(8px, 2.2vw, 12px);
      padding-left: clamp(22px, 5.8vw, 32px);
      gap: clamp(13px, 3.2vw, 18px);
    }
    .btn-pill .btn-pill__icon {
      width: clamp(42px, 10.6vw, 52px);
      height: clamp(42px, 10.6vw, 52px);
    }
}


@media (max-width: 760px) {
    .garantia__cartao { grid-template-columns: minmax(0, 1fr); gap: 15px; }

    .garantia__marca {
      position: static;
      display: block;
      margin: 0 auto clamp(18px, 4vw, 26px);
      height: clamp(22px, 5.4vw, 30px);
    }

    .garantia__titulo {
      padding-left: 0;
      border-left: 0;
      /* piso em 34px: "Garantia de" em nowrap precisa caber em 320px */
      font-size: clamp(34px, 10vw, 44px);
      text-align: center;
    }

    /* sem marca no canto, o recuo perde a razão de existir */
    .garantia__texto { padding-right: 0; }
}


@media (max-width: 820px) {
    .oferta {
      /* 149vw = a proporção nova da foto vertical (1856x2766). Ela ganhou
         roxo no topo para o título caber sem encostar no cão, e a caixa
         precisa acompanhar: com a altura antiga o object-fit: cover cortaria
         justamente o roxo que foi acrescentado. O teto sobe junto — em 820px,
         o limite desta media query, a foto inteira pede 1222px. */
      --oferta-foto-h: clamp(400px, 143vw, 1180px);
      --oferta-sobrepoe: clamp(48px, 15vw, 80px);
      --oferta-onda-h: clamp(26px, 7vw, 46px);
      /* Topo da cabeça do cão, medido a partir do topo da banda. A foto tem
         149vw de altura desenhada e ancora na base, então 6vw do lilás somem
         por cima; a cabeça começa em 42,5% da imagem (linha 1177 de 2766):
         0,425 × 149vw − 6vw. Refazer a conta se a foto ou a altura mudarem. */
      --oferta-cao-topo: 57.4vw;
    }

    /* O respiro abaixo do cartão vira o --secao-y inteiro, e a seção perde o
       dela: somados davam 86px repartidos em dois, com só 30 logo abaixo do
       cartão — que era o que fazia a banda parecer terminar sem folga. */
    .oferta { padding-bottom: 0; }

    .oferta__banda {
      overflow: hidden;
      align-items: start;
      min-height: 0;
      padding: 0 var(--gutter) var(--secao-y);
    }

    .oferta__foto {
      height: var(--oferta-foto-h);
      bottom: auto;
      object-position: 50% 50%;
    }

    /* Ancorado na BASE, e não no centro: a caixa agora é mais curta que a
       foto inteira, e com 50% o cover comeria metade de cima e metade de baixo
       — levando junto a tigela, que vai quase até a borda inferior. Com 100%
       todo o corte sai do topo, que é exatamente o roxo sobrando.
       O seletor repete .oferta--tigela porque a regra da variante também é
       composta, e media query não acrescenta especificidade. */
    .oferta--tigela .oferta__foto,
    .oferta__foto { object-position: 50% 100%; }

    /* A vinheta volta no mobile, girada. No desktop ela escurece pela
       ESQUERDA, que é onde o texto vive; aqui o título foi para o topo, então
       o degradê desce. Sem ela o branco do título fica sobre o lilás claro do
       fundo — 1,9:1, ilegível.

       A altura é presa à da foto porque o ::after herda inset: 0 da regra base
       e cobriria a banda inteira, escurecendo também a faixa branca de baixo,
       onde mora o cartão. O seletor repete .oferta--tigela porque a variante
       também define o próprio fundo, e media query não acrescenta
       especificidade. */
    /* Barriga pela metade. A curva do desktop foi calibrada para uma banda
       larga; em tela estreita ela come uma fatia grande da foto, que aqui já
       está mais curta por causa do corte no topo. */
    .oferta__banda .onda { height: var(--oferta-onda-h); }

    /* A onda do pé volta aqui: o desktop a esconde em 13-oferta.css e o
       pedido foi só para lá. Neste layout ela fica na faixa branca abaixo da
       foto (onde mora o cartão) e pinta branco sobre branco, então hoje não
       muda nada visível — está aqui para o mobile seguir igual ao que era. */
    .oferta__banda .onda--pe { display: block; }

    .oferta--tigela .oferta__banda::after,
    .oferta__banda::after {
      display: block;
      bottom: auto;
      height: var(--oferta-foto-h);
      /* O topo é mais claro que a primeira versão, a pedido. Em compensação a
         queda é mais longa: em 320px o título quebra em TRÊS linhas e a última
         alcançava a parte já clara do degradê — 2,4:1, abaixo do mínimo. Quem
         segura a legibilidade ali é o alcance, não a intensidade do topo. */
      background: linear-gradient(180deg,
          rgba(34, 38, 28, 0.60) 0%,
          rgba(34, 38, 28, 0.46) 26%,
          rgba(34, 38, 28, 0.24) 44%,
          rgba(34, 38, 28, 0.00) 70%);
    }

    /* A frase sai do fluxo e ocupa o lilás chapado do topo. Fora do fluxo
       porque a altura dela não pode empurrar o cartão: quem decide onde o
       cartão começa é a foto, não o número de linhas do título. */
    .oferta__titulo {
      position: absolute;
      /* Centrado entre o início visível da seção e a cabeça do cão. O início
         visível não é o topo da banda: a onda branca cobre o começo da foto e,
         em repouso, a borda dela fica na metade da própria altura. O centro do
         título vai para o meio desse intervalo, e o translateY o ancora pelo
         centro — assim a posição não depende de o título ter 1, 2 ou 3 linhas.
         Quem manda é a foto (--oferta-cao-topo), por isso tudo em vw. */
      top: calc((var(--oferta-onda-h) / 2 + var(--oferta-cao-topo)) / 2);
      transform: translateY(-50%);
      left: var(--gutter);
      right: var(--gutter);
      max-width: none;
      text-align: center;
      /* Branco, e não o off-white do desktop: aqui o texto corre sobre o lilás
         claro do topo da foto, e o off-white não sustenta o contraste.
         Era um `#FFFFFF` cru; virou token ao ser reencostado. */
      color: var(--branco);
    }

    /* O destaque mantém a cor e o peso do desktop: a vinheta já dá contraste
       suficiente para o terracota claro (3,2:1 sobre o fundo escurecido, acima
       do mínimo de texto grande), e era ela que faltava quando o branco foi
       imposto aqui. A faixa de luz que atravessa o destaque só clareia — leva
       o terracota ao creme, 4,0:1 —, então não mexe nesse piso. */

    /* O cartão sobe até morder a base da foto — é a emenda que faz os dois
       lerem como uma seção só. A mordida é curta de propósito: a tigela vai até
       97% da imagem, então sobrepor mais que isso a engoliria. */
    .oferta__inner {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      text-align: center;
      padding-top: calc(var(--oferta-foto-h) - var(--oferta-sobrepoe));
    }

    /* Aqui a oferta tem padding-bottom: 0 — a banda de foto encosta na seção
       seguinte —, então o especialista assume o respiro inteiro. */
    .especialista { padding-top: var(--secao-y-bloco); }

    /* O seletor repete .oferta--tigela porque a largura da variante também é
       composta — media query não acrescenta especificidade. */
    .oferta--tigela .oferta__card,
    .oferta__card {
      width: 100%;
      max-width: 380px;
      text-align: left;
      box-shadow: 0 10px 24px rgba(24, 28, 18, 0.17);
    }
}

/* --------------------------------------------------------------------------
   ESPECIALISTA — abaixo de 860px empilha: retrato em cima, texto centrado
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .especialista__inner {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: clamp(22px, 5vw, 34px);
    }
    .especialista__retrato { grid-row: 1; width: clamp(220px, 60vw, 320px); }
    .especialista__texto { text-align: center; max-width: 34em; }
    .especialista__papel { justify-content: center; }
    .especialista__fala { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   ATÉ 900px — a barra de mídia não cabe em linha única

   Vira grade. Os divisores saem: com itens em mais de uma linha eles deixam de
   separar e viram grade de traços.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* A barra única vira uma caixa por logo: em linha quebrada o divisor deixa
       de separar, e o cartão individual dá a mesma leitura sem virar grade de
       traços. */
    .midia__logos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* Altura única para todos os cartões. Os logos rodam em tamanho natural e
         variam de 20 a 39px de altura, o que deixava as linhas desencontradas.
         A linha precisa caber o mais alto (iG, 39px) somado ao padding, que aqui
         vai a 24px de cada lado — daí o teto de 90. */
      grid-auto-rows: clamp(74px, 18vw, 90px);
      gap: clamp(10px, 2vw, 18px);
      padding: 0;
      background: none;
      box-shadow: none;
      border-radius: 0;
    }
    .midia__logos li {
      padding: clamp(16px, 3.4vw, 24px) clamp(12px, 3vw, 22px);
      background: var(--branco);
      border-radius: clamp(14px, 3vw, 22px);
      box-shadow: 0 10px 26px rgba(46, 50, 39, 0.06);
    }
    .midia__logos li + li { border-left: 0; }

    /* com o sexto, a grade de 3 fecha duas linhas exatas */
    .midia__logos li[data-so-mobile] { display: flex; }
}

@media (max-width: 560px) {
    /* seis itens fecham três linhas de dois; o item esticado que existia aqui
       era para o quinto, que sobrava sozinho. */
    .midia__logos { grid-template-columns: repeat(2, 1fr); }

    .qs-banda__foto, .ajuda-banda__foto {
      object-position: 80% 40%;
    }

    .qs-banda::after, .ajuda-banda::after {
      background: linear-gradient(90deg, rgba(34, 38, 28, 0.82) 0%, rgba(34, 38, 28, 0.46) 100%, rgba(34, 38, 28, 0.40) 50%, rgba(34, 38, 28, 0.06) 70%, rgba(34, 38, 28, 0.00) 80%);
    }
}

/* --------------------------------------------------------------------------
   DEPOIMENTOS — quatro colunas de texto não sobrevivem a tela estreita
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .depoimentos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .depoimentos__grade {
      grid-template-columns: 1fr;
      max-width: 380px;
    }
    /* os pontos viram lista em coluna: centralizados e quebrados eles perdiam
       o alinhamento entre o check e a frase */
    .depoimentos__pontos {
      justify-content: start;
      max-width: 380px;
      row-gap: 12px;
    }
    .depoimentos__pontos li { flex: 0 0 100%; }
}

/* Em coluna única a frase do ponto vira leitura, não etiqueta: os 13px do piso
   do clamp ficam pequenos demais no celular. */
@media (max-width: 760px) {
    .depoimentos__pontos li { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   MEUS PRODUTOS — dois cartões lado a lado deixam a embalagem pequena demais
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    /* É aqui que os cartões passariam a empilhar e esticar a seção; em vez
       disso a grade vira carrossel de um por página. */
    .produtos__grade {
      --por-pagina: 1;
      /* "rolar" troca o fade pela fila com scroll-snap (09-produtos.css);
         o JS lê este valor e marca data-modo na grade. */
      --modo: rolar;
      grid-template-columns: 1fr;
      /* em coluna única o cartão viraria um bloco largo demais para a
         embalagem, que é vertical */
      max-width: 342px;
    }
    /* Em coluna única sobra largura: a embalagem pode crescer sem que o cartão
       deixe de caber, e é o mobile que pedia mais destaque para o mockup. */
    .produto__figura img { height: clamp(250px, 72vw, 290px); }
}

/* --------------------------------------------------------------------------
   RODAPÉ — a grade de 4 colunas não cabe antes do desktop
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .rodape__grid {
      grid-template-columns: 1fr 1fr;
    }
    /* marca ocupa a linha inteira: o bloco de endereço é o mais longo */
    .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .rodape__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   ATÉ 360px — o rótulo longo faria o botão dominar a base do cartão
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    /* Em teste: mantendo o rótulo longo abaixo de 380px para avaliar como o
       botão se comporta. Se dominar a base do cartão, reativar a troca:
         .btn-pill .btn-pill__label-full  { display: none; }
         .btn-pill .btn-pill__label-short { display: inline; }
       O seletor duplo é obrigatório — em 05-components.css o rótulo curto é
       escondido por .btn-pill .btn-pill__label-short, que vence uma classe só. */
}

/* --------------------------------------------------------------------------
   PÁGINA DE PRODUTO — a galeria e o painel de decisão empilham

   O limite é a aba "Assine e economize": abaixo de 1020px o painel fica com
   menos de 400px e o rótulo da aba quebra em duas linhas, desequilibrando a
   pílula. Empilhado, a foto vira a abertura e o painel ganha a largura inteira.
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
    .compra__inner { grid-template-columns: minmax(0, 1fr); }
    .galeria { max-width: 560px; width: 100%; margin: 0 auto; }
    .painel { max-width: 560px; width: 100%; margin: 0 auto; }
    /* Empilhado, as miniaturas ficam entre duas emendas verticais: a do palco
       acima e a do nome do produto abaixo. A de cima era o gap apertado da
       galeria e a fileira parecia colada na foto — as duas passam a valer o
       mesmo respiro da grade. */
    .galeria { gap: var(--compra-gap); }
}

/* O rótulo longo da aba de assinatura não cabe numa metade de painel abaixo
   disso, e quebrar em duas linhas alterava a altura da pílula ao trocar de aba.
   O seletor repete .planos__aba porque a regra base também é composta. */
/* Telas estreitas: o selo encolhe para caber ao lado do nome sem reticências,
   e o preço por pacote passa a dividir a linha com o parcelado. */
@media (max-width: 400px) {
    .kit__selo { font-size: 9.5px; padding: 3px 5px; letter-spacing: 0; }
    .kit { column-gap: 6px; }
    .kit__detalhe { font-size: 12.5px; }
    .kit__preco-valor { font-size: 15.5px; }
    .kit__preco-vista { font-size: 11.5px; }
}

/* Abaixo de 375px o selo não cabe ao lado do nome sem cortar o texto. Ali ele
   desce para a linha seguinte, e o kit 1 — que não tem selo — reserva a mesma
   altura com um pseudo-elemento vazio, para os três cartões continuarem
   iguais. É a altura idêntica que faz a lista funcionar como comparação. */
@media (max-width: 375px) {
    .kit__topo { flex-wrap: wrap; }
    .kit__selo { overflow: visible; text-overflow: clip; }

    .kit__topo:not(:has(.kit__selo))::after {
        content: '';
        display: block;
        width: 100%;
        height: calc(9.5px * 1.35 + 6px);
    }
}

/* Em telas muito estreitas o selo perde as reticências e o texto é cortado no
   limite da coluna: a decisão (pedido do Lucas, 2026-09-22) é preservar o
   alinhamento em duas colunas e a copy, não o rótulo inteiro. */
@media (max-width: 345px) {
    .kit__selo { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 480px) {
    /* A grade 2x2 das vantagens não cabe: "Frete grátis a partir da 2ª
       entrega" quebrava em três linhas e desalinhava as colunas. Coluna única,
       com a condição do frete na mesma linha do benefício. */
    .kit__vantagens { grid-template-columns: minmax(0, 1fr); }

    .planos__aba .planos__aba-longo { display: none; }
    .planos__aba .planos__aba-curto { display: inline; }
    /* a moldura lateral encolhe junto: em 320px o rótulo curto mais o selo
       deixavam só 6px de folga dentro da aba */
    .planos__aba { padding-inline: clamp(6px, 2vw, 16px); }
}

@media (max-width: 560px) {
    /* O selo de desconto sai de dentro da pílula e vira badge colada no canto
       superior direito, sobreposta à borda. Dentro, ele comia metade da aba e
       empurrava o rótulo para a esquerda; fora, o rótulo volta ao centro.
       O anel na cor da trilha é o que o descola da pílula.
       Os dois seletores repetem a composição das regras de 20-compra.css. */
    .planos__caixa .planos__aba { padding-inline: clamp(6px, 2vw, 16px); }
    .planos__caixa .planos__desconto {
        top: 0;
        right: 0;
        translate: 2px -52%;
        box-shadow: 0 0 0 2px var(--cinza-selo);
    }

    /* setas somem: o arrasto do scroll-snap já é o gesto natural no toque */
    .galeria__seta { display: none; }
    /* Duas colunas, como no desktop: marca + (nome / preço por pacote) à
       esquerda, (parcelado / à vista) à direita. Empilhar o preço numa segunda
       linha alongava o cartão e tirava o valor do campo de leitura do nome. */
    .kit { column-gap: clamp(8px, 2.4vw, 14px); }
    .kit__preco { text-align: right; }
    .kit__preco-vista { display: block; margin-top: 2px; }

    /* Um degrau acima na tipografia: no celular a dobra inteira estava no piso
       dos clamps e o cartão perdia leitura. */
    .kit__nome { font-size: 16.5px; }
    .kit__detalhe { font-size: 13.5px; }
    .kit__preco-valor { font-size: 17px; }
    .kit__preco-vista { font-size: 12.5px; }
    /* O selo continua ao lado do nome, mas a coluna precisa poder encolher:
       sem o minmax(0,...) a primeira coluna fica do tamanho do conteúdo e o
       selo invade o preço. O texto do selo encolhe junto para caber. */
    .kit { grid-template-columns: auto minmax(0, 1fr) auto; }
    /* Selo na MESMA linha do nome. Quem cede espaço é a coluna do preço, que
       passa a caber no conteúdo, e o selo encolhe o texto com min-width: 0 —
       assim os três cartões ficam com a mesma altura sem quebrar linha. */
    .kit__topo { flex-wrap: nowrap; min-width: 0; }
    .kit__selo {
        font-size: 11px;
        padding: 3px 7px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kit__nome { white-space: nowrap; }
    .etapa { font-size: 14.5px; }
    .painel__apoio { font-size: 16px; }
    .painel__nota-contagem { font-size: 14px; }
    .compra__reforcos li { font-size: 13.5px; }
    .planos__aba { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   PÁGINA DE PRODUTO — telas baixas (notebook)

   Em monitor a primeira dobra cabe inteira; em notebook o botão fica abaixo da
   linha d'água. O gargalo é a GALERIA, não o painel: a foto é quadrada, então
   a altura dela é a largura da coluna — 619px em 1440, 720px com as
   miniaturas. Comprimir só o painel não resolveria.

   Por isso a coluna da foto encolhe primeiro, e o ritmo do painel comprime
   junto. Só acima de 1020px, onde a dobra existe: empilhado ela nunca coube.
   -------------------------------------------------------------------------- */
@media (min-width: 1021px) and (max-height: 900px) {
    .pagina-produto .site-header { padding-block: clamp(12px, 1.3vw, 18px); }
    .pagina-produto .site-header.is-scrolled { padding-block: clamp(9px, 1vw, 13px); }

    /* Comprime, mas não aperta: o respiro do topo é o que dá o ar premium da
       dobra. Era 4,6vw (66px em 1440) e a barra colava na galeria. */
    .compra { padding-top: clamp(44px, 6.4vw, 100px); }
    .compra__inner { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }

    .painel__apoio { margin-top: clamp(10px, 1vw, 14px); }
    .planos { margin-top: clamp(16px, 1.8vw, 24px); }
    .planos__aba { padding-block: clamp(9px, 0.9vw, 12px); }
    .kits { margin-top: clamp(10px, 1.2vw, 20px); gap: clamp(7px, 0.7vw, 10px); }
    .kit { padding-block: clamp(11px, 1.1vw, 15px); }
    .compra__cta {
        margin-top: clamp(12px, 1.3vw, 18px);
        padding-block: clamp(13px, 1.3vw, 17px);
    }
    /* Só o respiro ACIMA comprime em tela baixa. O vão ENTRE os dois selos é
       o que faz eles lerem como dois blocos, e não pode encolher junto. */
    .compra__reforcos { margin-top: clamp(16px, 1.7vw, 24px); }
}

/* --------------------------------------------------------------------------
   VET — o bloco do especialista empilha

   Lado a lado, abaixo de 900px a coluna da foto fica estreita demais. O
   retrato abre o bloco e o texto vem embaixo, centrado: quem e ele importa
   antes do que ele diz.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .vet__inner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: clamp(20px, 4vw, 32px);
        text-align: center;
    }

    /* Teto para o retrato nao virar uma foto gigante de largura inteira. */
    .vet__figura { width: min(100%, 340px); }

    .vet__texto { max-width: 52ch; }

    /* A aspa fica fora do fluxo e, com o texto centrado, cairia no meio da
       primeira palavra. */
    .vet__citacao::before { left: 50%; translate: -50% 0; }

    .vet__assinatura { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   FICHA — abaixo de 1020px o visual empilha sob o texto

   A onda da dobra de compra volta aqui: no desktop a seção tem respiro
   próprio; empilhada, ela é o que emenda as duas dobras.
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
    .compra .onda { display: block; }

    .ficha { padding-top: calc(var(--onda-h) * 0.72 + var(--secao-y)); }
}

/* O cartao encosta nas bordas do gutter e os respiros internos encolhem: em
   tela estreita a moldura larga come a largura util da tabela. */
@media (max-width: 720px) {
    .ficha__cartao {
        padding: clamp(14px, 4vw, 22px);
        border-radius: clamp(18px, 4.5vw, 26px);
    }

    /* A tabela ja e estreita no desktop; no celular ela usa a largura toda do
       cartao, senao sobra recuo dos dois lados dentro de uma caixa ja estreita. */
    .ficha__tabela { max-width: none; }
}

/* As abas seguem lado a lado no celular: os tres rotulos sao curtos e
   empilhadas comiam uma tela inteira de altura. O que cede e o respiro
   lateral e o espacamento entre letras, nao a fonte — encolher a fonte
   deixaria o rotulo menor que o resto do cartao. */
@media (max-width: 560px) {
    .ficha__abas { gap: 2px; padding: 3px; }
    .ficha__aba {
        padding: clamp(10px, 2.8vw, 13px) clamp(4px, 1.4vw, 8px);
        letter-spacing: 0.03em;
    }
}

/* Abaixo disso "Ingredientes" nao cabe numa linha: as abas empilham. */
@media (max-width: 345px) {
    .ficha__abas { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* --------------------------------------------------------------------------
   ORIGEM — texto empilha e a seta sai

   A seta só faz sentido apontando do título para o cartão na diagonal. Em
   coluna única ela apontaria para o lado, para fora do conteúdo.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .origem__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    /* só o título centraliza; o cartão segue alinhado à esquerda por dentro.
       O recuo do alto era para a seta descer; sem ela, sai. */
    .origem__abertura { text-align: center; padding-top: 0; }
    .origem__cartao { width: 100%; max-width: 620px; }
    .origem__seta { display: none; }
}

/* --------------------------------------------------------------------------
   PROVA — o resumo e o depoimento perdem colunas antes do desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
    /* a galeria vai para a linha de baixo, ocupando a largura inteira */
    .prova__resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .prova__galeria { grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)); }
    /* a foto do depoimento desce para baixo do texto */
    .depo { grid-template-columns: clamp(180px, 24vw, 240px) minmax(0, 1fr); }
    .depo__foto { grid-column: 2; width: clamp(120px, 18vw, 170px); }
    /* empilhado o rodapé volta a fechar a largura toda, depois da foto */
    .depo__rodape { grid-column: 1 / -1; margin-top: calc(-1 * clamp(6px, 1.2vw, 12px)); }
}

@media (max-width: 720px) {
    .prova__resumo { grid-template-columns: minmax(0, 1fr); }
    .prova__galeria { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    /* a ficha do tutor vira faixa acima do texto: em coluna estreita ela
       espremia o depoimento a duas ou três palavras por linha */
    .depo { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 3vw, 20px); }
    .depo__foto { grid-column: 1; width: clamp(120px, 34vw, 170px); }
    /* encosta no pé da foto: o gap da grade serve para separar os blocos, e
       aqui os dois são o mesmo bloco de rodapé */
    .depo__rodape { margin-top: calc(-1 * clamp(6px, 1.6vw, 10px)); }
    .depo__ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .depo__ficha div { display: grid; justify-items: start; gap: 2px; }
    .depo__ficha dd { text-align: left; }

    /* A nota sobe para dentro do cartão do tutor, no canto superior direito.
       Empilhado, o cartão é a primeira linha do .depo e as estrelas sozinhas
       acima do título viravam uma faixa órfã entre dois blocos.

       A âncora é o .depo, e não o cartão: a nota vive em .depo__corpo, IRMÃO
       do cartão, então o cartão nunca é ancestral dela. Como a primeira linha
       do .depo é o próprio cartão, os dois começam no mesmo ponto no topo — os
       recuos saem dos tokens que desenham os dois paddings, em 23-prova.css.

       Sem reserva de espaço à direita do nome: ela foi testada e só fazia mal.
       O texto do tutor é curto e alinhado à esquerda, e em 21 cartões nenhum
       chega perto das estrelas em nenhuma largura até 720px — já a reserva
       estreitava a coluna do nome o bastante para quebrar "Compra verificada"
       em duas linhas a 320px. */
    .depo { position: relative; }
    .depo__nota {
        position: absolute;
        top: calc(var(--depo-y) + var(--tutor-pad));
        right: var(--tutor-pad);
    }

    /* Na lente o mesmo bloco é clonado sem o cartão do tutor em volta, então a
       regra acima não tem onde se ancorar: --depo-y e --tutor-pad não chegam
       ao clone, o calc() cai inteiro e a nota ficava na posição estática, já
       fora do fluxo — sobreposta ao título, que subia para o lugar dela.

       Aqui a âncora é o próprio painel. A nota vai para o canto superior
       direito, que está vazio, alinhada pelo centro do nome: o nome abre 12px
       abaixo da borda do padding (linha de 18px num cartão de 38px, centrado
       pelo avatar) e a nota tem 13px de altura, daí os 5,5px. Os dois valores
       são fixos em toda a faixa mobile — o avatar só cresce a partir de
       1055px e a fonte do nome, de 1368px. */
    .lente__painel .depo__nota {
        top: calc(var(--lente-pad) + 5.5px);
        right: var(--lente-pad);
    }
}

/* WHATSAPP — em coluna o botão desce para baixo do texto, e os dois centralizam:
   alinhados à esquerda numa faixa estreita eles ficavam encostados na borda. */
@media (max-width: 640px) {
    .zap__cartao {
      justify-content: center;
      text-align: center;
    }
}

/* --------------------------------------------------------------------------
   FAQ — o título deixa de dividir a linha com a sanfona

   Em duas colunas a pergunta mais longa quebra em três linhas antes de o
   título ganhar espaço útil.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .faq__inner { grid-template-columns: minmax(0, 1fr); }
    .faq__titulo { margin-bottom: clamp(6px, 1.4vw, 14px); }
}

/* --------------------------------------------------------------------------
   LENTE — foto em cima, texto embaixo

   Lado a lado numa tela estreita a foto ficaria com menos de 200px, que é
   menos do que a miniatura da grade que a abriu.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .lente__palco {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .lente__foto {
        min-height: 0;
        height: clamp(150px, 26dvh, 300px);
        place-items: center;
    }

    .lente__foto > * { object-fit: cover; }

    .lente__painel { --lente-pad: clamp(16px, 4vw, 22px); }

    /* a grade de fotos ganha ar: 6 colunas em 360px dariam 50px por foto */
    .prova__galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* FALE CONOSCO — os três tópicos não cabem lado a lado em tela estreita:
   a 390px o texto vazava para fora do cartão. */
@media (max-width: 900px) {
    .ajuda__topicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ajuda__topicos { grid-template-columns: minmax(0, 1fr); }
    .contato-cartao { text-align: center; }
    .contato-cartao__cta { margin: 0 auto; }
}

/* QUEM SOMOS — retrato e citação empilham; os pilares saem de três colunas. */
@media (max-width: 900px) {
    .qs-pilares__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Empilhado: a citação primeiro, o retrato embaixo, cortado pela base. */
    .qs-vet {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      padding-inline: var(--gutter);
      padding-top: clamp(28px, 5vw, 44px);
      padding-bottom: 0;
      min-height: 0;
      overflow: hidden;
      text-align: center;
    }
    .qs-vet__texto { order: 1; max-width: none; padding-block: 0; }
    .qs-vet__retrato { order: 2; position: static; margin-top: clamp(20px, 4vw, 32px); }
    .qs-vet__retrato img {
      position: static;
      width: min(100%, 320px);
      height: auto;
      max-width: none;
      margin: 0 auto;
      margin-bottom: calc(-1 * clamp(24px, 6vw, 44px));
    }
    .qs-selos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qs-produto__inner { grid-template-columns: minmax(0, 1fr); }
    /* Empilhado: a foto vai para o topo, em faixa, e o texto vem abaixo. */
    .qs-missao { padding-inline: 0; }
    .qs-missao__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* O texto vem primeiro: com a foto no topo ela encostava na do banner, e as
       duas ficavam coladas sem nada entre elas. */
    .qs-missao__texto { order: 1; padding-inline: var(--gutter); padding-block: clamp(30px, 6vw, 48px); }
    .qs-missao__figura { order: 2; height: clamp(240px, 58vw, 340px); }
}

@media (max-width: 620px) {
    .qs-pilares__lista { grid-template-columns: minmax(0, 1fr); }
    .qs-banda__inner { max-width: none; }
}