/* =====================================================================
   brand-fusion.css — PIEL de fusioncinema.org (Fusion Cinema vzw)

   Marca 2 del ecosistema (E0). Capa PERCEPTIBLE propia: paleta, tipografías,
   movimiento y componentes de Fusion. Depende SOLO de core.css (esqueleto
   invisible) — nunca de brand-diartinez.css (regla E7 · builds independientes).

   Identidad RATIFICADA por Pablo (enmiendas-inyeccion-2 §E0): rojo var(--f-red) ·
   negro · blanco · marfil cream · Oswald (display) + Inter (UI) · botón
   RECTANGULAR (no la pastilla de la madre) · lienzo NEGRO (no marfil).
   Todo va bajo el scope .fusion para aislar la marca.
   ===================================================================== */

/* ── TIPOGRAFÍAS DE LA MARCA · el tarro las trae consigo ───────────────────
   Regla E7: una página que cargue núcleo + esta piel debe verse completa sin
   pedirle nada a ninguna otra marca — las familias incluidas.
   Ambas AUTOALOJADAS: Fusion se construye sin red, como el resto del
   ecosistema. Ya no queda ninguna familia pedida a un servidor externo. */
@font-face{font-family:'Oswald';font-weight:200 700;font-style:normal;font-display:swap;src:url('fonts/Oswald-VariableFont_wght.ttf') format('truetype-variations')}
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;src:url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations')}
@font-face{font-family:'Inter';font-weight:100 900;font-style:italic;font-display:swap;src:url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations')}

:root {
  /**
   * @group fusion.color
   * @name "Fusion · paleta"
   * @description Rojo institucional + negros de sala + cremas de proyección.
   */
  --f-red:      #a21b1f; /* @kind color */ /* acento institucional */
  --f-red-deep: #7c1417; /* @kind color */ /* hover / press */
  --f-black:    #111010; /* @kind color */ /* lienzo (sala a oscuras) */
  --f-panel:    #181614; /* @kind color */ /* superficie elevada (aside, filmrow hover) */
  --marfil:     hsl(40 33% 95%); /* @kind color */ /* NOMBRE CANÓNICO del ecosistema — mismo marfil
                                    que la madre, bit a bit. Se declara AQUÍ (build independiente),
                                    no se importa de brand-diartinez.css ( · unificación de nombres). */
  --f-cream:    var(--marfil);   /* @kind color */ /* alias interno heredado · texto sobre negro */
  --f-line:     rgba(255,255,255,.12); /* @kind color */ /* hairline sobre negro */
  --f-line-2:   rgba(255,255,255,.2);  /* @kind color */ /* hairline fuerte */
  --f-dim:      #8b8579; /* @kind color */ /* metadato tenue */
  --f-dim-2:    #b7b2a8; /* @kind color */ /* metadato claro */

  /**
   * @group fusion.type
   * @name "Fusion · tipografías"
   * @description Oswald condensada para titulares/nav; Inter para datos. Los
   *              TAMAÑOS y el tracking vienen del esqueleto (core.css).
   */
  --ff-f-disp: 'Oswald', 'Barlow Semi Condensed', sans-serif; /* @kind font */
  --ff-f-ui:   'Inter', ui-sans-serif, system-ui, sans-serif; /* @kind font */

  /**
   * @group fusion.motion
   * @name "Fusion · movimiento"
   * @description (E1 · motion = piel de marca) Carácter propio: un fundido-subida
   *              seco al cambiar de vista. Más largo que el de la madre.
   */
  --f-dur:      .5s;   /* @kind other */ /* fundido-subida de cambio de vista */
  --f-dur-fast: .18s;  /* @kind other */ /* hover de nav/botones/filas */
  --f-dur-slow: .25s;  /* @kind other */ /* lift de tarjeta */
  --f-ease:     cubic-bezier(.2,.7,.2,1); /* @kind other */

  /**
   * @group fusion.marquee
   * @name "Fusion · velocidad de banda"
   * @description La ley se escribe sobre VELOCIDAD, no sobre duración:
   *              dos bandas con textos de distinto largo deben MOVERSE igual.
   *              Duración de una vuelta = (recorrido en px ÷ velocidad).
   *              Ancla del ecosistema = la banda calibrada de la tienda, MEDIDA
   *              (≈130 px/s · corrección); mayor ÷c, menor ×c.
   */
  --mq-v:    85px;  /* @kind other */ /* px por segundo · banda media (ancla) */
  --mq-v-lg: 65px;  /* @kind other */ /* 85 ÷ 1.306 · banda grande → MÁS LENTA */
  --mq-v-sm: 111px; /* @kind other */ /* 85 × 1.306 · banda pequeña → MÁS RÁPIDA */

  /**
   * @group fusion.button
   * @name "Fusion · forma de botón"
   * @description ( · D5) La FORMA del botón es piel de marca, no del núcleo.
   *              Fusion NO usa la pastilla de la madre: SOLO rectángulo.
   */
  --btn-shape:  var(--r-none); /* @kind radius */ /* RECTANGULAR — regla de marca */

  /**
   * @group fusion.canon
   * @name "Fusion · nombres canónicos del ecosistema"
   * @description ( · D5) Los seis nombres que TODA piel declara, para que
   *              un componente del sistema funcione en cualquiera de las webs.
   *              Apuntan a los colores propios de Fusion: no se renombra nada.
   */
  --bg:          var(--f-black); /* @kind color */
  --bg-alt:      var(--f-panel); /* @kind color */
  --fg:          var(--marfil);  /* @kind color */
  --fg-muted:    var(--f-dim);   /* @kind color */
  --line:        var(--f-line);  /* @kind color */
  --accent:      var(--f-red);   /* @kind color */
  --accent-hover:var(--f-red-deep); /* @kind color */
  --ff-display:  var(--ff-f-disp); /* @kind font */
  --ff-ui:       var(--ff-f-ui);   /* @kind font */
}

/* ── raíz del sitio ── */
.fusion { min-height:100vh; display:flex; flex-direction:column;
  background:var(--f-black); color:var(--f-cream);
  font-family:var(--ff-f-ui); -webkit-font-smoothing:antialiased; }
.fusion *{ box-sizing:border-box; }
.fusion a{ color:inherit; }
.fusion ::selection{ background:var(--f-red); color:var(--marfil); }

/* ── barra superior (persistente) ── */
/* El logo ocupa el alto exacto de la barra y va esquinado a la izquierda, sin
   márgenes; el nombre ya está en el logo y no se repite al lado (Pablo, 3 nov 2026). */
.fusion .f-bar{ --f-bar-h:calc(var(--sp-10) + 2 * var(--sp-6)); display:flex; align-items:center; gap:var(--sp-9);
  min-height:var(--f-bar-h); padding:0 var(--sp-9) 0 0; border-bottom:1px solid var(--f-line);
  position:sticky; top:0; z-index:var(--z-sticky); background:color-mix(in srgb, var(--f-black) 86%, transparent);
  }
.fusion .f-logo{ display:flex; align-items:center; gap:var(--sp-5); cursor:pointer;
  background:none; border:0; padding:0; color:inherit; }
.fusion .f-logo{ align-self:flex-start; height:var(--f-bar-h); }
.fusion .f-logo img{ width:var(--f-bar-h); height:var(--f-bar-h); display:block; }
.fusion .f-lm{ font-family:var(--ff-f-disp); font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; line-height:.82; font-size:var(--fs-base); color:var(--f-cream); text-align:left; }
/* opción b (Pablo, 3 nov 2026): la navegación junto al logo, a la izquierda, y el idioma solo a la derecha */
.fusion .f-nav{ display:flex; gap:var(--sp-8); }
/* botones (página del sistema) y enlaces (sitio publicado: cada página tiene su
   dirección) llevan la MISMA navegación — antes solo se pintaban los botones. */
.fusion .f-nav :is(button,a){ font-family:var(--ff-f-disp); text-transform:uppercase;
  letter-spacing:.1em; font-size:var(--fs-base); color:var(--f-dim-2); background:none; border:0;
  border-bottom:2px solid transparent; padding:0 0 var(--sp-1); cursor:pointer; text-decoration:none;
  transition:color var(--f-dur-fast) var(--f-ease), border-color var(--f-dur-fast) var(--f-ease); }
.fusion .f-nav :is(button,a).on{ color:var(--marfil); border-color:var(--f-red); } @media (hover:hover) and (min-width:900px){.fusion .f-nav :is(button,a):hover{ color:var(--marfil); border-color:var(--f-red); }}
.fusion .f-langs{ display:flex; gap:var(--sp-5); padding-left:var(--sp-8); border-left:1px solid var(--f-line-2); }
.fusion .f-langs{ position:relative; margin-left:auto; padding-left:0; border-left:0; }
.fusion .f-langs > button.on::after{ content:" ↓"; }
.fusion .f-langs.is-open > button.on::after{ content:" ↑"; }
.fusion .f-langs__list{ position:absolute; top:100%; right:0; display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); margin-top:var(--sp-4); background:var(--f-black); border:1px solid var(--f-line-2); z-index:2; }
.fusion .f-langs button{ font-family:var(--ff-f-disp); font-size:var(--fs-small); letter-spacing:.1em;
  color:color-mix(in srgb, var(--marfil) 45%, var(--f-black)); background:none; border:0; cursor:pointer; }
