/* Motonte — hoja de estilos común */

:root{
  --bg:#f4f0e8;
  --bg-alt:#e7e1d5;
  --dark:#20242a;
  --ink:#22201b;
  --muted:#776f62;
  --accent:#2c4668;
  --ochre:#a06a2c;
  --rule:6px;
  --pad-y:72px;
  --pad-x:44px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 18px/1.65 Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}

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

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

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

.f-dark a:focus-visible,
.f-accent a:focus-visible,
.f-ochre a:focus-visible{outline-color:var(--bg)}

/* ---------- cabecera ---------- */

.top{
  background:var(--bg-alt);
  border-bottom:var(--rule) solid var(--dark);
  padding:18px var(--pad-x);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 32px;
  justify-content:space-between;
}

.brand{
  font-size:22px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.brand:hover{color:var(--accent)}

.top nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
}
.top nav a{
  font-size:16px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.top nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.top nav a[aria-current="page"]{border-bottom-color:var(--ochre)}

/* ---------- rejilla general ---------- */

.band{border-bottom:var(--rule) solid var(--dark)}

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

.grid > *{min-width:0}
.cell{padding:var(--pad-y) var(--pad-x);min-width:0}
.cell.tight{padding:44px}

.c1{grid-column:span 1}
.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}

.f-light{background:var(--bg)}
.f-alt{background:var(--bg-alt)}
.f-dark{background:var(--dark);color:var(--bg)}
.f-accent{background:var(--accent);color:var(--bg)}
.f-ochre{background:var(--ochre);color:var(--bg)}

.f-dark .caption,.f-accent .caption{color:#c9c1b2}
.f-dark .eyebrow{color:#cfa46a}
.f-accent .eyebrow,.f-ochre .eyebrow{color:var(--bg)}
.f-dark a,.f-accent a{color:#e2d3ba}
.f-dark li::before,.f-accent li::before{background:#cfa46a}

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

h1{
  margin:0;
  font-weight:400;
  font-size:clamp(34px,5vw,60px);
  line-height:1.07;
  letter-spacing:-.01em;
}

h2{
  margin:0 0 26px;
  font-weight:400;
  font-size:clamp(25px,2.7vw,34px);
  line-height:1.2;
}

h3{
  margin:34px 0 10px;
  font-weight:400;
  font-style:italic;
  font-size:21px;
  line-height:1.3;
}

p{margin:0 0 26px}
p:last-child{margin-bottom:0}

.lead{font-size:20px}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ochre);
  margin:0 0 14px;
}

.caption{
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin:14px 0 0;
}

.note{
  font-size:16px;
  line-height:1.55;
}

.figure-num{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ochre);
  display:block;
  margin-bottom:8px;
}

ul{margin:0 0 26px;padding:0;list-style:none}
ul:last-child{margin-bottom:0}
li{position:relative;padding-left:24px;margin-bottom:12px}
li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:11px;
  height:2px;
  background:var(--accent);
}
li:last-child{margin-bottom:0}

ol{margin:0 0 26px;padding-left:26px}
ol li{padding-left:6px}
ol li::before{display:none}

dl{margin:0}
dt{font-style:italic;margin-top:20px}
dd{margin:4px 0 0}

.rule-top{border-top:3px solid var(--ochre);padding-top:20px;margin-top:28px}

/* ---------- portada ---------- */

.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--dark);
  border-bottom:var(--rule) solid var(--dark);
}
.hero-title{
  grid-column:1/8;
  grid-row:1/3;
  background:var(--bg);
  padding:var(--pad-y) var(--pad-x);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-intro{
  grid-column:8/13;
  grid-row:1/2;
  background:var(--accent);
  color:var(--bg);
  padding:44px;
}
.hero-block{
  grid-column:8/13;
  grid-row:2/3;
  background:var(--ochre);
  min-height:120px;
}
.hero-nav{
  grid-column:1/13;
  grid-row:3/4;
  background:var(--bg-alt);
  padding:22px var(--pad-x);
}
.hero-nav ul{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0}
.hero-nav li{padding-left:0;margin:0}
.hero-nav li::before{display:none}
.hero-nav a{font-size:16px}
.hero-nav .eyebrow{margin-bottom:12px}

.frame{border:5px solid var(--dark)}

/* ---------- imagen de detalle ---------- */

.strip{background:var(--ochre)}

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

.foot{border-top:var(--rule) solid var(--dark)}
.foot .cell{padding:44px}
.foot .brandline{font-size:20px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}
.foot ul{margin:0}
.foot li{margin-bottom:10px}
.foot .meta{font-family:var(--sans);font-size:12px;line-height:1.7;color:var(--muted)}
.foot .f-dark .meta{color:#b6ad9d}

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

@media (max-width:1080px){
  :root{--pad-y:56px;--pad-x:32px}
  body{font-size:17px}
  .cell.tight{padding:32px}
}

@media (max-width:860px){
  :root{--pad-y:40px;--pad-x:20px}
  .grid{grid-template-columns:1fr}
  .grid > *{grid-column:1/-1!important}
  .hero{grid-template-columns:1fr}
  .hero-title,.hero-intro,.hero-block,.hero-nav{grid-column:1/-1;grid-row:auto}
  .hero-title,.hero-intro,.hero-nav{padding:40px 20px}
  .hero-block{min-height:64px}
  .strip{min-height:18px}
  .top{padding:16px 20px}
  .foot .cell{padding:32px 20px}
}