/*
 * POC Platform — las portadas de producto.
 *
 * Las cinco páginas de producto se pintaban con los estilos de prosa del tema:
 * un `<h2>` y una lista, como un artículo. Esto son sus bandas, con los mismos
 * tokens y el mismo ritmo que el escaparate de la portada — no un segundo
 * sistema visual, sino el mismo aplicado a una página que antes no lo tenía.
 *
 * Regla de la marca: el oro es de conversión. Dos botones dorados por página
 * como máximo, y aquí son el del hero y el del cierre.
 *
 * Esta hoja solo se encola en las páginas que llevan una banda `[poc_p_…]`.
 */

/* El titular de la plantilla no se esconde aquí: no se pinta. Lo decide el
   filtro `poc_theme_page_head`, porque esconder un `<h1>` con `clip` lo saca de
   la vista y lo deja en el árbol, y el lector de pantalla lo lee igual.

   Con `:has()` y no con una lista de clases: el núcleo no nombra productos, y
   una hoja con `.poc-page-vin` dentro es la misma deuda en otro fichero. */
.poc-marketing:has(.poc-phero) .poc-main { padding-block: 0; }
.poc-marketing:has(.poc-phero) { overflow-x: clip; }

/* ── Hero de producto ────────────────────────────────────────────────── */

.poc-phero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: var(--poc-space-4);
	padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 1.5rem + 5vw, 6rem);
}
.poc-phero .poc-kicker { color: var(--poc-ink); }
/* La marca del producto junto al rótulo (hoy solo la VIN Card). */
.poc-phero__brand { display: flex; align-items: center; gap: 0.75rem; }
.poc-phero__brand .poc-kicker { margin: 0; }
.poc-phero__brand svg { flex: none; border-radius: 12px; }
.poc-marketing .poc-phero__title {
	margin: 0;
	font-size: var(--poc-text-3xl);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.poc-phero__lede {
	margin: var(--poc-space-3) 0 0;
	max-width: 34rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--poc-muted);
	text-wrap: pretty;
}
.poc-phero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--poc-space-1) var(--poc-space-2);
	margin: var(--poc-space-4) 0 0;
}
.poc-phero__trust {
	margin: var(--poc-space-2) 0 0;
	color: var(--poc-muted);
	font-size: var(--poc-text-sm);
	text-wrap: pretty;
}
.poc-phero__stage { min-width: 0; }
.poc-phero__tool { scroll-margin-top: 6rem; }

/* ── Maqueta del intérprete ──────────────────────────────────────────── */

/* El mismo azul de noche y las mismas burbujas que la banda del escaparate,
   con la barra de saldo y estado que allí no cabía. */
.poc-ist {
	display: grid;
	gap: 0.75rem;
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: var(--poc-radius-lg);
	background: var(--poc-night);
	box-shadow: var(--poc-shadow-lg);
	font-size: var(--poc-text-sm);
}
.poc-ist__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--poc-night-line);
}
.poc-ist__chip {
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	/* La maqueta es siempre marina: oro de relleno, que no se invierte. Con
	   `--poc-accent-soft` en oscuro daba 1,16:1 (docs/39, P1-6). */
	background: var(--poc-accent);
	color: var(--poc-accent-ink);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}
.poc-ist__live {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--poc-night-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.poc-ist__live i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--poc-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--poc-accent) 25%, transparent);
}
.poc-ist__talk { display: grid; gap: 0.6rem; }

/* ── Escenarios que reutilizan la maqueta del escaparate ─────────────── */

/* El mismo componente que la banda de la portada, a tamaño de hero. Nada de
   una segunda maqueta por producto: una que mantener y una que traducir. */
.poc-pstage { display: flex; justify-content: center; }
.poc-pstage .poc-vis { width: 100%; font-size: var(--poc-text-base); }
.poc-pstage--spec .poc-vis__sheet,
.poc-pstage--medical .poc-vis__sheet { width: min(100%, 23rem); }
.poc-pstage--tag { padding-block: var(--poc-space-3); }
.poc-pstage--tag .poc-vis__disc { transform: scale(1.15); transform-origin: center; }

/* ── La tarjeta física del hero de contacto ──────────────────────────── */

