/*
Theme Name: P-V. ( S )
Theme URI: http://www.pifarrevallejo.com
Version: 1.0
Description: Disseny d'<a href="http://www.pifarrevallejo.com">Adrià Pifarré Vallejo</a>
Author: Adrià Pifarré Vallejo.
Author URI: http://www.pifarrevallejo.com
Copyright: (c) 2026 Adrià Pifarré Vallejo
License: GNU/GPL Version 3 or later. http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   ╭──────────────────────────────────────────────────────────────────────╮
   │                                                                      │
   │   Design & Web Development:                                          │
   │   Adrià Pifarré Vallejo ( Pifarré-Vallejo Studio )                   │
   │   www.pifarrevallejo.com                                             │
   │                                                                      │
   ╰──────────────────────────────────────────────────────────────────────╯
   ========================================================================== */

/* ==========================================================================
   Tipografías Personalizadas (Local)
   ========================================================================== */
@font-face {
    font-family: 'Matter';
    src: url('fonts/matter.woff2') format('woff2'),
         url('fonts/matter.woff') format('woff'),
         url('fonts/matter.svg#Matter') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Teodor';
    src: url('fonts/teodor.woff2') format('woff2'),
         url('fonts/teodor.woff') format('woff'),
         url('fonts/teodor.svg#Teodor') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Estilos Generales
   ========================================================================== */

a:focus, 
button:focus, 
input:focus, 
textarea:focus {
    outline: none !important;
	-webkit-tap-highlight-color: transparent;
}

body {
    background-color: #F6F5F4;
    color: #171717;
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 0;
    text-rendering: geometricPrecision;
	display: flex;
    flex-direction: column;
    min-height: 100vh; /* Mínimo el 100% de la pantalla */
}

::selection {
    background-color: #171717;
    color: #F6F5F4;
}

::-moz-selection {
    background-color: #171717;
    color: #F6F5F4;
}

main,
.home-container, 
.overview-container, 
.single-project-container {
    flex-grow: 1;
}

/* Evita que el footer se encoja si hay mucho contenido */
.site-footer {
    flex-shrink: 0;
}

/* ==========================================================================
   Header / Menú de Navegación
   ========================================================================== */
.site-header {
    position: fixed; 
    top: 0; left: 0; width: 100%; z-index: 1000; 
    padding-bottom: 15px; transition: background-color 0.4s ease;
}

.header-container {
    position: relative; 
    padding-top: 50px; 
    padding-left: 50px; 
    padding-right: 50px; 
    display: flex; 
    align-items: center; 
    transition: padding-top 0.4s ease; 
}

.site-header.scrolled .header-container { padding-top: 15px; }

.site-branding, .main-navigation { flex: 1; display: flex; }
.main-navigation { justify-content: center; }
.site-logo { height: 12px; width: auto; display: block; }
.animaciologo { height: 19px !important; mix-blend-mode: multiply !important; }
.static-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 100px; }
.static-menu a { 
    text-decoration: none; 
    color: inherit; 
    text-transform: uppercase; 
    font-size: 12.5px; 
    letter-spacing: 0.15em; 
    transition: opacity 0.3s ease; 
    white-space: nowrap; /* MAGIA: Fuerza a que las palabras compuestas nunca salten de línea */
	-webkit-tap-highlight-color: transparent;
}
.static-menu a:hover { opacity: 0.5; }
.header-spacer { flex: 1; }
.logo-link { display: block; transition: opacity 0.3s ease; -webkit-tap-highlight-color: transparent;}
.logo-link:hover { opacity: 1; }
#logo-container { 
    position: relative; 
    display: block; 
}

#logo-in, 
#logo-out { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; /* Los ocultamos por opacidad, no por display */
    pointer-events: none; /* Evita que los GIFs roben el clic del ratón */
}

.overview-active .menu-item-overview a { opacity: 0.5; pointer-events: none; cursor: default; }
.overview-active .menu-item-about a { opacity: 1; }
.overview-active .menu-item-about a:hover { opacity: 0.5; }
.all-works-active .menu-item-all-works a { opacity: 0.5; pointer-events: none; cursor: default; }


/* ==========================================================================
   Etiqueta de Categoría Activa en el Header
   ========================================================================== */
.category-header-tag {
    position: absolute;
    left: 25%; 
    transform: translateX(-50%);
    display: flex;
    align-items: center; 
    gap: 8px; 
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #171717;
    white-space: nowrap;
    z-index: 10;
}

/* Ocultar la etiqueta de categoría cuando el About está abierto */
body.about-open .category-header-tag {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

.cat-tag-text {
    opacity: 0.5; 
    transition: opacity 0.3s ease;
}

.category-header-tag:hover .cat-tag-text {
    opacity: 1; 
}

.category-header-tag svg {
    opacity: 1 !important; 
    position: relative;
    top: 1px; 
}

@media (max-width: 768px) {
    .category-header-tag {
        left: 50%; 
    }
}

/* ==========================================================================
   Contenedor Principal (Home)
   ========================================================================== */
.home-container { padding: 130px 100px 200px 100px; box-sizing: border-box; width: 100%; }

.home-intro { text-align: center; margin-bottom: 150px; padding: 0; }
.home-intro h1 { font-family: 'Teodor', 'Times New Roman', Times, serif; font-size: 14px; font-weight: normal; line-height: 1.4; max-width: 850px; margin: 0 auto; color: #171717; letter-spacing: 0; display: block; }
.lang-intro-item { display: inline; margin-right: 8px; }
.lang-intro-item:last-child { margin-right: 0; }
.home-intro .lang-label { display: inline-block; font-family: 'Matter', sans-serif; font-size: 11px; opacity: 0.5; margin-right: 4px; vertical-align: baseline; }

/* ==========================================================================
   Grid del Portafolio (CSS Grid)
   ========================================================================== */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; align-items: start; grid-auto-flow: dense; }
.portfolio-item { width: 100%; position: relative; }

.layout-normal { grid-column: span 1; }
.layout-horizontal-izq-solo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; }
.layout-horizontal-izq-solo .item-wrapper { grid-column: 1 / span 2; max-width: 80%; }
.layout-horizontal-der-solo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; }
.layout-horizontal-der-solo .item-wrapper { grid-column: 2 / span 2; max-width: 80%; margin-left: 20%; }
.layout-horizontal-izq-flow { grid-column: span 2; max-width: 80%; }
.layout-horizontal-der-flow { grid-column: 2 / span 2; max-width: 80%; margin-left: 20%; }

