/* Blog. Se carga despues de la hoja de la pagina y usa sus mismas variables
   (--black, --off-white, --violet, --card-bg, --_dimension---*, --_typo-base---*).
   No redefine ningun token: si cambia el diseno, cambia aqui tambien. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------- chips */

.blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_dimension---spacing--xs);
}

.blog-chip {
  border: 1px solid var(--_theme---lines--light);
  border-radius: var(--_dimension---radius--button);
  padding: 8px 16px;
  color: var(--_theme---text--body-light);
  font-size: var(--_typo-base---size--eyebrow);
  letter-spacing: var(--_typo-base---tracking--eyebrow);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background-color .2s, border-color .2s;
}

.blog-chip:hover { color: var(--off-white); border-color: var(--off-white); }

.blog-chip[aria-current="page"] {
  background-color: var(--off-white);
  border-color: var(--off-white);
  color: var(--black);
}

/* --------------------------------------------------------------- tarjetas */

.blog-grid {
  grid-column-gap: var(--_dimension---spacing--md);
  grid-row-gap: var(--_dimension---spacing--md);
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
}

.blog-card {
  border: 1px solid var(--border-dark-surface);
  border-radius: var(--_dimension---radius--card);
  background-color: var(--card-bg);
  flex-flow: column;
  gap: var(--_dimension---spacing--sm);
  height: 100%;
  padding: 24px;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
  display: flex;
}

.blog-card:hover { background-color: var(--card-bg-hover); transform: translateY(-2px); }

.blog-card__media { border-radius: 12px; position: relative; overflow: hidden; }

.blog-card__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  /* height auto: sin esto manda el atributo height= del <img> y la imagen sale cuadrada. */
  height: auto;
  display: block;
}

.blog-card__pill {
  border: 1px solid var(--_theme---lines--light);
  border-radius: var(--_dimension---radius--button);
  background-color: var(--card-bg);
  align-items: center;
  gap: var(--_dimension---spacing--xs);
  padding: 6px 12px;
  display: flex;
  position: absolute;
  top: 12px;
  left: 12px;
}

.blog-card__pill-text,
.blog-meta,
.blog-card__meta,
.blog-toc__title,
.blog-tags__title {
  color: var(--_theme---text--body-light);
  font-size: var(--_typo-base---size--eyebrow);
  letter-spacing: var(--_typo-base---tracking--eyebrow);
  text-transform: uppercase;
  line-height: 1.6;
}

.blog-card__title {
  font-family: var(--_typo-base---font-family--font-family-display);
  color: var(--off-white);
  font-size: var(--_typo-base---size--h3);
  line-height: 1.2;
  font-style: normal;
  font-weight: 300;
  opacity: 1;
  margin: 0;
}

.blog-card__excerpt {
  opacity: .6;
  color: var(--off-white);
  font-size: var(--_typo-base---size--small-ui);
  line-height: var(--_typo-base---leading--small-ui);
  max-width: none;
  margin: 0;
}

.blog-card__meta {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_dimension---spacing--xs);
  margin-block-start: auto;
  padding-top: var(--_dimension---spacing--xs);
  display: flex;
}

.blog-dot {
  background-color: var(--_theme---buttons--ghost-text);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  flex: none;
}

.blog-card--featured {
  grid-column-gap: var(--_dimension---spacing--md);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: var(--_dimension---spacing--md);
  display: grid;
}

.blog-card--featured .blog-card__body {
  flex-flow: column;
  gap: var(--_dimension---spacing--sm);
  height: 100%;
  display: flex;
}

.blog-card--featured .blog-card__title { font-size: var(--_typo-base---size--h2); line-height: var(--_typo-base---leading--h2); }

.blog-empty { color: var(--_theme---text--body-light); }

/* ------------------------------------------------------------- articulo */

.blog-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_dimension---spacing--xs);
  display: flex;
}

.blog-meta__avatar {
  border: 1px solid var(--border-dark-surface);
  border-radius: 8px;
  object-fit: cover;
  width: 32px;
  height: 32px;
  margin-right: 4px;
}

.blog-meta__name { color: var(--off-white); text-decoration: none; }
.blog-meta__name:hover { color: var(--violet); }
.blog-meta__draft { border: 1px solid var(--violet); border-radius: var(--_dimension---radius--button); color: var(--violet); padding: 2px 10px; }

.blog-cover {
  border-radius: var(--_dimension---radius--card);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 520px;
  margin-top: var(--_dimension---spacing--md);
  display: block;
}

.blog-layout {
  grid-column-gap: var(--_dimension---spacing--lg);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  display: grid;
}

.blog-aside {
  flex-flow: column;
  gap: var(--_dimension---spacing--md);
  display: flex;
  position: sticky;
  top: 96px;
}