.fusion .f-langs button.on{ color:var(--f-red); }

.fusion .f-stage{ flex:1; }
.fusion .f-view{ animation:f-fq var(--f-dur) var(--f-ease); }
@keyframes f-fq{ from{opacity:0; transform:translateY(var(--sp-8))} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .fusion .f-view{ animation:none; } }

/* placeholders — GRIS PLANO, SIN TEXTO (directiva universal de placeholder) */
.fusion .f-ph{ background:var(--gris-placeholder); }

/* botón Fusion (RECTANGULAR — no pastilla) */
.fusion .f-btn{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.09em;
  font-size:var(--fs-small); font-weight:500; padding:var(--sp-5) var(--sp-8); border:1px solid currentColor; background:none;
  color:inherit; cursor:pointer; transition:color var(--f-dur-fast) var(--f-ease), border-color var(--f-dur-fast) var(--f-ease), background var(--f-dur-fast) var(--f-ease);
  display:inline-flex; align-items:center; gap:var(--sp-5); text-decoration:none; }
@media (hover:hover) and (min-width:900px){.fusion .f-btn:hover{ border-color:var(--f-red); color:var(--f-red); }}
.fusion .f-btn--solid{ background:var(--f-red); border-color:var(--f-red); color:var(--marfil); }
@media (hover:hover) and (min-width:900px){.fusion .f-btn--solid:hover{ background:var(--f-red-deep); border-color:var(--f-red-deep); color:var(--marfil); }}
.fusion .f-lbl{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--fs-small); color:var(--f-dim); display:flex; align-items:center; gap:var(--sp-6); margin-bottom:var(--sp-7); }
.fusion .f-lbl::after{ content:""; flex:1; height:1px; background:var(--f-line); }

