/* HEYAMIX V5 · tema 01 «Jardín de historias» · demo del álbum de Carmen (19/10/2026; fotos reales 20/10/2026)
   Fotos e ilustraciones = archivos reales (<picture> AVIF/WebP/JPEG) recortados con object-fit, nunca estirados; SVG solo para logo, iconos y filetes.
   Marca (logo, nombre, tipografía de UI) = tablero de identidad. Dentro del álbum = láminas: marfil luminoso,
   hojas coral/mango/turquesa/verde, ramas doradas en espiral; verde oscuro solo en texto y logo, nunca de fondo.
   Contrastes WCAG medidos (texto sobre marfil): tinta 14,1 · verde oscuro 11,3 · gris verdoso 6,1 · terracota oscuro 5,1 · foco 7,0. */
/* (31/10/2026) base común de los tres diseños: lo propio de «Acuarela» está separado de tema-jardin.css (temas/tema-jardin.css). */

@font-face { font-family: "Lora"; src: url("../fuentes/lora-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fuentes/lora-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fuentes/montserrat-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* doc 03 · tokens del tema 01 */
  --hx-ivory: #FFF8ED;
  --hx-paper: #FEFBF5;
  --hx-leaf: #C8E3AC;
  --hx-mango: #FFB454;
  --hx-coral: #FF7782;
  --hx-turquoise: #51B8C1;
  --hx-ink: #292722;
  --hx-deep-green: #263C2D;
  --hx-muted: #536351;
  --hx-border: #D8D7C8;
  --hx-focus: #185A87;
  /* tablero de marca (solo logo) */
  --hx-salvia: #A7B38F;
  --hx-terracota: #C76F56;
  --hx-mostaza: #D6A84A;
  /* derivados del tema (ilustración y tintes; ninguno lleva texto claro encima) */
  --hx-gold: #C9973F;
  --hx-gold-light: #E5BE6E;
  --hx-leaf-deep: #7FAF5A;
  --hx-accent-text: #A0563B;
  --hx-leaf-tint: #E6F2DA;
  --hx-mango-tint: #FFE3BC;
  --hx-coral-tint: #FFD6DA;
  --hx-turquoise-tint: #CDEBEE;
  --hx-shadow: rgba(41, 39, 34, 0.08);

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --fs-label: 0.9375rem;   /* 15 px: etiquetas en versalitas */
  --fs-ui: 1.125rem;       /* 18 px: navegación y botones */
  --fs-read: 1.25rem;      /* 20 px: lectura */
  --fs-lead: 1.375rem;
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
  --fs-hero: clamp(4rem, 2.6rem + 7vw, 8rem);
  --lh-read: 1.65;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;
  --gutter: 1.25rem;
  --radius-s: 0.5rem; --radius-m: 1rem; --radius-l: 1.75rem; --radius-pill: 999px;
  --tap: 2.875rem;         /* 46 px: objetivo táctil mínimo */
  --measure: 36rem;
  --page: 62rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hx-ivory);
  color: var(--hx-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: 1.5;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--hx-deep-green); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 3px; border-radius: var(--radius-s); }
h1, h2, h3 { font-family: var(--font-serif); color: var(--hx-deep-green); line-height: 1.12; margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--sp-4); top: -4rem; z-index: 10; background: var(--hx-paper); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-s); }
.saltar:focus { top: var(--sp-4); }

/* ---------- gráficos SVG ---------- */
.logo__mastil { fill: var(--hx-deep-green); }
.logo__salvia { fill: var(--hx-salvia); }
.logo__terracota { fill: var(--hx-terracota); }
.logo__mostaza { fill: var(--hx-mostaza); }
.logo__nervio { fill: none; stroke: var(--hx-paper); stroke-width: 1.4; stroke-linecap: round; opacity: 0.7; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- cabecera ---------- */
.aviso-demo {
  background: var(--hx-mango-tint);
  color: var(--hx-ink);
  font-size: var(--fs-label);
  line-height: 1.45;
  padding: var(--sp-2) var(--gutter);
  text-align: center;
}
.cabecera__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  max-width: var(--page); margin: 0 auto; padding: var(--sp-3) var(--gutter);
}
.marca { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); text-decoration: none; color: var(--hx-deep-green); }
.marca__nombre { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.14em; }
.menu ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.menu a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-weight: 500; text-decoration: none; color: var(--hx-ink);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.menu a[aria-current="page"] { border-bottom-color: var(--hx-coral); color: var(--hx-deep-green); }
@media (hover: hover) and (pointer: fine) { .menu a:hover { border-bottom-color: var(--hx-mango); } }

