/* ============================================================
   VARIABLES — tokens extraídos de la librería Figma "Joan Pere"
   ============================================================ */
:root {
	/* Paleta principal */
	--color-primary:       #063E4F; /* Primario */
	--color-primary-100:   #E7F8FD; /* Primario100 — tono muy claro */
	--color-primary-50:    #12BAED; /* Primario50  — tono medio */
	--color-primary-0:     #04252F; /* Primario0   — tono oscuro */

	/* Paleta secundaria */
	--color-secondary:     #B0A895; /* Secundario */
	--color-secondary-100: #F8F7F6; /* Secundario100 — tono muy claro */
	--color-secondary-50:  #92876D; /* Secundario50  — tono medio */

	/* Neutros */
	--color-black:         #090807; /* Negro */
	--color-white:         #F8F8F6; /* Blanco */

	/* Estados */
	--color-error:         #ED4512; /* Rojo */
	--color-warning:       #FED766; /* Amarillo */
	--color-success:       #01E77A; /* Verde */

	/* Aliases semánticos para el tema */
	--color-accent:        var(--color-primary-50);
	--color-text:          var(--color-black);
	--color-text-light:    var(--color-secondary-50);
	--color-bg:            var(--color-white);
	--color-border:        var(--color-secondary-100);

	/* Tipografía */
	--font-heading: 'Livvic', system-ui, sans-serif;
	--font-body:    'Livvic', system-ui, sans-serif;

	/* Escala de fuente — valores del diseño Figma */
	--text-cta:  0.875rem;  /*  14px — CTA secundario */
	--text-base: 1rem;      /*  16px — párrafo y CTA principal */
	--text-h4:   1.25rem;   /*  20px — H4 mobile */
	--text-h3:   1.125rem;   /*  18px — H3 mobile */
	--text-h2:   2rem;      /*  32px — H2 mobile */
	--text-h1:   2.25rem;   /*  36px — H1 mobile / H2 desktop */
	--text-h1-lg: 3rem;     /*  48px — H1 desktop */

	/* Espaciado — ajusta según la cuadrícula de Figma */
	--space-1:  0.25rem;   /*  4px */
	--space-2:  0.5rem;    /*  8px */
	--space-3:  0.75rem;   /* 12px */
	--space-4:  1rem;      /* 16px */
	--space-5:  1.25rem;   /* 20px */
	--space-6:  1.5rem;    /* 24px */
	--space-8:  2rem;      /* 32px */
	--space-12: 3rem;      /* 48px */
	--space-16: 4rem;      /* 64px */
	--space-24: 6rem;      /* 96px */

	/* Layout */
	--container-max: 1280px;
	--container-padding: var(--space-6);

	/* Bordes */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-full: 9999px;

	/* Transiciones */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms ease;
}

/* ============================================================
   RESET MÍNIMO
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: clip; /* clip on html, not body — prevents body becoming a scroll container */
}

body {
	overflow-x: visible; /* override WordPress's generated body{overflow-x:clip} that breaks sticky */
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.2;
	font-weight: 700;
}

h1 { font-size: var(--text-h1); font-weight: 600 }
h2 { font-size: var(--text-h2); font-weight: 600; }
h3 { font-size: 1.5rem; }

p { font-size: var(--text-base); }

@media (min-width: 769px) {
	h1 { font-size: var(--text-h1-lg); }
	h2 { font-size: var(--text-h1); }
}

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

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

ul,
ol {
	list-style: none;
}

button {
	cursor: pointer;
	border: none;
	background: none;
	font: inherit;
}

/* ============================================================
   UTILIDADES GLOBALES
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

:root :where(.is-layout-flow) > * {
	margin-block: 0;
}


.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	min-height: 5rem;
	/* Align header content with constrained sections (contentSize: 1280px) */
	padding-inline: max(var(--container-padding), calc((100% - var(--container-max)) / 2));
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	height: 5rem;
}

.site-branding img {
	height: 2.5rem;
	width: auto;
}

/* Language switcher */
.lang-switcher {
	position: relative;
	flex-shrink: 0;
	z-index: 101;
}

.lang-switcher ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	width: fit-content;
	min-width: 2.5rem;
}

/* Current lang always first visually */
.lang-switcher .current-lang {
	order: -1;
}

.lang-switcher li a,
.lang-switcher li span,
.lang-switcher__toggle {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-cta);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-white);
	white-space: nowrap;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

/* Globe icon on current language button */
.lang-switcher .current-lang a::before,
.lang-switcher__toggle::before,
.lang-switcher--single li:not(.current-lang) a::before,
.site-header .is-menu-open .lang-switcher li:not(.current-lang) a::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F8F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media (min-width: 769px) {
	.lang-switcher .current-lang a::after,
	.lang-switcher .current-lang span::after,
	.lang-switcher__toggle::after {
		content: '\25BE';
		font-size: 0.65em;
		line-height: 1;
		transition: transform var(--transition-fast);
	}

	.lang-switcher.is-open .lang-switcher__toggle::after {
		transform: rotate(180deg);
	}

	.lang-switcher__toggle {
		background: transparent;
		letter-spacing: 0;
		transition: color var(--transition-fast);
	}

	.lang-switcher__toggle:hover {
		color: var(--color-secondary);
	}

	.lang-switcher__toggle:focus-visible {
		outline: 2px solid var(--color-secondary);
		outline-offset: 3px;
	}

	.lang-switcher .lang-switcher__options {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 100%;
		background-color: var(--color-primary-0);
		border-radius: var(--radius-sm);
		padding-block: var(--space-2);
	}

	.lang-switcher.is-open .lang-switcher__options {
		display: block;
	}

	.lang-switcher__options a:hover {
		color: var(--color-secondary);
	}

	/* Dos idiomas: solo el enlace al otro idioma, globo + código (Figma). */
	.lang-switcher--single .current-lang {
		display: none;
	}

	.lang-switcher--single li a {
		gap: 5px;
		padding: var(--space-2);
		font-size: var(--text-base);
		letter-spacing: 0;
		transition: color var(--transition-fast);
	}

	.lang-switcher--single li a::before {
		width: 20px;
		height: 20px;
	}

	.lang-switcher--single li a:hover {
		color: var(--color-secondary);
	}

	.lang-switcher--single li a:focus-visible {
		outline: 2px solid var(--color-secondary);
		outline-offset: 2px;
	}

	.site-header .wp-block-site-logo img {
		display: block;
		width: 250px;
		max-width: 100%;
		height: auto;
	}
}

@media (min-width: 1100px) {
	.site-header .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 1.125rem;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container {
		gap: 30px;
	}
}

/* Mobile: todas las lenguas visibles en fila */
@media (max-width: 768px) {
	.lang-switcher__options {
		display: contents;
	}

	.lang-switcher ul {
		flex-direction: row;
		gap: var(--space-1);
	}

	.lang-switcher .current-lang a,
	.lang-switcher .current-lang span {
		background-color: rgb(255 255 255 / 0.2);
	}

	.lang-switcher li:not(.current-lang) a {
		opacity: 0.6;
	}

	.lang-switcher li:not(.current-lang) a:hover {
		opacity: 1;
		background-color: rgb(255 255 255 / 0.15);
	}
}

