/* ============================================================
   VITRINE DO TOPO DA HOME (04/11/2026)
   Quatro cartões ao lado do casal dançando: próximo evento, ranking, último resultado e os
   números do Dance Score. No computador largo ficam dos dois lados do símbolo, flutuando; abaixo
   disso viram uma faixa de arrastar logo abaixo dos botões. Ver js/vitrine-hero.js.
   ============================================================ */
.ds-hv { display: none; }
.ds-hv.is-pronto { display: block; }

.ds-hv-card {
    display: flex; flex-direction: column; gap: 8px;
    width: 100%; padding: 14px 16px; border-radius: 16px; text-align: left;
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(216, 154, 31, .35);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ds-hv-card:hover, .ds-hv-card:focus-visible {
    color: #fff; border-color: var(--ds-dourado);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(216, 154, 31, .4);
    transform: translateY(-3px);
}
.ds-hv-rotulo { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--ds-dourado-claro); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.ds-hv-rotulo i { font-size: 13px; }
.ds-hv-linha { display: flex; gap: 12px; align-items: center; }
.ds-hv-logo { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .7); background: var(--ds-azul-dark); }
.ds-hv-titulo { font-weight: 700; font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-hv-sub { font-size: 12.5px; color: #b8c6d9; }
.ds-hv-rodape { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #d7deea; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 8px; margin-top: 2px; }
.ds-hv-rodape b { color: var(--ds-dourado-claro); }
.ds-hv-rodape i { color: var(--ds-dourado-claro); }

/* Contagem regressiva do próximo evento */
.ds-hv-contagem { text-align: center; flex: 0 0 auto; min-width: 54px; }
.ds-hv-contagem b { display: block; font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--ds-dourado-claro); }
.ds-hv-contagem span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b8c6d9; }

/* Pódio em miniatura do ranking: o 1º no meio, maior */
.ds-hv-podio { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding-top: 4px; }
.ds-hv-pessoa { text-align: center; width: 64px; }
.ds-hv-foto { position: relative; display: inline-block; }
.ds-hv-foto img, .ds-hv-foto .ds-hv-ini {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center;
    border: 2px solid #C0C0C0; background: var(--ds-azul-mid); color: #fff; font-weight: 800;
}
.ds-hv-pos-1 .ds-hv-foto img, .ds-hv-pos-1 .ds-hv-foto .ds-hv-ini { width: 58px; height: 58px; border-color: #FFD700; box-shadow: 0 0 0 3px rgba(255, 215, 0, .25); }
.ds-hv-pos-3 .ds-hv-foto img, .ds-hv-pos-3 .ds-hv-foto .ds-hv-ini { border-color: #CD7F32; }
.ds-hv-foto em {
    position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
    font-style: normal; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    background: #C0C0C0; color: #050F1E; border: 2px solid var(--ds-azul);
}
.ds-hv-pos-1 .ds-hv-foto em { background: #FFD700; }
.ds-hv-pos-3 .ds-hv-foto em { background: #CD7F32; }
.ds-hv-pessoa small { display: block; margin-top: 6px; font-size: 11.5px; color: #d7deea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Números */
.ds-hv-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.ds-hv-numeros b { display: block; font-family: var(--font-serif); font-size: 24px; line-height: 1.1; color: #fff; }
.ds-hv-numeros span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b8c6d9; }
.ds-hv-cta {
    display: block; text-align: center; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 13px;
    background: var(--ds-dourado); color: var(--ds-azul-dark);
}

/* ---------- Computador largo: dos dois lados do símbolo, flutuando ---------- */
@media (min-width: 1280px) {
    .ds-hv.is-pronto {
        position: absolute; inset: 0; z-index: 2; pointer-events: none;
        display: grid; grid-template-columns: 1fr 760px 1fr; align-items: center;
        padding: 100px 28px 40px;
    }
    .ds-hv-faixa { display: contents; }
    .ds-hv-col { display: flex; flex-direction: column; gap: 16px; width: min(290px, 100%); pointer-events: auto; }
    .ds-hv-col-esq { grid-column: 1; justify-self: end; margin-right: 8px; }
    .ds-hv-col-dir { grid-column: 3; justify-self: start; margin-left: 8px; }
    /* As silhuetas laterais saem: os cartões ocupam esse espaço. */
    .ds-hv.is-pronto ~ .ds-hero-decor, .ds-hero:has(.ds-hv.is-pronto) .ds-hero-decor { display: none; }
    .ds-hv-col > .ds-hv-card { animation: dsHvFlutua 7s ease-in-out infinite; }
    .ds-hv-col > .ds-hv-card:nth-child(2) { animation-delay: -3.5s; }
    .ds-hv-col-dir > .ds-hv-card { animation-delay: -1.7s; }
    .ds-hv-col-dir > .ds-hv-card:nth-child(2) { animation-delay: -5.2s; }
    .ds-hv-col > .ds-hv-card:hover { animation-play-state: paused; }
}
@keyframes dsHvFlutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* ---------- Abaixo disso: faixa de arrastar embaixo dos botões ---------- */
@media (max-width: 1279.98px) {
    .ds-hero { flex-direction: column; }
    .ds-hv.is-pronto { width: 100%; max-width: 1100px; margin: 28px auto 0; }
    .ds-hv-faixa {
        display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-inline: 4px;
    }
    .ds-hv-col { display: contents; }
    .ds-hv-card { flex: 0 0 260px; scroll-snap-align: start; }
}
@media (max-width: 640px) {
    .ds-hv.is-pronto { margin-top: 22px; }
    .ds-hv-faixa { margin: 0 -20px; padding: 4px 20px 12px; scroll-padding-inline: 20px; }
    .ds-hv-card { flex-basis: 78%; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-hv-col > .ds-hv-card { animation: none !important; }
}