/** para la seccion 4 **/
@media (max-width: 768px) {

  /* navbar móvil ajustes */
  header {
    position: absolute;
    top: 0%;
    height: 8vh;
    inset: 0;
    z-index: 0;
  }

  .vela-menu {
    display: none !important;
  }

  .menu {
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    overflow: hidden;
    z-index: 100;
    background-color: transparent;
    display: block;
  }

  .llama-menu {
    position: absolute;
    width: 20%;
    height: 70%;
    left: 75%;
  }

  .fuego {
    width: 14vw;
    height: auto;
    right: 0%;
    top: 0%;
    right: 3%;
    cursor: pointer;
    z-index: 0;
  }

  .menu-open-mobile {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 25vh;
    width: 100%;
    background: rgba(209, 16, 193, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 25px rgba(238, 108, 221, 0.15);
    z-index: 100 !important;
  }

  .contenedor-video {
    position: relative;
    top: 15% !important;
    width: 100% !important;
    height: 80% !important;
    display: flex;
  }

  .contenedor-video video {
    width: 85% !important;
    height: auto !important;
    top: 25% !important;
  }

  .seccion4 #cursor-img {
    display: none;
  }

  .menu ul {
    position: relative;
    top: -10% !important;
    align-items: center;
    padding-left: 0;
    padding-top: 10px;
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 50% !important;
    height: 100%;
    z-index: 20;
  }

  .seccion4 .menu ul {
    position: relative;
    top: -15% !important;
    height: 100%;
  }

  .close-btn {
    display: none;
    position: absolute;
    top: 10%;
    right: 5%;
  }

  .seccion4 .close-btn {
    color: var(--segundo-color);
    font-size: 2rem;
    font-family: 'Amarante';
    font-weight: bold;
    cursor: pointer;
    z-index: 101;
  }

  .menu-open-mobile .close-btn {
    display: block !important;
    position: absolute;
  }

  .close-btn h2 {
    position: absolute;
    font-size: 2rem;
    font-family: 'Amarante';
    font-weight: bold;
    color: var(--segundo-color);
    cursor: pointer;
    z-index: 101;
    line-height: 1;
    right: 5%;
    top: 20%;
  }

  ul.mainmenu {
    margin-top: 10% !important;
  }

  li {
    position: relative;
    top: 5% !important;
  }

  ul.mainmenu li a {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: 'Amarante';
    text-decoration: none;
    color: var(--noveno-color);
  }

  .seccion4 ul.mainmenu li a {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: 'Amarante';
    text-decoration: none;
    color: var(--noveno-color);
  }

  ul.mainmenu li a:hover {
    text-decoration: underline;
    color: var(--tercer-color);
  }

  .menu-open-mobile .close-btn {
    display: block;
  }

  ul#mainMenu li {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto;
    margin: 3px;
  }

  /*fin menu*/
  .mostrar-boton {
    display: flex;
    text-decoration: none;
    flex-direction: column;
    width: 45px;
    height: 60px;
    z-index: 2;
    margin-left: 15%;
    margin-top: 10%;
    color: var(--segundo-color);
    font-family: 'Amarante';
    font-size: 1.2rem;
    font-weight: bold;
  }

  .seccion1 .mostrar-boton {
    position: absolute;
    left: 15%;
    top: 20%;
    z-index: 10;
  }

  .seccion4 .mostrar-boton {
    position: absolute;
    left: -1%;
    top: 20%;
    z-index: 10;
  }
  .seccion1 .video-interprete {
    position: absolute;
    left: 23%;  
  }

  .seccion1 .cerrar-boton {
    position: absolute;
    left: 80%;  
    
  }

  .modal.fullscreen-modal {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
  }

  .modal-content video {
    width: 80%;
    height: auto;
  }

  .btn-cerrar {
    width: 50px;
    height: 50px;
    right: 7%;
    border-radius: 50%;
    font-size: 4.5vw;
  }

  .bloque-interprete {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0%;
    top: 0%;
    width: 40%;
    height: 15%;
    z-index: 100;
  }

  .seccion1 .bloque-interprete {
    left: -7%;
  }

  .video-interprete {
    width: 65%;
    height: 55%;
    top: 11%;
    left: 10%;
    position: absolute;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    z-index: 100;
  }

  .cerrar-boton {
    position: absolute;
    top: 5%;
    right: 23%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 1000;
  }

  .close-icon {
    font-size: 1rem;
    font-family: 'Amarante';
    font-weight: 900;
    color: var(--segundo-color);
    cursor: pointer;
    z-index: 1000;
  }

  /*slider secc2*/
  .contenedor-slider {
    position: relative;
    top: 0;
    flex-direction: column;
  }

  .slider {
    position: relative;
    top: 5% !important;
    width: 90%;
    height: 40%;
  }

  .papiro-container {
    top: -5%;
    width: 100%;
    height: 40%;
  }

  .papiro-centro {
    position: absolute;
    width: 85%;
    height: 80%;
    top: -3%;

  }

  .papiro-contenido h1 {
    top: 5%;
    width: 100%;
    font-size: 1.2rem;
    opacity: 0.8;
  
  }

  .papiro-contenido p {
    margin-top: 0%;
    width: 100%;
    height: 85%;
    text-align: center;
    font-size: 0.7rem;

  }

  .prev-secc2,
  .next-secc2 {
    top: 40%;
  }

  .prev-secc2 {
    left: -3% !important;
  }

  .next-secc2 {
    right: -3% !important;
  }

  .papiro-izquierdo {
    left: 0%;
    top:18%;
    height: 75%;
    position: absolute;
    background-size: contain;
  }

  .papiro-derecho {
    right: 1%;
    top:18%;
    height: 75%;
    position: absolute;
    background-size: contain;
  }
  /*fin slider secc2*/

  /*slider 3d*/
  .seccion3 {
    flex-direction: column !important;
    z-index: 0;
  }

  .contenedor-carrusel-secc3 {
    position: relative;
    top: 0%;
  }

  /* fin delslider 3d*/
  /*interprete*/
  .seccion3 .mostrar-boton {
    position: absolute;
    top: -30% !important;
    left: 3%;
    width: 45px;
    height: 60px;
    flex-direction: column !important;
    gap: 10px;
  }

  .seccion3 .mostrar-boton span {
    font-size: 1.2rem !important;
  }

  .seccion3 .mostrar-boton p {
    font-size: 0.7rem !important;
  }

  .seccion3 .bloque-interprete {

    top: -3% !important;
    z-index: 1000;
  }

  .seccion3 .close-icon {
    z-index: 1000;
  }

  .seccion5 .bloque-interprete {
    top: 7% !important;
    z-index: 10;
  }

  .seccion6 .bloque-interprete {
    top: 13% !important;
    z-index: 10;
  }

  .seccion3 .interprete {
    position: absolute !important;
    background: none !important;
    z-index: 10;
  }

  /** btn calavera **/
  .flotante-calavera {
    position: absolute;
    display: flex;
    text-align: center;
    justify-content: center;
    width: 25%;
    height: 15%;
    right: 0%;
    top: 85%;
  }

  .flotante-calavera img {
    position: absolute;
    display: flex;
    text-align: center;
    left: 20%;
    top: 27%;
    width: 60px;
  }
  #pagina2 .flotante-calavera img {
  top: 15% !important;
  }
  #pagina2 .flotante-calavera {
     top: 85% !important;
  }
  .about-title {
    font-size: 4.5rem;
  }

  .card {
    width: 200px;
    height: 280px;
  }

  .card.left-2 {
    transform: translateX(-250px) scale(0.8) translateZ(-300px);
  }

  .card.left-1 {
    transform: translateX(-120px) scale(0.9) translateZ(-100px);
  }

  .card.right-1 {
    transform: translateX(120px) scale(0.9) translateZ(-100px);
  }

  .card.right-2 {
    transform: translateX(250px) scale(0.8) translateZ(-300px);
  }

  .member-name {
    font-size: 2rem;
  }

  .member-role {
    font-size: 1.2rem;
  }

  .member-name::before,
  .member-name::after {
    width: 50px;
  }

  .member-name::before {
    left: -70px;
  }

  .member-name::after {
    right: -70px;
  }

  /*modal mapa tunja*/
  .body-no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 900px;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .modal-secc3 {
    position: fixed !important;
    overflow: hidden !important;
    z-index: 99999;
  }

  .btn-brujula {
    position: absolute;
    top: 85%;
    left: 0;
    width: 30%;
    height: 15%;
   
  }
  .brujula {
    position: absolute !important;
    width: 60% !important;
    height: auto !important;
    top: 20% !important;
    left: 5% !important;
  }

  .modal-contenido-secc3 {
    width: 97%;
    height: 97%;
    z-index: 99999;
  }

  .mapa-wrapper {
    position: relative;
    width: 98%;
    height: 98%;
    z-index: 90;
  }

  .cerrar-secc3 {
    position: absolute;
    z-index: 99999;
  }

  .tunja {
    position: relative;
    top: 30%;
    left: -25%;
    width: auto;
    height: 50%;
    z-index: 1;
    transform: rotate(90deg) !important;
  }

  .pin {
    width: 15px;
    transform: rotate(90deg);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 20 !important;
  }

  .pin:hover {
    transform: rotate(90deg) scale(1.1);
    opacity: 0.8;
     z-index: 25 !important;
  }

  .pin-catedral {
    top: 42% !important;
    left: 82% !important;
    z-index: 1 !important;
  }

  #tooltip-catedral {
    transform: rotate(-90deg);
    top: -30% !important;
    left: -600% !important;
    z-index: 9999 !important;
  }

  .pin-cojines {
    top: 63% !important;
    left: 43% !important;
    z-index: 1 !important;
  }

  #tooltip-cojines {
    transform: rotate(-90deg);
    left: 310%;
  }

  .pin-agustin {
    top: 39% !important;
    left: 64% !important;
    z-index: 1 !important;
  }

  #tooltip-agustin {
    transform: rotate(-90deg);
    left: -210%;
    z-index: 9999 !important;
  }

  .pin-biblioteca1 {
    top: 44% !important;
    left: 67% !important;
    z-index: 1 !important;
  }

  #tooltip-biblioteca1 {
    transform: rotate(-90deg);
    top: -30% !important;
    left: -600% !important;
    z-index: 100 !important;
    width: 140px;
    height: 120px;
  }

  .pin-biblioteca2 {
    top: 45% !important;
    left: 60% !important;
    z-index: 1 !important;
  }

  #tooltip-biblioteca2 {
    transform: rotate(-90deg);
    top: 5%;
    left: -120%;
    z-index: 100 !important;
  }
  

  /** footer **/
  .footer {
    display: flex;
    flex-direction: column;
  }

  .primer-contenedor {
    position: relative;
    top: 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  .redes-logos {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .redes-sociales {
    gap: 6vw;
  }

  .redes-sociales img {
    width: 10vw;
    height: 12vw;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 60px 60px -60px rgba(165, 171, 233, 0.5);
    border-radius: 10px;
  }

  .logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .logos img:nth-child(1) {
    position: relative;
    right: 10%;
    width: 12% !important;
    height: auto;
  }

  .logos img:nth-child(2) {
    position: relative;
    left: 10%;
    width: 28% !important;
    height: auto;
  }

  .enlaces {
    display: flex;
    width: 100%;
    height: 30%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .enlaces a {
    font-size: 0.8rem;
  }

  .copy p {
    position: relative;
    top: 10% !important;
    font-size: 0.5rem;
  }

  .seccion4 {
    width: 100%;
    height: 100vh !important;
  }

  .seccion5 {
    position: relative;
    width: 100%;
    height: 100vh !important;
  }

  .seccion5 .bloque-interprete {
    position: absolute;
    width: 40%;
    height: 15%;
  }

  .seccion5 .mostrar-boton {
    position: absolute;
    display: flex;
    top: 8% !important;
    left: 0%;
  }

  .about-title {
    position: absolute;
    width: 100%;
    top: 0% !important;
    font-size: 4rem !important;
  }

  /** equipo **/
  .swiper {
    width: 80%;
    max-width: 350px;
    height: 620px;
    top: 18%;
    padding-left: auto;
    padding-right: auto;
    padding: 0%;
    overflow: visible;
  }

  .swiper-wrapper {
    width: 100% !important;
  }

  .swiper-slide {
    position: relative;
    display: flex;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .team-photo {
    position: relative;
    top: 3%;
    width: 200px !important;
    height: 280px !important;
    object-fit: cover;
  }

  .member-name {
    position: relative;
    top: 10%;
  }

  .member-role {
    position: relative;
    top: 10%;
  }

  .member-portafolio {
    position: relative;
    top: 10%;
  }

  .member-portafolio a {
    position: relative;
    top: 10%;
    width: 100%;
    height: 100%;
  }

  .swiper-button-next {
    right: 10px !important;
  }

  .swiper-button-prev {
    left: 10px !important;
  }

  /* fin seccion 6 */
  iframe {
    position: absolute;
    left: 5%;
    top: 35%;
    width: 87%;
    height: 45% !important;
    z-index: 1;
    object-fit: cover;
    border-radius: 10px;
  }

  .store-links {
    position: absolute;
    top: 87%;
    left: 5%;
    width: 55px;
    height: 55px;
    display: flex;
    border-radius: 50%;
    background-color: var(--tercer-color);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .store-links img {
    width: 80%;
  }

  .seccion6 {
    width: 100%;
    height: 80vh !important;
  }

  .modalSecc6 {
    width: 100%;
    height: 100%;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .modal-contenidoSecc6 {
    width: 80%;
    height: 85%;
  }

  /* phone modal video juego */
  #phone {
    left: 20%;
    transform: translate(-40%, 35%) scale(0.7) rotate(-10deg);
    width: 240px;
  }

  #phone:before {
    top: -0.5px;
    left: 50%;
    height: 10px;
    width: 120px;
  }

  #phone .screen {
    border-radius: 24px;
  }

  #video-game-player {
    position: relative;
    top: 3%;
    left: 5%;
    width: 90%;
    height: 95%;
  }

  .invitacion {
    width: 100%;
    height: 10%;
    display: flex;
    position: absolute;
    left: 0%;
    top: 10%;
    color: var(--segundo-color) !important;
  }

  .invitacion a {
    text-align: center;
    font-size: 1rem;
  }

}

@media (max-width: 600px) {
  .carrusel-item-secc3 {
    flex: 0 0 100% !important;
    height: 100%;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .carrusel-track-secc3 {
    height: 100%;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .prev-secc3,
  .next-secc3 {
    top: 45%;
  }

  .prev-secc3 {
    left: 2% !important;
  }

  .next-secc3 {
    right: 2% !important;
  }

  .cards-secc3 {
    width: 280px;
    height: 520px;
    position: relative;
    top: -2%;
    z-index: 1000;
    perspective: 1000px;
  }

  .segunda-img-secc3 {
    top: 15%;
  }

  /* Opcional: Asegurar que el contenedor ocupe el 100% */
  .contenedor-carrusel-secc3 {
    width: 100% !important;
  }
}

/* pantallas 24" & 17" 1920* */
@media (min-width: 1920px) and (max-height: 1080px) {

}

@media (min-width: 2000px) {}

/* pantallas 32" */
@media (min-width: 1921px) and (max-width: 3840px) {}

/* pantallas 20" 1600*900 */
@media (min-width: 1600px) and (max-width: 1600px) {
  /* seccion 2 */
  .seccion2 #bloque-interprete {
    position: absolute;
    top: 20px !important;
  }

  .slider {
    position: relative;
    margin-top: 8% !important;
  }

  .slide img {
    margin-top: -5%;
  }

  .papiro-centro {
    position: absolute;
    top: 10% !important;
  }

  .contenedor-carrusel-secc3 {
    width: 80% !important;
    max-width: 1300px !important;
    height: 80% !important;
    margin-top: 10%;
  }

  .cards-secc3 {
    top: -15% !important;
    width: 260px !important;
    height: 490px !important;
    position: relative;
    perspective: 1000px;
  }

  #btnBrujula {
    position: relative;
    top: -60px !important;
    margin-left: -50% !important;
    width: 60px !important;
  }

  .tunja {
    width: 78%;
    height: 85%;
    left: 10%;
  }

  .flotante-calavera img {
    width: 58px !important;
  }

  .swiper {
    position: relative;
    height: 600px !important;
  }

  #swiper-slide {
    width: 320px !important;
    height: 540px !important;

  }

  #team-photo {
    width: 220px !important;
    height: 320px !important;
  }
}

