/* METTASER · Popup GHL (lead capture + calendar) */ /* Noise pattern global — rompe el aspecto plano de los fondos negros sin pelearse con ningún z-index de las landings. Aplica solo a páginas que declaren `data-noise="true"` en (las 4 landings). */ [data-noise="true"]::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.55; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; } .ghl-overlay { --ghl-accent: #C9A84C; --ghl-bg: #0D0D0D; --ghl-surface: #1A1A1A; --ghl-surface-2: #252525; --ghl-border: rgba(255, 255, 255, 0.08); --ghl-muted: #8A8478; --ghl-white: #FAFAF8; --ghl-danger: #E57373; --ghl-ok: #81C784; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; font-family: 'Inter', system-ui, -apple-system, sans-serif; animation: ghlFadeIn 0.25s ease both; } .ghl-overlay.open { display: flex; } @keyframes ghlFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ghlSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .ghl-modal { width: 100%; max-width: 560px; background: var(--ghl-surface); border: 1px solid var(--ghl-border); border-top: 3px solid var(--ghl-accent); border-radius: 8px; position: relative; animation: ghlSlideUp 0.3s ease both; overflow: hidden; max-height: calc(100vh - 40px); display: flex; flex-direction: column; } .ghl-modal.wide { max-width: 760px; } .ghl-close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: var(--ghl-muted); font-size: 24px; line-height: 1; width: 36px; height: 36px; border-radius: 4px; cursor: pointer; transition: color 0.15s, background 0.15s; z-index: 2; } .ghl-close:hover { color: var(--ghl-white); background: rgba(255, 255, 255, 0.06); } .ghl-content { padding: 44px 40px 36px; overflow-y: auto; } .ghl-badge { display: inline-block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--ghl-accent); margin-bottom: 14px; } .ghl-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 3.6vw, 30px); font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ghl-white); } .ghl-title em { font-style: italic; color: var(--ghl-accent); font-weight: 700; } .ghl-subtitle { font-size: 14px; color: var(--ghl-muted); line-height: 1.55; margin: 0 0 24px; } .ghl-form { display: flex; flex-direction: column; gap: 14px; } .ghl-field { display: flex; flex-direction: column; gap: 6px; } .ghl-field label { font-size: 12px; font-weight: 600; color: var(--ghl-white); letter-spacing: 0.02em; } .ghl-field label .req { color: var(--ghl-accent); margin-left: 2px; } .ghl-field input { appearance: none; width: 100%; background: var(--ghl-surface-2); border: 1px solid var(--ghl-border); border-radius: 4px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ghl-white); transition: border-color 0.15s, background 0.15s; } .ghl-field input::placeholder { color: var(--ghl-muted); } .ghl-field input:focus { outline: none; border-color: var(--ghl-accent); background: rgba(255, 255, 255, 0.03); } .ghl-field.error input { border-color: var(--ghl-danger); } .ghl-field .hint { font-size: 12px; color: var(--ghl-muted); } .ghl-field.error .hint { color: var(--ghl-danger); } .ghl-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; width: 0 !important; } .ghl-submit { margin-top: 10px; background: var(--ghl-accent); color: #0D0D0D; border: none; border-radius: 4px; padding: 15px 24px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.15s, opacity 0.15s, filter 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .ghl-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .ghl-submit:disabled { opacity: 0.6; cursor: not-allowed; } .ghl-submit .spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: #0D0D0D; border-radius: 50%; animation: ghlSpin 0.8s linear infinite; } .ghl-submit.loading .spinner { display: inline-block; } .ghl-submit.loading .label { opacity: 0.7; } @keyframes ghlSpin { to { transform: rotate(360deg); } } .ghl-legal { font-size: 11px; color: var(--ghl-muted); line-height: 1.5; margin-top: 12px; text-align: center; } .ghl-error-box { background: rgba(229, 115, 115, 0.08); border: 1px solid rgba(229, 115, 115, 0.25); color: var(--ghl-danger); border-radius: 4px; padding: 10px 14px; font-size: 13px; line-height: 1.4; margin-top: 6px; display: none; } .ghl-error-box.show { display: block; } /* Step 2: calendar or success */ .ghl-step-2 { display: none; } .ghl-overlay.step-calendar .ghl-step-1 { display: none; } .ghl-overlay.step-calendar { padding: 0; align-items: stretch; justify-content: stretch; } .ghl-overlay.step-calendar .ghl-modal { max-width: 100%; width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; border-top-width: 3px; } .ghl-overlay.step-calendar .ghl-step-2 { display: flex; flex-direction: column; flex: 1; padding: 0; min-height: 0; overflow: hidden; } .ghl-overlay.step-calendar .ghl-success-block { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; } .ghl-overlay.step-calendar .ghl-close { background: rgba(15, 15, 15, 0.72); color: #fff; border-radius: 999px; top: 14px; right: 14px; width: 36px; height: 36px; font-size: 22px; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ghl-overlay.step-calendar .ghl-close:hover { background: rgba(0, 0, 0, 0.9); color: #fff; } .ghl-calendar-wrap { flex: 1; width: 100%; min-height: 0; background: #fff; overflow: hidden; display: flex; } .ghl-calendar-wrap iframe { flex: 1; width: 100%; height: 100%; min-height: 560px; border: 0; display: block; background: #fff; } /* Desktop: contained modal rather than full-screen */ @media (min-width: 820px) { .ghl-overlay.step-calendar { padding: 20px; align-items: center; justify-content: center; } .ghl-overlay.step-calendar .ghl-modal { max-width: 820px; height: min(94vh, 940px); max-height: 94vh; border-radius: 8px; } } .ghl-success { text-align: center; padding: 20px 10px 10px; } .ghl-success .check { width: 60px; height: 60px; border-radius: 50%; background: rgba(129, 199, 132, 0.12); border: 2px solid rgba(129, 199, 132, 0.4); color: var(--ghl-ok); font-size: 30px; line-height: 56px; margin: 0 auto 18px; } .ghl-success h3 { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 900; margin: 0 0 10px; color: var(--ghl-white); } .ghl-success p { font-size: 15px; color: var(--ghl-muted); line-height: 1.6; margin: 0; } @media (max-width: 640px) { .ghl-overlay { padding: 0; } .ghl-modal { max-width: 100%; max-height: 100vh; border-radius: 0; border-top-width: 3px; } .ghl-content { padding: 56px 24px 28px; } } /* intl-tel-input v24.6.0 — dark theme overrides La lib viene con look claro y un wrapper .iti__dropdown-content con bg blanco que choca con el modal oscuro. El popup ya inicializa con `dropdownContainer: document.body`, así que el dropdown vive fuera del .ghl-overlay → estos selectores apuntan directo a `.iti` para alcanzarlo. Las reglas del input (cerrado) sí van scopadas a .ghl-overlay porque .iti--inline / .iti__selected-country viven dentro del modal. */ /* --- Wrapper del input (dentro del modal) --- */ .ghl-overlay .iti { width: 100%; } .ghl-overlay .iti__tel-input { width: 100%; } .ghl-overlay .iti--allow-dropdown .iti__country-container { z-index: 3; } /* --- Botón cerrado: bandera + +57 + flecha --- */ .ghl-overlay .iti__selected-country { background: var(--ghl-surface-2); border-right: 1px solid var(--ghl-border); padding-right: 10px; /* aire entre el +57 y el borde derecho del botón */ } .ghl-overlay .iti__selected-country:hover, .ghl-overlay .iti__selected-country:focus { background: rgba(255, 255, 255, 0.04); } /* Bandera + flecha. La flecha es minúscula (6×4 con borders) y por defecto queda pegada al borde derecho del botón → se ve cortada. Le damos margen y subimos el padding-right del primary para separarla del +57. */ .ghl-overlay .iti__selected-country-primary { padding: 0 10px 0 12px; display: flex; align-items: center; gap: 8px; } .ghl-overlay .iti__selected-country-primary .iti__flag { flex: 0 0 auto; } .ghl-overlay .iti__arrow { border-top-color: var(--ghl-muted); border-bottom-color: var(--ghl-muted); /* para el estado --up */ margin-left: 2px; opacity: 0.9; transition: opacity 0.15s, transform 0.15s; } .ghl-overlay .iti__selected-country:hover .iti__arrow { opacity: 1; } /* +57: separación visible respecto a la flecha y al borde derecho */ .ghl-overlay .iti--separate-dial-code .iti__selected-dial-code { color: var(--ghl-white); font-weight: 600; margin-left: 8px; margin-right: 4px; letter-spacing: 0.01em; } /* --- Dropdown abierto (attached a via dropdownContainer) --- */ /* El wrapper .iti--container queda en con z-index: 1060 por default de la lib → debajo de nuestro .ghl-overlay (z-index: 9999). Lo elevamos para que el dropdown se vea sobre el modal. */ .iti--container { z-index: 10000 !important; } /* Wrapper .iti__dropdown-content tiene bg WHITE por default → lo neutralizamos */ .iti__dropdown-content { background: var(--ghl-surface, #1A1A1A) !important; border: 1px solid var(--ghl-border, rgba(255,255,255,0.08)) !important; border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3); overflow: hidden; color: var(--ghl-white, #FAFAF8); font-family: 'Inter', system-ui, -apple-system, sans-serif; } .iti__search-input { background: var(--ghl-surface-2, #252525) !important; color: var(--ghl-white, #FAFAF8) !important; border: none !important; border-bottom: 1px solid var(--ghl-border, rgba(255,255,255,0.08)) !important; padding: 10px 14px !important; font-size: 13px; width: 100%; box-sizing: border-box; outline: none; } .iti__search-input::placeholder { color: var(--ghl-muted, #8A8478); } .iti__search-input:focus { background: rgba(255, 255, 255, 0.04) !important; } .iti__country-list { background: var(--ghl-surface, #1A1A1A); color: var(--ghl-white, #FAFAF8); border: none; max-height: 240px; box-shadow: none; margin: 0; padding: 4px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .iti__country-list::-webkit-scrollbar { width: 8px; } .iti__country-list::-webkit-scrollbar-track { background: transparent; } .iti__country-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; } .iti__country-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); } .iti__country { padding: 9px 14px; display: flex; align-items: center; gap: 10px; color: var(--ghl-white, #FAFAF8); background: transparent; transition: background 0.1s; border: none; } .iti__country .iti__flag { flex: 0 0 auto; } .iti__country-name { flex: 1; font-size: 14px; color: var(--ghl-white, #FAFAF8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iti__dial-code { color: var(--ghl-muted, #8A8478); font-size: 13px; font-variant-numeric: tabular-nums; flex: 0 0 auto; } .iti__country:hover, .iti__country.iti__highlight { background: rgba(255, 255, 255, 0.07) !important; color: var(--ghl-white, #FAFAF8) !important; } /* Ítem realmente seleccionado (aria-selected=true) → hint con el accent */ .iti__country[aria-selected="true"] { background: rgba(255, 255, 255, 0.04); } .iti__country[aria-selected="true"] .iti__country-name { font-weight: 600; } .iti__divider { border-bottom: 1px solid var(--ghl-border, rgba(255,255,255,0.08)); margin: 4px 0; padding: 0; height: 0; } /* Mobile: la lib activa useFullscreenPopup automáticamente. Le damos un look coherente con el modal en pantallas pequeñas. */ @media (max-width: 500px) { .iti__dropdown-content { border-radius: 0; border-left: none; border-right: none; } .iti__country-list { max-height: 60vh; } .iti--fullscreen-popup .iti__dropdown-content { background: var(--ghl-surface, #1A1A1A) !important; } }