/* ===========================================================================
   MARFAN — cascara del lector.
   Una sola hoja para los 24 manuales. El acento lo inyecta el renderizador.

   No renombra nada: los nombres de token de la coleccion siguen siendo los
   buenos. Los nombres que propuso el diseno se agregan como ALIAS, para que
   ambos vocabularios convivan sin tocar los 24 manuales.
   =========================================================================== */

:root {
  /* --- Alias del diseno -> tokens reales de la coleccion --- */
  --font-ui: var(--font-body);
  --fs-100: var(--fs-xs);   --fs-200: var(--fs-sm);   --fs-300: var(--fs-sm);
  --fs-400: var(--fs-base); --fs-500: var(--fs-md);   --fs-600: var(--fs-lg);
  --fs-700: var(--fs-xl);   --fs-800: var(--fs-2xl);  --fs-900: var(--fs-3xl);
  --lh-body: var(--lh-normal);
  --radius-pill: var(--radius-full);
  --elev-1: var(--shadow-card);
  --elev-2: var(--shadow-hover);
  --signal-warning: var(--color-warning);
  --signal-error: var(--color-danger);
  --signal-ok: var(--color-success);

  /* --- Lo que la coleccion no tenia --- */
  --color-paper-sunken: color-mix(in srgb, var(--color-paper) 88%, var(--color-ink));
  --accent-primary-line: color-mix(in srgb, var(--accent-primary) 40%, var(--color-paper));
  --accent-brand: #A8823C;
  --hl-mark: #F6E6A8;
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-entrada: cubic-bezier(.16, 1, .3, 1);
  --sheet-h: 76vh;
}

[data-theme="dark"] { --hl-mark: #5B4E20; }
[data-theme="dark"] .mf-velo { background: rgba(0, 0, 0, .58); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hl-mark: #5B4E20; }
  :root:not([data-theme="light"]) .mf-velo { background: rgba(0, 0, 0, .58); }
}

/* Corte de palabra global: la lista de elementos que trae base.css no cubre
   `b`, `span` ni los titulos del pie de navegacion, y un titulo largo como
   "Grupos Sanguineos y Hemostasia" desbordaba su tarjeta y hacia scrollear la
   pagina entera. Al heredarse, alcanza con declararlo una vez. */
body { overflow-wrap: break-word; }

/* --- Barra superior --------------------------------------------------- */
.mf-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--header-h); padding: 0 var(--space-5);
  background: var(--color-paper-raised);
  border-bottom: 1px solid var(--color-line);
}
.mf-marca {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
  font-size: var(--fs-sm); color: var(--color-ink); text-decoration: none;
}
.mf-ruta {
  min-width: 0; display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mf-ruta b { color: var(--color-ink-soft); font-weight: 600; }
.mf-ruta .mf-punto { color: var(--accent-primary); }
.mf-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.mf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 var(--space-3);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  color: var(--color-ink-soft); background: transparent;
  border: 1px solid var(--color-line); border-radius: var(--radius-full);
  cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.mf-btn:hover { color: var(--color-ink); border-color: var(--color-line-strong); }
.mf-btn[aria-pressed="true"] { color: var(--accent-primary-ink); border-color: var(--accent-primary); background: var(--accent-primary-soft); }
.mf-sello { font-size: 11px; color: var(--color-ink-faint); }

.mf-progreso { position: sticky; top: var(--header-h); z-index: 49; height: 3px; background: var(--color-line); }
.mf-progreso__fill { height: 100%; width: 0; background: var(--accent-primary); transition: width .1s linear; }

/* --- Reticula --------------------------------------------------------- */
.mf-shell {
  display: grid; align-items: start;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: var(--space-7); max-width: var(--max-wide);
  margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-9);
}
.mf-col-lateral, .mf-col-toc {
  position: sticky; top: calc(var(--header-h) + var(--space-5));
  max-height: calc(100vh - var(--header-h) - var(--space-8)); overflow-y: auto;
}
.mf-rotulo {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-ink-faint); margin-bottom: var(--space-3);
}
.mf-col-lateral a, .mf-col-toc a {
  display: block; padding: 5px 0; text-decoration: none;
  color: var(--color-ink-faint); font-size: var(--fs-xs);
}
.mf-col-lateral a { color: var(--color-ink-soft); font-size: var(--fs-sm); }
.mf-col-lateral a:hover, .mf-col-toc a:hover { color: var(--color-ink); }
.mf-col-lateral a[aria-current], .mf-col-toc a.is-active {
  color: var(--accent-primary-ink); font-weight: 600;
}
.mf-col-toc { border-left: 2px solid var(--color-line); padding-left: var(--space-4); }
.mf-col-toc a { border-left: 2px solid transparent; margin-left: -18px; padding-left: 16px; }
.mf-col-toc a.is-active { border-color: var(--accent-primary); }
.mf-cuerpo { min-width: 0; max-width: var(--max-content); }

