/*
Theme Name: Freestyle House
Theme URI: https://freestylehouse.com
Author: Freestyle House
Author URI: https://freestylehouse.com
Description: Tema personalizado para el colectivo musical Freestyle House.
Version: 1.0.0
Text Domain: freestyle-house
*/

/* ================================
   VARIABLES
================================ */

:root {
	/* Paleta */
	--fh-black: #0D0D0D;
	--fh-black-pure: #000000;
	--fh-ink: #08090A;
	--fh-yellow: #F5C518;
	--fh-white: #FFFFFF;
	--fh-gray: #999999;
	--fh-gray-light: #AAAAAA;
	--fh-border: rgba(245, 197, 24, 0.15);
	--fh-hairline: rgba(255, 255, 255, 0.08);

	/* Tipografías */
	--fh-font-display: "Anton", "Arial Narrow", sans-serif;
	--fh-font-body: "Inter", sans-serif;
	--fh-font-mono: "JetBrains Mono", ui-monospace, monospace;

	/* Fuente manuscrita / brush del claim del hero.
	   Para sustituirla por una brush propia: declara un @font-face
	   y cambia únicamente el primer nombre de esta lista. */
	--fh-font-script: "Permanent Marker", "Segoe Script", "Bradley Hand", cursive;

	/* Sistema de medidas del shell (header + hero comparten proporción) */
	--fh-max-width: 1560px;
	--fh-page-padding: 32px;
	--fh-shell-max: 1760px;
	--fh-gutter-header: clamp(20px, 4vw, 58px);
	--fh-gutter-hero: clamp(24px, 8.2vw, 120px);
	--fh-header-h: 76px;

	/* Filtro del PNG del artista. Pon "none" para dejar la foto a color. */
	--fh-artist-filter: grayscale(1) contrast(1.12) brightness(0.96);
}



/* ================================
   RESET BASE
================================ */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background: var(--fh-black);
	color: var(--fh-white);
	font-family: "Inter", sans-serif;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
}

/* ================================
   TIPOGRAFÍAS
================================ */

.fh-font-display {
	font-family: "Anton", sans-serif;
}

.fh-font-body {
	font-family: "Inter", sans-serif;
}

.fh-font-mono {
	font-family: "JetBrains Mono", monospace;
}

/* ================================
   CONTENEDOR
================================ */

/* Contenedor general del sitio. Comparte margen lateral con el hero
   para que toda la página tenga el mismo ritmo editorial. */
.fh-container {
	width: min(100% - (var(--fh-gutter-hero) * 2), var(--fh-max-width));
	margin-inline: auto;
}

/* Shell del bloque editorial (header + hero): ocupa casi todo el ancho
   y sólo se centra a partir de 1760px, para conservar las proporciones
   de la referencia entre 1440px y 1920px. */
.fh-shell {
	width: 100%;
	max-width: var(--fh-shell-max);
	margin-inline: auto;
	padding-inline: var(--fh-gutter-header);
}

/* ================================
   ANIMACIONES
================================ */

@keyframes fadeUpSlide {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.98);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}


/* ================================
   HEADER  (única definición del tema)
================================ */

.fh-header {
	position: relative;
	z-index: 100;
	width: 100%;
	background: var(--fh-ink);
	border-bottom: 1px solid var(--fh-hairline);
}

.fh-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	height: var(--fh-header-h);
}

/* --- Logo --- */

.fh-header__brand {
	display: flex;
	align-items: center;
	justify-self: start;
}

.fh-header__logo,
.fh-header__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	color: var(--fh-yellow);
	font-family: var(--fh-font-display);
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fh-header__brand .custom-logo {
	display: block;
	width: auto;
	max-height: 30px;
}

/* --- Navegación central --- */

.fh-header__nav {
	justify-self: center;
}

.fh-menu {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fh-menu a {
	position: relative;
	display: block;
	padding-block: 6px;
	color: rgba(255, 255, 255, 0.62);
	font-family: var(--fh-font-body);
	font-size: clamp(9.5px, 0.75vw, 11px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.22s ease;
}

.fh-menu a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -5px;
	left: 0;
	height: 1px;
	background: var(--fh-yellow);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}

.fh-menu a:hover,
.fh-menu a:focus-visible,
.fh-menu .current-menu-item > a,
.fh-menu .current_page_item > a,
.fh-menu li.is-active > a {
	color: var(--fh-yellow);
}

.fh-menu a:hover::after,
.fh-menu a:focus-visible::after,
.fh-menu .current-menu-item > a::after,
.fh-menu .current_page_item > a::after,
.fh-menu li.is-active > a::after {
	transform: scaleX(1);
}

/* --- Bloque derecho: edición + hamburguesa --- */

.fh-header__aside {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 34px);
	justify-self: end;
}

.fh-header__edition {
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--fh-font-mono);
	font-size: clamp(8.5px, 0.68vw, 10px);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fh-header__menu-toggle {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-end;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.fh-header__menu-toggle span {
	display: block;
	width: 22px;
	height: 1px;
	background: rgba(255, 255, 255, 0.85);
	transition: background 0.22s ease, width 0.22s ease;
}

.fh-header__menu-toggle:hover span {
	background: var(--fh-yellow);
}

.fh-header__menu-toggle:hover span:nth-child(2) {
	width: 15px;
}

/* ================================
   HEADER RESPONSIVE
================================ */

@media (max-width: 1080px) {

	.fh-menu {
		gap: 18px;
	}

	.fh-menu a {
		letter-spacing: 0.1em;
	}

}

@media (max-width: 900px) {

	:root {
		--fh-header-h: 62px;
	}

	.fh-header__inner {
		grid-template-columns: 1fr auto;
	}

	.fh-header__nav {
		display: none;
	}

}

@media (max-width: 480px) {

	.fh-header__edition {
		display: none;
	}

}

/* ================================
   FOOTER
================================ */

.fh-footer {
	background: var(--fh-black-pure);
	padding: 60px 0 40px;
}

.fh-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 60px;
	margin-bottom: 60px;
}

.fh-footer__logo {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--fh-yellow);
	font-family: "Anton", sans-serif;
	font-size: 18px;
	letter-spacing: 0.05em;
}

.fh-footer__brand p {
	max-width: 360px;
	margin: 0;
	color: #888;
	font-size: 14px;
	line-height: 1.6;
}

.fh-footer__column h3 {
	margin: 0 0 20px;
	color: var(--fh-white);
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fh-footer-menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fh-footer-menu a {
	color: #888;
	font-size: 14px;
	transition: color 0.25s ease;
}

.fh-footer-menu a:hover {
	color: var(--fh-yellow);
}

/* Redes */

.fh-socials {
	display: flex;
	gap: 16px;
}

.fh-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--fh-yellow);
	background: rgba(245, 197, 24, 0.1);
	border: 1px solid rgba(245, 197, 24, 0.2);
	border-radius: 4px;
	transition: all 0.25s ease;
}

.fh-social:hover {
	color: var(--fh-black);
	background: var(--fh-yellow);
}

.fh-social svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Parte inferior */

.fh-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 32px;
	border-top: 1px solid var(--fh-border);
}

.fh-footer__bottom p {
	margin: 0;
	color: #666;
	font-size: 12px;
}

.fh-footer__tagline {
	color: var(--fh-yellow) !important;
	font-family: "Anton", sans-serif;
	font-size: 13px !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ================================
   FOOTER RESPONSIVE
================================ */

@media (max-width: 768px) {

	.fh-footer {
		padding: 50px 0 30px;
	}

	.fh-footer__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 40px;
	}

	.fh-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

}


/* ================================
   BOTONES (compartidos)
================================ */

.fh-button {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 18px 26px;
	font-family: var(--fh-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.fh-button:hover {
	transform: translateX(6px);
}

.fh-button--yellow {
	background: var(--fh-yellow);
	color: var(--fh-black);
}

.fh-button--yellow:hover {
	background: var(--fh-white);
}

.fh-button--black {
	flex-shrink: 0;
	background: var(--fh-black);
	color: var(--fh-white);
}

.fh-button--black:hover {
	background: var(--fh-white);
	color: var(--fh-black);
}

.fh-button--link {
	gap: 14px;
	padding: 0 0 8px;
	background: transparent;
	color: var(--fh-white);
	border-bottom: 2px solid var(--fh-yellow);
}

.fh-button--link:hover {
	color: var(--fh-yellow);
}


/* ================================
   HERO
   Capas (z-index):
   0 fondo/glow · 1 número 04 · 2 artista
   3 texto · 4 rail lateral + pie
================================ */

.fh-main {
	overflow: hidden;
}

.fh-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: max(calc(100vh - var(--fh-header-h)), 540px);
	background: var(--fh-ink);
	overflow: hidden;
}

/* --- Fondo y atmósfera --- */

.fh-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(58% 64% at 66% 40%, rgba(245, 197, 24, 0.075) 0%, rgba(245, 197, 24, 0) 62%),
		radial-gradient(72% 78% at 63% 54%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 64%),
		linear-gradient(92deg, #07080A 0%, #0A0B0C 38%, #0D0E10 62%, #07080A 100%);
}

/* Velo que mantiene legible la columna de texto sobre el artista. */
.fh-hero__background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
			rgba(7, 8, 10, 0.96) 0%,
			rgba(7, 8, 10, 0.88) 24%,
			rgba(7, 8, 10, 0.42) 44%,
			rgba(7, 8, 10, 0) 60%);
}

/* Iluminación tenue detrás del artista. */
.fh-hero__glow {
	position: absolute;
	top: 6%;
	right: 6%;
	z-index: 0;
	width: 54%;
	height: 86%;
	background: radial-gradient(48% 50% at 50% 46%, rgba(245, 197, 24, 0.11) 0%, rgba(245, 197, 24, 0) 72%);
	filter: blur(24px);
	pointer-events: none;
}

/* --- Número gigante 04 (detrás del artista) --- */

.fh-hero__number {
	position: absolute;
	top: 1%;
	right: 9%;
	z-index: 1;
	color: transparent;
	font-family: var(--fh-font-display);
	font-size: clamp(220px, 27vw, 500px);
	font-weight: 400;
	line-height: 0.78;
	letter-spacing: 0.01em;
	/* La referencia usa una condensada más estrecha que Anton. */
	transform: scaleX(0.66);
	transform-origin: right top;
	-webkit-text-stroke: 3px rgba(245, 197, 24, 0.4);
	user-select: none;
	pointer-events: none;
}

/* --- Artista (PNG/WebP con fondo transparente) --- */

.fh-hero__artist {
	position: absolute;
	right: 13%;
	bottom: 0;
	z-index: 2;
	width: min(46%, 780px);
	height: 96%;
	pointer-events: none;
}

.fh-hero__artist-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	filter: var(--fh-artist-filter);
}

