/* ═══════════════════════════════════════════════════════════════
   PIEL — Alicia Meriles de Biggemann · "Amor sin límites"
   ───────────────────────────────────────────────────────────────
   De dónde sale cada cosa:

   COLOR. El ciruela #784868 no salió de paleta.py sobre la tapa:
   la tapa es una foto de vereda y da grises. Salió de medir la
   CONTRATAPA Y EL LOMO impresos, que son ciruela pleno. Es el
   color del objeto que el lector tiene en la mano.

   LA REGLA DE COLOR DE ESTA WEB. Las 16 fotos de Carlos y el
   retrato de Alicia son blanco y negro de verdad (saturación 0).
   Así que en toda la página el único objeto en color es LA TAPA
   DEL LIBRO — que es justo lo que se vende. No hay que forzarlo:
   ya venía así en el material.

   TIPOGRAFÍA. Las dos salen de la tapa: Anton por el título
   (grotesca condensada pesadísima, AMOR SIN LÍMITES) y PT Serif
   por el subtítulo y el nombre de la autora.

   OJO CON LOS NOMBRES DE ROL DEL NÚCLEO: acá la tipografía de
   títulos es una SANS y la de lectura es una SERIF, al revés de
   lo habitual. Por eso --font-serif y --font-sans apuntan las dos
   a PT Serif (que es la que siempre se puede leer) y Anton entra
   sólo donde se la llama explícitamente, más abajo.
   ═══════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFÍAS PROPIAS ────────────────────────────────────── */
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('../fonts/ptserif-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('../fonts/ptserif-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('../fonts/ptserif-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ── COLORES ──────────────────────────────────────────────
     Todos los pares verificados con contraste.py:
       tinta / papel ............... 14.94:1
       ciruela / papel ..............  6.35:1
       ciruela-honda / papel ........  9.18:1
       gris / papel .................  5.32:1
       gris / papel suave ...........  4.88:1
       papel / pozo ................. 14.34:1
       ciruela-clara / pozo .........  7.29:1
       gris-claro / pozo ............  8.99:1
       papel / ciruela ..............  6.35:1  (botón) */
  --fondo:            #F5F0EE;   /* papel: gris cálido con un pelo de ciruela */
  --fondo-suave:      #EDE6E2;   /* secciones alternas */
  --fondo-medio:      #784868;   /* ciruela del lomo y la contratapa */
  --fondo-oscuro:     #2E1A29;   /* el pozo */

  --acento:           #784868;
  --acento-oscuro:    #5A3350;
  --acento-claro:     #C9A3BC;   /* sobre el pozo */
  --acento-texto:     #784868;   /* pasa AA en texto normal, no hace falta bajarlo */

  --texto:            #241A20;
  --texto-suave:      #6B6066;   /* ← ojo: el primer candidato (#766A71) pasaba
                                    sobre --fondo (4.56:1) pero NO sobre
                                    --fondo-suave (4.18:1). Este pasa en los
                                    dos: 5.32:1 y 4.88:1. */
  --texto-claro:      #F5F0EE;
  --texto-claro-suave:#C9BEC4;

  /* ── TIPOGRAFÍAS ──────────────────────────────────────────── */
  --font-titulo: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-texto:  'PT Serif', Georgia, 'Times New Roman', serif;
  /* El núcleo pide estos dos nombres. Los dos van a la de lectura
     a propósito: Anton no tiene itálica ni pesos y no sirve de
     respaldo genérico. */
  --font-serif:  var(--font-texto);
  --font-sans:   var(--font-texto);

  /* ── ESPACIADO ────────────────────────────────────────────── */
  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.75rem;
  --espacio-lg: 3rem;
  --espacio-xl: 5rem;
  --espacio-2xl: 7.5rem;

  /* ── FORMA ────────────────────────────────────────────────── */
  --radio-sm: 2px;
  --radio-md: 2px;   /* casi cero: es un libro, no una app */

  /* Sombras con tinte ciruela, nunca negras. */
  --sombra-foto:       16px 20px 48px rgba(46, 26, 41, 0.20), 0 0 0 1px rgba(46, 26, 41, 0.07);
  --sombra-foto-hover: 20px 26px 60px rgba(46, 26, 41, 0.26), 0 0 0 1px rgba(46, 26, 41, 0.10);
  --sombra-tapa:       24px 30px 70px rgba(46, 26, 41, 0.32), 0 0 0 1px rgba(46, 26, 41, 0.10);

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --medida: 660px;
}

@media (max-width: 640px) {
  :root {
    --espacio-lg: 2.25rem;
    --espacio-xl: 3rem;
    --espacio-2xl: 4rem;
  }
}

/* ── AJUSTES AL NÚCLEO ──────────────────────────────────────── */
/* PT Serif no tiene peso 300: .prosa se apoya en el interlineado. */
.prosa { font-weight: 400; line-height: 1.8; font-size: 1.0625rem; }
.prosa strong { font-weight: 700; }
.prosa p + p { margin-top: 1.1em; }

/* La volanta va en la serif, no en Anton: a 11px una grotesca
   pesada en mayúsculas se empasta. */
.ojo { font-family: var(--font-texto); font-weight: 700; letter-spacing: 0.2em; }

.cita-interna {
  font-family: var(--font-texto);
  font-size: 1.1875rem;
  color: var(--texto);
  border-left-width: 2px;
}

/* ── SECCIONES ──────────────────────────────────────────────────
   EL RECORRIDO DE COLOR DE ESTA WEB — "el pozo".
   Ni claro→oscuro bajando (Lucía) ni oscuro→claro subiendo (Sifu).
   Acá la página es clara de punta a punta y se hunde UNA SOLA VEZ,
   en el medio, exactamente donde está el diagnóstico. Baja, dobla
   en la frase de la abuela, y vuelve a subir a la luz con el
   epílogo. Es la forma del libro. */
.seccion { padding: var(--espacio-2xl) 0; }
.seccion--claro  { background: var(--fondo-suave);  color: var(--texto); }
.seccion--medio  { background: var(--fondo-medio);  color: var(--texto-claro); }
.seccion--oscuro { background: var(--fondo-oscuro); color: var(--texto-claro); }

.seccion--medio .ojo,
.seccion--oscuro .ojo { color: var(--acento-claro); }
.seccion--medio .titulo-doble em,
.seccion--oscuro .titulo-doble em { color: var(--acento-claro); }
.seccion--medio .cita-interna,
.seccion--oscuro .cita-interna { border-left-color: var(--acento-claro); color: var(--texto-claro); }

.seccion__titulo {
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: var(--espacio-md);
}

/* ── HERO ───────────────────────────────────────────────────────
   La tapa ya dice AMOR SIN LÍMITES en letras enormes. Repetirlo en
   la página al lado de la tapa era decir dos veces lo mismo, así
   que el titular grande no es el título del libro: es el gancho.
   El título queda como firma chica arriba, en ciruela, y la tapa
   —el único objeto en color de la página— se lleva la mirada. */
.hero {
  padding: clamp(3rem, 8vh, 6rem) 0 var(--espacio-2xl);
  background: var(--fondo);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr);
  grid-template-areas:
    "cabeza tapa"
    "pie    tapa";
  column-gap: clamp(2rem, 6vw, 5rem);
  row-gap: 0;
  align-content: center;
}
.hero__cabeza { grid-area: cabeza; }
.hero__pie    { grid-area: pie; }
.hero__tapa   { grid-area: tapa; align-self: center; }

