/**
 * Comercios aliados y landing de garantía extendida.
 *
 * Frames del Figma (sección «Protege tu producto»):
 *   Grantía extendida LCO / RSO / ATO   1440 · contenido 1280 = 498 + 30 + 752
 *   Grantía extendida LCO- Tablet       1023 · 482 + 30 + 482, px 15
 *   Grantía extendida LCO - Mobile       360 · una columna, px 15, gap 24,
 *                                        el formulario va PRIMERO
 *   Form-paso2 / Form-confirmación de envío
 *
 * Decisión: en el Figma los pasos 2 y 3 están dibujados como frames sueltos de
 * 725 (sin la tarjeta al lado). Aquí se mantiene la maqueta de dos columnas
 * durante todo el asistente: la diferencia de ancho es de 27px y evita que la
 * página dé un salto al pasar de paso.
 */

/* -------------------------------------------------------------------------
 * Rejilla de comercios (página «Protege tu producto»)
 * ---------------------------------------------------------------------- */

/* La tarjeta era un `wp-block-group` (con el `border-box` de WordPress) y ahora
   es un <a> suelto: sin esto el relleno se suma al `min-height` y la tarjeta
   pasa de 217 a 317. */
a.st-ga-comercio,
a.st-ga-comercio * {
	box-sizing: border-box;
}

a.st-ga-comercio {
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s ease, transform .2s ease;
}

