/* ================================
   ARQUITECTURA DE PLUGINS – HERO
   ================================ */

.plugins-hero-section {
  width: 100%;
  background-color: #ffffff;
  padding: 5rem 1.5rem 4rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  border-radius: 28px;
  padding: 3rem clamp(2rem, 4vw, 3.5rem);
  box-sizing: border-box;
  overflow: hidden;

  background: radial-gradient(circle at top left, #eef4ff 0%, #ffffff 45%, #f4f7ff 100%);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(130, 150, 255, 0.16);
}

/* Líneas diagonales de fondo para efecto tech */
.plugins-hero-inner::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: linear-gradient(
    135deg,
    rgba(180, 196, 255, 0.18) 1px,
    transparent 1px
  );
  background-size: 38px 38px;
  opacity: 0.45;
  pointer-events: none;
}

.plugins-hero-inner::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -60px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 88, 255, 0.35), transparent 60%);
  filter: blur(8px);
  opacity: 0.7;
  pointer-events: none;
}

.plugins-hero-text,
.plugins-hero-visual {
  position: relative;
  z-index: 1;
}

.plugins-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

/* Texto */

.plugins-hero-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4f5b8f;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-hero-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: #13152a;
  font-weight: 700;
}

.plugins-hero-title span {
  background: linear-gradient(120deg, #3c5bff, #9b5bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.plugins-hero-subtitle {
  font-size: 1rem;
  margin: 0 0 0.8rem;
  color: #44506f;
  max-width: 26rem;
}

.plugins-hero-body {
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0 0 1.8rem;
  color: #3a4258;
  max-width: 32rem;
}

/* Tags / Chips */

.plugins-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.plugins-hero-tag {
  font-size: 0.78rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(110, 130, 255, 0.35);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  color: #394265;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Visual – Mapa de nodos de plugins alrededor de KSC */

.plugins-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.plugins-hero-orbit {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px dashed rgba(90, 120, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 1px rgba(180, 195, 255, 0.25);
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95), rgba(230, 238, 255, 0.7));
}

/* Nodo central – KSC */

.plugins-hero-core {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 26px;
  background: radial-gradient(circle, #2a3cff 0%, #151a4f 80%);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  box-shadow:
    0 18px 35px rgba(29, 46, 158, 0.65),
    0 0 0 1px rgba(200, 210, 255, 0.6);
  text-align: center;
}

.plugins-hero-core span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

/* Anillos decorativos internos */

.plugins-hero-orbit::before,
.plugins-hero-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(120, 140, 255, 0.25);
  inset: 12%;
}

.plugins-hero-orbit::after {
  inset: 25%;
  border-style: dashed;
  opacity: 0.55;
}

/* Nodos satélite (plugins) */

.plugins-hero-node {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(160, 176, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #242842;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  backdrop-filter: blur(4px);
}

.plugins-hero-node span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #656f97;
}

/* Posiciones de los nodos */

.plugins-hero-node-core {
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0);
}

.plugins-hero-node-security {
  right: -4%;
  top: 50%;
  transform: translate(0, -50%);
}

.plugins-hero-node-business {
  left: -4%;
  bottom: 18%;
}

.plugins-hero-node-ai {
  bottom: -2%;
  right: 16%;
}

/* Colores específicos */

.plugins-hero-node-core {
  background: linear-gradient(145deg, #ffffff, #eef3ff);
}

.plugins-hero-node-security {
  background: linear-gradient(145deg, #ffffff, #e9f7ff);
}

.plugins-hero-node-business {
  background: linear-gradient(145deg, #ffffff, #f7f1ff);
}

.plugins-hero-node-ai {
  background: linear-gradient(145deg, #ffffff, #f0fff6);
}

/* Hover global sobre el visual */

.plugins-hero-orbit:hover .plugins-hero-node {
  transform: translateY(-4px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(120, 140, 255, 0.7);
}

/* Animación ligera de pulso para el núcleo */

@keyframes pluginsHeroPulse {
  0% {
    box-shadow:
      0 18px 35px rgba(29, 46, 158, 0.65),
      0 0 0 0 rgba(57, 102, 255, 0.5);
  }
  70% {
    box-shadow:
      0 18px 35px rgba(29, 46, 158, 0.4),
      0 0 0 16px rgba(57, 102, 255, 0);
  }
  100% {
    box-shadow:
      0 18px 35px rgba(29, 46, 158, 0.65),
      0 0 0 0 rgba(57, 102, 255, 0);
  }
}

.plugins-hero-core {
  animation: pluginsHeroPulse 3.2s infinite;
}

/* Responsive */

@media (max-width: 900px) {
  .plugins-hero-inner {
    grid-template-columns: 1fr;
    padding: 2.4rem 1.8rem 2.6rem;
  }

  .plugins-hero-visual {
    order: -1;
  }

  .plugins-hero-section {
    padding: 3.5rem 1.2rem 3rem;
  }

  .plugins-hero-inner::after {
    right: -80px;
    top: -100px;
  }
}

@media (max-width: 600px) {
  .plugins-hero-inner {
    border-radius: 22px;
  }

  .plugins-hero-orbit {
    width: 240px;
  }

  .plugins-hero-node {
    width: 78px;
    height: 78px;
    font-size: 0.8rem;
  }

  .plugins-hero-core {
    width: 105px;
    height: 105px;
    font-size: 1rem;
  }

  .plugins-hero-body {
    max-width: 100%;
  }
}
/* ============================================
   ARQUITECTURA DE PLUGINS – VISIÓN GENERAL
   ============================================ */

.plugins-vision-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.5rem 1.5rem 4rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-vision-inner {
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

/* Columna izquierda – texto */

.plugins-vision-text {
  position: relative;
}

.plugins-vision-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #55608a;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-vision-title {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  color: #14182e;
  font-weight: 700;
}

.plugins-vision-body {
  font-size: 0.96rem;
  line-height: 1.7;
  margin: 0 0 1rem;
  color: #3a435c;
  max-width: 34rem;
}

/* Pequeño acento lateral */

.plugins-vision-text::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 0.25rem;
  width: 3px;
  height: 62px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3c5bff, #a45bff);
  opacity: 0.85;
}

/* Flujo conceptual */

.plugins-vision-flow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.2rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(238, 243, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(138, 156, 255, 0.35);
  font-size: 0.8rem;
  color: #273050;
}

.plugins-vision-flow span {
  white-space: nowrap;
}

.plugins-vision-flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3c5bff, #9b5bff);
  box-shadow: 0 0 0 6px rgba(123, 145, 255, 0.25);
}

.plugins-vision-flow-arrow {
  opacity: 0.7;
}

/* Columna derecha – tarjetas */

.plugins-vision-cards {
  position: relative;
  padding-left: 1.5rem;
}

/* Línea vertical “timeline” */

.plugins-vision-line {
  position: absolute;
  left: 0.35rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(60, 91, 255, 0.18),
    rgba(164, 91, 255, 0.4),
    rgba(60, 202, 155, 0.35)
  );
  opacity: 0.9;
}

/* Tarjetas */

.plugins-vision-card {
  position: relative;
  margin-bottom: 1.4rem;
  padding: 1rem 1.2rem 1.1rem 1.4rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 14px 30px rgba(13, 23, 61, 0.14),
    0 0 0 1px rgba(165, 179, 255, 0.55);
  overflow: hidden;
  transform-origin: left center;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* Acento circular en cada tarjeta */

.plugins-vision-card::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px rgba(109, 136, 255, 0.5);
}

/* Brillos internos */

.plugins-vision-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 91, 255, 0.2), transparent 65%);
  opacity: 0.7;
}

