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







.space_btn_comprar {
  padding: 0 15px;
}



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










/* btn-online-2lines */
.btn-online-2lines {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgb(96, 96, 96) 0%, rgb(0, 0, 0) 100%);
  border-radius: 10px 10px 0px 0px;
  border: none;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-online-2lines:hover {
  background: #000;
  color: #FFDF27;
}

.btn-online-2lines-content {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  width: 350px;
}

.btn-online-2lines-icon {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

.btn-online-2lines-text {
  text-align: center;
  flex: 1;
}





.btn-online {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(rgb(96, 96, 96) 0%, rgb(0, 0, 0) 100%);
  border-radius: 10px 10px 0px 0px;
  border: 0px;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  padding: 10px 20px;
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-online:hover {
  background: #000;
  color: #FFDF27;
}



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

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























.centro_horz {
  text-align: center;
}

/*BOTON COMPRAR*/
.btn-comprar {
  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: #dcdcdc;
  border: 2px solid #999999;
  border-radius: 15px;
  color: #000;
  font-size: 20px;
  /*font-size: clamp(16px, 2vw, 26px);*/
  font-weight: bold;
  padding: 5px 10px;
  width: 100%;
  max-width: 230px;
  min-height: 70px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-comprar:hover {
  background: #FFDF27;
}

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

.btn-texto-comprar {
  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 */
}

/**/












.btn-sponsors {
  display: flex;
  align-items: center;
  /* centra verticalmente */
  justify-content: center;
  /* centra horizontalmente */
  border: 2px solid #fff;
  border-radius: 15px;
  background-color: #262626;
  /* 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: #FFDF27;

}

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



.btn-fondo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  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,
    #262626;
  background-size: 150px 100%, auto;
}


.btn-fondo-img:hover {
  background:
    url("pics/icon_patrocinarme_2.png") no-repeat left center,
    #FFDF27;
  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;
}




.btn-exito-img {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 15px;
  color: #000;
  text-transform: uppercase;
  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_exito.png") no-repeat left center,
    #dcdcdc;
  background-size: 150px 100%, auto;
}


.btn-exito-img:hover {
  background:
    url("pics/icon_exito_2.png") no-repeat left center,
    #FFDF27;
  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;
}



/*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: #111;
  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-contact:hover {
  background: #FFDF27;
  color: #000;
}

.btn-contact:hover 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 */
}

/**/






.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;
}





.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;
}





/*NUEVA VERSION*/
@media only screen and (max-width: 530px) {
  #btn_contact3 .btn-texto-contact {
    font-size: clamp(20px, 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);
  }

  .btn-online-2lines-text {
    font-size: clamp(20px, 2vw, 20px);
  }

  .btn-texto-fondo {
    font-size: clamp(15px, 2vw, 17px);
  }
}

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

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

  .btn-fondo-img .btn-texto-fondo {
    font-size: clamp(16px, 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;
  }
}