/* Trervaso — hoja de estilo única para todas las páginas */

:root {
  --bg: #e8e6e1;
  --bg-alt: #d3d0c9;
  --dark: #2a2a28;
  --ink: #17171a;
  --muted: #6a6862;
  --rust: #8c4a2f;
  --steel: #55707a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pad-y: 88px;
  --pad-y-s: 52px;
}

* { 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(--rust); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

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

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

/* ---------- capas del encabezado ---------- */

.layer-nav { background: var(--bg-alt); padding: 22px 0; }
.layer-title { background: var(--bg); padding: 96px 0 40px; min-height: 42vh; display: flex; align-items: flex-end; }
.layer-intro { background: var(--bg-alt); padding: var(--pad-y) 0 var(--pad-y-s); }

.layer-title .grid,
.layer-intro .grid,
.layer-nav .grid { width: 100%; }

.brand {
  grid-column: 1 / 5;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  align-self: center;
}
.brand:hover { color: var(--rust); }

nav.top {
  grid-column: 5 / 13;
  align-self: center;
}
nav.top ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: flex-end;
}
nav.top a {
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
nav.top a:hover { border-bottom-color: var(--rust); color: var(--rust); }
nav.top a[aria-current="page"] { border-bottom-color: var(--rust); }

h1 {
  grid-column: 1 / 10;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 62px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

.intro-text { grid-column: 1 / 7; }
.intro-text p { margin: 0 0 18px; }
.intro-text p:last-child { margin-bottom: 0; }

.topic-list {
  grid-column: 8 / 13;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.7;
}
.topic-list li {
  padding: 10px 0 10px 34px;
  position: relative;
  border-top: 1px solid rgba(85, 112, 122, 0.35);
}
.topic-list li:last-child { border-bottom: 1px solid rgba(85, 112, 122, 0.35); }
.topic-list .n {
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--steel);
}

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

.band { padding: var(--pad-y) 0; }
.band.tone-a { background: var(--bg); }
.band.tone-b { background: var(--bg-alt); }
.band.tone-dark { background: var(--dark); color: var(--bg); }

.band.tight { padding: var(--pad-y-s) 0; }

.col { grid-column: 1 / 7; }
.step-1 .col { grid-column: 2 / 8; }
.step-2 .col { grid-column: 3 / 9; }
.step-3 .col { grid-column: 4 / 10; }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 33px;
  line-height: 1.22;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  margin: 34px 0 10px;
}

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

.band.tone-dark h2,
.band.tone-dark h3 { color: var(--bg); }
.band.tone-dark a { color: #d9a68c; }

.lead { font-size: 19px; }

.marks { padding-left: 0; margin: 0 0 18px; list-style: none; }
.marks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 2px;
  background: var(--rust);
}

ol.steps { margin: 0 0 18px; padding-left: 22px; }
ol.steps li { margin-bottom: 10px; padding-left: 6px; }
ol.steps li::marker { color: var(--steel); font-family: var(--serif); }

.note {
  font-size: 15px;
  color: var(--muted);
  border-top: 1px solid rgba(106, 104, 98, 0.4);
  padding-top: 14px;
  margin-top: 26px;
}
.band.tone-dark .note { color: #b3b0a8; border-top-color: rgba(232, 230, 225, 0.25); }

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

.figure-main {
  grid-column: 4 / 13;
  margin: 0;
}
.figure-main img { width: 100%; }

figcaption {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 12px;
  max-width: 46ch;
}

.split-media { grid-column: 2 / 6; margin: 0; }
.split-media img { width: 100%; }
.split-media figcaption { color: #b3b0a8; }
.split-text { grid-column: 7 / 13; }

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

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

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

.site-footer {
  background: var(--dark);
  color: var(--bg);
  padding: 64px 0 56px;
  margin: 0;
}

.footer-name {
  grid-column: 1 / 13;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 11vw, 132px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  color: var(--bg);
}

.foot-col { grid-column: span 4; font-size: 15px; line-height: 1.75; }
.foot-col::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--steel);
  margin-bottom: 16px;
}
.foot-col h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: #b3b0a8;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 6px; }
.foot-col a { color: var(--bg); text-decoration: none; border-bottom: 1px solid rgba(232, 230, 225, 0.4); }
.foot-col a:hover { color: #d9a68c; border-bottom-color: #d9a68c; }
.foot-col p { color: #b3b0a8; margin: 0; }

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

.page-head { background: var(--bg); padding: 88px 0 44px; }
.page-head h1 { grid-column: 1 / 10; font-size: 46px; }
.page-head .kicker {
  grid-column: 1 / 10;
  font-size: 12px;
  color: var(--steel);
  margin: 0 0 14px;
}

.doc-meta { font-size: 15px; color: var(--muted); }

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

@media (max-width: 1000px) {
  h1 { font-size: 48px; grid-column: 1 / 12; }
  .page-head h1 { font-size: 38px; grid-column: 1 / 13; }
  h2 { font-size: 28px; }
  .col,
  .step-1 .col,
  .step-2 .col,
  .step-3 .col { grid-column: 1 / 10; }
  .intro-text { grid-column: 1 / 9; }
  .topic-list { grid-column: 1 / 9; margin-top: 34px; }
  .figure-main { grid-column: 2 / 13; }
  .split-media { grid-column: 1 / 7; }
  .split-text { grid-column: 7 / 13; }
  .foot-col { grid-column: span 6; margin-bottom: 32px; }
}

@media (max-width: 720px) {
  :root { --pad-y: 56px; --pad-y-s: 40px; }
  body { font-size: 16px; line-height: 1.75; }
  .grid { padding: 0 20px; column-gap: 0; }
  .brand { grid-column: 1 / 13; }
  nav.top { grid-column: 1 / 13; margin-top: 14px; }
  nav.top ul { justify-content: flex-start; gap: 18px; }
  .layer-title { padding: 56px 0 32px; min-height: 0; }
  h1 { font-size: 34px; grid-column: 1 / 13; }
  .page-head { padding: 48px 0 32px; }
  .page-head h1 { font-size: 30px; }
  .page-head .kicker { grid-column: 1 / 13; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  .lead { font-size: 17px; }
  .col,
  .step-1 .col,
  .step-2 .col,
  .step-3 .col,
  .intro-text,
  .topic-list,
  .figure-main,
  .split-media,
  .split-text { grid-column: 1 / 13; }
  .split-text { margin-top: 32px; }
  .contact-line { font-size: 20px; word-break: break-word; }
  .site-footer { padding: 48px 0 40px; }
  .footer-name { grid-column: 1 / 13; margin-bottom: 36px; }
  .foot-col { grid-column: 1 / 13; margin-bottom: 30px; }
  .foot-col:last-child { margin-bottom: 0; }
}