@font-face {
            font-family:FF-MuseoSansRounded-300;
            src:url("../fonts/MuseoSansRounded-300.ttf");
        }
        body {
            font-family: FF-MuseoSansRounded-300, "Museo Sans Rounded", serif;;
            background-color: #3a63a7;
            color: #FFF;
            margin: 0px;
            overflow: hidden;
        }

        .calendar {
            width: 300px;
            margin: 15px auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .header button {
            background: none;
            border: none;
            padding: 5px;
            cursor: pointer;
            outline: none;
            display: flex;
            align-items: center; 
            border: 2px solid #3a63a7;

        }

        .header button img {
            width: 18px; 
            height: 18px;
        }

        #prevMonth img {
            transform: rotate(180deg);
        }

        .header button:hover {
            border: 2px solid #f0f0f0;
            border-radius: 100%;
        }

        .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 0;
        }

        .day-name, .day {
            width: 100%;
            box-sizing: border-box;
            text-align: center;
        }

        .day-name {
            background-color: #194a77;
            color: white;
            font-weight: bold;
            padding: 5px 0;
        }

        .day {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            min-height: 40px;
            position: relative;
            padding: 5px 0;
        }

        .day.selected {
            background-color: #FFF;
            color: #194a77;
        }

        .day .event-dots {
            display: grid;
            grid-template-columns: repeat(3, 8px);
            grid-gap: 2px;
            margin-top: 2px; 
            justify-content: center; 
        }

        .day .event-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .event-list {
            margin-top: 20px;
        }

        .event-item {
            margin-bottom: 10px;
            padding: 10px;
            width: 300px;
            margin: 10px auto;
        }

        .event-item h4 {
            margin: 0;
            font-size: 16px;
        }

        .event-item p {
            margin: 2px 0;
            font-size: 14px;
        }

        .event-item a {
            background: #FFF;
            color: #3a63a7;
            text-decoration: none;
            font-weight: bold;
            border: 2px solid #FFF;
            border-radius: 20px;
            padding: 5px 10px;
            font-size: 12px;
            display: inline-block; 
            margin-top: 10px; 
        }

        .event-item a:hover {
            border: 2px solid #FFF;
            background: #3a63a7;
            color: #FFF;
        }


        .monthYear {text-transform: uppercase;}


        .legend {
            display: flex;
            flex-wrap: wrap; 
            gap: 0px;
            margin-top: 10px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin: 5px;
        }

        .legend-color {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .legend-item span {
            font-size: 11px; 
        }
        .buque {font-size: 12px!important; opacity: 0.5;}

        /* cambios columnas  */

        .container {
            display: flex;
            flex-direction: row;
            height: 100vh;
            overflow: hidden;
        }

        .left-column {
            flex: 1;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
        }
        .right-column {
            width: 400px;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .image-container {
            position: relative;
            overflow: hidden;
            width: 100%; 
            height: 100%; 
            z-index: 0;
        }
        
        .image-container .foto {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 15s ease-in-out;
        }
               
        .image-container .foto {
            animation: zoom-in-out 15s infinite alternate;
        }
        
        .image-container .overlay-text {
            position: absolute;
            top: 100px; 
            left: 0px; 
            color: #fff;
            padding:0 50px;
            text-align: left;
            border-radius: 5px;
        }
        
        .overlay-text .title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        @keyframes zoom-in-out {
            0% {
                transform: scale(1); 
            }
            50% {
                transform: scale(1.05); 
            }
            100% {
                transform: scale(1);
            }
        }
        

        .logo {
            position: absolute;
            top: 20px;
            width: 400px;
            height: auto;
            filter: brightness(20);
            transform: translateX(-50%);
            left: 50%;
            z-index: 20;
        }

       
/* scrollbar */

    /* Tamaño del scroll */
    *::-webkit-scrollbar {
        width:20px;
    
    }
    
    /* Estilos barra (thumb) de scroll */
    ::-webkit-scrollbar-thumb {
        background: #fff;
        border: 8px solid transparent;
        background-clip: content-box;
        border-radius: 20px;
    }
    
    *::-webkit-scrollbar-thumb:active {
        background-color: #002d74;
    }
    
    ::-webkit-scrollbar-track {
        background: #002d74;
        border: 9px solid transparent;
    
        background-clip: padding-box;  
    }
    
    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
        display: block;
    }
    
    /* Turn off the down area up on top, and up area on bottom */
    ::-webkit-scrollbar-button:start:increment,
    ::-webkit-scrollbar-button:end:decrement {
        display: none;
    }
   
/* circulos color  */

.event-item {
    display: flex;
    /* align-items: center; */
    margin-bottom: 15px;
}

.event-date-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Color del texto */
    font-weight: bold;
    margin-right: 10px;
    text-align: center; /* Centra el texto */
    background-color: #fff; /* Por defecto, cambia según el tipo de evento */
    border: none; /* Quitar el borde */
}

