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

:root {
  --fondo: #eef0f2;
  --fondo-alt: #dfe3e7;
  --fondo-oscuro: #1b2733;
  --tinta: #151a20;
  --tinta-suave: #636d78;
  --tinta-clara: #eef0f2;
  --indigo: #2c4a7c;
  --cobre: #a35a2a;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ritmo: 76px;
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ---------- rejilla de 12 columnas ---------- */

.reja {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.col-texto  { grid-column: 2 / span 6; }
.col-ancha  { grid-column: 2 / span 8; }
.col-plena  { grid-column: 2 / span 10; }

/* ---------- corchete / lomo ---------- */

.lomo {
  grid-column: 1 / span 1;
  position: relative;
  padding-top: 10px;
}

.lomo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--indigo);
  opacity: .55;
}

.costura {
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: calc(100% - 24px);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--cobre) 0,
    var(--cobre) 2px,
    transparent 2px,
    transparent 16px
  );
  opacity: .8;
}

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

.cabecera {
  border-bottom: 1px solid rgba(21, 26, 32, .18);
  padding: 22px 0 20px;
}

.cabecera .reja { align-items: baseline; row-gap: 12px; }

.marca {
  grid-column: 1 / span 4;
  font-size: 21px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}

.marca a { color: var(--tinta); text-decoration: none; }
.marca a:hover { color: var(--indigo); }

.nav-sitio {
  grid-column: 5 / span 8;
  justify-self: end;
}

.nav-sitio ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .04em;
}

.nav-sitio a {
  color: var(--tinta-suave);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.nav-sitio a:hover,
.nav-sitio a[aria-current="page"] {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

/* ---------- portada ---------- */

.portada { padding: calc(var(--ritmo) * .9) 0 var(--ritmo); }

.portada h1 {
  grid-column: 2 / span 9;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.12;
  font-weight: normal;
  margin: 0 0 26px;
  letter-spacing: -.01em;
}

.linea-doble {
  grid-column: 2 / span 9;
  border: 0;
  border-top: 1px solid var(--tinta);
  height: 4px;
  border-bottom: 1px solid rgba(21, 26, 32, .3);
  margin: 0 0 26px;
}

.entradilla {
  grid-column: 2 / span 8;
  font-size: 21px;
  line-height: 1.6;
  color: var(--tinta);
  margin: 0;
}

.entradilla + .entradilla { margin-top: 18px; }

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

.seccion { padding: var(--ritmo) 0; }
.seccion-alt { background: var(--fondo-alt); }

.folio {
  grid-column: 1 / span 1;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cobre);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(163, 90, 42, .45);
  margin-bottom: 26px;
  align-self: start;
}

.seccion h2 {
  grid-column: 2 / span 8;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: normal;
  line-height: 1.25;
  margin: 0 0 22px;
}

.seccion h3 {
  grid-column: 2 / span 6;
  font-style: italic;
  font-size: 21px;
  font-weight: normal;
  margin: 34px 0 12px;
}

.seccion p,
.seccion ul,
.seccion ol,
.seccion dl {
  grid-column: 2 / span 6;
  margin: 0 0 20px;
}

.seccion .destacado {
  grid-column: 2 / span 8;
  font-size: 20px;
}

.seccion ul, .seccion ol { padding-left: 22px; }
.seccion li { margin-bottom: 9px; }
.seccion li::marker { color: var(--indigo); }

dt { font-style: italic; color: var(--indigo); margin-top: 14px; }
dd { margin: 4px 0 0; }

a { color: var(--indigo); }
a:hover { color: var(--cobre); }

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

.seccion-alt :focus-visible { outline-color: var(--cobre); }

/* ---------- separador tipográfico ---------- */

.filete {
  grid-column: 2 / span 10;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 0;
  list-style: none;
  padding: 0;
}

.filete span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--cobre);
}

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

.lamina {
  grid-column: 6 / span 7;
  margin: 0;
}

.lamina img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(21, 26, 32, .25);
}

.lamina figcaption,
.detalle figcaption {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin-top: 10px;
  text-align: left;
  max-width: 46ch;
}

/* ---------- sección de contraste ---------- */

.seccion-oscura {
  background: var(--fondo-oscuro);
  color: var(--tinta-clara);
  padding: var(--ritmo) 0;
}

.seccion-oscura .folio {
  color: #c98a5c;
  border-bottom-color: rgba(201, 138, 92, .4);
}

