/* Cine de Oro — todo en blanco y negro, para un monitor que ves de reojo. */

:root {
  --fondo:      #0a0a0c;
  --tinta:      #f7f5f0;   /* blanco hueso, no blanco puro: cansa menos */
  --tinta-2:    #dbd7cf;   /* texto secundario: la biografía se lee de lejos */
  --tinta-3:    #a8a39b;   /* etiquetas; el más tenue, pero ya legible */
  --linea:      rgba(247, 245, 240, .2);

  --display: "Bodoni Moda", Didot, "Bodoni 72", "Playfair Display", Georgia, serif;
  --palo:    "Barlow Condensed", "Avenir Next Condensed", "HelveticaNeue-CondensedBold", sans-serif;
  --texto:   "Barlow", "Avenir Next", -apple-system, system-ui, sans-serif;

  --entra: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  overflow: hidden;
  cursor: none;                      /* el puntero estorba en una pantalla ambiental */
  -webkit-font-smoothing: antialiased;
}
body.con-raton { cursor: default; }

/* ── Portada de carga ─────────────────────────────────────────────────────── */

.cargando {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; background: var(--fondo);
  transition: opacity .8s ease;
}
.cargando.fuera { opacity: 0; pointer-events: none; }
.cargando-marca {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 500; letter-spacing: .22em; text-indent: .22em;
  animation: latir 3s ease-in-out infinite;
}
.cargando-nota { font-family: var(--palo); font-size: 1rem; letter-spacing: .18em;
                 text-transform: uppercase; color: var(--tinta-3); text-indent: .18em; }
@keyframes latir { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* ── Escena ───────────────────────────────────────────────────────────────── */

.escena { position: relative; height: 100vh; width: 100vw; }

.lamina { position: absolute; inset: 0; }
.lamina[hidden] { display: none; }

.lamina-persona {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(2rem, 3.6vw, 4.5rem);
  padding-top: clamp(2.4rem, 4vw, 5rem);
}

/* Grano de película y viñeta: la textura que hace que se vea de época
   en vez de "una foto vieja en una página web". Los dos son estáticos —
   esta pantalla va a estar prendida toda la mañana y no vale la pena
   gastarle procesador a una animación que nadie está viendo de frente. */
.grano {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}
.vineta {
  position: fixed; inset: 0; z-index: 49; pointer-events: none;
  background: radial-gradient(ellipse 88% 78% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* ── Barra de avance ──────────────────────────────────────────────────────── */

.progreso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
            background: rgba(244,241,235,.07); }
.progreso-barra { height: 100%; width: 0; background: var(--tinta);
                  opacity: .45; transform-origin: left; }

/* ── La foto ──────────────────────────────────────────────────────────────── */

.retrato { display: flex; flex-direction: column; min-height: 0; gap: 1rem; }

.marco {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: #101013;
  box-shadow: 0 2.5rem 5rem rgba(0,0,0,.65);
}
/* Marco finito por dentro — el borde de una copia en papel */
.marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244,241,235,.1);
}

.foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;   /* la cara suele ir arriba */
  /* grayscale uniforma: en Commons hay coloreadas y sepias mezcladas con las
     originales, y sin esto el pase se ve disparejo. */
  filter: grayscale(1) contrast(1.06) brightness(.97);
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity, transform;
}
.foto.puesta { opacity: 1; }
/* Un retrato se puede recortar sin perder nada; un cartel no — su diseño ES
   la imagen. Por eso el cartel se ve entero aunque deje aire a los lados. */
.foto.cartel { object-fit: contain; object-position: center; }
/* Los retratos son en blanco y negro de origen, pero los carteles de la época
   se diseñaron a color y en gris pierden la mitad de su gracia. Con la tecla C
   se ven como se imprimieron. */
.foto.cartel.a-color { filter: contrast(1.03) brightness(.98); }
.foto.acercando { animation: acercar var(--dur-foto, 14s) linear forwards; }
@keyframes acercar {
  from { transform: scale(1.005) }
  to   { transform: scale(1.055) }
}

.pie { display: flex; align-items: baseline; justify-content: space-between;
       gap: 1.5rem; min-height: 1.2em; }

