.elementor-324 .elementor-element.elementor-element-d999084{overflow:hidden;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:20% 20% 20% 20%;}.elementor-324 .elementor-element.elementor-element-d999084 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-324 .elementor-element.elementor-element-69884e6.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-324 .elementor-element.elementor-element-69884e6.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-324 .elementor-element.elementor-element-69884e6.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-324 .elementor-element.elementor-element-69884e6 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-324 .elementor-element.elementor-element-69884e6 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(max-width:1024px){.elementor-324 .elementor-element.elementor-element-d999084{padding:15% 15% 15% 15%;}}@media(max-width:767px){.elementor-324 .elementor-element.elementor-element-d999084{padding:10% 10% 10% 10%;}}/* Start custom CSS for column, class: .elementor-element-69884e6 *//* === Base para constelaciones === */
.horoscopo-card {
  position: relative;
  overflow: hidden;
}
.horoscopo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  opacity: 0.2;
}
.horoscopo-card .horoscopo-head,
.horoscopo-card .horoscopo-rango,
.horoscopo-card .horoscopo-meta,
.horoscopo-card .horoscopo-descripcion {
  position: relative;
  z-index: 1;
}

/* Estilo base de estrellas */
.constellation-star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px #fff, 0 0 16px #7b5cff;
  animation: twinkle 2s infinite ease-in-out alternate;
}
@keyframes twinkle {
  from { opacity: 0.3; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1.1); }
}

/* === Aries === */
.horoscopo-card.aries::before {
  background: transparent;
}
.horoscopo-card.aries .constellation-star:nth-child(1){ top:20%; left:20%; }
.horoscopo-card.aries .constellation-star:nth-child(2){ top:40%; left:35%; }
.horoscopo-card.aries .constellation-star:nth-child(3){ top:60%; left:50%; }
.horoscopo-card.aries .constellation-star:nth-child(4){ top:30%; left:70%; }
.horoscopo-card.aries .constellation-star:nth-child(5){ top:70%; left:80%; }

/* === Tauro === */
.horoscopo-card.taurus .constellation-star:nth-child(1){ top:25%; left:30%; }
.horoscopo-card.taurus .constellation-star:nth-child(2){ top:35%; left:50%; }
.horoscopo-card.taurus .constellation-star:nth-child(3){ top:55%; left:60%; }
.horoscopo-card.taurus .constellation-star:nth-child(4){ top:65%; left:40%; }
.horoscopo-card.taurus .constellation-star:nth-child(5){ top:75%; left:20%; }

/* === Géminis === */
.horoscopo-card.gemini .constellation-star:nth-child(1){ top:15%; left:40%; }
.horoscopo-card.gemini .constellation-star:nth-child(2){ top:30%; left:45%; }
.horoscopo-card.gemini .constellation-star:nth-child(3){ top:45%; left:50%; }
.horoscopo-card.gemini .constellation-star:nth-child(4){ top:60%; left:55%; }
.horoscopo-card.gemini .constellation-star:nth-child(5){ top:75%; left:60%; }

/* === Leo (ejemplo) === */
.horoscopo-card.leo .constellation-star:nth-child(1){ top:20%; left:60%; }
.horoscopo-card.leo .constellation-star:nth-child(2){ top:35%; left:70%; }
.horoscopo-card.leo .constellation-star:nth-child(3){ top:50%; left:65%; }
.horoscopo-card.leo .constellation-star:nth-child(4){ top:65%; left:55%; }
.horoscopo-card.leo .constellation-star:nth-child(5){ top:80%; left:45%; }

/* Repite la misma lógica para todos los signos *//* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-d999084 *//* ====== Cielo estrellado con constelaciones (solo CSS) ====== */
/* Aplica a la sección que tenga la clase .sky */
.sky{
  position: relative;
  overflow: hidden;
  /* fondo base */
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(80,100,180,.25), transparent 60%),
    radial-gradient(900px 500px at 10% 120%, rgba(150,90,255,.10), transparent 50%),
    #000;
  isolation: isolate;
}

/* --- Capa 1: estrellas pequeñas (parallax lento) --- */
.sky::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 8%   12%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 18%  32%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 28%  22%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 42%  18%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 57%  25%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 71%  15%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 83%  28%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 93%  12%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 5%   55%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 16%  68%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 27%  58%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 38%  72%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 49%  62%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 60%  70%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 71%  60%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 82%  74%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 93%  64%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 12%  88%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 24%  91%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 33%  84%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 46%  92%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 58%  87%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 70%  94%, #fff 80%, transparent) ,
    radial-gradient(1px 1px at 85%  88%, #fff 80%, transparent);
  opacity:.8;
  animation: parallaxA 120s linear infinite;
  z-index: -1;
}

