/**
 * Power to Move — Contact Form 7 forms (Figma "Contactos", "Contactos —
 * Pedido de Proposta" and the footer newsletter) and the [ptm_contactos]
 * panel. See inc/forms.php.
 *
 * Fields are styled from the classes used in the form templates (.ptm-form,
 * .ptm-field, .ptm-dropzone, .ptm-newsletter-form), so any CF7 form written
 * with them looks the same. Two-class selectors beat Blocksy's generic
 * input styles; the .wpcf7 prefix outranks Blocksy's cf-7.min.css
 * (".wpcf7 label:not(.wpcf7-form-control-wrap) { display: block }").
 *
 * Breakpoints match Blocksy: tablet ≤ 999.98px, mobile ≤ 689.98px.
 */

:root {
	--ptm-form-error: #c62828;
	--ptm-icon-mail: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M1.66667 13.3333C1.20833 13.3333 0.815972 13.1701 0.489583 12.8438C0.163194 12.5174 0 12.125 0 11.6667V1.66667C0 1.20833 0.163194 0.815972 0.489583 0.489583C0.815972 0.163194 1.20833 0 1.66667 0H15C15.4583 0 15.8507 0.163194 16.1771 0.489583C16.5035 0.815972 16.6667 1.20833 16.6667 1.66667V11.6667C16.6667 12.125 16.5035 12.5174 16.1771 12.8438C15.8507 13.1701 15.4583 13.3333 15 13.3333H1.66667ZM8.33333 7.5L1.66667 3.33333V11.6667H15V3.33333L8.33333 7.5ZM8.33333 5.83333L15 1.66667H1.66667L8.33333 5.83333ZM1.66667 3.33333V1.66667V11.6667V3.33333Z' fill='%23A1A8AD'/%3E %3C/svg%3E");
	--ptm-icon-call: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.125 15C12.3889 15 10.6736 14.6215 8.97917 13.8646C7.28472 13.1076 5.74306 12.0347 4.35417 10.6458C2.96528 9.25694 1.89236 7.71528 1.13542 6.02083C0.378472 4.32639 0 2.61111 0 0.875C0 0.625 0.0833333 0.416667 0.25 0.25C0.416667 0.0833333 0.625 0 0.875 0H4.25C4.44444 0 4.61806 0.0659722 4.77083 0.197917C4.92361 0.329861 5.01389 0.486111 5.04167 0.666667L5.58333 3.58333C5.61111 3.80556 5.60417 3.99306 5.5625 4.14583C5.52083 4.29861 5.44444 4.43056 5.33333 4.54167L3.3125 6.58333C3.59028 7.09722 3.92014 7.59375 4.30208 8.07292C4.68403 8.55208 5.10417 9.01389 5.5625 9.45833C5.99306 9.88889 6.44444 10.2882 6.91667 10.6562C7.38889 11.0243 7.88889 11.3611 8.41667 11.6667L10.375 9.70833C10.5 9.58333 10.6632 9.48958 10.8646 9.42708C11.066 9.36458 11.2639 9.34722 11.4583 9.375L14.3333 9.95833C14.5278 10.0139 14.6875 10.1146 14.8125 10.2604C14.9375 10.4062 15 10.5694 15 10.75V14.125C15 14.375 14.9167 14.5833 14.75 14.75C14.5833 14.9167 14.375 15 14.125 15ZM2.52083 5L3.89583 3.625L3.54167 1.66667H1.6875C1.75694 2.23611 1.85417 2.79861 1.97917 3.35417C2.10417 3.90972 2.28472 4.45833 2.52083 5ZM9.97917 12.4583C10.5208 12.6944 11.0729 12.8819 11.6354 13.0208C12.1979 13.1597 12.7639 13.25 13.3333 13.2917V11.4583L11.375 11.0625L9.97917 12.4583Z' fill='%23A1A8AD'/%3E %3C/svg%3E");
	--ptm-icon-chevron: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M1 1L6 6L11 1' stroke-width='2' stroke-linecap='round' stroke='%231C252C'/%3E %3C/svg%3E");
	--ptm-icon-upload: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8 2V10M4.66667 5.33333L8 2L11.3333 5.33333M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke-width='1.2' stroke-linecap='round' stroke='%231C252C'/%3E %3C/svg%3E");
	--ptm-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 15'%3E%3Cpath d='M10.8 0L9.8 1L15.2 6.5H0V7.9H15.2L9.8 13.4L10.8 14.4L18 7.2L10.8 0Z' fill='%231C252C'/%3E%3C/svg%3E");
	--ptm-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5L4.3 7.8L11 1.2' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* [ptm_contactos] panel                                                */
/* ------------------------------------------------------------------ */

.ptm-contact-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--theme-palette-color-11);
	color: var(--theme-palette-color-2);
}

