/* ═══════════════════════════════════════════════════════════════
   NÚCLEO — Tinta de Luz
   ───────────────────────────────────────────────────────────────
   Esto NO se toca de web a web. Son los componentes probados que
   se reutilizan siempre: reset, prosa legible, citas, marcos de
   foto, animaciones, botones, WhatsApp flotante, barra fija.

   Lo que SÍ cambia en cada web va en `piel.css`: los colores
   sacados de la tapa, las tipografías y el gesto propio de ese
   libro. Este archivo consume las variables que define aquél.

   Origen: extraído de la web de Lucía Manfredi (agosto 2026),
   la primera hecha con este sistema.
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET Y BASE ─────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-sans);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

.contenedor {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.medida { max-width: var(--medida); margin: 0 auto; }

h1, h2, h3, blockquote {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
}

/* ── PROSA LEGIBLE ────────────────────────────────────────────── */
/* Peso liviano + interlineado generoso. Es lo que hace que un
   párrafo largo (bio, sinopsis, prefacio) se sienta aireado en vez
   de una pared de texto. Requiere el peso 300 de la sans. */
.prosa {
  font-weight: 300;
  line-height: 1.85;
}
.prosa strong { font-weight: 500; }

/* ── VOLANTA ──────────────────────────────────────────────────── */
/* La etiqueta chica en mayúsculas arriba de cada sección.
   OJO: en mayúsculas y a 11px necesita más contraste del que
   parece — verificá el color con contraste.py. */
.ojo {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

/* ── TÍTULO A DOS TONOS ───────────────────────────────────────── */
/* Primera línea en romana, segunda en itálica y color de acento.
   Recurso tomado de evelynescribe.com. Uso:
   <h2 class="titulo-doble">De Adrogué a Madrid,<em>un sueño cumplido.</em></h2> */
.titulo-doble {
  font-weight: 400;
  line-height: 1.22;
}
.titulo-doble em {
  display: block;
  margin-top: 0.15em;
  font-style: italic;
  color: var(--acento);
}

/* ── CITA INTERNA ─────────────────────────────────────────────── */
/* Corta un bloque largo de texto sin ser un cartel. Va DENTRO de
   la prosa, no como sección aparte. El texto tiene que salir del
   propio material del autor, nunca inventado. */
.cita-interna {
  margin: var(--espacio-md) 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--acento);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: 52ch;
}

/* ── FILETE DEGRADADO ─────────────────────────────────────────── */
.filete {
  width: 48px;
  height: 1px;
  margin: var(--espacio-md) 0;
  background: linear-gradient(90deg, var(--acento), var(--acento-claro), transparent);
}

/* ── MARCO DE FOTO ────────────────────────────────────────────── */
/* Proporción fija + sombra CON TINTE del color de marca, nunca
   negra genérica. Es lo que hace que una foto se sienta puesta a
   propósito y no pegada tal cual salió de la cámara. */
.marco-foto {
  aspect-ratio: 3 / 4;
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-foto);
  transition: transform 0.4s var(--suave), box-shadow 0.4s var(--suave);
}
.marco-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--suave);
}

@media (hover: hover) {
  .marco-foto:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-foto-hover);
  }
  .marco-foto:hover img { transform: scale(1.045); }
}

/* ── ANIMACIONES DE ENTRADA ───────────────────────────────────── */
/* `.revela` sube; `.revela-izq` / `.revela-der` entran desde los
   costados — usalas en pares (foto de un lado, texto del otro)
   para que la entrada tenga dirección y no suba todo parejo. */
.revela {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--suave), transform 0.7s var(--suave);
}
.revela.visible { opacity: 1; transform: translateY(0); }

.revela-izq, .revela-der {
  opacity: 0;
  transition: opacity 0.75s var(--suave), transform 0.75s var(--suave);
}
.revela-izq { transform: translateX(-24px); }
.revela-der { transform: translateX(24px); }
.revela-izq.visible, .revela-der.visible { opacity: 1; transform: translateX(0); }

/* ── ACCESIBILIDAD ────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── BOTONES ──────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radio-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--suave), background 0.25s var(--suave), border-color 0.25s var(--suave);
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--principal {
  background: var(--acento);
  color: var(--texto-claro);
}
.boton--principal:hover { background: var(--acento-oscuro); }

.boton--linea {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.boton--linea:hover { background: rgba(0,0,0,0.05); }

.boton--linea-claro {
  background: transparent;
  border-color: var(--texto-claro-suave);
  color: var(--texto-claro);
}
.boton--linea-claro:hover {
  border-color: var(--texto-claro);
  background: rgba(255,255,255,0.06);
}

/* ── LEER MÁS ─────────────────────────────────────────────────── */
/* Para no asustar con un bloque largo de entrada. Se muestran los
   primeros párrafos y el resto se despliega.
   Necesita el JS de main.js y esta estructura:
     <button class="leer-mas" aria-expanded="false" aria-controls="X">
       <span>Leer más</span> <svg…/>
     </button>
     <div id="X" hidden>…</div> */
.leer-mas {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--acento-claro);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.75rem 0;
  margin: -0.75rem 0 0;
}
.leer-mas svg { transition: transform 0.35s var(--suave); }
.leer-mas:hover { color: var(--texto-claro); }
.leer-mas[aria-expanded="true"] svg { transform: rotate(180deg); }

.desplegable {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.45s var(--suave), transform 0.45s var(--suave);
}
.desplegable.abierto { opacity: 1; transform: translateY(0); }

/* ── WHATSAPP FLOTANTE ────────────────────────────────────────── */
/* Va SIEMPRE, en todas las webs (decisión de Francisco).
   Verde de marca de WhatsApp a propósito, no el de la paleta del
   sitio: es un ícono de sistema que se tiene que reconocer al toque. */
.whatsapp-flotante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 100;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s var(--suave), box-shadow 0.25s var(--suave);
}
.whatsapp-flotante:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
.whatsapp-flotante:focus-visible {
  outline: 2px solid var(--texto-claro);
  outline-offset: 3px;
}

/* ── BARRA FIJA DE COMPRA (móvil) ─────────────────────────────── */
/* Aparece al scrollear para que no haya que buscar el botón.
   Sólo en móvil: en escritorio el botón de la sección del libro
   queda a la vista y una barra fija sería intrusiva.
   Deja lugar al WhatsApp flotante a la derecha. */
.barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  padding-right: calc(1rem + 56px + 0.75rem);
  background: var(--fondo-oscuro);
  border-top: 1px solid rgba(255,255,255,0.12);
  transform: translateY(110%);
  transition: transform 0.35s var(--suave);
}
.barra-compra.visible { transform: translateY(0); }

.barra-compra__titulo {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--texto-claro);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-compra .boton {
  padding: 0.7rem 1.1rem;
  font-size: 0.875rem;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .barra-compra { display: flex; }
  /* El contenido del final necesita aire para no quedar tapado. */
  body.con-barra { padding-bottom: 76px; }
}