/*============= HERO SLIDER (gerenciado pelo painel) ===============*/
/*
 * Reaproveita integralmente o layout do .hero1-section-area (main.css).
 * Este arquivo só adiciona o empilhamento dos slides, as animações e os controles.
 * Escrito mobile-first: estilos base = celular; media queries min-width = telas maiores.
 */

.hs {
  --hs-accent: #e35b1c;
  --hs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hs-ease-io: cubic-bezier(0.77, 0, 0.18, 1);
  --hs-offset: 0.45s;          /* atraso de entrada ao trocar (deixa o slide anterior sair) */
  --hs-interval: 7s;
}

.hs.is-first {
  --hs-offset: 0.1s;           /* primeira exibição entra logo */
}

/* Com JS, esconde o conteúdo até o slider iniciar (evita "piscar" antes da animação).
   Sem JS, o 1º slide aparece estático normalmente. */
.hs-js .hs:not(.is-ready) .hs-track,
.hs-js .hs:not(.is-ready) .hs-controls-wrap {
  opacity: 0;
}

.hs-js .hs:not(.is-ready) .hs-bg-inner {
  transform: scale(1.12) !important;
}

/*----- Fundos (um por slide, crossfade + Ken Burns) -----*/
.hs-bgs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hs-bg {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  transition: none;
  will-change: opacity, clip-path, transform;
}

.hs-bg-inner {
  position: absolute;
  inset: 0;
  
}

.hs-bg .header-bg1 {
  z-index: auto;
}

.hs-bg.is-active {
  visibility: visible;
  opacity: 1;
  z-index: 2;
  
}

.hs-bg.is-leaving {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.hs-bg.is-active .hs-bg-inner,
.hs-bg.is-leaving .hs-bg-inner {
  
}

/* Estado inicial de cada efeito (slides que não estão ativos nem saindo) */
.hs-bg[data-effect="curtain"],
.hs-bg[data-effect="circle"],
.hs-bg[data-effect="slide"] {
  opacity: 1;
}

.hs-bg[data-effect="curtain"]:not(.is-active):not(.is-leaving) {
  clip-path: inset(0 0 0 100%);
}
.hs[data-dir="prev"] .hs-bg[data-effect="curtain"]:not(.is-active):not(.is-leaving) {
  clip-path: inset(0 100% 0 0);
}
.hs-bg[data-effect="curtain"].is-active {
  clip-path: inset(0 0 0 0);
}

.hs-bg[data-effect="circle"]:not(.is-active):not(.is-leaving) {
  clip-path: circle(0% at 75% 50%);
}
.hs-bg[data-effect="circle"].is-active {
  clip-path: circle(150% at 75% 50%);
}

.hs-bg[data-effect="slide"]:not(.is-active):not(.is-leaving) {
  transform: translateX(100%);
}
.hs[data-dir="prev"] .hs-bg[data-effect="slide"]:not(.is-active):not(.is-leaving) {
  transform: translateX(-100%);
}

.hs-bg[data-effect="zoom"]:not(.is-active):not(.is-leaving) {
  transform: scale(1.25);
}

/*----- Conteúdo: todos os slides no mesmo "slot" do grid (altura estável, sem saltos) -----*/
.hs-track {
  display: grid;
  touch-action: pan-y;
}

.hs-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  pointer-events: none;
}

.hs-slide.is-active {
  visibility: visible;
  pointer-events: auto;
}

.hs-slide.is-leaving {
  visibility: visible;
}

/* Título dos slides 2+ é <h2> (SEO: um único <h1>); mesmo visual do h1 original */
.hs .heading1 h2.hs-title {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s32);
  font-style: normal;
  font-weight: var(--ztc-weight-bold);
  line-height: 40px;
  text-transform: uppercase;
}

/*----- Animações de entrada (camadas escalonadas, estilo Revolution Slider) -----*/
.hs .hs-anim {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(6px);
  transition: opacity 0.8s ease, transform 0.9s var(--hs-ease), filter 0.8s ease;
}

.hs .hs-btn {
  display: inline-block;
}

.hs .hs-tag {
  transform: translate3d(-40px, 0, 0);
  letter-spacing: 0.25em;
  transition: opacity 0.8s ease, transform 0.9s var(--hs-ease), filter 0.8s ease, letter-spacing 1.2s var(--hs-ease);
}

.hs .hs-slide.is-active .hs-anim {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(var(--hs-offset) + var(--d, 0s));
}

.hs .hs-slide.is-active .hs-tag {
  letter-spacing: normal;
}

/* Título: cada palavra sobe de dentro de uma "máscara" */
.hs .hs-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hs .hs-w > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0) rotate(6deg);
  transform-origin: left bottom;
  transition: transform 1s var(--hs-ease);
}

