/*
 * POC Theme — tokens.
 *
 * El contrato visual, y el único sitio donde se declaran valores crudos. Va en
 * su propia hoja a propósito: es lo que la aplicación tendrá que compartir con
 * el tema, y una hoja que se puede encolar sola es una hoja que se puede
 * compartir sin arrastrar el resto.
 *
 * La lección de Mi-Contacto: llegó a tener 12 familias de color, 9 radios y 10
 * alturas distintas porque cada componente eligió las suyas. Aquí no hay valores
 * crudos fuera de este fichero.
 */

:root {
	color-scheme: light dark;

	/* Tipografía. Inter (OFL), elegida por Alex el 2026-10-04 mirando la portada
	   en el teléfono con Manrope, la del sistema e Inter: Manrope no le gustaba
	   y había entrado el 09-13 con la hoja de marca, sin decisión suya. Es la
	   misma de la VIN Card impresa. SELF-HOSTED en assets/fonts: nunca un <link>
	   a un tercero (el Guest Mode de LiteSpeed lo arranca, medido en
	   Mi-Contacto). La pila del sistema queda detrás para el primer pintado. */
	--poc-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--poc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Escala tipográfica. Fluida entre móvil y escritorio: un titular de 32 px
	   fijo se come la pantalla a 390 px de ancho. */
	--poc-text-sm: 0.875rem;
	--poc-text-base: 1rem;
	--poc-text-lg: 1.125rem;
	--poc-text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
	--poc-text-2xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
	/* Solo para el titular del hero. Un display de 60 px en una columna de
	   390 px es lo que Alex señaló en Mi-Contacto: por eso es fluido y con tope. */
	--poc-text-3xl: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);
	/* Titular de sección del escaparate: entre el 2xl de la aplicación y el
	   3xl del hero. Sin él, las secciones del home se leían como fichas. */
	/* En un teléfono estrecho baja con el ancho (7,5 % de la pantalla, 27 px a
	   360): «Guides and comparisons.» dejaba «comparisons.» sola en su línea
	   (docs/39, P1-7, Alex 2026-10-04). Todos los titulares de sección bajan
	   a la vez para que sigan midiendo lo mismo entre ellos. */
	--poc-text-display: clamp(min(1.875rem, 7.5vw), min(1.3rem + 2.2vw, 7.5vw), 2.875rem);

	--poc-leading-tight: 1.2;
	--poc-leading-normal: 1.6;

	/* Espaciado. Una escala, no doce. */
	--poc-space-1: 0.5rem;
	--poc-space-2: 1rem;
	--poc-space-3: 1.5rem;
	--poc-space-4: 2.5rem;
	--poc-space-5: 4rem;

	/* Radios. Tres, y cada uno con un uso. */
	--poc-radius-sm: 8px;
	--poc-radius-md: 12px;
	--poc-radius-lg: 18px;

	/* Retícula. */
	--poc-content: 44rem;
	--poc-wide: 72rem;
	--poc-gutter: 1.25rem;

	/* Color. La marca POC Card (hoja de marca, 2026-07-29): azul primario
	   #0D1B2A, oro de acento #D4AF37, neutro #F2F4F7. Claro por defecto; el
	   bloque oscuro de abajo solo redefine tokens, nunca declara un color nuevo.
	   El oro es de CONVERSIÓN: como máximo dos botones dorados por página. */
	--poc-ground: #f2f4f7;
	--poc-surface: #ffffff;
	--poc-ink: #0d1b2a;
	--poc-muted: #55627a;
	--poc-line: #e1e6ee;
	/* El campo de un formulario: su fondo y su BORDE. La línea fina de arriba
	   sirve para separar tarjetas, no para dibujar un campo: contra el blanco de
	   la tarjeta da 1,25:1 y en oscuro 1,33:1, y el límite de un control pide
	   3:1 (WCAG 1.4.11). Medido en el editor de VIN en oscuro el 2026-10-11:
	   página, tarjeta y campo eran el mismo azul. Aquí 3,83:1 sobre la tarjeta;
	   en oscuro el campo se hunde al fondo de página y el borde da 3,16:1. */
	--poc-field: #ffffff;
	--poc-field-line: #76839a;
	--poc-brand: #0d1b2a;
	--poc-brand-ink: #ffffff;
	--poc-brand-soft: #e8edf4;
	--poc-accent: #d4af37;
	--poc-accent-ink: #1e1600;
	--poc-accent-soft: #fbf5e2;
	/* La noche de la marca: el azul primario como FONDO de las bandas oscuras
	   del escaparate. No se redefine en modo oscuro (es el mismo navy siempre),
	   a diferencia de --poc-brand, que ahí pasa a ser claro. */
	--poc-night: #0d1b2a;
	--poc-night-ink: #eef2f7;
	--poc-night-muted: #aab6c8;
	--poc-night-line: #22344a;
	--poc-danger: #b42318;
	--poc-focus: #b8922a;

	--poc-shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06);
	--poc-shadow-md: 0 4px 16px rgba(13, 27, 42, 0.08);
	--poc-shadow-lg: 0 24px 60px -24px rgba(13, 27, 42, 0.35);

	/* El escaparate (rediseño del 2026-09-27, paquete «Diseño Poccard.com»).
	   Desde el 2026-10-04 (docs/39, P1-1) su tinta y su oro SON los de la
	   marca: el paquete traía marino #0B1A33 y oro #E3B22B, y el sitio pintaba
	   el mismo botón en dos azules y el oro de la conversión distinto del oro
	   del logotipo. Una paleta. Lo demás del paquete (fondos, líneas, sombras,
	   retícula) se queda, sobre la tinta de la marca.
	   El oro como TEXTO sobre claro es #7A5D0B (4,5:1 o más); el oro puro
	   solo va de relleno o sobre marino. */
	--poc-lp-navy: var(--poc-night);
	--poc-lp-bezel: #06101f;
	--poc-lp-gold: var(--poc-accent);
	--poc-lp-gold-hover: #c4a02f;
	--poc-lp-gold-hover-dark: #e0bd4a;
	--poc-lp-gold-text: #7a5d0b;
	--poc-lp-gold-tint: #fbf1d2;
	--poc-lp-glow: rgba(212, 175, 55, 0.22);
	--poc-lp-bg: #f5f7fa;
	--poc-lp-bg-fixed: #f5f7fa;
	--poc-lp-surface: #ffffff;
	--poc-lp-soft: #eef1f6;
	--poc-lp-ink: var(--poc-ink);
	--poc-lp-text: #4f5b70;
	/* 4,76:1 sobre el más claro de los fondos del escaparate. Era #6f7a8e:
	   4,03:1 en el pie de las 210 páginas (docs/39, P0-3). */
	--poc-lp-muted: #5f6b7f;
	--poc-lp-nav: #3d4a61;
	--poc-lp-on-dark-muted: #c3c9d4;
	--poc-lp-grey-3: #9aa3b2;
	--poc-lp-grey-3-fixed: #9aa3b2;
	--poc-lp-nav-glass: rgba(245, 247, 250, 0.86);
	--poc-lp-line-card: rgba(13, 27, 42, 0.06);
	--poc-lp-line-soft: rgba(13, 27, 42, 0.08);
	--poc-lp-line: rgba(13, 27, 42, 0.1);
	--poc-lp-line-rule: rgba(13, 27, 42, 0.14);
	--poc-lp-line-strong: rgba(13, 27, 42, 0.18);
	--poc-lp-line-hover: rgba(13, 27, 42, 0.2);
	--poc-lp-line-strike: rgba(13, 27, 42, 0.25);
	--poc-lp-shadow-hero: 0 40px 80px -30px rgba(13, 27, 42, 0.45);
	--poc-lp-shadow-phone: 0 30px 60px -30px rgba(13, 27, 42, 0.4);
	--poc-lp-shadow-panel: 0 1px 0 rgba(13, 27, 42, 0.04), 0 24px 60px -40px rgba(13, 27, 42, 0.25);
	--poc-lp-shadow-toast: 0 20px 40px -16px rgba(13, 27, 42, 0.3);
	/* La píldora oscura y el canto de los paneles marinos: en modo oscuro el
	   marino se funde con el fondo, así que la píldora se invierte y los
	   paneles ganan un canto. */
	--poc-lp-btn-dark: var(--poc-brand);
	--poc-lp-btn-dark-ink: #f5f7fa;
	--poc-lp-navy-edge: transparent;
	/* La retícula del home: hasta 1440 px de contenido y un margen que crece
	   con la pantalla (24 px en un teléfono, 96 en un monitor grande). Los
	   párrafos conservan su ancho de lectura; lo que gana ancho son las
	   rejillas, la imagen del hero y los paneles. */
	--poc-lp-container: 1440px;
	--poc-lp-gutter: clamp(24px, 4.5vw, 96px);
}

