/* RIFA MERCEDES (15 oct 2026). Todo va con html[data-tema="mercedes"]: con la Yamaha la página conserva su diseño.
Los premios van en tarjetas separadas y la compra sigue un paso a la vez. Sin estilos en línea (CSP). */
/* ── Qué se ve con cada rifa ───────────────────────────────────────────────────────────────── */
html[data-tema="mercedes"] [data-tema="iphone"], html[data-tema="mercedes"] [data-tema="yamaha"] { display: none !important; }
html:not([data-tema="mercedes"]) [data-tema="mercedes"] { display: none !important; }
html[data-tema="mercedes"] #screen-inicio > .pz-portada, html[data-tema="mercedes"] #screen-inicio > .pz-tiras, html[data-tema="mercedes"] #screen-inicio > .pz-consulta { display: none !important; }
html[data-tema="mercedes"] .official-contact.instagram-contact, html[data-tema="mercedes"] .checkout-socials, html[data-tema="mercedes"] #checkout .order-prize { display: none !important; }
/* ── Inicio ─────────────────────────────────────────────────────────────────────────────────── */
html[data-tema="mercedes"] body.campaign-app { background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(225, 17, 47, .22), rgba(225, 17, 47, 0) 60%), #050506; background-attachment: fixed; }
.mzh { --kf: 'Kanit', 'Barlow Condensed', Arial, sans-serif; --ui: 'Plus Jakarta Sans', Arial, sans-serif; position: relative; padding: 6px 0 32px; color: #FFFFFF; font-family: var(--ui); }
.mzh *, .mzh *::before, .mzh *::after { box-sizing: border-box; }
.mzh img { display: block; width: 100%; height: auto; }
.mzh figure { margin: 0; min-width: 0; }
.mzh i, .mzh em { font-style: normal; }
.mzh-agotado { display: none; margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 106, 125, .45); background: rgba(225, 17, 47, .14); }
html.pz-agotado .mzh-agotado { display: grid; gap: 4px; }
.mzh-agotado b { font: 800 italic 20px/1.1 var(--kf); text-transform: uppercase; }
.mzh-agotado span { font: 500 13.5px/1.4 var(--ui); color: #C9CAD1; } .mzh-agotado a { color: #FF8A98; font-weight: 800; }
.mzh-premios { display: grid; gap: 24px; margin-top: 24px; min-width: 0; }
.mzh-h { margin: 0 0 12px; font: 800 italic 24px/1.02 var(--kf); text-transform: uppercase; color: #FFFFFF; }
.mzh-g { min-width: 0; }
.mzh-g:first-child { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.mzh-g:first-child .mzh-h { margin-bottom: 0; }
.mzh-g:first-child .mzc-it { margin: 0; }
.mzh-ref { margin: 0; text-align: center; font: 600 10.5px/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #8E9099; }
/* Los Mercedes: «PRIMER BENDECIDO» grande arriba DENTRO del cuadro, foto, y el nombre ABAJO */
.mzc-it { margin: 0 0 16px; padding: 18px 14px 14px; border-radius: 26px; border: 1px solid #24252B; background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #17181C, #0B0B0D); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .06); }
.mzc-lugar { margin: 0 4px 14px; padding: 0 .05em 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font: 800 italic clamp(28px, 8vw, 46px)/.9 var(--kf); text-transform: uppercase; letter-spacing: -.01em; background: linear-gradient(95deg, #FF2E4A, #FF6A7D 55%, #FFB3BD); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mzc-it.c250 .mzc-lugar { background: linear-gradient(105deg, #A5A9B2 0%, #FFFFFF 18%, #E4E6EA 30%, #8B8F98 48%, #F2F3F5 62%, #FFFFFF 72%, #A5A9B2 100%); -webkit-background-clip: text; background-clip: text; }
.mzc-marco { padding: 4px; border-radius: 20px; background: linear-gradient(135deg, #8B8F98 0%, #FFFFFF 22%, #A5A9B2 45%, #F2F3F5 62%, #8B8F98 100%); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 1); }
.mzc-marco img { border-radius: 16px; }
.mzc-mod { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 14px 4px 2px; }
.mzc-mod strong { font: 800 italic 26px/1 var(--kf); text-transform: uppercase; color: #FFFFFF; }
.mzc-mod em { font: 600 12.5px/1.2 var(--ui); color: #A3A5AE; }
/* iPhone en pedestal y billetes ×40 (el «Showroom» que eligió) */
.mzs-escena { padding: 14px; border-radius: 26px; border: 1px solid #24252B; background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #17181C, #0B0B0D); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 1); }
.mzs-tels { display: flex; gap: 12px; }
.mzs-tel { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; }
.mzs-luz { display: grid; place-items: center; width: 100%; height: 200px; border-radius: 18px; }
.mzs-tel.b .mzs-luz { background: radial-gradient(ellipse 62% 66% at 50% 42%, rgba(255, 46, 74, .45), rgba(255, 46, 74, 0) 70%); }
.mzs-tel.a .mzs-luz { background: radial-gradient(ellipse 62% 66% at 50% 42%, rgba(90, 150, 255, .42), rgba(90, 150, 255, 0) 70%); }
.mzs-luz img { width: auto; height: 172px; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .3)); }
.mzs-ped { display: block; width: 66%; height: 14px; margin-top: 4px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #5A5C64, #1B1C21 72%); box-shadow: 0 10px 16px -6px rgba(0, 0, 0, .9); }
.mzs-tel figcaption { display: grid; justify-items: center; gap: 4px; margin-top: 12px; text-align: center; }
.mzs-tel figcaption i { padding: 5px 14px 5px 10px; font: 800 italic 12px/1 var(--kf); text-transform: uppercase; color: #FFFFFF; background: linear-gradient(135deg, #FF3B55, #C20F28); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); }
.mzs-tel figcaption b { font: 800 italic 19px/1.02 var(--kf); text-transform: uppercase; color: #FFFFFF; }
.mzs-bend { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 12px; border-color: #1D3A2C; background: radial-gradient(ellipse 70% 70% at 30% 50%, rgba(47, 168, 116, .32), rgba(47, 168, 116, 0) 70%), linear-gradient(180deg, #101A15, #0A0F0C); }
.mzs-bill img { filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .28)); }
.mzs-40 { display: grid; gap: 4px; margin: 0; }
.mzs-40 b { padding-right: .05em; font: 800 italic 56px/.9 var(--kf); background: linear-gradient(165deg, #9BE6C3, #3CC98C 45%, #1F9A63); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mzs-40 span { font: 800 italic 22px/1 var(--kf); color: #FFFFFF; }
.mzs-40 small { display: block; margin-top: 4px; font: 600 12px/1.2 var(--ui); color: #A3A5AE; }
[data-participar] { cursor: pointer; transition: transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[data-participar]:active { transform: scale(.985); }
[data-participar]:focus-visible { outline: 3px solid rgba(225, 17, 47, .65); outline-offset: 4px; }
.mzh-actions { margin-top: 24px; }
.mzh-mis { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 22px; text-decoration: none; color: #FFFFFF; background: linear-gradient(160deg, #17181C, #0E0F12); border: 1px solid #24252B; }
.mzh-mis span { flex: 1; display: grid; gap: 4px; min-width: 0; }
.mzh-mis small { font: 800 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: #FF6A7D; }
.mzh-mis b { font: 800 italic 22px/1.05 var(--kf); text-transform: uppercase; }
.mzh-mis em { font: 500 14px/1.4 var(--ui); color: #C9CAD1; }
.mzh-mis > i { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #0B0B0D; background: #FFFFFF; }
/* Comprar flota sin ocultar el contenido final: la página reserva espacio bajo el pie. */
html[data-tema="mercedes"] { scroll-padding-bottom: 120px; }
html[data-tema="mercedes"] body.campaign-app { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.mzh-compra { position: fixed; z-index: 35; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); width: min(calc(100vw - 32px), 440px); transform: translateX(-50%); }
html[data-tema="mercedes"].pz-agotado .mzh-compra { display: none; }
.mzh-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 80px; margin: 0; padding: 0 10px 0 24px; border: 0; border-radius: 22px; cursor: pointer; color: #FFFFFF; background: linear-gradient(135deg, #FF3B55, #E1112F 45%, #9C0B21); box-shadow: 0 8px 22px -10px rgba(225, 17, 47, .75), 0 0 0 1px rgba(255, 255, 255, .12) inset; font-family: var(--ui); touch-action: manipulation; }
.mzh-cta-t { display: grid; gap: 3px; text-align: left; }
.mzh-cta-t b { font: 800 italic 25px/1 var(--kf); text-transform: uppercase; letter-spacing: .01em; }
.mzh-cta > i { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #C20F28; background: #FFFFFF; }
.mzh-cta > i svg { width: 22px; height: 22px; }
.mzh-cta:active { transform: scale(.98); }
.mzh-cta[disabled] { opacity: .65; cursor: default; }
html[data-tema="mercedes"] .whatsapp-float { display: none !important; }
@media (min-width: 900px) {
.mzh { padding-top: 32px; }
.mzh-premios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mzh-g:first-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mzh-g:first-child .mzh-h, .mzh-ref { grid-column: 1 / -1; }
.mzh-mis { max-width: 560px; margin: 0 auto; }
.mzh-compra { right: 24px; left: auto; width: 360px; transform: none; }
}
/* ── Compra EN ORDEN (un paso a la vez) ─────────────────────────────────────────────────────── */
html[data-tema="mercedes"] #checkout[data-mzw-paso="1"] :is(#purchaseContact, #purchasePayment, #purchaseReceipt),
html[data-tema="mercedes"] #checkout[data-mzw-paso="2"] :is(#purchaseTickets, #purchasePayment, #purchaseReceipt),
html[data-tema="mercedes"] #checkout[data-mzw-paso="3"] :is(#purchaseTickets, #purchaseContact, #purchaseReceipt),
html[data-tema="mercedes"] #checkout[data-mzw-paso="4"] :is(#purchaseTickets, #purchaseContact, #purchasePayment) { display: none !important; }
html[data-tema="mercedes"] #checkout:not([data-mzw-paso="1"]) .checkout-summary { display: none !important; }
html[data-tema="mercedes"] #checkout[data-mzw-paso="1"] .checkout-details { display: none !important; }
html[data-tema="mercedes"] #checkout:not([data-mzw-paso="4"]) :is(#nextStep, .submission-note) { display: none !important; }
html[data-tema="mercedes"] #checkout[data-mzw-paso="4"] #mzwSig, html[data-tema="mercedes"] #checkout[data-mzw-paso="1"] #mzwAtras { display: none !important; }
html[data-tema="mercedes"] #checkout .mzw-actual { outline: 2px solid #E1112F; outline-offset: -2px; border-radius: 12px; }
.mzw { --kf: 'Kanit', 'Barlow Condensed', Arial, sans-serif; --ui: 'Plus Jakarta Sans', Arial, sans-serif; display: grid; gap: 8px; width: 100%; font-family: var(--ui); }
.mzw-err { margin: 0; padding: 9px 12px; text-align: center; border-radius: 12px; font: 700 13px/1.3 var(--ui); color: #FFFFFF; background: #C20F28; }
.mzw-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mzw-tot > span { display: grid; gap: 3px; }
.mzw-tot em { font: 800 11px/1 var(--ui); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #8E9099; }
.mzw-tot small { font: 600 11.5px/1.2 var(--ui); color: #8E9099; }
.mzw-tot b { font: 800 italic 24px/1 var(--kf); color: #FFFFFF; }
.mzw-b { display: flex; gap: 8px; }
.mzw-atras { flex: none; min-height: 60px; padding: 0 18px; border-radius: 999px; border: 1px solid #34353C; background: #1B1C21; color: #FFFFFF; font: 800 14px/1 var(--ui); cursor: pointer; }
.mzw-sig { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 10px 0 22px; border: 0; border-radius: 999px; cursor: pointer; color: #FFFFFF; background: linear-gradient(135deg, #FF3B55, #E1112F 45%, #9C0B21); box-shadow: 0 8px 22px -10px rgba(225, 17, 47, .75); }
.mzw-sig > span { display: grid; gap: 3px; text-align: left; }
.mzw-sig b { font: 800 italic 23px/1 var(--kf); text-transform: uppercase; }
.mzw-sig small { font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.mzw-sig > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #C20F28; background: #FFFFFF; }
html[data-tema="mercedes"] #checkout #nextStep { width: 100%; min-height: 60px; border-radius: 999px; }
/* Paquetes en 3 columnas, compactos (el paso 1 entero en la pantalla) */
html[data-tema="mercedes"] #paquetesGrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html[data-tema="mercedes"] #paquetesGrid button { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 76px; padding: 10px 4px; border-radius: 16px; }
html[data-tema="mercedes"] #paquetesGrid button .bol { order: 1; font: 800 italic 19px/1 var(--pz-carrera, 'Kanit'); text-transform: uppercase; }
html[data-tema="mercedes"] #paquetesGrid button .monto { order: 2; font-size: 13px; }
/* Cuentas: los datos (número completo, titular, cédula, monto) salen al ELEGIR la cuenta */
html[data-tema="mercedes"] #paymentMethods .pay-option:not(.selected) :is(.pay-account, .pay-holder, .pay-rate, .pay-instructions, .pay-bottom, .pay-open) { display: none !important; }
/* 29 oct 2026: «Abrir PayPal» también sale solo al elegir la cuenta (antes quedaba suelto en la tarjeta cerrada). */
/* ── Ajustes tras la prueba en el banco (15 oct 2026) ── */
/* El inicio nuevo lleva su propio margen a los lados (el contenedor de la web no lo trae) */
.mzh { padding-left: 16px; padding-right: 16px; max-width: 1160px; margin: 0 auto; }
@media (min-width: 900px) { .mzh { padding-left: 24px; padding-right: 24px; } }
/* Paquetes: número de boletos grande arriba, precio rojo abajo; nada se corta */
html[data-tema="mercedes"].campaign-app #checkout .pq2-grid, html[data-tema="mercedes"] .campaign-app #checkout .pq2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html[data-tema="mercedes"] .campaign-app #checkout .pq2 button { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 78px; padding: 12px 4px 10px; text-align: center; }
html[data-tema="mercedes"] .campaign-app #checkout .pq2 button::before, html[data-tema="mercedes"] .campaign-app #checkout .pq2 button::after { content: none !important; display: none !important; }
html[data-tema="mercedes"] .campaign-app #checkout .pq2 .bol { order: 1; display: block; margin: 0; padding: 0; transform: none; background: none !important; font: 800 italic 19px/1 var(--pz-carrera, 'Kanit'); letter-spacing: 0; text-transform: uppercase; color: #FFFFFF; }
html[data-tema="mercedes"] .campaign-app #checkout .pq2 .monto { order: 2; display: block; margin: 0; font: 800 13px/1 var(--pz-ui, 'Plus Jakarta Sans'); white-space: nowrap; color: #FF6A7D; }
html[data-tema="mercedes"] .campaign-app #checkout .pq2 button.sel { background: linear-gradient(160deg, #FF3B55, #C20F28) !important; border-color: #FF3B55 !important; }
html[data-tema="mercedes"] .campaign-app #checkout .pq2 button.sel .monto { color: #FFFFFF; }
/* Cuentas en UNA columna: al elegir una, sus datos (número completo, titular, cédula) caben a lo ancho */
html[data-tema="mercedes"] .campaign-app #checkout .payment-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
html[data-tema="mercedes"] .campaign-app #checkout .pay-account strong { overflow-wrap: anywhere; }
/* El pie de la compra: «Siguiente» a todo lo ancho */
html[data-tema="mercedes"] .campaign-app #checkout .mzw { justify-self: stretch; width: 100%; }
html[data-tema="mercedes"] .campaign-app #checkout .mzw-b { width: 100%; }
html[data-tema="mercedes"] .campaign-app #checkout .mzw-sig { flex: 1 1 auto; width: auto; max-width: none; }
html[data-tema="mercedes"] .campaign-app #checkout #checkoutFooter { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; justify-items: stretch !important; }
/* Menú de arriba en teléfonos chicos: que «Verificador» no se salga de la pantalla (con la Yamaha queda como siempre) */
@media (max-width: 400px) {
html[data-tema="mercedes"] .topbar .brand-wordmark { font-size: 17px; }
html[data-tema="mercedes"] .topbar .brand-wordmark small { display: none; }
html[data-tema="mercedes"] .topbar .brand-logo { width: 38px; height: 38px; }
html[data-tema="mercedes"] .topbar .header-navigation { margin-left: auto; min-width: 0; }
html[data-tema="mercedes"] .topbar .ticket-lookup-link { padding: 8px 10px; }
}
/* Sin doble toque para agrandar (el pellizco siempre funciona para poder achicar) */
html[data-tema="mercedes"], html[data-tema="mercedes"] body { touch-action: manipulation; }
/* Aviso del correo EN ROJO (Angel, 15 oct 2026: «en correo electrónico abajo ponle un mensaje en rojo…»): reemplaza la pista gris */
html[data-tema="mercedes"] #checkout .correo-hint { display: none !important; }
html[data-tema="mercedes"] #checkout .mz-correo-rojo { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 9px 11px; border-radius: 12px; font: 700 12.5px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; color: #FF8A98; background: rgba(225, 17, 47, .12); border: 1px solid rgba(225, 17, 47, .38); text-transform: none; letter-spacing: 0; }
html[data-tema="mercedes"] #checkout .mz-correo-rojo svg { flex: 0 0 16px; width: 16px !important; height: 16px !important; min-width: 0; max-width: 16px; margin: 1px 0 0; position: static; }
html[data-tema="mercedes"] #checkout .mz-correo-rojo span { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: 0; }