/* Zustove — vidrio soplado y trabajo en caliente
   Hoja de estilo única para todas las páginas */

:root{
  --bg:#edeff1;
  --bg-alt:#dee2e6;
  --bg-dark:#1a1e22;
  --ink:#15181c;
  --ink-2:#616770;
  --ink-inv:#edeff1;
  --a1:#b02a24;
  --a2:#3c6a86;
  --rule:rgba(21,24,28,.16);
  --rule-dark:rgba(237,239,241,.22);
  --step:72px;
}

*,*::before,*::after{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;
}

/* ---------- retícula de 12 columnas con margen reglado ---------- */

.lay{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

.lay::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(25% + 8px);
  width:1px;
  background:var(--a1);
  opacity:.45;
}

.lay > *{grid-column:4 / 10;}      /* columna de texto: 6 columnas */
.lay > .wide{grid-column:4 / 12;}  /* listas y tablas: 8 columnas */
.lay > .field{grid-column:1 / 4;}  /* margen izquierdo */

/* ---------- ritmo vertical ---------- */

.sec{padding:var(--step) 0;}
.sec--tight{padding:calc(var(--step) / 2) 0;}
.sec--alt{background:var(--bg-alt);}
.sec--dark{background:var(--bg-dark);color:var(--ink-inv);}
.sec--dark .lay::before{background:var(--a2);opacity:.8}
.sec > .lay > * + *{margin-top:26px}
.sec > .lay > * + h2{margin-top:calc(var(--step) - 16px)}
.sec > .lay > .fig-main,
.sec > .lay > .fig-caption-left,
.sec > .lay > .fig-detail,
.sec > .lay > .dark-text{margin-top:0}

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

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

h1{
  position:relative;
  font-size:clamp(34px,5.2vw,62px);
  line-height:1.05;
  letter-spacing:-.01em;
}

h2{
  position:relative;
  font-size:clamp(24px,2.9vw,33px);
  line-height:1.15;
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
}

.sec--dark h2{border-bottom-color:var(--rule-dark)}

h3{
  font-size:20px;
  line-height:1.3;
  margin-bottom:-10px;
}

p{margin:0}

.lead{font-size:18px}

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

.sec--dark .note{color:#a9b2ba}

/* inicial volada del H1 */
.drop{
  position:absolute;
  right:100%;
  top:-.04em;
  margin-right:22px;
  font-size:2.1em;
  line-height:1;
  color:var(--a1);
}

/* numeración de secciones en el margen */
h2[data-mark]::before,
h2[data-initial]::before{
  position:absolute;
  right:100%;
  top:-.05em;
  margin-right:22px;
  color:var(--a2);
  text-align:right;
  white-space:nowrap;
}

h2[data-mark]::before{
  content:attr(data-mark);
  font-size:15px;
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:2.1;
  letter-spacing:.06em;
}

h2[data-initial]::before{
  content:attr(data-initial);
  font-size:2.3em;
  line-height:.95;
  color:var(--a1);
}

.plain h2{border-bottom:none;padding-bottom:0}

/* ---------- enlaces ---------- */

a{color:var(--a1);text-decoration:none;border-bottom:1px solid var(--a1)}
a:hover{color:#8d201b;border-bottom-color:#8d201b}
.sec--dark a,footer a{color:inherit}
.sec--dark a{border-bottom-color:var(--a2)}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--a1);
  outline-offset:3px;
}

.sec--dark a:focus-visible{outline-color:#e9b8b4}

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

ul.marks,ol.steps{margin:0;padding:0;list-style:none}

ul.marks li{position:relative;padding-left:26px;margin-bottom:14px}
ul.marks li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--a1);
}
.sec--dark ul.marks li::before{color:#d4726c}

ol.steps{counter-reset:paso}
ol.steps li{position:relative;padding-left:42px;margin-bottom:16px;counter-increment:paso}
ol.steps li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.35em;
  font-size:13px;
  line-height:1;
  color:var(--a2);
}

ul.marks li:last-child,ol.steps li:last-child{margin-bottom:0}

.index-list li strong{font-weight:600}

/* ---------- reglas y guías ---------- */

.guide{height:1px;background:var(--rule);border:0;margin:0}
.sec--dark .guide{background:var(--rule-dark)}

.hero-intro > * + *,
.page-sub > * + *{margin-top:22px}

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

figure{margin:0}

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

.fig-main{grid-column:6 / 13;grid-row:1}
.fig-main img{border:1px solid var(--rule)}

.fig-caption-left{
  grid-column:1 / 4;
  grid-row:1;
  align-self:end;
  padding-bottom:4px;
}

