/* ============================================================
   CATEGORIAS DA HOME — IDEAL BIKE SHOP

   - Ocupa toda a largura da página
   - Faixas pretas e brancas conectadas
   - Triângulo superior esquerdo
   - Triângulo inferior direito
   - Responsivo para desktop, tablet e celular
   ============================================================ */

:root {
  --ideal-amarelo: #ffd500;
  --ideal-amarelo-escuro: #7d6800;
  --ideal-preto: #080808;
  --ideal-branco: #ffffff;
  --ideal-cinza: #e7e7e7;
  --ideal-texto: #171717;

  --categoria-triangulo-largura: clamp(30px, 3.2vw, 48px);
  --categoria-triangulo-altura: clamp(58px, 5.4vw, 82px);
}


/* ============================================================
   CONFIGURAÇÕES GERAIS
   ============================================================ */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.home-categorias,
.home-categorias *,
.home-categorias *::before,
.home-categorias *::after {
  box-sizing: border-box;
}


/* ============================================================
   ÁREA PRINCIPAL DAS CATEGORIAS
   ============================================================ */

.home-categorias {
  display: block;

  width: 100%;
  max-width: none;

  margin: 0;

  padding-top: clamp(48px, 6vw, 78px);
  padding-right: 0;
  padding-bottom: clamp(60px, 8vw, 100px);
  padding-left: 0;
  margin-top: -50px;
}


/* ============================================================
   CABEÇALHO DA SEÇÃO
   ============================================================ */

.home-categorias__cabecalho {
  width: min(100%, 780px);

  margin-top: 0;
  margin-right: auto;
  margin-bottom: clamp(30px, 4vw, 48px);
  margin-left: auto;

  padding-right: clamp(18px, 4vw, 48px);
  padding-left: clamp(18px, 4vw, 48px);

  text-align: center;
}

.home-categorias__eyebrow {
  display: inline-block;

  margin-bottom: clamp(10px, 1.2vw, 14px);

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

  font-size: clamp(.72rem, .75vw, .86rem);
  font-weight: 900;

  letter-spacing: clamp(.12em, .4vw, .18em);
}

.home-categorias__cabecalho h2 {
  margin: 0;

  color: #0a0a0a;

  font-size: clamp(2.15rem, 5vw, 4.8rem);
  font-weight: 950;

  letter-spacing: clamp(-.055em, -.8vw, -.025em);
  line-height: .96;

  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.home-categorias__cabecalho p {
  width: min(100%, 620px);

  margin-top: clamp(14px, 2vw, 22px);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  color: #555;

  font-size: clamp(.98rem, 1.35vw, 1.18rem);
  line-height: 1.65;
}


/* ============================================================
   PAINEL DAS CATEGORIAS
   ============================================================ */

.categorias-painel {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: hidden;

  background: var(--ideal-preto);

  box-shadow:
    0 18px 46px rgba(0, 0, 0, .15);

  isolation: isolate;
}


/* ============================================================
   ESTRUTURA DAS FAIXAS
   ============================================================ */

.categoria-faixa {
  --categoria-cor: var(--ideal-preto);

  position: relative;

  width: 100%;
  min-width: 0;
  min-height: clamp(360px, 31vw, 460px);

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr) minmax(280px, .92fr);

  align-items: center;

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

  margin: 0;

  padding-top: clamp(44px, 6vw, 88px);
  padding-right: clamp(38px, 6vw, 88px);
  padding-bottom: clamp(44px, 6vw, 88px);
  padding-left: clamp(38px, 6vw, 88px);

  overflow: visible;
}

.categoria-faixa>* {
  position: relative;
  z-index: 4;

  min-width: 0;
}


/* ============================================================
   TRIÂNGULOS
   ============================================================ */

.categoria-faixa::before,
.categoria-faixa::after {
  content: "";

  position: absolute;

  width: var(--categoria-triangulo-largura);
  height: var(--categoria-triangulo-altura);

  background: var(--categoria-cor);

  pointer-events: none;

  z-index: 3;
}


/* Triângulo subindo no canto esquerdo */

