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

:root{
  --bg:#131c17;
  --bg-alt:#1a2620;
  --bg-light:#eaeee7;
  --text:#e4eae2;
  --text-dim:#8b9a8e;
  --text-dark:#131c17;
  --brass:#c2a24d;
  --sage:#7fa88a;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:128px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

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

a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(194,162,77,.4)}
a:hover{border-bottom-color:var(--brass)}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:4px;
  border-radius:1px;
}

/* --- rejilla de 12 columnas --- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

.col-center-6{grid-column:4 / span 6}
.col-center-8{grid-column:3 / span 8}
.col-left-7{grid-column:4 / span 7}

/* --- tipografía --- */
h1,h2,h3,.mono{
  font-family:var(--mono);
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:.14em;
}

h1{
  font-size:clamp(1.45rem,3.1vw,2.15rem);
  line-height:1.45;
  letter-spacing:.1em;
  margin:0;
}

h2{
  font-size:clamp(.95rem,1.5vw,1.05rem);
  line-height:1.6;
  margin:0 0 32px;
  color:var(--text);
}

h3{
  font-size:.82rem;
  letter-spacing:.18em;
  color:var(--sage);
  margin:48px 0 16px;
}

p{margin:0 0 24px}
p:last-child{margin-bottom:0}

.lead{
  font-size:21px;
  line-height:1.7;
  color:var(--text);
}

.dim{color:var(--text-dim)}

.num{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.26em;
  color:var(--sage);
  display:block;
  margin-bottom:20px;
}

.caption{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.8;
  color:var(--text-dim);
  text-transform:uppercase;
  margin:20px 0 0;
  text-align:center;
}

/* --- navegación --- */
.site-head{padding:40px 0 0}

.nav{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 40px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.nav a{color:var(--text-dim);border-bottom:none;padding:4px 0}
.nav a:hover{color:var(--brass)}
.nav a[aria-current="page"]{color:var(--brass)}

/* --- hero --- */
.hero{
  min-height:78vh;
  display:flex;
  align-items:flex-end;
  padding:120px 0 0;
}
.hero .grid{width:100%}
.hero-inner{grid-column:3 / span 8;text-align:center;padding-bottom:8vh}
.hero-sub{
  margin:28px 0 0;
  color:var(--text-dim);
  font-size:1rem;
}

/* --- ritmo de secciones --- */
section{padding:calc(var(--gap)/2) 0}
.band{background:var(--bg-alt)}
.light{background:var(--bg-light);color:var(--text-dark)}
.light h2,.light h3,.light .lead{color:var(--text-dark)}
.light h3{color:#41604e}
.light .dim,.light .caption{color:#54655a}
.light .num{color:#41604e}
.light a{color:#8a6f1f;border-bottom-color:rgba(138,111,31,.45)}
.light a:focus-visible{outline-color:#8a6f1f}

/* --- imagen principal --- */
.figure-main{
  grid-column:3 / span 8;
  margin:96px 0;
}
.figure-main img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* --- bloque de detalle en sección clara --- */
.detail{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  row-gap:56px;
  align-items:start;
}
.detail figure{grid-column:1 / span 5;margin:0}
.detail figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.detail figure .caption{text-align:left}
.detail .detail-text{grid-column:7 / span 6}

/* --- listas --- */
ul,ol{padding-left:1.15em;margin:0 0 24px}
li{margin-bottom:12px}
li::marker{color:var(--brass)}
.light li::marker{color:#8a6f1f}

.plain{list-style:none;padding-left:0}
.plain li{
  padding-left:26px;
  position:relative;
}
.plain li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--brass);
}
.light .plain li::before{color:#8a6f1f}

/* --- páginas de texto --- */
.page-head{padding:96px 0 0}
.page-head .grid > *{grid-column:4 / span 6}
.page-head h1{margin-bottom:24px}

.prose{padding:56px 0 calc(var(--gap)/2)}
.prose .grid > *{grid-column:4 / span 6}

.rule{
  grid-column:4 / span 6;
  text-align:center;
  color:var(--sage);
  font-family:var(--mono);
  letter-spacing:.4em;
  margin:72px 0;
}

/* --- pie --- */
.site-foot{
  background:var(--bg-alt);
  padding:112px 0;
  margin-top:calc(var(--gap)/2);
}
.foot-inner{
  grid-column:3 / span 8;
  text-align:center;
}
.foot-name{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.9rem;
  margin:0 0 40px;
}
.foot-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 40px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:40px;
}
.foot-nav a{color:var(--text-dim);border-bottom:none}
.foot-nav a:hover{color:var(--brass)}
.foot-mail{margin:0 0 32px}
.foot-note{
  font-size:.85rem;
  color:var(--text-dim);
  max-width:44ch;
  margin:0 auto;
  line-height:1.8;
}

/* --- adaptación --- */
@media (max-width:960px){
  :root{--gap:88px}
  .grid{column-gap:20px;padding:0 28px}
  .col-center-6,.col-center-8,.col-left-7,
  .hero-inner,.figure-main,.foot-inner,
  .page-head .grid > *,.prose .grid > *,.rule{grid-column:2 / span 10}
  .detail figure{grid-column:1 / span 6}
  .detail .detail-text{grid-column:7 / span 6}
}

@media (max-width:680px){
  :root{--gap:72px}
  body{font-size:16.5px}
  .grid{padding:0 22px;column-gap:0}
  .col-center-6,.col-center-8,.col-left-7,
  .hero-inner,.figure-main,.foot-inner,
  .page-head .grid > *,.prose .grid > *,.rule,
  .nav,.detail figure,.detail .detail-text{grid-column:1 / -1}
  .site-head{padding:28px 0 0}
  .nav{gap:10px 24px;justify-content:flex-start}
  .hero{min-height:70vh;padding:64px 0 0}
  .hero-inner{text-align:left;padding-bottom:6vh}
  .figure-main{margin:56px 0}
  .detail figure .caption{text-align:left}
  .page-head{padding:56px 0 0}
  .site-foot{padding:72px 0}
  .foot-inner{text-align:left}
  .foot-nav{justify-content:flex-start;gap:10px 24px}
  .rule{text-align:left;margin:56px 0}
  .caption{text-align:left}
}