/* marca de hueco pendiente — visible en mockup, jamás en producción */
.fusion .f-pending{ color:var(--f-dim); font-style:italic; }

/* ══════════ HOME ══════════ */
.fusion .f-hero{ position:relative; height:min(72vh,calc(6 * var(--cell-h))); min-height:calc(4 * var(--cell-h) + 3 * var(--gutter-horizontal)); }
.fusion .f-hero .f-ph{ position:absolute; inset:0; }
.fusion .f-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,color-mix(in srgb, var(--f-black) 10%, transparent) 0%,color-mix(in srgb, var(--f-black) 40%, transparent) 50%,color-mix(in srgb, var(--f-black) 96%, transparent) 100%); }
.fusion .f-hero .f-cap{ position:absolute; left:var(--sp-10); right:var(--sp-10); bottom:var(--sp-9); z-index:2; }
.fusion .f-kick{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.34em;
  font-size:var(--fs-small); color:var(--f-red); font-weight:500; margin-bottom:var(--sp-4); }
/* Título de obra COMPLETO (incluye el paréntesis) a UNA escala. El paréntesis
   es parte del título, no un subtítulo: rompe de línea como un título largo. */
.fusion .f-h1{ font-family:var(--ff-f-disp); font-weight:600; text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(var(--fs-h1),7.5vw,var(--fs-huge)); line-height:.82; margin:0; max-width:14ch; text-wrap:balance; }
.fusion .f-meta{ display:flex; gap:var(--sp-7); margin-top:var(--sp-6); font-family:var(--ff-f-disp);
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--fs-small); color:color-mix(in srgb, var(--marfil) 81%, var(--f-black)); align-items:center; flex-wrap:wrap; }
.fusion .f-meta .dot{ color:var(--f-red); }
.fusion .f-prodstrip{ display:flex; align-items:center; gap:var(--sp-9); padding:var(--sp-6) var(--sp-10);
  background:var(--f-red); color:var(--marfil); font-family:var(--ff-f-disp); text-transform:uppercase;
  letter-spacing:.14em; font-size:var(--fs-small); flex-wrap:wrap; }
