/* Brigokoro — hoja de estilo común */

:root{
  --bg: #f0eef4;
  --bg-alt: #e2dfea;
  --bg-dark: #241f2e;
  --ink: #1d1a24;
  --ink-soft: #6a6577;
  --ink-inv: #f0eef4;
  --accent: #5a4c8c;
  --ochre: #a3762a;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --step: 84px;
  --gap: 24px;
}

*{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(--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;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

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

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

h1,h2,h3,.sitename,nav a,.navbar{font-family:var(--sans);}

h1{
  font-size:clamp(2.5rem,6.6vw,4.5rem);
  line-height:0.98;
  letter-spacing:-0.035em;
  font-weight:800;
  margin:0;
}

h2{
  font-family:var(--sans);
  font-size:clamp(1.55rem,2.9vw,2.15rem);
  line-height:1.08;
  letter-spacing:-0.025em;
  font-weight:800;
  margin:0 0 18px;
}

h3{
  font-family:var(--sans);
  font-size:1.12rem;
  line-height:1.25;
  letter-spacing:-0.012em;
  font-weight:700;
  margin:30px 0 10px;
}

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

.lead{font-size:1.2rem;line-height:1.6;}

.num{
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--ochre);
  display:block;
  margin-bottom:10px;
}

.caption{
  font-family:var(--sans);
  font-size:0.8rem;
  line-height:1.45;
  color:var(--ink-soft);
  margin:12px 0 0;
  max-width:44ch;
}
.caption .src{color:var(--ochre);}

/* ---------- cruces de registro ---------- */

.regmark{
  position:absolute;
  width:18px;height:18px;
  pointer-events:none;
}
.regmark::before,
.regmark::after{content:"";position:absolute;background:var(--accent);}
.regmark::before{left:0;top:50%;width:100%;height:1px;}
.regmark::after{top:0;left:50%;width:1px;height:100%;}
.regmark.ochre::before,
.regmark.ochre::after{background:var(--ochre);}
.regmark.inv::before,
.regmark.inv::after{background:#8d84a6;}

.rm-tl{left:-9px;top:-9px;}
.rm-tr{right:-9px;top:-9px;}
.rm-bl{left:-9px;bottom:-9px;}
.rm-br{right:-9px;bottom:-9px;}

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

.navbar{
  border-bottom:1px solid #cfcadb;
  background:var(--bg);
}
.navbar .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 28px;
  padding-top:20px;
  padding-bottom:20px;
}
.sitename{
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--ink);
}
.sitename:hover{color:var(--accent);}
.navbar nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;padding:0;
}
.navbar nav a{
  font-size:0.92rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.navbar nav a:hover{border-bottom-color:var(--accent);}
.navbar nav a[aria-current="page"]{border-bottom-color:var(--ochre);}

/* ---------- ritmo de secciones ---------- */

.band{padding:var(--step) 0;}
.band-alt{background:var(--bg-alt);}
.band-dark{background:var(--bg-dark);color:var(--ink-inv);}
.band-dark h2,.band-dark h3{color:var(--ink-inv);}
.band-dark a{color:#c9bff0;}
.band-dark .caption{color:#a79fbc;}

.sep{margin:0 0 34px;}
.sep span{display:block;height:2px;background:var(--accent);}
.sep span+span{background:var(--ochre);margin-left:24px;margin-top:6px;}

/* ---------- columnas de texto ---------- */

.col7{grid-column:1 / span 7;}
.col7.off1{grid-column:2 / span 7;}
.col7.off2{grid-column:3 / span 7;}
.col7.off3{grid-column:4 / span 7;}

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

.hero{padding:70px 0 var(--step);}
.hero-inner{position:relative;padding:34px 0 0;}
.hero h1{grid-column:1 / span 9;position:relative;}
.hero h1 .l2{position:relative;display:inline-block;}
.hero h1 .l2::after{
  content:"";
  position:absolute;
  left:-4px;
  bottom:0.14em;
  width:88%;
  height:3px;
  background:var(--accent);
}
.hero-body{margin-top:46px;row-gap:32px;}
.hero-body .intro{grid-column:1 / span 5;}
.hero-body .topics{grid-column:7 / span 4;}

.topics ul{list-style:none;margin:0;padding:0;}
.topics li{
  font-family:var(--sans);
  font-size:0.95rem;
  line-height:1.4;
  padding-left:18px;
  position:relative;
  margin-bottom:13px;
  color:var(--ink);
}
.topics li::before{
  content:"";
  position:absolute;
  left:0;top:0.5em;
  width:7px;height:7px;
  background:var(--accent);
}
.topics p{
  font-family:var(--sans);
  font-size:0.8rem;
  color:var(--ink-soft);
  margin:0 0 16px;
}

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

.figmain{grid-column:3 / span 8;position:relative;}
.figmain figure{margin:0;position:relative;}
.figmain .shot{position:relative;}

.figdetail{position:relative;}

/* ---------- sección oscura con detalle ---------- */

.dark-grid{row-gap:38px;align-items:start;}
.dark-grid .figdetail{grid-column:1 / span 5;}
.dark-grid .dark-text{grid-column:7 / span 6;}

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

ul.check,ul.plain{margin:0 0 20px;padding:0;list-style:none;}
ul.check li,ul.plain li{
  position:relative;
  padding-left:22px;
  margin-bottom:11px;
}
ul.check li::before{
  content:"";
  position:absolute;
  left:0;top:0.62em;
  width:8px;height:8px;
  background:var(--ochre);
}
ul.plain li::before{
  content:"";
  position:absolute;
  left:0;top:0.72em;
  width:10px;height:2px;
  background:var(--accent);
}
.band-dark ul.check li::before{background:var(--ochre);}

ol.steps{margin:0 0 20px;padding-left:22px;}
ol.steps li{margin-bottom:11px;}
ol.steps li::marker{font-family:var(--sans);font-weight:700;color:var(--ochre);}

dl.terms{margin:0;}
dl.terms dt{font-family:var(--sans);font-weight:700;margin-top:18px;}
dl.terms dd{margin:4px 0 0;}

/* ---------- páginas interiores ---------- */

.page-head{padding:64px 0 46px;}
.page-head h1{grid-column:1 / span 9;position:relative;}
.page-head .standfirst{grid-column:1 / span 7;margin-top:26px;color:var(--ink-soft);}

.about-block{position:relative;row-gap:0;margin-bottom:58px;}
.about-block:last-child{margin-bottom:0;}
.about-block .mark-col{grid-column:1;position:relative;min-height:22px;}
.about-block .mark-col .regmark{left:0;top:14px;}
.about-block .body{grid-column:3 / span 7;}

.doc{grid-column:2 / span 8;}
.doc h2{margin-top:44px;}
.doc h2:first-of-type{margin-top:0;}

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

.site-footer{background:var(--bg-dark);color:var(--ink-inv);padding:56px 0 46px;margin-top:0;}
.site-footer .sep span{background:#7d6fb5;}
.site-footer .sep span+span{background:var(--ochre);}
.site-footer .grid{row-gap:34px;}
.foot-a{grid-column:1 / span 7;}
.foot-b{grid-column:8 / span 5;}
.foot-a .fname{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-0.02em;
  margin:0 0 14px;
}
.foot-a p{color:#bdb6cd;max-width:46ch;font-size:0.98rem;}
.foot-b ul{list-style:none;margin:0 0 18px;padding:0;}
.foot-b li{margin-bottom:8px;}
.foot-b a{font-family:var(--sans);font-size:0.93rem;color:#dcd6ec;text-decoration:none;border-bottom:1px solid transparent;}
.foot-b a:hover{border-bottom-color:var(--ochre);}
.foot-mail{font-family:var(--sans);font-size:0.93rem;}
.foot-mail a{color:#c9bff0;}
.foot-note{
  font-family:var(--sans);
  font-size:0.78rem;
  color:#8d84a6;
  margin-top:38px;
}

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

@media (max-width:1000px){
  .figmain{grid-column:2 / span 10;}
  .dark-grid .figdetail{grid-column:1 / span 6;}
  .dark-grid .dark-text{grid-column:7 / span 6;}
  .doc{grid-column:1 / span 10;}
}

@media (max-width:820px){
  :root{--step:50px;--gap:18px;}
  body{font-size:17px;}
  .hero{padding:44px 0 var(--step);}
  .hero h1,
  .page-head h1{grid-column:1 / -1;}
  .hero-body .intro,
  .hero-body .topics,
  .page-head .standfirst,
  .col7,.col7.off1,.col7.off2,.col7.off3,
  .figmain,
  .dark-grid .figdetail,
  .dark-grid .dark-text,
  .doc,
  .about-block .body,
  .foot-a,.foot-b{grid-column:1 / -1;}
  .about-block .mark-col{display:none;}
  .figdetail img{width:100%;max-width:420px;}
  .hero-inner{padding-top:26px;}
  .sep{margin-bottom:26px;}
  .navbar .wrap{gap:12px 20px;}
  .navbar nav ul{gap:6px 16px;}
}

@media (max-width:420px){
  h1{font-size:2.15rem;}
  .hero h1 .l2::after{height:2px;}
}