/* Carrossel */
    .carousel-section {
        position: relative;
        overflow: hidden;
    }

    .carousel-inner {
        height: 360px;
    }

    .carousel-inner img {
        height: 475px;
        object-fit: cover;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }

    .carousel-nav-button {
        width: 50px;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .carousel-nav-button i {
        font-size: 24px;
        color: #8E2BF5;
    }

    .carousel-control-prev,
    .carousel-control-next {
        opacity: 1;
        width: 5%;
    }

    .carousel-control-prev:hover .carousel-nav-button,
    .carousel-control-next:hover .carousel-nav-button {
        background-color: rgba(255, 255, 255, 0.9);
    }

    /* Indicadores do carrossel para mobile */
    /*.carousel-indicators {*/
    /*    margin-bottom: 15px;*/
    /*    justify-content: center;*/
    /*    gap: 10px;*/
    /*    position: absolute;*/
    /*    bottom: -10px;*/
    /*}*/

    /*.carousel-indicators button {*/
    /*    width: 10px !important;*/
    /*    height: 10px !important;*/
    /*    border-radius: 50% !important;*/
    /*    background-color: rgba(255, 255, 255, 0.6) !important;*/
    /*    margin: 0 !important;*/
    /*    opacity: 1 !important;*/
    /*    border: none !important;*/
    /*}*/


    /*.carousel-indicators button.active {*/
    /*    background-color: #451c6a !important;*/
    /*    transform: scale(1.2);*/
    /*}*/

    /*.carousel-indicators button {*/
    /*    background-color: #D9D9D9 !important;*/
    /*}*/

    .carousel-control-prev-icon {
        background-image: url("<?= get_template_directory_uri(); ?>/assets/images/left.png");
        background-repeat: no-repeat;
        background-size: contain;
    }

    .carousel-control-next-icon {
        background-image: url("<?= get_template_directory_uri(); ?>/assets/images/right.png");
        background-repeat: no-repeat;
        background-size: contain;
    }


    .carrossel_content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px;
    }

    .icon_tra {
        width: 64px !important;
        height: 67px !important;
        border-radius: 0 !important;
        margin-bottom: 20px;
    }

    .carrossel_content {
        display: flex;
        gap: 40px; /* espaço entre os cards */
        overflow-x: auto;
        padding: 20px 0;
        align-items: flex-start;

    }

    .timeline-item {
        display: grid;
        grid-template-rows: 40px auto auto;
        /*width: 300px;*/
        width: 250px;
        align-items: start;
    }

    .ano-icon {
        display: inline-block;
        font-weight: 700;
        color: #fff;
        padding: 13px 60px;
        border-radius: 50px;
        font-size: 24px;
        place-self: start;
    }

    .icon-purple {
        background-color: #8E2BF5;
    }

    .icon-light-blue {
        background-color: #009DF1;
    }

    .icon-warm-blue {
        background-color: #2BE0FE;
    }

    .icon-coral {
        background-color: #FF73A5;
    }

    .icon-light-purple {
        background-color: #ED11DB;
    }

    .icon-yellow {
        background-color: #FFC64A;
    }

    .icon-green {
        background-color: #C6E912;
    }

    .icon-blue {
        background-color: #3C57E6;
    }

    .ano-placeholder {
        height: 40px; /* reserva espaço quando não houver .ano-icon */
    }

    .text-coral {
        color: #FF73A5;
        font-weight: 700;
        font-size: 1rem;
    }

    .text-light-purple {
        color: #ED11DB;
        font-weight: 700;
        font-size: 1rem;
    }

    .text-purple {
        color: #8E2BF5;
        font-weight: 700;
        font-size: 1rem;
    }

    .text-warm-blue {
        color: #2BE0FE;
        font-weight: 700;
        font-size: 1rem;
    }

    .text-light-blue {
        color: #009DF1;
        font-weight: 700;
        font-size: 1rem;
    }

    .text-blue {
        color: #3C57E6;
        font-weight: 700;
        font-size: 1rem;
    }

    .text-yellow {
        color: #FFC64A;
        font-weight: 700;
        font-size: 1rem;
    }

    .text-green {
        color: #C6E912;
        font-weight: 700;
        font-size: 1rem;
    }


    .border-bottom-coral {
        border-bottom: 3px solid #FF73A5;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }

    .border-bottom-light-purple {
        border-bottom: 3px solid #ED11DB;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }

    .border-bottom-purple {
        border-bottom: 3px solid #8E2BF5;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }


    .border-bottom-warm-blue {
        border-bottom: 3px solid #2BE0FE;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }

    .border-bottom-light-blue {
        border-bottom: 3px solid #009DF1;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }

    .border-bottom-blue {
        border-bottom: 3px solid #3C57E6;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }

    .border-bottom-yellow {
        border-bottom: 3px solid #FFC64A;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }


    .border-bottom-green {
        border-bottom: 3px solid #C6E912;
        width: 100%;
        height: 25px;
        margin: 20px 0;
    }


    .text-gray-secondary {
        color: #555;
        font-size: 0.95rem;
    }

    /*    */


    .custom-indicators {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .custom-indicators button {
        background: none;
        border: none;
        font-weight: bold;
        font-size: 0.875rem;
        color: #a8a8a8;
        cursor: pointer;
        padding: 6px 12px;
        transition: color 0.3s, border-bottom 0.3s;
        border-bottom: 2px solid transparent;
    }

    .custom-indicators button.active,
    .custom-indicators button:hover {
        color: #6a1b9a;
        border-bottom: 2px solid #6a1b9a;
    }

    .carousel-indicators:not(.custom-indicators) {
        display: none;
    }


    .custom-indicators button.active,
    .custom-indicators button:hover {
        color: #737373;
        border-bottom: 0.5px solid #737373;
    }


    /*------------------------*/

    .custom-indicators {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        padding: 40px 50px;
        margin-top: 20px;
        border-top: 1px solid #eee;
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: #9f9f9f #f3f3f3; /* Firefox */
    }

    /* Chrome, Edge, Safari */
    .custom-indicators::-webkit-scrollbar {
        height: 6px;
        width: 50px
    }

    .custom-indicators::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-indicators::-webkit-scrollbar-thumb {
        background-color: #9f9f9f; /* cor da "corda" da barra */
        border-radius: 4px;
    }


    .custom-indicators::-webkit-scrollbar-button {
        display: none;
        height: 0;
        width: 0;
    }


    /* Responsividade para dispositivos mobile */
    @media (max-width: 768px) {
        .carousel-inner {
            height: auto;
        }

        .carousel-inner img {
            height: auto;
            max-height: 300px;
        }

        .carrossel_content {
            padding: 10px;
            gap: 16px;
        }

        .timeline-item {
            width: 85vw;
        }

        .carousel-control-prev,
        .carousel-control-next {
            display: none;
        }
    }

    .carrossel_content {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .timeline-item {
        min-width: 240px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .timeline-item img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .carrossel_content::-webkit-scrollbar {
        height: 6px; /* altura da barra horizontal */
    }

    .carrossel_content::-webkit-scrollbar-track {
        background: transparent; /* cor do trilho */
    }

    .carrossel_content::-webkit-scrollbar-thumb {
        background-color: #ccc; /* cor da barra */
        border-radius: 10px;
    }

    .carrossel_content::-webkit-scrollbar-thumb:hover {
        background-color: #999;
    }

    .mobile-carousel {
        display: flex;
        gap: 20px;
        overflow-x: scroll;
        margin-bottom: 50px;
    }

    .carousel-item {
        padding: 0 50px;
    }

    /* About Section */
    .about-section {
        padding: 80px 0;
    }

    .about-content {
        padding-right: 30px;
    }


    .about-subtitle {
        color: #5a738d;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .about-text {
        color: #555;
        font-size: 16px;
        line-height: 1.3;
    }

/* RESPONSIVE FIX 1360x768 — page-trajetoria-40-anos.php */
.about-section .img-40anos {
    width: 350px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Carrossel — monitores 1366x768 (Bootstrap xl: 1200–1399px)
   Container: 1140px − 24px padding interno = 1116px disponível
   carousel-item padding 50px × 2 = 100px → área útil 1016px
   4 × 235px + 3 × 12px = 976px → cabe sem overflow */
@media (min-width: 1200px) and (max-width: 1399px) {

    /* Carousel principal: itens menores para caber sem scroll */
    .timeline-item {
        width: 235px;
        min-width: 235px;
    }

    .carrossel_content {
        gap: 12px;
        overflow-x: hidden;
    }

    .carrossel_content::-webkit-scrollbar {
        display: none;
    }

    /* Texto levemente menor para reduzir altura dos itens */
    .text-gray-secondary {
        font-size: 0.875rem;
    }

    /* Indicadores: scroll horizontal visível */
    .custom-indicators {
        overflow-x: scroll;
    }

    .custom-indicators::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .custom-indicators::-webkit-scrollbar-track {
        background: #f3f3f3;
    }

    .custom-indicators::-webkit-scrollbar-thumb {
        background-color: #9f9f9f;
        border-radius: 4px;
    }
}