.ptm-contact-panel.has-image {
	grid-template-columns: minmax(0, 459fr) minmax(0, 821fr);
}

.ptm-contact-panel__media {
	position: relative;
	min-height: 100%;
}

.ptm-contact-panel__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ptm-contact-panel__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	padding: 32px;
}

.ptm-contact-panel__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ptm-contact-panel .ptm-contact-panel__title {
	margin: 0;
	font-size: 38px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	color: inherit;
}

.ptm-contact-panel__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.0014em;
}

.ptm-contact-panel__switch {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 72px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* One form at a time, following the switch. */
.ptm-contact-panel:has(.ptm-contact-panel__switch input[value="proposta"]:checked) [data-ptm-form="contacto"],
.ptm-contact-panel:has(.ptm-contact-panel__switch input[value="contacto"]:checked) [data-ptm-form="proposta"] {
	display: none;
}

/* Same for the photos when each form has its own; the hidden one keeps its
   box, so it lazy-loads with the other and is ready when the switch flips. */
.ptm-contact-panel:has(.ptm-contact-panel__switch input[value="proposta"]:checked) [data-ptm-image="contacto"],
.ptm-contact-panel:has(.ptm-contact-panel__switch input[value="contacto"]:checked) [data-ptm-image="proposta"] {
	visibility: hidden;
}

/* ------------------------------------------------------------------ */
/* Radios and checkboxes (panel switch, CF7 radio + acceptance)          */
/* ------------------------------------------------------------------ */

.ptm-choice,
.wpcf7 .ptm-form .wpcf7-list-item > label {
	position: relative;
	display: inline-grid;
	grid-template-columns: 20px auto;
	align-items: center;
	column-gap: 12px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.0014em;
	color: var(--theme-palette-color-2);
	cursor: pointer;
}

.ptm-choice input,
.ptm-form .wpcf7-list-item input {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ptm-choice::before,
.wpcf7 .ptm-form .wpcf7-list-item > label::before {
	content: "";
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 1px solid var(--theme-palette-color-2);
	border-radius: 50%;
	background: var(--theme-palette-color-8) no-repeat center;
}

.ptm-choice:has(input:checked)::before,
.wpcf7 .ptm-form .wpcf7-radio label:has(input:checked)::before {
	background-image: radial-gradient(circle, var(--theme-palette-color-2) 0 5.5px, transparent 6px);
}

.ptm-choice:has(input:focus-visible)::before,
.wpcf7 .ptm-form .wpcf7-list-item > label:has(input:focus-visible)::before {
	outline: 2px solid var(--theme-palette-color-2);
	outline-offset: 2px;
}

.ptm-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 72px;
}

.ptm-form .wpcf7-list-item {
	display: flex;
	margin: 0;
}

/* Privacy checkbox. */
.wpcf7 .ptm-form .wpcf7-acceptance label {
	align-items: start;
	column-gap: 20px;
	font-weight: 400;
}

.wpcf7 .ptm-form .wpcf7-acceptance label::before {
	border-radius: 2px;
	background-size: 12px 9px;
}

.wpcf7 .ptm-form .wpcf7-acceptance label:has(input:checked)::before {
	background-color: var(--theme-palette-color-2);
	background-image: var(--ptm-icon-check);
}

.ptm-form .wpcf7-acceptance a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Fields                                                               */
/* ------------------------------------------------------------------ */

.ptm-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--theme-palette-color-2);
}

.ptm-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto auto;
	gap: 8px 24px;
}

.wpcf7 .ptm-form .ptm-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Label and control rows line up across the two columns. */
.wpcf7 .ptm-form__row > .ptm-field {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
}

.ptm-form__row .ptm-field__label {
	align-self: end;
}

.ptm-form .ptm-field__label {
	float: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--theme-palette-color-2);
	text-wrap: pretty;
}

.ptm-field--choices .ptm-field__label {
	margin-bottom: 12px;
}

.ptm-form .wpcf7-form-control-wrap {
	display: block;
}

.ptm-form :is(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"]), select, textarea).wpcf7-form-control {
	width: 100%;
	height: auto;
	min-height: 57px;
	margin: 0;
	padding: 17px 24px;
	border: 1px solid var(--theme-palette-color-10);
	border-radius: 12px;
	outline: none;
	background-color: var(--theme-palette-color-8);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.0014em;
	color: var(--theme-palette-color-2);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ptm-form :is(input, select, textarea).wpcf7-form-control::placeholder {
	opacity: 1;
	color: var(--theme-palette-color-10);
}

.ptm-form :is(input, select, textarea).wpcf7-form-control:focus {
	border-color: var(--theme-palette-color-2);
	box-shadow: 0 0 0 1px var(--theme-palette-color-2);
}

.ptm-form :is(input, select, textarea).wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--ptm-form-error);
}