.fusion .f-prodstrip b{ font-weight:600; } .fusion .f-prodstrip .sep{ opacity:.5; }
.fusion .f-prodstrip .link{ margin-left:auto; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--marfil) 50%, transparent); cursor:pointer; }
.fusion .f-sect{ padding:var(--sp-11) var(--sp-10); }
.fusion .f-reel{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-8); }
.fusion .f-card{ cursor:pointer; text-align:left; background:none; border:0; color:inherit; padding:0; display:block; }
.fusion .f-card .f-ph{ height:calc(2 * var(--cell-h) - var(--gutter-horizontal)); margin-bottom:var(--sp-5); transition:transform var(--f-dur-slow) var(--f-ease); }
@media (hover:hover) and (min-width:900px){.fusion .f-card:hover .f-ph{ transform:translateY(-4px); }}
.fusion .f-card h3{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.02em; font-weight:500;
  font-size:var(--fs-h3); margin:0 0 var(--sp-3); line-height:1; }
.fusion .f-card .sub{ font-size:var(--fs-small); color:var(--f-dim); line-height:1.5; }
.fusion .f-card .sub .y{ color:var(--f-red); }
.fusion .f-about-band{ padding:var(--sp-11) var(--sp-10); border-top:1px solid var(--f-line);
  display:grid; grid-template-columns:1fr 1.3fr; gap:var(--sp-11); align-items:start; }
.fusion .f-about-band h2{ font-family:var(--ff-f-disp); font-weight:600; text-transform:uppercase;
  letter-spacing:.01em; font-size:var(--fs-h1); line-height:.9; margin:0; }
.fusion .f-about-band p{ font-size:var(--fs-base); line-height:1.65; color:color-mix(in srgb, var(--marfil) 79%, var(--f-black)); margin:0 0 var(--sp-6); max-width:56ch; }
.fusion .f-about-band p b{ color:var(--f-cream); font-weight:600; }

/* ══════════ FILMS (índice) ══════════ */
.fusion .f-page-head{ padding:var(--sp-10) var(--sp-10) var(--sp-8); border-bottom:1px solid var(--f-line); }
.fusion .f-page-head h1{ font-family:var(--ff-f-disp); font-weight:600; text-transform:uppercase;
  letter-spacing:.01em; font-size:clamp(var(--fs-h2),5vw,var(--fs-big)); line-height:.88; margin:0; }
