/*
 * `[poc_pros]` — la cartulina profesional de dos caras en el home (2026-10-24).
 *
 * El texto usa la estructura de `[poc_line]` (home.css) con la identidad de
 * BIZ Card; aquí solo va lo propio: la lista de reversos y el dibujo de las
 * dos caras. Las caras son un objeto impreso: llevan los colores de la marca
 * de BIZ Card (`--poc-id-biz-*`) y el blanco del papel, que no cambian con el
 * modo oscuro; los secundarios son la misma tinta con opacidad, nunca
 * `--poc-muted`, que se aclara en oscuro y se perdería sobre el papel. Se
 * miden en `cqi` del bloque de las dos caras para que el texto escale con ellas.
 *
 * Fondos: va entre el intérprete (azul) y la FAQ (blanco), así que en claro
 * toma la arena de BIZ Card. En oscuro las líneas `--flip` y la FAQ comparten
 * fondo: esta toma el gris suave, que no tiene ninguna de sus vecinas.
 */

.poc-prosband__h {
	margin: 24px 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--poc-lp-ink);
}
.poc-prosband__kinds {
	display: grid;
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 600px) {
	.poc-prosband__kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.poc-prosband__kinds li {
	padding: 2px 0 2px 14px;
	border-inline-start: 3px solid var(--poc-id-rule);
	font-size: 15px;
	line-height: 1.4;
	color: var(--poc-lp-text);
	text-wrap: pretty;
}
.poc-prosband__kinds b { display: block; color: var(--poc-lp-ink); }

/* ── El dibujo ─────────────────────────────────────────────────────────── */
.poc-prosband__fig { margin: 0; }
.poc-prosband__stack {
	position: relative;
	width: 100%;
	/* Lo bastante alto para que el titular del reverso se lea entero encima del anverso. */
	aspect-ratio: 1.2;
	/* La medida de las dos caras: `cqi` se resuelve contra un contenedor
	   ANTEPASADO, nunca contra el propio elemento, así que el radio y el
	   relleno de una cara medidos contra ella misma salían del contenedor de
	   la página (a 1366 px, cantos enormes y el texto desbordado). Todo se
	   mide aquí; las cifras son las de la tarjeta × 0,82, su ancho. */
	container-type: inline-size;
}
.poc-prosband__card {
	position: absolute;
	box-sizing: border-box;
	width: 82%;
	aspect-ratio: 1.586;
	border-radius: 3.69cqi;
	box-shadow: var(--poc-shadow-lg);
	overflow: hidden;
}
.poc-prosband__card p { margin: 0; }

/* El reverso, detrás y arriba a la derecha. */
.poc-prosband__card--back {
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	padding: 0 4.92cqi 4.1cqi;
	background: var(--poc-id-biz-support);
	color: var(--poc-id-biz-base);
}
.poc-prosband__bhead {
	margin: 0 -4.92cqi 3.28cqi !important;
	padding: 2.79cqi 4.92cqi;
	background: var(--poc-id-biz-base);
	color: var(--poc-id-biz-support);
	font-size: 3.77cqi;
	font-weight: 800;
	letter-spacing: 0.01em;
}
.poc-prosband__btitle { font-size: 4.26cqi; font-weight: 700; line-height: 1.2; text-wrap: balance; }
/* El anverso, delante y abajo a la izquierda. */
.poc-prosband__card--front {
	bottom: 0;
	left: 0;
	display: flex;
	align-items: stretch;
	gap: 3.28cqi;
	padding: 5.33cqi 4.92cqi 4.92cqi 5.74cqi;
	background: #fff;
	color: var(--poc-id-biz-base);
	outline: 1px solid rgba(23, 25, 28, 0.12);
}
.poc-prosband__who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.poc-prosband__name { font-size: 6.07cqi; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.poc-prosband__svc { margin-top: 1.64cqi !important; font-size: 3.12cqi; opacity: 0.72; }
.poc-prosband__tel { margin-top: 1.64cqi !important; font-size: 3.44cqi; font-weight: 700; }
.poc-prosband__brand {
	display: flex;
	align-items: center;
	gap: 1.31cqi;
	margin-top: auto !important;
	font-size: 2.79cqi;
	font-weight: 600;
	opacity: 0.72;
}
.poc-prosband__mark { display: inline-flex; width: 3.77cqi; height: 3.77cqi; }
.poc-prosband__mark svg { width: 100%; height: 100%; }
.poc-prosband__qr {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	align-self: flex-start;
	gap: 1.15cqi;
	width: 25.42cqi;
	color: inherit;
	font-size: 2.13cqi;
	text-align: center;
	text-decoration: none;
}
.poc-prosband__qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

.poc-prosband__cap {
	display: grid;
	gap: 4px;
	margin-top: 18px;
	font-size: 14px;
	color: var(--poc-lp-muted);
	text-wrap: pretty;
}
.poc-prosband__cap b { color: var(--poc-lp-ink); }

@media (max-width: 899px) {
	/* En el teléfono el dibujo va primero, como las demás líneas; a todo el ancho. */
	.poc-prosband .poc-line__visual { max-width: 420px; }
}

/* ── Fondos en oscuro ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	:root:not([data-poc-theme="light"]) .poc-page-home .poc-line.poc-prosband { --poc-bleed: var(--poc-lp-soft); }
}
:root[data-poc-theme="dark"] .poc-page-home .poc-line.poc-prosband { --poc-bleed: var(--poc-lp-soft); }