/* =========================================================
   El Click Ganador — Aniversario Bella Piel
   Standalone version (no HubSpot)
   Color base: #1A168B (azul aniversario) + blanco
   ========================================================= */

:root{
  --bp-blue:#1A168B;
  --bp-blue-rgb:26,22,139;
  --bp-blue-dark:#0C0A45;
  --bp-blue-dark-rgb:12,10,69;
  --bp-blue-mid:#241F9E;
  --bp-blue-mid-rgb:36,31,158;
  --bp-blue-light:#322BC4;
  --bp-blue-light-rgb:50,43,196;
  --bp-blue-electric:#3AA8FF;
  --bp-blue-electric-rgb:58,168,255;
  --bp-blue-pale:#B9C9FF;
  --bp-black:#03030F;
  --bp-black-rgb:3,3,15;
  --bp-ice:#EEF1FD;
  --bp-danger:#D33A5C;
  --bp-success:#10B981;
  --bp-text:#14123F;
  --bp-muted:#666B93;
  --bp-border:#D9DEFA;
  --bp-radius:14px;
  --bp-radius-lg:22px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--bp-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
@supports (-webkit-touch-callout: none){ .lm-screen{ min-height:-webkit-fill-available; } }

.lm-body{
  min-height:100vh; min-height:100dvh;
  /* Fondo: imagen fija a pantalla completa con velo azul aniversario.
     - cover     → cubre todo el viewport (puede recortar bordes)
     - center    → centra el punto focal de la imagen
     - fixed     → no se mueve al hacer scroll (efecto parallax)
     - no-repeat → no se repite si la imagen es más pequeña
     - bg-color  → fallback azul mientras carga la imagen */
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(var(--bp-blue-electric-rgb),.22) 0%, transparent 60%),
    linear-gradient(135deg, rgba(var(--bp-black-rgb),.75) 0%, rgba(var(--bp-blue-dark-rgb),.55) 45%, rgba(var(--bp-black-rgb),.7) 100%),
    url('/images/fondo.png') center center / cover no-repeat fixed,
    var(--bp-black);
  position:relative;
}

/* En móvil background-attachment:fixed no funciona bien en iOS Safari */
@media (max-width:768px){
  .lm-body{
    background:
      radial-gradient(ellipse 90% 70% at 50% 40%, rgba(var(--bp-blue-electric-rgb),.18) 0%, transparent 58%),
      linear-gradient(135deg, rgba(var(--bp-black-rgb),.82) 0%, rgba(var(--bp-blue-dark-rgb),.6) 45%, rgba(var(--bp-black-rgb),.8) 100%),
      url('/images/fondo.png') center center / cover no-repeat,
      var(--bp-black);
  }
}
.lm-app{ position:relative; min-height:100vh; min-height:100dvh; }

/* ===== STATE MACHINE ===== */
.lm-screen{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transform:translateY(20px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s;
  overflow-y:auto;
}
.lm-screen--form{ align-items:flex-start; padding:20px 20px 40px; }
/* El arcade también puede ser alto — usar flex-start para evitar corte por overflow */
.lm-screen--arcade{ align-items:flex-start; padding:20px 16px 32px; }
/* El resultado va perfectamente centrado en pantalla */
.lm-screen--result{
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}
.lm-body[data-state="hero"]   .lm-screen--hero,
.lm-body[data-state="form"]   .lm-screen--form,
.lm-body[data-state="arcade"] .lm-screen--arcade,
.lm-body[data-state="result"] .lm-screen--result,
.lm-body[data-state="closed"] .lm-screen--closed{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}

/* ===== HERO ===== */
.lm-screen--hero{ padding:24px 20px; overflow:hidden; }
.lm-hero__bg{
  position:absolute; inset:0;
  background:
    /* halo eléctrico detrás del botón (centro-abajo del grupo de imágenes) */
    radial-gradient(circle at 50% 66%, rgba(var(--bp-blue-electric-rgb),.6) 0%, rgba(var(--bp-blue-electric-rgb),.2) 18%, transparent 38%),
    /* bokeh suaves dispersos, como en la referencia */
    radial-gradient(circle at 10% 85%, rgba(var(--bp-blue-electric-rgb),.18) 0%, transparent 50%),
    radial-gradient(circle at 90% 88%, rgba(var(--bp-blue-electric-rgb),.14) 0%, transparent 46%),
    radial-gradient(circle at 18% 12%, rgba(var(--bp-blue-light-rgb),.10) 0%, transparent 40%),
    radial-gradient(circle at 82% 10%, rgba(var(--bp-blue-light-rgb),.08) 0%, transparent 40%),
    /* viñeta: negro casi puro en las esquinas, azul oscuro hacia el centro */
    radial-gradient(ellipse 120% 90% at 50% 55%, transparent 0%, rgba(var(--bp-blue-dark-rgb),.55) 48%, rgba(var(--bp-black-rgb),.92) 92%);
  pointer-events:none;
  overflow:hidden;
}
/* Rayos afilados girando muy despacio desde el botón, como el resplandor del banner */
.lm-hero__bg::before{
  content:'';
  position:absolute;
  left:50%; top:66%;
  width:220vmax; height:220vmax;
  margin:-110vmax 0 0 -110vmax;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.14) 0deg 1deg,
    transparent 1deg 8deg,
    rgba(var(--bp-blue-electric-rgb),.16) 8deg 9.5deg,
    transparent 9.5deg 17deg);
  mix-blend-mode:screen;
  animation:lm-ray-rotate 50s linear infinite;
}
@keyframes lm-ray-rotate{ to{ transform:rotate(360deg); } }
.lm-hero__stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff 50%, transparent 50%),
    radial-gradient(2px 2px at 60% 70%, var(--bp-blue-electric) 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 15%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 85%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 55%, var(--bp-blue-electric) 50%, transparent 50%),
    radial-gradient(2px 2px at 10% 75%, #fff 50%, transparent 50%),
    /* pequeños destellos de confetti, fieles a la referencia (magenta/cian) */
    radial-gradient(1.5px 1.5px at 30% 55%, #ff4dd8 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 25%, #4dfff2 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 40%, #ff4dd8 50%, transparent 50%),
    radial-gradient(1px 1px at 15% 55%, #4dfff2 50%, transparent 50%);
  background-size:300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
                  420px 420px, 380px 380px, 460px 460px, 340px 340px;
  opacity:.7;
  animation:lm-twinkle 4s ease-in-out infinite; pointer-events:none;
}
@keyframes lm-twinkle{ 0%,100%{opacity:.4} 50%{opacity:.9} }

.lm-hero__inner{
  position:relative; max-width:880px; margin:0 auto; text-align:center; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; max-height:100dvh;
}
.lm-hero__title{ margin:0; font-weight:900; line-height:1; width:100%; }
.lm-hero__title--img{ display:flex; justify-content:center; align-items:center; width:100%; }

/* Fila con producto1 | título central | producto2 (los 3 mismo tamaño) */
.lm-hero__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 1.5vw, 24px);
  width:100%;
  max-width:1700px;
}

/* Las 3 imágenes del hero comparten el MISMO tamaño */
.lm-hero__title-img,
.lm-hero__product{
  width:clamp(240px, 30vw, 520px);
  max-width:100%;
  max-height:70dvh;
  height:auto;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}

/* Envuelve la imagen central (mascotas + botón) para anclar el halo pulsante
   justo donde está dibujado el botón "¡CLICK!" dentro de esa imagen. */
