/*
 * Recursos online: color gris azulado (como la cabecera actual de la sección), rejilla de tarjetas
 * con la foto y el icono de su categoría, y barra de categorías deslizable.
 */
.tab-recursos { --res: #435464; --res-soft: #eef1f4; }
.tab-recursos > header { background: var(--res); }
.tab-recursos .info-button, .tab-recursos .event-more-link { background: var(--res); }
.tab-recursos .place-event-copy small { color: #647286; }

/* Barra de categorías. */
#res-controls { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 16px; background: #fff; border-bottom: 1px solid #e3e7eb; flex-shrink: 0; }
#res-controls::-webkit-scrollbar { display: none; }
#res-controls a { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 11px 4px 4px; border-radius: 99px; background: var(--res-soft); color: var(--res); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
#res-controls a:first-child { padding-left: 12px; }
#res-controls a[aria-current=page] { background: var(--res); color: #fff; }
#res-controls .res-icon { width: 26px; height: 26px; }

/* Listado. */
.res-lead { padding: 18px 0 6px; }
.res-lead h1 { margin: 0; font-size: 27px; line-height: 1.15; }
.res-lead p { margin: 6px 0 0; font-size: 17px; color: #647286; }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 14px 0; }
.res-card[hidden] { display: none; }
.res-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.res-image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--res-soft); }
.res-image img, .res-image .cover-empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res-badge { position: absolute; top: 8px; left: 8px; display: block; line-height: 0; }
.res-badge .res-icon { width: 34px; height: 34px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3)); }
.res-copy { display: flex; flex-direction: column; gap: 3px; padding: 8px 2px 0; }
.res-copy small { font-size: 12px; font-weight: 700; color: #7a8796; text-transform: uppercase; letter-spacing: .3px; }
.res-copy strong { font-size: 16px; line-height: 1.2; }
.res-meta { display: inline-block; font-size: 13px; color: var(--res); }
.res-copy .res-meta { margin-top: 2px; }
.res-more { margin-top: 4px; }

/* Ficha. */
.res-hero { position: relative; margin: 0 -16px; height: 260px; overflow: hidden; background: var(--res-soft); }
.res-hero-image, .res-hero .cover-empty { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-hero .res-badge { top: 14px; left: 14px; }
.res-hero .res-badge .res-icon { width: 48px; height: 48px; }
.res-intro { padding: 18px 0 4px; }
.res-what { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #7a8796; text-transform: uppercase; letter-spacing: .3px; }
.res-intro h1 { margin: 0 0 8px; font-size: 29px; line-height: 1.12; }
.res-intro .res-meta { margin-bottom: 14px; padding: 4px 10px; border-radius: 99px; background: var(--res-soft); font-weight: 700; }
.res-access { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0; padding: 14px; border-radius: 12px; background: var(--res); color: #fff; font-size: 18px; font-weight: 900; text-transform: uppercase; text-decoration: none; }
.res-text iframe { max-width: 100%; }
.res-text .wp-embedded-content, .res-text iframe[src*="youtube"], .res-text iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }

@media (min-width: 600px) {
	.res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	#res-controls { padding-left: var(--gutter); padding-right: var(--gutter); }
	.res-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
	.res-copy strong { font-size: 18px; }
	.res-detail { max-width: 820px; margin: 0 auto; }
	.res-hero { margin: 0; height: 420px; border-radius: 18px; }
}

/* Guardar: sobre la foto, arriba a la derecha. */
.res-card { position: relative; }
.res-card .res-save { top: 8px; right: 8px; bottom: auto; width: 38px; height: 38px; background: rgba(255, 255, 255, .92); }
.res-card .res-save .icon { width: 20px; height: 20px; }