/* =====================================================================
   DECORACIÓN DE TEMPORADA — Halloween y Navidad
   ---------------------------------------------------------------------
   SOLO VISUAL. No cambia nada del funcionamiento: no hay JavaScript, no
   mueve ni agranda ningún elemento (los adornos son fondos y capas
   transparentes que no reciben clics), y solo se carga cuando la
   decoración está activada en  Personalizador → Decoración.

   Cada tema funciona cambiando las variables de color del personalizador
   (--mpp-*) y unos pocos colores fijos, más adornos en el encabezado.
   Se activa con la clase .mpp-theme-halloween / .mpp-theme-navidad que
   el plugin pone en el contenedor #mpp-root. Las animaciones solo usan
   transform/opacity (livianas) y se apagan si la persona tiene activada
   la opción "reducir movimiento" en su dispositivo.
   ===================================================================== */

/* ---- Base común: el encabezado pasa a ser el lienzo de los adornos ---- */
.mpp-app.mpp-theme-halloween .mpp-header,
.mpp-app.mpp-theme-navidad .mpp-header{ position:relative; overflow:hidden; }
.mpp-app.mpp-theme-halloween .mpp-header > *,
.mpp-app.mpp-theme-navidad .mpp-header > *{ position:relative; z-index:1; }
.mpp-app.mpp-theme-halloween .mpp-header::before,
.mpp-app.mpp-theme-halloween .mpp-header::after,
.mpp-app.mpp-theme-navidad .mpp-header::after{ content:""; position:absolute; z-index:0; pointer-events:none; }

/* Detalles que usan variables y valen para los dos temas */
.mpp-app.mpp-theme-halloween .mpp-step-num,
.mpp-app.mpp-theme-navidad .mpp-step-num{ background:linear-gradient(135deg, var(--mpp-surface) 0%, var(--mpp-cyan) 100%); }
.mpp-app.mpp-theme-halloween .mpp-ar-btn,
.mpp-app.mpp-theme-navidad .mpp-ar-btn{ background:linear-gradient(135deg, var(--mpp-surface) 0%, var(--mpp-cyan) 100%) !important; }

/* =====================================================================
   🎃 HALLOWEEN — negro y violeta oscuro, naranja calabaza
   ===================================================================== */