.categoria-faixa::before {
  top: calc(var(--categoria-triangulo-altura) * -1);
  left: 0;

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


/* Triângulo descendo no canto direito */

.categoria-faixa::after {
  right: 0;
  bottom: calc(var(--categoria-triangulo-altura) * -1);

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


/* ============================================================
   FAIXAS ESCURAS
   ============================================================ */

.categoria-faixa--escura {
  --categoria-cor: var(--ideal-preto);

  background:
    linear-gradient(110deg,
      rgba(255, 213, 0, .055),
      transparent 43%),
    var(--ideal-preto);

  color: var(--ideal-branco);
}

.categoria-faixa--escura::before,
.categoria-faixa--escura::after {
  background: var(--ideal-preto);
}


/* ============================================================
   FAIXAS CLARAS
   ============================================================ */

.categoria-faixa--clara {
  --categoria-cor: var(--ideal-branco);

  background:
    radial-gradient(circle at 75% 30%,
      rgba(255, 213, 0, .23),
      transparent 27%),
    var(--ideal-branco);

  color: #101010;

  clip-path: none;
}

.categoria-faixa--clara::before,
.categoria-faixa--clara::after {
  background: var(--ideal-branco);
}


/* ============================================================
   ALTERNÂNCIA DA IMAGEM
   ============================================================ */

.categoria-faixa--imagem-esquerda .categoria-faixa__visual {
  grid-column: 1;
  grid-row: 1;
}

.categoria-faixa--imagem-esquerda .categoria-faixa__conteudo {
  grid-column: 2;
  grid-row: 1;
}


/* ============================================================
   CONTEÚDO
   ============================================================ */

.categoria-faixa__conteudo {
  position: relative;

  z-index: 5;

  width: min(100%, 660px);
}

.categoria-faixa__tag {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  max-width: 100%;

  margin-bottom: clamp(14px, 1.5vw, 20px);

  color: var(--ideal-amarelo);

  font-size: clamp(.7rem, .82vw, .88rem);
  font-weight: 900;

  letter-spacing: clamp(.11em, .3vw, .17em);
  line-height: 1.35;

  overflow-wrap: anywhere;
}

.categoria-faixa__tag::before {
  content: "";

  flex: 0 0 auto;

  width: clamp(28px, 3vw, 42px);
  height: 4px;

  border-radius: 999px;

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

.categoria-faixa--clara .categoria-faixa__tag {
  color: var(--ideal-amarelo-escuro);
}

.categoria-faixa__conteudo h2 {
  max-width: 100%;

  margin: 0;

  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 950;

  letter-spacing: clamp(-.065em, -.6vw, -.035em);
  line-height: .86;

  text-transform: uppercase;

  overflow-wrap: anywhere;
}

.categoria-faixa__conteudo p {
  width: min(100%, 590px);

  margin-top: clamp(20px, 2.2vw, 30px);
  margin-right: 0;
  margin-bottom: clamp(23px, 2.4vw, 32px);
  margin-left: 0;

  font-size: clamp(.98rem, 1.25vw, 1.18rem);
  line-height: 1.65;

  overflow-wrap: anywhere;
}

.categoria-faixa--escura .categoria-faixa__conteudo p {
  color: #d6d6d6;
}

.categoria-faixa--clara .categoria-faixa__conteudo p {
  color: #4f4f4f;
}


/* ============================================================
   BOTÕES
   ============================================================ */

.categoria-faixa__botao {
  min-width: 0;
  min-height: 54px;

  display: inline-flex;

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

  gap: 13px;

  max-width: 100%;

  padding:
    14px clamp(19px, 2vw, 26px);

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

  border-radius: 999px;

  background: var(--ideal-amarelo);

  color: #050505;

  font: inherit;

  font-size: clamp(.92rem, 1vw, 1rem);
  font-weight: 900;

  line-height: 1.2;
  letter-spacing: .01em;

  text-align: center;

  cursor: pointer;

  touch-action: manipulation;

  box-shadow:
    0 10px 25px rgba(255, 213, 0, .22);

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

.categoria-faixa__botao span {
  flex: 0 0 auto;

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

  height: 1em;

  position: relative;
  top: -.08em;

  font-size: 1.35rem;
  line-height: 1;

  transition: transform .22s ease;
}

.categoria-faixa__botao:focus-visible {
  outline:
    3px solid var(--ideal-branco);

  outline-offset: 4px;
}

.categoria-faixa--clara .categoria-faixa__botao:focus-visible {
  outline-color: #111;
}

.categoria-faixa__botao:active {
  transform:
    translateY(1px) scale(.985);
}


/* Hover somente em dispositivos com mouse */

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

  .categoria-faixa__botao:hover {
    transform: translateY(-3px);

    background: transparent;

    color: var(--ideal-amarelo);

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

  .categoria-faixa--clara .categoria-faixa__botao:hover {
    color: #111;
  }

  .categoria-faixa__botao:hover span {
    transform: translateX(5px);
  }

}


/* ============================================================
   ÁREA VISUAL
   ============================================================ */

.categoria-faixa__visual {
  position: relative;

  z-index: 5;

  min-width: 0;
  min-height: clamp(240px, 24vw, 320px);

  display: grid;

  place-items: center;
}

.categoria-faixa__circulo {
  position: absolute;

  width: min(28vw, 370px);
  max-width: 88%;

  aspect-ratio: 1;

  border-radius: 50%;

  background: var(--ideal-amarelo);

  box-shadow:
    0 0 0 clamp(13px, 1.7vw, 22px) rgba(255, 213, 0, .08),

    0 35px 75px rgba(0, 0, 0, .28);

  transform: rotate(-8deg);
}

.categoria-faixa--clara .categoria-faixa__circulo {
  box-shadow:
    0 0 0 clamp(13px, 1.7vw, 22px) rgba(255, 213, 0, .10),

    0 35px 75px rgba(0, 0, 0, .13);
}

.categoria-faixa__visual img {
  position: relative;

  z-index: 2;

  display: block;

  width: min(100%, 440px);
  max-width: 100%;
  max-height: clamp(245px, 26vw, 325px);

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(0 24px 20px rgba(0, 0, 0, .32));

  transform:
    rotate(-4deg) translateY(0);

  transition: transform .35s ease;
}

.categoria-faixa--imagem-esquerda .categoria-faixa__visual img {
  transform:
    rotate(4deg) translateY(0);
}


/* Animação das imagens */

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

  .categoria-faixa:hover .categoria-faixa__visual img {
    transform:
      rotate(-1deg) translateY(-12px) scale(1.035);
  }

  .categoria-faixa--imagem-esquerda:hover .categoria-faixa__visual img {
    transform:
      rotate(1deg) translateY(-12px) scale(1.035);
  }

}


/* ============================================================
   NÚMEROS DECORATIVOS
   ============================================================ */

.categoria-faixa__numero {
  position: absolute;

  right: clamp(18px, 4vw, 55px);
  bottom: clamp(-28px, -2vw, -16px);

  z-index: 1;

  color: transparent;

  font-size: clamp(8rem, 18vw, 17rem);
  font-weight: 950;

  letter-spacing: -.08em;
  line-height: .75;

  -webkit-text-stroke:
    2px rgba(255, 255, 255, .09);

  user-select: none;

  pointer-events: none;
}

.categoria-faixa--clara .categoria-faixa__numero {
  -webkit-text-stroke-color:
    rgba(0, 0, 0, .07);
}

.categoria-faixa--imagem-esquerda .categoria-faixa__numero {
  right: auto;

  left: clamp(18px, 4vw, 55px);
}


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

@media (max-width: 1180px) {

  .categoria-faixa {
    grid-template-columns:
      minmax(0, 1fr) minmax(250px, .82fr);

    gap: clamp(24px, 4vw, 52px);
  }

  .categoria-faixa__conteudo h2 {
    font-size: clamp(2.9rem, 6.8vw, 5.9rem);
  }

  .categoria-faixa__circulo {
    width: min(31vw, 340px);
  }

}


/* ============================================================
   TABLETS E CELULARES GRANDES
   ============================================================ */

@media (max-width: 900px) {

  :root {
    --categoria-triangulo-largura:
      clamp(24px, 5vw, 38px);

    --categoria-triangulo-altura:
      clamp(48px, 9vw, 68px);
  }

  .home-categorias {
    width: 100%;
    max-width: none;

    padding-top: clamp(42px, 7vw, 58px);
    padding-right: 0;
    padding-left: 0;
  }

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    min-height: 0;

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

    gap: clamp(16px, 3vw, 24px);

    padding-top: clamp(52px, 8vw, 68px);
    padding-right: clamp(28px, 6vw, 44px);
    padding-bottom: clamp(46px, 7vw, 60px);
    padding-left: clamp(28px, 6vw, 44px);

    text-align: center;
  }

  .categoria-faixa--imagem-esquerda .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__conteudo,
  .categoria-faixa__visual,
  .categoria-faixa__conteudo {
    grid-column: 1;

    width: 100%;
  }

  .categoria-faixa__conteudo,
  .categoria-faixa--imagem-esquerda .categoria-faixa__conteudo {
    grid-row: 1;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    grid-row: 2;

    min-height: clamp(220px, 42vw, 300px);
  }

  .categoria-faixa__tag {
    justify-content: center;
  }

  .categoria-faixa__conteudo {
    margin-right: auto;
    margin-left: auto;
  }

  .categoria-faixa__conteudo p {
    margin-right: auto;
    margin-left: auto;
  }

  .categoria-faixa__circulo {
    width: min(56vw, 340px);
  }

  .categoria-faixa__visual img {
    width: min(82%, 400px);

    max-height: clamp(230px, 40vw, 300px);
  }

  .categoria-faixa__numero,
  .categoria-faixa--imagem-esquerda .categoria-faixa__numero {
    right: 16px;
    left: auto;

    font-size: clamp(8rem, 30vw, 14rem);
  }

}


/* ============================================================
   CELULARES
   ============================================================ */

@media (max-width: 600px) {

  :root {
    --categoria-triangulo-largura:
      clamp(20px, 6vw, 28px);

    --categoria-triangulo-altura:
      clamp(38px, 12vw, 52px);
  }

  .home-categorias {
    width: 100%;
    max-width: none;

    margin: 0;

    padding-top: 42px;
    padding-right: 0;
    padding-bottom: 56px;
    padding-left: 0;
  }

  .home-categorias__cabecalho {
    margin-bottom: 30px;

    padding-left:
      max(18px,
        env(safe-area-inset-left));

    padding-right:
      max(18px,
        env(safe-area-inset-right));
  }

  .home-categorias__cabecalho h2 {
    font-size: clamp(2rem, 10.8vw, 3.25rem);

    line-height: .98;
  }

  .home-categorias__cabecalho p {
    font-size: .98rem;
    line-height: 1.55;
  }

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    gap: 14px;

    padding-top:
      calc(42px + var(--categoria-triangulo-altura) * .20);

    padding-bottom:
      calc(34px + var(--categoria-triangulo-altura) * .20);

    padding-left:
      max(20px,
        env(safe-area-inset-left));

    padding-right:
      max(20px,
        env(safe-area-inset-right));
  }

  .categoria-faixa__tag {
    gap: 8px;

    margin-bottom: 12px;

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

    letter-spacing: .11em;
  }

  .categoria-faixa__tag::before {
    width: 25px;
    height: 3px;
  }

  .categoria-faixa__conteudo h2 {
    font-size: clamp(2.35rem, 11.7vw, 4.15rem);

    line-height: .9;
    letter-spacing: -.05em;
  }

  .categoria-faixa__conteudo p {
    margin-top: 18px;
    margin-right: auto;
    margin-bottom: 22px;
    margin-left: auto;

    font-size: clamp(.94rem, 3.8vw, 1.02rem);

    line-height: 1.55;
  }

  .categoria-faixa__botao {
    width: min(100%, 350px);

    min-height: 52px;

    padding: 13px 18px;

    font-size: .94rem;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    min-height: clamp(190px, 60vw, 255px);
  }

  .categoria-faixa__circulo {
    width: min(67vw, 285px);

    box-shadow:
      0 0 0 12px rgba(255, 213, 0, .08),

      0 24px 48px rgba(0, 0, 0, .24);
  }

  .categoria-faixa__visual img {
    width: min(90%, 330px);

    max-height: clamp(190px, 57vw, 245px);
  }

  .categoria-faixa__numero,
  .categoria-faixa--imagem-esquerda .categoria-faixa__numero {
    right: 10px;
    bottom: -10px;

    font-size: clamp(7rem, 39vw, 10.5rem);

    -webkit-text-stroke-width: 1px;
  }

}


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

@media (max-width: 390px) {

  :root {
    --categoria-triangulo-largura: 20px;
    --categoria-triangulo-altura: 38px;
  }

  .home-categorias__cabecalho {
    padding-left:
      max(15px,
        env(safe-area-inset-left));

    padding-right:
      max(15px,
        env(safe-area-inset-right));
  }

  .home-categorias__eyebrow {
    font-size: .66rem;
  }

  .home-categorias__cabecalho h2 {
    font-size: clamp(1.85rem, 10.4vw, 2.55rem);
  }

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    padding-left:
      max(16px,
        env(safe-area-inset-left));

    padding-right:
      max(16px,
        env(safe-area-inset-right));
  }

  .categoria-faixa__conteudo h2 {
    font-size: clamp(2.15rem, 11.2vw, 2.75rem);
  }

  .categoria-faixa__conteudo p {
    font-size: .93rem;
  }

  .categoria-faixa__botao {
    width: 100%;

    min-height: 50px;

    font-size: .9rem;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    min-height: 185px;
  }

  .categoria-faixa__circulo {
    width: min(69vw, 245px);
  }

  .categoria-faixa__visual img {
    width: min(92%, 280px);

    max-height: 205px;
  }

}


