:root{
    --color-white             : #FFF;
    --color-primary           : #7A47F3;
    --color-secondary         : #0C86DF;
    --text-primary            : #703CEA;
    --bg-dark                 : #000;
    --linear-gradiant         : linear-gradient(to right, #B33BF6 0%, #422EF5 50%, #429BF8 100%);
    --button-border-thickness : 3px;
    --button-content-padding-y: 6px;
    --button-content-padding-x: 20px;
    --button-border-radius    : 50px;
}
body{
    font-family            : "Roboto", sans-serif;
    font-optical-sizing    : auto;
    font-style             : normal;
    font-variation-settings: "wdth" 100;
    color                  : var(--color-white);
    background-color       : #000;
}

/* ------------------------------ Elementos nav ----------------------------- */
.container-fluid-navbar{
    margin  : 0px;
    padding : 0px;
    overflow: hidden;
}
#navbarToggleOm{
    margin-left: 30px;
}
#navbarToggleOm ul li{
    text-transform: uppercase;
}
#navbarToggleOm ul li a{
    color: var(--color-white);
    font-weight: 700;
}
#img-logo-navbar{
    width: 80px;
    height: auto;
}

#bg-navbar{
    /* background: linear-gradient(to right, rgb(58, 12, 163), rgb(123, 44, 191)); */
    /* background: linear-gradient(to right, rgb(123, 44, 191), rgb(58, 12, 163)); */
    /* background: var(--linear-gradiant); */
    /* background-color: var(--color-primary); */
    /* background: #33016F; */
    background: linear-gradient(to right, #660382 0%, #24008C 50%, #005E99 100%);
    margin    : 0px;
    padding   : 0px;
}
.img-icon-navbar{
    width   : 20px;
    height  : 20px;
    overflow: hidden;
}

#email-navbar{
    font-size      : .8rem;
    text-decoration: none;
    color: var(--color-white);
}

#progressbar-container {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 5px;
    background-color: #f0f0f0;
    z-index         : 9999;
    display         : none;
}

#progressbar {
    /* background: linear-gradient(to right, rgb(123, 44, 191), rgb(58, 12, 163)); */
    height    : 100%;
    width     : 0%;
    background: var(--linear-gradiant);
    transition: width 0.5s ease-out;
}

/* -------------------------------- sections -------------------------------- */
section{
    margin-top         : 0px;
    width              : 100%;
    min-height         : 100vh;
    position           : relative;
    background-image   : var(--bg-img-section);
    background-size    : cover;
    background-position: center;
}

/* ------------------ Carusel de imagenes del hero sections ----------------- */












#custom-carousel-container.hero-swiper {
    position      : relative;
    width         : 90%;
    max-width     : 1000px;
    margin        : 40px auto;
    padding-top   : 50px;
    padding-bottom: 50px;
}

/* 3. Cada Slide Individual */
#custom-carousel-container.hero-swiper .swiper-slide {
    background-position: center;
    background-size    : cover;
    width              : 300px;
    height             : 350px;
    display            : flex;
    justify-content    : center;
    align-items        : center;
    box-sizing         : border-box;
}

#custom-carousel-container.hero-swiper .swiper-slide .carousel-artist-image {
    display      : block;
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 15px;
    box-shadow   : 0 5px 15px rgba(0,0,0,0.2);
}

#custom-carousel-container.hero-swiper .custom-carousel-nav {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color           : white;
    border          : none;
    padding: 10px 15px;
    font-size      : 24px;
    cursor         : pointer;
    z-index        : 10;
    border-radius  : 50%;
    width          : 50px;
    height         : 50px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

#custom-carousel-container.hero-swiper .custom-carousel-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

#custom-carousel-container.hero-swiper .custom-carousel-nav.prev {
    left: 10px;
}

#custom-carousel-container.hero-swiper .custom-carousel-nav.next {
    right: 10px;
}

#custom-carousel-container.hero-swiper .swiper-button-disabled {
    opacity       : 0.35;
    cursor        : auto;
    pointer-events: none;
}

