@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;800;900&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   GP Formulario — Estilos compartidos (editor + frontend)
   ========================================================================== */

/* Anular el margin-block-start que WordPress inyecta via block-gap en layouts constrained */
.wp-block-gp-formulario,
.gp-formulario,
.gp-formulario > *,
:where(.is-layout-constrained) > .wp-block-gp-formulario,
:where(.wp-block-post-content) > .wp-block-gp-formulario,
:where(.entry-content) > .wp-block-gp-formulario {
	margin-block-start: 0 !important;
	margin-block-end:   0 !important;
}

/* — Wrapper del formulario — */
.gp-formulario {
	/* — Colores — */
	--gp-form-primary:       #2AB20B;   /* Vibrant Green — siempre verde, no cambia */
	--gp-form-primary-hover: #2AB20B;
	--gp-form-primary-dark:  #1a3300;
	--gp-form-accent:        #2AB20B;  /* Color del bloque precios + hero — cambia con themeColor */
	--gp-form-accent-hover:  #2AB20B;
	--gp-form-bg-light:      #f8fafc;
	--gp-form-border:        #cbd5e1;
	--gp-form-error:         #c62828;
	--gp-form-grey-100:      #f8fafc;
	--gp-form-grey-200:      #e2e8f0;
	--gp-form-grey-300:      #cbd5e1;
	--gp-form-grey-500:      #64748b;
	--gp-form-grey-900:      #1e293b;

	/* — Tipografía — */
	--gp-form-font-heading: var(--wp--preset--font-family--rubik), sans-serif;
	--gp-form-font-body:    var(--wp--preset--font-family--work-sans), sans-serif;

	/* — Espaciado — */
	--gp-space-xs:  0.25rem;
	--gp-space-sm:  0.5rem;
	--gp-space-md:  1rem;
	--gp-space-lg:  1.5rem;
	--gp-space-xl:  2rem;
	--gp-space-2xl: 3rem;

	/* — Misc — */
	--gp-form-radius:     0px;
	--gp-form-transition: 0.2s ease-in-out;

	max-width: 100%;
	margin-inline: auto;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
	font-family: var(--gp-form-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.gp-formulario input,
.gp-formulario select,
.gp-formulario textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

/* Los botones NO heredan font-family para que cada botón pueda definir la suya */
.gp-formulario button {
	/* font-size: inherit; */
	line-height: inherit;
	margin: 0;
}

.gp-formulario-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
	background: var(--gp-form-bg-mobile, #F6F6F5);
	transition: opacity 0.4s ease-in-out;
	overflow-x: hidden;
}

.gp-formulario--showing-result .gp-formulario-form {
	background: var(--gp-form-bg-mobile, #F6F6F5);
}

.gp-formulario--showing-result .gp-formulario-actions {
	display: none !important;
}

@media (min-width: 900px) {
	.gp-formulario--showing-result .gp-formulario-form {
		background: var(--gp-form-bg, #F6F6F5);
	}
}

/* Evitar que los wp-block-group con has-global-padding anulen el padding del form */
.gp-formulario-form .has-global-padding {
	padding-left:  0 !important;
	padding-right: 0 !important;
}

/* — Data Loading State — */
.gp-formulario--is-loading {
	position: relative;
	min-height: 200px;
}

.gp-formulario--is-loading .gp-formulario-form {
	opacity: 0;
	pointer-events: none;
}

.gp-form-data-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	text-align: center;
	gap: 1rem;
	z-index: 20;
	background: #fff;
	transform: translateY(-40px);
}

.gp-form-data-loader p {
	font-family: var(--gp-form-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gp-form-primary);
	margin: 0;
}

/* — Campos — */
.gp-formulario-fields {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
	width:          100%;
	text-align:     left;
	flex:           1;
}

.gp-campo {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 0;
	width: 100%;
}

.gp-campo label,
.gp-campo-precios .gp-campo-label,
.gp-datos-pago .gp-campo-wrapper label {
	font-family: 'Work Sans', sans-serif;
	font-size:   16px;
	font-style:  normal;
	font-weight: 400;
	line-height: normal;
	color:       #767676;
	margin-bottom: 4px;
	display:     flex;
	align-items: center;
	gap:         0.4rem;
}

.gp-campo-precios .gp-campo-label {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.gp-campo-label-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.gp-campo .gp-campo-required {
	color: #767676;
	margin-left: 2px;
}

.gp-campo input[type="text"],
.gp-campo input[type="email"],
.gp-campo input[type="date"],
.gp-campo input[type="tel"],
.gp-campo select,
.gp-campo textarea,
.gp-datos-pago input[type="text"],
.gp-datos-pago select {
	width: 100%;
	max-width: 420px;
	height: 40px;
	padding: 0 1rem;
	border: 0.25px solid #909090;
	border-radius: var(--gp-form-radius);
	font-size: 1rem;
	font-weight: 600;
	font-family: var(--gp-form-font-body);
	background: #fff;
	transition: var(--gp-form-transition);
	box-sizing: border-box;
}

.gp-campo input.gp-campo-locked,
.gp-campo select.gp-campo-locked,
.gp-campo textarea.gp-campo-locked {
	background-color: #f8f9fa !important;
	border-color: #e2e8f0 !important;
	color: #000 !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	cursor: default;
}

/* DNI: feedback de validez nativo. :user-invalid/:user-valid solo aplican
   tras salir del campo (blur), no mientras se escribe. La validez la marca
   setCustomValidity() del propio campo (validación DNI/NIE/CIF). */
.gp-dni-input:user-invalid {
	border-color: #e53935;
}
.gp-dni-input:user-valid:not(:placeholder-shown) {
	border-color: #2AB20B;
}

.gp-campo input::placeholder,
.gp-campo textarea::placeholder,
.gp-datos-pago input::placeholder {
	font-weight: 400;
}

/* Eliminar fondo azul/amarillo del autocompletado del navegador */
.gp-campo input:-webkit-autofill,
.gp-campo input:-webkit-autofill:hover,
.gp-campo input:-webkit-autofill:focus,
.gp-campo input:-webkit-autofill:active,
.gp-datos-pago input:-webkit-autofill,
.gp-datos-pago input:-webkit-autofill:hover,
.gp-datos-pago input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 30px #fff inset !important;
	box-shadow:         0 0 0 30px #fff inset !important;
	-webkit-text-fill-color: inherit !important;
}

.gp-campo input:focus,
.gp-campo select:focus,
.gp-campo textarea:focus,
.gp-datos-pago input:focus,
.gp-datos-pago select:focus {
	outline: none;
	border-color: var(--gp-form-primary);
}

.gp-campo textarea {
	resize: vertical;
	min-height: 120px;
}

/* — Campo Privacidad — */
.gp-campo-privacidad-titulo {
	font-family: 'Work Sans', sans-serif;
	font-size:   16px;
	font-style:  normal;
	font-weight: 500;
	color:       #767676;
	margin:      0;
	line-height: normal;
}


.gp-campo-privacidad-label {
	display: flex;
	align-items: flex-start;
	margin-top: 6px;
	gap: 0.5rem;
	cursor: pointer;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.4;
}

.gp-campo-privacidad-checkbox {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1px solid #909090;
	border-radius: 50%;
	margin-top: 2px;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
	background: #fff;
	transition: var(--gp-form-transition);
}

.gp-campo-privacidad-checkbox:checked {
	background-color: var(--gp-form-primary);
	border-color: var(--gp-form-primary);
}

.gp-campo-privacidad-checkbox:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -62%) rotate(45deg);
	width: 4px;
	height: 8px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
}

.gp-campo-privacidad-text a {
	color: var(--gp-form-primary);
	text-decoration: underline;
}

.gp-campo-privacidad-text a:hover {
	color: #1b5e20;
}

.gp-campo-privacidad-preview {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

/* — Texto legal de privacidad — */
.gp-campo-privacidad-extra {
	max-width: 100%;
	font-size:   0.8rem;
	color:       #555;
	margin-top:  6px;
	line-height: 1.4;
}


/* — Progress Bar (multi-step) — */
.gp-formulario-progress {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	width: 100%;
	margin-inline: auto;
	margin-block: 1rem;
}

@media (max-width: 768px) {
	.gp-formulario-progress {
		margin-block: 1rem;
	}
}

.gp-formulario-progress[hidden] {
	display: none !important;
}

.gp-formulario-progress-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	z-index: 1;
}

.gp-formulario-progress-step::before {
	content: '';
	position: absolute;
	top: 15px; /* Centrado respecto a los 32px del círculo */
	left: calc(-50% + 16px);
	width: calc(100% - 32px);
	height: 2px;
	background: #bdbdbd;
	z-index: -1;
}

.gp-formulario-progress-step:first-child::before {
	display: none;
}

.gp-progress-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #c4c4c4;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.1rem;
	transition: background 0.3s;
	z-index: 2; /* Asegurar que quede por encima de la línea */
	position: relative;
}

