body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #eaeef2;
  color: #222;
}

.navbar {
  background: #002f6c;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.logo { width: 100px; height: auto; max-width: 100%; display: block; }

.nav-links { display: flex; gap: 15px; align-items: center; }
.nav-links a { color: white; text-decoration: none; }
.nav-links a:hover, .nav-links .active { text-decoration: underline; }

.menu-icon { display: none; font-size: 24px; cursor: pointer; }

.hero { padding: 40px; text-align: center; }
.hero img { max-width: 90%; height: auto; margin-top: 20px; }

footer {
  background: #002f6c; color: white; text-align: center;
  padding: 15px 10px; margin-top: 50px;
}

@media screen and (max-width: 768px) {
  .nav-links {
    display: none; flex-direction: column; background: #002f6c;
    position: absolute; top: 60px; right: 0; width: 200px; padding: 10px;
  }
  .nav-links.active { display: flex; }
  .menu-icon { display: block; }
}

:root{
  --card:#111a2b; --text:#e8f0ff; --muted:#9fb4d1; --accent:#2fb0ff;
  --good:#1ecb6b; --bad:#ff5a5a; --border:#1e2a42;
}

.content .tasa-wrap{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.tasa-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 6px 8px 14px;
}
.tasa-title{
  margin:0; font-size:28px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  transform:scale(1.12);
}
.timestamp{
  color: var(--muted);
  font-size: 13px;
}

.table-card{
  display:inline-block;
  background:linear-gradient(180deg, rgba(14,22,38,.9), rgba(14,22,38,.85));
  border:1px solid var(--border);
  border-radius:18px;
  padding:10px 16px 14px;
  color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

/* Header keeps three columns for labels */
.table-head{
  display:grid;
  grid-template-columns: auto auto 32px;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

/* BODY ROWS: 2 columns [Pair(Pagador+Cambio)] [Δ] */
.table-row{
  display:grid;
  grid-template-columns: auto 32px;
  gap:8px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  transition: transform 240ms ease, background 240ms ease, opacity 240ms ease;
  opacity:0; transform:translateY(6px);
}
.table-body .table-row.show{ opacity:1; transform:translateY(0); }

/* Left align Pagador text inside the pair */
.table-row .pair .name { text-align:left; }

/* Pair = rectangle that flips (Pagador + Cambio together) */
.pair{
  display:block;
  perspective: 900px;
}
.pair-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 520ms cubic-bezier(.2,.6,.2,1); /* snappier */
  padding: 0 2px;
  will-change: transform;
}
.table-row.flip .pair-inner{
  /* forward flip toward viewer */
  transform: rotateX(-180deg);
}
.pair-inner, .pair-inner * { backface-visibility: hidden; }

.name{ }
.rate{ font-variant-numeric: tabular-nums; }
.right{ text-align:right; }

.delta.up{ color:var(--good); }
.delta.down{ color:var(--bad); }
.delta.flat{ color:var(--muted); }

.spinner{ display:grid; place-items:center; padding:8px; height:36px; }
/* Faster spinner fill to match snappier row flips */
@keyframes fillSpinner{ 
  from{stroke-dasharray:0 120;} 
  to{stroke-dasharray:120 120;} 
}
.spinner svg{ 
  opacity:.9; 
  animation: fillSpinner 4.2s linear forwards; /* tightened sync */
}

.disclaimer{ color:var(--muted); font-size:12px; padding:10px 0 0; text-align:left; }

/* Mobile: keep Δ visible, just tight */
@media (max-width: 600px) {
  .tasa-title { font-size:24px; }
  .timestamp { font-size:12px; }

  .table-head { grid-template-columns: auto auto 24px; }
  .table-row  { grid-template-columns: auto 24px; gap:8px; }
}