/* GENERADO por scripts/theme/gen-marca-v2-blog a partir de blog-comic.css. No editar a mano.
   Marca v2, fase 2 (blog): solo staging, cargado por head.tpl después del CSS del blog. */
/* ==========================================================================
   Oaseeds: diseño «cómic underground» de los artículos del blog (propuesta en docs/blogdesign/claude_code_v3.css).
   Se sirve como sustitución desde el tema de modules/g420_blog/views/css/detail_post.css (solo se carga en la página
   de artículo): scripts/theme/deploy-theme concatena el detail_post.css del fork (../g420_ps_blog) + este fichero
   en theme/oaseeds/modules/g420_blog/views/css/detail_post.css. El módulo NO se toca.
   Fuentes (OFL) servidas desde el propio servidor (assets/fonts/blog), no desde Google Fonts.
   ========================================================================== */

/* Bitter (variable 400-700, OFL): texto de lectura del blog (artículo, extractos, descripciones, bio del autor) */
/* ==========================================================================
   OASEEDS BLOG — tema cómic underground
   Selectores adaptados al HTML real de g420_blog + Warehouse.

   TIPOGRAFÍAS
   - Bangers ............... títulos, titulares y botones
   - Permanent Marker ...... cartela de narrador, sellos de fecha, pegatinas
   - Atkinson Hyperlegible . texto del artículo y textos explicativos
   - Atkinson Hyperlegible ... resto de textos (formularios, etiquetas...); Bitter ... texto de lectura

   ========================================================================== */

/* 2. CABECERA NATIVA DEL POST */
#g420_blog_page .g420-blog-wrapper-detail h1.page-heading,
#g420_blog_page .g420-blog-wrapper-detail h1.page-heading .title_cat {
  font-family: 'Bangers', sans-serif !important;
  font-size: 38px !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  color: #311B0D !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 12px !important;
}

/* Imagen destacada */
#g420_blog_page .g420_blog_img_wrapper img {
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 4px 4px 0 #311B0D !important;
  margin-bottom: 25px !important;
  width: 100% !important;
  height: auto !important;
}

/* 3. BARRA DE VISTAS / FECHA / "POR" AUTOR (solo la del post) */
#g420_blog_page .post-details > .blog-extra {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  border-bottom: 2px solid #311B0D !important;
  padding-bottom: 16px !important;
  margin-bottom: 25px !important;
}

#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 13px !important;
  color: #311B0D !important; /* el tema lo pone en gris claro */
}

/* Cada dato como una etiqueta enmarcada, en el mismo lenguaje que el artículo */
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar-views,
#g420_blog_page .post-details > .blog-extra .blog_rating_reviews,
#g420_blog_page .post-details > .blog-extra .post-date,
#g420_blog_page .post-details > .blog-extra .author-block {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  background: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 2px 2px 0px #311B0D !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #311B0D !important;
}

#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #311B0D !important;
  font-size: 13px !important;
}

/* La fecha en negrita */
#g420_blog_page .post-details > .blog-extra .post-date > span:not(.be-label) {
  font-weight: 600 !important;
  color: #311B0D !important;
}

/* El módulo oculta el texto "Publicado el:" desplazándolo, y con él el icono.
   Dejamos solo el icono, igual que en las vistas. */
#g420_blog_page .post-details > .blog-extra .post-date .be-label {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  overflow: visible !important;
}

/* Iconos (ojo y calendario) en naranja de marca */
#g420_blog_page .post-details > .blog-extra i.ets_svg {
  display: inline-flex !important;
  color: #311B0D !important;
  text-indent: 0 !important;
  vertical-align: middle !important;
}

#g420_blog_page .post-details > .blog-extra i.ets_svg svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}

/* Contador de comentarios (solo aparece cuando el artículo tiene alguno) */
#g420_blog_page .post-details > .blog-extra .blog_rating_wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  float: none !important;
  margin: 0 !important;
}

#g420_blog_page .post-details > .blog-extra .blog_rating_reviews .total_views {
  font-weight: 600 !important;
  color: #311B0D !important;
}

/* Contenedores vacíos que solo añaden huecos (si activas valoraciones, vuelven a mostrarse) */
#g420_blog_page .post-details > .blog-extra .blog_rating_wrapper:not(:has(*)),
#g420_blog_page .post-details > .blog-extra .g420-blog-tags-social:not(:has(*)) {
  display: none !important;
}

/* "Por" + nombre del autor */
#g420_blog_page .post-details > .blog-extra .post-author-label {
  color: #6B5D50 !important;
}

#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar .author-block a,
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar .author-block .post-author-name {
  color: #311B0D !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#g420_blog_page .post-details > .blog-extra .author-block a:hover .post-author-name {
  text-decoration: underline !important;
}

/* 4. CONTENEDOR DEL ARTÍCULO */
#g420_blog_page .g420-blog-wrapper-content > .blog_description {
  background-color: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 #311B0D !important;
  padding: 40px 35px !important;
  margin-top: 15px !important;
  margin-bottom: 35px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  box-sizing: border-box !important;
}

/* 5. TIPOGRAFÍA Y PÁRRAFOS */
#g420_blog_page .g420-blog-wrapper-content > .blog_description p {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #311B0D !important;
  margin-bottom: 20px !important;
  font-weight: 400 !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description p b,
#g420_blog_page .g420-blog-wrapper-content > .blog_description p strong {
  color: #311B0D !important;
  font-weight: 700 !important;
}

/* 6. TITULARES INTERIORES (H2 Y H3) */
#g420_blog_page .g420-blog-wrapper-content > .blog_description h2 {
  font-family: 'Bangers', sans-serif !important;
  font-size: 26px !important;
  text-transform: uppercase !important;
  color: #311B0D !important;
  letter-spacing: 0.5px !important;
  margin: 40px 0 18px 0 !important;
  border-left: 5px solid #F89702 !important;
  padding-left: 12px !important;
  line-height: 1.25 !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description h3 {
  font-family: 'Bangers', sans-serif !important;
  font-size: 21px !important;
  text-transform: uppercase !important;
  color: #311B0D !important;
  letter-spacing: 0.5px !important;
  margin: 30px 0 15px 0 !important;
}

/* 7. ENLACES Y LISTAS */
#g420_blog_page .g420-blog-wrapper-content > .blog_description a {
  color: #311B0D !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description ul {
  margin: 15px 0 25px 25px !important;
  padding-left: 10px !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description li {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #311B0D !important;
  margin-bottom: 8px !important;
}

/* 8. IMÁGENES INTERIORES ENMARCADAS */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .image-panel {
  margin: 30px 0 !important;
  text-align: center !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description p > img,
#g420_blog_page .g420-blog-wrapper-content > .blog_description .image-panel img {
  max-width: 100% !important;
  height: auto !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 4px 4px 0px #311B0D !important;
  display: inline-block !important;
}

/* 9. CAJAS DE ALERTA (requieren <div class="callout-box"> en el HTML del post) */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .callout-box {
  background-color: #E6DCC3 !important;
  border: 2px solid #311B0D !important;
  border-left: 6px solid #F89702 !important;
  padding: 18px 20px !important;
  margin: 25px 0 !important;
  box-shadow: 4px 4px 0px #311B0D !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description .callout-box h4 {
  font-family: 'Bangers', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  color: #311B0D !important;
  letter-spacing: 0.5px !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description .callout-box p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
  color: #311B0D !important;
}

