/* blog.css — estilos del blog: el listado (blog.html) y las notas
   (blog/<slug>.html). Las dos páginas son HTML plano y responsive de verdad,
   como las de proyectos/: el canvas de 1920 escalado del PageShell sirve para
   una vidriera, no para leer texto largo.

   Prefijos: bl- es lo que comparten listado y nota (caja, navbar, CTA, pie);
   nt- es lo propio de una nota. */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-display); }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--teal); text-decoration: none; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* Caja de página: mismo ancho y respiración lateral que proyectos/. */
.bl-box { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 clamp(20px,5vw,80px); }

/* ── Navbar ───────────────────────────────────────────────────── */
.bl-nav-link {
  color: var(--teal); font-weight: 700; font-size: clamp(16px,1.2vw,20px);
  line-height: 1.2; text-decoration: none;
  border-bottom: 3px solid transparent; padding-bottom: 5px;
  transition: color .15s ease;
}
.bl-nav-link:hover { color: var(--white); }
.bl-nav-link[aria-current="page"] { color: var(--white); border-bottom-color: var(--teal); }

.bl-menu-btn {
  background: none; border: 2px solid var(--teal); border-radius: 999px; color: var(--teal);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 8px 20px; cursor: pointer;
}

.bl-svc { display: block; text-decoration: none; padding: 16px 20px; border-radius: 8px; }
.bl-svc:hover { background: var(--lavender); }
.bl-svc .fila { display: flex; align-items: center; gap: 12px; }
.bl-svc .cuadro { width: 10px; height: 10px; flex: 0 0 auto; background: var(--teal); }
.bl-svc .tit { font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--purple); }
.bl-svc .desc { display: block; margin: 8px 0 0 22px; font-size: 15px; line-height: 1.45; color: var(--gray-700); }

/* ── CTA ──────────────────────────────────────────────────────── */
.bl-cta-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--teal); color: var(--indigo-deep); border-radius: 999px;
  padding: 16px 40px; font-weight: 700; font-size: clamp(17px,1.3vw,22px);
  text-decoration: none; box-shadow: var(--shadow-cta);
  transition: background .15s ease;
}
.bl-cta-pill:hover { background: var(--teal-deep); color: var(--indigo-deep); }
.bl-cta-pill.sm { gap: 10px; padding: 12px 26px; font-size: clamp(15px,1.1vw,19px); }

.bl-wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--teal); color: var(--teal); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bl-wa:hover { background: var(--teal); color: var(--indigo-deep); }

.bl-h2-cta {
  margin: clamp(24px,3vw,40px) 0 clamp(20px,2.4vw,32px);
  font-weight: 900; font-style: italic; font-size: clamp(28px,4vw,56px);
  line-height: 1.05; color: var(--white); text-wrap: balance; max-width: 24ch;
}
.bl-p-cta {
  margin: 0 0 clamp(32px,4vw,48px);
  font-size: clamp(17px,1.5vw,24px); line-height: 1.55; font-weight: 300;
  color: var(--white); max-width: 600px; text-wrap: pretty;
}

/* Secundario: teal en negrita con subrayado teal de 3px y 8px de aire.
   inline-block para que la línea mida lo que mide el texto. */
.bl-volver {
  display: inline-block; font-size: 16px; font-weight: 700; color: var(--teal);
  text-decoration: none; border-bottom: 3px solid var(--teal); padding-bottom: 8px;
  transition: color .15s ease;
}
.bl-volver:hover { color: var(--white); }

/* ── Pie ──────────────────────────────────────────────────────── */
.bl-pie-nav {
  position: relative; padding-bottom: 8px;
  display: flex; flex-wrap: wrap; gap: 12px clamp(20px,2.4vw,36px); align-items: center;
}
.bl-pie-nav a { color: var(--teal); font-size: 16px; }
.bl-pie-nav a:hover { color: var(--white); }
.bl-pie-barra {
  position: relative; padding-top: clamp(30px,3.4vw,46px); padding-bottom: clamp(30px,3.4vw,46px);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}

/* ══ LISTADO ═══════════════════════════════════════════════════ */

/* Una nota por fila: portada a la izquierda, texto a la derecha. En una sola
   columna abajo de 860px. Sin filtros y sin paginado: con este volumen de
   notas los dos son cromo que estorba. */
.bl-lista { display: flex; flex-direction: column; gap: clamp(48px,6vw,88px); }

