/* =========================================================================
   Páginas de texto (las legales) y el 404: una columna de lectura cómoda,
   con la misma cabecera y pie que el resto (base.css). La barra de WhatsApp
   del celular es la misma de la lista y la portada.
   ========================================================================= */
.lectura {
  max-width: calc(42rem + 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(2.5rem, 1.8rem + 3vw, 5rem) var(--margen) clamp(3rem, 2rem + 4vw, 6rem);
}
.lectura-titulo {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
.lectura-cuerpo {
  margin-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  color: var(--tinta-2);
}
.lectura-cuerpo > * + * { margin-top: 1em; }
.lectura-cuerpo h2 {
  margin-top: 2.2em;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.lectura-cuerpo h3 { margin-top: 1.8em; font-size: 1.125rem; color: var(--tinta); }
.lectura-cuerpo ul, .lectura-cuerpo ol { padding-left: 1.25em; }
.lectura-cuerpo li + li { margin-top: 0.4em; }
.lectura-cuerpo strong { color: var(--tinta); font-weight: 700; }
.lectura-cuerpo a {
  color: var(--enlace);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.lectura-cuerpo a:hover { text-decoration-thickness: 2px; }
.lectura-acciones { margin-top: 2rem; }

/* =========================================================================
   Barra fija de WhatsApp, sólo en el celular (igual a la de la portada). Sin
   JS está siempre; con JS (clase .io) aparece cuando no se ve el botón del
   cierre. scroll-padding-bottom: el foco nunca queda debajo (WCAG 2.4.11).
   ========================================================================= */
.barra-whatsapp { display: none; }
@media (max-width: 47.99rem) {
  :root { --alto-barra: 3.25rem; }
  html { scroll-padding-bottom: calc(var(--alto-barra) + 1.5rem); }
  .pie { padding-bottom: calc(var(--alto-barra) + 1rem + env(safe-area-inset-bottom, 0px)); }
  .barra-whatsapp {
    position: fixed;
    z-index: 10;
    left: var(--margen);
    right: var(--margen);
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--alto-barra);
    padding: 0.5rem 1rem;
    border-radius: var(--radio);
    background: var(--navy);
    color: var(--hueso);
    box-shadow: 0 10px 24px -12px rgb(10 22 40 / .55);
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
    transition: translate 260ms var(--ease-out), opacity 200ms ease, visibility 0s linear 0s;
  }
  .barra-whatsapp svg { flex: none; width: 1.25em; height: 1.25em; color: var(--turquesa); }
  .io .barra-whatsapp:not(.a-la-vista) {
    translate: 0 calc(100% + 1rem);
    opacity: 0;
    visibility: hidden;
    transition: translate 260ms var(--ease-out), opacity 200ms ease, visibility 0s linear 260ms;
  }
}