@font-face {
    font-family: 'Helvetica Now Var';
    src: url('/fonts/HelveticaNowVar.woff2') format('woff2-variations');
    font-weight: 50 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Var';
    src: url('/fonts/HelveticaNowVarItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Helvetica Neue';
    src: url('/fonts/HelveticaNeueBoldCondensed.eot');
    src: local('Helvetica Neue Condensed Bold'), local('HelveticaNeueBoldCondensed'),
        url('/fonts/HelveticaNeueBoldCondensed.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueBoldCondensed.woff2') format('woff2'),
        url('/fonts/HelveticaNeueBoldCondensed.woff') format('woff'),
        url('/fonts/HelveticaNeueBoldCondensed.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('/fonts/HelveticaNeueBlackCondensed.eot');
    src: local('Helvetica Neue Condensed Black'), local('HelveticaNeueBlackCondensed'),
        url('/fonts/HelveticaNeueBlackCondensed.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueBlackCondensed.woff2') format('woff2'),
        url('/fonts/HelveticaNeueBlackCondensed.woff') format('woff'),
        url('/fonts/HelveticaNeueBlackCondensed.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Bold.eot');
    src: local('HelveticaNeueCyr-Bold'),
        url('/fonts/HelveticaNeueCyr-Bold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Bold.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Bold.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Light.eot');
    src: local('HelveticaNeueCyr-Light'),
        url('/fonts/HelveticaNeueCyr-Light.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Light.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Light.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Medium.eot');
    src: local('HelveticaNeueCyr-Medium'),
        url('/fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Medium.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Medium.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-MediumItalic.eot');
    src: local('HelveticaNeueCyr-MediumItalic'),
        url('/fonts/HelveticaNeueCyr-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-MediumItalic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-MediumItalic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-LightItalic.eot');
    src: local('HelveticaNeueCyr-LightItalic'),
        url('/fonts/HelveticaNeueCyr-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-LightItalic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-LightItalic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-HeavyItalic.eot');
    src: local('HelveticaNeueCyr-HeavyItalic'),
        url('/fonts/HelveticaNeueCyr-HeavyItalic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-HeavyItalic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-HeavyItalic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-HeavyItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Black.eot');
    src: local('HelveticaNeueCyr-Black'),
        url('/fonts/HelveticaNeueCyr-Black.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Black.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Black.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Heavy.eot');
    src: local('HelveticaNeueCyr-Heavy'),
        url('/fonts/HelveticaNeueCyr-Heavy.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Heavy.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Heavy.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Italic.eot');
    src: local('HelveticaNeueCyr-Italic'),
        url('/fonts/HelveticaNeueCyr-Italic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Italic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Italic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Roman.eot');
    src: local('HelveticaNeueCyr-Roman'),
        url('/fonts/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Roman.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Roman.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-BlackItalic.eot');
    src: local('HelveticaNeueCyr-BlackItalic'),
        url('/fonts/HelveticaNeueCyr-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-BlackItalic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-BlackItalic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-UltraLightItalic.eot');
    src: local('HelveticaNeueCyr-UltraLightItalic'),
        url('/fonts/HelveticaNeueCyr-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-UltraLightItalic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-UltraLightItalic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-UltraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-BoldItalic.eot');
    src: local('HelveticaNeueCyr-BoldItalic'),
        url('/fonts/HelveticaNeueCyr-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-BoldItalic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-BoldItalic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-ThinItalic.eot');
    src: local('HelveticaNeueCyr-ThinItalic'),
        url('/fonts/HelveticaNeueCyr-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-ThinItalic.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-ThinItalic.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-UltraLight.eot');
    src: local('HelveticaNeueCyr-UltraLight'),
        url('/fonts/HelveticaNeueCyr-UltraLight.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-UltraLight.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-UltraLight.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-UltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('/fonts/HelveticaNeueCyr-Thin.eot');
    src: local('HelveticaNeueCyr-Thin'),
        url('/fonts/HelveticaNeueCyr-Thin.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HelveticaNeueCyr-Thin.woff2') format('woff2'),
        url('/fonts/HelveticaNeueCyr-Thin.woff') format('woff'),
        url('/fonts/HelveticaNeueCyr-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Oculta en Firefox */
    /* Fondo del lienzo raíz: rellena el notch / zona segura y el overscroll en
       iOS. Sin esto, el header translúcido dejaba ver el blanco del <html>. */
    background: #0a0a0a;
    transition: background-color 0.45s ease;
    /* Sin scroll horizontal, pero SIN forzar contenedor de scroll (que rompía el
       scroll vertical en iOS): usamos overscroll-behavior, no overflow-x:hidden. */
    overscroll-behavior-x: none;
}

::-webkit-scrollbar {
    display: none;
    /* Oculta en Chrome/Safari/Edge */
}

body {
    font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
    /*background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);*/
    background: #0a0a0a;
    color: #ffffff;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    min-height: 100vh;
    cursor: none;
}

html,
body,
a,
button,
.project-card {
    cursor: none !important;
    /* ocultar cursor nativo */
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    z-index: 99999999;
    transition: transform 0.15s ease-out, width 0.15s ease-out, height 0.15s ease-out;
    /* Cristal tipo header pero más transparente y con menos desenfoque */
    border-radius: 50%;
    background: rgb(20 19 19 / 22%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.light .custom-cursor { background: rgba(242, 241, 236, 0.22); }
/* En móvil / dispositivos táctiles no hay cursor personalizado: se oculta. */
@media (max-width: 768px), (hover: none) {
    .custom-cursor { display: none !important; }
}

.custom-cursor img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Hover sobre elementos interactivos */
.custom-cursor.hover {
    transform: translate(-50%, -50%) scale(0.2);
}

/* Click */
.custom-cursor.click {
    transform: translate(-50%, -50%) scale(0.3);
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Por encima de los overlays About/Contact (9999/10000): el header de la
       landing se mantiene fijo y visible; solo cambia el logo por el nombre. */
    z-index: 10001;
    padding: 20px 30px;
    /* Respeta el notch / safe-areas: el fondo llega hasta arriba y el contenido no se oculta */
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-left: calc(30px + env(safe-area-inset-left));
    padding-right: calc(30px + env(safe-area-inset-right));
    background: rgb(20 19 19 / 60%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);   /* iOS necesita el prefijo */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    position: relative;
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    width: 70px;
    /* Ajusta tamaño */
    cursor: pointer;
    transition: opacity 0.5s ease, transform 0.5s ease;
    color: #ffffff;
    /* Aísla el SVG en su propia capa GPU: evita el glitch de re-rasterizado
       (bloques verdes) al mover el header sobre el backdrop-filter en iOS. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.logo svg:hover {
    transform: scale(1.1);
    /* Efecto hover */
}

/* Nombre que sustituye al logo (crossfade) al abrir About/Contact */
.logo-name {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(calc(-50% + 10px));
    white-space: nowrap;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Estado "overlay abierto": el logo sale hacia arriba y entra el nombre */
.header.show-name .logo img {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    pointer-events: none;
}
.header.show-name .logo-name {
    opacity: 1;
    transform: translateY(-50%);
}

.light .logo-name { color: #14100f; }

.nav-links {
    display: block;
}

.nav-links a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 400;
    margin-left: 15px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    opacity: 1;
    color: #ffffff;
}


.my-title {
    width: 100%;
    height: 25vh;
    display: flex;
    justify-content: left;
    align-items: center;
    background: #0a0a0a;
    color: #fff;
    text-align: left;
    margin-top: 11rem;
}

.my-title h1 {
    font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
    font-size: clamp(3rem, 10vw, 13rem);
    /* responsive */
    font-weight: 400;
    letter-spacing: -1px;
    margin: 0;
    padding-left: 4rem;
    letter-spacing: -0.3rem;
    opacity: 0;
    visibility: hidden;
    touch-action: pan-y;
    /* Permite scroll vertical pero respeta touchmove horizontal puro */
}

.my-title h1 div {
    /* wrappers de cada línea */
    display: block;
    /* no flex */
    overflow: hidden;
    line-height: 81%;
}




.my-title h1 div>div {
    /* el texto animado */
    display: inline-block;
    white-space: nowrap;
    min-width: max-content;
    padding-right: .8rem;
}

.char {
    letter-spacing: -0.075em;
    /* ajusta el valor a tu gusto */
    display: inline-block;
    /* asegura que cada char respete spacing */
}


[data-animate="font-weight"] .char {
    display: inline-block;
    will-change: font-variation-settings, transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.char .nbsp {
    display: inline-block;
    /* necesario para que SplitText respete el ancho */
}

.space {
    display: inline-block;
    width: 0.6em;
    /* ajusta el ancho del &nbsp; */
}


.main-container {
    margin-top: 100px;
    padding: 0px;
    max-width: 2600px;
    margin-inline: auto;
}

.carousel-container {
    padding: 20px 0 0 0;
    position: relative;
    overflow: visible;
    height: auto;
    /* responsive */
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}

#carouselTrack,
.carousel-container {
    z-index: 1;
    /* carrusel normal debajo de todo */
}

.carousel-track:active {
    cursor: grabbing;
}

.project-card {
    display: inline-block;
    min-width: 36%;
    max-width: 45%;
    aspect-ratio: 16 / 9;
    margin: 0 1rem;
    border-radius: 8px;
    /* Slightly rounded corners */
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    transform-origin: center center;
}

.project-card.selected {
    transform: scale(1.1) !important;
    z-index: 20 !important;
}

.project-card.minimized {
    z-index: 0 !important;
    opacity: 0.4;
}

/* Con un proyecto abierto, al pasar por una minimizada NO cambiamos su posición
   (la rotación 3D la aplica el JS sobre su transform base) -> los márgenes con la
   foto abierta se mantienen siempre iguales. Solo la realzamos. */
.project-card.minimized:hover {
    opacity: 1;
    z-index: 15 !important;
    transform-origin: center center !important;
}

.project-card.shift-left {
    transform: translateX(-70px);
}

.project-card.shift-right {
    transform: translateX(70px);
}

.project-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
    pointer-events: none;
}


.project-card:hover {
    transform: scale(1.1);
    z-index: 10;
    transform-origin: center center !important;
    /* Sombra suave para dar profundidad al inclinarse en 3D (JS controla el giro). */
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.38);
}
.light .project-card:hover {
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.18);
}

.project-card .project-image {
    transition: filter 0.5s ease;
}

.project-card:hover .project-image {
    /*  filter:grayscale(1) invert(1) brightness(0.9);*/
}

.project-card img {
    pointer-events: none;
    /* Para que no interfiera con el hover */
    width: 100%;
    display: block;
    border-radius: inherit;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    background: rgba(0, 0, 0, 0);
    /* transparente por defecto */
    opacity: 0;
    transition: all 0.4s ease;
    padding: 1rem;
    text-align: center;
}

/* En hover NO oscurecemos ni mostramos título/cliente: solo escala + desplazamiento
   de las contiguas. La caja de overlay queda siempre invisible. */
.project-card:hover .project-overlay {
    background: transparent;
    opacity: 0;
}

.project-card:hover .project-overlay,
.project-card.selected .project-overlay {
    transform: translateY(0);
}

.project-overlay .project-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.project-overlay .project-client {
    font-size: 0.9rem;
    opacity: 0.85;
    color: #ff6b6b;
}

.navigation-arrows {
    display: flex;
    position: relative;
    justify-content: flex-end;
    margin-right: calc(4vw - max(0px, 100vw - 2600px) / 2);
    margin-top: 40px;
    gap: 20px;
    z-index: 2000;
}

.arrow-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.arrow-btn:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
    transform: scale(1.1);
}

#projectDetails {
    position: relative;
    /* relativo a su flujo normal */
    width: 43%;
    left: 51.5%;
    max-width: 1600px;   /* ampliado: el texto largo tiene más ancho en todos los tamaños
                            (menos líneas -> menos alto -> no choca con "GALLERY").
                            La línea de GALLERY se realinea sola vía syncGalleryLine(). */
    /* separación superior desde el carrusel */
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    display: none;
    /* oculto por defecto */
    pointer-events: auto;
    z-index: 100;
    /* ya no hace falta tan alto */
}

#projectDetails.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
    margin-top: -50px;
}

.details-grid {
    display: grid;
    grid-template-columns: 6fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

.details-info h3 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    text-spacing-trim: space-first;
    letter-spacing: -0.04em;
}

.info-row {
    margin-bottom: 20px;
    font-size: 1em;
    letter-spacing: -0.05em;
    line-height: 1.2em;
}

.info-label {
    font-variation-settings: "wght" 400, "wdth" 95, "opsz" 1;
    color: #ffffff;
    margin-bottom: 5px;
}

.info-value {
    color: #cccccc;
    line-height: 1.1;
    font-variation-settings: "wght" 225, "wdth" 95, "opsz" 6;
    white-space: pre-line;   /* respeta los saltos de línea escritos en el admin */
}

.additional-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.additional-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.additional-image:hover {
    transform: scale(1.05);
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 107, 107, 0.3);
    transform: scale(1.1);
}



/* ===== MEDIA QUERIES ===== */
@media (max-width: 768px) {

    .my-title {
        width: 100%;
        height: 16vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0a0a0a;
        color: #fff;
        text-align: left;
        margin-top: 5rem;
    }

    .my-title h1 {
        letter-spacing: -1px;
        margin: 0;
        padding: 0;
        /* Solo un poco más pequeño que antes (antes ~10vw); el bloque se centra por flex */
        font-size: clamp(2.6rem, 9vw, 6rem);
    }

    /* Mantiene la sangría de la 2ª línea, pero un poco más reducida en móvil */
    .my-title h1 .nbsp { font-size: 0.6em; }

    /* Un pelín más de aire entre letras en móvil para que no se corten al engrosar */
    .my-title h1 .char { letter-spacing: -0.03em; }

    /* En oscuro el peso de reposo es fino (50) y las letras se ven más juntas:
       un poco más de aire para que queden igual de aireadas que en claro. */
    :root:not(.light) .my-title h1 .char { letter-spacing: 0.01em; }

    .my-title h1 div {
        /* wrappers de cada línea */
        display: block;
        /* no flex */
        overflow: hidden;
    }

    .my-title h1 div>div {
        /* el texto animado */
        display: inline-block;
        white-space: nowrap;
        min-width: max-content;
        padding-right: 0;   /* sin sesgo lateral: centra limpio */
    }

    .main-container {
        margin-top: 0;
        padding: 12px 0;   /* sin gap lateral: las miniaturas llegan al borde */
        overflow-x: clip;  /* recorta las portadas que entran/salen fuera de pantalla (sin bloquear el scroll vertical) */
    }

    .carousel-container {
        height: auto;
        overflow: visible;
        padding: 0;
    }

    .carousel-track {
        display: block !important;
        transform: none !important;
    }

    .project-card {
        min-width: 100%;
        aspect-ratio: 16 / 9;
        margin: .3rem 0;
    }

    .navigation-arrows {
        display: none;
    }

    .project-details {
        /* En móvil los detalles se muestran en .mobile-project-overlay, no en este
           panel estático: ocultarlo evita el hueco vacío entre la rejilla y el footer. */
        display: none !important;
        max-height: none !important;
        overflow: visible;
        padding: 20px;
        margin-top: 10px;
        border-radius: 12px;
        transition: none;
    }

    .details-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }



    .header {
        padding: 20px;
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
    }

    .nav-links {
        display: block;
    }

    .nav-links a {
        font-size: 14px;
        margin-left: 10px;
    }
}

