/**
 * Solicita tus repuestos — formulario multi-paso (shortcode).
 * Autocontenido y con alcance en .st-repuestos (reutiliza .st-form /
 * .st-form-grid de components.css).
 */

.st-repuestos {
	--st-blue: #00239C;
	max-width: 960px;
	margin-inline: auto;
}

/* border-box en todo el formulario para que inputs/selects respeten la
 * columna del grid (width:100% + padding no desborda). */
.st-repuestos,
.st-repuestos *,
.st-repuestos *::before,
.st-repuestos *::after {
	box-sizing: border-box;
}

.st-repuestos .st-repuestos__form.st-form {
	padding: 44px;
}

/* ---- Stepper --------------------------------------------------------- */
.st-repuestos .st-steps {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.st-repuestos .st-step {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 8px 18px;
	position: relative;
}

.st-repuestos .st-step__num {
	width: 44px;
	height: 44px;
	margin: 0;
	flex: none;
	border-radius: 50%;
	background: #BBBBBB;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 24px;
}

.st-repuestos .st-step__label {
	font-weight: 500;
	font-size: 20px;
	color: #646464;
	white-space: nowrap;
}

.st-repuestos .st-step.is-active .st-step__num {
	background: var(--st-blue);
	color: #fff;
}

.st-repuestos .st-step.is-active .st-step__label {
	color: var(--st-blue);
}

.st-repuestos .st-step.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	border-radius: 3px;
	background: var(--st-blue);
}

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

.st-repuestos .st-panel.is-active {
	display: block;
	animation: st-rp-fade .2s ease;
}

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

.st-repuestos .st-panel__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: 0 0 22px;
}

.st-repuestos .st-form-grid {
	column-gap: 28px;
	row-gap: 22px;
}

.st-repuestos .st-req {
	color: var(--wp--preset--color--primary);
}

.st-repuestos .st-optional {
	color: var(--wp--preset--color--gray);
	font-weight: 400;
	font-size: 12px;
}

.st-repuestos .st-help {
	display: block;
	font-size: 12px;
	color: var(--wp--preset--color--gray);
	margin-top: 6px;
}

/* Figma: cada campo mide 80 = rótulo de 24 + 12 de aire + control de 44. */
.st-repuestos .st-label,
.st-repuestos .st-field > label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	color: #10161F;
	margin-bottom: 12px;
}

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

.st-repuestos textarea {
	min-height: 110px;
	resize: vertical;
}

.st-repuestos input::placeholder,
.st-repuestos textarea::placeholder {
	color: #9AA1AC;
}