/* 10. BLOQUE TRANSACCIONAL (requiere <div class="transactional-cta"> en el HTML del post) */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta {
  background-color: #311B0D !important;
  color: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  padding: 30px 20px !important;
  margin: 45px 0 10px 0 !important;
  box-shadow: 4px 4px 0 #F89702 !important;
  border-radius: 4px !important;
  text-align: center !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta h3 {
  color: #FCF8EE !important;
  font-size: 24px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta p {
  color: #E6DCC3 !important;
  font-size: 15px !important;
  max-width: 620px !important;
  margin: 0 auto 18px auto !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description .cta-button {
  display: inline-block !important;
  background: #F89702 !important;
  color: #311B0D !important;
  font-family: 'Bangers', sans-serif !important;
  font-size: 17px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 12px 26px !important;
  border: 2px solid #FCF8EE !important;
  box-shadow: 4px 4px 0px #311B0D !important;
  letter-spacing: 1px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#g420_blog_page .g420-blog-wrapper-content > .blog_description .cta-button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 #311B0D !important;
  color: #311B0D !important;
}

/* 11. "PUBLICADO EN: CATEGORÍA" (debajo del artículo) */
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  margin: 0 0 25px 0 !important;
}

#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .g420-blog-categories {
  margin: 0 !important;
}

#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #6B5D50 !important;
}

#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-categories > a {
  display: inline-block !important;
  background: #FCF8EE !important;
  color: #311B0D !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 2px 2px 0px #311B0D !important;
  padding: 3px 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-categories > a:hover {
  background: #F89702 !important;
  color: #311B0D !important;
}

/* 12. CAJA DE AUTOR */
#g420_blog_page .g420-block-author {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  float: none !important;
  background-color: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  box-shadow: 4px 4px 0px #311B0D !important;
  border-radius: 4px !important;
  padding: 22px !important;
  margin-top: 10px !important;
  margin-bottom: 35px !important;
  box-sizing: border-box !important;
}

/* El marco va en el contenedor (el tema ya recorta la foto en círculo) */
#g420_blog_page .g420-block-author .avatar_img {
  flex: 0 0 84px !important;
  width: 84px !important;
  height: 84px !important;
  margin: 0 !important;
  border: 2px solid #311B0D !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

#g420_blog_page .g420-block-author .avatar_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#g420_blog_page .g420-block-author .g420-des-and-author {
  float: none !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#g420_blog_page .g420-block-author .g420-author-name,
#g420_blog_page .g420-block-author .g420-author-name a {
  font-family: 'Bangers', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #311B0D !important;
  text-decoration: none !important;
}

#g420_blog_page .g420-block-author .g420-author-name a:hover {
  color: #311B0D !important;
}

/* El tema la pone en cursiva y a 14px: la igualamos al texto del artículo */
#g420_blog_page .g420-block-author .g420-author-description {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #311B0D !important;
  margin-top: 8px !important;
}

#g420_blog_page .g420-block-author .g420-author-description a {
  color: #311B0D !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* 13. TÍTULOS DE SECCIÓN: "DEJA UN COMENTARIO" Y "PUBLICACIONES RELACIONADAS" */
#g420_blog_page .g420-blog-wrapper-detail h4.title_blog {
  font-family: 'Bangers', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #311B0D !important;
  border: 0 !important;
  border-left: 5px solid #F89702 !important;
  padding: 0 0 0 12px !important;
  margin: 0 0 22px 0 !important;
  width: auto !important;
}

/* 14. FORMULARIO "DEJA UN COMENTARIO" */
#g420_blog_page .g420_comment_form_blog {
  background-color: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 #311B0D !important;
  padding: 30px 35px !important;
  margin-bottom: 40px !important;
  box-sizing: border-box !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

#g420_blog_page .g420_comment_form_blog .g420-blog-form-comment {
  padding: 0 !important;
}

#g420_blog_page .g420_comment_form_blog .blog-comment-row {
  margin-bottom: 18px !important;
}

/* Fila vacía que deja el módulo al final (si un día lleva captcha o casilla de privacidad, se mostrará) */
#g420_blog_page .g420_comment_form_blog .blog-comment-row:not(:has(input, textarea, select, button, label, a, img, iframe)) {
  display: none !important;
}

#g420_blog_page .g420_comment_form_blog label {
  display: block !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #311B0D !important;
  margin: 0 0 6px 0 !important;
}

/* Campos (incluye Nombre y Correo, que solo ven los visitantes sin sesión) */
#g420_blog_page .g420_comment_form_blog input[type="text"],
#g420_blog_page .g420_comment_form_blog input[type="email"],
#g420_blog_page .g420_comment_form_blog textarea,
#g420_blog_page .g420_comment_form_blog .form-control {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  padding: 11px 14px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 16px !important; /* 16px evita el zoom automático de iPhone */
  line-height: 1.5 !important;
  color: #311B0D !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

#g420_blog_page .g420_comment_form_blog textarea {
  min-height: 150px !important;
  resize: vertical !important;
}

#g420_blog_page .g420_comment_form_blog input[type="text"]:focus,
#g420_blog_page .g420_comment_form_blog input[type="email"]:focus,
#g420_blog_page .g420_comment_form_blog textarea:focus,
#g420_blog_page .g420_comment_form_blog .form-control:focus {
  outline: none !important;
  border-color: #F89702 !important;
  box-shadow: 3px 3px 0px #F89702 !important;
}

#g420_blog_page .g420_comment_form_blog input[type="checkbox"],
#g420_blog_page .g420_comment_form_blog input[type="radio"] {
  accent-color: #F89702 !important;
}

/* Botón "Enviar comentario": mismo lenguaje que el CTA del artículo */
#g420_blog_page .g420_comment_form_blog .blog-submit {
  float: none !important;
  margin-top: 4px !important;
}

#g420_blog_page .g420_comment_form_blog .blog-submit .button,
#g420_blog_page .g420_comment_form_blog input[type="submit"] {
  display: inline-block !important;
  background: #F89702 !important;
  color: #311B0D !important;
  font-family: 'Bangers', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 26px !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 4px 4px 0px #311B0D !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#g420_blog_page .g420_comment_form_blog .blog-submit .button:hover,
#g420_blog_page .g420_comment_form_blog input[type="submit"]:hover {
  background: #F89702 !important;
  border-color: #311B0D !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 #311B0D !important;
}

#g420_blog_page .g420_comment_form_blog .blog-submit .button:focus-visible,
#g420_blog_page .g420_comment_form_blog input[type="submit"]:focus-visible {
  outline: 2px solid #311B0D !important;
  outline-offset: 3px !important;
}

/* 14 bis. LISTA DE COMENTARIOS */
/* El tema la deja flotando y el bloque de relacionados se le metía debajo */
#g420_blog_page .g420-blog-wrapper-comment {
  display: flow-root !important;
}

#g420_blog_page .g420_blog-comments-list {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  border-top: 0 !important;
  margin: 10px 0 40px 0 !important;
  padding: 0 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

#g420_blog_page .g420-blog-wrapper-detail .g420_blog-comments-list > h4.title_blog {
  margin-bottom: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#g420_blog_page .g420_blog-comments-list .blog-comments-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Cada comentario, como una tarjeta */
#g420_blog_page .g420_blog-comments-list .blog-comment-line {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  background: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0px #311B0D !important;
  box-sizing: border-box !important;
}

#g420_blog_page .g420_blog-comments-list .g420-blog-detail-comment {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 14px !important;
}

#g420_blog_page .g420_blog-comments-list .comment-subject {
  flex: 1 1 100% !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 2px 0 !important;
  font-family: 'Bangers', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: #311B0D !important;
}

#g420_blog_page .g420_blog-comments-list .comment-by,
#g420_blog_page .g420_blog-comments-list .comment-time {
  float: none !important;
  margin: 0 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 13px !important;
  color: #6B5D50 !important;
}

#g420_blog_page .g420_blog-comments-list .comment-by > b {
  margin-left: 4px !important;
  font-weight: 700 !important;
  color: #311B0D !important;
}

/* Botones de "denunciar" y "responder" */
#g420_blog_page .g420_blog-comments-list .g420-block-report-reply-edit-delete {
  display: inline-flex !important;
  gap: 8px !important;
  margin-left: auto !important;
}

#g420_blog_page .g420_blog-comments-list .g420-block-report-reply-edit-delete > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  background: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  color: #311B0D !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#g420_blog_page .g420_blog-comments-list .g420-block-report-reply-edit-delete > span:hover {
  background: #F89702 !important;
  color: #311B0D !important;
}

