/* ═══════════════════════════════════════════════════════════════
   PIEL — David Grilli · Ser docentes en tiempos complejos
   ───────────────────────────────────────────────────────────────
   Todo sale de la tapa (portada2.pdf, arte de imprenta):
   la niebla azul, la luz del horizonte y el naranja #F47720 del
   título. Un hombre de espaldas camina hacia la luz: la página
   hace el mismo recorrido. Arranca en la escena de la tapa, de
   noche, y cruza UNA vez el horizonte — justo donde entra el
   libro. De ahí en adelante, luz.

   Tipografías: Figtree (afirma, como la Gotham redonda de la tapa)
   y Literata (la voz del libro: las preguntas, el adelanto, la bio).

   Recordá: piel.css carga ANTES que nucleo.css. Para pisar el
   núcleo hace falta más especificidad (`html` adelante).
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('../fonts/literata-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('../fonts/literata-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* ── COLORES — medidos en la tapa, contrastes verificados ──── */
  --noche:            #121A2E;   /* el cielo de arriba, oscurecido */
  --azul:             #1E3155;   /* la niebla densa */
  --acero:            #476891;   /* la niebla media — sólo decorativo */
  --niebla:           #A9B9CA;   /* texto secundario sobre noche: 8.64:1 */
  --luz:              #F2F4F7;   /* la luz del horizonte: fondo claro */
  --luz-honda:        #E4E9EF;   /* filetes y planos sobre luz */
  --naranja:          #F47720;   /* el título de tapa. Sólo sobre noche (6.19:1) o de relleno */
  --naranja-texto:    #B4510F;   /* el naranja legible sobre luz: 4.62:1 */

  /* Roles que consume el núcleo */
  --fondo:            var(--luz);
  --fondo-suave:      var(--luz);
  --fondo-medio:      var(--azul);
  --fondo-oscuro:     var(--noche);
  --acento:           var(--naranja-texto);
  --acento-oscuro:    #8F400B;
  --acento-claro:     var(--naranja);
  --acento-texto:     var(--naranja-texto);
  --texto:            var(--noche);  /* sobre luz: 15.71:1 */
  --texto-suave:      #4A5A73;       /* sobre luz: 6.35:1 */
  --texto-claro:      var(--luz);    /* sobre noche */
  --texto-claro-suave:var(--niebla);

  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-sans:  'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.75rem;
  --espacio-lg: 3rem;
  --espacio-xl: 5rem;
  --espacio-2xl: 8rem;

  --radio-sm: 2px;
  --radio-md: 2px;

  --sombra-foto:       0 30px 60px -20px rgba(18, 26, 46, 0.45), 0 0 0 1px rgba(18, 26, 46, 0.08);
  --sombra-foto-hover: 0 36px 70px -20px rgba(18, 26, 46, 0.5),  0 0 0 1px rgba(18, 26, 46, 0.1);

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

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

html body { font-size: 1.0625rem; }

/* Sin JS no se esconde nada (trampa de Carina). */
html:not(.js) .revela, html:not(.js) .revela-izq, html:not(.js) .revela-der { opacity: 1; transform: none; }

/* Foco: el núcleo usa --acento, que es oscuro. Sobre noche, el naranja. */
html .sobre-noche a:focus-visible,
html .sobre-noche button:focus-visible { outline-color: var(--naranja); }

.ojo { letter-spacing: 0.2em; font-size: 0.75rem; }
.sobre-noche .ojo { color: var(--niebla); }

.sobre-noche { background: var(--noche); color: var(--luz); }


/* ═══ 1 · HERO — LA ESCENA DE LA TAPA, SIN EL TÍTULO ════════════
   La tapa sin sus letras: el que mira la página queda en el lugar
   del protagonista ("podría ser cualquier docente"). Donde la tapa
   dice SER DOCENTES, acá va el dilema.
   En escritorio la escena es más angosta que la pantalla: se apoya
   sobre una versión de 48 px de sí misma, estirada y desenfocada,
   así los costados son la misma niebla y no un color inventado. */
.escena {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.escena__velo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 60% 55% at 50% 78%, #6F8DB0 0%, #3A5880 38%, rgba(30,49,85,0) 75%),
    linear-gradient(180deg, var(--noche) 0%, var(--azul) 70%, var(--noche) 100%);
}