.home-reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.home-reveal-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Elementos del Proyecto (Imágenes y Textos)
   ========================================================================== */
.portfolio-image-link { display: block; text-decoration: none; color: inherit; cursor: none; }
.item-wrapper {position: relative;}
.portfolio-meta-split { margin-top: 10px; display: flex; justify-content: space-between; align-items: flex-start !important; width: 100%; }
.meta-left { width: 70%; padding-right: 20px; box-sizing: border-box; }
.meta-right { width: 30%; display: flex; justify-content: flex-end; align-items: flex-start !important; box-sizing: border-box; }

.portfolio-title { margin: 4px 0 0 0 !important; line-height: 1.1 !important; display: block !important; }
.portfolio-title-link { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: normal; text-decoration: none; color: inherit; transition: opacity 0.3s ease; display: block !important; }
.portfolio-title-link:hover { opacity: 0.5; }

.portfolio-categories { margin-top: 4px; font-size: 12.5px; letter-spacing: 0.05em; display: flex; flex-wrap: wrap; gap: 3px 7px; }
.portfolio-category-link { text-decoration: none; color: inherit; opacity: 0.5; transition: opacity 0.3s ease; white-space: nowrap; }
.portfolio-category-link:hover { opacity: 1; }

.portfolio-image-link.disabled-link { cursor: none !important; }
.portfolio-title-link.disabled-link { cursor: default !important; opacity: 1 !important; color: inherit !important; text-decoration: none !important; }
.portfolio-title-link.disabled-link:hover { opacity: 1 !important; }
body:has(.portfolio-title-link.disabled-link:hover) #custom-cursor { display: none !important; }

