/* La portada de HERIZO HUB — 1 sep 2026.
 *
 * Se llamaba cerca-hero.css y ya hacía más que eso: ahora toca la entrada al
 * módulo, la foto y el tono de la tarjeta del día. El nombre lo dice.
 *
 * El módulo se llama ConectaCuba®, marca registrada. El hub es HERIZO. Esa
 * relación tiene que leerse sin explicarla: por eso el nombre va grande y
 * «Módulo de Herizo Hub» va justo debajo, pequeño.
 *
 * Fidel pidió «que se entiendan los espacios y los lugares». Así que aquí hay
 * tres bloques y nada más: quién es (logo + nombre), qué hace (una línea), y
 * qué puedes hacer (dos botones). Todo lo demás sobra.
 *
 * NO SE TOCA hub.css.
 */

/* ── UNA sola pieza: la foto y lo que dice ───────────────────────────
 *
 * El texto vive dentro de la imagen y la imagen se apaga hasta el navy por
 * abajo. Sube por detrás de la barra de arriba para llegar al borde de la
 * pantalla: una foto con una franja de navy encima no es una ventana, es un
 * recorte pegado.
 */
.cc {
  position: relative;
  margin: -4.7rem calc(var(--space-page) * -1) 0;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.cc__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #060d18;
}
/* LA FOTO SE PASA A LA PALETA, no se limita a oscurecerse.
 *
 * Bajarle luz y saturación no bastaba: seguía siendo «una fotografía puesta
 * encima», con sus naranjas y sus verdes, y por eso se veía pegada. Aquí se
 * convierte a gris y se vuelve a teñir con el azul del módulo, así que ya no
 * tiene colores propios: tiene los nuestros. Deja de ser una foto y pasa a
 * ser el fondo del producto, que resulta que tiene horizonte.
 *
 * `saturate(0)` la deja en blanco y negro; la capa de encima, en modo
 * `color`, le presta el matiz. Lo único que sobrevive de la foto original es
 * su luz — que es lo que la hace bonita. */
.cc__foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/portada-cerca.jpg');
  background-size: cover;
  /* 56 %, no 42 %: es la altura a la que entran en cuadro la acera, el
     muro y la gente. Su maqueta las enseña; la mía las dejaba fuera. */
  /* 7 sep, noche: con la franja de 196 px el 56 % dejaba solo mar («tengo
     un trozo de mar y eso no dice nada»). Al 47 % entran el skyline, las
     farolas y la gente del malecón. Fidel eligió este encuadre entre tres. */
  background-position: center 47%;
  /* 2 sep 2026. Fidel, viendo la portada montada: «los colores de la imagen
     que te pasé son más oscuros, la versión que me das es más clara, más
     azulona, no es igual» y «más contraste en las imágenes».
     Tenía razón en las dos. Iba clara —brightness 0.82— y el teñido partía
     de un azul vivo (#1E4EC0), que es lo que la volvía azulona: con
     `mix-blend-mode: color` el matiz de la foto es ENTERAMENTE el de la capa
     de abajo, así que un azul brillante ahí pinta toda la imagen de azul
     brillante. Se baja la luz, se sube el contraste y el teñido arranca ya en
     navy. Probado a 0.66/0.56/0.48: por debajo de 0.56 el malecón y los
     edificios se funden en negro y el cielo se enfanga. */
  /* SIN FILTRO. Fidel: «la foto se ve muy artificial, muy GPT».
     Era mío: yo le había subido saturación y contraste, y eso es justo lo
     que convierte una fotografía en un render. Cualquier número que ponga
     aquí la vuelve a estropear. Se queda la foto tal como se hizo. */
  filter: none;
}
.cc__foto::after { display: none; }

/* ── El mar NO se mueve ───────────────────────────────────────────────
 *
 * 7 sep 2026. Aquí estaba el efecto «el mar se mueve» (capa con máscara
 * portada-cerca-mar.png, filtro SVG de ondas y deriva de 16 s) que Cursor
 * montó el 2 sep. Fidel lo rechazó y, al verlo en internet el 7 sep, pidió
 * eliminarlo inmediatamente. Se quita entero: HTML, filtro y CSS. La foto es
 * una y está quieta. Si alguien vuelve a proponer movimiento en la portada,
 * primero pregunta.
 */
