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

:root {
  --papel: #f7f3ea;
  --papel-alt: #eae4d8;
  --oscuro: #43221f;
  --tinta: #241b16;
  --tinta-suave: #786b5d;
  --burdeos: #8a2c25;
  --oro: #8a6a24;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ritmo: 80px;
}

* { box-sizing: border-box; }

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

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0;
}

h1 {
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(23px, 2.3vw, 29px);
  line-height: 1.15;
  margin-top: 4px;
}

h3 {
  font-size: 20px;
  line-height: 1.25;
  margin: 34px 0 8px;
}

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

a {
  color: var(--burdeos);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
:focus-visible {
  outline: 2px solid var(--burdeos);
  outline-offset: 3px;
}

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

/* ---------- Rejilla ---------- */

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

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

/* ---------- Enlace de salto ---------- */

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--oscuro);
  color: var(--papel);
  padding: 10px 16px;
  z-index: 10;
}

.saltar:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Cabecera y navegación ---------- */

.site-head {
  padding: 26px 0 22px;
  background: var(--papel);
}

.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 32px;
}

.marca {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta);
  text-decoration: none;
}

.marca:hover { color: var(--burdeos); }

.nav-principal ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0;
  padding: 0;
}

.nav-principal a {
  font-size: 15px;
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.nav-principal a:hover,
.nav-principal a[aria-current='page'] {
  color: var(--burdeos);
  border-bottom-color: var(--burdeos);
}

/* ---------- Portada: bloque de entrada ---------- */

.entrada { padding: 44px 0 var(--ritmo); }

.entrada-titulo { grid-column: 1 / 8; }

.entrada-intro {
  grid-column: 9 / 13;
  color: var(--tinta-suave);
  font-size: 17px;
}

.eje {
  position: relative;
  height: 1px;
  background: var(--burdeos);
  margin: 30px 0 128px;
}

.eje span {
  position: absolute;
  top: 0;
  width: 1px;
  background: var(--burdeos);
}

.eje span::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: var(--oro);
}

.eje .e1 { left: 0; height: 58px; }
.eje .e2 { left: 34%; height: 102px; }
.eje .e3 { left: 66%; height: 36px; }

/* ---------- Imagen principal ---------- */

.figura-principal {
  margin: 0;
  padding-bottom: var(--ritmo);
}

.figura-principal .pie { grid-column: 1 / 4; }
.figura-principal img { grid-column: 4 / 13; width: 100%; }

.pie {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin: 0;
}

.pie .num {
  display: block;
  color: var(--oro);
  margin-bottom: 6px;
}

/* ---------- Secciones de texto ---------- */

.sec { padding: var(--ritmo) 0; }
.sec-alt { background: var(--papel-alt); }

.sec-cab {
  grid-column: 1 / 4;
  position: relative;
  padding-left: 22px;
}

.sec-cab .marcador {
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  background: var(--burdeos);
}

.sec-cab .num {
  display: block;
  font-size: 13px;
  color: var(--oro);
  line-height: 1.4;
  margin-bottom: 6px;
}

.sec-cuerpo { grid-column: 5 / 12; }

.lista {
  margin: 8px 0 20px;
  padding-left: 0;
  list-style: none;
}

.lista li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}

.lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  background: var(--burdeos);
}

.lista-orden {
  margin: 8px 0 20px;
  padding-left: 22px;
}

.lista-orden li { margin-bottom: 10px; }
.lista-orden::marker { color: var(--oro); }

/* ---------- Sección contrastada ---------- */

.sec-oscura {
  background: var(--oscuro);
  color: var(--papel);
  padding: var(--ritmo) 0;
}

.sec-oscura h2,
.sec-oscura h3 { color: var(--papel); }