.fusion .f-page-head .lead{ font-size:var(--fs-base); color:color-mix(in srgb, var(--marfil) 79%, var(--f-black)); line-height:1.6; max-width:60ch; margin:var(--sp-6) 0 0; }
.fusion .f-filmrow{ display:grid; grid-template-columns:calc(var(--cell-w) + var(--gutter-vertical)) 1fr auto; gap:var(--sp-9); align-items:center;
  padding:var(--sp-7) var(--sp-10); border-bottom:1px solid var(--f-line); cursor:pointer;
  transition:background var(--f-dur-fast) var(--f-ease); background:none; border-left:0; border-right:0; border-top:0;
  color:inherit; width:100%; text-align:left; }
@media (hover:hover) and (min-width:900px){.fusion .f-filmrow:hover{ background:var(--f-panel); }}
.fusion .f-filmrow .th{ height:var(--sp-14); }
.fusion .f-filmrow .ttl{ font-family:var(--ff-f-disp); text-transform:uppercase; font-weight:500; font-size:var(--fs-h3); line-height:1; }
.fusion .f-filmrow .ttl .rom{ color:var(--f-dim); font-weight:400; font-size:.66em; }
.fusion .f-filmrow .ln{ font-size:var(--fs-small); color:var(--f-dim); margin-top:var(--sp-3); line-height:1.5; }
.fusion .f-filmrow .rt{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.1em;
  font-size:var(--fs-small); color:var(--f-red); text-align:right; line-height:1.5; }
.fusion .f-filmrow .rt .yr{ display:block; color:color-mix(in srgb, var(--marfil) 81%, var(--f-black)); font-size:var(--fs-lg); }

/* ══════════ FICHA ÚNICA (registro institucional · plantilla B5) ══════════ */
.fusion .f-sheet-hero{ position:relative; height:min(56vh,calc(4.5 * var(--cell-h))); min-height:calc(2.5 * var(--cell-w)); }
.fusion .f-sheet-hero .f-ph{ position:absolute; inset:0; }
.fusion .f-sheet-hero .f-scrim{ background:linear-gradient(180deg,color-mix(in srgb, var(--f-black) 15%, transparent),color-mix(in srgb, var(--f-black) 90%, transparent)); }
.fusion .f-sheet-hero .f-cap{ position:absolute; left:var(--sp-10); right:var(--sp-10); bottom:var(--sp-8); z-index:2; }
.fusion .f-sheet-hero .f-h1{ font-size:clamp(var(--fs-h1),6vw,var(--fs-big)); line-height:var(--lh-display); }
.fusion .f-by{ font-style:italic; font-size:var(--fs-base); color:color-mix(in srgb, var(--marfil) 81%, var(--f-black)); margin-top:var(--sp-7); } /* aire para el descendente del paréntesis del título */
.fusion .f-meta .f-btn{ white-space:nowrap; }
.fusion .f-back{ display:inline-flex; align-items:center; gap:var(--sp-5); font-family:var(--ff-f-disp);
  text-transform:uppercase; letter-spacing:.1em; font-size:var(--fs-small); color:var(--f-dim-2); background:none;
  border:0; cursor:pointer; padding:var(--sp-6) 0 0 var(--sp-10); }
@media (hover:hover) and (min-width:900px){.fusion .f-back:hover{ color:var(--f-red); }}
.fusion .f-sheet-body{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--sp-11); padding:var(--sp-10); }
.fusion .f-synopsis h4, .fusion .f-credits h4{ font-family:var(--ff-f-disp); text-transform:uppercase;
  letter-spacing:.16em; font-size:var(--fs-small); color:var(--f-red); margin:0 0 var(--sp-5); }
.fusion .f-synopsis p{ font-size:var(--fs-lg); line-height:1.6; color:color-mix(in srgb, var(--marfil) 86%, var(--f-black)); margin:0 0 var(--sp-6); max-width:60ch; }
.fusion .f-stills{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin:var(--sp-8) 0; }
.fusion .f-stills .f-ph{ height:calc(var(--cell-w) + var(--gutter-vertical)); }
.fusion .f-laurels{ border-top:1px solid var(--f-line); margin-top:var(--sp-8); padding-top:var(--sp-7); }
.fusion .f-laurels h4{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.16em;
  font-size:var(--fs-small); color:var(--f-dim); margin:0 0 var(--sp-5); }