a.st-ga-comercio:hover,
a.st-ga-comercio:focus-visible {
	box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

/* El rótulo era un <a> dentro del <p>; ahora la tarjeta entera es el enlace. */
.st-ga-comercio__cta {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 20px;
	color: #E82927;
}

/* En el frame de 360 la tarjeta mide 330x96 y el rótulo va en una sola línea:
   se limita el logo para que quepan los dos. */
.st-pr-comercios .st-ga-comercio__cta { white-space: nowrap; }

/* -------------------------------------------------------------------------
 * Landing del comercio
 * ---------------------------------------------------------------------- */

.st-gx {
	background: #F7F5F0;
	padding: 60px 80px;
}

.st-gx *,
.st-gx *::before,
.st-gx *::after {
	box-sizing: border-box;
}

/* Figma: las dos columnas miden lo mismo (818 en LCO). `stretch` deja que la
   más alta mande y el pie del formulario se apoya abajo (just=SPACE_EVENLY). */
.st-gx__row {
	display: flex;
	align-items: stretch;
	gap: 30px;
	max-width: 1280px;
	margin-inline: auto;
}

/* ---- Tarjeta de beneficios (498) ------------------------------------- */
.st-gx-card {
	flex: 0 0 498px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 48px;
	background: #FFFFFF;
	border-radius: 12px;
	/* Los trazos de Figma van por dentro y no ocupan espacio: con `border` el
	   contenido perdía 2px y un beneficio se partía en una línea de más. */
	outline: 1px solid #E5E7EB;
	outline-offset: -1px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.st-gx-card .st-gx-logo {
	display: block;
	width: auto;
	max-width: 246px;
	height: 38px;
	object-fit: contain;
	object-position: left center;
}

.st-gx-logo--texto {
	font-size: 24px;
	font-weight: 800;
	line-height: 38px;
	color: var(--wp--preset--color--navy, #081534);
}

.st-gx-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: #363636;
}

.st-gx-benefits {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-gx-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #374151;
}

.st-gx-benefits__ico {
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 24px;
	/* Figma: la marca de verificación va en azul #254EDC. */
	color: #254EDC;
	--st-ico: 16px;
}

/* Figma: una línea de 1px y 24px de aire antes de la nota. */
.st-gx-card__nota {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid #E5E7EB;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: #E82927;
}

/* ---- Formulario (752) ------------------------------------------------ */
.st-gx-form {
	flex: 1 1 752px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 44px;
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .03);
}

.st-gx-form__form {
	display: flex;
	flex-direction: column;
	gap: 32px;
	height: 100%;
}

/* `display:flex` gana al atributo `hidden` (la regla del navegador es de menor
   especificidad): sin esto el formulario sigue visible tras enviarlo. */
.st-gx-form__form[hidden] { display: none; }

/* ---- Stepper (fila de 104: 4 + pestaña de 68 + 32) ------------------- */
.st-gx-steps {
	display: flex;
	margin: 0;
	padding: 4px 0 32px;
	list-style: none;
}

.st-gx-step {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding-bottom: 24px;
	/* Figma: cada pestaña lleva su propia línea inferior; la activa en azul. */
	border-bottom: 1px solid var(--wp--preset--color--border, #E4E0D8);
}

.st-gx-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 100px;
	background: #BBBBBB;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 500;
	line-height: 24px;
}

.st-gx-step__label {
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	color: #BBBBBB;
}

.st-gx-step.is-active { border-bottom-color: #00239C; }
.st-gx-step.is-active .st-gx-step__num { background: #00239C; }
.st-gx-step.is-active .st-gx-step__label { color: #0027AD; }

/* ---- Paneles --------------------------------------------------------- */
.st-gx-panel { display: none; }

.st-gx-panel.is-active {
	display: flex;
	flex-direction: column;
	gap: 32px;
	animation: st-gx-fade .2s ease;
}

@keyframes st-gx-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.st-gx-panel__title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	color: #2A2A2A;
}

.st-gx-alert {
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba(232, 41, 39, .08);
	color: #B4201E;
	font-size: 14px;
	line-height: 20px;
}

.st-gx-alert[hidden] { display: none; }

/* ---- Campos (rótulo 24 + 12 + control 44 = 80) ----------------------- */
.st-gx-row {
	display: flex;
	gap: 32px;
}

.st-gx-row > .st-gx-field { flex: 1 1 0; min-width: 0; }

.st-gx-field > label,
.st-gx-field .st-gx-label {
	display: block;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	color: #10161F;
}

/* Figma: los rótulos sueltos («Preferencia de contacto», «Selecciona el tipo
   de protección…») miden 17 de alto, no 24 como los de un campo. */
.st-gx-field .st-gx-label { line-height: 17px; }

.st-gx-req { color: #E82927; }

.st-gx-field input,
.st-gx-field select {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--border, #E4E0D8);
	border-radius: 10px;
	background: #FFFFFF;
	font-size: 15px;
	color: var(--wp--preset--color--contrast, #12161D);
}

.st-gx-field input::placeholder { color: #9AA1AC; }

.st-gx-field input:focus,
.st-gx-field select:focus {
	outline: none;
	border-color: #00239C;
	box-shadow: 0 0 0 3px rgba(0, 35, 156, .14);
}

.st-gx-field select {
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23EA2B27' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	cursor: pointer;
}

.st-gx-field.has-error input,
.st-gx-field.has-error select {
	border-color: #EF4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.st-gx-field__error {
	display: block;
	margin-top: 5px;
	color: #EF4444;
	font-size: 12px;
}

/* Trampa antispam: fuera de la vista pero accesible al navegador. */
.st-gx-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Preferencia de contacto (píldoras de 44) ------------------------ */
.st-gx-prefs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.st-gx-pref {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--border, #E4E0D8);
	border-radius: 200px;
	background: transparent;
	color: #5B6472;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	cursor: pointer;
	--st-ico: 16px;
}

.st-gx-pref.is-active {
	background: rgba(230, 50, 55, .02);
	border-color: #E63237;
	color: #E63237;
	font-weight: 600;
}

/* ---- Planes de protección (2x2 de 309x80) ---------------------------- */
.st-gx-planes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.st-gx-plan {
	min-height: 80px;
	padding: 24px;
	border: 1px solid #CCCED1;
	border-radius: 12px;
	background: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--wp--preset--color--contrast, #12161D);
	text-align: left;
	cursor: pointer;
}

.st-gx-plan.is-active {
	border-color: #2A7FFF;
	box-shadow: 0 0 0 1px #2A7FFF inset;
}

/* ---- Pie de acciones ------------------------------------------------- */
.st-gx-actions {
	display: flex;
	align-items: center;
	/* Paso 1: sin «Atrás», el botón de avance va a la derecha (frame 664x78,
	   just=MAX). Paso 2: con «Atrás», los dos extremos (just=SPACE_BETWEEN). */
	justify-content: flex-end;
	gap: 16px;
	/* El pie se apoya abajo cuando el paso deja hueco (paso 2 y confirmación). */
	margin-top: auto;
	padding-top: 30px;
	border-top: 1px solid var(--wp--preset--color--border, #E4E0D8);
}

.st-gx-actions > [hidden] { display: none; }
.st-gx-actions:has(> [data-prev]:not([hidden])) { justify-content: space-between; }

.st-gx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 48px;
	padding: 14px 24px;
	border: 0;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	--st-ico: 12px;
}

.st-gx-btn--primary {
	min-width: 240px;
	background: #E82927;
	color: #FFFFFF;
}

.st-gx-btn--primary:disabled { opacity: .6; cursor: default; }

.st-gx-btn--ghost {
	gap: 8px;
	min-width: 114px;
	border: 1.5px solid var(--wp--preset--color--border, #E4E0D8);
	background: transparent;
	color: #5B6472;
}

.st-gx-btn__ico {
	display: inline-flex;
	align-items: center;
}

.st-gx-btn__ico--back { transform: rotate(180deg); }

/* ---- Confirmación ---------------------------------------------------- */
/* Figma («Form-confirmación de envío»): el bloque va centrado en la tarjeta,
   no pegado arriba; por eso ocupa el alto sobrante del formulario. */
.st-gx-success {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 60px 0;
	text-align: center;
}

.st-gx-success[hidden] { display: none; }

.st-gx-success__icon {
	display: inline-flex;
	margin-bottom: 20px;
	--st-ico: 106px;
}

.st-gx-success__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 40px;
	color: #12161D;
}

.st-gx-success__text {
	max-width: 420px;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #5B6472;
}

/* -------------------------------------------------------------------------
 * Tablet — frame de 1023: sigue en dos columnas, 482 + 30 + 482.
 * ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.st-gx { padding: 60px 15px; }

	.st-gx-card { flex: 0 0 482px; }
	.st-gx-form { flex: 1 1 482px; padding: 24px; }

	/* Los beneficios pasan de 24 a 20 de interlínea (lista de 388, no 468). */
	.st-gx-benefits li { line-height: 20px; }
	.st-gx-benefits__ico { height: 20px; }

	/* Pestañas de 56 con círculo de 32 y rótulo de 16; la fila sigue en 104. */
	.st-gx-steps { padding-top: 16px; }
	.st-gx-step { padding-bottom: 24px; }
	.st-gx-step__num { width: 32px; height: 32px; font-size: 16px; line-height: 20px; }
	.st-gx-step__label { font-size: 16px; line-height: 20px; }

	/* El campo baja de 80 a 76: el aire bajo el rótulo pasa de 12 a 8. */
	.st-gx-field > label { margin-bottom: 8px; }

	.st-gx-row { gap: 24px; }
}

/* -------------------------------------------------------------------------
 * Móvil — frame de 360: una columna y el formulario primero.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.st-gx { padding: 32px 15px 40px; }

	.st-gx__row {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	/* Figma: en el frame de 360 el formulario va arriba y la tarjeta debajo. */
	.st-gx-form { order: 1; flex: 1 1 auto; padding: 24px 16px; }
	.st-gx-card { order: 2; flex: 1 1 auto; gap: 24px; padding: 24px; }

	/* ---- Tarjeta (330x702): logo y título centrados, textos más pequeños --- */
	.st-gx-card { align-items: center; text-align: center; }
	.st-gx-card .st-gx-logo { max-width: 140px; height: 22px; object-position: center; }
	.st-gx-benefits,
	.st-gx-card__nota { align-self: stretch; text-align: left; }

	.st-gx-card__title { font-size: 16px; line-height: 19px; }

	.st-gx-benefits li { font-size: 13px; line-height: 20px; }

	.st-gx-card__nota { padding-top: 16px; font-size: 14px; line-height: 17px; }

	/* ---- Formulario (330x802) ------------------------------------------- */
	.st-gx-form__form { gap: 24px; }
	.st-gx-panel.is-active { gap: 20px; }
	.st-gx-panel__title { font-size: 16px; font-weight: 600; line-height: 19px; }

	/* Fila del stepper de 68: pestañas de 36 con círculo de 20. */
	.st-gx-steps { padding: 16px 0; }
	.st-gx-step { gap: 7px; padding-bottom: 16px; }
	.st-gx-step__num { width: 20px; height: 20px; font-size: 12px; line-height: 15px; }
	.st-gx-step__label { font-size: 12px; line-height: 15px; }

	/* En 298 de ancho útil los pares de campos no caben en una fila. */
	.st-gx-row { flex-direction: column; gap: 16px; }
	/* Campo de 76 = rótulo de 15 + 17 de aire + control de 44. Los rótulos
	   sueltos (preferencia, protección) dejan 12, no 17. */
	.st-gx-field > label,
	.st-gx-field .st-gx-label { font-size: 12px; line-height: 15px; }
	.st-gx-field > label { margin-bottom: 17px; }
	.st-gx-field .st-gx-label { margin-bottom: 12px; }

	/* Píldoras de 32 en una sola fila. El Figma las dibuja con 16 de relleno
	   lateral, pero así suman 305 en una tarjeta de 298 y se parten en dos
	   líneas: con 12 caben las tres, que es lo que el diseño busca. */
	.st-gx-prefs { gap: 8px; }
	.st-gx-pref { min-height: 32px; gap: 4px; padding: 8px 12px; font-size: 12px; }

	.st-gx-planes { grid-template-columns: 1fr; }
	.st-gx-plan { min-height: 64px; padding: 18px; font-size: 14px; }

	/* El botón ocupa el ancho completo (298) y no hay línea sobre el pie. */
	.st-gx-actions { padding-top: 20px; gap: 12px; border-top: 0; }
	.st-gx-btn { gap: 8px; padding: 14px 18px; font-size: 14px; }
	.st-gx-btn--primary { flex: 1 1 auto; min-width: 0; }
	.st-gx-btn--ghost { flex: 0 0 auto; min-width: 0; }

	.st-gx-success { padding: 32px 0; }
	.st-gx-success__icon { --st-ico: 80px; }
	.st-gx-success__title { font-size: 24px; line-height: 32px; }

	/* Tarjeta de comercio de 330x96: el logo cede sitio al rótulo. */
	.st-pr-comercios .st-ga-comercio__logo img { max-width: 120px; }
	.st-pr-comercios .st-ga-comercio__cta { font-size: 16px; }
}