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

:root{
  --bg:#f4f2ed;
  --bg-alt:#e6e3dc;
  --dark:#16151a;
  --ink:#16151a;
  --muted:#6d6a63;
  --on-dark:#f4f2ed;
  --blue:#1f3fa8;
  --red:#c0452e;
  --red-dark:#d9705c;
  --rule:#cbc7bd;
  --rule-dark:#3a383f;
  --gap:28px;
  --step:84px;
}

*{box-sizing:border-box}

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

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

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.3;
  margin:0 0 26px;
}

h1{font-size:2.6rem;letter-spacing:-0.01em}
h2{font-size:1.6rem}
h3{font-size:1.15rem;margin:36px 0 16px}

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

a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

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

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

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

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

.site-head{padding:26px 0 0}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 32px;
}
.brand{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  letter-spacing:0.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--blue)}

.site-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
}
.site-nav a{
  font-size:14px;
  line-height:1.7;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.site-nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.site-nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}

.head-rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:22px 0 0;
}

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

.hero{padding:66px 0 0}
.hero h1{grid-column:1 / 9;grid-row:1;margin-bottom:34px}
.hero .lead{grid-column:1 / 7;grid-row:2;font-size:1.05rem}
.hero .lead p:first-child{margin-top:0}

.index-col{grid-column:10 / 13;grid-row:1 / 4;align-self:start}
.index-col h2{
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.index-col ol{list-style:none;margin:0;padding:0}
.index-col li{
  font-size:14px;
  line-height:1.65;
  margin-bottom:9px;
  display:flex;
  gap:10px;
}
.index-col .n{color:var(--red);font-variant-numeric:tabular-nums;flex:0 0 auto}
.index-col a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.index-col a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- bloques de texto ---------- */

.block{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:28px;
  padding-right:28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  margin-top:var(--step);
}
.block::before{
  content:"";
  grid-column:1 / 8;
  grid-row:1;
  height:1px;
  background:var(--rule);
  margin-bottom:26px;
}
.block > .marker{grid-column:10 / 13;grid-row:2;align-self:start}
.block > .body{grid-column:1 / 8;grid-row:2}

.marker{
  font-size:13px;
  line-height:1.6;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.marker .n{color:var(--red);margin-right:9px;font-variant-numeric:tabular-nums}

.band{
  background:var(--bg-alt);
  margin-top:var(--step);
  padding:var(--step) 0;
}
.band .block:first-of-type{margin-top:0}

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

ul.checks,ul.plain{list-style:none;margin:0 0 28px;padding:0}
ul.checks li,ul.plain li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
}
ul.checks li::before,ul.plain li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.85em;
  width:9px;
  height:2px;
  background:var(--blue);
}
ol.steps{margin:0 0 28px;padding-left:22px}
ol.steps li{margin-bottom:12px;padding-left:6px}
ol.steps li::marker{color:var(--red)}

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

.figure-main{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  margin:var(--step) 0 0;
}
.figure-main img{grid-column:1 / 9;width:100%}
.figure-main figcaption{grid-column:10 / 13;align-self:end}

.cap{
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:12px 0 0;
}

/* ---------- sección contrastada ---------- */

.contrast{
  background:var(--dark);
  color:var(--on-dark);
  margin-top:var(--step);
  padding:var(--step) 0;
}
.contrast .inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  row-gap:34px;
}
.contrast figure{grid-column:1 / 6;margin:0}
.contrast figure img{width:100%}
.contrast .text{grid-column:7 / 13}
.contrast .marker{color:#a5a09a}
.contrast .marker .n{color:var(--red-dark)}
.contrast .cap{color:#a5a09a}
.contrast h2{margin-top:0}
.contrast a{color:#a8bcf0}
.contrast ul.plain li::before{background:#a8bcf0}
.contrast :focus-visible{outline-color:#a8bcf0}

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

.page-head{padding:60px 0 0}
.page-head h1{grid-column:1 / 9;grid-row:1;font-size:2.15rem}
.page-head .lead{grid-column:1 / 7;grid-row:2;color:var(--muted);font-size:1rem}
.page-head .index-col{grid-row:1 / 4}

.doc{margin-top:var(--step)}
.doc .block:first-of-type{margin-top:0}

.contact-line{
  font-size:1.05rem;
  border-left:3px solid var(--red);
  padding-left:18px;
  margin:0 0 28px;
}

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

.site-foot{
  margin-top:var(--step);
  padding:52px 0 60px;
  border-top:1px solid var(--rule);
}
.foot-top{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  row-gap:26px;
}
.foot-name{grid-column:1 / 7}
.foot-name .brand{font-size:1.25rem}
.foot-name p{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--muted);max-width:34em}
.foot-nav{grid-column:9 / 13}
.foot-nav h2{
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
}
.foot-nav ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9}
.foot-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.foot-nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}

.foot-rule{border:0;border-top:1px solid var(--rule);margin:34px 0 22px}

.foot-bottom{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  row-gap:12px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.foot-bottom .mail{grid-column:1 / 5}
.foot-bottom .note{grid-column:6 / 13}

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

@media (max-width:900px){
  :root{--step:50px;--gap:20px}
  body{font-size:17px;line-height:1.85}
  h1{font-size:2.05rem}
  .hero{padding-top:40px}
  .page-head{padding-top:36px}

  .hero h1,.hero .lead,.page-head h1,.page-head .lead,
  .index-col,
  .block::before,.block > .marker,.block > .body,
  .figure-main img,.figure-main figcaption,
  .contrast figure,.contrast .text,
  .foot-name,.foot-nav,
  .foot-bottom .mail,.foot-bottom .note{
    grid-column:1 / -1;
    grid-row:auto;
  }

  .hero .grid,.page-head .grid,.block,.figure-main,
  .contrast .inner,.foot-top,.foot-bottom{
    display:block;
  }

  .index-col{margin:0 0 34px}
  .index-col ol{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
  }
  .index-col li{margin-bottom:0}

  .block{padding-top:26px;border-top:1px solid var(--rule)}
  .block::before{display:none}
  .block > .marker{margin-bottom:14px}

  .figure-main figcaption{margin-top:0}
  .contrast figure{margin-bottom:30px}
  .foot-nav{margin-top:28px}
  .foot-bottom .note{margin-top:10px}
}

@media (max-width:480px){
  body{font-size:16px}
  h1{font-size:1.75rem}
  h2{font-size:1.35rem}
  .wrap{padding:0 20px}
  .block{padding-left:20px;padding-right:20px}
}