/* Blog: lo propio de esta web (herramientas/blog-datos.js) y el estilo común (.github/blog/blog.css) */
:root{--blog-acento:var(--naranja-txt);--blog-texto:var(--gris);--blog-suave:var(--gris);--blog-borde:var(--linea);--blog-fondo:#fff;--blog-radio:var(--r);--blog-titulos:var(--texto);--blog-tinta:#fff}
/* comun:blog */
/* Estilo común del blog de las webs (Portales web/.herramientas-comunes/blog/blog.css). Lo propio de cada web va en
   herramientas/blog-datos.js (variables): --blog-acento, --blog-texto, --blog-suave (fechas, ≥4,5:1 sobre el fondo),
   --blog-borde, --blog-fondo (tarjetas), --blog-radio, --blog-sombra, --blog-titulos (letra de los títulos) y
   --blog-tinta (texto sobre el acento). El texto de la entrada lleva además las clases de texto de la web. */

/* Cabecera: la de la web, más baja y sin botones (la llamada a la acción va al final) */
/* --blog-hero-abajo: 0px donde el hueco lo da otro elemento (las cabeceras Astro lo llevan en su caja interior) */
.blog-hero { min-height: 0 !important; padding-bottom: var(--blog-hero-abajo, clamp(28px, 3vw, 40px)) !important; }
.blog-hero h1 { margin-bottom: .35em; }
.blog-hero + section, .blog-hero + div { padding-top: clamp(24px, 2.6vw, 36px) !important; }

/* Lista de entradas */
.blog-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.blog-tarjeta { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--blog-fondo, #fff); border: 1px solid var(--blog-borde); border-radius: var(--blog-radio, 14px); overflow: hidden; box-shadow: var(--blog-sombra, 0 1px 2px rgba(16, 24, 40, .04)); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.blog-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .28); }
.blog-tarjeta-img { display: block; overflow: hidden; background: var(--blog-borde); }
.blog-tarjeta-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.blog-tarjeta:hover .blog-tarjeta-img img { transform: scale(1.04); }
.blog-tarjeta-texto { flex: 1; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.blog-fecha { margin: 0; font-size: .86rem; letter-spacing: .01em; color: var(--blog-suave); }
/* Los titulares de las webs (h2, h3 de sus secciones) son mucho mayores: en la tarjeta mandan estos */
.blog-lista .blog-tarjeta-titulo { margin: 0 !important; max-width: none !important; font-family: var(--blog-titulos, inherit) !important; font-size: 1.24rem !important; line-height: 1.28 !important; letter-spacing: -.005em !important; text-transform: none !important; text-align: left !important; text-wrap: balance; }
.blog-tarjeta-titulo a { color: inherit; text-decoration: none; }
/* Toda la tarjeta lleva a la entrada */
.blog-tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-tarjeta-titulo a:focus-visible { outline: none; }
.blog-tarjeta:focus-within { outline: 3px solid var(--blog-acento); outline-offset: 3px; }
.blog-tarjeta-texto > p:not(.blog-fecha) { margin: 0; color: var(--blog-texto); font-size: .97rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-leer { margin-top: auto; padding-top: 6px; color: var(--blog-acento); font-weight: 700; font-size: .95rem; }
.blog-leer::after { content: " →"; display: inline-block; transition: transform .25s; }
.blog-tarjeta:hover .blog-leer::after { transform: translateX(4px); }

/* La más reciente, a todo el ancho */
.blog-destacada { grid-column: 1 / -1; }
.blog-lista .blog-destacada .blog-tarjeta-titulo { font-size: clamp(1.45rem, 2.4vw, 2.1rem) !important; line-height: 1.16 !important; letter-spacing: -.015em !important; }
.blog-destacada .blog-tarjeta-texto > p:not(.blog-fecha) { font-size: 1.04rem; -webkit-line-clamp: 4; }
@media (min-width: 861px) {
  .blog-destacada { flex-direction: row; align-items: stretch; }
  .blog-destacada .blog-tarjeta-img { flex: 0 0 58%; }
  .blog-destacada .blog-tarjeta-img img { height: 100%; min-height: 340px; aspect-ratio: auto; }
  .blog-destacada .blog-tarjeta-texto { justify-content: center; padding: clamp(28px, 3.4vw, 52px); gap: 14px; }
  .blog-destacada .blog-leer { margin-top: 8px; }
}

/* «Más guías del blog» */
.blog-otras { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 28px; }
.blog-otras h2 { margin: 0; font-family: var(--blog-titulos, inherit); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; text-align: left; }
.blog-otras a { color: var(--blog-acento); font-weight: 700; text-decoration: none; white-space: nowrap; }
.blog-otras a::after { content: " →"; }
.blog-otras a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La entrada */
/* Alineada con el titular de la cabecera (a la izquierda); --blog-margen: 0 auto en las webs con la cabecera centrada */
.blog-articulo { max-width: var(--blog-ancho, 880px); margin: var(--blog-margen, 0); }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0 0 20px; color: var(--blog-suave); font-size: .95rem; }
.blog-meta > span + span::before { content: "·"; margin: 0 .6em; }
.blog-autor { color: var(--blog-texto); font-weight: 600; }
.blog-portada, .blog-figura { margin: 0 0 clamp(32px, 4vw, 48px); }
.blog-figura { margin: 34px 0; }
.blog-portada img, .blog-figura img { display: block; width: 100%; height: auto; border-radius: var(--blog-radio, 14px); }
.blog-portada img { aspect-ratio: 40 / 21; object-fit: cover; box-shadow: 0 24px 60px -30px rgba(16, 24, 40, .45); }
.blog-texto { max-width: none; font-size: clamp(17px, 1.1vw, 18.5px); line-height: 1.75; }
.blog-texto > :first-child { margin-top: 0; }
.blog-texto > p:first-child { font-size: 1.1em; line-height: 1.65; }
.blog-texto p { margin: 0 0 1.15em; }
/* Algunas webs limitan el ancho de sus titulares (Gesthorm, InfoSign): en el texto ocupan la columna entera */
.blog-texto h2, .blog-texto h3 { text-align: left; max-width: none; text-wrap: pretty; font-family: var(--blog-titulos, inherit); }
/* Los h2 de las secciones de las webs son titulares grandes: dentro de un artículo van más pequeños */
.blog-texto h2 { margin: 1.9em 0 .6em; font-size: var(--blog-h2, clamp(25px, 2.4vw, 32px)); line-height: 1.2; letter-spacing: -.01em; }
.blog-texto h3 { margin: 1.5em 0 .45em; font-size: var(--blog-h3, clamp(20px, 1.7vw, 22px)); line-height: 1.3; letter-spacing: normal; }
/* Con viñetas aunque la web se las quite a sus listas */
.blog-texto ul, .blog-texto ol { padding-left: 1.35em; margin: .7em 0 1.4em; }
.blog-texto ul { list-style: disc; }
.blog-texto ol { list-style: decimal; }
.blog-texto li { padding-left: .2em; }
.blog-texto li::marker { color: var(--blog-acento); font-weight: 700; }
.blog-texto li > p { margin: 0; }
.blog-texto li + li { margin-top: .5em; }
.blog-texto a { color: var(--blog-acento); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-texto a:hover { text-decoration-thickness: 2px; }
.blog-texto strong { font-weight: 700; }
.blog-texto blockquote { margin: 1.8em 0; padding: 1em 1.3em; border-left: 4px solid var(--blog-acento); background: color-mix(in srgb, var(--blog-acento) 7%, transparent); border-radius: 0 var(--blog-radio, 14px) var(--blog-radio, 14px) 0; }
.blog-texto blockquote > :last-child { margin-bottom: 0; }
.blog-texto code { font-size: .9em; padding: .1em .35em; border-radius: 5px; background: color-mix(in srgb, var(--blog-texto) 9%, transparent); }
.blog-tabla { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--blog-borde); border-radius: var(--blog-radio, 14px); }
.blog-tabla table { width: 100%; border-collapse: collapse; font-size: .93em; line-height: 1.5; }
.blog-tabla th, .blog-tabla td { padding: .8em 1em; border-bottom: 1px solid var(--blog-borde); text-align: left; vertical-align: top; }
.blog-tabla tr:last-child td { border-bottom: 0; }
.blog-tabla th { font-weight: 700; background: color-mix(in srgb, var(--blog-acento) 8%, transparent); }

/* Páginas */
.blog-paginas { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.blog-paginas a, .blog-paginas span { min-width: 46px; height: 46px; padding: 0 12px; display: grid; place-items: center; border: 1px solid var(--blog-borde); border-radius: var(--blog-radio, 14px); color: var(--blog-texto); text-decoration: none; font-weight: 700; }
.blog-paginas span { background: var(--blog-acento); border-color: var(--blog-acento); color: var(--blog-tinta, #fff); }
.blog-vacio { text-align: center; color: var(--blog-suave); }

@media (max-width: 640px) {
  .blog-tarjeta-texto { padding: 18px 20px 22px; }
  .blog-meta { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-tarjeta, .blog-tarjeta-img img, .blog-leer::after { transition: none; }
  .blog-tarjeta:hover, .blog-tarjeta:hover .blog-tarjeta-img img { transform: none; }
}
/* /comun:blog */