/* =============================================================================
   /articulos — la sección de contenidos (pedida por el socio de Sebas para
   SEO: «de ahí irían enlaces a lo que estáis montando, además nos ayudarían
   a explicarlo»). Tokens de la casa; el artículo se lee a 68 caracteres.
   ========================================================================== */

.art-hero { padding: 44px 0 6px; max-width: 760px; }
.art-hero__ante {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--verde-osc); margin: 0 0 10px;
}
.art-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; }
.art-hero__bajada { color: var(--texto); font-size: 1.06rem; max-width: 58ch; margin: 14px 0 0; }

/* --- el índice: tarjetas ------------------------------------------------- */
.art-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 30px 0 60px; }
.art-carta {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--papel); border-radius: 16px; overflow: hidden;
  box-shadow: var(--sombra-quieta); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.art-carta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.art-carta img { width: 100%; height: 190px; object-fit: cover; display: block; }
.art-carta__cuerpo { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; }
.art-carta h2 { font-size: 1.15rem; line-height: 1.3; margin: 0; color: var(--titulo); }
.art-carta p { margin: 0; color: var(--texto); font-size: .93rem; line-height: 1.55; }
.art-carta__lee { color: var(--teal); font-weight: 700; font-size: .88rem; }

/* --- el artículo ---------------------------------------------------------- */
.articulo { max-width: 46rem; margin: 0 auto; padding: 36px 0 30px; }
.articulo__ante {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--verde-osc); margin: 0 0 10px;
}
.articulo h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.12; margin: 0 0 14px; }
.articulo__meta { color: var(--texto); font-size: .88rem; margin: 0 0 24px; }
.articulo__foto { width: 100%; border-radius: 14px; margin: 0 0 26px; display: block; }
.articulo h2 { font-size: 1.35rem; margin: 34px 0 12px; }
.articulo p, .articulo li { color: #3c463c; font-size: 1.02rem; line-height: 1.7; }
.articulo p { margin: 0 0 16px; }
.articulo ul, .articulo ol { margin: 0 0 16px; padding-left: 22px; }
.articulo li { margin-bottom: 6px; }
.articulo a { color: var(--teal); font-weight: 600; }
.articulo b, .articulo strong { color: var(--titulo); }

/* la caja de acción dentro del texto: el enlace a la herramienta */
.art-cta {
  display: grid; gap: 4px;
  background: #eef6e9; border: 1.5px solid var(--verde);
  border-radius: 14px; padding: 18px 20px; margin: 26px 0;
  text-decoration: none;
}
.art-cta b { color: var(--verde-osc); font-size: 1.05rem; }
.art-cta span { color: var(--texto); font-size: .92rem; }

/* seguir leyendo */
.art-sigue { border-top: 1.5px solid var(--linea); margin: 44px 0 60px; padding-top: 22px; }
.art-sigue h2 { font-size: 1.1rem; margin: 0 0 12px; }
.art-sigue a { display: block; color: var(--teal); font-weight: 600; margin-bottom: 8px; text-decoration: none; }
.art-sigue a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .art-lista { grid-template-columns: 1fr; }
}