/* ============================================================
   carmenleo.com — La línea de tinta
   El hilo de identidad de toda la web. Nace en la marca (el pie de
   la L es un renglón que acaba en un punto final dorado) y reaparece
   como subrayado a mano, como línea junto a la escena, como renglones
   del cuaderno y como barra de lectura. Todo lo que se "dibuja" lo
   hace una vez, despacio, y se queda quieto.
   ============================================================ */

/* ---------- La marca ---------- */

.marca {
  display: block;
  width: 1.6em;
  height: 1.6em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.marca__punto { fill: var(--luz); stroke: none; }
.papel .marca__punto,
[data-luz="trabajo"] .marca__punto { fill: var(--luz-tinta); }
.cabecera .marca__punto { fill: var(--luz); }

/* Cabecera: la marca acompaña al nombre */
.cabecera__nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.cabecera__nombre .marca { width: 1.35em; height: 1.35em; stroke-width: 6; }

/* Portada: la marca grande se escribe sola al entrar */
.marca--grande {
  width: clamp(3.2rem, 5vw, 4.4rem);
  height: clamp(3.2rem, 5vw, 4.4rem);
  margin-bottom: var(--esp-4);
  stroke-width: 3.4;
  color: var(--luz-clara);
}
.marca--dibujar path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trazar 1500ms var(--curva) forwards;
}
.marca--dibujar path + path { animation-delay: 900ms; animation-duration: 1300ms; }
.marca--dibujar .marca__punto {
  opacity: 0;
  transform-origin: 95.5px 66px;
  animation: punto-final 600ms var(--curva) 2100ms forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes punto-final {
  0%   { opacity: 0; transform: scale(0.2); }
  70%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* Pie: la marca firma la página */
.pie__marca { width: 2.6rem; height: 2.6rem; stroke-width: 3.6; color: var(--hueso-apagado); }

/* ---------- El lema, palabra a palabra ---------- */

.portada__lema .palabra {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.3em);
  animation: emerger-palabra 1400ms var(--curva) forwards;
  animation-delay: calc(900ms + var(--p) * 200ms);
}
@keyframes emerger-palabra { to { opacity: 1; filter: blur(0); transform: none; } }

/* ---------- Subrayado a mano bajo los títulos ---------- */
/* Un trazo de pluma, ligeramente ondulado, que se escribe de
   izquierda a derecha cuando el bloque aparece. */

.bloque__titulo::after {
  content: "";
  display: block;
  width: 0;
  max-width: 100%;
  height: 12px;
  margin-top: 0.35em;
  background-color: var(--luz);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 78 11, 120 6 S 196 3, 238 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 7.5em 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 78 11, 120 6 S 196 3, 238 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 7.5em 100% no-repeat;
  transition: width 1300ms var(--curva) 350ms;
}
.papel .bloque__titulo::after { background-color: var(--luz-tinta); }
.visible .bloque__titulo::after,
.bloque__titulo.visible::after { width: 7.5em; }
/* Centrado en los bloques centrados */
.contacto .bloque__titulo::after,
.verso-destacado .bloque__titulo::after { margin-inline: auto; }

/* ---------- La escena de la semana ---------- */

.escena-destacada { position: relative; }

/* El número de escena, como en un libreto: grande y en hueco */
.escena-numeral {
  position: absolute;
  z-index: 0;
  top: -0.35em;
  right: 0;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(7rem, 16vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(122, 91, 37, 0.35);
  pointer-events: none;
  user-select: none;
}
.escena-destacada > *:not(.escena-numeral) { position: relative; z-index: 1; }

/* La línea de tinta que acompaña al texto mientras se lee */
.escena-destacada__texto {
  position: relative;
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
}
.escena-destacada__texto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  bottom: 0.6em;
  width: 2px;
  background: linear-gradient(var(--luz-tinta), rgba(122, 91, 37, 0.15));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1800ms var(--curva) 400ms;
}
.visible .escena-destacada__texto::before { transform: scaleY(1); }

/* ---------- El cuaderno (Talleres) ---------- */
/* Renglones y línea de margen, casi imperceptibles: la sección es
   una página del cuaderno del taller. */

.cuaderno {
  /* La línea va siempre a la izquierda del texto: a media calle del
     borde en móvil, 2rem antes de la columna en pantallas anchas */
  --margen: max(var(--gutter) / 2, (100% - var(--ancho-contenido)) / 2 - 2rem);
  background-image:
    linear-gradient(90deg,
      transparent calc(var(--margen) - 1px),
      rgba(166, 63, 69, 0.26) calc(var(--margen) - 1px),
      rgba(166, 63, 69, 0.26) var(--margen),
      transparent var(--margen)),
    repeating-linear-gradient(180deg,
      transparent 0 calc(2.1rem - 1px),
      rgba(122, 91, 37, 0.1) calc(2.1rem - 1px) 2.1rem);
}

/* ---------- Cifras que se cuentan ---------- */

.cifras strong { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Barra de lectura ---------- */
/* Una línea de tinta dorada que avanza arriba mientras se lee. */

.progreso-lectura {
  position: fixed;
  z-index: calc(var(--z-cabecera) + 1);
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--luz-honda), var(--luz));
  transform: scaleX(var(--progreso, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ---------- Movimiento reducido: todo dibujado desde el principio ---------- */

@media (prefers-reduced-motion: reduce) {
  .marca--dibujar path { animation: none; stroke-dashoffset: 0; }
  .marca--dibujar .marca__punto { animation: none; opacity: 1; }
  .portada__lema .palabra { animation: none; opacity: 1; filter: none; transform: none; }
  .bloque__titulo::after { transition: none; width: 7.5em; }
  .escena-destacada__texto::before { transition: none; transform: none; }
  .foto-pegada, .retrato-autora::before { transition: none; }
}

/* ============================================================
   La novela. La web se lee como un libro: se abre con un íncipit
   (la primera frase de la escena de esta semana), cada sección es
   un capítulo con su epígrafe y cada capítulo acaba con un gancho
   que empuja al siguiente. Al llegar, la página en blanco escribe
   el lema a mano y se retira, como una hoja que se pasa.
   ============================================================ */

/* El nombre, a escala de cubierta: dos renglones */
.portada__nombre {
  font-size: clamp(4rem, 2rem + 8.5vw, 10.5rem);
  line-height: 0.82;
  letter-spacing: -0.035em;
}
.portada__nombre span { display: block; }
.portada__nombre span + span { padding-left: 0.55em; font-style: italic; color: var(--luz-clara); }

/* Íncipit: la primera frase de la escena de la semana, como gancho */
.incipit { margin: 0 0 var(--esp-5); max-width: 32rem; }
.portada__texto > .incipit { animation-delay: 150ms; }
.incipit a { display: block; }
.incipit__rotulo {
  display: block;
  margin-bottom: var(--esp-2);
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--hueso-apagado);
}
.incipit__frase {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.4;
  color: var(--hueso);
  background-image: linear-gradient(var(--luz), var(--luz));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 900ms var(--curva);
}
.incipit a:hover .incipit__frase,
.incipit a:focus-visible .incipit__frase { background-size: 100% 1px; }
.incipit a:hover .incipit__frase::after { content: " →"; color: var(--luz); font-style: normal; }

/* Capítulo: numeración de libro, con un asterismo encima */
.capitulo { margin: 0 0 var(--esp-3); }
.capitulo span {
  display: inline-block;
  font-family: var(--fuente-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1;
  color: var(--luz);
}
.capitulo::before {
  content: "⁂";
  display: block;
  margin-bottom: var(--esp-2);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--luz);
  opacity: 0.8;
}
.papel .capitulo span,
.papel .capitulo::before { color: var(--luz-tinta); }

/* Epígrafe de capítulo: una frase de la propia autora */
.epigrafe-capitulo {
  margin: 0 0 var(--esp-5);
  max-width: 28rem;
  padding: 0;
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--hueso-apagado);
}
.papel .epigrafe-capitulo { color: var(--papel-tinta-suave); }
.epigrafe-capitulo p { margin: 0; }
.epigrafe-capitulo footer {
  margin-top: 0.3em;
  font-family: var(--fuente-ui);
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
}
.epigrafe-capitulo footer::before { content: "— "; }

/* Gancho: el final de cada capítulo empuja al siguiente */
.gancho { margin: var(--esp-6) 0 0; max-width: none; }
.gancho a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.6em;
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  color: inherit;
}
.gancho span {
  font-family: var(--fuente-ui);
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--luz-tinta);
}
.verso-destacado .gancho span { color: var(--luz); }
.gancho a::after { content: "→"; font-style: normal; color: var(--luz-tinta); transition: transform var(--dur-media) var(--curva); }
.verso-destacado .gancho a::after { color: var(--luz); }
.gancho a:hover::after { transform: translateX(6px); }
.verso-destacado .gancho { text-align: center; }

