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

:root{
  --paper:#f4eee1;
  --paper-alt:#e8dfcc;
  --ink:#1a1814;
  --muted:#736c5b;
  --accent:#2b4a8c;
  --accent-2:#8a6a1e;
  --dark:#141414;
  --rhythm:76px;
  --gap:24px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  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{
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.band{padding:var(--rhythm) 0}
.band--alt{background:var(--paper-alt)}
.band--dark{background:var(--dark);color:var(--paper)}

.col-text{grid-column:2 / 8}
.col-lede{grid-column:2 / 10}
.col-wide{grid-column:2 / 12}
.col-img{grid-column:7 / 13}

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

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

h1{
  font-size:clamp(2.3rem,5.4vw,3.9rem);
  line-height:1.06;
  margin:0 0 26px;
  letter-spacing:-.01em;
}

h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.22;
  margin:0 0 18px;
}

h3{
  font-style:italic;
  font-size:1.22rem;
  line-height:1.35;
  margin:34px 0 10px;
}

p{margin:0 0 18px}
p + p{text-indent:1.5em}

.lede{font-size:1.24rem;line-height:1.58;color:var(--ink)}
.lede p + p{text-indent:0}

.note{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--muted)}
.band--dark .note{color:#b6ae9a}

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

.masthead{border-bottom:1px solid rgba(115,108,91,.35);padding:18px 0}
.masthead .grid{align-items:baseline;row-gap:10px}

.wordmark{
  grid-column:1 / 5;
  font-size:1.28rem;
  letter-spacing:.1em;
  margin:0;
  text-decoration:none;
  color:var(--ink);
}
.wordmark:hover{text-decoration:none}

.mainnav{grid-column:5 / 13;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end}
.mainnav a{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.03em;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.mainnav a:hover{border-bottom-color:var(--accent)}
.mainnav a[aria-current="page"]{border-bottom-color:var(--accent-2)}

/* ---------- lomo cosido del encabezamiento ---------- */

.opening{padding:70px 0 var(--rhythm)}
.opening .grid{align-items:start}

.spine{grid-column:1 / 2;position:relative;min-height:220px}
.spine::before{
  content:"";
  position:absolute;
  top:10px;bottom:0;left:0;
  width:16px;
  background:repeating-linear-gradient(to bottom,var(--accent) 0 2px,transparent 2px 15px);
}

.opening-title{grid-column:2 / 11}

.rule-double{
  grid-column:2 / 11;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--muted);
  height:5px;
  margin:6px 0 26px;
}

.opening-lede{grid-column:2 / 9;margin-bottom:44px}

figure{margin:0}
figcaption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  text-align:left;
  margin-top:10px;
}

/* ---------- encabezamiento de sección ---------- */

.sec-head{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  align-items:baseline;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--accent-2);
  border-bottom:1px solid rgba(115,108,91,.4);
  padding-bottom:8px;
  margin-bottom:36px;
}
.band--dark .sec-head{color:#c7a659;border-bottom-color:rgba(244,238,225,.25)}

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

ul.check{list-style:none;padding-left:0;margin:0 0 22px}
ul.check li{position:relative;padding-left:26px;margin-bottom:11px}
ul.check li::before{
  content:"";
  position:absolute;left:0;top:.68em;
  width:13px;height:2px;background:var(--accent);
}

ol.steps{list-style:none;counter-reset:paso;padding-left:0;margin:0 0 22px}
ol.steps li{counter-increment:paso;position:relative;padding-left:40px;margin-bottom:16px}
ol.steps li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:.32em;
  font-family:var(--sans);font-size:12px;letter-spacing:.05em;
  color:var(--accent-2);
}

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

/* ---------- separador tipográfico ---------- */

.sep{grid-column:1 / -1;display:flex;justify-content:center;gap:10px;margin:46px 0 0}
.sep span{width:22px;height:2px;background:var(--accent-2)}
.band--dark .sep span{background:#c7a659}

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

.detail-figure{grid-column:2 / 7}
.detail-text{grid-column:8 / 13}
.band--dark a{color:#9db6e8}
.band--dark h2,.band--dark h3{color:var(--paper)}
.band--dark ul.check li::before{background:#9db6e8}

/* ---------- capitular (Sobre el proyecto) ---------- */

.dropcap::first-letter{
  float:left;
  font-size:4em;
  line-height:.82;
  padding:.05em .1em 0 0;
  color:var(--accent);
}

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

.sitefoot{
  border-top:1px solid rgba(115,108,91,.4);
  padding:52px 0 60px;
  text-align:center;
}
.sitefoot .inner{width:min(760px,calc(100% - 48px));margin-inline:auto}
.sitefoot .footmark{font-size:1.15rem;letter-spacing:.1em;margin:0 0 16px}
.footnav{display:flex;flex-wrap:wrap;justify-content:center;margin:0 0 18px;padding:0;list-style:none}
.footnav li{padding:0 14px;border-left:1px solid rgba(115,108,91,.5);line-height:1.2;margin-bottom:8px}
.footnav li:first-child{border-left:0}
.footnav a{font-family:var(--sans);font-size:13px;color:var(--ink);text-decoration:none}
.footnav a:hover{text-decoration:underline;text-underline-offset:3px}
.footmail{margin:0 0 12px}

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

@media (max-width:920px){
  :root{--rhythm:46px;--gap:18px}
  body{font-size:17px}
  .grid{width:min(100%,calc(100% - 36px))}
  .col-text,.col-lede,.col-wide,.col-img,
  .opening-title,.opening-lede,.rule-double,
  .detail-figure,.detail-text{grid-column:1 / -1}
  .wordmark{grid-column:1 / -1}
  .mainnav{grid-column:1 / -1;justify-content:flex-start}
  .opening{padding:34px 0 var(--rhythm)}
  .spine{grid-column:1 / -1;min-height:0;margin-bottom:22px}
  .spine::before{
    position:static;
    display:block;
    width:120px;height:16px;
    background:repeating-linear-gradient(to right,var(--accent) 0 2px,transparent 2px 15px);
  }
  .detail-figure{margin-bottom:30px}
  .sep{margin-top:34px}
  h3{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}