/* ROOT */
:root{
    --Geminisgray:#f8f7f2;
    --GeminisgrayTransparent1:rgba(248, 247, 242, 0.21);
    --Geminisbeige: #f8f7f2;
    --Geminiscleangray: #8d8d8d;
    --Snow: #F2F5F9;
    --Ice: #A8D0E6;
    --nsrosa: #ff416c;
    --nsrojo:#ff4b2b;
    --Geminisbeige2:rgb(238, 238, 214);
}
:root {
    --color-white: #FFFFFF;
    --color-black: #0F0F0F;
    --color-accent: #FFF14E
}

:root {
    --font-size--200: .875rem;
    --font-size--300: 1.125rem;
    --font-size--400: 1.25rem;
    --font-size--500: 1.375rem;
    --font-size--600: 2rem;
    --font-size--700: 2.5rem;
    --font-size--l-200: 3.125rem;
    --font-size--l-300: 3.75rem;
    --font-size--l-400: 4.375rem;
    --font-size--l-500: 10rem;
    --font-size--l-600: 18.75rem;
    --line-height--100: .7;
    --line-height--200: .8;
    --line-height--300: 1;
    --line-height--400: 1.2
}

@media screen and (max-width: 1023px) {
    :root {
        --font-size--200: .875rem;
        --font-size--300: 1.125rem;
        --font-size--400: 1.25rem;
        --font-size--500: 1.375rem;
        --font-size--600: 2rem;
        --font-size--700: 2.5rem;
        --font-size--l-300: 3.125rem;
        --font-size--l-400: 3.75rem;
        --font-size--l-500: 6.25rem;
        --font-size--l-600: 9.375rem
    }
}

@media screen and (max-width: 767px) {
    :root {
        --font-size--200: .75rem;
        --font-size--300: 1rem;
        --font-size--400: 1.125rem;
        --font-size--500: 1.25rem;
        --font-size--600: 1.5rem;
        --font-size--700: 2rem;
        --font-size--l-300: 1.875rem;
        --font-size--l-400: 2.1875rem;
        --font-size--l-500: 4.375rem;
        --font-size--l-600: 5.625rem
    }
}

:root {
    --space-100: .625rem;
    --space-200: 1.25rem;
    --space-300: 1.875rem;
    --space-400: 3.125rem;
    --space-500: 3.75rem;
    --space-600: 4.375rem;
    --space-700: 6.25rem;
    --space-800: 8.75rem;
    --space-900: 10.625rem;
    --space-l-200: 12.5rem;
    --space-l-300: 15rem;
    --space-l-400: 16.875rem;
    --space-l-500: 18.75rem;
    --space-grid-gap: .625rem;
    --space-grid-padding: .625rem
}

@media only screen and (max-width: 1023px) {
    :root {
        --space-100: .625rem;
        --space-200: 1.25rem;
        --space-300: 1.875rem;
        --space-400: 3rem;
        --space-500: 3.5rem;
        --space-600: 4rem;
        --space-700: 5rem;
        --space-800: 6.25rem;
        --space-900: 7.5rem;
        --space-l-200: 8.75rem;
        --space-l-300: 10.625rem;
        --space-l-400: 12.5rem;
        --space-l-500: 15rem
    }
}

