/* ========================================================================= CHECKOUT EDITORIAL — Override visual del modal de /comprar-bono/ Creado 2026-05-26 como reemplazo CSS-only del rediseño que rompió el JS. Este archivo NO toca HTML ni JS. Solo overrides visuales con suficiente especificidad para vencer los estilos inline del modal original. Para deshabilitar el rediseño editorial en caso de problema visual, borrar la línea del de /comprar-bono/index.html — el checkout vuelve a su aspecto previo. Paleta: cream + burgundy + gold (#C4A265). Sin emojis. Sin rosa. Tipografías: Playfair Display + Space Grotesk + Cormorant Garamond. ========================================================================= */ /* ---------- TRANSPARENCIA + REVELAR EL PORTAL DETRÁS ---------- El sitio oculta TODO el body con display:none cuando se entra con ?service= o ?plan= (data-direct-checkout="1"). Eso hace que NO HAYA nada detrás del modal para ver. Acá REVELAMOS el contenido del portal con opacidad baja + blur — así el cliente siente que sigue en el sitio, solo que con el checkout encima como una capa flotante editorial. */ /* 1A. Caso DEEPLINK (?service= / ?plan=): el body está oculto por display:none. REVELAMOS con blur + opacity para que el catálogo se vea borroso detrás. */ html[data-direct-checkout="1"] body > *:not(#modalComprador):not(#modalMadreSelector):not(#direct-checkout-overlay):not([id*="modal"]):not([id*="Modal"]):not(script):not(style):not(noscript) { display: block !important; opacity: .65 !important; filter: blur(2px) saturate(.95) !important; pointer-events: none !important; user-select: none !important; } /* 1B. Caso CATÁLOGO (click ELEGIR Y PAGAR / Comprar bono desde la página): el body YA está visible. Aplicamos blur+opacity para que se vea IGUAL al deeplink — sensación uniforme en todo el portal cuando el modal abre. */ body:has(#modalComprador.active) > *:not(#modalComprador):not(#modalMadreSelector):not(#direct-checkout-overlay):not([id*="modal"]):not([id*="Modal"]):not(script):not(style):not(noscript), body:has(#modalMadreSelector.active) > *:not(#modalComprador):not(#modalMadreSelector):not(#direct-checkout-overlay):not([id*="modal"]):not([id*="Modal"]):not(script):not(style):not(noscript) { opacity: .65 !important; filter: blur(2px) saturate(.95) !important; pointer-events: none !important; user-select: none !important; transition: opacity .25s ease, filter .25s ease; } /* Preloader: prácticamente invisible — solo un velo cream mínimo */ html[data-direct-checkout="1"] #direct-checkout-overlay { background: linear-gradient(180deg, rgba(250,247,242,.08), rgba(244,237,224,.08)) !important; } /* 2. Overlay del modal: MÁXIMA transparencia editorial — apenas un velo cromático del portal (cream → gold → burgundy) para mantener foco en el modal pero dejar ver claramente el catálogo detrás. */ .modal-overlay { background: linear-gradient(180deg, rgba(250,247,242,.10) 0%, rgba(196,162,101,.08) 35%, rgba(58,29,34,.18) 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .modal-overlay .modal { position: relative; z-index: 1; } /* ---------- CARD del checkout: glassmorphism cream ---------- */ .modal-overlay .modal { background: linear-gradient(180deg, #faf4e8 0%, #f5eedc 100%) !important; border-radius: 18px !important; border: 1px solid rgba(196,162,101,.32); box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(196,162,101,.12), inset 0 1px 0 rgba(255,255,255,.55) !important; max-width: 540px !important; padding: 0 !important; overflow: hidden; } /* ---------- HEADER editorial: barra burgundy con marca + SSL ---------- */ .modal-overlay .modal::before { content: 'SERENITY · SPA · Pago seguro · SSL 256-bit'; display: block; background: linear-gradient(135deg, #3a1d22 0%, #2a1418 100%); color: #C4A265; font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; padding: .85rem 1.5rem; border-bottom: 1px solid rgba(196,162,101,.35); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- TÍTULO h3 editorial ---------- */ .modal-overlay .modal h3#modalTitulo { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 1.65rem !important; color: #3a1d22 !important; letter-spacing: -.01em; padding: 1.5rem 1.5rem .15rem !important; margin: 0 !important; line-height: 1.2; } /* Párrafo descriptivo después del h3 — Space Grotesk neutro */ .modal-overlay .modal h3#modalTitulo + p { font-family: 'Space Grotesk', sans-serif !important; font-size: .82rem !important; color: #6b5b4d !important; padding: 0 1.5rem .9rem; margin: 0 !important; line-height: 1.55; border-bottom: 1px solid rgba(196,162,101,.18); margin-bottom: 1.1rem !important; } /* ---------- TRUST STRIP editorial: leyenda + logos monocromos ---------- El texto va vía ::after del subtítulo. Los logos van vía ::before del order-summary (para que aparezcan justo encima del resumen del pedido, reforzando confianza antes de mostrar el monto a pagar). */ .modal-overlay .modal h3#modalTitulo + p::after { content: 'Pago procesado por Bold · pasarela autorizada por la Superintendencia Financiera de Colombia'; display: block; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed rgba(196,162,101,.4); font-size: .72rem; color: #8a7a64; letter-spacing: .02em; line-height: 1.5; font-style: italic; } /* Fila de logos de medios de pago en monocromo, justo encima del resumen del pedido. Texto SVG limpio + circles para Mastercard. Color burgundy oscuro para máxima visibilidad sobre el cream del card. */ .modal-overlay .order-summary::before { content: ''; display: block; height: 32px; width: 100%; margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px dashed rgba(196,162,101,.4); background-repeat: no-repeat; background-position: center top; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 28'%3E%3Cg fill='%233a1d22' font-family='Helvetica,Arial,sans-serif'%3E%3Ctext x='34' y='20' text-anchor='middle' font-weight='900' font-size='16' font-style='italic'%3EVISA%3C/text%3E%3Ccircle cx='100' cy='14' r='9' opacity='.85'/%3E%3Ccircle cx='114' cy='14' r='9' opacity='.5'/%3E%3Ctext x='168' y='20' text-anchor='middle' font-weight='800' font-size='10'%3EAMEX%3C/text%3E%3Ctext x='225' y='20' text-anchor='middle' font-weight='800' font-size='14'%3EPSE%3C/text%3E%3Ctext x='285' y='20' text-anchor='middle' font-weight='700' font-size='13'%3Enequi%3C/text%3E%3Ctext x='370' y='20' text-anchor='middle' font-weight='700' font-size='11'%3EBancolombia%3C/text%3E%3Ctext x='460' y='20' text-anchor='middle' font-weight='700' font-size='11'%3EDaviplata%3C/text%3E%3Ctext x='540' y='20' text-anchor='middle' font-weight='700' font-size='10'%3EDiners%3C/text%3E%3C/g%3E%3C/svg%3E"); } @media (max-width: 560px) { .modal-overlay .order-summary::before { height: 26px; } } /* ---------- ORDER SUMMARY: cream con borde gold (no rosa) ---------- */ .modal-overlay .order-summary { background: linear-gradient(135deg, #faf6ec 0%, #f3ead4 100%) !important; border: 1px solid rgba(196,162,101,.35) !important; border-radius: 12px !important; padding: 1.1rem 1.2rem !important; margin: 0 1.5rem 1.2rem !important; box-shadow: 0 4px 14px -6px rgba(58,29,34,.12); } .modal-overlay .os-plan { font-family: 'Playfair Display', serif !important; font-weight: 500 !important; font-size: 1.05rem !important; color: #3a1d22 !important; } .modal-overlay .os-unit { font-family: 'Space Grotesk', sans-serif !important; font-size: .76rem !important; color: #8a7a64 !important; letter-spacing: .04em; } .modal-overlay .os-row label { font-family: 'Space Grotesk', sans-serif !important; font-size: .8rem !important; color: #6b5b4d !important; } .modal-overlay .os-total { border-top: 1px solid rgba(196,162,101,.4) !important; } .modal-overlay .os-total-label { font-family: 'Space Grotesk', sans-serif !important; font-size: .68rem !important; letter-spacing: .22em !important; color: #8a7a64 !important; text-transform: uppercase; font-weight: 600 !important; } .modal-overlay .os-total-amount { font-family: 'Playfair Display', serif !important; font-size: 1.85rem !important; color: #3a1d22 !important; font-weight: 500 !important; } .modal-overlay .os-hint { font-family: 'Space Grotesk', sans-serif !important; font-style: italic; color: #8a7a64 !important; } /* ---------- ADDON DECORACIÓN: gold sutil, sin rosa ---------- */ /* Override del style inline rosa con !important + fondo gold dashed editorial */ .modal-overlay .os-addon#osAddonDecoracion { background: linear-gradient(135deg, rgba(196,162,101,.10), rgba(196,162,101,.04)) !important; border: 1px dashed rgba(196,162,101,.5) !important; border-radius: 10px !important; padding: .95rem 1.05rem !important; } .modal-overlay .os-addon#osAddonDecoracion label strong { color: #3a1d22 !important; font-family: 'Playfair Display', serif !important; font-weight: 500 !important; font-size: 1rem !important; } .modal-overlay .os-addon#osAddonDecoracion label span span { color: #6b5b4d !important; font-family: 'Space Grotesk', sans-serif !important; font-size: .82rem !important; } .modal-overlay .os-addon#osAddonDecoracion label span strong[style*="color:#a83f5e"] { color: #C4A265 !important; font-family: 'Playfair Display', serif !important; font-size: 1rem !important; font-weight: 500 !important; } .modal-overlay .os-addon#osAddonDecoracion input[type=checkbox] { accent-color: #C4A265; } .modal-overlay .os-addon-line#osAddonLine { color: #C4A265 !important; font-family: 'Space Grotesk', sans-serif !important; font-style: italic; } /* ---------- FORM INPUTS editorial ---------- */ .modal-overlay .modal form#formComprador { padding: 0 1.5rem; } .modal-overlay .modal label { font-family: 'Space Grotesk', sans-serif !important; font-size: .72rem !important; letter-spacing: .12em; text-transform: uppercase; color: #6b5b4d !important; margin-top: 1.1rem !important; margin-bottom: .35rem !important; font-weight: 600 !important; } .modal-overlay .modal input[type=text], .modal-overlay .modal input[type=email], .modal-overlay .modal input[type=tel] { background: #fff !important; border: 1.5px solid rgba(58,29,34,.12) !important; border-radius: 10px !important; padding: .9rem 1.05rem !important; font-family: 'Space Grotesk', sans-serif !important; font-size: .95rem !important; color: #3a1d22 !important; transition: border-color .2s, box-shadow .2s; } .modal-overlay .modal input[type=text]:focus, .modal-overlay .modal input[type=email]:focus, .modal-overlay .modal input[type=tel]:focus { border-color: #C4A265 !important; box-shadow: 0 0 0 3px rgba(196,162,101,.15) !important; outline: none !important; } /* ---------- CTA EDITORIAL: gold pill sobre cream ---------- */ .modal-overlay .modal-actions { padding: .5rem 1.5rem 0; gap: .7rem !important; } .modal-overlay .modal-actions .btn-primary { background: linear-gradient(180deg, #C4A265 0%, #a8884f 100%) !important; color: #1a0c0f !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; font-size: .85rem !important; border-radius: 999px !important; padding: 1.05rem 1.6rem !important; border: none !important; box-shadow: 0 12px 30px -10px rgba(196,162,101,.55), inset 0 1px 0 rgba(255,255,255,.35) !important; transition: transform .2s, box-shadow .25s; } .modal-overlay .modal-actions .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(196,162,101,.7), inset 0 1px 0 rgba(255,255,255,.4) !important; } .modal-overlay .modal-actions .btn-primary:active:not(:disabled) { transform: translateY(0); } .modal-overlay .modal-actions .btn-secondary { background: transparent !important; color: #6b5b4d !important; border: 1px solid rgba(58,29,34,.2) !important; border-radius: 999px !important; font-family: 'Space Grotesk', sans-serif !important; font-size: .78rem !important; letter-spacing: .1em !important; text-transform: uppercase; padding: 1.05rem 1.4rem !important; } /* ---------- FOOTER editorial via ::after del form ---------- */ .modal-overlay .modal form#formComprador::after { content: 'Voucher digital con código único entregado en menos de 60 segundos · Pago protegido por Bold · PCI-DSS Nivel 1'; display: block; margin: 1rem -1.5rem -1rem; padding: 1rem 1.5rem; background: rgba(58,29,34,.04); border-top: 1px solid rgba(196,162,101,.2); font-family: 'Space Grotesk', sans-serif; font-size: .68rem; color: #8a7a64; text-align: center; letter-spacing: .02em; line-height: 1.6; } /* ---------- TRUST badges existentes — ocultos (ya tenemos los logos editoriales) ---------- */ .modal-overlay .modal .trust-badges { display: none; } /* ---------- MOBILE responsive ---------- */ @media (max-width: 560px) { .modal-overlay .modal { max-width: 100% !important; border-radius: 14px !important; } .modal-overlay .modal::before { font-size: .58rem; letter-spacing: .15em; padding: .7rem 1rem; } .modal-overlay .modal h3#modalTitulo { font-size: 1.35rem !important; padding: 1.2rem 1.1rem .15rem !important; } .modal-overlay .modal h3#modalTitulo + p { padding: 0 1.1rem .8rem; } .modal-overlay .order-summary { margin: 0 1.1rem 1rem !important; padding: .95rem 1rem !important; } .modal-overlay .modal form#formComprador { padding: 0 1.1rem; } .modal-overlay .modal-actions { padding: .4rem 1.1rem 0; flex-direction: column-reverse; } .modal-overlay .modal-actions .btn-primary, .modal-overlay .modal-actions .btn-secondary { width: 100%; padding: .95rem 1.2rem !important; } }