/* ══════════════════════════════════════════════════════════════════════
   AIMA · LA FICHA EN REEL · assets/aima-ficha.css · 08/10/2026
   (el guion es aima-ficha.js; lee su cabecera antes de tocar esto)

   Todo cuelga de `.mu-ficha.fr-on`, una clase que pone el motor SOLO cuando
   pinta la ficha nueva. Quitar este fichero, o que no cargue, deja la
   ficha de antes tal cual: las reglas viejas de `material.html` siguen
   escritas y siguen valiendo para el cuerpo viejo.

   ── LA REGLA DE ORO: ALTURA FIJA ────────────────────────────────────
   `--fichaH` es la altura de la ficha y no depende de lo que haya escrito.
   Una pieza con una línea y otra con quince pantallas miden lo mismo,
   y el muro de debajo no se mueve al pasar de una a otra. De ella sale
   `--u` (1 = una ficha de 580 px): todos los tamaños de letra y de
   dibujo van en `--u`, así que la ficha entera escala con su altura.

   ── LAS TIPOGRAFÍAS SON LAS DE LA CASA, NINGUNA NUEVA ───────────────
   AIMA Negra (Poppins 800) para lo que se lee de lejos, AIMA Serif
   (Cormorant) para la cifra que se quiere mirar y la voz de Bratney,
   Poppins espaciado para los rótulos y Montserrat para el texto. El
   rojo es acento: una raya, un LED, una barra. Nunca un fondo.

   ── CERO LAG ────────────────────────────────────────────────────────
   Solo `transform` y `opacity` se animan. No hay `backdrop-filter`, ni
   `filter`, ni `box-shadow` que cambie, ni `will-change` (cada capa
   promovida es memoria de vídeo: con ≤ 20 pantallas por ficha sobra).
   ══════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · LA CARCASA ═══════════════════════════════════════════════════ */