/* ── LA FOTO VA EN COLOR ─────────────────────────────────────────────
 *
 * 2 sep 2026. Aquí estaba el teñido: la foto se pasaba a gris y se volvía a
 * pintar con el azul del módulo (`mix-blend-mode: color`). La idea era que
 * dejara de parecer «una fotografía pegada». Lo que conseguía era matar el
 * atardecer, que es lo único que esa foto tiene.
 *
 * Fidel, después de tres vueltas mías apretando filtros: «cuando te pido que
 * oscurezcas es al AZUL DE FONDO, el navy, no la imagen», y luego, con su
 * hoja de CERCA delante: «busca una portada como esto, A COLOR».
 *
 * Tenía razón desde el principio y yo estaba resolviendo el problema
 * equivocado. En su hoja el navy es casi negro y la foto —un almendrón
 * turquesa, fachadas doradas— va en su color, sin tocar. El contraste lo
 * hace la PÁGINA, no el filtro.
 *
 * Así que el teñido se apaga entero y el navy baja a #08182f. La foto se
 * queda con su naranja. Volver atrás es quitar el `display: none` de arriba.
 */

/* El fundido hacia el navy, en su propia capa para no pisar el teñido. */
.cc::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* El fundido empieza mucho más abajo. El de antes atacaba desde el 22 % y
     al 76 % ya iba a tres cuartos de navy: se comía justo el tercio donde
     están el muro y la gente, que es lo que Fidel quiere ver. Ahora la foto
     llega limpia hasta dos tercios y solo se apaga al final, para entregar
     el navy sin costura. */
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 66%,
      color-mix(in srgb, var(--navy) 18%, transparent) 82%,
      color-mix(in srgb, var(--navy) 62%, transparent) 93%,
      var(--navy) 100%);
}

.cc__cuerpo {
  position: relative;
  width: 100%;
  padding: 0 var(--space-page) 1.15rem;
}

