/* ============================================================
   DESTAQUES — TESTE DE MOSAICO PRETO E BRANCO
   Ideal Bike Shop

   Estrutura:
   - duas colunas no desktop;
   - caixas alternadas em preto e branco;
   - espaço branco visível entre as linhas;
   - caixas pretas com recortes internos e pontas externas;
   - animações leves, sem alterar funcionamento de carrinho.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;800&family=Poppins:wght@600;700;800;900&display=swap');

:root {
  --showcase-amarelo: #ffd500;
  --showcase-amarelo-escuro: #806b00;
  --showcase-preto: #050505;
  --showcase-branco: #ffffff;
  --showcase-cinza: #e8e8e8;
  --showcase-texto: #111111;
  --showcase-altura-linha: clamp(330px, 31vw, 470px);
  --showcase-gap-linhas: clamp(12px, 1.35vw, 20px);
  --showcase-chanfro-x: clamp(26px, 3vw, 48px);
  --showcase-chanfro-y: clamp(28px, 3.3vw, 52px);
  --showcase-ponta: calc(var(--showcase-gap-linhas) + 2px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--showcase-cinza);
  color: var(--showcase-texto);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

.showcase-pagina,
.showcase-destaques {
  width: 100%;
}

.showcase-destaques {
  padding:
    clamp(46px, 6vw, 82px) 0 clamp(64px, 8vw, 110px);
  margin-top: -110px;
}


/* ============================================================
   CABEÇALHO
   ============================================================ */

.showcase-cabecalho {
  width: min(780px, calc(100% - 36px));
  margin: 0 auto clamp(34px, 4vw, 54px);
  text-align: center;
  margin-top: -31px;
}

.showcase-cabecalho__tag {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--showcase-amarelo-escuro);

  font-size: clamp(.7rem, .78vw, .88rem);
  font-weight: 900;
  letter-spacing: .16em;
}

.showcase-cabecalho h2 {
  margin: 0;

  color: #080808;

  font-size: clamp(2.5rem, 6vw, 5.8rem);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: .92;

  text-transform: uppercase;
}

.showcase-cabecalho p {
  width: min(620px, 100%);

  margin:
    18px auto 0;

  color: #555;

  font-size: clamp(.96rem, 1.25vw, 1.14rem);
  line-height: 1.65;
}


/* ============================================================
   MOSAICO DESKTOP
   ============================================================ */

.showcase-mosaico {
  position: relative;

  isolation: isolate;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  grid-auto-rows:
    minmax(var(--showcase-altura-linha), auto);

  column-gap: 0;
  row-gap: var(--showcase-gap-linhas);

  width: 100%;

  overflow: hidden;

  background: var(--showcase-branco);
}

.showcase-card {
  position: relative;

  min-width: 0;
  min-height: var(--showcase-altura-linha);

  display: flex;
  align-items: center;

  padding:
    clamp(30px, 4.6vw, 72px);
}

.showcase-card--claro {
  z-index: 1;

  background:
    radial-gradient(circle at 68% 28%,
      rgba(255, 213, 0, .14),
      transparent 30%),
    var(--showcase-branco);

  color: var(--showcase-texto);
}

.showcase-card--preto {
  z-index: 3;

  overflow: visible;

  color: var(--showcase-branco);
  background: transparent;
}

.showcase-card--preto::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(125deg,
      rgba(255, 213, 0, .052),
      transparent 46%),
    var(--showcase-preto);

  pointer-events: none;
}


/* Caixa preta localizada no lado esquerdo. */

.showcase-card--preto-esquerda::before {
  clip-path: polygon(0 0,

      calc(100% - var(--showcase-chanfro-x)) 0,

      100% var(--showcase-chanfro-y),

      100% calc(100% - var(--showcase-chanfro-y)),

      calc(100% - var(--showcase-chanfro-x)) 100%,

      0 100%);
}


/* Caixa preta localizada no lado direito. */

.showcase-card--preto-direita::before {
  clip-path: polygon(var(--showcase-chanfro-x) 0,

      100% 0,

      100% 100%,

      var(--showcase-chanfro-x) 100%,

      0 calc(100% - var(--showcase-chanfro-y)),

      0 var(--showcase-chanfro-y));
}


/* ============================================================
   PONTAS DO MOSAICO DESKTOP
   ============================================================ */

.showcase-card__ponta {
  position: absolute;

  z-index: 4;

  width: var(--showcase-chanfro-x);
  height: var(--showcase-ponta);

  background: var(--showcase-preto);

  pointer-events: none;
}

.showcase-card--preto-esquerda .showcase-card__ponta {
  left: 0;
}

.showcase-card--preto-direita .showcase-card__ponta {
  right: 0;
}

.showcase-card__ponta--topo {
  top:
    calc(var(--showcase-ponta) * -1 + 1px);
}

.showcase-card__ponta--base {
  bottom:
    calc(var(--showcase-ponta) * -1 + 1px);
}

.showcase-card--preto-esquerda .showcase-card__ponta--topo {
  clip-path:
    polygon(0 0,
      0 100%,
      100% 100%);
}

.showcase-card--preto-esquerda .showcase-card__ponta--base {
  clip-path:
    polygon(0 0,
      100% 0,
      0 100%);
}

.showcase-card--preto-direita .showcase-card__ponta--topo {
  clip-path:
    polygon(100% 0,
      0 100%,
      100% 100%);
}