.puntos { display: flex; gap: .42rem; flex-shrink: 0; }
.punto { width: 4px; height: 4px; border-radius: 50%;
         background: var(--tinta); opacity: .2; transition: opacity .5s ease; }
.punto.activo { opacity: .85; }

.credito {
  font-family: var(--palo); font-size: clamp(.68rem, .74vw, .88rem);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
  text-align: right; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── La ficha ─────────────────────────────────────────────────────────────── */

.ficha { display: flex; flex-direction: column; min-height: 0; min-width: 0;
         gap: clamp(1.4rem, 2.2vw, 2.6rem); }

/* Todo lo que aparece después del respiro entra con este retraso escalonado */
.vela { opacity: 0; transform: translateY(14px); }
.vela.puesta { opacity: 1; transform: none;
               transition: opacity 1.1s var(--entra), transform 1.1s var(--entra); }

.encabezado { flex-shrink: 0; }

.tipo {
  font-family: var(--palo); font-size: clamp(.82rem, .95vw, 1.15rem);
  letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-3);
  margin-bottom: clamp(.6rem, 1vw, 1rem); text-indent: .3em;
}

/* El nombre es lo único que tiene que leerse desde el otro lado del cuarto. */
.nombre {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 7rem);
  line-height: .92; letter-spacing: -.015em;
  text-wrap: balance;
}
.nombre.largo { font-size: clamp(2.2rem, 4vw, 5rem); }

.apodo {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 2.1rem);
  color: var(--tinta-2); margin-top: .5rem;
}
.apodo:empty { display: none; }

/* La ficha de datos — el corazón de esto.
   Un párrafo no se lee de reojo: hay que empezar por el principio y llegar
   hasta donde está el dato. Una lista con la etiqueta a la izquierda deja que
   el ojo baje por la columna de etiquetas y se detenga solo en la que importa.
   Por eso los datos duros salen aquí y la prosa queda abajo, para cuando de
   verdad te detienes a leer. */
.datos {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(.45rem, .7vw, .75rem) clamp(1.3rem, 2.2vw, 2.4rem);
  align-items: baseline;
  font-size: clamp(1.08rem, 1.3vw, 1.7rem);
}
.datos dt {
  font-family: var(--palo); font-size: .78em;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-3); white-space: nowrap;
}
.datos dd { color: var(--tinta); min-width: 0; }
/* El dato secundario del renglón —el lugar, el número de películas— en gris,
   para que el ojo pegue primero en la fecha. */
.datos dd .apagado { color: var(--tinta-2); }

.cuerpo { display: flex; flex-direction: column; min-height: 0;
          gap: clamp(1.2rem, 2vw, 2.2rem); }

.bio {
  font-size: clamp(1.02rem, 1.18vw, 1.5rem); line-height: 1.6;
  color: var(--tinta-2); max-width: 62ch;
  /* Se corta a lo que quepa sin empujar la filmografía fuera de la pantalla */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lineas-bio, 5); overflow: hidden;
}
.bio b, .bio strong { color: var(--tinta); font-weight: 500; }

/* ── La obra ──────────────────────────────────────────────────────────────── */

.obra { display: flex; flex-direction: column; flex: 1; min-height: 0;
        border-top: 1px solid var(--linea); padding-top: clamp(1rem, 1.6vw, 1.6rem); }

.obra-titulo {
  font-family: var(--palo); font-size: clamp(.82rem, .95vw, 1.15rem);
  font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: clamp(.7rem, 1.1vw, 1.1rem);
  text-indent: .3em; flex-shrink: 0;
}

.obra-lista {
  list-style: none; flex: 1; min-height: 0; overflow: hidden;
  columns: 2; column-gap: clamp(2rem, 3vw, 3.5rem);
  font-size: clamp(.94rem, 1.1vw, 1.38rem); line-height: 1.72;
}
.obra-lista li { break-inside: avoid; display: flex; gap: .8em;
                 color: var(--tinta-2); }
.obra-lista .anio { font-family: var(--palo); font-variant-numeric: tabular-nums;
                    letter-spacing: .06em; opacity: .75; flex-shrink: 0; }
/* El título encoge, pero de mala gana: el acompañante cede primero. Sin esto
   el título no encogía nada y en celular se salía de la pantalla. */
