@charset "UTF-8";
/*!
 */
:root {
    --cl-azul: #0f6fec;
    --cl-gris:#ececec;
    --cl-gris1:#242424;
    --cl-gris2:#333;
    --cl-gris3:#343434;
    --cl-gris4:#23262f;
    --cl-gris-azul:#777e90;
    --cl-dorado:#f1c27d;
    --cl-doraro2:#F5BE9C;
    --cl-doraro3:#D89C6E;
    --cl-naranja:#FF9100;
    --cl-naranja:#fe5f49;
    --cl-blanco:#fff;
    --cl-rojo:#ff3d65;
    --cl-rosa:#ff27ef;
    --cl-amarillo:#ffcd06;
    --cl-verde:#00FF80;
    --cl-morado:#7600fd;
    --cl-negro:#1a1a1a;
    --cl-negro2:#151412;
}

.color{
  background: #fff;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

.social-media{
  font-family: 'Social Media';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(../fonts/MaterialIcons-Regular.woff) format('woff'),
       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}


@font-face {
  font-family: 'Social Media';
  src: local('Smartphone Color Pro'),
       local('SmartphoneColorPro');
    src: 
          url('../fonts/SmartphoneColorPro.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/SmartphoneColorPro.woff') format('woff'),
         url('../fonts/SmartphoneColorPro.ttf') format('truetype'),
         url('../fonts/SmartphoneColorPro.svg') format('svg');
  font-weight: 200;
  font-style: normal;
  }


body{
  font-family:"Roboto",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  /* font-family: 'Gotham', sans-serif, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; */
  /* font-family: "Poppins",sans-serif; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
 /* transition:all .5s;*/
 font-weight: 600;
 font-style: normal;

}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

i.fa-solid{
  font-size: 16px;
}

html, body{
  min-height: 100%;
  height: 100%;
  background:#000;
  color: var(--cl-blanco);
}

.cont{
    margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1600px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.navbar001{
  display: flex;
  justify-content: space-between;
  height: 80px;
 background: #000;
  padding-top: 19px;
  padding-bottom: 19px;
}

.menu-top{
  display: flex;
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  height: 42px;
}
.menu-top li{
  height: 100%;
  display: flex;
}
.fixed-top{
  background: #000;
}


.menu-top li span{
  margin: auto;
  height: 100%;
  text-decoration: none;
  color: #fff;
  padding: 13px 16px 13px 16px;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
}
.menu-top li span:hover{
  color: var(--cl-dorado);
}
.menu-logo a{
  width: 100%;
  height: 100%;
  display: block;
}
.menu-logo a img{
  margin-top: -10px;
}
.btn-search{
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display:flex;
  border: none;
  background: none;
  margin: auto;
  color: #fff;
}
.btn-search i{
  margin: auto;
}

.menu-izq{
  display: flex;
}

.btn-acceso{
  margin: auto;
  height: 100%;
  text-decoration: none;
  color: #fff;
  padding: 13px 16px 13px 16px;
  font-size: 14px;
  line-height: 16px;
}
.btn-compra{
  margin: auto;
  height: 100%;
  text-decoration: none;
  color: #fff;
  padding: 13px 16px 13px 16px;
  font-size: 14px;
  line-height: 16px;
  background: var(--cl-blanco);
  border-radius: 21px;
  color: #000;
}
.menu-logo{
  width: 255px;
}
.head-top{
  height: 100%;
  background: #000000;
  border-radius: 16px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
main{
  padding-top: 80px;
  min-height: 100%;
  height: 100%;
}
.cont-sect{
  height:calc(100svh - 80px);
  padding-bottom: 16px;
}
.degradado-top{
  background: linear-gradient(to top, #022886 0%, rgba(0, 0, 0, 0) 50%);
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  border-radius: 16px;
}

.frase-video{
  padding: 40px;
  z-index: 2;
  width: 100%;
  display:flex;
}
.frh2{
  width: calc(100% - 384px);
}
.frh2 h2{
  font-size: 5rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 15px;
}
.frvid{
  width:384px ;
  
  
}
.frvid video{
  border-radius: 16px;
  width: 100%;
  object-fit: cover;
}
.frvid p{
  font-size: 1rem;
  margin-bottom: 0;
  text-transform: uppercase;
}
.frvid p span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00FF80;
  display: inline-block;
  margin-right: 10px;

}
.btn-a{
  font-size: 1rem;
  text-decoration: none;
  color: var(--cl-negro);
  background: var(--cl-blanco);
  padding: 16px;
  line-height: 1;
  border-radius: 25px;
  display: inline-block;
}

.owl-prev{
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background:rgba(77, 77, 77, 0.51) !important;
  display: flex;
  transition: all .3s;
}
.owl-prev span{
  margin: auto;
  font-size: 26px;

  display: flex;
}
.owl-prev span i{
  margin: auto;
}
.owl-next{
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background:rgba(77, 77, 77, 0.51) !important;
  display: flex;
  transition: all .3s;
}
.owl-prev:hover,.owl-next:hover{
  background:rgba(77, 77, 77, 1) !important;
}


.owl-next span{
  margin: auto;
  font-size: 26px;
  display: flex;

}
.owl-next span i{
  margin: auto;
}
.owl-nav{
  display: flex;
  gap: 15px;
  padding-top: 15px;
}
.vid-tic{
  height: 450px;
  width: 300px;
  overflow: hidden;
  display: flex;
  border-radius: 1rem;
  align-items: end;
  text-decoration: none;
}
.vid-tic figure{
  position: absolute;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.vid-tic figure video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owl-dots {
  display: flex;
gap: 5px;
justify-content: center;
margin-top: 1rem;
margin-bottom: 1rem;

}
.owl-dot {
  display: flex;
 
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff !important;
  opacity: .2;
}
.owl-dot.active {
  opacity: 1;
}
.full-w{
  width: 100%;
}
.sec2-full{
  padding-top: 12rem;
  padding-bottom: 12rem;
  position: relative;
}
.vid-sec2{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.vid-sec2 video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tx-fr-vid{
  z-index: 1;
  position: relative;
  max-width: 44rem;
  margin: auto;
  text-align: center;
}
.tx-fr-vid h2{
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 15px;
}
.tx-fr-vid p{
  font-size: 18px;
  margin-bottom: 30px;
  opacity: .8;
}
.vid-tic figure::before{
  width: 100%;
  height: 100%;
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);
  content: "";
  position: absolute;

}
.vid-tic figcaption{
  z-index: 2;
  text-align: center;
  width: 100%;
  padding:1.5rem 2.5rem;

}
.vid-tic figcaption p{
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  opacity: .7;
  margin-bottom: 0;
  
}
.vid-tic figcaption img{
  max-width: 160px;
  margin: auto;
}

.vid-sec2::before{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  content: '';
  opacity: .3;
}
.listado-pilares{
  display: flex;
}
.listado-pilares article{
  width: calc(50% - 15px);
}
.listado-enlaces{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 50px;
}

.listado-enlaces li a{
  text-decoration: none;
  color: #000;
  font-size: 3.5rem;
  line-height: 1;
  transition: all .5s;
}
.bg-blanco{
  background: var(--cl-blanco);
  padding-top: 5rem;
    padding-bottom: 5rem;
}
.listado-enlaces li a span{
  background: var(--cl-gris);
  font-size: 16px;
  padding: 1rem;
  border-radius: 25px;
  vertical-align: super;
  opacity: 0;
  transition: all .5s;
}
.listado-enlaces li:hover a span{
  opacity: 1;
}
.listado-enlaces li a span i{
  vertical-align: middle;
}
.listado-img-pilares{
  width: 100%;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
}



.listado-pilares h3{
  font-size: 1rem;
  color: var(--cl-gris4);
}

.head-top img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.listado-img-pilares img {
  opacity: 0;
  transition: opacity 0.5s ease; /* Efecto de desvanecimiento */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ajustar según el tamaño deseado */
  height: auto; /* Mantener proporción */
  display: block;
  z-index: 0;
}

.listado-img-pilares img.active,
.listado-img-pilares img.default {
    opacity: 1;
    z-index: 1;
}
.listado-enlaces:hover li a{
  color: #686868;
}
.listado-enlaces li:hover a{
  color: #000 ;
}

.list-coment figure{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.list-fondo{
  width: 100%; 

  position: relative;
  margin-bottom: 0;
}
.list-fondo li{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  padding-top:5rem ;
  padding-bottom:5rem ;
  overflow: hidden;
  display: flex;
  align-items: end;

}
.list-fondo li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
}
.list-fondo li p{
 z-index: 1;
 position: relative;
 font-size: 2rem;
 line-height: 1.2;
 left: 50%;
 width: 45%;
 margin-bottom: 1.4rem;
}
/* Inicialmente ocultamos los elementos */
.list-fondo li,
.list-frase li {
  opacity: 0;
  transform: translateY(20px); /* Para el efecto fade-up */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Transición suave */
}

/* Efecto fade-up para las frases */
.list-frase li.show {
  z-index: 1
  ;
  opacity: 1;
  transform: translateY(0);
}

/* Efecto fade-in para los fondos */
.list-fondo li.show {
  opacity: 1;
  transform: translateY(0);
}

.list-coment, .list-fondo, .list-frase{
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
.cont-fondo{
  position: relative;
}
.list-fondo{
  position: absolute;
  height: 100%;
}

.list-coment{
  display: flex;
  z-index: 3;
  position: relative;
  width: 50%;
  left: 50%;
  align-items: end;
  height: 100%;
}
.list-coment li{
  display: flex;
  margin: auto;
  text-align: center;
  flex-direction: column;
  margin-bottom: 15px;
}
.list-coment li figure{
  margin: auto;
}
.list-coment li strong{
  font-size: 1rem;
  line-height: 1;
}

.list-coment li small{
  font-size: 12px;
}
.cont-fondo{
  height: 35rem;
  position: relative;
  margin-bottom: 4rem;
}
.list-coment li figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cali{
  display: flex;
}
.cali figure{
  width: 66.666667%;
  aspect-ratio: 16/9;
 position: relative;
  
  margin-bottom: 0;
}

.cali figcaption{
  width: 33.333333%;
  padding: 5rem;
}
.cali figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem 1rem 0 1rem;
}

.cont-dest{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.dest-logos{
  width: 66.666667%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.dest-video{
  width: 33.333333%;
  /* border-radius: 0 1rem 1rem  1rem;
  overflow: hidden; */
}
.dest-video img{
  border-radius:  1rem 1rem 0 1rem;
}
.destacados{
  display: flex;
  margin-bottom: 3rem;
}
.dest-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 1rem 1rem 1rem;
  
}
.cont-dest img{
  height: 60px;
  width: auto;
}

.resul{
  display: flex;
}
.resul-h3{
  width: 66.666667%;
}
.resul-tx{
  width: 33.333333%;
 
}
.vid-tic2 {
  width: 340px;
  display: flex;
  align-items: end;
  text-decoration: none;
  flex-direction: column;
}

.vid-tic2 figure {
  height: 550px;
  width: 340px;
  overflow: hidden;
position: relative;
  border-radius: 1rem;

  margin-bottom: 0;
  border-radius: 1rem;
  overflow: hidden;
}
.vid-tic2 figure img{
  position: absolute;
  width: 60% !important;
  padding: 1rem 2rem;
  bottom: 0;
}
.vid-tic2 figcaption {
  z-index: 2;
  text-align: left;
  width: 100%;
  padding-top: 15px;
 
}
.vid-tic2 figcaption p{
  margin-bottom: 0;
  color: #666;
}
.vid-tic2 figcaption small{
  font-size: .7rem;
  font-weight: 400;
}

.sec-tx-curso{
  width: 66.666667%;
}
.item-eventos{
  aspect-ratio: 16/8;
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
  align-items: end;
}
.item-eventos figure{
  width: 100%;
  position: absolute;
  height: 100%;
  border-radius: 1rem;
  margin-bottom: 0;
}
.item-eventos figure >img{
  object-fit: cover;
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
}
.item-eventos figcaption{
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.sec-img-curso{
  width: 33.333333%;
  display: flex;
}
.sec-img-curso img{
  background: #000;
  padding: 2rem;
  width: 220px !important;
  margin: auto;
  display: block;
  border-radius: 1rem;
  margin-bottom: 2rem;
}
.sec-tx-curso{
  padding: 2rem;
  ;
}
.sec-tx-curso h3{
  font-size: 4rem;
  line-height: 1;
  font-weight: 600;
  width: 70%;
}
.sec-tx-curso p{
  width: 60%;
}
.fecha01{
  display: flex;
  width: calc(100% - 160px);
}
.fecha01 p{
  width: 100%;
  margin-bottom: 0;
}
.btnfechas{
  display: flex;
  align-items: start;
  
}

.fecha01 div{
  width: 33%;
  padding: 0 1rem;
}
.fecha01 small{
  font-size: .7rem;
  text-transform: uppercase;
  font-weight: 400;
}


.item-eventos figure::before {
  background: linear-gradient(to top,  #266c73 0%, rgba(0, 0, 0, 0) 50%);
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  border-radius: 16px;
  content: '';
}

.frase-centro{
  width: 80%;
  margin: auto;
  text-align: center;
  color: #000;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.frase-centro h3{
  font-size: 4rem;
  font-weight: bold;
}
.tx-negro{
  color: #000;
}
.tx-gris{
  color: #666666;
}
.h3t1{
  font-size: 3rem;
  line-height: 1;
  width: 60%;
  font-weight: 600;
}
.bg-blanco2{
  background: #fff;
  padding-bottom: 1rem;
}
.cali p{
  color: #666;
  font-size: 1.2rem;
  line-height: 1.6;
}

.btn-a-blanco{
  background:#f6f6f7 ;
}
.btn-a-blanco:hover{
  background:#d3d3d3 ;
}
.numresul{
  display: flex;
}
.numresul div{
  width: 50%;
}
.numresul div strong{
  font-size: 3rem;
  display: block;
  font-weight: 600;
}
.numresul div p{
  font-size: 1.4rem;
  line-height: 1;
}


.owl-eventos .owl-next, .owl-eventos .owl-prev, .owl-test .owl-prev,.owl-test .owl-next{
  background: #d1d1d1 !important;
}
.owl-eventos .owl-dot, .owl-test .owl-dot{
  background: #777777 !important;
}
.owl-eventos .owl-dot.active, .owl-test .owl-dot.active{
  background: #242424 !important;
}


.owl-eventos .owl-nav, .owl-test .owl-nav, .owl-galery .owl-nav{
  position: absolute;
  top: -80px;
  right: 0;
}
.head-prox{
  display: flex;
  color: #000;
  align-items: start;
  margin-bottom: 2rem;
  margin-top: 2rem;
}
.head-prox h3{
  font-size: 2rem;
  font-weight: 600;
  margin-right: 1rem;
  line-height: 1;
  margin-bottom: 0;
}
.head-prox span{
  width: 2rem;
  height: 2rem;
  display: flex;
}
.head-prox span i{
  margin: auto;
}
.head-prox a{
  text-decoration: none;
  line-height: 2rem;
  color: #666;
  display: flex;
}
.gia-exp{
  margin-bottom: 0;
  display: flex;
}
.tx-blanco{
  color: #fff !important;
}
.tx-blanco p{
  color: #fff;
}

.asp16-9{
  aspect-ratio: 16/9 ;
}
.padrem2{
  padding: 3rem !important;
}

.dest-logos h2{
  font-size: 4rem;
  text-align: left;
  font-weight: 600;
  padding-left: 1rem;
}
.fondo-pie{
padding-top: 6rem;
padding-bottom: 6rem;
}
.frasepie{
  text-align: center;
  width: 50%;
  margin: auto;

}
.frasepie h3{
  font-weight: bold;
  font-size: 3rem;
}
.frasepie p{
  color: #666;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.list-pie{
  list-style: none;
  padding-left: 0;
  
}
.list-pie li a{
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.list-pie li {
  margin-bottom: 1rem;
}
.link-pie a{
  color: #fff;
  text-decoration: none;
  font-size: .8rem;
  margin-bottom: 1rem;
  display: block;
}
.link-pie a strong{
  display: block;
  margin-bottom: .4rem;
}
.link-pie a span{
  color: #666;
}
.menu-pie{
  margin-bottom: 2rem;
}

.pie00{
  margin-bottom: 2rem;
}
.pie00 a{
  font-size: .8rem;
  color: #666;
  text-decoration: none;
  margin-right: 1rem;
}
.pie00 span{
  color: #666;
  font-size: .8rem;
}
.fondo-pie{
  position: relative;
}
.fondo-pie-degra{
  background: url(../img/pie1.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.degra-negro{
  width: 100%;
  height: 100%;
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  content: "";
  position: absolute;
}
.fondo-pie .cont{
  z-index: 2;
  position: relative;
}
.cont-repro{
  background: #f6f6f7;
  border-radius: 1rem;
  display: flex;
  margin-bottom: 2rem;
}
.ul-repro{
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.ul-repro li{
  display: flex;
  padding: 1rem;
  align-items: center;
  border-bottom: 1px solid #dadbdf;
  cursor: pointer;
  transition: all .3s;
  flex-wrap: wrap;
}
.ul-repro li figure{
  width: 80px;
  height: 80px;
  overflow:hidden;
  border-radius: .5rem;
  margin-bottom: 0;
}
.ul-repro li figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ul-repro li figcaption {
  margin: auto;
  padding-left: 1rem;
  width: calc(100% - 210px);
}
.ul-repro li figcaption p{
  margin-bottom: 0;
  color: #666;
  font-size: .8rem;
}
.ul-repro li figcaption strong{
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}

.reproductor{
  width: 40%;
}
.lista-repro{
  width: 60%;
  padding: 2rem;
}
.ul-repro li a{
  margin: auto;
  display: flex;
  text-decoration: none;
  color: #000 !important;
  font-size: .9rem;
  padding: .8rem 1rem;
  border-radius: 2rem;
  transition: all .5s;
  
}
.ul-repro li a i{
  margin-right: .5rem;
}
.ul-repro li a:hover{
  background: #d4d4d4;
 
}
.sec-rep{
  background: #fff;
  padding-bottom: 2rem;
  padding-top: 2rem;
}
.caratula{
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  width: 14rem;
  overflow: hidden;
  aspect-ratio: 1/1;
  margin-bottom: 0;
  margin: auto;
  border-radius: 1rem;

}
.caratula img{
  width: 100%;
  height: 100%;
  transition: all .5s; 
}
#player{
  padding: 2rem;
  max-width: 26rem;
  margin: auto;
}
.ti-rep{
  text-align: center;
  color: #000;
  font-size: 3rem;
  line-height: 1;
  margin-top: 1rem;
  transition: all .5s; 
}
.tiempo-au{
  color: #1f1f1f;
  display: flex;
  width: 100%;
  font-size: .8rem;
  font-weight: 400;
  justify-content: space-between;
}
.barra-tiempo{
  width: 100%;
}
.barra-tiempo input{
  width: 100%;
  background-color: rgba(var(--color-contrast),.1);
  border-radius: 9999px;
  
  background:#ddddde ;
  position: relative;
  height: 6px;
  outline: none;
}
.barra-tiempo input[type=range]::range-progress {
  height: 20px;
  border-radius: 10px 0 0 10px;
  background-color: #aa9348;
  border: 2px solid #1976D2;
}
.barra-tiempo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  visibility: hidden;
}

.barra-tiempo input[type="range"]::-moz-range-thumb {
  visibility: hidden;
}





.ico-play{
  width: 4rem;
  height: 4rem;
 
  border-radius: 50%;
  border: none;
  background: #fff;
}

.ico-play i{
  font-size: 2rem;
  line-height: 4rem;
}
.cont-play{
  display: flex;
  justify-content: center;
}
.fast-forward, .rewind, .regresaau{
  background: none;
  border: none;
  width: 4rem;

}
.cont-play button{
  transition: all .3s;
}
.cont-play button:hover{
  transform: scale(1.1);
}

#popup-player {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.377);
  color: white;
  padding: .8rem;
  border-radius: 8px;
  box-shadow:0px 2px 6px -3px #000;
   display: flex;  
  z-index: 99;
  gap: .5rem;
}

.hidden {
  display: none !important;
}
#popup-player p{
  color: #1a1a1a;
  margin-bottom: 0;
  font-size: .8rem;
  font-weight: 400;
  width: 160px;
  overflow: hidden;
  height: .9rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}
 
#close-popup{
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
}
#close-popup i{
  margin: auto;
}
.mini-caratula{
  width: 4rem;
  height: 4rem;
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: 0;
}
.mini-caratula img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#popup-controls{
  align-items: center;
}
#popup-controls button{
  height: 2rem;
  width: 2rem;
  display: flex;
 
}
#popup-controls .fast-forward i{
  color: #3d3d3d;
}


#popup-controls button i{
  font-size: 24px;
  line-height: 2rem;
}
.bg-menu-desp{
  background: #fff;
  border-radius: .5rem;
  width: auto;
  position: absolute;
  box-shadow: 0 1px 5px -4px #000;
}
.bg-menu-desp ul{
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  padding: 1.5rem;
  min-width: 10rem;
}
.bg-menu-desp ul li{
  margin-bottom: .5rem;
}
.bg-menu-desp ul li:last-child{
  margin-bottom: 0;
}
.bg-menu-desp ul li a{
  text-decoration: none;
  color: #000;
  font-size: 1rem;
  transition: all .3s;
}
.bg-menu-desp ul li a:hover{
  color: #666;
}
#bg-menu-desp {
  position: absolute; /* Ajusta según tus necesidades */
  left: 0;
  opacity: 0;
  pointer-events: none; /* Evita interacciones cuando está oculto */
  transition: opacity 0.3s ease, left 0.3s ease;
}

