/* ============================================================
   VISÃO 33 — estilos que o Tailwind (via CDN) não cobre
   ============================================================ */

/* extra utilities */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ══════════════════════════════════════════════════════════
   HERO / SLIDER PRINCIPAL (página inicial)
   As classes .hero-slide, .hero-slide-img e .slider-dot são
   geridas por assets/js/slider.js.

   As imagens ficam em posição absoluta, umas sobre as outras, e
   a altura vem da secção (.hero-full) — o texto vive fora dos
   slides, num único bloco que o JS atualiza.
   ══════════════════════════════════════════════════════════ */
.hero-full{
  min-height:max(560px, calc(100svh - var(--header-h, 108px)));
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:0;
  transition:opacity .7s ease, visibility 0s linear .7s;
}

.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:1;
  transition:opacity .7s ease, visibility 0s;
}

.hero-slide-img{
  transform:scale(1.02);
  transform-origin:center;
  will-change:transform;
}

/* Movimento lento da imagem do slide ativo */
.hero-slide.is-active .hero-slide-img.is-kenburns{
  animation:heroKenBurns 12s ease-out forwards;
}

@keyframes heroKenBurns{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.10); }
}

/* ── Indicadores (pontos) ── */
.slider-dot{
  width:28px;
  height:4px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.32);
  cursor:pointer;
  transition:background-color .25s ease, width .25s ease;
}

.slider-dot:hover{ background:rgba(255,255,255,.6); }
.slider-dot.is-on{ background:var(--gold-light,#C9A24A); width:40px; }

.slider-dot:focus-visible{
  outline:2px solid var(--gold-light,#C9A24A);
  outline-offset:3px;
}

/* ── Véu de legibilidade sobre as fotografias ── */
.hero-scrim{
  background:
    linear-gradient(90deg, rgba(11,11,11,.94) 0%, rgba(11,11,11,.78) 42%, rgba(11,11,11,.30) 100%),
    linear-gradient(0deg, rgba(11,11,11,.85) 0%, rgba(11,11,11,0) 55%);
}

/* ── Setas laterais ── */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:30;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(11,11,11,.35);
  color:#fff;
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hero-arrow:hover{
  background:var(--gold-light,#C9A24A);
  border-color:var(--gold-light,#C9A24A);
  color:#0B0B0B;
}
.hero-arrow:focus-visible{
  outline:2px solid var(--gold-light,#C9A24A);
  outline-offset:3px;
}
.hero-arrow--prev{ left:12px; }
.hero-arrow--next{ right:12px; }
@media (min-width:768px){
  .hero-arrow--prev{ left:24px; }
  .hero-arrow--next{ right:24px; }
}

/* ── Botão discreto de pausa/retoma ── */
.hero-toggle{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:transparent;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hero-toggle:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.hero-toggle:focus-visible{
  outline:2px solid var(--gold-light,#C9A24A);
  outline-offset:3px;
}

/* Com movimento reduzido: sem zoom e sem transições */
@media (prefers-reduced-motion: reduce){
  .hero-slide,
  .hero-slide.is-active{ transition:none; }
  .hero-slide-img,
  .hero-slide.is-active .hero-slide-img.is-kenburns{
    animation:none;
    transform:none;
  }
}

/* ── Faixa de parceiros ── */
.parceiro-slot img{ max-width:100%; }