@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

@font-face {
  font-family: "gate-regular";
  src: url("../css/webfonts/gate-typeface/gate-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

.foncolg {
  font-family: "gate-regular", sans-serif;
}

.services {
  font-family: "Poppins", sans-serif;
  /* background-color: #1a1a1a; */
  color: #fff;
  padding: 1rem;
  text-align: center;

  &__title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #ffa500;
    font-weight: 600; /* Bold title */
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }

  .service {
    background-color: #ffb700;
    border: 5px solid #000000;
    padding: 0.2rem;
    border-radius: 5px;
    transition: transform 0.3s ease, background-color 0.3s ease;

    i.icon {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      display: block;
    }

    h3 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      color: #ffa500;
      font-weight: 600; /* Semi-bold headings */
    }

    p {
      font-size: 0.9rem;
      color: #ccc;
      font-weight: 400; /* Regular weight for text */
    }

    &:hover {
      background-color: #ffa500;
      transform: translateY(-10px);
      color: #1a1a1a;

      h3,
      p {
        color: #1a1a1a;
      }
    }

    &.active {
      background-color: #ffa500;
      color: #1a1a1a;

      h3,
      p {
        color: #1a1a1a;
      }
    }
  }
}

.service2 {
  background-color: #ffb700;
  border: 5px solid #000000;
  padding: 0.2rem;
  border-radius: 5px;
  transition: transform 0.3s ease, background-color 0.3s ease;

  &:hover {
    background-color: #ffa500;
    transform: translateY(-10px);
    color: #1a1a1a;

    h3,
    p {
      color: #1a1a1a;
    }
  }

  &.active {
    background-color: #ffa500;
    color: #1a1a1a;

    h3,
    p {
      color: #1a1a1a;
    }
  }
}
.service3 {
  background-color: #ffb700;
  border: 5px solid #000000;
  padding: 0.2rem;
  border-radius: 5px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  &:hover {
    background-color: #ffa500;
    transform: translateY(-10px);
    color: #1a1a1a;

    h3,
    p {
      color: #1a1a1a;
    }
  }

  &.active {
    background-color: #ffa500;
    color: #1a1a1a;

    h3,
    p {
      color: #1a1a1a;
    }
  }
}
.service4 {
  background-color: #ffb700;
  border: 5px solid #000000;
  padding: 0.2rem;
  border-radius: 5px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  &:hover {
    background-color: #ffa500;
    transform: translateY(-10px);
    color: #1a1a1a;

    h3,
    p {
      color: #1a1a1a;
    }
  }

  &.active {
    background-color: #ffa500;
    color: #1a1a1a;

    h3,
    p {
      color: #1a1a1a;
    }
  }
}

/* fontsize */

.fontsz-intro {
  font-size: 20px !important;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 15px;
  line-height: 30px;
}

.cursor-p {
  cursor: pointer;
}

/* ubicaciones */

.ubic_1 {
  margin: 0px 0 28px 0;
}

/* redes sociales */

