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

:root {
  --bg: #1d1815;
  --bg-alt: #251f1a;
  --light: #f1ebdf;
  --tx: #eae4d8;
  --tx2: #9a8f82;
  --acc: #c08a45;
  --acc2: #728a63;
  --line: #0d0a08;
  --pad-y: 72px;
  --pad-x: 44px;
}

* { box-sizing: border-box; }

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

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

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

a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--tx); }

a:focus-visible,
nav a:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
  color: var(--tx);
}

/* ---------- retícula de 12 columnas con perinolas de línea ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  background: var(--line);
}

.cell {
  background: var(--bg);
  padding: var(--pad-y) var(--pad-x);
  min-width: 0;
}

.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c5 { grid-column: span 5; }
.c7 { grid-column: span 7; }
.c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }

.f-alt { background: var(--bg-alt); }
.f-acc { background: var(--acc); color: #241a0d; }
.f-acc2 { background: var(--acc2); color: #14190f; }
.f-light { background: var(--light); color: var(--bg); }

.f-acc a, .f-acc2 a { color: #1d1815; }
.f-light a { color: #8a5f24; }
.f-light .lead, .f-light p { color: var(--bg); }

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

.site-head {
  border-bottom: 6px solid var(--line);
  background: var(--bg-alt);
}

.site-head .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 32px;
  padding: 22px var(--pad-x);
}

.brand {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tx);
  text-decoration: none;
}
.brand:hover { color: var(--acc); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-nav a {
  color: var(--tx2);
  text-decoration: none;
  font-size: 15px;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--tx); border-bottom-color: var(--acc); }
.site-nav a[aria-current="page"] { color: var(--tx); border-bottom-color: var(--acc); }

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

.hero { border-bottom: 6px solid var(--line); }

.hero h1 {
  margin: 0;
  font-size: clamp(2.3rem, 6.2vw, 4.3rem);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.hero .h1-cell { padding-top: 88px; padding-bottom: 88px; }

.hero .kicker {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acc2);
  margin: 0 0 26px;
}

.hero-intro p { margin: 0 0 16px; font-size: 18px; }
.hero-intro p:last-child { margin-bottom: 0; }

.hero-band {
  padding: 30px var(--pad-x);
  min-height: 110px;
}

.hero-band .band-note {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}

/* navegación interna del hero */
.jump { padding: 24px var(--pad-x); }
.jump h2 {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acc2);
  margin: 0 0 14px;
  font-weight: 700;
}
.jump ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.jump a { font-size: 15px; color: var(--acc); }

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

section { border-top: 6px solid var(--line); }
.hero + section { border-top: 0; }

h2 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 30px 0 10px;
  letter-spacing: -0.01em;
}

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

.num {
  display: block;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--acc2);
  margin-bottom: 12px;
  font-weight: 700;
}

.f-light .num { color: #4d6141; }
.f-acc .num, .f-acc2 .num { color: #1d1815; }

.lead { font-size: 19px; }

ul.list, ol.list { margin: 0 0 18px; padding-left: 22px; }
ul.list li, ol.list li { margin-bottom: 10px; }
ul.list::marker, ol.list li::marker { color: var(--acc); }
ul.list li::marker { color: var(--acc); }

.sidenote {
  font-size: 15px;
  color: var(--tx2);
  border-left: 3px solid var(--acc2);
  padding-left: 16px;
  margin-top: 26px;
}
.f-light .sidenote { color: #5c5346; }

/* ---------- imágenes ---------- */

figure { margin: 0; }

.fig-main .frame { border: 5px solid var(--line); }
.fig-main img { width: 100%; }

.cap {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx2);
  margin: 0;
}
.f-light .cap { color: #6a6052; }

.fig-detail img { width: 100%; border: 5px solid var(--line); }
.fig-detail .cap { margin-top: 12px; }

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

.contact-mail {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: break-word;
}

/* ---------- panel vertical (about) ---------- */

.panel { border-top: 6px solid var(--line); }
.panel .cell { padding-top: 78px; padding-bottom: 78px; }

/* ---------- páginas legales ---------- */

.doc h2 { margin-top: 44px; }
.doc h2:first-of-type { margin-top: 0; }

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

.site-foot { border-top: 6px solid var(--line); }
.site-foot .cell { padding: 52px var(--pad-x); }
.site-foot .brandline { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 8px; }
.site-foot a { font-size: 15px; }
.site-foot .fine { font-size: 13px; line-height: 1.6; color: var(--tx2); margin-top: 12px; }
.f-light .fine, .site-foot .f-light .fine { color: #5c5346; }
.f-acc2 .fine { color: #1b2114; }

/* ---------- adaptación a pantallas estrechas ---------- */

@media (max-width: 1000px) {
  :root { --pad-y: 56px; --pad-x: 32px; }
  .c3, .c4, .c5, .c7, .c8 { grid-column: span 6; }
  .hero .h1-cell { grid-column: span 12; padding-top: 64px; padding-bottom: 64px; }
  .hero-intro { grid-column: span 12; }
  .hero-band { grid-column: span 12; }
  .jump { grid-column: span 12; }
}

@media (max-width: 680px) {
  :root { --pad-y: 44px; --pad-x: 22px; }
  body { font-size: 16px; }
  .c3, .c4, .c5, .c7, .c8, .c12 { grid-column: span 12; }
  .site-head .inner { padding: 18px 22px; }
  .site-nav ul { gap: 8px 18px; }
  .lead { font-size: 17px; }
  .hero-intro p { font-size: 17px; }
}

/* ---------- colocación explícita de las celdas del hero ---------- */

.hero .h1-cell { grid-column: 1 / 8; grid-row: 1 / 3; }
.hero .hero-intro { grid-column: 8 / 13; grid-row: 1; }
.hero .hero-band { grid-column: 8 / 13; grid-row: 2; }
.hero .jump { grid-column: 1 / 13; grid-row: 3; }

@media (max-width: 1000px) {
  .hero .h1-cell,
  .hero .hero-intro,
  .hero .hero-band,
  .hero .jump { grid-column: 1 / 13; grid-row: auto; }
}

main > .panel:first-child { border-top: 0; }