/* =====================================================================
   El hombre que aprendió a ser mirado
   Una sola página, scroll continuo. El libro trata sobre LA LUZ:
   el fondo es claro y cálido (crema), y el dorado y el verde musgo
   entran como acentos sobre ese fondo, nunca mezclados sin orden.
   ===================================================================== */

:root {
  --paper:      #f7f0e1;   /* crema cálida, luminosa */
  --paper-2:    #efe4cf;   /* crema algo más honda: tarjetas y bandas */
  --line:       rgba(60, 44, 24, 0.16);
  --line-soft:  rgba(60, 44, 24, 0.09);

  --ink:        #2c2317;   /* marrón muy oscuro, nunca negro */
  --ink-dim:    #6a5b45;   /* marrón medio, texto secundario (AA sobre crema) */
  --ink-faint:  #7c6c53;   /* terciario */

  --gold:       #a9741a;   /* ocre dorado: la luz. Filetes, subrayados, activo */
  --moss:       #63602f;   /* oliva: la cordillera. Acento de la parte de fotos/tierra */

  --measure: 40rem;
  --radius: 2px;
  --pad-x: clamp(1.5rem, 6vw, 4rem);
  --head-h: 60px;
  --band-y: clamp(5rem, 13vh, 9rem);

  --serif:   'Lora', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --display: 'Playfair Display', 'Lora', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.reduced { scroll-behavior: auto; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 55% at 82% -6%, rgba(255, 246, 224, 0.85), transparent 60%),
    radial-gradient(140% 90% at 50% 118%, rgba(99, 96, 47, 0.06), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem);
  line-height: 1.75;
  font-feature-settings: "onum" 1, "pnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

::selection { background: rgba(169, 116, 26, 0.22); color: var(--ink); }

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

.skip-link {
  position: fixed;
  left: 0.75rem;
  top: -120px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 0.75rem; }
:target { scroll-margin-top: calc(var(--head-h) + 1.5rem); }

/* ---- piezas compartidas ---- */
.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--wide { max-width: 1160px; }

.eyebrow {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-dim);
  margin: 0;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--moss { color: var(--moss); }

.rule {
  width: 54px;
  height: 2px;
  border: 0;
  background: var(--gold);
  margin: 1.4rem 0 0;
}
.rule--moss { background: var(--moss); }

.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
@media (hover: hover) { .link:hover { color: var(--gold); border-color: var(--ink); } }

/* ---------------------------------------------------------------------
   Cabecera fija, mínima
--------------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border-bottom: 1px solid var(--line);
}
.site-head__inner {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding: 0.7rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.site-head__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}
.site-head__mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
}
.site-head__lockup { display: flex; flex-direction: column; line-height: 1.2; }
.site-head__name {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.site-head__book {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--gold);
  white-space: nowrap;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem clamp(1.2rem, 3vw, 2.2rem); }
.site-nav a {
  position: relative;
  font-family: var(--display);
  font-style: italic;
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--ink-dim);
  padding-block: 0.3rem;
  transition: color 0.18s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0.15rem;
  height: 1px;
  background: var(--gold);
  transition: right 0.25s var(--ease);
}
@media (hover: hover) { .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { right: 0; } }
.site-nav a.is-active { color: var(--ink); font-weight: 600; }
.site-nav a.is-active::after { right: 0; }
@media (max-width: 620px) {
  .site-head__mark { display: none; }
  .site-head__book { display: none; }
  .site-head__name { font-size: 1.02rem; }
  .site-nav { gap: 0.25rem 1rem; }
  .site-nav a { font-size: 0.84rem; }
}

/* ---------------------------------------------------------------------
   Bandas y fondos traslúcidos de fotografías (estilo reel, sobre crema)
--------------------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
  padding-block: var(--band-y);
}
.band--tint { background: var(--paper-2); }
.band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-pos, 50% 45%);
  opacity: 0.12;
  filter: grayscale(0.85) brightness(1.28) contrast(0.92) sepia(0.12);
}
.band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--paper) 4%, rgba(247, 240, 225, 0.72) 46%, rgba(247, 240, 225, 0.55) 100%),
    linear-gradient(to bottom, var(--paper), rgba(247, 240, 225, 0) 12%, rgba(247, 240, 225, 0) 88%, var(--paper));
}
/* Fondo tenue de la bio, detrás del layout a dos columnas. Aplanado: sin brillos
   ni siluetas marcadas, solo una textura cálida muy suave. */
#autor .band__bg img {
  opacity: 0.3;
  filter: grayscale(1) brightness(0.98) contrast(0.9);
}
/* Capa de color en la paleta de la página: musgo acerado en las sombras,
   dorado cálido en las luces (duotono, como las escenas del hero y los Libros). */
