/* ===== Colores de la marca CuanSale (ver BRAND.md, sección 4) =====
   Primario: el azul de Monitor Financiero. Verde y rojo SOLO para suba/baja. Amarillo poco, para destacar. */
:root {
  --acento: #1F6FEB;          /* primario CuanSale: marca, botones, enlaces, barras */
  --acento-oscuro: #1553B8;   /* hover, ícono */
  --acento-suave: #E6EFFD;    /* fondos de etiquetas y destacados */
  --sale: #F5B700;            /* amarillo Sale */
  --fondo: #F4F6F9;
  --tarjeta: #FFFFFF;
  --borde: #E2E7EE;
  --texto: #14181F;
  --suave: #5F6B7A;
  --sube: #13915F;
  --sube-fondo: #E3F6ED;
  --baja: #D23B3B;
  --baja-fondo: #FDE8E8;
  --neutro-fondo: #EEF1F5;
  --sombra: 0 1px 3px rgba(20, 24, 31, .06), 0 4px 14px rgba(20, 24, 31, .05);

  /* Letras: Inter para todo (títulos en 800) */
  --letra-titulos: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #4C8DFF;
    --acento-oscuro: #1F6FEB;
    --acento-suave: #16253F;
    --sale: #FFC933;
    --fondo: #0E1117;
    --tarjeta: #171B23;
    --borde: #262C37;
    --texto: #E8ECF2;
    --suave: #93A0B1;
    --sube: #35C48A;
    --sube-fondo: #12301F;
    --baja: #FF6B6B;
    --baja-fondo: #3A1717;
    --neutro-fondo: #222833;
    --sombra: none;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--letra-texto);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.45;
}
a { color: var(--acento); }

/* ===== Encabezado ===== */
.encabezado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; max-width: 1100px; margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: 12px; }
.botones-arriba { display: flex; align-items: center; gap: 8px; flex: none; }
.boton.compartir-arriba {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600;
}
.compartir-arriba svg { width: 16px; height: 16px; fill: currentColor; }
/* Ícono: cuadrado azul con el signo $ en blanco */
.logo {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: #1F6FEB; color: #fff;  /* isotipo: siempre el azul de la marca, también en modo oscuro */
  font-family: var(--letra-titulos); font-weight: 800; font-size: 24px;
}
/* Logotipo: "Cuan" en color de texto y "Sale" en azul */
h1, h2, h3 { font-family: var(--letra-titulos); font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: 24px; margin: 0; line-height: 1.1; }
h1 .sale { color: var(--acento); }
/* "de CuanSale": más chico, a la derecha del nombre, siempre junto */
.de-marca { font-size: .58em; font-weight: 700; color: var(--suave); white-space: nowrap; margin-left: 2px; }
.titulo { display: flex; align-items: center; gap: 4px 10px; }
.visitas {
  font-size: 12px; font-weight: 600; color: var(--suave); background: var(--neutro-fondo);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.visitas[hidden] { display: none; }
.beta {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: #7A5B00; background: #FEF3C7; border: 1px solid var(--sale); padding: 1px 8px; border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  .beta { color: var(--sale); background: #3A2E05; }
}
.sub { margin: 0; color: var(--suave); font-size: 12px; }

.boton {
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  padding: 8px 14px; border-radius: 10px; font-size: 14px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0; /* que "↻ Actualizar" no se parta en dos renglones */
}
.boton:hover { border-color: var(--acento); }
/* Precios: siempre con números del mismo ancho (tabular) */
.precios span, .tasa, .conv-grande strong, .resultado dd { font-variant-numeric: tabular-nums; }
.boton.chico { padding: 5px 10px; font-size: 13px; }

/* ===== Cinta de indicadores ===== */
/* Se mueve sola de derecha a izquierda, como las cintas de la bolsa.
   Se frena con el mouse encima o tocándola. Los bordes se esfuman. */
.cinta {
  display: flex; gap: 10px; /* mientras carga, los recuadros van en fila */
  overflow: hidden; padding: 4px 0 10px; max-width: 1068px; margin: 0 auto; cursor: pointer; /* alineada con el encabezado */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.cinta-pista { display: flex; flex: none; width: max-content; animation: cinta-desplazar var(--duracion, 40s) linear infinite; }
.cinta-grupo { display: flex; gap: 10px; padding-right: 10px; }
.cinta:hover .cinta-pista, .cinta.frenada .cinta-pista { animation-play-state: paused; }
@keyframes cinta-desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Mientras carga, o si la persona pidió menos movimiento en su teléfono: quieta y se desliza con el dedo */
.cinta > .chip:first-child { margin-left: 16px; }
@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; padding-inline: 16px; }
  .cinta-pista { animation: none; }
  .cinta-grupo[aria-hidden="true"] { display: none; }
}
.chip {
  flex: 0 0 auto; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 12px; padding: 8px 12px; font-size: 13px; box-shadow: var(--sombra);
}
.chip strong { font-size: 15px; margin-left: 6px; }
.chip .var { margin-left: 6px; }
.cargando { color: var(--suave); }

