/* WP Popups — modal central. Tot penja de .wpp-overlay perquè el tema no ho trepitgi.
   Colors i font arriben com a variables (Ajustos del plugin). */
.wpp-overlay{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:16px;background:rgba(40,40,40,.62);font-family:var(--wpp-font);color:var(--wpp-ink);box-sizing:border-box}
.wpp-overlay[hidden]{display:none}
.wpp-overlay *,.wpp-overlay *:before,.wpp-overlay *:after{box-sizing:border-box}
.wpp-overlay .wpp{position:relative;width:min(780px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;grid-template-columns:300px 1fr;background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(30,20,15,.35);text-align:left}
.wpp-overlay p,.wpp-overlay h2,.wpp-overlay ol,.wpp-overlay ul,.wpp-overlay li{margin:0;padding:0;text-transform:none;letter-spacing:normal;font-family:inherit}
/* Franja */
.wpp-overlay .wpp-side{background:var(--wpp-primary);color:#fff;padding:36px 30px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.wpp-overlay .wpp-title{font-weight:800;font-size:56px;line-height:.95;letter-spacing:-.035em;color:#fff}
.wpp-overlay .wpp-months{display:grid;grid-template-columns:repeat(12,1fr);margin:0 0 14px;list-style:none}
.wpp-overlay .wpp-months li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:600;line-height:1;color:#fff;opacity:.75;list-style:none}
.wpp-overlay .wpp-months li:before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;opacity:.55}
.wpp-overlay .wpp-months li.wpp-now{opacity:1}
.wpp-overlay .wpp-months li.wpp-now:before{opacity:1;box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.wpp-overlay .wpp-cadence{font-weight:600;font-size:15px;line-height:1.4;color:#fff}
.wpp-overlay .wpp-accent{display:block;opacity:.8}
/* Franja amb foto (imatge destacada) */
.wpp-overlay .wpp-side.wpp-photo{position:relative;padding:0;background:var(--wpp-mist);min-height:100%}
.wpp-overlay .wpp-photo .wpp-photo-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
.wpp-overlay .wpp-photo .wpp-title{position:relative;margin-top:auto;padding:24px 26px;font-size:34px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
/* Franja fosca amb targetes (p. ex. "cada canal diu una cosa diferent") */
.wpp-overlay .wpp:focus{outline:none}
.wpp-overlay .wpp.wpp-dark{width:min(800px,100%);grid-template-columns:320px 1fr}
.wpp-overlay .wpp-dark .wpp-side{background:var(--wpp-ink);padding:34px 26px 30px;gap:28px}
.wpp-overlay .wpp-dark .wpp-headline{font-weight:800;font-size:27px;line-height:1.18;letter-spacing:-.015em}
.wpp-overlay .wpp-dark .wpp-title{font-size:30px;line-height:1.05;letter-spacing:-.02em}
.wpp-overlay .wpp-dark .wpp-accent{color:var(--wpp-primary);opacity:1}
.wpp-overlay .wpp-voices{display:flex;flex-direction:column;gap:10px;list-style:none}
.wpp-overlay .wpp-voices li{width:max-content;max-width:100%;background:#fff;color:var(--wpp-ink);border-radius:8px;padding:9px 13px 10px;box-shadow:5px 5px 0 rgba(0,0,0,.28);list-style:none}
.wpp-overlay .wpp-voices li:nth-child(4n+1){transform:rotate(-1.5deg)}
.wpp-overlay .wpp-voices li:nth-child(4n+2){margin-left:22px;transform:rotate(1.2deg)}
.wpp-overlay .wpp-voices li:nth-child(4n+3){margin-left:10px;transform:rotate(-.6deg)}
.wpp-overlay .wpp-voices li:nth-child(4n+4){margin-left:16px;transform:rotate(1.6deg)}
.wpp-overlay .wpp-voices b{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12px;line-height:1.2;color:#7a7a78}
.wpp-overlay .wpp-voices b:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wpp-primary)}
.wpp-overlay .wpp-voices span{display:block;margin-top:3px;font-weight:800;font-size:15px;line-height:1.25}
/* Contingut */
.wpp-overlay .wpp-main{position:relative;padding:40px 40px 30px}
.wpp-overlay .wpp-headline{margin:0 40px 14px 0;font-weight:600;font-size:24px;line-height:1.25;letter-spacing:-.01em;color:var(--wpp-ink)}
.wpp-overlay .wpp-badge{display:inline-block;margin:0 36px 14px 0;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--wpp-primary) 14%,#fff);color:var(--wpp-primary-dark);font-weight:800;font-size:14px;line-height:1.2}
.wpp-overlay .wpp-lead{margin:0 0 26px;font-weight:500;font-size:15.5px;line-height:1.6;max-width:44ch;color:var(--wpp-ink)}
.wpp-overlay .wpp-points{display:grid;gap:8px;margin:-6px 0 26px;list-style:none}
.wpp-overlay .wpp-points li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-weight:600;font-size:14.5px;line-height:1.45;color:var(--wpp-ink);list-style:none}
.wpp-overlay .wpp-points li:before{content:"";width:12px;height:12px;margin-top:4px;background:var(--wpp-primary);border-radius:3px}
.wpp-overlay label{display:block;margin:0 0 8px;font-weight:600;font-size:14px;line-height:1.3;color:var(--wpp-ink)}
.wpp-overlay .wpp-row{display:flex;gap:8px}
.wpp-overlay input[type=email]{flex:1;min-width:0;height:auto;margin:0;font-family:var(--wpp-font);font-weight:500;font-size:15px;line-height:1.3;color:var(--wpp-ink);background:var(--wpp-mist);border:2px solid var(--wpp-mist);border-radius:8px;padding:12px 14px;box-shadow:none}
.wpp-overlay input[type=email]::placeholder{color:#8b8b89;opacity:1}
.wpp-overlay input[type=email]:focus{outline:none;background:#fff;border-color:var(--wpp-ink)}
.wpp-overlay input[aria-invalid=true]{border-color:var(--wpp-primary);background:#fff}
.wpp-overlay .wpp-btn{margin:0;font-family:var(--wpp-font);font-weight:800;font-size:15px;line-height:1.3;color:#fff;background:var(--wpp-primary);border:0;border-radius:8px;padding:12px 22px;cursor:pointer;text-transform:none;letter-spacing:normal;box-shadow:none;white-space:nowrap}
.wpp-overlay a.wpp-btn{display:inline-block;font-size:16px;padding:14px 26px;text-decoration:none}
.wpp-overlay .wpp-note{margin:10px 0 0;font-size:12.5px;font-weight:500;line-height:1.5;color:#6e6e6c}
.wpp-overlay .wpp-btn:hover{background:var(--wpp-primary-dark);color:#fff}
.wpp-overlay .wpp-btn[disabled]{opacity:.6;cursor:wait}
.wpp-overlay .wpp-btn:focus-visible,.wpp-overlay .wpp-close:focus-visible,.wpp-overlay .wpp-later:focus-visible,.wpp-overlay a:focus-visible{outline:3px solid var(--wpp-ink);outline-offset:3px}
.wpp-overlay .wpp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wpp-overlay .wpp-error{min-height:20px;margin:6px 0 0;font-size:13px;font-weight:600;line-height:1.4;color:var(--wpp-primary-dark)}
.wpp-overlay .wpp-legal{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:#6e6e6c;max-width:56ch}
.wpp-overlay .wpp-legal a{color:inherit;text-decoration:underline}
.wpp-overlay .wpp-later{margin:6px 0 0 8px;padding:10px 8px;min-height:44px;background:none;border:0;font-family:var(--wpp-font);font-weight:600;font-size:13px;color:#6e6e6c;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-transform:none;box-shadow:none}
.wpp-overlay .wpp-close{position:absolute;top:14px;right:14px;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--wpp-ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:none}
.wpp-overlay .wpp-close:hover{background:var(--wpp-mist)}
.wpp-overlay .wpp-ok{display:none}
.wpp-overlay .wpp.is-done .wpp-form{display:none}
.wpp-overlay .wpp.is-done .wpp-ok{display:block}
.wpp-overlay .wpp-ok-title{margin:12px 0 10px;font-weight:800;font-size:30px;line-height:1.15;color:var(--wpp-ink)}
html.wpp-lock{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
	.wpp-overlay:not([hidden]) .wpp{animation:wpp-in .32s cubic-bezier(.2,.8,.2,1)}
	.wpp-overlay:not([hidden]) .wpp-months li.wpp-now:before{animation:wpp-dot 1.2s .35s ease-out 1}
	/* Les targetes arriben una a una, cadascuna pel seu costat. */
	.wpp-overlay:not([hidden]) .wpp-voices li{animation:wpp-voice .45s cubic-bezier(.2,.8,.2,1) backwards;--wpp-from:-24px}
	.wpp-overlay:not([hidden]) .wpp-voices li:nth-child(even){--wpp-from:24px}
	.wpp-overlay:not([hidden]) .wpp-voices li:nth-child(1){animation-delay:.25s}
	.wpp-overlay:not([hidden]) .wpp-voices li:nth-child(2){animation-delay:.4s}
	.wpp-overlay:not([hidden]) .wpp-voices li:nth-child(3){animation-delay:.55s}
	.wpp-overlay:not([hidden]) .wpp-voices li:nth-child(n+4){animation-delay:.7s}
}
@keyframes wpp-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes wpp-voice{from{opacity:0;translate:var(--wpp-from) 0}}
@keyframes wpp-dot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}100%{box-shadow:0 0 0 4px rgba(255,255,255,.35)}}
@media (max-width:720px){
	.wpp-overlay .wpp{grid-template-columns:1fr}
	.wpp-overlay .wpp-side{gap:20px;padding:26px 24px}
	.wpp-overlay .wpp-title{font-size:34px}
	.wpp-overlay .wpp-side.wpp-photo{height:170px;min-height:0;padding:0}
	.wpp-overlay .wpp-main{padding:28px 24px 24px}
	.wpp-overlay .wpp-row{flex-direction:column}
	.wpp-overlay .wpp.wpp-dark{grid-template-columns:1fr}
	.wpp-overlay .wpp-dark .wpp-side{padding:24px 20px;gap:18px}
	.wpp-overlay .wpp-dark .wpp-headline{font-size:23px}
	.wpp-overlay .wpp-dark .wpp-title{font-size:24px}
	.wpp-overlay .wpp-dark .wpp-accent{display:inline}
	.wpp-overlay .wpp-voices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
	.wpp-overlay .wpp-voices li{width:auto;margin-left:0 !important}
	.wpp-overlay .wpp-voices span{font-size:13.5px}
	.wpp-overlay a.wpp-btn{display:block;text-align:center}
	.wpp-overlay .wpp-later{margin-left:-8px}
}