/* ===============  VA E L O   UI  =============== */
/* Paleta y tokens */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5e7eb;
  --primary: #0ea5e9;
  --primary-contrast: #ffffff;
  --accent: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;

  --topbar-bg: #ffffff;
  --topbar-border: #e5e7eb;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, .06);
  --ring: 0 10px 30px rgba(14,165,233,.18);
}

/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background: var(--bg); color: var(--text); font-synthesis-weight: none; text-rendering: optimizeLegibility; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar mínima (landing) */
.navbar { background: var(--topbar-bg) !important; border-bottom: 1px solid var(--topbar-border) !important; }

/* Contenedor ancho uniforme */
.container-wide { max-width: 1320px; margin: 0 auto; }

/* Botones */
.btn-primary {
  --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: #0c97d4; --bs-btn-hover-border-color: #0c97d4;
  --bs-btn-active-bg: #0a86bb; --bs-btn-active-border-color: #0a86bb;
  border-radius: var(--radius-md);
  box-shadow: var(--ring);
  font-weight: 700;
}
.btn-ghost{
  background:transparent; border:1px solid var(--border);
  color:var(--text); border-radius: var(--radius-md); padding:.65rem 1rem; font-weight:700;
}
.btn-outline-secondary { border-color: var(--border); }
.btn-outline-secondary:hover { background: #f3f4f6; }

/* Tarjetas */
.card-vaelo{
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-sm);
}

/* Auth shared */
.auth-wrap{
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 360px at 0% 0%, rgba(14,165,233,.08), transparent),
              radial-gradient(900px 360px at 100% 100%, rgba(34,197,94,.10), transparent);
}
.auth-card{
  width: 100%; max-width: 460px; background: var(--card);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-md); padding: 22px 22px 18px;
}
.brand { font-weight: 800; letter-spacing: -.02em; display:flex; align-items:center; gap:.5rem; }
.brand-dot { width:12px; height:12px; border-radius:4px; background: var(--primary); }

.form-control, .form-select { border-color: var(--border); border-radius: var(--radius-md); }
.form-control:focus, .form-select:focus {
  border-color: rgba(14,165,233,.6);
  box-shadow: 0 0 0 .2rem rgba(14,165,233,.15);
}

.input-group .btn-eye{
  border: 1px solid var(--border);
  border-left: none;
  background: #fff;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.input-group .form-control.eye-target{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Password strength */
.pw-meter{
  height: 8px; border-radius: 6px; background: #e9eef5; overflow: hidden;
}
.pw-meter > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  transition: width .25s ease;
}
.small-muted { color: var(--muted); font-size: .9rem; }

/* Landing “hero” y cards */
.pill{
  display:inline-flex; gap:.45rem; align-items:center;
  padding:.35rem .65rem; border-radius:999px; font-weight:600; font-size:.85rem;
  background:rgba(14,165,233,.10); color:var(--primary); border:1px solid rgba(14,165,233,.25);
}
.hero{ border-radius:28px; overflow:hidden; position:relative; background:
       radial-gradient(800px 300px at 0% 0%, rgba(14,165,233,.10), transparent),
       radial-gradient(800px 300px at 100% 100%, rgba(34,197,94,.12), transparent); }
.hero-illu{
  aspect-ratio: 16/10;
  background: var(--card);
  border-radius:20px; box-shadow: 0 10px 40px rgba(15,23,42,.12);
  border: 1px solid var(--border);
  background-size: cover; background-position: center;
}
.f-card{
  border:1px solid var(--border); border-radius:18px; padding:22px; height:100%;
  background:var(--card);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.f-card:hover{ transform: translateY(-3px); border-color:rgba(14,165,233,.35); box-shadow:0 10px 26px rgba(0,0,0,.06); }
.f-icon{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:rgba(14,165,233,.12); color:var(--primary); font-size:1.25rem; }

/* Pricing */
.price-card{
  border:1px solid var(--border); border-radius:18px; background:var(--card);
  padding:26px; height:100%;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.price-card.pop{ border-color:rgba(14,165,233,.45); box-shadow:var(--ring); }
.price{ font-weight:900; font-size:2.35rem; letter-spacing:-.02em; }

/* Utilidades */
.text-muted-2 { color: var(--muted) !important; }