/* ===========================================================================
   RG Gestión — landing
   ---------------------------------------------------------------------------
   Dirección: "papel de comprobante". El producto imprime tickets, remitos y
   facturas todo el día; la página está hecha del mismo material — papel crema
   con grano, tinta negra, un sello vermellón y el verde de los libros contables.
   Nada de degradés violetas: esto se le muestra a un carnicero, no a un fondo.

   Sin build: CSS a mano, fuentes propias. Es una página; meter un bundler
   sería agregarle una pieza que se rompe a algo que no se rompe nunca.
   ======================================================================== */

/* ── Fuentes ─────────────────────────────────────────────────────────────
   Servidas de acá y no de Google: es la primera página que ve un comercio que
   todavía no nos conoce, y no tiene por qué depender de un tercero para
   renderizar — ni contarle a nadie más quién nos visitó. */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/plexmono-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/plexmono-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Sistema ─────────────────────────────────────────────────────────────── */
:root {
	--papel: #f5f0e6;
	--papel-2: #ece4d4;
	--papel-3: #e2d8c4;
	--tinta: #14120f;
	--tinta-2: #57503f;
	--tinta-3: #857c67;
	--sello: #c2401b;
	--sello-claro: #e8592f;
	--verde: #1f5738;
	--linea: #cabf a8;
	--linea: #cabfa8;

	--display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--ancho: 76rem;
	--radio: 2px;
}

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

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

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

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* El grano. Es lo que hace que el fondo sea papel y no un color plano. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.42;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.28'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
	outline: 3px solid var(--sello);
	outline-offset: 3px;
}

.saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--tinta);
	color: var(--papel);
	padding: 0.75rem 1.25rem;
	z-index: 200;
}
.saltar:focus { left: 0.5rem; top: 0.5rem; }

.contenedor {
	width: min(100% - 2.5rem, var(--ancho));
	margin-inline: auto;
}

/* ── Tipografía ──────────────────────────────────────────────────────────── */
h1, h2, h3 {
	font-family: var(--display);
	font-weight: 600;
	font-variation-settings: 'SOFT' 20, 'WONK' 1;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); letter-spacing: -0.01em; }

p { margin: 0 0 1rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.rotulo {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sello);
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.25rem;
}
.rotulo::before {
	content: '';
	width: 1.9rem;
	height: 2px;
	background: var(--sello);
	flex: none;
}

.entrada { color: var(--tinta-2); font-size: 1.0625rem; }

/* ── Perforación ─────────────────────────────────────────────────────────── */
.perforado {
	height: 0;
	border: 0;
	border-top: 2px dashed var(--linea);
	margin: 0;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--texto);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
	padding: 0.9rem 1.5rem;
	border: 2px solid var(--tinta);
	border-radius: var(--radio);
	background: var(--tinta);
	color: var(--papel);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
	box-shadow: 4px 4px 0 var(--tinta-3);
}
.boton:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--sello);
}
.boton:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--sello); }

.boton--fantasma {
	background: transparent;
	color: var(--tinta);
	box-shadow: 4px 4px 0 var(--papel-3);
}
.boton--fantasma:hover { background: var(--papel-2); }

.boton--sello {
	background: var(--sello);
	border-color: var(--sello);
	color: #fff;
}
.boton--sello:hover { box-shadow: 6px 6px 0 var(--tinta); }

/* ── Encabezado ──────────────────────────────────────────────────────────── */
.encabezado {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--papel) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 2px solid var(--tinta);
}
.encabezado__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.85rem 0;
}
.marca {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.32rem;
	letter-spacing: -0.03em;
}
.marca__glifo {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 7px;
	background: var(--tinta);
	color: var(--papel);
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 800;
	flex: none;
}
.nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	font-size: 0.94rem;
	font-weight: 500;
}
.nav a { text-decoration: none; color: var(--tinta-2); transition: color 0.14s ease; }
.nav a:hover { color: var(--sello); }

@media (max-width: 62rem) {
	.nav { display: none; }
}
@media (max-width: 34rem) {
	.encabezado .boton { display: none; }
}

/* ── Portada ─────────────────────────────────────────────────────────────── */
.portada {
	position: relative;
	padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
	overflow: hidden;
}
/* Reglas de cuaderno, apenas visibles: el fondo tiene textura sin gritar. */
.portada::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 2.4rem,
		color-mix(in srgb, var(--linea) 45%, transparent) 2.4rem 2.4rem
	);
	mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
	opacity: 0.5;
}
.portada__grilla {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}
@media (max-width: 60rem) {
	.portada__grilla { grid-template-columns: 1fr; }
}

.portada h1 .destacado {
	color: var(--sello);
	/* La itálica de Fraunces se come el espacio que la sigue. */
	margin-right: 0.12em;
	font-style: italic;
	font-variation-settings: 'SOFT' 60, 'WONK' 1;
}

.portada__bajada {
	font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
	color: var(--tinta-2);
	margin-top: 1.75rem;
	max-width: 46ch;
}

.acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2.25rem;
}

.firma {
	margin-top: 2.5rem;
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--tinta-3);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}
.firma span { display: flex; align-items: center; gap: 0.45rem; }
.firma span::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--verde);
	border-radius: 50%;
}

/* ── El ticket ───────────────────────────────────────────────────────────── */
.ticket {
	position: relative;
	background: #fffdf7;
	border: 2px solid var(--tinta);
	padding: 1.6rem 1.5rem 2.4rem;
	font-family: var(--mono);
	font-size: 0.82rem;
	line-height: 1.75;
	transform: rotate(-1.6deg);
	box-shadow: 10px 12px 0 color-mix(in srgb, var(--tinta) 12%, transparent);
	border-bottom: 0;
}
/* El borde inferior dentado: el papel se cortó de la impresora.
   Con una tira de medialunas del color del fondo, no con mask-composite: esa
   receta depende de -webkit-mask-composite, que interpreta distinto según el
   navegador y dejaba la tarjeta aplastada a una línea. */
.ticket::after {
	content: '';
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: 0;
	height: 12px;
	background: radial-gradient(circle at 6px 12px, transparent 6px, var(--papel) 6.5px) repeat-x;
	background-size: 12px 12px;
}
.ticket__marca {
	text-align: center;
	font-family: var(--display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0.15rem;
}
.ticket__sub {
	text-align: center;
	color: var(--tinta-3);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}
.ticket__linea {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.ticket__linea span:last-child { font-variant-numeric: tabular-nums; }
.ticket__corte {
	border-top: 1px dashed var(--tinta-3);
	margin: 0.9rem 0;
}
.ticket__total {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	font-size: 1rem;
}
.ticket__cae {
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px dashed var(--tinta-3);
	color: var(--tinta-2);
	font-size: 0.72rem;
}
/* El sello: girado, medio corrido, como si lo hubieran apoyado a mano. */
.sello {
	position: absolute;
	right: 0.9rem;
	bottom: 1.1rem;
	transform: rotate(-11deg);
	border: 3px double var(--sello);
	color: var(--sello);
	font-family: var(--mono);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	padding: 0.4rem 0.8rem;
	background: color-mix(in srgb, #fffdf7 70%, transparent);
	opacity: 0.9;
	z-index: 2;
}

/* ── Cinta de rubros ─────────────────────────────────────────────────────── */
.cinta {
	background: var(--tinta);
	color: var(--papel);
	padding: 0.85rem 0;
	overflow: hidden;
	border-block: 2px solid var(--tinta);
}
.cinta__pista {
	display: flex;
	gap: 3rem;
	width: max-content;
	animation: correr 42s linear infinite;
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}
.cinta__pista span { display: flex; align-items: center; gap: 3rem; }
.cinta__pista span::after {
	content: '✳';
	color: var(--sello-claro);
}
@keyframes correr {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cinta__pista { animation: none; }
}

/* ── Secciones ───────────────────────────────────────────────────────────── */
.seccion {
	padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0;
}
.seccion--hueca { background: var(--papel-2); }

.seccion__cabeza {
	max-width: 44rem;
	margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}
.seccion__cabeza p { margin-top: 1.15rem; color: var(--tinta-2); font-size: 1.08rem; }

/* ── Problemas ───────────────────────────────────────────────────────────── */
.problemas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2.5rem 3rem;
}
.problema__num {
	font-family: var(--display);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--papel-3);
	display: block;
	margin-bottom: 0.4rem;
}
.problema h3 { margin-bottom: 0.6rem; }
.problema p { color: var(--tinta-2); font-size: 0.98rem; }

/* ── Módulos ─────────────────────────────────────────────────────────────── */
.modulos {
	display: grid;
	/* Columnas fijas y no auto-fill: son 12 módulos, y 12 entra justo en 4, 3, 2
	   y 1 columna. Con auto-fill quedaban celdas vacías y la grilla mostraba
	   huecos negros del fondo. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border: 2px solid var(--tinta);
	background: var(--tinta);
}
.modulo {
	background: var(--papel);
	padding: 1.6rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	outline: 1px solid var(--tinta);
	transition: background 0.16s ease, color 0.16s ease;
}
.modulo:hover { background: var(--tinta); color: var(--papel); }
.modulo:hover .modulo__code { color: var(--sello-claro); }
.modulo:hover .modulo__texto { color: color-mix(in srgb, var(--papel) 75%, transparent); }
.modulo__code {
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--sello);
	letter-spacing: 0.06em;
}
.modulo__nombre {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.08rem;
	letter-spacing: -0.01em;
}
.modulo__texto { color: var(--tinta-2); font-size: 0.9rem; line-height: 1.5; }

@media (max-width: 68rem) {
	.modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 50rem) {
	.modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
	.modulos { grid-template-columns: 1fr; }
}

/* ── Ediciones ───────────────────────────────────────────────────────────── */
.ediciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.25rem;
}
.edicion {
	background: var(--papel);
	border: 2px solid var(--tinta);
	padding: 1.5rem 1.4rem;
	position: relative;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.edicion:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--tinta); }
