/* WordPress usa esta variable como el ancho de lectura "estándar" para
   cualquier bloque que no tenga la etiqueta de ancho completo — el
   tema la trae en 620px de fábrica. En vez de perseguir cada elemento
   individual (título, párrafos, comentarios, etc.) uno por uno, se
   corrige la causa raíz: se sube este número a 1100px, y TODO lo que
   dependa de él se actualiza solo, automáticamente. */
:root {
  --wp--style--global--content-size: 1100px;
}

/* =========================================================
 * ENTRADA DE BLOG — diseño editorial
 * ========================================================= */
/* Una sola columna de lectura para TODO (imagen incluida) — esto es
   lo que causaba el desalineado: antes la imagen usaba 1100px y el
   texto 780px, dos anchos distintos en la misma página. */
h1.wp-block-post-title,
.wp-block-post-content,
.taxonomy-post_tag.is-style-pill,
hr.wp-block-separator,
.wp-block-comments,
nav[aria-label="Entradas"],
.entry-content.alignfull ~ .wp-block-group.has-global-padding {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* El cuerpo del artículo (.entry-content) también tiene la clase
   "alignfull" del tema, que lo estira de borde a borde con márgenes
   negativos automáticos — más fuerte que un max-width normal. Se
   necesita apuntar a las 2 clases juntas (más específico) y forzar
   también el "width", no solo el "max-width", para ganarle la pelea. */
.entry-content.alignfull {
  max-width: 1100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* ----- Imagen destacada: ahora como una portada elegante, no un
   rectángulo suelto. El navegador le pone 40px de margen lateral a
   CUALQUIER <figure> por defecto — se anula junto con todo lo demás
   (ancho, alto, proporción) en un solo bloque con !important en todo,
   para no dejar ninguna grieta por donde se cuele otra regla. ----- */
.wp-block-post-featured-image {
  margin: 32px auto 0 !important;
  width: 100% !important;
  max-width: 1100px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
.wp-block-post-featured-image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 20px !important;
  display: block !important;
  box-shadow: 0 20px 50px rgba(0, 27, 113, 0.12) !important;
}

/* El contenedor que envuelve la imagen destacada Y el título juntos
   trae su propio relleno lateral del tema (basado en una variable
   que nunca tocamos) — eso lo hacía angosto por dentro, sin que
   ninguna regla anterior lo alcanzara, porque apuntaban a la imagen
   o a la figura, nunca a ESTE contenedor específico. Se anula ese
   relleno solo dentro de la columna de blog, ya que el ancho y
   márgenes correctos ya los pone nuestro propio CSS en otro lado. */
.ug-blog-content .has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ese mismo contenedor también trae su propio "padding-top" grande
   puesto por el tema — se sumaba al margen que ya le pusimos arriba
   de la imagen, dejando un espacio excesivo. Se anula ese relleno
   superior específicamente ahí. */
.ug-blog-content > .wp-block-group.has-global-padding:first-child {
  padding-top: 0 !important;
}

/* Dentro del contenedor de Etiquetas/Comentarios/Navegación hay OTRO
   contenedor anidado con la misma clase "has-global-padding" — eso le
   sumaba su propio relleno lateral del tema encima del que ya le
   puso el contenedor exterior, dejándolo más angosto que el resto.
   Se anula el relleno del anidado interior (el exterior ya tiene el
   correcto puesto por la regla principal). */
.entry-content.alignfull ~ .wp-block-group.has-global-padding .has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ----- Enlace "Volver al blog" ----- */
.wp-block-post-title::before {
  content: "← Volver al blog";
  display: block;
  color: var(--ug-blue-primary);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  cursor: pointer;
}
/* ----- Título ----- */
h1.wp-block-post-title {
  color: var(--ug-blue-primary) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-top: 32px !important;
  margin-bottom: 20px !important;
}
/* ----- Fila de fecha / autor / categoría, con "avatar" ----- */
.wp-block-template-part .wp-block-group.is-content-justification-left {
  max-width: 1100px;
  margin: 0 auto 40px !important;
  padding: 20px 24px;
  box-sizing: border-box;
  color: var(--ug-text-gray);
  font-size: 13.5px;
  flex-wrap: wrap;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.wp-block-post-author-name::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ug-blue-primary);
  vertical-align: middle;
  margin-right: 8px;
}
.wp-block-post-date a,
.wp-block-post-author-name a {
  color: var(--ug-text-main);
  text-decoration: none;
  font-weight: 700;
}
.wp-block-post-date a:hover,
.wp-block-post-author-name a:hover { color: var(--ug-blue-primary); }
.taxonomy-category.wp-block-post-terms a {
  display: inline-block;
  background: var(--ug-red-accent);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 9999px;
  text-decoration: none;
}
.taxonomy-category .wp-block-post-terms__prefix { display: none; }
/* ----- Cuerpo del artículo ----- */
.entry-content p {
  color: var(--ug-text-main);
  font-size: var(--ug-text-article-body, 17px);
  line-height: 1.8;
  margin-bottom: 22px;
}
.entry-content a {
  color: var(--ug-blue-primary);
  font-weight: 600;
}
.entry-content h2,
.entry-content h3 {
  color: var(--ug-blue-primary);
  font-weight: 800;
  margin: 36px 0 16px;
}
/* Párrafo escrito completo en cursiva (como tu cierre) se destaca
   como una "cita" editorial, con borde y fondo suave — un truco de
   CSS moderno (:has) que detecta esto automáticamente, sin que tengas
   que marcar nada a mano. Si el navegador es muy viejo y no lo
   soporta, simplemente se ve como texto normal, sin romper nada. */
.entry-content p:has(> em:only-child) {
  border-left: 3px solid var(--ug-red-accent);
  background: var(--ug-bg-soft);
  padding: 18px 22px;
  border-radius: 0 12px 12px 0;
  font-size: 16px;
  color: var(--ug-text-gray);
}
/* Imágenes sueltas dentro del texto */
.entry-content > .wp-block-image img {
  border-radius: 16px;
  width: 100%;
}
/* ----- Galería de fotos: cuadrícula con efecto al pasar el cursor ----- */
.entry-content .wp-block-gallery {
  gap: 10px !important;
  margin: 32px 0;
}
.entry-content .wp-block-gallery .wp-block-image {
  overflow: hidden;
  border-radius: 12px;
}
.entry-content .wp-block-gallery img {
  border-radius: 12px;
  transition: transform 0.3s ease;
}
.entry-content .wp-block-gallery .wp-block-image:hover img {
  transform: scale(1.06);
}
/* Emojis dentro del texto: que no se vean gigantes */
.entry-content img.emoji {
  height: 1.1em !important;
  width: 1.1em !important;
  margin: 0 0.05em !important;
  vertical-align: -0.15em !important;
}
/* ----- Etiquetas (tags), con su propia etiqueta de sección ----- */
.taxonomy-post_tag.is-style-pill {
  margin-top: 40px !important;
  padding-top: 32px !important;
  border-top: 1px solid #e5e7eb;
}
.taxonomy-post_tag.is-style-pill::before {
  content: "Etiquetas";
  display: block;
  color: var(--ug-text-gray);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.taxonomy-post_tag.is-style-pill a {
  display: inline-block;
  background: var(--ug-bg-soft);
  color: var(--ug-text-gray);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid rgba(0, 27, 113, 0.08);
}
.taxonomy-post_tag.is-style-pill a:hover {
  background: var(--ug-blue-primary);
  color: #fff;
  border-color: var(--ug-blue-primary);
}
/* El separador de línea gris ya no hace falta — las tags ya tienen su
   propia línea divisoria arriba. */
hr.wp-block-separator { display: none; }
/* ----- Sección de comentarios ----- */
.wp-block-comments {
  margin-top: 8px !important;
}
.wp-block-comments h2.wp-block-heading {
  color: var(--ug-blue-primary);
  font-size: 22px;
  font-weight: 800;
}
.comment-respond {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 27, 113, 0.06);
  box-shadow: 0 12px 32px rgba(0, 27, 113, 0.06);
  padding: 28px !important;
  margin-top: 20px;
}
.comment-reply-title {
  color: var(--ug-blue-primary);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 16px;
}
.comment-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ug-text-main);
  margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid rgba(0, 27, 113, 0.15);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.comment-form textarea { resize: vertical; }
