/* Pàgina /camisetas-personalizadas/ (agent 3). Tot penja de .mo-cp. */

.mo-cp {
	--cp-purple: var(--mo-purple, #7c2cf3);
	--cp-purple-dark: var(--mo-purple-dark, #2a0b5c);
	--cp-lilac: var(--mo-lilac, #f2ecff);
	--cp-black: var(--mo-black, #0a0a0a);
	--cp-ink: var(--mo-ink, #1a1a1a);
	--cp-radius: var(--mo-radius-card, 14px);
	--cp-radius-btn: var(--mo-radius-btn, 8px);
	--cp-head: var(--mo-font-head, "Outfit", "Lexend", system-ui, sans-serif);
	position: relative;
	padding: clamp(2.5rem, 6vw, 4.5rem) 16px;
	margin-block: 0 !important;
	overflow: hidden;
	color: var(--cp-ink);
}
.mo-cp h1, .mo-cp h2, .mo-cp h3 { font-family: var(--cp-head); font-weight: 800; line-height: 1.1; }
.mo-cp-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; text-align: center; margin: 0 auto 2rem !important; }
.mo-cp a:not(.wp-element-button) { color: var(--cp-purple); text-underline-offset: 2px; }

/* Hero */
.mo-cp-hero { background: var(--cp-black); color: #fff; text-align: center; }
.mo-cp-hero > * { position: relative; z-index: 1; }
.mo-cp-kicker {
	color: var(--mo-purple-light, #b48cff);
	font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem;
	margin-bottom: .5rem !important;
}
.mo-cp-title { color: #fff; font-size: clamp(2rem, 5.5vw, 3.6rem) !important; max-width: 16ch; margin: 0 auto !important; }
.mo-cp-hl { color: var(--mo-purple-light, #b48cff); }
.mo-cp-lead { max-width: 40rem; margin: 1.25rem auto 0 !important; font-size: clamp(1rem, 2vw, 1.15rem); opacity: .92; }
.mo-cp-actions { justify-content: center; margin-top: 2rem !important; gap: .75rem; }
.mo-cp .mo-cp-btn .wp-block-button__link {
	background: var(--cp-purple); color: #fff; border: 2px solid var(--cp-purple);
	border-radius: var(--cp-radius-btn); font-weight: 700; padding: .8em 1.6em;
}
.mo-cp .mo-cp-btn .wp-block-button__link:hover { filter: brightness(1.12); }
.mo-cp .mo-cp-btn-ghost .wp-block-button__link {
	background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55);
	border-radius: var(--cp-radius-btn); font-weight: 700; padding: .8em 1.6em;
}
.mo-cp .mo-cp-btn-ghost .wp-block-button__link:hover { border-color: #fff; }

/* Decoració SVG */
.mo-cp-deco { position: absolute; z-index: 0 !important; color: var(--cp-purple); pointer-events: none; }
.mo-cp-deco-rays { width: 64px; top: 12%; left: 6%; transform: rotate(-12deg); }
.mo-cp-deco-shirt { width: 110px; bottom: 10%; right: 6%; transform: rotate(10deg); opacity: .9; }
.mo-cp-deco-heart { width: 64px; top: 2.5rem; right: 8%; transform: rotate(14deg); }

/* Usos */
.mo-cp-uses { background: #fff; }
.mo-cp-cards, .mo-cp-steps {
	list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 1.25rem;
	max-width: 1100px;
}
.mo-cp-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mo-cp-card {
	background: var(--cp-lilac); border-radius: var(--cp-radius); padding: 1.75rem 1.5rem;
}
.mo-cp-card svg { width: 44px; height: 44px; color: var(--cp-purple); }
.mo-cp-card h3, .mo-cp-steps h3 { font-size: 1.25rem; margin: .75rem 0 .4rem; }
.mo-cp-card p, .mo-cp-steps p { margin: 0; line-height: 1.5; }

/* Passos */
.mo-cp-steps-band { background: var(--cp-lilac); }
.mo-cp-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: none; }
.mo-cp-steps li {
	background: #fff; border-radius: var(--cp-radius); padding: 1.5rem;
	border: 1px solid rgba(124, 44, 243, .15);
}
.mo-cp-num {
	display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: var(--cp-purple); color: #fff; font-family: var(--cp-head); font-weight: 800; font-size: 1.2rem;
}

/* Informació */
.mo-cp-info { background: #fff; }
.mo-cp-cols { max-width: 1100px; margin-inline: auto !important; gap: 1.25rem !important; }
.mo-cp-box { border: 2px solid var(--cp-lilac); border-radius: var(--cp-radius); padding: 1.5rem 1.75rem; }
.mo-cp-box h3 { font-size: 1.35rem; margin-top: 0; }
.mo-cp-checks { list-style: none; padding: 0 !important; margin: 0; }
.mo-cp-checks li { position: relative; padding-left: 1.9rem; margin-bottom: .75rem; line-height: 1.5; }
.mo-cp-checks li::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
	background: var(--cp-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.mo-cp-note {
	max-width: 1100px; margin: 1.5rem auto 0 !important; font-size: .95rem;
	padding: 1rem 1.25rem; border-left: 4px solid var(--cp-purple); background: var(--cp-lilac);
	border-radius: 0 var(--cp-radius-btn) var(--cp-radius-btn) 0;
}

/* Formulari */
.mo-cp-form-band { background: var(--cp-black); color: #fff; }
.mo-cp-form-band .mo-cp-h2 { color: #fff; margin-bottom: .5rem !important; }
.mo-cp-sub { text-align: center; max-width: 36rem; margin: 0 auto 2rem !important; opacity: .9; }
.mo-cp-form-band .mo-cp-sub a { color: var(--mo-purple-light, #b48cff); }
.mo-cp-form-band .wpcf7 {
	position: relative; z-index: 1; box-sizing: border-box;
	max-width: 820px; margin: 0 auto; background: #fff; color: var(--cp-ink);
	border-radius: var(--cp-radius); padding: clamp(1.25rem, 4vw, 2.25rem);
}
.mo-cp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.mo-cp-form > p, .mo-cp-form > div { grid-column: 1 / -1; margin: 0 0 1rem; }
.mo-cp-form > p:nth-of-type(-n+6) { grid-column: auto; }
.mo-cp-form label { display: block; font-weight: 600; font-size: .95rem; }
.mo-cp-form input[type="text"], .mo-cp-form input[type="email"], .mo-cp-form input[type="tel"],
.mo-cp-form input[type="date"], .mo-cp-form select, .mo-cp-form textarea {
	display: block; width: 100%; box-sizing: border-box; margin-top: .35rem;
	font: inherit; font-weight: 400; padding: .65rem .8rem; color: var(--cp-ink); background: #fff;
	border: 1.5px solid #d6cce8; border-radius: var(--cp-radius-btn);
}
.mo-cp-form textarea { min-height: 8rem; resize: vertical; }
.mo-cp-form input:focus, .mo-cp-form select:focus, .mo-cp-form textarea:focus {
	outline: 2px solid var(--cp-purple); outline-offset: 1px; border-color: var(--cp-purple);
}
.mo-cp-form input[type="file"] { display: block; margin-top: .4rem; font-weight: 400; max-width: 100%; }
.mo-cp-form small { display: block; font-size: .8rem; line-height: 1.45; color: #555; }
.mo-cp-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.mo-cp-form .wpcf7-acceptance input { accent-color: var(--cp-purple); margin-right: .4rem; }
.mo-cp-form .wpcf7-submit {
	background: var(--cp-purple); color: #fff; border: 0; border-radius: var(--cp-radius-btn);
	font: inherit; font-weight: 700; padding: .85em 2em; cursor: pointer;
}
.mo-cp-form .wpcf7-submit:hover { filter: brightness(1.12); }
.mo-cp-form .wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; }
.mo-cp-form .wpcf7-response-output { grid-column: 1 / -1; margin: .5rem 0 0 !important; border-radius: var(--cp-radius-btn); }

@media (max-width: 640px) {
	.mo-cp-form { grid-template-columns: 1fr; }
	.mo-cp-form > p:nth-of-type(-n+6) { grid-column: 1 / -1; }
	.mo-cp-deco-shirt { display: none; }
	.mo-cp-deco-rays { width: 44px; top: 4%; left: 4%; }
	.mo-cp-deco-heart { width: 44px; top: 1.25rem; right: 5%; }
	.mo-cp-actions .wp-block-button { width: 100%; }
	.mo-cp-actions .wp-block-button__link { width: 100%; box-sizing: border-box; }
}