/* ===============================
   KV PARTICLES – BASE CSS
   =============================== */

.kv-particles{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

/* Canvas */
.kv-particles canvas.kv-px{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
  mix-blend-mode: screen;
}

/* Contenido arriba */
.kv-particles > *{
  position: relative;
  z-index: 2;
}
/* ===============================
   DORA CARD – Premium FX (CSS)
   Clase en la sección: kv-dora-card
   =============================== */

.kv-dora-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px;
  /* base elegante */
  box-shadow:
    inset 0 0 0 1px rgba(44,209,242,0.18),
    0 22px 70px rgba(0,0,0,0.55);
  transition: box-shadow .25s ease, transform .25s ease;
}

/* Borde tenue siempre */
.kv-dora-card::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(44,209,242,0.22);
  opacity: .95;
  z-index: 0;
}

/* Haz de luz (se activa por clase kv-active desde JS) */
.kv-dora-card .kv-scan{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity: 0;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(44,209,242,0.14) 50%,
    transparent 60%
  );
  filter: blur(1px);
  transform: translateX(-30%) translateY(30%);
}

/* Estado activo (mouseenter) */
.kv-dora-card.kv-active{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(44,209,242,0.30),
    0 0 22px rgba(44,209,242,0.18),
    0 30px 90px rgba(0,0,0,0.65);
}

/* Intensifica borde cuando está activo */
.kv-dora-card.kv-active::before{
  box-shadow: inset 0 0 0 1px rgba(44,209,242,0.42);
}

/* Activa el scan cuando está activo */
.kv-dora-card.kv-active .kv-scan{
  opacity: 1;
  animation: kvScanMove 1.8s ease-in-out infinite;
}

@keyframes kvScanMove{
  0%   { transform: translateX(-30%) translateY(30%); }
  50%  { transform: translateX(20%) translateY(-20%); }
  100% { transform: translateX(30%) translateY(-30%); }
}

/* ===== Foto / retrato: halo circular + microzoom =====
   No sabemos tu selector exacto, así que apuntamos a imágenes dentro de la sección.
   Si afecta a más imágenes, decime y lo hacemos más específico.
*/
.kv-dora-card img{
  border-radius: 999px; /* si tu foto ya es circular, no cambia, pero asegura consistencia */
  box-shadow:
    0 0 0 2px rgba(44,209,242,0.35),
    0 0 26px rgba(44,209,242,0.20);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  transform: translateZ(0);
}

/* En activo: foto “respira” */
.kv-dora-card.kv-active img{
  transform: scale(1.015);
  box-shadow:
    0 0 0 2px rgba(44,209,242,0.55),
    0 0 44px rgba(44,209,242,0.26);
  filter: saturate(1.05) contrast(1.05);
}

/* Canvas de partículas (ya lo venías usando) */
.kv-particles canvas.kv-px{
  opacity: .70; /* bajamos un poquito para que no tape texto */
}

/* Contenido arriba */
.kv-dora-card > *{
  position: relative;
  z-index: 2;
}
/* =========================================
   DORA CARD – Iluminación + Título Premium
   Clase en la sección: kv-dora-card
   ========================================= */

.kv-dora-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:
    inset 0 0 0 1px rgba(44,209,242,0.18),
    0 22px 70px rgba(0,0,0,0.55);
}

/* Glow base tenue (siempre) */
.kv-dora-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(44,209,242,0.22);
  opacity: .95;
  z-index: 0;
}

/* Spotlight suave (apagado por defecto, lo prende JS con .kv-lit) */
.kv-dora-card .kv-spot{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 35% 35%, rgba(44,209,242,0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(44,209,242,0.10), transparent 60%);
  filter: blur(2px);
  transition: opacity .25s ease, transform .35s ease;
  transform: scale(1);
}

/* Estado activo */
.kv-dora-card.kv-lit{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(44,209,242,0.30),
    0 0 22px rgba(44,209,242,0.18),
    0 30px 90px rgba(0,0,0,0.65);
}

.kv-dora-card.kv-lit::before{
  box-shadow: inset 0 0 0 1px rgba(44,209,242,0.42);
}

.kv-dora-card.kv-lit .kv-spot{
  opacity: 1;
  transform: scale(1.03);
}

/* Contenido arriba del spot */
.kv-dora-card > *{
  position: relative;
  z-index: 2;
}

/* ===== TÍTULO: underline animado =====
   Como no controlamos el HTML, apuntamos al primer heading dentro de la sección.
   Si tu título no es h1/h2/h3, decime y lo ajusto.
*/
.kv-dora-card h1,
.kv-dora-card h2,
.kv-dora-card h3{
  position: relative;
  display: inline-block;
}

