/* ===================================
   CABECERA (encabezado con imagen)
   =================================== */
.site-header, .main-header-bar, .main-header-bar-wrap, .ast-above-header-wrap, .site-branding, .ast-header-navigation {
  background-color: #000 !important;
}
.site-header, .main-header-bar, .main-header-bar-wrap {
  border-bottom: none !important;
  box-shadow: none !important;
}
.main-header-bar .main-navigation ul li a {
  font-size: 20px !important;
}
.ast-primary-header-bar {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  min-height: 450px !important;
}
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap {
  min-height: 70px !important;
}
.ast-desktop:not(:has(.ast-header-sticked)) .ast-primary-header-bar .main-header-menu > .menu-item {
  line-height: 70px !important;
}

/* ===================================
   CONTENEDOR GENERAL (contenido + sidebar) — páginas normales
   =================================== */
#content .ast-container {
  max-width: 92% !important;
  width: 92% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  gap: 50px !important;
}

/* ===================================
   COLUMNA DE CONTENIDO (textos de páginas/entradas) — páginas normales
   =================================== */
#primary {
  width: 70% !important;
  flex: 0 0 70% !important;
  max-width: 70% !important;
  background-color: #f7f5f0 !important;
  padding: 25px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  margin-right: 0 !important;
}
.entry-content p,
.entry-content .has-text-align-justify,
.entry-content .wp-block-paragraph {
  text-align: center !important;
  font-size: 21px !important;
  line-height: 1.8 !important;
}
.entry-content[data-ast-blocks-layout] > * {
  max-width: 100% !important;
}
.entry-content {
  max-width: 100% !important;
}

/* ===================================
   BARRA LATERAL (sidebar) — páginas normales
   =================================== */
#secondary {
  width: 30% !important;
  flex: 0 0 30% !important;
  max-width: 30% !important;
  background-color: transparent !important;
  padding: 25px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
}
#secondary .widget {
  margin-bottom: 16px !important;
  padding-bottom: 6px !important;
}
#secondary .wp-block-spacer {
  height: 18px !important;
}
#secondary a {
  color: #c4af92 !important;
}
#secondary a:hover {
  color: #b9c4cf !important;
}
#secondary .widget-title,
#secondary h2 {
  color: #f0f0f0 !important;
}
#secondary .widget_search,
#secondary .search-form {
  background-color: #000 !important;
  padding: 15px !important;
  border-radius: 4px !important;
}
#secondary .search-form .search-field {
  color: #000 !important;
  background-color: #fff !important;
}

/* ===================================
   FONDO GENERAL DE LA WEB (imagen del encabezado, fija, sin repetir)
   =================================== */