/* ---------- Expandido debajo de la card (imágenes apiladas 16:9) ---------- */
.project-expanded {
    display: none;
    /* se muestra desde JS */
    pointer-events: auto;
    background: transparent;
}

/* Contenedor de imágenes (el JS ajusta left/top/width inline) */
.project-expanded .expanded-images {
    width: 100%;
    background: transparent;
}

.project-expanded .expanded-images img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    /* fuerza 16:9 */
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 4px;
    /*box-shadow: 0 8px 20px rgba(0,0,0,0.35);*/
    background: transparent;
}

/* Panel fijo de información (no participa en scroll del bloque de imágenes) */
.project-info-panel {
    display: none;
    /* visible por JS */
    color: #fff;
    text-align: left;
    background: transparent;
    /* dejamos fondo transparente, ajustar si se desea */
    padding: 10px 0;
    line-height: 1.5;
}

.project-info-panel .expanded-title {
    font-size: 28px;
    margin-bottom: 12px;
    color: #ff6b6b;
    /* acento */
}

.project-info-panel .expanded-meta {
    margin-bottom: 8px;
    color: #ddd;
}

.project-info-panel .expanded-description {
    margin-top: 12px;
    color: #cfcfcf;
}

/* Aseguramos que la card seleccionada no se haga gigantesca */
.project-card.selected {
    transform: scale(1.02) !important;
    /* sólo un toque */
    z-index: 1000 !important;
}

/* Mantenemos la mínima separación entre las imágenes extra y el resto */
.project-expanded.active {
    /* no estilos obligatorios aquí; el posicionamiento lo controla JS */
}

/* Ocultar imagen principal y overlay mientras se muestra la flotante */
.hidden-original {
    visibility: hidden !important;
}

/* Contenedor de imágenes flotantes */
.expanded-images-container {
    position: fixed;
    /* no depende del scroll del body */
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 500;
    /* por encima de header y carousel */
    width: auto;
    height: auto;
    opacity: 0;
    background: transparent;
}

/* Imágenes apiladas */
.expanded-images-container img,
.expanded-images-container video {
    display: block;
    position: absolute;
    /* se mueve con transform */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    pointer-events: none;
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
    /* 👈 aquí ajustás la curva */
    will-change: transform;
    z-index: 0;
    background: transparent;
}

.expanded-images-container img:first-child,
.expanded-images-container video:first-child {
    z-index: 1;
    /* la primera (clonada del proyecto) queda siempre encima */
}

/* Animación de salida */
.expanded-images-container.closing img,
.expanded-images-container.closing video {
    transform: translateY(-50px);
    opacity: 0;
}

@media (max-width: 768px) {
    .my-title {
        margin-top: 7rem;
        margin-bottom: 2rem;
    }
}

