/* TFH Galería de Proyectos */
.tfh-galeria {
	--tfh-rojo: #e60023;
	--tfh-acero: #2b3035;
	--tfh-gris: #6b7278;
	--tfh-linea: #d9dcdf;
	--tfh-fondo: #f3f4f5;
	--tfh-escena: #1c1f22;
	max-width: 1180px;
	margin: 0 auto;
	color: var(--tfh-acero);
	border-top: 1px solid var(--tfh-linea);
}

.tfh-galeria *,
.tfh-galeria *::before,
.tfh-galeria *::after { box-sizing: border-box; }

/* ---------- Acordeón ---------- */
.tfh-cat { border-bottom: 1px solid var(--tfh-linea); scroll-margin-top: 90px; }

.tfh-galeria .tfh-cat__titulo { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }

.tfh-galeria .tfh-cat__boton {
	display: grid;
	grid-template-columns: 64px 1fr auto 28px;
	align-items: center;
	gap: 0 22px;
	width: 100%;
	margin: 0;
	padding: 18px 20px 18px 24px;
	background: #fff;
	border: 0;
	border-left: 4px solid transparent;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.tfh-galeria .tfh-cat__boton:hover { background: var(--tfh-fondo); }
.tfh-galeria .tfh-cat__boton:focus-visible { outline: 3px solid var(--tfh-rojo); outline-offset: -3px; }
.tfh-cat.is-open .tfh-cat__boton { border-left-color: var(--tfh-rojo); background: var(--tfh-fondo); }

.tfh-cat__logo { display: block; width: 64px; height: 64px; }
.tfh-cat__logo img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; }

.tfh-cat__textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tfh-cat__nombre { font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: var(--tfh-acero); }
.tfh-cat.is-open .tfh-cat__nombre { color: var(--tfh-rojo); }
.tfh-cat__intro { font-size: .95rem; font-weight: 400; line-height: 1.45; color: var(--tfh-gris); max-width: 62ch; }

.tfh-cat__num { font-size: .9rem; color: var(--tfh-gris); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tfh-cat__flecha { position: relative; width: 28px; height: 28px; }
.tfh-cat__flecha::before {
	content: "";
	position: absolute;
	top: 7px; left: 9px;
	width: 10px; height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .25s ease, top .25s ease;
}
.tfh-cat.is-open .tfh-cat__flecha::before { transform: rotate(-135deg); top: 12px; }

.tfh-cat__panel { padding: 0 0 28px; background: var(--tfh-fondo); }
.tfh-cat__panel[hidden] { display: none; }
.tfh-cat.is-open .tfh-cat__panel { animation: tfh-abrir .35s ease both; }
@keyframes tfh-abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Visor ---------- */
.tfh-visor { outline: none; padding: 0 24px; }
.tfh-visor:focus-visible .tfh-visor__escena { outline: 3px solid var(--tfh-rojo); outline-offset: 2px; }

.tfh-visor__escena {
	position: relative;
	aspect-ratio: 16 / 10;
	max-height: 68vh;
	width: 100%;
	background: var(--tfh-escena);
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}
.tfh-visor__foto {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
.tfh-visor__foto.is-activa { opacity: 1; pointer-events: auto; }
.tfh-visor__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	cursor: zoom-in;
}

.tfh-galeria .tfh-visor__nav,
.tfh-galeria .tfh-visor__ampliar {
	position: absolute;
	z-index: 2;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(28, 31, 34, .72);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
	box-shadow: none;
}
.tfh-galeria .tfh-visor__nav { top: 50%; width: 48px; height: 64px; transform: translateY(-50%); }
.tfh-visor__nav--prev { left: 0; }
.tfh-visor__nav--next { right: 0; }
.tfh-galeria .tfh-visor__nav:hover,
.tfh-galeria .tfh-visor__ampliar:hover { background: var(--tfh-rojo); }
.tfh-galeria .tfh-visor__nav:focus-visible,
.tfh-galeria .tfh-visor__ampliar:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.tfh-visor__nav::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 12px; height: 12px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.tfh-visor__nav--prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.tfh-visor__nav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }

.tfh-galeria .tfh-visor__ampliar { top: 0; right: 0; width: 44px; height: 44px; }
.tfh-visor__ampliar svg { display: block; margin: auto; }

.tfh-visor__pie {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 18px;
	padding: 16px 0 18px;
}
.tfh-visor__contador {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--tfh-gris);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tfh-visor__actual { color: var(--tfh-rojo); }
.tfh-galeria .tfh-visor__texto { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tfh-acero); max-width: 75ch; }