.showcase-card--preto-direita .showcase-card__ponta--base {
  clip-path:
    polygon(0 0,
      100% 0,
      100% 100%);
}


/* Impede pontas fora do início e final do mosaico. */

.showcase-card:nth-child(-n + 2) .showcase-card__ponta--topo,

.showcase-card:nth-last-child(-n + 2) .showcase-card__ponta--base {
  display: none;
}


/* ============================================================
   PRODUTO
   ============================================================ */

.showcase-produto {
  position: relative;

  z-index: 6;

  width: min(100%, 820px);

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(210px, .84fr) minmax(320px, 1.16fr);

  align-items: center;

  gap:
    clamp(16px, 2.2vw, 34px);
}

.showcase-produto--invertido {
  grid-template-columns:
    minmax(320px, 1.16fr) minmax(210px, .84fr);
}

.showcase-produto--invertido .showcase-produto__imagem {
  grid-column: 2;
  grid-row: 1;
}

.showcase-produto--invertido .showcase-produto__conteudo {
  grid-column: 1;
  grid-row: 1;
}


/* Área da imagem. */

.showcase-produto__imagem {
  position: relative;

  min-width: 0;

  min-height:
    clamp(205px, 20vw, 300px);

  display: grid;
  place-items: center;

  animation: none !important;

  transform: none;
}


/* Círculo amarelo. */

.showcase-produto__circulo {
  position: absolute;

  width: min(19vw, 270px);
  max-width: 92%;

  aspect-ratio: 1;

  border-radius: 50%;

  background: var(--showcase-amarelo);

  box-shadow:
    0 0 0 clamp(12px, 1.3vw, 18px) rgba(255, 213, 0, .09),

    0 28px 62px rgba(0, 0, 0, .24);

  transform: rotate(-7deg);

  transition:
    transform .38s ease;
}


/* Imagem do produto. */

.showcase-produto__imagem img {
  position: relative;

  z-index: 2;

  display: block;

  width: min(100%, 320px);
  max-width: 100%;
  max-height: clamp(220px, 21vw, 285px);

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(0 22px 18px rgba(0, 0, 0, .31));

  transform:
    rotate(-4deg);

  transition:
    transform .38s ease,
    filter .38s ease;
}

.showcase-produto--invertido .showcase-produto__imagem img {
  transform:
    rotate(4deg);
}


/* Conteúdo do produto. */

.showcase-produto__conteudo {
  width: 100%;
  max-width: 470px;
  min-width: 0;
}


/* Categoria. */

.showcase-produto__categoria {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color:
    var(--showcase-amarelo);
  font-size:
    clamp(.66rem, .72vw, .8rem);
  font-weight: 900;
  letter-spacing: .15em;
}

.showcase-produto--escuro .showcase-produto__categoria {
  color: var(--showcase-amarelo);
}

.showcase-produto__categoria::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--showcase-amarelo);
}


/* Título. */

.showcase-produto h2 {
  margin: 0;
  font-size:
    clamp(1.8rem, 2.35vw, 3rem);
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: .9;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}


/* Preço. */

.showcase-produto__preco {
  margin:
    12px 0 15px;

  color: inherit;

  font-size:
    clamp(1.18rem, 1.6vw, 1.62rem);

  font-weight: 900;
}

.showcase-produto--escuro .showcase-produto__preco {
  color: #f2f2f2;
}


/* Botão. */

.showcase-produto__botao {
  min-height: 50px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  max-width: 100%;

  padding:
    13px 21px;

  border:
    2px solid var(--showcase-amarelo);

  border-radius: 999px;

  background:
    var(--showcase-amarelo);

  color: #050505;

  font-size:
    clamp(.84rem, .95vw, .98rem);

  font-weight: 900;

  line-height: 1.15;

  cursor: pointer;

  touch-action: manipulation;

  box-shadow:
    0 11px 25px rgba(255, 213, 0, .21);

  transition:
    transform .22s ease,
    background-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.showcase-produto__botao-icone {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 1em;

  position: relative;
  top: -.08em;

  font-size: 1.18rem;

  line-height: 1;

  transition:
    transform .22s ease;
}

.showcase-produto__botao:focus-visible {
  outline:
    3px solid currentColor;

  outline-offset: 4px;
}

.showcase-produto__botao:active {
  transform:
    translateY(1px) scale(.985);
}


/* ============================================================
   INTERAÇÕES
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

  .showcase-produto:hover .showcase-produto__imagem img {
    transform:
      rotate(-1deg) translateY(-10px) scale(1.04);

    filter:
      drop-shadow(0 27px 22px rgba(0, 0, 0, .36));
  }

  .showcase-produto--invertido:hover .showcase-produto__imagem img {
    transform:
      rotate(1deg) translateY(-10px) scale(1.04);
  }

  .showcase-produto:hover .showcase-produto__circulo {
    transform:
      rotate(1deg) scale(1.025);
  }

  .showcase-produto__botao:hover {
    transform:
      translateY(-3px);

    background: transparent;

    color:
      var(--showcase-amarelo);

    box-shadow:
      0 16px 32px rgba(255, 213, 0, .19);
  }

  .showcase-card--claro .showcase-produto__botao:hover {
    color: #111;
  }

  .showcase-produto__botao:hover .showcase-produto__botao-icone {
    transform:
      translateX(5px);
  }
}


/* ============================================================
   ANIMAÇÃO DE ENTRADA NO SCROLL
   ============================================================ */

.showcase-destaques.reveal-ativado .showcase-card .showcase-produto {
  opacity: 0;

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.22, 1, .36, 1);

  will-change:
    opacity,
    transform;
}

