:root {
  /* ─── Colores ─────────────────────────────── */
  --color-bg-primary:     #100B16;
   --color-bg-list:     #06030a;
  --color-bg-secondary:   #4B2870;
  --color-btn-primary:    #CCFF00;
  --color-btn-secondary:  #C3E2FF;
  --color-text:           #C3E2FF;
  --color-heading:        #91BBE2;

  /* ─── Espaciado (escala 4px base) ────────── */
  --space-1:   1.5px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ─── Tipografía — tamaños ────────────────── */
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   24px;
  --font-size-xl:   32px;
  --font-size-2xl:  40px;
  --font-size-3xl:  74px;

  /* ─── Tipografía — pesos ──────────────────── */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ─── Tipografía — interlineado ───────────── */
  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ─── Bordes redondeados ──────────────────── */
  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   16px;
  --border-radius-full: 9999px;
}

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

body{
    background: var(--color-bg-primary);
    
}

main{
    background: var(--color-bg-secondary);
    margin: 0 var(--space-2);
    display: flex;
    flex-direction: column;
}
/* Nav links */
.navContent a {
    position: relative;
    text-decoration: none;
}

.navContent a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
   background-color: var(--color-btn-primary);
    transition: width 0.3s ease;
}

.navContent a:hover::after {
    width: 100%;
}

/* Works */
.list-works a,
.list-one a,
.list-two a {
    position: relative;
    text-decoration: none;
}

.list-works a::after,
.list-one a::after,
.list-two a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-btn-primary);
    transition: width 0.3s ease;
}

.list-works a:hover::after,
.list-one a:hover::after,
.list-two a:hover::after {
    width: 100%;
}

/* Contacts */
.contacts a {
    position: relative;
    text-decoration: none;
}

.contacts a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-btn-primary);
    transition: width 0.3s ease;
}

.contacts a:hover::after {
    width: 100%;
}
header, .sectionContent{
    width: 99.9%;
    margin:auto;
}
.backgroundDark{
    background: var(--color-bg-primary);
    margin:0 var(--space-1) var(--space-1) var(--space-1);
    padding: var(--space-4) var(--space-3);
}
section h2{
    display: flex;
    justify-content: center;
}
.flex{
    display: flex;
}

.flex-row{
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

.flex-colum{
    flex-direction: column;
}
.text, .title, .subTitle, .numberColor{
    line-height: var(--space-6);
    letter-spacing: var(--space-1);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.text{
    color: var(--color-text);
    font-size: var(--font-size-md);
}
.title, .subTitle{
    color: var(--color-heading);
}

.title{
    font-size: var(--font-size-xl);
}
 .subTitle{
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}
.numberColor{
    color: var(--color-btn-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    
}

.grid{
    display: grid;
}
.buttonMAin {
    background: var(--color-btn-primary);
    padding: var(--space-3);
    color: var(--color-bg-primary);
    font-weight: var(--font-weight-medium);
    transition: background 0.3s ease, color 0.3s ease;
}

.buttonMAin:hover {
    background: transparent;
    color: var(--color-btn-primary);
    outline: 2px solid var(--color-btn-primary);
}

.buttonSecon {
    border: var(--color-btn-secondary) 2px solid;
    padding: var(--space-3);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.buttonSecon:hover {
    background: var(--color-btn-primary);
    color: var(--color-bg-primary);
    border-color: var(--color-btn-primary);
}

nav{
    div{
        width: 100%;
    }
     & label{
        width: 25%;
    }
}

#manu-hamburger{
    position: relative;
    z-index: 2;
    gap: var(--space-2);
    width: 100px;
}
.bar{
    width: 100%;
    height: 7px;
    background: var(--color-bg-secondary) !important;
}
#hamburger{
    display: none;
}


.navContent{
    position: fixed;
    left: 150%;
    transition: ease 0.5s;
    width: 65%;
    height: 100%;
    z-index: 15;
    
    li{
        a{
            font-size: var(--font-size-xl);
            padding: var(--space-4) 0;
        }
    }
}

select{
        
        font-size: var(--font-size-xl);
        border: var(--color-btn-secondary) 1px solid;
        background: transparent;
        color: var(--color-text);
        width: 100%;
    }

option{
    background: var(--color-bg-primary);
}

#hamburger:checked ~ .navContent{
    left: 0;
}

ul{
    height: auto;
    li{
        list-style: none;
        a{
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }
    }
}


footer{
    height: 50vh;
    width: 100%;
    padding: var(--space-4);
    text-align: center;
    background-color: var(--color-btn-secondary);
    align-items: center;
    justify-content: center;
    p{
        color: var(--color-bg-list) !important;
    }
}
@media (min-width: 768px) {
         header article{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        h1{
            grid-column: 1/3;
        }
        h2{
            grid-column: 1/2;
        }
        p{
            display: flex !important;
            grid-column: 1/2;
        }
        div{
            grid-column: 2/3;
            grid-row: 2/5;
            height: 100vh;
        }
    }

   
    section{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        h2{
            grid-column: 1/3;
        }
    }
}

@media (min-width: 1200px) {

    #manu-hamburger{
        display: none;
    }
    .navContent{
        position: static;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-around;
        li{
            a{
                font-size: var(--font-size-base);
            }
        }
        select{
            width: 100%;
        }
    }
    
    a{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title{
        font-size: var(--font-size-3xl);
       
    }

    .sectionContent .title{
         padding: var(--space-8) var(--space-3);
    }

    header .subTitle{
        font-size: var(--font-size-xl);
    }
    .subTitle{
        display: flex;
        align-items: center;
    }
}