/* Start custom CSS for html, class: .elementor-element-8c523bb */.contenedor-sobre {
  position: relative;
  width: 300px;
  height: 200px;
  cursor: pointer;
}

.sobre {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Solapa delantera con efecto de pliegue */
.sobre-delante {
  background-color: #d1b889; /* Color base del sobre */
  clip-path: polygon(0 0, 100% 0, 50% 50%); /* Dibuja el triángulo superior */
  transform-origin: top;
  transition: transform 0.8s ease;
  z-index: 3;
}

/* Efecto al abrir la solapa */
.abierto .sobre-delante {
  transform: rotateX(180deg);
}

/* Papel interior deslizándose */
.carta {
  background: white;
  width: 90%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 5%;
  transition: transform 0.8s ease 0.4s; /* Comienza un poco después de abrirse */
  z-index: 1;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.abierto .carta {
  transform: translateY(-100%); /* Desliza la carta hacia arriba */
}/* End custom CSS */