/* ═══════════════════════════════════════════════════════════════
   PIEL — Daniela Reta · «Después de la salvación»
   ───────────────────────────────────────────────────────────────
   Todo lo de acá sale de la tapa, medido con paleta.py sobre el
   frente recortado del PDF a 300 dpi, y verificado par por par con
   contraste.py. Nada elegido a ojo.

   El recorrido de color NO es una rampa: es un ARCO, porque el
   libro es un arco. Empieza en el cielo alto de la tapa (rosa
   lila), baja a la brasa en el adelanto —donde arde el pueblo de
   Caisac— y termina en el azul profundo del cielo, que es
   literalmente donde termina la novela (p.138).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── COLORES ────────────────────────────────────────────────
     Muestreados de assets/img/tapa-desktop.jpg:
       #F4EFF0  nube alta aclarada (base rosa-lila del cielo)
       #E6DCE0  la misma nube, un paso más densa
       #2B4E7A  azul de nube profundo (medido #254772 / #346396)
       #241318  la brasa: el rojo #79181C llevado a casi negro
       #DB5E28  el fénix dorado → oscurecido a #A8380F para texto */

  --fondo:            #F4EFF0;
  --fondo-suave:      #E6DCE0;
  --fondo-medio:      #2B4E7A;
  --fondo-oscuro:     #241318;

  --acento:           #A8380F;   /* 5.70:1 sobre --fondo */
  --acento-oscuro:    #7A2409;   /* hover: 8.72:1 con texto claro */
  --acento-claro:     #E8B583;   /* 9.62:1 sobre --fondo-oscuro */
  --acento-texto:     #A8380F;

  --texto:            #241B22;   /* 14.70:1 sobre --fondo */
  --texto-suave:      #5C4A52;   /*  7.22:1 sobre --fondo */
  --texto-claro:      #F6EDE6;   /* 15.38:1 sobre --fondo-oscuro */
  --texto-claro-suave:#D6BDB0;   /*  9.96:1 sobre --fondo-oscuro */

  /* Los otros dos libros traen su propio color, sacado de SU tapa.
     No se los pinta con la paleta de este libro: son otros mundos. */
  --isla:             #6B4A2A;   /* sepia de La isla de los deformados */
  --isla-fondo:       #EFE2CC;
  --muerto:           #124A4B;   /* verde bosque de La historia de un muerto */
  --muerto-fondo:     #D8E2DA;

  /* ── TIPOGRAFÍAS ────────────────────────────────────────────
     Tres papeles, tres familias, todas alojadas acá:

       Fraunces  — display. Serif variable de serifas acampanadas
                   (SOFT 100, WONK 1): tiene la calidez dibujada a
                   mano que rima con la acuarela y con la letra
                   manuscrita del título de tapa, sin ser script.
                   Se usa CON RESTRICCIÓN: h1, títulos y capitular.
       Newsreader— lectura. La voz del libro: sinopsis y adelanto.
       Karla     — interfaz. Sólo etiquetas, botones y fichas. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-serif:   'Fraunces', Georgia, serif;      /* lo consume el núcleo para h1-h3 */
  --font-lectura: 'Newsreader', Georgia, serif;
  --font-sans:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

  /* ── FORMA ──────────────────────────────────────────────────
     Radios chicos: esto es un libro, no una app. */
  --radio-sm: 2px;
  --radio-md: 3px;

  /* Sombras con el azul de la nube adentro, nunca negro puro. */
  --sombra-foto:       18px 18px 44px rgba(43, 78, 122, 0.20), 0 0 0 1px rgba(36, 19, 24, 0.07);
  --sombra-foto-hover: 22px 22px 54px rgba(43, 78, 122, 0.26), 0 0 0 1px rgba(36, 19, 24, 0.09);

  --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; }
}

/* ── TIPOGRAFÍAS ALOJADAS ─────────────────────────────────────
   Variables, un archivo por familia, subconjunto latino. Los ejes
   de Fraunces vienen fijados desde Google (opsz 144, SOFT 100,
   WONK 1): es la versión display, blanda y con la "g" de una sola
   panza. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-var.woff2') format('woff2-variations');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ── AJUSTES AL NÚCLEO ────────────────────────────────────────
   El núcleo se carga DESPUÉS de este archivo, así que para pisarlo
   hace falta un selector más específico. De ahí el `body` adelante.

   Qué se pisa y por qué: el núcleo asume prosa en sans peso 300
   (era el sistema de Lucía). Acá la prosa es la voz de la novela y
   va en Newsreader. */
