/* ============================================================================
   Blog · estética de las publicaciones de Instagram (Rafael, 20-10-2026:
   "le falta impronta y diseño, pásale la vida y la vibra de las publicaciones,
   y dale un link a nuestra comunidad").
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de tbc-v2.css y solo en /academia/blog/ (body.tb-blog).
   Dos tintas y un acento, como los carruseles: papel #EFE8DA, tinta #141414,
   fucsia #ED1B69. Inter Tight (texto y palabra gigante) + Instrument Serif
   (titulares, con una palabra en cursiva). Sin degradados, sin ejes, sin sellos.
   Referentes (marca/referentes.md, estudio 19-10):
   - @_bradmead: palabra gigante que toca los bordes, dos tintas;
   - @jdomito_: foto a sangre + titular serif, última palabra en cursiva;
   - @ankitgraphic: cabezal fijo con rótulo y contador, fichas entre filetes;
   - @itsdesignare: cierre en caja de tinta con la palabra en el acento.
   ============================================================================ */

.tb-blog {
  --tb-papel: #EFE8DA;
  --tb-papel-2: #E6DDCB;
  --tb-tinta: #141414;
  --tb-fucsia: #ED1B69;
  --tb-gris: #6f6a62;
  --tb-sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --tb-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --tb-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tb-filete: 1.5px solid var(--tb-tinta);
  --tb-gutter: 32px;
}
html:has(body.tb-blog), body.tb-blog { background: var(--tb-papel); }
body.tb-blog {
  color: var(--tb-tinta); font-family: var(--tb-sans); font-size: 17px; line-height: 1.55;
  overflow-x: clip;
}
.tb-blog a { color: inherit; }
.tb-blog a:hover { color: var(--tb-fucsia); }
.tb-blog ::selection { background: rgba(237, 27, 105, 0.22); }

/* ---------- Barra superior y pie del sitio, en papel ------------------------ */
.tb-blog .v2-nav { background: rgba(239, 232, 218, 0.9); border-bottom: var(--tb-filete); }
.tb-blog .v2-nav__brand, .tb-blog .v2-links a { color: var(--tb-tinta); }
.tb-blog .v2-links a[aria-current="page"] { border-bottom-color: var(--tb-fucsia); }
.tb-blog .v2-links .v2-nav__campus { color: #fff; }
.tb-blog .v2-footer { border-top: var(--tb-filete); color: var(--tb-gris); font-size: 13px; }
.tb-blog .v2-footer a { color: var(--tb-gris); }

/* ---------- Piezas comunes -------------------------------------------------- */
.tb-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--tb-gutter); }
.tb-cap { font: 600 12px/1.35 var(--tb-sans); letter-spacing: 0.22em; text-transform: uppercase; }
.tb-dot { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--tb-fucsia); vertical-align: 1px; }
.tb-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 26px; }
.tb-serif { font-family: var(--tb-serif); font-weight: 400; letter-spacing: -0.01em; line-height: 0.98; }
.tb-serif i, .tb-it { font-style: italic; }
.tb-acento { color: var(--tb-fucsia); }
.tb-num { font-family: var(--tb-serif); font-style: italic; font-weight: 400; color: var(--tb-fucsia); line-height: 0.8; letter-spacing: 0; }
.tb-gris { color: var(--tb-gris); }
.tb-go { display: inline-flex; align-items: center; gap: 8px; color: var(--tb-fucsia); }
.tb-go span[aria-hidden] { transition: transform 0.3s var(--v2-ease); }
a:hover .tb-go span[aria-hidden], .tb-go:hover span[aria-hidden] { transform: translateX(4px); }

/* Palabra gigante a todo el ancho: toca los dos bordes (el ajuste fino lo hace
   el script del pie; esto es el tamaño de partida si no hay JS). */
.tb-gig {
  display: block; width: max-content; margin: 0 0 0 -0.035em; font-family: var(--tb-sans); font-weight: 900;
  font-size: 26.5vw; line-height: 0.78; letter-spacing: -0.035em; white-space: nowrap; color: var(--tb-tinta);
}