.event-details {
    flex: 1;
}

/* colores  */
.europa-dot, .legend-item.europa .legend-color, .europa .event-date-circle { background-color: #92bcc6; }
/* .mediterraneo-dot, .legend-item.mediterraneo .legend-color, .mediterraneo .event-date-circle { background-color: #92bcc6; }
.norte-europa-dot, .legend-item.norte-europa .legend-color, .norte-europa .event-date-circle { background-color: #b5b25f; }
.europa-occidental-dot, .legend-item.europa-occidental .legend-color, .europa-occidental .event-date-circle { background-color: #bb9720; }
.fiordos-noruegos-dot, .legend-item.fiordos-noruegos .legend-color, .fiordos-noruegos .event-date-circle { background-color: #92aa98; } */

.caribe-dot, .legend-item.caribe .legend-color, .caribe .event-date-circle { background-color: #a6c79c; }
/* .caribe-occidental-dot, .legend-item.caribe-occidental .legend-color, .caribe-occidental .event-date-circle { background-color: #a6c79c; }
.caribe-oriental-dot, .legend-item.caribe-oriental, .legend-color, .caribe-oriental .event-date-circle { background-color: #d1bcc6; }
.caribe-sur-dot, .legend-item.caribe-sur .legend-color, .caribe-sur .event-date-circle { background-color: #628365; } */

.bahamas-dot, .bahamas .event-date-circle, .legend-item.bahamas .legend-color { background-color: #d1d935; }
.mexico-dot, .mexico .event-date-circle, .legend-item.mexico .legend-color { background-color: #c55ddc; }

/* .bermudas-dot, .bermudas .event-date-circle, .legend-item.bermudas .legend-color { background-color: #c55ddc; }
.alaska-dot, .alaska .event-date-circle, .legend-item.alaska .legend-color { background-color: #f3d9f5; }
.canada-dot, .canada .event-date-circle, .legend-item.canada .legend-color { background-color: #99ede9; }
.mexico-dot, .mexico .event-date-circle, .legend-item.mexico .legend-color { background-color: #a6db9c; }
.baja-dot, .baja .event-date-circle, .legend-item.baja .legend-color { background-color: #9e83b3; }
.costa-pacifico-dot, .costa-pacifico .event-date-circle, .legend-item.costa-pacifico .legend-color { background-color: #768e77; }
.transatlantico-dot, .transatlantico .event-date-circle, .legend-item.transatlantico .legend-color { background-color: #544656; }
.hawai-dot, .hawai .event-date-circle, .legend-item.hawai .legend-color { background-color: #829191; }
.pacifico-sur-dot, .pacifico-sur .event-date-circle,  .legend-item.pacifico-sur .legend-color { background-color: #e8d6c2; }
.australia-dot, .australia .event-date-circle,  .legend-item.australia .legend-color { background-color: #ffbaba; } */

@media (max-width: 620px) {
    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .left-column{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
    }
    .image-container {
        width: 100%;
        height: 100%;
        }

    .right-column {
        position: relative;
        z-index: 1;
        width: 90%;
        max-width: 400px;
        padding: 20px;
        top: 70px;
    } 
    
    
    .image-container .foto {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        opacity: 0.05;
    }
    .logo {
        position: absolute;
        top: 20px;
        max-width: 250px;
        z-index: 2;
        left: 50%;
        transform: translate(-50%);
    }
    
}

.text-movil{
    display: none;
}

@media screen and (max-width:700px){
    .text-movil{
        display:block;
    }

    .overlay-text{
        display: none;
    }

    .text-movil .title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 0px;
    }

    .text-movil .subtitle{
        margin-bottom: 3em;
    }

    .right-column{
        margin-bottom:100px;
    }
}

/* iconos destacasdos */
    div.destacado-icono {margin-top: 5px;}
    .destacado-icono {
        width: 150px;
        height: 27px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .destacado-icono[data-destacado="Very Merrytime"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/very-merrytime.svg');
    }

    .destacado-icono[data-destacado="Halloween on the High Seas"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/halloween-on-the-high-seas.svg');
    }

    .destacado-icono[data-destacado="Marvel Day at Sea"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/marvel-day-at-sea.svg');
    }

    .destacado-icono[data-destacado="Pixar Day at Sea"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/pixar.png');
    }

    .destacado-icono[data-destacado=""] {
        display: none;
    }

    .past-day{
        color: #aaa;
        pointer-events: none; 
        opacity: 0.5; 
    }