/* ============================================================
   MACARONESIAN STREET — brand.css
   Sistema base · Fase 1 · listo para producción
   Un único tipo (Archivo) · solo neutros cálidos
   Cárgalo una vez y úsalo en todas las páginas.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..900&display=swap");

:root {
  --ms-ink:        #15140f;
  --ms-paper:      #f4f2ec;
  --ms-surface:    #201e18;
  --ms-surface-2:  #2a2821;
  --ms-smoke:      #9a9486;
  --ms-bruma:      #c9c3b5;
  --ms-line:       rgba(244,242,236,0.12);
  --ms-line-2:     rgba(244,242,236,0.22);
  --ms-line-ink:   rgba(21,20,15,0.12);
  --ms-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-maxw: 1320px;
  --ms-gutter: clamp(24px, 5vw, 72px);
  --ms-radius: 4px;
  --ms-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.ms {
  margin: 0;
  background: var(--ms-ink);
  color: var(--ms-paper);
  font-family: var(--ms-font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ms-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.ms-display {
  font-family: var(--ms-font);
  font-weight: 800;
  font-stretch: 66%;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.005em;
  margin: 0;
}
.ms-display--xl { font-size: clamp(56px, 11vw, 168px); }
.ms-display--lg { font-size: clamp(40px, 7vw, 104px); }
.ms-display--md { font-size: clamp(30px, 4.4vw, 60px); }

.ms-wordmark {
  font-family: var(--ms-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  line-height: 1.7;
}
.ms-wordmark .l2 { letter-spacing: 0.5em; padding-left: 0.5em; }

.ms-head {
  font-family: var(--ms-font);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0;
}

.ms-lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ms-bruma); }
.ms-body { font-size: 16px; line-height: 1.6; color: var(--ms-bruma); }

.ms-micro {
  font-family: var(--ms-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 11px;
  color: var(--ms-smoke);
}

.ms-muted { color: var(--ms-smoke); }

.ms-navmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ms-font); font-weight: 600; font-size: 15px;
  letter-spacing: 0.04em; color: var(--ms-paper);
}
.ms-navmark .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ms-navmark sup { font-size: 0.48em; opacity: 0.5; font-weight: 400; vertical-align: super; line-height: 0; margin-left: 1px; }

.ms-wrap { max-width: var(--ms-maxw); margin-inline: auto; padding-inline: var(--ms-gutter); }
.ms-section { padding-block: clamp(64px, 10vw, 140px); border-top: 1px solid var(--ms-line); }
.ms-section--flush { border-top: none; }

.ms-blkhead { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 64px); }
.ms-blkhead .no { font-weight: 600; font-size: 13px; color: var(--ms-smoke); letter-spacing: 0.08em; }
.ms-blkhead .sub { margin-left: auto; max-width: 380px; color: var(--ms-smoke); font-size: 14px; line-height: 1.55; }

.ms-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--ms-gutter);
  background: rgba(21,20,15,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ms-line);
}
.ms-nav__links { display: flex; gap: 30px; }
.ms-nav__links a {
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px;
  color: var(--ms-bruma); transition: color 0.2s var(--ms-ease);
}
.ms-nav__links a:hover { color: var(--ms-paper); }

.ms-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ms-font); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  padding: 14px 22px; border-radius: 100px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.2s var(--ms-ease);
}
.ms-btn--solid { background: var(--ms-paper); color: var(--ms-ink); }
.ms-btn--solid:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.ms-btn--ghost { background: transparent; color: var(--ms-paper); border-color: var(--ms-line-2); }
.ms-btn--ghost:hover { background: var(--ms-paper); color: var(--ms-ink); border-color: var(--ms-paper); }
.ms-btn .arrow { font-size: 1.1em; line-height: 1; }

.ms-field { display: flex; gap: 0; max-width: 460px; border: 1px solid var(--ms-line-2); border-radius: 100px; overflow: hidden; background: rgba(244,242,236,0.03); }
.ms-field input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--ms-paper); font-family: var(--ms-font); font-size: 15px; padding: 15px 22px;
}
.ms-field input::placeholder { color: var(--ms-smoke); }
.ms-field button {
  flex: 0 0 auto; background: var(--ms-paper); color: var(--ms-ink); border: none; cursor: pointer;
  font-family: var(--ms-font); font-weight: 600; font-size: 14px; padding: 0 26px;
  transition: opacity 0.2s var(--ms-ease);
}
.ms-field button:hover { opacity: 0.85; }

.ms-divider { height: 1px; background: var(--ms-line); border: none; margin: 0; }
.ms-stack-sm > * + * { margin-top: 14px; }
.ms-stack-md > * + * { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}