.lm-hero__click-glow{
  position:relative;
  display:inline-flex;
  flex-shrink:0;
}
.lm-hero__click-glow::after{
  content:'';
  position:absolute;
  left:50%; top:78%;
  width:42%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(var(--bp-blue-electric-rgb),.45) 35%, transparent 72%);
  z-index:-1;
  animation:lm-hero-glow-pulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lm-hero-glow-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(.85); opacity:.55; }
  50%{ transform:translate(-50%,-50%) scale(1.15); opacity:1; }
}

.lm-hero__title-img{
  filter:drop-shadow(0 16px 38px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(var(--bp-blue-electric-rgb),.35));
  animation:lm-title-pop .8s cubic-bezier(.2,1.2,.4,1) both;
}

/* Productos laterales: misma dimensión, sombra un pelín más suave */
.lm-hero__product{
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));
  animation:lm-product-pop .9s cubic-bezier(.2,1.2,.4,1) both;
}
.lm-hero__product--left  { animation-delay:.15s; }
.lm-hero__product--right { animation-delay:.30s; }

@keyframes lm-title-pop{
  0%  { transform:scale(.85); opacity:0; }
  100%{ transform:scale(1);   opacity:1; }
}
@keyframes lm-product-pop{
  0%  { transform:translateY(20px) scale(.8); opacity:0; }
  100%{ transform:translateY(0)    scale(1);  opacity:1; }
}

.lm-hero__subtitle{
  font-size:clamp(14px,1.8vw,18px); max-width:580px; margin:0 auto;
  line-height:1.5; opacity:.95;
}
.lm-hero__subtitle strong{ color:var(--bp-blue-electric); text-shadow:0 0 12px rgba(var(--bp-blue-electric-rgb),.55); }

/* ===== BOTONES ===== */
.lm-btn{
  display:inline-block; font-family:inherit; font-weight:800;
  text-transform:uppercase; letter-spacing:1px; border:none;
  cursor:pointer; border-radius:999px;
  transition:transform .2s, box-shadow .2s, background .2s;
  text-decoration:none;
}

.lm-btn--primary{
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff; font-size:19px; padding:20px 56px;
  letter-spacing:1.5px;
  background:linear-gradient(135deg,var(--bp-blue-mid) 0%,var(--bp-blue) 28%,var(--bp-blue-electric) 52%,var(--bp-blue) 76%,var(--bp-blue-mid) 100%);
  background-size:260% 260%;
  text-shadow:0 1px 2px rgba(0,0,0,.4), 0 0 16px rgba(255,255,255,.35);
  box-shadow:
    0 0 0 3px rgba(var(--bp-blue-electric-rgb),.35),
    0 10px 28px rgba(var(--bp-blue-dark-rgb),.55),
    0 0 60px rgba(var(--bp-blue-electric-rgb),.45),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -4px 8px rgba(var(--bp-blue-dark-rgb),.5);
  animation:lm-blue-shift 3.6s ease-in-out infinite, lm-glow-pulse 2.4s ease-in-out infinite;
}
.lm-btn--primary::after{
  content:''; position:absolute; inset:5px;
  border:1.5px dashed rgba(255,255,255,.55); border-radius:999px;
  pointer-events:none; z-index:1;
  animation:lm-ring-ping 2.4s ease-out infinite;
}
.lm-btn--primary::before{
  content:''; position:absolute; top:-50%; left:-80%; width:55%; height:200%;
  background:linear-gradient(100deg,transparent 0%,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%,transparent 100%);
  transform:skewX(-22deg); mix-blend-mode:screen;
  pointer-events:none; z-index:2;
  animation:lm-shine-sweep 2.9s ease-in-out infinite;
}
.lm-btn__txt{ position:relative; z-index:3; display:inline-block; }
.lm-btn__sparkle{
  position:relative; z-index:3; display:inline-block;
  color:#fff; font-size:14px; margin:0 10px 0 -2px;
  text-shadow:0 0 8px rgba(255,255,255,.95),0 0 16px rgba(var(--bp-blue-electric-rgb),.9);
  animation:lm-twinkle-star 1.6s ease-in-out infinite;
}
.lm-btn__sparkle--r{ margin:0 -2px 0 10px; animation-delay:.8s; }
.lm-btn--primary:hover{
  transform:translateY(-3px) scale(1.06);
  animation-play-state:paused;
  background:linear-gradient(135deg,var(--bp-blue-light) 0%,var(--bp-blue-electric) 45%,var(--bp-blue) 100%);
  box-shadow:
    0 0 0 6px rgba(var(--bp-blue-electric-rgb),.45),
    0 20px 50px rgba(var(--bp-blue-dark-rgb),.85),
    0 0 120px rgba(var(--bp-blue-electric-rgb),.85),
    inset 0 3px 0 rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(var(--bp-blue-dark-rgb),.5);
}
.lm-btn--primary:active{ transform:translateY(0) scale(1.02); }

@keyframes lm-shine-sweep{ 0%{left:-80%} 55%{left:130%} 100%{left:130%} }
@keyframes lm-blue-shift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes lm-glow-pulse{
  0%,100%{ transform:scale(1) translateY(0); }
  50%{ transform:scale(1.045) translateY(-2px); }
}
@keyframes lm-ring-ping{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.5) inset; opacity:1; }
  70%{ box-shadow:0 0 0 8px rgba(255,255,255,0) inset; opacity:.4; }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) inset; opacity:1; }
}
@keyframes lm-twinkle-star{
  0%,100%{ transform:scale(1) rotate(0); opacity:.9; }
  50%{ transform:scale(1.45) rotate(180deg); opacity:1; }
}

.lm-btn--ghost{
  background:transparent; color:var(--bp-muted); font-size:14px; padding:14px 24px;
  border:1.5px solid var(--bp-border);
}
.lm-btn--ghost:hover{ background:var(--bp-ice); border-color:rgba(var(--bp-blue-electric-rgb),.4); color:var(--bp-blue); }

/* ===== FORM CARD ANIVERSARIO ===== */
.lm-form-card{
  position:relative; width:100%; max-width:660px;
  background:radial-gradient(ellipse at top, rgba(var(--bp-blue-electric-rgb),.10) 0%, transparent 55%),
             linear-gradient(180deg,#ffffff 0%,var(--bp-ice) 100%);
  border-radius:var(--bp-radius-lg);
  box-shadow:
    0 30px 80px rgba(var(--bp-blue-dark-rgb),.55),
    0 0 0 4px rgba(var(--bp-blue-electric-rgb),.32),
    0 0 0 8px rgba(var(--bp-blue-rgb),.20),
    0 0 0 12px rgba(var(--bp-blue-electric-rgb),.10);
  padding:74px 36px 36px; margin:20px auto;
  overflow:hidden; isolation:isolate;
}
.lm-form__flag{
  position:absolute; top:0; left:0; right:0; height:8px;
  background:linear-gradient(90deg,var(--bp-blue) 0%,var(--bp-blue-electric) 50%,var(--bp-blue) 100%);
  background-size:200% 100%;
  z-index:1; box-shadow:0 2px 10px rgba(var(--bp-blue-electric-rgb),.5);
  animation:lm-flag-shine 4s ease-in-out infinite;
}
@keyframes lm-flag-shine{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.lm-form__ball{
  position:absolute; font-size:140px; line-height:1; opacity:.06;
  pointer-events:none; z-index:0; filter:saturate(0) brightness(0) invert(1);
  animation:lm-ball-spin 14s linear infinite;
}
.lm-form__ball--tl{ top:24px; left:-30px; }
.lm-form__ball--br{ bottom:-30px; right:-30px; transform:scale(1.2); animation-direction:reverse; }
@keyframes lm-ball-spin{ to{ transform:rotate(360deg); } }

.lm-form__badge{
  position:absolute; top:30px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--bp-blue) 0%,var(--bp-blue-electric) 50%,var(--bp-blue) 100%);
  color:#fff; font-weight:900; font-size:11px; letter-spacing:2px;
  padding:6px 18px; border-radius:999px; border:2px solid rgba(255,255,255,.65);
  box-shadow:0 4px 16px rgba(var(--bp-blue-electric-rgb),.5), inset 0 1px 0 rgba(255,255,255,.3);
  z-index:2; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.lm-form__star{
  color:#fff; text-shadow:0 0 8px rgba(var(--bp-blue-electric-rgb),.95);
  animation:lm-star-pulse 1.6s ease-in-out infinite; display:inline-block;
}
.lm-form__star:last-of-type{ animation-delay:.8s; }
@keyframes lm-star-pulse{ 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.25) rotate(180deg)} }

