/* ========================== */
/* GENERAL STYLES             */
/* ========================== */

html, body {
    background-color: #eaeaea;
    margin: 0;
    font-family: effra-cc, sans-serif;
    font-weight: 200;
    font-size: 13px;
    letter-spacing: clamp(0.001rem, 0.05rem, 0.4rem);
    line-height: 1.2em;
    word-spacing: 0;
    cursor: url('../images/cursors/arrow-black.png') 3 3, default;
    a:not([style*="cursor"]):not([class*="cursor"]) {
        cursor: url('../images/cursors/arrow-white.png') 3 3, pointer;
      }
}


  .cookie-notice {
    position: absolute;
    left: 4vmin;
    top: 4vmin;
    width: 15vw;
    min-width: 250px;
    padding: 20px;
    text-align: center;
    font-size: 0.8rem;
    z-index: 9999;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .cookie-notice {
        position: absolute;
        left: 0;
        top: 20px;
        padding: 10px;
    }
}



  .no-cursor {
    cursor: none !important;
  }

.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cookie-btn {
    padding: 5px 10px;
    background-color: #16161d;
    color: #eaeaea;
    text-decoration: none;
    border-radius: 2px;
    border: solid 0.5px rgba(234, 234, 234, 1);
    transition: all 0.3s ease;
}

.cookie-btn:hover {
    background-color: #d83312;;
    border: solid 0.5px rgba(234, 234, 234, 0);
}


  
#contenido {
    visibility: hidden;
  }
  
  body.preload-completed #contenido {
    visibility: visible;
  }

  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999999999999999;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease;
  }
  
  #preloader-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }
  
  #preloader-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #lottie-preloader {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  #preloader.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease; /* ← Asegúrate de que sea 1s */
  }

  body.preload-completed #contenido {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s ease;
  }
  
  #contenido {
    opacity: 0;
    visibility: hidden;
  }

li {
    list-style-type: circle;
    margin: 5px 0;
}

.multiply {
    mix-blend-mode: darken;
    will-change: transform; /* o */
    transform: translateZ(0); /* o */
    position: relative; /* esto también ayuda al stacking */
}


.fade-in-up {
    opacity: 0; /* Elemento invisible inicialmente */
    transform: translateY(20px); /* Elemento desplazado hacia abajo */
    transition: opacity 0.8s ease, transform 0.8s ease; /* Transición suave */
}

.fade-in-up.visible {
    opacity: 1; /* Elemento visible */
    transform: translateY(0); /* Elemento en su posición final */
}

.separator {
    position: absolute;
    left: 0px;
    border: none;         /* Elimina el borde por defecto */
    height: 0.5px;          /* Grosor de la línea */
    width: 10vw;
    background-color: #16161d; /* Color de la línea */
}

.max_separator {
    left: 0px;
    border: none;         /* Elimina el borde por defecto */
    height: 0.5px;          /* Grosor de la línea */
    width: 100vw;
    background-color: #16161d; /* Color de la línea */
    transform: translateX(-5vmin);
}

.extrabold {
    font-family: quador, serif;
    font-weight: 600;
    font-style: normal;
    font-size: 3rem;
    line-height: 3.2rem;

}

.general_trans {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }
  
  .general_trans.active {
    opacity: 1;
    transform: translateY(0);
  }


/* ========================== */
/* BUTTON STYLES              */
/* ========================== */

.custom-button-menu {
    position: fixed;
    padding: 5vmin;
    background-color: transparent;
    border: none;
    font-family: quador, serif;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: 0.05rem;
    transition: color 0.5s, letter-spacing 0.5s, font-weight 0.5s;
    z-index: 999;
}

.custom-button-menu:hover {
    letter-spacing: 0.6em;
    font-weight: 200;
}

/* ========================== */
/* BUTTON POSITIONING         */
/* ========================== */

.top-right {
    top: 0;
    right: 0;
}

.bottom-left {
    bottom: 0;
    left: 0;
}

.bottom-right {
    bottom: 0;
    right: 0;
}

/* ========================== */
/* LEGAL TEXT STYLES          */
/* ========================== */

.legal {
    font-family: effra-cc, sans-serif;
    position: fixed;
    bottom: -2.5vmin;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 100;
    font-size: 0.75rem;
    text-align: center;
    opacity: 0.6;
    line-height: 1em;
}

.legal:hover {
    letter-spacing: 0.05rem;
}

.legal_footer {
    font-weight: 100;
    font-size: 0.75rem;
    text-align: center;
}

