/* ═══════════════════════════════════════════════════════════════════════
   ARCA · LANDING v6 — "PRODUCTO"
   ═══════════════════════════════════════════════════════════════════════

   Sexta dirección. Vale la pena el registro de las cinco que Joel rechazó,
   porque cada una falló por algo distinto y todas enseñaron algo:

     1. Crema + tarjetas + acento cobre → el default de diseño generado.
     2. Papel, lacre, serif, guilloché → "como de despacho de abogados".
        El error: vestir a Arca de su CLIENTE en vez de sí misma.
     3. Tres bocetos (instrumento/masa/luz) → "qué horrible".
     4. Negro + glow + cristal + grano → "se ve super AI". Y era cierto:
        ese combo de EFECTOS —no la paleta— es la firma del look generado.
     5. Negro, cero efectos, filetes (lp3) → aprobado en UNA pantalla y
        rechazado sobre 10,000px: "siento que estamos atascados". Diez
        secciones con la misma forma se leen como tapiz por disciplinadas
        que estén.

   ── LA APUESTA DE ESTA ─────────────────────────────────────────────────
   Que se vea COMO EL PRODUCTO, no como un folleto del producto. Fondo
   claro con PANELES oscuros: esa inversión es la que da textura de
   aplicación, y hace que las capturas —que son oscuras— caigan dentro del
   sistema en vez de pegarse encima.

   ── LAS TRES REGLAS ────────────────────────────────────────────────────
   1. EL PRODUCTO PESA MÁS QUE EL COPY. En cada fila la imagen manda y el
      texto acompaña. La v5 tenía el problema opuesto.
   2. ICONOGRAFÍA SÓLIDA INVERTIDA. Cuadros negros con glifo blanco, no
      líneas sueltas: en fondo claro un trazo de 1px a 20px desaparece, y
      esa fue literalmente la queja ("faltan más iconos").
   3. SIGUE SIENDO BLANCO Y NEGRO. Cero acento de color. Lo aprobado de la
      v5 —tipografía, retícula de 8, correcciones ópticas— se conserva.
   ═══════════════════════════════════════════════════════════════════════ */

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

.lp4 {
	--fondo: #fafaf9;
	--fondo-2: #f2f2f0;
	--panel: #0b0b0c;
	--panel-2: #17171a;
	--tinta: #101011;
	--gris: #5f5f66;
	--gris-2: #8e8e96;
	--gris-3: #b6b6bc;
	--linea: #e6e6e4;
	--linea-2: #d6d6d3;
	/* Sobre panel oscuro. */
	--hueso: #f4f4f2;
	--hueso-2: #a8a8b0;
	--linea-osc: #26262a;

	--sans: "Switzer", "Satoshi", system-ui, -apple-system, sans-serif;
	/* Pila del sistema a propósito: el mono se usa en DOS cadenas cortas (el
	   fragmento del URL y el código de cuatro palabras). Cargar una webfont
	   entera para ~30 caracteres es peor trato que la fuente que ya trae el
	   aparato, y en marketing cada request cuenta. */
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--pad: clamp(20px, 4.5vw, 64px);
	--ancho: 1240px;

	/* Retícula base de 8: lo único que se conserva íntegro de la v5, porque
	   es lo que hace que el ritmo vertical no se sienta improvisado. */
	--e1: 8px;
	--e2: 16px;
	--e3: 24px;
	--e4: 32px;
	--e5: 48px;
	--e6: 64px;
	--e7: 96px;
	--e8: 128px;

	margin: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
}

.lp4 a {
	color: inherit;
	text-decoration: none;
}
.lp4 p {
	margin: 0;
}
.lp4 :focus-visible {
	outline: 2px solid var(--tinta);
	outline-offset: 3px;
	border-radius: 4px;
}
.lp4 ::selection {
	background: var(--tinta);
	color: var(--fondo);
}

.lp4-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lp4-wrap {
	max-width: var(--ancho);
	margin: 0 auto;
	padding-inline: var(--pad);
}

/* ── Tipografía ───────────────────────────────────────────────────────── */
.lp4-eti {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin: 0 0 var(--e2);
}
.lp4-h1 {
	font-size: clamp(34px, 4.6vw, 62px);
	font-weight: 600;
	line-height: 1.03;
	letter-spacing: -0.04em;
	margin: 0 auto var(--e3);
	max-width: 17ch;
	text-wrap: balance;
	font-kerning: normal;
}
.lp4-h2 {
	font-size: clamp(25px, 2.9vw, 40px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.032em;
	margin: 0 0 var(--e2);
	text-wrap: balance;
	font-kerning: normal;
}
.lp4-lede {
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	color: var(--gris);
	text-wrap: pretty;
}
.lp4-h3 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.016em;
	margin: 0 0 var(--e1);
}
.lp4-p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--gris);
	text-wrap: pretty;
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.lp4-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.lp4-b1,
.lp4-b2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: background-color 180ms ease, border-color 180ms ease;
}
/* ⚠️ Selector de elemento a propósito: `.lp4 a` (0,1,1) le gana a `.lp4-b1`
   (0,1,0). Esa cascada dejó el botón invisible DOS veces en la v5. */