.bl-nota {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,4vw,64px); align-items: center;
  text-decoration: none; color: inherit;
}
.bl-nota .portada {
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-image);
  transition: transform .18s ease;
}
.bl-nota:hover .portada { transform: translateY(-4px); }
.bl-nota .titulo {
  margin: 0 0 clamp(14px,1.6vw,20px);
  font-weight: 900; font-style: italic; font-size: clamp(26px,2.8vw,40px);
  line-height: 1.08; color: var(--purple); text-wrap: balance;
  transition: color .15s ease;
}
.bl-nota:hover .titulo { color: var(--teal-deep); }
.bl-nota .extracto {
  margin: 0 0 clamp(20px,2.4vw,30px);
  font-size: clamp(17px,1.3vw,20px); line-height: 1.6; color: var(--ink);
  max-width: 600px; text-wrap: pretty;
}
.bl-nota .leer {
  display: inline-block; font-size: clamp(16px,1.2vw,19px); font-weight: 700;
  color: var(--teal-deep); border-bottom: 3px solid var(--teal); padding-bottom: 8px;
}
.bl-nota:hover .leer { color: var(--purple); }

@media (max-width: 860px) {
  .bl-nota { grid-template-columns: 1fr; }
}

/* Rótulo de categoría. Hoy no se usa: el blog va sin categorías hasta que haya
   notas para agrupar — ver la regla en CLAUDE.md. Queda definido porque el día
   que se sumen, el chip es este y no otro. */
.bl-tag, .nt-meta .cat {
  display: inline-block; background: var(--lavender); color: var(--purple);
  border-radius: 999px; padding: 7px 20px;
  font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.bl-fecha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 clamp(16px,1.8vw,22px);
  font-size: 15px; line-height: 1.4; color: var(--gray-700);
}

/* ══ NOTA ══════════════════════════════════════════════════════ */

.nt-h1 {
  margin: clamp(16px,2vw,28px) 0 clamp(20px,2.4vw,32px);
  font-weight: 900; font-style: italic; font-size: clamp(34px,4.4vw,58px);
  line-height: 1.05; letter-spacing: -0.5px; color: var(--white);
  text-wrap: balance; max-width: 20ch;
}
.nt-bajada {
  margin: 0; font-size: clamp(18px,1.5vw,24px); line-height: 1.5; font-weight: 300;
  color: var(--white); max-width: 600px; text-wrap: pretty;
}
.nt-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: clamp(28px,3.4vw,44px) 0 0;
  font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.72);
}

/* ══ NOTA — el eje de lectura ═══════════════════════════════════
   La nota sigue el formato de Medium, que es el que la gente ya sabe leer y
   el mismo que usan los artículos de LinkedIn, donde estas notas también se
   publican. Lo que se copió de ahí, medido sobre el sitio:

     · Una sola columna para TODO el texto. En Medium el título, la bajada, la
       firma y el cuerpo arrancan en la misma línea vertical (680px de ancho a
       1440 de pantalla). Un solo eje, de arriba abajo, sin escalones.
     · Cuerpo de 20px con 32px de interlineado — 1,6 — y una medida de 68
       caracteres por renglón.
     · La imagen de portada, y solo ella, más ancha que la columna: en Medium
       la columna mide 680 y la portada 1192. Se lee como portada, no como una
       imagen del texto.

   Acá la columna es un poco más ancha (760) porque Lato es más angosta que la
   serif de Medium: a igual ancho entran más caracteres, así que la medida
   queda en los mismos ~70 de allá.

   Lo que NO se copió, a propósito:
     · El encabezado va sobre índigo. Es el color de la marca y el mismo con el
       que abren todas las páginas del sitio.
     · Las imágenes del cuerpo van al ancho del texto, no más anchas. */
.nt-nota { --eje: 760px; --portada: 1100px; }

/* La columna. Todo lo que sea texto vive acá adentro, tanto en el encabezado
   índigo como en el cuerpo blanco, así que todo cae en la misma vertical. */
.nt-eje {
  width: 100%; max-width: var(--eje); margin: 0 auto;
  padding: 0 clamp(20px,5vw,40px);
}

/* ── Encabezado ─────────────────────────────────────────────────
   Calificado con .nt-nota: el listado usa las mismas clases y su encabezado
   no cambia. */
/* Solo vertical: el shorthand `padding` pisaría el lateral de .nt-eje y el
   título dejaría de arrancar en la misma línea que el cuerpo. */
.nt-cabezal { padding-top: clamp(40px,6vw,80px); padding-bottom: clamp(48px,6vw,88px); }
.nt-nota .nt-h1 {
  margin: clamp(18px,2vw,26px) 0;
  font-size: clamp(34px,4vw,54px); line-height: 1.06;
  max-width: none;
}
.nt-nota .nt-bajada {
  font-size: clamp(18px,1.5vw,23px);
  color: rgba(255,255,255,.86); max-width: none;
}
/* Firma: la línea de autoría de Medium — quién, cuándo, cuánto se tarda. */
.nt-nota .nt-meta {
  margin: clamp(26px,3vw,38px) 0 0; padding-top: clamp(22px,2.4vw,30px);
  border-top: 1px solid rgba(255,255,255,.16);
}

/* ── Portada ──────────────────────────────────────────────────── */
/* Más ancha que la columna, como en Medium. Va sobre el blanco del cuerpo,
   sin montarse sobre el índigo: el escalón queda limpio.
   La forma la decide cada nota con una clase, según la imagen que tenga:
     (sin clase)  3:2 apaisada    .cuadrada  1:1    .retrato  4:5 */