/* ========================== */
/* LOTTIE ANIMATION           */
/* ========================== */

#lottie-animation {
    width: auto;
    height: 7vmax;
    position: fixed;
    padding: 5vmin;
    z-index: 2;
}

/* ========================== */
/* LAYOUT CLASSES             */
/* ========================== */

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tall {
    height: 120vh;
}

@media (max-width: 1024px) {
    .tall {
      height: 90vh;
    }
  }

.third {
    width: 33vw;
    min-width: 310px;
}

.half {
    width: 66vw;
    min-width: 310px;
}

.legal_info {
    padding: 10vmin;
    max-width: 600px;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .legal_info {
        margin-top: 40vmin;
    }
}

/* ========================== */
/* THEMATIC STYLES            */
/* ========================== */

.bright {
    width: 100vw;
    
    padding: 5vmin;
    box-sizing: border-box;
    background-color: #eaeaea;
    color: #16161d;
    font-weight: 300;
    overflow: hidden;
}

.dark {
    width: 100vw;
    box-sizing: border-box;
    color: #eaeaea;
}

.transparent_background {
    background-color: rgba(22, 22, 29, 0.1);
}

.dark2 {
    width: 100vw;
    box-sizing: border-box;
    background-color: #16161d;
    color: #eaeaea;
}

/* ========================== */
/* TYPOGRAPHY STYLES          */
/* ========================== */

p {
    text-align: justify;
    text-align-last: center;
    max-width: 600px;
    justify-self: center;
}

.p_legal {
    text-align: justify;
    text-align-last: left;
    justify-self: left;
}

h2 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
    text-align: center;
}

h3 {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7rem;
}

h4 {
    font-size: 1.5rem;
    font-weight: 200;
}

h5 {
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 2rem;
}

strong {
    font-weight: 500;
}

a {
    text-decoration: none;
    color: #d83312;
}

.button_footer {
    color: #eaeaea;
    font-size: 1.2rem;
    line-height: 2rem;
}

.button_footer_home {
    color: #eaeaea;
    font-size: 1.2rem;
    line-height: 2rem;
}

.button_footer_white {
    color: #16161d;
    font-size: 1.2rem;
    line-height: 2rem;
}

/* ========================== */
/* NAVIGATION VERTICAL        */
/* ========================== */

.nav-vertical {
    position: fixed;
    left: 2.5vmin;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    z-index: 99999;
}

.nav-vertical div {
    width: 1px;
    height: 5vh;
    background-color: #eaeaea;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.nav-vertical div.active {
    height: 20vh;
    width: 2px;
}

.nav-vertical div.last {
    position: relative;
    padding-left: 40px; /* Agrega el padding izquierdo */
    height: 40vh; /* Mantiene la altura */
    max-height: 350px;
    width: 500px;
    transition: all 0.5s ease;
    overflow: hidden;
}

.link-container {
    transform: translateY(80px);
    display: flex;
    justify-content: space-between;
}


.nav-vertical div.last .nombre-contacto,
.nav-vertical div.last .link-contacto {
    width: 500px;
}

.contenedor_home_nav {
    position: absolute;
    width: 100%;
}

.iconos-container {
    position: relative;
    display: flex;
    flex-direction: row;
    position: inherit;
    margin-top: 1vh;
    gap: 70px;
    left: 40px;
}

.link_contacto_nav {
    color: #eaeaea;
    margin-right: 20px;
    font-size: 1.2rem;
    text-decoration: none; /* Opcional: Para evitar el subrayado predeterminado */
}

.icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icono img {
    width: 25px;
    height: auto;
}



.icono p {
    font-size: 1rem;
    margin-top: 5px;
    color: #eaeaea; /* Color blanco-grisáceo */
}