/* ---------- hoja del libro ---------- */
.hoja-libro {
  position: relative;
  max-width: var(--page);
  margin: 0 auto var(--sp-6);
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  background: var(--hx-paper);
  border-top: 1px solid var(--hx-border);
  border-bottom: 1px solid var(--hx-border);
  overflow: clip;
}
.titulo-pagina { font-size: var(--fs-h1); letter-spacing: -0.01em; }
.entrada { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); color: var(--hx-muted); margin-top: var(--sp-3); max-width: var(--measure); }
.eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-accent-text); }
.seccion-h { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.separador { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; max-width: 18rem; }
.separador__linea { flex: 1; height: 1px; background: var(--hx-border); }
.separador__hoja { width: 2.5rem; }
.filete-hoja { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.filete-hoja__linea { width: 2.5rem; height: 1px; background: var(--hx-border); }
.filete-hoja .separador__hoja { width: 2rem; }

/* ---------- botones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.acciones--centro { justify-content: center; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 3.25rem; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill); border: 2px solid transparent;
  font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  transition: transform 160ms var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.boton:active { transform: scale(0.97); }
.boton--primario { background: var(--hx-mango); color: var(--hx-ink); }
.boton--secundario { background: transparent; color: var(--hx-deep-green); border-color: var(--hx-deep-green); }
.boton--terciario { background: var(--hx-turquoise-tint); color: var(--hx-ink); }
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover { background: var(--hx-gold-light); }
  .boton--secundario:hover { background: var(--hx-leaf-tint); }
  .boton--terciario:hover { background: var(--hx-leaf-tint); }
}

/* ---------- portada (lámina 01) ---------- */
.portada { display: grid; gap: var(--sp-5); grid-template-areas: "texto" "retrato" "accion"; }
.portada__texto { grid-area: texto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.portada__sello { font-family: var(--font-serif); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--hx-deep-green); padding-left: 0.32em; }
.portada__texto .filete-hoja { margin-top: var(--sp-2); }
.portada__nombre { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.02em; line-height: 0.95; margin-top: var(--sp-4); }
.portada__lema { display: block; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); font-weight: 500; letter-spacing: 0; line-height: 1.15; margin-top: var(--sp-3); color: var(--hx-deep-green); }
.portada__filete { display: block; width: 3rem; height: 3px; border-radius: 2px; background: var(--hx-salvia); margin: var(--sp-4) auto 0; }
.portada__sub { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); color: var(--hx-ink); margin-top: var(--sp-4); max-width: 20rem; }
.portada__retrato { grid-area: retrato; margin: 0 calc(var(--gutter) * -1); }
.portada__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.portada__retrato figcaption { margin-top: var(--sp-2); padding: 0 var(--gutter); font-size: var(--fs-label); color: var(--hx-muted); text-align: center; }
.portada__accion { grid-area: accion; display: flex; flex-direction: column; align-items: center; text-align: center; }
.portada__datos { color: var(--hx-muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; }
.portada__accion .acciones { justify-content: center; margin-top: var(--sp-4); }
.portada__album { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-6); font-family: var(--font-serif); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hx-deep-green); }

/* ---------- dedicatoria ---------- */
.dedicatoria { text-align: center; padding: var(--sp-8) 0 var(--sp-8); display: flex; flex-direction: column; align-items: center; }
.dedicatoria__texto { font-style: italic; font-weight: 500; font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem); line-height: 1.25; max-width: 30rem; margin-top: var(--sp-4); }
.dedicatoria .separador { width: 100%; }
.dedicatoria__firma { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--hx-deep-green); }
.dedicatoria__fecha { margin-top: var(--sp-1); color: var(--hx-muted); font-size: var(--fs-label); }

/* ---------- índice (lámina 02) ---------- */
.indice__cabecera { text-align: center; display: flex; flex-direction: column; align-items: center; padding: var(--sp-6) var(--sp-6) 0; }
.indice__cabecera .entrada { margin-left: auto; margin-right: auto; }
.indice__cabecera .separador { width: 100%; margin-left: auto; margin-right: auto; }
.indice__capitulos { margin-top: var(--sp-4); display: grid; gap: var(--sp-5); }
.indice__capitulo { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-4); align-items: start; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hx-border); scroll-margin-top: var(--sp-5); }
.indice__foto { position: relative; }
.indice__mini__marco { display: block; }
.indice__mini { width: 5.5rem; height: auto; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0.5rem 1.25rem var(--hx-shadow); }
.indice__cap { font-size: var(--fs-h2); display: flex; align-items: center; gap: var(--sp-3); }
.indice__num {
  flex: none; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  font-family: var(--font-serif); font-size: 1.25rem; color: var(--hx-ink);
}
.indice__lista { margin-top: var(--sp-2); }
.indice__historia {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) 0; text-decoration: none; color: var(--hx-ink);
}
.indice__titulo { font-family: var(--font-serif); font-size: var(--fs-read); text-decoration: underline; text-decoration-color: var(--hx-border); text-underline-offset: 0.25em; transition: text-decoration-color var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .indice__historia:hover .indice__titulo { text-decoration-color: var(--hx-coral); } }
.insignia { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-label); font-weight: 600; color: var(--hx-muted); white-space: nowrap; }
.insignia--voz { color: var(--hx-deep-green); }
.indice__extra { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.indice__extra a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

/* ---------- árbol (lámina 03): ilustración real + zonas HTML encima ---------- */
.arbol-pagina > .titulo-pagina, .arbol-pagina > .entrada { text-align: center; margin-left: auto; margin-right: auto; }
.arbol-pagina__rejilla { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
.arbol-lamina { width: 100%; max-width: 34rem; margin: 0 auto; }
.arbol-lamina__lienzo { position: relative; margin: 0 calc(var(--gutter) * -0.5); }
.arbol-lamina__img { width: 100%; height: auto; aspect-ratio: 1122 / 1402; border-radius: var(--radius-m); }
.arbol-lamina__zonas { position: absolute; inset: 0; }
.zona { position: absolute; transform: translate(-50%, -50%); display: flex; justify-content: center; width: 44%; }
.zona__enlace {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); min-width: var(--tap); padding: var(--sp-1) var(--sp-3);
  text-decoration: none; color: var(--hx-ink); line-height: 1.15; text-align: center;
  box-shadow: 0 0.35rem 0.9rem rgba(41, 39, 34, 0.18);
  transition: transform 160ms var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.zona__enlace--cap { font-family: var(--font-serif); font-weight: 600; font-size: 0.9375rem; color: var(--hx-deep-green); border-radius: 60% 40% 60% 40% / 70% 30% 70% 30%; padding: var(--sp-2) var(--sp-4); }
.zona__enlace--hist { background: var(--hx-paper); border: 2px solid var(--hx-border); border-radius: var(--radius-pill); padding: 0.125rem; font-family: var(--font-serif); font-style: italic; font-size: 0.9375rem; }
.zona__num { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-style: normal; font-weight: 600; font-size: 1.0625rem; color: var(--hx-ink); }
/* en móvil la hoja de la historia muestra solo el número; el título sigue en el nombre accesible y en la lista */
.zona__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zona__enlace:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .zona__enlace:hover { transform: scale(1.05); box-shadow: 0 0.5rem 1.25rem rgba(41, 39, 34, 0.24); } }
.arbol-lamina__nota { text-align: center; color: var(--hx-muted); font-size: var(--fs-label); margin-top: var(--sp-3); }
@media (min-width: 40em) {
  .arbol-lamina__lienzo { margin: 0; }
  .zona__titulo { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; text-align: left; padding-right: var(--sp-3); }
  .zona__enlace--cap { font-size: 1rem; }
}
.leyenda__h { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.leyenda__lista { display: grid; gap: var(--sp-2); }
.leyenda__item a {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-1) var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) 0; text-decoration: none; color: var(--hx-ink);
}
.leyenda__item .insignia { grid-column: 2; }
.leyenda__num { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; grid-row: span 2; }
.leyenda__texto { display: flex; flex-direction: column; }
.leyenda__cap { font-size: var(--fs-label); font-weight: 600; color: var(--hx-muted); }
.leyenda__titulo { font-family: var(--font-serif); font-size: var(--fs-read); text-decoration: underline; text-decoration-color: var(--hx-border); text-underline-offset: 0.25em; }