/* ============================================================
   TELAS DE 340px OU MENORES
   ============================================================ */

@media (max-width: 340px) {

  .home-categorias__cabecalho h2 {
    font-size: 1.8rem;
  }

  .categoria-faixa__tag {
    font-size: .62rem;
  }

  .categoria-faixa__conteudo h2 {
    font-size: 2rem;
  }

  .categoria-faixa__conteudo p {
    font-size: .9rem;
  }

  .categoria-faixa__botao {
    padding-right: 14px;
    padding-left: 14px;

    font-size: .86rem;
  }

}


/* ============================================================
   CELULAR DEITADO
   ============================================================ */

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {

  .home-categorias {
    width: 100%;
    max-width: none;
  }

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    grid-template-columns:
      minmax(0, 1.08fr) minmax(210px, .92fr);

    gap: 20px;

    padding: 44px 34px;

    text-align: left;
  }

  .categoria-faixa__conteudo,
  .categoria-faixa--imagem-esquerda .categoria-faixa__conteudo {
    grid-column: 1;
    grid-row: 1;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    grid-column: 2;
    grid-row: 1;

    min-height: 190px;
  }

  .categoria-faixa__tag {
    justify-content: flex-start;
  }

  .categoria-faixa__conteudo h2 {
    font-size: clamp(2.4rem, 7vw, 4rem);
  }

  .categoria-faixa__conteudo p {
    margin-top: 14px;
    margin-right: 0;
    margin-bottom: 18px;
    margin-left: 0;

    font-size: .9rem;
  }

  .categoria-faixa__circulo {
    width: min(31vw, 220px);
  }

  .categoria-faixa__visual img {
    width: min(100%, 260px);

    max-height: 200px;
  }

}


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

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

  html {
    scroll-behavior: auto;
  }

  .home-categorias *,
  .home-categorias *::before,
  .home-categorias *::after {
    scroll-behavior: auto !important;

    transition-duration: .01ms !important;

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

}


