/* 100cimas · Ficha de cima ------------------------------------------------ */

.cima-ficha {
	--cf-bg: #FAFAF7;
	--cf-surface: #FFFFFF;
	--cf-ink: #1B2420;
	--cf-muted: #55605A;
	--cf-line: #E3E6E1;
	--cf-soft: #EEF1ED;
	--cf-softer: #F4F6F2;
	--cf-accent: #2F5D46;
	--cf-accent-dark: #1E3D2E;
	--cf-accent-tint: #E7EFE9;
	--cf-mid: #A9C4B1;
	--cf-warm-bg: #FFF3EA;
	--cf-warm-line: #F1CDB2;
	--cf-warm-ink: #7A3410;
	--cf-red-bg: #FDECEC;
	--cf-red-line: #F2C4C4;
	--cf-red-ink: #8E1F1F;
	--cf-radius: 12px;
	--cf-radius-lg: 16px;
	--cf-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--cf-body: 'Atkinson Hyperlegible', system-ui, sans-serif;

	background: var(--cf-bg);
	color: var(--cf-ink);
	font-family: var(--cf-body);
	font-size: 18px;
	line-height: 1.6;
	padding-bottom: 48px;
}

.cima-ficha *,
.cima-ficha *::before,
.cima-ficha *::after { box-sizing: border-box; }

.cima-ficha a { color: var(--cf-accent); }
.cima-ficha a:hover { color: var(--cf-accent-dark); }
.cima-ficha a:focus-visible,
.cima-ficha summary:focus-visible,
.cima-ficha button:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 2px; border-radius: 4px; }

.cima-ficha p { margin: 0; }
.cima-ficha img { max-width: 100%; height: auto; display: block; }

.cf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Tipografía */
.cima-ficha .cf-title,
.cima-ficha .cf-h2,
.cima-ficha .cf-h3,
.cima-ficha .cf-h4 { font-family: var(--cf-display); color: inherit; line-height: 1.15; margin: 0; letter-spacing: normal; text-transform: none; }
.cima-ficha .cf-h2 { font-size: 34px; font-weight: 800; }
.cima-ficha .cf-h3 { font-size: 23px; font-weight: 600; }
.cima-ficha .cf-h4 { font-size: 20px; font-weight: 600; }
.cf-muted { color: var(--cf-muted); }
.cf-small { font-size: 15px; }

.cf-prose { max-width: 68ch; display: flex; flex-direction: column; gap: 12px; }
.cf-prose p, .cf-prose ul, .cf-prose ol { margin: 0; }
.cf-prose ul, .cf-prose ol { padding-left: 24px; }
.cf-prose li + li { margin-top: 6px; }
.cf-prose--card { max-width: none; }

/* Migas */
.cf-crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 20px; padding-bottom: 16px; font-size: 16px; color: var(--cf-muted); }

/* Cabecera */
.cf-hero { position: relative; border-radius: var(--cf-radius-lg); overflow: hidden; min-height: 380px; background: #6E8F78; display: flex; align-items: flex-end; }
.cf-hero__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.cf-hero--empty { background: linear-gradient(180deg, #A9BFB0 0%, #3F6550 100%); }
.cf-hero__overlay { position: relative; width: 100%; padding: 32px; background: linear-gradient(to top, rgba(18, 30, 24, 0.85), rgba(18, 30, 24, 0)); }
.cima-ficha .cf-title { color: #FFFFFF; font-size: clamp(40px, 7vw, 64px); font-weight: 800; letter-spacing: -1.5px; }
.cf-lead { color: #FFFFFF; font-size: 21px; max-width: 640px; margin-top: 8px !important; }

/* Etiquetas */
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.cf-section .cf-chips { margin: 0; }
.cf-chip { background: var(--cf-accent-tint); color: var(--cf-accent-dark); padding: 6px 14px; border-radius: 999px; font-size: 16px; }
.cf-chip--light { background: #FFFFFF; color: var(--cf-ink); font-weight: 700; font-size: 15px; padding: 4px 12px; }
.cf-chip--outline { background: transparent; border: 1.5px solid var(--cf-mid); }

/* Datos clave */
.cf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; }
.cf-stat { background: var(--cf-surface); border: 1px solid var(--cf-line); border-radius: var(--cf-radius); padding: 16px 18px; margin: 0; }
.cf-stat dt { font-size: 15px; color: var(--cf-muted); font-weight: 400; }
.cf-stat dd { margin: 0; font-family: var(--cf-display); font-weight: 800; font-size: 30px; line-height: 1.2; }
.cf-stat--facil { background: var(--cf-accent-tint); border-color: #C6D8CB; }
.cf-stat--facil dt, .cf-stat--facil dd { color: var(--cf-accent-dark); }
.cf-stat--moderada { background: var(--cf-warm-bg); border-color: var(--cf-warm-line); }
.cf-stat--moderada dt, .cf-stat--moderada dd { color: var(--cf-warm-ink); }
.cf-stat--exigente { background: var(--cf-red-bg); border-color: var(--cf-red-line); }
.cf-stat--exigente dt, .cf-stat--exigente dd { color: var(--cf-red-ink); }

/* Fila de 5: Altitud + MIDE (medio, itinerario, desplazamiento, esfuerzo) */
.cf-stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cf-stat--mide dd { display: flex; flex-direction: column; gap: 8px; }
.cf-stat__val small { font-size: 0.55em; font-weight: 600; color: var(--cf-muted); margin-left: 2px; }
.cf-stat--mide .cf-mide__bars { margin: 0; }
.cf-stats__legend { margin-top: 8px !important; }
@media (max-width: 900px) {
	.cf-stats--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cf-stats--five .cf-stat--alt { grid-column: 1 / -1; }
}

/* Índice */
.cf-tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0 0 12px; border-bottom: 1px solid var(--cf-line); }
.cf-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--cf-soft); color: var(--cf-ink) !important; text-decoration: none; font-size: 16px; }
.cf-tabs a:hover { background: var(--cf-ink); color: #FFFFFF !important; }

/* Estructura */
/*
 * Escritorio (≥ 968 px): contenido + columna lateral de 320 px.
 * La publicidad se queda fija al hacer scroll para no dejar la columna vacía.
 *
 * Móvil y tablet (< 968 px): las dos columnas se "deshacen" y todos los bloques se
 * intercalan en una sola columna según los valores de "order" (ver más abajo).
 */

/* The7 pone overflow: hidden en #page, lo que impide la publicidad fija. "clip" recorta igual sin romperla. */
#page:has(.cima-ficha) { overflow: clip; }
.cf-layout { display: flex; flex-direction: column; gap: 40px; padding-top: 28px; }
.cf-main { min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.cf-aside { min-width: 0; display: flex; flex-direction: column; gap: 24px; }

@media (min-width: 968px) {
	.cf-layout { flex-direction: row; align-items: stretch; }
	.cf-main { flex: 1 1 auto; }
	.cf-aside { flex: 0 0 320px; }

	/* El clima en el lateral: título más pequeño y meses en 2 filas de 6 */
	.cf-aside #clima { gap: 12px; }
	.cima-ficha .cf-aside #clima .cf-h2 { font-size: 22px; }
	.cf-aside #clima .cf-card { padding: 18px; gap: 14px; }
	.cf-aside .cf-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cf-aside .cf-legend { flex-direction: column; gap: 6px; }
	.cf-aside .cf-facts div { flex-direction: column; gap: 2px; }
	.cf-aside .cf-facts dd { text-align: left; }
}

/* Publicidad fija al hacer scroll, solo si cabe entera en pantalla */
@media (min-width: 968px) and (min-height: 860px) {
	.cf-ads { position: sticky; top: calc(var(--cf-sticky-top, 96px) + var(--wp-admin--admin-bar--height, 0px)); }
}

@media (max-width: 967.98px) {
	.cf-main, .cf-aside { display: contents; }

	/* Orden en móvil. Para mover los patrocinadores, cambia el número de .cf-ads. */
	#explicacion     { order: 1; }
	#ruta-aerea      { order: 2; }
	.cf-ads          { order: 3; } /* Patrocinadores tras el vídeo */
	#cima-3d         { order: 4; }
	#tener-en-cuenta { order: 5; }
	.cf-side-map     { order: 6; }
	#seguridad       { order: 7; }
	.cf-verified     { order: 8; }

	/* En tablet los banners van en fila para no dejar huecos a los lados */
	.cima-ficha .cf-ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-items: center; align-items: start; gap: 20px; }

	/* Los huecos libres ("Quiero anunciarme") ocupan solo lo necesario; los banners reales mantienen 320 × 200 */
	.cima-ficha .cf-ad__box--empty { aspect-ratio: auto; }
}

/* Otras cimas cerca: a ancho completo bajo las dos columnas */
.cf-near-section { margin-top: 48px; }
.cf-section { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; }

.cf-grid { display: grid; gap: 12px; }
.cf-grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cf-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cf-grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* Tarjetas */
.cf-card { background: var(--cf-surface); border: 1px solid var(--cf-line); border-radius: var(--cf-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cf-card--sm { border-radius: var(--cf-radius); padding: 18px; gap: 6px; font-size: 16px; }
.cf-card--sm p { margin: 0; }
.cf-card--flush { padding: 0; gap: 0; overflow: hidden; }
.cf-card__title { display: flex; align-items: center; gap: 10px; color: var(--cf-accent); }
.cf-card__title strong { color: var(--cf-ink); }

/* Ruta */
.cf-route__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cf-route__head p { margin-top: 4px; }
.cf-badge-dark { background: var(--cf-ink); color: #FFFFFF; font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.cf-route__stats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cf-route__stats li { background: var(--cf-softer); border-radius: 8px; padding: 6px 12px; font-size: 16px; }
.cf-embed { border-radius: var(--cf-radius); overflow: hidden; background: var(--cf-softer); }
/* Wikiloc reserva ~220 px para título, perfil y datos: 520 px de iframe = 300 px de mapa */
.cf-embed iframe { display: block; width: 100%; height: 520px; border: 0; }

/* Mapa 3D de la cima */
.cf-map3d-block { display: flex; flex-direction: column; gap: 10px; }
.cf-map3d { position: relative; width: 100%; height: 440px; border-radius: var(--cf-radius); overflow: hidden; background: linear-gradient(180deg, #CFE0EC 0%, #EEF3F6 60%, #DCE6DD 100%); }
.cf-map3d__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cf-muted); font-size: 15px; }
.cf-map3d.is-ready .cf-map3d__loading { display: none; }
.cf-map3d .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.cf-map3d__star { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); display: flex; align-items: center; justify-content: center; }
.cf-map3d__star:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; border-radius: 50%; }
.cf-map3d .maplibregl-popup-content { font-family: var(--cf-body); font-size: 15px; font-weight: 700; padding: 8px 12px; }

/* Aviso de responsabilidad */
.cf-disclaimer { margin-top: 48px; padding-top: 24px; padding-bottom: 8px; border-top: 1px solid var(--cf-line); color: var(--cf-muted); font-size: 14px; line-height: 1.55; display: flex; flex-direction: column; gap: 8px; }
.cima-ficha .cf-disclaimer .cf-h4 { font-size: 16px; color: var(--cf-ink); }
.cf-disclaimer p { margin: 0; max-width: 90ch; }

/* Vídeo aéreo: siempre 4:3 */
.cf-video-block { display: flex; flex-direction: column; gap: 12px; }
.cf-video { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--cf-radius); overflow: hidden; background: #111; }
.cf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* MIDE */
.cf-mide { display: flex; flex-direction: column; gap: 12px; }
.cf-mide__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.cf-mide__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cf-mide__item { border: 1px solid var(--cf-line); border-radius: var(--cf-radius); padding: 14px 16px; }
.cf-mide__row { display: flex; justify-content: space-between; align-items: center; }
.cf-mide__val { font-weight: 700; }
.cf-mide__bars { display: flex; gap: 6px; margin: 8px 0 6px; }
.cf-mide__bars span { flex: 1; height: 8px; border-radius: 4px; background: #DCE2DC; }
.cf-mide__bars span.is-on { background: var(--cf-accent); }

/* Avisos y botones */
.cf-alert { display: flex; gap: 12px; align-items: flex-start; background: var(--cf-warm-bg); border: 1px solid var(--cf-warm-line); color: var(--cf-warm-ink); border-radius: var(--cf-radius); padding: 14px 18px; font-size: 16px; }
.cf-alert svg { flex: none; margin-top: 2px; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cima-ficha .cf-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 17px; }
.cima-ficha .cf-btn--primary { background: var(--cf-accent); color: #FFFFFF; }
.cima-ficha .cf-btn--primary:hover { background: var(--cf-accent-dark); color: #FFFFFF; }
.cima-ficha .cf-btn--outline { background: var(--cf-surface); color: var(--cf-ink); border: 1.5px solid var(--cf-ink); }
.cima-ficha .cf-btn--outline:hover { background: var(--cf-ink); color: #FFFFFF; }

/* Rutas alternativas */
.cf-alt { background: var(--cf-surface); border: 1px solid var(--cf-line); border-radius: var(--cf-radius); }
.cf-alt summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px 20px; cursor: pointer; list-style: none; min-height: 44px; }
.cf-alt summary::-webkit-details-marker { display: none; }
.cf-alt summary::after { content: '+'; font-weight: 700; font-size: 22px; line-height: 1; color: var(--cf-accent); }
.cf-alt[open] summary::after { content: '−'; }
.cf-alt__name { font-weight: 700; flex: 1 1 auto; }
.cf-alt .cf-card { border: 0; border-top: 1px solid var(--cf-line); border-radius: 0 0 var(--cf-radius) var(--cf-radius); }

/* Meses */
.cf-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; text-align: center; font-size: 14px; font-weight: 700; }
.cf-months li { padding: 10px 0; border-radius: 6px; }
.cf-months--ideal { background: var(--cf-accent); color: #FFFFFF; }
.cf-months--prec { background: var(--cf-mid); color: var(--cf-ink); }
.cf-months--evitar { background: var(--cf-soft); color: var(--cf-muted); }
.cf-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 15px; color: var(--cf-muted); }
.cf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cf-dot { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.cf-dot--ideal { background: var(--cf-accent); }
.cf-dot--prec { background: var(--cf-mid); }
.cf-dot--evitar { background: var(--cf-soft); border: 1px solid #C9D0C9; }

/* Listas de datos */
.cf-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 16px; }
.cf-facts div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--cf-soft); padding-bottom: 8px; }
.cf-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.cf-facts dt { color: var(--cf-muted); font-weight: 400; }
.cf-facts dd { margin: 0; text-align: right; }
.cf-facts--pad { padding: 16px 20px; }

.cf-checklist, .cf-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cf-checklist { list-style: none; padding: 0; }
.cf-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.cf-checklist svg { color: var(--cf-accent); flex: none; margin-top: 3px; }
.cf-list { padding-left: 20px; }

/* Emergencias */
.cf-sos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--cf-red-bg); border: 1px solid var(--cf-red-line); border-radius: var(--cf-radius); padding: 16px 20px; color: #5C1414; }
.cf-sos__num { font-family: var(--cf-display); font-weight: 800; font-size: 34px; color: var(--cf-red-ink); }
.cf-sos p { flex: 1 1 260px; }

/* Galería */
.cf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cf-gallery figure { margin: 0; }
.cf-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.cf-gallery figcaption { font-size: 13px; color: var(--cf-muted); margin-top: 4px; }

/* Cimas cercanas */
.cima-ficha .cf-near { padding: 0; gap: 0; overflow: hidden; text-decoration: none; color: var(--cf-ink); border-radius: var(--cf-radius); }
.cf-near:hover { border-color: var(--cf-accent); }
.cf-near__img { height: 120px; background: #C9D8CD; }
.cf-near__img img { width: 100%; height: 120px !important; object-fit: cover; }
.cf-near__body { padding: 14px 16px; display: flex; flex-direction: column; }
.cf-near__body strong { font-size: 19px; }

/* Lateral */
.cf-map { display: block; width: 100%; height: 240px; border: 0; }

/* Publicidad: huecos de 320 × 200 px */
.cf-ads { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cf-ad { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.cf-ad__label { font-size: 13px; color: var(--cf-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.cima-ficha .cf-ad__box { display: block; width: 100%; aspect-ratio: 320 / 200; border-radius: 10px; overflow: hidden; background: var(--cf-soft); text-decoration: none; }
.cima-ficha .cf-ad__img { width: 100%; height: 100% !important; object-fit: cover; }
.cima-ficha a.cf-ad__box:hover .cf-ad__img { opacity: 0.92; }
.cima-ficha .cf-ad__box--empty { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; border: 2px dashed #B9C3BB; background: var(--cf-bg); color: var(--cf-ink); font-size: 15px; line-height: 1.4; }
.cima-ficha .cf-ad__box--empty strong { font-size: 17px; }
.cima-ficha .cf-ad__box--empty span:not(.cf-link) { color: var(--cf-muted); }
.cima-ficha .cf-ad__box--empty:hover { border-color: var(--cf-accent); }
.cf-ad__box--adsense { aspect-ratio: auto; height: 200px; background: transparent; display: flex; justify-content: center; }
.cf-link { font-weight: 700; color: var(--cf-accent); margin-top: 4px; }
.cf-verified { padding: 0 4px; }

.cima-ficha .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
	.cima-ficha { font-size: 17px; }
	.cf-wrap { padding: 0 16px; }
	.cf-hero { min-height: 300px; }
	.cf-hero__overlay { padding: 24px 20px; }
	.cf-lead { font-size: 18px; }
	.cima-ficha .cf-h2 { font-size: 28px; }
	.cf-card { padding: 18px; }
	.cf-months { font-size: 12px; }
	.cf-map3d { height: 360px; }

	/* Datos clave compactos: altitud a lo ancho y MIDE en 2 × 2 */
	.cf-stats { gap: 8px; }
	.cf-stat { padding: 12px 14px; }
	.cf-stat dt { font-size: 14px; }
	.cf-stat dd { font-size: 22px; }

	/* MIDE en 2 × 2 */
	.cf-mide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.cf-mide__item { padding: 12px; }

	/* Índice de secciones en una sola línea deslizable */
	.cf-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
	.cf-tabs::-webkit-scrollbar { display: none; }
	.cf-tabs a { white-space: nowrap; }
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.cima-ficha) { scroll-behavior: smooth; }
}

/* =========================================================================
 * Listado de cimas · rejilla al estilo "Portfolio grid – classic" de The7
 * Medidas tomadas de la página de referencia: 4 columnas, 50 px de separación,
 * imagen 1:1, título 20/26 px, categoría 13 px en cursiva, extracto 15/22,5 px.
 * ====================================================================== */

.cima-listado {
	--cl-font: 'Atkinson Hyperlegible', system-ui, sans-serif; /* Para usar la de The7: 'Roboto', Helvetica, Arial, sans-serif */
	--cl-bg: #F7F7F7;
	--cl-heading: #333333;
	--cl-text: #8B8D94;
	--cl-soft: #ADAFB3;
	--cl-accent: #2F5D46;
	--cl-line: rgba(51, 51, 51, 0.1);

	background: var(--cl-bg);
	color: var(--cl-text);
	font-family: var(--cl-font);
	font-size: 16px;
	line-height: 1.6;
}
.cima-listado *, .cima-listado *::before, .cima-listado *::after { box-sizing: border-box; }
.cima-listado a:focus-visible { outline: 3px solid var(--cl-accent); outline-offset: 3px; }

/* Banda de título centrada */
.cl-title-band { background: rgba(0, 0, 0, 0.04); min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.cima-listado .cl-title { margin: 0; font-family: var(--cl-font); font-size: 34px; line-height: 44px; font-weight: 700; color: var(--cl-heading); letter-spacing: normal; text-transform: none; }
.cl-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; line-height: 24px; color: var(--cl-soft); }
.cl-crumbs li + li::before { content: '›'; margin: 0 8px; }
.cima-listado .cl-crumbs a { color: var(--cl-soft); text-decoration: none; }
.cima-listado .cl-crumbs a:hover { color: var(--cl-heading); }

/* Contenedor */
.cl-main { max-width: 1400px; margin: 0 auto; padding: 70px 50px; }
.cl-intro { max-width: 760px; margin: 0 auto 50px; text-align: center; font-size: 17px; }
.cl-intro p { margin: 0 0 10px; }
.cl-empty { text-align: center; font-size: 17px; }

/* Rejilla */
.cl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px; }
.cl-item { margin: 0; padding: 0; background: transparent; }

/* Imagen cuadrada con capa al pasar el ratón */
.cima-listado .cl-thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #E4E6E3; }
.cima-listado .cl-thumb img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.cl-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; }
.cl-thumb__icon { position: absolute; top: 50%; left: 50%; z-index: 1; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.8); opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; }
.cl-item:hover .cl-thumb::after,
.cl-item:focus-within .cl-thumb::after { opacity: 1; }
.cl-item:hover .cl-thumb__icon,
.cl-item:focus-within .cl-thumb__icon { opacity: 1; transform: scale(1); }

/* Texto de la tarjeta */
.cl-entry { padding: 25px 0 0; text-align: left; }
.cima-listado .cl-entry__title { margin: 0 0 5px; font-family: var(--cl-font); font-size: 20px; line-height: 26px; font-weight: 700; color: var(--cl-heading); letter-spacing: normal; text-transform: none; }
.cima-listado .cl-entry__title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.cima-listado .cl-entry__title a:hover { color: var(--cl-accent); }
.cl-entry__meta { margin: 0 0 15px; font-size: 13px; line-height: 18.2px; font-style: italic; color: var(--cl-soft); }
.cl-entry__excerpt { margin: 0 0 10px; font-size: 15px; line-height: 22.5px; color: var(--cl-text); }
.cima-listado .cl-entry__more { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 13px; line-height: 17px; font-weight: 700; color: var(--cl-heading); text-decoration: none; }
.cima-listado .cl-entry__more:hover { color: var(--cl-accent); }

/* Cargar más */
.cl-loadmore { margin-top: 50px; text-align: center; }
.cima-listado .cl-loadmore a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 32px; border: 2px solid var(--cl-line); color: var(--cl-heading); font-size: 15px; text-decoration: none; transition: border-color 0.2s ease; }
.cima-listado .cl-loadmore a:hover { border-color: var(--cl-heading); }
.cima-listado .cl-loadmore a[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

@media (max-width: 1200px) {
	.cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.cl-main { padding: 50px 30px; }
	.cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
}
@media (max-width: 560px) {
	.cl-title-band { min-height: 150px; }
	.cima-listado .cl-title { font-size: 28px; line-height: 36px; }
	.cl-main { padding: 40px 20px; }
	.cl-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.cl-thumb::after, .cl-thumb__icon { transition: none; }
}