@font-face {
  font-family: "Courier Prime";
  src: url("/fuentes/courier-prime-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/fuentes/courier-prime-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("/fuentes/archivo-narrow-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("/fuentes/archivo-narrow-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* El mueble */
  --esmalte: oklch(0.37 0.032 165);
  --esmalte-claro: oklch(0.44 0.034 165);
  --esmalte-hondo: oklch(0.25 0.026 165);
  --sombra-cajon: oklch(0.17 0.02 165);
  --laton: oklch(0.78 0.1 85);
  --laton-hondo: oklch(0.55 0.085 80);
  --sobre-esmalte: oklch(0.93 0.025 95);
  --sobre-esmalte-suave: oklch(0.82 0.025 120);

  /* El papel */
  --cartulina: oklch(0.95 0.03 92);
  --cartulina-canto: oklch(0.86 0.04 88);
  --guia: oklch(0.81 0.075 80);
  --guia-canto: oklch(0.68 0.07 75);
  --tinta: oklch(0.25 0.05 265);
  --tinta-suave: oklch(0.42 0.045 265);
  --raya-roja: oklch(0.51 0.17 28);
  --raya-azul: oklch(0.74 0.05 240 / 0.55);

  /* El triplicado */
  --carbon: oklch(0.32 0.11 275);
  --copia-csv: oklch(0.97 0.008 95);
  --copia-json: oklch(0.93 0.09 100);
  --copia-xml: oklch(0.9 0.05 10);

  --letra-datos: "Courier Prime", "Courier New", monospace;
  --letra-rotulo: "Archivo Narrow", "Arial Narrow", sans-serif;

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;

  --radio-papel: 3px;
  --alto-tira: 54px;
  --solape: 7px;

  --salida: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

body {
  margin: 0;
  background: var(--esmalte-hondo);
  color: var(--sobre-esmalte);
  font: 500 1rem/1.5 var(--letra-rotulo);
  accent-color: var(--raya-roja);
}

::selection { background: var(--laton); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 2px;
}

h1, h2, p { margin: 0; }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.saltar {
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: 10;
  padding: var(--e2) var(--e4);
  background: var(--cartulina);
  color: var(--tinta);
}
.saltar:focus { top: var(--e2); }

/* ---------- El frontal del cajón ---------- */

.frontal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  align-items: end;
  padding: var(--e5) clamp(var(--e4), 4vw, var(--e7));
  background: linear-gradient(to bottom, var(--esmalte-claro), var(--esmalte) 30%);
  border-bottom: 1px solid var(--sombra-cajon);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12);
}

.portaetiqueta {
  justify-self: start;
  padding: var(--e1);
  background: linear-gradient(to bottom, var(--laton), var(--laton-hondo));
  border-radius: 2px;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.5);
}
.portaetiqueta h1 {
  padding: var(--e2) var(--e5) 0;
  background: var(--cartulina);
  color: var(--tinta);
  font: 700 clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem)/1 var(--letra-datos);
  letter-spacing: -0.02em;
}
.cuenta {
  padding: 2px var(--e5) var(--e2);
  background: var(--cartulina);
  color: var(--tinta-suave);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.tirador { display: none; }

.busqueda label {
  display: block;
  margin-bottom: var(--e1);
  color: var(--sobre-esmalte-suave);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.busqueda input {
  width: 100%;
  min-height: 44px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--sombra-cajon);
  border-radius: 2px;
  background: var(--cartulina);
  color: var(--tinta);
  font: 400 1.0625rem var(--letra-datos);
}

.llavero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  align-items: center;
}

@media (min-width: 760px) {
  .frontal {
    grid-template-columns: auto minmax(0, 1fr) minmax(200px, 320px) auto;
    gap: var(--e5);
    align-items: center;
  }
  .tirador {
    display: block;
    justify-self: center;
    width: min(100%, 200px);
    height: 18px;
    background: linear-gradient(to bottom, var(--laton), var(--laton-hondo));
    border-radius: 9px 9px 3px 3px;
    box-shadow: 0 4px 5px oklch(0 0 0 / 0.45);
  }
}

/* ---------- Índice alfabético ---------- */

