/**
 * Carrossel História - Estilos
 *
 * Shortcode [carrossel-historia]
 */

.ch-wrapper {
    --ch-circle: 200px;
    --ch-gap: 30px;
    --ch-line: #d9d9d9;
    --ch-ano: #58585a;
    --ch-titulo: #3f3f41;
    --ch-texto: #9a9a9c;

    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 0 10px;
    box-sizing: border-box;
}

.ch-wrapper *,
.ch-wrapper *::before,
.ch-wrapper *::after {
    box-sizing: border-box;
}

.ch-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ch-swiper {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-bottom: 10px;
}

.ch-slide {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ---------- Imagem circular + linha de ligação ---------- */

.ch-media {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--ch-circle);
}

/* Traço horizontal que liga um círculo ao próximo. */
.ch-media::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background: var(--ch-line);
    left: calc(50% + (var(--ch-circle) / 2) + 22px);
    right: calc(-1 * var(--ch-gap) - ((100% - var(--ch-circle)) / 2) + 22px);
    z-index: 0;
}

.ch-circle {
    position: relative;
    z-index: 1;
    width: var(--ch-circle);
    height: var(--ch-circle);
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #f2f2f2;
    border: 6px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .13);
}

.ch-circle .ch-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ---------- Haste + ponto sobre o eixo ---------- */

.ch-connector {
    position: relative;
    width: 100%;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Eixo horizontal contínuo que passa pelos pontos. */
.ch-connector::before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: calc(-1 * var(--ch-gap));
    right: calc(-1 * var(--ch-gap));
    height: 1px;
    background: var(--ch-line);
}

.ch-stem {
    width: 1px;
    height: 30px;
    background: var(--ch-line);
}

.ch-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8d8d8f;
}

/* ---------- Textos ---------- */

.ch-content {
    padding: 18px 12px 0;
    max-width: 320px;
}

/* Especificidade alta + !important para não herdar a tipografia global
   de headings/parágrafos do kit do Elementor. */
.ch-wrapper .ch-slide .ch-content .ch-ano,
.ch-wrapper .ch-slide .ch-content .ch-titulo,
.ch-wrapper .ch-slide .ch-content .ch-texto {
    font-family: inherit !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ch-wrapper .ch-slide .ch-content .ch-ano {
    display: block !important;
    margin: 0 !important;
    font-size: 42px !important;
    line-height: 1.1 !important;
    font-weight: 300 !important;
    letter-spacing: .02em !important;
    color: var(--ch-ano) !important;
}

.ch-wrapper .ch-slide .ch-content .ch-titulo {
    margin: 8px 0 12px !important;
    padding: 0 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    color: var(--ch-titulo) !important;
}

.ch-wrapper .ch-slide .ch-content .ch-texto {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    text-align: justify;
    color: var(--ch-texto) !important;
    hyphens: auto;
}

/* ---------- Setas ---------- */

/* Reset forte: o tema/Elementor estiliza <button> globalmente (fundo, borda,
   padding e cor), o que transformava a seta em um retângulo colorido. */
.ch-wrapper .ch-carousel button.ch-nav,
.ch-wrapper .ch-carousel button.ch-nav:hover,
.ch-wrapper .ch-carousel button.ch-nav:focus,
.ch-wrapper .ch-carousel button.ch-nav:active {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    text-decoration: none !important;
    cursor: pointer;
    align-self: flex-start;
    margin: calc(var(--ch-circle) / 2 - 17px) 0 0 !important;
    transition: color .2s ease, opacity .2s ease;
}

.ch-wrapper .ch-carousel button.ch-nav {
    color: #9a9a9c !important;
}

.ch-wrapper .ch-carousel button.ch-nav:hover,
.ch-wrapper .ch-carousel button.ch-nav:focus-visible {
    color: #58585a !important;
}

.ch-wrapper .ch-carousel button.ch-nav svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch-wrapper .ch-carousel button.ch-nav.swiper-button-disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

/* ---------- Paginação (bullets no mobile) ---------- */

.ch-pagination {
    display: none;
    margin-top: 18px;
    text-align: center;
}

.ch-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #c8c8ca;
    opacity: 1;
    margin: 0 5px;
}

.ch-pagination .swiper-pagination-bullet-active {
    background: #58585a;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1400px) {
    .ch-wrapper {
        --ch-circle: 180px;
    }

    .ch-wrapper .ch-slide .ch-content .ch-ano {
        font-size: 38px !important;
    }

    .ch-wrapper .ch-slide .ch-content .ch-titulo {
        font-size: 18px !important;
    }
}

@media (max-width: 1024px) {
    .ch-wrapper {
        --ch-circle: 175px;
    }

    .ch-wrapper .ch-slide .ch-content .ch-ano {
        font-size: 36px !important;
    }

    .ch-wrapper .ch-slide .ch-content .ch-titulo {
        font-size: 17px !important;
    }
}

@media (max-width: 767px) {
    .ch-wrapper {
        --ch-circle: 200px;
        --ch-gap: 20px;
        padding: 10px 0;
    }

    /* Sem vizinho visível: some a linha de ligação lateral. */
    .ch-media::after {
        display: none;
    }

    .ch-connector::before {
        left: 0;
        right: 0;
    }

    .ch-wrapper .ch-carousel button.ch-nav {
        width: 28px !important;
        height: 28px !important;
        margin: calc(var(--ch-circle) / 2 - 14px) 0 0 !important;
    }

    .ch-content {
        max-width: 100%;
        padding: 16px 4px 0;
    }

    .ch-wrapper .ch-slide .ch-content .ch-texto {
        font-size: 13px !important;
        text-align: center;
    }

    .ch-pagination {
        display: block;
    }
}

@media (max-width: 400px) {
    .ch-wrapper {
        --ch-circle: 160px;
    }

    .ch-wrapper .ch-slide .ch-content .ch-ano {
        font-size: 32px !important;
    }
}