/* ---------- historia ---------- */
.historia__foto { position: relative; margin: calc(var(--sp-5) * -1) calc(var(--gutter) * -1) 0; }
.historia__img__marco { display: block; }
.historia__img { width: 100%; height: clamp(15rem, 45svh, 28rem); object-fit: cover; }
.historia__foto figcaption { padding: var(--sp-2) var(--gutter); font-size: var(--fs-label); color: var(--hx-muted); }
.eyebrow__cap { letter-spacing: 0.08em; }
.historia__cabecera { margin-top: var(--sp-5); }
.historia__titulo { font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; margin-top: var(--sp-3); }
.historia__autora { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-read); color: var(--hx-muted); margin-top: var(--sp-2); }
.pregunta { margin-top: var(--sp-5); padding-left: var(--sp-4); border-left: 3px solid var(--hx-mango); }
.pregunta__quien { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-muted); }
.pregunta__texto { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-read); margin-top: var(--sp-1); }
.relato { margin-top: var(--sp-5); max-width: var(--measure); }
.relato p { font-family: var(--font-serif); font-size: var(--fs-read); line-height: var(--lh-read); }
.relato p + p { margin-top: var(--sp-4); }
.cita { margin: 0; text-align: center; }
.cita p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.3; color: var(--hx-deep-green); max-width: 30rem; margin: 0 auto; }
.cita p::before { content: "«"; }
.cita p::after { content: "»"; }
.p-historia .separador { margin-left: auto; margin-right: auto; }
.historia__fecha { margin-top: var(--sp-5); text-align: center; color: var(--hx-muted); font-size: var(--fs-label); }
.escrita { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); background: var(--hx-leaf-tint); color: var(--hx-deep-green); font-weight: 600; }

/* ---------- reproductor ---------- */
.voz { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--hx-border); border-radius: var(--radius-l); background: var(--hx-ivory); max-width: var(--measure); box-shadow: 0 0.5rem 1.5rem var(--hx-shadow); }
.voz__titulo { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-read); font-weight: 600; color: var(--hx-deep-green); }
.voz__titulo .ico { color: var(--hx-accent-text); }
.voz__aviso { font-size: var(--fs-label); color: var(--hx-muted); margin-top: var(--sp-1); }
.voz__nativo { width: 100%; margin-top: var(--sp-3); }
.voz--js .voz__nativo { display: none; }
.voz__control[hidden] { display: none; }
.voz__control { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.voz__play {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0; padding: 0;
  background: var(--hx-deep-green); color: var(--hx-ivory); cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.voz__play:active { transform: scale(0.94); }
.voz__icono { fill: currentColor; }
.voz__play .voz__icono--pausa { display: none; }
.voz__play[data-suena="si"] .voz__icono--pausa { display: block; }
.voz__play[data-suena="si"] .voz__icono--play { display: none; }
.voz__pista { min-width: 0; }
.voz__etiqueta { font-size: var(--fs-label); color: var(--hx-muted); }
.voz__rango { width: 100%; height: var(--tap); margin: 0; accent-color: var(--hx-coral); cursor: pointer; }
.voz__tiempo { font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--hx-ink); }
.voz__velocidad {
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--radius-pill);
  border: 2px solid var(--hx-border); background: var(--hx-paper); color: var(--hx-ink);
  font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .voz__velocidad:hover { border-color: var(--hx-mango); } }

/* ---------- familia ---------- */
.carta { margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--radius-l); background: var(--hx-ivory); border: 1px solid var(--hx-border); max-width: var(--measure); }
.carta__titulo { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.carta p:not(.carta__firma) { font-family: var(--font-serif); font-size: var(--fs-read); line-height: var(--lh-read); }
.carta p + p { margin-top: var(--sp-3); }
.carta__firma { font-family: var(--font-serif); font-style: italic; color: var(--hx-muted); }
.familia > section { margin-top: var(--sp-7); }
.mensajes { display: grid; gap: var(--sp-4); }
.mensaje { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-m); }
.mensaje blockquote { margin: 0; }
.mensaje blockquote p { font-family: var(--font-serif); font-size: var(--fs-read); line-height: 1.5; }
.mensaje__autor { margin-top: var(--sp-2); font-weight: 700; }
.mensaje__autor span { font-weight: 500; }
.fotos { display: grid; gap: var(--sp-5); }
.foto__img__marco { display: block; }
.foto__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-m); box-shadow: 0 0.75rem 1.75rem var(--hx-shadow); }
.familia > .titulo-pagina, .familia > .entrada { padding-right: var(--sp-7); }
.foto figcaption { display: flex; flex-direction: column; margin-top: var(--sp-2); }
.foto__pie { font-family: var(--font-serif); font-size: var(--fs-read); }
.foto__quien { font-size: var(--fs-label); color: var(--hx-muted); }