/* Botones */
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: 999px; background: var(--tb-fucsia); color: #fff; font: 600 15px/1.2 var(--tb-sans);
  transition: transform 0.3s var(--v2-ease), background 0.2s;
}
.tb-blog .tb-btn:hover { color: #fff; transform: translateY(-2px); }
.tb-btn--linea { background: transparent; color: var(--tb-tinta); box-shadow: inset 0 0 0 1.5px var(--tb-tinta); }
.tb-blog .tb-btn--linea:hover { color: var(--tb-tinta); }
.tb-btn--papel { background: transparent; color: var(--tb-papel); box-shadow: inset 0 0 0 1.5px var(--tb-papel); }
.tb-blog .tb-btn--papel:hover { color: var(--tb-papel); }
.tb-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--tb-tinta); font: 600 13px/1.2 var(--tb-sans);
}
.tb-blog .tb-pill:hover { color: #fff; background: var(--tb-fucsia); box-shadow: none; }

/* ---------- Listado: portada --------------------------------------------- */
.tb-portada { padding-bottom: 8px; }
.tb-portada__gig { overflow: hidden; padding-top: 18px; }
.tb-portada__bajo {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: end;
  margin-top: 30px; padding-top: 26px; border-top: var(--tb-filete);
}
.tb-portada__h1 { font-size: clamp(44px, 5.6vw, 84px); }
.tb-portada__lado { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 6px; }
.tb-portada__lado p { font-size: 18px; line-height: 1.5; max-width: 44ch; }

/* ---------- Listado: artículo destacado ----------------------------------- */
/* La portada de cada artículo ya trae su titular dibujado: va entera, a todo el
   ancho de la página, sin recorte ni texto encima; la ficha va debajo. */
.tb-main { display: block; }
.tb-dest { display: block; margin-top: 56px; color: var(--tb-tinta); }
.tb-blog .tb-dest:hover { color: var(--tb-tinta); }
.tb-dest__cab { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: var(--tb-filete); }
.tb-dest__foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tb-papel-2); }
.tb-dest__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--v2-ease); }
.tb-dest:hover .tb-dest__foto img { transform: scale(1.02); }
.tb-dest__panel {
  display: grid; grid-template-columns: 92px minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start;
  padding: 28px 0 32px; border-bottom: var(--tb-filete);
}
.tb-dest__panel .tb-num { font-size: 72px; padding-top: 2px; }
.tb-dest__t { display: block; font-size: clamp(36px, 4vw, 60px); }
.tb-dest__der { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.tb-dest__ex { display: block; font-size: 17px; line-height: 1.5; }

/* ---------- Listado numerado (fichas entre filetes) ---------------------- */
.tb-lista { margin-top: 64px; }
.tb-lista__head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: var(--tb-filete); }
.tb-item {
  display: grid; grid-template-columns: 92px minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start;
  padding: 30px 0; border-bottom: var(--tb-filete); color: var(--tb-tinta);
}
.tb-blog .tb-item:hover { color: var(--tb-tinta); }
.tb-lista > .tb-item:first-child, .tb-lista__head + .tb-item { border-top: var(--tb-filete); }
.tb-otros .tb-lista { margin-top: 28px; }
.tb-item .tb-num { font-size: 64px; padding-top: 4px; }
.tb-item__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tb-papel-2); }
.tb-item__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--v2-ease); }
.tb-item:hover .tb-item__img img { transform: scale(1.04); }
.tb-item__sin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tb-gris); }
.tb-item__txt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tb-item__t { font-size: clamp(28px, 2.6vw, 40px); }
.tb-item:hover .tb-item__t { color: var(--tb-tinta); }
.tb-item__ex { font-size: 16px; line-height: 1.55; color: #3b3832; max-width: 58ch; }

/* ---------- Comunidad (caja de tinta) ------------------------------------- */
.tb-comu { margin-top: 88px; background: var(--tb-tinta); color: var(--tb-papel); }
.tb-comu__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-top: 56px; padding-bottom: 56px; }
.tb-comu .tb-cap { color: var(--tb-papel); }
.tb-comu__t { margin-top: 18px; font-size: clamp(48px, 6vw, 96px); color: var(--tb-papel); }
.tb-comu__lado { display: flex; flex-direction: column; gap: 20px; }
.tb-comu__lado p { font-size: 18px; line-height: 1.5; color: var(--tb-papel); max-width: 42ch; }
.tb-comu__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.tb-comu__nota { color: rgba(239, 232, 218, 0.62); }

