/* Esfiha Mix V8 — movimento editorial, cliques amplos e estabilidade visual. */

/* Todo o cartão de categoria é uma área de ação coerente. */
.category-tile[data-card-href] { cursor: pointer; }
.category-tile[data-card-href]:focus-visible { outline: 4px solid var(--red); outline-offset: 7px; }
.category-tile[data-card-href] .category-tile-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 72% 26%, rgba(255,203,0,.28), transparent 28%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.category-tile[data-card-href]:hover .category-tile-image::after,
.category-tile[data-card-href]:focus-visible .category-tile-image::after { opacity: 1; }

/* Títulos cinéticos: a identidade muda de ritmo sem repetir o mesmo efeito. */
.v8-kinetic-title { --v8-title-accent: var(--yellow); cursor: default; }
.v8-kinetic-title .v8-word { display: inline-block; white-space: nowrap; }
.v8-kinetic-title .v8-letter {
  display: inline-block;
  transform: translate3d(var(--v8-x,0),var(--v8-y,0),0) rotate(var(--v8-r,0deg));
  transition: transform .38s var(--ease), color .28s ease, text-shadow .28s ease;
  will-change: transform;
}
.v8-kinetic-title.is-v8-visible .v8-letter { animation: v8LetterSettle .72s var(--ease) both; animation-delay: calc(var(--v8-i) * 13ms); }
.v8-kinetic-title[data-v8-mode="underline"] .v8-word { position: relative; }
.v8-kinetic-title[data-v8-mode="underline"] .v8-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .03em;
  height: .045em;
  border-radius: 999px;
  background: var(--v8-title-accent);
  transition: right .5s var(--ease);
}
.v8-kinetic-title[data-v8-mode="underline"]:hover .v8-word::after { right: 0; }
.v8-kinetic-title[data-v8-mode="color"]:hover .v8-letter { color: var(--v8-title-accent); }
@keyframes v8LetterSettle { from { opacity: 0; transform: translate3d(0, .45em, 0) rotate(3deg); } to { opacity: 1; transform: translate3d(0,0,0) rotate(0); } }

/* Colagem "Muito além do nome": camadas independentes como um pequeno sistema. */
.story-collage { transform-style: preserve-3d; }
.story-frame { --v8-frame-x: 0px; --v8-frame-y: 0px; --v8-frame-scale: 1; }
.story-frame--food { transform: translate3d(var(--v8-frame-x),var(--v8-frame-y),0) rotate(-2deg) rotateX(var(--depth-y)) rotateY(var(--depth-x)) scale(var(--v8-frame-scale)); }
.story-frame--night { transform: translate3d(var(--v8-frame-x),var(--v8-frame-y),0) rotate(2.5deg) rotateX(var(--depth-y)) rotateY(var(--depth-x)) scale(var(--v8-frame-scale)); }
.story-frame--family { transform: translate3d(var(--v8-frame-x),var(--v8-frame-y),0) rotate(-1.5deg) rotateX(var(--depth-y)) rotateY(var(--depth-x)) scale(var(--v8-frame-scale)); }
.story-frame img { --v8-image-y: 0px; transform: scale(1.09) translate3d(var(--depth-shift-x),calc(var(--depth-shift-y) + var(--v8-image-y)),0); }
.story-collage:has(.story-frame:hover) .story-frame:not(:hover) { filter: saturate(.72) brightness(.74); --v8-frame-scale: .965; }
.story-collage .story-frame:hover { --v8-frame-scale: 1.035; }

/* Argumento final: nenhum conteúdo muda de posição no hover. */
.story-reasons-v5 .story-reason:nth-child(3),
.story-reasons-v5 .story-reason:nth-child(3):hover,
.story-reasons-v5 .story-reason:nth-child(3):focus-visible {
  transform: translate3d(0,0,0) !important;
}
.story-reasons-v5 .story-reason:nth-child(3) h3,
.story-reasons-v5 .story-reason:nth-child(3):hover h3,
.story-reasons-v5 .story-reason:nth-child(3):focus-visible h3 {
  letter-spacing: -.04em !important;
  transform: translate3d(0,0,0) !important;
}
.story-reasons-v5 .story-reason:nth-child(3) p,
.story-reasons-v5 .story-reason:nth-child(3):hover p,
.story-reasons-v5 .story-reason:nth-child(3):focus-visible p,
.story-reasons-v5 .story-reason:nth-child(3) .reason-context,
.story-reasons-v5 .story-reason:nth-child(3):hover .reason-context,
.story-reasons-v5 .story-reason:nth-child(3):focus-visible .reason-context {
  transform: translate3d(0,0,0) !important;
}
.story-reasons-v5 .story-reason:nth-child(3) .reason-keyword,
.story-reasons-v5 .story-reason:nth-child(3):hover .reason-keyword,
.story-reasons-v5 .story-reason:nth-child(3):focus-visible .reason-keyword {
  opacity: .10;
  transform: translate3d(9%,18%,12px) rotate(-7deg) !important;
}

