/* Original Mission Tile — shared site styles (catalogo, producto, proyectos) */

:root {
  --paper:      oklch(96% 0.012 80);
  --paper-2:    oklch(92% 0.014 80);
  --paper-3:    oklch(88% 0.016 80);
  --ink:        oklch(15% 0.018 60);
  --ink-2:      oklch(30% 0.014 60);
  --muted:      oklch(48% 0.012 60);
  --rule:       oklch(15% 0.018 60);
  --accent:     oklch(38% 0.13 250);
  --terracotta: oklch(55% 0.13 35);
  --sage:       oklch(55% 0.06 145);
  --ochre:      oklch(72% 0.13 75);
  --font-display: 'Times New Roman', 'GT Sectra', 'Iowan Old Style', Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ---------- Masthead (shared) ---------- */
.masthead {
  border-bottom: 1.5px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.mast-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 28px;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
}
.mast-meta {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; gap: 22px; align-items: center;
}
.mast-meta .est {
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 5px 8px;
}
.wordmark {
  text-align: center;
  font: 400 22px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wordmark .amp { font-style: italic; padding: 0 4px; color: var(--muted); }
.mast-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mast-actions .btn { border: 1px solid var(--rule); padding: 9px 14px; }
.mast-actions .btn.solid { background: var(--ink); color: var(--paper); }
.mast-nav {
  display: flex; justify-content: center; gap: 36px;
  padding: 12px 28px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mast-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 4px;
}

/* ---------- Page chrome ---------- */
.page-head {
  border-bottom: 1.5px solid var(--rule);
  padding: 56px 56px 40px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: end;
}
.page-head .crumbs {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.page-head h1 {
  font: 400 clamp(48px, 7vw, 120px) / 0.95 var(--font-display);
  letter-spacing: -0.025em;
}
.page-head h1 .it { font-style: italic; color: var(--ink-2); }
.page-head .lede {
  color: var(--ink-2);
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.55;
  border-left: 1.5px solid var(--rule);
  padding: 6px 0 6px 22px;
}

/* ---------- Footer (shared, compact) ---------- */
footer.foot {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 56px 28px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 36px;
  border-bottom: 1px solid oklch(40% 0.014 60);
  padding-bottom: 32px;
}
.foot h5 {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(70% 0.012 60);
  margin-bottom: 14px;
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.foot .brand-block h4 {
  font: 400 30px/1 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.foot .brand-block p {
  font-size: 13.5px; color: oklch(80% 0.012 60); max-width: 32ch;
}
.foot-meta {
  margin-top: 20px;
  display: flex; justify-content: space-between;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(60% 0.012 60);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .page-head { grid-template-columns: 1fr; padding: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .mast-top { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .mast-meta { justify-content: center; flex-wrap: wrap; gap: 12px; }
  .mast-actions { justify-content: center; }
  .mast-nav { gap: 16px; flex-wrap: wrap; padding: 12px 18px; }
  .page-head { padding: 32px 22px; gap: 24px; }
  .page-head .lede { padding: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 16px; }
  footer.foot { padding: 40px 22px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-meta { flex-direction: column; gap: 12px; text-align: center; }
}