/* Trobraku — hoja de estilo general */

:root{
  --bg:#1e1a20;
  --bg-alt:#272229;
  --paper:#e9e6e1;
  --fg:#e9e6e1;
  --muted:#9c949c;
  --ink:#1e1a20;
  --accent:#c9a24b;
  --accent-2:#a9b2bd;
  --step:84px;
  --gutter:28px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  font-weight:400;
}

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

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.45)}
a:hover{border-bottom-color:var(--accent)}

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

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

.wrap{width:min(1240px,100% - 48px);margin-inline:auto}

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

.col-body{grid-column:1 / 8}
.col-rail{grid-column:10 / 13}

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

.site-head{
  border-bottom:1px solid rgba(169,178,189,.22);
  padding-block:22px;
}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}
.brand{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg);
  border:0;
}
.brand:hover{color:var(--accent)}

.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:14px;
}
.site-nav a{
  color:var(--muted);
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--fg);border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}

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

h1{
  font-size:clamp(2.5rem,6.6vw,4.5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:700;
  margin:0;
}
h2{
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  line-height:1.22;
  letter-spacing:-.015em;
  font-weight:600;
  margin:0 0 18px;
}
h3{
  font-size:1.03rem;
  font-weight:600;
  letter-spacing:.01em;
  margin:26px 0 8px;
}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.lead{font-size:1.16rem;line-height:1.62;color:var(--fg)}
.caption,.rail-note{font-size:13px;line-height:1.55;color:var(--muted)}

.num{
  font-size:13px;
  letter-spacing:.22em;
  color:var(--accent-2);
  font-weight:600;
}

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

.hero{padding-block:calc(var(--step) * .95) var(--step)}
.hero h1{grid-column:1 / 9;grid-row:1}
.hero .hero-lead{grid-column:1 / 7;grid-row:2;margin-top:30px}
.hero .index{grid-column:10 / 13;grid-row:1 / span 2}

.index ol{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13.5px;
  line-height:1.5;
  border-top:1px solid rgba(169,178,189,.3);
}
.index li{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:8px;
  padding:9px 0;
  border-bottom:1px solid rgba(169,178,189,.18);
}
.index li span{color:var(--accent-2);font-variant-numeric:tabular-nums}
.index a{color:var(--muted);border-bottom:1px solid transparent}
.index a:hover{color:var(--fg);border-bottom-color:var(--accent)}
.index-title{
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 12px;
}

/* ---------- imagen principal ---------- */

.main-figure{padding-bottom:var(--step);margin:0}
.main-figure .mf-img{grid-column:1 / 9}
.main-figure figcaption{
  grid-column:10 / 13;
  align-self:end;
  padding-bottom:4px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  border-top:1px solid rgba(169,178,189,.3);
  padding-top:12px;
}

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

.band{padding-block:var(--step)}
.band--alt{background:var(--bg-alt)}

.band .body{grid-column:1 / 8}
.band .rail{grid-column:10 / 13}
.band .rail .num{display:block;margin-bottom:10px}

.rule{
  grid-column:1 / 8;
  height:1px;
  background:rgba(169,178,189,.3);
  margin-bottom:26px;
}

ul.checks{
  list-style:none;
  margin:14px 0 18px;
  padding:0;
}
ul.checks li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
}
ul.checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:2px;
  background:var(--accent);
}

ol.steps{
  margin:14px 0 18px;
  padding-left:22px;
}
ol.steps li{margin-bottom:9px}
ol.steps::marker,ol.steps li::marker{color:var(--accent)}

.note{color:var(--muted)}

/* ---------- sección clara ---------- */

.band--paper{
  background:var(--paper);
  color:var(--ink);
}
.band--paper h2,.band--paper h3{color:var(--ink)}
.band--paper .caption,.band--paper .note{color:#55505a}
.band--paper .num{color:#6f7783}
.band--paper .rule{background:rgba(30,26,32,.22)}
.band--paper a{
  color:var(--ink);
  border-bottom:2px solid var(--accent);
}
.band--paper ul.checks li::before{background:#8a6f2c}

.band--paper .pic{grid-column:1 / 6;margin:0}
.band--paper .pic figcaption{margin-top:12px;font-size:13px;line-height:1.55;color:#55505a}
.band--paper .side{grid-column:7 / 13}
.band--paper .side .num{display:block;margin-bottom:10px}

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

.page-head{padding-block:calc(var(--step) * .8) 0}
.page-head h1{grid-column:1 / 9;font-size:clamp(2.1rem,5vw,3.4rem)}
.page-head .rail{grid-column:10 / 13;align-self:end}

.doc .body{grid-column:1 / 8}
.doc .rail{grid-column:10 / 13}
.doc .rail ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.5;color:var(--muted)}
.doc .rail li{padding:8px 0;border-bottom:1px solid rgba(169,178,189,.18)}
.doc .rail li:first-child{border-top:1px solid rgba(169,178,189,.3)}

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

.site-foot{
  border-top:1px solid rgba(169,178,189,.28);
  padding-block:46px 54px;
  margin-top:0;
}
.foot-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px 40px;
  align-items:flex-start;
}
.foot-name{
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.foot-index ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-size:13.5px;
}
.foot-index a{color:var(--muted);border-bottom:1px solid transparent}
.foot-index a:hover{color:var(--fg);border-bottom-color:var(--accent)}
.foot-line{
  height:1px;
  background:rgba(169,178,189,.28);
  margin:26px 0 20px;
}
.foot-bottom{font-size:13.5px;color:var(--muted);max-width:62ch}
.foot-bottom a{color:var(--accent)}

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

@media (max-width:1000px){
  :root{--gutter:22px}
  .hero h1{grid-column:1 / 10}
  .hero .hero-lead{grid-column:1 / 9}
  .hero .index{grid-column:10 / 13}
  .band .body,.rule,.doc .body,.page-head h1{grid-column:1 / 9}
  .main-figure .mf-img{grid-column:1 / 10}
  .band--paper .pic{grid-column:1 / 6}
  .band--paper .side{grid-column:6 / 13}
}

@media (max-width:760px){
  :root{--step:50px}
  body{font-size:16.5px}
  .wrap{width:min(1240px,100% - 34px)}

  .grid{display:flex;flex-direction:column}
  .grid > *{grid-column:auto !important}
  .hero .index{order:-1}

  .hero{padding-block:34px 0}
  .hero .index{margin-bottom:30px}
  .hero .hero-lead{margin-top:22px}

  .index{order:-1}
  .index ol{
    display:flex;
    flex-wrap:wrap;
    gap:0 18px;
    border-top:1px solid rgba(169,178,189,.3);
    border-bottom:1px solid rgba(169,178,189,.18);
    padding:10px 0;
  }
  .index li{border:0;padding:5px 0;grid-template-columns:26px auto}

  .hero h1 + .hero-lead{margin-top:20px}

  .main-figure{padding-block:34px}
  .main-figure figcaption{border-top:0;padding-top:10px}

  .band .rail{margin-bottom:12px}
  .band--paper .pic{margin-bottom:26px}
  .band--paper .side .num{margin-bottom:8px}

  .doc .rail{margin-top:34px}

  .foot-name{font-size:1.25rem}
}