.indice {
  display: flex;
  flex-wrap: wrap;
  padding: var(--e2) clamp(var(--e4), 4vw, var(--e7));
  background: var(--sombra-cajon);
}
.indice a, .indice span {
  flex: 1 0 auto;
  min-width: 30px;
  min-height: 32px;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 2px;
}
.indice a { color: var(--laton); text-decoration: none; }
.indice span { color: oklch(0.52 0.02 165); }
@media (hover: hover) {
  .indice a:hover { background: var(--laton); color: var(--tinta); }
}

/* ---------- Distribución ---------- */

.mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e7);
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--e5) clamp(var(--e3), 4vw, var(--e7)) var(--e7);
}

@media (min-width: 1000px) {
  .mesa {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e7);
    align-items: start;
  }
  .copias {
    position: sticky;
    top: var(--e5);
  }
}

/* ---------- Las fichas ---------- */

.cajon:focus { outline: none; }

#fichas {
  list-style: none;
  margin: 0;
  padding: 0;
  scroll-margin-top: var(--e5);
}

.ficha {
  position: relative;
  margin-top: calc(var(--solape) * -1);
  background: var(--cartulina);
  border-radius: var(--radio-papel) var(--radio-papel) 0 0;
  box-shadow:
    0 -1px 0 var(--cartulina-canto),
    0 -3px 5px oklch(0 0 0 / 0.28);
  color: var(--tinta);
  transition: transform 180ms var(--salida);
  scroll-margin-top: var(--e7);
}
.ficha:nth-child(3n + 1) { translate: 2px 0; }
.ficha:nth-child(3n + 2) { translate: -1px 0; }

.ficha.abierta {
  z-index: 2;
  margin-block: var(--e2) var(--e4);
  border-radius: var(--radio-papel);
  translate: 0 0;
  box-shadow: 0 8px 18px oklch(0 0 0 / 0.5), 0 1px 2px oklch(0 0 0 / 0.4);
}

@media (hover: hover) {
  .ficha:not(.abierta):hover { transform: translateY(-5px); }
}

