/*!
 * carta-blog.css · blog de saracosme.com con la identidad "Carta de autor" (26-oct-2026, R4).
 * Se enlaza desde las plantillas home (índice /blog/), archive (categorías y etiquetas),
 * search y single (entrada). El <main> lleva .carta .smc-blog, así que hereda carta.css
 * y la capa de legibilidad de carta-sitio.css. Sube su ?v= con desplegar-blog.sh.
 * Lo que Sara escribe en el editor (párrafos, títulos, listas, citas, imágenes) también
 * tiene estilos en los estilos globales (post 5), para que el editor se vea igual.
 */
.smc-blog {
  --b-ancho: 1120px;
  --b-lectura: 42rem;           /* ≈ 68 caracteres de Jost a 18-19 px */
  --b-texto: 1.125rem;          /* 18 px en celular */
  padding-inline: max(20px, env(safe-area-inset-left, 0px));
  padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px);
}
@media (min-width: 900px) { .smc-blog { --b-texto: 1.1875rem; } } /* 19 px */

.smc-blog .b-cabecera,
.smc-blog .b-lista { max-width: var(--b-ancho); margin-inline: auto; }
.smc-blog .b-cabecera { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.smc-blog .b-cabecera h1 { font-size: var(--t-h1); }
.smc-blog .b-cabecera .c-lead,
.smc-blog .b-cabecera .wp-block-term-description p { font-size: 1.2rem; font-weight: 400; color: var(--c-tinta-2); max-width: 40rem; }
.smc-blog .b-cabecera .wp-block-term-description { margin: 0; }

/* ===== Índice: tarjetas ===== */
.smc-blog .b-rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .smc-blog .b-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .smc-blog .b-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.smc-blog .b-rejilla > li { margin: 0; display: flex; }

.smc-blog .b-tarjeta { display: flex; flex-direction: column; width: 100%; background: #fff; border: var(--borde); border-radius: var(--r); overflow: hidden; transition: border-color var(--lento); }
.smc-blog .b-tarjeta:hover { border-color: var(--c-oliva); }
.smc-blog .b-tarjeta .wp-block-post-featured-image { margin: 0; }
.smc-blog .b-tarjeta .wp-block-post-featured-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.smc-blog .b-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); flex: 1; }
.smc-blog .b-tarjeta__titulo { font-size: clamp(1.55rem, 1.35rem + .6vw, 1.8rem); line-height: 1.15; margin: 0; }
.smc-blog .b-tarjeta__titulo a { color: var(--c-cafe); text-decoration: none; }
.smc-blog .b-tarjeta__titulo a:hover { color: var(--c-oliva-hondo); text-decoration: underline; text-decoration-color: var(--c-arena); text-underline-offset: .2em; }
.smc-blog .b-extracto { margin: 0; }
.smc-blog .b-extracto p { font-size: 1.0625rem; line-height: 1.6; color: var(--c-tinta-2); margin: 0; }
.smc-blog .b-extracto .wp-block-post-excerpt__more-text { display: none; }
.smc-blog .b-fecha { margin-top: auto; padding-top: 6px; font-size: 1rem; color: var(--c-tinta-2); }

