/* Segunda dinámica (iPhone) en la portada + ventana selector de dinámica (31 oct 2026).
   Mismo lenguaje oscuro/rojo de la Mercedes (tipografía Kanit/Plus Jakarta ya cargadas). Sin estilos en línea (CSP).
   La paleta va con valores literales porque el selector vive fuera de #checkout y de .mg-home (donde están las variables). */

/* ---------- Sección «Segunda dinámica» de la portada ---------- */
/* Mismas esquinas y borde que las tarjetas vecinas del inicio (.mg-lookup-card / .mg-help-card usan 28px; .mg-glass pone el borde). */
.mg-home .sr-card { margin-top: 18px; margin-bottom: 8px; padding: 20px; border-radius: 28px; }
.sr-head { margin-bottom: 14px; }
.sr-head .mg-eyebrow { margin: 0 0 2px; }
.sr-head h2 { margin: 0; font: 800 italic 26px/1 'Kanit', 'Barlow Condensed', Arial, sans-serif; text-transform: uppercase; letter-spacing: -.01em; color: #fff; }
.sr-body { display: flex; gap: 18px; align-items: center; }
.sr-photo { position: relative; flex: none; width: 128px; }
.sr-photo img { width: 100%; height: auto; border-radius: 16px; background: rgba(15, 15, 20, .35); border: 1px solid rgba(255, 255, 255, .14); }
.sr-photo .sr-ref { display: block; margin-top: 6px; font: 600 9.5px/1.2 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .02em; color: #8E9099; text-align: center; }
.sr-info { flex: 1; min-width: 0; }
.sr-precio { margin: 0; font: 800 17px/1.3 'Plus Jakarta Sans', Arial, sans-serif; color: #fff; }
.sr-precio:empty { display: none; }
.sr-ganador { margin: 6px 0 0; font: 700 12.5px/1.2 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #FF6A7D; }
.sr-info .sr-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 13px 22px; border: 0; border-radius: 16px; background: linear-gradient(160deg, #FF3B55, #C20F28); color: #fff; font: 800 16px/1 'Plus Jakarta Sans', Arial, sans-serif; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(225, 17, 47, .9); }
.sr-info .sr-cta:hover { filter: brightness(1.05); }
.sr-info .sr-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sr-info .sr-cta[hidden] { display: none; }
.sr-info .sr-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sr-agotada { margin: 12px 0 0; display: inline-block; padding: 9px 16px; border-radius: 12px; font: 800 13px/1 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #FF8A98; background: rgba(225, 17, 47, .12); border: 1px solid rgba(225, 17, 47, .38); }
.sr-agotada[hidden] { display: none; }

@media (max-width: 460px) {
  .mg-home .sr-card { padding: 16px; }
  .sr-body { gap: 14px; }
  .sr-photo { width: 92px; }
  .sr-head h2 { font-size: 22px; }
  .sr-precio { font-size: 15.5px; }
  .sr-info .sr-cta { width: 100%; }
}

/* ---------- Enlace «Cambiar de dinámica» dentro del checkout (paso 1) ---------- */
#checkout .sr-cambiar { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 2px; border: 0; background: none; color: #FF6A7D; font: 800 12.5px/1 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
#checkout .sr-cambiar[hidden] { display: none; }
#checkout .sr-cambiar:hover { color: #FF8A98; }
#checkout .sr-cambiar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
#checkout .sr-cambiar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------- Ventana selector de dinámica ---------- */
.sel-rifa { width: min(92vw, 460px); max-width: 460px; margin: auto; padding: 0; border: 1px solid #26272D; border-radius: 22px; background: linear-gradient(160deg, #15161A, #0B0B0D); color: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); overflow: hidden; }
.sel-rifa::backdrop { background: rgba(5, 5, 7, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sel-rifa-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 0; }
.sel-rifa-head > div { flex: 1; min-width: 0; }
.sel-rifa-eyebrow { display: block; font: 800 9.5px/1.2 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #FF6A7D; }
.sel-rifa-head h2 { margin: 3px 0 0; font: 800 italic 22px/1.05 'Kanit', 'Barlow Condensed', Arial, sans-serif; text-transform: uppercase; color: #fff; }
.sel-rifa-head .icon-button { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #fff; background: #1B1C21; border: 1px solid #34353C; cursor: pointer; }
.sel-rifa-head .icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.sel-rifa-sub { margin: 8px 18px 0; font: 500 12.5px/1.4 'Plus Jakarta Sans', Arial, sans-serif; color: #C9CAD1; }
.sel-rifa-cards { display: grid; gap: 10px; padding: 14px 18px 20px; }
.sel-rifa-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px; border: 1.5px solid #34353C; border-radius: 18px; background: linear-gradient(160deg, #1B1C21, #0E0F12); color: #fff; font-family: 'Plus Jakarta Sans', Arial, sans-serif; cursor: pointer; }
.sel-rifa-card:hover { border-color: #FF3B55; }
.sel-rifa-card.abriendo { opacity: .7; border-color: #FF3B55; cursor: progress; }
.sel-rifa-card.abriendo small::after { content: ' · Abriendo…'; color: #FF8A98; font-weight: 800; }
.sel-rifa-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sel-rifa-card[aria-current="true"] { border-color: #FF3B55; box-shadow: 0 0 0 3px rgba(225, 17, 47, .22); }
.sel-rifa-img { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; overflow: hidden; background: rgba(15, 15, 20, .5); border: 1px solid rgba(255, 255, 255, .12); }
.sel-rifa-img img { width: 100%; height: 100%; object-fit: cover; }
.sel-rifa-txt { flex: 1; min-width: 0; }
.sel-rifa-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 15px/1.2 'Plus Jakarta Sans', Arial, sans-serif; color: #fff; }
.sel-rifa-txt small { display: block; margin-top: 3px; font: 600 12px/1.3 'Plus Jakarta Sans', Arial, sans-serif; color: #C9CAD1; }
.sel-rifa-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(160deg, #FF3B55, #C20F28); color: #fff; }
.sel-rifa-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sel-rifa-card.agotada { opacity: .55; cursor: default; }
.sel-rifa-card.agotada:hover { border-color: #34353C; }
.sel-rifa-chip { flex: none; padding: 6px 12px; border-radius: 999px; font: 800 11px/1 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #FF8A98; background: rgba(225, 17, 47, .12); border: 1px solid rgba(225, 17, 47, .38); }

@media (max-width: 360px) {
  .sel-rifa-card { gap: 10px; padding: 10px; }
  .sel-rifa-img { width: 48px; height: 48px; }
  .sel-rifa-txt b { font-size: 14px; }
}