#share-wrapper {
  position: fixed !important;
  bottom: 900px;
  right: 0;
  margin: -0px -274px -422px 0px;
  z-index: 1000;
}
#share-wrapper ul {
  width: calc(5 * 70px);
  position: relative;
  left: calc(-50% + -57.5px);
}
#share-wrapper ul li {
  width: 45px;
}
#share-wrapper li > a,
#share-wrapper label {
  color: #efefef;
  border-radius: 50%;
  text-decoration: none;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 0.45;
  cursor: pointer;
}
#share-wrapper li > a#share,
#share-wrapper label#share {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  /* position: relative; */
  z-index: 14;
  opacity: 0.75;
}
#share-wrapper li > a#share:hover,
#share-wrapper label#share:hover {
  background: linear-gradient(
    45deg,
    #bc1888 0%,
    #cc2366 25%,
    #dc2743 50%,
    #e6683c 75%,
    #f09433 100%
  );
}
#share-wrapper li > a#share-facebook,
#share-wrapper label#share-facebook {
  background: #3b5998;
}
#share-wrapper li > a#share-twitter,
#share-wrapper label#share-twitter {
  background: #00acee;
}
#share-wrapper li > a#share-pinterest,
#share-wrapper label#share-pinterest {
  background: #e4405f;
}
#share-wrapper li > a#share-linkedin,
#share-wrapper label#share-linkedin {
  background: #0077b5;
}
#share-wrapper li > a#share-reddit,
#share-wrapper label#share-reddit {
  background: #ff4500;
}
#share-wrapper li > a#share-google-bookmarks,
#share-wrapper label#share-google-bookmarks {
  background: #4285f4;
}
#share-wrapper li > a#share-mix,
#share-wrapper label#share-mix {
  background: #ff8226;
}
#share-wrapper li > a#share-pocket,
#share-wrapper label#share-pocket {
  background: #ee4056;
}
#share-wrapper li > a#share-digg,
#share-wrapper label#share-digg {
  background: #2a2a2a;
}
#share-wrapper li > a#share-blogger,
#share-wrapper label#share-blogger {
  background: #fda352;
}
#share-wrapper li > a#share-tumblr,
#share-wrapper label#share-tumblr {
  background: #35465c;
}
#share-wrapper li > a#share-flipboard,
#share-wrapper label#share-flipboard {
  background: #cc0000;
}
#share-wrapper li > a#share-hacker-news,
#share-wrapper label#share-hacker-news {
  background: #ff6600;
}
#share-wrapper li {
  transition: all 200ms ease;
}
#share-wrapper li:nth-child(1) {
  transition-delay: 16.6666666667ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 13;
}
#share-wrapper li:nth-child(2) {
  transition-delay: 33.3333333333ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 12;
}
#share-wrapper li:nth-child(3) {
  transition-delay: 50ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 11;
}
#share-wrapper li:nth-child(4) {
  transition-delay: 66.6666666667ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 10;
}
#share-wrapper li:nth-child(5) {
  transition-delay: 83.3333333333ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 9;
}
#share-wrapper li:nth-child(6) {
  transition-delay: 100ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 8;
}
#share-wrapper li:nth-child(7) {
  transition-delay: 116.6666666667ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 7;
}
#share-wrapper li:nth-child(8) {
  transition-delay: 133.3333333333ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 6;
}
#share-wrapper li:nth-child(9) {
  transition-delay: 150ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 5;
}
#share-wrapper li:nth-child(10) {
  transition-delay: 166.6666666667ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 4;
}
#share-wrapper li:nth-child(11) {
  transition-delay: 183.3333333333ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 3;
}
#share-wrapper li:nth-child(12) {
  transition-delay: 200ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 2;
}
#share-wrapper li:nth-child(13) {
  transition-delay: 216.6666666667ms;
  opacity: 0;
  transform: translateY(-30%);
  z-index: 1;
}
#share-wrapper input:checked ~ label,
#share-wrapper input:checked ~ ul li {
  transform: scale(1) translateY(0);
  opacity: 1;
  margin: 0px 22px 0 0px;
}

/* menu flotante */

/* img,
svg {
  display: block;
  width: 100%;
} */

a {
  text-decoration: none;
}
.pf-sticky-section {
  width: 80%;
  height: 100px;
  position: fixed;
  align-items: center;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 20px;
  z-index: 9;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.pf-sticky-section ul {
  list-style: none;
  border-radius: 12px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0;
}

.pf-sticky-section li {
  display: inline-block;
  width: 77px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.5s;
  border-radius: 12px;
  padding: 3px 0px 0 7px;
}

.pf-sticky-section li:hover {
  background: rgba(255, 213, 0, 0.564);
  box-shadow: inset 6px 6px 10px 0 rgba(255, 187, 0, 0.2),
    inset -6px -6px 10px 0 rgba(255, 204, 0, 0.5);
  cursor: pointer;
}

.pf-sticky-section img {
  width: 50px;
  height: 50px;
  height: auto;
  display: block;
  margin: auto;
}

/* TRANSPARENCIA MODAL */
.backgMdl {
  background: transparent;
  background-blend-mode: multiply;
  background-color: rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.3);
}

.backgMdl2 {
  background: transparent;
  background-blend-mode: multiply;
  background-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.3);
}
.backgMdlWH {
  background: transparent;
  background-blend-mode: multiply;
  background-color: rgba(207, 202, 202, 0.4) !important;
  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.3);
}
/* boton cerrar */

