@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

/* ═════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM - SISTEMA DE DISEÑO COMPLETO

   Este archivo define el contenedor de estilo global cuyo sistema es centralizado
   en design-system.js. Las variables CSS y temas se actualizan dinámicamente
   desde JavaScript.

   ESTRUCTURA:
   1. Variables y Modos (Light/Dark)
   2. Reset Global
   3. Navbar
   4. Componentes Principales
   5. Animaciones y Effects
   ═════════════════════════════════════════════════════════════════════════════ */

/* --- 0. VARIABLES Y MODOS --- */
:root {
    --bg-color: white;
    --text-color: black;
    --border-color: black;
    --cube-bg: #000;
    --cube-border: #fff;

    /* Transiciones de tema sincronizadas con design-system.js */
    --theme-transition: .4s cubic-bezier(1, 0.01, 0.43, 1);
}

body.dark-mode {
    --bg-color: black;
    --text-color: white;
    --border-color: white;
    --cube-bg: #fff;
    --cube-border: #000;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--theme-transition), color var(--theme-transition);
    font-family: "Inter", sans-serif;
}

/* --- 1. BASE & RESET --- */
* {
    margin: 0;
    border: none;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

.transition-overlay {
    position: fixed;
    top: -5dvh;
    /* added overscroll buffer */
    left: 0;
    width: 100vw;
    height: 110dvh;
    /* added overscroll buffer */
    background-color: #000;
    /* Solid black to prevent white flashes */
    z-index: 999999;
    /* Covers screen by default to avoid showing unstyled content */
    transform: translateY(0);
}

/* Hidden from first paint (not just from script.js's gsap.set, which can't
   run until GSAP + script.js finish loading) so there's no flash of these
   elements at their final position/opacity before the entrance animation in
   script.js's DOMContentLoaded handler reveals them. That handler has a
   safety-net timeout that forces opacity:1 if the animation never runs.
   Excludes .docs-body (design-system-docs.html) — it reuses these same
   classes as static typography samples and never loads script.js, so
   nothing would ever reveal them there. */
body:not(.docs-body) :where(.nav_component, .heading-style-h1, .section_hero-title-password, .not-found-title, .fixed-controls_component > *, .nav_list a, .text-size-regular, .layout_stack, .not-found-sub, .password-form) {
    opacity: 0;
}

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

.page-wrapper {
    width: 100%;
    flex: 1;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    position: relative;
    background-color: transparent;
    padding-top: 4rem;
    /* Spacer for fixed navbar */
}

/* --- 2. NAVBAR SUPERIOR --- */
.nav_component {
    width: 100%;
    flex: 0 0 auto;
    z-index: 1030;
    transition: border-color var(--theme-transition);
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
}

.nav_component.is-solid {
    background-color: transparent;
    mix-blend-mode: difference;
    border-bottom: none;
    overflow: hidden;
    transition: mix-blend-mode 0.3s ease;
}

.nav_component.is-solid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    z-index: -1;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Estado activo: fondo visible */
.nav_component.is-solid.is-active::before {
    transform: translateY(0);
}

/* --- AJUSTES ESPECÍFICOS PARA PROJECTS PAGE --- */
/* Forzar elementos del nav a blanco SIEMPRE (No blend mode) 
   según requerimiento de usuario solo para esta página */
.projects-page .nav_component {
    mix-blend-mode: normal !important;
}

.projects-page .nav_component .text-style-nav,
.projects-page .nav_component .text-style-nav *,
.projects-page .nav_component .difference-text {
    color: #ffffff !important;
    mix-blend-mode: normal !important;
    background: none !important;
    background-color: transparent !important;
}

.projects-page .nav_component .nav_button div {
    background-color: #ffffff !important;
    mix-blend-mode: normal !important;
}

/* Burger negro en escritorio cuando el menú está abierto (Solo Projects Page) */
@media screen and (min-width: 769px) {
    .projects-page .nav_button.active div {
        background-color: #000000 !important;
        background: #000000 !important;
    }
}

/* Burger y TATC negros en móvil cuando el menú está abierto (Solo Projects Page) */
@media screen and (max-width: 768px) {

    .projects-page .nav_component:has(.nav_button.active) .text-style-nav,
    .projects-page .nav_component:has(.nav_button.active) .text-style-nav * {
        color: #000000 !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    .projects-page .nav_component:has(.nav_button.active) .nav_button div {
        background-color: #000000 !important;
    }
}

/* --- FIN NAVBAR SUPERIOR --- */

.nav_container {
    padding: .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-style-nav {
    font-size: 1rem;
    font-variation-settings: 'wght' 500;
    letter-spacing: -0.07em;
    color: var(--text-color);
    transition: color var(--theme-transition);
}

/* --- 3. BURGER MENU --- */
.nav_button {
    --size: 15px;
    --thickness: 2px;
    --gap: 5px;
    width: var(--size);
    height: var(--size);
    position: relative;
    cursor: pointer;
}

.nav_button div {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--thickness);
    background: var(--text-color);
    transition: top 0.2s cubic-bezier(1, 0.01, 0.43, 1),
        transform 0.2s cubic-bezier(1, 0.01, 0.43, 1),
        opacity 0.2s cubic-bezier(1, 0.01, 0.43, 1),
        background-color var(--theme-transition);
}

.nav_button div:nth-child(1) {
    top: calc(50% - var(--gap));
    transform: translateY(-50%);
}

.nav_button div:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.nav_button div:nth-child(3) {
    top: calc(50% + var(--gap));
    transform: translateY(-50%);
}

.nav_button.active div:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.nav_button.active div:nth-child(2) {
    opacity: 0;
}

.nav_button.active div:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* --- 4. RIGHT NAVBAR (SIDEBAR) --- */
.nav_menu {
    height: 100dvh;
    position: fixed;
    /* Fijo para hacer scroll */
    right: 0;
    top: 0;
    display: flex;
    border-left: .8px solid var(--border-color);
    background: var(--bg-color);
    z-index: 999;
    transform: translateX(100%);
    transition: transform var(--theme-transition),
        background-color var(--theme-transition),
        border-left-color var(--theme-transition);
    overflow: visible;
}

.nav_menu.active {
    transform: translateX(0);
}

/* Lock body scroll whenever the menu is open at any breakpoint */
body.menu-open {
    overflow: hidden !important;
}

.nav_menu-container {
    flex-direction: column;
    justify-content: center;
    padding-bottom: 2rem;
    overflow: visible;
}

.nav_list {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-transform: uppercase;
    overflow: visible;
}

.nav_link {
    transform: rotate(-180deg);
    writing-mode: vertical-lr;
    font-size: .88em;
    font-variation-settings: 'wght' 550;
    white-space: nowrap;
}

/* --- 5. SOCIAL ICONS --- */
.social_list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    overflow: visible;
    gap: .5em;
}