.lp4 a.lp4-b1 {
	background: var(--panel);
	color: var(--fondo);
}
.lp4 a.lp4-b1:hover {
	background: #000;
}
.lp4 a.lp4-b2 {
	border-color: var(--linea-2);
	color: var(--tinta);
}
.lp4 a.lp4-b2:hover {
	border-color: var(--tinta);
}

/* ── Chrome ───────────────────────────────────────────────────────────── */
.lp4 .site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--fondo) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--linea);
}
.lp4-nav {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 14px var(--pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e3);
}
.lp4 .brand {
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.012em;
}
.lp4 .brand-mark {
	display: none;
}
.lp4 .site-nav {
	display: flex;
	align-items: center;
	gap: var(--e3);
}
.lp4 .site-nav a {
	font-size: 13.5px;
	color: var(--gris);
	transition: color 160ms ease;
}
.lp4 .site-nav a:hover {
	color: var(--tinta);
}
.lp4 .site-nav .cta {
	background: var(--panel);
	color: var(--fondo);
	padding: 9px 18px;
	border-radius: 7px;
	font-weight: 500;
}
.lp4 .nav-toggle {
	display: none;
	margin-left: auto;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.lp4 .nav-toggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	margin: 0 auto;
	background: var(--tinta);
	transition: transform 220ms ease, opacity 140ms linear;
}
.lp4 .nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}
.lp4 .nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.lp4 .nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.lp4-hero {
	text-align: center;
	padding: clamp(var(--e5), 6vh, var(--e7)) 0 clamp(var(--e3), 3vh, var(--e4));
}
.lp4-hero .lp4-lede {
	max-width: 54ch;
	margin: 0 auto;
}
.lp4-hero .lp4-btns {
	justify-content: center;
	margin-top: var(--e4);
	margin-bottom: var(--e5);
}
/* ⚠️ Los datos son un <p> con <span> adentro: sin `display: flex` el <p>
   heredaba el `justify-content: center` del contenedor pero no el layout, y
   los cuatro se encimaban con los botones. */
.lp4-datos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Sin `max-width`: lo forzaba a dos filas y la segunda se metía debajo
	   de los botones. Cuatro datos cortos caben en una sola línea a 1240px, y
	   en móvil el `flex-wrap` los apila limpio. */
	gap: var(--e2) var(--e4);
	margin: var(--e4) 0 0;
	font-size: 13px;
	color: var(--gris-2);
}
.lp4-datos b {
	color: var(--tinta);
	font-weight: 500;
}

/* ── El marco del producto ────────────────────────────────────────────
   Un panel oscuro sobre fondo claro. Esta inversión es el sistema entero:
   hace que las capturas —que son oscuras— caigan DENTRO del diseño en vez
   de pegarse encima, y le da a la página textura de aplicación. */
.lp4-marco {
	background: var(--panel);
	border-radius: 14px;
	padding: 8px;
	overflow: hidden;
}
.lp4-marco img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.lp4-hero-shot {
	margin-top: clamp(var(--e4), 4vh, var(--e5));
}
/* El recorte del hero: se ve la parte que trabaja, no la mitad vacía. */
.lp4-hero-shot img {
	max-height: clamp(360px, 52vh, 620px);
	object-fit: cover;
	object-position: top center;
}

/* ── Secciones ────────────────────────────────────────────────────────── */
.lp4-sec {
	padding: clamp(var(--e6), 8vw, 112px) 0;
}
.lp4-sec + .lp4-sec {
	border-top: 1px solid var(--linea);
}
.lp4-cab {
	max-width: 62ch;
	margin-bottom: clamp(var(--e5), 5vw, var(--e6));
}
.lp4-cab-centro {
	text-align: center;
	margin-inline: auto;
}

/* ── Filas de producto ────────────────────────────────────────────────
   REGLA 1: la imagen pesa más que el copy. 0.85 / 1.15 no es capricho —
   es la proporción que hace que el ojo caiga primero en la pantalla. */
.lp4-fila {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(var(--e5), 5vw, var(--e7));
	align-items: center;
}
.lp4-fila + .lp4-fila {
	margin-top: clamp(var(--e6), 7vw, 104px);
}
.lp4-fila-rev .lp4-fila-txt {
	order: 2;
}

/* ── ICONOGRAFÍA SÓLIDA INVERTIDA ─────────────────────────────────────
   REGLA 2. Cuadro negro con glifo blanco. En fondo claro un trazo de 1px a
   20px simplemente desaparece —esa fue la queja literal de Joel— y estos
   cuadros, en una página blanco y negro, SON el sistema en vez de un
   adorno pegado encima. */
.lp4-ico {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--panel);
	margin-bottom: var(--e2);
	flex: none;
}
.lp4-ico svg {
	width: 19px;
	height: 19px;
	color: #fff;
}
.lp4-ico svg path,
.lp4-ico svg rect,
.lp4-ico svg circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Sobre panel oscuro se invierte otra vez. */
.lp4-osc .lp4-ico {
	background: var(--hueso);
}
.lp4-osc .lp4-ico svg {
	color: var(--panel);
}

/* ── Rejilla de features ──────────────────────────────────────────────── */
.lp4-rej {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(var(--e4), 3vw, var(--e5));
}