/* --- CONTACT OVERLAY --- */
.contact-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;            /* viewport real en móvil (barra de Safari) */
    background-color: #151515;
    color: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;          /* fija: no scrollea */
    overscroll-behavior: contain;   /* evita el scroll-chaining al fondo */
}

.contact-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
}

.contact-nav a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 15px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.contact-nav a:hover, .contact-nav a.active {
    opacity: 1;
}

.contact-middle {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15vh;
    width: 54%;
}

.contact-logo-svg {
    width: 70px;
    height: auto;
    object-fit: contain;
}

.contact-center-top {
    text-align: left;
}

.contact-right {
    text-align: right;
}

.contact-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.contact-email {
    text-decoration: none;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    font-size: 10vw;
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
    cursor: pointer;
    margin-left: -5px;
}

.email-line {
    display: block;
    padding-bottom: 17px;
    border-bottom: 0.08em solid #ffffff;
    margin-bottom: 15px;
    transition: color 0.3s, border-color 0.3s;
}

.contact-email:hover .email-line {
    color: #a0a0a0;
    border-color: #a0a0a0;
}

.contact-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
    padding-bottom: 10px;
}

.footer-center a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 5px;
}

.footer-center a:hover {
    text-decoration: underline;
}

.footer-right {
    text-align: right;
}

