:root{
  --nav-start: #3730a3;
  --nav-end: #1e3a8a;
  --accent-start: #3b82f6;
  --accent-end: #8b5cf6;
  --text-dark: #1e293b;
  --muted: #555;
}

html,body{height:100%;margin:0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
body {
  color: #333;
  background: linear-gradient(180deg,#f1f5f9,#eef2ff);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* NAV */
nav.navbar {
  background: linear-gradient(90deg,var(--nav-end),var(--nav-start));
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.navbar-brand{ font-weight:600; color:#fff !important; }
.navbar-nav .nav-link{ color: rgba(255,255,255,0.95) !important; }

/* Hero card */
.wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:48px 20px; }
.hero-card { width:100%; max-width:760px; display:flex; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(10,20,40,0.08); background:#fff; }
.hero-side{ width:34%; background:linear-gradient(180deg,var(--accent-start),var(--accent-end)); color:#fff; display:flex; align-items:center; justify-content:center; padding:28px; }
.hero-side i{ font-size:4.2rem; opacity:0.95; }
.hero-main{ width:66%; padding:28px 30px; }
.hero-main h1{ margin-top:0; font-size:1.6rem; color:var(--text-dark); font-weight:700; }
.hero-main p{ color:var(--muted); text-align:justify; line-height:1.6; margin-bottom:18px; }
.actions{ margin-top:8px; }

/* Buttons */
.btn-main {
  background: linear-gradient(90deg,var(--accent-start),var(--accent-end));
  color: white; font-weight:600; border-radius:28px; padding:10px 22px; border:none;
}
.btn-main:hover { background: linear-gradient(90deg,#2563eb,#7c3aed); }
.btn-outline-primary {
  border-radius:28px; padding:10px 22px; font-weight:600; color: var(--nav-end); border: 2px solid #6366f1;
}
.btn-outline-primary:hover{ color:white; background: linear-gradient(90deg,var(--accent-start),var(--accent-end)); border-color: transparent; }

/* Form card (used in login/registro) */
.form-card {
  width:100%;
  max-width:420px;
  margin: 24px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10,20,40,0.06);
  padding: 26px;
}
.form-card h4 { margin-bottom: 18px; color: var(--text-dark); }

/* Footer */
footer.site-foot {
  background: linear-gradient(90deg,var(--nav-end),#1e293b);
  color: #e6eefc; text-align:center; padding:12px 8px; margin-top:auto; box-shadow:0 -2px 8px rgba(0,0,0,0.06); font-size:0.92rem;
}

/* Responsive tweaks */
@media(max-width:768px){
  .hero-card{ flex-direction:column; max-width:92%; }
  .hero-side{ width:100%; padding:22px 0; }
  .hero-main{ width:100%; padding:18px; }
  .form-card{ margin: 12px; }
}