/* ==========================================================================
   ¿Cuánto dinero ha generado…? (Franquicias) · serie-franquicias.css
   Identidad (la miniatura aprobada y el motor de la serie, series/franquicias/_base/MOTION.md):
   cartel de cine morado muy oscuro (#140c24) con polvo de estrellas quieto, oro (#e2c35a,
   degradado #f6dc85 → #b8901c en las casillas), crema (#f3eee2) para el texto, lavanda
   (#ada2c8) para lo secundario y coral (#e8826b) solo para lo que se resta. Pieza propia:
   el contador de casillas doradas y «De dónde sale el dinero» (barras por fuente de ingresos).
   Los bloques morados son iguales en los dos modos; el resto de la página es la de siempre.
   Se carga en el hub y en cada episodio, después de base y lectura.
   ========================================================================== */
[data-serie="franquicias"] { --acento: #e2c35a; --acento-tinta: #5b3f8f; --fr-oro: #e2c35a; --fr-oro-1: #f6dc85; --fr-oro-2: #b8901c; --fr-coral: #e8826b; --fr-lavanda: #ada2c8; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) [data-serie="franquicias"] { --acento-tinta: #e2c35a; } }
:root[data-tema="oscuro"] [data-serie="franquicias"], [data-serie="franquicias"] .tema-oscuro { --acento-tinta: #e2c35a; }
.sello[data-serie="franquicias"] { --sello-fondo: #140c24; --sello-tinta: #e2c35a; --sello-borde: #5a4a80; }
.cubierta[data-serie="franquicias"] {
  background: radial-gradient(ellipse at 50% 40%, #2a1c48 0, #140c24 70%), #140c24; color: #f3eee2;
  box-shadow: inset 0 0 0 1px #3d2f5e;
}
.cubierta[data-serie="franquicias"] span { background: #e2c35a; color: #140c24; }

/* Bloques morados: sus propios tokens oscuros (todas las parejas de texto por encima de 4,5:1) */
.cine--fr, .cab-serie--fr, .fr-desglose, .fr-marcador, .fr-ficha {
  --fondo: #140c24; --fondo-2: #180f2b; --sup: #1d1430; --sup-2: #261b3d; --sup-3: #31244d;
  --borde: #33264f; --borde-2: #4a3a6e; --borde-campo: #8f84b0;
  --texto: #f3eee2; --texto-2: #d6cfe4; --texto-3: #ada2c8;
  --enlace: #e2c35a; --foco: #e2c35a; --oro-texto: #e2c35a; --acento-tinta: #e2c35a;
  --boton: #f3eee2; --boton-texto: #140c24;
  color: var(--texto);
}
.cine--fr :focus-visible, .cab-serie--fr :focus-visible, .fr-desglose :focus-visible, .fr-marcador :focus-visible, .fr-ficha :focus-visible { outline-color: #e2c35a; }
/* El polvo de estrellas, quieto (como el fondo del vídeo): dos capas de puntos, decorativas */
.cine--fr, .cab-serie--fr, .fr-desglose, .fr-marcador {
  background-color: #140c24;
  background-image:
    radial-gradient(rgb(243 238 226 / .5) .6px, transparent 1.1px),
    radial-gradient(rgb(226 195 90 / .35) .7px, transparent 1.2px),
    radial-gradient(ellipse at 70% 0%, rgb(68 44 112 / .55) 0, transparent 60%);
  background-size: 97px 89px, 151px 137px, 100% 100%;
  background-position: 13px 21px, 61px 7px, 0 0;
}
.cine--fr .cine__cinta a, .cine--fr .cine__cinta span:not(.sello):not(.etiqueta) { color: var(--texto); }
.cine--fr h1 { color: #f3eee2; }
.cine--fr .etiqueta { background: rgb(226 195 90 / .14); color: #f6dc85; }

/* ---------- El contador de casillas doradas ---------- */
.fr-contador { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0; }
.fr-contador__antes { font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1 var(--sans); color: #e2c35a; }
.fr-contador__casillas { display: inline-flex; align-items: flex-end; gap: .22rem; }
.fr-contador__casilla {
  display: inline-grid; place-items: center; width: clamp(2.1rem, 1.7rem + 1.6vw, 3.1rem); height: clamp(2.9rem, 2.3rem + 2.2vw, 4.2rem);
  border-radius: 7px; background-color: #e2c35a; background-image: linear-gradient(180deg, #f6dc85 0, #e2c35a 52%, #b8901c 100%); color: #140c24;
  box-shadow: inset 0 -3px 0 rgb(20 12 36 / .28), inset 0 1px 0 rgb(255 255 255 / .55), 0 6px 14px -8px #000;
  font: 850 clamp(1.6rem, 1.3rem + 1.3vw, 2.5rem)/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.fr-contador__punto { font-style: normal; font: 850 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--sans); color: #e2c35a; padding-bottom: .2rem; }
.fr-contador__unidad { max-width: 9rem; font: 700 .8125rem/1.15 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #f6dc85; }
.fr-contador--s .fr-contador__casilla { width: 1.75rem; height: 2.35rem; border-radius: 5px; font-size: 1.375rem; }
.fr-contador--s .fr-contador__punto { font-size: 1.125rem; }
.fr-contador--s .fr-contador__antes { font-size: 1.375rem; }
.fr-contador--s .fr-contador__unidad { font-size: .75rem; max-width: 7rem; }

/* En la banda de cine: compacto, para que el vídeo siga entrando en el primer pantallazo */
.fr-cine { display: grid; gap: .45rem; margin-top: var(--e-4); }
.fr-cine__linea { margin: 0; font: 500 .8125rem/1.45 var(--mono); color: var(--texto-3); }
.fr-cine__linea a { color: #e2c35a; }

/* ---------- Hub: cabecera de cartel de cine ---------- */
.cab-serie--fr { border-bottom: 1px solid #33264f; }
.cab-serie--fr h1 { color: #f3eee2; max-width: 18ch; }
.cab-serie--fr .entradilla { color: var(--texto-2); max-width: 40rem; }
.cab-serie--fr .antetitulo { color: #f6dc85; }
.fr-cartel {
  display: grid; justify-items: start; gap: var(--e-3); padding: var(--e-5); border-radius: var(--r-4);
  background: rgb(20 12 36 / .82); border: 1px solid #4a3a6e; box-shadow: 0 30px 60px -30px #000, inset 0 0 0 1px rgb(226 195 90 / .12);
}
.fr-cartel__antes { margin: 0; font: 650 var(--t-mono)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #e2c35a; }
.fr-cartel__linea { margin: 0; color: var(--texto-2); font-size: var(--t-s); }
.boton--oro { background: #e2c35a; color: #140c24; }

/* ---------- La pieza propia: De dónde sale el dinero ---------- */
.fr-desglose { margin: 0 0 var(--e-7); padding: var(--e-5); border-radius: var(--r-4); border: 1px solid #33264f; box-shadow: 6px 6px 0 rgb(20 12 36 / .35); }
.fr-desglose__antes { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--e-2); font: 650 var(--t-mono)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #e2c35a; }
.fr-desglose__h { margin: 0 0 var(--e-2); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.03em; line-height: 1.08; color: #f3eee2; text-wrap: balance; }
.fr-desglose__intro { margin: 0 0 var(--e-5); color: var(--texto-2); font-size: var(--t-s); }
.fr-barras { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
.fr-barra__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 .4rem; }
.fr-barra__nombre { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: #f3eee2; }
.fr-barra__nombre .ico { color: #e2c35a; }
.fr-barra__cifra { font: 800 1.0625rem/1.2 var(--sans); color: #f6dc85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-barra__pista { position: relative; display: block; height: .9rem; border-radius: var(--r-p); background: #261b3d; overflow: hidden; }
.fr-barra__valor, .fr-barra__max { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.fr-barra__valor { background: linear-gradient(90deg, #b8901c, #e2c35a 60%, #f6dc85); }
.fr-barra__max { background: repeating-linear-gradient(135deg, rgb(226 195 90 / .45) 0 6px, rgb(226 195 90 / .12) 6px 12px); }
.fr-barra--estimacion .fr-barra__valor { background: repeating-linear-gradient(135deg, #e2c35a 0 7px, #b8901c 7px 14px); }
.fr-barra--hueco .fr-barra__valor { background: repeating-linear-gradient(135deg, rgb(173 162 200 / .75) 0 7px, rgb(173 162 200 / .3) 7px 14px); }
.fr-barra--hueco .fr-barra__cifra { color: var(--texto-2); }
.fr-barra--sin .fr-barra__nombre { color: var(--texto-2); font-weight: 600; }
.fr-barra--sin .fr-barra__nombre .ico { color: var(--texto-3); }
.fr-barra--sin .fr-barra__cifra { font: 650 .8125rem/1.3 var(--mono); color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.fr-barra--sin { padding-top: var(--e-3); border-top: 1px dashed #4a3a6e; }
.fr-barra--sin + .fr-barra--sin { padding-top: 0; border-top: 0; }
.fr-barra__nota { margin: .35rem 0 0; font: 500 .8125rem/1.45 var(--mono); color: var(--texto-3); }

.fr-total { display: grid; gap: var(--e-3); margin-top: var(--e-6); padding-top: var(--e-5); border-top: 2px solid #e2c35a; }
.fr-total__h { margin: 0; font: 650 var(--t-mono)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #e2c35a; }
.fr-horquilla { position: relative; height: 1.1rem; margin-top: var(--e-2); border-radius: var(--r-p); background: #261b3d; }
.fr-horquilla__rango { position: absolute; top: 0; bottom: 0; right: 0; border-radius: var(--r-p); background: repeating-linear-gradient(135deg, rgb(226 195 90 / .6) 0 7px, rgb(226 195 90 / .22) 7px 14px); box-shadow: inset 0 0 0 1.5px #e2c35a; }
.fr-horquilla__punto { position: absolute; top: 50%; width: 1.35rem; height: 1.35rem; margin: -.675rem 0 0 -.675rem; border-radius: 50%; background: #f6dc85; box-shadow: 0 0 0 3px #140c24, 0 0 0 5px #e2c35a; }
.fr-horquilla__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin: 0; }
.fr-horquilla__cifras div { padding-top: .45rem; border-top: 1px solid #4a3a6e; }
.fr-horquilla__cifras dt { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.fr-horquilla__cifras dd { margin: .25rem 0 0; font: 800 clamp(1rem, .9rem + .5vw, 1.25rem)/1.15 var(--sans); color: #f3eee2; font-variant-numeric: tabular-nums; }
.fr-horquilla__central { border-top-color: #e2c35a !important; }
.fr-horquilla__central dd { color: #f6dc85; }
.fr-total__texto { margin: 0; color: var(--texto-2); font-size: var(--t-s); }
.fr-total__nota { margin: 0; font: 500 .8125rem/1.45 var(--mono); color: var(--texto-3); }
.fr-cambio { display: flex; gap: .55rem; align-items: flex-start; margin: var(--e-5) 0 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: #1d1430; border: 1px solid #33264f; font-size: .9375rem; color: var(--texto-2); }
.fr-cambio .ico { flex: none; margin-top: .15rem; color: #e2c35a; }
.fr-cambio b { color: #f3eee2; }

/* ---------- Carril: ficha rápida ---------- */
.fr-ficha { background: #140c24; border-color: #33264f; }
.fr-ficha__datos { display: grid; gap: .55rem; margin: 0 0 var(--e-4); }
.fr-ficha__datos div { display: grid; gap: .1rem; padding-bottom: .5rem; border-bottom: 1px solid #33264f; }
.fr-ficha__datos dt { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.fr-ficha__datos dd { margin: 0; font-weight: 650; color: #f3eee2; font-size: .9375rem; }
.fr-ficha__oro { color: #f6dc85 !important; font-weight: 800 !important; }

/* ---------- Hub: el marcador ---------- */
.fr-marcador { padding: var(--e-6) var(--e-5); border-radius: var(--r-4); border: 1px solid #33264f; }
.fr-marcador .cab-seccion p { color: var(--texto-2); }
.fr-marcador .antetitulo { color: #f6dc85; }
.fr-marcador__lista { display: grid; gap: var(--e-4); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.fr-marcador__fila { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .35rem .9rem; align-items: center; padding-top: var(--e-4); border-top: 1px solid #33264f; }
.fr-marcador__n { grid-row: span 3; align-self: start; font: 300 2.25rem/1 var(--sans); color: #e2c35a; font-variant-numeric: tabular-nums; }
.fr-marcador__nombre { display: grid; gap: .15rem; margin: 0; font: 760 1.25rem/1.15 var(--sans); letter-spacing: -0.02em; }
.fr-marcador__nombre a { color: #f3eee2; }
.fr-marcador__pista { position: relative; display: block; height: .85rem; border-radius: var(--r-p); background: #261b3d; }
.fr-marcador__rango { position: absolute; top: 0; bottom: 0; border-radius: var(--r-p); background: repeating-linear-gradient(135deg, rgb(226 195 90 / .6) 0 7px, rgb(226 195 90 / .22) 7px 14px); box-shadow: inset 0 0 0 1.5px #e2c35a; }
.fr-marcador__punto { position: absolute; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border-radius: 50%; background: #f6dc85; box-shadow: 0 0 0 3px #140c24, 0 0 0 4.5px #e2c35a; }
.fr-marcador__cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0; }
.fr-marcador__cifra b { font: 800 1.25rem/1.1 var(--sans); color: #f6dc85; font-variant-numeric: tabular-nums; }
.fr-marcador__cifra span { font: 500 .8125rem/1.3 var(--mono); color: var(--texto-3); }
@media (min-width: 48rem) {
  .fr-marcador { padding: var(--e-7) var(--e-6); }
  .fr-marcador__fila { grid-template-columns: 2.75rem minmax(0, 15rem) minmax(0, 1fr) minmax(0, 11rem); }
  .fr-marcador__n { grid-row: auto; align-self: center; }
  .fr-marcador__cifra { display: grid; justify-items: end; text-align: right; }
}

/* ---------- Hub: cómo contamos el dinero ---------- */
.como-fr { display: grid; gap: var(--hueco); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.como-fr li { display: grid; align-content: start; gap: .5rem; padding: var(--e-5); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--borde); border-top: 3px solid #e2c35a; }
.como-fr .ico { color: var(--acento-tinta); }
.como-fr h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
.como-fr p { margin: 0; color: var(--texto-2); font-size: var(--t-s); }
.como-fr__aviso { max-width: 48rem; margin: var(--e-5) 0 0; color: var(--texto-2); font-size: var(--t-s); }

@media (min-width: 64rem) {
  .fr-desglose { padding: var(--e-6); }
  .cab-serie--fr .cab-serie__rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .fr-cartel .boton { transition: none; } }
@media print {
  .fr-desglose, .fr-marcador, .cine--fr, .cab-serie--fr { background: none !important; color: #000; box-shadow: none; }
}

/* Con pocas franquicias, cada tarjeta de la colección conserva su tamaño (no estira una sola a todo el ancho) */
[data-serie="franquicias"] .rejilla-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.fr-marcador__nombre a { display: inline-block; padding-block: .15rem; }