.gp-progress-circle .dashicons {
	font-size: 1.25rem;
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gp-progress-text {
	color:       #000;
	text-align:  center;
	font-family: 'Work Sans', sans-serif;
	font-size:   14px;
	font-style:  normal;
	font-weight: 400;
	line-height: 8px;
	margin-top:  0.25rem;
}

/* Completed: verde. Active: negro. */
.gp-formulario-progress-step.completed .gp-progress-circle {
	background: var(--gp-form-primary);
}

.gp-formulario-progress-step.active .gp-progress-circle {
	background: #000;
}


.gp-formulario-progress-step.active::before,
.gp-formulario-progress-step.completed::before {
	background: var(--gp-form-primary);
}

/* — Labels responsive dentro de botones — */
.gp-formulario button .gp-btn-label--desktop { display: none; }
.gp-formulario button .gp-btn-label--mobile  { display: inline; }

@media (min-width: 900px) {
	.gp-formulario button .gp-btn-label--desktop { display: inline; }
	.gp-formulario button .gp-btn-label--mobile  { display: none; }
}

/* — Botones de navegación — */
.gp-formulario-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 1.5rem;
}

/* Mobile: botones apilados y ancho completo */
@media (max-width: 899px) {
	.gp-formulario-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.gp-formulario-next {
		width: 100%;
		padding: 1rem 1.5rem;
		font-size: 1.05rem;
		text-align: center;
	}

	.gp-formulario-submit {
		width: fit-content;
		padding: 1rem 1.5rem;
		font-size: 1.05rem;
	}

}