@media (prefers-contrast: more) {

  .categoria-faixa__botao {
    border-width: 3px;
  }

  .categoria-faixa--escura .categoria-faixa__conteudo p {
    color: #f2f2f2;
  }

  .categoria-faixa--clara .categoria-faixa__conteudo p {
    color: #222;
  }

}

/* ============================================================
   ENTRADA DAS FAIXAS DE CATEGORIAS NO SCROLL

   A animação é aplicada na faixa inteira.
   Por isso, conteúdo, imagem, fundo e triângulos se movem juntos.
   ============================================================ */

/*
  O estado oculto só é ativado quando o JavaScript adiciona
  a classe categorias-reveal-ativado.

  Caso o JavaScript não carregue, tudo continua visível.
*/
.home-categorias.categorias-reveal-ativado .categoria-faixa {
  opacity: 0;

  transform:
    translate3d(0,
      clamp(48px, 6vw, 78px),
      0);

  pointer-events: none;

  will-change:
    opacity,
    transform;

  backface-visibility: hidden;

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


/*
  Estado final da faixa quando ela entra na área visível.
*/
.home-categorias.categorias-reveal-ativado .categoria-faixa.is-visible {
  opacity: 1;

  transform: none;

  pointer-events: auto;

  will-change: auto;
}


/* ============================================================
   CELULARES

   A distância é um pouco menor para não parecer exagerada
   em telas pequenas.
   ============================================================ */

@media (max-width: 600px) {

  .home-categorias.categorias-reveal-ativado .categoria-faixa {
    transform:
      translate3d(0,
        46px,
        0);

    transition-duration:
      680ms,
      780ms;
  }

  .home-categorias.categorias-reveal-ativado .categoria-faixa.is-visible {
    transform: none;
  }

}


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

   Quem desativou animações no dispositivo verá as categorias
   imediatamente.
   ============================================================ */

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

  .home-categorias.categorias-reveal-ativado .categoria-faixa {
    opacity: 1 !important;

    transform: none !important;

    pointer-events: auto !important;

    transition: none !important;

    will-change: auto !important;
  }

}