.showcase-destaques.reveal-ativado .showcase-card:nth-child(odd) .showcase-produto {
  transform:
    translate3d(-48px, 0, 0);
}

.showcase-destaques.reveal-ativado .showcase-card:nth-child(even) .showcase-produto {
  transform:
    translate3d(48px, 0, 0);

  transition-delay: 80ms;
}

.showcase-destaques.reveal-ativado .showcase-card.is-visible .showcase-produto {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


/* ============================================================
   NOTEBOOKS E TABLETS GRANDES
   ============================================================ */

@media (max-width: 1180px) {

  :root {
    --showcase-altura-linha:
      clamp(350px, 39vw, 470px);
  }

  .showcase-card {
    padding:
      clamp(28px, 3.5vw, 48px);
  }

  .showcase-produto,
  .showcase-produto--invertido {
    grid-template-columns:
      minmax(145px, .84fr) minmax(0, 1.16fr);

    gap:
      clamp(18px, 2.4vw, 32px);
  }

  .showcase-produto__circulo {
    width:
      min(21vw, 240px);
  }

  .showcase-produto h2 {
    font-size:
      clamp(1.75rem, 3.25vw, 3rem);
  }
}


/* ============================================================
   TABLETS — UMA COLUNA
   ============================================================ */

@media (max-width: 820px) {

  :root {
    --showcase-gap-linhas: 12px;

    --showcase-chanfro-x:
      clamp(22px, 7vw, 34px);

    --showcase-chanfro-y:
      clamp(24px, 8vw, 40px);
  }

  .showcase-mosaico {
    grid-template-columns:
      minmax(0, 1fr);

    grid-auto-rows: auto;
  }

  .showcase-card {
    min-height: 430px;

    padding:
      clamp(34px, 7vw, 52px) clamp(22px, 6vw, 42px);
  }

  .showcase-card--preto-esquerda::before,
  .showcase-card--preto-direita::before {
    clip-path: polygon(var(--showcase-chanfro-x) 0,

        calc(100% - var(--showcase-chanfro-x)) 0,

        100% var(--showcase-chanfro-y),

        100% calc(100% - var(--showcase-chanfro-y)),

        calc(100% - var(--showcase-chanfro-x)) 100%,

        var(--showcase-chanfro-x) 100%,

        0 calc(100% - var(--showcase-chanfro-y)),

        0 var(--showcase-chanfro-y));
  }

  .showcase-card--preto-esquerda .showcase-card__ponta,

  .showcase-card--preto-direita .showcase-card__ponta {
    left: 0;
    right: auto;
  }

  .showcase-card--preto-esquerda .showcase-card__ponta--topo,

  .showcase-card--preto-direita .showcase-card__ponta--topo {
    clip-path:
      polygon(0 0,
        0 100%,
        100% 100%);
  }

  .showcase-card--preto-esquerda .showcase-card__ponta--base,

  .showcase-card--preto-direita .showcase-card__ponta--base {
    clip-path:
      polygon(0 0,
        100% 0,
        0 100%);
  }

  .showcase-produto,
  .showcase-produto--invertido {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 14px;

    text-align: center;
  }

  .showcase-produto__imagem,
  .showcase-produto--invertido .showcase-produto__imagem {
    grid-column: 1;
    grid-row: 1;

    min-height: 230px;
  }

  .showcase-produto__conteudo,
  .showcase-produto--invertido .showcase-produto__conteudo {
    grid-column: 1;
    grid-row: 2;

    width: min(100%, 560px);
    max-width: 560px;

    margin-inline: auto;
  }

  .showcase-produto__circulo {
    width:
      min(55vw, 275px);
  }

  .showcase-produto__imagem img {
    width:
      min(80%, 310px);

    max-height: 250px;
  }

  .showcase-produto__categoria {
    justify-content: center;
  }

  .showcase-produto h2 {
    font-size:
      clamp(1.8rem, 7.5vw, 2.7rem);

    line-height: .92;
  }

  .showcase-produto__preco {
    margin:
      11px 0 15px;
  }

  .showcase-destaques.reveal-ativado .showcase-card:nth-child(odd) .showcase-produto,

  .showcase-destaques.reveal-ativado .showcase-card:nth-child(even) .showcase-produto {
    transform:
      translate3d(0, 34px, 0);

    transition-delay: 0ms;
  }

  .showcase-destaques.reveal-ativado .showcase-card.is-visible .showcase-produto {
    transform:
      translate3d(0, 0, 0);
  }
}


/* ============================================================
   CELULARES ATÉ 560PX — FAIXAS COM TRIÂNGULOS
   ============================================================ */

@media (max-width: 560px) {

  .showcase-destaques {
    padding-top: 38px;
  }

  .showcase-cabecalho {
    margin-bottom: 28px;
  }


  /*
    As faixas ficam encostadas.

    Não existe espaço entre o final de uma faixa e o começo da
    próxima. Os triângulos invadem diretamente o card vizinho.
  */

  .showcase-mosaico {
    grid-template-columns:
      minmax(0, 1fr);

    grid-auto-rows: auto;

    row-gap: 0;

    overflow: hidden;

    background:
      var(--showcase-branco);
  }

  .showcase-card,
  .showcase-card--claro,
  .showcase-card--preto {
    min-height: 250px;

    padding:
      26px 16px;

    overflow: visible;
  }


  /* Desativa as pontas usadas no desktop. */

  .showcase-card__ponta {
    display: none !important;
  }


  /*
    A faixa e seus triângulos usam a mesma variável de cor.

    Isso evita qualquer diferença de tonalidade entre o fundo
    do card e a base do triângulo.
  */

  .showcase-card:nth-child(odd) {
    --showcase-cor-faixa:
      var(--showcase-branco);

    z-index: auto;

    color:
      var(--showcase-texto);

    background:
      var(--showcase-cor-faixa) !important;
  }

  .showcase-card:nth-child(even) {
    --showcase-cor-faixa:
      var(--showcase-preto);

    z-index: auto;

    color:
      var(--showcase-branco);

    background:
      var(--showcase-cor-faixa) !important;
  }


  /*
    TRIÂNGULOS

    A altura total é 22px.
    Apenas 18px ficam fora do card.
    Os outros 4px permanecem sobrepostos ao fundo da própria faixa.

    Essa sobreposição remove o pequeno rastro ou fresta que aparecia
    entre o triângulo e o card.
  */

  .showcase-card::before,
  .showcase-card::after,
  .showcase-card--preto::before,
  .showcase-card--preto::after {
    content: "";

    position: absolute;

    inset: auto;

    z-index: 30;

    display: block;

    width: 58px;
    height: 22px;

    background:
      var(--showcase-cor-faixa) !important;

    pointer-events: none;

    /*
      Não usar translateZ nesta parte.
      Ele pode criar uma linha de renderização entre as peças.
    */

    transform: none;

    backface-visibility: visible;
  }


  /* Triângulo que invade a faixa anterior. */

  .showcase-card::before,
  .showcase-card--preto::before {
    top: -18px;

    clip-path: polygon(50% 0,
        102% 100%,
        -2% 100%);
  }


  /* Triângulo que invade a faixa seguinte. */

  .showcase-card::after,
  .showcase-card--preto::after {
    bottom: -18px;

    clip-path: polygon(-2% 0,
        102% 0,
        50% 100%);
  }


  /* Pontas das faixas brancas no lado direito. */

  .showcase-card:nth-child(odd)::before,
  .showcase-card:nth-child(odd)::after {
    right: 18px;
    left: auto;
  }


  /* Pontas das faixas pretas no lado esquerdo. */

  .showcase-card:nth-child(even)::before,
  .showcase-card:nth-child(even)::after {
    left: 18px;
    right: auto;
  }


  /* Remove triângulos fora do mosaico. */

  .showcase-card:first-child::before,
  .showcase-card:last-child::after {
    display: none;
  }


  /* ========================================================
     PRODUTOS HORIZONTAIS NO MOBILE
     ======================================================== */

  .showcase-produto,
  .showcase-produto:not(.showcase-produto--invertido),
  .showcase-produto--invertido {
    width: 100%;
    max-width: none;

    gap: 12px;

    align-items: center;

    text-align: left;
  }


  /* Card branco: imagem na esquerda. */

  .showcase-card:nth-child(odd) .showcase-produto {
    grid-template-columns:
      minmax(105px, .85fr) minmax(0, 1.15fr);
  }


  /* Card preto: texto na esquerda. */

  .showcase-card:nth-child(even) .showcase-produto {
    grid-template-columns:
      minmax(0, 1.15fr) minmax(105px, .85fr);
  }


  .showcase-card:nth-child(odd) .showcase-produto__imagem {
    grid-column: 1;
    grid-row: 1;
  }

  .showcase-card:nth-child(odd) .showcase-produto__conteudo {
    grid-column: 2;
    grid-row: 1;
  }

  .showcase-card:nth-child(even) .showcase-produto__conteudo {
    grid-column: 1;
    grid-row: 1;
  }

  .showcase-card:nth-child(even) .showcase-produto__imagem {
    grid-column: 2;
    grid-row: 1;
  }


  /* Imagem mobile. */

  .showcase-produto__imagem,
  .showcase-produto--invertido .showcase-produto__imagem {
    width: 100%;

    min-height: 150px;
  }

  .showcase-produto__circulo {
    width:
      min(31vw, 128px);

    max-width: none;
  }

  .showcase-produto__imagem img {
    width:
      min(40vw, 158px);

    max-width: 100%;
    max-height: 142px;

    transform:
      rotate(-3deg);
  }

  .showcase-card:nth-child(even) .showcase-produto__imagem img,

  .showcase-card:nth-child(even) .showcase-produto--invertido .showcase-produto__imagem img {
    transform:
      rotate(3deg);
  }


  /* Conteúdo mobile. */

  .showcase-produto__conteudo,
  .showcase-produto--invertido .showcase-produto__conteudo {
    width: 100%;
    max-width: none;
    min-width: 0;

    margin: 0;
  }

  .showcase-produto__categoria {
    justify-content: flex-start;

    gap: 6px;

    margin-bottom: 6px;

    font-size:
      clamp(.54rem, 2.5vw, .68rem);

    letter-spacing: .11em;
  }

  .showcase-produto__categoria::before {
    width: 20px;
    height: 2px;
  }

  .showcase-card:nth-child(odd) .showcase-produto__categoria {
    color:
      var(--showcase-amarelo);
  }

  .showcase-card:nth-child(even) .showcase-produto__categoria {
    color:
      var(--showcase-amarelo);
  }

  .showcase-produto h2 {
    margin: 0;

    font-size:
      clamp(1.14rem, 5.4vw, 1.52rem);

    line-height: .96;

    letter-spacing: -.035em;

    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;

    text-wrap: balance;
  }

  .showcase-card:nth-child(odd) .showcase-produto h2,

  .showcase-card:nth-child(odd) .showcase-produto__preco {
    color:
      var(--showcase-texto);
  }

  .showcase-card:nth-child(even) .showcase-produto h2,

  .showcase-card:nth-child(even) .showcase-produto__preco {
    color:
      var(--showcase-branco);
  }

  .showcase-produto__preco {
    margin:
      10px 0 12px;

    font-size:
      clamp(.98rem, 4.2vw, 1.22rem);
  }

  .showcase-produto__botao {
    width: 100%;

    min-height: 42px;

    gap: 7px;

    padding:
      10px 11px;

    font-size:
      clamp(.66rem, 2.8vw, .78rem);

    white-space: nowrap;
  }

  .showcase-produto__botao span {
    font-size: 1rem;
  }


  /* Entrada vertical no mobile. */

  .showcase-destaques.reveal-ativado .showcase-card:nth-child(odd) .showcase-produto,

  .showcase-destaques.reveal-ativado .showcase-card:nth-child(even) .showcase-produto {
    transform:
      translate3d(0, 30px, 0);

    transition-delay: 0ms;
  }

  .showcase-destaques.reveal-ativado .showcase-card.is-visible .showcase-produto {
    transform:
      translate3d(0, 0, 0);
  }
}


/* ============================================================
   CELULARES MUITO PEQUENOS
   ============================================================ */

@media (max-width: 360px) {

  .showcase-card,
  .showcase-card--claro,
  .showcase-card--preto {
    min-height: 238px;

    padding-inline: 12px;
  }

  .showcase-card:nth-child(odd) .showcase-produto {
    grid-template-columns:
      minmax(96px, .8fr) minmax(0, 1.2fr);
  }

  .showcase-card:nth-child(even) .showcase-produto {
    grid-template-columns:
      minmax(0, 1.2fr) minmax(96px, .8fr);
  }

  .showcase-produto__imagem,
  .showcase-produto--invertido .showcase-produto__imagem {
    min-height: 138px;
  }

  .showcase-produto__circulo {
    width:
      min(32vw, 112px);
  }

  .showcase-produto__imagem img {
    width:
      min(41vw, 142px);

    max-height: 128px;
  }

  .showcase-produto h2 {
    font-size:
      clamp(1.04rem, 5.35vw, 1.28rem);
  }

  .showcase-produto__botao {
    padding-inline: 8px;

    font-size: .64rem;
  }
}


/* ============================================================
   ACESSIBILIDADE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .showcase-destaques *,
  .showcase-destaques *::before,
  .showcase-destaques *::after {
    animation: none !important;

    transition-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;
  }

  .showcase-destaques.reveal-ativado .showcase-card .showcase-produto {
    opacity: 1 !important;

    transform: none !important;
  }
}

/* Mais espaço entre o preço e o botão */
.showcase-produto__preco {
  margin-bottom: 32px;
}

@media (max-width: 560px) {
  .showcase-produto__preco {
    margin-bottom: 16px;
  }
}

/* ============================================================
   CARD FINAL — TEXTO MAIS ELEGANTE E VISUAL
   ============================================================ */

.showcase-card--mensagem {
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-mensagem {
  position: relative;

  width: min(100%, 520px);

  padding:
    clamp(32px, 4vw, 58px);

  text-align: left;
}

.showcase-mensagem::before {
  content: "";

  display: block;

  width: 58px;
  height: 5px;

  margin-bottom: 20px;

  border-radius: 999px;

  background: var(--showcase-amarelo);
}

.showcase-mensagem__tag {
  display: block;

  margin-bottom: 13px;

  color: var(--showcase-amarelo);

  font-size:
    clamp(.63rem, .8vw, .78rem);

  font-weight: 900;

  line-height: 1.3;

  letter-spacing: .17em;

  text-transform: uppercase;
}

.showcase-mensagem h2 {
  margin: 0;

  max-width: 470px;

  color: inherit;

  font-size:
    clamp(2rem, 3.4vw, 4rem);

  font-weight: 950;

  line-height: .92;

  letter-spacing: -.055em;

  text-transform: uppercase;

  text-wrap: balance;
}

.showcase-mensagem h2 strong {
  display: block;

  color: var(--showcase-amarelo);

  font-weight: inherit;
}

.showcase-mensagem p {
  max-width: 440px;

  margin:
    20px 0 0;

  color: inherit;

  font-size:
    clamp(.94rem, 1.15vw, 1.08rem);

  line-height: 1.65;

  opacity: .78;
}

.showcase-mensagem__detalhe {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-top: 27px;

  color: inherit;

  font-size: .67rem;

  font-weight: 900;

  letter-spacing: .18em;

  opacity: .45;
}

.showcase-mensagem__detalhe::before {
  content: "";

  width: 24px;
  height: 2px;

  background: currentColor;
}


/* Card de mensagem em fundo branco. */

.showcase-card--claro.showcase-card--mensagem .showcase-mensagem__tag {
  color: var(--showcase-amarelo-escuro);
}

.showcase-card--claro.showcase-card--mensagem .showcase-mensagem h2 strong {
  color: var(--showcase-amarelo-escuro);
}


/* Card de mensagem em fundo preto. */

.showcase-card--preto.showcase-card--mensagem .showcase-mensagem {
  color: var(--showcase-branco);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 560px) {

  .showcase-card--mensagem {
    min-height: 250px;
  }

  .showcase-mensagem {
    width: 100%;

    padding:
      28px 22px;
  }

  .showcase-mensagem::before {
    width: 44px;
    height: 4px;

    margin-bottom: 16px;
  }

  .showcase-mensagem__tag {
    margin-bottom: 10px;

    font-size:
      clamp(.56rem, 2.4vw, .66rem);

    letter-spacing: .13em;
  }

  .showcase-mensagem h2 {
    max-width: 340px;

    font-size:
      clamp(1.55rem, 7.6vw, 2.25rem);

    line-height: .94;
  }

  .showcase-mensagem p {
    max-width: 360px;

    margin-top: 14px;

    font-size:
      clamp(.82rem, 3.4vw, .94rem);

    line-height: 1.55;
  }

  .showcase-mensagem__detalhe {
    margin-top: 19px;

    font-size: .58rem;
  }
}

/* ============================================================
   ANIMAÇÃO DE ENTRADA DO CARD DE MENSAGEM
   ============================================================ */

/*
  A mensagem só fica oculta quando o JavaScript adiciona
  a classe reveal-ativado. Assim, ela continua visível caso
  o JavaScript não carregue.
*/
.showcase-destaques.reveal-ativado .showcase-card .showcase-mensagem {
  opacity: 0;

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.22, 1, .36, 1);

  will-change:
    opacity,
    transform;
}


/* Entrada pela esquerda quando estiver em posição ímpar. */

.showcase-destaques.reveal-ativado .showcase-card:nth-child(odd) .showcase-mensagem {
  transform: translate3d(-48px, 0, 0);
}


/* Entrada pela direita quando estiver em posição par. */

.showcase-destaques.reveal-ativado .showcase-card:nth-child(even) .showcase-mensagem {
  transform: translate3d(48px, 0, 0);

  transition-delay: 80ms;
}


/* Estado final quando o card entra na tela. */

.showcase-destaques.reveal-ativado .showcase-card.is-visible .showcase-mensagem {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}


/* ============================================================
   MOBILE — ENTRADA DE BAIXO
   ============================================================ */

@media (max-width: 820px) {

  .showcase-destaques.reveal-ativado .showcase-card:nth-child(odd) .showcase-mensagem,

  .showcase-destaques.reveal-ativado .showcase-card:nth-child(even) .showcase-mensagem {
    transform: translate3d(0, 34px, 0);

    transition-delay: 0ms;
  }

  .showcase-destaques.reveal-ativado .showcase-card.is-visible .showcase-mensagem {
    transform: translate3d(0, 0, 0);
  }
}


/* ============================================================
   ACESSIBILIDADE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .showcase-destaques.reveal-ativado .showcase-card .showcase-mensagem {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }
}

/* ============================================================
   AJUSTE RESPONSIVO FINAL — DESTAQUES HOME
   Corrige texto sendo comido, cards quebrando em tablets
   e espaçamento em celulares.
   ============================================================ */

/* A margem negativa funciona no desktop grande, mas quebra em telas menores */
@media (max-width: 1180px) {

  .showcase-destaques {
    margin-top: 0 !important;

    padding-top: clamp(62px, 8vw, 92px);
  }

  .showcase-cabecalho {
    margin-bottom: clamp(36px, 5vw, 58px);
  }
}


/* Tablets e celulares deitados: força mosaico em uma coluna
   para não esmagar os cards dos produtos */
@media (min-width: 701px) and (max-width: 1024px) {

  :root {
    --showcase-gap-linhas: 14px;

    --showcase-chanfro-x: clamp(24px, 5vw, 42px);
    --showcase-chanfro-y: clamp(26px, 5vw, 44px);
  }

  .showcase-mosaico {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;

    row-gap: var(--showcase-gap-linhas);
  }

  .showcase-card {
    min-height: clamp(380px, 45vw, 490px);

    padding:
      clamp(38px, 5vw, 62px) clamp(34px, 6vw, 58px);

    overflow: visible;
  }

  .showcase-card__ponta {
    display: none !important;
  }

  .showcase-card--preto-esquerda::before,
  .showcase-card--preto-direita::before {
    clip-path: polygon(var(--showcase-chanfro-x) 0,
        calc(100% - var(--showcase-chanfro-x)) 0,
        100% var(--showcase-chanfro-y),
        100% calc(100% - var(--showcase-chanfro-y)),
        calc(100% - var(--showcase-chanfro-x)) 100%,
        var(--showcase-chanfro-x) 100%,
        0 calc(100% - var(--showcase-chanfro-y)),
        0 var(--showcase-chanfro-y));
  }

  .showcase-produto,
  .showcase-produto--invertido {
    grid-template-columns:
      minmax(220px, .92fr) minmax(0, 1.08fr);

    gap: clamp(28px, 5vw, 54px);

    align-items: center;

    text-align: left;
  }

  .showcase-produto__imagem,
  .showcase-produto--invertido .showcase-produto__imagem {
    grid-column: 1;
    grid-row: 1;

    min-height: clamp(235px, 28vw, 315px);
  }

  .showcase-produto__conteudo,
  .showcase-produto--invertido .showcase-produto__conteudo {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    max-width: 540px;

    margin: 0;
  }

  .showcase-produto--invertido .showcase-produto__imagem {
    grid-column: 2;
  }

  .showcase-produto--invertido .showcase-produto__conteudo {
    grid-column: 1;
  }

  .showcase-produto__categoria {
    justify-content: flex-start;
  }

  .showcase-produto__circulo {
    width: min(30vw, 285px);
  }

  .showcase-produto__imagem img {
    width: min(100%, 335px);
    max-height: 270px;
  }

  .showcase-produto h2 {
    font-size: clamp(2rem, 4.5vw, 3.35rem);
    line-height: .92;
  }

  .showcase-produto__preco {
    margin-bottom: 26px;
  }
}


/* Faixa intermediária: celulares grandes em pé */
@media (min-width: 561px) and (max-width: 700px) {

  .showcase-destaques {
    margin-top: 0 !important;
    padding-top: 66px;
  }

  .showcase-card {
    min-height: auto;

    padding-top: 58px;
    padding-bottom: 58px;
  }

  .showcase-produto,
  .showcase-produto--invertido {
    gap: 26px;
  }

  .showcase-produto__imagem,
  .showcase-produto--invertido .showcase-produto__imagem {
    min-height: 270px;
  }

  .showcase-produto__circulo {
    width: min(58vw, 285px);
  }

  .showcase-produto__imagem img {
    max-height: 255px;
  }

  .showcase-produto__preco {
    margin-bottom: 24px;
  }
}


/* Celulares: aumenta respiro do cabeçalho e dos cards */
@media (max-width: 560px) {

  .showcase-destaques {
    margin-top: 0 !important;

    padding-top: 70px;
    padding-bottom: 76px;
  }

  .showcase-cabecalho {
    width: min(100% - 36px, 780px);

    margin-bottom: 38px;
  }

  .showcase-cabecalho__tag {
    margin-bottom: 14px;
  }

  .showcase-cabecalho h2 {
    font-size: clamp(2.35rem, 11vw, 3.35rem);
    line-height: .94;
  }

  .showcase-cabecalho p {
    margin-top: 18px;

    font-size: .98rem;
    line-height: 1.6;
  }

  .showcase-card,
  .showcase-card--claro,
  .showcase-card--preto {
    min-height: 285px;

    padding:
      34px 18px;
  }

  .showcase-produto,
  .showcase-produto:not(.showcase-produto--invertido),
  .showcase-produto--invertido {
    gap: 16px;
  }

  .showcase-card:nth-child(odd) .showcase-produto {
    grid-template-columns:
      minmax(112px, .88fr) minmax(0, 1.12fr);
  }

  .showcase-card:nth-child(even) .showcase-produto {
    grid-template-columns:
      minmax(0, 1.12fr) minmax(112px, .88fr);
  }

  .showcase-produto__imagem,
  .showcase-produto--invertido .showcase-produto__imagem {
    min-height: 172px;
  }

  .showcase-produto__circulo {
    width: min(34vw, 145px);
  }

  .showcase-produto__imagem img {
    width: min(42vw, 172px);
    max-height: 152px;
  }

  .showcase-produto h2 {
    font-size: clamp(1.08rem, 5vw, 1.44rem);
    line-height: 1;
  }

  .showcase-produto__preco {
    margin-top: 9px;
    margin-bottom: 16px;
  }

  .showcase-produto__botao {
    min-height: 44px;

    padding:
      10px 10px;

    font-size: clamp(.64rem, 2.65vw, .76rem);
  }
}


@media (max-width: 390px) {

  .showcase-destaques {
    padding-top: 64px;
  }

  .showcase-card,
  .showcase-card--claro,
  .showcase-card--preto {
    min-height: 270px;

    padding:
      32px 14px;
  }

  .showcase-card:nth-child(odd) .showcase-produto {
    grid-template-columns:
      minmax(100px, .84fr) minmax(0, 1.16fr);
  }

  .showcase-card:nth-child(even) .showcase-produto {
    grid-template-columns:
      minmax(0, 1.16fr) minmax(100px, .84fr);
  }

  .showcase-produto__imagem,
  .showcase-produto--invertido .showcase-produto__imagem {
    min-height: 155px;
  }

  .showcase-produto__circulo {
    width: min(33vw, 124px);
  }

  .showcase-produto__imagem img {
    width: min(41vw, 148px);
    max-height: 135px;
  }

  .showcase-produto h2 {
    font-size: clamp(1rem, 4.85vw, 1.25rem);
  }

  .showcase-produto__botao {
    min-height: 42px;

    padding-inline: 8px;

    font-size: .63rem;
  }
}

/* ============================================================
   REAJUSTE FINO — CABEÇALHO DOS DESTAQUES NO MOBILE
   Aproxima o texto dos Destaques da categoria anterior,
   sem deixar ser engolido pelo círculo/visual acima.
   ============================================================ */

@media (max-width: 560px) {

  .showcase-destaques {
    padding-top: 24px !important;
  }

  .showcase-cabecalho {
    margin-bottom: 34px;
  }

  .showcase-cabecalho__tag {
    margin-bottom: 10px;
  }

  .showcase-cabecalho p {
    margin-top: 14px;
  }
}


@media (max-width: 390px) {

  .showcase-destaques {
    padding-top: 30px !important;
  }

  .showcase-cabecalho {
    margin-bottom: 30px;
  }
}

/* ============================================================
   AJUSTE FINAL — REMOVE ESPAÇO ENTRE DESTAQUES E RODAPÉ
   ============================================================ */

.showcase-destaques {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.showcase-mosaico {
  margin-bottom: 0 !important;
}

/* Como o #central vem do css.css com min-height,
   aqui garantimos que na Home ele não crie sobra visual. */
#central:has(.showcase-destaques) {
  min-height: auto;
  padding-bottom: 0 !important;
}

/* ============================================================
   AJUSTE FINAL — REMOVE ESPAÇO ENTRE DESTAQUES E RODAPÉ
   Versão direta
   ============================================================ */

.showcase-destaques {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.showcase-mosaico {
  margin-bottom: 0 !important;
}

#central {
  padding-bottom: 0 !important;
}

/* ============================================================
   CARRINHO DOS DESTAQUES
   ============================================================ */

.showcase-produto__botao:disabled {
  cursor: wait;
  opacity: .82;
  transform: none;
}

.showcase-produto__botao.is-loading .showcase-produto__botao-icone {
  width: 18px;
  height: 18px;
  top: 0;
  border: 2px solid rgba(5, 5, 5, .28);
  border-top-color: #050505;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
  animation: showcase-carrinho-girar 700ms linear infinite;
}

.showcase-produto__indisponivel {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 21px;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: #6f6f6f;
  font-size: clamp(.84rem, .95vw, .98rem);
  font-weight: 900;
  line-height: 1.15;
  opacity: .78;
}

.showcase-produto--escuro .showcase-produto__indisponivel {
  color: #d4d4d4;
}

@keyframes showcase-carrinho-girar {
  to {
    transform: rotate(360deg);
  }
}

body.showcase-carrinho-aberto {
  overflow: hidden;
}

.showcase-carrinho-alerta[hidden],
.showcase-carrinho-alerta__acoes[hidden],
.showcase-carrinho-alerta__botao[hidden] {
  display: none !important;
}

.showcase-carrinho-alerta {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.showcase-carrinho-alerta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.showcase-carrinho-alerta__fundo {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, .62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.showcase-carrinho-alerta__card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 42px 38px 34px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 24px;
  background: #fff;
  color: #111;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity 240ms ease, transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.showcase-carrinho-alerta__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: var(--showcase-amarelo);
}

.showcase-carrinho-alerta.is-visible .showcase-carrinho-alerta__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.showcase-carrinho-alerta__icone {
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff3bd;
  color: #806b00;
  font-size: 31px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 213, 0, .24);
}

.showcase-carrinho-alerta__icone::before {
  content: "!";
}

.showcase-carrinho-alerta[data-estado="success"] .showcase-carrinho-alerta__icone::before {
  content: "✓";
}

.showcase-carrinho-alerta[data-estado="pending"] .showcase-carrinho-alerta__icone::before {
  content: "";
  width: 30px;
  height: 30px;
  border: 4px solid rgba(128, 107, 0, .22);
  border-top-color: #806b00;
  border-radius: 50%;
  animation: showcase-carrinho-girar 700ms linear infinite;
}

.showcase-carrinho-alerta__card h2 {
  margin: 0 0 11px;
  color: #111;
  font-size: clamp(1.45rem, 4vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -.025em;
}

.showcase-carrinho-alerta__card p {
  margin: 0 0 25px;
  color: #60646b;
  font-size: 1rem;
  line-height: 1.55;
}

.showcase-carrinho-alerta__acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
}

.showcase-carrinho-alerta__botao {
  min-width: 145px;
  min-height: 50px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.showcase-carrinho-alerta__botao--principal {
  border-color: var(--showcase-amarelo);
  background: var(--showcase-amarelo);
  color: #050505;
}

.showcase-carrinho-alerta__botao--secundario {
  border-color: #d8d8d8;
  background: #f0f0f0;
  color: #222;
}

.showcase-carrinho-alerta__botao:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .showcase-carrinho-alerta__botao:hover {
    transform: translateY(-2px);
  }

  .showcase-carrinho-alerta__botao--principal:hover {
    border-color: #111;
    background: #111;
    color: #fff;
  }

  .showcase-carrinho-alerta__botao--secundario:hover {
    background: #e3e3e3;
  }
}

@media (max-width: 560px) {
  .showcase-carrinho-alerta {
    padding: 14px;
  }

  .showcase-carrinho-alerta__card {
    padding: 36px 22px 27px;
    border-radius: 20px;
  }

  .showcase-carrinho-alerta__icone {
    width: 58px;
    height: 58px;
    margin-bottom: 17px;
    font-size: 27px;
  }

  .showcase-carrinho-alerta__botao {
    width: min(100%, 230px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .showcase-produto__botao.is-loading .showcase-produto__botao-icone,
  .showcase-carrinho-alerta[data-estado="pending"] .showcase-carrinho-alerta__icone::before {
    animation-duration: 1.4s;
  }

  .showcase-carrinho-alerta,
  .showcase-carrinho-alerta__card,
  .showcase-carrinho-alerta__botao {
    transition-duration: .01ms;
  }
}

/* =========================================================
   FONTES DOS PRODUTOS EM DESTAQUE
   Padronização com a página de produtos
   ========================================================= */

/* Preço do produto — Poppins */
.showcase-produto__preco {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 900;
}