.fh-hero__artist-placeholder {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-bottom: 40px;
	background: linear-gradient(170deg,
			rgba(245, 197, 24, 0.05) 0%,
			rgba(255, 255, 255, 0.02) 45%,
			rgba(0, 0, 0, 0) 100%);
	border: 1px dashed rgba(245, 197, 24, 0.18);
}

.fh-hero__artist-placeholder span {
	color: rgba(255, 255, 255, 0.28);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* --- Columna de texto --- */

.fh-hero__container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--fh-shell-max);
	margin-inline: auto;
	padding-inline: var(--fh-gutter-hero);
	padding-block: 4vh 13vh;
}

.fh-hero__content {
	max-width: 620px;
}

.fh-hero__eyebrow,
.fh-hero__session {
	margin: 0;
	font-family: var(--fh-font-mono);
	font-size: clamp(10px, 0.9vw, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.fh-hero__eyebrow {
	color: var(--fh-yellow);
}

.fh-hero__session {
	margin-top: 26px;
	color: rgba(255, 255, 255, 0.52);
	font-weight: 500;
}

.fh-hero__title {
	margin: 26px 0 0;
	color: #F2F2F2;
	font-family: var(--fh-font-display);
	font-size: clamp(54px, 7.8vw, 124px);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.012em;
	text-transform: uppercase;
}

.fh-hero__title span {
	color: var(--fh-yellow);
}

/* Claim manuscrito: tipografía brush, distinta de la display. */
.fh-hero__description {
	margin: 8px 0 0;
	color: var(--fh-white);
	font-family: var(--fh-font-script);
	font-size: clamp(22px, 2.35vw, 34px);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	transform: skewX(-5deg);
	transform-origin: left bottom;
}

.fh-hero__cta {
	margin-top: 38px;
}

/* CTA subrayado del hero (afina el .fh-button--link compartido). */
.fh-hero .fh-button--link {
	gap: 18px;
	padding-bottom: 11px;
	font-size: clamp(11px, 1.04vw, 15px);
	letter-spacing: 0.16em;
}

.fh-hero .fh-button--link span {
	display: inline-block;
	font-size: 1.25em;
	line-height: 1;
	transition: transform 0.25s ease;
}

.fh-hero .fh-button--link:hover {
	transform: none;
	color: var(--fh-white);
	border-bottom-color: var(--fh-white);
}

.fh-hero .fh-button--link:hover span {
	transform: translateX(6px);
}

/* --- Rail derecho: edición / año + redes --- */

.fh-hero__side {
	position: absolute;
	top: 0;
	/* Se alinea con el margen derecho del shell del header. */
	right: calc(50% - min(50%, var(--fh-shell-max) / 2) + var(--fh-gutter-header));
	bottom: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.fh-hero__side-edition {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin-top: clamp(38px, 10.5vh, 96px);
}

.fh-hero__side-edition b {
	display: block;
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--fh-font-mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.fh-hero__side-edition i {
	display: block;
	margin-top: 7px;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.fh-hero__side-line {
	display: block;
	width: 1px;
	height: 56px;
	margin: 30px 6px 0 0;
	background: linear-gradient(to bottom, rgba(245, 197, 24, 0.35), rgba(245, 197, 24, 0));
}

.fh-hero__side-socials {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 34px;
	margin-top: auto;
	margin-bottom: clamp(74px, 26vh, 220px);
}

.fh-hero__side-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fh-yellow);
	opacity: 0.9;
	transition: opacity 0.22s ease, transform 0.22s ease, color 0.22s ease;
}

.fh-hero__side-socials a:hover {
	color: var(--fh-white);
	opacity: 1;
	transform: translateX(-3px);
}

.fh-hero__side-socials svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
}

/* --- Pie del hero: línea + categorías --- */

.fh-hero__bottom {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	width: 100%;
	max-width: var(--fh-shell-max);
	margin-inline: auto;
	padding: 20px var(--fh-gutter-hero) 30px;
}

.fh-hero__bottom::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--fh-gutter-header);
	left: var(--fh-gutter-hero);
	height: 1px;
	background: rgba(255, 255, 255, 0.09);
}

.fh-hero__bottom-list {
	display: flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--fh-font-mono);
	font-size: clamp(9px, 0.8vw, 11px);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fh-hero__bottom-list span:not(:last-child)::after {
	content: "/";
	margin: 0 clamp(10px, 1.1vw, 16px);
	color: var(--fh-yellow);
}

/* ================================
   HERO RESPONSIVE
================================ */

/* Portátiles / tablet horizontal */
@media (max-width: 1180px) {

	.fh-hero__content {
		max-width: 540px;
	}

	.fh-hero__artist {
		right: 6%;
		width: 52%;
	}

	.fh-hero__number {
		right: 3%;
		font-size: 30vw;
	}

	.fh-hero__side-socials {
		gap: 26px;
		margin-bottom: clamp(60px, 20vh, 170px);
	}

}

/* Tablet vertical */
@media (max-width: 900px) {

	/* El alto ya no se fuerza a (casi) 100vh: lo define el contenido,
	   igual que .fh-mag-hero en este mismo breakpoint. Evita el hueco
	   negro que quedaba entre el CTA y el siguiente bloque. */
	.fh-hero {
		min-height: 0;
	}

	.fh-hero__background::after {
		background: linear-gradient(90deg,
				rgba(7, 8, 10, 0.96) 0%,
				rgba(7, 8, 10, 0.9) 40%,
				rgba(7, 8, 10, 0.55) 72%,
				rgba(7, 8, 10, 0.3) 100%);
	}

	.fh-hero__artist {
		right: -4%;
		width: 66%;
		height: 76%;
		opacity: 0.55;
	}

	/* El número baja para quedar detrás del artista, no flotando solo. */
	.fh-hero__number {
		top: 16%;
		right: 6%;
		font-size: 40vw;
	}

	.fh-hero__container {
		padding-block: 40px 80px;
	}

	.fh-hero__side-edition {
		margin-top: clamp(32px, 8vh, 70px);
	}

}

/* Móvil */
@media (max-width: 640px) {

	:root {
		--fh-gutter-hero: 24px;
		--fh-gutter-header: 20px;
	}

	.fh-hero {
		align-items: flex-start;
		/* Antes forzaba ~100vh de alto; con el título/CTA de móvil (más
		   cortos) eso dejaba un hueco vacío grande antes de "Últimas
		   sesiones". Ahora el alto lo da el contenido + el padding de
		   abajo, que ya reserva sitio para el número/artista decorativos
		   y la barra inferior (.fh-hero__bottom, absoluta). */
		min-height: 0;
	}

	.fh-hero__container {
		padding-block: 48px 88px;
	}

	.fh-hero__content {
		max-width: none;
		/* Antes 52px: reservaba más ancho del que ocupan los iconos
		   sociales de la derecha y encogía el título sin necesidad. */
		padding-right: 28px;
	}

	.fh-hero__eyebrow,
	.fh-hero__session {
		font-size: clamp(11px, 3.4vw, 13px);
	}

	.fh-hero__artist {
		right: -10%;
		width: 78%;
		height: 62%;
		opacity: 0.4;
	}

	.fh-hero__number {
		top: 26%;
		right: -6%;
		font-size: 78vw;
		-webkit-text-stroke-width: 2px;
	}

	.fh-hero__session {
		margin-top: 18px;
	}

	.fh-hero__title {
		margin-top: 18px;
		/* Salto claro respecto al valor anterior (46/78) para que el
		   titular sea el protagonista de la pantalla, no una columna
		   de desktop encogida. */
		font-size: clamp(58px, 18vw, 92px);
	}

	.fh-hero__description {
		font-size: clamp(22px, 7.4vw, 30px);
	}

	.fh-hero__cta {
		margin-top: 32px;
	}

	.fh-hero .fh-button--link {
		font-size: clamp(12.5px, 3.6vw, 15px);
	}

	.fh-hero__side-edition,
	.fh-hero__side-line {
		display: none;
	}

	.fh-hero__side-socials {
		gap: 22px;
		margin-bottom: 28px;
	}

	.fh-hero__side-socials svg {
		width: 18px;
		height: 18px;
	}

	.fh-hero__bottom-list {
		letter-spacing: 0.12em;
	}

}


/* ================================
   MÁS QUE UNA SESIÓN
================================ */

.fh-about {
	position: relative;
	padding: 112px 0;
	background: var(--fh-black);
	overflow: hidden;
}

.fh-about > .fh-container {
	position: relative;
	z-index: 2;
}

/* --- Dos columnas: relato | pilares --- */

.fh-about__content {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
	column-gap: clamp(48px, 11vw, 158px);
	align-items: start;
}

/* --- Columna izquierda --- */

