* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: fuente;
    color: var(--text-color-default);
    max-width: 100%;
}

:root {
    /* ======================== Background ======================== */
    /* Color de texto por defecto para toda la web. */
    --text-color-default: #F4DDB4;
    /* Color del rectangulo detras del logo (mismo tono que el fondo base). */
    --bg-color: #11102D;
    /* Velocidad de la capa mas lejana (menor valor = movimiento mas lento). */
    --parallax-speed-layer-1: 0.02;
    /* Velocidad de la segunda capa de parallax. */
    --parallax-speed-layer-2: 0.06;
    /* Velocidad de la tercera capa de parallax. */
    --parallax-speed-layer-3: 0.12;
    /* Velocidad de la capa mas cercana. */
    --parallax-speed-layer-4: 0.08;
    /* Velocidad horizontal en X de la capa 1 (px/seg, puede ser negativa para invertir direccion). */
    --parallax-x-speed-layer-1: 0;
    /* Velocidad horizontal en X de la capa 2 (px/seg, puede ser negativa para invertir direccion). */
    --parallax-x-speed-layer-2: 0;
    /* Velocidad horizontal en X de la capa 3 (px/seg, puede ser negativa para invertir direccion). */
    --parallax-x-speed-layer-3: 0;
    /* Velocidad horizontal en X de la capa 4 (px/seg, puede ser negativa para invertir direccion). */
    --parallax-x-speed-layer-4: 0;


    /* ======================== Navigation ======================== */
    /* Altura total de la barra de navegacion superior. */
    --nav-height: 50px;
    /* Padding lateral interno de la barra de navegacion. */
    --nav-padding-inline: clamp(16px, 5vw, 56px);
    /* Espacio horizontal entre botones de navegacion. */
    --nav-link-gap: clamp(1px, 1.4vw, 1px);
    /* Espacio horizontal entre botones de navegacion (grupo izquierdo). */
    --nav-links-gap: var(--nav-link-gap);
    /* Espacio horizontal entre iconos sociales (grupo derecho). */
    --nav-social-gap: clamp(10px, 1.4vw, 14px);
    /* Tamaño de fuente de los botones de navegacion. */
    --nav-link-font-size: clamp(13px, 1vw, 16px);
    /* Fuente de los botones de navegacion (HOME/GAMES/ABOUT/CONTACT). */
    --nav-link-font-family: "futura-pt", sans-serif;
    /* Estilo tipografico (mode) de botones de navegacion: normal, oblique, italic, etc. */
    --nav-link-font-style: oblique;
    /* Peso tipografico de botones de navegacion. */
    --nav-link-font-weight: 300;
    /* Tamaño de los iconos sociales de la barra de navegacion. */
    --nav-social-icon-size: 24px;
    /* Tamaño del boton social (area clickable cuadrada). */
    --nav-social-button-size: 30px;
    /* Grosor del outline de los botones de navegacion en estado normal. */
    --nav-link-outline-width: 2px;
    /* Color del outline de los botones de navegacion en estado normal. */
    --nav-link-outline-color: transparent;
    /* Color de fondo de la barra de navegacion. */
    --nav-bg: #11102de6;
    /* Borde inferior de la barra de navegacion. */
    --nav-border-color: #f4ddb400;
    /* Color del rectangulo de hover en botones de navegacion. */
    --nav-link-hover-fill-color: #da5700;
    /* Color del texto en hover de botones de navegacion. */
    --nav-link-hover-text-color: var(--text-color-default);
    /* Grosor del outline en hover de botones de navegacion. */
    --nav-link-hover-outline-width: 2px;
    /* Color del outline en hover de botones de navegacion. */
    --nav-link-hover-outline-color: var(--text-color-default);
    /* Link de YouTube para icono de navbar (editar entre comillas). */
    --nav-youtube-url: "https://youtube.com/@neptosmic";
    /* Link de Discord para icono de navbar (editar entre comillas). */
    --nav-discord-url: "https://discord.gg/vv5xWMHyhX";
    /* Link de Twitch para icono de navbar (editar entre comillas). */
    --nav-twitch-url: "https://twitch.tv/fran747";
    /* Link de contacto por mail para icono de navbar (editar entre comillas). */
    --nav-contact-url: "mailto:contact@neptosmic.com";
    /* Color normal de los botones sociales de icono en navbar. */
    --nav-social-color: #2448FC;
    /* Color hover de los botones sociales de icono en navbar. */
    --nav-social-hover-color: var(--text-color-default);
    /* Offset extra en Y para HOME cuando navega al centro de su seccion. */
    --nav-target-home-offset-y: 0;
    /* Offset extra en Y para GAMES cuando navega al centro de su seccion. */
    --nav-target-games-offset-y: -10;
    /* Offset extra en Y para ABOUT cuando navega al centro de su seccion. */
    --nav-target-about-offset-y: 0;
    /* Offset extra en Y para CONTACT cuando navega al centro de su seccion. */
    --nav-target-contact-offset-y: 0;
    /* Offset para anclas, evita que el header de seccion quede tapado por la barra fija. */
    --nav-scroll-offset: calc(var(--nav-height) + 20px);

    /* ======================== Main (Logo) ======================== */
    /* Ancho del logo principal (alto automatico para mantener proporcion). */
    --hero-logo-width: min(78vw, 600px);
    /* Espacio interno vertical del rectangulo del logo. */
    --hero-logo-frame-padding-y: clamp(8px, 1.4vw, 18px);
    /* Espacio interno horizontal del rectangulo del logo. */
    --hero-logo-frame-padding-x: clamp(14px, 2.2vw, 34px);
    /* Redondeo de bordes del rectangulo del logo. */
    --hero-logo-frame-radius: 0px;
    /* Separacion superior del bloque de logo respecto al inicio del main. */
    --hero-logo-space-top: clamp(300px, 3vh, 500px);
    /* Separacion inferior del bloque de logo respecto a la seccion Games. */
    --hero-logo-space-bottom: clamp(400px, 6vh, 500px);
    /* Distancia vertical entre el logo y el texto secundario debajo del logo. */
    --hero-tagline-spacing-top: clamp(10px, 1.6vh, 24px);
    /* Contenido del texto secundario debajo del logo (editar entre comillas). */
    --hero-tagline-text: "MAKING GAMES IN THE UNIVERSE.";
    /* Tamaño del texto "MAKING GAMES IN THE UNIVERSE". */
    --hero-tagline-size: clamp(30px, 1.25vw, 30px);
    /* Familia tipografica del texto secundario (Futura PT Light). */
    --hero-tagline-font-family: "futura-pt", sans-serif;
    /* Peso del texto secundario (Light). */
    --hero-tagline-font-weight: 300;
    /* Estilo del texto secundario (Oblique). */
    --hero-tagline-font-style: oblique;
    /* Posicion Y inicial del tagline cuando el scroll esta en 0 (mas alto/mas bajo respecto a su eje base). */
    --hero-tagline-min-pos-y: 155px;
    /* Posicion Y objetivo del tagline cuando llega al final de la animacion por scroll. */
    --hero-tagline-max-pos-y: 175px;
    /* Cantidad de scroll (en px) necesaria para ir desde estado inicial hasta estado objetivo del tagline. */
    --hero-tagline-scroll-delta: 250;

    /* ======================== Sections - General Settings ======================== */
    /* Padding lateral del contenedor de la seccion Games. */
    --section-padding-inline: clamp(200px, 7vw, 120px);
    /* Ancho maximo general para las secciones (Games/About/Contact). */
    --section-width: min(100%, 1700px);
    /* Color de fondo de la seccion Games. */
    --games-section-bg: transparent;
    /* Color de fondo de la seccion About. */
    --about-section-bg: transparent;
    /* Color de fondo de la seccion Contact. */
    --contact-section-bg: transparent;
    /* Familia tipografica de los headers de seccion (GAMES/ABOUT/CONTACT). */
    --section-title-font-family: "futura-pt-condensed", sans-serif;
    /* Estilo tipografico (mode) de los headers de seccion: normal, oblique, italic, etc. */
    --section-title-font-style: oblique;
    /* Grosor (peso) tipografico de los headers de seccion. */
    --section-title-font-weight: 1000;
    /* Distancia entre caracteres de los headers de seccion. */
    --section-title-letter-spacing: 0.01em;
    /* Tamaño minimo del titulo GAMES. */
    --section-title-size-min: 20px;
    /* Escala fluida del titulo GAMES segun ancho de pantalla. */
    --section-title-size-fluid: 5vw;
    /* Tamaño maximo del titulo GAMES. */
    --section-title-size-max: 70px;
    /* Color de relleno del rectangulo de fondo de los headers de seccion. */
    --section-title-fill-color: #da5700;
    /* Color del contorno (outline) del rectangulo de headers de seccion. */
    --section-title-outline-color: #f4ddb4;
    /* Grosor del contorno (outline) del rectangulo de headers de seccion. */
    --section-title-outline-width: 7px;
    /* Offset horizontal de la sombra de headers de seccion (sin blur). */
    --section-title-shadow-offset-x: 10px;
    /* Offset vertical de la sombra de headers de seccion (sin blur). */
    --section-title-shadow-offset-y: 10px;
    /* Color de la sombra de headers de seccion. */
    --section-title-shadow-color: #0000008a;

    /* ======================== Games Section ======================== */
    /* Texto del header de la seccion Games. */
    --games-header-text: "OUR GAMES";
    /* Altura vertical del bloque completo de la seccion Games. */
    --games-section-height: 800px;
    /* Alto reservado para el header de Games dentro de la misma seccion. */
    --games-title-block-height: clamp(64px, 10vh, 110px);
    /* Espacio vertical entre el header de Games y el carrusel. */
    --games-carousel-spacing-top: 26px;
    /* Altura visual del carrusel:
       se calcula en base al alto de Games menos header + spacing. */
    --games-carousel-height: max(180px, calc(var(--games-section-height) - var(--games-title-block-height) - var(--games-carousel-spacing-top)));
    /* Color del contenedor del carrusel. */
    --games-carousel-bg: var(--bg-color);
    /* Color del borde del contenedor del carrusel. */
    --games-carousel-border-color: #f4ddb4;
    /* Grosor del borde del contenedor del carrusel. */
    --games-carousel-border-width: 4px;
    /* Redondeo de borde del contenedor del carrusel. */
    --games-carousel-border-roundness: 0px;
    /* Color de fondo de botones (< >) y dots del carrusel. */
    --games-carousel-ui-bg: #da5700;
    /* Color de texto/icono de botones (< >). */
    --games-carousel-ui-fg: #f4ddb4;
    /* Color de fondo de botones < > del carrusel. */
    --games-carousel-nav-bg: var(--bg-color);
    /* Color del borde de botones < > del carrusel. */
    --games-carousel-nav-border-color: var(--games-carousel-border-color);
    /* Grosor del borde de botones < > del carrusel. */
    --games-carousel-nav-border-width: 4px;
    /* Tamaño del icono < > dentro de botones del carrusel. */
    --games-carousel-nav-icon-size: 34px;
    /* Fondo del slide 1 de Games. */
    --games-slide-1-bg: var(--bg-color);
    /* Fondo del slide 2 de Games. */
    --games-slide-2-bg: var(--bg-color);
    /* Fondo del slide 3 de Games. */
    --games-slide-3-bg: var(--bg-color);
    /* Texto del titulo del slide 1 (editar entre comillas). */
    --games-slide-1-title-text: "HOLA INVADERS";
    /* Fuente del titulo del slide 1. */
    --games-slide-1-title-font-family: "futura-pt-condensed", sans-serif;
    /* Estilo tipografico (mode) del titulo del slide 1: normal, oblique, italic, etc. */
    --games-slide-1-title-font-style: oblique;
    /* Tamaño del titulo del slide 1. */
    --games-slide-1-title-font-size: clamp(24px, 4vw, 54px);
    /* Peso del titulo del slide 1. */
    --games-slide-1-title-font-weight: 800;
    /* Color del titulo del slide 1. */
    --games-slide-1-title-color: #f4ddb4;
    /* Posicion X del titulo del slide 1. */
    --games-slide-1-title-pos-x: 40px;
    /* Posicion Y del titulo del slide 1. */
    --games-slide-1-title-pos-y: 26px;
    /* Texto del subtexto del slide 1 (editar entre comillas). */
    --games-slide-1-subtitle-text: "A mobile game developed in collaboration with Mani Entertainment, based on the well-known brand Cuadradito y Circulito. Available now on Android & iOS.";
    /* Fuente del subtexto del slide 1. */
    --games-slide-1-subtitle-font-family: "futura-pt", sans-serif;
    /* Estilo tipografico (mode) del subtexto del slide 1: normal, oblique, italic, etc. */
    --games-slide-1-subtitle-font-style: normal;
    /* Tamaño del subtexto del slide 1. */
    --games-slide-1-subtitle-font-size: clamp(16px, 1.4vw, 18px);
    /* Peso del subtexto del slide 1. */
    --games-slide-1-subtitle-font-weight: 0;
    /* Color del subtexto del slide 1. */
    --games-slide-1-subtitle-color: #f4ddb4;
    /* Posicion X del subtexto del slide 1. */
    --games-slide-1-subtitle-pos-x: 40px;
    /* Posicion Y del subtexto del slide 1. */
    --games-slide-1-subtitle-pos-y: 92px;
    /* URL del video del slide 1 (formato embed de YouTube). */
    --games-slide-1-video-url: "https://www.youtube.com/embed/_3IV0Kr-jx4";
    /* Posicion X del video del slide 1. */
    --games-slide-1-video-pos-x: 40px;
    /* Posicion Y del video del slide 1. */
    --games-slide-1-video-pos-y: 120px;
    /* Ancho del video del slide 1. */
    --games-slide-1-video-width: min(100%, 1000px);
    /* Alto del video del slide 1. */
    --games-slide-1-video-height: min(100%, 1000px);
    /* Texto del titulo del slide 2 (editar entre comillas). */
    --games-slide-2-title-text: "VOYAGER";
    /* Fuente del titulo del slide 2. */
    --games-slide-2-title-font-family: "futura-pt-condensed", sans-serif;
    /* Estilo tipografico (mode) del titulo del slide 2: normal, oblique, italic, etc. */
    --games-slide-2-title-font-style: oblique;
    /* Tamaño del titulo del slide 2. */
    --games-slide-2-title-font-size: clamp(24px, 4vw, 54px);
    /* Peso del titulo del slide 2. */
    --games-slide-2-title-font-weight: 1000;
    /* Color del titulo del slide 2. */
    --games-slide-2-title-color: #f4ddb4;
    /* Posicion X del titulo del slide 2. */
    --games-slide-2-title-pos-x: 40px;
    /* Posicion Y del titulo del slide 2. */
    --games-slide-2-title-pos-y: 26px;
    /* Texto del subtexto del slide 2 (editar entre comillas). */
    --games-slide-2-subtitle-text: "A 2D pixel art procedural space exploration game, in development since 2022. Actively developed live on Twitch & Youtube.";
    /* Fuente del subtexto del slide 2. */
    --games-slide-2-subtitle-font-family: "futura-pt", sans-serif;
    /* Estilo tipografico (mode) del subtexto del slide 2: normal, oblique, italic, etc. */
    --games-slide-2-subtitle-font-style: normal;
    /* Tamaño del subtexto del slide 2. */
    --games-slide-2-subtitle-font-size: clamp(16px, 1.4vw, 18px);
    /* Peso del subtexto del slide 2. */
    --games-slide-2-subtitle-font-weight: 0;
    /* Color del subtexto del slide 2. */
    --games-slide-2-subtitle-color: #f4ddb4;
    /* Posicion X del subtexto del slide 2. */
    --games-slide-2-subtitle-pos-x: 40px;
    /* Posicion Y del subtexto del slide 2. */
    --games-slide-2-subtitle-pos-y: 92px;
    /* URL de imagen base del slide 2 (visible mientras carga el GIF). */
    --games-slide-2-placeholder-url: "./Media/Images/Games/Voyager/voyager - planet mockup.png";
    /* URL del GIF del slide 2. */
    --games-slide-2-gif-url: "./Media/Images/Games/Voyager/voyager (11-4-25) - landscape 3.gif";
    /* Posicion X del bloque media del slide 2. */
    --games-slide-2-media-pos-x: 40px;
    /* Posicion Y del bloque media del slide 2. */
    --games-slide-2-media-pos-y: 140px;
    /* Ancho del bloque media del slide 2. */
    --games-slide-2-media-width: min(100%, 1000px);
    /* Alto del bloque media del slide 2. */
    --games-slide-2-media-height: min(100%, 1000px);
    /* Modo de ajuste de imagen/GIF del slide 2 (cover/contain/fill). */
    --games-slide-2-media-fit: cover;

    /* ======================== About Section ======================== */
    /* Texto del header de la seccion About. */
    --about-header-text: "A SMALL STUDIO IN A BIG UNIVERSE";
    /* Altura vertical del bloque completo de la seccion About. */
    --about-section-height: 700px;
    /* Color del rectangulo de fondo de About (igual al fondo de navbar). */
    --about-panel-bg: var(--nav-bg);
    /* Intensidad de blur del fondo detras del panel About. */
    --about-panel-backdrop-blur: 6px;
    /* Redondeo del rectangulo de fondo de About. */
    --about-panel-radius: 0px;
    /* Espacio vertical entre el header de About y el contenido interno. */
    --about-content-spacing-top: 100px;
    /* Espacio vertical inferior del bloque de contenido de About. */
    --about-content-spacing-bottom: 0px;
    /* Ancho maximo del bloque de contenido de About. */
    --about-content-max-width: min(100%, 1100px);
    /* Texto de la catch phrase de About (editar entre comillas). */
    --about-catchphrase-text: "WE CREATE WORLDS YOU CAN PLAY.";
    /* Fuente de la catch phrase de About. */
    --about-catchphrase-font-family: "futura-pt-condensed", sans-serif;
    /* Estilo tipografico (mode) de la catch phrase de About: normal, oblique, italic, etc. */
    --about-catchphrase-font-style: oblique;
    /* Peso de la catch phrase de About. */
    --about-catchphrase-font-weight: 700;
    /* Tamaño de la catch phrase de About. */
    --about-catchphrase-font-size: clamp(22px, 2.4vw, 44px);
    /* Color de la catch phrase de About. */
    --about-catchphrase-color: #f4ddb4;
    /* Espacio vertical entre catch phrase y texto corrido de About. */
    --about-description-spacing-top: 14px;
    /* Texto corrido de About (editar entre comillas). */
    --about-description-text: "\n\nNeptosmic was born from a drive to explore ideas and create meaningful experiences through games.\n\n Today, it stands as an independent studio focused on building worlds that players can step into and connect with. The goal is to go beyond simple mechanics and craft experiences that feel immersive, intentional, and memorable.\n\n Each project is designed to leave something behind. To inspire, to resonate, and to stay with the player even after the game ends.";
    /* Fuente del texto corrido de About. */
    --about-description-font-family: "futura-pt", sans-serif;
    /* Estilo tipografico (mode) del texto corrido de About: normal, oblique, italic, etc. */
    --about-description-font-style: normal;
    /* Peso del texto corrido de About. */
    --about-description-font-weight: 400;
    /* Tamaño del texto corrido de About. */
    --about-description-font-size: clamp(15px, 1.3vw, 22px);
    /* Color del texto corrido de About. */
    --about-description-color: #f4ddb4;
    /* Alto de linea del texto corrido de About. */
    --about-description-line-height: 1.5;

    /* ======================== Contact Section ======================== */
    /* Texto del header de la seccion Contact. */
    --contact-header-text: "CONTACT US!";
    /* Color del rectangulo de fondo de Contact (igual al fondo de navbar). */
    --contact-panel-bg: var(--nav-bg);
    /* Intensidad de blur del fondo detras del panel Contact. */
    --contact-panel-backdrop-blur: 6px;
    /* Redondeo del rectangulo de fondo de Contact. */
    --contact-panel-radius: 0px;
    /* Espacio vertical entre el header de Contact y el contenido interno. */
    --contact-content-spacing-top: 60px;
    /* Ancho maximo del bloque de contenido de Contact. */
    --contact-content-max-width: min(100%, 1100px);
    /* Texto del header mediano de Contact (editar entre comillas). */
    --contact-catchphrase-text: "GET IN TOUCH";
    /* Fuente del header mediano de Contact. */
    --contact-catchphrase-font-family: "futura-pt-condensed", sans-serif;
    /* Estilo tipografico (mode) del header mediano de Contact: normal, oblique, italic, etc. */
    --contact-catchphrase-font-style: oblique;
    /* Peso del header mediano de Contact. */
    --contact-catchphrase-font-weight: 700;
    /* Tamaño del header mediano de Contact. */
    --contact-catchphrase-font-size: clamp(22px, 2.4vw, 44px);
    /* Color del header mediano de Contact. */
    --contact-catchphrase-color: #f4ddb4;
    /* Espacio vertical entre catch phrase y subtexto de Contact. */
    --contact-description-spacing-top: 14px;
    /* Texto corrido de Contact (editar entre comillas, acepta \n para saltos). */
    --contact-description-text: "Have a question, a proposal, or just want to reach out?\n\nWe’re always open to new ideas, collaborations, and conversations.";
    /* Fuente del subtexto de Contact. */
    --contact-description-font-family: "futura-pt", sans-serif;
    /* Estilo tipografico (mode) del subtexto de Contact: normal, oblique, italic, etc. */
    --contact-description-font-style: normal;
    /* Peso del subtexto de Contact. */
    --contact-description-font-weight: 400;
    /* Tamaño del subtexto de Contact. */
    --contact-description-font-size: clamp(15px, 1.3vw, 22px);
    /* Color del subtexto de Contact. */
    --contact-description-color: #f4ddb4;
    /* Alto de linea del subtexto de Contact. */
    --contact-description-line-height: 1.5;
    /* Espacio vertical entre subtexto y email de Contact. */
    --contact-email-spacing-top: 18px;
    /* Texto del email en Contact (editar entre comillas). */
    --contact-email-text: "contact@neptosmic.com";
    /* Link mailto del email de Contact (editar entre comillas). */
    --contact-email-url: "mailto:contact@neptosmic.com";
    /* Fuente del email de Contact. */
    --contact-email-font-family: "futura-pt", sans-serif;
    /* Estilo tipografico (mode) del email de Contact: normal, oblique, italic, etc. */
    --contact-email-font-style: normal;
    /* Peso del email de Contact. */
    --contact-email-font-weight: 700;
    /* Tamaño del email de Contact. */
    --contact-email-font-size: clamp(16px, 1.45vw, 24px);
    /* Color del email de Contact. */
    --contact-email-color: #f4ddb4;
    /* Altura de la barra inferior final. */
    --bottom-bar-height: 70px;
    /* Tamaño del texto de la barra inferior final. */
    --bottom-bar-font-size: clamp(12px, 0.95vw, 16px);
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    /* Mismo fondo base que portfolio para mantener coherencia visual. */
    background-color: #11102D;

    /* Fuerza una pagina con 2 alturas de pantalla para esta etapa del rework. */
    min-height: 200vh;
    overflow-x: hidden;
    position: relative;
}

