/*
 * Sistema de variables y botones del nuevo diseño público (header, hero, footer, cta-final).
 * Nombres prefijados con "ad" a propósito para no chocar con .btn / .container / .section
 * ya existentes en main.css y usados en todo el sitio.
 */
:root {
  --ad-deep: #1b3660;
  --ad-cyan: #ff9d8e;
  --ad-deep-tint: #e6edf2;
  --ad-cyan-tint: #ecf5fb;
  --ad-ink: #0a1924;
  --ad-text: #2b3a47;
  --ad-muted: #6a7682;
  --ad-soft: #f6f7f8;
  --ad-line: #e5e9ec;
  --ad-warm: #faf8f4;

  --ad-f-display: 'Space Grotesk', system-ui, sans-serif;
  --ad-f-body: 'Inter', system-ui, sans-serif;
  --ad-f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ad-max-w: 1280px;
  --ad-pad-x: clamp(20px, 4vw, 56px);
}

.adcontainer {
  max-width: var(--ad-max-w);
  margin: 0 auto;
  padding-left: var(--ad-pad-x);
  padding-right: var(--ad-pad-x);
}

.adbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ad-f-body); font-size: 13px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px;
  transition: all .2s; white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.adbtn-login {
  border-color: var(--ad-line); color: var(--ad-ink);
  min-width: 124px; background: transparent;
}
.adbtn-login:hover {
  border-color: var(--ad-deep); color: var(--ad-deep);
  background: var(--ad-deep-tint);
}
.adbtn-outline {
  border-color: var(--ad-deep); color: var(--ad-deep);
  min-width: 124px; background: transparent;
}
.adbtn-outline:hover { background: var(--ad-deep); color: #fff; }
.adbtn-primary {
  background: var(--ad-deep); color: #fff;
  min-width: 124px;
}
.adbtn-primary:hover { background: var(--ad-cyan); transform: translateY(-1px); }
.adbtn-cyan { background: var(--ad-cyan); color: #fff; }
.adbtn-cyan:hover { background: var(--ad-deep); transform: translateY(-1px); }
.adbtn-outline-light {
  border: 1px solid rgba(255,255,255,0.3); color: #fff;
  background: transparent;
}
.adbtn-outline-light:hover {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6);
}
.adbtn-arrow::after { content: '→'; transition: transform .2s; }
.adbtn-arrow:hover::after { transform: translateX(3px); }