* {
  font-family: "Creato Display Regular", sans-serif;
  font-optical-sizing: auto;
  font-size: 15px;
  color: black;
}
.div-caratula {
  min-height: 40px;
  @media (min-width: 1081px) {
    min-height: 200px;
  }
}
.content-fist {
  font-family: "Creato Display Bold", sans-serif;
  font-optical-sizing: auto;
  font-size: 20px;
  color: black;
}
.content {
  font-family: "Creato Display Regular", sans-serif;
  font-optical-sizing: auto;
  font-size: 15px;
  color: black;
}

.content-bold {
  font-family: "Creato Display Bold", sans-serif;
}
.content-extra-bold {
  font-family: "Creato Display ExtraBold", sans-serif;
}
.content-extra-black {
  font-family: "Creato Display Black", sans-serif;
}
.interlineado {
  line-height: 1;
}
.color-black {
  color: black;
}
.color-purple {
  color: #a400d0;
}
.color-light-purple {
  color: #bb00ff;
}
.color-magenta{
  color:#ff1aff;
}
.color-orange{
  color:#ff763b;
}
.color-violet{
  color:#7380FF
}
.color-light-blue {
  color: #58bce7;
}
.color-yellow{
  color: #ffaa1a;
}
.font-15 {
  font-size: 15px;
}
.font-20 {
  font-size: 20px;
}
.font-30 {
  font-size: 30px;
}
.font-60 {
  font-size: 50px;
}
.color-white {
  color: white;
}
.color-blue {
  color: #009fff;
}
.color-pink {
  color: #ff17b9;
}

.chart {
  background-color: #ffffff;
  border-radius: 30px; /* Rounded corners */
  padding: 20px 25px; /* Add some padding */
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Right-side shadow with blur */
  z-index: 1; /* Asegura que la capa esté debajo */
}

.fondo-base-puntos {
  background-image: url("/assets/img/fondo_general.png");
  background-repeat: repeat;
  background-position: center;
 
}
.fondo-base-conclusiones {
  background-image: url("/assets/img/fondo-conclusiones.svg");
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
 
}
.div-con-degradado {
  background-image: linear-gradient(
    to bottom,
    #4f9fff,
    #6d4add,
    #a533c1
  ); /* Degradado lineal vertical */
}

.div-con-degradado-pink {
  background-image: linear-gradient(
    to bottom,
    #e90096,
    #be00c7
  ); /* Degradado lineal vertical */
}
.div-con-degradado-historia {
  background-image: linear-gradient(
    to bottom,
    #159eff,
    #bc00c5
  ); /* Degradado lineal vertical */
}
.personaje-contenedor img {
  max-height: 250px;
  /* Asegúrate de que la imagen ocupe al menos la altura mínima */
  object-fit: cover;
}
/*METODOLOGIA */
.stack-metodologia {
  position: relative;
  min-height: 150px;
  max-height: 20vh;

  /* Media query para dispositivos móviles */
  @media (max-width: 600px) {
    min-height: 200px;
    /* Ajusta la altura máxima para dispositivos móviles */
  }
}

/* DIV IMAGEN */
.contenedor-metodologia-t1 {
  position: absolute;
  top: 0px;
  min-height: 150px;
  max-height: 20vh;
  width: 100%;
  background-image: url("/assets/img/separadores/1-fondo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Media query para dispositivos móviles */
  @media (max-width: 600px) {
    min-height: 200px;
    /* Ajusta la altura máxima para dispositivos móviles */
  }
}

.contenedor-metodologia-t2 {
  position: absolute;
  top: 0px;
  min-height: 150px;
  max-height: 20vh;
  width: 100%;
  background-image: url("/assets/img/separadores/2-fondo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Media query para dispositivos móviles */
  @media (max-width: 600px) {
    min-height: 200px;
    /* Ajusta la altura máxima para dispositivos móviles */
  }
}

.contenedor-metodologia-t3 {
  position: absolute;
  top: 0px;
  min-height: 150px;
  max-height: 20vh;
  width: 100%;
  background-image: url("/assets/img/separadores/3-fondo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Media query para dispositivos móviles */
  @media (max-width: 600px) {
    min-height: 200px;
    /* Ajusta la altura máxima para dispositivos móviles */
  }
}

.contenedor-metodologia-t4 {
  position: absolute;
  top: 0px;
  min-height: 150px;
  max-height: 20vh;
  width: 100%;
  background-image: url("/assets/img/separadores/4-fondo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Media query para dispositivos móviles */
  @media (max-width: 600px) {
    min-height: 200px;
    /* Ajusta la altura máxima para dispositivos móviles */
  }
}

.contenedor-metodologia-t5 {
  position: absolute;
  top: 0px;
  min-height: 150px;
  max-height: 20vh;
  width: 100%;
  background-image: url("/assets/img/separadores/5-fondo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Media query para dispositivos móviles */
  @media (max-width: 600px) {
    min-height: 200px;
    /* Ajusta la altura máxima para dispositivos móviles */
  }
}

.containedor-metodologia-logo {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 20vh;
}
.image-metodologia {
  max-width: 20vh;
  min-width: 10vh;

  /* Media query para dispositivos móviles */
  @media (max-width: 600px) {
    min-width: 100px;
    /* Ajusta la altura máxima para dispositivos móviles */
  }
}

.image-metodologia img {
  width: 100%;
  height: auto;
}

.li-dot {
  list-style: none;
  list-style-image: url("/assets/img/dot.png");
  padding-left: 20px;
  background-position: left center; /* Alinea la imagen a la izquierda y centrada verticalmente */
  background-repeat: no-repeat;
}

/*VIDEO*/
.contenedor-video {
  position: relative; /* Necesario para el posicionamiento absoluto del iframe */
  width: 100%; /* El contenedor ocupa todo el ancho */
  padding-bottom: 56.25%; /* Proporción 16:9 (9 / 16 * 100) - Ajusta si es diferente */
  height: 0;
  overflow: hidden; /* Oculta el contenido que se desborda */
}

.contenedor-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* Boton */
.button-gradient{
  all: unset;
  padding: 8px 45px;
  border-radius: 35px;
  background-image: linear-gradient(to right,
          #4f9fff,
          #6d4add,
          #a533c1);
}
.button-gradient a{
color: white;
text-decoration: none;
}
.button-gradient:hover {
  background-image: linear-gradient(to left,
          #4f9fff,
          #6d4add,
          #a533c1);
}

.rounded-white-container {
  border: 1px solid white;
  border-radius: 50px;
   background-color: transparent;
   box-sizing: border-box;
}

/* LINEA VERTICAL */

.contenedor-line-vertical {
  position: relative;
  height: auto; /* Altura del contenedor */
}

.linea-vertical {
  position: absolute;
  margin-left: 4rem; /* Ubica la línea a la izquierda */
  top: 0; /* Empieza desde la parte superior */
  width: 5px; /* Grosor de la línea */
  height: 100%; /* Asegura que la línea ocupe toda la altura del contenedor */
  background-color: #a400d0;
  z-index: 0;
}
@media (max-width: 800px) {
.linea-vertical{
  background-color: transparent;
}
}