.tira {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: baseline;
  width: 100%;
  min-height: var(--alto-tira);
  padding: var(--e3) var(--e4);
  border: 0;
  border-bottom: 2px solid var(--raya-roja);
  background: none;
  color: inherit;
  font: 700 1.0625rem/1.25 var(--letra-datos);
  text-align: left;
  cursor: pointer;
}
/* La ficha siguiente tapa el borde inferior: se compensa para que el texto quede centrado */
.ficha:has(+ .ficha:not(.abierta)):not(.abierta) .tira { padding-bottom: calc(var(--e3) + var(--solape)); }
.tira:focus-visible { outline-color: var(--tinta); outline-offset: -4px; }
.tira-nombre {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tira-detalle {
  color: var(--tinta-suave);
  font-weight: 400;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.tira-email { display: none; }

@media (min-width: 620px) {
  .tira { padding-inline: var(--e5); }
  .tira-email { display: inline; }
  .tira-email::after { content: " · "; }
}

.ficha-nueva { margin-top: 0; translate: 0 0; }
.ficha-nueva .tira { color: var(--raya-roja); }
.ficha-nueva .tira-marca { font-size: 1.25rem; line-height: 1; }

/* El cuerpo de la ficha se despliega con grid para no medir alturas */
.pliegue {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 220ms var(--salida), visibility 0s 220ms;
}
.abierta .pliegue {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 220ms var(--salida), visibility 0s;
}
.pliegue > form { overflow: hidden; min-height: 0; }

.renglones {
  padding: var(--e4) var(--e4) var(--e2);
}
@media (min-width: 620px) {
  .renglones { padding-inline: var(--e5); }
}

.renglon {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: var(--e3);
  border-bottom: 1px solid var(--raya-azul);
}
.renglon label {
  color: var(--tinta-suave);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.renglon input {
  width: 100%;
  min-height: 40px;
  padding: var(--e1) 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: 400 1.125rem var(--letra-datos);
}
.renglon input:focus { outline: none; }
.renglon:focus-within { border-bottom: 2px solid var(--tinta); margin-bottom: calc(var(--e3) - 1px); }

@media (min-width: 620px) {
  .renglon {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: baseline;
  }
}

.fallo {
  min-height: 1.5em;
  margin-bottom: var(--e2);
  color: var(--raya-roja);
  font-weight: 700;
}

.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  padding-bottom: var(--e5);
}
.botonera .derecha { margin-left: auto; }

/* El agujero por donde pasa la varilla del fichero */
.agujero {
  width: 18px;
  height: 18px;
  margin: 0 auto var(--e3);
  border-radius: 50%;
  background: var(--esmalte-hondo);
  box-shadow: inset 0 2px 2px oklch(0 0 0 / 0.5);
}

/* Las guías, con la pestaña escalonada según la letra */
.guia {
  position: relative;
  height: 34px;
  margin-top: var(--e2);
  scroll-margin-top: var(--e5);
}
.guia::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 10px;
  background: var(--guia);
  border-radius: 1px 1px 0 0;
  box-shadow: 0 -1px 0 var(--guia-canto);
}
.guia h3 {
  position: absolute;
  bottom: 9px;
  left: calc(var(--paso) * (100% - 56px));
  display: grid;
  place-items: center;
  width: 56px;
  height: 25px;
  margin: 0;
  background: var(--guia);
  color: var(--tinta);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -1px 0 var(--guia-canto);
  font: 700 1rem/1 var(--letra-rotulo);
}

.guia + .ficha { margin-top: 0; }

/* Una ficha recién archivada */
.ficha.recien { animation: golpe 500ms var(--salida); }
@keyframes golpe {
  0% { background: oklch(0.87 0.09 92); transform: translateY(4px); }
  100% { background: var(--cartulina); transform: none; }
}

/* El cajón se abre al llegar */
.entrando .ficha, .entrando .guia {
  animation: asoma 420ms var(--salida) backwards;
  animation-delay: calc(var(--orden, 0) * 45ms);
}
@keyframes asoma {
  from { opacity: 0; transform: translateY(18px); }
}

.vacio {
  padding: var(--e7) var(--e5);
  color: var(--sobre-esmalte);
  font-size: 1.125rem;
  text-align: center;
  border: 1px dashed var(--esmalte-claro);
  margin-top: var(--e3);
}
.vacio button {
  margin-top: var(--e3);
  border-color: var(--sobre-esmalte-suave);
  color: var(--sobre-esmalte);
}

.aviso-cajon { padding: var(--e5); }

.fondo-cajon {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--e4);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--tinta);
  border-radius: 2px;
  background: var(--tinta);
  color: var(--cartulina);
  font: 700 0.9375rem/1.1 var(--letra-rotulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms, color 140ms, transform 100ms;
}
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline-color: var(--raya-roja); }
.boton-claro {
  background: transparent;
  color: var(--tinta);
}
.boton-peligro {
  border-color: var(--raya-roja);
  background: transparent;
  color: var(--raya-roja);
}
.boton-peligro.armado {
  background: var(--raya-roja);
  color: var(--cartulina);
}
.boton[disabled] { opacity: 0.55; cursor: progress; }

@media (hover: hover) {
  .boton:hover { background: var(--tinta-suave); border-color: var(--tinta-suave); color: var(--cartulina); }
  .boton-peligro:hover { background: var(--raya-roja); border-color: var(--raya-roja); }
}

.copias .boton {
  background: var(--laton);
  border-color: var(--laton);
  color: var(--tinta);
}
.copias .boton-claro {
  background: transparent;
  border-color: var(--sobre-esmalte-suave);
  color: var(--sobre-esmalte);
}
#subir:focus-visible + label { outline: 2px solid var(--laton); outline-offset: 2px; }

@media (hover: hover) {
  .copias .boton:hover { background: var(--cartulina); border-color: var(--cartulina); color: var(--tinta); }
}