/* --- Encabezado del capitulo ------------------------------------------ */
.mf-hero { margin-bottom: var(--space-7); }
.mf-hero h1 {
  font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-tight);
  letter-spacing: -.02em; margin: 0 0 var(--space-3);
}
.mf-hero .lead { font-size: var(--fs-md); color: var(--color-ink-soft); line-height: var(--lh-snug); margin: 0; }
.mf-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-ink-faint);
}

/* --- Modo lectura: se va el cromo, queda el texto ---------------------- */
[data-modo="lectura"] .mf-shell { grid-template-columns: minmax(0, 1fr); justify-items: center; }
[data-modo="lectura"] .mf-col-lateral,
[data-modo="lectura"] .mf-col-toc,
[data-modo="lectura"] .mf-meta { display: none; }
[data-modo="lectura"] .mf-cuerpo { max-width: 680px; }

/* --- Hoja de indice: la respuesta al agujero de <1080px --------------- */
.mf-hoja-btn { display: none; }
.mf-hoja {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  max-height: var(--sheet-h); display: flex; flex-direction: column;
  background: var(--color-paper-raised);
  border-top: 1px solid var(--color-line);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);
  transform: translateY(100%); transition: transform var(--dur-3) var(--ease-entrada);
}
.mf-hoja[data-abierta="true"] { transform: none; }
.mf-hoja__asa { width: 38px; height: 4px; border-radius: 2px; background: var(--color-line-strong); margin: 10px auto 4px; cursor: grab; }
.mf-hoja__cab { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 20px; }
.mf-hoja__rotulo { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-faint); }
.mf-hoja__sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-ink-faint); }
.mf-hoja__x { margin-left: auto; width: 34px; height: 34px; border: 1px solid var(--color-line); border-radius: var(--radius-full); background: transparent; color: var(--color-ink-soft); font-size: 13px; cursor: pointer; }

/* --- Píldoras: una sola fila, excluyentes, con el contador adentro --------
   No hay combinatoria a propósito. Y si el contador es 0 la píldora no se
   dibuja: en un capítulo sin tablas hay una píldora menos, no una gris. */
.mf-hoja__pildoras { display: flex; gap: var(--space-2); padding: 0 20px var(--space-3); overflow-x: auto; scrollbar-width: none; }
.mf-hoja__pildoras::-webkit-scrollbar { display: none; }
.mf-pil {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  color: var(--color-ink-soft); background: transparent;
  border: 1px solid var(--color-line); border-radius: var(--radius-full); cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.mf-pil b { font-family: var(--font-mono); font-size: 11px; font-weight: 600; opacity: .75; }
.mf-pil[aria-pressed="true"] { color: var(--color-paper); background: var(--color-ink); border-color: var(--color-ink); }
.mf-pil[hidden] { display: none; }

/* --- Filas: 48px, número mono a la izquierda, minutos a la derecha -------- */
.mf-hoja__lista { overflow-y: auto; padding: 0 20px var(--space-7); -webkit-overflow-scrolling: touch; }
.mf-hoja__fila {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: 48px; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none; color: var(--color-ink);
  transition: opacity var(--dur-2) var(--ease);
}
.mf-hoja__fila:last-child { border-bottom: 0; }
.mf-hoja__num { flex: 0 0 22px; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-faint); padding-top: 2px; }
.mf-hoja__txt { min-width: 0; flex: 1; }
.mf-hoja__tit { display: block; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.mf-hoja__min { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-faint); padding-top: 3px; }