.btn-close1 {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url(../images/ICO-SVG/icons8_close_window.svg) !important;
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}

.btn-close1 {
  right: 0;
  position: absolute;
  background-size: 150% 150%;
  margin: 0 16px 0 0;
}

/* acordioon altr */

.wrapper {
  width: 100%;
}

.container1 {
  background-color: white;
  color: black;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgb(0, 0, 0, 0.25);
  margin: 20px 0;
}

.question {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 20px 80px 20px 20px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.question::after {
  content: "\002B";
  font-size: 2.2rem;
  position: absolute;
  right: 20px;
  transition: 0.2s;
}

.question.active::after {
  transform: rotate(45deg);
}

.answercont {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s;
}

.answer {
  padding: 0 20px 20px;
  line-height: 1.5rem;
}

/* .question.active + .answercont {
} */

@media screen and (max-width: 790px) {
  html {
    font-size: 14px;
  }
  .wrapper {
    /* width: 80%; */
    width: 100%;
    margin: 0px 0px 0px -6px;
  }
}

/* panel de control */

.gallery *,
.gallery *:before,
.gallery *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
  font-family: "Poppins";
  font-size: 14px;
  line-height: 18px;
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 960px;
}

.gallery .tile {
  display: block;
  width: 100%;
  padding: 0 0.5em 0.5em 0;
}

.gallery .tile .post {
  display: block;
  background-color: #003152;
  color: #f0f0f0;
  text-align: center;
  padding: /* 5em 2em */ 59px 0px 60px 0px;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}

.gallery .tile .post:hover {
  background-color: #005f9e;
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);*/
  transform: perspective(1000px) rotateX(-5deg) rotateY(5deg);
  transform: scale(1.02); /* Efecto de zoom */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.gallery .tile.wide .post {
  background-color: #08457e;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    right top,
    color-stop(1%, #08457e),
    color-stop(52%, #005f9e),
    color-stop(52%, #08457e),
    color-stop(100%, #007cc2)
  );
  background-image: -webkit-linear-gradient(
    45deg,
    #08457e 1%,
    #005f9e 52%,
    #08457e 52%,
    #007cc2 100%
  );
  background-image: -moz-linear-gradient(
    45deg,
    #08457e 1%,
    #005f9e 52%,
    #08457e 52%,
    #007cc2 100%
  );
  background-image: -ms-linear-gradient(
    45deg,
    #08457e 1%,
    #005f9e 52%,
    #08457e 52%,
    #007cc2 100%
  );
  background-image: -o-linear-gradient(
    45deg,
    #08457e 1%,
    #005f9e 52%,
    #08457e 52%,
    #007cc2 100%
  );
  background-image: linear-gradient(
    45deg,
    #08457e 1%,
    #005f9e 52%,
    #08457e 52%,
    #007cc2 100%
  );
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#08457e', endColorstr='#007cc2', GradientType=1);
  color: #fff;
}

.gallery .tile.full .post {
  position: relative;
  /* background: rgb(0, 0, 0); */ /* Elimina la imagen de fondo anterior */
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888,
    #24263d
  );
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc,
    0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999,
    0px 7px 2px rgba(0, 0, 0, 0.5), 0px 7px 2px rgba(0, 0, 0, 0.1),
    0px 7px 2px rgba(0, 0, 0, 0.73), 0px 3px 5px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.37), 0px 10px 10px rgba(0, 0, 0, 0.1),
    0px 20px 20px rgba(0, 0, 0, 0.1);
  height: 415px; /* Ajusta esta altura según tus necesidades */
  overflow: hidden;
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px;
  scale: 1.27 1.65;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
}

/* Estilos específicos para cada imagen del carrusel */
.carousel-item-1 {
  background-image: url("/images/USUARIOS/MODELO-H.jpg");
  background-size: cover;
  border-radius: 5px;
}

.carousel-item-2 {
  background-image: url("/images/USUARIOS/MODELO-M.jpg");
  background-size: cover;
  border-radius: 5px;
}

.carousel-item::after {
  content: "Conoce tu información!\A Toca la imagen para";
  white-space: pre-line;
  position: absolute;
  bottom: 30px;
  left: 100px;
  margin: 0 0 0 -25px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 12px;
  background: rgba(0, 0, 0, 0.9);
  padding: 7px;
}

@media screen and (max-width: 479px) {
  .gallery .tile.full .post {
    height: 40vh; /* Ajusta esta altura para dispositivos móviles */
    padding: 0;
    border-radius: 20px;
    width: 98%;
    margin: 30px auto;
  }
}

@media screen and (min-width: 480px) and (max-width: 719px) {
  .gallery .tile.full .post {
    height: 300px; /* Ajusta esta altura para dispositivos móviles */
  }
}

@media screen and (max-width: 479px) {
  .gallery .tile {
    width: 50%;
    float: left;
  }
  .gallery .tile.wide,
  .gallery .tile.full {
    width: 100%;
  }
}

@media screen and (min-width: 480px) and (max-width: 719px) {
  .gallery .tile {
    width: 50%;
    float: left;
  }
  .gallery .tile.wide,
  .gallery .tile.full {
    width: 100%;
  }
}

@media screen and (min-width: 720px) {
  .gallery .tile {
    width: 33.333%;
    float: left;
  }
  .gallery .tile.wide {
    width: 66.667%;
  }
}

@media screen and (min-width: 960px) {
  .gallery .tile {
    /* width: 25%; */
    width: 33%;
    float: left;
  }
  .gallery .tile.wide {
    width: /* 50% */ 66%;
  }
}

/* CARNET */

#card {
  /* background-color: #24263d; */
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888,
    #24263d
  );
  height: auto;
  width: 391px;
  margin: 0 0 0 34px;
  border-radius: 25px;
  padding-bottom: 1px;
  box-shadow: 2px 2px 5px #00ffae;
}
.titulocardid {
  color: white;
  text-align: center;
  width: 100%;
  background-color: #e6ebee;
  border-radius: 25px 25px 0 0;
  color: #393b45;
  padding: 30px 0;
  font-weight: 800;
  margin: 0;
}

.image-crop {
  /* display: block;
  position: relative;
  background-color: #e6ebee;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  margin-top: 30px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 1px 1px 5px #ffae00; */
  display: block;
  position: relative;
  background-color: #e6ebee;
  width: 200px;
  height: 200px;
  margin: 0px auto;
  margin-top: 30px;
  overflow: hidden;
  border-radius: 5%;
  box-shadow: 1px 1px 5px #ffae00;
}

#avatar {
  display: inline;
  height: 230px;
  width: auto;
  /* margin-left: -34px; */
  margin: -22px -16px;
}

#bio {
  display: block;
  margin: 30px auto;
  width: 280px;
  height: auto;
}

#bio p {
  color: #000000;
  font-weight: lighter;
  font-size: 12px;
  text-align: justify;
  /* margin: 5px auto; */
  margin: 0 0 0 -40px;
}

#stats {
  display: flex;
  flex-direction: row;
  height: auto;
  width: 280px;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  font-weight: 500;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
}

.stat {
  font-size: 25px;
  margin: 0;
  color: rgb(0, 0, 0);
}

.label {
  margin: 0;
  color: rgb(0, 0, 0);
}

#buttons {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  width: 280px;
}

.buttonID {
  display: block;
  position: relative;
  padding: 10px 0;
  width: 130px;
  margin: 30px 0;
  border-radius: 15px;
  border: none;
  font-size: 20px;
  letter-spacing: 0.2px;
  font-weight: 500;
  background-color: #ff4d00;
  color: #e6ebee;
}

.buttonID:focus {
  display: none;
}