.enlace {
  min-height: 44px;
  padding: var(--e2);
  border: 0;
  background: none;
  color: var(--sobre-esmalte-suave);
  font: 500 0.9375rem var(--letra-rotulo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace.armado { color: var(--laton); font-weight: 700; }

/* ---------- Las copias al carbón ---------- */

.copias h2 {
  font: 700 clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem)/1.15 var(--letra-datos);
  letter-spacing: -0.01em;
}
.entradilla {
  max-width: 52ch;
  margin-top: var(--e2);
  margin-bottom: var(--e5);
  color: var(--sobre-esmalte-suave);
  text-wrap: pretty;
}

.lengüetas {
  display: flex;
  gap: 2px;
  padding-left: var(--e3);
}
.lengüeta {
  min-width: 72px;
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border: 0;
  border-radius: 4px 4px 0 0;
  color: var(--carbon);
  font: 700 0.9375rem var(--letra-rotulo);
  letter-spacing: 0.08em;
  cursor: pointer;
  transform: translateY(6px);
  transition: transform 160ms var(--salida);
}
.lengüeta[data-formato="csv"] { background: var(--copia-csv); }
.lengüeta[data-formato="json"] { background: var(--copia-json); }
.lengüeta[data-formato="xml"] { background: var(--copia-xml); }
.lengüeta[aria-pressed="true"] { transform: none; position: relative; z-index: 1; }
.lengüeta:focus-visible { outline-offset: -4px; outline-color: var(--carbon); }

.taco { position: relative; }

.hoja {
  position: relative;
  border-radius: 1px;
  box-shadow:
    3px 3px 0 oklch(0.9 0.05 10),
    6px 6px 0 oklch(0.93 0.09 100),
    0 10px 20px oklch(0 0 0 / 0.4);
  transition: background-color 160ms;
}
.hoja[data-formato="csv"] { background: var(--copia-csv); box-shadow: 3px 3px 0 var(--copia-json), 6px 6px 0 var(--copia-xml), 0 10px 20px oklch(0 0 0 / 0.4); }
.hoja[data-formato="json"] { background: var(--copia-json); box-shadow: 3px 3px 0 var(--copia-xml), 6px 6px 0 var(--copia-csv), 0 10px 20px oklch(0 0 0 / 0.4); }
.hoja[data-formato="xml"] { background: var(--copia-xml); box-shadow: 3px 3px 0 var(--copia-csv), 6px 6px 0 var(--copia-json), 0 10px 20px oklch(0 0 0 / 0.4); }

.hoja pre {
  height: clamp(240px, 38vh, 420px);
  margin: 0;
  padding: var(--e4);
  overflow: auto;
  color: var(--carbon);
  font: 400 0.875rem/1.5 var(--letra-datos);
  text-shadow: 0 0 0.6px oklch(0.32 0.11 275 / 0.7);
  tab-size: 2;
}
.hoja pre:focus-visible { outline-color: var(--carbon); outline-offset: -4px; }
.hoja pre.calcando { animation: calco 380ms ease-out; }
@keyframes calco {
  from { opacity: 0.25; }
}

.acciones-copia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
}
.nota {
  margin-top: var(--e2);
  color: var(--sobre-esmalte-suave);
  font-size: 0.875rem;
}
.estado {
  min-height: 1.5em;
  margin-top: var(--e2);
  color: var(--laton);
  font-weight: 700;
}
.estado.mal { color: oklch(0.8 0.1 40); }

/* ---------- Pie ---------- */

.pie {
  display: grid;
  gap: var(--e2);
  padding: var(--e5) clamp(var(--e4), 4vw, var(--e7));
  background: var(--sombra-cajon);
  color: var(--sobre-esmalte-suave);
  font-size: 0.9375rem;
}
.pie p { max-width: 75ch; text-wrap: pretty; }

.pie a { color: inherit; text-underline-offset: 3px; }

.confirmar-carga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--laton);
}
.confirmar-carga[hidden] { display: none; }
.confirmar-carga p { flex-basis: 100%; overflow-wrap: anywhere; }

/* ---------- El archivador cerrado (acceso) ---------- */

[hidden] { display: none !important; }

.acceso {
  min-height: 100dvh;
  /* Cada banda es el frontal de un cajón */
  background:
    repeating-linear-gradient(
      to bottom,
      var(--esmalte-claro) 0,
      var(--esmalte) 28px,
      var(--esmalte) 212px,
      var(--sombra-cajon) 212px,
      var(--sombra-cajon) 220px
    );
}

.acceso-reparto {
  display: grid;
  gap: var(--e6);
  width: min(100%, 1120px);
  margin-inline: auto;
  padding: var(--e6) var(--e4) var(--e7);
}

