/* =========================================================
   OCOHOST REVOLUTION SLIDER — v2.2
   Seletores alinhados com o HTML gerado pelo plugin:
   .cenatres-revolution  (raiz / swiper)
   .swiper-slide         (cada slide)
   .overlay              (escurecimento)
   .slide-content        (área de texto)
   .layer                (cada elemento animado)
   .slide-btn            (botão CTA)
========================================================= */

.cenatres-revolution,
.cenatres-revolution * {
    box-sizing: border-box;
}

/* =========================================================
   RAIZ — Fullwidth + altura padrão
   A altura pode ser sobrescrita via atributo style inline
   gerado pelo PHP (opção fullscreen / half / custom).
========================================================= */

.cenatres-revolution {
    /* Fullwidth: escapa de qualquer container pai */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    /* Altura padrão — sobrescrita pelo style inline quando o
       usuário configurar outra opção no admin */
    height: 70vh;
    min-height: 420px;

    overflow: hidden;
    background: #000;

    /* Garante que o slider sempre seja visível */
    display: block;
}

/* =========================================================
   SWIPER INTERNO
========================================================= */

.cenatres-revolution.swiper {
    width: 100%;
    height: 100%;
}

.cenatres-revolution .swiper-wrapper {
    height: 100%;
}

.cenatres-revolution .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    display: flex;
    align-items: center;
}

/* =========================================================
   MÍDIA: imagem, vídeo e iframe cobrem o slide inteiro
========================================================= */

.cenatres-revolution img,
.cenatres-revolution video,
.cenatres-revolution iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border: none;
    pointer-events: none;

    /* z-index 1 — abaixo do overlay e do conteúdo */
    z-index: 1;
}

/* =========================================================
   OVERLAY — escurecimento gradiente lateral
========================================================= */

.cenatres-revolution .overlay {
    position: absolute;
    inset: 0;

    /* z-index 2 — sobre a mídia, abaixo do conteúdo */
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, .82) 0%,
        rgba(0, 0, 0, .45) 45%,
        rgba(0, 0, 0, .12) 100%
    );

    pointer-events: none;
}

/* =========================================================
   CONTEÚDO (título + desc + botão)
========================================================= */

