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

:root{
  --bg:#eceff1;
  --bg-alt:#dde3e7;
  --dark:#1f2a33;
  --ink:#151c22;
  --muted:#606d78;
  --on-dark:#eceff1;
  --accent:#a2472c;
  --accent-2:#3f6b86;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono","Courier New",monospace;
  --gap:24px;
  --rhythm:88px;
}

*,*::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.72;
  overflow-x:hidden;
}

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

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

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

.wrap{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 28px;
}

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

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

.site-head{
  border-bottom:1px solid #c7d0d6;
  background:var(--bg);
}

.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 32px;
  padding-top:22px;
  padding-bottom:20px;
}

.brand{
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;color:var(--accent);}

.brand small{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--accent-2);
  margin-top:2px;
}

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

.site-nav a{
  font-size:13.5px;
  letter-spacing:.08em;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  border-bottom-color:var(--accent);
  color:var(--accent);
}

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

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

.hero .grid{row-gap:46px;align-items:end;}

.hero-index{
  grid-column:1 / 3;
  grid-row:1 / 3;
  border-left:1px solid #c2ccd3;
  padding-left:16px;
  align-self:start;
}

.hero-index li{
  display:grid;
  grid-template-columns:9px 1fr;
  align-items:baseline;
  column-gap:11px;
  padding:9px 0;
  border-bottom:1px solid #d5dde2;
}
.hero-index ul{list-style:none;margin:0;padding:0;}
.hero-index li::before{
  content:"";
  width:7px;height:7px;
  background:var(--accent);
  display:block;
  transform:translateY(-2px);
}
.hero-index .n{
  font-family:var(--mono);
  font-size:12px;
  color:var(--accent-2);
  display:block;
}
.hero-index .t{
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
  display:block;
}

.hero-lede{grid-column:3 / 9;grid-row:1;}

h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(31px,4.1vw,50px);
  line-height:1.16;
  margin:0 0 26px;
  letter-spacing:-.005em;
}
h1 .line{display:block;}
h1 .line + .line{color:var(--ink);}

.hero-lede p{
  margin:0;
  max-width:60ch;
  color:var(--ink);
}

.hero-figure{
  grid-column:6 / 13;
  grid-row:2;
  justify-self:end;
  width:100%;
  max-width:620px;
  margin:0;
}

.hero-figure img{
  border:2px solid var(--dark);
  width:100%;
}

.hero-figure figcaption,
.figure-caption{
  font-size:12px;
  line-height:1.55;
  letter-spacing:.06em;
  color:var(--muted);
  margin-top:9px;
  text-align:right;
}

/* ---------- perforación ---------- */

.perf{
  height:6px;
  background-image:repeating-linear-gradient(90deg,#b9c4cb 0 6px,transparent 6px 20px);
  background-repeat:repeat-x;
}
.perf-dark{
  background-image:repeating-linear-gradient(90deg,#41505c 0 6px,transparent 6px 20px);
}

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

.scene{padding:var(--rhythm) 0;}
.scene.alt{background:var(--bg-alt);}

.scene-no{
  grid-column:1 / 2;
  font-family:var(--mono);
  font-size:13px;
  color:var(--accent);
  letter-spacing:.04em;
  padding-top:6px;
}
.scene-no::after{
  content:"";
  display:block;
  width:34px;
  height:1px;
  background:var(--accent-2);
  margin-top:8px;
}

.scene-body{grid-column:2 / 9;}
.scene-wide{grid-column:2 / 11;}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.7vw,33px);
  line-height:1.24;
  margin:0 0 20px;
  max-width:24ch;
}

h3{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:20px;
  line-height:1.35;
  margin:34px 0 12px;
}

p{margin:0 0 18px;max-width:68ch;}
p:last-child{margin-bottom:0;}

.lead{font-size:18.5px;}

.note{
  color:var(--muted);
  font-size:15.5px;
  border-left:2px solid var(--accent-2);
  padding-left:16px;
  margin-top:26px;
}

/* listas prácticas: 9 columnas en dos subcolumnas */

.checklist{
  grid-column:2 / 11;
  margin:34px 0 0;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:44px;
}
.checklist li{
  break-inside:avoid;
  padding:0 0 12px 20px;
  position:relative;
  font-size:16px;
  line-height:1.62;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:6px;height:6px;
  background:var(--accent);
}

.list-title{
  grid-column:2 / 11;
  margin-top:34px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--accent-2);
}

.plain{padding-left:0;list-style:none;margin:20px 0 0;}
.plain li{
  padding:0 0 10px 20px;
  position:relative;
  max-width:66ch;
}
.plain li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:6px;height:6px;
  background:var(--accent-2);
}

/* ---------- escena contrastada ---------- */