/* --- Capa 2: estrellas medianas con parpadeo --- */
.sky::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1.5px 1.5px at 10%  10%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 22%  40%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 40%  30%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 58%  18%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 75%  35%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 90%  22%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 14%  62%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 32%  70%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 50%  56%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 68%  66%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 86%  60%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 26%  88%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 48%  90%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 72%  86%, #fff 80%, transparent);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
  animation: twinkle 5s ease-in-out infinite alternate, parallaxB 180s linear infinite;
  z-index: -1;
}

/* --- Capa 3: trazos de constelaciones (SVG inline como background) --- */
.sky .constellations{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:-1;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
    <g fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='1.4' stroke-linecap='round'>\
      <path d='M80 120 L180 160 L260 110 L360 180 L440 140'/>\
      <path d='M980 200 L900 260 L820 230 L760 300 L700 260'/>\
      <path d='M160 520 L240 480 L320 520 L380 460 L450 500'/>\
      <path d='M740 520 L820 480 L900 520 L980 470'/>\
    </g>\
    <g fill='white'>\
      <circle cx='80' cy='120' r='2'/><circle cx='180' cy='160' r='2'/><circle cx='260' cy='110' r='2'/>\
      <circle cx='360' cy='180' r='2'/><circle cx='440' cy='140' r='2'/>\
      <circle cx='980' cy='200' r='2'/><circle cx='900' cy='260' r='2'/><circle cx='820' cy='230' r='2'/>\
      <circle cx='760' cy='300' r='2'/><circle cx='700' cy='260' r='2'/>\
      <circle cx='160' cy='520' r='2'/><circle cx='240' cy='480' r='2'/><circle cx='320' cy='520' r='2'/>\
      <circle cx='380' cy='460' r='2'/><circle cx='450' cy='500' r='2'/>\
      <circle cx='740' cy='520' r='2'/><circle cx='820' cy='480' r='2'/><circle cx='900' cy='520' r='2'/>\
      <circle cx='980' cy='470' r='2'/>\
    </g>\
  </svg>");
  background-size: cover;
  opacity:.6;
  animation: drift 120s linear infinite alternate;
}

/* --- (Opcional) Estrella fugaz de vez en cuando --- */
.sky .shooting{
  position:absolute; top:-10vh; left: 120%;
  width:2px; height:2px; background:linear-gradient(90deg, #fff, rgba(255,255,255,0));
  filter: drop-shadow(0 0 6px #fff);
  transform: rotate(-25deg);
  animation: shoot 6s linear infinite;
  opacity:.0;
}

/* ===== Animaciones ===== */
@keyframes parallaxA { 
  from { transform: translateY(0); } 
  to   { transform: translateY(40px); } 
}
@keyframes parallaxB { 
  from { transform: translateY(0); } 
  to   { transform: translateY(-60px); } 
}
@keyframes twinkle{
  0%  {opacity:.7;}
  50% {opacity:1; filter: drop-shadow(0 0 3px rgba(255,255,255,.9));}
  100%{opacity:.6;}
}
@keyframes drift{
  from { background-position: 0% 0%; }
  to   { background-position: 100% 2%; }
}
@keyframes shoot{
  0%   { opacity:0; transform: translate(0,0) rotate(-25deg) scaleX(0); }
  10%  { opacity:1; transform: translate(-15vw,10vh) rotate(-25deg) scaleX(25); }
  100% { opacity:0; transform: translate(-120vw,70vh) rotate(-25deg) scaleX(25); }
}

/* Ajuste por si tu sección ya tiene padding/márgenes */
.sky > .elementor-container,
.sky > .e-con {
  position: relative;
  z-index: 1; /* contenido por encima del fondo animado */
}

/* ======== Cielo base (si ya lo tienes, puedes omitir esta parte) ======== */
.elementor-324 .elementor-element.elementor-element-d999084{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(80,100,180,.25), transparent 60%),
    radial-gradient(900px 500px at 10% 120%, rgba(150,90,255,.10), transparent 50%),
    #000;
}
.elementor-324 .elementor-element.elementor-element-d999084::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 8% 12%,   #fff 80%, transparent),
    radial-gradient(1px 1px at 18% 32%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 28% 22%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 42% 18%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 57% 25%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 71% 15%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 83% 28%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 93% 12%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 5%  55%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 16% 68%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 27% 58%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 38% 72%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 49% 62%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 60% 70%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 71% 60%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 82% 74%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 93% 64%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 12% 88%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 24% 91%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 33% 84%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 46% 92%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 58% 87%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 70% 94%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 85% 88%,  #fff 80%, transparent);
  opacity:.85;
  animation: parallaxA 120s linear infinite;
}
.elementor-324 .elementor-element.elementor-element-d999084 > .elementor-container,
.elementor-324 .elementor-element.elementor-element-d999084 > .e-con { position: relative; z-index:1; }

@keyframes parallaxA { from{transform: translateY(0)} to{transform: translateY(40px)} }

/* ======== Capa dinámica: constelación activa ======== */
/* Usamos ::after como overlay que cambia de imagen con :has() en hover */
.elementor-324 .elementor-element.elementor-element-d999084::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
  background-size: clamp(500px, 60vw, 900px) auto;
  background-position: 50% 35%;
  opacity:0; /* apagado por defecto */
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.55));
}

