/* Kuzardo — hoja de estilo común */

:root{
  --bg:#f0f2e9;
  --bg-alt:#e3e7da;
  --bg-dark:#2b1d1e;
  --ink:#1e2119;
  --ink-soft:#6c7264;
  --ink-inv:#f0f2e9;
  --accent:#8c2f2c;
  --ocre:#8a6f1e;
  --rule:#c9cdbd;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --step:80px;
}

*,*::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.65;
  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{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- rejilla de 12 columnas ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

.rail{grid-column:1 / 3}
.text{grid-column:3 / 10}
.wide{grid-column:3 / 12}

/* ---------- escala de servicio ---------- */

.rail .num{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.4;
  color:var(--ocre);
  letter-spacing:.04em;
  margin:.35em 0 10px;
}

.scale{
  position:relative;
  border-left:1px solid var(--rule);
  height:100%;
  min-height:120px;
}
.scale::before,
.scale::after{content:"";position:absolute;left:0;top:0;bottom:0}
.scale::before{
  width:10px;
  background:repeating-linear-gradient(to bottom,var(--ocre) 0 1px,transparent 1px 12px);
  opacity:.5;
}
.scale::after{
  width:22px;
  background:repeating-linear-gradient(to bottom,var(--accent) 0 1px,transparent 1px 60px);
  opacity:.45;
}
.scale--tall{min-height:280px}

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

.site-head{border-bottom:1px solid var(--rule);background:var(--bg)}
.site-head .grid{padding-top:18px;padding-bottom:18px}

.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:20px;
  line-height:1.2;
  letter-spacing:.01em;
  margin:0;
}
.brand a{color:var(--ink);text-decoration:none}
.brand .brand-sub{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:.02em;
  margin-top:4px;
}

.site-nav{grid-column:4 / 13;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:6px 22px}
.site-nav a{
  font-family:var(--sans);
  font-size:12px;
  color:var(--ink-soft);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ocre)}

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

.hero{padding:calc(var(--step) - 16px) 0 var(--step)}

.hero h1{
  grid-column:3 / 9;
  font-size:52px;
  line-height:1.08;
  font-weight:400;
  letter-spacing:-.01em;
  margin:0 0 28px;
  max-width:16ch;
}
.hero .lede{
  grid-column:3 / 9;
  font-size:20px;
  line-height:1.6;
  margin:0;
}
.hero .lede + .lede{margin-top:18px}

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

