/* =========================================================================
   mundo — El estado del mundo: el reloj del fin del mundo y el mapa de
   conflictos, en la cabecera de la sección Global.

   Hoja NUEVA (no viene del reparto de la hoja única): va al final de la
   cascada y sólo define clases `mundo__*` que no existen en ninguna otra.

   CLARO, no cabina — corrección del cliente al primer vistazo: el tablero
   oscuro era un bloque café enorme dentro de una página clara. Ahora es un
   panel blanco con líneas guinda y rojas: la guinda ES el `--rojo` de la
   casa (#7e0612), que sobre claro es donde manda. La regla de las barras
   del dial aplica igual aquí: lo oscuro del sitio es el aparato (el dial),
   no los tableros de lectura.
   ========================================================================= */

.mundo {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--linea);
  /* La línea guinda arriba: el mismo gesto del episodio y del aviso, que
     llevan su regla de color al costado. Aquí va arriba porque el panel es
     ancho y un tablero se encabeza, no se margina. */
  border-top: 3px solid var(--rojo);
  border-radius: 0 0 var(--radio) var(--radio);
  background: var(--blanco);
  color: var(--tinta);
}

/* El kicker del tablero, en guinda: la voz de `.ct-nota__seccion`. */
.mundo__titulo {
  margin: 0 0 1.25rem;
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rojo);
}

.mundo__rejilla { display: grid; gap: 1.75rem; }

@media (min-width: 900px) {
  .mundo__rejilla {
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: center;
  }
}

/* ------------------------------------------------------------------ reloj */

.mundo__reloj { text-align: center; }

.mundo__reloj svg {
  width: 8.5rem;
  height: auto;
  display: block;
  margin: 0 auto .9rem;
}

.mundo__cifra {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--tinta);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.mundo__para {
  margin: .25rem 0 0;
  font-size: .85rem;
  color: var(--tinta-tenue);
}

.mundo__fuente { margin: .7rem 0 0; font-size: .72rem; color: var(--tinta-tenue); }
.mundo__fuente a { color: var(--tinta-tenue); }
.mundo__fuente a:hover { color: var(--rojo); }

/* ------------------------------------------------------------------- mapa */

/* La proporción del SVG YA RECORTADO (85° N a 58° S): de polo a polo eran
   960/480 y sobraban bandas de océano vacío arriba y abajo. */
.mundo__mapa {
  position: relative;
  aspect-ratio: 960 / 381;
}
.mundo__mapa img { width: 100%; height: 100%; display: block; }

/* Los marcadores van centrados en su coordenada (el margen negativo es la
   mitad del punto) con un halo QUIETO: la regla de movimiento no da para
   pulsos, y un halo fijo ya dice «aquí arde» sin parpadear. Guinda para lo
   global, rojo claro para lo territorial: las dos líneas del tablero. */
.mundo__marca {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
}
.mundo__marca--global {
  background: var(--rojo);
  box-shadow: 0 0 0 3px rgba(126, 6, 18, .18);
}
.mundo__marca--territorial {
  background: var(--rojo-claro);
  box-shadow: 0 0 0 3px rgba(201, 65, 77, .2);
}

/* ------------------------------------------------------------- las horas
   Ocho ciudades con su hora civil, cada una con su línea guinda: el gesto
   de color del tablero, ciudad por ciudad. Cifras tabulares porque cambian
   cada segundo y no pueden bailar. Es movimiento continuo y está
   justificado como el ecualizador: comunica un estado que no se puede
   pintar quieto — un reloj quieto es un reloj mintiendo. */

.mundo__horas-bloque {
  margin-top: 1.5rem;
  border-top: 1px solid var(--linea);
  padding-top: 1.25rem;
}

/*
 * DOS RENGLONES PAREJOS, siempre.
 *
 * Con `auto-fit` la fila se repartía sola y quedaba coja: cinco celdas
 * arriba, una sola abajo y un hueco a media línea. Las ciudades se fusionan
 * por huso, así que su número cambia con el horario de verano (seis hoy,
 * siete en invierno) y no hay un número de columnas fijo que sirva todo el
 * año.
 *
 * Lo resuelve `horas.js`, que al agrupar pone `--columnas` = la mitad de las
 * celdas (redondeando hacia arriba) y, cuando son nones, manda la última a
 * ancho doble para que el segundo renglón cierre parejo. El 4 de respaldo es
 * para el HTML sin JavaScript, que trae las ocho ciudades sueltas: 4 × 2.
 */
.mundo__horas {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.mundo__hora--ancha { grid-column: span 2; }

.mundo__hora {
  border-left: 2px solid var(--rojo);
  padding-left: .7rem;
}

.mundo__hora-num {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  line-height: 1.2;
}

.mundo__hora-ciudad {
  display: block;
  margin-top: .15rem;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.5;
  color: var(--tinta-tenue);
}

/* En teléfono mandan dos columnas y nadie va a lo ancho: con el ancho de
   media pantalla, una celda doble dejaría a su vecina en nada. */
@media (max-width: 34rem) {
  .mundo__horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mundo__hora--ancha { grid-column: auto; }
}

/* Prosa: justificada y con medida, como el resto del sitio. */
.mundo__nota {
  margin: 1rem 0 0;
  font-size: .72rem;
  color: var(--tinta-tenue);
  max-width: 44rem;
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ listas
   El contenido de verdad para el lector de pantalla: el mapa es decorativo,
   igual que las barras del reparto. */

.mundo__listas {
  display: grid;
  gap: 1.25rem 2rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--linea);
  padding-top: 1.25rem;
}
@media (min-width: 560px) {
  .mundo__listas { grid-template-columns: 1fr 1fr; }
}

.mundo__rotulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-tenue);
}

.mundo__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.mundo__punto--global { background: var(--rojo); }
.mundo__punto--territorial { background: var(--rojo-claro); }

.mundo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tinta-tenue);
}
.mundo__lista li { padding: .3rem 0; }
.mundo__lista li + li { border-top: 1px solid var(--linea); }
.mundo__lista strong { color: var(--tinta); font-weight: 600; }

.mundo__desde { white-space: nowrap; }

.mundo__aviso {
  margin: 1rem 0 0;
  font-size: .72rem;
  color: var(--tinta-tenue);
  max-width: 44rem;
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
}