.st-repuestos input:focus,
.st-repuestos select:focus,
.st-repuestos textarea:focus {
	outline: none;
	border-color: var(--st-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.st-repuestos select {
	appearance: none;
	-webkit-appearance: none;
	-moz-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-repuestos .st-field.has-error input,
.st-repuestos .st-field.has-error select,
.st-repuestos .st-field.has-error textarea {
	border-color: #EF4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

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

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

.st-repuestos .st-pref {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	border: 1px solid #E4E0D8;
	border-radius: 200px;
	padding: 10px 16px;
	background: #fff;
	color: #5B6472;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.st-repuestos .st-pref:hover {
	border-color: #CBD0D8;
}

.st-repuestos .st-pref.is-active {
	border-color: #E63237;
	color: #E63237;
	font-weight: 600;
	/* El Figma pinta el relleno rojo con la OPACIDAD DEL RELLENO al 2 %: es un
	   tinte casi blanco, no un rojo macizo. */
	background: rgba(230, 50, 55, .02);
}

/* ---- Selector de marcas --------------------------------------------- */
.st-repuestos .st-brands {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.st-repuestos .st-brand {
	height: 82px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.st-repuestos .st-brand:hover {
	border-color: #CBD0D8;
}

.st-repuestos .st-brand img {
	max-height: 38px;
	max-width: 100%;
	object-fit: contain;
}

.st-repuestos .st-brand--text span {
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--navy);
}

.st-repuestos .st-brand.is-active {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(234, 43, 39, .12);
}

/* ---- Carga de imagen ------------------------------------------------- */
.st-repuestos .st-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	/* Figma («Input- imagen», 824x208): caja de 180 con fondo hueso, borde
	   CONTINUO de 1.5 y 32 de relleno. No es de trazo discontinuo. */
	min-height: 180px;
	padding: 32px;
	text-align: center;
	color: #8A9099;
	background: #FBFAF7;
	border: 1.5px solid #E4E0D8;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.st-repuestos .st-upload:hover,
.st-repuestos .st-upload.is-drag {
	border-color: var(--wp--preset--color--primary);
	background: #FFF6F5;
}

.st-repuestos .st-upload--accent .st-upload__icon {
	--st-ico: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #E82927;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-repuestos .st-upload__text {
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	color: #12161D;
}

.st-repuestos .st-upload__text small {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 24px;
	color: #D1D7E5;
}

.st-repuestos .st-upload.has-file {
	border-color: #2FBF71;
	background: #F3FBF6;
}

.st-repuestos .st-upload__file {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	word-break: break-word;
}

/* ---- Checkbox de términos ------------------------------------------- */
.st-repuestos .st-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.5;
	color: #4B5563;
	cursor: pointer;
}

.st-repuestos .st-check input {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--primary);
}

.st-repuestos .st-check a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.st-repuestos .st-field.has-error .st-check span:first-of-type {
	color: #EF4444;
}

/* ---- Botones / acciones --------------------------------------------- */
/* Figma: la fila de botones mide 56 y va 40 por debajo del bloque de campos;
   el botón «Siguiente» es de 241x56 alineado a la derecha. */
.st-repuestos .st-actions {
	display: flex;
	gap: 16px;
	margin-top: 40px;
	min-height: 56px;
}

.st-repuestos .st-actions .st-btn {
	flex: 1;
	min-height: 56px;
}

.st-repuestos .st-actions--end {
	justify-content: flex-end;
}

.st-repuestos .st-actions--end .st-btn {
	flex: none;
	min-width: 241px;
}

.st-repuestos .st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: 999px;
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.st-repuestos .st-btn:active {
	transform: translateY(1px);
}

.st-repuestos .st-btn--primary {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.st-repuestos .st-btn--primary:hover {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
}

.st-repuestos .st-btn--ghost {
	background: #fff;
	color: #4B5563;
	border: 1.5px solid var(--wp--preset--color--border);
}

.st-repuestos .st-btn--ghost:hover {
	background: #F9FAFB;
	border-color: #CBD0D8;
}

.st-repuestos .st-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

/* ---- Alerta ---------------------------------------------------------- */
.st-repuestos .st-repuestos__alert {
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	color: #B91C1C;
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 22px;
	font-size: 14px;
}

/* ---- Éxito ----------------------------------------------------------- */
/* Paso 4 del Figma (`form-paso4`, 920x486): tarjeta blanca de radio 16 con 44
   de relleno, icono de 106 y luego 32 hasta el bloque de textos. */
.st-repuestos .st-success {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* El ritmo real es 32 bajo el icono y 12 entre título y texto: se pone el
	   menor como `gap` y el icono aporta los 20 que faltan. Con márgenes por
	   hijo no funcionaría, porque las reglas de más abajo los pisan. */
	gap: 12px;
	text-align: center;
}

/* El check es el mismo icono con degradado que el paso 4 de Solicita servicio:
   #0037B9 arriba → #3F78FF abajo, con el tic calado. No es un círculo de color
   con un check blanco encima. */
.st-repuestos .st-success__icon {
	--st-grad-from: #0037B9;
	--st-grad-to: #3F78FF;
	width: 106px;
	height: 106px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-repuestos .st-success__icon svg {
	width: 106px;
	height: 106px;
}

/* El título y el texto van juntos con 12 de separación, de ahí el margen
   negativo que cancela el `gap: 32` de la tarjeta entre ambos. */
.st-repuestos .st-success__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #12161D;
	margin: 0;
}

.st-repuestos .st-success__text {
	font-size: 16px;
	color: #5B6472;
	max-width: 420px;
	margin: 0 auto;
	line-height: 1.5;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 782px) {
	.st-repuestos .st-repuestos__form.st-form {
		padding: 24px 16px;
	}
	.st-repuestos .st-step__label {
		font-size: 14px;
	}
	.st-repuestos .st-brands {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.st-repuestos .st-step__label {
		display: none;
	}
	.st-repuestos .st-brands {
		grid-template-columns: repeat(2, 1fr);
	}
	.st-repuestos .st-actions {
		flex-direction: column-reverse;
	}
	.st-repuestos .st-actions--end .st-btn {
		width: 100%;
	}
}

/* =========================================================
   Landing de repuestos — réplica del frame
   «servitotal-landing-repuestos» del Figma (sección
   «Solicita tu repuestos», página 🇸🇻 El salvador).

   Referencias desktop sobre un contenido de 1280:
     hero 501 · marcas 168 · tres pasos 506 · formulario 880 · ubicaciones 464
   ========================================================= */

/* ---------- Hero ---------- */
.st-rp-hero {
	/* El bodegón mide 676x636 y la banda solo 501: sobresale por arriba, por
	   abajo y 16px por la derecha del lienzo de 1440. Aquí se recorta. */
	overflow: hidden;
	padding: 0;
}

.st-rp-hero__inner {
	max-width: 1280px;
	margin-inline: auto;
	/* Los mismos márgenes de página que `.container` (15/20/80), para que el
	   hero quede alineado con las secciones de debajo. NO usar una variable
	   inventada: `--st-page-margin` no existe en el tema y el valor de reserva
	   se quedaba en 80 también en móvil, dejando el titular en 4 líneas. */
	padding-inline: 15px;
	min-height: 501px;
	display: flex;
	align-items: center;
}

.st-rp-hero__text {
	flex: 0 0 700px;
	max-width: 700px;
	display: flex;
	flex-direction: column;
	gap: 33px;
}

.st-rp-hero__title {
	margin: 0;
	max-width: 580px;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: #FFFFFF;
}

.st-rp-hero__lead {
	margin: 0;
	max-width: 540px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: #FFFFFF;
}

.st-rp-hero__cta {
	gap: 20px;
}

.st-rp-hero .st-rp-btn .wp-block-button__link {
	padding: 14px 24px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 17px;
	background-color: var(--wp--preset--color--primary);
	color: #FFFFFF;
}

/* El botón secundario del Figma es 100 % transparente con borde blanco de 1px
   (relleno #000000 con la OPACIDAD DEL RELLENO a 0, no un negro macizo). */
.st-rp-hero .st-rp-btn--ghost .wp-block-button__link {
	background-color: transparent;
	border: 1px solid #FFFFFF;
	/* El borde de 1px no debe sumar altura: el botón mide 45 en ambos casos. */
	padding: 13px 23px;
}

/* Con `.st-rp-hero` delante a propósito: el bodegón es el ÚLTIMO hijo del
   grupo y el layout del core le clava `margin-block-end: 0` mediante
   `:where(.wp-block-group…) > :last-child`. Al ser propiedad lógica no se ve
   buscando `margin-bottom`, y con un solo nombre de clase empatábamos en
   especificidad y ganaba el core. */
.st-rp-hero .st-rp-hero__visual {
	flex: 0 0 676px;
	width: 676px;
	height: 636px;
	/* Sobresale 68 por arriba y 67 por abajo: con márgenes negativos aporta
	   636-135 = 501 a la fila, que es justo el alto de la banda. Sin esto la
	   sección crece hasta 636. */
	margin-top: -68px;
	margin-bottom: -67px;
	overflow: hidden;
	position: relative;
}

/* Recorte del Figma: la foto se dibuja a 860x645 y la ventana de 676 enseña su
   parte derecha (el modo «Crop» deja la transformada 1.146/0.104 sobre el eje
   X y -0.048 sobre el Y). */
.st-rp-hero__img {
	position: absolute;
	left: -244px;
	top: 31px;
	margin: 0;
	width: 860px;
}

.st-rp-hero__img img {
	display: block;
	width: 860px;
	height: 645px;
	max-width: none;
}

/* Márgenes de página del hero, calcados de `.container`. */
@media (min-width: 768px) {
	.st-rp-hero__inner { padding-inline: 20px; }
}

@media (min-width: 1024px) {
	.st-rp-hero__inner { padding-inline: 80px; }
}

/* ---------- Franja de marcas ---------- */
.st-rp-brands {
	/* `padding-inline: 0` a propósito: el core aplica 1.25em/2.375em (=38px de
	   lado) a TODO grupo con fondo, y aquí dejaba el contenido en 254 en vez de
	   330, partiendo el rótulo en dos líneas. */
	padding-block: 20px;
	padding-inline: 0;
}

.st-rp-brands__title {
	margin: 0 0 40px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.33;
	color: #FFFFFF;
}

.st-brands-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	flex-wrap: wrap;
}

.st-brands-row .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
}

.st-brands-row img {
	display: block;
	width: 134px;
	height: 56px;
	object-fit: contain;
}

/* ---------- Solicitalo en tres pasos ---------- */
.st-rp-steps {
	background: #FFFFFF;
	padding-block: 80px;
}

.st-rp-steps__title {
	margin: 0 0 64px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #12161D;
}

.st-rp-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.st-rp-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 242px;
	padding: 32px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
}

.st-rp-step__ico {
	--st-ico: 32px;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma: el cuadro es #E63237 con la OPACIDAD DEL RELLENO al 6,3 % (un rosa
	   muy claro) y el glifo va en rojo — no es un cuadrado rojo con icono
	   blanco. El pin de sucursales sí es blanco sobre rojo macizo. */
	background: rgba(230, 50, 55, .063);
	border-radius: 12px;
	color: #E63237;
}

.st-rp-step__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.st-rp-step__name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #10161F;
}