/* Sección actual: filete del acento a sangre, y la única con peso 600. */
.mf-hoja__fila.is-active {
  position: relative; font-weight: 600;
  background: var(--color-paper-alt);
  margin: 0 -20px; padding-left: 20px; padding-right: 20px;
}
.mf-hoja__fila.is-active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-primary);
}
/* Filtrar no reordena: atenúa. Así el índice no cambia de forma bajo el dedo. */
.mf-hoja__fila[data-fuera="si"] { opacity: .38; }

/* --- Chips: máximo dos por fila; el de examen usa el par tinta+dorado ----- */
.mf-hoja__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.mf-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px;
  color: var(--color-ink-soft); background: var(--color-paper-alt);
}
.mf-chip--examen { background: var(--color-ink); color: var(--accent-brand); }
.mf-chip--marca { background: color-mix(in srgb, var(--accent-brand) 12%, transparent); color: var(--accent-brand); }

.mf-hoja__pie {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 20px calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 11px;
}
.mf-hoja__pie a { color: var(--color-ink-soft); text-decoration: none; }
.mf-velo {
  position: fixed; inset: 0; z-index: 59; background: rgba(22, 19, 15, .42);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease);
}
.mf-velo[data-abierta="true"] { opacity: 1; pointer-events: auto; }

@media (max-width: 1080px) {
  .mf-shell { grid-template-columns: minmax(0, 1fr); padding: var(--space-5) var(--space-4) var(--space-9); }
  .mf-col-lateral, .mf-col-toc { display: none; }
  .mf-hoja-btn { display: inline-flex; }
  .mf-cuerpo { max-width: 100%; }
  .mf-sello { display: none; }
}
/* En el telefono la cabecera no da para cuatro controles: se queda con los dos
   que sirven mientras leés —el índice y el tema—. Buscar y Marcas siguen a un
   toque, desde la marca MARFAN. Sin esto la barra desbordaba 93px. */
@media (max-width: 720px) {
  .mf-acciones a.mf-btn { display: none; }
  .mf-header { padding: 0 var(--space-4); gap: var(--space-3); }
  .mf-ruta { flex: 1 1 auto; }
}
@media (min-width: 1081px) { .mf-hoja, .mf-velo { display: none; } }

/* ---------------------------------------------------------------------------
   Callout: mismo defecto que tenian las checklists.
   En la coleccion, `.callout` es `display:flex` para poner el icono al lado del
   texto. Pero si el callout trae varios parrafos y ningun icono, cada parrafo
   se vuelve una columna flex y el texto se dibuja en tiras angostas que se
   salen de la caja. Pasa en 201 callouts de 134 capitulos.
   Solucion: bloque por defecto; flex solo cuando hay icono, y ahi el contenido
   ocupa una fila entera.
   --------------------------------------------------------------------------- */
.callout { display: block; }
.callout:has(> .callout__icon) { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.callout:has(> .callout__icon) > :not(.callout__icon) { flex: 1 1 0; min-width: 0; }
.callout:has(> .callout__icon) > :not(.callout__icon) ~ :not(.callout__icon) { flex-basis: 100%; }

/* ===========================================================================
   TABLAS — los tres patrones, deducidos por el renderizador.
   Ninguno usa JavaScript.
   =========================================================================== */

/* 1 · simple (<=3 columnas): el 83% de la coleccion. No hace falta nada. */

/* 2 · congelada (4+ columnas): primera columna fija, el resto se desliza. */
@media (max-width: 720px) {
  .table-wrap[data-tabla="congelada"] { overflow-x: auto; scroll-snap-type: x proximity; }
  .table-wrap[data-tabla="congelada"] th:first-child,
  .table-wrap[data-tabla="congelada"] td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--color-paper-raised);
    border-right: 2px solid var(--color-line-strong);
  }
  .table-wrap[data-tabla="congelada"] thead th { scroll-snap-align: start; }
}

