/*
 * El perfil público de Business, y sus seis diseños.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * DE DÓNDE SALE ESTA HOJA (2026-09-23)
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Alex: «los diseños de las tarjetas en poccard.com son muy diferentes a los
 * que ya estaban aprobados en mi-contacto.com; migremos los de mi-contacto».
 * Decidió además: **misma estructura, paleta de POCCard**; los seis tal cual,
 * incluido el parecido entre dos de ellos; solo la tarjeta de negocio; y lo que
 * solo existe aquí (captación, QR, cobros) se viste con el lenguaje de cada
 * diseño en vez de quedarse suelto.
 *
 * La diferencia que Alex vio NO era de color: era de estructura. Mi-Contacto es
 * una PILA DE TARJETAS BLANCAS sobre un fondo gris, con la identidad dentro de
 * un hero de color. Esto era una página plana. Eso es lo que se trae aquí, y se
 * midió abriendo las seis de allí y las seis de aquí a 376 px antes de escribir
 * una línea.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * LO QUE NO SE COPIA, Y POR QUÉ
 * ─────────────────────────────────────────────────────────────────────────
 *
 *   · Las TIPOGRAFÍAS de pago/descarga. Allí `carbon` carga Bricolage
 *     Grotesque + Instrument Sans (148 KB) y `studio` carga Sora (37 KB).
 *     Aquí todo se pinta con Inter, que ya viaja en el tema, con el peso, el
 *     cuerpo y el espaciado del original. `premium` usa la pila serif del
 *     sistema — que es EXACTAMENTE lo que sirve Mi-Contacto hoy: su Playfair
 *     se retiró el 2026-08-08 por la regla de auto-alojado y nunca volvió.
 *   · Los colores de marca ajenos donde eran decorativos: el azul de
 *     Mi-Contacto pasa a ser el acento del dueño mezclado con el marino de
 *     POCCard (#0d1b2a) y el oro de POCCard (#d4af37). Los colores de canal
 *     (WhatsApp verde, Instagram rosa…) SÍ se copian: son de sus dueños y son
 *     lo que hace legible la rejilla.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * REGLAS QUE SIGUEN VIGENTES
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Móvil primero. Sin compilar: en este servidor no hay Node, así que un paso de
 * build sería una pieza que nadie puede reproducir.
 *
 * Los seis colores de la paleta (--poc-c1..c6) los pega Render::palette_css()
 * DETRÁS de esta hoja, con #poc-profile, y por eso aquí solo se declaran sus
 * valores de respaldo. El nombre que el dueño lee en su editor manda sobre el
 * nombre del token: «Fondo» (c2) es la PÁGINA y «Paneles» (c4) son las
 * TARJETAS. Antes estaba al revés y por eso el fondo salía blanco.
 *
 * Accesibilidad, y no como añadido:
 *   · el foco SIEMPRE se ve, también con ratón
 *   · 44 px de zona táctil en todo lo que se toca
 *   · 16 px reales en los campos, o iOS hace zoom al enfocar y descoloca
 *   · se respeta prefers-reduced-motion
 *   · lo que se esconde por diseño (el valor de un canal dentro de una ficha)
 *     se esconde A LA VISTA, no al lector de pantalla
 *   · el modo oscuro redefine TOKENS, no reglas
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. EL DOCUMENTO
   ═══════════════════════════════════════════════════════════════════════ */

body.poc-card-page {
	margin: 0;
	background: var(--poc-ground, #f2f4f7);
}

/* Premium es oscuro hasta el borde: con el body claro, el rebote del dedo
   al pasar del final (iOS, Android) enseñaba una franja blanca (Alex,
   2026-10-10). El color es el `--poc-page` del diseño. */
body.poc-card-page:has(.poc-skin-premium) {
	background: #0a0e1a;
}

.poc-profile {
	/* La paleta del dueño. Los nombres de token vienen de Render::PALETTE_TOKENS. */
	--poc-c1: #0f2742;
	--poc-c2: #f2f4f7;
	/*
	 * El acento por defecto es el marino de la marca, ESCRITO, no heredado de
	 * `--poc-brand`: ese token se aclara en modo oscuro del sistema y desde que
	 * el acento pinta un hero de 380 px eso dejaba una cabecera casi blanca con
	 * texto blanco encima. El bloque de modo oscuro del final ya ajusta lo que
	 * tiene que ajustar.
	 */
	--poc-c3: #0d1b2a;
	--poc-on-accent: #ffffff;
	--poc-c4: #ffffff;
	--poc-c5: #55627a;
	--poc-c6: #e1e6ee;

	--poc-fg: var(--poc-c1);
	--poc-bg: var(--poc-c2);
	--poc-accent: var(--poc-c3);
	--poc-surface: var(--poc-c4);
	--poc-muted: var(--poc-c5);
	--poc-border: var(--poc-c6);

	/* Los dos que usa esta hoja, con el significado del editor. */
	--poc-page: var(--poc-bg);
	--poc-sheet: var(--poc-surface);

	/*
	 * El marino de la marca entra en TODA mezcla oscura.
	 *
	 * Sin él, un dueño con acento dorado se llevaba un hero de oro macizo de
	 * 380 px: el diseño dejaba de vender la tarjeta y vendía el color, y el
	 * texto blanco encima se quedaba sin contraste. Mezclado con el marino el
	 * hero sale SIEMPRE oscuro y siempre con el tono del dueño: dorado →
	 * bronce, azul → marino profundo, rojo → vino.
	 */
	--poc-deep: #0d1b2a;
	/*
	 * Y DIAGONAL, no plano ni vertical: la mezcla uniforme al 50 % con el dorado
	 * da un caqui apagado. El degradado arranca cargado de acento en la esquina
	 * y cae al marino, así que el color del dueño se reconoce sin que el
	 * conjunto se enturbie. Se vieron las variantes juntas antes de elegir.
	 */
	--poc-banner-bg: linear-gradient(155deg, color-mix(in oklab, var(--poc-accent) 45%, var(--poc-deep)), var(--poc-deep) 78%);
	--poc-on-hero: #ffffff;

	/*
	 * El azul de los rótulos de Mi-Contacto, aquí teñido por el dueño. Y es
	 * OBLIGATORIO usarlo en vez del acento cuando el acento sea TEXTO o un
	 * icono sobre fondo claro: el dorado de la marca sobre blanco da 2,0:1 y
	 * suspende AA. Mezclado al 55 % con el marino da 5,6:1. Con un acento azul
	 * sale #0b3a66, que es exactamente el rótulo de Mi-Contacto.
	 */
	--poc-heading: color-mix(in oklab, var(--poc-accent) 55%, var(--poc-deep));
	/* La ficha de contacto: fondo muy claro y filete del mismo tono. */
	--poc-tile: color-mix(in oklab, var(--poc-accent) 8%, #ffffff);
	--poc-tile-line: color-mix(in oklab, var(--poc-accent) 18%, #ffffff);
	--poc-tile-ink: color-mix(in oklab, var(--poc-accent) 25%, #0f2742);
	/* La píldora de un enlace propio: oscura, con texto blanco. */
	--poc-pill: color-mix(in oklab, var(--poc-accent) 42%, var(--poc-deep));

	--poc-radius: 18px;
	--poc-radius-sm: 12px;
	--poc-shadow: 0 12px 40px rgb(2 6 23 / 16%);
	--poc-gap: 10px;
	--poc-touch: 44px;
	--poc-max: 520px;
	--poc-pad: 12px;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--poc-gap);
	margin: 0;
	padding: 10px 8px calc(7rem + env(safe-area-inset-bottom));
	max-width: none;
	min-height: 100vh;
	background: var(--poc-page);
	color: var(--poc-fg);
	font-size: 1rem;
	line-height: 1.55;
}

/*
 * La columna. El fondo llega al borde de la pantalla y el contenido no: es lo
 * que hace que en un escritorio la tarjeta se lea como una tarjeta y no como
 * una página estirada.
 */
.poc-profile > * {
	width: 100%;
	max-width: var(--poc-max);
}

.poc-profile *,
.poc-profile *::before,
.poc-profile *::after {
	box-sizing: inherit;
}

/* ── Foco: siempre visible. Un foco que solo aparece con teclado deja fuera
      a quien navega con un conmutador o una férula. ─────────────────────── */
.poc-profile :focus-visible {
	outline: 3px solid var(--poc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Sobre el hero el acento no se ve: ahí el anillo es blanco. */
.poc-banner :focus-visible,
.poc-card-top :focus-visible {
	outline-color: #ffffff;
}

/* Oculto a la vista, presente para el lector de pantalla. */
.poc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.poc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. EL PANEL — la pieza que define el diseño aprobado
   ═══════════════════════════════════════════════════════════════════════ */

.poc-sheet {
	margin: 0;
	padding: var(--poc-pad);
	background: var(--poc-sheet);
	border: 1px solid rgb(15 23 42 / 6%);
	border-radius: var(--poc-radius);
	box-shadow: var(--poc-shadow);
	overflow: hidden;
}

/* El rótulo de sección: versalitas, y un filete que llega hasta el margen. */
.poc-profile .poc-sheet > h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--poc-heading);
}

.poc-profile .poc-sheet > h2::after {
	content: "";
	flex: 1;
	height: 1px;
	border-radius: 99px;
	background: color-mix(in oklab, var(--poc-heading) 18%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   3. LA TARJETA DE CABECERA: barra de marca + hero + acciones
   ═══════════════════════════════════════════════════════════════════════ */

.poc-sheet--hero {
	padding: 0;
}

.poc-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 8px 14px;
	padding-top: max(8px, env(safe-area-inset-top));
	background: #ffffff;
	border-bottom: 1px solid rgb(15 23 42 / 8%);
}

.poc-card-top__brand,
.poc-card-top__account {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--poc-touch);
	color: var(--poc-deep);
	text-decoration: none;
	font-size: 0.9rem;
}

.poc-card-top__account {
	padding: 6px 12px;
	border: 1px solid color-mix(in oklab, var(--poc-heading) 15%, transparent);
	border-radius: 8px;
	background: color-mix(in oklab, var(--poc-heading) 7%, transparent);
	color: var(--poc-heading);
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ── El hero ────────────────────────────────────────────────────────────── */
.poc-banner {
	position: relative;
	padding: 16px 16px 14px;
	background: var(--poc-banner-bg);
	color: var(--poc-on-hero);
}

.poc-banner__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	font-size: 13px;
}

.poc-banner__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-width: 0;
	font-weight: 800;
	letter-spacing: 0.2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.poc-banner__dot {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-radius: 99px;
	background: var(--poc-gold, #d4af37);
	box-shadow: 0 0 0 3px rgb(212 175 55 / 25%);
}

.poc-banner__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.poc-iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--poc-touch);
	height: var(--poc-touch);
	padding: 0;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--poc-radius-sm);
	background: rgb(255 255 255 / 14%);
	color: var(--poc-on-hero);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}

.poc-iconbtn:hover {
	background: rgb(255 255 255 / 26%);
}

/* ── Identidad ──────────────────────────────────────────────────────────── */
.poc-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding-top: 10px;
	text-align: center;
}

.poc-cover {
	width: 100%;
	aspect-ratio: 16 / 6;
	overflow: hidden;
	border-radius: var(--poc-radius-sm);
	background: rgb(255 255 255 / 10%);
}

.poc-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.poc-head:not(.has-cover) .poc-cover {
	display: none;
}

.poc-photo img {
	width: 132px;
	height: 132px;
	border-radius: 999px;
	object-fit: cover;
	display: block;
	border: 4px solid rgb(255 255 255 / 85%);
	background: rgb(255 255 255 / 10%);
	box-shadow: 0 10px 30px rgb(2 6 23 / 25%);
}

/* La foto pisa la portada cuando hay las dos. Sin portada no hay caja vacía. */
.poc-head.has-cover .poc-photo {
	margin-top: -56px;
}

.poc-name {
	margin: 10px 0 0;
	font-size: clamp(20px, 4.6vw, 28px);
	font-weight: 900;
	line-height: 1.15;
	/* Un nombre largo no puede desbordar en un móvil de 320 px. */
	overflow-wrap: anywhere;
}

.poc-role {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: rgb(255 255 255 / 95%);
}

.poc-company {
	margin: 4px 0 0;
	font-size: 13px;
	color: rgb(255 255 255 / 88%);
}

/*
 * La empresa vive en el chip del hero, que es donde la pone el diseño
 * aprobado. La línea bajo el cargo solo la usa `classic`, que no tiene chip.
 * No se borra del marcado: cada diseño enseña UNA de las dos, nunca las dos, y
 * así el lector de pantalla tampoco la oye repetida.
 */
.poc-head .poc-company {
	display: none;
}

.poc-company .poc-logo {
	width: 24px;
	height: 24px;
	object-fit: contain;
	border-radius: 4px;
}

.poc-excerpt {
	margin: 10px 0 0;
	max-width: 46ch;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(255 255 255 / 90%);
}

.poc-linkline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 12px auto 0;
	padding: 10px 12px;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--poc-radius-sm);
	background: rgb(0 0 0 / 18%);
	font-size: 13px;
	overflow: hidden;
}

.poc-linkline a {
	color: var(--poc-on-hero);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Lo primero accionable ────────────────────────────────────────────────
   En columna, y los seis diseños de Mi-Contacto lo hacen igual: son tres o
   cuatro acciones de texto largo en cuatro idiomas, y a dos columnas el
   francés parte «Escanear una tarjeta de papel» en tres líneas y deja un
   botón huérfano en su fila. Una columna, y el orden decide la jerarquía. */
.poc-profile .poc-primary {
	display: flex;
	flex-direction: column;
	/* A todo el ancho, como el diseño aprobado. Sin esto mandaba el
	   `align-items: center` de la regla global de botones hermanos del tema
	   (09-30) y cada botón medía lo que su texto (Alex, 2026-10-09). */
	align-items: stretch;
	gap: var(--poc-gap);
	margin-top: 12px;
}

/* ── Botones ────────────────────────────────────────────────────────────── */

/*
 * Con `.poc-profile` delante: la hoja del tema declara `.poc-btn` con el color
 * de la marca y, combinada por LiteSpeed, va DESPUÉS de esta. A igual
 * especificidad ganaba el tema y el botón nunca tomaba el acento del dueño.
 */
.poc-profile .poc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 6px 12px;
	border: 2px solid transparent;
	border-radius: 14px;
	font: inherit;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, filter 0.12s ease, background 0.15s ease;
}

.poc-profile .poc-btn-primary,
.poc-profile .poc-btn-primary:hover {
	background: var(--poc-accent);
	color: var(--poc-on-accent, #fff);
}

.poc-profile .poc-btn-ghost,
.poc-profile .poc-btn-ghost:hover {
	background: transparent;
	border-color: var(--poc-border);
	color: var(--poc-fg);
}

.poc-profile .poc-btn:active {
	transform: translateY(1px);
}

.poc-profile .poc-btn:hover {
	filter: brightness(0.94);
}

/*
 * Dentro del hero los botones son de vidrio, y el primario es el único sólido.
 * Va acotado al hero A PROPÓSITO: el mismo `.poc-btn-primary` se usa en el
 * formulario de captación y en los diálogos, donde un botón blanco translúcido
 * sobre un panel blanco no se vería.
 */
.poc-profile .poc-banner .poc-btn {
	border: 1px solid rgb(255 255 255 / 18%);
	background: rgb(255 255 255 / 14%);
	color: var(--poc-on-hero);
}

.poc-profile .poc-banner .poc-btn:hover {
	background: rgb(255 255 255 / 24%);
	filter: none;
}

.poc-profile .poc-banner .poc-btn-primary,
.poc-profile .poc-banner .poc-btn-primary:hover {
	background: rgb(255 255 255 / 92%);
	border-color: rgb(255 255 255 / 30%);
	color: var(--poc-heading);
	font-size: 1rem;
}

.poc-profile .poc-banner .poc-btn-primary:hover {
	background: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. CANALES — la rejilla de fichas
   ═══════════════════════════════════════════════════════════════════════ */

.poc-channels ul,
.poc-links ul,
.poc-socials ul,
.poc-gallery ul,
.poc-module ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.poc-channels ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--poc-gap);
}

/* Una ficha suelta en la última fila se centra en vez de colgar a la izquierda. */
.poc-channels li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc(50% - 5px);
}

.poc-channel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 6px 10px;
	border: 1px solid var(--poc-tile-line);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-tile);
	box-shadow: 0 6px 16px rgb(2 6 23 / 8%);
	color: var(--poc-tile-ink);
	text-decoration: none;
	text-align: center;
}

.poc-channel:hover {
	filter: brightness(0.96);
}

.poc-channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: inherit;
}

.poc-channel-icon .poc-icon {
	width: 18px;
	height: 18px;
}

.poc-channel-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.poc-channel-label {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	color: inherit;
}

/*
 * El VALOR no se ve dentro de una ficha —la ficha dice «Teléfono», y el número
 * lo abre el teléfono al tocar—, pero sí se OYE: se esconde con la técnica de
 * recorte, no con `display:none`, para que el enlace siga anunciándose como
 * «Teléfono, +1 555 555 0123» a quien usa un lector de pantalla.
 */
