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

:root{
  --paper:#f2ebe0;
  --paper-alt:#e7d9c6;
  --dark:#4a2c1e;
  --ink:#241a14;
  --ink-2:#6e5b4c;
  --accent:#c05a2b;
  --accent-2:#6b7a5a;
  --gap:24px;
  --pad:40px;
  --rhythm:72px;
  --mono:ui-monospace,Consolas,"Liberation Mono",Menlo,monospace;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  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,
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- estructura de bandas y retícula de 12 columnas ---------- */

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

.wrap{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:var(--rhythm) var(--pad);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

/* línea vertical que separa el margen izquierdo (3 columnas) del texto */
.wrap--ruled::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--pad) + (100% - 2 * var(--pad) - 11 * var(--gap)) / 12 * 3 + 2.5 * var(--gap));
  width:1px;
  background:var(--accent);
  opacity:.45;
}
.band--dark .wrap--ruled::before{background:var(--paper);opacity:.35;}

.rail{
  grid-column:1 / 4;
  padding-right:20px;
  text-align:right;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
}

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

.rule{
  grid-column:4 / 12;
  border:0;
  border-top:1px solid var(--ink-2);
  opacity:.28;
  margin:22px 0 0;
}
.band--dark .rule{border-top-color:var(--paper);opacity:.3;}

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

h1,h2,h3,.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
}

h1{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  margin:0 0 12px;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.28;
  letter-spacing:.06em;
}
h1 .ini{
  grid-column:1 / 4;
  justify-self:end;
  align-self:start;
  color:var(--accent);
  font-size:clamp(70px,8vw,104px);
  line-height:.86;
  letter-spacing:0;
  padding-right:20px;
}
h1 .txt{grid-column:4 / 12;}

h2{
  grid-column:4 / 12;
  margin:0;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.5;
  letter-spacing:.12em;
}

h3{
  grid-column:4 / 12;
  margin:34px 0 8px;
  font-size:14px;
  letter-spacing:.14em;
  color:var(--ink-2);
}
.band--dark h3{color:var(--paper-alt);}

p{margin:18px 0 0;max-width:72ch;}
p.lead{font-size:19px;line-height:1.7;}

.eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  color:var(--accent-2);
  margin:0;
}

.num{display:block;color:var(--accent-2);}
.rail-ini{
  display:block;
  font-family:var(--mono);
  font-size:44px;
  line-height:1;
  color:var(--accent);
  letter-spacing:0;
}

.caption{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-2);
}
.band--dark .caption{color:var(--paper-alt);opacity:.85;}

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

.site-head{
  border-bottom:1px solid rgba(110,91,76,.3);
  background:var(--paper);
}
.site-head .wrap{
  padding-top:22px;
  padding-bottom:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 28px;
}
.brand{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.brand:hover{color:var(--accent);}
.site-nav{margin-left:auto;}
.site-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0;
  padding:0;
}
.site-nav a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
  padding-bottom:3px;
  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(--accent);}

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

.hero .wrap{padding-top:calc(var(--rhythm) * .8);padding-bottom:calc(var(--rhythm) * .6);}
.hero-lead{grid-column:4 / 10;margin-top:26px;}
.hero-lead hr{
  border:0;
  border-top:1px solid var(--ink-2);
  opacity:.24;
  margin:22px 0;
}
.hero-lead p{margin:0;}

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

.fig-main{
  grid-column:6 / 13;
  margin:0;
}
.fig-main img{width:100%;}
.fig-caption-rail{align-self:end;padding-bottom:6px;}

.fig-detail{
  grid-column:4 / 8;
  margin:0;
}
.fig-detail img{width:100%;}
.fig-detail figcaption{
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
  color:var(--paper-alt);
  opacity:.85;
}
.detail-text{grid-column:8 / 13;}
.detail-text p:first-child{margin-top:0;}

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

ul.marked,ol.numbered{
  grid-column:4 / 12;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
ul.marked li,ol.numbered li{
  position:relative;
  padding-left:30px;
  margin:0 0 12px;
  max-width:70ch;
}
ul.marked li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--accent);
}
ol.numbered{counter-reset:step;}
ol.numbered li{counter-increment:step;}
ol.numbered li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent-2);
}
.band--dark ul.marked li::before{background:var(--paper);}

.inline-list{grid-column:4 / 12;}

/* ---------- pie de página ---------- */

.site-foot{background:var(--paper-alt);border-top:1px solid rgba(110,91,76,.35);}
.site-foot .wrap{
  padding-top:44px;
  padding-bottom:44px;
  align-items:start;
}
.foot-name{
  grid-column:1 / 5;
  padding-left:18px;
  border-left:1px solid var(--accent);
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:14px;
}
.foot-name span{
  display:block;
  font-family:var(--sans);
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-2);
  margin-top:10px;
}
.foot-nav{grid-column:5 / 10;}
.foot-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.foot-nav li + li::before{
  content:"/";
  color:var(--accent);
  margin:0 12px;
}
.foot-nav a{color:var(--ink-2);text-decoration:none;}
.foot-nav a:hover{color:var(--accent);text-decoration:underline;}
.foot-mail{
  grid-column:10 / 13;
  text-align:right;
  font-size:14px;
}
.foot-mail .eyebrow{margin-bottom:6px;}

/* ---------- tablet ---------- */

@media (max-width:1000px){
  :root{--pad:32px;--gap:18px;--rhythm:60px;}
  .text{grid-column:4 / 12;}
  .fig-main{grid-column:4 / 13;}
  .fig-detail{grid-column:4 / 9;}
  .detail-text{grid-column:9 / 13;}
  .foot-name{grid-column:1 / 6;}
  .foot-nav{grid-column:6 / 13;}
  .foot-mail{grid-column:1 / 13;text-align:left;margin-top:26px;padding-left:18px;}
}

/* ---------- móvil ---------- */

@media (max-width:700px){
  :root{--pad:20px;--gap:12px;--rhythm:44px;}

  body{font-size:16px;}

  .wrap{grid-template-columns:1fr;}
  .wrap--ruled::before{display:none;}

  .rail,.text,.wide,.full,h2,h3,.rule,
  ul.marked,ol.numbered,.inline-list,
  .fig-main,.fig-detail,.detail-text,
  .hero-lead,.foot-name,.foot-nav,.foot-mail{
    grid-column:1;
  }

  .rail{
    text-align:left;
    padding:0 0 0 14px;
    border-left:1px solid var(--accent);
    margin-bottom:14px;
  }
  .rail-ini{font-size:32px;}
  .rail.fig-caption-rail{margin:14px 0 0;border-left-color:var(--accent-2);}

  h1{display:block;font-size:23px;}
  h1 .ini{
    float:left;
    font-size:58px;
    line-height:.8;
    padding:4px 12px 0 0;
  }
  h1 .txt{display:block;}

  .fig-main{margin-top:8px;}
  .fig-detail{max-width:340px;margin-bottom:26px;}

  .foot-mail{text-align:left;margin-top:24px;padding-left:14px;}
  .foot-nav{margin-top:22px;}
  .site-head .wrap{padding-top:18px;padding-bottom:18px;}
  .site-nav{margin-left:0;width:100%;}
  .site-nav ul{gap:8px 16px;}
  p{max-width:none;}
}