.hero-news-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 650ms ease, visibility 0s linear 650ms;
}

.hero-news-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 650ms ease;
}

.hero-news-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-news-dot[aria-current="true"] {
  width: 2.5rem;
  background: #cc0000;
}

.hero-news-controls[hidden] {
  display: none;
}

@media (max-width: 767px) {
  #inicio {
    min-height: max(760px, 95svh);
    background: #0a0a0e;
  }

  #inicio .hero-news-slide {
    display: block;
  }

  #inicio .hero-news-slide img {
    top: 96px;
    bottom: auto;
    width: 100%;
    height: clamp(180px, 53vw, 220px);
    object-fit: contain;
    object-position: center !important;
  }

  #inicio .hero-news-slide > div[aria-hidden="true"] {
    background: linear-gradient(to bottom, #0a0a0e 0%, transparent 17%, transparent 33%, #0a0a0e 43%, #0a0a0e 100%);
  }

  #inicio .hero-news-slide > .relative {
    margin-top: clamp(260px, 75vw, 305px);
    padding-top: 0;
    padding-bottom: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-news-slide {
    transition: none;
  }
}

/* Noticias do Marketing (16/10, Claude) */
#hero-news {
  touch-action: pan-y;
}

/* Arrastando com o dedo: o quadro atual e o vizinho ficam visiveis e andam juntos. */
.hero-news-slide.hero-arrastando {
  opacity: 1;
  visibility: visible;
  transition: none;
  will-change: transform;
}

/* Texto longo nao vaza do banner: ate 3 linhas. O titulo nao leva corte
   (o overflow comia a perna do g e a cedilha); o painel limita a 90 letras. */
.hero-news-destaque h2 + p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-news-destaque.sem-imagem {
  background: radial-gradient(120% 90% at 85% 15%, rgba(204, 0, 0, .35), transparent 60%), #1a0507;
}

@media (max-width: 767px) {
  /* Celular: sem setas, troca arrastando com o dedo; ficam só as bolinhas.
     Com notícias, o banner cresce um pouco para as bolinhas ficarem abaixo do
     botão e acima do cartão de números, que sobe 64px (-mt-16) por cima do banner. */
  #inicio.hero-varios {
    min-height: max(820px, 100svh);
  }
  #inicio.hero-varios .hero-news-controls {
    bottom: 76px;
  }
  #inicio .hero-news-controls > button {
    display: none;
  }
  #inicio .hero-news-destaque.sem-imagem > div[aria-hidden="true"] {
    background: none;
  }
}

/* Computador e tablet (16/10, Claude): com noticias, o texto e o botao ficam presos acima das setas.
   Antes o texto era centralizado na altura e, numa noticia longa, o botao descia por cima das setas
   (que ficam fixas a 7rem do fundo). Agora o bloco encosta embaixo e reserva 12.5rem para elas. */
@media (min-width: 768px) {
  #inicio.hero-varios .hero-news-slide {
    align-items: flex-end;
  }
  #inicio.hero-varios .hero-news-slide > .relative {
    padding-top: 7rem;
    padding-bottom: 9.5rem;
  }
  /* 16/10 tarde: setas quase encostando no bloco preto (que sobe 4rem por cima do banner) e altura minima
     para a etiqueta nao ficar embaixo do logo em tela baixa */
  #inicio.hero-varios .hero-news-controls {
    bottom: 5.25rem;
  }
  #inicio.hero-varios {
    min-height: max(95vh, 640px);
  }
}

/* Proposta 1 aprovada por Pedro em 21/10/2026: foto e texto compactos. */
@media (max-width: 767px) {
  #inicio, #inicio.hero-varios {
    --hero-photo-height: clamp(160px, 44vw, 210px);
    min-height: 0;
    height: auto;
    padding: 96px 0 0;
    background: #0a0a0e;
  }
  #inicio #hero-news {
    position: relative;
    inset: auto;
    display: grid;
  }
  #inicio .hero-news-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-width: 0;
    display: block;
  }
  #inicio .hero-news-slide img {
    top: 0;
    height: var(--hero-photo-height);
    object-fit: cover;
  }
  #inicio .hero-news-slide > div[aria-hidden="true"] {
    bottom: auto;
    height: calc(var(--hero-photo-height) + 1px);
    background: linear-gradient(to bottom, transparent 65%, #0a0a0e 100%);
  }
  #inicio .hero-news-slide > .relative {
    margin-top: var(--hero-photo-height);
    padding: 12px 24px 28px;
    text-align: left;
  }
  #inicio.hero-varios .hero-news-slide > .relative { padding-bottom: 64px; }
  #inicio .hero-news-slide .relative > p:first-child {
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 10px;
    letter-spacing: .18em;
    line-height: 1.5;
  }
  #inicio .hero-news-slide :is(h1,h2) {
    font-size: 28px;
    line-height: 1.18;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
  }
  #inicio .hero-news-destaque h2 { font-size: 22px; line-height: 1.22; }
  #inicio .hero-news-slide :is(h1,h2) + p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  #inicio .hero-news-slide .relative > a {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
  }
  #inicio.hero-varios .hero-news-controls { bottom: 22px; }
  #inicio + section {
    margin-top: 0;
    padding: 18px 0;
    border-radius: 16px;
  }
  #inicio + section > .grid { gap: 0; padding: 0 20px; }
  #inicio + section .grid > div { padding: 8px; border: 0; }
  #inicio + section .grid > div:nth-child(odd) { border-right: 1px solid #ffffff20; }
  #inicio + section h3 { font-size: 28px; line-height: 1.15; margin-bottom: 4px; }
  #inicio + section p { font-size: 10px; line-height: 1.4; letter-spacing: .04em; }
  #inicio .hero-copy-desktop { display: none; }
}
@media (min-width: 768px) {
  #inicio .hero-copy-mobile { display: none; }
}

/* 21/10/2026: enquadramento aprovado, fachada inteira atrás do texto. */
@media (max-width: 767px) {
  #inicio, #inicio.hero-varios { --hero-photo-height: clamp(330px, 93vw, 420px); }
  #inicio .hero-news-slide {
    background-color: #0a0a0e;
  }
  #inicio .hero-news-slide img {
    height: var(--hero-photo-height);
  }
  #inicio .hero-news-slide:not(.hero-news-destaque) img {
    object-position: 42% top !important;
  }
  #inicio .hero-news-slide > div[aria-hidden="true"] {
    height: 100%;
    bottom: 0;
    background:
      linear-gradient(to bottom, transparent 24%, rgba(10,10,14,.12) 38%, rgba(10,10,14,.80) var(--hero-photo-height), #0a0a0e calc(var(--hero-photo-height) + 28px)),
      linear-gradient(to right, rgba(0,0,0,.35), transparent 70%);
  }
  #inicio .hero-news-slide > .relative {
    margin-top: clamp(176px, 48vw, 224px);
    padding-top: 0;
  }
  #inicio.hero-varios .hero-news-slide > .relative { padding-bottom: 48px; }
  #inicio .hero-news-slide .relative > p:first-child::before {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin-bottom: 12px;
    border-radius: 2px;
    background: #cc0000;
  }
  #inicio .hero-news-slide:not(.hero-news-destaque) h1 {
    max-width: 320px;
    font-size: 30px;
  }
  #inicio .hero-news-slide:not(.hero-news-destaque) h1 > span {
    white-space: nowrap;
    font-size: clamp(25px, 7.5vw, 30px);
  }
  #inicio + section {
    border-radius: 0;
    border-top: 0;
    box-shadow: none;
  }
  #inicio + section .grid > div:nth-child(-n+2) {
    border-bottom: 1px solid #ffffff20;
  }
  #inicio .hero-news-destaque.sem-imagem > div[aria-hidden="true"] {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.35));
  }
}

/* Recorte horizontal compartilhado com o Portal do Cliente, somente no celular. */
@media (max-width: 767px) {
  #inicio .hero-news-slide.hero-news-destaque img {
    object-position: var(--site-mobile-x, 50%) var(--site-mobile-y, 50%) !important;
  }
}

/* 22/10/2026 (Claude): celular - o botao do banner fica sempre na mesma altura em todos os slides.
   O bloco (texto + botao) encosta embaixo do slide; o espaco que sobra num texto curto fica acima, sobre a foto,
   e nao entre o texto e o botao. */
@media (max-width: 767px) {
  #inicio .hero-news-slide { display: flex; flex-direction: column; }
  #inicio .hero-news-slide > .relative { flex: none; margin-top: auto; padding-top: clamp(176px, 48vw, 224px); }
}