/* ---------- Artículo ------------------------------------------------------- */
.tb-art__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; padding-top: 22px; }
.tb-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.tb-art__head { padding-top: 34px; }
.tb-art__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-bottom: 16px; border-bottom: var(--tb-filete); }
.tb-art__meta .tb-num { font-size: 40px; }
.tb-art__h1 { margin-top: 26px; font-size: clamp(44px, 6.2vw, 96px); max-width: 17ch; }
.tb-art__ex { margin-top: 24px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 52ch; }
.tb-art__foto { margin-top: 44px; }
.tb-art__foto img { width: 100%; height: auto; background: var(--tb-papel-2); }

.tb-art__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; margin-top: 56px; }
.tb-lado { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 28px; }
.tb-lado__comu { padding: 24px 24px 26px; background: var(--tb-tinta); color: var(--tb-papel); }
.tb-lado__comu .tb-cap { color: var(--tb-papel); }
.tb-lado__t { display: block; margin-top: 12px; font-size: 40px; color: var(--tb-papel); }
.tb-lado__comu p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--tb-papel); }
.tb-lado__comu .tb-btn { margin-top: 18px; width: 100%; }
.tb-share { display: flex; flex-direction: column; border-top: var(--tb-filete); }
.tb-share .tb-cap { padding: 12px 0 4px; color: var(--tb-gris); }
.tb-share a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(20, 20, 20, 0.25); font-weight: 500; }

/* Cuerpo del artículo: HTML del editor del campus (ya saneado allá). Se
   conservan las clases .v2-prose para que sigan corrigiendo los colores
   heredados del sitio oscuro; aquí se redefine la tipografía. */
.tb-blog .tb-prose { max-width: 68ch; gap: 22px; color: var(--tb-tinta); font-size: 18px; counter-reset: tbh2; }
.tb-blog .tb-prose p, .tb-blog .tb-prose li { line-height: 1.72; }
.tb-blog .tb-prose ul, .tb-blog .tb-prose ol { padding-left: 1.25em; }
.tb-blog .tb-prose li::marker { color: var(--tb-fucsia); font-weight: 600; }
.tb-blog .tb-prose li + li { margin-top: 8px; }
.tb-blog .tb-prose strong, .tb-blog .tb-prose b { font-weight: 700; }
.tb-blog .tb-prose h2 {
  margin-top: 30px; padding-top: 18px; border-top: var(--tb-filete);
  font-family: var(--tb-serif); font-weight: 400; font-size: clamp(32px, 3vw, 44px); line-height: 1.04; letter-spacing: -0.01em; color: var(--tb-tinta);
}
.tb-blog .tb-prose h2::before {
  counter-increment: tbh2; content: counter(tbh2, decimal-leading-zero);
  display: block; margin-bottom: 10px; font-family: var(--tb-serif); font-style: italic; font-size: 0.9em; line-height: 0.8; color: var(--tb-fucsia);
}
.tb-blog .tb-prose h3, .tb-blog .tb-prose h4 { margin-top: 10px; font-family: var(--tb-sans); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; color: var(--tb-tinta); }
.tb-blog .tb-prose a { color: var(--tb-tinta); text-decoration: underline; text-decoration-color: var(--tb-fucsia); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tb-blog .tb-prose a:hover { color: var(--tb-fucsia); }
.tb-blog .tb-prose img { width: 100%; height: auto; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; max-width: 100% !important; }
.tb-blog .tb-prose figure figcaption { text-align: left; color: var(--tb-gris); font-size: 14px; }
.tb-blog .tb-prose blockquote {
  margin: 10px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--tb-fucsia);
  font-family: var(--tb-serif); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; color: var(--tb-tinta);
}
.tb-blog .tb-prose blockquote p { line-height: 1.2; }
.tb-blog .tb-prose hr { border: 0; border-top: var(--tb-filete); margin: 12px 0; }
.tb-blog .tb-prose pre {
  padding: 18px 20px; border-radius: 0; background: var(--tb-tinta); color: var(--tb-papel);
  font-family: var(--tb-code); font-size: 14px; line-height: 1.6; white-space: pre-wrap;
}
.tb-blog .tb-prose code { font-family: var(--tb-code); font-size: 0.86em; padding: 2px 6px; border-radius: 0; background: var(--tb-papel-2); color: var(--tb-tinta); }
.tb-blog .tb-prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.tb-blog .tb-prose table { font-size: 15px; }
.tb-blog .tb-prose th, .tb-blog .tb-prose td { border: 0; border-bottom: 1px solid rgba(20, 20, 20, 0.3); padding: 10px 14px 10px 0; }
.tb-blog .tb-prose th { border-bottom: var(--tb-filete); font-weight: 700; color: var(--tb-tinta); }
/* Fondos oscuros heredados: sobre papel van en papel más hondo, no en gris frío */
.tb-blog .tb-prose [style*="background"] { background: var(--tb-papel-2) !important; color: var(--tb-tinta) !important; }