#bg-menu-desp ul {
  display: none; /* Ocultar todos los <ul> inicialmente */
  transition: all .3s;
}

#bg-menu-desp ul.active {
  display: block; /* Mostrar el <ul> activo */
}



.head-ti{
  display: flex;
}
.head-ti h3{
  font-size: 2rem;
  font-weight: 600;
}
.cali figure div{
  width: 100%;
  height: 100%;
  border-radius: 1rem 1rem 0 1rem;
  }
.cali figure div video{
  width: 100%;
  height:auto;
 
}

.cambio-vid, .cambio-vid div {
  border-radius: 0 !important;
}
.cambio-vid video{
  border-radius: 0 1rem 1rem 1rem;
}
.cambio-img{
  border-radius: 1rem 1rem 0 1rem;
}
.cambio-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.menu-xs{
  display: none;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display:none;
  border: none;
  background: none;
  margin: auto;
  color: #fff;
  margin: auto 10px;
}
.menu-cont-xs{
  position: fixed;
  height: calc(100% - 80px);
  width: 100%;
  background: #000;
  z-index: 9999;
  top: 80px;
  display: none;
  padding: 2rem;
  transition: all .5s;
  width: 100%;
}
.menu-cont-xs .accordion .accordion-item{
  background: #000;
  border: none;
}