/* — Error Screen — */
.gp-formulario-error-screen {
    padding: 2rem 0;
    max-width: 100%;
}

.gp-error-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: #000;
    line-height: 1.1;
    font-family: var(--gp-form-font-heading);
}

.gp-error-text {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 2rem;
    color: #000;
    font-weight: 400;
}

.gp-error-text a {
    color: inherit;
    text-decoration: underline;
}

.gp-formulario-error-box {
    background-color: #fcebeb;
    border: 1px solid #f9d6d9;
    border-radius: 6px;
    padding: 1.5rem;
    color: #000;
    font-size: 1.15rem;
    line-height: 1.4;
}

/* — Success Screen (Mirrors Error Screen) — */
.gp-formulario-success-screen {
    padding: 2rem 0;
    max-width: 100%;
    animation: gpFadeIn 0.4s ease-out;
}

.gp-success-title {
    font-size: 2.5rem;
    font-weight: 900 !important;
    margin-bottom: 1.5rem !important;
    color: #000 !important;
    line-height: 1.1;
    font-family: var(--gp-form-font-heading);
}

.gp-success-text {
    font-size: 1.25rem !important;
    line-height: 1.4;
    margin-bottom: 2rem !important;
    color: #000 !important;
    font-weight: 400;
}

.gp-formulario-success-box {
    background-color: #e8f5e9;
    padding: 1.5rem;
    color: #000;
    font-size: 1.15rem;
    line-height: 1.4;
}

.gp-formulario-success-box strong {
    font-weight: 800;
}

.gp-formulario-error-box strong {
    font-weight: 800;
}

.gp-formulario-submit[hidden],
.gp-formulario-next[hidden],
.gp-formulario-actions [hidden] {
	display: none !important;
}

.gp-formulario-submit,
.gp-formulario-next {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 11px 20px;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: var(--gp-form-transition);
}

.gp-formulario-submit,
.gp-formulario-next {
	font-family: 'Rubik', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
}

.gp-formulario-submit,
.gp-formulario-next {
	background: var(--gp-form-btn, #F99713);
	color: var(--gp-form-btn-color, #000);
}

.gp-formulario-submit:hover,
.gp-formulario-next:hover {
	background: var(--gp-form-btn-hover, #e08810);
}

.gp-formulario-submit:disabled,
.gp-formulario-next:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.gp-formulario .gp-formulario-actions .gp-formulario-submit {
	width: fit-content;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* — Feedback — */
.gp-formulario-feedback {
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.95rem;
}

.gp-formulario-feedback--success {
	background: #e8f5e9;
	color: var(--gp-form-primary);
}

.gp-formulario-feedback--error {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef9a9a;
}


/* — Grupo de campos del paso — */
.campos-paso {
	display:        flex;
	flex-direction: column;
	gap:            14px;
	padding-top:    30px !important;
	margin-inline:  30px;
}

/* Neutralizar margin-block-start que WP añade vía is-layout-constrained */
.campos-paso > * {
	margin-block-start: 0 !important;
}

.gp-campos-btn-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-top: 0.5rem;
	width: 100%;
}

.gp-campos-btn-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.75rem;
}


/* — Grid de Precios — */
.gp-precios-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: var(--gp-form-accent); /* Los separadores entre celdas usan el acento */
	border: none;
	border-radius: 0;
	overflow: hidden;
	scroll-margin-top: 2rem;
}

.gp-precios-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 0.5rem;
	min-height: 60px;
	font-family: 'Rubik', sans-serif;
	font-size:   18px;
	font-style:  normal;
	font-weight: 500;
	line-height: normal;
	color:       #000;
	text-align:  center;
	background:  #fff;
	cursor:      pointer;
	transition:  var(--gp-form-transition);
	border: none;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-rendering: optimizeLegibility;
	height: auto;
}

.gp-precios-item:hover {
	background: #f1f5f9;
}

.gp-precios-item:focus {
	outline: none;
}

.gp-precios-item:focus-visible {
	outline: 2px solid var(--gp-form-accent);
	outline-offset: -2px;
}

.gp-precios-item--selected,
.gp-precios-item--selected:hover {
	background: var(--gp-form-accent);
	color: #000;
	z-index: 1;
}

