/* Fade-in para imágenes lazy */
.img-fade {
  opacity: 0;
  transition: opacity 0.5s;
}
.img-fade.loaded {
  opacity: 1;
}

/* Fade-in para cards */
.card-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s, transform 0.6s;
}
.card-fade.visible {
  opacity: 1;
  transform: none;
}

/* Cuerpo de noticias, artículos y trucos (HTML de la BD procesado por procesar_nodo()). El Tailwind del CDN no trae el
   plugin de tipografía ("prose"), así que la tipografía de lectura vive aquí. */
.contenido-articulo {
  color: #334155;
  font-size: 1.125rem;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.contenido-articulo > * + *,
.contenido-articulo > div > * + * { margin-top: 1.25em; }
.contenido-articulo p { margin: 0 0 1.25em; font-size: inherit; line-height: inherit; }
.contenido-articulo h2,
.contenido-articulo h3,
.contenido-articulo h4 { color: #0f172a; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 1.8em 0 0.6em; }
.contenido-articulo h2 { font-size: 1.5rem; }
.contenido-articulo h3 { font-size: 1.25rem; }
.contenido-articulo h4 { font-size: 1.1rem; }
.contenido-articulo a { color: #007bb3; font-weight: 500; text-decoration: underline; text-decoration-color: rgb(0 155 219 / 0.35); text-underline-offset: 3px; }
.contenido-articulo a:hover { color: #009bdb; text-decoration-color: currentColor; }
.contenido-articulo strong, .contenido-articulo b { color: #0f172a; font-weight: 700; }
.contenido-articulo ul, .contenido-articulo ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.contenido-articulo ul { list-style: disc; }
.contenido-articulo ol { list-style: decimal; }
.contenido-articulo li { margin: 0.35em 0; }
.contenido-articulo li::marker { color: #94a3b8; }
.contenido-articulo blockquote { margin: 1.5em 0; padding: 0.25em 0 0.25em 1.1em; border-left: 4px solid #009bdb; color: #475569; font-style: italic; }
.contenido-articulo img, .contenido-articulo .img-contenido { display: block; max-width: 100%; height: auto; margin: 1.75em auto; border-radius: 0.75rem; }
.contenido-articulo p > img:only-child { margin: 0.5em auto; }
.contenido-articulo table { width: 100%; margin: 1.5em 0; border-collapse: collapse; font-size: 0.95rem; }
.contenido-articulo th, .contenido-articulo td { padding: 0.5em 0.75em; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.contenido-articulo hr { margin: 2em 0; border: 0; border-top: 1px solid #e2e8f0; }
.video-contenido { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.75em 0; overflow: hidden; border-radius: 0.75rem; background: #0f172a; }
.video-contenido iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video.video-contenido { display: block; height: auto; aspect-ratio: auto; }