/* Títulos y texto de las tarjetas */

.plugins-vision-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  color: #151a33;
  font-weight: 600;
}

.plugins-vision-card p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #47516a;
}

/* Variaciones de estilo por tarjeta */

.plugins-vision-card-1 {
  background: linear-gradient(135deg, #ffffff, #f2f5ff);
  animation: pluginsVisionFloat1 9s ease-in-out infinite;
}

.plugins-vision-card-2 {
  margin-left: 0.6rem;
  background: linear-gradient(135deg, #ffffff, #f4fbff);
  animation: pluginsVisionFloat2 10s ease-in-out infinite;
}

.plugins-vision-card-3 {
  margin-left: 1.1rem;
  background: linear-gradient(135deg, #ffffff, #f8f5ff);
  animation: pluginsVisionFloat3 11s ease-in-out infinite;
}

/* Hover */

.plugins-vision-card:hover {
  transform: translateX(4px);
  box-shadow:
    0 18px 38px rgba(10, 18, 54, 0.2),
    0 0 0 1px rgba(108, 136, 255, 0.75);
}

/* Animaciones suaves de flotación */

@keyframes pluginsVisionFloat1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes pluginsVisionFloat2 {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(2px);
  }
}

@keyframes pluginsVisionFloat3 {
  0% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(-1px);
  }
}

/* Responsive */

@media (max-width: 900px) {
  .plugins-vision-inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .plugins-vision-section {
    padding: 3rem 1.25rem 3.5rem;
  }

  .plugins-vision-text::before {
    left: -0.75rem;
  }

  .plugins-vision-cards {
    padding-left: 1.2rem;
  }
}

@media (max-width: 600px) {
  .plugins-vision-flow {
    border-radius: 16px;
    padding: 0.7rem 0.85rem;
  }

  .plugins-vision-line {
    left: 0.25rem;
  }

  .plugins-vision-card {
    margin-left: 0 !important;
  }
}
/* ============================================
   ARQUITECTURA DE PLUGINS – TIPOS DE PLUGINS
   ============================================ */

.plugins-types-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.5rem 1.5rem 4.2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-types-inner {
  width: 100%;
  max-width: 1120px;
  box-sizing: border-box;
}

/* Cabecera */

.plugins-types-header {
  text-align: left;
  max-width: 640px;
  margin-bottom: 2.4rem;
  position: relative;
}

.plugins-types-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #56628b;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.plugins-types-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  color: #15192f;
  font-weight: 700;
}

.plugins-types-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3b4560;
}

/* Barra de acento animada */

.plugins-types-accent-bar {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 1.1rem;
}

.plugins-types-accent-bar span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3c5bff, #9b5bff);
  opacity: 0.6;
}

.plugins-types-accent-bar span:nth-child(1) {
  width: 46px;
  animation: pluginsTypesBar1 3.4s ease-in-out infinite;
}

.plugins-types-accent-bar span:nth-child(2) {
  width: 32px;
  animation: pluginsTypesBar2 3.4s ease-in-out infinite;
}

.plugins-types-accent-bar span:nth-child(3) {
  width: 20px;
  animation: pluginsTypesBar3 3.4s ease-in-out infinite;
}

/* Grid de tarjetas */

.plugins-types-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

/* Tarjetas base */

.plugins-type-card {
  position: relative;
  padding: 1.4rem 1.3rem 1.5rem;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0 14px 34px rgba(10, 18, 54, 0.12),
    0 0 0 1px rgba(166, 182, 255, 0.55);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* Halo y borde inferior animado */

.plugins-type-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(60, 91, 255, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.plugins-type-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #3c5bff, #9b5bff, #3cca9b);
  opacity: 0.75;
}

/* Badge */

.plugins-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: rgba(238, 243, 255, 0.96);
  color: #293357;
  margin-bottom: 0.7rem;
  position: relative;
  z-index: 1;
}

/* Títulos y texto */

.plugins-type-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: #171c34;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.plugins-type-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #48516d;
  position: relative;
  z-index: 1;
}

/* Variaciones cromáticas por tipo */