/* — Custom amount box — */
.gp-precios-custom-amount-box {
	background: #fdfdfd;
	border-radius: 0;
	margin-top: 0;
	border-top: none; /* Merges with the grid above */
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.gp-precios-custom-amount-box[hidden] {
	display: none !important;
}

.gp-precios-custom-amount-label {
	font-family: var(--gp-form-font-heading);
	font-weight: 800;
	font-size: 1.1rem;
	color: #000;
	text-transform: uppercase;
}

.gp-precios-custom-amount-box {
	margin-top: -2px;
	position: relative;
	z-index: 10;
}
.gp-precios-custom-input-wrapper {
	display: flex;
	align-items: center;
	border: 2px solid var(--gp-form-accent);
	border-radius: 0;
	background: #fff;
	overflow: hidden;
}
.gp-precios-custom-currency {
	order: 2;
	padding: 0 15px;
	font-weight: 800;
	font-size: 1.2rem;
	color: #000;
	background: var(--gp-form-accent);
	border-right: 1px solid #e2e8f0;
	align-self: stretch;
	display: flex;
	align-items: center;
}
.gp-precios-custom-input {
	flex: 1;
	border: none !important;
	padding: 12px 15px;
	font-size: 1.3rem;
	font-weight: 600;
	color: #1e293b;
	width: 100%;
	box-sizing: border-box;
	outline: none !important;
	box-shadow: none !important;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: textfield;
	font-variant-numeric: tabular-nums;
}

.gp-precios-custom-input::-webkit-outer-spin-button,
.gp-precios-custom-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gp-precios-currency {
	font-family: var(--gp-form-font-heading);
	font-weight: 700;
	color: #64748b;
	font-size: 0.9rem;
}

/* — Textos y calculadoras modulares — */
.gp-precios-upgrade-text {
	font-weight: 700;
	font-size: 1.3rem;
	color: #333;
	margin-bottom: 0.5rem;
}

.gp-precios-upgrade-subtext {
	font-size: 0.95rem;
	color: #555;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}


.gp-precios-desgravacion {
	background:   var(--gp-form-accent);
	color:        #000;
	padding:      0.85rem 1rem;
	font-family:  'Work Sans', sans-serif;
	font-size:    0.95rem;
	line-height:  1.45;
	margin-top:   0;
}

.gp-deduct-calc-wrap {
	font-variant-numeric: tabular-nums;
}

/* — Info de tangibilización/desgravación debajo del botón — */
.gp-actions-tang {
	margin:      0.6rem 0 0;
	font-size:   0.88rem;
	color:       #475569;
	line-height: 1.45;
	text-align:  start;
}

/* — Tangibilización de impacto — */
.gp-precios-tangibilization {
	display:        flex;
	align-items:    center;
	gap:            0.75rem;
	background:     var(--gp-form-accent);
	color:          #000;
	padding:        0.85rem 1rem;
	padding-inline: 30px;
	margin-top:     0;
	font-family:    'Work Sans', sans-serif;
	font-size:      0.95rem;
	line-height:    1.45;
}

.gp-precios-tangibilization[hidden] {
	display: none !important;
}

.gp-tang-icon {
	font-size:   1.6rem;
	line-height: 1;
	flex-shrink: 0;
	min-width:   2rem;
	text-align:  center;
	display:     flex;
	align-items: center;
	justify-content: center;
}

.gp-tang-text {
	flex: 1;
	font-weight: 500;
}

/* — Periodicidad (Radio Buttons) — */
.gp-periodicidad-options {
	display: flex;
	flex-direction: column; /* Mobile-first: column */
	gap: 8px;
}

@media (min-width: 480px) {
	.gp-periodicidad-options {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.gp-periodicidad-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.85rem 1.25rem;
	min-height: 48px;
	border: 1px solid var(--gp-form-border);
	border-radius: 0;
	cursor: pointer;
	transition: var(--gp-form-transition);
	font-size: 0.95rem;
	font-weight: 600;
	color: #334155;
	background: #fff;
}

.gp-periodicidad-option:hover {
	border-color: #94a3b8;
	background: var(--gp-form-bg-light);
}

.gp-periodicidad-option:has(input:checked) {
	border-color: var(--gp-form-accent);
	background: #f0f7f9;
	color: #1a5260;
}

.gp-periodicidad-radio {
	accent-color: var(--gp-form-accent);
	width: 18px;
	height: 18px;
	margin: 0;
}

/* ==========================================================================
   Bloque de pago unificado (gp/datos-pago)
   ========================================================================== */

.gp-datos-pago {
    margin-top: 1.5rem;
}


/* — Cabecera — */
.gp-datos-pago-header {
    margin-bottom: 1rem;
}

.gp-datos-pago-amount {
    color:       #000;
    text-align:  center;
    font-family: 'Rubik', sans-serif;
    font-size:   24px;
    font-style:  normal;
    font-weight: 500;
    line-height: normal;
    margin:      0;
}

.gp-datos-pago-amount strong {
    font-weight: 500;
}

.gp-datos-pago-subtitle {
    font-size:  0.82rem;
    color:      #64748b;
    margin:     0;
}

/* — Grid de métodos (3 tarjetas) — */
.gp-payment-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 0.85rem;
}

.gp-payment-option {
    cursor:      pointer;
    user-select: none;
    display:     flex;
    height:      100%;
}

.gp-payment-option:not(:first-child) .gp-payment-option-inner {
    border-left: none;
}

.gp-payment-option input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.gp-payment-option-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         23px 0 12px 0;
    flex:            1 0 0;
    align-self:      stretch;
    gap:             6px;
    border:          1.5px solid #e2e8f0;
    border-radius:   0;
    background:      #fff;
    font-size:       0.75rem;
    font-weight:     500;
    color:           #334155;
    text-align:      center;
    box-sizing:      border-box;
}

.gp-payment-option:hover:not(.gp-payment-option--active) .gp-payment-option-inner {
    box-shadow: inset 0 0 0 2px #94a3b8;
}

.gp-payment-option--active .gp-payment-option-inner {
    box-shadow: inset 0 0 0 2px var(--gp-form-primary);
}

.gp-payment-option-inner svg {
    width:  26px;
    height: 26px;
    flex-shrink: 0;
}

.gp-payment-option-label {
    color:       #000;
    text-align:  center;
    font-family: 'Work Sans', sans-serif;
    font-size:   14px;
    font-style:  normal;
    font-weight: 500;
    line-height: 14px;
}

/* — Descripción contextual — */
.gp-payment-method-desc {
    font-size:   0.82rem;
    color:       #475569;
    line-height: 1.5;
}

.gp-payment-method-desc p {
    color:       #000;
    font-family: 'Work Sans', sans-serif;
    font-size:   18px;
    font-style:  normal;
    font-weight: 500;
    line-height: normal;
}

.gp-payment-method-desc p {
    margin: 0;
}

.gp-payment-popular {
    display:     block;
    color:       #2AB20B;
    font-family: 'Work Sans', sans-serif;
    font-size:   18px;
    font-style:  normal;
    font-weight: 600;
    line-height: normal;
}

.gp-payment-section {
    padding-top: 10px;
    animation: gpFadeIn 0.4s ease-out;
}

@keyframes gpFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.gp-section-iban .gp-campo-wrapper {
    margin-bottom: 1rem;
}

.gp-iban-help-text {
    display: block;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}

.gp-section-stripe .gp-stripe-container {
    background: #fff;
    border: 1px solid var(--gp-form-border);
    padding: 0.75rem;
    border-radius: var(--gp-form-radius);
}

/* — Loader / Spinner — */
.gp-loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    padding: 3rem 1rem;
    text-align: center;
    gap: 1.5rem;
    animation: gpFadeIn 0.3s ease-out;
}

