/* ==========================================================================
   COMPRA — primeira dobra da página de produto: galeria + painel de decisão
   ========================================================================== */

/* A onda do rodapé é pintada com a cor da seção acima dela — hoje o FAQ. */
.rodape .onda { color: var(--offwhite); }

/* A garantia é a mesma camada da home (11-garantia.css); aqui só o fundo da
   seção muda, porque as vizinhas são outras. O cartão em si não é tocado. */
/* Trecho branco corrido: especialista, garantia e avaliações. Sem onda entre
   elas. A camada da home conta com as vizinhas dando --secao-y-curta cada
   uma; aqui a faixa do especialista termina rente ao próprio conteúdo e não
   dá nada, enquanto as avaliações dão --secao-y inteiro. O topo compensa a
   diferença, para o cartão ficar com o mesmo ar dos dois lados. */
.pagina-produto .garantia {
    padding-top: calc(var(--secao-y-curta) + var(--secao-y));
    background: var(--branco);
}

.compra {
    position: relative;
    /* respiro entre a galeria e o painel; a galeria reusa o mesmo valor quando
       empilha, para a emenda de cima bater com a de baixo */
    --compra-gap: clamp(26px, 3.8vw, 62px);
    /* Respiro do topo generoso: o header é sticky e opaco nesta página, então
       o que se vê entre a barra e a galeria é só este padding. Com 7,4vw o
       conteúdo começava a 66px do header e a dobra lia como apertada — o resto
       do site trabalha na escala de --secao-y (100px em 1440). */
    padding: clamp(52px, 8.6vw, 136px) var(--gutter) var(--secao-y);
    background: var(--offwhite);
    /* clip só na horizontal: a onda transborda para baixo, sobre a ficha */
    overflow-x: clip;
    overflow-y: visible;
}

/* A onda para a ficha só existe empilhada (≤1020px, em 99-responsive.css),
   onde ela pousa na foto de largura inteira; lado a lado a emenda é reta. */
/* A onda fecha a dobra de compra, como a da mídia fecha o topo da home: a
   superfície seguinte sobe em curva. Estava desligada enquanto a seção não
   tinha o que pôr acima dela. */
.compra .onda { color: var(--offwhite); }

/* A barra de imprensa entra DENTRO da dobra de compra, no mesmo fundo, como
   complemento dela — e não como seção nova. Por isso reusa as classes de
   08-midia.css: só o respiro acima e o tamanho do título mudam aqui.
   A folga de baixo é a da onda, que transborda sobre a seção seguinte. */
.compra__midia {
    position: relative;
    z-index: 3;
    /* Quase o dobro de --secao-y, para bater com os ~194px que a home deixa
       entre o pé do hero e este mesmo título. Aqui o vizinho de cima não é o
       fim de uma seção: é a coluna direita da compra, que desce bem abaixo da
       galeria e termina no botão e nos selos — com --secao-y cheio sobravam
       só 100px, e o título encostava neles. */
    margin-top: calc(var(--secao-y) * 1.9);
    text-align: center;
}