.fh-about__title h2 {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(36px, 4.6vw, 67px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.fh-about__title h2 span {
	color: var(--fh-yellow);
}

.fh-about__lead {
	max-width: 400px;
	margin: 34px 0 0;
	color: #8A8A8A;
	font-size: 14px;
	line-height: 1.75;
}

/* --- Columna derecha: los tres pilares --- */

.fh-about__items {
	min-width: 0;
}

.fh-about__item {
	display: grid;
	grid-template-columns:
		clamp(62px, 6.6vw, 96px)
		minmax(0, 0.8fr)
		minmax(0, 1fr);
	column-gap: clamp(16px, 1.8vw, 26px);
	align-items: center;
	padding: 20px 0;
}

/* Solo hay filete ENTRE filas, no arriba ni abajo del bloque. */
.fh-about__item + .fh-about__item {
	border-top: 1px solid rgba(245, 197, 24, 0.16);
}

.fh-about__item:first-child {
	padding-top: 0;
}

.fh-about__item:last-child {
	padding-bottom: 0;
}

/* Número en contorno amarillo */
.fh-about__item-number {
	color: transparent;
	font-family: var(--fh-font-body);
	font-size: clamp(46px, 5.2vw, 76px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	-webkit-text-stroke: 2px rgba(245, 197, 24, 0.9);
	user-select: none;
}

.fh-about__item:hover .fh-about__item-number {
	color: var(--fh-yellow);
	-webkit-text-stroke-color: var(--fh-yellow);
	transition: color 0.3s ease;
}

.fh-about__item-label {
	display: block;
	margin-bottom: 9px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-about__item-content h3 {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(18px, 1.65vw, 23px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.fh-about__item-text {
	margin: 0;
	color: #8A8A8A;
	font-size: 13px;
	line-height: 1.6;
}


/* ================================
   MÁS QUE UNA SESIÓN RESPONSIVE
================================ */

@media (max-width: 1080px) {

	.fh-about__content {
		grid-template-columns: 1fr;
		row-gap: 60px;
	}

	.fh-about__lead {
		max-width: 520px;
	}

}

@media (max-width: 860px) {

	.fh-about {
		padding: 90px 0;
	}

	.fh-about__title h2 {
		font-size: clamp(42px, 12vw, 58px);
	}

	.fh-about__lead {
		max-width: none;
		margin-top: 22px;
		font-size: 15px;
	}

	/* El texto largo baja debajo del titular de cada pilar. */
	.fh-about__item {
		grid-template-columns: 62px minmax(0, 1fr);
		align-items: start;
		row-gap: 10px;
	}

	.fh-about__item-text {
		grid-column: 2;
		font-size: 14px;
	}

	.fh-about__item-content h3 {
		font-size: clamp(19px, 5vw, 23px);
	}

	.fh-about__item-number {
		font-size: 42px;
		-webkit-text-stroke-width: 1.6px;
	}

}


/* ================================
   MEDIA (imagen o placeholder)
   Compartido por sesiones y noticias.
================================ */

.fh-media {
	position: relative;
	overflow: hidden;
	background: #141414;
}

.fh-media__img,
.fh-media__placeholder,
.fh-media__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fh-media__img {
	object-fit: cover;
	transition: transform 0.6s ease;
}

.fh-media__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: linear-gradient(135deg, #242424 0%, #0E0E0E 100%);
	color: rgba(255, 255, 255, 0.22);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Fallback/overlay: logo global de Freestyle House cuando un contenido no
 * tiene imagen propia (ver freestyle_house_get_fallback_logo() en
 * functions.php). El archivo original es un JPG con fondo negro; en vez de
 * recortarlo con object-fit: cover (dejaría un rectángulo negro), se centra
 * con contain sobre el mismo degradado del placeholder y se funde con
 * mix-blend-mode para que el negro del JPG se integre en el fondo oscuro.
 */
.fh-media__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14%;
	background: linear-gradient(135deg, #242424 0%, #0E0E0E 100%);
}

.fh-media__fallback-logo {
	width: auto;
	height: auto;
	max-width: 55%;
	max-height: 55%;
	object-fit: contain;
	opacity: 0.85;
	mix-blend-mode: screen;
}

/* Enlace de texto amarillo, común a las dos secciones. */

.fh-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fh-link span {
	transition: transform 0.25s ease;
}

.fh-link:hover span,
.fh-session:hover .fh-link span,
.fh-post:hover .fh-link span,
.fh-feature:hover .fh-link span,
.fh-mag-feature:hover .fh-link span,
.fh-mag-row:hover .fh-link span,
.fh-mag-card:hover .fh-link span {
	transform: translateX(6px);
}


/* ================================
   ÚLTIMAS SESIONES
================================ */

.fh-sessions {
	position: relative;
	padding: 88px 0 46px;
	background-color: var(--fh-yellow);
	background-image: url('https://thefreestylehouse.com/wp-content/uploads/2026/09/background-22-scaled.jpeg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: var(--fh-black);
	overflow: hidden;
}

/* Trama de puntos sobre fondo amarillo. Compartida por "Últimas sesiones"
   y por el banner de la revista. */
.fh-sessions__texture,
.fh-mag-banner__texture {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(0, 0, 0, 0.35) 1px, transparent 1px);
	background-size: 5px 5px;
	mix-blend-mode: multiply;
	opacity: 0.18;
	pointer-events: none;
}

.fh-sessions__container {
	position: relative;
	z-index: 2;
}

/* --- Rejilla editorial: texto | destacada | dos filas --- */

.fh-sessions__grid {
	display: grid;
	grid-template-columns:
		minmax(180px, 262px)
		minmax(0, 1.53fr)
		minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(176px, auto));
	gap: 14px;
	align-items: stretch;
}

.fh-sessions__intro,
.fh-session--featured {
	grid-row: span 2;
}

/* --- Columna izquierda --- */

.fh-sessions__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-right: 22px;
}

.fh-sessions__title {
	margin: 0;
	color: var(--fh-black);
	font-family: var(--fh-font-display);
	font-size: clamp(40px, 4.8vw, 70px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.fh-sessions__badge {
	margin-top: 22px;
	padding: 10px 17px;
	background: var(--fh-black);
	color: var(--fh-white);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.fh-sessions__turn {
	margin: 28px 0 0;
	color: var(--fh-black);
	font-family: var(--fh-font-script);
	font-size: clamp(32px, 3.4vw, 50px);
	line-height: 0.98;
	text-transform: uppercase;
	transform: skewX(-5deg);
	transform-origin: left bottom;
}

.fh-sessions__turn-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fh-sessions__bolts {
	width: 0.86em;
	height: 0.47em;
	fill: var(--fh-black);
	flex-shrink: 0;
}

/* --- Tarjetas --- */

.fh-session {
	position: relative;
	overflow: hidden;
	background: #0B0B0B;
	color: var(--fh-white);
}

.fh-session__edition {
	color: rgba(245, 197, 24, 0.75);
	font-family: var(--fh-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fh-session__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-weight: 400;
	line-height: 0.96;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-session:hover .fh-media__img {
	transform: scale(1.04);
}

/* Destacada */

.fh-session--featured .fh-session__media {
	position: absolute;
	inset: 0;
	background: none;
}

.fh-session--featured::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.92) 0%,
			rgba(0, 0, 0, 0.55) 38%,
			rgba(0, 0, 0, 0.12) 68%,
			rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}

.fh-session--featured .fh-session__edition {
	position: absolute;
	top: 24px;
	left: 26px;
	z-index: 2;
}

.fh-session__body {
	position: absolute;
	right: 26px;
	bottom: 26px;
	left: 26px;
	z-index: 2;
}

.fh-session__tags {
	display: block;
	margin-bottom: 14px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-session--featured .fh-session__title {
	font-size: clamp(30px, 3.8vw, 56px);
}

.fh-session--featured .fh-session__link {
	margin-top: 22px;
}

/* Tarjetas horizontales: texto a la izquierda, foto a la derecha */

.fh-session--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 32%;
}

.fh-session__row-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 20px 14px 20px 22px;
}

.fh-session__role {
	margin-top: 12px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-session--row .fh-session__title {
	margin: 8px 0 0;
	font-size: clamp(17px, 1.72vw, 25px);
}

.fh-session--row .fh-session__link {
	margin-top: 16px;
}

.fh-session__row-media {
	background: #141414;
}

/* --- Botón centrado --- */

.fh-sessions__footer {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}


/* ================================
   ÚLTIMAS SESIONES RESPONSIVE
================================ */

@media (max-width: 1080px) {

	.fh-sessions__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		grid-template-rows: auto repeat(2, minmax(150px, auto));
	}

	.fh-sessions__intro {
		grid-row: auto;
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 24px;
		margin-bottom: 20px;
		padding-right: 0;
	}

	.fh-sessions__badge {
		margin-top: 0;
	}

	.fh-sessions__turn {
		margin-top: 0;
	}

	.fh-session--featured {
		grid-row: span 2;
	}

}

@media (max-width: 720px) {

	.fh-sessions {
		padding: 72px 0 60px;
	}

	.fh-sessions__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.fh-sessions__intro {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.fh-sessions__title {
		font-size: clamp(46px, 12vw, 60px);
	}

	.fh-sessions__badge {
		margin-top: 20px;
	}

	.fh-sessions__turn {
		margin-top: 24px;
		font-size: clamp(34px, 9vw, 44px);
	}

	.fh-session--featured {
		grid-row: auto;
		min-height: 380px;
	}

	.fh-session--featured .fh-session__title {
		font-size: clamp(34px, 8.5vw, 44px);
	}

	/* La fila texto/foto (32%) apretaba el título y dejaba la imagen
	   diminuta en móvil. Se apilan: la imagen pasa a foto protagonista a
	   todo el ancho (con aspect-ratio, ya que pierde la altura que le
	   daba el grid) y el título ya no comparte columna. */
	.fh-session--row {
		display: block;
	}

	.fh-session__row-body {
		padding: 18px 20px 20px;
	}

	.fh-session--row .fh-session__title {
		font-size: clamp(20px, 5.4vw, 26px);
	}

	.fh-session__row-media {
		aspect-ratio: 16 / 10;
	}

	.fh-sessions__footer {
		margin-top: 32px;
	}

	.fh-button--black {
		width: 100%;
		justify-content: center;
	}

}


/* ================================
   DESDE LA CASA / NOTICIAS
================================ */

.fh-news {
	position: relative;
	padding: 88px 0 92px;
	background-color: #0D0D0D;
	background-image: url('https://thefreestylehouse.com/wp-content/uploads/2026/09/background-scaled.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--fh-white);
	overflow: hidden;
}

/* Grafiti "FH" del borde derecho */
.fh-news__watermark {
	position: absolute;
	top: 50%;
	right: -4%;
	z-index: 0;
	color: rgba(245, 197, 24, 0.42);
	font-family: var(--fh-font-display);
	font-size: clamp(150px, 16vw, 270px);
	line-height: 0.78;
	letter-spacing: -0.03em;
	transform: translateY(-50%) rotate(-4deg);
	user-select: none;
	pointer-events: none;
}

.fh-news__container {
	position: relative;
	z-index: 1;
}

/* --- Rejilla: título | artista del mes | entradas --- */

.fh-news__grid {
	display: grid;
	grid-template-columns:
		minmax(170px, 230px)
		minmax(0, 1fr)
		minmax(0, 1.3fr);
	column-gap: 28px;
	align-items: start;
	/* Deja libre el margen derecho para el grafiti "FH". */
	padding-right: clamp(0px, 4.2vw, 60px);
}

/* --- Columna izquierda --- */

.fh-news__intro {
	padding-right: 16px;
}

.fh-news__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(40px, 4.8vw, 70px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.fh-news__edition {
	display: block;
	margin-top: 60px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --- Artista del mes --- */

.fh-news__feature-col {
	min-width: 0;
}

.fh-feature {
	display: block;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.fh-feature__media {
	aspect-ratio: 16 / 8;
	background: #141414;
}

.fh-feature__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 7px 12px;
	background: var(--fh-yellow);
	color: var(--fh-black);
	font-family: var(--fh-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-feature:hover .fh-media__img {
	transform: scale(1.04);
}

.fh-feature__body {
	padding: 26px 24px 28px;
}

.fh-feature__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(26px, 2.9vw, 42px);
	font-weight: 400;
	line-height: 0.98;
	text-transform: uppercase;
}

.fh-feature__body p {
	margin: 14px 0 20px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	line-height: 1.65;
}

/* Indicador de carrusel */

.fh-news__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 20px;
}

.fh-news__dots span {
	width: 20px;
	height: 2px;
	background: rgba(255, 255, 255, 0.2);
}

.fh-news__dots span.is-active {
	background: var(--fh-yellow);
}

/* --- Entradas de la derecha --- */

.fh-news__list {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-left: 34px;
}

.fh-post {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	column-gap: 22px;
	align-items: start;
}

.fh-post__media {
	aspect-ratio: 4 / 3;
}

.fh-post:hover .fh-media__img {
	transform: scale(1.05);
}

.fh-post__category {
	display: block;
	margin-bottom: 8px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-post__title {
	margin: 0 0 9px;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(15.5px, 1.32vw, 18.5px);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
}

.fh-post__body p {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 12.5px;
	line-height: 1.6;
}


/* ================================
   DESDE LA CASA RESPONSIVE
================================ */

@media (max-width: 1400px) {

	.fh-news__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		row-gap: 40px;
		padding-right: 0;
	}

	.fh-news__intro {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.fh-news__edition {
		margin-top: 22px;
	}

	.fh-news__list {
		padding-left: 0;
	}

	/* Sin margen reservado, el grafiti pasa al fondo para no pisar el texto. */
	.fh-news__watermark {
		top: auto;
		right: -24%;
		bottom: 2%;
		font-size: clamp(150px, 26vw, 260px);
		color: rgba(245, 197, 24, 0.15);
		transform: rotate(-4deg);
	}

	/* Interlineado algo más suelto a tamaño pequeño. */
	.fh-sessions__title,
	.fh-news__title {
		line-height: 0.98;
	}

	.fh-session--featured .fh-session__title,
	.fh-feature__title {
		line-height: 1;
	}

}

@media (max-width: 720px) {

	.fh-news {
		padding: 72px 0 80px;
	}

	.fh-news__watermark {
		right: -30%;
		bottom: 1%;
		font-size: 170px;
		color: rgba(245, 197, 24, 0.13);
	}

	.fh-news__grid {
		grid-template-columns: 1fr;
		row-gap: 34px;
	}

	.fh-news__intro {
		grid-column: auto;
	}

	.fh-news__title {
		font-size: clamp(46px, 12vw, 60px);
	}

	.fh-feature__title {
		font-size: clamp(30px, 8.4vw, 38px);
	}

	.fh-feature__body p {
		font-size: 15px;
	}

	.fh-post {
		grid-template-columns: 108px minmax(0, 1fr);
		column-gap: 16px;
	}

	.fh-post__title {
		font-size: 19px;
	}

	.fh-post__body p {
		font-size: 13.5px;
	}

}
/* ================================
   VOCES DE LA CASA / ARTISTAS
================================ */

.fh-artists {
	position: relative;
	padding: 88px 0 92px;
	background: var(--fh-black);
	color: var(--fh-white);
	overflow: hidden;
}

.fh-artists__title {
	margin: 0 0 30px;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(26px, 3.1vw, 45px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

/* --- Rejilla: destacado a 2 filas + tres fichas + enlace --- */

.fh-artists__grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1.29fr)
		minmax(0, 1fr)
		minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(136px, auto));
	column-gap: 18px;
	row-gap: 16px;
}

.fh-artist--featured {
	grid-row: span 2;
}

/* --- Ficha común --- */

.fh-artist {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0B0B0B;
	border: 1px solid rgba(245, 197, 24, 0.14);
	color: var(--fh-white);
	transition: border-color 0.3s ease;
}

.fh-artist:hover {
	border-color: rgba(245, 197, 24, 0.45);
}

.fh-artist:hover .fh-media__img {
	transform: scale(1.04);
}

/* Número en contorno amarillo */
.fh-artist__number {
	display: block;
	color: transparent;
	font-family: var(--fh-font-body);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	-webkit-text-stroke: 2px rgba(245, 197, 24, 0.9);
	user-select: none;
}

.fh-artist__role {
	display: block;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-artist__name {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

/* --- Ficha destacada --- */

.fh-artist--featured .fh-artist__media {
	position: absolute;
	inset: 0;
	background: none;
}

.fh-artist--featured::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.94) 0%,
			rgba(0, 0, 0, 0.6) 34%,
			rgba(0, 0, 0, 0.1) 66%,
			rgba(0, 0, 0, 0.4) 100%);
	pointer-events: none;
}

.fh-artist__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 7px 12px;
	background: var(--fh-yellow);
	color: var(--fh-black);
	font-family: var(--fh-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-artist--featured .fh-artist__body {
	position: absolute;
	right: 24px;
	bottom: 22px;
	left: 24px;
	z-index: 2;
}

.fh-artist--featured .fh-artist__number {
	margin-bottom: 12px;
	font-size: clamp(36px, 3.8vw, 56px);
}

.fh-artist--featured .fh-artist__name {
	margin-top: 7px;
	font-size: clamp(17px, 1.8vw, 26px);
}

/* --- Fichas horizontales: texto izquierda, foto derecha --- */

.fh-artist--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42%;
}

.fh-artist--row .fh-artist__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 18px 16px 18px 20px;
}

.fh-artist--row .fh-artist__number {
	margin-bottom: 10px;
	font-size: clamp(28px, 2.75vw, 40px);
	-webkit-text-stroke-width: 1.8px;
}

.fh-artist--row .fh-artist__name {
	margin-top: 6px;
	font-size: clamp(16px, 1.5vw, 21px);
}

.fh-artist__row-media {
	background: #141414;
}

/* --- Celda del enlace --- */

.fh-artists__more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 4px;
}


/* ================================
   ARTISTAS RESPONSIVE
================================ */

@media (max-width: 1000px) {

	.fh-artists__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto;
	}

	.fh-artist--featured {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 320px;
	}

	.fh-artists__more {
		grid-column: 1 / -1;
		justify-content: flex-start;
		padding-top: 4px;
	}

}

@media (max-width: 640px) {

	.fh-artists {
		padding: 72px 0 80px;
	}

	.fh-artists__title {
		font-size: clamp(38px, 10.5vw, 50px);
	}

	.fh-artists__grid {
		grid-template-columns: 1fr;
	}

	.fh-artist--featured {
		min-height: 300px;
	}

	.fh-artist--featured .fh-artist__name {
		font-size: clamp(19px, 5.4vw, 24px);
	}

	/* Igual que .fh-session--row: la columna de foto (42%) dejaba el
	   nombre del artista apretado y la foto muy pequeña en móvil. */
	.fh-artist--row {
		display: block;
	}

	.fh-artist--row .fh-artist__body {
		padding: 18px 20px 20px;
	}

	.fh-artist--row .fh-artist__name {
		font-size: clamp(18px, 5vw, 22px);
	}

	.fh-artist__row-media {
		aspect-ratio: 16 / 10;
	}

}


/* ================================
   MANIFIESTO
================================ */

.fh-manifesto {
	position: relative;
	padding: 44px 0;
	background-color: var(--fh-yellow);
	background-image: url('https://thefreestylehouse.com/wp-content/uploads/2026/09/background-22-scaled.jpeg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: var(--fh-black);
	overflow: hidden;
}

.fh-manifesto__texture {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(0, 0, 0, 0.35) 1px, transparent 1px);
	background-size: 5px 5px;
	mix-blend-mode: multiply;
	opacity: 0.16;
	pointer-events: none;
}

.fh-manifesto__container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2.1vw, 30px);
}

.fh-manifesto__side {
	margin: 0;
	color: var(--fh-black);
	font-family: var(--fh-font-body);
	font-size: clamp(26px, 5vw, 72px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* "LA CULTURA" va en claro con sombra dura, como en el diseño. */
.fh-manifesto__side--alt span {
	color: #F0F0F0;
	text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}

/* Aspa pintada del centro */
.fh-manifesto__cross {
	flex-shrink: 0;
	width: clamp(38px, 6.5vw, 94px);
	height: auto;
	fill: var(--fh-black);
}


/* ================================
   MANIFIESTO RESPONSIVE
================================ */

@media (max-width: 720px) {

	.fh-manifesto {
		padding: 44px 0;
	}

	.fh-manifesto__container {
		flex-direction: column;
		gap: 14px;
		text-align: center;
	}

	.fh-manifesto__side {
		white-space: normal;
		font-size: clamp(30px, 9vw, 42px);
	}

	.fh-manifesto__cross {
		width: 48px;
	}

}


/* ================================
   CTA FINAL
================================ */

.fh-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 500px;
	padding: 88px 0;
	background: var(--fh-black);
	color: var(--fh-white);
	overflow: hidden;
}

.fh-cta__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('https://thefreestylehouse.com/wp-content/uploads/2026/09/background-3-scaled.jpeg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.fh-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(60% 70% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.86) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.82) 100%);
}

.fh-cta__container {
	position: relative;
	z-index: 2;
}

.fh-cta__content {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.fh-cta__eyebrow {
	margin: 0 0 16px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.fh-cta h2 {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(26px, 3.1vw, 44px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-cta__description {
	max-width: 610px;
	margin: 18px auto 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	line-height: 1.7;
}

.fh-cta__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
}

.fh-button--outline {
	background: transparent;
	color: var(--fh-yellow);
	border: 1px solid var(--fh-yellow);
}

.fh-button--outline:hover {
	background: var(--fh-yellow);
	color: var(--fh-black);
}


/* ================================
   CTA RESPONSIVE
================================ */

@media (max-width: 720px) {

	.fh-cta {
		min-height: 480px;
		padding: 76px 0;
	}

	.fh-cta__actions {
		flex-direction: column;
		gap: 14px;
	}

	.fh-cta__actions .fh-button {
		width: 100%;
		justify-content: center;
	}

}


/* ================================
   REVISTA URBANA
   Página editorial (page-revista.php).
   Reutiliza .fh-container, .fh-media, .fh-link y .fh-button.
================================ */

/* Toda la fotografía de la revista es documental: blanco y negro
   de alto contraste, igual que el artista del hero de la portada. */
.fh-mag .fh-media__img {
	filter: grayscale(1) contrast(1.08) brightness(0.95);
}


/* --------------------------------
   HERO
-------------------------------- */

.fh-mag-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(300px, 27vw, 400px);
	padding-block: clamp(24px, 2.4vw, 36px) clamp(34px, 4.2vw, 60px);
	background: var(--fh-ink);
	overflow: hidden;
}

/* Fondo: degradado base + halo amarillo hacia la derecha. */
.fh-mag-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(52% 62% at 78% 42%, rgba(245, 197, 24, 0.10) 0%, rgba(245, 197, 24, 0) 62%),
		radial-gradient(70% 80% at 68% 52%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 66%),
		linear-gradient(92deg, #07080A 0%, #0A0B0C 40%, #0D0E10 66%, #07080A 100%);
}

/* Textura de grano muy sutil. */
.fh-mag-hero__background::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px);
	background-size: 4px 4px;
	opacity: 0.04;
}

/* Salpicaduras amarillas del margen derecho. */
.fh-mag-hero__background::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 74% 24%, rgba(245, 197, 24, 0.85) 0 2px, transparent 3px),
		radial-gradient(circle at 79% 37%, rgba(245, 197, 24, 0.55) 0 3px, transparent 4px),
		radial-gradient(circle at 85% 21%, rgba(245, 197, 24, 0.7) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 88% 46%, rgba(245, 197, 24, 0.45) 0 2.5px, transparent 3.5px),
		radial-gradient(circle at 82% 62%, rgba(245, 197, 24, 0.6) 0 2px, transparent 3px),
		radial-gradient(circle at 93% 33%, rgba(245, 197, 24, 0.35) 0 4px, transparent 5px),
		radial-gradient(circle at 71% 55%, rgba(245, 197, 24, 0.4) 0 1.5px, transparent 2.5px);
	pointer-events: none;
}

/* Fotografía integrada con el fondo mediante máscara lateral. */
.fh-mag-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: min(44%, 820px);
	background: none;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 38%, #000 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 38%, #000 100%);
	pointer-events: none;
}

.fh-mag-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
			rgba(7, 8, 10, 0.92) 0%,
			rgba(7, 8, 10, 0.6) 45%,
			rgba(7, 8, 10, 0.4) 100%);
}

/* Marca de agua editorial "FH". */
.fh-mag-hero__watermark {
	position: absolute;
	top: 50%;
	right: 3%;
	z-index: 0;
	color: rgba(245, 197, 24, 0.055);
	font-family: var(--fh-font-display);
	font-size: clamp(150px, 19vw, 340px);
	line-height: 0.78;
	letter-spacing: -0.04em;
	transform: translateY(-50%) rotate(-4deg);
	user-select: none;
	pointer-events: none;
}

.fh-mag-hero__container {
	position: relative;
	z-index: 2;
}

/* Migas de pan: componente compartido por todas las páginas interiores
   (revista, contacto...) que abren con un hero editorial oscuro. */

.fh-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.fh-breadcrumb a {
	color: var(--fh-yellow);
	transition: color 0.22s ease;
}

.fh-breadcrumb a:hover {
	color: var(--fh-white);
}

.fh-breadcrumb span {
	color: rgba(255, 255, 255, 0.28);
}

.fh-breadcrumb b {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 700;
}

/* Título + columna descriptiva */

.fh-mag-hero__content {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(26px, 3.4vw, 56px);
	margin-top: clamp(14px, 1.6vw, 26px);
}

.fh-mag-hero__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(48px, 10.4vw, 158px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.fh-mag-hero__title span {
	color: var(--fh-yellow);
}

.fh-mag-hero__aside {
	max-width: 430px;
	padding-left: clamp(24px, 2.8vw, 48px);
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.fh-mag-hero__description {
	margin: 0;
	color: rgba(255, 255, 255, 0.74);
	font-family: var(--fh-font-body);
	font-size: clamp(13px, 1.02vw, 16px);
	line-height: 1.72;
}

.fh-mag-hero__description--alt {
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.44);
}

/* CTA subrayado: misma mecánica que el CTA del hero de portada. */
.fh-mag-hero__cta {
	margin-top: 28px;
	gap: 16px;
	font-size: clamp(10.5px, 0.85vw, 12.5px);
	letter-spacing: 0.16em;
}

.fh-mag-hero__cta span {
	display: inline-block;
	font-size: 1.25em;
	line-height: 1;
	transition: transform 0.25s ease;
}

.fh-mag-hero__cta:hover {
	transform: none;
	color: var(--fh-white);
	border-bottom-color: var(--fh-white);
}

.fh-mag-hero__cta:hover span {
	transform: translateX(6px);
}


/* --------------------------------
   CATEGORÍAS
-------------------------------- */

.fh-mag-filters {
	position: relative;
	background: var(--fh-black);
	border-top: 1px solid var(--fh-hairline);
	border-bottom: 1px solid var(--fh-hairline);
}

.fh-mag-filters__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(18px, 2.4vw, 36px);
}

.fh-mag-filters__list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.6vw, 42px);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fh-mag-filters__item {
	position: relative;
	display: block;
	padding-block: 22px 20px;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--fh-font-mono);
	font-size: clamp(10px, 0.78vw, 11.5px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.22s ease;
}