.escena__foto {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  z-index: -2;
  display: flex;
  justify-content: center;
}
.escena__foto picture { height: 100%; }
/* La escena se disuelve en óvalo, como la propia tapa se apaga hacia
   las esquinas: no queda ningún canto recto a la vista. */
.escena__foto img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 62% at 50% 66%, #000 52%, rgba(0,0,0,0.6) 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 62% at 50% 66%, #000 52%, rgba(0,0,0,0.6) 72%, transparent 100%);
}

/* Arriba se oscurece para que el texto se lea; abajo el piso se
   funde con la noche de la sección siguiente. */
.escena::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,26,46,0.88) 0%, rgba(18,26,46,0.55) 30%, rgba(18,26,46,0) 52%),
    linear-gradient(0deg, var(--noche) 0%, rgba(18,26,46,0) 14%);
}

.escena__texto {
  max-width: 44rem;
  padding: clamp(4rem, 11vh, 7.5rem) 1.5rem 0;
  text-align: center;
}

.escena__texto .ojo { margin-bottom: 1.75rem; }

.escena__bajada {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: #DCE3EB;
  max-width: 26em;
  margin: 0 auto 1rem;
}

.escena h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.05rem, 5.4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-wrap: balance;
}
.escena h1 .mitad { display: block; white-space: nowrap; }

/* La "o" del dilema: el único naranja de la pantalla, como el
   título de la tapa. Es la bisagra entre las dos opciones. */
.escena h1 .o {
  display: block;
  margin: 0.08em 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.72em;
  color: var(--naranja);
  letter-spacing: 0;
}

.escena__ir {
  position: absolute;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--luz);
  background: none;
  border: 0;
  cursor: pointer;
}
.escena__ir svg { color: var(--naranja); transition: transform 0.3s var(--suave); }
.escena__ir:hover svg { transform: translateY(3px); }

@media (max-width: 640px) {
  .escena__foto { height: 60%; }
  .escena__texto { padding-top: 4rem; }
}


/* ═══ 2 · LO QUE ESTÁ EN JUEGO ═══════════════════════════════════ */
.en-juego { padding: var(--espacio-xl) 0 0; }

.en-juego h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 22em;
  margin: 1rem 0 1.5rem;
  text-wrap: balance;
}

.en-juego__lead {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  color: #D3DBE4;
  max-width: 34em;
}

/* En escritorio, el planteo a la izquierda y la evidencia a la
   derecha; el remate cruza abajo, solo. */
@media (min-width: 900px) {
  .en-juego__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0 clamp(3rem, 7vw, 6rem);
    align-items: start;
  }
  .en-juego__grid .fracturas { margin-top: 2.6rem; }
}

/* Las tres fracturas: cada par separado por un filete cortado al
   medio. Sin rombo ni animación: lo que dice es que está roto. */
.fracturas {
  list-style: none;
  margin: var(--espacio-lg) 0;
  max-width: 34rem;
}
.fracturas li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  border-bottom: 1px solid rgba(169, 185, 202, 0.18);
}
.fracturas li:first-child { border-top: 1px solid rgba(169, 185, 202, 0.18); }
.fracturas li span:last-child { text-align: right; }
.fracturas__corte {
  height: 1px;
  background: linear-gradient(90deg, var(--acero) 0 42%, transparent 42% 58%, var(--acero) 58% 100%);
}