.social_list .social_link:first-child img {
    position: relative;
    top: -1.5px;
}

.social_link {
    width: 100%;
    display: flex;
}

.social_link img {
    transition: transform 0.3s cubic-bezier(1, 0.01, 0.43, 1), filter var(--theme-transition);
}

.social_link img:hover {
    transform: scale(1.1);
}

body.dark-mode .social_link img {
    filter: invert(1);
}

/* --- 6. HERO SECTION --- */
.section_hero {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .75rem .75rem 4% .75rem;
}

.heading-style-h1 {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    filter: blur(0.5px);
    transform: scale(1.2);
    line-height: 80%;
    font-weight: 900;
    text-align: center;
    letter-spacing: -0.1em;
    -webkit-text-stroke-width: 0.04em;
    -webkit-text-stroke-color: var(--text-color);
    color: var(--text-color);
    text-transform: uppercase;
    user-select: none;
    font-size: 14cqw;
    transition: color var(--theme-transition), -webkit-text-stroke-color var(--theme-transition);
}

.heading-style-h2 {
    text-align: center;
    text-transform: uppercase;
    line-height: .7;
    letter-spacing: -0.05em;
    padding: 1.5em .75em .75em .75em;
}

.layout_stack {
    display: flex;
    flex-direction: column;
    gap: .75em;
    height: auto;
    /* Permite crecer hacia abajo */
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

/* --- 6.1 UNIFIED TEXT STYLES & LAYOUTS --- */
.text-style-label {
    font-family: "Inter", sans-serif;
    text-align: left;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0rem;
    color: var(--text-color);
    opacity: 1;
    transition: color var(--theme-transition);
    display: block;
}

.text-size-regular {
    font-family: "IBM Plex Mono", monospace;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25;
    color: var(--text-color);
    text-align-last: left;
    transition: color var(--theme-transition);
}

.margin-bottom.margin-medium {
    margin-bottom: 2rem;
    width: 100%;
}

/* Layout for pages that push content to the bottom (Artist/About) */
.layout_bottom {
    width: 100%;
    min-height: calc(100dvh - 5rem);
    /* Adjust for navbar */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.75rem 0.75rem 2.5rem 0.75rem;
    box-sizing: border-box;
    position: relative;
    align-items: flex-start;
}

/* Specific class for Artist bio to maintain line breaks */
.text-size-regular.is-fluid {
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(9px, 2.2vw, 1.15rem);
    line-height: 1.5;
    text-align: left;
    max-width: none;
    display: block;
    white-space: nowrap;
    /* Force one line per segment between <br> */
}

/* Reset wrapping for small screens where clamp hits 9px */
@media (max-width: 480px) {
    .text-size-regular.is-fluid {
        white-space: normal;
        font-size: 9px;
    }
}

/* --- 7. RESPONSIVE (MOBILE) --- */
@media (max-width: 768px) {
    .nav_menu {
        width: 100vw;
        border-left: none;
        overflow: visible;
    }

    .nav_link {
        transform: none;
        writing-mode: horizontal-tb;
        white-space: nowrap;
    }

    .nav_list {
        flex: 1;
        gap: .5em;
        width: 100%;
        overflow: visible;
    }

    .heading-style-h2 {
        padding: 1.25em .75em .75em .75em;
    }

    .social_list {
        flex-direction: column;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: calc(18px);
    }

    .nav_menu-container {
        width: 100%;
        align-items: flex-end;
        padding: .75rem .75rem 2rem .75rem;
        overflow: visible;
    }

    .section_hero {
        padding-bottom: 16%;
    }

    .heading-style-h1 {
        font-size: 14vw;
        transform: scale(1.1);
        width: 100%;
        padding: 0 1rem;
    }
}

/* --- CUBO 3D --- */
.cms-cube-wrapper {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    top: -2%;
}

#cube-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: auto;
    cursor: grab;
    perspective: 1000px;
    visibility: hidden;
    touch-action: none;
}

