/* Gardugita — hoja de estilos común
   Composición «margen pautado»: campo izquierdo vacío, línea vertical,
   iniciales y guías horizontales sobre retícula de 12 columnas. */

:root{
  --bg:#14161a;
  --bg-alt:#1d2026;
  --bg-light:#e4e4e1;
  --ink:#d8dbdf;
  --ink-soft:#8a9098;
  --ink-dark:#14161a;
  --ink-dark-soft:#4c5158;
  --amber:#e8a33d;
  --amber-dark:#9a6612;
  --teal:#4fb79a;
  --rule:rgba(216,219,223,.20);
  --rule-dark:rgba(20,22,26,.22);
  --rhythm:72px;
  --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(--ink);
  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(--amber);text-decoration:none;border-bottom:1px solid rgba(232,163,61,.45)}
a:hover{border-bottom-color:var(--amber)}
a:focus-visible,
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- retícula ---------- */

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(18px,5vw,44px);
}

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

.grid::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(25% - 14px);
  width:1px;
  background:rgba(232,163,61,.55);
}

.band{padding:var(--rhythm) 0}
.band--alt{background:var(--bg-alt)}
.band--light{background:var(--bg-light);color:var(--ink-dark)}
.band--light .grid::before{background:rgba(154,102,18,.6)}

/* posiciones base dentro de la retícula */
.col-text{grid-column:4 / 10}
.col-wide{grid-column:4 / 12}
.margin-note{grid-column:1 / 4;text-align:right;padding-right:24px}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}

h1{
  font-size:clamp(2.3rem,5.6vw,4rem);
  line-height:1.05;
  margin:0;
  position:relative;
}

h2{
  font-size:clamp(1.45rem,2.7vw,2.05rem);
  line-height:1.15;
  margin:0 0 18px;
}

h3{
  font-size:1.12rem;
  line-height:1.3;
  margin:calc(var(--rhythm)/3) 0 6px;
  color:var(--ink);
}
.band--light h3{color:var(--ink-dark)}

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

.lead{font-size:1.06rem;color:var(--ink)}

.caption{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}
.band--light .caption{color:var(--ink-dark-soft)}

.sec-num{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--teal);
  letter-spacing:.06em;
}

.initial{
  font-family:var(--serif);
  font-size:clamp(3rem,7vw,5.2rem);
  line-height:1;
  color:var(--amber);
}

/* inicial del H1 desplazada al campo izquierdo */
.drop{
  position:absolute;
  right:100%;
  top:-.03em;
  margin-right:26px;
  font-size:2.02em;
  line-height:.95;
  color:var(--amber);
}

/* guías horizontales */
.guide{
  border:0;
  border-top:1px solid var(--rule);
  margin:22px 0;
}
.band--light .guide{border-top-color:var(--rule-dark)}

.head-guide{margin:18px 0 26px}

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

.site-header{border-bottom:1px solid var(--rule);padding:26px 0}
.site-header .grid::before{top:-26px;bottom:-26px}

.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--ink);
  border:0;
  padding-right:24px;
  text-align:right;
  align-self:center;
}
.brand:hover{color:var(--amber)}

.site-nav{grid-column:4 / 13;align-self:center}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  font-size:15px;
}
.site-nav a{
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--amber)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber)}

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

.hero{padding:calc(var(--rhythm)*1.05) 0 calc(var(--rhythm)/1.6)}
.hero h1{grid-column:4 / 12}
.hero .hero-body{grid-column:4 / 10;margin-top:26px}
.hero .hero-body p{margin:22px 0}

.hero-meta{
  grid-column:1 / 4;
  text-align:right;
  padding-right:24px;
  margin-top:34px;
  font-size:13px;
  color:var(--ink-soft);
}

/* ---------- imagen principal ---------- */

.figure-main{padding-bottom:var(--rhythm)}
.figure-main figure{
  grid-column:1 / 13;
  margin:0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:28px;
}
.figure-main img{grid-column:6 / 13;width:100%}
.figure-main figcaption{
  grid-column:1 / 4;
  text-align:right;
  padding-right:24px;
  align-self:end;
}

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

.sec-mark{
  grid-column:1 / 4;
  text-align:right;
  padding-right:24px;
  padding-top:6px;
}
.sec-body{grid-column:4 / 12}
.sec-body .narrow{max-width:66ch}

ul.list,ol.list{
  margin:24px 0;
  padding:0 0 0 22px;
  max-width:74ch;
}
ul.list{list-style:none;padding-left:0}
ul.list li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
}
ul.list li::before{
  content:"—";
  position:absolute;
  left:0;
  top:0;
  color:var(--amber);
}
.band--light ul.list li::before{color:var(--amber-dark)}
ol.list li{margin-bottom:12px;padding-left:6px}
ol.list li::marker{color:var(--teal);font-family:var(--serif)}

.stack > * + *{margin-top:calc(var(--rhythm)/3)}