/* ============================================================
   CORREÇÃO DOS TÍTULOS DAS CATEGORIAS
   Quebra somente entre palavras completas.
   ============================================================ */

.categoria-faixa__conteudo h2 {
  max-width: 100%;

  /*
    Reduz levemente o tamanho máximo para palavras maiores,
    como "Equipamentos", caberem melhor no espaço disponível.
  */
  font-size: clamp(2.75rem, 5.4vw, 6rem);

  line-height: .9;
  letter-spacing: -.055em;

  /*
    Impede quebra no meio das palavras.
  */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: normal;

  /*
    Títulos com mais de uma palavra quebram de maneira
    mais equilibrada, mas somente entre palavras.
  */
  text-wrap: balance;
}


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

@media (max-width: 1180px) {

  .categoria-faixa__conteudo h2 {
    font-size: clamp(2.55rem, 5.8vw, 5.25rem);
  }

}


/* ============================================================
   TABLETS
   ============================================================ */

@media (max-width: 900px) {

  .categoria-faixa__conteudo h2 {
    font-size: clamp(2.4rem, 8vw, 4.6rem);
    line-height: .92;
  }

}


/* ============================================================
   CELULARES
   ============================================================ */

@media (max-width: 600px) {

  .categoria-faixa__conteudo h2 {
    /*
      Mantém palavras longas inteiras mesmo em telas pequenas.
    */
    font-size: clamp(2rem, 9.4vw, 3.4rem);

    line-height: .94;
    letter-spacing: -.045em;
  }

}


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