/* ── Tarjetas ─────────────────────────────────────────────────────────── */
.lp4-tarjeta {
	padding: var(--e3);
	border: 1px solid var(--linea);
	border-radius: 12px;
	background: #fff;
	transition: border-color 180ms ease;
}
a.lp4-tarjeta:hover {
	border-color: var(--tinta);
}
.lp4-tarjeta-link {
	display: inline-block;
	margin-top: var(--e2);
	font-size: 13px;
	font-weight: 500;
}

/* ── La banda oscura ──────────────────────────────────────────────────
   El eco invertido de la banda clara de la v5: aquí la página es clara, así
   que lo excepcional es la oscuridad. UNA sola, y es la de los dos modos —
   porque el argumento de la elección es el corazón de la página. */
.lp4-osc {
	background: var(--panel);
	color: var(--hueso);
}
.lp4-osc .lp4-eti {
	color: var(--gris-2);
}
.lp4-osc .lp4-lede,
.lp4-osc .lp4-p {
	color: var(--hueso-2);
}
.lp4-osc .lp4-tarjeta {
	background: var(--panel-2);
	border-color: var(--linea-osc);
}

/* ── El recibo de la IA ───────────────────────────────────────────────── */
.lp4-prueba {
	margin: var(--e3) 0 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--panel-2);
	border: 1px solid var(--linea-osc);
}
.lp4-prueba img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 230px;
	object-fit: cover;
	object-position: top left;
}

/* ── Métricas ─────────────────────────────────────────────────────────
   Números reales, no adorno: cada uno sale de algo que el producto mide o
   hace. Un dato inventado se cae en cuanto un cliente lo compara. */
.lp4-metricas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(var(--e4), 3vw, var(--e5));
}
.lp4-metrica {
	padding-top: var(--e2);
	border-top: 2px solid var(--tinta);
}
.lp4-osc .lp4-metrica {
	border-top-color: var(--hueso);
}
.lp4-n {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.lp4-u {
	display: block;
	margin-top: var(--e1);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gris-2);
}

/* ── Catálogo ─────────────────────────────────────────────────────────── */
.lp4-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(var(--e4), 3vw, var(--e5));
}
.lp4-cat h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--e2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tinta);
}
.lp4-cat .lp4-ico {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	margin: 0;
}
.lp4-cat .lp4-ico svg {
	width: 14px;
	height: 14px;
}
.lp4-cat ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp4-cat li {
	padding: 9px 0;
	border-bottom: 1px solid var(--linea);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--gris);
}
.lp4-cat li:last-child {
	border-bottom: none;
}

/* ── Precio ───────────────────────────────────────────────────────────── */
.lp4-precio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(var(--e5), 5vw, var(--e7));
	align-items: center;
}
.lp4-cifra {
	font-size: clamp(56px, 8vw, 104px);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.lp4-cifra span {
	display: block;
	margin-top: var(--e2);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--gris);
}
.lp4-incluye {
	list-style: none;
	margin: var(--e4) 0 0;
	padding: 0;
}
.lp4-incluye li {
	padding: 12px 0;
	border-bottom: 1px solid var(--linea);
	font-size: 14.5px;
}
.lp4-incluye li:first-child {
	border-top: 1px solid var(--linea);
}
.lp4-compara {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.lp4-compara caption {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gris-2);
	text-align: left;
	padding-bottom: var(--e2);
}
.lp4-compara th {
	font-weight: 400;
	text-align: left;
	padding: 15px 0;
	color: var(--gris);
	border-bottom: 1px solid var(--linea);
}
.lp4-compara td {
	text-align: right;
	padding: 15px 0;
	color: var(--gris);
	border-bottom: 1px solid var(--linea);
	font-variant-numeric: tabular-nums;
}
.lp4-compara .es-arca th,
.lp4-compara .es-arca td {
	color: var(--tinta);
	font-weight: 600;
	border-bottom-color: var(--tinta);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.lp4-faq {
	max-width: 76ch;
	margin-inline: auto;
}
.lp4-faq-row {
	border-top: 1px solid var(--linea);
}
.lp4-faq-row:last-child {
	border-bottom: 1px solid var(--linea);
}
.lp4-faq-row summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e3);
	list-style: none;
	cursor: pointer;
	padding: 20px 0;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.014em;
}
.lp4-faq-row summary::-webkit-details-marker {
	display: none;
}
.lp4-faq-row summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid var(--gris-2);
	border-bottom: 1.5px solid var(--gris-2);
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform 220ms ease;
}
.lp4-faq-row[open] summary::after {
	transform: rotate(225deg) translate(-3px, -3px);
}
.lp4-faq-row p {
	padding: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--gris);
	max-width: 66ch;
}