/* 3 · ficha (5+ columnas): cada fila pasa a ser una tarjeta con etiquetas.
      El renderizador copia el encabezado de columna a cada celda (data-etiqueta). */
@media (max-width: 720px) {
  .table-wrap[data-tabla="ficha"] { overflow: visible; border: 0; box-shadow: none; background: none; }
  .table-wrap[data-tabla="ficha"] table,
  .table-wrap[data-tabla="ficha"] tbody,
  .table-wrap[data-tabla="ficha"] tr,
  .table-wrap[data-tabla="ficha"] td { display: block; width: auto; }
  .table-wrap[data-tabla="ficha"] thead { display: none; }
  .table-wrap[data-tabla="ficha"] tr {
    background: var(--color-paper-raised);
    border: 1px solid var(--color-line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  }
  .table-wrap[data-tabla="ficha"] td {
    border: 0; padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-line);
  }
  .table-wrap[data-tabla="ficha"] tr td:first-child {
    font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700;
    color: var(--accent-primary-ink); padding-top: 0;
  }
  .table-wrap[data-tabla="ficha"] tr td:last-child { border-bottom: 0; padding-bottom: 0; }
  .table-wrap[data-tabla="ficha"] td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block; margin-bottom: 2px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-ink-faint);
  }
  .table-wrap[data-tabla="ficha"] tr td:first-child[data-etiqueta]::before { content: none; }
}

/* --- Pie de navegacion ------------------------------------------------- */
.mf-pie {
  display: flex; gap: var(--space-4); margin-top: var(--space-8);
  padding-top: var(--space-6); border-top: 1px solid var(--color-line);
}
.mf-pie a {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: var(--space-4); text-decoration: none;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  transition: border-color var(--dur-1) var(--ease);
}
.mf-pie a:hover { border-color: var(--accent-primary); }
.mf-pie small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-faint); }
.mf-pie b { font-family: var(--font-display); font-size: var(--fs-base); color: var(--color-ink); font-weight: 600; }
.mf-pie a:last-child { text-align: right; }

.mf-sello-pie {
  margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-xs); color: var(--color-ink-faint); text-align: center;
}

/* ===========================================================================
   LÁMINA 1c — el capítulo: ritmo vertical y jerarquía de bloques.

   El diagnóstico del diseño era correcto: hoy el h2 y el cuerpo pesan casi
   igual y el capítulo se lee como un rollo. Se arregla con dos cosas, una
   escala de tres pasos y una sola unidad de separación.
   =========================================================================== */

.mf-cuerpo { --ritmo: 22px; }

/* --- Escala: 31 → 21 → 17. Es toda la que hace falta en 375. ------------- */
.mf-hero h1 { font-size: 31px; line-height: 1.06; }
.mf-cuerpo article h2 {
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.01em;
  margin: calc(var(--ritmo) * 2) 0 var(--ritmo);
  padding-top: var(--ritmo); border-top: 1px solid var(--color-line);
  border-bottom: 0; padding-bottom: 0;
  scroll-margin-top: calc(var(--header-h) + var(--ritmo));
}
.mf-cuerpo article > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mf-cuerpo article h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: var(--ritmo) 0 8px; }
.mf-cuerpo article p,
.mf-cuerpo article li { font-size: 17px; line-height: var(--lh-body); }

/* --- Una sola unidad: 22px. Nada de 12/18/24 mezclados. ------------------ */
.mf-cuerpo article > * { margin-top: var(--ritmo); margin-bottom: var(--ritmo); }
.mf-cuerpo article > p { margin-top: 0; }
.mf-cuerpo article > p + p { margin-top: var(--ritmo); }
.mf-cuerpo article > ul,
.mf-cuerpo article > ol { margin: var(--ritmo) 0; padding-left: 22px; }

