/* Estilos generales del cuerpo */

 /* todo: clase para botones futuros */
 /* .op-05 {
     opacity: 0.8 !important;
 } */

 body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     height: 100%;
     font-size: 22px;
     color: #383838;
     /* Permite el efecto de scroll */
     /* background-color: #2ecc71; */
     /* Color de fondo verde */
 }

 /* Header */
 header {
     max-height: 30vh;
     height: 350px;
     /* background-color: aqua; */
     width: 100%;
     display: flex;
     /* justify-content: ; */
     align-items: flex-end;

     .header-logo {
         position: absolute;
         background: linear-gradient(90deg, #0c6dff, #0462f0);
         width: 600px;
         height: 200px;
         max-width: 90%;
         margin-bottom: 50px;
         padding: 20px 40px 20px 10%;
         border-radius: 0 40px 40px 0;
     }

     .header-ciclista {
         position: relative;
         height: 150px;
         width: 50%;
         max-width: 100%;
         box-shadow: 0 0 20px #1b1b1bad, inset 0 0 20px #cecece;
         border-radius: 30px 30px 30px 0;
         /* background-color: chartreuse; */
         display: flex;

         .header-cilcista_img {
             width: 30%;

             /* margin-top: -50px auto 0; */
             img {
                 margin: 0 20px;
                 height: 200px;
                 max-width: 100%;
                 margin-top: -50px;
             }
         }

         .header-ciclista_content {
             display: flex;
             align-items: center;
             width: 70%;
             padding: 10px 30px;

             p {
                 padding: 0;
                 margin: 0;
             }
         }
     }
 }


 .bar {
     position: absolute;
     width: 90px;
     left: 0;
     /* top: 400px; */
     z-index: 5;
 }

 .bar_items {
     width: 100%;
     height: 100%;
     border-right: 4px solid #50c9dd;
 }

 button.icons {
     position: relative;
     border: none;
     background-color: transparent;
     padding: 20px;

     .nav-tooltip {
         display: none;
         max-width: 180px;
         width: 180px;
         height: auto;
         position: absolute;
         background-color: #0462f0;
         color: white;
         font-size: 14px;
         border-radius: 10px;
         padding: 10px;
         left: 100%;
         top: 50%;
         transform: translateY(-50%);
         text-align: center;
         margin-left: 10px;
     }
     .nav-tooltip::before {
        content: "";
        position: absolute;
        left: -14px; /* Mueve la pestaña a la izquierda del tooltip */
        top: 50%;
        transform: translateY(-50%);
        border-width: 8px;
        border-style: solid;
        border-color: transparent #0462f0 transparent transparent;
    }
 }

 button.icons:hover {

     .nav-tooltip {
         display: block;
     }
 }


 button.icons img {
     width: 95%;
     margin: 0 auto;
     transition: .3s ease;
 }

 button.icons img:hover {
     width: 100%;
 }

 /* Estilos para el popup */
 .nav-popup {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1000;
     justify-content: center;
     align-items: center;
 }

 .popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 4;
     display: none;
 }

 .popup-content {
     position: relative;
     background-color: #247bff;
     color: #fff;
     border-radius: 8px;
     padding: 20px;
     width: 90%;
     max-width: 700px;
     max-height: 80vh;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     animation: popupFadeIn 0s ease-out;
 }

 .popup-content video {
     width: 100%;
     max-width: 1200px;
     aspect-ratio: 16/9;
     border-radius: 20px;
     box-shadow: 0 0 10px #fff;
 }

 .video-vertical {
     width: 100%;
     height: 80vh;
 }

 .popup-body {
     overflow-y: auto;
     max-height: calc(80vh - 80px);
     padding-right: 10px;

     .img-person {
         background-color: #50c9dd;
         border-radius: 50%;
         width: 100%;
         max-width: 200px;
         margin: 0 10px 10px;
         /* aspect-ratio: 1/1; */
     }

     a {
         color: #ffffff;
     }
 }

 .popup-body::-webkit-scrollbar {
     width: 8px;
 }

 .popup-body::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
 }

 .popup-body::-webkit-scrollbar-thumb {
     background-color: rgba(255, 255, 255, 0.3);
     border-radius: 4px;
 }

 @keyframes popupFadeIn {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 .close-popup {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 54px;
     cursor: pointer;
     color: white;
     line-height: 24px;
 }

 .close-popup:hover {
     color: #f0f0f0;
 }

 button.icons.active .nav-popup {
     display: flex;
 }

 hr {
     border-top: 2px solid #fff !important;
     opacity: 1;
     margin: 5px 0 15px 0;
 }

 /* Clase para cuando el menú se hace fijo */
 .bar--sticky {
     position: fixed;
     top: 30px;
 }

 /* Media queries para responsividad */
 @media (max-width: 768px) {
     .bar {
         width: 70px;
     }

     button.icons {
         padding: 15px;
     }

     .popup-content {
         width: 95%;
         padding: 15px;
     }
 }

 @media (max-width: 480px) {
     .bar {
         width: 60px;
     }

     button.icons {
         padding: 10px;
     }

     .popup-content h3 {
         font-size: 18px;
     }

     .popup-body {
         font-size: 14px;
     }
 }

 main {
     display: flex;
     justify-content: center;
     position: relative;
     height: 4650px;
 }

 /* Estilos de la carretera */
 .background-carretera {
     position: absolute;
     top: 80px;
     /* Inicia la carretera a 500px desde la parte superior */
     width: 70%;
     /* Ancho de la carretera */
     height: 4600px;
     /* Largo de la carretera */
     background-image: url("./img/bg-web.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     overflow: hidden;
     /* Evita que elementos internos sobresalgan */
 }

 .carretera {
     position: relative;
     width: 100%;
     height: 100%;
     /* overflow-y: auto; */

     .p-fixed {
         position: absolute;
         right: 0%;
         width: 220px;
         /* height: 100%; */

         /* Animación para mover el elemento */
         animation: move-fixed auto linear;
         animation-timeline: scroll(root block);
         animation-range: 0px 3900px;
         /* Todo: cambiar */
         /* animation-range: 0px 200px; */
         animation-fill-mode: forwards;

         .title-carga {
             margin: 5px 0;
             font-size: 22px;
             font-weight: bold;
             color: #002f58;
         }

         .cont-carga {
             position: relative;
             width: 100%;
             height: 220px;
             display: flex;
             align-items: end;
             z-index: 4;

             background-color: #fff;
             border-radius: 50%;

             .carga {
                 position: absolute;
                 display: block;
                 width: 50%;
                 height: 10%;
                 /* termina en 98% */
                 /* padding: 1% 0; */
                 margin: 10% 25%;
                 /* border-radius: 50%; */
                 background-color: #8b0000;
                 box-shadow: 0px -10px 10px #8b0000;
                 z-index: 1;
                 animation: progress-grow auto linear;
                 animation-timeline: scroll(root block);
                 animation-range: 0 130px;
                 /* animation-range: 0 2700px; */
                 animation-fill-mode: forwards;
             }

             img {
                 /* opacity: 0.2; */
                 position: absolute;
                 z-index: 2;
                 width: 100%;
                 height: 100%;
             }

             .porcentaje {
                 position: absolute;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 height: 50px;
                 border-radius: 20px;
                 margin-bottom: -30px;
                 /* padding: auto 20px; */
                 width: 100%;
                 background-color: #ea4f5d;
                 z-index: 4;
                 color: #fff;

                 .number {
                     font-size: 35px;
                     font-weight: bold;
                     margin: 0 10px;
                     padding: 0;
                 }

                 .porcentaje-msj {
                     line-height: 20px;
                     font-weight: bold;
                     font-size: 18px;

                     p {
                         margin: 0;
                     }
                 }
             }
         }
     }

 }

 .video {
     background-image: url('./img/backgroundVideo.png');
     background-size: cover;

     /* width: 100%; */
     h1 {
         margin: 0;
     }

     iframe {
         border-radius: 20px;
         margin: 2rem 0;
         width: 100%;
         aspect-ratio: 16/9;
     }
 }

 /* Todo: Animacion de limite de bajada del corazon */
 @keyframes move-fixed {
     from {
         top: 0px;
         /* Posición inicial */
     }

     to {
         /* Todo: Dejar la pocision inicial  */
         top: 3900px;
         /* top: 50px; */
         /* Posición final */
     }
 }

 /* Todo: Animacion de carga roja detras del corazon */
 @keyframes progress-grow {
     from {
         height: 10%;
     }

     to {
         /*Dejar la pocision inicial  */
         /* height: 78%; */
         height: 28%;
     }
 }


 .img-zoom-in img {
     max-width: 160px;
     width: 100%;
     text-align: center;
 }


 .img-zoom-in {
     position: absolute;
     object-fit: cover;
     opacity: 0;
     transition: transform 0.8s ease, opacity 0.8s ease;

     .text-zoomIn {
         background-color: #fff;
         border: 1px solid gray;
         max-width: 200px;
         width: 100%;
         border-radius: 20px;
         padding: 5px 8px;
         margin-bottom: 0;
         font-size: 14px;
         font-weight: bold;
         text-align: center;
         box-shadow: 0 0 5px #131313;
     }
 }

 .img-zoom-in button {
     border-radius: 50%;
     background-color: transparent;
     border: none;
     animation: pulse 1.5s infinite;
     transition: transform 0.2s;
 }

 .img-zoom-in button:hover {
     transform: scale(1.1);
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.1);
         opacity: 0.7;
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 /* Estilos para el tooltip */

 .tooltip {
     position: absolute;
     width: 400px;
     bottom: 100%;
     left: -100px;
     background-color: #333;
     color: white;
     padding: 10px 15px;
     border-radius: 8px;
     margin-bottom: 10px;
     font-size: 14px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 1;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0.3s;
 }

 .tooltip:after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -8px;
     border-width: 8px;
     border-style: solid;
     border-color: #333 transparent transparent transparent;
 }

 .img-zoom-in:hover .tooltip {
     opacity: 1;
     visibility: visible;
 }


 /* Cuando la imagen entra en el viewport */
 .img-zoom-in.visible {
     opacity: 1;
     transform: translateX(-50%) scale(1);
     text-align: center;
     z-index: 3;
 }

 /* Cuando la imagen sale del viewport */
 .img-zoom-in.hidden {
     opacity: 0;
     transform: translateX(-50%) scale(0.5);
 }

 .img-start {
     top: 2px;
     right: 20%;
     transform: translateX(50%);
 }

 .text-flat {
     max-width: 100px;
     font-weight: bold;
     font-size: 14px !important;
     text-shadow: 0 2px 2px #d4d4d4;
 }

 .img-flat {
     top: .9%;
     right: 13%;
     transform: translateX(50%);

     img {
         width: 100px;
     }
 }

 .img-mente {
     top: 235px;
     left: 40%;
     transform: translateX(-50%);
 }

 .img-ojos {
     transform: translateX(50%);
     top: 540px;
     right: 20%;
 }

 .img-orejas {
     top: 860px;
     left: 40%;
     transform: translateX(-50%);
 }

 .img-boca {
     top: 1210px;
     right: 30%;
     transform: translateX(50%);
 }

 .img-cara {
     top: 1560px;
     left: 40%;
     transform: translateX(-50%);
 }

 .img-pulmones {
     top: 1900px;
     right: 20%;
     transform: translateX(50%);
 }

 .img-corazon {
     /* transform: rotate(45deg); */
     top: 2210px;
     left: 40%;
     transform: translateX(-50%);
 }

 .img-sistema {
     top: 2550px;
     right: 20%;
     transform: translateX(50%);
 }

 .img-higado {
     top: 2890px;
     left: 40%;
     transform: translateX(-50%);
 }

 .img-estomago {
     top: 3230px;
     right: 20%;
     transform: translateX(50%);
 }

 .img-pancreas {
     top: 3560px;
     left: 40%;
     transform: translateX(-50%);
 }

 .img-meta {
     top: 3930px;
     right: 20%;
     transform: translateX(50%);
 }

 /* Estilos del popup */
 .popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     z-index: 10;
     transition: opacity 0.3s, visibility 0.3s;
 }

 .popup-content {
     position: relative;
     /* background: #ffffff; */
     background-image: url('./img/Background-popup.png');
     background-size: cover;
     color: #fff;
     padding: 20px;
     border-radius: 10px;
     text-align: center;
     font-size: 18px;
     width: 1200px;
     max-width: 90%;
     max-height: 90%;
     overflow-x: hidden;
     overflow-y: auto;
     /* white-space: nowrap; */
     /* Si es contenido de texto */
     box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
     transform: translateY(-20px);
     transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
 }

 .popup-content::-webkit-scrollbar {
     width: 6px;
 }

 .popup-content::-webkit-scrollbar-track {
     background: transparent;
 }

 .popup-content::-webkit-scrollbar-thumb {
     background-color: #0462f0;
     border-radius: 20px;
     border: 1px solid #f8f8f854;
 }

 .popup-content .popup-video {
     width: 100%;
     aspect-ratio: 16/9;
 }

 .popup-content .popup-list {
     display: flex;
     padding: 20px;
     align-items: center;

     font-size: 18px;

     img {
         height: 40%;
         width: 40%;
     }
 }

 .popup .cerrar {
     position: absolute;
     background-color: #ea4f5d;
     color: #ffffff;
     right: 5px;
     top: 5px;
     width: 50px;
     height: 50px;
     padding: auto;
     border: none;
     box-shadow: 0 0 8px #222222;
     border-radius: 50%;
     transition: .3s ease;
 }

 .popup .cerrar:hover {
     scale: 1.05;
 }

 /* Clase activa para mostrar el popup */
 .popup.mostrar {
     opacity: 1;
     visibility: visible;
 }

 .popup.mostrar .popup-content {
     transform: translateY(0);
 }

 /* Estilos del punto rojo que sigue la carretera */
 .cicla {
     position: absolute;
     width: 100px;
     height: 100px;
     /* background-color: red; */
     /* border-radius: 50%; */
     left: 50%;
     /* top: 10%; */
     margin-top: 55px;
     transform: translateX(-50%);
     z-index: 3;

     .img_clicla {
         width: 100%;
         transition: transform 0.1s ease-out;
         filter: drop-shadow(0 20px 10px #000);
     }

     .img_clicla-mov {
         display: none;
     }

     /* Transiciones suaves */
     /* transition: top 0.3s linear, left 0.3s linear; */
 }

 footer {
     background-image: url('./img/backgroundVideo.png');
     background-size: cover;
     background-position: 0% 88%;

     .b-blue {
         background: #002fffd3;
     }

     .tx-white {
         color: #fff;
     }

     .footer-icon {
         background-color: #ea4f5d;
         border-radius: 50%;
         width: 60px;
         aspect-ratio: 1/1;
         display: flex;
         justify-content: center;
         align-items: center;
         margin: 0 10px;
         transition: .3s ease;

         i {
             color: #fff;
             font-size: 30px;
             padding: 10px;
         }
     }

     .footer-icon:hover {
         scale: 1.05;
     }
 }

 @media(max-width: 1580px) {
     body {
         font-size: 20px;
     }

     header {
         .header-logo {
             width: calc(120px * 3);
             height: 120px;
         }
     }

     .background-carretera {
         width: 90%;
     }

     .bar {
         width: 70px;

         .bar_items {
             button.icons {
                 padding: 8px 10px;
             }
         }
     }

     .img-zoom-in img {
         width: 150px;
         /* Ajusta el tamaño según tu necesidad */
     }

     .popup-content video {
         max-width: 800px;
     }


     .img-flat {
         top: 1.2%;
         right: 15%;

         img {
             width: 80px;
         }
     }
 }

 @media (max-width: 1200px) {
     body {
         font-size: 18px;
     }

     header {
         height: auto;
         align-items: flex-start;
         flex-direction: column;

         .header-logo {
             margin: 20px 0;
             left: 0;
             position: relative;

             img {
                 width: 80%;
                 margin: 0 auto;
             }
         }

         .header-ciclista {
             width: 80%;
             height: auto;
         }
     }

     .carretera {
         .p-fixed {
             width: 180px;

             .cont-carga {
                 height: 180px;
             }
         }
     }

     .img-zoom-in img {
         width: 120px;
         /* Ajusta el tamaño según tu necesidad */
     }

     .img-mente {
         top: 300px;
     }

     .img-ojos {
         top: 640px;
     }

     .img-orejas {
         top: 980px;
     }

     .img-boca {
         top: 1310px;
     }

     .img-cara {
         top: 1680px;
     }

     .img-pulmones {
         top: 2020px;
     }

     .img-corazon {
         top: 2360px;
     }

     .img-flat {
         top: .7%;
         right: 13%;

         img {
             width: 80px;
         }
     }

 }


 @media (max-width: 768px) {

     body {
         font-size: 18px;
     }

     header {
         max-height: 100% !important;

         .header-ciclista {
             flex-direction: column;

             .header-cilcista_img {
                 width: 60% !important;
                 margin: 0 auto;
                 height: auto;

                 img {
                     margin: 0 auto;
                     mask-image: linear-gradient(#fff 80%, transparent);
                 }
             }

             .header-ciclista_content {
                 width: 100%;

                 p {
                     font-size: 16px;
                     text-align: center;
                 }
             }
         }
     }

     main {
         height: 2950px;
     }

     .bar {
         width: 50px;
     }

     .tab-panel {
         width: 500px !important;
     }

     .carretera {
         .p-fixed {
             width: 120px;

             .cont-carga {
                 height: 120px;
             }
         }
     }

     .background-carretera {
         padding: 10px 40px 0 70px;
         width: 100%;
         top: 10px;
         background-image: url('./img/bg-mov.png');
     }

     .cicla {
         .img_clicla {
             display: none;
         }

         .img_clicla-mov {
             display: block;
             width: 50px;
             margin: 0 10px 0 30px;
         }
     }

     .tooltip {
         width: 200px;
         left: -65px;
     }

     .tooltip::after {
         border-color: transparent;
     }

     /* Cuando la imagen entra en el viewport */
     .img-zoom-in.visible {
         opacity: 1;
         transform: none;
         text-align: center;
     }

     /* Cuando la imagen sale del viewport */
     .img-zoom-in.hidden {
         opacity: 0;
         transform: none;
     }

     .img-zoom-in img {
         width: 100px;
         /* Ajusta el tamaño según tu necesidad */
     }

     .img-zoom-in .text-zoomIn {
         font-size: 10px;
         max-width: 100px;
     }

     .img-start {
         top: 0;
         right: 70%;
     }

     .img-mente {
         top: 220px;
         left: 0%;
     }

     .img-ojos {
         top: 560px;
         right: 10%;
     }

     .img-orejas {
         top: 920px;
         left: 0%;
     }

     .img-boca {
         top: 1280px;
         right: 10%;
     }

     .img-cara {
         top: 1600px;
         left: 0%;
     }

     .img-pulmones {
         top: 1950px;
         right: 10%;
     }

     .img-corazon {
         top: 2360px;
         left: 10%;
     }

     .img-sistema {
         top: 2700px;
         right: 0%;
     }

     .img-higado {
         top: 3090px;
         left: 10%;
     }

     .img-estomago {
         top: 3430px;
         right: 0%;
     }

     .img-pancreas {
         top: 3800px;
         left: 10%;
     }

     .img-meta {
         top: 4200px;
         right: 20%;
     }

     .img-flat {
         top: 2.5%;
         right: 17%;

         img {
             width: 50px;
         }
     }

     .p-fixed {
         width: 80px;

         /* animation-range: 0px 200px; */
         /* right: -15% !important; */
         .title-carga {
             /* display: none; */
             font-size: 12px !important;
         }

         .cont-carga {
             height: 80px !important;
             width: 80px !important;
             margin: 0 auto;

             .porcentaje {
                 flex-direction: column;
                 text-align: center;
                 margin-bottom: -75px !important;
                 height: 80px !important;

                 .number {
                     font-size: 23px !important;
                 }

                 .porcentaje-msj {
                     p {
                         font-size: 10px !important;
                         line-height: 12px;
                     }
                 }
             }
         }
     }

     @keyframes move-fixed {
         from {
             top: 0px;
             /* Posición inicial */
         }

         to {
             /* Todo: Dejar la pocision inicial  */
             top: 1000px;
             /* top: 50px; */
             /* Posición final */
         }
     }


 }

 @media(max-width: 590px) {
     main {
         height: 4600px;
     }

     .background-carretera {
         height: 4600px;
     }

     .tab-panel {
         width: 260px !important;
         /* overflow-y: scroll; */
     }

     .p-fixed {
         right: -15% !important;
     }

     .img-flat {
         top: 1%;
         right: -10px;

         img {
             width: 50px;
         }
     }

     .tooltip:after {
         border-color: transparent;
     }
 }