.project-credits {
    margin-top: 50px; /* Separación con las categorías */
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   Títulos dinámicos en los Créditos (Usando la etiqueta U de subrayado)
   ========================================================================== */
.credits-content u {
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #171717;
    opacity: 0.5; /* Color grisáceo/atenuado original */
    text-decoration: none; /* MAGIA: Le quitamos la raya del subrayado */
    display: block; /* Lo convertimos en un bloque para que empuje el texto hacia abajo */
    margin-top: 16px; /* Da un poco de aire si pones varios bloques distintos */
    margin-bottom: -8px;
}

.credits-content u:first-child {
    margin-top: 0; /* Si es lo primero que pones, que no deje margen por arriba */
	margin-bottom: -12px;
}

.credits-content {
    font-family: 'Teodor', 'Times New Roman', Times, serif;
    font-size: 14px;
    line-height: 1.2;
	letter-spacing: 0;
    color: #171717;
}

/* Limpieza de márgenes para el editor WYSIWYG de WordPress */
.credits-content p {
    margin: 0 0 4px 0 !important;
}

.credits-content p:last-child {
    margin-bottom: 0 !important;
}

/* Estilo para enlaces dentro de los créditos (por si enlazas a otros perfiles) */
.credits-content a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.credits-content a:hover {
    opacity: 0.5;
}

/* ==========================================================================
   Blindaje del cursor en las categorías de la Home
   ========================================================================== */
/* 1. Ocultamos el cursor personalizado SOLO si tocamos exactamente los enlaces de las categorías */
body:has(.portfolio-category-link:hover) #custom-cursor {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. Forzamos a que el sistema use la manita normal para hacer clic en las categorías */
.portfolio-category-link {
    cursor: pointer !important;
}

/* ==========================================================================
   Paginación de Bolitas y Carousel
   ========================================================================== */
.pagination-window { max-width: 64px; overflow: hidden; white-space: nowrap; display: flex; align-items: center; height: 19px; }
.pagination-track { display: flex; gap: 6px; transition: transform 0.3s ease-out; align-items: center; }
.nav-dot { width: 8px; height: 8px; border: 1px solid #171717; border-radius: 50%; background-color: transparent; transition: background-color 0.3s ease; flex-shrink: 0; box-sizing: border-box; }
.nav-dot.active { background-color: #171717; }

.carousel-wrapper { position: relative; overflow: hidden; }
.carousel-img { width: 100%; height: auto; display: none; object-fit: cover; }
.carousel-img.active { display: block; }

.crop-mark { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; color: #171717; z-index: 10; }
.crop-mark::before, .crop-mark::after { content: ''; position: absolute; background-color: currentColor; }
.crop-mark.top-left { top: 0; left: 0; }
.crop-mark.top-left::before { width: 0.5px; height: 18px; bottom: 8px; left: 0; }
.crop-mark.top-left::after { width: 18px; height: 0.5px; right: 8px; top: 0; }
.crop-mark.top-right { top: 0; right: 0; }
.crop-mark.top-right::before { width: 0.5px; height: 18px; bottom: 8px; right: 0; }
.crop-mark.top-right::after { width: 18px; height: 0.5px; left: 8px; top: 0; }
.crop-mark.bottom-left { bottom: 0; left: 0; }
.crop-mark.bottom-left::before { width: 0.5px; height: 18px; top: 8px; left: 0; }
.crop-mark.bottom-left::after { width: 18px; height: 0.5px; right: 8px; bottom: 0; }
.crop-mark.bottom-right { bottom: 0; right: 0; }
.crop-mark.bottom-right::before { width: 0.5px; height: 18px; top: 8px; right: 0; }
.crop-mark.bottom-right::after { width: 18px; height: 0.5px; left: 8px; bottom: 0; }
.portfolio-item:hover .crop-mark { opacity: 1; }

/* ==========================================================================
   Página de Proyecto Individual (single.php)
   ========================================================================== */
.single-project-container { padding: 130px 50px 50px 50px; box-sizing: border-box; width: 100%; margin-top: 0; margin-bottom: 150px; }
.single-project-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px; align-items: start; }
.project-info { grid-column: span 2; position: sticky; top: 100px; max-width: 90%; }
.project-info .portfolio-title { margin-top: -3px; margin-bottom: 11px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: normal; }
.project-description { font-family: 'Teodor', 'Times New Roman', Times, serif; font-size: 14px; line-height: 1.2; margin-bottom: 21px; color: #171717; letter-spacing: 0; }
.lang-block { margin-bottom: -4px; }
.lang-label { font-family: 'Matter', Helvetica, Arial, sans-serif; color: #171717; opacity: 0.5; font-size: 11px; letter-spacing: 0.05em; margin-right: 26px; }

.project-gallery { grid-column: span 6; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.gallery-item { grid-column: span 3; min-width: 0; }
.gallery-item img, .gallery-item video { width: 100%; height: auto; display: block; object-fit: cover; }

.project-final-images { margin-top: 80px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; width: calc(100% + 100px); margin-left: -50px; }
.final-media-wrapper { width: 100%; height: 100%; min-width: 0; }
.final-media-wrapper img, .final-media-wrapper video { width: 100%; height: 100%; display: block; object-fit: cover; }

.related-projects-section { margin-top: 180px; width: 100%; }
.related-title { font-family: 'Teodor', 'Times New Roman', Times, serif; text-align: center; font-size: 14px; letter-spacing: 0; margin-bottom: 80px; }
/* ==========================================================================
   Centrado dinámico de Related Projects (1, 2 o 3 items)
   ========================================================================== */
.related-grid { 
    display: flex; 
    justify-content: center; 
    /* La fórmula suma el gap de 80px + el espacio invisible que deja el 70% */
    gap: calc(80px + ((100% - 160px) / 3) * 0.3); 
    align-items: flex-start; 
    flex-wrap: wrap; 
}
.related-grid .portfolio-item { 
    flex: 0 0 auto;
    /* Calcula el 70% exacto de lo que mediría 1 columna en un grid de 3 */
    width: calc(((100% - 160px) / 3) * 0.7) !important; 
    margin: 0 !important; 
}
.related-grid .portfolio-image-link { cursor: none; }
.related-grid .meta-right { width: 30%; display: flex; justify-content: flex-end; }

/* ==========================================================================
   Vídeo oEmbed (YouTube / Vimeo) a Single Project
   ========================================================================== 
.gallery-item.span-6 {
    grid-column: span 6;
}

.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    background-color: #171717; 
}

.video-responsive-wrapper iframe,
.video-responsive-wrapper object,
.video-responsive-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
*/

/* ==========================================================================
   Reproductor de Vídeo Custom (Estil Marta Caro)
   ========================================================================== */
.gallery-item.span-6 {
    grid-column: span 6; /* Ocupa tota l'amplada (2 fotos de llarg) */
}

/* Contenidor del reproductor */
.mc-video-container {
    position: relative;
    width: 100%;
    background: #171717;
    cursor: pointer;
    /* MÁGIA: Ho canviem a block perquè Safari no embogeixi amb els SVG */
    display: block; 
    overflow: hidden;
    line-height: 0; /* Evita espais fantasma a sota del vídeo */
}

.mc-video {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

/* Llum subtil al vídeo quan està pausat */
.mc-video-container.is-paused .mc-video {
    opacity: 0.85; 
}

/* Botó central Play/Pause */
.mc-play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    color: #F6F5F4;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Deixa que els clics passin cap al contenidor */
}

.mc-video-container.is-paused .mc-play-pause-btn,
.mc-video-container:hover .mc-play-pause-btn {
    opacity: 1;
}

/* Blindatge de la mida dels icones Play/Pause */
.mc-play-icon, .mc-pause-icon {
    width: 40px !important;
    height: 40px !important;
    display: block;
}

/* Barra inferior de controls */
.mc-bottom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.mc-video-container:hover .mc-bottom-controls,
.mc-video-container.is-paused .mc-bottom-controls {
    opacity: 1;
}

/* ==========================================================================
   TIPOGRAFÍA Y CONTROLES DEL REPRODUCTOR
   ========================================================================== */
/* Tipografía Matter, mayúsculas y tracking al 0.15em */
.mc-time {
    color: #F6F5F4;
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    user-select: none;
}

/* Icono de Fullscreen más blanco */
.mc-fullscreen {
    width: 14px;
    height: 14px;
    color: #F6F5F4;
    cursor: pointer;
    opacity: 0.95; /* Antes estaba al 0.7, ahora brilla más */
    transition: opacity 0.3s ease;
}

.mc-fullscreen:hover {
    opacity: 1;
}

/* Barra de progreso (con área de clic ampliada para facilitar el arrastre) */
.mc-progress-bar {
    flex-grow: 1;
    height: 20px; /* Caja grande invisible para facilitar el hover y clic */
    position: relative;
    cursor: pointer;
}

/* La línea visual de fondo */
.mc-progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: rgba(246, 245, 244, 0.3);
    transform: translateY(-50%);
}

/* La línea blanca de relleno */
.mc-progress-filled {
    position: absolute;
    top: 50%;
    left: 0;
    height: 1.5px;
    background: #F6F5F4;
    width: 0%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* La bolita que se arrastra */
.mc-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 10px;
    height: 10px;
    background: #F6F5F4;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0); /* Oculta por defecto */
    transition: transform 0.2s ease; /* Suave solo al escalar, no al moverse */
    pointer-events: none;
}

/* Tooltip con el timecode flotante */
.mc-progress-tooltip {
    position: absolute;
    bottom: 15px; 
    left: 50%;
    transform: translateX(-50%);
    background: transparent; 
    color: #F6F5F4; 
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    padding: 5px 0; 
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    pointer-events: none;
}

/* Mostrar la bolita y el texto al pasar el ratón o arrastrar */
.mc-progress-bar:hover .mc-progress-handle,
.mc-progress-bar.is-dragging .mc-progress-handle {
    transform: translate(-50%, -50%) scale(1);
}

.mc-progress-bar:hover .mc-progress-tooltip,
.mc-progress-bar.is-dragging .mc-progress-tooltip {
    opacity: 1;
}

/* ==========================================================================
   LAYOUT DE CATEGORÍAS (Grid Dinámico + Tetris Continuo)
   ========================================================================== */
.category-grid-archive {
    display: grid;
    /* En pantallas muy grandes arranca con 10 columnas. Abajo en los Media Queries lo iremos bajando */
    grid-template-columns: repeat(10, 1fr);
    column-gap: 20px; /* Separación horizontal */
    row-gap: 100px; /* Separación vertical entre proyectos que saltan de línea */
    align-items: stretch;
    overflow-x: clip; /* MAGIA: "clip" corta lo que sobresale a los lados SIN crear un scroll vertical interior */
}

.category-project-block {
    display: contents; /* MAGIA: El proyecto desaparece como caja y sus piezas se acoplan hueco a hueco */
}

/* Aplicamos estilos base a los hijos directos (Portada y Fotos sueltas) */
.category-project-block > * {
    position: relative;
    padding-top: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}


/* LÍNEA SUPERIOR CONTINUA MEDIANTE PSEUDO-ELEMENTOS */
.category-project-block > *::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* La línea se alarga 20px hacia la derecha para cruzar el vacío (gap) del Grid y tocar a su vecino */
    width: calc(100% + 20px);
    height: 1px;
    background-color: #171717;
}

/* EL CORTE MAGISTRAL AL FINAL DEL PROYECTO */
.category-project-block > *:last-child::after {
    /* Al llegar a la última foto del proyecto, no cruza el gap, creando separación entre proyectos */
    width: 100%; 
}

/* Animación cuando aparecen al hacer scroll */
.category-project-block > *.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Portada de Texto */
.project-text-cover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 0px !important; 
    height: 100% !important; 
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    box-sizing: border-box; /* CRUCIAL: Evita que el padding sumi alçada i sobresurti */
}

/* Caixa de categories ultra-blindada */
.cat-cover-categories {
    display: flex;
    flex-direction: column; 
    justify-content: flex-end;
    gap: 0px;
    text-transform: none !important; 
    margin: 0 !important; 
	margin-bottom: -0.2em; /* Ajust òptic per compensar l'interlineat i igualar la base de la lletra a la foto */
}

/* Matem sense pietat tots els salts de línia del PHP */
.cat-cover-categories br {
    display: none !important;
}

/* Els enllaços individuals */
.individual-cat-link {
    color: #171717 !important;
    opacity: 1 !important;
    text-decoration: none;
    transition: opacity 0.3s ease;
    white-space: nowrap !important;
    display: block !important; 
    width: fit-content;
    line-height: 1.1 !important; /* Línia més ajustada per no empènyer cap a baix */
}

/* Ajustem només l'última categoria perquè la lletra toqui la línia base */
.individual-cat-link:last-child {
    margin-bottom: -0.1em; 
}

/* Base Colores 100% y Transiciones */
.cat-title-link,
.cat-cover-title {
    color: #171717 !important;
    opacity: 1 !important;
    text-decoration: none;
    transition: opacity 0.3s ease;
    word-break: break-word; /* Si el título es muy largo, permite que se ajuste en columnas estrechas */
}

.individual-cat-link {
    color: #171717 !important;
    opacity: 1 !important;
    text-decoration: none;
    transition: opacity 0.3s ease;
    white-space: nowrap; 
    display: block; 
    width: fit-content;
}

/* Status y Cajas */
.cat-status {
    display: block;
    text-transform: none !important;
    opacity: 0.5;
    color: #171717;
    margin: auto 0;
    text-decoration: none;
}

.cat-cover-categories br:last-child {
    display: none !important;
}

/* HOVERS E INTERACTIVIDAD */
.cat-title-link:hover {
    opacity: 0.5 !important;
    cursor: pointer;
}

.individual-cat-link:hover {
    opacity: 0.5 !important;
    cursor: pointer;
}

/* Imágenes Categoría (Base) */
.category-project-block a.overview-item {
    cursor: pointer;
}

.category-project-block a.overview-item img,
.category-project-block a.overview-item video {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

/* Si es clicable: Hover al 50% en Imágenes */
.category-project-block a.overview-item:not(.disabled-overview-item):hover img,
.category-project-block a.overview-item:not(.disabled-overview-item):hover video {
    opacity: 0.5 !important;
}

/* Asegurar que el Coming Soon no cambie la opacidad de la imagen al hacer hover */
.is-category-page .disabled-overview-item:hover img,
.is-category-page .disabled-overview-item:hover video {
    opacity: 1 !important; 
}


/* ==========================================================================
   ESTILS PROJECTES "COMING SOON" (Desactivats)
   ========================================================================== */
/* IMPORTANT: No posem pointer-events: none; així el ratolí el detecta i activa l'atenuat general! */
.category-project-block > .disabled-overview-item {
    cursor: default !important; /* Visualment indica que no s'hi pot fer clic */
}

/* ==========================================================================
   Control de Cursores en Categorías (MUERTE AL CURSOR VIEW)
   ========================================================================== */
.is-category-page #custom-cursor,
body:has(.is-category-page) #custom-cursor {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.is-category-page {
    cursor: auto !important;
}

.is-category-page .cat-title-link,
.is-category-page .individual-cat-link,
.is-category-page a.overview-item,
.is-category-page a.overview-item img,
.is-category-page a.overview-item video {
    cursor: pointer !important;
}

/* AÑADIMOS 'a.' PARA QUE GANE EN JERARQUÍA Y MATE LA MANITA EN LAS FOTOS */
.is-category-page .cat-cover-title,
.is-category-page a.disabled-overview-item,
.is-category-page a.disabled-overview-item img,
.is-category-page a.disabled-overview-item video,
.is-category-page .disabled-overview-item .overview-acronym {
    cursor: default !important;
}


/* ==========================================================================
   Efecto Hover Global en Grid Categorías (Foco de proyecto)
   ========================================================================== */
@media (hover: hover) {
    /* 1. Quan hi ha hover al grid, TOT s'atenua al 25% (inclosos els Coming Soon d'altres llocs) */
    .category-grid-archive.is-hovering .category-project-block > *.is-revealed {
        opacity: 0.10 !important;
        transition: opacity 0.3s ease;
    }

    /* 2. El projecte que estem tocant (actiu) recupera el 100% de llum */
    .category-grid-archive.is-hovering .category-project-block.active-project > *.is-revealed {
        opacity: 1 !important;
    }
    
    /* 3. La línia i els números del "Coming Soon" actiu també recuperen el 100% de negre */
    .category-grid-archive.is-hovering .category-project-block.active-project > .disabled-overview-item::after {
        background-color: rgba(23, 23, 23, 1);
    }
    
    .category-grid-archive.is-hovering .category-project-block.active-project .disabled-overview-item .overview-acronym {
        opacity: 1;
    }
}


/* ==========================================================================
   Página Overview (Masonry Grid & Animaciones)
   ========================================================================== */
.overview-container { padding: 160px 50px 200px 50px; box-sizing: border-box; width: 100%; }
.overview-masonry { display: grid; grid-template-columns: repeat(6, 1fr); gap: 100px 20px; align-items: start; }
.overview-item { display: block; position: relative; cursor: none !important; text-decoration: none !important; opacity: 0; transform: translateY(10px); transition: opacity 0.8s ease, transform 0.8s ease; }
.overview-item.is-revealed { opacity: 1; transform: translateY(0); }
.overview-masonry.is-hovering .overview-item { transition: opacity 0.3s ease; opacity: 0.10; }
.overview-masonry.is-hovering .overview-item.active-project { opacity: 1; }
.overview-item img, .overview-item video { width: 100%; height: auto; display: block; }
.overview-acronym { font-family: 'Matter', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: normal; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; color: #171717; display: block; text-decoration: none !important; white-space: pre-wrap; }

/* ==========================================================================
   Capa de About (Overlay / Papel de calcar)
   ========================================================================== */
.about-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(246, 245, 244, 0.88); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
    z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; 
    overflow-y: auto; display: block; padding: 0 100px; box-sizing: border-box;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23171717' stroke-width='1.5'><path d='M2 2L18 18M18 2L2 18'/></svg>") 7 7, pointer;
}

body.about-open .about-overlay { opacity: 1; pointer-events: auto; }
body.about-open { overflow: hidden; }
body.about-open .site-header { background-color: transparent !important; cursor: auto; }

.about-inner { 
    width: 100%; max-width: 900px; margin: 0 auto; position: relative; z-index: 2; 
    padding-top: 150px; padding-bottom: 100px; min-height: 100vh; box-sizing: border-box;
    cursor: auto; 
}

.about-row { display: flex; align-items: flex-start; margin-bottom: 70px; }
.about-label { width: 20%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding-right: 40px; margin-top: 3px; box-sizing: border-box; }
.about-content-text { width: 70%; font-family: 'Teodor', 'Times New Roman', serif; font-size: 14px; line-height: 1.2; letter-spacing: 0; }

body.about-open .menu-item-all-works, body.about-open .menu-item-overview { opacity: 0.15; filter: blur(1px); pointer-events: none; transition: opacity 0.4s ease, filter 0.4s ease; }
body.about-open .menu-item-about { pointer-events: none; }

.about-close-icon {
    display: none; 
    cursor: pointer; 
    align-items: center; 
    justify-content: center;
    padding: 5px; 
    position: absolute; 
    right: 50px; 
    left: auto;
    transform: none;
}
.about-close-icon svg { width: 14px; height: 14px; }
.about-close-icon:hover { opacity: 0.5; }
body.about-open .about-close-icon { display: flex; }

.marker-bg {
    display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
    background-color: #171717; color: #F6F5F4 !important; padding: 2px 3px; line-height: 1.3;
}
.keep-together { white-space: nowrap; }
.about-content-text p { display: block !important; margin-top: 0; margin-bottom: 16px; background-color: transparent !important; padding: 0 !important; }
.abstract-text p {margin-bottom: 1px;}
.about-service-link { text-decoration: none; display: inline; margin-right: 6px; padding: 0px 2px 1.5px 2px; transition: opacity 0.3s ease; white-space: nowrap; }
.about-service-link.marker-bg { color: #F6F5F4 !important; }
.about-service-link:hover { opacity: 0.5; }
.abstract-text p:not(:first-child) { text-indent: 30px; }
.talks-columns { column-count: 2; column-gap: 40px; }
.talks-columns p { break-inside: avoid; page-break-inside: avoid; }
.about-content-text a { color: inherit !important; text-decoration: none !important; transition: opacity 0.3s ease; }
.about-content-text a:hover { opacity: 0.5; }

/* ==========================================================================
   Crèdits centrats de l'About
   ========================================================================== */
.about-credits-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 100px; /* Li donem més aire per separar-ho de la resta */
    margin-bottom: 20px;
    width: 100%;
}

.about-credits-row .about-label {
    width: 100%;
    padding-right: 0;
    margin-bottom: 15px;
    text-align: center;
}

.about-credits-row .about-content-text {
    width: 100%;
    text-align: center;
}



/* ==========================================================================
   Cursor Personalizado General ( View text )
   ========================================================================== */
#custom-cursor {
    position: fixed; top: 0; left: 0; pointer-events: none; display: none; z-index: 9999; 
    font-family: 'Matter', Helvetica, Arial, sans-serif; font-size: 12.5px; letter-spacing: 0.05em; 
    text-transform: uppercase; color: white; mix-blend-mode: difference; transform: translate(-50%, -50%);
    padding: 5px 10px; white-space: nowrap; 
}
body:has(.overview-item:hover) #custom-cursor,
body:has(.portfolio-image-link:hover) #custom-cursor { 
    display: block !important; 
    opacity: 1 !important; 
}

/* ==========================================================================
   Footer (Interacción Global)
   ========================================================================== */
.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    padding: 0px 50px 40px 50px; 
    align-items: end; 
    color: #171717;
    width: 100%;
    box-sizing: border-box;
}

