body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #fdfdfd;
}

.book {
  position: relative;
  width:80%;
  max-width:85%; /* Cambiar a un ancho máximo para pantallas más pequeñas */
  height: 95%;
  perspective: 2500px;
  background: linear-gradient(to bottom, #4caf50, #8bc34a, #cddc39, #ffeb3b, #ff6607);
  border-radius: 0 50px 50px 0;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
}
.book::before {
  content: "ACTIVACOOP"; /* El texto que quieres mostrar */
  position: absolute;
  right: 0; /* Alinea el texto al borde derecho */
  top: 0; /* Alinea el texto al borde superior */
  bottom: 0; /* Alinea el texto al borde inferior */
  font-size: 4vw; /* Ajusta el tamaño de la fuente según el ancho de la pantalla */
  font-weight: bold; /* Estilo del texto */
  color: rgb(245, 75, 13); /* Color del texto */
  writing-mode: vertical-rl; /* Hace que el texto se muestre de forma vertical de abajo hacia arriba */
  text-align: center; /* Centra el texto dentro del contenedor */
  transform: rotate(180deg); /* Rota el texto para que sea más legible */
  z-index: 1; /* Asegura que el texto esté por encima del fondo */
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 6px 6px 12px rgb(249, 248, 248); 
  font-family: system-ui;
}

.nosotros {
  text-align: center;
  font-family: cursive;
}

.page {
  width: 93%;
  height: 99%;
  position: absolute;
  top: 2px;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform-origin: left;
  transform-style: preserve-3d;
  transition: transform 1.2s ease, visibility 0.8s ease;
  z-index: 1;
  backface-visibility: hidden; /* No mostrar la parte trasera */
  visibility: hidden; /* Solo mostrar la página activa */
  border-radius: 0 50px 50px 0;
}

.page h2, .page p {
  margin: 30px;
}

.logoportada {
  display: flex;
  justify-content: center;
  align-items: center;
  height:50%;
  width: 100%;
   margin: 0;
  padding: 0; /* Elimina cualquier relleno */
   box-sizing: border-box; 
}

.logoportada img {
  margin-top: 2%; /* Margen superior */
  max-height: 90%; /* Asegura que la imagen no exceda el contenedor */
  max-width: 90%; /* Asegura que la imagen mantenga sus proporciones */
  height: auto; /* Ajuste automático de altura según el ancho */
  object-fit: contain; /* Evita distorsión de la imagen */

}

.diaposiuno {
  text-align: center;
  font-size: 40px;
  color: #ff5722;
  font-family: cursive;
  margin-top: 1%; /* Esto coloca el margen superior */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0; /* Elimina cualquier relleno */
}

.diaactiuno {
  text-align: center;
  font-size: 70px;
  color: #ff5722;
  font-family: cursive;
  margin-top: 1%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0; /* Elimina cualquier relleno */
}



.page p {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #31c024;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0; /* Elimina cualquier relleno */
}

.diados {
  position: absolute; /* Posiciona el recuadro de manera absoluta */
  top: 0; /* Alinea al borde superior */
  right: 0; /* Alinea al borde derecho */
  width: 35%; /* Establece el ancho del recuadro al 60% */
  text-align: right; /* Alinea el texto a la derecha */
  font-size: 22px;
  font-family: monospace;
  color: #ffffff;
  height: 30px; /* Establece la altura del recuadro */
  background-color: #ff5722;
  padding: 10px 10px; /* Agrega un poco de espacio alrededor del contenido */
  border-radius: 10px;
  
}

.contentres{
  margin-top: 120px;
  font-family: system-ui;
  font-weight: normal;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  color: #231c3f;
  width: 90%;
  
}
.contentres li {
  list-style: none;
}

.contentres li p{
  font-size: 18px;
  text-align: justify;
  color: #231c3f;
  font-weight: normal;
  font-family: system-ui;
  font-weight: normal;
  padding-left: 10%; 
}

.contencua{
  margin-top: 120px;
  padding-left: 10%; 
  width: 85%;
}

.contencua p{
  font-size: 18px;
  color: #231c3f;
  font-family: system-ui;
  font-weight: normal;
  text-align: justify;
}

.contesolida{
  margin-top: 9%;
  padding-left: 5%;
  width:80%;
}

.contesolida ul li{
  list-style: none;
  font-family: system-ui;
}

.contesolida ul p{
  text-align: justify;
  font-size: 18px;
  color: #4caf50;
  font-family: system-ui;
}

.contesolida ul li p{
  width: 90%;
  font-size: 16px;
  text-align: justify;
  padding-left: 10%; 
  color: #231c3f;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-top: 8px;
  font-family: system-ui;
  font-weight: normal;
}

.contesolida table{
  text-align: center;
  justify-content: center;
  padding-left: 35%; 
  color: #245826;
  font-family: system-ui;
  font-size: 14px;
}

.clausula{
  margin-top: 5%;
  width:85%;
   padding-left: 10%; 
}

.clausula h2{
  margin-top: 180px;
  text-align: center;
  color: #229a26;
}
.clausula p{
  text-align: justify;
  text-align: center;
  color: #231c3f;
  font-size: 16px;
  font-family: system-ui;
  font-weight: normal
}

.titubien h2{
  
  font-family: system-ui;
  color: #229a26;
  text-align: center;
  margin:0;
  padding: 0; 
  margin-top:80px;
}


.page.active {
  visibility: visible;
}

.page.flipped {
  transform: rotateY(-180deg);
  z-index: 0;
  box-shadow: -10px 0 15px rgba(0, 0, 0, 0.3);
}

.page h2, .page p {
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.page.flipped h2, .page.flipped p {
  opacity: 0;
  transform: translateX(-100px);
}

.imgseg, .imgquin, .imgses,.imgquindos {
  display: flex;
  justify-content: center;
  align-items: center;
  height:85%;
  width: 100%;
  flex-direction: column; /* Asegura que el título y la imagen estén en columna */
 
}

.imgseg img {
 margin-top:14%;
  height:90%;
}

.imgquin img{
   margin-top:14%;
  height:90%;
}

.imgquindos img{
   margin-top:14%;
  height:90%;
}

.imgses img{
  margin: 0; /* Elimina todos los márgenes */
  padding: 0; /* Elimina cualquier relleno */
  height: 80%; /* Mantiene la altura de la imagen */
  box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño */
  display: block;
}


button {
  margin: 20px;
  padding: 10px 20px;
  background-color: #66cc66;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 10px;
}

button:hover {
  font-weight: bold;
  background-color: #ff5722;
}

button:disabled {
  background-color: #ccc;
}

@media screen and (max-width: 768px) {
.book::before {
    font-size: 6vw; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
  }
 
  .logoportada {
    height: 40vh; /* Reduce el alto del contenedor en pantallas más pequeñas */
  }
  .logoportada img {
    max-height: 80%; /* Ajusta el tamaño máximo de la imagen */
    max-width: 80%; /* Reduce el ancho máximo de la imagen */
  }
  
  .imgseg img,
  .imgquin img,
  .imgses img,
  .imgquindos img {
    margin-top: 14%; /* Reduce el margen superior para pantallas más pequeñas */
    max-height: 80%; /* Ajusta la altura máxima */
    max-width: 80%; /* Reduce el ancho máximo */
  }
  
  .diaposiuno {
    font-size: 30px; /* Reduce el tamaño de la fuente en tablets */
  }

  .diaactiuno {
    font-size: 50px; /* Reduce el tamaño de la fuente en tablets */
  }
  
   .diados {
    width: 60%; /* Aumenta el ancho en tablets */
    font-size: 12px; /* Reduce el tamaño del texto */
    padding: 8px 16px; /* Reduce el espaciado interno */
  }
  
  .contentres {
    margin-top: 25%; /* Reduce el margen superior para tablets */
  }

  .contentres li p {
    font-size: 14px; /* Reduce el tamaño del texto para tablets */
    padding-left: 10%; /* Reduce el espaciado desde la izquierda */
  }
  
   .contencua {
    margin-top: 25%; /* Reduce el margen superior */
    padding-left: 8%; /* Reduce el espaciado desde la izquierda */
  }

  .contencua p {
    font-size: 14px; /* Reduce el tamaño de la fuente */
  }
  
  .contesolida {
    margin-top: 23%; /* Reduce el margen superior */
    padding-left: 3%; /* Reduce el espaciado desde la izquierda */
  }

  .contesolida ul p {
    font-size: 14px; /* Reduce el tamaño de fuente */
  }

  .contesolida ul li p {
    font-size: 12px; /* Reduce el tamaño de fuente */
    padding-left:10%; /* Reduce el espaciado desde la izquierda */
    width: 95%; /* Ajusta el ancho del texto */
  }

  .contesolida table {
    padding-left: 15%; /* Reduce el espaciado desde la izquierda */
  }
   .clausula {
    margin-top: 1%; /* Ajusta el margen superior para pantallas más pequeñas */
  }
  
  .clausula h2 {
    font-size: 6vw; /* Ajusta el tamaño de la fuente del encabezado */
  }
  
  .clausula p {
    font-size: 4vw; /* Ajusta el tamaño de la fuente del párrafo */
  }
  
}

@media screen and (max-width: 480px) {
.book::before {
    font-size: 4vw; /* Ajusta aún más el tamaño de la fuente para pantallas muy pequeñas */
}
  .logoportada {
    height: 30vh; /* Reduce aún más el contenedor */
  }
  .logoportada img {
    max-height: 70%; /* Ajusta el tamaño máximo de la imagen */
    max-width: 70%; /* Reduce el ancho máximo de la imagen */
  }
  
  .imgseg img,
  .imgquin img,
  .imgses img,
  .imgquindos img {
    margin-top: 12%; /* Reduce aún más el margen superior */
    max-height: 70%; /* Ajusta el tamaño para pantallas muy pequeñas */
    max-width: 70%; /* Reduce el ancho máximo */
  }
  
  .diaposiuno {
    font-size: 20px; /* Reduce el tamaño de la fuente en móviles */
  }

  .diaactiuno {
    font-size: 35px; /* Reduce el tamaño de la fuente en móviles */
  }
   .diados {
    width: 80%; /* Ancho casi completo para dispositivos móviles */
    font-size: 10px; /* Reduce aún más el tamaño del texto */
    padding: 6px 12px; /* Reduce el espaciado interno */
    top: 10px; /* Añade un margen superior para mayor claridad */
    right: 10px; /* Añade un margen lateral para no tocar los bordes */
  }
  
  .contentres {
    margin-top: 30%; /* Reduce aún más el margen superior para móviles */
  }

  .contentres li p {
    font-size: 12px; /* Reduce el tamaño del texto para dispositivos móviles */
    padding-left: 6%; /* Espaciado más pequeño desde la izquierda */
  }
   .contencua {
    margin-top: 30%; /* Reduce aún más el margen superior */
    padding-left: 5%; /* Minimiza el espaciado desde la izquierda */
  }

  .contencua p {
    font-size: 12px; /* Ajusta el tamaño del texto para móviles */
  }
  .contesolida {
    margin-top: 25%; /* Reduce aún más el margen superior */
    padding-left: 2%; /* Minimiza el espaciado desde la izquierda */
  }

  .contesolida ul p {
    font-size: 12px; /* Ajusta el tamaño de fuente para móviles */
  }

  .contesolida ul li p {
    font-size: 10px; /* Reduce aún más el tamaño de fuente */
    padding-left: 8%; /* Minimiza el espaciado desde la izquierda */
    width: 100%; /* Asegura que el texto ocupe todo el ancho disponible */
  }

  .contesolida table {
    padding-left: 5%; 
    font-size:8px;
  }
  .clausula {
    margin-top: 1%; /* Ajusta el margen superior para pantallas aún más pequeñas */
  }

  .clausula h2 {
    font-size: 5vw; /* Ajusta aún más el tamaño de la fuente del encabezado */
  }

  .clausula p {
    font-size: 4vw; /* Ajusta aún más el tamaño de la fuente del párrafo */
  }
}