.band{padding:var(--step) 0;background:var(--bg)}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--bg-dark);color:var(--ink-inv)}
.band--dark .rail .num{color:#d8c58a}
.band--dark .scale{border-left-color:rgba(240,242,233,.28)}
.band--dark .scale::before{background:repeating-linear-gradient(to bottom,#d8c58a 0 1px,transparent 1px 12px);opacity:.55}
.band--dark .scale::after{background:repeating-linear-gradient(to bottom,rgba(240,242,233,.8) 0 1px,transparent 1px 60px);opacity:.5}
.band--dark li::before{background:#d8c58a}
.band--dark .caption{color:rgba(240,242,233,.7)}
.band--dark a{color:#e8cfa0}
.band--dark a:focus-visible{outline-color:#e8cfa0}

h2{
  font-size:30px;
  line-height:1.2;
  font-weight:400;
  letter-spacing:-.005em;
  margin:0 0 20px;
}
h3{
  font-size:21px;
  line-height:1.3;
  font-style:italic;
  font-weight:400;
  margin:32px 0 12px;
}
p{margin:0 0 22px}
p:last-child{margin-bottom:0}

.text p{max-width:66ch}

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

ul,ol{margin:0 0 22px;padding:0}
li{list-style:none;position:relative;padding-left:20px;margin-bottom:10px}
li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:10px;
  height:1px;
  background:var(--accent);
}
.cols2{columns:2;column-gap:44px}
.cols2 li{break-inside:avoid;-webkit-column-break-inside:avoid}
.list-title{
  font-family:var(--sans);
  font-size:12px;
  color:var(--ink-soft);
  margin:0 0 14px;
  letter-spacing:.02em;
}

/* ---------- separadores ---------- */

.ticks{
  height:24px;
  background:repeating-linear-gradient(to right,var(--accent) 0 1px,transparent 1px 14px);
  opacity:.45;
  margin:34px 0;
}
.ticks--ocre{background:repeating-linear-gradient(to right,var(--ocre) 0 1px,transparent 1px 14px);opacity:.6}

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

.figure-main{padding:calc(var(--step) - 24px) 0 var(--step);background:var(--bg)}
.figure-main figure{grid-column:4 / 13;margin:0}
.figure-main .caption{grid-column:2 / 4;margin:0;align-self:end;padding-bottom:6px}

.caption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.55;
  color:var(--ink-soft);
}

.figure-detail{grid-column:3 / 7;margin:0}
.figure-detail .caption{margin-top:12px}
.detail-text{grid-column:8 / 13}
.detail-text h2{margin-top:0}

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

.site-foot{background:var(--bg);padding:56px 0 40px;border-top:1px solid var(--rule)}
.patch{
  grid-column:1 / 13;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:16px 28px;
}
.patch .patch-name{font-family:var(--serif);font-size:18px}
.patch nav{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}
.patch nav a,
.patch .patch-mail a{font-family:var(--sans);font-size:12px;color:var(--ink-soft);text-decoration:none}
.patch nav a:hover,
.patch .patch-mail a:hover{color:var(--accent);text-decoration:underline}
.foot-rule{grid-column:1 / 13;height:1px;background:var(--rule);margin:22px 0 14px}
.foot-note{
  grid-column:1 / 13;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
  max-width:70ch;
}

/* ---------- páginas de texto ---------- */

.page-head{padding:calc(var(--step) - 20px) 0 24px}
.page-head h1{
  grid-column:3 / 10;
  font-size:40px;
  line-height:1.14;
  font-weight:400;
  margin:0 0 18px;
  max-width:20ch;
}
.page-head .lede{grid-column:3 / 10;font-size:20px;margin:0}

.page-body{padding:16px 0 var(--step)}
.page-body .text > .ticks{max-width:200px}

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

/* ---------- adaptación a pantallas estrechas ---------- */

@media (max-width:1000px){
  .hero h1{font-size:44px;grid-column:3 / 11}
  .hero .lede{grid-column:3 / 11}
  .text{grid-column:3 / 12}
  .figure-detail{grid-column:3 / 8}
  .detail-text{grid-column:8 / 13}
  .page-head h1,.page-head .lede{grid-column:3 / 12}
}

@media (max-width:760px){
  :root{--step:48px}
  body{font-size:17px}

  .grid{grid-template-columns:1fr;padding:0 20px;column-gap:0}
  .grid > *{grid-column:1 / -1 !important}

  .brand{margin-bottom:12px}
  .site-nav{justify-content:flex-start;gap:8px 18px}

  .scale{display:none}
  .rail{display:block;margin-bottom:10px}
  .rail .num{
    display:inline-block;
    margin:0;
    padding-bottom:4px;
    border-bottom:1px solid var(--ocre);
  }

  .hero h1{font-size:32px;max-width:none}
  .hero .lede{font-size:18px}
  .page-head h1{font-size:29px;max-width:none}
  .page-head .lede{font-size:18px}
  h2{font-size:24px}
  h3{font-size:19px}

  .cols2{columns:1}

  .figure-main .caption{margin-top:12px;padding-bottom:0}
  .figure-detail .caption{margin-bottom:28px}
  .detail-text{margin-top:4px}

  .patch{display:block}
  .patch nav{justify-content:flex-start;margin:14px 0}
  .ticks{margin:26px 0}
}