@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body,
html {
  margin: 0px;
  padding: 0px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  height: 100%;
  background: #000;

}

.panel_central {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0px;
}




a.link_idio,
a.link_idio:active,
a.link_idio:enabled {
  text-decoration: none;
  color: #fff;
  padding: 10px 30px;
  font-weight: bold;
}

a.link_idio:hover {
  color: #000;
  background: #ffd055;
  text-decoration: none;
}


a.link_especial,
a.link_special:enabled,
a.link_special:active {
  color: #fff;
  text-decoration: none;
}

a.link_especial:hover {
  color: #ff0000;
}


.idiomas {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  background: #545454;
  color: #fff;
  padding-bottom: 3px;
}

.fondo {
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 600;
  background: transparent !important;
}

.slider_bk_animado {
  position: fixed;
  height: 100vh;
  /* ocupa todo el alto de la ventana */
  aspect-ratio: 16 / 9;
  /* mantiene proporción */
  width: auto;
  /* el ancho se calcula automáticamente */
  margin: 0 auto;
  /* centra horizontalmente */
  overflow: hidden;
}

@media (orientation: portrait) {
  .slider_bk_animado {
    width: 100%;
    /* ocupa todo el ancho en vertical */
    height: auto;
    aspect-ratio: 9 / 16;
    /* proporción vertical */
  }
}

@media (orientation: landscape) {
  .slider_bk_animado {
    height: 100vh;
    /* ocupa todo el alto en horizontal */
    width: 100%;
    aspect-ratio: 16 / 9;
    /* proporción horizontal */
  }
}


.slide {
  font-size: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  /* llena el div */
  background-position: center center;
  /* centrado horizontal y vertical */
  background-attachment: fixed;
  /* fondo fijo */
  opacity: 0;
  transition: opacity 2s ease;
}

.slide.active {
  opacity: 1;
}

.botones_conjunto_spacio {
  padding: 0px 15px;
}


.centrar_boton {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 20px;
}

.texto_web {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  color: #f6ff00;
  text-align: center;
  padding: 0px 15px;
}

.texto_conte_about li {
  font-size: 20px;
  text-align: left;
  font-weight: bold;
  position: relative;
  padding-left: 25px;
  /* espacio para la viñeta */
  margin-bottom: 25px;
}

.texto_conte_about ul {
  list-style: none;
  /* Quita las viñetas por defecto */
}

.texto_conte_about ul li::before {
content: "•";
  /* viñeta */
  color: #ffd055;
  /* color amarillo */
  position: absolute;
  /* posición fija */
  left: 0;
  /* alineado a la izquierda */
  top: 0;
  /* al nivel de la primera línea */
}




.texto_conte_competi li {
  font-size: 20px;
  text-align: left;
  font-weight: bold;
  position: relative;
  padding-left: 25px;
  /* espacio para la viñeta */
  margin-bottom: 25px;
}

.texto_conte_competi ul {
  list-style: none;
  /* quita viñetas por defecto */
}

.texto_conte_competi ul li::before {
  content: "•";
  /* viñeta */
  color: #ffd055;
  /* color amarillo */
  position: absolute;
  /* posición fija */
  left: 0;
  /* alineado a la izquierda */
  top: 0;
  /* al nivel de la primera línea */
}








.texto_contenido {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 0px 15px;
}

.subtext {
  text-align: center;
  font-size: 16px;
  font-style: italic;
  color: #ccc;
}

.text_justificado {
  text-align: justify;
}

.text_vinetas ul li,
.text_vinetas ol li {
  text-align: left !important;
}

ul li,
ol li {
  margin-left: -20px;
}


.borde_conjunto {
  border: 4px solid #fff;
  width: 100%;

  border-radius: 15px;
  margin: 0 auto;
  padding-bottom: 40px;
}


/*Slider inicial*/

.sliderPrincipal {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 1069;
  /* mantiene proporción */
  overflow: hidden;
  margin: auto;
  position: relative;
}

.slidesPrincipal {
  display: flex;
  width: 500%;
  /* 5 imágenes */
  animation: slidePrincipal 25s infinite ease-in-out;
}

.slidePrincipal {
  width: 20%;
  /* cada imagen ocupa 1/5 del ancho total */
  flex-shrink: 0;
}