/* Nav */
.nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.nav-list a {
	font-size: var(--text-sm);
	font-weight: 500;
	transition: color var(--transition-fast);
}

.nav-list a:hover {
	color: var(--color-accent);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: var(--space-2);
}

.nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-text);
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.site-header__navigation {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.mobile-menu-monogram,
.mobile-menu-brand {
	display: none;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.site-main {
	padding-block: 0;
	padding-top: 5rem; /* compensate for fixed header */
}

/* Páginas interiores: padding vertical igual al de las secciones de Home */
.site-main > .container {
	padding-block: var(--space-16);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn--primary {
	background-color: var(--color-accent);
	color: #fff;
}

.btn--primary:hover {
	filter: brightness(1.1);
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.btn--secondary:hover {
	border-color: var(--color-text);
}

.btn--hero {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-base);
}

.btn--hero:hover {
	background-color: var(--color-primary-0);
}

.btn--outline-light {
	background-color: transparent;
	color: var(--color-white);
	border: 1px solid var(--color-white);
	padding: var(--space-3) var(--space-8);
}

.btn--outline-light:hover {
	background-color: rgb(255 255 255 / 0.1);
}

/* ============================================================
   HERO
   ============================================================ */
.section-hero {
	min-height: 80svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-16) var(--space-6);
	background-color: var(--color-primary-0);
	color: var(--color-white);
	background-size: cover;
	background-position: center;
}

.hero-title {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-white);
}

.hero-subtitle {
	font-size: var(--text-h1);
	font-weight: 300;
	color: var(--color-white);
}

.section-hero p {
	color: rgb(255 255 255 / 0.85);
}

.btn-hero .wp-block-button__link {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-base);
}

/* ============================================================
   FEATURED WORK
   ============================================================ */
.section-featured {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-16) var(--space-6);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
	max-width: 1280px;
	margin-inline: auto;
}

.section-featured h2,
.section-featured p {
	color: var(--color-white);
}

.featured-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-cta);
	opacity: 0.7;
}

.featured-video {
	aspect-ratio: 16 / 9;
	background: rgb(0 0 0 / 0.25);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--color-white);
	border: 1px solid var(--color-white);
}

/* ============================================================
   MUSIC SAMPLES
   ============================================================ */
.section-samples {
	background-color: var(--color-white);
	padding: var(--space-16) var(--space-6);
	text-align: center;
	max-width: 1280px;
	margin-inline: auto;
}

.samples-title {
	color: var(--color-primary);
}

.samples-subtitle {
	color: var(--color-text-light);
}

.samples-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	margin-block: var(--space-8);
}

.sample-card {
	aspect-ratio: 125 / 108;
	container-type: inline-size;
	background-color: var(--color-secondary);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2.5vw, 14px);
	padding: var(--space-4);
}

.sample-card p {
	color: var(--color-primary);
	font-weight: 600;
}

/* ============================================================
   AWARD BANNER
   ============================================================ */
.section-award {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-12) var(--space-6);
	text-align: center;
}

.section-award h2 {
	color: var(--color-white);
}

.award-category {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-cta);
	color: rgb(255 255 255 / 0.7);
}

.award-festival {
	font-size: var(--text-cta);
	color: rgb(255 255 255 / 0.7);
}

/* ============================================================
   POSTS GRID (listado de entradas)
   ============================================================ */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--space-8);
}

.post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-base);
}

.post-card:hover {
	box-shadow: 0 4px 24px rgb(0 0 0 / 0.08);
}

.post-card__thumbnail img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.post-card__body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
}

.post-card__title {
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.3;
}

.post-card__date {
	font-size: var(--text-sm);
	color: var(--color-text-light);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
	position: relative;
	min-height: 80svh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary-0);
	/* background-image se aplica desde WordPress o inline style */
	background-size: cover;
	background-position: center;
	text-align: center;
	color: var(--color-white);
}

.hero img {
	filter: sepia(1);
}

.hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 0.5);
}

.hero__content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	padding-inline: var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.hero__title {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-white);
}

.hero__subtitle {
	font-size: var(--text-h2);
	font-weight: 300;
	color: var(--color-white);
	padding: var(--space-16) 0;
}

.hero__description {
	font-size: var(--text-base);
	color: rgb(255 255 255 / 0.8);
	max-width: 480px;
	padding-bottom: var(--space-16);
	font-weight: 400;
}

/* ============================================================
   FEATURED WORK
   ============================================================ */
.featured-work {
	background-color: var(--color-primary);
	padding-block: var(--space-16);
	color: var(--color-white);
}

.featured-work__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
}

.featured-work__text p {
	font-weight: 300;
}

.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: rgb(0 0 0 / 0.3);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-embed img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-embed__play {
	position: relative;
	z-index: 1;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-base), background-color var(--transition-fast);
}

.video-embed__play:hover,
.video-embed__play:active {
	background-color: var(--color-primary-0);
}

