/* Ajustes propios sobre la plantilla (style.css es el original de BootstrapMade). */
#hero { background-image: none; } /* la plantilla pide img/hero-bg.jpg, que nunca existió */
.btn-naranja { background-color: #ff5821; color: #fff; }
.btn-naranja:hover { color: #fff; opacity: .9; }

/* Contenido cargado desde el editor: que no desborde en celulares */
.contenido img, .contenido iframe, .contenido video { max-width: 100%; height: auto; }
.contenido table { max-width: 100%; display: block; overflow-x: auto; }
.aviso-texto img { max-width: 100%; height: auto; }

/* Revista: el visor ocupa el ancho disponible */
.revista-contenedor { overflow-x: auto; }
#magazine { width: 1072px; height: 700px; }
#magazine .turn-page { background-color: #ccc; background-size: 100% 100%; }

.sidebar .recent-posts time { display: block; font-size: 13px; color: #999; }
.sidebar .recent-posts img { width: 80px; height: 60px; object-fit: cover; }

/* ---- Juramentos ---- */
.titulo-seccion { font-size: 22px; font-weight: 600; margin-bottom: 20px; }
.proximo-juramento { display: flex; align-items: center; gap: 16px; background: #fff3ee; border-left: 5px solid #ff5821; padding: 18px 22px; border-radius: 4px; }
.proximo-juramento i { font-size: 44px; color: #ff5821; }
.proximo-juramento span { display: block; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; color: #777; }
.proximo-juramento strong { display: block; font-size: 22px; }
.proximo-juramento small { color: #666; }

.calendario-juras { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.fecha-jura { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; text-align: center; padding: 10px 6px; line-height: 1.2; }
.fecha-jura .mes { display: block; text-transform: uppercase; font-size: 12px; font-weight: 600; color: #ff5821; }
.fecha-jura .dia { display: block; font-size: 32px; font-weight: 700; }
.fecha-jura .semana, .fecha-jura .nota { display: block; font-size: 12px; color: #777; }
.fecha-jura.pasada { opacity: .45; }
.fecha-jura.pasada .dia { text-decoration: line-through; }
.fecha-jura.proxima { border-color: #ff5821; box-shadow: 0 0 0 2px #ff5821 inset; }

.portada-jura { width: 100%; height: 220px; object-fit: cover; object-position: top; }
.galeria-jura { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 20px; }
.galeria-jura a { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: #eee; }
.galeria-jura img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.galeria-jura a:hover img { transform: scale(1.04); }
@media (max-width: 575px) {
  .galeria-jura { grid-template-columns: repeat(2, 1fr); }
  .calendario-juras { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fecha-jura { padding: 6px 2px; }
  .fecha-jura .mes { font-size: 10px; }
  .fecha-jura .dia { font-size: 24px; }
  .fecha-jura .semana { font-size: 11px; }
  .proximo-juramento { padding: 14px; }
  .proximo-juramento strong { font-size: 18px; }
}