/* =========================================================
   Landing Mundial 2026 - Bella Piel
   Standalone version (no HubSpot)
   Color base: #090E69
   ========================================================= */

:root{
  --bp-blue:#090E69;
  --bp-blue-dark:#050932;
  --bp-blue-mid:#131A8C;
  --bp-blue-light:#1B249E;
  --bp-gold:#FFD24D;
  --bp-gold-dark:#E5A800;
  --bp-red:#E11D48;
  --bp-red-dark:#B71C1C;
  --bp-green:#10B981;
  --bp-text:#14163A;
  --bp-muted:#6B7080;
  --bp-border:#E2E5F5;
  --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 de prueba: imagen fija a pantalla completa.
     - 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:
    linear-gradient(135deg, rgba(5,9,50,.35) 0%, rgba(9,14,105,.15) 50%, rgba(27,36,158,.35) 100%),
    url('/images/fondo.png') center center / cover no-repeat fixed,
    var(--bp-blue-dark);
  position:relative;
}

/* En móvil background-attachment:fixed no funciona bien en iOS Safari */
@media (max-width:768px){
  .lm-body{
    background:
      linear-gradient(135deg, rgba(5,9,50,.35) 0%, rgba(9,14,105,.15) 50%, rgba(27,36,158,.35) 100%),
      url('/images/fondo.png') center center / cover no-repeat,
      var(--bp-blue-dark);
  }
}
.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{
  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:
    radial-gradient(circle at 15% 20%, rgba(255,210,77,.18) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(225,29,72,.18) 0%, transparent 40%);
  pointer-events:none;
}
.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%, #FFD24D 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%, #FFD24D 50%, transparent 50%),
    radial-gradient(2px 2px at 10% 75%, #fff 50%, transparent 50%);
  background-size:300px 300px; 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;
}

.lm-hero__title-img{
  filter:drop-shadow(0 16px 38px rgba(0,0,0,.55));
  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-gold); }