#cube-container.hidden-component {
    display: none !important;
}

#cube {
    position: relative;
    transform-style: preserve-3d;
}

.cube-face {
    position: absolute;
    background: var(--cube-bg);
    border: 1px solid var(--cube-border);
    backface-visibility: hidden;
    transition: background-color var(--theme-transition), border-color var(--theme-transition);
}

.cube-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* --- CONTENEDOR PADRE TOGGLES --- */
.fixed-controls_component {
    position: fixed;
    /* Fijo para que nos acompañe al hacer scroll */
    bottom: 2rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    z-index: 900;
}

/* --- ESTILO ESPECÍFICO DEL CUBO --- */
.icon-button.is-cube {
    --cube-size: .88rem;
    width: var(--cube-size);
    height: var(--cube-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s cubic-bezier(1, 0.01, 0.43, 1);
}

.icon-button.is-cube svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.icon-button.is-cube svg rect,
.icon-button.is-cube svg line {
    stroke: var(--text-color) !important;
    transition: stroke var(--theme-transition);
}

/* --- ESTILO ESPECÍFICO DEL CUADRADO --- */
.icon-button.is-square {
    --square-size: 0.75rem;
    width: var(--square-size);
    height: var(--square-size);
    background-color: var(--text-color);
    border: none;
    aspect-ratio: 1/1;
    cursor: pointer;
    transition: background-color var(--theme-transition);
}

/* --- ESTILO CUADRADO HUECO (404/Gallery) --- */
.icon-button.is-hollow {
    --square-size: 0.75rem;
    width: var(--square-size);
    height: var(--square-size);
    background-color: transparent;
    border: 1px solid var(--text-color);
    aspect-ratio: 1/1;
    cursor: pointer;
    transition: background-color var(--theme-transition), border-color var(--theme-transition);
    border-radius: 1px;
}


/* ============================================
   ESTILOS CARRUSEL SWEET KID 
   ============================================ */
:root {
    --card-height: 160px;
    --card-gap: 8px;
    --card-radius: 0px;
}

#carousel-root {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: -.5rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 10;
}

