:root {
    --color-primario: #1F1F1F;
    --color-primario-1: #101010;
    --color-primario-2: #0A0A0A;
    --color-primario-3: #0000;
    --color-primario-a: #2F2F2F;
    --color-primario-b: #424141;
    --color-primario-c: #636363;

    --color-secundario: #E2FC03;
    --color-secundario-1: #E9FF2D;
    --color-secundario-2: #EFFF63;
    --color-secundario-3: #F5FF9C;
    --color-secundario-a: #BDD300;
    --color-secundario-b: #94A500;
    --color-secundario-c: #647000;

    --color-acento: #D9D9D9;
    --color-acento-1: #F4F4F4;
    --color-acento-2: #F8F8F8;
    --color-acento-3: #FFFFFF;
    --color-acento-a: #A9A9A9;
    --color-acento-b: #666666;
    --color-acento-c: #424242;
}

/* Scrollbar para navegadores WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-primario-1); /* fondo oscuro para el track */
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-secundario); /* amarillo vibrante */
  border-radius: 10px;
  border: 2px solid var(--color-primario-1); /* borde para integrarlo con el fondo */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-secundario-a); /* un tono más oscuro en hover */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-secundario) var(--color-primario-1);
}



@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('/fonts/neue-montreal/NeueMontreal-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}


body{
    background-color: var(--color-primario);
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 400;
    color: #fff;
    max-width: 100%;
    overflow-x: hidden;
}

span.point{
    color: var(--color-secundario);
}

header{
    height: 150px;
    display: flex;
    align-items: center;
}

header h1{
    font-weight: 700;
    margin: 0px 20px;
}

.menu ul{
    display: flex;
    background-color: #0A0A0A;
    border-radius: 30px;
    height: 54px;
    align-items: center;
    justify-content: space-around;
}

.menu ul a{
    text-decoration: none;
    color: #fff;
}

.menu ul a li{
    list-style: none;
}

.contact a{
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-secundario);
    color: var(--color-primario-1);
    text-decoration: none;
    border-radius: 30px;
    width: 197px;
    transition: 0.3s ease-in;
}

.contact{
    display: flex;
    justify-content: flex-end;
}

.banner-principal h2, .banner-principal p{
    margin: 0px 20px;
}

.banner-principal a{
    text-decoration: none !important;
}

.banner-principal h2{
    font-size: 60px;
    font-weight: 400;
}

.banner-principal h2 span{
    font-weight: 700;
    font-size: 80px;
}

.banner-principal{
    height: 442px;
    display: flex;
    align-items: center;
}

.btn-contact{
    width: 197px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    color: var(--color-primario-1);
    height: 35px;
    font-size: 20px;
    background-color: var(--color-secundario);
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease-in;
}

.btn-contact:hover, .contact a:hover{
    background-color: var(--color-secundario-3);
    transition: 0.3s ease-in;
}

.banner-principal h3{
    font-size: 30px;
    font-weight: 400;
}

.banner-principal .caracteristica{
    padding: 0px;
    margin: 0px;
    font-size: 80px;
    font-weight: 400;
    color: var(--color-secundario);
}

#caracteristica-dinamica{
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}
#caracteristica-dinamica.oculto{
  opacity: 0;
}

.col.col-6.menu a:hover{
    color: #ccc;
    transition: 0.3s ease-in;
}

.col.col-6.menu a{
    transition: 0.3s ease-in;
}


#conocimientos .sobre-mi h4{
    margin: 0px 20px;
    margin-bottom: 20px;
}

#conocimientos .sobre-mi a{
    text-decoration: none;
}

#conocimientos h4{
    font-size: 30px;
    font-weight: 400;
}

#conocimientos li{
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

#conocimientos li i{
    color: var(--color-secundario);
}

#conocimientos li p{
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;
    margin: 0px;
    margin-left: 8px;
}

#conocimientos .btn-contact{
    margin-left: 20px;
}

#conocimientos .tecnologias ul, #conocimientos .tecnologias ul li{
    margin-left: 0px;
    padding-left: 0px;
}

#conocimientos .tecnologias ul{
    margin-top: 20px;
}

#conocimientos .tecnologias h4{
    margin-left: 0px !important;
    padding-left: 0px !important;
}

.subtitulo{
    margin: 0px 20px;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 400;
}

#portfolio{
    margin-top: 50px;
}

#portfolio .img img{
    margin-left: 20px;
    margin-bottom: 20px;
}

