/*
 * `/shops/` · `/es/talleres/` — VIN Card para talleres.
 *
 * Jerarquía: la prueba gratis es la única acción en oro; el pedido de lotes
 * va en un botón secundario y la recomendada es una nota. Tres pesos para tres
 * decisiones, y ninguna compite con la primera.
 */

.poc-lots {
	max-width: 44rem;
	margin: 0 auto;
	padding: var(--poc-space-4, 2rem) 1rem var(--poc-space-5, 3rem);
}

.poc-lots-kicker {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--poc-muted, #55627a);
}

.poc-lots h1 {
	margin: 0 0 0.75rem;
	font-size: var(--poc-text-2xl, 2rem);
	line-height: var(--poc-leading-tight, 1.15);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.poc-lots-lead {
	margin: 0 0 var(--poc-space-3, 1.5rem);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--poc-muted, #55627a);
	text-wrap: pretty;
}

.poc-lots h2 {
	margin: 0 0 0.75rem;
	font-size: var(--poc-text-lg, 1.25rem);
	line-height: 1.25;
	text-wrap: balance;
}

.poc-lots section,
.poc-lots aside {
	box-sizing: border-box;
	margin: 0 0 var(--poc-space-3, 1.5rem);
	padding: 1.25rem;
	border: 1px solid var(--poc-line, #e1e6ee);
	border-radius: var(--poc-radius-lg, 18px);
	background: var(--poc-surface, #fff);
}

/* La prueba gratis manda: el único borde de marca de la página. */
.poc-lots-free {
	border: 2px solid var(--poc-brand, #d4af37) !important;
}

.poc-lots-gets {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.poc-lots-gets li {
	position: relative;
	padding: 0.25rem 0 0.25rem 1.25rem;
	line-height: 1.4;
	text-wrap: pretty;
}

.poc-lots-gets li::before {
	content: "";
	position: absolute;
	left: 0.125rem;
	top: 0.7rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--poc-brand, #d4af37);
}

.poc-lots-form {
	display: grid;
	gap: 0.875rem;
}

.poc-lots-field {
	display: grid;
	gap: 0.3rem;
	margin: 0;
}

.poc-lots-field label,
.poc-lots-field legend,
.poc-lots-qty legend {
	font-weight: 600;
}

.poc-lots-field input:not([type="radio"]):not([type="checkbox"]),
.poc-lots-field select {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
}

.poc-lots-field select {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--poc-field-line, #76839a);
	border-radius: var(--poc-radius-sm, 8px);
	font: inherit;
	color: var(--poc-ink);
	background: var(--poc-surface);
}

.poc-lots-field select:focus-visible {
	outline: 3px solid var(--poc-focus);
	outline-offset: 2px;
}

/* Los radios, a su tamaño: la regla de arriba los estiraba a todo el ancho. */
.poc-lots input[type="radio"] {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;
	margin: 0;
	accent-color: var(--poc-ink, #0d1b2a);
}

.poc-lots-opt {
	font-weight: 400;
	color: var(--poc-muted, #55627a);
}

.poc-lots-field.is-invalid input,
.poc-lots-field.is-invalid select,
.poc-lots-field.is-invalid legend {
	border-color: var(--poc-danger, #b42318);
	color: var(--poc-danger, #b42318);
}

.poc-lots-choice,
.poc-lots-qty {
	margin: 0;
	padding: 0;
	border: 0;
}

.poc-lots-choice {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.25rem;
}

.poc-lots-choice legend {
	flex-basis: 100%;
	margin-bottom: 0.25rem;
}

.poc-lots-choice label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-weight: 400;
	cursor: pointer;
}

.poc-lots-qty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.625rem;
}

.poc-lots-qty legend {
	margin-bottom: 0.5rem;
}

.poc-lots-opt-card {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.5rem;
	min-height: 56px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--poc-line, #e1e6ee);
	border-radius: var(--poc-radius-md, 12px);
	cursor: pointer;
}

.poc-lots-opt-card:has(input:checked) {
	border-color: var(--poc-ink, #0d1b2a);
	box-shadow: 0 0 0 1px var(--poc-ink, #0d1b2a);
}

.poc-lots-n {
	font-weight: 700;
}

.poc-lots-price {
	grid-column: 2;
	color: var(--poc-muted, #55627a);
	font-variant-numeric: tabular-nums;
}

.poc-lots-other {
	grid-column: 1 / -1;
	grid-template-columns: auto auto 1fr;
}

.poc-lots-other input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 9rem;
	min-height: 44px;
	justify-self: end;
}

.poc-lots .poc-btn {
	justify-self: start;
	min-height: 48px;
}

.poc-lots-small {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--poc-muted, #55627a);
	text-wrap: pretty;
}

.poc-lots-notice {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--poc-radius-md, 12px);
	line-height: 1.4;
}

.poc-lots-notice.is-ok {
	background: var(--poc-ok-soft, #e7f6ec);
	color: var(--poc-ok-ink, #0f5132);
}

.poc-lots-notice.is-error {
	background: var(--poc-warn-soft, #fdecea);
	color: var(--poc-warn-ink, #7a1c12);
}

.poc-lots-reco {
	background: transparent !important;
}

.poc-lots-reco h2 {
	font-size: 1.0625rem;
}

.poc-lots-reco p {
	margin: 0 0 0.5rem;
	line-height: 1.45;
}

.poc-lots-disclaimer {
	margin-top: var(--poc-space-3, 1.5rem);
}

/* Para quién es: una lista de seis, en dos columnas desde tableta. Los dos
   primeros (talleres y repuestos) ocupan la fila entera y van en tinta. */
.poc-lots-seg-list {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.poc-lots-seg-list {
		grid-template-columns: 1fr 1fr;
	}
}

.poc-lots-seg-list li {
	display: grid;
	align-content: start;
	gap: 0.2rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--poc-line, #e1e6ee);
	border-radius: var(--poc-radius-md, 12px);
	line-height: 1.4;
}

.poc-lots-seg-list li.is-main {
	border-color: var(--poc-ink, #0d1b2a);
}

.poc-lots-seg-list li.is-main b {
	font-size: 1.0625rem;
}

.poc-lots-seg-list span {
	color: var(--poc-muted, #55627a);
	font-size: 0.9375rem;
}

.poc-lots-how {
	margin: 0;
	line-height: 1.5;
	text-wrap: pretty;
}

.poc-lots .poc-btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.75;
}

.poc-lots .poc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * `/pros/` — la cartulina profesional de dos caras (2026-10-21). Misma
 * página que `/shops/` en estructura; aquí la acción principal es el pedido,
 * así que el borde de marca va en él y no en un formulario gratis.
 */
.poc-pros .poc-lots-buy {
	border: 2px solid var(--poc-brand, #d4af37);
}

.poc-pros-kinds {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.poc-pros-kinds {
		grid-template-columns: 1fr 1fr;
	}
}

.poc-pros-kind {
	padding: 0.85rem 1rem;
	border: 1px solid var(--poc-line, #e1e6ee);
	border-radius: var(--poc-radius-md, 12px);
	line-height: 1.45;
}

.poc-pros-kind h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
}

.poc-pros-kind p {
	margin: 0;
	text-wrap: pretty;
}

.poc-pros-who {
	margin-bottom: 0.35rem !important;
	color: var(--poc-muted, #55627a);
	font-size: 0.9375rem;
}

.poc-pros-kind.is-soon {
	border-style: dashed;
}

.poc-pros-soon {
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--poc-line, #e1e6ee);
	border-radius: 999px;
	color: var(--poc-muted, #55627a);
	font-size: 0.75rem;
	font-weight: 600;
}

.poc-pros-pick {
	margin-bottom: 1rem;
}

/* En el teléfono, un reverso por fila: dos en una y uno solo en otra se leía
   como dos grupos. */
@media (max-width: 639px) {
	.poc-pros-pick label {
		flex-basis: 100%;
	}
}

.poc-pros-pick label.is-soon {
	color: var(--poc-muted, #55627a);
	cursor: not-allowed;
}

.poc-pros-front p:last-child {
	margin-bottom: 0;
}

/* Lo que el consultorio ve y no ve (texto aprobado por Alex, 2026-10-21). */
.poc-pros-legal {
	margin: 0.9rem 0 0;
	color: var(--poc-muted, #55627a);
	font-size: 0.875rem;
	line-height: 1.5;
	text-wrap: pretty;
}

.poc-pros-legal b {
	color: var(--poc-ink, #0d1b2a);
}

/*
 * `/pros/` a lo ancho (Alex, 2026-10-29: «no aprovecha el ancho de la
 * pantalla como el resto de las páginas»). Heredaba la columna de 44rem de
 * `/shops/`; ahora usa la retícula de las portadas (`--poc-lp-container`, su
 * margen que crece con la pantalla). El texto corrido conserva su ancho de
 * lectura; lo que gana ancho es la composición: desde 1080 px, los reversos
 * y la BIZ Card lado a lado, y el pedido a todo el ancho debajo. `/shops/` no
 * cambia.
 */
.poc-lots.poc-pros {
	max-width: calc(var(--poc-lp-container, 1440px) + 2 * var(--poc-lp-gutter, 24px));
	padding-inline: var(--poc-lp-gutter, 24px);
}

.poc-pros .poc-lots-hero { max-width: 760px; }

@media (min-width: 1080px) {
	.poc-lots.poc-pros {
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		column-gap: clamp(1.5rem, 3vw, 3rem);
		align-items: start;
	}

	.poc-pros > * { grid-column: 1 / -1; }

	/* Los reversos y la BIZ Card, lado a lado: las dos caras de la tarjeta. */
	.poc-pros .poc-pros-back {
		grid-column: 1;
		grid-row: 2;
	}

	.poc-pros .poc-pros-front {
		grid-column: 2;
		grid-row: 2;
	}

	/* El pedido, a todo el ancho debajo: las cuatro cantidades en una fila.
	   En la columna estrecha quedaban 3 + 1 (una huérfana). */
	.poc-pros .poc-lots-buy { grid-row: 3; }

	.poc-pros .poc-lots-qty {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.poc-pros .poc-lots-qty legend,
	.poc-pros .poc-lots-qty .poc-lots-other { grid-column: 1 / -1; }

	.poc-pros .poc-lots-hero h1 { font-size: clamp(2.25rem, 3.2vw, 3rem); }
}

/* Cabecera y pie con la misma retícula, como en las portadas (`.poc-id` en
   product.css): que el logotipo no salte al llegar a `/pros/`. */
body:has(main.poc-pros) .poc-header > .poc-wrap,
body:has(main.poc-pros) .poc-footer > .poc-wrap {
	max-width: calc(var(--poc-lp-container, 1440px) + 2 * var(--poc-lp-gutter, 24px));
	padding-inline: var(--poc-lp-gutter, 24px);
}