#g420_blog_page .g420_blog-comments-list .g420-block-report-reply-edit-delete .ets_svg,
#g420_blog_page .g420_blog-comments-list .g420-block-report-reply-edit-delete svg {
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  color: inherit !important;
  fill: currentColor !important;
}

#g420_blog_page .g420_blog-comments-list .comment-content {
  flex: 1 1 100% !important;
  clear: none !important;
  margin: 10px 0 0 0 !important;
  padding-top: 12px !important;
  border-top: 2px solid #E6DCC3 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #311B0D !important;
}

/* Respuestas a un comentario */
#g420_blog_page .g420_blog-comments-list .comment-reply {
  flex: 1 1 100% !important;
  float: none !important;
  width: auto !important;
  margin: 12px 0 0 0 !important;
  padding: 12px 16px !important;
  background: #FCF8EE !important;
  border-left: 4px solid #F89702 !important;
  font-size: 14px !important;
  color: #311B0D !important;
}

#g420_blog_page .g420_blog-comments-list .g420-blog-replied-by,
#g420_blog_page .g420_blog-comments-list .g420-blog-replied-by-name {
  margin-left: 0 !important;
  font-size: 13px !important;
  color: #6B5D50 !important;
}

#g420_blog_page .g420_blog-comments-list .g420-blog-replied-by > b,
#g420_blog_page .g420_blog-comments-list .g420-blog-replied-by-name {
  font-weight: 700 !important;
  color: #311B0D !important;
}

#g420_blog_page .g420_blog-comments-list .g420-blog-reply-content {
  margin-top: 6px !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #311B0D !important;
}

/* Formulario de respuesta (se abre al pulsar "responder") */
#g420_blog_page .g420_blog-comments-list textarea,
#g420_blog_page .g420_blog-comments-list input[type="text"],
#g420_blog_page .g420_blog-comments-list input[type="email"] {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 12px !important;
  background: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 16px !important;
  color: #311B0D !important;
}

#g420_blog_page .g420_blog-comments-list textarea:focus,
#g420_blog_page .g420_blog-comments-list input[type="text"]:focus,
#g420_blog_page .g420_blog-comments-list input[type="email"]:focus {
  border-color: #F89702 !important;
  box-shadow: 3px 3px 0px #F89702 !important;
}

#g420_blog_page .g420_blog-comments-list input[type="submit"],
#g420_blog_page .g420_blog-comments-list .form_reply .btn {
  display: inline-block !important;
  margin: 12px 8px 0 0 !important;
  padding: 9px 18px !important;
  background: #F89702 !important;
  color: #311B0D !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0px #311B0D !important;
  font-family: 'Bangers', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
}

/* Botón "cancelar" del formulario de respuesta, en secundario */
#g420_blog_page .g420_blog-comments-list .form_reply input[type="submit"] + .btn,
#g420_blog_page .g420_blog-comments-list .form_reply .btn.btn-default:not([name="addReplyComment"]) {
  background: #FCF8EE !important;
  color: #311B0D !important;
}

/* 15. PUBLICACIONES RELACIONADAS */
#g420_blog_page .g420-blog-related-posts {
  position: relative !important;
  clear: both !important;
  border-top: 2px solid #311B0D !important;
  padding-top: 30px !important;
  margin-bottom: 40px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

/* Hueco a la derecha del título para las flechas */
#g420_blog_page .g420-blog-related-posts > h4.title_blog {
  padding-right: 100px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

/* Tarjetas de la misma altura */
#g420_blog_page .g420-blog-related-posts .slick-track {
  display: flex !important;
}

#g420_blog_page .g420-blog-related-posts .g420-blog-related-posts-list-li {
  position: relative !important;
  z-index: 0 !important;
  float: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 15px 14px 15px !important;
  box-sizing: border-box !important;
}

/* La tarjeta se dibuja con un pseudoelemento para no romper los anchos que calcula el carrusel */
#g420_blog_page .g420-blog-related-posts .g420-blog-related-posts-list-li::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 14px !important;
  z-index: -1 !important;
  background: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0px #311B0D !important;
}

/* Imagen */
#g420_blog_page .g420-blog-related-posts .g420_item_img {
  display: block !important;
  position: relative !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 400 / 210 !important;
  background: #E6DCC3 !important;
  margin: 2px 2px 0 2px !important;
  border-bottom: 2px solid #311B0D !important;
  overflow: hidden !important;
  border-radius: 2px 2px 0 0 !important;
}

#g420_blog_page .g420-blog-related-posts .g420_item_img img {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.25s ease !important;
}

#g420_blog_page .g420-blog-related-posts .g420-blog-related-posts-list-li:hover .g420_item_img img {
  transform: scale(1.04) !important;
}

/* Margen interior del texto de la tarjeta */
#g420_blog_page .g420-blog-related-posts .g420_title_block,
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta,
#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar,
#g420_blog_page .g420-blog-related-posts .blog_description,
#g420_blog_page .g420-blog-related-posts .read_more {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

/* Título */
#g420_blog_page .g420-blog-related-posts .g420_title_block {
  float: none !important;
  display: block !important;
  width: auto !important; /* el tema le da 100% y, con los márgenes, se salía de la tarjeta */
  font-family: 'Bangers', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: #311B0D !important;
  text-decoration: none !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

#g420_blog_page .g420-blog-related-posts .g420_title_block:hover {
  color: #311B0D !important;
}

/* Categoría y fecha */
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 14px !important;
  font-size: 12.5px !important;
  color: #6B5D50 !important;
  margin-bottom: 6px !important;
}

#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta > *,
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta .be-categories {
  float: none !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #6B5D50 !important;
}

#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta a {
  color: #311B0D !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Vistas y comentarios */
#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 16px !important;
  font-size: 12.5px !important;
  color: #6B5D50 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  float: none !important;
  margin: 0 !important;
}

#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar i.ets_svg {
  color: #311B0D !important;
}

/* Extracto */
#g420_blog_page .g420-blog-related-posts .blog_description {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #311B0D !important;
  margin-bottom: 16px !important;
}

/* "Leer más": botón secundario (el naranja queda para las acciones principales) */
#g420_blog_page .g420-blog-related-posts .read_more {
  margin-top: auto !important;
  margin-bottom: 20px !important;
  align-self: flex-start !important;
  display: inline-block !important;
  background: #FCF8EE !important;
  color: #311B0D !important;
  font-family: 'Bangers', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal !important; /* el tema lo pone en cursiva */
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  padding: 7px 16px !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0px #311B0D !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

#g420_blog_page .g420-blog-related-posts .read_more:hover {
  background: #F89702 !important;
  color: #311B0D !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 #311B0D !important;
}

/* Flechas del carrusel */
#g420_blog_page .g420-blog-related-posts button.slick-arrow {
  position: absolute !important;
  top: 30px !important; /* a la altura del título (mismo valor que el padding-top del bloque) */
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  background: #FCF8EE !important;
  border: 2px solid #311B0D !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0px #311B0D !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background 0.15s ease !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow.slick-next {
  right: 4px !important;
  left: auto !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow.slick-prev {
  right: 50px !important;
  left: auto !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: 10px !important;
  height: 10px !important;
  border: 0 !important;
  border-top: 2px solid #311B0D !important;
  border-right: 2px solid #311B0D !important;
  opacity: 1 !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow.slick-next::before {
  transform: translate(-70%, -50%) rotate(45deg) !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow.slick-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg) !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow:hover {
  background: #F89702 !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow:hover::before {
  border-color: #FCF8EE !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow:focus-visible {
  outline: 2px solid #F89702 !important;
  outline-offset: 2px !important;
}

#g420_blog_page .g420-blog-related-posts button.slick-arrow.slick-disabled {
  opacity: 0.35 !important;
  cursor: default !important;
}

/* 16. BREADCRUMB (miga de pan) */
#g420_blog_page #wrapper .breadcrumb {
  display: block !important;
  margin: 0 0 22px 0 !important;
  padding: 10px 16px !important;
  background: #E6DCC3 !important;
  border: 2px solid #311B0D !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0px #311B0D !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  color: #311B0D !important;
}

#g420_blog_page #wrapper .breadcrumb .row {
  margin: 0 !important;
}

#g420_blog_page #wrapper .breadcrumb .col {
  padding: 0 !important;
  min-width: 0 !important;
}

/* La columna vacía de la derecha (el tema la reserva para la navegación entre productos) */
#g420_blog_page #wrapper .breadcrumb .col-auto:not(:has(*)) {
  display: none !important;
}

#g420_blog_page #wrapper .breadcrumb ol {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#g420_blog_page #wrapper .breadcrumb li {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Separador: barra naranja en lugar de la gris del tema */
#g420_blog_page #wrapper .breadcrumb li::after {
  content: "/" !important;
  margin: 0 10px !important;
  color: #311B0D !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

#g420_blog_page #wrapper .breadcrumb li:last-child::after {
  content: none !important;
}

#g420_blog_page #wrapper .breadcrumb a {
  color: #311B0D !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

#g420_blog_page #wrapper .breadcrumb a:hover {
  color: #311B0D !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

#g420_blog_page #wrapper .breadcrumb a:focus-visible {
  outline: 2px solid #F89702 !important;
  outline-offset: 2px !important;
}

/* Página actual: en negrita y sin enlace */
#g420_blog_page #wrapper .breadcrumb li:last-child,
#g420_blog_page #wrapper .breadcrumb li:last-child span {
  font-weight: 700 !important;
  color: #311B0D !important;
}

/* 17. RESPONSIVE SMARTPHONES */
@media (max-width: 768px) {
  #g420_blog_page .g420-blog-wrapper-detail h1.page-heading,
  #g420_blog_page .g420-blog-wrapper-detail h1.page-heading .title_cat {
    font-size: 28px !important;
  }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description {
    padding: 20px 14px !important;
    box-shadow: 4px 4px 0px #311B0D !important;
  }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description h2 {
    font-size: 22px !important;
  }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description p {
    font-size: 16px !important;
  }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description .cta-button {
    font-size: 15px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #g420_blog_page .g420-blog-wrapper-detail h4.title_blog {
    font-size: 20px !important;
  }
  #g420_blog_page .g420_comment_form_blog {
    padding: 22px 16px !important;
    box-shadow: 4px 4px 0px #311B0D !important;
  }
  #g420_blog_page .g420_comment_form_blog .blog-submit .button,
  #g420_blog_page .g420_comment_form_blog input[type="submit"] {
    width: 100% !important;
  }
  #g420_blog_page #wrapper .breadcrumb {
    padding: 8px 12px !important;
    font-size: 13px !important;
    box-shadow: 2px 2px 0px #311B0D !important;
  }
  #g420_blog_page .g420_blog-comments-list .blog-comment-line {
    padding: 16px !important;
  }
  #g420_blog_page .g420_blog-comments-list .comment-subject {
    font-size: 17px !important;
  }
  /* El título largo del artículo, en una sola línea con puntos suspensivos */
  #g420_blog_page #wrapper .breadcrumb li:last-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  #g420_blog_page #wrapper .breadcrumb li:last-child span {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  /* Caja de autor apilada: foto arriba, texto debajo */
  #g420_blog_page .g420-block-author {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px 16px !important;
  }
  #g420_blog_page .g420-block-author .avatar_img {
    flex-basis: auto !important;
    width: 72px !important;
    height: 72px !important;
  }
  #g420_blog_page .g420-block-author .g420-author-name,
  #g420_blog_page .g420-block-author .g420-author-name a {
    font-size: 18px !important;
  }
}


/* ==========================================================================
   18. TEMA CÓMIC
   Paleta tomada del logo y de las ilustraciones de la newsletter.
   Va al final a propósito: ajusta colores, tipografías y formas de las
   secciones anteriores.
   ========================================================================== */
#g420_blog_page{
  --ink:#311B0D; --paper:#FCF8EE; --paper-2:#E6DCC3; --amber:#F89702; --amber-ink:#311B0D;
  --head:'Bangers', 'Impact', sans-serif; --hand:'Permanent Marker', 'Atkinson Hyperlegible', sans-serif;
}

/* ---------- TITULARES con rotulado de cómic ---------- */
#g420_blog_page .g420-blog-wrapper-detail h1.page-heading,
#g420_blog_page .g420-blog-wrapper-detail h1.page-heading .title_cat{
  font-family:var(--head)!important;font-weight:400!important;font-size:52px!important;letter-spacing:1.5px!important;line-height:1.02!important;color:var(--ink)!important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description h2,
#g420_blog_page .g420-blog-wrapper-content > .blog_description h3,
#g420_blog_page .g420-blog-wrapper-detail h4.title_blog,
#g420_blog_page .g420-block-author .g420-author-name,#g420_blog_page .g420-block-author .g420-author-name a,
#g420_blog_page .g420_blog-comments-list .comment-subject,
#g420_blog_page .g420-blog-related-posts .g420_title_block,
#g420_blog_page .g420-blog-wrapper-content > .blog_description .callout-box h4,
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta h3{
  font-family:var(--head)!important;font-weight:400!important;letter-spacing:1px!important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description h2{font-size:34px!important;line-height:1.05!important;border-left:0!important;padding-left:0!important;}
#g420_blog_page .g420-blog-wrapper-content > .blog_description h2::before{content:"";display:block;width:64px;height:6px;background:var(--amber);border:2px solid var(--ink);margin-bottom:10px;}
#g420_blog_page .g420-blog-wrapper-content > .blog_description h3{font-size:26px!important;}
#g420_blog_page .g420-blog-wrapper-detail h4.title_blog{font-size:32px!important;border-left-color:var(--amber)!important;border-left-width:6px!important;}
#g420_blog_page .g420-blog-related-posts .g420_title_block{font-size:23px!important;line-height:1.1!important}
#g420_blog_page .g420_blog-comments-list .comment-subject{font-size:22px!important}
#g420_blog_page .g420-block-author .g420-author-name a{font-size:24px!important}

/* ---------- BREADCRUMB: sin caja, discreto ---------- */
#g420_blog_page #wrapper .breadcrumb{background:transparent!important;border:0!important;box-shadow:none!important;padding:6px 0!important;margin-bottom:14px!important;}
#g420_blog_page #wrapper .breadcrumb li::after{color:var(--amber-ink)!important}
#g420_blog_page #wrapper .breadcrumb a:hover{color:var(--amber-ink)!important}

/* ---------- METADATOS como CARTELA DE NARRADOR ---------- */
#g420_blog_page .post-details > .blog-extra{border-bottom:0!important;padding:0!important;margin:6px 0 26px!important;}
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar{
  display:inline-flex!important;gap:0!important;background:var(--amber)!important;border:2px solid var(--ink)!important;box-shadow:4px 4px 0 var(--ink)!important;
  padding:8px 4px!important;transform:rotate(-1deg);
}
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar-views,
#g420_blog_page .post-details > .blog-extra .blog_rating_reviews,
#g420_blog_page .post-details > .blog-extra .post-date,
#g420_blog_page .post-details > .blog-extra .author-block{
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0 14px!important;border-left:2px solid rgba(49,27,13,.35)!important;border-radius:0!important;
  font-family:var(--hand)!important;font-size:15px!important;color:var(--ink)!important;text-transform:uppercase;
}
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar > :first-child,
/* «N comentarios» va DENTRO del primer hijo (.blog_rating_wrapper); y si ese bloque está vacío (oculto), el primero es el siguiente */
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar > :first-child > .blog_rating_reviews:first-child,
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar > .blog_rating_wrapper:not(:has(*)) + *{border-left:0!important}
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar span{color:var(--ink)!important;font-size:15px!important}
#g420_blog_page .post-details > .blog-extra i.ets_svg{color:var(--ink)!important}
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar .author-block a,
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar .author-block .post-author-name{color:var(--ink)!important;text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px}
#g420_blog_page .post-details > .blog-extra .post-author-label{color:var(--ink)!important}