.buttonID:hover {
  transform: scale(1.03);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* estilos estudiante card */

.nombre,
.edad,
.fecha-n,
.id-cc,
.correo,
.telef,
.estado {
  color: rgb(255, 255, 255); /* Cambia el color según tu preferencia */
  font-weight: bold; /* Opcional: para hacer el texto en negrita */
}

/* efectos animados botones */

.bttn {
  color: #005f9e;
  text-decoration: none;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s ease all;
  &:hover {
    color: #fff;
  }
  &:focus {
    color: #fff;
  }
}

.bttn {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  /* font-weight: bold; */
  padding: 14px 0px;
  border: 3px solid var(--primary);
  border-radius: 15px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.bttn:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background: linear-gradient(45deg, #ff4500, #ff6347, #ff9900, #ffcc66);
  z-index: -2;
}

.bttn:hover:before,
.bttn:focus:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.bttn-dark {
  color: olivedrab;
  text-decoration: none;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s ease all;
  &:hover {
    color: #fff;
  }
  &:focus {
    color: #fff;
  }
}

.bttn-dark {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  /* font-weight: bold; */
  padding: 14px 0px;
  border: 3px solid var(--second);
  border-radius: 25px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.bttn-dark:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  bottom: 0;
  opacity: 0;
  content: "";
  background: linear-gradient(
    45deg,
    #405de6,
    #5851db,
    #833ab4,
    #c13584,
    #e1306c,
    #fd1d1d
  );
  z-index: -1;
}

.bttn-dark:hover:before,
.bttn-dark:focus:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.btn-vert {
  color: #63b1d0;
  text-decoration: none;
  /* margin: 5px; */
  -webkit-transition: 0.3s all ease;
  transition: 0.3s ease all;
}

.btn-vert:hover,
.btn-vert:focus {
  color: #fff;
}

.btn-vert {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  /* width: 270px;
  font-weight: bold; */
  padding: 14px 0px;
  /* border: 3px solid #63B1D0; */
  border-radius: 20px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.btn-vert:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  bottom: 0;
  opacity: 0;
  content: "";
  background: linear-gradient(45deg, #63b1d0, #4a90e2, #1c77c3, #1a5276);
  z-index: -2;
}

.btn-vert:hover:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.btn-vert:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

/*PULSO BOTON*/

.pulse-button {
  position: relative;
  border: none;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  /*background-color: gold;*/
  border-radius: 25px;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 2.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

.pulse-button:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

/*PULSO icono*/
.question1 {
  position: relative; /* Asegúrate de que el contenedor tenga posición relativa */
}

.question1::after {
  content: "\002B";
  font-size: 2.2rem;
  position: absolute;
  right: 20px;
  transition: 0.2s;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  border-radius: 25px;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 2.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

.question1:hover::after {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

/* cualidades de listas  */

ul {
  list-style-type: square !important; /* Asegura que las viñetas sean de tipo disco */
  padding-left: 20px; /* Añade espacio a la izquierda para las viñetas */
}

ul li {
  list-style-type: disclosure-closed; /* Cambia el estilo de las viñetas para las sublistas */
}

ul li::before {
  content: ""; /* Utiliza un carácter de viñeta */
  position: absolute;
  left: 0;
  color: goldenrod; /* Cambia el color de la viñeta */
  font-size: 1.2em; /* Ajusta el tamaño de la viñeta */
}

ul ul li {
  color: rgb(0, 0, 0); /* Cambia el color del texto a blanco */
  list-style-type: disc;
}

.not-v {
  list-style-type: none;
}

/*BOTON BARRA */

/* Botón principal */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #af1515; /* Rojo inicial */
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 1000;
}

.whatsapp-button.open {
  transform: rotate(90deg);
}

.whatsapp-button.active {
  background-color: green; /* Cambiar a verde cuando esté activo */
}

/* Personalización del popover */
.popover {
  border: 2px solid #128c7e !important; /* Borde verde */
  border-radius: 10px !important;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 250px; /* Ancho máximo */
  background-color: #000 !important; /* Fondo negro */
}

.popover-arrow {
  --bs-popover-bg: red !important; /* Color rojo para la flecha */
}

.popover .popover-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  font-size: 14px;
  color: #ffaa00; /* Color amarillo del texto */
}

.close-popover {
  position: absolute; /* Posicionamos el botón absolutamente dentro del popover */
  top: 5px; /* Ajusta la posición vertical según sea necesario */
  right: 5px; /* Ajusta la posición horizontal según sea necesario */
  z-index: 1; /* Asegúrate de que el botón esté encima de otros elementos */
  background: none;
  border: none;
  color: #ff0000;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.popover .close-popover:hover {
  color: #cc0000; /* Rojo más oscuro al pasar el mouse */
}

.ubiclose {
  margin: -15px -24px 0 26px;
}

.accordionbar-content {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 10px;
  width: 0;
  height: 100px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: width 0.3s ease, visibility 0.3s ease;
  z-index: 999;
  visibility: hidden;
}
.accordionbar-content.open {
  width: calc(100% - 40px); /* Full width minus the button size */
  visibility: visible;
}
.accordionbar-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.accordionbar-content li {
  display: inline;
}
.accordionbar-content a {
  text-decoration: none;
  color: #24263d;
}

/* OFFCANVAS */
.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
  --bs-offcanvas-height: 100vh !important;
}

/* TABLA */

/* Ajuste de ancho de las columnas */
.col-1 {
  min-width: 2% !important;
  max-width: 2% !important;
  width: 2% !important;
}

.col-6 {
  min-width: 50%;
  max-width: 50%;
  width: 50%;
}

.col-4 {
  min-width: 35%;
  max-width: 35%;
  width: 35%;
}

.col-2 {
  min-width: 10%;
  max-width: 10%;
  width: 10%;
}

/* Estilo para el encabezado de la tabla con degradado naranja a púrpura */
.table__head th {
  background: linear-gradient(to right, orange, purple);
  color: white;
}

/* Estilo para la columna de números con degradado naranja */
.winner__table td:first-child {
  background: linear-gradient(to bottom, orange, yellow);
  color: black;
}

/* Estilo para la tabla responsiva */
.table-responsive-stack tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.table-responsive-stack td,
.table-responsive-stack th {
  display: flex;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.table-responsive-stack .table-responsive-stack-thead {
  font-weight: bold;
}

.dataTables_length label {
  color: #ff6600; /* Cambia este valor al color que prefieras */
  font-weight: bold; /* Opcional: para hacer el texto en negrita */
}

.dataTables_info {
  color: white;
}

.dataTables_filter label {
  color: #00ffae;
}

@media screen and (max-width: 768px) {
  .table-responsive-stack tr {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-bottom: 3px solid #ccc;
    display: block;
  }
  /*  IE9 FIX   */
  .table-responsive-stack td {
    float: left\9;
    width: 100%;
  }
}

/* tooltip */
.center {
  display: flex;
}

.buttonT,
.btn,
input[type="submit"] {
  padding: 20px 60px;
  border: none;
  outline: none;
  background: #47b8e0;
  transition: 0.15s ease-in-out;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}
/* button:hover,
button:focus,
.btn:hover,
.btn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: #23a3d1;
} */

.has-tooltip:hover + .tooltip,
.has-tooltip:focus + .tooltip,
.has-tooltip.hover + .tooltip {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) rotate(0deg);
  pointer-events: inherit;
}

.tooltip {
  display: block;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75) rotate(5deg);
  transform-origin: bottom center;
  padding: 10px 30px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  color: white;
  transition: 0.15s ease-in-out;
  opacity: 0;
  width: 100%;
  max-width: 100vw;
  pointer-events: none;
  z-index: 5;
}
.tooltip.blue {
  background: rgba(0, 0, 0, 0.75);
  padding: 7px;
  margin: -20px 0 0 0;
  width: 200px;
  border: 3px solid rgb(255, 204, 0);
}
.tooltip.blue:after {
  border-top: 5px solid rgba(255, 85, 0, 0.75);
}
.tooltip.red {
  background: rgba(231, 29, 54, 0.75);
}
.tooltip.red:after {
  border-top: 5px solid rgba(231, 29, 54, 0.75);
}
.tooltip.green {
  background: rgba(46, 196, 182, 0.75);
}
.tooltip.green:after {
  border-top: 5px solid rgba(46, 196, 182, 0.75);
}
.tooltip.purple {
  background: rgba(165, 147, 224, 0.75);
}
.tooltip.purple:after {
  border-top: 5px solid rgba(165, 147, 224, 0.75);
}
.tooltip:hover {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) rotate(0deg);
  pointer-events: inherit;
}
.tooltip img {
  max-width: 100%;
}
.tooltip:after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}