.cenatres-revolution .slide-content {
    position: relative;

    /* z-index 5 — sobre overlay e mídia */
    z-index: 5;

    width: 100%;
    max-width: 760px;

    padding: 0 7%;

    /* Flex vertical para empilhar layers + botão */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* =========================================================
   LAYERS — elementos animados (h2, p, .slide-btn)
   Começam invisíveis; o JS aplica a animação via style inline.
========================================================= */

.cenatres-revolution .layer {
    opacity: 0;

    animation-duration: 900ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease;

    will-change: transform, opacity;
}

/* =========================================================
   HEADINGS dentro do slide
========================================================= */

.cenatres-revolution h2,
.cenatres-revolution h3,
.cenatres-revolution h4 {
    margin: 0 0 16px;

    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;

    color: #fff;

    text-shadow: 0 3px 12px rgba(0, 0, 0, .45);
}

/* =========================================================
   PARÁGRAFOS dentro do slide
========================================================= */

.cenatres-revolution p {
    margin: 0 0 16px;

    line-height: 1.7;

    color: #fff;

    text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* =========================================================
   BOTÃO CTA — .slide-btn
========================================================= */

.cenatres-revolution .slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 20px;
    padding: 14px 32px;

    border: none;
    border-radius: 60px;

    background: #f18d3e;
    color: #fff !important;

    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;

    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;

    box-shadow: 0 10px 28px rgba(241, 141, 62, .38);

    cursor: pointer;
}

.cenatres-revolution .slide-btn:hover {
    transform: translateY(-4px);
    background: #ff9d50;
    box-shadow: 0 16px 36px rgba(241, 141, 62, .48);
}

/* =========================================================
   PAGINAÇÃO (bullets)
========================================================= */

.cenatres-revolution .swiper-pagination {
    bottom: 22px !important;
    z-index: 10;
}

.cenatres-revolution .swiper-pagination-bullet {
    width: 11px;
    height: 11px;

    background: #fff;
    opacity: .4;

    transition: opacity .3s ease, transform .3s ease;
}

.cenatres-revolution .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

/* =========================================================
   SETAS de navegação
========================================================= */

.cenatres-revolution .swiper-button-next,
.cenatres-revolution .swiper-button-prev {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    color: #fff;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);

    transition: background .3s ease;

    z-index: 10;
}

.cenatres-revolution .swiper-button-next:hover,
.cenatres-revolution .swiper-button-prev:hover {
    background: rgba(255, 255, 255, .26);
}

.cenatres-revolution .swiper-button-next::after,
.cenatres-revolution .swiper-button-prev::after {
    font-size: 17px;
    font-weight: 700;
}

/* =========================================================
   ANIMAÇÕES — nomes devem bater EXATAMENTE com o JS:
   map = {
     'anim-fade-in':    'fadeIn',
     'anim-slide-left': 'slideLeft',
     'anim-slide-right':'slideRight',
     'anim-zoom-in':    'zoomIn'
   }
   layer.style.animation = (map[animClass]) + ' 900ms ease forwards'
========================================================= */

.cenatres-revolution .anim-fade-in {
    animation-name: fadeIn;
}

.cenatres-revolution .anim-slide-left {
    animation-name: slideLeft;
}

.cenatres-revolution .anim-slide-right {
    animation-name: slideRight;
}

.cenatres-revolution .anim-zoom-in {
    animation-name: zoomIn;
}

/* =========================================================
   KEYFRAMES — nomes exatos que o JS usa (sem prefixo 'oco')
========================================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   DELAYS ESCALONADOS — layers aparecem em sequência
   O JS já aplica inline, mas estes defaults ajudam quando
   o inline ainda não disparou (primeiro frame).
========================================================= */

.cenatres-revolution .slide-content .layer:nth-child(1) { animation-delay:   0ms; }
.cenatres-revolution .slide-content .layer:nth-child(2) { animation-delay: 180ms; }
.cenatres-revolution .slide-content .layer:nth-child(3) { animation-delay: 360ms; }
.cenatres-revolution .slide-content .layer:nth-child(4) { animation-delay: 540ms; }

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 992px) {
    .cenatres-revolution .slide-content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .cenatres-revolution {
        height: 60vh;
        min-height: 360px;
    }

    .cenatres-revolution .slide-content {
        padding: 0 24px;
    }

    .cenatres-revolution h2,
    .cenatres-revolution h3 {
        font-size: 34px !important;
        letter-spacing: -.5px;
    }

    .cenatres-revolution p {
        font-size: 15px !important;
    }

    .cenatres-revolution .slide-btn {
        padding: 12px 24px;
        font-size: 14px !important;
    }

    .cenatres-revolution .swiper-button-next,
    .cenatres-revolution .swiper-button-prev {
        display: none;
    }
}

@media (max-width: 480px) {
    .cenatres-revolution {
        height: 55vh;
        min-height: 300px;
    }

    .cenatres-revolution h2,
    .cenatres-revolution h3 {
        font-size: 26px !important;
    }

    .cenatres-revolution p {
        font-size: 14px !important;
    }

    .cenatres-revolution .slide-content {
        padding: 0 18px;
    }
}

/* =========================================================
   MODO FULLSCREEN  — aplicado via .oco-height-fullscreen
   gerado pelo PHP quando o usuário escolhe 100vh
========================================================= */

.cenatres-revolution.oco-height-fullscreen {
    height: 100vh;
    min-height: 0;
}

/* =========================================================
   MODO HALF — aplicado via .oco-height-half (50vh)
========================================================= */

.cenatres-revolution.oco-height-half {
    height: 50vh;
    min-height: 300px;
}

/* =========================================================
   MODO CUSTOM — altura definida via style="height:Xpx/vh"
   gerado inline pelo PHP.  A classe .oco-height-custom
   apenas reseta o min-height para não conflitar.
========================================================= */

.cenatres-revolution.oco-height-custom {
    min-height: 0;
}