.ptm-form textarea.wpcf7-form-control.wpcf7-textarea {
	min-height: 150px;
	resize: vertical;
}

/* Next to the photo, the short Contacto form gets a taller message box. */
@media (min-width: 1000px) {
	.ptm-contact-panel.has-image [data-ptm-form="contacto"] .ptm-form textarea.wpcf7-form-control.wpcf7-textarea {
		min-height: 174px;
	}
}

/* Icons inside the e-mail and phone inputs. */
.ptm-form :is(.ptm-field--email, .ptm-field--phone) input.wpcf7-form-control {
	padding-right: 56px;
	background-repeat: no-repeat;
	background-position: right 24px center;
}

.ptm-form .ptm-field--email input.wpcf7-form-control {
	background-image: var(--ptm-icon-mail);
	background-size: 17px 14px;
}

.ptm-form .ptm-field--phone input.wpcf7-form-control {
	background-image: var(--ptm-icon-call);
	background-size: 15px 15px;
}

.ptm-form select.wpcf7-form-control.wpcf7-select {
	appearance: none;
	padding-right: 56px;
	background-image: var(--ptm-icon-chevron);
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* "Seleccionar..." reads as a placeholder. */
.ptm-form select.wpcf7-form-control:has(option[value=""]:checked) {
	color: var(--theme-palette-color-10);
}

.ptm-form select.wpcf7-form-control option {
	color: var(--theme-palette-color-2);
}

/* ------------------------------------------------------------------ */
/* Photo drop zones (file inputs with class ptm-dropzone__input)        */
/* ------------------------------------------------------------------ */

.ptm-dropzone {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px dashed var(--theme-palette-color-10);
	border-radius: 12px;
	background-color: var(--theme-palette-color-8);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* The (invisible) file input covers the zone: click and drop are native. */
.ptm-dropzone .wpcf7-form-control-wrap {
	position: static;
}

.ptm-form .ptm-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ptm-dropzone__text {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--theme-palette-color-2);
}

.ptm-dropzone__text::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: var(--ptm-icon-upload) no-repeat center / contain;
}

.ptm-dropzone.is-filled .ptm-dropzone__text {
	text-decoration: none;
}

.ptm-dropzone:hover,
.ptm-dropzone.is-dragover {
	border-color: var(--theme-palette-color-2);
}

.ptm-dropzone.is-dragover {
	background-color: color-mix(in srgb, var(--theme-palette-color-1) 15%, var(--theme-palette-color-8));
}

.ptm-dropzone:has(input:focus-visible) {
	outline: 2px solid var(--theme-palette-color-2);
	outline-offset: 2px;
}

.ptm-dropzone:has(.wpcf7-not-valid) {
	border-color: var(--ptm-form-error);
}

/* The error sits under the zone, in the row gap. */
.ptm-dropzone .wpcf7-not-valid-tip {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
}

/* ------------------------------------------------------------------ */
/* Consent + submit                                                     */
/* ------------------------------------------------------------------ */

.ptm-form__footer {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
}

.ptm-form .ptm-form__submit,
.ptm-newsletter-form .ptm-newsletter-form__submit {
	min-height: 52px;
	margin: 0;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background-color: var(--theme-palette-color-1);
	font-family: inherit;
	font-size: var(--theme-button-font-size, 16px);
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.008em;
	color: var(--theme-palette-color-2);
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ptm-form .ptm-form__submit {
	flex-shrink: 0;
	margin-left: auto;
	padding-right: 54px;
	background-image: var(--ptm-icon-arrow);
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 18px 15px;
}

.ptm-form .ptm-form__submit:hover,
.ptm-newsletter-form .ptm-newsletter-form__submit:hover {
	background-color: var(--theme-palette-color-12);
}

.ptm-form .ptm-form__submit:focus-visible,
.ptm-newsletter-form .ptm-newsletter-form__submit:focus-visible {
	outline: 2px solid var(--theme-palette-color-2);
	outline-offset: 3px;
}

.ptm-form .ptm-form__submit:disabled,
.ptm-newsletter-form .ptm-newsletter-form__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* CF7's "sending" spinner: above the button, out of the layout. */
.ptm-form__footer .wpcf7-spinner {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Validation and response messages                                    */
/* ------------------------------------------------------------------ */

.wpcf7 .ptm-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	font-style: normal;
	line-height: 1.3;
	color: var(--ptm-form-error);
}

.wpcf7-form:has(.ptm-form) .wpcf7-response-output {
	margin: 24px 0 0;
	font-style: normal;
	padding: 12px 16px;
	border: 1px solid var(--theme-palette-color-10);
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--theme-palette-color-2);
}