body .prosa {
  font-family: var(--font-lectura);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
}
body .prosa strong { font-weight: 600; }

body h1, body h2, body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}

body .cita-interna {
  font-family: var(--font-lectura);
  font-size: 1.125rem;
  line-height: 1.65;
}

/* La volanta: Karla, muy tracked. Es la única mayúscula de la web. */
body .ojo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
}

body .boton { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.01em; }

/* ── SECCIONES: EL ARCO ───────────────────────────────────────
   claro → nube → BRASA → claro → nube → cielo profundo */
.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-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: var(--espacio-md);
}

/* ═══ HERO · TAPA PROTAGONISTA ═════════════════════════════════
   El eje de esta web es que alguien compre el libro, así que la
   tapa manda y el botón de compra está arriba de todo. El cielo de
   la propia tapa sangra por el borde superior y se desvanece: la
   página empieza dentro de la ilustración. */
.hero {
  position: relative;
  padding: var(--espacio-2xl) 0 var(--espacio-xl);
  overflow: hidden;
}

.hero__cielo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  z-index: 0;
  pointer-events: none;
  /* IMPRESCINDIBLE. El velo de abajo (::after) cubre exactamente la
     caja de este contenedor. Si la imagen se mueve o se escala por
     dentro —parallax, hover, lo que sea— y no está clipeada, el
     sobrante asoma por el borde de abajo SIN velo: aparece una
     franja saturada, de canto duro, cruzando toda la pantalla.
     Pasó acá con el data-parallax del template. */
  overflow: hidden;
}
.hero__cielo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* El desvanecido va hacia --fondo, no a transparente: si no, se ve
   el borde recto de la imagen.

   Por qué el cielo va desenfocado y no nítido: la primera prueba usó
   la banda tal cual y las dos aves quedaban justo detrás del título.
   Competían con la tapa, que está a diez centímetros mostrando lo
   mismo mejor. Desenfocada, la banda hace lo que tiene que hacer
   —poner la página adentro de la acuarela— y deja leer. De paso el
   archivo pasó de 105 KB a 6 KB. */
.hero__cielo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(244, 239, 240, 0.30) 0%,
    rgba(244, 239, 240, 0.56) 42%,
    rgba(244, 239, 240, 0.88) 76%,
    var(--fondo) 100%);
}

.hero .contenedor { position: relative; z-index: 1; }

.hero__grilla {
  display: grid;
  grid-template-columns: minmax(230px, 340px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* min-width:0 o la columna de texto se niega a achicarse por debajo
   de su palabra más larga (el ISBN) y la página se va de ancho en
   móvil. Pasó en la primera prueba. */
.hero__grilla > * { min-width: 0; }

.hero__tapa {
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-foto);
  transition: transform 0.5s var(--suave), box-shadow 0.5s var(--suave);
}
@media (hover: hover) {
  .hero__tapa:hover { transform: translateY(-4px); box-shadow: var(--sombra-foto-hover); }
}

.hero__titulo {
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0.5rem 0 0.75rem;
}

.hero__autora {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

/* La línea del hero es del capítulo 1, textual. No hay copy
   inventado en esta página. */
.hero__gancho {
  font-family: var(--font-lectura);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--texto);
  max-width: 26ch;
  margin: var(--espacio-md) 0 0.5rem;
}
.hero__fuente {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-sm) var(--espacio-md);
  margin-top: var(--espacio-lg);
}

.hero__ficha-corta {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--texto-suave);
  line-height: 1.5;
}

/* El canal humano: enlace, no botón, y pegado al CTA. Esta página
   vende, así que NO lleva WhatsApp flotante — en móvil taparía el
   botón de compra justo cuando se lo está por tocar. */
.consulta {
  display: block;
  margin-top: var(--espacio-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--texto-suave);
}
.consulta a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.consulta a:hover { color: var(--acento-oscuro); }

