:root{
  --aa-bg:#f7faf7;          /* fondo suave */
  --aa-text:#0f172a;        /* texto */
  --aa-primary:#00812A;     /* verde marca Autoayuda */
  --aa-primary-contrast:#ffffff;
  --aa-link:#0866C6;        /* enlaces dentro del contenido */
  --aa-border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--aa-text);
  background:var(--aa-bg);
}

/* NAVBAR */
.navbar{
  position: sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--aa-border);
}
.navbar .wrap{
  max-width:1100px; margin:auto; display:flex; align-items:center; gap:16px;
  padding:10px 16px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
}
.brand img{ width:36px; height:36px; object-fit:contain; border-radius:8px }
.brand .title{ font-weight:800; letter-spacing:.2px }
.brand .tag{ font-size:.85rem; color:#475569 }

.nav{
  margin-left:auto; display:flex; align-items:center; gap:10px;
}
.nav a{
  text-decoration:none; color:#334155; padding:9px 12px; border-radius:10px; font-weight:600;
}
.nav a:hover{ background:#f1f5f9 }
.nav a.active{ color:#fff; background:var(--aa-primary) }

/* Botón CTA de la derecha */
.nav .cta{
  background:var(--aa-primary); color:var(--aa-primary-contrast);
}
.nav .cta:hover{ filter:brightness(0.95) }

/* Hamburguesa (móvil) */
.burger{
  display:none; margin-left:auto; border:0; background:transparent; cursor:pointer; padding:8px;
}
.burger span{
  display:block; width:24px; height:2px; background:#0f172a; margin:5px 0;
}

/* Responsive */
@media (max-width: 820px){
  .nav{ display:none; position:fixed; top:60px; left:0; right:0; background:#fff; border-top:1px solid var(--aa-border);
        flex-direction:column; padding:10px 16px 16px }
  .nav.open{ display:flex }
  .burger{ display:block }
}

/* CABECERA (hero) */
.hero{
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf4 100%);
  border-bottom:1px solid var(--aa-border);
}
.hero .wrap{
  max-width:1100px; margin:auto; padding:26px 16px 28px; text-align:center;
}
.hero h1{ margin:0 0 8px; font-size: clamp(24px, 3.6vw, 36px); }
.hero p{ margin:0 auto; max-width:800px; font-size: clamp(15px, 2.2vw, 18px); color:#475569 }
.hero .meta{ margin-top:10px; font-size:.95rem; color:#64748b }