/* Mozirvinta — hoja de estilos general */

:root{
  --bg:#131c17;
  --bg-alt:#1a2620;
  --bg-contrast:#eaeee7;
  --ink:#e4eae2;
  --ink-soft:#8b9a8e;
  --ink-dark:#131c17;
  --brass:#c2a24d;
  --sage:#7fa88a;
  --mono:ui-monospace,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --step:80px;
  --gap:24px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  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(--brass);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,
button:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

/* ---------- rejilla ---------- */

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

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

.rail{
  grid-column:1 / span 2;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage);
  padding-top:6px;
}

.rail .num{display:block;color:var(--brass);}
.rail .lbl{display:block;color:var(--ink-soft);margin-top:6px;}

.rail .scale{
  display:block;
  margin-top:14px;
  width:22px;
  height:120px;
  background:repeating-linear-gradient(
    to bottom,
    var(--sage) 0 1px,
    transparent 1px 12px
  );
  opacity:.55;
}

.contrast .rail{color:#4d6155;}
.contrast .rail .lbl{color:#4d6155;}
.contrast .rail .num{color:#8a6f20;}
.contrast .rail .scale{background:repeating-linear-gradient(to bottom,#7fa88a 0 1px,transparent 1px 12px);opacity:.8;}

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

.site-head{
  border-bottom:1px solid rgba(139,154,142,.28);
  padding:20px 0;
}
.site-head .grid{row-gap:14px;align-items:baseline;}

.brand{
  grid-column:1 / span 3;
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--brass);}

.site-nav{grid-column:4 / span 9;}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end;
}
.site-nav a{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass);}

/* ---------- secciones ---------- */

.band{padding:var(--step) 0;}
.band--alt{background:var(--bg-alt);}
.contrast{background:var(--bg-contrast);color:var(--ink-dark);padding:var(--step) 0;}
.contrast a{color:#8a6f20;}

.col-main{grid-column:3 / span 7;}
.col-wide{grid-column:3 / span 9;}

h1,h2,h3{
  font-family:var(--mono);
  text-transform:uppercase;
  font-weight:600;
  margin:0;
}

h1{
  font-size:clamp(26px,4.2vw,42px);
  line-height:1.22;
  letter-spacing:.02em;
}
h2{
  font-size:clamp(18px,2.2vw,23px);
  line-height:1.35;
  letter-spacing:.06em;
  margin-bottom:22px;
}
h3{
  font-size:14.5px;
  line-height:1.45;
  letter-spacing:.12em;
  color:var(--brass);
  margin:34px 0 10px;
}
.contrast h3{color:#8a6f20;}

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

.lead{font-size:19px;color:var(--ink);}
.muted{color:var(--ink-soft);}
.contrast .muted{color:#4d6155;}

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

.hero{padding:calc(var(--step) + 16px) 0 var(--step);}
.hero .rail .scale{height:190px;}
.hero-body{grid-column:3 / span 8;}
.hero h1 .l2{display:block;color:var(--brass);}
.hero .kicker{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sage);
  margin:0 0 18px;
}
.hero p.intro{
  grid-column:auto;
  max-width:62ch;
  margin-top:26px;
  color:var(--ink-soft);
  font-size:18px;
}

/* trazos separadores verticales */

.ticks{
  display:flex;gap:9px;margin:30px 0 0;
}
.ticks span{display:block;width:1px;height:24px;background:var(--sage);opacity:.6;}
.contrast .ticks span{background:#7fa88a;opacity:.9;}

.rule{
  border:0;height:1px;background:rgba(139,154,142,.28);margin:0;
}

/* ---------- figura principal ---------- */

.figure-band{padding:0 0 var(--step);}
.figure-band .cap{
  grid-column:1 / span 3;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:4px;
  line-height:1.7;
}
.figure-band .shot{
  grid-column:4 / span 9;
  margin:0;
}
.figure-band .shot img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid rgba(139,154,142,.25);
}

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

.list-block{grid-column:3 / span 9;}
.two-col{
  columns:2;
  column-gap:48px;
}
ul.checks,ol.steps{margin:0;padding:0;list-style:none;}
ul.checks li,ol.steps li{
  break-inside:avoid;
  padding-left:20px;
  position:relative;
  margin-bottom:14px;
}
ul.checks li::before{
  content:"";
  position:absolute;left:0;top:12px;
  width:9px;height:1px;background:var(--brass);
}
ol.steps{counter-reset:s;}
ol.steps li{padding-left:38px;}
ol.steps li::before{
  counter-increment:s;
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--brass);
}

dl.defs{margin:0;}
dl.defs dt{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin-top:24px;
}
.contrast dl.defs dt{color:#8a6f20;}
dl.defs dd{margin:6px 0 0;}

/* ---------- sección contraste con figura de detalle ---------- */

.contrast .detail-text{grid-column:3 / span 6;}
.contrast .detail-fig{grid-column:9 / span 4;margin:0;}
.contrast .detail-fig img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid rgba(19,28,23,.18);
}
.contrast .detail-fig figcaption{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#4d6155;
  margin-top:10px;
  line-height:1.7;
}

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

.contact-line{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.08em;
}

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

.site-foot{
  border-top:1px solid rgba(139,154,142,.28);
  padding:34px 0 44px;
  background:var(--bg);
}
.site-foot .grid > div{grid-column:1 / span 12;}
.patchbay{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 24px;
}
.patchbay .fname{
  font-family:var(--mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;
}
.patchbay ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;
}
.patchbay ul a{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.patchbay ul a:hover{color:var(--ink);border-bottom-color:var(--brass);}
.patchbay .fmail a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;}
.foot-note{
  margin-top:22px;padding-top:14px;
  border-top:1px solid rgba(139,154,142,.2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}

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

@media (max-width:1000px){
  .hero-body,.col-main,.col-wide,.list-block,
  .contrast .detail-text{grid-column:2 / span 11;}
  .figure-band .shot{grid-column:2 / span 11;}
  .figure-band .cap{grid-column:2 / span 11;order:2;margin-top:12px;}
  .contrast .detail-fig{grid-column:2 / span 7;margin-top:34px;}
}

@media (max-width:760px){
  :root{--step:48px;--gap:16px;}
  body{font-size:16.5px;}
  .grid{padding:0 18px;}
  .brand{grid-column:1 / span 12;}
  .site-nav{grid-column:1 / span 12;}
  .site-nav ul{justify-content:flex-start;gap:8px 16px;}

  .rail{
    grid-column:1 / span 12;
    display:flex;align-items:baseline;gap:10px;
    margin-bottom:14px;padding-top:0;
  }
  .rail .lbl{margin-top:0;}
  .rail .scale{display:none;}

  .hero-body,.col-main,.col-wide,.list-block,
  .figure-band .shot,.figure-band .cap,
  .contrast .detail-text,.contrast .detail-fig{grid-column:1 / span 12;}

  .two-col{columns:1;}
  .hero p.intro{font-size:17px;}
  .lead{font-size:18px;}

  .patchbay{justify-content:flex-start;flex-direction:column;align-items:flex-start;}
  .patchbay ul{justify-content:flex-start;}
}

@media (max-width:400px){
  .site-nav a{font-size:11px;letter-spacing:.1em;}
  .patchbay .fmail a{font-size:11px;}
}