/**
 * Theme Name:     Gen4 Theme
 * Author:         Drama Creativo
 * Author URI:     https://dramacreativo.com/
 * Update URI:     https://dramacreativo.com/gen4-theme/
 * Text Domain:    gen4-theme
 * Description:    Tema independiente de bloques para Gen4 Studio, sin constructores externos.
 * Version:        1.2.6
 * Requires at least: 6.5
 * Requires PHP:   7.4
 * License:        GNU General Public License v3 or later.
 * License URI:    https://www.gnu.org/licenses/gpl-3.0.html
 */

:root {
	--gen4-bg: #090909;
	--gen4-surface: #151515;
	--gen4-text: #f2f0eb;
	--gen4-muted: #a6a39d;
	--gen4-accent: #F15954;
	--gen4-line: rgba(242, 240, 235, 0.22);
	--gen4-page-gutter: clamp(1rem, 3vw, 3rem);
	--gen4-section-space: clamp(5rem, 11vw, 10rem);
	--gen4-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
	/* Match the existing public typography in the project editor on each OS. */
	--gen4-project-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
	background: var(--gen4-bg);
	scroll-behavior: smooth;
}

body {
	background: var(--gen4-bg);
	color: var(--gen4-text);
	font-family: var(--gen4-project-font);
	font-size: 15px;
	line-height: 1.7;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
}

body,
.editor-styles-wrapper {
	--wp--style--root--padding-left: var(--gen4-page-gutter);
	--wp--style--root--padding-right: var(--gen4-page-gutter);
}

/* The editor canvas is also used without a frontend body cascade. Keep its
 * baseline explicit while leaving WordPress's surrounding controls untouched. */
.editor-styles-wrapper {
	background: var(--gen4-bg);
	color: var(--gen4-text);
	font-family: var(--gen4-project-font);
	font-size: 15px;
	line-height: 1.7;
	padding-inline: var(--gen4-page-gutter);
}

.editor-styles-wrapper :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	font-family: inherit;
	font-weight: 500;
}

.editor-styles-wrapper .editor-post-title {
	font-size: clamp(2.6rem, 6vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.95;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
	overflow-wrap: anywhere;
}

::selection {
	background: var(--gen4-accent);
	color: #090909;
}

a {
	text-underline-offset: 0.18em;
}

/* Explicit native-block baseline, independent of a builder's reset. */
:where(.gen4-main, .gen4-site-footer, .editor-styles-wrapper) p {
	margin: 0;
}

.gen4-studio h3 {
	line-height: 1.2;
}

.gen4-project-content .wp-block-post-content > :where(h2, h3, h4) {
	max-width: none;
}

.gen4-search-results .gen4-result {
	border-top: 1px solid var(--gen4-line);
	padding-block: 2rem;
}

.gen4-result .wp-block-post-title {
	font-size: clamp(1.75rem, 3vw, 3rem);
	line-height: 1.15;
	margin-block: 1rem;
}

.gen4-result .wp-block-post-featured-image {
	max-width: 40rem;
}

.gen4-site-header {
	backdrop-filter: blur(18px);
	background: rgba(9, 9, 9, 0.84);
	border-bottom: 1px solid rgba(242, 240, 235, 0.1);
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: background-color 500ms var(--gen4-ease), border-color 500ms var(--gen4-ease), backdrop-filter 500ms var(--gen4-ease);
	z-index: 100;
}

/* Fade the hero gradient separately: background images cannot interpolate to a solid color. */
body:has(.gen4-home) .gen4-site-header::before {
	background: linear-gradient(to bottom, rgba(5, 5, 5, 0.64), transparent);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 500ms var(--gen4-ease);
	z-index: -1;
}

body:has(.gen4-home) .gen4-site-header:not(.is-solid) {
	backdrop-filter: blur(0);
	background-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

body:has(.gen4-home) .gen4-site-header:not(.is-solid)::before {
	opacity: 1;
}

body.admin-bar .gen4-site-header {
	top: 32px;
}

.gen4-site-header__inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	min-height: clamp(4.5rem, 8vw, 6.5rem);
}

.gen4-site-logo {
	flex: 0 0 auto;
	margin: 0;
	width: clamp(4rem, 7vw, 5.5rem);
}

.gen4-site-logo a {
	align-items: center;
	display: flex;
	min-height: 44px;
}

.gen4-site-logo img {
	aspect-ratio: 1007 / 594;
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.gen4-site-logo a:focus-visible {
	outline: 2px solid var(--gen4-accent);
	outline-offset: 6px;
}

.gen4-site-header .wp-block-navigation {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gen4-site-header .wp-block-navigation__container {
	column-gap: clamp(1rem, 2.5vw, 2.5rem);
}

.gen4-site-header .wp-block-navigation-item__content {
	padding: 0.55rem 0;
	position: relative;
	text-decoration: none;
}

.gen4-site-header .wp-block-navigation-item__content::after {
	background: var(--gen4-accent);
	bottom: 0.3rem;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 260ms var(--gen4-ease);
	width: 100%;
}

.gen4-site-header .wp-block-navigation-item__content:hover::after,
.gen4-site-header .wp-block-navigation-item__content:focus-visible::after,
.gen4-site-header .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* A backdrop filter creates a containing block for fixed descendants. Release
 * it while the Core navigation dialog is open so the overlay fills the screen. */
body .gen4-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	transition: none;
}

.gen4-site-header .wp-block-navigation__responsive-container-open,
.gen4-site-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	border-radius: 0;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.gen4-site-header .wp-block-navigation__responsive-container-close {
	display: flex;
}

body.admin-bar {
	--gen4-admin-bar-height: var(--wp-admin--admin-bar--height, 32px);
}

.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open {
	animation: none;
	background: var(--gen4-bg) !important;
	box-sizing: border-box;
	color: var(--gen4-text) !important;
	height: 100vh;
	height: 100dvh;
	inset: 0;
	margin: 0;
	max-width: none;
	overflow: auto;
	overscroll-behavior: contain;
	padding: calc(var(--gen4-admin-bar-height, 0px) + max(0.875rem, env(safe-area-inset-top))) max(var(--gen4-page-gutter), env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(var(--gen4-page-gutter), env(safe-area-inset-left));
	width: 100%;
}

.gen4-site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	margin: 0;
}

.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: 0;
	padding-top: clamp(5rem, 14vh, 8rem);
}

.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: clamp(0.35rem, 1.3vh, 1rem);
	width: 100%;
}

