/* Great FKN Things — estilos del tema.
   Colores, fuentes y espaciados vienen de theme.json como --wp--preset--* y --wp--custom--*.
   No escribir literales de color o fuente aquí. */

/* ---------- Base ---------- */
@media (max-width: 639px) { :root { --wp--custom--gutter: 16px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
a, button { -webkit-tap-highlight-color: transparent; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 1000; width: auto; height: auto; clip: auto; clip-path: none; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); }
.site-main { flex: 1 0 auto; overflow-x: clip; }

/* Texto con flecha (Ver video, Give me more, Volver arriba) */
.text-link { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: var(--wp--custom--tracking--wide); }
.text-link .arrow { transition: transform var(--wp--custom--transition); }
@media (hover: hover) { .text-link:hover .arrow { transform: translateX(0.15em); } .hero__more:hover .arrow { transform: translateY(0.15em); } }

/* Sección genérica y prosa de páginas */
.section { width: 100%; padding: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--60)) var(--wp--custom--gutter) var(--wp--preset--spacing--70); }
.section--narrow { width: 100%; }
.page__title { font-size: var(--wp--preset--font-size--detail); font-weight: 700; line-height: 1.05; letter-spacing: var(--wp--custom--tracking--tight); margin-bottom: var(--wp--preset--spacing--50); }
.prose { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; letter-spacing: -0.01em; max-width: 46rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2em; }
.prose h2 { margin: 2em 0 0.6em; }
.prose a { border-bottom: 1px solid currentColor; }

/* ---------- Cabecera ---------- */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--wp--custom--header-height);
	transition: transform 0.45s var(--wp--custom--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 24px var(--wp--custom--gutter) 0; }
.site-logo { font-size: 20px; font-weight: 900; line-height: 1; letter-spacing: var(--wp--custom--tracking--snug); }
.site-nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); font-size: 24px; line-height: 1.4; letter-spacing: var(--wp--custom--tracking--wide); text-transform: uppercase; }
.site-nav__link { position: relative; }
.site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--transition); }
@media (hover: hover) { .site-nav__link:hover::after { transform: scaleX(1); } }
.lang-switch { display: inline-flex; gap: 0.4em; font-size: 24px; letter-spacing: var(--wp--custom--tracking--wide); text-transform: uppercase; }
.site-nav .lang-switch { margin-left: var(--wp--preset--spacing--40); }
.lang-switch a[aria-current="true"] { font-weight: 700; }

.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; }
.nav-toggle__bar { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform var(--wp--custom--transition), top var(--wp--custom--transition); }
.nav-toggle__bar:nth-child(1) { top: 17px; }
.nav-toggle__bar:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--wp--preset--color--background); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: var(--wp--preset--spacing--30); padding: var(--wp--custom--gutter); }
.mobile-menu__link { font-size: 43px; font-weight: 700; line-height: 1.2; letter-spacing: var(--wp--custom--tracking--wide); text-transform: uppercase; }
.mobile-menu__lang { margin-top: var(--wp--preset--spacing--40); }
body.nav-open { overflow: hidden; }
body.nav-open .site-header { transform: none; }

@media (max-width: 809px) {
	.site-nav { display: none; }
	.nav-toggle { display: block; }
}

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; overflow: clip; }
/* Reveal en WebGL: el canvas pinta fondo, imagen y texto; el DOM del contenido queda transparente
   (sigue ahí para SEO, lectores de pantalla y el clic del enlace). Sin WebGL todo se ve normal. */
.hero__gl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero__media { position: absolute; inset: 0; z-index: -1; visibility: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero--gl .hero__title, .hero--gl .hero__intro, .hero--gl .hero__more { color: transparent; }
.hero--gl .hero__more .arrow { visibility: hidden; }
.site-header { transition: transform 0.45s var(--wp--custom--ease), color 0.6s var(--wp--custom--ease); }
.gft-hero-open .site-header { color: var(--wp--preset--color--background); }
.hero__content { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--40)) var(--wp--custom--gutter) calc(var(--wp--preset--spacing--50) + 60px); gap: var(--wp--preset--spacing--40); text-align: center; }
/* «Great !» mide 2,81 veces su tamaño de fuente (KH Teka Black, tracking −0,04 em): 28,2vw ≈ 80 % del ancho. */
.hero__title { font-size: 28.2vw; font-weight: 900; line-height: 0.9; letter-spacing: var(--wp--custom--tracking--tight); white-space: nowrap; }
.hero__intro { font-size: var(--wp--preset--font-size--h2); line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase; max-width: 26em; margin-top: var(--wp--preset--spacing--20); }
.hero__footer { position: absolute; left: var(--wp--custom--gutter); right: var(--wp--custom--gutter); bottom: var(--wp--preset--spacing--40); display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--wp--preset--spacing--30); }
@media (max-width: 639px) {
	.hero__footer { bottom: var(--wp--preset--spacing--30); }
	.text-link { font-size: var(--wp--preset--font-size--lead); }
}