/* ---------- PANELES: papel, tinta de 3px ---------- */
#g420_blog_page .g420_blog_img_wrapper img{border-width:2px!important;box-shadow:4px 4px 0 var(--ink)!important}
#g420_blog_page .g420-blog-wrapper-content > .blog_description{background:var(--paper)!important;border-width:2px!important;box-shadow:4px 4px 0 var(--ink)!important}
/* Enlaces del texto: tinta con barra ámbar debajo; al pasar el ratón (o con foco) se rellena de ámbar toda la palabra.
   No a las fichas de producto del texto ni a imágenes enlazadas. */
#g420_blog_page .g420-blog-wrapper-content > .blog_description a:not(:has(img)):not(.g420-inline-products a){
  color:var(--ink)!important;font-weight:inherit!important;text-decoration:none!important;
  box-shadow:inset 0 -4px 0 var(--amber)!important;background-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .2s ease}
#g420_blog_page .g420-blog-wrapper-content > .blog_description a:not(:has(img)):not(.g420-inline-products a):hover,
#g420_blog_page .g420-blog-wrapper-content > .blog_description a:not(:has(img)):not(.g420-inline-products a):focus-visible{
  background-color:var(--amber)!important;color:var(--ink)!important;outline:none}
#g420_blog_page .g420-blog-wrapper-content > .blog_description p > img{border-width:2px!important}
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat a{background:var(--paper-2)!important}
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat a:hover{background:var(--amber)!important;color:var(--ink)!important}

/* Caja de alerta: cartela con fondo de rayado */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .callout-box{
  background-color:var(--paper-2)!important;
  background-image:repeating-linear-gradient(45deg,rgba(49,27,13,.07) 0 1px,transparent 1px 7px)!important;
  border:2px solid var(--ink)!important;border-left:2px solid var(--ink)!important;box-shadow:4px 4px 0 var(--ink)!important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .callout-box h4{font-size:24px!important;display:inline-block!important;background:var(--amber);border:2px solid var(--ink);padding:2px 10px!important;transform:rotate(-1.5deg);margin-bottom:10px!important}

/* CTA final: rayado cruzado + onomatopeya */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta{
  position:relative!important;overflow:visible!important;
  background-color:var(--paper)!important;color:var(--ink)!important;
  background-image:repeating-linear-gradient(45deg,rgba(49,27,13,.09) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,rgba(49,27,13,.09) 0 1px,transparent 1px 6px)!important;
  border:2px solid var(--ink)!important;box-shadow:4px 4px 0 var(--ink)!important;padding:40px 24px 34px!important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta::before{
  content:"¡ZAS!";position:absolute;top:-38px;right:20px;
  font-family:var(--head);font-size:30px;letter-spacing:1px;color:var(--ink);
  background:var(--amber);padding:22px 26px;transform:rotate(8deg);
  clip-path:polygon(50% 0,61% 22%,85% 10%,78% 36%,100% 45%,79% 60%,92% 86%,64% 77%,50% 100%,37% 77%,8% 88%,21% 61%,0 46%,22% 35%,14% 9%,39% 22%);
  filter:drop-shadow(0 0 0 var(--ink));
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta h3{color:var(--ink)!important;font-size:38px!important;line-height:1!important}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta p{color:#311B0D!important;background:var(--paper);display:inline-block;padding:4px 10px}

/* ---------- BOTONES: tinta sobre ámbar, como el logo ---------- */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .cta-button,
#g420_blog_page .g420_comment_form_blog .blog-submit .button,
#g420_blog_page .g420_comment_form_blog input[type="submit"],
#g420_blog_page .g420_blog-comments-list input[type="submit"]{
  background:var(--amber)!important;color:var(--ink)!important;border:2px solid var(--ink)!important;box-shadow:4px 4px 0 var(--ink)!important;
  font-family:var(--head)!important;font-weight:400!important;font-size:22px!important;letter-spacing:1.5px!important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .cta-button:hover,
#g420_blog_page .g420_comment_form_blog input[type="submit"]:hover{color:var(--ink)!important;background:#FFD602!important}
#g420_blog_page .g420-blog-related-posts .read_more{font-family:var(--head)!important;font-weight:400!important;font-size:18px!important;border-width:2px!important}
#g420_blog_page .g420-blog-related-posts .read_more:hover{background:var(--amber)!important;color:var(--ink)!important}
#g420_blog_page .g420-blog-related-posts button.slick-arrow:hover{background:var(--amber)!important}
#g420_blog_page .g420-blog-related-posts button.slick-arrow:hover::before{border-color:var(--ink)!important}

/* ---------- AUTOR ---------- */
#g420_blog_page .g420-block-author{background:var(--paper)!important;border-width:2px!important;box-shadow:4px 4px 0 var(--ink)!important}
#g420_blog_page .g420-block-author .avatar_img{border-width:2px!important}
#g420_blog_page .g420-block-author .g420-author-description a{color:var(--amber-ink)!important}

/* ---------- FORMULARIO ---------- */
#g420_blog_page .g420_comment_form_blog{background:var(--paper)!important;border-width:2px!important;box-shadow:4px 4px 0 var(--ink)!important}
#g420_blog_page .g420_comment_form_blog input[type="text"]:focus,#g420_blog_page .g420_comment_form_blog textarea:focus{border-color:var(--ink)!important;box-shadow:4px 4px 0 var(--amber)!important}

/* ---------- COMENTARIOS como BOCADILLOS ---------- */
#g420_blog_page .g420_blog-comments-list .blog-comments-list{gap:34px!important}
#g420_blog_page .g420_blog-comments-list .blog-comment-line{
  position:relative!important;background:#FCF8EE!important;border:2px solid var(--ink)!important;border-radius:26px!important;box-shadow:none!important;
  width:calc(100% - 60px)!important;padding:22px 28px 18px!important;
}
#g420_blog_page .g420_blog-comments-list .blog-comment-line:nth-child(even){margin-left:60px!important}
/* rabito del bocadillo */
#g420_blog_page .g420_blog-comments-list .blog-comment-line::before,
#g420_blog_page .g420_blog-comments-list .blog-comment-line::after{
  content:"";position:absolute;left:48px;width:0;height:0;border-style:solid;
}
#g420_blog_page .g420_blog-comments-list .blog-comment-line::before{bottom:-27px;border-width:27px 26px 0 0;border-color:var(--ink) transparent transparent transparent}
#g420_blog_page .g420_blog-comments-list .blog-comment-line::after{bottom:-20px;left:51px;border-width:20px 19px 0 0;border-color:#FCF8EE transparent transparent transparent}
#g420_blog_page .g420_blog-comments-list .blog-comment-line:nth-child(even)::before{left:auto;right:48px;border-width:27px 0 0 26px}
#g420_blog_page .g420_blog-comments-list .blog-comment-line:nth-child(even)::after{left:auto;right:51px;border-width:20px 0 0 19px}
/* orden: asunto, texto y firma abajo, junto al rabito */
#g420_blog_page .g420_blog-comments-list .comment-subject{order:1}
#g420_blog_page .g420_blog-comments-list .comment-content{order:2;border-top:0!important;padding-top:0!important;margin-top:4px!important;font-size:16px!important}
#g420_blog_page .g420_blog-comments-list .comment-by{order:3;font-family:var(--hand)!important;font-size:15px!important;color:var(--ink)!important;text-transform:uppercase}
#g420_blog_page .g420_blog-comments-list .comment-by > b{color:var(--amber-ink)!important}
#g420_blog_page .g420_blog-comments-list .comment-time{order:4}
#g420_blog_page .g420_blog-comments-list .g420-block-report-reply-edit-delete{order:5}
#g420_blog_page .g420_blog-comments-list .g420-block-report-reply-edit-delete > span:hover{background:var(--amber)!important;color:var(--ink)!important}

/* ---------- RELACIONADOS ---------- */
#g420_blog_page .g420-blog-related-posts{border-top-width:3px!important}
#g420_blog_page .g420-blog-related-posts .g420-blog-related-posts-list-li::before{background:var(--paper)!important;border-width:2px!important;box-shadow:4px 4px 0 var(--ink)!important}
#g420_blog_page .g420-blog-related-posts .g420_item_img{border-bottom-width:3px!important;margin:3px 3px 0!important}
#g420_blog_page .g420-blog-related-posts .g420_title_block:hover{color:var(--amber-ink)!important}
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta a{color:var(--amber-ink)!important}
#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar i.ets_svg{color:var(--amber-ink)!important}

@media (max-width:768px){
  #g420_blog_page .g420-blog-wrapper-detail h1.page-heading,#g420_blog_page .g420-blog-wrapper-detail h1.page-heading .title_cat{font-size:38px!important}
  #g420_blog_page .g420-blog-wrapper-content > .blog_description h2{font-size:28px!important}
  #g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar{flex-wrap:wrap!important;row-gap:6px!important}
  #g420_blog_page .g420_blog-comments-list .blog-comment-line{width:calc(100% - 24px)!important;padding:18px 18px 14px!important}
  #g420_blog_page .g420_blog-comments-list .blog-comment-line:nth-child(even){margin-left:24px!important}
}
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar{width:auto!important;max-width:100%!important}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta::before{z-index:2;filter:none}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta::after{
  content:"¡ZAS!";position:absolute;top:-38px;right:20px;z-index:1;
  font-family:var(--head);font-size:30px;letter-spacing:1px;color:transparent;
  background:var(--ink);padding:22px 26px;transform:rotate(8deg) scale(1.13);
  clip-path:polygon(50% 0,61% 22%,85% 10%,78% 36%,100% 45%,79% 60%,92% 86%,64% 77%,50% 100%,37% 77%,8% 88%,21% 61%,0 46%,22% 35%,14% 9%,39% 22%);
}
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-categories > a{background:var(--paper-2)!important;border-width:2px!important}
@media (max-width:768px){
  #g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar{display:flex!important;column-gap:0!important;padding:8px 6px!important}
  #g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar > *, #g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar .blog_rating_reviews{border-left:0!important;padding:2px 10px!important}
}



/* BREADCRUMB: tira de papel con la página actual rotulada */
#g420_blog_page #wrapper .breadcrumb{
  display:inline-block!important;max-width:100%!important;
  background:var(--paper)!important;border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--ink)!important;
  padding:7px 14px!important;margin:0 0 20px 0!important;font-size:14px!important;
}
#g420_blog_page #wrapper .breadcrumb li::after{content:"›"!important;color:var(--amber-ink)!important;font-size:18px!important;line-height:1!important;margin:0 9px!important}
#g420_blog_page #wrapper .breadcrumb a{color:#311B0D!important}
#g420_blog_page #wrapper .breadcrumb li:last-child,#g420_blog_page #wrapper .breadcrumb li:last-child span{
  font-family:var(--head)!important;font-weight:400!important;font-size:17px!important;letter-spacing:.8px!important;color:var(--ink)!important;
}