.obra-lista .titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                      flex: 0 1 auto; min-width: 0; }
/* Con quién la hizo. Va detrás del título, más tenue, y se recorta antes que
   el título: si no cabe el acompañante se pierde el dato menos importante. */
.obra-lista .con {
  color: var(--tinta-3); font-size: .88em; margin-left: auto; padding-left: 1em;
  flex: 0 3 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85;
}
.obra-lista li.dorada .con { color: var(--tinta-2); }
/* Lo de la Época de Oro se ve; lo demás queda apagado, para que de un vistazo
   sepas qué parte de su carrera es la que estás mirando. */
.obra-lista li.dorada { color: var(--tinta); }
.obra-lista li.dorada .anio { opacity: 1; }

.obra-mas { font-family: var(--palo); font-size: clamp(.72rem, .8vw, .92rem);
            letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
            margin-top: .9rem; flex-shrink: 0; }
.obra-mas:empty { display: none; }

/* ── Estado y ayuda ───────────────────────────────────────────────────────── */

.estado {
  position: fixed; bottom: clamp(1.1rem, 1.6vw, 1.8rem); right: clamp(1.4rem, 2vw, 2.4rem);
  z-index: 61; display: flex; align-items: center; gap: 1.4rem;
  font-family: var(--palo); font-size: clamp(.7rem, .78vw, .9rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
}
.pausa { color: var(--tinta-2); }
.ayuda-pista { opacity: .35; }

/* El atributo `hidden` NO le gana a un `display` de autor: sin esta regla la
   ayuda se queda encima de todo y su desenfoque tapa la diapositiva entera. */
.ayuda[hidden] { display: none; }

.ayuda {
  position: fixed; inset: 0; z-index: 90; background: rgba(8,8,10,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem; backdrop-filter: blur(14px);
}
.ayuda h3 { font-family: var(--display); font-weight: 500;
            font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: .1em; }
.ayuda dl { display: grid; grid-template-columns: auto 1fr;
            gap: .85rem 2rem; align-items: baseline;
            font-size: clamp(.9rem, 1vw, 1.15rem); }
.ayuda dt { font-family: var(--palo); letter-spacing: .18em; text-transform: uppercase;
            color: var(--tinta); text-align: right; white-space: nowrap; }
.ayuda dd { color: var(--tinta-2); }
.ayuda dd b { color: var(--tinta); font-weight: 500; }
.ayuda-pie { font-family: var(--palo); font-size: .8rem; letter-spacing: .14em;
             text-transform: uppercase; color: var(--tinta-3); }

/* ── El cartón de título ──────────────────────────────────────────────────────
   De las 907 películas mexicanas de la época con artículo en Wikipedia, apenas
   18 tienen imagen libre. Los carteles están en Wikipedia bajo uso legítimo y
   no se pueden republicar. Así que la diapositiva de película no finge tener
   una foto: es un cartón tipográfico, como los créditos de apertura. Y de paso
   rompe el ritmo justo cuando llevas cuatro retratos seguidos. */

.lamina-pelicula {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 6rem);
}

.carton { max-width: min(62rem, 82vw); text-align: center; }

.carton-origen {
  font-family: var(--palo); font-size: clamp(.88rem, 1.05vw, 1.3rem);
  letter-spacing: .42em; text-transform: uppercase; color: var(--tinta-3);
  text-indent: .42em; margin-bottom: clamp(1.4rem, 2.4vw, 2.4rem);
}

.carton-titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.4rem, 6.4vw, 7.5rem);
  line-height: .96; letter-spacing: .02em;
  text-transform: uppercase; text-wrap: balance;
}
.carton-titulo.largo { font-size: clamp(2rem, 4.2vw, 4.6rem); letter-spacing: .04em; }

.carton-regla {
  width: clamp(3rem, 6vw, 6rem); height: 1px; margin: clamp(1.8rem, 3vw, 3rem) auto;
  background: var(--tinta); opacity: .35;
}

/* Misma ficha que en la lámina de persona; aquí va centrada como bloque para
   que siga leyéndose como un cartón de créditos y no como una tabla. */
.carton-creditos {
  justify-content: center; text-align: left;
  margin: 0 auto clamp(1.8rem, 3vw, 2.8rem);
  max-width: 46rem;
}
.carton-creditos dt { text-align: right; }


/* ── Pantallas verticales o angostas ──────────────────────────────────────── */

/* ── Pantallas verticales: celular, o el monitor girado ──────────────────────
   `1fr` NO baja del ancho mínimo de su contenido: con la filmografía a dos
   columnas y títulos largos, la única columna medía 456 px dentro de 326 y
   todo se salía por la derecha sin que hubiera scroll que lo delatara.
   `minmax(0, 1fr)` sí deja encoger. */
@media (max-aspect-ratio: 1/1) {
  /* En vertical no cabe todo de un jaque. En vez de recortar la ficha, la
     lámina rueda: la foto arriba con alto fijo y el texto completo debajo.
     El pase sigue avanzando solo; si estás leyendo, con la barra espaciadora
     lo pausas. */
  .lamina { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lamina-persona {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
  }
  .retrato { height: 46vh; }
  .obra-lista { columns: 1; }
  .bio { --lineas-bio: 4; }
  .datos { font-size: clamp(.95rem, 4vw, 1.2rem); }
  .nombre, .nombre.largo { font-size: clamp(2rem, 9vw, 3.4rem); }
  .credito { font-size: .62rem; letter-spacing: .06em; }
}

/* ── La trivia ───────────────────────────────────────────────────────────────
   Las preguntas se arman al vuelo con el censo, así que la pantalla tiene que
   servir igual para una foto enorme con cuatro nombres que para una pregunta
   de texto sin imagen. De ahí que la figura desaparezca sola cuando no hay. */

.lamina-trivia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(15rem, 17vw, 21rem);
  gap: clamp(2rem, 3.5vw, 4.5rem);
  padding: clamp(2rem, 3.6vw, 4.5rem);
}

.examen {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(2rem, 3.5vw, 4.5rem); align-items: center; min-height: 0;
}
.examen.sin-figura { grid-template-columns: minmax(0, 1fr); }
.examen.sin-figura .examen-figura { display: none; }

.examen-figura { position: relative; height: 100%; min-height: 0; overflow: hidden;
                 background: #101013; box-shadow: 0 2rem 4rem rgba(0,0,0,.6); }
.examen-figura::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                        box-shadow: inset 0 0 0 1px rgba(247,245,240,.1); }
.examen-figura img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: grayscale(1) contrast(1.06) brightness(.97);
  opacity: 0; transition: opacity .8s ease;
}
.examen-figura img.puesta { opacity: 1; }
.examen-figura.es-cartel img { object-fit: contain; object-position: center; }

.examen-cuerpo { display: flex; flex-direction: column; justify-content: center;
                 gap: clamp(1rem, 1.8vw, 1.8rem); min-width: 0; }

.examen-pregunta {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 3.6rem); line-height: 1.06;
  letter-spacing: -.01em; text-wrap: balance;
}
.examen-pregunta b { font-weight: 600; font-style: italic; }

.examen-pista {
  font-family: var(--palo); font-size: clamp(.82rem, .95vw, 1.15rem);
  letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-3);
}
.examen-pista:empty { display: none; }

.examen-opciones { list-style: none; display: flex; flex-direction: column;
                   gap: clamp(.5rem, .8vw, .8rem); }

/* Botón de respuesta: dedo grande, y el número a la izquierda para poder
   contestar con el teclado sin mover la mano. */
.opcion {
  width: 100%; text-align: left; display: flex; align-items: baseline; gap: 1em;
  background: transparent; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: .7rem;
  padding: clamp(.7rem, 1.1vw, 1rem) clamp(1rem, 1.5vw, 1.4rem);
  font-family: var(--texto); font-size: clamp(.98rem, 1.15vw, 1.45rem);
  cursor: pointer; transition: background .18s ease, border-color .18s ease, opacity .3s ease;
}
.opcion:hover:not(:disabled) { background: rgba(247,245,240,.07); border-color: rgba(247,245,240,.4); }
.opcion:disabled { cursor: default; }
.opcion .num { font-family: var(--palo); color: var(--tinta-3); font-size: .8em;
               letter-spacing: .1em; flex-shrink: 0; }