.blog-toc--mobile { display: none; }

.blog-toc__title { margin-bottom: var(--_dimension---spacing--sm); display: block; }

.blog-toc ol {
  border-left: 1px solid var(--border-dark-surface);
  flex-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.blog-toc a {
  border-left: 1px solid rgba(0, 0, 0, 0);
  color: var(--_theme---text--body-light);
  font-size: var(--_typo-base---size--small-ui);
  line-height: 1.5;
  margin-left: -1px;
  padding: 7px 0 7px 16px;
  text-decoration: none;
  transition: color .2s, border-color .2s;
  display: block;
}

.blog-toc a:hover { color: var(--off-white); }
.blog-toc a.is-current { border-left-color: var(--violet); color: var(--off-white); }
.blog-toc li.is-sub a { padding-left: 30px; }

/* ---------------------------------------------------------------- prosa */

.blog-prose { max-width: 68ch; }
.blog-prose > * { margin-top: 0; margin-bottom: 20px; }
.blog-prose > :last-child { margin-bottom: 0; }

.blog-prose p,
.blog-prose li {
  color: var(--_theme---text--body-light);
  font-size: var(--_typo-base---size--body);
  line-height: var(--_typo-base---leading--body);
  max-width: none;
}

.blog-prose h2,
.blog-prose h3 {
  color: var(--off-white);
  font-family: var(--_typo-base---font-family--font-family-display);
  font-style: normal;
  font-weight: 300;
  opacity: 1;
  scroll-margin-top: 110px;
  margin-top: 56px;
  margin-bottom: var(--_dimension---spacing--sm);
}

.blog-prose h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; }
.blog-prose h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; margin-top: 40px; }
.blog-prose > h2:first-child, .blog-prose > h3:first-child { margin-top: 0; }

.blog-prose a {
  color: var(--off-white);
  text-decoration: underline;
  text-decoration-color: var(--_theme---lines--light);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}

.blog-prose a:hover { color: var(--violet); text-decoration-color: var(--violet); }

.blog-prose ul, .blog-prose ol { padding-left: 20px; }
.blog-prose li { margin-bottom: var(--_dimension---spacing--xs); padding-left: 4px; }
.blog-prose li::marker { color: var(--_theme---buttons--ghost-text); }

.blog-prose strong { color: var(--off-white); font-weight: 500; }

.blog-prose blockquote {
  border-left: 1px solid var(--violet);
  margin: 40px 0;
  padding: 4px 0 4px 24px;
}

.blog-prose blockquote p {
  color: var(--off-white);
  font-family: var(--_typo-base---font-family--font-family-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.3;
  margin-bottom: 0;
}

.blog-prose img { border-radius: var(--_dimension---radius--card); width: 100%; display: block; }

.blog-prose figure { margin: 40px 0; }

.blog-prose figcaption {
  opacity: .6;
  color: var(--off-white);
  font-size: var(--_typo-base---size--small-ui);
  line-height: var(--_typo-base---leading--small-ui);
  margin-top: var(--_dimension---spacing--sm);
}

.blog-prose hr { border: 0; border-top: 1px solid var(--border-dark-surface); margin: 48px 0; }

.blog-prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--_typo-base---size--small-ui);
  line-height: var(--_typo-base---leading--small-ui);
  margin: 32px 0;
}

.blog-prose th, .blog-prose td {
  border-bottom: 1px solid var(--border-dark-surface);
  color: var(--_theme---text--body-light);
  text-align: left;
  vertical-align: top;
  padding: 14px 16px 14px 0;
}

.blog-prose th {
  color: var(--off-white);
  font-size: var(--_typo-base---size--eyebrow);
  font-weight: 400;
  letter-spacing: var(--_typo-base---tracking--eyebrow);
  text-transform: uppercase;
}

.blog-table-wrap { overflow-x: auto; }

.blog-prose code {
  background-color: var(--card-bg);
  border: 1px solid var(--border-dark-surface);
  border-radius: 6px;
  color: var(--off-white);
  font-size: .85em;
  padding: 2px 6px;
}

/* ------------------------------------------------------------- banners */

.blog-inline-banner {
  border: 1px solid var(--border-dark-surface);
  border-radius: var(--_dimension---radius--card);
  background-color: var(--card-bg);
  grid-column-gap: var(--_dimension---spacing--md);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin: 48px 0;
  padding: var(--_dimension---spacing--md);
  display: grid;
}

