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

:root{
  --bg:#151b2b;
  --bg-alt:#1c2436;
  --sand:#eee8dc;
  --text:#e4e0d4;
  --muted:#8a93a5;
  --ink:#151b2b;
  --accent:#c98a4c;
  --accent2:#7fa3b8;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:28px;
  --rhythm:96px;
}

*,*::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.8;
  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;}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;}
h1{font-size:clamp(2.3rem,5.6vw,4.3rem);line-height:1.05;letter-spacing:-.01em;}
h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;}
h3{font-size:1.15rem;line-height:1.3;margin-top:2.2em;}
p{margin:0 0 1.3em;}
p:last-child{margin-bottom:0;}

.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px;}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;}

.caption{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px;}
.caption em,.caption i{font-style:italic;}

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

.site-head{border-bottom:1px solid rgba(201,138,76,.4);}
.site-head .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:14px 32px;
  padding-top:22px;padding-bottom:22px;
}
.brand{font-family:var(--serif);font-size:1.35rem;letter-spacing:.02em;color:var(--text);text-decoration:none;}
.brand:hover{color:var(--accent);}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;padding:0;}
.site-nav a{color:var(--muted);text-decoration:none;font-size:15px;padding-bottom:3px;border-bottom:1px solid transparent;}
.site-nav a:hover{color:var(--text);border-bottom-color:var(--accent);}
.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent);}

/* ---------- portada: hero ---------- */

.hero{padding-top:72px;padding-bottom:var(--rhythm);}
.hero h1{grid-column:1 / 9;margin-bottom:40px;}
.hero-lede{grid-column:1 / 5;color:var(--text);}
.hero-meta{grid-column:1 / 5;margin-top:28px;font-size:14px;color:var(--muted);line-height:1.6;}
.hero-figure{
  grid-column:9 / 13;
  grid-row:1 / 4;
  align-self:start;
  max-width:480px;
  margin-top:clamp(72px,10vw,150px);
  margin-left:auto;
}
.hero-figure img{width:100%;}

/* ---------- secciones ---------- */

.sec{padding-top:var(--rhythm);padding-bottom:var(--rhythm);}
.sec--alt{background:var(--bg-alt);}
.sec + .sec > .wrap > .grid{border-top:0;}
.sec .rule{grid-column:1 / 13;border:0;border-top:1px solid rgba(201,138,76,.4);margin:0 0 44px;}

.num{
  grid-column:1 / 3;
  font-size:13px;line-height:1.4;color:var(--accent2);
  margin:6px 0 0;letter-spacing:.08em;
}
.body-narrow{grid-column:3 / 9;}
.body-wide{grid-column:3 / 11;}
.body-narrow h2,.body-wide h2{margin-bottom:24px;}

ul.plain,ol.plain{margin:0;padding-left:1.15em;}
ul.plain li,ol.plain li{margin-bottom:.6em;}
ul.plain{list-style:none;padding-left:0;}
ul.plain li{position:relative;padding-left:22px;}
ul.plain li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:9px;height:1px;background:var(--accent);
}
ol.plain{list-style:decimal;padding-left:1.4em;}
ol.plain li::marker{color:var(--accent2);font-size:.9em;}

.list-two{
  grid-column:3 / 13;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:64px;row-gap:0;margin-top:8px;
}
.list-two > *{margin:0;}
.list-title{
  grid-column:3 / 13;
  font-size:13px;color:var(--accent2);margin:36px 0 14px;
}

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