.compra__inner {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    gap: var(--compra-gap);
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- galeria ---------- */
.galeria {
    display: grid;
    gap: clamp(10px, 1.1vw, 15px);
}

.galeria__palco {
    position: relative;
    border-radius: clamp(20px, 2vw, 30px);
    overflow: hidden;
    background: var(--areia);
}

/* scroll-snap dá o arrasto nativo no toque; as setas só rolam o trilho */
.galeria__trilho {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.galeria__trilho::-webkit-scrollbar { display: none; }

.galeria__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.galeria__slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.galeria__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: clamp(38px, 3.4vw, 48px);
    height: clamp(38px, 3.4vw, 48px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(30, 34, 24, 0.16);
}

.galeria__seta svg { width: 44%; height: 44%; }
.galeria__seta:hover { background: var(--branco); }

/* Fica no lugar em vez de sumir: seta que desaparece muda a largura útil da
   foto e desloca a outra seta. */
.galeria__seta:disabled {
    opacity: 0.3;
    cursor: default;
}

.galeria__seta:disabled:hover { background: rgba(255, 255, 255, 0.88); }
.galeria__seta--ant { left: clamp(10px, 1vw, 16px); }
.galeria__seta--prox { right: clamp(10px, 1vw, 16px); }

.galeria__miniaturas {
    display: flex;
    /* Centradas sob o palco em qualquer largura: quatro miniaturas alinhadas
       à esquerda deixavam a coluna visualmente torta. */
    justify-content: center;
    gap: clamp(8px, 0.9vw, 12px);
}

.galeria__mini {
    width: clamp(62px, 6.2vw, 86px);
    padding: 0;
    border-radius: clamp(10px, 1.1vw, 15px);
    overflow: hidden;
    background: var(--areia);
    /* outline, e não box-shadow: a foto preenche o botão inteiro e cobriria
       uma sombra interna. O offset negativo desenha o anel por cima dela. */
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 180ms ease;
}

.galeria__mini img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.galeria__mini[aria-current="true"] { outline-color: var(--sage); }

/* ---------- painel ---------- */
.painel__nome {
    font-family: 'Baloo 2', sans-serif;
    /* Peso único e cor única: o destaque em sálvia na marca (2026-09) saiu —
       com kits, selos e abas na mesma dobra, a dobra ficava carregada. */
    font-weight: 700;
    font-size: clamp(27px, 2.9vw, 42px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    color: var(--ink);
}

.painel__nota {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(7px, 0.7vw, 10px);
    margin-top: clamp(9px, 0.9vw, 13px);
    line-height: 1;
}

.painel__estrelas {
    height: clamp(16px, 1.35vw, 19px);
    width: auto;
    color: var(--estrela);
}

.painel__nota-valor {
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 800;
    color: var(--ink);
}

.painel__nota-contagem {
    font-size: clamp(13px, 1vw, 14.5px);
    color: rgba(46, 50, 39, 0.62);
}

/* Teto do painel: sem ele a coluna chega a 608px em tela larga e as opções de
   kit ficam com caixa grande demais para o conteúdo que carregam. */
.painel { max-width: 520px; }

.painel__apoio {
    max-width: 46ch;
    margin-top: clamp(12px, 1.2vw, 17px);
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.5;
    color: rgba(46, 50, 39, 0.8);
}

/* ---------- abas de plano ---------- */
.planos { margin-top: clamp(22px, 2.6vw, 34px); }
.planos .etapa { margin-top: 0; }


.planos__abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 5px;
    /* Mesmo raio dos cartões de kit, não pílula: as duas etapas da compra
       precisam da mesma identidade. A trilha É o cartão, então leva o raio
       cheio; a aba, aninhada, leva o raio interno (cheio − padding). */
    border-radius: clamp(14px, 1.4vw, 20px);
    /* Branco com fio, e não cinza: o não-selecionado dos kits é branco, e
       dois vocabulários para o mesmo estado na mesma dobra confundiam. */
    background: var(--branco);
    box-shadow: inset 0 0 0 1px var(--linha);
}

.planos__aba {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.6vw, 9px);
    padding: clamp(11px, 1.05vw, 15px) clamp(10px, 1vw, 16px);
    border-radius: calc(clamp(14px, 1.4vw, 20px) - 5px);
    font-size: clamp(12.5px, 1vw, 14.5px);
    font-weight: 700;
    color: rgba(46, 50, 39, 0.58);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.planos__aba input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Mesma linguagem de "selecionado" dos kits: fundo verde claro e anel de 1px no
   verde vivo. Antes era pílula branca com sombra difusa — dois vocabulários
   diferentes para o mesmo estado na mesma dobra. */
.planos__aba:has(input:checked) {
    background: var(--verde-fundo);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--verde-vivo);
}

.planos__aba span { white-space: nowrap; }
.planos__aba .planos__aba-curto { display: none; }

/* Pastilha clara com texto escuro, como na referência — e não sálvia sólido
   com texto branco, que competia com a aba selecionada. */
/* O selo saiu de dentro do <label> e virou botão irmão: dentro dele o clique
   marcaria o radio junto e não haveria como abrir o modal sem trocar de plano. */
.planos__caixa { position: relative; display: grid; }

.planos__caixa .planos__aba { padding-right: clamp(52px, 4.6vw, 68px); }

/* Assinatura marcada: o selo inverte para verde sólido, como o selo do kit
   selecionado. Sobre o fundo verde-claro da aba marcada ele sumia. */
.planos__caixa:has(input:checked) .planos__desconto {
    background: var(--verde-vivo);
    color: var(--branco);
}

.planos__desconto {
    position: absolute;
    top: 50%;
    right: clamp(9px, 0.9vw, 13px);
    translate: 0 -50%;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--areia-veu);
    color: var(--sage-dark);
    font-size: clamp(10px, 0.78vw, 11.5px);
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

/* ---------- kits ---------- */
.kits {
    display: grid;
    gap: clamp(9px, 0.9vw, 13px);
    margin-top: clamp(10px, 1vw, 14px);
}

/* ---------- etapas da compra ----------
   Plano e pacote são duas decisões em sequência, não quatro opções soltas.
   O rótulo numerado separa as etapas sem precisar de caixa nem de linha: é o
   que os buy boxes de assinatura fazem (Seed, Native Pet). O número herda o
   verde do estado selecionado, que é a cor de "escolha" nesta dobra. */
.etapa {
    display: flex;
    align-items: center;
    gap: clamp(7px, 0.7vw, 10px);
    margin-top: clamp(26px, 2.8vw, 38px);
    margin-bottom: clamp(9px, 0.9vw, 13px);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 800;
    color: var(--ink);
}

.etapa__num {
    display: grid;
    place-items: center;
    width: clamp(20px, 1.7vw, 23px);
    height: clamp(20px, 1.7vw, 23px);
    flex: none;
    border-radius: 50%;
    /* Areia e sálvia, não verde: o número é rótulo de navegação, e o verde
       desta dobra significa "você escolheu isto". Um papel por cor. */
    background: var(--areia-veu);
    color: var(--sage-dark);
    font-size: clamp(11px, 0.85vw, 12.5px);
    font-weight: 800;
}

.kit {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    display: grid;
    /* linha 1 são as três colunas de sempre; o bloco de vantagens entra numa
       segunda linha, atravessando todas elas. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    --kit-gap: clamp(11px, 1.2vw, 16px);
    column-gap: var(--kit-gap);
    /* A LINHA não leva gap. O bloco de vantagens é a segunda linha e abre de
       altura zero: um gap de faixa ficaria de pé mesmo com ele fechado, e não dá
       para engoli-lo com margem negativa — faixa de grade não aceita tamanho
       negativo, a margem só seria descartada. O respiro do estado aberto vem do
       margin-top do próprio .kit__assina, que é animável. */
    row-gap: 0;
    padding: clamp(13px, 1.35vw, 19px) clamp(14px, 1.5vw, 20px);
    border-radius: clamp(14px, 1.4vw, 20px);
    background: var(--branco);
    box-shadow: inset 0 0 0 1px var(--linha);
    cursor: pointer;
    transition: background 180ms ease, box-shadow 180ms ease;
}

/* Borda de espessura única nos dois estados — só a cor muda ao selecionar.
   Antes o anel engrossava de 1px para 2px e o cartão "pulava" na troca.
   Plano, sem a segunda sombra deslocada que a referência usa: ela engrossava
   as bordas de baixo e da direita e lia como relevo. O mesmo vale para as
   abas de plano acima, que dividem a linguagem de seleção. */
.kit:has(input:checked) {
    background: var(--verde-fundo);
    box-shadow: inset 0 0 0 1px var(--verde-vivo);
}

.kit input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kit__marca {
    display: grid;
    place-items: center;
    width: clamp(19px, 1.7vw, 23px);
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--linha);
    transition: box-shadow 180ms ease;
}