.mpp-app.mpp-theme-halloween{
  --mpp-bg:#0b0610; --mpp-surface:#18101c; --mpp-surface-2:#26162a; --mpp-border:#8a4f22;
  --mpp-coral:#ff8a1f; --mpp-cyan:#9250e6; --mpp-text:#f7efe4; --mpp-text-dim:#d7c3cf;
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27%3E%3Cg  fill=%27none%27 stroke=%27%23ffe2c2%27 stroke-opacity=%27.30%27 stroke-width=%271.1%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M0 0L200.0 0.0M0 0L194.0 60.0M0 0L164.0 120.0M0 0L120.0 164.0M0 0L60.0 194.0M0 0L0.0 200.0M44.0 0.0Q34.7 5.3 42.7 13.2M42.7 13.2Q31.5 15.8 36.1 26.4M36.1 26.4Q25.0 25.0 26.4 36.1M26.4 36.1Q15.8 31.5 13.2 42.7M13.2 42.7Q5.3 34.7 0.0 44.0M84.0 0.0Q66.2 10.1 81.5 25.2M81.5 25.2Q60.1 30.2 68.9 50.4M68.9 50.4Q47.7 47.7 50.4 68.9M50.4 68.9Q30.2 60.1 25.2 81.5M25.2 81.5Q10.1 66.2 0.0 84.0M124.0 0.0Q97.7 14.9 120.3 37.2M120.3 37.2Q88.8 44.6 101.7 74.4M101.7 74.4Q70.4 70.4 74.4 101.7M74.4 101.7Q44.6 88.8 37.2 120.3M37.2 120.3Q14.9 97.7 0.0 124.0M164.0 0.0Q129.2 19.7 159.1 49.2M159.1 49.2Q117.4 59.0 134.5 98.4M134.5 98.4Q93.2 93.2 98.4 134.5M98.4 134.5Q59.0 117.4 49.2 159.1M49.2 159.1Q19.7 129.2 0.0 164.0M200.0 0.0Q157.6 24.0 194.0 60.0M194.0 60.0Q143.2 72.0 164.0 120.0M164.0 120.0Q113.6 113.6 120.0 164.0M120.0 164.0Q72.0 143.2 60.0 194.0M60.0 194.0Q24.0 157.6 0.0 200.0%27/%3E%3C/g%3E%3C/svg%3E") top left / 190px 190px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27%3E%3Cg transform=%27translate(200 0) scale(-1 1)%27 fill=%27none%27 stroke=%27%23ffe2c2%27 stroke-opacity=%27.30%27 stroke-width=%271.1%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M0 0L200.0 0.0M0 0L194.0 60.0M0 0L164.0 120.0M0 0L120.0 164.0M0 0L60.0 194.0M0 0L0.0 200.0M44.0 0.0Q34.7 5.3 42.7 13.2M42.7 13.2Q31.5 15.8 36.1 26.4M36.1 26.4Q25.0 25.0 26.4 36.1M26.4 36.1Q15.8 31.5 13.2 42.7M13.2 42.7Q5.3 34.7 0.0 44.0M84.0 0.0Q66.2 10.1 81.5 25.2M81.5 25.2Q60.1 30.2 68.9 50.4M68.9 50.4Q47.7 47.7 50.4 68.9M50.4 68.9Q30.2 60.1 25.2 81.5M25.2 81.5Q10.1 66.2 0.0 84.0M124.0 0.0Q97.7 14.9 120.3 37.2M120.3 37.2Q88.8 44.6 101.7 74.4M101.7 74.4Q70.4 70.4 74.4 101.7M74.4 101.7Q44.6 88.8 37.2 120.3M37.2 120.3Q14.9 97.7 0.0 124.0M164.0 0.0Q129.2 19.7 159.1 49.2M159.1 49.2Q117.4 59.0 134.5 98.4M134.5 98.4Q93.2 93.2 98.4 134.5M98.4 134.5Q59.0 117.4 49.2 159.1M49.2 159.1Q19.7 129.2 0.0 164.0M200.0 0.0Q157.6 24.0 194.0 60.0M194.0 60.0Q143.2 72.0 164.0 120.0M164.0 120.0Q113.6 113.6 120.0 164.0M120.0 164.0Q72.0 143.2 60.0 194.0M60.0 194.0Q24.0 157.6 0.0 200.0%27/%3E%3C/g%3E%3C/svg%3E") top right / 190px 190px no-repeat,
    radial-gradient(900px 520px at 88% -12%, rgba(255,138,31,.20) 0%, rgba(255,138,31,0) 62%),
    radial-gradient(1200px 600px at 12% -10%, #3b1455 0%, var(--mpp-bg) 58%);
}
.mpp-app.mpp-theme-halloween .mpp-btn{ border-color:#a8641f !important; }
.mpp-app.mpp-theme-halloween .mpp-btn.primary,
.mpp-app.mpp-theme-halloween .mpp-scroll-to-canvas-btn,
.mpp-app.mpp-theme-halloween .mpp-ar-cta-btn{
  background-image:linear-gradient(135deg, #ff8a1f, #ffb347) !important; color:#1b0c02 !important;
}
.mpp-app.mpp-theme-halloween .mpp-layer-thumb{ background:#120a16; }
.mpp-app.mpp-theme-halloween .mpp-title::after{ content:" 🎃"; }
.mpp-app.mpp-theme-halloween .mpp-eyebrow::before{
  background:var(--mpp-coral); box-shadow:0 0 10px var(--mpp-coral); animation:mpp-flicker 3.2s ease-in-out infinite;
}
/* Dos murciélagos que cruzan el encabezado de vez en cuando */
.mpp-app.mpp-theme-halloween .mpp-header::before,
.mpp-app.mpp-theme-halloween .mpp-header::after{ background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 50%27%3E%3Cpath fill=%27%23d9c2ee%27 d=%27M50 41C48 32 44 26 38 25C33 24 30 28 24 28C18 28 10 24 0 27C7 31 9 38 9 46C15 40 23 38 29 42C35 46 41 45 45 39L47 47L50 41L53 47L55 39C59 45 65 46 71 42C77 38 85 40 91 46C91 38 93 31 100 27C90 24 82 28 76 28C70 28 67 24 62 25C56 26 52 32 50 41Z%27/%3E%3Cpath fill=%27%23d9c2ee%27 d=%27M45 31L46 21L50 27L54 21L55 31Z%27/%3E%3C/svg%3E") center / contain no-repeat; }
.mpp-app.mpp-theme-halloween .mpp-header::before{ top:6px; right:-50px; width:34px; height:17px; opacity:.55; animation:mpp-bat-a 19s linear infinite; }
.mpp-app.mpp-theme-halloween .mpp-header::after{ top:46px; right:-70px; width:24px; height:12px; opacity:.38; animation:mpp-bat-b 26s linear 7s infinite; }
@keyframes mpp-bat-a{
  0%{ transform:translate3d(0,0,0); } 25%{ transform:translate3d(-26vw,12px,0); } 50%{ transform:translate3d(-54vw,-4px,0); }
  75%{ transform:translate3d(-80vw,10px,0); } 100%{ transform:translate3d(-112vw,0,0); }
}
@keyframes mpp-bat-b{
  0%{ transform:translate3d(0,0,0); } 33%{ transform:translate3d(-38vw,-8px,0); } 66%{ transform:translate3d(-76vw,6px,0); } 100%{ transform:translate3d(-112vw,0,0); }
}
@keyframes mpp-flicker{ 0%,100%{ opacity:1; } 42%{ opacity:.55; } 48%{ opacity:1; } 70%{ opacity:.7; } }

/* =====================================================================
   🎄 NAVIDAD — verde pino, rojo y dorado, con luces y nieve
   ===================================================================== */
.mpp-app.mpp-theme-navidad{
  --mpp-bg:#06120c; --mpp-surface:#0e2016; --mpp-surface-2:#16301f; --mpp-border:#3d8a61;
  --mpp-coral:#f6c945; --mpp-cyan:#d6384a; --mpp-text:#f8f4ea; --mpp-text-dim:#cfe3d5;
  background:
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)) 0 8px / 100% 1px no-repeat,
    radial-gradient(circle at 8px 9px, #ff4455 0 3.4px, rgba(0,0,0,0) 4px) 0 0 / 48px 18px repeat-x,
    radial-gradient(circle at 20px 9px, #ffd34d 0 3.4px, rgba(0,0,0,0) 4px) 0 0 / 48px 18px repeat-x,
    radial-gradient(circle at 32px 9px, #4be08b 0 3.4px, rgba(0,0,0,0) 4px) 0 0 / 48px 18px repeat-x,
    radial-gradient(circle at 44px 9px, #5cc4ff 0 3.4px, rgba(0,0,0,0) 4px) 0 0 / 48px 18px repeat-x,
    radial-gradient(900px 520px at 88% -12%, rgba(214,56,74,.22) 0%, rgba(214,56,74,0) 62%),
    radial-gradient(1200px 600px at 12% -10%, #14553a 0%, var(--mpp-bg) 58%);
}
.mpp-app.mpp-theme-navidad .mpp-btn{ border-color:#4fa079 !important; }
.mpp-app.mpp-theme-navidad .mpp-btn.primary,
.mpp-app.mpp-theme-navidad .mpp-scroll-to-canvas-btn,
.mpp-app.mpp-theme-navidad .mpp-ar-cta-btn{
  background-image:linear-gradient(135deg, #bf1d2d, #dc3045) !important; color:#ffffff !important; border-color:#f6c945 !important;
}
.mpp-app.mpp-theme-navidad .mpp-layer-thumb{ background:#0a1a11; }
.mpp-app.mpp-theme-navidad .mpp-title::after{ content:" 🎄"; }
.mpp-app.mpp-theme-navidad .mpp-eyebrow::before{ background:#f6c945; box-shadow:0 0 10px #f6c945; }
/* Nieve cayendo suave detrás de los textos del encabezado. Los copos están repartidos
   a mano (no en grilla) y el patrón mide 300px de alto: se desplaza exactamente 300px
   por vuelta, así el ciclo se repite sin ningún salto. */
.mpp-app.mpp-theme-navidad .mpp-header::after{
  left:0; right:0; top:-300px; height:calc(100% + 300px);
  background:
    radial-gradient(circle at 155px 167px, rgba(255,255,255,0.79) 0 2.1px, rgba(255,255,255,0) 2.9px) 0 0 / 340px 300px,
    radial-gradient(circle at 173px 175px, rgba(255,255,255,0.80) 0 1.5px, rgba(255,255,255,0) 2.3px) 0 0 / 340px 300px,
    radial-gradient(circle at 212px 233px, rgba(255,255,255,0.74) 0 1.5px, rgba(255,255,255,0) 2.3px) 0 0 / 340px 300px,
    radial-gradient(circle at 37px 238px, rgba(255,255,255,0.66) 0 2.0px, rgba(255,255,255,0) 2.8px) 0 0 / 340px 300px,
    radial-gradient(circle at 326px 282px, rgba(255,255,255,0.83) 0 1.9px, rgba(255,255,255,0) 2.7px) 0 0 / 340px 300px,
    radial-gradient(circle at 59px 12px, rgba(255,255,255,0.67) 0 1.8px, rgba(255,255,255,0) 2.6px) 0 0 / 340px 300px,
    radial-gradient(circle at 70px 77px, rgba(255,255,255,0.79) 0 1.4px, rgba(255,255,255,0) 2.2px) 0 0 / 340px 300px,
    radial-gradient(circle at 151px 247px, rgba(255,255,255,0.84) 0 1.8px, rgba(255,255,255,0) 2.6px) 0 0 / 340px 300px,
    radial-gradient(circle at 115px 97px, rgba(255,255,255,0.53) 0 1.3px, rgba(255,255,255,0) 2.1px) 0 0 / 230px 150px,
    radial-gradient(circle at 221px 141px, rgba(255,255,255,0.66) 0 1.5px, rgba(255,255,255,0) 2.3px) 0 0 / 230px 150px,
    radial-gradient(circle at 75px 39px, rgba(255,255,255,0.47) 0 1.2px, rgba(255,255,255,0) 2.0px) 0 0 / 230px 150px,
    radial-gradient(circle at 172px 62px, rgba(255,255,255,0.57) 0 1.5px, rgba(255,255,255,0) 2.3px) 0 0 / 230px 150px,
    radial-gradient(circle at 213px 122px, rgba(255,255,255,0.51) 0 1.0px, rgba(255,255,255,0) 1.8px) 0 0 / 230px 150px,
    radial-gradient(circle at 148px 47px, rgba(255,255,255,0.45) 0 1.2px, rgba(255,255,255,0) 2.0px) 0 0 / 170px 100px,
    radial-gradient(circle at 19px 61px, rgba(255,255,255,0.42) 0 1.1px, rgba(255,255,255,0) 1.9px) 0 0 / 170px 100px,
    radial-gradient(circle at 21px 36px, rgba(255,255,255,0.54) 0 1.2px, rgba(255,255,255,0) 2.0px) 0 0 / 170px 100px;
  animation:mpp-snow 24s linear infinite;
}
@keyframes mpp-snow{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,300px,0); } }

/* =====================================================================
   Pantallas chicas: adornos más pequeños para no tapar textos
   ===================================================================== */
@media (max-width:600px){
  .mpp-app.mpp-theme-halloween{ background-size:120px 120px, 120px 120px, auto, auto; }
}

/* =====================================================================
   Accesibilidad: sin movimiento si la persona lo tiene desactivado
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .mpp-app.mpp-theme-halloween .mpp-eyebrow::before,
  .mpp-app.mpp-theme-halloween .mpp-header::before,
  .mpp-app.mpp-theme-halloween .mpp-header::after,
  .mpp-app.mpp-theme-navidad .mpp-header::after{ animation:none !important; }
  .mpp-app.mpp-theme-halloween .mpp-header::before{ right:16px; }
  .mpp-app.mpp-theme-halloween .mpp-header::after{ right:60px; }
}