:root {
  --azul: #1f3a5f;
  --gris: #f5f7fa;
  --texto: #222;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--gris);
  color: var(--texto);
  line-height: 1.5;
}
.site-header {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  background: var(--azul);
  color: #fff;
}
.site-header h1 { font-size: 1.9rem; }
.site-header .sub { font-size: 1.05rem; opacity: .9; margin-top: .3rem; }
.site-header .note {
  font-size: .82rem; opacity: .8; max-width: 640px;
  margin: .8rem auto 0; font-style: italic;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.img-wrap { position: relative; }
.img-wrap img {
  display: block; width: 100%; height: auto;
  user-select: none; -webkit-user-drag: none;
  pointer-events: none; /* bloquea clic derecho y arrastre sobre la imagen */
}
.blocker {
  position: absolute; inset: 0;
  /* capa transparente que evita selección/drag sobre la imagen */
}
.card h2 { font-size: 1.05rem; padding: .8rem 1rem .2rem; color: var(--azul); }
.card p { padding: 0 1rem .9rem; color: #555; font-size: .9rem; }
footer {
  text-align: center; padding: 1.5rem; color: #777; font-size: .82rem;
  border-top: 1px solid #e2e8f0;
}
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #c0392b; color: #fff; padding: .6rem 1.1rem; border-radius: 6px;
  font-size: .85rem; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.toast.show { opacity: 1; }