.dato {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  max-width: 34rem;
  margin-bottom: var(--espacio-lg);
}
.dato__cifra {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(3.2rem, 7vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.dato__texto { font-size: 1.0625rem; line-height: 1.5; color: #D3DBE4; }
.dato__fuente { grid-column: 2; font-size: 0.8125rem; color: var(--niebla); }

.escena h1 { text-shadow: 0 2px 30px rgba(18, 26, 46, 0.45); }

.en-juego__remate {
  margin-top: var(--espacio-md);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  max-width: 22em;
}


/* ═══ EL HORIZONTE ═══════════════════════════════════════════════
   La única transición de color de toda la página, y no es un
   degradado: es la línea donde en la tapa el piso toca la niebla
   y aparece la luz. Cae exactamente donde entra el libro. */
.horizonte {
  position: relative;
  height: clamp(8rem, 18vw, 12.5rem);
  background: var(--noche);
  overflow: hidden;
}
.horizonte::before {          /* el resplandor que sube desde la línea */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140%;
  height: 200%;
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side, rgba(242,244,247,0.95) 0%, rgba(169,185,202,0.55) 30%, rgba(71,104,145,0.25) 55%, rgba(18,26,46,0) 100%);
}
.horizonte::after {           /* la línea misma */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(242,244,247,0) 0%, #FFFFFF 50%, rgba(242,244,247,0) 100%);
}


/* ═══ 3 · EL LIBRO ═══════════════════════════════════════════════ */
.libro { padding: var(--espacio-lg) 0 var(--espacio-2xl); background: var(--luz); }

.libro__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
html .libro__tapa { aspect-ratio: 900 / 1412; }   /* el núcleo le pone 3/4 */

.libro h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.9rem 0 1.5rem;
}

.libro .prosa {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--texto);
}
.libro .prosa p + p { margin-top: 1rem; }


/* ── El índice de preguntas ─────────────────────────────────────
   Los seis capítulos centrales, como un índice impreso: con guía
   de puntos y número de página. Pero en vez del título, cada
   entrada es la pregunta que ese capítulo le hace al lector — y el
   folio es la página real donde la hace. La web no contesta
   ninguna. */
.indice { margin-top: var(--espacio-xl); }
.indice__titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--noche);
}
.indice__titulo span:last-child {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.indice ol { list-style: none; }
.indice li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--luz-honda);
}

.indice__dim {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto-suave);
  padding-top: 0.45rem;
}
.indice__dim b {
  display: block;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--naranja-texto);
  margin-bottom: 0.15rem;
}

.indice__linea {
  display: flex;
  align-items: flex-end;     /* la guía sigue al último renglón */
  gap: 0.75rem;
}
.indice__pregunta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.35;
  max-width: 24em;
}
.indice__guia {
  flex: 1;
  min-width: 2rem;
  border-bottom: 2px dotted rgba(18, 26, 46, 0.28);
  margin-bottom: 0.55em;
}
.indice__folio {
  padding-bottom: 0.3em;
  font-size: 0.875rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .dato { grid-template-columns: 1fr; }
  .dato__fuente { grid-column: 1; }
  .indice__titulo span:last-child { display: none; }
}

@media (max-width: 760px) {
  .libro__cabeza { grid-template-columns: 1fr; }
  .libro__tapa { max-width: 230px; margin-inline: auto; }
  .indice li { grid-template-columns: 1fr; gap: 0.5rem; }
  .indice__dim { padding-top: 0; }
  .indice__dim b { display: inline; margin-right: 0.5rem; }
}


/* ── Conseguirlo ────────────────────────────────────────────────
   Una placa de noche: el naranja de relleno con texto noche da
   6.19:1, y sobre el fondo oscuro el botón se recorta solo. Sobre
   luz, ese mismo naranja daría 2.54:1 de borde. */
.conseguir {
  margin-top: var(--espacio-xl);
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: var(--radio-md);
}
.conseguir h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0.6rem 0 1.5rem;
}
.conseguir__botones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
html .conseguir .boton {
  justify-content: space-between;
  background: var(--naranja);
  color: var(--noche);
  padding: 1rem 1.25rem;
  font-weight: 600;
}
html .conseguir .boton:hover { background: #FF8A3A; }
.conseguir .boton small {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.conseguir__consulta {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--niebla);
}
.conseguir__consulta a {
  color: var(--luz);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--naranja);
}

@media (max-width: 760px) {
  .conseguir__botones { grid-template-columns: 1fr; }
}


/* ═══ 4 · ADELANTO — UNA HOJA DEL LIBRO ═════════════════════════
   El fragmento va en una hoja blanca apoyada sobre la luz, con la
   medida del libro y los folios del impreso en el margen, puestos
   donde cambia la página. Texto idéntico al papel, negritas
   incluidas. */
.adelanto { padding: 0 0 var(--espacio-2xl); }
.adelanto__cabeza { text-align: center; margin-bottom: var(--espacio-lg); }
.adelanto__cabeza h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 0.9rem;
}
.adelanto__cabeza h2 span { display: block; color: var(--naranja-texto); }

