.premium-hero {
  --hero-duration: 6500ms;
  --hero-transition-duration: 720ms;
  --hero-overlay-opacity: .1;
  --hero-image-brightness: 1.04;
  --hero-image-saturation: 1.07;
  --hero-image-contrast: 1.02;
  --hero-drag-x: 0px;
  position: relative;
  width: 100%;
  min-height: clamp(24rem, 35vw, 31.25rem);
  overflow: hidden;
  isolation: isolate;
  background: #e5e7eb;
  color: #fff;
  contain: layout paint;
}

.premium-hero__viewport {
  position: relative;
  min-height: inherit;
  overflow: hidden;
  outline: none;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.premium-hero__viewport:active {
  cursor: grabbing;
}

.premium-hero__viewport:focus-visible {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--store-primary, #ea580c) 72%, #fff);
}

.premium-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  min-height: inherit;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(1.2%, 0, 0) scale(1.006);
  filter: none;
  pointer-events: none;
  transition:
    opacity var(--hero-transition-duration) cubic-bezier(.22, 1, .36, 1),
    transform var(--hero-transition-duration) cubic-bezier(.22, 1, .36, 1),
    filter var(--hero-transition-duration) cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear var(--hero-transition-duration);
}

.premium-hero__slide.is-active,
.premium-hero__slide.is-leaving {
  visibility: visible;
  transition-delay: 0s;
}

