/* ======================================================================
   LeadCards / GiftPopup — CSS completo (tipos más pequeños, menos gap, modal aireado)
   ====================================================================== */

#leadcards-modal .modal-content{
  padding: 13px 20px;
}

#leadcards-modal .modal-content {
  min-height: auto !important;
  height: auto !important;
  max-height: calc(100vh - 8vh);
}

/* Accesibilidad */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ---------------- Tokens (scoped dentro del modal) ---------------- */
#leadcards-modal .leadcards-popup{
  --lc-font: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;

  /* Colores */
  --lc-text: #0f172a;     /* slate-900 */
  --lc-muted:#64748b;     /* slate-500 */
  --lc-soft: #94a3b8;     /* slate-400 */
  --lc-line: #e2e8f0;     /* slate-200 */
  --lc-bg:   #ffffff;

  /* Espacios */
  --lc-1: 6px;
  --lc-2: 10px;
  --lc-3: 14px;
  --lc-4: 20px;
  --lc-5: 28px;
  --lc-6: 40px;           /* aire modal */

  /* Tipos (más compactos) */
  --lc-title: clamp(20px, 2vw, 24px);
  --lc-sub:   clamp(13px, 1.1vw, 15px);
  --lc-body:  14px;

  /* Card */
  --lc-radius: 14px;
  --lc-card-bg: rgba(255,255,255,.74);
}

/* ---------------- Modal ---------------- */
#leadcards-modal .modal-dialog{max-width:860px;}
#leadcards-modal .modal-content{border-radius:14px;overflow:hidden;}
#leadcards-modal .modal-header{
  padding: var(--lc-6) var(--lc-6) var(--lc-3);
  border: 0;
}
#leadcards-modal .modal-title{
  font-family: var(--lc-font);
  font-size: var(--lc-title);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--lc-text);
}
#leadcards-modal .close{opacity:.6;}
#leadcards-modal .close:hover{opacity:1;}
#leadcards-modal .modal-body{
  padding: var(--lc-6) var(--lc-6) var(--lc-6);
}

/* Contenedor del popup */
.leadcards-popup{
  max-width:1100px;margin:0 auto;
  font-family:var(--lc-font);
  color:var(--lc-text);
}

/* ---------------- Hints y títulos ---------------- */
.leadcards-hint{
  margin:0 0 var(--lc-3);
  text-align:center;
  color:var(--lc-muted);
  font-size:13.5px;
  font-weight:600;
}
.leadcards-headings{
  text-align:center;
  margin: var(--lc-3) 0 var(--lc-3);
}
.leadcards-title{
  margin:0 0 var(--lc-1);
  font-weight:700;
  font-size: var(--lc-title);
  line-height:1.2;
  letter-spacing:-.01em;
  color: var(--lc-text);
}
.leadcards-subtitle{
  margin:0 auto;
  max-width: 52ch;
  color: var(--lc-muted);
  font-size: var(--lc-sub);
  line-height:1.28;
}

/* GDPR texto/enlace dentro del form */
.psgdpr_consent_message span{color:var(--lc-text)}
#leadcards-step-form .psgdpr_consent_message a{
  color:#475569; font-weight:700; text-decoration:underline;
}

/* Cupón título pequeño */
.leadcards-coupon__title{color:#475569;font-size:12px;}

/* ======================================================================
   GRID
   ====================================================================== */
.leadcards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap: var(--lc-4);
  margin: var(--lc-2) 0 var(--lc-4);
  justify-items:stretch;
  align-items:stretch;
  position: relative; /* necesario para la onda y efectos */
}
@media (min-width: 992px){
  .leadcards-grid{grid-template-columns:1fr 1fr;}
}

/* ======================================================================
   CARD
   ====================================================================== */