/* ── Cierre ───────────────────────────────────────────────────────────── */
.lp4-cierre {
	text-align: center;
	padding: clamp(var(--e7), 10vw, 150px) 0;
	border-top: 1px solid var(--linea);
}
.lp4-cierre h2 {
	font-size: clamp(32px, 4.6vw, 64px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.04em;
	margin: 0 auto var(--e3);
	max-width: 17ch;
	text-wrap: balance;
}
.lp4-cierre .lp4-btns {
	justify-content: center;
}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.lp4 .site-footer {
	border-top: 1px solid var(--linea);
	padding: clamp(var(--e5), 6vw, var(--e6)) var(--pad) var(--e4);
	max-width: var(--ancho);
	margin: 0 auto;
}
.lp4 .footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--e4);
}
.lp4 .footer-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin-bottom: 12px;
}
.lp4 .site-footer a {
	display: block;
	font-size: 13.5px;
	line-height: 2;
	color: var(--gris);
}
.lp4 .site-footer a:hover {
	color: var(--tinta);
}
.lp4 .footer-blurb {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gris);
	max-width: 30ch;
}
.lp4 .footer-base {
	margin-top: var(--e5);
	padding-top: var(--e3);
	border-top: 1px solid var(--linea);
	font-size: 12px;
	color: var(--gris-2);
}