@media (max-width: 768px) {
    #custom-carousel-container.hero-swiper {
        width         : 95%;
        padding-top   : 30px;
        padding-bottom: 30px;
    }

    #custom-carousel-container.hero-swiper .swiper-slide {
        width : 240px;
        height: 280px;
    }

    #custom-carousel-container.hero-swiper .custom-carousel-nav.prev {
        left: 5px;
    }
    #custom-carousel-container.hero-swiper .custom-carousel-nav.next {
        right: 5px;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {

    #custom-carousel-container.hero-swiper {
        width         : 100%;
        margin-top    : 20px;
        margin-bottom : 20px;
        padding-top   : 20px;
        padding-bottom: 20px;
    }

    #custom-carousel-container.hero-swiper .swiper-slide {
        width : 180px;
        height: 220px;
    }

    #custom-carousel-container.hero-swiper .custom-carousel-nav {
        width    : 40px;
        height   : 40px;
        font-size: 20px;
    }
    #custom-carousel-container.hero-swiper .custom-carousel-nav.prev {
        left: 2px;
    }
    #custom-carousel-container.hero-swiper .custom-carousel-nav.next {
        right: 2px;
    }
}

/* --------------------------------- textos --------------------------------- */
h1{
    font-size: 3.5rem;
}
.text-title{
    color         : var(--color-white);
    text-transform: uppercase;
    font-weight   : 800;
    font-style    : italic;
}
.subtitle{
    font-style    : italic;
    font-weight   : 700;
    color         : var(--color-white);
    text-transform: uppercase;
    font-size     : 1.5rem;
}

/* ---------------------------- Imagenes de fondo --------------------------- */
.bg-img {
    /* Dimensiones y posicionamiento */
    width              : 100%;
    min-height         : 50vh;
    position           : relative;
    background-image   : var(--bg-img-section);
    background-size    : cover;
    background-position: center;
    display            : flex;
    flex-direction     : column;
    justify-content    : center;
    align-items        : center;
    text-align         : center;
    /* padding        : 20px; */
}

/* .bg-img::before {
    content         : "";
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index         : 0;
} */

/* ---------------------------- Estilos del texto --------------------------- */
#text-conocenos {
    color         : var(--color-white);
    font-size     : 1.2rem;
    line-height   : 2;
    letter-spacing: 3;
    text-align    : justify;
    max-width     : 95%;
    position      : relative;
    z-index       : 1;
}

/* ----------------------------------- hr ----------------------------------- */
.hr-solido {
    position: relative;
    width   : 100%;
    height  : 8px;
    margin  : 0px auto;
    overflow: hidden;
}

.hr-solido::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: var(--linear-gradiant);
    /* background: linear-gradient(45deg, rgb(191, 0, 230) 0%, rgb(9, 9, 121) 50%, rgb(0, 212, 255) 100%); */
}

