/* ========================================================================= MG Quiter Stock — Formulario "Me interesa" (ficha VO) → Walcu. Paleta de la ficha: negro (#111114) / gris / blanco. SIN rojo. Autocontenido: define sus propias variables (el modal y el sticky se reubican en por JS y necesitan las variables fuera de .qvs-walcu). ========================================================================= */ .qvs-walcu, .qvs-walcu-modal, .qvs-walcu-sticky { --qvs-ink: #111114; --qvs-text: #505062; --qvs-muted: #8A8A9A; --qvs-line: #E7E7EC; --qvs-bg: #FFFFFF; --qvs-radius: 16px; --qvs-pill: 100px; --qvs-font: "MG", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--qvs-font); box-sizing: border-box; } .qvs-walcu *, .qvs-walcu *::before, .qvs-walcu *::after, .qvs-walcu-modal *, .qvs-walcu-modal *::before, .qvs-walcu-modal *::after, .qvs-walcu-sticky *, .qvs-walcu-sticky *::before, .qvs-walcu-sticky *::after { box-sizing: border-box; } /* El atributo [hidden] debe ganar a nuestras reglas de display (desplegable de concesionario oculto hasta elegir isla mayor). */ .qvs-walcu [hidden], .qvs-walcu-modal [hidden], .qvs-walcu-sticky [hidden] { display: none !important; } /* ------------------------------------------------------------------ Botón CTA Sólido negro, 100% del ancho del contenedor. Reset agresivo para que el tema no inyecte sus estilos (rosa, iconos, sombras raras). */ .qvs-walcu-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 15px 32px; font-family: var(--qvs-font); font-size: 16px; font-weight: 600; line-height: 1; color: #fff !important; /* blindaje: el tema pinta el texto de button:hover en rosa */ background: var(--qvs-ink); border: 2px solid var(--qvs-ink); border-radius: var(--qvs-pill); cursor: pointer; white-space: nowrap; text-decoration: none; -webkit-appearance: none; appearance: none; background-image: none; box-shadow: none; transition: background .18s ease, color .18s ease, transform .18s ease; } .qvs-walcu-cta:hover, .qvs-walcu-cta:focus { background: #000; color: #fff !important; transform: translateY(-1px); } .qvs-walcu-cta:focus-visible { outline: 3px solid rgba(17, 17, 20, .18); outline-offset: 2px; } /* El botón "de su sitio" (bajo las specs) lleva aire arriba. */ .qvs-walcu > .qvs-walcu-cta { margin-top: 24px; } /* --------------------------------------------------- Barra sticky (solo móvil) Aparece al hacer scroll hacia abajo, solo mientras la ficha está en pantalla. */ .qvs-walcu-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--qvs-line); box-shadow: 0 -6px 22px rgba(17, 17, 20, .10); transform: translateY(130%); transition: transform .28s cubic-bezier(.22, .61, .36, 1); } .qvs-walcu-sticky .qvs-walcu-cta { margin: 0; } @media (max-width: 767px) { .qvs-walcu-sticky { display: block; } } .qvs-walcu-sticky.is-visible { transform: translateY(0); } /* --------------------------------------------------------------------- Modal */ body.qvs-walcu-lock { overflow: hidden; } .qvs-walcu-modal[hidden] { display: none; } .qvs-walcu-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; } .qvs-walcu-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 20, .55); } .qvs-walcu-dialog { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--qvs-bg); border-radius: var(--qvs-radius); box-shadow: 0 24px 60px rgba(17, 17, 20, .28); padding: 28px clamp(20px, 4vw, 34px) 30px; animation: qvs-walcu-in .18s ease; } @keyframes qvs-walcu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .qvs-walcu-x { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; padding: 0; font-size: 26px; line-height: 1; color: var(--qvs-muted); background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .15s ease; } /* Blindaje vs tema: [type=button]:hover y button:hover del tema pintan #cc3366. Subimos especificidad (ancestro .qvs-walcu-modal) + !important para ganar. */ .qvs-walcu-modal .qvs-walcu-x { color: var(--qvs-muted) !important; } .qvs-walcu-modal .qvs-walcu-x:hover, .qvs-walcu-modal .qvs-walcu-x:focus { color: var(--qvs-ink) !important; } .qvs-walcu-title { margin: 0 34px 2px 0; font-size: 22px; font-weight: 600; color: var(--qvs-ink); } .qvs-walcu-veh { margin: 0 0 20px; font-size: 15px; color: var(--qvs-muted); font-weight: 500; } .qvs-walcu-row { display: flex; gap: 12px; margin-bottom: 12px; } .qvs-walcu-row > label { flex: 1 1 0; min-width: 0; } @media (max-width: 460px) { .qvs-walcu-row { flex-direction: column; gap: 12px; } } .qvs-walcu-form label { display: block; font-size: 13px; font-weight: 600; color: var(--qvs-ink); } .qvs-walcu-form input[type="text"], .qvs-walcu-form input[type="email"], .qvs-walcu-form input[type="tel"], .qvs-walcu-form select { width: 100%; height: 48px; margin-top: 5px; padding: 0 14px; font-family: var(--qvs-font); font-size: 15px; color: var(--qvs-ink); background: var(--qvs-bg); border: 1px solid var(--qvs-line); border-radius: 12px; -webkit-appearance: none; appearance: none; } .qvs-walcu-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A9A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .qvs-walcu-form input:focus, .qvs-walcu-form select:focus { outline: none; border-color: var(--qvs-ink); box-shadow: 0 0 0 3px rgba(17, 17, 20, .08); } .qvs-walcu-rgpd { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0 20px; font-size: 13px; font-weight: 400; color: var(--qvs-text); line-height: 1.4; } .qvs-walcu-rgpd input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--qvs-ink); } .qvs-walcu-rgpd a { color: var(--qvs-ink); text-decoration: underline; } .qvs-walcu-modal .qvs-walcu-rgpd a:hover, .qvs-walcu-modal .qvs-walcu-rgpd a:focus { color: var(--qvs-ink) !important; } .qvs-walcu-submit { width: 100%; min-height: 52px; font-family: var(--qvs-font); font-size: 16px; font-weight: 600; color: #fff !important; background: var(--qvs-ink); border: 0; border-radius: var(--qvs-pill); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: none; box-shadow: none; transition: background .18s ease; } .qvs-walcu-submit:hover, .qvs-walcu-submit:focus { background: #000; color: #fff !important; } .qvs-walcu-submit:disabled, .qvs-walcu-submit.is-loading { opacity: .6; cursor: default; } .qvs-walcu-msg { margin: 12px 0 0; font-size: 14px; min-height: 1em; } .qvs-walcu-msg.is-ok { color: #12805c; font-weight: 600; } .qvs-walcu-msg.is-err { color: #b3261e; font-weight: 600; } .qvs-walcu-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }