/* ==========================================================================
   Los Titanes de la inversión · serie-titanes.css
   Identidad: pizarra verde (#1c4332) con su textura, marco y repisa de madera,
   tiza (#f2f0e3) y tiza amarilla (#ecd98b) para cifras y énfasis, retratos a
   tiza. La pizarra es la misma en los dos modos (siempre .tema-oscuro).
   ========================================================================== */
[data-serie="titanes"] { --pizarra: #1c4332; --pizarra-2: #173a2b; --tiza: #f2f0e3; --tiza-2: #c5d3c8; --tiza-amarilla: #ecd98b; --tiza-rosa: #f2a08b; --madera: #5b3d22; --madera-2: #7a5530; }
.pizarra {
  background-color: var(--pizarra); color: var(--tiza);
  background-image: radial-gradient(120% 80% at 20% 0%, rgb(255 255 255 / .06), transparent 60%), url("../img/pizarra-fondo.webp");
  background-size: auto, cover;
  --texto: #f2f0e3; --texto-2: #c5d3c8; --texto-3: #b4c6b8; --borde: rgb(242 240 227 / .18); --borde-2: rgb(242 240 227 / .32); --borde-campo: #9fbcab;
  --sup: rgb(255 255 255 / .05); --sup-2: rgb(255 255 255 / .08); --enlace: #ecd98b; --foco: #ecd98b;
}
.pizarra--marco { border-block: 12px solid var(--madera); box-shadow: inset 0 12px 0 -8px #3e2914, inset 0 -12px 0 -8px #3e2914; }
.pizarra .migas a, .pizarra .migas ol, .pizarra .migas [aria-current] { color: var(--tiza-2); }
.pizarra .antetitulo { color: var(--tiza-amarilla); }
.pizarra .antetitulo::before { background: var(--tiza-amarilla); }
.pizarra .entradilla { color: var(--tiza-2); }
.pizarra .boton--linea { color: var(--tiza); border-color: #9fbcab; }
.pizarra .boton--linea:hover { background: rgb(255 255 255 / .07); }
.pizarra .avisame { color: var(--tiza); border-color: #9fbcab; }
.pizarra .sello { box-shadow: inset 0 0 0 1.5px var(--tiza-amarilla); }
/* Letra de tiza: un poco de polvo en el borde, sin perder legibilidad */
.tiza { text-shadow: 0 0 1px rgb(242 240 227 / .55), 0 0 6px rgb(242 240 227 / .12); }
.tiza-amarilla { color: var(--tiza-amarilla); }
.trazo-tiza { display: block; }
.trazo-tiza--grande { width: min(100%, 28rem); height: 1rem; margin-top: .5rem; color: var(--tiza-amarilla); }

/* ---------- Cabecera del hub ---------- */
.cab-titanes { padding-block: var(--e-5) clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.cab-titanes__rejilla { display: grid; gap: var(--e-6); align-items: end; margin-top: var(--e-5); }
@media (min-width: 64rem) { .cab-titanes__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 4.5rem); } }
.cab-titanes h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem); font-weight: 760; letter-spacing: -0.03em; line-height: .98; }
.finde { display: grid; gap: var(--e-3); }
.finde__titulo { margin: 0; font: 600 var(--t-mono)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--tiza-amarilla); }
.finde__item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--e-4); align-items: center; padding: var(--e-3); border-radius: var(--r-3); border: 1.5px dashed rgb(242 240 227 / .4); background: rgb(0 0 0 / .12); }
.finde__item img { width: 9rem; aspect-ratio: 3 / 2; object-fit: contain; object-position: 50% 100%; }
.finde__item .meta { display: block; color: var(--tiza-amarilla); margin-bottom: .2rem; }
.finde__item b { display: block; font-size: 1.0625rem; line-height: 1.25; margin-bottom: .5rem; }
@media (max-width: 29.99rem) { .finde__item { grid-template-columns: 6.5rem minmax(0, 1fr); } .finde__item img { width: 6.5rem; } }

