/* ******************************* */
/*              Textos             */
/* ******************************* */
.hidden{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
  
h1.hidden, .hidden.h1 {
  height: 6.75rem;
}
h2.hidden, .hidden.h2 {
  height: 5.65rem;
}
h3.hidden, .hidden.h3 {
  height: 4.45rem;
}
h4.hidden, .hidden.h4 {
  height: 3.65rem;
}
h5.hidden, .hidden.h5 {
  height: 2.85rem;
}
h6.hidden, .hidden.h6 {
  height: 2.25rem;
}
@media screen and (max-width: 39.9375em) {
	h1.hidden, .hidden.h1 {height: 3.33rem;}
	h2.hidden, .hidden.h2 {height: 2.8rem;}
	h3.hidden, .hidden.h3 {height: 2.75rem;}
	h4.hidden, .hidden.h4 {height: 2.5rem;}
	h5.hidden, .hidden.h5 {height: 2.45rem;}
	h6.hidden, .hidden.h6 {height: 2.25rem;}	
}
.especial{
	color: var(--fz-default);
}
/* ******************************* */
/*           Formularios           */
/* ******************************* */
input[type="radio"] {
  appearance: none; /* Desactiva el estilo predeterminado */
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%; /* Da forma circular */
  border: 1px solid #ccc;
  margin-bottom: 0;
  vertical-align: middle;
  position: relative;
}
/* Estilo para el círculo interno cuando el radio está seleccionado */
input[type="radio"]:checked::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--fz-default);
}
  /* Estilo para el input checkbox */
  input[type="checkbox"] {
  appearance: none; /* Desactiva el estilo predeterminado */
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px; /* Da forma redondeada */
  border: 1px solid var(--fz-default);
  margin-bottom: 0;
  vertical-align: middle;
  position: relative;
}

/* Estilo para el cuadrado interno cuando el checkbox está seleccionado */
input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: var(--fz-default);
}

/* Desactivar eventos de puntero en el cuadrado interno */
input[type="checkbox"]:checked::before {
  pointer-events: none;
}

.input-error[type='text'], .input-error[type='password'], .input-error[type='date'], .input-error[type='datetime'], .input-error[type='datetime-local'], .input-error[type='month'], .input-error[type='week'], .input-error[type='email'], .input-error[type='number'], .input-error[type='search'], .input-error[type='tel'], .input-error[type='time'], .input-error[type='url']{
  color: black;
  border: 1px solid var(--fz-warning-hover);
  background-color: var(--fz-warning); }
.input-success[type='text'], .input-success[type='password'], .input-success[type='date'], .input-success[type='datetime'], .input-success[type='datetime-local'], .input-success[type='month'], .input-success[type='week'], .input-success[type='email'], .input-success[type='number'], .input-success[type='search'], .input-success[type='tel'], .input-success[type='time'], .input-success[type='url']{
  color: var(--fz-success);
  border: 1px solid var(--fz-success);
  background-color: var(--fz-input-focus); }

/* ******************************* */
/*              buttons            */
/* ******************************* */
.button svg{
  transition: 0.25s ease-out;
  fill: #fff;
}

.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover, .button.hollow.disabled:focus, .button.hollow[disabled]:focus {
  border: 1px solid var(--fz-default);
  color: var(--fz-default); }
.button.hollow:hover, .button.hollow:focus {
  border-color: var(--fz-default-hover);
  color: var(--fz-default-hover); }
  .button.hollow svg{
  fill: var(--fz-default);
}
  .button.hollow:hover svg{
  fill: var(--fz-default-hover);
}

.button.grey, .button.grey.disabled, .button.grey[disabled], .button.grey.disabled:hover, .button.grey[disabled]:hover, .button.grey.disabled:focus, .button.grey[disabled]:focus {
  background-color: #f9f9fb;
  border: 1px solid var(--fz-default);
  color: var(--fz-default); }
.button.grey:hover, .button.grey:focus {
  background-color: #f9f9fb;
  border-color: var(--fz-default-hover);
  color: var(--fz-default-hover); }
  .button.grey svg{
  fill: var(--fz-default);
}
.button.grey:hover svg{
  fill: var(--fz-default-hover);
}
.button.white, .button.white.disabled, .button.white[disabled], .button.white.disabled:hover, .button.white[disabled]:hover, .button.white.disabled:focus, .button.white[disabled]:focus {
  background-color: #f9f9fb;
  border: 1px solid var(--fz-default);
  color: var(--fz-default); }
