/* ==========================================================
   1. IMPORTACIÓN DE FUENTES (Lexend y Roboto)
   ========================================================== */


/* ==========================================================
   2. VARIABLES DE COLOR Y FUENTES DEL SISTEMA
   ========================================================== */
:root {
  --main-rojo: #a5352a;
  --main-azul: #023047;
  --main-verde: #16db65;
  --color-grey: #747474;
  --color-grey-light: #EDEDED;
  --font-blog: 'Lexend', 'Roboto', Arial, sans-serif;
}

/* ==========================================================
   3. CONTENEDOR PRINCIPAL DEL POST Y DESPEJE DE CABECERA
   ========================================================== */
.blog-post-single-view main#primary.site-main {
  width: 100% !important;
  margin-top: 42px !important;
  /* Despeje exacto idéntico a producción */
  padding-top: 0 !important;
}

/* Despeje dinámico cuando la barra superior de administración de WordPress está activa */
body.admin-bar.blog-post-single-view main#primary.site-main {
  margin-top: 74px !important;
  /* 42px barra + 32px admin bar */
}

@media screen and (max-width: 782px) {
  body.admin-bar.blog-post-single-view main#primary.site-main {
    margin-top: 88px !important;
    /* 42px barra + 46px admin bar móvil */
  }
}

body.admin-bar #ctl-header {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar #ctl-header {
    top: 46px !important;
  }
}