.fh-mag-filters__item::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 12px;
	left: 0;
	height: 2px;
	background: var(--fh-yellow);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}

.fh-mag-filters__item:hover,
.fh-mag-filters__item:focus-visible,
.fh-mag-filters__item.is-active {
	color: var(--fh-yellow);
}

.fh-mag-filters__item:hover::after,
.fh-mag-filters__item:focus-visible::after,
.fh-mag-filters__item.is-active::after {
	transform: scaleX(1);
}

/* Buscador: herramienta editorial pequeña, no un formulario. */

.fh-mag-filters__search {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: clamp(10px, 0.78vw, 11.5px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.22s ease;
}

.fh-mag-filters__search:hover {
	color: var(--fh-white);
}

.fh-mag-filters__search svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* --------------------------------
   METADATOS COMPARTIDOS
-------------------------------- */

.fh-mag-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.fh-mag-meta__tag {
	padding: 5px 9px;
	background: var(--fh-yellow);
	color: var(--fh-black);
	font-family: var(--fh-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-mag-meta__tag--plain {
	padding: 0;
	background: transparent;
	color: var(--fh-yellow);
}

.fh-mag-meta__date {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}


/* --------------------------------
   ARTÍCULO PRINCIPAL + SECUNDARIOS
-------------------------------- */

.fh-mag-lead {
	padding: clamp(26px, 3.2vw, 44px) 0 0;
	background: var(--fh-black);
}

.fh-mag-lead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.49fr) minmax(0, 1fr);
	column-gap: clamp(20px, 2.2vw, 34px);
}

/* Principal */

.fh-mag-feature {
	position: relative;
	height: 100%;
	background: #0B0B0B;
	overflow: hidden;
}

.fh-mag-feature__link {
	position: relative;
	display: block;
	height: 100%;
	min-height: clamp(360px, 34vw, 520px);
}

.fh-mag-feature__media {
	position: absolute;
	inset: 0;
	background: none;
}

.fh-mag-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.94) 0%,
			rgba(0, 0, 0, 0.62) 42%,
			rgba(0, 0, 0, 0.16) 72%,
			rgba(0, 0, 0, 0.38) 100%);
	pointer-events: none;
}

