/* Esfiha Mix V7 — transições orgânicas, sem pontas e sem barras retas. */

/* Cada seção recebe a cor da própria superfície e um oval de contraste. */
.story-section,
.range-v4,
.category-showcase,
.experience-v4,
.reviews-v4,
.faq-section,
#unidades,
.channel-hub-v4,
.site-footer {
  --divider-oval: var(--yellow);
  overflow: visible;
}

.story-section { --divider-surface: var(--red); --divider-oval: var(--red); }
.range-v4 { --divider-surface: #bf0b10; --divider-oval: var(--yellow); }
.category-showcase { --divider-surface: #f7ead0; --divider-oval: var(--red); }
.experience-v4 { --divider-surface: var(--ink); --divider-oval: var(--yellow); }
.reviews-v4 { --divider-surface: var(--v4-paper); --divider-oval: var(--red); }
.faq-section { --divider-surface: var(--ink); --divider-oval: var(--yellow); }
#unidades { --divider-surface: #f7ead0; --divider-oval: var(--red); }
.channel-hub-v4 { --divider-surface: var(--yellow); --divider-oval: var(--red); }
.site-footer { --divider-surface: var(--ink); --divider-oval: var(--yellow); }

/* A onda é uma elipse larga e assimétrica: nenhuma aresta triangular. */
.story-section::before,
.range-v4::before,
.category-showcase::before,
.experience-v4::before,
.reviews-v4::before,
.faq-section::before,
#unidades::before,
.channel-hub-v4::before,
.site-footer::before {
  content: "";
  position: absolute;
  z-index: 8;
  left: -7%;
  right: -7%;
  top: -74px;
  height: 112px;
  border: 0;
  border-radius: 54% 46% 0 0 / 88% 70% 0 0;
  background: var(--divider-surface);
  clip-path: none;
  transform: rotate(-.55deg);
  pointer-events: none;
}

.range-v4::before,
.reviews-v4::before,
#unidades::before,
.site-footer::before {
  border-radius: 46% 54% 0 0 / 68% 92% 0 0;
  transform: rotate(.45deg);
}

/* Ovais autorais: variam de posição para não parecer repetição automática. */
.story-section::after,
.range-v4::after,
.category-showcase::after,
.experience-v4::after,
.reviews-v4::after,
.faq-section::after,
#unidades::after,
.channel-hub-v4::after,
.site-footer::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: -53px;
  left: var(--oval-left, 15%);
  width: clamp(150px, 24vw, 430px);
  height: clamp(10px, 1.25vw, 20px);
  border-radius: 50%;
  background: var(--divider-oval);
  transform: rotate(var(--oval-rotation, 1.5deg));
  pointer-events: none;
}

.story-section { --oval-left: 8%; --oval-rotation: 1deg; }
.range-v4 { --oval-left: 57%; --oval-rotation: 2deg; }
.category-showcase { --oval-left: 12%; --oval-rotation: -1deg; }
.experience-v4 { --oval-left: 62%; --oval-rotation: 1deg; }
.reviews-v4 { --oval-left: 16%; --oval-rotation: -2deg; }
.faq-section { --oval-left: 58%; --oval-rotation: 1deg; }
#unidades { --oval-left: 10%; --oval-rotation: 1.5deg; }
.channel-hub-v4 { --oval-left: 61%; --oval-rotation: -1deg; }
.site-footer { --oval-left: 18%; --oval-rotation: 1deg; }

/* A saída dos sabores também vira uma curva limpa, na cor da próxima seção. */
.specials-exit {
  left: -8%;
  right: -8%;
  bottom: -3px;
  height: 116px;
  border-radius: 52% 48% 0 0 / 94% 72% 0 0;
  transform: rotate(.35deg);
  background: var(--red) !important;
}

.specials-exit::before {
  left: 9%;
  top: -11px;
  width: min(36vw, 520px);
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  box-shadow: none !important;
  transform: rotate(1deg);
}

/* A passagem editorial vermelha → argumentos pretos também deixa de ser reta. */
.story-reasons-v5 {
  margin-top: -60px;
  padding-top: clamp(122px, 12vw, 188px);
  border-radius: 54% 46% 0 0 / 92px 74px 0 0;
}

.story-reasons-v5::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 30px;
  left: 58%;
  width: min(28vw, 430px);
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  transform: rotate(1.5deg);
  pointer-events: none;
}

/* Cards sem quinas e com abertura circular no hover. */
.story-reasons-v5 .story-reason {
  border-radius: clamp(24px, 2.2vw, 38px);
}

.story-reasons-v5 .story-reason::before {
  inset: -2px;
  border-radius: inherit;
  clip-path: circle(0 at var(--spot-x) var(--spot-y));
  transition: clip-path .72s var(--ease);
}

.story-reasons-v5 .story-reason:hover::before,
.story-reasons-v5 .story-reason:focus-visible::before {
  clip-path: circle(150% at var(--spot-x) var(--spot-y));
}

/* A hierarquia pode trocar de cor, mas nunca muda posição, espaçamento ou quebra. */
.story-reasons-v5 .story-reason:hover h3,
.story-reasons-v5 .story-reason:focus-visible h3 {
  letter-spacing: -.04em;
  transform: translateZ(52px);
}

.story-reasons-v5 .story-reason:hover p,
.story-reasons-v5 .story-reason:focus-visible p {
  transform: translateZ(52px);
}

.story-reasons-v5 .story-reason:hover .reason-context,
.story-reasons-v5 .story-reason:focus-visible .reason-context {
  transform: translateZ(44px);
}

@media (max-width: 820px) {
  .story-section::before,
  .range-v4::before,
  .category-showcase::before,
  .experience-v4::before,
  .reviews-v4::before,
  .faq-section::before,
  #unidades::before,
  .channel-hub-v4::before,
  .site-footer::before {
    top: -48px;
    height: 74px;
  }

  .story-section::after,
  .range-v4::after,
  .category-showcase::after,
  .experience-v4::after,
  .reviews-v4::after,
  .faq-section::after,
  #unidades::after,
  .channel-hub-v4::after,
  .site-footer::after {
    top: -34px;
    width: min(42vw, 220px);
    height: 10px;
  }

  .story-reasons-v5 {
    margin-top: -36px;
    padding-top: 104px;
    border-radius: 54% 46% 0 0 / 52px 42px 0 0;
  }

  .story-reasons-v5::after {
    top: 22px;
    left: 48%;
    width: 42vw;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-reasons-v5 .story-reason::before { transition: none; }
}