@media (max-width: 768px) {
    .contact-overlay {
        padding: 20px;
        padding-top: calc(20px + env(safe-area-inset-top));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .contact-middle {
        margin-top: 16vh;
        grid-template-columns: 1fr;
        gap: 20px;
        width: auto;
    }
    .contact-center-top, .contact-right {
        text-align: left;
    }
    .contact-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .footer-right {
        text-align: left;
    }
    .contact-email {
        font-size: 10.5vw;
        margin-top: 40px;
    }
    .email-line {
        padding-bottom: 8px;
    }
    .contact-main {
        width: 90%;
    }
}

/* --- ABOUT OVERLAY (misma familia que Contact) --- */
.about-overlay {
    height: 100dvh;
    overflow-y: auto;              /* About sí puede scrollear (más contenido) */
    overscroll-behavior: contain;
    z-index: 10000;               /* por encima de Contact durante la transición */
}

.about-middle { width: 60%; }
.about-label--right { text-align: right; }

.about-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 5vh 0;
}

.about-statement {
    font-size: 8.5vw;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
    text-transform: uppercase;
}
.about-line {
    display: block;
    padding-bottom: 8px;
}
.about-line:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-block;
}

.about-bio {
    max-width: 620px;
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 300;
    line-height: 1.55;
    color: #b5b5b5;
}

.about-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 4vh 0 5vh;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.about-col h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a8a8a;
    margin-bottom: 14px;
    font-weight: 500;
}
.about-col ul { list-style: none; }
.about-col li {
    font-size: 15px;
    font-weight: 300;
    padding: 5px 0;
    color: #e9e9e9;
}

@media (max-width: 768px) {
    .about-middle { width: auto; }
    .about-label--right { text-align: left; }
    .about-statement { font-size: 13vw; line-height: 0.95; }
    .about-bio { font-size: 15px; }
    .about-cols { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
}

/* --- REEL OVERLAY --- */
.reel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);   /* opacidad a la mitad, blur intacto */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

.reel-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#reelVideo {
    width: 70vw;
    max-height: 90vh;
    border-radius: 8px;
    outline: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background: black;
}

@media (max-width: 768px) {
    #reelVideo {
        width: 90vw;
    }
}

.reel-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 9999999;
    transition: transform 0.3s ease;
}

.reel-close:hover {
    transform: scale(1.1);
}