.hero__h1 { margin: 0; font-weight: 400; }

.hero__obra {
  display: block;
  font-family: var(--font-titulo);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  letter-spacing: 0.13em;
  line-height: 1.1;
  color: var(--acento);
}
.hero__sub {
  display: block;
  margin-top: 0.5rem;
  padding-bottom: var(--espacio-md);
  border-bottom: 1px solid rgba(120, 72, 104, 0.22);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--texto-suave);
}
.hero__gancho {
  display: block;
  margin-top: var(--espacio-md);
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  /* Un punto más chico que un titular corto: son 62 caracteres y a
     4rem daban cinco renglones de condensada pesada, o sea una
     pared. A 3rem entra en tres y sigue pegando. */
  font-size: clamp(1.75rem, 4.1vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--texto);
  /* Sin esto corta en "HOY CARLOS ES / FOTÓGRAFO" y deja el verbo
     colgando al final del renglón. */
  text-wrap: balance;
}

.hero__bajada {
  margin: var(--espacio-md) 0 0;
  max-width: 44ch;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.hero__acciones { margin-top: var(--espacio-lg); }

/* El enlace de consulta va PEGADO al CTA y es un enlace, no un
   botón: la página vende, no conversa. Por eso tampoco hay
   WhatsApp flotante. */
.consulta {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--texto-suave);
  text-decoration: underline;
  text-decoration-color: rgba(120, 72, 104, 0.4);
  text-underline-offset: 3px;
}
.consulta:hover { color: var(--acento-oscuro); text-decoration-color: var(--acento); }