.plugins-type-core {
  background: linear-gradient(145deg, #ffffff, #f1f4ff);
}

.plugins-type-security {
  background: linear-gradient(145deg, #ffffff, #f1fbff);
}

.plugins-type-business {
  background: linear-gradient(145deg, #ffffff, #f8f6ff);
}

.plugins-type-ai {
  background: linear-gradient(145deg, #ffffff, #f4fff9);
}

/* Sombras y transformaciones al hover */

.plugins-type-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 42px rgba(9, 16, 48, 0.2),
    0 0 0 1px rgba(116, 141, 255, 0.85);
}

.plugins-type-card:hover::before {
  opacity: 1;
}

/* Animaciones sutiles para cada tarjeta */

@keyframes pluginsTypesPulseCore {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes pluginsTypesPulseSecurity {
  0% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(1px);
  }
}

@keyframes pluginsTypesPulseBusiness {
  0% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(-1px);
  }
}

@keyframes pluginsTypesPulseAI {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(2px);
  }
}

.plugins-type-core {
  animation: pluginsTypesPulseCore 11s ease-in-out infinite;
}

.plugins-type-security {
  animation: pluginsTypesPulseSecurity 12s ease-in-out infinite;
}

.plugins-type-business {
  animation: pluginsTypesPulseBusiness 13s ease-in-out infinite;
}

.plugins-type-ai {
  animation: pluginsTypesPulseAI 14s ease-in-out infinite;
}

/* Animaciones de la barra de acento */

@keyframes pluginsTypesBar1 {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.6;
  }
  50% {
    transform: scaleX(1.2);
    opacity: 1;
  }
}

@keyframes pluginsTypesBar2 {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.55;
  }
  50% {
    transform: scaleX(1.1);
    opacity: 0.9;
  }
}

@keyframes pluginsTypesBar3 {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1.05);
    opacity: 0.85;
  }
}

/* Responsive */

@media (max-width: 900px) {
  .plugins-types-section {
    padding: 3.2rem 1.25rem 3.8rem;
  }

  .plugins-types-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .plugins-types-inner {
    max-width: 100%;
  }

  .plugins-type-card {
    padding: 1.2rem 1.1rem 1.3rem;
  }
}
/* =======================================================
   ARQUITECTURA DE PLUGINS – FLUJO CON KIMIARY SMART CHAIN
   ======================================================= */

.plugins-flow-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.5rem 1.5rem 4.3rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-flow-inner {
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
}

/* Cabecera */

.plugins-flow-header {
  max-width: 640px;
  margin-bottom: 2.5rem;
  position: relative;
}

.plugins-flow-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #57618c;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-flow-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  color: #14182e;
  font-weight: 700;
}

.plugins-flow-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3a435e;
}

/* Pequeño halo animado en la cabecera */

.plugins-flow-header::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 91, 255, 0.28), transparent 65%);
  opacity: 0.7;
  filter: blur(4px);
  animation: pluginsFlowGlow 6.5s ease-in-out infinite alternate;
}

/* Timeline vertical */

.plugins-flow-timeline {
  position: relative;
  margin: 0;
  padding: 0.5rem 0 0;
}

/* Línea animada */

.plugins-flow-line {
  position: absolute;
  left: 1.2rem;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(60, 91, 255, 0.2),
    rgba(164, 91, 255, 0.55),
    rgba(60, 202, 155, 0.45)
  );
  overflow: hidden;
}

.plugins-flow-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0)
  );
  animation: pluginsFlowLineScan 4s linear infinite;
}

/* Pasos */

.plugins-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.8rem;
  padding-left: 0.4rem;
  margin-bottom: 1.6rem;
}

.plugins-flow-node {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(144, 160, 255, 0.85);
  box-shadow:
    0 0 0 4px rgba(210, 218, 255, 0.8),
    0 8px 20px rgba(7, 13, 44, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.plugins-flow-step-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: #202647;
}

/* Cajas de contenido */

.plugins-flow-content {
  background: #ffffff;
  border-radius: 18px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow:
    0 14px 36px rgba(9, 16, 48, 0.16),
    0 0 0 1px rgba(166, 181, 255, 0.7);
  position: relative;
  overflow: hidden;
}

/* Degradado sutil dentro de cada caja */

.plugins-flow-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(240, 244, 255, 0.9),
    rgba(255, 255, 255, 0.95)
  );
  opacity: 0.95;
  pointer-events: none;
}

.plugins-flow-content h3,
.plugins-flow-content p {
  position: relative;
  z-index: 1;
}

.plugins-flow-content h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  color: #171c33;
  font-weight: 600;
}

.plugins-flow-content p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #454f6c;
}

/* Variaciones y animaciones de cada paso */

.step-1 .plugins-flow-content {
  animation: pluginsFlowStep1 9s ease-in-out infinite;
}

.step-2 .plugins-flow-content {
  animation: pluginsFlowStep2 10s ease-in-out infinite;
}

.step-3 .plugins-flow-content {
  animation: pluginsFlowStep3 11s ease-in-out infinite;
}

.step-4 .plugins-flow-content {
  animation: pluginsFlowStep4 12s ease-in-out infinite;
}

/* Hover sutil en el bloque completo del paso */

.plugins-flow-step:hover .plugins-flow-content {
  box-shadow:
    0 20px 44px rgba(7, 13, 44, 0.25),
    0 0 0 1px rgba(120, 142, 255, 0.9);
}

/* Footer */

.plugins-flow-footer {
  margin-top: 2rem;
}

.plugins-flow-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(235, 241, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(162, 179, 255, 0.7);
  max-width: 760px;
}

.plugins-flow-pill p {
  margin: 0;
  font-size: 0.86rem;
  color: #303a5b;
}

.pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #3c5bff, #9b5bff);
  box-shadow: 0 0 0 7px rgba(129, 149, 255, 0.4);
  animation: pluginsFlowDotPulse 2.8s ease-in-out infinite;
}

/* Animaciones */

@keyframes pluginsFlowGlow {
  0% {
    opacity: 0.4;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(6px);
  }
}

@keyframes pluginsFlowLineScan {
  0% {
    top: -40%;
  }
  100% {
    top: 110%;
  }
}

@keyframes pluginsFlowStep1 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes pluginsFlowStep2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes pluginsFlowStep3 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes pluginsFlowStep4 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes pluginsFlowDotPulse {
  0% {
    box-shadow: 0 0 0 4px rgba(129, 149, 255, 0.4);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(129, 149, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(129, 149, 255, 0.4);
  }
}

/* Responsive */

@media (max-width: 900px) {
  .plugins-flow-section {
    padding: 3.2rem 1.25rem 3.8rem;
  }

  .plugins-flow-line {
    left: 1rem;
  }

  .plugins-flow-step {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .plugins-flow-inner {
    max-width: 100%;
  }

  .plugins-flow-step {
    margin-bottom: 1.4rem;
  }

  .plugins-flow-pill {
    border-radius: 16px;
    align-items: flex-start;
  }
}
/* ==================================================
   ARQUITECTURA DE PLUGINS – CICLO DE VIDA OPERACIÓN
   ================================================== */

.plugins-lifecycle-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.7rem 1.5rem 4.3rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-lifecycle-inner {
  width: 100%;
  max-width: 1120px;
  box-sizing: border-box;
}

/* Cabecera */

.plugins-lifecycle-header {
  max-width: 680px;
  margin-bottom: 2.6rem;
  position: relative;
}

.plugins-lifecycle-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #57628d;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-lifecycle-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  color: #14182f;
  font-weight: 700;
}

.plugins-lifecycle-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3b4560;
}

/* Efecto de fondo en la cabecera */

.plugins-lifecycle-header::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 8px;
  width: 4px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3c5bff, #9b5bff, #3cca9b);
  opacity: 0.9;
}

.plugins-lifecycle-header::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 91, 255, 0.25), transparent 60%);
  filter: blur(4px);
  opacity: 0.7;
  animation: pluginsLifecycleGlow 7s ease-in-out infinite alternate;
}

/* Contenedor del flujo */

.plugins-lifecycle-flow {
  position: relative;
  margin-bottom: 2.4rem;
  padding-top: 0.8rem;
}

/* Línea curva / pista */

.plugins-lifecycle-track {
  position: absolute;
  top: 1.5rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(60, 91, 255, 0.3),
    rgba(164, 91, 255, 0.5),
    rgba(60, 202, 155, 0.5)
  );
  opacity: 0.85;
  overflow: hidden;
}

.plugins-lifecycle-track::before {
  content: "";
  position: absolute;
  left: -30%;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0)
  );
  animation: pluginsLifecycleScan 4.5s linear infinite;
}

/* Pasos */

.plugins-lifecycle-step {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

/* Icono / nodo del paso */

.plugins-lifecycle-icon {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 12px 28px rgba(9, 16, 48, 0.25),
    0 0 0 1px rgba(153, 171, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.plugins-lifecycle-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3c5bff, #9b5bff);
  opacity: 0.12;
}

.plugins-lifecycle-icon span {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2444;
}

/* Caja de contenido */

.plugins-lifecycle-content {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow:
    0 16px 36px rgba(10, 18, 54, 0.18),
    0 0 0 1px rgba(167, 182, 255, 0.75);
  overflow: hidden;
}

.plugins-lifecycle-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(238, 243, 255, 0.95), #ffffff);
  opacity: 0.96;
  pointer-events: none;
}

.plugins-lifecycle-content h3,
.plugins-lifecycle-content p,
.plugins-lifecycle-content code {
  position: relative;
  z-index: 1;
}

.plugins-lifecycle-content h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  color: #171c34;
  font-weight: 600;
}

.plugins-lifecycle-content p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #45506b;
}

.plugins-lifecycle-content code {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  background: rgba(20, 26, 78, 0.05);
  color: #222847;
}

/* Animación por paso (flotación ligera, desfasada) */

.plugins-lifecycle-step:nth-child(1) .plugins-lifecycle-content {
  animation: pluginsLifecycleStepFloat1 10s ease-in-out infinite;
}

.plugins-lifecycle-step:nth-child(2) .plugins-lifecycle-content {
  animation: pluginsLifecycleStepFloat2 11s ease-in-out infinite;
}

.plugins-lifecycle-step:nth-child(3) .plugins-lifecycle-content {
  animation: pluginsLifecycleStepFloat3 12s ease-in-out infinite;
}

.plugins-lifecycle-step:nth-child(4) .plugins-lifecycle-content {
  animation: pluginsLifecycleStepFloat4 13s ease-in-out infinite;
}

.plugins-lifecycle-step:nth-child(5) .plugins-lifecycle-content {
  animation: pluginsLifecycleStepFloat5 14s ease-in-out infinite;
}

.plugins-lifecycle-step:nth-child(6) .plugins-lifecycle-content {
  animation: pluginsLifecycleStepFloat6 15s ease-in-out infinite;
}

/* Hover */

.plugins-lifecycle-step:hover .plugins-lifecycle-content {
  box-shadow:
    0 22px 44px rgba(9, 16, 48, 0.25),
    0 0 0 1px rgba(118, 141, 255, 0.95);
}

/* Resumen final */

.plugins-lifecycle-summary {
  display: flex;
  justify-content: flex-start;
}

.plugins-lifecycle-summary-card {
  max-width: 760px;
  padding: 1rem 1.2rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #f0f3ff, #ffffff);
  box-shadow:
    0 14px 32px rgba(9, 16, 48, 0.18),
    0 0 0 1px rgba(160, 176, 255, 0.75);
}

.plugins-lifecycle-summary-card h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: #171c35;
  font-weight: 600;
}

.plugins-lifecycle-summary-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #38415d;
}

/* Animaciones */

@keyframes pluginsLifecycleGlow {
  0% {
    opacity: 0.5;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(8px);
  }
}

@keyframes pluginsLifecycleScan {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

@keyframes pluginsLifecycleStepFloat1 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes pluginsLifecycleStepFloat2 {
  0%,
  100% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pluginsLifecycleStepFloat3 {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes pluginsLifecycleStepFloat4 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pluginsLifecycleStepFloat5 {
  0%,
  100% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes pluginsLifecycleStepFloat6 {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Responsive */

@media (max-width: 900px) {
  .plugins-lifecycle-section {
    padding: 3.3rem 1.25rem 3.9rem;
  }

  .plugins-lifecycle-track {
    left: 0.6rem;
    right: 0.6rem;
  }

  .plugins-lifecycle-step {
    grid-template-columns: 3.2rem minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .plugins-lifecycle-inner {
    max-width: 100%;
  }

  .plugins-lifecycle-step {
    margin-bottom: 1.35rem;
  }

  .plugins-lifecycle-summary-card {
    border-radius: 16px;
  }
}
/* ====================================================
   ARQUITECTURA DE PLUGINS – CAPAS DE SEGURIDAD
   ==================================================== */

.plugins-security-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.6rem 1.5rem 4.2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-security-inner {
  width: 100%;
  max-width: 1150px;
  box-sizing: border-box;
}

/* Cabecera */

.plugins-security-header {
  max-width: 700px;
  margin-bottom: 2.5rem;
}

.plugins-security-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #56618b;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-security-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  color: #14182f;
  font-weight: 700;
}

.plugins-security-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3a445f;
}

/* Layout principal */

.plugins-security-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.8rem;
  align-items: center;
}

/* Lista de capas de seguridad */

.plugins-security-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.plugins-security-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
}

.security-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #3c5bff, #9b5bff);
  box-shadow:
    0 0 0 5px rgba(130, 150, 255, 0.4),
    0 0 14px rgba(60, 91, 255, 0.8);
  flex-shrink: 0;
  animation: securityBulletPulse 2.6s ease-in-out infinite;
}

.security-text h3 {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  color: #171c34;
  font-weight: 600;
}

.security-text p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #454f6d;
}

.security-text code {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  padding: 0.08rem 0.3rem;
  border-radius: 6px;
  background: rgba(22, 30, 82, 0.05);
  color: #222843;
}

/* Panel visual de seguridad (lado derecho) */

.plugins-security-panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 30px;
  background: radial-gradient(circle at top, #eef2ff, #ffffff);
  box-shadow:
    0 20px 46px rgba(8, 14, 44, 0.28),
    0 0 0 1px rgba(160, 178, 255, 0.65);
  overflow: hidden;
}

/* Líneas diagonales de fondo */

.plugins-security-panel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: linear-gradient(
    135deg,
    rgba(180, 196, 255, 0.22) 1px,
    transparent 1px
  );
  background-size: 34px 34px;
  opacity: 0.55;
}

/* Anillos concéntricos */

.security-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(80, 110, 255, 0.3);
  box-shadow: 0 0 16px rgba(70, 96, 255, 0.25);
}

.security-ring-outer {
  inset: 15%;
  animation: securityRingOuter 14s linear infinite;
}

.security-ring-middle {
  inset: 27%;
  border-style: dashed;
  animation: securityRingMiddle 18s linear infinite reverse;
}

.security-ring-inner {
  inset: 39%;
  border-style: dotted;
  animation: securityRingInner 20s linear infinite;
}

/* Núcleo */

.security-core {
  position: absolute;
  inset: 38%;
  border-radius: 22px;
  background: radial-gradient(circle at top, #2734ff, #121530);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  box-shadow:
    0 16px 34px rgba(12, 22, 112, 0.85),
    0 0 0 1px rgba(200, 210, 255, 0.7);
  color: #ffffff;
  text-align: center;
  animation: securityCorePulse 3.4s ease-in-out infinite;
}

.security-core-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}

.security-core p {
  margin: 0;
  font-size: 0.86rem;
  opacity: 0.75;
}

/* Tags en los bordes */

.security-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 26px rgba(10, 18, 54, 0.4),
    0 0 0 1px rgba(161, 178, 255, 0.8);
  backdrop-filter: blur(6px);
  font-size: 0.8rem;
  color: #1f2642;
}

.security-tag span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #3c5bff, #9b5bff);
  box-shadow: 0 0 0 5px rgba(133, 151, 255, 0.5);
}

.security-tag p {
  margin: 0;
  white-space: nowrap;
}

/* Posiciones y animaciones de tags */

.security-tag-1 {
  top: 14%;
  left: 18%;
  animation: securityTagFloat1 11s ease-in-out infinite;
}

.security-tag-2 {
  top: 16%;
  right: 12%;
  animation: securityTagFloat2 12s ease-in-out infinite;
}

.security-tag-3 {
  bottom: 18%;
  right: 16%;
  animation: securityTagFloat3 13s ease-in-out infinite;
}

.security-tag-4 {
  bottom: 16%;
  left: 10%;
  animation: securityTagFloat4 14s ease-in-out infinite;
}

/* Animaciones */

@keyframes securityBulletPulse {
  0% {
    box-shadow:
      0 0 0 5px rgba(130, 150, 255, 0.4),
      0 0 14px rgba(60, 91, 255, 0.8);
  }
  60% {
    box-shadow:
      0 0 0 10px rgba(130, 150, 255, 0),
      0 0 18px rgba(60, 91, 255, 1);
  }
  100% {
    box-shadow:
      0 0 0 5px rgba(130, 150, 255, 0.4),
      0 0 14px rgba(60, 91, 255, 0.8);
  }
}

@keyframes securityRingOuter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes securityRingMiddle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes securityRingInner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes securityCorePulse {
  0% {
    box-shadow:
      0 16px 34px rgba(12, 22, 112, 0.85),
      0 0 0 0 rgba(60, 91, 255, 0.7);
  }
  70% {
    box-shadow:
      0 16px 34px rgba(12, 22, 112, 0.6),
      0 0 0 18px rgba(60, 91, 255, 0);
  }
  100% {
    box-shadow:
      0 16px 34px rgba(12, 22, 112, 0.85),
      0 0 0 0 rgba(60, 91, 255, 0.7);
  }
}

@keyframes securityTagFloat1 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-4px) translateX(2px);
  }
}

@keyframes securityTagFloat2 {
  0%,
  100% {
    transform: translateY(1px) translateX(0);
  }
  50% {
    transform: translateY(-3px) translateX(-2px);
  }
}

@keyframes securityTagFloat3 {
  0%,
  100% {
    transform: translateY(-1px) translateX(0);
  }
  50% {
    transform: translateY(-4px) translateX(1px);
  }
}

@keyframes securityTagFloat4 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-3px) translateX(-1px);
  }
}

/* Responsive */

@media (max-width: 960px) {
  .plugins-security-layout {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .plugins-security-section {
    padding: 3.3rem 1.25rem 3.8rem;
  }

  .plugins-security-panel {
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .plugins-security-inner {
    max-width: 100%;
  }

  .plugins-security-panel {
    border-radius: 24px;
  }
}
/* ==============================================
   ARQUITECTURA DE PLUGINS – ROLES Y JERARQUÍA
   ============================================== */

.plugins-roles-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.6rem 1.5rem 4.2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-roles-inner {
  width: 100%;
  max-width: 1150px;
  box-sizing: border-box;
}

/* Cabecera */

.plugins-roles-header {
  max-width: 700px;
  margin-bottom: 2.4rem;
  position: relative;
}

.plugins-roles-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #56618b;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-roles-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  color: #14182f;
  font-weight: 700;
}

.plugins-roles-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3a445f;
}

/* Efecto de fondo en cabecera */

.plugins-roles-header::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 91, 255, 0.25), transparent 65%);
  filter: blur(4px);
  opacity: 0.7;
  animation: pluginsRolesGlow 7s ease-in-out infinite alternate;
}

/* Layout principal */

.plugins-roles-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.2rem;
  align-items: stretch;
}

/* Eje lateral */

.plugins-roles-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}

.axis-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #3c5bff, #9b5bff);
  box-shadow:
    0 0 0 6px rgba(131, 150, 255, 0.55),
    0 0 18px rgba(60, 91, 255, 0.9);
}

.axis-dot-top {
  animation: axisDotPulse 2.8s ease-in-out infinite;
}

.axis-dot-bottom {
  animation: axisDotPulse 3.4s ease-in-out infinite;
}

.axis-line {
  flex: 1;
  width: 3px;
  margin: 0.7rem 0;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(60, 91, 255, 0.2),
    rgba(164, 91, 255, 0.65),
    rgba(60, 202, 155, 0.5)
  );
  position: relative;
  overflow: hidden;
}

.axis-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0)
  );
  animation: axisLineScan 4.2s linear infinite;
}

.axis-label {
  margin: 0;
  font-size: 0.75rem;
  color: #454f6e;
  text-align: center;
  max-width: 6rem;
}

/* Cards */

.plugins-roles-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.plugins-role-card {
  position: relative;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0 16px 38px rgba(9, 16, 48, 0.18),
    0 0 0 1px rgba(165, 181, 255, 0.7);
  padding: 1.3rem 1.2rem 1.4rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform-origin: center;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* Halo */

.plugins-role-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(239, 244, 255, 0.95), #ffffff);
  opacity: 0.96;
  pointer-events: none;
}

.plugins-role-card h3,
.plugins-role-card p,
.plugins-role-card ul,
.plugins-role-card li,
.plugins-role-card .role-badge {
  position: relative;
  z-index: 1;
}

/* Badge */

.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: rgba(238, 243, 255, 0.98);
  color: #283256;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* Títulos y texto */

.plugins-role-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  color: #171c34;
  font-weight: 600;
}

.plugins-role-card p {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #454f6d;
}

/* Lista interna */

.plugins-role-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plugins-role-card li {
  font-size: 0.83rem;
  color: #3a4463;
  line-height: 1.6;
  padding-left: 1rem;
  position: relative;
}

.plugins-role-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #3c5bff, #9b5bff);
}

/* Variaciones cromáticas */

.role-core {
  background: linear-gradient(140deg, #ffffff, #f0f3ff);
  animation: pluginsRoleCoreFloat 13s ease-in-out infinite;
}

.role-specialized {
  background: linear-gradient(140deg, #ffffff, #f4fbff);
  animation: pluginsRoleSpecializedFloat 14s ease-in-out infinite;
}

.role-integration {
  background: linear-gradient(140deg, #ffffff, #f7f4ff);
  animation: pluginsRoleIntegrationFloat 15s ease-in-out infinite;
}

/* Hover */

.plugins-role-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 48px rgba(9, 16, 48, 0.28),
    0 0 0 1px rgba(123, 144, 255, 0.95);
}

/* Animaciones */

@keyframes pluginsRolesGlow {
  0% {
    opacity: 0.5;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(8px);
  }
}

@keyframes axisDotPulse {
  0% {
    box-shadow:
      0 0 0 6px rgba(131, 150, 255, 0.55),
      0 0 18px rgba(60, 91, 255, 0.9);
  }
  60% {
    box-shadow:
      0 0 0 12px rgba(131, 150, 255, 0),
      0 0 22px rgba(60, 91, 255, 1);
  }
  100% {
    box-shadow:
      0 0 0 6px rgba(131, 150, 255, 0.55),
      0 0 18px rgba(60, 91, 255, 0.9);
  }
}

@keyframes axisLineScan {
  0% {
    top: -40%;
  }
  100% {
    top: 110%;
  }
}

@keyframes pluginsRoleCoreFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pluginsRoleSpecializedFloat {
  0%,
  100% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes pluginsRoleIntegrationFloat {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Responsive */

@media (max-width: 980px) {
  .plugins-roles-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .plugins-roles-section {
    padding: 3.3rem 1.25rem 3.9rem;
  }

  .plugins-roles-axis {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.6rem;
  }

  .axis-line {
    width: 80px;
    height: 3px;
    margin: 0 0.6rem;
  }

  .axis-line::before {
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    animation: axisLineScanHorizontal 4.2s linear infinite;
  }

  .axis-label {
    text-align: left;
    max-width: none;
  }
}

@keyframes axisLineScanHorizontal {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

@media (max-width: 800px) {
  .plugins-roles-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .plugins-roles-inner {
    max-width: 100%;
  }

  .plugins-role-card {
    border-radius: 18px;
  }
}
/* ==============================================
   ARQUITECTURA DE PLUGINS – EJEMPLOS CONCRETOS
   ============================================== */

.plugins-examples-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.6rem 1.5rem 4.2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-examples-inner {
  width: 100%;
  max-width: 1150px;
  box-sizing: border-box;
}

/* Cabecera */

.plugins-examples-header {
  max-width: 720px;
  margin-bottom: 2.5rem;
  position: relative;
}

.plugins-examples-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #56618b;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-examples-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  color: #14182f;
  font-weight: 700;
}

.plugins-examples-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3a445f;
}

/* Fondo sutil cabecera */

.plugins-examples-header::after {
  content: "";
  position: absolute;
  left: -40px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 91, 255, 0.22), transparent 60%);
  filter: blur(4px);
  opacity: 0.7;
  animation: pluginsExamplesGlow 7s ease-in-out infinite alternate;
}

/* Grid de plugins */

.plugins-examples-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

/* Tarjetas */

.plugin-example-card {
  position: relative;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 16px 36px rgba(9, 16, 48, 0.16),
    0 0 0 1px rgba(164, 180, 255, 0.7);
  padding: 1rem 1rem 1.1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transform-origin: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

/* Halo interior */

.plugin-example-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(239, 244, 255, 0.98), #ffffff);
  opacity: 0.95;
  pointer-events: none;
}

/* Header de la tarjeta */

.plugin-example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
  position: relative;
  z-index: 1;
}