.fig-detail{grid-column:9 / 13;grid-row:1;align-self:start}
.fig-detail img{border:1px solid rgba(237,239,241,.18)}
.fig-detail figcaption{margin-top:14px}

.dark-text{grid-column:4 / 9;grid-row:1}
.dark-text > * + *{margin-top:26px}
.dark-text > * + h2{margin-top:0}

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

.site-head{padding:26px 0 24px;border-bottom:1px solid var(--rule)}
.site-head .brand{grid-column:1 / 4;align-self:center}
.site-head nav{grid-column:4 / 13;align-self:center}

.brand-name{
  font-family:Georgia,'Times New Roman',serif;
  font-size:22px;
  letter-spacing:.02em;
  color:var(--ink);
  border-bottom:none;
}
.brand-name:hover{color:var(--a1)}

.nav-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  font-size:15px;
}
.nav-list li{display:flex;align-items:center}
.nav-list li + li::before{
  content:"/";
  color:var(--a1);
  margin:0 12px;
}
.nav-list a{color:var(--ink);border-bottom:1px solid transparent}
.nav-list a:hover{color:var(--a1);border-bottom-color:var(--a1)}
.nav-list a[aria-current="page"]{border-bottom-color:var(--a1);color:var(--a1)}

/* ---------- héroe ---------- */

.hero{padding:calc(var(--step) + 16px) 0 var(--step)}
.hero h1{grid-column:4 / 11}
.hero .hero-intro{grid-column:4 / 10;margin-top:44px}

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

.site-foot{
  background:var(--bg-alt);
  border-top:1px solid var(--rule);
  padding:44px 0 52px;
}
.site-foot .foot-name{
  grid-column:1 / 4;
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
}
.site-foot .foot-nav{grid-column:4 / 10}
.site-foot .foot-mail{grid-column:10 / 13;text-align:right;font-size:15px}
.site-foot .foot-note{grid-column:4 / 10;margin-top:22px}
.site-foot .nav-list{font-size:15px}

/* ---------- páginas de texto ---------- */

.page-head{padding:calc(var(--step) - 8px) 0 0}
.page-head h1{grid-column:4 / 11;font-size:clamp(30px,4.2vw,48px)}
.page-head .page-sub{grid-column:4 / 10;margin-top:26px}

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

@media (max-width:1000px){
  .lay > *{grid-column:3 / 13}
  .lay > .wide{grid-column:3 / 13}
  .lay > .field{grid-column:1 / 3}
  .lay::before{left:calc(16.6% + 6px)}
  .hero h1,.page-head h1,.hero .hero-intro,.page-head .page-sub{grid-column:3 / 13}
  .fig-main{grid-column:4 / 13}
  .fig-caption-left{grid-column:1 / 4}
  .dark-text{grid-column:3 / 13;grid-row:auto}
  .fig-detail{grid-column:3 / 11;grid-row:auto}
  .sec > .lay > .fig-detail{margin-top:40px}
  .site-head .brand{grid-column:1 / 13}
  .site-head nav{grid-column:1 / 13;margin-top:14px}
  .site-head .lay::before,.site-foot .lay::before{display:none}
  .site-foot .foot-name{grid-column:1 / 13}
  .site-foot .foot-nav{grid-column:1 / 13;margin-top:14px}
  .site-foot .foot-mail{grid-column:1 / 13;text-align:left;margin-top:14px}
  .site-foot .foot-note{grid-column:1 / 13}
}

@media (max-width:700px){
  :root{--step:44px}
  body{font-size:16px;line-height:1.75}
  .lay{grid-template-columns:1fr;padding:0 20px;column-gap:0}
  .lay::before{display:none}
  .lay > *,
  .lay > .wide,
  .lay > .field,
  .hero h1,.page-head h1,.hero .hero-intro,.page-head .page-sub,
  .fig-main,.fig-caption-left,.fig-detail,.dark-text,
  .site-head .brand,.site-head nav,
  .site-foot .foot-name,.site-foot .foot-nav,.site-foot .foot-mail,.site-foot .foot-note{
    grid-column:1;
    grid-row:auto;
  }
  .sec > .lay > .fig-caption-left{margin-top:14px}
  .fig-caption-left{padding-bottom:0}
  .sec > .lay > .fig-detail{margin-top:32px}
  .drop{
    position:static;
    margin:0;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
  }
  h2[data-mark]::before,
  h2[data-initial]::before{
    position:static;
    display:block;
    margin:0 0 10px;
    text-align:left;
    line-height:1.2;
  }
  h2[data-initial]::before{font-size:1.5em}
  .hero .hero-intro{margin-top:32px}
  .sec > .lay > * + h2{margin-top:calc(var(--step) + 8px)}
}