/* Línea base (apagada) */
.kv-dora-card h1::after,
.kv-dora-card h2::after,
.kv-dora-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  height:3px;
  width:100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(44,209,242,0),
    rgba(44,209,242,0.75),
    rgba(168,85,247,0.55),
    rgba(44,209,242,0)
  );
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  filter: blur(0.2px);
  transition: transform .35s ease, opacity .35s ease;
}

/* Activo: underline aparece */
.kv-dora-card.kv-lit h1::after,
.kv-dora-card.kv-lit h2::after,
.kv-dora-card.kv-lit h3::after{
  transform: scaleX(1);
  opacity: 1;
}

/* ===== Imagen: halo circular premium ===== */
.kv-dora-card img{
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(44,209,242,0.35),
    0 0 26px rgba(44,209,242,0.18);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  transform: translateZ(0);
}

.kv-dora-card.kv-lit img{
  transform: scale(1.018);
  box-shadow:
    0 0 0 2px rgba(44,209,242,0.55),
    0 0 44px rgba(44,209,242,0.24);
  filter: saturate(1.05) contrast(1.05);
}

/* Mobile: más sobrio */
@media (max-width: 900px){
  .kv-dora-card.kv-lit{
    transform: none;
  }
}
<script>
/* =====================================
   DORA CARD – Iluminación (Zoho events)
   Eventos: onmouseenter / onmouseleave
   ===================================== */

function kvDoraOn(el){
  if(!el) return;

  // Crear spotlight si no existe
  if(!el.querySelector(".kv-spot")){
    var spot = document.createElement("div");
    spot.className = "kv-spot";
    el.insertBefore(spot, el.firstChild);
  }

  el.classList.add("kv-lit");
}

function kvDoraOff(el){
  if(!el) return;
  el.classList.remove("kv-lit");
}
</script>
/* =========================================
   DORA CARD – Iluminación + Título Premium
   Clase en la sección: kv-dora-card
   ========================================= */

.kv-dora-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:
    inset 0 0 0 1px rgba(44,209,242,0.18),
    0 22px 70px rgba(0,0,0,0.55);
}

/* Glow base tenue (siempre) */
.kv-dora-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(44,209,242,0.22);
  opacity: .95;
  z-index: 0;
}

/* Spotlight suave (apagado por defecto, lo prende JS con .kv-lit) */
.kv-dora-card .kv-spot{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 35% 35%, rgba(44,209,242,0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(44,209,242,0.10), transparent 60%);
  filter: blur(2px);
  transition: opacity .25s ease, transform .35s ease;
  transform: scale(1);
}

/* Estado activo */
.kv-dora-card.kv-lit{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(44,209,242,0.30),
    0 0 22px rgba(44,209,242,0.18),
    0 30px 90px rgba(0,0,0,0.65);
}

.kv-dora-card.kv-lit::before{
  box-shadow: inset 0 0 0 1px rgba(44,209,242,0.42);
}

.kv-dora-card.kv-lit .kv-spot{
  opacity: 1;
  transform: scale(1.03);
}

/* Contenido arriba del spot */
.kv-dora-card > *{
  position: relative;
  z-index: 2;
}

/* ===== TÍTULO: underline animado =====
   Como no controlamos el HTML, apuntamos al primer heading dentro de la sección.
   Si tu título no es h1/h2/h3, decime y lo ajusto.
*/
.kv-dora-card h1,
.kv-dora-card h2,
.kv-dora-card h3{
  position: relative;
  display: inline-block;
}

/* Línea base (apagada) */
.kv-dora-card h1::after,
.kv-dora-card h2::after,
.kv-dora-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  height:3px;
  width:100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(44,209,242,0),
    rgba(44,209,242,0.75),
    rgba(168,85,247,0.55),
    rgba(44,209,242,0)
  );
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  filter: blur(0.2px);
  transition: transform .35s ease, opacity .35s ease;
}

/* Activo: underline aparece */
.kv-dora-card.kv-lit h1::after,
.kv-dora-card.kv-lit h2::after,
.kv-dora-card.kv-lit h3::after{
  transform: scaleX(1);
  opacity: 1;
}

/* ===== Imagen: halo circular premium ===== */
.kv-dora-card img{
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(44,209,242,0.35),
    0 0 26px rgba(44,209,242,0.18);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  transform: translateZ(0);
}

.kv-dora-card.kv-lit img{
  transform: scale(1.018);
  box-shadow:
    0 0 0 2px rgba(44,209,242,0.55),
    0 0 44px rgba(44,209,242,0.24);
  filter: saturate(1.05) contrast(1.05);
}

/* Mobile: más sobrio */
@media (max-width: 900px){
  .kv-dora-card.kv-lit{
    transform: none;
  }
}