/* Estilos compartidos para los artículos del blog de Viajeros Jardín.
   Complementan styles.css (paleta y tokens). */
.article-hero {
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  position: relative;
}
.article-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(19,66,55,.20), rgba(15,32,27,.80));
}
.article-hero .wrap { position: relative; z-index: 2; }
/* La regla global `nav{background:#fff!important}` de styles.css pinta de blanco
   el breadcrumb del hero. Lo dejamos transparente para que se lea sobre la foto. */
.article-hero nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.article-hero nav a { color: #fff !important; }

/* Botón "volver" del hero de los artículos */
.article-hero .hero-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff !important;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(4px);
  margin-bottom: .9rem;
  transition: background .2s ease;
}
.article-hero .hero-back:hover { background: rgba(255,255,255,.28); }

.prose { color: var(--ink); line-height: 1.75; }
.prose h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin: 2rem 0 .75rem; color: var(--ink); }
.prose h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin: 1.5rem 0 .5rem; color: var(--brand); }
.prose p { margin-bottom: 1rem; color: #3a423d; }
.prose ul { margin: 0 0 1rem 1.1rem; list-style: disc; }
.prose ol { margin: 0 0 1rem 1.2rem; list-style: decimal; }
.prose li { margin-bottom: .4rem; color: #3a423d; }
.prose a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; }
.prose strong { color: var(--ink); }
.prose .lead { font-size: 1.1rem; color: var(--stone); }

.tldr {
  background: #eef4f1;
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.tldr strong { color: var(--brand); }

.price-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.price-table th, .price-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid #ece9e1; }
.price-table th { background: #f1efe9; color: var(--ink); }
.price-table td:last-child { font-weight: 700; color: var(--accent-dark); white-space: nowrap; }

.cta-box {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; border-radius: 16px; padding: 1.75rem; text-align: center; margin: 2rem 0;
}
.cta-box a {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wa); color: #fff; padding: .75rem 1.5rem;
  border-radius: 12px; font-weight: 700; text-decoration: none; margin-top: .75rem;
}
.related-links { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 640px){ .related-links { grid-template-columns: 1fr 1fr; } }
.related-links a {
  display: block; background: #fff; border: 1px solid #ece9e1; border-radius: 10px;
  padding: .8rem 1rem; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: all .2s ease;
}
.related-links a:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }