/* ==========================================================================
   blog.css — Sistema de blog: listado, categorías y post individual.
   Carga condicional: is_home() || is_archive() || is_single()
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Animaciones al scroll
   -------------------------------------------------------------------------- */
.will-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.will-animate.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. Etiqueta de categoría / eje (cat-badge)
   -------------------------------------------------------------------------- */
.cat-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-taupe);
  text-decoration: none;
  transition: opacity 0.2s;
}

.cat-badge--mp { color: var(--color-cobre); }
.cat-badge--md { color: var(--color-verde); }
.cat-badge--pc { color: var(--color-marron); }

.cat-badge:hover,
.cat-badge:focus { opacity: 0.7; }

/* --------------------------------------------------------------------------
   3. Encabezado del listado del blog
   -------------------------------------------------------------------------- */

/* Elimina el padding-top de site-main en páginas de blog/categoría
   para que el encabezado controle todo el espaciado superior. */
.site-main--flush {
  padding-block-start: 0;
}

.blog-header {
  padding-block: var(--space-8) var(--space-6);
  background-color: var(--color-marfil);
  position: relative;
}

/* Línea degradada de los tres ejes */
.blog-header::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #B88147 0%, #2F5D50 50%, #4A342C 100%);
}

.blog-header__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cobre);
  margin-bottom: var(--space-3);
}

.blog-header__title {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-marron);
  margin-bottom: var(--space-4);
}

.blog-header__desc {
  font-family: var(--font-small);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-taupe);
  max-width: 52ch;
}

.blog-header__next {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-5);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-taupe);
}

.blog-header__next-label {
  font-weight: 500;
  color: var(--color-marron);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.blog-header__next-sep {
  color: var(--color-beige);
}

/* --------------------------------------------------------------------------
   4. Encabezado de categoría/eje
   -------------------------------------------------------------------------- */
.cat-header {
  padding-block: var(--space-8) var(--space-6);
  background-color: var(--color-marfil);
  border-bottom: 3px solid var(--color-beige);
}

.cat-header--mp { border-bottom-color: var(--color-cobre); }
.cat-header--md { border-bottom-color: var(--color-verde); }
.cat-header--pc { border-bottom-color: var(--color-marron); }

.cat-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-taupe);
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: color 0.2s;
}
.cat-header__back:hover { color: var(--color-marron); }

.cat-header__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-2);
}

.cat-header--mp .cat-header__eyebrow { color: var(--color-cobre); }
.cat-header--md .cat-header__eyebrow { color: var(--color-verde); }
.cat-header--pc .cat-header__eyebrow { color: var(--color-marron); }

.cat-header__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-marron);
  margin-bottom: var(--space-3);
}

.cat-header__desc {
  font-family: var(--font-small);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-taupe);
}

/* --------------------------------------------------------------------------
   5. Filtro horizontal por eje
   -------------------------------------------------------------------------- */
.blog-filter {
  background-color: var(--color-marfil);
  border-bottom: 1px solid var(--color-beige);
}

.blog-filter__list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline: var(--gutter);
  max-width: var(--max-width-wide);
  margin-inline: auto;
  scrollbar-width: none;
}

.blog-filter__list::-webkit-scrollbar { display: none; }

.blog-filter__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-taupe);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.blog-filter__link:hover,
.blog-filter__link:focus {
  color: var(--color-marron);
}

.blog-filter__link--active {
  color: var(--color-marron);
  border-bottom-color: var(--color-marron);
  font-weight: 500;
}

/* Acentos de eje en hover y activo */
.blog-filter__link--mp:hover,
.blog-filter__link--mp:focus { color: var(--color-cobre); }
.blog-filter__link--mp.blog-filter__link--active {
  color: var(--color-cobre);
  border-bottom-color: var(--color-cobre);
}

.blog-filter__link--md:hover,
.blog-filter__link--md:focus { color: var(--color-verde); }
.blog-filter__link--md.blog-filter__link--active {
  color: var(--color-verde);
  border-bottom-color: var(--color-verde);
}

.blog-filter__link--pc:hover,
.blog-filter__link--pc:focus { color: var(--color-marron); }
.blog-filter__link--pc.blog-filter__link--active {
  color: var(--color-marron);
  border-bottom-color: var(--color-marron);
}

/* --------------------------------------------------------------------------
   6. Post destacado
   -------------------------------------------------------------------------- */
.post-featured-wrap {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-beige);
  margin-bottom: var(--space-4);
}

