/* Ajuste a pantalla: ninguna vista necesita desplazarse (salvo la lista de grupos y lobbys en el teléfono).
   Se carga al final y manda sobre las hojas anteriores. */

html, body { overflow: hidden; height: 100%; }
#app { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- partida (computadora) */
.juego { height: 100vh; height: 100dvh; overflow: hidden; }
.cuerpo { min-height: 0; }
.col-panel { min-height: 0; overflow: hidden; }
.panel { overflow: hidden; padding: 10px 14px 12px; }
.panel h4 { margin: 10px 0 5px; font-size: 13px; }
.prov-cab.compacta { gap: 10px; }
.prov-cab.compacta .sil { width: 46px; height: 46px; }
.prov-cab.compacta .sil svg { width: 38px; height: 38px; }
.prov-cab.compacta h2 { font-size: 24px; }
.prov-cab.compacta p { font-size: 12.5px; margin-top: 2px; }
.prov-cab.compacta .sigla-img { height: 14px; }
.barras.compactas { gap: 3px; }
.barras.compactas .fila { font-size: 12px; grid-template-columns: 46px 1fr 48px; }
.barras.compactas .pista { height: 12px; }
.barras.compactas .lg img { height: 15px; }
.panel .chips { gap: 4px; }
.panel .chip { font-size: 11.5px; padding: 2px 7px; }
.panel .ayuda { margin: 4px 0 0; font-size: 12px; }
.panel .aviso { margin: 6px 0 0; padding: 5px 8px; font-size: 12px; }
.inversion.compacta { padding: 8px 10px; }
.inversion.compacta .linea-dato { align-items: center; margin: 0; font-size: 13px; }
.inversion.compacta .saturacion { margin: 6px 0 0; }
.hemi.compacto { grid-template-columns: 1fr 1fr; gap: 8px; }
.hemi.compacto svg { max-width: 200px; }
.hemi.compacto figcaption { font-size: 13px; }
.hemi.compacto .cuenta { font-size: 11px; gap: 2px 6px; }
.hemi.compacto .ayuda { font-size: 11px; }
.nav-movil { display: none; }

/* ---------------------------------------------------------------- partida (tablet vertical y teléfono) */
@media (max-width: 900px) {
  .juego { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
  .barra { flex: none; gap: 4px 8px; padding: 6px 10px; }
  .barra > .btn-naranja, .barra .billeteras, .barra .btn-chico[data-a="como"] { display: none; }
  .barra .yo strong { font-size: 15px; }
  .barra .yo .mini { width: 34px; height: 34px; border-width: 2px; }
  .barra .plata { font-size: 15px; }
  .barra .plata small { font-size: 10px; }
  .linea-tiempo { order: 5; flex-basis: 100%; gap: 2px; }
  .lt-sem { height: 7px; }
  .lt-texto { font-size: 11px; }
  .cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .lado, .col-panel { display: none !important; }
  .col-mapa { flex: 1; min-height: 0; height: auto; padding: 6px 6px 46px; }
  .mapa { flex: 1; height: auto; min-height: 0; }
  .hud { bottom: 6px; }
  /* La lista de grupos y lobbys ocupa el mapa y es lo único que se desplaza. */
  .cajon { width: 100%; }
  .cajon-lista { overflow-y: auto; grid-auto-rows: auto; }
  .nav-movil { display: flex; flex: none; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--borde); box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
  .nav-movil button { flex: 1; display: grid; justify-items: center; gap: 2px; border: 0; background: none; padding: 4px 2px; border-radius: 10px; font: 700 11px var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); cursor: pointer; }
  .nav-movil button i { font-size: 18px; }
  .nav-movil button.activo { background: #eef3f8; color: var(--tinta); }
  .nav-movil .nav-fin { flex: 1.6; display: flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(#ff8a3d, var(--naranja)); color: #fff; font-size: 15px; }
  .panel-modal { width: 100%; }
}

/* Ventanas de panel (Nacional, Apoyos) en el teléfono */
.panel-modal header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.panel-modal header .cerrar-x { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); color: #fff; }
.panel-modal .cuerpo-modal { padding: 8px 14px 14px; }
.panel-modal h4 { margin: 10px 0 5px; }

/* ---------------------------------------------------------------- informe del turno */
.caja-modal.informe { width: min(860px, 100%); }
.inf-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inf-grilla h4 { margin: 10px 0 4px; }
.inf-grilla .carta-evento { padding: 8px 12px; }
.inf-grilla .carta-evento strong { font-size: 19px; }
.inf-ingreso { margin: 10px 0 0; font-size: 14px; }
.inf-ingreso .ayuda { font-size: 11.5px; }
.inf-rivales li { align-items: center; padding: 2px 0; }
.inf-quien { display: flex; align-items: center; gap: 6px; font: 700 14px var(--titulos); flex: none; }
.inf-que { font-size: 12px; text-align: right; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.caja-modal .lista li { font-size: 13px; }

/* ---------------------------------------------------------------- pantallas de selección */
.seleccion { height: 100vh; height: 100dvh; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px 20px 14px; }
/* Con muchos personajes la pantalla scrollea; el botón de seguir queda siempre a la vista, pegado abajo. */
.seleccion > .pie-seleccion { position: sticky; bottom: -14px; z-index: 5; margin: 0 -20px -14px; padding: 12px 20px 14px;
  background: linear-gradient(rgba(233, 238, 243, 0), rgba(233, 238, 243, .97) 40%); }
.sub { margin: 2px 0 12px; }
.tarjetas { padding: 4px 0 10px; gap: 14px; }
.tarjetas.muchas .cand { width: 158px; }
.tarjetas.muchas .cand .tarjeta-arte { height: 186px; }
.tarjetas.muchas .retrato { width: 120px; height: 150px; }
.tarjetas.muchas .cand .apellido { font-size: 23px; }
.tarjetas.muchas .tarjeta-pie { min-height: 64px; padding: 8px 6px 10px; }
.formula { margin-bottom: 8px; padding: 6px 12px; }
.formula img, .formula .vacio { width: 44px; height: 44px; }

.rivales-elegir { gap: 6px; margin-bottom: 8px; }
.rival-fila { padding: 6px 10px; grid-template-columns: 150px 1fr; }
.rival-op { width: 78px; padding: 4px 2px; font-size: 11px; }
.rival-op img, .rival-op .dado { width: 40px; height: 40px; border-width: 2px; font-size: 17px; }
.rival-partido b { font-size: 14px; }

/* ---------------------------------------------------------------- ficha */
.ficha-lista { gap: 2px; }
.ficha-lista li { font-size: 14px; }
.ficha-lista b { font-size: 19px; }
.signo { width: 22px; height: 22px; border-width: 2px; font-size: 10px; }
.ficha-cols { margin-top: 18px; gap: 14px; }
.cab-bono, .cab-castigo { padding: 8px; font-size: 18px; }
.ficha-btns { padding: 10px 0 12px; }
.ficha-der { padding: 16px 18px 0; }

/* ---------------------------------------------------------------- alianzas en pestañas */
.al-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; border-bottom: 1px solid var(--borde); }
.al-tabs button { border: 0; background: none; padding: 8px 12px; font: 700 15px var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); cursor: pointer; border-bottom: 3px solid transparent; }
.al-tabs button.activo { color: var(--tinta); border-bottom-color: var(--naranja); }
.al-tabs .plata { margin-left: auto; text-align: right; font-size: 17px; }
.burbuja { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rojo); color: #fff; font-size: 11px; }
.al-panel { overflow: hidden; padding: 10px 16px 12px; }
.al-panel h4 { margin: 10px 0 5px; }
.socios { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.socio { padding: 4px 6px; }
.socio .cara { width: 32px; height: 32px; }
.negocio > div { padding: 6px 8px; }
.paso b { font-size: 19px; min-width: 60px; }
.al-panel .tabla td, .al-panel .tabla th { padding: 4px 6px; }
.al-panel .frente { padding: 6px 8px; margin-bottom: 6px; }

/* ---------------------------------------------------------------- noche electoral en pestañas */
.noche { height: 100vh; height: 100dvh; display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; padding: 14px 18px; overflow: hidden; }
.noche-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border-radius: 12px; background: #fff; border: 2px solid var(--borde); flex: none; }
.noche-cab.gano { border-color: var(--sol); background: #fffaf0; }
.noche-cab h1 { margin: 0; font-size: clamp(24px, 4vw, 40px); text-align: left; }
.noche-cab .fecha { margin: 2px 0 0; text-align: left; font-size: 13px; }
.noche-tabs { display: flex; gap: 4px; margin: 10px 0 8px; flex: none; }
.noche-tabs button { flex: 1; border: 1px solid var(--borde); background: #fff; padding: 9px 6px; border-radius: 10px; font: 700 15px var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); cursor: pointer; }
.noche-tabs button.activo { background: var(--celeste-osc); border-color: var(--celeste-osc); color: #fff; }
.noche-pane { display: none; flex: 1; min-height: 0; background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; overflow: hidden; }
.noche[data-tab="presidencia"] [data-pane="presidencia"], .noche[data-tab="congreso"] [data-pane="congreso"],
.noche[data-tab="provincias"] [data-pane="provincias"], .noche[data-tab="puntos"] [data-pane="puntos"] { display: block; }
.noche-pane h2 { margin: 0 0 8px; font: 800 20px var(--titulos); text-transform: uppercase; }
.noche .ganador { flex-wrap: nowrap; align-items: flex-start; }
.noche .ganador .tarjeta { flex: none; width: 180px; }
.noche .ganador .cand .tarjeta-arte { height: 190px; }
.ganador-datos { flex: 1; min-width: 0; }
.noche .titular { font-size: 26px; }
.noche .ganador-datos p { margin: 4px 0; }
.noche .etiqueta { margin: 8px 0 4px; }
.noche .hemi svg { max-width: 340px; }
.mosaicos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mosaico { border: 1px solid var(--borde); border-top: 4px solid var(--c1); border-radius: 8px; padding: 5px 7px; min-width: 0; }
.mosaico b { display: block; font: 700 13px/1.1 var(--titulos); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mos-gana { display: block; font-size: 11px; color: var(--gris); }
.mosaico .bancas { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.mosaico .banca { width: 8px; height: 8px; }
.mosaico .sep { width: 1px; height: 8px; background: #b9c3cd; margin: 0 2px; }

/* ---------------------------------------------------------------- escrutinio y repetición más compactos */
.rep-cab { padding: 10px 18px; }
.rep-izq, .rep-der { padding: 12px 18px; }
.rep-pres { margin-bottom: 4px; padding: 4px 8px; }
.rep-fila { padding: 5px 8px; }
.rep-filas { gap: 5px; }
.rep-barra { height: 28px; margin-bottom: 10px; }

/* Caricaturas con fondo transparente: se ve el color del partido detrás. */
/* Sin marco: solo el personaje recortado, apoyado abajo. */
.retrato:has(img[src*="caricaturas"]), .ficha-foto:has(img[src*="caricaturas"]) {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.retrato img[src*="caricaturas"], .ficha-foto img[src*="caricaturas"] {
  object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
}

/* Íconos de lobbys y regiones: foto real recortada en círculo. */
.ico.foto { overflow: hidden; padding: 0; background: var(--ic); }
.ico.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-ico .ico { width: 32px; height: 32px; border-width: 2px; }
.ficha-lista .ico.mini { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .ficha .ficha-lista .ico.mini { display: inline-grid; width: 16px; height: 16px; border-width: 1px; }
  .g-ico .ico { width: 28px; height: 28px; }
}

/* Ficha: el logo del partido grande de fondo, en blanco, sin recuadro. */
.ficha-izq .ficha-agua { width: 92%; height: 46%; left: 4%; top: 22%; object-fit: contain; opacity: .3; filter: brightness(0) invert(1); }
.ficha-izq .ficha-foto { z-index: 1; }
@media (max-width: 900px) { .ficha-izq .ficha-agua { display: block; width: 60%; height: 80%; left: 2%; top: 10%; } }

/* Círculo del vice: la caricatura entera, sin recortar. */
.ficha-vice:has(img[src*="caricaturas"]) { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; width: 110px; height: 130px; }
.ficha-vice img[src*="caricaturas"] { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); }
@media (max-width: 900px) { .ficha-vice:has(img[src*="caricaturas"]) { width: 60px; height: 70px; } }
.ficha-vice img[src*="caricaturas"], .vice-op img[src*="caricaturas"], .vice-elegido img[src*="caricaturas"] { object-fit: contain; object-position: 50% 100%; }

/* Elección de partido: el logo grande, a color, sobre el color del partido y sin círculo. */
.partido .logo-partido { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; height: 70%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }

/* Empate en la repetición: las inversiones chocan, rebotan para atrás y quedan tachadas. */
.rep-empate { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 6px; padding: 4px 14px; border-radius: 999px; background: #e0303a; color: #fff; font: 800 18px var(--titulos); letter-spacing: .06em; animation: empate-cartel .5s .9s both cubic-bezier(.2, 1.6, .4, 1); }
.rep-prov .rep-empate { display: flex; width: max-content; }
@keyframes empate-cartel { from { transform: scale(0) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
.podio-lugar.anulado .podio-circ { filter: none; opacity: 1; animation: empate-choque 1.6s ease both; }
.podio-lugar.anulado .podio-circ::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 5px; background: #e0303a; transform: rotate(-35deg) scaleX(0); animation: empate-tacha .35s 1.25s ease-out forwards; box-shadow: 0 0 0 2px #fff; }
.podio-lugar.anulado .podio-sub { animation: empate-texto .3s 1.2s both; }
@keyframes empate-choque {
  0% { transform: translateX(0); }
  35% { transform: translateX(calc(var(--hacia) * 40px)) scale(1.08); }
  42% { transform: translateX(calc(var(--hacia) * 34px)) rotate(-8deg); }
  48% { transform: translateX(calc(var(--hacia) * 38px)) rotate(8deg); }
  75% { transform: translateX(calc(var(--hacia) * -14px)) scale(.92); filter: grayscale(0); opacity: 1; }
  100% { transform: translateX(0) scale(.9); filter: grayscale(1); opacity: .55; }
}
@keyframes empate-tacha { to { transform: rotate(-35deg) scaleX(1); } }
@keyframes empate-texto { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Regiones: la barra de casilleros va arriba de la tarjeta. */
.g-tarjeta.region { grid-template-rows: auto 1fr; }
.g-tarjeta.region .g-pista { grid-row: 1; grid-column: 1; }
.g-tarjeta.region .g-lider { grid-row: 1; grid-column: 2; }
.g-tarjeta.region .g-abrir { grid-row: 2; grid-column: 1 / -1; }

/* Repetición: la tabla de la izquierda centrada y más grande, sin un hueco blanco abajo. */
.rep-izq { display: flex; flex-direction: column; justify-content: center; }

.g-tarjeta.region { min-height: 72px; }
.g-tarjeta.region .g-pista { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #f4f6f8; }
.g-tarjeta.region .g-celdas { flex: 1; height: 16px; }
.g-dip { font: 800 15px var(--titulos); color: var(--tinta); white-space: nowrap; }
.g-dip small { font-size: 11px; color: var(--gris); }

/* Cartel de región: flota arriba del mapa sin empujarlo. */
.col-mapa > #cartel { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 20px)); margin: 0; z-index: 6; }
.cr-cab { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #fff; background: linear-gradient(100deg, color-mix(in srgb, var(--ic) 92%, #000) 35%, color-mix(in srgb, var(--ic) 40%, transparent)), var(--foto) center / cover, var(--ic); }
.cr-tit { flex: 1; display: grid; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.cr-tit strong { font: 800 20px var(--titulos); text-transform: uppercase; }
.cr-tit small { font-size: 12px; opacity: .95; }
.cr-cab .cerrar-x { position: static; }
.cr-filas { display: grid; gap: 4px; padding: 8px 10px; }
.cr-fila { display: grid; grid-template-columns: 26px 1fr 54px; align-items: center; gap: 8px; }
.cr-fila.mia b { color: var(--naranja); }
.cr-pista { position: relative; display: flex; height: 14px; border-radius: 7px; background: #e8ecf0; overflow: hidden; }
.cr-ya { background: var(--c1); }
.cr-luego { background: repeating-linear-gradient(-45deg, var(--c1) 0 3px, transparent 3px 6px); opacity: .7; }
.cr-linea { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 3px; background: #1c2733; }
.cr-fila b { font: 800 15px var(--titulos); text-align: right; }
.cr-fila b small { font-size: 11px; color: var(--gris); }
.cr-vacio { margin: 2px 0; font-size: 13px; color: var(--gris); }

/* Logo de la boleta en la esquina: chico y prolijo, sobre una pastilla blanca para que se lea */
.tarjeta .logo-esquina { position: absolute; right: 8px; top: 8px; z-index: 3; display: grid; place-items: center; height: 26px; padding: 2px 5px;
  border-radius: 5px; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.2); filter: none; opacity: 1; }
.tarjeta .logo-esquina img { display: block; height: 22px; width: auto; max-width: 64px; object-fit: contain; }
.tarjetas.muchas .tarjeta .logo-esquina { height: 22px; }
.tarjetas.muchas .tarjeta .logo-esquina img { height: 18px; max-width: 54px; }

/* Personajes históricos: afiche de campaña antiguo (papel envejecido, marco doble del color de la boleta y cinta con el año) */
.tarjeta.cand.historica .tarjeta-arte { background:
  radial-gradient(ellipse at 50% 35%, #fbf3dc 0%, #efe0b8 55%, #d9c193 100%);
  box-shadow: inset 0 0 0 5px var(--c1), inset 0 0 0 8px #f6ecd2, inset 0 0 0 10px var(--c2), inset 0 0 40px rgba(110, 80, 30, .45); }
.tarjeta.cand.historica .tarjeta-arte::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(120,90,40,.12) 0 1px, transparent 1px 3px), radial-gradient(circle at 20% 80%, rgba(140,100,40,.35), transparent 40%); }
.tarjeta.cand.historica .silueta { opacity: .18; filter: sepia(1); }
.tarjeta.cand.historica .retrato img { filter: sepia(.25) contrast(1.05); }
.tarjeta.cand.historica .prov-tag { background: var(--c2); }
.tarjeta.cand.historica .anio-cinta { position: absolute; left: -30px; bottom: 26px; z-index: 3; width: 120px; padding: 3px 0; transform: rotate(45deg);
  background: var(--c2); color: #f6ecd2; text-align: center; font: 800 15px "Barlow Condensed", serif; letter-spacing: .12em;
  box-shadow: 0 2px 4px rgba(0,0,0,.3); border-top: 1px solid #f6ecd2; border-bottom: 1px solid #f6ecd2; }
.tarjeta.cand.historica .tarjeta-arte { overflow: hidden; }
.tarjeta.cand.historica .tarjeta-pie { background: #fbf3dc; border-top: 3px double var(--c2); }
.tarjeta.cand.historica .tarjeta-pie .apellido { font-family: "Barlow Condensed", Georgia, serif; color: #3a2a12; }
.tarjeta.cand.historica .tarjeta-pie .rol { color: #6b5532; font-style: italic; }

/* Logo de la boleta abajo, sobre el blanco del pie, sin recuadro; año de los históricos arriba del nombre */
.tarjeta.cand .logo-pie { display: block; height: 28px; max-width: 70%; margin: 6px auto 0; object-fit: contain; }
.tarjetas.muchas .tarjeta.cand .logo-pie { height: 18px; }
.tarjeta.cand .anio-pie { display: block; font: 800 13px "Barlow Condensed", serif; letter-spacing: .18em; color: var(--c2); }

/* ---------------------------------------------------------------- Tarjetas históricas: un diseño por época */
.tarjeta.cand.historica .tarjeta-arte::after { opacity: 0; }

/* 1900–1930: retrato sepia con marco dorado ornamentado */
.tarjeta.cand.epoca-1900 .tarjeta-arte { background: radial-gradient(ellipse at 50% 40%, #f4e4c1, #c9a873 70%, #8a6a3a);
  box-shadow: inset 0 0 0 4px #b8902f, inset 0 0 0 6px #f6e7b8, inset 0 0 0 9px #7a5a1c, inset 0 0 50px rgba(60,35,10,.6); }
.tarjeta.cand.epoca-1900 .retrato img { filter: sepia(.8) contrast(1.05); }
.tarjeta.cand.epoca-1900 .silueta { opacity: 0; }
.tarjeta.cand.epoca-1900 .tarjeta-arte::before { content: "❦"; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 2; color: #7a5a1c; font-size: 18px; }
.tarjeta.cand.epoca-1900 .tarjeta-pie { background: #f4e4c1; border-top: 3px double #7a5a1c; }
.tarjeta.cand.epoca-1900 .tarjeta-pie .apellido { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: #3a2a12; letter-spacing: .02em; }
.tarjeta.cand.epoca-1900 .anio-pie { color: #7a5a1c; font-family: Georgia, serif; }

/* 1940–1959: afiche de propaganda, sol de rayos y franjas */
.tarjeta.cand.epoca-1940 .tarjeta-arte { background:
  repeating-conic-gradient(from 0deg at 50% 70%, rgba(255,255,255,.22) 0 9deg, transparent 9deg 18deg),
  linear-gradient(180deg, #74acdf 0 33%, #fff 33% 66%, #74acdf 66%); }
.tarjeta.cand.epoca-1940 .silueta { opacity: 0; }
.tarjeta.cand.epoca-1940 .retrato img { filter: saturate(1.2) contrast(1.1); }
.tarjeta.cand.epoca-1940 .tarjeta-pie { background: #1c3f7a; }
.tarjeta.cand.epoca-1940 .tarjeta-pie .apellido { color: #fff; font-weight: 900; text-transform: uppercase; }
.tarjeta.cand.epoca-1940 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1940 .tarjeta-pie .rol { color: #dbe8ff; }
.tarjeta.cand.epoca-1940 .anio-pie { color: #f5b81c; }

/* 1960–1979: afiche pop con tramado de puntos */
.tarjeta.cand.epoca-1960 .tarjeta-arte { background:
  radial-gradient(circle, rgba(0,0,0,.18) 1.4px, transparent 1.6px) 0 0 / 9px 9px,
  linear-gradient(135deg, var(--c1), #f2c94c); }
.tarjeta.cand.epoca-1960 .silueta { opacity: 0; }
.tarjeta.cand.epoca-1960 .retrato img { filter: drop-shadow(4px 4px 0 #1d2530); }
.tarjeta.cand.epoca-1960 .tarjeta-pie { background: #fff6dc; border-top: 4px solid #1d2530; }
.tarjeta.cand.epoca-1960 .tarjeta-pie .apellido { color: var(--c2); }
.tarjeta.cand.epoca-1960 .anio-pie { color: #1d2530; }

/* 1980–1989: pantalla de TV de los 80, con líneas de barrido */
.tarjeta.cand.epoca-1980 .tarjeta-arte { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
  linear-gradient(180deg, #120e2e 0%, #2b1a5e 60%, #e0307a 100%);
  box-shadow: inset 0 0 0 6px #2a2a2a, inset 0 0 30px rgba(0,0,0,.8); border-radius: 14px; }
.tarjeta.cand.epoca-1980 .silueta { opacity: .12; filter: invert(1); }
.tarjeta.cand.epoca-1980 .tarjeta-arte::before { content: ""; position: absolute; left: 0; right: 0; bottom: 34%; height: 3px; z-index: 0;
  background: linear-gradient(90deg, #00e5ff, #ff2fa0); box-shadow: 0 0 8px #ff2fa0; }
.tarjeta.cand.epoca-1980 .tarjeta-pie { background: #1d1440; }
.tarjeta.cand.epoca-1980 .tarjeta-pie .apellido { color: #fff; text-shadow: 2px 2px 0 #e0307a; }
.tarjeta.cand.epoca-1980 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1980 .tarjeta-pie .rol { color: #c8b8ff; }
.tarjeta.cand.epoca-1980 .anio-pie { color: #00e5ff; }

/* 1990–2009: recorte de diario */
.tarjeta.cand.epoca-2000 .tarjeta-arte { background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 7px),
  linear-gradient(#efece4, #dcd7ca); box-shadow: inset 0 0 0 1px #9b968a; }
.tarjeta.cand.epoca-2000 .silueta { opacity: .1; filter: grayscale(1); }
.tarjeta.cand.epoca-2000 .retrato img { filter: grayscale(.35) contrast(1.05); }
.tarjeta.cand.epoca-2000 .tarjeta-arte::before { content: "EDICIÓN ESPECIAL"; position: absolute; left: 0; right: 0; top: 34px; z-index: 1; padding: 2px 0;
  background: #1d1d1d; color: #efece4; text-align: center; font: 800 11px Georgia, serif; letter-spacing: .25em; }
.tarjeta.cand.epoca-2000 .tarjeta-pie { background: #efece4; border-top: 2px solid #1d1d1d; }
.tarjeta.cand.epoca-2000 .tarjeta-pie .apellido { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: #111; }
.tarjeta.cand.epoca-2000 .anio-pie { color: #8a1c1c; font-family: Georgia, serif; }

/* 2010–2014: afiche gráfico moderno */
.tarjeta.cand.epoca-2010 .tarjeta-arte { background: linear-gradient(160deg, var(--c1) 0 55%, var(--c2) 55%); }
.tarjeta.cand.epoca-2010 .silueta { opacity: .15; }
.tarjeta.cand.epoca-2010 .tarjeta-pie { background: #fff; border-top: 5px solid var(--c1); }
.tarjeta.cand.epoca-2010 .anio-pie { color: var(--c1); }

/* 2003–2009: brillo de los 2000 */
.tarjeta.cand.epoca-2003 .tarjeta-arte { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.7), transparent 55%), linear-gradient(180deg, #8fd0ff, #1f6fc0 70%, #0c3a73); }
.tarjeta.cand.epoca-2003 .tarjeta-arte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; z-index: 0; background: linear-gradient(rgba(255,255,255,.35), transparent); border-radius: 0 0 50% 50% / 0 0 20% 20%; }
.tarjeta.cand.epoca-2003 .silueta { opacity: .2; }
.tarjeta.cand.epoca-2003 .tarjeta-pie { background: linear-gradient(#fff, #e6f1fb); border-top: 3px solid #1f6fc0; }
.tarjeta.cand.epoca-2003 .anio-pie { color: #1f6fc0; }

/* Pies claros en todas las épocas, para que los logos se lean sin recuadro */
.tarjeta.cand.epoca-1940 .tarjeta-pie { background: #eef4fc; border-top: 4px solid #1c3f7a; }
.tarjeta.cand.epoca-1940 .tarjeta-pie .apellido { color: #1c3f7a; }
.tarjeta.cand.epoca-1940 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1940 .tarjeta-pie .rol { color: #4a5a78; }
.tarjeta.cand.epoca-1940 .anio-pie { color: #c99400; }
.tarjeta.cand.epoca-1980 .tarjeta-pie { background: #f3eeff; border-top: 3px solid #e0307a; }
.tarjeta.cand.epoca-1980 .tarjeta-pie .apellido { color: #2b1a5e; text-shadow: 2px 2px 0 rgba(224,48,122,.35); }
.tarjeta.cand.epoca-1980 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1980 .tarjeta-pie .rol { color: #5b4a8a; }
.tarjeta.cand.epoca-1980 .anio-pie { color: #e0307a; }

/* 1983–1988: afiche de la vuelta a la democracia, pegado en la pared */
.tarjeta.cand.epoca-1983 .tarjeta-arte { background: #d9d3c7; }
.tarjeta.cand.epoca-1983 .tarjeta-arte::before { content: ""; position: absolute; inset: 22px 12px 10px; z-index: 0; transform: rotate(-2.5deg);
  background: linear-gradient(180deg, var(--c1) 0 22%, #fff 22% 78%, var(--c1) 78%);
  box-shadow: 0 3px 8px rgba(0,0,0,.3); clip-path: polygon(0 2%, 6% 0, 30% 1%, 55% 0, 80% 2%, 100% 0, 99% 30%, 100% 62%, 98% 100%, 70% 98%, 40% 100%, 12% 98%, 0 100%, 1% 60%); }
.tarjeta.cand.epoca-1983 .silueta { opacity: 0; }
.tarjeta.cand.epoca-1983 .retrato { position: relative; z-index: 1; }
.tarjeta.cand.epoca-1983 .tarjeta-pie { background: #fff; border-top: 4px solid var(--c1); }
.tarjeta.cand.epoca-1983 .tarjeta-pie .apellido { color: var(--c2); font-weight: 900; letter-spacing: .03em; }
.tarjeta.cand.epoca-1983 .anio-pie { color: var(--c1); }

/* 1999–2001: boleta electoral de papel */
.tarjeta.cand.epoca-2001 .tarjeta-arte { background: #fbfaf6; box-shadow: inset 0 0 0 2px #1d2530, inset 0 26px 0 0 var(--c1); }
.tarjeta.cand.epoca-2001 .tarjeta-arte::before { content: "BOLETA OFICIAL"; position: absolute; left: 0; right: 0; top: 30px; z-index: 0; text-align: center;
  font: 800 10px "Barlow Condensed", sans-serif; letter-spacing: .3em; color: #1d2530; }
.tarjeta.cand.epoca-2001 .silueta { opacity: 0; }
.tarjeta.cand.epoca-2001 .retrato { position: relative; z-index: 1; }
.tarjeta.cand.epoca-2001 .retrato::before { content: ""; position: absolute; inset: 14% 8% 0; z-index: -1; border: 2px solid #1d2530; background: #fff; }
.tarjeta.cand.epoca-2001 .tarjeta-pie { background: #fbfaf6; border-top: 2px dashed #1d2530; }
.tarjeta.cand.epoca-2001 .tarjeta-pie .apellido { color: #1d2530; }
.tarjeta.cand.epoca-2001 .anio-pie { color: var(--c2); }

/* ---------------------------------------------------------------- Ficha abierta: diseño de la época de cada personaje */
/* Logo de la boleta en color, sin recuadro (un halo claro lo despega del fondo) y año de los históricos */
.ficha .ficha-izq .ficha-agua { display: none; }
.ficha-logo { position: absolute; right: 16px; top: 16px; z-index: 2; height: 54px; max-width: 34%; object-fit: contain;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.ficha-anio { position: absolute; left: 16px; top: 14px; z-index: 2; font: 800 30px "Barlow Condensed", sans-serif; letter-spacing: .08em; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
/* Actuales: degradé del color de su boleta con un sol de rayos suave */
.ficha.actual .ficha-izq { background: repeating-conic-gradient(from 0deg at 50% 100%, rgba(255,255,255,.07) 0 6deg, transparent 6deg 12deg), linear-gradient(160deg, var(--c1), var(--c2)); }

/* 1900: retrato sepia con marco dorado */
.ficha.epoca-1900 .ficha-izq { background: radial-gradient(ellipse at 50% 45%, #f4e4c1, #c9a873 70%, #8a6a3a); color: #3a2a12;
  box-shadow: inset 0 0 0 6px #b8902f, inset 0 0 0 9px #f6e7b8, inset 0 0 0 13px #7a5a1c, inset 0 0 70px rgba(60,35,10,.55); }
.ficha.epoca-1900 .ficha-nombre, .ficha.epoca-1900 .ficha-rol { color: #3a2a12; font-family: Georgia, serif; }
.ficha.epoca-1900 .ficha-foto img { filter: sepia(.8) contrast(1.05); }
.ficha.epoca-1900 .ficha-anio { color: #7a5a1c; text-shadow: none; font-family: Georgia, serif; }

/* 1940: afiche de propaganda con sol y franjas */
.ficha.epoca-1940 .ficha-izq { background: repeating-conic-gradient(from 0deg at 50% 75%, rgba(255,255,255,.25) 0 8deg, transparent 8deg 16deg),
  linear-gradient(180deg, #74acdf 0 33%, #f4f8fc 33% 66%, #74acdf 66%); color: #1c3f7a; }
.ficha.epoca-1940 .ficha-nombre, .ficha.epoca-1940 .ficha-rol { color: #1c3f7a; }
.ficha.epoca-1940 .ficha-anio { color: #c99400; text-shadow: 0 2px 0 #1c3f7a; }

/* 1960: pop con tramado */
.ficha.epoca-1960 .ficha-izq { background: radial-gradient(circle, rgba(0,0,0,.18) 1.6px, transparent 1.8px) 0 0 / 11px 11px, linear-gradient(135deg, var(--c1), #f2c94c); }
.ficha.epoca-1960 .ficha-foto img { filter: drop-shadow(6px 6px 0 #1d2530); }
.ficha.epoca-1960 .ficha-nombre { text-shadow: 3px 3px 0 #1d2530; }

/* 1983: afiche de la democracia pegado en la pared */
.ficha.epoca-1983 .ficha-izq { background: #d9d3c7; color: var(--c2); }
.ficha.epoca-1983 .ficha-izq::before { content: ""; position: absolute; inset: 14px 24px 0; transform: rotate(-1.5deg); background: linear-gradient(180deg, var(--c1) 0 18%, #fff 18% 82%, var(--c1) 82%);
  box-shadow: 0 4px 12px rgba(0,0,0,.3); clip-path: polygon(0 1%, 8% 0, 40% 1%, 70% 0, 100% 1%, 99% 40%, 100% 100%, 60% 99%, 20% 100%, 0 99%, 1% 50%); }
.ficha.epoca-1983 .ficha-izq > * { position: relative; z-index: 1; }
.ficha.epoca-1983 .ficha-izq > .ficha-logo, .ficha.epoca-1983 .ficha-izq > .ficha-anio { position: absolute; z-index: 2; }
.ficha.epoca-1983 .ficha-nombre, .ficha.epoca-1983 .ficha-rol { color: var(--c2); text-shadow: none; }

/* 1989: TV de los 80 */
.ficha.epoca-1980 .ficha-izq { background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), linear-gradient(180deg, #120e2e, #2b1a5e 60%, #e0307a);
  box-shadow: inset 0 0 0 8px #2a2a2a, inset 0 0 50px rgba(0,0,0,.8); }
.ficha.epoca-1980 .ficha-nombre { text-shadow: 3px 3px 0 #e0307a; }
.ficha.epoca-1980 .ficha-anio { color: #00e5ff; text-shadow: 0 0 10px #00e5ff; }

/* 1999–2001: boleta oficial */
.ficha.epoca-2001 .ficha-izq { background: #fbfaf6; color: #1d2530; box-shadow: inset 0 0 0 3px #1d2530, inset 0 44px 0 0 var(--c1); }
.ficha.epoca-2001 .ficha-izq::after { content: "BOLETA OFICIAL"; position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 800 12px "Barlow Condensed", sans-serif; letter-spacing: .4em; color: #1d2530; border-top: 2px dashed #1d2530; padding-top: 6px; }
.ficha.epoca-2001 .ficha-nombre, .ficha.epoca-2001 .ficha-rol { color: #1d2530; }

/* 2002: diario */
.ficha.epoca-2000 .ficha-izq { background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 8px), linear-gradient(#efece4, #dcd7ca); color: #111; }
.ficha.epoca-2000 .ficha-nombre { font-family: Georgia, serif; color: #111; }
.ficha.epoca-2000 .ficha-rol { color: #444; }
.ficha.epoca-2000 .ficha-foto img { filter: grayscale(.35); }
.ficha.epoca-2000 .ficha-anio { color: #8a1c1c; text-shadow: none; font-family: Georgia, serif; }

/* 2003–2009: brillo de los 2000 */
.ficha.epoca-2003 .ficha-izq { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(180deg, #8fd0ff, #1f6fc0 70%, #0c3a73); }

/* 2010–2014: gráfico moderno */
.ficha.epoca-2010 .ficha-izq { background: linear-gradient(160deg, var(--c1) 0 55%, var(--c2) 55%); }
/* Logo de la ficha: suelto, sin caja blanca */
.ficha .ficha-izq .ficha-logo { background: none; padding: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.ficha.epoca-2001 .ficha-izq::after { top: 12px; bottom: auto; border-top: 0; padding-top: 0; color: #fff; z-index: 1; }

/* ---------------------------------------------------------------- Diseños propios de personajes */
/* Padre Paco: vitral de iglesia con aureola */
.tarjeta.cand-padre-paco .tarjeta-arte, .ficha.ficha-padre-paco.actual .ficha-izq { background:
  radial-gradient(circle at 50% 38%, rgba(255,240,180,.95) 0 14%, rgba(255,220,120,.45) 22%, transparent 38%),
  conic-gradient(from 0deg at 50% 38%, #b3123d 0 30deg, #1f5fae 30deg 60deg, #e0a800 60deg 90deg, #2e7d32 90deg 120deg, #6a2c91 120deg 150deg, #1f5fae 150deg 180deg,
    #b3123d 180deg 210deg, #e0a800 210deg 240deg, #2e7d32 240deg 270deg, #6a2c91 270deg 300deg, #1f5fae 300deg 330deg, #e0a800 330deg 360deg); }
.tarjeta.cand-padre-paco .tarjeta-arte::before, .ficha.ficha-padre-paco.actual .ficha-izq::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 38%, #2a1f14 0 1.2deg, transparent 1.2deg 30deg),
    radial-gradient(circle at 50% 38%, transparent 0 21%, #2a1f14 21% 22%, transparent 22% 47%, #2a1f14 47% 48%, transparent 48%);
  opacity: .8; }
.tarjeta.cand-padre-paco .tarjeta-arte { border-radius: 60px 60px 8px 8px; box-shadow: inset 0 0 0 5px #2a1f14, inset 0 0 0 8px #c9a227; }
.tarjeta.cand-padre-paco .silueta { opacity: 0; }
.tarjeta.cand-padre-paco .retrato, .ficha-padre-paco .ficha-foto { position: relative; z-index: 1; }
.tarjeta.cand-padre-paco .tarjeta-pie { background: linear-gradient(#f6eedb, #ead9b5); border-top: 3px solid #c9a227; }
.tarjeta.cand-padre-paco .tarjeta-pie .apellido { color: #5a2a12; font-family: Georgia, serif; }
.tarjeta.cand-padre-paco .tarjeta-pie .apellido::before, .tarjeta.cand-padre-paco .tarjeta-pie .apellido::after { content: " ✝ "; color: #c9a227; font-size: .7em; }
.tarjeta.cand-padre-paco .tarjeta-pie .rol { color: #7a5532; font-style: italic; }
.ficha-padre-paco .ficha-nombre { text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.ficha.ficha-padre-paco.actual .ficha-izq { box-shadow: inset 0 0 0 8px #2a1f14, inset 0 0 0 12px #c9a227; }

/* Ficha de personajes actuales: plano de estudio con el color de su boleta, sin rayos */
.ficha.actual .ficha-izq { background:
  radial-gradient(circle at 50% 108%, rgba(255,255,255,.28) 0 30%, rgba(255,255,255,.12) 30% 44%, transparent 44.5%),
  linear-gradient(115deg, transparent 0 62%, rgba(255,255,255,.07) 62% 74%, transparent 74%),
  linear-gradient(180deg, var(--c1), var(--c2)); }
.ficha.actual .ficha-izq::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; pointer-events: none; }

/* Lousteau y Pullaro: ficha con la identidad de Evolución (franjas celeste, magenta y verde de su "E"), logo de la UCR */
.ficha.ficha-lousteau.actual .ficha-izq, .ficha.ficha-pullaro.actual .ficha-izq { background:
  linear-gradient(168deg, transparent 0 44%, #00B0F0 44% 53%, transparent 53% 56%, #EE2090 56% 65%, transparent 65% 68%, #B0D040 68% 77%, transparent 77%),
  linear-gradient(180deg, #ffffff, #eef0f2); color: #4B4B4D; }
.ficha.ficha-lousteau.actual .ficha-izq::after, .ficha.ficha-pullaro.actual .ficha-izq::after { border-color: rgba(75,75,77,.18); }
.ficha.ficha-lousteau .ficha-nombre, .ficha.ficha-pullaro .ficha-nombre { color: #4B4B4D; text-shadow: none; }
.ficha.ficha-lousteau .ficha-nombre small, .ficha.ficha-pullaro .ficha-nombre small { color: #00B0F0; }
.ficha.ficha-lousteau .ficha-rol, .ficha.ficha-pullaro .ficha-rol { color: #6b6b70; text-shadow: none; }
.ficha.ficha-lousteau .ficha-logo, .ficha.ficha-pullaro .ficha-logo { filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }

/* ---------------------------------------------------------------- Ficha: franja superior reservada para año y logo */
/* El año (izquierda) y el logo (derecha) van en su propia franja; el nombre arranca debajo y nunca se pisan. */
@media (min-width: 601px) {
  .ficha .ficha-izq { padding-top: 80px; }
  .ficha .ficha-izq .ficha-logo { top: 14px; right: 14px; height: 52px; max-width: 42%; }
  .ficha .ficha-anio { top: 22px; left: 16px; font-size: 26px; }
  .ficha .ficha-nombre { margin-top: 0; }
}
/* 1983: afiche blanco con franjas finas del color de la boleta (antes el texto quedaba sobre la franja y no se leía) */
.ficha.epoca-1983 .ficha-izq::before { background: linear-gradient(180deg, var(--c1) 0 12px, #fff 12px calc(100% - 12px), var(--c1) calc(100% - 12px)); }
.ficha.epoca-1983 .ficha-izq > .ficha-vice { position: absolute; }
.ficha.epoca-1983 .ficha-anio { color: var(--c1); text-shadow: none; }
/* 1999–2001: boleta oficial con la franja arriba; el año va dentro de la franja y el cartel a su lado, el logo debajo */
.ficha.epoca-2001 .ficha-izq { box-shadow: inset 0 0 0 3px #1d2530, inset 0 40px 0 0 var(--c1); }
.ficha.epoca-2001 .ficha-izq::after { top: 13px; left: 84px; right: 12px; text-align: left; font-size: 12px; letter-spacing: .3em; }
.ficha.epoca-2001 .ficha-anio { top: 6px; font-size: 24px; }
@media (min-width: 601px) {
  .ficha.epoca-2001 .ficha-izq { padding-top: 112px; }
  .ficha.epoca-2001 .ficha-izq .ficha-logo { top: 50px; height: 50px; left: 50%; right: auto; transform: translateX(-50%); }
}
/* Padre Paco: el cargo sobre una cinta oscura para que se lea encima del vitral */
.ficha-padre-paco .ficha-rol { background: rgba(42,31,20,.85); padding: 3px 10px; border-radius: 6px; opacity: 1; }

/* ---------------------------------------------------------------- Logos: contorno recortado según el fondo (sin caja) */
/* Fondos oscuros: borde blanco tipo sticker, así los logos oscuros (Concertación, Frejupo, Hacemos) no desaparecen. */
.ficha .ficha-izq .ficha-logo { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
/* Fondos claros: contorno oscuro fino, así las partes blancas (UCR, UxP, UCRP) no se pierden. */
.ficha.epoca-1900 .ficha-izq .ficha-logo, .ficha.epoca-1983 .ficha-izq .ficha-logo, .ficha.epoca-2001 .ficha-izq .ficha-logo,
.ficha.epoca-2000 .ficha-izq .ficha-logo, .ficha.ficha-lousteau .ficha-izq .ficha-logo, .ficha.ficha-pullaro .ficha-izq .ficha-logo,
.tarjeta.cand .logo-pie {
  filter: drop-shadow(0 0 .7px rgba(20,25,35,.85)) drop-shadow(0 0 .7px rgba(20,25,35,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.2)); }

/* ---------------------------------------------------------------- Figura del personaje más grande */
/* Tarjetas: la caricatura ocupa casi todo el arte (antes 150x178 de 220) */
.cand .retrato:has(img[src*="caricaturas"]) { width: 94%; height: 97%; }
/* Ficha abierta: la caricatura ocupa todo el espacio libre debajo del nombre */
@media (min-width: 601px) {
  .ficha .ficha-izq .ficha-foto { width: 100%; max-width: 360px; height: min(400px, 56vh); flex-shrink: 1; min-height: 200px; }
}

/* ================================================================ Diseños propios de personajes */
/* Fichas y tarjetas: la caricatura siempre por encima de los adornos de fondo */
.tarjeta.cand .retrato { z-index: 1; }

/* ---- Milei: melena de león dorada detrás de la cabeza, sobre el violeta de LLA */
.ficha.ficha-milei.actual .ficha-izq { background: radial-gradient(ellipse at 50% 100%, #9b5fd6 0 30%, transparent 60%), linear-gradient(180deg, #3D1868, #5b2a96 55%, #7B3FB8); }
.ficha.ficha-milei .ficha-izq::before, .tarjeta.cand-milei .tarjeta-arte::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, #ffe08a 0 22%, #f6b733 45%, #d77a12 72%, #9c4a0a 100%); clip-path: polygon(50.0% 0.0%, 54.1% 13.2%, 61.1% 1.3%, 63.2% 12.2%, 71.7% 5.0%, 69.7% 18.7%, 81.2% 10.9%, 78.3% 21.7%, 89.1% 18.8%, 81.3% 30.3%, 95.0% 28.3%, 87.8% 36.8%, 98.7% 38.9%, 86.8% 45.9%, 100.0% 50.0%, 89.7% 54.5%, 98.7% 61.1%, 84.9% 62.2%, 95.0% 71.7%, 83.9% 71.3%, 89.1% 81.2%, 76.2% 76.2%, 81.2% 89.1%, 71.3% 83.9%, 71.7% 95.0%, 62.2% 84.9%, 61.1% 98.7%, 54.5% 89.7%, 50.0% 100.0%, 45.9% 86.8%, 38.9% 98.7%, 36.8% 87.8%, 28.3% 95.0%, 30.3% 81.3%, 18.8% 89.1%, 21.7% 78.3%, 10.9% 81.2%, 18.7% 69.7%, 5.0% 71.7%, 12.2% 63.2%, 1.3% 61.1%, 13.2% 54.1%, 0.0% 50.0%, 10.3% 45.5%, 1.3% 38.9%, 15.1% 37.8%, 5.0% 28.3%, 16.1% 28.7%, 10.9% 18.8%, 23.8% 23.8%, 18.8% 10.9%, 28.7% 16.1%, 28.3% 5.0%, 37.8% 15.1%, 38.9% 1.3%, 45.5% 10.3%);
  animation: melena 16s linear infinite; }
.ficha.ficha-milei .ficha-izq::before { width: 380px; height: 380px; left: 50%; bottom: 60px; margin-left: -190px; }
.tarjeta.cand-milei .tarjeta-arte::before { width: 230px; height: 230px; left: 50%; bottom: 10px; margin-left: -115px; }
.tarjeta.cand-milei .silueta { opacity: 0; }
@keyframes melena { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ficha.ficha-milei .ficha-izq::before, .tarjeta.cand-milei .tarjeta-arte::before { animation: none; } }

/* ---- Macri: presidencial, la Casa Rosada al atardecer con los amarillos de Cambiemos */
.ficha.ficha-mauricio-macri.actual .ficha-izq, .tarjeta.cand-mauricio-macri .tarjeta-arte { background:
  radial-gradient(circle at 50% 62%, rgba(255,246,200,.9) 0 12%, rgba(255,220,110,.35) 26%, transparent 45%),
  linear-gradient(180deg, #F5C518, #F29A1F 60%, #E0662B); }
.ficha.ficha-mauricio-macri .ficha-izq::before, .tarjeta.cand-mauricio-macri .tarjeta-arte::before { content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: 46%; z-index: 0;
  background: url("../assets/casa-rosada.svg") 50% 100% / contain no-repeat; opacity: .45; pointer-events: none; }
.tarjeta.cand-mauricio-macri .silueta { opacity: 0; }
.ficha.ficha-mauricio-macri .ficha-nombre, .ficha.ficha-mauricio-macri .ficha-rol { color: #3a2400; text-shadow: none; }
.ficha.ficha-mauricio-macri .ficha-nombre::after { content: "PRESIDENTE 2015–2019"; display: block; margin: 8px auto 0; width: max-content; padding: 3px 12px; border-radius: 20px;
  font: 800 13px "Barlow Condensed", sans-serif; letter-spacing: .14em; color: #fff; background: linear-gradient(90deg, #74acdf, #4a8ccc); }
.ficha.ficha-mauricio-macri.actual .ficha-izq::after { border-color: rgba(58,36,0,.2); }

/* ---- Perón (legendario): Sol de Mayo radiante sobre celeste, marco dorado */
.ficha.ficha-peron.epoca-1940 .ficha-izq { color: #13315c; background:
  radial-gradient(circle at 50% 64%, #fff6c8 0 9%, rgba(255,214,90,.85) 15%, rgba(255,214,90,0) 30%),
  repeating-conic-gradient(from 0deg at 50% 64%, rgba(255,255,255,.34) 0 7deg, rgba(255,255,255,0) 7deg 15deg),
  linear-gradient(180deg, #a9d0f2, #74acdf 55%, #4f8fcf);
  box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.ficha.ficha-peron .ficha-nombre, .ficha.ficha-peron .ficha-rol { color: #13315c; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.ficha.ficha-peron .ficha-anio { color: #8a6a00; text-shadow: 0 1px 0 #fff3c4; }

/* ---- Alfonsín (legendario): el "RA" de 1983, círculo rojo de la campaña detrás, papel limpio y marco dorado */
.ficha.ficha-alfonsin.epoca-1983 .ficha-izq::before { display: none; }
.ficha.ficha-alfonsin.epoca-1983 .ficha-izq { color: #8E1022; background:
  radial-gradient(circle at 50% 70%, #d7263d 0 33%, #fff 33.5% 35.5%, #d7263d 36% 37.5%, transparent 38%),
  linear-gradient(180deg, #d7263d 0 10px, transparent 10px),
  repeating-linear-gradient(135deg, rgba(215,38,61,.05) 0 2px, transparent 2px 12px),
  #fbf8f2;
  box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.ficha.ficha-alfonsin .ficha-nombre, .ficha.ficha-alfonsin .ficha-rol { color: #8E1022; }
.ficha.ficha-alfonsin .ficha-anio { color: #d7263d; }

/* ---------------------------------------------------------------- Intención de voto en el panel derecho, debajo del Congreso */
.hud.hud-panel { position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; pointer-events: auto; margin: 4px 0 10px; }
.hud.hud-panel .hud-cand { box-shadow: 0 1px 4px rgba(0,0,0,.15); }
/* Con el panel a la vista, la tira flotante sobre el mapa sobra */
@media (min-width: 901px) { .col-mapa > #hud { display: none; } }
@media (orientation: landscape) and (max-height: 520px) { .col-mapa > #hud { display: none; } }

/* Tutorial: el consejo arriba cuando lo que hay que tocar está abajo o hay una ventana abierta */
.consejo.arriba { top: 10px; bottom: auto; z-index: 1000; }

/* Milei: el león dorado rugiendo detrás (reemplaza la melena de puntas) */
.ficha.ficha-milei .ficha-izq::before, .tarjeta.cand-milei .tarjeta-arte::before {
  background: url("../assets/leon.webp") 50% 50% / contain no-repeat; clip-path: none; animation: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.ficha.ficha-milei .ficha-izq::before { width: 420px; height: 420px; margin-left: -230px; bottom: 70px; }
.tarjeta.cand-milei .tarjeta-arte::before { width: 250px; height: 250px; margin-left: -135px; bottom: 20px; }

/* ---------------------------------------------------------------- Regiones: tira para elegir arriba del mapa y cartel abajo */
/* El cartel ocupa el mapa sin taparlo: la tira de regiones arriba (siempre se puede pasar a otra) y el detalle abajo. */
.col-mapa > #cartel { top: 8px; bottom: 8px; left: 8px; right: 8px; width: auto; transform: none; display: flex; flex-direction: column; justify-content: space-between;
  gap: 8px; background: none; box-shadow: none; border-radius: 0; overflow: visible; pointer-events: none; }
.col-mapa > #cartel[hidden] { display: none; }
#cartel > * { pointer-events: auto; }
.cr-tira { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
.cr-tira button { flex: none; display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 2px solid transparent;
  background: rgba(255,255,255,.92); box-shadow: 0 2px 6px rgba(0,0,0,.25); font: 700 12px var(--titulos); text-transform: uppercase; letter-spacing: .03em; color: #1c2733; cursor: pointer; }
.cr-tira button .ico.mini { width: 22px; height: 22px; }
.cr-tira button.activa { background: var(--ic); color: #fff; border-color: #fff; }
.cr-tira button:hover:not(.activa) { border-color: var(--ic); }
.cr-caja { width: min(520px, 100%); margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; max-height: 55%; overflow-y: auto; }
.cr-ayuda { margin: 6px 10px 0; font-size: 12px; color: var(--gris); }
.cr-provs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; padding: 6px 10px 2px; }
.cr-prov { display: grid; gap: 1px; text-align: left; padding: 5px 8px; border-radius: 8px; border: 0; border-left: 5px solid var(--c1); background: #f2f4f6; cursor: pointer; }
.cr-prov:hover { background: #e6eaee; }
.cr-prov.cuenta { background: color-mix(in srgb, var(--c1) 14%, #fff); }
.cr-prov.mia { outline: 2px solid var(--naranja); }
.cr-prov-nom { font: 700 13px var(--titulos); text-transform: uppercase; color: #1c2733; }
.cr-prov-dato { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--gris); }
.cr-prov-dato b { color: #1c2733; font-size: 12px; }
.cr-prov-dato b::after { content: " dip. ·"; font-weight: 400; color: var(--gris); }
.cr-prov-cara { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.ficha.ficha-milei .ficha-izq::before { width: 360px; height: 360px; margin-left: -200px; bottom: 150px; opacity: .95; }
/* Tarjeta de Milei: el león más chico arriba a la derecha, con la cabeza rugiendo a la vista */
.tarjeta.cand-milei .tarjeta-arte::before { width: 170px; height: 170px; left: auto; right: -34px; top: 4px; bottom: auto; margin-left: 0; opacity: .9; }
/* Tarjeta de Milei: el león grande y suave, como marca de agua detrás (opaco y entero se veía raro en la tarjeta chica) */
.tarjeta.cand-milei .tarjeta-arte::before { width: 135%; height: 135%; left: 50%; right: auto; top: -12%; bottom: auto; margin-left: -62%; opacity: .38; filter: none; }

/* ---- Alberto Fernández: presidencial del Frente de Todos, sol naciente detrás y franjas celestes y blancas en diagonal */
.ficha.ficha-alberto-fernandez.actual .ficha-izq, .tarjeta.cand-alberto-fernandez .tarjeta-arte { background:
  radial-gradient(circle at 50% 104%, #fff3c4 0 16%, #ffd75e 22%, rgba(255,200,60,.5) 30%, transparent 44%),
  repeating-conic-gradient(from 0deg at 50% 104%, rgba(255,255,255,.22) 0 5deg, transparent 5deg 12deg),
  linear-gradient(115deg, #35B4F0 0 30%, #f4fbff 30% 46%, #35B4F0 46% 70%, #f4fbff 70% 80%, #1470AE 80%); }
.tarjeta.cand-alberto-fernandez .silueta { opacity: 0; }
.ficha.ficha-alberto-fernandez .ficha-nombre { color: #0b3d66; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.ficha.ficha-alberto-fernandez .ficha-rol { color: #0b3d66; text-shadow: none; }
.ficha.ficha-alberto-fernandez .ficha-nombre::after { content: "PRESIDENTE 2019–2023"; display: block; margin: 8px auto 0; width: max-content; padding: 3px 12px; border-radius: 20px;
  font: 800 13px "Barlow Condensed", sans-serif; letter-spacing: .14em; color: #fff; background: #1470AE; }
.ficha.ficha-alberto-fernandez.actual .ficha-izq::after { border-color: rgba(11,61,102,.2); }

/* ---------------------------------------------------------------- Regiones en el panel derecho (no tapan el mapa) */
.rg-lista { display: grid; gap: 6px; }
.rg { border-radius: 10px; background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--ic); overflow: hidden; }
.rg.activa { box-shadow: 0 4px 14px rgba(0,0,0,.15); border-color: var(--ic); }
.rg.mia .rg-nom { color: var(--naranja); }
.rg-cab { width: 100%; display: grid; grid-template-columns: 26px 1fr 30px; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 7px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.rg-cab:hover { background: #f4f6f8; }
.rg.activa .rg-cab { background: color-mix(in srgb, var(--ic) 12%, #fff); }
.rg-cab .ico.mini { width: 26px; height: 26px; grid-row: 1 / 3; }
.rg-nom { display: grid; font: 700 13.5px var(--titulos); text-transform: uppercase; color: #1c2733; line-height: 1.1; }
.rg-nom small { font: 500 11px var(--texto, inherit); text-transform: none; color: var(--gris); }
.rg-pista { grid-column: 2; display: flex; align-items: center; gap: 6px; }
.rg-pista .g-celdas { position: relative; flex: 1; display: flex; gap: 2px; height: 9px; }
.rg-pista .g-celdas > span { flex: 1; border-radius: 2px; background: #e3e8ed; }
.rg-pista .g-celdas > span.llena { background: var(--ic); }
.rg-pista .g-celdas > span.nueva { background: repeating-linear-gradient(-45deg, var(--ic) 0 2px, #e3e8ed 2px 4px); }
.rg-pista .g-control { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #1c2733; }
.rg-pista .g-dip { font: 800 12px var(--titulos); white-space: nowrap; }
.rg-lider { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e7ebef; color: #9aa5b1; overflow: hidden; }
.rg-lider .g-cara { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.rg-detalle { border-top: 1px solid var(--borde); padding-bottom: 4px; }
.rg-detalle .cr-provs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
/* Celular: barra finita con la región elegida al pie del mapa */
.col-mapa > #cartel { top: auto; bottom: 8px; display: block; }
.cr-mini { display: grid; grid-template-columns: 24px 1fr minmax(90px, 40%) auto; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border-radius: 10px;
  border-left: 5px solid var(--ic); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.cr-mini .rg-pista { grid-column: auto; }
.cr-mini .cerrar-x { position: static; }
.rg-panel-cab { border-radius: 10px; margin-bottom: 6px; }
.rg-otras { margin: 10px auto 0; display: flex; gap: 6px; }

/* ---- Duhalde: presidencial (2002–2003, más largo que los interinos de 2001): azul de la Concertación,
   bandera vertical detrás, sol dorado y marco presidencial; reemplaza el estilo «diario» de su época */
.ficha.ficha-duhalde.historica .ficha-izq, .tarjeta.cand-duhalde .tarjeta-arte { color: #fff; background:
  radial-gradient(circle at 50% 58%, rgba(255,226,140,.95) 0 9%, rgba(255,200,70,.55) 17%, transparent 30%),
  linear-gradient(90deg, transparent 0 22%, rgba(116,172,223,.95) 22% 38%, rgba(255,255,255,.95) 38% 62%, rgba(116,172,223,.95) 62% 78%, transparent 78%) 0 100% / 100% 58% no-repeat,
  linear-gradient(180deg, #2b4a8f, #141C33); }
.ficha.ficha-duhalde.historica .ficha-izq { box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.ficha.ficha-duhalde .ficha-nombre { color: #fff; font-family: inherit; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.ficha.ficha-duhalde .ficha-rol { color: #e8eef8; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.ficha.ficha-duhalde .ficha-anio { color: #ffd75e; font-family: inherit; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.ficha.ficha-duhalde .ficha-foto img { filter: none; }
.ficha.ficha-duhalde .ficha-nombre::after { content: "PRESIDENTE 2002–2003"; display: block; margin: 8px auto 0; width: max-content; padding: 3px 12px; border-radius: 20px;
  font: 800 13px "Barlow Condensed", sans-serif; letter-spacing: .14em; color: #141C33; background: linear-gradient(90deg, #ffd75e, #c9a227); }
.ficha.ficha-duhalde .ficha-izq .ficha-logo { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.tarjeta.cand-duhalde .silueta { opacity: 0; }
.tarjeta.cand-duhalde .retrato img { filter: none; }
.tarjeta.cand-duhalde { box-shadow: 0 0 0 3px #c9a227, 0 6px 16px rgba(0,0,0,.25); }

/* ---------------------------------------------------------------- Ficha: bonificaciones y penalizaciones con barras */
.fb-motivo { margin: 4px 34px 10px 0; padding: 8px 12px; border-radius: 10px; background: #f4f6f8; font-size: 13px; font-style: italic; color: #3b4652; line-height: 1.35; }
.fb-motivo i { color: var(--c1, #888); margin-right: 4px; font-size: 11px; }
.fb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.fb-sec h4 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; font: 800 15px var(--titulos); text-transform: uppercase; color: #1c2733; border-bottom: 2px solid #e6eaee; padding-bottom: 4px; }
.fb-sec h4 i { color: var(--c1, #888); }
.fb-sec h4 small { font: 500 11px var(--texto, inherit); text-transform: none; color: var(--gris); }
.fb-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr) 70px 52px; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px dashed #eef1f4; }
.fb-ico .ico.mini { width: 22px; height: 22px; }
.fb-nom { font-size: 12.5px; line-height: 1.15; color: #1c2733; min-width: 0; }
.fb-barra { position: relative; height: 8px; border-radius: 4px; background: #eef1f4; }
.fb-barra::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #9aa5b1; }
.fb-barra span { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.fb-barra span.pos { left: 50%; background: linear-gradient(90deg, #7bd389, #2e9e44); }
.fb-barra span.neg { right: 50%; background: linear-gradient(270deg, #f08a95, #d7263d); }
.fb-val { font: 800 14px var(--titulos); text-align: right; white-space: nowrap; }
.fb-val.pos { color: #2e9e44; } .fb-val.neg { color: #d7263d; }
.fb-costo { display: block; width: max-content; margin-top: 1px; padding: 0 6px; border-radius: 6px; font: 600 10.5px var(--texto, inherit); font-style: normal; }
.fb-costo.pos { background: #e3f4e6; color: #22783a; } .fb-costo.neg { background: #fbe3e6; color: #b01d2f; }
.fb-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef1f4; font-size: 12px; color: #3b4652; }
.fb-chip b { color: #1c2733; }
.fb-chip.pos { background: #e3f4e6; } .fb-chip.pos b { color: #22783a; }
.fb-chip.neg { background: #fbe3e6; } .fb-chip.neg b { color: #b01d2f; }
.fb-chip.leg { background: #fff3c4; } .fb-chip.leg b { color: #8a6a00; }
@media (max-width: 900px) { .fb { grid-template-columns: 1fr; } .fb-motivo { margin-right: 0; } }
.fb-val:not(.pos):not(.neg) { color: #9aa5b1; }

/* ---------------------------------------------------------------- Ficha: Bonificación / Penalización estilo tablero de juego */
.ficha .ficha-cols { gap: 14px; margin-top: 30px; }
.ficha .cab-bono, .ficha .cab-castigo { margin: 0 0 4px; padding: 6px 12px; border-radius: 0; color: #fff; text-align: left;
  font: 800 17px var(--titulos); text-transform: uppercase; letter-spacing: .08em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.ficha .cab-bono { background: #1f8a3b; }
.ficha .cab-castigo { background: #c4202f; }
.ficha .ficha-lista { margin: 0; padding: 0; list-style: none; }
.ficha .ficha-lista li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #e3e7eb; }
.ficha .ficha-lista li:last-child { border-bottom: 0; }
.ficha .fl-val { font: 800 19px var(--titulos); text-align: right; letter-spacing: -.01em; }
.ficha .ficha-cols > div:first-child .fl-val { color: #1f8a3b; }
.ficha .ficha-cols > div:last-child .fl-val { color: #c4202f; }
.ficha .fl-nom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 13.5px/1.2 var(--texto, inherit); color: #1c2733; }
.ficha .fl-nom > i { width: 22px; text-align: center; color: #5d6873; }
.ficha .fl-nom small { flex-basis: 100%; padding-left: 28px; font-weight: 500; font-size: 11px; color: #7a8590; text-transform: uppercase; letter-spacing: .03em; }
/* Botones de la ficha: texto en una línea y más chico */
.ficha .ficha-btns .btn { font-size: 17px; line-height: 1.15; padding: 12px 14px; }
.ficha .ficha-btns .btn-negro:has(.fa-clock-rotate-left) { font-size: 15px; }
.ficha .ficha-lista li { padding: 4px 2px; gap: 6px; grid-template-columns: 58px minmax(0, 1fr); }
.ficha .fl-val { font-size: 17px; }
.ficha .fl-nom { display: block; font-size: 13px; }
.ficha .fl-nom > .ico, .ficha .fl-nom > i { display: inline-grid; vertical-align: -5px; margin-right: 4px; }
.ficha .fl-nom > i { width: 20px; }
.ficha .fl-nom small { display: block; padding-left: 0; margin-top: 1px; font-size: 10.5px; }

/* Ficha sin desplazamiento: todo contenido; si no entra, U.ajustarFicha la compacta */
@media (min-width: 901px) {
  .ficha .ficha-der { overflow: hidden; }
  .ficha .ficha-der .ficha-btns { margin-top: auto; }
}
.ficha-der.apretada .ficha-cols { margin-top: 22px; gap: 10px; }
.ficha-der.apretada .ficha-lista li { padding: 2px 2px; grid-template-columns: 50px minmax(0, 1fr); }
.ficha-der.apretada .fl-val { font-size: 15px; }
.ficha-der.apretada .fl-nom { font-size: 12px; }
.ficha-der.apretada .fl-nom small { display: inline; margin-left: 4px; }
.ficha-der.apretada .cab-bono, .ficha-der.apretada .cab-castigo { font-size: 15px; padding: 4px 10px; }
.ficha-der.apretada > .ayuda { font-size: 11px; margin: 4px 0; }
.ficha-der.muy-apretada .ficha-lista li { padding: 1px 2px; }
.ficha-der.muy-apretada .fl-nom { font-size: 11.5px; }
.ficha-der.muy-apretada .fl-nom small { display: none; }
.ficha-der.muy-apretada .fl-nom > .ico { width: 18px; height: 18px; }
.ficha-der.muy-apretada > .ayuda, .ficha-der.muy-apretada .ficha-premio { display: none; }

/* PASO: botón para abrir la ficha desde la tarjeta (tocar la tarjeta elige o marca rival) */
.tarjeta.cand .ver-ficha { position: absolute; left: 6px; top: 6px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: rgba(20,28,40,.82); color: #fff; font: 700 11px var(--titulos); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.tarjeta.cand .ver-ficha:hover { background: #1c2733; }
.ficha-izq.sin-vice .ficha-vice { display: none; }

/* PASO online */
.on-cand.tomado { opacity: .55; }
.on-cand.tomado span { color: var(--naranja); }
.on-paso-logo { height: 22px; vertical-align: -5px; margin-right: 6px; }

/* Online: elegir el modo (clásico o PASO) antes de buscar o crear sala */
.on-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(720px, 100%); margin: 6px auto 4px; }
.on-modo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 3px solid transparent; background: #fff; text-align: left; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); color: #1c2733; }
.on-modo > i { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mc); color: #fff; font-size: 22px; }
.on-modo strong { display: block; font: 800 20px var(--titulos); text-transform: uppercase; color: var(--mc); }
.on-modo small { display: block; font-size: 12.5px; color: var(--gris); line-height: 1.25; }
.on-modo.activo { border-color: var(--mc); box-shadow: 0 6px 20px color-mix(in srgb, var(--mc) 35%, transparent); }
.on-modo:not(.activo) { opacity: .7; }
@media (max-width: 600px) { .on-modos { grid-template-columns: 1fr; } }

/* Menú del anfitrión: bots que se agregan de a uno */
.anfitrion .an-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anfitrion .an-select { flex: 1; max-width: 220px; padding: 7px 10px; border-radius: 8px; border: 2px solid #e3e7eb; font: 600 14px var(--texto, inherit); background: #fff; }
.anfitrion .an-bots { display: grid; gap: 6px; margin: 10px 0; }
.anfitrion .an-bots-tit { font: 800 14px var(--titulos); text-transform: uppercase; letter-spacing: .04em; color: #1c2733; }
.anfitrion .an-bots-tit small { font: 500 12px var(--texto, inherit); text-transform: none; color: var(--gris); }
.anfitrion .an-bot { display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; background: #fff; border: 1px solid #e3e7eb; border-left: 5px solid var(--c1); }
.anfitrion .an-bot-cara { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: color-mix(in srgb, var(--c1) 20%, #fff); }
.anfitrion .an-bot select { width: 100%; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid #d5dbe1; font: 600 13.5px var(--texto, inherit); background: #fff; }
.anfitrion .an-bot-quitar { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f1f3f5; color: #6b7785; cursor: pointer; }
.anfitrion .an-bot-quitar:hover { background: #fbe3e6; color: #c4202f; }
.anfitrion .an-anadir { padding: 9px; border-radius: 10px; border: 2px dashed #c9cfd6; background: transparent; font: 800 15px var(--titulos); text-transform: uppercase; letter-spacing: .04em; color: #4a5562; cursor: pointer; }
.anfitrion .an-anadir:hover { border-color: var(--naranja); color: var(--naranja); }
.anfitrion .an-fila { flex-wrap: wrap; }
.anfitrion .segmentado button { white-space: nowrap; }

/* ---------------------------------------------------------------- Sala online con las tarjetas de un jugador */
.sala-online .cab .os-codigo { justify-self: end; font: 700 15px var(--titulos); text-transform: uppercase; letter-spacing: .06em; color: #4a5562; }
.sala-online .cab .os-codigo b { color: var(--naranja); font-size: 20px; letter-spacing: .12em; }
.os-franja { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px auto 8px; max-width: 1100px; }
.os-chip { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 999px; background: #fff; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.os-chip.yo { border-color: var(--naranja); }
.os-chip.bot { background: #f4f6f8; }
.os-cara { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--c1); color: #fff; }
.os-cara img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.os-txt { display: grid; line-height: 1.1; padding-right: 4px; }
.os-txt b { font: 700 14px var(--texto, inherit); color: #1c2733; }
.os-txt b i { color: #e0a800; font-size: 11px; }
.os-txt small { font-size: 11.5px; color: #6b7785; }
.os-quitar { width: 26px; height: 26px; border-radius: 50%; border: 0; background: #eef1f4; color: #6b7785; cursor: pointer; }
.os-quitar:hover { background: #fbe3e6; color: #c4202f; }
.os-anadir { padding: 0 18px; min-height: 48px; border-radius: 999px; border: 2px dashed #b9c1ca; background: transparent; font: 800 15px var(--titulos); text-transform: uppercase; letter-spacing: .04em; color: #4a5562; cursor: pointer; }
.os-anadir:hover { border-color: var(--naranja); color: var(--naranja); }
.os-ajustes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: 0 auto 6px; font-size: 13px; color: #4a5562; }
.os-aj { display: inline-flex; align-items: center; gap: 6px; }
.os-aj > .fa-crown { color: #e0a800; }
.os-ajustes .segmentado button { white-space: nowrap; padding: 4px 10px; }
.os-ajustes .an-select { padding: 4px 8px; border-radius: 8px; border: 1px solid #d5dbe1; font: 600 13px var(--texto, inherit); }
.sala-online .pie-seleccion { gap: 10px; }

/* Rivales: tarjeta para sumar uno */
.tarjeta.cand.riv-anadir { display: grid; place-content: center; justify-items: center; gap: 10px; min-height: 300px; border: 3px dashed #b9c1ca; background: rgba(255,255,255,.6); box-shadow: none;
  font: 800 18px var(--titulos); text-transform: uppercase; letter-spacing: .04em; color: #4a5562; cursor: pointer; }
.tarjeta.cand.riv-anadir:hover { border-color: var(--naranja); color: var(--naranja); }
.riv-mas { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #eef1f4; font-size: 30px; }
.tarjetas.muchas .tarjeta.cand.riv-anadir { min-height: 250px; }

/* ---------------------------------------------------------------- Noche electoral (entre el último turno y el escrutinio) */
.noche-el { position: fixed; inset: 0; z-index: 2000; overflow: hidden; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: radial-gradient(ellipse at 50% 120%, #2b3f7a 0, #121a3a 45%, #050816 100%); animation: ne-entra .6s ease-out both; }
.noche-el.ne-fin { animation: ne-sale .5s ease-in both; }
@keyframes ne-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes ne-sale { to { opacity: 0; transform: scale(1.04); } }
.ne-cielo { position: absolute; inset: 0; opacity: .9;
  background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 25% 70%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60% 15%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 45%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 25%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 50%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 92% 65%, #fff 50%, transparent 51%);
  background-size: 300px 220px; animation: ne-titila 2.4s ease-in-out infinite alternate; }
@keyframes ne-titila { to { opacity: .45; } }
.ne-haz { position: absolute; bottom: 0; width: 160px; height: 120vh; transform-origin: 50% 100%; opacity: .25; filter: blur(6px);
  background: linear-gradient(to top, rgba(116,172,223,.9), rgba(116,172,223,0)); clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0); }
.ne-haz1 { left: 18%; animation: ne-barre 4s ease-in-out infinite alternate; }
.ne-haz2 { right: 18%; animation: ne-barre 4s ease-in-out -2s infinite alternate-reverse; }
@keyframes ne-barre { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.ne-casa { position: absolute; bottom: -2%; left: 50%; width: min(900px, 120vw); transform: translateX(-50%); filter: brightness(.35) saturate(.6) drop-shadow(0 -10px 40px rgba(116,172,223,.35)); opacity: .9; }
.ne-texto { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 16px; margin-bottom: 12vh; }
.ne-reloj { font: 700 18px var(--titulos); letter-spacing: .16em; text-transform: uppercase; color: #ffd34d; opacity: 0; animation: ne-aparece .5s .2s ease-out both; }
.ne-tit { margin: 0; font: 800 clamp(46px, 9vw, 96px)/.95 var(--titulos); text-transform: uppercase; letter-spacing: .03em;
  text-shadow: 0 0 24px rgba(116,172,223,.8), 0 4px 0 #0b1a3a; opacity: 0; animation: ne-golpe .7s .7s cubic-bezier(.2,1.5,.4,1) both; }
.ne-fecha { font: 600 16px var(--texto, inherit); color: rgba(255,255,255,.75); opacity: 0; animation: ne-aparece .5s 1.2s both; }
.ne-caras { display: flex; gap: 6px; margin-top: 10px; }
.ne-cara { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--c1); border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); opacity: 0; animation: ne-sube .45s calc(1.5s + var(--i) * .12s) cubic-bezier(.2,1.5,.4,1) both; }
.ne-urna { position: relative; margin-top: 18px; font-size: 64px; color: #e8eef8; opacity: 0; animation: ne-aparece .4s 2.4s both; }
.ne-sobres { position: absolute; left: -60px; right: -60px; bottom: 40px; height: 140px; pointer-events: none; }
.ne-sobre { position: absolute; left: calc(var(--x) * 1%); top: 0; font-size: 18px; color: #fff; opacity: 0; animation: ne-cae 1.1s calc(2.6s + var(--d)) ease-in infinite; }
@keyframes ne-cae { 0% { opacity: 0; transform: translateY(-30px) rotate(-20deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(120px) rotate(20deg); } }
.ne-abre { font: 800 22px var(--titulos); letter-spacing: .1em; text-transform: uppercase; color: #ffd34d; opacity: 0; animation: ne-aparece .4s 3.4s both, ne-late 1s 3.8s ease-in-out infinite; }
.ne-saltar { position: absolute; bottom: 16px; right: 20px; font-size: 12px; color: rgba(255,255,255,.6); }
@keyframes ne-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ne-golpe { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ne-sube { from { opacity: 0; transform: translateY(30px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ne-late { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .noche-el *, .noche-el { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------------------------------------------------------------- Escrutinio: votos en personas */
.rep-pres { grid-template-columns: 40px minmax(120px, 220px) 1fr 150px; }
.rep-votos { display: grid; justify-items: end; line-height: 1.05; }
.rep-votos b { font: 800 20px var(--titulos); letter-spacing: .01em; }
.rep-votos small { display: block !important; font-size: 11.5px; color: var(--gris); }
@media (max-width: 600px) { .rep-pres { grid-template-columns: 24px 1fr 104px; } .rep-votos b { font-size: 14px; } .rep-votos small { font-size: 10px; } }
/* Primera vuelta terminada con ballotage: eliminados tachados y finalistas resaltados */
.rep-pres.eliminado { animation: pres-elim .5s calc(.4s + var(--d, 0s)) ease-out both; }
@keyframes pres-elim { to { opacity: .38; filter: grayscale(1); text-decoration: line-through; transform: scale(.97); } }
.rep-pres.finalista { box-shadow: inset 4px 0 0 var(--c1), 0 0 0 2px var(--c1); animation: pres-final .6s 1.6s ease-out both; }
@keyframes pres-final { 50% { transform: scale(1.03); } }
/* Duelo de finalistas */
.duelo { display: grid; justify-items: center; gap: 12px; padding: 18px 12px; text-align: center; }
.duelo-pre { font-size: 13px; color: var(--gris); }
.duelo-afuera { display: grid; justify-items: center; gap: 6px; }
.duelo-afuera small { font: 700 12px var(--titulos); text-transform: uppercase; letter-spacing: .12em; color: #8a94a0; }
.duelo-afuera > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.duelo-juego { font: 700 14px var(--titulos); letter-spacing: .04em; text-transform: uppercase; color: var(--naranja); animation: duelo-aparece .4s var(--t) both; }
.duelo-elim { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--c1); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2);
  animation: elim-cae .5s calc(.4s + var(--i) * .35s) ease-in both; }
.duelo-elim img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.duelo-elim i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: #c4202f; text-shadow: 0 0 4px #fff;
  animation: elim-cruz .3s calc(.4s + var(--i) * .35s) cubic-bezier(.2,1.6,.4,1) both; }
@keyframes elim-cae { from { transform: scale(1.15); } to { transform: scale(.9); filter: grayscale(1); opacity: .6; } }
@keyframes elim-cruz { from { opacity: 0; transform: scale(2.4) rotate(-30deg); } to { opacity: 1; transform: none; } }
.duelo-tit { margin: 6px 0 0; font: 800 40px var(--titulos); text-transform: uppercase; letter-spacing: .06em; color: #1c2733; animation: duelo-aparece .5s var(--t) both; }
.duelo-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; max-width: 480px; }
.duelo-lado { display: grid; justify-items: center; gap: 4px; }
.duelo-lado.izq { animation: duelo-izq .6s var(--t) cubic-bezier(.2,1.3,.4,1) both; }
.duelo-lado.der { animation: duelo-der .6s var(--t) cubic-bezier(.2,1.3,.4,1) both; }
.duelo-foto { width: 130px; height: 130px; border-radius: 50%; overflow: hidden; background: var(--c1); border: 5px solid var(--c1); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.duelo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.duelo-lado.yo .duelo-foto { outline: 4px solid var(--naranja); outline-offset: 3px; }
.duelo-lado b { font: 800 16px/1.1 var(--titulos); text-transform: uppercase; color: #1c2733; }
.duelo-dato { font-size: 12.5px; color: var(--gris); }
.duelo-x { font: 800 44px var(--titulos); color: var(--naranja); text-shadow: 0 3px 0 #1c2733; animation: duelo-vs .5s var(--t) cubic-bezier(.2,1.8,.4,1) both; }
.duelo-btn { animation: duelo-aparece .4s var(--t) both; }
@keyframes duelo-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes duelo-izq { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes duelo-der { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes duelo-vs { from { opacity: 0; transform: scale(3); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .duelo-foto { width: 92px; height: 92px; } .duelo-x { font-size: 32px; } .duelo-elim { width: 42px; height: 42px; } }

/* ---------------------------------------------------------------- Animación de victoria (nueva) */
.celebra.gano { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c1) 70%, #fff) 0%, var(--c1) 35%, color-mix(in srgb, var(--c2) 80%, #000) 100%); }
.celebra .cel-rayos { background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0 9deg, transparent 9deg 18deg); animation: cel-gira 18s linear infinite; }
@keyframes cel-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cel-casa { position: absolute; bottom: -4%; left: 50%; width: min(820px, 110vw); transform: translateX(-50%); opacity: .22; filter: brightness(0) invert(1); pointer-events: none; }
.celebra.perdio .cel-casa { opacity: .08; }
.cel-fuegos span { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; border-radius: 50%; color: var(--c);
  box-shadow: 0 -60px 0 currentColor, 42px -42px 0 currentColor, 60px 0 0 currentColor, 42px 42px 0 currentColor, 0 60px 0 currentColor, -42px 42px 0 currentColor, -60px 0 0 currentColor, -42px -42px 0 currentColor;
  opacity: 0; transform: scale(.1); animation: cel-fuego 1.4s var(--d) ease-out infinite; }
@keyframes cel-fuego { 0% { opacity: 1; transform: scale(.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
.cel-marco { position: relative; display: grid; place-items: center; width: min(46vmin, 300px); margin: 0 auto; }
.cel-halo { position: absolute; inset: 6% 6% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,140,.95) 0, rgba(255,200,70,.45) 45%, transparent 70%);
  animation: cel-halo 2.4s ease-in-out infinite; }
@keyframes cel-halo { 50% { transform: scale(1.12); opacity: .75; } }
.celebra .cel-cara { position: relative; width: 100%; animation: cel-sube-cara 1s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes cel-sube-cara { from { opacity: 0; transform: translateY(80px) scale(.7); } to { opacity: 1; transform: none; } }
.celebra.perdio .cel-halo { display: none; }
.cel-cinta { position: relative; display: inline-block; margin-top: -6px; padding: 8px 34px; background: #ffd34d; color: #1c2733;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%); box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: cel-cinta .6s .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes cel-cinta { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
.celebra .cel-cinta .cel-titulo { margin: 0; color: #1c2733; text-shadow: none; animation: none; }
.celebra.perdio .cel-cinta { background: #e3e7eb; }
.celebra .cel-sub { margin-top: 12px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------- Pantalla final de resultados */
.noche-pane.nf { padding: 0; overflow: auto; background: #f4f6f8; }
.nf-heroe { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 18px; padding: 16px 24px 0; overflow: hidden; color: #fff;
  background: repeating-conic-gradient(from 0deg at 18% 100%, rgba(255,255,255,.08) 0 6deg, transparent 6deg 12deg), linear-gradient(120deg, var(--c1), var(--c2)); }
.nf-heroe-cara { width: 190px; height: 190px; display: flex; align-items: flex-end; }
.nf-heroe-cara img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.nf-heroe-txt { display: grid; justify-items: start; gap: 4px; padding-bottom: 16px; }
.nf-cinta { padding: 3px 12px; border-radius: 4px; background: #ffd34d; color: #1c2733; font: 800 13px var(--titulos); letter-spacing: .14em; text-transform: uppercase; }
.nf-heroe-txt h2 { margin: 2px 0 0; font: 800 clamp(24px, 3.4vw, 40px)/1 var(--titulos); text-transform: uppercase; text-shadow: 0 3px 8px rgba(0,0,0,.3); }
.nf-partido { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; opacity: .95; }
.nf-partido .sigla-img { height: 24px; background: #fff; border-radius: 4px; padding: 2px 4px; }
.nf-grande { font: 800 46px/1 var(--titulos); text-shadow: 0 3px 8px rgba(0,0,0,.3); }
.nf-grande small { font: 600 14px var(--texto, inherit); opacity: .9; text-shadow: none; }
.nf-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; padding: 12px; }
.nf-caja { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.nf-caja h4 { margin: 0 0 8px; font: 800 15px var(--titulos); letter-spacing: .08em; text-transform: uppercase; color: #1c2733; border-bottom: 2px solid #eef1f4; padding-bottom: 4px; }
.nf-caja h4 + * { margin-top: 0; }
.nf-caja > h4:not(:first-child) { margin-top: 14px; }
.nf-fila { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 90px 104px; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #f0f2f4; }
.nf-fila.yo { background: #fff6ed; border-radius: 8px; }
.nf-fila.gana .nf-pos { background: #ffd34d; color: #1c2733; }
.nf-pos { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef1f4; font: 800 12px var(--titulos); color: #4a5562; }
.nf-mini { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--c1); border: 2px solid var(--c1); }
.nf-mini.grande { width: 56px; height: 56px; }
.nf-mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.nf-nom { display: grid; min-width: 0; line-height: 1.15; }
.nf-nom b { font-size: 13.5px; color: #1c2733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-nom small { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #7a8590; }
.nf-nom small .sigla-img { height: 14px; }
.nf-barra { height: 10px; border-radius: 5px; background: #eef1f4; overflow: hidden; }
.nf-barra span { display: block; height: 100%; border-radius: 5px; background: var(--c1); }
.nf-num { display: grid; justify-items: end; line-height: 1.1; }
.nf-num b { font: 800 16px var(--titulos); color: #1c2733; }
.nf-num small { font-size: 11px; color: #7a8590; }
.nf-ball { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; gap: 8px; }
.nf-ball-cara { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: var(--c1); border: 3px solid var(--c1); }
.nf-ball-cara img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.nf-ball-barra { display: flex; height: 30px; border-radius: 8px; overflow: hidden; }
.nf-ball-barra span { display: grid; place-items: center; color: #fff; font: 800 15px var(--titulos); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.nf-ball-nom { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 11.5px; color: #4a5562; }
.nf-yo { border: 2px solid var(--c1); border-radius: 12px; padding: 10px; }
.nf-yo-cab { display: flex; align-items: center; gap: 10px; }
.nf-yo-cab b { display: block; font: 800 16px var(--titulos); text-transform: uppercase; color: #1c2733; }
.nf-yo-cab small { font-size: 12.5px; color: #4a5562; }
.nf-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-top: 10px; }
.nf-dato { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: #f4f6f8; text-align: center; }
.nf-dato i { color: var(--c1); }
.nf-dato span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #7a8590; }
.nf-dato b { font: 800 20px var(--titulos); color: #1c2733; }
@media (max-width: 900px) { .nf-cols { grid-template-columns: 1fr; } .nf-heroe-cara { width: 130px; height: 130px; } .nf-grande { font-size: 32px; }
  .nf-fila { grid-template-columns: 20px 34px minmax(0, 1fr) 84px; } .nf-fila .nf-barra { display: none; } }

/* ---------------------------------------------------------------- Anuncio del ganador (transmisión de la noche) */
.celebra2 { position: fixed; inset: 0; z-index: 380; overflow: hidden; cursor: pointer; color: #fff;
  background: radial-gradient(ellipse at 50% 30%, #1d2b55 0%, #0b1022 70%); animation: cb-entra .35s ease-out both; }
.celebra2.sale { animation: cb-sale .4s ease-in both; }
@keyframes cb-entra { from { opacity: 0; } }
@keyframes cb-sale { to { opacity: 0; } }
/* 1) La carrera */
.cb-escena { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 16px; animation: cb-escena-sale .4s var(--T) ease-in both; }
@keyframes cb-escena-sale { to { opacity: 0; transform: scale(1.08); } }
.cb-mesas { margin: 0; font: 700 clamp(16px, 2.6vw, 24px) var(--titulos); letter-spacing: .12em; text-transform: uppercase; color: #ffd34d; animation: cb-aparece .5s .1s both; }
.cb-carrera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(14px, 4vw, 48px); }
.cb-vs { align-self: center; font: 800 clamp(28px, 5vw, 48px) var(--titulos); color: rgba(255,255,255,.5); animation: cb-aparece .4s .6s both; }
.cb-lado { display: grid; justify-items: center; gap: 8px; width: clamp(130px, 26vw, 260px); animation: cb-aparece .5s .4s both; }
.cb-cara { width: clamp(90px, 16vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c); border: 5px solid var(--c); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 60%, transparent); }
.cb-cara img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.cb-nom { font: 800 clamp(14px, 2vw, 19px)/1.1 var(--titulos); text-transform: uppercase; text-align: center; min-height: 2.2em; }
.cb-tubo { width: 100%; height: 16px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; }
.cb-tubo span { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--c); animation: cb-llena 2.2s .9s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes cb-llena { to { width: calc(var(--p) * 1%); } }
.cb-pct { font: 800 clamp(30px, 5vw, 52px) var(--titulos); letter-spacing: .01em; }
.cb-lado.pierde { animation: cb-aparece .5s .4s both, cb-apaga .5s calc(var(--T) - .5s) ease-out forwards; }
@keyframes cb-apaga { to { opacity: .35; filter: grayscale(1); } }
.cb-lado.gana .cb-cara { animation: cb-late .5s calc(var(--T) - .6s) ease-in-out 2; }
@keyframes cb-late { 50% { transform: scale(1.12); } }
/* 2) El destello y la revelación */
.cb-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: cb-flash .6s var(--T) ease-out both; }
.celebra2.perdio .cb-flash { background: #1c2733; }
@keyframes cb-flash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }
.cb-revela { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; animation: cb-aparece-rev .3s var(--T) both;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c1) 65%, #fff) 0%, var(--c1) 38%, color-mix(in srgb, var(--c2) 75%, #000) 100%); }
.celebra2.perdio .cb-revela { background: radial-gradient(circle at 50% 42%, #5d6670 0%, #2b323a 75%); }
@keyframes cb-aparece-rev { to { opacity: 1; } }
.cb-rayos { position: absolute; width: 220vmax; height: 220vmax; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.13) 0 8deg, transparent 8deg 16deg); animation: cb-gira 20s linear infinite; }
.celebra2.perdio .cb-rayos { display: none; }
@keyframes cb-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cb-fuegos span { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; color: var(--f); opacity: 0;
  box-shadow: 0 -64px 0 currentColor, 45px -45px 0 currentColor, 64px 0 0 currentColor, 45px 45px 0 currentColor, 0 64px 0 currentColor, -45px 45px 0 currentColor, -64px 0 0 currentColor, -45px -45px 0 currentColor,
    0 -32px 0 currentColor, 32px 0 0 currentColor, 0 32px 0 currentColor, -32px 0 0 currentColor;
  animation: cb-fuego 1.5s var(--d) ease-out infinite; }
@keyframes cb-fuego { 0% { opacity: 1; transform: scale(.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.cb-centro { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 0 16px; }
.cb-heroe { position: relative; display: grid; place-items: end center; width: min(44vmin, 290px); }
.cb-halo { position: absolute; inset: 8% 4% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,150,.95) 0, rgba(255,200,70,.45) 45%, transparent 70%); animation: cb-halo 2.4s ease-in-out infinite; }
.celebra2.perdio .cb-halo { display: none; }
@keyframes cb-halo { 50% { transform: scale(1.12); opacity: .7; } }
.cb-heroe img { position: relative; width: 100%; filter: drop-shadow(0 14px 26px rgba(0,0,0,.4)); animation: cb-sube .9s calc(var(--T) + .1s) cubic-bezier(.2,1.3,.4,1) both; }
.celebra2.perdio .cb-heroe img { filter: grayscale(.6) drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
@keyframes cb-sube { from { opacity: 0; transform: translateY(90px) scale(.7); } }
.cb-sello { margin-top: -10px; padding: 6px 18px; border: 4px solid #ffd34d; border-radius: 8px; color: #ffd34d; background: rgba(0,0,0,.25);
  font: 800 clamp(16px, 2.6vw, 24px) var(--titulos); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg);
  animation: cb-sello .45s calc(var(--T) + .7s) cubic-bezier(.2,1.8,.4,1) both; }
.celebra2.perdio .cb-sello { border-color: #c9d1da; color: #e3e7eb; }
@keyframes cb-sello { from { opacity: 0; transform: rotate(-4deg) scale(3); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.cb-titulo { margin: 4px 0 0; font: 800 clamp(30px, 6vw, 64px)/1 var(--titulos); text-transform: uppercase; text-shadow: 0 4px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
  animation: cb-aparece .5s calc(var(--T) + 1s) both; }
.cb-sub { margin: 0; max-width: 680px; font-size: clamp(14px, 2vw, 19px); font-weight: 600; opacity: .95; text-shadow: 0 2px 6px rgba(0,0,0,.35); animation: cb-aparece .5s calc(var(--T) + 1.3s) both; }
.cb-toca { margin: 6px 0 0; text-align: center; font-size: 13px; opacity: 0; animation: cb-aparece .5s calc(var(--T) + 2s) both; }
@keyframes cb-aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Anuncio del ballotage: la carrera de todos y el duelo de los dos */
.cb-lista { display: grid; gap: 8px; width: min(760px, 92vw); }
.cb-fila { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(120px, 40%) 92px; align-items: center; gap: 10px; opacity: 0; animation: cb-aparece .4s calc(.3s + var(--i) * .08s) both; }
.cb-fila.afuera { animation: cb-aparece .4s calc(.3s + var(--i) * .08s) both, cb-apaga .5s calc(var(--T) - .9s + var(--i) * .1s) ease-out forwards; }
.cb-fila.pasa .cb-mini { animation: cb-late .5s calc(var(--T) - .5s) ease-in-out 2; }
.cb-mini { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--c); border: 3px solid var(--c); }
.cb-mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.cb-fnom { font: 700 clamp(13px, 1.8vw, 17px)/1.1 var(--titulos); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-fila .cb-tubo { height: 14px; }
.cb-fila .cb-tubo span { width: 0; animation: cb-llena 2.3s .7s cubic-bezier(.2,.8,.3,1) forwards; }
.cb-fila .cb-pct { font-size: clamp(18px, 2.6vw, 26px); text-align: right; }
.celebra2.ballotage .cb-revela { background: linear-gradient(105deg, var(--ca) 0 49.6%, #fff 49.6% 50.4%, var(--cb) 50.4%); align-content: center; gap: 14px; }
.cb-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 4vw, 50px); }
.cb-duo-lado { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cb-duo-lado .cb-cara { width: clamp(120px, 22vw, 220px); border-color: #fff; }
.cb-duo-lado b { font: 800 clamp(16px, 2.4vw, 24px)/1.1 var(--titulos); text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.4); max-width: 30vw; }
.cb-duo-lado span { font: 800 clamp(22px, 3.4vw, 34px) var(--titulos); text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cb-duo-lado.izq { animation: cb-desde-izq .7s calc(var(--T) + .1s) cubic-bezier(.2,1.3,.4,1) both; }
.cb-duo-lado.der { animation: cb-desde-der .7s calc(var(--T) + .1s) cubic-bezier(.2,1.3,.4,1) both; }
@keyframes cb-desde-izq { from { opacity: 0; transform: translateX(-40vw); } }
@keyframes cb-desde-der { from { opacity: 0; transform: translateX(40vw); } }
.cb-duo-vs { font: 800 clamp(40px, 7vw, 80px) var(--titulos); color: #ffd34d; text-shadow: 0 4px 0 #1c2733, 0 0 30px rgba(0,0,0,.5); animation: cb-sello .5s calc(var(--T) + .6s) cubic-bezier(.2,1.8,.4,1) both; }
.celebra2.ballotage .cb-sello { margin-top: 0; animation-delay: calc(var(--T) + 1s); }
.celebra2.ballotage .cb-sub { animation-delay: calc(var(--T) + 1.4s); }
@media (max-width: 600px) { .cb-fila { grid-template-columns: 36px minmax(0, 1fr) 70px; } .cb-fila .cb-tubo { display: none; } .cb-mini { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .celebra2, .celebra2 * { animation-duration: .01s !important; animation-delay: 0s !important; } .cb-escena { display: none; } .cb-revela { opacity: 1; } }
.celebra2 .cb-sub { text-align: center; }
.celebra2.ballotage .cb-sub { padding: 8px 16px; border-radius: 10px; background: rgba(10,16,34,.55); }
/* Anuncios: los candidatos de cuerpo entero (la caricatura recortada, sin círculo) */
.celebra2 .cb-cuerpo { display: block; height: clamp(170px, 34vh, 340px); max-width: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)) drop-shadow(0 0 18px color-mix(in srgb, var(--c) 55%, transparent)); }
.cb-lado .cb-cuerpo { height: clamp(150px, 30vh, 300px); }
.cb-lado.gana .cb-cuerpo { animation: cb-late .5s calc(var(--T) - .6s) ease-in-out 2; }
.cb-duo { align-items: end; }
.cb-duo-lado .cb-cuerpo { height: clamp(220px, 46vh, 440px); filter: drop-shadow(0 12px 26px rgba(0,0,0,.45)); }
.cb-duo-vs { align-self: center; }

/* Noche electoral con el voto popular en barras */
.ne-texto.con-barras { margin-bottom: 0; width: min(860px, 94vw); }
.ne-texto.con-barras .ne-tit { animation: ne-golpe .7s .5s cubic-bezier(.2,1.5,.4,1) both, ne-achica .6s 2s ease-in-out forwards; }
@keyframes ne-achica { to { font-size: clamp(30px, 5vw, 52px); } }
.ne-tablero { width: 100%; display: grid; gap: 10px; margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(8,14,34,.72);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; animation: ne-aparece .5s 2.1s both; }
.ne-mesas { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; font: 700 14px var(--titulos); letter-spacing: .1em; text-transform: uppercase; color: #ffd34d; }
.ne-mesas b { font-size: 18px; color: #fff; min-width: 70px; text-align: left; }
.ne-mesas i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.ne-mesas i span { display: block; height: 100%; width: 0; background: #ffd34d; }
.ne-barras { position: relative; }
.ne-fila { position: absolute; left: 0; right: 0; height: 52px; display: grid; grid-template-columns: 48px minmax(120px, 230px) 1fr 82px; align-items: center; gap: 10px;
  transition: top .45s cubic-bezier(.3,1.3,.5,1); text-align: left; }
.ne-mini { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--c); border: 3px solid var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
.ne-mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.ne-nom { font: 700 clamp(13px, 1.7vw, 17px)/1.1 var(--titulos); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ne-tubo { height: 22px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.ne-tubo span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.ne-pct { font: 800 clamp(18px, 2.4vw, 24px) var(--titulos); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .ne-fila { grid-template-columns: 36px minmax(0, 1fr) 64px; } .ne-fila .ne-tubo { display: none; } .ne-mini { width: 36px; height: 36px; } }

/* ---------------------------------------------------------------- Convención: armar la lista de mesa */
.mesa2 { overflow-y: auto; }
.mc-tablero { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 460px); justify-content: center; align-items: center; gap: 24px; margin: 4px auto 6px; }
.mc-hemi { position: relative; }
.mc-hemi svg { display: block; width: 100%; height: auto; }
.mc-cuenta { position: absolute; left: 0; right: 0; bottom: 4px; display: grid; justify-items: center; line-height: 1; }
.mc-cuenta b { font: 800 46px var(--titulos); color: #1c2733; }
.mc-cuenta span { font: 700 18px var(--titulos); color: #6b7785; }
.mc-cuenta small { margin-top: 2px; font: 700 13px var(--titulos); letter-spacing: .08em; text-transform: uppercase; color: var(--naranja); }
.mc-cuenta.ok b, .mc-cuenta.ok small { color: #1f8a3b; }
.mc-lado h3 { margin: 0 0 6px; font: 800 26px var(--titulos); text-transform: uppercase; color: #1c2733; }
.mc-lado p { margin: 0 0 12px; font-size: 14px; color: #4a5562; }
.mc-medidor { position: relative; height: 22px; border-radius: 11px; background: #e3e7eb; box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.mc-tramos { display: flex; height: 100%; border-radius: 11px; overflow: hidden; }
.mc-tramos span { height: 100%; border-right: 2px solid #fff; transition: width .4s; }
.mc-linea { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 3px; margin-left: -1px; background: #1c2733; }
.mc-linea::after { content: "mayoría"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 700 11px var(--titulos); text-transform: uppercase; letter-spacing: .08em; color: #1c2733; }
.mc-cands { margin-top: 6px; }
.mc-cands .tarjeta.cand { position: relative; }
.mc-num { position: absolute; right: 8px; top: 8px; z-index: 3; display: grid; justify-items: center; min-width: 64px; padding: 4px 8px; border-radius: 10px; background: rgba(10,16,34,.82); color: #fff; line-height: 1; }
.mc-num b { font: 800 26px var(--titulos); }
.mc-num small { font: 600 9.5px var(--texto, inherit); text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.mc-cinta { position: absolute; left: 0; top: 14px; z-index: 3; padding: 4px 12px 4px 10px; font: 800 13px var(--titulos); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.mc-cinta.vos { background: var(--naranja); }
.mc-cinta.socio { background: #1f8a3b; }
.mc-tit { margin: 14px 0 6px; text-align: center; font: 800 18px var(--titulos); letter-spacing: .08em; text-transform: uppercase; color: #1c2733; }
.mc-ofertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; width: min(980px, 100%); margin: 0 auto; }
.mc-oferta { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid #e3e7eb; background: #fff; text-align: left;
  font: 600 14px var(--texto, inherit); color: #1c2733; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.mc-oferta:hover { border-color: #c9cfd6; }
.mc-oferta.elegida { border-color: var(--naranja); background: #fff6ed; }
.mc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1c2733; color: #ffd34d; font-size: 17px; }
.mc-oferta.elegida .mc-ico { background: var(--naranja); color: #fff; }
.mc-check { font-size: 20px; color: #c9cfd6; }
.mc-oferta.elegida .mc-check { color: var(--naranja); }
@media (max-width: 900px) { .mc-tablero { grid-template-columns: 1fr; } .mc-hemi { max-width: 360px; margin: 0 auto; width: 100%; } }
.mc-cuenta { position: static; margin-top: 4px; grid-template-columns: auto auto; justify-content: center; align-items: baseline; column-gap: 6px; }
.mc-cuenta b { font-size: 40px; }
.mc-cuenta small { grid-column: 1 / -1; }
.mc-linea::after { top: auto; bottom: -20px; }
.mc-medidor { margin-bottom: 22px; }
.mc-num { top: auto; bottom: 8px; right: 8px; }

/* Convención: ofertas que te mandan los demás */
.mc-recibidas { display: grid; gap: 10px; width: min(980px, 100%); margin: 0 auto 6px; }
.mc-rec { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 0 10px; border-radius: 14px; background: #fff;
  border: 2px solid var(--c1); box-shadow: 0 6px 18px rgba(0,0,0,.1); overflow: hidden; animation: mc-llega .5s calc(.3s + var(--i) * .25s) cubic-bezier(.2,1.3,.4,1) both; }
@keyframes mc-llega { from { opacity: 0; transform: translateX(60px) rotate(2deg); } }
.mc-rec-cara { align-self: end; width: 84px; height: 92px; object-fit: contain; object-position: 50% 100%; }
.mc-rec-txt { padding-bottom: 10px; }
.mc-rec-txt b { font: 800 18px var(--titulos); text-transform: uppercase; color: #1c2733; }
.mc-rec-txt b small { font: 600 12px var(--texto, inherit); text-transform: none; color: #6b7785; margin-left: 6px; }
.mc-rec-txt p { margin: 2px 0 6px; font-size: 13.5px; font-style: italic; color: #3b4652; }
.mc-rec-items { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-rec-items span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #1c2733; color: #fff; font: 600 12.5px var(--texto, inherit); }
.mc-rec-items span i { color: #ffd34d; }
.mc-rec.suma .mc-rec-items span { background: #1f8a3b; }
.mc-rec-btns { display: grid; gap: 6px; padding-bottom: 10px; }
.mc-rec-btns .btn { padding: 8px 16px; font-size: 15px; }
@media (max-width: 700px) { .mc-rec { grid-template-columns: 60px 1fr; } .mc-rec-cara { width: 60px; height: 70px; } .mc-rec-btns { grid-column: 1 / -1; grid-auto-flow: column; } }

/* Pantalla final de la interna (mismo estilo que la noche presidencial) */
.paso-nf .noche-pane { display: block; margin-top: 10px; }
.pnf-hemi { position: relative; max-width: 300px; margin: 0 auto 4px; }
.pnf-hemi svg { display: block; width: 100%; height: auto; }
.pnf-hemi span { display: block; text-align: center; font-size: 12px; color: #7a8590; }
.pnf-hemi span b { font: 800 15px var(--titulos); color: #1c2733; }
.pnf-nota { margin: 10px 0 0; font-size: 12.5px; color: #4a5562; }
.pnf-nota i { color: var(--naranja); }
.paso-nf .nf-nom small i { color: var(--c1); }

/* Rivales: al elegir con qué partido compite un personaje */
.riv-partido-sello { position: absolute; right: 8px; top: 8px; z-index: 3; padding: 3px 10px; border-radius: 6px; background: var(--c1); color: #fff;
  font: 800 14px var(--titulos); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tarjeta.cand { position: relative; }

/* Intención de voto en el panel: un cuadrado del color de cada candidatura (el tuyo, marcado) */
.hud.hud-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.hud-cuadro { position: relative; display: grid; grid-template-rows: auto auto auto; justify-items: center; padding: 6px 4px 0; border-radius: 4px; overflow: hidden;
  background: var(--c1); color: #fff; }
.hud-cuadro .hc-cara { display: block; width: 42px; height: 42px; object-fit: cover; object-position: 50% 15%; border-radius: 3px; background: rgba(255,255,255,.18); }
.hud-cuadro .hc-cara.sin-foto { display: grid; place-items: center; font: 800 13px var(--titulos); }
.hc-num { margin-top: 3px; font: 800 19px/1 var(--titulos); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.hc-nom { width: 100%; margin-top: 4px; padding: 3px 4px; background: rgba(0,0,0,.28); text-align: center; font: 700 11px var(--titulos); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-cuadro.yo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1c2733; }
.hud-cuadro.yo .hc-nom { background: #1c2733; }
.hc-vos { position: absolute; left: 0; top: 0; padding: 1px 6px; background: #1c2733; color: #ffd34d; font: 800 10px var(--titulos); letter-spacing: .08em; text-transform: uppercase; border-bottom-right-radius: 4px; }

/* ---------------------------------------------------------------- barra superior: clara, con tu candidatura en un bloque de su color */
.juego > .barra { background: #fff; color: #1c2733; border-bottom: 3px solid var(--naranja); box-shadow: 0 2px 10px rgba(0,0,0,.08);
  padding: 0 12px 0 0; gap: 16px; min-height: 64px; align-items: center; }
.juego > .barra .yo { align-self: stretch; gap: 12px; padding: 0 34px 0 12px; background: var(--c1); clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
.juego > .barra .yo .duo { align-self: flex-end; display: flex; }
.juego > .barra .yo .mini { width: 54px; height: 58px; border: 0; border-radius: 0; object-fit: cover; object-position: 50% 12%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.juego > .barra .yo strong { font: 800 22px/1 var(--titulos); color: #fff; letter-spacing: .02em; text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.juego > .barra .yo small { display: block; margin-top: 3px; font: 600 11.5px var(--titulos); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.turno-box { display: grid; justify-items: center; line-height: 1; padding: 6px 12px; border: 2px solid #e3e7eb; border-radius: 4px; background: #f6f8fa; }
.turno-box small { font: 700 10px var(--titulos); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.turno-box b { font: 800 26px/1 var(--titulos); color: #1c2733; }
.turno-box b span { font-size: 15px; color: #9aa4ae; }
.juego > .barra .lt-etapas { gap: 2px; }
.juego > .barra .lt-sem { height: 9px; border-radius: 1px; background: #e3e7eb; }
.juego > .barra .lt-sem.precampania { background: #f7e3b0; }
.juego > .barra .lt-sem.campania { background: #cfe2f6; }
.juego > .barra .lt-sem.hecha.precampania { background: #e9b53c; }
.juego > .barra .lt-sem.hecha.campania { background: var(--celeste-osc); }
.juego > .barra .lt-sem.actual { outline: 0; background: var(--naranja); height: 13px; }
.juego > .barra .lt-urna { color: var(--celeste-osc); }
.juego > .barra .lt-texto { color: var(--gris); font-size: 12px; }
.juego > .barra .caja { gap: 0; }
.juego > .barra .plata { color: #1c2733; font: 800 22px/1.05 var(--titulos); padding: 0 14px; }
.juego > .barra .plata:first-child { color: #1f8a3b; padding-left: 0; }
.juego > .barra .plata + .plata { border-left: 2px solid #e3e7eb; }
.juego > .barra .plata small { font: 700 10px var(--titulos); letter-spacing: .14em; color: var(--gris); }
.juego > .barra > .btn-naranja { border-radius: 4px; }
.juego > .barra .billeteras { padding: 0 0 8px 12px; }
@media (max-width: 900px) {
  .juego > .barra { padding: 0 8px 0 0; gap: 4px 10px; min-height: 0; }
  .juego > .barra .yo { padding: 0 26px 0 8px; gap: 8px; }
  .juego > .barra .yo .mini { width: 40px; height: 44px; }
  .juego > .barra .yo strong { font-size: 16px; }
  .juego > .barra .yo small { font-size: 9.5px; }
  .turno-box { padding: 3px 8px; }
  .turno-box b { font-size: 19px; }
  .juego > .barra .plata { font-size: 16px; padding: 0 8px; }
  .juego > .barra .linea-tiempo { padding: 0 0 6px 10px; }
}

/* Consejos del tutorial: tarjeta clara con el número de paso en una solapa naranja */
aside.consejo { grid-template-columns: 74px 1fr auto; gap: 0; padding: 0; overflow: hidden; background: #fff; color: #1c2733; border: 0; border-radius: 6px;
  border-bottom: 3px solid var(--naranja); box-shadow: 0 12px 30px rgba(0,0,0,.3); text-align: left; justify-items: stretch; }
aside.consejo .cj-num { align-self: stretch; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 10px 6px; background: var(--naranja); color: #fff; line-height: 1; }
aside.consejo .cj-num b { font: 800 34px/1 var(--titulos); }
aside.consejo .cj-num span { font: 700 10px var(--titulos); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
aside.consejo .cj-num i { display: flex; gap: 3px; margin-top: 6px; }
aside.consejo .cj-num em { width: 8px; height: 3px; background: rgba(255,255,255,.45); }
aside.consejo .cj-num em.on { background: #fff; }
aside.consejo .cj-cuerpo { padding: 12px 16px; min-width: 0; }
aside.consejo .cj-paso { color: var(--gris); font: 700 10.5px var(--titulos); letter-spacing: .14em; text-transform: uppercase; }
aside.consejo strong { display: block; margin-top: 2px; color: #1c2733; font: 800 20px/1.1 var(--titulos); text-transform: uppercase; }
aside.consejo p { margin: 5px 0 0; color: #3b4652; font-size: 14px; line-height: 1.4; }
aside.consejo .cj-btns { padding: 0 16px 0 4px; }
aside.consejo .cj-btns .btn { border-radius: 4px; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  aside.consejo { grid-template-columns: 54px 1fr; }
  aside.consejo .cj-num b { font-size: 26px; }
  aside.consejo .cj-cuerpo { padding: 8px 12px; }
  aside.consejo p { font-size: 13px; }
  aside.consejo .cj-btns { grid-column: 1 / -1; grid-auto-flow: column; justify-content: end; align-items: center; gap: 12px; padding: 0 12px 8px; }
}
/* El calendario se achica (y su texto se corta) antes de mandar "Terminar turno" a otra fila */
.juego > .barra { flex-wrap: nowrap; }
.juego > .barra .linea-tiempo { min-width: 160px; flex: 1 1 0; }
.juego > .barra .lt-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.juego > .barra > * { flex-shrink: 0; }
.juego > .barra > .linea-tiempo { flex-shrink: 1; }
@media (max-width: 900px) { .juego > .barra { flex-wrap: wrap; } }
.juego > .barra:has(.billeteras) { flex-wrap: wrap; }

/* PASO: la ventana de cada provincia con los colores del partido de la interna */
.vprov.de-partido .vp-cab { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 82%, #000), var(--c1) 55%, color-mix(in srgb, var(--c2) 70%, var(--c1))); }
.vprov.de-partido .vp-stat { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.22); }
.vprov.de-partido .vp-monto b { color: color-mix(in srgb, var(--c1) 85%, #000); }
.vprov.de-partido .vp-rango input::-webkit-slider-thumb { background: var(--c1); box-shadow: 0 0 0 2px var(--c1), 0 2px 6px rgba(0,0,0,.3); }
.vprov.de-partido .vp-rango input::-moz-range-thumb { background: var(--c1); box-shadow: 0 0 0 2px var(--c1); }
.vprov.de-partido .btn-confirmar { background: linear-gradient(90deg, var(--c1), color-mix(in srgb, var(--c1) 70%, #000)); }

/* Lobbys: «−» para sacar lo puesto este turno, al lado del «+» */
.g-tarjeta:has(.g-menos) { grid-template-columns: 1fr 58px 76px; }
.g-tarjeta:has(.g-menos) .g-rapido:not(.g-menos) { grid-column: 3; }
.g-tarjeta:has(.g-menos) .g-pista { grid-column: 1 / 3; }
.g-tarjeta:has(.g-menos) .g-lider { grid-column: 3; }
.g-tarjeta .g-rapido.g-menos { grid-column: 2; position: relative; z-index: 2; background: linear-gradient(#f4f6f8, #dfe4e9); color: #b42318; border-left: 1px solid #c3cbd3; font-size: 14px; }
.vg-quitar { display: grid; place-content: center; line-height: 1.1; }
.vg-quitar b { font-size: 20px; color: #b42318; }
.vg-quitar:disabled b { color: inherit; }

/* ---------------------------------------------------------------- Tienda: pantalla completa con las tarjetas del juego */
.tienda-pag { overflow-y: auto; }
.ti-destacados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(1100px, 100%); margin: 6px auto 10px; }
.ti-dest { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 108px; padding: 12px 16px; overflow: hidden;
  border: 0; border-radius: 6px; text-align: left; color: #fff; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.12); }
.ti-dest:hover { filter: brightness(1.05); }
.ti-dest.pase { background: #c8941a; border-bottom: 4px solid #8a5a00; }
.ti-dest.maquina { background: #184282; border-bottom: 4px solid #0f2c5a; }
.ti-dest.activo { cursor: default; }
.ti-dest small { display: block; font: 700 11px var(--titulos); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ti-dest b { display: block; font: 800 26px/1.05 var(--titulos); text-transform: uppercase; }
.ti-dest p { margin: 4px 0 0; font-size: 13px; opacity: .92; }
.ti-dest-ico { font-size: 44px; color: #fff3c4; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.ti-precio { padding: 8px 14px; border-radius: 4px; background: #fff; color: #1c2733; font: 800 20px var(--titulos); white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.ti-dest.maquina .ti-precio { background: #ffd34d; }
.ti-leyendas { display: flex; align-self: end; margin: -12px 0 -12px -6px; }
.ti-leyendas img { width: 72px; height: 96px; object-fit: cover; object-position: 50% 10%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.ti-leyendas img + img { margin-left: -22px; }
.ti-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; width: min(1100px, 100%); margin: 0 auto 8px; padding: 8px 12px; border-radius: 6px; background: #fff; border: 1px solid var(--borde); font-size: 14px; color: #3b4652; }
.ti-barra i { color: var(--naranja); }
.ti-barra b { color: #1c2733; font-family: var(--titulos); font-size: 16px; }
.ti-barra .btn { margin-left: auto; }
.ti-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: min(1100px, 100%); margin: 0 auto 10px; }
.ti-filtros button { padding: 7px 16px; border: 2px solid var(--c1); border-radius: 4px; background: #fff; color: #1c2733; font: 800 14px var(--titulos); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ti-filtros button.activo { background: var(--c1); color: #fff; }
.ti-tarjetas .tarjeta.cand { position: relative; }
.ti-cinta { position: absolute; left: 0; top: 12px; z-index: 3; padding: 3px 12px 3px 8px; background: var(--k); color: #fff; font: 800 12px var(--titulos); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); }
.ti-sticker { position: absolute; right: 8px; bottom: 8px; z-index: 3; padding: 5px 10px; border-radius: 4px; background: #fff; color: #1c2733; font: 800 17px var(--titulos); box-shadow: 0 2px 0 rgba(0,0,0,.25); transform: rotate(-3deg); }
.ti-sticker.tuyo { background: #1f8a3b; color: #fff; }
.ti-sticker.leyenda { background: #e0a800; color: #1c2733; font-size: 14px; }
.ti-nota { width: min(1100px, 100%); margin: 10px auto 4px; text-align: center; }
@media (max-width: 760px) {
  .ti-destacados { grid-template-columns: 1fr; }
  .ti-dest { min-height: 86px; }
  .ti-dest b { font-size: 20px; }
  .ti-dest-ico { font-size: 32px; }
  .ti-leyendas img { width: 54px; height: 74px; }
  .ti-barra .btn { margin-left: 0; }
}
.ti-dest { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 1000px), (max-height: 500px) {
  .ti-dest { min-height: 0; gap: 10px; padding: 8px 12px; }
  .ti-dest b { font-size: 19px; }
  .ti-dest p { font-size: 12px; }
  .ti-dest-ico { font-size: 30px; }
  .ti-leyendas { margin: -8px 0 -8px -4px; }
  .ti-leyendas img { width: 46px; height: 62px; }
  .ti-leyendas img + img { margin-left: -16px; }
  .ti-precio { padding: 6px 10px; font-size: 16px; }
}

/* ---------------------------------------------------------------- Máquina del tiempo: viaje a pantalla completa */
.viaje-t { position: fixed; inset: 0; z-index: 3000; overflow: hidden; display: grid; place-items: center; color: #fff; cursor: default;
  background: radial-gradient(circle at 50% 50%, #1b2a6b 0%, #0b1030 55%, #04061a 100%); animation: vt-entra .45s ease-out both; }
@keyframes vt-entra { from { opacity: 0; } }
.viaje-t.sale { animation: vt-sale .4s ease-in both; }
@keyframes vt-sale { to { opacity: 0; } }
.vt-tunel { position: absolute; inset: 0; display: grid; place-items: center; }
.vt-tunel span { position: absolute; width: 40vmin; height: 40vmin; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--k) 70%, #74acdf);
  box-shadow: 0 0 24px color-mix(in srgb, var(--k) 60%, transparent), inset 0 0 24px color-mix(in srgb, var(--k) 40%, transparent);
  opacity: 0; animation: vt-anillo 1.6s calc(var(--i) * .18s) linear infinite; }
@keyframes vt-anillo { 0% { transform: scale(.05); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
.vt-rayas { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0 2deg, transparent 2deg 9deg); animation: vt-gira 6s linear infinite; }
@keyframes vt-gira { to { transform: rotate(360deg); } }
.vt-contador { position: relative; z-index: 2; display: grid; justify-items: center; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.vt-contador small { font: 700 15px var(--titulos); letter-spacing: .3em; text-transform: uppercase; color: #ffd34d; }
.vt-contador b { font: 800 clamp(90px, 22vw, 220px)/1 var(--titulos); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vt-hitos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vt-hito { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; padding: 6px 14px; border-radius: 4px; background: #f3ead7; color: #2a2116;
  font: 600 14px var(--texto, inherit); white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.4); animation: vt-hito 1.3s ease-in both; }
.vt-hito b { font: 800 22px/1 var(--titulos); color: #8e1022; }
@keyframes vt-hito { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 25% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.8); opacity: 0; } }
.vt-flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.viaje-t.llega .vt-flash { animation: vt-flash .7s ease-out both; }
@keyframes vt-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.vt-llegada { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 16px; opacity: 0; visibility: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--k) 55%, #fff) 0%, var(--k) 45%, color-mix(in srgb, var(--k) 60%, #000) 100%); }
.vt-llegada.sepia { background: radial-gradient(circle at 50% 40%, #f1dfb6 0%, #c9a46b 45%, #6e4f26 100%); color: #2a1c0b; }
.vt-llegada.viejo { background: radial-gradient(circle at 50% 40%, #f4e7c8 0%, color-mix(in srgb, var(--k) 45%, #d9b98a) 50%, color-mix(in srgb, var(--k) 40%, #3a2a18) 100%); }
.viaje-t.llega .vt-llegada { opacity: 1; visibility: visible; transition: opacity .2s .1s; }
.viaje-t.llega .vt-contador, .viaje-t.llega .vt-tunel, .viaje-t.llega .vt-rayas, .viaje-t.llega .vt-hitos { display: none; }
.vt-rayos { position: absolute; width: 220vmax; height: 220vmax; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0 8deg, transparent 8deg 16deg); animation: cb-gira 20s linear infinite; }
.vt-heroe { position: relative; width: min(46vmin, 300px); }
.vt-halo { position: absolute; inset: 8% 4% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,190,.95) 0, rgba(255,210,90,.45) 45%, transparent 70%); }
.vt-heroe img { position: relative; width: 100%; filter: drop-shadow(0 14px 26px rgba(0,0,0,.4)); }
.vt-llegada.sepia .vt-heroe img { filter: sepia(.45) drop-shadow(0 14px 26px rgba(0,0,0,.4)); }
.viaje-t.llega .vt-heroe img { animation: cb-sube .9s .15s cubic-bezier(.2,1.3,.4,1) both; }
.vt-sello { position: relative; margin-top: -12px; padding: 6px 20px; border: 4px solid #ffd34d; border-radius: 6px; background: rgba(0,0,0,.3); color: #ffd34d;
  font: 800 clamp(18px, 3vw, 28px) var(--titulos); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-4deg); }
.viaje-t.llega .vt-sello { animation: cb-sello .45s .8s cubic-bezier(.2,1.8,.4,1) both; }
.vt-nombre { position: relative; margin: 4px 0 0; font: 800 clamp(30px, 6vw, 60px)/1 var(--titulos); text-transform: uppercase; text-shadow: 0 4px 0 rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.3); }
.vt-llegada.sepia .vt-nombre { text-shadow: 0 2px 0 rgba(255,255,255,.4); }
.viaje-t.llega .vt-nombre { animation: cb-aparece .5s 1.1s both; }
.vt-sub { position: relative; margin: 0; font-size: clamp(14px, 2vw, 19px); font-weight: 600; }
.viaje-t.llega .vt-sub { animation: cb-aparece .5s 1.3s both; }
.vt-toca { position: relative; margin-top: 6px; font-size: 13px; opacity: .8; }
.viaje-t.llega .vt-toca { animation: cb-aparece .5s 1.8s both; }
@media (prefers-reduced-motion: reduce) { .viaje-t, .viaje-t * { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* Máquina del tiempo: varios viajes juntos (reparto boca abajo, pistas de rareza, vuelta de a una, la mejor al final) */
.mq-viajar { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.mq-x10 { background: #8e1022; border-color: #5e0a16; }
.vt-llegada.varios { gap: 12px; background: radial-gradient(circle at 50% 45%, #2b3a8a 0%, #121a4a 55%, #070b24 100%); color: #fff; }
.vt-llegada.varios .vt-rayos { opacity: .35; }
.vt-llegada.varios .vt-nombre { font-size: clamp(26px, 4.5vw, 46px); color: #ffd34d; animation: cb-aparece .5s .2s both; }
.vt-cartas { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 120px)); gap: 12px; justify-content: center; perspective: 1000px; }
.vt-carta { position: relative; aspect-ratio: 3 / 4.2; transform-style: preserve-3d; transform: translate(calc((2 - var(--i) % 5) * 130px), calc(var(--fila, 0) * -70px)) rotateY(180deg) scale(.3); opacity: 0;
  transition: transform .5s cubic-bezier(.3,1.3,.5,1), opacity .3s; }
.vt-carta:nth-child(n+6) { --fila: 1; }
.vt-carta.repartida { opacity: 1; transform: rotateY(180deg); }
.vt-carta.volteada { transform: rotateY(0); }
.vt-carta.gran { z-index: 5; transform: rotateY(0) scale(1.75); transition-duration: .6s; }
/* Con una carta al frente, las demás quedan detrás de una capa oscura (un filtro sobre ellas rompe el 3D). */
.vt-cartas::after { content: ""; position: absolute; inset: -16px; z-index: 4; border-radius: 10px; background: rgba(5, 8, 30, .72); opacity: 0; pointer-events: none; transition: opacity .3s; }
.vt-cartas.foco::after { opacity: 1; }
.vt-carta.gran::before { content: ""; position: absolute; inset: -60%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--k) 70%, #fff) 0 10deg, transparent 10deg 20deg); opacity: .75; animation: vt-gira 3s linear infinite;
  mask: radial-gradient(circle, #000 25%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); }
.vt-dorso, .vt-frente { position: absolute; inset: 0; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.vt-dorso { display: grid; place-items: center; transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #184282 0 10px, #1d4d96 10px 20px); border: 3px solid #fff; color: #fff; transition: box-shadow .4s, border-color .4s; }
.vt-cartas.pistas .vt-dorso { border-color: var(--k); box-shadow: 0 0 0 2px var(--k), 0 0 22px var(--k); }
/* Las épicas y legendarias brillan más fuerte (sin animar: animar el dorso rompe el ocultamiento de la cara). */
.vt-cartas.pistas .vt-carta.legendario .vt-dorso, .vt-cartas.pistas .vt-carta.epico .vt-dorso { box-shadow: 0 0 0 3px var(--k), 0 0 44px var(--k), 0 0 80px color-mix(in srgb, var(--k) 50%, transparent); }
.vt-dorso span { display: grid; justify-items: center; font: 800 12px var(--titulos); letter-spacing: .12em; }
.vt-dorso b { font-size: 26px; color: #ffd34d; letter-spacing: 0; }
.vt-frente { display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; background: #fff; border: 3px solid var(--k); color: #1c2733; }
.vt-cat { justify-self: stretch; padding: 2px 4px; background: var(--k); color: #fff; font: 800 10px var(--titulos); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.vt-frente img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 12%; background: color-mix(in srgb, var(--k) 18%, #fff); }
.vt-frente b { font: 800 14px/1.1 var(--titulos); text-transform: uppercase; padding: 3px 4px 0; text-align: center; }
.vt-frente small { font: 700 11px var(--titulos); color: #6b7785; padding-bottom: 3px; }
.vt-frente em { position: absolute; right: 4px; top: 22px; padding: 2px 6px; border-radius: 3px; background: #1c2733; color: #ffd34d; font: 800 11px var(--titulos); font-style: normal; transform: rotate(4deg); }
.vt-frente em.nuevo { background: #1f8a3b; color: #fff; }
.vt-carta.legendario .vt-frente { border-color: #e0a800; background: linear-gradient(#fff7da, #fff); }
.vt-carta.mejor { z-index: 3; transform: rotateY(0) scale(1.08); }
.vt-carta.mejor .vt-frente { box-shadow: 0 0 0 3px #ffd34d, 0 0 36px color-mix(in srgb, var(--k) 80%, #fff); }
.vt-resumen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.viaje-t.revelado .vt-resumen { opacity: 1; transform: none; }
.vt-resumen span { padding: 4px 10px; border-radius: 4px; background: var(--k, #fff); color: #fff; font: 700 13px var(--titulos); letter-spacing: .04em; text-transform: uppercase; }
.vt-resumen b { font-size: 16px; }
.vt-resumen .vt-res-nuevos { background: #1f8a3b; }
.vt-resumen .vt-res-pts { background: #ffd34d; color: #1c2733; }
.vt-saltar { font-size: 12px; opacity: .7; animation: cb-aparece .4s 1.2s both; }
.viaje-t.revelado .vt-saltar { display: none; }
.vt-llegada.varios .vt-toca { display: none; }
.viaje-t.revelado .vt-llegada.varios .vt-toca { display: block; animation: cb-aparece .4s .8s both; }
@media (max-width: 760px), (max-height: 520px) {
  .vt-cartas { grid-template-columns: repeat(5, minmax(0, 72px)); gap: 6px; }
  .vt-carta { transform: translate(calc((2 - var(--i) % 5) * 78px), 0) rotateY(180deg) scale(.3); }
  .vt-carta.gran { transform: rotateY(0) scale(1.6); }
  .vt-frente b { font-size: 10px; }
  .vt-frente em { font-size: 9px; top: 16px; }
  .vt-llegada.varios .vt-nombre { font-size: 22px; }
  .vt-llegada.varios { gap: 6px; }
}

/* Varios viajes: suspenso (la carta tiembla y se carga de su color) y aparición de cuerpo entero según la rareza */
.vt-carta.carga { animation: vt-tiembla .12s linear infinite; }
.vt-carta.carga2 { animation: vt-tiembla .07s linear infinite; }
.vt-carta.carga .vt-dorso { box-shadow: 0 0 0 4px var(--k), 0 0 50px var(--k), 0 0 100px var(--k); }
.vt-carta.carga2 .vt-dorso { box-shadow: 0 0 0 6px #fff, 0 0 70px var(--k), 0 0 140px var(--k); background: color-mix(in srgb, var(--k) 60%, #184282); }
@keyframes vt-tiembla { 0%, 100% { translate: 0 0; } 25% { translate: -3px 1px; } 50% { translate: 2px -2px; } 75% { translate: 3px 2px; } }
.viaje-t.destello::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #fff; pointer-events: none; animation: vt-flash .7s ease-out both; }
.viaje-t.sacude .vt-llegada { animation: vt-sacude .5s linear; }
@keyframes vt-sacude { 10%, 50%, 90% { transform: translate(-8px, 4px); } 30%, 70% { transform: translate(8px, -4px); } }
.vt-solo { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--k) 55%, #fff) 0%, var(--k) 42%, color-mix(in srgb, var(--k) 55%, #000) 100%); animation: vt-solo-entra .25s ease-out both; }
.vt-solo.sale { animation: vt-solo-sale .3s ease-in both; }
@keyframes vt-solo-entra { from { opacity: 0; transform: scale(1.08); } }
@keyframes vt-solo-sale { to { opacity: 0; transform: scale(.9); } }
.vt-solo .vt-rayos { top: 42%; }
.vt-solo.legendario .vt-rayos { background: repeating-conic-gradient(from 0deg, rgba(255,240,180,.35) 0 7deg, transparent 7deg 14deg); animation-duration: 8s; }
.vt-solo-heroe { position: relative; width: min(52vmin, 340px); }
.vt-solo-heroe img { position: relative; width: 100%; filter: drop-shadow(0 16px 30px rgba(0,0,0,.45)); animation: vt-solo-sube .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes vt-solo-sube { from { opacity: 0; transform: translateY(120px) scale(.6); } }
.vt-solo.legendario .vt-solo-heroe img { animation-duration: 1.1s; }
.vt-solo-sello { position: relative; margin-top: -14px; padding: 6px 22px; border: 4px solid #ffd34d; border-radius: 6px; background: rgba(0,0,0,.3); color: #ffd34d;
  font: 800 clamp(20px, 3.4vw, 32px) var(--titulos); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-4deg); animation: cb-sello .45s .35s cubic-bezier(.2,1.8,.4,1) both; }
.vt-solo.raro .vt-solo-sello { border-color: #fff; color: #fff; }
.vt-solo.legendario .vt-solo-sello { font-size: clamp(30px, 6vw, 60px); padding: 8px 28px; border-width: 6px; animation-delay: .6s; text-shadow: 0 0 20px rgba(255,211,77,.8); }
.vt-solo-nom { position: relative; font: 800 clamp(26px, 5vw, 50px)/1 var(--titulos); text-transform: uppercase; text-shadow: 0 4px 0 rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.35); animation: cb-aparece .4s .55s both; }
.vt-solo-dato { position: relative; font-size: clamp(14px, 2vw, 18px); font-weight: 700; animation: cb-aparece .4s .7s both; }
.vt-solo.legendario .vt-solo-nom { animation-delay: .9s; }
.vt-solo.legendario .vt-solo-dato { animation-delay: 1.1s; }
@media (max-height: 520px) { .vt-solo-heroe { width: min(40vmin, 220px); } }
/* El personaje se ajusta a la altura de la pantalla para que entren el sello, el nombre y el dato */
.vt-solo-heroe { width: min(40vh, 46vw, 340px); }
.vt-heroe { width: min(40vh, 46vw, 300px); }
.vt-solo-heroe img, .vt-heroe img { max-height: 54vh; object-fit: contain; }

/* Aparición con la carta del juego: el fondo es el diseño de su carta estirado y la carta grande va al frente */
.vt-fondo-carta { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.vt-fondo-carta > .tarjeta { position: absolute; inset: 0; width: auto !important; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none !important; }
.vt-fondo-carta .tarjeta-arte { position: absolute; inset: 0; height: auto !important; border-radius: 0; }
.vt-fondo-carta .retrato, .vt-fondo-carta .tarjeta-pie, .vt-fondo-carta .silueta { display: none; }
.vt-fondo-carta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 20%, rgba(0,0,0,.45) 100%); }
.vt-llegada:not(.varios), .vt-solo { background: #1c2733; }
.vt-llegada .vt-rayos, .vt-solo .vt-rayos { z-index: 1; opacity: .5; }
.vt-aro { position: absolute; z-index: 1; left: 50%; top: 45%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; border: 6px solid #fff;
  box-shadow: 0 0 40px #fff, inset 0 0 40px #fff; opacity: 0; animation: vt-aro .9s .15s ease-out both; }
@keyframes vt-aro { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.vt-carta-grande { position: relative; z-index: 2; perspective: 900px; }
.vt-carta-grande > .tarjeta { width: min(30vh, 260px) !important; margin: 0; box-shadow: 0 20px 50px rgba(0,0,0,.55); animation: vt-carta-entra .8s cubic-bezier(.2,1.25,.4,1) both; }
.vt-carta-grande .tarjeta-arte { height: min(36vh, 300px) !important; }
.vt-carta-grande .retrato { width: 82%; height: 92%; }
.vt-carta-grande .apellido { font-size: clamp(20px, 3.4vh, 30px); }
@keyframes vt-carta-entra { 0% { transform: rotateY(-100deg) scale(.4); opacity: 0; } 60% { transform: rotateY(12deg) scale(1.05); opacity: 1; } 100% { transform: none; } }
.vt-carta-grande.legendario > .tarjeta { animation-duration: 1.2s; box-shadow: 0 0 0 4px #ffd34d, 0 0 60px #ffd34d, 0 20px 50px rgba(0,0,0,.55); }
.vt-carta-grande.epico > .tarjeta { box-shadow: 0 0 0 3px #b56bd0, 0 0 40px #9c3fb0, 0 20px 50px rgba(0,0,0,.55); }
.vt-brillo { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: 6px; }
.vt-carta-grande.legendario .vt-brillo::after, .vt-carta-grande.epico .vt-brillo::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-15deg); animation: vt-barrido 1.6s 1s ease-in-out infinite; }
@keyframes vt-barrido { to { left: 130%; } }
.vt-llegada:not(.varios) .vt-sello, .vt-solo-sello { position: relative; z-index: 3; margin-top: -10px; }
.vt-llegada:not(.varios) .vt-sub { position: relative; z-index: 3; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.vt-solo .cb-fuegos { position: absolute; inset: 0; z-index: 1; }
/* Volver a tirar */
.vt-botones { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.vt-botones .btn { min-width: 140px; border-radius: 4px; font-size: 16px; }
.vt-botones small { flex-basis: 100%; text-align: center; font-size: 12px; color: #fff; opacity: .8; }
.vt-llegada.varios .vt-botones { opacity: 0; pointer-events: none; transition: opacity .4s .4s; }
.viaje-t.revelado .vt-llegada.varios .vt-botones { opacity: 1; pointer-events: auto; }
.vt-llegada:not(.varios) .vt-botones { animation: cb-aparece .4s 1.5s both; }
.vt-toca { position: relative; z-index: 3; color: #fff; }
/* Zoom final del túnel antes del destello */
.viaje-t.warp .vt-contador { transition: transform .35s ease-in, opacity .35s; transform: scale(2.4); opacity: 0; }
.viaje-t.warp .vt-tunel span { animation-duration: .5s; }
/* Cada carta aparece cuando le toca, con el dorso ya encendido del color de su rareza */
.vt-carta.pista .vt-dorso { border-color: var(--k); box-shadow: 0 0 0 2px var(--k), 0 0 22px var(--k); }
.vt-carta.pista.epico .vt-dorso, .vt-carta.pista.legendario .vt-dorso { box-shadow: 0 0 0 3px var(--k), 0 0 44px var(--k), 0 0 80px color-mix(in srgb, var(--k) 50%, transparent); }
.vt-carta-grande.tarjetas, .vt-fondo-carta.tarjetas { display: block; padding: 0; gap: 0; overflow: visible; }
.vt-fondo-carta.tarjetas { overflow: hidden; }
/* Columnas con ancho fijo: con columnas elásticas y centradas, las cartas (todo absoluto adentro) quedaban de 11 px */
.vt-cartas { grid-template-columns: repeat(5, min(120px, 17vw)); }
@media (max-width: 760px), (max-height: 520px) { .vt-cartas { grid-template-columns: repeat(5, min(72px, 17vw)); } }
.vt-cartas > .vt-carta { width: 100%; justify-self: stretch; }
/* La pantalla del viaje es de texto blanco: la carta vuelve a su color de texto normal */
.vt-carta-grande > .tarjeta { color: var(--tinta, #1c2733); }
.vt-cartas > .vt-carta { align-self: start; height: auto; aspect-ratio: 3 / 4.2; }

/* Tirada: la carta misteriosa del centro que sube de nivel (gris → azul → violeta → dorado) antes de darse vuelta */
.vt-escena { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s; }
.vt-escena.activa { opacity: 1; background: radial-gradient(circle at 50% 48%, rgba(5,8,30,.35) 0%, rgba(5,8,30,.8) 70%); }
.vt-misterio { position: relative; width: min(190px, 26vh); aspect-ratio: 3 / 4.2; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.4,.5,1);
  animation: vt-mis-entra .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes vt-mis-entra { from { transform: translateY(60px) scale(.4) rotate(-8deg); opacity: 0; } }
.vt-misterio .vt-dorso { transform: none; border: 4px solid var(--k); box-shadow: 0 0 0 3px var(--k), 0 0 40px var(--k); transition: border-color .25s, box-shadow .25s; }
.vt-misterio .vt-frente { transform: rotateY(180deg); border-color: var(--k); }
.vt-misterio .vt-frente .vt-cat { background: var(--k); }
/* Temblor que crece con cada nivel */
.vt-misterio.n0 { animation: vt-mis-entra .45s cubic-bezier(.2,1.3,.4,1) both, vt-tiembla .16s .45s linear infinite; }
.vt-misterio.n1 { animation: vt-tiembla .11s linear infinite; }
.vt-misterio.n1 .vt-dorso { box-shadow: 0 0 0 4px var(--k), 0 0 70px var(--k); }
.vt-misterio.n2 { animation: vt-tiembla .08s linear infinite; transform: scale(1.06); }
.vt-misterio.n2 .vt-dorso { box-shadow: 0 0 0 5px var(--k), 0 0 100px var(--k), 0 0 160px var(--k); }
.vt-misterio.n3 { animation: vt-tiembla .06s linear infinite; transform: scale(1.12); }
.vt-misterio.n3 .vt-dorso { box-shadow: 0 0 0 6px #fff, 0 0 120px var(--k), 0 0 220px var(--k); }
.vt-misterio.final { animation-duration: .05s; }
/* Pulso de luz en cada salto de color */
.vt-misterio.pulso::after { content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--k) 0%, transparent 65%); animation: vt-pulso .6s ease-out both; }
@keyframes vt-pulso { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* Se da vuelta (las comunes) */
.vt-misterio.abre { animation: none; transform: rotateY(180deg) scale(1.05); }

/* ================================================================ Máquina del tiempo: almanaque y tapas de diario */
.viaje-t.dn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, #3a3024 0%, #221b13 60%, #120e09 100%); }
.viaje-t.dn::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px); }
/* Almanaque */
.dn-almanaque { position: absolute; left: 50%; top: 50%; z-index: 2; width: 230px; transform: translate(-50%, -55%); display: grid; justify-items: center; gap: 6px; transition: all .5s cubic-bezier(.3,1.2,.5,1); }
.dn-almanaque small { font: 700 13px var(--titulos); letter-spacing: .3em; text-transform: uppercase; color: #e8c97a; }
.dn-hoja { position: relative; width: 230px; height: 230px; display: grid; place-content: center; justify-items: center; gap: 6px; padding-top: 22px; border-radius: 6px;
  background: linear-gradient(#c8102e 0 34px, #fbf6ea 34px); color: #1c1a17; box-shadow: 0 2px 0 #d9d0bc, 0 4px 0 #cfc5ae, 0 6px 0 #c4b99f, 0 16px 30px rgba(0,0,0,.5); }
.dn-hoja::before { content: ""; position: absolute; left: 30px; right: 30px; top: 10px; height: 10px; background: radial-gradient(circle, #5b0a17 3px, transparent 4px) 0 0 / 22px 10px repeat-x; }
.dn-hoja b { font: 800 92px/1 var(--titulos); letter-spacing: .02em; }
.dn-hoja span { min-height: 18px; padding: 0 12px; font: 600 14px Georgia, serif; font-style: italic; color: #5a4a35; text-align: center; }
.dn-hoja.vuela { position: absolute; left: 0; bottom: 0; pointer-events: none; animation: dn-vuela .65s ease-in both; }
@keyframes dn-vuela { to { transform: translate(-60px, -260px) rotate(var(--g)); opacity: 0; } }
.viaje-t.llego .dn-almanaque { top: 14px; transform: translate(-50%, 0) scale(.32); transform-origin: 50% 0; opacity: .0; }
/* Mesa: donde gira y se lee cada tapa */
.dn-mesa { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.dn-mesa:empty { display: none; }
.viaje-t.fin .dn-mesa { position: relative; inset: auto; z-index: 3; }
/* La tapa del diario */
.dn-tapa { position: relative; width: min(400px, 82vw); display: grid; gap: 6px; padding: 12px 14px 14px; background: #f6efdf; color: #1c1a17; border-radius: 2px;
  box-shadow: 0 0 0 1px #d8cdb4, 0 24px 60px rgba(0,0,0,.6); font-family: Georgia, "Times New Roman", serif; }
.dn-tapa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, transparent 50%, rgba(120,90,40,.12)); }
.dn-tapa header { display: grid; justify-items: center; padding-bottom: 4px; border-bottom: 3px double #1c1a17; }
.dn-tapa header b { font: 900 clamp(22px, 4.6vh, 34px)/1 "Barlow Condensed", Georgia, serif; letter-spacing: .02em; text-transform: uppercase; }
.dn-tapa header span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5a4a35; }
.dn-banda { padding: 3px 8px; background: var(--k); color: #fff; font: 800 13px var(--titulos); letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.dn-tapa h2 { margin: 0; font: 900 clamp(24px, 5vh, 40px)/1.02 Georgia, "Times New Roman", serif; text-align: center; text-transform: uppercase; letter-spacing: -.01em; }
.dn-tapa figure { position: relative; margin: 0; height: min(30vh, 220px); display: grid; place-items: end center; overflow: hidden;
  background: repeating-linear-gradient(45deg, #e6dcc6 0 3px, #efe6d2 3px 6px); border: 1px solid #b9ab8d; }
.dn-tapa figure > img:first-child { height: 100%; width: 100%; object-fit: contain; object-position: 50% 100%; }
.dn-tapa.sepia figure > img:first-child { filter: sepia(.75) contrast(1.05); }
.dn-tapa.viejo figure > img:first-child { filter: sepia(.25) saturate(.8); }
.dn-logo { position: absolute; right: 6px; top: 6px; height: 26px; max-width: 70px; object-fit: contain; background: #fff; padding: 2px; border-radius: 2px; }
.dn-tapa p { margin: 0; font-size: 13px; font-style: italic; color: #3b3125; text-align: center; }
.dn-sello { position: absolute; right: -10px; bottom: 54px; z-index: 2; padding: 6px 12px; border: 3px solid #1f8a3b; color: #1f8a3b; background: rgba(246,239,223,.85);
  font: 800 18px var(--titulos); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-10deg); opacity: 0; }
.dn-sello.dn-repe { border-color: #8e1022; color: #8e1022; font-size: 15px; }
.dn-tapa.quieta .dn-sello { animation: cb-sello .4s .25s cubic-bezier(.2,1.8,.4,1) both; }
.dn-tapa.epico { box-shadow: 0 0 0 3px var(--k), 0 0 50px var(--k), 0 24px 60px rgba(0,0,0,.6); }
.dn-tapa.legendario { box-shadow: 0 0 0 4px var(--k), 0 0 80px var(--k), 0 0 140px rgba(255,211,77,.5), 0 24px 60px rgba(0,0,0,.6); }
.dn-tapa.legendario h2 { color: #7a5600; }
/* Gira y frena */
.dn-tapa.gira { animation: dn-gira var(--dur, 1.4s) cubic-bezier(.12,.75,.22,1) both; }
@keyframes dn-gira { 0% { transform: rotate(1800deg) scale(.04); } 75% { transform: rotate(-12deg) scale(1.04); } 100% { transform: rotate(-3deg) scale(1); } }
.dn-tapa.gira:not(.quieta) h2, .dn-tapa.gira:not(.quieta) figure, .dn-tapa.gira:not(.quieta) p { filter: blur(3px); }
.dn-tapa.quieta { transform: rotate(-3deg); }
.dn-tapa.archiva { transition: transform .38s ease-in, opacity .38s; transform: translateY(40vh) scale(.2) rotate(-3deg) !important; opacity: 0; }
/* Hemeroteca: las tapas que ya salieron */
.dn-hemeroteca { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, min(108px, 17vw)); gap: 10px; opacity: 0; transition: opacity .4s; }
.dn-hemeroteca.oculta { display: none; }
.viaje-t.llego .dn-hemeroteca { opacity: 1; }
.dn-hueco { aspect-ratio: 3 / 4; border: 2px dashed rgba(232,201,122,.35); border-radius: 3px; }
.dn-hueco.lleno { border: 0; animation: dn-cae .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes dn-cae { from { transform: translateY(-30px) scale(1.3); opacity: 0; } }
.dn-tapa.mini { width: 100%; height: 100%; gap: 2px; padding: 4px 5px 5px; transform: rotate(0); box-shadow: 0 0 0 1px #d8cdb4, 0 6px 14px rgba(0,0,0,.5); grid-template-rows: auto auto auto 1fr; }
.dn-tapa.mini header { padding-bottom: 1px; border-bottom-width: 2px; }
.dn-tapa.mini header b { font-size: 9px; }
.dn-tapa.mini header span, .dn-tapa.mini p { display: none; }
.dn-tapa.mini .dn-banda { padding: 1px 2px; font-size: 7px; letter-spacing: .08em; }
.dn-tapa.mini h2 { font-size: 10px; line-height: 1.05; }
.dn-tapa.mini figure { height: auto; min-height: 0; }
.dn-tapa.mini .dn-logo { height: 12px; right: 2px; top: 2px; }
.dn-tapa.mini .dn-sello { right: 2px; bottom: 4px; padding: 1px 4px; border-width: 2px; font-size: 8px; opacity: 1; animation: none; }
.dn-tapa.mini.epico { box-shadow: 0 0 0 2px var(--k), 0 0 14px var(--k); }
.dn-tapa.mini.legendario { box-shadow: 0 0 0 2px var(--k), 0 0 22px var(--k); }
.dn-hueco.mejor { transform: scale(1.1); z-index: 2; }
/* Final */
.dn-final { position: relative; z-index: 4; display: grid; justify-items: center; gap: 8px; }
.dn-resumen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dn-resumen span { padding: 4px 10px; border-radius: 3px; background: var(--k, #555); color: #fff; font: 700 13px var(--titulos); letter-spacing: .05em; text-transform: uppercase; }
.dn-resumen b { font-size: 16px; }
.dn-resumen .nuevos { background: #1f8a3b; }
.dn-resumen .pts { background: #e8c97a; color: #1c1a17; }
.viaje-t.dn .vt-botones small { color: #e8c97a; }
.dn-saltar { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 7; text-align: center; font-size: 12px; color: #e8c97a; opacity: .7; }
.viaje-t.fin .dn-saltar { display: none; }
.viaje-t.dn.destello::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #fff; pointer-events: none; animation: vt-flash .6s ease-out both; }
.viaje-t.dn.sacude .dn-mesa { animation: vt-sacude .5s linear; }
@media (max-height: 560px) {
  .dn-hoja { width: 170px; height: 170px; } .dn-hoja b { font-size: 64px; } .dn-almanaque { width: 170px; }
  .dn-tapa { width: min(300px, 70vw); padding: 8px 10px 10px; gap: 4px; }
  .dn-tapa figure { height: 30vh; }
  .dn-hemeroteca { grid-template-columns: repeat(5, min(76px, 15vw)); gap: 6px; }
}
/* La foto de tapa entera (en una grilla, height:100% no alcanza: va absoluta) y los botones legibles sobre el fondo oscuro */
.dn-tapa figure > img:first-child { position: absolute; inset: 4px 0 0; height: calc(100% - 4px); width: 100%; object-fit: contain; object-position: 50% 100%; }
.dn-tapa.mini figure { position: relative; }
.viaje-t .vt-botones .btn:not(.btn-naranja) { color: #1c2733; background: #f6efdf; }
.dn-sello { white-space: nowrap; }

/* Televisor viejo de las ediciones históricas (video o frase) */
.dn-tele { position: relative; width: min(560px, 86vw); padding: 22px 70px 22px 22px; border-radius: 22px; background: linear-gradient(#6b4a2b, #4a321c); box-shadow: inset 0 2px 0 rgba(255,255,255,.15), 0 20px 60px rgba(0,0,0,.6);
  animation: dn-tele-entra .5s cubic-bezier(.2,1.2,.4,1) both; pointer-events: auto; }
@keyframes dn-tele-entra { from { transform: scale(.6); opacity: 0; } }
.dn-tele-pantalla { position: relative; aspect-ratio: 4 / 3; border-radius: 18px / 26px; overflow: hidden; background: #0d0f0e; box-shadow: inset 0 0 40px rgba(0,0,0,.9); }
.dn-tele-pantalla::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px), radial-gradient(ellipse, transparent 55%, rgba(0,0,0,.6)); }
.dn-estatica { position: absolute; inset: -50%; background: repeating-radial-gradient(circle at 30% 40%, #fff 0 1px, #222 1px 3px), repeating-radial-gradient(circle at 70% 60%, #bbb 0 1px, transparent 1px 2px);
  opacity: .8; animation: dn-estatica .12s steps(3) infinite; }
@keyframes dn-estatica { 33% { transform: translate(7px, -5px); } 66% { transform: translate(-6px, 4px); } }
.dn-tele.video .dn-estatica, .dn-tele.frase .dn-estatica { opacity: 0; transition: opacity .4s; }
.dn-tele-cont { position: absolute; inset: 0; display: grid; place-items: center; }
.dn-tele-cont video { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) contrast(1.05); }
.dn-tele.frase .dn-tele-cont { grid-template-rows: 1fr auto; padding: 10px 14px 16px; background: radial-gradient(ellipse at 50% 40%, #4b4b46, #1b1b19); }
.dn-tele-cont img { height: 100%; max-height: 62%; align-self: end; object-fit: contain; filter: grayscale(1) contrast(1.15) brightness(1.05); animation: cb-aparece .5s both; }
.dn-tele-cont p { margin: 0; min-height: 2.6em; color: #fff; font: 600 clamp(15px, 2.4vw, 22px)/1.25 Georgia, serif; text-align: center; text-shadow: 0 2px 6px #000; }
.dn-tele-cont p.cita { font-style: italic; }
.dn-tele-pie { position: absolute; left: 22px; bottom: 4px; color: #e8c97a; font: 700 11px var(--titulos); letter-spacing: .14em; text-transform: uppercase; }
.dn-tele-perilla { position: absolute; right: 20px; top: 34px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8c39a, #7a6440); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.dn-tele-perilla.b { top: 80px; }
.dn-tele.frase .dn-tele-cont { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.dn-tele.frase .dn-tele-cont img { flex: none; height: 56%; width: auto; max-height: none; }
.dn-tele.frase .dn-tele-cont p { flex: none; }
.dn-tele-cont iframe { width: 100%; height: 100%; border: 0; filter: sepia(.2) contrast(1.05); }
/* Para tocar y saltear: el toque llega al televisor, no al video */
.dn-tele.video .dn-tele-pantalla::after { pointer-events: auto; }

/* Raro: radio antigua con el boletín */
.dn-radio { position: relative; width: min(420px, 82vw); padding: 18px 18px 16px; border-radius: 26px 26px 12px 12px; background: linear-gradient(#8a5a33, #5e3b1f); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 20px 50px rgba(0,0,0,.6);
  display: grid; gap: 10px; animation: dn-tele-entra .45s cubic-bezier(.2,1.2,.4,1) both; pointer-events: auto; }
.dn-radio-tela { height: 120px; border-radius: 16px 16px 6px 6px; display: grid; place-items: center;
  background: repeating-linear-gradient(90deg, #3a2614 0 3px, #c9a46b 3px 6px); box-shadow: inset 0 0 20px rgba(0,0,0,.6); }
.dn-ondas { display: flex; align-items: center; gap: 6px; height: 70px; }
.dn-ondas i { width: 6px; height: 20%; border-radius: 3px; background: #2f8fd8; box-shadow: 0 0 10px #74acdf; animation: dn-onda .6s calc(var(--k) * .07s) ease-in-out infinite alternate; }
@keyframes dn-onda { to { height: 100%; } }
.dn-radio-dial { position: relative; height: 34px; border-radius: 6px; background: linear-gradient(#f4e1b0, #d7bd84); box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 18px rgba(255,210,120,.6);
  background-image: linear-gradient(#f4e1b0, #d7bd84), repeating-linear-gradient(90deg, #6b4a2b 0 1px, transparent 1px 14px); background-blend-mode: multiply; }
.dn-radio-dial b { position: absolute; right: 8px; top: 7px; font: 800 13px var(--titulos); color: #5e3b1f; }
.dn-aguja { position: absolute; top: 3px; bottom: 3px; width: 3px; background: #c8102e; left: 10%; animation: dn-sintoniza 1.2s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes dn-sintoniza { 0% { left: 10%; } 60% { left: 72%; } 100% { left: 58%; } }
.dn-radio-txt { min-height: 2.6em; margin: 0; color: #fbe9c2; font: 600 clamp(15px, 2.4vw, 20px)/1.3 Georgia, serif; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.dn-radio-perilla { position: absolute; left: 30px; bottom: -10px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9d3a3, #7a5a33); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.dn-radio-perilla.b { left: auto; right: 30px; }
/* Épico: teletipo que imprime la noticia urgente */
.dn-teletipo { position: relative; width: min(460px, 86vw); padding: 46px 20px 18px; border-radius: 14px; background: linear-gradient(#4b5560, #2c333a); box-shadow: inset 0 2px 0 rgba(255,255,255,.15), 0 20px 50px rgba(0,0,0,.6);
  animation: dn-tele-entra .45s cubic-bezier(.2,1.2,.4,1) both; pointer-events: auto; }
.dn-flash { position: absolute; left: 16px; top: 12px; padding: 3px 12px; border-radius: 3px; background: #c8102e; color: #fff; font: 800 13px var(--titulos); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 0 16px #ff3b3b; animation: dn-titila .5s steps(2) infinite; }
@keyframes dn-titila { 50% { opacity: .25; box-shadow: none; } }
.dn-rodillo { height: 14px; margin: 0 -6px; border-radius: 7px; background: linear-gradient(#1a1d21, #555f69 50%, #1a1d21); }
.dn-cinta { min-height: 64px; margin: 0 6px; padding: 10px 14px; background: #f6efdf; box-shadow: 0 6px 12px rgba(0,0,0,.4); animation: dn-cinta-sale .7s ease-out both; }
@keyframes dn-cinta-sale { from { transform: scaleY(0); transform-origin: 50% 0; } }
.dn-cinta p { margin: 0; color: #1c1a17; font: 700 clamp(16px, 2.6vw, 22px)/1.25 "Courier New", Courier, monospace; letter-spacing: .04em; }
.dn-cinta p::after { content: "▌"; color: #9c3fb0; animation: dn-titila .6s steps(2) infinite; }
.dn-teclas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 14px; }
.dn-teclas i { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0f0f0, #9aa3ad); box-shadow: 0 2px 0 #1a1d21; }

/* ================================================================ Máquina del tiempo: sobre de figuritas */
.viaje-t.fg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; cursor: pointer;
  background: #1b4f8a; background-image: radial-gradient(circle at 50% 40%, #2b6cb3 0%, #1b4f8a 55%, #12355e 100%); }
.fg-escena { position: relative; width: 220px; height: 300px; flex: none; }
/* El sobre */
.fg-sobre { position: absolute; inset: 0; z-index: 3; animation: fg-espera 1.6s ease-in-out infinite; }
@keyframes fg-espera { 50% { transform: translateY(-6px) rotate(-1deg); } }
.fg-sobre-cara, .fg-tira { background: repeating-linear-gradient(135deg, #74acdf 0 18px, #ffffff 18px 36px); }
.fg-sobre-cara { position: absolute; inset: 22px 0 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 12px; text-align: center; color: #12355e;
  border-radius: 0 0 6px 6px; box-shadow: 0 16px 30px rgba(0,0,0,.4);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; }
.fg-sobre-cara::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); pointer-events: none; }
.fg-sobre-cara small { font: 700 11px var(--titulos); letter-spacing: .2em; text-transform: uppercase; }
.fg-sobre-cara b { padding: 6px 10px; background: #12355e; color: #fff; font: 800 30px/1 var(--titulos); text-transform: uppercase; transform: rotate(-3deg); }
.fg-sobre-cara span { margin-top: 4px; padding: 2px 8px; background: #fff; font: 700 13px var(--titulos); text-transform: uppercase; letter-spacing: .06em; }
.fg-sobre-cara em { position: absolute; right: 10px; bottom: 16px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #ffd34d; color: #12355e;
  font: 800 20px var(--titulos); font-style: normal; transform: rotate(10deg); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.fg-tira { position: absolute; left: 0; right: 0; top: 0; height: 26px; border-radius: 4px 4px 0 0; box-shadow: 0 2px 0 rgba(0,0,0,.15);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 8px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 8px) no-repeat;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 8px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 8px) no-repeat; }
.fg-sobre.rota { animation: none; }
.fg-sobre.rota .fg-tira { animation: fg-tira .45s ease-in both; }
@keyframes fg-tira { 40% { transform: translate(10px, -14px) rotate(8deg); } 100% { transform: translate(140px, -120px) rotate(40deg); opacity: 0; } }
.fg-sobre.rota .fg-sobre-cara { animation: fg-baja .5s .35s ease-in both; }
@keyframes fg-baja { to { transform: translateY(70vh) rotate(6deg); opacity: 0; } }
/* La pila de figuritas */
.fg-pila { position: absolute; inset: 0; z-index: 2; opacity: 0; transform: translateY(40px) scale(.9); transition: opacity .3s, transform .4s cubic-bezier(.2,1.3,.4,1); }
.viaje-t.abierto .fg-pila { opacity: 1; transform: none; }
.fg-carta { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)); transition: transform .5s cubic-bezier(.3,1.3,.5,1), opacity .35s; }
.fg-dorso, .fg-frente { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; }
.fg-dorso { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; background: #fff; border: 8px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35);
  background-image: repeating-linear-gradient(0deg, #e6eef7 0 2px, transparent 2px 10px); color: #12355e; }
.fg-dorso b { font: 800 30px/1 var(--titulos); text-transform: uppercase; }
.fg-dorso span { font: 600 12px var(--titulos); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.fg-frente { transform: rotateY(180deg); }
.fg-carta.vuelta { transform: rotateY(180deg); }
.fg-carta.brilla { animation: fg-tiembla .09s linear infinite; }
.fg-carta.brilla .fg-dorso { box-shadow: 0 0 0 4px var(--k, #fff), 0 0 30px var(--k, #fff), 0 6px 14px rgba(0,0,0,.35); }
.fg-carta.brilla.raro { --k: #74acdf; } .fg-carta.brilla.epico { --k: #b56bd0; } .fg-carta.brilla.legendario { --k: #ffd34d; }
.fg-carta.vuelta { animation: none; }
@keyframes fg-tiembla { 25% { translate: -2px 1px; } 75% { translate: 2px -1px; } }
.fg-carta.pega { transform: rotateY(180deg) translateY(55vh) scale(.3); opacity: 0; transition-duration: .35s; }
.fg-marca { position: absolute; z-index: 5; left: 50%; bottom: -16px; transform: translateX(-50%) rotate(-4deg); padding: 4px 14px; border-radius: 3px; background: #1f8a3b; color: #fff;
  font: 800 16px var(--titulos); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.25); animation: cb-sello .35s .2s cubic-bezier(.2,1.8,.4,1) both; }
.fg-marca.repe { background: #ffd34d; color: #12355e; }
.fg-carta .fg-marca { transform: translateX(-50%) rotateY(180deg) rotate(4deg); animation: none; }
/* La figurita */
.fg-fig { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; overflow: hidden; border-radius: 8px; background: #fff; border: 7px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35); color: #12355e; }
.fg-arte { position: relative; overflow: hidden; border-radius: 3px 3px 0 0; background: linear-gradient(160deg, var(--c1) 0 58%, var(--c2) 58%); }
.fg-logo { position: absolute; right: 6px; top: 6px; height: 26px; max-width: 64px; object-fit: contain; background: #fff; padding: 2px; border-radius: 3px; z-index: 2; }
.fg-cara { position: absolute; left: 50%; bottom: 0; height: 96%; transform: translateX(-50%); object-fit: contain; }
.fg-fig.sepia .fg-cara { filter: sepia(.55); }
.fg-pie { padding: 4px 6px 3px; background: #12355e; color: #fff; text-align: center; line-height: 1.05; }
.fg-pie b { display: block; font: 800 20px var(--titulos); text-transform: uppercase; }
.fg-pie small { font: 600 11px var(--titulos); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.fg-num { position: absolute; left: 6px; top: 6px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #12355e; font: 800 12px var(--titulos); }
.fg-num:empty { display: none; }
.fg-cat { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 2; padding: 2px; background: var(--k); color: #fff; font: 800 11px var(--titulos); letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.fg-fig.raro { --k: #2f8fd8; } .fg-fig.epico { --k: #8e3aa6; } .fg-fig.legendario { --k: #c9940a; }
/* Terminaciones: brillante (rara), metalizada violeta (épica), dorada de colección (legendaria) */
.fg-fig.raro, .fg-fig.epico, .fg-fig.legendario { border-color: var(--k); }
.fg-fig.legendario { border-color: #e0b12a; background: #e0b12a; }
.fg-fig.legendario .fg-pie { background: linear-gradient(90deg, #8a6400, #e0b12a, #8a6400); color: #2a1c00; }
.fg-fig.epico .fg-pie { background: #5e2471; }
.fg-holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: linear-gradient(115deg, transparent 20%, rgba(255,0,150,.5) 35%, rgba(0,220,255,.5) 45%, rgba(255,240,0,.5) 55%, transparent 70%) 0 0 / 250% 250%; animation: fg-holo 2.4s linear infinite; }
.fg-fig.epico .fg-holo { opacity: .55; background-image: linear-gradient(115deg, transparent 25%, rgba(200,120,255,.7) 45%, rgba(255,255,255,.6) 50%, transparent 70%); }
.fg-fig.legendario .fg-holo { opacity: .65; background-image: linear-gradient(115deg, transparent 25%, rgba(255,230,140,.9) 45%, rgba(255,255,255,.8) 50%, transparent 70%); }
@keyframes fg-holo { from { background-position: 100% 100%; } to { background-position: 0 0; } }
/* El álbum */
.fg-album { display: grid; grid-template-columns: repeat(5, 74px); gap: 8px; padding: 10px 12px; border-radius: 4px; background: #f3ecdc; box-shadow: 0 10px 24px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .3s; }
.fg-album.oculto { display: none; }
.viaje-t.abierto .fg-album { opacity: 1; }
.fg-hueco { position: relative; aspect-ratio: 5 / 7; border: 2px dashed #c9b994; border-radius: 6px; }
.fg-hueco.lleno { border: 0; animation: fg-pega .3s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes fg-pega { from { transform: scale(1.4); opacity: 0; } }
.fg-hueco .fg-fig { border-width: 3px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.fg-hueco .fg-pie { padding: 2px; } .fg-hueco .fg-pie b { font-size: 9px; } .fg-hueco .fg-pie small { display: none; }
.fg-hueco .fg-logo { height: 10px; max-width: 26px; right: 2px; top: 2px; padding: 1px; }
.fg-hueco .fg-num { width: 13px; height: 13px; font-size: 7px; left: 2px; top: 2px; }
.fg-hueco .fg-cat { bottom: 15px; font-size: 6px; padding: 1px; letter-spacing: .06em; }
.fg-marca.chica { bottom: -7px; padding: 1px 5px; font-size: 8px; letter-spacing: .04em; animation: none; }
.fg-hueco.mejor { transform: scale(1.12); z-index: 2; }
.fg-hueco.mejor .fg-fig { box-shadow: 0 0 0 2px #ffd34d, 0 0 16px #ffd34d; }
/* Textos y final */
.fg-ayuda { margin: 0; min-height: 1.3em; color: #fff; font: 700 15px var(--titulos); letter-spacing: .1em; text-transform: uppercase; animation: dn-titila 1.4s steps(2) infinite; }
.fg-final { display: grid; justify-items: center; gap: 8px; }
.fg-resumen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fg-resumen span { padding: 3px 10px; border-radius: 3px; background: var(--k, #555); color: #fff; font: 700 13px var(--titulos); letter-spacing: .05em; text-transform: uppercase; }
.fg-resumen b { font-size: 16px; }
.fg-resumen .nuevas { background: #1f8a3b; } .fg-resumen .pts { background: #ffd34d; color: #12355e; }
.viaje-t.fg .vt-botones small { color: #dfeaf6; }
.fg-todas { position: absolute; right: 14px; top: 14px; padding: 6px 12px; border: 2px solid #fff; border-radius: 4px; background: transparent; color: #fff; font: 700 13px var(--titulos); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.viaje-t.fg.fin .fg-escena { display: none; }
.viaje-t.fg.fin:not(:has(.fg-album:not(.oculto))) .fg-escena { display: block; }
.viaje-t.fg.destello::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #fff; pointer-events: none; animation: vt-flash .6s ease-out both; }
@media (max-height: 600px) {
  .fg-escena { width: 170px; height: 232px; }
  .fg-sobre-cara b, .fg-dorso b { font-size: 22px; }
  .fg-album { grid-template-columns: repeat(5, 58px); gap: 6px; padding: 8px; }
}

/* ---------------------------------------------------------------- Figuritas: ceremonias de épica y legendaria */
.viaje-t.fg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #050812; opacity: 0; pointer-events: none; transition: opacity .5s; }
.viaje-t.fg.oscuro::after { opacity: .82; }
.viaje-t.fg.destello::after { opacity: 1; background: #fff; transition: none; animation: vt-flash .6s ease-out both; }
.viaje-t.fg .fg-escena { z-index: 4; }
.viaje-t.fg .fg-album, .viaje-t.fg .fg-ayuda, .viaje-t.fg .fg-final, .viaje-t.fg .fg-todas { position: relative; z-index: 2; }
.viaje-t.fg .fg-todas { position: absolute; }
/* Épica: sube al centro, luz violeta que se filtra por los bordes, tiembla, relámpago */
.fg-carta.ep-sube { transform: translateY(-6vh) scale(1.25); transition-duration: .7s; z-index: 50 !important; }
.fg-carta.ep-sube.vuelta { transform: translateY(-6vh) scale(1.25) rotateY(180deg); }
.fg-carta.ep-luz::before { content: ""; position: absolute; inset: -45%; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, #b56bd0, transparent 30%, #e3b7f2, transparent 60%, #8e3aa6, transparent); filter: blur(10px); animation: vt-gira 1.4s linear infinite; }
.fg-carta.ep-luz .fg-dorso { box-shadow: 0 0 0 3px #b56bd0, 0 0 40px #b56bd0, 0 0 90px #8e3aa6; }
.fg-carta.ep-tiembla { animation: fg-tiembla .08s linear infinite; }
.fg-carta.ep-tiembla2 { animation: fg-tiembla .045s linear infinite; }
.fg-carta.ep-tiembla2 .fg-dorso { box-shadow: 0 0 0 5px #fff, 0 0 60px #d79cf0, 0 0 140px #8e3aa6; }
.fg-carta.vuelta.ep-tiembla, .fg-carta.vuelta.ep-tiembla2 { animation: none; }
.viaje-t.fg.rayo::before { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 1;
  background: linear-gradient(100deg, transparent 44%, #f2d7ff 47%, #fff 49%, #c27be0 51%, transparent 54%); animation: fg-rayo .45s ease-out both; }
@keyframes fg-rayo { 0% { opacity: 1; transform: skewX(-20deg) translateX(-30%); } 100% { opacity: 0; transform: skewX(-20deg) translateX(30%); } }
/* Legendaria: foco, levita, chispas que llegan, latidos, grietas doradas, el dorso estalla */
.viaje-t.fg.foco .fg-escena::before { content: ""; position: absolute; left: 50%; top: -60vh; z-index: -1; width: 520px; height: calc(60vh + 380px); transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,214,110,.55), transparent 60%), linear-gradient(rgba(255,214,110,0), rgba(255,214,110,.22)); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  animation: cb-aparece .6s both; pointer-events: none; }
.fg-carta.lg-sube { z-index: 50 !important; transform: translateY(-5vh) scale(1.3); transition-duration: 1s; animation: fg-levita 2.2s ease-in-out infinite; }
.fg-carta.lg-sube.vuelta { transform: translateY(-5vh) scale(1.3) rotateY(180deg); animation: none; }
@keyframes fg-levita { 50% { translate: 0 -10px; } }
.fg-carta.lg-sube .fg-dorso { box-shadow: 0 0 0 3px #ffd34d, 0 0 50px rgba(255,211,77,.8); }
.fg-carta.lg-late .fg-dorso { animation: fg-late .28s ease-out; }
@keyframes fg-late { 0% { box-shadow: 0 0 0 6px #fff, 0 0 120px #ffd34d, 0 0 200px #ffb300; } 100% { box-shadow: 0 0 0 3px #ffd34d, 0 0 50px rgba(255,211,77,.8); } }
.lg-chispas { position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none; }
.lg-chispas i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe7a1; box-shadow: 0 0 10px #ffd34d, 0 0 20px #ffb300;
  animation: fg-chispa 1.4s var(--d) ease-in infinite; opacity: 0; }
@keyframes fg-chispa { 0% { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(0, 0) scale(1); opacity: 0; } }
.fg-carta.lg-grietas .fg-dorso::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background:
    linear-gradient(62deg, transparent 49.2%, #ffd34d 49.5% 50.5%, transparent 50.8%) 20% 10% / 60% 40% no-repeat,
    linear-gradient(-48deg, transparent 49.2%, #ffd34d 49.5% 50.5%, transparent 50.8%) 70% 60% / 50% 45% no-repeat;
  filter: drop-shadow(0 0 4px #ffb300); }
.fg-carta.lg-grietas2 .fg-dorso::after {
  background:
    linear-gradient(62deg, transparent 49%, #fff3c4 49.4% 50.6%, transparent 51%) 20% 10% / 60% 40% no-repeat,
    linear-gradient(-48deg, transparent 49%, #fff3c4 49.4% 50.6%, transparent 51%) 70% 60% / 50% 45% no-repeat,
    linear-gradient(15deg, transparent 49%, #ffd34d 49.4% 50.6%, transparent 51%) 10% 75% / 55% 30% no-repeat,
    linear-gradient(-75deg, transparent 49%, #ffd34d 49.4% 50.6%, transparent 51%) 85% 15% / 30% 50% no-repeat;
  filter: drop-shadow(0 0 6px #ffd34d) drop-shadow(0 0 12px #ffb300); }
.lg-trozo { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.lg-trozo > .fg-dorso { visibility: visible !important; }
.fg-carta.lg-rompe .lg-trozo { animation: fg-trozo .7s ease-out forwards; }
@keyframes fg-trozo { to { transform: translate(calc(var(--dx) * 180px), calc(var(--dy) * 160px + 40px)) rotate(calc(var(--dx) * 40deg + 10deg)); opacity: 0; } }
.fg-carta.lg-rompe::before { content: ""; position: absolute; inset: -80%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,110,.55) 0 8deg, transparent 8deg 16deg); animation: vt-gira 8s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); }
.lg-sello { position: absolute; z-index: 8; left: 50%; top: -34px; padding: 4px 16px; border: 4px solid #ffd34d; border-radius: 4px; background: rgba(0,0,0,.4); color: #ffd34d;
  font: 800 22px var(--titulos); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%) rotateY(180deg) rotate(4deg);
  animation: fg-sello-lg .45s .3s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes fg-sello-lg { from { opacity: 0; transform: translateX(-50%) rotateY(180deg) rotate(4deg) scale(3); } }
/* Suspenso neutro (igual para cualquier rareza): brillo blanco que crece */
.fg-carta.duda .fg-dorso { box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(255,255,255,.7); }
.fg-carta.duda2 { animation: fg-tiembla .1s linear infinite; }
.fg-carta.duda2 .fg-dorso { box-shadow: 0 0 0 4px #fff, 0 0 60px rgba(255,255,255,.9); }
.fg-carta.vuelta.duda2 { animation: none; }
.fg-carta.ep-sube.vuelta.duda, .fg-carta.ep-sube.vuelta.duda2 { transform: translateY(-6vh) scale(1.25) rotateY(180deg); }
/* La legendaria pasa de violeta a dorado */
.viaje-t.fg.rayo.dorado::before { background: linear-gradient(100deg, transparent 44%, #fff3c4 47%, #fff 49%, #ffd34d 51%, transparent 54%); }
.fg-fig.legendario .fg-pie b { color: #1f1400; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.fg-fig.legendario .fg-pie small { color: #3a2a00; opacity: 1; }
.fg-fig.legendario .fg-holo { z-index: 1; }

/* ================================================================ Máquina del tiempo: sobre para cortar y cartas para pasar */
.viaje-t.pk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 14px; color: #1c2733; touch-action: none; user-select: none;
  background: radial-gradient(ellipse at 50% 35%, #f4f8fc 0%, #dbe6f2 55%, #b9cbe0 100%); }
.pk-zona { position: relative; width: 250px; height: 350px; flex: none; perspective: 1000px; }
/* Sobre */
.pk-sobre { position: absolute; inset: 0; z-index: 3; transition: opacity .3s; }
.pk-sobre.pista { animation: pk-pista .4s; }
@keyframes pk-pista { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.pk-tapa, .pk-cuerpo { position: absolute; left: 0; right: 0; background: linear-gradient(120deg, #9fc4ea 0%, #e8f2fc 30%, #74acdf 55%, #dcebfa 80%, #8db8e3 100%); }
.pk-tapa { top: 0; height: 46px; border-radius: 10px 10px 0 0; cursor: ew-resize; touch-action: none; z-index: 2; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.pk-linea { position: absolute; left: 10px; right: 10px; bottom: 6px; border-top: 2px dashed rgba(18,53,94,.55); }
.pk-corte { position: absolute; left: 10px; bottom: 5px; height: 4px; width: calc((100% - 20px) * var(--corte-n, 0)); border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #74acdf; }
.pk-tapa { --corte: 0%; }
.pk-tapa .pk-corte { width: calc(var(--corte) - 10px); max-width: calc(100% - 20px); }
.pk-cuerpo { top: 46px; bottom: 0; border-radius: 0 0 10px 10px; display: grid; justify-items: center; align-content: end; gap: 4px; padding: 0 12px 18px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(18,53,94,.35); }
.pk-cuerpo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 48%, transparent 60%); animation: pk-brillo 3s ease-in-out infinite; pointer-events: none; }
@keyframes pk-brillo { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.pk-collage { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: center; }
.pk-collage img { height: 170px; margin: 0 -30px; object-fit: contain; filter: saturate(.85) drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.pk-collage img:nth-child(2) { position: relative; z-index: 1; height: 190px; }
.pk-cuerpo b { position: relative; padding: 4px 12px; border-radius: 4px; background: #12355e; color: #fff; font: 800 28px/1 var(--titulos); text-transform: uppercase; }
.pk-cuerpo span { position: relative; font: 700 13px var(--titulos); letter-spacing: .12em; text-transform: uppercase; color: #12355e; }
.pk-cuerpo em { position: relative; font: 600 12px var(--titulos); font-style: normal; color: #12355e; opacity: .8; }
.pk-sobre.cortado .pk-tapa { animation: pk-tapa-sale .5s ease-in both; }
@keyframes pk-tapa-sale { to { transform: translate(60px, -160px) rotate(25deg); opacity: 0; } }
.pk-sobre.cortado .pk-cuerpo { animation: pk-cuerpo-baja .55s .25s ease-in both; }
@keyframes pk-cuerpo-baja { to { transform: translateY(80vh); } }
/* Mazo */
.pk-mazo { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .3s; }
.viaje-t.abierto .pk-mazo { opacity: 1; }
.pk-pos { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,1.2,.4,1);
  --dx: 0px; --dy: 0px; --rx: 0deg; --ry: 0deg; transform: translateY(6px) scale(.97); }
.pk-pos.arriba { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--dx) / 18)) rotateX(var(--rx)) rotateY(var(--ry)); }
.pk-pos.arrastra { transition: none; }
.pk-pos.vuela { transition: transform .4s ease-in, opacity .4s; transform: translate(calc(var(--dir) * 110vw), -10vh) rotate(calc(var(--dir) * 35deg)); opacity: 0; }
.pk-pos.entra { animation: pk-entra .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes pk-entra { 0% { scale: .8; } 50% { scale: 1.1; } 100% { scale: 1; } }
/* La carta */
.pk-carta { position: absolute; inset: 0; border-radius: 14px; padding: 7px; background: linear-gradient(135deg, #f3f6f9, #cfd8e1 50%, #f3f6f9); box-shadow: 0 14px 30px rgba(18,53,94,.3); }
.pk-marco { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; border-radius: 9px; overflow: hidden; background: #fff; }
.pk-arte { position: relative; overflow: hidden; }
.pk-fondo { position: absolute; inset: 0; background: linear-gradient(160deg, var(--c1) 0 55%, var(--c2) 55%); }
.pk-cara { position: absolute; left: 50%; bottom: 0; height: 94%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.pk-pie { display: grid; gap: 1px; padding: 6px 10px 18px; background: #fff; }
.pk-pie b { font: 800 24px/1 var(--titulos); text-transform: uppercase; color: #12355e; }
.pk-pie small { font-size: 11px; line-height: 1.2; color: #5b6774; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-num { position: absolute; left: 8px; top: 8px; z-index: 3; padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,.9); font: 700 11px var(--titulos); color: #12355e; }
.pk-num:empty { display: none; }
.pk-logo { position: absolute; right: 8px; top: 8px; z-index: 3; height: 26px; max-width: 66px; object-fit: contain; background: #fff; padding: 2px; border-radius: 4px; }
.pk-rareza { position: absolute; left: 10px; bottom: 4px; z-index: 3; font-size: 13px; letter-spacing: 1px; color: #8a95a3; }
.pk-carta.raro .pk-rareza { color: #2f8fd8; } .pk-carta.epico .pk-rareza { color: #9c3fb0; } .pk-carta.legendario .pk-rareza { color: #d4a10a; }
.pk-anio { position: absolute; right: 10px; bottom: 4px; z-index: 3; font: 700 11px var(--titulos); color: #8a95a3; }
/* Brillo que sigue al dedo (raras en adelante) */
.pk-holo { position: absolute; inset: 0; z-index: 4; border-radius: 14px; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 30%), rgba(255,255,255,.75), transparent 45%),
    linear-gradient(115deg, transparent 20%, rgba(255,0,170,.35) 35%, rgba(0,220,255,.35) 47%, rgba(255,240,0,.35) 58%, transparent 72%) var(--mx, 30%) var(--my, 30%) / 220% 220%; }
.pk-pos:not(.arriba) .pk-holo { animation: none; }
.pk-carta.raro .pk-holo { animation: pk-holo 3s linear infinite; }
@keyframes pk-holo { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }
/* Arte completo (épicas y legendarias): el personaje se sale del marco, rayos que giran y chispas */
.pk-carta.arte .pk-marco { grid-template-rows: 1fr; overflow: visible; }
.pk-carta.arte .pk-arte { grid-row: 1; border-radius: 9px; overflow: visible; }
.pk-carta.arte .pk-fondo { border-radius: 9px; overflow: hidden; }
.pk-carta.epico .pk-fondo { background: radial-gradient(circle at 50% 40%, #e3b7f2, #9c3fb0 45%, #3e1450 100%); }
.pk-carta.legendario .pk-fondo { background: radial-gradient(circle at 50% 40%, #fff3c4, #e0b12a 45%, #6e4c00 100%); }
.pk-rayos { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; }
.pk-rayos::before { content: ""; position: absolute; left: 50%; top: 42%; width: 240%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.28) 0 7deg, transparent 7deg 14deg); animation: pk-gira 14s linear infinite; }
@keyframes pk-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pk-carta.arte .pk-cara { height: 118%; bottom: 62px; transform: translateX(-50%) translateZ(30px); filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
.pk-carta.arte .pk-pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-radius: 0 0 9px 9px; background: linear-gradient(transparent, rgba(255,255,255,.95) 30%); padding-top: 22px; }
.pk-carta.legendario .pk-pie b { color: #6e4c00; }
.pk-carta.epico .pk-pie b { color: #5e2471; }
.pk-chispas { position: absolute; inset: 0; pointer-events: none; }
.pk-chispas i { position: absolute; width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pk-titila 1.8s ease-in-out infinite; }
.pk-chispas i:nth-child(1) { left: 14%; top: 16%; } .pk-chispas i:nth-child(2) { left: 80%; top: 26%; animation-delay: .3s; } .pk-chispas i:nth-child(3) { left: 24%; top: 52%; animation-delay: .7s; }
.pk-chispas i:nth-child(4) { left: 70%; top: 58%; animation-delay: 1s; } .pk-chispas i:nth-child(5) { left: 48%; top: 8%; animation-delay: 1.3s; } .pk-chispas i:nth-child(6) { left: 88%; top: 72%; animation-delay: .5s; }
@keyframes pk-titila { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1.4); opacity: 1; } }
.pk-carta.legendario { background: linear-gradient(135deg, #fff3c4, #d4a10a 50%, #fff3c4); }
.pk-carta.epico { background: linear-gradient(135deg, #f1dcf8, #9c3fb0 50%, #f1dcf8); }
.pk-carta.arte .pk-holo { opacity: .55; animation: pk-holo 2.6s linear infinite; }
/* Nueva / repetida */
.pk-marca { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); padding: 4px 14px; border-radius: 20px; background: #1f8a3b; color: #fff; font: 800 15px var(--titulos);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.2); animation: cb-aparece .3s .15s both; }
.pk-marca.repe { background: #12355e; }
.pk-marca.chica { bottom: -10px; padding: 1px 8px; font-size: 10px; animation: none; }
/* Textos, saltar y resumen */
.pk-ayuda { margin: 26px 0 0; min-height: 1.3em; font: 700 15px var(--titulos); letter-spacing: .08em; text-transform: uppercase; color: #12355e; }
.pk-saltar { position: absolute; right: 14px; top: 14px; padding: 6px 14px; border: 2px solid #12355e; border-radius: 20px; background: rgba(255,255,255,.6); color: #12355e; font: 700 13px var(--titulos);
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.viaje-t.pk.fin .pk-zona, .viaje-t.pk.fin .pk-saltar, .viaje-t.pk.fin .pk-ayuda { display: none; }
.pk-resumen { display: none; }
.viaje-t.pk.fin .pk-resumen { display: grid; justify-items: center; gap: 12px; animation: cb-aparece .4s both; }
.pk-grilla { display: grid; grid-template-columns: repeat(5, 112px); gap: 14px 10px; }
.pk-grilla.una { grid-template-columns: 250px; }
.pk-celda { position: relative; aspect-ratio: 5 / 7; }
.pk-grilla.una .pk-celda { height: 350px; }
.pk-carta.chica { padding: 4px; border-radius: 9px; }
.pk-carta.chica .pk-marco { border-radius: 6px; }
.pk-carta.chica .pk-pie { padding: 3px 5px 10px; } .pk-carta.chica .pk-pie b { font-size: 12px; } .pk-carta.chica .pk-pie small { display: none; }
.pk-carta.chica .pk-logo { height: 12px; max-width: 30px; right: 4px; top: 4px; padding: 1px; } .pk-carta.chica .pk-num { font-size: 8px; left: 4px; top: 4px; padding: 0 3px; }
.pk-carta.chica .pk-rareza { font-size: 8px; left: 5px; bottom: 1px; } .pk-carta.chica .pk-anio { font-size: 8px; right: 5px; bottom: 1px; }
.pk-carta.chica.arte .pk-cara { bottom: 22px; } .pk-carta.chica.arte .pk-pie { padding-top: 10px; }
.pk-cuenta { margin: 0; font-size: 15px; color: #12355e; }
.viaje-t.pk .vt-botones small { color: #12355e; }
.viaje-t.pk.destello::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #fff; pointer-events: none; animation: vt-flash .5s ease-out both; }
@media (max-height: 620px) {
  .pk-zona, .pk-grilla.una .pk-celda { width: 190px; height: 266px; }
  .pk-grilla.una { grid-template-columns: 190px; }
  .pk-collage img { height: 120px; } .pk-collage img:nth-child(2) { height: 136px; }
  .pk-pie b { font-size: 18px; }
  .pk-grilla { grid-template-columns: repeat(5, 84px); gap: 12px 8px; }
}
/* Solo se ve la carta de arriba; debajo, un mazo neutro (no delata qué viene) */
.pk-pos:not(.arriba) { visibility: hidden; }
.pk-mazo.quedan::before, .pk-mazo.quedan::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(135deg, #f3f6f9, #cfd8e1 50%, #f3f6f9);
  box-shadow: 0 10px 22px rgba(18,53,94,.25); }
.pk-mazo.quedan::before { transform: translate(6px, 8px) rotate(3deg); }
.pk-mazo.quedan::after { transform: translate(-5px, 5px) rotate(-2deg); }

/* ================================================================ Máquina del tiempo: sobre (estilo Pocket) con las cartas del juego */
.viaje-t.p2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 14px; color: #fff; touch-action: none; user-select: none;
  background: radial-gradient(ellipse at 50% 40%, #1d3f73 0%, #0e2244 60%, #071226 100%); }
.p2-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s, background .5s; }
.p2-fondo::before { content: ""; position: absolute; left: 50%; top: 45%; width: 260vmax; height: 260vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.12) 0 6deg, transparent 6deg 12deg); animation: pk-gira 30s linear infinite; }
.p2-fondo.raro { opacity: 1; background: radial-gradient(circle at 50% 45%, rgba(116,172,223,.55), transparent 65%); }
.p2-fondo.raro::before { opacity: .4; }
.p2-fondo.epico { opacity: 1; background: radial-gradient(circle at 50% 45%, #c27be0 0%, #6a2384 45%, #2a0b3a 100%); }
.p2-fondo.legendario { opacity: 1; background: radial-gradient(circle at 50% 45%, #fff1b8 0%, #d4a10a 40%, #5a3e00 100%); }
.p2-fondo.comun::before, .p2-fondo:not(.raro):not(.epico):not(.legendario)::before { opacity: 0; }
.p2-zona { position: relative; z-index: 2; width: 250px; height: 390px; flex: none; }
/* Sobre */
.p2-sobre { position: absolute; inset: -6px -10px; z-index: 3; animation: p2-vaiven 2.4s ease-in-out infinite; }
@keyframes p2-vaiven { 50% { transform: rotate(-1.5deg) translateY(-6px); } }
.p2-sobre.pista { animation: pk-pista .4s; }
.p2-tapa, .p2-cuerpo { position: absolute; left: 0; right: 0; background: linear-gradient(115deg, #b8d4ef 0%, #f2f8ff 22%, #74acdf 45%, #e4f0fc 68%, #5f97cf 100%); }
.p2-tapa { top: 0; height: 52px; z-index: 2; cursor: ew-resize; touch-action: none; border-radius: 8px 8px 0 0; --k: 0;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 9px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 9px) no-repeat;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 9px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 9px) no-repeat; }
.p2-linea { position: absolute; left: 8px; right: 8px; bottom: 6px; border-top: 2px dashed rgba(14,34,68,.5); }
.p2-corte { position: absolute; left: 8px; bottom: 5px; height: 4px; width: calc((100% - 16px) * var(--k)); border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px #ffd34d; }
.p2-mano { position: absolute; bottom: -18px; left: 8%; z-index: 3; font-size: 26px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation: p2-mano 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes p2-mano { 0%, 15% { left: 6%; opacity: 0; } 25% { opacity: 1; } 75% { left: 82%; opacity: 1; } 90%, 100% { left: 86%; opacity: 0; } }
.p2-tapa.tocando .p2-mano, .p2-sobre.cortado .p2-mano { display: none; }
.p2-cuerpo { top: 52px; bottom: 0; z-index: 1; border-radius: 0 0 10px 10px; overflow: hidden; display: grid; align-content: end; justify-items: center; gap: 4px; padding: 0 12px 16px;
  box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.p2-cuerpo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 48%, transparent 60%); animation: pk-brillo 3.2s ease-in-out infinite; pointer-events: none; }
.p2-collage { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: center; }
.p2-collage img { height: 190px; margin: 0 -34px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.p2-collage img:nth-child(2) { position: relative; z-index: 1; height: 210px; }
.p2-marca-sobre { position: relative; display: grid; justify-items: center; gap: 3px; }
.p2-marca-sobre b { padding: 5px 14px; border-radius: 4px; background: #0e2244; color: #fff; font: 800 30px/1 var(--titulos); text-transform: uppercase; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.p2-marca-sobre span { font: 700 13px var(--titulos); letter-spacing: .14em; text-transform: uppercase; color: #0e2244; }
.p2-cuerpo em { position: relative; font: 700 12px var(--titulos); font-style: normal; color: #0e2244; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.p2-sobre.cortado { animation: p2-tiembla .35s .2s; }
@keyframes p2-tiembla { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.p2-sobre.cortado .p2-tapa { animation: p2-arranca .55s ease-in both; }
@keyframes p2-arranca { 30% { transform: translate(14px, -20px) rotate(6deg); } 100% { transform: translate(200px, -260px) rotate(40deg); opacity: 0; } }
.p2-sobre.cae { transition: transform .5s ease-in, opacity .5s; transform: translateY(85vh) rotate(4deg); opacity: 0; }
/* Mazo: las cartas suben desde adentro del sobre */
.p2-mazo { position: absolute; inset: 0; z-index: 2; transform: translateY(70px) scale(.94); opacity: 0; transition: transform .7s cubic-bezier(.2,1.2,.4,1), opacity .2s; }
.viaje-t.suben .p2-mazo { opacity: 1; transform: translateY(-46px) scale(.97); }
.viaje-t.abierto .p2-mazo { transform: none; }
.p2-mazo::before, .p2-mazo::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: #f3f5f7; border: 6px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.p2-mazo::before { transform: translate(7px, 7px) rotate(3deg); } .p2-mazo::after { transform: translate(-6px, 4px) rotate(-2.5deg); }
.p2-mazo.ultima::before, .p2-mazo.ultima::after { display: none; }
.p2-pos { position: absolute; inset: 0; z-index: 1; --dx: 0px; --dy: 0px; transition: transform .35s cubic-bezier(.2,1.2,.4,1), opacity .35s; }
.p2-pos:not(.arriba) { visibility: hidden; }
.p2-pos.arriba { z-index: 5 !important; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--dx) / 16)); cursor: grab; }
.p2-pos.arrastra { transition: none; cursor: grabbing; }
.p2-pos.vuela { transition: transform .42s ease-in, opacity .42s; transform: translate(var(--vx), var(--vy)) rotate(calc(var(--dx) / 6)); opacity: 0; }
.p2-pos.arriba:not(.vuela) { animation: p2-aparece .35s ease-out; }
@keyframes p2-aparece { from { filter: brightness(1.4); } }
.p2-pos.especial:not(.vuela) { animation: p2-especial .8s cubic-bezier(.2,1.5,.4,1); }
@keyframes p2-especial { 0% { scale: .7; filter: brightness(2.5); } 60% { scale: 1.08; } 100% { scale: 1; filter: none; } }
/* La carta del juego, con su terminación */
.p2-carta { position: relative; display: block; padding: 0; gap: 0; width: 250px; }
.p2-carta > .tarjeta { width: 100% !important; margin: 0; color: var(--tinta, #1c2733); box-shadow: 0 16px 36px rgba(0,0,0,.45); }
.p2-carta .tarjeta-arte { height: 250px !important; }
.p2-carta .retrato { width: 86%; height: 92%; }
.p2-holo { position: absolute; inset: 0; z-index: 6; border-radius: 10px; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
  background: linear-gradient(115deg, transparent 20%, rgba(255,0,170,.4) 35%, rgba(0,220,255,.4) 47%, rgba(255,240,0,.4) 58%, transparent 72%) 0 0 / 250% 250%; animation: fg-holo 2.6s linear infinite; }
.p2-carta.epico > .tarjeta { box-shadow: 0 0 0 4px #b56bd0, 0 0 40px #9c3fb0, 0 16px 36px rgba(0,0,0,.45); }
.p2-carta.legendario > .tarjeta { box-shadow: 0 0 0 4px #ffd34d, 0 0 60px #e0b12a, 0 16px 36px rgba(0,0,0,.45); }
.p2-carta.epico .p2-holo { opacity: .6; background-image: linear-gradient(115deg, transparent 30%, rgba(214,150,255,.75) 46%, rgba(255,255,255,.7) 50%, transparent 66%); }
.p2-carta.legendario .p2-holo { opacity: .7; background-image: linear-gradient(115deg, transparent 30%, rgba(255,226,130,.9) 46%, rgba(255,255,255,.85) 50%, transparent 66%); }
/* Nueva / repetida */
.p2-sello { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); padding: 5px 16px; border-radius: 20px; background: #1f8a3b; color: #fff; font: 800 15px var(--titulos);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: cb-aparece .3s .2s both; }
.p2-sello.repe { background: #ffd34d; color: #0e2244; }
.p2-sello.chico { bottom: -12px; padding: 2px 9px; font-size: 11px; animation: none; }
/* Textos, saltar y final */
.p2-ayuda { position: relative; z-index: 2; margin: 34px 0 0; min-height: 1.3em; font: 700 15px var(--titulos); letter-spacing: .1em; text-transform: uppercase; color: #dfeaf6; }
.p2-saltar { position: absolute; right: 14px; top: 14px; z-index: 6; padding: 6px 14px; border: 2px solid rgba(255,255,255,.7); border-radius: 20px; background: transparent; color: #fff; font: 700 13px var(--titulos);
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.viaje-t.p2.fin .p2-zona, .viaje-t.p2.fin .p2-saltar, .viaje-t.p2.fin .p2-ayuda { display: none; }
.p2-final { display: none; position: relative; z-index: 2; }
.viaje-t.p2.fin .p2-final { display: grid; justify-items: center; gap: 14px; }
.p2-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; max-width: 760px; }
.p2-celda { position: relative; width: 125px; height: 196px; animation: p2-reparte .4s calc(var(--i) * .07s) cubic-bezier(.2,1.3,.4,1) both; }
@keyframes p2-reparte { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.p2-celda .p2-carta { transform: scale(.5); transform-origin: 0 0; }
.p2-fila.una .p2-celda { width: 250px; height: 392px; }
.p2-fila.una .p2-celda .p2-carta { transform: none; }
.p2-cuenta { margin: 0; color: #dfeaf6; font-size: 15px; }
.viaje-t.p2 .vt-botones small { color: #dfeaf6; }
.viaje-t.p2.flash::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #fff; pointer-events: none; animation: vt-flash .55s ease-out both; }
.viaje-t.p2.sacude .p2-zona { animation: vt-sacude .5s linear; }
@media (max-height: 640px) {
  .p2-zona { width: 200px; height: 312px; }
  .p2-carta { width: 200px; } .p2-carta .tarjeta-arte { height: 190px !important; }
  .p2-collage img { height: 140px; } .p2-collage img:nth-child(2) { height: 156px; }
  .p2-celda { width: 100px; height: 156px; }
}

/* Fondos animados de la épica y la legendaria */
.p2-fondo { overflow: hidden; }
.p2-aura { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: .55; mix-blend-mode: screen; }
.p2-aura.a1 { left: -20vmax; top: -25vmax; background: #d36bff; animation: p2-deriva 7s ease-in-out infinite alternate; }
.p2-aura.a2 { right: -25vmax; top: 10vmax; background: #ff5fb3; animation: p2-deriva 9s -3s ease-in-out infinite alternate-reverse; }
.p2-aura.a3 { left: 10vmax; bottom: -35vmax; background: #6a5bff; animation: p2-deriva 8s -5s ease-in-out infinite alternate; }
@keyframes p2-deriva { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
.p2-sube { position: absolute; bottom: -20px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 10px #f1c4ff, 0 0 20px #c27be0;
  animation: p2-sube var(--t) var(--d) linear infinite; }
@keyframes p2-sube { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(var(--w), -55vh); } 100% { transform: translate(0, -110vh); opacity: 0; } }
.p2-sol { position: absolute; left: 50%; top: 45%; width: 200vmax; height: 200vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,247,210,.38) 0 4deg, transparent 4deg 11deg); -webkit-mask: radial-gradient(circle, #000 5%, transparent 55%); mask: radial-gradient(circle, #000 5%, transparent 55%);
  animation: pk-gira 18s linear infinite; }
.p2-halo { position: absolute; left: 50%; top: 45%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,220,.9) 0%, rgba(255,214,110,.5) 35%, transparent 68%); animation: p2-late 1.6s ease-in-out infinite; }
.p2-halo.h2 { width: 640px; height: 640px; margin: -320px 0 0 -320px; opacity: .5; animation-delay: .8s; }
@keyframes p2-late { 50% { transform: scale(1.12); opacity: .7; } }
.p2-cae { position: absolute; top: -20px; width: var(--s); height: var(--s); background: #fff3c4; box-shadow: 0 0 8px #ffd34d, 0 0 16px #ffb300;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: p2-cae var(--t) var(--d) linear infinite; }
@keyframes p2-cae { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(var(--w), 55vh) rotate(180deg); } 100% { transform: translate(0, 112vh) rotate(360deg); opacity: .2; } }
.p2-destello { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; opacity: 0;
  background: radial-gradient(circle, #fff 0 4%, transparent 9%), linear-gradient(transparent 48%, rgba(255,255,255,.9) 49% 51%, transparent 52%), linear-gradient(90deg, transparent 48%, rgba(255,255,255,.9) 49% 51%, transparent 52%);
  animation: p2-destello 4.5s var(--d) ease-in-out infinite; }
@keyframes p2-destello { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 10% { opacity: 1; transform: scale(1) rotate(45deg); } 22% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .p2-fondo * { animation: none !important; } }

/* Fondo animado dentro de la carta, detrás del personaje (épicas y legendarias) */
.p2-carta .tarjeta-arte { overflow: hidden; }
.p2-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.p2-carta .retrato { z-index: 2; }
.p2-carta .tarjeta-arte > .silueta { z-index: 1; }
.p2-fx.epico { background: radial-gradient(circle at 50% 45%, #f0c9ff 0%, #b05ad0 40%, #4a1662 100%); }
.p2-fx.legendario { background: radial-gradient(circle at 50% 40%, #fffbe6 0%, #ffd34d 38%, #a87400 100%); }
.p2-fx-rayos { position: absolute; left: 50%; top: 42%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.32) 0 6deg, transparent 6deg 13deg); animation: pk-gira 12s linear infinite; }
.p2-fx.legendario .p2-fx-rayos { background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.5) 0 5deg, transparent 5deg 11deg); animation-duration: 9s; }
.p2-fx-halo { position: absolute; left: 50%; top: 38%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 40%, transparent 70%); animation: p2-fx-late 1.6s ease-in-out infinite; }
.p2-fx.epico .p2-fx-halo { background: radial-gradient(circle, rgba(255,235,255,.8) 0%, rgba(226,160,255,.35) 40%, transparent 70%); animation-duration: 2.2s; }
@keyframes p2-fx-late { 50% { transform: translate(-50%, -50%) scale(1.18); opacity: .75; } }
.p2-fx i { position: absolute; width: 7px; height: 7px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.p2-fx.epico i { bottom: -10px; box-shadow: 0 0 6px #f1c4ff; animation: p2-fx-sube var(--t) var(--d) linear infinite; }
.p2-fx.legendario i { top: -10px; background: #fff3c4; animation: p2-fx-cae var(--t) var(--d) linear infinite; }
@keyframes p2-fx-sube { 15% { opacity: 1; } 100% { transform: translateY(-300px) rotate(180deg); opacity: 0; } }
@keyframes p2-fx-cae { 15% { opacity: 1; } 100% { transform: translateY(300px) rotate(220deg); opacity: 0; } }
.p2-fx.epico::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); animation: p2-fx-barre 2.8s ease-in-out infinite; }
@keyframes p2-fx-barre { from { transform: translateX(-70%); } to { transform: translateX(70%); } }

/* Épicas y legendarias: el fondo de SU carta (colores del partido, época, diseños especiales) en movimiento;
   encima, efectos transparentes que no lo tapan. */
.p2-fx.epico, .p2-fx.legendario { background: none; }
.p2-carta.epico .tarjeta-arte, .p2-carta.legendario .tarjeta-arte { background-size: 150% 150% !important; animation: p2-paneo 7s ease-in-out infinite alternate; }
@keyframes p2-paneo { 0% { background-position: 0% 20%; } 100% { background-position: 100% 80%; } }
.p2-carta.epico .tarjeta-arte::before, .p2-carta.legendario .tarjeta-arte::before { animation: p2-respira 5s ease-in-out infinite; }
.p2-carta.epico .tarjeta-arte::after, .p2-carta.legendario .tarjeta-arte::after { animation: p2-respira 6s -2s ease-in-out infinite; }
@keyframes p2-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(1.5deg); } }
.p2-fx { mix-blend-mode: soft-light; }
.p2-fx-rayos { background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0 6deg, transparent 6deg 13deg) !important; }
.p2-fx-halo { background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 40%, transparent 70%) !important; }
/* Las chispas van aparte (sin mezclar) y en los colores del partido */
.p2-chispas-carta { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.p2-chispas-carta i { position: absolute; width: 7px; height: 7px; opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: color-mix(in srgb, var(--c1, #fff) 35%, #fff); filter: drop-shadow(0 0 4px var(--c1, #fff)); }
.p2-chispas-carta.epico i { bottom: -10px; animation: p2-fx-sube var(--t) var(--d) linear infinite; }
.p2-chispas-carta.legendario i { top: -10px; background: #fff3c4; filter: drop-shadow(0 0 4px #ffd34d); animation: p2-fx-cae var(--t) var(--d) linear infinite; }
.p2-fx i { display: none; }

/* Cartas de la máquina: todas de la misma altura */
.p2-carta > .tarjeta { height: 392px; display: flex !important; flex-direction: column; }
.p2-carta .tarjeta-arte { flex: none; }
.p2-carta .tarjeta-pie { flex: 1; min-height: 0; overflow: hidden; }
.p2-carta .rol { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p2-celda { height: 210px; }
@media (max-height: 640px) {
  .p2-carta > .tarjeta { height: 312px; }
  .p2-celda { height: 168px; }
}
.p2-carta .tarjeta-pie { padding: 6px 8px 8px !important; gap: 1px; align-content: center; }
.p2-carta .tarjeta-pie .logo-pie { height: 20px; }
.p2-carta .rol { font-size: 11.5px !important; margin-top: 2px !important; line-height: 1.2; }

/* Sobre de la máquina: sobre de votación de papel madera */
.p2-tapa, .p2-cuerpo { background: #c9a56e; background-image:
    radial-gradient(rgba(90,60,20,.08) 1px, transparent 1.4px), radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px),
    linear-gradient(160deg, #d4b27b 0%, #c39a5f 55%, #b48a52 100%);
  background-size: 7px 7px, 11px 11px, 100% 100%; background-position: 0 0, 3px 5px, 0 0; }
.p2-tapa { background-color: #b98f55; box-shadow: inset 0 -3px 0 rgba(0,0,0,.1); }
.p2-tapa::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 14px; background: repeating-linear-gradient(90deg, #74acdf 0 14px, #fff 14px 28px); opacity: .9; }
.p2-linea { border-top-color: rgba(60,40,15,.65); }
.p2-cuerpo { border-radius: 0 0 6px 6px; align-content: center; gap: 14px; padding: 18px 16px; }
.p2-cuerpo::before { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); }
.p2-cuerpo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(to bottom right, transparent 49.5%, rgba(80,55,20,.18) 50%, transparent 51%) left / 50% 100% no-repeat,
              linear-gradient(to bottom left, transparent 49.5%, rgba(80,55,20,.18) 50%, transparent 51%) right / 50% 100% no-repeat; }
.p2-sello-mesa { position: absolute; right: 16px; top: 54px; width: 92px; height: 92px; border-radius: 50%; border: 3px double #8e1022; color: #8e1022; display: grid; place-content: center; justify-items: center;
  transform: rotate(-14deg); opacity: .8; text-align: center; line-height: 1; }
.p2-sello-mesa b { font: 800 14px var(--titulos); letter-spacing: .06em; text-transform: uppercase; }
.p2-sello-mesa small { font: 600 8px var(--titulos); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.p2-sello-mesa i { margin-top: 4px; font-size: 16px; }
.p2-marca-sobre { justify-items: start; justify-self: start; gap: 2px; margin-top: 50px; }
.p2-marca-sobre small { font: 700 12px "Courier New", Courier, monospace; letter-spacing: .3em; text-transform: uppercase; color: #3a2a14; }
.p2-marca-sobre b { padding: 0; border-radius: 0; background: none; box-shadow: none; color: #2a1d0c; font: 800 30px/1 "Courier New", Courier, monospace; letter-spacing: -.02em; }
.p2-marca-sobre span { font: 700 12px "Courier New", Courier, monospace; letter-spacing: .06em; color: #3a2a14; }
.p2-firma { position: relative; justify-self: start; display: grid; width: 140px; border-top: 0; }
.p2-firma svg { width: 120px; height: 30px; }
.p2-firma path { fill: none; stroke: #1d2a5a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p2-firma small { border-top: 1px solid #3a2a14; padding-top: 2px; font: 600 9px var(--titulos); letter-spacing: .1em; text-transform: uppercase; color: #3a2a14; }
.p2-cant { position: absolute; right: 14px; bottom: 14px; padding: 3px 10px; border: 2px solid #2a1d0c; color: #2a1d0c; background: rgba(255,255,255,.3); font: 700 12px "Courier New", Courier, monospace;
  font-style: normal; text-transform: uppercase; transform: rotate(3deg); }
.p2-cuerpo em.p2-cant { position: absolute; opacity: 1; letter-spacing: .04em; }

/* Urna de la Historia (ventana de la tienda): una urna con sobres que caen por la ranura */
.caja-modal.cuenta.urna-modal { width: min(96vw, 760px); max-width: none; }
.urna-modal .mq-cuerpo { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: center; }
.urna-arte { position: relative; height: 280px; display: grid; place-items: end center; }
.urna-caja { position: relative; width: 190px; height: 170px; display: grid; place-content: center; justify-items: center; gap: 2px; border-radius: 6px;
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(220,232,244,.75)); border: 3px solid #12355e; box-shadow: 0 14px 26px rgba(18,53,94,.25), inset 0 0 30px rgba(116,172,223,.25); }
.urna-ranura { position: absolute; top: 14px; left: 50%; width: 90px; height: 8px; margin-left: -45px; border-radius: 4px; background: #12355e; }
.urna-caja b { margin-top: 20px; font: 800 20px/1 var(--titulos); text-transform: uppercase; color: #12355e; text-align: center; }
.urna-caja small { font: 700 12px "Courier New", Courier, monospace; letter-spacing: .1em; color: #3b4652; }
.urna-faja { position: absolute; left: -3px; right: -3px; bottom: 26px; height: 16px; background: repeating-linear-gradient(90deg, #74acdf 0 16px, #fff 16px 32px); border-top: 2px solid #12355e; border-bottom: 2px solid #12355e; }
.urna-sobre { position: absolute; left: 50%; top: 0; width: 64px; height: 44px; margin-left: -32px; border-radius: 3px; background: #c9a56e;
  box-shadow: 0 4px 8px rgba(0,0,0,.2); opacity: 0; animation: urna-cae 3s ease-in infinite; }
.urna-sobre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, rgba(80,55,20,.3) 50%, transparent 51%) left / 50% 60% no-repeat,
  linear-gradient(to bottom left, transparent 49%, rgba(80,55,20,.3) 50%, transparent 51%) right / 50% 60% no-repeat; }
.urna-sobre.s2 { animation-delay: 1s; } .urna-sobre.s3 { animation-delay: 2s; }
@keyframes urna-cae { 0% { transform: translateY(-20px) rotate(-12deg); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(96px) rotate(4deg) scaleY(1); opacity: 1; } 75% { transform: translateY(108px) rotate(0) scaleY(.2); opacity: 0; } 100% { opacity: 0; } }
.mq-fichas .fa-envelope { color: #c9a56e; }
@media (max-width: 640px), (max-height: 500px) { .urna-modal .mq-cuerpo { grid-template-columns: 1fr; } .urna-arte { height: 200px; } .urna-caja { width: 150px; height: 130px; } }
.caja-modal.cuenta.urna-modal { width: min(92vw, 720px); }

/* Urna de cartón, como las de las elecciones: tapa con ranura, URNA impreso y fajas de seguridad firmadas */
.urna-caja { width: 190px; height: 190px; display: block; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 0; }
.urna-tapa { position: absolute; left: 0; right: 0; top: 0; height: 44px; background: #b98c56; transform: skewX(-28deg) translateX(10px);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); background-image: linear-gradient(90deg, rgba(255,255,255,.08), transparent 40%, rgba(0,0,0,.08)); }
.urna-ranura { position: absolute; top: 18px; left: 50%; width: 80px; height: 8px; margin-left: -40px; border-radius: 3px; background: #2a1d0c; box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }
.urna-frente { position: absolute; left: 0; right: 22px; top: 44px; bottom: 0; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 8px;
  background: #c9a26a; background-image: repeating-linear-gradient(90deg, rgba(120,85,40,.07) 0 2px, transparent 2px 9px), linear-gradient(180deg, #d1ab73, #b98c56);
  box-shadow: 0 16px 26px rgba(40,25,5,.35); color: #2a1d0c; }
.urna-frente::after { content: ""; position: absolute; top: -44px; right: -22px; width: 22px; height: 100%; background: #a57a46; transform: skewY(-62deg); transform-origin: 0 100%; }
.urna-frente small { font: 700 9px "Courier New", Courier, monospace; letter-spacing: .08em; text-transform: uppercase; }
.urna-frente b { margin: 0; font: 900 44px/1 var(--titulos); letter-spacing: .12em; text-transform: uppercase; color: #12355e; }
.urna-frente em { font: 700 11px "Courier New", Courier, monospace; font-style: normal; }
.urna-sello { position: absolute; right: 10px; bottom: 14px; padding: 4px 6px; border: 2px solid #8e1022; border-radius: 50%; color: #8e1022; font: 800 8px/1.1 var(--titulos);
  text-transform: uppercase; text-align: center; transform: rotate(-14deg); opacity: .8; }
.urna-faja { position: absolute; display: flex; align-items: center; justify-content: space-around; background: #f8f6ef; box-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 2; border: 0; }
.urna-faja.f1 { left: -6px; right: 14px; top: 92px; height: 22px; transform: rotate(-4deg); }
.urna-faja.f2 { left: 60px; width: 22px; top: 30px; height: 150px; transform: rotate(3deg); flex-direction: column; }
.urna-faja svg { width: 56px; height: 16px; }
.urna-faja.f2 svg { transform: rotate(90deg); }
.urna-faja path { fill: none; stroke: #1d2a5a; stroke-width: 1.6; stroke-linecap: round; }
.urna-arte { height: 290px; }
@keyframes urna-cae { 0% { transform: translateY(-20px) rotate(-12deg); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(98px) rotate(2deg); opacity: 1; } 72% { transform: translateY(108px) scaleY(.2); opacity: 0; } 100% { opacity: 0; } }

/* Legendarios de la urna: las cartas del juego en chico */
.tm-leyendas { display: flex; justify-content: center; gap: 10px; }
.mq-leg { display: grid; justify-items: center; gap: 4px; }
.mq-leg-carta { display: block; width: 116px; height: 170px; padding: 0; overflow: visible; }
.mq-leg-carta > .tarjeta { width: 232px !important; margin: 0; transform: scale(.5); transform-origin: 0 0; color: var(--tinta, #1c2733); box-shadow: 0 0 0 4px #ffd34d, 0 10px 22px rgba(0,0,0,.3); }
.mq-leg-carta .tarjeta-arte { height: 220px !important; }
.mq-leg-dato { padding: 2px 10px; border-radius: 20px; background: #ffd34d; color: #1c2733; font: 700 11px var(--titulos); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mq-leg-dato.tiene { background: #1f8a3b; color: #fff; }
/* Urna: el costado de la caja, en vez de una solapa parada */
.urna-frente::after { top: auto; bottom: 0; right: -22px; width: 22px; height: 100%; transform: skewY(-38deg); transform-origin: 0 0; background: linear-gradient(180deg, #a57a46, #8e6435); }
.urna-tapa { right: -22px; left: 0; transform: none; clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }

/* Ventana de la urna: la pila de sobres de votación (el mismo sobre que se abre) */
.urna-modal .mq-cuerpo { grid-template-columns: 220px 1fr; }
.mq-pila { position: relative; width: 210px; height: 300px; margin: 0 auto; }
.mq-sobre { position: absolute; inset: 0; animation: p2-vaiven 2.6s ease-in-out infinite; }
.mq-sobre .p2-tapa { cursor: default; }
.mq-sobre .p2-marca-sobre b { font-size: 25px; }
.mq-sobre .p2-sello-mesa { width: 78px; height: 78px; top: 50px; right: 10px; }
.mq-sobre.atras1, .mq-sobre.atras2 { border-radius: 6px; background: #b48a52; box-shadow: 0 10px 20px rgba(0,0,0,.25); animation: none; }
.mq-sobre.atras1 { transform: translate(10px, 6px) rotate(5deg); }
.mq-sobre.atras2 { transform: translate(-10px, 10px) rotate(-6deg); background: #a97f4a; }
@media (max-width: 640px), (max-height: 500px) { .urna-modal .mq-cuerpo { grid-template-columns: 1fr; } .mq-pila { width: 170px; height: 240px; } }

/* ================================================================ Urna de la Historia: pantalla completa */
.urna-pag { overflow-y: auto; }
.up-cont { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--borde); color: #1c2733; font: 600 14px var(--titulos); }
.up-cont i { color: #b48a52; } .up-cont b { font-size: 18px; }
.up-aviso { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(760px, 100%); margin: 0 auto 6px; padding: 8px 12px; border-radius: 6px;
  background: #fff6dc; border: 1px solid #f0d78a; color: #5a4300; font-size: 14px; }
.up-aviso i { color: #e0a800; }
.up-centro { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; width: min(900px, 100%); margin: 6px auto 0; align-items: center; }
.up-principal { display: grid; justify-items: center; gap: 16px; }
.urna-pag .mq-pila { width: 230px; height: 330px; }
.urna-pag .mq-sobre .p2-marca-sobre b { font-size: 28px; }
.up-abrir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(420px, 100%); }
.up-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; border: 0; border-radius: 6px; cursor: pointer; color: #fff;
  font: 800 20px var(--titulos); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 0 rgba(0,0,0,.25); transition: transform .1s; }
.up-btn i { font-size: 22px; }
.up-btn.uno { background: var(--naranja); }
.up-btn.diez { background: #8e1022; }
.up-btn:hover:not(:disabled) { transform: translateY(-2px); }
.up-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.up-btn:disabled { background: #c9ced4; color: #6b7785; cursor: not-allowed; box-shadow: none; }
.up-comprar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(420px, 100%); }
.up-comprar button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 6px; background: #fff; border: 2px solid var(--borde); cursor: pointer; color: #1c2733; }
.up-comprar button:hover { border-color: #b48a52; }
.up-comprar b { font: 800 16px var(--titulos); text-transform: uppercase; }
.up-comprar span { font: 700 15px var(--titulos); color: #1f8a3b; }
.up-comprar .pack { border-color: #e0a800; background: #fffaf0; }
.up-comprar em { position: absolute; top: -10px; right: 8px; padding: 1px 8px; border-radius: 10px; background: #e0a800; color: #1c2733; font: 800 12px var(--titulos); font-style: normal; }
.up-chances { display: grid; gap: 10px; padding: 16px; border-radius: 8px; background: #fff; border: 1px solid var(--borde); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.up-chances h4, .up-leyendas h4 { margin: 0; font: 800 15px var(--titulos); letter-spacing: .1em; text-transform: uppercase; color: #1c2733; }
.up-cat { display: grid; grid-template-columns: 82px 1fr 52px; align-items: center; gap: 8px; }
.up-cat span { font: 800 13px var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.up-cat i { height: 10px; border-radius: 5px; background: #eef1f4; overflow: hidden; }
.up-cat i b { display: block; height: 100%; background: var(--k); border-radius: 5px; }
.up-cat em { font: 700 13px var(--titulos); font-style: normal; text-align: right; color: #1c2733; }
.up-chances p { margin: 2px 0 0; font-size: 12.5px; color: #5b6774; line-height: 1.4; }
.up-chances .mq-chances { font-size: 13px; }
.up-chances .mq-chances ul { max-height: 180px; overflow-y: auto; }
.up-leyendas { width: min(900px, 100%); margin: 20px auto 8px; display: grid; gap: 12px; }
.up-leyendas h4 { display: flex; align-items: center; gap: 12px; text-align: center; }
.up-leyendas h4 .linea { flex: 1; height: 2px; background: var(--borde); }
.up-leg-fila { display: flex; justify-content: center; gap: 22px; }
.up-nota { text-align: center; }
@media (max-width: 760px) {
  .up-centro { grid-template-columns: 1fr; }
  .urna-pag .mq-pila { width: 190px; height: 270px; }
  .up-btn { font-size: 16px; padding: 12px 8px; }
}

/* ================================================================ Sobres de la Historia: el sobre de cada legendario */
.bp { position: absolute; inset: 0; --c1: #12355e; --c2: #0b1f3a; }
.bp-tapa, .bp .bp-tapa.p2-tapa { position: absolute; left: 0; right: 0; top: 0; height: 13%; z-index: 2; display: grid; place-items: center; border-radius: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c2) 80%, #000), var(--c2) 50%, color-mix(in srgb, var(--c2) 80%, #000));
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 9px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 9px) no-repeat;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 9px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 9px) no-repeat; }
.bp .bp-tapa.p2-tapa::before { display: none; }
.bp-tapa-txt { margin-top: 6px; font: 800 12px var(--titulos); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.bp-cuerpo, .bp .bp-cuerpo.p2-cuerpo { position: absolute; left: 0; right: 0; top: 13%; bottom: 0; display: block; padding: 0; overflow: hidden; border-radius: 0 0 4px 4px;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--c1) 55%, #fff) 0%, var(--c1) 45%, color-mix(in srgb, var(--c2) 85%, #000) 100%);
  box-shadow: 0 24px 50px rgba(0,0,0,.55); }
.bp .bp-cuerpo.p2-cuerpo::after { display: none; }
.bp-cuerpo::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 18px, rgba(255,255,255,.05) 18px 20px); }
.bp-rayos { position: absolute; left: 50%; top: 38%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 5deg, transparent 5deg 12deg); animation: pk-gira 24s linear infinite; }
.bp-luz { position: absolute; left: 50%; top: 40%; width: 85%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,.15) 45%, transparent 70%); }
.bp-marca { position: absolute; left: 0; right: 0; top: 10px; z-index: 3; display: grid; justify-items: center; line-height: 1; text-align: center; }
.bp-marca b { font: 800 15px var(--titulos); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.45); }
.bp-marca small { margin-top: 3px; font: 600 9px var(--titulos); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.bp-arte { position: absolute; left: 50%; bottom: 25%; z-index: 2; height: 66%; transform: translateX(-50%); filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.bp-nombre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; justify-items: center; gap: 2px; padding: 14px 8px 14px; line-height: 1;
  background: linear-gradient(transparent, rgba(0,0,0,.55) 35%, rgba(0,0,0,.75)); text-align: center; }
.bp-nombre small { font: 700 11px var(--titulos); letter-spacing: .24em; text-transform: uppercase; color: #ffd34d; }
.bp-nombre b { font: 800 40px/1 var(--titulos); text-transform: uppercase; color: #fff; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bp-nombre em, .bp .p2-cuerpo .bp-nombre em { position: static; font: 800 11px var(--titulos); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #ffd34d; opacity: 1; }
.bp-brillo { position: absolute; inset: -20%; z-index: 6; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.4) 48%, rgba(255,255,255,0) 58%);
  animation: pk-brillo 3.6s ease-in-out infinite; }
/* Al abrir: el sobre elegido se corta igual que antes */
.p2-sobre.bp-abrir { animation: p2-vaiven 2.4s ease-in-out infinite; }
.p2-sobre.bp-abrir.pista { animation: pk-pista .4s; }
.p2-sobre.bp-abrir .p2-linea { border-top-color: rgba(255,255,255,.6); }

/* ================================================================ Sobres de la Historia: la pantalla */
.sb-pag { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; overflow: hidden; color: #fff; padding: 12px 16px 14px;
  background: #0b1a33; }
.sb-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #24508f 0%, #12305c 45%, #08162c 100%); }
.sb-haz { position: absolute; top: -10%; width: 34%; height: 90%; background: linear-gradient(rgba(255,240,200,.18), transparent 80%); filter: blur(6px); }
.sb-haz.h1 { left: 22%; transform: rotate(16deg); } .sb-haz.h2 { right: 22%; transform: rotate(-16deg); }
.sb-casa { position: absolute; left: 50%; bottom: -2%; width: min(1100px, 130%); transform: translateX(-50%); opacity: .12; filter: brightness(2) grayscale(1); }
.sb-fondo i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffe7a1; box-shadow: 0 0 8px #ffd34d; opacity: 0; animation: sb-polvo var(--t) var(--d) linear infinite; }
@keyframes sb-polvo { 10% { opacity: .9; } 100% { transform: translate(30px, -95vh); opacity: 0; } }
.sb-cab { position: relative; z-index: 2; width: 100%; max-width: 1000px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; }
.sb-redondo { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer; }
.sb-titulo { display: grid; justify-items: center; line-height: 1; text-align: center; }
.sb-titulo small { font: 600 11px var(--titulos); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.sb-titulo b { margin-top: 4px; font: 800 clamp(22px, 3.4vw, 34px)/1 var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: #ffd34d; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.sb-cont { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; border-radius: 22px; border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); color: #fff; cursor: pointer;
  font: 800 18px var(--titulos); }
.sb-cont i { color: #e8c97a; }
.sb-mas { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--naranja); font-size: 20px; line-height: 1; }
.sb-escenario { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 900px; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sb-carrusel { position: relative; width: min(640px, 100%); height: 100%; max-height: 420px; perspective: 1200px; }
.sb-item { position: absolute; left: 50%; top: 50%; width: 236px; height: 372px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .5s cubic-bezier(.2,1.1,.4,1), opacity .4s, filter .4s; }
.sb-item.centro { z-index: 3; transform: translate(-50%, -52%); animation: sb-flota 3s ease-in-out infinite; }
@keyframes sb-flota { 50% { translate: 0 -8px; } }
.sb-item.izq { z-index: 1; transform: translate(-128%, -50%) scale(.72) rotateY(28deg); opacity: .6; filter: brightness(.6); }
.sb-item.der { z-index: 1; transform: translate(28%, -50%) scale(.72) rotateY(-28deg); opacity: .6; filter: brightness(.6); }
.sb-item.centro::after { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,110,.45), transparent 65%); }
.sb-pedestal { position: absolute; left: 50%; bottom: 2%; width: 280px; height: 40px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,214,110,.5), transparent 70%); filter: blur(4px); }
.sb-flecha { position: absolute; z-index: 4; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: rgba(0,0,0,.25); color: #fff; font-size: 18px; cursor: pointer; }
.sb-flecha.izq { left: 4px; } .sb-flecha.der { right: 4px; }
.sb-info { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; margin-top: 2px; }
.sb-info b { font: 800 26px/1 var(--titulos); letter-spacing: .04em; text-transform: uppercase; }
.sb-info span { padding: 3px 12px; border-radius: 14px; background: rgba(255,211,77,.16); color: #ffd34d; font: 700 13px var(--titulos); letter-spacing: .04em; }
.sb-botones { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(520px, 100%); margin-top: 12px; }
.sb-btn { display: grid; justify-items: center; gap: 2px; padding: 12px 10px 10px; border: 0; border-radius: 40px; cursor: pointer; transition: transform .1s; }
.sb-btn b { font: 800 24px/1 var(--titulos); letter-spacing: .06em; text-transform: uppercase; }
.sb-btn small { font: 700 13px var(--titulos); opacity: .8; }
.sb-btn.uno { background: linear-gradient(#ffffff, #dfe8f2); color: #12305c; box-shadow: 0 5px 0 #8fa6bf, 0 10px 20px rgba(0,0,0,.35); }
.sb-btn.diez { background: linear-gradient(#ffe48a, #f2b51b); color: #3a2600; box-shadow: 0 5px 0 #b07a00, 0 10px 20px rgba(0,0,0,.35); }
.sb-btn:active { transform: translateY(4px); }
.sb-btn.uno:active { box-shadow: 0 1px 0 #8fa6bf; } .sb-btn.diez:active { box-shadow: 0 1px 0 #b07a00; }
.sb-pie { position: relative; z-index: 2; display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.sb-pie button, .sb-regalo { border: 0; background: none; color: rgba(255,255,255,.8); font: 600 13px var(--titulos); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.sb-regalo { color: #ffd34d; }
/* Ventanitas: comprar y probabilidades */
.caja-modal.cuenta.sb-modal { width: min(440px, 94vw); }
.sb-compra { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-compra button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 10px 12px; border-radius: 12px; border: 2px solid var(--borde); background: #fff; cursor: pointer; color: #1c2733; }
.sb-compra button.pack { border-color: #f2b51b; background: #fffaf0; }
.sb-compra-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #12305c; color: #ffd34d; font-size: 24px; }
.sb-compra b { font: 800 18px var(--titulos); text-transform: uppercase; }
.sb-compra em { font: 800 18px var(--titulos); font-style: normal; color: #1f8a3b; }
.sb-compra-off { position: absolute; top: -10px; right: 10px; padding: 2px 10px; border-radius: 10px; background: #f2b51b; font: 800 12px var(--titulos); color: #3a2600; }
.sb-chances details { border-bottom: 1px solid #eef1f4; }
.sb-chances summary { display: flex; justify-content: space-between; padding: 8px 2px; cursor: pointer; font: 800 15px var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.sb-chances summary b { color: #1c2733; }
.sb-chances ul { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.sb-chances li { display: flex; justify-content: space-between; padding: 2px 4px; }
@media (max-height: 560px) {
  .sb-item { width: 170px; height: 268px; }
  .bp-nombre b { font-size: 28px; } .bp-marca b { font-size: 12px; }
  .sb-btn { padding: 8px; } .sb-btn b { font-size: 18px; }
  .sb-info b { font-size: 20px; } .sb-botones { margin-top: 6px; } .sb-pie { margin-top: 6px; }
}
/* Pulido: la Casa Rosada del fondo, apenas insinuada; el arte del sobre más abajo para no pisar la marca */
.sb-casa { opacity: .06; filter: brightness(0) invert(1); }
.bp-marca { top: 8px; }
.bp-marca small { display: none; }
.bp-arte { bottom: 23%; height: 62%; }
.bp-cuerpo { box-shadow: 0 24px 50px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.12); }
.sb-item.centro .bp-cuerpo { box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,214,110,.25), inset 0 0 0 2px rgba(255,255,255,.18); }
.sb-casa { display: none; }

/* ================================================================ Sobres de la Historia: sobre metalizado estilo Pocket
   Sobre de aluminio con borde serrado arriba y abajo, nervaduras en las costuras, reflejo holográfico que se mueve
   al inclinarlo, sombreado de "almohada" en los costados y el nombre del legendario en dorado. */
.bp { filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease-out; }
.sb-item { perspective: 900px; }
.sb-item.inclinado .bp { transition: transform .06s linear; }
/* Costura de arriba (la que se corta) */
.bp .bp-tapa, .bp .bp-tapa.p2-tapa { height: 9%; border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 2px, rgba(0,0,0,.18) 2px 4px),
    linear-gradient(180deg, color-mix(in srgb, var(--c1) 55%, #fff) 0%, var(--c1) 45%, color-mix(in srgb, var(--c2) 70%, #000) 100%); }
.bp .bp-tapa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.35), rgba(0,0,0,.35)); }
.bp-tapa-txt { display: none; }
.p2-sobre.bp-abrir .p2-linea { bottom: 9px; border-top: 2px dashed rgba(255,255,255,.85); }
/* Cuerpo: aluminio con los colores de la carta y serrado abajo */
.bp .bp-cuerpo, .bp .bp-cuerpo.p2-cuerpo { top: 9%; border-radius: 0; box-shadow: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 70%, #fff) 0%, var(--c1) 30%, color-mix(in srgb, var(--c2) 80%, #000) 100%);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat; }
.sb-item.centro .bp-cuerpo, .bp-cuerpo { box-shadow: none; }
.bp-cuerpo::before { display: none; }
.bp-fondo { position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.1) 46% 54%, transparent 54%); }
.bp-rayos { opacity: .55; }
.bp-luz { top: 44%; width: 95%; }
/* Logo arriba */
.bp-marca { top: 7px; display: grid; justify-items: center; line-height: .9; }
.bp-marca small { display: block; margin: 0; font: 800 10px var(--titulos); letter-spacing: .3em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bp-marca b { font: 800 26px/1 var(--titulos); letter-spacing: .06em;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd34d 45%, #c98a00 55%, #ffe58a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .6px rgba(60,30,0,.55); filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); text-shadow: none; }
/* Personaje grande, rompiendo el marco */
.bp-arte { bottom: 22%; height: 66%; filter: drop-shadow(0 6px 0 rgba(0,0,0,.18)) drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
/* Nombre: placa con dorado */
.bp-nombre { bottom: 9px; gap: 3px; padding: 18px 8px 12px; background: linear-gradient(transparent, color-mix(in srgb, var(--c2) 75%, #000) 40%); }
.bp-nombre b { order: 0; font: 800 38px/1 var(--titulos); letter-spacing: .03em; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 18px rgba(255,214,110,.35); }
.bp-nombre small { order: 1; font: 700 10px var(--titulos); letter-spacing: .28em; color: rgba(255,255,255,.75); }
.bp-nombre em, .bp .p2-cuerpo .bp-nombre em { order: 2; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 3px 12px; border-radius: 3px;
  background: linear-gradient(180deg, #fff3b0, #ffcf3f 50%, #d89a00); color: #3a2600; font: 800 10px var(--titulos); letter-spacing: .2em; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.bp-nombre em i { font-size: 9px; }
/* Costura de abajo */
.bp-pie { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 4;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 2px, rgba(0,0,0,.2) 2px 4px), color-mix(in srgb, var(--c2) 70%, #000); }
.bp-pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.35), rgba(0,0,0,.35)); }
/* Holográfico: se mueve solo y, al inclinar, sigue al dedo */
.bp-holo { position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255,60,140,.55) 32%, rgba(255,220,60,.55) 40%, rgba(60,255,170,.55) 48%, rgba(60,170,255,.55) 56%, rgba(190,80,255,.55) 64%, transparent 76%) var(--mx, 0%) var(--my, 50%) / 300% 300%,
    radial-gradient(rgba(255,255,255,.5) .8px, transparent 1.2px) 0 0 / 5px 5px;
  animation: bp-holo 6s ease-in-out infinite alternate; }
.inclinado .bp-holo { animation: none; opacity: .75; }
@keyframes bp-holo { from { background-position: 0% 30%, 0 0; } to { background-position: 100% 70%, 0 0; } }
/* Volumen de almohada: costados oscuros, brillo vertical y pliegues */
.bp-almohada { position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.22) 13%, rgba(255,255,255,0) 20%, rgba(0,0,0,0) 80%, rgba(255,255,255,.12) 88%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 12%, transparent 88%, rgba(0,0,0,.25)); }
.bp-brillo { z-index: 8; }
@media (max-height: 560px) {
  .bp-marca b { font-size: 19px; } .bp-marca small { font-size: 8px; }
  .bp-nombre b { font-size: 26px; } .bp-nombre { padding: 12px 6px 9px; }
}
/* Pulido Pocket: sobre más grande, sin trama de puntos, el personaje sin pisar el logo */
.sb-carrusel { max-height: 470px; }
.sb-item { width: 262px; height: 414px; }
.bp-fondo { background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.5), transparent 46%), linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.1) 44% 56%, transparent 56%); }
.bp-rayos { opacity: .35; }
.bp-holo { opacity: .45; background: linear-gradient(115deg, transparent 20%, rgba(255,60,140,.55) 32%, rgba(255,220,60,.55) 40%, rgba(60,255,170,.55) 48%, rgba(60,170,255,.55) 56%, rgba(190,80,255,.55) 64%, transparent 76%) var(--mx, 0%) var(--my, 50%) / 300% 300%; }
@keyframes bp-holo { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.bp-marca { top: 9px; }
.bp-arte { bottom: 24%; height: 58%; }
@media (max-height: 560px) { .sb-item { width: 170px; height: 268px; } .sb-carrusel { max-height: 300px; } }
/* La línea de corte, bien visible sobre la costura metalizada */
.p2-sobre.bp-abrir .p2-linea { left: 0; right: 0; bottom: 6px; height: 8px; border: 0; background: rgba(0,0,0,.45);
  background-image: linear-gradient(90deg, #fff 0 8px, transparent 8px 14px); background-size: 14px 2px; background-repeat: repeat-x; background-position: 0 3px; }

/* ================================================================ Un sobre distinto para cada legendario
   Perón: afiche de los años 40 (sol de rayos celestes y blancos, faja azul). Alfonsín: afiche de campaña del 83
   (papel blanco, franjas rojas, cinta celeste y blanca). Yrigoyen: billete antiguo (verde grabado, guarda dorada). */
.bp-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* --- Perón */
.bp-peron .bp-tapa, .bp-peron .bp-tapa.p2-tapa, .bp-peron .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, rgba(0,40,90,.18) 2px 4px), linear-gradient(#e9f4fd, #8ec3ea); }
.bp-peron .bp-cuerpo, .bp-peron .bp-cuerpo.p2-cuerpo { background: #f4f9fe; }
.bp-peron .bp-fondo { background: repeating-conic-gradient(from 0deg at 50% 64%, #74acdf 0 9deg, #f4f9fe 9deg 18deg); opacity: .9; }
.bp-peron .bp-rayos, .bp-peron .bp-luz { display: none; }
.bp-peron .bp-deco { background: radial-gradient(circle at 50% 64%, #ffd34d 0 11%, #f2a900 11.5% 13%, transparent 13.5%),
  linear-gradient(transparent 70%, #12305c 70% 100%); }
.bp-peron .bp-marca small { color: #12305c; text-shadow: none; }
.bp-peron .bp-marca b { background: none; color: #12305c; -webkit-text-stroke: 0; filter: none; font-size: 30px; text-shadow: 2px 2px 0 #ffd34d; }
.bp-peron .bp-nombre { background: none; }
.bp-peron .bp-nombre b { color: #ffd34d; text-shadow: 0 3px 0 #0a1c38; font-style: italic; }
.bp-peron .bp-nombre small { color: #cfe4f7; }
.bp-peron .bp-holo { opacity: .3; }

/* --- Alfonsín */
.bp-alfonsin .bp-tapa, .bp-alfonsin .bp-tapa.p2-tapa, .bp-alfonsin .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, rgba(0,0,0,.2) 2px 4px), linear-gradient(#e2363f, #a5141d); }
.bp-alfonsin .bp-cuerpo, .bp-alfonsin .bp-cuerpo.p2-cuerpo { background: #fbf7ef; }
.bp-alfonsin .bp-fondo { background:
  repeating-linear-gradient(-45deg, #d42630 0 14px, #fbf7ef 14px 28px) left top / 100% 26% no-repeat,
  radial-gradient(rgba(212,38,48,.14) 1.4px, transparent 1.7px) 0 0 / 8px 8px; }
.bp-alfonsin .bp-rayos, .bp-alfonsin .bp-luz { display: none; }
.bp-alfonsin .bp-deco { background: linear-gradient(-14deg, transparent 0 63%, #74acdf 63% 67%, #fff 67% 71%, #74acdf 71% 75%, transparent 75%); }
.bp-alfonsin .bp-marca { top: 6px; padding: 4px 10px 5px; left: 50%; right: auto; transform: translateX(-50%); background: #fbf7ef; box-shadow: 3px 3px 0 #12305c; }
.bp-alfonsin .bp-marca small { color: #12305c; text-shadow: none; }
.bp-alfonsin .bp-marca b { background: none; color: #d42630; -webkit-text-stroke: 0; filter: none; text-shadow: none; }
.bp-alfonsin .bp-nombre { background: linear-gradient(transparent, #fbf7ef 38%); }
.bp-alfonsin .bp-nombre b { color: #d42630; text-shadow: 3px 3px 0 #12305c; }
.bp-alfonsin .bp-nombre small { color: #12305c; }
.bp-alfonsin .bp-nombre em, .bp-alfonsin .p2-cuerpo .bp-nombre em { background: #12305c; color: #fff; }
.bp-alfonsin .bp-almohada { opacity: .6; }
.bp-alfonsin .bp-holo { opacity: .25; }
.p2-sobre.bp-abrir .bp-alfonsin .p2-linea { background-color: rgba(0,0,0,.5); }

/* --- Yrigoyen */
.bp-yrigoyen .bp-tapa, .bp-yrigoyen .bp-tapa.p2-tapa, .bp-yrigoyen .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(60,30,0,.25) 2px 4px), linear-gradient(#f3d98a, #a87a1e); }
.bp-yrigoyen .bp-cuerpo, .bp-yrigoyen .bp-cuerpo.p2-cuerpo { background: #17402f; }
.bp-yrigoyen .bp-fondo { background:
  repeating-radial-gradient(circle at 50% 46%, rgba(230,200,120,.16) 0 1px, transparent 1px 7px),
  repeating-radial-gradient(circle at 0 100%, rgba(230,200,120,.1) 0 1px, transparent 1px 9px),
  radial-gradient(circle at 50% 44%, #2e6a4f, #17402f 62%); }
.bp-yrigoyen .bp-rayos { display: none; }
.bp-yrigoyen .bp-luz { background: radial-gradient(circle, rgba(245,225,160,.45), transparent 66%); }
.bp-yrigoyen .bp-deco { inset: 10px 10px 22px; border: 2px solid #d9b45a; outline: 1px solid rgba(217,180,90,.6); outline-offset: 4px;
  background: radial-gradient(circle at 0 0, #d9b45a 0 7px, transparent 8px), radial-gradient(circle at 100% 0, #d9b45a 0 7px, transparent 8px),
    radial-gradient(circle at 0 100%, #d9b45a 0 7px, transparent 8px), radial-gradient(circle at 100% 100%, #d9b45a 0 7px, transparent 8px); }
.bp-yrigoyen .bp-arte { filter: sepia(.45) contrast(1.05) drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.bp-yrigoyen .bp-marca { top: 16px; }
.bp-yrigoyen .bp-marca small { color: #e9d49a; font-family: Georgia, serif; font-style: italic; letter-spacing: .14em; text-transform: none; font-size: 11px; }
.bp-yrigoyen .bp-marca b { font-family: Georgia, serif; font-size: 24px; letter-spacing: .12em; }
.bp-yrigoyen .bp-nombre { bottom: 22px; background: linear-gradient(transparent, rgba(10,36,25,.92) 40%); }
.bp-yrigoyen .bp-nombre b { font-family: Georgia, serif; font-weight: 700; font-size: 32px; letter-spacing: .08em;
  background: linear-gradient(180deg, #fff3c4, #d9b45a 55%, #a67c1e); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.bp-yrigoyen .bp-nombre small { color: #e9d49a; font-family: Georgia, serif; letter-spacing: .2em; }
.bp-yrigoyen .bp-holo { background: linear-gradient(115deg, transparent 25%, rgba(255,225,140,.55) 45%, rgba(255,255,230,.6) 50%, rgba(255,225,140,.55) 55%, transparent 75%) var(--mx, 0%) var(--my, 50%) / 300% 300%; opacity: .4; }
@media (max-height: 560px) { .bp-yrigoyen .bp-nombre b { font-size: 22px; } .bp-peron .bp-marca b { font-size: 21px; } }
/* Ventana del premio: el botón blanco heredaba letra blanca */
.cp-botones .btn:not(.btn-naranja) { color: var(--tinta, #1c2733); background: #fff; border-color: var(--borde, #d6dde4); }
/* El personaje apoyado abajo: el sobre arranca donde arranca el personaje (busto cortado por la costura de abajo)
   y el nombre sube debajo del logo. */
.bp .bp-arte { bottom: 14px; height: 62%; }
.bp .bp-nombre { top: 62px; bottom: auto; padding: 0 8px; gap: 2px; background: none; }
.bp .bp-nombre b { font-size: 34px; }
.bp .bp-nombre em, .bp .p2-cuerpo .bp-nombre em { position: absolute; top: auto; left: 50%; transform: translateX(-50%); }
.bp-nombre em, .bp .p2-cuerpo .bp-nombre em { display: none; }
.bp-pie { z-index: 4; }
.bp-alfonsin .bp-nombre, .bp-yrigoyen .bp-nombre { background: none; }
.bp-yrigoyen .bp-nombre { top: 70px; bottom: auto; }
.bp-yrigoyen .bp-arte { bottom: 22px; }
.bp-peron .bp-deco { background: linear-gradient(transparent 82%, #12305c 82% 100%); }
.bp-peron .bp-fondo { background: repeating-conic-gradient(from 0deg at 50% 100%, #74acdf 0 7deg, #f4f9fe 7deg 14deg); }
.bp-peron .bp-nombre b { font-style: italic; color: #12305c; text-shadow: 2px 2px 0 #ffd34d; }
.bp-peron .bp-nombre small { color: #12305c; }
.bp-alfonsin .bp-fondo { background: repeating-linear-gradient(-45deg, #d42630 0 14px, #fbf7ef 14px 28px) left bottom / 100% 22% no-repeat, radial-gradient(rgba(212,38,48,.14) 1.4px, transparent 1.7px) 0 0 / 8px 8px; }
.bp-alfonsin .bp-deco { background: linear-gradient(-14deg, transparent 0 40%, #74acdf 40% 44%, #fff 44% 48%, #74acdf 48% 52%, transparent 52%); }
.bp-alfonsin .bp-nombre b { text-shadow: 2px 2px 0 #12305c; }
@media (max-height: 560px) { .bp .bp-nombre { top: 44px; } .bp .bp-nombre b { font-size: 24px; } .bp .bp-arte { height: 58%; } }
.bp-yrigoyen .bp-nombre b { font-size: 27px; letter-spacing: .04em; }

/* ================================================================ Sobres de Roca y Urquiza (y carrusel de 5)
   Roca: estampilla postal de la Generación del 80 (bordó grabado, marco crema dentado). Urquiza: pergamino de la
   Constitución de 1853 (papel viejo, renglones, cinta roja federal y lacre). */
.sb-item.oculto { z-index: 0; opacity: 0; pointer-events: none; }
.sb-item.oculto.izq { transform: translate(-190%, -50%) scale(.5) rotateY(35deg); }
.sb-item.oculto.der { transform: translate(90%, -50%) scale(.5) rotateY(-35deg); }

/* --- Roca */
.bp-roca .bp-tapa, .bp-roca .bp-tapa.p2-tapa, .bp-roca .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, rgba(0,0,0,.22) 2px 4px), linear-gradient(#b4404e, #5e1520); }
.bp-roca .bp-cuerpo, .bp-roca .bp-cuerpo.p2-cuerpo { background: #7a1f2b; }
.bp-roca .bp-fondo { inset: 14px 14px 26px; background:
  repeating-linear-gradient(0deg, rgba(122,31,43,.13) 0 1px, transparent 1px 4px),
  radial-gradient(ellipse at 50% 70%, #fff8e6, #f1e2bf 70%); }
.bp-roca .bp-deco { inset: 8px 8px 20px; background:
  radial-gradient(circle, #7a1f2b 0 4px, transparent 4.5px) 0 0 / 12px 12px;
  -webkit-mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000); }
.bp-roca .bp-deco { background: none; border: 6px dotted #7a1f2b; border-radius: 2px; }
.bp-roca .bp-rayos { display: none; }
.bp-roca .bp-luz { display: none; }
.bp-roca .bp-arte { bottom: 26px; filter: sepia(.25) drop-shadow(0 10px 12px rgba(80,20,30,.35)); }
.bp-roca .bp-marca small { color: #7a1f2b; text-shadow: none; }
.bp-roca .bp-marca b { background: none; color: #7a1f2b; -webkit-text-stroke: 0; filter: none; font-family: Georgia, serif; letter-spacing: .14em; text-shadow: none; }
.bp-roca .bp-marca { top: 22px; }
.bp-roca .bp-nombre { top: 76px; }
.bp-roca .bp-nombre b { color: #7a1f2b; text-shadow: none; font-family: Georgia, serif; letter-spacing: .1em; }
.bp-roca .bp-nombre small { color: #7a1f2b; }
.bp-roca .bp-nombre::after { content: "5 ¢"; position: absolute; right: -2px; top: -48px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: #7a1f2b; color: #f1e2bf; font: 700 13px Georgia, serif; }
.bp-roca .bp-nombre { left: 14px; right: 14px; }
.bp-roca .bp-holo { opacity: .25; }
.bp-roca .bp-almohada { opacity: .7; }

/* --- Urquiza */
.bp-urquiza .bp-tapa, .bp-urquiza .bp-tapa.p2-tapa, .bp-urquiza .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, rgba(0,0,0,.22) 2px 4px), linear-gradient(#e2433a, #9c1b14); }
.bp-urquiza .bp-cuerpo, .bp-urquiza .bp-cuerpo.p2-cuerpo { background: #ead7ad; }
.bp-urquiza .bp-fondo { background:
  repeating-linear-gradient(180deg, transparent 0 15px, rgba(90,60,20,.18) 15px 16px),
  radial-gradient(ellipse at 50% 45%, #f6e9c8 20%, #e2c88f 75%, #c9a865 100%); }
.bp-urquiza .bp-rayos, .bp-urquiza .bp-luz { display: none; }
.bp-urquiza .bp-deco { background:
  radial-gradient(circle at 82% 30%, #b3201a 0 22px, #8a1510 23px 25px, transparent 26px),
  linear-gradient(64deg, transparent 0 58%, #c62a20 58% 64%, #fff 64% 66%, #74acdf 66% 72%, transparent 72%); }
.bp-urquiza .bp-arte { filter: sepia(.2) drop-shadow(0 10px 14px rgba(90,60,20,.4)); }
.bp-urquiza .bp-marca small { color: #5a3a12; text-shadow: none; font-family: Georgia, serif; font-style: italic; text-transform: none; letter-spacing: .12em; font-size: 11px; }
.bp-urquiza .bp-marca b { background: none; color: #9c1b14; -webkit-text-stroke: 0; filter: none; font-family: Georgia, serif; font-style: italic; text-shadow: none; }
.bp-urquiza .bp-nombre b { color: #3e2508; text-shadow: none; font-family: Georgia, serif; font-style: italic; font-weight: 700; letter-spacing: .03em; }
.bp-urquiza .bp-nombre small { color: #9c1b14; }
.bp-urquiza .bp-holo { opacity: .2; }
.bp-urquiza .bp-almohada { opacity: .7; }
@media (max-height: 560px) { .bp-roca .bp-nombre::after { display: none; } }
/* Roca: el valor de la estampilla abajo a la derecha y el dentado bien visible. Urquiza: el lacre sin tapar el nombre. */
.bp-roca .bp-nombre::after { display: none; }
.bp-roca .bp-deco { border: 0; background:
  radial-gradient(circle, #f1e2bf 0 3.5px, transparent 4px) 0 0 / 11px 11px repeat-x,
  radial-gradient(circle, #f1e2bf 0 3.5px, transparent 4px) 0 100% / 11px 11px repeat-x,
  radial-gradient(circle, #f1e2bf 0 3.5px, transparent 4px) 0 0 / 11px 11px repeat-y,
  radial-gradient(circle, #f1e2bf 0 3.5px, transparent 4px) 100% 0 / 11px 11px repeat-y; inset: 3px 3px 15px; z-index: 3; }
.bp-roca .bp-deco::after { content: "5 ¢"; position: absolute; right: 14px; bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: #7a1f2b; color: #f1e2bf; font: 700 14px Georgia, serif; box-shadow: 0 0 0 3px #f1e2bf, 0 0 0 4px #7a1f2b; }
.bp-urquiza .bp-deco { background:
  radial-gradient(circle at 18% 64%, #b3201a 0 20px, #8a1510 21px 23px, transparent 24px),
  linear-gradient(64deg, transparent 0 58%, #c62a20 58% 64%, #fff 64% 66%, #74acdf 66% 72%, transparent 72%); }
.bp-urquiza .bp-deco { background:
  radial-gradient(circle at 20% 76%, #b3201a 0 20px, #8a1510 21px 23px, transparent 24px),
  linear-gradient(64deg, transparent 0 26%, #c62a20 26% 32%, #fff 32% 34%, #74acdf 34% 40%, transparent 40%); }

/* ================================================================ Roca y Urquiza, rehechos (más afiche, menos papel)
   Roca: atardecer patagónico, sol grande detrás y la cordillera nevada. Urquiza: rojo federal, laureles dorados,
   un "1853" gigante de fondo y franjas celestes y blancas abajo. */
/* --- Roca */
.bp-roca .bp-tapa, .bp-roca .bp-tapa.p2-tapa, .bp-roca .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, rgba(0,0,0,.22) 2px 4px), linear-gradient(#ffb15c, #c4521f); }
.bp-roca .bp-cuerpo, .bp-roca .bp-cuerpo.p2-cuerpo { background: linear-gradient(180deg, #2a1f5c 0%, #8a2f6b 38%, #f06a3b 62%, #ffb45a 78%); }
.bp-roca .bp-fondo { inset: 0; background:
  radial-gradient(circle at 50% 66%, #fff1b8 0 21%, #ffd36b 21.5% 23%, rgba(255,211,107,.35) 23.5% 30%, transparent 31%),
  radial-gradient(1.4px 1.4px at 18% 12%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 72% 8%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 86% 22%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 32% 26%, #fff 50%, transparent 51%); }
.bp-roca .bp-luz, .bp-roca .bp-rayos { display: none; }
.bp-roca .bp-deco { inset: auto 0 0 0; height: 46%; border: 0; z-index: 1;
  background: linear-gradient(180deg, #3b2c6e, #1b1440);
  clip-path: polygon(0 38%, 12% 14%, 20% 30%, 31% 0, 44% 26%, 52% 12%, 63% 34%, 74% 6%, 86% 30%, 100% 16%, 100% 100%, 0 100%); }
.bp-roca .bp-deco::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff 0 9%, transparent 9%);
  clip-path: polygon(31% 0, 26% 10%, 36% 10%, 31% 0, 74% 6%, 70% 14%, 78% 14%, 74% 6%); }
.bp-roca .bp-deco::after { display: none; }
.bp-roca .bp-arte { bottom: 14px; filter: drop-shadow(0 -2px 0 rgba(255,220,150,.5)) drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.bp-roca .bp-marca { top: 9px; }
.bp-roca .bp-marca small { color: #ffe3b0; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-family: var(--titulos); font-style: normal; letter-spacing: .3em; }
.bp-roca .bp-marca b { font-family: var(--titulos); letter-spacing: .06em;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd34d 45%, #c98a00 55%, #ffe58a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .6px rgba(60,30,0,.55); filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.bp-roca .bp-nombre { top: 62px; left: 0; right: 0; }
.bp-roca .bp-nombre b { font-family: var(--titulos); letter-spacing: .04em; color: #fff; text-shadow: 0 3px 0 #2a1f5c, 0 0 18px rgba(255,160,80,.6); }
.bp-roca .bp-nombre small { color: #ffe3b0; }
.bp-roca .bp-holo { opacity: .4; }
.bp-roca .bp-almohada { opacity: 1; }

/* --- Urquiza */
.bp-urquiza .bp-tapa, .bp-urquiza .bp-tapa.p2-tapa, .bp-urquiza .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, rgba(0,0,0,.25) 2px 4px), linear-gradient(#f0d27a, #a8781a); }
.bp-urquiza .bp-cuerpo, .bp-urquiza .bp-cuerpo.p2-cuerpo { background: radial-gradient(ellipse at 50% 55%, #e0322a 0%, #b51d17 50%, #6e0c09 100%); }
.bp-urquiza .bp-fondo { background:
  repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,210,120,.13) 0 6deg, transparent 6deg 15deg); }
.bp-urquiza .bp-fondo::after { content: "1853"; position: absolute; left: 0; right: 0; top: 30%; text-align: center; font: 800 96px/1 var(--titulos); letter-spacing: -.02em;
  color: rgba(0,0,0,.16); }
.bp-urquiza .bp-rayos { display: none; }
.bp-urquiza .bp-luz { display: block; top: 58%; width: 90%; background: radial-gradient(circle, rgba(255,220,140,.55), transparent 66%); }
.bp-urquiza .bp-deco { inset: 0; background:
  linear-gradient(180deg, transparent 0 80%, #74acdf 80% 86%, #fff 86% 92%, #74acdf 92% 100%); }
.bp-urquiza .bp-deco::before { content: ""; position: absolute; left: 50%; top: 58%; width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px dashed rgba(255,211,77,.85); box-shadow: 0 0 0 7px rgba(255,211,77,.18), inset 0 0 0 7px rgba(255,211,77,.18);
  -webkit-mask: linear-gradient(#000 0 74%, transparent 74%); mask: linear-gradient(#000 0 74%, transparent 74%); }
.bp-urquiza .bp-arte { bottom: 14px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.bp-urquiza .bp-marca small { color: #ffe3b0; font-family: var(--titulos); font-style: normal; text-transform: uppercase; letter-spacing: .3em; font-size: 10px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.bp-urquiza .bp-marca b { font-family: var(--titulos); font-style: normal;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd34d 45%, #c98a00 55%, #ffe58a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .6px rgba(60,30,0,.55); filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.bp-urquiza .bp-nombre b { font-family: var(--titulos); font-style: normal; font-weight: 800; color: #fff; text-shadow: 0 3px 0 #5a0907; }
.bp-urquiza .bp-nombre small { color: #ffe3b0; }
.bp-urquiza .bp-holo { opacity: .4; }
.bp-urquiza .bp-almohada { opacity: 1; }
@media (max-height: 560px) { .bp-urquiza .bp-fondo::after { font-size: 62px; } }

/* ---------------------------------------------------------------- Épocas 1850 (Urquiza) y 1880 (Roca)
   1850, la Confederación: rojo federal con rayos, marco dorado y pie de pergamino con doble filete rojo.
   1880, la Generación del 80: grabado azul noche con guarda dorada y laureles, pie negro con letras doradas. */
.tarjeta.cand.epoca-1850 .silueta, .tarjeta.cand.epoca-1880 .silueta { opacity: 0; }
.tarjeta.cand.epoca-1850 .tarjeta-arte { background:
    repeating-conic-gradient(from 0deg at 50% 70%, rgba(255,214,120,.16) 0 7deg, transparent 7deg 16deg),
    radial-gradient(ellipse at 50% 55%, #e0322a, #a3180f 60%, #5e0905);
  box-shadow: inset 0 0 0 4px #d9b45a, inset 0 0 0 7px #5e0905, inset 0 0 0 9px #d9b45a, inset 0 0 40px rgba(40,0,0,.5); }
.tarjeta.cand.epoca-1850 .retrato img { filter: sepia(.15) contrast(1.05) drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.tarjeta.cand.epoca-1850 .tarjeta-arte::before { content: "★"; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 2; color: #ffd34d; font-size: 16px; }
.tarjeta.cand.epoca-1850 .tarjeta-pie { background: #f3e3bd; border-top: 4px double #a3180f; }
.tarjeta.cand.epoca-1850 .tarjeta-pie .apellido { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: #8a120c; letter-spacing: .03em; }
.tarjeta.cand.epoca-1850 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1850 .tarjeta-pie .rol { color: #5a3a12; }
.tarjeta.cand.epoca-1850 .anio-pie { color: #a3180f; font-family: Georgia, serif; }

.tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    repeating-radial-gradient(circle at 50% 50%, rgba(217,180,90,.12) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 45%, #2b4a86, #13285a 60%, #070f26);
  box-shadow: inset 0 0 0 3px #d9b45a, inset 0 0 0 8px #13285a, inset 0 0 0 9px #d9b45a, inset 0 0 40px rgba(0,0,0,.5); }
.tarjeta.cand.epoca-1880 .retrato img { filter: sepia(.2) drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.tarjeta.cand.epoca-1880 .tarjeta-arte::before { content: "❧  ☙"; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 2; color: #d9b45a; font-size: 16px; white-space: nowrap; letter-spacing: 40px; }
.tarjeta.cand.epoca-1880 .tarjeta-pie { background: #0d1530; border-top: 3px solid #d9b45a; }
.tarjeta.cand.epoca-1880 .tarjeta-pie .apellido { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .1em; color: #f3d98a; }
.tarjeta.cand.epoca-1880 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1880 .tarjeta-pie .rol { color: #c9d3ea; }
.tarjeta.cand.epoca-1880 .anio-pie { color: #d9b45a; font-family: Georgia, serif; }

.ficha.epoca-1850 .ficha-izq { color: #fff; background:
    repeating-conic-gradient(from 0deg at 50% 75%, rgba(255,214,120,.16) 0 7deg, transparent 7deg 16deg),
    radial-gradient(ellipse at 50% 55%, #e0322a, #a3180f 60%, #5e0905);
  box-shadow: inset 0 0 0 6px #d9b45a, inset 0 0 0 10px #5e0905, inset 0 0 0 13px #d9b45a; }
.ficha.epoca-1850 .ficha-nombre, .ficha.epoca-1850 .ficha-rol { color: #fff; font-family: Georgia, serif; }
.ficha.epoca-1850 .ficha-anio { color: #ffd34d; text-shadow: 0 2px 0 #5e0905; font-family: Georgia, serif; }
.ficha.epoca-1880 .ficha-izq { color: #fff; background:
    repeating-radial-gradient(circle at 50% 50%, rgba(217,180,90,.12) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% 45%, #2b4a86, #13285a 60%, #070f26);
  box-shadow: inset 0 0 0 5px #d9b45a, inset 0 0 0 11px #13285a, inset 0 0 0 13px #d9b45a; }
.ficha.epoca-1880 .ficha-nombre, .ficha.epoca-1880 .ficha-rol { color: #f3d98a; font-family: Georgia, serif; }
.ficha.epoca-1880 .ficha-anio { color: #d9b45a; text-shadow: 0 2px 0 #070f26; font-family: Georgia, serif; }

/* ---------------------------------------------------------------- Roca y Urquiza, envejecidos (como Yrigoyen)
   Papel amarillento con manchas de humedad, retrato en sepia y tintas gastadas. Urquiza (1854): daguerrotipo en
   estuche de bronce, óvalo oscuro. Roca (1880): grabado en tinta azul sobre papel viejo, guarda doble. */
.tarjeta.cand.epoca-1850 .retrato img, .tarjeta.cand.epoca-1880 .retrato img,
.ficha.epoca-1850 .ficha-foto img, .ficha.epoca-1880 .ficha-foto img { filter: sepia(.85) contrast(1.08) brightness(.97); }
/* Urquiza: daguerrotipo */
.tarjeta.cand.epoca-1850 .tarjeta-arte { background:
    radial-gradient(ellipse 46% 52% at 50% 52%, transparent 0 92%, rgba(0,0,0,.0) 92%),
    radial-gradient(ellipse 46% 52% at 50% 52%, #8a7552 0%, #4d3d24 70%, #1f160b 100%);
  box-shadow: inset 0 0 0 4px #b08a3c, inset 0 0 0 6px #5c4317, inset 0 0 0 8px #d8b867, inset 0 0 0 12px #2a1e0e, inset 0 0 30px 14px rgba(0,0,0,.6); }
.tarjeta.cand.epoca-1850 .tarjeta-arte::before { content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none; border-radius: 50% / 46%;
  box-shadow: 0 0 0 40px #2a1e0e, inset 0 0 0 2px #d8b867, inset 0 0 18px rgba(0,0,0,.6); top: 10px; bottom: 6px; left: 14px; right: 14px; color: transparent; }
.tarjeta.cand.epoca-1850 .tarjeta-pie, .tarjeta.cand.epoca-1880 .tarjeta-pie { background:
    radial-gradient(circle at 12% 30%, rgba(140,95,35,.22) 0 9%, transparent 10%), radial-gradient(circle at 88% 70%, rgba(140,95,35,.18) 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 40%, #f1e3c0, #dcc595 90%); }
.tarjeta.cand.epoca-1850 .tarjeta-pie { border-top: 3px double #7a2a18; }
.tarjeta.cand.epoca-1850 .tarjeta-pie .apellido { color: #6e2414; }
.tarjeta.cand.epoca-1850 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1850 .tarjeta-pie .rol { color: #5a4222; }
.tarjeta.cand.epoca-1850 .anio-pie { color: #7a2a18; }
/* Roca: grabado en tinta azul gastada sobre papel */
.tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    radial-gradient(circle at 18% 22%, rgba(140,95,35,.25) 0 7%, transparent 8%), radial-gradient(circle at 84% 78%, rgba(140,95,35,.2) 0 9%, transparent 10%),
    repeating-linear-gradient(135deg, rgba(42,58,106,.16) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 45%, #efe0bd, #d6bd88 80%, #a88a54);
  box-shadow: inset 0 0 0 3px #2a3a6a, inset 0 0 0 7px #efe0bd, inset 0 0 0 8px #2a3a6a, inset 0 0 40px rgba(90,60,20,.45); }
.tarjeta.cand.epoca-1880 .tarjeta-arte::before { color: #2a3a6a; }
.tarjeta.cand.epoca-1880 .tarjeta-pie { border-top: 3px double #2a3a6a; }
.tarjeta.cand.epoca-1880 .tarjeta-pie .apellido { color: #22305a; }
.tarjeta.cand.epoca-1880 .tarjeta-pie .nombre, .tarjeta.cand.epoca-1880 .tarjeta-pie .rol { color: #4a4636; }
.tarjeta.cand.epoca-1880 .anio-pie { color: #2a3a6a; }
/* Fichas */
.ficha.epoca-1850 .ficha-izq { color: #f1e3c0; background: radial-gradient(ellipse 50% 46% at 50% 60%, #8a7552 0%, #4d3d24 70%, #1f160b 100%);
  box-shadow: inset 0 0 0 6px #b08a3c, inset 0 0 0 9px #5c4317, inset 0 0 0 12px #d8b867, inset 0 0 60px 20px rgba(0,0,0,.6); }
.ficha.epoca-1850 .ficha-nombre, .ficha.epoca-1850 .ficha-rol { color: #f1e3c0; }
.ficha.epoca-1850 .ficha-anio { color: #d8b867; text-shadow: 0 2px 0 #1f160b; }
.ficha.epoca-1880 .ficha-izq { color: #22305a; background:
    radial-gradient(circle at 18% 22%, rgba(140,95,35,.25) 0 6%, transparent 7%), radial-gradient(circle at 84% 70%, rgba(140,95,35,.2) 0 8%, transparent 9%),
    repeating-linear-gradient(135deg, rgba(42,58,106,.14) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 45%, #efe0bd, #d6bd88 80%, #a88a54);
  box-shadow: inset 0 0 0 5px #2a3a6a, inset 0 0 0 10px #efe0bd, inset 0 0 0 12px #2a3a6a, inset 0 0 60px rgba(90,60,20,.45); }
.ficha.epoca-1880 .ficha-nombre, .ficha.epoca-1880 .ficha-rol { color: #22305a; }
.ficha.epoca-1880 .ficha-anio { color: #2a3a6a; text-shadow: none; }
.ficha.epoca-1850 .ficha-izq .ficha-logo, .ficha.epoca-1880 .ficha-izq .ficha-logo { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
/* Sobres: el personaje en sepia y el papel con manchas, para que se note que son de otro siglo */
.bp-roca .bp-arte, .bp-urquiza .bp-arte { filter: sepia(.8) contrast(1.08) drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.bp-roca .bp-almohada, .bp-urquiza .bp-almohada { background:
    radial-gradient(circle at 14% 30%, rgba(120,80,30,.22) 0 7%, transparent 8%), radial-gradient(circle at 86% 64%, rgba(120,80,30,.18) 0 9%, transparent 10%),
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.18) 13%, rgba(255,255,255,0) 20%, rgba(0,0,0,0) 80%, rgba(255,255,255,.1) 88%, rgba(0,0,0,.45) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(70,40,10,.35) 100%); }
.bp-roca .bp-cuerpo, .bp-roca .bp-cuerpo.p2-cuerpo, .bp-urquiza .bp-cuerpo, .bp-urquiza .bp-cuerpo.p2-cuerpo { filter: sepia(.35) saturate(.85); }
/* Ajuste: óvalo del daguerrotipo como velo encima del retrato; manchas de humedad suaves (sin borde) */
.tarjeta.cand.epoca-1850 .tarjeta-arte::before { content: ""; inset: 6px; border-radius: 0; box-shadow: none; z-index: 2;
  background: radial-gradient(ellipse 44% 50% at 50% 48%, transparent 78%, rgba(42,30,14,.85) 92%, #2a1e0e 100%); }
.tarjeta.cand.epoca-1850 .tarjeta-pie, .tarjeta.cand.epoca-1880 .tarjeta-pie { background:
    radial-gradient(ellipse at 10% 25%, rgba(150,100,40,.16), transparent 22%), radial-gradient(ellipse at 92% 80%, rgba(150,100,40,.14), transparent 25%),
    radial-gradient(ellipse at 50% 40%, #f1e3c0, #dcc595 95%); }
.tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    radial-gradient(ellipse at 16% 20%, rgba(150,100,40,.2), transparent 20%), radial-gradient(ellipse at 86% 80%, rgba(150,100,40,.18), transparent 24%),
    repeating-linear-gradient(135deg, rgba(42,58,106,.16) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 45%, #efe0bd, #d6bd88 80%, #a88a54); }
.ficha.epoca-1880 .ficha-izq { background:
    radial-gradient(ellipse at 16% 20%, rgba(150,100,40,.2), transparent 20%), radial-gradient(ellipse at 86% 74%, rgba(150,100,40,.16), transparent 24%),
    repeating-linear-gradient(135deg, rgba(42,58,106,.14) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 45%, #efe0bd, #d6bd88 80%, #a88a54); }
.bp-roca .bp-almohada, .bp-urquiza .bp-almohada { background:
    radial-gradient(ellipse at 14% 30%, rgba(120,80,30,.2), transparent 22%), radial-gradient(ellipse at 86% 64%, rgba(120,80,30,.16), transparent 24%),
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.18) 13%, rgba(255,255,255,0) 20%, rgba(0,0,0,0) 80%, rgba(255,255,255,.1) 88%, rgba(0,0,0,.45) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(70,40,10,.35) 100%); }
.tarjeta.cand.epoca-1850 .tarjeta-arte::before { transform: none; }
/* Urquiza: la bandera federal como logo (rectangular, con borde fino) y sus colores en el sobre */
img[src*="logos/federal.png"] { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); object-fit: contain; }
.bp-urquiza .bp-deco { background:
  linear-gradient(180deg, transparent 0 80%, #003a88 80% 86%, #fff 86% 92%, #003a88 92% 100%); }
.bp-urquiza .bp-deco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
  background: linear-gradient(-28deg, transparent 0 40%, #cf1124 40% 62%, transparent 62%); }

/* ---------------------------------------------------------------- Roca y Urquiza con los colores de sus logos
   Roca: el celeste del PAN y su Sol de Mayo (rayos tenues) sobre papel viejo, doble aro celeste como el logo.
   Urquiza: la bandera federal (azul, blanco y azul con la franja roja) desteñida sobre papel, marco azul y rojo. */
.ficha.epoca-1880 .ficha-izq, .tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    radial-gradient(ellipse at 14% 18%, rgba(150,100,40,.18), transparent 20%), radial-gradient(ellipse at 88% 82%, rgba(150,100,40,.16), transparent 24%),
    repeating-conic-gradient(from 0deg at 50% 62%, rgba(0,168,225,.13) 0 4deg, transparent 4deg 11deg),
    radial-gradient(circle at 50% 62%, rgba(255,246,214,.9) 0 16%, transparent 34%),
    radial-gradient(ellipse at 50% 45%, #f3e7c8, #dcc595 80%, #b39561); }
.ficha.epoca-1880 .ficha-izq { color: #0b5f8f; box-shadow: inset 0 0 0 7px #00a8e1, inset 0 0 0 12px #f3e7c8, inset 0 0 0 15px #00a8e1, inset 0 0 60px rgba(90,60,20,.35); }
.tarjeta.cand.epoca-1880 .tarjeta-arte { box-shadow: inset 0 0 0 4px #00a8e1, inset 0 0 0 7px #f3e7c8, inset 0 0 0 9px #00a8e1, inset 0 0 40px rgba(90,60,20,.35); }
.ficha.epoca-1880 .ficha-nombre, .ficha.epoca-1880 .ficha-rol { color: #0b5f8f; }
.ficha.epoca-1880 .ficha-anio { color: #00a8e1; text-shadow: 0 2px 0 rgba(11,95,143,.35); }
.tarjeta.cand.epoca-1880 .tarjeta-arte::before { color: #00a8e1; }
.tarjeta.cand.epoca-1880 .tarjeta-pie { border-top: 4px double #00a8e1; }
.tarjeta.cand.epoca-1880 .tarjeta-pie .apellido { color: #0b5f8f; }
.tarjeta.cand.epoca-1880 .anio-pie { color: #00a8e1; }

.ficha.epoca-1850 .ficha-izq, .tarjeta.cand.epoca-1850 .tarjeta-arte { background:
    radial-gradient(ellipse at 14% 18%, rgba(150,100,40,.18), transparent 20%), radial-gradient(ellipse at 88% 82%, rgba(150,100,40,.16), transparent 24%),
    linear-gradient(-30deg, transparent 0 38%, rgba(207,17,36,.22) 38% 58%, transparent 58%),
    linear-gradient(180deg, rgba(0,58,136,.2) 0 30%, transparent 30% 70%, rgba(0,58,136,.2) 70%),
    radial-gradient(ellipse at 50% 45%, #f3e7c8, #dcc595 80%, #b39561); }
.ficha.epoca-1850 .ficha-izq { color: #003a88; box-shadow: inset 0 0 0 6px #003a88, inset 0 0 0 10px #f3e7c8, inset 0 0 0 13px #cf1124, inset 0 0 60px rgba(90,60,20,.35); }
.tarjeta.cand.epoca-1850 .tarjeta-arte { box-shadow: inset 0 0 0 4px #003a88, inset 0 0 0 7px #f3e7c8, inset 0 0 0 9px #cf1124, inset 0 0 40px rgba(90,60,20,.35); }
.tarjeta.cand.epoca-1850 .tarjeta-arte::before { display: none; }
.ficha.epoca-1850 .ficha-nombre { color: #003a88; }
.ficha.epoca-1850 .ficha-rol { color: #5a4222; }
.ficha.epoca-1850 .ficha-anio { color: #cf1124; text-shadow: 0 2px 0 rgba(0,58,136,.3); }
.tarjeta.cand.epoca-1850 .tarjeta-pie { border-top: 4px double #003a88; }
.tarjeta.cand.epoca-1850 .tarjeta-pie .apellido { color: #003a88; }
.tarjeta.cand.epoca-1850 .anio-pie { color: #cf1124; }

/* ---------------------------------------------------------------- Roca y Urquiza, versión limpia
   Como Yrigoyen: papel viejo liso con viñeta, retrato sepia. Los colores del partido solo en el marco, el nombre y
   el año (nada de franjas translúcidas que ensucian). Roca: aro celeste doble como el logo del PAN y un sol dorado
   suave detrás de la cabeza. Urquiza: marco azul, blanco y rojo como la bandera federal. */
.ficha.epoca-1880 .ficha-izq, .tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    radial-gradient(circle at 50% 58%, rgba(255,236,170,.75) 0 14%, rgba(255,236,170,.25) 26%, transparent 40%),
    radial-gradient(ellipse at 50% 45%, #f6ebcf 0%, #e6d3a6 55%, #c7aa72 100%); }
.ficha.epoca-1850 .ficha-izq, .tarjeta.cand.epoca-1850 .tarjeta-arte { background:
    radial-gradient(ellipse at 50% 45%, #f6ebcf 0%, #e6d3a6 55%, #c7aa72 100%); }
.ficha.epoca-1850 .ficha-izq { box-shadow: inset 0 0 0 8px #003a88, inset 0 0 0 12px #fff, inset 0 0 0 15px #cf1124, inset 0 0 70px rgba(90,60,20,.4); }
.tarjeta.cand.epoca-1850 .tarjeta-arte { box-shadow: inset 0 0 0 5px #003a88, inset 0 0 0 8px #fff, inset 0 0 0 10px #cf1124, inset 0 0 40px rgba(90,60,20,.4); }
.ficha.epoca-1880 .ficha-izq { box-shadow: inset 0 0 0 7px #00a8e1, inset 0 0 0 12px #fff, inset 0 0 0 15px #00a8e1, inset 0 0 70px rgba(90,60,20,.4); }
.tarjeta.cand.epoca-1880 .tarjeta-arte { box-shadow: inset 0 0 0 4px #00a8e1, inset 0 0 0 7px #fff, inset 0 0 0 9px #00a8e1, inset 0 0 40px rgba(90,60,20,.4); }
.ficha.epoca-1850 .ficha-nombre { color: #003a88; text-shadow: none; }
.ficha.epoca-1880 .ficha-nombre { color: #0b6a9c; text-shadow: none; }
.ficha.epoca-1850 .ficha-rol, .ficha.epoca-1880 .ficha-rol { color: #5a4222; text-shadow: none; }
.ficha.epoca-1850 .ficha-anio { color: #cf1124; text-shadow: none; }
.ficha.epoca-1880 .ficha-anio { color: #0b6a9c; text-shadow: none; }
.tarjeta.cand.epoca-1850 .tarjeta-pie, .tarjeta.cand.epoca-1880 .tarjeta-pie { background: radial-gradient(ellipse at 50% 30%, #f6ebcf, #e6d3a6 95%); }
.tarjeta.cand.epoca-1880 .tarjeta-arte::before { display: none; }

/* ---------------------------------------------------------------- Roca y Urquiza, fondo de presidente (como Perón y Alfonsín)
   Roca: el emblema del PAN grande detrás (aros celestes y el sol de rayos crema). Urquiza: la bandera federal entera,
   con colores apenas desteñidos para que se note la época. Los dos con el marco dorado de los legendarios. */
.ficha.epoca-1880 .ficha-izq, .tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    radial-gradient(circle at 50% 64%, #fff8dc 0 8%, rgba(255,240,190,.9) 11%, transparent 15%),
    repeating-conic-gradient(from 0deg at 50% 64%, rgba(255,246,214,.75) 0 3deg, transparent 3deg 9deg),
    radial-gradient(circle at 50% 64%, #2fb6e6 0 30%, #fff 30.5% 33%, #00a8e1 33.5% 39%, #f6ebcf 39.5%),
    #f6ebcf; }
.tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    radial-gradient(circle at 50% 58%, #fff8dc 0 9%, rgba(255,240,190,.9) 12%, transparent 17%),
    repeating-conic-gradient(from 0deg at 50% 58%, rgba(255,246,214,.75) 0 3deg, transparent 3deg 9deg),
    radial-gradient(circle at 50% 58%, #2fb6e6 0 34%, #fff 34.5% 38%, #00a8e1 38.5% 45%, #f6ebcf 45.5%); }
.ficha.epoca-1880 .ficha-izq { box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227, inset 0 0 70px rgba(90,60,20,.3); }
.tarjeta.cand.epoca-1880 .tarjeta-arte { box-shadow: inset 0 0 0 4px #c9a227, inset 0 0 0 6px #fff3c4, inset 0 0 0 8px #c9a227, inset 0 0 40px rgba(90,60,20,.3); }

.ficha.epoca-1850 .ficha-izq, .tarjeta.cand.epoca-1850 .tarjeta-arte { background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(60,35,10,.35) 100%),
    linear-gradient(-32deg, transparent 0 39%, #c22a32 39% 61%, transparent 61%),
    linear-gradient(180deg, #24508f 0 33.3%, #f3ead2 33.3% 66.6%, #24508f 66.6%); }
.ficha.epoca-1850 .ficha-izq { box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.tarjeta.cand.epoca-1850 .tarjeta-arte { box-shadow: inset 0 0 0 4px #c9a227, inset 0 0 0 6px #fff3c4, inset 0 0 0 8px #c9a227; }
.ficha.epoca-1850 .ficha-nombre, .ficha.epoca-1850 .ficha-rol { color: #fff; text-shadow: 0 2px 0 #0f2a55, 0 0 12px rgba(0,0,0,.4); }
.ficha.epoca-1850 .ficha-anio { color: #ffd34d; text-shadow: 0 2px 0 #0f2a55; }
.ficha.epoca-1850 .ficha-izq, .tarjeta.cand.epoca-1850 .tarjeta-arte { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(60,35,10,.35) 100%), linear-gradient(32deg, transparent 0 39%, #c22a32 39% 61%, transparent 61%), linear-gradient(180deg, #24508f 0 33.3%, #f3ead2 33.3% 66.6%, #24508f 66.6%); }
/* Roca: los rayos del sol solo dentro del disco celeste (el aro y el papel quedan encima) */
.ficha.epoca-1880 .ficha-izq { background:
    radial-gradient(circle at 50% 64%, #fff8dc 0 8%, rgba(255,240,190,.9) 11%, transparent 15%),
    radial-gradient(circle at 50% 64%, transparent 0 30%, #fff 30.5% 33%, #00a8e1 33.5% 39%, #f6ebcf 39.5%),
    repeating-conic-gradient(from 0deg at 50% 64%, rgba(255,246,214,.75) 0 3deg, transparent 3deg 9deg),
    #2fb6e6; }
.tarjeta.cand.epoca-1880 .tarjeta-arte { background:
    radial-gradient(circle at 50% 58%, #fff8dc 0 9%, rgba(255,240,190,.9) 12%, transparent 17%),
    radial-gradient(circle at 50% 58%, transparent 0 34%, #fff 34.5% 38%, #00a8e1 38.5% 45%, #f6ebcf 45.5%),
    repeating-conic-gradient(from 0deg at 50% 58%, rgba(255,246,214,.75) 0 3deg, transparent 3deg 9deg),
    #2fb6e6; }
.ficha.epoca-1880 .ficha-izq { background:
    radial-gradient(circle closest-side at 50% 68%, #fff8dc 0 20%, rgba(255,240,190,.9) 27%, transparent 36%),
    radial-gradient(circle closest-side at 50% 68%, transparent 0 78%, #fff 79% 85%, #00a8e1 86% 99%, #f6ebcf 100%),
    repeating-conic-gradient(from 0deg at 50% 68%, rgba(255,246,214,.75) 0 3deg, transparent 3deg 9deg),
    #2fb6e6; }

/* ---------------------------------------------------------------- El marco por encima del retrato
   Los marcos de las cartas y fichas son sombras internas del fondo, así que el personaje los tapaba. Esta capa repite
   la misma sombra (inherit) encima del retrato: la figura queda "dentro" del cuadro. */
.marco-arriba { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inherit; border-radius: inherit; }
.ficha-izq .ficha-logo, .ficha-izq .ficha-anio, .ficha-izq .ficha-vice, .tarjeta-arte .candado, .tarjeta-arte .nota-cand { z-index: 4; }

/* ---------------------------------------------------------------- Capitán Ancap (épico): carta de historieta
   Explosión amarilla con trama de puntos y líneas de acción negras, como la tapa de un cómic; pie negro y amarillo
   como el traje. */
.tarjeta.cand.cand-capitan-ancap .silueta, .ficha.ficha-capitan-ancap .ficha-agua { display: none; opacity: 0; }
.tarjeta.cand.cand-capitan-ancap .tarjeta-arte, .ficha.ficha-capitan-ancap .ficha-izq { background:
    radial-gradient(circle, rgba(0,0,0,.22) 1.3px, transparent 1.6px) 0 0 / 7px 7px,
    repeating-conic-gradient(from 0deg at 50% 55%, #111 0 2deg, transparent 2deg 14deg),
    radial-gradient(circle at 50% 55%, #fff6a8 0 18%, #ffd400 40%, #f5a300 100%);
  box-shadow: inset 0 0 0 4px #111, inset 0 0 0 7px #ffd400, inset 0 0 0 9px #111; }
.ficha.ficha-capitan-ancap .ficha-izq { box-shadow: inset 0 0 0 6px #111, inset 0 0 0 10px #ffd400, inset 0 0 0 13px #111; color: #111; }
.tarjeta.cand.cand-capitan-ancap .tarjeta-arte::before, .ficha.ficha-capitan-ancap .ficha-izq::before { content: "¡LIBERTAD!"; position: absolute; left: 8px; top: 10px; z-index: 3;
  padding: 2px 8px; transform: rotate(-8deg); background: #fff; border: 2px solid #111; border-radius: 4px; box-shadow: 3px 3px 0 #111;
  font: 800 13px var(--titulos); letter-spacing: .04em; color: #d4141c; }
.ficha.ficha-capitan-ancap .ficha-izq::before { left: 18px; top: auto; bottom: 120px; font-size: 18px; }
.tarjeta.cand.cand-capitan-ancap .tarjeta-pie { background: #111; border-top: 4px solid #ffd400; }
.tarjeta.cand.cand-capitan-ancap .tarjeta-pie .apellido { color: #ffd400; font-weight: 900; letter-spacing: .06em; text-shadow: 2px 2px 0 #d4141c; }
.tarjeta.cand.cand-capitan-ancap .tarjeta-pie .nombre, .tarjeta.cand.cand-capitan-ancap .tarjeta-pie .rol { color: #f3f3f3; }
.tarjeta.cand.cand-capitan-ancap .anio-pie { color: #ffd400; }
.ficha.ficha-capitan-ancap .ficha-nombre { color: #111; text-shadow: 2px 2px 0 #fff; }
.ficha.ficha-capitan-ancap .ficha-rol { color: #111; }
.ficha.ficha-capitan-ancap .ficha-anio { color: #d4141c; text-shadow: 2px 2px 0 #111; }
.tarjeta.cand.cand-capitan-ancap .retrato img, .ficha.ficha-capitan-ancap .ficha-foto img { filter: drop-shadow(4px 4px 0 #111); }

/* ---------------------------------------------------------------- El marco encima del retrato, solo en los cuadros dorados
   En los demás diseños (boleta, afiche, etc.) tapar el retrato quedaba mal: ahí la capa no se dibuja. */
.marco-arriba { display: none; }
.epoca-1850 .marco-arriba, .epoca-1880 .marco-arriba, .epoca-1900 .marco-arriba, .ficha-peron .marco-arriba, .cand-peron .marco-arriba,
.ficha-alfonsin .marco-arriba, .ficha-illia .marco-arriba, .cand-illia .marco-arriba, .cand-capitan-ancap .marco-arriba, .ficha-capitan-ancap .marco-arriba { display: block; }

/* ---------------------------------------------------------------- Illia (presidente 1963–1966): distinto de Balbín
   Sigue la trama de puntos de los 60, pero con un sol de rayos rojos y blancos de la UCR del Pueblo y el marco
   dorado de los presidentes. */
.tarjeta.cand.cand-illia .tarjeta-arte, .ficha.ficha-illia .ficha-izq { background:
    radial-gradient(circle, rgba(140,16,27,.16) 1.4px, transparent 1.7px) 0 0 / 9px 9px,
    radial-gradient(circle at 50% 68%, #fff 0 12%, rgba(255,255,255,0) 30%),
    repeating-conic-gradient(from 0deg at 50% 68%, #e0303a 0 8deg, #fff4ec 8deg 16deg); }
.tarjeta.cand.cand-illia .tarjeta-arte { box-shadow: inset 0 0 0 4px #c9a227, inset 0 0 0 6px #fff3c4, inset 0 0 0 8px #c9a227; }
.ficha.ficha-illia .ficha-izq { color: #7a0f1b; box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.ficha.ficha-illia .ficha-nombre, .ficha.ficha-illia .ficha-rol { color: #7a0f1b; text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255,255,255,.9); }
.ficha.ficha-illia .ficha-anio { color: #7a0f1b; text-shadow: 0 2px 0 #fff3c4; }
.tarjeta.cand.cand-illia .tarjeta-pie { background: #fff8ef; border-top: 4px solid #c9a227; }
.tarjeta.cand.cand-illia .tarjeta-pie .apellido { color: #b8132b; }
.tarjeta.cand.cand-illia .anio-pie { color: #b8132b; }
/* Capitán Ancap, ficha: arriba un panel amarillo liso (sin rayos) para que el nombre se lea; la explosión, abajo */
.ficha.ficha-capitan-ancap .ficha-izq { background:
    radial-gradient(circle, rgba(0,0,0,.2) 1.3px, transparent 1.6px) 0 0 / 7px 7px,
    linear-gradient(180deg, #ffe14d 0 30%, #111 30% calc(30% + 4px), transparent calc(30% + 4px)),
    repeating-conic-gradient(from 0deg at 50% 70%, #111 0 2deg, transparent 2deg 14deg),
    radial-gradient(circle at 50% 70%, #fff6a8 0 18%, #ffd400 40%, #f5a300 100%); }
.ficha.ficha-capitan-ancap .ficha-nombre { text-shadow: 3px 3px 0 #ffd400, 0 0 0 #111; -webkit-text-stroke: 0; }
.ficha.ficha-capitan-ancap .ficha-rol { font-weight: 700; }

/* ---------------------------------------------------------------- Cobos y Ricardo Alfonsín: diseño propio (2008 / 2011)
   Cobos: el campo de 2008, cielo celeste y un trigal dorado abajo, marco rojo radical. Ricardo: afiche de campaña
   2011, franjas diagonales rojas y un halo blanco detrás de la cabeza. */
.tarjeta.cand.cand-cobos .silueta, .tarjeta.cand.cand-ricardo-alfonsin .silueta { opacity: 0; }
.tarjeta.cand.cand-cobos .tarjeta-arte, .ficha.ficha-cobos .ficha-izq { background:
    radial-gradient(circle at 78% 20%, #fff6c2 0 6%, rgba(255,230,140,.6) 9%, transparent 16%),
    repeating-linear-gradient(96deg, transparent 0 6px, rgba(160,110,10,.35) 6px 7px) 0 100% / 100% 30% no-repeat,
    linear-gradient(180deg, transparent 0 70%, #e9b93a 70%, #c98d12 100%),
    linear-gradient(180deg, #4f97d6 0%, #a9d2f2 55%, #fdf0c8 70%); }
.tarjeta.cand.cand-cobos .tarjeta-arte { box-shadow: inset 0 0 0 4px #d7263d, inset 0 0 0 6px #fff, inset 0 0 0 8px #d7263d; }
.ficha.ficha-cobos .ficha-izq { color: #fff; box-shadow: inset 0 0 0 6px #d7263d, inset 0 0 0 9px #fff, inset 0 0 0 12px #d7263d; }
.ficha.ficha-cobos .ficha-nombre, .ficha.ficha-cobos .ficha-rol { color: #fff; text-shadow: 0 2px 0 #1f5a92, 0 0 10px rgba(0,0,0,.3); }
.ficha.ficha-cobos .ficha-anio { color: #fff6c2; text-shadow: 0 2px 0 #1f5a92; }
.tarjeta.cand.cand-cobos .tarjeta-pie { background: #fffaf0; border-top: 4px solid #e9b93a; }
.tarjeta.cand.cand-cobos .tarjeta-pie .apellido { color: #b8132b; }
.tarjeta.cand.cand-cobos .anio-pie { color: #c98d12; }

.tarjeta.cand.cand-ricardo-alfonsin .tarjeta-arte, .ficha.ficha-ricardo-alfonsin .ficha-izq { background:
    radial-gradient(circle at 50% 58%, #fff 0 24%, rgba(255,255,255,.6) 27%, transparent 31%),
    repeating-linear-gradient(-45deg, #d7263d 0 16px, #b51d2c 16px 32px); }
.tarjeta.cand.cand-ricardo-alfonsin .tarjeta-arte { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #8e1022; }
.ficha.ficha-ricardo-alfonsin .ficha-izq { color: #fff; box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 10px #8e1022; }
.ficha.ficha-ricardo-alfonsin .ficha-nombre, .ficha.ficha-ricardo-alfonsin .ficha-rol { color: #fff; text-shadow: 0 2px 0 #6a0b18; }
.ficha.ficha-ricardo-alfonsin .ficha-anio { color: #fff; text-shadow: 0 2px 0 #6a0b18; }
.tarjeta.cand.cand-ricardo-alfonsin .tarjeta-pie { background: #fff; border-top: 4px solid #d7263d; }
.tarjeta.cand.cand-ricardo-alfonsin .tarjeta-pie .apellido { color: #b51d2c; }
.tarjeta.cand.cand-ricardo-alfonsin .anio-pie { color: #d7263d; }

/* ---------------------------------------------------------------- De la Rúa (presidente 1999–2001): diseño propio
   En vez de la boleta del 99 que comparte con Storani, un afiche de presidente con los colores de la Alianza: cielo
   celeste con franjas blancas, sol tenue y marco dorado. */
.tarjeta.cand.cand-de-la-rua .tarjeta-arte, .ficha.ficha-de-la-rua .ficha-izq { background:
    radial-gradient(circle at 50% 64%, rgba(255,250,220,.95) 0 10%, rgba(255,240,180,.35) 22%, transparent 34%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 10px, transparent 10px 26px),
    linear-gradient(180deg, #1c86c8 0%, #32ccff 55%, #bfeeff 100%); }
.tarjeta.cand.cand-de-la-rua .tarjeta-arte { box-shadow: inset 0 0 0 4px #c9a227, inset 0 0 0 6px #fff3c4, inset 0 0 0 8px #c9a227; }
.ficha.ficha-de-la-rua.epoca-2001 .ficha-izq { color: #fff; box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.tarjeta.cand.cand-de-la-rua .tarjeta-arte::before, .ficha.ficha-de-la-rua.epoca-2001 .ficha-izq::after { display: none; }
.tarjeta.cand.cand-de-la-rua .retrato::before { display: none; }
.ficha.ficha-de-la-rua .ficha-nombre, .ficha.ficha-de-la-rua .ficha-rol { color: #fff; text-shadow: 0 2px 0 #0b5f8f, 0 0 10px rgba(0,0,0,.25); }
.ficha.ficha-de-la-rua.epoca-2001 .ficha-anio { color: #fff3c4; text-shadow: 0 2px 0 #0b5f8f; top: 22px; font-size: 26px; }
@media (min-width: 601px) {
  .ficha.ficha-de-la-rua.epoca-2001 .ficha-izq { padding-top: 80px; }
  .ficha.ficha-de-la-rua.epoca-2001 .ficha-izq .ficha-logo { top: 14px; right: 14px; left: auto; height: 52px; transform: none; }
}
.tarjeta.cand.cand-de-la-rua .tarjeta-pie { background: #f3fbff; border-top: 4px solid #c9a227; }
.tarjeta.cand.cand-de-la-rua .tarjeta-pie .apellido { color: #0b5f8f; }
.tarjeta.cand.cand-de-la-rua .anio-pie { color: #1c86c8; }
.cand-de-la-rua .marco-arriba, .ficha-de-la-rua .marco-arriba { display: block; }

/* ---------------------------------------------------------------- Raúl Alfonsín (presidente 1983–1989): carta propia
   La misma idea que su ficha: papel blanco, el círculo rojo de la campaña del 83 detrás de la cabeza con su aro
   blanco y el marco dorado de los presidentes (antes compartía el afiche de 1983 con Casella y Luder). */
.tarjeta.cand.cand-alfonsin .tarjeta-arte { background:
    radial-gradient(circle at 50% 60%, #d7263d 0 36%, #fff 36.5% 39.5%, #d7263d 40% 42.5%, transparent 43%),
    linear-gradient(180deg, #d7263d 0 8px, transparent 8px),
    repeating-linear-gradient(135deg, rgba(215,38,61,.05) 0 2px, transparent 2px 12px),
    #fbf8f2;
  box-shadow: inset 0 0 0 4px #c9a227, inset 0 0 0 6px #fff3c4, inset 0 0 0 8px #c9a227; }
.tarjeta.cand.cand-alfonsin .tarjeta-arte::before { display: none; }
.tarjeta.cand.cand-alfonsin .tarjeta-pie { background: #fbf8f2; border-top: 4px solid #c9a227; }
.tarjeta.cand.cand-alfonsin .tarjeta-pie .apellido { color: #8e1022; }
.tarjeta.cand.cand-alfonsin .anio-pie { color: #d7263d; }
.cand-alfonsin .marco-arriba { display: block; }

/* ---------------------------------------------------------------- Expresidentes: marco dorado encima del retrato
   Todos llevan el marco triple dorado (dorado, crema, dorado) dibujado por encima del personaje, y el retrato baja un
   poco para que el marco no le corte la cabeza. */
.presidente .marco-arriba { display: block; }
.tarjeta.cand.presidente .marco-arriba { box-shadow: inset 0 0 0 4px #c9a227, inset 0 0 0 6px #fff3c4, inset 0 0 0 8px #c9a227; }
.ficha.presidente .marco-arriba { box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.tarjeta.cand.presidente .retrato { height: 164px; }
/* Expresidentes: el retrato arranca debajo del marco de arriba (en la grilla de cartas va pegado arriba) */
.tarjeta.cand.presidente .retrato { top: 12px; bottom: auto; height: calc(100% - 12px); }

/* Raúl Alfonsín (legendario): carmesí profundo con rayos dorados, resplandor crema detrás de la cabeza y la cinta
   celeste y blanca de la democracia abajo; pie crema con filete dorado. Reemplaza el círculo rojo sobre blanco. */
.tarjeta.cand.cand-alfonsin .tarjeta-arte, .ficha.ficha-alfonsin.epoca-1983 .ficha-izq { background:
    radial-gradient(circle at 50% 46%, rgba(255,246,214,.95) 0 14%, rgba(255,214,110,.45) 28%, transparent 46%),
    linear-gradient(180deg, transparent 0 84%, #74acdf 84% 89%, #fff 89% 94%, #74acdf 94% 100%),
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,214,110,.32) 0 5deg, transparent 5deg 13deg),
    radial-gradient(ellipse at 50% 40%, #c4142a 0%, #8e0d1d 55%, #4f0610 100%); }
.ficha.ficha-alfonsin.epoca-1983 .ficha-izq { color: #fff; }
.ficha.ficha-alfonsin .ficha-nombre, .ficha.ficha-alfonsin .ficha-rol { color: #fff; text-shadow: 0 2px 0 #4f0610, 0 0 12px rgba(0,0,0,.35); }
.ficha.ficha-alfonsin .ficha-anio { color: #ffd34d; text-shadow: 0 2px 0 #4f0610; }
.tarjeta.cand.cand-alfonsin .tarjeta-pie { background: linear-gradient(180deg, #fff8e6, #f3e3bd); border-top: 4px solid #c9a227; }
.tarjeta.cand.cand-alfonsin .tarjeta-pie .apellido { color: #8e0d1d; text-shadow: 0 1px 0 #fff; }
.tarjeta.cand.cand-alfonsin .anio-pie { color: #b8860b; }

/* ---------------------------------------------------------------- Raúl Alfonsín: el balcón del 10 de diciembre de 1983
   Cortinados de terciopelo rojo con flecos dorados a los costados y arriba, el cielo de la Plaza con un sol que lo
   recorta por detrás y, abajo, la multitud en silueta con banderas celestes y blancas. */
.tarjeta.cand.cand-alfonsin .tarjeta-arte, .ficha.ficha-alfonsin.epoca-1983 .ficha-izq { background:
    /* multitud: dos filas de cabezas y el bloque de cuerpos */
    radial-gradient(circle at 50% 100%, #1f1430 0 9px, transparent 9.5px) 0 100% / 22px 16px repeat-x,
    radial-gradient(circle at 50% 100%, #2c1d40 0 8px, transparent 8.5px) 11px calc(100% - 9px) / 22px 16px repeat-x,
    /* banderitas */
    linear-gradient(180deg, #74acdf 0 33%, #fff 33% 66%, #74acdf 66%) 18% calc(100% - 22px) / 14px 10px no-repeat,
    linear-gradient(180deg, #74acdf 0 33%, #fff 33% 66%, #74acdf 66%) 74% calc(100% - 26px) / 14px 10px no-repeat,
    linear-gradient(180deg, #74acdf 0 33%, #fff 33% 66%, #74acdf 66%) 46% calc(100% - 30px) / 12px 9px no-repeat,
    /* cenefa de arriba con fleco dorado */
    linear-gradient(180deg, #6a0915 0 calc(100% - 4px), #e0b54a calc(100% - 4px)) 0 0 / 100% 9% no-repeat,
    /* cortinados laterales con pliegues */
    repeating-linear-gradient(90deg, #7a0b18 0 5px, #b5142a 5px 9px, #8e0d1d 9px 12px) 0 0 / 16% 100% no-repeat,
    repeating-linear-gradient(90deg, #8e0d1d 0 3px, #b5142a 3px 7px, #7a0b18 7px 12px) 100% 0 / 16% 100% no-repeat,
    linear-gradient(90deg, transparent 0 16%, #e0b54a 16% calc(16% + 2px), transparent calc(16% + 2px) calc(84% - 2px), #e0b54a calc(84% - 2px) 84%, transparent 84%),
    /* sol y cielo */
    radial-gradient(circle at 50% 48%, #fffbe8 0 12%, rgba(255,226,140,.75) 22%, rgba(255,226,140,0) 42%),
    linear-gradient(180deg, #5fa3dc 0%, #a8d4f2 55%, #f6e7c2 100%); }
.ficha.ficha-alfonsin.epoca-1983 .ficha-izq { color: #8e0d1d; }
.ficha.ficha-alfonsin .ficha-nombre { color: #8e0d1d; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255,255,255,.9); }
.ficha.ficha-alfonsin .ficha-rol { color: #4f0610; text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255,255,255,.9); }
.ficha.ficha-alfonsin .ficha-anio { color: #ffd34d; text-shadow: 0 2px 0 #4f0610; }
.tarjeta.cand.cand-alfonsin .retrato img, .ficha.ficha-alfonsin .ficha-foto img { filter: drop-shadow(0 6px 10px rgba(40,10,20,.45)); }

/* ---------------------------------------------------------------- Perón: el 17 de octubre en la Casa Rosada
   Fachada rosada con columnas detrás, guirnaldas de bandera celeste y blanca colgando arriba, un sol de mayo con
   rayos dorados detrás de la cabeza y la multitud con los brazos en alto abajo. */
.tarjeta.cand.cand-peron .tarjeta-arte, .ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    /* multitud: cabezas y brazos en alto */
    radial-gradient(circle at 50% 100%, #2a2238 0 9px, transparent 9.5px) 0 100% / 20px 15px repeat-x,
    radial-gradient(circle at 50% 100%, #3b3050 0 7px, transparent 7.5px) 10px calc(100% - 10px) / 20px 14px repeat-x,
    linear-gradient(80deg, transparent 0 46%, #3b3050 46% 54%, transparent 54%) 6px calc(100% - 20px) / 20px 16px repeat-x,
    /* guirnaldas celestes y blancas (festón) */
    radial-gradient(ellipse 50% 100% at 50% 0, #74acdf 0 55%, #fff 56% 72%, #74acdf 73% 88%, transparent 89%) 0 0 / 25% 22px repeat-x,
    /* sol de mayo */
    radial-gradient(circle at 50% 46%, #fff6c8 0 9%, #ffd34d 9.5% 12%, rgba(255,211,77,.55) 15%, transparent 30%),
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,211,77,.5) 0 4deg, transparent 4deg 12deg),
    /* columnas de la Casa Rosada */
    repeating-linear-gradient(90deg, #e9a99c 0 10px, #f6c7bc 10px 22px, #e9a99c 22px 26px, #d98f82 26px 30px),
    #f3bdb1; }
.ficha.ficha-peron.epoca-1940 .ficha-izq { color: #13315c; box-shadow: inset 0 0 0 6px #c9a227, inset 0 0 0 9px #fff3c4, inset 0 0 0 12px #c9a227; }
.ficha.ficha-peron .ficha-nombre { color: #13315c; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255,255,255,.95); }
.ficha.ficha-peron .ficha-rol { color: #13315c; text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255,255,255,.95); }
.ficha.ficha-peron .ficha-anio { color: #13315c; text-shadow: 0 2px 0 #fff3c4; }
.tarjeta.cand.cand-peron .tarjeta-pie { background: linear-gradient(180deg, #f4f9fe, #e3effa); border-top: 4px solid #c9a227; }
.tarjeta.cand.cand-peron .tarjeta-pie .apellido { color: #13315c; }
.tarjeta.cand.cand-peron .anio-pie { color: #b8860b; }
.tarjeta.cand.cand-peron .retrato img, .ficha.ficha-peron .ficha-foto img { filter: drop-shadow(0 6px 10px rgba(40,20,30,.4)); }
/* Perón, ajuste: menos ruido (sin rayos), columnas anchas, guirnaldas bien visibles y multitud más grande */
.tarjeta.cand.cand-peron .tarjeta-arte, .ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    radial-gradient(circle at 50% 100%, #2a2238 0 13px, transparent 13.5px) 0 100% / 28px 20px repeat-x,
    radial-gradient(circle at 50% 100%, #3d3352 0 11px, transparent 11.5px) 14px calc(100% - 14px) / 28px 20px repeat-x,
    linear-gradient(78deg, transparent 0 44%, #3d3352 44% 56%, transparent 56%) 9px calc(100% - 28px) / 56px 22px repeat-x,
    radial-gradient(ellipse 50% 100% at 50% 0, #4f8fcf 0 50%, #fff 51% 70%, #74acdf 71% 88%, transparent 89%) 0 12px / 20% 30px repeat-x,
    linear-gradient(180deg, #74acdf 0 12px, transparent 12px),
    radial-gradient(circle at 50% 50%, #fffbe6 0 14%, rgba(255,222,120,.7) 24%, rgba(255,222,120,0) 42%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.45) 46px 58px, rgba(170,80,70,.28) 58px 62px, transparent 62px 80px),
    linear-gradient(180deg, #f6c9bf, #eaa597); }

/* ---------------------------------------------------------------- Perón: el escudo peronista grande detrás
   El escudo del PJ (manos estrechadas, gorro frigio y laurel) centrado detrás del personaje con un velo claro para
   que él resalte, sobre franjas celestes y blancas con un resplandor; marco dorado de presidente. */
.tarjeta.cand.cand-peron .tarjeta-arte, .ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.35) 0 30%, rgba(255,255,255,.15) 60%, transparent 80%),
    url("../assets/logos/pj.png") 50% 62% / auto 82% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(255,246,200,.9) 0 18%, transparent 46%),
    linear-gradient(180deg, #74acdf 0 33%, #ffffff 33% 66%, #74acdf 66%); }
.ficha.ficha-peron.epoca-1940 .ficha-izq { background-size: auto, auto 78%, auto, auto; background-position: 0 0, 50% 70%, 0 0, 0 0; }
.ficha.ficha-peron .ficha-nombre { color: #13315c; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255,255,255,.95); }
.ficha.ficha-peron .ficha-rol { color: #13315c; text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255,255,255,.95); }
/* Perón, versión final: la carta ES el escudo peronista. Campo celeste arriba y claro abajo partidos en diagonal,
   rama de laurel verde con frutos rojos a la derecha, sol naciente dorado arriba y el marco dorado como borde. */
.tarjeta.cand.cand-peron .tarjeta-arte, .ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    /* frutos rojos del laurel */
    radial-gradient(circle, #d6324a 0 3.5px, transparent 4px) right 21px top 44px / 14px 46px repeat-y,
    /* hojas del laurel, a los dos lados del tallo */
    radial-gradient(ellipse 5px 11px at 70% 50%, #2e8b3a 0 95%, transparent 100%) right 18px top 30px / 14px 23px repeat-y,
    radial-gradient(ellipse 5px 11px at 30% 50%, #3aa14a 0 95%, transparent 100%) right 28px top 40px / 14px 23px repeat-y,
    linear-gradient(#2e8b3a, #2e8b3a) right 27px top 26px / 3px calc(100% - 40px) no-repeat,
    /* sol naciente dorado arriba */
    repeating-conic-gradient(from -90deg at 50% 0, #f2c94c 0 7deg, #ffe48a 7deg 14deg) 0 0 / 100% 13% no-repeat,
    linear-gradient(180deg, transparent calc(13% - 3px), #c9a227 calc(13% - 3px) 13%, transparent 13%),
    /* campos celeste y claro partidos en diagonal, con resplandor detrás de la cabeza */
    radial-gradient(circle at 48% 50%, rgba(255,255,255,.55) 0 16%, transparent 40%),
    linear-gradient(162deg, #2a8fe0 0 56%, #e9f1fb 56%); }
.ficha.ficha-peron .ficha-nombre { color: #fff; text-shadow: 0 2px 0 #13315c, 0 0 12px rgba(0,0,0,.25); }
.ficha.ficha-peron .ficha-rol { color: #fff; text-shadow: 0 1px 0 #13315c; }
.ficha.ficha-peron .ficha-anio { color: #13315c; text-shadow: 0 1px 0 #ffe48a; }

/* ---------------------------------------------------------------- Perón: el 17 de octubre de 1945 de fondo
   Ilustración de la Plaza de Mayo (la Casa Rosada, la multitud y los pies en la fuente) hecha a partir de la foto
   histórica; arriba un velo claro para que se lea el nombre en la ficha. Reemplaza el diseño del escudo. */
.tarjeta.cand.cand-peron .tarjeta-arte { background:
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 40%),
    url("../assets/fondos/peron-17-octubre.webp") 62% 40% / cover no-repeat, #e9b9ae; }
.ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0, rgba(255,255,255,.55) 24%, rgba(255,255,255,0) 42%),
    url("../assets/fondos/peron-17-octubre.webp") 50% 50% / cover no-repeat, #e9b9ae; }
.ficha.ficha-peron .ficha-nombre { color: #13315c; text-shadow: 0 2px 0 #fff, 0 0 12px rgba(255,255,255,.95); }
.ficha.ficha-peron .ficha-rol { color: #13315c; text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255,255,255,.95); }
.ficha.ficha-peron .ficha-anio { color: #13315c; text-shadow: 0 1px 0 #fff; }
.ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0, rgba(255,255,255,.55) 24%, rgba(255,255,255,0) 42%),
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.6) 0, rgba(255,248,225,.25) 60%, transparent 100%),
    radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(40,20,20,.35) 100%),
    url("../assets/fondos/peron-17-octubre.webp") 50% 50% / cover no-repeat, #e9b9ae; }
.tarjeta.cand.cand-peron .tarjeta-arte { background:
    radial-gradient(ellipse 45% 50% at 50% 60%, rgba(255,248,225,.55) 0, transparent 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(40,20,20,.35) 100%),
    url("../assets/fondos/peron-17-octubre.webp") 62% 40% / cover no-repeat, #e9b9ae; }
/* Perón, fondo más suave (versión desenfocada, aclarada y con menos contraste) y encuadrado en la fuente: se ven los
   pies en el agua a la izquierda y abajo, la Casa Rosada queda arriba. */
.ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    linear-gradient(180deg, rgba(255,255,255,.85) 0, rgba(255,255,255,.45) 24%, rgba(255,255,255,0) 40%),
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.55) 0, rgba(255,248,225,.2) 60%, transparent 100%),
    url("../assets/fondos/peron-17-octubre-suave.webp") 8% 78% / auto 150% no-repeat, #e9c3b8; }
.tarjeta.cand.cand-peron .tarjeta-arte { background:
    radial-gradient(ellipse 45% 50% at 50% 60%, rgba(255,248,225,.45) 0, transparent 100%),
    url("../assets/fondos/peron-17-octubre-suave.webp") 14% 82% / auto 175% no-repeat, #e9c3b8; }
.ficha.ficha-peron.epoca-1940 .ficha-izq { background-size: auto, auto, cover, auto; background-position: 0 0, 0 0, 14% 100%, 0 0; }
.tarjeta.cand.cand-peron .tarjeta-arte { background-size: auto, auto 115%, auto; background-position: 0 0, 18% 100%, 0 0; }
/* Perón: sin el degradé blanco de arriba; el nombre se lee con un contorno blanco */
.ficha.ficha-peron.epoca-1940 .ficha-izq { background:
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.5) 0, rgba(255,248,225,.18) 60%, transparent 100%),
    url("../assets/fondos/peron-17-octubre-suave.webp") 14% 100% / cover no-repeat, #e9c3b8; }
.ficha.ficha-peron .ficha-nombre, .ficha.ficha-peron .ficha-anio { color: #13315c;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 0 4px 8px rgba(0,0,0,.35); }
.ficha.ficha-peron .ficha-rol { display: inline-block; justify-self: center; width: max-content; max-width: 92%; margin-inline: auto; padding: 2px 10px; border-radius: 4px;
  background: rgba(19,49,92,.85); color: #fff; text-shadow: none; }

/* ---------------------------------------------------------------- Raúl Alfonsín: el cierre de campaña de 1983 de fondo
   Ilustración de la 9 de Julio repleta con el Obelisco, banderas rojas y blancas y el escenario con las banderas
   argentinas (versión suavizada). Reemplaza el balcón con cortinados. Sin degradé: el nombre lleva contorno blanco. */
.tarjeta.cand.cand-alfonsin .tarjeta-arte { background:
    radial-gradient(ellipse 45% 50% at 50% 60%, rgba(255,248,225,.45) 0, transparent 100%),
    url("../assets/fondos/alfonsin-cierre-1983.webp") 50% 100% / auto 120% no-repeat, #d9c3a5; }
.ficha.ficha-alfonsin.epoca-1983 .ficha-izq { background:
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.5) 0, rgba(255,248,225,.18) 60%, transparent 100%),
    url("../assets/fondos/alfonsin-cierre-1983.webp") 50% 100% / cover no-repeat, #d9c3a5; }
.ficha.ficha-alfonsin .ficha-nombre, .ficha.ficha-alfonsin .ficha-anio { color: #8e0d1d;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 0 4px 8px rgba(0,0,0,.35); }
.ficha.ficha-alfonsin .ficha-rol { display: inline-block; width: max-content; max-width: 92%; margin-inline: auto; padding: 2px 10px; border-radius: 4px;
  background: rgba(142,13,29,.88); color: #fff; text-shadow: none; }

/* ---------------------------------------------------------------- Roca: los oficiales a caballo en la pampa de fondo
   Ilustración basada en la pintura de Juan Manuel Blanes (versión suavizada). Reemplaza el emblema del PAN. Sin
   degradé: nombre con contorno blanco y el rol sobre una franja celeste del PAN. */
.tarjeta.cand.cand-roca .tarjeta-arte { background:
    radial-gradient(ellipse 45% 50% at 50% 60%, rgba(255,248,225,.45) 0, transparent 100%),
    url("../assets/fondos/roca-oficiales.webp") 50% 100% / auto 125% no-repeat, #e2cf9e; }
.ficha.ficha-roca.epoca-1880 .ficha-izq { background:
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.5) 0, rgba(255,248,225,.18) 60%, transparent 100%),
    url("../assets/fondos/roca-oficiales.webp") 50% 100% / cover no-repeat, #e2cf9e; }
.ficha.ficha-roca .ficha-nombre, .ficha.ficha-roca .ficha-anio { color: #0b5f8f;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 0 4px 8px rgba(0,0,0,.35); }
.ficha.ficha-roca .ficha-rol { display: inline-block; width: max-content; max-width: 92%; margin-inline: auto; padding: 2px 10px; border-radius: 4px;
  background: rgba(11,95,143,.88); color: #fff; text-shadow: none; }

/* ---------------------------------------------------------------- Yrigoyen: la asunción de 1916 de fondo
   Ilustración de la multitud y los granaderos el día que asumió (versión suavizada). Reemplaza el billete verde.
   Sin degradé: nombre con contorno blanco y el rol sobre una franja roja radical. */
.tarjeta.cand.cand-yrigoyen .tarjeta-arte { background:
    radial-gradient(ellipse 45% 50% at 50% 60%, rgba(255,248,225,.5) 0, transparent 100%),
    url("../assets/fondos/yrigoyen-asuncion-1916.webp") 50% 30% / auto 125% no-repeat, #d9c8a4; }
.ficha.ficha-yrigoyen .ficha-izq { background:
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.55) 0, rgba(255,248,225,.2) 60%, transparent 100%),
    url("../assets/fondos/yrigoyen-asuncion-1916.webp") 50% 30% / cover no-repeat, #d9c8a4; }
.ficha.ficha-yrigoyen .ficha-nombre, .ficha.ficha-yrigoyen .ficha-anio { color: #3a2a12;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 0 4px 8px rgba(0,0,0,.35); }
.ficha.ficha-yrigoyen .ficha-rol { display: inline-block; width: max-content; max-width: 92%; margin-inline: auto; padding: 2px 10px; border-radius: 4px;
  background: rgba(142,16,34,.88); color: #fff; text-shadow: none; font-family: var(--titulos); }

/* ---------------------------------------------------------------- Urquiza: el Palacio San José de fondo
   Ilustración de su palacio en Entre Ríos (versión suavizada). Reemplaza la bandera federal de fondo (la bandera
   queda como logo). Sin degradé: nombre azul federal con contorno blanco y el rol sobre una franja roja. */
.tarjeta.cand.cand-urquiza .tarjeta-arte { background:
    radial-gradient(ellipse 45% 50% at 50% 60%, rgba(255,248,225,.45) 0, transparent 100%),
    url("../assets/fondos/urquiza-palacio-san-jose.webp") 62% 50% / auto 115% no-repeat, #e8b7ae; }
.ficha.ficha-urquiza.epoca-1850 .ficha-izq { background:
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.5) 0, rgba(255,248,225,.18) 60%, transparent 100%),
    url("../assets/fondos/urquiza-palacio-san-jose.webp") 55% 50% / cover no-repeat, #e8b7ae; }
.ficha.ficha-urquiza .ficha-nombre, .ficha.ficha-urquiza.epoca-1850 .ficha-anio { color: #003a88;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 0 4px 8px rgba(0,0,0,.35); }
.ficha.ficha-urquiza .ficha-rol { display: inline-block; width: max-content; max-width: 92%; margin-inline: auto; padding: 2px 10px; border-radius: 4px;
  background: rgba(207,17,36,.88); color: #fff; text-shadow: none; }

/* ---------------------------------------------------------------- Sarmiento (presidente 1868–1874): el pizarrón
   El padre del aula: pizarrón verde con marco de madera, letras y cuentas en tiza y un sol de tiza detrás de la
   cabeza; retrato en sepia; marco dorado de presidente. Pisa el fondo genérico de 1850 (la bandera federal). */
.tarjeta.cand.cand-sarmiento .tarjeta-arte, .ficha.ficha-sarmiento.epoca-1850 .ficha-izq { background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.22) 0 14%, transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.07) 34px 35px),
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.08), transparent 50%),
    linear-gradient(160deg, #2f5d47, #234636 60%, #1b3a2c); }
.tarjeta.cand.cand-sarmiento .tarjeta-arte::before, .ficha.ficha-sarmiento.epoca-1850 .ficha-izq::before {
  content: "A B C   2 + 2 = 4"; display: block; position: absolute; left: 0; right: 0; top: 14px; transform: none; z-index: 1; text-align: center; background: none;
  font: 400 15px/1 "Comic Sans MS", "Segoe Print", cursive; letter-spacing: .14em; color: rgba(255,255,255,.55); white-space: pre; }
.ficha.ficha-sarmiento.epoca-1850 .ficha-izq::before { top: auto; bottom: 22px; font-size: 22px; }
.tarjeta.cand.cand-sarmiento .tarjeta-pie { background: linear-gradient(180deg, #f5ecd3, #e6d6ad); border-top: 5px solid #8a5a2b; }
.tarjeta.cand.cand-sarmiento .tarjeta-pie .apellido { color: #234636; }
.tarjeta.cand.cand-sarmiento .anio-pie { color: #8a5a2b; }
.ficha.ficha-sarmiento.epoca-1850 .ficha-izq { color: #fff; }
.ficha.ficha-sarmiento .ficha-nombre, .ficha.ficha-sarmiento .ficha-rol, .ficha.ficha-sarmiento.epoca-1850 .ficha-anio { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); font-family: var(--titulos); }

/* ---------------------------------------------------------------- Leandro N. Alem (legendario): rojo y blanco radical
   Franjas verticales rojas y blancas de la UCR envejecidas, resplandor crema detrás de la cabeza, retrato en sepia
   y marco dorado. Pisa el fondo genérico de 1880 (el emblema del PAN de Roca). */
.tarjeta.cand.cand-alem .tarjeta-arte, .ficha.ficha-alem.epoca-1880 .ficha-izq { background:
    radial-gradient(circle at 50% 56%, rgba(255,246,214,.95) 0 16%, rgba(255,246,214,.4) 28%, transparent 44%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(70,30,10,.35) 100%),
    repeating-linear-gradient(90deg, #b8232f 0 22px, #f3e7cf 22px 44px); }
.tarjeta.cand.cand-alem .tarjeta-pie { background: linear-gradient(180deg, #fff8e6, #f3e3bd); border-top: 4px solid #c9a227; }
.tarjeta.cand.cand-alem .tarjeta-pie .apellido { color: #8e1022; }
.tarjeta.cand.cand-alem .anio-pie { color: #b8232f; }
.ficha.ficha-alem .ficha-nombre, .ficha.ficha-alem.epoca-1880 .ficha-anio { color: #8e1022;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 0 4px 8px rgba(0,0,0,.3); }
.ficha.ficha-alem .ficha-rol { display: inline-block; width: max-content; max-width: 92%; margin-inline: auto; padding: 2px 10px; border-radius: 4px;
  background: rgba(142,16,34,.9); color: #fff; text-shadow: none; }

/* Sobre de Alem: afiche radical de 1891, franjas rojas y blancas gastadas, papel viejo y letras de imprenta. */
.bp-alem .bp-tapa, .bp-alem .bp-tapa.p2-tapa, .bp-alem .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, rgba(0,0,0,.22) 2px 4px), linear-gradient(#d23a43, #8e1022); }
.bp-alem .bp-cuerpo, .bp-alem .bp-cuerpo.p2-cuerpo { background: #f1e3c4; filter: sepia(.2); }
.bp-alem .bp-fondo { background:
    radial-gradient(circle at 50% 60%, rgba(255,250,230,.95) 0 18%, transparent 38%),
    repeating-linear-gradient(90deg, #b8232f 0 20px, #f1e3c4 20px 40px); opacity: .9; }
.bp-alem .bp-rayos, .bp-alem .bp-luz { display: none; }
.bp-alem .bp-deco { background: linear-gradient(180deg, #f1e3c4 0 21%, #8e1022 21% calc(21% + 3px), transparent calc(21% + 3px)); }
.bp-alem .bp-arte { filter: sepia(.6) contrast(1.05) drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.bp-alem .bp-marca small { color: #8e1022; text-shadow: none; font-family: Georgia, serif; text-transform: none; font-style: italic; letter-spacing: .12em; font-size: 11px; }
.bp-alem .bp-marca b { background: none; color: #8e1022; -webkit-text-stroke: 0; filter: none; font-family: Georgia, serif; letter-spacing: .1em; text-shadow: none; }
.bp-alem .bp-nombre b { color: #8e1022; font-family: Georgia, serif; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff; }
.bp-alem .bp-nombre small { color: #5a3a12; }
.bp-alem .bp-holo { opacity: .2; }
.tarjeta.cand.cand-sarmiento .tarjeta-pie .apellido { font-size: 23px; letter-spacing: 0; }
.bp-alem .bp-arte { height: 54%; }

/* ---------------------------------------------------------------- Alem: la bandera de la Unión Cívica (blanco, verde, rosa)
   Fondo de la carta y la ficha con las tres franjas de la bandera de 1890 (hasta que llegue la ilustración de la
   Revolución del Parque) y el sobre con los mismos colores. */
.tarjeta.cand.cand-alem .tarjeta-arte, .ficha.ficha-alem.epoca-1880 .ficha-izq { background:
    radial-gradient(circle at 50% 56%, rgba(255,255,255,.9) 0 14%, rgba(255,255,255,.35) 28%, transparent 44%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(40,30,20,.3) 100%),
    linear-gradient(180deg, #f7f3ea 0 33.3%, #22b14c 33.3% 66.6%, #ff9a96 66.6%); }
.tarjeta.cand.cand-alem .tarjeta-pie .apellido { color: #146b2e; }
.tarjeta.cand.cand-alem .anio-pie { color: #d9645e; }
.ficha.ficha-alem .ficha-nombre, .ficha.ficha-alem.epoca-1880 .ficha-anio { color: #146b2e; }
.ficha.ficha-alem .ficha-rol { background: rgba(20,107,46,.9); }
.bp-alem .bp-tapa, .bp-alem .bp-tapa.p2-tapa, .bp-alem .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.2) 2px 4px), linear-gradient(#3fc768, #168a39); }
.bp-alem .bp-fondo { background:
    radial-gradient(circle at 50% 60%, rgba(255,255,255,.95) 0 18%, transparent 38%),
    linear-gradient(180deg, #f7f3ea 0 33.3%, #22b14c 33.3% 66.6%, #ff9a96 66.6%); opacity: .95; }
.bp-alem .bp-deco { background: linear-gradient(180deg, #f7f3ea 0 21%, #146b2e 21% calc(21% + 3px), transparent calc(21% + 3px)); }
.bp-alem .bp-marca small, .bp-alem .bp-marca b, .bp-alem .bp-nombre b { color: #146b2e; }

/* Alem: la Revolución del Parque (1890) de fondo, suavizada; el moño de la Unión Cívica queda de logo */
.tarjeta.cand.cand-alem .tarjeta-arte { background:
    radial-gradient(ellipse 45% 50% at 50% 60%, rgba(255,248,225,.45) 0, transparent 100%),
    url("../assets/fondos/alem-revolucion-del-parque.webp") 50% 40% / auto 120% no-repeat, #d9c8a4; }
.ficha.ficha-alem.epoca-1880 .ficha-izq { background:
    radial-gradient(ellipse 34% 48% at 50% 66%, rgba(255,248,225,.5) 0, rgba(255,248,225,.18) 60%, transparent 100%),
    url("../assets/fondos/alem-revolucion-del-parque.webp") 50% 40% / cover no-repeat, #d9c8a4; }

/* ================================================================ Sobres de Yrigoyen, Alem, Roca y Urquiza, rehechos
   Como los de Perón y Alfonsín (que funcionan): afiche plano, colores vivos, la tipografía del juego, sin papel viejo
   ni sepia ni letras con serifa. Cada uno con su gráfica: rayos (Yrigoyen), franjas en diagonal (Alem), aros del PAN
   (Roca) y la bandera federal (Urquiza). Primero se limpia todo lo anterior. */
.bp-yrigoyen .bp-cuerpo, .bp-yrigoyen .bp-cuerpo.p2-cuerpo, .bp-alem .bp-cuerpo, .bp-alem .bp-cuerpo.p2-cuerpo,
.bp-roca .bp-cuerpo, .bp-roca .bp-cuerpo.p2-cuerpo, .bp-urquiza .bp-cuerpo, .bp-urquiza .bp-cuerpo.p2-cuerpo { filter: none; }
.bp-yrigoyen .bp-deco, .bp-alem .bp-deco, .bp-roca .bp-deco, .bp-urquiza .bp-deco { inset: 0; height: auto; border: 0; outline: 0; clip-path: none; background: none; }
.bp-yrigoyen .bp-deco::before, .bp-yrigoyen .bp-deco::after, .bp-alem .bp-deco::before, .bp-alem .bp-deco::after,
.bp-roca .bp-deco::before, .bp-roca .bp-deco::after, .bp-urquiza .bp-deco::before, .bp-urquiza .bp-deco::after,
.bp-urquiza .bp-fondo::after { display: none; }
.bp-yrigoyen .bp-rayos, .bp-yrigoyen .bp-luz, .bp-alem .bp-rayos, .bp-alem .bp-luz, .bp-roca .bp-rayos, .bp-roca .bp-luz,
.bp-urquiza .bp-rayos, .bp-urquiza .bp-luz { display: none; }
.bp-yrigoyen .bp-arte, .bp-alem .bp-arte, .bp-roca .bp-arte, .bp-urquiza .bp-arte { bottom: 14px; height: 62%; filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); }
.bp-yrigoyen .bp-almohada, .bp-alem .bp-almohada, .bp-roca .bp-almohada, .bp-urquiza .bp-almohada { opacity: .7; background:
    linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 20%, rgba(0,0,0,0) 80%, rgba(255,255,255,.12) 88%, rgba(0,0,0,.4) 100%); }
.bp-yrigoyen .bp-holo, .bp-alem .bp-holo, .bp-roca .bp-holo, .bp-urquiza .bp-holo { opacity: .3; }
.bp-yrigoyen .bp-marca, .bp-alem .bp-marca, .bp-roca .bp-marca, .bp-urquiza .bp-marca { top: 9px; left: 0; right: 0; transform: none; padding: 0; background: none; box-shadow: none; }
.bp-yrigoyen .bp-marca small, .bp-alem .bp-marca small, .bp-roca .bp-marca small, .bp-urquiza .bp-marca small {
  font: 800 10px var(--titulos); font-style: normal; letter-spacing: .3em; text-transform: uppercase; }
.bp-yrigoyen .bp-marca b, .bp-alem .bp-marca b, .bp-roca .bp-marca b, .bp-urquiza .bp-marca b {
  font: 800 30px/1 var(--titulos); font-style: normal; letter-spacing: .04em; background: none; -webkit-text-stroke: 0; filter: none; }
.bp-yrigoyen .bp-nombre, .bp-alem .bp-nombre, .bp-roca .bp-nombre, .bp-urquiza .bp-nombre { top: 62px; left: 0; right: 0; background: none; }
.bp-yrigoyen .bp-nombre b, .bp-alem .bp-nombre b, .bp-roca .bp-nombre b, .bp-urquiza .bp-nombre b {
  font: 800 34px/1 var(--titulos); font-style: italic; letter-spacing: .02em; background: none; -webkit-text-stroke: 0; filter: none; }
.bp-yrigoyen .bp-nombre small, .bp-alem .bp-nombre small, .bp-roca .bp-nombre small, .bp-urquiza .bp-nombre small { font: 700 10px var(--titulos); letter-spacing: .28em; }

/* Yrigoyen: rayos rojos y blancos desde abajo, faja bordó (como Perón pero radical) */
.bp-yrigoyen .bp-tapa, .bp-yrigoyen .bp-tapa.p2-tapa, .bp-yrigoyen .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.2) 2px 4px), linear-gradient(#fbe9e9, #e7b7b7); }
.bp-yrigoyen .bp-cuerpo, .bp-yrigoyen .bp-cuerpo.p2-cuerpo { background: #fff6f2; }
.bp-yrigoyen .bp-fondo { inset: 0; background: repeating-conic-gradient(from 0deg at 50% 100%, #d7263d 0 7deg, #fff6f2 7deg 14deg); }
.bp-yrigoyen .bp-deco { background: linear-gradient(transparent 82%, #8e1022 82% 100%); }
.bp-yrigoyen .bp-marca small { color: #8e1022; } .bp-yrigoyen .bp-marca b { color: #8e1022; text-shadow: 2px 2px 0 #fff; }
.bp-yrigoyen .bp-nombre b { color: #fff; text-shadow: 0 3px 0 #5a0711, 2px 2px 0 #8e1022; } .bp-yrigoyen .bp-nombre small { color: #8e1022; }

/* Alem: franjas blanca, verde y rosa en diagonal (como el arranque del sobre de Alfonsín), cinta verde abajo */
.bp-alem .bp-tapa, .bp-alem .bp-tapa.p2-tapa, .bp-alem .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.2) 2px 4px), linear-gradient(#3fc768, #168a39); }
.bp-alem .bp-cuerpo, .bp-alem .bp-cuerpo.p2-cuerpo { background: #fbf8f2; }
.bp-alem .bp-fondo { inset: 0; opacity: 1; background:
    repeating-linear-gradient(-45deg, #22b14c 0 14px, #fbf8f2 14px 28px, #ff9a96 28px 42px, #fbf8f2 42px 56px) left bottom / 100% 34% no-repeat,
    radial-gradient(rgba(34,177,76,.14) 1.4px, transparent 1.7px) 0 0 / 8px 8px; }
.bp-alem .bp-deco { background: linear-gradient(-14deg, transparent 0 40%, #22b14c 40% 44%, #fff 44% 48%, #ff9a96 48% 52%, transparent 52%); }
.bp-alem .bp-marca small { color: #146b2e; } .bp-alem .bp-marca b { color: #22b14c; text-shadow: 2px 2px 0 #146b2e; }
.bp-alem .bp-nombre b { color: #ff7a75; text-shadow: 2px 2px 0 #146b2e; } .bp-alem .bp-nombre small { color: #146b2e; }

/* Roca: aros celestes y blancos del PAN detrás de la cabeza sobre celeste, faja azul abajo */
.bp-roca .bp-tapa, .bp-roca .bp-tapa.p2-tapa, .bp-roca .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,40,90,.18) 2px 4px), linear-gradient(#e9f7fd, #8fd3f0); }
.bp-roca .bp-cuerpo, .bp-roca .bp-cuerpo.p2-cuerpo { background: #f2fbff; }
.bp-roca .bp-fondo { inset: 0; background:
    repeating-radial-gradient(circle at 50% 74%, #00a8e1 0 18px, #f2fbff 18px 32px); }
.bp-roca .bp-deco { background: linear-gradient(transparent 82%, #0b5f8f 82% 100%); }
.bp-roca .bp-marca small { color: #0b5f8f; text-shadow: none; } .bp-roca .bp-marca b { color: #0b5f8f; text-shadow: 2px 2px 0 #fff; }
.bp-roca .bp-nombre b { color: #fff; text-shadow: 0 3px 0 #073e5e, 2px 2px 0 #0b5f8f; } .bp-roca .bp-nombre small { color: #0b5f8f; }

/* Urquiza: la bandera federal entera y nítida (azul, blanco, azul con la franja roja), faja roja abajo */
.bp-urquiza .bp-tapa, .bp-urquiza .bp-tapa.p2-tapa, .bp-urquiza .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.2) 2px 4px), linear-gradient(#ff5b67, #cf1124); }
.bp-urquiza .bp-cuerpo, .bp-urquiza .bp-cuerpo.p2-cuerpo { background: #fff; }
.bp-urquiza .bp-fondo { inset: 0; background:
    linear-gradient(32deg, transparent 0 40%, #cf1124 40% 60%, transparent 60%),
    linear-gradient(180deg, #003a88 0 33.3%, #fff 33.3% 66.6%, #003a88 66.6%); }
.bp-urquiza .bp-deco { background: none; }
.bp-urquiza .bp-marca small { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .bp-urquiza .bp-marca b { color: #fff; text-shadow: 2px 2px 0 #cf1124; }
.bp-urquiza .bp-nombre b { color: #003a88; text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff; } .bp-urquiza .bp-nombre small { color: #003a88; }
.bp-yrigoyen .bp-arte, .bp-alem .bp-arte { height: 56%; }

/* ---------------------------------------------------------------- Elegir partido
   Seis tarjetas altas en fila (3×2 en el celular): fondo con los colores del partido y su logo de marca de agua,
   el logo en una placa blanca arriba, tres figuras del partido asomando desde abajo y el pie blanco con el nombre,
   la intención de voto y la cantidad de candidatos. La elegida se levanta, con borde dorado y tilde. */
.pt-grilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; width: min(1100px, 100%); margin: 6px auto 0; }
.pt-card { position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 4.6; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(165deg, var(--c1), var(--c2)); box-shadow: 0 6px 16px rgba(20,30,50,.18); transition: transform .18s, box-shadow .18s; text-align: center; }
.pt-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(20,30,50,.25); }
.pt-fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 22px); }
.pt-fondo img { position: absolute; right: -25%; top: 18%; width: 95%; opacity: .14; filter: brightness(0) invert(1); transform: rotate(-12deg); }
.pt-logo { position: relative; z-index: 2; align-self: center; margin-top: 12px; display: grid; place-items: center; height: 58px; min-width: 58%; max-width: 82%; padding: 6px 10px;
  border-radius: 10px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.pt-logo img { max-height: 46px; max-width: 100%; object-fit: contain; }
.pt-caras { position: relative; z-index: 1; flex: 1; min-height: 0; }
.pt-caras img { position: absolute; bottom: 0; height: 88%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); transition: transform .25s; }
.pt-caras.n3 .c0 { left: -6%; height: 72%; z-index: 1; } .pt-caras.n3 .c2 { right: -6%; height: 72%; z-index: 1; }
.pt-caras.n3 .c1 { left: 50%; transform: translateX(-50%); z-index: 2; }
.pt-caras.n2 .c0 { left: 2%; height: 80%; } .pt-caras.n2 .c1 { right: 2%; height: 80%; }
.pt-caras.n1 .c0 { left: 50%; transform: translateX(-50%); }
.pt-card:hover .pt-caras.n3 .c1 { transform: translateX(-50%) scale(1.04); }
.pt-pie { position: relative; z-index: 3; display: grid; gap: 3px; padding: 9px 6px 10px; background: #fff; border-top: 4px solid var(--c1); }
.pt-pie b { font: 800 16px/1.05 var(--titulos); letter-spacing: .03em; text-transform: uppercase; color: #1c2733; }
.pt-pie small { font: 600 11.5px var(--titulos); color: #5b6774; letter-spacing: .02em; }
.pt-pie small i { color: var(--c1); }
.pt-tilde { position: absolute; z-index: 4; top: 8px; right: 8px; width: 28px; height: 28px; display: none; place-items: center; border-radius: 50%;
  background: #ffd34d; color: #1c2733; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.pt-card.elegida { transform: translateY(-6px); box-shadow: 0 0 0 4px #ffd34d, 0 14px 28px rgba(20,30,50,.3); }
.pt-card.elegida .pt-tilde { display: grid; }
.pt-grilla:has(.elegida) .pt-card:not(.elegida) { filter: saturate(.55) brightness(.92); }
@media (max-width: 900px) { .pt-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%); } .pt-card { aspect-ratio: 3 / 3.9; } }
@media (max-height: 560px) { .pt-grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .pt-card { aspect-ratio: 3 / 4.2; }
  .pt-logo { height: 40px; margin-top: 8px; } .pt-logo img { max-height: 30px; } .pt-pie b { font-size: 12px; } .pt-pie small { font-size: 9.5px; } }
@media (max-width: 520px) { .pt-pie b { font-size: 13px; } .pt-pie small { font-size: 10px; } .pt-logo { height: 44px; } .pt-logo img { max-height: 32px; } }
/* Celular acostado: las seis en fila, más anchas, nombre en una línea y solo la intención de voto */
@media (max-height: 560px) {
  .pt-grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(780px, 100%); gap: 8px; }
  .pt-card { aspect-ratio: 3 / 3.7; }
  .pt-pie { padding: 5px 4px 6px; } .pt-pie b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pt-pie small .pt-cant { display: none; }
}

/* ---------------------------------------------------------------- Elegir partido: boletas electorales
   Papel blanco con la franja del partido arriba (año y número de lista), el logo grande, el nombre, el casillero
   "Presidente" con la foto del candidato y una línea de troquel. Apoyadas un poco torcidas sobre la mesa; la elegida
   se endereza, se levanta y lleva el sello rojo "Mi voto". */
.bo-mesa { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; width: min(1100px, 100%); margin: 8px auto 4px; padding: 8px 4px; }
.bo { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0 0 8px; border: 0; cursor: pointer; text-align: center;
  background: #fffdf8; color: #1c2733; border-radius: 3px; transform: rotate(var(--giro)); transition: transform .2s, box-shadow .2s;
  box-shadow: 0 1px 0 #e6dfd0, 0 6px 14px rgba(30,25,15,.18);
  background-image: radial-gradient(rgba(0,0,0,.025) 1px, transparent 1.2px); background-size: 4px 4px; }
.bo::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 30px; border-top: 2px dashed #cfc6b2; }
.bo:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 12px 22px rgba(30,25,15,.25); }
.bo-cab { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 5px; background: var(--c1); color: #fff; border-radius: 3px 3px 0 0;
  border-bottom: 4px solid var(--c2); }
.bo-cab small { font: 700 9px var(--titulos); letter-spacing: .14em; text-transform: uppercase; text-align: left; line-height: 1.1; max-width: 60%; }
.bo-cab b { font: 800 18px var(--titulos); letter-spacing: .04em; }
.bo-lista { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin: 6px 0 2px; }
.bo-lista small { font: 700 10px var(--titulos); letter-spacing: .2em; text-transform: uppercase; color: #6b7785; }
.bo-lista b { font: 800 22px var(--titulos); color: var(--c2); }
.bo-logo { display: grid; place-items: center; height: 74px; margin: 2px 10px 4px; }
.bo-logo img { max-height: 70px; max-width: 100%; object-fit: contain; }
.bo-nombre { min-height: 34px; display: grid; place-items: center; padding: 0 6px; font: 800 15px/1.05 var(--titulos); text-transform: uppercase; letter-spacing: .02em; color: #1c2733; }
.bo-cargo { margin: 6px 8px 0; padding: 2px 0; background: #1c2733; color: #fff; font: 700 10px var(--titulos); letter-spacing: .24em; text-transform: uppercase; }
.bo-cand { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 6px; margin: 0 8px; padding: 5px 6px; border: 1.5px solid #1c2733; border-top: 0; text-align: left; }
.bo-cand img { width: 40px; height: 44px; object-fit: cover; object-position: 50% 12%; background: var(--c1); border-radius: 2px; }
.bo-cand b { font: 700 12px/1.1 var(--titulos); color: #1c2733; }
.bo-pie { margin-top: 18px; font: 600 10px var(--titulos); color: #6b7785; letter-spacing: .03em; }
.bo-sello { position: absolute; left: 50%; top: 46%; z-index: 3; padding: 4px 12px; transform: translate(-50%, -50%) rotate(-14deg) scale(1.6); opacity: 0;
  border: 3px solid #c8102e; border-radius: 6px; color: #c8102e; font: 800 18px var(--titulos); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.55); transition: opacity .2s, transform .25s cubic-bezier(.2,1.6,.4,1); pointer-events: none; }
.bo.elegida { transform: rotate(0) translateY(-8px); box-shadow: 0 0 0 3px var(--c1), 0 16px 28px rgba(30,25,15,.3); }
.bo.elegida .bo-sello { opacity: .92; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
.bo-mesa:has(.elegida) .bo:not(.elegida) { opacity: .7; }
@media (max-width: 900px) { .bo-mesa { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(600px, 100%); gap: 14px; } }
@media (max-height: 560px) {
  .bo-mesa { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(820px, 100%); gap: 8px; }
  .bo-logo { height: 46px; } .bo-logo img { max-height: 42px; } .bo-nombre { font-size: 11px; min-height: 26px; }
  .bo-lista b { font-size: 16px; } .bo-cab b { font-size: 14px; } .bo-cab small { font-size: 7px; }
  .bo-cand { grid-template-columns: 26px 1fr; } .bo-cand img { width: 26px; height: 28px; } .bo-cand b { font-size: 9.5px; }
  .bo-pie { display: none; } .bo::after { display: none; } .bo-sello { font-size: 13px; }
}
.bo-sello { white-space: nowrap; top: 58%; }
@media (max-width: 900px) { .bo-logo { height: 56px; } .bo-logo img { max-height: 52px; } .bo-pie { display: none; } .bo::after { display: none; } .bo { padding-bottom: 6px; } }
.bo-sello { top: 30%; left: 72%; font-size: 14px; padding: 3px 8px; }
/* Boletas: sin atenuar las no elegidas; la elegida, enmarcada en su color y levantada */
.bo-mesa:has(.elegida) .bo:not(.elegida) { opacity: 1; }
.bo, .bo:hover { background-color: #fffdf8; opacity: 1; }
.bo.elegida { box-shadow: 0 0 0 4px var(--c1), 0 0 0 7px #fff, 0 18px 30px rgba(30,25,15,.32); }

/* ---------------------------------------------------------------- Elegir partido: un fondo propio para cada partido
   Sobre el degradé de siempre: una luz detrás del logo, viñeta en los bordes y la gráfica de cada uno. */
.tarjeta.partido .tarjeta-arte::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 18%, rgba(255,255,255,.08) 38%, transparent 55%),
              radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.28) 100%); }
.tarjeta.partido .tarjeta-arte > img { z-index: 1; }
.tarjeta.partido .tarjeta-arte::before { z-index: 0; }
/* LLA: estallido de rayos violeta y puntos dorados */
.tarjeta.partido[data-v="LLA"] .tarjeta-arte::before { background:
  radial-gradient(circle, rgba(255,214,90,.5) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
  repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.12) 0 6deg, transparent 6deg 15deg); }
/* Peronismo: franjas celestes y blancas y el sol detrás del escudo */
.tarjeta.partido[data-v="FP"] .tarjeta-arte { background: linear-gradient(180deg, #4f9fe0 0 33%, #eaf4fd 33% 67%, #4f9fe0 67%); }
.tarjeta.partido[data-v="FP"] .tarjeta-arte::before { background:
  repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,211,77,.45) 0 5deg, transparent 5deg 14deg); }
.tarjeta.partido[data-v="FP"] .marca-agua { filter: brightness(0) invert(.3) sepia(1) hue-rotate(170deg); opacity: .12; }
/* PRO: amarillo con trama de puntos y círculos concéntricos */
.tarjeta.partido[data-v="PRO"] .tarjeta-arte::before { background:
  radial-gradient(circle, rgba(255,255,255,.35) 1.5px, transparent 2px) 0 0 / 10px 10px,
  repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0 10px, transparent 10px 24px); }
/* UCR: franjas rojas y blancas verticales */
.tarjeta.partido[data-v="UCR"] .tarjeta-arte::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 16px, transparent 16px 32px); }
/* Otros: cinta con los colores de su logo cruzando en diagonal */
.tarjeta.partido[data-v="PU"] .tarjeta-arte::before { background:
  linear-gradient(-28deg, transparent 0 36%, rgba(47,143,216,.55) 36% 44%, rgba(255,255,255,.6) 44% 47%, rgba(215,38,61,.55) 47% 55%, rgba(34,177,76,.5) 55% 63%, transparent 63%); }
/* Izquierda: rojo con la esquina negra y estrellitas */
.tarjeta.partido[data-v="FIT"] .tarjeta-arte { background: linear-gradient(135deg, #e0303a 0 60%, #1b1b1b 60%); }
.tarjeta.partido[data-v="FIT"] .tarjeta-arte::before { background:
  radial-gradient(circle, rgba(255,255,255,.18) 1.4px, transparent 1.8px) 0 0 / 16px 16px; }
.tarjeta.partido[data-v="FIT"] .marca-agua, .tarjeta.partido[data-v="LLA"] .marca-agua { opacity: .06; }

/* Sobres de Alem y Roca, simplificados: un solo motivo detrás y texto con buen contraste */
/* Alem: rayos verdes y crema desde abajo (como Perón), faja rosa abajo */
.bp-alem .bp-fondo { opacity: 1; background: repeating-conic-gradient(from 0deg at 50% 100%, #2fbf5c 0 7deg, #f7f3ea 7deg 14deg); }
.bp-alem .bp-deco { background: linear-gradient(transparent 82%, #e8706b 82% 100%); }
.bp-alem .bp-marca small { color: #146b2e; }
.bp-alem .bp-marca b { color: #146b2e; text-shadow: 2px 2px 0 #fff; }
.bp-alem .bp-nombre b { color: #fff; text-shadow: 0 3px 0 #0e4d21, 2px 2px 0 #146b2e; }
.bp-alem .bp-nombre small { color: #146b2e; background: rgba(247,243,234,.85); padding: 1px 6px; border-radius: 3px; justify-self: center; }
/* Roca: azul noche con rayos celestes suaves detrás de la cabeza, letras doradas, sin faja */
.bp-roca .bp-cuerpo, .bp-roca .bp-cuerpo.p2-cuerpo { background: #0b2f55; }
.bp-roca .bp-fondo { background:
    radial-gradient(circle at 50% 68%, rgba(120,210,245,.55) 0 14%, transparent 42%),
    repeating-conic-gradient(from 0deg at 50% 68%, rgba(0,168,225,.32) 0 6deg, transparent 6deg 14deg),
    linear-gradient(180deg, #0b2f55, #12477a); }
.bp-roca .bp-deco { background: none; }
.bp-roca .bp-marca small { color: #9fdcf5; }
.bp-roca .bp-marca b { color: transparent; background: linear-gradient(180deg, #fff6c8 0%, #ffd34d 45%, #c98a00 55%, #ffe58a 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.bp-roca .bp-nombre b { color: #fff; text-shadow: 0 3px 0 #061a30, 2px 2px 0 #00a8e1; }
.bp-roca .bp-nombre small { color: #9fdcf5; }
.bp-roca .bp-tapa, .bp-roca .bp-tapa.p2-tapa, .bp-roca .bp-pie { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, rgba(0,0,0,.25) 2px 4px), linear-gradient(#2a8fd0, #0b2f55); }
.bp-roca .bp-arte { height: 56%; }

/* Pantallas con notch, isla o barra de inicio (iPhone, y Android con recortes): con viewport-fit=cover el fondo llega
   hasta los bordes y el contenido se queda en la zona segura. --sa-*: los márgenes que da el sistema (0 en la compu);
   --alto: el alto útil, que usan todas las pantallas en lugar de 100dvh. */
:root { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  --alto: calc(100dvh - var(--sa-t) - var(--sa-b)); }
body { box-sizing: border-box; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }
#modal { padding: max(16px, var(--sa-t)) max(16px, var(--sa-r)) max(16px, var(--sa-b)) max(16px, var(--sa-l)); }

/* Ingresar: el botón de Google ocupa el ancho de la ventana (hasta 260 px) y queda centrado. */
#cu-google { width: 100%; display: flex; justify-content: center; }

/* Eventos (descuentos y personajes destacados): cartel en el menú y en la tienda. */
.ev-banda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px auto 10px; max-width: 900px; }
.ev-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 0; border-radius: 999px; cursor: pointer; text-align: left;
  background: linear-gradient(90deg, #ffd23f, #ffb000); color: #3b2500; font: 500 13px var(--texto); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
.ev-item.destacado { background: linear-gradient(90deg, #7b3fb8, #b14fd0); color: #fff; }
.ev-item > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .35); font-size: 13px; }
.ev-item > b { font: 800 16px var(--titulos); letter-spacing: .02em; white-space: nowrap; }
.ev-item small { opacity: .8; white-space: nowrap; }
.ev-banda.chica .ev-item { font-size: 12px; padding: 5px 12px 5px 6px; }
@media (orientation: landscape) and (max-height: 520px) { .ev-banda.chica { margin: 0 auto 4px; } .ev-banda.chica .ev-item small { display: none; } }
.ti-tachado { opacity: .6; font-weight: 400; margin-right: 2px; }
a.mn-como { text-decoration: none; }
.ti-codigo { display: flex; gap: 8px; margin-bottom: 8px; }
.ti-codigo input { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid var(--borde); border-radius: 10px; font: 700 18px var(--titulos); letter-spacing: .08em; text-transform: uppercase; }