.tb-art__fin { margin-top: 64px; }
.tb-otros { margin-top: 96px; padding-bottom: 96px; }
.tb-otros__t { font-size: clamp(40px, 4.4vw, 64px); margin-top: 6px; }
.tb-todos { margin-top: 24px; }

/* ---------- 404 ------------------------------------------------------------ */
.tb-404 { padding-top: 40px; padding-bottom: 40px; }
.tb-404 .tb-serif { margin-top: 28px; font-size: clamp(44px, 6vw, 88px); max-width: 16ch; }
.tb-404 p { margin-top: 20px; font-size: 18px; max-width: 52ch; }
.tb-404 .tb-btn { margin-top: 28px; }

/* ---------- Tablet --------------------------------------------------------- */
@media (max-width: 1000px) {
  .tb-art__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  /* La caja de la comunidad grande viene justo después del artículo: la lateral sobra */
  .tb-lado { position: static; display: block; }
  .tb-lado__comu { display: none; }
  .tb-item { grid-template-columns: 64px minmax(0, 240px) minmax(0, 1fr); gap: 22px; }
  .tb-item .tb-num { font-size: 52px; }
  .tb-dest__panel { grid-template-columns: 64px minmax(0, 1fr); gap: 22px; }
  .tb-dest__der { grid-column: 2; }
}
@media (max-width: 860px) {
  .tb-blog .v2-links[popover]:is(:popover-open, .is-open) { background: rgba(239, 232, 218, 0.98); border-bottom: var(--tb-filete); }
  .tb-blog .v2-links a { border-bottom-color: rgba(20, 20, 20, 0.2); }
  .tb-portada__bajo, .tb-comu__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- Móvil (≤560px) ------------------------------------------------- */
@media (max-width: 560px) {
  .tb-blog { --tb-gutter: 16px; font-size: 16px; }
  /* tbc-v2.css recorta los párrafos en móvil (regla "Lean"); en el blog el texto va completo */
  .tb-blog.v2-site main p, .tb-blog.v2-site main p + p { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .tb-cab { padding-top: 18px; }
  .tb-cab .tb-cap:last-child { display: none; }
  .tb-portada__h1 { font-size: 40px; }
  .tb-portada__lado p { font-size: 16px; }
  .tb-dest { margin-top: 32px; }
  .tb-dest__panel { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 0 24px; }
  .tb-dest__panel .tb-num { font-size: 44px; }
  .tb-dest__der { grid-column: 2; padding-top: 0; }
  .tb-dest__t { font-size: 32px; }
  .tb-dest__ex { font-size: 16px; }
  .tb-lista { margin-top: 48px; }
  .tb-item { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 14px; padding: 22px 0; }
  .tb-item .tb-num { font-size: 40px; grid-row: 1; }
  .tb-item__img { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 10; }
  .tb-item__txt { grid-column: 2; }
  .tb-item__t { font-size: 28px; }
  .tb-item__ex { font-size: 15px; }
  .tb-comu { margin-top: 64px; }
  .tb-comu__in { padding-top: 40px; padding-bottom: 40px; }
  .tb-comu__t { font-size: 52px; }
  .tb-comu__lado p { font-size: 16px; }
  .tb-comu__btns .tb-btn { width: 100%; }
  .tb-art__head { padding-top: 22px; }
  .tb-art__h1 { font-size: 40px; }
  .tb-art__ex { font-size: 18px; }
  .tb-art__foto { margin-top: 28px; }
  .tb-art__cuerpo { margin-top: 36px; }
  .tb-blog .tb-prose { font-size: 17px; }
  .tb-lado { grid-template-columns: minmax(0, 1fr); }
  .tb-otros { margin-top: 64px; }
}