/* ── Avisos ───────────────────────────────────────────────────────────── */
.lp4 .cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: var(--e3);
	padding: var(--e2) var(--pad);
	background: var(--panel);
	color: var(--hueso);
	transform: translateY(120%);
	transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp4 .cookie-banner.show {
	transform: translateY(0);
}
.lp4 .cookie-text {
	flex: 1;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--hueso-2);
}
.lp4 .cookie-text a {
	color: var(--hueso);
	text-decoration: underline;
}
.lp4 .cookie-ok {
	flex: none;
	background: var(--hueso);
	color: var(--panel);
	border: 0;
	border-radius: 7px;
	padding: 10px 18px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

/* ── Aparición ────────────────────────────────────────────────────────
   Igual que en la v5: `reduce` apaga el DESPLAZAMIENTO, no la página. Una
   transición de opacidad no mueve nada y la guía de accesibilidad la
   acepta; matar todo dejaba la página muerta para quien tuviera la
   preferencia prendida — que fue justo lo que le pasó a Joel. */
@media (prefers-reduced-motion: no-preference) {
	.lp4 .lp4-aparece {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 480ms cubic-bezier(0.22, 0.8, 0.3, 1), transform 480ms
			cubic-bezier(0.22, 0.8, 0.3, 1);
		transition-delay: calc(var(--r, 0) * 55ms);
	}
	.lp4 .lp4-aparece.esta {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lp4 .lp4-aparece {
		opacity: 0;
		transform: none;
		transition: opacity 400ms ease;
		transition-delay: calc(var(--r, 0) * 45ms);
	}
	.lp4 .lp4-aparece.esta {
		opacity: 1;
	}
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 880px) {
	.lp4-fila,
	.lp4-precio {
		grid-template-columns: 1fr;
	}
	.lp4-fila-rev .lp4-fila-txt {
		order: 0;
	}
	.lp4-datos {
		gap: var(--e2) var(--e3);
	}
}

@media (max-width: 760px) {
	.lp4 .nav-toggle {
		display: flex;
	}
	.lp4 .site-nav {
		gap: 10px;
	}
	.lp4 .nav-link,
	.lp4 .nav-login {
		display: none;
	}
	.lp4 .site-nav.is-open {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 4px var(--pad) 18px;
		background: var(--fondo);
		border-bottom: 1px solid var(--linea);
	}
	.lp4 .site-nav.is-open .nav-link,
	.lp4 .site-nav.is-open .nav-login {
		display: block;
		font-size: 16px;
		padding: 15px 0;
		border-bottom: 1px solid var(--linea);
		color: var(--tinta);
	}
	.lp4 .site-nav.is-open .cta {
		margin-top: 12px;
		padding: 14px 18px;
		text-align: center;
	}
	body.nav-locked {
		overflow: hidden;
	}
	.lp4-btns .lp4-b1,
	.lp4-btns .lp4-b2 {
		flex: 1 1 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ESCENAS COMPUESTAS
   ═══════════════════════════════════════════════════════════════════════
   La técnica que hace ver bien a Proton, y que no es prueba social ni
   presupuesto: **no enseñan capturas de pantalla, enseñan COMPOSICIONES.**

   Su bloque de rastreadores no es un screenshot: son los logos de LinkedIn,
   Amazon, PayPal y Spotify apilados con una tarjeta encima que dice "Lo
   hemos protegido de 7 rastreadores". Esa pantalla NO existe en su producto
   — la construyeron para explicar el beneficio.

   Las cuatro reglas que se copian de ahí:

   1. COMPONER, NO CAPTURAR. Se toma UNA pieza de la interfaz y se monta;
      no se pega la pantalla entera. Una captura completa obliga al ojo a
      buscar qué mirar; una escena ya decidió qué es lo importante.
   2. UN NÚMERO POR ESCENA. "7 rastreadores", "118 correos". El dato
      concreto es lo que la hace creíble en vez de decorativa.
   3. ROMPER EL RECTÁNGULO. Las piezas se encabalgan y sobresalen del
      contenedor. Es lo que da profundidad SIN sombras falsas ni glow.
   4. TEMPERATURA EN EL FONDO. Ellos usan lila; aquí un gris cálido casi
      imperceptible — suficiente para que la escena no se confunda con el
      fondo de la página, lejos del acento de color.
────────────────────────────────────────────────────────────────────────── */
.lp4-escena {
	position: relative;
	min-height: 340px;
	border-radius: 16px;
	background: linear-gradient(155deg, #f0efec 0%, #f7f6f4 55%, #ebeae7 100%);
	overflow: hidden;
	padding: var(--e4);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Regla 3: la pieza principal se sale por abajo. El corte dice que hay más
   sin tener que enseñarlo. */
.lp4-escena-recorte {
	align-items: flex-end;
	padding-bottom: 0;
}

/* La pieza: una tarjeta de la interfaz, sola sobre el fondo. */
.lp4-pieza {
	background: #fff;
	border: 1px solid rgba(16, 16, 17, 0.07);
	border-radius: 12px;
	box-shadow: 0 18px 40px -22px rgba(16, 16, 17, 0.28);
	padding: var(--e3);
	width: 100%;
	max-width: 400px;
}
.lp4-pieza-oscura {
	background: var(--panel);
	border-color: var(--linea-osc);
	color: var(--hueso);
}

/* Regla 2: el número. Grande, tabular, y con su unidad debajo. */
.lp4-dato-n {
	font-size: clamp(34px, 3.6vw, 46px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.lp4-dato-u {
	display: block;
	margin-top: var(--e1);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gris-2);
}

/* ── Escena 1 · El muro que se vacía ─────────────────────────────────── */
.lp4-muro {
	width: 100%;
	max-width: 420px;
	display: grid;
	gap: 6px;
}
.lp4-muro-fila {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid rgba(16, 16, 17, 0.06);
	border-radius: 8px;
	font-size: 12.5px;
	color: var(--gris);
}
.lp4-muro-fila b {
	color: var(--tinta);
	font-weight: 500;
	flex: none;
}
/* Las de ruido se van atenuando: el ojo lee "esto se archiva solo". */
.lp4-muro-fila[data-n="1"] {
	opacity: 0.72;
}
.lp4-muro-fila[data-n="2"] {
	opacity: 0.5;
}
.lp4-muro-fila[data-n="3"] {
	opacity: 0.3;
}
.lp4-muro-fila[data-n="4"] {
	opacity: 0.15;
}
/* Regla 3: la tarjeta del dato se encabalga sobre el muro. */
.lp4-muro-dato {
	position: absolute;
	right: var(--e4);
	bottom: var(--e5);
	background: var(--panel);
	color: var(--hueso);
	border-radius: 12px;
	padding: var(--e3);
	min-width: 190px;
	box-shadow: 0 22px 44px -20px rgba(16, 16, 17, 0.45);
}
.lp4-muro-dato .lp4-dato-u {
	color: var(--hueso-2);
}

/* ── Escena 2 · El rastreo bloqueado ─────────────────────────────────── */
.lp4-rastro {
	display: flex;
	align-items: center;
	gap: var(--e4);
	width: 100%;
	max-width: 440px;
}
.lp4-rastro-col {
	display: grid;
	gap: 10px;
	flex: none;
}
.lp4-rastro-ping {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid rgba(16, 16, 17, 0.07);
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gris-2);
}
/* Tachado: el pixel de rastreo que no salió. */
.lp4-rastro-ping::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 1px;
	background: var(--gris-3);
	transform: rotate(-38deg);
}
.lp4-rastro-ping {
	position: relative;
}

/* ── La llave de dos mitades ─────────────────────────────────────────
   Ya no es una escena: es la nota al pie del texto de "Arca para
   invitados". La escena de al lado cuenta el VIAJE; esto explica por qué
   nosotros no lo podemos abrir. Son dos ideas y por eso viven separadas.

   El último renglón invierte porque es el único que habla de nosotros —
   y es el que cierra el argumento. */
.lp4-llave {
	margin: var(--e3) 0 0;
	display: grid;
	gap: 1px;
	background: var(--linea);
	border: 1px solid var(--linea);
	border-radius: 10px;
	overflow: hidden;
	max-width: 420px;
}
.lp4-llave > div {
	background: #fff;
	padding: 11px var(--e2);
}
.lp4-llave dt {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--gris-2);
}
.lp4-llave dd {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gris);
}
.lp4-llave dd b {
	font-family: var(--mono);
	font-weight: 500;
	font-size: 12.5px;
	color: var(--tinta);
}
/* ⚠️ Este renglón NO se rellena de negro aunque sea el que remata.
   La escena de al lado ya termina en un bloque negro, y ahí el negro
   significa "llegó a resguardo". Si aquí también, el mismo tratamiento
   diría dos cosas distintas en la misma fila. Se distingue por PESO. */
.lp4-llave-nuestra dd {
	color: var(--tinta);
	font-weight: 500;
}

/* ── El viaje de ida y vuelta ─────────────────────────────────────────
   El argumento más fuerte que la landing no contaba: la RESPUESTA del
   invitado también va protegida. Se cifra en SU navegador con la llave
   pública que Arca publica por WKD y entra por el camino del PGP entrante,
   así que cae en la Bóveda (`lib/portal/responder.ts`).

   Proton no puede hacer esto con alguien que no sea de Proton — su cifrado
   es entre cuentas de Proton.

   Los tres tramos se escalonan a la derecha: el desplazamiento ES el viaje,
   y el último rompe a negro porque es donde el mensaje llega a resguardo. */
.lp4-viaje {
	display: grid;
	gap: var(--e2);
	width: 100%;
	max-width: 420px;
}
.lp4-tramo {
	padding: var(--e2) var(--e3);
	border-radius: 10px;
	background: #fff;
	border: 1px solid rgba(16, 16, 17, 0.07);
}
.lp4-tramo:nth-child(2) {
	margin-left: var(--e4);
}
.lp4-tramo:nth-child(3) {
	margin-left: calc(var(--e4) * 2);
}
.lp4-tramo-k {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin-bottom: 5px;
}
.lp4-tramo-v {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--tinta);
}
.lp4-tramo-fin {
	background: var(--panel);
	border-color: var(--linea-osc);
}
.lp4-tramo-fin .lp4-tramo-k {
	color: var(--hueso-2);
}
.lp4-tramo-fin .lp4-tramo-v {
	color: var(--hueso);
}
@media (max-width: 620px) {
	.lp4-tramo:nth-child(2) {
		margin-left: var(--e2);
	}
	.lp4-tramo:nth-child(3) {
		margin-left: var(--e4);
	}
}

/* ── El ganador de una comparación ────────────────────────────────────
   Si los tres renglones pesan igual, el argumento se queda en la letra y
   hay que LEERLO para entenderlo. Se distingue ATENUANDO a los otros, no
   gritando el propio: el número ya grita solo.

   Con `:has()` para no tener que marcar a los perdedores uno por uno — y
   si un navegador viejo no lo entiende, se ven los tres iguales, que es
   exactamente como se veían antes. Degrada a lo que ya había. */
.lp4-metricas:has(.es-arca) .lp4-metrica:not(.es-arca) {
	opacity: 0.5;
}

/* ── Nota ─────────────────────────────────────────────────────────────
   Prosa que NO es una tarjeta: la letra chiquita que sí se lee en voz
   alta, y lo que no vamos a prometer. Va con filete a la izquierda en
   vez de caja porque no es una feature más de la reja — es una acotación
   al argumento, y tiene que leerse como tal.

   El filete es del acento del modo, así que en la banda oscura se
   invierte solo. */
.lp4-nota {
	border-left: 2px solid var(--tinta);
	padding-left: var(--e3);
	max-width: 68ch;
}
.lp4-nota h3 {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 var(--e2);
}
.lp4-nota p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--gris);
	margin: 0 0 var(--e2);
}
.lp4-nota p:last-child {
	margin-bottom: 0;
}
.lp4-osc .lp4-nota {
	border-left-color: var(--hueso);
}
.lp4-osc .lp4-nota p {
	color: var(--hueso-2);
}

