/* Módulo «hora»: la página de «qué hora es en …».
   Esa página responde una sola pregunta y la respuesta va a lo grande: la hora se lee de lejos, y
   lo demás —si es de día, cuándo amanece, la fecha— la acompaña en pequeño. */
.reloj-caja{margin:1.4rem 0 2rem;padding:1.4rem 1.5rem 1.2rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--deep)}
.reloj{margin:0;font:800 clamp(3.4rem,13vw,6.5rem)/.92 var(--display);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--acento)}
.reloj-sub{margin:.5rem 0 0;font-size:1.05rem;color:var(--haze)}
.reloj-fecha{margin:.2rem 0 0;color:var(--dim)}
/* La hora del visitante: lo que de verdad ha venido a saber quien está en otro huso. La pinta el
   navegador, así que hasta que no lo hace no ocupa sitio. */
.reloj-tu{margin:.9rem 0 0;padding:.5rem .85rem;border-left:4px solid var(--acento);border-radius:0 var(--r) var(--r) 0;
  background:var(--deep2);font-weight:600}
@media (max-width:35rem){.reloj-caja{padding:1.1rem 1rem 1rem}.reloj-sub{font-size:1rem}}