.plugin-example-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(238, 243, 255, 0.98);
  color: #283256;
}

.plugin-example-type {
  font-size: 0.7rem;
  color: #5a6488;
  white-space: nowrap;
}

/* Títulos y texto */

.plugin-example-card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.96rem;
  color: #171c34;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.plugin-example-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: #444e6c;
  position: relative;
  z-index: 1;
}

.plugin-example-card code {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  padding: 0.08rem 0.3rem;
  border-radius: 6px;
  background: rgba(20, 26, 78, 0.05);
  color: #222847;
}

/* Pseudolínea de acento en la parte inferior */

.plugin-example-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #3c5bff, #9b5bff, #3cca9b);
  opacity: 0.8;
}

/* Animación general: ligera flotación por grupos */

.plugin-example-card:nth-child(1),
.plugin-example-card:nth-child(5) {
  animation: pluginExampleFloat1 12s ease-in-out infinite;
}

.plugin-example-card:nth-child(2),
.plugin-example-card:nth-child(6) {
  animation: pluginExampleFloat2 13s ease-in-out infinite;
}

.plugin-example-card:nth-child(3),
.plugin-example-card:nth-child(7) {
  animation: pluginExampleFloat3 14s ease-in-out infinite;
}

.plugin-example-card:nth-child(4),
.plugin-example-card:nth-child(8) {
  animation: pluginExampleFloat4 15s ease-in-out infinite;
}

/* Hover */

.plugin-example-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 48px rgba(9, 16, 48, 0.26),
    0 0 0 1px rgba(124, 146, 255, 0.98);
}

/* Animaciones */

@keyframes pluginsExamplesGlow {
  0% {
    opacity: 0.5;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(8px);
  }
}

@keyframes pluginExampleFloat1 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes pluginExampleFloat2 {
  0%,
  100% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pluginExampleFloat3 {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes pluginExampleFloat4 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Responsive */

@media (max-width: 1100px) {
  .plugins-examples-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .plugins-examples-section {
    padding: 3.3rem 1.25rem 3.8rem;
  }

  .plugins-examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .plugins-examples-inner {
    max-width: 100%;
  }

  .plugins-examples-grid {
    grid-template-columns: 1fr;
  }

  .plugin-example-card {
    border-radius: 16px;
  }
}
/* =======================================================
   ARQUITECTURA DE PLUGINS – GOBERNANZA Y VERSIONADO
   ======================================================= */

.plugins-governance-section {
  width: 100%;
  background-color: #ffffff;
  padding: 3.8rem 1.5rem 4.4rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-governance-inner {
  width: 100%;
  max-width: 1150px;
  box-sizing: border-box;
}

/* Cabecera */

.plugins-governance-header {
  max-width: 720px;
  margin-bottom: 2.5rem;
  position: relative;
}

.plugins-governance-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #56618b;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.plugins-governance-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  color: #14182f;
  font-weight: 700;
}

.plugins-governance-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3a445f;
}

/* Efecto lateral de cabecera */

.plugins-governance-header::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 6px;
  width: 4px;
  height: 78px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3c5bff, #9b5bff, #3cca9b);
  opacity: 0.9;
}

/* Tablero de gobernanza */

.plugins-governance-board {
  position: relative;
  margin-bottom: 2.4rem;
  border-radius: 24px;
  padding: 1.6rem 1.6rem 1.8rem;
  background: radial-gradient(circle at top left, #eef2ff, #ffffff);
  box-shadow:
    0 20px 46px rgba(8, 14, 44, 0.26),
    0 0 0 1px rgba(162, 178, 255, 0.7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  overflow: hidden;
}

/* Orbes de fondo animados */

.governance-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.68;
  pointer-events: none;
}

.governance-bg-orb-1 {
  width: 220px;
  height: 220px;
  top: -60px;
  right: -40px;
  background: radial-gradient(circle, rgba(60, 91, 255, 0.35), transparent 60%);
  animation: governanceOrb1 16s ease-in-out infinite alternate;
}

.governance-bg-orb-2 {
  width: 200px;
  height: 200px;
  bottom: -70px;
  left: -50px;
  background: radial-gradient(circle, rgba(60, 202, 155, 0.3), transparent 60%);
  animation: governanceOrb2 18s ease-in-out infinite alternate;
}

/* Columnas */

.governance-column {
  position: relative;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 14px 34px rgba(9, 16, 48, 0.16),
    0 0 0 1px rgba(174, 190, 255, 0.7);
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
  transform-origin: center;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* Halo interior */

.governance-column::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(238, 243, 255, 0.96), #ffffff);
  opacity: 0.96;
  pointer-events: none;
}

/* Header de columna */

.governance-column-header {
  position: relative;
  z-index: 1;
  margin-bottom: 0.3rem;
}

.governance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(238, 243, 255, 0.98);
  color: #283256;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.governance-column-header h3 {
  margin: 0;
  font-size: 0.98rem;
  color: #171c34;
  font-weight: 600;
}