/* La tapa: el único objeto en color de toda la página. */
.hero__tapa img {
  width: 100%;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tapa);
}

/* En móvil el orden es: titular → LA RESPUESTA → la tapa → el botón.
   La respuesta va pegada al titular a propósito: el titular abre con
   un diagnóstico, y si la tapa se mete en el medio el lector cruza
   una pantalla entera de foto antes del alivio. La tapa sí va antes
   del botón — la página vende un libro y el objeto tiene que verse
   antes de que le pidan comprarlo. */
@media (max-width: 820px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "cabeza" "tapa" "pie";
    row-gap: var(--espacio-lg);
  }
  .hero__tapa { max-width: 290px; margin: 0 auto; }
  .hero__pie  { margin-top: 0; }
}

/* ── EL POZO ────────────────────────────────────────────────────
   Entra y sale con una banda de degradado, no con un corte. */
.pozo {
  background: var(--fondo-oscuro);
  color: var(--texto-claro);
  padding: 0;
}
.pozo__entrada {
  height: clamp(80px, 12vw, 160px);
  /* Con dos paradas intermedias en ciruela: interpolando derecho de
     crema a ciruela oscuro, el medio da un gris verdoso sucio. */
  background: linear-gradient(180deg,
              var(--fondo) 0%, #D9C3CE 38%, #8E6B80 68%, var(--fondo-oscuro) 100%);
}
.pozo__salida {
  height: clamp(80px, 12vw, 160px);
  background: linear-gradient(180deg,
              var(--fondo-oscuro) 0%, #8E6B80 32%, #D9C3CE 62%, var(--fondo) 100%);
}
.pozo__cuerpo { padding: var(--espacio-xl) 0 var(--espacio-2xl); }

.momento + .momento { margin-top: var(--espacio-2xl); }
.momento__fecha {
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--acento-claro);
  margin: 0 0 var(--espacio-md);
}
.momento__fecha small {
  display: block;
  font-family: var(--font-texto);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--texto-claro-suave);
  margin-top: 0.5em;
}

/* Las réplicas del médico. Raya de diálogo colgada al margen,
   como en el libro impreso. */
.replica {
  margin: 0 0 var(--espacio-md);
  padding-left: 1.4rem;
  border-left: 1px solid rgba(201, 163, 188, 0.45);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.65;
}
.replica--golpe {
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  line-height: 1.35;
  color: #FFF;
}

/* La bisagra: lo que dijo la abuelita Consuelo esa misma tarde. */
.bisagra {
  margin: var(--espacio-2xl) auto;
  max-width: 30ch;
  text-align: center;
  font-style: italic;
  font-size: clamp(1.25rem, 3.2vw, 1.85rem);
  line-height: 1.45;
  color: var(--acento-claro);
}
.bisagra cite {
  display: block;
  margin-top: var(--espacio-sm);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
}

.remate {
  margin: var(--espacio-lg) 0 0;
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 5.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: #FFF;
}
.fuente {
  margin-top: var(--espacio-sm);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
}

/* ── BANDA DE DATOS ─────────────────────────────────────────────
   El texto de la contratapa impresa. Va donde la página sale del
   pozo: primero te conmueve con Carlos, recién después te dice que
   no es un caso raro. Sin número gigante ni tarjetas: es
   información, y la información se lee, no se decora. */
.banda-dato {
  background: var(--fondo);
  padding: var(--espacio-xl) 0 var(--espacio-xl);
  text-align: center;
}
.banda-dato .ojo { display: block; margin-bottom: var(--espacio-md); }
.banda-dato__texto {
  max-width: 54ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--texto-suave);
  text-wrap: pretty;
}
/* El resaltado va sólo en el color, no en un subrayado ni un
   marcador: es un dato, no una promoción. */