#autor .band__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--moss) 0%, #8a5f18 58%, var(--gold) 100%);
  mix-blend-mode: color;
  pointer-events: none;
}
/* Velo de crema + fundido generoso a crema en los DOS bordes (arriba y abajo),
   para que el bloque no termine en corte seco. */
#autor .band__bg::after {
  background:
    linear-gradient(rgba(247, 240, 225, 0.5), rgba(247, 240, 225, 0.5)),
    linear-gradient(to bottom,
      var(--paper) 0%,
      rgba(247, 240, 225, 0) 18%,
      rgba(247, 240, 225, 0) 46%,
      var(--paper) 92%);
}

/* ---------------------------------------------------------------------
   Duotono: la capa de color repetida como lenguaje visual.
   Una imagen en escala de grises + un degradado de color con
   mix-blend-mode:color encima. El matiz cambia con el arco del
   relato: frío y quieto en la revelación, cálido y vivo en el fruto.
--------------------------------------------------------------------- */
.duo { position: relative; overflow: hidden; background: var(--ink); }
.duo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}
.duo__tone {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--duo-a), var(--duo-b));
  mix-blend-mode: color;
}
.duo__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 13, 5, 0.62), rgba(20, 13, 5, 0.08) 46%, rgba(20, 13, 5, 0) 66%);
}
.duo__fade {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 42%;
  background: linear-gradient(to top, var(--paper), rgba(247, 240, 225, 0) 100%);
}

/* Firma de Jorge Riveros, dibujándose sobre la foto del hero */
.hero__signature {
  position: absolute;
  right: clamp(1.5rem, 5vw, 3.5rem);
  bottom: clamp(1rem, 3.5%, 2.5rem);
  width: clamp(165px, 16vw, 235px);
  /* Firma al pie, como la de un cuadro: trazo fino, tinta café muy oscura. */
  color: #241405;
  pointer-events: none;
}
.hero__signature svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 640px) {
  .hero__signature { width: clamp(120px, 34vw, 170px); }
}

/* Arco de color: frío/quieto -> cálido/vivo */
.duo--revelacion { --duo-a: #5f5f4c; --duo-b: #d8cfab; }
.duo--encuentro  { --duo-a: #8a5f18; --duo-b: #e7c078; }
.duo--fruto      { --duo-a: #a3441a; --duo-b: #f4a83f; }
.duo--hero       { --duo-a: #8a5f18; --duo-b: #f2cf8c; }

/* ---------------------------------------------------------------------
   Inicio (hero) - retrato dramático a página completa, tipo duotono,
   con la tipografía solapando el borde de la imagen.
--------------------------------------------------------------------- */
.hero { position: relative; }
.hero__media {
  position: relative;
  height: clamp(440px, 78svh, 800px);
  margin-top: var(--head-h);
}
.hero__media img { object-position: 50% 8%; }
.hero__stack {
  position: relative;
  z-index: 2;
  margin-top: clamp(-3.6rem, -6vw, -2rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
.hero__title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 1.1rem + 7.2vw, 6.6rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 14ch;
}
.hero__meta { margin-top: clamp(1.2rem, 3vw, 1.8rem); max-width: 30rem; }
.hero__sub {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
  font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.25rem);
}
.hero__hook { margin-top: 0.85rem; color: var(--ink-dim); }
@media (max-width: 640px) {
  .hero__title { font-size: clamp(2.3rem, 1.4rem + 9vw, 4rem); }
  .hero__stack { margin-top: -2.2rem; }
}

/* Franja de fotos de la casa de barro, a todo el ancho, bajo el Inicio */
.filmstrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-block: clamp(2.5rem, 7vw, 5rem);
}
.filmstrip figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.filmstrip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.16) saturate(0.92) brightness(1.02);
}
@media (max-width: 720px) {
  .filmstrip { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   El libro, en tres partes: cada parte es una escena duotono que
   continúa la anterior, con su relato completo debajo.
--------------------------------------------------------------------- */
.part-intro { padding-block: var(--band-y) clamp(1rem, 3vw, 2rem); }
.part-intro h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); }
.part-intro .lead { margin-top: 1.1rem; color: var(--ink-dim); max-width: 34rem; }

.scene { position: relative; margin-top: clamp(2.5rem, 6vw, 4rem); }
.scene__media { position: relative; height: clamp(280px, 46svh, 520px); }
.scene__stack { position: relative; z-index: 2; margin-top: clamp(-2.6rem, -5vw, -1.6rem); }
.scene__num {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  color: var(--gold);
  opacity: 0.7;
}
.scene__title {
  margin-top: 0.2rem;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 1rem + 5.6vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 16ch;
}

.part { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 8vw, 5.5rem); }
.part__meta { max-width: 34rem; }
.part__sub { margin-top: 0.3rem; font-style: italic; color: var(--ink-dim); }
.part__desc { margin-top: 0.85rem; color: var(--ink-dim); max-width: 32rem; }
.part__desc em { font-style: italic; color: var(--ink); }