.seccion-oscura h2 { grid-column: 2 / span 9; }
.seccion-oscura a { color: #9fb6dd; }
.seccion-oscura li::marker { color: #9fb6dd; }
.seccion-oscura .lomo::before { background: #9fb6dd; opacity: .45; }
.seccion-oscura .costura { background-image: repeating-linear-gradient(to bottom, #c98a5c 0, #c98a5c 2px, transparent 2px, transparent 16px); }

.detalle {
  grid-column: 2 / span 4;
  margin: 0;
  align-self: start;
}

.detalle img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(238, 240, 242, .22);
}

.detalle figcaption { color: #a8b3bf; }

.bloque-oscuro {
  grid-column: 7 / span 6;
}

.bloque-oscuro p,
.bloque-oscuro ul {
  grid-column: auto;
  margin: 0 0 18px;
}

.bloque-oscuro ul { padding-left: 22px; }
.bloque-oscuro li { margin-bottom: 9px; }
.bloque-oscuro h3 {
  grid-column: auto;
  font-style: italic;
  font-weight: normal;
  font-size: 21px;
  margin: 28px 0 10px;
}

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

.pagina { padding: calc(var(--ritmo) * .8) 0 var(--ritmo); }

.pagina h1 {
  grid-column: 2 / span 9;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: normal;
  line-height: 1.18;
  margin: 0 0 22px;
}

.pagina h2 {
  grid-column: 2 / span 8;
  font-size: 25px;
  font-weight: normal;
  margin: 40px 0 14px;
}

.pagina h3 {
  grid-column: 2 / span 6;
  font-style: italic;
  font-size: 20px;
  font-weight: normal;
  margin: 28px 0 10px;
}

.pagina p,
.pagina ul,
.pagina ol {
  grid-column: 2 / span 6;
  margin: 0 0 20px;
}

.pagina ul, .pagina ol { padding-left: 22px; }
.pagina li { margin-bottom: 9px; }
.pagina li::marker { color: var(--indigo); }

.pagina .entradilla {
  grid-column: 2 / span 8;
  font-size: 20px;
}

.capitular::first-letter {
  float: left;
  font-size: 62px;
  line-height: .82;
  padding: 6px 12px 0 0;
  color: var(--indigo);
}

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

.pie {
  background: var(--fondo-alt);
  border-top: 1px solid rgba(21, 26, 32, .18);
  padding: 52px 0 46px;
  text-align: center;
}

.pie-interior {
  grid-column: 2 / span 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pie-marca {
  font-size: 19px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
}

.pie nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
}

.pie nav li { position: relative; padding: 0 14px; }

.pie nav li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: rgba(21, 26, 32, .28);
}

.pie nav a { color: var(--tinta-suave); text-decoration: none; }
.pie nav a:hover { color: var(--indigo); }

.pie-correo { margin: 0; font-size: 17px; }

.pie-nota {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin: 0;
  max-width: 58ch;
}

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

@media (max-width: 900px) {
  :root { --ritmo: 56px; }

  .reja { column-gap: 18px; padding: 0 22px; }

  .marca { grid-column: 1 / span 12; }
  .nav-sitio { grid-column: 1 / span 12; justify-self: start; }

  .portada h1,
  .linea-doble,
  .entradilla,
  .seccion h2,
  .seccion h3,
  .seccion p,
  .seccion ul,
  .seccion ol,
  .seccion dl,
  .seccion .destacado,
  .seccion-oscura h2,
  .pagina h1,
  .pagina h2,
  .pagina h3,
  .pagina p,
  .pagina ul,
  .pagina ol,
  .pagina .entradilla,
  .filete,
  .pie-interior { grid-column: 2 / span 11; }

  .lamina { grid-column: 2 / span 11; }
  .detalle { grid-column: 2 / span 6; }
  .bloque-oscuro { grid-column: 2 / span 11; margin-top: 26px; }
}

/* ---------- adaptación a móvil ---------- */

@media (max-width: 620px) {
  :root { --ritmo: 46px; }

  body { font-size: 17px; }

  .reja {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 0 18px;
  }

  .lomo { display: none; }

  .marca,
  .nav-sitio,
  .portada h1,
  .linea-doble,
  .entradilla,
  .folio,
  .seccion h2,
  .seccion h3,
  .seccion p,
  .seccion ul,
  .seccion ol,
  .seccion dl,
  .seccion .destacado,
  .seccion-oscura h2,
  .pagina h1,
  .pagina h2,
  .pagina h3,
  .pagina p,
  .pagina ul,
  .pagina ol,
  .pagina .entradilla,
  .filete,
  .lamina,
  .detalle,
  .bloque-oscuro,
  .pie-interior { grid-column: 1; }

  .folio { margin-bottom: 20px; }

  .entradilla { font-size: 19px; }

  .detalle { max-width: 340px; }

  .capitular::first-letter { font-size: 52px; }

  .nav-sitio ul { gap: 6px 16px; }
}