/* Blog (vista previa 7-10-2026). Usa los tokens de la web (00-tokens.css). */
.page-blog main { background: var(--aj-ivory); }
.bl-draft { position: sticky; top: var(--aj-header); z-index: 5; text-align: center; padding: 6px var(--aj-gutter);
  font: 500 var(--fs-eyebrow)/1.4 var(--aj-sans); letter-spacing: .14em; text-transform: uppercase;
  background: var(--aj-blush-mist); color: var(--aj-cacao); }

/* portada del blog */
.bl-hero { padding: clamp(56px, 8vw, 112px) 0 clamp(32px, 4vw, 56px); text-align: center; }
.bl-hero .eyebrow { justify-content: center; }
.bl-hero__title { font: 400 var(--fs-section)/1.08 var(--aj-serif); color: var(--aj-ink); margin: 14px auto 18px; max-width: 16ch; letter-spacing: -.01em; }
.bl-hero__lead { font: 400 var(--fs-lead)/1.55 var(--aj-serif); color: var(--aj-muted); max-width: 36rem; margin: 0 auto; }
.bl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.bl-chip { font: 500 var(--fs-small)/1 var(--aj-sans); color: var(--aj-cacao); background: transparent; cursor: pointer;
  border: 1px solid var(--aj-border-strong); border-radius: var(--aj-radius-button); padding: 10px 18px;
  transition: background var(--aj-t-micro) var(--aj-ease), color var(--aj-t-micro) var(--aj-ease), border-color var(--aj-t-micro); }
.bl-chip:hover { border-color: var(--aj-rose); color: var(--aj-rose); }
.bl-chip.is-on { background: var(--aj-cacao); border-color: var(--aj-cacao); color: var(--aj-paper); }
/* (09-10-2026) sin JS los filtros no hacen nada: fuera. Colores forzados: el elegido, con su contorno */
html:not(.js) .bl-chips { display: none; }
@media (forced-colors: active) { .bl-chip.is-on { outline: 2px solid Highlight; outline-offset: 2px; } }

.bl-list { padding-bottom: var(--sp-section); }
.bl-grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* tarjetas */
.bl-card[hidden] { display: none; }
.bl-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none;
  background: var(--aj-paper); border-radius: var(--aj-radius-image); overflow: hidden; box-shadow: var(--aj-shadow-ui);
  transition: transform var(--aj-t-micro) var(--aj-ease), box-shadow var(--aj-t-micro) var(--aj-ease); }
.bl-card__link:hover { transform: translateY(-3px); box-shadow: var(--aj-shadow-product); }
.bl-card__img { margin: 0; aspect-ratio: 4 / 3; background: var(--aj-sand); display: grid; place-items: center; overflow: hidden; }
.bl-card__img img { width: 100%; height: 100%; object-fit: cover; }
.bl-card__img.is-round img { width: 74%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply; }
.bl-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bl-card__title { font: 400 var(--fs-h3)/1.18 var(--aj-serif); color: var(--aj-ink); margin: 0; }
.bl-card__desc { font: 400 var(--fs-body)/1.55 var(--aj-serif); color: var(--aj-muted); margin: 0; flex: 1; }
.bl-more { font: 500 var(--fs-small)/1 var(--aj-sans); color: var(--aj-rose); letter-spacing: .02em; }
.bl-card__link:hover .bl-more { color: var(--aj-rose-deep); }
.bl-card--big { margin-bottom: clamp(24px, 3vw, 40px); }
@media (min-width: 900px) {
  .bl-card--big .bl-card__link { display: grid; grid-template-columns: 1.1fr 1fr; }
  .bl-card--big .bl-card__img { aspect-ratio: auto; min-height: 380px; }
  .bl-card--big .bl-card__body { padding: clamp(32px, 4vw, 56px); justify-content: center; }
  .bl-card--big .bl-card__title { font-size: var(--fs-h2); }
  .bl-card--big .bl-card__desc { flex: 0; font-size: var(--fs-lead); }
}

.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0;
  font: 400 var(--fs-micro)/1.3 var(--aj-sans); color: var(--aj-muted); }
.bl-tag { font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-eyebrow); color: var(--aj-gold); }

/* artículo */
.bl-head { padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); }
.bl-crumb { font: 400 var(--fs-small)/1 var(--aj-sans); color: var(--aj-muted); margin: 0 0 22px; }
.bl-crumb a { color: var(--aj-rose); text-decoration: none; }
.bl-crumb a:hover { text-decoration: underline; }
.bl-head__title { font: 400 var(--fs-section)/1.1 var(--aj-serif); color: var(--aj-ink); margin: 0 0 18px; max-width: 22ch; letter-spacing: -.01em; }
.bl-head__lead { font: 400 var(--fs-lead)/1.55 var(--aj-serif); color: var(--aj-muted); max-width: 40rem; margin: 0 0 22px; }