/* Encender overlay cuando hay cualquier card en hover */
.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card:hover)::after{
  opacity:1;
  transform: scale(1.01);
}

/* ======== Reglas por signo: cambia el SVG del overlay ======== */
/* Nota: data-sign usa inglés: aries, taurus, gemini, ... */

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="aries"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none' stroke-linecap='round'>\
     <path d='M300 500 Q360 420 420 460 T540 470 M660 470 Q720 420 780 500'/>\
   </g>\
   <g fill='white'>\
     <circle cx='300' cy='500' r='3'/><circle cx='420' cy='460' r='3'/>\
     <circle cx='540' cy='470' r='3'/><circle cx='660' cy='470' r='3'/>\
     <circle cx='780' cy='500' r='3'/>\
   </g>\
  </svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="taurus"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <circle cx='600' cy='380' r='120'/><path d='M480 300 C520 240 680 240 720 300'/>\
   </g><g fill='white'>\
     <circle cx='480' cy='300' r='3'/><circle cx='720' cy='300' r='3'/>\
     <circle cx='600' cy='260' r='3'/><circle cx='600' cy='500' r='3'/>\
   </g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="gemini"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <path d='M520 260 V540 M680 260 V540 M520 260 Q600 220 680 260 M520 540 Q600 580 680 540'/>\
   </g><g fill='white'>\
     <circle cx='520' cy='260' r='3'/><circle cx='680' cy='260' r='3'/>\
     <circle cx='520' cy='540' r='3'/><circle cx='680' cy='540' r='3'/>\
   </g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="cancer"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <path d='M520 360a80 80 0 1 1-160 0a80 80 0 0 1 160 0z'/>\
     <path d='M680 440a80 80 0 1 0 160 0a80 80 0 0 0-160 0z'/>\
   </g><g fill='white'>\
     <circle cx='440' cy='360' r='3'/><circle cx='760' cy='440' r='3'/>\
   </g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="leo"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <path d='M500 480 C460 420 520 340 600 360 C690 380 700 480 640 520 S520 560 480 520'/>\
   </g><g fill='white'><circle cx='600' cy='360' r='3'/><circle cx='640' cy='520' r='3'/></g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="virgo"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none' stroke-linecap='round'>\
     <path d='M460 260 V520 a40 40 0 0 0 80 0 V260 M620 260 V520 a40 40 0 0 0 80 0'/>\
   </g><g fill='white'><circle cx='460' cy='260' r='3'/><circle cx='700' cy='520' r='3'/></g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="libra"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <path d='M420 460h360 M480 460a120 90 0 0 1 240 0'/>\
   </g><g fill='white'><circle cx='600' cy='370' r='3'/></g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="scorpio"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none' stroke-linecap='round'>\
     <path d='M460 280 V520 a40 40 0 0 0 80 0 V360 M620 360 V520 a40 40 0 0 0 80 0 M700 520 l60 -40 v80'/>\
   </g><g fill='white'><circle cx='520' cy='360' r='3'/><circle cx='760' cy='560' r='3'/></g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="sagittarius"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none' stroke-linecap='round'>\
     <path d='M460 560 L740 280 M680 280 H760 V360'/>\
     <path d='M520 500 L640 440'/>\
   </g><g fill='white'><circle cx='740' cy='280' r='3'/><circle cx='520' cy='500' r='3'/></g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="capricorn"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <path d='M460 300 V520 C460 600 600 600 600 520 S740 440 740 520'/>\
   </g><g fill='white'><circle cx='600' cy='520' r='3'/><circle cx='740' cy='520' r='3'/></g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="aquarius"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <path d='M360 380 q60 -40 120 0 t120 0 t120 0 t120 0'/>\
     <path d='M360 460 q60 -40 120 0 t120 0 t120 0 t120 0'/>\
   </g></svg>");
}