.leadcards-card{
  position:relative;
  border-radius:var(--lc-radius);
  perspective:1200px;
}
.leadcards-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--lc-radius);
  z-index:0;
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  pointer-events:none;
  /* === Fondo con imagen (ajusta la ruta si tu CSS está en otra carpeta) === */
  background: url("../../img/t2p-card.jpg") center/cover no-repeat;
}
/* Forzamos que todas las variantes usen la misma imagen y no los antiguos gradientes */
.leadcards-card.variant-1::before,
.leadcards-card.variant-2::before,
.leadcards-card.variant-3::before,
.leadcards-card.variant-4::before{
  background: url("../../img/t2p-card.jpg") center/cover no-repeat !important;
}

/* Contenedor 3D */
.leadcards-card-inner,.leadcards-card__inner{
  position:relative;z-index:1;
  border-radius:var(--lc-radius);
  overflow:hidden;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, filter .3s ease, opacity .3s ease;
  min-height:200px;
  background:transparent;
  isolation:isolate;
}

/* Caras */
.leadcards-card-face,.leadcards-card__face{
  position:absolute; inset:0;
  border-radius:var(--lc-radius);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}

/* Frente */
.leadcards-card-front{
  display:flex;align-items:flex-end;justify-content:center;
  padding: var(--lc-3);
  z-index:2;
  -webkit-user-select:none; user-select:none;
  pointer-events:auto;
}
.leadcards-card-front-text{
  font-weight:600;text-align:center;color:var(--lc-text);
  font-size: 14px; line-height:1.3;
  position:absolute;
  left:10px;
  color:white;
}

/* Badge */
.leadcards-card-badge{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;color:#fff;
  z-index:3;
  border:1px solid white;
}

/* Reverso */
.leadcards-card-back{
  transform:rotateY(180deg) translateZ(1px) !important;
  background:rgba(255,255,255,.88);
  display:flex;align-items:center;justify-content:center;
  z-index:1;pointer-events:auto;
  -webkit-user-select:text;user-select:text;
}

/* Flip */
.leadcards-card-inner.is-flipped,.leadcards-card__inner.is-flipped{transform:rotateY(180deg);}
.leadcards-card-inner.is-flipped .leadcards-card-front{opacity:0!important;visibility:hidden!important;display:none!important;}
.leadcards-card-inner.is-flipped .leadcards-card-back{z-index:4!important;}

/* Estados base */
.leadcards-card.disabled .leadcards-card-inner{cursor:not-allowed;filter:grayscale(.15);opacity:.92;}
.leadcards-card.is-dimmed .leadcards-card-inner{filter:grayscale(.35) brightness(.9);opacity:.75;}
.leadcards-grid[data-state="unlocked"] .leadcards-card .leadcards-card-inner{cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.12);}
.leadcards-grid[data-state="unlocked"] .leadcards-card .leadcards-card-inner:hover{transform:translateY(-2px) rotate3d(1,1,0,1.2deg);box-shadow:0 12px 28px rgba(0,0,0,.16);}
.leadcards-grid[data-state="unlocked"] .leadcards-card .leadcards-card-inner::after{content:"";position:absolute;inset:-2px;border-radius:calc(var(--lc-radius) + 2px);box-shadow:0 0 0 2px rgba(255,255,255,.32),0 0 18px rgba(93,173,255,.28) inset;}

/* ======================================================================
   REVERSO: cupón
   ====================================================================== */
.leadcards-card-back-content{
  position:relative;z-index:5;transform:translateZ(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:14px;text-align:center;
}
.leadcards-reward{font-weight:700;color:white;font-size:15px;line-height:1.3;transform: rotatey(-180deg);position:relative;top:27px;}

.leadcards-coupon{
  font:700 18px/1.1 var(--lc-font);letter-spacing:.02em;
  padding:10px 12px;border-radius:12px;
  background:#f8fafc;border:1px dashed #cbd5e1;color:#0f172a;
}
.leadcards-coupon__code{font-size:18px;}

/* ======================================================================
   FORMULARIO
   ====================================================================== */
#leadcards-step-form{margin: var(--lc-4) 0 0; text-align:center;}
#leadcards-form{max-width:720px;margin:0 auto;}
#leadcards-form .form-group{margin-bottom: var(--lc-3);}
#leadcards-form label{
  display:block;font-weight:600;color:var(--lc-text);
  margin-bottom:6px;font-size:13px;
}