.gp-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(42, 178, 11, 0.1);
    border-left-color: #2AB20B; /* Siempre verde, independiente del themeColor */
    border-radius: 50%;
    animation: gp-spin 1s linear infinite;
}

.gp-loader-text {
    font-family: var(--gp-form-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gp-form-primary);
}

@keyframes gp-spin {
    to { transform: rotate(360deg); }
}

/* gp/formulario-resultado Styles */
.gp-formulario-resultado-container,
.gp-final-step-msg {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
}

.gp-formulario-resultado-container,
.gp-resultado-success-view,
.gp-resultado-error-view,
.gp-resultado-success-view .wp-block-group,
.gp-resultado-error-view .wp-block-group {
    background: var(--gp-form-result-bg-mobile, #F6F6F5);
}

@media (min-width: 900px) {
    .gp-formulario-resultado-container,
    .gp-resultado-success-view,
    .gp-resultado-error-view,
    .gp-resultado-success-view .wp-block-group,
    .gp-resultado-error-view .wp-block-group {
        background: var(--gp-form-result-bg, #F6F6F5);
    }
}

.gp-resultado-success-view,
.gp-resultado-error-view {
    display:        none; /* Controlled by JS in frontend */
    flex:           1;
    flex-direction: column;
    padding-top:    2rem;
}

/* Fijar tamaños de texto del resultado (anular fluid typography de Gutenberg) */
.gp-resultado-success-view h2,
.gp-resultado-success-view h2 + p,
.gp-resultado-error-view h2 {
    font-size: 24px !important;
}

.gp-resultado-success-view p.has-work-sans-font-family {
    font-size: 18px !important;
}

.gp-resultado-success-view .wp-block-group > p:has(strong),
.gp-resultado-error-view p {
    font-size: 18px !important;
}

.gp-resultado-success-view h3,
.gp-resultado-error-view h3 {
    font-size: 16px !important;
}

.gp-resultado-success-view.active,
.gp-resultado-error-view.active {
    display:    flex;
    flex:       1;
    flex-direction: column;
    animation: gpFadeIn 0.4s ease-out;
}

/* Editor Styles */
.gp-resultado-manager {
    border: 2px dashed var(--gp-form-border);
    padding: 20px;
    border-radius: var(--gp-form-radius);
    background: var(--gp-form-bg-light);
}

.gp-resultado-manager-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.gp-resultado-tabs {
    display: flex;
    gap: 10px;
}

.gp-tab-btn {
    padding: 8px 16px;
    border: 1px solid var(--gp-form-border);
    background: #fff;
    cursor: pointer;
    border-radius: var(--gp-form-radius);
    font-family: var(--gp-form-font-heading);
    font-weight: 600;
    transition: var(--gp-form-transition);
}

.gp-tab-btn.active {
    background: var(--gp-form-primary);
    color: #fff;
    border-color: var(--gp-form-primary);
}

/* Mostrar/ocultar según la vista activa en el editor */
.gp-resultado-content-wrap.view-success .gp-resultado-error-editor {
    display: none !important;
}
.gp-resultado-content-wrap.view-error .gp-resultado-success-editor {
    display: none !important;
}

.gp-resultado-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-weight: bold;
}

.gp-resultado-header.success {
    background: #e8f5e9;
    color: var(--gp-form-primary);
}

.gp-resultado-header.error {
    background: #ffebee;
    color: #c62828;
}

.gp-resultado-body {
    background: #fff;
    padding: 20px;
    border: 1px solid var(--gp-form-border);
    border-radius: var(--gp-form-radius);
}

/* — Dato Dinámico: ocultar en frontend si está vacío (error no disparado) — */
.gp-formulario-dato-dinamico[data-gp-result-message]:empty {
    display: none;
}


/* — Dato Dinámico: indicador del campo en el editor ————————————————————— */
/* Solo visible en el editor (el <mark>). En frontend no existe el mark. */
.gp-dato-dinamico-field {
    background: rgba( 0, 115, 212, 0.08 );
    color: inherit;
    border-bottom: 1.5px dashed #0073d4;
    border-radius: 2px;
    padding: 0 1px;
}

/* Preview del campo _api_error en el editor — tono rojizo para diferenciarlo */
.gp-dato-error-field {
    background: rgba( 198, 40, 40, 0.08 );
    border-bottom-color: #c62828;
}

@keyframes gpFadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes gpBounceIcon {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}

/* ==========================================================================
   Utilidades Globales (Layout)
   ================================================= */

/* Invertir orden de columnas en móvil (para bloques de columnas con clase .column-blocks) */
@media (max-width: 781px) {
	.wp-block-columns.column-blocks {
		flex-direction: column-reverse !important;
	}
}

/* Tabular numbers for price amounts */
.gp-total-amount-display,
.gp-deduct-calc,
.gp-precios-item,
.gp-precios-custom-input {
	font-variant-numeric: tabular-nums !important;
}

.gp-wdth-160 div {
    width: 160px;
}

/* ==========================================================================
   Layout desktop — formulario con hero
   Cuando el formulario contiene un hero, en desktop el hero pasa a ser
   fondo completo y el formulario se convierte en tarjeta flotante a la derecha.
   ========================================================================== */

@media (min-width: 900px) {

	.gp-formulario-form {
		background: var(--gp-form-bg, #F6F6F5);
	}

	/* Stage: contenedor relativo que envuelve hero + form.
	   El testimonio queda FUERA del stage, en flujo normal, debajo. */
	.gp-formulario-stage {
		position:   relative;
		display:    block;
		min-height: calc(var(--gp-hero-height-desktop, 100vh) - 52px);
		overflow-x: hidden;
	}

	/* Hero: fondo completo del stage */
	.gp-formulario-stage .gp-formulario-hero {
		position: absolute;
		inset:    0;
		z-index:  0;
	}

	/* La imagen del hero: altura configurable desde el bloque */
	.gp-formulario-stage .gp-hero-image {
		height:          var(--gp-hero-height-desktop, 80vh);
		min-height:      var(--gp-hero-height-desktop, 80vh);
		justify-content: flex-start;
	}

	/* Formulario: posición absoluta abajo-derecha del stage */
	.gp-formulario-stage .gp-formulario-form {
		position:   absolute;
		bottom:     4rem;
		right:      1.5rem;
		z-index:    1;
		width:      360px;
		min-width:  360px;
		/* Tope de alto dejando hueco para el menú fijo (~52px) + margen, para que en
		   pantallas bajas la cajita no se meta bajo el menú y haga scroll interno.
		   52px = alto del menú; 4rem = separación inferior; 1.5rem = margen bajo el menú. */
		max-height: calc(100vh - 52px - 4rem - 1.5rem);
		padding:    0;
		overflow-y: auto;
	}

	/* Form expandido: ocupa todo el alto del stage */
	.gp-formulario--form-expanded .gp-formulario-stage .gp-formulario-form {
		position:        absolute;
		top:             0;
		right:           0;
		bottom:          0;
		max-height:      none;
		display:         flex;
		width:           395px;
		min-width:       395px;
		padding-bottom:  30px;
		flex-direction:  column;
		justify-content: flex-start;
		align-items:     center;
		gap:             40px;
		overflow-y:      auto;
		outline:         none;
	}

	/* Eliminar padding-top del paso con precio para que quede al borde */
	.gp-formulario--form-expanded .gp-formulario-stage .gp-formulario-form .campos-paso:has(.gp-campo-precios) {
		padding-top: 0 !important;
	}

	/* Centrado vertical solo en pasos sin parrilla de precios (paso 2+) */
	.gp-formulario--center-content .gp-formulario-stage .gp-formulario-form .gp-formulario-fields {
		justify-content: center;
	}

	/* Ocultar botones originales */
	.gp-formulario--form-expanded .gp-formulario-stage .gp-formulario-form .gp-formulario-actions {
		display: none;
	}

	.campos-paso {
		gap:           8px;
		margin-inline: 30px;
		padding-top:   30px !important;
	}

	/* Ocultar labels en campos-paso: el JS los copia al placeholder */
	.campos-paso .gp-campo label.gp-label--desktop-hidden {
		display: none;
	}


	.gp-precios-tangibilization {
		min-height:     73px;
		padding-inline: 30px;
		gap:            20px;
		box-sizing:     border-box;
	}

	.gp-payment-option .gp-payment-option-label {
		color:       #909090;
		text-align:  center;
		font-family: 'Work Sans', sans-serif;
		font-size:   14px;
		font-style:  normal;
		font-weight: 500;
		line-height: 14px;
	}

	.gp-payment-option--active .gp-payment-option-label {
		color: #000;
	}

	.gp-campo-privacidad-extra {
		color:       #909090;
		font-family: 'Work Sans', sans-serif;
		font-size:   14px;
		font-style:  normal;
		font-weight: 400;
		line-height: normal;
	}

	.gp-campo-privacidad-extra a {
		color:           #2AB20B;
		font-family:     'Work Sans', sans-serif;
		font-size:       14px;
		font-style:      normal;
		font-weight:     500;
		line-height:     normal;
		text-decoration: none;
	}

	.gp-campo-privacidad-extra a:hover {
		text-decoration: underline;
	}

	.gp-campo input[type="text"],
	.gp-campo input[type="email"],
	.gp-campo input[type="date"],
	.gp-campo input[type="tel"],
	.gp-campo select,
	.gp-campo textarea {
		width:      100%;
		height:     40px;
		border:     0.25px solid #909090;
		background: #fff;
		max-width:  none;
	}

	.gp-tang-text {
		color:       #000;
		font-family: 'Work Sans', sans-serif;
		font-size:   16px;
		font-style:  normal;
		font-weight: 500;
		line-height: normal;
	}

	.gp-tang-icon {
		width:  32.024px;
		height: 32.016px;
	}

	.gp-formulario-submit,
	.gp-formulario-next {
		display:         flex;
		justify-content: center;
		align-items:     center;
		flex:            1 0 0;
		align-self:      stretch;
		padding:         19px 32.75px 20px 32px;
		color:           var(--gp-form-btn-color, #000);
		font-family:     Rubik, sans-serif;
		font-size:       18px;
		font-style:      normal;
		font-weight:     500;
		line-height:     normal;
		text-align:      center !important;
	}
}

/* ==========================================================================
   gp/formulario-hero
   ========================================================================== */

.gp-formulario-hero {
	position: relative; /* ancla del copyright (.gp-hero-copyright) */
	width: 100%;
	overflow: hidden;
	/* El color de resaltado se inyecta como custom property desde render.php */
}

.gp-hero-image {
	position:            relative;
	height:              var(--gp-hero-height-mobile, 435px);
	display:             flex;
	flex-direction:      column;
	justify-content:     flex-end;
	align-items:         stretch;
	background-size:     cover;
	background-position: center center;
	background-repeat:   no-repeat;
}

.gp-hero-image--no-image {
	background-color: var(--gp-form-primary-dark, #1a3300);
}

.gp-hero-overlay {
	position: absolute;
	inset:    0;
}

/* Copyright de la imagen del hero: cajita negra con el texto dentro.
   Móvil: pegado arriba a la derecha del todo.
   Desktop (media query más abajo): abajo a la izquierda. */
.gp-hero-copyright {
	position:    absolute;
	top:         0;
	right:       0;
	z-index:     1;
	padding:     3px 10px;
	background:  rgba(0, 0, 0, 0.65);
	font-size:   0.7rem;
	color:       #fff;
	font-family: var(--gp-form-font-body);
}

.gp-formulario-hero .gp-hero-title {
	position:         relative;
	z-index:          1;
	margin:           0 !important;
	padding:          1rem 16px 14px 6px !important;
	width:            100% !important;
	max-width:        600px !important;
	box-sizing:       border-box;
	line-height:      1.18;
	background-color: transparent !important;
	color:            inherit;
}

/* Fondo per-línea: cada línea tiene su propio rectángulo oscuro */
.gp-hero-title-bg {
	display:                      inline;
	background-color:             var(--gp-title-bg, rgba(0, 0, 0, 0.75));
	-webkit-box-decoration-break: clone;
	box-decoration-break:         clone;
	padding:                      0 0.3em;

	color:          #fff;
	font-family:    'Rubik', sans-serif;
	font-size:      29.431px;
	font-style:     normal;
	font-weight:    500;
	line-height:    normal;
	text-transform: uppercase;
}

/* — Desktop: título sobre la imagen — */
@media (min-width: 900px) {
	.gp-formulario-stage .gp-hero-title {
		max-width:   var(--gp-hero-title-max-width, 700px) !important;
		padding:     var(--gp-space-xl) !important;
		margin-top:  50px !important;
		margin-left: 52px !important;
	}

	/* Desktop: el título va arriba, así que el copyright baja abajo a la izquierda */
	.gp-hero-copyright {
		top:    auto;
		right:  auto;
		bottom: 0;
		left:   0;
	}

	.gp-formulario-stage .gp-hero-title .gp-hero-title-bg {
		color:          #fff;
		font-family:    var(--wp--preset--font-family--rubik, 'Rubik', sans-serif);
		font-size:      55px;
		font-style:     normal;
		font-weight:    500;
		line-height:    normal;
		text-transform: uppercase;
	}
}

/* Texto resaltado: hereda el color de --gp-hero-highlight del wrapper */
.gp-formulario-hero .gp-hero-title mark,
.gp-formulario-hero .gp-hero-title .gp-highlight,
.gp-hero-title-bg mark,
.gp-hero-title-bg .gp-highlight {
	background: none;
	color:      var(--gp-hero-highlight, var(--gp-form-primary, #2AB20B));
}

/* ==========================================================================
   gp/formulario-testimonio
   Se renderiza después del </form>, debajo de los pasos.
   ========================================================================== */

.gp-testimonio {
	padding:          35px 30px;
	font-family:      var(--gp-form-font-body);
	display:          flex;
	flex-direction:   column;
	align-items:      flex-start;
	gap:              19px;
	align-self:       stretch;
	background-color: var(--gp-testimonio-bg-mobile, #ffffff);
}

/* — Cuerpo: cita + autor — */
.gp-testimonio-body {
	padding-bottom: 0;
}

.gp-testimonio-quote {
	margin:  0 0 1.25rem;
	padding: 0;
	border:  none;
}

.gp-testimonio-quote-text {
	color:       #2AB20B;
	font-family: 'Rubik', sans-serif;
	font-size:   24px;
	font-style:  normal;
	font-weight: 700;
	line-height: normal;
	text-align:  left;
	max-width:   1068px;
	margin:      0;
}

/* — Autor — */
.gp-testimonio-author {
	display:        flex;
	flex-direction: column;
	gap:            0.2rem;
}

.gp-testimonio-author-name {
	color:       #000;
	font-family: 'Work Sans', sans-serif;
	font-size:   18px;
	font-style:  normal;
	font-weight: 500;
	line-height: normal;
	margin:      0;
}

.gp-testimonio-author-role {
	color:       #000;
	font-family: 'Work Sans', sans-serif;
	font-size:   16px;
	font-style:  normal;
	font-weight: 300;
	line-height: normal;
	margin:      0;
}

/* — Desktop: centrado, cita más grande, comillas — */
@media ( min-width: 782px ) {
	.gp-testimonio {
		padding:          86px 0;
		text-align:       center;
		background-color: var(--gp-testimonio-bg, #ffffff);
	}

	.gp-testimonio-body {
		max-width:    1068px;
		margin-left:  auto;
		margin-right: auto;
	}

	.gp-testimonio-quote-text {
		color:       #2AB20B;
		font-family: 'Rubik', sans-serif;
		font-size:   40px;
		font-style:  normal;
		font-weight: 700;
		line-height: normal;
		text-align:  center;
	}

	.gp-testimonio-quote-text::before { content: ''; }
	.gp-testimonio-quote-text::after  { content: ''; }

	.gp-testimonio-author {
		align-items: center;
	}
}

/* — Imagen con copyright sobreimpresionado — */
.gp-testimonio-image {
	position:            relative;
	width:               100%;
	height:              220px;
	background-size:     cover;
	background-position: center center;
	background-repeat:   no-repeat;
}

.gp-testimonio-copyright {
	position:   absolute;
	bottom:     0.5rem;
	left:       0.75rem;
	font-size:  0.7rem;
	color:      rgba(255, 255, 255, 0.75);
	font-family: var(--gp-form-font-body);
}

/* Resumen de operación — ancho completo dentro del padre */
.gp-resultado-success-view .wp-block-group.is-vertical > .wp-block-group.has-tertiary-background-color {
	width:      100%;
	box-sizing: border-box;
}

/* Precios — ajustes móvil */
@media (max-width: 782px) {
	.gp-precios-item--selected {
		min-height: 70px;
	}

	.gp-precios-tangibilization {
		padding: 25px 1rem;
		height:  auto;
	}
}

/* Socio activo (donación puntual): en portátiles (alto ≤900px) reducimos SOLO los
   tamaños de fuente para que la cajita compacta quepa. Lo demás no cambia.
   Lleva min-width:900, así que NO afecta a móvil. */
@media (min-width: 900px) and (max-height: 900px) {
	.gp-formulario--socio-activo .gp-campo-privacidad-extra { font-size: 10px; }

	.gp-formulario--socio-activo .gp-tang-text { font-size: 14px; }

	.gp-formulario--socio-activo .gp-campo label,
	.gp-formulario--socio-activo .gp-campo-precios .gp-campo-label,
	.gp-formulario--socio-activo .gp-datos-pago .gp-campo-wrapper label { font-size: 14px; }

	.gp-formulario--socio-activo .gp-actions-tang { font-size: 12px; }
}