/*
 * El decodificador de la portada.
 *
 * Vive DENTRO de una página de marketing, así que no impone fondo ni tipografía
 * a la página: hereda. Lo único que fija es lo que el componente necesita para
 * funcionar — tamaños tocables, el campo del VIN en monoespaciada y el bloque
 * de resultado.
 *
 * Móvil primero. Sin compilar.
 */

.poc-vin-landing {
	max-width: 34rem;
	margin: 0 auto;
	padding: var(--poc-space-3, 1.5rem);
	border: 1px solid var(--poc-line, #dfe5ec);
	border-radius: var(--poc-radius-lg, 18px);
	text-align: left;
}

.poc-vin-landing h2 {
	margin: 0 0 0.35rem;
	font-size: var(--poc-text-xl, 1.5rem);
	line-height: 1.2;
}

.poc-vin-landing-sub {
	margin: 0 0 var(--poc-space-2, 1rem);
	color: var(--poc-muted, #51617a);
}

.poc-vin-landing .poc-field {
	margin: 0 0 0.75rem;
}

.poc-vin-landing label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
}

#poc-vin-landing-input {
	width: 100%;
	/* 52 px y 19 px: el comprador objetivo está de pie en un taller, y por
	   debajo de 16 px iOS hace zoom al enfocar y la persona se pierde. */
	min-height: 52px;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--poc-line, #dfe5ec);
	border-radius: var(--poc-radius-sm, 8px);
	font-family: var(--poc-font-mono);
	font-size: 1.1875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--poc-ink);
	background: var(--poc-surface);
}

/*
 * Solo el tamaño: la forma (píldora), el color y las variantes son los del
 * tema. Aquí se quitaba el fondo sin fijar el color del texto, y como un
 * `.poc-btn` del tema escribe en blanco, «No, try another VIN» salía blanco
 * sobre blanco (Alex, 2026-10-04). El secundario pide `.poc-btn--ghost`.
 * 52 px como el campo: el comprador está de pie en un mostrador.
 */
.poc-vin-landing .poc-btn {
	min-height: 52px;
	padding: 0 1.4rem;
	font-size: 1.0625rem;
	font-weight: 600;
	/* Con el precio dentro, en un teléfono el «sí» ocupa dos líneas:
	   centradas y repartidas, no el precio solo a la izquierda. */
	text-align: center;
	text-wrap: balance;
}

.poc-vin-landing .poc-btn.poc-btn-primary,
.poc-vin-landing .poc-btn.poc-btn-primary:hover {
	border-color: var(--poc-brand);
	color: var(--poc-brand-ink);
	background: var(--poc-brand);
}

/* 14 px y no 13: es la confianza que está junto al botón de compra, donde se
   duda (docs/39, P1-11). */
.poc-vin-landing-where,
.poc-vin-landing-free {
	margin: 0.5rem 0 0;
	color: var(--poc-muted, #51617a);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* El precio se lee: no es una nota al pie. */
.poc-vin-landing-price {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--poc-ink, #0d1b2a);
}

.poc-vin-landing-result {
	margin-top: var(--poc-space-2, 1rem);
	padding: var(--poc-space-2, 1rem);
	border: 1px solid var(--poc-line, #dfe5ec);
	border-radius: var(--poc-radius-md, 12px);
}

.poc-vin-landing-q {
	margin: 0 0 0.25rem;
	font-weight: 700;
}

.poc-vin-landing-car {
	margin: 0 0 0.25rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.poc-vin-landing-spec {
	margin: 0 0 0.9rem;
	color: var(--poc-muted, #51617a);
}

/* Dentro del hero de la portada: el hero ya puso el titular y el marco. */
.poc-vin-landing--bare {
	max-width: 30rem;
	margin: var(--poc-space-3, 1.5rem) 0 0;
	padding: 0;
	border: 0;
}

/* En un teléfono, los dos botones del resultado uno bajo otro y a lo ancho:
   con el precio dentro, el «no» caía a otra línea con su margen izquierdo y
   quedaba desalineado. */
@media (max-width: 480px) {
	.poc-vin-landing .poc-vin-landing-form .poc-btn {
		display: flex;
		width: 100%;
	}
}

/* Ámbar, nunca rojo: un aviso no es un fallo. */
.poc-vin-landing .poc-vin-preview-warn {
	margin: 0 0 0.6rem;
	padding: 0.5rem 0.7rem;
	border-left: 3px solid #b8860b;
	color: #7a5c07;
	font-size: 0.9375rem;
	background: #fdf6e3;
}

/* La cartulina de venta (A-61): quien la escaneó sabe que está en el sitio
   correcto y qué pasa al guardar. Fondo propio: va igual sobre el hero oscuro
   que sobre la sección clara. */
.poc-vin-landing .poc-vin-card-note {
	margin: 0 0 0.9rem;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid #b8860b;
	border-radius: 0 var(--poc-radius-sm, 8px) var(--poc-radius-sm, 8px) 0;
	color: #3d2e04;
	font-size: 0.9375rem;
	line-height: 1.45;
	background: #fdf6e3;
}

.poc-vin-landing .poc-vin-msg {
	margin: 0.6rem 0 0;
	min-height: 1.4em;
	font-size: 0.9375rem;
}

.poc-vin-landing .poc-vin-msg.is-error {
	color: #a11;
}

.poc-vin-landing :focus-visible {
	outline: 3px solid var(--poc-focus);
	outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
	.poc-vin-landing .poc-vin-preview-warn {
		color: #f0d489;
		background: #2a2414;
	}
}

@media (prefers-reduced-motion: reduce) {
	.poc-vin-landing * {
		transition: none !important;
		animation: none !important;
	}
}