.st-rp-step__desc {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: #94A3B8;
}

/* ---------- Sección del formulario ---------- */
.st-rp-form {
	background: #F7F5F0;
	padding-block: 80px;
}

.st-rp-form__title {
	margin: 0 0 64px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #12161D;
}

/* La tarjeta del formulario mide 1030 dentro del contenido de 1280. */
.st-rp-form .st-repuestos {
	max-width: 1030px;
}

/* ---------- Ubicaciones ---------- */
.st-rp-locs {
	padding-block: 80px;
}

.st-rp-locs__title {
	margin: 0 0 40px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #1A1A1A;
}

.st-rp-locs__grid {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.st-rp-loc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	min-height: 224px;
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 12px;
}

.st-rp-loc__ico {
	--st-ico: 24px;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #EA2B27;
	border-radius: 50%;
	color: #FFFFFF;
}

.st-rp-loc__head,
.st-rp-loc__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.st-rp-loc__name {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #1A1A1A;
}

.st-rp-loc__phone {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #1A1A1A;
}

.st-rp-loc__line {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #081534;
}

/* ---------- Tablet (frame «…- Tablet», 1023x2564) ----------
   Secciones: hero 364 · marcas 179 · tres pasos 456 · formulario 879 ·
   sucursales 419. Relleno vertical de 48 (20 en la franja de marcas).

   Ojo con la especificidad: las reglas de escritorio llevan `.st-rp-hero`
   delante para ganarle al layout del core, así que aquí hay que repetirlo o
   estas no se aplican. */