.cc__n { margin: 0; line-height: 1.04; letter-spacing: -0.035em; }
.cc__n span,
.cc__n em {
  display: block;
  font-size: 1.42rem;
  font-weight: 700;
  font-style: normal;
  text-shadow: 0 2px 22px rgba(6, 14, 26, 0.75);
}
.cc__n span { color: #f2f6fc; }
.cc__n em { color: #9dc0ec; }

.cc__t {
  margin: 0.55rem 0 1rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: rgba(242, 246, 252, 0.82);
  text-shadow: 0 1px 16px rgba(6, 14, 26, 0.85);
  max-width: 20rem;
}

/* Dos acciones, no dos bloques: pastillas del tamaño de su texto. Sobre una
   foto, dos losas del mismo peso tapan justo lo que se ha venido a enseñar. */
.cc__acciones { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.cc__pin { width: 13px; height: 13px; flex: none; opacity: 0.65; }

.cc__b {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 38px;
  padding: 0 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.775rem;
  font-weight: 500;
  text-decoration: none;
  color: #f2f6fc;
  background: rgba(10, 20, 38, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.cc__b--p {
  font-weight: 600;
  border-color: transparent;
  background: linear-gradient(180deg, #2a5ad0, #1a45ae);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px -14px rgba(30, 78, 192, 1);
}
@media (hover: hover) {
  .cc__b:hover { border-color: rgba(255, 255, 255, 0.32); }
  .cc__b--p:hover { background: linear-gradient(180deg, #2f62dc, #1e4ec0); }
}

.cc__priv {
  margin: 0.7rem 0 0;
  font-size: 0.63rem;
  color: rgba(240, 246, 252, 0.5);
  display: flex;
  align-items: center;
  gap: 0.32rem;
  text-shadow: 0 1px 10px rgba(6, 14, 26, 0.8);
}

/* La barra de arriba flota sobre la foto. */
.topbar {
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom-color: transparent;
}
/* ── El tramo entre la foto y los módulos ────────────────────────────
 * Fidel: «este tramo lo veo muy separado y amplio, puede perderse en el
 * teléfono». Tenía razón: entre el candado y el primer icono había hueco de
 * main (2rem originales), el margen de la tarjeta del día, el de la nota de
 * tasas y el del titular de la sección. Cuatro espacios seguidos, ninguno
 * grande por sí solo, y juntos media pantalla.
 *
 * Se aprietan los cuatro. En un teléfono, lo que separa demasiado no separa:
 * desaparece por debajo del borde. */
main { padding-top: 0; gap: 0.7rem; }
.cc__cuerpo { padding-bottom: 0.9rem; }
.cuba-hoy { margin-bottom: 0.45rem; }
.tools-head { margin: 0.35rem 0 0.55rem; }
/* La nota de tasas es un texto largo que solo aparece cuando no hay cifras.
   Cuando las hay, ocupa tres líneas cortas; mientras tanto, que no empuje. */
#rates-note, .tasas-nota { margin: 0.3rem 0 0; line-height: 1.4; }

@media (min-width: 760px) {
  .cc { min-height: 540px; }
  .cc__n span, .cc__n em { font-size: 1.9rem; }
  .cc__t { font-size: 0.95rem; }
}

/* Una sección con `hidden` que no se esconde.
 *
 * `js/cuba-hoy.js` le pone `hidden` mientras no tiene datos, pero
 * `cuba-hoy.css` le da `display: grid`, y una regla de hoja pisa siempre al
 * `[hidden]` del navegador. El día que falle elTOQUE esa barra no desaparece:
 * se queda vacía ocupando sitio. Se vio al renderizar la portada sin red.
 */
.cuba-hoy[hidden] { display: none; }

/* ── La tarjeta del día ──────────────────────────────────────────────
 *
 * Fidel: «el card con los colores del cielo rompe con los colores».
 *
 * Tenía razón, y ese color no era un capricho: el fondo era el CIELO DE CUBA
 * en ese momento, calculado en vivo por js/cuba-hoy.js. Idea suya de agosto.
 * Pero contra el azul del módulo, aquel granate no pertenecía a ninguna
 * paleta.
 *
 * Así que la superficie se apaga del todo —navy con un filo fino— y las
 * divisas, que vivían FUERA, entran dentro separadas por una raya. De dos
 * piezas sueltas se hace una tarjeta. El cielo se sigue calculando; ya no se
 * pinta. Volver atrás es borrar este bloque.
 */
.cuba-hoy {
  background: rgba(12, 22, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  padding: 0.85rem 0.95rem;
  gap: 0;
  margin-bottom: 0.55rem;
}
.cuba-hoy__tarjeta {
  background: none !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.cuba-hoy__fecha { font-size: 0.82rem; }
.cuba-hoy__relojes { font-size: 0.72rem; }
.cuba-hoy__boton {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
}
.cuba-hoy__cambio {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.78rem;
}

/* ── Los módulos, en cinco columnas ──────────────────────────────────
 * Con tres columnas los nueve ocupaban tres filas altas y empujaban el pie
 * fuera de la pantalla. Con cinco caben en dos, y la portada entera se ve de
 * un vistazo: «quiero una sola vista, no hacer scroll».
 */
.hub-tiles { grid-template-columns: repeat(5, 1fr); gap: 0.45rem 0.25rem; }
.hub-tile { padding: 0.2rem 0.08rem 0.3rem; gap: 0.3rem; }
.hub-tile__label { font-size: 0.53rem; letter-spacing: 0.02em; }

/* La casilla del icono también se encoge, y esto NO es cosmético.
 * `hub.css` la fija en 4.6rem = 74 px. En cinco columnas cada columna mide
 * (370 − 4 huecos) / 5 ≈ 71 px, así que los 74 px se salían: la quinta
 * casilla —ENVÍO— quedaba cortada contra el borde derecho. Se vio al
 * renderizar a 402 px, no leyendo la hoja. 3.85rem = 62 px deja holgura. */
.hub-tile__icon { width: 3.85rem; height: 3.85rem; border-radius: 0.95rem; }
.hub-tile__icon img { width: 2.9rem; height: 2.9rem; }

/* En pantallas muy estrechas, cinco no caben. */
@media (max-width: 359px) {
  .hub-tiles { grid-template-columns: repeat(4, 1fr); }
}

/* ── Las divisas, una sola vez ───────────────────────────────────────
 * La portada tiene dos sitios donde caben las tasas: la tarjeta del día
 * (js/cuba-hoy.js) y el marcador viejo de js/tasas.js, que es una línea
 * aparte con las mismas tres cifras. En su maqueta las divisas van DENTRO
 * de la tarjeta y no hay segunda línea.
 *
 * No se toca tasas.js. Cuando la tarjeta trae cifras —`#cuba-hoy-cambio`
 * deja de estar vacío— el marcador y su nota se callan. Si la tarjeta
 * falla, el marcador vuelve solo y sigue diciendo la verdad, incluida la
 * nota de «todavía no publicamos tasa», que ocupa 84 px y no puede
 * desaparecer sin más. Volver atrás es borrar este bloque.
 */
main:has(#cuba-hoy-cambio:not(:empty)) #marcador,
main:has(#cuba-hoy-cambio:not(:empty)) #marcador-hueco { display: none; }

/* ── La foto: UNA FRANJA ANCHA, no un cuadro ─────────────────────────
 *
 * 2 sep 2026. Fidel puso su maqueta al lado de la mía: «la primera es como
 * lo quiero, la segunda es tu propuesta».
 *
 * Estuve un rato buscando el fallo en el filtro —más oscuro, más contraste—
 * y el filtro no era. Medí las dos imágenes: la suya recorre de luz 17 a
 * 161, la mía se quedaba en 104. Pero al igualar los números seguían sin
 * parecerse, y ahí se vio lo que pasaba de verdad: **el encuadre**.
 *
 * El original (assets/portada-cerca.jpg) es VERTICAL, 853×1844. Su maqueta
 * enseña una franja ANCHA —726×500, casi 3:2— con el malecón entero: la
 * acera, la gente andando, las farolas, el skyline y el mar. La mía era una
 * caja casi cuadrada de 402×400, y de una foto vertical una caja cuadrada
 * solo puede sacar cielo y un trozo de horizonte. La gente estaba dentro del
 * recorte, debajo del titular, invisible. Por eso ningún zoom lo arreglaba:
 * ampliar recorta MÁS.
 *
 * Así que la foto deja de llenar la sección y pasa a ser una franja de
 * 300 px —34 % de la pantalla, como la suya— y el texto baja debajo, con el
 * titular montado sobre los últimos 68 px, que es justo donde ella lo pone.
 *
 * La medida que manda es la ALTURA de .cc__foto. Subirla vuelve a estrechar
 * el encuadre y la gente desaparece otra vez.
 */
/* 7 sep 2026 · ENTRADA COMPACTA (boceto de Fidel). La foto es una franja
   de 196 px; el sello del módulo se monta sobre su borde inferior; debajo,
   la etiqueta con el nombre y una línea. Todo el bloque es un enlace. */
.cc { min-height: 0; display: block; text-decoration: none; color: inherit; }
.cc__foto,
.cc::after { inset: 0 0 auto; height: 196px; }
.cc::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 70%,
      color-mix(in srgb, var(--navy) 35%, transparent) 88%, var(--navy) 100%);
}
/* 10 sep 2026: la pastilla se alinea a la DERECHA, en la misma vertical que
   la de «28 novedades» de la tarjeta de abajo, y monta sobre el borde
   inferior de la foto (170 + 30 de alto = 200, o sea 4 px por debajo de los
   196 de la franja). Las dos pastillas quedan una encima de otra y con el
   mismo borde derecho: eso es la simetría que pidió Fidel. */
.cc__cuerpo {
  padding-top: 170px;
  padding-bottom: 0.6rem;
  display: flex;
  justify-content: flex-end;
  /* El margen derecho lleva SUMADO el relleno interior de la tarjeta de abajo
     (0.7rem). Sin esto la pastilla azul quedaba 12 px más a la derecha que la
     ámbar —medido: 344 contra 331.8— porque una se alinea con el borde de la
     página y la otra con el interior de su tarjeta. Los dos bordes derechos
     tienen que caer en la misma vertical: eso es la simetría. */
  padding-right: calc(var(--space-page) + 0.7rem + 1px); /* +1px: el borde de la tarjeta */
}
/* ── 10 sep 2026 · UNA PASTILLA, NO DOS PIEZAS ───────────────────────
 *
 * Aquí estaban `.cc__sello` (el mosaico suelto a 56 px sobre la foto) y
 * `.cc__chip` (la etiqueta ancha con la frase entera). Fidel, viéndolo en la
 * portada: «con esa disposicion parece que el hub se dedica solo a esto,
 * coloniza mucho la entrada». Es la tercera vez que esta franja se pasa de
 * peso —1 sep, 7 sep y hoy— y las tres por lo mismo: la puerta ocupando lo
 * que le toca al hub.
 *
 * Se sustituyen por UNA pastilla con el mosaico dentro. Las medidas NO son
 * de gusto: son las de la pastilla de «28 novedades», que queda justo debajo
 * en la misma vertical. Regla 3 del sistema de diseño —«tamaños iguales
 * entre iguales; la jerarquía se da con el color y con el orden, no
 * encogiendo la letra»—, así que las dos comparten alto (30 px), cuerpo
 * (0.74rem), relleno (0 0.58rem) y separación interna (0.38rem). La de
 * novedades crece un poco para alcanzarla, que es lo que pidió Fidel.
 *
 * Si se cambia una, se cambia la otra. Están emparejadas a propósito.
 *
 * El mosaico grande no se pierde: pasa a ser el icono del módulo en la
 * parrilla de abajo (ver index.html, casilla LUGARES). */
/* 10 sep 2026, segunda vuelta. Fidel: «no entiendo porque no pueden tener el
   mismo tamaño». Tenía razón y mi respuesta anterior era una excusa: las dos
   tenían la misma CAJA (alto, letra, relleno) pero distinto ANCHO, porque
   «Lugares Cubanos» tiene más letras que «28 novedades». Eso no es simetría,
   es coincidencia de altura.
   El ancho se fija aquí, para las dos, y el contenido se centra dentro. La
   medida sale de la más larga de las dos —la azul, con su mosaico y su
   flecha— redondeada a 10.6rem. Si algún día un texto no cupiera, la pastilla
   crecería y ROMPERÍA la pareja: por eso el texto de las dos se elige corto. */
:root { --pastilla-ancho: 10.6rem; } /* 169.6 px: la azul mide 168.6 de contenido */

.cc__pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pastilla-ancho);
  gap: 0.38rem;
  height: 30px;
  padding: 0 0.58rem;
  border-radius: 999px;
  /* Azul hondo, el del botón del módulo (#1E4EC0). Fidel: «ese azul estilo
     Facebook, y no el celeste, me gusta más». Distinto del de Legal (#1c7cf0,
     más claro) y del turquesa de marca. */
  background: #2a56d6;
  border: 1px solid #2a56d6;
  color: #fff;
  font-family: var(--font-headline);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7);
}
/* El mosaico dentro, a 17 px. El margen negativo le devuelve el aire que su
   propio PNG trae de sobra por la izquierda. */
.cc__pastilla-icono {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  flex: none;
  margin-left: -0.16rem;
}
.cc__pastilla-flecha {
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1.5px solid rgba(255, 255, 255, 0.72);
  border-top: 1.5px solid rgba(255, 255, 255, 0.72);
  transform: rotate(45deg);
}
.cc__linea {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
  color: var(--on-surface);
}
.cc:hover .cc__pastilla, .cc:focus-visible .cc__pastilla { filter: brightness(1.08); }

/* ── El pie, subido ──────────────────────────────────────────────────
 * Fidel: «se está perdiendo el pie del hub».
 *
 * Al pasar los módulos a cinco columnas la parrilla acabó 180 px más
 * arriba, pero el pie no subió con ella: entre el último icono y la línea
 * de señal quedaban 3 rem de margen + 1,75 rem de la propia línea, un
 * hueco vacío de casi cien píxeles con el pie asomando por debajo del
 * borde. Se veía el aire, no el pie.
 *
 * Los cuatro respiros del pie se aprietan SOLO en la portada —esta hoja
 * no la carga ningún otro módulo— hasta que caben en pantalla los canales
 * y la fila de estrellas, que es lo que su maqueta enseña debajo de los
 * iconos. El cierre legal sigue debajo: es lo que se lee al final, no lo
 * que hay que ver al entrar.
 */
.pie { margin-top: 0.6rem; padding-bottom: 1.2rem; }
.pie__hilo { margin-bottom: 0.85rem; }
.pie-canales { margin-bottom: 0.35rem; }
.pie-buzon { gap: 0.7rem; }
.pie-cierre { margin-top: 0.9rem; padding-top: 0.8rem; }

/* El navy de la página, más hondo. Es la petición literal de Fidel —«oscurece
   el azul de fondo»— y es lo que deja respirar a la foto en color: contra el
   #0c2552 de tokens.css el atardecer se apagaba. NO se toca tokens.css: la
   variable se redefine aquí, y esta hoja solo la carga la portada. */
:root { --navy: #08182f; }

/* ── LOS SELLOS, TODOS DEL MISMO TAMAÑO ──────────────────────────────
 *
 * Fidel: «los sellos son de distintos tamaños». Los medí en pantalla, no a
 * ojo, recortando cada casilla del render y contando hasta dónde llega el
 * dibujo:
 *
 *     divisas 97 %   recargas 90 %   los otros seis 72 %   becas 63 %
 *
 * Tres causas distintas, no una:
 *  1. `recargas-tile.css` clava su icono en 3.5rem, así que mi tamaño común
 *     no le llegaba nunca.
 *  2. `icon-becas-transparente.png` trae el dibujo al 84 % de su lienzo
 *     —los demás al 96 %—, o sea que con el mismo `width` se dibuja más
 *     pequeño. El margen está DENTRO del fichero.
 *  3. Los seis normales iban al 72 %, demasiado sueltos dentro de su caja.
 *
 * Se igualan los nueve al 86 % de la casilla, compensando en cada uno el
 * margen que trae su propio PNG. Si algún día se cambia un icono hay que
 * volver a medirlo: el número de aquí depende del fichero, no del gusto.
 */
.hub-tile__icon img,
.hub-tile[data-tool="recargas"] .hub-tile__icon img,
.hub-tile[data-tool="recargas"] .recargas-icon__ondas { width: 3.47rem; height: 3.47rem; }
.hub-tile[data-tool="divisas"] .hub-tile__icon img { width: 3.28rem; height: 3.28rem; }
/* LUGARES, 10 sep 2026. Probé 3.05rem compensando que su PNG trae el dibujo
   al 100 % del lienzo (los demás al 93-97 %), y en pantalla se veía MENOR que
   sus vecinos: medido en el navegador, 48.8 px contra los 55.5 px de los
   otros ocho. Fidel: «tiene que encajar en el tamaño». La compensación no
   procede aquí porque todos estos iconos son ya cuadrados redondeados
   macizos, no siluetas: la casilla del dibujo ES el dibujo. Se queda con la
   medida común y no lleva regla propia. */
/* BECAS con `transform`, no con `width`: la casilla es una rejilla y encoge a
   su hijo, así que subirle el ancho topaba en 60 px y no crecía. El
   `transform` no pasa por el reparto de la rejilla. 1.143 = 0.96 / 0.84, que
   es exactamente el margen de más que trae su PNG. */
.hub-tile[data-tool="becas"] .hub-tile__icon img { transform: scale(1.143); }
/* 6 oct 2026 · Ayudas: el PNG va recortado al borde del cuadrado (100 % del
   lienzo), como Lugares; se baja al 93 % para que mida lo mismo que el resto. */
.hub-tile[data-tool="ayudas"] .hub-tile__icon img { transform: scale(0.93); }

/* ── LA TARJETA: TASAS Y NOVEDADES, NADA MÁS ─────────────────────────
 *
 * 2 sep 2026. Fidel: «la fecha y el horario, sácalo de la portada. En su
 * lugar las tasas y al lado las novedades (que merecen un destaque), algo
 * que indique que ahí pasan novedades».
 *
 * La fecha sobraba —el teléfono ya la lleva— y la hora de Cuba sigue en la
 * barra de arriba, que es donde estaba antes de que la duplicáramos aquí.
 * Lo que no sobra es el cambio del día y el aviso de que hay algo nuevo:
 * son las dos únicas cosas de esta portada que cambian solas.
 *
 * El orden lo hace CSS, no el JS: `cuba-hoy.js` sigue escribiendo fecha y
 * relojes en sus nodos —se siguen usando dentro del pliegue— y aquí solo se
 * ocultan y se reordena la fila. Devolverlos es borrar el `display: none`.
 */
.cuba-hoy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.62rem 0.7rem;
}
.cuba-hoy__tiempo { display: none; }

/* Las tasas, a la izquierda y con peso: son la cifra que se viene a mirar. */
.cuba-hoy__cambio {
  order: 1;
  /* `1 1 0` y `min-width: 0`, no `auto`: con `auto` la línea de tasas pedía
     su ancho entero, el botón no cabía y se caía a una segunda fila. Medido:
     se partía en dos. */
  /* 10 sep 2026. Fidel: «la barra de cup tiene que salir todo en una misma
     linea, no se puede cortar como en la imagen». Antes era `flex: 1 1 0` con
     `min-width: 0`, o sea: la línea de tasas cedía TODO su ancho a la pastilla
     y se partía en dos («MLC 450» caía sola). Medido a 390 px: pedía 199 px y
     le quedaban 182.
     Ahora manda ella. `nowrap` le prohíbe romperse y `flex: 1 1 auto` le deja
     pedir su ancho entero; cuando la pastilla ya no cabe al lado, es la
     PASTILLA la que baja a una segunda fila (la tarjeta ya era `flex-wrap:
     wrap`). Las cifras del día no se encogen para que quepa un botón. */
  flex: 1 1 auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.34rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.cuba-hoy__val { font-size: 0.86rem; }
.cuba-hoy__cod { font-size: 0.52rem; }

/* Las novedades, a la derecha y DESTACADAS. Aquí sí va el ámbar: es el único
   sitio de la portada donde algo reclama atención, así que no compite con
   nada. El punto late solo cuando de verdad hay algo (`--hay`, lo pone el
   JS); sin novedades la pastilla se queda callada en blanco translúcido. */
.cuba-hoy__tarjeta {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
}
/* Si la pastilla ha bajado de fila, el hueco entre las dos filas lo pone el
   `gap` de la tarjeta (0.4rem); no hace falta nada más. */
/* 10 sep 2026: crece para igualar a `.cc__pastilla`, la puerta de Lugares
   Cubanos que queda justo encima en la misma vertical. Fidel: «tiene que ser
   iguales en la simetria con el logo pequeño al lado», y «si es necesario
   agrandas un poco el de novedades». Son las mismas cuatro medidas.
   NO se toca una sin la otra. */
.cuba-hoy__boton {
  height: 30px;
  justify-content: center;
  min-width: var(--pastilla-ancho);
  padding: 0 0.58rem;
  font-size: 0.74rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  font-weight: 600;
  gap: 0.38rem;
}
.cuba-hoy__boton--hay {
  color: #ffe6b0;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border-color: color-mix(in srgb, var(--amber) 42%, transparent);
}
.cuba-hoy__boton--hay .cuba-hoy__punto-aviso { width: 7px; height: 7px; }

/* El pliegue, cuando se abre, ocupa la fila entera por debajo. */
.cuba-hoy__pliegue { order: 3; flex: 1 0 100%; }