/* Pirdarvu — hoja de estilos general */

:root{
  --bg:#1a1722;
  --bg-alt:#221e2c;
  --light:#eeeaf2;
  --tx:#e7e3ec;
  --tx2:#948ea3;
  --ac:#5fb79a;
  --ac-dark:#2b6d59;
  --ac2:#c0a44e;
  --line:rgba(148,142,163,.34);
  --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%}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-wrap:break-word;
}

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

a{color:var(--ac);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--tx)}
a:focus-visible{outline:2px solid var(--ac);outline-offset:3px;color:var(--tx)}

/* ---------- estructura general ---------- */

.page{max-width:1200px;margin:0 auto;padding:40px 40px 0}

.topbar{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:14px 28px;
  padding-bottom:26px;
}
.brand{
  font-family:var(--serif);font-size:20px;letter-spacing:.01em;
  color:var(--tx);text-decoration:none;
}
.brand:hover,.brand:focus-visible{color:var(--ac)}
.topbar nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0}
.topbar nav a{
  font-size:13px;letter-spacing:.07em;color:var(--tx2);
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;
}
.topbar nav a:hover,.topbar nav a:focus-visible{color:var(--tx);border-bottom-color:var(--ac)}
.topbar nav a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--ac2)}

.slab{
  background:var(--bg-alt);
  border:1px solid rgba(95,183,154,.34);
  padding:56px 48px 60px;
}

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

.w4{grid-column:1 / span 4}
.w5{grid-column:1 / span 5}
.w6{grid-column:1 / span 6}
.w7{grid-column:1 / span 7}
.w8{grid-column:1 / span 8}
.w12{grid-column:1 / -1}
.side{grid-column:9 / span 4}
.right6{grid-column:7 / span 6}
.right5{grid-column:8 / span 5}
.cap{grid-column:7 / span 4}

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

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

h1{
  font-size:40px;line-height:1.16;margin:0;
  letter-spacing:-.005em;
}
h2{font-size:27px;line-height:1.26;margin:0 0 18px}
h3{font-size:20px;font-style:italic;line-height:1.35;margin:30px 0 10px}

h2 .num{
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  color:var(--ac2);display:block;margin-bottom:10px;
}

p{margin:0 0 17px;max-width:70ch}
p:last-child{margin-bottom:0}

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

.label{
  font-family:var(--sans);font-size:12px;line-height:1.5;
  letter-spacing:.14em;color:var(--ac2);margin:0 0 12px;
}

.muted{color:var(--tx2)}

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

.hero{align-items:start;margin-bottom:52px}
.hero h1{grid-column:1 / span 8}
.hero .sheet{grid-column:9 / span 4}

.sheet{
  border:1px solid rgba(192,164,78,.45);
  padding:16px 18px;
  font-size:14px;line-height:1.6;color:var(--tx2);
}
.sheet dl{margin:0}
.sheet div{display:flex;gap:14px;justify-content:space-between;padding:7px 0;border-top:1px solid rgba(148,142,163,.22)}
.sheet div:first-child{border-top:0;padding-top:0}
.sheet dt{color:var(--ac2);flex:0 0 auto}
.sheet dd{margin:0;text-align:right}

.sheet.stack{margin-bottom:22px}
.sheet p{font-size:14px;max-width:none}

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

figure{margin:0}

.fig-main img{border:1px solid rgba(148,142,163,.4)}
.fig-main figcaption{
  align-self:end;font-size:13px;line-height:1.6;color:var(--tx2);
  border-left:1px solid rgba(192,164,78,.5);padding-left:16px;
}

.fig-detail figcaption{font-size:13px;line-height:1.6;color:#4a4456;margin-top:12px}
.fig-detail img{border:1px solid rgba(26,23,34,.25)}

/* ---------- separadores ---------- */

.rule{
  position:relative;height:1px;border:0;background:var(--line);
  margin:88px 0;
}
.rule::before,.rule::after{
  content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--ac2);
}
.rule::before{left:0}
.rule::after{right:0}

.rule-note{
  margin:88px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:28px;
}
.rule-note .sheet{grid-column:8 / span 5}

/* ---------- sección contrastada ---------- */

.contrast{
  background:var(--light);
  color:var(--bg);
  margin:88px -48px;
  padding:56px 48px;
}
.contrast h2,.contrast h3{color:var(--bg)}
.contrast h2 .num{color:#7a6528}
.contrast .muted{color:#4a4456}
.contrast .sheet{border-color:rgba(26,23,34,.3);color:#4a4456}
.contrast .sheet dt{color:#7a6528}
.contrast .sheet div{border-top-color:rgba(26,23,34,.16)}
.contrast li::marker{color:var(--ac-dark)}
.contrast a{color:var(--ac-dark)}
.contrast a:hover,.contrast a:focus-visible{color:var(--bg)}

.contrast .fig-detail{grid-column:8 / span 5}
.contrast .textblock{grid-column:1 / span 6}

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

ul,ol{margin:0 0 17px;padding-left:20px;max-width:66ch}
li{margin-bottom:9px}
li::marker{color:var(--ac)}

.checklist{list-style:none;padding-left:0}
.checklist li{
  position:relative;padding-left:26px;
}
.checklist li::before{
  content:"";position:absolute;left:0;top:11px;
  width:9px;height:1px;background:var(--ac);
}
.contrast .checklist li::before{background:var(--ac-dark)}

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

.site-footer{
  max-width:1200px;margin:0 auto;padding:56px 40px 44px;
  color:var(--tx2);font-size:14px;
}
.footer-top{
  display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:baseline;justify-content:space-between;
  padding-bottom:18px;
}
.footer-name{font-family:var(--serif);font-size:19px;color:var(--tx)}
.footer-line{height:1px;background:var(--line);border:0;margin:0}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:16px 40px;
  justify-content:space-between;padding-top:18px;
}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0}
.site-footer nav a{color:var(--tx2);text-decoration:none;border-bottom:1px solid transparent}
.site-footer nav a:hover,.site-footer nav a:focus-visible{color:var(--tx);border-bottom-color:var(--ac)}
.footer-note{max-width:46ch;margin:0}

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

@media (max-width:1000px){
  .page{padding:32px 28px 0}
  .slab{padding:40px 30px 44px}
  .contrast{margin:64px -30px;padding:44px 30px}
  .site-footer{padding:44px 28px 40px}
  h1{font-size:34px}
  h2{font-size:24px}
  .grid{gap:22px}
  .hero h1{grid-column:1 / span 12}
  .hero .sheet{grid-column:1 / span 12}
  .w4,.w5,.w6,.w7,.w8,.side,.right5,.right6,.cap,
  .contrast .fig-detail,.contrast .textblock{grid-column:1 / -1}
  .rule-note .sheet{grid-column:1 / -1}
  .fig-main figcaption{border-left:0;padding-left:0;border-top:1px solid rgba(192,164,78,.5);padding-top:12px}
  .fig-main img{max-width:420px}
}

@media (max-width:620px){
  body{font-size:16px}
  .page{padding:24px 16px 0}
  .slab{padding:28px 18px 32px}
  .contrast{margin:52px -18px;padding:32px 18px}
  .site-footer{padding:36px 16px 32px}
  h1{font-size:28px}
  h2{font-size:22px}
  h3{font-size:18px}
  .lead{font-size:17px}
  .rule,.rule-note{margin:52px 0}
  .hero{margin-bottom:36px}
  .footer-bottom{flex-direction:column}
}