@media (max-width: 1023px) {
	.st-rp-hero__inner {
		min-height: 364px;
		gap: 24px;
		padding-block: 32px;
		justify-content: center;
	}
	.st-rp-hero__text { flex: 0 1 468px; max-width: 468px; gap: 24px; }
	.st-rp-hero__title { max-width: 100%; font-size: 32px; line-height: 1.1; }
	.st-rp-hero__lead { font-size: 16px; line-height: 1.25; }

	.st-rp-hero .st-rp-hero__visual {
		flex: 0 1 468px;
		width: 468px;
		height: 300px;
		margin-block: 0;
	}
	.st-rp-hero .st-rp-hero__img {
		position: static;
		width: 100%;
	}
	.st-rp-hero .st-rp-hero__img img {
		width: 100%;
		height: 300px;
		object-fit: contain;
	}

	.st-rp-brands__title { font-size: 18px; line-height: 32px; }
	.st-brands-row { gap: 24px; }
	.st-brands-row img { width: 90px; height: 67px; }

	.st-rp-steps,
	.st-rp-form,
	.st-rp-locs { padding-block: 48px; }

	/* Los títulos de sección bajan a 24 (caja de 24; la de sucursales, 28). */
	.st-rp-steps__title,
	.st-rp-form__title { font-size: 24px; line-height: 24px; margin-bottom: 64px; }
	.st-rp-locs__title { font-size: 24px; line-height: 28px; margin-bottom: 0; }
	/* Del título a las tarjetas van 39 de separación + 40 de relleno del marco
	   interior = 79. */
	.st-rp-locs__grid { margin-top: 79px; }

	.st-rp-steps__grid { gap: 16px; }
	/* Alturas del Figma a este ancho: 272 las de pasos y 216 las de sucursal. */
	.st-rp-step { padding: 32px; min-height: 272px; }
	.st-rp-step__name { font-size: 22px; }
	.st-rp-loc { min-height: 216px; }
	.st-rp-locs__grid { gap: 24px; }

	/* A este ancho el Figma APILA teléfono y correo (el bloque de campos pasa de
	   367: 73 + 24 + 170 + 24 + 76). Las utilidades los mantienen en fila desde
	   `md` (768), así que hay que forzarlo aquí. */
	.st-repuestos .st-panel .st-field.col-md-6 { width: 100%; }
}