/* CTA: mismo rayado que la caja de alerta, sin recuadro detrás del texto */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta{
  background-color:var(--paper-2)!important;
  background-image:repeating-linear-gradient(45deg,rgba(49,27,13,.07) 0 1px,transparent 1px 7px)!important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description .transactional-cta p{background:transparent!important;display:block!important;padding:0!important;color:var(--ink)!important;font-weight:500!important;font-size:16px!important}

/* "PUBLICADO EN" bajo el artículo */
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-categories{gap:10px!important}
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-label{
  font-family:var(--head)!important;font-weight:400!important;font-size:18px!important;letter-spacing:1px!important;color:var(--ink)!important;text-transform:uppercase;
}
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-categories > a{
  background:var(--amber)!important;color:var(--ink)!important;border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--ink)!important;
  font-family:var(--hand)!important;font-weight:400!important;font-size:14px!important;text-transform:uppercase;padding:3px 12px!important;transform:rotate(-1.5deg);
}
#g420_blog_page .g420-blog-wrapper-content > .extra_tag_cat .be-categories > a:hover{background:#FFD602!important}

/* COMENTARIOS: fecha como sello */
#g420_blog_page .g420_blog-comments-list .comment-time{
  display:inline-flex!important;align-items:center!important;gap:5px!important;
  background:var(--paper-2)!important;border:2px solid var(--ink)!important;border-radius:3px!important;
  padding:2px 9px!important;transform:rotate(-2deg);
  font-family:var(--hand)!important;font-size:13px!important;color:var(--ink)!important;
}
#g420_blog_page .g420_blog-comments-list .comment-time > span{font-family:'Atkinson Hyperlegible',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6B5D50}

/* RELACIONADOS: categoría, fecha y vistas con formato */
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta{gap:8px!important;margin-bottom:8px!important}
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta .g420-blog-categories{display:inline-flex!important;align-items:center!important;gap:6px!important}
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta .be-label{
  font-family:var(--head)!important;font-size:14px!important;letter-spacing:.8px!important;color:var(--ink)!important;text-transform:uppercase;
}
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta a{
  background:var(--amber)!important;color:var(--ink)!important;border:2px solid var(--ink)!important;
  padding:1px 8px!important;font-family:var(--hand)!important;font-weight:400!important;font-size:12.5px!important;text-transform:uppercase;
}
#g420_blog_page .g420-blog-related-posts .g420-blog-sidear-post-meta .post-date{
  background:var(--paper-2)!important;border:2px solid var(--ink)!important;padding:1px 8px!important;
  font-family:var(--hand)!important;font-size:12.5px!important;color:var(--ink)!important;
}
#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar{margin-bottom:12px!important}
#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar > span,
#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar > span > a{
  font-family:var(--hand)!important;font-size:13px!important;color:var(--ink)!important;text-transform:uppercase;
}
#g420_blog_page .g420-blog-related-posts .g420-blog-latest-toolbar i.ets_svg{color:var(--amber-ink)!important}


#g420_blog_page{--read:'Atkinson Hyperlegible', 'Atkinson Hyperlegible', sans-serif}
/* --body: texto largo de lectura (Bitter); --read sigue para interfaz (migas, relacionadas, comentarios) */
#g420_blog_page{--body:'Bitter', Georgia, serif}

/* Breadcrumb: sin caja y en Atkinson */
#g420_blog_page #wrapper .breadcrumb{display:block!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:4px 0!important;margin:0 0 16px 0!important}
#g420_blog_page #wrapper .breadcrumb,#g420_blog_page #wrapper .breadcrumb a,#g420_blog_page #wrapper .breadcrumb span,
#g420_blog_page #wrapper .breadcrumb li:last-child,#g420_blog_page #wrapper .breadcrumb li:last-child span{
  font-family:var(--read)!important;font-size:15px!important;letter-spacing:0!important}
#g420_blog_page #wrapper .breadcrumb li:last-child,#g420_blog_page #wrapper .breadcrumb li:last-child span{font-weight:700!important}

/* Texto del artículo y textos explicativos dentro de cajas */
#g420_blog_page .g420_blog-comments-list .comment-content,
#g420_blog_page .g420-blog-related-posts .blog_description,
#g420_blog_page .g420-blog-related-posts .blog_description p{font-family:var(--read)!important}
#g420_blog_page .g420-blog-wrapper-content > .blog_description p,
#g420_blog_page .g420-blog-wrapper-content > .blog_description li,
#g420_blog_page .g420-block-author .g420-author-description{font-family:var(--body)!important}

/* "En" de la fecha de los comentarios, con la misma letra que el número */
#g420_blog_page .g420_blog-comments-list .comment-time > span{font-family:var(--hand)!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}

/* Resúmenes de las publicaciones relacionadas, con más peso */
#g420_blog_page .g420-blog-related-posts .blog_description,
#g420_blog_page .g420-blog-related-posts .blog_description p {
  font-weight: 700 !important;
}