.kit__marca::after {
    content: '';
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--verde-vivo);
    transform: scale(0);
    transition: transform 160ms ease;
}

.kit:has(input:checked) .kit__marca { box-shadow: inset 0 0 0 1.5px var(--verde-vivo); }
.kit:has(input:checked) .kit__marca::after { transform: scale(1); }

.kit__topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(6px, 0.7vw, 10px);
}

.kit__nome {
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 800;
    color: var(--ink);
}

.kit__detalhe {
    margin-top: 3px;
    font-size: clamp(12.5px, 0.95vw, 13.5px);
    font-weight: 600;
    /* Entre o preço à vista (0,55) e o corpo: visível o bastante para comparar
       kits, discreto o bastante para não brigar com o parcelado. Sem verde —
       em verde ele disputava com os outros sinais do cartão marcado. */
    color: rgba(46, 50, 39, 0.72);
}

/* Âncora do preço unitário: o riscado é o preço de 1 pacote, que é o valor
   cheio praticado na página. Não é um número novo na dobra — é o mesmo dado
   ganhando contexto, por isso não conta como quarta informação de preço. */
.kit__detalhe s {
    /* Menor e mais leve que o preço vigente ao lado: é âncora, não é o número
       que decide. O em mantém a proporção quando o clamp muda de largura. */
    margin-right: 5px;
    font-size: 0.86em;
    font-weight: 400;
    color: rgba(46, 50, 39, 0.4);
    text-decoration-thickness: 1px;
}