/* ── La tabla de quién puede leer ─────────────────────────────────────
   El renglón honesto —"tu proveedor de correo: sí, Arca también"— es el
   que hace creíbles a los otros tres. Se marca con PESO, no con color:
   pintarlo de rojo lo convertiría en una advertencia, y no lo es. Es un
   hecho que decidimos decir.

   ⚠️ Si algún día alguien "arregla" ese renglón para que diga No, la
   tabla se vuelve el tipo de mentira que este producto existe para no
   decir. Hay guard. */
.lp4-tabla {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--e5);
	font-size: 14px;
}
.lp4-tabla caption {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gris-2);
	padding-bottom: var(--e2);
}
.lp4-tabla th,
.lp4-tabla td {
	padding: 13px var(--e2) 13px 0;
	border-bottom: 1px solid var(--linea);
	text-align: left;
	font-weight: 400;
	color: var(--gris);
}
.lp4-tabla thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tinta);
}
.lp4-tabla tbody th {
	color: var(--tinta);
	font-weight: 500;
}
.lp4-tabla .es-si {
	color: var(--tinta);
	font-weight: 600;
}
.lp4-tabla .es-honesto-fila th,
.lp4-tabla .es-honesto-fila td {
	border-bottom-color: var(--tinta);
}
.lp4-tabla .es-honesto {
	color: var(--tinta);
	font-weight: 600;
}
@media (max-width: 620px) {
	.lp4-tabla {
		font-size: 13px;
	}
	.lp4-tabla th,
	.lp4-tabla td {
		padding-right: var(--e1);
	}
}

/* ── Galería de producto ──────────────────────────────────────────────
   Dos pantallas a la par. Sirven de PAUSA entre dos bloques de argumento
   —el catálogo que viene abajo es denso— y son la única parte de la
   página donde se ve la app tal cual, sin escena de por medio. */
.lp4-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(var(--e3), 2.5vw, var(--e4));
}
.lp4-galeria .lp4-marco {
	margin: 0;
}

/* ── El recorrido del invitado ────────────────────────────────────────
   Portado de v5, donde era de las piezas más fuertes de la página: NO es
   un diagrama de cajitas, son las tres PANTALLAS reales del viaje. El
   argumento es el contraste de MATERIALES — a Gmail le llegó un recibo de
   tres renglones y el documento vive en otra pantalla.

   ⚠️ El asunto del primer paso dice QUIÉN y nunca DE QUÉ. Eso no es copy:
   es la promesa del portal, y hay guard que falla si alguien mete el tema
   del contrato ahí "para que se entienda mejor".

   En v5 estas vistas eran claras sobre negro; aquí van al revés — papel
   sobre el fondo hueso, con el filete haciendo el trabajo que allá hacía
   el contraste. */