.acceso-rotulo .portaetiqueta { display: inline-block; }
.acceso-lema {
  max-width: 36ch;
  margin-top: var(--e4);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.35;
  text-wrap: pretty;
}

.acceso-pestanas {
  display: flex;
  gap: 2px;
  padding-left: var(--e3);
}
.acceso-pestana {
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border: 0;
  border-radius: 4px 4px 0 0;
  background: var(--guia);
  color: var(--tinta);
  font: 700 0.9375rem var(--letra-rotulo);
  letter-spacing: 0.06em;
  cursor: pointer;
  transform: translateY(5px);
  transition: transform 160ms var(--salida);
}
.acceso-pestana[aria-pressed="true"] {
  background: var(--cartulina);
  transform: none;
}
.acceso-pestana:focus-visible { outline-color: var(--tinta); outline-offset: -4px; }

.ficha-acceso {
  position: relative;
  padding: var(--e5);
  background: var(--cartulina);
  border-top: 2px solid var(--raya-roja);
  border-radius: 0 0 var(--radio-papel) var(--radio-papel);
  box-shadow: 0 12px 24px oklch(0 0 0 / 0.45);
  color: var(--tinta);
}
.ficha-acceso .boton { width: 100%; }
.acceso-aviso {
  margin-bottom: var(--e3);
  color: var(--tinta-suave);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.acceso-aviso a { color: inherit; text-underline-offset: 3px; }
.acceso-aviso strong { color: var(--tinta); }

.acceso-probar {
  display: block;
  margin: var(--e3) auto 0;
  color: var(--sobre-esmalte);
}

@media (min-width: 620px) {
  .ficha-acceso .renglon { grid-template-columns: 96px minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .acceso-reparto {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--e7);
    align-items: start;
    padding-top: 92px;
  }
  /* El lema va en el segundo cajón, sin cruzar la junta */
  .acceso-lema { margin-top: 58px; }
}

/* ---------- Mi cuenta ---------- */

.dialogo {
  width: min(100% - var(--e5), 540px);
  max-height: calc(100dvh - var(--e5));
  padding: var(--e5);
  border: 0;
  border-top: 2px solid var(--raya-roja);
  border-radius: var(--radio-papel);
  background: var(--cartulina);
  color: var(--tinta);
  box-shadow: 0 16px 32px oklch(0 0 0 / 0.5);
}
.dialogo::backdrop { background: oklch(0.17 0.02 165 / 0.75); }
.dialogo-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--e5);
}
.dialogo h2 {
  font: 700 1.375rem/1.15 var(--letra-datos);
  overflow-wrap: anywhere;
}
.dialogo h3 {
  margin: 0 0 var(--e3);
  font: 700 0.875rem var(--letra-rotulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dialogo form + form {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--raya-azul);
}
.dialogo form p:not(.fallo) { margin-bottom: var(--e3); }
.fallo.correcto { color: var(--tinta); }

/* ---------- Texto legal y ficha perdida ---------- */

.pagina-texto {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--e6) var(--e4) var(--e7);
}
.pagina-texto article {
  padding: var(--e5);
  background: var(--cartulina);
  border-top: 2px solid var(--raya-roja);
  color: var(--tinta);
}
.pagina-texto h1 {
  margin-bottom: var(--e5);
  font: 700 clamp(1.625rem, 1.4rem + 1vw, 2.125rem)/1.1 var(--letra-datos);
}
.pagina-texto h2 {
  margin: var(--e5) 0 var(--e2);
  font: 700 1.0625rem var(--letra-rotulo);
}
.pagina-texto p, .pagina-texto ul { margin: 0 0 var(--e3); max-width: 65ch; text-wrap: pretty; }
.pagina-texto a { color: inherit; text-underline-offset: 3px; }

/* ---------- Ficha perdida (404) ---------- */

.perdida {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--e4);
}
.ficha-perdida {
  width: min(100%, 520px);
  padding: var(--e6);
  background: var(--cartulina);
  border-top: 2px solid var(--raya-roja);
  color: var(--tinta);
}
.ficha-perdida h1 {
  margin-bottom: var(--e3);
  font: 700 1.625rem/1.15 var(--letra-datos);
  text-wrap: balance;
}
.ficha-perdida p { margin-bottom: var(--e5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}