.hoja {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 7vw, 5.5rem);
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(18,26,46,0.06), 0 30px 60px -30px rgba(18,26,46,0.28);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.8;
}
.hoja h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  font-style: italic;
  margin: 2rem 0 0.75rem;
}
.hoja h3:first-child { margin-top: 0; }
.hoja p { margin-bottom: 0.9rem; text-indent: 0; }
.hoja strong { font-weight: 400; background: linear-gradient(transparent 62%, rgba(244,119,32,0.22) 62%); }
.hoja ul { margin: 0 0 1rem 1.25rem; }
.hoja li { margin-bottom: 0.15rem; }
.hoja li::marker { color: var(--naranja-texto); }
.hoja em { font-style: italic; }

.folio {
  position: absolute;
  left: 1.25rem;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .folio { position: static; display: block; margin: 1.25rem 0 0.5rem; }
  .folio::before { content: '— '; }
}

/* El desplegable del núcleo queda con un transform aunque esté
   abierto, y eso lo vuelve la referencia de los folios absolutos:
   se le montaban encima del texto. Abierto, sin transform. */
html .hoja .desplegable.abierto { transform: none; }

/* El "Leer más" del núcleo es naranja claro: sobre papel no se lee. */
html .hoja .leer-mas { color: var(--naranja-texto); margin-top: 0.25rem; }
html .hoja .leer-mas:hover { color: var(--noche); }

.adelanto__pie {
  max-width: 44rem;
  margin: 1.25rem auto 0;
  font-size: 0.875rem;
  color: var(--texto-suave);
  text-align: center;
}


/* ═══ 5 · QUIÉN LO ESCRIBIÓ ══════════════════════════════════════
   Recién acá aparece su cara. En escritorio la foto se queda quieta
   mientras corre la bio, que es larga y va entera. */
.autor { padding: var(--espacio-2xl) 0; border-top: 1px solid var(--luz-honda); }
.autor__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.autor__foto { position: sticky; top: 2rem; }
.autor__foto .marco-foto { aspect-ratio: 900 / 1345; }
.autor__foto figcaption {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

.autor h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0.9rem 0 1.25rem;
}
.credenciales {
  list-style: none;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-top: 1px solid var(--noche);
  border-bottom: 1px solid var(--luz-honda);
  font-size: 0.875rem;
  color: var(--texto-suave);
}
.credenciales li { padding-left: 1rem; position: relative; }
.credenciales li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.45rem; height: 1px;
  background: var(--naranja);
}

html .autor .prosa {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
  max-width: 36em;
}
.autor .prosa p + p { margin-top: 1rem; }
html .autor .cita-interna {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.4;
  color: var(--noche);
  border-left-color: var(--naranja);
  margin: 2rem 0;
}
.autor__remate {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--luz-honda);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.35;
  max-width: 24em;
}

@media (max-width: 860px) {
  .autor__grid { grid-template-columns: 1fr; }
  .autor__foto { position: static; max-width: 340px; margin-inline: auto; width: 100%; }
}


/* ═══ 6 · CIERRE ═════════════════════════════════════════════════ */
.cierre {
  padding: var(--espacio-2xl) 0 var(--espacio-xl);
  text-align: center;
  border-top: 1px solid var(--luz-honda);
}
.cierre h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
  line-height: 1.3;
  max-width: 22em;
  margin: 0 auto 2.25rem;
  text-wrap: balance;
}
html .cierre .boton--noche {
  background: var(--noche);
  color: var(--luz);
}
html .cierre .boton--noche:hover { background: var(--azul); }
.cierre .boton--noche svg { color: var(--naranja); }

.contacto { margin-top: var(--espacio-xl); }
.contacto ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
}
.contacto a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid #C9D2DD;
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--noche);
  transition: border-color 0.25s var(--suave), background 0.25s var(--suave);
}
.contacto a:hover { border-color: var(--noche); background: #FFFFFF; }
.contacto svg { flex-shrink: 0; color: var(--azul); }


/* ═══ PIE ═══════════════════════════════════════════════════════ */
html .pie {
  padding: 2rem 0 2.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}
html .pie a {
  color: var(--naranja-texto);
  border-bottom: 0;
  padding: 0.5rem 0;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
html .pie a:hover { color: var(--noche); }


/* ── Cita, para quién y ficha ──────────────────────────────────── */
.libro__cita {
  margin-top: 1.75rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--naranja);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--texto-suave);
  max-width: 32em;
}