/* La fuente de la marca. Un solo fichero variable (100–900), 48 KB, subconjunto
   latino: tildes, eñe, ç, œ y € de los cuatro idiomas. Manrope sigue en
   assets/fonts para volver atrás (y la usa el PDF de la ficha VIN). */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-poc-theme="light"]) {
		--poc-ground: #0a1220;
		--poc-surface: #111b2b;
		--poc-ink: #eef2f7;
		--poc-muted: #9aa8bd;
		--poc-line: #243149;
		--poc-field: #0a1220;
		--poc-field-line: #5a6a86;
		--poc-brand: #eef2f7;
		--poc-brand-ink: #0d1b2a;
		--poc-brand-soft: #182438;
		--poc-accent: #d4af37;
		--poc-accent-ink: #1e1600;
		--poc-accent-soft: #2a2410;
		--poc-danger: #f0837a;
		--poc-focus: #d4af37;
		--poc-lp-gold-text: #d4af37;
		--poc-lp-gold-tint: #2a2410;
		--poc-lp-bg: #0a1220;
		--poc-lp-surface: #111b2b;
		--poc-lp-soft: #182438;
		--poc-lp-ink: #eef2f7;
		--poc-lp-text: #b5c0d0;
		--poc-lp-muted: #9aa8bd;
		--poc-lp-nav: #c3c9d4;
		--poc-lp-grey-3: #6f7a8e;
		--poc-lp-nav-glass: rgba(10, 18, 32, 0.86);
		--poc-lp-line-card: rgba(255, 255, 255, 0.06);
		--poc-lp-line-soft: rgba(255, 255, 255, 0.08);
		--poc-lp-line: rgba(255, 255, 255, 0.1);
		--poc-lp-line-rule: rgba(255, 255, 255, 0.14);
		--poc-lp-line-strong: rgba(255, 255, 255, 0.22);
		--poc-lp-line-hover: rgba(255, 255, 255, 0.28);
		--poc-lp-line-strike: rgba(255, 255, 255, 0.3);
		--poc-lp-btn-dark: #eef2f7;
		--poc-lp-btn-dark-ink: #0d1b2a;
		--poc-lp-navy-edge: rgba(255, 255, 255, 0.12);

		--poc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
		--poc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
	}
}