/* La página en blanco: se escribe el lema y la hoja se pasa (portada.js) */
.pagina-blanca {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  gap: 1.2rem;
  justify-items: center;
  background: var(--papel);
  color: var(--papel-tinta);
  pointer-events: none;
  transition: transform 1100ms cubic-bezier(0.7, 0, 0.2, 1), opacity 1100ms ease;
}
.pagina-blanca__lema {
  margin: 0;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 1rem + 3.4vw, 3.4rem);
  clip-path: inset(0 100% 0 0);
  animation: escribir 1700ms cubic-bezier(0.45, 0, 0.25, 1) 250ms forwards;
}
.pagina-blanca__renglon {
  position: relative;
  width: min(70vw, 34rem);
  height: 2px;
  background: var(--luz-tinta);
  transform: scaleX(0);
  transform-origin: left;
  animation: subrayar 900ms var(--curva) 1500ms forwards;
}
.pagina-blanca__renglon::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--luz);
  opacity: 0;
  animation: punto-final 500ms var(--curva) 2350ms forwards;
}
.pagina-blanca.pasada { transform: translateY(-100%); opacity: 0.6; }
@keyframes escribir { to { clip-path: inset(0 0 0 0); } }
@keyframes subrayar { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .pagina-blanca { display: none; }
  .incipit__frase { transition: none; }
}

/* Mientras la hoja está en blanco, la portada espera */
.pagina-blanca { pointer-events: auto; cursor: pointer; }
.pagina-en-blanco .portada__texto > *,
.pagina-en-blanco .portada__lema .palabra { animation-play-state: paused; }