/* ---------------------------------------------------------------------------
   Blog de Xestio — dirección editorial, no rejilla de tarjetas.

   La decisión de diseño, dicha para que no se deshaga sin querer: el índice NO
   es un grid uniforme de tarjetas. Es una pieza destacada grande y una lista
   separada por filetes, que es como se lee un sumario y no un catálogo. Un
   grid de tarjetas iguales le dice al lector que todo pesa lo mismo, y en un
   sumario nunca es verdad.

   Tipografía: Poppins en todo, titulares y texto, que es lo que pide el kit
   de marca v1.6 (SemiBold en titulares, Regular en texto). Del 11 al
   15/09/2026 el cuerpo fue en Source Serif 4, y no era una decisión de marca:
   el blog no se parecía a ninguna otra página del sitio. Poppins viene ya
   de base_public.html, autoalojada; aquí se declara de nuevo para que el
   blog no dependa de qué cargue el marco.

   Medida de lectura: 66ch. Por encima de 75 el ojo pierde el salto de línea.
--------------------------------------------------------------------------- */

.blog {
    --blog-acento: var(--acento-verifactu);
    --blog-acento-suave: var(--acento-verifactu-suave);
    --blog-medida: 66ch;
    --blog-sans: "Poppins", system-ui, "Segoe UI", Roboto, sans-serif;

    font-family: var(--blog-sans);
    -webkit-font-smoothing: antialiased;
}

/* Los mismos valores que index_xestio.html, para que un titular del blog y uno
   de la portada sean el mismo titular y no dos que se parecen. */
.blog h1, .blog h2, .blog h3 {
    font-family: var(--blog-sans);
    font-weight: 600;
    text-wrap: balance;
}

/* El acento de cada linea editorial. Sale de `sistema.css`, que le da su
   valor claro y su valor oscuro: antes eran dos colores sueltos y en oscuro
   el petroleo sobre fondo petroleo no se veia. */
.blog[data-tema="verifactu"] {
    --blog-acento: var(--acento-verifactu);
    --blog-acento-suave: var(--acento-verifactu-suave);
}
.blog[data-tema="aula"] {
    --blog-acento: var(--acento-aula);
    --blog-acento-suave: var(--acento-aula-suave);
}

.blog-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 24px;
}

/* ── Cabecera de sección ────────────────────────────────────────────── */

.blog-portada {
    padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2rem, 1rem + 3vw, 3.5rem);
    border-bottom: 1px solid var(--rule-soft);
}

.blog-portada h1 {
    font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.028em;
    margin: 0 0 0.4em;
    color: var(--ink);
}

.blog-portada p {
    max-width: 52ch;
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}

/* ── Los temas, como filtros con peso, no como píldoras decorativas ── */

.blog-temas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2rem;
}

.blog-tema-enlace {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.blog-tema-enlace .cuenta {
    font-size: 0.78rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.blog-tema-enlace:hover,
.blog-tema-enlace:focus-visible {
    background: var(--blog-acento-suave);
    border-color: var(--blog-acento);
    transform: translateY(-1px);
}

.blog-tema-enlace[aria-current="page"] {
    background: var(--blog-acento);
    border-color: var(--blog-acento);
    color: #fff;
}

.blog-tema-enlace[aria-current="page"] .cuenta { color: rgba(255, 255, 255, 0.7); }

/* ── El destacado ───────────────────────────────────────────────────── */

.blog-destacado {
    display: block;
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--rule-soft);
}

.blog-destacado h2 {
    font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    margin: 0.35em 0 0.45em;
    max-width: 20ch;
    color: var(--ink);
    transition: color 160ms ease;
}

.blog-destacado p {
    max-width: 58ch;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 1.25rem;
}

.blog-destacado:hover h2,
.blog-destacado:focus-visible h2 { color: var(--blog-acento); }

/* ── La lista: filetes, no tarjetas ─────────────────────────────────── */

.blog-lista { list-style: none; margin: 0; padding: 0; }

.blog-lista > li { border-bottom: 1px solid var(--rule-soft); }

.blog-entrada {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 32px;
    align-items: start;
    padding-block: 1.9rem;
    text-decoration: none;
    color: inherit;
}

.blog-entrada h3 {
    grid-column: 1;
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
    margin: 0.2em 0 0.35em;
    color: var(--ink);
    transition: color 160ms ease;
}

.blog-entrada p {
    grid-column: 1;
    margin: 0;
    max-width: 62ch;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.blog-entrada .blog-fecha {
    grid-column: 2;
    grid-row: 1 / span 3;
    font-size: 0.82rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 0.35em;
}

.blog-entrada:hover h3,
.blog-entrada:focus-visible h3 { color: var(--blog-acento); }

@media (max-width: 640px) {
    .blog-entrada { grid-template-columns: minmax(0, 1fr); }
    .blog-entrada .blog-fecha { grid-column: 1; grid-row: auto; padding-top: 0.6em; }
}

/* ── El antetítulo: el tema, con color semántico ────────────────────── */

.blog-kicker {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--blog-acento);
}

.blog-kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor;
    flex: none;
}