/* ===== 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:var(--bp-blue-dark); font-size:19px; padding:20px 56px;
  letter-spacing:1.5px;
  background:linear-gradient(135deg,#FFE99A 0%,#FFD24D 28%,#FFA800 52%,#FFD24D 76%,#FFE99A 100%);
  background-size:260% 260%;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  box-shadow:
    0 0 0 3px rgba(255,210,77,.28),
    0 10px 28px rgba(255,210,77,.55),
    0 0 60px rgba(255,168,0,.45),
    inset 0 2px 0 rgba(255,255,255,.7),
    inset 0 -4px 8px rgba(180,110,0,.35);
  animation:lm-gold-shift 3.6s ease-in-out infinite, lm-gold-pulse 2.4s ease-in-out infinite;
}
.lm-btn--primary::after{
  content:''; position:absolute; inset:5px;
  border:1.5px dashed rgba(120,70,0,.55); border-radius:999px;
  pointer-events:none; z-index:1;
}
.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(255,210,77,.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,#FFF1B0 0%,#FFE070 35%,#FFB800 70%,#FFD24D 100%);
  box-shadow:
    0 0 0 6px rgba(255,210,77,.4),
    0 20px 50px rgba(255,210,77,.9),
    0 0 120px rgba(255,168,0,.95),
    inset 0 3px 0 rgba(255,255,255,.85),
    inset 0 -4px 8px rgba(180,110,0,.35);
}
.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-gold-shift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes lm-gold-pulse{
  0%,100%{ transform:scale(1) translateY(0); }
  50%{ transform:scale(1.045) translateY(-2px); }
}
@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:#f5f7ff; }

/* ===== FORM CARD MUNDIAL ===== */
.lm-form-card{
  position:relative; width:100%; max-width:660px;
  background:radial-gradient(ellipse at top, rgba(252,209,22,.10) 0%, transparent 55%),
             linear-gradient(180deg,#FFFEF7 0%,#FFFBEA 100%);
  border-radius:var(--bp-radius-lg);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 4px rgba(252,209,22,.35),
    0 0 0 8px rgba(206,17,38,.22),
    0 0 0 12px rgba(0,56,147,.18);
  padding:74px 36px 36px; margin:20px auto;
  overflow:hidden; isolation:isolate;
}
.lm-form__flag{
  position:absolute; top:0; left:0; right:0; height:18px;
  background:linear-gradient(180deg,#FCD116 0%,#FCD116 50%,#003893 50%,#003893 75%,#CE1126 75%,#CE1126 100%);
  z-index:1; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.lm-form__ball{
  position:absolute; font-size:140px; line-height:1; opacity:.07;
  pointer-events:none; z-index:0; filter:saturate(0);
  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,#CE1126 0%,#E11D48 50%,#CE1126 100%);
  color:#FCD116; font-weight:900; font-size:11px; letter-spacing:2px;
  padding:6px 18px; border-radius:999px; border:2px solid #FCD116;
  box-shadow:0 4px 12px rgba(206,17,38,.45), inset 0 1px 0 rgba(255,255,255,.3);
  z-index:2; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.lm-form__star{
  color:#FCD116; text-shadow:0 0 6px rgba(252,209,22,.9);
  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:#FFD24D; -webkit-text-stroke:1.5px #7A0B19;
  text-shadow:2px 2px 0 #CE1126,4px 4px 0 #7A0B19,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,#FCD116 0%,#003893 50%,#CE1126 100%);
  border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.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:#CE1126; 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:#CE1126; font-size:11px; }
.lm-field input, .lm-field select{
  width:100%; padding:14px 16px;
  border:2px solid rgba(0,56,147,.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(0,56,147,.35); font-weight:500; }
.lm-field select:required:invalid{ color:rgba(0,56,147,.45); font-weight:500; }
.lm-field select option{ color:var(--bp-blue-dark); font-weight:600; }
.lm-field select option[value=""]{ color:rgba(0,56,147,.45); }
.lm-field input:hover, .lm-field select:hover{ border-color:rgba(252,209,22,.5); }
.lm-field input:focus, .lm-field select:focus{
  outline:none; border-color:#FCD116;
  box-shadow:0 0 0 4px rgba(252,209,22,.25),0 0 0 8px rgba(206,17,38,.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:#CE1126; box-shadow:0 0 0 3px rgba(206,17,38,.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(0,56,147,.35); border-radius:14px;
  background:linear-gradient(180deg,#FFFCEB 0%,#FFF8DA 100%);
  cursor:pointer; text-align:center;
  transition:border-color .2s, transform .2s, box-shadow .2s, background .2s;
}
.lm-file:hover{
  border-color:#FCD116;
  background:linear-gradient(180deg,#FFFBE0 0%,#FFEEB0 100%);
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(252,209,22,.25);
}
.lm-file.is-drag{ border-color:#CE1126; border-style:solid; background:linear-gradient(180deg,#FFF1D6 0%,#FFE0A0 100%); }
.lm-file.is-ready{ border-color:#10B981; 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,#003893 0%,#131A8C 100%);
  color:#FCD116; font-size:11px; font-weight:900; letter-spacing:1.2px;
  padding:6px 16px; border-radius:999px; text-transform:uppercase;
  border:1.5px solid #FCD116; box-shadow:0 3px 8px rgba(0,56,147,.35);
}
.lm-file.is-ready .lm-file__pill{ background:linear-gradient(135deg,#047857 0%,#10B981 100%); border-color:#FCD116; }

/* CHECKBOX MUNDIAL */
.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,#FFFEF7 0%,#FFFBEA 100%);
  border:2px solid rgba(0,56,147,.18);
  transition:border-color .2s, background .2s, box-shadow .2s;
  user-select:none;
}
.lm-check:hover{ border-color:rgba(252,209,22,.6); box-shadow:0 4px 12px rgba(252,209,22,.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 #003893; 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 #FCD116; 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,#CE1126 0%,#E11D48 100%);
  border-color:#FCD116; box-shadow:0 0 0 3px rgba(252,209,22,.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:#CE1126; font-weight:800; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; }
.lm-check__txt a:hover{ color:#7A0B19; }
.lm-check__star{ color:#CE1126; font-weight:900; margin-left:2px; }
.lm-check.is-invalid{
  border-color:#CE1126; background:#FFF5F5; box-shadow:0 0 0 3px rgba(206,17,38,.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,#CE1126 0%,#E11D48 50%,#B71C1C 100%);
  background-size:200% 200%;
  color:#fff; font-size:24px; padding:22px 60px; letter-spacing:2px;
  box-shadow:
    0 0 0 3px #FCD116, 0 0 0 6px #003893,
    0 12px 32px rgba(206,17,38,.55), 0 0 60px rgba(206,17,38,.45),
    inset 0 2px 0 rgba(255,255,255,.25), inset 0 -4px 8px rgba(0,0,0,.3);
  text-shadow:0 2px 4px rgba(0,0,0,.5), 0 0 16px rgba(252,209,22,.4);
  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(252,209,22,.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:#CE1126; font-size:14px; font-weight:700; min-height:20px; text-align:center; position:relative; z-index:2; }

/* ============================================================
   ARCADE ÉPICO — Mundial 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 amarillo */
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(252,209,22,.18) 0%, transparent 65%),
    /* Gradiente azul Mundial */
    linear-gradient(180deg, #1B249E 0%, #131A8C 50%, #050932 100%);
  border-radius:32px;
  border:3px solid rgba(252,209,22,.55);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    inset 0 0 80px rgba(0,56,147,.45),
    0 0 50px rgba(252,209,22,.22);
  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%,  #FCD116 35%, transparent 60%),
    radial-gradient(circle 4px at 88% 12%, #CE1126 35%, transparent 60%),
    radial-gradient(circle 6px at 6% 32%,  #FCD116 35%, transparent 60%),
    radial-gradient(circle 4px at 94% 28%, #FCD116 35%, transparent 60%),
    radial-gradient(circle 5px at 50% 5%,  #CE1126 35%, transparent 60%),
    radial-gradient(circle 5px at 92% 52%, #FCD116 35%, transparent 60%),
    radial-gradient(circle 4px at 4% 55%,  #CE1126 35%, transparent 60%),
    radial-gradient(circle 5px at 90% 88%, #FCD116 35%, transparent 60%),
    radial-gradient(circle 4px at 6% 92%,  #CE1126 35%, transparent 60%),
    radial-gradient(circle 3px at 60% 95%, #FCD116 35%, transparent 60%),
    radial-gradient(circle 4px at 30% 72%, #2979FF 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 #050932,
    1.5px -1.5px 0 #050932,
    -1.5px 1.5px 0 #050932,
    1.5px 1.5px 0 #050932,
    3px 3px 0 #CE1126,
    5px 5px 0 #7A0B19,
    7px 7px 10px rgba(0,0,0,.5);
  margin-bottom:6px;
}
.lm-arcade__title-big{
  display:block;
  font-size:clamp(48px, 12vw, 96px);
  color:#FCD116;
  letter-spacing:1.5px;
  text-shadow:
    -2px -2px 0 #7A0B19,
    2px -2px 0 #7A0B19,
    -2px 2px 0 #7A0B19,
    2px 2px 0 #7A0B19,
    4px 4px 0 #CE1126,
    7px 7px 0 #7A0B19,
    10px 10px 14px rgba(0,0,0,.5);
}

/* 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(5,9,50,.7);
  border:2px solid rgba(252,209,22,.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:#FCD116;
  font-weight:900;
}

/* 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(5,9,50,.7);
  border:2px solid rgba(252,209,22,.35);
  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:#FCD116;
  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(5,9,50,.75);
  border:2px solid rgba(252,209,22,.35);
  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:#FCD116;
  flex-shrink:0;
}
.lm-arcade__lock strong{
  color:#FCD116;
  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 #050932, 1px -1px 0 #050932,
      -1px 1px 0 #050932,  1px 1px 0 #050932,
      2px 2px 0 #CE1126,
      4px 4px 0 #7A0B19,
      5px 5px 7px 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 #7A0B19, 1.5px -1.5px 0 #7A0B19,
      -1.5px 1.5px 0 #7A0B19,  1.5px 1.5px 0 #7A0B19,
      2.5px 2.5px 0 #CE1126,
      4.5px 4.5px 0 #7A0B19,
      6px 6px 8px 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));
}
.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 la sombra dorada, sin escalar */
.lm-video-arcade[data-state="idle"]:hover{
  filter:drop-shadow(0 28px 50px rgba(252,209,22,.5));
}

/* ===== 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;
}
.lm-result.is-win{ background:linear-gradient(135deg,#FFF8E1 0%,#FFE082 100%); }

/* ============================================================
   "NO GANADOR" — Diseño épico Mundial Bella Piel
   Fondo azul oscuro + rayos + 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(252,209,22,.15) 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, #1B249E 0%, #131A8C 45%, #050932 100%);
  border:3px solid rgba(252,209,22,.55);
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 70px rgba(0,56,147,.45),
    0 0 50px rgba(252,209,22,.18);
  padding:48px 36px 40px;
}

/* Confetti scattered (puntos amarillos y azules dispersos por el fondo) */
.lm-result.is-lose::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle 5px at 8% 18%,  #FCD116 30%, transparent 60%),
    radial-gradient(circle 4px at 92% 22%, #FCD116 30%, transparent 60%),
    radial-gradient(circle 3px at 12% 78%, #FCD116 30%, transparent 60%),
    radial-gradient(circle 5px at 88% 75%, #2979FF 30%, transparent 60%),
    radial-gradient(circle 4px at 50% 6%,  #FCD116 30%, transparent 60%),
    radial-gradient(circle 3px at 25% 55%, #2979FF 30%, transparent 60%),
    radial-gradient(circle 5px at 75% 58%, #FCD116 30%, transparent 60%),
    radial-gradient(circle 3px at 95% 48%, #FCD116 30%, transparent 60%),
    radial-gradient(circle 4px at 5% 92%,  #2979FF 30%, transparent 60%),
    radial-gradient(circle 3px at 60% 90%, #FCD116 30%, transparent 60%),
    radial-gradient(circle 4px at 38% 12%, #2979FF 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(252,209,22,.45);
  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:#FCD116;
  font-weight:800;
}

/* 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; }
.lm-coupon{ background:#fff; border:3px dashed var(--bp-blue); border-radius:var(--bp-radius); padding:20px; margin:24px auto; max-width:360px; }
.lm-coupon__lbl{ font-size:11px; color:var(--bp-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.lm-coupon__code{ font-family:'Courier New',monospace; font-size:22px; font-weight:900; color:var(--bp-blue); letter-spacing:2px; margin:4px 0 14px; word-break:break-all; }
.lm-coupon__qr img{ max-width:180px; height:auto; margin:0 auto; display:block; }
.lm-coupon__hint{ font-size:12px; color:var(--bp-muted); margin:14px 0 0; }

.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){
  .lm-screen--hero{ padding:12px 14px; }
  .lm-hero__inner{ gap:10px; }
  /* En móvil: ocultar productos laterales, solo título central */
  .lm-hero__product{ display:none; }
  .lm-hero__row{ gap:0; }
  .lm-hero__title-img{ width:min(98vw,560px); max-height:60dvh; }
  .lm-hero__subtitle{ font-size:13px; line-height:1.4; max-width:320px; }
  .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 #CE1126,2px 2px 0 #7A0B19,3px 3px 5px 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-confetti span,
  .lm-btn--primary, .lm-btn--primary::before, .lm-btn__sparkle{ animation:none !important; }
}

/* ============================================================
   PANTALLA CERRADA — Countdown al próximo evento
   ============================================================ */
.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(206,17,38,.10) 0%, rgba(0,56,147,.20) 50%, rgba(252,209,22,.10) 100%);
  border-radius:24px;
  border:3px solid rgba(252,209,22,.5);
  padding:48px 32px 36px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 0 0 4px rgba(206,17,38,.15),
    0 0 0 8px rgba(0,56,147,.15);
  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:#FCD116;
  letter-spacing:1px;
  text-shadow:2px 2px 0 #CE1126, 4px 4px 0 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:#FCD116; }

/* Reloj de cuenta regresiva */
.lm-countdown{
  background:#050932;
  border:2px solid #FCD116;
  border-radius:16px;
  padding:20px 16px;
  margin:0 0 28px;
  box-shadow:
    inset 0 4px 16px rgba(0,0,0,.5),
    0 0 30px rgba(252,209,22,.25);
}
.lm-countdown__label{
  color:#FCD116;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.lm-countdown__clock{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.lm-countdown__cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(180deg, #1B249E 0%, #090E69 100%);
  border:2px solid rgba(252,209,22,.6);
  border-radius:10px;
  padding:10px 8px;
  min-width:72px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.3),
    0 4px 12px rgba(0,0,0,.4);
}
.lm-countdown__num{
  font-family:'Courier New', monospace;
  font-size:clamp(28px, 6vw, 40px);
  font-weight:900;
  color:#FCD116;
  line-height:1;
  text-shadow:0 0 12px rgba(252,209,22,.7);
  font-variant-numeric:tabular-nums;
}
.lm-countdown__unit{
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  margin-top:4px;
}
.lm-countdown__sep{
  font-size:clamp(24px, 5vw, 36px);
  font-weight:900;
  color:#FCD116;
  animation:lm-blink 1s ease-in-out infinite;
}
@keyframes lm-blink{
  0%,100%{ opacity:1; }
  50%    { opacity:.3; }
}
.lm-countdown__opens{
  margin-top:14px;
  color:rgba(255,255,255,.85);
  font-size:12px;
  font-weight:600;
}
.lm-countdown__opens strong{ color:#FCD116; }

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

@media (max-width:640px){
  .lm-closed{ padding:36px 20px 28px; border-radius:18px; }
  .lm-closed__icon{ font-size:64px; }
  .lm-countdown{ padding:16px 12px; }
  .lm-countdown__cell{ min-width:56px; padding:8px 6px; }
}

/* ============================================================
   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 "?" estilo Mundial Colombia */
.lm-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#003893;
  color:#FCD116;
  border:2px solid #FCD116;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 6px rgba(0,56,147,.4);
  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(252,209,22,.75);
  background:#CE1126;
  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 #FCD116;
  padding:18px 18px 16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 0 4px rgba(252,209,22,.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 #FCD116;
  border-left:2px solid #FCD116;
}

.lm-tooltip__close{
  position:absolute;
  top:6px; right:6px;
  width:28px; height:28px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:#6B7080;
  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(206,17,38,.12);
  color:#CE1126;
  outline:none;
}

.lm-tooltip__title{
  display:block;
  margin:0 30px 10px 0;
  color:#003893;
  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:#14163A;
  font-size:13px;
  line-height:1.5;
  font-weight:500;
}
.lm-tooltip__desc strong{
  color:#CE1126;
  font-weight:800;
}

.lm-tooltip__img{
  display:block;
  width:100%;
  max-height:200px;
  object-fit:contain;
  border-radius:8px;
  border:1.5px solid #E2E5F5;
  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; }
}