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

:root{
  --bg:#f4eee1;
  --bg-alt:#e8dfcc;
  --dark:#141414;
  --ink:#1a1814;
  --muted:#736c5b;
  --light:#f4eee1;
  --accent:#2b4a8c;
  --ochre:#8a6a1e;
  --rule:rgba(26,24,20,.22);
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --step:84px;
}

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

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

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

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

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

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

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

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

.site-head{border-bottom:1px solid var(--rule);background:var(--bg)}
.site-head .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px 32px;
  padding-top:20px;padding-bottom:20px;
}
.brand{
  font-family:var(--sans);font-weight:800;font-size:21px;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;
}
.brand-note{
  display:block;font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);
  margin-top:4px;
}
.nav-main ul{
  display:flex;flex-wrap:wrap;gap:6px 24px;
  list-style:none;margin:0;padding:0;
}
.nav-main a{
  font-family:var(--sans);font-size:14.5px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;
}
.nav-main a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav-main a[aria-current="page"]{border-bottom-color:var(--ochre)}

/* ---------- bandas ---------- */

.band{padding:var(--step) 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--dark);color:var(--light)}
.band--dark a{color:#a9c1f0}
.band--dark :focus-visible{outline-color:var(--light)}

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

.hero{padding-top:60px;padding-bottom:var(--step)}
.hero .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}
.hero h1{
  grid-column:1/span 8;grid-row:1;
  font-family:var(--sans);font-weight:800;
  font-size:clamp(34px,5.3vw,62px);line-height:.98;letter-spacing:-.035em;
  margin:0 0 26px;
}
.lede{grid-column:1/span 6;grid-row:2;font-size:20.5px;margin:0}
.lede + .lede{margin-top:16px}
.kicker{
  grid-column:1/span 8;grid-row:1;align-self:start;
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ochre);
  margin:0 0 18px;
}

/* índice lateral */
.sumario{grid-column:9/span 3;grid-row:1/span 2}
.side-title{
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:10px 0 10px;
}
.sumario ol{list-style:none;margin:0;padding:0}
.sumario li{
  display:flex;gap:10px;align-items:baseline;
  border-top:1px solid rgba(26,24,20,.16);padding:7px 0;
}
.sumario .n{
  font-family:var(--sans);font-size:12px;font-weight:800;color:var(--ochre);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.sumario a{
  font-family:var(--sans);font-size:13.5px;line-height:1.4;
  color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(43,74,140,.4);
}
.sumario a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- secciones ---------- */

.sec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}
.sec + .sec{margin-top:var(--step)}
.sec-side{grid-column:9/span 3;grid-row:1;border-top:1px solid var(--rule);padding-top:14px}
.sec-body{grid-column:1/span 7;grid-row:1;border-top:1px solid var(--rule);padding-top:14px}
.band--dark .sec-side,.band--dark .sec-body{border-top-color:rgba(244,238,225,.3)}

.num{
  display:block;font-family:var(--sans);font-weight:800;font-size:15px;
  letter-spacing:.08em;color:var(--ochre);font-variant-numeric:tabular-nums;
}
.side-label{
  font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted);
  margin:10px 0 0;
}
.band--dark .side-label{color:rgba(244,238,225,.72)}

h2{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(24px,2.7vw,33px);line-height:1.08;letter-spacing:-.025em;
  margin:0 0 18px;
}
h3{
  font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.01em;
  margin:28px 0 10px;
}
p{margin:0 0 18px}
.sec-body > :last-child{margin-bottom:0}

ul.check,ol.steps{margin:0 0 18px;padding:0;list-style:none}
ul.check li{position:relative;padding-left:22px;margin-bottom:9px}
ul.check li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:8px;background:var(--accent);
}
.band--dark ul.check li::before{background:#7f9ede}
ol.steps{counter-reset:paso}
ol.steps li{position:relative;padding-left:34px;margin-bottom:10px;counter-increment:paso}
ol.steps li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--ochre);
}

.note{
  font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--muted);
  border-left:2px solid var(--ochre);padding-left:16px;margin:24px 0 0;
}
.band--dark .note{color:rgba(244,238,225,.75)}

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

