/* Start custom CSS for shortcode, class: .elementor-element-3e5f57b8 */#main article {
  background-color: black; /* Fondo negro */
  color: white; /* Texto blanco */
  padding: 20px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
  font-family: 'Arial', sans-serif; /* Fuente */
  font-size: 16px; /* Tamaño de fuente */
  line-height: 1.5; /* Espaciado entre líneas */
  margin: 20px 0; /* Margen para separar de otros elementos */
}

.ast-article-single h3 {
  color: white;
  font-weight: bold; /* Texto en negrita */
}

.ast-article-single .ast-no-thumbnail h1 {
  color: white;
  font-weight: bold; /* Texto en negrita */
}
#main .ast-article-single .entry-content {
  /* Fondo degradado con dos colores */
  background: linear-gradient(135deg, #ff7e5f, #feb47b);

  /* Espaciado y bordes */
  padding: 20px;
  border-radius: 15px;

  /* Sombra para efecto 3D */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);

  /* Tipografía */
  font-family: 'Roboto', sans-serif; /* Fuente moderna */
  font-size: 18px; /* Tamaño de texto más grande */
  color: #333; /* Color de texto oscuro para contraste */

  /* Decoración */
  border: 2px solid #ff7e5f; /* Borde del mismo color que el degradado */
  position: relative; /* Posicionamiento relativo para las animaciones */

  /* Transición suave para efectos visuales */
  transition: all 0.3s ease;
}

#main .ast-article-single .entry-content:hover {
  /* Efecto de hover: sombra más fuerte */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  transform: scale(1.05); /* Efecto de escalado para destacar */
}

#main .ast-article-single .entry-content::before {
  /* Decoración adicional */
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  background: #ff7e5f;
  border-radius: 50%;
  opacity: 0.7; /* Transparencia */
  transition: all 0.3s ease; /* Animación */
}

#main .ast-article-single .entry-content:hover::before {
  /* Efecto en hover para el decorador */
  opacity: 1; /* Hacer el decorador completamente visible */
}/* End custom CSS */