/*
 * POC Theme — armazón.
 *
 * Solo lo que el documento necesita: reinicio corto, retícula, tipografía,
 * cabecera, pie y las cuatro piezas que las plantillas usan de verdad. No es un
 * sistema de diseño: los componentes de aplicación se generalizarán cuando
 * tengan DOS consumidores reales, no antes.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	/* La banda del intérprete sale a sangre con calc(50% - 50vw): sin esto el
	   ancho de la barra de scroll produce un scroll horizontal fantasma. */
	overflow-x: clip;
	background: var(--poc-ground);
	color: var(--poc-ink);
	font-family: var(--poc-font-sans);
	font-size: var(--poc-text-base);
	line-height: var(--poc-leading-normal);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video { max-width: 100%; height: auto; }

a { color: var(--poc-brand); }

/* Foco visible SIEMPRE. Quitar el anillo de foco es el atajo que rompe la
   navegación por teclado; WCAG 2.2, criterio 2.4.7. */
:focus-visible {
	outline: 2px solid var(--poc-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Saltar al contenido ------------------------------------------------- */

.poc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1rem;
	background: var(--poc-surface);
	color: var(--poc-ink);
	border-radius: 0 0 var(--poc-radius-sm) 0;
	box-shadow: var(--poc-shadow-md);
}
.poc-skip:focus { left: 0; }

/* --- Retícula ------------------------------------------------------------ */

.poc-wrap {
	width: 100%;
	max-width: var(--poc-wide);
	margin-inline: auto;
	padding-inline: var(--poc-gutter);
}

/* Ritmo vertical por hermanos adyacentes: cada bloque separa del anterior sin
   que ningún componente tenga que saber qué hay encima. */
.poc-flow > * + * { margin-block-start: var(--poc-space-3); }

.poc-main { padding-block: var(--poc-space-4); min-height: 50vh; }

/* --- Cabecera y pie ------------------------------------------------------ */

.poc-header {
	background: var(--poc-surface);
	border-block-end: 1px solid var(--poc-line);
}

.poc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--poc-space-2);
	flex-wrap: wrap;
	padding-block: var(--poc-space-2);
}

.poc-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 800;
	font-size: var(--poc-text-lg);
	color: var(--poc-ink);
	text-decoration: none;
}
.poc-brand__word i { font-style: normal; font-weight: 500; color: var(--poc-accent); }

.custom-logo { max-height: 48px; width: auto; }

.poc-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--poc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.poc-nav__list a {
	color: var(--poc-muted);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--poc-text-sm);
}
.poc-nav__list a:hover,
.poc-nav__list .current-menu-item > a { color: var(--poc-ink); }

.poc-footer {
	background: var(--poc-surface);
	border-block-start: 1px solid var(--poc-line);
	padding-block: var(--poc-space-3);
}
.poc-footer .poc-nav__list { margin-block-end: var(--poc-space-1); }

/* --- Tipografía ---------------------------------------------------------- */

.poc-title {
	font-size: var(--poc-text-2xl);
	line-height: var(--poc-leading-tight);
	letter-spacing: -0.02em;
	margin: 0;
	/* Sin líneas huérfanas en los titulares: una palabra sola en la última
	   línea es el defecto que ya se midió dos veces en el home de Mi-Contacto. */
	text-wrap: balance;
}

.poc-lede { font-size: var(--poc-text-lg); color: var(--poc-muted); margin: 0; }
.poc-meta { font-size: var(--poc-text-sm); color: var(--poc-muted); margin: 0; }

.poc-page-head { display: grid; gap: var(--poc-space-1); }

.poc-prose { max-width: var(--poc-content); }
.poc-prose > * + * { margin-block-start: var(--poc-space-2); }
.poc-prose h2 { font-size: var(--poc-text-xl); line-height: var(--poc-leading-tight); text-wrap: balance; }
.poc-prose h3 { font-size: var(--poc-text-lg); line-height: var(--poc-leading-tight); }
.poc-prose pre,
.poc-prose code { font-family: var(--poc-font-mono); font-size: var(--poc-text-sm); }
.poc-prose pre {
	background: var(--poc-surface);
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-sm);
	padding: var(--poc-space-2);
	overflow-x: auto;
}
.poc-prose blockquote {
	margin: 0;
	padding-inline-start: var(--poc-space-2);
	border-inline-start: 3px solid var(--poc-line);
	color: var(--poc-muted);
}

