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

:root{
  --bg:#181a19;
  --bg-alt:#202422;
  --bg-light:#eef0ee;
  --tx:#e6e9e6;
  --tx-dim:#8f9691;
  --tx-dark:#181a19;
  --acc:#5fae86;
  --acc2:#d8c07a;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --step:84px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  overflow-wrap:break-word;
}

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

a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(95,174,134,.45);}
a:hover{border-bottom-color:var(--acc);}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-bottom-color:transparent;}

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

.grid{
  max-width:1240px;
  margin:0 auto;
  padding-inline:32px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:28px;
}

.col-text{grid-column:1 / 8;}
.col-wide{grid-column:1 / 9;}
.col-intro{grid-column:1 / 7;}
.col-side{grid-column:10 / 13;}

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

.masthead{border-bottom:1px solid rgba(230,233,230,.14);}
.masthead .grid{padding-block:20px;align-items:baseline;}

.brand{
  grid-column:1 / 5;
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:.02em;
  color:var(--tx);
  border-bottom:none;
}
.brand span{display:block;font-family:var(--sans);font-size:12px;color:var(--tx-dim);letter-spacing:.06em;}

.nav{grid-column:6 / 13;}
.nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end;
  font-family:var(--sans);font-size:12px;letter-spacing:.05em;
}
.nav a{color:var(--tx-dim);border-bottom:1px solid transparent;}
.nav a:hover{color:var(--tx);border-bottom-color:var(--acc);}

/* ---------- hero ---------- */

.hero{padding-block:88px 64px;}
.hero .grid{row-gap:36px;}

h1{
  grid-column:1 / 9;
  margin:0;
  font-weight:400;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.12;
  letter-spacing:-.01em;
}
h1 .h1-line{display:block;}
h1 .h1-line + .h1-line{color:var(--tx-dim);}

.lede{
  grid-column:1 / 7;
  margin:0;
  font-size:20px;
  line-height:1.6;
}
.lede + .lede{margin-top:18px;}

/* índice lateral */

.index{
  grid-column:10 / 13;
  grid-row:1 / span 2;
  align-self:start;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  color:var(--tx-dim);
}
.index h2{
  margin:0 0 14px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  font-style:normal;
  letter-spacing:.08em;
  color:var(--tx-dim);
  padding-bottom:10px;
  border-bottom:1px solid rgba(216,192,122,.35);
}
.index ol{list-style:none;margin:0;padding:0;}
.index li{margin-bottom:9px;display:flex;gap:10px;}
.index .n{color:var(--acc2);font-variant-numeric:tabular-nums;}
.index a{color:var(--tx-dim);border-bottom:1px solid transparent;}
.index a:hover{color:var(--tx);border-bottom-color:var(--acc);}

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

.figure-main{margin:0;padding-bottom:12px;}
.figure-main img{grid-column:1 / 9;}
.figure-main figcaption{
  grid-column:10 / 13;
  align-self:end;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.55;
  color:var(--tx-dim);
  border-top:1px solid rgba(216,192,122,.35);
  padding-top:10px;
}

/* ---------- bandas y secciones ---------- */

.band{padding-block:calc(var(--step)/2);}
.band--alt{background:var(--bg-alt);}
.band--light{background:var(--bg-light);color:var(--tx-dark);}

.band + .band{margin-top:0;}

.sec-head{
  grid-column:1 / 8;
  padding-top:18px;
  border-top:1px solid rgba(230,233,230,.18);
}
.band--light .sec-head{border-top-color:rgba(24,26,25,.22);}

