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

:root{
  --bg:#f7f2e2;
  --bg-alt:#ede5cd;
  --dark:#17191a;
  --ink:#1b1a16;
  --muted:#756f5c;
  --accent:#1f7d78;
  --accent2:#a8721c;
  --pad-y:72px;
  --pad-x:44px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
  margin:0 0 .55em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.04}
h2{font-size:clamp(1.42rem,2.3vw,1.95rem);line-height:1.2}
h3{font-size:1.06rem;line-height:1.4;margin-bottom:.45em}

p{margin:0 0 1.15em;max-width:66ch}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}

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

ul,ol{margin:0 0 1.15em;padding-left:1.15em;max-width:62ch}
li{margin-bottom:.5em}
li::marker{color:var(--accent);font-weight:700}

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

.cap{
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0;
  max-width:40ch;
}
.num{
  font-family:Georgia,'Times New Roman',serif;
  font-size:12px;
  letter-spacing:.22em;
  color:var(--accent2);
  display:block;
  margin-bottom:14px;
}
.rule{border:0;border-top:2px solid var(--accent2);margin:20px 0;max-width:120px}

/* ---------- Cabecera ---------- */

.top{
  background:var(--bg);
  border-bottom:6px solid var(--dark);
  padding:16px var(--pad-x);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px 28px;
  justify-content:space-between;
}
.brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.32rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--accent)}
.top nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;max-width:none}
.top nav li{margin:0}
.top nav a{
  font-size:14px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.top nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* ---------- Rejilla de secciones ---------- */

.sec{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--dark);
  border-top:6px solid var(--dark);
}
.cell{padding:var(--pad-y) var(--pad-x);min-width:0}
.b1{background:var(--bg)}
.b2{background:var(--bg-alt)}
.bd{background:var(--dark);color:var(--bg)}
.bd h2,.bd h3{color:var(--bg)}
.bd .cap{color:#bdb59b}
.bd a{color:#7fc9c4}
.bd a:hover{color:var(--bg)}
.bd li::marker{color:#7fc9c4}

.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c1{grid-column:span 1}
.full{grid-column:1 / -1}

.thin{padding-top:40px;padding-bottom:40px}

/* ---------- Hero ---------- */

.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto auto auto;
  gap:5px;
  background:var(--dark);
  border-bottom:6px solid var(--dark);
}
.hero-main{
  grid-column:span 7;
  grid-row:1 / 3;
  background:var(--bg);
  padding:var(--pad-y) var(--pad-x);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-main h1 .l{display:block}
.hero-intro{
  grid-column:span 5;
  grid-row:1;
  background:var(--accent);
  color:var(--bg);
  padding:56px var(--pad-x);
}
.hero-intro p{margin:0;max-width:44ch}
.hero-intro .num{color:#f2e3c2}
.hero-field{
  grid-column:span 5;
  grid-row:2;
  background:var(--bg-alt);
  padding:28px var(--pad-x);
  display:flex;
  align-items:flex-end;
  min-height:132px;
}
.hero-nav{
  grid-column:1 / -1;
  grid-row:3;
  background:var(--bg);
  padding:18px var(--pad-x);
}
.hero-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;padding:0;max-width:none}
.hero-nav li{margin:0}
.hero-nav a{
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid var(--accent2);
  padding-bottom:2px;
}
.hero-nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Cabecera de páginas interiores */
.pagehead{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--dark);
  border-bottom:6px solid var(--dark);
}
.pagehead .lead{grid-column:span 8;background:var(--bg);padding:var(--pad-y) var(--pad-x)}
.pagehead .side{grid-column:span 4;background:var(--accent);color:var(--bg);padding:var(--pad-y) var(--pad-x)}
.pagehead .side p{margin:0;max-width:36ch}
.pagehead .side .num{color:#f2e3c2}

/* ---------- Figuras ---------- */

figure{margin:0}
figure img{display:block;width:100%;height:auto;border:5px solid var(--dark)}
.fig-main img{aspect-ratio:4 / 3;object-fit:cover}
.fig-detail img{aspect-ratio:4 / 5;object-fit:cover}
figcaption{margin-top:14px}

.side-note{display:flex;flex-direction:column;justify-content:center}

/* ---------- Pie ---------- */

.foot{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--dark);
  border-top:6px solid var(--dark);
}
.foot .cell{padding:52px var(--pad-x)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.4em}
.foot a{text-decoration:none;border-bottom:2px solid transparent}
.foot a:hover{border-bottom-color:currentColor}
.foot .name{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 10px;
}
.foot p{font-size:15px}

/* ---------- Adaptación ---------- */

@media (max-width:1020px){
  :root{--pad-y:56px;--pad-x:32px}
  .hero-main{grid-column:1 / -1;grid-row:auto}
  .hero-intro{grid-column:1 / -1;grid-row:auto}
  .hero-field{grid-column:1 / -1;grid-row:auto;min-height:96px}
  .hero-nav{grid-row:auto}
  .sec > *,.pagehead > *,.foot > *{grid-column:1 / -1}
  .c1{display:none}
}

@media (max-width:620px){
  :root{--pad-y:40px;--pad-x:20px}
  body{font-size:16px;line-height:1.75}
  .top{padding:14px 20px}
  .top nav ul{gap:6px 16px}
  .hero-nav ul{gap:6px 16px}
  .foot .cell{padding:36px 20px}
}