/* ---------- conservar ---------- */
.formatos { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); counter-reset: formato; }
.formato { position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-4) 4.25rem; border-radius: var(--radius-m); background: var(--hx-ivory); border: 1px solid var(--hx-border); counter-increment: formato; }
.formato::before {
  content: counter(formato); position: absolute; left: var(--sp-4); top: var(--sp-4);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  font-family: var(--font-serif); font-weight: 600; color: var(--hx-ink);
}
.formato__h { font-size: 1.375rem; margin-bottom: var(--sp-1); }
.formato p { line-height: 1.55; }
.conservar__nota { margin-top: var(--sp-5); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-read); color: var(--hx-deep-green); }
.descarga { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hx-border); }
.descarga p + p { margin-top: var(--sp-4); }

/* ---------- pasar página ---------- */
.pasar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--hx-border); }
.pasar__enlace { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); text-decoration: none; color: var(--hx-ink); }
.pasar__enlace > span { display: flex; flex-direction: column; min-width: 0; }
.pasar__enlace--next { justify-content: flex-end; text-align: right; }
.pasar__dir { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-muted); }
.pasar__titulo { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.3; }
.pasar__indice { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); font-size: var(--fs-label); font-weight: 600; text-decoration: none; color: var(--hx-deep-green); }
@media (hover: hover) and (pointer: fine) { .pasar__enlace:hover .pasar__titulo { text-decoration: underline; } }

/* ---------- pie ---------- */
.pie { max-width: var(--page); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.pie__lema { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-read); color: var(--hx-deep-green); }
.pie__nota { font-size: var(--fs-label); color: var(--hx-muted); max-width: 34rem; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-4); }
.pie__legal a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); font-size: var(--fs-label); }

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hoja-libro > * { animation: entrar 480ms var(--ease-out) both; }
  @keyframes entrar { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---------- tableta y escritorio: el marco del libro ---------- */
@media (min-width: 48em) {
  :root { --gutter: 2.5rem; }
  .hoja-libro { margin-top: var(--sp-4); border: 1px solid var(--hx-border); border-radius: var(--radius-l); box-shadow: 0 1.5rem 3rem var(--hx-shadow), inset 0.75rem 0 1.25rem -1rem var(--hx-shadow); padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .historia__foto { margin-top: calc(var(--sp-7) * -1); }
  .historia__img { border-radius: var(--radius-l) var(--radius-l) 0 0; height: auto; aspect-ratio: 16 / 9; }
  .portada__retrato { width: 100%; max-width: 34rem; margin: 0 auto; }
  .portada__img { border-radius: var(--radius-l); }
  .indice__cabecera { padding: var(--sp-5) var(--sp-8) 0; }
  .indice__capitulo { grid-template-columns: 9rem 1fr; gap: var(--sp-6); }
  .indice__mini { width: 9rem; }
  .fotos { grid-template-columns: repeat(3, 1fr); }
  .mensajes { grid-template-columns: repeat(3, 1fr); }
  .formatos { grid-template-columns: repeat(2, 1fr); }
  .pasar__titulo { font-size: var(--fs-ui); }
}
@media (min-width: 60em) {
  .portada { grid-template-columns: 1fr 26rem; grid-template-areas: "texto retrato" "accion retrato"; column-gap: var(--sp-7); row-gap: var(--sp-5); align-items: end; }
  .portada__accion { align-self: start; }
  .portada__retrato { margin: 0; }
  .portada__img { aspect-ratio: 2 / 3; border-radius: var(--radius-l); box-shadow: 0 1.5rem 3rem var(--hx-shadow); }
  .arbol-pagina__rejilla { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .historia { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* ===== generado por construir_v5.cjs a partir de imagenes.json: no editar a mano ===== */
.foco--retrato { object-position: 46% 72%; }
.foco--pan { object-position: 52% 38%; }
.foco--mesa { object-position: 47% 34%; }
.foco--baile { object-position: 48% 38%; }
.foco--costura { object-position: 45% 34%; }
.foco--camino { object-position: 45% 36%; }
.foco--vosotros { object-position: 48% 40%; }
.foco--manos { object-position: 52% 55%; }
.foco--columpio { object-position: 50% 62%; }
.foco--mar { object-position: 40% 66%; }