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

:root{
  --bg:#eaeee6;
  --bg-alt:#dbe2d5;
  --bg-dark:#26302a;
  --ink:#1b221d;
  --ink-soft:#67715f;
  --ink-inv:#eaeee6;
  --accent:#a8512c;
  --accent2:#4e6f52;
  --gap:24px;
  --step:80px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
}

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 ---------- */

.wrap{
  width:100%;
  max-width:1160px;
  margin-inline:auto;
  padding-inline:32px;
}

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

.band{padding-block:var(--step);background:var(--bg)}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--bg-dark);color:var(--ink-inv)}
.band--tight{padding-block:calc(var(--step) - 24px)}

/* ---------- columna de servicio (escala) ---------- */

.rail{
  grid-column:1 / 3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.rail-num{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent2);
  font-variant-numeric:tabular-nums;
}

.rail-ticks{
  width:18px;
  flex:1 1 auto;
  min-height:120px;
  background-image:repeating-linear-gradient(to bottom,var(--ink-soft) 0 1px,transparent 1px 13px);
  opacity:.55;
}

.band--dark .rail-num{color:#9ab08f}
.band--dark .rail-ticks{background-image:repeating-linear-gradient(to bottom,var(--ink-inv) 0 1px,transparent 1px 13px);opacity:.35}

/* ---------- columnas de contenido ---------- */

.col-text{grid-column:3 / 10}
.col-wide{grid-column:3 / 12}
.col-hero{grid-column:3 / 9}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:none;color:inherit}

h1{
  font-size:clamp(2.1rem,4.6vw,3.35rem);
  line-height:1.14;
  margin:0 0 28px;
  letter-spacing:-.01em;
}
h1 .line{display:block}

h2{
  font-size:clamp(1.45rem,2.5vw,1.95rem);
  line-height:1.25;
  margin:0 0 20px;
}

h3{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.18rem;
  line-height:1.35;
  margin:34px 0 10px;
}

p{margin:0 0 20px;max-width:66ch}
p:last-child{margin-bottom:0}

.lede{
  font-size:1.16rem;
  line-height:1.62;
  color:var(--ink);
}

.label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.note{color:var(--ink-soft);font-size:15px;line-height:1.6}

/* trazos de acento entre párrafos */
.stroke{
  width:34px;
  height:0;
  border-top:2px solid var(--accent);
  margin:30px 0;
}

.rule-ticks{
  height:24px;
  background-image:repeating-linear-gradient(to right,var(--accent2) 0 1px,transparent 1px 14px);
  opacity:.5;
}
.band--dark .rule-ticks{background-image:repeating-linear-gradient(to right,#9ab08f 0 1px,transparent 1px 14px);opacity:.4}

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

ul.plain,ul.cols,ol.steps{margin:0 0 22px;padding:0;list-style:none}

ul.plain li,ul.cols li,ol.steps li{
  position:relative;
  padding-left:20px;
  margin-bottom:10px;
  max-width:60ch;
}

ul.plain li::before,ul.cols li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:0;
  border-top:2px solid var(--accent);
}

ol.steps{counter-reset:s}
ol.steps li{counter-increment:s;padding-left:34px}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.1em;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--accent2);
  font-variant-numeric:tabular-nums;
}

ul.cols{columns:2;column-gap:40px}
ul.cols li{break-inside:avoid}

.band--dark ul.plain li::before{border-top-color:#c2724a}

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

.site-head{background:var(--bg);border-top:3px solid var(--bg-dark)}

.head-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
  padding-block:20px 16px;
}

.brand{
  font-family:var(--serif);
  font-size:1.22rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--accent)}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  margin:0;
  padding:0;
  list-style:none;
}
.nav a{
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent2)}

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

.hero{padding-block:calc(var(--step) + 16px) var(--step)}
.hero .rail-ticks{min-height:190px}

.hero-kicker{
  display:block;
  margin:0 0 22px;
}

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

.figure-main{margin:0;padding-block:0 var(--step)}
.figure-main .fig-img{grid-column:4 / 13}
.figure-main .fig-cap{
  grid-column:1 / 4;
  align-self:end;
  padding-bottom:4px;
  padding-right:12px;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
}

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

.detail-img{grid-column:2 / 6;margin:0}
.detail-img figcaption{
  margin-top:12px;
  font-size:13px;
  line-height:1.5;
  color:#9ab08f;
}
.detail-text{grid-column:7 / 13}
.band--dark p{color:var(--ink-inv)}
.band--dark a{color:#e0a184}

/* ---------- composición de About ---------- */

.about-rail{
  grid-column:1 / 3;
  position:sticky;
  top:28px;
  align-self:start;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent2);
  line-height:2.1;
}
.about-rail ul{list-style:none;margin:0;padding:0}
.about-rail a{color:var(--accent2);text-decoration:none}
.about-rail a:hover{color:var(--accent)}
.about-body{grid-column:3 / 10}

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

.site-foot{background:var(--bg-alt);padding-block:44px 34px;margin-top:0}

.patchbay{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 28px;
}
.patchbay .foot-name{font-family:var(--serif);font-size:1.1rem}
.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
  list-style:none;
}
.foot-links a{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-mail a{font-size:15px}

.foot-line{
  height:0;
  border-top:1px solid var(--ink-soft);
  opacity:.4;
  margin:22px 0 14px;
}
.foot-note{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:none}

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

@media (max-width:980px){
  .col-text,.col-wide,.col-hero,.detail-text{grid-column:3 / 13}
  .figure-main .fig-img{grid-column:3 / 13}
  .figure-main .fig-cap{grid-column:3 / 13;align-self:start;padding-top:12px;padding-right:0}
  .detail-img{grid-column:3 / 9}
  .about-body{grid-column:3 / 13}
  ul.cols{columns:1}
}

@media (max-width:760px){
  :root{--step:48px;--gap:16px}
  body{font-size:16.5px}
  .wrap{padding-inline:20px}
  .grid{grid-template-columns:1fr}
  .col-text,.col-wide,.col-hero,.detail-text,
  .figure-main .fig-img,.figure-main .fig-cap,
  .detail-img,.about-body{grid-column:1 / -1}

  .rail,.about-rail{
    grid-column:1 / -1;
    position:static;
    flex-direction:row;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    line-height:1.6;
  }
  .rail-ticks{
    width:auto;
    flex:1 1 auto;
    height:10px;
    min-height:0;
    background-image:repeating-linear-gradient(to right,var(--ink-soft) 0 1px,transparent 1px 13px);
  }
  .band--dark .rail-ticks{background-image:repeating-linear-gradient(to right,var(--ink-inv) 0 1px,transparent 1px 13px)}
  .about-rail ul{display:flex;flex-wrap:wrap;gap:4px 18px}

  .figure-main .fig-cap{padding-top:10px}
  .hero{padding-block:40px 48px}
  .head-row{padding-block:16px 12px}
  .nav{gap:4px 18px}
  .patchbay{flex-direction:column;align-items:flex-start;gap:14px}
}