/* publico.css — la piel común de las páginas abiertas (08/09/2026)
   ---------------------------------------------------------------
   Las seis herramientas, el radar de papers, la actualidad y el test de ahorro se
   escribieron cada una por su cuenta: todas oscuras, pero con esquinas redondeadas
   y sin cabecera. Quien llega desde X aterrizaba en una página huérfana — sin saber
   de quién es, sin poder volver y sin ninguna puerta para suscribirse.
   Esto pone lo común: la barra de arriba, el remate de abajo y el ángulo recto del
   resto de la casa. El interior de cada herramienta no se toca. */

:root {
  --pub-noche: #0d1117; --pub-panel: #161b22;
  --pub-reja: rgba(240,246,252,0.09); --pub-reja-viva: rgba(240,246,252,0.20);
  --pub-luz: #f0f6fc; --pub-luz-media: #9aa7b4; --pub-luz-baja: #6b7684;
  --pub-senal: #3fb950;
}

/* Ángulo recto, como en el portal, la puerta y el foro */
.pub-cab, .pub-cab *, .pub-pie, .pub-pie * { border-radius: 0 !important; }
body .card, body .panel, body .caja, body .opcion, body .btn, body button,
body input, body select, body .resultado, body .bloque { border-radius: 0 !important; }

/* ── La barra ──────────────────────────────────────────────────────────── */
.pub-cab {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 52px;
  background: rgba(13,17,23,0.88); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--pub-reja);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.pub-marca {
  font-size: 13.5px; font-weight: 600; color: var(--pub-luz); text-decoration: none;
  letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-marca span { color: var(--pub-senal); }
.pub-cab-dcha { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.pub-cab a.pub-btn {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none;
  color: var(--pub-luz-media); padding: 6px 10px; border: 1px solid var(--pub-reja);
  white-space: nowrap;
}
.pub-cab a.pub-btn:hover { color: var(--pub-luz); border-color: var(--pub-reja-viva); }
.pub-cab a.pub-btn.destacado { color: var(--pub-senal); border-color: rgba(63,185,80,0.42); }
.pub-cab a.pub-btn.destacado:hover { background: rgba(63,185,80,0.10); }

/* ── El remate ─────────────────────────────────────────────────────────── */
.pub-pie {
  margin: 64px auto 0; max-width: 1240px; padding: 30px 24px 48px;
  border-top: 1px solid var(--pub-reja);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--pub-luz-media);
}
.pub-pie-tit { font-size: 17px; color: var(--pub-luz); font-weight: 500; letter-spacing: -0.2px; }
.pub-pie-txt { font-size: 13.5px; line-height: 1.65; margin-top: 8px; max-width: 74ch; }
.pub-pie-cifras {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--pub-reja);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--pub-luz-baja);
}
.pub-pie-cifras b { color: var(--pub-senal); font-weight: 500; }
.pub-pie-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pub-pie a.pub-btn {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none;
  color: var(--pub-luz-media); padding: 9px 14px; border: 1px solid var(--pub-reja);
}
.pub-pie a.pub-btn:hover { color: var(--pub-luz); border-color: var(--pub-reja-viva); }
.pub-pie a.pub-btn.destacado { color: var(--pub-senal); border-color: rgba(63,185,80,0.42); }
.pub-pie a.pub-btn.destacado:hover { background: rgba(63,185,80,0.10); }
.pub-pie-legal { margin-top: 20px; font-size: 11.5px; color: var(--pub-luz-baja); }

@media (max-width: 720px) {
  .pub-cab { padding: 0 14px; gap: 10px; }
  .pub-cab a.pub-btn { padding: 5px 8px; font-size: 9.5px; letter-spacing: 1px; }
  .pub-pie { padding: 26px 16px 40px; }
}

/* Móvil estrecho (13/09/2026): a 375 px los tres accesos medían más que la pantalla
   y «Suscribirme», la puerta de captación, salía cortado (scrollWidth 389-390).
   Por debajo de 420 px se aparta «Más herramientas» —la marca ya lleva a la portada
   y el remate repite el enlace— y se compacta el resto. «Suscribirme» no encoge nunca;
   lo que cede es la marca, que ya se corta con puntos suspensivos. */
@media (max-width: 420px) {
  .pub-cab { padding: 0 12px; gap: 8px; }
  .pub-marca { font-size: 12.5px; min-width: 0; }
  .pub-cab-dcha { gap: 6px; }
  .pub-cab a.pub-btn { padding: 5px 7px; letter-spacing: 0.6px; }
  .pub-cab-dcha a.pub-btn:first-child:not(.destacado) { display: none; }
}