.elementor-324 .elementor-element.elementor-element-d999084:has(.horoscopo-card[data-sign="pisces"]:hover)::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
   <g stroke='rgba(255,255,255,0.85)' stroke-width='2' fill='none'>\
     <path d='M500 320 a120 120 0 0 0 0 200 M700 320 a120 120 0 0 1 0 200'/>\
     <path d='M460 420 H740'/>\
   </g><g fill='white'><circle cx='460' cy='420' r='3'/><circle cx='740' cy='420' r='3'/></g></svg>");
}

/* ===== Cielo estrellado + constelaciones (solo CSS) ===== */
/* Usa '.elementor-324 .elementor-element.elementor-element-d999084' porque Elementor lo reemplaza por la sección actual */
.elementor-324 .elementor-element.elementor-element-d999084{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(80,100,180,.25), transparent 60%),
    radial-gradient(900px 500px at 10% 120%, rgba(150,90,255,.10), transparent 50%),
    #000;
}

/* Capa 1: estrellas pequeñas (parallax lento) */
.elementor-324 .elementor-element.elementor-element-d999084::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;                /* <- importante */
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 8% 12%,   #fff 80%, transparent),
    radial-gradient(1px 1px at 18% 32%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 28% 22%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 42% 18%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 57% 25%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 71% 15%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 83% 28%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 93% 12%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 5%  55%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 16% 68%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 27% 58%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 38% 72%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 49% 62%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 60% 70%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 71% 60%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 82% 74%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 93% 64%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 12% 88%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 24% 91%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 33% 84%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 46% 92%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 58% 87%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 70% 94%,  #fff 80%, transparent),
    radial-gradient(1px 1px at 85% 88%,  #fff 80%, transparent);
  opacity:.8;
  animation: parallaxA 120s linear infinite;
}

/* Capa 2: estrellas medianas + constelaciones (twinkle + parallax) */
.elementor-324 .elementor-element.elementor-element-d999084::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;                /* <- importante */
  pointer-events:none;
  background:
    /* estrellas medianas */
    radial-gradient(1.5px 1.5px at 10% 10%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 22% 40%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 40% 30%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 58% 18%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 75% 35%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 90% 22%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 14% 62%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 32% 70%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 50% 56%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 68% 66%, #fff 80%, transparent),
    radial-gradient(1.5px 1.5px at 86% 60%, #fff 80%, transparent),
    /* constelaciones como SVG encima */
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
        <g fill='none' stroke='rgba(255,255,255,0.28)' stroke-width='1.4' stroke-linecap='round'>\
          <path d='M80 120 L180 160 L260 110 L360 180 L440 140'/>\
          <path d='M980 200 L900 260 L820 230 L760 300 L700 260'/>\
          <path d='M160 520 L240 480 L320 520 L380 460 L450 500'/>\
          <path d='M740 520 L820 480 L900 520 L980 470'/>\
        </g>\
        <g fill='white'>\
          <circle cx='80' cy='120' r='2'/><circle cx='180' cy='160' r='2'/><circle cx='260' cy='110' r='2'/>\
          <circle cx='360' cy='180' r='2'/><circle cx='440' cy='140' r='2'/>\
          <circle cx='980' cy='200' r='2'/><circle cx='900' cy='260' r='2'/><circle cx='820' cy='230' r='2'/>\
          <circle cx='760' cy='300' r='2'/><circle cx='700' cy='260' r='2'/>\
          <circle cx='160' cy='520' r='2'/><circle cx='240' cy='480' r='2'/><circle cx='320' cy='520' r='2'/>\
          <circle cx='380' cy='460' r='2'/><circle cx='450' cy='500' r='2'/>\
          <circle cx='740' cy='520' r='2'/><circle cx='820' cy='480' r='2'/><circle cx='900' cy='520' r='2'/>\
          <circle cx='980' cy='470' r='2'/>\
        </g>\
      </svg>"
    );
  background-repeat:no-repeat, repeat;
  background-size: cover, auto;
  background-position:center, 0 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
  animation: twinkle 5s ease-in-out infinite alternate, parallaxB 180s linear infinite;
}

/* Asegura que el contenido quede por encima del fondo animado */
.elementor-324 .elementor-element.elementor-element-d999084 > .elementor-container,
.elementor-324 .elementor-element.elementor-element-d999084 > .e-con { position: relative; z-index:1; }

/* Animaciones */
@keyframes parallaxA { from{transform: translateY(0)} to{transform: translateY(40px)} }
@keyframes parallaxB { from{transform: translateY(0)} to{transform: translateY(-60px)} }
@keyframes twinkle { 0%{opacity:.7} 50%{opacity:1; filter:drop-shadow(0 0 3px rgba(255,255,255,.9))} 100%{opacity:.6} }/* End custom CSS */