.menu-cont-xs .accordion {
  background: #000;
  width: 100%;
}
.menu-cont-xs .accordion .accordion-header{
  background: #000;
  
}
.menu-cont-xs .accordion .accordion-button{
  background: #000;
  color: #fff;
  border: none;
  box-shadow: none;
  font-size: 2rem;
  font-weight: bold;
}
.menu-cont-xs .accordion .accordion-body{
  color: #fff;
  background: #1a1a1a;
  border-radius: 1rem;
  font-size: 1rem;
}
.menu-cont-xs .accordion .accordion-body ul{
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
.menu-cont-xs .accordion .accordion-body ul li a{
  color: #d4d4d4;
  text-decoration: none;
  font-size: 1.6rem;  
  line-height: 2;
}
.menu-cont-xs .accordion .accordion-button:not(.collapsed)::after {
  background: url(../img/flechita.png);
}
.menu-cont-xs .accordion .accordion-button::after {
  background: url(../img/flechita.png);
}
.visible-xs{
  display: flex;
}
.oculto{
  display: none !important;
}
.ov-h{
  overflow: hidden;
}
.ef-uni{
  position: absolute;
  height: 80px ;
  width: 80px ;
  background: #DDB6A5;
 right: -40px;
 bottom: -40px;
 border-radius: 50%;
 z-index: 0;
}
.ef-uni span{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;

  
}
.ef-uni span:nth-child(1){
  left: 50%;
  top: 50%;
  opacity: 0;
}
.ef-uni span:nth-child(2){
  right: 50%;
  top: 50%;
}
.ef-uni span:nth-child(3){
  left: 50%;
  bottom: 50%;
}
.ef-uni span:nth-child(4){
  right: 50%;
  bottom: 50%;
  opacity: 0;
}
.degra-esq-der{
  position: relative;
}
.degra-esq-der::before{
  position: absolute;
  top: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background:linear-gradient(  to top left, transparent 70%, #DDB6A5 90%);
}
.degra-esq-izq{
  position: relative;
}
.degra-esq-izq::before{
  position: absolute;
  top: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background:linear-gradient(  to bottom right, transparent 70%, #DDB6A5 90%);

}

.ef-uni2 {
  position: absolute;
  height: 80px;
  width: 80px;
  background: #FDCA9A;
  right: -40px;
  bottom: -40px;
  border-radius: 50%;
  z-index: 0;
}

.ef-uni2 span {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #000000;
  position: absolute;

  
}
.ef-uni2 span:nth-child(1){
  left: 50%;
  top: 50%;
  opacity: 0;
}
.ef-uni2 span:nth-child(2){
  right: 50%;
  top: 50%;
}
.ef-uni2 span:nth-child(3){
  left: 50%;
  bottom: 50%;
}
.ef-uni2 span:nth-child(4){
  right: 50%;
  bottom: 50%;
  opacity: 0;
}


.degra-esq-der2::before{
  position: absolute;
  top: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background:linear-gradient(  to top left, transparent 70%, #FDCA9A 90%);
}
.degra-esq-der2, .degra-esq-izq2{
  position: relative;
}
.degra-esq-izq2::before{
  position: absolute;
  top: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background:linear-gradient(  to bottom right, transparent 70%, #FDCA9A 90%);

}

.cali figcaption{
  z-index: 2;
}

.logo-negro-ed{
  width: 450px;
  max-width: 100%;
  height: auto;
  
}
.vid-tic2 figure video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sect00ng{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.ul-repro li.active{
  background: #ffffff;
}

.list-fondo{
  z-index: 1;
}
.list-fondo li::before{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 1;
  content: '';
  background: linear-gradient(to bottom, transparent 0%, #000 100%);
  bottom: 0;
}
.list-frase{
  z-index: 2;
  position: relative;
}

.listaredes{
  display: flex;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  gap: 10px;
}
.listaredes li a{
  color: #fff;
  text-decoration: none;
}
.listaredes li a:hover{
  color: var(--cl-dorado);
}

.header-protengia{
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  background: url(../img/);
  position: relative;
}
.header-protengia::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(to top, #000 0%, transparent 100%);
  left: 0;

}
.header-protengia h3{
  font-size: 4rem;
}
.header-protengia h5{
  font-size: 2rem;
}
.header-protengia p{
  font-size: 1rem;
  text-align: center;
}

.header-protengia video{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  opacity: .8;
  object-position: center;
}
.header-protengia .cont{
  z-index: 2;
  position: relative;
}

.cuadrado-sm{
  aspect-ratio: 2/3;
  width: 100%;
  border-radius: 2rem;
  overflow: hidden;
}
.cuadrado-sm img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.p-text{
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
}
.cont-quees{
  background: #f6f6f7;
  border-radius: 1rem;
  display: flex;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.cont-quees::after{
  position: absolute;

  content: "";
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(../img/fondo-mol.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.cont-quees .row{
  z-index: 2;
}

.linea-izq{
  position: relative;
  display: flex;
  align-items: end;
}
.linea-der{
  position: relative;
  display: flex;

  
}
.linea-izq div{
  margin-left: calc(50% - 2px);
  width: calc(50% + 2px);
  border-left: 2px solid #000000;
  padding: 2rem;
  margin-bottom: 0;
}

.linea-der div{
  margin-right: 50%;
  width:calc(50% + 2px);
  border-right: 2px solid #000000;
  padding: 2rem;
  text-align: right;
  margin-bottom: 0;

}
.linea-der div  strong{
  font-weight: bold;
  color: var(--cl-blanco);
  display: inline-block;
  padding: .5rem 1rem;
  background: var(--cl-negro);
  position: relative;
  border-radius: 1.5rem 0 0 1.5rem;
}
.linea-izq div  strong{
  font-weight: bold;
  color: var(--cl-blanco);
  display: inline-block;
  background: var(--cl-negro);
  padding: .5rem 1rem;
  position: relative;
  border-radius: 0 1.5rem 1.5rem 0;
}
.linea-der div p,
.linea-izq div p {
  display: block;
  min-height: 200px;
  margin-bottom: 0;
}
.linea-der div  strong::after{
  content: '';
  width: 15px;
  height: 15px;
  background: var(--cl-negro);
  position: absolute;
  right: -7px;
  top: 12px;
  transform: rotate(45deg);
  
}
.linea-izq div  strong::after{
  content: '';
  width: 15px;
  height: 15px;
  background: var(--cl-negro);
  position: absolute;
  left: -7px;
  top: 12px;
  transform: rotate(45deg);
}
.h3t2 {
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
}

.linea-der div figcaption {
  display: flex;
  flex-direction: column;
  align-content: end;
  justify-content: end;
  align-items: end;
}
.linea-izq div figcaption {
  display: flex;
  flex-direction: column;
  align-content: end;
  justify-content: end;
  align-items:start;
}

.linea-der div figcaption p, .linea-izq div figcaption p{
 width: 50%;
}
.linea-der figure{
  width: 200px;
  aspect-ratio: 1/1;
 
  top: 2rem;
  left:calc(50% + 2rem);
  margin-bottom: 0;
  border-radius:0 1rem 1rem 1rem;
  position: absolute;
  overflow: hidden;
}
.linea-izq figure{
  width: 200px;
  aspect-ratio: 1/1;
position: absolute;
  top: 2rem;
  right:calc(50% + 2rem);
  margin-bottom: 0;
  border-radius:1rem 0 1rem 1rem;
  
  overflow: hidden;
}
.linea-izq figure img, .linea-der figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recfit-50{
  width: 50%;
}
.bg-patente{
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.glass{
  display: flex;
  background: rgba(71, 71, 71, 0.322);
  border: 1px solid rgba(82, 82, 82, 0.185);
  border-radius: 1rem;
  z-index: 1;
  position: relative;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.glasti{
  width: 40%;
  display: flex;
  padding: 2rem;
}
.glastext{
  width: 60%;
  padding: 2rem;
}
.video-pat{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;

}
hr{
  margin: 0;
  padding: 1rem 0;
}
.glastext p{
  margin-bottom: 0;
}

.videobody{
  width:484px ;
  height: 764px;
  aspect-ratio: 9/16;
  overflow: hidden;
  position: relative;
 
}
.videobody video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
}
.h100{
  min-height: 100%;

}
.cont-organos{
  display: flex;
  min-height: 90%;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.organos1, .organos2{
  width: calc(50% - 242px);
}

.btn-organos{
cursor: pointer;
  position: absolute;
  z-index: 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  color: #fff;
  font-size: 1rem;
  padding:.5rem 1rem;
  border-radius: 2rem;
  background: rgba(71, 71, 71, 0.322);
  border: 2px solid rgba(82, 82, 82, 0.185);

}



/* bodyhumano */
.lista-organos {
  list-style: none;
  padding-left: 0;
  position: absolute;
  left: 0;
  z-index: 10;
  margin: 0;
}
.organos-luz {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
}
.organos-luz img{
  transition: all .3s;
}
.body-humano {
  /* background: url(../img/body_m_small.png); */
    background-position-x: 0%;
    background-position-y: 0%;
  background-position: center;
  height: 100%;
  width: 100%;
  position: relative;
}
.corazones {
  position: absolute;
  top: 25.2%;
  left: 50%;
  transform: translate(-41%);
  width: 55px;
}
.cerebro {
  background-image: url(../img/brain.png);
  background-size: auto;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  width: 100%;
  opacity: .5;
  top: -180%;
  left: 41%;
  transform: translate(-50%);
  width: 82px;
  height: 61px;
  transition: all .3s;
}
.cerebro:hover{
  opacity: 1;
}
.annotations {
  position: absolute;
  top: -90%;
  left: -45%;
  height: 150%;
  width: 150%;
}
.annotations.right {
  top: -85%;
  left: 49%;
}
.annotations.right .line {
  position: absolute;
  background-image: url(../img/line-right.png);
  top: 60%;
  left: 10%;
  height: 30%;
  width: 100%;
  -webkit-transform: scale(0.6) translateY(-4px) translateX(-8px);
  -webkit-transform-origin: 0 80%;
}
.annotations .text {
  color: #75a0ba;
  display: block;
  position: absolute;
  font: 600 21px/1.2 "D","Lucida Grande",verdana,sans-serif;
  top: 44%;
  left: 35%;
  transition: all 360ms ease-out;
  opacity: 1;
  -webkit-transform: translateY(6px);
}
.annotations.right .icon {
  position: absolute;
  background-image: url(../img/heart_icon.png);
  background-size: 18px 18px;
  left: -20px;
  top: -2px;
  width: 18px;
  height: 18px;
}
.annotations .text .unit {
  color: #00a7d4;
  font: 500 8px/1.1 "D","Lucida Grande",verdana,sans-serif;
  display: inline-block;
  letter-spacing: 0.08em;
  margin-left: 0.4em;
  padding-top: 3px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  vertical-align: top;
}


.venas-luz {
  position: absolute;
  width: 319px;
  height: auto;
  top: -149px;
  left: -136px;
  opacity: .4;
  z-index: 1;
}

.pulmon-luz {
  position: absolute;
  top: -104px;
  left: -36px;
  width: 120px;
  height: auto;
  opacity: .7;
  /* animation: breathe 3s infinite; */
  z-index: 2;
}
.higado-luz {
  position: absolute;
  width: 76px;
  top: -27px;
  left: -27px;
  height: auto;
  opacity: .5;
  z-index: 4;
}
.rinon-luz {
  position: absolute;
  width: 45px;
  top: 5px;
  height: auto;
  left: 0px;
  opacity: .4;
  z-index: 5;
}
.estomago-luz {
  position: absolute;
  width: 57px;
  top: -35px;
  left: 0;
  height: auto;
  opacity: .5;
  z-index: 6;
}
.intestino-luz {
  position: absolute;
  width: 90px;
  height: 105px;
  top: 12px;
  left: -20px;
  opacity: .4;
  z-index: 3;
}





.cont-gra {
  height:100%;
  position: relative;
  z-index: 1;
  margin-top:0;
}
.giraspin {
  max-height: 100%;
  height: 72%;
  width: 100%;
  position: absolute;
}

.giraspin .spin {
  position: absolute;
  width: 455px;
  height: 455px;
  left: 50%;
  top: 40%;
  transform: translate(-50% , -50%);
}

.s1 {
  animation: spin3;
    animation-duration: 0s;
  animation-duration: 380s;
}
.s2 {
  animation: spin2;
    animation-duration: 0s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-delay: 700ms;
  animation-duration: 140s;
}
.s3 {
  animation-direction: reverse;
  animation-duration: 160s;
}
.giraspin .spin img {
  width: 100%;
  height: 100%;
}


@keyframes breathe {
	0% {
	
	  transform: scale(1);
	 
	}
	50% {
	  
	  transform: scale(1.05);
	 
	}
	100% {
	 
	  transform:  scale(1);
	 
	}
  }


  .corazones img{
    width: 100%;
    animation: latido;
    animation-duration: 700ms;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes latido{
0% {

    -webkit-transform: scale(1);

}
42% {

    -webkit-transform: scale(0.92);
    opacity: 0.88;

}
0% {

    -webkit-transform: scale(1);

}
0% {

    transform: scale(1);

}
42% {

    transform: scale(0.92);
    opacity: 0.88;

}
100% {

    transform: scale(1);

}
}

@keyframes spin1{
  0% {
  transform:translate(-50%, -50%) scale(1)rotate(0);
}
  
100% {
  transform:translate(-50%, -50%) scale(1) rotate(360deg);
}
}




@keyframes spin2{
  0% {
  transform:translate(-50%, -50%) scale(1) rotate(0);
      opacity: .6;
  }
  1.5% {
  transform:translate(-50%, -50%) scale(1) rotate(5deg);
      opacity: .6;
      
  }
  1.6% {
  transform:translate(-50%, -50%) scale(1) rotate(9deg);
      opacity: 1;
}
   1.8% {
  transform:translate(-50%, -50%) scale(1) rotate(9deg);
       opacity: 1;
}
 1.9% {
  transform:translate(-50%, -50%) scale(1.2) rotate(-9deg);
     opacity:.6;
}
   
100% {
  transform:translate(-50%, -50%) scale(1) rotate(360deg);
  opacity: .6;
}
}


@keyframes spin3{
  0% {
  transform:translate(-50%, -50%) scale(1)rotate(0);
      opacity: .6;
}
   2% {
  transform:translate(-50%, -50%) scale(1)rotate(10deg);
       opacity: .6;
}
    2.1% {
  transform:translate(-50%, -50%) scale(1.1)rotate(15deg);
        opacity: 1;
  }
   2.5% {
  transform:translate(-50%, -50%) scale(1)rotate(-25deg);
       opacity: .6;
}
  
    25% {
  transform:translate(-50%, -50%) scale(1)rotate(90deg);
        opacity: .6;
}
  
100% {
  transform:translate(-50%, -50%) scale(1) rotate(360deg);
  opacity: .6;
}
}
.organos-luz img{
  position: absolute;
  opacity: 0;
  display: none;
}





.videobody video {
  width: 80%;
  height: 80%;
  object-fit: contain;
  position: absolute;
  top: 10%;
  left: 10%;
  
}

.cont-org{
  display: flex;
  flex-direction: column;
  background: rgba(71, 71, 71, 0.322);
  border: 1px solid rgba(82, 82, 82, 0.185);
  border-radius: 1rem;
  z-index: 3;
  position: relative;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 1rem;
  width:calc(50% - 1rem);
  text-align: center;
  cursor: pointer;
  transition: all .3s;

}
.cont-org p{
  font-size: .8rem;
  font-weight: 400;
  margin-bottom: 0;
}
.organos1, .organos2 {
  position: relative;
  display: flex;
  gap: 1rem;
  justify-content: start;
  flex-wrap: wrap;
  padding: 1rem;
  align-items: start;
  align-self: start;
  

}

.organos1 .cont-org {
  
}
.fijo-vid{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
}
.fijo-vid::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  background: linear-gradient(to bottom, #000 0%, transparent 50%, #000 100%);
  left: 0;
  z-index: 2;

}
.fijo-vid video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0%;
  position: absolute;
  object-position: right;
}
.fijo-vid::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  background: linear-gradient(to right, #000 0%, transparent 50%);
  left: 0;
  z-index: 2;

}
.fijo-vid-izq::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  background: linear-gradient(to left, #000 0%, transparent 50%);
  left: 0;
  z-index: 2;

}
.lin2{
  position: absolute;
  right: 0;
}

.cont-im-tx {
  gap: 15px;
  border-radius: 1rem;
  display: flex;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
  z-index: 3;
  
}
.im-tx {
  width: 100%;

  display: flex;
  flex-direction:row;
  gap: 1rem;
}
.im-tx figure {
 

  width: 100px;
  height: 100px;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
}
.im-tx figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: auto;
}
.im-tx figcaption{
  background: rgba(71, 71, 71, 0.322);
  border: 1px solid rgba(82, 82, 82, 0.185);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  width:calc(100% - 150px);
}
.im-tx figcaption h3 {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
  color: var(--cl-blanco);
  margin-bottom: 0;
  padding-right: 1rem
}
.im-tx figcaption strong {
  font-size: 1.2rem;
  color: var(--cl-blanco);
}
.im-tx figcaption p {
  font-size: .8rem;
 font-weight: 400;
  color: var(--cl-blanco);
  margin-bottom: 0;
}
.activaluz img{
  display: block;
  opacity: 0;
  animation: aniluz .5s forwards;
}
.activaluz img.pulmon-luz{
  animation-delay: .5s;
}
.activaluz img.higado-luz{
  animation-delay: 1s;
}
.activaluz img.rinon-luz{
  animation-delay: 1.5s;
}
.activaluz img.estomago-luz{
  animation-delay: 2s;
}
.activaluz img.intestino-luz{
  animation-delay: 2.5s;
}
.activaluz img.venas-luz{
  animation-delay: 4s;
}

@keyframes aniluz{
  0%{
    opacity: 0;
  }

  100%{
  
    opacity: .4;
  }
}

.visible-temp{
  display: block !important;
  opacity: .7 !important;
  z-index: 12;
}

.opacity2{
  background: rgba(71, 71, 71, 0.1);
  border: 1px solid rgba(82, 82, 82, 0.185);
  color: rgba(255, 255, 255, 0.4);
}
.luz-hov img{
  cursor: pointer;
}
.luz-hov img:hover {
  opacity: .7 !important; 
}
.org-perfil{
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
}
.cerebro-luz{
  top: -186px;
  left: -11px;
  width: 66px;
  height: auto;
  opacity: 0;
  z-index: 2;
}

.aniposition img{
  background: url(../img/cir-bg.png);
  display: block;
  opacity: 0;
  animation: aniluz 1s both;
background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
}



.aniposition .higado-luz{
  left: 163px;;
  width: 75px;
}


.aniposition .intestino-luz{
  width: 50px;
  height: auto;
  top: -33px;
  left: -182px;
}




.aniposition .estomago-luz{
  top: -47px;
  left: 187px;
  width: 70px;
  animation-delay: 3.6s;
}
.aniposition .linfatico-luz{
  top: -111px;
  left: 192px;
  width: 70px;
  animation-delay: 3.3s;
}
.aniposition .endocrino-luz{
  top: -173px;
  left: 174px;
  width: 70px;
  animation-delay: 3s;
}
.aniposition .reproductor-luz{
  top: -229px;
  left: 144px;
  width: 70px;
  animation-delay: 2.7s;
}
.aniposition .rinon-luz{
  top: -269px;
  left: 87px;
  width: 70px;
  animation-delay: 2.4s;
}
.aniposition .oseo-luz{
  top:-280px;
  left: 33px;
  width: 70px;
  animation-delay: 2.1s;
}
.aniposition .inmunologico-luz{
  top:-280px;
  left: -23px;
  width: 70px;
  animation-delay: 1.8s;
}
.aniposition .nervioso-luz{
  top: -263px;
  left: -87px;
  width: 70px;
  animation-delay: 1.5s;
}

.aniposition .circulatorio-luz{
  top: -225px;
  left: -132px;
  width: 70px;
  animation-delay: 1.2s;
}
.aniposition .muscular-luz{
  top: -170px;
  left: -164px;
  width: 70px;
  animation-delay: .9s;
}
.aniposition .pulmon-luz{
  left: -186px;
  top: -111px;
  width: 70px;
  animation-delay: .6s;
}
.aniposition .tengumentario-luz{
  top: -43px;
  left: -173px;
  width: 70px;
  animation-delay: .3s;
}

@keyframes aniluz{
  0%{
    top: 0;
    left: 0;
    opacity: 0;
    display: block;
  }
  100%{
    opacity: 1;
  }
}

.organos1 .cont-im-tx{
  margin-right: 0;
  margin-left: auto;
}


.tx-fijo {
  position: absolute;
  bottom: 0;
  right: 50px;
  font-size: 100px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 90px;
  opacity: .5;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 20px;
}

.sldr > ul > li {
  float: left;
  display: block;
  width: 825px;
}

.stage {
  text-align: center;
}
/* .sldr {
  max-width: 825px;
  margin: 0 auto;
  overflow: visible;
  position: relative;
  clear: both;
  display: block;
} */
.tx-fijo2 {
  position: absolute;
  top: 0;
  left: 50px;
  font-size: 100px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 90px;
  opacity: .5;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 20px;
}
.tx-fijo3 {
  position: absolute;
  top: 0;
  left: 50px;
  font-size: 100px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 90px;
  opacity: .5;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 20px;
}

.fijoblur {
  position: absolute;
  width: 300px;
  display: flex;
  top: 8%;
  left: 8%;
  box-shadow: 0px 15px 15px -18px #000;
  border-radius: 16px;
}
.fijoblur2 {
  top: inherit;
  bottom: 8%;
  left: 16%;
}
/* div.skew {
  max-width: 825px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  -webkit-transform: skewX(16deg);
  -moz-transform: skewX(16deg);
  -ms-transform: skewX(16deg);
  transform: skewX(16deg);
} */
.fijoblur figure {
  width: 50%;
  background: rgba(255, 255, 255, 0.8);
  padding: 0px;
  margin-bottom: 0;
  height: 100%;
  border-radius: 16px 0 0 16px;
  height: 200px;
  height: auto;
  display: flex;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.fijoblur figure img {
  height: auto !important;
  width: auto !important;
  max-height: 100%;
  max-width: 100% !important;
  margin: auto !important;
}
.fijoblur figcaption h4 {
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.fijoblur figcaption p {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 0;
}
/* div.skew > div.wrap {
  display: block;
  overflow: hidden;
  -webkit-transform: skewX(-16deg);
  -moz-transform: skewX(-16deg);
  -ms-transform: skewX(-16deg);
  transform: skewX(-16deg);
  margin-left: -10.1%;
  width: 122%;
} */
.fijoblur figcaption {
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 15px;
  font-size: 12px;
  color: #000;
  border-radius: 0 1rem 1rem 1rem;
}

.sldr-prv, .sldr-nxt{
  border: none;

  height: 40px;
  width: 40px;
  border-radius: 50%;
  padding:0;
margin: 1rem 0;
}
.sldr-prv i, .sldr-nxt i{
  width: 40px;
  line-height: 40px;
}
.sect-sldr{
  margin: auto;
  display: flex;
  justify-content: center;
}
.organos2{
  width: calc(100% - 484px);
}
.tx-human{
  color: var(--cl-blanco);
  z-index: 3;
  position: relative;
  font-size: 3rem;
  font-weight: 800;
}

/* organos-activa */
.ver-sistemas {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
}
.ver-sistemas img{
  position: absolute;
  
  transition: all .3s;
  
}
.corazon-sis{
  width: 55px;
top: -73px;
left: 5px;
  animation: latido;
  animation-duration: 700ms;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 8;
  opacity: .4;
}
.intestino-sis {
  width: 90px;
  height: 105px;
  top: 12px;
  left: -20px;
  z-index: 3;
  opacity: .4;
}
.higado-sis {
  width: 76px;
  top: -30px;
  left: -30px;
  height: auto;
  z-index: 4;
  opacity: .4;
}
.venas-sis {
  display: none;
  width: 319px;
  height: auto;
  top: -149px;
  left: -136px;
  z-index: 1;
  opacity: 0;
}

.estomago-sis {
  width: 55px;
  top: -42px;
  left: 6px;
  height: auto;
  z-index: 5;
  opacity: .4;
}
.pulmon-sis {
  width: 110px;
  top: -103px;
  left: -29px;
  height: auto;
  z-index: 2;
  animation: breathe 3s infinite;
  opacity: .4;
}
.cerebro-sis {
  width: 88px;
  top: -201px;
  left: -20px;
  height: auto;
  z-index: 2;
  opacity: .4;
}
.rinon-sis {
  width: auto;
  height: 105px;
  top: 12px;
  left: 4px;
  z-index: 9;
  opacity: .4;
}

.ovst{
  position: relative;
  overflow: hidden;

}
.huesos-sis {
  display: none;
  width: 328px;
  height: auto;
  top: -184px;
  left: -136px;
  z-index: 1;
  opacity: 0;
  
}
.nervioso-sis {
  display: none;
  width: 306px;
  height: auto;
  top: -145px;
  left: -127px;
  z-index: 1;
  opacity: 0;
}
.musculo-sis {
  display: none;
  width: 324px;
  height: auto;
  top: -183px;
  left: -136px;
  z-index: 1;
  opacity: 0;
}
.endocrino-sis {
  display: none;
  width: 46px;
  height: auto;
  top: -157px;
  left: 5px;
  z-index: 1;
  opacity: 0;
}
.linfatico-sis {
  display: none;
  width: 289px;
  height: auto;
  top: -143px;
  left: -122px;
  z-index: 2;
  opacity: 0;
}
.piel-sis {
  display: none;
  width: 311px;
  height: auto;
  top: -189px;
  left: -131px;
  z-index: 2;
  opacity: 0;
}
.escudo-sis {
  display: none;
  width: 336px;
  height: auto;
  top: -198px;
  left: -142px;
  z-index: 2;
  opacity: 0;
}
.reproductor-sis {
  display: none;
  width: 28px;
  height: auto;
  top: 81px;
  left: 10px;
  z-index: 4;
  opacity: 0;
}
.ver-sistemas img:hover{
  opacity: .8;
  
}
.ocs{
  transition: all .3s;
  
}
.ocultaOrg{
  opacity: 0 !important;
}

.lanzador .activo1{
  animation: org1 .5s both ;
  /* animation-delay: 1s ; */
  display: block !important;
   opacity: 1 ; 
  /* opacity: 1 !important; */
}
.ocl{
  transition: all .5s;
  transition-delay: 2s;
  cursor: pointer;
}
.ocl:hover{
  transform: scale(1.1);
}
.opac1{
  opacity: .5 !important;
  
}
@keyframes org1{
  0%{
    opacity: 0;
    
  }
  100%{
    opacity: 1 !important;

  }
}

.ef-uni3 {
  position: absolute;
  height: 80px;
  width: 80px;
  background: #0b2b19;
  right: -40px;
  bottom: -40px;
  border-radius: 50%;
  z-index: 0;
}


.ef-uni3 span {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #000;
  position: absolute;
}
.ef-uni3 span:nth-child(1) {
  left: 50%;
  top: 50%;
  opacity: 0;
}
.ef-uni3 span:nth-child(2) {
  right: 50%;
  top: 50%;
}
.ef-uni3 span:nth-child(3) {
  left: 50%;
  bottom: 50%;
}
.ef-uni3 span:nth-child(4) {
  right: 50%;
  bottom: 50%;
  opacity: 0;
}
.degra-esq-der3::before {
  position: absolute;
  top: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient( to top left, transparent 70%, #0b2b19 90%);
}
.degra-esq-izq3::before {
  position: absolute;
  top: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient( to bottom right, transparent 70%, #0b2b19 90%);
}

.w50{
  width: 50% !important;
}
.stlpregunta{
  width: 100%;
  background: var(--cl-gris1);
  color: var(--cl-blanco);
  padding: .5rem;
  border-radius: .5rem;
  border: none;
  margin-top: 1rem;
}
.stlbody{
background: var(--cl-gris4);
margin-bottom: 1rem;
}
.sec-preguntas{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.recorte1{
  aspect-ratio: 10/16;
  overflow: hidden;
  width: 100%;
  border-radius: 1rem;
}
.recorte1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.vid-pie{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 0;
  width: 100%;
}
.vid-pie::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, #000 0%, transparent 50%);
  left: 0;
z-index: 1;
}
.img-item{
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 1rem;
}
.img-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cont-slider01{
  width: 100%;
  
}






/* */





























/* medias */




@media (max-width:1536px) {
  
}

@media (max-width:1280px) {
   
}
@media (max-width:1024px) {
  html {
    font-size: 12px;
}
 #menu-top{
  display: none;
 }
 #bg-menu-desp{
  display: none;
 }
 .cali figcaption{
  padding: 1rem;
 }
 .padrem2{
  padding: 1rem !important;
 }
 
.menu-xs{
display: flex;
}
.videobody{
  order: 1;
}
.organos1{
  order: 2;
  margin-top: -30%;
} 
.organos2{
  order: 3;
}
.organos1, .organos2{
  width: 100%;
  margin-bottom: 0;
}
.fijo-vid{
  display: none;
}

}


@media (max-width:768px) {
  .list-coment{
    width: 100%;
    left: 0;
  }
  .cali figure{
    width:100% ;
  }
  .cali figcaption{
    width: 100%;
  }
  .cali{
    flex-wrap: wrap;
  }
.destacados{
  flex-wrap: wrap;
}
  .dest-logos {
    width: 100%;
  }
  .dest-video{
    width: 100%;
  }
  .cont-dest img{
    width: 25%;
    height: auto;
  }
  .resul{
    flex-wrap: wrap;
  }
  .resul-h3{
  width: 100%;
}
.resul-tx{
  width: 100%;
}
.head-prox{
  flex-wrap: wrap;
}
.frase-centro{
  width: 100%;
}
.head-prox h3{
  display: block;
  width: 100%;
}
.item-eventos {
  aspect-ratio: 2/3;
}
.btnfechas{
  flex-direction: column-reverse;
}
.fecha01{
  flex-direction: column;
  width: 100%;
}
.fecha01 div{
  width: 100%;
  padding: 0;
}
.sec-tx-curso h3{
  width: 100%;
  font-size: 3rem;
}
.sec-tx-curso p{
  width: 100%;
  font-size: 1rem;
}
.sec-img-curso img{
  width: 100% !important;
  margin-left: -2rem;
  padding: 1rem;
}
.h3t1{
  width: 100%;
}
.cont-repro{
  flex-wrap: wrap;
}
.reproductor{
  width: 100%;
}
.lista-repro{
  width: 100%;
  padding: 1rem;
}
.ul-repro li a i{
line-height: 1.2rem;
}
#popup-controls button{
  padding: 0;
}
.tiempo-au{
  color: #000;
}
#player{
  max-width: 100%;
}
.ul-repro li figcaption{
  width: calc(100% - 80px);
}
.frasepie{
  width: 100%;
}
.btn-compra{
  text-align: center;
}
.menu-izq .btn-compra{
  padding: 7px 16px;
  line-height: 1;
}
.frvid{
  display: none;
}
.frh2{
  width: 100%;
  display: flex;
    flex-direction: column;
  }

.frh2 h2{
  text-align: center;
  font-size: 4rem;
  line-height: 1;
}
.frase-video{
  padding: 1rem;
}
.frase-video a{
  margin: auto;
  text-align: center;
  display: inline-block;
}
.listado-pilares{
  flex-wrap: wrap;
}
.listado-img-pilares{
  aspect-ratio: 4/3;
}
.listado-pilares article{
  width: 100%;
}
.listado-img-pilares img{
  object-fit: cover;
  height: 100%;
}
.listado-enlaces li a span{
  display: none;
}
.listado-enlaces{
  text-align: center;
}
.list-fondo li p{
  width: 100%;
  left: 0;
  padding: 1rem;
  line-height: 1.2;
}
.gia-exp{
  flex-wrap: wrap;
}
.ef-uni, .ef-uni2, .degra-esq-der2::before, .degra-esq-izq2::before, .degra-esq-der::before, .degra-esq-izq::before {
  display: none;
}
.dest-video img, .cambio-vid video, .dest-video video, .cali figure img{
border-radius: 1rem;
}

.linea-der div{
  width: 100%;
  margin: 0;
  border: none;
}
.linea-izq div{
  width: 50%;
  margin: 0;
  border: none;
}
.linea-der div figcaption, .linea-izq div figcaption{
  align-items: center;
}
.linea-der div figcaption p, .linea-izq div figcaption p{
  width: 100%;
  min-height: auto;
  text-align: justify;
}
.linea-izq div figcaption p{
  min-height: 150px;
}
.linea-der div strong, .linea-izq div strong{
  display: block;
  border-radius: 1rem;
}
.linea-der figure{
 position: relative;
 top: 0;
 left: auto;
 right: auto;
 width: calc(100% - 2rem);
 aspect-ratio: 3/2;
 margin: auto;
 border-radius: 1rem;
}
.linea-izq figure{
  width: calc(50% - 2rem);
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
}
.linea-der{
  flex-direction: column;
}
.linea-der div strong::after,.linea-izq div strong::after  {
  display: none;
}
.glass{
  flex-direction: column;
}
.glass>div{
  width: 100% ;
  text-align: center;
}
.cont-quees{
  padding-bottom: 1rem;
}
.videobody video {
  width: 92%;
  height: 90%;
  object-fit: contain;
  position: absolute;
  top: 5%;
  left: 4%;
}
.w50 {
  width: 100% !important ;
}
.ef-uni3{
  display: none;
}
.degra-esq-der3::before, .degra-esq-izq3::before{
  display: none;
}
.recorte1{

  width: 60%;
  margin: auto;
  margin-top: 1rem;
}
.fijoblur{
  width: 200px;
}
.im-tx figcaption{
  width: calc(100% - 115px);
}
}

@media (max-width:640px) {
   
  }