/* Blog — listado y articulo. Usa las variables de styles.css (--ink, --brand,
   --border...), asi que hereda la paleta del resto del sitio. */

.gr-blog,
.gr-articulo {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── portada del listado ─────────────────────────────────────────────────── */

.gr-blog-portada {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 20px 40px;
  text-align: center;
}

.gr-blog-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand, #7b2fff);
  margin: 0 0 12px;
}

.gr-blog-portada h1 {
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink, #1a1637);
  margin: 0 0 14px;
}

.gr-blog-bajada {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft, #55506f);
  margin: 0;
}

/* ── etiquetas y metadatos ───────────────────────────────────────────────── */

.gr-blog-cat {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand, #7b2fff);
  margin-bottom: 10px;
}

.gr-blog-meta {
  display: block;
  font-size: 13px;
  color: var(--ink-muted, #8b88a3);
}

/* ── destacado ───────────────────────────────────────────────────────────── */

.gr-blog-destacado {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto 56px;
  padding: 0 20px;
  text-decoration: none;
  color: inherit;
}

.gr-blog-destacado-foto {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-alt, #f8f7fd);
}

.gr-blog-destacado-foto img,
.gr-blog-tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.gr-blog-destacado:hover .gr-blog-destacado-foto img,
.gr-blog-tarjeta:hover .gr-blog-tarjeta-foto img {
  transform: scale(1.03);
}

.gr-blog-destacado-texto h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink, #1a1637);
  margin: 0 0 12px;
}

.gr-blog-destacado-texto p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft, #55506f);
  margin: 0 0 14px;
}

/* ── rejilla de tarjetas ─────────────────────────────────────────────────── */

.gr-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 88px;
}

.gr-blog-tarjeta {
  text-decoration: none;
  color: inherit;
  display: block;
}

.gr-blog-tarjeta-foto {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-alt, #f8f7fd);
  margin-bottom: 16px;
}

.gr-blog-tarjeta h3 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink, #1a1637);
  margin: 0 0 8px;
}

.gr-blog-tarjeta:hover h3 {
  color: var(--brand, #7b2fff);
}

.gr-blog-tarjeta p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #55506f);
  margin: 0 0 10px;
}

.gr-blog-vacio {
  text-align: center;
  padding: 40px 20px 100px;
  color: var(--ink-muted, #8b88a3);
}

/* ── articulo ────────────────────────────────────────────────────────────── */

.gr-articulo {
  /* Mismo ancho que el .container del resto del sitio, para que el blog no se
     vea mas angosto que las demas secciones. Todos los bloques del articulo
     usan este mismo valor: si cada uno trae el suyo, el borde izquierdo baila
     al hacer scroll. */
  --col: 1140px;
  padding-bottom: 96px;
}

.gr-articulo-cabecera,
.gr-articulo-portada,
.gr-articulo-cuerpo,
.gr-articulo-cta,
.gr-articulo-relacionados {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.gr-articulo-cabecera {
  padding-top: 48px;
  padding-bottom: 28px;
}

.gr-articulo-volver {
  display: inline-block;
  font-size: 14px;
  color: var(--ink-muted, #8b88a3);
  text-decoration: none;
  margin-bottom: 24px;
}

.gr-articulo-volver:hover {
  color: var(--brand, #7b2fff);
}

.gr-articulo-cabecera h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink, #1a1637);
  margin: 0 0 16px;
}

.gr-articulo-resumen {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft, #55506f);
  margin: 0 0 24px;
}

.gr-articulo-firma {
  font-size: 14px;
  color: var(--ink-muted, #8b88a3);
  padding-top: 20px;
  border-top: 1px solid var(--border, #e8e6f0);
  margin: 0;
}

.gr-articulo-firma strong {
  color: var(--ink, #1a1637);
  font-weight: 600;
}

.gr-articulo-firma span {
  display: block;
  margin-top: 4px;
}

.gr-articulo-portada {
  margin-top: 32px;
  margin-bottom: 40px;
}

.gr-articulo-portada img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* ── cuerpo del articulo: columna angosta para que se lea ────────────────── */

.gr-articulo-cuerpo {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft, #55506f);
}

.gr-articulo-cuerpo p {
  margin: 0 0 22px;
}

.gr-articulo-cuerpo h2 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink, #1a1637);
  margin: 44px 0 14px;
}

.gr-articulo-cuerpo h3 {
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink, #1a1637);
  margin: 32px 0 10px;
}

.gr-articulo-cuerpo ul,
.gr-articulo-cuerpo ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.gr-articulo-cuerpo li {
  margin-bottom: 8px;
}

.gr-articulo-cuerpo a {
  color: var(--brand, #7b2fff);
  text-decoration: underline;
}

.gr-articulo-cuerpo blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand, #7b2fff);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink, #1a1637);
  font-style: italic;
}

.gr-blog-figura {
  margin: 32px 0;
}

.gr-blog-figura img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.gr-blog-pie {
  font-size: 13.5px;
  color: var(--ink-muted, #8b88a3);
  margin-top: 8px;
  text-align: center;
}

/* ── cierre ──────────────────────────────────────────────────────────────── */

.gr-articulo-cta {
  margin-top: 64px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f0a2e, #1e1452);
  text-align: center;
  color: white;
}

.gr-articulo-cta h2 {
  font-size: 22px;
  line-height: 1.25;
  color: white;
  margin: 0 0 8px;
}

.gr-articulo-cta p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px;
}

.gr-articulo-btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--grad-cta, linear-gradient(135deg, #ff9500, #ff7a00));
  color: white;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.gr-articulo-relacionados {
  margin-top: 80px;
}

.gr-articulo-relacionados h2 {
  margin: 0 0 24px;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink, #1a1637);
}

/* Hereda las tres columnas del listado; solo se le quita el ancho propio para
   que se alinee con el resto del articulo. */
.gr-articulo-relacionados .gr-blog-grid {
  max-width: none;
  padding: 0;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .gr-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gr-blog-destacado {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .gr-blog-portada h1 {
    font-size: 32px;
  }

  .gr-articulo-cabecera h1 {
    font-size: 30px;
  }
}

@media (max-width: 560px) {
  .gr-blog-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .gr-articulo-cuerpo {
    font-size: 16.5px;
  }
}

/* ── seccion del blog en la portada ──────────────────────────────────────── */

.gr-inicio-blog {
  padding: 88px 0;
  background: var(--bg-alt, #f8f7fd);
}

.gr-inicio-blog-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.gr-inicio-blog-cab h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink, #1a1637);
  margin: 0;
}

.gr-inicio-blog-cab .gr-blog-kicker {
  margin-bottom: 6px;
}

.gr-inicio-blog-todos {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand, #7b2fff);
  text-decoration: none;
  white-space: nowrap;
}

.gr-inicio-blog-todos span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.gr-inicio-blog-todos:hover span {
  transform: translateX(3px);
}

/* Dentro de .container de la portada: sin ancho ni relleno propios. */
.gr-blog-grid--inicio {
  max-width: none;
  padding: 0;
}

@media (max-width: 640px) {
  .gr-inicio-blog {
    padding: 56px 0;
  }

  .gr-inicio-blog-cab {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .gr-inicio-blog-cab h2 {
    font-size: 24px;
  }
}