/* Blog (notas, PR 67): el índice (blog/index.html) y cada nota (blog/*.html). Va después de styles.css
   (y de rrhh.css en las notas de RR.HH., que traen su cierre .v2-close). Mobile primero; cortes 600/900. */

/* Columna de lectura: ~68 caracteres por línea, alineada a la izquierda del .shell */
.nota-shell{max-width:760px;margin-inline:auto}

.nota-hero{padding:48px 0 36px}
.nota-hero .breadcrumbs{margin-bottom:28px}
.nota-hero h1{font-size:clamp(2.2rem,6.4vw,3.6rem);line-height:1.04;letter-spacing:-.035em}
.nota-hero h1 em{display:block;color:var(--muted)}
.nota-bajada{margin:22px 0 0;font-size:1.125rem;line-height:1.55;color:var(--muted);max-width:60ch}

/* Firma (stamp:post) */
.post-firma{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.5}
.post-autor{margin:0 0 6px}
.post-autor a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.post-fechas{margin:0;display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--muted);font:12px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase}

/* Cuerpo */
.nota{padding:40px 0 64px}
.nota-cuerpo{font-size:1.0625rem;line-height:1.7}
.nota-cuerpo>*{margin:0 0 1.1em}
.nota-cuerpo h2{font:400 clamp(1.7rem,4.6vw,2.3rem)/1.12 var(--serif);letter-spacing:-.02em;margin:2em 0 .6em}
.nota-cuerpo ul,.nota-cuerpo ol{padding-left:1.3em}
.nota-cuerpo li{margin-bottom:.55em}
.nota-cuerpo li::marker{color:var(--red)}
/* un ítem que es sólo un enlace (la lista de políticas de privacidad): 24px de alto para tocarlo */
.nota-cuerpo li>a:only-child{display:inline-block;padding-block:3px}
.nota-cuerpo a:not(.button){color:inherit;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.nota-cuerpo a[href^="mailto:"]{overflow-wrap:anywhere}
.nota-respuesta{font-size:1.1875rem;line-height:1.6;padding:18px 0 18px 18px;border-left:3px solid var(--red)}

/* Tabla: dos columnas que entran a 320px; si una nota trae una más ancha, se desplaza ella (no la página) */
.nota-tabla{overflow-x:auto}
.nota-tabla table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.45}
.nota-tabla th,.nota-tabla td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
.nota-tabla th{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nota-tabla td:last-child{width:42%;font-weight:600}

/* Índice (stamp:posts) */
.notas{padding:24px 0 72px}
.nota-card{padding:28px 0;border-top:1px solid var(--line)}
.nota-card .eyebrow{margin-bottom:12px}
.nota-card h2{font:400 clamp(1.6rem,4.4vw,2.2rem)/1.12 var(--serif);letter-spacing:-.02em;margin:0 0 12px}
.nota-card h2 a{color:inherit;text-decoration:none}
.nota-card h2 a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.nota-card p{margin:0 0 10px;line-height:1.6}
.nota-autor{color:var(--muted);font-size:.9375rem}

@media(min-width:900px){
  .nota-hero{padding:80px 0 48px}
  .nota{padding:56px 0 88px}
}