body {
  background-image: url(https://jcruz.blog/wp-content/uploads/2026/07/1784985320804_image.png) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
#content {
  background-color: transparent !important;
}

/* ===================================
   PORTADA (Inicio) — bloque de texto (con sidebar real de Astra, igual que Acerca de)
   =================================== */
.elementor-element-2f31aeca {
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-element-6d9ea0bc {
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* --- Ocultar icono JC dentro del texto --- */
.portada-columna-texto figure:has(img[src*="posible-logo-jcruz"]) {
  display: none !important;
}

/* --- Foto del autor: reducir a 50% y que el texto la envuelva --- */
.portada-columna-texto figure:has(img[src*="jose-con-sombrero-paint"]) {
  float: left !important;
  width: 53% !important;
  max-width: 53% !important;
  margin: 8px 24px 20px 0 !important;
}
.portada-columna-texto figure:has(img[src*="jose-con-sombrero-paint"]) img {
  width: 100% !important;
  height: auto !important;
}

/* --- Texto del articulo justificado --- */
.portada-columna-texto p.wp-block-paragraph {
  text-align: justify !important;
}

/* --- Video promocional: mas pequeno, con margenes laterales y mas separado --- */
.portada-columna-texto p:has(span.embed-youtube) {
  clear: both !important;
  max-width: 420px !important;
  margin: 55px auto 30px auto !important;
}
.portada-columna-texto span.embed-youtube {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
.portada-columna-texto span.embed-youtube iframe {
  width: 100% !important;
  height: 100% !important;
}

/* --- Firma final del texto: alineada a la derecha --- */
.portada-columna-texto p.firma-jcruz {
  text-align: right !important;
}

/* --- Evitar huecos raros del justify en las lineas junto a la foto --- */
.portada-columna-texto p.texto-junto-foto {
  text-align: left !important;
}

/* ===================================
   PIE DE PÁGINA — copyright centrado y enlaces de cookies a los lados
   =================================== */
.ast-footer-copyright p {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px 24px !important;
  width: 100% !important;
}
.ast-footer-copyright .ast-cc-center {
  flex: 1 1 auto !important;
  text-align: center !important;
}
.ast-footer-copyright .ast-cc-side {
  flex: 0 0 auto !important;
}
.ast-footer-copyright a {
  color: #334155 !important;
  text-decoration: underline !important;
}
.ast-footer-copyright a:hover {
  color: #045cb4 !important;
}

/* ===================================
   ACERCA DE... (page-id-2) — texto justificado
   =================================== */
body.page-id-2 .entry-content p,
body.page-id-2 .entry-content .has-text-align-justify,
body.page-id-2 .entry-content .wp-block-paragraph {
  text-align: justify !important;
}

/* ===================================
   AVISO LEGAL (page-id-1215) — texto justificado
   =================================== */
body.page-id-1215 .entry-content p,
body.page-id-1215 .entry-content .has-text-align-justify,
body.page-id-1215 .entry-content .wp-block-paragraph {
  text-align: justify !important;
}

/* ===================================
   SIDEBAR — "Webs amigas" texto en blanco (era ilegible sobre el fondo oscuro)
   =================================== */
#secondary #block-77 p,
#secondary #block-78 p,
#secondary #block-79 p {
  color: #f0f0f0 !important;
}

/* ===================================
   BARRA LATERAL — mantener en paralelo con el contenido en anchos intermedios
   (antes se apilaba debajo del contenido por debajo de 921px; ahora sigue
   en paralelo hasta 480px, con la sidebar mas estrecha y el titulo mas
   pequeno para que no se corte ni se superponga)
   =================================== */
@media (min-width: 480px) and (max-width: 921px) {
  #content .ast-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
  }
  #primary {
    width: auto !important;
    flex: 1 1 auto !important;
    max-width: none !important;
  }
  #secondary {
    width: 145px !important;
    flex: 0 0 145px !important;
    max-width: 145px !important;
    padding: 8px !important;
  }
  #secondary .widget-title,
  #secondary h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .wp-image-3525 {
    max-width: 40px !important;
  }
  .wp-image-4522 {
    max-width: 110px !important;
  }
}

/* ===================================
   BARRA LATERAL — logo pequeno fluido (tenia ancho fijo 116px,
   impedia estrechar la sidebar). Ahora se adapta al espacio disponible.
   =================================== */
#secondary img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}
#secondary img.wp-image-3525 {
  max-width: 145px !important;
}


/* ===================================
   PIE DE PAGINA — fondo oscuro y texto claro (antes blanco con letras oscuras)
   =================================== */
.site-below-footer-wrap {
  background-image: linear-gradient(rgba(20, 10, 4, 0.6), rgba(20, 10, 4, 0.6)), url("https://jcruz.blog/wp-content/uploads/2026/07/1784985320804_image.png") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
  padding-bottom: 85px !important;
}
.ast-footer-copyright,
.ast-footer-copyright p {
  color: #f0f0f0 !important;
}
.ast-footer-copyright a {
  color: #c4af92 !important;
}
.ast-footer-copyright a:hover {
  color: #b9c4cf !important;
}

/* ===================================
   AVISO DE COOKIES — boton "Gestionar consentimiento" mas pequeno y discreto
   (se quedaba fijo abajo a la derecha con un tamano grande de forma permanente,
   es el comportamiento normal de Complianz para poder reabrir las preferencias,
   pero lo reducimos)
   =================================== */
.cmplz-manage-consent {
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: 8px 8px 0 0 !important;
  background-color: #000 !important;
  color: #f0f0f0 !important;
}

/* ===================================
   AVISO DE COOKIES — el boton "Gestionar consentimiento" flotante
   tapaba el enlace derecho del pie de pagina; el padding-bottom
   anadido arriba en .site-below-footer-wrap ya deja hueco libre
   debajo de los enlaces para que el boton no los tape.
   =================================== */