/*
 * Las tablas se desbordan a lo ancho; el cuerpo del documento nunca.
 *
 * Eso lo decía este comentario y NADA lo hacía cumplir. Medido el 2026-09-22
 * en las 56 comparativas (14 × 4 idiomas): `/fr/face-a-la-carte-papier/`
 * pintaba su tabla 23 px más ancha que la columna de texto — el borde salía
 * por la derecha de todos los párrafos— porque «enregistrements,» y
 * «coordonnées» no caben y el ancho mínimo de la tabla crece con ellas.
 *
 * `overflow-wrap: anywhere` y no `break-word`: solo `anywhere` reduce el
 * ancho MÍNIMO de la celda, que es lo que fuerza a la tabla. `break-word`
 * parte la línea pero no encoge la tabla, así que no habría servido.
 * Con `table-layout: fixed` también se arreglaba, pero iguala las columnas y
 * hoy son 114/100/144 a propósito.
 */
.poc-prose table { width: 100%; border-collapse: collapse; }
.poc-prose th,
.poc-prose td {
	border-block-end: 1px solid var(--poc-line);
	padding: 0.5rem;
	text-align: start;
	overflow-wrap: anywhere;
}

/*
 * En móvil, `anywhere` partía las palabras por la mitad —«guard/en»,
 * «tarjeta/s»— en las 13 comparativas × 4 idiomas (auditoría 09-24, P0 18),
 * justo donde un comprador decide entre marcas. Mi-Contacto no parte ninguna:
 * su tabla se desplaza dentro de su caja. Aquí igual: la TABLA se desplaza,
 * el cuerpo del documento no, y las palabras se quedan enteras (con el
 * guionado del idioma de la página si una no cabe).
 */
@media (max-width: 640px) {
	.poc-prose table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.poc-prose th,
	.poc-prose td {
		min-width: 7.5rem;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: auto;
	}
}

/* --- Superficies --------------------------------------------------------- */

.poc-article,
.poc-card,
.poc-empty {
	background: var(--poc-surface);
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-lg);
	padding: var(--poc-space-3);
	box-shadow: var(--poc-shadow-sm);
}

.poc-card { display: grid; gap: var(--poc-space-1); }
.poc-card__title { font-size: var(--poc-text-xl); line-height: var(--poc-leading-tight); margin: 0; }
.poc-card__title a { color: var(--poc-ink); text-decoration: none; }
.poc-card__title a:hover { color: var(--poc-brand); }

.poc-empty { display: grid; gap: var(--poc-space-2); justify-items: start; }

.poc-figure { margin: 0; border-radius: var(--poc-radius-md); overflow: hidden; }

/* --- Botón --------------------------------------------------------------- */

.poc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* 44 px de alto mínimo: es el objetivo táctil que WCAG 2.2 (2.5.8) pide y
	   el que evita que un pulgar falle en móvil. */
	min-height: 44px;
	padding: 0.7rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--poc-radius-md);
	background: var(--poc-brand);
	color: var(--poc-brand-ink);
	font: inherit;
	/* 600 en todo el sitio: el aviso de cookies salía a 700 en la cuenta y a 600
	   en el escaparate (auditoría 2026-10-07, P2-A). Un componente, un peso. */
	font-weight: 600;
	/* Interlineado propio: heredaba el del texto de alrededor (1,55 / 1,6 / 1,7)
	   y el mismo botón medía 50, 52 o 53 px según la página (docs/44, P2-H).
	   Con él: ≈39 px el pequeño, 48 el normal, 55 el grande. */
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	/* La marca es de cantos redondos (píldora): la tarjeta física, el icono
	   de la app y el punto NFC. Los botones la siguen. */
	border-radius: 999px;
}
.poc-btn:hover { filter: brightness(1.06); color: var(--poc-brand-ink); }

/* Con `:hover` en la misma regla: `.poc-btn:hover` pesa más que la variante
   sola y le ponía el texto blanco sobre fondo blanco al pasar el ratón. */
.poc-btn.poc-btn--ghost,
.poc-btn.poc-btn--ghost:hover {
	background: var(--poc-surface);
	color: var(--poc-ink);
	border-color: var(--poc-line);
}

