/* ==========================================================================
   MEUS PRODUTOS — cartões de produto
   Superfície branca entre duas seções creme: a onda da mídia desce sobre ela
   e a do rodapé sobe a partir dela.
   ========================================================================== */

/* Topo com --onda-folga: a onda da mídia desce sobre esta seção e comia o
   --secao-y inteiro — as pontas do título ficavam dentro do arco. A base é
   --secao-y puro: a garantia abaixo tem a mesma cor, então não há emenda. */
.produtos {
    position: relative;
    padding: calc(var(--secao-y) + var(--onda-folga)) var(--gutter) var(--secao-y);
    background: var(--branco);
    text-align: center;
    /* clip só na horizontal: a onda transborda para baixo, sobre depoimentos */
    overflow-x: clip;
    overflow-y: visible;
}

.produtos__inner {
    position: relative;
    /* acima da onda da seção anterior, que avança sobre esta em z-index 2 */
    z-index: 3;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- título ---------- */
/* Mesma base de "Estamos na mídia": Baloo 2, peso leve no geral e pesado na
   palavra destacada. Aqui o traço vira um círculo desenhado à mão. */
.produtos__titulo {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.08;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.produtos__destaque {
    position: relative;
    display: inline-block;
    font-weight: 800;
    color: var(--sage);
    white-space: nowrap;
}

/* Mesmo traço de "Estamos na mídia". A altura sai de aspect-ratio, e não de um
   valor em em: com preserveAspectRatio="none", caixa fora da proporção do
   viewBox achata o pincel num eixo só. Como "Produtos" é bem mais larga que
   "mídia", um em fixo distorceria. */
.produtos__traco {
    position: absolute;
    left: -6%;
    bottom: -0.42em;
    width: 112%;
    height: 0.30em;
    color: var(--terra);
    overflow: visible;
    pointer-events: none;
}

/* ---------- grade ---------- */
/* Quantos cartões cabem numa página. Quem lê é js/produtos-carrossel.js — o
   valor mora aqui para o ponto de virada continuar sendo uma media query, e
   não um número repetido no JS. */
.produtos__grade {
    --por-pagina: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* gap: clamp(18px, 2.4vw, 32px); */
    gap: 53px;
    /* O max-width acompanha o gap: 408 x 2 + 53. Sem isso o cartao encolhe para
       absorver o vao, e a largura de 408px que foi calibrada iria embora. */
    max-width: 869px;
    margin: clamp(40px, 5vw, 70px) auto 0;
    list-style: none;
}

/* Modo carrossel: entra só quando há mais de uma página. As páginas ocupam a
   MESMA célula da grade e trocam por fade — empilhar de verdade e esconder com
   display anularia a transição, e deslizar exigiria uma trilha que a grade não
   tem. A altura passa a ser a do cartão mais alto, que é o comportamento certo
   para não fazer a seção pular na troca. */
.produtos__grade.is-carrossel {
    grid-template-columns: minmax(0, 1fr);
}

/* A troca é ESCALONADA, não um crossfade. Com os dois cartões desaparecendo e
   aparecendo ao mesmo tempo eles cruzavam a meia opacidade empilhados na mesma
   célula, e o que se via no meio do caminho era uma imagem fantasma — é isso
   que fazia a transição parecer suja. Agora o que sai vai embora primeiro, em
   curva de entrada rápida, e o que entra espera esse tempo antes de começar.

   O leve scale dá corpo ao movimento: opacidade pura, sozinha, lê como
   piscada em vez de troca. */
.produtos__grade.is-carrossel > .produto {
    grid-area: 1 / 1;
    opacity: 0;
    /* O recuo é maior do que parece necessário de propósito: com um delta
       pequeno demais a troca lê como piscada, e é a distância percorrida — não
       a duração — que dá a sensação de suavidade. */
    transform: scale(0.955) translateY(14px);
    /* visibility junto com opacity: só opacity deixaria o cartão escondido
       focável e invisível, que é a pior combinação para quem navega por teclado.
       O atraso na visibility segura ele visível durante o fade de saída. */
    visibility: hidden;
    transition: opacity 400ms ease,
                transform 460ms cubic-bezier(0.4, 0, 0.6, 1),
                visibility 0s linear 460ms;
}

.produtos__grade.is-carrossel > .produto.is-ativo {
    opacity: 1;
    transform: none;
    visibility: visible;
    /* Os 320ms de atraso são o tempo que o cartão anterior leva para sumir —
       sem eles os dois cruzam a meia opacidade empilhados e a troca fica suja.
       A entrada é a mais longa das duas: o que chega precisa assentar, o que
       sai só precisa sair. */
    transition: opacity 580ms cubic-bezier(0.22, 1, 0.36, 1) 320ms,
                transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 320ms,
                visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .produtos__grade.is-carrossel > .produto,
    .produtos__grade.is-carrossel > .produto.is-ativo {
        transition: none;
        transform: none;
    }
}

/* ---------- cartão ---------- */
/* A grade interna deixa o botão colado na base em qualquer cartão, mesmo que
   a frase de um ocupe menos linhas que a do outro.
   Só as duas primeiras linhas são declaradas: o resto vira linha implícita
   `auto`. Enumerar as cinco quebrava o cartão que ganhasse um elemento a mais
   — a nota do teste A é exatamente esse caso. */
.produto {
    display: grid;
    grid-template-rows: auto 1fr;
    /* texto encostado à esquerda; só a embalagem fica centrada */
    text-align: left;
    padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vw, 30px);
    background: var(--cinza-cartao);
    border-radius: clamp(20px, 2vw, 30px);
    box-shadow: var(--sombra-cartao);
}

/* ---------- topo do cartão ---------- */
/* Linha única que hospeda o selo e, no teste B, a nota. O selo encosta à
   direita por `margin-left: auto`, não por justify-content: assim fica no canto
   tanto sozinho quanto ao lado da nota, sem precisar de variante de seletor. */
.produto__topo {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
}

/* ---------- selos ---------- */
.produto__selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* inline-flex, e não inline-block, para o selo aceitar ícone ao lado do rótulo */
.produto__selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(7px, 0.7vw, 10px) clamp(14px, 1.3vw, 19px);
    background: var(--cinza-selo);
    border-radius: 999px;
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 600;
    color: var(--pinho);
}