/* ===== Menú de secciones (queda pegado arriba al bajar) ===== */
html { scroll-behavior: smooth; }
.menu {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px max(16px, calc((100% - 1100px) / 2 + 16px));
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  flex: 0 0 auto; text-decoration: none; color: var(--texto); font-size: 13px; font-weight: 600;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 12px;
  white-space: nowrap;
}
.menu a:hover { border-color: var(--acento); color: var(--acento); }
/* Pestaña activa: rellena de azul */
.menu a.actual { background: var(--acento); border-color: var(--acento); color: #fff; }
/* Que el título de la sección no quede tapado por el menú fijo */
.bloque { scroll-margin-top: 64px; }
.pestana[hidden] { display: none; }

/* Sub-pestañas de Calculadoras (control segmentado: una calculadora por vez) */
.atajos {
  display: flex; gap: 4px; margin: 16px 0 0; padding: 4px;
  background: var(--neutro-fondo); border-radius: 12px; max-width: 640px;
}
@media (max-width: 560px) {
  /* En celular, 4 calculadoras en dos filas de dos */
  .atajos { display: grid; grid-template-columns: 1fr 1fr; }
}
.atajos a {
  flex: 1 1 0; text-align: center; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--suave); text-decoration: none;
  padding: 8px 10px; border-radius: 9px;
}
.atajos a:hover { color: var(--texto); }
.atajos a.actual { background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra); }
#tab-calculadoras .bloque[hidden] { display: none; }

/* Botones del informe */
.acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.boton.whatsapp { background: #25d366; border-color: #25d366; color: #fff; font-weight: 600; }
.boton.whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; }
/* Título + aclaración apilados a la izquierda, botón a la derecha */
.bloque-titulo > div > .nota { display: block; margin-top: 2px; }
.bloque-titulo:has(> .whatsapp) { flex-wrap: wrap; }

