/* Mapitro — hoja de estilo general */

:root{
  --bg:#1a1d15;
  --bg-alt:#22261c;
  --bg-light:#efeade;
  --ink:#e8e4d6;
  --ink-dim:#909486;
  --ink-dark:#1a1d15;
  --accent:#c07c3a;
  --accent2:#8fa26a;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--ink);}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- rejilla y eje ---------- */

.wrap{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
}

/* eje vertical central */
.axis{position:relative;}
.axis::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  margin-left:-0.5px;
  background:linear-gradient(180deg,rgba(192,124,58,0) 0%,rgba(192,124,58,.55) 12%,rgba(192,124,58,.55) 88%,rgba(192,124,58,0) 100%);
  pointer-events:none;
}

/* ---------- tipografía ---------- */

h1,h2,h3,.meta,.nav a,.kicker{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  line-height:1.35;
}

h1{
  font-size:clamp(1.55rem,4.4vw,2.5rem);
  letter-spacing:.1em;
  margin:0 0 28px;
  text-align:center;
}
h1 .l2{display:block;color:var(--accent);}

h2{
  font-size:clamp(1.02rem,2.1vw,1.28rem);
  margin:0 0 22px;
}

h3{
  font-size:.95rem;
  letter-spacing:.16em;
  margin:34px 0 10px;
  color:var(--ink);
}

p{margin:0 0 20px;}
p:last-child{margin-bottom:0;}

.kicker{
  font-size:.68rem;
  letter-spacing:.3em;
  color:var(--accent2);
  display:block;
  margin:0 0 14px;
}

.num{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.28em;
  color:var(--accent2);
  display:block;
  margin-bottom:12px;
}

.lead{font-size:1.06rem;}

.dim{color:var(--ink-dim);}

.meta{
  font-size:.66rem;
  letter-spacing:.26em;
  color:var(--ink-dim);
  font-weight:500;
}

/* ---------- cabecera y navegación ---------- */

.site-head{
  border-bottom:1px solid rgba(232,228,214,.12);
  background:var(--bg);
}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  align-items:center;
  justify-content:center;
  padding-top:20px;
  padding-bottom:20px;
}

.brand{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.9rem;
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
}
.brand:hover{color:var(--accent);}

.nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
}
.nav a{
  font-size:.66rem;
  letter-spacing:.2em;
  color:var(--ink-dim);
  text-decoration:none;
  font-weight:500;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}

/* ---------- ritmo de secciones ---------- */

.s64{padding:64px 0;}
.s80{padding:80px 0;}
.s96{padding:96px 0;}
.alt{background:var(--bg-alt);}