.opcion.buena { border-color: var(--tinta); background: rgba(247,245,240,.14); }
.opcion.buena .num { color: var(--tinta); }
.opcion.mala  { opacity: .42; text-decoration: line-through; }
.opcion.apagada { opacity: .3; }

.examen-veredicto {
  font-size: clamp(.92rem, 1.08vw, 1.35rem); line-height: 1.55; color: var(--tinta-2);
  min-height: 3.2em; opacity: 0; transition: opacity .4s ease;
}
.examen-veredicto.puesta { opacity: 1; }
.examen-veredicto b { color: var(--tinta); font-weight: 500; }

/* ── La barra de avance ─────────────────────────────────────────────────── */

.avance {
  display: flex; flex-direction: column; gap: clamp(1.2rem, 2vw, 2rem);
  border-left: 1px solid var(--linea); padding-left: clamp(1.5rem, 2.5vw, 2.6rem);
}
.avance-titulo {
  font-family: var(--palo); font-size: clamp(.78rem, .9vw, 1.05rem);
  letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-3); text-indent: .3em;
}

/* El medidor se llena de abajo hacia arriba: es lo que "va pintando" conforme
   aciertas, y de reojo se ve cuánto llevas sin leer un solo número. */
.avance-medidor {
  position: relative; flex: 1; min-height: 8rem;
  border: 1px solid var(--linea); border-radius: .8rem; overflow: hidden;
  background: rgba(247,245,240,.04);
}
.avance-lleno {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(to top, rgba(247,245,240,.34), rgba(247,245,240,.12));
  transition: height 1.1s cubic-bezier(.16,1,.3,1);
}
.avance-cifra {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: clamp(2.4rem, 4vw, 4.5rem);
  /* El "1" de la Bodoni es un palito finísimo: a esta escala "1%" parecía un
     error de dibujo. Con más peso y cifras de caja alta se lee como cifra. */
  font-weight: 700; font-variant-numeric: lining-nums tabular-nums;
}
.avance-cifra span { font-size: .42em; margin-left: .12em; color: var(--tinta-2); }

.avance-datos {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: baseline;
  font-size: clamp(.86rem, 1vw, 1.2rem);
}
.avance-datos dt { font-family: var(--palo); font-size: .82em; letter-spacing: .2em;
                   text-transform: uppercase; color: var(--tinta-3); }
.avance-datos dd { color: var(--tinta); font-variant-numeric: tabular-nums; }

.avance-pie { display: flex; flex-direction: column; gap: .8rem;
              font-family: var(--palo); font-size: clamp(.74rem, .85vw, 1rem);
              letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.avance-salir {
  background: transparent; border: 1px solid var(--linea); border-radius: .6rem;
  color: var(--tinta-2); padding: .6rem 1rem; cursor: pointer;
  font-family: var(--palo); font-size: 1em; letter-spacing: .16em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.avance-salir:hover { background: rgba(247,245,240,.08); color: var(--tinta); }

/* El botón que entra a la trivia, abajo junto al contador. */
.btn-trivia {
  background: transparent; border: 1px solid rgba(247,245,240,.28); border-radius: .5rem;
  color: var(--tinta-2); padding: .42em 1em; cursor: pointer;
  font-family: var(--palo); font-size: 1em; letter-spacing: .18em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-trivia:hover { background: rgba(247,245,240,.1); color: var(--tinta); border-color: var(--tinta); }

@media (max-aspect-ratio: 1/1) {
  .lamina-trivia { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
                   align-content: start; }
  .examen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
            align-items: start; }
  .examen-figura { height: 38vh; }
  .examen-pregunta { font-size: clamp(1.4rem, 6.5vw, 2.4rem); }
  .examen-veredicto { min-height: 0; }
  /* Los cuatro números del avance en un renglón, y el medidor como barra
     horizontal: en vertical, una columna de 8 rem de alto solo estorba. */
  .avance { border-left: none; border-top: 1px solid var(--linea);
            padding-left: 0; padding-top: 1.2rem; gap: 1rem; }
  .avance-medidor { min-height: 0; height: 3.2rem; flex: none; }
  .avance-cifra { font-size: 1.9rem; }
  .avance-datos { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .avance-datos dt { grid-row: 1; } .avance-datos dd { grid-row: 2; }
  .avance-pie { flex-direction: row; align-items: center; justify-content: space-between; }
}