/* Labrorvoto — hoja de estilo única para todas las páginas */

:root{
  --bg:#181a19;
  --bg-alt:#202422;
  --bg-light:#eef0ee;
  --ink:#e6e9e6;
  --ink-dim:#8f9691;
  --ink-dark:#181a19;
  --acc:#5fae86;
  --acc2:#d8c07a;
  --rule:#2c322e;
  --rule-light:#c8cdc8;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --gap:24px;
  --max:1240px;
  --pad:20px;
  --rhythm:52px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}

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

a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

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

h1,h2,h3{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}

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

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

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr;
  column-gap:var(--gap);
}

/* ---------- perforaciones ---------- */

.perf{
  height:9px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 9px,transparent 9px 24px);
}
.perf--light{background:repeating-linear-gradient(90deg,var(--rule-light) 0 9px,transparent 9px 24px);}

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

.site-head{border-bottom:1px solid var(--rule);}
.head-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px var(--pad);
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  align-items:baseline;
  justify-content:space-between;
}
.brand{
  font-family:var(--sans);
  font-weight:800;
  font-size:19px;
  letter-spacing:0.01em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--acc);}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}
.site-nav a{
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:600;
  color:var(--ink-dim);
  text-decoration:none;
  padding:2px 0;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--acc);}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc);}

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

.hero{padding:44px 0 var(--rhythm);}

.strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  border-left:2px solid var(--rule);
  padding-left:14px;
  margin-bottom:34px;
  list-style:none;
}
.strip li{display:flex;align-items:center;gap:9px;}
.strip .mark{width:9px;height:9px;background:var(--rule);flex:0 0 auto;}
.strip li:nth-child(odd) .mark{background:var(--acc);}
.strip a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.strip a:hover{color:var(--ink);border-bottom-color:var(--acc);}
.strip .n{color:var(--acc2);margin-right:6px;}

.hero h1{
  font-size:clamp(33px,7.4vw,62px);
  line-height:0.98;
  letter-spacing:-0.035em;
  margin-bottom:26px;
}
.hero h1 span{display:block;}
.hero-lead{color:var(--ink);}
.hero-lead .dim{color:var(--ink-dim);}

.hero-fig{margin:38px 0 0;max-width:620px;}
.hero-fig img{border:2px solid var(--rule);}
.hero-fig figcaption,
.fig-note{
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-dim);
  margin-top:10px;
}

/* ---------- escenas ---------- */