/* Lista de items */

.governance-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.governance-list li {
  padding: 0.3rem 0 0.1rem;
}

.governance-list h4 {
  margin: 0 0 0.2rem;
  font-size: 0.88rem;
  color: #1d2340;
  font-weight: 600;
}

.governance-list p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: #434d6a;
}

/* Variaciones cromáticas y animaciones por columna */

.col-plan {
  background: linear-gradient(145deg, #ffffff, #f1f4ff);
  animation: governanceColPlan 14s ease-in-out infinite;
}

.col-validate {
  background: linear-gradient(145deg, #ffffff, #f2fbff);
  animation: governanceColValidate 15s ease-in-out infinite;
}

.col-runtime {
  background: linear-gradient(145deg, #ffffff, #f8f6ff);
  animation: governanceColRuntime 16s ease-in-out infinite;
}

/* Hover */

.governance-column:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 48px rgba(9, 16, 48, 0.28),
    0 0 0 1px rgba(123, 144, 255, 0.95);
}

/* Footer */

.plugins-governance-footer {
  display: flex;
  justify-content: flex-start;
}

.governance-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background: rgba(235, 241, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(166, 182, 255, 0.8);
  max-width: 760px;
}

.governance-summary p {
  margin: 0;
  font-size: 0.86rem;
  color: #313b5b;
}

.governance-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #3c5bff, #9b5bff);
  box-shadow: 0 0 0 7px rgba(132, 151, 255, 0.5);
  animation: governanceDotPulse 2.8s ease-in-out infinite;
}

/* Animaciones */

@keyframes governanceOrb1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-18px, 10px);
  }
}

@keyframes governanceOrb2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(16px, -12px);
  }
}

@keyframes governanceColPlan {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes governanceColValidate {
  0%,
  100% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes governanceColRuntime {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes governanceDotPulse {
  0% {
    box-shadow: 0 0 0 7px rgba(132, 151, 255, 0.5);
  }
  60% {
    box-shadow: 0 0 0 13px rgba(132, 151, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(132, 151, 255, 0.5);
  }
}

/* Responsive */

@media (max-width: 980px) {
  .plugins-governance-board {
    grid-template-columns: 1fr;
    padding: 1.3rem 1.2rem 1.5rem;
  }
}

@media (max-width: 600px) {
  .plugins-governance-section {
    padding: 3.4rem 1.25rem 4rem;
  }

  .plugins-governance-inner {
    max-width: 100%;
  }

  .plugins-governance-board {
    border-radius: 20px;
  }

  .governance-column {
    border-radius: 16px;
  }

  .governance-summary {
    border-radius: 18px;
  }
}
/* ==============================================
   ARQUITECTURA DE PLUGINS – CIERRE / CTA FINAL
   ============================================== */

.plugins-end-section {
  width: 100%;
  background-color: #ffffff;
  padding: 4rem 1.5rem 5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.plugins-end-inner {
  width: 100%;
  max-width: 1100px;
  text-align: center;
  position: relative;
}

/* Header */

.plugins-end-header {
  max-width: 780px;
  margin: 0 auto 2.8rem;
  position: relative;
}

.plugins-end-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: #13172a;
  margin: 0 0 1rem;
}

.plugins-end-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: #3b445b;
  margin: 0;
}

/* Panel final */

.plugins-end-panel {
  position: relative;
  margin: 0 auto 3.2rem;
  padding: 2.4rem 2rem;
  max-width: 850px;
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    #eef1ff 0%,
    #ffffff 50%,
    #f3f8ff 100%
  );
  box-shadow:
    0 22px 48px rgba(10, 18, 54, 0.26),
    inset 0 0 0 1px rgba(165, 181, 255, 0.55);
  overflow: hidden;
}

/* Orbes animados */

.end-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.7;
  pointer-events: none;
}

.end-orb-1 {
  width: 240px;
  height: 240px;
  top: -80px;
  right: -40px;
  background: radial-gradient(circle, rgba(60,91,255,0.22), transparent 65%);
  animation: endOrb1 18s ease-in-out infinite alternate;
}

.end-orb-2 {
  width: 220px;
  height: 220px;
  bottom: -70px;
  left: -30px;
  background: radial-gradient(circle, rgba(164,91,255,0.22), transparent 65%);
  animation: endOrb2 20s ease-in-out infinite alternate;
}

.end-orb-3 {
  width: 180px;
  height: 180px;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(60,202,155,0.22), transparent 65%);
  animation: endOrb3 22s ease-in-out infinite alternate;
}

/* Contenido interior del panel */

.plugins-end-content {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  z-index: 1;
}

.plugins-end-content h3 {
  margin: 0 0 0.7rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #151b37;
}

.plugins-end-content p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3f4866;
}

/* CTA */

.plugins-end-cta {
  margin-top: 2rem;
}

.end-cta-button {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: linear-gradient(90deg, #3c5bff, #9b5bff, #3cca9b);
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 12px 22px rgba(9, 18, 54, 0.3),
    0 0 0 1px rgba(200, 210, 255, 0.6);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.end-cta-button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 30px rgba(9, 18, 54, 0.32),
    0 0 0 1px rgba(124, 146, 255, 1);
}

/* Animaciones orbes */

@keyframes endOrb1 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-20px, 12px); }
}

@keyframes endOrb2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(18px, -16px); }
}

@keyframes endOrb3 {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-12px); }
}

/* Responsive */

@media (max-width: 820px) {
  .plugins-end-panel {
    padding: 2rem 1.3rem;
  }
}

@media (max-width: 600px) {
  .end-cta-button {
    padding: 0.85rem 1.8rem;
    font-size: 0.9rem;
  }
}