.post-featured__image-link {
  display: block;
  margin-bottom: var(--space-6);
}

.post-featured__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.post-featured .cat-badge {
  display: block;
  margin-bottom: var(--space-3);
}

.post-featured__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.65rem, 5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.post-featured__title a {
  color: var(--color-marron);
  text-decoration: none;
  transition: color 0.2s;
}
.post-featured__title a:hover { color: var(--color-verde); }

.post-featured__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-small);
  font-size: 0.8rem;
  color: var(--color-taupe);
  margin-bottom: var(--space-4);
}

.post-featured__excerpt {
  margin-bottom: var(--space-6);
}

.post-featured__excerpt p {
  font-family: var(--font-small);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-texto-suave);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   7. Lista de posts y tarjeta editorial
   -------------------------------------------------------------------------- */
.post-list {
  padding-block: var(--space-4) var(--space-8);
}

.post-card {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-beige);
}

.post-card .cat-badge {
  display: block;
  margin-bottom: var(--space-2);
}

.post-card__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.2rem, 3.5vw, 1.65rem);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: var(--space-2);
}

.post-card__title a {
  color: var(--color-marron);
  text-decoration: none;
  transition: color 0.2s;
}
.post-card__title a:hover { color: var(--color-verde); }

.post-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-small);
  font-size: 0.78rem;
  color: var(--color-taupe);
  margin-bottom: var(--space-3);
}

.post-card__excerpt {
  margin-bottom: var(--space-3);
}

.post-card__excerpt p {
  font-family: var(--font-small);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-texto-suave);
}

.post-card__link {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-cobre);
  text-decoration: none;
  transition: color 0.2s;
}
.post-card__link:hover { color: var(--color-marron); }

/* --------------------------------------------------------------------------
   8. Post individual — encabezado
   -------------------------------------------------------------------------- */
.single-header {
  padding-block: var(--space-12) var(--space-8);
  background-color: var(--color-marfil);
  border-bottom: 1px solid var(--color-beige);
}

.single-header .cat-badge {
  display: block;
  margin-bottom: var(--space-4);
}

.single-header__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.85rem, 5.5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-marron);
  margin-bottom: var(--space-4);
}

.single-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-small);
  font-size: 0.8rem;
  color: var(--color-taupe);
}

/* Imagen destacada */
.single-featured-image {
  margin-block: var(--space-8);
}

.single-featured-image__img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   9. Cuerpo del artículo — tipografía de lectura
   -------------------------------------------------------------------------- */
.single-content {
  font-family: var(--font-cuerpo);
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  line-height: 1.9;
  color: var(--color-texto);
  padding-block: var(--space-8) var(--space-16);
}

.single-content > * + * {
  margin-top: var(--space-6);
}

.single-content p {
  max-width: 68ch;
  margin-top: 0;
  margin-bottom: var(--space-6);
}

.single-content h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.35rem, 3.5vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-marron);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.single-content h3 {
  font-family: var(--font-titulo);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-marron);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.single-content ul,
.single-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.single-content li {
  margin-bottom: var(--space-2);
  line-height: 1.85;
}

.single-content blockquote {
  border-left: 3px solid var(--color-cobre);
  padding-left: var(--space-6);
  margin-inline: 0;
  margin-block: var(--space-8);
  font-style: italic;
}

.single-content blockquote p {
  color: var(--color-taupe);
  font-size: 1.1em;
}

.single-content a {
  color: var(--color-verde);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.single-content a:hover { color: var(--color-marron); }

.single-content strong {
  font-weight: 600;
  color: var(--color-marron);
}

.single-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-block: var(--space-8);
}

/* --------------------------------------------------------------------------
   10. Navegación entre artículos
   -------------------------------------------------------------------------- */
.single-nav {
  border-top: 1px solid var(--color-beige);
  border-bottom: 1px solid var(--color-beige);
  padding-block: var(--space-6);
  margin-bottom: 0;
}

.single-nav .nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.single-nav .nav-previous a,
.single-nav .nav-next a {
  display: block;
  text-decoration: none;
}

.single-nav__dir {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-taupe);
  margin-bottom: var(--space-1);
  transition: color 0.2s;
}

.single-nav__title {
  display: block;
  font-family: var(--font-titulo);
  font-size: 1rem;
  color: var(--color-marron);
  line-height: 1.3;
  transition: color 0.2s;
}

.single-nav .nav-previous a:hover .single-nav__dir,
.single-nav .nav-previous a:hover .single-nav__title,
.single-nav .nav-next a:hover .single-nav__dir,
.single-nav .nav-next a:hover .single-nav__title {
  color: var(--color-cobre);
}

