/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULO DIVISAS · 24-25 de agosto de 2026
   ═══════════════════════════════════════════════════════════════════════════

   Qué es esto y de dónde viene.

   El 22 de agosto se construyó un módulo de divisas y se retiró EL MISMO DÍA,
   revisándolo pieza por pieza: el recorrido no tenía recorrido, la comparación
   oficial/informal no decía nada que se pudiera usar, y del movimiento del día
   solo se mueve el MLC. De cuatro cosas aguantaba una —la calculadora— y una
   sola cosa no justifica un módulo. El razonamiento entero sigue escrito en
   `_to_delete/modulo-divisas-22ago/LEEME.md`.

   Esto NO es aquel módulo otra vez. Lo que ha cambiado es lo que se enseña:

     · Fuera el recorrido. Argumentado con los datos de estos ocho días: el
       dólar dio 665 en siete de ellos. La única que se mueve es la MLC, y la
       MLC es justo la que acordamos no poner de titular. Vuelve el día que el
       dólar tenga al menos cinco valores distintos en treinta días.
     · Fuera la comparación oficial/informal como bloque suelto. Ahora la
       brecha se lee sola dentro de «Las 4 tasas», que es donde significa algo.
     · Dentro, y esto es lo nuevo: LAS CUATRO TASAS. Petición literal de Fidel
       —«en Cuba hay 4 tasas, 3 oficiales (segmento I, II, III) y LA INFORMAL;
       esto es lo que hay que explicar»—. Nadie lo cuenta así de claro, y es lo
       que en una foto de Instagram no cabe.

   Reglas heredadas que aquí NO se tocan:
     · Si el dato tiene más de 12 horas no se enseña. Se declara el hueco.
     · elTOQUE se cita siempre: lo obligan sus términos de uso (comprobado el
       21 ago 2026). La forma es libre; la mención no.
     · La compra y la venta oficiales NO se calculan (decisión del 19 ago): el
       margen lo fija una Circular del BCC que no es pública, y deducirlo sería
       inventarlo.
     · De aquí no se sale hacia Recargas (decisión del 17 ago).

   Sobre el CSS: `hub.css` no se toca sin permiso (AGENTS.md §3). Todo lo de
   este módulo vive en este fichero, y lo que reutiliza —`.card-moment`,
   `.tool-intro__sheet`, `.rates-sello`, `.solo-lectores`— viene de fuera sin
   modificarlo.

   ── Repaso del 25 de agosto ────────────────────────────────────────────────
   Correcciones de Fidel viendo la tarjeta en pantalla, y qué se hizo con cada
   una:
     · «Arriba a la derecha va el logo del módulo, CUP» → hecho en el HTML.
     · «El botón de cómo funciona igual al de Pasaporte y Legales» → se copia
       la forma de allí y desaparece la hoja modal.
     · «La calculadora como la tuvimos antes… mientras más sencillo mejor» →
       una línea, dos monedas, sin botón de invertir y sin el CUP de adorno.
     · «Los espacios con aire sin sentido, eliminarlos» → medidos y recortados
       uno a uno; no se ha tocado ni un tamaño de letra.                       */

/* El azul del módulo, sampleado del logo CUP que envió Fidel
   (`assets/iconos/icon-divisas-transparente.png`: el degradado va de #1533C2
   arriba-izquierda a #4574EA abajo-derecha). Se usa el extremo claro, que es
   el que se lee sobre el navy del hub. Mismo criterio que --legal-blue y
   --aduana-orange, que también salieron de su icono. */
.card-moment--divisas,
.div-como {
  --divisas-blue: #4574ea;
}

/* ── La cabecera de la tarjeta ─────────────────────────────────────────── */

.card-moment--divisas {
  padding: 1.05rem 1.05rem 1.1rem;
}

/* 25 ago 2026 · El sello estaba en 1,75rem cuando Pasaporte, Legales y Aduana
   lo tienen en 2,5rem: un 30 % más pequeño, y eso sí era un fallo y no una
   impresión. Lo encontró Fidel: «que se vea bien, tanto en el portal como
   dentro, en el módulo cuando aparece en la caja arriba a la derecha».

   Va a 2,58rem y no a 2,5rem por la misma compensación óptica que en la
   portada: el cuadro azul del CUP es un 4,7 % más ancho que alto y los otros
   tres son cuadrados, así que a igualdad de caja se lee más bajo. Con 2,58 su
   ALTO iguala al de Pasaporte y su ancho se pasa un 4 %, que es el eje que el
   ojo no usa para comparar aquí. Mismo factor que la baldosa de la portada
   (x1,034), para que no se vea de un tamaño fuera y de otro dentro. */
