/* ===================================================================
   EL MOSAICO — catálogo por categorías de Office Mochis
   Móvil primero. Sin framework. Usa los tokens de /tokens/*.css.

   Principio: el cliente NUNCA escribe nada. Reconoce por imagen y toca.
   Las 15 categorías se ven de golpe en un mosaico donde el TAMAÑO de cada
   ficha refleja cuántas hojas tiene, así que de un vistazo sabe dónde hay
   material. Cambiar de sección desde dentro es un toque: el mosaico sube
   como panel y ya está en el DOM, así que no descarga nada.
   =================================================================== */

/* ===== Mosaico de categorías ===== */
.mos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mos-item { margin: 0; display: flex; }

/* El tamaño codifica el volumen. Es el dato más útil de la pantalla y no
   cuesta ni un byte: se ve, no se lee. */
.mos-item.is-xl { grid-column: span 2; }
.mos-item.is-l  { grid-column: span 1; }

.mos-a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 132px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--om-gray-100);
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out);
}
.is-xl .mos-a { min-height: 190px; }

.mos-a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Degradado propio, no filtro sobre la imagen: mantiene el producto nítido
   arriba y garantiza contraste del texto abajo. */
.mos-a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(29,39,87,0) 38%, rgba(29,39,87,.86) 100%);
}
.mos-txt { padding: 10px 12px 11px; color: #fff; }
.mos-nom {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.is-xl .mos-nom { font-size: 20px; }
.mos-n {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--om-orange-300);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mos-a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== Cabecera de sección ===== */
.sec-cab { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
/* Era un enlace naranja a secas y se perdía contra la cabecera. Ahora es una
   píldora con borde: se lee como control, no como texto de adorno. */
.sec-vuelta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start; text-decoration: none;
  min-height: 44px; padding: 0 16px 0 12px;   /* objetivo táctil, no solo texto */
  border: 2px solid var(--om-navy-900); border-radius: var(--radius-pill);
  background: #fff; color: var(--om-navy-900);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.03em;
}
.sec-vuelta .icon { transform: rotate(180deg); color: var(--om-orange-600); }
.sec-vuelta:hover { background: var(--om-navy-900); color: #fff; }
.sec-vuelta:hover .icon { color: var(--om-orange-300); }
.sec-vuelta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sec-cab h1 {
  text-transform: uppercase; font-weight: 800; line-height: 1.1;
  font-size: var(--text-3xl); color: var(--om-navy-900); letter-spacing: -0.015em;
}
.sec-sub { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }

/* ===== Hojas ===== */
.hojas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }

/* La apertura ocupa el ancho completo y se sirve a 800px: es la única que
   tiene que LEERSE. Las estampillas solo dicen si vale la pena seguir. */
.hoja.is-abre { grid-column: 1 / -1; }

.hoja { margin: 0; display: flex; flex-direction: column; }
.hoja-a {
  display: block; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--om-gray-200); background: var(--om-gray-25);
  line-height: 0;
}
.hoja-a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* La proporción la lleva el CONTENEDOR y la imagen se ajusta dentro con
   contain: así conviven las 4 proporciones del catálogo sin recortar nada
   (son páginas maquetadas: cover destruiría la maqueta) y el CLS es 0. */
.hoja-a img { width: 100%; height: auto; display: block; }

.hoja-pie { padding: 7px 2px 0; }
.hoja-fam {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--om-orange-700);
}
/* ===== Las fichas: cada artículo, con su nombre y su enlace =====
   Regla de tinta: verde SÓLIDO arriba y poco; verde de CONTORNO abajo y mucho.
   La misma acción con una décima parte de tinta, para que 189 fichas no sean
   una alfombra verde. */
.fichas {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 5px 0 0; padding: 0; list-style: none;
}
.fichas > li { margin: 0; }