.footer-left, .footer-center, .footer-link { opacity: 0.5; transition: opacity 0.3s ease, color 0.3s ease; }
.footer-link:hover  { opacity: 1; }
.footer-left { font-family: 'Matter', Helvetica, Arial, sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; cursor: default; }
.footer-center { font-family: 'Matter', Helvetica, Arial, sans-serif; font-size: 12.5px; letter-spacing: 0.05em; text-align: center; cursor: default; }
.footer-right { display: flex; justify-content: flex-end; gap: 40px; letter-spacing: 0; }
.footer-link { font-family: 'Teodor', 'Times New Roman', Times, serif; font-size: 14px; font-weight: normal; text-decoration: none; color: inherit; }

.footer-center span { display: inline-block; position: relative; }
.site-footer:hover .footer-center span { color: transparent; }
.site-footer:hover .footer-center span::after { content: "; )"; position: absolute; left: 0; top: 0; width: 100%; color: #171717; text-align: center; white-space: nowrap; }

.clock-blink { animation: blink-animation 1s step-start infinite; }
@keyframes blink-animation { 50% { opacity: 0; } }

/* 1. Aislar la palabra y aplicar el cursor SVG */
.bcn-trigger {
    display: inline-block; /* Ayuda a que el área de hover sea perfecta */
    /* Los números '16 16' centran la punta del ratón exactamente en el centro de tu icono de 32px */
    cursor: url('./img/sagrada.svg') 25 25, pointer; 
}

/* 2. Si el ratón está sobre la palabra Barcelona, ocultamos el círculo negro de ( VIEW ) */
body:has(.bcn-trigger:hover) #custom-cursor {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ==========================================================================
   EASTER EGG: MODO POP-UP (Inactividad del usuario)
   ========================================================================== */
.easter-egg-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    text-align: center;
    width: 40vw;
    padding: 0px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.easter-egg-popup .crop-mark {
    opacity: 1;
}

/* El GIF del easter egg */
.easter-egg-popup img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    mix-blend-mode: multiply; /* Hace que el fondo del GIF se funda con la web */
}