/* ── El artículo, dentro de un bloque ───────────────────────────────────
   En una pantalla de 3400 px el texto se quedaba flotando en medio de la
   nada: la columna de lectura mide lo que tiene que medir —66ch, eso no se
   toca— pero sin nada alrededor que la sostenga parecía un documento suelto
   en vez de una página.

   Se resuelve con una superficie: fondo tenue en la página y el artículo
   sobre papel blanco, con su aire. La columna sigue midiendo igual; lo que
   cambia es que ahora se ve DÓNDE empieza y acaba la página. */

.blog-articulo {
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    background: var(--ground);
}

.blog-articulo > .blog-wrap {
    background: var(--surface);
    border-radius: 20px;
    /* El filete superior del color del tema: lo mismo que hace el kicker con
       el texto, pero para la página entera. */
    border-top: 3px solid var(--blog-acento);
    box-shadow: 0 1px 3px rgba(14, 77, 87, 0.05), 0 12px 32px rgba(14, 77, 87, 0.06);
    padding: clamp(1.75rem, 1rem + 3vw, 4rem) clamp(1.25rem, 0.5rem + 3vw, 4rem);
}

/* Por debajo de 640 px el papel ocupa la pantalla entera: un margen a cada
   lado más el relleno de la tarjeta deja la columna de lectura en nada. */
@media (max-width: 640px) {
    .blog-articulo { background: var(--surface); padding-block: 1.5rem; }
    .blog-articulo > .blog-wrap {
        border-radius: 0;
        box-shadow: none;
        padding-inline: 20px;
    }
}

.blog-migas {
    font-size: 0.84rem;
    color: var(--ink-faint);
    margin-bottom: 2rem;
}

.blog-migas a { color: inherit; text-decoration: none; }
.blog-migas a:hover, .blog-migas a:focus-visible { color: var(--blog-acento); text-decoration: underline; }
.blog-migas span[aria-hidden] { padding-inline: 7px; }

/* La cabecera NO se mide con la columna de lectura.
   66ch es la medida a la que se lee cómodo un párrafo; un titular no se lee
   así, se abarca de un vistazo. Encajado en 66ch, el de la IA en el aula se
   partía en CUATRO líneas y se comía la pantalla. Más ancho y un punto menos
   de cuerpo, y cae en dos. */
.blog-cabecera { max-width: min(100%, 860px); }

.blog-cabecera h1 {
    /* El tope baja de 3.5rem a 2.8rem. A 56 px, un titular de ochenta
       caracteres —que es lo normal aquí, porque son titulares que dicen de
       qué van— no cabe en dos líneas ni a 860 px de ancho. */
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin: 0.3em 0 0.4em;
    color: var(--ink);
}

.blog-dek {
    max-width: var(--blog-medida);
    font-family: var(--blog-sans);
    font-size: clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 2rem;
}

/* La firma. Persona a la izquierda, fechas a la derecha: quien escribe pesa
   más que cuándo, y por eso no comparten tamaño. */
.blog-firma {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
    padding-block: 1.1rem;
    border-top: 2px solid var(--blog-acento);
    border-bottom: 1px solid var(--rule-soft);
}