/* Categorías como ceja (índice y entrada) */
.smc-blog .b-cat { font: 500 .875rem/1.3 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.smc-blog .b-cat a { color: var(--c-oliva-hondo); text-decoration: none; }
.smc-blog .b-cat a:hover { text-decoration: underline; text-underline-offset: .25em; }
.smc-blog .b-cat .wp-block-post-terms__separator { color: var(--c-oliva); }

/* Paginación */
.smc-blog .b-paginas { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: var(--borde); font-size: 1.0625rem; gap: 12px 20px; flex-wrap: wrap; }
.smc-blog .b-paginas a { color: var(--c-oliva-hondo); text-decoration: none; font-weight: 500; }
.smc-blog .b-paginas a:hover { text-decoration: underline; text-underline-offset: .25em; }
.smc-blog .b-paginas .page-numbers { padding: 6px 10px; }
.smc-blog .b-paginas .page-numbers.current { color: #fff; background: var(--c-oliva-hondo); border-radius: var(--r); }
.smc-blog .b-vacio p { font-size: var(--b-texto); color: var(--c-tinta-2); }

/* ===== Entrada ===== */
.smc-blog .b-entrada__cabecera { max-width: var(--b-lectura); margin: 0 auto clamp(24px, 4vw, 40px); display: grid; gap: 14px; }
.smc-blog .b-volver { font-size: 1rem; margin: 0; }
.smc-blog .b-volver a { color: var(--c-oliva-hondo); text-decoration: none; font-weight: 500; }
.smc-blog .b-volver a:hover { text-decoration: underline; text-underline-offset: .25em; }
.smc-blog .b-entrada__cabecera h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); line-height: 1.08; }
.smc-blog .b-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 1rem; color: var(--c-tinta-2); }
.smc-blog .b-meta > * { margin: 0; font-size: inherit; color: inherit; }
.smc-blog .b-meta .b-punto { color: var(--c-oliva); }
.smc-blog .b-portada { max-width: 1040px; margin: 0 auto clamp(32px, 5vw, 56px); }
.smc-blog .b-portada img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--r); }

/* Cuerpo de la entrada: lo que Sara escribe */
.smc-blog .b-contenido.has-global-padding, .smc-blog .b-contenido { padding-inline: 0; }
.smc-blog .b-contenido { font-size: var(--b-texto); line-height: 1.75; color: var(--c-cafe); font-weight: 400; }
.smc-blog .b-contenido > * + * { margin-top: 1.15em; }
.smc-blog .b-contenido p { max-width: var(--b-lectura); margin-bottom: 0; }
.smc-blog .b-contenido h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.15; margin-top: 2.1em; }
.smc-blog .b-contenido h3 { font-size: clamp(1.45rem, 1.3rem + .6vw, 1.7rem); line-height: 1.2; margin-top: 1.8em; }
.smc-blog .b-contenido h4 { font: 600 1.0625rem/1.4 var(--f-texto); letter-spacing: .02em; margin-top: 1.6em; }
.smc-blog .b-contenido h2 + *, .smc-blog .b-contenido h3 + *, .smc-blog .b-contenido h4 + * { margin-top: .6em; }
.smc-blog .b-contenido a { color: var(--c-oliva-hondo); text-decoration: underline; text-decoration-color: var(--c-oliva); text-underline-offset: .2em; }
.smc-blog .b-contenido a:hover { color: var(--c-cafe); }
.smc-blog .b-contenido strong { font-weight: 600; }
.smc-blog .b-contenido ul, .smc-blog .b-contenido ol { padding-left: 1.4em; }
.smc-blog .b-contenido li { margin-top: .45em; padding-left: .2em; }
.smc-blog .b-contenido ul li::marker { color: var(--c-oliva); }
.smc-blog .b-contenido ol li::marker { color: var(--c-oliva-hondo); font-weight: 500; }
.smc-blog .b-contenido blockquote,
.smc-blog .b-contenido .wp-block-quote { margin-block: 1.8em; margin-inline: auto; padding: .2em 0 .2em 1.2em; border-left: 2px solid var(--c-oliva); font: italic 400 clamp(1.4rem, 1.25rem + .6vw, 1.65rem)/1.4 var(--f-display); color: var(--c-cafe); }
.smc-blog .b-contenido blockquote p { font: inherit; max-width: none; }
.smc-blog .b-contenido blockquote cite { display: block; margin-top: .6em; font: normal 500 .95rem/1.4 var(--f-texto); letter-spacing: .06em; color: var(--c-tinta-2); }
.smc-blog .b-contenido .wp-block-pullquote { border-top: var(--borde); border-bottom: var(--borde); padding: 1.6em 0; text-align: center; }
.smc-blog .b-contenido .wp-block-pullquote blockquote { border: 0; padding: 0; }
.smc-blog .b-contenido figure { margin-block: 2em; }
.smc-blog .b-contenido img { border-radius: var(--r); }
.smc-blog .b-contenido figcaption,
.smc-blog .b-contenido .wp-element-caption { font-size: 1rem; line-height: 1.5; color: var(--c-tinta-2); text-align: center; margin-top: .7em; }
.smc-blog .b-contenido hr, .smc-blog .b-contenido .wp-block-separator { border: 0; border-top: 1px solid var(--c-arena); margin-block: 2.4em; }
.smc-blog .b-contenido table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.smc-blog .b-contenido th, .smc-blog .b-contenido td { padding: 10px 12px; border-bottom: var(--borde); text-align: left; }
.smc-blog .b-contenido .wp-block-table { overflow-x: auto; }
.smc-blog .b-contenido .wp-block-button__link { border-radius: var(--r); background: var(--c-oliva-hondo); color: #fff; text-decoration: none; font: 500 .95rem/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; padding: 16px 26px; }
.smc-blog .b-contenido .wp-block-button__link:hover { background: var(--c-cafe); color: #fff; }
.smc-blog .b-contenido .wp-block-embed iframe { max-width: 100%; }
.smc-blog .b-contenido .alignwide { max-width: 1040px; }
.smc-blog .b-contenido .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 45%; }
.smc-blog .b-contenido .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 45%; }
@media (max-width: 599.98px) {
  .smc-blog .b-contenido .alignleft, .smc-blog .b-contenido .alignright { float: none; margin-inline: auto; max-width: 100%; }
}