.clave, .clave-b {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 0 10px 0 8px;   /* 36 + gap 4 = objetivo táctil */
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; text-decoration: none;
  /* Monoespaciada del SISTEMA, no Nunito Sans. Un bloque de 14 píldoras que
     envuelven es hipersensible al font-display:swap: cambia el ancho de cada
     una, cambia el número de filas y se mueve la página entera. Con 4 fichas
     no se notaba; con 213 sí. Y un código se lee mejor en monoespaciada. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
/* El icono deja de ser dos nodos del DOM por ficha: en Sillería son 438 nodos
   y 15 KB menos. El SVG va incrustado en el CSS, que ya se descarga. */
.clave::before, .clave-b::before {
  content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
  --wa: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 5 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3zM12 2a10 10 0 00-8.5 15.3L2 22l4.8-1.5A10 10 0 1012 2z"/></svg>');
  -webkit-mask: var(--wa) center/contain no-repeat;
          mask: var(--wa) center/contain no-repeat;
}
/* Un nombre de modelo no es un código: va en la tipografía de titulares, que
   además está precargada, así que tampoco provoca reflujo. */
.es-modelo { font-family: var(--font-display); letter-spacing: 0.02em; }

.clave { background: var(--om-whatsapp); color: var(--text-on-brand); }
.clave:hover, .clave:active { background: var(--om-whatsapp-hover); color: var(--text-on-brand); }

.clave-b {
  background: #fff; color: var(--om-navy-900);
  box-shadow: inset 0 0 0 1.5px var(--om-whatsapp-dark);
}
.clave-b::before { color: var(--om-whatsapp-dark); }
.clave-b:hover, .clave-b:active { background: var(--om-whatsapp); color: var(--text-on-brand); }
.clave-b:hover::before, .clave-b:active::before { color: var(--text-on-brand); }

.clave:focus-visible, .clave-b:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== Nivel 2: el resto de la sección =====
   Va dentro de un <details> cerrado y sus miniaturas llevan loading="lazy":
   el navegador no descarga ni una hasta que alguien lo abre. Cuesta 0 KB de
   entrada, y evita que la sección prometa 31 artículos y enseñe 6. */
/* El botón se PEGA arriba, pero SOLO con la lista abierta: al desplegar 62
   hojas, un botón que se queda al principio obliga a subir toda la lista para
   cerrarla. Cerrado no se pega, así no gasta pantalla cuando no hace falta.

   Dos cosas que estaban mal en la primera versión:
   - `z-index: 20` no protegía nada. `.site-header` es sticky con z-index 60 y
     entre medias no hay ningún contexto de apilamiento (.section es relative
     con z-index auto), así que competían en la raíz y ganaba siempre la
     cabecera: al pegarse, el botón se metía debajo.
   - `--cab: 102px` se quedaba corto. La altura real es topbar (8+8 de padding
     + 24 de caja de línea = 40) + navbar (12+12 + logo 40 + 1 de borde = 65)
     = 105, y 113 a partir de 640px, donde el logo pasa a 48. */
.mas { margin-top: 26px; --cab: 105px; }
.mas[open] .mas-btn { position: sticky; top: var(--cab); z-index: 61; }
.mas-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 20px; cursor: pointer;
  border: 0; border-radius: var(--radius-pill);
  background: var(--om-navy-900); color: #fff;
  box-shadow: 0 6px 18px rgba(29, 39, 87, 0.28);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.03em;
  text-align: center; list-style: none;
}
.mas-btn::-webkit-details-marker { display: none; }
.mas-btn::after {
  content: ""; width: 10px; height: 10px; flex: none;
  border-right: 3px solid var(--om-orange-500);
  border-bottom: 3px solid var(--om-orange-500);
  transform: translateY(-3px) rotate(45deg);
}
.mas[open] .mas-btn { background: var(--om-orange-500); color: var(--text-on-brand);
                      box-shadow: 0 6px 18px rgba(245, 130, 31, 0.34); }
.mas[open] .mas-btn::after { border-color: var(--text-on-brand); transform: translateY(3px) rotate(225deg); }
.mas-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* El rótulo cambia al abrir: "ocultar" dice qué hace el botón ahora, no qué
   hizo hace un momento. */
.mas[open] .mas-abrir, .mas:not([open]) .mas-cerrar { display: none; }

/* El segundo <details>: las hojas de ambiente, que no traen clave nueva. Va
   como acción secundaria para que no compita con la principal. */