.sec-oscura .pie { color: #cbbdae; }
.sec-oscura .pie .num { color: #c9a75e; }

.sec-oscura a { color: var(--papel); }

.sec-oscura .lista li::before { background: #c9a75e; }

.figura-detalle {
  grid-column: 1 / 6;
  margin: 0;
}

.figura-detalle img { width: 100%; }
.figura-detalle figcaption { margin-top: 12px; }

.detalle-texto { grid-column: 7 / 13; }
.detalle-texto .num {
  display: block;
  font-size: 13px;
  color: #c9a75e;
  line-height: 1.4;
  margin-bottom: 6px;
}
.detalle-texto h2 { margin-bottom: 18px; }

/* ---------- Página About: eje vertical ---------- */

.pagina { padding: 44px 0 var(--ritmo); }

.pagina-titulo { grid-column: 1 / 9; }
.pagina-titulo .eje { margin-bottom: 56px; }

.doble-eje {
  position: relative;
  padding: 0 0 var(--ritmo);
}

.doble-eje::before {
  content: '';
  position: absolute;
  left: calc(25% - 16px);
  top: 0;
  bottom: var(--ritmo);
  width: 1px;
  background: rgba(120, 107, 93, 0.45);
}

.doble-eje .bloque {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  padding: 34px 0;
}

.doble-eje .bloque:first-child { padding-top: 0; }

.doble-eje .bloque > h2 {
  grid-column: 1 / 4;
  position: relative;
  padding-left: 22px;
}

.doble-eje .bloque > h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  background: var(--burdeos);
}

.doble-eje .bloque > div { grid-column: 5 / 12; }

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

.site-foot {
  background: var(--oscuro);
  color: var(--papel);
  padding: 56px 0 44px;
}

.foot-alto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
}

.foot-nombre {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
}

.foot-alto a,
.site-foot a {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-foot a:focus-visible { outline-color: var(--papel); }

.foot-linea {
  height: 1px;
  background: rgba(247, 243, 234, 0.28);
  margin: 22px 0 20px;
}

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

.foot-nav a {
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 243, 234, 0.4);
  padding-bottom: 2px;
}

.foot-nav a:hover { border-bottom-color: var(--papel); }

.foot-nota {
  font-size: 13px;
  line-height: 1.7;
  color: #cbbdae;
  max-width: 62ch;
  margin: 0;
}

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

@media (max-width: 1000px) {
  .entrada-titulo { grid-column: 1 / 9; }
  .entrada-intro { grid-column: 1 / 9; margin-top: 26px; }
  .eje { margin-bottom: 40px; }
  .sec-cab { grid-column: 1 / 5; }
  .sec-cuerpo { grid-column: 5 / 13; }
  .figura-principal .pie { grid-column: 1 / 4; }
  .figura-principal img { grid-column: 4 / 13; }
  .figura-detalle { grid-column: 1 / 7; }
  .detalle-texto { grid-column: 7 / 13; }
.detalle-texto .num {
  display: block;
  font-size: 13px;
  color: #c9a75e;
  line-height: 1.4;
  margin-bottom: 6px;
}
  .pagina-titulo { grid-column: 1 / 11; }
  .doble-eje::before { left: calc(33.33% - 16px); }
  .doble-eje .bloque > h2 { grid-column: 1 / 5; }
  .doble-eje .bloque > div { grid-column: 5 / 13; }
}

@media (max-width: 720px) {
  :root { --ritmo: 48px; }

  body { font-size: 16px; line-height: 1.75; }

  .wrap { padding: 0 22px; }

  .grid,
  .doble-eje .bloque {
    display: block;
  }

  .entrada { padding-top: 28px; }
  .entrada-intro { margin-top: 22px; }

  .eje { margin: 24px 0 34px; }
  .eje .e2 { left: 40%; height: 62px; }
  .eje .e3 { left: 74%; height: 28px; }

  .figura-principal .pie { margin-bottom: 14px; }

  .sec-cab { padding-left: 18px; }
  .sec-cuerpo { margin-top: 18px; }

  .figura-detalle { margin-bottom: 26px; }

  .doble-eje::before { display: none; }
  .doble-eje .bloque { padding: 26px 0; }
  .doble-eje .bloque > h2 { padding-left: 18px; }
  .doble-eje .bloque > div { margin-top: 16px; }

  .foot-nombre { display: block; }
  .foot-alto { display: block; }
  .foot-alto a { display: inline-block; margin-top: 8px; }
}