/* ==========================================================================
   Grandes Fortunas · serie-fortunas.css
   Identidad: historieta en papel claro con trama de puntos, tinta negra, viñetas
   con sombra plana, contador amarillo con pestaña negra, sellos girados y el
   cromo coleccionable 5:7. El papel se queda claro también en modo oscuro.
   ========================================================================== */
[data-serie="fortunas"] {
  --papel: #f6efe0; --tinta: #211b15; --tinta-2: #55473a; --amarillo: #ffd23f; --naranja: #9a4200;
  --rojo-comic: #b42318; --oro-cromo: #7a5200; --sombra-comic: 6px 6px 0 #211b15;
}
.historieta {
  background-color: var(--papel); color: var(--tinta);
  background-image: radial-gradient(rgb(33 27 21 / .11) 1px, transparent 1.4px); background-size: 9px 9px;
}
.historieta .migas a, .historieta .migas ol, .historieta .migas [aria-current] { color: var(--tinta-2); }
.historieta .migas li + li::before { color: #8a7a68; }
.historieta .antetitulo { color: var(--tinta-2); }
.historieta .antetitulo::before { background: var(--naranja); }
.historieta .entradilla { color: var(--tinta-2); }
.historieta .boton--linea { color: var(--tinta); border: 2px solid var(--tinta); background: #fff; }
.historieta .boton:not(.boton--linea):not(.boton--sub) { background: var(--tinta); color: #fff; }
.historieta :focus-visible { outline-color: var(--tinta); }
/* Sobre las superficies de tinta (caja del estreno, nombre del cromo, pestañas) el anillo de tinta no se veía: amarillo. */
.historieta .estreno-pendiente :focus-visible, .estreno-pendiente :focus-visible, .cromo__nombre a:focus-visible, .cromo__nombre :focus-visible, .contador__pestana :focus-visible, .cromo--reverso .etiqueta :focus-visible { outline-color: var(--amarillo); }
.titular-comic { font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.015em; word-spacing: .06em; line-height: .98; }

/* Viñeta: panel con borde de tinta y sombra plana */
.panel { position: relative; border: 3px solid var(--tinta); border-radius: 6px; background: #fffaf0; color: var(--tinta); box-shadow: var(--sombra-comic); overflow: hidden; }
.panel--rayos { background: repeating-conic-gradient(from 0deg at 62% 45%, #ffe58a 0 7deg, #fff3c4 7deg 14deg); }
.bocadillo {
  position: relative; display: inline-block; max-width: 22rem; padding: .7rem 1rem; border: 2.5px solid var(--tinta); border-radius: 22px;
  background: #fff; color: var(--tinta); font: 700 1rem/1.3 var(--sans);
}
.bocadillo::after { content: ""; position: absolute; left: 2.2rem; bottom: -14px; width: 22px; height: 14px; background: #fff; border-right: 2.5px solid var(--tinta); clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* Contador amarillo con pestaña */
.contador { display: inline-grid; width: fit-content; }
.contador__pestana { justify-self: start; padding: .3rem .7rem; border-radius: 6px 6px 0 0; background: var(--tinta); color: var(--amarillo); font: 700 .75rem/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.contador__cifra {
  padding: .35rem .9rem .45rem; border: 3px solid var(--tinta); border-radius: 0 8px 8px 8px; background: var(--amarillo); color: var(--tinta);
  font: 850 clamp(2.25rem, 1.6rem + 2.8vw, 4rem)/1 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 4px 4px 0 var(--tinta);
}
.sello-comic {
  display: inline-block; width: fit-content; padding: .35rem .8rem; border: 3px solid var(--rojo-comic); border-radius: 8px; background: rgb(255 255 255 / .85);
  color: var(--rojo-comic); font: 900 italic clamp(1.125rem, 1rem + .6vw, 1.5rem)/1 var(--sans); text-transform: uppercase; letter-spacing: .01em; transform: rotate(-7deg);
}

/* ---------- Cabecera cómica (hub y ficha) ---------- */
.heroe-comic { padding-block: var(--e-5) clamp(2.5rem, 1.8rem + 3vw, 4.5rem); border-bottom: 3px solid var(--tinta); }
.heroe-comic__rejilla { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 64rem) { .heroe-comic__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 4.5rem); } }
.heroe-comic h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); margin: 0 0 var(--e-4); }
.heroe-comic h1.titular-comic--largo { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.heroe-comic__vineta { aspect-ratio: 4 / 3; display: grid; }
.heroe-comic__vineta img { width: 100%; height: 100%; object-fit: contain; object-position: 40% 70%; padding: 6% 4% 2%; }
.heroe-comic__vineta .bocadillo { position: absolute; left: 4%; top: 5%; }
.heroe-comic__vineta .contador { position: absolute; right: 4%; bottom: 5%; }
.heroe-comic__vineta .sello-comic { position: absolute; right: 5%; top: 6%; }
.heroe-comic__datos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-4) var(--e-5); margin: var(--e-5) 0 0; }
@media (max-width: 39.99rem) {
  .heroe-comic__vineta { aspect-ratio: 4 / 3.6; }
  .heroe-comic__vineta .bocadillo { font-size: .875rem; max-width: 13rem; padding: .5rem .75rem; }
  .heroe-comic__vineta .contador__cifra { font-size: 1.875rem; }
}

/* Estado del vídeo sin publicar: nunca un botón de reproducir muerto */
.estreno-pendiente { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: var(--e-5); padding: .9rem 1rem; border: 3px solid var(--tinta); border-radius: 8px; background: var(--tinta); color: #fff; }
.estreno-pendiente__txt { display: grid; margin-right: auto; }
.estreno-pendiente__txt b { font-size: 1rem; }
.estreno-pendiente__txt span { font: 500 .8125rem/1.35 var(--mono); color: #e8dccb; }
.estreno-pendiente .boton { min-height: 44px; }

/* ---------- Cómo funciona la serie (tres viñetas) ---------- */
.tres-vinetas { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.tres-vinetas li { display: grid; grid-template-rows: 10rem auto; }
.tres-vinetas img { width: 100%; height: 10rem; object-fit: contain; background: #fff; border-bottom: 3px solid var(--tinta); padding: .5rem; }
.tres-vinetas div { padding: var(--e-4); }
.tres-vinetas h3 { font-size: 1.125rem; margin-bottom: .35rem; }
.tres-vinetas p { margin: 0; font-size: .9375rem; color: var(--tinta-2); }

/* ---------- El cromo 5:7 (HTML: el texto se indexa) ---------- */
.cromo {
  --c-fondo: #fff8e6;
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; width: 100%; max-width: 21rem; aspect-ratio: 5 / 7;
  padding: .75rem; border: 4px solid var(--tinta); border-radius: 16px; background: var(--amarillo); color: var(--tinta); box-shadow: var(--sombra-comic);
  overflow: hidden; isolation: isolate;
}
.cromo::after { content: ""; position: absolute; inset: -40% -60%; z-index: 2; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .55) 50%, transparent 58%); transform: translateX(-60%); transition: transform .9s var(--suave); pointer-events: none; }
.cromo:hover::after { transform: translateX(60%); }
.cromo__retrato { position: relative; min-height: 7rem; border: 3px solid var(--tinta); border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(from 0deg at 50% 60%, #ffe58a 0 9deg, #fff6d8 9deg 18deg); }
.cromo__retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.cromo__n {
  position: absolute; left: .5rem; top: .5rem; z-index: 1; display: grid; place-items: center; width: 3.1rem; height: 3.1rem;
  background: #c22d0f; color: #fff; font: 900 .875rem/1 var(--sans); text-align: center;
  border-radius: 50%; outline: 2px dashed #fff; outline-offset: -6px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tinta);
}
.cromo__nombre { margin: .55rem 0 .45rem; padding: .4rem .55rem; background: var(--tinta); color: #fff; font: 900 italic 1.1875rem/1.05 var(--sans); text-transform: uppercase; letter-spacing: .01em; text-align: center; }
.cromo__datos { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0; }
.cromo__datos div { padding: .35rem .45rem; border-radius: 6px; background: var(--c-fondo); border: 2px solid var(--tinta); }
.cromo__datos dt { font: 700 .75rem/1.15 var(--mono); color: var(--tinta-2); }
.cromo__datos dd { margin: .15rem 0 0; font: 850 1rem/1.1 var(--sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cromo__datos .es-fortuna dd { color: var(--oro-cromo); }
.cromo__datos .es-golpe dd { color: var(--rojo-comic); }
.cromo__cat { position: absolute; right: .55rem; top: .55rem; z-index: 1; padding: .2rem .45rem; border-radius: 4px; background: #fff; border: 2px solid var(--tinta); font: 700 .75rem/1 var(--mono); }
/* Hueco del álbum: capítulo terminado, cromo aún sin publicar */
.cromo--reverso {
  grid-template-rows: 1fr auto; place-items: center; text-align: center; background: #fffaf0; color: var(--tinta);
  border: 3px dashed rgb(33 27 21 / .55); box-shadow: none;
  background-image: radial-gradient(rgb(154 66 0 / .14) 1.2px, transparent 1.6px); background-size: 12px 12px;
}
.cromo--reverso::after { display: none; }
.cromo--reverso .cromo__n { position: static; width: 4.25rem; height: 4.25rem; font-size: 1.125rem; background: #fff; color: var(--naranja); outline-color: var(--naranja); box-shadow: 0 0 0 3px var(--tinta); }
.cromo--reverso b { display: block; margin-top: .9rem; font: 900 italic 1.25rem/1.05 var(--sans); text-transform: uppercase; }
.cromo--reverso small { display: block; margin-top: .35rem; font: 600 .8125rem/1.3 var(--mono); color: var(--tinta-2); }
.cromo--reverso .etiqueta { background: var(--tinta); color: var(--amarillo); }

/* ---------- El cromo que se da la vuelta (álbum, 25-oct-2026) ----------
   Delante, el cromo del vídeo (imagen); detrás, el cromo en HTML. Una casilla oculta y su etiqueta lo giran, sin JS; con
   ratón, el cromo se inclina y le pasa un brillo; en el álbum, cada hueco va un poco torcido, como pegado a mano. */
.volteo { display: grid; gap: .75rem; justify-items: start; width: 100%; max-width: 21rem; perspective: 1600px; }
.volteo__caras { position: relative; display: grid; width: 100%; aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform .75s var(--suave); }
.volteo__caras > * { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.volteo__frente { position: relative; display: grid; place-items: center; }
.volteo__frente img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(6px 6px 0 var(--tinta)); }
.volteo__frente::after { content: ""; position: absolute; inset: 2.5%; border-radius: 5%/3.6%; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .5) 48%, rgb(255 236 160 / .35) 52%, transparent 62%); background-size: 260% 100%; background-position: 120% 0; transition: background-position 1s var(--suave); pointer-events: none; }
.volteo__dorso { max-width: none; transform: rotateY(180deg); }
.volteo__interruptor:checked ~ .volteo__caras { transform: rotateY(180deg); }
.album__acciones .volteo__boton { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .35rem .8rem; border-radius: var(--r-p); border: 2px solid var(--tinta); background: var(--amarillo); color: var(--tinta); font: 700 .875rem/1 var(--sans); cursor: pointer; }
.album__acciones .volteo__boton:hover { background: #ffe27a; }
.volteo .album__acciones { gap: .4rem; flex-wrap: nowrap; }
.volteo .album__acciones > * { padding-inline: .65rem; font-size: .8125rem; gap: .3rem; white-space: nowrap; }
.volteo:has(.volteo__interruptor:focus-visible) .volteo__boton { outline: 3px solid var(--tinta); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .volteo__interruptor:not(:checked) ~ .volteo__caras:hover { transform: rotateY(-9deg) rotateX(4deg) scale(1.02); }
  .volteo__caras:hover .volteo__frente::after { background-position: -20% 0; }
}
.album > li:nth-child(3n + 1) .volteo__caras { rotate: -1.4deg; }
.album > li:nth-child(3n + 2) .volteo__caras { rotate: .9deg; }
.album > li:nth-child(3n) .volteo__caras { rotate: -.5deg; }
@media (prefers-reduced-motion: reduce) { .volteo__caras, .volteo__frente::after { transition: none; } }

/* ---------- Álbum ---------- */
.album__progreso { display: grid; gap: .5rem; max-width: 34rem; margin: 0 0 var(--e-5); }
.album__progreso p { margin: 0; font-weight: 650; }
.album__barra { height: 14px; border: 2px solid var(--tinta); border-radius: 999px; background: #fff; overflow: hidden; }
.album__barra i { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--amarillo) 0 8px, #ffbf00 8px 16px); border-right: 2px solid var(--tinta); }
.historieta .filtros .chip { border: 2px solid var(--tinta); background: #fff; color: var(--tinta); }
.historieta .filtros .chip[aria-pressed="true"] { background: var(--tinta); color: var(--amarillo); border-color: var(--tinta); }
.album { display: grid; gap: var(--e-6) var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); margin: 0 0 var(--e-6); padding: 0; list-style: none; }
.album > li { display: grid; gap: .75rem; align-content: start; justify-items: start; }
.album__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.album__acciones a, .album__acciones button { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .35rem .8rem; border-radius: var(--r-p); border: 2px solid var(--tinta); background: #fff; color: var(--tinta); text-decoration: none; font: 650 .875rem/1 var(--sans); }
.coleccion > summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem 1.1rem; border-radius: var(--r-p); border: 2px solid var(--tinta); background: #fff; cursor: pointer; font-weight: 700; list-style: none; }
.coleccion > summary::-webkit-details-marker { display: none; }
.coleccion__lista { columns: 16rem auto; column-gap: var(--e-5); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.coleccion__lista li { break-inside: avoid; display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: .6rem; min-height: 44px; border-bottom: 1px dashed rgb(33 27 21 / .35); }
.coleccion__lista b { font: 800 .875rem/1 var(--mono); color: var(--naranja); }
.coleccion__lista span { font-weight: 600; }
.coleccion__lista small { font: 600 .75rem/1 var(--mono); color: var(--tinta-2); }

/* ---------- Ficha: el contador, paso a paso ---------- */
.pasos-contador { display: grid; gap: var(--e-4); margin: 1.5em 0; padding: 0; list-style: none; counter-reset: none; }
.pasos-contador li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--e-4); align-items: center; padding: var(--e-3); border-radius: 8px; background: var(--sup); border: 2px solid var(--borde-2); }
.pasos-contador img { width: 6.5rem; height: 5rem; object-fit: contain; border-radius: 4px; background: #fff; }
.pasos-contador .meta { display: block; margin-bottom: .2rem; }
.pasos-contador b { display: block; font-size: 1.0625rem; line-height: 1.3; }
.pastilla { display: inline-block; margin-top: .4rem; padding: .25rem .6rem; border: 2px solid #211b15; border-radius: 6px; background: #ffd23f; color: #211b15; font: 800 .9375rem/1.1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pastilla--baja { background: #ffd9cf; }
.veredicto-comic { display: grid; gap: var(--e-5); margin: 1.5em 0; padding: var(--e-5); align-items: center; }
@media (min-width: 40rem) { .veredicto-comic { grid-template-columns: auto minmax(0, 1fr); } }
.veredicto-comic img { width: 9rem; height: 9rem; object-fit: contain; }
.dos-barras { display: grid; gap: .8rem; }
.dos-barras p { margin: 0 0 .3rem !important; display: flex; justify-content: space-between; gap: 1rem; font-weight: 650; }
.dos-barras p span { font: 800 1rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.dos-barras i { display: block; height: 1.1rem; border: 2px solid #211b15; border-radius: 4px; }
.dos-barras .gano { background: #ffe58a; }
.dos-barras .tiene { background: #ffd23f; }
.vinetas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin: 1.5em 0; padding: 0; list-style: none; }
.vinetas li { display: grid; gap: .3rem; padding: .75rem .9rem; border: 2px solid #211b15; border-radius: 6px; background: #fffaf0; color: #211b15; box-shadow: 4px 4px 0 #211b15; }
.vinetas time { font: 700 .8125rem/1 var(--mono); color: #9a4200; }
.vinetas span { font-weight: 650; font-size: .9375rem; line-height: 1.3; }
.cromo-grande { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 48rem) { .cromo-grande { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }
.proximo-numero { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 48rem) { .proximo-numero { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); } }
.proximo-numero .cromo { max-width: 16rem; }
.cromo__nombre a { color: inherit; text-decoration: none; }
.cromo__nombre a:hover { text-decoration: underline; }