.sec-mark{
  grid-column:10 / 13;
  padding-top:18px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  color:var(--tx-dim);
}
.band--light .sec-mark{color:#5d6660;}
.sec-mark .n{display:block;color:var(--acc2);font-size:13px;margin-bottom:4px;}
.band--light .sec-mark .n{color:#9a7f33;}

h2{
  margin:0;
  font-weight:400;
  font-size:clamp(25px,2.7vw,33px);
  line-height:1.22;
  letter-spacing:-.005em;
}

h3{
  margin:32px 0 10px;
  font-weight:400;
  font-style:italic;
  font-size:21px;
  line-height:1.35;
}

p{margin:0 0 22px;}
p:last-child{margin-bottom:0;}
.sec-body{grid-column:1 / 8;margin-top:20px;}
.sec-body > p + p{margin-top:0;}

.note{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  color:var(--tx-dim);
}
.band--light .note{color:#5d6660;}

/* listas */

ul.list,ol.list{
  margin:0 0 22px;
  padding-left:0;
  list-style:none;
}
ul.list li,ol.list li{
  position:relative;
  padding-left:24px;
  margin-bottom:10px;
}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;top:.7em;
  width:9px;height:1px;
  background:var(--acc);
}
ol.list{counter-reset:item;}
ol.list li{padding-left:34px;}
ol.list li::before{
  counter-increment:item;
  content:counter(item,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--sans);font-size:12px;
  color:var(--acc2);
  line-height:1.9;
}
.band--light ul.list li::before{background:#2f7a56;}
.band--light ol.list li::before{color:#9a7f33;}

.band--light a{color:#2f7a56;border-bottom-color:rgba(47,122,86,.45);}
.band--light a:focus-visible{outline-color:#2f7a56;}

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

.detail-text{grid-column:1 / 7;margin-top:20px;}
.figure-detail{
  grid-column:8 / 13;
  margin:20px 0 0;
}
.figure-detail img{width:100%;}
.figure-detail figcaption{
  margin-top:10px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.55;
  color:#5d6660;
}

/* ---------- contacto ---------- */

.contact-mail{font-size:21px;}

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

.foot{border-top:1px solid rgba(230,233,230,.14);padding-block:44px 56px;}
.foot .grid{row-gap:26px;}
.foot-name{grid-column:1 / 6;}
.foot-name .t{font-size:21px;}
.foot-name .s{font-family:var(--sans);font-size:12px;color:var(--tx-dim);margin-top:6px;}
.foot-nav{grid-column:8 / 13;}
.foot-nav ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:12px;line-height:2;}
.foot-nav a{color:var(--tx-dim);border-bottom:1px solid transparent;}
.foot-nav a:hover{color:var(--tx);border-bottom-color:var(--acc);}
.foot-rule{grid-column:1 / 13;height:1px;background:rgba(230,233,230,.14);}
.foot-mail{grid-column:1 / 6;}
.foot-note{
  grid-column:8 / 13;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.7;
  color:var(--tx-dim);
}

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

.page .grid{row-gap:28px;}
.page-head{padding-block:80px 40px;}
.page-side{
  grid-column:10 / 13;
  grid-row:1 / span 2;
  align-self:start;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.6;
  color:var(--tx-dim);
}
.page-side ul{list-style:none;margin:0;padding:0;}
.page-side li{margin-bottom:9px;display:flex;gap:10px;}
.page-side .n{color:var(--acc2);}
.page-side .mail{margin-top:16px;padding-top:12px;border-top:1px solid rgba(216,192,122,.35);}

/* ---------- responsive ---------- */

@media (max-width:1040px){
  .grid{padding-inline:26px;column-gap:22px;}
  .col-text,.sec-head,.sec-body,.detail-text{grid-column:1 / 9;}
  .col-intro,.lede{grid-column:1 / 8;}
  h1,.col-wide,.figure-main img{grid-column:1 / 10;}
  .index,.sec-mark,.figure-main figcaption,.page-side{grid-column:10 / 13;}
  .figure-detail{grid-column:9 / 13;}
}

@media (max-width:820px){
  :root{--step:50px;}
  body{font-size:17px;}

  .grid{
    grid-template-columns:1fr;
    column-gap:0;
    padding-inline:20px;
  }
  .brand,.nav,h1,.lede,.index,.sec-head,.sec-mark,.sec-body,
  .col-text,.col-wide,.col-intro,.col-side,.detail-text,.figure-detail,
  .figure-main img,.figure-main figcaption,
  .foot-name,.foot-nav,.foot-rule,.foot-mail,.foot-note,.page-side{
    grid-column:auto;
    grid-row:auto;
  }
  .hero .index,.page-side{order:-1;}

  .hero .grid,.page .grid,.foot .grid{row-gap:0;}
  .masthead .grid{padding-block:16px;}
  .nav{margin-top:12px;}
  .nav ul{justify-content:flex-start;gap:8px 18px;}

  .hero{padding-block:40px 36px;}

  /* el índice pasa arriba y se convierte en una fila horizontal */
  .hero .index{
    margin-bottom:26px;
    border-bottom:1px solid rgba(216,192,122,.3);
    padding-bottom:16px;
  }
  .hero .index ol{display:flex;flex-wrap:wrap;gap:6px 18px;}
  .hero .index li{margin-bottom:0;}

  h1{margin-bottom:24px;}
  .lede{font-size:18px;}
  .lede + .lede{margin-top:16px;}

  .figure-main figcaption{margin-top:10px;border-top:none;padding-top:8px;}

  .sec-mark{padding-top:0;margin-bottom:8px;display:flex;gap:10px;align-items:baseline;}
  .sec-mark .n{display:inline;margin-bottom:0;}
  .sec-head{padding-top:16px;}
  .sec-body{margin-top:16px;}

  .figure-detail{margin-top:28px;}
  .figure-detail img{max-width:420px;}

  .page-head{padding-block:36px 24px;}
  .page-side{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(216,192,122,.3);}
  .page-side ul{display:flex;flex-wrap:wrap;gap:6px 18px;}
  .page-side li{margin-bottom:0;}
  .page-side .mail{margin-top:0;padding-top:0;border-top:none;}

  .foot{padding-block:32px 40px;}
  .foot-nav ul{display:flex;flex-wrap:wrap;gap:4px 18px;}
  .foot-rule{margin-block:6px;}
  .foot-mail{margin-bottom:4px;}
}

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