.tfh-galeria .tfh-visor__miniaturas {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}
.tfh-visor__miniaturas li { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.tfh-visor__miniaturas li::before { display: none; }
.tfh-galeria .tfh-visor__mini {
	display: block;
	width: 120px;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: var(--tfh-escena);
	opacity: .55;
	cursor: pointer;
	transition: opacity .2s ease, border-color .2s ease;
	box-shadow: none;
}
.tfh-galeria .tfh-visor__mini:hover { opacity: .9; }
.tfh-galeria .tfh-visor__mini.is-activa { opacity: 1; border-bottom-color: var(--tfh-rojo); }
.tfh-galeria .tfh-visor__mini:focus-visible { outline: 3px solid var(--tfh-rojo); outline-offset: 2px; opacity: 1; }
.tfh-visor__mini img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }

/* ---------- Ampliada (pantalla completa) ---------- */
.tfh-ico-cerrar { display: none !important; }
.tfh-visor__leyenda { display: none; }

html.tfh-sin-scroll,
html.tfh-sin-scroll body { overflow: hidden; }

.tfh-galeria .tfh-visor.is-ampliado {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	height: 100dvh;
	margin: 0;
	padding: 0;
	background: var(--tfh-escena);
}
.tfh-visor.is-ampliado .tfh-visor__escena {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: auto;
}
.tfh-visor.is-ampliado .tfh-visor__foto img { cursor: zoom-out; }
.tfh-visor.is-ampliado .tfh-visor__pie,
.tfh-visor.is-ampliado .tfh-visor__miniaturas { display: none; }
.tfh-visor.is-ampliado .tfh-ico-ampliar { display: none !important; }
.tfh-visor.is-ampliado .tfh-ico-cerrar { display: block !important; }
.tfh-galeria .tfh-visor.is-ampliado .tfh-visor__ampliar { width: 52px; height: 52px; }

.tfh-visor.is-ampliado .tfh-visor__leyenda {
	flex: none;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 14px max(24px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
	background: #121416;
	border-top: 3px solid var(--tfh-rojo);
	color: #fff;
}
.tfh-visor__leyenda-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: #fff;
}
.tfh-visor__leyenda-logo:empty { display: none; }
.tfh-visor__leyenda-logo img { display: block; width: 44px; height: 44px; object-fit: contain; margin: 0; }
.tfh-visor__leyenda-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tfh-visor__leyenda-proyecto { font-size: .95rem; font-weight: 700; line-height: 1.2; color: #ff4d64; }
/* Capa a la que se mueve el visor al ampliarlo (evita que el tema lo recorte) */
.tfh-galeria.tfh-galeria--capa { max-width: none; margin: 0; border: 0; }
.tfh-visor__leyenda-texto { font-size: 1.05rem; line-height: 1.45; color: #f1f2f3; max-width: 90ch; }
.tfh-visor__leyenda-num { font-size: 1.4rem; font-weight: 700; color: #9aa1a7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tfh-visor__leyenda-actual { color: #fff; }

/* ---------- Móvil ---------- */
@media (max-width: 700px) {
	.tfh-galeria .tfh-cat__boton {
		grid-template-columns: 48px 1fr 24px;
		gap: 0 14px;
		padding: 14px 12px 14px 14px;
	}
	.tfh-cat__logo { width: 48px; height: 48px; }
	.tfh-cat__nombre { font-size: 1.1rem; }
	.tfh-cat__intro { font-size: .85rem; }
	.tfh-cat__num { display: none; }
	.tfh-visor { padding: 0; }
	.tfh-visor__escena { aspect-ratio: 4 / 3; }
	.tfh-galeria .tfh-visor__nav { width: 40px; height: 52px; }
	.tfh-visor__pie { padding: 12px 14px 14px; gap: 12px; }
	.tfh-visor__contador { font-size: 1.25rem; }
	.tfh-galeria .tfh-visor__texto { font-size: .92rem; }
	.tfh-galeria .tfh-visor__miniaturas { padding: 0 14px 6px; }
	.tfh-galeria .tfh-visor__mini { width: 88px; }
	.tfh-visor.is-ampliado .tfh-visor__leyenda { gap: 12px; padding-top: 10px; padding-left: 14px; padding-right: 14px; }
	.tfh-visor__leyenda-logo { width: 40px; height: 40px; }
	.tfh-visor__leyenda-logo img { width: 34px; height: 34px; }
	.tfh-visor__leyenda-proyecto { font-size: .75rem; }
	.tfh-visor__leyenda-texto { font-size: .92rem; }
	.tfh-visor__leyenda-num { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tfh-galeria *, .tfh-galeria *::before { transition: none !important; animation: none !important; }
	.tfh-galeria .tfh-visor__miniaturas { scroll-behavior: auto; }
}