/* ===================================
   ACERCA DE... — reducir el hueco entre "Me gusta esto" y "Deja un
   comentario" (quedaba mucho mas grande que el resto de espacios de
   la pagina)
   =================================== */
#comments {
  margin-top: 8px !important;
  padding-bottom: 8px !important;
}
.comment-respond {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ===================================
   BOTON "VOLVER ARRIBA" (Astra) — icono blanco sobre fondo blanco,
   invisible, y se quedaba justo detras del boton de cookies en la
   misma esquina. Le damos color oscuro y lo pasamos a la izquierda.
   =================================== */
#ast-scroll-top {
  background-color: #502808 !important;
  right: auto !important;
  left: 30px !important;
}
#ast-scroll-top .ast-icon {
  color: #f0f0f0 !important;
}

/* ===================================
   CONTENEDOR GENERAL — evitar que la tarjeta de contenido (#primary)
   se estire para igualar la altura de la sidebar, dejando un hueco
   en blanco al final cuando la sidebar tiene mas contenido.
   =================================== */
#content .ast-container {
  align-items: flex-start !important;
}


/* ===================================
   CONTACTAME (page-id-3599) — formulario mas estrecho y centrado
   =================================== */
body.page-id-3599 .jetpack-contact-form-container {
  max-width: 50% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===================================
   SIDEBAR — Webs amigas: menos espacio entre titulo, texto y "Haz clic aqui"
   =================================== */
#secondary #block-77,
#secondary #block-78 {
  margin-bottom: 4px !important;
}

/* ===================================
   ENLACES DENTRO DEL TEXTO — se veian blancos (invisibles) sobre el fondo
   crema de las paginas/entradas. Color oscuro legible + hover.
   =================================== */
.entry-content a {
  color: #7a4a1e !important;
  text-decoration: underline !important;
}
.entry-content a:hover {
  color: #502808 !important;
}

/* ===================================
   POLITICA DE COOKIES (UE) (page-id-4178) — ocultar mencion a
   cookiedatabase.org (sincronizacion no usada, frase quedaba
   contradictoria: "sincronizado... no esta sincronizado aun")
   =================================== */
body.page-id-4178 .entry-content p:has(a[href*="cookiedatabase.org"]) {
  display: none !important;
}

/* ===================================
   BUZON DE POEMAS (page-id-3141) — titulo sustituido por imagen
   decorativa (pluma + tintero). Se oculta el texto visualmente
   pero se conserva en el DOM para lectores de pantalla / SEO.
   =================================== */
body.page-id-3141 h1.entry-title {
  position: relative;
  z-index: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 24px !important;
}
body.page-id-3141 h1.entry-title::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1542 / 580;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/buzon-de-poesia-titulo-v5.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto;
}

body.page-id-3141 h1.entry-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  max-width: 85%;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/sello-jc-marca-agua.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

/* ================================================
   BUZÓN DE ARTÍCULOS - título con imagen
   ================================================ */
body.page-id-3172 h1.entry-title {
  position: relative;
  z-index: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 24px !important;
}
body.page-id-3172 h1.entry-title::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1665 / 590;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/buzon-de-articulos-titulo-v8.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto;
}

body.page-id-3172 h1.entry-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  max-width: 85%;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/sello-jc-marca-agua.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

/* ================================================
   BUZÓN DE CANCIONES - título con imagen + sello
   ================================================ */
body.page-id-3176 h1.entry-title {
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 24px !important;
  position: relative;
  z-index: 0;
}
body.page-id-3176 h1.entry-title::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 1526 / 500;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/buzon-de-canciones-titulo-v10.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto;
}
body.page-id-3176 h1.entry-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  max-width: 85%;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/sello-jc-marca-agua.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

/* ===================================
   BUZON MIS COSAS (page-id-3197) — titulo sustituido por imagen
   decorativa (maleta + ramita seca). Se oculta el texto visualmente
   pero se conserva en el DOM para lectores de pantalla / SEO.
   =================================== */
body.page-id-3197 h1.entry-title {
  position: relative;
  z-index: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 24px !important;
}
body.page-id-3197 h1.entry-title::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1444 / 616;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/buzon-de-mis-cosas-titulo-v2.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto;
}
body.page-id-3197 h1.entry-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  max-width: 85%;
  background-image: url('https://jcruz.blog/wp-content/uploads/2026/07/sello-jc-marca-agua.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}