.bl-layout { display: grid; gap: clamp(40px, 5vw, 80px); padding-bottom: var(--sp-section); }
@media (min-width: 1024px) { .bl-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.bl-hero-img { margin: 0 0 clamp(32px, 4vw, 48px); border-radius: var(--aj-radius-image); overflow: hidden; background: var(--aj-sand);
  aspect-ratio: 16 / 9; display: grid; place-items: center; box-shadow: var(--aj-shadow-ui); }
.bl-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.bl-hero-img.is-round img { width: auto; height: 86%; aspect-ratio: 1; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply; }

.bl-prose { max-width: 40rem; font: 400 1.125rem/1.7 var(--aj-serif); color: var(--aj-cacao); }
.bl-prose > * + * { margin-top: 1.1em; }
.bl-prose h2 { font: 400 var(--fs-h3)/1.2 var(--aj-serif); color: var(--aj-ink); margin-top: 2.1em; }
.bl-prose h2::before { content: "☽ ✧ ☾" / ""; display: block; font-size: .7rem; letter-spacing: .5em; color: var(--aj-gold); margin-bottom: 14px; }
.bl-prose h3 { font: 500 var(--fs-lead)/1.3 var(--aj-serif); color: var(--aj-ink); margin-top: 1.6em; }
.bl-prose p, .bl-prose ul, .bl-prose ol { margin-bottom: 0; }
.bl-prose ul, .bl-prose ol { padding-left: 1.3em; }
.bl-prose li + li { margin-top: .45em; }
.bl-prose li::marker { color: var(--aj-gold); }
.bl-prose strong { font-weight: 600; color: var(--aj-ink); }
.bl-prose a { color: var(--aj-rose); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-prose a:hover { color: var(--aj-rose-deep); }
.bl-table { overflow-x: auto; border-radius: var(--aj-radius-card); background: var(--aj-paper); box-shadow: 0 0 0 1px var(--aj-border); }
.bl-table table { width: 100%; border-collapse: collapse; font: 400 var(--fs-small)/1.45 var(--aj-sans); }
.bl-table th { text-align: left; font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--aj-cacao); background: var(--aj-sand); padding: 12px 16px; }
.bl-table td { padding: 11px 16px; border-top: 1px solid var(--aj-border); vertical-align: top; }
.bl-table tbody tr:nth-child(even) td { background: rgba(241, 231, 222, .35); }
.bl-note { font: italic 400 var(--fs-small)/1.5 var(--aj-serif); color: var(--aj-cacao); background: #FFF4D6;
  border-left: 3px solid #E0B44A; padding: 10px 14px; border-radius: 4px; }
.bl-note::before { content: "Nota interna (no se publica): "; font-style: normal; font-weight: 600; }

.bl-cta { margin-top: clamp(48px, 6vw, 72px); display: grid; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 36px);
  background: var(--aj-paper); border-radius: var(--aj-radius-image); box-shadow: var(--aj-shadow-ui); max-width: 40rem; }
@media (min-width: 640px) { .bl-cta { grid-template-columns: 150px 1fr; } }
.bl-cta img { width: 100%; max-width: 150px; height: auto; filter: drop-shadow(0 12px 18px rgba(45, 39, 35, .18)); }
.bl-cta h2 { font: 400 var(--fs-h3)/1.2 var(--aj-serif); color: var(--aj-ink); margin: 0 0 8px; }
.bl-cta p { font: 400 var(--fs-body)/1.55 var(--aj-serif); color: var(--aj-muted); margin: 0 0 18px; }

/* menú de artículos */
.bl-side__in { position: sticky; top: calc(var(--aj-header) + 56px); padding: 26px 24px; background: var(--aj-paper);
  border-radius: var(--aj-radius-image); box-shadow: 0 0 0 1px var(--aj-border); }
.bl-side__title { font: 500 var(--fs-eyebrow)/1 var(--aj-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--aj-gold); margin: 0 0 16px; }
.bl-toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.bl-toc li { counter-increment: toc; border-top: 1px solid var(--aj-border); }
.bl-toc li:first-child { border-top: 0; }
.bl-toc a { display: grid; grid-template-columns: 26px 1fr; column-gap: 6px; padding: 12px 0; text-decoration: none;
  font: 400 var(--fs-body)/1.35 var(--aj-serif); color: var(--aj-cacao); }
.bl-toc a::before { content: counter(toc, decimal-leading-zero); grid-row: span 2; font: 400 var(--fs-micro)/1.9 var(--aj-sans); color: var(--aj-gold); }
.bl-toc__cat { font: 500 10px/1.6 var(--aj-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--aj-muted); }
.bl-toc a:hover { color: var(--aj-rose); }
.bl-toc .is-here a { color: var(--aj-ink); }
.bl-toc .is-here a { font-weight: 600; }
.bl-toc .is-here { position: relative; }
.bl-toc .is-here::before { content: ""; position: absolute; left: -24px; top: 12px; bottom: 12px; width: 3px; background: var(--aj-rose); border-radius: 2px; }
.bl-side__all { display: inline-block; margin-top: 14px; font: 500 var(--fs-small)/1 var(--aj-sans); color: var(--aj-rose); text-decoration: none; }
@media (max-width: 1023px) { .bl-side__in { position: static; } }

.bl-next { background: var(--aj-sand); padding: var(--sp-section) 0; }
.bl-next__title { font: 400 var(--fs-h2)/1.1 var(--aj-serif); color: var(--aj-ink); margin: 0 0 clamp(24px, 3vw, 40px); text-align: center; }
.bl-hero-img.is-round img { width: 48% !important; height: auto !important; }
.bl-card__img.is-contain img, .bl-hero-img.is-contain img { object-fit: contain; padding: 18px; }
/* 08-10-2026: imágenes cuadradas como en Instagram */
.bl-card__img, .bl-card__img.is-round { aspect-ratio: 1 / 1; }
.bl-card__img img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0; mix-blend-mode: normal; }
@media (min-width: 900px) { .bl-card--big .bl-card__img { aspect-ratio: 1 / 1; min-height: 0; } .bl-card--big .bl-card__link { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bl-hero-img { aspect-ratio: 1 / 1; max-width: 560px; }
.bl-hero-img img { width: 100% !important; height: 100% !important; object-fit: cover; mix-blend-mode: normal; }
@media (min-width: 1024px) { .bl-head .wrap { display: block; } }
.bl-cta { grid-template-columns: 110px 1fr !important; background: transparent; box-shadow: none; border-top: 1px solid var(--aj-border); border-bottom: 1px solid var(--aj-border); border-radius: 0; padding: 24px 0; }
.bl-cta img { max-width: 110px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: none; }
.bl-cta h2 { font-size: var(--fs-lead); margin-bottom: 4px; }
.bl-cta p { margin-bottom: 8px; font-size: var(--fs-small); }
.bl-cta__link { font: 500 var(--fs-small)/1 var(--aj-sans); color: var(--aj-rose); text-decoration: none; }
.bl-cta__link:hover { color: var(--aj-rose-deep); }

/* ——— revisión del móvil (09-10-2026, ella: «la versión de móvil tiene muy pequeña letra») */
/* contraste AA: los enlaces, las etiquetas y los títulos pequeños en el rosa hondo (el rosa y el oro sobre el marfil no
   llegaban a 4,5:1 con letra de 12–14 px). Al pasar el ratón, la tinta */
.bl-tag, .bl-side__title, .bl-more, .bl-crumb a, .bl-side__all, .bl-cta__link, .bl-prose a { color: var(--aj-rose-deep); }
.bl-card__link:hover .bl-more, .bl-cta__link:hover, .bl-prose a:hover { color: var(--aj-ink); }
/* móvil y tableta: filtros y enlaces sueltos con sus 44 px táctiles; la categoría del índice, a 13 px (era 10) */
@media (max-width: 1023.98px) {
  .bl-chip { min-height: 44px; }
  .bl-side__all, .bl-crumb a, .bl-cta__link { display: inline-flex; align-items: center; min-height: 44px; }
  .bl-crumb a { padding-inline: 8px; margin-inline: -8px; }   /* (09-10-2026) 44 px por los dos lados: «Blog / Luna» sin hueco de más */
  .bl-toc__cat { font-size: .8125rem; }
}
/* el teléfono: los titulares en líneas parejas (sin «luna» o «horas)» solas en la última), y las entradillas sin una
   palabra sola al final */
@media (max-width: 767.98px) {
  .bl-hero__title, .bl-head__title, .bl-prose h2, .bl-cta h2 { text-wrap: balance; }
  .bl-hero__lead, .bl-head__lead { text-wrap: pretty; }
  .bl-cta p { font-size: 1rem; }   /* (09-10-2026) la frase de la tarjeta del journal, a 16 px como el texto (era 15) */
}
/* (09-10-2026) con la letra del navegador al 200 %, una palabra larga se parte antes que salirse de la pantalla */
.bl-main { min-width: 0; overflow-wrap: break-word; }
.bl-fig { margin: 2em 0; } .bl-fig img { width: 100%; max-width: 640px; display: block; border-radius: var(--aj-radius-image); box-shadow: var(--aj-shadow-ui); }