.button.white:hover, .button.white:focus {
  background-color: #f9f9fb;
  border-color: var(--fz-default-hover);
  color: var(--fz-default-hover); }
  .button.white svg{
  fill: var(--fz-default);
}
.button.white:hover svg{
  fill: var(--fz-default-hover);
}
/* ******************************* */
/*       space margin padding      */
/* ******************************* */
.container-padding {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.container-padding.large{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.container-margin{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.container-margin.large{
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.accordion-content a:hover{
  color: var(--fz-default);
}

#colorfulDiv {
  height: 350px;
  width: 100%;
  border: 1px solid black;
  margin: 20px;
  overflow: hidden; /* Para que la imagen no sobresalga del div */
  position: relative;
}

#colorfulDiv img {
  width: 50%; /* Ancho de la imagen al 50% del ancho del div */
  display: block; /* Para asegurarse de que la imagen esté en su propia línea */
  position: absolute;
  right: 0;
}
#colorOverlay {
  position: absolute; /* Establecer la posición absoluta para superponer el degradado sobre la imagen */
  top: 0; /* Posicionar el degradado en la parte superior del div */
  left: 0; /* Posicionar el degradado en la parte izquierda del div */
  width: 100%; /* Ancho del degradado igual al ancho del div */
  height: 100%; /* Altura del degradado igual a la altura del div */
}

.style-data-image{
  background-position: center right;
  background-size: 75%;
  background-repeat: no-repeat;
  border-radius: var(--fz-border-radius-components);
}

a.activo{
  color: var(--fz-success);
  font-weight: bold;
}
a.activo:hover{
  color: var(--fz-success-hover);
  font-weight: bold;
}

.content-img-especial{
  color: white;
  fill: white;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-img-especial img {
  width: 100%;
  position: absolute;
  display: block;
  object-fit: cover;
  z-index: -1;
}
/* ******************************* */
/*              top-bar            */
/* ******************************* */
.top-bar a{
  font-weight: 600;
  font-size: small;
}
/* ******************************* */
/*       API Views Transition      */
/* ******************************* */
@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}
@keyframes slide-from-right {
  from { transform: translateY(-50px); }
}

@keyframes slide-to-left {
  to { transform: translateY(50px); }
}

::view-transition-old(root) {
  animation: 100ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
  /* 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; */
}

::view-transition-new(root) {
  /* animation: 210ms cubic-bezier(0, 0, 0.2, 1) 100ms both fade-in; */
  animation: 500ms fade-in;
  /* 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; */
}
/* ::view-transition-old(root), */
/* ::view-transition-new(root) { */
  /* animation-duration: .7s; */
/* } */
.question-section {
  display: none;
}
.active {
  display: block;
}

img.circular{
  border-radius: 500px;
  border: 3px solid var(--fz-default);
}

#text {
  font-size: 24px;
  font-weight: bold;
}

.blur {
  display: inline-block;
  animation: blur 0.6s;
}

@keyframes blur {
  0% {
      transform: translateY(0);
      opacity: 1;
      filter: blur(0);
  }
  50% {
      transform: translateY(-100%);
      opacity: 0;
      filter: blur(3px);
  }
  50.01% {
      transform: translateY(100%);
      opacity: 0;
      filter: blur(3px);
  }
  100% {
      transform: translateY(0);
      opacity: 1;
      filter: blur(0);
  }
}

.no-js .title-bar {
  display: none;
}

@media screen and (min-width: 40em) {
  /* .no-js .top-bar {
    display: block;
  } */

  .no-js .title-bar {
    display: none;
  }
}
/* Effect gradiente*/
/* body {
  background-image: radial-gradient(
						circle 1280px at 20% 30%,
                            rgba(67, 57, 255, 0.7), 1%,
                            rgba(159, 16, 16, 0) 100%),
                  	radial-gradient(
						circle 1280px at 80% 70%, 
							rgba(106, 17, 203, 0.5), 1%,
                            rgba(159, 16, 16, 0) 100%);
  background-size: 200% 200%;
  animation: gradientAnimation 40s ease infinite;
} */

@keyframes gradientAnimation {
  0% {
      background-position: 20% 30%, 80% 70%;
  }
  25% {
      background-position: 30% 40%, 70% 60%;
  }
  50% {
      background-position: 40% 50%, 60% 50%;
  }
  75% {
      background-position: 50% 60%, 50% 40%;
  }
  100% {
      background-position: 20% 30%, 80% 70%;
  }
}


.bx-tada {
  -webkit-animation: tada 1.5s ease infinite;
  animation: tada 1.5s ease infinite;
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
    transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
  }
  40%, 60%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bx-spin{
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(360deg);
  }
}

.float-left,.float-right{
  width: 50%;
}