/* YouTube container: fills .video-embed, shows thumbnail behind play button */
.video-embed__youtube {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.featured-work__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.featured-work__label {
	font-size: var(--text-cta);
	color: rgb(255 255 255 / 0.7);
	letter-spacing: 0.08em;
}

.featured-work__title {
	color: var(--color-white);
}

/* Pull title close to label — counteracts blockGap:spacing|8 (2rem) */
.featured-work__text > .wp-block-heading.featured-work__title {
	margin-top: -1.75rem;
}

/* ============================================================
   MUSIC SAMPLES
   ============================================================ */
.music-samples {
	background-color: var(--color-white);
	padding-block: var(--space-16);
	position: relative;
}

.back-to-top {
	position: absolute;
	top: var(--space-8);
	right: var(--container-padding);
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--color-border);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.back-to-top:hover {
	border-color: var(--color-primary);
}

.music-samples__header {
	text-align: center;
	margin-bottom: var(--space-12);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.music-samples__title {
	color: var(--color-primary);
}

.music-samples__subtitle {
	color: var(--color-primary);
}

.music-samples__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

.sample-card {
	aspect-ratio: 125 / 108;
	container-type: inline-size;
	background-color: var(--color-secondary);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2.5vw, 14px);
	padding: var(--space-4);
	transition: transform var(--transition-base);
}

.sample-card:hover {
	transform: translateY(-4px);
}

/* Toda la tarjeta es clicable (main.js hace click en su botón de play). */
.sample-card {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.sample-card:hover .sample-card__play:not(:disabled),
.sample-card__play:hover:not(:disabled),
.sample-card__play:active:not(:disabled) {
	background-color: var(--color-primary-0);
}

.sample-card:hover:not(:has(.sample-card__play:disabled)) {
	box-shadow: 0 8px 20px rgb(4 37 47 / 0.18);
}

.sample-card:has(.sample-card__play:disabled) {
	cursor: not-allowed;
}

.sample-card__play {
	width: max(48px, calc(28.8cqi + 9.2px));
	height: max(48px, calc(28.8cqi + 9.2px));
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}


.sample-card__label {
	font-weight: 600;
	color: var(--color-primary);
	font-size: clamp(14px, calc(6.4cqi + 2px), 16px);
}

.sample-card__play-icon {
	display: block;
	flex: 0 0 auto;
	width: max(18px, calc(10.8cqi + 3.5px));
	height: max(18px, calc(11.2cqi + 3.6px));
	overflow: visible;
	fill: currentColor;
}

.sample-card__pause-bars {
	display: none;
}

.sample-card__play.is-playing .sample-card__play-triangle {
	display: none;
}

.sample-card__play.is-playing .sample-card__pause-bars {
	display: block;
}

.sample-card__play:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.sample-card__play:focus-visible,
.music-player__close:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.sample-card audio[hidden],
.sample-card .wp-block-audio[hidden],
.music-player[hidden] {
	display: none !important;
}

body.has-music-player {
	padding-bottom: 160px;
}

.music-player {
	position: fixed;
	inset: auto 0 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 640px) 44px;
	align-items: center;
	gap: 20px;
	padding: 16px 24px;
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	background: var(--color-primary);
	color: var(--color-white);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.music-player__info {
	min-width: 0;
	overflow-wrap: anywhere;
}

.music-player__title {
	display: block;
	font-size: var(--text-base);
}

.music-player__status {
	display: block;
	font-size: 14px;
}

.music-player__audio {
	display: block;
	width: 100%;
	min-width: 0;
	height: 54px;
}

.music-player__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.music-player__artwork,
.music-player__track-title,
.music-player__play,
.music-player__timeline,
.music-player__volume {
	display: none;
}

.music-player__volume-control {
	display: none;
}

/* Reproductor de Filmografía (Figma Player/Film/Default). */
.music-player--film {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	gap: 0;
	height: 100px;
	padding: 0;
	border: 0;
	background: var(--color-secondary);
	color: var(--color-primary-0);
	box-shadow: 0 -2px 12px rgb(0 0 0 / 0.12);
}

.music-player--film .music-player__artwork {
	display: block;
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	object-fit: cover;
}

.music-player--film .music-player__artwork[hidden] {
	display: block;
	background: var(--color-primary-0);
}

.music-player--samples {
	background: #92876d;
}

.music-player--project {
	background: #92876d;
}

.music-player--project .music-player__artwork,
.music-player--project .music-player__artwork[hidden] {
	background-color: var(--color-secondary);
	background-image: url('../images/project-player-placeholder.png');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 1440px 100px;
}

.music-player--samples .music-player__artwork,
.music-player--samples .music-player__artwork[hidden] {
	background: var(--color-primary);
	background-image: url('../images/mobile-monogram-left.svg'), url('../images/mobile-monogram-right.svg');
	background-repeat: no-repeat;
	background-position: calc(50% - 22px) center, calc(50% + 22px) center;
	background-size: 38px 40px;
}

.music-player--film .music-player__info {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 220px;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	margin-left: 15px;
	padding: 0;
	color: var(--color-primary-0);
}

.music-player--film .music-player__track-title,
.music-player--film .music-player__title {
	display: block;
	overflow: hidden;
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.music-player--film .music-player__title {
	font-weight: 400;
}

.music-player--film .music-player__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.music-player--film .music-player__play {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 55px;
	width: 55px;
	height: 55px;
	align-self: center;
	margin-left: 79px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	cursor: pointer;
}

.music-player--film .music-player__play:focus-visible,
.music-player--film .music-player__volume:focus-visible {
	outline: 2px solid var(--color-primary-0);
	outline-offset: 3px;
}

.music-player__play-icon {
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto 0 22px;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 16px solid currentColor;
}

.music-player__play.is-playing .music-player__play-icon {
	width: 16px;
	height: 22px;
	margin: 0 auto;
	border: 0;
	background: linear-gradient(to right, currentColor 0 5px, transparent 5px 11px, currentColor 11px 16px);
}

.music-player--film .music-player__timeline {
	box-sizing: border-box;
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: 42px minmax(0, 1fr) 42px;
	grid-template-rows: 20px 20px;
	align-content: center;
	align-items: center;
	column-gap: 0;
	min-width: 0;
	margin-left: 31px;
	color: var(--color-primary-0);
}

.music-player--film .music-player__current-time,
.music-player--film .music-player__duration {
	font-size: var(--text-cta);
	line-height: 1;
}

.music-player--film .music-player__current-time {
	grid-column: 1;
	grid-row: 2;
}

.music-player--film .music-player__duration {
	grid-column: 3;
	grid-row: 2;
	text-align: right;
}

.music-player--film .music-player__seek {
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100%;
	height: 13px;
	margin: 0;
	appearance: none;
	border-radius: 0;
	background: linear-gradient(to right, var(--color-primary) 0 var(--music-progress, 0%), var(--color-white) var(--music-progress, 0%) 100%);
	cursor: pointer;
}

.music-player--film .music-player__seek::-webkit-slider-thumb {
	width: 3px;
	height: 13px;
	appearance: none;
	border: 0;
	border-radius: 2px;
	background: var(--color-primary);
}

.music-player--film .music-player__seek::-moz-range-thumb {
	width: 3px;
	height: 13px;
	border: 0;
	border-radius: 2px;
	background: var(--color-primary);
}

.music-player--film .music-player__volume-control {
	display: flex;
	position: relative;
	flex: 0 0 24px;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-left: 23px;
}

.music-player--film .music-player__volume {
	display: block;
	flex: 0 0 24px;
	width: 24px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-primary);
	cursor: pointer;
}

.music-player--film .music-player__volume svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.music-player--film .music-player__volume-slash {
	display: none;
}

.music-player--film .music-player__volume[aria-pressed="true"] .music-player__volume-slash {
	display: block;
}

.music-player--film .music-player__volume-popover {
	box-sizing: border-box;
	display: block;
	position: absolute;
	z-index: 2;
	bottom: calc(100% + 24px);
	left: 50%;
	width: 44px;
	height: 144px;
	transform: translateX(-50%);
	border: 1px solid rgb(4 37 47 / 0.2);
	background: var(--color-secondary);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}

.music-player--film .music-player__volume-popover[hidden] {
	display: none;
}

.music-player--film .music-player__volume-range {
	position: absolute;
	top: 57px;
	left: 50%;
	width: 96px;
	height: 14px;
	margin: 0;
	transform: translate(-50%, -50%) rotate(-90deg);
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.music-player--film .music-player__volume-range::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--color-primary) 0 var(--volume-progress, 100%), rgb(248 248 246 / 0.72) var(--volume-progress, 100%) 100%);
}

.music-player--film .music-player__volume-range::-moz-range-track {
	height: 3px;
	border-radius: 2px;
	background: rgb(248 248 246 / 0.72);
}

.music-player--film .music-player__volume-range::-moz-range-progress {
	height: 3px;
	background: var(--color-primary);
}

.music-player--film .music-player__volume-range::-webkit-slider-thumb {
	width: 12px;
	height: 12px;
	margin-top: -4px;
	appearance: none;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	background: var(--color-white);
}

.music-player--film .music-player__volume-range::-moz-range-thumb {
	width: 9px;
	height: 9px;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	background: var(--color-white);
}

