/* ABECEDIARIO — hojas de presentación. La composición sigue al dossier
   original (ABECEDIARIO_prezent.pdf) resuelta con recursos nativos de la web. */
:root {
  --paper: #fffefa;
  --cold: #f1f8fa;
  --ink: #262323;
  --muted: #6d6c68;
  --blue: #087f9f;
  --pink: #d68191;
  --line: #c9dfe4;
  --shadow: 0 14px 36px rgba(31, 77, 88, 0.14);
  --pad: max(20px, 6vw);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.52 Georgia, "Times New Roman", serif;
}

a { color: inherit; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---- barra superior ---- */
.topbar {
  position: fixed;
  z-index: 20;
  inset: 14px 18px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: rgba(255, 254, 250, 0.92);
  backdrop-filter: blur(10px);
}

.brand { color: var(--blue); text-decoration: none; letter-spacing: 0.08em; }
.topbar nav { display: flex; gap: 22px; }

.topbar nav a {
  font: 700 11px Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.topbar nav a:hover,
.topbar nav a:focus-visible { color: var(--blue); }

/* ---- hoja ---- */
.sheet {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: clamp(90px, 8vw, 145px) var(--pad);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 70px;
}

.sheet h2 {
  margin: 0 0 40px;
  color: var(--blue);
  font-size: clamp(46px, 6vw, 86px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.035em;
}

.lead {
  font-size: clamp(20px, 2vw, 31px);
  line-height: 1.27;
}

/* ---- 1. portada ---- */
.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 34px;
  text-align: center;
}

.cover-title h1 {
  margin: 0;
  color: var(--blue);
  font-size: clamp(65px, 10.5vw, 176px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.045em;
}

.cover-title > p {
  margin: 16px 0 0;
  font-size: clamp(20px, 2.9vw, 47px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.cover-copy {
  width: min(990px, 100%);
  margin-bottom: clamp(36px, 5vw, 86px);
}

.cover-copy > .lead {
  max-width: 660px;
  margin: clamp(46px, 6vw, 92px) auto clamp(28px, 3vw, 46px);
  color: var(--blue);
}

.cover-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  text-align: left;
}

.cover-columns > p { margin: 0; text-align: justify; hyphens: auto; }
.cover-columns > div > p { margin: 0 0 1.05em; }
.cover-columns > div > p:last-child { margin-bottom: 0; }

/* El oso hormiguero cierra la portada: siempre abajo y centrado. */
.cover-animal {
  width: min(500px, 62vw);
  margin: auto auto clamp(18px, 2.6vw, 44px);
  align-self: center;
  mix-blend-mode: multiply;
}

.cover-animal img,
.keys-art img { display: block; width: 100%; height: auto; }

.credits {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 0;
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.6;
  text-align: left;
}

.credits span:last-child { text-align: right; }
.credits a { font-size: 0.62em; text-underline-offset: 3px; }

/* ---- 2. carta al equipo editorial ---- */
/* Carta a dos columnas, sólo texto: el saludo y la presentación a la izquierda,
   los tres hechos de la obra a la derecha, como una hoja de dossier. */
.editorial {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  background: var(--cold);
}

.editorial-copy { align-self: center; }
.editorial .lead { max-width: 34ch; color: var(--blue); }

.facts {
  display: grid;
  gap: 36px;
  max-width: 46ch;
  padding-top: clamp(8px, 2vw, 40px);
}

.facts p,
.key-grid p {
  position: relative;
  margin: 0;
  padding-top: 42px;
  font-size: 17px;
  line-height: 1.5;
}

.facts p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.48; }

.facts p::before,
.key-grid p::before {
  content: "✱";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--blue);
  font-size: 26px;
  line-height: 1;
}

/* ---- 3. claves del proyecto ---- */
.key-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 38px;
  max-width: 1500px;
}

/* La flor cierra la hoja por abajo, en el flujo y nunca sobre el texto:
   la columna flexible la empuja al pie cuando sobra altura. */
.keys {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.key-grid { flex: none; }

.keys-art {
  width: min(230px, 14vw);
  margin: auto 0 0 1vw;
  padding-top: clamp(40px, 5vw, 80px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- 4. potencial y autoras ---- */
.authors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  background: var(--cold);
}

.authors article { max-width: 700px; }
.authors p { margin: 0 0 1.05em; }
.authors em { color: var(--blue); }

/* ---- 5. el libro completo ---- */
/* El facsímil manda: esta hoja estrecha sus márgenes para dar anchura al libro. */
.complete-book {
  --pad: max(20px, 3vw);
  background: var(--cold);
  overflow: visible;
}

.book-heading { margin-bottom: 52px; }

.book-heading .eyebrow {
  margin: 0 0 14px;
  color: var(--blue);
  font: 700 12px Arial, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.book-heading h2 { margin: 0; }

.book-heading .lead { margin: 14px 0 0; color: var(--blue); }

/* ---- 6. contacto ---- */
.contact {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cold);
}

.contact > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }

.contact h3 {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: clamp(36px, 5vw, 76px);
  font-weight: 400;
}

.contact article a { display: block; margin: 8px 0; text-underline-offset: 4px; }

/* ---- adaptación ---- */
@media (max-width: 950px) {
  .topbar nav a:nth-child(-n + 2) { display: none; }
  .sheet { min-height: auto; padding: 90px var(--pad) 70px; }
  .cover { min-height: 100vh; }
  .cover-columns { grid-template-columns: 1fr; gap: 0; }
  .cover-columns > p { margin-bottom: 1.05em; }
  .cover-copy { margin-bottom: 48px; }
  .editorial, .authors, .contact > div { grid-template-columns: 1fr; }
  .editorial { gap: 56px; }
  .editorial .lead { max-width: none; }
  .facts { max-width: none; padding-top: 0; }
  .key-grid { grid-template-columns: repeat(2, 1fr); }
  .keys-art { width: min(160px, 32vw); margin-left: 0; padding-top: 48px; }
  .contact article + article { margin-top: 50px; }
}

@media (max-width: 560px) {
  .topbar { inset: 8px 8px auto; padding: 9px 11px; }
  .brand { font-size: 14px; }
  .topbar nav { gap: 12px; }
  .topbar nav a { font-size: 9px; }
  .cover-title h1 { font-size: 14.2vw; }
  .cover-animal { width: 86vw; margin-bottom: 30px; }
  .credits { font-size: 14px; }
  .key-grid { grid-template-columns: 1fr; }
  .facts { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}