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

:root {
  --bg: #f5ece6;
  --bg-alt: #eaddd3;
  --bg-deep: #e2d3c8;
  --bg-dark: #25304d;
  --ink: #241c19;
  --ink-soft: #7d6c62;
  --ink-light: #f5ece6;
  --accent: #2f3d63;
  --accent-2: #b05a3c;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gut: 24px;
}

* { 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: 18px;
  line-height: 1.9;
  overflow-x: hidden;
}

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

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

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

.dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--ink-light); }

/* ---------- rejilla ---------- */

.wrap {
  width: min(1280px, 100% - 96px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gut);
}

.band { padding: 88px 0; }
.band-tight { padding: 52px 0; }
.tone-a { background: var(--bg); }
.tone-b { background: var(--bg-alt); }
.tone-c { background: var(--bg-deep); }
.dark { background: var(--bg-dark); color: var(--ink-light); }
.dark h2, .dark h3 { color: var(--ink-light); }
.dark a { color: var(--ink-light); }
.dark .caption { color: #b9b2ab; }

/* bloque de texto: 6 columnas, desplazado según el escalón */
.col { grid-column: 1 / span 6; }
.step-0 .col { grid-column: 1 / span 6; }
.step-1 .col { grid-column: 2 / span 6; }
.step-2 .col { grid-column: 3 / span 6; }
.step-3 .col { grid-column: 4 / span 6; }

.wide { grid-column: 1 / span 9; }

/* ---------- tipografía ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 24px;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.35rem); }
h2 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin-bottom: 20px; }
h3 { font-size: 1.2rem; margin-bottom: 12px; }

p { margin: 0 0 1.55em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.115rem; }

.num {
  font-size: 14px;
  line-height: 1;
  color: var(--accent-2);
  font-family: var(--serif);
  display: block;
  margin-bottom: 18px;
}

.caption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 16px 0 0;
  max-width: 52ch;
}

.caption::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--accent-2);
  vertical-align: middle;
  margin-right: 10px;
}

ul, ol { margin: 0 0 1.55em; padding-left: 22px; max-width: 62ch; }
li { margin-bottom: 10px; }
li::marker { color: var(--accent); }
ol li::marker { font-family: var(--serif); }

.plain { list-style: none; padding-left: 0; }
.plain li {
  padding-left: 20px;
  border-left: 1px solid rgba(176, 90, 60, 0.45);
  margin-bottom: 16px;
}
.dark .plain li { border-left-color: rgba(245, 236, 230, 0.35); }

/* ---------- navegación ---------- */

.topbar { background: var(--bg-alt); }
.topbar .wrap { padding: 20px 0; align-items: baseline; }
.topbar .brand { grid-column: 1 / span 3; }
.topbar nav { grid-column: 4 / span 9; }

.brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: flex-end;
  max-width: none;
}
.menu li { margin: 0; }
.menu a {
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.menu a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.menu a[aria-current="page"] { border-bottom-color: var(--accent-2); }

/* ---------- hero en tres capas ---------- */

.hero-mid { background: var(--bg); padding: 104px 0 60px; }
.hero-mid .wrap { align-items: end; }
.hero-mid h1 { grid-column: 1 / span 9; margin-bottom: 0; }

.hero-low { background: var(--bg-deep); padding: 56px 0 64px; }
.hero-low .intro { grid-column: 1 / span 6; }
.hero-low .topics { grid-column: 8 / span 5; }
.hero-low .topics ul { margin-bottom: 0; }

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

.figure-main { background: var(--bg); padding: 0 0 88px; }
.figure-main figure { grid-column: 4 / span 9; margin: 0; }
.figure-main img { width: 100%; height: auto; }

/* ---------- sección oscura con imagen de detalle ---------- */

.detail .wrap { align-items: start; row-gap: 40px; }
.detail figure { grid-column: 1 / span 4; margin: 0; }
.detail figure img { width: 100%; height: auto; }
.detail .col { grid-column: 6 / span 6; }

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

.site-footer { background: var(--bg-dark); color: var(--ink-light); padding: 72px 0 56px; }
.site-footer .wrap { row-gap: 44px; }
.footer-name {
  grid-column: 1 / span 12;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height: 1;
  margin: 0;
  color: var(--ink-light);
}
.footer-col { grid-column: span 4; }
.footer-col::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent-2);
  margin-bottom: 20px;
}
.footer-col h2 {
  font-size: 15px;
  font-family: var(--sans);
  color: #b9b2ab;
  margin-bottom: 14px;
  line-height: 1.5;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--ink-light); }
.footer-col p { font-size: 15px; line-height: 1.75; color: #cfc7c0; margin: 0; }

/* ---------- adaptativo ---------- */

@media (max-width: 1000px) {
  .wrap { width: min(1280px, 100% - 64px); }
  .step-1 .col, .step-2 .col, .step-3 .col { grid-column: 1 / span 8; }
  .col, .wide { grid-column: 1 / span 8; }
  .hero-mid h1 { grid-column: 1 / span 12; }
  .hero-low .intro { grid-column: 1 / span 7; }
  .hero-low .topics { grid-column: 9 / span 4; }
  .figure-main figure { grid-column: 2 / span 11; }
  .detail figure { grid-column: 1 / span 5; }
  .detail .col { grid-column: 7 / span 6; }
}

@media (max-width: 760px) {
  body { font-size: 17px; line-height: 1.8; }
  .wrap { width: min(1280px, 100% - 40px); display: block; }
  .band { padding: 56px 0; }
  .band-tight { padding: 40px 0; }
  .topbar .wrap { padding: 18px 0; }
  .menu { justify-content: flex-start; gap: 6px 20px; margin-top: 14px; }
  .hero-mid { padding: 56px 0 36px; }
  .hero-low { padding: 36px 0 48px; }
  .hero-low .topics { margin-top: 32px; }
  .figure-main { padding-bottom: 56px; }
  .detail figure { margin-bottom: 32px; }
  .site-footer { padding: 56px 0 44px; }
  .footer-col { margin-top: 36px; }
  p, ul, ol, .caption { max-width: none; }
}