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

:root{
  --bg:#f4f0e8;
  --bg-alt:#e7e1d5;
  --ink:#20242a;
  --text:#22201b;
  --muted:#776f62;
  --accent:#2c4668;
  --accent2:#a06a2c;
  --rule:#d5cec0;
  --rule-dark:#3a4049;
  --gap:24px;
  --rh:72px;
  --maxw:1180px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

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

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}

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

/* ---------- rejilla de 12 columnas con margen reglado ---------- */

.band{padding:var(--rh) 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--ink);color:var(--bg)}
.band--tight{padding-top:calc(var(--rh) / 2)}

.rule-grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.rail{
  grid-column:1 / 4;
  padding-right:var(--gap);
  border-right:1px solid var(--accent);
  text-align:right;
}
.band--dark .rail{border-right-color:var(--accent2)}
.rail--plain{border-right:1px solid var(--rule)}

.num{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent2);
}

.initial{
  display:block;
  font-size:56px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--accent);
}
.band--dark .initial{color:var(--accent2)}

.col-text{grid-column:4 / 10}
.col-wide{grid-column:4 / 12}
.col-full{grid-column:4 / 13}

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

.site-head{border-bottom:1px solid var(--rule);padding:22px 0}
.site-head .rule-grid{align-items:baseline;row-gap:10px}

.brand{
  grid-column:1 / 4;
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:right;
  padding-right:var(--gap);
  border-right:1px solid var(--accent);
}
.brand a{color:var(--text);text-decoration:none}
.brand a:hover{color:var(--accent)}

.site-nav{grid-column:4 / 13}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.site-nav a{
  font-size:15px;
  color:var(--text);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

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

.hero{padding-top:calc(var(--rh) - 16px);padding-bottom:calc(var(--rh) / 2)}

.hero-h1{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  margin:0;
  font-size:clamp(34px,5.4vw,60px);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.03em;
}
.hero-h1 .drop{
  grid-column:1 / 4;
  justify-self:end;
  padding-right:var(--gap);
  border-right:1px solid var(--accent);
  font-size:clamp(68px,11vw,128px);
  line-height:.95;
  color:var(--accent);
}
.hero-h1 .rest{grid-column:4 / 12;align-self:end}

.lead{grid-column:4 / 10;margin-top:40px;border-top:1px solid var(--rule)}
.lead p{
  padding:22px 0;
  margin:0;
  border-bottom:1px solid var(--rule);
}
.lead p:first-of-type{font-size:19px}

/* imagen principal */

.figure-row{margin-top:56px;align-items:start}
.figure-row .rail{padding-top:4px}
.figure-main{grid-column:6 / 13;margin:0}
.cap{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.band--dark .cap{color:#b7b1a6}

/* ---------- secciones de texto ---------- */

.band h2{
  margin:0 0 18px;
  font-size:clamp(22px,2.6vw,29px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.015em;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.band--dark h2{border-bottom-color:var(--rule-dark)}

.band h3{
  margin:30px 0 8px;
  font-size:18px;
  font-weight:700;
  letter-spacing:.01em;
}

.list{
  grid-column:4 / 12;
  margin:26px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--rule);
}
.band--dark .list{border-top-color:var(--rule-dark)}
.list li{
  padding:12px 0 12px 26px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.band--dark .list li{border-bottom-color:var(--rule-dark)}
.list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--accent2);
}
.list li b{font-weight:700}

.note{
  grid-column:4 / 12;
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-size:15px;
  color:var(--muted);
}

/* ---------- sección oscura con imagen de detalle ---------- */

.detail-row{margin-top:36px;align-items:start;row-gap:28px}
.figure-detail{grid-column:9 / 13;margin:0}
.figure-detail .cap{margin-top:10px;text-align:left}
.detail-text{grid-column:4 / 9;padding-right:var(--gap)}
.band--dark a{color:#c3d3ea}

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

.site-foot{
  background:var(--bg-alt);
  border-top:1px solid var(--rule);
  padding:44px 0 56px;
}
.site-foot .rule-grid{row-gap:18px;align-items:start}
.foot-name{
  grid-column:1 / 4;
  margin:0;
  text-align:right;
  padding-right:var(--gap);
  border-right:1px solid var(--accent);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:15px;
}
.foot-nav{grid-column:4 / 10}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:15px}
.foot-nav li:not(:last-child)::after{content:"/";color:var(--accent2);margin:0 10px}
.foot-nav a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.foot-mail{grid-column:10 / 13;font-size:15px}
.foot-mail span{display:block;font-size:13px;color:var(--muted)}
.foot-note{
  grid-column:4 / 13;
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:13px;
  color:var(--muted);
}

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

.page-head{padding-top:calc(var(--rh) - 20px);padding-bottom:calc(var(--rh) / 2)}
.page-h1{
  grid-column:4 / 12;
  margin:0;
  font-size:clamp(30px,4.4vw,48px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.03em;
}
.page-head .rail{padding-top:10px}
.page-head .lead{grid-column:4 / 10}

.doc-date{
  grid-column:4 / 12;
  margin-top:24px;
  font-size:13px;
  color:var(--muted);
}

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

@media (max-width:900px){
  :root{--rh:44px;--gap:18px}

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

  .rail{
    text-align:left;
    border-right:0;
    border-left:1px solid var(--accent);
    padding-right:0;
    padding-left:14px;
    margin-bottom:14px;
  }
  .rail--plain{border-left-color:var(--rule);border-right:0}
  .initial{font-size:40px}

  .hero-h1{display:block}
  .hero-h1 .drop{
    display:block;
    border-right:0;
    border-left:1px solid var(--accent);
    padding-left:12px;
    padding-right:0;
    margin-bottom:6px;
    font-size:64px;
  }
  .lead{margin-top:26px}
  .figure-row{margin-top:32px}
  .figure-row .rail{order:2;margin-top:12px;margin-bottom:0}

  .brand{
    text-align:left;
    border-right:0;
    border-left:1px solid var(--accent);
    padding-left:12px;
    padding-right:0;
  }
  .site-nav ul{gap:4px 18px}

  .detail-text{padding-right:0}
  .figure-detail{max-width:420px}

  .foot-name{
    text-align:left;
    border-right:0;
    border-left:1px solid var(--accent);
    padding-left:12px;
    padding-right:0;
  }
}

@media (max-width:480px){
  body{font-size:16px}
  .site-nav ul{flex-direction:column;gap:8px}
  .foot-nav ul{flex-direction:column}
  .foot-nav li:not(:last-child)::after{content:none}
  .foot-nav li{padding:4px 0}
}