.mas-2 { margin-top: 14px; }
.mas-btn-2 {
  background: #fff; color: var(--om-navy-900);
  box-shadow: inset 0 0 0 2px var(--om-navy-900);
}
.mas-btn-2::after { border-color: var(--om-navy-900); }
.mas-nota { margin: 14px 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }

/* Misma rejilla que las hojas de arriba: 2 / 3 / 4. Si el resto se maquetara
   distinto, el salto al abrir se leería como otra página.
   `align-items: start` es obligatorio ahora que las tarjetas tienen alturas
   distintas —una con 1 ficha, otra con 11—: sin él la fila se estira a la más
   alta. Por eso el borde se muda de la tarjeta a la imagen: así el hueco
   sobrante no dibuja una caja vacía. */
.mas-rej {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px;
  align-items: start;
}
.mas-h { display: block; }
.mas-img {
  display: block; line-height: 0; overflow: hidden;
  border: 1px solid var(--om-gray-200); border-radius: var(--radius-md);
  background: var(--om-gray-25);
}
.mas-img:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mas-img img { width: 100%; height: auto; display: block; }
/* La hoja sin clave impresa tampoco es un callejón sin salida. */
.mas-hoja {
  display: inline-block; margin-top: 5px; padding: 2px 0;
  font-size: 11px; font-weight: 700; color: var(--text-muted); text-decoration: none;
}
.mas-hoja:hover { color: var(--om-navy-900); }
.mas-hoja:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== Barra inferior: cambiar de sección en un toque ===== */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--om-navy-900);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.dock-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 48px;
  background: var(--om-orange-500); color: var(--text-on-brand); border: 0;
  border-radius: var(--radius-pill);
  font: 800 15px/1 var(--font-display); letter-spacing: 0.02em;
  cursor: pointer;
}
.dock-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Sin JS el botón es un enlace normal al índice: nadie se queda encerrado. */

/* ===== Panel del mosaico (solo con JS) ===== */
.panel { border: 0; padding: 0; max-width: 100%; max-height: 100%; }
.panel::backdrop { background: rgba(15,23,42,.72); }
.panel[open] { display: flex; flex-direction: column; }
.panel-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--om-gray-200);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.panel-cab b { font: 800 16px/1 var(--font-display); color: var(--om-navy-900); }
.panel-x {
  min-width: 44px; min-height: 44px; border: 0; background: var(--om-gray-100);
  border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--om-navy-900);
}
.panel-cuerpo { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); overflow: auto; }
.panel .mos-a { min-height: 104px; }
.panel .is-xl .mos-a { min-height: 132px; }
.panel .mos-nom, .panel .is-xl .mos-nom { font-size: 14px; }
html:has(.panel[open]) { overflow: hidden; }

/* deja sitio a la barra fija para que no tape el pie */
body.cat-page { padding-bottom: 76px; }
/* con la barra puesta sobraría un segundo botón verde flotante */
body.cat-page .wa-fab { display: none; }