/* El texto de contacto (Efecto rotulador negro) */
.easter-egg-text {
    margin: 0;
    text-align: center;
}

.easter-egg-text a {
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    background-color: #171717;
    color: #F6F5F4 !important;
    display: inline;
    padding: 2px 6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    
    transition: opacity 0.3s ease;
}

.easter-egg-text a span {
    border-bottom: 1px solid #F6F5F4; /* Subratllat del "now" passa a ser blanc */
}

.easter-egg-text a:hover {
    opacity: 0.6; /* Un hover suau */
}

/* Cuando la web se duerme: Aparece el pop-up */
body.is-sleeping .easter-egg-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Cuando la web se duerme: Ocultamos el cursor custom para que no estorbe */
body.is-sleeping #custom-cursor {
    display: none !important;
}

/* Cuando la web se duerme: Desenfocamos todo lo demás suavemente */
body.is-sleeping main, 
body.is-sleeping .site-header, 
body.is-sleeping .site-footer {
    filter: blur(4px);
    opacity: 0.4;
    pointer-events: none;
}

/* ¡CORRECCIÓN! Solo desenfocamos el About si el usuario lo tenía abierto */
body.is-sleeping.about-open .about-overlay {
    filter: blur(4px);
    opacity: 0.4;
    pointer-events: none;
}