.comment-form .required { color: var(--ug-red-accent); }
.comment-form input[type="submit"] {
  background: var(--ug-red-accent);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--ug-red-hover); }
/* ----- Navegación entre entradas — como una tarjeta, no un enlace suelto ----- */
nav[aria-label="Entradas"] {
  margin: 40px auto 0 !important;
  padding: 24px !important;
  background: var(--ug-blue-primary) !important;
  border-radius: 16px;
}
.post-navigation-link-previous a,
.post-navigation-link-next a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}
.post-navigation-link-previous a:hover,
.post-navigation-link-next a:hover { text-decoration: underline; }
.post-navigation-link__label {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.post-navigation-link-previous span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
  h1.wp-block-post-title { font-size: 26px !important; }
}


/* ----- PUBLICACIONES RECIENTES ----- */

.ug-blog-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 0 24px;
  box-sizing: border-box;
}
.ug-blog-content {
  flex: 1;
  min-width: 0;
}

.ug-blog-sidebar {
  flex: 0 0 300px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 27, 113, 0.06);
  box-shadow: 0 12px 32px rgba(0, 27, 113, 0.06);
  padding: 24px 20px;
  position: sticky;
  top: 140px;
  margin-top: 32px;
}
.ug-blog-sidebar-title {
  color: var(--ug-blue-primary);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 18px;
}
.ug-blog-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ug-blog-sidebar-item a {
  display: flex;
  gap: 12px;
  text-decoration: none;
}
.ug-blog-sidebar-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ug-bg-soft);
}
.ug-blog-sidebar-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ug-blue-primary);
  font-size: 16px;
}
.ug-blog-sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ug-blog-sidebar-date {
  font-size: 11px;
  color: var(--ug-text-gray);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ug-blog-sidebar-name {
  font-size: 13.5px;
  color: var(--ug-text-main);
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ug-blog-sidebar-item a:hover .ug-blog-sidebar-name {
  color: var(--ug-blue-primary);
}
.ug-blog-sidebar-loading,
.ug-blog-sidebar-empty {
  font-size: 13px;
  color: #9ca3af;
}

@media (max-width: 900px) {
  .ug-blog-layout { flex-direction: column; }
  .ug-blog-sidebar {
    flex: 1 1 auto;
    width: 100%;
    position: static;
    margin-top: 0;
  }
}

/* ----- MODAL (LIGHTBOX) PARA IMÁGENES DE GALERÍA, CON FLECHAS ----- */

.ug-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
}
.ug-lightbox-overlay.is-open {
  display: flex;
}
.ug-lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ug-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ug-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.entry-content .wp-block-gallery img,
.entry-content > .wp-block-image img {
  cursor: zoom-in;
}
.ug-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ug-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
}
.ug-lightbox-arrow-prev { left: 24px; }
.ug-lightbox-arrow-next { right: 24px; }
.ug-lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
}