.banda-dato__texto strong { font-weight: 400; color: var(--texto); }
.banda-dato__texto p + p { margin-top: 1.15em; }

/* ── LA AUTORA ──────────────────────────────────────────────────
   El retrato es blanco y negro, como las 16 fotos de Carlos. La
   regla de la página: lo único en color es la tapa. */
.autora__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.autora__foto { position: sticky; top: var(--espacio-lg); }
.autora__foto .marco-foto { aspect-ratio: 4 / 5; }
.autora__pie {
  margin-top: var(--espacio-sm);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--texto-suave);
}

@media (max-width: 820px) {
  .autora__grid { grid-template-columns: 1fr; }
  .autora__foto { position: static; max-width: 320px; }
}

/* ── CRONOLOGÍA ─────────────────────────────────────────────────
   Recurso portado de Sifu. Va acá porque el recorrido de Alicia
   tiene fechas y el orden significa algo: primero se informó, y
   recién después fundó, capacitó y viajó. Nada de tarjetas
   01 / 02 / 03: eso numera cosas que no son una secuencia. */
.cronologia {
  margin: var(--espacio-lg) 0 0;
  padding: 0 0 0 var(--espacio-md);
  list-style: none;
  border-left: 1px solid rgba(120, 72, 104, 0.28);
}
.cronologia li { position: relative; padding-bottom: var(--espacio-md); }
.cronologia li:last-child { padding-bottom: 0; }
.cronologia li::before {
  content: "";
  position: absolute;
  left: calc(var(--espacio-md) * -1 - 4px);
  top: 0.45em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acento);
}
.cronologia__cuando {
  display: block;
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  color: var(--acento);
  margin-bottom: 0.3em;
}
.cronologia__que { margin: 0; font-size: 1rem; line-height: 1.7; }
/* Las entradas sin fecha propia cuelgan de la anterior: son cosas
   que hizo dentro de Aywiña, no hitos aparte. */
.cronologia li.sigue::before { background: transparent; border: 1px solid var(--acento); }

/* ── EL LIBRO ───────────────────────────────────────────────────
   El mockup viene con fondo transparente y se compuso sobre
   --fondo. Si esta sección cambia de color de fondo, hay que
   volver a componerlo (ver LEEME.md). */
.libro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.libro__ficha {
  margin: var(--espacio-lg) 0 0;
  border-top: 1px solid rgba(120, 72, 104, 0.25);
}
.libro__ficha div {
  display: flex;
  gap: var(--espacio-sm);
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(120, 72, 104, 0.14);
  font-size: 0.9375rem;
}
.libro__ficha dt {
  flex: 0 0 8.5rem;
  font-family: var(--font-titulo);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  color: var(--acento);
  padding-top: 0.25em;
}
.libro__ficha dd { margin: 0; }
.libro__dedicatoria {
  margin: var(--espacio-md) 0 0;
  font-style: italic;
  font-size: 1rem;
  color: var(--texto-suave);
}
@media (max-width: 820px) {
  .libro__grid { grid-template-columns: 1fr; }
  .libro__ficha dt { flex-basis: 6.5rem; }
}

/* ── LAS PRIMERAS PÁGINAS ───────────────────────────────────── */
.primeras__texto { font-size: 1.0625rem; line-height: 1.85; }
.primeras__texto p + p { margin-top: 1.15em; }
.primeras__corte {
  margin-top: var(--espacio-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-md);
}

/* ── CARLOS ─────────────────────────────────────────────────────
   Las fotos no llevan epígrafe: no sabemos dónde fue sacada cada
   una y no se inventan. Los datos se intercalan entre las fotos,
   así cada hecho cae al lado de una imagen. */