.lp4-recorrido {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(var(--e4), 3.5vw, var(--e5));
	margin-top: clamp(var(--e4), 4vw, var(--e6));
}
.lp4-paso-n {
	margin: 0 0 var(--e2);
	padding-top: 14px;
	border-top: 2px solid var(--tinta);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gris-2);
}
.lp4-paso-txt {
	margin: var(--e2) 0 0;
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--gris);
}
.lp4-paso-txt b {
	color: var(--tinta);
	font-weight: 600;
}
.lp4-vista {
	padding: var(--e3);
	border: 1px solid var(--linea);
	border-radius: 10px;
	background: #fff;
	/* Alto reservado: los tres contenidos son de largos muy distintos y sin
	   esto la fila queda escalonada. */
	min-height: 172px;
}
.lp4-vista-de {
	margin: 0 0 var(--e1);
	font-size: 11.5px;
	color: var(--gris-2);
}
.lp4-vista-asunto {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.012em;
	color: var(--tinta);
}
.lp4-vista-cuerpo {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--gris);
}
.lp4-vista-enlace,
.lp4-vista-adj {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--linea);
	font-size: 12px;
	font-family: var(--mono);
	color: var(--tinta);
	overflow-wrap: anywhere;
}
/* La vista del código es la ÚNICA oscura de las tres, y no es decoración:
   es la mitad de la llave que no pasa por Arca. Que se vea distinta es el
   punto. */
.lp4-vista-codigo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background: var(--panel);
	border-color: var(--linea-osc);
}
.lp4-vista-codigo .lp4-vista-de {
	color: var(--hueso-2);
}
.lp4-vista-abierta {
	border-color: var(--tinta);
}
.lp4-codigo {
	margin: var(--e2) 0 0;
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	font-family: var(--mono);
	color: var(--hueso);
	overflow-wrap: anywhere;
}

/* ── Páginas de prosa (legales, cifrado, status) ──────────────────────
   Portado de style.css con su paleta remapeada. Son 5 páginas que NO
   tienen componentes: solo texto largo dentro del andamio. Con esto
   pueden pasar a v6 sin reescribir una línea de su contenido — que es lo
   que uno quiere en documentos legales, donde el texto es el producto.

   Va con alcance `.lp4 ` a propósito: mientras convivan las dos hojas
   durante el rodado, esto no puede pisar a las páginas que siguen en
   style.css. */
.lp4 .legal-page {
	padding: 48px 24px 80px;
}
.lp4 .legal-page article {
	max-width: 720px;
	margin: 0 auto;
}
.lp4 .legal-page h1 {
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
}
.lp4 .legal-page .updated {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--gris-2);
	margin: 8px 0 40px;
}
.lp4 .legal-body {
	font-size: 15px;
	line-height: 1.65;
}
.lp4 .legal-body h2 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 40px 0 12px;
}
.lp4 .legal-body h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 28px 0 8px;
}
.lp4 .legal-body p {
	margin: 0 0 16px;
}
.lp4 .legal-body ul,
.lp4 .legal-body ol {
	margin: 0 0 16px 20px;
	padding: 0;
}
.lp4 .legal-body li {
	margin-bottom: 6px;
}
.lp4 .legal-body a {
	color: var(--tinta);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lp4 .legal-body strong {
	font-weight: 600;
}
.lp4 .legal-body hr {
	border: none;
	border-top: 1px solid var(--linea);
	margin: 48px 0;
}
.lp4 .legal-body code {
	font-family: var(--mono);
	font-size: 13px;
	padding: 1px 4px;
	background: var(--fondo-2);
	border-radius: 3px;
}

/* ── La página de estado ──────────────────────────────────────────────
   Portado de style.css. Se descubrió al convertirla: su JS corría bien
   —mostraba la hora del último ping— pero la página salió SIN ESTILO,
   todo pegado a la izquierda. Sus clases (`status-*`, `dot-live`) no
   tienen prefijo `lp-`, así que el chequeo de "clases viejas" no las vio.

   ⚠️ Es el modo de falla caro de una migración: no truena, solo se ve
   mal. Y en ESTA página, que existe para reportar caídas, verse rota es
   peor que en cualquier otra. */
.lp4 .dot-live {
	width: 6px;
	height: 6px;
	background: #22c55e;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
	animation: pulseDot 2s ease-in-out infinite;
}
.lp4 .status-page {
	padding: 60px 24px 100px;
	max-width: 920px;
	margin: 0 auto;
}
.lp4 .status-hero {
	text-align: center;
	padding: 40px 0 60px;
}
.lp4 .status-hero h1 {
	font-size: clamp(40px, 6vw, 60px);
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 16px 0 12px;
}
.lp4 .status-hero p {
	color: var(--gris-2);
	font-size: 15px;
	margin: 0;
}
.lp4 .status-overall {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	border-radius: 100px;
	color: #22c55e;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
	transition: background 280ms ease, border-color 280ms ease, color 280ms ease;
}
.lp4 .status-overall .dot-live {
	background: #22c55e;
	box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18);
	transition: background 280ms ease, box-shadow 280ms ease;
}
.lp4 .status-overall:has([data-state="degraded"]),
.lp4 .status-overall .dot-live[data-state="degraded"] ~ * {
	/* no-op fallback */
}
.lp4 .dot-live[data-state="degraded"] {
	background: #f59e0b;
	box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18);
}
.lp4 .dot-live[data-state="down"] {
	background: #ef4444;
	box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.2);
}
.lp4 .status-overall:has(.dot-live[data-state="degraded"]) {
	background: rgba(245, 158, 11, 0.1);
	border-color: rgba(245, 158, 11, 0.35);
	color: #f59e0b;
}
.lp4 .status-overall:has(.dot-live[data-state="down"]) {
	background: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.35);
	color: #ef4444;
}
.lp4 .status-row .degraded {
	color: #f59e0b;
	font-weight: 600;
	font-family: var(--mono);
	font-size: 12px;
}
.lp4 .status-row .degraded::before {
	content: "▲ ";
}
.lp4 .status-row .down {
	color: #ef4444;
	font-weight: 600;
	font-family: var(--mono);
	font-size: 12px;
}
.lp4 .status-row .down::before {
	content: "● ";
}
.lp4 .status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 32px;
}
.lp4 .status-card {
	background: var(--fondo-2);
	border: 1px solid var(--linea);
	border-radius: 12px;
	padding: 22px;
}
.lp4 .status-card .label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin-bottom: 8px;
	font-family: var(--mono);
}
.lp4 .status-card .value {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-family: var(--mono);
	color: var(--tinta);
	margin-bottom: 6px;
}
.lp4 .status-card .sub {
	font-size: 12px;
	color: var(--gris-2);
	line-height: 1.4;
}
.lp4 .status-row {
	background: var(--fondo-2);
	border: 1px solid var(--linea);
	border-radius: 10px;
	padding: 16px 20px;
	margin-bottom: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
.lp4 .status-row .name {
	color: var(--tinta);
	font-weight: 500;
}
.lp4 .status-row .ok {
	color: #22c55e;
	font-weight: 600;
	font-family: var(--mono);
	font-size: 12px;
}
.lp4 .status-row .ok::before {
	content: "● ";
}

/* La nota bajo la tabla de quién lee. En v5 no tenía regla y se pintaba del
   mismo tamaño que el cuerpo, compitiendo con la tabla que comenta. Es una
   acotación: va más chica y más callada. */
.lp4-tabla-pie {
	margin: var(--e2) 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--gris-2);
}

