/* ====== FILTROS ====== */
.recursos-filtros {
  text-align: center;
  margin: 2rem 0;
}
.recursos-filtros ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.recursos-filtros a {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  color: #333;
  background: #fff;
  transition: all .3s ease;
  text-decoration: none;
}
.recursos-filtros a:hover { background:#f5f5f5; border-color:#bbb; }
.recursos-filtros a.selected { background:#b89045; color:#fff; border-color:#b89045; }

/* ====== GRID (Isotope + fitRows) ====== */
.recursos-grid { position: relative; } /* contenedor de Isotope */
.recurso-item { width: 33.3333%; }     /* 3 columnas exactas */

/* Tarjeta (el margen crea el gap horizontal y vertical) */
.recurso-box {
  margin: 1rem;
  background: #fff;
  border: 1px solid #eee;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.recurso-box:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* Imagen apaisada 16:9 siempre */
.recurso-imagen { width:100%; aspect-ratio: 16 / 9; overflow:hidden; }
.recurso-imagen img { width:100%; height:100%; object-fit:cover; display:block; }

/* Contenido */
.recurso-contenido { padding: 1.2rem; flex-grow: 1; }
.recurso-contenido h3 { font-size:1.2rem; margin:0 0 .8rem; }
.recurso-contenido h3 a { color:#222; text-decoration:none; transition:color .3s ease; }
.recurso-contenido h3 a:hover { color:#0073aa; }
.recurso-extracto { font-size:.95rem; color:#666; line-height:1.5; }

/* ====== RESPONSIVE ====== */
@media (max-width: 991px) { .recurso-item { width: 50%; } }  /* 2 columnas */
@media (max-width: 600px) { .recurso-item { width: 100%; } } /* 1 columna */

.recurso-link {
  display: block;
  color: inherit;         /* mantiene el color de texto */
  text-decoration: none;  /* quita subrayado */
}

.recurso-link:hover .recurso-box {
  transform: scale(1.02); /* ejemplo: efecto hover */
  transition: transform 0.2s ease-in-out;
}



/* Vista single recursos de interés */


.single-recurso .recurso-hero {
  position: relative;
  margin-bottom: 2rem;
}
.single-recurso .recurso-hero__media {
   width: 100%;
  aspect-ratio: 16/9; /* mantiene proporción panorámica */
  overflow: hidden;
}
.single-recurso .recurso-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta sin deformar */
  display: block;
}
.single-recurso .recurso-hero__content {
  margin-top: 1.2rem;
}
.single-recurso .recurso-title {
  margin-bottom: .5rem;
  font-size: 2rem;
}
.single-recurso .recurso-terms {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.single-recurso .recurso-terms a {
  font-size: .9rem;
  background: #f0f0f0;
  padding: .25rem .6rem;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}
.single-recurso .btn.btn-airbnb {
  display: inline-block;
  background: #FF5A5F;
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.single-recurso .btn.btn-airbnb:hover {
  background: #e14a4f;
}
.single-recurso .recurso-content {
  margin-top: 2rem;
}

.recurso-backlink {
  text-align: right;
  margin-bottom: 1rem;
}

.recurso-backlink a {
  font-size: 0.9rem;
  color: #b89045;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}

.recurso-backlink a:hover {
  color: #b89045;
  text-decoration: underline;
}