@media (max-width: 780px) {
  .hero { padding-top: var(--espacio-xl); }
    /* Nada de `justify-items: start` acá: hace que el ítem se mida por
     su contenido máximo y se desborde de la columna. La tapa se limita
     con su propio max-width. */
  .hero__grilla { grid-template-columns: minmax(0, 1fr); }
  /* Apiladas, las tapas van centradas. Alineadas a la izquierda como
     el texto dejan un hueco muerto a la derecha que no se lee como una
     decisión sino como un error de maquetado. */
  .hero__tapa { max-width: 230px; margin-inline: auto; }
  .hero__cielo { height: 40%; }
  .hero__gancho { max-width: none; }
}

/* En pantalla angosta la revela direccional no aporta: el
   desplazamiento lateral queda casi del ancho del margen y, si la
   sección no tuviera overflow:hidden, empujaría la página. Pasa a
   entrada vertical. */
@media (max-width: 780px) {
  body .revela-izq, body .revela-der { transform: translateY(16px); }
  body .revela-izq.visible, body .revela-der.visible { transform: translateY(0); }
}

@media (max-width: 560px) {
  .hero__acciones { flex-direction: column; align-items: flex-start; }
  .hero__acciones .boton { width: 100%; justify-content: center; }
}

/* ═══ EL ADELANTO · LA PÁGINA IMPRESA ══════════════════════════
   El recurso propio de esta web. El adelanto no se maqueta como
   "un bloque de texto de la web": se maqueta como el libro que el
   lector va a tener en la mano. Los números del margen son los
   folios REALES del impreso —7, 8, 9— puestos exactamente donde
   arranca cada página de papel. Refuerzan lo que ya es cierto: no
   hay una palabra de más ni de menos respecto del libro.

   Cómo se posiciona el folio en medio de un párrafo: el span va
   `position:absolute` SIN `top`, así que cae en su posición
   estática — la línea donde efectivamente empieza la página. */
.adelanto { position: relative; }

/* Misma medida y mismo borde izquierdo que el `.medida` del resto
   de la página: dos secciones de lectura seguidas con la columna
   corrida 50px se nota, aunque nadie sepa decir por qué. El folio
   cuelga hacia afuera, en el margen. */
.adelanto__marco {
  max-width: var(--medida);
  margin: 0 auto;
  position: relative;
}

.adelanto__texto {
  font-family: var(--font-lectura);
  font-size: 1.1875rem;
  line-height: 1.85;
  color: var(--texto-claro);
}
.adelanto__texto p { position: relative; margin-bottom: 1.35em; }

/* Capitular: Fraunces grande, alineada al bloque de texto. */
.adelanto__texto > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.6em;
  line-height: 0.82;
  float: left;
  margin: 0.06em 0.08em 0 0;
  color: var(--acento-claro);
}

.folio {
  position: absolute;
  left: -4.5rem;
  width: 2.75rem;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--acento-claro);
  opacity: 0.75;
}
.folio::after {
  content: '';
  position: absolute;
  right: -1rem; top: 0.72em;
  width: 0.6rem; height: 1px;
  background: currentColor;
}

.adelanto__nota {
  max-width: var(--medida);
  margin: var(--espacio-lg) auto 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--texto-claro-suave);
}

@media (max-width: 700px) {
  .adelanto__texto { font-size: 1.0625rem; }
}

/* El folio cuelga 4.5rem a la izquierda de la columna de lectura, y
   esa columna mide `--medida` centrada dentro del contenedor. La
   cuenta del margen que le queda a la izquierda es
   (ancho - 48 de padding - 660 de medida) / 2, así que **por debajo
   de 852 px el folio ya no entra** y se va de la pantalla. Pasaba a
   768 px, o sea en cualquier tablet vertical. El corte va acá, no en
   el de 700: son dos cosas distintas y por eso son dos consultas.

   En cuanto no hay margen donde colgarlo, pasa a marca en línea. Dentro de la prosa se escribe como en una transcripción
     —filete fino y número— para que se lea "acá cambia la hoja" y no
     como un número suelto en medio de la frase. */
@media (max-width: 880px) {
  .folio {
    position: static;
    display: inline;
    width: auto;
    font-size: 0.75rem;
    margin-right: 0.4rem;
  }
  .folio::after { display: none; }
  .adelanto__texto .folio::before {
    content: '|';
    margin-right: 0.3rem;
    opacity: 0.55;
  }
  /* En el rótulo del capítulo el número abre la línea: va con punto
     medio, no con filete. */
  .adelanto__capitulo .folio::after {
    display: inline;
    position: static;
    content: '·';
    width: auto; height: auto;
    background: none;
    margin-left: 0.45rem;
  }
}

/* ═══ OTRAS OBRAS ══════════════════════════════════════════════
   Cada libro con el color de SU tapa: sepia el de la isla, verde
   bosque el del muerto. Son tres mundos distintos y la página lo
   dice sin explicarlo. */
.obras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* `start` y no el estirado por defecto: con las sinopsis abiertas
     las dos tarjetas quedan de alturas muy distintas y la corta
     arrastra medio metro de fondo vacío. */
  align-items: start;
  gap: var(--espacio-lg);
  margin-top: var(--espacio-lg);
}

.obra {
  --obra-color: var(--acento);
  --obra-fondo: var(--fondo);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--espacio-md);
  align-items: start;
  padding: var(--espacio-md);
  background: var(--obra-fondo);
  border-radius: var(--radio-md);
  border-top: 3px solid var(--obra-color);
}
.obra--isla   { --obra-color: var(--isla);   --obra-fondo: var(--isla-fondo); }
.obra--muerto { --obra-color: var(--muerto); --obra-fondo: var(--muerto-fondo); }

.obra__tapa {
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 10px 10px 24px rgba(36, 19, 24, 0.18);
}

.obra__titulo {
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--obra-color);
  margin-bottom: 0.35rem;
}
.obra__dato {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--obra-color);
  opacity: 0.8;
}
.obra__sinopsis {
  font-family: var(--font-lectura);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  margin-top: var(--espacio-sm);
}
.obra__cita {
  font-family: var(--font-lectura);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--obra-color);
  border-left: 2px solid var(--obra-color);
  padding-left: 0.9rem;
  margin-top: var(--espacio-sm);
}

/* El desplegable de cada obra: mismo mecanismo del núcleo, pero
   sobre fondo claro, así que el color del núcleo (--acento-claro,
   pensado para fondo oscuro) no sirve acá. */
.obra .leer-mas { color: var(--obra-color); }
.obra .leer-mas:hover { color: var(--texto); }

.obra__acciones {
  margin-top: var(--espacio-sm);
}

.obra__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-sm);
  margin-top: var(--espacio-md);
}
.obra .boton--principal { background: var(--obra-color); color: #FFFFFF; }
.obra .boton--principal:hover { background: var(--texto); }

.pendiente {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--texto-suave);
}

@media (max-width: 460px) {
  .obra { grid-template-columns: 1fr; }
  .obra__tapa { max-width: 150px; margin-inline: auto; }
}

/* ═══ BARRA FIJA DE COMPRA ═════════════════════════════════════
   Sin WhatsApp flotante, el hueco de 56px que el núcleo le reserva
   a la derecha queda muerto. Se lo devuelve al botón. */
.barra-compra { padding-right: 1rem; }

/* El título tiene que entrar ENTERO. Con el tamaño del núcleo se
   cortaba en "Después de la sa…", y justo en la sección de las otras
   dos obras eso importa: ahí hay otro botón de compra en pantalla, de
   otro libro, y lo único que los distingue es este título. Por eso
   también el botón se acorta a "Comprar": es el mismo verbo, ocupa
   90 px menos y se los deja al título. */
.barra-compra__titulo { font-size: 0.8125rem; }
.barra-compra .boton { padding: 0.7rem 1rem; }

/* En pantallas muy angostas (320-360 px) ni así entra en una línea.
   Antes que cortarlo con puntos suspensivos, que se parta en dos: el
   título entero importa más que la prolijidad de una sola línea. */
@media (max-width: 380px) {
  /* `.barra-compra` adelante para ganarle al `white-space: nowrap`
     del núcleo, que se carga después. */
  .barra-compra .barra-compra__titulo {
    white-space: normal;
    line-height: 1.2;
    font-size: 0.75rem;
  }
}

/* El núcleo le da aire al final del body para que la barra no tape
   el cierre. Pero el fondo del body es claro y el cierre es azul: ese
   aire quedaba como una franja crema muerta abajo de todo. El aire va
   adentro del cierre, que es azul. */
