/* ============================================================
   RUMBO — Exploración de identidad
   Sistema de brand board · estilos compartidos
   ============================================================ */

:root {
  --page-bg: #e7e4dd;
  --page-ink: #1a1a18;
  --page-mute: #6f6b63;
  --rail-h: 64px;
  --maxw: 1280px;
  --gut: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--rail-h); }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- top rail / nav ---------- */
.rail {
  position: sticky; top: 0; z-index: 100;
  height: var(--rail-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gut);
  background: rgba(231, 228, 221, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.rail__brand {
  font-family: "Archivo", sans-serif;
  font-weight: 800; letter-spacing: 0.34em;
  font-size: 14px; text-transform: uppercase;
}
.rail__brand span { color: var(--page-mute); font-weight: 500; letter-spacing: 0.18em; }
.rail__nav { display: flex; gap: 4px; }
.rail__nav a {
  text-decoration: none;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--page-mute);
  padding: 7px 11px; border-radius: 999px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.rail__nav a:hover { background: rgba(0,0,0,0.07); color: var(--page-ink); }
.rail__nav b { color: var(--page-ink); }
@media (max-width: 720px){ .rail__nav a span { display:none; } }

/* ---------- generic shell ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.kicker {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.mono { font-family: "Spline Sans Mono", monospace; }

/* ============================================================
   COVER / strategy intro
   ============================================================ */
.cover { background: #161514; color: #efece4; padding: clamp(64px,11vw,150px) 0 clamp(56px,8vw,110px); }
.cover__mark {
  font-family:"Newsreader", serif; font-weight: 500;
  letter-spacing: 0.42em; font-size: 13px; text-transform: uppercase;
  color: #b9b3a6; margin-bottom: 8vh;
}
.cover h1 {
  font-family:"Newsreader", serif; font-weight: 400;
  font-size: clamp(52px, 11vw, 168px); line-height: 0.92;
  letter-spacing: -0.02em; margin: 0;
}
.cover h1 em { font-style: italic; }
.cover__lede {
  margin-top: 7vh; max-width: 56ch;
  font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: #d7d2c7;
}
.cover__lede b { color: #fff; font-weight: 600; }
.cover__meta {
  margin-top: 9vh; display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid rgba(255,255,255,0.16); padding-top: 36px;
}
.cover__meta h4 { margin:0 0 8px; font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8f897c; font-weight:500; }
.cover__meta p { margin:0; font-size:15px; line-height:1.55; color:#ded9cf; }

/* index of directions */
.index { background:#161514; color:#efece4; padding: 0 0 clamp(70px,10vw,130px); }
.index__row {
  display:grid; grid-template-columns: 80px 1fr auto; gap: clamp(16px,4vw,52px);
  align-items: baseline;
  padding: clamp(22px,3vw,38px) 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  text-decoration:none; color:inherit;
  transition: padding-left .25s, color .2s;
}
.index__row:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }
.index__row:hover { padding-left: 14px; }
.index__row .n { font-family:"Spline Sans Mono",monospace; font-size:14px; color:#8f897c; }
.index__row h3 { margin:0; font-family:"Newsreader",serif; font-weight:400; font-size:clamp(26px,4.5vw,52px); line-height:1; letter-spacing:-0.01em; }
.index__row h3 b { display:block; font-family:"Spline Sans Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#9a9488; font-weight:500; margin-top:12px; }
.index__row .sw { display:flex; gap:6px; }
.index__row .sw i { width:26px; height:26px; border-radius:50%; display:block; }
@media (max-width:620px){ .index__row{ grid-template-columns: 48px 1fr; } .index__row .sw{ display:none; } }

/* ============================================================
   BOARD — per-direction container & panel system
   ============================================================ */
.board { padding: clamp(56px,8vw,112px) 0 clamp(64px,9vw,128px); }
.board__head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) clamp(34px,5vw,64px); }
.board__num {
  font-family:"Spline Sans Mono",monospace; font-size: clamp(13px,1.4vw,15px);
  letter-spacing:.2em; opacity:.6; margin-bottom: 18px;
}
.board__title { font-family: var(--display); font-weight: var(--display-w, 500); font-size: clamp(40px,8vw,104px); line-height:0.95; letter-spacing:-0.02em; margin:0; }
.board__title em { font-style: italic; }
.board__concept { margin: clamp(22px,3vw,34px) 0 0; max-width: 60ch; font-size: clamp(17px,1.7vw,21px); line-height:1.55; }
.board__concept b { font-weight: 700; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top: 26px; }
.chips span {
  font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:7px 13px; border-radius:999px;
  border:1px solid currentColor;
}

/* panel grid */
.grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.panel {
  border-radius: 6px; padding: clamp(22px,2.6vw,38px);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 220px;
}
.panel__tag {
  font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.55; margin-bottom: 20px;
  display:flex; justify-content:space-between; align-items:center;
}
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 900px){
  .col-8,.col-7,.col-6,.col-5,.col-4 { grid-column: span 12; }
  .col-3 { grid-column: span 6; }
}

/* color swatch list */
.swatches { display:grid; gap:2px; margin-top:auto; }
.swatch { display:flex; align-items:stretch; min-height:64px; border-radius:4px; overflow:hidden; }
.swatch .chip { width:88px; flex:none; }
.swatch .meta { padding:12px 16px; display:flex; flex-direction:column; justify-content:center; gap:3px; flex:1; }
.swatch .meta .nm { font-weight:700; font-size:14px; }
.swatch .meta .hx { font-family:"Spline Sans Mono",monospace; font-size:11px; opacity:.7; letter-spacing:.04em; }
.swatch .meta .ds { font-size:12px; line-height:1.4; opacity:.78; }

/* typography specimen */
.spec-lg { font-family: var(--display); line-height:0.95; letter-spacing:-0.02em; }
.type-row { display:flex; align-items:baseline; gap:16px; padding:14px 0; border-top:1px solid currentColor; }
.type-row:first-of-type{ border-top:none; }
.type-row .lbl { font-family:"Spline Sans Mono",monospace; font-size:10px; letter-spacing:.1em; opacity:.55; width:96px; flex:none; text-transform:uppercase; }

/* icon row */
.icons { display:grid; grid-template-columns: repeat(auto-fit, minmax(78px,1fr)); gap:14px; margin-top: 12px; }
.icons figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.icons svg { width:42px; height:42px; }
.icons figcaption { font-family:"Spline Sans Mono",monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.6; text-align:center; }

/* photography placeholder */
.ph {
  position:relative; border-radius:4px; overflow:hidden; min-height:160px; flex:1;
  display:flex; align-items:flex-end; padding:14px;
}
.ph::before {
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 9px, transparent 9px 18px);
}
.ph span { position:relative; font-family:"Spline Sans Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.ph-grid { display:grid; gap:12px; flex:1; }

/* instagram mock */
.ig { border-radius:14px; overflow:hidden; }
.ig__top { display:flex; align-items:center; gap:18px; padding:20px; }
.ig__av { width:78px; height:78px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.ig__stats { display:flex; gap:22px; }
.ig__stats b { display:block; font-size:17px; font-weight:800; }
.ig__stats span { font-size:11px; opacity:.65; }
.ig__bio { padding: 0 20px 16px; font-size:13px; line-height:1.5; }
.ig__bio .h { font-weight:700; }
.ig__hl { display:flex; gap:14px; padding: 4px 20px 18px; }
.ig__hl i { width:54px; height:54px; border-radius:50%; display:block; }
.ig__feed { display:grid; grid-template-columns: repeat(3,1fr); gap:3px; }
.ig__feed .cell { aspect-ratio:1; position:relative; overflow:hidden; display:flex; padding:12px; }
.ig__feed .cell.stripe::before {
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 9px, transparent 9px 18px);
}
.ig__feed .cell .txt { position:relative; font-family:var(--display); line-height:1.02; }
.ig__feed .cell .mtxt { position:relative; font-family:"Spline Sans Mono",monospace; }

/* voice / content */
.voice { display:grid; gap:14px; }
.voice .qt { font-family:var(--display); font-size:clamp(20px,2.6vw,32px); line-height:1.15; letter-spacing:-0.01em; }
.voice .pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.voice .do, .voice .dont { padding:16px; border-radius:4px; font-size:13px; line-height:1.5; }
.voice .lbl { font-family:"Spline Sans Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:8px; opacity:.7; }
@media (max-width:560px){ .voice .pair{ grid-template-columns:1fr; } }

/* logo lockups */
.lock { display:flex; flex-direction:column; gap:26px; }
.lock__primary { font-family:var(--display); font-weight:var(--logo-w,600); line-height:0.9; }
.lock__row { display:flex; gap:26px; flex-wrap:wrap; align-items:center; }
.lock__chipmark { width:74px; height:74px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.lock__note { font-family:"Spline Sans Mono",monospace; font-size:10.5px; letter-spacing:.06em; opacity:.6; line-height:1.5; }

.footer { background:#161514; color:#9a9488; text-align:center; padding:56px var(--gut); font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }