/* =============================================================================
   ONCARD — banners do topo (substitui o #top quando há banners no ar)
   Prefixo ocb- para não conflitar com o main.css nem com o Bootstrap.
   ========================================================================== */

/* O menu do site é fixo: o espaço acima do banner é ajustado pelo banners.js
   à altura real do menu. Este valor é só o ponto de partida. */
.wrapper.oncard-banners { padding: 108px 0 0 0 !important; background: #111; box-shadow: none; }

.ocb { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; background: #111; color: #fff; text-shadow: none; }
.ocb__trilho { display: grid; aspect-ratio: 1920 / 700; max-height: 78vh; width: 100%; }
@media (max-width: 736px) {
    .ocb__trilho { aspect-ratio: 1 / 1; max-height: none; }
    .ocb--retrato .ocb__trilho { aspect-ratio: 4 / 5; }
}

.ocb__slide {
    grid-area: 1 / 1; position: relative; overflow: hidden;
    opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s;
}
.ocb__slide.is-ativo { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; z-index: 1; }
.ocb__slide picture, .ocb__slide img { display: block; width: 100%; height: 100%; }
.ocb__slide img { object-fit: cover; }

/* Escurecimento para o texto ficar legível sobre qualquer foto */
.ocb__sombra { position: absolute; inset: 0; pointer-events: none; --ocb-escurecer: .3; }
.ocb__sombra--esquerda { background: linear-gradient(90deg, rgba(0,0,0,calc(var(--ocb-escurecer) + .25)) 0%, rgba(0,0,0,var(--ocb-escurecer)) 45%, rgba(0,0,0,0) 80%); }
.ocb__sombra--direita  { background: linear-gradient(270deg, rgba(0,0,0,calc(var(--ocb-escurecer) + .25)) 0%, rgba(0,0,0,var(--ocb-escurecer)) 45%, rgba(0,0,0,0) 80%); }
.ocb__sombra--centro   { background: rgba(0,0,0,var(--ocb-escurecer)); }

.ocb__conteudo {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: min(560px, 82%); padding: 0 6%; box-sizing: content-box;
    text-align: left; z-index: 2;
}
.ocb__conteudo--esquerda { left: 0; }
.ocb__conteudo--direita  { right: 0; text-align: right; }
.ocb__conteudo--centro   { left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 0; }

.ocb__titulo {
    margin: 0 0 .35em; color: #fff !important; font-weight: 800; letter-spacing: -.01em;
    font-size: clamp(1.6rem, 3.6vw, 3.2rem); line-height: 1.08; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.ocb__texto { margin: 0 0 1.1em; font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.45; color: rgba(255,255,255,.92); }
.ocb__botao.button { margin-top: 0; top: 0 !important; }

/* Banner sem botão: o banner inteiro é clicável */
.ocb__link-total { position: absolute; inset: 0; z-index: 3; }

/* Setas */
.ocb__seta {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; margin: 0;
    background: rgba(255,255,255,.18); color: #fff; font-size: 34px; line-height: 44px;
    backdrop-filter: blur(4px); cursor: pointer; transition: background .2s;
}
.ocb__seta:hover, .ocb__seta:focus-visible { background: rgba(255,255,255,.35); }
.ocb__seta--anterior { left: 18px; }
.ocb__seta--proxima { right: 18px; }

/* Pontos e pausa */
.ocb__controles {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
    display: flex; align-items: center; gap: 12px;
    padding: 6px 12px; border-radius: 20px; background: rgba(0,0,0,.28); backdrop-filter: blur(4px);
}
.ocb__pontos { display: flex; gap: 8px; align-items: center; }
.ocb__ponto {
    width: 9px; height: 9px; border-radius: 5px; border: 0; padding: 0; margin: 0;
    background: rgba(255,255,255,.5); cursor: pointer; transition: width .25s, background .25s;
}
.ocb__ponto.is-ativo { width: 26px; background: #00A651; }
.ocb__pausa {
    border: 0; background: none; color: #fff; padding: 0; margin: 0; width: 18px; height: 18px;
    font-size: 10px; letter-spacing: -2px; cursor: pointer; opacity: .85;
}
.ocb__seta:focus-visible, .ocb__ponto:focus-visible, .ocb__pausa:focus-visible, .ocb__botao:focus-visible {
    outline: 3px solid #fff; outline-offset: 2px;
}

@media (max-width: 736px) {
    .ocb__seta { display: none; } /* no celular, troca arrastando */
    .ocb__conteudo, .ocb__conteudo--direita, .ocb__conteudo--esquerda {
        left: 0; right: 0; top: auto; bottom: 54px; transform: none;
        width: auto; padding: 0 20px; text-align: left;
    }
    .ocb__conteudo--centro { text-align: center; }
    .ocb__titulo { font-size: 1.55rem; }
    .ocb__texto { font-size: .98rem; margin-bottom: .9em; }
    .ocb__botao.button { width: auto !important; display: inline-block; padding: 0 1.4em; line-height: 2.6em; font-size: .95em; }
    .ocb__sombra--esquerda, .ocb__sombra--direita, .ocb__sombra--centro {
        background: linear-gradient(0deg, rgba(0,0,0,calc(var(--ocb-escurecer) + .35)) 0%, rgba(0,0,0,var(--ocb-escurecer)) 45%, rgba(0,0,0,0) 75%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ocb__slide, .ocb__slide.is-ativo, .ocb__ponto { transition: none; }
}

/* O main.css aplica estilos globais em todo <button> (fundo verde no hover,
   "top: 1px" ao clicar). Aqui eles são neutralizados para os controles do banner. */
.ocb__seta:active { top: 50%; }
.ocb__ponto:hover { background: rgba(255,255,255,.8); }
.ocb__ponto.is-ativo:hover { background: #00A651; }
.ocb__pausa:hover, .ocb__pausa:active { background: none; top: 0; }