.mu-ficha.fr-on{
  --fichaH:clamp(340px,66vh,580px);
  --stageW:min(var(--fichaH),40%);
  /* La barra de arriba (anterior · siguiente · cerrar) mide 54 px en una ficha
     de 580 y baja con ella hasta 40: en una ficha de 449 son 12 px de texto
     que se recuperan. `--bt` hace lo mismo con los botones del pie. */
  --bar:clamp(40px,calc(var(--fichaH) * .093),54px);
  --bt:clamp(28px,calc(var(--fichaH) * .0586),34px);
  height:var(--fichaH);max-height:none;
  grid-template-columns:var(--stageW) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
@media (max-width:1180px){
  .mu-ficha.fr-on{--fichaH:clamp(320px,62vh,520px);--stageW:min(var(--fichaH),42%)}
}

/* El ancho del render es un porcentaje de LA FICHA y no de la ventana (`40vw`):
   con el cajón abierto la ficha pierde 270-370 px por la izquierda y el render
   seguía midiendo lo mismo, dejando al texto una columna de 500 px. */
/* El render ocupa TODA la altura (antes era un cuadrado pegado arriba). El
   visor 3D encuadra contra el lado estrecho, así que no necesita cuadrado. */
.mu-ficha.fr-on .mu-ficha-media{
  width:auto;height:100%;aspect-ratio:auto;align-self:stretch;
}
/* Los tres botones de arriba son de `material.html` (cuadrados de 54 px):
   aquí siguen a `--bar`. En ficha alta valen lo mismo que antes. */
/* Una ficha estrecha —tableta en vertical con el cajón de apps abierto: unos
   500 px— no puede dar el 42 % al render: el texto se quedaba en 205 px de
   ancho y a media pantalla de letra. El render cede. */
@media (max-width:980px){
  body.apps-abiertas .mu-ficha.fr-on{--stageW:min(var(--fichaH),32%)}
}
.mu-ficha.fr-on .mu-nav{right:var(--bar)}
.mu-ficha.fr-on .mu-flecha,.mu-ficha.fr-on .mu-x{width:var(--bar);height:var(--bar)}

/* ═══ 2 · EL FONDO DEL RENDER = EL DE SU CASILLA ════════════════════════
   08/10/2026 · «el RS 4 tendría que verse blanco, y lo mismo el C-stand».
   El muro pinta cada pieza sobre una casilla de su color (`.mu-c-*`); la
   ficha lo pintaba aparte, con otro degradado y —en las dos piezas con
   `luz:'oscura'`— oscuro. Dos fondos para la misma pieza: por fuera
   blanca, por dentro negra. Ahora la ficha copia el degradado de la
   casilla, capa por capa (son los mismos números de `.mu-c-* .mu-cara`).
   Las salas `noche` / `oscura` solo se usan ya para lo que NO tiene casilla
   (las herramientas de la casa, que viven en el cajón). */
.mu-ficha.fr-on .mu-ficha-media.fr-st-blanco{background:
  radial-gradient(116% 90% at 34% 20%,#FFFFFF 0%,rgba(255,255,255,.55) 34%,rgba(255,255,255,0) 70%),
  linear-gradient(150deg,#FCFCFB 0%,#F6F6F3 46%,#E6E5DF 100%)}
.mu-ficha.fr-on .mu-ficha-media.fr-st-hueso{background:
  radial-gradient(116% 90% at 34% 20%,#FDFDFB 0%,rgba(253,253,251,.5) 34%,rgba(253,253,251,0) 70%),
  linear-gradient(150deg,#F4F4F1 0%,#EDEDEA 46%,#DBDAD3 100%)}
.mu-ficha.fr-on .mu-ficha-media.fr-st-tinta{background:
  radial-gradient(118% 92% at 34% 20%,#2B2B31 0%,rgba(43,43,49,.55) 36%,rgba(43,43,49,0) 72%),
  linear-gradient(150deg,#1A1A1F 0%,#131316 48%,#0C0C0F 100%)}
.mu-ficha.fr-on .mu-ficha-media.fr-st-rojo{background:
  radial-gradient(118% 92% at 34% 20%,#D73B41 0%,rgba(215,59,65,.5) 36%,rgba(215,59,65,0) 72%),
  linear-gradient(150deg,#C42B31 0%,#B92329 48%,#9E1F25 100%)}
.mu-ficha.fr-on .mu-ficha-media.fr-st-oro{background:
  radial-gradient(118% 92% at 34% 20%,#D4AE5C 0%,rgba(212,174,92,.5) 36%,rgba(212,174,92,0) 72%),
  linear-gradient(150deg,#CBA451 0%,#C39B45 48%,#B2903F 100%)}

/* Sin render: la casilla, con el dibujo de su familia y el nombre. Es el
   hueco donde entrará el render el día que se suba. */
.mu-ficha.fr-on .fr-placa{padding:calc(var(--u,1px)*0 + 28px);justify-content:flex-end;position:absolute;inset:0;
  background:none !important;color:var(--ink)}
.mu-ficha.fr-on .fr-st-tinta .fr-placa{color:var(--bone,#F2F2F0)}
.mu-ficha.fr-on .fr-st-rojo .fr-placa{color:#fff}
.mu-ficha.fr-on .fr-placa .fr-pl-ic{position:absolute;right:8%;top:9%;width:46%;height:46%;
  stroke-width:.5;opacity:.5;--ic-acento:var(--red);color:inherit}
.mu-ficha.fr-on .fr-st-rojo .fr-placa .fr-pl-ic{--ic-acento:#fff;opacity:.55}
.mu-ficha.fr-on .fr-placa b{position:relative;font-size:clamp(20px,2.1vw,34px);line-height:1.04}

/* «Arrastra para girar»: un pie que sale 5 s y se va. Es un pseudo-elemento
   y no un nodo porque el visor 3D VACÍA el hueco al cargar (`innerHTML=''`)
   y se llevaría cualquier hijo; un `::after` no se lo lleva. Solo existe
   cuando el lienzo YA está dentro (`:has(canvas)`): mientras carga está el
   «Cargando el 3D…» en ese mismo sitio y los dos se pisaban. Un navegador
   sin `:has()` no lo pinta: el gesto de arrastrar funciona igual. */
.mu-ficha.fr-on #hueco3d.mu-ficha-media:has(canvas)::after{
  content:'Arrastra para girar';position:absolute;left:50%;bottom:calc(var(--j,8px) + 16px);z-index:2;
  transform:translate(-50%,0);pointer-events:none;white-space:nowrap;
  font:600 9px/1 var(--piel-pop,'Poppins',sans-serif);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray,#8A8D8F);opacity:0;animation:fr-hint 5.2s ease .5s both}
.mu-ficha.fr-on #hueco3d.mu-media-noche:has(canvas)::after,
.mu-ficha.fr-on #hueco3d.mu-media-oscura:has(canvas)::after{color:rgba(242,242,240,.6)}

/* ═══ 3 · LA COLUMNA DE LA DERECHA ═════════════════════════════════════ */
.mu-ficha.fr-on .mu-ficha-txt.fr{
  --u:calc(var(--fichaH) / 580);
  --gx:clamp(22px,calc(var(--u) * 46),48px);
  padding:0;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  container-type:inline-size;container-name:fr;
}

/* La cabecera: no se mueve de pantalla en pantalla. La primera fila es una
   barra de 54 px —la altura de los tres botones de arriba (anterior,
   siguiente, cerrar)—: a la izquierda la familia, a la derecha los botones.
   El nombre va DEBAJO y usa todo el ancho: antes llevaba 190 px de relleno
   a la derecha para esquivar los botones y, con el cajón abierto, se partía
   en dos líneas con el subtítulo en otras dos y la pantalla se quedaba
   sin sitio. */
.fr-cab{padding:0 var(--gx);min-width:0}
.fr-ceja{display:flex;align-items:center;gap:10px;box-sizing:border-box;height:var(--bar,54px);margin:0;padding-right:calc(var(--bar,54px) * 3 + 8px);
  font:600 10px/1 var(--piel-pop,'Poppins',sans-serif);letter-spacing:.22em;text-transform:uppercase;color:var(--gray,#8A8D8F)}
.fr-ceja::before{content:'';flex:none;width:24px;height:2px;background:var(--red,#C1272D)}
.fr-nom{margin:calc(var(--u) * 2) 0 0;padding:0;color:var(--ink,#0B0B0D);text-transform:none;
  font-family:var(--piel-negra,'Poppins',sans-serif);font-weight:800;letter-spacing:-.026em;line-height:1.05;
  font-size:calc(var(--kn,1) * clamp(22px,calc(var(--u) * 38),40px));
  max-height:2.14em;overflow:hidden;overflow-wrap:break-word;hyphens:auto}
/* El subtítulo y el estado van en línea: si el subtítulo ocupa dos renglones,
   el estado cabe detrás del último en vez de abrir una fila para él solo. */
.fr-sub{display:block;margin:calc(var(--u) * 8) 0 0;
  font:italic 600 clamp(14px,calc(var(--u) * 19),20px)/1.4 var(--piel-serif,'Cormorant Garamond',Georgia,serif);
  color:var(--graphite,#3A3A3C);font-variant-numeric:lining-nums}
.fr .est{margin:0;font-style:normal;vertical-align:middle}
/* La separación va DETRÁS del subtítulo y no delante del estado: si el estado
   salta de renglón (columna estrecha) no se queda sangrado 14 px. */
.fr-sub > span:not(.est){margin-right:14px}

/* El visor de las pantallas. Cada pantalla es `absolute` y llena este
   hueco: ninguna empuja a otra, y cambiar de una a otra no mueve nada. */
.fr-vp{position:relative;min-height:0;margin-top:calc(var(--u) * 16);border-top:1px solid var(--hair,rgba(11,11,13,.09));
  cursor:pointer;touch-action:pan-y}
.fr-f{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);
  padding:calc(var(--u) * 17) var(--gx) calc(var(--u) * 12);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(30px,0,0);
  transition:opacity .24s ease,transform .4s var(--ease,cubic-bezier(.22,1,.36,1)),visibility 0s linear .4s}
.fr-f.is-pre{transform:translate3d(-30px,0,0)}
.fr-f.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .3s ease .06s,transform .46s var(--ease,cubic-bezier(.22,1,.36,1)) .03s,visibility 0s}

/* El rótulo de la pantalla y su contador («02 / 06») */
.fr-rot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 calc(var(--u) * 12);
  font:600 9.5px/1 var(--piel-pop,'Poppins',sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gray,#8A8D8F)}
.fr-rot span{display:flex;align-items:center;gap:9px}
.fr-rot span::before{content:'';flex:none;width:16px;height:2px;background:var(--red,#C1272D)}
.fr-rot em{font-style:normal;color:var(--ink,#0B0B0D);letter-spacing:.14em}

.fr-cu{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--u) * 22);min-height:0}
.fr-tx{display:flex;min-height:0;min-width:0;overflow:hidden}
/* El centrado vertical es un margen automático y no `align-items:center`: si
   el texto no cupiera, el margen se queda en cero y el texto empieza ARRIBA
   (y se puede desplazar), en vez de salirse por arriba y por abajo a la vez,
   que es la parte que no se puede alcanzar. */
.fr-in{width:100%;min-width:0;margin:auto 0}
.fr-gr{display:none;position:relative;min-height:0;min-width:0;overflow:hidden;background:var(--bone,#F2F2F0);
  align-content:center;justify-items:stretch;gap:calc(var(--u) * 20);padding:calc(var(--u) * 18) calc(var(--u) * 22)}
/* Cuando la placa de la gráfica no cabe (alturas bajas, muchos packs), `fit()`
   le quita primero lo accesorio (`fr-gr-c`) y, si aun así no cabe, la apaga
   entera (`fr-gr-off`): el texto toma todo el ancho. Antes sin gráfica que
   con una gráfica cortada. */
.fr-f.fr-gr-c .fr-g-n,.fr-f.fr-gr-c .fr-g-fam,.fr-f.fr-gr-c .fr-pts{display:none}
.fr-f.fr-gr-c .fr-ic{width:calc(var(--u) * 110);height:calc(var(--u) * 110)}
.fr-f.fr-gr-c .fr-nn{font-size:calc(var(--u) * 110)}
.fr-f.fr-gr-c .fr-comilla{font-size:calc(var(--u) * 150)}
.fr-f.fr-gr-c .fr-az{padding-top:calc(var(--u) * 7);padding-bottom:calc(var(--u) * 7)}
.fr-f.fr-gr-off .fr-gr{display:none}
.fr-f.fr-gr-off .fr-cu{grid-template-columns:minmax(0,1fr)}
/* Si una pantalla no cupiera ni al tamaño mínimo, antes desplazable que
   cortada. No debería pasar nunca; si pasa, `fit()` lo dice por consola. */
.fr-f.fr-sobra .fr-tx{overflow:auto}

/* Columna estrecha: menos margen a los lados (cada píxel es del texto). La
   barra de segmentos se aprieta más abajo, en el pie. */
@container fr (max-width:520px){
  .fr-cab,.fr-f,.fr-pie{--gx:22px}
}
@container fr (max-width:420px){
  .fr-cab,.fr-f,.fr-pie{--gx:18px}
}
/* La gráfica del lado aparece desde que la columna mide 640 px (la primera
   versión pedía 740). A 740 se escondía justo en un portátil de 1440–1600 px
   con el cajón de la izquierda abierto, que es donde se abren los programas y
   los accesorios (68 de las 101 piezas), y era ahí donde se pedían «gráficas o
   dibujos». Por debajo de 640 el texto pierde más de lo que la gráfica da.
   Con la columna entre 640 y 740, `fit()` hace el resto: si el texto no cabe
   al lado, aligera la placa (`fr-gr-c`) o la apaga (`fr-gr-off`). */
@container fr (min-width:640px){
  .fr-cu{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .fr-gr{display:grid}
  .fr-full .fr-cu{grid-template-columns:minmax(0,1fr)}
}
@container fr (min-width:860px){
  .fr-cu{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
}
/* Sin soporte de `@container` (navegadores de antes de 2023): la columna
   estrecha, sin gráficas. Nada se rompe; solo se ve menos. */

/* ═══ 4 · EL TEXTO ═════════════════════════════════════════════════════
   Los tamaños llevan `--k` (1 por defecto): es lo que baja `fit()` si una
   pantalla no cupiera. */
/* 20/10/2026 (noche) · «ponme esa letra en material de una forma más elegante». El gancho («De una sola toma en 8K…») y los
   titulares de las razones iban en la negra pesada (Poppins 700): demasiado grito para una frase. Pasan a la serif de la casa
   (Cormorant Garamond, la misma de «Cámara principal» y de «Mi opinión»), en redondo y a peso 600. Cormorant tiene menos altura
   de x que la negra, así que sube ~30 % (30→40 px, 33→44 de techo) para que se lea igual de grande, con la interlínea más
   cerrada y casi sin tracking negativo. `fit()` sigue bajando `--k` si una pantalla no cupiera. El nombre del producto no cambia. */
.fr-gan{margin:0;padding-left:calc(var(--u) * 18);border-left:4px solid var(--red,#C1272D);color:var(--ink,#0B0B0D);
  font-family:var(--piel-serif,'Cormorant Garamond',Georgia,serif);font-weight:600;letter-spacing:-.004em;line-height:1.2;
  font-size:calc(var(--k,1) * clamp(23px,calc(var(--u) * 36),40px));
  text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.fr-h{margin:0 0 .46em;color:var(--ink,#0B0B0D);
  font-family:var(--piel-serif,'Cormorant Garamond',Georgia,serif);font-weight:600;letter-spacing:-.004em;line-height:1.16;
  font-size:calc(var(--k,1) * clamp(23px,calc(var(--u) * 36),40px));
  text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
p.fr-h{margin:0;font-weight:600}
/* las cifras resaltadas dentro de estas frases: sin negrita falsa (Cormorant no trae 700); las marca la raya roja de debajo */
.fr-gan .fr-num,.fr-h .fr-num{font-weight:600}
.fr-p{margin:0;max-width:64ch;color:var(--graphite,#3A3A3C);white-space:pre-line;overflow-wrap:break-word;hyphens:auto;
  font:400 calc(var(--k,1) * clamp(13px,calc(var(--u) * 18),19px))/1.64 var(--piel-mont,'Montserrat',sans-serif)}
.fr-p-l{max-width:60ch;color:var(--ink,#0B0B0D);
  font-size:calc(var(--k,1) * clamp(14px,calc(var(--u) * 19),20px));line-height:1.66}
.fr-sin{color:var(--gray,#8A8D8F);font-style:italic}
/* las cifras de un texto corrido: lo que el ojo busca primero */
.fr-num{font-weight:700;color:var(--ink,#0B0B0D);white-space:nowrap;box-shadow:inset 0 -.3em 0 rgba(193,39,45,.16)}
/* el papel del pack Constancia (lo pinta la página): debajo del gancho */
.fr .mu-ficha-papel{margin-top:calc(var(--u) * 16)}

/* MI OPINIÓN: la voz de Bratney, en la letra de la casa para lo que se dice
   en voz alta. */
.fr-op{margin:0;color:var(--ink,#0B0B0D);
  font-family:var(--piel-serif,'Cormorant Garamond',Georgia,serif);font-style:italic;font-weight:600;line-height:1.28;
  font-size:calc(var(--k,1) * clamp(22px,calc(var(--u) * 34),38px));text-wrap:pretty;overflow-wrap:break-word;hyphens:auto}
.fr-comilla{display:block;justify-self:center;color:var(--red,#C1272D);
  font:700 calc(var(--u) * 260)/.72 var(--piel-serif,'Cormorant Garamond',Georgia,serif)}
.fr-t-opinion .fr-gr{background:transparent}

/* ═══ 5 · LAS GRÁFICAS ═════════════════════════════════════════════════ */
.fr-g-rot{margin:0 0 calc(var(--u) * 10);font:600 9px/1.2 var(--piel-pop,'Poppins',sans-serif);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gray,#8A8D8F)}

/* El tamaño físico: cinco peldaños, el de la pieza encendido */
.fr-esc{display:flex;align-items:flex-end;gap:calc(var(--u) * 11);min-height:calc(var(--u) * 76)}
.fr-pa{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:calc(var(--u) * 7);
  font:700 9.5px/1 var(--piel-pop,'Poppins',sans-serif);color:var(--gray,#8A8D8F);letter-spacing:.06em}
.fr-pa i{display:block;box-sizing:border-box;width:calc(var(--u) * (12 + var(--i) * 8));height:calc(var(--u) * (12 + var(--i) * 8));
  border:1.5px solid rgba(11,11,13,.28);transform-origin:50% 100%}
.fr-pa.on{color:var(--ink,#0B0B0D)}
.fr-pa.on i{background:var(--ink,#0B0B0D);border-color:var(--ink,#0B0B0D);box-shadow:inset 0 3px 0 var(--piel-led,#FE3142)}

/* La familia en el parque: una barra partida en ocho, la suya en rojo */
.fr-bar{display:flex;gap:3px;height:calc(var(--u) * 15)}
.fr-bar i{display:block;height:100%;min-width:3px;background:rgba(11,11,13,.17);transform-origin:0 50%}
.fr-bar i.on{background:var(--red,#C1272D)}
.fr-g-n{margin:calc(var(--u) * 9) 0 0;font:500 12px/1.3 var(--piel-mont,'Montserrat',sans-serif);color:var(--graphite,#3A3A3C)}
.fr-g-n b{font-family:var(--piel-serif,'Cormorant Garamond',Georgia,serif);font-weight:700;color:var(--ink,#0B0B0D);
  font-size:calc(var(--u) * 30);line-height:1;margin-right:.1em;font-variant-numeric:lining-nums}

/* Un programa: de la casa o licencia */
.fr-tipo{display:flex;align-items:center;gap:10px;margin:0;color:var(--ink,#0B0B0D);
  font:700 calc(var(--u) * 19)/1.2 var(--piel-negra,'Poppins',sans-serif);letter-spacing:-.012em}
.fr-led{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;
  border:1px solid var(--gray,#8A8D8F)}
.fr-led.casa{background:var(--piel-led,#FE3142);border-color:transparent;
  box-shadow:0 0 0 3px rgba(254,49,66,.16),0 0 10px rgba(254,49,66,.7)}

/* El número de la razón, y debajo un cuadradito por razón (la de ahora, en rojo):
   es la misma escala de cuadrados que el tamaño físico. */
.fr-pts{display:flex;gap:calc(var(--u) * 7);margin-top:calc(var(--u) * 4)}
.fr-pts i{display:block;box-sizing:border-box;width:calc(var(--u) * 9);height:calc(var(--u) * 9);border:1.5px solid rgba(11,11,13,.28)}
.fr-pts i.on{background:var(--red,#C1272D);border-color:var(--red,#C1272D)}
/* El número de la razón */
.fr-num-g{display:grid;justify-items:center;gap:calc(var(--u) * 6)}
.fr-nn{font:700 calc(var(--u) * 168)/.8 var(--piel-serif,'Cormorant Garamond',Georgia,serif);letter-spacing:-.03em;
  font-variant-numeric:lining-nums;color:transparent;-webkit-text-stroke:1.5px rgba(11,11,13,.24)}
.fr-de{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 10);
  font:600 10px/1 var(--piel-pop,'Poppins',sans-serif);letter-spacing:.24em;text-transform:uppercase;color:var(--gray,#8A8D8F)}
.fr-de::before{content:'';width:24px;height:2px;background:var(--red,#C1272D)}

/* El dibujo de la familia (el sprite de la casa, grande y a trazo fino) */
.fr-dib,.fr-alerta{display:grid;place-items:center}
.fr .fr-ic{width:calc(var(--u) * 190);height:calc(var(--u) * 190);stroke-width:.5;color:var(--ink,#0B0B0D);--ic-acento:var(--red,#C1272D)}

/* Los packs: una fila por pack, como interruptores. Encendido (tinta, con su
   LED) si la pieza va dentro; apagado (blanco) si no. Una columna y no dos:
   en la placa estrecha —con el cajón abierto— «Constancia» se partía a
   media palabra. */
.fr-mz{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.fr-az{position:relative;display:flex;align-items:center;gap:calc(var(--u) * 11);min-width:0;
  padding:calc(var(--u) * 11) calc(var(--u) * 14);background:#fff;border:1px solid var(--hair,rgba(11,11,13,.09))}
.fr-az b{flex:1 1 auto;min-width:0;font:700 clamp(12px,calc(var(--u) * 14),15px)/1.18 var(--piel-negra,'Poppins',sans-serif);
  letter-spacing:-.01em;color:var(--gray,#8A8D8F);overflow-wrap:break-word}
.fr-az em{flex:none;margin-left:auto;font:600 8.5px/1 var(--piel-pop,'Poppins',sans-serif);font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray,#8A8D8F)}
.fr-mz-m{gap:3px}
.fr-mz-m .fr-az{padding:calc(var(--u) * 6) calc(var(--u) * 12)}
.fr-mz-m .fr-az b{font-size:clamp(11px,calc(var(--u) * 12.5),13px)}
.fr-mz-m .fr-az em{display:none}
.fr-az.on{background:var(--ink,#0B0B0D);border-color:var(--ink,#0B0B0D)}
.fr-az.on b{color:#fff}
.fr-az.on em{color:rgba(255,255,255,.62)}
.fr-az.on .fr-led{background:var(--piel-led,#FE3142);border-color:transparent;
  box-shadow:0 0 0 3px rgba(254,49,66,.16),0 0 10px rgba(254,49,66,.7)}
.fr-uso{margin:calc(var(--u) * 18) 0 calc(var(--u) * 9)}
.fr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fr-chips li{padding:calc(var(--u) * 8) calc(var(--u) * 11);background:rgba(11,11,13,.06);color:var(--ink,#0B0B0D);
  font:600 clamp(10.5px,calc(var(--u) * 12),12.5px)/1.2 var(--piel-negra,'Poppins',sans-serif)}

/* ═══ 6 · QUÉ CUMPLE · EL MOSAICO DE CIFRAS ════════════════════════════
   Una pantalla lleva entre 1 y 6 celdas (`aima-ficha.js` las reparte). Cuantas
   menos haya, más grandes se pintan: `--cs` multiplica el cuerpo de la
   letra y el aire de la celda. Con una sola celda a tamaño de cinco, la
   pantalla era un rótulo pequeño perdido en un cuadro blanco. */
.fr-mos{--cs:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:6px}
.fr-c1{--cs:1.9;grid-template-columns:minmax(0,1fr);max-width:calc(var(--u) * 640)}
.fr-c2{--cs:1.5}
.fr-c3{--cs:1.28}
.fr-c4{--cs:1.2}
@container fr (min-width:820px){.fr-c3,.fr-c5,.fr-c6{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Con la ficha baja (portátil con barras de navegador) las celdas van en tres
   columnas desde antes: dos filas de dos no caben y se acababan repartiendo
   en pantallas de dos celdas. */
@media (max-height:700px){
  @container fr (min-width:600px){.fr-c3,.fr-c5,.fr-c6{grid-template-columns:repeat(3,minmax(0,1fr))}}
}
.fr-cel{position:relative;display:flex;flex-direction:column;gap:calc(var(--u) * 5 * var(--cs,1));min-width:0;overflow:hidden;
  padding:calc(var(--u) * 13 * var(--cs,1)) calc(var(--u) * 16 * var(--cs,1)) calc(var(--u) * 14 * var(--cs,1));background:var(--bone,#F2F2F0)}
.fr-cel-r{margin:0;font:600 calc(9px + (var(--cs,1) - 1) * 2px)/1.3 var(--piel-pop,'Poppins',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--gray,#8A8D8F)}
.fr-cel-v{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .3em;color:var(--ink,#0B0B0D)}
.fr-fig{font-family:var(--piel-serif,'Cormorant Garamond',Georgia,serif);font-weight:700;letter-spacing:-.015em;line-height:.98;
  font-size:calc(var(--k,1) * var(--cs,1) * clamp(26px,calc(var(--u) * 46),50px));font-variant-numeric:lining-nums;overflow-wrap:anywhere}
.fr-pl .fr-fig{font-size:calc(var(--k,1) * var(--cs,1) * clamp(22px,calc(var(--u) * 34),38px))}
.fr-uni{font:700 calc(var(--k,1) * var(--cs,1) * clamp(12px,calc(var(--u) * 17),18px))/1 var(--piel-negra,'Poppins',sans-serif);font-style:normal;
  color:var(--gray,#8A8D8F)}
.fr-pre{align-self:center;margin-right:.1em;font:600 9px/1 var(--piel-pop,'Poppins',sans-serif);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray,#8A8D8F)}
.fr-cel-d{margin:0;color:var(--graphite,#3A3A3C);overflow-wrap:break-word;hyphens:auto;
  font:500 calc(var(--k,1) * var(--cs,1) * clamp(12px,calc(var(--u) * 13.5),14.5px))/1.45 var(--piel-mont,'Montserrat',sans-serif)}
.fr-cel-p{margin:0;color:var(--ink,#0B0B0D);overflow-wrap:break-word;hyphens:auto;
  font:500 calc(var(--k,1) * var(--cs,1) * clamp(13px,calc(var(--u) * 15),16px))/1.5 var(--piel-mont,'Montserrat',sans-serif)}
.fr-barra{display:block;position:relative;height:4px;margin-top:auto;background:rgba(11,11,13,.12);overflow:hidden}
.fr-barra i{position:absolute;inset:0;background:var(--red,#C1272D);transform-origin:0 50%;transform:scaleX(0)}
.fr-f.is-on .fr-barra i{transform:scaleX(var(--p,0));transition:transform .9s var(--ease,cubic-bezier(.22,1,.36,1)) .35s}

/* ═══ 7 · EL PIE · barra de progreso y mandos ══════════════════════════ */
.fr-pie{display:flex;align-items:center;gap:calc(var(--u) * 18);min-width:0;
  padding:calc(var(--u) * 6) var(--gx) calc(var(--u) * 14);border-top:1px solid var(--hair,rgba(11,11,13,.09))}
.fr-seg{display:flex;flex:1 1 auto;gap:4px;min-width:0;margin:0;padding:0;list-style:none}
.fr-seg li{flex:1 1 0;min-width:5px}
.fr-seg li.fr-corte{margin-left:calc(var(--u) * 7)}
/* Con muchas pantallas (los programas llegan a 17-23) y una columna estrecha
   (tableta en vertical), los segmentos cedían hasta 5 px cada uno y empujaban
   el contador por encima de los botones: aquí ceden hasta 2 px, y el pie se
   aprieta. Va DESPUÉS de las reglas de base a propósito: a igual
   especificidad gana la última, y escrito antes no se aplicaba. */
@container fr (max-width:520px){
  .fr-pie{gap:12px}
  .fr-seg{gap:2px}
  .fr-seg li{min-width:2px}
  .fr-seg li.fr-corte{margin-left:3px}
  .fr-cnt{margin-right:0}
}
@container fr (max-width:420px){
  .fr-ctl{gap:4px}
  .fr-cnt{letter-spacing:.06em}
}
.fr-sg{display:block;width:100%;height:22px;padding:9px 0;border:0;background:none;cursor:pointer}
.fr-sg i{position:relative;display:block;height:3px;background:rgba(11,11,13,.16);overflow:hidden;transition:background .25s}
.fr-sg:hover i{background:rgba(11,11,13,.34)}
.fr-sg i::after{content:'';position:absolute;inset:0;background:var(--ink,#0B0B0D);transform:scaleX(0);transform-origin:0 50%}
.fr-sg.pas i::after{transform:scaleX(1)}
.fr-sg.on i::after{transform:scaleX(1);background:var(--red,#C1272D)}
/* pase automático: la barra de la pantalla en curso se llena en `--dur` y
   al terminar dispara `animationend`, que es lo que pasa a la siguiente.
   Con el ratón encima del reel (o de la barra) se pausa para leer. */
.fr.fr-auto .fr-sg.on i::after{transform:scaleX(0);animation:fr-llena var(--dur,6s) linear forwards}
.fr.fr-auto .fr-vp:hover ~ .fr-pie .fr-sg.on i::after,
.fr.fr-auto .fr-pie:hover .fr-sg.on i::after{animation-play-state:paused}

.fr-ctl{display:flex;align-items:center;gap:6px;flex:none}
.fr-cnt{margin-right:calc(var(--u) * 6);font:600 11px/1 var(--piel-pop,'Poppins',sans-serif);letter-spacing:.14em;color:var(--gray,#8A8D8F);white-space:nowrap}
.fr-cnt b{color:var(--ink,#0B0B0D);font-weight:700}
.fr-b{display:grid;place-items:center;width:var(--bt,34px);height:var(--bt,34px);border:0;background:rgba(11,11,13,.06);color:var(--ink,#0B0B0D);cursor:pointer;
  transition:background .25s var(--ease,ease),color .25s var(--ease,ease),opacity .25s}
.fr-b:hover:not(:disabled){background:var(--red,#C1272D);color:#fff}
.fr-b:disabled{opacity:.28;cursor:default}
.fr-b svg{width:12px;height:12px}
.fr-b-play .fr-i-pausa,.fr-b-play[aria-pressed="true"] .fr-i-play{display:none}
.fr-b-play[aria-pressed="true"] .fr-i-pausa{display:block}
.fr-b:focus-visible,.fr-sg:focus-visible{outline:2px solid var(--red,#C1272D);outline-offset:2px}

/* ═══ 8 · MOVIMIENTO · solo transform y opacity ════════════════════════
   Al pasar a una pantalla, lo que hay dentro entra escalonado. La
   animación está puesta SOLO bajo `.is-on`: al volver a una pantalla se
   repite sola, sin que el guion tenga que reiniciar nada. */
@keyframes fr-sube{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes fr-brota{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:none}}
@keyframes fr-barra-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes fr-llena{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fr-hint{0%{opacity:0;transform:translate(-50%,8px)}14%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}

.fr-f.is-on .fr-in > *{animation:fr-sube .52s var(--ease,cubic-bezier(.22,1,.36,1)) both}
.fr-f.is-on .fr-in > :nth-child(2){animation-delay:.07s}
.fr-f.is-on .fr-in > :nth-child(3){animation-delay:.14s}
.fr-f.is-on .fr-in > :nth-child(4){animation-delay:.21s}
.fr-f.is-on .fr-gr{animation:fr-sube .6s var(--ease,cubic-bezier(.22,1,.36,1)) .1s both}
.fr-f.is-on .fr-cel{animation:fr-sube .5s var(--ease,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--n) * 55ms + 60ms)}
.fr-f.is-on .fr-pa i{animation:fr-brota .5s var(--ease,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--i) * 60ms + 160ms)}
.fr-f.is-on .fr-bar i{animation:fr-barra-x .55s var(--ease,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--i) * 45ms + 140ms)}
.fr-f.is-on .fr-az{animation:fr-sube .45s var(--ease,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--i) * 50ms + 120ms)}

/* ═══ 9 · ALTURAS BAJAS ═════════════════════════════════════════════════
   Pantalla de portátil con barras de navegador: la ficha mide ~340-440 px
   y no cabe todo. Se prescinde de lo accesorio antes que de lo escrito. */
@media (max-height:700px){
  .fr-sub{margin-top:4px}
  .fr-uso,.fr-g-n{display:none}
  .fr-gr{gap:calc(var(--u) * 12);padding:calc(var(--u) * 14) calc(var(--u) * 16)}
  .fr-comilla{font-size:calc(var(--u) * 180)}
  .fr-nn{font-size:calc(var(--u) * 120)}
  .fr .fr-ic{width:calc(var(--u) * 140);height:calc(var(--u) * 140)}
}
@media (max-height:560px){
  .fr-g-fam,.fr-g-tipo{display:none}
  .fr-sub{display:none}
}

/* ═══ 10 · MOVIMIENTO REDUCIDO ═════════════════════════════════════════
   Quien lo pide no ve deslizar nada, ni entrar escalonado, ni correr la
   barra. Las pantallas siguen cambiando al pulsar. Sin pase automático. */
@media (prefers-reduced-motion:reduce){
  .fr-f,.fr-f.is-on{transition:none;transform:none}
  .fr-f *,.fr-f.is-on *{animation:none !important;transition:none !important}
  .fr-f.is-on .fr-barra i{transform:scaleX(var(--p,0))}
  .fr-b-play{display:none}
  .mu-ficha.fr-on #hueco3d.mu-ficha-media:has(canvas)::after{animation:none;opacity:.8}
}

/* ═══ 19/10/2026 · LAS CAJAS DIBUJADAS, UNA POR PIEZA ════════════════════
   Bratney: «quiero algo más personalizado para cada caja de material…
   un rail más visual y con más marketing». La placa de la derecha deja de
   ser la misma en las 101 piezas: lleva el dibujo de SU pieza
   (assets/aima-ficha-dibujos.js) con lo que dice SU ficha
   (assets/aima-ficha-cajas.js) y, debajo, su lema en Anton.
   Si la pieza no tiene caja escrita, sale la placa de antes. */
.fr-f.fr-con-vis .fr-gr{align-content:stretch;justify-items:stretch;container-type:inline-size;
  padding:calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 14);background:var(--bone,#F2F2F0)}
.fr-vis{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:calc(var(--u) * 7);height:100%;min-height:0;min-width:0}
.fr-vis-ceja{display:flex;align-items:center;gap:8px;margin:0;
  font:600 9px/1.2 'Montserrat','AIMA Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#56565C}
.fr-vis-ceja::before{content:'';flex:none;width:9px;height:8px;background:var(--red,#C1272D);
  clip-path:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%)}
.fr-vis-svg{display:block;width:100%;height:100%;min-height:0;overflow:visible}
.fr-vis-lema{margin:0;font-family:'Anton','AIMA Anton',Impact,'Arial Narrow Bold',sans-serif;font-weight:400;
  font-size:clamp(17px,9.2cqi,34px);line-height:1;letter-spacing:.012em;text-transform:uppercase;color:var(--ink,#0B0B0D);
  text-wrap:balance;font-variant-numeric:lining-nums}
.fr-vis-lema em{font-style:normal;color:var(--red,#C1272D)}
.fr-vis-nota{margin:0;font:italic 600 clamp(13px,5.4cqi,16px)/1.25 'Cormorant Garamond','AIMA Cormorant',Georgia,serif;color:#3A3A3C;
  font-variant-numeric:lining-nums}
.fr-vis-nota em{color:var(--red,#C1272D)}
/* compacta (alturas bajas): fuera la ceja y la nota; el dibujo y el lema se quedan */
.fr-f.fr-gr-c .fr-vis-ceja,.fr-f.fr-gr-c .fr-vis-nota{display:none}
/* pantallas bajas (un portátil de 1366 × 768 deja ~650 px): la placa es ancha y baja, y el lema
   se comía el sitio del dibujo. Sin la nota y con el lema un punto más pequeño, el dibujo respira. */
@media (max-height:700px){
  .fr-vis-nota{display:none}
  .fr-vis-lema{font-size:clamp(16px,7.4cqi,28px)}
}

/* ── el dibujo ───────────────────────────────────────────────────────── */
.fr-vis-svg .l{fill:none;stroke:#0B0B0D;stroke-width:1.8;stroke-linejoin:miter;stroke-linecap:square;vector-effect:non-scaling-stroke}
.fr-vis-svg .gruesa{stroke-width:3}
.fr-vis-svg .fina{stroke-width:1.1}
.fr-vis-svg .pun{stroke-dasharray:3 3}
.fr-vis-svg .rl{stroke:#C1272D}
.fr-vis-svg .w{fill:#fff}
.fr-vis-svg .b{fill:#F2F2F0}
.fr-vis-svg .g{fill:#D5D5DB}
.fr-vis-svg .g2{fill:#8A8D8F}
.fr-vis-svg .k{fill:#0B0B0D}
.fr-vis-svg .r,.fr-vis-svg .rf{fill:#C1272D}
.fr-vis-svg .op1{opacity:.1}.fr-vis-svg .op2{opacity:.2}.fr-vis-svg .op3{opacity:.3}.fr-vis-svg .op4{opacity:.4}
.fr-vis-svg .op5{opacity:.5}.fr-vis-svg .op6{opacity:.6}.fr-vis-svg .op7{opacity:.7}.fr-vis-svg .op8{opacity:.8}
/* la sombra dura de cartel: el mismo dibujo, en tinta (o en rojo), detrás */
/* (solo se rellena lo que tiene relleno: una línea sola sigue siendo línea, y su sombra también) */
.fr-vis-svg .v-sombra *{stroke:#0B0B0D;opacity:1}
.fr-vis-svg .v-sombra .w,.fr-vis-svg .v-sombra .b,.fr-vis-svg .v-sombra .g,.fr-vis-svg .v-sombra .g2,.fr-vis-svg .v-sombra .k,
.fr-vis-svg .v-sombra .r,.fr-vis-svg .v-sombra .rf,.fr-vis-svg .v-sombra text{fill:#0B0B0D}
.fr-vis-svg .v-sombra-r *{stroke:#C1272D}
.fr-vis-svg .v-sombra-r .w,.fr-vis-svg .v-sombra-r .b,.fr-vis-svg .v-sombra-r .g,.fr-vis-svg .v-sombra-r .g2,.fr-vis-svg .v-sombra-r .k,
.fr-vis-svg .v-sombra-r .r,.fr-vis-svg .v-sombra-r .rf,.fr-vis-svg .v-sombra-r text{fill:#C1272D}
/* la letra del dibujo */
.fr-vis-svg text{font-variant-numeric:lining-nums}
.fr-vis-svg .tn,.fr-vis-svg .tnc,.fr-vis-svg .tu{font-family:'Anton','AIMA Anton',Impact,'Arial Narrow Bold',sans-serif;font-weight:400;fill:#0B0B0D}
.fr-vis-svg .tnc{font-size:19px;letter-spacing:.012em}
.fr-vis-svg .tu{fill:#86868B}
.fr-vis-svg .ts,.fr-vis-svg .tsr{font:600 8.6px 'Montserrat','AIMA Montserrat',sans-serif;letter-spacing:.13em;fill:#3A3A3C}
.fr-vis-svg .tsr{fill:#C1272D}
.fr-vis-svg .tf{font:500 8px 'Montserrat','AIMA Montserrat',sans-serif;letter-spacing:.03em;fill:#6E6E73}
.fr-vis-svg .tb{font:500 9.8px 'Montserrat','AIMA Montserrat',sans-serif;fill:#0B0B0D}
.fr-vis-svg .gris{fill:#8A8D8F}

/* ── la entrada (una vez, al llegar a la pantalla) ───────────────────── */
.fr-vis .v-a{transform-box:fill-box;transform-origin:50% 60%}
.fr-f.is-on .fr-vis .v-a{animation:fr-v-sube .6s var(--ease,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--d,0) * 90ms + 140ms)}
.fr-f.is-on .fr-vis .v-pop{animation-name:fr-v-pop;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.fr-f.is-on .fr-vis .v-barra{animation-name:fr-v-barra;transform-origin:0 50%}
.fr-f.is-on .fr-vis-lema{animation:fr-v-sube .6s var(--ease,cubic-bezier(.22,1,.36,1)) .38s both}
.fr-f.is-on .fr-vis-nota{animation:fr-v-sube .6s var(--ease,cubic-bezier(.22,1,.36,1)) .5s both}
@keyframes fr-v-sube{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
@keyframes fr-v-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes fr-v-barra{from{opacity:.2;transform:scaleX(.02)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fr-f.is-on .fr-vis .v-a,.fr-f.is-on .fr-vis-lema,.fr-f.is-on .fr-vis-nota{animation:none}
}