/* ── Bloques de código y listas de las páginas de desarrolladores ─────
   ⚠️ Estas clases (`lp-code`, `lp-plain-list`, `lp-checklist`) NUNCA
   tuvieron regla en style.css: los `<pre>` de /jmap/ y /mcp/ llevaban
   tiempo con el estilo por defecto del navegador. No es una regresión del
   rodado a v6 — se descubrió gracias a él, porque el guard exige que toda
   clase usada esté definida.

   Que una página de desarrolladores enseñe comandos sin formato es de las
   cosas que más rápido restan credibilidad ante quien la lee. */
.lp4-code {
	margin: var(--e2) 0;
	padding: var(--e3);
	border: 1px solid var(--linea);
	border-radius: 10px;
	background: var(--panel);
	color: var(--hueso);
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.65;
	/* Los comandos largos se desplazan DENTRO del bloque; la página nunca
	   se va de lado por culpa de un `curl`. */
	overflow-x: auto;
	white-space: pre;
}
.lp4-code code {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
}
.lp4-lista {
	list-style: none;
	margin: var(--e2) 0;
	padding: 0;
}
.lp4-lista li {
	padding: 9px 0;
	border-bottom: 1px solid var(--linea);
	font-size: 14px;
	line-height: 1.55;
	color: var(--gris);
}
/* Una palomita antes de cada renglón, hecha con ::before y no con un SVG
   por renglón: es decoración, y repetir markup por adorno se paga en cada
   edición futura. */
.lp4-checklist {
	list-style: none;
	margin: var(--e2) 0;
	padding: 0;
}
.lp4-checklist li {
	position: relative;
	padding: 7px 0 7px 26px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gris);
}
.lp4-checklist li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 15px;
	width: 9px;
	height: 5px;
	border-left: 1.5px solid var(--tinta);
	border-bottom: 1.5px solid var(--tinta);
	transform: rotate(-45deg);
}

/* ── Pasos numerados ──────────────────────────────────────────────────
   ⚠️ UNA columna, a propósito. Al rodar /jmap/ se mapearon a la reja de
   tarjetas y salieron en dos columnas: el paso 1 a la izquierda, el 2 a la
   derecha, el 3 abajo. Una secuencia no se lee en zigzag — y en una guía
   de "tres pasos y un curl" el orden ES el contenido. */
.lp4-pasos {
	margin: var(--e3) 0 0;
	padding-left: 22px;
	max-width: 70ch;
}
.lp4-pasos li {
	margin-bottom: var(--e3);
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--gris);
}
.lp4-pasos li strong,
.lp4-pasos li b {
	color: var(--tinta);
	font-weight: 600;
}