/* ====================================
                    DEFINIR ESTILOS
        ==================================== */
        
        :root {
            --azul-medio: #035AD9;
            --azul-fuerte: #0056A5;
            --azul-bajo: #00B4EF;
            --verde: #5ABA2D;
            --verde-agua: #00928C;
            --amarillo: #F9DC5F;
            --blanco: #fff;
            --negro: #000;
        }

        @font-face {
            font-family: 'Brandon-Black';
            src: url(/font/Brandon/BrandonText-Black.ttf);
        }

        @font-face {
            font-family: 'Brandon-Bold';
            src: url(/font/Brandon/BrandonText-Bold.ttf);
        }

        @font-face {
            font-family: 'Brandon-Medium';
            src: url(/font/Brandon/BrandonText-Medium.ttf);
        }

        @font-face {
            font-family: 'Brandon-Regular';
            src: url(/font/Brandon/BrandonText-Regular.ttf);
        }

        @font-face {
            font-family: 'CoconPro-Bold';
            src: url(/font/CoconPro/fonnts.com-CoconPro-Bold.otf);
        }

        body {
            background-color: #f6f6f6;
        }

        h1 {
            font-family: 'Brandon-Bold';
            color: var(--blanco) !important;
            font-size: 48px !important;
        }

        h2 {
            font-family: 'Brandon-Black';
            color: var(--blanco) !important;            
        }

        h3 {
            font-family: 'Brandon-Regular';
            color: var(--blanco) !important;            
        }

        h4 {
            font-family: 'Brandon-Bold';
            color: var(--blanco) !important;            
        }

        h5 {
            font-family: 'Brandon-Regular';
        }

        p {
            margin-bottom: 0px !important;
        }

        footer {
            background-color: var(--azul-bajo) !important;
            border-radius: 15px !important;
        }

        /* ====================================
                        Swipers
        ==================================== */

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            border-radius: 15px !important;
            background: #F3F3F3;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper .mySwiper {
            position: relative !important;
        }

        .swiper-button-next {
            position: absolute !important;
            top: 60% !important;
            background-color: var(--azul-bajo) !important;
            padding: 15px 22px !important;
            border-radius: 100%;
        }

        .swiper-button-prev {
            position: absolute !important;
            left: 96% !important;
            background-color: var(--azul-bajo) !important;
            padding: 15px 22px !important;
            border-radius: 100%;
        }

        .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
            content: '→' !important;
            font-size: 30px !important;
            color: var(--blanco) !important;
            font-weight: 900 !important;
            padding-bottom: 3px !important;
        }

        .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
            content: '←' !important;
            font-size: 30px !important;
            color: var(--blanco) !important;
            font-weight: 900 !important;
            padding-bottom: 3px !important;
        }

        .top-5 {
            padding-top: 3rem !important;
        }

        .swiper-button-next:after, .swiper-button-prev:after {
            font-family: '' !important;
            font-size: var(--swiper-navigation-size);
            text-transform: none !important;
            letter-spacing: 0;
            font-variant: initial;
            line-height: 1;
        }

        .dropdown-menu {
            --bs-dropdown-color: var(--blanco) !important;
            --bs-dropdown-bg: var(--verde) !important;
            --bs-dropdown-link-color: var(--blanco) !important;
            --bs-dropdown-link-hover-color: var(--blanco) !important;
            --bs-dropdown-link-active-color: var(--verde) !important;
            border-bottom-left-radius: 2px !important;
            border-bottom-right-radius: 30px !important;
            border-top-left-radius: 30px !important;
            border-top-right-radius: 2px !important;
        }

        .dropdown-item {
            font-family: 'Brandon-Medium' !important;
            color: var(--blanco) !important;
        }

        .dropdown-item:hover {
            background-color: transparent !important;
            font-family: 'Brandon-Medium' !important;
            color: var(--blanco) !important;
        }

        /* ====================================
                    Estilos Generales
        ==================================== */

        .navbar-toggler-icon {
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            vertical-align: middle;
            background-image: url(/img/landing/align-justified.svg) !important;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
        }

        .bg-nav {
            background-color: #ffffff;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.138);
        }

        .nav-logo1 {
            width: 120px !important;
        }

        .nav-logo2 {
            width: 340px !important;
        }

        .nav-link {
            font-family: 'Brandon-Medium' !important;
            color: var(--azul-fuerte) !important;
            font-family: 24px !important;
        }

        .verde-agua {
            color: var(--verde-agua) !important;
            font-family: 'CoconPro-Bold' !important;
            font-size: 66px !important;
            
        }

        .bold-black {
            color: var(--negro) !important;
            font-family: 'Brandon-Bold' !important;
        }

        .medium-black {
            color: #272727 !important;
            font-family: 'Brandon-Medium' !important;
        }

        .bg-blue {
            background-color: #0056A5;
        }

        .carrousel-xxl {
            display: block !important;
        }

        .carrousel-md {
            display: none !important;
        }

        .blanco {
            color: var(--blanco);
        }

        .img-expo {
            width: 100%;
        }

        .br-responsive {
            display: block !important; 
        }

        .br-responsive-sm {
            display: none !important; 
        }

        .coco {
            font-family: 'CoconPro-Bold' !important;
            color: var(--blanco) !important;
            font-size: 66px !important;
        }

        .coco-azul {
            font-family: 'CoconPro-Bold' !important;
            color: var(--azul-fuerte) !important;
            font-size: 66px !important;
        }

        .coco-azul-medio {
            font-family: 'CoconPro-Bold' !important;
            color: var(--azul-medio) !important;
            font-size: 66px !important;
        }

        .coco-azul-bajo {
            font-family: 'CoconPro-Bold' !important;
            color: var(--azul-bajo) !important;
            font-size: 66px !important;
        }
        
        .title-verde {
            font-family: 'CoconPro-Bold' !important;
            color: var(--verde-agua) !important;
            font-size: 66px !important;            
        }

        .azul {
            color: var(--azul-fuerte) !important;
        }

        .regular {
            font-family: 'Brandon-Regular';
        }

        .bold {
            font-family: 'Brandon-Bold' !important;            
        }

        .evento-xxl {
            display: block !important;
            margin-left: 36%;
        }

        .evento-sm {
            display: none !important;
        }

        .temas-content {
            margin-left: 50% !important;
        }

        .advertencia {
            color: #EF4545 !important;
            font-family: 'Brandon-Regular' !important;
        }

        .th-left {
            border-top-left-radius: 2px;
            border-bottom-left-radius: 30px;
        }

        .th-right {
            border-bottom-right-radius: 2px;
            border-top-right-radius: 30px;
        }

        .final-text {
            display: block !important;
            font-size: 50px !important;
            color: var(--blanco);
            font-family: 'Brandon-Regular' !important;
        }

        .final-text-sm {
            display: none !important;
            font-size: 50px !important;
            color: var(--blanco);
            font-family: 'Brandon-Regular' !important;
        }

        .border-r {
            border-right: 2px solid var(--verde-agua);
            border-bottom: 2px solid var(--verde-agua);
            width: 14%;
        }

        .border-b {
            border-bottom: 2px solid var(--verde-agua);
        }

        .content {
            position: relative;
        }

        .absolute-counter {
            position: absolute;
            left: 32%;
        }

        .containerspans {
            display: flex;

            border-radius: 4px;
        }

        .problem-item {
            display: flex;
            align-items: center; 
            color: white; 
            padding: 15px 20px;
            padding-left: 0px !important;
            border-radius: 8px; 
            font-size: 1.2rem; 
            line-height: 1.3; 
        }

        .problem-icon {
            height: auto;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .problem-text {
            flex-grow: 1;
        }

        .clock {
            position: relative;
            display: flex;
            justify-content: center;
            background: #ffffff;
            padding: 15px 0;
            width: 100%;
            border-radius: 5px 20px;
            overflow: hidden;
            padding-left: 2rem;
            padding-right: 2rem;
            outline: 4px solid #ffffff;
            outline-offset: 3px;
            box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
            top: -38px !important;
        }
        
        .clock span {
            color: #054fbf;
            font-size: 60px;
            padding: 0 10px 0 10px;
            font-family: "visby", sans-serif;
            font-optical-sizing: auto;
            font-weight: 700;
            text-align: center;
        }
        
        .clock span .small {
            font-size: 14px;
            margin: 0;
            font-family: "Lexend", sans-serif;
            font-optical-sizing: auto;
            font-weight: 300;
        }
        
        .clock .puntos {
            position: relative;
        }

        .py-2-2 {
            padding-top: .7rem !important;
            padding-bottom: .6rem !important;
        }

        .py-4-4 {
            padding-top: 1.86rem !important;
            padding-bottom: 1.8rem !important;
        }

        .py-4-5 {
            padding-top: 1.9rem !important;
            padding-bottom: 1.8rem !important;
        }

        /* ====================================
                Estilos de la tabla
        ==================================== */
        
        .point {
            position: relative;
        }

        .point::before {
            position: absolute;
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: var(--azul-fuerte);
            transform: translate(185px, 10px);
        }

        .table-head {
            background-color: var(--verde-agua);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 30px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 2px;
        }

        .th {
            color: var(--blanco) !important;
            font-family: 'Brandon-Bold' !important;
            font-size: 35px !important;
            text-align: start !important;
            padding: 20px 40px !important;  
        }

        .td {
            color: var(--azul-fuerte) !important;
            font-family: 'Brandon-Bold';
            font-size: 25px !important;   
            text-align: start !important;       
            padding: 0px 0px !important;
        }

        .responsive-container {
            position: relative;
        }

        .responsive-container::before {
            position: absolute;
            background-color: var(--azul-fuerte);
            width: 50px;
            height: 50px;
        }

        .line {
            border-bottom: 2px solid var(--verde-agua) !important;
        }

        .line-y {
            border-right: 2px solid var(--verde-agua) !important;
        }

        .table-item {
            padding-top: 50px !important;
        }

        .table-minus {
            color: #272727;
            font-family: 'Brandon-Medium' !important;
        }

        .td-xxl {
            display: block !important;
        }

        .td-md {
            display: none !important;
        }

        .span-xxl {
            display: block;
        }

        .span-md {
            display: none;
        }

        /* ====================================
                    Estilos Botones
        ==================================== */

        .btn-important {
            background-color: var(--verde) !important;
            padding: 12px 18px !important;
            border-bottom-left-radius: 2px !important;
            border-bottom-right-radius: 20px !important;
            border-top-left-radius: 20px !important;
            border-top-right-radius: 2px !important;
            transition: all 0.5s ease-in-out !important;
            font-family: 'Brandon-Bold' !important;
            color: var(--blanco) !important;
        }

        .btn-important:hover {
            transform: translateY(-3px) !important; 
            transition: all 0.5s ease-in-out !important;
        }

        .btn-registro {
            background-color: var(--amarillo) !important;
            padding: 12px 18px !important;
            border-bottom-left-radius: 2px !important;
            border-bottom-right-radius: 20px !important;
            border-top-left-radius: 20px !important;
            border-top-right-radius: 2px !important;
            transition: all 0.5s ease-in-out !important;
            max-width: 210px !important;
            font-family: 'Brandon-Bold' !important;
            font-size: 24px !important;
            color: var(--azul-fuerte) !important;

        }

        .btn-registro:hover {
            transform: translateY(-6px) !important; 
            transition: all 0.5s ease-in-out !important;
        }

        .btn-restaurant {
            background-color: var(--amarillo);
            color: var(--azul-fuerte);
            font-family: 'Brandon-Bold' !important;
            text-decoration: none;
            padding: 15px 20px;
            border-radius: 5px 20px 5px 20px;
        }

        .btn-restaurant:hover {
            transform: translateY(-6px) !important; 
            transition: all 0.5s ease-in-out !important;
        }

        /* ====================================
                    Estilos BG
        ==================================== */

        #Bg-counter {
            background-image: url(/img/landing/Bg-container.png) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 25px;
        }

        #Bg-textura-general {
            background-image: url(/img/landing/texturas.png) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;            
        }

        #Bg-temas {
            background-image: url(/img/landing/bg-temas.png) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 25px;    
        }

        #bg-card {
            background-image: url(/img/landing/bg-card.png) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;        
        }

        #Bg-contacto {
            background-image: url(/img/landing/bg-contacto.png) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;   
            border-radius: 25px !important;
        }

        #bg-restaurant {
            background-image: url(/img/landing/bg-restaurant.png) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
            border-radius: 5px 5px 100px 5px !important;
        }

        /* ====================================
                    Estilos Cards
        ==================================== */

        .card {
            border: 2.5px solid var(--azul-fuerte) !important;
            border-radius: 30px !important;
        }

        .card-title {
            font-family: 'Brandon-Bold' !important;
            color: var(--azul-fuerte) !important;
        }

        .card-body {
            padding: 20px 0px !important;
        }

        .card-title-minus {
            color: var(--azul-fuerte);
            font-family: 'Brandon-Regular' !important;
        }

        .amount {
            font-size: 44px !important;
            font-family: 'CoconPro-Bold' !important;            
        }

        .price {
            font-size: 22px !important;
            font-family: 'CoconPro-Bold' !important;
        }

        .text-minus {
            font-size: 16px !important;
            font-family: 'Brandon-Regular' !important;
            color: var(--blanco);
        }

        .detail-card {
            color: #272727 !important;
            font-family: 'Brandon-Bold' !important;
            margin-bottom: 0px !important;       
        }

        .detail-minus {
            color: #272727 !important;
            font-family: 'Brandon-Regular' !important;
            font-size: 16px !important;          
        }

        .final-detail {
            display: block !important;
            color: var(--azul-fuerte);
            font-family: 'Brandon-Regular' !important;
            font-size: 18px !important;
        }

        .final-detail-sm {
            display: none !important;
            color: var(--azul-fuerte);
            font-family: 'Brandon-Regular' !important;
            font-size: 18px !important;
        }

        .card-contacto {
            width: 100% !important;
            border-radius: 15px !important;
            background-color: var(--azul-fuerte);
            color: var(--amarillo) !important;
            transition: all 0.5s ease-in-out !important;
        }

        .card-contacto:hover {
            transform: translateY(-6px) !important; 
            transition: all 0.5s ease-in-out !important;
        }

        .card-pase {
            transition: all 0.5s ease-in-out !important;
        }

        .card-pase:hover {
            transform: translateY(-10px) !important; 
            transition: all 0.5s ease-in-out !important;
        }
        
        /* ====================================
                    Estilos Ponentes
        ==================================== */

        .bg-ponentes {
            background-color: #F3F3F3;
            border-radius: 15px !important;
            box-shadow: 1px 8px 11px 1px rgba(0, 0, 0, 0.138);
        }

        .img-ponente {
            width: 444px !important;
        }

        .img-tam-ponentes {
            width: 500px !important;
        }
        /* ====================================
                        Accordion
        ==================================== */

        .accordion-button {
        background: #fff !important;
        color: #035AD9 !important;
        font-weight: bold !important;
        border: 2px solid #035AD9 !important;
        border-radius: 20px !important;
        border-bottom-right-radius: 0px !important;
        border-top-right-radius: 20px !important;
        box-shadow: none !important;
        padding: 0px 0px !important;
        padding-left: 20px !important;
        }

        /* Íconos personalizados */
        .accordion-button::after {
        content: "+" !important;
        font-weight: bold;
        font-size: 2rem;
        color: #fff;
        background: #035AD9;
        border-radius: 0 15px 0 15px;
        padding: 10px 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        width: auto !important;
        height: auto !important;
        background-image: none !important;
        }

        .accordion-button:not(.collapsed)::after {
        content: "-" !important;
        }

        .accordion-item {
        border: none !important;
        margin-bottom: 15px !important;
        }

        .accordion-body {
        border: 2px solid #035AD9 !important;
        border-top: none !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
        }

        .faq-container {
        display: grid !important;
        gap: 20px !important;
        margin: auto !important;
        }

        /* ====================================
                    FOOTER
        ==================================== */

        .footer {
            background-color: #00B4EF;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .footer-logo img {
            height: 60px; 
            margin-right: 15px;
        }

        .footer-info {
            display: flex;
            align-items: center;
        }

        .footer-event {
            text-align: right;
            margin-left: auto;
        }
        
        .footer-event img {
            height: 16px;
        }

        .footer-center h5 {
            font-family: 'Brandon-Bold';
        }

        .footer-dev h5 {
            font-family: 'Brandon-Bold';
            margin-left: 20px;
            font-size: 18px;
        }

        /* ====================================
                    RESPONSIVE
        ==================================== */
        @media (max-width: 1400px) {
            .point {
                position: relative;
            }

            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(155px, 10px);
            }
        }

        @media (max-width: 1200px) {
            .point {
                position: relative;
            }

            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(125px, 5px);
            }

            .td-xxl {
                display: none !important;
            }

            .td-md {
                display: block !important;
            }
            
            .td {
                font-size: 20px !important;
            }

            .py-4-5 {
                padding-top: 2rem !important;
                padding-bottom: 2.11rem !important;
            }

            .py-4-4 {
                padding-top: 2.13rem !important;
                padding-bottom: 2rem !important;
            }

            .py-2-2 {
                padding-top: 1rem !important;
                padding-bottom: 1.23rem !important;
            }

            .top-5 {
                padding-top: 0rem !important;
            }

            .evento-xxl {
                margin-left: 30%;
            }
        }

        @media (max-width: 1050px) {
            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                background: #ffffff;
                padding: 15px 0;
                width: 100%;
                border-radius: 5px 20px;
                overflow: hidden;
                padding-left: 2rem;
                padding-right: 2rem;
                outline: 4px solid #ffffff;
                outline-offset: 3px;
                box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
                top: -20px !important;
                left: -15%;
            }
        }

        @media (max-width: 992px) {

            .evento-xxl {
                margin-left: 25%;
            }

            .point {
                position: relative;
            }

            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(205px, 5px);
            }

            .td {
                font-size: 18px !important;
            }    

            .img-ponente {
                width: 100% !important;
            }

            .swiper-button-prev {
                position: absolute !important;
                left: 92.4% !important;
                background-color: var(--azul-bajo) !important;
                padding: 15px 22px !important;
                border-radius: 100%;
            }

            .temas-content {
                margin-left: 0% !important;
            }

            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                background: #ffffff;
                padding: 15px 0;
                width: 100%;
                border-radius: 5px 20px;
                overflow: hidden;
                padding-left: 2rem;
                padding-right: 2rem;
                outline: 4px solid #ffffff;
                outline-offset: 3px;
                box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
                top: -20px !important;
                left: -25%;
            }
        } 

        @media (max-width: 770px) {

            .evento-xxl {
                margin-left: 15%;
            }
        }

        @media (max-width: 767px) {

            .span-xxl {
                display: none;
            }

            .span-md {
                display: block;
            }
            .footer {
                flex-direction: column;
                text-align: center;
            }
            .footer-info {
                flex-direction: column;
                margin-bottom: 15px;
            }
            .footer-logo, .footer-event, .footer-dev {
                margin: 10px 0;
            }

            .clock {
                justify-content: center;
            }
        
            .clock span {
                font-size: 24px;
                padding: 0 10px 0 10px;
            }
        
            .clock span .small {
                font-size: 12px;
            }

            .clock span .small{
                font-size: 10px !important;
            }

            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                background: #ffffff;
                padding: 15px 0;
                width: 100%;
                border-radius: 5px 20px;
                overflow: hidden;
                padding-left: 2rem;
                padding-right: 2rem;
                outline: 4px solid #ffffff;
                outline-offset: 3px;
                box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
                top: -20px !important;
                left: -20%;
            }

            .point {
                position: relative;
            }

            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(145px, 5px);
            }

            .carrrousel-xxl {
                display: none !important;
            }

            .carrousel-md {
                display: block !important;
            }

            .swiper-button-next {
                position: absolute !important;
                top: 60% !important;
                background-color: var(--azul-bajo) !important;
                padding: 15px 22px !important;
                border-radius: 100%;
            }

            .swiper-button-prev {
                position: absolute !important;
                left: 90% !important;
                background-color: var(--azul-bajo) !important;
                padding: 15px 22px !important;
                border-radius: 100%;
            }

            .final-detail {
                display: none !important;
            }

            .final-detail-sm {
                display: block !important;
            }

            .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
                content: '→' !important;
                font-size: 40px !important;
                color: var(--blanco) !important;
                font-weight: 900 !important;
                padding-bottom: 12px !important;
            }

            .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
                content: '←' !important;
                font-size: 40px !important;
                color: var(--blanco) !important;
                font-weight: 900 !important;
                padding-bottom: 12px !important;
            }

            .nav-logo2 {
                width: 400px !important;
                justify-content: center !important;
                margin-left: 15%;
            }

            .calendario-icon {
                width: 35px;
            }

            .clock-icon {
                width: 35px;
            }

            .pin-icon {
                width: 35px;
            }
        }

        @media (max-width: 556px) {

            .final-detail {
                display: none !important;
            }

            .final-detail-sm {
                display: block !important;
            }

            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                background: #ffffff;
                padding: 15px 0;
                width: 100%;
                border-radius: 5px 20px;
                overflow: hidden;
                padding-left: 2rem;
                padding-right: 2rem;
                outline: 4px solid #ffffff;
                outline-offset: 3px;
                box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
                top: -20px !important;
                left: -26%;
            }

            .coco {
                font-family: 'CoconPro-Bold' !important;
                color: var(--blanco) !important;
                font-size: 55px !important;
            }

            .coco-azul {
                font-family: 'CoconPro-Bold' !important;
                color: var(--azul-fuerte) !important;
                font-size: 55px !important;
            }

            .coco-azul-medio {
                font-family: 'CoconPro-Bold' !important;
                color: var(--azul-medio) !important;
                font-size: 55px !important;
            }

            .coco-azul-bajo {
                font-family: 'CoconPro-Bold' !important;
                color: var(--azul-bajo) !important;
                font-size: 55px !important;
            }
            
            .title-verde {
                font-family: 'CoconPro-Bold' !important;
                color: var(--verde-agua) !important;
                font-size: 55px !important;            
            }
            .point {
                position: relative;
            }

            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(140px, 5px);
            }
        }

        @media (max-width: 520px) {
            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(130px, 5px);
            }
        }

        @media (max-width: 500px) {
            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(110px, 5px);
            }

            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                background: #ffffff;
                padding: 15px 0;
                width: 100%;
                border-radius: 5px 20px;
                overflow: hidden;
                padding-left: 2rem;
                padding-right: 2rem;
                outline: 4px solid #ffffff;
                outline-offset: 3px;
                box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
                top: -20px !important;
                left: -30%;
            }

            .calendario-icon {
                width: 35px;
            }

            .clock-icon {
                width: 35px;
            }

            .pin-icon {
                width: 35px;
            }

            .img-tam-ponentes {
                width: 100% !important;
            }

            .nav-logo2 {
                width: 400px !important;
                justify-content: center !important;
                margin-left: 0% !important;
            }
        }

        @media (max-width: 485px) {

        .br-responsive-sm {
            display: block !important; 
        }
            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(115px, 5px);
            }

            .evento-xxl {
                margin-left: 9%;
            }
        }

        @media (max-width: 440px) {
            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(100px, 5px);
            }

            .evento-xxl {
                display: none !important;
            }

            .evento-sm {
                display: block !important;
                margin-left: 20%;
            }
        }

        @media (max-width: 420px) {
            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(94px, 5px);
            }

            .nav-logo2 {
                width: 400px !important;
                justify-content: center !important;
                margin-left: 0% !important;
            }
        }
        
        @media (max-width: 399px) {
            .point {
                position: relative;
            }

            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(82px, 5px);
            }

            .clock {
                flex-wrap: wrap;
            }

            .nav-logo1 {
                width: 130px !important;
            }

            .nav-logo2 {
                width: 300px !important;
                justify-content: center !important;
                margin-left: 0% !important;
            }

            .content {
                position: relative;
            }

            .absolute-counter {
                position: absolute;
                left: 0%;
            }

            .containerspans {
                display: flex;

                border-radius: 4px;
            }

            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                background: #ffffff;
                padding: 15px 0;
                width: 100%;
                border-radius: 5px 20px;
                overflow: hidden;
                padding-left: 2rem;
                padding-right: 2rem;
                outline: 4px solid #ffffff;
                outline-offset: 3px;
                box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
                top: -20px !important;
                left: -2%;
            }

            .temas-content {
                margin-left: 0% !important;
            }

            .problem-icon {
                width: 50px !important;
            }

            .img-ponente {
                width: 100% !important;
            }

            .img-tam-ponentes {
                width: 100% !important;
            }

            .swiper-button-next {
                position: absolute !important;
                top: 60% !important;
                background-color: var(--azul-bajo) !important;
                padding: 15px 22px !important;
                border-radius: 100%;
            }

            .swiper-button-prev {
                position: absolute !important;
                left: 84.5% !important;
                background-color: var(--azul-bajo) !important;
                padding: 15px 22px !important;
                border-radius: 100%;
            }

            .carrrousel-xxl {
                display: none !important;
            }

            .carrousel-md {
                display: block !important;
            }

            .final-text {
                display: none !important;
                font-size: 30px !important;
                color: var(--blanco);
                font-family: 'Brandon-Regular' !important;
            }

            .final-text-sm {
                display: block !important;
                font-size: 30px !important;
                color: var(--blanco);
                font-family: 'Brandon-Regular' !important;
            }

            .br-responsive {
                display: none !important; 
            }

            .br-responsive-sm {
                display: block !important; 
            }

            .final-detail {
                display: none !important;
            }

            .final-detail-sm {
                display: block !important;
            }

            .coco {
                font-family: 'CoconPro-Bold' !important;
                color: var(--blanco) !important;
                font-size: 44px !important;
            }

            .coco-azul {
                font-family: 'CoconPro-Bold' !important;
                color: var(--azul-fuerte) !important;
                font-size: 44px !important;
            }

            .coco-azul-medio {
                font-family: 'CoconPro-Bold' !important;
                color: var(--azul-medio) !important;
                font-size: 44px !important;
            }

            .coco-azul-bajo {
                font-family: 'CoconPro-Bold' !important;
                color: var(--azul-bajo) !important;
                font-size: 44px !important;
            }
            
            .title-verde {
                font-family: 'CoconPro-Bold' !important;
                color: var(--verde-agua) !important;
                font-size: 44px !important;            
            }
        }

        @media (max-width: 363px) {
            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(76px, 5px);
            }

            .evento-sm {
                margin-left: 10%;
            }
        }

        @media (max-width: 320px) {
            .point::before {
                position: absolute;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: var(--azul-fuerte);
                transform: translate(66px, 5px);
            }

            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                background: #ffffff;
                padding: 15px 0;
                width: 100%;
                border-radius: 5px 20px;
                overflow: hidden;
                padding-left: 2rem;
                padding-right: 2rem;
                outline: 4px solid #ffffff;
                outline-offset: 3px;
                box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.5);
                top: -20px !important;
                left: -10%;
            }

            .evento-sm {
                margin-left: 6%;
            }
        }