.edicion h3 { margin-bottom: 0.35rem; }
.edicion__home {
	font-family: var(--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--verde);
	margin-bottom: 0.9rem;
}
.edicion p { color: var(--tinta-2); font-size: 0.93rem; }

/* ── Plataforma ──────────────────────────────────────────────────────────── */
.plataforma {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem 2.75rem;
}
.dato h3 {
	font-family: var(--mono);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sello);
	margin-bottom: 0.7rem;
}
.dato p { color: var(--tinta-2); font-size: 0.96rem; }

/* ── Planes ──────────────────────────────────────────────────────────────── */
.planes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.25rem;
	align-items: start;
}
.plan {
	border: 2px solid var(--tinta);
	background: var(--papel);
	padding: 1.75rem 1.5rem;
}
.plan--destacado {
	background: var(--tinta);
	color: var(--papel);
	box-shadow: 8px 8px 0 var(--sello);
}
.plan--destacado .plan__lista li::before { color: var(--sello-claro); }
.plan--destacado .plan__nota { color: color-mix(in srgb, var(--papel) 65%, transparent); }
.plan__nombre { font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.plan__nota { color: var(--tinta-2); font-size: 0.9rem; margin: 0.35rem 0 1.35rem; }
.plan__lista { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.55rem; font-size: 0.95rem; }
.plan__lista li { display: flex; gap: 0.65rem; align-items: baseline; }
.plan__lista li::before {
	content: '✓';
	font-family: var(--mono);
	color: var(--verde);
	font-weight: 600;
	flex: none;
}
.plan .boton { width: 100%; justify-content: center; }
.plan--destacado .boton { background: var(--papel); color: var(--tinta); border-color: var(--papel); box-shadow: 4px 4px 0 var(--sello); }

.aviso-precio {
	margin-top: 2rem;
	font-family: var(--mono);
	font-size: 0.8rem;
	color: var(--tinta-2);
	border-left: 3px solid var(--sello);
	padding-left: 1rem;
	max-width: 52ch;
}

/* ── Preguntas ───────────────────────────────────────────────────────────── */
.preguntas { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.pregunta { border-bottom: 2px solid var(--tinta); }
.pregunta summary {
	cursor: pointer;
	list-style: none;
	padding: 1.35rem 0;
	font-family: var(--display);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.28rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
	content: '+';
	font-family: var(--mono);
	color: var(--sello);
	font-size: 1.4rem;
	flex: none;
	transition: transform 0.18s ease;
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta__cuerpo { padding-bottom: 1.5rem; color: var(--tinta-2); }

/* ── Cierre ──────────────────────────────────────────────────────────────── */
.cierre {
	background: var(--tinta);
	color: var(--papel);
	padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0;
	position: relative;
	overflow: hidden;
}
.cierre::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 22px,
		color-mix(in srgb, var(--papel) 4%, transparent) 22px 44px
	);
	pointer-events: none;
}
.cierre__grilla {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem 4rem;
	align-items: end;
}
@media (max-width: 58rem) {
	.cierre__grilla { grid-template-columns: 1fr; }
}
.cierre h2 { max-width: 18ch; }
.cierre p { color: color-mix(in srgb, var(--papel) 72%, transparent); font-size: 1.08rem; }
.cierre .boton--fantasma { color: var(--papel); border-color: var(--papel); box-shadow: 4px 4px 0 var(--sello); }
.cierre .boton--fantasma:hover { background: color-mix(in srgb, var(--papel) 12%, transparent); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie {
	background: var(--tinta);
	color: color-mix(in srgb, var(--papel) 60%, transparent);
	padding: 2.25rem 0;
	border-top: 2px dashed color-mix(in srgb, var(--papel) 25%, transparent);
	font-size: 0.88rem;
}
.pie__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: center;
}
.pie a { color: var(--papel); text-decoration: none; }
.pie a:hover { color: var(--sello-claro); }
.pie__mono { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; }

/* ── Aparición ───────────────────────────────────────────────────────────── */
/* La aparición se opta desde el script (`js-animar` en <html>), no al revés.
   Escondido por defecto significa que cualquier cosa que falle —el script no
   corre, el navegador no tiene IntersectionObserver, un buscador renderiza a
   medias— deja media página en blanco. Al revés, el peor caso es que la página
   se vea entera de una: exactamente lo que queremos que pase. */
.js-animar .aparece {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-animar .aparece.visible { opacity: 1; transform: none; }

/* La portada entra sola, escalonada, sin esperar scroll. */
.entra { animation: subir 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.entra--1 { animation-delay: 0.05s; }
.entra--2 { animation-delay: 0.14s; }
.entra--3 { animation-delay: 0.23s; }
.entra--4 { animation-delay: 0.32s; }
.entra--5 { animation-delay: 0.44s; }
@keyframes subir {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}