:root {
  --brand: #0d6efd;
  --dark: #0f172a;
  --muted: #64748b;
  --bg: #ffffff;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--dark); background: var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
html { scroll-behavior: smooth; }

.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.header { display: flex; align-items: center; justify-content: flex-start; }
.logo { font-weight: 700; font-size: 1.2rem; color: var(--dark); display: inline-flex; align-items: center; gap: .5rem; }
.hero {
  padding: 4rem 1.25rem;
  display: grid;
  gap: 2rem;
  background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 60%);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(2,6,23,.06);
}
.banner-logo {
  height: 120px;
  width: auto;
  margin-right: auto;
  display: block;
}
.hero-logo {
  height: 120px;
  width: auto;
  flex-shrink: 0;
}
.hero p.lead {
  margin: 0;
  color: var(--muted);
  max-width: 50ch;
}
.cta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.btn { display: inline-block; padding: .7rem 1rem; border-radius: .5rem; font-weight: 600; transition: transform .08s ease, box-shadow .2s ease; }
.btn.primary { background: var(--brand); color: white; }
.btn.secondary { background: #eef2ff; color: #1e3a8a; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(13,110,253,.22); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem; background: #fff; transition: transform .08s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2,6,23,.08); }

/* Bloques verticales de beneficios */
.features-vertical {
  display: grid;
  gap: 1rem;
  max-width: 70ch;
}
.features-vertical .feature-item {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 2px 4px rgba(2,6,23,.06);
}
.features-vertical .feature-item h3 {
  margin: 0 0 .25rem;
  font-weight: 600;
}
/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 70ch;
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.timeline-icon {
  width: 40px;
  height: 40px;
  background: var(--brand);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.timeline-content h3 {
  margin: 0 0 .5rem;
  font-weight: 600;
}
/* Formulario de descarga */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}
.form-group input {
  width: 100%;
  padding: .5rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  font-size: 1rem;
}

/* Landing sections */
.lead { font-size: 1.125rem; color: var(--muted); max-width: 70ch; }
.section { padding: 3rem 0; }
.section.light { background: #f8fafc; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.section-title { margin: 0 0 1rem; font-size: 1.6rem; }
.subtle { color: var(--muted); }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

.kpis { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.pill { padding: .4rem .7rem; background: #eef2ff; color: #1e3a8a; border-radius: 999px; font-size: .9rem; }

.steps { margin: 0; padding-left: 1.2rem; line-height: 1.8; }
.steps li { margin: .25rem 0; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

.faq details { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .75rem 1rem; margin: .5rem 0; background: white; }
.faq summary { cursor: pointer; font-weight: 600; }

/* Iconos de tarjetas */
.icon { width: 28px; height: 28px; color: var(--brand); margin-bottom: .5rem; display: inline-block; }

/* CTA pegajosa solo en móvil */
.sticky-cta { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 50; background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 8px 24px rgba(2,6,23,.12); padding: 8px 12px; border-radius: 999px; display: flex; gap: 8px; }
@media (min-width: 900px) { 
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.6rem; }
  .sticky-cta { display: none; } 
}