.slidePrincipal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animación automática tipo slide */
@keyframes slidePrincipal {
  0% {
    transform: translateX(0);
  }

  16% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-20%);
  }

  36% {
    transform: translateX(-20%);
  }

  40% {
    transform: translateX(-40%);
  }

  56% {
    transform: translateX(-40%);
  }

  60% {
    transform: translateX(-60%);
  }

  76% {
    transform: translateX(-60%);
  }

  80% {
    transform: translateX(-80%);
  }

  96% {
    transform: translateX(-80%);
  }

  100% {
    transform: translateX(0);
  }
}

/*Slider inicial fin*/


.linea_separa img{
  width: 100%!important;
    height: 1px!important;
}

/*Codigo para compartir web*/

.share-buttons {
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  gap: 15px;
  margin-top: 20px;
}

.share-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  transition: background 0.3s ease;
  text-decoration: none;
}

.facebook {
  background: #3b5998;
}

.facebook:hover {
  background: #2d4373;
}

.twitter {
  background: #1da1f2;
}

.twitter:hover {
  background: #0d95e8;
}

.whatsapp {
  background: #25d366;
}

.whatsapp:hover {
  background: #1ebe5d;
}

.email {
  background: #dd4b39;
}

.email:hover {
  background: #c23321;
}


/*Codigo para compartir web fin*/


/*Acordion */
.accordion {
  background: #FFD33B;
  color: #000;
  cursor: pointer;
  padding: 18px;
  font-weight: 600;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-radius: 0px 0px 15px 15px;
  border-left: 2px solid #e4b53a;
  border-right: 2px solid #e4b53a;
  border-bottom: 2px solid #e4b53a;
}

.accordion.acor_v2 {
  background: #fff !important;
  color: #000 !important;
}

/*.active, .accordion:hover {
  background-color: #ccc;
}*/
.accordion:after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion.acor_v2:after {
  color: #000 !important;
}

.active:after {
  content: "\2212";
}

.panel {
  width: 100%;
  max-width: 528px;
  text-align: left;
  padding: 0 30px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-family: "Arial";
  border-left: 1px solid #e4b53a;
  border-right: 1px solid #e4b53a;
  border-bottom: 1px solid #e4b53a;
  border-radius: 0px 0px 15px 15px;
  margin: 0 auto;
  visibility: hidden;
}

@media only screen and (max-width: 600px) {
  .panel {
    width: 88%;
    max-width: 100%;
  }
}

.precio {
  color: #FFDD00 !important;
  font-size: 40px;
  font-weight: 700;
}

.precio_des {
  font-size: 14px;
  padding-bottom: 5px;
}





















.space_btn_comprar {
  padding: 0 15px;
}



.img_peque {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
}








.franja_pais {
  background: #f5f5f5;
  border-left: 2px solid #DBB711;
  /* borde izquierdo */
  border-right: 2px solid #DBB711;
  /* borde derecho */
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: #000;
  padding: 5px;
  width: 100%;
}
.texto_conte_payment{
  font-size: 30px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}







/*BOTON PAYPAL*/
.btn-payment {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid #e4b53a;
  border-right: 2px solid #e4b53a;
  border-top: 2px solid #e4b53a;
  border-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  background-color: #fff;
  /* color de fondo */
  width: 100%;
  max-width: 600px;
  min-height: 100px;
  cursor: pointer;
  overflow: hidden;
}

.btn-payment-img {
  max-width: 60%;
  /* controla el ancho relativo */
  max-height: 60%;
  /* controla el alto relativo */
  object-fit: contain;
  /* mantiene proporción */
  display: block;
}

.btn-payment:hover {
    background: #FFD33B/*principal*/;
}

.franja_payment {
  background: #FFD33B/*principal*/;
  border-left: 2px solid #e4b53a;
  border-right: 2px solid #e4b53a;
  border-bottom: 2px solid #e4b53a;
  border-radius: 0px 0px 15px 15px;
  /* borde derecho */
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: #000;
  padding: 5px;
  width: 100%;
  cursor: pointer;
}







/*BOTONES FITNESS*/
.btn-fitness {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 2px solid #e4b53a;
  border-bottom: none;
  /* elimina el borde inferior */
  border-radius: 15px 15px 0 0;
  /* solo esquinas superiores redondeadas */
  color: #000;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-fitness img {
  filter: invert(1);
}