.wpcf7-form.sent:has(.ptm-form) .wpcf7-response-output {
	border-color: var(--theme-palette-color-12);
	background-color: color-mix(in srgb, var(--theme-palette-color-1) 25%, var(--theme-palette-color-8));
}

.wpcf7-form:is(.invalid, .unaccepted, .failed, .aborted, .spam, .payment-required):has(.ptm-form) .wpcf7-response-output {
	border-color: var(--ptm-form-error);
	background-color: #fdecea;
}

/* ------------------------------------------------------------------ */
/* Newsletter (dark footer)                                             */
/* ------------------------------------------------------------------ */

.ptm-newsletter-form {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
}

.ptm-newsletter-form__field {
	flex: 0 1 300px;
	min-width: 0;
	margin: 0;
}

.ptm-newsletter-form input[type="email"].wpcf7-form-control {
	width: 100%;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	outline: none;
	background-color: rgb(255 255 255 / 0.1);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.0014em;
	color: var(--theme-palette-color-8);
	transition: box-shadow 0.15s ease;
}

.ptm-newsletter-form input[type="email"].wpcf7-form-control::placeholder {
	opacity: 1;
	color: var(--theme-palette-color-8);
}

.ptm-newsletter-form input[type="email"].wpcf7-form-control:focus {
	box-shadow: 0 0 0 1px var(--theme-palette-color-1);
}

.ptm-newsletter-form .ptm-newsletter-form__submit {
	flex-shrink: 0;
	min-width: 134px;
}

.wpcf7 .ptm-newsletter-form .wpcf7-not-valid-tip {
	margin: 6px 20px 0;
	font-size: 14px;
	font-style: normal;
	color: #ff8a80;
}

.wpcf7-form:has(.ptm-newsletter-form) .wpcf7-response-output {
	max-width: 444px;
	font-style: normal;
	margin: 16px auto 0;
	padding: 10px 16px;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	color: var(--theme-palette-color-8);
}

.wpcf7-form.sent:has(.ptm-newsletter-form) .wpcf7-response-output {
	border-color: var(--theme-palette-color-1);
}

.wpcf7-form:is(.invalid, .unaccepted, .failed, .aborted, .spam):has(.ptm-newsletter-form) .wpcf7-response-output {
	border-color: #ff8a80;
}

.ptm-newsletter-form ~ .wpcf7-spinner,
.ptm-newsletter-form .wpcf7-spinner {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Tablet                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 999.98px) {
	.ptm-contact-panel.has-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.ptm-contact-panel__media {
		display: none;
	}

	.ptm-contact-panel__body {
		padding: 28px;
	}

	.ptm-contact-panel .ptm-contact-panel__title {
		font-size: 32px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 689.98px) {
	.ptm-contact-panel {
		border-radius: 16px;
	}

	.ptm-contact-panel__body {
		padding: 32px 20px;
	}

	/* 28px, a touch smaller on narrow phones so the heading stays on one line. */
	.ptm-contact-panel .ptm-contact-panel__title {
		font-size: clamp(24px, 8vw - 4px, 28px);
	}

	.ptm-form,
	.ptm-form__row {
		gap: 20px;
	}

	.ptm-contact-panel [data-ptm-form="contacto"] .ptm-form textarea.wpcf7-form-control.wpcf7-textarea {
		height: 120px;
		min-height: 120px;
	}

	.ptm-contact-panel__switch,
	.ptm-form .wpcf7-radio {
		flex-direction: column;
		gap: 16px;
	}

	.ptm-form__row {
		display: flex;
		flex-direction: column;
	}

	.wpcf7 .ptm-form__row > .ptm-field {
		display: flex;
	}

	.ptm-form__row .ptm-field__label {
		align-self: auto;
	}

	.ptm-form__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-top: 4px;
	}

	.wpcf7 .ptm-form .wpcf7-acceptance label {
		column-gap: 12px;
	}

	.ptm-form .ptm-form__submit {
		margin-left: 0;
	}

	.ptm-newsletter-form {
		flex-direction: column;
		align-items: stretch;
	}

	.ptm-newsletter-form__field {
		flex-basis: auto;
	}
}