/* ==========================================================================
   layout.css — barra de cotizaciones, header, footer y botón de WhatsApp
   ========================================================================== */

/* ---- Topbar dólar ---- */
.topbar { background: var(--primary-dark); color: #fff; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.02em; }
.topbar__inner { display: flex; justify-content: flex-end; gap: 1.5rem; height: var(--topbar-h); align-items: center; }
.topbar__item { opacity: 0.85; }
.topbar__item strong { margin-left: 0.3rem; font-weight: 700; opacity: 1; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 252, 254, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.site-header__logo img { height: 36px; width: auto; }
.nav { display: none; align-items: center; gap: 0.25rem; }
.nav__link {
  position: relative; padding: 0.5rem 0.9rem; font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--foreground); opacity: 0.85;
  transition: opacity .2s, color .2s;
}
.nav__link:hover { opacity: 1; color: var(--accent); }
.nav__link.is-active { opacity: 1; font-weight: 600; }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0; height: 2px; background: var(--accent);
}
.nav-toggle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); }
.nav-toggle:hover { background: var(--muted); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--foreground); border-radius: 2px; transition: transform .25s, background .25s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; padding: 0.5rem 1.25rem 1rem; border-top: 1px solid var(--border); background: var(--background); }
.mobile-nav.is-open { display: flex; }
.mobile-nav .nav__link { padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
.mobile-nav .nav__link.is-active::after { display: none; }
.mobile-nav .nav__link.is-active { color: var(--accent); }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-toggle, .mobile-nav { display: none !important; }
}

/* ---- Footer ---- */
.site-footer { background: var(--primary); color: var(--primary-foreground); padding-top: 4rem; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 3rem; }
.footer__brand img { height: 38px; width: auto; margin-bottom: 1rem; }
.footer__brand p { font-size: 0.875rem; color: rgba(245, 248, 251, 0.7); max-width: 320px; }
.footer__social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.footer__social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); transition: background .2s;
}
.footer__social a:hover { background: var(--accent); }
.footer__social svg { width: 18px; height: 18px; fill: #fff; }
.footer__col h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; color: #fff; }
.footer__col li, .footer__col p { font-size: 0.875rem; color: rgba(245, 248, 251, 0.72); margin-bottom: 0.55rem; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
.footer__dolar { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.footer__dolar th, .footer__dolar td { padding: 0.4rem 0; text-align: left; font-weight: 400; color: rgba(245, 248, 251, 0.78); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer__dolar thead th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(245, 248, 251, 0.5); }
.footer__source { font-size: 0.6875rem !important; opacity: 0.6; margin-top: 0.6rem; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 1.25rem; }
.footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: 0.75rem; color: rgba(245, 248, 251, 0.6); }
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; gap: 1.25rem; }

@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.4fr 1.2fr; } }

/* ---- Botón flotante WhatsApp ---- */
.wa-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--whatsapp-fab); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform .2s;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; }