.blog-inline-banner__heading {
  color: var(--off-white);
  font-family: var(--_typo-base---font-family--font-family-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  max-width: none;
  margin: 0 0 6px;
}

.blog-inline-banner__sub {
  opacity: .6;
  color: var(--off-white);
  font-size: var(--_typo-base---size--small-ui);
  line-height: var(--_typo-base---leading--small-ui);
  max-width: none;
  margin: 0;
}

.blog-side-banner {
  border: 1px solid var(--border-dark-surface);
  border-radius: var(--_dimension---radius--card);
  background-color: var(--card-bg);
  flex-flow: column;
  gap: 12px;
  padding: var(--_dimension---spacing--md);
  display: flex;
}

.blog-side-banner__heading {
  color: var(--off-white);
  font-family: var(--_typo-base---font-family--font-family-display);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.25;
  opacity: 1;
  margin: 0;
}

.blog-side-banner .button { margin-top: 4px; text-align: center; }

/* --------------------------------------------------- tags, compartir, autor */

.blog-footer-rows {
  border-top: 1px solid var(--border-dark-surface);
  flex-flow: column;
  gap: var(--_dimension---spacing--sm);
  margin-top: 48px;
  padding-top: var(--_dimension---spacing--md);
  display: flex;
}

.blog-tags, .blog-share {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_dimension---spacing--xs);
  display: flex;
}

.blog-tag {
  border: 1px solid var(--border-dark-surface);
  border-radius: var(--_dimension---radius--button);
  color: var(--_theme---text--body-light);
  font-size: var(--_typo-base---size--eyebrow);
  letter-spacing: var(--_typo-base---tracking--eyebrow);
  line-height: 1;
  padding: 7px 14px;
  text-transform: uppercase;
}

.blog-share__link {
  background: none;
  border: 0;
  color: var(--_theme---text--body-light);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--_typo-base---size--small-ui);
  line-height: var(--_typo-base---leading--small-ui);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}

.blog-share__link:hover { color: var(--off-white); }

.blog-author {
  border-top: 1px solid var(--border-dark-surface);
  grid-column-gap: var(--_dimension---spacing--md);
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  margin-top: 48px;
  padding-top: var(--_dimension---spacing--md);
  display: grid;
}

.blog-author__img {
  border: 1px solid var(--border-dark-surface);
  border-radius: 12px;
  aspect-ratio: 1;
  object-fit: cover;
  width: 96px;
  height: auto;
}

.blog-author__body { flex-flow: column; gap: 6px; display: flex; }

.blog-author__name {
  color: var(--off-white);
  font-family: var(--_typo-base---font-family--font-family-display);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  opacity: 1;
  margin: 0;
}

.blog-author__bio {
  opacity: .6;
  color: var(--off-white);
  font-size: var(--_typo-base---size--small-ui);
  line-height: var(--_typo-base---leading--small-ui);
  max-width: 60ch;
  margin: 6px 0 0;
}

.blog-author__links { align-items: center; gap: var(--_dimension---spacing--sm); margin-top: 6px; display: flex; }

.blog-author__link {
  color: var(--_theme---text--body-light);
  font-size: var(--_typo-base---size--small-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}

.blog-author__link:hover { color: var(--off-white); }

/* ------------------------------------------------------------ responsive */

@media screen and (max-width: 991px) {
  .blog-layout { grid-template-columns: 1fr; grid-row-gap: var(--_dimension---spacing--lg); }
  .blog-aside { position: static; top: auto; }
  .blog-toc--desktop { display: none; }
  .blog-toc--mobile {
    border: 1px solid var(--border-dark-surface);
    border-radius: var(--_dimension---radius--card);
    background-color: var(--card-bg);
    margin-bottom: var(--_dimension---spacing--md);
    padding: 20px var(--_dimension---spacing--md);
    display: block;
  }
  .blog-toc--mobile summary { color: var(--off-white); cursor: pointer; list-style: none; }
  .blog-toc--mobile summary::-webkit-details-marker { display: none; }
  .blog-toc--mobile ol { margin-top: var(--_dimension---spacing--sm); }
  .blog-toc--mobile .blog-toc__title { margin-bottom: 0; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card--featured { grid-template-columns: 1fr; grid-row-gap: var(--_dimension---spacing--sm); }
  .blog-prose { max-width: none; }
}

@media screen and (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-inline-banner { grid-template-columns: 1fr; grid-row-gap: var(--_dimension---spacing--sm); justify-items: start; }
  .blog-author { grid-template-columns: 72px minmax(0, 1fr); grid-column-gap: var(--_dimension---spacing--sm); }
  .blog-author__img { width: 72px; }
  .blog-cover { aspect-ratio: 3 / 2; }
}

.blog-eyebrow-link { color: inherit; text-decoration: none; transition: color .2s; }
.blog-eyebrow-link:hover { color: var(--off-white); }