/* Es la tarjeta que se vende, pieza por pieza (ver `Business\Stage`): PVC
   negro sin nombre, marca y lema a la izquierda, una línea vertical, el QR con
   el punto NFC dorado a la derecha y la frase del chip al pie. Proporción de
   una tarjeta de crédito, ligeramente girada: es el objeto que se reparte y
   tiene que reconocerse como tal sin leer una palabra. La referencia es
   `poc-theme/assets/img/card-nfc-900.jpg`. */
.poc-pcard { display: flex; justify-content: center; perspective: 1400px; }
.poc-pcard__face {
	display: grid;
	/* La marca ocupa lo suyo; el resto es para el QR, que es lo que manda en
	   la tarjeta impresa. */
	grid-template-columns: auto 1px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	grid-template-areas: "brand line qr" "chip chip chip";
	align-items: center;
	gap: var(--poc-space-2) var(--poc-space-3);
	width: min(100%, 26rem);
	aspect-ratio: 1.586;
	padding: var(--poc-space-3);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--poc-radius-lg);
	background: linear-gradient(150deg, #2a2a2a 0%, #141414 45%, #060606 100%);
	color: #fff;
	box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform: rotateY(-8deg) rotateX(3deg) rotate(-2deg);
}
.poc-pcard__face::before {
	content: "";
	grid-area: line;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.35);
}
.poc-pcard__brand { grid-area: brand; display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.poc-pcard__mark { display: inline-flex; flex: none; color: #fff; }
.poc-pcard__word { display: grid; min-width: 0; }
.poc-pcard__name {
	font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.7rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.poc-pcard__name i { font-style: normal; font-weight: 500; color: var(--poc-accent); }
.poc-pcard__word small {
	margin-top: 0.3rem;
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.85);
}
.poc-pcard__qr {
	grid-area: qr;
	justify-self: stretch;
	display: grid;
	justify-items: center;
	gap: 0.55rem;
	color: #fff;
	text-decoration: none;
}
.poc-pcard__code { position: relative; display: block; width: min(100%, 8.5rem); }
/* El QR se genera oscuro sobre blanco; en la tarjeta impresa va en claro sobre
   el negro. Invertido y en modo «screen», el margen de silencio desaparece
   contra el fondo y solo quedan los módulos blancos. */
.poc-pcard__code img { display: block; width: 100%; height: auto; filter: invert(1); mix-blend-mode: screen; }
/* El punto NFC en el centro del QR, como en la tarjeta. Al 18 % del lado
   tapa un 2,5 % del código y se decodifica en captura real, girado o plano,
   a 1x y 2x (medido el 2026-10-11 con jsQR); al 26 % con anillo, no: los
   módulos van en columnas de dos y un disco grande se come más palabras de
   código de las que la corrección M puede devolver. */
.poc-pcard__nfc {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 18%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--poc-accent);
	color: var(--poc-night);
	font-size: 0.42rem;
	font-weight: 800;
	line-height: 1;
}
.poc-pcard__scan {
	max-width: 9.5rem;
	font-size: var(--poc-text-sm);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}
.poc-pcard__qr:hover .poc-pcard__scan { color: var(--poc-accent); }
.poc-pcard__chip {
	grid-area: chip;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--poc-accent);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
}
.poc-pcard__chip svg { flex: none; }

/* ── Dos caras enfrentadas ───────────────────────────────────────────── */

.poc-sec--split { --poc-bleed: var(--poc-surface); }
.poc-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--poc-space-2);
}
.poc-split__face {
	padding: var(--poc-space-3);
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-lg);
	background: var(--poc-ground);
}
.poc-split__face--b { background: var(--poc-brand-soft); }
.poc-split__label {
	margin: 0 0 var(--poc-space-1);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--poc-muted);
}
.poc-marketing .poc-split__face h3 {
	margin: 0;
	font-size: var(--poc-text-xl);
	line-height: var(--poc-leading-tight);
	text-wrap: balance;
}
.poc-split__d { margin: var(--poc-space-1) 0 0; color: var(--poc-muted); text-wrap: pretty; }
svg.poc-check--lock { color: var(--poc-muted); }

/* ── La objeción contestada ──────────────────────────────────────────── */