.music-player--film .music-player__volume-range:focus-visible {
	outline: 2px solid var(--color-primary-0);
	outline-offset: 5px;
}

.music-player--film .music-player__volume-value {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-primary-0);
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
}

.music-player--film .music-player__close {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	align-self: flex-start;
	margin: 6px 10px 0 50px;
	border: 0;
	border-radius: 0;
	color: var(--color-primary-0);
}

.music-player--film .music-player__close:hover {
	background: rgb(6 62 79 / 0.08);
}

.music-player--film .music-player__audio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

body.has-music-player:has(.music-player--film:not([hidden])) {
	padding-bottom: 100px;
}

@media (max-width: 600px) {
	.music-player {
		grid-template-columns: minmax(0, 1fr) 44px;
		gap: 8px 12px;
		padding-inline: 16px;
	}

	.music-player__audio {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.music-player__close {
		grid-column: 2;
		grid-row: 1;
	}

	.music-player--film {
		height: 78px;
		gap: 0;
	padding-left: 0;
		padding-right: 14px;
	}

	.music-player--film .music-player__artwork,
	.music-player--film .music-player__artwork[hidden] {
		flex-basis: 78px;
		width: 78px;
		height: 78px;
	}

	.music-player--film .music-player__info {
		flex: 1 1 200px;
		gap: 5px;
		margin-left: 7px;
	}

	.music-player--film .music-player__track-title,
	.music-player--film .music-player__title {
		font-size: 12px;
	}

	.music-player--film .music-player__play {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		margin-left: 0;
	}

	.music-player--film .music-player__play-icon {
		margin-left: 16px;
		border-top-width: 8px;
		border-bottom-width: 8px;
		border-left-width: 12px;
	}

	.music-player--film .music-player__timeline,
	.music-player--film .music-player__volume-control {
		display: none;
	}

	.music-player--film .music-player__close {
		flex-basis: 40px;
		margin: 19px 0 0 11px;
	}

	body.has-music-player:has(.music-player--film:not([hidden])) {
		padding-bottom: 78px;
	}
}

.music-samples__cta {
	text-align: center;
	margin-top: var(--space-12);
}

/* ============================================================
   AWARD BANNER
   ============================================================ */
.award-banner {
	background-color: var(--color-primary);
	padding-block: var(--space-12);
	color: var(--color-white);
}

.award-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
}

.award-banner__icon {
	color: var(--color-white);
	opacity: 0.8;
	flex-shrink: 0;
}

.award-banner__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.award-banner__category {
	font-size: var(--text-cta);
	color: rgb(255 255 255 / 0.7);
	letter-spacing: 0.08em;
}

.award-banner__work {
	font-size: var(--text-h1);
	font-weight: 700;
	line-height: 1.1;
}

.award-banner__festival {
	font-size: var(--text-cta);
	color: rgb(255 255 255 / 0.7);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background-color: var(--color-secondary-100);
	padding-block: var(--space-12);
	color: var(--color-text);
}

.footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr auto;
	gap: var(--space-12);
	align-items: center;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	/* gap: var(--space-3); */
}

.footer-logo img {
	height: 2.5rem;
	width: auto;
}

.footer-tagline {
	font-size: var(--text-cta);
	color: var(--color-text-light);
}

.footer-email {
	font-size: var(--text-cta);
	color: var(--color-text-light);
	transition: color var(--transition-fast);
}

.footer-email:hover {
	color: var(--color-primary);
}

.footer-social {
	display: flex;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

.footer-social a {
	color: var(--color-text-light);
	transition: color var(--transition-fast);
}

.footer-social a:hover {
	color: var(--color-primary);
}

.footer-navigation .footer-nav-list,
.footer-nav-list ul,
.footer-legal-nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer-nav-list a,
.footer-legal-nav a {
	font-size: var(--text-cta);
	color: var(--color-text);
	transition: color var(--transition-fast);
}

.footer-nav-list a:hover,
.footer-legal-nav a:hover {
	color: var(--color-primary);
}

.footer-monogram {
	width: 120px;
	height: 120px;
	position: absolute;
	top: 0;
	right: 25%;
	/* Sustituir por SVG del monograma JP */
}

.footer-bottom {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-8);
	padding-top: var(--space-4);
}

.footer-bottom p {
	font-size: var(--text-cta);
	color: var(--color-text-light);
	text-align: center;
}

/* ============================================================
   AJUSTES PARA PLANTILLAS DE BLOQUES (FSE)
   Puentea las diferencias del DOM que genera Gutenberg respecto
   al marcado PHP original, reutilizando los estilos de arriba.
   ============================================================ */

/* El grupo de tarjetas es una rejilla, no un flujo vertical.
   Anula los márgenes verticales que Gutenberg inyecta entre hijos. */
.music-samples__grid.wp-block-group > * {
	margin-block: 0;
}

/* Las tarjetas son grupos de bloques: centra su contenido igual que el PHP. */
.sample-card.wp-block-group {
	margin: 0;
}