.nt-portada {
  width: 100%; max-width: var(--portada); margin: 0 auto;
  padding: clamp(36px,5vw,64px) clamp(20px,5vw,40px) 0;
}
.nt-portada img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-image); }
.nt-portada.retrato  { max-width: calc(var(--eje) + 120px); }
.nt-portada.cuadrada { max-width: calc(var(--eje) + 180px); }

/* ── Cuerpo ───────────────────────────────────────────────────── */
.nt-articulo { background: var(--white); padding: 0 0 clamp(40px,5vw,72px); }
.nt-caja { width: 100%; max-width: var(--eje); margin: 0 auto; padding: 0 clamp(20px,5vw,40px); }
.nt-caja + .nt-caja { margin-top: clamp(22px,2.4vw,32px); }
.nt-cuerpo-inicio { padding-top: clamp(44px,6vw,80px); }
.nt-p {
  margin: 0; font-size: clamp(18px,1.42vw,21px); line-height: 1.75;
  color: var(--ink); text-wrap: pretty;
}
.nt-p + .nt-p { margin-top: clamp(22px,2.4vw,32px); }
.nt-p strong { font-weight: 700; color: var(--purple); }
.nt-p em { font-style: italic; }

/* Figuras del cuerpo: al ancho del texto, nunca más anchas. */
.nt-figura {
  margin: clamp(40px,5vw,72px) auto; width: 100%;
  max-width: var(--eje); padding: 0 clamp(20px,5vw,40px);
}
.nt-figura img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-image); }
.nt-figura figcaption {
  margin-top: 14px; display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--gray-700);
}
.nt-figura figcaption::before {
  content: ""; width: 10px; height: 10px; flex: 0 0 auto;
  background: var(--teal); position: relative; top: 1px;
}

/* Hueco de imagen todavía sin cargar. Se ve, a propósito: el proyecto pide que
   lo que falta vaya visible como [[COMPLETAR: …]] y no resuelto por las malas.
   Toma la misma forma que tomaría la imagen que va en su lugar. */
.nt-pendiente {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; padding: clamp(24px,4vw,48px);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg, var(--purple), var(--indigo-s30));
  box-shadow: var(--shadow-image);
}
/* Dentro de la nota la proporción por defecto es 3:2, y cada figura puede
   pedir otra. En el listado el hueco sigue siendo 16:9, que es la portada. */
.nt-nota .nt-pendiente { aspect-ratio: 3 / 2; }
.nt-nota .retrato  .nt-pendiente { aspect-ratio: 4 / 5; }
.nt-nota .cuadrada .nt-pendiente { aspect-ratio: 1 / 1; }
.nt-pendiente span {
  font-size: clamp(15px,1.3vw,19px); line-height: 1.5; font-weight: 700;
  color: var(--white); text-align: center; text-wrap: pretty; max-width: 40ch;
}
@media (max-width: 700px) {
  .nt-nota .nt-pendiente { aspect-ratio: 4 / 3; }
  .nt-nota .retrato .nt-pendiente { aspect-ratio: 4 / 5; }
}

/* Destacado: la frase que gira el argumento. En el mismo eje que el cuerpo,
   con la punteada arriba para que se lea como pausa y no como otro párrafo. */
.nt-destacado {
  width: 100%; max-width: var(--eje); margin: clamp(44px,5.5vw,80px) auto;
  padding: 0 clamp(20px,5vw,40px);
  display: flex; flex-direction: column; gap: clamp(16px,1.8vw,24px);
}
.nt-destacado p {
  margin: 0; font-weight: 900; font-style: italic;
  font-size: clamp(25px,2.9vw,40px); line-height: 1.14;
  color: var(--purple); text-wrap: balance;
}

/* Firma */
.nt-firma {
  display: flex; align-items: flex-start; gap: 18px;
  margin-top: clamp(44px,5vw,72px); padding-top: clamp(28px,3vw,40px);
  border-top: 2px solid var(--lavender);
}
.nt-firma .cuadro { width: 14px; height: 14px; flex: 0 0 auto; background: var(--teal); margin-top: 7px; }
.nt-firma .nombre { margin: 0 0 6px; font-size: clamp(18px,1.4vw,21px); font-weight: 700; color: var(--purple); }
.nt-firma .rol { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gray-700); text-wrap: pretty; }

/* Volver al blog, al pie de la nota */
.nt-volver-grande { display: inline-flex; flex-direction: column; gap: 6px; text-decoration: none; }
.nt-volver-grande .chico {
  font-size: 13px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gray-700);
}
.nt-volver-grande .grande { font-size: clamp(17px,1.4vw,22px); font-weight: 700; color: var(--teal); }
.nt-volver-grande:hover .grande { color: var(--purple); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}