.fig{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;margin:0}
.fig img{grid-column:1/span 8;grid-row:1;width:100%}
.fig figcaption{
  grid-column:9/span 3;grid-row:1;align-self:end;
  font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:12px;
}

.sec--dark{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}
.sec--dark .sec-body{grid-column:1/span 6;grid-row:1}
.sec--dark .fig-detail{grid-column:8/span 5;grid-row:1;margin:0;align-self:start}
.fig-detail img{width:100%}
.fig-detail figcaption{
  font-family:var(--sans);font-size:13px;line-height:1.5;
  color:rgba(244,238,225,.72);padding-top:12px;
}

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

.site-foot{background:var(--bg-alt);padding:58px 0 44px;border-top:1px solid var(--rule)}
.foot-top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}
.foot-id{grid-column:1/span 6}
.foot-id .brand{font-size:24px}
.foot-id p{
  font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--muted);
  margin:12px 0 0;max-width:34em;
}
.foot-nav{grid-column:9/span 4}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{border-top:1px solid rgba(26,24,20,.16);padding:6px 0}
.foot-nav a{font-family:var(--sans);font-size:13.5px;color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--accent);text-decoration:underline}
.foot-rule{border:0;border-top:1px solid var(--rule);margin:34px 0 22px}
.foot-end{display:flex;flex-wrap:wrap;gap:8px 40px;justify-content:space-between;align-items:baseline}
.foot-end p{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:0;max-width:46em}
.foot-mail{font-family:var(--sans);font-size:15px;font-weight:700}

/* ---------- páginas interiores ---------- */

.page-head{padding:56px 0 0}
.page-head .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}
.page-head h1{
  grid-column:1/span 8;grid-row:1;
  font-family:var(--sans);font-weight:800;
  font-size:clamp(30px,4.2vw,50px);line-height:1;letter-spacing:-.032em;
  margin:0 0 22px;
}
.page-head .lede{grid-column:1/span 7;grid-row:2}
.page-head .sumario{grid-column:9/span 3;grid-row:1/span 2}
.page-body{padding:52px 0 var(--step)}

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

@media (max-width:1040px){
  .wrap{padding:0 24px}
  .sec-body,.page-head h1,.page-head .lede{grid-column:1/span 8}
  .lede{grid-column:1/span 7}
  .fig img{grid-column:1/span 9}
  .fig figcaption{grid-column:10/span 3}
  .sec--dark .sec-body{grid-column:1/span 6}
  .sec--dark .fig-detail{grid-column:8/span 5}
}

@media (max-width:820px){
  :root{--step:50px}
  body{font-size:17px}
  .hero{padding-top:38px}
  .hero .wrap,.sec,.fig,.sec--dark,.foot-top,.page-head .wrap{
    grid-template-columns:1fr;
  }
  .hero h1,.lede,.sumario,.sec-side,.sec-body,
  .fig img,.fig figcaption,.sec--dark .sec-body,.sec--dark .fig-detail,
  .foot-id,.foot-nav,.kicker,
  .page-head h1,.page-head .lede,.page-head .sumario{
    grid-column:1;grid-row:auto;
  }
  .sumario{order:-1;margin-bottom:26px;border-top:1px solid var(--rule);padding-top:10px}
  .sumario ol{display:flex;flex-wrap:wrap;gap:2px 18px}
  .sumario li{border-top:0;padding:3px 0}
  .lede{font-size:18.5px}
  .sec-side{border-top:1px solid var(--rule);padding-top:12px;margin-bottom:14px}
  .sec-body{border-top:0;padding-top:0}
  .side-label{margin-top:6px}
  .fig figcaption{border-top:0;padding-top:10px}
  .fig img{margin-bottom:0}
  .sec--dark .fig-detail{margin-top:26px;max-width:420px}
  .foot-nav{margin-top:28px}
  .foot-nav ul{display:flex;flex-wrap:wrap;gap:0 20px}
  .foot-nav li{border-top:0;padding:3px 0}
  .foot-end{gap:14px}
}

@media (max-width:480px){
  .wrap{padding:0 18px}
  .site-head .wrap{padding-top:16px;padding-bottom:16px}
  h3{margin-top:22px}
}

/* número de sección sobre fondo oscuro: variante clara del ocre */
.band--dark .num{color:#c49a3c}