.sample-card .wp-block-html,
.video-embed .wp-block-html {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* El vídeo destacado ocupa toda la columna. */
.featured-work .wp-block-column .video-embed {
	width: 100%;
}

/* Cabecera: logo visible y navegación con peso medio. */
.site-header .wp-block-site-logo img,
.site-header .custom-logo {
	height: auto;
}

.site-header .wp-block-navigation {
	font-weight: 600;
}

.site-header .wp-block-navigation a {
	color: var(--color-white);
	font-weight: 400;
}

.site-header .wp-block-navigation a:hover {
	color: var(--color-secondary);
}

/* Página actual: negrita en arena (Figma). */
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation a[aria-current="page"] {
	color: var(--color-secondary);
	font-weight: 700;
}

/* Footer: fondo tan, texto teal. El logo es claro → se oscurece para
   que se lea sobre el fondo claro (usa un logo oscuro si lo quieres exacto). */
.site-footer {
	background-color: var(--color-secondary);
	color: var(--color-primary);
}

.footer-brand .wp-block-site-logo img,
.footer-brand .custom-logo {
	filter: brightness(0) saturate(100%) invert(17%) sepia(46%) saturate(1000%) hue-rotate(151deg) brightness(92%) contrast(96%);
	height: auto;
}

.footer-tagline,
.footer-email,
.footer-email a {
	color: var(--color-primary);
	opacity: 0.85;
}

.footer-social a,
.footer-nav-list a,
.footer-legal-nav a {
	color: var(--color-primary);
}

.footer-social a:hover,
.footer-nav-list a:hover,
.footer-legal-nav a:hover {
	color: var(--color-primary-0);
}

/* Menús del pie como bloques Lista editables (sin viñetas, en columna). */
.footer-nav-list.wp-block-list,
.footer-legal-nav.wp-block-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav-list.wp-block-list a,
.footer-legal-nav.wp-block-list a {
	color: var(--color-primary);
	font-size: var(--text-cta);
	transition: color var(--transition-fast);
}

.footer-nav-list.wp-block-list a:hover,
.footer-legal-nav.wp-block-list a:hover {
	color: var(--color-primary-0);
}

/* Iconos sociales editables (bloque nativo). */
.footer-social.wp-block-social-links {
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.footer-social.wp-block-social-links .wp-social-link {
	color: var(--color-primary);
	padding: 0;
}

/* Monograma decorativo del pie: teal tenue sobre el fondo tan. */
.footer-monogram {
	color: var(--color-primary);
	opacity: 0.3;
	margin-left: auto;
}

/* Barra inferior: franja oscura a todo el ancho. */
.footer-bottom {
	background-color: var(--color-primary-0);
	color: var(--color-white);
	padding-block: var(--space-4);
	margin-top: 0;
	border-top: none;
}

.footer-bottom p {
	color: rgb(255 255 255 / 0.75);
	text-align: center;
	font-size: var(--text-cta);
}

/* Contenedor del premio: fuerza fila centrada aunque sea un grupo de bloques. */
.award-banner__inner.wp-block-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
}

.award-banner__inner.wp-block-group > * {
	margin-block: 0;
}

.award-banner__work {
	font-size: var(--text-h1);
	font-weight: 700;
	line-height: 1.1;
}

/* La cabecera de samples es un grupo de bloques centrado. */
.music-samples__header.wp-block-group > * {
	margin-block: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.featured-work .featured-work__text,
	.music-samples.wp-block-group {
		padding-inline: 20px;
	}

	.featured-work .featured-work__text {
		align-items: center;
		text-align: center;
	}

	.featured-work__text .wp-block-buttons,
	.featured-work__text .wp-block-button,
	.music-samples__cta .wp-block-buttons,
	.music-samples__cta .wp-block-button {
		width: 100%;
	}

	.featured-work__text .wp-block-button__link,
	.music-samples__cta .wp-block-button__link {
		width: 100%;
		white-space: normal;
	}

	.site-header {
		min-height: 64px;
		padding-inline: 20px;
		background-color: var(--color-primary-0) !important;
		gap: var(--space-4);
	}

	.site-header .wp-block-site-logo img {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.site-header .wp-block-site-logo a::before {
		content: '';
		display: block;
		width: 60px;
		height: 61px;
		background: url('../images/mobile-monogram-left.svg') 3.75px 18px / 24.7802px 24.6963px no-repeat,
			url('../images/mobile-monogram-right.svg') 30.7px 18px / 24.7809px 24.6971px no-repeat;
	}

	.site-main {
		padding-top: 64px;
	}

	.site-header .wp-block-site-logo {
		min-width: 0;
		max-width: calc(100% - 60px);
	}

	.site-header__navigation {
		flex-shrink: 0;
		gap: 0;
	}

	.site-header__navigation > .lang-switcher {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--color-white);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--color-primary-0) !important;
		color: var(--color-white) !important;
		padding: 0 20px;
		overflow-y: auto;
	}

	.site-header .is-menu-open .wp-block-navigation__responsive-dialog {
		position: relative;
		margin-top: 0;
	}

	.site-header .is-menu-open .mobile-menu-monogram {
		display: block;
		position: absolute;
		top: 2px;
		left: 0;
		width: 60px;
		height: 61px;
		background: url('../images/mobile-monogram-left.svg') 3.75px 18px / 24.7802px 24.6963px no-repeat,
			url('../images/mobile-monogram-right.svg') 30.7px 18px / 24.7809px 24.6971px no-repeat;
	}

	.site-header .is-menu-open .mobile-menu-brand {
		display: block;
		flex-shrink: 0;
		width: 355px;
		max-width: 100%;
		aspect-ratio: 355 / 102;
		background: url('../images/mobile-menu-logo.png') center / contain no-repeat;
	}

	.site-header .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 10px;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.site-header .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 32px;
		height: 32px;
	}

	.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: center !important;
		gap: 36px;
		padding: 82px 0 max(64px, env(safe-area-inset-bottom)) !important;
	}

	.site-header .is-menu-open .wp-block-navigation__container {
		align-items: center !important;
		gap: 49px !important;
		width: 100%;
	}

	.site-header .is-menu-open .wp-block-navigation-item {
		align-items: center;
		text-align: center;
	}

	.site-header .is-menu-open .wp-block-navigation-item a {
		font-size: 24px;
		line-height: 31px;
		font-weight: 400;
		letter-spacing: 0;
	}

	.site-header .is-menu-open .wp-block-navigation-item a[aria-current="page"] {
		font-weight: 700;
	}

	.site-header .is-menu-open .lang-switcher {
		width: 100%;
		padding-top: 6px;
		border: 0;
	}

	.site-header .is-menu-open .lang-switcher .current-lang {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open ul.lang-switcher,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .lang-switcher ul {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--space-4);
		width: 100%;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .lang-switcher li {
		width: auto;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .lang-switcher a {
		min-height: 44px;
		padding: var(--space-2) var(--space-3);
		gap: 5px;
		font-size: 20px;
		line-height: 28px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		opacity: 1;
	}

	.site-header .is-menu-open .lang-switcher a::before {
		width: 24px;
		height: 24px;
	}

	.mobile-menu-monogram:focus-visible,
	.mobile-menu-brand:focus-visible {
		outline: 2px solid var(--color-white);
		outline-offset: 4px;
	}

	.nav-list {
		display: none;
		position: absolute;
		top: 4rem;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background-color: var(--color-primary-0);
		padding: var(--space-4) var(--container-padding);
	}

	.nav-list.is-open {
		display: flex;
	}

	.nav-toggle {
		display: flex;
	}

	.featured-work__inner {
		grid-template-columns: 1fr;
	}

	.music-samples__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}

	.music-samples__grid > .sample-card {
		min-width: 0;
		width: 100%;
	}

	.sample-card__label {
		overflow-wrap: anywhere;
	}

	.award-banner__inner {
		flex-direction: column;
		text-align: center;
	}

	.footer-inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.site-footer {
		padding-inline: 20px;
		text-align: center;
	}

	.site-footer .footer-inner {
		width: 100%;
		min-width: 0;
		align-items: start;
	}

	.footer-inner > * {
		min-width: 0;
		margin-block: 0;
	}

	.footer-brand {
		align-items: center;
		gap: var(--space-3);
	}

	.footer-brand .wp-block-site-logo img {
		width: 180px;
		max-width: 100%;
	}

	.footer-email {
		overflow-wrap: anywhere;
	}

	.site-footer .wp-block-navigation__container {
		align-items: center;
		gap: 20px;
		width: 100%;
	}

	.site-footer .wp-block-navigation,
	.site-footer .wp-block-navigation__responsive-container,
	.site-footer .wp-block-navigation__responsive-container-content {
		width: 100%;
		justify-content: center;
	}

	.site-footer .footer-legal-nav .wp-block-navigation__container {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.footer-social {
		flex-wrap: wrap;
		justify-content: center;
	}

	.footer-social--figma {
		margin-inline: auto;
	}

	.footer-bottom {
		padding-inline: var(--container-padding);
	}

	.footer-monogram {
		display: block;
		position: static;
		width: 213px;
		height: auto;
		max-width: 100%;
		margin-inline: auto;
	}

	.footer-monogram svg,
	.footer-monogram img {
		max-width: 100%;
		height: auto;
	}

	.posts-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sample-card,
	.sample-card__play {
		transition: none;
	}
	.sample-card:hover {
		transform: none;
	}
}

/* ============================================================
   FILMOGRAFIA — capçalera, tarjetas y modal de detalles
   ============================================================ */

/* Capçalera */
.wp-block-cover.film-hero {
	min-height: 690px;
	padding: 0 var(--container-padding);
	align-items: stretch;
	background-color: var(--color-primary-0);
	color: var(--color-white);
	text-align: left;
}

.film-hero > .wp-block-cover__background {
	opacity: 1 !important;
	background:
		linear-gradient(180deg, var(--color-primary-0) 0.94%, rgb(176 168 149 / 0) 100%),
		linear-gradient(122.66deg, rgb(4 37 47 / 0.4) 17.59%, rgb(176 168 149 / 0) 111.59%) !important;
}

.film-hero .wp-block-cover__image-background {
	object-position: center bottom;
	/* Ajustes de imagen de Figma: contraste +10, saturación −13. */
	filter: contrast(1.1) saturate(0.87);
}

.film-hero > .wp-block-cover__inner-container {
	display: flex;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.film-hero__inner.wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-block: 3.625rem 6.1875rem;
}

.film-hero__inner > *,
.film-hero__content > * {
	margin-block: 0;
}

.film-hero .film-hero__page-title {
	font-size: var(--text-h1-lg);
	font-weight: 600;
	line-height: 0.82;
	color: var(--color-white);
}

.film-hero__content.wp-block-group {
	margin-top: auto;
	max-width: 558px;
}

.film-hero .film-hero__label {
	font-size: var(--text-h4);
	font-weight: 700;
	line-height: 0.82;
	color: var(--color-secondary);
}

.film-hero .film-hero__title {
	margin-top: 0.75rem;
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-white);
}

