/* ==========================================================================
   OFERTA — banda de foto com o cartão do Bone Broth, fechamento da home
   ========================================================================== */

/* Fundo branco, não a foto: a banda é um bloco dentro da seção. É isso que
   deixa a onda do rodapé continuar em --branco. */
.oferta {
    /* Sem topo: a banda de foto encosta direto nas histórias. O corte seco é o
       efeito — uma faixa branca no meio separaria a prova social da venda. */
    padding-bottom: var(--secao-y);
    background: var(--branco);
}

/* As ondas da banda são pintadas em --branco: é a cor da seção acima
   (depoimentos) e a do respiro abaixo, dentro da própria .oferta.

   Mesma altura das demais emendas do site (--onda-h): a barriga desta banda
   acompanha a que fecha a mídia, logo abaixo do hero (decisão 2026-09-21). A
   foto perde um pouco do topo nos cantos — o object-position compensa. */
.oferta__banda .onda {
    color: var(--branco);
    height: var(--onda-h);
}

/* No desktop só a onda de cima fica. A do pé saiu a pedido: a foto termina
   reta e o respiro branco da .oferta faz a emenda com o especialista. O
   elemento segue no HTML porque o mobile o mantém — ver 99-responsive.css. */
.oferta__banda .onda--pe { display: none; }

.oferta__banda {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    min-height: clamp(430px, 43vw, 620px);
    padding: clamp(32px, 4vw, 56px) var(--gutter);
}

/* O <picture> só troca o arquivo por media query; quem se posiciona é o <img>. */
.oferta__moldura { display: contents; }

.oferta__foto {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 44%;
}

/* Véu só à esquerda, onde o texto vive; a direita fica com a foto limpa. */
.oferta__banda::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(34, 38, 28, 0.78) 0%,
        rgba(34, 38, 28, 0.66) 26%,
        rgba(34, 38, 28, 0.34) 48%,
        rgba(34, 38, 28, 0.00) 68%);
}

.oferta__inner {
    /* Acima da onda (z-index 2): com a altura cheia ela avança sobre o topo
       do cartão, e o conteúdo precisa pintar por último. */
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.oferta__titulo {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.4vw, 49px);
    line-height: 1.12;
    color: var(--offwhite);
    letter-spacing: 0.005em;
    text-wrap: balance;

    max-width: 435px;
}

.oferta__destaque {
    font-weight: 800;
    /* Cor chapada em --terra-claro. A faixa de luz (oferta-brilho.js) saiu em
       2026-09-21: sobre a foto o degradê apagava as palavras. */
    color: var(--terra-claro);
}

.oferta__card {
    width: clamp(272px, 27vw, 386px);
    background: var(--branco);
    box-shadow: 0 22px 54px rgba(24, 28, 18, 0.28);
}

/* Painel do mockup: só a embalagem, centrada sobre fundo próprio; o texto
   fica no branco. O painel ocupa a caixa de conteúdo do cartão, então a borda
   dele alinha com o texto abaixo — é o que dá a moldura branca ao redor.
   (O selo saiu em 2026-09-21; o painel virou um bloco só.) */
.oferta__card .produto__figura {
    display: grid;
    place-items: center;
    padding: clamp(18px, 2vw, 28px) clamp(12px, 1.3vw, 17px);
    background: var(--cinza-cartao);
    border-radius: clamp(10px, 1vw, 15px);
    margin-bottom: clamp(14px, 1.6vw, 20px);
}


/* ==========================================================================
   VARIANTE --tigela — foto do cão com a tigela de ração

   Tudo aqui é sobrescrita. Tirar a classe `oferta--tigela` do <section>
   devolve o enquadramento da foto anterior, que continua intacto acima.

   O problema que ela resolve: a foto é 1,50:1 e a banda padrão é ~2,3:1, então
   o `cover` corta 35% da altura — e os dois sujeitos ocupam quase a altura
   inteira (cão de 7% a 63%, tigela de 65% a 96%). Com altura em px fixos o
   corte ainda PIORA em tela larga, porque a foto escala com a largura e a
   banda não. Por isso a altura aqui é em vw.
   ========================================================================== */

.oferta--tigela .oferta__banda {
    /* A banda é mais alta que a foto de propósito (74vw contra os 66vw da
       foto em 1,51:1): a onda cheia no topo cobria os olhos do cão, e o único
       jeito de a cabeça ficar abaixo da curva é empurrar a foto para baixo.
       O que sobra em cima é preenchido com o lilás do fundo da própria foto.
       O teto acompanha a foto até ~1900px de viewport. */
    /* 63vw = 74vw − 15%, a pedido (2026-09-21). Abaixo da altura da foto
       (66vw) o cover volta a cortar um pouco do topo, só o lilás. */
    min-height: clamp(420px, 63vw, 1190px);
    background: var(--lilas-banner);
}

/* No desktop a foto apoia na base e cresce só na largura: nada de cover, o
   topo fica para o lilás. Abaixo de 820px a foto é outra (vertical) e segue
   a regra padrão de cover, em 99-responsive.css. */
@media (min-width: 821px) {
    .oferta--tigela .oferta__foto {
        object-fit: cover;
        /* ancorada embaixo: o que a banda não cobre é o topo lilás da foto */
        object-position: 50% 100%;
    }
}

/* Em tela larga o conteúdo ficava numa ilha de 1180px com 683px de foto vazia
   de cada lado. O max-width acompanha a viewport a partir de ~1550px e para em
   1720 — abaixo disso o max() devolve os mesmos 1180 de sempre. */
.oferta--tigela .oferta__inner {
    max-width: min(1720px, max(1180px, 76vw));
}

/* O cartão cresce junto, senão vira um selo perdido numa banda de 2500px. */
.oferta--tigela .oferta__card {
    width: clamp(272px, 27vw, 440px);
}

/* Cada eixo serve a uma faixa, e por isso um valor só cobre as duas.
   Vertical 85%: no desktop a banda é mais larga que a foto, o corte é em cima
   e embaixo — empurrando para baixo, perde-se o topo das orelhas, não a tigela.
   Horizontal 18%: no mobile a faixa é mais alta que larga e o corte inverte —
   sem isso a janela começa em 15% e come a borda esquerda da tigela, que
   começa em 7%. Com 18% a janela abre em 5% e pega tigela e cão inteiros. */
.oferta--tigela .oferta__foto { object-position: 18% 65%; }


/* Véu mais curto e mais leve: o padrão escurecia até 48% da largura, que é
   justamente onde a tigela está. */
.oferta--tigela .oferta__banda::after {
    background: linear-gradient(90deg,
        rgba(34, 38, 28, 0.72) 0%,
        rgba(34, 38, 28, 0.46) 22%,
        rgba(34, 38, 28, 0.12) 40%,
        rgba(34, 38, 28, 0.00) 56%);
}