.btn-fitness:hover {
  background: #FFD33B/*principal*/;
  color: #000;

}

.btn-fitness:hover img {
  filter: invert(1);
}

.btn-icono-fitness {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-fitness {
  text-align: center;
  /* texto centrado */
}

/**/




/*BOTONES ONLINE*/
.btn-online {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #000;
  border: 2px solid #e4b53a;
  border-bottom: none;
  /* elimina el borde inferior */
  border-radius: 15px 15px 0 0;
  /* solo esquinas superiores redondeadas */
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  transition: background 0.3s;
  cursor: pointer;
}

.btn-online:hover {
    background: #FFD33B/*principal*/;
  color: #000;
}

.btn-online:hover img {
  filter: invert(1);
}

.btn-icono-online {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-online {
  text-align: center;
  /* texto centrado */
}

/**/








/*BOTONES FB*/
.btn-fb {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  background: #395498;
  border: 2px solid #fff;
  /* espacio entre icono y texto */
  border-radius: 15px;
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-fb:hover {
  background: #1c3677;
}

.btn-icono-fb {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-fb {
  text-align: center;
  /* texto centrado */
}

/**/


/*BOTONES IG*/
.btn-ig {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  background: #db3bc1;
  background: linear-gradient(280deg, rgba(219, 59, 193, 1) 0%, rgba(199, 87, 145, 1) 50%, rgba(237, 221, 83, 1) 100%);
  border: 2px solid #fff;
  /* espacio entre icono y texto */
  border-radius: 15px;
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-ig:hover {
  background: #d6249f;
}

.btn-icono-ig {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-ig {
  text-align: center;
  /* texto centrado */
}

/**/



/*BOTON TK*/
.btn-tk {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  background: #000000;
  background: linear-gradient(280deg, rgba(0, 0, 0, 1) 0%, rgba(59, 59, 59, 1) 50%, rgba(0, 0, 0, 1) 100%);
  border: 2px solid #fff;
  border-radius: 15px;
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-tk:hover {
  background: #000;
}

.btn-icono-tk {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-tk {
  text-align: center;
  /* texto centrado */
}

/**/


/*BOTON YT*/
.btn-yt {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  background: #CE0003;
  background: linear-gradient(90deg, rgba(206, 0, 3, 1) 0%, rgba(217, 0, 4, 1) 50%, rgba(206, 0, 3, 1) 100%);
  border: 2px solid #fff;
  border-radius: 15px;
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-yt:hover {
  background: #8C0002;
}

.btn-icono-yt {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-yt {
  text-align: center;
  /* texto centrado */
}

/**/


/*BOTON X*/
.btn-x {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  background: #1D9BF0;
  background: linear-gradient(90deg, rgba(29, 155, 240, 1) 0%, rgba(19, 110, 171, 1) 50%, rgba(29, 155, 240, 1) 100%);
  deg,
  rgba(206, 0, 3, 1) 0%,
  rgba(217, 0, 4, 1) 50%,
  rgba(206, 0, 3, 1) 100%);
  border: 2px solid #fff;
  border-radius: 15px;
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-x:hover {
  background: #000;
}

.btn-icono-x {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-x {
  text-align: center;
  /* texto centrado */
}

/**/


/*BOTON TH*/
.btn-th {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  background: RGB(125, 89, 176);
  background: linear-gradient(90deg, rgba(125, 89, 176, 1) 0%, rgba(105, 65, 161, 1) 50%, rgba(125, 89, 176, 1) 100%);
  border: 2px solid #fff;
  border-radius: 15px;
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-th:hover {
  background: #432473;
}

.btn-icono-th {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-th {
  text-align: center;
  /* texto centrado */
}

/**/







/*BOTON THE*/
.btn-the {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  background: #000;
  border: 2px solid #fff;
  border-radius: 15px;
  color: #FFF;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-the:hover {
  background: #333;
}

.btn-icono-the {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-the {
  text-align: center;
  /* texto centrado */
}

/**/












/*BOTONES CONTACTO NUEVA VERSIÓN*/
.btn-contact {
  display: inline-flex;
  /* flex en línea para botón */
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente icono + texto */
  gap: 10px;
  /* espacio entre icono y texto */
  background: #fff;
  border: 2px solid #e4b53a;
  border-radius: 15px;
  color: #000;
  font-size: 26px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-contact:hover {
background: #FFD33B/*principal*/;
color: #000;
}
.btn-contact img{
  filter: invert(1);
}

#btn_contact1 img{
  filter: invert(0)!important;
}

.btn-icono-contact {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  /* evita que el icono se reduzca */
}

.btn-texto-contact {
  text-align: center;
  /* texto centrado */
}

/**/








.btn-sponsors {
  display: flex;
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente */
  border: 2px solid #e4b53a;
  border-radius: 15px;
  background-color: #000;
  /* color de fondo */
  width: 100%;
  max-width: 600px;
  min-height: 100px;
  cursor: pointer;
  overflow: hidden;
}



.btn-sponsors-img {
  max-width: 60%;
  /* controla el ancho relativo */
  max-height: 60%;
  /* controla el alto relativo */
  object-fit: contain;
  /* mantiene proporción */
  display: block;
}

.btn-sponsors:hover {
    background: #FFD33B/*principal*/;
    
}

.btn-sponsors:hover img {
  filter: invert(1);
}



.btn-fondo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e4b53a;
  border-radius: 15px;
  color: #FFF;
  font-size: 24px;
  font-weight: bold;
  width: 100%;
  max-width: 600px;
  min-height: 100px;
  cursor: pointer;
  overflow: hidden;
  /* Imagen de fondo solo en el lado izquierdo */
  background:
    url("pics/icon_patrocinarme_1.png") no-repeat left center,
    #000;
  background-size: 150px 100%, auto;
}

.btn-fondo-img:hover {
  background:
    url("pics/icon_patrocinarme_2.png") no-repeat left center,
    #FFD33B;
  background-size: 150px 100%, auto;
  color: #000;
}

.btn-img-invisible {
  width: 150px;
  /* mismo ancho que la imagen de fondo */
  height: 100%;
  /* ocupa todo el alto */
  opacity: 0;
  /* invisible, pero mantiene espacio */
}

.btn-texto-fondo {
  flex: 1;
  text-align: center;
  padding: 0 10px;
}





.creditos {
  text-align: center;
}

.creditos a {
  font-size: 11px;
  text-decoration: none !important;
  color: #fff !important;
}

.creditos a span {
  font-size: 12px;
  font-weight: bold;
  color: #FFD33B;
}



.texto_sub_boton {
  font-size: 16px;
}

.centrar_boton {
  text-align: center;
}

.space_normal {
  height: 40px;
  clear: both;
}

.space_normal2 {
  height: 5px;
  clear: both;
}

.space_secciones {
  height: 100px;
  clear: both;
}

/*Código de galeria*/

.espacio_galeria {
  padding: 0px 15px;
}

div.galeria {
  border: 1px solid #ccc;
  margin: 10px 0px;
  line-height: 0px;
}

div.galeria:hover {
  border: 1px solid #777;
}

div.galeria img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 25%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/**/


/*Codigo tooltips animado*/
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::before,
[data-tooltip]::after {
  text-transform: none;
  font-size: .9em;
  line-height: 1;
  position: absolute;
  display: none;
  opacity: 0;
}

[data-tooltip]::before {
  content: '';
  border: 6px solid transparent;
  z-index: 8;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 8px;
  border-radius: 3px;
  background: #e4b53a;
  color: #000;
  font-weight: bold;
  z-index: 7;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  display: block;
}

[data-tooltip='']::before,
[data-tooltip='']::after {
  display: none !important;
}

/* TOP / DEFAULT */
[data-tooltip]:not([data-flow])::before,
[data-tooltip][data-flow^="top"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #e4b53a;
}

[data-tooltip]:not([data-flow])::after,
[data-tooltip][data-flow^="top"]::after {
  bottom: calc(100% + 5px);
}

[data-tooltip]:not([data-flow])::before,
[data-tooltip]:not([data-flow])::after,
[data-tooltip][data-flow^="top"]::before,
[data-tooltip][data-flow^="top"]::after {
  left: 50%;
  transform: translate(-50%, -.4em);
}

/* BOTTOM */
[data-tooltip][data-flow^="bottom"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #e4b53a;
}

[data-tooltip][data-flow^="bottom"]::after {
  top: calc(100% + 5px);
}

[data-tooltip][data-flow^="bottom"]::before,
[data-tooltip][data-flow^="bottom"]::after {
  left: 50%;
  transform: translate(-50%, .4em);
}

/* LEFT */
[data-tooltip][data-flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #e4b53a;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}

[data-tooltip][data-flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.4em, -50%);
}

/* RIGHT */
[data-tooltip][data-flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #e4b53a;
  right: calc(0em - 7px);
  transform: translate(.4em, -50%);
}

[data-tooltip][data-flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

@keyframes tooltip-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltip-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

[data-tooltip]:not([data-flow]):hover::before,
[data-tooltip]:not([data-flow]):hover::after,
[data-tooltip][data-flow^="top"]:hover::before,
[data-tooltip][data-flow^="top"]:hover::after,
[data-tooltip][data-flow^="bottom"]:hover::before,
[data-tooltip][data-flow^="bottom"]:hover::after {
  animation: tooltip-vert .5s ease-out forwards;
}

[data-tooltip][data-flow^="left"]:hover::before,
[data-tooltip][data-flow^="left"]:hover::after,
[data-tooltip][data-flow^="right"]:hover::before,
[data-tooltip][data-flow^="right"]:hover::after {
  animation: tooltip-horz .5s ease-out forwards;
}

/*Codigo tooltips animado*/

/*Redes horizontales*/
.redes_horz {
  display: flex;
  justify-content: center;
  width: 100px;
  margin: 0 auto;
}

.redes_unid {
  flex: 1;
  text-align: center;
  padding: 0px 10px;
}

.redes_unid img {
  width: 30px !important;
  height: auto !important;
}

.redes_left {
  position: fixed;
  left: 5px;
  top: 50%;
  margin-top: -156px!important;
  width: 20px;
  margin: 0 auto;
}

.redes_left .redes_unid {
  padding: 10px 0px;
}

.redes_left .redes_unid img {
  width: 20px !important;
  height: auto !important;
}

/*Redes horizontales fin*/

.pesta_whatsapp {
  position: fixed;
  bottom: 60px;
  right: 12px;
  z-index: 9999;
}

.pesta_messenger {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
}

.pesta_whatsapp img,
.pesta_messenger img {
  width: 40px;
}






/*NUEVA VERSION*/
@media only screen and (max-width: 530px) {
  #btn_contact3 .btn-texto-contact {
    font-size: clamp(16px, 2vw, 18px);
  }

  .btn-ig .btn-texto-ig {
    font-size: clamp(14px, 2vw, 18px);
  }

  .btn-yt .btn-texto-yt {
    font-size: clamp(14px, 2vw, 18px);
  }
  .btn-the .btn-texto-the {
    font-size: clamp(14px, 2vw, 18px);
  }
}

@media only screen and (max-width: 400px) {
  .btn-texto-contact {
    font-size: clamp(18px, 2vw, 18px);
  }
}

@media only screen and (max-width: 370px) {

  #btn_contact3 .btn-texto-contact {
    font-size: clamp(12px, 2vw, 18px);
  }

  .btn-fondo-img .btn-texto-fondo {
    font-size: clamp(18px, 2vw, 20px);
  }


  .texto_conte_about li {
  font-size: 18px;
  }

  .texto_conte_competi li {
  font-size: 18px;
  }



}

/*NUEVA VERSION REDUCCION*/







@media only screen and (max-width: 700px) {
  .redes_left {
    display: none !important;
  }
}





/*Video code*/

/*YouTube Responsive*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.video-container iframe,
.video-container object,
.video-container embed,
.video-container_vertical iframe,
.video-container_vertical object,
.video-container_vertical embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.espacio_video {
  padding: 0px 15px;
}

.video-container_vertical {
  position: relative;
  padding-bottom: 171%;
  padding-top: 30px;
  border: 4px solid;
}

.borde_video video {
  border: 2px solid #e4b53a;
}


.borde_video .video-container {
  border: 2px solid #FFF;
}
/*Video code fin*/


/*PRUEBA*/