main .content,
.blog-post-content,
.blog-article-wrapper.content,
.blog-article-wrapper {
  font-family: var(--font-blog);
  max-width: 1000px !important;
  width: 95% !important;
  margin: 20px auto 40px auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  color: #000000;
  line-height: 1.6;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.blog-post-content,
body.mce-content-body {
  font-family: var(--font-blog) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 20px 25px !important;
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  background-color: #ffffff !important;
}

/* ==========================================================
   4. TIPOGRAFÍA Y TÍTULOS (Idéntico a Angular en producción)
   ========================================================== */

/* Título H1 principal del post (Idéntico a Angular en producción) */
main .content__title,
.blog-post-content h1,
body.blog-post-content h1,
.blog-post-content .content__title,
.blog-main-title {
  font-family: var(--font-blog) !important;
  font-size: 35px !important;
  font-weight: 400 !important;
  /* Renderizado exacto a producción */
  color: #000000 !important;
  line-height: 1.2 !important;
  padding: 15px 0 0 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: normal !important;
  text-wrap: wrap !important;
  /* Evita que el tema balancee artificialmente el salto de línea */
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Fecha de publicación (Directamente debajo del título H1) */
main .content__date,
.blog-post-content .content__date,
.blog-post-content .post-date,
.blog-date,
p.content__date {
  font-family: var(--font-blog) !important;
  font-size: 12px !important;
  color: #808080be !important;
  margin: 0 0 0 0 !important;
  padding: 0 !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* Resumen o subtítulo introductorio */
main .content__subtitle,
.blog-post-content .content__subtitle,
.blog-post-content .intro-subtitle,
.blog-post-content .blog-summary-lead {
  font-family: var(--font-blog) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #555555 !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: 1.5 !important;
}

/* Contenedor de párrafos - sin margen superior para evitar huecos */
main .content__parragraph,
.blog-entry-content {
  width: 100% !important;
  margin-top: 0 !important;
}

/* El PRIMER elemento dentro del contenido no tiene margen superior (Elimina el hueco debajo de la imagen) */
main .content__parragraph>*:first-child,
.blog-entry-content>*:first-child,
main .content__parragraph>h2:first-child,
.blog-entry-content>h2:first-child,
main .content__parragraph>h3:first-child,
.blog-entry-content>h3:first-child,
main .content__parragraph>p:first-child,
.blog-entry-content>p:first-child {
  margin-top: 0 !important;
}

/* Subtítulos H2 */
main .content__parragraph h2,
.blog-entry-content h2,
.blog-post-content h2,
body.blog-post-content h2 {
  font-family: var(--font-blog) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: #a5352a !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* Subtítulos H2 subsecuentes */
main .content__parragraph h2:not(:first-child),
.blog-entry-content h2:not(:first-child),
.blog-post-content h2:not(:first-child),
body.blog-post-content h2:not(:first-child) {
  margin-top: 28px !important;
  margin-bottom: 8px !important;
}

/* Subtítulos H3 dentro del contenido */
main .content__parragraph h3,
.blog-entry-content h3,
.blog-post-content h3,
body.blog-post-content h3 {
  font-family: var(--font-blog) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #a5352a !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}

main .content__parragraph h3:not(:first-child),
.blog-entry-content h3:not(:first-child),
.blog-post-content h3:not(:first-child),
body.blog-post-content h3:not(:first-child) {
  margin-top: 22px !important;
  margin-bottom: 10px !important;
}

/* Subtítulos H4, H5, H6 dentro del contenido */
main .content__parragraph h4,
.blog-entry-content h4,
.blog-post-content h4,
body.blog-post-content h4 {
  font-family: var(--font-blog) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #a5352a !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

main .content__parragraph h5,
.blog-entry-content h5,
.blog-post-content h5,
body.blog-post-content h5 {
  font-family: var(--font-blog) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #a5352a !important;
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

main .content__parragraph h6,
.blog-entry-content h6,
.blog-post-content h6,
body.blog-post-content h6 {
  font-family: var(--font-blog) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #a5352a !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}


/* Párrafos regulares idénticos a producción */
main .content__parragraph p,
.blog-entry-content p,
.blog-post-content p,
body.blog-post-content p {
  font-family: var(--font-blog) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  line-height: 1.6 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

main .content__parragraph p span,
.blog-entry-content p span,
.blog-post-content p span {
  font-family: var(--font-blog) !important;
  font-size: 15px !important;
  color: #000000 !important;
}

/* Listas ordenadas y desordenadas */
main .content__parragraph ul,
main .content__parragraph ol,
.blog-entry-content ul,
.blog-entry-content ol {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-left: 24px !important;
}

main .content__parragraph li,
.blog-entry-content li {
  font-family: var(--font-blog) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
}

/* Textos resaltados en negrita (párrafos y listas generales) */
main .content__parragraph strong,
main .content__parragraph b,
.blog-entry-content strong,
.blog-entry-content b,
.blog-post-content strong,
.blog-post-content b,
body.blog-post-content strong,
body.blog-post-content b {
  font-weight: 700 !important;
  color: #000000 !important;
}

/* Negritas (b, strong) y spans dentro de cualquier encabezado H2, H3, H4, H5, H6 siempre en color rojo #a5352a */
main .content__parragraph h2 b,
main .content__parragraph h2 strong,
main .content__parragraph h2 span,
main .content__parragraph h3 b,
main .content__parragraph h3 strong,
main .content__parragraph h3 span,
main .content__parragraph h4 b,
main .content__parragraph h4 strong,
main .content__parragraph h4 span,
main .content__parragraph h5 b,
main .content__parragraph h5 strong,
main .content__parragraph h5 span,
main .content__parragraph h6 b,
main .content__parragraph h6 strong,
main .content__parragraph h6 span,
.blog-entry-content h2 b,
.blog-entry-content h2 strong,
.blog-entry-content h2 span,
.blog-entry-content h3 b,
.blog-entry-content h3 strong,
.blog-entry-content h3 span,
.blog-entry-content h4 b,
.blog-entry-content h4 strong,
.blog-entry-content h4 span,
.blog-entry-content h5 b,
.blog-entry-content h5 strong,
.blog-entry-content h5 span,
.blog-entry-content h6 b,
.blog-entry-content h6 strong,
.blog-entry-content h6 span,
.blog-post-content h2 b,
.blog-post-content h2 strong,
.blog-post-content h2 span,
.blog-post-content h3 b,
.blog-post-content h3 strong,
.blog-post-content h3 span,
.blog-post-content h4 b,
.blog-post-content h4 strong,
.blog-post-content h4 span,
.blog-post-content h5 b,
.blog-post-content h5 strong,
.blog-post-content h5 span,
.blog-post-content h6 b,
.blog-post-content h6 strong,
.blog-post-content h6 span,
body.blog-post-content h2 b,
body.blog-post-content h2 strong,
body.blog-post-content h2 span,
body.blog-post-content h3 b,
body.blog-post-content h3 strong,
body.blog-post-content h3 span,
body.blog-post-content h4 b,
body.blog-post-content h4 strong,
body.blog-post-content h4 span,
body.blog-post-content h5 b,
body.blog-post-content h5 strong,
body.blog-post-content h5 span,
body.blog-post-content h6 b,
body.blog-post-content h6 strong,
body.blog-post-content h6 span {
  color: #a5352a !important;
  font-weight: 700 !important;
}

/* ==========================================================
   5. ENLACES (Links dentro del texto)
   ========================================================== */
main .content__parragraph a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link),
.blog-entry-content a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link),
.blog-post-content a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link),
body.blog-post-content a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link) {
  color: #0000FF !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: color 0.2s ease !important;
}

main .content__parragraph a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link):hover,
.blog-entry-content a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link):hover,
.blog-post-content a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link):hover,
body.blog-post-content a:not(.go-home-button):not(.button-a):not(.button):not(.wp-block-button__link):hover {
  color: #00008B !important;
}

/* ==========================================================
   6. BOTONES DE ACCIÓN / COMPRA (Rojo Institucional)
   ========================================================== */

/* Contenedor centrado para el botón */
.blog-post-content .button-buy,
.button-buy {
  display: flex !important;
  justify-content: center !important;
  margin: 30px 0 !important;
  width: 100% !important;
  text-align: center;
}

/* Botón principal rojo institucional */
.blog-post-content .go-home-button,
.blog-post-content .button-a,
.go-home-button,
.button-a,
.wp-block-button.is-style-blog-action-btn .wp-block-button__link {
  background: #a5352a !important;
  /* Rojo principal */
  color: #ffffff !important;
  font-family: var(--font-blog);
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  height: 38px !important;
  padding: 0 25px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hover de los botones */
.blog-post-content .go-home-button:hover,
.blog-post-content .button-a:hover,
.go-home-button:hover,
.button-a:hover,
.wp-block-button.is-style-blog-action-btn .wp-block-button__link:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ==========================================================
   7. IMÁGENES DENTRO DEL POST Y PORTADA
   ========================================================== */
main .content__parragraph img,
.blog-entry-content img,
.blog-post-content img,
body.blog-post-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 16px auto !important;
  border-radius: 5px !important;
}

/* Imagen de portada centrada (Exacta a Angular en producción) */
main .content__img,
.blog-post-content .content__img,
.blog-cover-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin: 20px auto !important;
  max-width: 700px !important;
  width: 100% !important;
  align-self: center !important;
  box-shadow: none !important;
  border-radius: 5px !important;
}

@media screen and (min-width: 769px) {

  main .content__img,
  .blog-post-content .content__img,
  .blog-cover-wrapper {
    max-width: 560px !important;
  }
}

main .content__img img,
.blog-post-content .content__img img,
.blog-cover-wrapper img,
.blog-cover-image {
  border-radius: 5px !important;
  width: min(700px, 100%) !important;
  height: auto !important;
  aspect-ratio: 700 / 420 !important;
  display: block !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  max-height: none !important;
}

/* ==========================================================
.content__parragraph > *:last-child,
.blog-entry-content > *:last-child {
  margin-bottom: 0 !important;
}

main .content__updated,
.content__updated {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #222121 !important;
  font-size: 16px !important;
  margin-top: 36px !important;
  margin-bottom: 2px !important;
}

main .content__updated svg,
main .content__updated img,
.content__updated svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  opacity: 0.7 !important;
}

main .content__updated span,
.content__updated span {
  font-family: 'Roboto', 'Lexend', sans-serif !important;
}

main .content__updated span strong,
.content__updated span strong {
  color: #2c3e50 !important;
  font-weight: 600 !important;
}

/* ==========================================================
   9. FOOTER DEL CONTENIDO (Redes Sociales y Comprar Certificado)
   ========================================================== */
.other-articles-container,
#ctl-post-footer-wrap,
.ctl-post-footer-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

main .content__footer,
.content__footer,
.ctl-footer-bar {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-top: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  margin-top: 0 !important;
  margin-bottom: 25px !important;
}

.content__footer .social-share-btns {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.content__footer .social-share-btns a {
  text-decoration: none !important;
  display: flex !important;
  height: auto !important;
  background: #80808081 !important;
  border-radius: 5px !important;
  margin-right: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 6px !important;
  color: #ffffff !important;
  transition: opacity 0.2s ease !important;
}

.content__footer .social-share-btns a:hover {
  opacity: 0.8 !important;
}

.content__footer a.content-footer-btn {
  font-size: 17px !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-family: var(--font-blog) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.content__footer a.content-footer-btn:hover {
  text-decoration: underline !important;
}

/* ==========================================================
   10. SECCIÓN OTROS ARTÍCULOS DE INTERÉS (Idéntica a Angular)
   ========================================================== */
.ctl-other-section,
main .other-articles {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 20px auto !important;
}

.ctl-other-title,
main .other-articles__div {
  font-family: 'Roboto', 'Lexend', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 20px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.ctl-other-grid,
main .other-articles__article {
  width: 100% !important;
  display: flex !important;
  justify-content: space-around !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.ctl-other-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  margin-bottom: 15px !important;
  padding: 0 !important;
}

.ctl-other-card,
main .other-articles__article article {
  display: flex !important;
  flex-direction: column !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
  margin-bottom: 15px !important;
  box-shadow: none !important;
  border: none !important;
  text-align: left !important;
}

.ctl-other-card:hover,
main .other-articles__article article:hover {
  transform: scale(1.01) !important;
}

.ctl-img-box {
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
  border-radius: 5px !important;
}

.ctl-other-img,
main .other-articles__article article img {
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 5px !important;
}

.ctl-card-post-title,
main .other-articles__article article p:first-child {
  font-family: var(--font-blog) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin: 10px 0 5px 0 !important;
  padding: 0 7px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.ctl-card-post-intro,
main .other-articles__article article p:last-child {
  font-family: var(--font-blog) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: gray !important;
  margin: 0 !important;
  padding: 0 7px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

/* ==========================================================
   11. RESPONSIVE Y ADAPTABILIDAD MULTIPANTALLA COMPLETA
   ========================================================== */

/* Tablets en horizontal / pantallas medianas */
@media screen and (max-width: 992px) {

  main .content__title,
  .blog-post-content h1,
  .blog-main-title {
    font-size: 32px !important;
    line-height: 1.22 !important;
  }

  main .content__parragraph h2,
  .blog-entry-content h2,
  .blog-post-content h2 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  main .content__parragraph h3,
  .blog-entry-content h3,
  .blog-post-content h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  main .content__parragraph p,
  .blog-entry-content p,
  .blog-post-content p {
    font-size: 14.5px !important;
  }

  .ctl-other-grid {
    gap: 20px !important;
  }
}

/* Tablets en vertical y pantallas intermedias */
@media screen and (max-width: 768px) {
  .blog-post-single-view main#primary.site-main {
    margin-top: 40px !important;
  }

  main .content,
  .blog-article-wrapper {
    width: 92% !important;
    margin: 15px auto 35px auto !important;
  }

  main .content__title,
  .blog-post-content h1,
  .blog-main-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
    padding-top: 10px !important;
  }

  main .content__subtitle,
  .blog-summary-lead {
    font-size: 16px !important;
    margin-top: 15px !important;
  }

  main .content__img,
  .blog-cover-wrapper {
    max-width: 100% !important;
    margin: 16px auto !important;
  }

  main .content__parragraph h2,
  .blog-entry-content h2,
  .blog-post-content h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  main .content__parragraph h2:not(:first-child),
  .blog-entry-content h2:not(:first-child) {
    margin-top: 24px !important;
  }

  main .content__parragraph h3,
  .blog-entry-content h3,
  .blog-post-content h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  main .content__parragraph p,
  .blog-entry-content p,
  .blog-post-content p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }

  .blog-post-content .go-home-button,
  .blog-post-content .button-a,
  .go-home-button,
  .button-a {
    height: 36px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
  }

  .ctl-other-section {
    width: 92% !important;
    margin: 25px auto !important;
  }

  .ctl-other-grid {
    justify-content: center !important;
    gap: 20px !important;
  }
}

/* Pantallas móviles */
@media screen and (max-width: 480px) {

  main .content,
  .blog-article-wrapper {
    width: 92% !important;
    margin: 10px auto 25px auto !important;
  }

  main .content__title,
  .blog-post-content h1,
  .blog-main-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    padding-top: 10px !important;
  }

  main .content__date,
  p.content__date {
    font-size: 11.5px !important;
  }

  main .content__subtitle,
  .blog-summary-lead {
    font-size: 15px !important;
    margin-top: 12px !important;
    line-height: 1.45 !important;
  }

  main .content__parragraph h2,
  .blog-entry-content h2,
  .blog-post-content h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  main .content__parragraph h2:not(:first-child),
  .blog-entry-content h2:not(:first-child) {
    margin-top: 20px !important;
  }

  main .content__parragraph h3,
  .blog-entry-content h3,
  .blog-post-content h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  main .content__parragraph p,
  .blog-entry-content p,
  .blog-post-content p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  .ctl-footer-bar {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .ctl-social-group {
    gap: 10px !important;
  }

  .ctl-social-link {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .ctl-social-link svg {
    width: 24px !important;
    height: 24px !important;
  }

  .ctl-buy-link {
    font-size: 15px !important;
  }

  .ctl-other-card-link,
  .ctl-other-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ctl-img-box,
  .ctl-other-img {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }
}

/* ==========================================================
   14. BOTONES DE ACCIÓN / COMPRA (.button-buy y .go-home-button)
   Idéntico a estilos de producción
   ========================================================== */
.button-buy {
  display: flex !important;
  justify-content: center !important;
  margin: 30px 0 !important;
  width: 100% !important;
}

.go-home-button,
a.go-home-button,
a.go-home-button.button-a {
  border-radius: 6px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  height: 38px !important;
  padding: 0 28px !important;
  border: transparent !important;
  background: var(--main-rojo) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-family: var(--font-blog) !important;
  font-size: 15px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.go-home-button:hover,
a.go-home-button:hover,
a.go-home-button.button-a:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: #8e2b21 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================
   15. SECCIÓN OTROS ARTÍCULOS DE INTERÉS Y BARRA SOCIAL
   Exactamente idéntico a producción (sin enlaces azules ni subrayados)
   ========================================================== */
.ctl-post-footer-wrap,
#ctl-post-footer-wrap {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 25px auto 40px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--font-blog) !important;
}

.ctl-post-footer-wrap *,
#ctl-post-footer-wrap * {
  box-sizing: border-box !important;
  font-family: var(--font-blog) !important;
}

/* 1. Barra Social y CTA Comprar */
.ctl-post-footer-wrap .ctl-footer-bar,
#ctl-post-footer-wrap .ctl-footer-bar {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-top: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  margin: 0 0 25px 0 !important;
  box-sizing: border-box !important;
}

.ctl-post-footer-wrap .ctl-social-group,
#ctl-post-footer-wrap .ctl-social-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ctl-post-footer-wrap .ctl-social-link,
#ctl-post-footer-wrap .ctl-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #80808081 !important;
  border-radius: 5px !important;
  padding: 0 !important;
  text-decoration: none !important;
  border: none !important;
  transition: opacity 0.2s ease !important;
}

.ctl-post-footer-wrap .ctl-social-link:hover,
#ctl-post-footer-wrap .ctl-social-link:hover {
  opacity: 0.8 !important;
  text-decoration: none !important;
}

