<!-- Contenedor principal del libro -->
<div class="book">
    <!-- Contenedor de la portada -->
    <div class="cover"></div>
</div>

<!-- Estilos CSS -->
<style>
/* Estilos para el contenedor del libro */
.book {
  position: relative; /* Posici贸n relativa para colocar elementos hijos en relaci贸n a este contenedor */
  border-radius: 10px; /* Bordes redondeados del contenedor */
  width: 500px; /* Ancho del contenedor */
  height: 500px; /* Altura del contenedor */
  background-image: url('https://www.cuentosartesana.com.mx/wp-content/uploads/2024/05/Mila-con-estrella.jpg'); /* Imagen de fondo del libro */
  background-size: contain; /* La imagen se ajusta al tama帽o del contenedor sin perder proporci贸n */
  -webkit-box-shadow: 1px 1px 12px #000; /* Sombra para navegadores WebKit (Safari, Chrome) */
  box-shadow: 1px 1px 12px #000; /* Sombra del contenedor */
  -webkit-transform: preserve-3d; /* Mantiene la transformaci贸n 3D para navegadores WebKit */
  -ms-transform: preserve-3d; /* Mantiene la transformaci贸n 3D para navegadores Microsoft */
  transform: preserve-3d; /* Mantiene la transformaci贸n 3D */
  -webkit-perspective: 2000px; /* Perspectiva para efecto 3D en navegadores WebKit */
  perspective: 2000px; /* Perspectiva para efecto 3D */
  display: -webkit-box; /* Modelo de caja flexible para navegadores WebKit */
  display: -ms-flexbox; /* Modelo de caja flexible para navegadores Microsoft */
  display: flex; /* Modelo de caja flexible */
  -webkit-box-align: center; /* Alineaci贸n vertical al centro para navegadores WebKit */
  -ms-flex-align: center; /* Alineaci贸n vertical al centro para navegadores Microsoft */
  align-items: center; /* Alineaci贸n vertical al centro */
  -webkit-box-pack: center; /* Alineaci贸n horizontal al centro para navegadores WebKit */
  -ms-flex-pack: center; /* Alineaci贸n horizontal al centro para navegadores Microsoft */
  justify-content: center; /* Alineaci贸n horizontal al centro */
  color: #000; /* Color del texto dentro del contenedor */
}

/* Estilos para el contenedor de la portada */
.cover {
  top: 0; /* Posici贸n superior cero */
  position: absolute; /* Posici贸n absoluta para superponer sobre el contenedor principal */
  background-image: url('https://www.cuentosartesana.com.mx/wp-content/uploads/2024/05/Portada-Mila-la-Sirena.jpg'); /* Imagen de fondo de la portada */
  background-size: contain; /* La imagen se ajusta al tama帽o del contenedor sin perder proporci贸n */
  background-position: center; /* Posici贸n de la imagen en el centro */
  background-repeat: no-repeat; /* No repetir la imagen de fondo */
  width: 100%; /* Ancho completo del contenedor principal */
  height: 100%; /* Altura completa del contenedor principal */
  border-radius: 10px; /* Bordes redondeados de la portada */
  cursor: pointer; /* Cambia el cursor a pointer al pasar sobre la portada */
  -webkit-transition: all 0.5s; /* Transici贸n de 0.5 segundos para navegadores WebKit */
  transition: all 0.5s; /* Transici贸n de 0.5 segundos */
  -webkit-transform-origin: 0; /* Origen de la transformaci贸n en el borde izquierdo para navegadores WebKit */
  -ms-transform-origin: 0; /* Origen de la transformaci贸n en el borde izquierdo para navegadores Microsoft */
  transform-origin: 0; /* Origen de la transformaci贸n en el borde izquierdo */
  -webkit-box-shadow: 1px 1px 12px #000; /* Sombra para navegadores WebKit */
  box-shadow: 1px 1px 12px #000; /* Sombra del contenedor */
  z-index: 10; /* Nivel de superposici贸n */
}

/* Estilos al pasar el rat贸n sobre el contenedor del libro */
.book:hover .cover {
  -webkit-transition: all 0.5s; /* Transici贸n de 0.5 segundos para navegadores WebKit */
  transition: all 0.5s; /* Transici贸n de 0.5 segundos */
  -webkit-transform: rotatey(-80deg); /* Rotaci贸n en el eje Y para navegadores WebKit */
  -ms-transform: rotatey(-80deg); /* Rotaci贸n en el eje Y para navegadores Microsoft */
  transform: rotatey(-80deg); /* Rotaci贸n en el eje Y */
}
</style>