.icono_red {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icono_red img {
    width: 25px;
    height: auto;
    filter: invert(88%) sepia(4%) saturate(3%) hue-rotate(314deg) brightness(100%) contrast(100%);
    transform: translateY(10px);
}



.icono_red p {
    font-size: 0.9rem;
    margin-top: 5px;
    color: #eaeaea; /* Color blanco-grisáceo */
}


.separator-vertical {
    width: 5px;
    height: 50px;
    background-color: #cc4343;
    z-index: 99999;
}

@media (max-aspect-ratio: 1/1) and (max-width: 767px) {
    .iconos-container {
        gap: 40px;
    }

    .icono img,
    .icono_red img {
        width: 25px;
    }

    .icono p,
    .icono_red p {
        display: none;
    }
}

@media (min-aspect-ratio: 1/1) and (max-width: 933px) {
    .nombre-contacto h2 br {
        display: none;
    }

 

    .icono p,
    .icono_red p {
        display: none;
    }

    .nav-vertical div.last {
        height: 60vh;
    }
}

/* ========================== */
/* CONTACT DETAILS            */
/* ========================== */

.link-contacto {
    position: relative;
    font-weight: 200;
    color: #eaeaea;
    font-size: 1.2rem;
    transition: letter-spacing 0.5s ease;
}

.link-contacto::before{
    opacity: 0;
    transition: all 0.5s ease;
}

.link-contacto::after{
    opacity: 1;
}

.link-contacto:hover {
    letter-spacing: 0.1em;
}

.nombre-contacto {
    position: relative;
    top: 2.5vh;
    color: #eaeaea;

}

.nombre-contacto h2 {
    text-align: left;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.8rem;
}

.nombre-contacto h3 {
    transform: translateY(-30px);
    text-align: left;
    font-size: 1.2rem;
    font-weight: 100;
    line-height: 1.8rem;
}

/* ========================== */
/* MOBILE          */
/* ========================== */

@media (max-width: 768px) {
.mobile_blocked {
    display: none;
}

.cookie-banner {
    right: 5vmin;
}

.nav-vertical div.last {
    width: 300px;
}
}





/* Ocultar en tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-tablet {
      display: none !important;
    }
  }
/* Ocultar en desktop */
 @media (min-width: 1023px) {
    .hidden-desktop {
      display: none !important;
    }
  }
  
  /* Ocultar en móvil */
  @media (max-width: 767px) {
    .hidden-mobile {
      display: none !important;
    }
  }

  /* Botón de descarga */
.standard-btn {
    top: 5vmin;
    right: 5vmin;
    padding: 10px 20px;
    background-color: #16161d;
    color: #eaeaea;
    font-size: 1rem;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.standard-btn:hover {
    background-color: #d83312;
}

/* FOOTERS */
.footer2 {
    position: relative;
    width: 100%;
    padding: 20px; /* Espacio para el contenido */
    box-sizing: border-box;
    background-color: #eaeaea;
    color: #16161d;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Separa el contenido y la imagen */
    align-items: stretch;
    z-index: 99;

}

.footer3 {
    position: relative;
    width: 100%;
    min-height: 50vh; /* Altura dinámica */
    padding: 20px; /* Espacio para el contenido */
    padding-bottom: 250px; /* Reserva espacio para la imagen */
    box-sizing: border-box;
    background-color: #16161d;
    color: #eaeaea;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Separa el contenido y la imagen */
    align-items: stretch;

}

/* Contenedor de la imagen */
#imagen_footer {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    max-height: 250px;
    width: auto;
    max-width: 90%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.legal-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
}

/* Imagen dentro del footer */
#imagen_footer img {
    max-height: 250px;
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.contacto_footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}


.social-icons {
    display: flex;
    gap: 8px;
}
.social-icons img {
    width: 25px;
    height: 25px;
    filter: invert(88%) sepia(4%) saturate(3%) hue-rotate(314deg) brightness(97%) contrast(96%);
}

.copyright_footer {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    text-align: center;
    width: 100%; /* Opcional, para asegurar que el texto no se corte */
}

.contacto_footer a[href$=".vcf"] img {
    width: 40px;
    height: auto; /* Mantiene la proporción */
}

.gallery_container_info {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
}

@media (max-width: 767px) {
    .gallery_container_info {
        grid-template-columns: 1fr;
    }
}


.grill-text {
    width: 80%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}


.estandar_dos_columnas {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
    margin: 0 auto;
    gap: 10vmin;
    transition: all 0.3s ease;
}


.estandar_dos_columnas_syfy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
    margin: 0 auto;
    gap: 5vmin;
    transition: all 0.3s ease;
}

.imagen_estandar_2c {
    max-width: 600px;
    width: 30vmax;
    margin-right: 20px;
}

.texto_estandar_2c {
    display: table-column;
    text-align: justify;
    text-align-last: center;
    padding: 10vmin;
    max-width: 500px;
}

.texto_estandar_1c {
    display: block;
    text-align: justify;
    text-align-last: center;
    padding: 10vmin;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .estandar_dos_columnas {
        flex-direction: column;
        text-align: center;
    }
    .texto_estandar_2c {
        max-width: 800px;
    }
    
}

