/* ===== ENCARGO 055 · Tarea 7 · Tu plan de carrera + Tu equipo (fila de dos) =====
   Copiado de la maqueta (sección «Tu plan de carrera» y «Tu equipo»). Rótulos a 12 px, no los 9-10 px de la maqueta (UX-17). */
.cg-fila3 { margin-top: 22px; }
.cg-plan { flex: 1 1 0; min-width: 0; padding: 20px 26px 22px; display: flex; flex-direction: column; justify-content: space-between; color: #172B26; }
.cg-plan.oculto, .cg-equipo.oculto { display: none; }
/* Sin huecos (055B · 6): si una de las dos no tiene datos, la otra toma la fila entera; si ninguna, la fila no existe. */
.cg-plan.oculto + .cg-equipo { flex: 1 1 auto; }
.cg-fila3:not(:has(> .cg-sup:not(.oculto))) { display: none; }
.cg-plan-riel { position: relative; overflow-x: auto; overflow-y: hidden; padding-top: 30px; margin-top: -30px; padding-bottom: 2px; } /* el relleno deja respirar el halo de la insignia actual: con overflow-x el eje y también recorta */
.cg-plan-hilo { position: absolute; left: 8%; right: 8%; top: 82px; height: 1px; background: rgba(128,98,48,.3); }
.cg-plan-fila { position: relative; display: flex; align-items: flex-start; gap: 4px; min-width: 520px; }
.cg-plan-rango { flex: 1 1 0; text-align: center; position: relative; }
.cg-plan-ins { display: inline-block; position: relative; }
.cg-plan-img { height: 80px; width: auto; display: block; position: relative; filter: drop-shadow(0 7px 12px rgba(60,42,18,.3)); }
.cg-plan-rango.futura .cg-plan-img { opacity: .62; }
.cg-plan-rango.actual .cg-plan-img { height: 118px; }
.cg-brillo-sm::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,134,.7) 0%, rgba(214,170,90,.3) 36%, rgba(214,170,90,0) 70%); animation: cg-resp 4.5s ease-in-out infinite; }
.cg-plan-nombre { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14.5px; font-weight: 500; color: #5F645C; line-height: 1.2; margin-top: 12px; }
.cg-plan-rango.actual .cg-plan-nombre { font-size: 17px; font-weight: 700; color: #172B26; }
.cg-plan-num { font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: #666B64; margin-top: 4px; }
.cg-plan-rango.actual .cg-plan-num { color: #806230; }
.cg-plan-sub { display: block; width: 46px; height: 2px; background: #B3945C; margin: 7px auto 0; }
.cg-plan-pie { text-align: center; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(128,98,48,.2); font-size: 12.5px; color: #5F645C; }
.cg-plan-pie strong { color: #172B26; }

.cg-equipo { flex: 0 0 352px; min-width: 0; padding: 20px 24px; background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); border-color: rgba(179,148,92,.45); color: #F3EBD9; }
.cg-eq-cab { display: flex; align-items: center; gap: 11px; margin: 3px 0 15px; }
.cg-eq-escudo { position: relative; flex: 0 0 auto; width: 34px; height: 34px; }
.cg-eq-hueco { width: 34px; height: 34px; border-radius: 50%; border: 1px dashed rgba(179,148,92,.6); display: flex; align-items: center; justify-content: center; color: #B3945C; box-sizing: border-box; }
.cg-eq-hueco svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cg-eq-escudo img { position: absolute; inset: 0; width: 34px; height: 34px; object-fit: contain; }
.cg-eq-nombre { font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #8CD6AA; overflow-wrap: anywhere; }
.cg-eq-k { display: block; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #93B3A8; margin-bottom: 7px; }
.cg-eq-u { letter-spacing: 1.2px; color: #7E9A92; }
.cg-eq-puesto { padding-bottom: 14px; border-bottom: 1px solid rgba(179,148,92,.22); }
.cg-eq-puesto-cifra { display: flex; align-items: baseline; gap: 9px; }
.cg-eq-de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: #A8C4BA; }
.cg-eq-dig { display: flex; align-items: flex-end; gap: 4px; min-height: 38px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 600; color: #F3EBD9; line-height: 1; }
.cg-eq-dig .cg-act-dig { height: 38px; }
.cg-eq-puesto .cg-eq-dig .cg-act-dig { height: 42px; }
.cg-eq-bote { padding-top: 14px; }
.cg-eq-cajitas { display: flex; gap: 8px; margin-top: 13px; }
.cg-eq-caja { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 7px; background: rgba(0,0,0,.2); border: 1px solid rgba(179,148,92,.2); }
.cg-eq-caja-k { display: block; font-size: 12px; letter-spacing: 1.3px; font-weight: 700; color: #7E9A92; margin-bottom: 4px; white-space: nowrap; }
.cg-eq-caja-v { font-variant-numeric: tabular-nums lining-nums; font-size: 17px; font-weight: 700; color: #F3EBD9; }
@media (prefers-reduced-motion: reduce) { .cg-brillo-sm::before { animation: none; } }
@media (max-width: 900px) {
  .cg-fila3 { margin-top: 18px; }
  .cg-plan { padding: 18px 16px; }
  .cg-equipo { flex: 1 1 auto; }
}

/* ===== ENCARGO 055 · Tarea 8 · Tus récords + En el coliseo =====
   Copiado de la maqueta (secciones «Tus récords» y «En el coliseo»). Rótulos y pies a 12 px, no los 9-10,5 px de la
   maqueta (UX-17). Los rótulos pueden partirse en dos líneas (a 12 px «MÁS MATRÍCULAS EN UN DÍA» no cabe en una celda de 1/5). */
.cg-rec-sec, .cg-col-sec { margin: 0 0 26px; }
.cg-rec-sec.oculto, .cg-col-sec.oculto { display: none; }
.cg-sec-cab { margin: 0 0 14px; }
.cg-rec { position: relative; display: flex; flex-wrap: nowrap; align-items: center; padding: 15px 4px; border-radius: 10px; border: 1px solid rgba(179,148,92,.4);
  background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); box-shadow: 0 12px 28px rgba(30,20,8,.26); }
.cg-rec::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168,142,100,.34), rgba(136,112,76,.5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cg-rec-celda { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 13px; padding: 0 20px; }
.cg-rec-sep { width: 1px; align-self: stretch; background: rgba(179,148,92,.26); }
.cg-rec-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(179,148,92,.14); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(179,148,92,.3); }
.cg-rec-celda.viva .cg-rec-ico { background: rgba(140,214,170,.16); box-shadow: inset 0 0 0 1px rgba(140,214,170,.45); }
.cg-rec-cuerpo { min-width: 0; }
.cg-rec-k { display: block; font-size: 12px; letter-spacing: 1.4px; font-weight: 700; color: #B3945C; margin-bottom: 5px; }
.cg-rec-celda.viva .cg-rec-k { color: #8CD6AA; }
.cg-rec-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
.cg-rec .cg-rec-cifra { min-height: 32px; gap: 4px; }
.cg-rec .cg-act-dig { height: 32px; }
.cg-rec .cg-act-pt { width: 5px; height: 5px; }
.cg-rec .cg-act-prefijo { font-size: 17px; color: #E8D5A8; }
.cg-rec-pie { font-size: 12px; color: #8CA49C; white-space: nowrap; padding-bottom: 4px; }
.cg-rec-link { font: inherit; font-size: 12px; color: #E8D5A8; white-space: nowrap; padding: 0 0 4px; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.cg-rec-link:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }

.cg-col-ver { margin-left: 8px; background: none; border: 0; padding: 0; font: 700 12px/1.2 var(--fuente); color: #806230; cursor: pointer; }
.cg-col-ver:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }
.cg-col { display: flex; gap: 16px; flex-wrap: nowrap; align-items: stretch; }
.cg-col-vacio { flex: 1; padding: 18px; border-radius: 10px; border: 1px dashed rgba(128,98,48,.35); color: #5F645C; font-size: 13px; text-align: center; }
/* Equipo: placa verde oscura, más ancha */
.cg-col-eq { flex: 1.25 1 0; min-width: 0; position: relative; padding: 18px 22px 17px; border-radius: 10px; border: 1px solid rgba(179,148,92,.5);
  background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); box-shadow: 0 12px 26px rgba(30,20,8,.3); }
.cg-col-remate { position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168,142,100,.34), rgba(136,112,76,.5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; }
.cg-col-rot { display: flex; align-items: center; gap: 9px; margin: 4px 0 11px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #8CD6AA; }
.cg-col-tit { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; font-weight: 600; color: #FAF7F0; line-height: 1.2; }
.cg-col-sub { font-size: 12.5px; color: #A8C4BA; margin-top: 8px; line-height: 1.45; }
/* Compañero: clara, barra dorada en el canto izquierdo, inicial en disco de piedra. Sin cifras. */
.cg-col-co { flex: 1 1 0; min-width: 0; display: flex; border-radius: 10px; overflow: hidden; border: 1px solid rgba(128,98,48,.32); background: #FAF7F0; box-shadow: 0 8px 20px rgba(60,42,18,.1); }
.cg-col-barra { flex: 0 0 6px; background: linear-gradient(180deg, #E2CC9A, #B3945C 50%, #806230); }
.cg-col-co-cuerpo { flex: 1 1 auto; min-width: 0; padding: 17px 20px 16px; display: flex; gap: 14px; align-items: flex-start; }
.cg-col-disco { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, #EFE7D6, #D6C7A6); display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 700; color: #806230; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cg-col-co-txt { min-width: 0; }
.cg-col-co-rot { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #806230; }
.cg-col-co-msg { display: block; font-size: 15px; color: #172B26; line-height: 1.4; overflow-wrap: anywhere; }
.cg-col-hace { display: block; font-size: 12px; color: #5F645C; margin-top: 8px; }
/* Tuyo: doble filo de oro, cartela «TÚ» colgando del borde, tu foto y la cifra en sillar. El único con montos y BEKY. */
.cg-col-mio { flex: 1 1 0; min-width: 0; position: relative; padding: 17px 20px 16px; border-radius: 10px; border: 2px solid #B3945C; background: linear-gradient(180deg, #FFFDF6, #F7EFDD); box-shadow: 0 10px 24px rgba(60,42,18,.16); }
.cg-col-borde { position: absolute; inset: 4px; border: 1px solid rgba(179,148,92,.4); border-radius: 6px; pointer-events: none; }
.cg-col-tu { position: absolute; top: -1px; right: 16px; padding: 5px 11px 6px; border-radius: 0 0 5px 5px; background: #B3945C; font-size: 12px; letter-spacing: 2px; font-weight: 800; color: #0B332B; }
.cg-col-mio-cab { display: flex; align-items: center; gap: 13px; }
.cg-col-foto { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #B3945C; display: block; object-fit: cover; object-position: 50% 14%; }
.cg-col-foto-mono { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EFE7D6, #D6C7A6); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 700; color: #806230; }
.cg-col-mio-rot { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #806230; }
.cg-col .cg-col-cifra { min-height: 34px; gap: 4px; }
.cg-col .cg-col-cifra .cg-act-dig { height: 34px; }
.cg-col .cg-col-cifra .cg-act-pt { width: 5px; height: 5px; }
.cg-col .cg-col-cifra .cg-act-prefijo { font-size: 17px; }
.cg-col-mio-beky { font-size: 12.5px; color: #172B26; margin-top: 12px; }
.cg-col-mio .cg-col-hace { margin-top: 7px; }
@media (max-width: 820px) {
  /* récords con scroll lateral propio, nunca de la página; los avisos se apilan */
  .cg-rec { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cg-rec-celda { flex: 0 0 72%; padding: 0 16px; }
  .cg-col { flex-direction: column; }
  .cg-col-eq, .cg-col-co, .cg-col-mio { flex: 1 1 auto; }
  .cg-col-ver { margin-left: 0; }
}
/* Títulos y filtros de estas dos secciones viven sobre la página (no sobre una tarjeta de marfil): toman el color del tema, como «Tu actividad». */
.cg-sec-cab .cg-sec { color: var(--texto); }
.cg-sec-cab .cg-jor-tab { color: var(--texto-2); border-color: var(--linea-2); }
.cg-sec-cab .cg-jor-tab.activo { background: #103C34; border-color: #103C34; color: #E8D5A8; }
.cg-col-ver { color: var(--oro-claro, #B3945C); }

/* ===== 060 · Piezas oscuras sobre el marfil =====
   Los tapetes de los juegos, la marquesina y las tarjetas del perfil siguen siendo oscuros (son
   arte de mesa y de credencial). Dentro de ellos los tokens vuelven a su valor oscuro, así el
   texto de siempre —var(--texto), var(--oro)…— se lee igual que antes del cambio de piel. */
.tm-caja, .rodillos-juego, .marquesina, .bj-pano, .dados-pano, .coh-pano, .min-pano, .rul-pano,
.pk-pano, .cy-pano, .tri-pano, .bg-pano, .pm-credencial, .pm-hoja, .tarjeta-grado, .ascenso,
.pm-disco.cerrado, .pm-monograma, .mini-retrato, .pm-foto-fila .m, .podio-col.p1 .base, .pm-marca-sup, .pm-miembro, .pm-volver {
  --texto: var(--tapete-texto); --texto-2: var(--tapete-texto-2); --tenue: var(--tapete-tenue);
  --apagado: var(--tapete-tenue);
  --oro: var(--tapete-oro); --oro-claro: var(--tapete-oro-cl); --oro-oscuro: var(--tapete-oro-os);
  --oro-tinta: var(--tapete-tinta);
  --superficie: var(--tapete-sup); --superficie-2: var(--tapete-sup-2); --sup-3: var(--tapete-sup-3);
  --linea: var(--tapete-linea); --linea-2: var(--tapete-linea-2);
  --rojo: var(--tapete-rojo); --verde: var(--tapete-verde); --rojo-claro: var(--tapete-rojo);
  color: var(--texto);
}

/* ENCARGO 055B · punto 5 y 9: «Tu jornada» compacta (filas de misión como la maqueta) y «Tus tareas de hoy» como panel propio al final.
   .cg-sr = texto solo para lector de pantalla (el contador «2/3» de las misiones ya no se ve, sale en las pastillas). */
.cg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cg-jornada .mision { padding: 11px 0; gap: 13px; align-items: center; border-width: 0 0 1px 0; }
.cg-jornada .mision .marca { width: 22px; height: 22px; flex: 0 0 22px; font-size: 12px; }
.cg-jornada .mision .titulo { font-weight: 400; }
.cg-jornada .mision.cumplida .titulo { text-decoration: none; }
.cg-jornada .mision .barra.fina { height: 4px; }
/* «Tus tareas de hoy» (055B punto 9): portado de la maqueta tareas_panel.html (bloque .tt-*), con prefijo cg-tt-. Textos a 12 px mínimo (UX-17), no los 9,5 de la maqueta. */
.cg-tt-sec { margin: 30px 0 26px; }
.cg-tt-panel { padding: 20px 26px 18px; color: #172B26; }
.cg-tt-panel .vacio { color: #5F645C; }
.cg-tt-res { display: flex; align-items: center; gap: 26px; padding: 4px 2px 16px; border-bottom: 1px solid rgba(128,98,48,.2); }
.cg-tt-bloque { display: flex; align-items: flex-end; gap: 10px; }
.cg-tt-bloque .de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: #5F645C; padding-bottom: 3px; white-space: nowrap; }
.cg-tt-cifra .cg-act-dig { height: 40px; }
.cg-tt-bloque.salto .cg-tt-cifra { animation: tarea-salto .55s ease; }
.cg-tt-sepv { width: 1px; align-self: stretch; background: rgba(128,98,48,.2); }
.cg-tt-medio { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-width: 220px; }
.cg-tt-linea { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #5F645C; }
.cg-tt-linea b { color: #172B26; }
.cg-tt-linea b.bronce, .cg-tt-faltan b.bronce { color: #806230; }
.cg-tt-linea b.bronce { font-size: 15px; }
.cg-tt-barra { position: relative; height: 10px; border-radius: 999px; background: rgba(128,98,48,.15); box-shadow: inset 0 1px 2px rgba(80,62,34,.18); }
.cg-tt-barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #B3945C, #806230); transition: width .5s ease; }
.cg-tt-faltan { font-size: 12.5px; color: #5F645C; white-space: nowrap; }
.cg-tt-faltan b { color: #172B26; }
.cg-tt-listo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #1F6349; }
.cg-tt-rejilla { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
.cg-tt-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid rgba(128,98,48,.14); min-height: 52px; }
.cg-tt-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #EDF1EC; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cg-tt-txt { flex: 1 1 0; min-width: 0; display: block; margin: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
button.cg-tt-txt { cursor: pointer; }
.cg-tt-tit { display: block; font-size: 13.5px; color: #172B26; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-tt-sub { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 1.2px; font-weight: 700; color: #666B64; text-transform: uppercase; }
.cg-tt-sub .mal { color: #B4472F; letter-spacing: .2px; font-size: 12px; font-weight: 600; text-transform: none; }
.cg-tt-premio { flex: 0 0 auto; font-family: var(--fuente); font-size: 12.5px; font-weight: 800; color: #806230; font-variant-numeric: tabular-nums lining-nums; min-width: 30px; text-align: right; }
.cg-tt-acc { flex: 0 0 auto; width: 132px; display: flex; justify-content: flex-end; }
.cg-tt-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(179,148,92,.55); background: transparent; color: #806230; font-family: var(--fuente); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.cg-tt-btn:hover { background: rgba(179,148,92,.12); }
.cg-tt-btn:focus-visible, button.cg-tt-txt:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }
.cg-tt-marca { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cg-tt-check { width: 22px; height: 22px; border-radius: 50%; background: #2E7A62; display: flex; align-items: center; justify-content: center; }
.cg-tt-fila.hecha .cg-tt-tit { color: #666B64; text-decoration: line-through; text-decoration-color: rgba(142,147,139,.6); }
.cg-tt-fila.hecha .cg-tt-ico { background: #E4EFE8; }
.cg-tt-fila.hecha .cg-tt-premio { color: #666B64; }
.cg-tt-fila.vencida { opacity: .55; }
.cg-tt-desc { flex: 1 0 100%; padding: 6px 4px 4px 48px; font-size: 13px; line-height: 1.4; color: #5F645C; }
.cg-tt-desc[hidden] { display: none; }
.cg-tt-nota { margin-top: 12px; font-size: 12px; color: #666B64; line-height: 1.5; }
@media (max-width: 900px) {
  .cg-tt-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cg-tt-panel { padding: 16px 14px; }
  .cg-tt-res { flex-wrap: wrap; gap: 12px 18px; }
  .cg-tt-sepv { display: none; }
  .cg-tt-cifra .cg-act-dig { height: 32px; }
  .cg-tt-fila { row-gap: 8px; }
  .cg-tt-txt { flex: 1 1 calc(100% - 100px); }
  .cg-tt-sub { white-space: normal; line-height: 1.5; }
  .cg-tt-tit { white-space: normal; }
  .cg-tt-acc { width: 100%; justify-content: flex-start; padding-left: 48px; }
  .cg-tt-btn { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cg-tt-bloque.salto .cg-tt-cifra { animation: none; } .cg-tt-barra > span { transition: none; } }
/* Récords de la casa (057 B): tira entre el podio y la tabla. */
.records-casa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; padding: 14px; border: 1px solid rgba(212, 176, 106, .3); border-radius: 12px; background: rgba(125, 187, 145, .06); }
.records-casa.oculto { display: none; }
.record { text-align: center; padding: 4px 6px; }
.record-etiqueta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.record-cifra { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 48px; font-weight: 700; line-height: 1.05; margin: 4px 0; }
.record-quien { font-size: 12px; color: var(--apagado); }
.record.halo .record-cifra { color: var(--oro-claro); text-shadow: 0 0 14px rgba(212, 176, 106, .75), 0 0 28px rgba(212, 176, 106, .35); }

/* El Muro (057 D): hitos en paneles del sistema, sin fondos propios. */
.muro { margin-top: 16px; }
.muro-titulo { font-family: 'Cormorant Garamond', Georgia, serif; margin: 0; }
.muro-lista { display: grid; gap: 10px; margin: 14px 0; }
.hito { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .04); }
.hito.mio { border-color: rgba(212, 176, 106, .45); }
.hito-cuerpo { flex: 1; min-width: 0; }
.hito-nombre { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hito-texto { font-size: 12px; letter-spacing: .06em; font-variant: small-caps; margin: 2px 0 8px; }
.hito-fecha { font-size: 12px; color: var(--apagado); white-space: nowrap; }
.hito-aplauso { border: 1px solid var(--linea); background: rgba(255, 255, 255, .05); color: var(--texto); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.hito-aplauso.on { background: var(--oro); border-color: var(--oro); color: var(--oro-tinta); }

/* ENCARGO 058 · Global Party: ruleta, cofres, juegos y duelos apilados en una sola pantalla */
.party-bloque { margin-top: 22px; }
.party-titulo { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
/* 071 · T3: en Mi ruta la pestaña ya dice «Retos»; el rótulo suelto se esconde (el nodo queda por las pruebas) */
#rutaRetos > .party-titulo { display: none; }
.party-pie { margin-top: 22px; text-align: center; }

/* 064 · TAREA 1 — cabecera de página de Global Party (pieza compartida CGP.cabeceraPagina; la mayoría del CSS vive en
   coliseo_paginas.css). Aquí solo lo propio de Party: el estado de las salas, la cuenta atrás y los pies de la placa. */
.party-cab { margin-bottom: 18px; border-radius: 12px; overflow: hidden; }
.cg-lema-fila { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cg-estado { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border-radius: 999px; font-family: var(--fuente); font-style: normal;
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px; white-space: nowrap; }
.cg-estado.abierto { background: rgba(46, 122, 98, .14); color: var(--cg-ok); box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .35); }
.cg-estado.cerrado { background: rgba(250, 247, 240, .8); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .4); }
.cg-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--cg-verde-vivo); box-shadow: 0 0 0 3px rgba(46, 122, 98, .18); }
.cg-party-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; font: 600 12px/1.4 var(--fuente); color: var(--cg-texto-2); }
.cg-cuenta b { color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-party-nota { max-width: 640px; margin-top: 8px; font: 400 12px/1.45 var(--fuente); color: var(--cg-texto-2); }
.cg-placa-barra { width: 168px; margin-top: 11px; }
.cg-placa-barra.ancha { width: 190px; }
.cg-placa-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--cg-texto-2); white-space: nowrap; }
.cg-placa-pie strong { color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-placa-pie strong.cg-bronce { color: var(--cg-bronce-osc); }
.cg-placa-beky { display: block; margin-top: 3px; }
.salas-tabs[hidden] { display: none; }   /* 064: las pestañas de la cabecera lo reemplazan */
@media (max-width: 820px) { .cg-placa-barra, .cg-placa-barra.ancha { width: 100%; } }

/* 068 · TAREA 1 — cabecera de Mi ruta (misma pieza CGP.cabeceraPagina). La cifra de cada celda es «N» en piedra y «de M» en
   Cormorant al lado, como la maqueta ruta_hoy. */
.cg-placa-cifra { display: flex; align-items: flex-end; gap: 9px; }
.cg-placa-de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; line-height: 1; color: var(--cg-texto-2); padding-bottom: 3px; }

/* 064 · TAREA 2 — los 13 juegos (porte de gp_juegos). `.cg-pagina` es el lienzo marfil de la página; las piezas `.cg-*` son las de la
   maqueta con prefijo. La mesa que se abre al tocar «Jugar» no se toca: solo hereda el lienzo. Textos chicos de la maqueta (10-11 px) en 12. */
.cg-pagina { background: var(--cg-marfil); border-radius: 12px; padding: 26px 32px 40px; font-family: var(--fuente); color: var(--cg-texto); }
.cg-cab { display: flex; align-items: center; gap: 20px; margin: 0 0 14px; }
.cg-hilo { flex-grow: 1; height: 1px; background: rgba(128, 98, 48, .28); }
.cg-sec { margin: 0; font-family: var(--fuente-titulos); font-size: 31px; font-weight: 600; line-height: 1; color: var(--cg-texto); text-transform: none; letter-spacing: 0; }
.cg-rot { font-size: 12px; letter-spacing: 2.6px; font-weight: 700; color: var(--cg-bronce-osc); text-transform: uppercase; }
.cg-k { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: var(--cg-verde-dato); text-transform: uppercase; white-space: nowrap; }
.cg-sup { position: relative; background: var(--cg-superficie); border: 1px solid rgba(128, 98, 48, .34); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px rgba(60, 42, 18, .14); }
.cg-sup::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: var(--cg-sillar); background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.cg-sup > * { position: relative; }
.cg-sup.cg-verde { background: linear-gradient(180deg, var(--cg-verde-2) 0%, var(--cg-verde) 55%, var(--cg-verde-borde) 100%); border-color: rgba(179, 148, 92, .45);
  box-shadow: 0 12px 28px rgba(30, 20, 8, .26); color: var(--cg-marfil); }
.cg-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.cg-j-tags .cg-tag { max-width: 100%; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal; }
.cg-destacado .cg-k { white-space: normal; }
.cg-tag.gris { background: var(--cg-papel-3); color: var(--cg-texto-2); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-tag.bronce { background: rgba(179, 148, 92, .14); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .38); }
.cg-tag.lleno { background: var(--cg-verde-lleno); color: var(--cg-superficie-alta); }
.cg-btn-pri { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; margin: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, var(--cg-bronce), var(--cg-bronce-osc)); color: var(--cg-superficie-alta); font: 700 13px/1 var(--fuente); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(96, 72, 32, .28); }
.cg-btn-pri:disabled { background: var(--cg-papel-3); color: var(--cg-texto-3); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .18); cursor: default; }
.cg-rejilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cg-juego { display: flex; flex-direction: column; padding: 20px 18px 14px; }
.cg-juego.abierta { border-color: var(--cg-bronce); box-shadow: 0 0 0 2px var(--cg-bronce), 0 12px 28px rgba(60, 42, 18, .14); }
.cg-j-cab { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.cg-j-ico { flex: 0 0 auto; position: relative; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(from -7.5deg, var(--cg-verde) 0 30deg, var(--cg-ficha) 30deg 45deg);
  box-shadow: inset 0 0 0 2px var(--cg-ficha-filo), inset 0 0 0 3px rgba(255, 243, 208, .35), 0 4px 10px rgba(60, 42, 18, .22); }
.cg-j-ico::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, var(--cg-superficie-alta) 0%, var(--cg-papel-3) 62%, var(--cg-sillar) 100%);
  box-shadow: 0 0 0 1.5px var(--cg-bronce), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(60, 42, 18, .13); }
.cg-j-ico svg { position: relative; }
.cg-juego h3 { margin: 0; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; line-height: 1.08; letter-spacing: 0; text-transform: none; color: var(--cg-texto); overflow-wrap: anywhere; }
.cg-j-desc { margin: 13px 0 0; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2); }
.cg-j-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 22px; }
.cg-juego .cg-j-pie { position: static; display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-apuesta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-apuesta small { font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); letter-spacing: .4px; }
/* El botón de «Jugar» estira su toque a toda la carta (::after): un asesor en celular no tiene que apuntar al enlace. */
.cg-accion { margin: 0 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1.2 var(--fuente); color: var(--cg-bronce-osc); }
.cg-accion::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.cg-accion:focus-visible { outline: none; }
.cg-accion:focus-visible::after { outline: 2px solid var(--cg-bronce); outline-offset: -2px; }
.cg-accion:disabled { color: var(--cg-texto-3); font-weight: 600; font-size: 12px; cursor: default; }
.cg-juego.apagado .cg-j-ico { filter: saturate(.35); opacity: .85; }
.cg-destacado { grid-column: span 3; display: flex; align-items: center; gap: 22px; padding: 20px 24px 18px; }
.cg-medallon { flex: 0 0 auto; position: relative; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(from -7.5deg, var(--cg-verde-borde) 0 30deg, var(--cg-ficha) 30deg 45deg);
  box-shadow: inset 0 0 0 2px var(--cg-ficha-filo), 0 0 0 4px rgba(179, 148, 92, .18), 0 0 30px rgba(214, 170, 90, .35); }
.cg-medallon::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, var(--cg-verde-vivo), var(--cg-verde-borde) 75%); box-shadow: 0 0 0 1.5px var(--cg-bronce); }
.cg-medallon svg { position: relative; }
.cg-destacado h3 { margin: 0; font-size: 29px; color: var(--cg-superficie); }
.cg-destacado p { margin: 9px 0 0; max-width: 440px; font-size: 12.5px; line-height: 1.5; color: var(--cg-texto-verde); }
.cg-destacado-datos { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cg-destacado-datos > div { display: flex; gap: 8px; }
.cg-interna { min-width: 104px; padding: 9px 10px; border-radius: 7px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(179, 148, 92, .2); }
.cg-interna.pozo { min-width: 156px; }
.cg-interna .cg-k { margin-bottom: 4px; font-size: 12px; letter-spacing: 1.3px; color: var(--cg-texto-verde-3); }
.cg-interna b { font-size: 24px; font-weight: 700; color: var(--cg-marfil); font-variant-numeric: tabular-nums lining-nums; }
.cg-nota-pie { margin: 16px 2px 0; font-size: 12px; color: var(--cg-texto-3); }
@media (max-width: 820px) {
  .cg-pagina { padding: 18px 12px 28px; }
  .cg-cab { flex-wrap: wrap; gap: 6px 14px; }
  .cg-hilo { display: none; }
  .cg-cab .cg-rot { flex-basis: 100%; order: 3; line-height: 1.6; }
  .cg-sec { font-size: 27px; }
  .cg-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cg-juego { padding: 16px 12px 12px; }
  .cg-j-cab { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; }
  .cg-j-ico { width: 50px; height: 50px; }
  .cg-juego h3 { font-size: 19px; }
  .cg-j-desc { display: none; }
  .cg-juego .cg-j-pie { flex-wrap: wrap; }
  .cg-destacado { grid-column: 1 / -1; flex-wrap: wrap; }
  .cg-destacado-datos { align-items: stretch; width: 100%; }
  .cg-destacado-datos .cg-btn-pri { width: 100%; }
}

/* 064 · TAREA 3 — la ruleta (porte de gp_ruleta). El dibujo de la rueda es JS (ruedaColiseo); aquí van el marco, la aguja, la leyenda y la
   tarjeta verde «Tu giro». Los ids y las clases que casino.js busca (.rueda-caja, .aguja, .rueda-hub, .boton-girar, .lista-simple) siguen. */
.cg-gema { flex: 0 0 auto; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; }
.cg-gema.comun { background: #B9B3A4; box-shadow: inset 0 0 0 1px rgba(60, 42, 18, .25); }
.cg-gema.raro { background: var(--cg-verde-lleno); }
.cg-gema.epico { background: linear-gradient(135deg, var(--cg-bronce-brillo), var(--cg-bronce-osc)); }
.cg-gema.legendario { background: linear-gradient(135deg, #FFF3C4, #D9A93F 55%, #8A6215); box-shadow: 0 0 8px rgba(217, 169, 63, .8); }
.cg-ruleta-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-ruleta-caja { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 36px; padding: 26px 34px 22px; }
.cg-rueda-col { flex: 0 0 auto; width: min(540px, 58%); min-width: 0; margin: -20px; }
.cg-ruleta .rueda-envoltura { display: block; }
.cg-ruleta .rueda-caja { width: 100%; max-width: 560px; margin: 0 auto; }
.cg-ruleta .rueda-caja canvas { filter: none; }   /* la sombra ya va dentro del dibujo */
/* La aguja es el SVG de AGUJA_COLISEO: su viewBox es 60 x 96 sobre una rueda de 660, así que mide el 9,09 % de la caja y su punta
   (y = -226) entra unos píxeles en las casillas; el top es la posición de su borde superior (y = -318) en ese mismo marco. */
.cg-ruleta .aguja { top: 1.82%; width: 9.09%; height: auto; border: 0; filter: none; transform-origin: 50% 20%; }
.cg-ruleta .aguja svg { width: 100%; height: auto; }
.cg-ruleta .rueda-beki { width: 11.5%; }
.cg-leyenda { flex: 1 1 0; min-width: 0; }
.cg-leyenda > .k { display: block; margin: 0 0 10px; font-size: 12px; letter-spacing: 2.2px; color: var(--cg-texto-2); }
.cg-leyenda .lista-simple > div { align-items: center; justify-content: flex-start; gap: 11px; padding: 8px 0; border-bottom: 1px solid rgba(128, 98, 48, .14); font-size: 13px; color: var(--cg-texto); }
.cg-leyenda .lista-simple > div:last-child { border-bottom: 0; }
.cg-leyenda .lista-simple b { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--cg-texto-2); font-variant-numeric: tabular-nums lining-nums; }
.cg-leyenda .lista-simple b i { font-style: normal; font-weight: 700; color: var(--cg-texto); }
.cg-regla-racha { margin-top: 14px; padding: 12px 14px; border-radius: 7px; background: rgba(46, 122, 98, .08); border: 1px solid rgba(46, 122, 98, .25);
  font-size: 12px; line-height: 1.5; color: var(--cg-ok); }
.cg-regla-racha[hidden] { display: none; }
.cg-ruleta .vacio { font-family: var(--fuente-titulos); font-style: italic; font-size: 19px; color: var(--cg-texto-3); border: 0; background: none; padding: 6px 0; }

/* la tarjeta verde «Tu giro» */
.cg-giro-tarjeta { flex: 0 0 372px; display: flex; flex-direction: column; padding: 22px 24px; }
.cg-giro-cab { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cg-giro-cab .cg-k { margin: 0; }
.cg-giro-resto { flex: 1; }
.cg-giro-cab #chipGiros { min-height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; letter-spacing: .2px; background: rgba(0, 0, 0, .22); border: 0;
  color: var(--cg-bronce-claro); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .35); }
.cg-giro-precio { margin-top: 16px; }
.cg-k-v { color: var(--cg-texto-verde-2); }
.cg-k-b { color: var(--cg-bronce); letter-spacing: 2px; }
.cg-giro-cifra { min-height: 46px; }
.cg-giro-tarjeta .boton-girar { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; min-height: 52px; margin: 18px 0 0; padding: 0 26px;
  border-radius: 7px; font: 700 15px/1 var(--fuente); letter-spacing: .3px; color: var(--cg-superficie-alta); text-shadow: none;
  background: linear-gradient(180deg, var(--cg-bronce), var(--cg-bronce-osc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(96, 72, 32, .28); }
.cg-giro-tarjeta .boton-girar:hover:not(:disabled) { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px rgba(96, 72, 32, .4); }
.cg-giro-tarjeta .boton-girar:disabled { background: var(--cg-papel-3); color: var(--cg-texto-3); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .18); opacity: 1; }
.cg-giro-pie { margin-top: 9px; font-size: 12px; color: var(--cg-texto-verde-2); text-align: center; }
.cg-giro-internas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.cg-giro-internas > div.cg-interna { display: block; min-width: 0; padding: 9px 10px; border-bottom: 1px solid rgba(179, 148, 92, .2); }
#rulRetorno.cg-giro-internas .cg-interna b { display: block; font-size: 17px; text-align: left; color: var(--cg-marfil); }
#rulRetorno.cg-giro-internas .cg-interna b.gana { color: var(--cg-verde-dato); }
.cg-giro-internas .cg-interna small { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-verde-3); overflow-wrap: anywhere; }
.cg-giro-internas .cg-k { white-space: normal; letter-spacing: 1.3px; margin-bottom: 4px; color: var(--cg-texto-verde-3); }
.cg-giro-internas .vacio { grid-column: 1 / -1; color: var(--cg-texto-verde-2); }
.cg-giro-ultimos { margin-top: 20px; }
.cg-giro-ultimos .lista-simple > div, .cg-giros-mas > div { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid rgba(179, 148, 92, .18); font-size: 12.5px; color: var(--cg-texto-verde); }
.cg-giro-ultimos .lista-simple > div svg, .cg-giros-mas > div svg { flex: 0 0 auto; color: var(--cg-bronce); }
.cg-giro-ultimos .lista-simple b.premio, .cg-giros-mas b.premio { margin-left: auto; color: var(--cg-marfil); font-weight: 700; text-align: right; }
.cg-giro-ultimos b.gana { padding: 2px 8px; border-radius: 5px; background: rgba(0, 0, 0, .22); color: var(--cg-bronce-claro); font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .35); }
.cg-giros-mas summary { cursor: pointer; padding-top: 12px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-claro); }
@media (max-width: 820px) {
  .cg-ruleta-fila { flex-direction: column; }
  .cg-ruleta-caja { flex-direction: column; padding: 18px 14px; gap: 18px; }
  .cg-rueda-col { width: 100%; margin: -10px 0 0; }
  .cg-leyenda { width: 100%; }
  .cg-giro-tarjeta { flex: 1 1 auto; width: 100%; }
}

/* ===================================================================================================================
   063 · EL MURO (Ranking + Logros) — porte de la maqueta muro_el_muro. Todo cuelga de `.mu-pagina` para no pisar nada.
   La cabecera es la pieza compartida de PARTY (coliseo_paginas.css); aquí va el resto de la página.
   =================================================================================================================== */
.mu-pagina { background: #F4F0E7; border-radius: 12px; overflow: hidden; --mu-bronce: #B3945C; --mu-bronce-o: #806230; --mu-tinta: #172B26; --mu-verde: #103C34; --mu-papel: #FAF7F0; --mu-tenue: #5F645C; }
.mu-pagina .mu-cont { max-width: 1520px; margin: 0 auto; padding: 26px 32px 40px; font-family: var(--fuente); color: var(--mu-tinta); }
.mu-pagina .mu-k { display: block; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #8CD6AA; white-space: nowrap; }
.mu-pagina .mu-rot { font-size: 12px; letter-spacing: 2.6px; font-weight: 700; color: var(--mu-bronce-o); }
.mu-pagina .mu-cab { display: flex; align-items: center; gap: 20px; margin: 2px 0 10px; }
.mu-pagina .mu-cab-grande { margin: 0 0 14px; }
.mu-pagina .mu-hilo { flex-grow: 1; height: 1px; background: rgba(128, 98, 48, .28); }
.mu-pagina .mu-sec { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 600; color: var(--mu-tinta); line-height: 1; text-transform: none; letter-spacing: 0; }
.mu-pagina .mu-cab-grande .mu-sec { font-size: 31px; }
.mu-pagina .mu-sup { position: relative; background: var(--mu-papel); border: 1px solid rgba(128, 98, 48, .34); border-radius: 10px; padding: 20px 26px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px rgba(60, 42, 18, .14); }
.mu-pagina .mu-sup::before, .mu-pagina .mu-arena::after, .mu-pagina .mu-ascenso::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.mu-pagina .mu-sup > * { position: relative; }
.mu-pagina .vacio { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; color: #666B64; border: 0; background: none; padding: 6px 0; text-align: left; }

/* la cabecera: botón del perfil y la placa */
.mu-pagina .mu-btn-lin { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-top: 18px; padding: 0 18px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(179, 148, 92, .55); background: rgba(255, 253, 248, .55); color: var(--mu-bronce-o); font: 700 13px/1 var(--fuente); }
.mu-pagina .mu-puesto-fila { display: inline-flex; align-items: flex-end; gap: 10px; }
.mu-pagina .mu-de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: var(--mu-tenue); padding-bottom: 4px; }
.mu-pagina .mu-salto.sube, .mu-pagina .var.sube { color: #1F6349; font-weight: 800; }
.mu-pagina .mu-salto.baja, .mu-pagina .var.baja { color: #B4472F; font-weight: 800; }
.mu-pagina .var.igual { color: #666B64; }
.mu-pagina .mu-manda { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: var(--mu-bronce-o); }

/* la arena del podio */
.mu-pagina .mu-arena { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(179, 148, 92, .45); color: #F3EBD9;
  background: radial-gradient(ellipse 46% 62% at 50% 0%, rgba(226, 204, 154, .22) 0%, rgba(226, 204, 154, .07) 46%, rgba(226, 204, 154, 0) 72%), linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%);
  box-shadow: 0 18px 40px rgba(30, 20, 8, .30); }
.mu-pagina .mu-arena::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/coliseo/textura_sillar.png'); background-size: 420px; opacity: .06; mix-blend-mode: screen; pointer-events: none; }
.mu-pagina .mu-arena > * { position: relative; z-index: 1; }
.mu-pagina .mu-arena-cab { display: flex; align-items: flex-end; gap: 18px; padding: 30px 30px 0; }
.mu-pagina .mu-arena-cab h2 { margin: 6px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 600; color: #FAF7F0; line-height: 1; text-transform: none; letter-spacing: 0; }
.mu-pagina .mu-ventana { font-size: 12px; color: #93B3A8; margin-top: 8px; }
.mu-pagina .mu-controles { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mu-pagina .mu-seg { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; border: 1px solid rgba(179, 148, 92, .42); background: rgba(0, 0, 0, .2); }
.mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 15px; border-radius: 999px; border: 0; background: transparent;
  font: 600 12px/1 var(--fuente); color: #A8C4BA; white-space: nowrap; cursor: pointer; }
.mu-pagina .mu-seg > button.on, .mu-pagina .mu-seg-sel.on { background: #F4F0E7; color: #103C34; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
.mu-pagina .mu-seg-sel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.mu-pagina .mu-podio { display: flex; flex-direction: column; }
.mu-pagina .mu-podio, .mu-pagina .mu-podio-fila { padding: 16px 30px 0; }
.mu-pagina .mu-podio { flex-direction: row; justify-content: center; align-items: flex-end; gap: 34px; }
.mu-pagina .mu-podio-fila { display: flex; justify-content: center; align-items: flex-end; gap: 34px; }
.mu-pagina .mu-podio:has(.mu-podio-vacio) { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.mu-pagina .mu-podio:has(.mu-podio-vacio) .mu-podio-fila { padding: 16px 30px 0; }
.mu-pagina .col { flex: 0 0 296px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mu-pagina .corona { height: 38px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; color: #E2CC9A; font-size: inherit; filter: drop-shadow(0 0 10px rgba(226, 204, 154, .55)); }
.mu-pagina .marco { position: relative; padding: 4px; border-radius: 12px; background: linear-gradient(150deg, #E2CC9A, #B3945C 46%, #806230); box-shadow: 0 14px 26px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mu-pagina .marco .f { display: block; width: 100px; height: 100px; object-fit: cover; object-position: 50% 22%; border-radius: 9px; }
.mu-pagina .col.c1 .marco .f { width: 124px; height: 124px; }
.mu-pagina .f.mono { display: flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(160deg, #1B5A4B, #0E3A31); color: #E8D5A8; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }
.mu-pagina .marco .f.mono { font-size: 40px; }
.mu-pagina .col.c1 .marco .f.mono { font-size: 50px; }
.mu-pagina .marco .ins { position: absolute; right: -22px; bottom: -14px; width: auto; height: 52px; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .5)); }
.mu-pagina .col.c1 .marco .ins { height: 62px; }
.mu-pagina .col .nom { margin-top: 16px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; color: #FAF7F0; line-height: 1.05; display: flex; align-items: center; gap: 8px; justify-content: center; max-width: 100%; margin-bottom: 0; }
.mu-pagina .col .grado { margin-top: 4px; font-size: 12px; letter-spacing: 2px; font-weight: 700; color: #B3945C; }
.mu-pagina .col .cifra { margin-top: 12px; display: flex; justify-content: center; }
.mu-pagina .col .sub { margin: 7px 0 14px; font-size: 12px; color: #93B3A8; }
.mu-pagina .col .sub b { color: #E8D5A8; font-variant-numeric: tabular-nums lining-nums; }
.mu-pagina .tu { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: 5px; background: linear-gradient(180deg, #B3945C, #806230); color: #FFFDF8; font: 800 12px/1 var(--fuente); letter-spacing: 1px; }
.mu-pagina .ped { position: relative; width: 100%; height: 116px; border-radius: 7px 7px 0 0; display: flex; justify-content: center; align-items: flex-start; background-color: #E3D6BA;
  background-image: linear-gradient(180deg, rgba(255, 251, 240, .55) 0%, rgba(255, 251, 240, .08) 22%, rgba(110, 86, 50, .06) 60%, rgba(84, 64, 34, .32) 100%), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 250px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), inset 2px 0 0 rgba(255, 255, 255, .35), inset -3px 0 0 rgba(96, 76, 48, .22), 0 -1px 0 rgba(0, 0, 0, .1); }
.mu-pagina .ped::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(255, 252, 243, .75), rgba(255, 252, 243, .12)); box-shadow: 0 1px 0 rgba(128, 98, 48, .38); }
.mu-pagina .ped .n { position: relative; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; line-height: 1; font-size: 66px; margin-top: 24px; color: rgba(104, 80, 44, .58); text-shadow: 0 1.5px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(60, 44, 20, .28); font-feature-settings: 'lnum' 1; }
.mu-pagina .col.c1 .ped { height: 156px; background-color: #EADFC6; }
.mu-pagina .col.c1 .ped .n { font-size: 84px; margin-top: 30px; }
.mu-pagina .col.c3 .ped { height: 88px; }
.mu-pagina .col.c3 .ped .n { font-size: 54px; margin-top: 20px; }
.mu-pagina .col.c1 .ped::after { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 3px; background: linear-gradient(90deg, rgba(226, 204, 154, 0), #E2CC9A, rgba(226, 204, 154, 0)); }
.mu-pagina .mu-repisa { height: 16px; background-color: #E6DAC0; background-image: linear-gradient(rgba(168, 142, 100, .26), rgba(120, 98, 64, .52)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 170px; background-blend-mode: multiply, normal;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(96, 76, 48, .55), 0 4px 10px rgba(0, 0, 0, .32); }
.mu-pagina .mu-podio-vacio { margin: 22px auto 0; text-align: center; }
.mu-pagina .mu-podio-vacio > span { display: inline-block; padding: 12px 28px 13px; border-radius: 7px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: #3A2E1A;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(255, 251, 240, .5), rgba(168, 142, 100, .22)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 220px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(96, 76, 48, .45), 0 8px 18px rgba(0, 0, 0, .3); }
.mu-pagina .mu-podio-vacio small { display: block; margin-top: 12px; font-size: 12px; letter-spacing: 2.4px; font-weight: 700; color: #93B3A8; }
.mu-pagina .mu-podio:has(.mu-podio-vacio) .mu-podio-vacio { padding-bottom: 0; }

/* 064 · 0B: el nombre del podio nunca se corta; a 390 parte en dos líneas */
.mu-pagina .col .podio-nombre { overflow: visible; text-overflow: clip; white-space: normal; text-align: center; }
.mu-pagina .col .mu-nom-t { min-width: 0; overflow-wrap: normal; word-break: normal; }

/* récords de la casa: la tira, al pie del podio */
.mu-pagina .mu-records { display: flex; align-items: stretch; padding: 20px 4px 22px; background: rgba(0, 0, 0, .16); }
.mu-pagina .mu-records.oculto { display: none; }
.mu-pagina .mu-rec { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.mu-pagina .mu-div { width: 1px; align-self: stretch; background: rgba(179, 148, 92, .26); }
.mu-pagina .mu-ico-c { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #B3945C; background: rgba(179, 148, 92, .14); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .3); }
.mu-pagina .mu-rec-cuerpo { min-width: 0; display: block; }
.mu-pagina .mu-rec .mu-k { font-size: 12px; letter-spacing: 2px; color: #B3945C; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mu-pagina .mu-rq { display: block; margin-top: 7px; font-size: 12px; color: #8CA49C; white-space: nowrap; }
.mu-pagina .mu-rq b { color: #E8D5A8; }
.mu-pagina .mu-rec-nada { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; color: #8CA49C; }
.mu-pagina .mu-nuevo { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 0; border-radius: 4px; background: linear-gradient(180deg, #E2CC9A, #B3945C); color: #0B332B; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; vertical-align: 2px; }
.mu-pagina .mu-rec-nuevo { position: relative; }
.mu-pagina .mu-rec-nuevo::before { content: ''; position: absolute; left: 4%; right: 4%; top: -10%; bottom: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 216, 134, .28), rgba(214, 170, 90, .1) 55%, rgba(214, 170, 90, 0)); pointer-events: none; }
.mu-pagina .mu-rec-nuevo > * { position: relative; }
.mu-pagina .mu-nota { display: block; padding: 0 30px 16px; font-size: 12px; color: #7E9A92; }
/* los números en piedra: sobre el verde llevan el prefijo claro */
.mu-pagina .mu-arena .cgp-piedra .cgp-pre, .mu-pagina .mu-arena .cgp-piedra .cgp-cent { color: #E8D5A8; }
.mu-pagina .mu-arena .cgp-piedra .cgp-suf { color: #B3945C; }

/* la tabla y los logros */
.mu-pagina .mu-fila2 { display: flex; gap: 24px; align-items: stretch; margin-top: 24px; }
.mu-pagina .mu-tabla-caja { flex: 1 1 0; min-width: 0; }
.mu-pagina .mu-logros-caja { flex: 0 0 410px; display: flex; flex-direction: column; padding: 20px 24px 12px; }
.mu-pagina .mu-logros-caja .mu-sec { font-size: 25px; }
.mu-pagina .mu-rot { white-space: nowrap; }
.mu-pagina .mu-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.mu-pagina .mu-tabla th { font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--mu-tenue); text-align: left; padding: 0 12px 11px; border-bottom: 1px solid rgba(128, 98, 48, .28); white-space: nowrap; }
.mu-pagina .mu-tabla th.d, .mu-pagina .mu-tabla td.d { text-align: right; }
.mu-pagina .mu-tabla th.c, .mu-pagina .mu-tabla td.c { text-align: center; }
.mu-pagina .mu-tabla td { padding: 11px 12px; border-bottom: 1px solid rgba(128, 98, 48, .13); vertical-align: middle; font-size: 14px; }
.mu-pagina .mu-tabla tr:last-child td { border-bottom: 0; }
.mu-pagina .mu-tabla tr.yo td { background: rgba(179, 148, 92, .11); border-top: 1.5px solid #B3945C; border-bottom: 1.5px solid #B3945C; }
.mu-pagina .mu-tabla tr.yo td:first-child { border-left: 1.5px solid #B3945C; border-radius: 9px 0 0 9px; }
.mu-pagina .mu-tabla tr.yo td:last-child { border-right: 1.5px solid #B3945C; border-radius: 0 9px 9px 0; }
.mu-pagina .mu-pto { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 700; color: #4A4F48; font-feature-settings: 'lnum' 1; }
.mu-pagina .mu-pto.oro { background: radial-gradient(circle at 36% 30%, #FFF3C4, #D9A93F 58%, #8A6215); color: #3D2A08; box-shadow: 0 2px 6px rgba(138, 98, 21, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.mu-pagina .mu-pto.plata { background: radial-gradient(circle at 36% 30%, #FFFFFF, #CFCFC9 58%, #7F817C); color: #2E302C; box-shadow: 0 2px 6px rgba(80, 80, 76, .4), inset 0 1px 0 rgba(255, 255, 255, .7); }
.mu-pagina .mu-pto.bronce { background: radial-gradient(circle at 36% 30%, #F6DCBC, #B8804F 58%, #6E4326); color: #FFF8EE; box-shadow: 0 2px 6px rgba(110, 67, 38, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
.mu-pagina .mu-salto { display: block; width: 36px; margin-top: 2px; font-size: 12px; font-weight: 800; text-align: center; }
.mu-pagina .mu-ases { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mu-pagina .mu-cara { position: relative; flex: 0 0 auto; display: inline-block; }
.mu-pagina .mu-cara .f { display: block; object-fit: cover; border-radius: 7px; box-shadow: 0 0 0 1px rgba(128, 98, 48, .28); }
.mu-pagina .mu-cara .f.mono { display: flex; background: linear-gradient(160deg, #1B5A4B, #0E3A31); }
.mu-pagina .mu-cara .ins { position: absolute; right: -8px; bottom: -6px; width: auto; filter: drop-shadow(0 2px 3px rgba(60, 42, 18, .4)); }
.mu-pagina .mu-ases b { display: block; font-size: 14.5px; color: var(--mu-tinta); white-space: nowrap; cursor: pointer; }
.mu-pagina .mu-ases small { display: block; margin-top: 2px; font-size: 12px; color: var(--mu-bronce-o); font-weight: 600; white-space: nowrap; }
.mu-pagina .mu-ases small.mu-cel { display: none; color: var(--mu-tenue); font-weight: 500; }
.mu-pagina .tu + *, .mu-pagina .mu-ases .tu { vertical-align: 1px; }
.mu-pagina .cob { font-weight: 800; font-size: 15px; color: var(--mu-tinta); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.mu-pagina .dist { width: 104px; margin: 6px 0 0 auto; height: 4px; border-radius: 999px; background: rgba(128, 98, 48, .13); }
.mu-pagina .dist > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #B3945C, #806230); }
.mu-pagina .var { font-weight: 800; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.mu-pagina .mu-falta { display: inline-block; text-align: right; white-space: normal; font-size: 13px; }
.mu-pagina .mu-falta b { color: var(--mu-tinta); font-variant-numeric: tabular-nums lining-nums; }
.mu-pagina .mu-falta span, .mu-pagina .mu-falta-v { color: #666B64; }
.mu-pagina .mu-logros-nota { margin: 0 0 6px; font-size: 12px; color: var(--mu-tenue); line-height: 1.45; }
.mu-pagina .mu-logro { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid rgba(128, 98, 48, .15); }
.mu-pagina .mu-logro:last-child { border-bottom: 0; }
.mu-pagina .mu-logro .mu-disco { width: 42px; height: 42px; }
.mu-pagina .mu-logro-t { flex: 1 1 auto; min-width: 0; }
.mu-pagina .mu-logro-t b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18.5px; font-weight: 600; color: var(--mu-tinta); line-height: 1.1; }
.mu-pagina .mu-logro-t span { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--mu-tenue); flex-wrap: wrap; }
.mu-pagina .mu-caras { display: inline-flex; }
.mu-pagina .mu-caras .mono { width: 22px; height: 22px; border-radius: 5px; margin-left: -5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #E8D5A8; background: linear-gradient(160deg, #1B5A4B, #0E3A31); box-shadow: 0 0 0 2px #FAF7F0; }
.mu-pagina .mu-caras img.f { width: 22px; height: 22px; border-radius: 5px; margin-left: -5px; object-fit: cover; box-shadow: 0 0 0 2px #FAF7F0; }
.mu-pagina .mu-caras .mono:first-child, .mu-pagina .mu-caras img.f:first-child { margin-left: 0; }
.mu-pagina .mu-pasos { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.mu-pagina .mu-pasos i { min-width: 24px; padding: 0 4px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800; color: #666B64; background: #F2ECDF; box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.mu-pagina .mu-pasos i.si { background: #2E7A62; color: #FFFDF8; box-shadow: none; }
.mu-pagina .mu-ver { margin: auto 0 4px; padding: 8px 0 0; align-self: flex-end; border: 0; background: none; cursor: pointer; font: 700 12px/1 var(--fuente); color: var(--mu-bronce-o); }
.mu-pagina .mu-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mu-pagina .mu-tag.gris { background: #F2ECDF; color: var(--mu-tenue); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.mu-pagina .mu-tag.bronce { background: rgba(179, 148, 92, .14); color: var(--mu-bronce-o); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .38); }
.mu-pagina .mu-tag.verde { background: rgba(46, 122, 98, .12); color: #1F6349; box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .3); }

/* el muro: hitos como placas en la pared */
.mu-pagina .mu-muro-caja { margin-top: 30px; }
.mu-pagina .mu-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mu-pagina .mu-filtros button { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(128, 98, 48, .35); background: transparent; color: var(--mu-tenue); font: 600 12px/1.2 var(--fuente); cursor: pointer; white-space: nowrap; }
.mu-pagina .mu-filtros button.on { background: var(--mu-verde); color: #E8D5A8; border-color: var(--mu-verde); font-weight: 700; }
.mu-pagina .mu-muro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mu-pagina .mu-muro > .vacio { grid-column: 1 / -1; }
.mu-pagina .mu-hito { position: relative; display: flex; gap: 15px; padding: 16px 18px 14px; border-radius: 10px; background: #FFFDF8; border: 1px solid rgba(128, 98, 48, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 16px rgba(60, 42, 18, .08); }
.mu-pagina .mu-hito.mio { box-shadow: inset 3px 0 0 #B3945C, inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 16px rgba(60, 42, 18, .08); }
.mu-pagina .mu-hito > .mu-cara, .mu-pagina .mu-hito > .mu-disco { align-self: flex-start; }
.mu-pagina .mu-hito .mu-cara .f { width: 48px; height: 48px; font-size: 20px; }
.mu-pagina .mu-hito .mu-cara .ins { height: 26px; right: -9px; bottom: -7px; }
.mu-pagina .mu-cuerpo { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.mu-pagina .mu-der { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mu-pagina .mu-der time { font-size: 12px; color: #666B64; white-space: nowrap; }
.mu-pagina .mu-quien { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--mu-tinta); line-height: 1.15; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(179, 148, 92, .75); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mu-pagina .mu-acc { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 1.5px; font-weight: 800; color: var(--mu-bronce-o); text-transform: uppercase; }
.mu-pagina .mu-acc b { color: var(--mu-tinta); }
.mu-pagina .mu-cita { margin-top: 7px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17px; color: #3A3F38; line-height: 1.3; }
.mu-pagina .mu-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mu-pagina .mu-aplauso { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(179, 148, 92, .55); background: transparent; color: var(--mu-bronce-o); font: 700 12px/1 var(--fuente); white-space: nowrap; cursor: pointer; }
.mu-pagina .mu-aplauso svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mu-pagina .mu-aplauso.on { background: var(--mu-verde); border-color: var(--mu-verde); color: #E8D5A8; }
.mu-pagina .mu-aplauso.on svg { fill: currentColor; }
.mu-pagina .mu-disco { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #EDF1EC; color: #2E7A62; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.mu-pagina .mu-disco.oro { background: radial-gradient(circle at 36% 30%, #FFF3C4, #D9A93F 58%, #8A6215); color: #5B3F0C; box-shadow: 0 3px 8px rgba(138, 98, 21, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.mu-pagina .mu-disco.verde { background: linear-gradient(180deg, #14473C, #0B332B); color: #E8D5A8; box-shadow: 0 3px 8px rgba(11, 51, 43, .3); }
.mu-pagina .mu-ascenso { grid-column: 1 / -1; align-items: center; gap: 26px; padding: 20px 26px;
  background-color: var(--mu-papel); background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.mu-pagina .mu-ascenso .mu-duo { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.mu-pagina .mu-ascenso .marco { padding: 3px; }
.mu-pagina .mu-ascenso .marco .f { width: 92px; height: 92px; }
.mu-pagina .mu-brillo { position: relative; display: inline-block; margin-left: -14px; }
.mu-pagina .mu-brillo::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 134, .7) 0%, rgba(214, 170, 90, .3) 36%, rgba(214, 170, 90, 0) 70%); }
.mu-pagina .mu-brillo > img { position: relative; display: block; height: 104px; width: auto; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.mu-pagina .mu-ascenso .mu-quien { font-size: 30px; }
.mu-pagina .mu-ascenso .mu-acc { font-size: 12px; letter-spacing: 2px; margin-top: 9px; }
.mu-pagina .mu-ascenso .mu-cita { font-size: 18px; }
.mu-pagina .mu-ascenso .mu-der { align-self: stretch; }
.mu-pagina .mu-mas { display: flex; justify-content: center; margin-top: 18px; }
.mu-pagina .mu-btn-mas { height: 36px; padding: 0 22px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .4); background: #FFFDF8; color: var(--mu-bronce-o); font: 700 13px/1 var(--fuente); cursor: pointer; }
.mu-pagina .mu-btn-mas.oculto { display: none; }
.mu-pagina .mu-pie .mu-tag { white-space: normal; height: auto; min-height: 22px; padding: 3px 8px; }

@media (max-width: 820px) {
  .mu-pagina .mu-cont { padding: 20px 16px 28px; }
  .mu-pagina .mu-cab { flex-wrap: wrap; gap: 6px 14px; }
  .mu-pagina .mu-hilo { display: none; }
  .mu-pagina .mu-sec { font-size: 25px; }
  .mu-pagina .mu-cab .mu-rot { white-space: normal; flex-basis: 100%; order: 3; line-height: 1.6; }
  .mu-pagina .mu-arena-cab { flex-direction: column; align-items: flex-start; padding: 24px 16px 0; }
  .mu-pagina .mu-arena-cab h2 { font-size: 28px; }
  .mu-pagina .mu-controles { margin-left: 0; align-items: flex-start; width: 100%; }
  .mu-pagina .mu-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { padding: 0 11px; font-size: 12px; }
  .mu-pagina .mu-podio, .mu-pagina .mu-podio-fila { gap: 8px; padding: 14px 10px 0; }
  .mu-pagina .col { flex: 1 1 0; min-width: 0; }
  .mu-pagina .col .nom { font-size: 16px; margin-top: 12px; flex-direction: column; gap: 4px; }
  .mu-pagina .col .grado { font-size: 12px; letter-spacing: 1.2px; }
  .mu-pagina .col .sub { font-size: 12px; margin: 5px 0 10px; }
  .mu-pagina .marco .ins { right: -12px; bottom: -9px; }
  .mu-pagina .marco .f { width: 72px; height: 72px; }
  .mu-pagina .col.c1 .marco .f { width: 88px; height: 88px; }
  .mu-pagina .marco .f.mono { font-size: 28px; }
  .mu-pagina .col .marco .ins, .mu-pagina .col.c1 .marco .ins { height: 34px; }
  .mu-pagina .col .ped { height: 76px; }
  .mu-pagina .col.c1 .ped { height: 104px; }
  .mu-pagina .col.c3 .ped { height: 58px; }
  .mu-pagina .col .ped .n { font-size: 44px; margin-top: 14px; }
  .mu-pagina .col.c1 .ped .n { font-size: 58px; margin-top: 18px; }
  .mu-pagina .col.c3 .ped .n { font-size: 38px; margin-top: 10px; }
  .mu-pagina .col .cgp-piedra img, .mu-pagina .mu-records .cgp-piedra img { height: 32px !important; }
  .mu-pagina .col .cgp-pre { font-size: 14px !important; }
  .mu-pagina .mu-records { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; padding: 16px 0; }
  .mu-pagina .mu-records > .mu-div { display: none; }
  .mu-pagina .mu-rec { padding: 0 12px; align-items: flex-start; }
  .mu-pagina .mu-rec .mu-ico-c { display: none; }
  .mu-pagina .mu-rec .mu-k { white-space: normal; line-height: 1.5; }
  .mu-pagina .mu-rq { white-space: normal; }
  .mu-pagina .mu-nota { padding: 0 16px 14px; }
  .mu-pagina .mu-fila2 { flex-direction: column; }
  .mu-pagina .mu-logros-caja { flex: 1 1 auto; width: 100%; }
  .mu-pagina .mu-sup { padding: 16px 14px 12px; }
  .mu-pagina .mu-tabla td { padding: 9px 5px; }
  .mu-pagina .mu-tabla th { padding: 0 5px 10px; }
  .mu-pagina .mu-ocultar-cel { display: none; }
  .mu-pagina .mu-ases { gap: 10px; }
  .mu-pagina .mu-ases b { white-space: normal; font-size: 13.5px; line-height: 1.25; }
  .mu-pagina .mu-ases .mu-cara .f { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .mu-pagina .mu-ases .mu-cara .ins { height: 21px !important; }
  .mu-pagina .mu-ases small.mu-esc { display: none; }
  .mu-pagina .mu-ases small.mu-cel { display: block; }
  .mu-pagina .tu { display: none; }
  .mu-pagina .cob { font-size: 13.5px; }
  .mu-pagina .mu-pto { width: 30px; height: 30px; font-size: 18px; }
  .mu-pagina .mu-muro { grid-template-columns: 1fr; }
  .mu-pagina .mu-hito { flex-wrap: wrap; padding: 14px; }
  .mu-pagina .mu-hito .mu-cuerpo { flex: 1 1 0; padding-right: 44px; }
  .mu-pagina .mu-der { flex: 1 1 100%; flex-direction: row; justify-content: flex-end; }
  .mu-pagina .mu-der time { position: absolute; top: 14px; right: 14px; }
  .mu-pagina .mu-ascenso { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mu-pagina .mu-ascenso .mu-quien { font-size: 26px; }
}