.lm-form__title{
  position:relative; margin:0 0 4px; text-align:center;
  font-size:clamp(34px,6.5vw,52px); font-weight:900;
  text-transform:uppercase; letter-spacing:1.5px; line-height:1;
  color:#fff; -webkit-text-stroke:1.5px var(--bp-blue);
  text-shadow:2px 2px 0 var(--bp-blue-mid),4px 4px 0 var(--bp-blue-dark),0 0 22px rgba(var(--bp-blue-electric-rgb),.55),6px 6px 12px rgba(0,0,0,.35);
  z-index:2;
}
.lm-form__title::after{
  content:''; display:block; width:80px; height:4px; margin:14px auto 0;
  background:linear-gradient(90deg,var(--bp-blue) 0%,var(--bp-blue-electric) 50%,var(--bp-blue) 100%);
  border-radius:999px; box-shadow:0 2px 10px rgba(var(--bp-blue-electric-rgb),.45);
}
.lm-form__hint{
  position:relative; margin:0 0 26px;
  color:var(--bp-blue); font-size:14px; font-weight:600;
  text-align:center; z-index:2;
}
.lm-form__hint strong{ color:var(--bp-blue); font-weight:900; letter-spacing:1px; }

.lm-grid-2{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lm-field{ position:relative; display:block; margin-bottom:14px; z-index:2; }
.lm-field--full{ margin-bottom:14px; }
.lm-grid-2 .lm-field{ margin-bottom:0; }
.lm-field > span{
  display:block; font-size:12px; font-weight:900;
  color:var(--bp-blue); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:1.2px;
}
.lm-field > span::before{ content:'⚡ '; color:var(--bp-blue-electric); font-size:11px; }
.lm-field input, .lm-field select{
  width:100%; padding:14px 16px;
  border:2px solid rgba(var(--bp-blue-rgb),.18); border-radius:12px;
  font-size:15px; font-weight:600;
  background:#fff; color:var(--bp-blue-dark);
  font-family:inherit;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.04), 0 1px 0 rgba(255,255,255,.6);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.lm-field input::placeholder{ color:rgba(var(--bp-blue-rgb),.35); font-weight:500; }
.lm-field select:required:invalid{ color:rgba(var(--bp-blue-rgb),.45); font-weight:500; }
.lm-field select option{ color:var(--bp-blue-dark); font-weight:600; }
.lm-field select option[value=""]{ color:rgba(var(--bp-blue-rgb),.45); }
.lm-field input:hover, .lm-field select:hover{ border-color:rgba(var(--bp-blue-electric-rgb),.55); }
.lm-field input:focus, .lm-field select:focus{
  outline:none; border-color:var(--bp-blue-electric);
  box-shadow:0 0 0 4px rgba(var(--bp-blue-electric-rgb),.22),0 0 0 8px rgba(var(--bp-blue-rgb),.10),inset 0 2px 4px rgba(0,0,0,.04);
  transform:translateY(-1px);
}
.lm-field input:user-invalid:not(:focus),
.lm-field select:user-invalid:not(:focus){
  border-color:var(--bp-danger); box-shadow:0 0 0 3px rgba(211,58,92,.15);
}
.lm-field small{ display:block; font-size:12px; color:var(--bp-blue); opacity:.7; margin-top:6px; font-weight:500; }

/* FILE UPLOAD */
.lm-field--file{ position:relative; z-index:2; }
.lm-file{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  padding:22px 16px;
  border:2.5px dashed rgba(var(--bp-blue-rgb),.35); border-radius:14px;
  background:linear-gradient(180deg,#f6f8ff 0%,#e9edff 100%);
  cursor:pointer; text-align:center;
  transition:border-color .2s, transform .2s, box-shadow .2s, background .2s;
}
.lm-file:hover{
  border-color:var(--bp-blue-electric);
  background:linear-gradient(180deg,#eef4ff 0%,#dbe6ff 100%);
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(var(--bp-blue-electric-rgb),.25);
}
.lm-file.is-drag{ border-color:var(--bp-blue-electric); border-style:solid; background:linear-gradient(180deg,#e3edff 0%,#c9dcff 100%); }
.lm-file.is-ready{ border-color:var(--bp-success); border-style:solid; background:linear-gradient(180deg,#ECFDF5 0%,#D1FAE5 100%); }
.lm-file input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
.lm-file__icon{ font-size:30px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.lm-file__txt{ font-size:13px; font-weight:700; color:var(--bp-blue); text-transform:uppercase; letter-spacing:.8px; }
.lm-file__pill{
  background:linear-gradient(135deg,var(--bp-blue) 0%,var(--bp-blue-mid) 100%);
  color:#fff; font-size:11px; font-weight:900; letter-spacing:1.2px;
  padding:6px 16px; border-radius:999px; text-transform:uppercase;
  border:1.5px solid rgba(255,255,255,.7); box-shadow:0 3px 10px rgba(var(--bp-blue-rgb),.4);
}
.lm-file.is-ready .lm-file__pill{ background:linear-gradient(135deg,#047857 0%,#10B981 100%); border-color:rgba(255,255,255,.7); }

/* CHECKBOX ANIVERSARIO */
.lm-check{
  position:relative; z-index:2; display:flex; align-items:flex-start;
  gap:12px; margin:18px 0 4px;
  font-size:13px; line-height:1.5; cursor:pointer;
  padding:14px 16px; border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%,var(--bp-ice) 100%);
  border:2px solid rgba(var(--bp-blue-rgb),.18);
  transition:border-color .2s, background .2s, box-shadow .2s;
  user-select:none;
}
.lm-check:hover{ border-color:rgba(var(--bp-blue-electric-rgb),.6); box-shadow:0 4px 12px rgba(var(--bp-blue-electric-rgb),.18); }
.lm-check input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.lm-check__box{
  flex-shrink:0; width:22px; height:22px;
  border:2.5px solid var(--bp-blue); border-radius:6px; background:#fff;
  position:relative; transition:background .2s, border-color .2s, transform .2s;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.05);
}
.lm-check__box::after{
  content:''; position:absolute; left:5px; top:1px;
  width:6px; height:12px; border:solid #fff; border-width:0 3px 3px 0;
  transform:rotate(45deg) scale(0); transition:transform .2s cubic-bezier(.2,1.4,.4,1);
}
.lm-check input:checked ~ .lm-check__box{
  background:linear-gradient(135deg,var(--bp-blue) 0%,var(--bp-blue-electric) 100%);
  border-color:var(--bp-blue-electric); box-shadow:0 0 0 3px rgba(var(--bp-blue-electric-rgb),.35);
}
.lm-check input:checked ~ .lm-check__box::after{ transform:rotate(45deg) scale(1); }
.lm-check__txt{ color:var(--bp-blue); font-weight:600; }
.lm-check__txt a{ color:var(--bp-blue); font-weight:800; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; }
.lm-check__txt a:hover{ color:var(--bp-blue-electric); }
.lm-check__star{ color:var(--bp-danger); font-weight:900; margin-left:2px; }
.lm-check.is-invalid{
  border-color:var(--bp-danger); background:#FCEEF1; box-shadow:0 0 0 3px rgba(211,58,92,.18);
  animation:lm-shake-h .35s ease-in-out 1;
}
@keyframes lm-shake-h{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* PLAY BUTTON */
.lm-btn--play{
  position:relative;
  background:linear-gradient(135deg,var(--bp-blue-mid) 0%,var(--bp-blue-electric) 50%,var(--bp-blue) 100%);
  background-size:200% 200%;
  color:#fff; font-size:24px; padding:22px 60px; letter-spacing:2px;
  box-shadow:
    0 0 0 3px #fff, 0 0 0 6px var(--bp-blue-electric),
    0 12px 32px rgba(var(--bp-blue-rgb),.55), 0 0 60px rgba(var(--bp-blue-electric-rgb),.5),
    inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 8px rgba(0,0,0,.3);
  text-shadow:0 2px 4px rgba(0,0,0,.5), 0 0 18px rgba(255,255,255,.5);
  min-width:240px; overflow:hidden;
  animation:lm-play-pulse 1.8s ease-in-out infinite;
}
.lm-btn--play::before{
  content:''; position:absolute; inset:5px; border-radius:999px;
  border:2px dashed rgba(255,255,255,.55); pointer-events:none;
}
@keyframes lm-play-pulse{
  0%,100%{ transform:scale(1); background-position:0% 50%; }
  50%{ transform:scale(1.025); background-position:100% 50%; }
}
.lm-btn--play:hover:not(:disabled){
  animation-play-state:paused; transform:translateY(-4px) scale(1.05);
}
.lm-btn--play:disabled{ opacity:.6; cursor:not-allowed; animation:none; }
.lm-btn__loader{
  display:none; position:absolute; inset:0; margin:auto;
  width:28px; height:28px;
  border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%;
  animation:lm-spin .8s linear infinite;
}
.lm-btn--play.is-loading .lm-btn__label{ visibility:hidden; }
.lm-btn--play.is-loading .lm-btn__loader{ display:block; }
@keyframes lm-spin{ to{ transform:rotate(360deg); } }

.lm-form__actions{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:18px; position:relative; z-index:2; }
.lm-error{ margin:14px 0 0; color:var(--bp-danger); font-size:14px; font-weight:700; min-height:20px; text-align:center; position:relative; z-index:2; }

/* ============================================================
   ARCADE ÉPICO — Aniversario Bella Piel
   ============================================================ */
/* (los estilos de .lm-screen--arcade se definen arriba, junto con los demás) */

.lm-arcade-wrap{
  position:relative;
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding:36px 26px 24px;
  background:
    /* Glow central azul eléctrico */
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(var(--bp-blue-electric-rgb),.22) 0%, transparent 65%),
    /* Gradiente azul Aniversario */
    linear-gradient(180deg, var(--bp-blue-light) 0%, var(--bp-blue-mid) 50%, var(--bp-blue-dark) 100%);
  border-radius:32px;
  border:3px solid rgba(255,255,255,.35);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    inset 0 0 80px rgba(var(--bp-blue-rgb),.45),
    0 0 50px rgba(var(--bp-blue-electric-rgb),.3);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

/* Confetti scattered de fondo (decorativo) */
.lm-arcade__confetti{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle 5px at 10% 8%,  #fff 35%, transparent 60%),
    radial-gradient(circle 4px at 88% 12%, var(--bp-blue-electric) 35%, transparent 60%),
    radial-gradient(circle 6px at 6% 32%,  #fff 35%, transparent 60%),
    radial-gradient(circle 4px at 94% 28%, #fff 35%, transparent 60%),
    radial-gradient(circle 5px at 50% 5%,  var(--bp-blue-electric) 35%, transparent 60%),
    radial-gradient(circle 5px at 92% 52%, #fff 35%, transparent 60%),
    radial-gradient(circle 4px at 4% 55%,  var(--bp-blue-electric) 35%, transparent 60%),
    radial-gradient(circle 5px at 90% 88%, #fff 35%, transparent 60%),
    radial-gradient(circle 4px at 6% 92%,  var(--bp-blue-electric) 35%, transparent 60%),
    radial-gradient(circle 3px at 60% 95%, #fff 35%, transparent 60%),
    radial-gradient(circle 4px at 30% 72%, var(--bp-blue-pale) 35%, transparent 60%);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}

/* Título épico — 2 líneas con efecto 3D */
.lm-arcade__title{
  position:relative;
  z-index:2;
  margin:0 0 18px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.5px;
  line-height:.92;
}
.lm-arcade__title-pre{
  display:block;
  font-size:clamp(32px, 7vw, 56px);
  color:#fff;
  letter-spacing:2px;
  text-shadow:
    -1.5px -1.5px 0 var(--bp-blue-dark),
    1.5px -1.5px 0 var(--bp-blue-dark),
    -1.5px 1.5px 0 var(--bp-blue-dark),
    1.5px 1.5px 0 var(--bp-blue-dark),
    3px 3px 0 var(--bp-blue-electric),
    5px 5px 0 var(--bp-blue-dark),
    7px 7px 14px rgba(0,0,0,.5);
  margin-bottom:6px;
}
.lm-arcade__title-big{
  display:block;
  font-size:clamp(48px, 12vw, 96px);
  color:#fff;
  letter-spacing:1.5px;
  text-shadow:
    -2px -2px 0 var(--bp-blue-dark),
    2px -2px 0 var(--bp-blue-dark),
    -2px 2px 0 var(--bp-blue-dark),
    2px 2px 0 var(--bp-blue-dark),
    4px 4px 0 var(--bp-blue-electric),
    7px 7px 0 var(--bp-blue-dark),
    10px 10px 20px rgba(0,0,0,.5);
  animation:lm-text-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes lm-text-glow-pulse{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(var(--bp-blue-electric-rgb),0)); }
  50%{ filter:drop-shadow(0 0 22px rgba(var(--bp-blue-electric-rgb),.75)); }
}

/* Subtítulo dentro de pill */
.lm-arcade__subtitle{
  position:relative;
  z-index:2;
  display:inline-block;
  max-width:90%;
  margin:0 auto 18px;
  background:rgba(var(--bp-blue-dark-rgb),.7);
  border:2px solid rgba(255,255,255,.3);
  border-radius:18px;
  padding:12px 22px;
  color:#fff;
  font-size:clamp(12px, 2.3vw, 16px);
  font-weight:700;
  letter-spacing:1px;
  line-height:1.4;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  opacity:1;
}
.lm-arcade__subtitle strong{
  color:var(--bp-blue-electric);
  font-weight:900;
  text-shadow:0 0 10px rgba(var(--bp-blue-electric-rgb),.6);
}

/* Rayos eliminados — distraen y se ven duros al rotar */
.lm-arcade__rays{ display:none !important; }

/* GIF del botón dentro del card — más compacto para que todo quepa */
.lm-arcade-wrap .lm-video-arcade{
  position:relative;
  z-index:2;
  margin:8px 0;
  width:min(380px, 78%);   /* más pequeño que antes (era 540/92vw) */
  max-height:none;          /* dejamos que ocupe lo que necesite */
}

/* 3 feature pills (premios, ganar, ganador) */
.lm-arcade__features{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:8px;
  width:100%;
  margin-top:18px;
  margin-bottom:14px;
}
.lm-arcade__feature{
  flex:1;
  background:rgba(var(--bp-blue-dark-rgb),.7);
  border:2px solid rgba(255,255,255,.28);
  border-radius:18px;
  padding:14px 8px 10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.lm-arcade__feature-icon{
  font-size:30px;
  line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.lm-arcade__feature-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.lm-arcade__feature-text strong{
  color:var(--bp-blue-electric);
  font-weight:900;
  font-size:11.5px;
}

/* Lock badge al fondo */
.lm-arcade__lock{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(var(--bp-blue-dark-rgb),.75);
  border:2px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:10px 20px;
  margin-top:6px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  text-align:left;
  backdrop-filter:blur(6px);
  max-width:100%;
}
.lm-arcade__lock-icon{
  font-size:18px;
  line-height:1;
  color:var(--bp-blue-electric);
  flex-shrink:0;
}
.lm-arcade__lock strong{
  color:var(--bp-blue-electric);
  font-weight:800;
}

/* Responsive móvil — compactamos todo para que quepa sin scroll grande */
@media (max-width:640px){
  .lm-screen--arcade{ padding:12px 12px 24px; }
  .lm-arcade-wrap{
    padding:22px 14px 16px;
    border-radius:20px;
    max-width:100%;
  }
  .lm-arcade__title{ margin-bottom:12px; }
  .lm-arcade__title-pre{
    font-size:26px;
    letter-spacing:1.5px;
    text-shadow:
      -1px -1px 0 var(--bp-blue-dark), 1px -1px 0 var(--bp-blue-dark),
      -1px 1px 0 var(--bp-blue-dark),  1px 1px 0 var(--bp-blue-dark),
      2px 2px 0 var(--bp-blue-electric),
      4px 4px 0 var(--bp-blue-dark),
      5px 5px 8px rgba(0,0,0,.5);
    margin-bottom:4px;
  }
  .lm-arcade__title-big{
    font-size:46px; letter-spacing:1px;
    text-shadow:
      -1.5px -1.5px 0 var(--bp-blue-dark), 1.5px -1.5px 0 var(--bp-blue-dark),
      -1.5px 1.5px 0 var(--bp-blue-dark),  1.5px 1.5px 0 var(--bp-blue-dark),
      2.5px 2.5px 0 var(--bp-blue-electric),
      4.5px 4.5px 0 var(--bp-blue-dark),
      6px 6px 10px rgba(0,0,0,.5);
  }
  .lm-arcade__subtitle{
    font-size:11px;
    padding:8px 14px;
    letter-spacing:.6px;
    border-radius:14px;
    margin-bottom:10px;
  }
  .lm-arcade-wrap .lm-video-arcade{
    width:min(280px, 70%);
    margin:4px 0;
  }
  .lm-arcade__features{ gap:5px; margin-top:10px; margin-bottom:8px; }
  .lm-arcade__feature{ padding:8px 4px 6px; border-radius:12px; gap:3px; border-width:1.5px; }
  .lm-arcade__feature-icon{ font-size:22px; }
  .lm-arcade__feature-text{ font-size:9px; }
  .lm-arcade__feature-text strong{ font-size:9.5px; }
  .lm-arcade__lock{
    font-size:10.5px; padding:7px 12px; gap:7px;
    border-width:1.5px;
  }
  .lm-arcade__lock-icon{ font-size:14px; }
}

/* Pantallas muy pequeñas (iPhone SE, Android baratos) */
@media (max-width:380px){
  .lm-arcade__title-pre{ font-size:22px; }
  .lm-arcade__title-big{ font-size:38px; }
  .lm-arcade__subtitle{ font-size:10px; padding:7px 12px; }
  .lm-arcade-wrap .lm-video-arcade{ width:min(240px, 70%); }
  .lm-arcade__feature-icon{ font-size:20px; }
  .lm-arcade__feature-text{ font-size:8.5px; }
  .lm-arcade__lock{ font-size:9.5px; }
}

.lm-video-arcade{
  position:relative;
  width:min(540px,92vw);
  aspect-ratio:1/1;
  max-height:72dvh;
  overflow:visible;
  background:transparent;
  isolation:isolate;
  /* Sombra sutil bajo el botón (efecto "flotando" sin caja) */
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
/* Anillo de energía pulsando detrás del botón — evoca el resplandor del banner */
.lm-video-arcade::before{
  content:'';
  position:absolute; inset:-8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--bp-blue-electric-rgb),.4) 0%, rgba(var(--bp-blue-electric-rgb),0) 68%);
  z-index:-1;
  animation:lm-arcade-ring-pulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lm-arcade-ring-pulse{
  0%,100%{ transform:scale(.88); opacity:.55; }
  50%{ transform:scale(1.06); opacity:1; }
}
.lm-video-fallback{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none; user-select:none;
  transition:opacity .25s ease;
}
/* El GIF estático (fallback) solo se oculta cuando se muestra ganador o perdedor.
   En 'loading' (entre el click y la respuesta del backend) sigue visible. */
.lm-video-arcade[data-state="win"]  .lm-video-fallback,
.lm-video-arcade[data-state="lose"] .lm-video-fallback{ opacity:0; }
.lm-video-action{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:2; opacity:0; visibility:hidden;
  pointer-events:none; transition:opacity .25s ease; user-select:none;
}
.lm-video-action.is-active{ opacity:1; visibility:visible; }
.lm-video__hit{
  position:absolute; inset:0; width:100%; height:100%;
  background:transparent; border:none; cursor:pointer;
  z-index:10; padding:0; margin:0; opacity:1;
  transition:opacity .25s ease; -webkit-tap-highlight-color:transparent;
}
.lm-body:not([data-state="arcade"]) .lm-video__hit{ pointer-events:none !important; }
/* Bloquear clicks mientras se procesa la jugada (no oculta el GIF estático) */
.lm-video-arcade[data-state="loading"] .lm-video__hit{ pointer-events:none; cursor:wait; }
/* Cuando ya se mostró ganador/perdedor, ocultamos también el área clickeable */
.lm-video-arcade[data-state="win"]  .lm-video__hit,
.lm-video-arcade[data-state="lose"] .lm-video__hit{ pointer-events:none; opacity:0; }
/* Pill "¡TÓCAME!" oculto — el GIF ya muestra el botón "OPRIME" */
.lm-video__hint{ display:none !important; }

/* Cursor pointer sobre el GIF */
.lm-video__hit{ cursor:pointer; }

/* El GIF tiene su propia animación interna, no le agregamos pulso del contenedor */
.lm-video-arcade{ animation:none !important; }

/* Hover: solo intensifica el resplandor azul, sin escalar */
.lm-video-arcade[data-state="idle"]:hover{
  filter:drop-shadow(0 28px 50px rgba(var(--bp-blue-electric-rgb),.55));
}

/* ===== RESULT ===== */
.lm-result{
  width:100%; max-width:560px; background:#fff;
  border-radius:var(--bp-radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  padding:48px 32px; text-align:center; position:relative; overflow:hidden;
  /* margin:auto centra la tarjeta cuando cabe en pantalla, pero cuando es más
     alta que el viewport (móvil) se alinea arriba y permite hacer scroll completo
     sin que se corte la imagen superior. */
  margin:auto;
}
/* ============================================================
   "GANADOR" — Diseño épico Aniversario Bella Piel
   Tarjeta azul corporativo + halo eléctrico + ticket de cupón
   ============================================================ */
.lm-result.is-win{
  position:relative;
  overflow:hidden;
  padding:40px 36px 38px;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(var(--bp-blue-electric-rgb),.28) 0%, transparent 60%),
    repeating-conic-gradient(from 215deg at 50% 0%,
      rgba(255,255,255,.06) 0deg 4deg,
      transparent 4deg 11deg),
    linear-gradient(155deg, var(--bp-blue-light) 0%, var(--bp-blue-mid) 45%, var(--bp-blue-dark) 100%);
  border:3px solid rgba(255,255,255,.55);
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 80px rgba(var(--bp-blue-rgb),.45),
    0 0 70px rgba(var(--bp-blue-electric-rgb),.35);
}

/* Confetti blanco/azul disperso de fondo */
.lm-result.is-win .lm-result__confetti{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle 5px at 8% 16%,  #fff 30%, transparent 60%),
    radial-gradient(circle 4px at 92% 20%, #fff 30%, transparent 60%),
    radial-gradient(circle 3px at 14% 70%, #fff 30%, transparent 60%),
    radial-gradient(circle 5px at 88% 66%, var(--bp-blue-electric) 30%, transparent 60%),
    radial-gradient(circle 4px at 50% 5%,  #fff 30%, transparent 60%),
    radial-gradient(circle 3px at 24% 50%, var(--bp-blue-electric) 30%, transparent 60%),
    radial-gradient(circle 5px at 78% 52%, #fff 30%, transparent 60%),
    radial-gradient(circle 4px at 6% 90%,  var(--bp-blue-electric) 30%, transparent 60%),
    radial-gradient(circle 3px at 62% 88%, #fff 30%, transparent 60%);
  opacity:.75;
  pointer-events:none;
  z-index:0;
}
.lm-result.is-win > *{ position:relative; z-index:1; }

/* Imagen de productos celebrando */
.lm-result__hero{
  margin:0 0 4px;
  display:flex; justify-content:center;
}
.lm-result__hero img{
  width:clamp(220px, 60vw, 340px);
  height:auto;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.5));
  animation:lm-pop-enter .9s cubic-bezier(.2,1.4,.4,1) both;
}

/* Badge Aniversario */
.lm-result__badge{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 14px;
  padding:6px 18px;
  font-size:12px; font-weight:800; letter-spacing:2px;
  color:#fff;
  background:linear-gradient(135deg,var(--bp-blue) 0%,var(--bp-blue-electric) 100%);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(var(--bp-blue-electric-rgb),.4);
  text-transform:uppercase;
}
.lm-result__star{ color:#fff; font-size:11px; }

/* Título blanco brillante gigante — mismo tratamiento "bubble" que el hero/arcade */
.lm-result.is-win .lm-result__title{
  margin:0 0 16px;
  font-size:clamp(44px, 9vw, 76px);
  font-weight:900;
  letter-spacing:-2px;
  line-height:1;
  color:#fff;
  -webkit-text-stroke:1.5px var(--bp-blue-dark);
  text-shadow:
    3px 3px 0 var(--bp-blue-mid),
    6px 6px 0 var(--bp-blue-dark),
    0 0 30px rgba(var(--bp-blue-electric-rgb),.75),
    0 8px 24px rgba(0,0,0,.4);
  animation:lm-title-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes lm-title-glow-pulse{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(var(--bp-blue-electric-rgb),0)); }
  50%{ filter:drop-shadow(0 0 22px rgba(var(--bp-blue-electric-rgb),.65)); }
}

/* Mensaje en card translúcida */
.lm-result.is-win .lm-result__msg{
  margin:0 0 24px;
  padding:16px 20px;
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.95);
  background:rgba(0,0,0,.28);
  border:2px solid rgba(255,255,255,.4);
  border-radius:16px;
  backdrop-filter:blur(6px);
}
.lm-result.is-win .lm-result__msg strong{ color:#fff; font-weight:800; text-shadow:0 0 10px rgba(var(--bp-blue-electric-rgb),.6); }

/* Enlace de términos y condiciones */
.lm-result__terms{
  display:inline-block;
  margin:22px 0 0;
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,.8);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(var(--bp-blue-electric-rgb),.6);
  transition:color .2s ease;
}
.lm-result__terms:hover{ color:var(--bp-blue-electric); }

@media (max-width:640px){
  .lm-result.is-win{ padding:30px 18px 30px; border-radius:18px; }
  .lm-result__hero img{ width:min(72vw, 280px); }
  .lm-result.is-win .lm-result__title{ font-size:46px; }
  .lm-result.is-win .lm-result__msg{ font-size:13.5px; padding:14px 16px; }
}

/* ============================================================
   "NO GANADOR" — Diseño épico Aniversario Bella Piel
   Fondo azul oscuro + resplandor + confetti + caja translúcida
   ============================================================ */
.lm-result.is-lose{
  position:relative;
  overflow:hidden;
  background:
    /* Glow central suave */
    radial-gradient(ellipse 90% 60% at 50% 15%, rgba(var(--bp-blue-electric-rgb),.20) 0%, transparent 65%),
    /* Rayos radiando desde la parte superior */
    repeating-conic-gradient(from 215deg at 50% 0%,
      rgba(255,255,255,.06) 0deg 4deg,
      transparent 4deg 11deg),
    /* Gradiente azul Bella Piel */
    linear-gradient(135deg, var(--bp-blue-light) 0%, var(--bp-blue-mid) 45%, var(--bp-blue-dark) 100%);
  border:3px solid rgba(255,255,255,.4);
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 70px rgba(var(--bp-blue-rgb),.45),
    0 0 55px rgba(var(--bp-blue-electric-rgb),.28);
  padding:48px 36px 40px;
}

/* Confetti scattered (puntos blancos y azules dispersos por el fondo) */
.lm-result.is-lose::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle 5px at 8% 18%,  #fff 30%, transparent 60%),
    radial-gradient(circle 4px at 92% 22%, #fff 30%, transparent 60%),
    radial-gradient(circle 3px at 12% 78%, #fff 30%, transparent 60%),
    radial-gradient(circle 5px at 88% 75%, var(--bp-blue-electric) 30%, transparent 60%),
    radial-gradient(circle 4px at 50% 6%,  #fff 30%, transparent 60%),
    radial-gradient(circle 3px at 25% 55%, var(--bp-blue-electric) 30%, transparent 60%),
    radial-gradient(circle 5px at 75% 58%, #fff 30%, transparent 60%),
    radial-gradient(circle 3px at 95% 48%, #fff 30%, transparent 60%),
    radial-gradient(circle 4px at 5% 92%,  var(--bp-blue-electric) 30%, transparent 60%),
    radial-gradient(circle 3px at 60% 90%, #fff 30%, transparent 60%),
    radial-gradient(circle 4px at 38% 12%, var(--bp-blue-electric) 30%, transparent 60%);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}

/* Garantiza que todo el contenido va POR ENCIMA del confetti decorativo */
.lm-result.is-lose > *{ position:relative; z-index:1; }

/* Popup más grande con sombra dramática y animación de entrada */
.lm-result.is-lose .lm-result__icon--img{ margin-bottom:6px; }
.lm-result.is-lose .lm-result__icon--img img{
  width:clamp(220px, 55vw, 380px);
  max-height:280px;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.55));
  animation:lm-pop-enter .9s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes lm-pop-enter{
  0%  { transform:scale(.75) translateY(20px); opacity:0; }
  100%{ transform:scale(1)   translateY(0);    opacity:1; }
}

/* Título blanco gigante */
.lm-result.is-lose .lm-result__title{
  color:#fff;
  font-size:clamp(40px, 7.5vw, 68px);
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:1.05;
  text-shadow:0 6px 24px rgba(0,0,0,.5);
  margin:8px 0 26px;
  text-transform:none;
}

/* Caja del mensaje con icono de regalo (estilo "card translúcida") */
.lm-result.is-lose .lm-result__msg{
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
  background:rgba(0,0,0,.32);
  border:2px solid rgba(255,255,255,.35);
  border-radius:18px;
  padding:18px 22px;
  margin:0 0 28px;
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
}
.lm-result.is-lose .lm-result__msg::before{
  content:'🎁';
  font-size:46px;
  flex-shrink:0;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.lm-result.is-lose .lm-result__msg strong{
  color:#fff;
  font-weight:800;
  text-shadow:0 0 10px rgba(var(--bp-blue-electric-rgb),.6);
}

/* Responsive móvil */
@media (max-width:640px){
  .lm-result.is-lose{ padding:36px 22px 32px; border-radius:18px; }
  .lm-result.is-lose .lm-result__icon--img img{
    width:min(70vw, 280px); max-height:220px;
  }
  .lm-result.is-lose .lm-result__title{
    font-size:34px; margin-bottom:20px;
  }
  .lm-result.is-lose .lm-result__msg{
    padding:14px 16px; font-size:13px; gap:14px;
  }
  .lm-result.is-lose .lm-result__msg::before{ font-size:34px; }
}
.lm-result__icon{ font-size:80px; line-height:1; margin-bottom:12px; }
/* Variante imagen (popup.png en caso de "no ganador") */
.lm-result__icon--img{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:16px;
}
.lm-result__icon--img img{
  width:clamp(120px, 28vw, 200px);
  height:auto;
  max-height:200px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
}
@media (max-width:640px){
  .lm-result__icon--img img{ width:min(60vw, 160px); }
}
.lm-result__title{ margin:0 0 12px; font-size:clamp(32px,6vw,52px); font-weight:900; color:var(--bp-blue-dark); letter-spacing:-1px; }
.lm-result__msg{ margin:0 0 24px; font-size:17px; color:var(--bp-text); line-height:1.5; }
/* ===== Cupón estilo "ticket" ===== */
.lm-coupon{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,var(--bp-ice) 100%);
  border:2px dashed var(--bp-blue);
  border-radius:18px;
  padding:24px 22px 22px;
  margin:26px auto 0;
  max-width:380px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
/* Muescas laterales del ticket */
.lm-coupon__notch{
  position:absolute; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  background:var(--bp-blue-dark);
}
.lm-coupon__notch--l{ left:-12px; }
.lm-coupon__notch--r{ right:-12px; }

.lm-coupon__lbl{
  font-size:11px; color:var(--bp-blue); font-weight:700;
  text-transform:uppercase; letter-spacing:2px; margin-bottom:8px;
}
.lm-coupon__code{
  font-family:'Courier New',monospace; font-size:24px; font-weight:900;
  color:var(--bp-blue); letter-spacing:2px; margin:0 0 14px; word-break:break-all;
  padding-bottom:14px; border-bottom:1px dashed rgba(var(--bp-blue-rgb),.35);
}
.lm-coupon__hint{ font-size:12px; color:var(--bp-muted); margin:0; line-height:1.4; }

.lm-confetti{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:999; }
.lm-confetti span{ position:absolute; width:10px; height:16px; top:-20px; animation:lm-fall linear forwards; }
@keyframes lm-fall{ 0%{transform:translateY(0) rotate(0);opacity:1} 100%{transform:translateY(120vh) rotate(720deg);opacity:0} }

/* ===== RESPONSIVE ===== */
@media (max-width:640px){
  /* Las 3 piezas apiladas + subtítulo + botón casi siempre superan el alto de
     pantalla en móvil — se permite scroll y se alinea arriba en vez de centrar
     (centrar + overflow:hidden recortaría la parte de arriba sin poder verla). */
  .lm-screen--hero{ padding:16px 14px; overflow-y:auto; align-items:flex-start; }
  .lm-hero__inner{ gap:4px; max-height:none; justify-content:flex-start; margin:auto 0; }
  /* Las 3 piezas del banner (título izq. / productos+click / título der.) llevan
     texto real cada una — se apilan en vertical en vez de ocultar las de los
     costados (antes eran solo productos decorativos, ya no). */
  .lm-hero__row{ flex-direction:column; gap:0; }
  .lm-hero__title-img,
  .lm-hero__product{ width:min(72vw,340px); max-height:none; }
  .lm-hero__product--left{ margin-bottom:-9vw; }
  .lm-hero__product--right{ margin-top:-7vw; }
  .lm-hero__subtitle{ font-size:13px; line-height:1.4; max-width:320px; margin-top:4px; }
  .lm-screen--hero .lm-btn--primary{ font-size:15px; padding:15px 30px; letter-spacing:1px; min-width:0; }
  .lm-form-card{ padding:46px 14px 18px; margin:0 auto 20px; border-radius:18px; }
  .lm-form-card::before{ height:10px; }
  .lm-form__badge{ font-size:9px; padding:4px 10px; letter-spacing:1.4px; top:16px; }
  .lm-form__title{ font-size:24px; letter-spacing:.5px; margin:14px 0 2px; text-shadow:1px 1px 0 var(--bp-blue-mid),2px 2px 0 var(--bp-blue-dark),3px 3px 6px rgba(0,0,0,.3); }
  .lm-form__title::after{ width:44px; height:3px; margin-top:6px; }
  .lm-form__hint{ font-size:11.5px; line-height:1.35; margin:0 0 12px; max-width:280px; margin-left:auto; margin-right:auto; }
  .lm-form__ball{ font-size:70px; }
  .lm-form__ball--tl{ top:10px; left:-18px; }
  .lm-form__ball--br{ bottom:-18px; right:-18px; }
  .lm-field > span{ font-size:10.5px; letter-spacing:.8px; margin-bottom:4px; }
  .lm-field input, .lm-field select{ font-size:16px; padding:11px 12px; border-width:1.5px; border-radius:10px; }
  .lm-field small{ font-size:10.5px; margin-top:3px; }
  .lm-grid-2{ grid-template-columns:1fr; gap:8px; }
  .lm-field, .lm-field--full{ margin-bottom:8px; }
  .lm-file{ flex-direction:row; padding:10px 12px; gap:10px; text-align:left; border-width:2px; border-radius:10px; }
  .lm-file__icon{ font-size:22px; flex-shrink:0; }
  .lm-file__txt{ flex:1; font-size:11px; letter-spacing:.4px; text-align:left; line-height:1.25; }
  .lm-file__pill{ font-size:9.5px; padding:5px 10px; letter-spacing:.8px; flex-shrink:0; border-width:1px; }
  .lm-check{ padding:9px 12px; font-size:11.5px; line-height:1.4; gap:9px; border-width:1.5px; border-radius:10px; margin:10px 0 4px; }
  .lm-check__box{ width:18px; height:18px; border-width:2px; }
  .lm-form__actions{ flex-direction:column-reverse; gap:8px; margin-top:12px; }
  .lm-form__actions .lm-btn{ width:100%; }
  .lm-btn--play{ font-size:18px; padding:14px 28px; letter-spacing:1.2px; min-width:0; }
  .lm-video-arcade{ width:min(94vw,420px); max-height:62dvh; }
  .lm-video__hint{ font-size:11px; padding:6px 14px; letter-spacing:1.5px; }
}
@media (max-width:380px){
  .lm-form-card{ padding:34px 12px 14px; }
  .lm-form__title{ font-size:22px; margin-top:12px; }
}
@media (max-height:640px){
  .lm-hero__inner{ gap:8px; }
  .lm-hero__title-img{ max-height:54dvh; }
  .lm-hero__subtitle{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lm-hero__stars, .lm-hero__bg::before, .lm-hero__click-glow::after, .lm-confetti span,
  .lm-btn--primary, .lm-btn--primary::before, .lm-btn--primary::after, .lm-btn__sparkle,
  .lm-video-arcade::before, .lm-arcade__title-big, .lm-result.is-win .lm-result__title,
  .lm-form__flag{ animation:none !important; }
}

/* ============================================================
   PANTALLA CERRADA — Fin de campaña
   ============================================================ */
.lm-screen--closed{ padding:30px 20px; flex-direction:column; }

.lm-closed{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg, rgba(var(--bp-blue-rgb),.22) 0%, rgba(var(--bp-blue-electric-rgb),.16) 50%, rgba(255,255,255,.08) 100%);
  border-radius:24px;
  border:3px solid rgba(255,255,255,.4);
  padding:48px 32px 36px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 0 0 4px rgba(var(--bp-blue-electric-rgb),.18),
    0 0 0 8px rgba(var(--bp-blue-rgb),.14);
  backdrop-filter:blur(6px);
}

.lm-closed__icon{
  font-size:80px;
  line-height:1;
  margin-bottom:16px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));
  animation:lm-closed-tick 2s ease-in-out infinite;
}
@keyframes lm-closed-tick{
  0%,100%{ transform:rotate(-3deg); }
  50%    { transform:rotate( 3deg); }
}

.lm-closed__title{
  margin:0 0 12px;
  font-size:clamp(32px, 6vw, 48px);
  font-weight:900;
  color:#fff;
  letter-spacing:1px;
  text-shadow:2px 2px 0 var(--bp-blue), 0 0 22px rgba(var(--bp-blue-electric-rgb),.55), 4px 4px 8px rgba(0,0,0,.4);
  text-transform:uppercase;
}

.lm-closed__msg{
  margin:0 0 30px;
  font-size:15px;
  line-height:1.5;
  opacity:.95;
}
.lm-closed__msg strong{ color:var(--bp-blue-electric); }

.lm-closed__footer{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}
.lm-closed__footer strong{
  color:var(--bp-blue-electric);
  font-size:13px;
}

@media (max-width:640px){
  .lm-closed{ padding:36px 20px 28px; border-radius:18px; }
  .lm-closed__icon{ font-size:64px; }
}

/* ============================================================
   TOOLTIP DE AYUDA — icono "?" junto al label con popover
   Trigger: hover (desktop) o click (cualquier dispositivo)
   ============================================================ */
.lm-help-wrap{
  position:relative;
  display:inline-block;
  margin-left:6px;
  vertical-align:middle;
}

/* Botón "?" azul/blanco */
.lm-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--bp-blue);
  color:#fff;
  border:2px solid rgba(255,255,255,.75);
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 8px rgba(var(--bp-blue-rgb),.45);
  transition:transform .2s, box-shadow .2s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.lm-help:hover,
.lm-help:focus-visible,
.lm-help[aria-expanded="true"]{
  transform:scale(1.15);
  box-shadow:0 0 16px rgba(var(--bp-blue-electric-rgb),.8);
  background:var(--bp-blue-electric);
  outline:none;
}

/* Tooltip — position:fixed para escapar overflow:hidden del form-card y stacking
   contexts de los campos. JS calcula top/left dinámicamente según el botón "?" */
.lm-tooltip{
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:340px;
  max-width:calc(100vw - 32px);
  background:#fff;
  border-radius:14px;
  border:2px solid var(--bp-blue-electric);
  padding:18px 18px 16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 0 4px rgba(var(--bp-blue-electric-rgb),.15);
  z-index:9999;            /* máximo nivel */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
  text-align:left;
}
.lm-tooltip.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Triangulito apuntando hacia arriba al icono "?" — solo se muestra cuando
   el tooltip está suficientemente cerca del icono (se oculta en mobile/modal) */
.lm-tooltip::before{
  content:'';
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:#fff;
  border-top:2px solid var(--bp-blue-electric);
  border-left:2px solid var(--bp-blue-electric);
}

.lm-tooltip__close{
  position:absolute;
  top:6px; right:6px;
  width:28px; height:28px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--bp-muted);
  font-family:inherit;
  font-size:22px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:background .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.lm-tooltip__close:hover,
.lm-tooltip__close:focus-visible{
  background:rgba(var(--bp-blue-rgb),.12);
  color:var(--bp-blue);
  outline:none;
}

.lm-tooltip__title{
  display:block;
  margin:0 30px 10px 0;
  color:var(--bp-blue);
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height:1.3;
}
.lm-tooltip__desc{
  display:block;
  margin:0 0 12px 0;
  color:var(--bp-text);
  font-size:13px;
  line-height:1.5;
  font-weight:500;
}
.lm-tooltip__desc strong{
  color:var(--bp-blue);
  font-weight:800;
}

.lm-tooltip__img{
  display:block;
  width:100%;
  max-height:200px;
  object-fit:contain;
  border-radius:8px;
  border:1.5px solid var(--bp-border);
  background:#fff;
}

/* En móvil: cuando el tooltip tiene la clase .is-modal (asignada por JS si el botón
   está cerca del borde), se renderiza como modal anclado al fondo de la pantalla */
.lm-tooltip.is-modal{
  top:auto !important;
  bottom:16px !important;
  left:16px !important;
  right:16px !important;
  width:auto !important;
  max-width:none !important;
  transform:translate(0,20px) !important;
  padding:16px;
  max-height:75dvh;
  overflow-y:auto;
}
.lm-tooltip.is-modal.is-open{
  transform:translate(0,0) !important;
}
.lm-tooltip.is-modal::before{ display:none; }

@media (max-width:640px){
  .lm-help{ width:18px; height:18px; font-size:11px; }
  .lm-tooltip__img{ max-height:160px; }
}