.elementor-242 .elementor-element.elementor-element-0b38094{padding:0px 0px 0px 0px;}.elementor-242 .elementor-element.elementor-element-d4a2443 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-b5a8489 *//* Contenedor de la derecha que agrupa tarjeta y formas */
.gpd-right-column {
  position: relative; /* Crucial para que las formas no se salgan de esta columna */
  width: 100%;
  display: flex;
  justify-content: center;
}

/* === CONTENEDOR DE FORMAS (Capa Inferior) === */
.gpd-formas-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Se va al fondo */
  pointer-events: none; /* Los clics lo traspasan */
}

/* === TU TARJETA (Capa Superior) === */
.gpd-sidebar-card {
  position: relative;
  z-index: 2; /* Se coloca por encima de las formas */
  background-color: #ffffff; /* IMPORTANTE: Esto asegura que la tarjeta tape las formas */
  /* Mantén aquí tus estilos actuales de padding, border-radius, border, etc. */
}

/* 1. Aro Morado que asoma por la derecha/arriba */
.gpd-forma-aro {
  position: absolute;
  top: -15%;
  right: -25%; /* Lo empujamos hacia afuera para que asome por el borde */
  width: 250px;
  height: 250px;
  border: 50px solid rgba(138, 43, 226, 0.1); /* Morado muy tenue */
  border-radius: 50%;
  border-bottom-color: transparent;
  transform: rotate(20deg);
  animation: gpd-float-aro 10s ease-in-out infinite alternate;
}

/* 2. Píldora Magenta que asoma por la izquierda/abajo */
.gpd-forma-pildora {
  position: absolute;
  bottom: -10%;
  left: -15%; /* Asoma por el borde izquierdo */
  width: 120px;
  height: 50px;
  background-color: rgba(255, 0, 255, 0.08); /* Magenta muy tenue */
  border-radius: 100px;
  transform: rotate(-30deg);
  animation: gpd-float-pildora 8s ease-in-out infinite alternate;
}

/* === ANIMACIONES SUAVES === */
@keyframes gpd-float-aro {
  0% { transform: translateY(0) rotate(20deg); }
  100% { transform: translateY(-15px) rotate(25deg); }
}

@keyframes gpd-float-pildora {
  0% { transform: translateY(0) translateX(0) rotate(-30deg); }
  100% { transform: translateY(10px) translateX(-10px) rotate(-25deg); }
}/* End custom CSS */