@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: #ff0000;
  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: #fff;
  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_web {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ff0000;
  text-align: center;
  padding: 0px 15px;
}


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




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


/*BOTONES ONLINE*/
.btn-online {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #600000;
  border: 2px solid #fff;
  border-radius: 15px;
  /* solo esquinas superiores15px 0 0 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: #ff0000;

 
}



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

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

/**/








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

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






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

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

.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 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 YT*/
.btn-yt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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-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;
}

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

/**/












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

/**/







/*BOTONES CONTACTO NUEVA VERSIÓN*/
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #600000;
  border: 2px solid #fff;
  border-radius: 15px;
  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-contact:hover {
background: #ff0000;
color: #fff;
}
/*.btn-contact img{
  filter: invert(1);
}*/

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

.btn-icono-contact {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

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

/**/ 


















.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: #d95050;
/**background: linear-gradient(90deg, rgba(217, 80, 80, 1) 1%, rgba(122, 26, 26, 1) 50%, rgba(217, 80, 80, 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_contact3:hover {
  background: #Ff0000;
  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: -70px;
  width: 20px;

}

.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: 110px;
  right: 12px;
  z-index: 9999;
}

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

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

.pesta_whatsapp img, .pesta_instagram 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);
  }



}

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

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

 


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



}

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

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

  .btn-ig .btn-texto-ig  {
    font-size: clamp(16px, 2vw, 18px);
  }
  .btn-fb .btn-texto-fb  {
    font-size: clamp(16px, 2vw, 18px);
  }
  .btn-yt .btn-texto-yt  {
    font-size: clamp(16px, 2vw, 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,
.borde_video .video-container {
  border: 2px solid #fff;
}

/*Video code fin*/