.scene{padding:var(--rhythm) 0;}
.scene--alt{background:var(--bg-alt);}
.scene--light{background:var(--bg-light);color:var(--ink-dark);}
.scene--light h2,.scene--light h3{color:var(--ink-dark);}
.scene--light .num{color:#8b7430;}
.scene--light .scene-head,
.scene--light .num{border-bottom-color:var(--rule-light);}
.scene--light a{color:#2f7c56;}
.scene--light .fig-note{color:#5c635e;}

.num{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--acc2);
  border-bottom:1px solid var(--rule);
  padding-bottom:10px;
  margin-bottom:8px;
}
.scene-head{
  border-bottom:1px solid var(--rule);
  padding-bottom:16px;
  margin-bottom:30px;
}
.scene h2{
  font-size:clamp(23px,3.6vw,33px);
  line-height:1.1;
}
.scene h3{
  font-size:19px;
  line-height:1.25;
  margin:30px 0 12px;
}
.scene .lead{font-size:19.5px;}

ul.plain,ol.plain{
  margin:0 0 22px;
  padding-left:20px;
}
ul.plain li,ol.plain li{margin-bottom:10px;padding-left:4px;}
ul.plain li::marker{color:var(--acc);}
ol.plain li::marker{color:var(--acc);font-family:var(--mono);font-size:14px;}
.scene--light ul.plain li::marker,
.scene--light ol.plain li::marker{color:#2f7c56;}

.two-col{columns:2;column-gap:36px;}
.two-col li{break-inside:avoid;}

.detail-fig{margin:0 0 28px;}
.detail-fig img{border:2px solid var(--rule-light);}

.tally{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  border-top:1px solid var(--rule);
}
.tally li{
  border-bottom:1px solid var(--rule);
  padding:12px 0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
}
.tally b{
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  min-width:190px;
}
.tally span{color:var(--ink-dim);font-size:16.5px;}
.scene--light .tally,.scene--light .tally li{border-color:var(--rule-light);}
.scene--light .tally span{color:#565d58;}

.contact-line{font-size:20px;}

/* ---------- about ---------- */

.entry{padding:var(--rhythm) 0;}
.entry h1{
  font-size:clamp(30px,6vw,50px);
  line-height:1.02;
  letter-spacing:-0.03em;
  margin-bottom:24px;
}
.entry .standfirst{color:var(--ink-dim);font-size:19.5px;margin-bottom:44px;}
.entry h2{font-size:22px;margin:0 0 14px;}
.entry h3{font-size:18px;margin:26px 0 10px;}

.block{
  border-top:1px solid var(--rule);
  padding-top:26px;
  margin-top:34px;
}
.block .num{border:0;padding:0;margin-bottom:12px;}

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

.site-foot{
  background:var(--bg-light);
  color:var(--ink-dark);
  margin-top:0;
}
.foot-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:40px var(--pad) 48px;
  display:grid;
  grid-template-columns:1fr;
  gap:30px var(--gap);
}
.site-foot .brand-foot{
  font-family:var(--sans);
  font-weight:800;
  font-size:19px;
  margin:0 0 10px;
}
.site-foot p{color:#4d544f;font-size:16.5px;margin:0 0 10px;}
.site-foot a{color:#2f7c56;}
.foot-nav ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;}
.foot-nav a{font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(47,124,86,.4);}
.foot-nav a:hover{border-bottom-color:#2f7c56;}
.foot-mail{font-family:var(--sans);font-size:15.5px;font-weight:600;}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--acc);
  color:#101211;
  padding:10px 16px;
  font-family:var(--sans);
  font-weight:700;
  text-decoration:none;
}
.skip:focus{left:0;z-index:5;}

/* ---------- escritorio ---------- */

@media (min-width:900px){
  :root{--pad:32px;--rhythm:88px;}

  .wrap{grid-template-columns:repeat(12,1fr);}

  .hero{padding:60px 0 96px;}
  .hero .wrap{align-items:start;}
  .strip{
    grid-column:1 / 3;
    grid-row:1 / span 3;
    flex-direction:column;
    gap:16px;
    margin-bottom:0;
    padding-top:6px;
  }
  .hero h1{grid-column:4 / 13;grid-row:1;}
  .hero-lead{grid-column:4 / 10;grid-row:2;}
  .hero-fig{grid-column:6 / 13;grid-row:3;justify-self:end;margin-top:56px;}

  .num{grid-column:1 / 2;margin-bottom:0;}
  .scene-head{grid-column:2 / 12;}
  .scene > .wrap > p,
  .scene > .wrap > .tally{grid-column:2 / 9;}
  .scene > .wrap > h3{grid-column:2 / 10;}
  .scene > .wrap > ul,
  .scene > .wrap > ol{grid-column:2 / 11;}

  .scene--figure > .wrap > .detail-fig{grid-column:2 / 7;grid-row:2 / span 6;}
  .scene--figure > .wrap > h3,
  .scene--figure > .wrap > p,
  .scene--figure > .wrap > ul{grid-column:8 / 13;}

  .entry{padding:80px 0 96px;}
  .entry > .wrap > h1{grid-column:2 / 11;}
  .entry > .wrap > .standfirst{grid-column:2 / 9;}
  .entry > .wrap > p,
  .entry > .wrap > h2,
  .entry > .wrap > h3,
  .entry > .wrap > ul,
  .entry > .wrap > ol{grid-column:2 / 9;}
  .entry > .wrap > .block{grid-column:1 / 10;}
  .block{display:grid;grid-template-columns:1fr 8fr;column-gap:var(--gap);}
  .block .num{grid-column:1;padding-top:2px;}
  .block .block-body{grid-column:2;}

  .foot-inner{grid-template-columns:6fr 6fr;padding:52px var(--pad) 60px;}
}

@media (min-width:1100px){
  .scene .lead{font-size:20px;}
}