.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2.25rem, 5vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.15;
	min-height: 44px;
	padding: 0.25em 0;
}

/* Use the same touch-friendly navigation on phones and tablets. */
@media (max-width: 1024px) {
	.gen4-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.gen4-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Animate only the native touch-menu opening. Core keeps control of focus,
 * scroll locking and closing; no extra state or delayed event handlers. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: gen4-menu-fade-in 300ms var(--gen4-ease);
	}

	.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation: gen4-menu-item-in 280ms var(--gen4-ease) 60ms backwards;
	}

	.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) {
		animation-delay: 100ms;
	}

	.gen4-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+3) {
		animation-delay: 140ms;
	}

	@keyframes gen4-menu-fade-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes gen4-menu-item-in {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: translateY(0); }
	}
}

@media (max-width: 782px) {
	body.admin-bar .gen4-site-header {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

.gen4-main {
	min-height: 60vh;
}

body .gen4-main:not(.gen4-home) {
	padding-top: clamp(4.5rem, 8vw, 6.5rem);
}

.gen4-main a,
.gen4-site-header a,
.gen4-site-footer a {
	color: inherit;
}

.gen4-home-hero {
	align-items: end;
	display: grid;
	min-height: min(76rem, calc(100svh - 6rem));
	padding-bottom: clamp(3rem, 8vw, 7rem);
	padding-top: clamp(6rem, 14vw, 12rem);
	position: relative;
}

.gen4-home-hero::before {
	background: radial-gradient(circle at 78% 28%, rgba(241, 89, 84, 0.23), transparent 24rem);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.gen4-project-back {
	color: var(--gen4-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.5;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

.gen4-home-hero h1,
.gen4-page-hero h1 {
	font-size: clamp(3.6rem, 11.5vw, 11.5rem);
	font-weight: 500;
	letter-spacing: -0.07em;
	line-height: 0.84;
	margin: 0;
}

.gen4-home-hero h1 {
	max-width: 9.5ch;
}

.gen4-home-hero__foot {
	align-items: end;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.42fr);
	margin-top: clamp(3rem, 7vw, 6rem);
}

.gen4-home-hero__intro {
	font-size: clamp(1.1rem, 2vw, 1.55rem);
	line-height: 1.35;
	margin: 0;
	max-width: 30ch;
}

/* A vector mask keeps decorative arrows independent of fonts and emoji conversion. */
.gen4-icon-arrow {
	background-color: currentColor;
	display: inline-block;
	flex: 0 0 auto;
	height: 1em;
	width: 1em;
	vertical-align: -0.125em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M3 3h10v10' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M3 3h10v10' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gen4-icon-arrow--left {
	transform: rotate(180deg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M8 2l6 6-6 6' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M8 2l6 6-6 6' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gen4-text-link {
	align-items: center;
	border-bottom: 1px solid currentColor;
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 600;
	gap: 0.7rem;
	justify-self: start;
	letter-spacing: 0.1em;
	padding-bottom: 0.3rem;
	text-decoration: none;
	text-transform: uppercase;
}

.gen4-site-header__inner,
.gen4-site-footer__top,
.gen4-site-footer__bottom,
.gen4-section > .wp-block-group.alignwide,
.gen4-page-hero > .wp-block-group.alignwide,
.gen4-project-hero > .wp-block-group.alignwide,
.gen4-project-cover,
.gen4-project-data,
.gen4-page-content,
.gen4-project-content,
.gen4-project-nav {
	box-sizing: border-box;
	margin-inline: auto !important;
	max-width: var(--wp--style--global--wide-size);
	width: calc(100% - (2 * var(--gen4-page-gutter))) !important;
}

.gen4-video-hero {
	background: #050505;
	display: grid;
	min-height: 42rem;
	overflow: hidden;
	position: relative;
	place-items: stretch;
	height: 100svh;
}

.gen4-video-hero__video,
.gen4-video-hero__shade {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.gen4-video-hero__video {
	object-fit: cover;
}

.gen4-video-hero__shade {
	background:
		linear-gradient(to bottom, rgba(5, 5, 5, 0.18) 30%, rgba(5, 5, 5, 0.8) 100%),
		linear-gradient(to right, rgba(5, 5, 5, 0.34), transparent 60%);
	z-index: 1;
}

.gen4-video-hero__content {
	align-self: end;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-bottom: clamp(2rem, 5vw, 4.5rem);
	position: relative;
	width: calc(100% - (2 * var(--gen4-page-gutter)));
	z-index: 2;
}

.gen4-video-hero h1 {
	font-size: clamp(4rem, 10.5vw, 10.5rem);
	font-weight: 500;
	letter-spacing: -0.075em;
	line-height: 0.82;
	margin: 0;
}

.gen4-video-hero__bottom {
	align-items: end;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: clamp(2rem, 5vw, 4rem);
}

.gen4-video-hero__bottom p {
	font-size: clamp(1rem, 1.55vw, 1.35rem);
	line-height: 1.35;
	margin: 0;
	max-width: 34ch;
}

.gen4-section {
	padding-bottom: var(--gen4-section-space);
	padding-top: var(--gen4-section-space);
}

.gen4-section--line {
	border-top: 1px solid var(--gen4-line);
}

.gen4-section-heading {
	align-items: end;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.gen4-section-heading h2,
.gen4-page-hero.gen4-page-hero--compact h1,
.gen4-project-hero h1,
.gen4-site-footer__title {
	font-size: clamp(2.6rem, 6vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.95;
	margin: 0;
}

.gen4-intro-section {
	--gen4-section-space: clamp(4rem, 8.5vw, 7.5rem);
	background: var(--gen4-text);
	color: var(--gen4-bg);
}

.gen4-intro-statement {
	font-size: clamp(1.35rem, 2.4vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.4;
	margin: 0;
	max-width: 48ch;
}

.gen4-intro-aside {
	align-items: end;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	margin-left: auto;
	margin-top: clamp(3rem, 8vw, 8rem);
	max-width: 46rem;
}

.gen4-intro-aside > p:first-child {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	margin: 0;
	max-width: 34ch;
}

.gen4-section-heading > p {
	color: var(--gen4-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
}

.gen4-category-grid {
	display: grid;
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gen4-category-card {
	aspect-ratio: 4 / 5;
	background: var(--gen4-surface);
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.gen4-category-card img,
.gen4-category-card__shade {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.gen4-category-card img {
	object-fit: cover;
	transition: transform 750ms var(--gen4-ease), filter 450ms var(--gen4-ease);
}

.gen4-category-card__shade {
	background: linear-gradient(to bottom, rgba(5, 5, 5, 0.06) 30%, rgba(5, 5, 5, 0.84) 100%);
}

.gen4-category-card__number,
.gen4-category-card__name {
	position: absolute;
	z-index: 1;
}

.gen4-category-card__number {
	font-size: 0.68rem;
	left: 1rem;
	letter-spacing: 0.1em;
	top: 1rem;
}

.gen4-category-card__name {
	align-items: center;
	bottom: clamp(1rem, 2vw, 2rem);
	display: flex;
	font-size: clamp(1.35rem, 2.6vw, 2.75rem);
	justify-content: space-between;
	left: clamp(1rem, 2vw, 2rem);
	right: clamp(1rem, 2vw, 2rem);
}

.gen4-category-card:hover img,
.gen4-category-card:focus-visible img {
	filter: saturate(1.12) contrast(1.04);
	transform: scale(1.045);
}

.gen4-brands-section {
	overflow: hidden;
}

.gen4-brands-section h2 {
	font-size: clamp(2.6rem, 6vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.96;
	margin: 0;
	max-width: 13ch;
}

.gen4-brand-marquee {
	margin-top: clamp(3rem, 7vw, 6rem);
	max-width: none;
	overflow: hidden;
	width: 100%;
}

/* Full-bleed shortcode output, not the default 960px text column. */
.gen4-brands-section > .gen4-brand-marquee.alignfull {
	margin-inline: 0;
	max-width: none;
}

.gen4-brand-marquee__track {
	animation: gen4-marquee 32s linear infinite;
	display: flex;
	width: max-content;
}

.gen4-brand-marquee__group {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-shrink: 0;
	gap: clamp(3rem, 8vw, 9rem);
	justify-content: space-around;
	min-width: 100vw;
	padding-right: clamp(3rem, 8vw, 9rem);
}

.gen4-brand-marquee img {
	filter: invert(1);
	height: clamp(3rem, 6vw, 5.5rem);
	object-fit: contain;
	opacity: 0.75;
	width: clamp(7rem, 14vw, 12rem);
}

@keyframes gen4-marquee {
	to {
		transform: translateX(-50%);
	}
}

.gen4-contact-layout {
	display: grid;
	gap: clamp(3rem, 8vw, 9rem);
	grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
}

.gen4-contact-layout > * {
	min-width: 0;
}

/* Editable legal copy uses the same editorial scale as project body text. */
.gen4-legal-content {
	max-width: 54rem;
}

.gen4-legal-content h2 {
	font-size: clamp(1.75rem, 3vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.15;
	margin: 2.5rem 0 1rem;
}

.gen4-legal-content p,
.gen4-legal-content li {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.65;
}

.gen4-legal-content p {
	margin-block: 1.25rem;
}

.gen4-legal-content li + li {
	margin-top: 0.5rem;
}

.gen4-legal-content a {
	overflow-wrap: anywhere;
}

.gen4-contact-layout :is(h1, h2) {
	font-size: clamp(2.8rem, 6vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.065em;
	line-height: 0.93;
	margin: 0 0 2rem;
	max-width: 9ch;
}

.gen4-contact-layout > .wp-block-group > p:last-child {
	color: var(--gen4-muted);
	line-height: 1.55;
	max-width: 34ch;
}

.gen4-contact-page > .gen4-page-content {
	padding-top: clamp(3.5rem, 6.5vw, 6rem);
}

.gen4-form-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 2rem);
	grid-template-columns: 1fr 1fr;
}

.gen4-contact-form label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Keep field names available to assistive technology without visible labels. */
.gen4-contact-form .gen4-form-label {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.gen4-contact-form input[type="text"],
.gen4-contact-form input[type="email"],
.gen4-contact-form textarea {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--gen4-line);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--gen4-text);
	font: inherit;
	font-size: 1rem;
	margin-top: 0.65rem;
	padding: 0.9rem 0;
	width: 100%;
}

.gen4-contact-form textarea {
	height: 14rem;
	min-height: 9rem;
	resize: vertical;
}

.gen4-contact-form input::placeholder,
.gen4-contact-form textarea::placeholder {
	color: var(--gen4-muted);
	opacity: 0.7;
}

.gen4-contact-form .wpcf7-submit {
	background: var(--gen4-text);
	border: 0;
	border-radius: 0;
	color: var(--gen4-bg);
	cursor: pointer;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-top: 0.5rem;
	padding: 1rem 1.4rem;
	text-transform: uppercase;
	transition: background-color 220ms ease, color 220ms ease;
}

.gen4-contact-form .wpcf7-submit:hover,
.gen4-contact-form .wpcf7-submit:focus-visible {
	background: var(--gen4-accent);
	color: var(--gen4-bg);
}

.gen4-contact-form .wpcf7-not-valid-tip,
.gen4-contact-form .wpcf7-response-output {
	font-size: 0.82rem;
}

.gen4-capabilities {
	border-top: 1px solid var(--gen4-line);
}

.gen4-capabilities p {
	align-items: center;
	border-bottom: 1px solid var(--gen4-line);
	display: flex;
	font-size: clamp(1.65rem, 4.4vw, 4.5rem);
	font-weight: 500;
	justify-content: space-between;
	letter-spacing: -0.045em;
	line-height: 1;
	margin: 0;
	padding: 0.58em 0;
}

.gen4-capabilities p::after {
	color: var(--gen4-accent);
	content: "+";
	font-size: 0.55em;
	font-weight: 400;
}

.gen4-page-hero,
.gen4-project-hero {
	padding-bottom: clamp(4rem, 9vw, 8rem);
	padding-top: clamp(5rem, 12vw, 11rem);
}

.gen4-page-hero h1 {
	max-width: 11ch;
}

.gen4-page-hero.gen4-page-hero--compact,
.gen4-project-hero {
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	padding-top: clamp(3.5rem, 6.5vw, 6rem);
}

.gen4-project-hero > .wp-block-group {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.gen4-project-hero h1 {
	font-family: var(--gen4-project-font);
	max-width: 22ch;
	overflow-wrap: anywhere;
}

.gen4-project-hero .gen4-project-back {
	margin: 0;
}

.gen4-project-back a {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
	text-decoration: none;
}

/* Scope the project editor canvas, leaving ACF meta boxes and admin UI untouched. */
.editor-styles-wrapper.post-type-portfolios {
	box-sizing: border-box;
	color: var(--gen4-text);
	font-family: var(--gen4-project-font);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.65;
	padding-inline: var(--gen4-page-gutter);
}

.editor-styles-wrapper.post-type-portfolios .editor-post-title {
	color: var(--gen4-text);
	font-family: var(--gen4-project-font);
	font-size: clamp(2.6rem, 6vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.95;
	margin-inline: 0 !important;
	max-width: 22ch;
	overflow-wrap: anywhere;
}

.gen4-project-content .wp-block-post-content :is(h2, h3),
.editor-styles-wrapper.post-type-portfolios :is(h2, h3) {
	color: var(--gen4-text);
	font-family: var(--gen4-project-font);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.15;
	margin-block: 2.5rem 1rem;
	margin-inline: 0 !important;
}

.gen4-project-content .wp-block-post-content h2,
.editor-styles-wrapper.post-type-portfolios h2 {
	font-size: clamp(1.75rem, 3vw, 3rem);
}

.gen4-project-content .wp-block-post-content h3,
.editor-styles-wrapper.post-type-portfolios h3 {
	font-size: clamp(1.3rem, 2.2vw, 2rem);
}

.gen4-project-content .wp-block-post-content > :is(p, ul, ol),
.editor-styles-wrapper.post-type-portfolios :is(p, ul, ol) {
	font-family: var(--gen4-project-font);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.65;
	margin-block: 1.25rem;
	margin-inline: 0 !important;
	max-width: 54rem;
}

.gen4-contact-page .wp-block-post-content > p.has-x-large-font-size:first-child {
	/* Override the old block preset so the introduction stays below the H1. */
	font-size: clamp(1.5rem, 3vw, 3rem) !important;
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.2;
	margin: 0 0 1.5rem;
	margin-inline: 0 !important;
	max-width: 28ch;
}

/* Contact uses editable Core blocks; these styles never affect the home form. */
/* The editor reset can override body typography; keep this correction page-scoped. */
.editor-styles-wrapper:has(.gen4-contact-composition) {
	box-sizing: border-box;
	color: var(--gen4-text);
	font-family: Arial, Helvetica, sans-serif;
	padding-inline: var(--gen4-page-gutter);
}

.editor-styles-wrapper:has(.gen4-contact-composition) .editor-post-title {
	color: var(--gen4-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(2.6rem, 6vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.95;
}

.gen4-contact-composition {
	align-items: start;
	display: grid;
	gap: clamp(2rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.gen4-contact-composition > * {
	margin-block: 0;
	min-width: 0;
}

.gen4-contact-copy h2 {
	font-size: clamp(1.75rem, 3vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.12;
	margin: 0;
	max-width: 20ch;
}

.gen4-contact-copy p {
	color: var(--gen4-muted);
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.6;
	margin: 1.25rem 0 0;
	max-width: 46ch;
}

.gen4-contact-intro .gen4-contact-photo {
	margin: clamp(1.75rem, 3vw, 3rem) 0 0;
}

.gen4-contact-photo img {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.gen4-contact-photo figcaption {
	color: var(--gen4-muted);
	font-size: 0.72rem;
	line-height: 1.5;
	margin: 0.75rem 0 0;
	text-align: left;
}

.gen4-contact-panel {
	background: var(--gen4-surface);
	border-top: 2px solid var(--gen4-accent);
	box-sizing: border-box;
	padding: clamp(1.25rem, 3vw, 3rem);
}

.gen4-contact-panel .gen4-contact-form p {
	margin: 0;
}

.gen4-contact-panel .gen4-form-grid {
	display: block;
}

/* CF7 wraps the two labels in a paragraph: apply the grid to that wrapper. */
.gen4-contact-panel .gen4-form-grid > p {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.gen4-contact-panel .gen4-contact-form label {
	min-width: 0;
}

.gen4-contact-panel .gen4-contact-form > p > label {
	margin-top: 1.75rem;
}

.gen4-contact-panel .gen4-contact-form input[type="text"],
.gen4-contact-panel .gen4-contact-form input[type="email"],
.gen4-contact-panel .gen4-contact-form textarea {
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	margin-top: 0;
	min-height: 3rem;
}

.gen4-contact-panel .gen4-contact-form input::placeholder,
.gen4-contact-panel .gen4-contact-form textarea::placeholder {
	opacity: 1;
}

.gen4-contact-panel .gen4-contact-form textarea {
	height: 11rem;
	min-height: 9rem;
}

.gen4-contact-panel .wpcf7-form-control-wrap[data-name="gen4-human"] {
	display: block;
	margin-top: 0.75rem;
	max-width: 15rem;
}

.gen4-contact-panel .gen4-contact-form .wpcf7-submit {
	margin-top: 2rem;
	min-height: 3rem;
}

.gen4-contact-panel .gen4-contact-form :is(input, textarea):focus-visible {
	outline: 2px solid var(--gen4-accent);
	outline-offset: 4px;
}

@media (max-width: 959px) {
	.gen4-contact-composition {
		grid-template-columns: minmax(0, 1fr);
	}

	.gen4-contact-intro {
		align-items: center;
		display: grid;
		gap: 2rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.gen4-contact-intro .gen4-contact-photo {
		margin: 0;
	}
}

@media (max-width: 600px) {
	.gen4-contact-intro,
	.gen4-contact-panel .gen4-form-grid > p {
		grid-template-columns: minmax(0, 1fr);
	}

	.gen4-contact-photo img {
		aspect-ratio: 16 / 9;
	}
}

/* Studio is ordinary Core block content; these classes also style the editor. */
.gen4-studio {
	--gen4-studio-space: clamp(4rem, 8vw, 7.5rem);
}

.gen4-studio > * + * {
	margin-block-start: var(--gen4-studio-space);
}

.gen4-studio .gen4-studio-lead,
.gen4-studio .gen4-studio-process {
	align-items: start;
	display: grid;
	gap: clamp(2rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.gen4-studio h2 {
	font-size: clamp(2rem, 3.5vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 1.08;
	margin: 0;
}

.gen4-studio p {
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	line-height: 1.6;
	margin: 0;
}

.gen4-studio-copy > p + p {
	color: var(--gen4-muted);
	margin-top: 1.25rem;
}

.gen4-studio figure {
	margin-inline: 0;
}

.gen4-studio img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.gen4-studio-panorama img {
	aspect-ratio: 16 / 8;
	object-position: center 45%;
}

.gen4-studio-portrait img {
	aspect-ratio: 4 / 5;
	object-position: center;
}

.gen4-studio figcaption,
.gen4-studio p.gen4-studio-note {
	color: var(--gen4-muted);
	font-size: 0.75rem;
	line-height: 1.5;
	margin-top: 0.75rem;
	text-align: left;
}

.gen4-studio-process > .wp-block-group > h2 {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.gen4-studio-step {
	border-top: 1px solid var(--gen4-line);
	padding-block: 1.5rem;
}

.gen4-studio-step h3 {
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: 0 0 0.75rem;
}

.gen4-studio-step p {
	color: var(--gen4-muted);
}

.gen4-studio-services {
	border-top: 1px solid var(--gen4-line);
	padding-top: var(--gen4-studio-space);
}

.gen4-studio-services-grid {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(2rem, 4vw, 4rem);
}

.gen4-studio-services-grid h3 {
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	margin: 0 0 1rem;
}

.gen4-studio-services-grid p {
	color: var(--gen4-muted);
}

.gen4-studio-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	margin-top: 3rem;
}

@media (max-width: 780px) {
	.gen4-studio .gen4-studio-lead,
	.gen4-studio .gen4-studio-process,
	.gen4-studio-services-grid {
		grid-template-columns: 1fr;
	}

	.gen4-studio-panorama img {
		aspect-ratio: 4 / 3;
	}

	.gen4-studio-portrait img {
		aspect-ratio: 4 / 3;
	}
}

.gen4-page-content,
.gen4-project-content {
	padding-bottom: var(--gen4-section-space);
}

.gen4-page-content > * + *,
.gen4-project-content > * + * {
	margin-block-start: 1.25em;
}

.gen4-page-content > h2,
.gen4-project-content > h2 {
	font-size: clamp(2rem, 5vw, 5rem);
	letter-spacing: -0.05em;
	line-height: 1;
	margin-block-start: 1.8em;
}

.gen4-project-cover {
	margin-bottom: clamp(4rem, 9vw, 9rem);
}

.gen4-project-cover img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.gen4-project-data {
	margin-bottom: clamp(5rem, 11vw, 10rem);
}

.gen4-project-content {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.65;
}

.gen4-project-content > p,
.gen4-project-content > ul,
.gen4-project-content > ol {
	max-width: 54rem;
}

.gen4-project-content .wp-block-image,
.gen4-project-content .wp-block-video,
.gen4-project-content .wp-block-gallery {
	margin-block: clamp(2.5rem, 7vw, 7rem);
}

/* Editable case-study groups: shared layout in the frontend and block editor. */
.gen4-case-study {
	display: grid;
	gap: clamp(3rem, 7vw, 6rem);
	min-width: 0;
}

.gen4-case-study__intro,
.gen4-case-study__approach {
	align-items: start;
	display: grid;
	gap: clamp(1.5rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.gen4-case-study :is(.gen4-case-study__intro, .gen4-case-study__approach, .gen4-case-study__closing) > h2 {
	margin-block: 0 1rem;
}

.gen4-case-study .gen4-case-study__copy > p,
.gen4-case-study .gen4-case-study__closing > p {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.65;
	margin: 0;
	max-width: 54rem;
}

.gen4-case-study .gen4-case-study__copy > p + p {
	margin-top: 1.25rem;
}

.gen4-case-study .wp-block-image {
	margin: 0;
	min-width: 0;
}

.gen4-case-study .wp-block-image img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.gen4-case-study__hero img {
	aspect-ratio: 16 / 9;
}

.gen4-case-study__pair {
	display: grid;
	gap: clamp(1.25rem, 3vw, 3rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gen4-case-study__detail img {
	aspect-ratio: 4 / 3;
}

.gen4-case-study .wp-element-caption {
	color: var(--gen4-muted);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: 0.75rem 0 0;
	text-align: left;
}

@media (max-width: 782px) {
	.gen4-case-study__intro,
	.gen4-case-study__approach,
	.gen4-case-study__pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gen4-project-nav {
	border-top: 1px solid var(--gen4-line);
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr;
	padding-bottom: clamp(4rem, 8vw, 7rem);
	padding-top: clamp(2rem, 5vw, 4rem);
}

.gen4-project-nav a {
	display: inline-block;
	font-size: clamp(1.2rem, 2.5vw, 2.2rem);
	letter-spacing: -0.03em;
	position: relative;
	text-decoration: none;
}

.gen4-project-nav .post-navigation-link-previous a {
	padding-left: 1.5em;
}

.gen4-project-nav .post-navigation-link-next a {
	padding-right: 1.5em;
}

/* Decorative SVG arrows: no font glyphs or platform-dependent emoji. */
.gen4-project-nav .post-navigation-link-previous a::before,
.gen4-project-nav .post-navigation-link-next a::after {
	background-color: currentColor;
	content: "";
	height: 1em;
	position: absolute;
	top: 0.3em;
	width: 1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M8 2l6 6-6 6' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M8 2l6 6-6 6' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gen4-project-nav .post-navigation-link-previous a::before {
	left: 0;
	transform: rotate(180deg);
}

.gen4-project-nav .post-navigation-link-next a::after {
	right: 0;
}

.gen4-project-nav .post-navigation-link-next {
	text-align: right;
}

.gen4-site-footer {
	background: #050505;
	border-top: 1px solid var(--gen4-line);
	padding-bottom: clamp(2rem, 5vw, 4rem);
	padding-top: clamp(4rem, 9vw, 8rem);
}

.gen4-site-footer__top {
	align-items: end;
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1.5fr) minmax(14rem, 0.5fr);
}

.gen4-site-footer__cta > .wp-block-buttons {
	margin-top: clamp(2.75rem, 5vw, 5rem);
}

.gen4-footer-contact-button .wp-block-button__link {
	align-items: center;
	background: var(--gen4-text);
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	color: var(--gen4-bg);
	display: inline-flex;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	gap: 1.5rem;
	letter-spacing: 0.08em;
	line-height: 1.5;
	min-height: 48px;
	padding: 1rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 220ms ease;
}

.gen4-footer-contact-button .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--gen4-accent);
	color: var(--gen4-bg);
}

/* Contacto keeps useful footer navigation, without an empty invitation column. */
.gen4-site-footer__top:not(:has(.gen4-site-footer__cta)) {
	grid-template-columns: minmax(0, 1fr);
}

.gen4-site-footer__top:not(:has(.gen4-site-footer__cta)) .wp-block-navigation__container {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.gen4-site-footer__bottom {
	align-items: center;
	border-top: 1px solid var(--gen4-line);
	display: flex;
	font-size: 0.68rem;
	gap: 1.5rem;
	justify-content: space-between;
	letter-spacing: 0.1em;
	margin-top: clamp(4rem, 9vw, 8rem);
	padding-top: 1.25rem;
	text-transform: uppercase;
}

.gen4-site-footer__bottom p {
	margin: 0;
}

.gen4-site-footer__credits {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.4rem;
}

.gen4-site-footer__credit {
	color: #7d7a74;
	letter-spacing: 0.02em;
	text-transform: none;
}

.gen4-site-footer__credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.gen4-site-footer__credit a:is(:hover, :focus-visible) {
	color: var(--gen4-accent);
}

.gen4-site-footer__social.wp-block-social-links {
	flex-shrink: 0;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.gen4-site-footer__social.wp-block-social-links .wp-social-link {
	background: transparent;
	color: var(--gen4-text);
}

.gen4-site-footer__social.wp-block-social-links .wp-social-link a {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0.625rem;
}

.gen4-site-footer__social.wp-block-social-links .wp-social-link svg {
	height: 1.375rem;
	width: 1.375rem;
}

.gen4-site-footer__social.wp-block-social-links .wp-social-link:is(:hover, :focus-within) {
	color: var(--gen4-accent);
	transform: none;
}

.gen4-site-footer .wp-block-navigation {
	align-items: flex-start;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gen4-site-footer .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.8rem;
}

.wp-block-gen4-portfolio-grid.gen4-portfolio {
	--gen4-portfolio-gap: clamp(2rem, 4.5vw, 5rem) clamp(1rem, 2vw, 2rem);
}

.gen4-portfolio__filters {
	border-bottom: 1px solid var(--gen4-line);
	gap: 0.65rem 1.5rem;
	padding-bottom: 1rem;
}

.gen4-portfolio__filter {
	color: var(--gen4-muted);
	font-size: 0.7rem;
}

.gen4-portfolio__filter.is-active {
	color: var(--gen4-text);
}

.gen4-portfolio__media {
	background: var(--gen4-surface);
}

.gen4-portfolio__placeholder {
	background:
		radial-gradient(circle at 72% 26%, rgba(241, 89, 84, 0.75), transparent 24%),
		linear-gradient(135deg, #232323, #090909 70%);
}

.gen4-portfolio__card:nth-child(3n + 2) .gen4-portfolio__placeholder {
	background:
		radial-gradient(circle at 28% 72%, rgba(77, 119, 255, 0.72), transparent 28%),
		linear-gradient(25deg, #111827, #090909 72%);
}

.gen4-portfolio__card:nth-child(3n) .gen4-portfolio__placeholder {
	background:
		linear-gradient(115deg, transparent 46%, rgba(242, 240, 235, 0.72) 47%, rgba(242, 240, 235, 0.72) 54%, transparent 55%),
		linear-gradient(145deg, #222, #0a0a0a);
}

.gen4-portfolio__title {
	font-weight: 500;
	letter-spacing: -0.04em;
}

.gen4-portfolio__summary,
.gen4-portfolio__categories {
	color: var(--gen4-muted);
	opacity: 1;
}

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--gen4-accent);
	outline-offset: 4px;
}

@media (max-width: 780px) {
	.gen4-video-hero__bottom,
	.gen4-contact-layout {
		grid-template-columns: 1fr;
	}

	.gen4-category-grid {
		grid-template-columns: 1fr;
	}

	.gen4-category-card {
		aspect-ratio: 4 / 3;
	}

	.gen4-home-hero {
		min-height: auto;
	}

	.gen4-home-hero__foot,
	.gen4-site-footer__top {
		grid-template-columns: 1fr;
	}

	.gen4-section-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.gen4-project-nav {
		grid-template-columns: 1fr;
	}

	.gen4-project-nav .post-navigation-link-next {
		text-align: left;
	}
}

@media (max-width: 600px) {
	.gen4-video-hero {
		min-height: 38rem;
	}

	.gen4-video-hero h1 {
		font-size: clamp(3.7rem, 18vw, 6.4rem);
	}

	.gen4-intro-aside {
		align-items: flex-start;
		flex-direction: column;
	}

	.gen4-form-grid {
		grid-template-columns: 1fr;
	}

	.gen4-site-header__inner {
		min-height: 4.5rem;
	}

	.gen4-home-hero h1,
	.gen4-page-hero h1 {
		font-size: clamp(3.4rem, 18vw, 6.4rem);
	}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.gen4-brand-marquee__track {
		animation: none;
	}
}