/* A experiência nasce de uma onda preta; a faixa reta anterior fica coberta. */
.experience-v4 { z-index: 20 !important; margin-top: 0; }
.experience-v4::before {
  z-index: 28 !important;
  top: -108px !important;
  height: 156px !important;
  border-radius: 51% 49% 0 0 / 96% 72% 0 0 !important;
  transform: rotate(-.35deg) !important;
}
.experience-v4::after { z-index: 29 !important; top: -73px !important; }

/* Cabeçalho das unidades: o vazio vira tensão tipográfica deliberada. */
#unidades .section-head {
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
  gap: clamp(42px, 7vw, 128px);
  align-items: center;
  margin-bottom: clamp(58px, 7vw, 96px);
}
#unidades .section-head h2 {
  max-width: none;
  font-size: clamp(88px, 10.4vw, 178px);
  line-height: .69;
  letter-spacing: -.065em;
}
#unidades .section-head h2 em {
  display: block;
  width: max-content;
  margin-left: .28em;
  color: var(--red);
  font-family: var(--display);
  font-size: .72em;
  font-style: normal;
  letter-spacing: -.045em;
}
#unidades .section-head > p { max-width: 520px; margin-top: clamp(70px,8vw,135px); font-size: clamp(17px,1.25vw,21px); }

/* Entrada assimétrica e assentamento dos cartões de loja. */
#unidades .location-card.v8-motion-ready { opacity: 0; transform: translate3d(var(--v8-unit-x,0),80px,0) rotate(var(--v8-unit-r,0deg)) scale(.94); }
#unidades .location-card.v8-motion-ready:nth-child(3n+1) { --v8-unit-x: -52px; --v8-unit-r: -2.4deg; }
#unidades .location-card.v8-motion-ready:nth-child(3n+2) { --v8-unit-x: 0px; --v8-unit-r: 1.7deg; }
#unidades .location-card.v8-motion-ready:nth-child(3n) { --v8-unit-x: 52px; --v8-unit-r: 2.2deg; }
#unidades .location-card.v8-motion-ready.is-v8-visible { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); transition: opacity .75s var(--ease), transform .95s var(--ease); transition-delay: var(--v8-unit-delay,0ms); }
#unidades .location-card.v8-motion-ready.is-v8-visible:hover { transform: translateY(-10px) rotate(-.45deg); }
#unidades .location-card.v8-motion-ready .location-photo img { transform: scale(1.12); transition: transform 1.15s var(--ease), filter .45s ease; }
#unidades .location-card.v8-motion-ready.is-v8-visible .location-photo img { transform: scale(1.02); }
#unidades .location-card.v8-motion-ready.is-v8-visible:hover .location-photo img { transform: scale(1.055); }
#unidades .location-card:nth-child(10) { --unit-focus-y: 78%; }
#unidades .location-card:nth-child(10) .location-photo img { object-position: 50% 78% !important; }

@media (max-width: 900px) {
  #unidades .section-head { grid-template-columns: 1fr; gap: 34px; }
  #unidades .section-head h2 { font-size: clamp(76px,18vw,132px); }
  #unidades .section-head > p { margin-top: 0; }
  .experience-v4::before { top: -72px !important; height: 106px !important; }
  .experience-v4::after { top: -49px !important; }
}

@media (max-width: 620px) {
  #unidades .section-head h2 { font-size: clamp(64px,19vw,96px); }
  #unidades .section-head h2 em { margin-left: .1em; }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .v8-kinetic-title .v8-letter { animation: none !important; transform: none !important; }
  .story-frame, .story-frame img { --v8-frame-x: 0px !important; --v8-frame-y: 0px !important; --v8-image-y: 0px !important; }
  #unidades .location-card.v8-motion-ready { opacity: 1; transform: none; transition: none; }
}