@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: #000;
  padding: 10px 30px;
  font-weight: bold;
}

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



.idiomas {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  background: #C5C3C4;
  color: #000;
  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 {
  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_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*/




/*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*/


/*Btn con css e imagen*/
.conten_boton {
  background: linear-gradient(to bottom, #606060 0%, #000000 100%);
  /*border: 4px solid #fff;*/
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 10px;
  width: 100%;
  /*max-width: 540px;*/
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_resaltado {
  border: 4px solid red;
  animation: cambiarColor 1s infinite alternate;
}

@keyframes cambiarColor {
  0% {
    border-color: red;
  }

  50% {
    border-color: white;
  }

  100% {
    border-color: red;
  }
}


.conten_boton:hover {
  background: #000;
  cursor: pointer;
}

.conten_boton:hover .text_btn {
  color: #FFDF27;
}

.conten_boton:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -35px;
  left: 10%;
}

.conten_boton .img_btn img {
  width: 70px;
}

.conten_boton .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton .conten_texto {
  width: 80%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/



/*Btn comprar con css e imagen*/
.conten_boton_comprar {
  background: #DCDCDC;
  border: 4px solid #999;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  position: relative;
  height: 60px;
}

.conten_boton_comprar:hover {
  background: #FFDF27;
  cursor: pointer;
}

.conten_boton_comprar:hover .text_btn {
  color: #000;
}

.conten_boton_comprar:hover .sub_text_btn {
  color: #666;
}

.conten_boton_comprar .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 10%;
}

.conten_boton_comprar .img_btn img {
  width: 40px;
}

.conten_boton_comprar .conten_imagen {
  width: 5%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_comprar .conten_texto {
  width: 95%;
  color: #000;
  padding: 20px;
  text-align: center;
}

.conten_boton_comprar .text_btn {
  font-size: clamp(12px, 3em, 18px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_comprar .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn comprar con css e imagen FIN*/

.space_btn_comprar{
  padding: 0 15px;
}



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

/*Btn Exito con css e imagen*/
.conten_boton_exito {
  background: url(pics/icon_exito.png) #DCDCDC;
  background-repeat: no-repeat;
  background-size: contain;
  border: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
 /* max-width: 540px;*/
  margin: 0 auto;
  position: relative;
  min-height: 90px;
  text-transform: uppercase;
}

.conten_boton_exito:hover {
  background: url(pics/icon_exito_2.png) #FFDF27;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.conten_boton_exito:hover .text_btn {
  color: #000;
}

.conten_boton_exito:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_exito .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 10%;
}

.conten_boton_exito .img_btn img {
  width: 100px;
}

.conten_boton_exito .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_exito .conten_texto {
  width: 80%;
  color: #000;
  padding: 20px;
  text-align: center;
}

.conten_boton_exito .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_exito .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/


/*Btn patrocinador con imagen*/
.conten_boton_patrocinador {
  background: url(pics/icon_patrocinarme_1.png) #DCDCDC !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.conten_boton_patrocinador:hover {
  background: url(pics/icon_patrocinarme_2.png) #FFDF27!important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/**/


/*Btn FB con css e imagen*/
.conten_boton_fb {
  background: #395498;
  border: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_fb:hover {
  background: #1c3677;
  cursor: pointer;
}

.conten_boton_fb:hover .text_btn {
  color: #fff;
}

.conten_boton_fb:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_fb .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 20%;
}

.conten_boton_fb .img_btn img {
  width: 50px;
}

.conten_boton_fb .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_fb .conten_texto {
  width: 80%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_fb .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_fb .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/





/*Btn IG con css e imagen*/
.conten_boton_ig {
  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: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_ig:hover {
  background: #d6249f;
  cursor: pointer;
}

.conten_boton_ig:hover .text_btn {
  color: #fff;
}

.conten_boton_ig:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_ig .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 22%;
}

.conten_boton_ig .img_btn img {
  width: 50px;
}

.conten_boton_ig .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_ig .conten_texto {
  width: 80%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_ig .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_ig .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/



/*Btn tk con css e imagen*/
.conten_boton_tk {
  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: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_tk:hover {
  background: #000;
  cursor: pointer;
}

.conten_boton_tk:hover .text_btn {
  color: #fff;
}

.conten_boton_tk:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_tk .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 30%;
}

.conten_boton_tk .img_btn img {
  width: 50px;
}

.conten_boton_tk .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_tk .conten_texto {
  width: 80%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_tk .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_tk .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/





/*Btn patrocinio con css e imagen*/
.conten_boton_sponsor {
  background: #000000;
  background: linear-gradient(280deg, rgba(0, 0, 0, 1) 0%, rgba(64, 64, 64, 1) 50%, rgba(0, 0, 0, 1) 100%);
  border: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
 /* max-width: 540px;*/
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_sponsor:hover {
  background: #FFDF27;
  cursor: pointer;
}

.conten_boton_sponsor:hover .text_btn {
  color: #000;
}

.conten_boton_sponsor:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_sponsor .img_btn {
  /* position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 10%;*/
}

.conten_boton_sponsor .img_btn img {
  width: 100%;
  max-width: 300px;
  min-width: 15px;
}

.conten_boton_sponsor .conten_imagen {
  width: 100%;
  height: 100%;
  color: #fff;
  padding: 4px 20px;
  text-align: center;
}

/*Btn con css e imagen FIN*/



/*Btn patrocinio con css e imagen*/
.conten_boton_patro {
  background: #ffffff;
  background: linear-gradient(280deg, rgba(255, 255, 255, 1) 0%, rgba(232, 232, 232, 1) 50%, rgba(255, 255, 255, 1) 100%);
  border: 4px solid #999;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 80%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_patro:hover {
  background: #000;
  cursor: pointer;
}

.conten_boton_patro:hover .text_btn {
  color: #ff0000;
}

.conten_boton_patro:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_patro .conten_texto {
  width: 100%;
  color: #000;
  padding: 20px;
  text-align: center;
}

.conten_boton_patro .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_patro .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/




/*Btn contacto 1 con css e imagen*/
.conten_boton_contact1 {
  background: linear-gradient(to bottom, #606060 0%, #000000 100%);
  border: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_contact1:hover {
  background: #FFDF27;
  cursor: pointer;
}

.conten_boton_contact1:hover .text_btn {
  color: #000;
}

.conten_boton_contact1:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_contact1 .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 20%;
}

.conten_boton_contact1 .img_btn img {
  width: 50px;
}

.conten_boton_contact1 .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_contact1 .conten_texto {
  width: 80%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_contact1 .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_contact1 .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/




/*Btn contacto 2 con css e imagen*/
.conten_boton_contact2 {
  background: #0CB4F6;
  background: linear-gradient(180deg, rgba(12, 180, 246, 1) 0%, rgba(12, 180, 246, 1) 50%, rgba(0, 119, 239, 1) 100%);
  border: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_contact2:hover {
  background: #FFDF27;
  cursor: pointer;
}

.conten_boton_contact2:hover .text_btn {
  color: #000;
}

.conten_boton_contact2:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_contact2 .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 20%;
}

.conten_boton_contact2 .img_btn img {
  width: 50px;
}

.conten_boton_contact2 .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_contact2 .conten_texto {
  width: 80%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_contact2 .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_contact2 .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/

.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: #ff0000;
}


/*Btn contacto 3 con css e imagen*/
.conten_boton_contact3 {
  background: linear-gradient(to bottom, #606060 0%, #000000 100%);
  border: 4px solid #fff;
  display: flex;
  justify-content: space-between;
  /* o center, start, etc. */
  align-items: center;
  /* alinea verticalmente si hay altura */
  gap: 20px;
  /* espacio entre hijos */
  border-radius: 15px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  min-height: 90px;
}

.conten_boton_contact3:hover {
  background: #FFDF27;
  cursor: pointer;
}

.conten_boton_contact3:hover .text_btn {
  color: #000;
}

.conten_boton_contact3:hover .sub_text_btn {
  color: #FBC21C;
}

.conten_boton_contact3 .img_btn {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 14%;
}

.conten_boton_contact3 .img_btn img {
  width: 50px;
}

.conten_boton_contact3 .conten_imagen {
  width: 20%;
  height: 100%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_contact3 .conten_texto {
  width: 80%;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.conten_boton_contact3 .text_btn {
  font-size: clamp(12px, 3em, 30px);
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}

.conten_boton_contact3 .sub_text_btn {
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/*Btn con css e imagen FIN*/





.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: #FF0000;
  color: #FFFFFF;
  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: #FF0000;
}

[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: #FF0000;
}

[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: #FF0000;
  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: #FF0000;
  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: -68px;
  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;
}














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

@media only screen and (max-width: 600px) {
  .img_btn {
    left: 10% !important;
  }

  .conten_boton .img_btn img {
    width: 80px;
  }
}

@media only screen and (max-width: 500px) {
  .conten_boton_contact3 .img_btn {
    left: 7% !important;
  }
}

@media only screen and (max-width: 450px) {
  .text_btn {
    font-size: clamp(10px, 3em, 18px) !important;
    line-height: 20px !important;
  }

  .conten_boton .img_btn {
    margin-top: -40px;
  }


}

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

  .text_btn {
    font-size: clamp(10px, 3em, 14px) !important;
    line-height: 20px !important;
  }

  .conten_boton_exito .conten_texto {
    width: 57% !important;
  }


  .img_btn {
    left: 5% !important;
  }

  .conten_boton_comprar .img_btn {
    left: 12% !important;
  }
}