/* =========================================
   MOBILE PROJECT GLASSMORPHISM OVERLAY
========================================= */
.mobile-project-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;   /* top:0 + bottom:0 => cubre toda la altura real de la pantalla en iOS,
                    sin el hueco que dejaba 100vh/100dvh al encoger la barra de Safari */
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;   /* fallback por si el motor no estira con bottom */
    background: rgba(0, 0, 0, 0.38);   /* opacidad a la mitad, blur intacto */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.mobile-project-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-close-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 16px);   /* debajo del notch del iPhone */
    right: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: white;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 100000;
}

.mobile-project-card {
    width: 85%;
    max-height: 40vh;
    height: auto;
    background: rgb(255 255 255 / 5%);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    margin-top: 25px;
}

.mobile-project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 9%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.2) 75%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.mobile-project-title {
    line-height: 32px;
    margin: 0 0 18px 0;   /* mismo hueco con los archivos que el card de abajo */
    font-size: 27px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: white;
    text-align: center;
    width: 85%;
}

/* Reserva superior: que el título (incluso a 3 líneas, p.ej. LALIGA) no choque
   con el botón "Back 2 Work" ni con el notch del iPhone. */
.mobile-project-content {
    box-sizing: border-box;
    padding-top: calc(env(safe-area-inset-top, 0px) + 44px);
}

.mobile-carousel-wrapper {
    flex: 0 0 auto;
    width: 100vw;
    position: relative;
    overflow: hidden;
    /* Hueco vertical mínimo para que la sombra de las slides no se corte abajo. */
    padding: 8px 0 26px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7.5%, black 92.5%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 7.5%, black 92.5%, transparent 100%);
    -webkit-mask-size: 120% 100%;
    mask-size: 120% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-size 0.4s ease, mask-size 0.4s ease;
}