.poc-why__body {
	max-width: 46rem;
	margin: 0;
	font-size: var(--poc-text-lg);
	line-height: 1.6;
	text-wrap: pretty;
}
.poc-why__pills {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--poc-space-2);
	margin: var(--poc-space-4) 0 0;
	padding: 0;
	list-style: none;
}
.poc-why__pills li {
	/* La tarjeta del sistema (A-63, 18 px), no una raya de oro: el oro es solo
	   conversión y este bloque no vende nada (docs/44, P2-L). */
	display: grid;
	gap: 0.3rem;
	padding: var(--poc-space-2) var(--poc-space-3);
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-lg);
	background: var(--poc-surface);
}
.poc-why__pills b { font-size: var(--poc-text-base); }
.poc-why__pills span { color: var(--poc-muted); font-size: var(--poc-text-sm); text-wrap: pretty; }

/* ── Mención secundaria (A-77) ───────────────────────────────────────── */

.poc-paside { padding-block: var(--poc-space-3); }
.poc-paside__text {
	max-width: 46rem;
	margin: 0;
	padding: var(--poc-space-2) var(--poc-space-3);
	border-inline-start: 3px solid var(--poc-accent);
	border-radius: 0 var(--poc-radius-md) var(--poc-radius-md) 0;
	background: var(--poc-surface);
	color: var(--poc-muted);
	text-wrap: pretty;
}
.poc-paside__text a { color: var(--poc-ink); font-weight: 600; text-underline-offset: 3px; }

/* ── Dónde se usa ────────────────────────────────────────────────────── */

.poc-sec--uses { --poc-bleed: var(--poc-surface); }
.poc-uses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--poc-space-3) var(--poc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.poc-use { border-top: 2px solid var(--poc-ink); padding-top: var(--poc-space-2); }
.poc-marketing .poc-use h3 {
	margin: 0;
	font-size: var(--poc-text-lg);
	line-height: var(--poc-leading-tight);
	text-wrap: balance;
}
.poc-use p { margin: 0.35rem 0 0; color: var(--poc-muted); text-wrap: pretty; }
.poc-uses__note {
	max-width: 46rem;
	margin: var(--poc-space-4) 0 0;
	color: var(--poc-muted);
	text-wrap: pretty;
}
.poc-uses__warning {
	display: block;
	max-width: 46rem;
	margin: var(--poc-space-2) 0 0;
	padding: var(--poc-space-2) var(--poc-space-3);
	border-inline-start: 3px solid var(--poc-danger);
	border-radius: 0 var(--poc-radius-md) var(--poc-radius-md) 0;
	background: color-mix(in srgb, var(--poc-danger) 8%, var(--poc-surface));
	color: var(--poc-ink);
	font-size: var(--poc-text-sm);
	line-height: 1.55;
	text-wrap: pretty;
}

/* ── Secciones envueltas y cierre ────────────────────────────────────── */

.poc-sec--tinted { --poc-bleed: var(--poc-surface); }

.poc-pclose {
	--poc-bleed: var(--poc-night);
	color: var(--poc-night-ink);
	text-align: center;
}
.poc-pclose__in { max-width: 44rem; margin-inline: auto; }
.poc-marketing .poc-pclose h2 { color: var(--poc-night-ink); }
.poc-pclose p { margin: var(--poc-space-2) 0 0; color: var(--poc-night-muted); text-wrap: pretty; }
.poc-pclose__cta { margin-top: var(--poc-space-4); }

/* ── Estrecho ────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.poc-phero { grid-template-columns: 1fr; gap: var(--poc-space-4); }
	.poc-phero__stage { order: -1; }
	.poc-ist { max-width: 22rem; }
	.poc-pcard__face { width: min(100%, 22rem); }
}

@media (max-width: 480px) {
	/* El escenario va PRIMERO en móvil —preferencia registrada: el producto se
	   ve en el primer pantallazo— y por eso no puede crecer: cada píxel suyo
	   empuja el titular y el botón fuera de la pantalla. Medido a 390 px, la
	   ficha del vehículo ocupaba 425 px contra los 306 de la portada, que es la
	   referencia del sitio. */
	.poc-ist { max-width: 19rem; padding: 0.85rem; gap: 0.55rem; }
	.poc-ist .poc-vis__bubble { padding: 0.7rem 0.85rem; }
	.poc-ist .poc-vis__bubble p { font-size: var(--poc-text-base); }
	.poc-pstage--spec .poc-vis__sheet,
	.poc-pstage--medical .poc-vis__sheet { width: min(100%, 18rem); }
	.poc-pstage--spec .poc-vis__sheet dl div { padding-block: 0.5rem; }
	.poc-pstage .poc-vis { padding-block: var(--poc-space-2); }
	.poc-pstage--tag { padding-block: 0; }
	.poc-pstage--tag .poc-vis__disc { transform: none; }

	.poc-phero { padding-block: var(--poc-space-3) var(--poc-space-4); }
	/* En 390 px la tarjeta mide 358 px: la marca encoge para que el lema quepa
	   en una línea (el francés es el más largo) y el QR conserve su tamaño. */
	.poc-pcard__face { gap: var(--poc-space-2); padding: var(--poc-space-2) var(--poc-space-3); }
	.poc-pcard__mark svg { width: 36px; height: 36px; }
	.poc-pcard__word small { font-size: 0.46rem; letter-spacing: 0.14em; }
	.poc-pcard__code { width: min(100%, 7.5rem); }
	/* Con herramienta en el hero, la herramienta sube por delante del lede:
	   en móvil el lede empujaba el campo fuera del primer pantallazo, y el
	   titular ya dice lo que hace falta para escribir en él. */
	.poc-phero__copy:has(.poc-phero__tool) { display: flex; flex-direction: column; }
	.poc-phero__copy:has(.poc-phero__tool) .poc-phero__lede { order: 3; }
	.poc-phero__copy:has(.poc-phero__tool) .poc-phero__trust { order: 4; }
	/* Y la maqueta se queda en lo que la identifica —el carro y su código de
	   barras—: sus filas de detalle son las que el visitante verá con SU
	   carro en cuanto escriba el VIN. Sin esto el campo quedaba a 738 px,
	   detrás del aviso de cookies de la primera visita. */
	.poc-phero:has(.poc-phero__tool) .poc-pstage .poc-vis { padding-block: var(--poc-space-1); }
	.poc-phero:has(.poc-phero__tool) .poc-vis__sheet dl div:nth-child(n+2) { display: none; }
	.poc-phero__cta { margin-top: var(--poc-space-3); }
	.poc-phero__cta .poc-btn { flex: 1 1 100%; justify-content: center; }
	.poc-split__face { padding: var(--poc-space-2); }
}