@media (max-width: 390px) {

  .categoria-faixa__conteudo h2 {
    font-size: clamp(1.9rem, 8.8vw, 2.45rem);
  }

}


/* ============================================================
   TELAS DE 340PX OU MENORES
   ============================================================ */

@media (max-width: 340px) {

  .categoria-faixa__conteudo h2 {
    font-size: 1.78rem;
    letter-spacing: -.04em;
  }

}

/* ============================================================
   AJUSTE RESPONSIVO FINAL — CATEGORIAS HOME
   Corrige proximidade entre textos, botões e imagens
   em tablets, celulares e celular deitado.
   ============================================================ */

@media (max-width: 900px) {

  .home-categorias {
    padding-bottom: clamp(44px, 7vw, 72px);
  }

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    gap: clamp(28px, 6vw, 48px);

    padding-top: clamp(62px, 9vw, 84px);
    padding-bottom: clamp(62px, 9vw, 84px);
  }

  .categoria-faixa__conteudo,
  .categoria-faixa--imagem-esquerda .categoria-faixa__conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .categoria-faixa__conteudo p {
    margin-bottom: clamp(28px, 4vw, 40px);
  }

  .categoria-faixa__botao {
    margin-top: 2px;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    margin-top: clamp(8px, 3vw, 24px);

    min-height: clamp(285px, 54vw, 380px);
  }

  .categoria-faixa__circulo {
    width: min(54vw, 340px);
  }

  .categoria-faixa__visual img {
    width: min(78%, 390px);
    max-height: clamp(225px, 39vw, 305px);
  }
}


