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

:root{
  --bg:#e8e6e1;
  --bg-alt:#d3d0c9;
  --dark:#2a2a28;
  --ink:#17171a;
  --muted:#6a6862;
  --rust:#8c4a2f;
  --steel:#55707a;
  --step:80px;
  --gap:28px;
}

*{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:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

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

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

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

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:inherit;
  margin:0;
}

h1{
  font-size:clamp(38px,5.6vw,64px);
  line-height:1.06;
  letter-spacing:-.01em;
}

h2{
  font-size:clamp(24px,2.6vw,30px);
  line-height:1.25;
  margin-bottom:18px;
}

h3{
  font-size:19px;
  line-height:1.4;
  margin:34px 0 8px;
}

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

.lead{
  font-size:19px;
  line-height:1.75;
  color:var(--muted);
}

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

.band--dark .cap{color:#a8a49a}

strong{font-weight:600}

a{color:var(--rust);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.band--dark a{color:#d99b7d}

:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.band--dark :focus-visible{outline-color:#d99b7d}

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

.rail{
  grid-column:1 / 3;
  border-left:1px solid rgba(85,112,122,.45);
  padding-left:14px;
}

.rail-num{
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--steel);
  margin-bottom:10px;
}

.rail-label{
  display:block;
  font-size:12px;
  line-height:1.5;
  letter-spacing:.06em;
  color:var(--muted);
  text-transform:uppercase;
}

.band--dark .rail{border-left-color:rgba(85,112,122,.7)}
.band--dark .rail-label{color:#a8a49a}

.rail-ticks{
  display:block;
  width:16px;
  height:96px;
  margin-top:16px;
  background-image:repeating-linear-gradient(to bottom,var(--steel) 0 1px,transparent 1px 12px);
}

/* trazos verticales separadores */
.ticks{
  grid-column:3 / 13;
  height:24px;
  margin-bottom:34px;
  background-image:repeating-linear-gradient(to right,var(--steel) 0 1px,transparent 1px 11px);
  opacity:.5;
}
.band--dark .ticks{opacity:.65}

.ticks--short{grid-column:3 / 8}

/* ---------- bloques de contenido ---------- */

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

.list{
  grid-column:3 / 12;
  margin:26px 0 0;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:44px;
}

.list li{
  break-inside:avoid;
  position:relative;
  padding-left:20px;
  margin-bottom:14px;
  line-height:1.7;
}

.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--rust);
}

.list--single{columns:1}

.list-num{
  grid-column:3 / 12;
  margin:26px 0 0;
  padding:0;
  list-style:none;
  counter-reset:paso;
}

.list-num li{
  counter-increment:paso;
  position:relative;
  padding-left:44px;
  margin-bottom:18px;
}

.list-num li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.15em;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--steel);
}

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

.site-head{
  border-bottom:1px solid rgba(23,23,26,.14);
  padding:20px 0;
}

.site-head .wrap{align-items:baseline;row-gap:12px}

.brand{
  grid-column:1 / 4;
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  letter-spacing:.06em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--rust)}

.nav{grid-column:4 / 13}

.nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
  justify-content:flex-end;
}

.nav a{
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--rust);color:var(--rust)}
.nav a[aria-current="page"]{border-bottom-color:var(--rust)}

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

.hero{padding:96px 0 var(--step)}

.hero-rail{grid-column:1 / 3}

.scale{
  margin:6px 0 0;
  padding:0;
  list-style:none;
  border-left:1px solid rgba(85,112,122,.5);
}

.scale li{
  position:relative;
  height:38px;
  padding-left:30px;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--steel);
  background-image:repeating-linear-gradient(to bottom,rgba(85,112,122,.5) 0 1px,transparent 1px 9px);
  background-size:8px 100%;
  background-repeat:no-repeat;
}

.scale li::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:1px;
  background:var(--steel);
}

.hero-main{grid-column:3 / 9}

.hero h1 .break{display:block}

.hero .lead{margin-top:26px;max-width:40em}

.hero-meta{
  grid-column:3 / 9;
  margin-top:30px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
}

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

.media{padding-bottom:var(--step)}

.fig-main{
  grid-column:4 / 13;
  margin:0;
}

.fig-main img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

.cap-side{
  grid-column:2 / 4;
  align-self:end;
  padding-bottom:4px;
  border-left:1px solid rgba(85,112,122,.45);
  padding-left:12px;
}

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

.detail-text{grid-column:3 / 9}

.fig-detail{
  grid-column:9 / 13;
  margin:0;
}