#portfolio .info h5{
    font-size: 25px;
    font-weight: 400;
}

#portfolio .info p{
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 10px;
}

#portfolio .info p a{
    color: var(--color-secundario);
    text-decoration: none;
}

#portfolio .row.col-12.d-flex.proyecto{
    margin-bottom: 100px !important;
}

#contactame{
    margin-top: 100px;
    margin-bottom: 100px;
}

#contactame h5{
    font-size: 25px;
    font-weight: 400;
    margin-left: 20px;
}

#contactame a{
    display: flex;
    text-decoration: none;
    color: #fff;
    margin-left: 20px;
    align-items: center;
    font-weight: 400;
    transition: 0.3s ease-in;
    margin-top: 15px;
}

#contactame a i{
    color: var(--color-secundario);
}

#contactame a p{
    padding: 0px;
    margin: 0px;
    margin-left: 8px;
}

#contactame .mail a:hover{
    margin-left: 40px;
    transition: 0.3s ease-in;
}

#contactame img{
    height: 50px;
    margin-right: 30px;
}

#contactame .col-6.social{
    justify-content: center;
}

#footer{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 150px !important;
    margin-bottom: 70px;
}

#footer .d-flex{
    justify-content: center;
}

#footer a{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    margin: 0px 30px !important;
}

#footer h2{
    text-align: center;
}




@media (max-width: 768px) {

    header{
        width: 100% !important;
        display: flex;
        justify-content: center;
        margin-top: 20px !important;
    }

    .col-3, .col-6{
        width: 100% !important;
    }

    .d-flex{
        flex-direction: column !important;
    }

    #portfolio{
        width: 100% !important;
        overflow: hidden;
    }

    #portfolio img{
        width: 100%;
    }

    #contactame .d-flex.social{
        flex-direction: row !important;
    }

    header h1{
        text-align: center;
        margin-bottom: 10px;
    }

    header .row.col-12.d-flex{
        justify-content: center !important;
    }

    .menu ul{
        justify-content: space-evenly;
        padding: 0px;
        height: 40px;
    }

    header .col.col-3.contact{
        display: none;
    }

    .banner-principal{
        justify-content: center;
        align-items: flex-start;
        height: auto;
        margin-bottom: 100px;
    }

    .banner-principal p{
        margin-top: 10px;
        font-size: 14px;
        height: 30px;
        width: 120px;
        margin-left: 10px;
    }

    .banner-principal h2{
        font-size: 40px;
        margin-left: 10px;
    }

    .banner-principal h2 span{
        font-size: 50px;
    }

    .banner-principal .row.col-12{
        width: 100% !important;
    }

    .banner-principal h3{
        font-size: 25px;
        margin-top: 40px;
    }

    #caracteristica-dinamica{
        font-size: 30px;
    }

    .col-6.cont-caracteristicas{
        margin: 0px 10px;
    }
    
    #conocimientos .col-12{
        justify-content: center; 
        width: 100% !important;
    }

    .col-6.tecnologias{
        margin-top: 40px;
        padding-left: 30px !important;
    }

    .col-6.tecnologias ul{
        margin-left: 20px;
    }

    .col-6.sobre-mi.d-block ul{
        padding-left: 20px !important;
    }


    #conocimientos .btn-contact{
        margin-top: 10px;
        font-size: 14px;
        height: 30px;
        width: 120px;
    }

    #portfolio .row.col-12.d-flex.proyecto{
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding-left: 20px;
    }

    #portfolio .img img{
        margin: 0px 10px !important;
    }

    #portfolio .col-6.info{
        margin: 0px !important;
        padding: 0px !important;
    }

    #portfolio .col-6.img.d-block{
        margin: 0px !important;
        padding: 0px !important;
    }

    #portfolio .info h5{
        margin-top: 30px;
    }

    #contactame{
        margin: 0px;
    }

    #contactame a{
        padding: 0px;
        margin: 0px;
        margin-left: 20px;
    }

    #contactame .row.col-12.d-flex{
        justify-content: center !important;
        display: flex !important;
    }

    .col-6.d-flex.social{
        margin-top: 40px;
    }

    #contactame img{
        margin: 0px;
    }

    #footer a{
        letter-spacing: 1px;
    }

    .row.col-12.d-flex.proyecto{
        flex-direction: column-reverse !important;
    }

    #portfolio .info h5, #portfolio .info p{
        margin-left: 10px;
    }
}