/* ===== Escritorio ===== */
@media (min-width: 640px) {
  .mos { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .mos-item.is-xl { grid-column: span 2; grid-row: span 2; }
  .mos-a, .is-xl .mos-a { min-height: 150px; }
  .is-xl .mos-a { min-height: 312px; }
  .hojas { grid-template-columns: repeat(3, 1fr); }
  .hoja.is-abre { grid-column: span 2; }
  .mas-rej { grid-template-columns: repeat(3, 1fr); }
  .mas { --cab: 113px; }        /* el logo crece a 48 px a partir de aquí */
}
@media (min-width: 1000px) {
  .mos { grid-template-columns: repeat(5, 1fr); }
  .hojas { grid-template-columns: repeat(4, 1fr); }
  .mas-rej { grid-template-columns: repeat(4, 1fr); }
  /* en pantalla grande el mosaico cabe entero: la barra fija sobra */
  .dock { display: none; }
  body.cat-page { padding-bottom: 0; }
}

/* ===== El mosaico de la home =====
   Son SEIS fichas, no quince, y heredaba la rejilla del hub. Con 3 grandes y 3
   normales el auto-placement dejaba celdas vacías: una a 2 columnas, tres a 4
   y cinco a 5. Aquí todas miden igual —el volumen lo sigue diciendo el número
   de artículos, que va escrito en cada una— y la rejilla siempre cierra.
   Va al final a propósito: tiene que ganar a los `span 2` de los breakpoints. */
.mos-home .mos-item.is-xl,
.mos-home .mos-item.is-l { grid-column: span 1; grid-row: span 1; }
.mos-home .is-xl .mos-a { min-height: 132px; }
.mos-home .is-xl .mos-nom { font-size: 15px; }
@media (min-width: 640px) {
  .mos-home { grid-template-columns: repeat(3, 1fr); }
  .mos-home .mos-a, .mos-home .is-xl .mos-a { min-height: 170px; }
  .mos-home .is-xl .mos-nom { font-size: 17px; }
}
@media (min-width: 1000px) {
  .mos-home { grid-template-columns: repeat(6, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mos-a { transition: none; }
}
@media (hover: hover) {
  .mos-a:hover { transform: translateY(-2px); }
}

/* ===== Visor hojeable de la home (bloque #catalogo, lo genera generar.py;
   lo hidrata /visor.js). Es el CSS del flipbook ORIGINAL (tag
   visor-pdf-original) con dos añadidos: las pestañas por categoría y el
   recorte de pliegos apaisados (la misma imagen 1600x900 parte en página
   izquierda y derecha del libro: una sola descarga por pliego). ===== */
.fb-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 10px; mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.fb-tabs::-webkit-scrollbar { display: none; }
.fb-tab { flex: 0 0 auto; appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 13px 7px; font: 600 14px/1.2 var(--font-display); color: rgba(255, 255, 255, .72); cursor: pointer; white-space: nowrap; }
.fb-tab:hover { color: #fff; }
.fb-tab:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
.fb-tab.is-active { color: #fff; border-bottom-color: var(--om-orange-500); }

.fb {
  width: 100%; border-radius: var(--radius-xl); outline: none; position: relative; overflow: hidden;
  display: flex; flex-direction: column; user-select: none; -webkit-user-select: none;
  background: transparent;
}
.fb:focus-visible { box-shadow: var(--focus-ring); }
.fb-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 4px; color: #fff; flex-wrap: wrap; }
.fb-toolbar > b { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.fb-toolbar > .icon { color: var(--om-orange-500); flex: none; }
.fb-counter { font-size: 14.5px; opacity: 0.75; }
.fb-fullscreen {
  margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; flex: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.fb-fullscreen:hover, .fb-fullscreen:active { background: rgba(255,255,255,0.26); }
.fb-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 0; padding: 0 4px; }
.fb-nav {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--om-orange-500); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-card); flex: none; transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.fb-nav:hover:not(:disabled), .fb-nav:active:not(:disabled) { background: var(--om-orange-600); }
.fb-nav:disabled { opacity: 0.35; cursor: default; }
.fb-book-wrap { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.fb-sliderrow { display: flex; align-items: center; gap: 14px; padding: 12px 6px 6px; }
.fb-sliderrow > span { color: rgba(255,255,255,0.7); font-size: 13.5px; flex: none; }
.fb-sliderrow input[type=range] { flex: 1; accent-color: var(--om-orange-500); height: 30px; cursor: pointer; min-width: 0; }

/* Libro 3D (pantallas >=760px; visor.js decide el modo) */
.fb-book { position: relative; perspective: 2600px; }
.fb-book-shadow { position: absolute; left: 4%; right: 4%; bottom: -16px; height: 40px; background: rgba(8,12,34,0.5); filter: blur(22px); border-radius: 50%; }
.fb-base { position: absolute; top: 0; width: 50%; height: 100%; background: #F4F2EE; transition: opacity 300ms var(--ease-out); }
.fb-base-left { left: 0; border-radius: 6px 0 0 6px; box-shadow: inset -14px 0 24px -14px rgba(0,0,0,0.32); }
.fb-base-right { right: 0; border-radius: 0 6px 6px 0; box-shadow: inset 14px 0 24px -14px rgba(0,0,0,0.32); }
.fb-leaf {
  position: absolute; left: 50%; top: 0; width: 50%; height: 100%;
  transform-style: preserve-3d; transform-origin: left center; cursor: pointer;
  transition: transform var(--dur-page) cubic-bezier(0.45, 0.05, 0.3, 1);
}
.fb-leaf.is-flipped { transform: rotateY(-180deg); }
.fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.fb-face-front { border-radius: 0 6px 6px 0; }
.fb-face-back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
/* `contain`, nunca `cover`: el flipbook original no recortaba nada porque sus
   176 páginas eran idénticas; aquí recortar se comería una clave o un folio. */
.fb-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* lámina apaisada a doble plana: la misma imagen ocupa el ancho de DOS
   páginas; la cara derecha la desplaza media vuelta para enseñar su mitad.
   El -100% se resuelve contra el ancho de la CARA, o sea media imagen. */
.fb-face img.fb-mitad { width: 200%; }
.fb-face img.fb-mitad-der { margin-left: -100%; }

/* Portadilla de sección (índice 0 del libro) y página en blanco de cuadre.
   Dibujadas, sin imágenes: además de dar entrada a cada sección, son las que
   cuadran la paridad para que ninguna lámina a doble plana se parta. */
.fb-portadilla, .fb-blanca { position: relative; width: 100%; height: 100%; background: #F4F2EE; }
/* la hoja en blanco de cuadre (solo hay UNA en todo el catálogo, en Mesas):
   con filete para que se lea como hoja del catálogo y no como error */
.fb-blanca::after {
  content: ''; position: absolute; left: 50%; bottom: 8%; width: 34px; height: 2px;
  margin-left: -17px; background: var(--om-orange-500); opacity: .45;
}
.fb-portadilla { overflow: hidden; }
.fb-port-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-port-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 8px; padding: 0 10% 12%;
  text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(29,39,87,.15) 0%, rgba(29,39,87,.55) 45%, rgba(29,39,87,.88) 100%);
}
.fb-port-sup { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.fb-port-nom { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 3.2vw, 30px); line-height: 1.15; }
.fb-port-nom::after { content: ''; display: block; width: 46px; height: 3px; margin: 12px auto 0; background: var(--om-orange-500); }
.fb-port-n { font-size: 13px; opacity: .85; }
.fb-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.fb-face-front::after { background: linear-gradient(90deg, rgba(0,0,0,0.14), rgba(0,0,0,0) 22%); }
.fb-face-back::after { background: linear-gradient(270deg, rgba(0,0,0,0.14), rgba(0,0,0,0) 22%); }
@media (prefers-reduced-motion: reduce) {
  .fb-leaf { transition: none; }
}

/* Pager móvil (una lámina por pantalla con scroll-snap).
   Sin flechas laterales: el deslizamiento es nativo y la lámina usa todo el
   ancho. Cada tarjeta toma la proporción REAL de su lámina (visor.js le pone
   el aspect-ratio), así la imagen la llena y no quedan franjas: con la altura
   fija anterior, una lámina apaisada dejaba el 62% de la tarjeta vacío. */
@media (max-width: 759px) {
  .fb-nav { display: none; }
  .fb-stage { gap: 0; padding: 0; }
}
.fb-pager {
  display: flex; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px; width: 100%; padding: 4px 2px 10px; scrollbar-width: none;
}
.fb-pager::-webkit-scrollbar { display: none; }
.fb-page {
  flex: none; width: 100%; max-height: 76vh; scroll-snap-align: center;
  border-radius: 8px; overflow: hidden;
  background: #F4F2EE; box-shadow: 0 6px 22px rgba(8,12,34,0.4);
}
.fb-page img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* En fullscreen el visor conserva el fondo navy */
.fb:fullscreen { background: var(--om-navy-900); padding: 12px; }
.fb-nojs { color: rgba(255,255,255,0.85); text-align: center; padding: 24px 12px; }
.fb-nojs a { color: var(--om-orange-300); }