:root[data-poc-theme="dark"] {
	--poc-ground: #0a1220;
	--poc-surface: #111b2b;
	--poc-ink: #eef2f7;
	--poc-muted: #9aa8bd;
	--poc-line: #243149;
	--poc-field: #0a1220;
	--poc-field-line: #5a6a86;
	--poc-brand: #eef2f7;
	--poc-brand-ink: #0d1b2a;
	--poc-brand-soft: #182438;
	--poc-accent: #d4af37;
	--poc-accent-ink: #1e1600;
	--poc-accent-soft: #2a2410;
	--poc-danger: #f0837a;
	--poc-focus: #d4af37;
	--poc-lp-gold-text: #d4af37;
	--poc-lp-gold-tint: #2a2410;
	--poc-lp-bg: #0a1220;
	--poc-lp-surface: #111b2b;
	--poc-lp-soft: #182438;
	--poc-lp-ink: #eef2f7;
	--poc-lp-text: #b5c0d0;
	--poc-lp-muted: #9aa8bd;
	--poc-lp-nav: #c3c9d4;
	--poc-lp-grey-3: #6f7a8e;
	--poc-lp-nav-glass: rgba(10, 18, 32, 0.86);
	--poc-lp-line-card: rgba(255, 255, 255, 0.06);
	--poc-lp-line-soft: rgba(255, 255, 255, 0.08);
	--poc-lp-line: rgba(255, 255, 255, 0.1);
	--poc-lp-line-rule: rgba(255, 255, 255, 0.14);
	--poc-lp-line-strong: rgba(255, 255, 255, 0.22);
	--poc-lp-line-hover: rgba(255, 255, 255, 0.28);
	--poc-lp-line-strike: rgba(255, 255, 255, 0.3);
	--poc-lp-btn-dark: #eef2f7;
	--poc-lp-btn-dark-ink: #0d1b2a;
	--poc-lp-navy-edge: rgba(255, 255, 255, 0.12);

	--poc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--poc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
}