.libro__datos {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: var(--espacio-xl);
}
.libro__paraquien p:last-child {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* Ficha con filetes: se lee como la página de créditos de un libro. */
.ficha div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--luz-honda);
  font-size: 0.9375rem;
}
.ficha div:first-child { border-top: 1px solid var(--noche); }
.ficha dt { color: var(--texto-suave); }
.ficha dd { font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 760px) {
  .libro__datos { grid-template-columns: 1fr; }
}


/* ═══ AJUSTES DE LA AUDITORÍA (14/10) ════════════════════════════ */

/* La primera pantalla tiene que decir qué es esto: una firma chica
   bajo el dilema, como en la web de referencia del cliente. */
.escena__firma {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--niebla);
}
.escena__firma cite { font-style: normal; color: var(--luz); font-weight: 500; white-space: nowrap; }
.escena__firma span { white-space: nowrap; }
.escena__firma span::before { content: ' · '; }
@media (max-width: 640px) {
  .escena__firma cite { display: block; }
  .escena__firma span::before { content: ''; }
}

/* El hero no ocupa la pantalla entera: deja asomar el principio de
   la sección siguiente, para que no parezca que la página terminó. */
.escena { min-height: calc(100vh - 4.5rem); min-height: calc(100svh - 4.5rem); }
@media (max-width: 640px) {
  .escena { min-height: calc(100vh - 6.5rem); min-height: calc(100svh - 6.5rem); }
}
html .en-juego { padding-top: 2.25rem; }

.fracturas__rotulo { margin-top: var(--espacio-lg); }
html .fracturas { margin-top: 0.85rem; }
@media (min-width: 900px) {
  .en-juego__grid .fracturas__rotulo { margin-top: 2.6rem; }
  html .en-juego__grid .fracturas { margin-top: 0.85rem; }
}
.en-juego__remate span { color: var(--naranja); }

/* Menos aire entre secciones claras: con 8rem arriba y 8rem abajo
   quedaban 260 px vacíos, un tercio de pantalla de escritorio. */
html .libro { padding-bottom: var(--espacio-xl); }
html .adelanto { padding-bottom: var(--espacio-xl); }
html .autor { padding: var(--espacio-xl) 0; }
html .cierre { padding: var(--espacio-xl) 0 var(--espacio-lg); }
html .contacto { margin-top: var(--espacio-lg); }


/* ── Desplegables nativos ──────────────────────────────────────
   <details>: sin JS propio, con teclado, y Google lee lo de adentro
   aunque esté cerrado. El summary lleva el tema y una invitación. */