/* INPUT protagonista: borde 2px + sombra ligera + focus ring emerald */
#leadcards-form .form-control{
  width:100%;
  padding: 12px 14px;
  border-radius:12px;
  background:#fff;
  border:2px solid #dbe3ef;
  font-size:var(--lc-body);
  line-height:1.45;color:var(--lc-text);
  box-shadow:0 6px 16px rgba(2,6,23,.06);
}
#leadcards-form .form-control::placeholder{color:var(--lc-soft);}
#leadcards-form .form-control:focus{
  outline:0;border-color:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.28), 0 8px 20px rgba(16,185,129,.18);
}

/* Checkbox */
#leadcards-form .form-check{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 2px;}
#leadcards-form .form-check-input{width:18px;height:18px;margin:0;}
#leadcards-form .form-check-label{margin:0;color:var(--lc-muted);font-weight:600;}

/* Botón: verde moderno (emerald) */
#leadcards_submit{
  display:inline-block;min-width:220px;height:48px;
  border-radius:12px;border:0;
  background:linear-gradient(135deg,#10b981,#34d399);
  color:#fff;font-weight:800;font-size:15px;letter-spacing:.2px;
  box-shadow:0 10px 22px rgba(16,185,129,.22);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  margin-top:10px;
}
#leadcards_submit:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(16,185,129,.28);background:linear-gradient(135deg,#059669,#34d399);}
#leadcards_submit:active{transform:translateY(0);}
#leadcards_error{color:#b91c1c;text-align:center;margin-top:8px;}
#leadcards_success{color:#15803d;text-align:center;margin-top:8px;}

/* ======================================================================
   Bloque "copiar código"
   ====================================================================== */
.leadcards-copy-area{margin: var(--lc-4) 0 var(--lc-2);text-align:center;}
.leadcards-copy-box{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid var(--lc-line);}
.leadcards-copy-title{font-weight:700;color:var(--lc-text);margin-right:4px;}
.leadcards-copy-code{font:700 16px/1.1 var(--lc-font);letter-spacing:.02em;color:#0f172a;padding:6px 10px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;}
#leadcards_copy_btn{border:0;border-radius:12px;font-weight:800;padding:10px 16px;box-shadow:0 10px 24px rgba(16,185,129,.25);}
#leadcards_copy_btn:disabled{opacity:.7;cursor:default;box-shadow:none;}

/* ======================================================================
   Efectos base existentes (pulse + barrido inicial)
   ====================================================================== */
.leadcards-grid.just-unlocked .leadcards-card .leadcards-card-inner{animation:lcPulse 650ms ease-in-out 0s 2 both;}
@keyframes lcPulse{
  0%{transform:translateZ(0) scale(1);box-shadow:0 6px 16px rgba(0,0,0,.08);}
  50%{transform:translateZ(0) scale(1.012);box-shadow:0 0 0 3px rgba(148,163,184,.20),0 12px 24px rgba(0,0,0,.12);}
  100%{transform:translateZ(0) scale(1);box-shadow:0 6px 16px rgba(0,0,0,.08);}
}
.leadcards-grid.just-unlocked .leadcards-card::after{
  content:"";position:absolute;inset:-3px;border-radius:calc(var(--lc-radius) + 2px);
  background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.5) 50%,transparent 55%);
  transform:translateX(-150%) skewX(-18deg);
  animation:lcSweep 1100ms ease-out 200ms 1 both;
  pointer-events:none;
}
@keyframes lcSweep{to{transform:translateX(150%) skewX(-18deg);}}