/* ==========================================================================
   ADAPTACIÓN A HUMMINGBIRD (Oaseeds). La propuesta se escribió sobre el HTML de Warehouse:
   - .blog_description y .extra_tag_cat cuelgan de .g420-blog-wrapper-content (no de .post-details): selectores
     cambiados arriba (49 + 12 reglas); la foto del autor es .avatar_img (no .avata_img: 4 reglas).
   - Miga de pan: Hummingbird añade su separador «/» (::before) además de la flecha de la propuesta (::after).
   - Foto del autor: cuadrada y recortada en círculo (salía aplastada).
   ========================================================================== */
#g420_blog_page .breadcrumb-item + .breadcrumb-item::before { content: none !important; display: none !important; }
#g420_blog_page #wrapper .breadcrumb { padding: 0.6rem 0 !important; margin: 0 !important; background: transparent !important; } /* = resto de la web (oaseeds.css) */
#g420_blog_page .g420-block-author .avatar_img { flex: none !important; width: 72px !important; height: 72px !important; }
#g420_blog_page .g420-block-author .avatar_img img { width: 72px !important; height: 72px !important; object-fit: cover !important; border-radius: 50% !important; }

/* ==========================================================================
   LECTURA CÓMODA (Oaseeds). Columna estrecha como el diseño anterior (~760 px de texto, ~70 caracteres por línea),
   letra más grande y ritmo vertical regular. Todo en em del tamaño del texto, para que escale igual en móvil.
   ========================================================================== */
/* --oa-text: ancho del TEXTO del artículo (800 px justos); la caja crece con su padding (46 px) y borde (3 px) por lado.
   --oa-col: ancho de la columna (caja del texto completa), al que se alinean índice, etiquetas, autor, etc. */
#g420_blog_page { --oa-text: 800px; --oa-col: calc(var(--oa-text) + 2 * 46px + 2 * 3px); --oa-fs: 21px; --oa-lh: 1.6; }

/* Cabecera (foto, título y barra) a todo el ancho; del texto hacia abajo, una columna estrecha centrada */
#g420_blog_page .g420-blog-wrapper-content > :not(.post-details):not(h1):not(.g420-blog-related-posts) {
  max-width: var(--oa-col) !important; margin-left: auto !important; margin-right: auto !important; float: none !important; width: 100% !important;
}
/* Orden: texto, «Publicado en», autor, PUBLICACIONES RELACIONADAS y, al final, comentarios (más visibles las relacionadas) */
#g420_blog_page .g420-blog-wrapper-content { display: flex !important; flex-direction: column !important; }
#g420_blog_page .g420-blog-wrapper-content > * { min-width: 0; }
/* Relacionadas a todo el ancho (no son texto de lectura; así se ven más) */
#g420_blog_page .g420-blog-wrapper-content > .g420-blog-related-posts { order: 1; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
#g420_blog_page .g420-blog-wrapper-content > .g420-blog-wrapper-comment { order: 2; width: 100% !important; }
#g420_blog_page #g420-blog-form-comment, #g420_blog_page .g420_blog-comments-list { scroll-margin-top: 90px; }

/* Enlaces a los comentarios al final del texto (los añade assets/js/oaseeds.js) */
#g420_blog_page .oa-post-comments {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px;
  margin: -0.5rem auto 2.5rem !important; width: 100% !important;
}
#g420_blog_page .oa-post-comments__q { font-family: var(--head); font-size: 24px; letter-spacing: 1px; color: var(--ink); text-transform: uppercase; }
#g420_blog_page .oa-post-comments a {
  display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 18px; font-family: var(--hand); font-size: 16px; text-transform: uppercase; color: var(--ink); text-decoration: none;
  transition: transform .1s, box-shadow .1s;
}
#g420_blog_page .oa-post-comments a::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
#g420_blog_page .oa-post-comments__btn { background: var(--amber); }
#g420_blog_page .oa-post-comments__count { background: var(--paper-2); }
#g420_blog_page .oa-post-comments a:hover, #g420_blog_page .oa-post-comments a:focus-visible { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

#g420_blog_page .g420-blog-wrapper-detail h1.page-heading { margin: 0.4rem 0 1rem !important; }
#g420_blog_page .g420_blog_img_wrapper { margin-bottom: 1.75rem !important; }
#g420_blog_page .post-details { width: 100%; }
#g420_blog_page .g420_blog_img_wrapper img { aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 0 !important; }
#g420_blog_page .post-details > .blog-extra { margin-bottom: 2rem !important; }

/* Caja del artículo: más aire dentro; el texto suelto (sin <p>) con el mismo tamaño que los párrafos */
#g420_blog_page .g420-blog-wrapper-content > .blog_description {
  padding: 48px 46px 26px !important; margin-top: 0 !important; margin-bottom: 2.5rem !important;
  font-family: var(--body) !important; font-size: var(--oa-fs) !important; line-height: var(--oa-lh) !important; color: #311B0D !important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description p,
#g420_blog_page .g420-blog-wrapper-content > .blog_description li {
  font-size: var(--oa-fs) !important; line-height: var(--oa-lh) !important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description p { margin: 0 0 1.25em !important; }
/* Marcadores vacíos (&nbsp;) del índice de contenidos de g420_blog: añadían una línea en blanco arriba y abajo */
#g420_blog_page .ets_begin_heading_table, #g420_blog_page .ets_end_heading_table { display: none !important; }
#g420_blog_page .g420-blog-wrapper-content > .blog_description > :nth-child(2) { margin-top: 0 !important; }
/* Párrafos vacíos del editor (<p></p>, <p>&nbsp;</p> no se puede detectar con CSS; los vacíos sí) */
#g420_blog_page .g420-blog-wrapper-content > .blog_description p:empty { display: none !important; }

/* Titulares: más espacio encima que debajo, para que se lean pegados a su texto */
#g420_blog_page .g420-blog-wrapper-content > .blog_description h2 { font-size: 34px !important; margin: 1.75em 0 0.6em !important; }
#g420_blog_page .g420-blog-wrapper-content > .blog_description h3 { font-size: 26px !important; margin: 1.6em 0 0.5em !important; }
#g420_blog_page .g420-blog-wrapper-content > .blog_description h2 + h3 { margin-top: 0.6em !important; }

/* Listas: mismo tamaño que el texto, sangría moderada y separación justa entre puntos */
#g420_blog_page .g420-blog-wrapper-content > .blog_description ul,
#g420_blog_page .g420-blog-wrapper-content > .blog_description ol { margin: 0 0 1.35em 0 !important; padding-left: 1.4em !important; }
#g420_blog_page .g420-blog-wrapper-content > .blog_description li { margin-bottom: 0.45em !important; padding-left: 0.2em; }
#g420_blog_page .g420-blog-wrapper-content > .blog_description li > p { margin-bottom: 0.4em !important; }
#g420_blog_page .g420-blog-wrapper-content > .blog_description li::marker { color: var(--amber-ink); }

/* Imágenes y tablas dentro del texto */
#g420_blog_page .g420-blog-wrapper-content > .blog_description img { margin: 0.6em 0; }
#g420_blog_page .g420-blog-wrapper-content > .blog_description table { font-size: 16px; margin: 1.5em 0; }

@media (max-width: 768px) {
  #g420_blog_page { --oa-fs: 18px; --oa-lh: 1.65; }
  /* El módulo deja 30 px a cada lado además del margen del tema: en móvil la caja se quedaba en 306 px */
  #g420_blog_page .g420-blog-wrapper-detail { padding-left: 0 !important; padding-right: 0 !important; }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description { padding: 24px 18px 6px !important; }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description p { font-size: var(--oa-fs) !important; }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description h2 { font-size: 28px !important; }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description h3 { font-size: 23px !important; }
  #g420_blog_page .g420-blog-wrapper-content > .blog_description ul,
  #g420_blog_page .g420-blog-wrapper-content > .blog_description ol { padding-left: 1.1em !important; margin-left: 0 !important; }
}

/* Título centrado, con el mismo ancho que la foto destacada; barra de datos centrada en la columna de lectura */
#g420_blog_page .g420-blog-wrapper-detail h1.page-heading {
  max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center !important;
}
#g420_blog_page .post-details > .blog-extra {
  display: flex !important; justify-content: center !important; max-width: var(--oa-col) !important; margin-left: auto !important; margin-right: auto !important;
}
#g420_blog_page .post-details > .blog-extra .g420-blog-latest-toolbar { justify-content: center !important; }