:root {
    --spring--heavy: "linear(0, 0.013 0.6%, 0.05 1.2%, 0.2 2.5%, 0.949 6.7%, 1.2 8.4%, 1.286 9.2%, 1.35 10%, 1.392 10.8%, 1.411 11.6%, 1.411 12.2%, 1.401 12.8%, 1.343 14.2%, 1.258 15.5%, 1.016 18.7%, 0.914 20.4%, 0.856 21.9%, 0.831 23.5%, 0.834 24.7%, 0.858 26.1%, 0.996 30.7%, 1.037 32.4%, 1.06 33.9%, 1.07 35.4%, 1.061 37.7%, 0.989 43.8%, 0.971 47.2%, 1.012 59.1%, 0.995 70.8%, 1)";
    --spring--bouncy: "linear(0, 0.066 0.5%, 0.246 1%, 1.456 3.2%, 1.63 3.8%, 1.673 4.3%, 1.625 4.8%, 1.5 5.3%, 0.687 7.5%, 0.586 8%, 0.547 8.5%, 0.57 9%, 0.647 9.5%, 1.214 11.8%, 1.281 12.3%, 1.305 12.8%, 1.288 13.3%, 1.235 13.8%, 0.853 16.1%, 0.81 16.6%, 0.795 17.1%, 0.807 17.6%, 0.844 18.1%, 1.093 20.3%, 1.129 20.9%, 1.138 21.4%, 1.129 21.9%, 1.104 22.4%, 0.936 24.6%, 0.915 25.1%, 0.907 25.6%, 0.927 26.6%, 1.044 28.9%, 1.063 29.9%, 1.048 30.9%, 0.97 33.2%, 0.958 34.2%, 0.968 35.2%, 1.019 37.4%, 1.028 38.5%, 0.981 42.7%, 1.013 47%, 0.991 51.3%, 1.006 55.6%, 0.996 59.8%, 1.003 64.1%, 1)";
    --spring--drop: "linear(0, 0.013 0.5%, 0.05 1%, 0.109 1.5%, 0.204 2.1%, 0.429 3.2%, 1.04 5.8%, 1.301 7.2%, 1.395 7.9%, 1.454 8.5%, 1.491 9.1%, 1.508 9.7%, 1.506 10.2%, 1.488 10.8%, 1.453 11.4%, 1.405 12%, 1.29 13.1%, 0.98 15.7%, 0.847 17.1%, 0.799 17.8%, 0.769 18.4%, 0.75 19%, 0.742 19.6%, 0.752 20.7%, 0.794 21.9%, 1.01 25.6%, 1.078 27%, 1.118 28.3%, 1.131 29.5%, 1.126 30.6%, 1.105 31.8%, 0.995 35.5%, 0.96 36.9%, 0.941 38.1%, 0.933 39.3%, 0.942 41.3%, 1.016 46.4%, 1.034 49.2%, 1.029 51.2%, 0.992 56.3%, 0.983 59%, 1.009 68.9%, 0.996 78.5%, 1.002 88.5%, 1)";
    --spring--glide: "linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1)";
    --spring--snap: "linear(0, 0.03 1.1%, 0.125 2.4%, 0.906 9.8%, 1.046 12.3%, 1.11 15%, 1.116 16.3%, 1.11 17.8%, 1.014 25.8%, 0.987 31.2%, 1.001 47.2%, 1)";
    --spring--lazy: "linear(0, 0.008 1.1%, 0.034 2.3%, 0.134 4.9%, 0.264 7.3%, 0.683 14.3%, 0.797 16.5%, 0.89 18.6%, 0.967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, 0.988 58.6%, 0.985 65.2%, 1 84.5%, 1)";
    --spring--elastic: "linear(0, 0.029 1.6%, 0.123 3.5%, 0.651 10.6%, 0.862 14.1%, 1.002 17.7%, 1.046 19.6%, 1.074 21.6%, 1.087 23.9%, 1.086 26.6%, 1.014 38.5%, 0.994 46.3%, 1)";
    --bounce--firm: "linear(0, 0.223 11.7%, 0.392 18.4%, 0.619 24.8%, 0.999 33.3%, 0.748 40%, 0.691 42.7%, 0.672 45.3%, 0.69 47.8%, 0.743 50.4%, 0.999 57.7%, 0.883 61.8%, 0.856 63.6%, 0.848 65.3%, 0.855 67%, 0.879 68.8%, 0.999 74.5%, 0.953 77.5%, 0.94 80.2%, 0.95 82.7%, 1 88.2%, 0.987 91.9%, 1)";
    --bounce--soft: "linear(0, 1 44.7%, 0.898 51.8%, 0.874 55.1%, 0.866 58.4%, 0.888 64.3%, 1 77.4%, 0.98 84.5%, 1)";
    --bounce--sharp: "linear(0, 0.532 20.8%, 1 37.8%, 0.877 44.2%, 0.847 47.2%, 0.838 50.1%, 0.846 52.8%, 0.869 55.6%, 1 65.5%, 0.965 69.4%, 0.954 73.1%, 0.961 76.5%, 1 84.5%, 0.992 89.3%, 1)";
    --bounce--subtle: "linear(0, 0.417 25.5%, 0.867 49.4%, 1 57.7%, 0.925 65.1%, 0.908 68.6%, 0.902 72.2%, 0.916 78.2%, 0.988 92.1%, 1)";
    --bounce--playful: "linear(0, 0.058 6%, 0.109 9.8%, 0.174 13%, 0.262 15.9%, 0.536 21.5%, 0.997 27.7%, 0.527 34.1%, 0.428 36.4%, 0.396 38.5%, 0.431 40.6%, 0.532 42.7%, 0.996 48%, 0.677 51.9%, 0.607 53.4%, 0.582 54.9%, 0.605 56.4%, 0.673 57.9%, 0.999 62%, 0.786 65%, 0.74 66.2%, 0.724 67.4%, 0.739 68.6%, 0.782 69.8%, 0.999 73.4%, 0.878 75.7%, 0.837 77.8%, 0.87 79.9%, 1 83.2%, 0.942 85.1%, 0.923 86.9%, 0.936 88.5%, 1 92%, 0.981 94.5%, 1)";
    --bounce--springy: "linear(0, 0 5.5%, 0.02 8.9%, 0.068 11.8%, 0.148 14.3%, 0.454 19.2%, 0.993 24.2%, 0.271 30.3%, 0.124 32.3%, 0.077 34.1%, 0.129 35.9%, 0.286 37.7%, 0.998 42%, 0.38 45.6%, 0.241 47%, 0.196 48.3%, 0.241 49.6%, 0.375 50.9%, 0.993 54.2%, 0.473 57.1%, 0.363 58.2%, 0.329 59.2%, 0.363 60.2%, 0.474 61.3%, 0.994 64.2%, 0.592 66.5%, 0.471 68.4%, 0.585 70.2%, 0.993 72.8%, 0.699 74.8%, 0.614 76.4%, 0.701 78.1%, 0.995 80.4%, 0.806 82.2%, 0.751 83.6%, 0.802 85.1%, 0.996 87.4%, 0.903 88.9%, 0.875 90.2%, 0.897 91.4%, 0.999 93.9%, 0.968 95.9%, 1)";
    --wiggle--subtle: "linear(0, 0.409 5.7%, 0.68 10.7%, 0.838 15.5%, 0.877 17.9%, 0.89 20.3%, 0.883 22.1%, 0.862 24%, 0.775 28.1%, 0.103 46.8%, -0.03 51.9%, -0.11 56.9%, -0.142 61.2%, -0.143 65.9%, -0.124 70.2%, -0.021 86%, -0.004 92.1%, 0)";
    --wiggle--energetic: "linear(0, 0.76 4.4%, 0.928 6.2%, 0.984 8%, 0.92 9.9%, 0.731 11.9%, -0.506 20.3%, -0.667 22.2%, -0.731 24%, -0.731 24.8%, -0.712 25.7%, -0.615 27.5%, 0.252 35.9%, 0.4 38.1%, 0.463 40.3%, 0.455 41.9%, 0.399 43.7%, -0.106 51.9%, -0.195 54.1%, -0.235 56.3%, -0.235 57.9%, -0.209 59.7%, 0.019 67.5%, 0.061 69.6%, 0.082 71.7%, 0.085 73.3%, 0.077 75.1%, 0.011 81.9%, -0.009 85.5%, 0)";
    --wiggle--playful: "linear(0, 0.739 6.1%, 0.912 8.8%, 0.954 10.1%, 0.967 11.4%, 0.954 12.7%, 0.916 14%, 0.751 16.9%, -0.304 29%, -0.446 31.8%, -0.511 34.5%, -0.517 35.7%, -0.509 37%, -0.455 39.6%, 0.035 51.2%, 0.126 54.4%, 0.171 57.5%, 0.178 59.9%, 0.164 62.5%, 0.025 72.8%, -0.017 78.2%, -0.023 82.8%, -0.004 93%, 0)";
    --wiggle--sharp: "linear(0, 0.432 3.9%, 0.723 7.4%, 0.893 10.8%, 0.935 12.5%, 0.948 14.2%, 0.938 15.7%, 0.907 17.3%, 0.774 20.8%, -0.095 35.9%, -0.221 39.5%, -0.289 43.1%, -0.305 46.3%, -0.282 49.8%, -0.049 63.6%, -0.004 67.3%, 0.022 70.9%, 0.033 77.2%, 0.005 90.7%, 0)";
    --wiggle--smooth: "linear(0, 0.329 8.6%, 0.541 16%, 0.615 19.6%, 0.667 23.2%, 0.698 26.8%, 0.708 30.5%, 0.686 36.1%, 0.618 42.3%, 0.229 64.6%, 0.093 74.8%, 0.048 80.2%, 0.018 85.8%, 0.004 91.9%, 0)";
    --wiggle--intense: "linear(0, 0.763 3.4%, 0.936 4.8%, 0.991 6.1%, 0.94 7.4%, 0.776 8.8%, -0.549 15.1%, -0.77 16.7%, -0.86 18.3%, -0.83 19.6%, -0.702 21%, 0.435 27.5%, 0.615 29.1%, 0.687 30.7%, 0.663 32%, 0.561 33.4%, -0.292 39.7%, -0.44 41.4%, -0.497 43%, -0.482 44.3%, -0.418 45.6%, 0.171 51.9%, 0.274 53.6%, 0.316 55.2%, 0.309 56.5%, 0.271 57.8%, -0.078 64%, -0.138 65.6%, -0.165 67.2%, -0.165 68.5%, -0.146 69.8%, 0.017 75.7%, 0.06 78.8%, 0.057 81.4%, 0.007 86.5%, -0.008 89.2%, 0)";
    --wiggle--dynamic: "linear(0, 0.769 2.8%, 0.937 3.9%, 0.994 5%, 0.932 6.1%, 0.761 7.2%, -0.637 12.3%, -0.864 13.6%, -0.945 14.8%, -0.902 15.9%, -0.753 17%, 0.563 22.2%, 0.775 23.5%, 0.853 24.7%, 0.818 25.8%, 0.688 26.9%, -0.47 32.1%, -0.656 33.4%, -0.728 34.7%, -0.693 35.8%, -0.579 36.9%, 0.352 41.9%, 0.512 43.2%, 0.579 44.5%, 0.559 45.6%, 0.475 46.7%, -0.253 51.8%, -0.373 53.1%, -0.423 54.4%, -0.412 55.4%, -0.355 56.5%, 0.155 61.6%, 0.239 62.9%, 0.275 64.2%, 0.27 65.2%, 0.234 66.3%, -0.07 71.2%, -0.149 73.8%, -0.148 74.8%, -0.131 75.9%, 0.017 80.6%, 0.057 83.1%, 0.054 85.1%, -0.008 91.4%, 0)";
    --overshoot-in--soft: "linear(0, -0.004 8.7%, -0.019 16.8%, -0.111 41.5%, -0.13 49.9%, -0.13 54.6%, -0.12 59%, -0.099 63.1%, -0.067 67%, -0.008 71.8%, 0.071 76.3%, 0.289 84.7%, 0.598 92.6%, 1)";
    --overshoot-in--firm: "linear(0, -0.009 7.5%, -0.038 15.1%, -0.2 39.5%, -0.242 48.3%, -0.25 53.1%, -0.245 57.5%, -0.227 61.6%, -0.194 65.6%, -0.132 70.5%, -0.048 75.1%, 0.197 83.9%, 0.547 92.2%, 1)";
    --overshoot-in--smooth: "linear(0, -0.011 8.9%, -0.048 17.5%, -0.105 25.6%, -0.252 43.1%, -0.301 51.4%, -0.313 55.8%, -0.311 59.8%, -0.296 63.6%, -0.267 67.2%, -0.206 71.9%, -0.12 76.3%, -0.005 80.6%, 0.136 84.7%, 0.51 92.6%, 1)";
    --overshoot-in--dynamic: "linear(0, -0.007 15.3%, -0.04 26.3%, -0.074 32.2%, -0.121 38.2%, -0.307 56.3%, -0.357 62.4%, -0.374 65.8%, -0.379 68.9%, -0.372 71.8%, -0.352 74.5%, -0.298 78.3%, -0.213 81.9%, 0.053 88.5%, 0.456 94.5%, 1)";
    --overshoot-in--dramatic: "linear(0, -0.009 21.1%, -0.028 28.1%, -0.059 34.3%, -0.108 40.5%, -0.174 46.6%, -0.421 63.6%, -0.481 68.5%, -0.514 73.8%, -0.512 76.1%, -0.497 78.3%, -0.446 81.6%, -0.358 84.7%, -0.072 90.3%, 0.382 95.4%, 1)";
    --overshoot-out--soft: "linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%, 1.019 83.2%, 1.004 91.3%, 1)";
    --overshoot-out--firm: "linear(0, 0.453 7.8%, 0.803 16.1%, 1.048 24.9%, 1.132 29.5%, 1.194 34.4%, 1.227 38.4%, 1.245 42.5%, 1.25 46.9%, 1.242 51.7%, 1.2 60.5%, 1.038 84.9%, 1.009 92.5%, 1)";
    --overshoot-out--smooth: "linear(0, 0.49 7.4%, 0.864 15.3%, 1.005 19.4%, 1.12 23.7%, 1.206 28.1%, 1.267 32.8%, 1.296 36.4%, 1.311 40.2%, 1.313 44.2%, 1.301 48.6%, 1.252 56.9%, 1.105 74.4%, 1.048 82.5%, 1.011 91.1%, 1)";
    --overshoot-out--dynamic: "linear(0, 0.544 5.5%, 0.947 11.5%, 1.213 18.1%, 1.298 21.7%, 1.352 25.5%, 1.372 28.2%, 1.379 31.1%, 1.374 34.2%, 1.357 37.6%, 1.307 43.7%, 1.121 61.8%, 1.074 67.8%, 1.04 73.7%, 1.007 84.7%, 1)";
    --overshoot-out--dramatic: "linear(0, 0.618 4.6%, 1.072 9.7%, 1.358 15.3%, 1.446 18.4%, 1.497 21.7%, 1.512 23.9%, 1.514 26.2%, 1.481 31.5%, 1.421 36.4%, 1.174 53.4%, 1.108 59.5%, 1.059 65.7%, 1.028 71.9%, 1.009 78.9%, 1)";
    --overshoot-inout--soft: "linear(0, -0.004 4.9%, -0.02 9.4%, -0.124 26.4%, -0.126 30.5%, -0.104 34.1%, -0.027 38.8%, 0.108 43.1%, 0.299 47%, 0.817 55.2%, 0.97 59.1%, 1.071 63.4%, 1.118 67.7%, 1.127 72.6%, 1.108 77.2%, 1.019 90.7%, 1.004 95.2%, 1)";
    --overshoot-inout--firm: "linear(0, -0.008 4.1%, -0.035 8.3%, -0.179 21.1%, -0.216 25.3%, -0.228 29.5%, -0.208 33.3%, -0.121 38.2%, 0.036 42.7%, 0.261 46.8%, 0.881 55.6%, 1.058 59.7%, 1.172 64.1%, 1.222 68.6%, 1.228 71.1%, 1.221 73.7%, 1.183 78.5%, 1.034 91.8%, 1.008 95.9%, 1)";
    --overshoot-inout--smooth: "linear(0, -0.01 4.8%, -0.044 9.4%, -0.226 23.1%, -0.271 27.7%, -0.28 30.1%, -0.276 32.4%, -0.227 36.6%, -0.108 40.8%, 0.083 44.7%, 0.76 53%, 1.006 56.9%, 1.175 61.2%, 1.229 63.5%, 1.264 65.9%, 1.28 69.3%, 1.265 73.1%, 1.224 77.1%, 1.044 90.6%, 1.01 95.2%, 1)";
    --overshoot-inout--dynamic: "linear(0, -0.007 8.3%, -0.04 14.3%, -0.11 20.2%, -0.309 32.1%, -0.333 35.2%, -0.324 37.8%, -0.293 39.7%, -0.241 41.5%, -0.065 44.8%, 0.198 47.7%, 0.97 54%, 1.18 57.1%, 1.298 60.5%, 1.331 63.2%, 1.326 66.2%, 1.278 70.1%, 1.107 80%, 1.048 84.8%, 1.009 91.2%, 1)";
    --overshoot-inout--dramatic: "linear(0, -0.008 11%, -0.025 14.6%, -0.054 17.9%, -0.152 24.1%, -0.408 35%, -0.439 37.5%, -0.436 39.6%, -0.405 41.3%, -0.35 42.8%, -0.156 45.6%, 0.153 48.1%, 1.05 53.4%, 1.284 56%, 1.413 59%, 1.441 61.5%, 1.418 64.4%, 1.146 76.2%, 1.047 82.7%, 1.023 85.8%, 1.008 89.3%, 1)";
    --ease-in--back: "cubic-bezier(0.36, 0, 0.66, -0.56)";
    --ease-in--circ: "cubic-bezier(0.55, 0, 1, 0.45)";
    --ease-in--cubic: "cubic-bezier(0.32, 0, 0.67, 0)";
    --ease-in--expo: "cubic-bezier(0.7, 0, 0.84, 0)";
    --ease-in--quad: "cubic-bezier(0.11, 0, 0.5, 0)";
    --ease-in--quart: "cubic-bezier(0.5, 0, 0.75, 0)";
    --ease-in--quint: "cubic-bezier(0.64, 0, 0.78, 0)";
    --ease-in--sine: "cubic-bezier(0.12, 0, 0.39, 0)";
    --ease-inout--back: "cubic-bezier(0.68, -0.6, 0.32, 1.6)";
    --ease-inout--circ: "cubic-bezier(0.85, 0, 0.15, 1)";
    --ease-inout--cubic: "cubic-bezier(0.65, 0, 0.35, 1)";
    --ease-inout--expo: "cubic-bezier(0.87, 0, 0.13, 1)";
    --ease-inout--quad: "cubic-bezier(0.45, 0, 0.55, 1)";
    --ease-inout--quart: "cubic-bezier(0.76, 0, 0.24, 1)";
    --ease-inout--quint: "cubic-bezier(0.83, 0, 0.17, 1)";
    --ease-inout--sine: "cubic-bezier(0.37, 0, 0.63, 1)";
    --ease-out--back: "cubic-bezier(0.34, 1.56, 0.64, 1)";
    --ease-out--circ: "cubic-bezier(0, 0.55, 0.45, 1)";
    --ease-out--cubic: "cubic-bezier(0.33, 1, 0.68, 1)";
    --ease-out--expo: "cubic-bezier(0.16, 1, 0.3, 1)";
    --ease-out--quad: "cubic-bezier(0.5, 1, 0.89, 1)";
    --ease-out--quart: "cubic-bezier(0.25, 1, 0.5, 1)";
    --ease-out--quint: "cubic-bezier(0.22, 1, 0.36, 1)";
    --ease-out--sine: "cubic-bezier(0.61, 1, 0.88, 1)"
}


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