/* ======================================================================
   NUEVOS EFECTOS: onda del grid, bounce de cartas y "shine" en hover
   ====================================================================== */

/* Onda breve al desbloquear (se usa .grid-wave desde JS) */
.leadcards-grid.grid-wave::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:16px;
  background: radial-gradient(100% 100% at 50% 50%, rgba(255,215,0,0.35), rgba(255,215,0,0) 70%);
  animation:lcWave 0.8s ease-out forwards;
  pointer-events:none;
}
@keyframes lcWave{
  0%   { opacity:0; transform:scale(0.9); }
  30%  { opacity:1; transform:scale(1.02); }
  100% { opacity:0; transform:scale(1.05); }
}

/* Bounce de bienvenida (se usa .card-bounce-once desde JS) */
.leadcards-card.card-bounce-once{
  animation:lcBounce 450ms cubic-bezier(.2,.8,.3,1.3);
  will-change: transform;
}
@keyframes lcBounce{
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-6px) scale(1.02); }
  70%  { transform: translateY(2px) scale(0.995); }
  100% { transform: translateY(0) scale(1); }
}

/* Estado is-unlocked: cursor + brillo y hover más vivo */
.leadcards-card.is-unlocked{
  cursor:pointer;
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 0 0 rgba(251,191,36,0);
}
.leadcards-card.is-unlocked:hover,
.leadcards-card.is-unlocked:focus-within{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 24px rgba(17,136,178,0.22);
  filter: saturate(1.08);
}

/* “Shine” al hover (solo cuando está desbloqueada) */
.leadcards-card.is-unlocked::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-120%;
  width:60%;
  height:140%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  opacity:0;
  pointer-events:none;
}
.leadcards-card.is-unlocked:hover::after{
  animation: lcShine 700ms ease;
}
@keyframes lcShine{
  0%   { left: -120%; opacity: 0; }
  10%  { opacity: .7; }
  100% { left: 160%; opacity: 0; }
}

/* ======================================================================
   FAB (botón flotante “regalo”) – robusto
   ====================================================================== */
.giftpopup-fab{
  position:fixed;
  left:calc(env(safe-area-inset-left, 0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
  width:56px;height:56px;border-radius:50%;border:0;
  display:none;align-items:center;justify-content:center;
  background:#111;color:#fff;cursor:pointer;z-index:1045;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent;outline:none;
}
.giftpopup-fab.is-visible{display:inline-flex !important;}
#leadcards-fab:not([hidden]){display:inline-flex;}
.giftpopup-fab[hidden]{display:none !important;}
.giftpopup-fab::before{content:"🎁";font-size:26px;line-height:1;}
.giftpopup-fab:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.28);}
.giftpopup-fab:active{transform:translateY(0);box-shadow:0 8px 18px rgba(0,0,0,.22);}
.giftpopup-fab:focus-visible{box-shadow:0 0 0 4px rgba(59,130,246,.35), 0 10px 24px rgba(0,0,0,.25);}
#leadcards-modal.show + #leadcards-fab{display:none !important;}
@media (max-width:480px){
  .giftpopup-fab{width:52px;height:52px;left:calc(env(safe-area-inset-left, 0px) + 12px);bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);}
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width:480px){
  #leadcards-modal .modal-body{padding: var(--lc-5);}
  #leadcards-modal .modal-header{padding: var(--lc-5) var(--lc-5) var(--lc-3);}
  .leadcards-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .leadcards-card-inner{min-height:170px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .giftpopup-fab{transition:none;}
  .leadcards-grid.just-unlocked .leadcards-card .leadcards-card-inner{animation:none;}
  .leadcards-grid.just-unlocked .leadcards-card::after{animation:none;}
  .leadcards-grid.grid-wave::after{animation:none;}
  .leadcards-card.card-bounce-once{animation:none;}
  .leadcards-card.is-unlocked:hover::after{animation:none;}
}