@font-face {
    font-family: fuente;
    src: url(Media/Fonts/voyager.ttf);
}

/* Tipografia global de headers:
   Futura PT Cond Extra Bold Oblique (via Typekit) para titulos del sitio. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "futura-pt-condensed", sans-serif;
    font-weight: 2000;
    font-style: oblique;
}

/* Contenedor de todo el contenido visible por encima del parallax. */
.page-content {
    position: relative;
    z-index: 10;
}

/* Capa base para el parallax:
   - `position: fixed` mantiene las capas en viewport.
   - `repeat` tilea las texturas en ambos ejes.
   - `will-change` ayuda a que la animacion por transform sea fluida. */
.parallax-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto;
    will-change: transform;
}

/* Layer 1 = mas lejana, se mueve mas lento. */
.parallax-layer-1 {
    background-image: url("./Media/Images/Site/Space Panel - layer 1.png");
}

/* Layer 2 = velocidad intermedia-baja. */
.parallax-layer-2 {
    background-image: url("./Media/Images/Site/Space Panel - layer 2.png");
}

/* Layer 3 = velocidad intermedia-alta. */
.parallax-layer-3 {
    background-image: url("./Media/Images/Site/Space Panel - layer 3.png");
}

/* Layer 4 = capa cercana, velocidad "normal" (1:1 con scroll). */
.parallax-layer-4 {
    background-image: url("./Media/Images/Site/Space Panel - layer 4.png");
}


