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

:root{
  --bg:#f4f0e8;
  --bg-alt:#e7e1d5;
  --dark:#20242a;
  --ink:#22201b;
  --ink-2:#776f62;
  --ink-inv:#f4f0e8;
  --accent:#2c4668;
  --accent-2:#a06a2c;
  --rule:rgba(34,32,27,.26);
  --gap:24px;
  --pad:44px;
  --rhythm:88px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::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.8;
}

img{max-width:100%}

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

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

/* ---------- pliego ---------- */

.sheet{
  max-width:1180px;
  margin:40px auto;
  background:var(--bg);
  border:1px solid rgba(44,70,104,.38);
}

.masthead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
  padding:24px var(--pad);
  border-bottom:1px solid var(--rule);
}

.brand{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
}
.brand span{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-top:2px;
}

.nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent-2);color:var(--ink)}

/* ---------- retícula ---------- */

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.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}
.start8{grid-column:8 / span 5}
.start9{grid-column:9 / span 4}
.start7{grid-column:7 / span 4}

/* ---------- ritmo ---------- */

.flow > * + *{margin-top:var(--rhythm)}

.band{padding:0 var(--pad)}
.band--alt{background:var(--bg-alt);padding:56px var(--pad)}
.band--dark{background:var(--dark);color:var(--ink-inv);padding:64px var(--pad)}
.band--dark h2,.band--dark h3{color:var(--ink-inv)}
.band--dark .num{color:#c69a62}
.band--dark .cap{color:#b6ac9b}
.band--dark a{color:#cfd9e8}
.band--dark a:focus-visible{outline-color:var(--ink-inv)}
.band--dark .ficha{border-color:rgba(198,154,98,.5)}
.band--dark .ficha__row{border-bottom-color:rgba(198,154,98,.3)}
.band--dark .ficha dd{color:var(--ink-inv)}
.band--dark li::before{color:#c69a62}

/* ---------- separador ---------- */

.rule{
  position:relative;
  margin:var(--rhythm) var(--pad);
  height:1px;
  background:var(--rule);
}
.rule::before,.rule::after{
  content:"";
  position:absolute;
  top:-5px;
  width:1px;
  height:11px;
  background:var(--accent-2);
}
.rule::before{left:0}
.rule::after{right:0}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink)}

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

h2{
  font-size:clamp(22px,2.3vw,29px);
  line-height:1.25;
  margin:0 0 18px;
}

h3{
  font-size:18px;
  line-height:1.4;
  margin:32px 0 10px;
}

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

.lead{font-size:19px}

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

.cap{
  font-size:12px;
  line-height:1.6;
  color:var(--ink-2);
  margin:10px 0 0;
}

.kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 16px;
}

/* ---------- listas ---------- */

ul,ol{margin:0 0 18px;padding:0}
ul{list-style:none}
ol{padding-left:22px}
li{margin:0 0 9px}

ul.list li{position:relative;padding-left:22px}
ul.list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--accent);
}

ul.check li{position:relative;padding-left:24px}
ul.check li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  border:1px solid var(--accent);
}

/* ---------- fichas ---------- */

.ficha{
  border:1px solid rgba(160,106,44,.5);
  font-size:13px;
  line-height:1.6;
}
.ficha__head{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  padding:10px 14px;
  border-bottom:1px solid rgba(160,106,44,.4);
}
.ficha dl{margin:0}
.ficha__row{
  display:grid;
  grid-template-columns:minmax(74px,auto) 1fr;
  gap:6px 12px;
  padding:9px 14px;
  border-bottom:1px solid rgba(160,106,44,.28);
}
.ficha__row:last-child{border-bottom:0}
.ficha dt{color:var(--ink-2);font-size:12px}
.ficha dd{margin:0}
.ficha p{padding:11px 14px;margin:0;font-size:13px}
.ficha + .ficha{margin-top:20px}

/* ---------- imágenes ---------- */

figure{margin:0}
figure img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.band--dark figure img{border-color:rgba(244,240,232,.3)}

/* ---------- hero ---------- */

.hero{padding:52px var(--pad) 0}
.hero .ficha{margin-top:6px}

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

.site-foot{
  max-width:1180px;
  margin:72px auto 48px;
  padding:0 4px;
}
.foot-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
}
.foot-name{font-family:var(--serif);font-size:19px;letter-spacing:.04em}
.foot-line{height:1px;background:var(--rule);margin:16px 0 18px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.foot-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.foot-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.foot-note{font-size:12px;line-height:1.7;color:var(--ink-2);margin:18px 0 0;max-width:62ch}

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

@media (max-width:1000px){
  .c4,.c5,.c6,.c7,.c8,.start7,.start8,.start9{grid-column:1 / -1}
  h1 br{display:none}
}

@media (max-width:780px){
  :root{--pad:20px;--gap:18px;--rhythm:52px}
  body{font-size:16px}
  .sheet{margin:14px 12px;}
  .band--alt{padding:36px var(--pad)}
  .band--dark{padding:40px var(--pad)}
  .hero{padding:32px var(--pad) 0}
  .lead{font-size:17px}
  .site-foot{margin:44px auto 32px;padding:0 12px}
  .foot-top{flex-direction:column}
}