.carousel-dual-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-container {
    width: 100%;
    display: flex;
    align-items: center;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

.carousel-wrapper {
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: var(--card-gap);
    align-items: center;
    will-change: transform;
    width: max-content;
}

/* TARJETAS */
.carousel-slide {
    flex-shrink: 0;
    height: var(--card-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-card {
    height: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
}

.carousel-image {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;
    /* Previene bugs de arrastre nativo */
    user-select: none;
    -webkit-user-drag: none;
    transition: filter var(--theme-transition);
}

body.dark-mode .carousel-image {
    filter: brightness(0.85);
}

/* --- SEGUIDOR DEL RATÓN (MÁSCARA ADAPTABLE AL TEXTO) --- */
.carousel-cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}

/* Contenedor que actúa como máscara */
.carousel-cursor-follower .cursor-mask {
    overflow: hidden;
    width: 0px;
    background: var(--bg-color);
    color: var(--text-color);
    border-radius: 0;
    transition: background-color var(--theme-transition), color var(--theme-transition);
}

/* El texto dentro de la máscara */
.carousel-cursor-follower .cursor-text {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;

    /* 👇 Dejamos que el texto defina el tamaño del contenedor 👇 */
    padding: 10px 14px;
    display: inline-block;

    line-height: 1;
    white-space: nowrap;
    /* Mantiene el texto en una sola línea */
}

@media (hover: hover) and (pointer: fine) {
    #carousel-root:hover {
        cursor: none;
    }
}

/* --- OVERLAY PANTALLA COMPLETA --- */
#gallery-overlay {
    position: fixed;
    inset: 0;
    /* Fondo mucho más oscuro, casi negro puro */
    background-color: rgba(0, 0, 0, 0.98);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

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

.overlay-content {
    position: relative;
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#overlay-img {
    width: 100%;
    height: auto;
    max-height: 85dvh;
    object-fit: contain;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    cursor: default;
}

/* 👇 VARIABLES DE CONTROL: FLECHAS DEL OVERLAY 👇 */
:root {
    --arrow-box-size: 40px;
    /* Tamaño del cuadrado blanco (El cursor era de 90px) */
    --arrow-box-bg: transparent;
    /* Color de fondo del cuadrado */
    --arrow-color: white;
    /* Color de la flecha */

    --arrow-size: 12px;
    /* Tamaño de la flecha */
    --arrow-thickness: 2px;
    /* Grosor de la línea de la flecha */

    /* Mix blend mode opcional (normal, difference, exclusion...) */
    --arrow-blend-mode: difference;
}

/* 👇 FLECHAS DEL OVERLAY (Diseño Cuadrado tipo Cursor) 👇 */
.overlay-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* --- ESTRUCTURA DEL CUADRADO --- */
    width: var(--arrow-box-size);
    height: var(--arrow-box-size);
    background: var(--arrow-box-bg);
    border: none;
    border-radius: 0;
    /* Esquinas totalmente rectas */
    padding: 0;

    /* --- COLOR Y MEZCLA --- */
    color: var(--arrow-color);
    mix-blend-mode: var(--arrow-blend-mode);

    /* --- INTERACCIÓN --- */
    cursor: pointer;
    opacity: 0.85;
    /* Un poco más opacos por defecto al ser blancos */
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
    z-index: 10;

    /* --- CENTRADO INTERNO --- */
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-btn:hover {
    opacity: 1;
    /* Efecto sutil de crecimiento */
    transform: translateY(-50%) scale(1.05);
}

/* La estructura del DIV que forma la flecha */
.css-arrow {
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: var(--arrow-thickness) solid currentColor;
    border-right: var(--arrow-thickness) solid currentColor;
    display: block;
    border-radius: 1px;
}

/* Rotaciones y márgenes matemáticos para centrado óptico */
.arrow-left {
    transform: rotate(-135deg);
    /* Desplaza la flecha matemáticamente un tercio de su tamaño para centrarla visualmente */
    margin-left: calc(var(--arrow-size) / 3);
}

.arrow-right {
    transform: rotate(45deg);
    margin-right: calc(var(--arrow-size) / 3);
}

/* Posiciones a los bordes de la pantalla */
.overlay-prev {
    left: 3%;
}

.overlay-next {
    right: 3%;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
    .overlay-btn {
        /* Cuadrados un poco más pequeños en móvil */
        width: calc(var(--arrow-box-size) * 0.7);
        height: calc(var(--arrow-box-size) * 0.7);
    }

    .css-arrow {
        width: calc(var(--arrow-size) * 0.8);
        height: calc(var(--arrow-size) * 0.8);
    }
}

.difference-text {
    mix-blend-mode: difference;
}

/* Solo color blanco por defecto si no es en una página especial como 404 o Projects */
body:not(.body-404) .difference-text {
    color: white;
}

.difference-text div {
    background: white;
}

.body_fixed {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}


/* ============================================
   ESTILOS PÁGINA DE PROYECTOS (projects.html)
   ============================================ */

.projects-page {
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

#projects-gallery-wrapper {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    overflow: hidden;
    transition: background-color var(--theme-transition);
    z-index: 1;
}

/* ── Slides ── */
.proj-slide {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: flex-end;
    will-change: transform;
    cursor: default;
    background-color: #000; /* shows through when a project has no cover image */
}

.proj-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.proj-slide iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    border: none;
}

.proj-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.8));
    pointer-events: none;
    z-index: 1;
}

/* ── Info del proyecto ── */
.proj-info {
    position: relative;
    z-index: 2;
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: .75rem;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 0em;
    pointer-events: none;
    width: clamp(250px, 45%, 520px);
}

.proj-info .proj-title {
    font-size: 0.95rem;
    font-variation-settings: 'wght' 550;
    margin-bottom: .2rem;
    letter-spacing: -0.03em;
}

.proj-info .proj-meta {
    opacity: 0.7;
    font-size: .65rem;
    font-family: "IBM Plex Mono", monospace;
    line-height: 1.3;
}

.proj-info .proj-meta span {
    display: none;
}

/* ── Cursor personalizado ── */
#proj-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    text-transform: uppercase;
    color: #fff;
    mix-blend-mode: difference;
    white-space: nowrap;
}

#proj-cursor.visible {
    opacity: 1;
}

#proj-cursor .cursor-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}

/* ── Dots de progreso ── */
#proj-progress {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

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

.prog-dot.active {
    background: #fff;
    transform: scale(1.5);
}

/* ── Hint de scroll ── */
#scroll-hint {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: "IBM Plex Mono", monospace;
    font-size: .68rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: hint-pulse 2s ease-in-out infinite;
    mix-blend-mode: difference;
}

/* ── 404 UI Layer Adaptivity ── */
.not-found-ui-layer {
    isolation: isolate;
    mix-blend-mode: multiply;
    background: white;
}

body.dark-mode .not-found-ui-layer {
    mix-blend-mode: screen;
    background: black;
}

@keyframes hint-pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px);
    }
}

@media (max-width: 768px) {
    .proj-info {
        width: 90%;
        padding: .75rem .75rem 2rem .75rem;
    }

    #scroll-hint {
        left: auto;
        right: 1.5rem;
        transform: translateY(0);
        animation: hint-pulse-mobile 2s ease-in-out infinite;
    }

    /* Override scroll hint animation for mobile without translate X centering */
    @keyframes hint-pulse-mobile {

        0%,
        100% {
            opacity: 0.5;
            transform: translateY(0);
        }

        50% {
            opacity: 1;
            transform: translateY(-4px);
        }
    }

    #proj-cursor {
        /* Centered on mobile */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        /* Ignore mouse following and force visibility */
        pointer-events: none;
        opacity: 1 !important;
    }
}

/* ── Cursor inteligente 3 zonas (projects.html) ── */
#proj-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 900;
    /* Asegurar que esté por debajo del menú (999) en Projects Page */
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    text-transform: uppercase;
    color: #fff;
    mix-blend-mode: difference;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

#proj-cursor.visible {
    opacity: 1;
}

#proj-cursor .cursor-symbol {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 13px;
    line-height: 1;
}

#proj-cursor .cursor-text {
    display: inline-block;
}

/* Zona central: sin texto si no hay link */
#proj-cursor.cursor-mid .cursor-symbol,
#proj-cursor.cursor-mid .cursor-text {
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Contenedor principal: Fila horizontal por defecto */
.info-row {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    /* Separación natural entre los bloques */
    align-items: flex-start;
    /* Mantiene los textos alineados arriba */
    width: 100%;
}

/* Cada columna se ajusta a su contenido sin forzar tamaños */
.info-col {
    display: flex;
    flex-direction: column;
}

/* Mobile: Pasa a formato de una sola columna apilada */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        gap: 2.5rem;
        /* Un poco más de aire entre bloques en celular */
    }
}

.container-medium {
    min-width: 160px;
    max-width: 480px;
    margin-top: 2rem;

}

.padding-global {
    padding-bottom: 2rem;
    justify-content: center;
}

.body_no-fixed {
    min-height: 100dvh;
    overflow: visible;

    display: flex;
    flex-direction: column;
    position: relative;
}

/* --- EFECTO HOVER TEXTO DOBLE --- */
.hover-split-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

.hover-split-text .text-inner,
.hover-split-text .text-outer {
    display: block;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    /* Safety space - only at the end flow */
    padding-inline-end: 0.15em;
    box-sizing: border-box;
}

.hover-split-text .text-inner {
    transform: translateY(0);
}

.hover-split-text .text-outer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    transform: translateY(0);
}

.hover-split-text:hover .text-inner {
    transform: translateY(-100%);
}

.hover-split-text:hover .text-outer {
    transform: translateY(-100%);
}

/* Para links rotados en navbar (DESKTOP) - Flujo horizontal */
@media (min-width: 769px) {
    .nav_link .hover-split-text {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    /* Flujo horizontal para links rotados */
    .nav_link .hover-split-text .text-inner {
        transform: translateX(0) !important;
    }

    .nav_link .hover-split-text .text-outer {
        position: absolute;
        top: 0;
        left: 100%;
        width: auto;
        transform: translateX(0) !important;
    }

    .nav_link .hover-split-text:hover .text-inner {
        transform: translateX(-100%) !important;
    }

    .nav_link .hover-split-text:hover .text-outer {
        transform: translateX(-102%) !important;
    }
}

/* Para links rotados en navbar (MOBILE) - Flujo vertical */
@media (max-width: 768px) {
    .nav_link .hover-split-text {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    .nav_link .hover-split-text .text-inner {
        transform: translateY(0);
    }

    .nav_link .hover-split-text .text-outer {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        transform: translateY(0);
    }

    .nav_link .hover-split-text:hover .text-inner {
        transform: translateY(-100%);
    }

    .nav_link .hover-split-text:hover .text-outer {
        transform: translateY(-100%);
    }
}

.salon-link {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

.salon-link .hover-split-text {
    vertical-align: middle;
}

.bold-link {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

/* Effect to 'separate' or change the font for the hover state */
.alternate-font .text-inner,
.alternate-font .text-outer {
    white-space: nowrap;
    text-transform: uppercase;
}

.alternate-font .text-outer {
    margin-top: 0;
}

.text-size-regular .hover-split-text {
    vertical-align: bottom;
}

/* ============================================
   ESTILOS PÁGINA 404 (404.html)
   ============================================ */

/* Al aislar correctamente el background del main-container permitimos que se vea el z-index -1 del body nativo */
.body-404 .page-wrapper {
    background-color: transparent !important;
}

.page-404-container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: auto;
}

.not-found-bg {
    position: fixed;
    top: 50%;
    color: #ff0000;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5, 2);
    font-size: 40cqw;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 0.8;
    opacity: 1;
    filter: blur(18px);
    z-index: -1;
    isolation: isolate;
    mix-blend-mode: normal;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    /* Create a transparent hole in the center so it doesn't intersect with the front text */
}

@media (max-width: 768px) {
    .not-found-bg {
        transform: translate(-50%, -50%) rotate(-90deg) scale(3, 4) !important;
        filter: blur(6px) !important;


        /* Adjust hole for rotated aspect */
    }
}

.not-found-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    text-align: center;
    position: fixed;
    inset: 0;
    color: var(--text-color);
    transition: color var(--theme-transition);
    pointer-events: none;
}

.not-found-sub {
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.1rem;
    color: var(--text-color);
    text-decoration: none;
    transition: opacity var(--theme-transition), color var(--theme-transition);
    pointer-events: auto;
}

a.not-found-sub:hover {
    opacity: 0.6;
}

.not-found-title {
    font-family: "Inter", sans-serif;
    font-size: 15cqw;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--text-color);
    transition: color var(--theme-transition);
    line-height: 1;
    margin: 0;
}

@media (max-width: 768px) {
    .not-found-bg {
        transform: translate(-50%, -50%) scale(1.3, 4);

    }

    .not-found-title {
        font-size: 25vw;
    }

    .not-found-sub {
        font-size: 0.95rem;
    }
}

/* --- ARTIST PAGE EXTENSIONS --- */
.artist-bottom-section {
    width: 100%;
    height: 50dvh;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 1.5rem;
    transition: border-color var(--theme-transition);
    box-sizing: border-box;
    align-items: flex-start;
    margin-top: auto;
}

.heading-style-h1.is-artist {
    font-size: clamp(3rem, 12vw, 8rem);
    transform: scale(1) !important;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
    line-height: 0.8;
    padding: 0;
    margin: 0;
    transform: none;
    filter: none;
    -webkit-text-stroke-width: 0;
}

.text-size-regular.is-artist-desc {
    max-width: 900px;
}

/* --- PRELOADER --- */
#loader-wrapper {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: #000;
    color: #fff;
    z-index: 999999;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem;
    box-sizing: border-box;
}



@media (max-width: 768px) {
    #loader-wrapper {
        justify-content: center;
        text-align: left;
        /* Mantener la estética cuadriculada */
        padding: 0.75rem;
    }
}