.film-hero .film-hero__text {
	margin-top: 1.25rem;
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.32px;
	color: var(--color-white);
}

.film-hero__actions.wp-block-buttons {
	margin-top: 1.5rem;
	gap: var(--space-4);
}

/* En la capçalera el botón secundario va en arena (diseño Figma). */
body .film-hero .wp-block-button.is-style-inverse .wp-block-button__link.wp-element-button {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-primary);
}

body .film-hero .wp-block-button.is-style-inverse .wp-block-button__link.wp-element-button:hover {
	background-color: var(--color-white);
	border-color: var(--color-white);
}

/* Rejilla de tarjetas */
.film-list.wp-block-group {
	padding: 6.25rem var(--container-padding);
	background-color: var(--color-white);
}

.film-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	max-width: var(--container-max);
}

.film-grid.wp-block-group > * {
	margin-block: 0;
}

/* Tarjeta */
.film-card.wp-block-group {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: 1.25rem;
	border-radius: 10px;
	background-color: var(--color-primary);
	color: var(--color-white);
}

.film-card.wp-block-group > * {
	margin-block: 0;
}

.wp-block-cover.film-card__media {
	min-height: 0;
	aspect-ratio: 1;
	padding: 0 1.25rem;
	align-items: flex-end;
	background-color: var(--color-primary);
}

.film-card__media > .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(180deg, rgb(6 62 79 / 0) 63%, var(--color-primary) 100%) !important;
}

.film-card__media > .wp-block-cover__inner-container {
	width: 100%;
	transform: translateY(3px);
}

.film-card__media .film-card__title,
.film-card__media .film-card__year {
	margin: 0;
	line-height: normal;
	color: var(--color-white);
}

.film-card__media .film-card__title {
	font-size: var(--text-h3);
	font-weight: 600;
}

.film-card__media .film-card__year {
	font-size: var(--text-base);
}

.film-card__actions.wp-block-buttons {
	flex-wrap: nowrap;
	gap: 13px;
	padding: var(--space-4) 1.3125rem 0;
}

body .film-card__actions .wp-block-button .wp-block-button__link.wp-element-button {
	min-height: var(--wp--custom--button--height--sm);
	padding: 0 var(--wp--custom--button--padding-x--sm);
	font-size: var(--text-cta);
	line-height: 20px;
	white-space: nowrap;
}

body .film-card__actions .wp-block-button .wp-block-button__link::before {
	width: 16px;
	height: 16px;
}

.film-card__actions .wp-block-button {
	flex: 1 1 0;
	min-width: 0;
}

.film-card__actions .wp-block-button .wp-block-button__link {
	width: 100%;
}

/* El audio y los detalles solo se ven en el editor; en el front los usa main.js. */
.film-hero:not(.block-editor-block-list__block) .wp-block-audio,
.film-card:not(.block-editor-block-list__block) > .wp-block-audio,
.film-card:not(.block-editor-block-list__block) > .film-card__details {
	display: none;
}

.film-card > .wp-block-audio {
	padding: var(--space-4) 1.3125rem 0;
}

.film-card > .film-card__details {
	margin: var(--space-4) 1.3125rem 0;
	padding-top: var(--space-4);
	border-top: 1px dashed rgb(248 248 246 / 0.5);
}

.film-card > .film-card__details::before {
	content: "Detalls (finestra emergent)";
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-cta);
	opacity: 0.7;
}

/* Modal de detalles */
.film-modal {
	box-sizing: border-box;
	width: min(1036px, calc(100% - 2.5rem));
	max-width: none;
	max-height: calc(100dvh - 2.5rem);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 4px 2px rgb(0 0 0 / 0.25);
}

.film-modal::backdrop {
	background-color: rgb(4 37 47 / 0.7);
}

.film-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.film-modal__close:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

.film-modal__inner {
	display: flex;
	align-items: center;
	gap: 2.3rem;
	padding: 2.6875rem 2.5rem;
}

.film-modal__image {
	flex-shrink: 0;
	width: 356px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
}

.film-modal__content {
	flex: 1;
	min-width: 0;
}

.film-modal .film-modal__title {
	margin: 0;
	font-size: var(--text-h2);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-white);
}

.film-modal__details p {
	margin: 0;
	font-size: var(--text-cta);
	letter-spacing: 0.28px;
	line-height: 1.3;
	color: var(--color-white);
}

.film-modal__details strong {
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: 0.32px;
}

.film-modal__details .film-card__meta {
	font-size: var(--text-base);
	letter-spacing: 0;
}

.film-modal__details .film-card__director {
	margin-top: 1.125rem;
}

.film-modal__details .film-card__synopsis-label {
	margin-top: 1.625rem;
}

.film-modal__details .film-card__modal-actions.wp-block-buttons {
	margin-top: 1.375rem;
	gap: 17px;
}

body .film-modal__details .wp-block-button .wp-block-button__link.wp-element-button {
	font-weight: 700;
}