/*
 * Dos botones seguidos nunca se tocan (Alex, 2026-09-30: «los botones se
 * pegan»). Dentro de un párrafo iban en línea y, al no caber, bajaban a la
 * siguiente sin un solo píxel entre ellos; de lado, el espacio entre etiquetas
 * daba 3 px. Todo contenedor con botones hermanos pasa a fila flexible con
 * hueco. Sin estirarlos: los contenedores con diseño propio (el hero y el
 * cierre del home, aprobados) cambiaban de proporción en el teléfono.
 *
 * `:where()` deja la especificidad en cero: un contenedor que ya decide su
 * maquetación (rejilla, columna, barra fija) sigue mandando. Y nunca uno
 * `hidden`: un `display` de autor ganaría al del navegador y lo enseñaría.
 */
:where(p, div):where(:not([hidden]):has(> .poc-btn + .poc-btn):not(:has(> :not(.poc-btn)))) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
}

/* Con texto al lado (una vista previa, un aviso): el contenedor no cambia de
   maquetación —sus párrafos seguirían en fila—; los botones llevan margen. */
:where(p, div):where(:has(> .poc-btn + .poc-btn):has(> :not(.poc-btn))) > :where(.poc-btn) {
	margin-block: 0.3125rem;
	margin-inline-end: 0.625rem;
}

@media (max-width: 480px) {
	:where(p, div):where(:has(> .poc-btn + .poc-btn):has(> :not(.poc-btn))) > :where(.poc-btn:not([hidden])) {
		display: flex;
		width: 100%;
		margin-inline-end: 0;
	}
}

/* --- Paginación ---------------------------------------------------------- */

.poc-pagination { margin-block-start: var(--poc-space-3); }
.poc-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.poc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-surface);
	color: var(--poc-ink);
	text-decoration: none;
}
.poc-pagination .page-numbers.current {
	background: var(--poc-brand);
	color: var(--poc-brand-ink);
	border-color: var(--poc-brand);
}

/* --- Formularios --------------------------------------------------------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-sm);
	background: var(--poc-surface);
	color: var(--poc-ink);
	/* 16 px reales: por debajo de eso, Safari en iOS hace zoom al enfocar y
	   descoloca la página entera. */
	font: inherit;
	font-size: max(16px, var(--poc-text-base));
}

.search-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-form label { flex: 1 1 14rem; }

/* ── Pie de marca y enlaces legales  ·  PLT-UI-004 ────────────────────
 *
 * El pie es el único sitio del sitio donde SIEMPRE están los legales. No es
 * decoración: una pasarela de pago pide poder llegar a las condiciones desde
 * cualquier página, y un menú que alguien tiene que acordarse de rellenar no
 * cumple eso.
 */

.poc-footer {
	border-top: 1px solid var(--poc-line);
	padding-block: var(--poc-space-4);
	background: var(--poc-surface);
}

.poc-legal-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--poc-space-1) var(--poc-space-2);
	list-style: none;
	margin: 0 0 var(--poc-space-2);
	padding: 0;
	font-size: var(--poc-text-sm);
}

/*
 * Los enlaces legales del pie medían 19 px de alto —18 el de la firma—, por
 * debajo del mínimo de 24×24 de WCAG 2.2 AA (2.5.8). Van en una lista de
 * navegación, así que no les alcanza la excepción de los enlaces en línea.
 * Crece la zona, no la letra. Medido a 390 px el 2026-09-19.
 */
.poc-legal-links a,
.poc-legal-links .poc-link-btn {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--poc-muted);
}

@media (pointer: coarse) {
	.poc-legal-links a,
	.poc-legal-links .poc-link-btn {
		min-height: 44px;
	}
}

/* ── Piel de marca para cuerpos de página  ·  PLT-UI-005 ──────────────
 *
 * Una sola clase que una página de marketing puede ponerse para heredar el
 * ritmo vertical y el ancho de lectura sin que cada una invente los suyos.
 */

.poc-skin {
	--poc-skin-gap: var(--poc-space-4);
}

.poc-skin > * + * {
	margin-block-start: var(--poc-skin-gap);
}

.poc-skin h2 {
	font-size: var(--poc-text-2xl);
	line-height: var(--poc-leading-tight);
	/* Sin huérfanas: un titular de cuatro líneas con una palabra sola abajo fue
	   literalmente lo que Alex señaló dos veces en Mi-Contacto. */
	text-wrap: balance;
}

.poc-skin h3 {
	font-size: var(--poc-text-xl);
	text-wrap: balance;
}

.poc-skin p {
	max-width: var(--poc-content);
	text-wrap: pretty;
}