@media (max-width: 768px) {
    .estandar_dos_columnas {
        flex-direction: column;
        text-align: center;
    }

    .estandar_dos_columnas_syfy {
        flex-direction: column;
        text-align: center;
    }

    .imagen_estandar_2c {
        margin: 0 0 20px 0;
    }
}

.highlights_container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5vmin;
    padding: 10vmin;
    align-items: center;
}

.highlights_container h2 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
    text-align: center;
}

.highlight_text {
    color: #16161d;
    background: transparent;
    font-size: 2rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlights {
    background: #16161d;
    color: #eaeaea;
    margin: 5vmin;
    padding: 5vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    text-align-last: center;
    border-radius: 4px;
}

.highlights h3 {
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: 0.05rem;
    text-align: center;
}

@media (min-width: 768px) {
    .highlights_container {
        grid-template-columns: 1fr 1fr;
    }
}

.separator_section {
    width: 50vw;
    margin: 0 auto; /* Centra horizontalmente */

}

@media (max-width: 768px) {
    .separator_section {
        width: 90vw;
    }
}

.back_button_legal {
    position: fixed;
    right: 10vmin;
    top: 10vmin;
    width: 100px;
}

/* UPCOMING */
.upcoming-container {
    width: 90vw;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2vmin;
    padding-bottom: 2vmin;
    margin-top: 5vw;
    margin-bottom: 5vw;
    margin-left: 5vw;
    margin-right: 5vw;
    border-radius: 4px;
    filter: saturate(60%);
    transition: all 0.5s ease;
}

.upcoming-container:hover {
    padding-top: 5vmin;
    padding-bottom: 5vmin;
}

.upcoming-text {
    position: relative;
    margin-top: 20px;
    color: #eaeaea;
    text-align: center;
    z-index: 2;
    font-size: 1.5rem;
}

.upcoming-title {
    position: relative;
    color: #eaeaea;
    text-align: center;
    z-index: 2;
    font-size: 3rem;
    font-weight: 400;
    padding-left: 5vw;
    padding-right: 5vw;
    line-height: 3.2rem;
   
}

.framed {
    border: 0.5px solid #16161d;
    border-radius: 4px;
    padding: 1vmin 2vmin;
}

.overlay-svg {
    position: absolute;
    width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none; /* ¡clave para no interferir con interacciones! */
    z-index: 999999999;
    opacity: 1;
    transition: opacity 0.3s ease;
}


.center_image {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 20vh;
    max-height: 100%;  /* Mantiene altura sin estirarse */
    width: auto;       /* Deja que el ancho crezca libremente */
    object-fit: contain; /* Asegura que se escale sin deformarse */
    pointer-events: none;
  }

  #video-container {
    position: relative;
    height: 100%;
    overflow: hidden; /* Oculta el desbordamiento horizontal */
  }


  /* ========================== */
/* POPUP            */
/* ========================== */

#device-popup {
    position: fixed;
    top: 0;
    left: 0;
    padding: 5px;
    width: 100%;
    height: 100%;
    background: rgba(22, 22, 29, 0.4);
    color: #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
    text-align-last: center;
    z-index: 99999999999999;
    opacity: 1;
    transition: opacity 0.8s ease;
  }
  
  #device-popup.fade-out {
    opacity: 0;
  }
  
  #device-popup.popup-hidden {
    display: none;
  }
  
  .popup-content {
    max-width: 500px;
    background: #16161d;
    border: #eaeaea;
    border-radius:4px;
    padding: 4rem;
  }
  
  .popup-content h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  
  #countdown {
    margin-top: 1rem;
    font-size: 1.1rem;
  }
  
  #popup-dismiss {
    margin-top: 1.5rem;
    padding: 0.6rem 1.5rem;
    background-color: #eaeaea;
    color: #16161d;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }
  
  #popup-dismiss:hover {
    background-color: #eaeaea;
  }
  
  .still_video {
            left: 50%;
            transform: translateX(-50%);
            max-width: 130vw;
            overflow: hidden;
          }

.foot_project {
    position: relative;
    overflow-x: hidden;
    height: auto;
}

.centered_fit_image_foot {
    position: relative; /* clave: no absolute para mantener altura */
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    max-width: 1200px;
    min-width: 700px;
    height: auto;
}



.cursor-ojo {
    cursor: url('../images/cursors/keyhole.png') 50 35, auto;
  }

.cursor-zoom-in {
    cursor: url('../images/cursors/zoom_in.png') 18 18, auto;
}

#rabbity {
    height: 70vmin;
    margin-bottom: -10vmin;
  }