/* ============================================================
   Cierre de artículo — relacionados y llamada a la acción
   ------------------------------------------------------------
   Mismo lenguaje que las páginas de servicio. Contrastes medidos:

   Sobre el crema #F5F0E8:
     #2C3325 11,9:1 · #4A5443 7,0:1 · #4F6245 6,1:1 · #5B6553 5,4:1
   Sobre la banda verde #333F2C:
     #FBFAF7 10,7:1 · #CBD3C1  7,2:1
   Botón sólido: #FBFAF7 sobre #4F6245 = 6,4:1

   Todo por encima del mínimo AA (4,5:1).
   ============================================================ */

.ml-rel{
  --r-ground:#F5F0E8;
  --r-ink:#2C3325;
  --r-ink-2:#4A5443;
  --r-soft:#5B6553;
  --r-sage:#4F6245;
  --r-line:#DDE2D6;
  --r-serif:'DM Serif Display',Georgia,serif;
  --r-sans:'Inter',system-ui,-apple-system,sans-serif;

  display:block;
  margin:64px 0 8px;
  padding:40px 32px;
  background:var(--r-ground);
  border-radius:20px;
  font-family:var(--r-sans);
  color:var(--r-ink-2);
}

.ml-rel-kicker{
  margin:0 0 10px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--r-sage);
}

.ml-rel .ml-rel-h{
  margin:0 0 28px;
  font-family:var(--r-serif);
  font-weight:400;
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.2;
  color:var(--r-ink);
}

/* ---------- rejilla de relacionados ---------- */

.ml-rel-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.ml-rel .ml-rel-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  background:#FBFAF7;
  border:1px solid var(--r-line);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),
             box-shadow .35s cubic-bezier(.2,.7,.3,1),
             border-color .35s ease;
}
.ml-rel .ml-rel-card:hover,
.ml-rel .ml-rel-card:focus-visible{
  transform:translateY(-3px);
  border-color:#C7D2BC;
  box-shadow:0 10px 30px rgba(44,51,37,.10);
  text-decoration:none;
}
.ml-rel .ml-rel-card:focus-visible{
  outline:2px solid var(--r-sage);
  outline-offset:3px;
}

/* ---------- reglas comunes de los dibujos ----------
   Trazados definidos una sola vez en tools/iconos.py, servidos aquí por
   ml-icons.php. */
.ml-rel .ml-ico{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

.ml-rel-media{
  display:block;
  overflow:hidden;
  border-radius:10px;
  aspect-ratio:3/2;
}

/* Portada dibujada para las entradas sin imagen destacada. Ocupa exactamente
   el mismo hueco que una foto (mismo `aspect-ratio`), así que la rejilla no se
   descuadra cuando conviven unas y otras. */
.ml-rel-media--ico{
  display:grid;
  place-items:center;
  background:#EAEFE4;
  border:1px solid var(--r-line);
}
.ml-rel-media--ico .ml-ico{
  width:52px;
  height:52px;
  color:var(--r-sage);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.ml-rel .ml-rel-card:hover .ml-rel-media--ico .ml-ico{ transform:scale(1.08) }
.ml-rel .ml-rel-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.ml-rel .ml-rel-card:hover .ml-rel-thumb{ transform:scale(1.04) }

.ml-rel-body{ display:block }

.ml-rel-cat{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--r-sage);
}
.ml-rel-title{
  display:block;
  font-family:var(--r-serif);
  font-weight:400;
  font-size:19px;
  line-height:1.28;
  color:var(--r-ink);
}
.ml-rel-date{
  display:block;
  margin-top:8px;
  font-size:13px;
  color:var(--r-soft);
}

/* ---------- variante llamada a la acción ---------- */

.ml-rel--cta{ max-width:none }

.ml-rel-lead{
  margin:0 0 26px;
  max-width:56ch;
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  color:var(--r-ink-2);
}

.ml-rel-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Astra pinta y subraya todos los enlaces del contenido; hay que ganarle en
   especificidad o el texto del botón sale del mismo color que su fondo. */
.ml-rel a.ml-rel-btn,
.ml-rel a.ml-rel-btn:hover,
.ml-rel a.ml-rel-btn:focus-visible{
  text-decoration:none;
}
.ml-rel a.ml-rel-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 26px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  line-height:1;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),
             background-color .3s ease,
             box-shadow .3s ease;
}
/* 17 px: cabe dentro de la línea de 15 px del botón sin engordarlo. */
.ml-rel a.ml-rel-btn .ml-ico{ width:17px; height:17px }
.ml-rel a.ml-rel-btn:hover{ transform:translateY(-2px) }
.ml-rel a.ml-rel-btn:focus-visible{
  outline:2px solid var(--r-sage);
  outline-offset:3px;
}

.ml-rel a.ml-rel-btn--wa{
  background:var(--r-sage);
  color:#FBFAF7;            /* 6,4:1 */
  box-shadow:0 6px 20px rgba(79,98,69,.22);
}
.ml-rel a.ml-rel-btn--wa:hover{ background:#43543B }

.ml-rel a.ml-rel-btn--ghost{
  background:transparent;
  color:var(--r-sage);      /* 6,1:1 sobre el crema */
  border:1px solid #C7D2BC;
}
.ml-rel a.ml-rel-btn--ghost:hover{
  background:#EAEFE4;
  border-color:var(--r-sage);
}

/* ---------- móvil ---------- */

@media (max-width:600px){
  .ml-rel{
    margin-top:48px;
    padding:32px 22px;
    border-radius:16px;
  }
  .ml-rel-actions{ flex-direction:column }
  /* Los botones pasan a ser flex al llevar dibujo, y `text-align` ya no centra
     nada: apilados y estirados hay que centrar el contenido con el eje. */
  .ml-rel a.ml-rel-btn{ text-align:center; justify-content:center }
}

@media (prefers-reduced-motion:reduce){
  .ml-rel .ml-rel-card,
  .ml-rel .ml-rel-thumb,
  .ml-rel a.ml-rel-btn{ transition:none }
  .ml-rel .ml-rel-card:hover,
  .ml-rel a.ml-rel-btn:hover{ transform:none }
  .ml-rel .ml-rel-card:hover .ml-rel-thumb{ transform:none }
}