/* Barra de navegacion fija arriba de todo. */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 40;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border-color);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
}

/* Contenedor interno de botones de navegacion. */
.top-nav-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: var(--nav-padding-inline);
}

/* Grupo izquierdo de links de seccion en navbar. */
.top-nav-links {
    display: flex;
    align-items: center;
    gap: var(--nav-links-gap);
}

/* Grupo derecho de iconos sociales en navbar. */
.top-nav-social {
    display: flex;
    align-items: center;
    gap: var(--nav-social-gap);
}

/* Botones de navegacion (anchors estilizados como botones). */
.top-nav-link {
    text-decoration: none;
    font-family: var(--nav-link-font-family);
    font-weight: var(--nav-link-font-weight);
    font-style: var(--nav-link-font-style);
    font-size: var(--nav-link-font-size);
    color: var(--text-color-default);
    letter-spacing: 0.05em;
    padding: 8px 14px;
    border: var(--nav-link-outline-width) solid var(--nav-link-outline-color);
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.top-nav-link:hover {
    color: var(--nav-link-hover-text-color);
    border: var(--nav-link-hover-outline-width) solid var(--nav-link-hover-outline-color);
    background-color: var(--nav-link-hover-fill-color);
    transform: translateY(-1px);
}

/* Botones sociales solo-icono en navbar. */
.top-nav-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-social-button-size);
    height: var(--nav-social-button-size);
    line-height: 0;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.top-nav-social-link:visited {
    color: inherit;
}

.top-nav-social-link:hover .top-nav-social-icon {
    transform: translateY(-4px);
}

/* SVG de iconos sociales (heredan color via currentColor). */
.top-nav-social-icon {
    width: var(--nav-social-icon-size);
    height: var(--nav-social-icon-size);
    color: var(--nav-social-color);
    fill: currentColor;
    display: block;
    transition: color 0.1s ease, transform 0.1s ease;
}

.top-nav-social-icon * {
    fill: var(--nav-social-color);
}

/* Todas las secciones destino de anclas respetan offset de la barra fija. */
.hero-intro,
.games-section,
.about-section,
.contact-section {
    scroll-margin-top: var(--nav-scroll-offset);
}

/* Centra su contenido en el viewport inicial. */
.main-stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 10;
    padding: 48px 24px 24px;
    gap: 44px;
}

/* Bloque de marca que agrupa logo + texto inferior.
   Sus margenes controlan separacion contra borde superior y seccion Games. */
.hero-intro {
    margin-top: var(--hero-logo-space-top);
    margin-bottom: var(--hero-logo-space-bottom);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Rectangulo que va detras del logo, como parte del mismo bloque visual.
   Puedes cambiar su tamaño ajustando paddings/radius en :root. */
.hero-logo-frame {
    background-color: var(--bg-color);
    padding: var(--hero-logo-frame-padding-y) var(--hero-logo-frame-padding-x);
    border-radius: var(--hero-logo-frame-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Logo responsive:
   - Tamaño controlado por variable CSS.
   - `height: auto` mantiene proporcion original. */
.hero-logo {
    width: var(--hero-logo-width);
    height: auto;
    max-width: 100%;
    display: block;
}

/* Texto debajo del logo.
   Se mantiene en mayusculas y con estilo Futura PT Light Oblique. */
.hero-tagline {
    margin-top: var(--hero-tagline-spacing-top);
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: var(--hero-tagline-size);
    font-family: var(--hero-tagline-font-family);
    font-weight: var(--hero-tagline-font-weight);
    font-style: var(--hero-tagline-font-style);
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-align: center;
    transform: translateY(var(--hero-tagline-min-pos-y));
    opacity: 0;
    will-change: transform, opacity;
}

/* Seccion de juegos:
   - Ocupa todo el ancho disponible del stage.
   - El padding horizontal se controla con variable para ajuste rapido. */
.games-section {
    width: var(--section-width);
    margin-inline: auto;
    padding-inline: var(--section-padding-inline);
    min-height: var(--games-section-height);
    background-color: var(--games-section-bg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Seccion About:
   por ahora replica el mismo layout base que Games. */
.about-section {
    width: var(--section-width);
    margin-inline: auto;
    padding-inline: var(--section-padding-inline);
    background-color: var(--about-panel-bg);
    backdrop-filter: blur(var(--about-panel-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--about-panel-backdrop-blur));
    border-radius: var(--about-panel-radius);
    min-height: var(--about-section-height);
}

/* Seccion Contact:
   por ahora replica el mismo layout base que Games/About. */
.contact-section {
    width: var(--section-width);
    margin-inline: auto;
    padding-inline: var(--section-padding-inline);
    background-color: var(--contact-panel-bg);
    backdrop-filter: blur(var(--contact-panel-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--contact-panel-backdrop-blur));
    border-radius: var(--contact-panel-radius);
}

/* Header de la seccion Games, alineado a la izquierda.
   Ahora usa rectangulo de fondo + outline + drop shadow (sin blur). */
.games-title {
    margin: 0;
    text-align: left;
    font-family: var(--section-title-font-family);
    font-style: var(--section-title-font-style);
    font-weight: var(--section-title-font-weight);
    font-size: clamp(var(--section-title-size-min), var(--section-title-size-fluid), var(--section-title-size-max));
    letter-spacing: var(--section-title-letter-spacing);
    color: var(--text-color-default);
    text-shadow: none;
    display: inline-block;
    min-height: var(--games-title-block-height);
    align-self: flex-start;
    padding: 2px 14px;
    background-color: var(--section-title-fill-color);
    border: var(--section-title-outline-width) solid var(--section-title-outline-color);
    box-shadow: var(--section-title-shadow-offset-x) var(--section-title-shadow-offset-y) 0 var(--section-title-shadow-color);
}

/* Carrusel principal de Games (bloque completo dentro de la seccion). */
.games-carousel {
    margin-top: var(--games-carousel-spacing-top);
    width: 100%;
    height: var(--games-carousel-height);
    min-height: var(--games-carousel-height);
    flex: 1 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
    gap: 16px;
    align-items: stretch;
}

/* Ventana visible del carrusel. */
.games-carousel-viewport {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: var(--games-carousel-border-width) solid var(--games-carousel-border-color);
    background: var(--games-carousel-bg);
    border-radius: var(--games-carousel-border-roundness);
    cursor: grab;
}

.games-carousel-viewport.is-dragging {
    cursor: grabbing;
}

/* Track horizontal que contiene los slides. */
.games-carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.25s ease;
    touch-action: pan-y;
    will-change: transform;
}

.games-carousel-track.is-no-transition {
    transition: none;
}

/* Cada slide ocupa el ancho completo del viewport. */
.games-slide {
    min-width: 100%;
    height: 100%;
    min-height: 0;
    flex: 0 0 100%;
    position: relative;
    overflow: hidden;
}

/* Contenedor interno para poder posicionar contenido dentro de cada slide. */
.games-slide-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Fondos configurables por variable para cada slide. */
.games-slide-1 {
    background: var(--games-slide-1-bg);
}

.games-slide-2 {
    background: var(--games-slide-2-bg);
}

.games-slide-3 {
    background: var(--games-slide-3-bg);
}

/* Titulo editable del slide 1. */
.games-slide-1-title {
    position: absolute;
    left: var(--games-slide-1-title-pos-x);
    top: var(--games-slide-1-title-pos-y);
    margin: 0;
    font-family: var(--games-slide-1-title-font-family);
    font-style: var(--games-slide-1-title-font-style);
    font-size: var(--games-slide-1-title-font-size);
    font-weight: var(--games-slide-1-title-font-weight);
    color: var(--games-slide-1-title-color);
    line-height: 1.1;
    text-transform: uppercase;
}

/* Subtexto editable del slide 1. */
.games-slide-1-subtitle {
    position: absolute;
    left: var(--games-slide-1-subtitle-pos-x);
    top: var(--games-slide-1-subtitle-pos-y);
    margin: 0;
    font-family: var(--games-slide-1-subtitle-font-family);
    font-style: var(--games-slide-1-subtitle-font-style);
    font-size: var(--games-slide-1-subtitle-font-size);
    font-weight: var(--games-slide-1-subtitle-font-weight);
    color: var(--games-slide-1-subtitle-color);
    max-width: calc(100% - var(--games-slide-1-subtitle-pos-x) - 20px);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

/* Caja posicionable del video embebido del slide 1. */
.games-slide-1-video-wrap {
    position: absolute;
    left: var(--games-slide-1-video-pos-x);
    top: var(--games-slide-1-video-pos-y);
    width: var(--games-slide-1-video-width);
    height: var(--games-slide-1-video-height);
    max-width: calc(100% - var(--games-slide-1-video-pos-x) - 20px);
    max-height: calc(100% - var(--games-slide-1-video-pos-y) - 20px);
}

.games-slide-1-video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Titulo editable del slide 2. */
.games-slide-2-title {
    position: absolute;
    left: var(--games-slide-2-title-pos-x);
    top: var(--games-slide-2-title-pos-y);
    margin: 0;
    font-family: var(--games-slide-2-title-font-family);
    font-style: var(--games-slide-2-title-font-style);
    font-size: var(--games-slide-2-title-font-size);
    font-weight: var(--games-slide-2-title-font-weight);
    color: var(--games-slide-2-title-color);
    line-height: 1.1;
    text-transform: uppercase;
}

/* Subtexto editable del slide 2. */
.games-slide-2-subtitle {
    position: absolute;
    left: var(--games-slide-2-subtitle-pos-x);
    top: var(--games-slide-2-subtitle-pos-y);
    margin: 0;
    font-family: var(--games-slide-2-subtitle-font-family);
    font-style: var(--games-slide-2-subtitle-font-style);
    font-size: var(--games-slide-2-subtitle-font-size);
    font-weight: var(--games-slide-2-subtitle-font-weight);
    color: var(--games-slide-2-subtitle-color);
    max-width: calc(100% - var(--games-slide-2-subtitle-pos-x) - 20px);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

/* Caja posicionable de media del slide 2 (placeholder + GIF encima). */
.games-slide-2-media-wrap {
    position: absolute;
    left: var(--games-slide-2-media-pos-x);
    top: var(--games-slide-2-media-pos-y);
    width: var(--games-slide-2-media-width);
    height: var(--games-slide-2-media-height);
    max-width: calc(100% - var(--games-slide-2-media-pos-x) - 20px);
    max-height: calc(100% - var(--games-slide-2-media-pos-y) - 20px);
    overflow: hidden;
}

/* Ambas capas usan exactamente el mismo tamaño para intercambio seamless. */
.games-slide-2-placeholder,
.games-slide-2-gif {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--games-slide-2-media-fit);
}

/* Estado inicial: se ve placeholder, el GIF queda oculto hasta cargar. */
.games-slide-2-placeholder {
    opacity: 1;
}

.games-slide-2-gif {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Al cargar el GIF, hace fade-in y reemplaza visualmente al placeholder. */
.games-slide-2-media-wrap.is-gif-ready .games-slide-2-gif {
    opacity: 1;
}

/* Botones laterales de navegacion (< >). */
.games-carousel-nav {
    width: 44px;
    height: 44px;
    border: var(--games-carousel-nav-border-width) solid var(--games-carousel-nav-border-color);
    background: var(--games-carousel-nav-bg);
    color: var(--games-carousel-ui-fg);
    font-size: var(--games-carousel-nav-icon-size);
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.games-carousel-nav:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.games-carousel-prev {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.games-carousel-next {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}

/* Dots inferiores para mostrar slide activo y navegar por indice. */
.games-carousel-dots {
    grid-column: 1 / 4;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.games-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--games-carousel-border-color);
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.games-carousel-dot.is-active {
    background: var(--games-carousel-ui-bg);
    transform: scale(1.08);
}

@media screen and (max-width: 768px) {
    .games-carousel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .games-carousel-prev,
    .games-carousel-next {
        display: none;
    }

    .games-carousel-viewport {
        grid-column: 1;
        grid-row: 2;
    }

    .games-carousel-dots {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Header de About con el mismo estilo visual que Games. */
.about-title {
    margin: 0;
    text-align: left;
    font-family: var(--section-title-font-family);
    font-style: var(--section-title-font-style);
    font-weight: var(--section-title-font-weight);
    font-size: clamp(var(--section-title-size-min), var(--section-title-size-fluid), var(--section-title-size-max));
    letter-spacing: var(--section-title-letter-spacing);
    color: var(--text-color-default);
    text-shadow: none;
    display: inline-block;
    padding: 2px 14px;
    background-color: var(--section-title-fill-color);
    border: var(--section-title-outline-width) solid var(--section-title-outline-color);
    box-shadow: var(--section-title-shadow-offset-x) var(--section-title-shadow-offset-y) 0 var(--section-title-shadow-color);
}

/* Contenido descriptivo de la seccion About. */
.about-content {
    margin-top: var(--about-content-spacing-top);
    margin-bottom: var(--about-content-spacing-bottom);
    width: 100%;
    max-width: var(--about-content-max-width);
}

/* Header mediano tipo catch phrase en About. */
.about-catchphrase {
    margin: 0;
    font-family: var(--about-catchphrase-font-family);
    font-style: var(--about-catchphrase-font-style);
    font-weight: var(--about-catchphrase-font-weight);
    font-size: var(--about-catchphrase-font-size);
    color: var(--about-catchphrase-color);
    line-height: 1.15;
    text-wrap: balance;
}

/* Texto corrido de presentacion en About. */
.about-description {
    margin-top: var(--about-description-spacing-top);
    margin-bottom: 0;
    font-family: var(--about-description-font-family);
    font-style: var(--about-description-font-style);
    font-weight: var(--about-description-font-weight);
    font-size: var(--about-description-font-size);
    color: var(--about-description-color);
    line-height: var(--about-description-line-height);
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Header de Contact con el mismo estilo visual que Games/About. */
.contact-title {
    margin: 0;
    text-align: left;
    font-family: var(--section-title-font-family);
    font-style: var(--section-title-font-style);
    font-weight: var(--section-title-font-weight);
    font-size: clamp(var(--section-title-size-min), var(--section-title-size-fluid), var(--section-title-size-max));
    letter-spacing: var(--section-title-letter-spacing);
    color: var(--text-color-default);
    text-shadow: none;
    display: inline-block;
    padding: 2px 14px;
    background-color: var(--section-title-fill-color);
    border: var(--section-title-outline-width) solid var(--section-title-outline-color);
    box-shadow: var(--section-title-shadow-offset-x) var(--section-title-shadow-offset-y) 0 var(--section-title-shadow-color);
}

/* Contenido descriptivo de la seccion Contact. */
.contact-content {
    margin-top: var(--contact-content-spacing-top);
    width: 100%;
    max-width: var(--contact-content-max-width);
}

/* Header mediano de Contact. */
.contact-catchphrase {
    margin: 0;
    font-family: var(--contact-catchphrase-font-family);
    font-style: var(--contact-catchphrase-font-style);
    font-weight: var(--contact-catchphrase-font-weight);
    font-size: var(--contact-catchphrase-font-size);
    color: var(--contact-catchphrase-color);
    line-height: 1.15;
    text-wrap: balance;
}

/* Subtexto multilinea de Contact. */
.contact-description {
    margin-top: var(--contact-description-spacing-top);
    margin-bottom: 0;
    font-family: var(--contact-description-font-family);
    font-style: var(--contact-description-font-style);
    font-weight: var(--contact-description-font-weight);
    font-size: var(--contact-description-font-size);
    color: var(--contact-description-color);
    line-height: var(--contact-description-line-height);
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Link de email de Contact. */
.contact-email-link {
    display: inline-block;
    margin-top: var(--contact-email-spacing-top);
    font-family: var(--contact-email-font-family);
    font-style: var(--contact-email-font-style);
    font-weight: var(--contact-email-font-weight);
    font-size: var(--contact-email-font-size);
    color: var(--contact-email-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contact-email-link:visited {
    color: var(--contact-email-color);
}

/* Barra inferior final (no fija), colocada debajo de la ultima seccion. */
.bottom-bar {
    width: 100%;
    min-height: var(--bottom-bar-height);
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border-color);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    padding: 8px 16px;
}

.bottom-bar-text {
    margin: 0;
    font-family: "futura-pt", sans-serif;
    font-size: var(--bottom-bar-font-size);
    font-style: normal;
    font-weight: 400;
    color: var(--text-color-default);
    text-align: center;
    letter-spacing: 0.04em;
}

a {
    text-decoration: none;
}

.titulo {
    font-style: normal;
    font-size: 150px;
    margin-top: 20px;
    margin-bottom: -15px;
    color: #31fff1;
    text-align: center;

}

.fran747 {
    color: #00c2f6;
    margin-top: -10px;
    font-size: 70px;
}

.redes {
    width: 150px;
    margin: 30px;
    transform: scale(1);
    transition: 0.7s;
}

.redes:hover {
    /*filter:contrast(1.5);*/
    transform: scale(1.1);
    transition: 0.2s;
}

.redes_container {
    display: flex;
    justify-content: center;
}

.fondoRedes {
    background-color: rgba(0, 0, 0, 0.3);
}

.contacto {
    font-style: normal;
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.astronauta {
    width: 100px;
}

.contacto h2 {
    font-size: 100px;
    color: #fb3dbd;
}

.contacto p {

    color: #ff6dd6;
    font-size: 70px;
}

.gamesContainer {
    font-style: normal;
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 30px;
    font-size: 50px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
}

.gameTitle {
    padding-top: 20px;
    color: #ff7d06;
}

.bangGame {
    width: 180px;
    height: 140px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 10px;
}

.bangGame:hover {
    transform: scale(1.05);
    filter: brightness(1.3);
    transition: 0.3s;
}

@media screen and (max-width:1366px) {
    .contacto {
        margin-top: 25px;

    }

    .contacto p {
        font-size: 50px;
    }

    .redes_container {
        margin-top: 15px;
    }

    .titulo {
        margin-top: 30px;
        font-size: 90px;
    }

    .redes {
        width: 130px;
    }
}

@media screen and (max-width:768px) {
    .contacto {
        margin-top: 25px;

    }

    .contacto p {
        font-size: 50px;
    }

    .contacto h2 {
        font-size: 65px;

    }

    .redes_container {
        margin-top: 15px;
    }

    .titulo {
        margin-top: 30px;
        font-size: 70px;
    }

    .redes {
        width: 90px;
    }
}

@media screen and (max-width:425px) {
    .contacto {
        margin-top: 25px;

    }

    .contacto p {
        font-size: 50px;
    }

    .contacto h2 {
        font-size: 60px;

    }

    .redes_container {
        display: flex;
        margin: 0px;
        justify-content: space-between;
    }

    .titulo {
        max-width: 100%;
        margin-top: 30px;
        font-size: 70px;
    }

    .redes {
        width: 60px;
        margin: 30px;
    }

    .iconos_container {
        margin: 33px -15px 0px -15px;
    }
}

@media screen and (max-width:375px) {
    .contacto {
        margin-top: 25px;

    }

    .contacto p {
        font-size: 48px;
    }

    .contacto h2 {
        font-size: 50px;

    }

    .redes_container {
        display: flex;
        margin: 0px;
        justify-content: space-between;
    }

    .titulo {
        margin-top: 30px;
        margin-bottom: -10px;
        font-size: 50px;
        max-width: 100%;
    }

    .redes {
        width: 55px;
        margin: 30px;
    }

    .iconos_container {
        margin: 33px -15px 0px -15px;
    }
}

@media screen and (max-width:320px) {
    .contacto {
        margin-top: 25px;

    }

    .contacto p {
        font-size: 40px;
    }

    .contacto h2 {
        font-size: 40px;

    }

    .redes_container {
        display: flex;
        margin: 0px;
        justify-content: space-between;
    }

    .titulo {
        margin-top: 30px;
        font-size: 50px;
        max-width: 100%;
    }

    .redes {
        width: 45px;
        margin: 30px;
    }

    .iconos_container {
        max-width: 100%;
        margin: 33px -15px 0px -15px;
    }
}

.pepita {
    display: none;
    width: 2px;
    height: 1px;
}