.fusion .f-laurels .row{ display:flex; gap:var(--sp-6); align-items:baseline; padding:var(--sp-4) 0; font-size:var(--fs-small); color:color-mix(in srgb, var(--marfil) 81%, var(--f-black)); }
.fusion .f-laurels .row .yr{ font-family:var(--ff-f-disp); color:var(--f-red); letter-spacing:.08em; width:var(--sp-12); flex:none; }
.fusion .f-aside{ background:var(--f-panel); border:1px solid var(--f-line); padding:var(--sp-8); align-self:start; }
.fusion .f-aside h4{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.16em; font-size:var(--fs-small); color:var(--f-dim); margin:0 0 var(--sp-6); }
.fusion .f-aside dl{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4) var(--sp-8); margin:0 0 var(--sp-8); font-size:var(--fs-small); }
.fusion .f-aside dt{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-small); color:var(--f-dim); }
.fusion .f-aside dd{ margin:0; color:var(--f-cream); font-variant-numeric:tabular-nums; }
.fusion .f-epk{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
  padding:var(--sp-6) 0; border-top:1px solid var(--f-line); border-bottom:1px solid var(--f-line); margin-bottom:var(--sp-7); }
.fusion .f-epk .fmt{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.1em; font-size:var(--fs-small); color:var(--f-dim); }
.fusion .f-fund{ font-size:var(--fs-small); color:var(--f-dim); line-height:1.6; }
.fusion .f-fund b{ color:var(--f-cream); font-weight:600; font-family:var(--ff-f-disp); text-transform:uppercase;
  letter-spacing:.06em; display:block; font-size:var(--fs-small); margin-bottom:var(--sp-3); }

/* ── stub honesto (crear ≠ publicar) ── */
.fusion .f-stub{ padding:var(--sp-14) var(--sp-10); text-align:center; }
.fusion .f-stub .f-kick{ margin-bottom:var(--sp-6); }
.fusion .f-stub h1{ font-family:var(--ff-f-disp); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-big); letter-spacing:.01em; margin:0 0 var(--sp-6); line-height:.9; }
.fusion .f-stub p{ color:var(--f-dim); font-size:var(--fs-base); max-width:44ch; margin:0 auto; line-height:1.6; }

/* ── footer (persistente) ── */
.fusion .f-foot{ padding:var(--sp-9) var(--sp-10); border-top:1px solid var(--f-line);
  display:flex; gap:var(--sp-9); align-items:flex-start; font-size:var(--fs-small); color:var(--f-dim); line-height:1.6; }
.fusion .f-foot .cred{ max-width:calc(2.5 * var(--cell-w)); }
.fusion .f-foot .cred b{ color:var(--f-cream); font-weight:600; }
.fusion .f-foot .sib{ margin-left:auto; text-align:right; }
.fusion .f-foot .sib a{ color:var(--f-dim-2); text-decoration:none; display:block; padding:var(--sp-1) 0; cursor:pointer; }
@media (hover:hover) and (min-width:900px){.fusion .f-foot .sib a:hover{ color:var(--f-red); }}

/* ── toast ── */
.fusion .f-toast{ position:fixed; left:50%; bottom:var(--sp-9); transform:translateX(-50%); z-index:var(--z-drawer);
  background:var(--f-panel); border:1px solid var(--f-line-2); color:var(--f-cream); font-family:var(--ff-f-disp);
  text-transform:uppercase; letter-spacing:.1em; font-size:var(--fs-small); padding:var(--sp-6) var(--sp-8); }