El mejor software administrativo para escalar tu empresa

Conoce m谩s
<!-- Estilos CSS -->
<style>
/* Definici贸n de la animaci贸n slideUp */
@keyframes slideUp {
  from {
    transform: translateY(100%); /* Empieza desde fuera del 谩rea visible hacia abajo */
    opacity: 0; /* Comienza siendo invisible */
  }
  to {
    transform: translateY(0); /* Llega a su posici贸n final */
    opacity: 1; /* Se vuelve completamente visible */
  }
}

/* Estilos para el contenedor de la tarjeta */
.card {
  position: relative; /* Posici贸n relativa para colocar elementos hijos en relaci贸n a este contenedor */
  width: 400px; /* Ancho del contenedor */
  height: 200px; /* Altura del contenedor */
  background: linear-gradient(0deg, #26A8FF 0%, #00164A 150%); /* Gradiente de color de fondo */
  display: flex; /* Modelo de caja flexible */
  flex-direction: column; /* Coloca los elementos en columna */
  justify-content: center; /* Centra verticalmente los elementos */
  padding: 12px; /* Espacio interno */
  gap: 12px; /* Espacio entre los elementos */
  border-radius: 8px; /* Bordes redondeados del contenedor */
  cursor: pointer; /* Cambia el cursor a pointer al pasar sobre la tarjeta */
  align-items: center; /* Centra horizontalmente los elementos */
  text-align: center; /* Centra el texto */
  animation: slideUp 1s ease-out; /* Aplica la animaci贸n slideUp con duraci贸n de 1 segundo */
}

/* Estilos para el pseudo-elemento before de la tarjeta */
.card::before {
  content: ''; /* Contenido vac铆o para aplicar estilos */
  position: absolute; /* Posici贸n absoluta para superponer sobre el contenedor principal */
  inset: 0; /* Ajuste de todos los bordes a cero */
  left: -5px; /* Desplazamiento a la izquierda */
  margin: auto; /* Centrado autom谩tico */
  width: 410px; /* Ancho del pseudo-elemento */
  height: 210px; /* Altura del pseudo-elemento */
  border-radius: 10px; /* Bordes redondeados */
  background: linear-gradient(-45deg, #26A8FF 0%, #00164A 100%); /* Gradiente de color de fondo */
  z-index: -10; /* Nivel de superposici贸n */
  pointer-events: none; /* No permite la interacci贸n con el pseudo-elemento */
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transici贸n con curva de bezier personalizada */
}

/* Estilos para el pseudo-elemento after de la tarjeta */
.card::after {
  content: ""; /* Contenido vac铆o para aplicar estilos */
  z-index: -1; /* Nivel de superposici贸n */
  position: absolute; /* Posici贸n absoluta */
  inset: 0; /* Ajuste de todos los bordes a cero */
  background: linear-gradient(-45deg, #00164A 0%, #00164A 100%); /* Gradiente de color de fondo */
  transform: translate3d(0, 0, 0) scale(0.95); /* Transformaci贸n 3D y escalado */
  filter: blur(20px); /* Desenfoque */
}

/* Estilos para el logo */
.logo {
  position: absolute; /* Posici贸n absoluta */
  top: 0px; /* Ajuste de posici贸n superior */
  max-width: 200px; /* Ancho m谩ximo del logo */
  max-height: 80px; /* Altura m谩xima del logo */
  margin: auto; /* Centrado autom谩tico */
}

/* Estilos para el encabezado */
.heading {
  font-size: 16px; /* Tama帽o de fuente */
  font-weight: 700; /* Grosor de fuente */
  color: #fff; /* Color del texto */
  line-height: 1; /* Altura de l铆nea */
  text-align: center; /* Alineaci贸n del texto al centro */
  margin-top: 70px; /* Margen superior */
  padding-right: 40px; /* Espaciado a la derecha */
  padding-left: 40px; /* Espaciado a la izquierda */
}

/* Efectos al pasar el rat贸n sobre la tarjeta */
.card:hover::after {
  filter: blur(30px); /* Aumenta el desenfoque */
}

.card:hover::before {
  transform: rotate(-90deg) scaleX(0.52) scaleY(1.95); /* Rotaci贸n y escalado */
}

/* Estilos para el bot贸n */
.button {
  display: inline-block; /* Visualizaci贸n en l铆nea como bloque */
  position: relative; /* Posici贸n relativa */
  padding: 15px 20px; /* Espaciado interno */
  margin-top: -10px; /* Margen superior negativo */
  border-radius: 7px; /* Bordes redondeados */
  font-size: 14px; /* Tama帽o de fuente */
  text-transform: uppercase; /* Texto en may煤sculas */
  font-weight: 600; /* Grosor de fuente */
  letter-spacing: 2px; /* Espaciado entre letras */
  background: #26A8FF; /* Color de fondo */
  color: #fff; /* Color del texto */
  overflow: hidden; /* Oculta el desbordamiento */
  text-decoration: none; /* Sin subrayado */
  box-shadow: 0 0 0 0 transparent; /* Sombra transparente */
  -webkit-transition: all 0.2s ease-in; /* Transici贸n para navegadores WebKit */
  -moz-transition: all 0.2s ease-in; /* Transici贸n para navegadores Mozilla */
  transition: all 0.2s ease-in; /* Transici贸n */
}

/* Efectos al pasar el rat贸n sobre el bot贸n */
.button:hover {
  background: #26A8FF; /* Cambiar color de fondo */
  box-shadow: 0 0 30px 5px rgba(38, 168, 255, 0.815); /* Ajuste de sombra */
  color: #ffffff; /* Cambiar color del texto */
  -webkit-transition: all 0.2s ease-out; /* Transici贸n para navegadores WebKit */
  -moz-transition: all 0.2s ease-out; /* Transici贸n para navegadores Mozilla */
  transition: all 0.2s ease-out; /* Transici贸n */
}

.button:hover::before {
  -webkit-animation: sh02 0.5s 0s linear; /* Animaci贸n para navegadores WebKit */
  -moz-animation: sh02 0.5s 0s linear; /* Animaci贸n para navegadores Mozilla */
  animation: sh02 0.5s 0s linear; /* Animaci贸n */
}

/* Pseudo-elemento before del bot贸n */
.button::before {
  content: ''; /* Contenido vac铆o */
  display: block; /* Mostrar como bloque */
  width: 0px; /* Ancho inicial */
  height: 86%; /* Altura */
  position: absolute; /* Posici贸n absoluta */
  top: 7%; /* Ajuste de posici贸n superior */
  left: 0%; /* Ajuste de posici贸n izquierda */
  opacity: 0; /* Inicialmente invisible */
  background: #fff; /* Color de fondo */
  box-shadow: 0 0 30px 30px #fff; /* Sombra */
  -webkit-transform: skewX(-20deg); /* Transformaci贸n en eje X para navegadores WebKit */
  -moz-transform: skewX(-20deg); /* Transformaci贸n en eje X para navegadores Mozilla */
  -ms-transform: skewX(-20deg); /* Transformaci贸n en eje X para navegadores Microsoft */
  -o-transform: skewX(-20deg); /* Transformaci贸n en eje X para navegadores Opera */
  transform: skewX(-20deg); /* Transformaci贸n en eje X */
}

/* Definici贸n de la animaci贸n sh02 */
@keyframes sh02 {
  from {
    opacity: 0; /* Comienza siendo invisible */
    left: 0%; /* Posici贸n inicial */
  }
  50% {
    opacity: 1; /* Se vuelve visible a la mitad */
  }
  to {
    opacity: 0; /* Vuelve a ser invisible */
    left: 100%; /* Posici贸n final */
  }
}

/* Estilos al hacer clic en el bot贸n */
.button:active {
  background: #26A8FF; /* Mantener el color de fondo */
  color: #ffffff; /* Mantener el color del texto */
  box-shadow: 0 0 30px 5px rgba(38, 168, 255, 0.815); /* Mantener la sombra */
  -webkit-transition: box-shadow 0.2s ease-in; /* Transici贸n para navegadores WebKit */
  -moz-transition: box-shadow 0.2s ease-in; /* Transici贸n para navegadores Mozilla */
  transition: box-shadow 0.2s ease-in; /* Transici贸n */
}
</style>

<!-- Contenedor principal de la tarjeta -->
<div class="card">
  <!-- Logo de la tarjeta -->
  <img src="https://www.issaservice.com.mx/wp-content/uploads/2024/05/Siigo-Aspel.png" alt="Logo" class="logo">
  <!-- Encabezado de la tarjeta -->
  <p class="heading">El mejor software administrativo para escalar tu empresa</p>
  <!-- Bot贸n de la tarjeta -->
  <a href="https://www.issaservice.com.mx/aspel/" class="button">Conoce m谩s</a>
</div>