/* ==========================================================================
   CARROSSEL DE FRASES V2 - ESTILO "TARJA" FINAL
   ========================================================================== */

/* --- 1. CONTAINER GERAL (A Tarja) --- */
.quote-carousel-v2__container {
    /* Torna a tarja fixa na viewport */
    position: fixed; 
    z-index: 45;      
    
    /* >>> CORREÇÃO CRÍTICA: Mudar TOP para BOTTOM <<< */
    bottom: 0;          /* FIXA NA PARTE INFERIOR */
    top: unset;         /* Remove a definição do topo para evitar conflito */
    left: 0;            /* Fixa na esquerda */
    
    width: 100%;
    background-color: #ffffff;
    
    /* Ajusta a sombra para aparecer no topo da tarja (sombra negativa) */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); 
    
    padding: 10px 10px;
    box-sizing: border-box;
}
/* --- 2. GRID INTERNO (Conteúdo da Tarja) --- */
.quote-carousel-v2__grid {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 3. COLUNA DO CARROSSEL (70%) --- */
.quote-carousel-v2__center-content {
    flex: 7;
    min-width: 0;
}

/* --- 4. CARROSSEL E SLIDES (Swiper) --- */
.quote-carousel-v2__slider {
    width: 100%;
    overflow: hidden;
}

.quote-carousel-v2__slide-card {
    background-color: transparent;
    /* AJUSTE: Alinha o texto do parágrafo no centro do card */
    text-align: center; 
    min-height: auto;
    display: flex;
    align-items: center;
    /* AJUSTE EXTRA: Garante que o parágrafo se centralize no flex container */
    justify-content: center; 
}

.swiper-pagination {
    position: static;
    margin-top: 10 px;
    /* AJUSTE: Alinha as bolinhas de paginação no centro */
    text-align: center; 
}

.quote-carousel-v2__slide-phrase {
    font-size: 30px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

/* --- 5. PAGINAÇÃO (Bolinhas) --- */
  .swiper-pagination-bullet {
    background-color: #cccccc;
    /* >>> DEIXANDO MAIS TRANSPARENTE */
    opacity: 0.1; 
    width: 5px;
    height: 5px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet {
    background-color: #cccccc;
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background-color: #007bff;
    width: 20px;
    border-radius: 4px;
}
/* --- 6. COLUNA DOS BOTÕES (30%) - ESTRUTURA UNIFICADA --- */
.quote-carousel-v2__right-col {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch; /* Garante que o wrapper ocupe a largura total */
    gap: 15px;
    
    /* Largura fixa para estabilidade */
    min-width: 220px; 
    max-width: 200px;
    
    /* Garante que o botão único tenha altura suficiente para não haver flicker */
    min-height: 50px; 
}

/* Novo Wrapper para o Botão Único (Garante a altura e o alinhamento) */
.cta-unificado__wrapper {
    position: relative;
    width: 100%;
    /* Altura fixa (Baseada no padding do botão: 8px + 8px + font 18px + border 2px + 2px ≈ 40px) */
    height: 40px; 
}

/* --- 7. ESTILOS DO BOTÃO ÚNICO --- */
.cta-unificado__btn {
    /* Ocupa o espaço do wrapper */
    position: absolute;
    width: 100%;
    height: 100%; 

    /* Estilo do Botão */
    background-color: #007bff;
    color: white;
    padding: 8px 29px;
    border-radius: 15px;
    border: 2px solid transparent;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    
    /* Transição suave (0.4s) para cor e texto */
    transition: background-color 0.4s ease, opacity 0.4s ease;

    /* Força aceleração de hardware para o fade (mesmo que seja só o texto) */
    will-change: background-color, opacity; 
}

.cta-unificado__btn:hover {
    background-color: #0056b3;
}

/* Classes Modificadoras (opcional: se o texto mudar de cor/estilo) */
.cta-unificado__btn.secondary-style {
    background-color: transparent;
    color: #007bff;
    border-color: #007bff;
}

.cta-unificado__btn.secondary-style:hover {
    background-color: #007bff;
    color: white;
}




















/* ==========================================================================
   SUPER BLOCO RESPONSIVO (AJUSTE FINAL E CONSOLIDADO)
   ========================================================================== */

/* Unificamos as regras de 992px e 768px em um bloco, 
   priorizando a lógica de OCULTAR CARROSSEL e CENTRALIZAR BOTÃO.
*/
@media (max-width: 992px) {
    
    /* 1. OCULTAR O CARROSSEL (Frases) */
    .quote-carousel-v2__center-content {
        display: none !important; 
    }
    
    /* 2. AJUSTAR O GRID PAI (GARANTE O CENTRO DA TELA) */
    .quote-carousel-v2__grid {
        /* Desativar o layout de coluna antiga e centralizar o item restante */
        flex-direction: row; 
        justify-content: center; /* CHAVE: Centraliza o item restante (a coluna do botão) */
        align-items: center;
        gap: 0; 
        padding: 0 15px; /* Padding lateral */
    }

    /* 3. AJUSTAR A COLUNA DO BOTÃO (O ÚNICO ITEM VISÍVEL) */
    .quote-carousel-v2__right-col {
        /* Desativa as regras de flex do desktop */
        flex: 0 0 auto; 
        
        /* Limita a largura para o botão não esticar em tablets */
        max-width: 400px; 
        width: 100%; 
        
        /* Força a centralização do seu próprio conteúdo */
        display: flex;
        justify-content: center; /* Centraliza o CTA Wrapper interno */
        align-items: center;
    }
    
    /* 4. GARANTIR QUE O BOTÃO PREENCHA O ESPAÇO CENTRALIZADO */
    .cta-unificado__wrapper, 
    .cta-unificado__btn {
        width: 100%; /* O botão preenche a largura de 400px, que está centralizada na tela */
    }
    
    /* 5. AJUSTES FINOS NA TARJA FIXA E FONTES */
    .quote-carousel-v2__container {
        /* CORRIGIDO: Adicionando a unidade 'px' que estava faltando */
        padding: 10px 50px; 
    }
    
    .quote-carousel-v2__slide-phrase {
        /* Redução de fonte para telas menores (se for visível em algum ponto) */
        font-size: 16px;
    }
    
    /* Nota: A regra antiga de margin-top: -60px foi removida pois está em position: fixed; */
}