/* ¡Clasifica!: la cosa arriba en el centro y 3 cajas abajo. La cosa vuela a su caja con
   transform (sin box-shadow; solo se animan transform y opacity). */
.clasifica { background: #E2F4FF; }
.cf-tablero { position: relative; flex: 1; min-width: 0; }
.cf-arriba { position: absolute; inset: 0; }

.cf-intro { position: absolute; left: 0; right: 0; top: 1.5rem; text-align: center; }
.cf-intro__t { font-size: 3.4rem; font-weight: var(--tg-w-strong); letter-spacing: -.03em; }
.cf-intro__s { font-size: 1.6rem; color: var(--tg-muted); }
.cf-contador { position: absolute; left: .4rem; top: .2rem; font-size: 1.3rem; font-weight: var(--tg-w-strong); color: #2A6C99; }

/* La cosa: ocupa todo el tablero para que los % del translate sean los del tablero */
.cf-vuelo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  transform-origin: 50% 4.5rem; transition: transform .6s cubic-bezier(.5, 0, .75, 0), opacity .25s .5s; }
.cf-vuelo--0 { transform: translate(-33.3%, calc(100% - 9.75rem)) scale(.25); opacity: 0; }
.cf-vuelo--1 { transform: translate(0, calc(100% - 9.75rem)) scale(.25); opacity: 0; }
.cf-vuelo--2 { transform: translate(33.3%, calc(100% - 9.75rem)) scale(.25); opacity: 0; }
.cf-cosa { background: #fff; border-radius: 1.6rem; border: .2rem solid #9CCBEA; padding: .4rem 2.2rem .6rem; display: flex; flex-direction: column; align-items: center; }
.cf-cosa__e { font-size: 5rem; line-height: 1.1; }
.cf-cosa__t { font-size: 2.2rem; font-weight: var(--tg-w-strong); letter-spacing: -.02em; line-height: 1.1; }
.cf-quien { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; min-height: 2rem; max-width: 30rem; }
.cf-marca { display: inline-flex; align-items: center; gap: .3rem; background: #fff; border-radius: 1rem; padding: .15rem .5rem .15rem .2rem; border: .15rem solid transparent; font-size: 1.1rem; }
.cf-marca--bien { border-color: var(--tg-online); background: #E3F8EA; }
.cf-marca--mal { border-color: #D64545; background: #FDE6E4; }

/* Cajas */
.cf-cajas { position: absolute; left: 0; right: 0; bottom: 0; height: 10.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cf-caja { border-radius: 1.4rem; border: .25rem solid; background: #fff; display: flex; flex-direction: column; align-items: center; padding: .5rem .6rem; box-sizing: border-box; min-width: 0; }
.cf-caja--0 { border-color: #E8890C; background: #FFF1DD; }
.cf-caja--1 { border-color: #2D7FF9; background: #E1EDFF; }
.cf-caja--2 { border-color: #2F9E63; background: #DDF5E7; }
.cf-caja__nombre { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1.6rem; font-weight: var(--tg-w-strong); letter-spacing: -.02em; line-height: 1.05; text-align: center; max-width: 100%; min-height: 3rem; }
.cf-caja__nombre b { flex: none; font-size: 2.6rem; font-weight: normal; line-height: 1.1; }
.cf-caja__dentro { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: .1rem .3rem; font-size: 1.6rem; line-height: 1.2; overflow: hidden; }
.cf-caja--salta { animation: cf-salta .35s var(--tg-ease); }
@keyframes cf-salta { 0% { transform: scale(1); } 40% { transform: scale(1.05, .94); } 100% { transform: scale(1); } }
.clasifica .cl-jugadores { align-self: center; }