.blog-firma .autora { font-weight: 600; color: var(--ink); }
.blog-firma .cargo { color: var(--ink-soft); font-size: 0.9rem; }
.blog-firma .fechas { font-size: 0.84rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.blog-firma .revisado { color: var(--blog-acento); font-weight: 500; }

/* La descarga en PDF, en la línea de la firma: es un dato del artículo, como la
   fecha, y no una llamada a la acción que compita con el titular. */
.blog-firma .blog-descarga {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid var(--blog-acento);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--blog-acento);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.blog-firma .blog-descarga::before {
    content: "↓";
    font-weight: 700;
}
.blog-firma .blog-descarga:hover,
.blog-firma .blog-descarga:focus-visible {
    background: var(--blog-acento);
    color: #fff;
}
.blog-firma .blog-descarga:focus-visible {
    outline: 3px solid var(--blog-acento-suave);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .blog-firma .blog-descarga { transition: none; }
}

/* ── Cuerpo, tabla de contenidos y columna ──────────────────────────── */

.blog-cuerpo-y-indice {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    margin-top: 2.5rem;
}

/* 1000px es el corte, y el MISMO número está escrito en blog-articulo.js, que
   pliega el índice por debajo de él. Si se cambia aquí, se cambia allí. */
@media (min-width: 1000px) {
    .blog-cuerpo-y-indice { grid-template-columns: minmax(0, 1fr) 240px; gap: 4rem; }
    /* El índice va ANTES en el marcado —para que en el móvil salga arriba y no
       después del artículo— y aquí se le manda a su columna. Las dos piezas en
       la misma fila: si no, la segunda caería debajo. */
    .blog-texto { grid-column: 1; grid-row: 1; }
    .blog-indice {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 96px;
        align-self: start;
    }
}

.blog-indice {
    font-size: 0.88rem;
    border-left: 2px solid var(--blog-acento-suave);
    padding-left: 18px;
}

/* El índice es un `<details>`: plegado en el móvil, abierto en pantalla ancha.
   Estaba debajo del texto, así que en un móvil la tabla de contenidos llegaba
   cuando ya te habías leído el artículo. */
.blog-indice summary {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Objetivo táctil: un resumen de una línea de 0,74rem son 12 px de alto y
       no se acierta con el dedo. */
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}

.blog-indice summary::-webkit-details-marker { display: none; }

/* La flecha, dibujada: gira al abrir y no depende de ninguna fuente de iconos. */
.blog-indice summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}

.blog-indice details[open] summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.blog-indice summary:focus-visible {
    outline: 2px solid var(--blog-acento);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (min-width: 1000px) {
    /* En pantalla ancha ocupa su columna y no hay nada que plegar: el
       desplegable se queda como un título normal, sin flecha ni cursor. */
    .blog-indice summary { cursor: default; min-height: 0; margin-bottom: 0.9em; }
    .blog-indice summary::after { display: none; }
}

.blog-indice ul { list-style: none; margin: 0; padding: 0; }
.blog-indice li { margin-bottom: 0.65em; line-height: 1.4; }
.blog-indice a { color: var(--ink-soft); text-decoration: none; }
.blog-indice a:hover, .blog-indice a:focus-visible { color: var(--blog-acento); text-decoration: underline; }
.blog-indice > ul > li > ul { display: none; }  /* solo el primer nivel */

.blog-texto {
    max-width: var(--blog-medida);
    font-family: var(--blog-sans);
    /* Poppins tiene el ojo grande: a 1.19rem, como iba la serif, se lee
       gritado. Un punto menos y algo más de interlineado. */
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--ink);
}

.blog-texto > h2 {
    font-family: var(--blog-sans);
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
    margin: 2.4em 0 0.7em;
    color: var(--ink);
    scroll-margin-top: 100px;
}

/* El h3 iba a 1.12rem con el cuerpo a 1.08: cuatro centésimas de diferencia,
   o sea ninguna. Un apartado que no se distingue del párrafo aplana el
   artículo entero y es la causa de que un texto corto se lea como un muro.
   1.28rem y algo más de aire por encima que por debajo, para que el titular
   quede pegado a lo que titula y no flotando entre dos bloques. */
.blog-texto > h3 {
    font-family: var(--blog-sans);
    font-size: 1.28rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 2.1em 0 0.55em;
    color: var(--ink);
    scroll-margin-top: 100px;
}

.blog-texto p { margin: 0 0 1.3em; }

/* La entradilla del cuerpo. Un punto más grande y en gris tinta: es la puerta
   del artículo y marca de entrada que esto se ha escrito, no volcado. */
.blog-texto > p:first-child {
    font-size: 1.18rem;
    line-height: 1.65;
    color: var(--ink);
    margin-bottom: 1.5em;
}

.blog-texto a {
    color: var(--blog-acento);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blog-texto a:hover, .blog-texto a:focus-visible { text-decoration-thickness: 2px; }

.blog-texto ul, .blog-texto ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.blog-texto li { margin-bottom: 0.5em; }

.blog-texto blockquote {
    margin: 2em 0;
    padding-left: 1.4em;
    border-left: 3px solid var(--blog-acento);
    font-style: italic;
    color: var(--ink-soft);
}

/* Las tablas son lo que mejor reutiliza un sistema de IA al citar, así que se
   tratan como parte del diseño y no como un resto del Markdown. */
.blog-tabla-scroll { overflow-x: auto; margin: 2em 0; }

.blog-texto table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--blog-sans);
    font-size: 0.93rem;
    font-variant-numeric: tabular-nums;
}