/* ── Barra fija de móvil (auditoría 09-24, P0 7) ─────────────────────── */

/* ── Cómo funciona ───────────────────────────────────────────────────
   El rediseño del home encerró `.poc-how` en `.poc-page-home` y las portadas
   de producto se quedaron con la lista del navegador: «1. 01». Mismo
   dibujo que el home, sin depender de su hoja. */

body:not(.poc-page-home) .poc-how {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	body:not(.poc-page-home) .poc-how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body:not(.poc-page-home) .poc-how__step { padding-top: 24px; border-top: 1px solid var(--poc-lp-line-rule); }
body:not(.poc-page-home) .poc-how__n { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--poc-lp-gold-text); }
body:not(.poc-page-home) .poc-how__step h3 { margin: 8px 0 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
body:not(.poc-page-home) .poc-how__step p { margin: 10px 0 0; color: var(--poc-muted); text-wrap: pretty; }

.poc-pstick { display: none; }

@media (max-width: 720px) {
	.poc-pstick {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 25;
		margin: 0;
		padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
		background: var(--poc-surface, #fff);
		border-top: 1px solid var(--poc-line, #e1e6ee);
		box-shadow: 0 -6px 20px rgba(13, 27, 42, 0.08);
	}
	.poc-pstick .poc-btn {
		display: flex;
		justify-content: center;
		width: 100%;
		min-height: 48px;
	}
	/* Que no tape el pie ni el último botón. */
	body:has(.poc-pstick) { padding-bottom: 76px; }
	/* La burbuja de soporte sube por encima de la barra. */
	body:has(.poc-pstick) .poc-wa { bottom: 84px; }
	/* El aviso de cookies manda: mientras está, la barra se aparta. */
	body:has(.poc-consent:not([hidden])) .poc-pstick { display: none; }
}

/* ── A-79: dibujos y llamadas a la acción en las portadas ─────────────────
   La pieza (`.poc-art`) y la fila de botones (`.poc-sec-cta`) son las del
   home (`home.css`); aquí solo su sitio dentro de cada banda. */
.poc-how__step .poc-art { margin: 0 0 18px; }
.poc-use .poc-art { margin: 0 0 12px; }
.poc-why__pills li .poc-art { margin: 0 0 6px; }