::-webkit-scrollbar {
  display: none;
}
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body{
    background-color: black;
    border: none;
}
.header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: var(--space-300);
    z-index: 2;
    text-transform: uppercase;
    color: var(--color-white);
    mix-blend-mode:difference
}

.header__content{
    display: flex;
    flex-direction: column;
    justify-content:center
}

.header__logo{
    font-size: 10.875rem;
    line-height: var(--line-height--200);
    text-transform: uppercase;
    text-align:center;
    text-decoration: none;
    color: var(--color-white);
    mix-blend-mode:difference
}







.header__logo,
.navigation a,
.hero h1 {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(10px);
}

/* animación */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* logo */
.header__logo {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}

/* nav base */
.navigation a {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* stagger nav */
.navigation a:nth-child(1) { animation-delay: 2s; }
.navigation a:nth-child(2) { animation-delay: 2.1s; }
.navigation a:nth-child(3) { animation-delay: 2.2s; }
.navigation a:nth-child(4) { animation-delay: 2.3s; }
.navigation a:nth-child(5) { animation-delay: 2.4s; }

/* hero title */
.hero h1 {
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards;
}










@media screen and (max-width: 1023px) {
    .header{
        padding-top:var(--space-200)
    }

    .header__logo{
        font-size:3.125rem
    }
}
.navigation{
    padding: var(--space-100) var(--space-300) var(--space-200);
    display: flex;
    justify-content: space-between;
    font-size:var(--font-size--300)
}

.navigation li{
    overflow:hidden
}

.navigation a{
    display: inline-block;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: bottom right;
    transition:background-size .7s cubic-bezier(.76, 0, .24, 1);
    text-decoration: none;
    color: var(--color-white);
    mix-blend-mode:difference
}

.navigation a:hover {
    background-size: 100% 1px;
    background-position:bottom left
}

@media screen and (max-width: 1023px) {
    .navigation{
        padding:var(--space-100) var(--space-100) var(--space-200);
        font-size:0.9rem
    }
}
@media screen and (max-width: 400px) {
    .navigation{
        padding:var(--space-100) var(--space-100) var(--space-200);
        font-size:0.8rem
    }
}
@media screen and (max-width: 340px) {
    .navigation{
        padding:var(--space-100) var(--space-100) var(--space-200);
        font-size:0.7rem
    }
}

.contact{
    position: relative;
    padding: 0 0 var(--space-200);
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center;
    row-gap:var(--space-800)
}

.contact> div{
    display: flex;
    justify-content: center;
    gap:var(--space-200)
}

.contact> div:last-child {
    color:color-mix(in hsl, var(--color-white), transparent 70%)
}

.sticky-nav{
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 16;
    text-transform: uppercase;
    color: var(--color-white);
    padding: 0 var(--space-grid-padding);
    mix-blend-mode:difference
}

.sticky-nav.navigation {
    padding-top:var(--space-300)
}

@media screen and (max-width: 1023px) {
    .sticky-nav{padding-top: var(--space-200)}
    .navigation {padding-top: var(--space-200)}
}


.hero{
    height: 100vh;
    padding: 0 var(--space-grid-padding) var(--space-100);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    background-color:var(--color-white);
}

.hero h1{
    position: relative;
    margin: 0;
    font-size: var(--font-size--l-300);
    font-weight: 200;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:0 .5ch
}

.hero__background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin:center bottom;
    object-fit: cover;
    clip-path: inset(35% 35% 35% 35%);

    transform: scale(1.2);

    animation: heroReveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    
}