.ctl-post-footer-wrap .ctl-social-link svg,
#ctl-post-footer-wrap .ctl-social-link svg {
  display: block !important;
}

.ctl-post-footer-wrap .ctl-buy-link,
#ctl-post-footer-wrap .ctl-buy-link {
  display: inline-block !important;
  font-family: var(--font-blog) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-decoration: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transition: opacity 0.2s ease !important;
}

.ctl-post-footer-wrap .ctl-buy-link:hover,
#ctl-post-footer-wrap .ctl-buy-link:hover {
  opacity: 0.8 !important;
  color: #000000 !important;
  text-decoration: none !important;
}

/* 2. Sección Otros Artículos de Interés */
.ctl-post-footer-wrap .ctl-other-section,
#ctl-post-footer-wrap .ctl-other-section {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ctl-post-footer-wrap .ctl-other-title,
#ctl-post-footer-wrap .ctl-other-title {
  font-family: var(--font-blog) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  background: transparent !important;
  border: none !important;
}

.ctl-post-footer-wrap .ctl-other-grid,
#ctl-post-footer-wrap .ctl-other-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media screen and (max-width: 768px) {

  .ctl-post-footer-wrap .ctl-other-grid,
  #ctl-post-footer-wrap .ctl-other-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
}

/* Enlaces de tarjeta: Cero subrayado, cero color azul */
.ctl-post-footer-wrap .ctl-other-card-link,
#ctl-post-footer-wrap .ctl-other-card-link,
.ctl-post-footer-wrap a.ctl-other-card-link,
#ctl-post-footer-wrap a.ctl-other-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.ctl-post-footer-wrap .ctl-other-card-link:hover,
#ctl-post-footer-wrap .ctl-other-card-link:hover,
.ctl-post-footer-wrap a.ctl-other-card-link:hover,
#ctl-post-footer-wrap a.ctl-other-card-link:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.ctl-post-footer-wrap .ctl-other-card,
#ctl-post-footer-wrap .ctl-other-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.ctl-post-footer-wrap .ctl-img-box,
#ctl-post-footer-wrap .ctl-img-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  overflow: hidden !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.ctl-post-footer-wrap .ctl-other-img,
#ctl-post-footer-wrap .ctl-other-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transition: transform 0.25s ease !important;
}

.ctl-post-footer-wrap .ctl-other-card-link:hover .ctl-other-img,
#ctl-post-footer-wrap .ctl-other-card-link:hover .ctl-other-img {
  transform: scale(1.02) !important;
}

/* Título de cada tarjeta de post: Negrita, Negro, SIN subrayado */
.ctl-post-footer-wrap .ctl-card-post-title,
#ctl-post-footer-wrap .ctl-card-post-title,
.ctl-post-footer-wrap a .ctl-card-post-title,
#ctl-post-footer-wrap a .ctl-card-post-title {
  font-family: var(--font-blog) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-decoration: none !important;
}

/* Resumen de cada tarjeta de post: Regular, Gris (#555), SIN subrayado */
.ctl-post-footer-wrap .ctl-card-post-intro,
#ctl-post-footer-wrap .ctl-card-post-intro,
.ctl-post-footer-wrap a .ctl-card-post-intro,
#ctl-post-footer-wrap a .ctl-card-post-intro {
  font-family: var(--font-blog) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555555 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-decoration: none !important;
}