.sec--contrast{background:var(--sand);color:var(--ink);}
.sec--contrast h2,.sec--contrast h3{color:var(--ink);}
.sec--contrast .num{color:#6d6152;}
.sec--contrast .caption{color:#6d6152;}
.sec--contrast .rule{border-top-color:rgba(21,27,43,.28);}
.sec--contrast a{color:#9a5f22;}
.sec--contrast ul.plain li::before{background:#9a5f22;}
.sec--contrast .detail-figure{grid-column:3 / 8;margin:0;}
.sec--contrast .detail-figure img{width:100%;}
.sec--contrast .contrast-text{grid-column:8 / 13;}
.sec--contrast .contrast-text h2{margin-bottom:24px;}

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

.contact-block{grid-column:3 / 10;}
.contact-block p{margin-bottom:.9em;}
.mail{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.6rem);}

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

.page-head{padding-top:72px;padding-bottom:44px;}
.page-head h1{grid-column:1 / 10;}
.page-head .kicker{grid-column:1 / 10;font-size:13px;color:var(--accent2);margin:0 0 18px;letter-spacing:.08em;}
.page-body{padding-bottom:var(--rhythm);}
.page-body .rule{grid-column:1 / 13;border:0;border-top:1px solid rgba(201,138,76,.4);margin:0 0 44px;}
.prose{grid-column:3 / 11;}
.prose h2{margin:52px 0 20px;}
.prose h2:first-child{margin-top:0;}

/* About: columna de texto a la derecha, etiquetas a la izquierda */
.about-labels{grid-column:1 / 4;margin:0;padding:0;list-style:none;}
.about-labels li{
  border-top:1px solid rgba(201,138,76,.4);
  padding:14px 0;font-size:13px;line-height:1.5;color:var(--muted);
}
.about-labels li:last-child{border-bottom:1px solid rgba(201,138,76,.4);}
.about-labels b{display:block;font-weight:400;color:var(--accent2);}
.about-text{grid-column:6 / 13;}
.about-text h2{margin:48px 0 20px;}
.about-text h2:first-child{margin-top:0;}

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

.site-foot{background:var(--sand);color:var(--ink);padding-top:64px;padding-bottom:64px;}
.foot-grid{display:grid;grid-template-columns:5fr 4fr 3fr;column-gap:var(--gap);row-gap:36px;align-items:start;}
.foot-name{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;margin:0 0 14px;}
.foot-note{font-size:13px;line-height:1.6;color:#6d6152;margin:0;max-width:34ch;}
.site-foot nav ul{list-style:none;margin:0;padding:0;}
.site-foot nav li{margin-bottom:10px;}
.site-foot a{color:#9a5f22;}
.site-foot .foot-mail{font-size:15px;line-height:1.7;}
.site-foot .foot-mail span{display:block;font-size:13px;color:#6d6152;margin-bottom:6px;}
.site-foot :focus-visible{outline-color:#9a5f22;}

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

@media (max-width:1000px){
  :root{--rhythm:72px;--gap:22px;}
  .hero h1{grid-column:1 / 13;}
  .hero-lede,.hero-meta{grid-column:1 / 7;}
  .hero-figure{grid-column:8 / 13;grid-row:auto;margin-top:48px;}
  .body-narrow,.body-wide,.contact-block{grid-column:3 / 13;}
  .prose,.page-head h1,.page-head .kicker{grid-column:1 / 13;}
  .sec--contrast .detail-figure{grid-column:1 / 7;}
  .sec--contrast .contrast-text{grid-column:7 / 13;}
  .about-labels{grid-column:1 / 13;}
  .about-text{grid-column:1 / 13;margin-top:40px;}
}

@media (max-width:760px){
  :root{--rhythm:56px;--gap:18px;}
  body{font-size:16.5px;}
  .hero{padding-top:48px;}
  .hero h1{margin-bottom:28px;}
  .hero-lede,.hero-meta,.hero-figure{grid-column:1 / 13;}
  .hero-figure{margin-top:40px;margin-left:0;max-width:420px;}
  .num{grid-column:1 / 13;margin:0 0 10px;}
  .body-narrow,.body-wide,.contact-block,.list-two,.list-title{grid-column:1 / 13;}
  .list-two{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .list-two > * + *{margin-top:1.6em;}
  .sec--contrast .detail-figure,
  .sec--contrast .contrast-text{grid-column:1 / 13;}
  .sec--contrast .contrast-text{margin-top:36px;}
  .foot-grid{grid-template-columns:minmax(0,1fr);}
  .site-nav ul{gap:6px 20px;}
}