.fh-mag-feature:hover .fh-media__img {
	transform: scale(1.04);
}

.fh-mag-feature__body {
	position: absolute;
	right: clamp(20px, 2.1vw, 36px);
	bottom: clamp(20px, 2.1vw, 34px);
	left: clamp(20px, 2.1vw, 36px);
	z-index: 2;
}

.fh-mag-feature__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(27px, 3.3vw, 50px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.fh-mag-feature__title span {
	color: var(--fh-yellow);
}

.fh-mag-feature__excerpt {
	max-width: 440px;
	margin: 16px 0 20px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 1.65;
}

/* Secundarios */

.fh-mag-lead__list {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	min-width: 0;
}

.fh-mag-row {
	padding-block: clamp(14px, 1.5vw, 22px);
	border-bottom: 1px solid var(--fh-border);
}

.fh-mag-row:first-child {
	padding-top: 0;
}

.fh-mag-row__link {
	display: grid;
	grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
	column-gap: clamp(14px, 1.4vw, 20px);
	align-items: start;
}

.fh-mag-row__media {
	aspect-ratio: 5 / 4;
}

.fh-mag-row:hover .fh-media__img {
	transform: scale(1.05);
}

.fh-mag-row__body {
	min-width: 0;
}

.fh-mag-row .fh-mag-meta {
	margin-bottom: 10px;
}

.fh-mag-row__title {
	margin: 0 0 9px;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(17px, 1.5vw, 23px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.fh-mag-row:hover .fh-mag-row__title {
	color: var(--fh-yellow);
}

.fh-mag-row__excerpt {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 12.5px;
	line-height: 1.6;
}


/* --------------------------------
   ARTÍCULOS RECIENTES
-------------------------------- */

.fh-mag-recent {
	padding: clamp(44px, 5vw, 74px) 0;
	background: var(--fh-black);
}

.fh-mag-heading {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 34px);
	margin-bottom: clamp(20px, 2.4vw, 32px);
}

.fh-mag-heading__title {
	flex-shrink: 0;
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(24px, 2.7vw, 40px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-mag-heading__rule {
	flex: 1;
	height: 1px;
	background: var(--fh-border);
}

.fh-mag-heading__link {
	flex-shrink: 0;
}

.fh-mag-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 20px);
}

.fh-mag-card {
	background: #0B0B0B;
	border: 1px solid var(--fh-hairline);
	transition: border-color 0.3s ease;
}

.fh-mag-card:hover {
	border-color: rgba(245, 197, 24, 0.45);
}

.fh-mag-card__link {
	display: block;
	height: 100%;
}

.fh-mag-card__media {
	aspect-ratio: 16 / 11;
}

.fh-mag-card:hover .fh-media__img {
	transform: scale(1.05);
}

.fh-mag-card__tag {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 6px 10px;
	background: var(--fh-yellow);
	color: var(--fh-black);
	font-family: var(--fh-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-mag-card__body {
	padding: 14px 16px 18px;
}

.fh-mag-card__title {
	margin: 8px 0 14px;
	color: var(--fh-white);
	font-family: var(--fh-font-body);
	font-size: clamp(14.5px, 1.15vw, 17px);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.005em;
	transition: color 0.25s ease;
}

.fh-mag-card:hover .fh-mag-card__title {
	color: var(--fh-yellow);
}


/* --------------------------------
   BANNER / ENVÍA TU HISTORIA
-------------------------------- */

.fh-mag-banner {
	position: relative;
	padding: clamp(28px, 3.2vw, 46px) 0;
	background-color: var(--fh-yellow);
	color: var(--fh-black);
	overflow: hidden;
}

/* Suciedad de imprenta en las esquinas. */
.fh-mag-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(70% 120% at 10% 0%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 58%),
		radial-gradient(62% 130% at 92% 100%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 62%);
	pointer-events: none;
}

.fh-mag-banner__crown {
	position: absolute;
	top: 50%;
	right: -1.5%;
	z-index: 1;
	width: clamp(120px, 13vw, 200px);
	height: auto;
	fill: rgba(13, 13, 13, 0.12);
	transform: translateY(-50%) rotate(-6deg);
	pointer-events: none;
}

.fh-mag-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.6vw, 42px);
}

.fh-mag-banner__icon {
	flex-shrink: 0;
	width: clamp(40px, 4.6vw, 64px);
	height: auto;
	fill: none;
	stroke: var(--fh-black);
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fh-mag-banner__content {
	flex: 1;
	min-width: 0;
}

.fh-mag-banner__title {
	margin: 0;
	color: var(--fh-black);
	font-family: var(--fh-font-display);
	font-size: clamp(22px, 2.5vw, 38px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

/* Segunda línea del titular: mismo negro, la jerarquía la marca el tamaño. */
.fh-mag-banner__title span {
	display: block;
	font-size: 0.8em;
}

.fh-mag-banner__text {
	margin: 12px 0 0;
	color: rgba(13, 13, 13, 0.7);
	font-size: 14px;
	line-height: 1.6;
}

.fh-mag-banner__cta {
	flex-shrink: 0;
}


/* ================================
   REVISTA URBANA RESPONSIVE
================================ */

/* Portátiles */
@media (max-width: 1180px) {

	.fh-mag-hero__media {
		width: 48%;
	}

	.fh-mag-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* Tablet horizontal: la composición editorial se apila */
@media (max-width: 1080px) {

	.fh-mag-lead__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(20px, 3vw, 30px);
	}

	.fh-mag-feature__link {
		min-height: clamp(320px, 44vw, 440px);
	}

	.fh-mag-lead__list {
		grid-template-rows: none;
	}

	.fh-mag-row:first-child {
		padding-top: 0;
	}

	/* A todo el ancho, la miniatura se fija para que la fila no se estire. */
	.fh-mag-row__link {
		grid-template-columns: clamp(132px, 20vw, 190px) minmax(0, 1fr);
		align-items: center;
	}

	.fh-mag-row__media {
		aspect-ratio: 4 / 3;
	}

}

/* Tablet vertical */
@media (max-width: 900px) {

	.fh-mag-hero {
		min-height: 0;
	}

	.fh-mag-hero__media {
		width: 66%;
		opacity: 0.34;
	}

	.fh-mag-hero__content {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(22px, 3.4vw, 30px);
	}

	.fh-mag-hero__title {
		font-size: clamp(56px, 15vw, 96px);
	}

	.fh-mag-hero__aside {
		max-width: none;
		padding-top: 22px;
		padding-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		border-left: 0;
	}

	/* Los filtros pasan a scroll horizontal. */
	.fh-mag-filters__list {
		overflow-x: auto;
		flex: 1;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.fh-mag-filters__list::-webkit-scrollbar {
		display: none;
	}

	.fh-mag-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fh-mag-banner__inner {
		flex-wrap: wrap;
	}

	.fh-mag-banner__cta {
		width: auto;
	}

}

/* Móvil */
@media (max-width: 720px) {

	.fh-mag-hero__watermark {
		right: -6%;
		font-size: clamp(150px, 42vw, 240px);
	}

	.fh-mag-heading {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.fh-mag-heading__rule {
		display: none;
	}

	.fh-mag-heading__title {
		flex: 1 1 100%;
		font-size: clamp(30px, 7.6vw, 38px);
	}

	.fh-mag-feature__title {
		font-size: clamp(30px, 8vw, 40px);
	}

	.fh-mag-row__link {
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.fh-mag-row__title {
		font-size: clamp(18px, 4.8vw, 21px);
	}

	.fh-mag-row__excerpt {
		display: none;
	}

	.fh-mag-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.fh-mag-banner__icon {
		width: 42px;
	}

	.fh-mag-banner__cta {
		width: 100%;
		justify-content: center;
	}

	.fh-mag-banner__crown {
		right: -12%;
		opacity: 0.7;
	}

}

@media (max-width: 560px) {

	.fh-mag-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fh-mag-card__title {
		font-size: clamp(15.5px, 4.4vw, 17.5px);
	}

	.fh-mag-filters__inner {
		gap: 14px;
	}

	.fh-mag-filters__search span {
		display: none;
	}

}


/* ================================
   UTILIDADES
================================ */

/* Oculta visualmente pero mantiene accesible a lectores de pantalla.
   Usado por las <label> del formulario de contacto (los placeholders
   ya comunican el propósito de cada campo en pantalla). */
.fh-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ================================
   CONTACTO
   Página editorial (page-contacto.php).
   Reutiliza .fh-container, .fh-media, .fh-link, .fh-button, .fh-breadcrumb
   y, en el bloque final, el CTA completo de portada (.fh-cta).
================================ */

.fh-contact .fh-media__img {
	filter: grayscale(1) contrast(1.08) brightness(0.95);
}


/* --------------------------------
   HERO
-------------------------------- */

.fh-contact-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(24px, 2.4vw, 36px) clamp(46px, 5.2vw, 76px);
	background: var(--fh-ink);
	overflow: hidden;
}

.fh-contact-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(50% 60% at 82% 46%, rgba(245, 197, 24, 0.09) 0%, rgba(245, 197, 24, 0) 62%),
		radial-gradient(70% 80% at 70% 54%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 66%),
		linear-gradient(92deg, #07080A 0%, #0A0B0C 40%, #0D0E10 66%, #07080A 100%);
}

.fh-contact-hero__background::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px);
	background-size: 4px 4px;
	opacity: 0.04;
}

.fh-contact-hero__background::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 76% 20%, rgba(245, 197, 24, 0.8) 0 2px, transparent 3px),
		radial-gradient(circle at 82% 34%, rgba(245, 197, 24, 0.5) 0 3px, transparent 4px),
		radial-gradient(circle at 90% 52%, rgba(245, 197, 24, 0.4) 0 2.5px, transparent 3.5px),
		radial-gradient(circle at 73% 60%, rgba(245, 197, 24, 0.55) 0 1.5px, transparent 2.5px);
	pointer-events: none;
}

.fh-contact-hero__container {
	position: relative;
	z-index: 2;
}

.fh-contact-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
	column-gap: clamp(28px, 4vw, 64px);
	align-items: center;
	margin-top: clamp(28px, 3.6vw, 48px);
}

/* Título CONTACTO */

.fh-contact-hero__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(56px, 8.6vw, 140px);
	font-weight: 400;
	line-height: 0.86;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.fh-contact-hero__title span {
	color: var(--fh-yellow);
}

/* Reclamo apilado: HABLEMOS. / COLABORACIONES, / PRENSA, / ... */

.fh-contact-hero__claim {
	display: flex;
	flex-direction: column;
	margin-top: clamp(18px, 2.2vw, 28px);
	font-family: var(--fh-font-display);
	font-size: clamp(19px, 2vw, 29px);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-contact-hero__claim span:first-child {
	color: var(--fh-white);
}

.fh-contact-hero__claim span:not(:first-child) {
	color: rgba(255, 255, 255, 0.42);
}

.fh-contact-hero__note {
	margin: clamp(18px, 2.2vw, 26px) 0 0;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Fotografía */

.fh-contact-hero__media {
	aspect-ratio: 4 / 5;
	background: #141414;
}

.fh-contact-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(7, 8, 10, 0) 55%, rgba(7, 8, 10, 0.7) 100%);
	pointer-events: none;
}


/* --------------------------------
   CONTACTO + FORMULARIO
-------------------------------- */

.fh-contact-main {
	padding: clamp(56px, 6.4vw, 96px) 0;
	background: var(--fh-black);
}

.fh-contact-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
	column-gap: clamp(40px, 5.4vw, 88px);
	align-items: start;
}