/* Transición suave para cuando vuelve a la normalidad */
main, .site-header, .site-footer, .about-overlay {
    transition: filter 0.6s ease, opacity 0.6s ease;
}

/* ==========================================================================
   PÁGINA 404 (Easter Egg Lluvia de Proyectos)
   ========================================================================== */
/* Bloqueamos el scroll general solo en la página 404 para que no salgan barras raras */
body.error404 {
    overflow: hidden;
}

/* Elevamos el footer para que su texto quede por encima de las fotos acumuladas */
body.error404 .site-footer {
    position: relative;
    z-index: 10;
}

.error-404-container {
    width: 100vw;
    flex-grow: 1; /* Sustituye al height: 100vh para convivir perfectamente con el flex del body */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible; /* ¡MAGIA! Ahora las fotos pueden invadir el espacio del footer */
    background-color: #F6F5F4;
    cursor: pointer;
    z-index: 1;
}

.error-404-content {
    position: relative;
    z-index: 10; /* El texto siempre por encima de las fotos */
    text-align: center;
    pointer-events: none; /* Deja que el clic traspase el div para crear fotos */
}

.error-back-home {
    font-family: 'Matter', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #171717;
    text-decoration: none;
    pointer-events: auto; /* Reactiva el clic solo para el enlace */
    transition: opacity 0.3s ease;
	display: inline-block;
    white-space: nowrap;
}

.error-back-home:hover {
    opacity: 0.5;
}

/* Las imágenes que caen */
.falling-project-img {
    position: absolute;
    width: 180px; /* Tamaño tipo overview */
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none; /* No se pueden clicar una vez creadas */
    z-index: 2; /* Por debajo del texto pero por encima del fondo */    
    animation: dropPhysics 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes dropPhysics {
    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(calc(var(--rot) / 2));
    }
    100% {
        /* Caen hasta desaparecer por debajo de la pantalla */
        transform: translate(-50%, calc(100vh + 300px)) scale(1) rotate(var(--rot));
        opacity: 0;
    }
}

/* ==========================================================================
   MEDIA QUERIES - ESCALONAMIENTO DINÁMICO DEL GRID DE CATEGORÍAS
   ========================================================================== */
.view-link-mobile { display: none; }
.tot-mob {display: none;}

/* Escalón 0: Pantallas gigantes / iMacs (Subimos a 4 columnas) */
@media (min-width: 2000px) {
    .portfolio-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
	
	/* 2. Overview a 8 columnas */
    .overview-masonry {
        grid-template-columns: repeat(8, 1fr);
    }

    /* Adaptamos el esqueleto interno de los horizontales solitarios a 4 columnas */
    .layout-horizontal-izq-solo,
    .layout-horizontal-der-solo {
        grid-template-columns: repeat(4, 1fr);
    }

    /* El izquierdo ya coge la columna 1 y 2 por defecto.
       Al derecho le decimos que ocupe la 3 y 4 para pegarse a la derecha. */
    .layout-horizontal-der-solo .item-wrapper {
        grid-column: 3 / span 2;
    }
}

/* Escalón 1: Portátiles / Pantallas medianas (bajamos a 8 columnas) */
@media (max-width: 1400px) {
    .category-grid-archive { grid-template-columns: repeat(8, 1fr); }
    /* Overview pasa de 6 a 5 imágenes */
    .overview-masonry { grid-template-columns: repeat(5, 1fr); }
}

/* Escalón 2: Tablets horizontales (bajamos a 6 columnas) */
@media (max-width: 1100px) {
    .category-grid-archive { grid-template-columns: repeat(6, 1fr); }
	/* Overview pasa de 5 a 4 imágenes */
    .overview-masonry { grid-template-columns: repeat(4, 1fr); }
	
	/* Home: pasa de 3 a 2 proyectos por fila */
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Protegemos los proyectos horizontales para que no desborden el grid de 2 columnas */
    .layout-horizontal-der-flow { 
        grid-column: span 2; 
        margin-left: 0; 
        max-width: 100%;
    }
    .layout-horizontal-izq-flow { 
        grid-column: span 2; 
        max-width: 100%; 
    }
}