.loader-text-container {
    width: 50%;
    max-width: 550px;
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(15px, 1.2vw, 15px);
    line-height: 1.5;
    text-transform: uppercase;
    /* Hidden until initLoader() (index.html) clears and rebuilds this as
       individually-animated word spans — otherwise the raw paragraph text
       is fully visible for a moment first, then blanks out and fades back
       in word-by-word, which reads as a flicker. */
    opacity: 0;
}

@media (max-width: 768px) {
    .loader-text-container {
        width: 100%;
        max-width: 100%;
    }
}

.loader-word {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
    margin-right: -0.1em;
    padding-right: 0.3em;
    will-change: filter, opacity;
}

#loader-cursor .cursor-mask {
    background: #fff;
    color: #000;
}

@media (max-width: 768px) {
    #loader-cursor {
        top: 1.5rem !important;
        right: 0.75rem !important;
        left: auto !important;
        transform: none !important;
        pointer-events: auto;
        /* Let the user tap it */
    }
}

/* --- ABOUT HIGHLIGHT BLOCKS --- */
.about-block {
    margin-bottom: 0rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 1rem 0 0.5rem 0;
    transition: border-color var(--theme-transition);
    box-sizing: border-box;
}

.about-block .text-style-label {
    margin-bottom: 0.2rem;
}

.text-center {
    text-align: center;
    text-align-last: center;
}

/* Cube container visibility */
#cube-container {
    visibility: hidden;
}

/* Password Page Styles */
.password-page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Sync with .section_hero padding from style.css */
    padding: .75rem .75rem 4% .75rem;
    width: 100%;
    height: 100dvh;
    box-sizing: border-box;
    position: relative;
}

/* Typography Hierarchy matches the site */
.launch-info {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.95rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    opacity: 0.8;
    transition: color var(--theme-transition);
}

.section_hero-title-password {
    font-family: "Inter", sans-serif;
    font-size: clamp(3rem, 15vw, 15rem);
    font-weight: 950;
    letter-spacing: -0.07em;
    line-height: 0.8;
    margin-bottom: clamp(.5rem, 5vw, .5rem);
       margin-top: clamp(.5rem, 5vw, .5rem);
    text-transform: uppercase;
    color: var(--text-color);
    width: 100%;
    /* Identical style from main section_hero */
    filter: blur(0.5px);
    -webkit-text-stroke-width: 0.04em;
    -webkit-text-stroke-color: var(--text-color);
    transform: scale(1.1);
    will-change: filter, transform;
    user-select: none;
    transition: color var(--theme-transition), -webkit-text-stroke-color var(--theme-transition);
}

/* Form Layout */
.password-form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    width: min(90%, 500px);
    margin-top: 1rem;
     margin-bottom: 1rem;

}

.input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
}

.password-field {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-right: 3rem;
    background-color: transparent;
    border: 1px solid var(--border-color);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    border-radius: 0;
    box-sizing: border-box;
    outline: none;
    color: var(--text-color);
    transition: border-color var(--theme-transition), color var(--theme-transition);
}

.toggle-password-v {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.6;
    color: var(--text-color);
    transition: opacity var(--theme-transition), color var(--theme-transition);
}

.toggle-password-v:hover {
    opacity: 1;
}

.enter-button {
    background-color: transparent;
    border: 1px solid var(--border-color);
    padding: 0 1.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    color: var(--text-color);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--theme-transition),
        color var(--theme-transition),
        border-color var(--theme-transition),
        opacity var(--theme-transition);
}

.enter-button:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

/* Responsive Mobile Layout */
@media (max-width: 768px) {
    .section_hero-title-password {
        margin-bottom: clamp(1rem, 4vw, 2.5rem);
    }
}

@media (max-width: 400px) {
    .password-form {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .input-wrapper {
        width: 100%;
    }

    .enter-button {
        width: auto;
        padding: 0.9rem 1rem;
        height: auto;
    }
}