@media (max-width: 1024px) {
	.film-grid.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.wp-block-cover.film-hero {
		min-height: 560px;
		padding-inline: 20px;
	}

	.film-hero__inner.wp-block-group {
		padding-block: 2.5rem 3rem;
	}

	.film-hero .film-hero__page-title {
		font-size: var(--text-h1);
	}

	.film-hero .film-hero__title {
		font-size: var(--text-h2);
	}

	.film-list.wp-block-group {
		padding: var(--space-12) 20px;
	}

	.film-grid.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.film-modal {
		width: min(350px, calc(100% - 2.5rem));
	}

	.film-modal__inner {
		display: block;
		padding: 2.75rem 1.375rem 1.375rem;
	}

	.film-modal__image {
		display: none;
	}

	.film-modal .film-modal__title {
		padding-right: 2rem;
		font-size: 1.5rem;
	}

	.film-modal__details .film-card__modal-actions.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	body .film-modal__details .wp-block-button .wp-block-button__link.wp-element-button {
		width: 100%;
		min-height: 45px;
		font-size: var(--text-cta);
	}
}

@media (max-width: 400px) {
	.film-card__actions.wp-block-buttons {
		padding-inline: var(--space-4);
		gap: var(--space-2);
	}

	body .film-card__actions .wp-block-button .wp-block-button__link.wp-element-button {
		padding-inline: var(--space-3);
	}
}

/* ============================================================
   ALTRES OBRES — tarjetas de proyecto (comparten modal con Filmografia)
   ============================================================ */
.projects.wp-block-group {
	padding: 6.25rem var(--container-padding);
	background-color: var(--color-white);
	color: var(--color-primary);
}

.projects.wp-block-group > * {
	margin-block: 0;
}

.projects .projects__title {
	font-size: var(--text-h1-lg);
	font-weight: 600;
	line-height: 0.82;
	text-align: center;
	color: var(--color-primary);
}

.projects .projects__intro {
	max-width: 774px;
	margin: 3rem auto 0;
	line-height: 1.7;
	letter-spacing: 0.32px;
	text-align: center;
	color: var(--color-primary);
}

.project-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem var(--space-4);
	max-width: var(--container-max);
	margin-top: 2rem;
}

.project-grid.wp-block-group > * {
	margin-block: 0;
}

/* Tarjeta */
.project-card.wp-block-group {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-height: 143px;
	padding: 1.25rem;
	border: 1px solid var(--color-primary);
	border-radius: 10px;
	background-color: var(--color-white);
	color: var(--color-primary);
}

.project-card.wp-block-group > *,
.project-card__header.wp-block-group > *,
.project-card__text.wp-block-group > * {
	margin-block: 0;
}

.project-card__header.wp-block-group {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.project-card__play-wrap.wp-block-buttons {
	flex-shrink: 0;
}

.project-card__text.wp-block-group {
	min-width: 0;
}

.project-card .project-card__title {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: normal;
	color: var(--color-primary);
}

.project-card .project-card__type {
	margin-top: var(--space-2);
	font-size: var(--text-base);
	color: var(--color-primary);
}

/* Botón redondo de play: el texto queda solo para lectores de pantalla. */
body .project-card .project-card__play .wp-block-button__link.wp-element-button {
	width: 56px;
	height: 56px;
	min-height: 0;
	padding: 0;
	gap: 0;
	border-radius: 50%;
	font-size: 0;
	letter-spacing: 0;
}

body .project-card .project-card__play .wp-block-button__link.wp-element-button::before {
	width: 24px;
	height: 24px;
}

/* "Més informació": botón de texto con icono. */
body .project-card .project-card__details-toggle .wp-block-button__link.wp-element-button {
	min-height: 40px;
	padding: 0;
	gap: var(--space-1);
	border: 0;
	background: transparent;
	color: var(--color-primary);
	font-size: var(--text-cta);
}

body .project-card .project-card__details-toggle .wp-block-button__link.wp-element-button:hover {
	background: transparent;
	color: var(--color-primary-0);
	text-decoration: underline;
}

body .project-card .project-card__details-toggle .wp-block-button__link::before {
	width: 16px;
	height: 16px;
}

/* El audio y los detalles solo se ven en el editor; en el front los usa main.js. */
.project-card:not(.block-editor-block-list__block) > .wp-block-audio,
.project-card:not(.block-editor-block-list__block) > .project-card__details {
	display: none;
}

.project-card > .project-card__details {
	margin-top: var(--space-2);
	padding: var(--space-4);
	border-radius: 6px;
	background-color: var(--color-primary);
	color: var(--color-white);
}

.project-card > .project-card__details::before {
	content: "Més informació (finestra emergent)";
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-cta);
	opacity: 0.7;
}

/* Modal sin imagen (Altres obres) */
.film-modal [hidden] {
	display: none;
}

.film-modal.film-modal--no-image {
	width: min(765px, calc(100% - 2.5rem));
}

.film-modal--no-image .film-modal__inner {
	padding: 2.5rem 1.875rem 2.25rem;
}

.film-modal .film-modal__subtitle {
	margin: var(--space-1) 0 0;
	font-size: var(--text-base);
	color: var(--color-white);
}

.film-modal__details .project-card__description {
	max-width: 635px;
	margin-top: 2.5rem;
}

.film-modal__details .project-card__modal-actions.wp-block-buttons {
	margin-top: 2.5rem;
	gap: 17px;
}

@media (max-width: 1024px) {
	.project-grid.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.projects.wp-block-group {
		padding: var(--space-12) 20px;
	}

	.projects .projects__title {
		font-size: var(--text-h2);
	}

	.projects .projects__intro {
		margin-top: var(--space-8);
	}

	.project-grid.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.film-modal--no-image .film-modal__inner {
		padding: 2.75rem 1.375rem 1.375rem;
	}

	.film-modal .film-modal__subtitle {
		font-size: var(--text-cta);
	}

	.film-modal__details .project-card__description {
		margin-top: var(--space-6);
	}

	.film-modal__details .project-card__modal-actions.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
		margin-top: var(--space-6);
	}
}

/* ============================================================
   BIOGRAFIA
   ============================================================ */
.wp-block-cover.bio-hero {
	min-height: 690px;
	padding: 0;
	overflow: hidden;
	background-color: #0e0a09;
}

.bio-hero .wp-block-cover__image-background {
	object-position: 50% 20%;
	/* Ajustes de imagen de Figma (contraste −70, saturación −51, temperatura +10, luces y sombras +), aproximados. */
	filter: contrast(0.88) saturate(0.7) sepia(0.08) brightness(1.04);
}

.bio.wp-block-group {
	padding: 4.5rem var(--container-padding) 4rem;
	background-color: var(--color-white);
	color: var(--color-primary);
}

.bio.wp-block-group > * {
	margin-block: 0;
}

.bio .bio__title {
	margin-bottom: 3.75rem;
	font-size: var(--text-h1-lg);
	font-weight: 600;
	line-height: 0.82;
	text-align: center;
	color: var(--color-primary);
}

.bio.wp-block-group > p {
	line-height: 1.7;
	letter-spacing: 0.32px;
	color: var(--color-primary);
}

.bio.wp-block-group > p + p {
	margin-top: 1.7em;
}

.bio .bio__awards-title {
	margin-top: 2.5rem;
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary);
}

.bio .bio__awards-subtitle {
	margin-top: 3.5rem;
	font-size: var(--text-h4);
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary);
}