@media (min-width: 1600px) {
  .fuego {
    right: 22% !important;
  }

  li a {
    font-size: 1.3rem;
  }

  .seccion2 #bloque-interprete {
    position: relative;
    top: -47% !important;
    left: 2% !important;
  }

  .contenedor-slider .slider {
    top: 0% !important;
  }

  .papiro-centro {
    margin-top: 7%;
    width: 80% !important;
    height: 80% !important;
    top: 3%;
  }

  .prev-secc2 {
    left: 3% !important;
  }

  .next-secc2 {
    right: 3% !important;
  }

  .seccion3 .mostrar-boton {
    top: 0%;
  }

  .contenedor-carrusel-secc3 {
    width: 100% !important;
    max-width: 1600px;
  }

  .carrusel-track-secc3 {
    gap: 30px;
    width: 100% !important;
  }

  .carrusel-secc3 {
    width: 88% !important;
  }

  .cards-secc3 {
    width: 340px;
    height: 620px;
    top: -10%;
  }

  .carrusel-item-secc3 {
    flex: 0 0 calc((100% - 25px) / 4);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 380px;
    margin-top: 22%;
  }

  .brujula {
    width: 5vw !important;
  }

  .flotante-calavera img {
    width: 80px;
  }

  .swiper {
    width: 80%;
    height: 800px;
  }

  .swiper-slide {
    width: 440px !important;
    height: 720px !important;
  }

  .team-photo {
    width: 360px !important;
    height: 520px !important;
  }
}