/* Selo terracota. Sem uso na home hoje — o padrão dos cartões é o claro. */
.produto__selo--destaque {
    background: var(--terra);
    color: var(--branco);
}

/* Selo claro, padrão dos cartões: a cor do texto já vem da regra base
   (--pinho), então só o fundo muda aqui. */
.produto__selo svg {
    width: 1.05em;
    height: 1.05em;
    flex: none;
}

.produto__selo--claro {
    /* background: var(--branco); */
    background: #e3e2e4b5;
}

/* O selo é etiqueta de contexto, não dado do produto: só entra quando o cartão
   recebe o ponteiro. Escondido por opacity, e não por display, para a linha do
   topo continuar ocupando altura — senão o cartão inteiro salta no hover. */
.produto__selo {
    opacity: 0;
    transform: translateY(-6px);
    /* Entra deslizando de cima, na curva desacelerada que o resto do site usa.
       Durações diferentes de propósito: a opacidade fecha antes do movimento,
       então o selo termina de assentar já opaco, em vez de piscar no fim. */
    transition: opacity 380ms ease,
                transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.produto:hover .produto__selo,
.produto:focus-within .produto__selo,
.produto:active .produto__selo {
    opacity: 1;
    transform: none;
}

/* Aparelho de toque não tem hover, então quem revela ali é o :active do
   toque na linha acima. Para o iOS disparar :active em elemento que não é
   link, o cartão precisa ser reconhecido como tocável — é o que o
   touch-action faz aqui. */
@media (hover: none) {
    .produto { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
    .produto__selo { transition: none; transform: none; }
}

/* ---------- imagem ---------- */
.produto__figura {
    display: grid;
    place-items: center;
    width: 100%;
    padding: clamp(10px, 1.2vw, 18px) 0;
}

/* Nossos produtos são VERTICAIS — sachê e pote em pé —, ao contrário da
   referência, que fotografa o produto deitado. Por isso quem manda aqui é a
   altura: limitar pela largura fazia a figura ocupar 55% do cartão e ele
   deixava de caber na tela. O max-width segura o pote, que é quase quadrado. */
.produto__figura img {
    height: clamp(207px, 17.1vw, 248px);
    width: auto;
    max-width: 100%;
    display: block;
}

/* ---------- texto ---------- */
/* Baloo 2 em 800 — a fonte tem as duas faces declaradas (600 e 800), então o
   peso é real e não sintetizado. Cor em --sage-dark, que é da paleta oficial:
   o --pinho anterior está marcado EM TESTE e não consta na tabela de marca do
   AGENTS.md. Contraste sobre o cinza do cartão: 4,54:1. */
.produto__nome {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(23px, 2.25vw, 32px);
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: var(--sage-dark);
}

/* Nunito, como todo texto corrido do site: o Baloo fica só no nome.
   Fica no escuro enquanto nome e selo são verdes — é o contraste entre os dois
   que separa a identificação do produto da frase que o descreve. */
.produto__frase {
    max-width: 34ch;
    margin: clamp(8px, 0.9vw, 12px) 0 clamp(18px, 2vw, 26px);
    font-size: clamp(15px, 1.05vw, 16px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
}

/* ---------- nota ----------
   Abaixo do nome do produto. */
.produto__nota {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.6vw, 9px);
    line-height: 1;
}

.produto__nota-valor {
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 700;
    color: var(--ink);
}

/* descola do nome, que agora fica imediatamente acima */
.produto__nota--abaixo { margin-top: clamp(7px, 0.7vw, 10px); }

.produto__estrelas {
    height: clamp(15px, 1.25vw, 18px);
    width: auto;
    color: var(--estrela);
}

/* ---------- ação ---------- */
/* O botão é o componente .btn-card (05-components.css), que nasceu aqui e vale
   para qualquer cartão do site. Esta seção não precisa sobrescrever nada. */

/* ==========================================================================
   MODO SIMPLES (2026-09-21) — referência Blivo "Mais Vendidos"
   O cartão perde a caixa: embalagem solta sobre o branco, tudo centrado,
   selo sempre visível, nota com volume de avaliações. Escopo restrito à grade
   da home — o cartão do banner (.oferta__card) mantém a caixa e o hover.
   ========================================================================== */
.produtos__grade > .produto {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    justify-items: center;
}

.produtos__grade > .produto .produto__topo { justify-content: center; }

.produtos__grade > .produto .produto__selos {
    justify-content: center;
    margin-left: 0;
}

/* Selo fixo: no modelo simples ele é o único dado de categoria do cartão e
   precisa aparecer no mobile, onde hover não existe. */
.produtos__grade > .produto .produto__selo {
    opacity: 1;
    transform: none;
    background: var(--areia-veu);
    color: var(--sage-dark);
}

.produtos__grade > .produto .produto__figura {
    padding-top: clamp(14px, 1.6vw, 22px);
}

.produtos__grade > .produto .produto__nota { justify-content: center; }

.produto__nota-volume {
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 400;
    color: var(--ink);
    opacity: 0.62;
}

.produtos__grade > .produto .produto__frase {
    margin-left: auto;
    margin-right: auto;
}

/* Botão sólido em terracota, como o CTA do hero; largura igual nos dois. */
.produtos__grade > .produto .produto__cta { width: clamp(200px, 15.3vw, 220px); }

/* Pílula clara do hero. Sobre a seção branca o branco da .btn-card sumiria:
   fundo em --offwhite e um fio em --areia dão a borda que o sálvia dava lá. */
.produtos__grade > .produto .produto__cta {
    background: var(--offwhite);
    border: 1px solid var(--areia);
}

.produtos__grade > .produto .produto__cta .btn-card__label { color: var(--cinza-texto); }

/* Sem a caixa o cartão perdeu o padding que separava os blocos: o respiro
   passa a viver nos próprios elementos. */
.produtos__grade > .produto .produto__nome { margin-top: clamp(18px, 1.8vw, 26px); }
.produtos__grade > .produto .produto__nota--abaixo { margin-top: clamp(10px, 1vw, 14px); }
.produtos__grade > .produto .produto__frase {
    margin-top: clamp(14px, 1.4vw, 20px);
    margin-bottom: clamp(24px, 2.4vw, 34px);
}

/* ---------- modo rolar (celular) ----------
   No lugar do fade, uma fila real com scroll-snap: um cartão por tela, o
   dedo arrasta e o cartão seguinte encaixa. A fila usa a largura da própria
   seção (dentro do --gutter); o vão entre cartões fica fora da tela.
   A troca de modo é lida pelo JS na custom property --modo. */
.produtos__grade[data-modo="rolar"] {
    display: flex;
    gap: var(--produtos-vao);
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.produtos__grade[data-modo="rolar"]::-webkit-scrollbar { display: none; }

.produtos__grade[data-modo="rolar"] > .produto {
    flex: 0 0 var(--produtos-cartao);
    scroll-snap-align: start;
}

/* Pontos só quando há mais de uma página: no desktop os dois cartões já
   estão à vista e a patinha sozinha não indica nada. */
.carrossel-pontos.is-unica { display: none; }