/* Extraido de themes/huayra/home.php (cacheavel pelo navegador) */
    .pro {
        background-color: #3b4e75;
        border: #3b4e75;
    }
    .graduados {
        background-color: #274ead;
        border: #274ead;
    }
    .light {
        background-color: #5690ba;
        border: #5690ba;
    }

    .stars {
        background-color: #71428a;
        border: #71428a;
    }

    .rookie {
        margin-top: 10px;
    }



    .icon-box-top {
        width: 100%;
        height: 190px;
        position: relative;
        border-radius: 18px 18px 0px 0px;
    }




    .row-card {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -230px;
        margin-left: -15px;
    }

    .icon-box-top:before {
        content: "";
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    .icon-box-top-2022 {
        width: 100%;
        height: 190px;
        background: url("/template/images/temporadas/temporada_2021.jpg") top center;
        background-size: cover;
        position: relative;
        border-radius: 18px 18px 0px 0px;
    }

    .card-text {
        padding: 30px;
        font-stretch: condensed;
        letter-spacing: .2rem;
        line-height: .5rem;
        width: 370px;
    }

    .card-text .number {
        font-size: 1.2rem;
    }

    .card-text .title-resultado {
        font-weight: bold;
        letter-spacing: .1rem;
        padding-bottom: 0.5rem;
    }
    /*
    body {
      background-color: #5690ba;
    }*/

    .icon-box h5 {
        margin-left: 10px;
    }

    .tableCalendario {
        width: 100%;
    }

    .tableCalendario td {
        color:aliceblue;
    }

    .tableCalendario tr:hover {
        color:aliceblue;
        background-color: #00fd01;
    }


    .tableCalendario th {
        color:aliceblue;
    }

    .tableCalendario .etapaSurpresa {
        border-radius: 25px;
        background-color: #00fd01;
    }

    .tableCalendario .etapaSurpresa:hover {
        border-radius: 0px;
        background-color: #00fd01;
    }

    .iconCalendar {
        font-size: 36px;
    }


    .iconCalendarDisabled {
        color: #FFFFFF;
        opacity: 1.0;
    }

    @media (max-width: 768px) {
        .iconCalendar {
            font-size: 20px;
        }

        .tableCalendario td {
            color: aliceblue;
            font-size: 12px;
        }

        .tableCalendario th {
            color: aliceblue;
            font-size: 12px;
        }

        .counts .counters span {
            font-size: 16px;!important;
        }
    }

    .head-banner {
        /*background-color: rgb(2, 0, 65);*/
        border-radius: 20px;
        padding: 50px 90px 90px 90px;
        width: 100%;
        text-align: center; /* Centraliza o texto */
        overflow: hidden;   /* Evita que conteúdo "vaze" para fora da div */
    }

    video {
        max-width: 100%;
        height: auto;
        border-radius: 20px; /* Borda arredondada */
        display: block;
        margin: 0 auto; /* Centraliza o vídeo */
        padding-bottom: 50px;
    }



    #hero h1 {
        font-size: 2.0em !important;
    }

    #hero h2 {
        font-size: 1.0em !important;
    }

    /* Para larguras menores que 1200px */
    @media (max-width: 1200px) {
        #hero h1 {
            font-size: 1.8em !important;
        }

        #hero h2 {
            font-size: 1.2em !important;
        }

        .head-banner {
            padding: 30px 30px;
            width: 75%;
        }

        video {
            width: 70%;
        }
    }

    /* Para larguras menores que 992px */
    @media (max-width: 992px) {


        #hero h1 {
            font-size: 1.8em !important;
        }

        #hero h2 {
            font-size: 1.2em !important;
        }

        .head-banner {
            padding: 30px 30px;
            width: 100%;
            margin-top: 100px;
        }

        video {
            width: 70%;
        }
    }

    /* Para larguras menores que 762px ou alturas menores que 1024px */
    @media (max-width: 762px), (max-height: 1024px) {
        .head-banner {
            padding: 10px;
            width: 85%;
        }

        #hero h1 {
            font-size: 1.4em !important;
        }

        #hero h2 {
            font-size: 0.8em !important;
        }

        #hero .container {
            padding-top: 0px;
        }

        .tableCalendario {
            width: 100%;
            font-size: 1.2em !important;
        }

        .counts .counters span {
            font-size: 1.0em;
        }

        video {
            width: 70%;
        }
    }

    /* Para larguras menores que 540px ou alturas menores que 700px */
    @media (max-width: 540px) {
        .head-banner {
            padding: 10px;
            width: 100%;
            margin-top: 0px;
        }

        #hero h1 {
            font-size: 1.4em !important;
        }

        #hero h2 {
            font-size: 0.8em !important;
        }

        #hero .container {
            padding-top: 0px;
        }

        .tableCalendario {
            width: 100%;
            font-size: 0.9em !important;
        }

        .counts .counters span {
            font-size: 1.0em;
        }

        video {
            width: 80%;
        }
    }

    @media (max-height: 700px) {
        #hero h1 {
            font-size: 1.4em !important;
        }

        #hero h2 {
            font-size: 0.8em !important;
        }

        #hero .container {
            padding-top: 0px;
        }

        .tableCalendario {
            width: 90%;
            font-size: 0.9em !important;
        }

        .counts .counters span {
            font-size: 1.0em;
        }

        video {
            width: 45%;
        }

    }

    /* Para alturas menores que 600px */
    @media (max-height: 600px) {
        .head-banner {
            padding: 10px;
            width: 100%;
            margin-top: 0px;
        }

        video {
            width: 30%;
        }
    }

    .head-banner .get-started-btn {
        margin-left: 0px;
    }

    /* Estilos para os calendários */

    .calendario-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        max-width: 800px;
    }

    .calendario-wrapper {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .calendario {
        flex: 0 0 100%;
    }

    .seta {
        position: absolute;
        top: 90%;
        transform: translateY(-50%);
        font-size: 24px;
        cursor: pointer;
        z-index: 100;
    }

    .seta.disabled {
        display: none !important; /* Esconde a seta quando estiver desativada */
        pointer-events: none; /* Impede eventos de clique quando desativado */
        /* Aqui você pode adicionar outras propriedades de estilo, como mudança de cor, etc. */
    }

    .seta-esquerda {
        left: -5px; /* Ajuste a distância da seta esquerda */
    }

    .seta-direita {
        right: -5px; /* Ajuste a distância da seta direita */
    }

    .calendario-wrapper {
        margin: 0 auto; /* Centraliza a tabela */
        text-align: center; /* Centraliza o conteúdo dentro da tabela */
    }

    .counts .title h3 {
        font-size: 28px;
    }

    .counts .title h3 {
        font-size: 24px;
    }

    .counts .title h5 {
        font-size: 16px;
    }


    .get-started-btn {
        margin-left: 0;
        background: #02fd01;
        color: #020041;
        border-radius: 50px;
        padding: 10px 25px;
        white-space: nowrap;
        transition: all 0.3s ease;
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        text-align: center;
        box-shadow: 0 0 0 transparent;
    }

    .cta .cta-btn {
        color: #020041;
        font-size: 14px;
        font-weight: bold;
    }

    .bx, .ri-arrow-up-line {
        color: #020041;
    }

    .social-links a:hover, .ri {
        box-shadow: 0 0 16px #02fd01;
    }

    .border-logo {
        display: inline-block;
        padding: 12px 24px;
        border-radius: 50px; /* oval suave */
        box-shadow: 0 0 0px rgba(2, 253, 1, 0.2);
        /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
        margin-bottom: 24px;
        cursor: pointer;
    }

    .border-logo:hover {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(2, 253, 1, 0.5);
        background-color: #121044;
    }

    .border-logo img {
        max-width: 200px;
        height: auto;
        display: block;
        margin: 0 auto;
    }


    /* ------------------ */
    #hero {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        z-index: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .hero-background-layer {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }

    /* Camadas de imagem */
    .bg {
        position: absolute;
        top: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Esquerda */
    .bg-left {
        width: 40%;
        left: 0;
        background-image: url('../../images/pilotos_1.webp');
        filter: grayscale(100%);
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
        z-index: 1;
    }

    /* Centro */
    .bg-middle {
        width: 40%;
        left: 30%;
        background-image: url('../../images/grid_6.webp');
        filter: grayscale(100%);
        clip-path: polygon(8% 0%, 81% 0%, 71% 100%, 1% 100%)
        z-index: 2;
    }

    /* Direita */
    .bg-right {
        width: 40%;
        right: 0;
        background-image: url('../../images/pilotos_3.webp');
        filter: grayscale(100%);
        clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
        z-index: 1;
    }

    /* Sobreposição azul com blur */
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(2, 0, 65, 0.8);
        backdrop-filter: blur(4px);
        z-index: 3;
    }


    /* Responsivo básico */
    @media (max-width: 768px) {
        .bg-left, .bg-middle, .bg-right {
            clip-path: none;
            width: 100%;
            left: 0;
            right: 0;
            opacity: 0.2;
        }

        .line-1, .line-2 {
            display: none;
        }
    }


    @media (max-width: 412px) {

        .bg-white h5 {
            font-size: 0.9em;
        }

        .bg-white h4 {
            font-size: 1.0em;
        }


        .bg-white p {
            font-size: 0.8em;
        }

        .bg-white #weather-line {
            font-size: 0.8em;
        }

        #hero h1 {
            font-size: 0.9em !important;
        }

        .border-logo img {
            width: 60%;
        }


    }

    @media (max-width: 375px) {

        .services .icon-box {
            max-width: 345px;
        }

        #hero .border-logo {
            display:none;
        }
    }

    #hero .border-logo {
        display:none;
    }