/* Etiquetas */
.smc-blog .b-etiquetas { max-width: var(--b-lectura); margin: clamp(28px, 4vw, 40px) auto 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 1rem; }
.smc-blog .b-etiquetas .wp-block-post-terms__prefix { color: var(--c-tinta-2); margin-right: 4px; }
.smc-blog .b-etiquetas a { display: inline-block; padding: 6px 12px; border: 1px solid var(--c-arena); border-radius: var(--r); color: var(--c-oliva-hondo); text-decoration: none; background: var(--c-crema); }
.smc-blog .b-etiquetas a:hover { border-color: var(--c-oliva); }
.smc-blog .b-etiquetas .wp-block-post-terms__separator { display: none; }

/* Cierre: agenda con Sara + riesgos */
.smc-blog .b-cierre { max-width: var(--b-lectura); margin: clamp(48px, 7vw, 80px) auto 0; padding: clamp(24px, 4vw, 40px); background: var(--c-lienzo); border: var(--borde); border-radius: var(--r); display: grid; gap: 16px; }
.smc-blog .b-cierre h2 { font-size: clamp(1.7rem, 1.45rem + 1vw, 2.2rem); }
.smc-blog .b-cierre p { font-size: 1.0625rem; color: var(--c-cafe); }
.smc-blog .b-cierre .b-aviso { font-size: 1rem; color: var(--c-tinta-2); }

/* Anterior / siguiente */
.smc-blog .b-navegacion { max-width: var(--b-lectura); margin: clamp(32px, 5vw, 48px) auto 0; padding-top: 22px; border-top: var(--borde); display: grid; gap: 14px; grid-template-columns: 1fr; font-size: 1.0625rem; }
@media (min-width: 700px) { .smc-blog .b-navegacion { grid-template-columns: 1fr 1fr; } .smc-blog .b-navegacion .post-navigation-link-next { text-align: right; } }
.smc-blog .b-navegacion a { color: var(--c-oliva-hondo); text-decoration: none; font-weight: 500; }
.smc-blog .b-navegacion a:hover { text-decoration: underline; text-underline-offset: .25em; }