/* Conversor */
.conv-grande {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px;
}
.conv-grande small { color: var(--suave); font-size: 14px; }
.conv-grande strong { font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.conv-grande span { color: var(--suave); font-size: 13px; }
.campos label[hidden] { display: none; }
.conv-tabla table { font-size: 14px; border-radius: 10px; }
.conv-tabla th, .conv-tabla td { padding: 8px 10px; }

/* Botón para volver arriba */
.arriba {
  position: fixed; right: 16px; bottom: 16px; z-index: 10;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento); color: #fff; text-decoration: none; font-size: 20px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.arriba.visible { opacity: 1; pointer-events: auto; }

/* Cartelito "Instalar app" (abajo a la izquierda, el ↑ queda a la derecha) */
.instalar {
  position: fixed; left: 16px; bottom: 16px; z-index: 10;
  display: flex; align-items: center; border-radius: 999px; overflow: hidden;
  background: var(--acento); box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.instalar[hidden] { display: none; }
.instalar button { border: 0; background: none; color: #fff; cursor: pointer; font: inherit; }
.instalar-boton { padding: 11px 6px 11px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.instalar-cerrar { padding: 8px 14px 8px 10px; font-size: 20px; line-height: 1; opacity: .8; }
.instalar-cerrar:hover { opacity: 1; }

/* Aviso de privacidad (primera visita) */
.privacidad {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 11; margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); border-left: 4px solid var(--acento);
  border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}
.privacidad[hidden] { display: none; }
.privacidad p { margin: 0; font-size: 14px; line-height: 1.45; }
.privacidad .boton { flex: none; background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
@media (max-width: 480px) {
  .privacidad { flex-direction: column; align-items: stretch; gap: 10px; }
  .privacidad .boton { padding: 10px; }
}

/* Ventanita de ayuda para instalar */
.ayuda {
  width: min(400px, calc(100% - 32px)); border: 1px solid var(--borde); border-radius: 16px;
  background: var(--tarjeta); color: var(--texto); padding: 18px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.ayuda::backdrop { background: rgba(0, 0, 0, .45); }
.ayuda h3 { margin: 0 0 8px; font-size: 18px; }
.ayuda ol { padding-left: 20px; margin: 8px 0; }
.ayuda li { margin: 8px 0; }
.ayuda .nota { display: block; margin: 10px 0 14px; }
.ayuda form { text-align: right; }
.ayuda .boton { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }

/* ===== Bloques ===== */
main { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.bloque { margin: 18px 0 26px; }
.bloque-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;
}
h2 { font-size: 17px; margin: 0; }
.nota { color: var(--suave); font-size: 13px; }
.aviso { color: var(--suave); font-size: 14px; }

.selector { display: flex; background: var(--neutro-fondo); border-radius: 10px; padding: 3px; }
.selector button {
  border: 0; background: transparent; color: var(--suave); padding: 6px 12px;
  border-radius: 8px; font-size: 13px; cursor: pointer;
}
.selector button.activo { background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra); }

/* ===== Tarjetas de dólar ===== */
.grilla {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--sombra);
}
.tarjeta-top { display: flex; align-items: center; justify-content: space-between; }
.tarjeta-nombre { font-weight: 700; font-size: 15px; }
.precios { display: flex; gap: 14px; margin: 10px 0 6px; }
.precios div { display: flex; flex-direction: column; }
.precios small { color: var(--suave); font-size: 12px; }
.precios span { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.tarjeta-pie { display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.detalle { color: var(--suave); font-size: 12px; }
.mini-grafico { width: 96px; height: 30px; }

/* Variaciones */
.var {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--neutro-fondo); color: var(--suave); white-space: nowrap;
}
.var.sube { background: var(--sube-fondo); color: var(--sube); }
.var.baja { background: var(--baja-fondo); color: var(--baja); }

/* ===== Tabla ===== */
.tabla-envoltura { overflow-x: auto; grid-column: 1 / -1; }
table {
  width: 100%; border-collapse: collapse; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; font-size: 14px;
}
th, td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--suave); font-weight: 600; font-size: 12px; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
td { font-variant-numeric: tabular-nums; }

/* ===== Plazo fijo ===== */
.lista { display: grid; gap: 8px; }
/* Grilla de 3 columnas: así todas las barras arrancan en el mismo lugar y miden igual de largo como máximo */
.fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px 56px; align-items: center; gap: 14px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px;
}
.fila .entidad { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .tasa { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.barra { height: 6px; background: var(--neutro-fondo); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }

.fila-billetera { grid-template-columns: minmax(0, 1fr) auto 56px; }
.fila .detalle { white-space: nowrap; }

/* ===== Calculadora ===== */
.calculadora {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--sombra);
}
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); }
.campos .ancho { grid-column: 1 / -1; }
.campos input, .campos select {
  font: inherit; font-size: 15px; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; width: 100%; min-width: 0;
}
.campos input:focus, .campos select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.resultado dl { margin: 0; display: grid; gap: 6px; }
.resultado dl div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--borde); padding-bottom: 6px; }
.resultado dt { color: var(--suave); font-size: 14px; }
.resultado dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.resultado dd strong { font-size: 18px; }
.resultado .ref-titulo { margin: 14px 0 4px; font-size: 13px; color: var(--suave); }
.resultado ul { margin: 0; padding-left: 18px; font-size: 13px; }
.resultado li { margin: 3px 0; }
.resultado .aclaracion { color: var(--suave); font-size: 12px; margin: 12px 0 0; }

/* Calculadora de aguinaldo */
.ayuda-campo { font-size: 12px; color: var(--suave); margin: 0; }
.campos .check { flex-direction: row; font-size: 13px; color: var(--texto); }
.campos .check input { width: auto; margin: 0 6px 0 0; accent-color: var(--acento); vertical-align: middle; }
.ayuda-dias { font-size: 13px; background: var(--acento-suave); border-radius: 10px; padding: 8px 12px; }
.ayuda-dias summary { cursor: pointer; font-weight: 600; color: var(--acento); }
.ayuda-dias ol { padding-left: 18px; margin: 8px 0; }
.ayuda-dias li { margin: 5px 0; }
.ayuda-dias p { margin: 6px 0 2px; }
.ag-total { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--acento-suave); }
.ag-monto { font-size: 28px; font-weight: 800; color: var(--acento); font-variant-numeric: tabular-nums; }

.alq-tabla { margin-top: 12px; }
.alq-tabla table { font-size: 13px; border-radius: 10px; }
.alq-tabla th, .alq-tabla td { padding: 7px 10px; }
.alq-tabla tr.futuro td { color: var(--suave); font-style: italic; }
.alq-tabla small, .resultado dt small { font-size: 11px; color: var(--suave); font-style: normal; }

@media (max-width: 720px) {
  .calculadora { grid-template-columns: 1fr; }
}