.carlos__par {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.carlos__par + .carlos__par { margin-top: var(--espacio-xl); }
.carlos__par--invertido { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
.carlos__par--invertido .carlos__foto { order: 2; }

.carlos__hecho { margin: 0; font-size: 1.125rem; line-height: 1.75; }
.carlos__hecho + .carlos__hecho {
  margin-top: 1.1em;
  padding-top: 1.1em;
  border-top: 1px solid rgba(120, 72, 104, 0.16);
}
.carlos__hecho b { font-weight: 700; }

.carlos__banda {
  margin: var(--espacio-xl) 0;
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-foto);
}
.carlos__banda img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.carlos__cierre {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.carlos__cita {
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  line-height: 1.5;
}
.carlos__cita cite {
  display: block;
  margin-top: var(--espacio-sm);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* Va sobre papel, no sobre el pozo: --texto-claro-suave acá daba
     1.15:1 y no se leía. */
  color: var(--texto-suave);
}
@media (max-width: 820px) {
  .carlos__par, .carlos__par--invertido { grid-template-columns: 1fr; }
  .carlos__par--invertido .carlos__foto { order: 0; }
  .carlos__cierre { grid-template-columns: 1fr 1fr; }
  .carlos__cita { grid-column: 1 / -1; order: -1; margin-bottom: var(--espacio-md); }
}

/* ── CIERRE ─────────────────────────────────────────────────── */
.cierre { text-align: center; }
.cierre__obra {
  font-family: var(--font-titulo);
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--texto-claro);
}
.cierre__sub {
  margin: var(--espacio-sm) auto 0;
  max-width: 34ch;
  font-style: italic;
  color: var(--texto-claro-suave);
}
.cierre__acciones { margin-top: var(--espacio-lg); }
.contactos {
  margin: var(--espacio-xl) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-md);
  font-size: 0.9375rem;
}
/* El verde de marca de WhatsApp (#25D366) sobre fondo oscuro o
   crema queda ilegible. Acá todos los contactos van del mismo
   color: el ícono ya identifica el canal. */
.contactos a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--texto-claro-suave);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.contactos a:hover { color: var(--texto-claro); border-bottom-color: var(--acento-claro); }
.contactos svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

.pie {
  padding: var(--espacio-lg) 0;
  background: var(--fondo-oscuro);
  color: var(--texto-claro-suave);
  font-size: 0.8125rem;
  text-align: center;
}
.pie a { border-bottom: 1px solid rgba(201, 163, 188, 0.4); }

/* ── PÁGINA DE LECTURA (adelanto.html) ──────────────────────────
   Recurso nuevo: el número de página impresa colgando del margen.
   No es adorno — es la prueba de que el texto es el del papel, y
   le dice al lector dónde está parado dentro del libro. */
.lectura__barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 240, 238, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid rgba(120, 72, 104, 0.16);
}
.lectura__barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-sm);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.lectura__volver {
  font-family: var(--font-titulo);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  color: var(--acento);
}
.lectura__volver:hover { color: var(--acento-oscuro); }

.lectura__cabecera {
  /* 34rem de texto + los 1.5rem de padding del contenedor a cada
     lado: así la cabecera arranca en la misma línea que el cuerpo. */
  max-width: calc(34rem + 3rem);
  margin-left: auto;
  margin-right: auto;
  padding: var(--espacio-xl) 1.5rem var(--espacio-lg);
  border-bottom: 1px solid rgba(120, 72, 104, 0.18);
  margin-bottom: var(--espacio-xl);
}
.lectura__titulo {
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: var(--espacio-sm) 0 0;
}
.lectura__nota {
  margin: var(--espacio-md) 0 0;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.lectura__cuerpo {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.85;
}
.lectura__cuerpo p { margin: 0 0 1.15em; }
/* Los diálogos cuelgan la raya en el margen, como en el impreso. */
.lectura__cuerpo p.dialogo { padding-left: 1.1em; text-indent: -1.1em; }

.lectura__capitulo {
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--acento);
  margin: var(--espacio-2xl) 0 var(--espacio-lg);
  padding-top: var(--espacio-lg);
  border-top: 1px solid rgba(120, 72, 104, 0.22);
}

.marca-pagina {
  position: absolute;
  left: -3.6rem;
  font-family: var(--font-titulo);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--acento);
  opacity: 0.55;
  padding-top: 0.55em;
  user-select: none;
}
@media (max-width: 900px) {
  /* En pantalla angosta no hay margen donde colgarla: pasa a ser
     una marca en línea, más chica y sin ocupar renglón propio. */
  .marca-pagina {
    position: static;
    display: block;
    margin-bottom: 0.35em;
    padding-top: 0;
  }
}