/* ---------- 404 ---------- */
.not-found { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--30); padding: var(--wp--custom--gutter); text-align: center; }
.not-found__code { font-size: var(--wp--preset--font-size--great); font-weight: 900; line-height: 1; letter-spacing: var(--wp--custom--tracking--tight); }
.not-found__title { font-size: var(--wp--preset--font-size--h2); font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; }

/* ---------- Pie ---------- */
.site-footer { background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); overflow: clip; }
.site-footer :focus-visible { outline-color: var(--wp--preset--color--background); }

.ticker { display: flex; width: max-content; padding-block: var(--wp--preset--spacing--30); animation: ticker 60s linear infinite; }
.ticker__track { display: flex; align-items: baseline; gap: 40px; padding-right: 40px; white-space: nowrap; }
.ticker__word { font-size: var(--wp--preset--font-size--wordmark); font-weight: 900; line-height: var(--wp--custom--line-height--flat); letter-spacing: var(--wp--custom--tracking--tight); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (hover: hover) { .ticker:hover { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } }

.footer-main { padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--30); }
.footer-main__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wp--preset--spacing--40); }
.footer-label { font-size: var(--wp--preset--font-size--label); line-height: 1.4; letter-spacing: var(--wp--custom--tracking--wide); margin-bottom: var(--wp--preset--spacing--20); }
.footer-nav { flex: 1 1 320px; max-width: 640px; padding-top: var(--wp--preset--spacing--40); }
.footer-nav__row { display: block; padding: 0.35em 0; border-bottom: 1px solid var(--wp--preset--color--line-inverse); font-size: var(--wp--preset--font-size--nav); line-height: 1.1; letter-spacing: 0.01em; transition: padding-left var(--wp--custom--transition); }
@media (hover: hover) { .footer-nav__row:hover { padding-left: 0.3em; } }
.footer-right { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--40); }
.footer-details, .footer-socials { display: flex; flex-direction: column; }
.footer-link { display: inline-flex; align-items: center; gap: 0.25em; font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 2; }
.footer-link .arrow { font-size: 0.9em; transition: transform var(--wp--custom--transition); }
@media (hover: hover) { .footer-link:hover .arrow { transform: translate(0.1em, -0.1em); } }
.footer-text { font-size: var(--wp--preset--font-size--small); line-height: 1.5; letter-spacing: -0.01em; margin-top: var(--wp--preset--spacing--10); }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--wp--preset--spacing--30) 32px; margin-top: var(--wp--preset--spacing--60); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.footer-bottom__place { white-space: nowrap; }
.clock { font-variant-numeric: tabular-nums; }
.footer-bottom__top { display: inline-flex; align-items: center; gap: 0.25em; font-weight: 500; }
.footer-bottom__legal { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5em 0.6em; }
@media (max-width: 639px) {
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.footer-bottom__legal { justify-content: flex-start; }
}

/* ---------- Proyectos: grid masonry y tarjetas ---------- */
.work { padding: var(--wp--preset--spacing--60) var(--wp--custom--gutter) var(--wp--preset--spacing--70); }
.masonry { display: flex; gap: 20px; }
.masonry__col { display: flex; flex-direction: column; gap: 20px; flex: 1 1 0; min-width: 0; }
.masonry--stack { flex-direction: column; }
.masonry--stack .card { width: 100%; }
.work__more { margin-top: var(--wp--preset--spacing--60); text-align: center; }

.card { width: 100%; }
.card__link { display: block; color: inherit; }
.card__mask { display: block; height: 480px; overflow: clip; background: var(--wp--preset--color--line); }
.card--1 .card__mask { height: 340px; }
.card--3 .card__mask { height: 640px; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--wp--custom--ease), opacity 0.7s var(--wp--custom--ease); }
@media (hover: hover) { .card__link:hover .card__img { transform: scale(1.08); opacity: 0.9; } }
.card__caption { display: flex; flex-wrap: wrap; gap: 0 0.5em; margin-top: 6px; font-size: var(--wp--preset--font-size--meta); line-height: 1.3; letter-spacing: var(--wp--custom--tracking--meta); text-transform: uppercase; }
@media (max-width: 639px) {
	.card__mask { height: 440px; }
	.card--1 .card__mask { height: 320px; }
	.card--3 .card__mask { height: 580px; }
}

/* ---------- Aparición al scroll ---------- */
[data-appear] { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--wp--custom--ease), transform 0.7s var(--wp--custom--ease); }
[data-appear].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-appear] { opacity: 1; transform: none; } }

/* ---------- Página Work ---------- */
.page-title { padding: calc(var(--wp--custom--header-height) + 24px) var(--wp--custom--gutter) 32px; }
.page-title__text { font-size: var(--wp--preset--font-size--great); font-weight: 900; line-height: 1; letter-spacing: var(--wp--custom--tracking--tight); }
.work--all { padding-top: 0; }

/* ---------- Ficha de proyecto ---------- */
.project__cover { position: relative; height: min(720px, 85vh); overflow: clip; background: var(--wp--preset--color--content); color: var(--wp--preset--color--background); }
.project__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project__cover-text { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(var(--wp--custom--header-height) + 30px) var(--wp--custom--gutter) 30px; text-align: center; }
.project__client { font-size: clamp(15px, 0.6rem + 0.8vw, 24px); line-height: 1.25; letter-spacing: var(--wp--custom--tracking--snug); }
.project__title { font-size: var(--wp--preset--font-size--display); font-weight: 400; line-height: 0.9; letter-spacing: -0.01em; max-width: 20ch; }

.project__scope { display: flex; flex-wrap: wrap; }
.project__intro { flex: 1 1 70%; min-width: 320px; padding: 30px var(--wp--custom--gutter); }
.project__intro-text { font-size: var(--wp--preset--font-size--intro); line-height: 1; letter-spacing: var(--wp--custom--tracking--tight); }
.project__list { flex: 1 1 30%; min-width: 260px; display: flex; flex-direction: column; gap: 24px; padding: 30px var(--wp--custom--gutter); }
.project__label { font-size: var(--wp--preset--font-size--label); line-height: 1.4; letter-spacing: var(--wp--custom--tracking--wide); }
.project__item { display: flex; flex-direction: column; gap: 4px; }
.project__value { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; letter-spacing: -0.01em; }

.project__block { display: flex; flex-wrap: wrap; padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) 0; }
.project__block--last { padding-bottom: var(--wp--preset--spacing--70); }
.project__heading, .project__text { flex: 1 1 50%; min-width: 280px; padding-right: 30px; }
.project__heading { font-size: var(--wp--preset--font-size--display); font-weight: 400; line-height: 0.9; letter-spacing: -0.01em; margin-bottom: var(--wp--preset--spacing--30); }
.project__text { max-width: none; }
.project__media { margin: var(--wp--preset--spacing--70) 0 0; height: min(810px, 90vh); overflow: clip; }
.project__media-img { width: 100%; height: 100%; object-fit: cover; }

.project__nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 40px var(--wp--custom--gutter); border-top: 1px solid var(--wp--preset--color--foreground); }
.project__nav-link { display: inline-block; font-size: var(--wp--preset--font-size--small); font-weight: 900; line-height: 1.2; letter-spacing: var(--wp--custom--tracking--wide); transition: transform 0.35s var(--wp--custom--ease); }
@media (hover: hover) { .project__nav-link:hover { transform: scale(1.08); } }
@media (max-width: 639px) {
	.project__heading, .project__text { padding-right: 0; }
	.project__nav { padding: 32px var(--wp--custom--gutter); }
}

/* ---------- Contacto ---------- */
.contact { padding-bottom: var(--wp--preset--spacing--60); }
.contact__hero { display: flex; flex-direction: column; gap: 16px; padding: calc(var(--wp--custom--header-height) + 80px) var(--wp--custom--gutter) 60px; }
.contact__title { font-size: clamp(40px, 2rem + 2.5vw, 70px); font-weight: 900; line-height: 1; letter-spacing: var(--wp--custom--tracking--wide); }
.contact__intro { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; letter-spacing: -0.01em; max-width: 560px; }
.contact__form { padding: 0 var(--wp--custom--gutter); }
.contact-form { display: flex; flex-direction: column; gap: 48px; }
.contact-form__tabs { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.contact-form__tab { font-size: var(--wp--preset--font-size--menu); font-weight: 700; line-height: 1.2; letter-spacing: var(--wp--custom--tracking--wide); opacity: 0.35; transition: opacity var(--wp--custom--transition), transform 0.35s var(--wp--custom--ease); }
.contact-form__tab[aria-selected="true"] { opacity: 1; }
@media (hover: hover) { .contact-form__tab:hover { opacity: 1; transform: scale(1.08); } }
.contact-form__desc { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; max-width: 560px; }
.contact-form__form { display: flex; flex-direction: column; gap: 44px; }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field__input { width: 100%; padding: 0 0 12px; border: 0; border-bottom: 1px solid rgba(0,0,0,0.22); border-radius: 0; background: none; font: inherit; font-size: var(--wp--preset--font-size--lead); line-height: 1.2; letter-spacing: 0; color: inherit; transition: border-color var(--wp--custom--transition); }
.field__input::placeholder { color: rgba(0,0,0,0.42); }
.field__input:focus { outline: none; border-bottom-color: var(--wp--preset--color--foreground); }
.field__input--area { resize: vertical; min-height: 3.6em; }
.contact-form__consent { display: flex; gap: 0.6em; align-items: flex-start; font-size: var(--wp--preset--font-size--label); line-height: 1.4; letter-spacing: var(--wp--custom--tracking--wide); max-width: 560px; }
.contact-form__consent input { margin: 0.2em 0 0; accent-color: var(--wp--preset--color--foreground); }
.contact-form__consent a { border-bottom: 1px solid currentColor; }
.contact-form__notice { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; padding: 16px 20px; border: 1px solid currentColor; max-width: 560px; }
@media (max-width: 639px) { .contact__hero { padding-top: calc(var(--wp--custom--header-height) + 56px); padding-bottom: 40px; } .contact-form { gap: 36px; } .contact-form__form { gap: 32px; } }

/* ---------- Ficha: galería, vídeo y redes ---------- */
.project__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) 0; }
.project__gallery-item { margin: 0; }
.project__gallery-item img { width: 100%; height: auto; }
.project__video { margin: var(--wp--preset--spacing--70) var(--wp--custom--gutter) 0; aspect-ratio: 16 / 9; }
.project__video iframe { width: 100%; height: 100%; border: 0; }
.project__block--social { flex-direction: column; }
.project__block--social .project__heading { flex: none; }
.project__social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.project__social-item { margin: 0; }
.project__social-item img { width: 100%; height: auto; }
@media (max-width: 809px) { .project__gallery { grid-template-columns: 1fr; } .project__social { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Motion (GSAP + Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* Con GSAP activo las entradas las hace motion.js; la marquesina CSS se apaga y la mueve GSAP. */
html.has-motion [data-appear] { transition: none; }
.ticker--gsap { animation: none; }
/* Líneas de SplitText: cada línea se enmascara para entrar desde abajo. */
[data-lines] .line { display: block; }

/* ---------- Transiciones entre páginas (View Transitions nativas) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: cabecera; }
::view-transition-old(root) { animation: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both gft-fade-out; }
::view-transition-new(root) { animation: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both gft-fade-in; }
@keyframes gft-fade-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes gft-fade-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Fluidez: capas animadas promovidas al compositor ---------- */
.project__cover-img, .project__media-img, .card__img, .ticker, .site-header { will-change: transform; }
html.has-motion [data-appear]:not(.is-visible) { will-change: transform, opacity; }
.hero__content--inverse .hero__title { will-change: auto; }
img { content-visibility: auto; }
.project__cover-img, .hero__img { content-visibility: visible; }

/* ---------- Grano de película sobre toda la página ---------- */
/* Capa fija al doble del tamaño del viewport con una textura de motas semitransparentes que
   salta de posición 6 veces por segundo (steps), como el grano de una proyección. */
.grain {
	position: fixed; inset: -50% 0 0 -50%; width: 200%; height: 200vh; z-index: 2147483000;
	pointer-events: none; background: url('../img/grain.png') 0 0 repeat; background-size: 400px 400px;
	opacity: 0.55; will-change: transform; animation: grain 0.5s steps(6, end) infinite;
}
@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	17% { transform: translate(-5%, -10%); }
	33% { transform: translate(3%, -15%); }
	50% { transform: translate(12%, 9%); }
	67% { transform: translate(9%, 4%); }
	83% { transform: translate(-1%, 7%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }
/* Con el reveal activo o abierto, el grano se queda quieto y casi desaparece: sobre la imagen oscura sus saltos se leían como un temblor del blob. */
.grain { transition: opacity 0.4s ease; }
.gft-hero-active .grain, .gft-hero-open .grain { animation-play-state: paused; opacity: 0.12; }