:root {
  --color1: #ddc5bc;
  --color2: #e0d2c7;
  --color3: #c08b89;
  --color4: #c8a49f;
  --color5: #b38f75;
  --color6: #0000;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  font-family: "Dosis", Georgia, sans-serif;
}

.caja h1 {
  font-size: 300%;
}

.caja h3 {
  font-size: 150%;
}

.menu {
  display: flex;
  align-items: center;
  width: 980px;
  margin: 15px auto;
  background-color: var(--color3);
  padding: 20px;
  border: 2px solid #000;
  border-radius: 10px;
  font-size: 15px;
  font-family: "Madimi One", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.imagen {
  width: 200px;
  height: 100px;
  margin-left: 20px;
}

.imagen:hover {
  width: 205px;
  height: 105px;
  cursor: pointer;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  width: 90%;
}

.menu ul li {
  position: relative;
  margin-right: 0px;
}

.menu ul li a {
  text-decoration: none;
  background-color: var(--color3);
  color: #000000;
  border: 2px solid #000;
  padding: 10px 20px;
  border-radius: 10px;
}

.menu ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color3);
  padding: 10px;
  border-radius: 0px;
}

.menu ul li:hover ul {
  display: block;
}

.menu ul li ul li {
  margin: 10px;
  text-align: center;
}

.menu ul li ul li a {
  display: block;
  border: none;
  text-align: center;
  padding: 10px;
  background-color: transparent;
  color: #fff;
}

.menu ul li a:hover {
  background-color: var(--color4);
  display: block;
}

.container-wrapper-genially {
  position: relative;
  min-height: 500px;
  max-width: 60%;
  margin: 0 auto;
}

.contenedor {
  width: 87%;
  margin: 40px auto;
  background-color: #f7f7f7;
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cabecera {
  background-color: #ea585b;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.seccion1 {
  background-color: rgb(235, 228, 228);
  padding: 25px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 87%;
  font-size: 30px;
  border-radius: 15px;
}



.seccion2 {
  background-color: #fff;
  padding: 25px;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px dashed #ea585b;
  width: 77%;
}

.seccion3 {
  padding: 25px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 70%;
  font-size: 30px;
  border-radius: 15px;
}

.seccion h2 {
  margin-top: 0;
}

.loader-genially {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  margin-bottom: 10%;
}

.genially-embed {
  margin: 0px auto;
  position: relative;
  height: auto;
  width: 100%;
}

.front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.listado {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.listado > a {
  position: relative;
  display: inline-block; /* Cambiado a block para un mejor control del tamaño */
  margin: 60px;
  width: 280px;
  height: 120px; /* Tamaño unificado para toda la caja */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.listado > a:hover .front {
  transform: translateY(-30px);
}

.listado > a.enf:hover .front {
  transform: translateY(-45px, -45px);
}

.front {
  position: absolute;
  z-index: 10;
  width: 300px; /* Ocupa el 100% del ancho del contenedor */
  height: 188px; /* Ocupa el 100% de la altura del contenedor */
  border-radius: 30px;
  background: #ebd7ce;
  transition: all 0.3s ease-out;
  
}

.front i.fa {
  display: block;
  margin: 80px 0 30px 0;
}

.front span {
  color: #ccc;
}

.behind {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  width: 305px; /* Ocupa el 100% del ancho del contenedor */
  height: 200px; /* Ocupa el 100% de la altura del contenedor */
  padding-top: 157px;
  border-radius: 30px;
  color: #fff;
  background: #984546;
  text-align: center;
  font-size: 20px;
  box-sizing: border-box;
}

.behind a {
  color: #fff;
  padding-top: 157px;
}

.enf .behind {
  background: #984546;
  color: #fff;
  padding-top: 157px;
}

.enf .front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.enf .front h4 {
  margin-top: 0px; /* Ajusta el espacio arriba del título */
  margin-bottom: 1px;
  font-size: 20px;/* Ajusta el espacio debajo del título */
}

.enf .front p {
  padding: 0 10px; /* Agrega espacio a los lados para el texto */
  font-size: 15px; /* Tamaño de fuente para el texto */
}