@keyframes heroReveal {
    0% {
        clip-path: inset(35% 35% 35% 35%);
        transform: scale(1.2);
    }
    100% {
        clip-path: inset(0% 0% 0% 0%);
        transform: scale(1);
    }
}

.hero__content{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    mix-blend-mode:difference
}

.hero__deco{
    display: block;
    position: relative;
    width: 100%;
    height: 1px;
    margin: var(--space-200) 0;
    background-color:color-mix(in hsl, var(--color-white), transparent 90%)
}

.hero__deco:last-of-type {
    margin-bottom:var(--space-100)
}

@media screen and (max-width: 1023px) {
    .hero{
        height: 100vh;
        height:100svh
    }

    .hero h1{
        max-width: 80vw;
        margin-left: auto;
        margin-right:auto
    }

    .hero__content{
        height: 100vh;
        height:100svh
    }
}

.fulldiscography{
    padding-top: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;

}
.grid4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    max-width: 90%;
    width: 100%;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
.selecteddisc{
    padding-top: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid32{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
@media (max-width: 1300px) {
      .grid4{
        grid-template-columns: repeat(3, 1fr);
      }
    }
@media (max-width: 768px) {
      .grid32 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
      }
      .grid4{
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
      }
    }
    @media (max-width: 310px) {
      .grid32 {
        grid-template-columns: repeat(1, 1fr);
      }
      .grid4{
        grid-template-columns: repeat(1, 1fr);
      }
    }
.item{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 1.25rem;
}

.item img{
    width: 100%;
      aspect-ratio: 1 / 1; /* Mantiene cuadrado */
      object-fit: cover;
      transition: opacity 0.5s;
}
.item img:hover{
    opacity: 70%;
}
.item h3{
    font-family: 'DM Mono';
    margin: 1.25rem;
    color: var(--GeminisgrayTransparent1);
    font-size: 1.25rem;
}
.item p{
    color: var(--GeminisgrayTransparent1);
}
@media (max-width: 800px) {
    .item{
        margin: 0.9rem;
    }
      .grid32 {
        gap: 0.9rem;
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0.9rem;
        margin-right: 0.9rem;
      }
      .item h3{
        margin: 0.9rem;
        font-size: 0.7rem;
    }
    }

.fulldiscbuttsec{
    padding-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.discographybuttonpreview{
    background-color: var(--Geminisbeige);
    color: var(--Geminiscleangray);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
    transition: color 0.5s, background-color 0.5s, backdrop-filter 0.5s, -webkit-backdrop-filter 0.5s;
  }

  .discographybuttonpreview:hover {
    color: black;
    background-color: rgba(255, 250, 250, 0.350);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
/* === CONTACT === */
    .contactsection {
        margin-top: 10rem;
    display: flex;
    justify-content: center;      /* Centra todo horizontalmente */
    align-items: center;          /* Centra verticalmente */
    gap: 1.25rem;                    /* Espacio entre los bloques */
    padding: 1.25rem;
  }

  .contactimage {
    width: 25rem;
    height: 25rem;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .contactimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Mantiene el formato */
    transition: opacity 0.5s;
  }
  .contactimage img:hover{
    opacity: 70%;
  }
  @media (max-width: 750px) {
    .contactimage {
    width: 15rem;
    height: 15rem;
  }
  }
  @media (max-width: 400px) {
    .contactimage {
    width: 10rem;
    height: 10rem;
  }
  }

  .contacttext {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }

  .contacttext h1 {
    margin: 0;
    font-size: 3rem;
    color: var(--Geminisbeige);
    transition: filter 0.5s;
  }
  .contacttext h1:hover{
    filter: blur(2px);
  }
  @media (max-width: 600px) {
    .contacttext h1{
      font-size: 2rem;
    }
  }
  

  .contacttext h2 {
    margin: 5px 0 20px;
    font-weight: normal;
    font-size: 1rem;
    color: var(--Geminiscleangray);
    transition: filter 0.5s;
  }
  .contacttext h2:hover{
    filter: blur(2px);
  }

  .contactboton {
    text-decoration: none;
    background-color: var(--Geminisbeige);
    color: var(--Geminiscleangray);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1em;
    transition: color 0.5s, background-color 0.5s, backdrop-filter 0.5s, -webkit-backdrop-filter 0.5s;
  }

  .contactboton:hover {
    color: black;
    background-color: rgba(255, 250, 250, 0.350);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }