/* ---------- Hero em slides ----------
   Os slides ocupam a mesma célula da grade (a altura é a do maior); só o ativo aparece.
   Cada slide tem o seu fundo, com movimento lento; a troca é um cruzamento suave.
   As abas embaixo mostram o tempo até a próxima troca (barra que enche). */

.hero__fundos { position: absolute; inset: 0; overflow: hidden; }
.slide__bg {
  position: absolute; inset: 0; opacity: 0; transform-origin: 80% 40%;
  transition: opacity 1.2s var(--ease);
}
/* --foto (computador) e --foto-m (celular) chegam do slide cadastrado no painel */
.slide__bg { --img: var(--foto); }
.slide__bg.ativo { opacity: 1; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translateX(-1.5%); } }

.slide__bg--1 {
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--veil) 45%, transparent 80%),
    radial-gradient(60% 70% at 100% 0%, var(--glow) 0%, transparent 62%),
    var(--img, url('../img/site/bg-juliana.jpg')) right center / cover no-repeat;
}
.slide__bg--2 {
  background:
    radial-gradient(45% 60% at 82% 45%, var(--red-glow) 0%, transparent 70%),
    radial-gradient(40% 50% at 0% 100%, var(--red-soft) 0%, transparent 70%),
    linear-gradient(90deg, var(--ink) 0%, var(--veil) 55%, var(--veil-2) 100%),
    repeating-linear-gradient(115deg, transparent 0 46px, var(--red-soft) 46px 47px),
    var(--img, url('../img/site/bg-fami.jpg')) center / cover no-repeat;
}
.slide__bg--3 {
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--veil) 50%, var(--veil-2) 100%),
    radial-gradient(50% 60% at 78% 50%, var(--glow) 0%, transparent 70%),
    var(--img, url('../img/site/bg-hero.jpg')) center / cover no-repeat;
}

.hero__slides { position: relative; z-index: 1; display: grid; }
.slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s linear .8s; }
.slide.ativo { opacity: 1; visibility: visible; transition: opacity .8s var(--ease) .15s, visibility 0s; }

/* conteúdo entra em sequência a cada vez que o slide fica ativo */
.entra { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: 0s; }
.js .slide:not(.ativo) .entra, .js:not(.ready) .entra { opacity: 0; transform: translateY(22px); }
.ready .slide.ativo .entra { transition-delay: calc(var(--d, 0s) + .25s); }

/* ---------- Selo e contagem da promoção ---------- */

.selo-promo {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--f-mono); font-weight: 500; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); padding: 8px 14px;
}
.selo-promo .pulse { background: var(--ink); }

.contagem {
  position: relative; background: var(--veil); border: 1px solid var(--gold);
  padding: clamp(20px, 2.6vw, 30px); box-shadow: 0 0 0 1px var(--line-d), 0 40px 90px var(--shadow), 0 0 60px var(--glow-soft);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.contagem__rotulo { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.contagem__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.contagem__grade span {
  display: flex; flex-direction: column; align-items: center; padding: 12px 4px 10px;
  border: 1px solid var(--line-d); background: var(--ink);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.contagem__grade b { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; color: var(--gold); font-variant-numeric: tabular-nums; }
.contagem__lista { margin-top: 18px; }
.contagem__lista li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line-w); font-weight: 600; font-size: .95rem;
}
.contagem__lista em { font-style: normal; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.contagem__nota { margin-top: 12px; font-family: var(--f-mono); font-size: .66rem; color: var(--dim); }

/* ---------- Paciente modelo ---------- */

.ba--retrato { justify-self: center; width: min(100%, 360px); }
.ba--retrato .ba__stage { aspect-ratio: 391 / 621; }

/* ---------- Controles: setas e abas com barra de tempo ---------- */

.hero__ctrl { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.hero__seta {
  flex: none; width: 44px; height: 44px; border: 1px solid var(--line-d); background: var(--veil); color: var(--gold);
  font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color .25s, background .25s;
}
.hero__seta:hover { border-color: var(--gold); background: var(--graphite); }
.hero__abas { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aba {
  position: relative; min-height: 44px; padding: 10px 4px 12px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  transition: color .3s;
}
.aba::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-w); }
.aba i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--glow); }
.aba.ativo { color: var(--gold); }
/* --tempo: segundos por slide; padrão 4 s, e o painel pode mudar (conexao.js) */
.ready .aba.ativo i { animation: tempo var(--tempo, 4s) linear forwards; }
.hero.pausado .aba.ativo i { animation-play-state: paused; }
.aba.oculta { display: none; }
@keyframes tempo { to { transform: scaleX(1); } }

/* ---------- Black November em vermelho ---------- */

.selo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 22px; }
.selo-linha .selo-black { margin: 0; font-size: clamp(1.2rem, 2.6vw, 1.7rem); padding: 9px 20px 7px; }
.ready .slide.ativo .selo-black { animation: carimbo .7s cubic-bezier(.3, 1.6, .5, 1) .2s both, pulsoVermelho 1.8s ease-in-out 1.2s infinite; }
.ready .slide.ativo .selo-black::after { animation: reflexo 2.6s ease-in-out 1s infinite; }
.selo-ate {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-weight: 500; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--white);
}
.selo-ate .pulse { background: var(--red-hi); }

.slide--promo .contagem { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-line), 0 40px 90px var(--shadow), 0 0 60px var(--red-soft); }
.slide--promo .contagem__grade span { border-color: var(--red-line); }
.slide--promo .contagem__lista em { color: var(--red-hi); }
.aba[data-ir="1"].ativo { color: var(--red-hi); }
.aba[data-ir="1"] i { background: var(--red); box-shadow: 0 0 10px var(--red-glow); }

/* "Aproveite até" no quadro do slide: mesmo destaque do popup, animado quando o slide entra */
.contagem .pop__ate { margin: 4px 0 10px; }
.ready .slide.ativo .contagem .pop__ate b { animation: sobeTitulo .7s var(--ease) .5s both, folha 3s 1.4s ease-in-out infinite; }
.ready .slide.ativo .contagem .pop__ate b::after { animation: sublinha .7s ease-out 1s forwards; }
.ready .slide.ativo .contagem .pop__ate-rot { animation: sobeTitulo .6s var(--ease) .4s both; }

/* no celular cada slide tem a própria altura (empilhados, o mais alto deixava vão nos outros) */
@media (max-width: 700px) {
  .slide:not(.ativo) { display: none; }
}