/* --- Datos de contacto --- */

.fh-contact-info__list {
	margin: 0;
	padding-top: 4px;
}

.fh-contact-info__item {
	padding-block: 22px;
	border-bottom: 1px solid var(--fh-border);
}

.fh-contact-info__item:first-child {
	padding-top: 0;
}

.fh-contact-info__item dt {
	margin: 0 0 10px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.fh-contact-info__item dd {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-body);
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 600;
	line-height: 1.5;
}

.fh-contact-info__item dd a {
	transition: color 0.22s ease;
}

.fh-contact-info__item dd a:hover {
	color: var(--fh-yellow);
}

/* --- Formulario --- */

.fh-contact-form__title {
	margin: 0 0 clamp(24px, 2.8vw, 34px);
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(24px, 2.6vw, 38px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-contact-form__fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fh-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.fh-contact-form__field {
	display: flex;
}

.fh-contact-form input,
.fh-contact-form textarea {
	width: 100%;
	padding: 16px 18px;
	background: #141414;
	border: 1px solid var(--fh-border);
	color: var(--fh-white);
	font-family: var(--fh-font-body);
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.22s ease, background 0.22s ease;
}

.fh-contact-form textarea {
	resize: vertical;
	min-height: 140px;
}

.fh-contact-form input::placeholder,
.fh-contact-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.fh-contact-form input:focus,
.fh-contact-form textarea:focus {
	background: #181818;
	border-color: var(--fh-yellow);
	outline: none;
}

.fh-contact-form__submit {
	align-self: flex-start;
	margin-top: 6px;
	border: 0;
	cursor: pointer;
}


/* ================================
   CONTACTO RESPONSIVE
================================ */

@media (max-width: 1180px) {

	.fh-contact-hero__title {
		font-size: clamp(52px, 9.4vw, 110px);
	}

}

@media (max-width: 1080px) {

	.fh-contact-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.fh-contact-hero__media {
		max-width: 420px;
		aspect-ratio: 16 / 10;
	}

	.fh-contact-main__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

}

@media (max-width: 720px) {

	.fh-contact-hero__claim {
		font-size: clamp(18px, 4.6vw, 24px);
	}

	.fh-contact-form__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.fh-contact-form__submit {
		width: 100%;
		justify-content: center;
	}

}


/* ================================
   NOSOTROS
   Página institucional corta (page-nosotros.php).
   Reutiliza .fh-container, .fh-media, .fh-breadcrumb, .fh-artist__role
   (tipografía) y las mismas escalas tipográficas del resto del sitio.
================================ */

.fh-nosotros .fh-media__img {
	filter: grayscale(1) contrast(1.08) brightness(0.95);
}


/* --------------------------------
   HERO
-------------------------------- */

.fh-nosotros-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(24px, 2.4vw, 36px) clamp(56px, 6.4vw, 92px);
	background: var(--fh-ink);
	overflow: hidden;
}

.fh-nosotros-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(50% 62% at 80% 44%, rgba(245, 197, 24, 0.08) 0%, rgba(245, 197, 24, 0) 62%),
		radial-gradient(70% 80% at 70% 54%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 66%),
		linear-gradient(92deg, #07080A 0%, #0A0B0C 40%, #0D0E10 66%, #07080A 100%);
}

.fh-nosotros-hero__background::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px);
	background-size: 4px 4px;
	opacity: 0.04;
}

.fh-nosotros-hero__container {
	position: relative;
	z-index: 2;
}

.fh-nosotros-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr);
	column-gap: clamp(28px, 4vw, 64px);
	align-items: center;
	margin-top: clamp(28px, 3.6vw, 48px);
}

.fh-nosotros-hero__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(52px, 7.6vw, 118px);
	font-weight: 400;
	line-height: 0.86;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.fh-nosotros-hero__title span {
	color: var(--fh-yellow);
}

.fh-nosotros-hero__subtitle {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--fh-font-display);
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-nosotros-hero__text {
	max-width: 480px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--fh-font-body);
	font-size: 14px;
	line-height: 1.7;
}

/* Marca "FH" grande, en contorno, a la derecha del hero. */

.fh-nosotros-hero__mark-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(220px, 24vw, 360px);
}

.fh-nosotros-hero__mark-wrap::before {
	content: "";
	position: absolute;
	inset: 10%;
	background-image: radial-gradient(rgba(245, 197, 24, 0.5) 1px, transparent 1px);
	background-size: 14px 14px;
	opacity: 0.12;
	pointer-events: none;
}