.is-rotating .mobile-carousel-wrapper {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mobile-carousel-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0 7.5vw; /* Centra el slide de 85vw */
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.mobile-slide {
    flex: 0 0 85vw;
    width: 85vw;
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-slide.active-slide {
    transform: scale(1);
}

.mobile-slide img, .mobile-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.mobile-project-info {
    padding: 20px;
    color: white;
    background: transparent;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

.mobile-project-info .info-row {
    margin-bottom: 15px;
    font-size: 14px;
    width: 100%;
    letter-spacing: -0.05em;
    line-height: 1.2em;
}

.mobile-project-info .info-label {
    color: #ffffff;
    margin-bottom: 3px;
    font-variation-settings: "wght" 400, "wdth" 95, "opsz" 1;
}

.mobile-project-info .info-value {
    color: #cccccc;
    line-height: 1.1;
    font-variation-settings: "wght" 225, "wdth" 95, "opsz" 6;
    min-width: 0;
    white-space: pre-line;   /* respeta los saltos de línea escritos en el admin */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.mobile-dots {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 15px 0;
    background: transparent;
    z-index: 10;
    flex-shrink: 0;
}

.mobile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: background 0.3s ease;
}

.mobile-dot.active {
    background: white;
}

/* =========================================
   LANDING MÓVIL — Rejilla de proyectos (masonry 2 columnas) + usabilidad táctil
   (Solo afecta a las tarjetas cerradas; el proyecto abierto no cambia.)
========================================= */
@media (max-width: 768px) {
    /* Sin parpadeo azul al tocar y taps inmediatos (sin delay de 300 ms) */
    body { -webkit-tap-highlight-color: transparent; }
    a, button, .project-card { touch-action: manipulation; }

    /* Nav del header: áreas de toque más cómodas */
    .nav-links a {
        font-size: 15px;
        margin-left: 14px;
        padding: 6px 0;
        display: inline-block;
    }

    /* Rejilla de 2 columnas con huecos intencionados (patrón por ciclos de 4) */
    .carousel-track {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;        /* gap uniforme (mismo arriba/abajo/lados) */
        transform: none !important;
    }

    .project-card {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 0;
        overflow: visible;
        cursor: pointer;
        transition: none;
        /* (sin transform:none!important: GSAP necesita animar el desplazamiento lateral) */
    }

    /* Tiles que ocupan las 2 columnas (banner ancho) */
    .project-card.wide { grid-column: 1 / -1; }
    .project-card.wide .tile-media { aspect-ratio: 16 / 9; }

    /* Portada cuadrada con un pequeño corner radius */
    .tile-media {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        overflow: hidden;
        background: #111;
    }

    /* Sin radio SOLO en las esquinas que tocan el borde de la página.
       Las esquinas que dan al gap central conservan el radio. */
    .tile--left .tile-media {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .tile--right .tile-media {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .tile--full .tile-media {
        border-radius: 0;   /* toca ambos bordes */
    }

    /* Huecos con texto editorial, justificados hacia el gap central */
    .grid-hole {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        color: #cfcfcf;
    }
    .grid-hole span {
        font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
        font-size: clamp(15px, 4.6vw, 21px);
        font-weight: 300;
        line-height: 1.18;
        letter-spacing: -0.2px;
    }
    .grid-hole.hole--left  { justify-content: flex-start; text-align: left; }
    .grid-hole.hole--right { justify-content: flex-end;   text-align: right; }
    .tile-media .project-image,
    .tile-media img,
    .tile-media video {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    /* Título en una línea bajo la portada */
    .tile-title {
        margin-top: 14px;        /* más aire entre portada y título */
        color: #9b9b9b;          /* gris, menos blanco */
        font-size: 0.78rem;      /* más pequeño */
        font-weight: 300;        /* más fino */
        letter-spacing: -0.1px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
    }

    /* Sin overlay ni efecto hover en las tarjetas cerradas (sin !important para
       no pisar el transform de GSAP en los reveals). */
    .project-overlay { display: none !important; }
    .project-card:hover { transform: none; }
    .project-card:hover .project-image { filter: none; }
}

/* =========================================================
   TOGGLE DE TEMA (claro / oscuro) + MODO CLARO
   ========================================================= */
.theme-toggle {
    position: fixed;
    top: calc(var(--landing-header-h, 80px) + 14px);   /* justo debajo del header */
    right: calc(20px + env(safe-area-inset-right));
    z-index: 1500;
    width: 52px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.3s ease;
}
.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f4f3f0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

/* Transición suave al alternar el tema */
body,
.header,
.my-title,
.tile-media,
.arrow-btn,
.contact-overlay,
.grid-hole {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

/* ---- Estado: MODO CLARO (clase .light en <html>) ---- */
.light .theme-toggle { background: rgba(0, 0, 0, 0.18); }
.light .theme-toggle-knob { transform: translateX(22px); background: #14100f; }

html.light { background: #f2f1ec; }   /* la clase .light va en el propio <html>: usar html.light, no ".light html" */
.light body { background: #f2f1ec; color: #14100f; }
.light .header {
    background: rgba(242, 241, 236, 0.4);    /* intermedio entre 0.6 (antes) y 0.22 */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.light .my-title { background: #f2f1ec; color: #6a6a6a; }   /* mismo gris que los textos editoriales de la landing */
.light .nav-links a,
.light .nav-links a:hover,
.light .nav-links a.active { color: #14100f; }
.light .tile-media { background: #e3e1db; }
.light .grid-hole { color: #6a6a6a; }

/* Textos del proyecto abierto (escritorio): en claro deben ir oscuros.
   Se limita a #projectDetails para no afectar al overlay móvil (fondo oscuro). */
.light .project-details h3,
.light .project-details .info-label { color: #14100f; }
.light .project-details .info-value { color: #555555; }

/* Etiquetas creadas por JS con color en línea -> se fuerzan */
.light .project-number,
.light .gallery-label { color: #14100f !important; }

/* Logo y cursor son SVG blancos -> se invierten a oscuro en claro */
.light .logo img,
.light .contact-logo-svg,
.light .custom-cursor img { filter: invert(1); }

/* Flechas de navegación (escritorio) */
.light .arrow-btn {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.25);
    color: #14100f;
}

/* Overlays Contact / About */
.light .contact-overlay { background: #f2f1ec; color: #14100f; }
.light .contact-nav a,
.light .contact-email { color: #14100f; }
.light .email-line { border-bottom-color: #14100f; }
.light .contact-email:hover .email-line { color: #6a6a6a; border-color: #6a6a6a; }
.light .footer-center a { color: #14100f; }
.light .about-bio { color: #4a4a4a; }
.light .about-col li { color: #222; }
.light .about-col h4 { color: #777; }
.light .about-line:last-child { border-bottom-color: rgba(0, 0, 0, 0.3); }
.light .about-cols { border-top-color: rgba(0, 0, 0, 0.12); }

@media (max-width: 768px) {
    .header-right { gap: 12px; }
    .theme-toggle { width: 46px; height: 27px; }
    .theme-toggle-knob { width: 21px; height: 21px; }
    .light .theme-toggle-knob { transform: translateX(19px); }
}

/* =========================================================
   FOOTER — solo landing en móvil (misma estética que el header)
   Da cierre a la página para que la rejilla no parezca infinita.
   ========================================================= */
.site-footer { display: none; }   /* oculto en escritorio (carrusel) */

@media (max-width: 768px) {
    .site-footer {
        display: block;
        margin-top: 0;   /* pegado a la rejilla (solo el gap de 12px que ya deja el grid) */
        /* Mismo padding lateral que el header + safe-area del home indicator */
        padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: #0a0a0a;
        transition: background-color 0.45s ease, border-color 0.45s ease;
    }

    /* Fila principal: logo a la izquierda + nav a la derecha (igual que el header) */
    .site-footer__bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .site-footer__logo img {
        display: block;
        width: 70px;   /* mismo tamaño que el logo del header */
        height: auto;
    }

    .site-footer__nav a {
        text-decoration: none;
        color: #ffffff;
        font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
        font-size: 15px;
        font-weight: 400;
        margin-left: 12px;
        opacity: 0.6;
        transition: opacity 0.3s ease;
    }
    .site-footer__nav a:hover,
    .site-footer__nav a:active { opacity: 1; }

    /* Metadatos discretos: firma + descriptor */
    .site-footer__meta {
        display: flex;
        justify-content: space-between;
        margin-top: 28px;
        font-size: 11px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #6f6f6f;
    }
}

/* Tema claro (misma familia que header/overlays) */
.light .site-footer { background: #f2f1ec; border-top-color: rgba(0, 0, 0, 0.12); }
.light .site-footer__nav a { color: #14100f; }
.light .site-footer__meta { color: #8a8a8a; }
.light .site-footer__logo img { filter: invert(1); }

/* =========================================================
   INTRO / PRELOADER (se muestra una vez por sesión)
   ========================================================= */
/* Intro/preloader retirada a petición: se deja oculta. */
.intro { display: none; }

/* ===== Grano — CAPA 2: VISIBLE (por debajo del header, no toca su efecto) =====
   overlay es invisible sobre el negro casi puro; por eso esta capa usa screen
   (motas claras sobre oscuro) y multiply en tema claro (motas oscuras sobre claro). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;               /* por debajo del header (10001): no interfiere con su efecto */
    opacity: 0.1;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    /* Grano animado: el patrón salta de posición (flicker) sin recalcular turbulence */
    animation: grainShift 0.5s steps(1) infinite;
}
.light body::before { mix-blend-mode: multiply; opacity: 0.5; }

@keyframes grainShift {
    0%   { background-position:   0px   0px; }
    12%  { background-position: -33px  12px; }
    25%  { background-position:  22px -28px; }
    37%  { background-position: -12px  34px; }
    50%  { background-position:  41px   6px; }
    62%  { background-position: -27px -19px; }
    75%  { background-position:   9px  27px; }
    87%  { background-position: -18px -33px; }
    100% { background-position:   0px   0px; }
}

/* ===== Grano — CAPA 1: influye en el efecto del header (NO tocar su blend) ===== */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999995;            /* sobre la UI, bajo el cursor */
    opacity: 0.16;
    mix-blend-mode: overlay;     /* NO tocar: esta capa "influye" en el efecto del header/notch */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.light body::after { opacity: 0.11; }

/* =========================================================
   CURSOR CONTEXTUAL — badge "VIEW" sobre los proyectos
   ========================================================= */
.custom-cursor img { transition: opacity 0.2s ease; }
/* El cristal lo aporta el propio .custom-cursor; el label es solo el texto encima. */
.custom-cursor .cursor-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.light .custom-cursor .cursor-label { color: #14100f; }
.custom-cursor.view img { opacity: 0; }
.custom-cursor.view .cursor-label { opacity: 1; }

/* Enlaces del nav como inline-block para poder aplicarles el efecto magnético */
.nav-links a { display: inline-block; }

/* =========================================================
   LIGHTBOX (ampliar archivos del proyecto + navegar) — escritorio
   ========================================================= */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 999998;               /* como el reel: sobre todo, bajo el cursor */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.light .lightbox { background: rgba(242, 241, 236, 0.6); }
.lightbox.active { opacity: 1; pointer-events: auto; }

.lightbox-stage {
    max-width: 82vw;
    max-height: 84vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
    max-width: 82vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    background: #000;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}
.light .lightbox-close { color: #14100f; }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.3s ease, transform 0.3s ease;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.light .lightbox-nav { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.25); color: #14100f; }

.lightbox-count {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    letter-spacing: 1px;
    color: #fff;
    opacity: 0.8;
}
.light .lightbox-count { color: #14100f; }