.scene-dark{
  background:var(--dark);
  color:var(--on-dark);
  padding:var(--rhythm) 0;
}
.scene-dark h2,
.scene-dark h3{color:var(--on-dark);}
.scene-dark .scene-no{color:#d2825f;}
.scene-dark .scene-no::after{background:#6f93aa;}
.scene-dark a{color:#e3a184;}
.scene-dark .plain li::before{background:#6f93aa;}
.scene-dark .checklist li::before{background:#d2825f;}
.scene-dark .note{color:#b6c3cc;border-left-color:#6f93aa;}

.scene-dark .grid{row-gap:40px;align-items:start;}

.dark-figure{
  grid-column:2 / 6;
  margin:0;
}
.dark-figure img{
  width:100%;
  border:2px solid #465662;
}
.dark-figure figcaption{
  font-size:12px;
  line-height:1.55;
  letter-spacing:.06em;
  color:#9fb0bb;
  margin-top:9px;
}

.dark-text{grid-column:7 / 13;}
.dark-text .scene-no{grid-column:auto;margin-bottom:14px;}

/* ---------- bloques numerados (about) ---------- */

.blocks{padding:var(--rhythm) 0;}

.block{
  padding:30px 0;
  border-top:1px solid #c7d0d6;
}
.block:first-of-type{border-top:none;padding-top:0;}

.block .n{
  grid-column:1 / 2;
  font-family:var(--mono);
  font-size:13px;
  color:var(--accent);
}
.block .b{grid-column:2 / 9;}
.block h2{margin-bottom:14px;}

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

.contact-line{
  font-family:var(--serif);
  font-size:21px;
  margin:0 0 6px;
}

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

.site-foot{
  background:var(--dark);
  color:var(--on-dark);
}
.site-foot .perf{margin-bottom:0;}

.foot-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:52px 0 46px;
}

.foot-inner h2{
  font-size:21px;
  margin:0 0 10px;
  color:var(--on-dark);
}

.foot-inner p{
  color:#b6c3cc;
  font-size:15px;
  max-width:44ch;
  margin:0 0 10px;
}

.foot-nav ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;}
.foot-nav a{color:var(--on-dark);text-decoration:none;font-size:14px;border-bottom:1px solid #4c5d6a;padding-bottom:2px;}
.foot-nav a:hover{border-bottom-color:#d2825f;color:#e3a184;}
.site-foot a.mail{color:#e3a184;}
.foot-legal{font-size:12.5px;color:#8fa0ac;letter-spacing:.04em;}

/* ---------- páginas internas ---------- */

.page-head{padding:60px 0 40px;}
.page-head .k{
  grid-column:1 / 2;
  font-family:var(--mono);
  font-size:12px;
  color:var(--accent-2);
  padding-top:10px;
}
.page-head .h{grid-column:2 / 10;}
.page-head p{color:var(--muted);max-width:62ch;margin-top:18px;}

.prose{padding:0 0 var(--rhythm);}
.prose .body{grid-column:2 / 10;}
.prose h2{margin-top:46px;}
.prose h2:first-child{margin-top:0;}

/* ---------- responsive ---------- */

@media (max-width:980px){
  :root{--rhythm:64px;--gap:20px;}
  .hero-index{grid-column:1 / 4;}
  .hero-lede{grid-column:4 / 13;}
  .hero-figure{grid-column:4 / 13;justify-self:stretch;}
  .scene-body,.scene-wide,.checklist,.list-title{grid-column:2 / 13;}
  .block .b{grid-column:2 / 13;}
  .page-head .h,.prose .body{grid-column:2 / 13;}
  .dark-figure{grid-column:1 / 6;}
  .dark-text{grid-column:6 / 13;}
}

@media (max-width:720px){
  :root{--rhythm:52px;}
  body{font-size:16.5px;}
  .wrap{padding:0 20px;}
  .grid{grid-template-columns:1fr;column-gap:0;}
  .hero{padding:40px 0 var(--rhythm);}
  .hero .grid{row-gap:32px;}
  .hero-index,.hero-lede,.hero-figure,
  .scene-no,.scene-body,.scene-wide,.checklist,.list-title,
  .dark-figure,.dark-text,
  .block .n,.block .b,
  .page-head .k,.page-head .h,.prose .body{
    grid-column:1;
    grid-row:auto;
  }
  .hero-index{border-left:none;padding-left:0;border-top:1px solid #c2ccd3;padding-top:6px;order:3;}
  .hero-lede{order:1;}
  .hero-figure{order:2;max-width:100%;justify-self:stretch;}
  .hero-figure figcaption{text-align:left;}
  .checklist{columns:1;}
  .scene-no{margin-bottom:12px;padding-top:0;}
  .dark-figure{margin-bottom:26px;max-width:340px;}
  .foot-inner{grid-template-columns:1fr;gap:28px;padding:40px 0 36px;}
  .block .n{margin-bottom:6px;}
}