/* Lodestar v2 · "Para quién es" (.ec-): el sí da luz, el no está roto.
   Sí: halo cálido que respira, un destello que recorre el filo y motas de luz que salen de la caja.
   No: grietas como las del embudo roto (borde dorado que se enfría a un rastro cálido) y chispas leves.
   Las motas y las grietas van en un canvas 2D por caja (escena-encaja.js); el halo y el destello, en CSS
   animando solo transform y opacity. Sin JS no existe .ec-vivo: las dos cajas se quedan como siempre. */

#lp .encaja .ec-vivo { position: relative; isolation: isolate }
#lp .encaja .ec-vivo > h3, #lp .encaja .ec-vivo > ul { position: relative; z-index: 2 }

/* ---------- Sí ---------- */
#lp .encaja .si.ec-vivo {
  border-color: rgba(232, 180, 100, .34);
  background: radial-gradient(120% 80% at 50% 0%, rgba(232, 180, 100, .1), transparent 62%), var(--noche-2);
}
#lp .encaja .si.ec-vivo h3 { color: var(--oro-2) }
#lp .ec-halo {
  position: absolute; inset: -56px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 180, 100, .28), rgba(232, 180, 100, .09) 58%, transparent);
  animation: ec-respira 5.5s ease-in-out infinite;
}
@keyframes ec-respira { 0%, 100% { opacity: .55; transform: scale(.97) } 50% { opacity: 1; transform: scale(1.03) } }
/* Destello que recorre el filo: un cono de luz que gira, recortado al borde de 1 px */
#lp .ec-recorre {
  position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
#lp .ec-recorre::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(247, 217, 162, .9) 76%, rgba(255, 245, 225, 1) 78%, transparent 86% 100%);
  animation: ec-gira 7s linear infinite;
}
@keyframes ec-gira { to { transform: rotate(360deg) } }
#lp .encaja .si.ec-vivo li::before { animation: ec-late 3.2s ease-in-out infinite }
#lp .encaja .si.ec-vivo li:nth-child(2)::before { animation-delay: .4s }
#lp .encaja .si.ec-vivo li:nth-child(3)::before { animation-delay: .8s }
#lp .encaja .si.ec-vivo li:nth-child(4)::before { animation-delay: 1.2s }
@keyframes ec-late { 0%, 100% { opacity: .75; transform: scale(.9) } 50% { opacity: 1; transform: scale(1.15) } }

/* ---------- No ---------- */
#lp .encaja .no.ec-vivo { border-color: rgba(125, 147, 173, .2) }

/* ---------- Lienzos ---------- */
#lp .ec-lienzo { position: absolute; pointer-events: none }
#lp .si .ec-lienzo { inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); z-index: 3 }
#lp .no .ec-lienzo { left: -24px; top: -24px; width: calc(100% + 48px); height: calc(100% + 96px); z-index: 1 }