/* ---------- Álbum de cromos a tiza ---------- */
.album-tiza { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.cromo-tiza {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; border-radius: 10px; overflow: hidden;
  background: var(--pizarra-2) url("../img/pizarra-fondo.webp") center / cover; color: var(--tiza);
  border: 8px solid var(--madera); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35), 0 14px 26px -16px rgb(0 0 0 / .7);
}
.cromo-tiza__retrato { position: relative; aspect-ratio: 3 / 2; }
.cromo-tiza__retrato img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cromo-tiza__n { position: absolute; left: .7rem; top: .6rem; padding: .25rem .5rem; border: 1.5px solid var(--tiza-amarilla); border-radius: 4px; font: 700 .8125rem/1 var(--mono); color: var(--tiza-amarilla); }
.cromo-tiza__cab { padding: .75rem 1rem .35rem; border-top: 1.5px dashed rgb(242 240 227 / .35); }
.cromo-tiza__cab h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.cromo-tiza__cab h3 a { color: inherit; text-decoration: none; }
.cromo-tiza__cab h3 a:hover { text-decoration: underline; }
.cromo-tiza__cab p { margin: .2rem 0 0; font: 500 .8125rem/1.35 var(--mono); color: var(--tiza-2); }
.cromo-tiza__datos { display: grid; gap: .55rem; margin: 0; padding: .4rem 1rem .9rem; }
.cromo-tiza__datos dt { font: 650 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--tiza-amarilla); }
.cromo-tiza__datos dd { margin: .15rem 0 0; font-size: .9375rem; line-height: 1.35; }
.cromo-tiza__datos .cuenta dd { font: 650 1.0625rem/1.25 var(--sans); color: var(--tiza-amarilla); }
.cromo-tiza__pie { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem 1rem; background: rgb(0 0 0 / .18); }
.cromo-tiza__pie a { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .35rem .8rem; border-radius: var(--r-p); border: 1.5px solid #9fbcab; color: var(--tiza); text-decoration: none; font: 650 .875rem/1 var(--sans); }
.cromo-tiza__pie a:hover { background: rgb(255 255 255 / .08); }
.cromo-tiza__pie .avisame { border-width: 1.5px; }
.cromo-tiza--prox .cromo-tiza__retrato { display: grid; place-items: center; }
.cromo-tiza--prox .cromo-tiza__retrato svg { width: 46%; height: auto; color: rgb(242 240 227 / .55); }
.cromo-tiza__fecha { display: inline-block; margin-top: .5rem; padding: .25rem .55rem; border-radius: 4px; background: var(--tiza-amarilla); color: #1c4332; font: 700 .8125rem/1.2 var(--mono); }
.album-tiza__progreso { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0 0 var(--e-5); }
.album-tiza__progreso p { margin: 0; font-weight: 650; color: var(--tiza); }
.album-tiza__barra { flex: 1 1 14rem; max-width: 26rem; height: 10px; border-radius: 999px; background: rgb(242 240 227 / .15); overflow: hidden; }
.album-tiza__barra i { display: block; height: 100%; background: var(--tiza-amarilla); }

/* ---------- Estructura de cada episodio ---------- */
.estructura { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.estructura li { counter-increment: paso; display: grid; gap: .35rem; padding: var(--e-4); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--borde); }
.estructura li::before { content: counter(paso, decimal-leading-zero); font: 700 .875rem/1 var(--mono); color: var(--ti-tinta); }
.estructura b { font-size: 1.0625rem; }
.estructura span { font-size: .9375rem; color: var(--texto-2); line-height: 1.45; }
/* En el móvil, los seis pasos en dos columnas (antes, seis tarjetas a todo el ancho) */
@media (max-width: 39.99rem) { .estructura li { padding: .85rem .9rem; } .estructura b { font-size: 1rem; line-height: 1.25; } .estructura span { font-size: .875rem; } }