.desp { border-top: 1px solid var(--luz-honda); border-bottom: 1px solid var(--luz-honda); }
.desp > summary {
  display: block;
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--noche);
  transition: color 0.2s var(--suave);
}
.desp > summary::-webkit-details-marker { display: none; }
.desp > summary:hover { color: var(--naranja-texto); }
.desp > summary:focus-visible { outline: 2px solid var(--naranja-texto); outline-offset: 3px; }
.desp > summary::after {           /* el + que gira y queda × */
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 1.45rem;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--naranja-texto), var(--naranja-texto)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--naranja-texto), var(--naranja-texto)) center / 1.5px 13px no-repeat;
  transition: transform 0.3s var(--suave);
}
.desp[open] > summary::after { transform: rotate(135deg); }
.desp__gancho {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--naranja-texto);
}
.desp[open] .desp__gancho { display: none; }
.desp__cuerpo { padding: 0 0 1.5rem; }
.desp[open] .desp__cuerpo { animation: desp-aparece 0.4s var(--suave) both; }
@keyframes desp-aparece {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.desp--ficha { align-self: start; }
.desp--ficha .ficha div:first-child { border-top: 0; }
.desp--historia { margin-top: 1.75rem; max-width: 36em; }
html .autor .desp--historia .cita-interna { margin: 1.5rem 0; }

/* En celular el retrato va apaisado: vertical se comía casi
   600 px antes del nombre. */
@media (max-width: 860px) {
  html .autor__foto { max-width: none; }
  html .autor__foto .marco-foto { aspect-ratio: 4 / 3; }
  .autor__foto .marco-foto img { object-position: 50% 22%; }
}


/* ── Barra fija de compra (celular) ─────────────────────────────
   Sin WhatsApp flotante: se le saca el hueco que el núcleo le
   reserva a la derecha. Y se va mientras la placa de compra está
   en pantalla. */
html .barra-compra {
  padding-right: 1rem;
  background: var(--noche);
  border-top: 1px solid rgba(169, 185, 202, 0.18);
}
html .barra-compra__titulo { font-family: var(--font-serif); font-style: italic; }
html .barra-compra .boton {
  background: var(--naranja);
  color: var(--noche);
  font-weight: 600;
}
html .barra-compra .boton:focus-visible { outline-color: var(--naranja); }
html body.placa-visible .barra-compra { transform: translateY(110%); }

/* En celular la tapa va en miniatura al lado del título, como una
   ficha de librería: sola arriba ocupaba 361 px. El bloque de texto
   se "disuelve" en la grilla para que el título quede junto a la
   tapa y la sinopsis corra abajo a todo el ancho. */
@media (max-width: 760px) {
  html .libro__cabeza {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    align-items: end;
  }
  .libro__cabeza > .revela-der { display: contents; }
  html .libro__tapa { grid-row: 1 / span 2; max-width: none; margin: 0; align-self: start; }
  .libro__cabeza .ojo { grid-column: 2; grid-row: 1; align-self: end; }
  html .libro h2 { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 1.55rem; }
  .libro__cabeza .prosa, .libro__cabeza .libro__cita { grid-column: 1 / -1; }
  .libro__cabeza .prosa { margin-top: 1rem; }
}
/* El título entero en dos renglones: cortado con "…" se leía mal. */
html .barra-compra__titulo { white-space: normal; font-size: 0.9375rem; line-height: 1.25; }
/* Después del desplegable el filete ya lo pone él: sin doble línea. */
.desp--historia + .autor__remate { border-top: 0; margin-top: 1.5rem; padding-top: 0; }

/* En escritorio la firma caía sobre la cabeza de la silueta, en lo
   más claro de la niebla: ilegible. Va abajo a la izquierda, sobre
   la niebla oscura, como una firma al pie. */
@media (min-width: 641px) {
  .escena__firma {
    position: absolute;
    left: max(1.5rem, calc((100% - 1080px) / 2 + 1.5rem));
    bottom: clamp(1.5rem, 4.5vh, 2.75rem);
    margin: 0;
    text-align: left;
    line-height: 1.5;
  }
  .escena__firma cite { display: block; }
  .escena__firma span::before { content: ''; }
}
@media (min-width: 641px) {
  html .escena__foto { height: 60%; }
}
/* Fundido de abajo más largo: con el hero más bajo se veía el canto. */
html .escena::after {
  background:
    linear-gradient(180deg, rgba(18,26,46,0.88) 0%, rgba(18,26,46,0.55) 30%, rgba(18,26,46,0) 52%),
    linear-gradient(0deg, var(--noche) 0%, var(--noche) 4%, rgba(18,26,46,0) 24%);
}

/* ── La escena va DEBAJO del texto, no anclada al piso ──────────
   Anclada abajo, en pantallas anchas y bajas (una ventana de
   1000 × 530) la silueta subía hasta meterse detrás del título y
   la "p" de "personas" le tapaba la cabeza. Ahora es un bloque más
   de la columna: ocupa lo que queda debajo del texto, y si no hay
   lugar el hero crece en vez de encimar. */
html .escena__foto {
  position: relative;
  left: auto; right: auto; bottom: auto;
  height: auto;
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(230px, 40vh, 560px);
  margin-top: -1.25rem;
}
html .escena__foto picture {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}

/* En escritorio el botón va abajo a la derecha, en espejo con la
   firma: centrado caía sobre las piernas de la silueta en pantallas
   bajas. El centro queda para el que camina. */
@media (min-width: 641px) {
  html .escena__ir {
    left: auto;
    right: max(1.5rem, calc((100% - 1080px) / 2 + 1.5rem));
    transform: none;
    bottom: clamp(1.5rem, 4.5vh, 2.75rem);
    flex-direction: row;
    gap: 0.6rem;
    padding: 0.75rem 0 0.75rem 1rem;
  }
  html .escena__ir:hover svg { transform: translateY(3px); }
}