@media (max-width: 768px) {
    body { overflow-x: hidden; }

    /* Layout Categorías en Móvil */
    .category-grid-archive { 
        display: flex; 
        flex-direction: column;
        gap: 60px; /* Volvemos al margen vertical gigante de móvil */
        margin: 0; 
        width: 100%; 
    }
    
    .category-project-block {
        display: grid !important; /* En móvil APAGAMOS el efecto Tetris continuo */
        grid-template-columns: repeat(3, 1fr); /* Texto + 2 fotos como antes */
        width: 100% !important;
        grid-column: span 12 !important; 
        padding-left: 0; 
        padding-right: 0;
        margin-top: 0;
        gap: 12px; 
        padding-top: 10px;
        border-top: 1px solid #171717; /* Devolvemos el borde a la caja padre */
        align-items: stretch; /* OBLIGATORIO para que el "Coming Soon" vuelva a centrarse */
    }

    .category-project-block > * {
        padding-top: 0;
    }
    
    /* Matamos por completo las dobles líneas del Tetris en móvil */
    .category-project-block > *::after {
        display: none !important; 
    }
    
    /* Ocultamos de la 3ª imagen en adelante */
    .category-project-block a:nth-child(n+4) { display: none !important; }
	
    .project-text-cover {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 0px; 
		font-family: 'Matter', Helvetica, Arial, sans-serif;
		font-size: 11px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		transition: opacity 0.3s ease;
	}
    
    .cat-status { 
        font-size: 10.5px; 
        margin: auto 0; /* Centra verticalmente el Coming Soon al milímetro */
    }
    
    /* 1. Forzamos que el texto nunca salte de línea */
    .category-project-block .overview-acronym { font-size: 10px; margin-bottom: 6px; white-space: nowrap !important; }

    /* 2. Mostramos el total de móvil (2) y matamos el de escritorio */
    .tot-desk { display: none !important; }
    .tot-mob { display: inline !important; }

    .header-container { padding-top: 25px; padding-left: 20px; padding-right: 20px; flex-direction: row; justify-content: space-between; align-items: center; gap: 0; }
    .home-intro { margin-bottom: 100px; }
    
    .site-branding, .main-navigation { flex: none; }
    .header-spacer { display: none; }
    .menu-item-overview { display: none !important; }
    .static-menu { gap: 20px; }

    .home-container, .single-project-container { padding-top: 120px; padding-left: 20px; padding-right: 20px; padding-bottom: 75px; width: 100%; box-sizing: border-box; margin-bottom: 0; }
    .crop-mark { display: none !important; }

    .portfolio-grid { grid-template-columns: 1fr; gap: 60px; }
    .portfolio-item, .portfolio-item.layout-normal, .portfolio-item.layout-horizontal-izq-solo,
    .portfolio-item.layout-horizontal-der-solo, .portfolio-item.layout-horizontal-izq-flow,
    .portfolio-item.layout-horizontal-der-flow {
        grid-column: 1 / -1 !important; display: block !important; margin-left: 0 !important;
        max-width: 100% !important; width: 100% !important;
    }
    .layout-horizontal-izq-solo .item-wrapper, .layout-horizontal-der-solo .item-wrapper { grid-column: 1 / -1 !important; max-width: 100% !important; margin-left: 0 !important; }

    .carousel-wrapper { width: 100%; overflow: hidden; }
    .carousel-images {
        display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; 
    }
    .carousel-images::-webkit-scrollbar { display: none; }
    .carousel-img { display: block !important; flex: 0 0 100%; scroll-snap-align: start; width: 100%; height: auto; object-fit: cover; }

    .meta-left { width: auto; flex: 1 1 auto; padding-right: 15px; }
    .meta-right { width: auto; flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center !important; gap: 12px; }

    .view-link-mobile { display: inline-block; margin-right: 0; text-decoration: underline; font-size: 12.5px; color: inherit; white-space: nowrap; }
    .view-link-mobile.disabled-link { text-decoration: none; opacity: 0.5; cursor: default; }

    .single-project-grid { display: flex; flex-direction: column; }
    .project-info { position: relative; top: 0; max-width: 100%; width: 100%; text-align: center; margin-bottom: 40px; }
    .project-info .portfolio-title { text-align: center; margin-bottom: 25px; }
    .project-description { text-align: center; }
    .lang-block { margin-bottom: 20px; }
    .lang-label { display: inline-block; margin-right: 15px; }
    .project-info .portfolio-categories { justify-content: center; margin-top: 30px; margin-bottom: 10px; }

    .project-gallery { display: flex; flex-direction: column; gap: 20px; }
    .gallery-item { width: 100%; }
    
    .project-final-images { grid-template-columns: 1fr; width: 100%; margin-left: 0; gap: 20px; margin-top: 20px; }
    .related-projects-section { margin-top: 100px; width: 100%; margin-left: 0; padding: 0; }
    .related-grid { display: flex; flex-direction: column; gap: 60px; padding: 0 40px; }
    .related-grid .portfolio-item { width: 100% !important; margin: 0 !important; }
    .related-grid .portfolio-image-link { margin: 0; display: block; }
	
    .project-credits { 
        margin-top: 30px; 
    }
    
    .overview-container { padding: 70px 20px 0 20px; }
    .overview-masonry { grid-template-columns: repeat(2, 1fr); gap: 50px 15px; }
    .overview-masonry .overview-item { margin-bottom: 15px; }
	
	.site-branding, .main-navigation { flex: none; }
    .header-spacer { display: none; }
    .menu-item-all-works,
    .menu-item-overview { display: none !important; }
    .static-menu { gap: 20px; }

    body.about-open .about-close-icon { 
        right: auto; 
        left: 50%; 
        top: auto; 
        bottom: -3px; 
        transform: translateX(-50%); 
        z-index: 1010; 
    }
    body.about-open .main-navigation { padding-right: 0 !important; }
    body.about-open .about-overlay::before, body.about-open .about-overlay::after { display: none !important; }
    .about-overlay { padding: 0 20px !important; display: block !important; }
    .about-inner { padding-top: 150px; padding-bottom: 50px; margin: 0 auto !important; }
    .about-row { flex-direction: column; margin-bottom: 40px; }
    .about-label { width: 100%; margin-bottom: 15px; }
    .about-content-text { width: 100%; }
	.talks-columns {column-count: 1;}
	
    .site-footer { grid-template-columns: 1fr; gap: 25px; padding: 60px 20px 40px 20px; text-align: center; }
    .footer-left { text-align: center; }
    .footer-right { justify-content: center; flex-direction: row; gap: 50px; flex-wrap: wrap; }
}