/* ==========================================================================
   EMAPRO — blog.css
   Estilos exclusivos de la página Blog.
   ========================================================================== */

[data-animar] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-animar].visible { opacity: 1; transform: translateY(0); }

/* ---------- Artículo destacado ---------- */
.destacado { padding-bottom: 30px; }

.destacado__tarjeta {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.destacado__imagen img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

.destacado__cuerpo {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.destacado__categoria {
  color: var(--verde-claro);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 18px;
}

.destacado__cuerpo h2 { font-size: 1.7rem; margin-bottom: 14px; color: #333333; }
.destacado__cuerpo p { margin-bottom: 18px; }

.destacado__meta {
  font-size: 0.88rem;
  color: var(--verde-medio);
  margin-bottom: 24px;
}

/* ---------- Grid de artículos ---------- */
.articulos { padding-top: 50px; }

.articulos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.articulo {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: var(--transicion);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra)
}

.articulo:hover { transform: translateY(-6px); }

.articulo__imagen img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.articulo__cuerpo {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.articulo__cuerpo h3 { font-size: 1.1rem; margin-bottom: 10px; }
.articulo__cuerpo p { font-size: 0.92rem; margin-bottom: 16px; flex: 1; }

.articulo__meta { font-size: 0.85rem; color: var(--verde-medio); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .articulos__grid { grid-template-columns: repeat(2, 1fr); }
  .destacado__tarjeta { grid-template-columns: 1fr; }
  .destacado__imagen img { min-height: 240px; }
}

@media (max-width: 600px) {
  .articulos__grid { grid-template-columns: 1fr; }
}