/* Wö Kàpi · Los Cuentos: blog.html y blog/*.html (30 de setiembre de 2026)
   Carga después de las hojas del sistema (SISTEMA.md §2); la versión (?v=) la pone
   construir-articulos.py. Páginas de lectura en crema (.banda--lectura): una columna de
   760 px que arranca en la línea del logo, el texto en la medida de lectura (38rem) y las
   letras del sistema. Sin tarjetas, sin sombras, sin giros ni capas. */

.cuento-columna { max-width: 760px; }

/* ── Índice ────────────────────────────────────────────────────────────── */
.cuentos-cabeza { margin-bottom: var(--aire-zona); }
.cuentos-cabeza .bajada { max-width: var(--medida); }

.cuentos-enlace {
  display: block;
  color: inherit;
  text-decoration: none;
}
.cuentos-enlace:hover .titulo-seccion,
.cuentos-enlace:hover .titulo-pieza {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

/* El destacado: la única foto del índice. */
.cuentos-destacado { margin: 0 0 var(--aire-zona); }
.cuentos-destacado-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio);
}
.cuentos-destacado .titulo-seccion { margin-top: var(--aire-bloque); }

/* Las demás: título y su línea, separadas por filetes. */
.cuentos-lista > li { padding: 0; }
.cuentos-lista .cuentos-enlace { padding: var(--aire-bloque) 0; }
.cuentos-linea {
  margin: 8px 0 0;
  max-width: var(--medida);
}
.cuentos-destacado .cuentos-linea { margin-top: 12px; }

/* ── Artículo ──────────────────────────────────────────────────────────── */
.cuento-cabeza .bajada { max-width: var(--medida); }
.cuento-portada {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--aire-zona) 0;
  border-radius: var(--radio);
}

.cuento-texto > * { max-width: var(--medida); }
.cuento-texto > :first-child { margin-top: 0; }
.cuento-texto p { margin: 0 0 16px; }
.cuento-texto h2.titulo-seccion { margin: var(--aire-zona) 0 16px; }
.cuento-texto h3.titulo-pieza { margin: var(--aire-bloque) 0 8px; }

.cuento-lista {
  margin: 0 0 16px;
  padding-left: 1.2em;
}
.cuento-lista > li { margin: 0 0 8px; padding-left: 4px; }

/* Una foto del plato dentro del texto, a lo ancho de la columna. */
.cuento-figura { margin: 40px 0; max-width: none; }
.cuento-figura img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--radio);
}
.cuento-figura figcaption { margin-top: 12px; }

/* Una cita: Recoleta a 20, con un filete a la izquierda que la separa del texto. */
.cuento-cita {
  margin: 40px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--linea);
}
.cuento-cita p:first-child {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-pieza);
  font-weight: 700;
  line-height: 1.35;
}
.cuento-cita .nota { margin: 12px 0 0; }

/* Precios: filas del sistema, el nombre y el precio en el mismo renglón. */
.cuento-precios { margin: 24px 0 24px; }
.cuento-precios > li { padding: 14px 0; }
.cuento-precios .renglon > p { margin: 0; }
.cuento-precios-nombre { font-weight: 700; }
.cuento-precios .nota { margin: 4px 0 0; }

/* La firma, el cierre y «Leé también». Con .cuento-texto delante: «.cuento-texto p» pone
   0 0 16px y les ganaba a estas reglas solas. */
.cuento-texto .cuento-firma { margin: var(--aire-zona) 0 0; }
.cuento-texto .cuento-cierre {
  margin: var(--aire-bloque) 0 0;
  padding-top: var(--aire-bloque);
  border-top: 1px solid var(--linea);
}
.cuento-texto .cuento-cierre .renglon { margin-bottom: 8px; }
.cuento-texto .cuento-cierre .renglon > p { margin: 0; }
.cuento-texto .cuento-cierre > p { margin: 0; }
.cuento-texto .cuento-cierre > .cuento-cierre-accion { margin: var(--aire-bloque) 0 0; }
.cuento-texto .cuento-sigue { margin: var(--aire-zona) 0 0; }

/* Enlaces dentro de una frase (texto, listas, «Leé también» y los teléfonos .enlace-tel):
   44 px de toque sin mover los renglones, a cualquier ancho. La caja de la letra mide 15 px a 17 y 17 a 18
   (14 en .nota, de 16). El relleno va 12 arriba y 17 abajo (11 y 19 en .nota): 44 a 46 de
   alto. Arriba no llega a las letras del renglón anterior (entra 1 a 2 px en su interlineado
   y no en la letra); abajo sí entra en la zona alta del renglón siguiente, pero ese renglón se
   pinta después y un toque ahí le llega a él. 2 px a cada lado, devueltos con un margen
   negativo, llevan una palabra corta («menú») a 44 de ancho. El relleno no se dibuja.
   El botón del cierre ya mide lo suyo. */
.cuento-texto p a:not(.boton),
.cuento-texto li a:not(.boton) { padding: 12px 2px 17px; margin: 0 -2px; }
.cuento-texto .nota a { padding: 11px 2px 19px; }