/* bloque de definición para materiales */
.def{
  border-top:1px solid var(--rule);
  padding-top:16px;
  margin-top:calc(var(--rhythm)/2.4);
}
.band--light .def{border-top-color:var(--rule-dark)}
.def h3{margin-top:0}
.def .tag{
  font-size:13px;
  color:var(--teal);
  display:block;
  margin-bottom:4px;
}

/* ---------- sección contrastada con imagen de detalle ---------- */

.grid--plain::before{display:none}
.detail-media{grid-column:2 / 6;grid-row:1;margin:0}
.detail-media img{width:100%}
.detail-media figcaption{margin-top:12px}
.detail-text{grid-column:7 / 13;grid-row:1}
.detail-head{grid-column:7 / 13;grid-row:1;align-self:start}

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

.contact-line{
  font-family:var(--serif);
  font-size:1.25rem;
  margin-top:18px;
}

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

.site-footer{
  background:var(--bg-alt);
  border-top:1px solid var(--rule);
  padding:calc(var(--rhythm)/1.4) 0;
}
.site-footer .grid::before{background:rgba(79,183,154,.5)}

.foot-name{
  grid-column:1 / 4;
  text-align:right;
  padding-right:24px;
  font-family:var(--serif);
  font-size:1.2rem;
}
.foot-nav{grid-column:4 / 10}
.foot-nav ul{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  font-size:15px;
}
.foot-nav li + li::before{
  content:"/";
  color:var(--amber);
  margin:0 12px;
}
.foot-nav a{color:var(--ink-soft);border-bottom:1px solid transparent}
.foot-nav a:hover{color:var(--ink);border-bottom-color:var(--amber)}
.foot-note{font-size:13px;color:var(--ink-soft);margin:0}
.foot-mail{grid-column:10 / 13;font-size:15px}
.foot-mail p{margin:0 0 6px}

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

.page-head{padding:calc(var(--rhythm)*.9) 0 calc(var(--rhythm)/2.2)}
.page-head h1{grid-column:4 / 12;font-size:clamp(2rem,4.4vw,3.1rem)}
.page-head .page-intro{grid-column:4 / 10;margin-top:24px}
.page-head .kicker{
  grid-column:1 / 4;
  text-align:right;
  padding-right:24px;
  font-size:13px;
  color:var(--ink-soft);
  padding-top:10px;
}

/* bloques de About abiertos por inicial en lugar de titular */
.entry{padding-bottom:calc(var(--rhythm)/1.6)}
.entry .entry-initial{
  grid-column:1 / 4;
  text-align:right;
  padding-right:24px;
}
.entry .entry-body{grid-column:4 / 10}
.entry .entry-body > h2{
  font-size:1.35rem;
  margin-bottom:16px;
}
.entry .entry-initial .initial{display:block;line-height:.9}

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

@media (max-width:1000px){
  .grid{column-gap:20px}
  .col-text,.hero .hero-body,.page-head .page-intro{grid-column:4 / 11}
  .sec-body,.hero h1,.page-head h1,.col-wide{grid-column:4 / 13}
  .figure-main img{grid-column:5 / 13}
  .detail-media{grid-column:1 / 6}
  .figure-main figure{column-gap:20px}
  .detail-text,.detail-head{grid-column:7 / 13}
  .entry .entry-body{grid-column:4 / 13}
  .foot-nav{grid-column:4 / 13}
  .foot-mail{grid-column:4 / 13;margin-top:14px}
}

@media (max-width:760px){
  :root{--rhythm:44px}
  body{font-size:16px;line-height:1.75}

  .grid{
    grid-template-columns:1fr;
    column-gap:0;
    padding-left:20px;
  }
  .grid::before{left:0}

  .grid > *{grid-column:1 / -1 !important;grid-row:auto !important}

  .margin-note,.sec-mark,.hero-meta,.brand,
  .figure-main figcaption,.entry .entry-initial,
  .foot-name,.page-head .kicker{
    text-align:left;
    padding-right:0;
  }

  .site-header{padding:18px 0}
  .site-header .grid::before{top:-18px;bottom:-18px}
  .brand{margin-bottom:12px;align-self:start}
  .site-nav ul{gap:4px 18px;font-size:14px}

  h1{font-size:clamp(1.95rem,8vw,2.5rem)}
  .drop{
    position:static;
    margin:0;
    font-size:1em;
    color:inherit;
  }
  .hero{padding-top:calc(var(--rhythm)*1.1)}
  .hero-meta{margin-top:22px}

  .sec-mark{padding-top:0;margin-bottom:10px}
  .initial,.entry .entry-initial .initial{font-size:2.4rem}

  .figure-main figure{grid-template-columns:1fr;column-gap:0}
  .figure-main img,.figure-main figcaption{grid-column:1 / -1}
  .figure-main figcaption{margin-top:12px}
  .detail-media{margin-bottom:24px}

  .foot-name{margin-bottom:14px}
  .foot-mail{margin-top:12px}
  .foot-nav ul{flex-direction:column}
  .foot-nav li + li::before{display:none}
  .foot-nav li{padding:3px 0}
}