.premium-hero__slide.is-active {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.premium-hero__slide.is-leaving {
  z-index: 1;
  opacity: 0;
  transform: translate3d(-1.2%, 0, 0) scale(.996);
  pointer-events: none;
}

.premium-hero[data-transition="crossfade-zoom"] .premium-hero__slide:not(.is-active) {
  transform: scale(1.012);
  filter: blur(0);
}

.premium-hero[data-transition="fade-blur"] .premium-hero__slide:not(.is-active) {
  transform: scale(1.008);
  filter: none;
}

.premium-hero[data-transition="slide-soft"][data-direction="next"] .premium-hero__slide:not(.is-active),
.premium-hero[data-transition="slide-soft"][data-direction="previous"] .premium-hero__slide.is-leaving {
  transform: translate3d(1.5%, 0, 0) scale(1.005);
  filter: none;
}

.premium-hero[data-transition="slide-soft"][data-direction="previous"] .premium-hero__slide:not(.is-active),
.premium-hero[data-transition="slide-soft"][data-direction="next"] .premium-hero__slide.is-leaving {
  transform: translate3d(-1.5%, 0, 0) scale(1.005);
  filter: none;
}

.premium-hero[data-transition="rise-soft"] .premium-hero__slide:not(.is-active) {
  transform: translate3d(0, 1.2%, 0) scale(1.006);
  filter: none;
}

.premium-hero[data-transition="mosaic"] .premium-hero__slide,
.premium-hero[data-transition="mosaic-grid"] .premium-hero__slide {
  transform: none;
  filter: none;
}

.premium-hero__media,
.premium-hero__fallback-art {
  position: absolute;
  inset: 0;
  z-index: -4;
  display: block;
  overflow: hidden;
}

.premium-hero__fallback-art {
  background:
    radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--store-primary, #ea580c) 55%, transparent), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(255, 255, 255, .12), transparent 28%),
    linear-gradient(118deg, #070b14 0%, #172033 52%, #111827 100%);
}

.premium-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter:
    brightness(var(--hero-image-brightness))
    saturate(var(--hero-image-saturation))
    contrast(var(--hero-image-contrast));
  transition: opacity .35s ease;
}

.premium-hero__image.is-loaded {
  opacity: 1;
}

.premium-hero__image.has-image-error {
  visibility: hidden;
}

.premium-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.premium-hero__slide[data-overlay="gradient-dark"] .premium-hero__scrim {
  background:
    linear-gradient(90deg, rgba(3, 7, 18, var(--hero-overlay-opacity)) 0%, rgba(3, 7, 18, .04) 30%, transparent 58%),
    linear-gradient(0deg, rgba(3, 7, 18, .035), transparent 38%);
}

.premium-hero__slide[data-overlay="none"] .premium-hero__scrim {
  background: none;
}

/* Camada do efeito mosaico: fica por cima do banner só durante a troca.
   O tamanho, a posição e o pedaço de imagem de cada bloco são calculados
   no JavaScript (assets/full-banner.js) — aqui ficam só as animações. */
.premium-hero__mosaic {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #050714;
  pointer-events: none;
}

/* Cada quadradinho da grade. Anima apenas transform/opacity (roda na GPU). */
.premium-hero__mosaic-tile {
  position: absolute;
  width: 20%;
  height: 20%;
  overflow: hidden;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  transform-origin: center;
  backface-visibility: hidden;
  transition:
    transform var(--mosaic-duration, 860ms) cubic-bezier(.16, .78, .28, 1),
    opacity var(--mosaic-duration, 860ms) ease-out;
  transition-delay: var(--tile-delay, 0ms);
  will-change: opacity, transform;
}

/* O pedaço da foto (e o ajuste de cor da imagem) fica num filho PARADO do
   bloco, nunca no bloco que se move nem num pai dele.
   Motivo: no Firefox, um "filter" acima de uma animação obriga o navegador a
   redesenhar tudo na CPU quadro a quadro — era isso que fazia o mosaico
   trepidar. Com o filtro isolado aqui, o movimento volta a rodar na GPU.
   O resultado na tela é idêntico (brilho/saturação/contraste por pixel). */
.premium-hero__mosaic-face {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  filter:
    brightness(var(--hero-image-brightness))
    saturate(var(--hero-image-saturation))
    contrast(var(--hero-image-contrast));
}

/* Saída: os blocos deslizam para fora (ganhando velocidade) e somem,
   uma coluna depois da outra. */
.premium-hero__mosaic.is-exiting .premium-hero__mosaic-tile {
  opacity: 0;
  transform:
    translate3d(var(--tile-exit-x, 0), var(--tile-exit-y, 0), 0)
    rotate(var(--tile-exit-rotate, 0deg))
    scale(var(--mosaic-scale, 1));
  transition-timing-function: cubic-bezier(.5, 0, .78, .3);
}

/* Estado invisível de preparo: já com a imagem nova, parados fora da tela
   do lado oposto, esperando a hora de entrar (aqui não anima nada). */
.premium-hero__mosaic.is-entry-prepared .premium-hero__mosaic-tile {
  opacity: 0;
  transform:
    translate3d(var(--tile-entry-x, 0), var(--tile-entry-y, 0), 0)
    rotate(var(--tile-entry-rotate, 0deg))
    scale(var(--mosaic-scale, 1));
  transition: none;
}

/* Entrada: os blocos voltam ao lugar e a nova imagem se remonta. */
.premium-hero__mosaic.is-entering .premium-hero__mosaic-tile {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.premium-hero__slide.is-mosaic-entering {
  opacity: 1;
  transition: none;
}

.premium-hero__slide.is-mosaic-entering .premium-hero__media {
  visibility: hidden;
}

/* As novas estratégias usam os mesmos slides e o mesmo viewport. Somente
   transform e opacity mudam durante a transição; dimensões e layout ficam
   sob responsabilidade das regras originais acima. */
.premium-hero[data-transition="slide-overlay"] .premium-hero__slide,
.premium-hero[data-transition="split-strips"] .premium-hero__slide,
.premium-hero[data-transition="reveal"] .premium-hero__slide {
  transform: none;
  filter: none;
}

.premium-hero[data-transition="slide-overlay"] .premium-hero__slide.is-leaving,
.premium-hero[data-transition="split-strips"] .premium-hero__slide.is-leaving,
.premium-hero[data-transition="reveal"] .premium-hero__slide.is-leaving {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: none;
  transition: none;
}

.premium-hero[data-transition="slide-overlay"] .premium-hero__slide.is-active.is-slide-overlay-entering {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  transition: transform 880ms cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

.premium-hero[data-transition="slide-overlay"][data-direction="next"] .premium-hero__slide.is-active.is-slide-overlay-entering.is-transition-prepared {
  transform: translate3d(100%, 0, 0);
  transition: none;
}

.premium-hero[data-transition="slide-overlay"][data-direction="previous"] .premium-hero__slide.is-active.is-slide-overlay-entering.is-transition-prepared {
  transform: translate3d(-100%, 0, 0);
  transition: none;
}

.premium-hero__strips {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.premium-hero__strip {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  background-repeat: no-repeat;
  opacity: 1;
  transform: translate3d(0, var(--strip-entry-y, -105%), 0);
  transition: transform 760ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--strip-delay, 0ms);
  backface-visibility: hidden;
  will-change: transform;
  filter:
    brightness(var(--hero-image-brightness))
    saturate(var(--hero-image-saturation))
    contrast(var(--hero-image-contrast));
}

.premium-hero__strips.is-entering .premium-hero__strip {
  transform: translate3d(0, 0, 0);
}

.premium-hero[data-transition="split-strips"] .premium-hero__slide.is-active {
  opacity: 1;
  transition: none;
}

.premium-hero[data-transition="split-strips"] .premium-hero__slide.is-active.is-strips-entering {
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition: none;
}

.premium-hero[data-transition="reveal"] .premium-hero__slide.is-active.is-reveal-entering {
  z-index: 2;
  opacity: 1;
  transform: none;
  pointer-events: none;
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity;
}

.premium-hero[data-transition="reveal"] .premium-hero__slide.is-active.is-reveal-entering.is-transition-prepared {
  opacity: 0;
  transition: none;
}

.premium-hero[data-transition="reveal"] .premium-hero__slide.is-reveal-entering .premium-hero__media {
  transform: scale(1);
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.premium-hero[data-transition="reveal"] .premium-hero__slide.is-reveal-entering.is-transition-prepared .premium-hero__media {
  transform: scale(1.015);
  transition: none;
}

.premium-hero__slide[data-overlay="dark"] .premium-hero__scrim {
  background: rgba(3, 7, 18, var(--hero-overlay-opacity));
}

.premium-hero__slide[data-overlay="light"] .premium-hero__scrim {
  background: rgba(255, 255, 255, var(--hero-overlay-opacity));
}

.premium-hero__slide[data-overlay="gradient-light"] .premium-hero__scrim {
  background: linear-gradient(90deg, rgba(255, 255, 255, calc(var(--hero-overlay-opacity) + .14)), rgba(255, 255, 255, .12) 70%);
}

.premium-hero__slide-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  outline: none;
}

.premium-hero__slide-link:focus-visible {
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--store-primary, #ea580c);
}

.premium-hero__copy {
  position: absolute;
  z-index: 3;
  display: flex;
  min-width: 0;
  max-width: calc(100% - 40px);
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  box-shadow: none;
  text-align: center;
  pointer-events: none;
}

.premium-hero__copy--esquerda,
.premium-hero__copy--direita {
  top: 50%;
  width: min(38%, 330px);
  max-height: calc(100% - 80px);
  aspect-ratio: 1 / 1;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  transform: translateY(-50%);
}

.premium-hero__copy--esquerda {
  left: clamp(2.25rem, 6vw, 7rem);
}

.premium-hero__copy--direita {
  right: clamp(2.25rem, 6vw, 7rem);
}

.premium-hero__copy--centro-superior,
.premium-hero__copy--centro-inferior {
  left: 50%;
  width: min(calc(100% - 150px), 560px);
  min-height: 140px;
  padding: 1.35rem 2rem;
  transform: translateX(-50%);
}

.premium-hero__copy--centro-superior {
  top: 2.25rem;
}

.premium-hero__copy--centro-inferior {
  bottom: 4.5rem;
}

.premium-hero__copy-title {
  max-width: 100%;
  margin: 0;
  color: var(--full-banner-title-color, #111827);
  font-family: var(--full-banner-title-font, Inter, system-ui, sans-serif);
  font-size: var(--full-banner-title-size, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  overflow-wrap: break-word;
  text-align: center;
  text-shadow: 0 1px 14px rgba(255, 255, 255, .72), 0 1px 2px rgba(255, 255, 255, .55);
}

.premium-hero__copy-subtitle {
  max-width: 100%;
  margin: .45rem 0 0;
  color: var(--full-banner-subtitle-color, #374151);
  font-family: var(--full-banner-subtitle-font, Inter, system-ui, sans-serif);
  font-size: var(--full-banner-subtitle-size, 14px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35;
  overflow-wrap: break-word;
  text-align: center;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .68);
  text-transform: uppercase;
}

.premium-hero__copy-cta {
  display: inline-flex;
  max-width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-top: .9rem;
  border: 0;
  border-radius: .5rem;
  padding: .75rem 1.4rem;
  background: rgba(234, 88, 12, .78);
  background: color-mix(in srgb, var(--store-primary, #ea580c) 58%, transparent);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .14);
  color: var(--full-banner-button-text-color, #fff);
  font-family: var(--full-banner-button-font, Inter, system-ui, sans-serif);
  font-size: var(--full-banner-button-size, 12px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  pointer-events: auto;
  transition: filter .2s ease, transform .2s ease;
}

.premium-hero__copy-cta:hover,
.premium-hero__copy-cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.premium-hero__copy-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.premium-hero__content-grid {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  width: min(100%, 1360px);
  min-height: inherit;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.25rem, 6vw, 5.5rem) clamp(5.5rem, 9vw, 7.5rem);
  pointer-events: none;
}

.premium-hero__content-grid--center {
  justify-content: center;
  text-align: center;
}

.premium-hero__content {
  width: min(100%, 44rem);
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}

.premium-hero__content-grid--center .premium-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.premium-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
  font-size: clamp(.72rem, 1vw, .86rem);
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.premium-hero__eyebrow::before {
  width: 2.3rem;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: .72;
}

.premium-hero__content-grid--center .premium-hero__eyebrow::after {
  width: 2.3rem;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: .72;
}

.premium-hero__title {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.35rem, 5.4vw, 5.4rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: balance;
  text-shadow: 0 5px 30px rgba(0, 0, 0, .32);
}

.premium-hero__subtitle {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.65vw, 1.3rem);
  font-weight: 450;
  line-height: 1.58;
  color: rgba(255, 255, 255, .9);
  text-wrap: pretty;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

.premium-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.8rem;
  pointer-events: auto;
}

.premium-hero__content-grid--center .premium-hero__actions {
  justify-content: center;
}

.premium-hero__cta {
  position: relative;
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: .85rem;
  padding: .9rem 1.45rem;
  background: var(--store-primary, #ea580c);
  background: color-mix(in srgb, var(--store-primary, #ea580c) 88%, #111827);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, filter .35s ease;
}

.premium-hero__cta::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .3) 48%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.premium-hero__cta:hover,
.premium-hero__cta:focus-visible {
  transform: translate3d(0, -2px, 0) scale(1.025);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .3);
  filter: brightness(1.06);
}

.premium-hero__cta:hover::before,
.premium-hero__cta:focus-visible::before {
  transform: translateX(120%);
}

.premium-hero__cta:active {
  transform: translate3d(0, 0, 0) scale(.985);
}

.premium-hero__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.premium-hero__cta svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform .35s ease;
}

.premium-hero__cta:hover svg {
  transform: translateX(3px);
}

.premium-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

.premium-hero__particle {
  position: absolute;
  width: var(--particle-size, 4px);
  height: var(--particle-size, 4px);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--particle-radius, 50%);
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 0 14px rgba(255, 255, 255, .38);
  opacity: 0;
}

.premium-hero__particle:nth-child(1) { left: 8%; top: 24%; --particle-size: 3px; }
.premium-hero__particle:nth-child(2) { left: 25%; top: 78%; --particle-size: 5px; --particle-radius: 2px; }
.premium-hero__particle:nth-child(3) { left: 55%; top: 17%; --particle-size: 4px; }
.premium-hero__particle:nth-child(4) { left: 71%; top: 68%; --particle-size: 6px; --particle-radius: 2px; }
.premium-hero__particle:nth-child(5) { left: 86%; top: 31%; --particle-size: 3px; }
.premium-hero__particle:nth-child(6) { left: 92%; top: 82%; --particle-size: 4px; }

.premium-hero.is-ready .is-active .premium-hero__particle {
  animation: premium-hero-particle 9s ease-in-out infinite;
}

.premium-hero.is-ready .is-active .premium-hero__particle:nth-child(2) { animation-delay: -2s; }
.premium-hero.is-ready .is-active .premium-hero__particle:nth-child(3) { animation-delay: -4s; }
.premium-hero.is-ready .is-active .premium-hero__particle:nth-child(4) { animation-delay: -1s; }
.premium-hero.is-ready .is-active .premium-hero__particle:nth-child(5) { animation-delay: -5s; }
.premium-hero.is-ready .is-active .premium-hero__particle:nth-child(6) { animation-delay: -3s; }

@keyframes premium-hero-particle {
  0%, 100% { opacity: .12; transform: translate3d(0, 10px, 0) rotate(0); }
  45% { opacity: .62; }
  60% { opacity: .35; transform: translate3d(7px, -18px, 0) rotate(45deg); }
}

[data-hero-layer] {
  opacity: 0;
  filter: blur(0);
  transition:
    opacity var(--layer-duration, 560ms) cubic-bezier(.22, 1, .36, 1) var(--layer-delay, 0ms),
    transform var(--layer-duration, 560ms) cubic-bezier(.22, 1, .36, 1) var(--layer-delay, 0ms),
    filter var(--layer-duration, 560ms) cubic-bezier(.22, 1, .36, 1) var(--layer-delay, 0ms);
}

[data-animation="fade-up"] { transform: translate3d(0, 30px, 0); }
[data-animation="fade-down"] { transform: translate3d(0, -25px, 0); }
[data-animation="fade-left"] { transform: translate3d(30px, 0, 0); }
[data-animation="fade-right"] { transform: translate3d(-30px, 0, 0); }
[data-animation="zoom-in"] { transform: scale(.9); }
[data-animation="zoom-out"] { transform: scale(1.1); }
[data-animation="rotate"] { transform: rotate(-3deg) scale(.96); }
[data-animation="blur"] { transform: scale(.98); filter: blur(12px); }
[data-animation="scale"] { transform: scale(.82); }
[data-animation="flip"] { transform: perspective(800px) rotateX(13deg) translateY(18px); transform-origin: center bottom; }

.premium-hero.is-ready .premium-hero__slide.is-active [data-hero-layer] {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  filter: blur(0);
  will-change: opacity, transform, filter;
}

.premium-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: inline-flex;
  width: 3.15rem;
  height: 3.15rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(10, 15, 25, .22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .15);
  color: #fff;
  opacity: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate3d(0, -50%, 0) scale(.92);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}

.premium-hero__arrow--previous { left: clamp(.8rem, 2.5vw, 2.2rem); }
.premium-hero__arrow--next { right: clamp(.8rem, 2.5vw, 2.2rem); }

.premium-hero:hover .premium-hero__arrow,
.premium-hero:focus-within .premium-hero__arrow {
  opacity: .82;
  transform: translate3d(0, -50%, 0) scale(1);
}

.premium-hero__arrow:hover,
.premium-hero__arrow:focus-visible {
  background: rgba(10, 15, 25, .58);
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(1.06);
}

.premium-hero__arrow:active {
  transform: translate3d(0, -50%, 0) scale(.94);
}

.premium-hero__arrow:focus-visible,
.premium-hero__toggle:focus-visible,
.premium-hero__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.premium-hero__arrow svg {
  width: 1.35rem;
  height: 1.35rem;
}

.premium-hero__controls {
  position: absolute;
  right: 0;
  bottom: clamp(1.25rem, 3vw, 2rem);
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding-inline: 1.25rem;
  pointer-events: none;
}

.premium-hero__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  pointer-events: auto;
}

.premium-hero__dot {
  position: relative;
  width: clamp(2.1rem, 4vw, 3.4rem);
  height: .24rem;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  padding: 0;
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .16);
}

.premium-hero__dot::after {
  position: absolute;
  inset: 0;
  content: "";
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.premium-hero__dot.is-active::after {
  animation: premium-hero-progress var(--hero-duration) linear forwards;
}

.premium-hero.is-paused .premium-hero__dot.is-active::after,
.premium-hero.is-paused .premium-hero__slide.is-active .premium-hero__image,
.premium-hero.is-paused .premium-hero__slide.is-active .premium-hero__particle {
  animation-play-state: paused;
}

@keyframes premium-hero-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.premium-hero__toggle {
  position: absolute;
  top: 50%;
  right: calc(clamp(.8rem, 2.5vw, 2.2rem) + 3.9rem);
  z-index: 8;
  display: inline-flex;
  width: 3.15rem;
  height: 3.15rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(10, 15, 25, .26);
  color: #fff;
  opacity: 0;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate3d(0, -50%, 0) scale(.92);
  transition: opacity .3s ease, background-color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.premium-hero:hover .premium-hero__toggle,
.premium-hero:focus-within .premium-hero__toggle,
.premium-hero.is-user-paused .premium-hero__toggle {
  opacity: .82;
  transform: translate3d(0, -50%, 0) scale(1);
}

.premium-hero__toggle:hover,
.premium-hero__toggle:focus-visible {
  background: rgba(10, 15, 25, .62);
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(1.06);
}

.premium-hero__toggle:active {
  transform: translate3d(0, -50%, 0) scale(.94);
}

.premium-hero__toggle svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.premium-hero__toggle .icon-play,
.premium-hero.is-user-paused .premium-hero__toggle .icon-pause {
  display: none;
}

/* Enquanto o mosaico está trocando de banner (aria-busy="true"), o desfoque de
   fundo das setas/botão sai de cena. No Firefox esse desfoque é recalculado a
   cada quadro por causa da imagem se movendo atrás dele, e isso trava a
   animação. Fora da troca o desfoque continua igual. */
.premium-hero[aria-busy="true"] .premium-hero__arrow,
.premium-hero[aria-busy="true"] .premium-hero__toggle {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.premium-hero.is-user-paused .premium-hero__toggle .icon-play {
  display: block;
}

.premium-hero__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.premium-hero.is-dragging .premium-hero__slide.is-active {
  transform: translate3d(var(--hero-drag-x), 0, 0) scale(.995);
  transition: none;
}

.premium-hero[data-overlay-tone="light"],
.premium-hero__slide[data-overlay="light"],
.premium-hero__slide[data-overlay="gradient-light"] {
  color: #111827;
}

.premium-hero[data-overlay-tone="light"] .premium-hero__eyebrow,
.premium-hero[data-overlay-tone="light"] .premium-hero__subtitle,
.premium-hero__slide[data-overlay="light"] .premium-hero__eyebrow,
.premium-hero__slide[data-overlay="light"] .premium-hero__subtitle,
.premium-hero__slide[data-overlay="gradient-light"] .premium-hero__eyebrow,
.premium-hero__slide[data-overlay="gradient-light"] .premium-hero__subtitle {
  color: rgba(17, 24, 39, .88);
  text-shadow: 0 2px 18px rgba(255, 255, 255, .5);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .premium-hero {
    min-height: 25rem;
  }
}

@media (max-width: 767px) {
  .premium-hero {
    min-height: clamp(20rem, 82vw, 25rem);
  }

  .premium-hero__media,
  .premium-hero__fallback-art {
    inset: 0;
  }

  .premium-hero__slide[data-overlay="gradient-dark"] .premium-hero__scrim {
    background:
      linear-gradient(0deg, rgba(3, 7, 18, .18) 0%, rgba(3, 7, 18, .07) 42%, transparent 76%),
      linear-gradient(90deg, rgba(3, 7, 18, .07), transparent 62%);
  }

  .premium-hero__copy--esquerda,
  .premium-hero__copy--direita {
    top: auto;
    right: auto;
    bottom: 4.25rem;
    left: 1.75rem;
    width: calc(100% - 3.5rem);
    max-height: none;
    min-height: 120px;
    aspect-ratio: auto;
    padding: 1.1rem;
    transform: none;
  }

  .premium-hero__copy--centro-superior,
  .premium-hero__copy--centro-inferior {
    width: calc(100% - 3.5rem);
    min-height: 112px;
    padding: 1.1rem;
  }

  .premium-hero__copy--centro-superior {
    top: 1.75rem;
  }

  .premium-hero__copy--centro-inferior {
    bottom: 4.25rem;
  }

  .premium-hero__copy-title {
    font-size: min(var(--full-banner-title-size, 32px), 2.25rem);
  }

  .premium-hero__copy-subtitle {
    font-size: min(var(--full-banner-subtitle-size, 14px), 1.35rem);
  }

  .premium-hero__copy-cta {
    min-height: 2.5rem;
    padding: .65rem 1.1rem;
    font-size: min(var(--full-banner-button-size, 12px), 1.1rem);
  }

  .premium-hero__content-grid,
  .premium-hero__content-grid--center {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.75rem 1.25rem 3.25rem;
    text-align: left;
  }

  .premium-hero__content-grid--center .premium-hero__content {
    align-items: flex-start;
  }

  .premium-hero__content-grid--center .premium-hero__eyebrow::after {
    display: none;
  }

  .premium-hero__title {
    max-width: 15ch;
    font-size: clamp(1.75rem, 8.2vw, 2.8rem);
  }

  .premium-hero__subtitle {
    max-width: 30rem;
    margin-top: .65rem;
    font-size: .88rem;
    line-height: 1.4;
  }

  .premium-hero__actions,
  .premium-hero__content-grid--center .premium-hero__actions {
    justify-content: flex-start;
    margin-top: .9rem;
  }

  .premium-hero__cta {
    min-height: 2.75rem;
    padding: .68rem 1.05rem;
    font-size: .7rem;
  }

  .premium-hero__arrow {
    display: none;
  }

  .premium-hero__toggle {
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  .premium-hero__particles {
    opacity: .65;
  }

  .premium-hero__dot {
    width: clamp(1.65rem, 10vw, 2.55rem);
  }
}

@media (max-width: 420px) {
  .premium-hero {
    min-height: 20rem;
  }

  .premium-hero__eyebrow {
    margin-bottom: .72rem;
    font-size: .65rem;
  }

  .premium-hero__eyebrow::before {
    width: 1.5rem;
  }

  .premium-hero__title {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }

  .premium-hero__controls {
    gap: .55rem;
    padding-inline: .8rem;
  }
}

/* Layout salvo pelo editor visual. As classes de posicao antigas permanecem
   intactas e continuam sendo usadas quando editor_config estiver vazio. */
.premium-hero__copy--visual {
  top: var(--full-banner-card-y-desktop);
  right: auto;
  bottom: auto;
  left: var(--full-banner-card-x-desktop);
  z-index: var(--full-banner-card-z, 3);
  width: var(--full-banner-card-width-desktop);
  height: var(--full-banner-card-height-desktop);
  max-width: none;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  align-items: stretch;
  overflow: hidden;
  border: var(--full-banner-card-border-width, 0) solid var(--full-banner-card-border-color, #fff);
  border-radius: var(--full-banner-card-radius, 8px);
  padding: var(--full-banner-card-padding, 24px);
  background: var(--full-banner-card-background, rgba(255, 255, 255, .15));
  box-shadow: var(--full-banner-card-shadow, none);
  opacity: var(--full-banner-card-opacity, 1);
  transform: none;
}

.premium-hero__copy--visual .premium-hero__copy-title {
  width: 100%;
  color: var(--full-banner-title-color, #111827);
  font-family: var(--full-banner-title-font, Inter, system-ui, sans-serif);
  font-size: var(--full-banner-title-size, 32px);
  font-weight: var(--full-banner-title-weight, 800);
  text-align: var(--full-banner-title-align, center);
}

.premium-hero__copy--visual .premium-hero__copy-subtitle {
  width: 100%;
  color: var(--full-banner-subtitle-color, #374151);
  font-family: var(--full-banner-subtitle-font, Inter, system-ui, sans-serif);
  font-size: var(--full-banner-subtitle-size, 14px);
  font-weight: var(--full-banner-subtitle-weight, 700);
  text-align: var(--full-banner-subtitle-align, center);
}

.premium-hero__copy--visual .premium-hero__copy-cta {
  align-self: var(--full-banner-button-align-self, center);
  min-height: 0;
  border: var(--full-banner-button-border-width, 0) solid var(--full-banner-button-border-color, transparent);
  border-radius: var(--full-banner-button-radius, 8px);
  padding: var(--full-banner-button-padding-y, 12px) var(--full-banner-button-padding-x, 22px);
  background: var(--full-banner-button-background, #ea580c);
  color: var(--full-banner-button-text-color, #fff);
  font-family: var(--full-banner-button-font, Inter, system-ui, sans-serif);
  font-size: var(--full-banner-button-size, 12px);
  font-weight: var(--full-banner-button-weight, 800);
}

.premium-hero__copy--visual .premium-hero__copy-cta:hover,
.premium-hero__copy--visual .premium-hero__copy-cta:focus-visible {
  background: var(--full-banner-button-hover-background, #c2410c);
  color: var(--full-banner-button-hover-color, #fff);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .premium-hero__copy--visual {
    top: var(--full-banner-card-y-tablet);
    left: var(--full-banner-card-x-tablet);
    width: var(--full-banner-card-width-tablet);
    height: var(--full-banner-card-height-tablet);
  }
}

@media (max-width: 767px) {
  .premium-hero__copy--visual {
    top: var(--full-banner-card-y-mobile);
    right: auto;
    bottom: auto;
    left: var(--full-banner-card-x-mobile);
    width: var(--full-banner-card-width-mobile);
    height: var(--full-banner-card-height-mobile);
    max-height: none;
    min-height: 0;
    padding: var(--full-banner-card-padding, 24px);
    transform: none;
  }

  .premium-hero__copy--visual .premium-hero__copy-title {
    font-size: var(--full-banner-title-size, 32px);
  }

  .premium-hero__copy--visual .premium-hero__copy-subtitle {
    font-size: var(--full-banner-subtitle-size, 14px);
  }

  .premium-hero__copy--visual .premium-hero__copy-cta {
    padding: var(--full-banner-button-padding-y, 12px) var(--full-banner-button-padding-x, 22px);
  }
}

@media (hover: none) {
  .premium-hero__cta:hover {
    transform: none;
  }

  .premium-hero__toggle {
    opacity: .82;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-hero *,
  .premium-hero *::before,
  .premium-hero *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .premium-hero__slide,
  [data-hero-layer] {
    filter: none !important;
    transform: none !important;
  }

  .premium-hero__image {
    transform: none !important;
  }

  .premium-hero__particles {
    display: none;
  }
}