/* --------------------------------------------------------------------------
   11. Newsletter compacto (en posts)
   -------------------------------------------------------------------------- */
.blog-newsletter {
  background-color: var(--color-beige);
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-taupe);
  border-bottom: 1px solid var(--color-taupe);
}

.blog-newsletter__inner {
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

.blog-newsletter__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-3);
}

.blog-newsletter__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 500;
  color: var(--color-marron);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.blog-newsletter__desc {
  font-family: var(--font-small);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-texto-suave);
  margin-bottom: var(--space-6);
}

.blog-newsletter__form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-newsletter__input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  background-color: var(--color-marfil);
  border: 1px solid var(--color-taupe);
  color: var(--color-texto);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s;
}

.blog-newsletter__input::placeholder { color: var(--color-taupe); }
.blog-newsletter__input:focus { border-color: var(--color-verde); }

/* --------------------------------------------------------------------------
   12. Artículos relacionados
   -------------------------------------------------------------------------- */
.related-posts {
  padding-block: var(--space-12);
  background-color: var(--color-beige);
}

.related-posts__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-2);
}

.related-posts__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.3rem, 3.5vw, 1.75rem);
  font-weight: 500;
  color: var(--color-marron);
  margin-bottom: var(--space-8);
}

.related-posts__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.related-post-card {
  background-color: var(--color-marfil);
  padding: var(--space-6);
}

.related-post-card .cat-badge {
  display: block;
  margin-bottom: var(--space-2);
}

.related-post-card__title {
  font-family: var(--font-titulo);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.related-post-card__title a {
  color: var(--color-marron);
  text-decoration: none;
  transition: color 0.2s;
}
.related-post-card__title a:hover { color: var(--color-verde); }

.related-post-card__meta {
  font-family: var(--font-small);
  font-size: 0.75rem;
  color: var(--color-taupe);
}

/* --------------------------------------------------------------------------
   13. Estado vacío
   -------------------------------------------------------------------------- */
.blog-empty {
  padding-block: var(--space-16);
  font-family: var(--font-small);
  color: var(--color-taupe);
  text-align: center;
}

/* --------------------------------------------------------------------------
   14. Paginación del blog (hereda nav.navigation de main.css, solo ajustes)
   -------------------------------------------------------------------------- */
.navigation.pagination {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-beige);
  margin-top: var(--space-4);
}

.nav-links .page-numbers {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-taupe);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  transition: color 0.2s;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
  color: var(--color-marron);
}

/* --------------------------------------------------------------------------
   15. Responsivo — tablet (768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .blog-header {
    padding-block: var(--space-12) var(--space-8);
  }

  .post-featured-wrap {
    padding-block: var(--space-12);
  }

  /* Post destacado: 2 columnas */
  .post-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .post-featured__image-link {
    margin-bottom: 0;
  }

  /* Newsletter: fila horizontal en tablet+ */
  .blog-newsletter__form-row {
    flex-direction: row;
    max-width: 46ch;
    margin-inline: auto;
  }

  .blog-newsletter__input {
    flex: 1;
  }

  /* Relacionados: 2 columnas */
  .related-posts__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Navegación entre posts: lado a lado */
  .single-nav .nav-links {
    flex-direction: row;
    justify-content: space-between;
  }

  .single-nav .nav-next {
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   16. Responsivo — desktop (1100px)
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {

  .blog-header {
    padding-block: var(--space-16) var(--space-12);
  }

  .single-header {
    padding-block: var(--space-16) var(--space-12);
  }

  .related-posts__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   17. Single — invitación a responder y compartir
   -------------------------------------------------------------------------- */
.single-interact {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-beige);
  border-bottom: 1px solid var(--color-beige);
  background-color: var(--color-marfil);
}

.single-interact__invite {
  font-family: var(--font-cuerpo);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.8;
  color: var(--color-texto-suave);
  margin-bottom: var(--space-6);
}

.single-interact__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-2);
}

.single-interact__email {
  color: var(--color-cobre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.single-interact__email:hover { color: var(--color-marron); }

.single-interact__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.single-interact__share-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-taupe);
}

.single-interact__share-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.single-share-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-taupe);
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-beige);
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  line-height: 1.5;
  transition: color 0.2s, border-color 0.2s;
}

.single-share-btn:hover,
.single-share-btn:focus {
  color: var(--color-marron);
  border-color: var(--color-taupe);
  outline: none;
}