.card-moment--divisas .card-moment__seal {
  top: 0.75rem;
  right: 0.75rem;
  width: 2.58rem;
  height: 2.58rem;
  /* El icono del módulo es un cuadrado con esquinas propias, no un sello
     redondo: si se recorta en círculo se le comen las letras. */
  border-radius: 0.4rem;
  /* El mismo filo blanco que en la baldosa de la portada, por el mismo motivo
     y con la misma técnica. El porqué completo está en `css/tasas.css`. */
  filter:
    drop-shadow(1px 0 0 #ffffff)
    drop-shadow(-1px 0 0 #ffffff)
    drop-shadow(0 1px 0 #ffffff)
    drop-shadow(0 -1px 0 #ffffff);
}

.div-kicker {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.div-kicker__flag {
  font-size: 0.85rem;
  letter-spacing: 0;
}

.div-titulo {
  margin: 0.12rem 0 0;
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

/* ── El botón «Cómo funciona» ──────────────────────────────────────────────
   Copiado de `pasaporte/css/pasaporte.css`, que a su vez copió el de Legal, y
   se copia A PROPÓSITO: dos botones que hacen lo mismo en dos módulos tienen
   que verse igual, o cada uno se lee como una cosa distinta. Lo único que
   cambia es el color, que es el del módulo.

   Sí, esto es la tercera copia del mismo componente en el repositorio. Está
   anotado en DECISIONES.md como deuda con fecha de salida: el día que un
   CUARTO módulo lo pida, sale de los cuatro sitios a un `css/como.css`
   compartido. Llevarlo hoy a `hub.css` necesita permiso (AGENTS.md §3).

   El aire de arriba y de abajo es el mismo (1,15rem en Pasaporte, aquí 0,9):
   el botón se lee como una cosa suelta entre dos, que es lo que es. Fidel
   corrigió exactamente esto en Pasaporte el 22 de agosto —«recae sobre el
   documento de abajo y no mantiene una distancia correcta con las letras de
   encima»— y aquí se nace ya con la corrección puesta.                      */

.div-como-links {
  display: flex;
  margin: 0.9rem 0;
}

.div-como-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--divisas-blue) 38%, transparent);
  background: color-mix(in srgb, var(--divisas-blue) 12%, transparent);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.div-como-btn:active,
.div-como-btn.is-open {
  border-color: color-mix(in srgb, var(--divisas-blue) 75%, white);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--divisas-blue) 55%, #0a1628) 0%,
    color-mix(in srgb, var(--divisas-blue) 22%, #0a1628) 100%
  );
  color: #fff;
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .div-como-btn { transition: none; }
  .div-como-btn:active,
  .div-como-btn.is-open { transform: none; }
}

/* 29 ago 2026 · Sin texto al lado, la pastilla se queda redonda. El sentido
   no se pierde: lo lleva el `aria-label`, que es quien se lo cuenta a un
   lector de pantalla. 44 px es el mínimo que se toca sin fallar en un móvil
   —decisión del 25—, así que de ahí no baja. */
.div-como-btn--solo {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.div-como-btn__icon {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--divisas-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* 25 ago 2026 · «Cómo funciona» vuelve a ser una tarjeta sobre fondo
   desenfocado, y no un panel desplegado dentro de la página. Petición de
   Fidel: «no quiero que se despliegue junto a la otra información de la
   pantalla… como las card de entrada de cada módulo, con opción de ir atrás
   enseguida».

   REVIERTE la decisión de esta misma mañana. Aquella la había igualado a la
   de Pasaporte y Legales para que hubiera un solo gesto en todo el hub; él
   eligió, con esa contradicción delante, que Divisas se abra distinto. Queda
   escrito aquí para que nadie lo «arregle» dentro de un mes sin saberlo.

   La forma se copia de `.module-info-overlay` de `hub.css` —el mismo velo
   navy al 78 % y el mismo desenfoque de 6 px— para que la tarjeta se sienta
   de la misma familia que la ficha de entrada del módulo, que es justo la
   referencia que él dio. No se reutiliza esa clase porque su panel viene con
   texto centrado y un icono arriba, y aquí dentro va un acordeón. */
.div-como-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* 29 ago 2026 · Pasa de `flex-end` a centrada, y no es un capricho: con el
     acordeón dentro la tarjeta ocupaba casi toda la pantalla y pegarla abajo
     se leía como una hoja que sube. Con la nota breve, esa misma regla la deja
     pegada al borde inferior y PARECE CORTADA. Medido a 390 px antes de
     tocarlo. El relleno es para que no toque los lados en un móvil estrecho. */
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  background: color-mix(in srgb, var(--navy-deep) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.div-como-fondo[hidden] { display: none; }

@media (min-width: 640px) {
  .div-como-fondo {
    align-items: center;
    padding: 1.5rem;
  }
}

.div-como {
  position: relative;
  width: 100%;
  max-width: 26rem;
  /* Alta pero nunca más que la pantalla: el acordeón crece al abrir una ruta
     y en un móvil apaisado se saldría por abajo. Con el tope, rueda dentro. */
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #16294a 0%, var(--navy-deep) 60%);
  border: 1px solid color-mix(in srgb, var(--divisas-blue) 40%, transparent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: 0 -12px 40px color-mix(in srgb, #000000 45%, transparent);
}

@media (min-width: 640px) {
  .div-como { border-radius: var(--radius-card); }
}

.div-como__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.div-como__t {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

/* 44 px de lado: es el mínimo que se toca sin fallar en un móvil. El 21 de
   agosto una ✕ de 29 px quedó tapada por el texto de al lado y estuvo semanas
   sin poder pulsarse sin que nadie lo notara. */
.div-como__x {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #ffffff 7%, transparent);
  color: var(--on-surface-muted);
  font-size: 1rem;
  cursor: pointer;
}

.div-como__x:hover,
.div-como__x:focus-visible {
  color: var(--on-surface);
  background: color-mix(in srgb, #ffffff 13%, transparent);
}

/* La salida visible y grande. La ✕ es para quien la busca arriba; esto es
   para quien acaba de leer y quiere volver sin buscar nada. */
/* 29 ago 2026 · Aquí vivían el acordeón de tres rutas y sus clases de texto.
   Se fueron los dos: el acordeón porque dos de sus tres rutas estaban mejor
   contadas dentro de las pestañas, y las clases de texto porque la nota nueva
   usa las de `hub-nota`, al final de esta hoja. No queda nada que reutilizar
   aquí — si quedara, alguien lo copiaría por costumbre.                      */

/* ── Las pestañas ──────────────────────────────────────────────────────────
   Sustituyen al scroll. La condición era «no quiero scroll, si puede ser por
   ventanas u otra forma ok»: cada pestaña entra entera en pantalla.

   La activa se marca con la raya ámbar de abajo y con el color del texto. No
   con un fondo: un fondo detrás de la pestaña la convierte en un botón, y
   entonces las otras dos parecen apagadas en vez de disponibles.            */

/* 6 oct 2026 · Pestañas en PÍLDORAS (opción C, elegida por Fidel): «que no
   estén sueltas flotando». Tres botones redondeados del mismo ancho; la
   elegida, rellena en ámbar. */
.div-tabs {
  display: flex;
  gap: 0.4rem;
}

.div-tab {
  flex: 1 1 0;
  padding: 0.5rem 0.4rem;
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  border-radius: 999px;
  background: none;
  color: var(--on-surface-muted);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.div-tab.is-on {
  background: var(--amber);
  border-color: var(--amber);
  color: #1b1b1b;
}

.div-tab:hover:not(.is-on),
.div-tab:focus-visible:not(.is-on) {
  color: color-mix(in srgb, var(--on-surface) 80%, transparent);
}

/* SIN altura mínima, y es un cambio del 25 de agosto que conviene explicar.
   La llevaba —16,5rem— para que la tarjeta no diera un salto al cambiar de
   pestaña, porque el botón «Cómo funciona» estaba ABAJO y se movía bajo el
   dedo. Ahora el botón está arriba, encima de las pestañas, así que nada se
   mueve: lo único que cambia de alto es el contenido, que es lo normal en
   unas pestañas.

   Lo que quitarla resuelve es lo que pidió Fidel: «los espacios con aire sin
   sentido, eliminarlos». Con la altura fija, «La calle» dejaba **90 píxeles
   de vacío** debajo de la calculadora solo para igualar a la pestaña más
   larga. Ese hueco no decía nada. */
.div-pane {
  padding-top: 0.8rem;
}

/* ── 1 · La calle ──────────────────────────────────────────────────────── */

.div-grande {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.div-grande__v {
  font-family: var(--font-headline);
  font-size: clamp(2.1rem, 11vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  /* Cifras de ancho fijo: sin esto el número baila al refrescarse. */
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

.div-grande__c {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-muted);
}

.div-otras {
  display: flex;
  gap: 1.25rem;
  margin: 0.55rem 0 0;
}

.div-otra {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.div-otra__cod {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-surface-muted);
}

.div-otra__val {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

.div-hueco {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.card-moment--divisas .rates-sello {
  margin: 0.45rem 0 0;
  font-size: 0.64rem;
}

/* ── La calculadora ────────────────────────────────────────────────────────
   Una línea:   [ 100 ]  [USD ▾]              66.700 CUP

   El orden de la fila es el orden en que se piensa: cuánto, de qué, y cuánto
   sale. El resultado va al final y alineado a la derecha, que es donde cae la
   vista al terminar de leer. Es la misma forma que tenía en la portada desde
   el 22 de agosto, y Fidel pidió volver a ella.

   Los 16 píxeles de los campos no son decorativos: por debajo de esa medida,
   Safari acerca la página al tocar un campo. Salió de que Fidel tocara uno en
   su iPhone y la página «se ampliara y perdiera los bordes» (21 ago 2026). Va
   en píxeles y no en rem porque el umbral de Safari es en píxeles reales.   */

.div-calc__rotulo {
  margin: 1rem 0 0.45rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.div-calc__rotulo b {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.div-calc {
  display: grid;
  grid-template-columns: 4.9rem auto 1fr;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem;
  border-radius: 0.8rem;
  border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
}

/* Centrado porque casi siempre lleva dos o tres dígitos: pegado a la
   izquierda parece un campo a medio rellenar. */
.div-calc__in {
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 75%, transparent);
  color: var(--on-surface);
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.div-calc__sel {
  padding: 0.45rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 75%, transparent);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}

.div-calc__res {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-headline);
  font-size: clamp(1.15rem, 5vw, 1.45rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

/* «CUP» en la letra de texto y no en la de titular, para que acompañe a la
   cifra en vez de competir con ella. */
.div-calc__cup {
  margin-left: 0.3em;
  font-family: var(--font-body);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--ice-blue);
}

/* ── 2 · Las 4 tasas ───────────────────────────────────────────────────── */

.div-entradilla {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.div-entradilla b {
  display: block;
  margin-bottom: 0.12rem;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

.div-enlace {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--turquoise);
  text-decoration: none;
}

/* La banderita acompaña al enlace del Banco Central. Pequeña a propósito: es
   una señal de a dónde lleva, no un adorno. */
.div-enlace [aria-hidden="true"] {
  font-size: 0.85em;
  letter-spacing: 0;
}

.div-enlace:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.div-t4 {
  display: grid;
  gap: 0.35rem;
}

.div-t4__f {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border-radius: 0.6rem;
  border: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
}

/* Los segmentos I y II se ven, pero apagados. No se esconden —existen y
   negarlo confundiría más— y no se destacan: a casi nadie de quien entra aquí
   le aplican. Que ocupen sitio sin robar la vista es exactamente su papel. */
.div-t4__f--apagada {
  opacity: 0.62;
}

.div-t4__f--tuya {
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 8%, var(--navy-deep));
}

.div-t4__f--calle {
  border-color: color-mix(in srgb, var(--turquoise) 35%, transparent);
  background: color-mix(in srgb, var(--turquoise) 7%, var(--navy-deep));
}

.div-t4__q {
  font-family: var(--font-body);
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--on-surface-muted);
}

.div-t4__q b {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--on-surface);
}

.div-t4__v {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  color: var(--on-surface);
}

.div-t4__f--tuya .div-t4__v { color: var(--amber); }
.div-t4__f--calle .div-t4__v { color: var(--turquoise); }

.div-nota {
  margin: 0.6rem 0 0;
  font-family: var(--font-body);
  font-size: 0.6rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

/* ── 3 · Monedas ───────────────────────────────────────────────────────── */

.div-monedas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.div-monedas__f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.38rem 0.5rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

.div-monedas__cod {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-surface-muted);
}

/* 27 ago 2026 · Fuera. Teñía de turquesa la fila del MLC dentro de la tabla
   del BCC para avisar de que ese número era de otra fuente. Un color no es
   una fuente: la fila se ha sacado de la tabla y el aviso sobra. */

/* ── El atributo `hidden`, que aquí no basta solo ──────────────────────────
   24 ago 2026 · CAZADO EN PANTALLA, no leyendo el código.

   El acordeón salió con las tres rutas abiertas a la vez, justo lo contrario
   de lo que pidió Fidel. El JS ponía bien el `hidden`; lo que fallaba era el
   CSS: `[hidden]` vale `display: none` en la hoja del navegador, y CUALQUIER
   regla de clase propia —`display: grid`, `display: flex`— le gana por
   especificidad. El elemento quedaba oculto para un lector de pantalla y
   visible para los ojos.

   Es la misma trampa que hub.js documenta para `.rates-informal`. Se arregla
   como en `pie.css`: diciéndolo explícitamente, sin `!important`.

   Regla para lo que venga: en este módulo, todo lo que se oculte con `hidden`
   y tenga `display` propio, se apunta aquí. */
.div-pane[hidden],
.div-grande[hidden],
.div-otras[hidden],
.div-hueco[hidden],
.div-calc[hidden],
/* ═══ 25 ago 2026 · El fondo de la tarjeta, plano ═══════════════════════════
 *
 * Decisión de Fidel: «de las tres ventanas quiero eliminar el gradiente del
 * fondo, no siempre funciona igual, quiero un color oscuro neutro, azul o
 * negro».
 *
 * `hub.css` da a `.card-moment` un degradado de cuatro paradas que va de
 * #37698c a #081a39. Aquí se sustituye por un plano, y el color elegido es el
 * FINAL de ese degradado: así la tarjeta no cambia de familia, solo deja de
 * variar. Vale para las tres pestañas, porque cuelga de la tarjeta y no del
 * panel.
 *
 * No se toca `hub.css` (AGENTS.md §3): esta regla es igual de específica más
 * el modificador, así que gana sin `!important`. Las otras tres tarjetas de
 * módulo —Pasaporte, Legales y Aduana— conservan su degradado.
 * ------------------------------------------------------------------------ */
.card-moment--divisas {
  background: #0c1b39;
}

/* ═══ Las 4 tasas, rehecho ═════════════════════════════════════════════════
 *
 * La unidad se dice UNA vez, a la derecha de la entradilla, en vez de cuatro
 * veces pegada a cada cifra. Petición de Fidel: «tienes que poner pequeño que
 * los valores de 638 y 670 son cup por 1 dollar, se tiene que entender».
 * ------------------------------------------------------------------------ */
.div-entradilla__l {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.div-unidad {
  flex: none;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--on-surface-muted);
}

/* Las dos que le tocan a quien lee: más altas y con la cifra más grande que
   antes, porque ahora no compiten con otras dos filas iguales encima. */
.div-t4__f--tuya,
.div-t4__f--calle {
  padding: 0.62rem 0.7rem;
}

.div-t4__f--tuya .div-t4__v,
.div-t4__f--calle .div-t4__v {
  font-size: 1.5rem;
  line-height: 1.05;
}

/* 27 ago 2026 · Aquí vivía `.div-otras2`, el desplegable que escondía los
   segmentos I y II. Se ha ido con su marcado: las cuatro tasas vuelven a
   verse, cada una con su explicación dentro. Ver el bloque del final. */
/* Las dos fuentes, juntas al pie. Antes cada una colgaba de su rótulo de
   grupo; sin rótulos, se juntan aquí y siguen estando siempre a la vista, que
   es lo que Fidel pidió el 24: «enlace a BCC todo el tiempo». */
.div-fuentes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.75rem 0 0;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ═════════════════════════════════════════════════════════════════════════
   27 ago 2026 · LAS 4 TASAS, LA BRECHA Y LOS DESPLEGABLES
   ═════════════════════════════════════════════════════════════════════════

   Guía visual de Fidel del 27: «dar mayor protagonismo a las cifras que a los
   textos», «colocar las explicaciones dentro de desplegables», «no mostrar
   las cuatro explicaciones abiertas simultáneamente».

   Lo que sube aquí es lo que hace que las CUATRO quepan: la explicación de
   cada tasa deja de ocupar sitio permanente y pasa a abrirse. Sin eso, cuatro
   filas serían justo la pantalla que Fidel paró el 25 de agosto.
   ═══════════════════════════════════════════════════════════════════════ */

/* Rótulos de grupo. Hacen el trabajo de un párrafo: se ve que hay tres
   oficiales y una que no lo es, sin decirlo con una frase. */
.div-t4__g {
  margin: 0.8rem 0 0.3rem;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-surface-muted) 85%, transparent);
}

.div-t4__g:first-child { margin-top: 0.1rem; }

.div-t4__b + .div-t4__b { margin-top: 0.35rem; }

/* La fila es ahora un BOTÓN. Hay que reponer lo que el navegador le pone a un
   button y aquí estorba —fondo propio, borde, tipografía heredada, alineación
   centrada—, o la fila deja de parecer una fila. */
.div-t4__f {
  width: 100%;
  grid-template-columns: 1fr auto auto;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* El triángulo. Se dibuja con bordes y no con un carácter para que gire con
   la fila abierta y no dependa de la tipografía. */
.div-t4__x {
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-left: 0.26rem solid transparent;
  border-right: 0.26rem solid transparent;
  border-top: 0.3rem solid color-mix(in srgb, var(--on-surface-muted) 80%, transparent);
  transition: transform 0.15s ease;
}

.div-t4__f.is-open .div-t4__x { transform: rotate(180deg); }

/* La fila abierta pierde la esquina de abajo: el panel la continúa. */
.div-t4__f.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.div-t4__c {
  padding: 0.5rem 0.7rem 0.6rem;
  border: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
  border-top: 0;
  border-radius: 0 0 0.6rem 0.6rem;
  background: color-mix(in srgb, var(--navy-deep) 70%, transparent);
}

.div-t4__c p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.div-t4__c p + p { margin-top: 0.25rem; }

/* Los segmentos I y II ya no llevan su explicación fija debajo, así que la
   opacidad del 62 % los apagaba de más: ahora solo se distinguen por no
   llevar color. Su papel sigue siendo estar sin robar la vista. */
.div-t4__f--apagada { opacity: 0.78; }

/* ── La brecha ─────────────────────────────────────────────────────────────
   Un bloque, tres líneas y un desplegable. La fórmula no está en pantalla
   —está en `pintarBrecha()`— porque enseñarla obliga a leerla para entender
   una cifra que ya se entiende sola. */
.div-brecha {
  margin-top: 0.9rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid color-mix(in srgb, #ffffff 9%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 62%, transparent);
}

.div-brecha__g {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.div-brecha__v {
  margin: 0.15rem 0 0;
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

.div-brecha__p {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-surface-muted);
}

.div-brecha__t {
  margin: 0.1rem 0 0;
  font-family: var(--font-body);
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

/* ── Los desplegables de texto ─────────────────────────────────────────────
   Uno solo para los tres —«¿Qué tasa debo mirar?», «¿Qué significa esta
   diferencia?» y «¿Por qué puede variar?»—, porque son la misma cosa: una
   pregunta corta que abre dos o tres líneas. Se quita el triángulo nativo y
   se dibuja el mismo de las filas, para que la pantalla tenga UN gesto y no
   dos parecidos. */
.div-desp {
  margin-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
  padding-top: 0.6rem;
}

.div-desp > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-muted);
}

.div-desp > summary::-webkit-details-marker { display: none; }

.div-desp > summary::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: auto;
  border-left: 0.26rem solid transparent;
  border-right: 0.26rem solid transparent;
  border-top: 0.3rem solid color-mix(in srgb, var(--on-surface-muted) 80%, transparent);
  transition: transform 0.15s ease;
}

.div-desp[open] > summary::after { transform: rotate(180deg); }

.div-desp--brecha {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
}

.div-desp__p,
.div-desp__l {
  margin: 0.4rem 0 0;
  font-family: var(--font-body);
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.div-desp__p + .div-desp__p { margin-top: 0.3rem; }

.div-desp__l {
  padding-left: 1rem;
}

.div-desp__l li + li { margin-top: 0.2rem; }

/* La frase corta que se queda a la vista en «La calle» y en «Monedas». Es UNA
   línea a propósito: el desarrollo se abre, no se lee de arriba abajo. */
.div-aviso {
  margin: 0.7rem 0 0;
  font-family: var(--font-body);
  font-size: 0.63rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA NOTA — la forma que pidió Fidel el 29 de agosto
   ═══════════════════════════════════════════════════════════════════════════

   Enseñó una alerta nativa de iOS: «este tipo de card, más adaptada a móviles,
   es la que quiero mostrar en todo el hub… sello de Herizo con presencia,
   texto resumido, tamaño y disposición como esta».

   Lo que se copia es EL TAMAÑO Y LA DISPOSICIÓN, no el color: la alerta que
   enseñó es clara porque iOS la pinta así, y el hub es azul marino. Copiar
   también el color habría metido una tarjeta blanca en medio de un módulo
   oscuro, que es la clase de cosa que se ve bien en la captura de donde salió
   y mal en el sitio donde va.

   Las clases se llaman `hub-nota` y no `div-nota` a propósito: él ya ha dicho
   que esta forma se repite «en todo el hub» y que la quiere también en el pie.
   Hoy vive aquí porque solo la usa Divisas; el día que la use un segundo
   módulo, sube a una hoja compartida — la regla de tres de siempre. Se anota
   para que quien la necesite la mueva en vez de copiarla.                    */

.hub-nota {
  /* ~300 px, no el ancho entero: una alerta se lee de un vistazo; una hoja a
     pantalla completa se lee como una página y pide desplazarse. */
  width: min(300px, 100%);
  padding: 1.15rem 1.15rem 1rem;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  background: color-mix(in srgb, #16243c 92%, transparent);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  text-align: left;
}

.hub-nota__sello {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 0 0.7rem;
  object-fit: contain;
}

.hub-nota__t {
  margin: 0 0 0.5rem;
  font-family: var(--font-headline);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--on-surface);
}

.hub-nota__p {
  margin: 0 0 0.45rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.hub-nota__p--fuerte {
  color: var(--on-surface);
}

/* El botón ancho de abajo, como el «Ahora no» de la alerta que enseñó. La
   línea de arriba es la que separa el texto de la acción, igual que allí. */
.hub-nota__ok {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.72rem 1rem;
  /* 44 px de alto mínimo: es lo que se toca sin fallar en un móvil. */
  min-height: 44px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  border-radius: 0 0 0.9rem 0.9rem;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--divisas-blue-claro, #7aa2ff);
  cursor: pointer;
}

.hub-nota__ok:hover,
.hub-nota__ok:focus-visible {
  background: color-mix(in srgb, #ffffff 6%, transparent);
}


/* ═══ 6 oct 2026 · La calculadora en su propia card ══════════════════════
 * Fidel: «separar la calculadora, que se pierde… CALCULADORA DE DIVISAS con
 * más protagonismo, respetando dimensiones y equilibrio del hub». Usa la
 * misma tarjeta (`.card-moment--divisas`); aquí solo su cabecera y el aire.
 * ------------------------------------------------------------------------ */
.div-calc-card {
  /* <main> separa sus hijos 32 px (flex + gap). Las dos cards de Divisas
     van como pareja: se dejan a ~14 px. Medido en el Chrome de Fidel. */
  margin-top: -1.1rem;
}

.div-calc-card__cab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.div-calc-card__ic {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.35rem;
  flex: none;
}

.div-calc-card__t {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.div-calc-card__d {
  margin: 0.45rem 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* La fila de «Última semana» dentro del bloque de la subida de la calle. */
.div-brecha__fila {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.55rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, #ffffff 9%, transparent);
  font-family: var(--font-body);
  font-size: 0.66rem;
  color: var(--on-surface-muted);
  font-variant-numeric: tabular-nums;
}