.hs .hs-slide.is-active .hs-w > span {
  transform: none;
  transition-delay: calc(var(--hs-offset) + 0.2s + var(--i) * 0.07s);
}

/* Imagem principal: entrada conforme o efeito escolhido no painel */
.hs .hs-media {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.1s ease, transform 1.3s var(--hs-ease), clip-path 1.3s var(--hs-ease-io), filter 1.1s ease;
}

.hs .hs-slide[data-effect="zoom"] .hs-media {
  transform: scale(1.2);
  filter: blur(10px);
}

.hs .hs-slide[data-effect="curtain"] .hs-media {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 100%);
}
.hs[data-dir="prev"] .hs-slide[data-effect="curtain"] .hs-media {
  clip-path: inset(0 100% 0 0);
}

.hs .hs-slide[data-effect="circle"] .hs-media {
  opacity: 1;
  transform: none;
  clip-path: circle(0% at 50% 60%);
}

.hs .hs-slide[data-effect="slide"] .hs-media {
  transform: translate3d(120px, 0, 0);
}
.hs[data-dir="prev"] .hs-slide[data-effect="slide"] .hs-media {
  transform: translate3d(-120px, 0, 0);
}

.hs .hs-slide.is-active .hs-media {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(var(--hs-offset) + 0.15s);
}
.hs .hs-slide.is-active[data-effect="curtain"] .hs-media {
  clip-path: inset(0 0 0 0);
}
.hs .hs-slide.is-active[data-effect="circle"] .hs-media {
  clip-path: circle(100% at 50% 60%);
}

/* Flutuação sutil enquanto o slide está ativo */
.hs .hs-slide.is-active .hs-media img {
  
}

@keyframes hs-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}

/*----- Saída (rápida, para dar lugar ao próximo) -----*/
.hs .hs-slide.is-leaving .hs-anim {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  filter: blur(4px);
  transition: opacity 0.45s ease, transform 0.5s ease, filter 0.45s ease;
  transition-delay: 0s;
}

.hs .hs-slide.is-leaving .hs-w > span {
  transform: translate3d(0, -110%, 0);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.8, 0.3);
  transition-delay: calc(var(--i) * 0.02s);
}

.hs .hs-slide.is-leaving .hs-media {
  opacity: 0;
  transform: scale(0.97);
  clip-path: none;
  filter: none;
  transition: opacity 0.5s ease, transform 0.6s ease;
  transition-delay: 0s;
}

/*----- Controles -----*/
.hs-controls-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 5;
  pointer-events: none;
}

.hs-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.hs-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: 14px;
  font-weight: var(--ztc-weight-bold);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.hs-counter .hs-total {
  opacity: 0.55;
}

.hs-bar {
  position: relative;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.hs-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--hs-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.hs.is-running .hs-bar-fill {
  animation: hs-progress var(--hs-interval) linear forwards;
}

.hs.is-paused .hs-bar-fill {
  animation-play-state: paused;
}

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

.hs-dots {
  display: flex;
  align-items: center;
}

.hs-dot,
.hs-arrow,
.hs-toggle {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ztc-text-text-1);
}

/* Área de toque de 32px, bolinha visual de 8px */
.hs-dot {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hs-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
  transition: width 0.4s var(--hs-ease), background 0.3s ease;
}

.hs-dot.is-active::before {
  width: 24px;
  background: var(--hs-accent);
}

.hs-arrow {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hs-arrow:hover {
  background: var(--hs-accent);
  border-color: var(--hs-accent);
}

.hs-prev:hover { transform: translateX(-3px); }
.hs-next:hover { transform: translateX(3px); }

.hs-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.hs-toggle:hover { opacity: 1; }

.hs-toggle .hs-icon-play { display: none; }
.hs.is-stopped .hs-toggle .hs-icon-play { display: block; }
.hs.is-stopped .hs-toggle .hs-icon-pause { display: none; }

.hs-dot:focus-visible,
.hs-arrow:focus-visible,
.hs-toggle:focus-visible {
  outline: 2px solid var(--hs-accent);
  outline-offset: 2px;
}

/*----- Tablet em diante -----*/
@media (min-width: 768px) {
  .hs .heading1 h2.hs-title {
    font-size: var(--ztc-font-size-font-s60);
    line-height: 70px;
  }

  .hs-controls-wrap {
    bottom: 20px;
  }

  .hs-controls {
    gap: 14px;
  }

  .hs-arrow {
    display: inline-flex;
  }

  .hs-bar {
    width: 110px;
  }
}

/*----- Desktop -----*/
@media (min-width: 992px) {
  .hs-controls-wrap {
    bottom: 44px;
  }
}

/*----- Acessibilidade: sem animações para quem prefere movimento reduzido -----*/
@media (prefers-reduced-motion: reduce) {
  .hs *,
  .hs *::before {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}