/* Fuente base */
:root {
:root {
  --ms-bg: #0a0a0a;
  --ms-bg-elev: #111213;
  --ms-text: #f5f6f7;
  --ms-text-dim: #c7c9cc;
  --ms-primary: #0071e3;
  --ms-border: #1f2023;
  --ms-accent: #14a2ff;
}

/* Tipografías del proyecto */
@font-face {
  font-family: "SF Pro Display";
  src: url("./SF-Pro-Display-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("./SF-Pro-Display-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("./SF-Pro-Display-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("./SF-Pro-Display-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("./SF-Pro-Text-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./SF-Pro-Text-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./SF-Pro-Text-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ms-text);
  background: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Utilidades */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Header */
.ms-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(16px);
  background: #0a0a0a; /* negro sólido para evitar aclarado al scrollear */
  border-bottom: 1px solid var(--ms-border);
}
.ms-header__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 20px; max-width: 1200px; margin: 0 auto;
}
.ms-logo { text-decoration: none; color: var(--ms-text); font-weight: 700; letter-spacing: 0.2px; display: inline-flex; align-items: center; }
.ms-logo__text { font-size: 18px; }
.ms-logo__img { height: 22px; width: auto; display: block; }

.ms-header__icons { display: flex; gap: 10px; }
.ms-icon-btn { background: transparent; color: var(--ms-text); border: 1px solid var(--ms-border); border-radius: 10px; padding: 6px 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ms-icon-btn:hover { background: var(--ms-bg-elev); }
.ms-icon-img { width: 18px; height: 18px; display: block; }

.ms-nav__toggle{ display: inline-flex; flex-direction: column; gap: 4px; background: transparent; border: none; cursor: pointer; }
.ms-nav__toggle-line{ width: 22px; height: 2px; background: var(--ms-text); display: block; }

/* Nav */
.ms-nav { display: none; border-top: 1px solid var(--ms-border); }
.ms-nav.is-open { display: block; }
.ms-nav__list {
  list-style: none; margin: 0; padding: 0 20px; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
}
.ms-nav__item { position: relative; }
.ms-nav__link {
  width: 100%; text-align: left; background: transparent; color: var(--ms-text);
  border: none; padding: 12px 0; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block;
}
.ms-nav__item.has-highlight > .ms-nav__link { color: #ffd166; }

.ms-dropdown { display: none; position: static; background: transparent; padding-bottom: 8px; }
.ms-nav__item.is-open > .ms-dropdown { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ms-dropdown a { color: var(--ms-text-dim); text-decoration: none; font-size: 14px; }
.ms-dropdown a:hover { color: var(--ms-text); }

@media (min-width: 960px) {
  .ms-nav { display: block; border-top: none; }
  .ms-nav__toggle { display: none; }
  .ms-nav__list { display: flex; gap: 18px; align-items: center; padding: 0 20px 8px; }
  .ms-nav__link { padding: 10px 8px; }
  .ms-dropdown {
    position: absolute; left: 0; top: calc(100% + 6px); min-width: 260px; padding: 14px; background: var(--ms-bg-elev);
    border: 1px solid var(--ms-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
}

/* Main / Mantenimiento */
.ms-main { min-height: calc(100vh - 260px); padding: 48px 0 32px; display: grid; align-items: center; background: #f6f7f8; }
.ms-hero { background: #f6f7f8; }
.ms-hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding-left: 24px; padding-right: 24px; }
.ms-hero__left h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; color: #111214; font-weight: 700; }
.ms-hero__left p { color: #4b4e54; margin: 0 0 18px; font-size: 18px; }
.ms-hero__cta-list { display: grid; gap: 10px; margin-top: 20px; }
.ms-cta { display: grid; grid-template-columns: 36px 1fr 18px; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #e5e6e8; border-radius: 14px; padding: 10px 12px; color: #111214; text-decoration: none; }
.ms-cta__icon { font-size: 22px; }
.ms-cta__text { color: #111214; }
.ms-cta__text strong { font-weight: 600; }
.ms-cta__text span { color: #4b4e54; }
.ms-cta__arrow { color: #8a8f98; font-size: 22px; }
.ms-cta:hover { border-color: #cfd2d6; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.ms-hero__dots { display: flex; gap: 8px; margin-top: 18px; }
.ms-hero__dots span { width: 8px; height: 8px; border-radius: 50%; background: #d3d6da; display: inline-block; }
.ms-hero__dots .is-active { background: #111214; }

.ms-hero__right { display: grid; place-items: center; }
.ms-hero__illust { position: relative; width: 560px; max-width: 100%; }
.ms-hero__image { width: 100%; height: auto; display: block; }

@media (min-width: 1024px) {
  .ms-hero__inner { grid-template-columns: 1fr 1fr; }
  .ms-hero__left h1 { font-size: 46px; }
}

/* Footer */
.ms-footer { border-top: 1px solid #e5e6e8; padding: 48px 24px; background: #f6f7f8; color: #1c1d1f; }
.ms-footer__cols { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 1200px; margin: 0 auto; }
.ms-footer__col h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #1c1d1f; }
.ms-footer__col h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #1c1d1f; }
.ms-footer__col p { margin: 0 0 14px; color: #4b4e54; line-height: 1.6; font-size: 14px; }
.ms-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ms-footer__col a { color: #4b4e54; text-decoration: none; }
.ms-footer__col a:hover { color: #111214; }
.ms-footer__col--socials { display: flex; flex-direction: column; gap: 10px; }
.ms-footer__socials { display: flex; gap: 10px; }
.ms-social { width: 28px; height: 28px; border-radius: 50%; background: #e9eaec; border: 1px solid #d9dbde; display: inline-block; }

@media (min-width: 1024px) {
  .ms-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
}