/* Relacionadas: la foto tenía width:100% además de sus márgenes de 3 px y sobresalía 6 px por la derecha, tapando el
   borde y la sombra de la tarjeta. Ancho automático: ocupa justo el interior del borde. */
#g420_blog_page .g420-blog-related-posts .g420_item_img { width: auto !important; max-width: none !important; align-self: stretch !important; }

/* ==========================================================================
   ÍNDICE DE CONTENIDOS (fork g420_blog: nav.g420-toc > details > summary + ol.g420-toc-list). El módulo trae lo básico en
   post_content.css; aquí, el toque cómic: «papel» rayado, rótulo en Bangers con flecha que gira al plegar, números en
   pegatinas ámbar con borde negro y, con 7 o más apartados, dos columnas en escritorio.
   ========================================================================== */
#g420_blog_page .g420-toc {
  position: relative; margin: 0 auto 2.25rem !important; padding: 18px 26px 20px !important;
  background-color: var(--paper-2) !important;
  background-image: repeating-linear-gradient(45deg, rgba(49,27,13,.06) 0 1px, transparent 1px 7px) !important;
  border: 2px solid var(--ink) !important; border-radius: 4px; box-shadow: 4px 4px 0 var(--ink) !important;
  font-family: var(--read);
}
#g420_blog_page .g420-toc summary {
  display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer;
  font-family: var(--head); font-weight: 400; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
}
#g420_blog_page .g420-toc summary::-webkit-details-marker { display: none; }
#g420_blog_page .g420-toc summary::before {          /* icono de lista */
  content: ""; flex: none; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h2v2H4zm4 0h12v2H8zM4 11h2v2H4zm4 0h12v2H8zm-4 5h2v2H4zm4 0h12v2H8z' fill='%23181818'/%3E%3C/svg%3E") center / 18px no-repeat;
}
#g420_blog_page .g420-toc summary::after {           /* flecha: abajo abierto, derecha plegado */
  content: ""; margin-left: auto; width: 12px; height: 12px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .2s ease; margin-right: 6px;
}
#g420_blog_page .g420-toc details:not([open]) summary::after { transform: rotate(-45deg); }
#g420_blog_page .g420-toc summary:hover { color: var(--amber-ink); }

#g420_blog_page .g420-toc .g420-toc-list {
  list-style: none !important; counter-reset: oa-toc; margin: 16px 0 0 !important; padding: 14px 0 0 !important;
  border-top: 2px dashed rgba(49,27,13,.35);
}
#g420_blog_page .g420-toc .g420-toc-list:has(> li:nth-child(7)) { columns: 2; column-gap: 32px; }
#g420_blog_page .g420-toc .g420-toc-list li {
  counter-increment: oa-toc; display: flex !important; align-items: flex-start; gap: 12px; break-inside: avoid;
  margin: 0 0 10px !important; line-height: 1.35 !important;
}
#g420_blog_page .g420-toc .g420-toc-list li::before {
  content: counter(oa-toc); flex: none; min-width: 28px; height: 28px; padding: 0 4px; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--hand); font-size: 14px; color: var(--ink); transform: rotate(-3deg);
}
#g420_blog_page .g420-toc .g420-toc-list li:nth-child(even)::before { transform: rotate(2deg); }
#g420_blog_page .g420-toc .g420-toc-list a {
  font-family: var(--read); font-size: 17px; font-weight: 700; color: var(--ink) !important;
  text-decoration: none !important; background-image: linear-gradient(var(--amber), var(--amber));
  background-size: 0 3px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .2s ease;
}
#g420_blog_page .g420-toc .g420-toc-list a:hover, #g420_blog_page .g420-toc .g420-toc-list a:focus-visible { background-size: 100% 3px; color: var(--amber-ink) !important; }
/* Al saltar desde el índice, el titular no queda tapado por la cabecera fija */
#g420_blog_page .g420-blog-wrapper-content > .blog_description :is(h2, h3)[id] { scroll-margin-top: 90px; }
@media (max-width: 768px) {
  #g420_blog_page .g420-toc { padding: 14px 16px 16px !important; box-shadow: 4px 4px 0 var(--ink) !important; }
  #g420_blog_page .g420-toc summary { font-size: 22px; }
  #g420_blog_page .g420-toc .g420-toc-list:has(> li:nth-child(7)) { columns: 1; }
  #g420_blog_page .g420-toc .g420-toc-list a { font-size: 16px; }
}

/* ---- Añadido por la marca v2 ---- */
/* Enlaces del artículo y del autor: Tinta subrayada con rotulador Sol; al pasar, Yema */
#g420_blog_page .g420-blog-wrapper-content > .blog_description a,
#g420_blog_page .g420-block-author .g420-author-description a {
  text-decoration: underline !important; text-decoration-color: #F89702 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;
}
#g420_blog_page .g420-blog-wrapper-content > .blog_description a:hover,
#g420_blog_page .g420-block-author .g420-author-description a:hover { background: #FFD602 !important; color: #311B0D !important; }
/* Columna del artículo: el módulo la pinta en blanco; va sobre el Arena de la página */
#g420_blog_page :is(.g420-blog-wrapper-detail, .g420-blog-wrapper-blog-list) { background: transparent !important; }
/* Índice de autores (/blog/autor): título de página en Bangers y cada autor en una tarjeta Papel con su retrato */
#g420_blog_page .page_author > h1.title_blog { font-family: 'Bangers', 'Impact', sans-serif !important; font-weight: 400 !important; font-size: clamp(36px, 5vw, 56px) !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; color: #311B0D !important; margin: 0 0 1.5rem !important; }
#g420_blog_page .page_author .g420-blog-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 1rem !important; }
#g420_blog_page .page_author .g420-blog-author-item { position: relative !important; background: #FCF8EE !important; border: 2px solid #311B0D !important; border-radius: 4px !important; padding: 1.25rem !important; margin: 0 !important; transition: box-shadow .1s, transform .1s !important; }
#g420_blog_page .page_author .g420-blog-author-item:hover { box-shadow: 4px 4px 0 #311B0D !important; transform: translate(-2px, -2px) !important; }
#g420_blog_page .page_author .g420-blog-comment-content { display: grid !important; grid-template-columns: 120px minmax(0, 1fr) !important; gap: 1.25rem !important; align-items: start !important; }
#g420_blog_page .page_author .author_avatar { width: 120px !important; height: 120px !important; object-fit: cover !important; border: 2px solid #311B0D !important; border-radius: 50% !important; background: #F3EBD8 !important; }
#g420_blog_page .page_author .g420_title_block { font-family: 'Bangers', 'Impact', sans-serif !important; font-weight: 400 !important; font-size: 30px !important; text-transform: uppercase !important; color: #311B0D !important; text-decoration: none !important; }
#g420_blog_page .page_author .g420_title_block::after { content: "" !important; position: absolute !important; inset: 0 !important; }
#g420_blog_page .page_author .g420_author_desc, #g420_blog_page .page_author .g420_author_desc p { font-family: 'Bitter', Georgia, serif !important; font-size: 17px !important; line-height: 1.6 !important; color: #311B0D !important; }
#g420_blog_page .page_author .view_post { display: inline-block !important; margin-top: 0.5rem !important; font-weight: 700 !important; color: #311B0D !important; text-decoration: underline !important; text-decoration-color: #F89702 !important; text-decoration-thickness: 2px !important; }
@media (max-width: 575.98px) { #g420_blog_page .page_author .g420-blog-comment-content { grid-template-columns: 72px minmax(0, 1fr) !important; } #g420_blog_page .page_author .author_avatar { width: 72px !important; height: 72px !important; } }
/* Botón de llamada a la acción: al pasar, Yema (como el resto de botones) */
#g420_blog_page .g420-blog-wrapper-content > .blog_description .cta-button:hover { background: #FFD602 !important; }