/* ============================================================
   Zentria — Soporte M365 · landing
   Acento: azul Microsoft (#0A64C8 → #28A8EA)
   ============================================================ */

:root {
  --sm-a: #0A64C8;
  --sm-b: #28A8EA;
  --sm-grad: linear-gradient(135deg, #0A64C8 0%, #28A8EA 100%);
  --sm-grad-soft: linear-gradient(135deg, rgba(10, 100, 200, 0.12), rgba(40, 168, 234, 0.12));
}

.sm-hero {
  padding: 56px 0 48px;
  background:
    radial-gradient(90% 130% at 85% 0%, rgba(40, 168, 234, 0.16), transparent 60%),
    radial-gradient(80% 120% at 10% 100%, rgba(10, 100, 200, 0.14), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.sm-hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.sm-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; color: var(--sm-a);
  background: var(--sm-grad-soft); border: 1px solid rgba(10, 100, 200, 0.28);
  margin-bottom: 20px;
}
.sm-hero-badge svg { width: 14px; height: 14px; }
.sm-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.8rem); letter-spacing: -0.02em; line-height: 1.06; margin-bottom: 14px; }
.sm-hero h1 .sm-accent { background: var(--sm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sm-hero-tagline { font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 500; color: var(--sm-a); margin-bottom: 14px; }
.sm-hero-desc { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--muted); line-height: 1.75; max-width: 620px; margin-bottom: 26px; }
.sm-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sm-hero-ctas .pill svg { width: 17px; height: 17px; }

/* Visual del hero: collage inspirador de apps M365 */
.sm-hero-visual { display: flex; justify-content: center; }
.sm-hero-card {
  width: 100%; max-width: 460px;
  border-radius: 28px; padding: 26px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 30px 80px -30px rgba(10, 100, 200, 0.5);
  position: relative;
}
.sm-hero-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 28px;
  background: radial-gradient(80% 100% at 100% 0%, rgba(40,168,234,.12), transparent 55%);
  pointer-events: none;
}
.sm-hero-card-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; margin-bottom: 16px; }
.sm-apps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.sm-app {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 6px; border-radius: 16px; background: var(--bg-soft);
  border: 1px solid var(--border);
}
.sm-app svg { width: 30px; height: 30px; }
.sm-app span { font-size: 11px; color: var(--muted); font-weight: 500; }
.sm-hero-note { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 16px; }
@media (min-width: 900px) { .sm-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
@media (max-width: 480px) { .sm-apps { grid-template-columns: repeat(4, 1fr); gap: 6px; } .sm-app svg { width: 24px; height: 24px; } }

/* Secciones */
.sm-section { padding: 64px 0; }
.sm-section-soft { background: var(--bg-soft); }
.sm-head { max-width: 760px; margin-bottom: 40px; }
.sm-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sm-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--sm-a); margin-bottom: 12px;
}
.sm-kicker svg { width: 15px; height: 15px; }
.sm-title { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.02em; margin-bottom: 12px; }
.sm-desc { color: var(--muted); font-size: 1.0625rem; line-height: 1.7; }

/* Productos M365 */
.sm-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sm-product {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 20px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.sm-product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(10,100,200,.3); }
.sm-product-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 12px;
  background: var(--sm-grad-soft); border: 1px solid var(--border);
}
.sm-product-icon svg { width: 26px; height: 26px; }
.sm-product h3 { font-size: 1.05rem; margin-bottom: 6px; }
.sm-product p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.sm-product a { font-size: 0.85rem; font-weight: 600; color: var(--sm-a); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; }
.sm-product a svg { width: 13px; height: 13px; }
.sm-product a:hover { text-decoration: underline; }
@media (min-width: 720px) { .sm-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .sm-products { grid-template-columns: repeat(4, 1fr); } }

/* Licenciamiento */
.sm-license { display: grid; grid-template-columns: 1fr; gap: 20px; }
.sm-license-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 22px;
  padding: 28px; display: flex; flex-direction: column;
}
.sm-license-card--business { border-top: 4px solid #21A366; }
.sm-license-card--enterprise { border-top: 4px solid #0A64C8; }
.sm-license-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 9999px; margin-bottom: 10px; align-self: flex-start;
}
.sm-license-card--business .sm-license-tag { background: rgba(33,163,102,.14); color: #107C41; }
.sm-license-card--enterprise .sm-license-tag { background: rgba(10,100,200,.14); color: var(--sm-a); }
.sm-license-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.sm-license-card .sm-license-aud { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.sm-license-card ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.sm-license-card ul li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.92rem; color: var(--fg-soft); }
.sm-license-card ul li svg { width: 15px; height: 15px; color: var(--sm-a); flex-shrink: 0; margin-top: 2px; }
.sm-license-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.9rem; font-weight: 600; color: var(--sm-a); text-decoration: none;
}
.sm-license-link svg { width: 15px; height: 15px; }
.sm-license-link:hover { text-decoration: underline; }
@media (min-width: 800px) { .sm-license { grid-template-columns: 1fr 1fr; } }

/* Servicio (features) */
.sm-features { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sm-feature {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px;
}
.sm-feature .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--sm-grad-soft); border: 1px solid var(--border); color: var(--sm-a);
}
.sm-feature .ic svg { width: 20px; height: 20px; }
.sm-feature b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.sm-feature p { font-size: 0.87rem; color: var(--muted); line-height: 1.55; margin: 0; }
@media (min-width: 700px) { .sm-features { grid-template-columns: 1fr 1fr; } }

/* CTA final */
.sm-cta {
  border-radius: 28px; padding: 56px 32px; text-align: center; color: #fff;
  background: var(--sm-grad); position: relative; overflow: hidden;
}
.sm-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 15% 0%, rgba(255,255,255,.18), transparent 55%),
              radial-gradient(60% 100% at 85% 100%, rgba(255,255,255,.14), transparent 55%);
  pointer-events: none;
}
.sm-cta h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 14px; position: relative; }
.sm-cta p { color: rgba(255,255,255,.94); max-width: 640px; margin: 0 auto 26px; font-size: 1.05rem; line-height: 1.7; position: relative; }
.sm-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; }
.sm-cta-actions .pill { background: #fff; color: var(--sm-a); }
.sm-cta-actions .pill-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.sm-cta-actions .pill-outline:hover { background: rgba(255,255,255,.12); }
.sm-cta-note { font-size: 0.85rem; color: rgba(255,255,255,.82); margin-top: 18px; position: relative; }