@media (max-width: 760px) {
  /* `html` adelante a propósito: el núcleo se carga DESPUÉS que este
     archivo y declara lo mismo con la misma especificidad, así que sin
     ese `html` gana él. */
  html body.con-barra { padding-bottom: 0; }
  .cierre { padding-bottom: calc(var(--espacio-xl) + 76px); }
}

/* El rótulo del capítulo va fuera del bloque de prosa para que la
   capitular caiga sobre "Durante" y no sobre el folio. */
.adelanto__capitulo {
  position: relative;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
  margin-bottom: var(--espacio-md);
}

/* Sin el párrafo explicativo debajo, el título del adelanto necesita
   su propio aire antes de que arranque el capítulo. */
.adelanto__titulo { margin-bottom: var(--espacio-lg); }

/* ═══ CIERRE · EL CIELO ════════════════════════════════════════
   La página termina en el azul profundo de las nubes de la tapa.
   No es una decisión decorativa: la novela termina en el cielo.

   Y el pie no es un pie de web: es el COLOFÓN del libro. Los datos
   son los mismos que están en la página de créditos del impreso
   (p.4). Es el cierre que le corresponde a una página que, de
   principio a fin, no dice nada que el libro no diga. */
.cierre { padding-bottom: var(--espacio-xl); }

.cierre__nucleo {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

/* El único centrado de toda la página. Después de siete secciones
   alineadas a la izquierda, centrar es una señal: se terminó. */
.cierre__titulo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 var(--espacio-md);
}

.cierre__cita {
  font-family: var(--font-lectura);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto-claro);
}
.cierre__fuente {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B9C9DE;              /* 5.04:1 sobre el azul */
  margin-top: 0.5rem;
}
.cierre__boton { margin-top: var(--espacio-lg); }

/* ── Redes ─────────────────────────────────────────────────────
   Los tres íconos son de la misma familia y del mismo grosor, y
   los tres van del color del texto. El verde de WhatsApp sobre
   este azul da 4.28:1 y no llega: el ícono con su etiqueta al lado
   ya identifica el canal sin necesidad del color de marca. */
.cierre__contacto {
  margin-top: var(--espacio-xl);
  padding-top: var(--espacio-lg);
  border-top: 1px solid rgba(246, 237, 230, 0.22);
  text-align: center;
}

.cierre__nombre {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--acento-claro);
  margin-bottom: var(--espacio-md);
}

.redes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-xs) var(--espacio-lg);
}
.redes a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.25rem;      /* área táctil cómoda */
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--texto-claro);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--suave), border-color 0.25s var(--suave);
}
.redes a:hover {
  color: var(--acento-claro);
  border-bottom-color: var(--acento-claro);
}

/* ── Crédito de la editorial ───────────────────────────────────
   Una línea, chica, centrada y muy tracked, como el pie de imprenta
   de un libro. */
.colofon {
  margin-top: var(--espacio-lg);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 2;
  letter-spacing: 0.08em;
  color: #B9C9DE;
}
.colofon a {
  color: #B9C9DE;
  /* `text-decoration` y no `border-bottom`: con el padding que le da
     área táctil al enlace, el borde se despega del texto y queda
     flotando dos líneas abajo. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.colofon a:hover { color: var(--texto-claro); }

/* La fuente de una cita interna, en la línea de abajo y más chica. */
.cita-interna__fuente {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}

/* ═══ EL EJEMPLAR ══════════════════════════════════════════════
   El CTA fuerte cae acá, justo después del adelanto: es el punto
   exacto en que el lector acaba de quedarse sin capítulo. Por eso
   el título es el dato y no una consigna de venta — el capítulo 2
   está en la página 11, y esa página está adentro del libro.

   La tapa vuelve a aparecer, más chica: en el momento de comprar
   conviene ver el objeto que se compra. */
.ejemplar__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.ejemplar__tapa {
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-foto);
}

/* ── Ficha ─────────────────────────────────────────────────────
   Filas con filete, como la página de créditos de un libro. */