/* --- Jerarquía de bloques -------------------------------------------------
   examen  = el único relleno oscuro, con rótulo dorado de marca. No usa el
             acento del manual a propósito: el examen es MARFAN, no la materia.
   perla/tip = los únicos teñidos con el acento del manual.
   los otros = filete de 3px y rótulo mono, sin fondo.
   -------------------------------------------------------------------------- */
.mf-rot-bloque {
  margin: 0 0 8px !important;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-faint);
}

.mf-cuerpo article .callout {
  margin: var(--ritmo) 0; padding: var(--space-4) var(--space-5);
  background: transparent; border: 0; border-left: 3px solid var(--color-line-strong);
  border-radius: 0;
}
.mf-cuerpo article .callout p:last-child { margin-bottom: 0; }

.mf-cuerpo article .callout--exam,
.mf-cuerpo article .callout--examen {
  background: var(--color-ink); border-left: 0; border-radius: var(--radius-md);
  padding: var(--space-5);
}
.mf-cuerpo article .callout--exam *,
.mf-cuerpo article .callout--examen * { color: var(--color-paper); }
.mf-cuerpo article .callout--exam .mf-rot-bloque,
.mf-cuerpo article .callout--examen .mf-rot-bloque { color: var(--accent-brand) !important; }

.mf-cuerpo article .callout--perla,
.mf-cuerpo article .callout--tip {
  background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mf-cuerpo article .callout--perla .mf-rot-bloque,
.mf-cuerpo article .callout--tip .mf-rot-bloque { color: var(--accent-primary-ink); }

.mf-cuerpo article .callout--error { border-left-color: var(--color-danger); }
.mf-cuerpo article .callout--error .mf-rot-bloque { color: var(--color-danger); }
.mf-cuerpo article .callout--warning { border-left-color: var(--color-warning); }
.mf-cuerpo article .callout--warning .mf-rot-bloque { color: var(--color-warning); }

/* En oscuro el examen no puede seguir siendo "el oscuro" sobre papel oscuro:
   se vuelve el plano más hundido, con borde, y sigue rompiendo la página. */
[data-theme="dark"] .mf-cuerpo article .callout--exam,
[data-theme="dark"] .mf-cuerpo article .callout--examen {
  background: #000; border: 1px solid #3A2F17;
}
[data-theme="dark"] .mf-cuerpo article .callout--perla,
[data-theme="dark"] .mf-cuerpo article .callout--tip {
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mf-cuerpo article .callout--exam,
  :root:not([data-theme="light"]) .mf-cuerpo article .callout--examen {
    background: #000; border: 1px solid #3A2F17;
  }
  :root:not([data-theme="light"]) .mf-cuerpo article .callout--perla,
  :root:not([data-theme="light"]) .mf-cuerpo article .callout--tip {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  }
}

/* --- Barra inferior: no existía. Es lo que se pregunta a las 23:40. ------ */
.mf-pieval { display: none; }
@media (max-width: 1080px) {
  .mf-pieval {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    display: flex; align-items: center; gap: var(--space-4);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 20px env(safe-area-inset-bottom, 0px);
    background: var(--color-paper-raised);
    border-top: 1px solid var(--color-line);
    font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-soft);
  }
  .mf-pieval__min { color: var(--color-ink-faint); }
  .mf-pieval__nav { margin-left: auto; display: flex; gap: var(--space-4); font-size: 20px; }
  .mf-pieval__nav a { color: var(--color-ink); text-decoration: none; }
  .mf-pieval__nav span { color: var(--color-line-strong); }
  /* el capítulo no puede quedar debajo de la barra */
  .mf-shell { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  [data-modo="lectura"] .mf-pieval { display: none; }
}

/* --- Medida de lectura por ancho ---------------------------------------- */
@media (min-width: 721px) and (max-width: 1080px) {
  .mf-cuerpo { max-width: 640px; margin: 0 auto; }
}
@media (min-width: 1081px) {
  .mf-cuerpo { max-width: 680px; }
}

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