*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--navy);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 19 ago 2026: la barra inferior fija ya no existe, así que este hueco
     tampoco hace falta. Antes era calc(var(--nav-height) + 1.25rem) para
     que la barra no tapara el final de la página. El pie se cierra solo. */
  padding-bottom: 0;
}

/* Zonas de comunicación / cuerpo: Inter de lectura (--font-body, 400).
   Enunciados (títulos) y cifras/acentos en color mantienen --font-headline.
   Pesos cargados: 400, 500, 600, 700 — nunca 800+. */
.i18n-note,
.tool-card__desc,
.tool-card__soft,
.field__label,
.nav-item span,
.rate-block__code,
.aduana-disclaimer,
.pas-disclaimer,
.pas-atribucion,
.pas-actualizado,
.gaceta-disclaimer,
.disclaimer-footer {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.005em;
}

img {
  display: block;
  max-width: 100%;
}

button,
select,
input {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 0 var(--space-page);
}

/* —— Header —— */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.75rem;
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--navy) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--neutral) 80%, transparent);
  margin-inline: calc(var(--space-page) * -1);
  padding-inline: var(--space-page);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.brand-wordmark {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-transform: uppercase;
}

.icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface) 18%, transparent);
  background: color-mix(in srgb, var(--neutral) 55%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.icon-btn:active {
  transform: scale(0.94);
  background: color-mix(in srgb, var(--selection) 35%, var(--neutral));
}

.icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--on-surface);
  fill: none;
  stroke-width: 1.75;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

/* Selector de idioma compartido (ES · EN). */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  padding: 0.12rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--neutral) 50%, transparent);
}

.lang-switch button {
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.28rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--on-surface) 72%, transparent);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.lang-switch button.is-active,
.lang-switch button[aria-pressed="true"] {
  /* Turquesa de marca: el rosa era correcto como “selección”, pero en un
     control de idioma se lee como alerta/CTA. La marca marca el idioma activo
     sin competir con el ámbar de los datos. */
  background: color-mix(in srgb, var(--turquoise) 28%, transparent);
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--turquoise) 55%, transparent);
}

.lang-switch button:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 1px;
}

/* —— Cabecera de subpágina: volver + marca centrada ——
   Compartida por Gaceta, Aduana y Pasaporte. Vivía duplicada en los tres
   CSS de módulo; se consolida aquí al aparecer el tercer caso. */
.topbar--sub {
  gap: 0.5rem;
}

.subpage-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.subpage-brand__mark {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  flex-shrink: 0;
}

.subpage-brand__wordmark {
  font-family: var(--font-headline);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar--sub .lang-switch {
  flex-shrink: 0;
}

/* Nota legal sobre traducción — presente en todas las zonas del HUB */
.i18n-note {
  margin: 0.75rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--on-surface-muted) 88%, transparent);
}

.icon-btn-spacer {
  width: auto;
  min-width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

/* Reloj de Cuba — chip discreto, turquesa de marca */
.reloj-cuba {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--turquoise) 28%, transparent);
  background: color-mix(in srgb, var(--turquoise) 10%, transparent);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--turquoise);
}

.reloj-cuba__hora {
  font-variant-numeric: tabular-nums;
  color: var(--turquoise);
}

/* Clima de Cuba — 11 ago 2026. Más discreto que el reloj a propósito: sin
   pastilla, sin borde, solo icono + temperatura. Toca para rotar entre
   las tres zonas (ver clima.js). Empieza oculto y solo aparece cuando
   Open-Meteo confirma un dato real -- nunca se aproxima un clima. */
.clima-cuba {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.3rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--on-surface-muted);
  transition: background 0.12s ease, transform 0.12s ease;
}

.clima-cuba:active {
  transform: scale(0.94);
  background: color-mix(in srgb, var(--on-surface) 10%, transparent);
}

.clima-cuba__icono {
  font-size: 0.9rem;
  line-height: 1;
}

.clima-cuba__temp {
  font-variant-numeric: tabular-nums;
}

