/* ==========================================================================
   Historias del dinero · serie-historias.css
   Identidad (DISENO_WEB.md §7): óleo a sangre con degradado a noche (#120e0a),
   oro (#d8b26a), pergamino (#eadcbe) y tinta (#2a1e12). Titulares en 300 con la
   palabra clave en 700 oro. Las piezas de óleo son siempre noche (igual en los dos
   modos); la línea del tiempo es siempre pergamino. Se carga en el hub y en cada
   capítulo, después de base y lectura.
   ========================================================================== */
[data-serie="historias"] {
  --hd-oro: #d8b26a; --hd-oro-2: #e8cd92; --hd-pergamino: #eadcbe; --hd-noche: #120e0a; --hd-rojo: #8e2f1c;
}

/* Bloques de noche al óleo: sus propios tokens oscuros (cálidos), con contraste AA */
.cab-oleo, .cine--oleo, .hcap, .monetario, .ficha-moneda {
  --fondo: #120e0a; --fondo-2: #17120d; --sup: #1d1711; --sup-2: #261e15; --sup-3: #32281c;
  --borde: #3a2e1f; --borde-2: #4f402b; --borde-campo: #8f7a58;
  --texto: #f4ead2; --texto-2: #dccfb3; --texto-3: #bcab8c;
  --enlace: #e8cd92; --foco: #e8cd92; --oro-texto: #e2c35a;
  --boton: #f4ead2; --boton-texto: #120e0a;
  color: var(--texto);
}
.cab-oleo :focus-visible, .cine--oleo :focus-visible, .hcap :focus-visible, .monetario :focus-visible { outline-color: var(--hd-oro-2); }

