/* GastoZen — Shared Landing Page Styles
   Depende de style.css (variables CSS).
   Estilos específicos de cada landing van en su propio <style>.
*/

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.navbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 1.5rem;
  height: var(--header-height); display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 0.625rem; }
.brand-name {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 1.2rem; color: var(--text-primary); letter-spacing: -0.02em;
}
.btn-primary {
  background: var(--primary); color: var(--text-primary);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem;
  padding: 0.5rem 1.25rem; border: none; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); color: var(--text-primary); }

/* ── Hero — estructura compartida ───────────────────────── */
/* background y padding se definen por página */
.hero { position: relative; overflow: hidden; text-align: center; }
.hero-blob-1, .hero-blob-2 {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.hero-blob-1 { right: -120px; top: -80px; width: 480px; height: 480px; }
.hero-blob-2 { left: -80px; bottom: -60px; width: 320px; height: 320px; }
.hero-inner { margin: 0 auto; position: relative; z-index: 1; }
.hero h1 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.75rem); line-height: 1.1;
  color: var(--text-primary); margin: 0 0 1.25rem; letter-spacing: -0.03em;
}
.hero h1 span { color: var(--primary-dark); }
.hero p {
  font-family: 'PT Sans', sans-serif; font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--text-secondary); line-height: 1.65; margin: 0 auto 2.5rem;
}
.hero-cta {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3.5rem;
}
.btn-hero {
  background: var(--primary); color: var(--text-primary);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 0.85rem 2rem; border: none; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 4px 14px rgba(82,183,136,0.35);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-hero:hover {
  background: var(--primary-dark); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(82,183,136,0.45); color: var(--text-primary);
}

/* ── Section layout ─────────────────────────────────────── */
.section-inner { max-width: 1120px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--text-primary);
  margin: 0 0 0.75rem; letter-spacing: -0.02em;
}
.section-header p {
  font-family: 'PT Sans', sans-serif; font-size: 1.05rem;
  color: var(--text-secondary); max-width: 480px; margin: 0 auto; line-height: 1.6;
}

/* ── Features ───────────────────────────────────────────── */
.features { padding: 5rem 1.5rem; background: var(--bg-main); }
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem;
}
.feature-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.feature-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feature-card h3 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--text-primary); margin: 0;
}
.feature-card p {
  font-family: 'PT Sans', sans-serif; font-size: 0.95rem;
  color: var(--text-secondary); line-height: 1.65; margin: 0;
}

/* ── How it works ───────────────────────────────────────── */
.how { padding: 5rem 1.5rem; background: #fff; }
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem;
}
.step { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 0.9rem;
  color: var(--text-primary); flex-shrink: 0;
}
.step h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text-primary); margin: 0; }
.step p { font-family: 'PT Sans', sans-serif; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; margin: 0; }

/* ── CTA Banner — estructura compartida ─────────────────── */
/* background se define por página */
.cta-banner { padding: 5rem 1.5rem; position: relative; overflow: hidden; text-align: center; }
.cta-blob-1 {
  position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
}
.cta-blob-2 {
  position: absolute; bottom: -60px; left: -30px;
  width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
}
.cta-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.cta-inner h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  margin: 0 0 1rem; letter-spacing: -0.02em;
}
.cta-inner p { font-family: 'PT Sans', sans-serif; font-size: 1.05rem; margin: 0 0 2.5rem; line-height: 1.6; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { background: var(--text-primary); padding: 2.5rem 1.5rem; }
.footer-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.625rem; }
.footer-brand-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; }
.footer-copy { font-family: 'PT Sans', sans-serif; font-size: 0.85rem; color: rgba(255,255,255,0.45); margin: 0; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color var(--transition); }
.footer-links a:hover { color: #fff; }