@media (max-width:900px){
  .fusion .f-reel{ grid-template-columns:1fr 1fr; }
  .fusion .f-about-band, .fusion .f-sheet-body{ grid-template-columns:1fr; }
  .fusion .f-filmrow{ grid-template-columns:var(--sp-14) 1fr; }
  .fusion .f-filmrow .rt{ grid-column:2; text-align:left; }
}
@media (max-width:899px){ /* móvil (Pablo, 3 nov 2026): menú plegado bajo la barra */
  .fusion .f-bar{ flex-wrap:wrap; gap:0 var(--sp-6); padding:0 var(--sp-7) 0 0; }
  .fusion .m-menu{ font-family:var(--ff-f-disp); text-transform:uppercase; letter-spacing:.1em; font-size:var(--fs-small); color:var(--marfil); }
  .fusion .f-nav{ display:none; }
  .fusion .f-bar.is-open .f-nav{ display:flex; flex-direction:column; order:4; width:100%; margin-left:0; gap:0; padding:var(--sp-4) 0 var(--sp-5) var(--sp-7); }
  .fusion .f-bar.is-open .f-nav :is(button,a){ min-height:var(--sp-10); text-align:left; padding:0; }
  .fusion .f-langs{ order:2; margin-left:auto; padding-left:0; border-left:0; }
  .fusion .f-bar .m-menu{ order:2; margin-left:var(--sp-6); }
  .fusion .f-foot{ flex-wrap:wrap; padding:var(--sp-8) var(--sp-7); gap:var(--sp-7); }
  .fusion .f-foot .cred{ max-width:none; }
  .fusion .f-foot .sib{ margin-left:0; text-align:left; }
  .fusion .f-hero .f-cap{ left:var(--sp-7); right:var(--sp-7); }
}
@media (max-width:600px){
  .fusion .f-reel{ grid-template-columns:1fr; }
}


/* ── SINGLETONS · manifiesto (diez principios) e índice por pertenencia ──
   Bajo .fusion, como el resto de la piel: antes iban sueltas y contradecían el
   aislamiento que declara la cabecera. Desde el 11 oct 2026 el manifiesto es
   texto real, no diez huecos, y el desarrollo de cada principio se LEE: color de
   lectura (--f-dim-2, ≈9:1 sobre el negro de sala), interlínea de la rejilla
   (--lh-body), medida de 60ch como la sinopsis, aire entre párrafos y una
   subcelda (--sp-9) entre principios. Las notas reutilizan el bloque de laureles. */
.fusion .f-manif{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-9)}
.fusion .f-manif li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:baseline;border-top:1px solid var(--f-line);padding-top:var(--sp-4)}
.fusion .f-manif .n{font-family:var(--ff-f-disp);font-size:var(--fs-h2);line-height:1;color:var(--f-red)}
.fusion .f-manif b{display:block;font-family:var(--ff-f-disp);font-size:var(--fs-lg);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--sp-5)}
.fusion .f-manif p,.fusion .f-laurels p{margin:0 0 var(--sp-5);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--f-dim-2);max-width:60ch}
.fusion .f-manif p:last-child,.fusion .f-laurels p:last-child{margin-bottom:0}
.fusion .f-idx{display:grid;grid-template-columns:1fr;gap:var(--sp-1);border-top:1px solid var(--f-line);padding:var(--sp-4) 0;cursor:pointer}
@media (hover:hover) and (min-width:900px){.fusion .f-idx:hover b{color:var(--f-red)}}
.fusion .f-idx b{font-family:var(--ff-f-disp);font-size:var(--fs-lg);text-transform:uppercase;letter-spacing:.03em}
.fusion .f-idx span{font-size:var(--fs-small);color:var(--f-dim)}

/* ── IMPRESIÓN · el PDF sale con TEXTO y VECTORES ───────────────────────
   Las guías de rejilla son tapices de degradados y las barras fijas se repiten o se
   cortan en papel: ambas se neutralizan al imprimir. Nada más se toca. */
@media print{
  .fusion{background:var(--marfil)}
  .fusion [class*="grid"]::before,.fusion.grid-on::before{display:none !important}
  .fusion header,.fusion .bar,.fusion nav[class*="bar"]{position:static !important}
  .fusion [class*="marquee"],.fusion [class*="-mq"]{display:none !important}
  .fusion section,.fusion article,.fusion [class*="card"]{break-inside:avoid}
}