@media (max-width: 600px) {

  .home-categorias {
    padding-top: 44px;
    padding-bottom: 13px;
  }

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    gap: clamp(34px, 9vw, 52px);

    padding-top:
      calc(54px + var(--categoria-triangulo-altura) * .25);

    padding-bottom:
      calc(58px + var(--categoria-triangulo-altura) * .25);
  }

  .categoria-faixa__tag {
    margin-bottom: 14px;
  }

  .categoria-faixa__conteudo p {
    margin-top: 18px;
    margin-bottom: clamp(30px, 8vw, 42px);
  }

  .categoria-faixa__botao {
    width: min(100%, 370px);
    margin-bottom: 0;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    margin-top: clamp(8px, 4vw, 20px);

    min-height: clamp(275px, 74vw, 350px);
  }

  .categoria-faixa__circulo {
    width: min(68vw, 295px);
  }

  .categoria-faixa__visual img {
    width: min(88%, 335px);
    max-height: clamp(205px, 58vw, 265px);
  }
}


@media (max-width: 390px) {

  .home-categorias {
    padding-bottom: 50px;
  }

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    gap: 30px;

    padding-top:
      calc(48px + var(--categoria-triangulo-altura) * .20);

    padding-bottom:
      calc(50px + var(--categoria-triangulo-altura) * .20);
  }

  .categoria-faixa__conteudo p {
    margin-bottom: 30px;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    min-height: clamp(250px, 73vw, 300px);
  }

  .categoria-faixa__circulo {
    width: min(69vw, 255px);
  }

  .categoria-faixa__visual img {
    width: min(90%, 285px);
    max-height: 218px;
  }
}


@media (max-width: 340px) {

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    gap: 26px;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    min-height: 232px;
  }

  .categoria-faixa__circulo {
    width: min(68vw, 230px);
  }

  .categoria-faixa__visual img {
    max-height: 198px;
  }
}


/* Celular deitado: mantém duas colunas, mas com respiro */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {

  .categoria-faixa,
  .categoria-faixa--imagem-esquerda {
    gap: clamp(26px, 4vw, 42px);

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

  .categoria-faixa__conteudo p {
    margin-bottom: 24px;
  }

  .categoria-faixa__visual,
  .categoria-faixa--imagem-esquerda .categoria-faixa__visual {
    min-height: 225px;
    margin-top: 0;
  }

  .categoria-faixa__circulo {
    width: min(32vw, 245px);
  }

  .categoria-faixa__visual img {
    width: min(100%, 285px);
    max-height: 215px;
  }
}

/* ============================================================
   AJUSTE FINAL — TRIÂNGULOS GRUDADOS NAS CATEGORIAS
   Remove a sensação de elemento separado entre uma faixa e outra.
   ============================================================ */

:root {
  --categoria-triangulo-sobreposicao: 5px;
}

/* Evita linha fina entre uma faixa e outra */
.categoria-faixa + .categoria-faixa {
  margin-top: -1px;
}

/* Faz o triângulo entrar alguns pixels dentro da própria faixa */
.categoria-faixa::before,
.categoria-faixa::after {
  height: calc(
    var(--categoria-triangulo-altura) + var(--categoria-triangulo-sobreposicao)
  );

  background: var(--categoria-cor);

  backface-visibility: hidden;
}

/* Triângulo superior esquerdo */
.categoria-faixa::before {
  top: calc(var(--categoria-triangulo-altura) * -1);

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

/* Triângulo inferior direito */
.categoria-faixa::after {
  bottom: calc(var(--categoria-triangulo-altura) * -1);

  clip-path: polygon(
    -4% -2%,
    102% -2%,
    102% 104%
  );
}

/* Garante que as faixas claras e escuras usem a cor correta */
.categoria-faixa--escura {
  --categoria-cor: var(--ideal-preto);
}

.categoria-faixa--clara {
  --categoria-cor: var(--ideal-branco);
}

/* Mobile: sobreposição um pouco menor para não engrossar demais */
@media (max-width: 600px) {
  :root {
    --categoria-triangulo-sobreposicao: 4px;
  }

  .categoria-faixa + .categoria-faixa {
    margin-top: -1px;
  }
}