.story { margin-top: clamp(2rem, 5vw, 3.25rem); max-width: 36rem; }
.story__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}
.story p { margin: 0; }
.story p + p { margin-top: 1.25rem; }
.story em { font-style: italic; color: var(--ink); }

/* ---------------------------------------------------------------------
   Sobre el autor
--------------------------------------------------------------------- */
.author {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
  padding-left: clamp(0rem, 4vw, 3rem);
}
.author__figure {
  margin: 0;
  position: relative;
  width: fit-content;
  /* Borde suave y ancho: la foto se disuelve en el crema por los cuatro cantos,
     no es un rectángulo pegado encima. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fx, 58px), #000 calc(100% - var(--fx, 58px)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fyt, 58px), #000 calc(100% - var(--fyb, 30px)), transparent 100%);
  -webkit-mask-composite: source-in;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fx, 58px), #000 calc(100% - var(--fx, 58px)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fyt, 58px), #000 calc(100% - var(--fyb, 30px)), transparent 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
}
.author__figure img {
  display: block;
  width: auto;
  max-width: min(100%, 440px);
  height: auto;              /* nunca recortar: la foto se ve entera */
  /* Corrección de color: baja el azul del cielo y calienta las luces (ropa
     clara) para integrarla con los cremas; sube un poco las sombras. */
  filter: var(--fig-grade, saturate(0.5) sepia(0.42) brightness(1.06) contrast(0.95));
}
/* Grados de referencia (por si hay que reajustar): se aplican al <figure> */
.fig--g1 img { --fig-grade: saturate(0.66) sepia(0.2)  brightness(1.05) contrast(0.98); }
.fig--g2 img { --fig-grade: saturate(0.5)  sepia(0.42) brightness(1.06) contrast(0.95); }
.fig--g3 img { --fig-grade: saturate(0.34) sepia(0.55) brightness(1.08) contrast(0.94); }
.author__body { max-width: var(--measure); }
.author__body h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem); }
.author__body .rule { margin-bottom: 1.6rem; }
.author__body p + p { margin-top: 1.25rem; }
@media (max-width: 820px) {
  .author { grid-template-columns: 1fr; gap: 1.75rem; justify-items: start; padding-left: 0; }
  .author__figure { --fx: 34px; --fyt: 34px; --fyb: 22px; }
  .author__figure img { max-width: min(100%, 400px); }
}

/* ---------------------------------------------------------------------
   El libro en papel
--------------------------------------------------------------------- */
.buy {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 3.5rem);
  align-items: center;
}
.buy__figure img { width: 100%; border-radius: var(--radius); box-shadow: 0 22px 46px -24px rgba(44, 35, 23, 0.45); }
.buy h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }
.buy__detail { margin-top: 0.9rem; color: var(--ink-dim); font-style: italic; }
.buy__links { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }
@media (max-width: 600px) {
  .buy { grid-template-columns: 1fr; }
  .buy__figure { max-width: 180px; }
}

/* ---------------------------------------------------------------------
   Pie
--------------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: var(--band-y);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.site-foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; }
.site-foot em { color: var(--ink-dim); font-style: italic; }

/* ---------------------------------------------------------------------
   Motion (GSAP la conduce; aquí solo los estados base y el fallback)
--------------------------------------------------------------------- */
html.js:not(.reduced) [data-reveal] { opacity: 0; }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html [data-reveal] { opacity: 1 !important; transform: none !important; }
}