.fh-nosotros-hero__mark {
	position: relative;
	color: transparent;
	font-family: var(--fh-font-display);
	font-size: clamp(140px, 17vw, 300px);
	font-weight: 400;
	line-height: 0.8;
	letter-spacing: -0.02em;
	-webkit-text-stroke: 2.5px rgba(245, 197, 24, 0.55);
	user-select: none;
}


/* --------------------------------
   EQUIPO
-------------------------------- */

.fh-team {
	padding: clamp(64px, 7vw, 96px) 0;
	background: var(--fh-black);
}

.fh-team__heading {
	max-width: 640px;
	margin-bottom: clamp(36px, 4.2vw, 56px);
}

.fh-team__label {
	display: block;
	margin-bottom: 14px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.fh-team__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(26px, 3.1vw, 44px);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-team__title span {
	color: var(--fh-yellow);
}

.fh-team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(16px, 1.8vw, 24px);
}

.fh-team-card {
	background: #0B0B0B;
	border: 1px solid rgba(245, 197, 24, 0.14);
	transition: border-color 0.3s ease;
}

.fh-team-card:hover {
	border-color: rgba(245, 197, 24, 0.45);
}

.fh-team-card:hover .fh-media__img {
	transform: scale(1.04);
}

.fh-team-card__media {
	aspect-ratio: 3 / 4;
	background: #141414;
}

.fh-team-card__body {
	padding: 18px 18px 22px;
}

.fh-team-card__name {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-team-card__role {
	display: block;
	margin-top: 8px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-team-card__text {
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12.5px;
	line-height: 1.6;
}


/* --------------------------------
   VALORES
-------------------------------- */

.fh-values {
	padding: clamp(56px, 6.4vw, 88px) 0 clamp(72px, 8vw, 104px);
	background: var(--fh-black);
	border-top: 1px solid var(--fh-hairline);
}

.fh-values__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(20px, 2.4vw, 34px);
}

.fh-value {
	padding-right: clamp(12px, 1.6vw, 24px);
	border-right: 1px solid var(--fh-hairline);
}

.fh-value:last-child {
	padding-right: 0;
	border-right: 0;
}

.fh-value__icon {
	width: 26px;
	height: 26px;
	margin-bottom: 18px;
	fill: none;
	stroke: var(--fh-yellow);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fh-value__title {
	margin: 0 0 10px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-display);
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.fh-value__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	line-height: 1.6;
}


/* ================================
   NOSOTROS RESPONSIVE
================================ */

@media (max-width: 1180px) {

	.fh-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fh-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(28px, 4vw, 40px);
	}

	.fh-value {
		border-right: 0;
		padding-right: 0;
	}

	.fh-value:nth-child(odd) {
		padding-right: clamp(12px, 3vw, 24px);
		border-right: 1px solid var(--fh-hairline);
	}

}

@media (max-width: 1080px) {

	.fh-nosotros-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.fh-nosotros-hero__title {
		font-size: clamp(56px, 15vw, 86px);
	}

	.fh-nosotros-hero__subtitle {
		font-size: clamp(24px, 6.4vw, 30px);
	}

	.fh-nosotros-hero__mark-wrap {
		order: -1;
		min-height: clamp(160px, 34vw, 240px);
	}

	.fh-nosotros-hero__mark {
		font-size: clamp(100px, 22vw, 180px);
	}

}

@media (max-width: 720px) {

	.fh-team__title {
		font-size: clamp(36px, 9.6vw, 48px);
	}

	.fh-team__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fh-team-card__name {
		font-size: clamp(17px, 4.6vw, 20px);
	}

	.fh-team-card__text {
		font-size: 13.5px;
	}

	.fh-values__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.fh-value:nth-child(odd) {
		border-right: 0;
		padding-right: 0;
	}

}


/* ================================
   NOSOTROS · CONTENIDO INSTITUCIONAL
   Bloques 01–03 (versión editorial breve) en page-nosotros.php.
   Reutiliza tokens, .fh-container, .fh-media y .fh-cta.
   Todas las clases con prefijo .fh-nos- para no chocar con lo existente.
================================ */

.fh-nos {
	background: var(--fh-black);
}

.fh-nos-block {
	padding-block: clamp(48px, 6vw, 88px);
	border-top: 1px solid var(--fh-hairline);
}

.fh-nos-block:first-child {
	border-top: 0;
}

/* Número grande como elemento gráfico. */
.fh-nos-index {
	display: block;
	color: var(--fh-yellow);
	font-family: var(--fh-font-display);
	font-size: clamp(40px, 5.4vw, 84px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.fh-nos-heading {
	margin: 14px 0 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(24px, 2.9vw, 40px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-nos-lead {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--fh-font-body);
	font-size: clamp(15px, 1.5vw, 19px);
	line-height: 1.7;
}

.fh-nos-text {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
	line-height: 1.75;
}

.fh-nos-text:last-child {
	margin-bottom: 0;
}


/* Dos columnas: número/título | texto. */

.fh-nos-split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
	column-gap: clamp(28px, 5vw, 88px);
	align-items: start;
}

.fh-nos-split__body {
	max-width: 640px;
}

/* Espacio preparado para imagen (placeholder hasta subir la foto). */
.fh-nos-figure {
	margin-top: clamp(24px, 3vw, 36px);
	aspect-ratio: 16 / 9;
}

.fh-nos-figure .fh-media__img {
	filter: grayscale(1) contrast(1.08) brightness(0.95);
}


/* 03 / 04 · Misión y Visión enfrentadas. */

.fh-nos-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 64px);
}

.fh-nos-duo__item {
	padding-top: 22px;
	border-top: 1px solid rgba(245, 197, 24, 0.4);
}

.fh-nos-duo__item .fh-nos-text {
	margin-top: 14px;
}


/* Tres conceptos destacados (¿Qué es Freestyle House?). */