.ficha {
  margin: var(--espacio-md) 0 var(--espacio-lg);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.ficha > div {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-sm);
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(36, 27, 34, 0.12);
}
.ficha > div:first-child { border-top: 1px solid rgba(36, 27, 34, 0.12); }
.ficha dt {
  color: var(--texto-suave);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding-top: 0.15em;
}
.ficha dd {
  font-weight: 500;
  text-align: right;
  /* Cifras de ancho fijo: el ISBN y las medidas no bailan. */
  font-variant-numeric: tabular-nums;
}

.ejemplar__boton { margin-bottom: 0.25rem; }

@media (max-width: 760px) {
  .ejemplar__grilla { grid-template-columns: minmax(0, 1fr); }
  /* La tapa ya se vio grande en el hero: acá, en móvil, va primero
     el argumento y la tapa queda de recordatorio, chica. */
  .ejemplar__tapa {
    order: -1;
    max-width: 180px;
    margin: 0 auto var(--espacio-md);
  }
}

/* ── Mínimos táctiles ──────────────────────────────────────────
   Los "Leer más" son botones de verdad, no enlaces dentro de una
   frase: tienen que llegar a los 44 px de alto. Con el padding del
   núcleo quedaban en 41 — medido, no estimado. */
body .leer-mas { padding: 0.9rem 0; margin: -0.9rem 0 0; }

/* Estos otros sí son enlaces en línea dentro de un texto, así que
   no les corresponde el mínimo de 44; igual se les agranda el área
   para que en el celular no haya que apuntar. */
.consulta a, .colofon a { display: inline-block; padding: 0.45rem 0.2rem; }
.consulta a { margin: -0.45rem -0.2rem; }

/* ── Foco visible sobre los fondos oscuros ─────────────────────
   Tercera trampa del núcleo con el mismo origen que las otras dos:
   asume que la página es clara. El anillo de foco es `--acento`, y
   sobre la brasa da 2.74:1 y sobre el azul del cierre 1.31:1 — o
   sea, invisible justo para quien navega con el tabulador y más lo
   necesita. Sobre fondo oscuro va el acento claro: 9.62:1 y 4.60:1. */
.seccion--oscuro a:focus-visible,
.seccion--oscuro button:focus-visible,
.seccion--medio a:focus-visible,
.seccion--medio button:focus-visible,
.barra-compra a:focus-visible {
  outline-color: var(--acento-claro);
}

/* ═══ SOBRE DANIELA ════════════════════════════════════════════
   Retrato redondo y chico a propósito. La única foto que hay es la
   misma selfie de la contratapa: 566 × 924, encuadre cerrado, luz
   plana y fondo de living. A 150 px y en círculo no se ve nada de
   eso —se ve una cara— y aguanta perfecto. A media pantalla se
   notaría todo. */
.autora {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: start;
}

/* Rectangular, no redonda. En círculo la foto se veía apretada: el
   original es un primer plano muy cerrado y la máscara redonda le
   comía el pelo y el mentón, así que quedaba una cabeza encajada a
   presión. Con el marco 3/4 del núcleo entran los hombros y algo de
   aire arriba, que es lo que hace que un retrato respire.
   Se usa `.marco-foto`, que ya trae la proporción, la sombra con
   tinte y el lift en hover. */
/* `.autora` adelante para ganarle al `aspect-ratio: 3/4` de
   `.marco-foto`: el núcleo se carga después y con la misma
   especificidad gana él. Cuarta vez que muerde lo mismo. */
.autora .autora__retrato {
  width: 100%;
  /* La proporción del propio archivo (566 × 924) y no el 3/4 del
     marco: la selfie ya viene cortada al ras de la cabeza, así que
     cualquier recorte extra le come más frente. Con su proporción
     original no se tira un solo píxel de los pocos que hay. */
  aspect-ratio: 566 / 924;
}

.autora__texto { max-width: var(--medida); }
.autora__texto .prosa + .prosa { margin-top: var(--espacio-sm); }

/* El título del libro que escribió a los quince enlaza a su tapa,
   que está en la sección de abajo. */
.autora__texto a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.autora__texto a:hover { color: var(--acento-oscuro); }

@media (max-width: 640px) {
  .autora { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: left; }
  /* Misma especificidad que la regla de arriba, si no el `width: 100%`
     se impone acá adentro y el retrato sale de 342 × 558. */
  .autora .autora__retrato { width: 170px; }
  .autora__texto { width: 100%; }
}