.field {
  position: relative;
  padding: 0px;
}

/* notificaciones */
.containernot {
  position: absolute;
  top: 10%;
  left: 10%;
  margin-right: -50%;
  transform: translate(0%, -50%);
  text-align: center;
  z-index: 3;
}

.buttonnot {
  display: block;
  padding: 1em 2em;
  outline: none;
  font-weight: 600;
  border: none;
  color: #fff;
  background-color: #3498db;
  border: 1px solid #1f74ac;
  border-radius: 0.3em;
  margin-top: 4em;
  cursor: pointer;
}

.buttonnot:hover {
  background-color: #2487c9;
}

/* Notifications */
.notification.has-notifications {
  background: #e74c3c; /* Color rojo cuando hay notificaciones */
}

.notification.has-notifications::after {
  background: #ff1900; /* Color rojo cuando hay notificaciones */
}

.notification {
  display: inline-block;
  position: relative;
  padding: 5px 20px 7px 20px;
  background: #3498db;
  border-radius: 2.2em;
  font-size: 1.3em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.notification::before,
.notification::after {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.notification::before {
  display: block;
  content: "\f0f3";
  font-family: "FontAwesome";
  transform-origin: top center;
  font-size: 50px;
}

.notification::after {
  font-family: Arial;
  font-size: 0.7em;
  font-weight: 700;
  position: absolute;
  top: -15px;
  right: -15px;
  padding: 5px 8px;
  line-height: 100%;
  border: 2px #fff solid;
  border-radius: 60px;
  background: #3498db;
  opacity: 0;
  content: attr(data-count);
  opacity: 0;
  transform: scale(0.5);
  transition: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.notification.notify::before {
  animation: ring 1.5s ease;
}

.notification.show-count::after {
  transform: scale(1);
  opacity: 1;
}

@keyframes ring {
  0% {
    transform: rotate(35deg);
  }
  12.5% {
    transform: rotate(-30deg);
  }
  25% {
    transform: rotate(25deg);
  }
  37.5% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(15deg);
  }
  62.5% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* TOAST NOTIFICACIONES */

.toast-container {
  bottom: 50px; /* Ajusta esta distancia según tus necesidades */
  left: 0;
}
.toast-header {
  background-image: url("/notfcons/img/11.jpg"); /* Cambia esta ruta por la de tu imagen */
  /* background-color: rgba(255, 179, 0, 0.6) !important; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: multiply;
  color: rgb(255, 106, 0);
  height: 10vh;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-up {
  animation: slideInUp 0.5s forwards;
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.slide-out-left {
  animation: slideOutLeft 0.5s forwards;
}

.toastbnotf {
  /* background: rgba(0, 0, 128, 0.9) !important; */
  color: white;
  font-weight: bolder;
}

#toastnotf {
  margin: 0 0 0 176px;
}

/* =============iframe notificac */

.iffrm {
  width: 100%;
  height: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  #toastnotf {
    margin: 0 0 0 11px;
  }

  .containernot {
    position: absolute;
    top: 32%;
    left: 80%;
    margin-right: -50%;
    transform: translate(0%, -50%);
    text-align: center;
    z-index: 1;
  }

  .notification {
    display: inline-block;
    position: relative;
    padding: 8px 8px 8px 20px;
    background: #3498db;
    border-radius: 2em;
    font-size: 1.3em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  .notification::before {
    display: block;
    content: "\f0f3";
    font-family: "FontAwesome";
    /* transform-origin: top center; */
    transform: translateX(-6px);
    font-size: 20px;
  }

  .fontsz-intro {
    font-size: 16px !important;
    padding: 10px;
  }

  .pf-sticky-section {
    width: 70%;
    margin: 0 0 0 -21px;
    padding: 0;
  }

  .margid {
    margin: 100px 0 0 0;
  }

  #card {
    margin: 0 0 0 -11px;
  }
  .lx-quote {
    margin: 60px 0 40px -16px;
    padding: 25px;
    background: #fbfbfb;
    border-left: 10px solid #0099cc;
  }

  .gallery {
    margin: 0 -11px;
  }

  .PEIt {
    font-size: 10px !important;
    margin: 0 0px 0 -2px !important;
    width: 244% !important;
  }
}