.clima-cuba__ciudad {
  font-weight: 500;
  color: var(--on-surface-muted);
}

.icon-btn svg.icon-back {
  width: 1.35rem;
  height: 1.35rem;
  stroke: var(--on-surface);
  fill: none;
  stroke-width: 2;
}

/* —— Main —— */
main {
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* —— Tarjeta-momento —— */
.card-moment {
  position: relative;
  background: var(--card-moment-gradient);
  border-radius: var(--radius-card);
  padding: 1.35rem 1.25rem 1.4rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #37698c 45%, transparent);
  border-bottom-color: transparent;
}

/* Portada: mismo conversor, menos marco. La cifra grande del resultado no se toca. */
.card-moment--hub {
  padding: 0.95rem 1rem 1rem;
}

.card-moment--hub .card-moment__seal {
  top: 0.65rem;
  right: 0.65rem;
  width: 1.65rem;
  height: 1.65rem;
}

.card-moment--hub .section-label {
  font-size: 0.64rem;
  margin-bottom: 0.5rem;
}

.card-moment--hub .rates-informal {
  gap: 0.45rem;
  padding-bottom: 0.75rem;
}

.card-moment--hub .rate-block + .rate-block {
  padding-left: 0.45rem;
}

.card-moment--hub .rate-block__code {
  font-size: 0.7rem;
}

.card-moment--hub .rate-block__value {
  font-size: clamp(1.45rem, 7vw, 2.1rem);
}

.card-moment--hub .converter {
  padding-top: 0.75rem;
  gap: 0.65rem;
}

.card-moment--hub .converter__row {
  gap: 0.45rem;
}

.card-moment--hub .field {
  padding: 0.5rem 0.65rem;
}

.card-moment--hub .field select,
.card-moment--hub .field__static {
  font-size: 0.95rem;
}

.card-moment--hub .swap-btn {
  width: 1.9rem;
  height: 1.9rem;
}

.card-moment--hub .amount-field {
  gap: 0.25rem;
}

.card-moment--hub .amount-field input {
  padding: 0.6rem 0.75rem;
  font-size: 1.05rem;
}

.card-moment--hub .converter__result {
  padding: 0.15rem 0 0;
}

.card-moment__seal {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  opacity: 0.92;
  pointer-events: none;
}

/* —— Recordatorio de qué hace el módulo, tocando su propio icono ——
   10 ago 2026: el panel de presentación del HUB se ve solo la primera
   vez por herramienta (decisión de producto); esto le da a quien vuelve
   y no recuerda una forma de pedirlo de nuevo, sin repetirlo de más.
   Reusa el mismo lenguaje del punto que parpadea en el botón de
   "Consultas y correcciones" de Gaceta/Aduana -- no es un componente
   nuevo, es la señal de "esto tiene algo, tocá acá" que el HUB ya usa. */
.module-info-trigger {
  all: unset;
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.module-info-trigger--seal {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
}

.module-info-trigger .card-moment__seal {
  position: static;
  top: auto;
  right: auto;
  width: 100%;
  height: 100%;
}

/* 25 ago 2026, permiso explícito de Fidel para tocar hub.css.
   LA INSIGNIA SALE DE ENCIMA DEL ICONO.

   Tercera vuelta sobre esta señal. El 17 de agosto se hizo un 15 % más
   grande y se le subió el suelo del parpadeo porque no se veía. Hoy se
   probó otra vez a lo mismo —blanca, con anillo, más grande— y Fidel lo
   paró con la frase que resuelve el problema: «ensucia los iconos».

   Ahí estaba el fallo de las tres vueltas. Se estaba mirando el contraste
   de la insignia y el que perdía era el ICONO, que es la identidad del
   módulo. Un círculo de cualquier color encima del sello lo tapa. No hay
   color que arregle eso.

   Así que la señal deja de ser un símbolo encima del icono y pasa a ser
   una etiqueta legible debajo: «¿Qué hace?». El sello queda limpio, y
   nadie tiene que aprender qué significa una «i» sobre un dibujo.

   El <span class="module-info-badge">i</span> sigue en el HTML de los ocho
   módulos y se esconde desde aquí: quitarlo de ocho ficheros no aporta
   nada y sí puede romper alguno. La etiqueta la pone module-info.js, que
   ya corre en todas las páginas de módulo — así el texto pasa por i18n en
   vez de quedarse clavado en español dentro de un `content` de CSS. */
.module-info-badge {
  display: none;
}

.module-info-label {
  position: absolute;
  top: calc(100% + 0.22rem);
  /* Por defecto pega a la IZQUIERDA del disparador. Gaceta y Envíos no llevan
     el sello en la esquina: lo tienen en fila, a la izquierda del masthead, y
     con `right: 0` la etiqueta se salía de la pantalla (x = -21 px, visto el
     25 ago 2026). Los que sí lo llevan en la esquina la pegan a la derecha,
     debajo. */
  left: 0;
  white-space: nowrap;
  /* Sin pastilla: ni borde ni fondo. Es un pie de foto, no un botón que
     compite con el sello. La primera versión llevaba borde y relleno y
     Fidel la paró: «demasiado grande». Y tenía razón por una razón de
     fondo — este control hace un trabajo pequeño. La ficha del módulo YA
     se abre sola la primera vez que alguien entra (ver hasSeen en
     module-info.js); esta etiqueta existe solo para el que vuelve y no se
     acuerda. Un trabajo pequeño no se anuncia con un botón. */
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--on-surface-muted);
  opacity: 0.75;
}

.module-info-trigger--seal .module-info-label {
  left: auto;
  right: 0;
}

/* —— Ficha modal: recrea la presentación de la primera vez, bajo demanda ——
   10 ago 2026 (ronda 2): en vez de una nota chica que se despliega en la
   propia pantalla, la insignia "i" abre una ficha compacta -- mismo
   lenguaje visual que witness-panel (hoja que sube desde abajo, blur de
   fondo), pero en violeta (--info-note) para no confundirse con el
   testigo de consultas/correcciones, que es ámbar. */
.module-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--navy-deep) 78%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.module-info-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 640px) {
  .module-info-overlay {
    align-items: center;
    padding: 1.5rem;
  }
}