/* ---------- Cabecera del hub: óleo a sangre ---------- */
.cab-oleo { position: relative; isolation: isolate; overflow: hidden; background: #120e0a; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.cab-oleo__fondo { position: absolute; z-index: -2; top: 0; right: 0; width: 100%; height: 26rem; object-fit: cover; object-position: 70% 30%; opacity: .7; }
.cab-oleo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(18 14 10 / .25) 0, rgb(18 14 10 / .7) 14rem, #120e0a 26rem); }
.cab-oleo h1 { font-weight: 300; letter-spacing: -0.03em; color: #f4ead2; }
.cab-oleo h1 strong { font-weight: 700; color: var(--hd-oro); }
.cab-oleo .entradilla { color: var(--texto-2); max-width: 36rem; }
.cab-oleo .antetitulo { color: var(--hd-oro); }
.cab-oleo .sello[data-serie="historias"] { box-shadow: inset 0 0 0 1.5px #6d5937; }
.cab-oleo__datos { margin-top: var(--e-6); max-width: 34rem; }
.cab-oleo__datos li { border-top-color: var(--hd-oro); }
.cab-oleo__datos b { color: var(--hd-oro); }
.cab-oleo__datos span { color: var(--texto-2); }
.cab-oleo__credito { position: absolute; right: var(--lado); bottom: .6rem; margin: 0; font: 500 .75rem/1.3 var(--mono); color: var(--texto-3); }
@media (min-width: 64rem) {
  .cab-oleo__fondo { width: min(72%, 70rem); height: 100%; object-position: 85% 30%; opacity: .95; }
  .cab-oleo::before { background: linear-gradient(90deg, #120e0a 0, #120e0a 26%, rgb(18 14 10 / .78) 46%, rgb(18 14 10 / .1) 78%), linear-gradient(0deg, #120e0a 0, rgb(18 14 10 / 0) 30%); }
  .cab-oleo .cab-serie__rejilla { align-items: end; }
}

/* El próximo estreno, dentro de la cabecera */
.estreno-oleo {
  position: relative; display: grid; gap: .5rem; padding: var(--e-5); padding-right: 7rem; border-radius: var(--r-4);
  background: rgb(18 14 10 / .82); border: 1px solid #5b4a30; box-shadow: 0 30px 60px -30px #000;
}
.estreno-oleo .meta { margin: 0; color: var(--hd-oro); font: 650 var(--t-mono)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.estreno-oleo__cuando { margin: 0; font: 300 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--sans); letter-spacing: -0.04em; color: #f4ead2; font-variant-numeric: tabular-nums; }
.estreno-oleo h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.estreno-oleo h2 strong { font-weight: 750; color: var(--hd-oro); }
.estreno-oleo h2 a { color: inherit; text-decoration: none; }
.estreno-oleo h2 a:hover { text-decoration: underline; }
.estreno-oleo__dur { margin: 0; font: 500 var(--t-mono)/1.4 var(--mono); color: var(--texto-2); }
.estreno-oleo .botones { margin-top: .4rem; }
.estreno-oleo__moneda { position: absolute; top: var(--e-5); right: var(--e-5); width: 5rem; height: 5rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--hd-oro), 0 12px 24px -8px #000; }
.cab-oleo .avisame, .hcap .avisame, .linea-hd .hito--programado .avisame { color: #f4ead2; border-color: #a58a5a; }
.cab-oleo .avisame:hover, .hcap .avisame:hover { background: rgb(255 255 255 / .08); }
.boton--oro { background: var(--hd-oro); color: #120e0a; }

/* ---------- Tarjetas de capítulo (óleo + moneda) ---------- */
.hcaps { display: grid; gap: var(--hueco); }
@media (min-width: 64rem) { .hcaps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hcap { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-4); background: #120e0a; border: 1px solid #3a2e1f; }
.hcap__imagen { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.hcap__imagen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 14 10 / 0) 55%, #120e0a 100%); }
.hcap__oleo, .hcap__imagen .cubierta { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hcap__moneda { position: absolute; z-index: 1; top: var(--e-4); right: var(--e-4); width: 4.5rem; height: 4.5rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--hd-oro), 0 12px 24px -8px #000; }
.hcap__txt { display: grid; align-content: start; gap: .6rem; padding: 0 var(--e-5) var(--e-5); margin-top: -1.5rem; position: relative; z-index: 1; }
.hcap .meta { margin: 0; color: var(--hd-oro); font: 650 var(--t-mono)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.hcap__titulo { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.08; color: #f4ead2; }
.hcap__titulo strong { font-weight: 700; color: var(--hd-oro); }
.hcap__titulo a { color: inherit; text-decoration: none; }
.hcap__titulo a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.hcap__desc { margin: 0; color: var(--texto-2); font-size: var(--t-s); }
.hcap__datos { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font: 500 .8125rem/1.4 var(--mono); color: var(--texto-2); }
.hcap__datos li { display: flex; gap: .45rem; align-items: baseline; }
.hcap__datos .ico { flex: none; color: var(--hd-oro); translate: 0 .15em; }
.hcap .botones { margin-top: .4rem; }

/* ---------- La línea del tiempo, sobre pergamino (siempre claro) ---------- */
.pergamino {
  --texto: #2a1e12; --texto-2: #4a3a26; --texto-3: #5e4c33; --sup: #f4ead2; --sup-2: #e3d1ad; --borde: #cdb88d; --borde-2: #b79d6c; --borde-campo: #7a6340;
  --boton: #2a1e12; --boton-texto: #f4ead2; --foco: #2a1e12;
  color-scheme: light; color: var(--texto);
  padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); border-radius: var(--r-4);
  background: #eadcbe radial-gradient(120% 90% at 50% 0%, #f1e5c9 0, #eadcbe 55%, #dfcca6 100%);
  box-shadow: inset 0 0 0 1px #cdb88d, inset 0 0 60px rgb(122 90 40 / .18), 0 20px 40px -30px rgb(42 30 18 / .6);
}
.pergamino :focus-visible { outline-color: #2a1e12; }
.pergamino .filtros { margin-bottom: var(--e-6); }
.pergamino .chip { background: #f4ead2; border-color: #b79d6c; color: #2a1e12; }
.pergamino .chip[aria-pressed="true"] { background: #2a1e12; border-color: #2a1e12; color: #f4ead2; }
.arco + .arco { margin-top: var(--e-6); }
.arco__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: var(--e-4); padding-bottom: .55rem; border-bottom: 2px solid #2a1e12; font-size: var(--t-h3); font-weight: 300; letter-spacing: -0.02em; }
.arco__titulo span { font: 700 var(--t-mono)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #7d5a14; }
.arco__lista { display: grid; gap: .5rem var(--hueco); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.hito { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .6rem; align-items: start; padding: .7rem .8rem .75rem .5rem; border-radius: var(--r-2); border-left: 3px solid #b79d6c; }
.hito__n { font: 300 1.75rem/1 var(--sans); letter-spacing: -0.04em; color: #7d5a14; font-variant-numeric: tabular-nums; text-align: right; }
.hito__txt { display: grid; gap: .25rem; justify-items: start; min-width: 0; }
.hito__titulo { font-weight: 650; line-height: 1.25; color: #2a1e12; }
a.hito__titulo { text-decoration: underline; text-decoration-color: #b79d6c; text-underline-offset: .18em; }
a.hito__titulo:hover { text-decoration-color: currentColor; }
.hito__estado { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #5e4c33; }
.hito--plan .hito__titulo { font-weight: 500; color: #4a3a26; }
.hito--plan { border-left-style: dashed; }
.hito--publicado { background: #f4ead2; border-left-color: #7d5a14; }
.hito--programado { background: #120e0a; border-left-color: var(--hd-oro); color: #f4ead2; }
.hito--programado .hito__n, .hito--programado .hito__estado { color: var(--hd-oro); }
.hito--programado .hito__titulo { color: #f4ead2; }
.hito--programado .avisame { min-height: 40px; margin-top: .3rem; }
.hito--programado :focus-visible { outline-color: var(--hd-oro-2); }

/* ---------- El monetario ---------- */
.monetario { background: #120e0a radial-gradient(90% 120% at 50% 0%, #241b11 0, #120e0a 70%); }
.monetario .cab-seccion { border-top-color: var(--hd-oro); }
.monetario .cab-seccion .antetitulo { color: var(--hd-oro); }
.monetario__vitrina { display: grid; gap: var(--e-6) var(--hueco); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.pieza-moneda { display: grid; justify-items: center; text-align: center; gap: .35rem; }
.pieza-moneda__img { width: min(100%, 11rem); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px var(--hd-oro), 0 0 0 8px #120e0a, 0 0 0 9px #4f402b, 0 24px 40px -18px #000; margin-bottom: .6rem; }
.pieza-moneda__img--vacia { display: grid; place-items: center; background: repeating-radial-gradient(circle, #1d1711 0 6px, #241c13 6px 7px); color: #8f7a58; font: 300 2.5rem/1 var(--sans); box-shadow: 0 0 0 2px #4f402b, 0 0 0 8px #120e0a, 0 0 0 9px #3a2e1f; }
.pieza-moneda .meta { margin: 0; color: var(--hd-oro); font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.pieza-moneda h3 { font-size: 1.0625rem; font-weight: 650; line-height: 1.25; }
.pieza-moneda__cap { margin: 0; font-size: var(--t-s); color: var(--texto-2); }
.pieza-moneda--hueco h3 { color: var(--texto-2); font-weight: 500; }

/* ---------- Cómo es cada capítulo ---------- */
.como-hd { display: grid; gap: var(--hueco); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.como-hd 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); }
.como-hd .ico { color: var(--acento-tinta); }
.como-hd h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
.como-hd p { margin: 0; color: var(--texto-2); font-size: var(--t-s); }

/* ---------- Ficha: banda de cine al óleo ---------- */
.cine--oleo { position: relative; isolation: isolate; overflow: hidden; background: #120e0a; }
.cine__oleo { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 34rem; pointer-events: none; }
.cine__oleo img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 25%; opacity: .5; }
.cine__oleo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 14 10 / .35) 0, rgb(18 14 10 / .8) 60%, #120e0a 100%); }
@media (min-width: 64rem) {
  .cine__oleo { inset: 0; height: auto; }
  .cine__oleo img { position: absolute; top: 0; right: 0; width: 78%; height: min(100%, 46rem); opacity: .55; }
  .cine__oleo::after { background: linear-gradient(90deg, #120e0a 0, #120e0a 22%, rgb(18 14 10 / .82) 42%, rgb(18 14 10 / .35) 75%, rgb(18 14 10 / .55) 100%), linear-gradient(0deg, #120e0a 0, #120e0a 30%, rgb(18 14 10 / 0) 60%); }
}
.cine--oleo h1 { font-weight: 300; letter-spacing: -0.03em; color: #f4ead2; }
.cine--oleo h1 strong { font-weight: 700; color: var(--hd-oro); }
.cine--oleo .cine__cinta, .cine--oleo .cine__cinta a { color: var(--hd-oro); }
.cine--oleo .cine__cinta .etiqueta { background: rgb(36 28 19 / .9); color: var(--texto-2); }
.cine--oleo .sello[data-serie="historias"] { box-shadow: inset 0 0 0 1.5px #6d5937; }
.cine--oleo .capitulos { background: rgb(29 23 17 / .88); border-color: #4f402b; }
.cine--oleo .capitulos time { color: var(--hd-oro); }
.cine--oleo .reproductor { box-shadow: 0 0 0 1px rgb(216 178 106 / .35), 0 30px 60px -30px #000; }
.cine--oleo .barra-video { background: #120e0a; }
.cine--oleo .avisame { color: #f4ead2; border-color: #a58a5a; }
.cine__historia { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.cine__moneda { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; color: #f4ead2; text-decoration: none; }
.cine__moneda img { width: 3.25rem; height: 3.25rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--hd-oro), 0 8px 18px -6px #000; }
.cine__moneda span { display: grid; font-weight: 650; font-size: .9375rem; line-height: 1.2; }
.cine__moneda small { font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--hd-oro); }
.cine__moneda:hover span { text-decoration: underline; }
.cine__epoca { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font: 500 .8125rem/1.3 var(--mono); color: var(--texto-2); }
.cine__epoca .ico { color: var(--hd-oro); }
.cine__credito { margin: 0; font: 500 .75rem/1.4 var(--mono); color: var(--texto-3); }

/* Reproductor sin miniatura pública: el óleo hace de póster */
.cubierta[data-serie="historias"] { background: #120e0a; color: #f4ead2; box-shadow: inset 0 0 0 1px #3a2e1f; }
.cubierta[data-serie="historias"] span { background: var(--hd-oro); color: #120e0a; }
/* Póster de óleo a sangre en todo el marco, sin velo oscuro, porque encima no se pinta nada (§1.5). Los óleos (3:2)
   dejan oscuro su 40 % izquierdo para el texto de la cabecera: aquí se amplían y se anclan a la derecha para que la
   escena llene el 16:9. */
.cubierta.cubierta--oleo { position: relative; isolation: isolate; background-size: 145% auto; background-position: 100% 12%; padding: clamp(1rem, .6rem + 2vw, 2rem); align-content: end; }
.cubierta--oleo b { font-weight: 300; font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); max-width: 16ch; color: #f4ead2; }

/* ---------- Ficha: glosario, cuándo y dónde, la moneda ---------- */
.glosario__intro { color: var(--texto-2); font-size: var(--t-s); margin: 0 0 var(--e-4); }
.glosario { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--borde-2); }
.glosario > div { display: grid; gap: .2rem .9rem; padding: .8rem 0; border-bottom: 1px solid var(--borde); }
.glosario dt { font-weight: 720; letter-spacing: -0.01em; color: var(--acento-tinta); }
.glosario dd { margin: 0; color: var(--texto-2); font-size: var(--t-s); line-height: 1.55; }
@media (min-width: 40rem) { .glosario > div { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.donde-hd { display: grid; gap: var(--e-4); padding: var(--e-5); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--borde); }
.donde-hd .meta { margin: 0 0 .35rem; font: 650 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.donde-hd p { margin: 0; }
.donde-hd__epoca p:last-child { font-size: var(--t-l); font-weight: 300; letter-spacing: -0.015em; }
.donde-hd__lugares { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.donde-hd__lugares li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: var(--r-p); background: var(--sup-2); font-size: .9375rem; }
.donde-hd__lugares .ico { color: var(--acento-tinta); }
.ficha-moneda { display: grid; gap: var(--e-5); align-items: center; margin: 0; padding: var(--e-5); border-radius: var(--r-4); background: #120e0a radial-gradient(100% 140% at 0% 50%, #2a2015 0, #120e0a 70%); border: 1px solid #3a2e1f; }
.ficha-moneda img { width: 9rem; height: 9rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--hd-oro), 0 0 0 7px #120e0a, 0 0 0 8px #4f402b, 0 20px 36px -16px #000; }
.ficha-moneda figcaption { display: grid; gap: .45rem; }
.ficha-moneda .meta { margin: 0; color: var(--hd-oro); font: 650 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.ficha-moneda__nombre { margin: 0; font-size: var(--t-xl); font-weight: 300; letter-spacing: -0.02em; color: #f4ead2; }
.ficha-moneda p { margin: 0; color: var(--texto-2); font-size: var(--t-s); }
.ficha-moneda .enlace-flecha { color: var(--hd-oro-2); }
@media (min-width: 40rem) { .ficha-moneda { grid-template-columns: auto minmax(0, 1fr); } }

/* Carril */
.carril-hd__moneda { width: 5rem; height: 5rem; border-radius: 50%; margin-bottom: .75rem; box-shadow: 0 0 0 2px var(--hd-oro); }
.carril-hd__datos { display: grid; gap: .5rem; margin: 0 0 .9rem; }
.carril-hd__datos div { display: grid; gap: .1rem; }
.carril-hd__datos dt { font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.carril-hd__datos dd { margin: 0; font-size: .9375rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .hcap__oleo { transition: none; } }
@media print { .cine__oleo, .cab-oleo__fondo { display: none; } }

/* La caja de presentación del capítulo (en el contrato, caja--marta) sin la «M» de Marta */
[data-serie="historias"] .caja--marta { padding-left: var(--e-5); background: var(--sup); border-color: var(--borde-2); box-shadow: inset 4px 0 0 var(--hd-oro); }
[data-serie="historias"] .caja--marta::before { display: none; }
[data-serie="historias"] .caja--marta .caja__titulo { color: var(--acento-tinta); }
/* El póster de óleo no repite el titular (ya está en el H1) ni el capítulo (ya está en la cinta de la banda) */
.cubierta--oleo b, .cubierta--oleo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Móvil: crédito dentro del margen, filtros deslizables y la línea del tiempo en dos columnas */
@media (max-width: 39.99rem) {
  .cab-oleo__credito { left: var(--lado); text-align: right; }
  .pergamino .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(1.25rem, .8rem + 2vw, 2.5rem)); padding: 0 clamp(1.25rem, .8rem + 2vw, 2.5rem) .4rem; scrollbar-width: none; }
  .pergamino .filtros::-webkit-scrollbar { display: none; }
  .pergamino .chip { flex: none; }
  .arco__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .hito { grid-template-columns: 1.7rem minmax(0, 1fr); gap: .4rem; padding: .55rem .5rem .6rem .35rem; }
  .hito__n { font-size: 1.25rem; }
  .hito__titulo { font-size: .9375rem; }
  .hito--programado, .hito--publicado { grid-column: 1 / -1; }
}
/* Móvil: el vídeo sube al primer pantallazo; la moneda y la época ya están en la ficha y el aviso de IA baja al pie de la banda */
@media (max-width: 63.99rem) {
  .cine__historia { display: none; }
  .cine--oleo { padding-bottom: calc(var(--e-6) + 2.5rem); }
  .cine__credito { position: absolute; left: var(--lado); right: var(--lado); bottom: var(--e-4); }
}