.whitepaper-popup { align-items: center; display: flex; inset: 0; justify-content: center; opacity: 0; padding: 20px; position: fixed; transition: opacity .25s ease, visibility .25s ease; visibility: hidden; z-index: 1050; }
.whitepaper-popup.is-visible { opacity: 1; visibility: visible; }

/* .main-nav (Legacy_new-child-theme.css) es position:fixed amb z-index:9999,
   per sobre del nostre popup (1050) - cal amagar-lo explícitament mentre el
   popup és obert, no n'hi ha prou amb el z-index del popup. */
html.whitepaper-popup-open { overflow: hidden; }
html.whitepaper-popup-open #navbar-wrapper { visibility: hidden; }

.whitepaper-popup-backdrop { background: rgba(44, 44, 68, .6); inset: 0; position: absolute; }

.whitepaper-popup-card { background: var(--color-cream); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); max-height: 92vh; max-width: 420px; overflow-y: auto; position: relative; transform: translateY(16px); transition: transform .25s ease; width: 100%; }
.whitepaper-popup.is-visible .whitepaper-popup-card { transform: none; }

.whitepaper-popup-close { align-items: center; background: rgba(249, 248, 241, .9); border: 0; border-radius: 50%; color: var(--color-dark); cursor: pointer; display: flex; height: 32px; justify-content: center; position: absolute; right: 12px; top: 12px; transition: background-color .2s ease; z-index: 1; }
.whitepaper-popup-close:hover, .whitepaper-popup-close:focus-visible { background: #fff; }
.whitepaper-popup-close i { height: 16px; width: 16px; }

.whitepaper-popup-media { align-items: center; background: var(--color-bg-gradient) center / cover no-repeat; border-radius: 24px 24px 0 0; display: flex; height: clamp(80px, 16vh, 130px); justify-content: center; }
.whitepaper-popup-media i { color: rgba(255, 255, 255, .85); height: 40px; width: 40px; }

.whitepaper-popup-body { padding: 20px 28px 24px; }

.whitepaper-popup-eyebrow { color: var(--color-pill-green); font-family: var(--font-main); font-size: 12px; font-weight: 700; letter-spacing: .06em; margin: 0 0 8px; text-transform: uppercase; }

.whitepaper-popup-title { color: var(--color-dark); font-family: var(--font-heading); font-size: 21px; font-weight: 700; line-height: 1.1; margin: 0 0 8px; }

.whitepaper-popup-description { color: var(--color-dark); font-family: var(--font-main); font-size: 13px; line-height: 1.4; margin: 0 0 14px; opacity: .75; }

.whitepaper-popup-fields { display: grid; gap: 8px; margin-bottom: 12px; }
.whitepaper-popup-fields label { color: var(--color-dark); display: grid; font-family: var(--font-main); font-size: 12px; font-weight: 700; gap: 4px; }
.whitepaper-popup-fields input { background: #fff; border: 2px solid rgba(44, 44, 68, .12); border-radius: 8px; color: var(--color-dark); font: inherit; font-size: 14px; font-weight: 400; min-height: 36px; padding: 6px 12px; width: 100%; }
.whitepaper-popup-fields input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(222, 245, 97, .3); outline: none; }

.whitepaper-popup-error { color: #c0392b; font-family: var(--font-main); font-size: 12px; font-weight: 700; margin: 0 0 8px; min-height: 1em; }
.whitepaper-popup-error:empty { display: none; margin: 0; }

.whitepaper-popup-button { align-items: center; background: var(--color-dark); border: 0; border-radius: 100px; color: var(--color-cream); display: inline-flex; font-family: var(--font-main); font-size: 14px; font-weight: 700; gap: 8px; padding: 12px 24px; text-decoration: none; transition: background-color .2s ease, color .2s ease; width: 100%; justify-content: center; }
.whitepaper-popup-button:hover, .whitepaper-popup-button:focus-visible { background: var(--color-primary); color: var(--color-dark); }
.whitepaper-popup-button:disabled { opacity: .6; pointer-events: none; }
.whitepaper-popup-button i { height: 16px; width: 16px; }

.whitepaper-popup-thanks { text-align: center; }
.whitepaper-popup-thanks p { color: var(--color-dark); font-family: var(--font-main); font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.whitepaper-popup-thanks-link { color: var(--color-pill-green); font-family: var(--font-main); font-size: 13px; text-decoration: underline; }

@media screen and (max-width: 480px) {
	.whitepaper-popup-card { border-radius: 18px; }
	.whitepaper-popup-media { border-radius: 18px 18px 0 0; }
	.whitepaper-popup-body { padding: 18px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.whitepaper-popup, .whitepaper-popup-card, .whitepaper-popup-close, .whitepaper-popup-button { transition: none; }
}