/* Viewport SEM fundo/sombra (deixa transparente) */
.pkp_page_index .hero-viewport{
  overflow: hidden;
  border-radius: 0;       /* sem raio aqui */
  background: transparent;
  box-shadow: none;       /* <- remove a sombra fixa */
}

/* Cada slide vira o “card” com sombra e raio */
.pkp_page_index .hero-slide{
  flex: 0 0 100%;
  margin: 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);   /* <- sombra agora aqui */
}

/* Imagem ajusta a altura naturalmente */
.pkp_page_index .hero-slide img{
  display: block;
  width: 100%;
  height: auto;           /* a borda/sombra acompanha a altura real */
  object-fit: contain;    /* troque p/ 'cover' se quiser preencher sem faixas */
}
.pkp_page_index .hero-track{
  display: flex;
  animation: hero-autoplay 10s infinite;  /* 2 slides → 10s total = 5s por slide */
  will-change: transform;
}

/* 0–47%: slide 1; 50–97%: slide 2; os 3% são a transição */
@keyframes hero-autoplay{
  0%, 47%   { transform: translateX(0%); }
  50%, 97%  { transform: translateX(-100%); }
  100%      { transform: translateX(0%); }
}

/* pausa no hover (opcional) */
.pkp_page_index .hero-carousel:hover .hero-track{ animation-play-state: paused; }
/* Espaçamento da área azul superior */
.pkp_page_index .post-hero-banner{
  margin-top: 64px;   /* ajuste fino aqui */
}

/* Opcional: menor no mobile */
@media (max-width: 768px){
  .pkp_page_index .post-hero-banner{
    margin-top: 24px;
  }
}







/* zera respiro e evita fundo azul na coluna */
.hero-section .iphone-wrap{
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: transparent !important;
}

/* card da imagem (sem aspect-ratio) */
.hero-side-card{
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

/* a imagem dita a altura: sem corte, sem faixas */
.hero-side-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* opcional: evita “linha” enquanto carrega lento */
.hero-side-card:has(img){ min-height: 120px; }

@media (max-width: 991.98px){
  .hero-side-card{ margin-top: 24px; max-width: 520px; }
}