/*
Theme Name: Cristianos Unidos
Theme URI: https://cristianosunidos.net/
Author: Equipo ACN
Description: Tema propio de Cristianos Unidos: fe, iglesia y comunidad en cada noticia.
Version: 1.12
License: GNU General Public License v2 or later
Text Domain: cristianos
*/

/* Fondo papel crema de todo el sitio (diseño aprobado 2026-10-30). */
body.cu-cuerpo { background: #FDFBF6; }

/* Logo de cabecera: tamaño explícito en CSS + atributos width/height reales en el <img>.
   Lección MediosACN v1.4/v1.5: no fiar el tamaño del logo a utilidades de Tailwind. */
.cu-logo img { height: 56px; width: auto; max-width: none; display: block; }
@media (min-width: 640px) { .cu-logo img { height: 64px; } }
@media (min-width: 1024px) { .cu-logo img { height: 76px; } }
.cu-logo-pie img { height: 56px; width: auto; max-width: none; display: block; }

/* Cinta superior azul, titulares en serif (diseño clásico de periódico). */
.cu-cinta { background: #0B3A52; }
.cu-titular { font-family: Georgia, 'Times New Roman', serif; }
.cu-cuerpo { font-family: 'Inter', system-ui, sans-serif; }
.cu-serif { font-family: Georgia, 'Times New Roman', serif; }

/* El contenido del artículo nunca lleva colores de texto forzados en línea:
   el tema aplica su color y así no se pierde en modo oscuro. */
.cu-articulo { color: #1c1917; line-height: 1.8; }
.cu-articulo p { margin-bottom: 1.25rem; }
.cu-articulo h2, .cu-articulo h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 800; margin: 1.5rem 0 0.75rem; }
.cu-articulo img { max-width: 100%; height: auto; display: block; margin: 1.25rem auto; }
.cu-articulo ul, .cu-articulo ol { margin: 0 0 1.25rem 1.5rem; }

/* Leyenda debajo de la foto y fuente al final: siempre en letra muy pequeña. */
.cu-pie-foto, .cu-fuente { font-size: 11px; line-height: 1.4; }

/* Slider de destacadas: 3 más recientes mezcladas con 2 más vistas. */
.cu-slider { position: relative; overflow: hidden; background: #fff; border: 1px solid #E7DFCE; box-shadow: 0 2px 10px rgba(30,42,50,.06); }
.cu-slider-track { display: flex; transition: transform .6s ease; }
.cu-slide { min-width: 100%; display: grid; grid-template-columns: 1.25fr 1fr; }
.cu-slide img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 340px; }
.cu-slide-tag { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; color: #0F5A7D; margin-left: 8px; }
.cu-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(15,90,125,.88); color: #fff; border: none; width: 46px; height: 46px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }
.cu-arrow.prev { left: 14px; }
.cu-arrow.next { right: 14px; }
.cu-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.cu-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.65); border: 2px solid #0F5A7D; cursor: pointer; padding: 0; }
.cu-dot.act { background: #7AB929; }
@media (max-width: 900px) {
  .cu-slide { grid-template-columns: 1fr; }
  .cu-slide img { min-height: 220px; }
}

/* Publicidad lateral fija 160x600: dos rascacielos pegados al cuerpo,
   fijos en pantalla al hacer scroll. Solo PC de pantalla ancha
   (>=1640px) para no tapar el contenido; en pantallas menores
   y en móvil quedan ocultos. */
.acn-sky { display: none; }
@media (min-width: 1640px) {
  .acn-sky {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 160px; height: 600px; z-index: 30;
    border: 2px dashed #cbd5e1; background: #f8fafc;
  }
  .acn-sky-left { left: auto; right: calc(50% + 640px + 12px); }
  .acn-sky-right { left: calc(50% + 640px + 12px); right: auto; }
  .acn-sky-label { font-family: monospace; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; text-align: center; }
  .acn-sky-size { font-family: monospace; font-size: 12px; color: #94a3b8; }
}