.bio .bio__awards-title + .bio__awards-subtitle {
	margin-top: 2rem;
}

.bio .bio__list {
	margin-top: 1.75rem;
	padding-left: 1.25rem;
	list-style: disc;
	font-weight: 300;
	line-height: 1.88;
	letter-spacing: 0.06em;
	color: var(--color-primary);
}

.bio .bio__list strong {
	font-weight: 600;
}

@media (max-width: 768px) {
	.wp-block-cover.bio-hero {
		min-height: 420px;
	}

	.bio-hero .wp-block-cover__image-background {
		object-position: 50% 15%;
	}

	.bio.wp-block-group {
		padding: var(--space-12) 20px;
	}

	.bio .bio__title {
		margin-bottom: var(--space-8);
		font-size: var(--text-h2);
	}

	.bio .bio__awards-title {
		font-size: 1.75rem;
	}
}

/* ============================================================
   FOOTER — diseño Figma (escritorio). En móvil se mantiene la versión centrada.
   ============================================================ */
.footer-logo img {
	display: block;
	width: 284px;
	max-width: 100%;
	height: auto;
}

.site-footer .footer-monogram {
	opacity: 1;
}

.footer-social--figma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1px;
	margin-top: 0.75rem;
}

.footer-social--figma .footer-social__link {
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.footer-social--figma .footer-social__link:hover {
	transform: translateY(-1px);
}

.footer-social--figma .footer-social__link:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
}

.footer-social--figma .footer-social__link--facebook { background-image: url('../images/social-facebook-f.svg'); background-size: 20px 20px; background-position: 10px 10.5px; }
.footer-social--figma .footer-social__link--instagram { background-image: url('../images/social-instagram.svg'); background-size: 16px 16px; background-position: 12px 12.5px; }
.footer-social--figma .footer-social__link--linkedin { background-image: url('../images/social-linkedin.svg'); background-size: 14px 14px; background-position: 13px 13.5px; }
.footer-social--figma .footer-social__link--youtube { background-image: url('../images/social-youtube-figma.svg'); background-size: 24px 24px; background-position: 8px 8.5px; }
.footer-social--figma .footer-social__link--spotify { background-image: url('../images/social-spotify.svg'); background-size: 20px 20px; background-position: 10px 10.5px; }
.footer-social--figma .footer-social__link--bandcamp { background-image: url('../images/social-bandcamp.svg'); background-size: 19.9609px 11.8196px; background-position: 10.0195px 14.5902px; }

@media (min-width: 769px) {
	.site-footer .footer-social--figma {
		margin-left: -15px;
	}

	.site-footer.wp-block-group {
		position: relative;
		box-sizing: border-box;
		min-height: 271px;
		overflow: hidden;
		padding: 2.625rem var(--container-padding) 2.5rem;
	}

	.site-footer .footer-inner.wp-block-group {
		grid-template-columns: 35fr 15fr 28fr 22fr;
		gap: 0;
		align-items: start;
	}

	.site-footer .footer-inner > *,
	.site-footer .footer-brand > * {
		margin-block: 0;
	}

	.site-footer .footer-email {
		margin-top: 0.875rem;
		font-size: var(--text-cta);
		opacity: 1;
	}

	.site-footer nav.footer-nav-list {
		margin-top: 2.25rem;
	}

	.site-footer nav.footer-nav-list,
	.site-footer nav.footer-legal-nav {
		gap: 0;
	}

	.site-footer nav.footer-legal-nav {
		margin-top: 2.0625rem;
	}

	.site-footer .footer-nav-list ul,
	.site-footer .footer-legal-nav ul {
		gap: 1.25rem;
	}

	.site-footer .footer-nav-list a,
	.site-footer .footer-legal-nav a {
		font-size: var(--text-base);
		line-height: normal;
	}

	/* Monograma a toda la altura del pie, recortado arriba y abajo como en Figma. */
	.site-footer .footer-monogram {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 75%;
		right: auto;
		width: auto;
		height: auto;
		margin: 0;
	}

	.site-footer .footer-monogram svg {
		display: block;
		height: 100%;
		width: auto;
	}

	.footer-bottom.wp-block-group {
		padding: 0.625rem var(--container-padding);
	}

	.footer-bottom p {
		margin: 0;
		text-align: left;
		color: var(--color-white);
	}
}

/* ============================================================
   CONTACTE
   ============================================================ */
.contact.wp-block-group {
	padding: 6.25rem var(--container-padding) 6rem;
	background-color: var(--color-white);
	color: var(--color-primary);
}

.contact.wp-block-group > * {
	margin-block: 0;
}

.contact .contact__title {
	margin-bottom: 1.5rem;
	font-size: var(--text-h1-lg);
	font-weight: 600;
	line-height: 0.82;
	text-align: center;
	color: var(--color-primary);
}

.contact .contact__intro {
	max-width: 760px;
	margin: 0 auto 2.5rem;
	font-size: var(--text-base);
	line-height: 1.55;
	text-align: center;
}

.contact .contact__intro a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.contact__grid.wp-block-group {
	display: grid;
	grid-template-columns: 439fr 598fr;
	gap: var(--space-6);
}

.contact__grid.wp-block-group > * {
	margin: 0;
}

/* La foto ocupa la altura del formulario sin estirar la fila. */
.contact__photo.wp-block-image {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	border-radius: 10px;
}

.contact__photo.wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 37%;
}

.contact-form {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: 1.125rem 1.25rem 1.25rem;
	border: 1px solid rgb(6 62 79 / 0.54);
	border-radius: 10px;
	background-color: #fff;
	color: var(--color-primary);
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.contact-form label {
	font-size: var(--text-base);
	line-height: 1.4;
}

.contact-form__req {
	color: var(--color-error);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid rgb(6 62 79 / 0.6);
	border-radius: 8px;
	background-color: #fff;
	color: var(--color-primary);
	font: inherit;
}

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

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgb(6 62 79 / 0.6);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

.contact-form__check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.contact-form__check input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--color-primary);
}

.contact-form__check label {
	font-size: var(--text-cta);
}

.contact-form__check a {
	color: inherit;
	text-decoration: underline;
}

.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

body .contact-form .contact-form__submit.wp-element-button {
	width: 100%;
	min-height: var(--wp--custom--button--height--sm);
	margin-top: var(--space-2);
	cursor: pointer;
}

.contact-form__notice {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: 8px;
	font-size: var(--text-cta);
}

.contact-form__notice--ok {
	background-color: var(--color-primary-100);
	color: var(--color-primary);
}

.contact-form__notice--invalid,
.contact-form__notice--error {
	background-color: #fdece6;
	color: #9c2c08;
}

@media (max-width: 768px) {
	.contact.wp-block-group {
		padding: var(--space-12) 20px;
	}

	.contact .contact__title {
		margin-bottom: var(--space-4);
		font-size: var(--text-h2);
	}

	.contact .contact__intro {
		margin-bottom: var(--space-8);
		font-size: var(--text-cta);
		text-align: left;
	}

	.contact__grid.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.contact__photo.wp-block-image {
		min-height: 360px;
	}
}