/* (capas das temporadas ficam inline no home.php: PHP por temporada) */


    .bg-azul {
        /* gera a URL pelo helper theme() */
        background-image: url('../../images/bg/bg_azul_1.webp') !important;
        /* ajustes usuais */
        background-size: cover;          /* preenche toda a div */
        background-position: center;     /* centraliza */
        background-repeat: no-repeat;    /* não repete */
        background-color: #a1a1a1;
        border-radius: 20px;

    }


    .bg-verde {
        /* gera a URL pelo helper theme() */
        background-image: url('../../images/bg/bg_verde_2.webp') !important;
        /* ajustes usuais */
        background-size: cover;          /* preenche toda a div */
        background-position: center;     /* centraliza */
        background-repeat: no-repeat;    /* não repete */
        background-color: #a1a1a1;

        border-radius: 20px;
    }

    .bg-verde a {
        color: #02fc02;
        font-family: "Open Sans", sans-serif
    }


    .bg-verde  p {
        color: #ffffff;
        font-family: "Open Sans", sans-serif
        border: 1px dot-dot-dash;
    }

    .bg-azul a {
        color: #02fc02;
        font-family: "Open Sans", sans-serif
    }


    .bg-azul  p {
        color: #ffffff;
        font-family: "Open Sans", sans-serif
        border: 1px dot-dot-dash;
    }

    .bg-azul .btnCat, .bg-verde .btnCat {
        color: #020041;
        margin-bottom: 10px;
        margin-left: -25px;
    }
    .bg-azul .btnCat:hover, .bg-verde .btnCat:hover {
        color: #9d9d9d;
    }

    .bg-azul .title-card-temporada, .bg-verde .title-card-temporada {
        position: relative;
        top: 20px;
        margin-left: 10px;
    }

    .bg-verde .title-card-temporada {
        color: #FFFFFF;
    }


    .services {
        background-color: #FFFFFF;
        background-size: cover;
        padding: 120px 0;
    }

    .services h2, .services p {
        /*color: #FFFFFF;*/
    }

    .services .icon-box {
        border-bottom: 5px solid #FFFFFF;
    }

    #header .logo img {
        max-height: 70px;
    }

    .section-title-calendario {
        color: #ffffff;
        width: 100%;
        z-index: 20;
    }

    .link-blue {
        color: #020041;

    }

    .counts2 {
        background-attachment: fixed;
    }

    .logo-fast-inscricao {
        width: 90px;

    }

    .logo-huayra-inscricao {
        width: 70px;
    }

    .btn-fotos {
        margin-top: 15px !important;
        font-weight: 600;
    }