/* Aviso de tasas cargadas a mano hace más de un mes */
.nota-vieja { margin: 10px 0 0; font-size: 12px; color: #92400E; }
.detalle.viejo { color: #92400E; }
@media (prefers-color-scheme: dark) {
  .nota-vieja, .detalle.viejo { color: var(--sale); }
}

.chip .fecha-dato { margin-left: 6px; color: var(--suave); font-size: 12px; }

/* ===== Informe ===== */
.informe {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  padding: 6px 18px; box-shadow: var(--sombra);
}
.informe ol { padding-left: 20px; }
.informe li { margin: 8px 0; }
.informe .san-luis { margin: 16px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--acento-suave); border-left: 4px solid var(--sale); }
.informe .san-luis h3 { margin: 0 0 6px; font-size: 16px; }
.informe .san-luis h3 .nota { font-weight: 400; color: var(--suave); font-size: 13px; }
.informe .san-luis ul { margin: 0; padding-left: 18px; }
.informe .san-luis .fuente { color: var(--suave); font-size: 13px; }
.informe .aclaracion { color: var(--suave); font-size: 12px; border-top: 1px solid var(--borde); padding-top: 10px; }

/* ===== Pie ===== */
.pie {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px 30px;
  color: var(--suave); font-size: 12px;
}
.pie p { margin: 4px 0; }
.pie { padding-bottom: 76px; } /* espacio para que el botón ↑ no tape el final de la página */
.pie .autor { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde); }
.pie .autor strong { color: var(--texto); font-family: var(--letra-titulos); font-weight: 800; }
.pie .autor .sale { color: var(--acento); }
.pie .legal { color: var(--texto); line-height: 1.5; margin-bottom: 8px; }

/* Redes */
.redes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.redes-titulo { font-size: 13px; font-weight: 800; color: var(--texto); margin-right: 4px; }
.red {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #fff; text-decoration: none;
}
.red svg { width: 17px; height: 17px; fill: currentColor; }
.red:hover { filter: brightness(1.08); }
.red.telegram { background: #229ED9; }
.red.instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.red.compartir { background: var(--acento); border: 0; cursor: pointer; font-family: inherit; }
.pie .legal strong { font-weight: 600; }

@media (max-width: 480px) {
  /* En celular: "Monitor Financiero de CuanSale" en un renglón; el botón queda solo con ↻ */
  h1 { font-size: 18px; white-space: nowrap; }
  .de-marca { font-size: .62em; }
  .encabezado { gap: 8px; }
  .marca { gap: 10px; min-width: 0; }
  .logo { width: 40px; height: 40px; font-size: 22px; }
  #btn-actualizar .txt { display: none; }
  #btn-actualizar { padding: 8px 12px; font-size: 18px; line-height: 1; }
  /* En celular los dos botones van uno arriba del otro, solo con el ícono */
  .botones-arriba { flex-direction: column; gap: 6px; }
  .compartir-arriba .txt { display: none; }
  .compartir-arriba { padding: 9px 12px; }
  .compartir-arriba svg { width: 18px; height: 18px; }
  .titulo { flex-wrap: wrap; } /* en celular el contador baja debajo del título */
  .precios span { font-size: 18px; }
  .fila { grid-template-columns: minmax(0, 1fr) 72px 52px; gap: 10px; }
  .fila-billetera { grid-template-columns: minmax(0, 1fr) auto 52px; }
  /* En celular las 3 pestañas ocupan el ancho por partes iguales */
  .menu a { flex: 1 1 0; text-align: center; padding: 7px 8px; font-size: 12.5px; }
  .bloque-titulo:has(.acciones) { flex-wrap: wrap; }
  .fila .detalle { font-size: 11px; }
}

/* ===== Inicio: 4 dólares grandes + accesos ===== */
.inicio { margin: 4px 0 18px; }
.inicio h2 { font: 800 18px var(--letra-titulos); margin: 0 0 10px; }
.inicio-dolares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.inicio-card { display: block; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 12px 14px; box-shadow: var(--sombra); min-width: 0; }
.inicio-card .nom { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); font-weight: 600; }
.inicio-card .precio { font: 800 26px var(--letra-titulos); margin: 6px 0 2px; color: var(--texto); letter-spacing: -.5px; white-space: nowrap; }
.inicio-card .compra { font-size: 12px; color: var(--suave); }
.inicio-hora { font-size: 12px; color: var(--suave); margin: 8px 2px 0; }
.inicio-botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.inicio-botones a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 14px; box-shadow: var(--sombra); }
.inicio-botones a:hover { border-color: var(--acento); }
.inicio-botones .ic { font-size: 24px; }
.inicio-botones strong { font-size: 15px; }
.inicio-botones small { display: block; font-size: 12px; color: var(--suave); }
.inicio-botones a.ancho { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; background: var(--acento-suave); border-color: transparent; }
.volver-inicio { display: inline-block; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--acento); text-decoration: none; }
/* En el inicio se ocultan las listas completas; en #dolar se oculta el inicio */
body.en-inicio #sec-dolar, body.en-inicio #sec-plazo, body.en-inicio #sec-billeteras, body.en-inicio .volver-inicio { display: none; }
body:not(.en-inicio) #sec-inicio { display: none; }
@media (max-width: 720px) {
  .inicio-dolares, .inicio-botones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .inicio-card .precio { font-size: 22px; }
}