/* =========================
   SaaS Base (neutral)
   No depende de Atmaia styles.css
   ========================= */

:root {
  --saas-max: 1100px;
  --saas-text: #111;
  --saas-muted: #666;
  --saas-border: #eaeaea;
  --saas-bg: #fff;
  --saas-radius: 12px;
}

/* Base */
body {
  margin: 0;
  color: var(--saas-text);
  background: var(--saas-bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

/* Layout helpers */
.saas-wrap {
  max-width: var(--saas-max);
  margin: 0 auto;
  padding: 0 18px;
}

/* =========================
   Header SaaS
   ========================= */
.saas-header {
  border-bottom: 1px solid var(--saas-border);
  background: #fff;
}

.saas-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.saas-brand {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.saas-brand-name {
  font-size: 16px;
}

.saas-nav {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.saas-nav a {
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
}

.saas-nav a:hover {
  background: #f6f6f6;
}

.saas-tagline-area {
  color: var(--saas-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Responsive: tagline abajo si no cabe */
@media (max-width: 760px) {
  .saas-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .saas-tagline-area {
    white-space: normal;
  }
}

/* =========================
   Footer SaaS
   ========================= */
.saas-footer {
  border-top: 1px solid var(--saas-border);
  margin-top: 40px;
  padding: 22px 0;
  color: var(--saas-muted);
  font-size: 12px;
}

.saas-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================
   Buttons (compat con tus templates)
   ========================= */
.btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--saas-text);
  padding: 10px 14px;
  border-radius: var(--saas-radius);
  font-weight: 600;
  font-size: 14px;
}

.btn:hover {
  opacity: 0.92;
}

.btn-alt {
  border-color: #777;
  color: #333;
}

/* =========================
   Simple content spacing
   ========================= */
main {
  min-height: 60vh;
}