/* ==========================================================================
   Snap It Go — capa editorial del blog
   El producto es oscuro y técnico; el blog es papel, serif y lectura tranquila.
   Se carga después de style.css y sólo aplica en blog.html y los artículos.
   ========================================================================== */

:root {
  --papel: #FBF9F5;
  --papel-2: #F1EDE4;
  --serif: "Fraunces", Georgia, serif;
}

body.blog,
body.articulo {
  background-color: var(--papel);
  color: var(--tinta);
}

/* ---------- Barra de avance de lectura ---------- */
.barra-lectura {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
}
.barra-avance {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--azul), var(--cian));
  transition: width .1s linear;
}

/* ---------- Portada del blog ---------- */
.blog-hero {
  background-color: var(--noche);
  color: var(--carta);
  padding-block: 5rem 4rem;
}
.blog-hero .etiqueta { color: rgba(245, 247, 251, .5); }
.blog-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--carta);
  margin-bottom: 1.25rem;
  max-width: 14ch;
}
.blog-titulo em {
  font-style: italic;
  font-weight: 700;
  color: var(--cian);
}
.blog-dek {
  font-size: 1.15rem;
  color: rgba(245, 247, 251, .7);
  max-width: 46ch;
  margin-bottom: 2.25rem;
}

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-chip {
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid var(--linea-clara);
  border-radius: 999px;
  padding: .45rem 1rem;
  color: rgba(245, 247, 251, .75);
}
.filtro-activo { background-color: var(--azul); border-color: var(--azul); color: #fff; }

/* ---------- Artículo destacado ---------- */
.blog-destacado { padding-block: 3.5rem 0; }
.destacado {
  display: grid;
  gap: 1.75rem;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(10, 22, 38, .08);
  box-shadow: 0 40px 70px -60px rgba(10, 22, 38, .8);
}
.destacado-foto { overflow: hidden; background-color: var(--papel-2); }
.destacado-foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .9s var(--curva);
}
.destacado:hover .destacado-foto img { transform: scale(1.04); }
.destacado-copy { padding: 0 1.5rem 2rem; display: flex; flex-direction: column; }

.chip-cat {
  display: inline-block;
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--azul);
  background-color: rgba(30, 107, 255, .1);
  border-radius: 999px;
  padding: .35rem .8rem;
  margin-bottom: 1rem;
}
.destacado-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: .85rem;
}
.destacado-dek { font-size: 1.05rem; color: var(--tinta-suave); margin-bottom: 1.25rem; }
.destacado-meta { font-size: .85rem; color: var(--tinta-suave); margin-bottom: 1.5rem; }
.destacado-cta {
  align-self: flex-start;
  font-weight: 500;
  color: var(--azul);
  border-bottom: 1px solid rgba(30, 107, 255, .4);
  padding-bottom: 3px;
}
.destacado:hover .destacado-cta { border-bottom-color: currentColor; }

/* ---------- Rejilla de artículos ---------- */
.blog-rejilla { padding-block: 4rem; }
.rejilla-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(10, 22, 38, .12);
}
.notas-blog { display: grid; gap: 2rem; }
.nota-blog-enlace { text-decoration: none; color: inherit; display: block; }
.nota-blog-foto {
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--papel-2);
  margin-bottom: 1.1rem;
}
.nota-blog-foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .9s var(--curva);
}
.nota-blog-enlace:hover .nota-blog-foto img { transform: scale(1.05); }
.nota-blog-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: .6rem;
}
.nota-blog-enlace:hover .nota-blog-titulo { color: var(--azul); }
.nota-blog-dek { font-size: .98rem; color: var(--tinta-suave); margin-bottom: .75rem; }
.nota-blog-meta { font-size: .82rem; color: var(--tinta-suave); }

/* ---------- Cierre del blog ---------- */
.blog-cierre {
  background-color: var(--noche);
  color: var(--carta);
  padding-block: 5rem;
}
.blog-cierre .titulo { color: var(--carta); }
.blog-cierre .acento { color: var(--cian); }
.blog-cierre .entrada { color: rgba(245, 247, 251, .7); margin-bottom: 2rem; }
.blog-cierre-inner { max-width: 44rem; }
.blog-cierre .hero-acciones { flex-direction: column; }

/* ==========================================================================
   Página de artículo
   ========================================================================== */
.art-cabeza { padding-block: 3.5rem 2.5rem; }
.art-ancho { max-width: 46rem; margin-inline: auto; }

.miga-clara { color: var(--tinta-suave); margin-bottom: 1.5rem; font-size: .85rem; }
.miga-clara a { text-decoration: none; }
.miga-clara a:hover { color: var(--azul); }

.art-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 1.1rem;
}
.art-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--tinta-suave);
  margin-bottom: 1.25rem;
}
.art-meta {
  font-size: .85rem;
  color: var(--tinta-suave);
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(10, 22, 38, .12);
}

.art-portada { margin-bottom: 3rem; }
.art-portada img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--papel-2);
}

/* Cuerpo del texto */
.art-cuerpo { font-size: 1.15rem; line-height: 1.75; }
.art-p { margin-bottom: 1.5rem; }
.art-cuerpo > .art-p:first-child::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: .82;
  padding: .1rem .55rem 0 0;
  color: var(--azul);
}
.art-h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 3rem 0 1.1rem;
}
.art-lista { display: grid; gap: .75rem; margin: 0 0 1.75rem; }
.art-lista li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--tinta);
}
.art-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--azul);
}
.art-cita {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 2.5rem 0;
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 3px solid var(--azul);
}

/* Llamado dentro del artículo */
.art-cta {
  background-color: var(--noche);
  color: var(--carta);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  margin: 3rem 0;
}
.art-cta-titulo {
  font-family: var(--tipo);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  color: var(--carta);
  margin-bottom: .75rem;
}
.art-cta-texto {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(245, 247, 251, .7);
  margin-bottom: 1.5rem;
}

/* Firma */
.art-firma { padding-block: 2.5rem 1rem; }
.firma {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-top: 2rem;
  border-top: 1px solid rgba(10, 22, 38, .12);
}
.firma-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--azul);
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.firma-nombre { font-weight: 600; margin: 0 0 .2rem; }
.firma-texto { margin: 0; font-size: .95rem; color: var(--tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  .barra-avance { transition: none; }
  .destacado-foto img,
  .nota-blog-foto img { transition: none; }
}