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

/* Repouso: barra branca opaca. A página é creme, então o branco já separa o
   header do conteúdo — e opaco é o que impede o texto de passar por trás dele
   no meio da rolagem. */
.pagina-produto .site-header {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    transform: none;
    padding: clamp(15px, 1.8vw, 25px) calc(var(--margem) + var(--gutter));
    background: var(--branco);
    border-bottom: 1px solid rgba(46, 50, 39, 0.07);
    color: var(--ink);
}

/* Rolado: a barra compacta e fica translúcida, desfocando o que passa atrás.
   Sem a animação de descida da home — aqui o header nunca sai de cena, então
   deslizar de volta pareceria um salto. Os três níveis do seletor são para
   vencer o repouso, que também é composto. */
.pagina-produto .site-header.is-scrolled {
    position: sticky;
    padding: clamp(10px, 1.3vw, 18px) calc(var(--margem) + var(--gutter));
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: none;
    transform: none;
}

.pagina-produto .brand-logo__img--empilhada { display: none; }
.pagina-produto .brand-logo__img--horizontal {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

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

.compra {
    padding: clamp(26px, 3.2vw, 52px) var(--gutter) var(--secao-y);
    background: var(--offwhite);
}

.compra__inner {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    gap: clamp(26px, 3.8vw, 62px);
    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); }
.galeria__seta--ant { left: clamp(10px, 1vw, 16px); }
.galeria__seta--prox { right: clamp(10px, 1vw, 16px); }

.galeria__miniaturas {
    display: flex;
    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;
    font-weight: 600;
    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(--terra);
}

.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);
}

.painel__nota-link {
    font-size: clamp(13px, 1vw, 14.5px);
    font-weight: 700;
    color: var(--sage);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.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__abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: var(--cinza-selo);
}

.planos__aba {
    position: relative;
    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: 999px;
    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;
}

.planos__aba:has(input:checked) {
    background: var(--branco);
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(30, 34, 24, 0.1);
}

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

.planos__desconto {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sage);
    color: var(--branco);
    font-size: clamp(10px, 0.78vw, 11.5px);
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* Grade de uma célula só: as duas frases se sobrepõem, então a caixa reserva a
   altura da mais alta e trocar de aba não empurra os kits para cima ou para
   baixo. Mesmo desenho do .brand-logo no header. */
.planos__incentivo {
    display: grid;
    margin-top: clamp(10px, 1vw, 14px);
    font-size: clamp(12.5px, 1vw, 14.5px);
    line-height: 1.4;
    color: rgba(46, 50, 39, 0.72);
    text-align: center;
}

.planos__frase { grid-area: 1 / 1; }
.planos__frase b { font-weight: 800; color: var(--sage); }

/* visibility, e não display: a célula precisa continuar ocupada pelas duas.
   Classe própria em vez da utilitária .so-* justamente por isso. */
.compra:has(#plano-unico:checked) .planos__frase--assinatura,
.compra:has(#plano-assinatura:checked) .planos__frase--unico { visibility: hidden; }

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

.kit {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(11px, 1.2vw, 16px);
    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;
}

.kit:has(input:checked) {
    background: var(--sage-veu);
    box-shadow: inset 0 0 0 2px var(--sage);
}

.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(--sage);
    transform: scale(0);
    transition: transform 160ms ease;
}

.kit:has(input:checked) .kit__marca { box-shadow: inset 0 0 0 2px var(--sage); }
.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);
    color: rgba(46, 50, 39, 0.62);
}

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

.kit__selo--economia { background: var(--sage); color: var(--branco); }
.kit__selo--melhor { background: var(--terra); color: var(--branco); }

.kit__preco { text-align: right; }

.kit__preco-valor {
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 800;
    color: var(--ink);
}

.kit__preco-cheio {
    display: block;
    margin-top: 3px;
    font-size: clamp(12px, 0.9vw, 13px);
    color: rgba(46, 50, 39, 0.48);
    text-decoration: line-through;
}

/* ---------- 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-2:checked) .compra__cta--u2,
.compra:has(#plano-unico:checked):has(#kit-3:checked) .compra__cta--u3,
.compra:has(#plano-assinatura:checked):has(#kit-1:checked) .compra__cta--a1,
.compra:has(#plano-assinatura:checked):has(#kit-2:checked) .compra__cta--a2,
.compra:has(#plano-assinatura:checked):has(#kit-3:checked) .compra__cta--a3 {
    display: flex;
}

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

.compra__reforcos {
    display: grid;
    gap: clamp(7px, 0.7vw, 10px);
    margin-top: clamp(13px, 1.4vw, 18px);
}

.compra__reforcos li {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 11px);
    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; }