.poc-channel-value {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Los colores de canal. Son de sus dueños (el verde de WhatsApp, el rosa de
 * Instagram) y solo los usan los diseños que pintan el icono en color:
 * `classic` y `grid`. Aquí solo se declaran.
 */
.poc-channel-whatsapp { --poc-ch: #25d366; }
.poc-channel-telegram { --poc-ch: #229ed9; }
.poc-channel-phone { --poc-ch: #1d4076; }
.poc-channel-phone_alt { --poc-ch: #4c7fbf; }
.poc-channel-phone_work { --poc-ch: #3a6aa5; }
.poc-channel-email { --poc-ch: #ea4335; }
.poc-channel-email_alt { --poc-ch: #a3342a; }
.poc-channel-calendly { --poc-ch: #0b57d0; }
.poc-channel-messenger { --poc-ch: #0866ff; }
.poc-channel-website { --poc-ch: #0c2547; }
.poc-social-instagram { --poc-ch: #dd2a7b; }
.poc-social-facebook { --poc-ch: #1877f2; }
.poc-social-twitter { --poc-ch: #0a0a0a; }
.poc-social-linkedin { --poc-ch: #0a66c2; }
.poc-social-tiktok { --poc-ch: #ee1d52; }

/* ═══════════════════════════════════════════════════════════════════════
   5. EMPRESA, DIRECCIONES Y MAPA
   ═══════════════════════════════════════════════════════════════════════ */

.poc-place__logo img {
	display: block;
	max-width: 220px;
	max-height: 72px;
	width: auto;
	height: auto;
	margin: 0 auto 12px;
	object-fit: contain;
}

.poc-place__item + .poc-place__item {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--poc-border);
}

.poc-place__label {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--poc-muted);
}

.poc-place address {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0.2rem 0 0.75rem;
	font-style: normal;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.poc-place address .poc-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--poc-heading);
}

/* El nombre de la empresa, centrado y en negrita, como en la referencia. */
.poc-place__name {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
	color: var(--poc-heading);
}

/* La ficha con el teléfono de trabajo cierra el panel. */
.poc-place__phone {
	margin: 10px 0 0;
}

.poc-profile .poc-place__phone a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	border: 1px solid var(--poc-tile-line);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-tile);
	box-shadow: 0 6px 16px rgb(2 6 23 / 8%);
	color: var(--poc-tile-ink);
	font-weight: 800;
	text-decoration: none;
}

.poc-profile .poc-place__phone a:hover {
	filter: brightness(0.96);
}

.poc-place__phone .poc-icon {
	width: 20px;
	height: 20px;
}

.poc-place__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* Una fila: «Abrir en Maps» y «Copiar» a partes iguales. Si Copiar no está
   (navegador sin portapapeles) Maps ocupa la fila: `[hidden]` no reparte. */
.poc-place__actions > .poc-btn {
	flex: 1 1 0;
	min-height: var(--poc-touch);
	padding-inline: 0.75rem;
	border: 1px solid var(--poc-tile-line);
	border-radius: 10px;
	background: var(--poc-tile);
	color: var(--poc-heading);
	font-size: 0.88rem;
	font-weight: 700;
}

.poc-place__actions > [hidden] {
	display: none;
}

/* «Ver mapa» es un enlace de texto: pide el iframe de Google al pulsarlo. */
.poc-place__more {
	margin: 0.35rem 0 0;
	text-align: center;
}

.poc-place__more > [hidden] {
	display: none;
}

.poc-place__map iframe {
	display: block;
	width: 100%;
	height: 260px;
	margin-top: 0.75rem;
	border: 0;
	border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. RESUMEN, ENLACES, COBROS, REDES, GALERÍA Y VÍDEO
   ═══════════════════════════════════════════════════════════════════════ */

.poc-bio {
	font-size: 14px;
	line-height: 1.65;
}

.poc-bio p {
	margin: 0 0 0.9rem;
	overflow-wrap: anywhere;
}

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

/* ── Enlaces propios: píldora oscura con chevron ────────────────────────── */
.poc-links ul {
	display: flex;
	flex-direction: column;
	gap: var(--poc-gap);
}

.poc-profile .poc-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-pill);
	box-shadow: 0 6px 14px rgb(2 6 23 / 12%);
	color: #ffffff;
	font-weight: 800;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.poc-profile .poc-link:hover {
	filter: brightness(1.12);
}

.poc-link span {
	flex: 1 1 auto;
	min-width: 0;
}

.poc-link .poc-icon:last-child {
	opacity: 0.7;
}

/* ── Cobros y otros módulos ─────────────────────────────────────────────── */
.poc-module li {
	padding: 10px 12px;
	border: 1px solid var(--poc-tile-line);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-tile);
	overflow-wrap: anywhere;
}

.poc-module li + li {
	margin-top: 8px;
}

.poc-module-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

/*
 * El botón de copiar no se comprime. Con una dirección de criptomoneda de 42
 * caracteres y el QR al lado, «Copy» se quedaba en una columna de una letra
 * por línea. Medido en la tarjeta de muestra el 2026-09-23.
 */
.poc-module-row .poc-btn {
	flex: 0 0 auto;
	min-height: var(--poc-touch);
	padding-inline: 0.9rem;
	border: 1px solid var(--poc-tile-line);
	background: var(--poc-sheet);
	color: var(--poc-heading);
	font-size: 0.88rem;
	white-space: nowrap;
}

.poc-module-row > span {
	display: flex;
	flex: 1 1 10rem;
	flex-direction: column;
	min-width: 0;
	overflow-wrap: anywhere;
}

.poc-module-qr img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	background: #fff;
}

/* ── Cobros: una fila por método, que abre su diálogo ───────────────────── */
.poc-module li.poc-pay-row {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--poc-border);
	border-radius: 0;
	background: none;
}

.poc-module li.poc-pay-row + li.poc-pay-row {
	margin-top: 0;
}

.poc-module li.poc-pay-row:last-child {
	border-bottom: 0;
}

.poc-profile .poc-pay-row__btn {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--poc-fg);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.poc-pay-row__btn:hover {
	filter: brightness(0.97);
}

.poc-pay-row__name {
	flex: 1 1 auto;
	min-width: 0;
}

.poc-pay-row__btn > .poc-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--poc-muted);
}

/*
 * El monograma del método, con el color de su marca. Son colores de sus
 * dueños (como los de WhatsApp o Instagram en la rejilla); el resto toma el
 * marino de la tarjeta.
 */
.poc-pay__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--poc-pay, var(--poc-navy, #0d1b2a));
	color: #ffffff;
	font-size: 1rem;
	font-weight: 800;
}

.poc-pay__logo[data-method="paypal"] { --poc-pay: #003087; }
.poc-pay__logo[data-method="zelle"] { --poc-pay: #6d1ed4; }
.poc-pay__logo[data-method="venmo"] { --poc-pay: #008cff; }
.poc-pay__logo[data-method="cashapp"] { --poc-pay: #00d632; }
.poc-pay__logo[data-method="wise"] { --poc-pay: #9fe870; color: #163300; }
.poc-pay__logo[data-method="nequi"] { --poc-pay: #da0081; }
.poc-pay__logo[data-method="daviplata"] { --poc-pay: #ed1c27; }
.poc-pay__logo[data-method="bancolombia"] { --poc-pay: #fdda24; color: #1e1600; }
.poc-pay__logo[data-method="breb"] { --poc-pay: #1f2a44; }
.poc-pay__logo[data-method="mercadopago"] { --poc-pay: #009ee3; }
.poc-pay__logo[data-method="pix"] { --poc-pay: #32bcad; }
.poc-pay__logo[data-method="bizum"] { --poc-pay: #2ebfc2; }
.poc-pay__logo[data-method="bitcoin"] { --poc-pay: #f7931a; }
.poc-pay__logo[data-method="ethereum"] { --poc-pay: #3c3c3d; }
.poc-pay__logo[data-method="usdt"] { --poc-pay: #26a17b; }
.poc-pay__logo[data-method="binancepay"] { --poc-pay: #f0b90b; color: #1e1600; }

.poc-module__legal {
	display: flex;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	color: var(--poc-muted);
	font-size: 0.78rem;
	line-height: 1.4;
}

.poc-module-note {
	font-size: 0.92rem;
}

/* ── Redes: una fila de cuadrados ───────────────────────────────────────── */
.poc-socials ul {
	display: flex;
	gap: var(--poc-gap);
	justify-content: space-between;
}

.poc-profile .poc-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	width: auto;
	min-height: var(--poc-touch);
	padding: 0;
	border: 1px solid var(--poc-tile-line);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-tile);
	color: var(--poc-heading);
	text-decoration: none;
}

.poc-profile .poc-social:hover {
	filter: brightness(0.95);
}

/* ── Galería: carrusel en móvil ─────────────────────────────────────────── */
.poc-gallery ul {
	display: flex;
	gap: var(--poc-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 0 0 0.25rem;
}

.poc-gallery ul::-webkit-scrollbar {
	display: none;
}

.poc-gallery li {
	flex: 0 0 78%;
	scroll-snap-align: center;
}

.poc-gallery__item {
	display: block;
	overflow: hidden;
	border: 1px solid rgb(15 23 42 / 10%);
	border-radius: 16px;
	box-shadow: 0 10px 26px rgb(2 6 23 / 12%);
}

.poc-gallery img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.poc-gallery p {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: var(--poc-muted);
}

@media (min-width: 40rem) {
	.poc-gallery li {
		flex-basis: 46%;
	}
}

/* ── Vídeo ──────────────────────────────────────────────────────────────── */
.poc-video__frame {
	overflow: hidden;
	border: 1px solid rgb(15 23 42 / 10%);
	border-radius: 16px;
	background: #000;
}

.poc-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	max-width: 100%;
	border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. CAPTACIÓN DE CONTACTOS
   ═══════════════════════════════════════════════════════════════════════ */

.poc-lead-box h2 {
	margin: 0 0 1rem;
}

.poc-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 0.9rem;
}

.poc-field label {
	font-size: 0.9rem;
	font-weight: 700;
}

/* Con `.poc-profile` delante: `input[type="text"]` del tema pesa lo mismo y
   carga después, y en oscuro escribía con la tinta clara del sistema sobre el
   campo blanco de la tarjeta (1,12:1). */
.poc-profile .poc-field input,
.poc-profile .poc-field textarea {
	min-height: var(--poc-touch);
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--poc-border);
	border-radius: 10px;
	background: color-mix(in oklab, var(--poc-page) 60%, var(--poc-sheet));
	color: var(--poc-fg);
	font-family: inherit;
	/* 16 px REALES. Con menos, iOS hace zoom al enfocar y descoloca la página. */
	font-size: 16px;
}

.poc-field textarea {
	min-height: 5rem;
	resize: vertical;
}

.poc-lead-send {
	width: 100%;
}

.poc-lead-msg {
	margin: 0.75rem 0 0;
	min-height: 1.4em;
	font-size: 0.95rem;
}

.poc-lead-msg[data-state="ok"] {
	color: #15803d;
}

.poc-lead-msg[data-state="error"] {
	color: #b91c1c;
}

/* Los colores de la tarjeta, no el `a` del tema: en oscuro el tema aclara
   `--poc-brand` y el enlace de privacidad salía casi blanco sobre blanco
   (1,12:1, verificación de docs/39 en producción). */
.poc-consent-field a {
	color: var(--poc-fg);
	text-decoration: underline;
}

.poc-consent-field label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
}

.poc-consent-field input[type="checkbox"] {
	min-height: auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

/*
 * La trampa. Fuera de la vista SIN `display:none`: hay bots que se saltan lo
 * que está en display none, y este campo tiene que parecer real para ellos.
 * `aria-hidden` en el HTML lo saca del lector de pantalla.
 */
.poc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. EL QR
   ═══════════════════════════════════════════════════════════════════════
   El código va en negro sobre blanco SIEMPRE, también en los diseños oscuros:
   un lector espera módulos oscuros sobre fondo claro y muchos fallan con el
   contraste invertido. La estética no manda aquí. */

.poc-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.poc-qr__title {
	margin: 2px 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--poc-heading);
}

.poc-qr img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
	padding: 8px;
	border: 1px solid rgb(15 23 42 / 10%);
	border-radius: 14px;
	background: #fff;
	/* Los módulos son cuadrados de un píxel: cualquier suavizado los emborrona
	   y un borde difuso es exactamente lo que hace fallar a un lector. */
	image-rendering: pixelated;
}

.poc-qr p {
	margin: 0.25rem 0 0.75rem;
	max-width: 22rem;
	font-size: 0.9rem;
	color: var(--poc-muted);
}

/* Guardar, otra vez, y aquí sí a todo lo ancho. Lleva el MISMO degradado que
   la cabecera, como en el original: es la misma acción, y con una mezcla plana
   el dorado del dueño daba un caqui que no se parecía a nada del resto. */
.poc-profile .poc-qr__save {
	width: 100%;
	min-height: 52px;
	border: 0;
	background: var(--poc-banner-bg);
	color: var(--poc-on-hero);
	box-shadow: 0 14px 34px rgb(2 6 23 / 18%);
	font-size: 1rem;
}

.poc-profile .poc-qr__save:hover {
	background: var(--poc-banner-bg);
	filter: brightness(1.12);
}

@media print {
	/* En papel el QR es lo único que de verdad hay que conservar. */
	.poc-qr {
		break-inside: avoid;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   9. LA BARRA FIJA
   ═══════════════════════════════════════════════════════════════════════ */

.poc-sticky {
	position: fixed;
	left: 50%;
	bottom: calc(10px + env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	gap: 8px;
	width: 96%;
	max-width: var(--poc-max, 520px);
	padding: 8px;
	transform: translateX(-50%);
	border: 1px solid rgb(15 23 42 / 10%);
	border-radius: var(--poc-radius);
	background: rgb(255 255 255 / 92%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px rgb(2 6 23 / 18%);
}

.poc-sticky__btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0.35rem;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	color: #0f2742;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.poc-sticky__btn:hover {
	background: color-mix(in oklab, var(--poc-heading) 7%, transparent);
}

.poc-sticky__btn.is-primary {
	border-color: var(--poc-tile-line);
	background: var(--poc-tile);
	color: var(--poc-heading);
}

/* Si el aviso de cookies está abierto, la barra no se pelea con él. */
.poc-consent:not([hidden]) ~ .poc-sticky,
body:has(.poc-consent:not([hidden])) .poc-sticky {
	display: none;
}

/*
 * En una MUESTRA no hay barra fija.
 *
 * Es una ayuda para quien está usando la tarjeta en su teléfono, y en la tira
 * de diseños del escaparate tapaba justo las fichas de contacto — que es donde
 * se distingue un diseño de otro. Medido el 2026-09-21.
 */
body.poc-preview .poc-sticky {
	display: none;
}

/*
 * Ni la barra de arriba (marca, idioma, «Entrar»), ni desplazamiento: la
 * miniatura del resumen enseña la tarjeta, no la página (Alex, 2026-10-01).
 */
body.poc-preview .poc-card-top {
	display: none;
}

html:has(> body.poc-preview) {
	overflow: hidden;
	scrollbar-width: none;
}

body.poc-preview::-webkit-scrollbar {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. EL PIE
   ═══════════════════════════════════════════════════════════════════════ */

.poc-card-foot {
	margin-top: 4px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--poc-muted);
}

/* Las banderas del pie (Alex, 2026-10-09): cuatro teselas en una fila, la
   del idioma actual con el filo de la tinta del diseño —no del acento: lo
   elige el dueño y en la demo es #dedede, invisible—. 48×44: mínimo táctil. */
.poc-card-langs {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 14px;
}

.poc-card-foot .poc-card-langs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-height: 44px;
	border: 1px solid var(--poc-border);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-sheet);
	box-shadow: 0 1px 2px rgb(2 6 23 / 8%);
	transition: transform 0.12s ease;
}

.poc-card-foot .poc-card-langs a:hover {
	transform: translateY(-1px);
}

.poc-card-foot .poc-card-langs a[aria-current="true"] {
	border-color: var(--poc-fg);
	box-shadow: 0 0 0 1px var(--poc-fg);
}

.poc-card-langs .poc-flag {
	width: 24px;
	height: 24px;
}

.poc-card-foot ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

/*
 * La firma del pie de la tarjeta medía 18 px de alto. Es la superficie que de
 * verdad se abre en un teléfono —es el producto—, así que el mínimo táctil de
 * WCAG 2.2 AA (2.5.8) se aplica aquí antes que en ningún otro sitio. Va sola en
 * su párrafo: no le alcanza la excepción de los enlaces dentro de una frase.
 */
.poc-card-foot a,
.poc-card-foot button {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: inherit;
}

@media (pointer: coarse) {
	.poc-card-foot a,
	.poc-card-foot button {
		min-height: var(--poc-touch);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   11. EL DUEÑO
   ═══════════════════════════════════════════════════════════════════════ */

.poc-owner-bar {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--poc-border);
	border-radius: var(--poc-radius);
	background: var(--poc-sheet);
	font-size: 0.9rem;
	color: var(--poc-muted);
	text-align: left;
}

.poc-owner-bar__head,
.poc-owner-bar__note {
	margin: 0;
}

.poc-owner-bar__note {
	font-size: 0.8rem;
}

.poc-owner-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.poc-owner-stats li {
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	border-radius: 10px;
	background: var(--poc-page);
	text-align: center;
}

.poc-owner-stats strong {
	font-size: 1.3rem;
	color: var(--poc-fg);
}

.poc-owner-stats span {
	font-size: 0.75rem;
	line-height: 1.25;
}

.poc-owner-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
}

.poc-owner-redirect,
.poc-owner-back,
.poc-basic-owner {
	margin: 0;
	padding: 0.6rem 0.9rem;
	border-radius: 10px;
	background: #fef3c7;
	color: #78350f;
	font-size: 0.9rem;
}

.poc-basic-owner {
	text-align: center;
}

.poc-owner-back a,
.poc-basic-owner a {
	color: inherit;
	font-weight: 700;
}

.poc-profile .poc-link-btn,
.poc-card-foot .poc-link-btn {
	min-height: var(--poc-touch);
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
}

.poc-owner-trust {
	margin: 0;
	text-align: center;
}

.poc-empty-owner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem;
	border-radius: var(--poc-radius);
	background: var(--poc-sheet);
	text-align: center;
}

/* Mini-ficha del vehículo hermano: la pinta VIN por la ranura pública. */
.poc-vin-sibling {
	padding: var(--poc-pad);
	border: 1px solid rgb(15 23 42 / 6%);
	border-radius: var(--poc-radius);
	background: var(--poc-sheet);
	box-shadow: var(--poc-shadow);
}

.poc-vin-sibling__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: var(--poc-touch);
	padding: 0.7rem 1rem;
	margin-top: 0.5rem;
	border: 1px solid var(--poc-tile-line);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-tile);
	color: inherit;
	text-decoration: none;
}

.poc-vin-sibling__item span {
	font-size: 0.85rem;
	color: var(--poc-muted);
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. DIÁLOGOS
   ═══════════════════════════════════════════════════════════════════════ */

.poc-dialog {
	width: min(92vw, 26rem);
	max-height: 90vh;
	padding: 1.5rem 1.25rem 1.25rem;
	border: 0;
	border-radius: 18px;
	background: var(--poc-sheet);
	color: var(--poc-fg);
	box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
	text-align: center;
}

.poc-dialog::backdrop {
	background: rgb(10 15 25 / 55%);
}

.poc-dialog__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--poc-touch);
	height: var(--poc-touch);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.poc-share-dialog__qr {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0.5rem auto;
	padding: 8px;
	background: #fff;
	border-radius: 12px;
	image-rendering: pixelated;
}

.poc-share-dialog__help {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: var(--poc-muted);
}

.poc-share-dialog__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

/*
 * Con `.poc-profile` delante y la tinta de la TARJETA, no la del sistema: el
 * `input[type="text"]` del tema pesa lo mismo, carga después y escribe con
 * `--poc-ink`, que en modo oscuro del sistema es clara. El enlace para copiar
 * salía blanco sobre el campo blanco en el móvil de Alex (2026-10-12).
 */
.poc-profile .poc-share-dialog__link input {
	min-height: var(--poc-touch);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--poc-border);
	border-radius: 10px;
	background: var(--poc-page);
	color: var(--poc-fg);
	font-size: 16px;
}

.poc-lightbox {
	width: min(96vw, 60rem);
	padding: 3rem 0.75rem 0.75rem;
	background: #0b0d12;
	color: #f4f4f5;
}

.poc-lightbox img {
	display: block;
	max-width: 100%;
	max-height: 75vh;
	margin: 0 auto;
	object-fit: contain;
}

.poc-lightbox p {
	margin: 0.5rem 0 0;
}

/* ── El escáner en la tarjeta ───────────────────────────────────────────── */
.poc-scan-dialog { width: min(94vw, 30rem); max-height: 88vh; overflow: auto; }
.poc-scan-dialog .poc-scanner { margin: 0; }

/* ── La demo enlatada ───────────────────────────────────────────────────── */
.poc-scan-demo { width: min(94vw, 26rem); }
.poc-scan-demo h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.poc-scan-demo__lede { margin: 0 0 1rem; color: var(--poc-muted); font-size: 0.9rem; }

.poc-scan-demo__card {
	position: relative;
	display: grid;
	gap: 0.15rem;
	overflow: hidden;
	padding: 1rem;
	border: 1px solid var(--poc-border);
	border-radius: 8px;
	background: #fff;
	color: #1a1a1a;
	font-size: 0.85rem;
}
.poc-scan-demo__card b { font-size: 1rem; }
.poc-scan-demo__card small { color: #667085; }
.poc-scan-demo__card i { display: block; height: 1px; margin: 0.4rem 0; background: var(--poc-accent); }

.poc-scan-demo__beam { position: absolute; inset: 0 0 auto; height: 34%; opacity: 0; background: linear-gradient( to bottom, transparent, color-mix( in srgb, var(--poc-accent) 45%, transparent ), transparent ); }
.poc-scan-demo.is-scanning .poc-scan-demo__beam { opacity: 1; animation: poc-scan-sweep 1.1s ease-in-out; }

@keyframes poc-scan-sweep {
	from { transform: translateY( -110% ); }
	to { transform: translateY( 330% ); }
}

.poc-scan-demo__out { margin: 1rem 0 0; display: grid; gap: 0.45rem; }
.poc-scan-demo__out > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.5rem; }
.poc-scan-demo__out dt { margin: 0; color: var(--poc-muted); font-size: 0.8rem; }
.poc-scan-demo__out dd { margin: 0; font-weight: 600; font-size: 0.9rem; opacity: 0; transform: translateY( 4px ); transition: opacity 0.25s ease, transform 0.25s ease; }
.poc-scan-demo__out dd.is-in { opacity: 1; transform: none; }

.poc-scan-demo__cta { margin: 1.1rem 0 0.4rem; opacity: 0; transition: opacity 0.3s ease; }
.poc-scan-demo__cta.is-in { opacity: 1; }
.poc-scan-demo__note { margin: 0; color: var(--poc-muted); font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
	.poc-scan-demo__beam { display: none; }
	.poc-scan-demo__out dd,
	.poc-scan-demo__cta { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   12 bis. VER MÁS, DÉJAME TUS DATOS, COBROS, ENTRAR Y EL AVISO EFÍMERO
   (paridad con Mi-Contacto, docs/41)
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * «Ver más»: un `<details>` que pliega los paneles secundarios. Funciona sin
 * JavaScript y en escritorio también —la tarjeta aprobada pliega en los dos—.
 * El cuerpo repite la columna de la tarjeta: misma separación entre paneles.
 */
.poc-more {
	margin: 0;
}

.poc-more__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--poc-touch);
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	color: var(--poc-heading);
	font-size: 0.92rem;
	font-weight: 800;
	cursor: pointer;
	user-select: none;
}

.poc-more__summary::-webkit-details-marker {
	display: none;
}

.poc-more__summary:focus-visible {
	outline: 3px solid var(--poc-focus, #b8922a);
	outline-offset: 2px;
	border-radius: 999px;
}

.poc-more__summary .poc-icon {
	width: 18px;
	height: 18px;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.poc-more[open] .poc-more__summary .poc-icon {
	transform: rotate(-90deg);
}

.poc-more__close,
.poc-more[open] .poc-more__open {
	display: none;
}

.poc-more[open] .poc-more__close {
	display: inline;
}

.poc-more__body {
	display: grid;
	/*
	 * `minmax(0, 1fr)`, no la columna implícita: una rejilla sin pista
	 * declarada mide su única columna por el contenido, y la galería (un
	 * carrusel) y las filas de cobro la empujaban a 546 px en una columna
	 * de 520. Cada panel del pliegue sobresalía 26 px por la derecha
	 * (medido con DevTools el 2026-10-12).
	 */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--poc-gap);
	margin-top: var(--poc-gap);
}

/* Un panel dentro del pliegue mide lo que la columna. */
.poc-more__body > * {
	width: auto;
	min-width: 0;
	max-width: none;
}

/* ── Los diálogos de formulario: texto a la izquierda, no centrado ───────── */
.poc-lead-dialog,
.poc-signin-dialog {
	width: min(94vw, 28rem);
	text-align: left;
	overflow: auto;
}

.poc-lead-dialog h2,
.poc-signin-dialog h2 {
	margin: 0 2rem 0.25rem 0;
	font-size: 1.15rem;
	font-weight: 800;
}

.poc-lead-dialog__lede,
.poc-signin-dialog__lede {
	margin: 0 0 1rem;
	color: var(--poc-muted);
	font-size: 0.9rem;
}

.poc-lead-dialog .poc-field:last-of-type {
	margin-bottom: 0.75rem;
}

/* «Escríbeme por…»: dos casillas con el icono y el color de cada canal. */
.poc-reach {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: -0.4rem 0 0.9rem;
	padding: 0;
	border: 0;
}

.poc-reach legend {
	padding: 0;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--poc-muted);
}

.poc-reach label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--poc-touch);
	font-size: 0.95rem;
	cursor: pointer;
}

.poc-reach input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
}

.poc-reach__ico {
	display: inline-flex;
	color: var(--poc-ch, var(--poc-fg));
}

.poc-reach__ico .poc-icon {
	width: 18px;
	height: 18px;
}

.poc-reach__ico--whatsapp { --poc-ch: #25d366; }
.poc-reach__ico--telegram { --poc-ch: #229ed9; }

/* ── Cobros: el diálogo de un método ─────────────────────────────────────── */
.poc-pay-dialog h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 1.5rem 0.75rem;
	font-size: 1.15rem;
	font-weight: 800;
}

.poc-pay-dialog__qr {
	display: block;
	width: 210px;
	margin: 0 auto;
	padding: 8px;
	border: 1px solid var(--poc-tile-line);
	border-radius: 12px;
	background: #fff;
}

.poc-pay-dialog__qr img {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
}

.poc-pay-dialog__help {
	margin: 0.5rem 0 1rem;
	color: var(--poc-muted);
	font-size: 0.85rem;
}

.poc-pay-dialog__value {
	margin: 0.5rem 0 0.75rem;
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

.poc-pay-dialog__value code {
	font-family: inherit;
	font-weight: 700;
}

.poc-pay-dialog .poc-btn {
	width: 100%;
}

.poc-pay-dialog .poc-copy[hidden] {
	display: none;
}

.poc-pay-dialog__legal {
	margin: 1rem 0 0;
	color: var(--poc-muted);
	font-size: 0.78rem;
	line-height: 1.4;
}

/* ── Entrar ──────────────────────────────────────────────────────────────── */
.poc-signin-dialog__pass {
	position: relative;
	display: block;
}

.poc-profile .poc-signin-dialog__pass input {
	width: 100%;
	padding-right: 3rem;
}

.poc-signin-dialog__eye {
	position: absolute;
	top: 50%;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--poc-muted);
	transform: translateY(-50%);
	cursor: pointer;
}

.poc-signin-dialog__eye[aria-pressed="true"] {
	color: var(--poc-fg);
}

.poc-signin-dialog__row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	font-size: 0.9rem;
}

.poc-signin-dialog__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
	cursor: pointer;
}

.poc-signin-dialog__remember input {
	width: 1.25rem;
	height: 1.25rem;
	min-height: auto;
	margin: 0;
}

.poc-signin-dialog__row a,
.poc-signin-dialog__other a {
	color: var(--poc-fg);
	text-decoration: underline;
}

.poc-signin-dialog__go {
	width: 100%;
	margin-top: 0.25rem;
}

.poc-signin-dialog__or {
	margin: 1rem 0 0.5rem;
	color: var(--poc-muted);
	font-size: 0.85rem;
	text-align: center;
}

.poc-signin-dialog__social {
	display: grid;
	gap: 0.5rem;
}

.poc-signin-dialog__social .poc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--poc-touch);
	border: 1px solid var(--poc-border);
	border-radius: 14px;
	background: var(--poc-sheet);
	color: var(--poc-fg);
	font-weight: 700;
	text-decoration: none;
}

.poc-signin-dialog__other {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	text-align: center;
}

/*
 * Google y Facebook llegan con `.poc-btn--ghost` del tema, que lee `--poc-ink`
 * y `--poc-surface`: en un teléfono en modo oscuro el tema los invierte y el
 * texto salía blanco sobre blanco (Alex, 2026-10-10). La tarjeta no sigue al
 * sistema: se le dan sus propios tokens, con más peso que la regla del tema.
 */
.poc-profile .poc-signin-dialog__social .poc-btn.poc-btn--ghost,
.poc-profile .poc-signin-dialog__social .poc-btn.poc-btn--ghost:hover {
	background: var(--poc-sheet);
	color: var(--poc-fg);
	border-color: var(--poc-border);
}

/* El recuadro de Cloudflare dentro de un diálogo: a todo el ancho, con aire. */
.poc-lead-dialog .poc-captcha,
.poc-signin-dialog .poc-captcha {
	margin: 0 0 0.9rem;
	min-height: 65px;
}

/* ── El aviso efímero («Descarga iniciada…») ────────────────────────────── */
.poc-card-toast {
	position: fixed;
	left: 50%;
	bottom: calc(5.5rem + env(safe-area-inset-bottom));
	z-index: 40;
	max-width: min(92vw, 24rem);
	margin: 0;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: var(--poc-heading, #0d1b2a);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
	transform: translateX(-50%);
}

.poc-card-toast[hidden] {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. LOS SEIS DISEÑOS
   ═══════════════════════════════════════════════════════════════════════

   Uno por eje, y los seis son los de Mi-Contacto:

     · poc      — el de serie: pila de tarjetas y hero con los colores del
                  dueño. Es «Mi Contacto» allí, «Tus colores» aquí.
     · classic  — «Clásico»: banner liso, foto cuadrada de cantos redondos,
                  filas con valor y etiqueta, iconos de canal en su color.
     · studio   — «Estudio»: banda de acento a sangre, sin tarjetas flotantes,
                  lista fiel con chevron y barra inferior de color.
     · premium  — «Premium»: fondo oscuro de terciopelo, oro y serif.
     · carbon   — «Carbón»: el de serie con el hero siempre marino y el
                  anillo dorado en la foto.
     · grid     — «Rejilla»: portada 2:1, iconos grandes de color en rejilla
                  de tres y el botón de guardar en oro.

   ADVERTENCIA HONESTA, y queda escrita porque se mide sola: `carbon` es `poc`
   con otro hero. En Mi-Contacto pasa exactamente lo mismo —se comprobó
   abriendo los seis a la vez el 2026-09-23— y Alex decidió copiar los seis tal
   cual sabiéndolo. Si algún día sobra uno, es ese.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   classic — el documento
   Banner liso sin chips, foto de cantos redondos, la empresa como etiqueta
   gris bajo el cargo, y el contacto como FILAS con el valor a la vista: es el
   diseño para quien quiere leer el número sin tocar nada.
   ─────────────────────────────────────────────────────────────────────── */
.poc-skin-classic {
	--poc-page: #f0f2f5;
	--poc-radius: 16px;
	--poc-gap: 8px;
	--poc-shadow: 0 1px 2px rgb(0 0 0 / 5%);
	--poc-pad: 16px;
}

/* Sin barra de marca: el diseño arranca en el banner. El enlace a la
   plataforma y el acceso siguen estando, en el pie. */
.poc-skin-classic .poc-card-top {
	border-bottom: 0;
	padding-bottom: 0;
	background: transparent;
}

/* El hero pierde el color de fondo: el color está en el banner. */
.poc-skin-classic .poc-banner {
	padding: 0 16px 20px;
	background: none;
	color: var(--poc-fg);
}

.poc-skin-classic .poc-banner__top {
	display: none;
}

.poc-skin-classic .poc-head {
	padding-top: 0;
}

/* El banner: 160 px de degradado a sangre, y la foto montada encima. */
.poc-skin-classic .poc-head::before {
	content: "";
	display: block;
	width: calc(100% + 32px);
	height: 160px;
	margin: 0 -16px;
	background: linear-gradient(135deg, var(--poc-accent), color-mix(in oklab, var(--poc-accent) 25%, #ffffff));
}

.poc-skin-classic .poc-photo {
	margin-top: -70px;
}

.poc-skin-classic .poc-photo img {
	width: 135px;
	height: 135px;
	border-radius: 24px;
	border: 4px solid var(--poc-sheet);
	background: var(--poc-sheet);
	box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.poc-skin-classic .poc-name {
	margin-top: 12px;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--poc-fg);
}

.poc-skin-classic .poc-role {
	margin-top: 2px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--poc-heading);
}

/* Aquí la empresa es una etiqueta gris, no un chip sobre color. */
.poc-skin-classic .poc-head .poc-company {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 4px 10px;
	border-radius: 6px;
	background: color-mix(in oklab, var(--poc-fg) 6%, var(--poc-page));
	/* Más cerca de la tinta que el gris: sobre el chip daba 4,22:1. */
	color: color-mix(in oklab, var(--poc-fg) 75%, var(--poc-muted));
	font-size: 0.85rem;
	font-weight: 600;
}

.poc-skin-classic .poc-excerpt,
.poc-skin-classic .poc-linkline {
	color: var(--poc-muted);
	background: none;
	border: 0;
	font-size: 0.9rem;
}

.poc-skin-classic .poc-linkline a {
	color: var(--poc-heading);
}

.poc-skin-classic .poc-primary {
	gap: 8px;
}

.poc-skin-classic .poc-banner .poc-btn {
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: color-mix(in oklab, var(--poc-fg) 10%, var(--poc-page));
	color: var(--poc-fg);
	font-size: 0.9rem;
	font-weight: 600;
}

.poc-skin-classic .poc-banner .poc-btn-primary,
.poc-skin-classic .poc-banner .poc-btn-primary:hover {
	background: var(--poc-accent);
	color: var(--poc-on-accent, #fff);
	font-size: 1rem;
}

/* El rótulo de sección: gris, sin filete. */
.poc-skin-classic .poc-sheet > h2,
.poc-skin-classic .poc-qr__title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--poc-muted);
}

.poc-skin-classic .poc-sheet > h2::after {
	display: none;
}

/* Los canales dejan de ser fichas y pasan a ser filas con su valor. */
.poc-skin-classic .poc-channels ul {
	display: block;
}

.poc-skin-classic .poc-channel {
	position: relative;
	justify-content: flex-start;
	gap: 14px;
	padding: 12px 20px 12px 0;
	border: 0;
	border-bottom: 1px solid color-mix(in oklab, var(--poc-fg) 6%, var(--poc-sheet));
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--poc-fg);
	text-align: left;
}

.poc-skin-classic .poc-channels li:last-child .poc-channel {
	border-bottom: 0;
}

.poc-skin-classic .poc-channels li:last-child:nth-child(odd) {
	width: auto;
}

/* El icono, en su color de marca y dentro de un cuadrado redondeado. */
.poc-skin-classic .poc-channel-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: color-mix(in oklab, var(--poc-ch, var(--poc-heading)) 12%, #ffffff);
	color: var(--poc-ch, var(--poc-heading));
}

.poc-skin-classic .poc-channel-icon .poc-icon {
	width: 20px;
	height: 20px;
}

/* El valor arriba y la etiqueta debajo, como una ficha de contacto. */
.poc-skin-classic .poc-channel-text {
	flex-direction: column-reverse;
	align-items: flex-start;
}

.poc-skin-classic .poc-channel-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--poc-muted);
}

.poc-skin-classic .poc-channel-value {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: hidden;
	clip: auto;
	white-space: normal;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.poc-skin-classic .poc-channel::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid color-mix(in oklab, var(--poc-fg) 20%, transparent);
	border-bottom: 2px solid color-mix(in oklab, var(--poc-fg) 20%, transparent);
	transform: rotate(-45deg);
}

/* Enlaces: las mismas filas, sin píldora. */
.poc-skin-classic .poc-link {
	min-height: 48px;
	padding: 12px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--poc-fg);
	font-weight: 500;
}

.poc-skin-classic .poc-links li + li .poc-link {
	border-top: 1px solid color-mix(in oklab, var(--poc-fg) 6%, var(--poc-sheet));
}

/* Redes: barras del color de cada una, que es la firma de este diseño. */
.poc-skin-classic .poc-social {
	border: 0;
	border-radius: 8px;
	background: var(--poc-ch, var(--poc-heading));
	color: #ffffff;
}

.poc-skin-classic .poc-qr img {
	border-radius: 12px;
}

.poc-skin-classic .poc-qr__save {
	border-radius: 10px;
	background: var(--poc-accent);
	color: var(--poc-on-accent, #fff);
}

.poc-skin-classic .poc-sticky {
	border-radius: 16px;
	box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
}

.poc-skin-classic .poc-sticky__btn {
	flex-direction: column;
	gap: 2px;
	min-height: 50px;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--poc-muted);
}

.poc-skin-classic .poc-sticky__btn.is-primary {
	background: color-mix(in oklab, var(--poc-accent) 12%, #ffffff);
	color: var(--poc-heading);
}

/* ───────────────────────────────────────────────────────────────────────
   studio — la app
   El acento deja de ser el color de un botón y pasa a ser una banda a sangre
   que ocupa el primer pantallazo. Se van las tarjetas flotantes: queda un
   lienzo con bloques de borde fino, la lista de contacto es fiel (etiqueta,
   valor y chevron) y la barra de abajo es de color y va pegada al borde.
   ─────────────────────────────────────────────────────────────────────── */
.poc-skin-studio {
	--poc-page: #f2f5f9;
	--poc-sheet: #ffffff;
	--poc-line: #e3e8ee;
	--poc-tint: color-mix(in oklab, var(--poc-accent) 11%, #ffffff);
	--poc-radius: 20px;
	--poc-gap: 26px;
	--poc-max: 430px;
	/* El margen lateral de este diseño, y la medida con la que sangran la
	   barra de marca y la banda de color. Un único número. */
	--poc-edge: 20px;

	padding-top: 0;
	padding-inline: var(--poc-edge);
}

/*
 * La tarjeta de cabecera pierde su caja: aquí no hay tarjetas flotantes, hay
 * un lienzo. Y la barra de marca y la banda de color van A SANGRE, que es lo
 * único de este diseño que toca el borde de la pantalla.
 */
.poc-skin-studio .poc-sheet--hero {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

.poc-skin-studio .poc-card-top {
	margin-inline: calc(var(--poc-edge) * -1);
	padding-inline: var(--poc-edge);
	border-bottom: 1px solid var(--poc-line);
}

.poc-skin-studio .poc-card-top__account {
	border-radius: 10px;
}

/*
 * La banda: 170 px, esquinas de abajo redondeadas, y la foto MONTADA sobre su
 * borde, que es la firma del diseño. Por eso los chips van absolutos sobre la
 * banda y el contenido arranca a 170: así la foto se sube 64 y queda a caballo,
 * exactamente como en el de Mi-Contacto. Medido contra su captura.
 */
.poc-skin-studio .poc-banner {
	padding: 170px 0 28px;
	background: none;
	color: var(--poc-fg);
}

.poc-skin-studio .poc-head .poc-photo {
	margin-top: -64px;
}

.poc-skin-studio .poc-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--poc-edge) * -1);
	right: calc(var(--poc-edge) * -1);
	height: 170px;
	border-radius: 0 0 28px 28px;
	/* Oscura con CUALQUIER acento: el dorado a pelo era una losa de oro de 170
	   px con el texto encima sin contraste. Medido el 2026-09-22 y otra vez hoy. */
	background: linear-gradient(135deg, color-mix(in oklab, var(--poc-accent) 52%, #06121f), color-mix(in oklab, var(--poc-accent) 26%, var(--poc-deep)) 88%);
}

.poc-skin-studio .poc-banner > * {
	position: relative;
	z-index: 1;
}

/* Los chips, sobre la banda y fuera del flujo: si ocuparan sitio empujarían la
   foto fuera de ella. */
.poc-skin-studio .poc-banner__top {
	position: absolute;
	top: 16px;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 0;
	color: #ffffff;
}

.poc-skin-studio .poc-banner__brand {
	padding: 6px 14px 6px 12px;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 99px;
	background: rgb(255 255 255 / 14%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 13px;
}

.poc-skin-studio .poc-banner__dot {
	width: 7px;
	height: 7px;
	background: #ffffff;
	box-shadow: none;
	opacity: 0.9;
}

.poc-skin-studio .poc-iconbtn {
	border-radius: 50%;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* El perfil sale de la banda: fondo del lienzo y tinta oscura. */
.poc-skin-studio .poc-head {
	padding: 0 4px;
}

.poc-skin-studio .poc-photo img {
	width: 128px;
	height: 128px;
	border: 5px solid var(--poc-sheet);
	background: var(--poc-sheet);
	box-shadow: 0 10px 30px rgb(10 30 50 / 18%);
}

.poc-skin-studio .poc-name {
	margin-top: 16px;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.12;
	color: var(--poc-fg);
}

.poc-skin-studio .poc-role {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--poc-heading);
}

.poc-skin-studio .poc-excerpt {
	margin-top: 10px;
	max-width: none;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--poc-muted);
}

/* Aquí la dirección no va en el hero: ya está en la lista de contacto. */
.poc-skin-studio .poc-linkline {
	display: none;
}

.poc-skin-studio .poc-primary {
	margin-top: 20px;
}

.poc-skin-studio .poc-banner .poc-btn {
	min-height: 52px;
	padding: 14px 16px;
	border: 1.5px solid var(--poc-line);
	border-radius: 14px;
	background: var(--poc-sheet);
	color: var(--poc-fg);
	font-size: 14.5px;
	font-weight: 700;
}

.poc-skin-studio .poc-banner .poc-btn:hover {
	border-color: var(--poc-accent);
	background: var(--poc-sheet);
}

.poc-skin-studio .poc-banner .poc-btn .poc-icon {
	color: var(--poc-heading);
}

.poc-skin-studio .poc-banner .poc-btn-primary,
.poc-skin-studio .poc-banner .poc-btn-primary:hover {
	min-height: 56px;
	border-color: var(--poc-accent);
	background: var(--poc-accent);
	color: var(--poc-on-accent, #fff);
	font-size: 16px;
	box-shadow: 0 8px 20px color-mix(in oklab, var(--poc-accent) 35%, transparent);
}

.poc-skin-studio .poc-banner .poc-btn-primary .poc-icon {
	color: inherit;
}

/* Los bloques pierden la caja flotante: aquí el lienzo es el fondo. */
.poc-skin-studio .poc-sheet {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* El rótulo, sobre el lienzo y en versalitas muy espaciadas. */
.poc-skin-studio .poc-sheet > h2,
.poc-skin-studio .poc-qr__title {
	display: block;
	margin: 0 0 12px;
	font-size: 12px; /* 12 px como mínimo (suite de accesibilidad, 2026-10-01). */
	font-weight: 800;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--poc-muted);
	text-align: left;
}

.poc-skin-studio .poc-sheet > h2::after {
	display: none;
}

/*
 * Y la caja vuelve alrededor del CONTENIDO, no de la sección entera: borde de
 * un píxel y radio de 20. Las secciones que son una lista (canales, enlaces,
 * redes, galería) llevan la caja en su `ul`; las que son texto, en sí mismas.
 */
.poc-skin-studio .poc-place,
.poc-skin-studio .poc-bio,
.poc-skin-studio .poc-module,
.poc-skin-studio .poc-lead-box,
.poc-skin-studio .poc-vin-sibling,
.poc-skin-studio .poc-qr {
	padding: 18px 20px;
	border: 1px solid var(--poc-line);
	border-radius: 20px;
	background: var(--poc-sheet);
}

/* Ahí el rótulo sí va dentro de la caja: es su encabezado. */
.poc-skin-studio .poc-place > h2,
.poc-skin-studio .poc-bio > h2,
.poc-skin-studio .poc-module > h2,
.poc-skin-studio .poc-lead-box > h2 {
	margin-top: 0;
}

/* La lista de contacto: una sola caja con filas, icono en pastilla y chevron. */
.poc-skin-studio .poc-channels ul {
	display: block;
	overflow: hidden;
	border: 1px solid var(--poc-line);
	border-radius: 20px;
	background: var(--poc-sheet);
}

.poc-skin-studio .poc-channel {
	position: relative;
	justify-content: flex-start;
	gap: 16px;
	min-height: 66px;
	padding: 15px 44px 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--poc-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--poc-fg);
	text-align: left;
}

.poc-skin-studio .poc-channels li:last-child .poc-channel {
	border-bottom: 0;
}

.poc-skin-studio .poc-channels li:last-child:nth-child(odd) {
	width: auto;
}

.poc-skin-studio .poc-channel-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--poc-tint);
	color: var(--poc-heading);
}

.poc-skin-studio .poc-channel-icon .poc-icon {
	width: 22px;
	height: 22px;
}

.poc-skin-studio .poc-channel-text {
	align-items: flex-start;
}

.poc-skin-studio .poc-channel-label {
	font-size: 15px;
	font-weight: 700;
}

.poc-skin-studio .poc-channel-value {
	position: static;
	width: auto;
	height: auto;
	margin: 3px 0 0;
	overflow: hidden;
	clip: auto;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	font-weight: 500;
	color: var(--poc-muted);
}

/* El chevron: dibujado, no un carácter. Un «›» de texto cambia de forma con la
   fuente del sistema y en algunas se ve como una comilla. */
.poc-skin-studio .poc-channel::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-right: 2px solid var(--poc-muted);
	border-bottom: 2px solid var(--poc-muted);
	transform: rotate(-45deg);
	opacity: 0.7;
}

.poc-skin-studio .poc-link {
	border: 1px solid var(--poc-line);
	border-radius: 16px;
	background: var(--poc-sheet);
	box-shadow: none;
	color: var(--poc-fg);
	font-size: 14.5px;
	font-weight: 700;
	padding: 14px 16px;
}

.poc-skin-studio .poc-link:hover {
	border-color: var(--poc-accent);
	filter: none;
}

.poc-skin-studio .poc-link .poc-icon {
	color: var(--poc-heading);
}

.poc-skin-studio .poc-socials ul {
	justify-content: center;
	gap: 12px;
}

.poc-skin-studio .poc-social {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--poc-line);
	border-radius: 50%;
	background: var(--poc-sheet);
	color: var(--poc-fg);
}

.poc-skin-studio .poc-social:hover {
	border-color: var(--poc-accent);
	color: var(--poc-heading);
	filter: none;
}

.poc-skin-studio .poc-gallery__item {
	border: 1px solid var(--poc-line);
	border-radius: 18px;
	box-shadow: 0 8px 22px rgb(10 30 50 / 10%);
}

.poc-skin-studio .poc-video__frame {
	border: 1px solid var(--poc-line);
	border-radius: 20px;
}

.poc-skin-studio .poc-qr__save {
	border-radius: 14px;
	background: var(--poc-accent);
	color: var(--poc-on-accent, #fff);
	box-shadow: 0 8px 20px color-mix(in oklab, var(--poc-accent) 35%, transparent);
}

/* La barra pegada al borde, de color, con los iconos grandes. */
.poc-skin-studio .poc-sticky {
	bottom: 0;
	width: 100%;
	padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
	gap: 6px;
	border: 0;
	border-radius: 18px 18px 0 0;
	background: color-mix(in oklab, var(--poc-accent) 90%, #000);
	box-shadow: 0 -6px 24px rgb(8 16 26 / 22%);
}

.poc-skin-studio .poc-sticky__btn {
	flex-direction: column;
	gap: 4px;
	min-height: 56px;
	color: rgb(255 255 255 / 88%);
	font-size: 12px; /* 12 px como mínimo (suite de accesibilidad, 2026-10-01). */
	font-weight: 700;
}

.poc-skin-studio .poc-sticky__btn .poc-icon {
	width: 21px;
	height: 21px;
}

.poc-skin-studio .poc-sticky__btn.is-primary {
	border-color: transparent;
	background: rgb(255 255 255 / 16%);
	color: #ffffff;
}

.poc-skin-studio .poc-sticky__btn:hover {
	background: rgb(255 255 255 / 12%);
	color: #ffffff;
}

/* ───────────────────────────────────────────────────────────────────────
   premium — terciopelo, oro y serif
   Paleta FIJA (va en Render::FIXED_PALETTE_SKINS): los colores del dueño no
   entran, porque un fondo claro elegido para otro diseño lo rompe. El oro y el
   marino son los de POCCard, no los de Mi-Contacto.

   La serif es la del sistema A PROPÓSITO, y es lo que sirve Mi-Contacto hoy:
   su Playfair se retiró el 2026-08-08 por la regla de tipografía auto-alojada.
   ─────────────────────────────────────────────────────────────────────── */
.poc-skin-premium {
	--poc-gold: #d4af37;
	--poc-gold-soft: #b48b50;
	--poc-ink: #f4e9d7;
	--poc-page: #0a0e1a;
	--poc-sheet: #141926;
	--poc-fg: var(--poc-ink);
	--poc-accent: var(--poc-gold);
	--poc-on-accent: #0a0e1a;
	--poc-muted: rgb(244 233 215 / 60%);
	--poc-border: rgb(212 175 55 / 20%);
	--poc-heading: var(--poc-gold);
	--poc-tile: rgb(20 25 38 / 50%);
	--poc-tile-line: rgb(212 175 55 / 18%);
	--poc-tile-ink: var(--poc-ink);
	--poc-pill: rgb(212 175 55 / 6%);
	--poc-radius: 16px;
	--poc-gap: 12px;
	--poc-shadow: 0 16px 48px rgb(0 0 0 / 50%);
	--poc-pad: 18px 22px;
	--poc-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;

	background: radial-gradient(ellipse at top, #14182a 0%, #0a0e1a 70%);
	background-attachment: fixed;
	color: var(--poc-ink);
}

.poc-skin-premium .poc-sheet {
	background: linear-gradient(180deg, #141926 0%, #1c2236 100%);
	border: 1px solid var(--poc-border);
}

.poc-skin-premium .poc-card-top {
	background: #0a0e1a;
	border-bottom: 1px solid rgb(212 175 55 / 12%);
}

.poc-skin-premium .poc-card-top__brand {
	color: var(--poc-ink);
}

.poc-skin-premium .poc-card-top__account {
	border: 1px solid rgb(212 175 55 / 35%);
	border-radius: 999px;
	background: transparent;
	color: var(--poc-gold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.poc-skin-premium .poc-banner {
	padding: 22px 22px 20px;
	background: none;
	color: var(--poc-ink);
}

.poc-skin-premium .poc-banner__top {
	margin-bottom: 18px;
}

.poc-skin-premium .poc-banner__brand {
	font-family: var(--poc-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--poc-gold);
}

.poc-skin-premium .poc-banner__dot {
	width: 6px;
	height: 6px;
	background: var(--poc-gold);
	box-shadow: 0 0 8px rgb(212 175 55 / 50%);
}

.poc-skin-premium .poc-iconbtn {
	border: 1px solid rgb(212 175 55 / 30%);
	border-radius: 50%;
	background: transparent;
	color: var(--poc-gold);
}

.poc-skin-premium .poc-iconbtn:hover {
	background: var(--poc-gold);
	color: #0a0e1a;
}

/* El marco dorado de la foto: el detalle que hace el diseño. */
.poc-skin-premium .poc-photo {
	padding: 5px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-gold), #8a6d3a 70%, var(--poc-gold));
	box-shadow: 0 12px 36px rgb(212 175 55 / 25%);
}

.poc-skin-premium .poc-photo img {
	width: 140px;
	height: 140px;
	border: 3px solid #0a0e1a;
	background: #1c2236;
	box-shadow: none;
}

.poc-skin-premium .poc-name {
	margin-top: 0;
	font-family: var(--poc-serif);
	font-weight: 500;
	font-size: clamp(24px, 5vw, 32px);
	letter-spacing: 0.005em;
	line-height: 1.2;
	color: var(--poc-ink);
}

.poc-skin-premium .poc-role {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--poc-gold);
}

.poc-skin-premium .poc-excerpt {
	margin-top: 16px;
	max-width: 44ch;
	font-size: 14px;
	line-height: 1.65;
	color: rgb(244 233 215 / 80%);
}

.poc-skin-premium .poc-linkline {
	margin-top: 18px;
	padding: 10px 18px;
	border: 1px solid rgb(212 175 55 / 22%);
	border-radius: 999px;
	background: rgb(212 175 55 / 6%);
	color: var(--poc-gold);
}

.poc-skin-premium .poc-linkline a {
	color: var(--poc-gold);
	font-weight: 500;
}

.poc-skin-premium .poc-primary {
	margin-top: 22px;
}

.poc-skin-premium .poc-banner .poc-btn {
	min-height: 48px;
	border: 1px solid rgb(212 175 55 / 35%);
	border-radius: 999px;
	background: transparent;
	color: var(--poc-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.poc-skin-premium .poc-banner .poc-btn:hover {
	background: var(--poc-gold);
	border-color: var(--poc-gold);
	color: #0a0e1a;
}

.poc-skin-premium .poc-banner .poc-btn-primary,
.poc-skin-premium .poc-banner .poc-btn-primary:hover {
	border-color: transparent;
	background: linear-gradient(135deg, var(--poc-gold), var(--poc-gold-soft));
	color: #0a0e1a;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 8px 24px rgb(212 175 55 / 25%);
}

/* Los rótulos, en serif cursiva con un filete que se apaga. */
.poc-skin-premium .poc-sheet > h2,
.poc-skin-premium .poc-qr__title {
	font-family: var(--poc-serif);
	font-style: italic;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--poc-gold);
	gap: 14px;
}

.poc-skin-premium .poc-sheet > h2::after {
	height: 1px;
	background: linear-gradient(90deg, rgb(212 175 55 / 40%), transparent);
}

.poc-skin-premium .poc-channel {
	min-height: 52px;
	border: 1px solid var(--poc-tile-line);
	border-radius: 12px;
	background: var(--poc-tile);
	box-shadow: none;
	color: var(--poc-ink);
	font-size: 13px;
}

.poc-skin-premium .poc-channel:hover {
	border-color: rgb(212 175 55 / 45%);
	background: rgb(212 175 55 / 10%);
	filter: none;
}

.poc-skin-premium .poc-channel-icon {
	color: var(--poc-gold);
}

.poc-skin-premium .poc-channel-label {
	font-size: 13px;
	font-weight: 500;
}

.poc-skin-premium .poc-link {
	border: 1px solid rgb(212 175 55 / 20%);
	border-radius: 12px;
	background: rgb(212 175 55 / 6%);
	box-shadow: none;
	color: var(--poc-ink);
	font-weight: 500;
	font-size: 14px;
}

.poc-skin-premium .poc-link:hover {
	border-color: rgb(212 175 55 / 45%);
	background: rgb(212 175 55 / 14%);
	filter: none;
}

.poc-skin-premium .poc-link .poc-icon {
	color: var(--poc-gold);
}

.poc-skin-premium .poc-module li,
.poc-skin-premium .poc-vin-sibling__item {
	border-color: var(--poc-tile-line);
	background: var(--poc-tile);
}

.poc-skin-premium .poc-social {
	height: 46px;
	border: 1px solid rgb(212 175 55 / 25%);
	border-radius: 12px;
	background: transparent;
	color: var(--poc-gold);
}

.poc-skin-premium .poc-social:hover {
	background: var(--poc-gold);
	color: #0a0e1a;
	filter: none;
}

.poc-skin-premium .poc-place address {
	color: rgb(244 233 215 / 85%);
}

.poc-skin-premium .poc-place__actions .poc-btn {
	border: 1px solid rgb(212 175 55 / 30%);
	border-radius: 999px;
	background: transparent;
	color: var(--poc-gold);
	font-size: 12px; /* 12 px como mínimo (suite de accesibilidad, 2026-10-01). */
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.poc-skin-premium .poc-place__map iframe {
	filter: contrast(0.92) brightness(0.85) hue-rotate(-8deg);
}

.poc-skin-premium .poc-gallery__item {
	border: 1px solid rgb(212 175 55 / 20%);
	border-radius: 12px;
	box-shadow: none;
}

.poc-skin-premium .poc-video__frame {
	border: 1px solid rgb(212 175 55 / 20%);
	border-radius: 12px;
}

.poc-skin-premium .poc-field input,
.poc-skin-premium .poc-field textarea,
.poc-skin-premium .poc-share-dialog__link input {
	border: 1px solid rgb(212 175 55 / 20%);
	background: rgb(10 14 26 / 50%);
	color: var(--poc-ink);
}

.poc-skin-premium .poc-qr img {
	border: 1px solid rgb(212 175 55 / 30%);
	border-radius: 12px;
	background: var(--poc-ink);
	box-shadow: 0 8px 22px rgb(0 0 0 / 40%);
}

.poc-skin-premium .poc-qr__save {
	border-radius: 999px;
	background: linear-gradient(135deg, var(--poc-gold), var(--poc-gold-soft));
	color: #0a0e1a;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: 0 10px 28px rgb(212 175 55 / 30%);
}

.poc-skin-premium .poc-sticky {
	padding: 6px;
	gap: 4px;
	border: 1px solid rgb(212 175 55 / 25%);
	border-radius: 999px;
	background: rgb(10 14 26 / 85%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 20px 50px rgb(0 0 0 / 60%);
}

.poc-skin-premium .poc-sticky__btn {
	min-height: var(--poc-touch);
	border-radius: 999px;
	color: rgb(244 233 215 / 70%);
	font-size: 12px; /* 12 px como mínimo (suite de accesibilidad, 2026-10-01). */
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.poc-skin-premium .poc-sticky__btn:hover,
.poc-skin-premium .poc-sticky__btn.is-primary {
	background: rgb(212 175 55 / 20%);
	border-color: transparent;
	color: var(--poc-gold);
}

.poc-skin-premium .poc-dialog {
	background: linear-gradient(180deg, #141926, #1c2236);
	border: 1px solid rgb(212 175 55 / 30%);
	color: var(--poc-ink);
}

.poc-skin-premium .poc-owner-bar,
.poc-skin-premium .poc-empty-owner {
	background: var(--poc-sheet);
	border-color: var(--poc-border);
}

/* ───────────────────────────────────────────────────────────────────────
   carbon — el marino de la marca
   El de serie con el hero SIEMPRE marino, la página más fría, la ficha de
   contacto en azul de hielo y el anillo dorado en la foto. Paleta fija: no la
   tocan los colores del dueño.
   ─────────────────────────────────────────────────────────────────────── */
.poc-skin-carbon {
	--poc-page: #f6f8fb;
	--poc-sheet: #ffffff;
	--poc-accent: #16243a;
	--poc-on-accent: #ffffff;
	--poc-fg: #0f2742;
	--poc-muted: #51617a;
	--poc-border: #dfe5ec;
	--poc-heading: #0c2547;
	--poc-tile: #eaf0f8;
	--poc-tile-line: #dfe5ec;
	--poc-tile-ink: #0c2547;
	--poc-pill: #0c2547;
	--poc-banner-bg: linear-gradient(160deg, #16243a, #081a33);
}

.poc-skin-carbon .poc-photo img {
	border: 3px solid rgb(212 175 55 / 60%);
}

.poc-skin-carbon .poc-name {
	letter-spacing: -0.01em;
}

.poc-skin-carbon .poc-banner__dot {
	background: #d4af37;
}

.poc-skin-carbon .poc-linkline {
	border-color: rgb(212 175 55 / 30%);
}

/* ───────────────────────────────────────────────────────────────────────
   grid — la rejilla
   El hero se convierte en PORTADA 2:1 con el marino de la marca y filetes de
   oro, el perfil baja al fondo claro, y todas las formas de contactar caben en
   una pantalla como iconos grandes de su propio color. El único oro de la
   pantalla es el botón de guardar, que es el objetivo del visitante.
   ─────────────────────────────────────────────────────────────────────── */
.poc-skin-grid {
	--poc-gold: #f5b818;
	--poc-gold-ink: #2a2005;
	--poc-page: #eef4fb;
	--poc-navy: #0c2547;
}

.poc-skin-grid .poc-banner {
	padding: 0 0 20px;
	background: var(--poc-sheet);
	color: var(--poc-fg);
}

/* La portada: proporción 2:1, degradado marino y líneas doradas finísimas. */
.poc-skin-grid .poc-banner__top {
	position: relative;
	align-items: flex-start;
	aspect-ratio: 2 / 1;
	padding: 12px 14px;
	background: radial-gradient(120% 100% at 20% 0%, #17427c 0%, var(--poc-navy) 55%, #081a33 100%);
	color: #ffffff;
}

.poc-skin-grid .poc-banner__top::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(115deg, rgb(212 175 55 / 16%) 0 1px, transparent 1px 26px);
}

.poc-skin-grid .poc-banner__brand,
.poc-skin-grid .poc-banner__actions {
	position: relative;
	z-index: 1;
}

.poc-skin-grid .poc-head {
	padding: 0 18px 10px;
}

.poc-skin-grid .poc-photo {
	margin-top: -58px;
	position: relative;
	z-index: 2;
}

.poc-skin-grid .poc-photo img {
	width: 116px;
	height: 116px;
	border: 4px solid #ffffff;
	box-shadow: 0 6px 18px rgb(8 26 51 / 18%);
}

.poc-skin-grid .poc-name {
	margin-top: 8px;
	font-size: 22px;
	color: var(--poc-navy);
}

.poc-skin-grid .poc-role,
.poc-skin-grid .poc-excerpt {
	color: var(--poc-muted);
}

.poc-skin-grid .poc-role {
	font-weight: 600;
}

.poc-skin-grid .poc-linkline {
	border: 0;
	background: none;
	color: var(--poc-muted);
}

.poc-skin-grid .poc-linkline a {
	color: color-mix(in oklab, var(--poc-navy) 80%, #ffffff);
}

.poc-skin-grid .poc-primary {
	padding: 0 16px;
}

.poc-skin-grid .poc-banner .poc-btn {
	min-height: 44px;
	border: 1px solid var(--poc-border);
	border-radius: 999px;
	background: #ffffff;
	color: color-mix(in oklab, var(--poc-navy) 85%, #ffffff);
	font-size: 14px;
}

/* El único oro de la pantalla. */
.poc-skin-grid .poc-banner .poc-btn-primary,
.poc-skin-grid .poc-banner .poc-btn-primary:hover {
	min-height: 54px;
	border: 0;
	border-radius: 999px;
	background: var(--poc-gold);
	color: var(--poc-gold-ink);
	font-size: 17px;
	font-weight: 800;
}

/* «Déjame tus datos» es el número dos y no puede quedar al nivel del resto. */
.poc-skin-grid .poc-banner .poc-btn.poc-lead-open {
	min-height: 48px;
	border: 2px solid color-mix(in oklab, var(--poc-navy) 85%, #ffffff);
	font-size: 15px;
	font-weight: 800;
}

.poc-skin-grid .poc-banner .poc-btn.poc-lead-open .poc-icon {
	width: 18px;
	height: 18px;
}

/* El rótulo del QR descargable, como en la referencia: una línea centrada. */
.poc-skin-grid .poc-qr__title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: var(--poc-navy);
}

/* La rejilla: tres columnas, y una fila incompleta se centra sola. */
.poc-skin-grid .poc-channels ul,
.poc-skin-grid .poc-socials ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 18px 10px;
}

.poc-skin-grid .poc-channels li,
.poc-skin-grid .poc-socials li {
	flex: 0 0 calc((100% - 20px) / 3);
	max-width: calc((100% - 20px) / 3);
	width: auto;
}

.poc-skin-grid .poc-channel,
.poc-skin-grid .poc-social {
	flex-direction: column;
	gap: 7px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--poc-fg);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
}

.poc-skin-grid .poc-channel-icon,
.poc-skin-grid .poc-social {
	color: #ffffff;
}

.poc-skin-grid .poc-channel-icon {
	width: 84px;
	height: 84px;
	border-radius: 20px;
	background: var(--poc-ch, var(--poc-navy));
	box-shadow: 0 4px 12px rgb(8 26 51 / 14%);
}

.poc-skin-grid .poc-channel-icon .poc-icon {
	width: 34px;
	height: 34px;
}

/*
 * UNA rejilla (docs/41 §2.3): sin rótulo a la vista —solo para el lector de
 * pantalla—, la celda QR primero, y las redes dentro de la misma lista con
 * su etiqueta y su color. Una celda puede ser un botón: se le quita lo de
 * botón.
 */
.poc-skin-grid .poc-channels > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.poc-skin-grid .poc-channels > h2::after {
	display: none;
}

.poc-profile button.poc-channel {
	width: 100%;
	font: inherit;
	cursor: pointer;
}

.poc-channel-qr { --poc-ch: #334155; }

.poc-skin-grid .poc-channel-social .poc-channel-icon {
	background: var(--poc-ch, var(--poc-navy));
}

.poc-skin-grid .poc-channel.poc-social-instagram .poc-channel-icon {
	background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7);
}

/* La red social no tiene etiqueta bajo el icono: el icono ES la etiqueta. */
.poc-skin-grid .poc-social {
	width: 84px;
	height: 84px;
	margin: 0 auto;
	border-radius: 20px;
	background: var(--poc-ch, var(--poc-navy));
	box-shadow: 0 4px 12px rgb(8 26 51 / 14%);
}

.poc-skin-grid .poc-social .poc-icon {
	width: 34px;
	height: 34px;
}

/* Solo el cuadrado del panel de redes de los otros diseños: en la rejilla única
   el degradado va en el icono, no en toda la celda. */
.poc-skin-grid .poc-social.poc-social-instagram {
	background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7);
}

.poc-skin-grid .poc-channel-label {
	font-size: 12px;
	font-weight: 600;
}

.poc-skin-grid .poc-qr__save,
.poc-skin-grid .poc-sticky__btn.is-primary {
	border: 0;
	border-radius: 999px;
	background: var(--poc-gold);
	color: var(--poc-gold-ink);
	font-weight: 800;
}

.poc-skin-grid .poc-qr__save:hover {
	background: var(--poc-gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   14. EL MODO OSCURO DEL SISTEMA NO CAMBIA LA TARJETA
   ═══════════════════════════════════════════════════════════════════════

   La tarjeta enseña los colores que eligió su dueño, también a quien tiene el
   teléfono en oscuro: es lo que ya hacían los empotrados y lo que hace
   `premium`, que es oscuro de fábrica.

   Hubo un bloque oscuro para los cuatro diseños de paleta abierta y salía a
   medias en los cuatro: los diseños fijan su hoja en blanco y el bloque solo
   oscurecía lo de dentro —botones y filas de pago marrones con el texto casi
   invisible, títulos dorado claro sobre blanco a 1,47:1—. Medido el
   2026-10-04 (docs/39, P0-1). Mi-Contacto no tenía modo oscuro en la tarjeta.

   `color-scheme` es lo que hace que los controles nativos (campos, casillas,
   barras de scroll) se pinten para el diseño y no para el sistema. */
.poc-profile {
	color-scheme: light;
}

.poc-profile.poc-skin-premium {
	color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. MOVIMIENTO, PANTALLA ANCHA E IMPRESIÓN
   ═══════════════════════════════════════════════════════════════════════ */

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

@media print {
	.poc-primary,
	.poc-lead-box,
	.poc-owner-bar,
	.poc-sticky,
	.poc-card-top,
	.poc-dialog {
		display: none !important;
	}

	.poc-profile {
		max-width: none;
		background: #fff;
		padding: 0;
	}

	.poc-sheet {
		box-shadow: none;
	}
}

/*
 * El selector de idioma (Alex, 2026-10-01: «todas las interfaces deberían
 * tenerlo»). Mismo marcado que el de la cabecera del sitio —`Marketing::
 * lang_menu()`—, pero esta página no carga la hoja del escaparate.
 */
.poc-card-top__end { display: flex; align-items: center; gap: 8px; }
.poc-card-top .poc-langmenu {
	--poc-lm-ink: var(--poc-deep);
	--poc-lm-muted: #55627a;
	--poc-lm-line: rgb(15 23 42 / 14%);
	--poc-lm-surface: #ffffff;
	--poc-lm-soft: #f1f4f8;
	--poc-lm-shadow: 0 12px 32px rgb(13 27 42 / 16%);
	/* Pareja del botón de la cuenta, que en la tarjeta es de 8 px, no píldora. */
	--poc-lm-radius: 8px;
}
/* El panel del idioma (≈ 280 px) es más alto que la barra más la portada de
   una tarjeta corta, y `.poc-sheet` recorta (`overflow: hidden`, por los
   cantos). Abierto, la portada deja salir el panel; la barra lleva sus
   propios cantos para que no se vean cuadrados mientras tanto (A-64). */
/* El panel se alinea con el margen derecho de la BARRA, no con el botón: a su
   derecha va «Entrar» y a 390 px el panel quedaba a 2 px del borde. */
.poc-card-top { position: relative; }
.poc-card-top .poc-langmenu { position: static; }
.poc-card-top .poc-langmenu__panel { top: calc(100% + 6px); right: 14px; }
.poc-sheet:has(.poc-card-top .poc-langmenu[open]) { overflow: visible; }
.poc-sheet:has(.poc-card-top .poc-langmenu[open]) > .poc-card-top {
	border-start-start-radius: var(--poc-radius);
	border-start-end-radius: var(--poc-radius);
}