.kit__selo {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: clamp(10px, 0.78vw, 11.5px);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Mesma pastilha do selo de desconto da aba de assinatura: verde saturado sobre
   véu claro. Um estilo só — os dois selos falam da mesma coisa, economia. */
/* Em repouso a tag é etiqueta, não chamariz: fundo areia lavada e texto
   sálvia. Marcada, ela inverte para verde sólido. A diferença entre os dois
   estados é o que faz o olho encontrar o cartão escolhido — em verde nos dois
   ela competia com o preço, que é o dado que decide a compra. */
.kit__selo {
    background: var(--areia-veu);
    color: var(--sage-dark);
}

.kit:has(input:checked) .kit__selo {
    background: var(--verde-vivo);
    color: var(--branco);
}

.kit__preco { text-align: right; }

.kit__preco-valor {
    /* 17,5px, não 19: o parcelado continua sendo o dado de maior peso da
       linha, mas dois textos fortes lado a lado (nome do kit em 17px) estavam
       disputando a entrada do olho. */
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    font-weight: 700;
    color: var(--ink);
}

/* Antes era o preço cheio riscado; agora é o total à vista, abaixo da parcela.
   Sem corte: não é ancoragem, é a outra forma de pagar. */
.kit__preco-vista {
    display: block;
    margin-top: 3px;
    font-size: clamp(12px, 0.9vw, 13px);
    color: rgba(46, 50, 39, 0.55);
}

/* ---------- ação ----------
   CSS não reescreve href, então existe um link por combinação de plano e kit
   e o :has() revela o da combinação marcada. Os outros cinco saem por
   display: none — assim nem entram na árvore de acessibilidade. */
.compra__acao { display: grid; }

.compra__cta {
    display: none;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 0.8vw, 12px);
    width: 100%;
    margin-top: clamp(16px, 1.7vw, 24px);
    padding: clamp(15px, 1.5vw, 21px);
    border-radius: 999px;
    background: var(--terra);
    color: var(--branco);
    font-size: clamp(13.5px, 1.1vw, 16px);
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 14px 28px rgba(196, 126, 78, 0.26);
    transition: filter 180ms ease, transform 180ms ease;
}