.blog-texto th {
    text-align: left;
    padding: 11px 14px;
    background: var(--blog-acento);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.blog-texto td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.blog-texto tbody tr:nth-child(even) { background: rgba(14, 77, 87, 0.025); }

.blog-texto pre {
    overflow-x: auto;
    background: #0F3D3E;
    color: #E6FAF7;
    padding: 18px 20px;
    border-radius: 10px;
    font-size: 0.87rem;
    line-height: 1.55;
    margin: 2em 0;
}

.blog-texto code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.88em;
}

.blog-texto :not(pre) > code {
    background: var(--blog-acento-suave);
    color: var(--blog-acento);
    padding: 2px 6px;
    border-radius: 5px;
}

/* ── El puente al pilar: lo que convierte un artículo en un clúster ── */

.blog-pilar {
    max-width: var(--blog-medida);
    margin: 3.5rem 0 0;
    padding: 1.8rem 2rem;
    background: var(--blog-acento-suave);
    border-radius: 14px;
    border-left: 4px solid var(--blog-acento);
}

.blog-pilar p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.55; }

.blog-pilar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blog-acento);
    text-decoration: none;
}

.blog-pilar a:hover, .blog-pilar a:focus-visible { text-decoration: underline; }

/* ── Aviso legal: información, no asesoramiento fiscal ──────────────── */

.blog-aviso {
    max-width: var(--blog-medida);
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule-soft);
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--ink-faint);
}

/* ── Relacionados ───────────────────────────────────────────────────── */

.blog-relacionados { margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--blog-acento); }

.blog-relacionados > h2 {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    margin: 0 0 0.5em;
}

/* ── Cuánto queda por leer ──────────────────────────────────────────────
   Fija arriba y por encima de la barra de navegación, que es `sticky` con
   z-index 20 (paginas-publicas.css). Se anima con `transform` y no con
   `width`: el ancho obliga a recalcular la maqueta en cada scroll, y la
   transformación la resuelve el compositor.

   El elemento existe siempre en el HTML pero vacío; la escala la pone
   blog-articulo.js. Sin JavaScript se queda en cero y no se ve nada, que es
   justo lo que tiene que pasar. */

.blog-progreso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 30;
    pointer-events: none;
    background: transparent;
}

.blog-progreso span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--petroleo), #14B8A6);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* En impresión no pinta nada, y en papel saldría como una raya negra arriba. */
@media print {
    .blog-progreso { display: none; }
}

/* ── Foco visible, en serio ─────────────────────────────────────────── */

.blog a:focus-visible {
    outline: 2px solid var(--blog-acento);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .blog * { transition: none !important; }
}

/* ── Compartir (templates/blog/articulo.html) ───────────────────────────
   Texto y no solo iconos: «LinkedIn» se entiende sin conocer el logotipo, y
   así no hace falta cargar una fuente de iconos de marcas. El color de cada
   red va en el borde y en el hover, no en el texto, para mantener contraste. */

.blog-compartir {
    max-width: var(--blog-medida);
    margin: 3rem 0 0;
    padding: 1.4rem 0;
    border-top: 2px solid var(--blog-acento);
    border-bottom: 1px solid var(--rule-soft);
}

.blog-compartir-titulo {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.blog-compartir-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-red {
    --red: var(--blog-acento);
    display: inline-flex;
    align-items: center;
    min-height: 44px;              /* objetivo táctil */
    padding: 0.45rem 1rem;
    border: 1.5px solid var(--red);
    border-radius: 999px;
    background: var(--surface);
    font: 600 0.9rem/1.2 var(--blog-sans);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.blog-red--linkedin { --red: #0A66C2; }
.blog-red--whatsapp { --red: #128C7E; }
.blog-red--x        { --red: #0F1419; }
.blog-red--facebook { --red: #1877F2; }

.blog-red:hover,
.blog-red:focus-visible {
    background: var(--red);
    color: #fff;
}

.blog-red:focus-visible {
    outline: 3px solid var(--blog-acento-suave);
    outline-offset: 2px;
}

.blog-compartir-aviso {
    min-height: 1.4em;
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--blog-acento);
}

@media (prefers-reduced-motion: reduce) {
    .blog-red { transition: none; }
}