:root{
  --blue:#2b6ea6;
  --blue-dark:#1e4f7b;
  --blue-soft:#d9e8f4;
  --line:#c6d0d8;
  --text:#24445d;
  --bg:#dce8f3;
  --white:#fff;
  --footer:#303030;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#333;
  background:linear-gradient(#5f91bd 0,#dce8f3 430px,#eef4f8 100%);
  font-size:14px;
}
a{color:#205f96;text-decoration:none}
a:hover{text-decoration:underline}
.site{
  width:min(100%,1000px);
  margin:0 auto;
  background:#fff;
  min-height:100vh;
  box-shadow:0 0 12px rgba(0,0,0,.25);
}
.hero{
  position:relative;
  width:100%;
  line-height:0;
  overflow:hidden;
  background:#f5f5f5;
}
.hero-link{display:block;width:100%}
.hero-image{display:block;width:100%;height:auto;max-width:100%}
.topbar{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:31px;
  padding:3px 7px;
  background:linear-gradient(#fff,#e7e7e7);
  border:1px solid #c9c9c9;
}
.nav-toggle{
  display:none;
  margin-left:auto;
  border:1px solid #aaa;
  background:#fff;
  border-radius:4px;
  padding:7px 10px;
  cursor:pointer;
}
.main-nav{display:flex;flex-wrap:wrap;gap:3px}
.main-nav a{
  display:block;
  padding:6px 15px;
  font-size:12px;
  border:1px solid #c8cfd5;
  border-radius:3px;
  color:#356184;
  background:linear-gradient(#fff,#e9edf0);
}
.main-nav a:hover,.main-nav a.active{
  color:#fff;
  background:linear-gradient(#5e96c3,#2c6799);
  border-color:#275b87;
  text-decoration:none;
}
.slider{
  position:relative;
  height:136px;
  overflow:hidden;
  background:#222;
}
.slides{
  height:100%;
  display:flex;
  transition:transform .65s ease;
  will-change:transform;
}
.slide-card{
  position:relative;
  min-width:25%;
  height:100%;
  margin:0;
  overflow:hidden;
  border-right:2px solid #fff;
}
.slide-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.slide-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:8px 5px;
  text-align:center;
  color:#fff;
  font-weight:bold;
  font-size:15px;
  text-shadow:0 1px 2px #000;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
}
.slider-btn{
  position:absolute;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
  width:34px;height:54px;
  border:0;
  border-radius:5px;
  color:#fff;
  background:rgba(0,0,0,.35);
  font-size:27px;
  cursor:pointer;
}
.slider-btn:hover{background:rgba(0,0,0,.65)}
.prev{left:6px}.next{right:6px}
.content-wrap{
  display:grid;
  grid-template-columns:235px 1fr;
  gap:12px;
  padding:9px;
  background:#f8f8f8;
}
.sidebar{
  min-width:0;
}

/* Estilos para el banner con espaciado y borde blanco */
.sidebar-banner {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 235px;
  height: 230px;
  overflow: hidden;
  border-radius: 5px;
  box-sizing: border-box;
}

.sidebar-banner a {
  display: block;
  width: 100%;
  height: 100%;
}

.sidebar-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid #ffffff; /* Borde blanco de 1px */
  border-radius: 5px;
}

.box-title{
  padding:7px 9px;
  font-weight:bold;
  color:#fff;
  background:linear-gradient(#3b76a8,#1f507c);
  border-radius:7px 7px 0 0;
  font-size:14px;
}
.category-title{
  color:#333;
  background:#fff;
  border:1px solid #ddd;
  border-bottom:0;
  border-radius:5px 5px 0 0;
  padding:7px;
  font-weight:bold;
}
.category-title::before{content:"✚";color:#2b6ea6;margin-right:5px}
.category-list{
  border:1px solid #c8d1d8;
  border-radius:0 0 5px 5px;
  overflow:hidden;
}
.category-list a{
  display:block;
  padding:5px 8px;
  color:#fff;
  background:#5b8fbb;
  border-bottom:1px solid rgba(255,255,255,.65);
  font-size:12px;
}
.category-list a:hover{background:#386f9d;text-decoration:none}
.category-list span{margin-right:7px;font-size:10px}

/* Estilos de Lo Más Visitado para ESCRITORIO */
.most-visited{
  margin-top:8px;
}
.visited-list{
  border:1px solid #ccc;
  border-top:0;
  border-radius:0 0 7px 7px;
  background:#fff;
  overflow:hidden;
}
.visited-list a{
  display:block;
  padding:6px 8px;
  color:#356184;
  font-size:11px;
  line-height:1.2;
  border-bottom:1px solid #e6e6e6;
  transition:all .2s ease;
}
.visited-list a:last-child{border-bottom:0}
.visited-list a:hover{
  padding-left:14px;
  color:#fff;
  background:linear-gradient(90deg,#3b76a8,#5b93bd);
  text-decoration:none;
  box-shadow:inset 4px 0 0 #1e4f7b;
}

.article{
  background:#fff;
  border:1px solid #c9d1d7;
  border-radius:5px;
  padding:9px;
  min-width:0;
}
.article h1{
  margin:0 0 5px;
  color:#1e557f;
  font-size:23px;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:6px 8px;
  margin-bottom:8px;
  background:#e4eef6;
  border:1px solid #b9cddd;
  color:#425a6a;
  font-size:11px;
}
.article p{line-height:1.5}
.feature{
  display:block;
  width:min(100%,600px);
  max-height:420px;
  object-fit:cover;
  margin:14px auto 8px;
  border:5px solid #eee;
  box-shadow:0 0 0 1px #d1d1d1;
}
.notice{
  padding:12px;
  background:#f4f8fb;
  border-left:4px solid #3979ab;
  margin:12px 0;
}
.bottom-bar{
  margin-top:10px;
  padding:8px;
  background:#e1edf6;
  border:1px solid #b8cad9;
  font-size:11px;
}
.footer{
  min-height:62px;
  padding:13px;
  text-align:center;
  color:#fff;
  background:#333;
  font-size:11px;
}
.rss{
  float:left;
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  background:#f7941d;
  color:#fff;
  font-size:21px;
  border-radius:2px;
}
.mobile-nav{display:none}

.oracionessanjudastadeo {
  color: #fff;  
  text-decoration: none;
}
.oracionessanjudastadeo:visited {
  color: #fff;
}

/* Adaptación para MÓVIL */
@media (max-width:760px){
  body{background:#fff;font-size:14px}
  .site{width:100%;box-shadow:none}
  .topbar{padding:5px 7px}
  .nav-toggle{display:block}
  .main-nav{
    display:none;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    padding:5px 0;
  }
  .main-nav.open{display:grid}
  .main-nav a{
    padding:9px 8px;
    text-align:left;
    min-height:37px;
    display:flex;
    align-items:center;
  }
  .slider{height:190px}
  .slide-card{min-width:50%}
  .slider-btn{width:31px;height:45px}
  
  /* Adaptación responsive para el banner */
  .sidebar-banner {
    width: 100%;
    max-width: 235px;
    height: auto;
    aspect-ratio: 235 / 230;
    margin: 12px auto;
  }

  /* Hacemos que el contenedor principal reordene los elementos */
  .site {
    display: flex;
    flex-direction: column;
  }
  .hero { order: 1; }
  .topbar { order: 2; }
  .slider { order: 3; }
  .content-wrap { 
    order: 4; 
    display: block;
    padding: 7px;
  }
  .footer { order: 5; }
  
  /* Mandamos la sección "Lo más visitado" al final de la página (después del footer) */
  .most-visited { 
    order: 6; 
    margin: 10px 7px 20px 7px;
  }

  .sidebar{margin-bottom:10px}
  .category-list{display:grid;grid-template-columns:1fr 1fr}
  .category-list a{min-height:31px}
  .article h1{font-size:20px}
  .feature{max-height:360px}
  
  /* Mostrar en 2 columnas en celular */
  .visited-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:430px){
  .slider{height:165px}
  .slide-card{min-width:100%}
  .slide-caption{font-size:14px}
  .main-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  .main-nav a{font-size:12px;padding:8px 7px;min-height:35px}
  .category-list{grid-template-columns:1fr}
  .article{padding:8px}
  
  /* Mostrar en 1 columna en celulares muy angostos */
  .visited-list {
    grid-template-columns: 1fr;
  }
}

.footer a:link {
  color: #ffffff;
  text-decoration: none;
}

.footer a,
.footer a:visited {
  color: #ffffff;
  text-decoration: underline; /* Opcional: puedes cambiarlo a 'none' si no quieres subrayado */
}

.footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.meta-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-top: -5px;
  object-fit: contain;
}

/* Estilos para la lista de peticiones de oración */
.lista-peticiones {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-peticiones li {
  background: #f4f8fb; /* Fondo suave similar a .notice */
  border: 1px solid #c9d1d7; /* Borde sutil del artículo */
  border-left: 4px solid var(--blue, #2b6ea6); /* Borde azul de acento */
  border-radius: 4px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}

/* Efecto al pasar el mouse */
.lista-peticiones li:hover {
  background: #e4eef6; /* Fondo azul claro similar a .meta */
  border-left-color: var(--blue-dark, #1e4f7b);
  transform: translateX(3px);
}

.lista-peticiones li p {
  margin: 0;
  color: var(--text, #24445d); /* Color de texto principal */
  font-size: 14px;
  line-height: 1.5;
}

/* Detalle decorativo antes de cada petición */
.lista-peticiones li p::before {
  content: "✦ ";
  color: var(--blue, #2b6ea6);
  margin-right: 6px;
  font-size: 12px;
}

/* Estilo 2: Fichas de fondo suave */
.lista-agradecimientos-fichas {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-agradecimientos-fichas li {
  background: linear-gradient(180deg, #ffffff 0%, #eef4f8 100%); /* Usando los tonos claros del body */
  border: 1px solid #b9cddd;
  border-radius: 5px;
  padding: 10px 14px 10px 36px;
  position: relative;
  color: var(--text, #24445d);
  font-size: 13.5px;
  line-height: 1.5;
}

.lista-agradecimientos-fichas li::before {
  content: "★";
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--blue, #2b6ea6);
  font-size: 13px;
}

.lista-agradecimientos-fichas li:hover {
  background: #e4eef6;
  border-color: #3b76a8;
}

/* Estilo 1: Tarjeta Testimonial de Agradecimientos */
.lista-agradecimientos {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lista-agradecimientos li {
  position: relative;
  background: #ffffff;
  border: 1px solid #c9d1d7; /* Mismo borde de los artículos */
  border-top: 3px solid var(--blue, #2b6ea6); /* Borde acentuado superior */
  border-radius: 6px;
  padding: 12px 16px 12px 42px; /* Espacio para la comilla decorativa */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  color: var(--text, #24445d);
  font-size: 13.5px;
  line-height: 1.5;
  transition: all 0.25s ease;
}

/* Comilla decorativa antes del texto */
.lista-agradecimientos li::before {
  content: "“";
  position: absolute;
  left: 12px;
  top: 4px;
  font-size: 32px;
  font-family: Georgia, serif;
  color: var(--blue, #2b6ea6);
  opacity: 0.5;
}

/* Efecto Hover al pasar el cursor */
.lista-agradecimientos li:hover {
  border-top-color: var(--blue-dark, #1e4f7b);
  background: #fbfdfe;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(30, 79, 123, 0.12);
}

/* Estilo tipo tabla azul con ancho fijo de 300px y rollover */
.tabla-lista-azul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  counter-reset: tabla-counter;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra los elementos hijos (li) en el contenedor */
}

.tabla-lista-azul li {
  position: relative;
  background-color: var(--blue-dark, #1e4f7b);
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 14px 6px 48px;
  margin-bottom: 5px;
  min-height: 30px;
  display: flex;
  align-items: center;
  width: 300px; /* Ancho fijo para todas las filas */
  max-width: 100%; /* Adaptabilidad en pantallas muy pequeñas */
  transition: background-color 0.25s ease;
  cursor: pointer;
}

/* Efecto Rollover / Hover */
.tabla-lista-azul li:hover {
  background-color: var(--blue, #2b6ea6);
}

/* Oculta ítems vacíos */
.tabla-lista-azul li:empty {
  display: none;
}

/* Recuadro de número a la izquierda */
.tabla-lista-azul li::before {
  counter-increment: tabla-counter;
  content: counter(tabla-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38px;
  background-color: #dce4eb;
  color: #333333;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cuadrícula de imágenes (2 por fila, 3 filas) */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 15px 0;
  width: 100%;
}

.image-grid .grid-item {
  width: 250px;
  height: 250px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #c9d1d7;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.image-grid .grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 560px) {
  .image-grid .grid-item {
    /* Mantiene la relación de aspecto cuadrada (1:1) mientras se adapta al ancho disponible */
    width: calc(50% - 6px);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 360px) {
  /* En pantallas extremadamente angostas, muestra 1 imagen por fila */
  .image-grid .grid-item {
    width: 100%;
    max-width: 250px;
  }
}

/* Párrafos generales de lectura */
.article p {
  font-family: Arial, Helvetica, sans-serif; /* Mantiene la coherencia visual */
  font-size: 14.5px;                         /* Tamaño legible */
  line-height: 1.65;                         /* Espaciado óptimo entre líneas */
  color: var(--text, #24445d);               /* Tono azul grisáceo definido en :root */
  margin-top: 0;
  margin-bottom: 14px;                       /* Separación uniforme entre párrafos */
  letter-spacing: 0.1px;                     /* Leve espacio para mejor lectura */
}

/* Destacado sutil para la primera letra o primer párrafo */
.article p:first-of-type {
  font-size: 15px;
  color: #1a3245;                            /* Un tono un poco más oscuro para iniciar */
}

/* Párrafo destacado / Introductorio */
.p-destacado {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--blue-dark, #1e4f7b);          /* Azul oscuro de tu paleta */
  background: var(--blue-soft, #d9e8f4);     /* Fondo azul suave de tu paleta */
  border-left: 4px solid var(--blue, #2b6ea6);/* Acento azul */
  padding: 12px 16px;
  border-radius: 0 5px 5px 0;
  margin: 16px 0;
}

.p-cita {
  font-family: Georgia, "Times New Roman", serif; /* Serif para contraste de lectura */
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: #3b5266;
  padding: 10px 18px;
  margin: 18px 0;
  border-left: 3px solid var(--line, #c6d0d8);
  background-color: #fbfdfe;
}

/* ===================================================
   Lista a 2 Columnas con Rollover (Sin numeración)
   =================================================== */
.lista-dos-columnas {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Define 2 columnas de igual ancho */
  gap: 8px 12px; /* Espaciado entre filas (8px) y columnas (12px) */
  width: 100%;
}

.lista-dos-columnas li {
  position: relative;
  background-color: #003a60;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 14px 8px 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.25s ease; /* Transición suave para el rollover */
  cursor: pointer;
  box-sizing: border-box;
}

/* Viñeta decorativa simple (puedes quitarla si la prefieres completamente limpia) */
.lista-dos-columnas li::before {
  content: "•";
  position: absolute;
  left: 12px;
  color: var(--blue-soft, #d9e8f4);
  font-size: 16px;
  line-height: 1;
}

/* Efecto Rollover / Hover */
.lista-dos-columnas li:hover {
  background-color: var(--blue, #2b6ea6); /* Cambio de color de fondo */
  transform: translateX(4px);              /* Desplazamiento sutil hacia la derecha */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.lista-dos-columnas li:hover::before {
  color: #ffffff;
}

/* Oculta ítems vacíos */
.lista-dos-columnas li:empty {
  display: none;
}

/* Adaptación Responsiva para móviles */
@media (max-width: 600px) {
  .lista-dos-columnas {
    grid-template-columns: 1fr; /* Pasa a 1 columna en pantallas pequeñas */
  }
}


.comprar-novenario-en-linea {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Define 2 columnas de igual ancho */
  gap: 8px 12px; /* Espaciado entre filas (8px) y columnas (12px) */
  width: 100%;
}

.comprar-novenario-en-linea li {
  position: relative;
  background-color: #004989;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 14px 8px 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.25s ease; /* Transición suave para el rollover */
  cursor: pointer;
  box-sizing: border-box;
}

/* Viñeta decorativa simple (puedes quitarla si la prefieres completamente limpia) */
.comprar-novenario-en-linea li::before {
  content: "•";
  position: absolute;
  left: 12px;
  color: var(--blue-soft, #d9e8f4);
  font-size: 16px;
  line-height: 1;
}

/* Efecto Rollover / Hover */
.comprar-novenario-en-linea li:hover {
  background-color: var(--blue, #2b6ea6); /* Cambio de color de fondo */
  transform: translateX(4px);              /* Desplazamiento sutil hacia la derecha */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.comprar-novenario-en-linea li:hover::before {
  color: #ffffff;
}

/* Oculta ítems vacíos */
.comprar-novenario-en-linea li:empty {
  display: none;
}

/* Adaptación Responsiva para móviles */
@media (max-width: 600px) {
  .comprar-novenario-en-linea {
    grid-template-columns: 1fr; /* Pasa a 1 columna en pantallas pequeñas */
  }
}