.module-info-panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: linear-gradient(180deg, #16294a 0%, var(--navy-deep) 60%);
  border: 1px solid color-mix(in srgb, var(--info-note) 40%, transparent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--info-note) 12%, transparent),
    0 -12px 40px color-mix(in srgb, #000000 45%, transparent);
  padding: 1.6rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
  transform: translateY(12px);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}

.module-info-overlay.is-open .module-info-panel {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .module-info-panel {
    border-radius: var(--radius-card);
  }
}

.module-info-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--info-note), transparent);
  opacity: 0.85;
}

.module-info-panel__icon {
  width: 4.2rem;
  height: 4.2rem;
  margin-top: 0.3rem;
  border-radius: 1.1rem;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #0a1526 0%, #060d1a 100%);
  border: 1px solid color-mix(in srgb, #000000 40%, var(--navy-deep));
}

.module-info-panel__icon img {
  width: 3.2rem;
  height: 3.2rem;
  object-fit: contain;
}

.module-info-panel__title {
  margin: 0.2rem 0 0;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.module-info-panel__desc {
  margin: 0.2rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--info-note) 22%, var(--navy-deep));
  border: 1px solid color-mix(in srgb, var(--info-note) 48%, transparent);
  color: var(--on-surface);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .module-info-badge {
    animation: none;
  }

  .module-info-overlay,
  .module-info-panel {
    transition: none;
  }
}

.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: 0.75rem;
}

/* Informal + conversor: un solo bloque; la tasa oficial BCC va como nota
   secundaria bajo el resultado (.rates-official), no como franja propia. */
.rates-informal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin: 0;
  padding-bottom: 1.2rem;
}

.rate-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.rate-block + .rate-block {
  border-left: 1px solid color-mix(in srgb, white 12%, transparent);
  padding-left: 0.65rem;
}

.rate-block__code {
  font-size: 0.78rem;
  color: var(--on-surface-muted);
  font-weight: 500;
}

.rate-block__value {
  font-family: var(--font-headline);
  font-size: clamp(1.85rem, 8.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f1f5fa;
}

.converter {
  border-top: 1px solid color-mix(in srgb, white 12%, transparent);
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.converter__row {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
}

.field {
  flex: 1;
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  border-radius: var(--radius-control);
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.field--static {
  cursor: default;
  pointer-events: none;
}

.field:active,
.field.is-pressed {
  transform: scale(0.98);
}

/* transform en el padre rompe el menú nativo del <select> en WebKit/Blink */
.field:has(select):active,
.field:has(select).is-pressed {
  transform: none;
}

.field:focus-within,
.field.is-active {
  border-color: var(--selection);
  background: color-mix(in srgb, var(--selection) 12%, var(--navy-deep));
}

.field__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.field select,
.field__static {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  color: inherit;
}

.field select {
  position: relative;
  z-index: 1;
  /* Amplía el hit-target hasta el chevron sin taparlo visualmente */
  padding-right: 1.25rem;
  margin-right: -1.25rem;
}

.field select option {
  background: var(--navy);
  color: var(--on-surface);
}

.chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  position: relative;
  z-index: 0;
}

.swap-btn {
  align-self: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  background: color-mix(in srgb, var(--neutral) 55%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  pointer-events: none;
}

.swap-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 1.75;
}

.amount-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.amount-field input {
  width: 100%;
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  border-radius: var(--radius-control);
  padding: 0.85rem 0.9rem;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.amount-field input:focus {
  border-color: var(--selection);
  background: color-mix(in srgb, var(--selection) 12%, var(--navy-deep));
}

.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amount-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.converter__result {
  text-align: center;
  padding: 0.35rem 0 0.15rem;
}

.converter__result-value {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 7vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f5fa;
  line-height: 1;
}

.converter__result-unit {
  margin-left: 0.35rem;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ice-blue);
}

/* Tasa oficial BCC: secundaria al informal (protagonista arriba). Mismo
   lenguaje visual que .dash-cup-equiv en Aduana. */
.rates-official {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, white 10%, transparent);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.rates-official:empty {
  display: none;
}

.rates-official__link {
  color: color-mix(in srgb, var(--on-surface) 70%, var(--turquoise));
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.rates-official__link:hover {
  color: var(--on-surface);
}

/* —— Herramientas —— */
.tools-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.tools-head svg {
  width: 0.95rem;
  height: 0.95rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.tools-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* —— Parrilla de la portada (no sustituye .tool-card: sigue en puentes/Aduana) ——
   3 columnas: con 5 iconos hoy queda 3 arriba + 2 abajo: a medida que se añadan
   más mini-apps, el grid las va acomodando solo, sin rediseñar nada. */
.hub-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.4rem;
  margin: 0;
}

.hub-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.3rem 0.2rem 0.5rem;
  border-radius: var(--radius-card);
  border: none;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease;
}

.hub-tile:active,
.hub-tile.is-pressed {
  transform: scale(0.97);
}

/* Casilla que arropa el icono: negro/navy más oscuro que la página,
   pequeña y ajustada al icono, no una tarjeta grande de fondo. */
.hub-tile__icon {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 1.15rem;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #0a1526 0%, #060d1a 100%);
  border: 1px solid color-mix(in srgb, #000000 40%, var(--navy-deep));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
    0 0.3rem 0.75rem color-mix(in srgb, #000000 40%, transparent);
  flex-shrink: 0;
}

.hub-tile__icon img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display: block;
}

/* Market: icono de app con fondo. Llena la casilla. */
.hub-tile[data-tool="market"] .hub-tile__icon {
  overflow: hidden;
}

.hub-tile[data-tool="market"] .hub-tile__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-tile__label {
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--on-surface);
}

@media (hover: hover) {
  .hub-tile:hover .hub-tile__label {
    color: #ffffff;
  }

  .hub-tile:hover .hub-tile__icon {
    border-color: color-mix(in srgb, #000000 25%, var(--navy-deep));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent),
      0 0.4rem 1rem color-mix(in srgb, #000000 50%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-tile {
    transition: none;
  }
}

/* —— Presentación al entrar a una herramienta: tarjeta de cristal ——
   12 ago 2026: componente compartido para (1) primer toque de un icono en
   el HUB (hub.js) y (2) primera entrada a un módulo + insignia "i"
   (module-info.js). Antes flotaba sin marco; producto pidió una tarjeta de
   cristal esmerilado (ver notificación iOS de referencia): capa translúcida
   con blur, borde fino luminoso y sombra suave -- se sigue percibiendo la
   app detrás, pero la info queda "encerrada" de forma elegante. El overlay
   solo atenúa un poco el fondo; el frost fuerte lo pone la propia tarjeta
   (.tool-intro__sheet) con su backdrop-filter. */
.tool-intro {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--navy-deep) 34%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tool-intro.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tool-intro__sheet {
  width: 100%;
  max-width: 23rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 0.85rem;
  padding: 1.3rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1.75rem;
  /* Cristal: sheen en degradado sobre una base navy translúcida; el blur del
     fondo (backdrop-filter) es lo que da el esmerilado real. */
  background:
    linear-gradient(
      157deg,
      color-mix(in srgb, #ffffff 17%, transparent) 0%,
      color-mix(in srgb, #ffffff 5%, transparent) 46%,
      color-mix(in srgb, var(--navy-deep) 26%, transparent) 100%
    ),
    color-mix(in srgb, var(--navy-deep) 50%, transparent);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
  box-shadow:
    0 26px 70px color-mix(in srgb, #000000 55%, transparent),
    0 3px 12px color-mix(in srgb, #000000 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 5%, transparent);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s ease;
}

.tool-intro.is-open .tool-intro__sheet {
  transform: translateY(0) scale(1);
}

.tool-intro__row {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 0.85rem;
}

.tool-intro__icon {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 1.15rem;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #0a1526 0%, #060d1a 100%);
  border: 1px solid color-mix(in srgb, #000000 40%, var(--navy-deep));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
    0 0.3rem 0.75rem color-mix(in srgb, #000000 40%, transparent);
  flex-shrink: 0;
}

.tool-intro__icon img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  display: block;
}

.tool-intro__icon:has(img[src*="market-icon"]) {
  overflow: hidden;
}

.tool-intro__icon img[src*="market-icon"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-intro__copy {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding-top: 0.2rem;
}

.tool-intro__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.tool-intro__desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--on-surface-muted);
}

.tool-intro__question {
  margin: 0.4rem 0 0;
  font-family: var(--font-headline);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface);
}

.tool-intro__actions {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.3rem;
}

.tool-intro__back,
.tool-intro__continue {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  padding: 0.75rem;
  border-radius: var(--radius-control);
  font-family: var(--font-headline);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}

.tool-intro__back {
  border: 1px solid color-mix(in srgb, var(--on-surface) 22%, transparent);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  color: var(--on-surface-muted);
}

.tool-intro__continue {
  border: 1px solid var(--on-surface);
  background: var(--on-surface);
  color: var(--navy-deep);
}

.tool-intro__back:active,
.tool-intro__continue:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .tool-intro__back:hover {
    background: color-mix(in srgb, var(--on-surface) 14%, transparent);
    color: var(--on-surface);
  }

  .tool-intro__continue:hover {
    background: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-intro,
  .tool-intro__sheet {
    transition: none;
  }
}

.tool-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1rem;
  border-radius: 1rem;
  /* Reposo: ~25 % más apagada; se enciende en hover / toque */
  border: 1px solid color-mix(in srgb, var(--on-surface) 4.5%, transparent);
  background: color-mix(in srgb, #0f1d30 75%, var(--navy-deep));
  cursor: pointer;
  overflow: visible;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tool-card:active,
.tool-card.is-pressed {
  transform: scale(0.98);
  /* Borde neutro azul hielo (antes rosa --selection); el interior recupera el
     tono pleno, sin lavado. Pedido 12 ago 2026: el rosa competía demasiado. */
  background: #0f1d30;
  border-color: var(--ice-blue);
}

.tool-card:active .tool-card__soft,
.tool-card.is-pressed .tool-card__soft {
  color: var(--on-surface);
}

.tool-card:active .tool-card__desc,
.tool-card.is-pressed .tool-card__desc {
  color: var(--on-surface-muted);
}

.tool-card:active .tool-card__icon,
.tool-card.is-pressed .tool-card__icon {
  background: #0a1524;
}

.tool-card:active .tool-card__icon svg,
.tool-card.is-pressed .tool-card__icon svg {
  stroke: var(--on-surface);
}

.tool-card:active .tool-card__chevron,
.tool-card.is-pressed .tool-card__chevron {
  stroke: var(--on-surface-muted);
  opacity: 1;
}

.tool-card__icon {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, #0a1524 75%, transparent);
  border: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: visible;
  z-index: 1;
  transition: background 0.18s ease;
}

.tool-card__icon svg {
  position: relative;
  z-index: 1;
  width: 1.3rem;
  height: 1.3rem;
  stroke: color-mix(in srgb, var(--on-surface-muted) 75%, transparent);
  fill: none;
  stroke-width: 1.7;
  transition: stroke 0.18s ease;
}

/* Señal / latido: anillos concéntricos alrededor del icono (hover y toque). */
.tool-card__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.tool-card__rings span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--on-surface) 50%, transparent);
  box-sizing: border-box;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
}

.tool-card:active .tool-card__rings span,
.tool-card.is-pressed .tool-card__rings span {
  animation: tool-ring-pulse 1.35s ease-out infinite;
}

.tool-card:active .tool-card__rings span:nth-child(2),
.tool-card.is-pressed .tool-card__rings span:nth-child(2) {
  animation-delay: 0.22s;
}

.tool-card:active .tool-card__rings span:nth-child(3),
.tool-card.is-pressed .tool-card__rings span:nth-child(3) {
  animation-delay: 0.44s;
}

@keyframes tool-ring-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.72);
    opacity: 0.55;
    border-color: color-mix(in srgb, var(--on-surface) 55%, transparent);
  }
  55% {
    opacity: 0.22;
    border-color: color-mix(in srgb, var(--turquoise) 35%, var(--on-surface) 25%);
  }
  100% {
    /* 1.3 × 0.85 ≈ 1.1 (−15 % respecto a la pasada) */
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
    border-color: color-mix(in srgb, var(--turquoise) 20%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card:active .tool-card__rings span,
  .tool-card.is-pressed .tool-card__rings span,
  .tool-card:hover .tool-card__rings span {
    animation: none;
    opacity: 0;
  }
}

.tool-card__copy {
  flex: 1;
  min-width: 0;
}

/* 29 ago 2026 · `display: block` en los dos, CON PERMISO EXPLÍCITO de Fidel
   (AGENTS.md §3).

   `puentes.js` pinta el título y la descripción como <span>. Sin `display`
   se quedan en `inline`, se imprimen PEGADOS en la misma línea —«…en La
   HabanaDirección, horario y teléfono»— y el `margin-bottom` de aquí abajo no
   hace nada, porque en un elemento inline el margen vertical no ocupa.

   Estaba así EN LO PUBLICADO, en Pasaporte y en Envíos, y no lo cazaba nada:
   la página da 200, no hay un solo error de consola y en una captura pequeña
   parece un párrafo largo. Lo encontró el 29 abrir la página y mirarla, y se
   confirmó con `getComputedStyle`, que devolvía `inline` en los dos.

   Se arregla aquí y no en cada módulo porque el fallo es del componente
   compartido: son tres módulos con el mismo defecto. */
.tool-card__title {
  display: block;
  margin: 0 0 0.2rem;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.25;
}

/* Palabra clave siempre en ámbar pleno (única luz en reposo). */
.tool-card__accent {
  color: var(--amber);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tool-card__soft {
  font-size: inherit;
  font-weight: 400;
  color: color-mix(in srgb, var(--on-surface-muted) 75%, transparent);
  transition: color 0.18s ease;
}

.tool-card__desc {
  display: block;   /* ver la nota de .tool-card__title, 29 ago 2026 */
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--on-surface-muted) 75%, transparent);
  line-height: 1.4;
  transition: color 0.18s ease;
}

.tool-card__chevron {
  width: 1.15rem;
  height: 1.15rem;
  stroke: color-mix(in srgb, var(--on-surface-muted) 75%, transparent);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  opacity: 0.75;
  transition: stroke 0.18s ease, opacity 0.18s ease;
}

/* —— Marca "punto de luz" en tarjetas .tool-card que usan el logo pequeño en
   vez del icono grande con anillos (subnavegación interna y puentes entre
   módulos). Apagada por defecto, se enciende al tocar o pasar el ratón.
   Consolidada aquí 8 ago 2026: vivía duplicada en aduana.css y
   pasaporte.css (subnav de Aduana, puentes de Pasaporte); con Envíos como
   tercer uso tocaba subirla, según la regla de tres de
   HERIZO_PRODUCT_PRINCIPLES.md §5.1. No se toca donde ya se usaba. —— */
.tool-card__mark {
  /* 12 ago 2026: +30% de tamaño (0.95 -> 1.25rem) por pedido de producto. */
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.3;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

/* Al encender, el icono SOLO se ilumina (color pleno). Se retiró el resplandor
   rosa (box-shadow --selection) y el recorte circular -- pedido 12 ago 2026. */
.tool-card:active .tool-card__mark {
  opacity: 1;
  filter: none;
}

@media (hover: hover) {
  .tool-card:hover .tool-card__mark {
    opacity: 1;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card__mark {
    transition: none;
  }
}

/* —— Bottom nav —— */
/* Apagada por defecto: solo la pestaña activa está en blanco, el resto
   muted; al tocar o pasar el ratón se enciende en rosa. Corrección
   4 ago 2026 (opción B elegida): icono + texto en línea, fondo
   translúcido en vez de franja sólida, para bajar el peso visual. */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: var(--nav-height);
  padding: 0.3rem 0.75rem calc(0.3rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 6%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 0.6rem;
  border: none;
  background: transparent;
  color: var(--on-surface-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

/* Icono (campana de Alertas) y punto de luz (Mercados/Herramientas/Legal)
   se tratan como el mismo tipo de elemento: apagados por defecto, se
   encienden en ámbar (mismo tono que "en revisión" y los números de
   divisa) al tocar o pasar el ratón. El texto es independiente: pasa
   de gris apagado a blanco pleno, nunca cambia de color. Sin fondo de
   píldora — solo se ilumina el propio icono/punto. */
.nav-item svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 1.7;
  transition: stroke 0.15s ease, filter 0.15s ease;
}

.nav-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--on-surface-muted);
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nav-item.is-active {
  color: var(--on-surface);
}

.nav-item.is-active .nav-dot,
.nav-item.is-active svg {
  background: var(--on-surface);
  stroke: var(--on-surface);
}

.nav-item:active {
  transform: scale(0.96);
  color: var(--on-surface);
}

.nav-item:active .nav-dot {
  background: var(--amber);
  transform: scale(1.6);
  box-shadow: 0 0 8px 2px var(--amber);
}

.nav-item:active svg {
  stroke: var(--amber);
  filter: drop-shadow(0 0 5px var(--amber));
}

@media (min-width: 640px) {
  .app-shell {
    padding-top: 0.5rem;
  }
}

@media (hover: hover) {
  .tool-card,
  .nav-item,
  .icon-btn,
  .field:not(.field--static) {
    transition: transform 0.12s ease, background 0.12s ease,
      border-color 0.12s ease, box-shadow 0.12s ease;
  }
  /* Field (conversor, búsqueda): mantiene su realce propio; no es tool-card. */
  .field:not(.field--static):hover {
    border-color: color-mix(in srgb, var(--selection) 45%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--selection) 18%, transparent),
      0 6px 20px color-mix(in srgb, var(--selection) 14%, transparent);
    transform: translateY(-1px);
  }
  /* tool-card: borde neutro azul hielo al encender, SIN glow ni sombra rosa
     (12 ago 2026). El icono se ilumina solo con color; nada de resplandor. */
  .tool-card:hover {
    border-color: color-mix(in srgb, var(--ice-blue) 55%, transparent);
    background: #0f1d30;
    transform: translateY(-1px);
  }
  .tool-card:hover .tool-card__soft {
    color: var(--on-surface);
  }
  .tool-card:hover .tool-card__desc {
    color: var(--on-surface-muted);
  }
  .tool-card:hover .tool-card__icon {
    background: #0a1524;
  }
  .tool-card:hover .tool-card__icon svg {
    stroke: var(--on-surface);
  }
  .tool-card:hover .tool-card__chevron {
    stroke: var(--on-surface-muted);
    opacity: 1;
  }
  .tool-card:hover .tool-card__rings span {
    animation: tool-ring-pulse 1.35s ease-out infinite;
  }
  .tool-card:hover .tool-card__rings span:nth-child(2) {
    animation-delay: 0.22s;
  }
  .tool-card:hover .tool-card__rings span:nth-child(3) {
    animation-delay: 0.44s;
  }
  .nav-item:hover {
    color: var(--on-surface);
  }
  .nav-item:hover .nav-dot {
    background: var(--amber);
    transform: scale(1.6);
    box-shadow: 0 0 8px 2px var(--amber);
  }
  .nav-item:hover svg {
    stroke: var(--amber);
    filter: drop-shadow(0 0 5px var(--amber));
  }
  .icon-btn:hover {
    background: color-mix(in srgb, var(--selection) 14%, transparent);
    color: var(--on-surface);
  }
}

/* —— Acordeón compartido (regla de tres: Gaceta evidence, Aduana ficha,
   Pasaporte pas-accordion → Legal lo necesita; patrón canónico aquí).
   `<details>`/`<summary>` nativo. Estado abierto no se persiste. —— */
.hub-accordion {
  margin: 0;
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  background: color-mix(in srgb, var(--neutral) 45%, transparent);
  overflow: hidden;
}

.hub-accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
}

.hub-accordion > summary::-webkit-details-marker {
  display: none;
}

.hub-accordion__heading {
  min-width: 0;
  flex: 1;
}

.hub-accordion__title {
  display: block;
  margin: 0 0 0.3rem;
  font-family: var(--font-headline);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--on-surface);
}

.hub-accordion__sub {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.hub-accordion__chevron {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 2;
  transition: transform 0.15s ease;
}

.hub-accordion[open] > summary .hub-accordion__chevron {
  transform: rotate(90deg);
}

.hub-accordion__body {
  padding: 0 1.05rem 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
}

@media (hover: hover) {
  .hub-accordion > summary:hover .hub-accordion__title {
    color: #ffffff;
  }
  .hub-accordion > summary:hover .hub-accordion__chevron {
    stroke: var(--on-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-accordion__chevron {
    transition: none;
  }
}

/* Erizo de paseo — en la barra inferior, al lado de Herramientas. */
.bottom-nav .erizo-paseo {
  display: flex;
  align-items: center;
  margin: 0;
  pointer-events: none;
}
.bottom-nav .erizo-paseo img {
  display: block;
  height: 0.95rem;
  width: auto;
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav .erizo-paseo {
    display: none;
  }
}