.hr-solid.right {
    height       : 5px;
    width        : 90%;
    margin-top   : 1rem;
    margin-bottom: 1rem;
    margin-left  : auto;
    margin-right : 0;
    background   : linear-gradient(to left, white 0%, #f0f0f0 80%, #e0e0e0 100% );
    border       : none;
}

/* --------------------------------- buttons -------------------------------- */
.btn-deg{
    /* background   : linear-gradient(to right, #cf01f8 15%,#0111f8 50%, #40c9ff 110%); */
    background   : var(--linear-gradiant);
    border-radius: none;
    color        : var(--color-white);
}

.btn-primary-custom {
    /* Estado por defecto (como el botón "WORLDWIDE" sin hover) */
    background-color: var(--color-black);
    color           : var(--color-white);
    /* padding         : var(--button-border-thickness);
    border-radius   : var(--button-border-radius);
    border          : none;
    text-transform  : uppercase;
    font-weight     : bold;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    text-decoration : none;
    cursor          : pointer;
    transition      : background 0.2s ease-in-out, background-color 0.2s ease-in-out;
    vertical-align  : middle;
    line-height     : 1.2; */

    width        : 50%;
    padding      : .15rem;
    border-radius: 100px;
}

.btn-primary-custom span {
    /* background-color: var(--color-black); */
    color           : var(--color-white);
    padding         : var(--button-content-padding-y) var(--button-content-padding-x);
    border-radius   : calc(var(--button-border-radius) - var(--button-border-thickness));
    display         : block;
}

  /* --- ESTILOS PARA HOVER DE .btn-primary-custom Y PARA .btn-primary-custom.btn-active --- */
.btn-primary-custom:hover,
.btn-primary-custom.btn-active {
    background: var(--linear-gradiant); /* El "borde" (padding del botón) ahora es el degradado */
    /* El color del texto del botón padre no importa mucho aquí ya que el span tiene su propio color */
}

.btn-primary-custom:hover span,
.btn-primary-custom.btn-active span {
   background-color: var(--color-black);
   color           : var(--color-white);
   background-color: black;
   width           : 100%;
   height          : 100%;
   padding         : .250rem 0;
   border-radius   : 100px;
}

/*
   Consideraciones para clases de Bootstrap como .btn y .btn-sm:
   Bootstrap puede añadir sus propios paddings.
   Si .btn-sm o .btn añaden un padding que interfiere con tu efecto de "borde degradado"
   (creado por el padding en .btn-primary-custom), puede que necesites sobreescribirlo.
*/
.btn.btn-primary-custom {
    /* Si Bootstrap añade padding a .btn que no quieres: */
    /* padding: var(--button-border-thickness); */
    /* .btn-sm podría afectar font-size, line-height, y padding.
       Si el padding de .btn-sm interfiere: */
}
.btn-sm.btn-primary-custom {
     /* font-size: 0.875rem; /* Ejemplo de lo que podría hacer .btn-sm */
     /* Si .btn-sm añade padding que interfiere, también resetéalo aquí o asegúrate
        que tu --button-border-thickness y los paddings del span dominen */
}



/* ---------------------------------- cards --------------------------------- */
.card-noticias{
    background-color: var(--color-primary);
    color           : var(--color-white);
    border-radius   : 8px;
    img{
        border-radius         : 8px;
    }
}
.bg-gradiant{
    border-radius: 8px;
    padding      : 5px;
    background   : var(--linear-gradiant);
    box-sizing   : border-box;
}

.single-card {
    width           : 100%;
    height          : 200px;
    border-radius   : 2px;
    perspective     : 1000px;
    background-color: transparent;
}


#img-triangulo-der{
    position: absolute; top: -79px; right: -48px; z-index: 2; width: 150px; height: auto; 
}
#img-triangulo-izq{
    position: absolute; bottom: -37px; left: -46px; z-index: 2; width: 100px; height: auto; 
}

@media only screen and (min-width: 370px) and (max-width: 480px){
    .section-conocenos{
        overflow: hidden;
        padding-top: 100px;
        padding-bottom: 26px;
    }

    #img-triangulo-der{
        position: absolute;
        top: 17px;
        right: -34px;
        z-index: 2;
        width: 110px;
        height: auto;
    }

    .single-card, .card-internacionales {
        width           : 100%;
        height          : 150px;
        border-radius   : 2px;
        perspective     : 1000px;
        background-color: transparent;
    }
}

.card-inner {
    position       : relative;
    width          : 100%;
    height         : 100%;
    transition     : transform 0.8s ease-in-out;
    transform-style: preserve-3d;
}

.single-card:hover .card-inner {
    transform: rotateY(180deg);
}

.front,
.back {
    position           : absolute;
    top                : 0;
    left               : 0;
    padding            : 4px;
    width              : 100%;
    height             : 100%;
    backface-visibility: hidden;
    border-radius      : inherit;
}

.front {
    background: var(--linear-gradiant);
}

.back {
    background: var(--linear-gradiant);
    transform: rotateY(180deg);
}

.img-front,
.img-back {
    border-radius: inherit;
    display      : block;
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    overflow     : hidden;
}

/* ------------------------------- backgrounds ------------------------------ */
.bg-dark{
    background-color: var(--bg-dark);
}

.title-booking {
    rotate        : -90deg;
    display       : inline-flex;
    flex-direction: column;
    align-items   : center;
    color         : var(--color-white);
    font-size     : 6rem;
    letter-spacing: .3rem;
    font-weight   : 900;
    font-style    : italic;
    white-space   : nowrap;
}

.title-booking span {
    display: block;
}

