/* Blog: lo propio de esta web (herramientas/blog-datos.js) y el estilo común (.github/blog/blog.css) */
:root{--blog-acento:#176dcc;--blog-texto:#5e6b80;--blog-suave:#5e6b80;--blog-borde:#dbe3ef;--blog-fondo:#ffffff;--blog-radio:10px;--blog-sombra:none;--blog-titulos:var(--font-display);--blog-tinta:#ffffff}
/* 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; }
/* El titular, la entradilla y las migas llegan hasta el borde, como el resto del blog (las webs los limitan a 700-900px) */
.blog-hero h1, .blog-hero p, .blog-hero nav, .blog-hero .hero-text, .blog-hero .hero-texto, .blog-hero .hero-content,
.blog-hero .max-w-2xl, .blog-hero .max-w-3xl, .blog-hero .max-w-4xl, .blog-hero .max-w-5xl { max-width: none !important; }
.blog-hero + section, .blog-hero + div { padding-top: clamp(24px, 2.6vw, 36px) !important; }
/* Lo último de la cabecera sin margen debajo (algunas webs se lo dan a la entradilla): el hueco es el mismo en todas */
.blog-hero :is(p, div, nav):last-child { margin-bottom: 0 !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: ".blog-leer::after { content: " →";0a0→"; 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::after { content: " →"; }0a0→"; }
.blog-otras a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La entrada */
/* Del ancho del contenido de la web, como la cabecera y el resto de sus páginas */
.blog-articulo { max-width: none; margin: 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); }
/* Del ancho del artículo aunque la clase de texto de la web lo limite (Capturia: 820px centrado) */
.blog-texto { max-width: none !important; margin-inline: 0 !important; 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; }
/* Las webs ponen sus iconos (::before) y quitan las viñetas a sus listas: en el texto del blog, viñetas y números */
.blog-texto ul { list-style: disc !important; }
.blog-texto ol { list-style: decimal !important; }
.blog-texto li { position: static !important; padding-left: .2em !important; display: list-item !important; }
.blog-texto li::before { content: none !important; display: none !important; }
.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; }
}

/* «Me gusta» al final de cada entrada (blog/lectores.js; las cifras solo se ven en el portal). --blog-megusta: el color del corazón */

/* Sin el relleno grande de las secciones de la web entre la entrada y «Más artículos del blog»: con él, bajo el
   «Me gusta» quedaba un hueco enorme */
section:has(.blog-articulo) { padding-bottom: clamp(24px, 3vw, 40px); }
section:has(.blog-otras) { padding-top: clamp(28px, 3.5vw, 44px); }
.blog-lectores { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: clamp(36px, 4vw, 52px) 0 0; padding: clamp(26px, 3vw, 36px) 20px 0;text-align: center; border-top: 1px solid var(--blog-borde); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.blog-lectores-listo { opacity: 1; transform: none; }
.blog-lectores-frase { margin: 0 !important; color: var(--blog-texto); font-family: var(--blog-titulos, inherit); font-size: 1.12rem; font-weight: 600; text-wrap: balance; }
.blog-megusta { --rosa: var(--blog-megusta, #e11d48); position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px 0 18px; border: 1.5px solid var(--blog-borde); border-radius: 999px; background: var(--blog-fondo, #fff); color: var(--blog-texto); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: border-color .25s, background-color .25s, box-shadow .25s, transform .15s; -webkit-tap-highlight-color: transparent; }
.blog-megusta:hover { border-color: color-mix(in srgb, var(--rosa) 55%, var(--blog-borde)); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--rosa) 70%, transparent); }
.blog-megusta:active { transform: scale(.96); }
.blog-megusta:focus-visible { outline: 3px solid var(--blog-acento); outline-offset: 3px; }
.blog-megusta-tuyo { border-color: color-mix(in srgb, var(--rosa) 45%, transparent); background: color-mix(in srgb, var(--rosa) 9%, var(--blog-fondo, #fff)); color: var(--rosa); }
.blog-corazon { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.blog-corazon-icono { width: 26px; height: 26px; fill: transparent; stroke: var(--rosa); stroke-width: 1.8; stroke-linejoin: round; transition: fill .2s, transform .2s; }
.blog-megusta:hover .blog-corazon-icono { transform: scale(1.08); }
.blog-megusta-tuyo .blog-corazon-icono { fill: var(--rosa); }
/* Al dar «me gusta»: latido, un aro que se abre y ocho chispas */
.blog-corazon::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--rosa); opacity: 0; transform: scale(.3); pointer-events: none; }
.blog-chispa { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--rosa); opacity: 0; pointer-events: none; }
.blog-chispa:nth-child(odd) { background: color-mix(in srgb, var(--rosa) 55%, #fbbf24); width: 5px; height: 5px; }
.blog-chispa:nth-child(2) { --giro: 0deg; } .blog-chispa:nth-child(3) { --giro: 45deg; } .blog-chispa:nth-child(4) { --giro: 90deg; } .blog-chispa:nth-child(5) { --giro: 135deg; }
.blog-chispa:nth-child(6) { --giro: 180deg; } .blog-chispa:nth-child(7) { --giro: 225deg; } .blog-chispa:nth-child(8) { --giro: 270deg; } .blog-chispa:nth-child(9) { --giro: 315deg; }
.blog-megusta-latido .blog-corazon-icono { animation: blog-latido .6s cubic-bezier(.17, .89, .32, 1.49); }
.blog-megusta-latido .blog-corazon::before { animation: blog-aro .55s ease-out; }
.blog-megusta-latido .blog-chispa { animation: blog-chispa .7s cubic-bezier(.2, .7, .3, 1) .05s; }
@keyframes blog-latido { 0% { transform: scale(1); } 25% { transform: scale(.7); } 55% { transform: scale(1.32); } 80% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes blog-aro { 0% { opacity: .9; transform: scale(.3); border-width: 6px; } 100% { opacity: 0; transform: scale(1.5); border-width: 0; } }
@keyframes blog-chispa { 0% { opacity: 1; transform: rotate(var(--giro)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--giro)) translateY(-26px) scale(.3); } }
@media (prefers-reduced-motion: reduce) {
  .blog-lectores { transition: none; transform: none; }
  .blog-megusta-latido .blog-corazon-icono, .blog-megusta-latido .blog-corazon::before, .blog-megusta-latido .blog-chispa { animation: none; }
}
/* /comun:blog */

/* Lo propio de esta web (estilo en herramientas/blog-datos.js) */
.blog-hero + section { padding-top: 0 !important; } .blog-hero > .relative.z-10 { padding-top: 113px !important; } @media (min-width: 640px) { .blog-hero > .relative.z-10 { padding-top: 161px !important; } }