/* ---------- Móvil (frame «…- Mobile», 360x3065) ----------
   Secciones: hero 562 · marcas 150 · tres pasos 508 · formulario 762 ·
   sucursales 816. Relleno lateral 16 y vertical 32. */
@media (max-width: 767px) {
	/* El hero se INVIERTE: el bodegón va arriba y el texto debajo, centrado.
	   `column-reverse` lo consigue sin tocar el orden del marcado. */
	.st-rp-hero__inner {
		flex-direction: column-reverse;
		justify-content: flex-end;
		align-items: stretch;
		min-height: 562px;
		padding-block: 32px 24px;
		gap: 24px;
	}

	.st-rp-hero__text {
		flex: 0 0 auto;
		max-width: 100%;
		gap: 16px;
		text-align: center;
	}
	.st-rp-hero__title { max-width: 100%; font-size: 28px; line-height: 1.21; }
	.st-rp-hero__lead { max-width: 100%; font-size: 14px; line-height: 20px; }

	/* Los dos botones pasan a columna y ocupan todo el ancho (328x45). */
	.st-rp-hero__cta { flex-direction: column; gap: 12px; }
	.st-rp-hero__cta .wp-block-button { width: 100%; }
	.st-rp-hero .st-rp-btn .wp-block-button__link { display: block; width: 100%; }

	.st-rp-hero .st-rp-hero__visual {
		flex: 0 0 220px;
		width: 100%;
		height: 220px;
		margin-block: 0;
	}
	.st-rp-hero .st-rp-hero__img {
		position: absolute;
		left: 50%;
		top: -28px;
		width: 429px;
		margin-left: -214px;
	}
	.st-rp-hero .st-rp-hero__img img { width: 429px; height: 276px; }

	.st-rp-brands { padding-block: 24px; }
	.st-rp-brands__title { margin-bottom: 16px; font-size: 14px; line-height: 20px; }
	/* A este ancho el Figma enseña SOLO TRES logos en una fila de 66; con los
	   siete se irían a tres filas y la franja pasaría de 150 a más del doble. */
	.st-brands-row { gap: 28px; flex-wrap: nowrap; }
	.st-brands-row .wp-block-image:nth-child(n+4) { display: none; }
	.st-brands-row img { width: 75px; height: 66px; }

	.st-rp-steps,
	.st-rp-form,
	.st-rp-locs { padding-block: 32px; }

	/* En móvil el Figma NO apila los tres pasos: dos tarjetas de 156 en una
	   fila y la tercera a todo el ancho (328x160). `minmax(0, 1fr)` es
	   imprescindible: con `1fr` a secas el mínimo automático deja que una
	   palabra larga ensanche su columna y las tarjetas salen desiguales. */
	.st-rp-steps__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.st-rp-step {
		padding: 12px;
		gap: 16px;
		min-height: 216px;
		justify-content: flex-start;
	}
	.st-rp-step:last-child { grid-column: 1 / -1; min-height: 160px; }
	.st-rp-step__body { gap: 8px; }
	.st-rp-step__name { font-size: 18px; line-height: 20px; }
	.st-rp-step__desc { font-size: 13px; line-height: 18px; }

	.st-rp-locs__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
	.st-rp-loc { min-height: 216px; }

	.st-rp-steps__title,
	.st-rp-locs__title { font-size: 24px; line-height: 28px; }
	.st-rp-form__title { font-size: 22px; line-height: 28px; }
	.st-rp-steps__title,
	.st-rp-form__title { margin-bottom: 24px; }
	.st-rp-locs__title { margin-bottom: 0; }

	/* Tarjeta del formulario: stepper de 68, campos con 16 de separación
	   (no los 24 de `gy-4`) y botón a todo el ancho. */
	.st-repuestos .st-panel .row { --bs-gutter-y: 16px; }
	.st-repuestos .st-steps { min-height: 68px; margin-bottom: 24px; }
	.st-repuestos .st-actions--end .st-btn { min-width: 0; width: 100%; }
	.st-repuestos .st-actions { margin-top: 24px; }
}

/* `display: flex` en .st-success pisa al atributo `hidden` (la regla del
   navegador es de menor especificidad), y el panel de éxito se quedaba visible
   nada más cargar, debajo del formulario. */
.st-repuestos .st-success[hidden] {
	display: none;
}