@media (max-width: 991px) { /* Antes del breakpoint 'md' de Bootstrap */
    .title-booking {
        rotate: 0deg; /* Quitar la rotación */
        font-size: 3.5rem; /* Tamaño similar a un H1 móvil (ajusta este valor) */
        letter-spacing: 0.05rem; /* Espaciado de letras más normal */
        white-space: normal; /* Permitir que el texto se ajuste */
        text-align: center; /* Centrar el texto */
        margin-bottom: 1.5rem; /* Espacio debajo del título */
        font-style: normal; /* Quitar la cursiva si no la quieres en móvil */
        display: block; /* Para que ocupe el ancho y permita text-align: center efectivo */
        text-transform: uppercase;
        font-weight: 800;
        font-style: italic;
        /* Ya no se necesita flex-direction: column si solo es texto y el hr se maneja diferente */
    }

    .title-booking .hr-solido {
        width: 50%; /* Ancho del hr ajustado */
        margin-top: 0.5rem; /* Espacio después del título */
        margin-left: auto; /* Centrar el hr si el .title-booking es display:block */
        margin-right: auto;
    }

    /* Ajuste para el contenedor en móviles si es necesario */
    /* Si el .title-booking está en un .col-12.col-lg-3 con 'd-flex justify-content-center align-items-center' */
    /* puede que necesites modificar ese contenedor para móviles. */
    /* Por ejemplo, quitar el align-items-center o cambiar flex-direction si el título ya no está rotado. */
    /* Si la columna que contiene .title-booking tenía un min-height para acomodar el texto rotado: */
    #bookings .col-12.col-lg-3[style*="min-height"] { /* Selector más específico */
        min-height: auto !important; /* Resetear la altura mínima en móviles */
        display: block !important; /* Cambiar de flex a block si es necesario */
        /* Quitar otras propiedades de flex si ya no aplican */
    }
}

/* Opcional: Ajuste fino para pantallas extra pequeñas */
@media (max-width: 575.98px) { /* Antes del breakpoint 'sm' de Bootstrap */
    .title-booking {
        font-size: 2rem; /* Ligeramente más pequeño */
    }
    .title-booking .hr-solido {
        width: 40%;
    }
}

/* --------------------------------- inputs --------------------------------- */
.form-control,
.form-select{
    background-color: #383838;
    border          : #383838;
    color           : white;
}
.form-label{
    margin-bottom: 0;
    color        : var(--color-white);
}
.form-control:focus{
    background-color: #383838;
    color           : white;
    border          : linear-gradient(to right, #cf01f8 40%,#0111f8 60%, #40c9ff 70%);
}
.form-control::placeholder{
    color : white;
    filter: brightness(0.66);
}

#contacto{
    color: white;
    padding-bottom: 3rem;
    padding-top: 3rem;
    position: relative;
}

#img-esfera-arriba{
    position: absolute;
    top: 0;
    left: 20px;
    width: 50%;
    z-index: -1;
}
#img-esfera-abajo{
    position: absolute;
    bottom: 0px;
    right: 20px;
    width: 50%;
    z-index: -1;
}

.img-social-media{
    width: 60px;
    height: auto;
}

.uppercase{
    text-transform: uppercase;
}
.text-muted{
    color: var(--color-white);
}

.no-rel{
    text-decoration: none;
}

/* ----------------------------- button Whatsapp ---------------------------- */
.btn-whatsApp{
    width     : 80px;
    height    : 80px;
    background: var(--linear-gradiant);
    padding   : 6px;
    margin    : 0px;
    z-index   : 9999;
    div{
        background-color: var(--bg-dark);
        border-radius   : 100px;
        padding         : 13px;
    }
}

.pointer{
    cursor: pointer;
}


/* -------------------------------------------------------------------------- */
/*                                    Toast                                   */
/* -------------------------------------------------------------------------- */
.toast-success {
    position        : fixed;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    width           : 300px;
    z-index         : 10000;
    animation       : fadeInOut 3s forwards;
    background-color: #D4EDDA;
    border          : 1px solid #C3E6CB;
    color           : #155724;
    padding         : 10px;
    border-radius   : var(--general-radius) !important;
    box-shadow      : 0 0 10px rgba(0, 0, 0, 0.1);
}

.toast-error{
    position        : fixed;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    width           : 300px;
    z-index         : 10000;
    animation       : fadeInOut 3s forwards;
    background-color: #F8D7DA;
    border: 1px solid #F5C6CB;
    padding         : 10px;
    border-radius   : var(--general-radius) !important;
    box-shadow      : 0 0 10px rgba(0, 0, 0, 0.1);
}