.compra:has(#plano-unico:checked):has(#kit-1:checked) .compra__cta--u1,
.compra:has(#plano-unico:checked):has(#kit-3:checked) .compra__cta--u3,
.compra:has(#plano-unico:checked):has(#kit-6:checked) .compra__cta--u6,
.compra:has(#plano-assinatura:checked):has(#kit-1:checked) .compra__cta--a1,
.compra:has(#plano-assinatura:checked):has(#kit-3:checked) .compra__cta--a3,
.compra:has(#plano-assinatura:checked):has(#kit-6:checked) .compra__cta--a6 {
    display: flex;
}

.compra__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.compra__cta svg { width: 1.2em; height: 1.2em; flex: none; }

/* Folga larga acima: a lista de reforços é outro assunto que não o botão, e
   colada nele lia como legenda dele.

   Em linha e centrada sob o botão, no desktop e no mobile: são dois selos
   curtos, e empilhados à esquerda pareciam lista de benefícios. */
.compra__reforcos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Vão entre os dois selos bem maior que o vão ícone→texto (5px): é a
       diferença entre os dois espaços que faz ler como dois blocos. */
    gap: clamp(22px, 3.8vw, 58px);
    margin-top: clamp(22px, 2.4vw, 34px);
}

.compra__reforcos li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(12.5px, 0.95vw, 14px);
    color: rgba(46, 50, 39, 0.72);
}

.compra__reforcos svg {
    width: clamp(15px, 1.25vw, 17px);
    height: auto;
    flex: none;
    color: var(--sage);
}

/* ---------- troca de estado entre os dois planos ----------
   Cada par de textos existe no HTML; a aba marcada esconde o do outro plano. */
.compra:has(#plano-unico:checked) .so-assinatura { display: none; }
.compra:has(#plano-assinatura:checked) .so-unico { display: none; }


/* ---------- modal da assinatura ----------
   Mesmo desenho da lente das avaliações: `display` vive em [open], nunca na
   classe — regra de autor no elemento vence o `dialog:not([open]){display:none}`
   do navegador por origem de cascata, e o modal ficaria visível na página.
   O `margin: auto` volta porque o reset universal zera o do <dialog>. */
.modal {
    margin: auto;
    width: min(520px, calc(100vw - 2 * var(--margem)));
    max-height: calc(100dvh - 2 * var(--margem));
    padding: clamp(26px, 3vw, 40px);
    border: 0;
    border-radius: clamp(16px, 1.8vw, 24px);
    background: var(--branco);
    color: var(--ink);
    overflow: auto;
}

.modal[open] { display: block; }
.modal::backdrop { background: rgba(24, 28, 18, 0.52); }

.modal__fechar {
    position: absolute;
    top: clamp(12px, 1.2vw, 18px);
    right: clamp(12px, 1.2vw, 18px);
    display: grid;
    place-items: center;
    width: clamp(30px, 2.6vw, 36px);
    height: clamp(30px, 2.6vw, 36px);
    border-radius: 50%;
    background: var(--cinza-selo);
    color: rgba(46, 50, 39, 0.7);
    cursor: pointer;
}

.modal__fechar svg { width: 46%; height: 46%; }
.modal__fechar:hover { background: var(--linha); }

.modal__titulo {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(21px, 1.9vw, 27px);
    line-height: 1.15;
    padding-right: clamp(34px, 3vw, 44px);
    color: var(--pinho);
}

.modal__lista {
    display: grid;
    gap: clamp(11px, 1.1vw, 15px);
    margin-top: clamp(16px, 1.7vw, 23px);
    font-size: clamp(14.5px, 1.05vw, 16px);
    line-height: 1.5;
}

.modal__lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(9px, 1vw, 13px);
    align-items: start;
}

.modal__lista li::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-radius: 50%;
    background: var(--sage);
}

.modal__lista b { font-weight: 800; }

.modal__nota {
    margin-top: clamp(16px, 1.7vw, 23px);
    padding-top: clamp(13px, 1.3vw, 18px);
    border-top: 1px solid var(--linha);
    font-size: clamp(13px, 0.98vw, 14.5px);
    color: rgba(46, 50, 39, 0.66);
}


/* ---------- vantagens dentro do kit (só na assinatura) ----------
   Elas viviam sob o botão, mas duas das três só valem para quem assina — sob o
   botão apareciam também na compra única, onde não se aplicam. Aqui vivem
   dentro do cartão escolhido, que é onde a referência as coloca.

   A abertura desliza para baixo em vez de trocar `display`, que não transiciona
   e fazia o cartão saltar de altura num quadro só.

   Quem anima é `grid-template-rows: 0fr → 1fr`: `height: auto` não interpola, e
   esta é a única forma de ir até a altura natural do conteúdo sem medir nada em
   JS. O filho é que leva o `overflow: hidden` — a faixa de 0fr só define o
   tamanho da linha, não corta o que passa dela.

   Fechado, TUDO que ocupa altura sai de zero — margem, padding e borda — porque
   o bloco continua sendo uma linha da grade do cartão mesmo sem conteúdo visível.
   Sem isso todo kit nasceria mais alto na compra única, onde as vantagens nem se
   aplicam. A margem aberta reproduz o espaço de antes: o gap da grade menos o
   meio-gap que a regra antiga descontava com margem negativa. */
.kit__assina {
    display: grid;
    grid-template-rows: 0fr;
    grid-column: 1 / -1;
    margin-top: 0;
    padding-top: 0;
    border-top: 0 solid var(--linha);
    transition: grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1),
                margin-top 340ms cubic-bezier(0.22, 1, 0.36, 1),
                padding-top 340ms cubic-bezier(0.22, 1, 0.36, 1),
                border-top-width 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Só no cartão marcado: nos outros dois triplicaria a altura da lista sem
   ajudar em nada — a decisão já foi tomada quando elas aparecem. */
.compra:has(#plano-assinatura:checked) .kit:has(input:checked) .kit__assina {
    grid-template-rows: 1fr;
    margin-top: calc(var(--kit-gap) - clamp(5px, 0.55vw, 8px));
    padding-top: clamp(11px, 1.1vw, 15px);
    border-top-width: 1px;
}

/* `visibility` faz o papel que o `display: none` fazia de graça: sem ela a lista
   fechada continua legível por leitor de tela nos três cartões, e também na
   compra única — onde duas das três linhas não valem.

   É ela, e não `content-visibility`: o segundo torna a caixa contida em tamanho,
   e aí a linha `1fr` mede zero e nada abre. `visibility` some sem mexer na medida.

   A troca é assimétrica de propósito. Ao fechar, `visibility` espera a faixa
   terminar de recolher — o conteúdo precisa continuar à vista enquanto ela
   encolhe — e isso é ATRASO de uma transição de duração zero, nunca duração:
   com `visibility 340ms` a propriedade interpolaria, e o bloco só apareceria
   quando o motor de animação avançasse. Ao abrir ela fica fora da lista de
   transição, então vale no mesmo instante — nada a esperar. */
.kit__vantagens {
    display: grid;
    /* 2x2: frequência e desconto à esquerda, frete e cancelamento à direita.
       Em coluna única as quatro linhas alongavam demais o cartão aberto. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 0.65vw, 9px) clamp(12px, 1.4vw, 22px);
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease,
                visibility 0s linear 340ms;
}

.compra:has(#plano-assinatura:checked) .kit:has(input:checked) .kit__vantagens {
    opacity: 1;
    visibility: visible;
    /* `visibility` fora da lista: sem transição declarada ela vale na hora, sem
       passar pelo motor de animação. */
    transition: opacity 240ms ease;
}

.kit__vantagens li {
    display: flex;
    align-items: baseline;
    gap: clamp(6px, 0.6vw, 8px);
    font-size: clamp(12.5px, 0.95vw, 14px);
    color: var(--ink);
}

/* Check nu e escuro, como na referência — o de círculo sálvia da lista sob o
   botão perderia a leitura sobre o véu verde do cartão. Como pseudo-elemento
   e não SVG: são quatro itens fixos por cartão, e repetir o mesmo desenho 12
   vezes no HTML só engorda a página. */
.kit__vantagens li::before {
    content: '';
    width: clamp(11px, 0.9vw, 13px);
    height: clamp(11px, 0.9vw, 13px);
    flex: none;
    translate: 0 1px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.4 5.4L20 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.4 5.4L20 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "a partir da 2ª entrega" é a condição, não o benefício: peso menor. */
.kit__vantagem-nota {
    font-size: 0.88em;
    font-style: italic;
    color: rgba(46, 50, 39, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .kit__assina,
    .kit__vantagens { transition: none; }
}

/* Cada página fecha com a sua cena; a foto vem da variável, não de outra regra. */
.rodape__cena--produto { --cena-foto: url('../images/banners/sub-footer-3.webp'); }