.lectura__final {
  margin: var(--espacio-2xl) auto 0;
  max-width: 34rem;
  padding: var(--espacio-lg);
  border: 1px solid rgba(120, 72, 104, 0.28);
  border-radius: var(--radio-md);
  text-align: center;
}
.lectura__final h2 {
  font-family: var(--font-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.05;
  margin: 0 0 var(--espacio-sm);
}
.lectura__final p { margin: 0 0 var(--espacio-md); color: var(--texto-suave); }

/* ── BARRA FIJA DE COMPRA ───────────────────────────────────────
   El núcleo le reserva 56px + 0.75rem a la derecha para dejarle
   lugar al WhatsApp flotante. Acá no hay flotante —la página vende
   y en móvil el flotante taparía justo esta barra—, así que ese
   hueco se devuelve. */
.barra-compra { padding-right: 1rem; }

/* ── EL BOTÓN SOBRE FONDO OSCURO ────────────────────────────────
   Trampa del núcleo, la misma familia que la de Sifu pero al
   revés: `.boton--principal` pinta el fondo con --acento y da por
   hecho que el fondo de la sección es claro. Acá el ciruela del
   botón (#784868) sobre el ciruela del pozo (#2E1A29) da 2.26:1 y
   el botón se funde con la sección — el mínimo para el borde de un
   control es 3:1.

   Se arregla con dos cosas: un ciruela más claro (#8E5A7C → 3.01:1
   contra el fondo, y 4.76:1 para su propio texto) y un filete
   claro que garantiza el borde pase lo que pase en el hover. */
.seccion--oscuro .boton--principal,
.pozo .boton--principal,
.barra-compra .boton--principal {
  background: #8E5A7C;
  border-color: rgba(245, 240, 238, 0.28);
}
.seccion--oscuro .boton--principal:hover,
.pozo .boton--principal:hover,
.barra-compra .boton--principal:hover {
  background: var(--acento);            /* 6.35:1 con su texto */
  border-color: rgba(245, 240, 238, 0.5);
}

/* ── FOCO DE TECLADO SOBRE FONDO OSCURO ─────────────────────────
   El núcleo dibuja el contorno de foco con --acento. Sobre el pozo
   y el cierre eso da 2.26:1 y el contorno prácticamente no se ve;
   un indicador de foco necesita 3:1. Sobre oscuro va el acento
   claro (7.29:1). */
.seccion--oscuro a:focus-visible,
.seccion--oscuro button:focus-visible,
.pozo a:focus-visible,
.pozo button:focus-visible,
.barra-compra a:focus-visible,
.pie a:focus-visible {
  outline-color: var(--acento-claro);
}

/* ── FIRMA DE UN TÍTULO SACADO DEL LIBRO ────────────────────────
   Cuando el título de una sección es una frase del libro y no una
   escrita por nosotros, lleva su página abajo. No es un detalle
   burocrático: es lo que hace que el lector la lea como la voz de
   Alicia y no como copy de la página. */
.seccion__fuente {
  margin: calc(var(--espacio-md) * -1 + 0.4rem) 0 var(--espacio-lg);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ── DOS OPCIONES DE COMPRA ─────────────────────────────────────
   El libro está en Amazon en dos ediciones: tapa blanda y Kindle.
   El impreso va como botón principal —es el que muestra la página,
   con su mockup y su ficha de 416 páginas— y el ebook al lado, en
   línea. En móvil se apilan a lo ancho. */
.compra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-sm);
  align-items: center;
}
.compra .boton { flex: 0 1 auto; }
.compra--centrada { justify-content: center; }

/* El botón de línea hereda el color del texto, que acá es casi
   negro y compite con el ciruela del principal. Va en ciruela:
   6.35:1 sobre el papel, 5.82:1 sobre el fondo suave. */
.seccion .boton--linea,
.hero .boton--linea { color: var(--acento); }
.seccion .boton--linea:hover,
.hero .boton--linea:hover { background: rgba(120, 72, 104, 0.07); }

.compra__nota {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--texto-suave);
}
.seccion--oscuro .compra__nota { color: var(--texto-claro-suave); }

@media (max-width: 460px) {
  .compra .boton { flex: 1 1 100%; justify-content: center; }
}