.light{
  background:var(--bg-light);
  color:var(--ink-dark);
}
.light h1,.light h2,.light h3{color:var(--ink-dark);}
.light .dim{color:#5c6052;}
.light .meta{color:#6b6f60;}
.light .num,.light .kicker{color:#6c7f4a;}
.light a{color:#a4621f;}
.light a:hover{color:var(--ink-dark);}
.light .axis::before{
  background:linear-gradient(180deg,rgba(164,98,31,0) 0%,rgba(164,98,31,.5) 12%,rgba(164,98,31,.5) 88%,rgba(164,98,31,0) 100%);
}
.light .check li::before{background:#a4621f;}
.light .check li{border-bottom-color:rgba(26,29,21,.14);}

/* ---------- separador en arco ---------- */

.arc{
  grid-column:5 / span 4;
  height:26px;
  border-top:1px solid rgba(192,124,58,.5);
  border-left:1px solid rgba(192,124,58,.22);
  border-right:1px solid rgba(192,124,58,.22);
  border-radius:200px 200px 0 0;
  margin:0 auto;
  width:100%;
}
.arc-row{margin-bottom:44px;}

/* ---------- héroe ---------- */

.hero{padding:76px 0 88px;}
.hero .grid{align-items:start;}
.hero-main{grid-column:4 / span 6;text-align:center;}
.hero-side-l{grid-column:1 / span 3;}
.hero-side-r{grid-column:10 / span 3;}
.hero-side-l,.hero-side-r{
  font-size:.88rem;
  line-height:1.7;
  color:var(--ink-dim);
  padding-top:8px;
}
.hero-side-l{text-align:right;}
.hero-rule{
  width:34px;height:1px;
  background:var(--accent2);
  margin:0 0 14px auto;
}
.hero-side-r .hero-rule{margin:0 auto 14px 0;}

/* ---------- figuras ---------- */

.fig-main{
  grid-column:4 / span 6;
  margin:0;
  text-align:center;
}
.fig-main img{
  width:100%;
  max-width:680px;
  margin:0 auto;
  border:1px solid rgba(232,228,214,.14);
}
figcaption{
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-top:14px;
  line-height:1.7;
}
.fig-main figcaption{text-align:center;max-width:520px;margin-left:auto;margin-right:auto;}

.fig-detail{
  grid-column:2 / span 4;
  margin:0;
}
.fig-detail img{
  width:100%;
  border:1px solid rgba(26,29,21,.18);
}
.fig-detail figcaption{color:#6b6f60;text-align:left;}
.detail-text{grid-column:7 / span 5;}

/* ---------- bloques de contenido ---------- */

.col-center{grid-column:4 / span 6;}
.col-narrative{grid-column:1 / span 7;}
.col-narrative-r{grid-column:6 / span 7;}
.pair-l{grid-column:2 / span 4;}
.pair-r{grid-column:8 / span 4;}
.head-center{grid-column:1 / -1;text-align:center;}

.check{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.check li{
  position:relative;
  padding:9px 0 9px 22px;
  border-bottom:1px solid rgba(232,228,214,.1);
}
.check li:last-child{border-bottom:none;}
.check li::before{
  content:"";
  position:absolute;
  left:0;top:20px;
  width:7px;height:1px;
  background:var(--accent);
}

.steps{
  margin:0 0 20px;
  padding-left:24px;
}
.steps li{padding:6px 0;}
.steps li::marker{
  font-family:var(--mono);
  color:var(--accent2);
  font-size:.8rem;
}

dl.spec{margin:0;}
dl.spec dt{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--accent2);
  margin-top:18px;
}
dl.spec dd{margin:4px 0 0;}

.note{
  border-top:1px solid rgba(232,228,214,.16);
  padding-top:18px;
  font-size:.92rem;
  color:var(--ink-dim);
}
.light .note{border-top-color:rgba(26,29,21,.18);color:#5c6052;}

/* ---------- pie ---------- */

.site-foot{
  background:var(--bg);
  padding:56px 0 48px;
  text-align:center;
  border-top:1px solid rgba(232,228,214,.1);
}
.foot-arc{
  width:180px;height:22px;
  border-top:1px solid rgba(192,124,58,.5);
  border-left:1px solid rgba(192,124,58,.2);
  border-right:1px solid rgba(192,124,58,.2);
  border-radius:160px 160px 0 0;
  margin:0 auto 26px;
}
.foot-brand{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.86rem;
  margin:0 0 18px;
}
.foot-nav ul{
  list-style:none;
  margin:0 0 22px;padding:0;
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:6px 0;
}
.foot-nav li{display:flex;align-items:center;}
.foot-nav li + li::before{
  content:"";
  width:1px;height:11px;
  background:rgba(143,162,106,.5);
  margin:0 16px;
}
.foot-nav a{
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:.63rem;
  letter-spacing:.2em;
  color:var(--ink-dim);
  text-decoration:none;
}
.foot-nav a:hover{color:var(--accent);}
.foot-mail{margin:0 0 12px;font-size:.95rem;}
.foot-note{
  margin:0 auto;
  max-width:580px;
  font-size:.84rem;
  color:var(--ink-dim);
  line-height:1.7;
}

/* ---------- adaptación ---------- */

@media (max-width:900px){
  .hero-main,.fig-main,.col-center,.col-narrative,.col-narrative-r{grid-column:2 / span 10;}
  .hero-side-l{grid-column:2 / span 5;text-align:left;}
  .hero-side-r{grid-column:7 / span 5;}
  .hero-side-l .hero-rule{margin:0 auto 14px 0;}
  .fig-detail{grid-column:2 / span 10;}
  .detail-text{grid-column:2 / span 10;}
  .pair-l{grid-column:2 / span 5;}
  .pair-r{grid-column:7 / span 5;}
  .arc{grid-column:4 / span 6;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .wrap{padding:0 18px;}
  .grid{gap:0;}
  .hero{padding:44px 0 48px;}
  .s64,.s80,.s96{padding:44px 0;}
  .s96{padding:56px 0;}
  .axis::before{display:none;}
  .hero-main,.hero-side-l,.hero-side-r,.fig-main,.col-center,
  .col-narrative,.col-narrative-r,.fig-detail,.detail-text,
  .pair-l,.pair-r,.arc,.head-center{grid-column:1 / -1;}
  .hero-side-l,.hero-side-r{text-align:left;margin-top:26px;}
  .hero-side-l .hero-rule,.hero-side-r .hero-rule{margin:0 auto 14px 0;}
  .fig-main{margin-bottom:8px;}
  .detail-text{margin-top:32px;}
  .pair-r{margin-top:28px;}
  .arc{width:70%;margin-bottom:32px;}
  .arc-row{margin-bottom:28px;}
  h1{letter-spacing:.06em;}
  .site-head .wrap{flex-direction:column;gap:14px;}
  .foot-nav ul{flex-direction:column;gap:10px;}
  .foot-nav li + li::before{display:none;}
}