.fh-nos-triple {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 28px);
	margin: clamp(26px, 3.2vw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.fh-nos-triple li {
	padding-top: 16px;
	border-top: 1px solid rgba(245, 197, 24, 0.4);
	color: var(--fh-yellow);
	font-family: var(--fh-font-display);
	font-size: clamp(15px, 1.5vw, 20px);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}


/* ================================
   NOSOTROS · CONTENIDO — RESPONSIVE
================================ */

@media (max-width: 900px) {

	.fh-nos-split {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(20px, 4vw, 28px);
	}

	.fh-nos-heading {
		font-size: clamp(30px, 8vw, 38px);
	}

	.fh-nos-lead {
		font-size: clamp(16px, 4.4vw, 19px);
	}

	.fh-nos-duo {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media (max-width: 720px) {

	.fh-nos-triple {
		grid-template-columns: minmax(0, 1fr);
	}

}


/* ================================
   REVISTA · AJUSTES PARA CONTENIDO DINÁMICO
   Sólo variantes para cuando hay pocas entradas (MVP).
   El marcado y las clases base no cambian.
================================ */

/* Un único artículo: el principal ocupa todo el ancho. */
.fh-mag-lead__grid--solo {
	grid-template-columns: minmax(0, 1fr);
}

/* Menos de 3 secundarios: la lista fluye en vez de repartir 3 filas. */
.fh-mag-lead__list--flow {
	grid-template-rows: none;
	align-content: start;
}


/* ================================
   ARTÍCULO INDIVIDUAL (single.php)
   Reutiliza .fh-container, .fh-breadcrumb, .fh-media, .fh-mag-meta,
   .fh-link y .fh-button. Misma identidad: negro + amarillo + blanco.
================================ */

.fh-article .fh-media__img {
	filter: grayscale(1) contrast(1.08) brightness(0.95);
}


/* --------------------------------
   CABECERA
-------------------------------- */

.fh-article-hero {
	padding-block: clamp(22px, 2.6vw, 40px) clamp(28px, 3.4vw, 48px);
	background: var(--fh-ink);
	border-bottom: 1px solid var(--fh-hairline);
}

.fh-article-hero__cat {
	display: inline-block;
	margin-top: clamp(18px, 2.4vw, 30px);
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color 0.22s ease;
}

.fh-article-hero__cat:hover {
	color: var(--fh-white);
}

.fh-article-hero__title {
	margin: 12px 0 0;
	max-width: 20ch;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(32px, 5.4vw, 74px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.fh-article-hero__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: clamp(16px, 2vw, 24px) 0 0;
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-article-hero__author {
	color: rgba(255, 255, 255, 0.62);
}


/* --------------------------------
   IMAGEN DESTACADA
-------------------------------- */

.fh-article__figure {
	margin-top: clamp(20px, 3vw, 40px);
	aspect-ratio: 16 / 9;
}


/* --------------------------------
   CUERPO
-------------------------------- */

.fh-article__body {
	padding-block: clamp(36px, 5vw, 72px);
	background: var(--fh-black);
}

.fh-article__content {
	max-width: 720px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--fh-font-body);
	font-size: 16px;
	line-height: 1.8;
}

.fh-article__content > * {
	margin-block: 0;
}

.fh-article__content > * + * {
	margin-top: 1.4em;
}

.fh-article__content > *:first-child {
	margin-top: 0;
}

.fh-article__content h2,
.fh-article__content h3,
.fh-article__content h4 {
	margin-top: 1.9em;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-article__content h2 {
	font-size: clamp(24px, 2.6vw, 34px);
}

.fh-article__content h3 {
	font-size: clamp(20px, 2vw, 26px);
}

.fh-article__content h4 {
	font-size: clamp(17px, 1.5vw, 20px);
}

.fh-article__content a {
	color: var(--fh-yellow);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fh-article__content strong {
	color: var(--fh-white);
}

.fh-article__content ul,
.fh-article__content ol {
	padding-left: 1.3em;
}

.fh-article__content li + li {
	margin-top: 0.5em;
}

.fh-article__content blockquote {
	margin-left: 0;
	padding-left: clamp(16px, 2vw, 24px);
	border-left: 2px solid var(--fh-yellow);
	color: var(--fh-white);
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.5;
}

.fh-article__content img,
.fh-article__content figure {
	display: block;
	height: auto;
}

.fh-article__content figure {
	margin-inline: 0;
}

.fh-article__content figcaption {
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
}

.fh-article__content hr {
	margin-block: 2em;
	border: 0;
	border-top: 1px solid var(--fh-hairline);
}

.fh-article__pages {
	margin-top: 2em;
	font-family: var(--fh-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
}

.fh-article__pages a {
	color: var(--fh-yellow);
}


/* --------------------------------
   NAVEGACIÓN ANTERIOR / SIGUIENTE
-------------------------------- */

.fh-article-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 3vw, 40px);
	margin-top: clamp(40px, 5vw, 68px);
	padding-top: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--fh-hairline);
}

.fh-article-nav__item--next {
	text-align: right;
}

.fh-article-nav__label {
	display: block;
	margin-bottom: 8px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.fh-article-nav__title {
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(16px, 1.6vw, 22px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.fh-article-nav__title:hover {
	color: var(--fh-yellow);
}

.fh-article__back {
	margin-top: clamp(36px, 4.4vw, 56px);
}


/* ================================
   ARTÍCULO INDIVIDUAL RESPONSIVE
================================ */

@media (max-width: 640px) {

	/* El título de artículo/sesión/artista era el H1 más pequeño del
	   sitio (floor 32px) frente a sus hermanos (Revista, Nosotros,
	   Sesiones ≈ 44-52px). El 20ch de desktop no llega a limitar el
	   ancho aquí (el contenedor móvil ya es más estrecho), pero se
	   deja explícito para que el título pueda usar todo el ancho. */
	.fh-article-hero__title {
		max-width: none;
		font-size: clamp(42px, 12vw, 56px);
	}

	.fh-article-nav {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.fh-article-nav__item--next {
		text-align: left;
	}

}


/* ================================
   SESIONES (CPT) · archivo + individual
   Reutiliza .fh-container, .fh-breadcrumb, .fh-media, .fh-link,
   .fh-button y el bloque .fh-article-*. Identidad: negro/amarillo/blanco.
================================ */

.fh-sesiones .fh-media__img,
.fh-sesion .fh-media__img {
	filter: grayscale(1) contrast(1.08) brightness(0.95);
}


/* --------------------------------
   ARCHIVO / GRID
-------------------------------- */

.fh-sesiones-archive {
	padding-block: clamp(28px, 3.4vw, 48px) clamp(56px, 7vw, 100px);
	background: var(--fh-black);
}

.fh-sesiones-archive__head {
	margin-bottom: clamp(32px, 4.4vw, 60px);
}

.fh-sesiones-archive__title {
	margin: clamp(14px, 2vw, 22px) 0 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(44px, 9vw, 120px);
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.fh-sesiones-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 44px);
}

.fh-sesion-card {
	border-top: 1px solid rgba(245, 197, 24, 0.4);
	padding-top: 16px;
}

.fh-sesion-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.fh-sesion-card__num {
	color: var(--fh-yellow);
	font-family: var(--fh-font-display);
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.fh-sesion-card__media {
	aspect-ratio: 4 / 5;
	margin: 14px 0 16px;
}

.fh-sesion-card:hover .fh-media__img {
	transform: scale(1.05);
}

.fh-sesion-card__artist {
	margin: 0 0 8px;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(18px, 1.7vw, 26px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.fh-sesion-card:hover .fh-sesion-card__artist {
	color: var(--fh-yellow);
}

.fh-sesion-card__meta {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-sesion-card__cta {
	margin-top: auto;
}

.fh-sesion-card:hover .fh-sesion-card__cta span {
	transform: translateX(6px);
}

.fh-sesiones-empty {
	margin: 0;
	padding: clamp(48px, 10vw, 132px) 0;
	color: rgba(255, 255, 255, 0.14);
	font-family: var(--fh-font-display);
	font-size: clamp(44px, 11vw, 150px);
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}


/* --------------------------------
   SESIÓN INDIVIDUAL (extras sobre .fh-article-*)
-------------------------------- */

.fh-sesion-hero__artist {
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--fh-font-body);
	font-size: clamp(14px, 1.4vw, 18px);
	line-height: 1.5;
}

.fh-sesion-video {
	max-width: 900px;
	margin-top: clamp(30px, 4.4vw, 56px);
}

.fh-sesion-video__label {
	display: block;
	margin-bottom: 12px;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.fh-sesion-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 1px solid var(--fh-hairline);
}

.fh-sesion-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ================================
   SESIONES RESPONSIVE
================================ */

@media (max-width: 960px) {

	.fh-sesiones-archive__title {
		font-size: clamp(52px, 15vw, 90px);
	}

	.fh-sesiones-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 560px) {

	.fh-sesiones-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fh-sesion-card__artist {
		font-size: clamp(20px, 5.6vw, 26px);
	}

}


/* ================================
   INICIO · ESTADO VACÍO DE "ÚLTIMAS SESIONES"
   Se muestra sólo cuando aún no hay sesiones publicadas.
   Mismo lenguaje "PRÓXIMAMENTE" que el archivo, adaptado al fondo amarillo.
================================ */

.fh-sessions__empty {
	margin: clamp(18px, 4vw, 44px) 0 0;
	color: rgba(0, 0, 0, 0.16);
	font-family: var(--fh-font-display);
	font-size: clamp(44px, 9vw, 128px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}


/* ================================
   THE NEW CONCEP — CPT "new_concep"
   Catálogo de modelos/talento audiovisual. Mismo lenguaje visual que
   Sesiones/Artistas: negro + amarillo + blanco, Anton/Inter/JetBrains Mono.
   Reutiliza .fh-container, .fh-breadcrumb, .fh-media, .fh-link, .fh-button
   y el bloque .fh-article-*.
================================ */

.fh-nc .fh-media__img {
	filter: grayscale(1) contrast(1.08) brightness(0.95);
}


/* --------------------------------
   ARCHIVO / GRID
-------------------------------- */

.fh-new-concep-archive {
	padding-block: clamp(28px, 3.4vw, 48px) clamp(56px, 7vw, 100px);
	background: var(--fh-black);
}

.fh-new-concep-archive__head {
	margin-bottom: clamp(32px, 4.4vw, 60px);
}

.fh-new-concep-archive__title {
	margin: clamp(14px, 2vw, 22px) 0 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(44px, 9vw, 120px);
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.fh-new-concep-archive__subtitle {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--fh-font-body);
	font-size: clamp(14px, 1.4vw, 18px);
}

.fh-nc-featured {
	margin-bottom: clamp(36px, 5vw, 64px);
	padding-bottom: clamp(28px, 3.6vw, 48px);
	border-bottom: 1px solid var(--fh-hairline);
}

.fh-nc-featured__link {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(24px, 3.6vw, 56px);
	align-items: center;
}

.fh-nc-featured__media {
	aspect-ratio: 4 / 5;
}

.fh-nc-featured:hover .fh-media__img {
	transform: scale(1.05);
}

.fh-nc-featured__tag {
	display: inline-block;
	color: var(--fh-yellow);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.fh-nc-featured__name {
	margin: 14px 0 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(32px, 4.4vw, 64px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.fh-nc-featured:hover .fh-nc-featured__name {
	color: var(--fh-yellow);
}

.fh-nc-featured__alias {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--fh-font-body);
	font-size: clamp(14px, 1.4vw, 18px);
}

.fh-nc-featured__meta {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--fh-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fh-nc-featured__cta {
	margin-top: 18px;
}

.fh-nc-featured:hover .fh-nc-featured__cta span {
	transform: translateX(6px);
}

.fh-new-concep-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 44px);
}

.fh-nc-card {
	border-top: 1px solid rgba(245, 197, 24, 0.4);
	padding-top: 16px;
}

.fh-nc-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.fh-nc-card__media {
	aspect-ratio: 4 / 5;
	margin-bottom: 16px;
}

.fh-nc-card:hover .fh-media__img {
	transform: scale(1.05);
}

.fh-nc-card__name {
	margin: 0 0 6px;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(18px, 1.7vw, 26px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.fh-nc-card:hover .fh-nc-card__name {
	color: var(--fh-yellow);
}

.fh-nc-card__alias {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--fh-font-body);
	font-size: 14px;
}

.fh-nc-card__meta {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fh-nc-card__cta {
	margin-top: auto;
}

.fh-nc-card:hover .fh-nc-card__cta span {
	transform: translateX(6px);
}

.fh-new-concep-empty {
	margin: 0;
	padding: clamp(48px, 10vw, 132px) 0;
	color: rgba(255, 255, 255, 0.14);
	font-family: var(--fh-font-display);
	font-size: clamp(44px, 11vw, 150px);
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}


/* ================================
   THE NEW CONCEP RESPONSIVE
================================ */

@media (max-width: 960px) {

	.fh-new-concep-archive__title {
		font-size: clamp(52px, 15vw, 90px);
	}

	.fh-nc-featured__link {
		grid-template-columns: minmax(0, 1fr);
	}

	.fh-new-concep-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 560px) {

	.fh-new-concep-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fh-nc-card__name {
		font-size: clamp(20px, 5.6vw, 26px);
	}

	.fh-nc-featured__name {
		font-size: clamp(30px, 8vw, 44px);
	}

}


/* ================================
   THE NEW CONCEP — HOME
   Sección de Inicio para el catálogo de modelos (CPT "new_concep").
   Mismo lenguaje visual que Sesiones/Artistas: negro + amarillo + blanco,
   Anton/Inter/JetBrains Mono. Reutiliza .fh-container, .fh-media, .fh-link,
   .fh-button, .fh-button--yellow, .fh-sessions__footer y .fh-sesiones-empty.
================================ */

.fh-nc-home {
	padding: 88px 0 92px;
	background: var(--fh-black);
	color: var(--fh-white);
}

.fh-nc-home__head {
	margin-bottom: clamp(28px, 3.6vw, 44px);
}

.fh-nc-home__title {
	margin: 0;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(26px, 3.1vw, 45px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.fh-nc-home__subtitle {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--fh-font-body);
	font-size: clamp(14px, 1.4vw, 18px);
}

/* --- Grid de 4 tarjetas con el mismo peso visual.
   fh_nc_destacado solo decide el orden y la etiqueta "DESTACADO": la
   tarjeta usa exactamente el mismo tamaño y estructura que las demás. --- */

.fh-nc-home__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}

.fh-nc-home__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--fh-white);
}

.fh-nc-home__media {
	position: relative;
	aspect-ratio: 4 / 5;
	margin-bottom: 14px;
}

.fh-nc-home__card:hover .fh-media__img {
	transform: scale(1.05);
}

.fh-nc-home__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 6px 10px;
	background: var(--fh-yellow);
	color: var(--fh-black);
	font-family: var(--fh-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fh-nc-home__name {
	margin: 0 0 6px;
	color: var(--fh-white);
	font-family: var(--fh-font-display);
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.fh-nc-home__card:hover .fh-nc-home__name {
	color: var(--fh-yellow);
}

.fh-nc-home__meta {
	display: block;
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--fh-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fh-nc-home__link {
	margin-top: auto;
}

.fh-nc-home__card:hover .fh-nc-home__link span {
	transform: translateX(6px);
}


/* ================================
   THE NEW CONCEP — HOME RESPONSIVE
================================ */

@media (max-width: 960px) {

	.fh-nc-home__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 560px) {

	.fh-nc-home {
		padding: 72px 0 80px;
	}

	.fh-nc-home__title {
		font-size: clamp(38px, 10.5vw, 50px);
	}

	.fh-nc-home__grid {
		grid-template-columns: minmax(0, 1fr);
	}

}