.fig-detail img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
}

.fig-detail figcaption{margin-top:12px}

/* ---------- índice de contenidos ---------- */

.index{
  grid-column:3 / 12;
  margin:20px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(23,23,26,.16);
}

.index li{
  display:flex;
  gap:20px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid rgba(23,23,26,.16);
}

.index .n{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--steel);
  flex:0 0 34px;
}

.index .d{color:var(--muted);font-size:15px}

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

.page-title{grid-column:3 / 11}
.page-title .kicker{
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:14px;
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.prose{grid-column:3 / 10}
.prose h2{margin-top:0}

.prose .rule{
  display:block;
  height:24px;
  margin:34px 0;
  background-image:repeating-linear-gradient(to right,var(--rust) 0 1px,transparent 1px 11px);
  opacity:.45;
}

.rail--sticky{position:sticky;top:28px}

.rail-index{margin:12px 0 0;padding:0;list-style:none}
.rail-index li{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  padding:6px 0;
  border-top:1px solid rgba(85,112,122,.3);
}

.contact-block{
  grid-column:3 / 10;
  margin-top:34px;
  border-top:1px solid rgba(23,23,26,.16);
  padding-top:20px;
}

/* ---------- pie de página (patchbay) ---------- */

.site-foot{
  border-top:1px solid rgba(23,23,26,.18);
  padding:34px 0 44px;
  margin-top:0;
}

.foot-row{
  grid-column:1 / 13;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.foot-name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  letter-spacing:.06em;
}

.foot-links{
  display:flex;
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
  flex-wrap:wrap;
}

.foot-links a{
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(140,74,47,.5);
  padding-bottom:2px;
}
.foot-links a:hover{color:var(--rust);border-bottom-color:var(--rust)}

.foot-mail{font-size:14px}

.foot-line{
  grid-column:1 / 13;
  height:1px;
  background:rgba(23,23,26,.18);
  margin:22px 0 12px;
}

.foot-note{
  grid-column:1 / 13;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  max-width:60em;
}

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

@media (max-width:1020px){
  .wrap{column-gap:22px;padding:0 26px}
  .hero-main{grid-column:3 / 13}
  .hero-meta{grid-column:3 / 13}
  .col-text,.prose,.detail-text{grid-column:3 / 13}
  .col-wide,.list,.list-num,.index{grid-column:3 / 13}
  .ticks{grid-column:3 / 13}
  .fig-main{grid-column:3 / 13}
  .cap-side{grid-column:3 / 13;border-left:0;padding-left:0;margin-bottom:14px}
  .fig-detail{grid-column:3 / 13;max-width:420px;margin-top:34px}
  .page-title{grid-column:3 / 13}
  .contact-block{grid-column:3 / 13}
}

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

@media (max-width:760px){
  :root{--step:48px}

  body{font-size:16px}

  .wrap{
    grid-template-columns:1fr;
    padding:0 20px;
    row-gap:0;
  }

  .brand,.nav,.hero-rail,.hero-main,.hero-meta,
  .col-text,.col-wide,.list,.list-num,.index,.ticks,
  .fig-main,.cap-side,.detail-text,.fig-detail,
  .page-title,.prose,.contact-block,
  .foot-row,.foot-line,.foot-note{grid-column:1 / -1}

  .nav ul{justify-content:flex-start;gap:16px;margin-top:14px}

  .hero{padding:52px 0 var(--step)}

  /* la columna de servicio se pliega en una marca en línea */
  .rail{
    border-left:0;
    border-top:1px solid rgba(85,112,122,.5);
    padding:10px 0 0;
    margin-bottom:16px;
    display:flex;
    align-items:baseline;
    gap:12px;
  }
  .rail-num{margin-bottom:0}
  .rail-ticks{display:none}
  .rail--sticky{position:static}
  .rail-index{display:none}

  .hero-rail{margin-bottom:22px}
  .scale{
    display:flex;
    border-left:0;
    border-top:1px solid rgba(85,112,122,.5);
    padding-top:10px;
    gap:22px;
  }
  .scale li{
    height:auto;
    padding-left:0;
    padding-top:8px;
    background-image:none;
  }
  .scale li::before{width:1px;height:8px;top:0}

  .list{columns:1}

  .fig-detail{max-width:none;margin-top:28px}

  .index li{flex-wrap:wrap;gap:6px}
  .index .n{flex:0 0 100%}

  .foot-row{flex-direction:column;align-items:flex-start;gap:16px}
}