/* ////////////////////////////////////////////////////////////////////// GLOBAL /////////////////////////////////// */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {

    --black: #000000;
    --white: #f5f5f5;
    --gray: #181818;
    --moregray: #2c2c2c;
    --moremoregray: #a5a5a5;
    --letras_parrafo: #d3d3d3;
    --letras_link: #4fc7b3;
}

.light-mode {

    --black: #f0f0f0;
    --white: #131313;
    --gray: #f5f5f5;
    --moregray: #bdbdbd;    /* nav */
    --moremoregray: #555555;
    --letras_parrafo: #252525;
    --letras_link: #eb7100;
}

/*  */

* {  font-family: "Inter", sans-serif;  scroll-behavior: smooth;  }

.link_en_p {  text-decoration: none;  color: var(--letras_link); }


/* ////////////////////////////////////////////////////////////////////// BODY /////////////////////////////////// */

body {

    margin: 0;
    padding: 0;
    box-sizing: border-box; 

    background-color: var(--black);

    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;

    transition: background-color 0.5s ease, color 0.5s ease;
}

.centro_body {

    width: 90%;
    box-sizing: border-box;
    padding: 1rem 4rem;
    
    background-color: var(--gray);
    border: 1px solid var(--moregray);

    display: flex;
    flex-direction: column;
}


/* ////////////////////////////////////////////////////////////////////// NAV /////////////////////////////////// */

.nav_body { display: flex; justify-content: center; align-items: center; }

.nav_caja_botones {

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;

    width: 35%;
    padding: 10px 1.4rem;

    background-color: var(--moregray);
    border-radius: 30px;

    list-style: none;
    position: sticky;
}

.boton_nav { 

    font-weight: 500;
    color: var(--white);
    text-decoration: none;
}

.boton_nav:hover {  color: var(--letras_link); transition: ease-in-out; transition-duration: 0.2s;  }

#themeToggle {

    margin-left: 0.5rem;
    font-size: medium;
    color: var(--white);
    cursor: pointer;
}

#themeToggle:hover {  color: var(--letras_link); transition: ease-in-out; transition-duration: 0.2s;  }



/* ////////////////////////////////////////////////////////////////////// SECCION1 - INTRODUCCION /////////////////////// */

.inicio_body {

    padding: 0 2rem;
    width: 55%;
    color: var(--moremoregray);
}

.inicio_body h1 { font-size: 2.5em; color: var(--white); }

.inicio_body p { color: var(--letras_parrafo); text-align: justify; }


.inicio_body_caja_contacto {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    font-size: 1.5rem;
    margin: 1.5rem 0;
    width: 30%;
}

.botoncontacto { transition: transform 0.3s ease-in-out; }

.botoncontacto:link, .botoncontacto:visited { color: var(--moremoregray); }

.botoncontacto:hover {  
    
    color: var(--letras_link); 
    transform: scale(1.2); 
    transition: transform 0.3s ease-in-out; 
    cursor: pointer;
}



/* ////////////////////////////////////////////////////////////////////// SECCION 2 - CARDS /////////////////////////////// */
.cards_body {  display: flex;  flex-direction: row;  width: 100%; }


/* ////////////////////////////////////////////////////////////////////// SECCION 2.1 - CARDS IZQUIERDA ////////////////// */
.cards_body_izq {

    padding: 1rem;
    width: 50%;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.card_info { 

    border-radius: 20px;
    padding: 5px 2rem 1rem;

    color: var(--white);
}

.card_info h3 { margin-bottom: -4px; }

.card_info p { font-size: smaller; color:var(--letras_parrafo); text-align: justify; }

.card_info time { color: var(--letras_link); font-size: smaller; }

.card_info:hover {  background-color: var(--moregray); transition: ease-in-out; transition-duration: 0.2s; }




/* ////////////////////////////////////////////////////////////////////// SECCION 2.2 - CARDS DERECHA /////////////////// */
.cards_body_der {

    display: flex;
    flex-direction: column;
    justify-content: start;

    width: 50%;
    gap: 2rem;
}

.card_info_der { 

    margin-top: 1rem;
    border-radius: 20px;
    padding: 2rem 2rem;

    border: 1px solid var(--moregray);

    color: var(--white);
}

/* Corrije el espaciado entre el titulo y el icono de mail */
.card_info_der > h3:first-of-type {  display: inline; }
.fa-solid {  color: var(--letras_link); margin-right: 10px; }



/* ////////// EMAIL ////////// */
.contacto_email { 

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.contacto_email input { 

    width: 70%;
    padding: 10px;
    border-radius: 10px;

    background-color: var(--moregray);
    border: 1px solid var(--moremoregray);

    color: var(--white);
}

.card_info_der p { color: var(--letras_parrafo); text-align: justify; }

.contacto_email button { 

    padding: 10px;
    width: 20%;
    border-radius: 10px;
    border: 1px solid var(--moregray);
    background-color: var(--moregray);

    font-weight: 600;
    color: var(--white);

}

.contacto_email button:hover { 
    
    cursor: pointer; 
    background-color: var(--gray); 
    border: 1px solid var(--letras_link); 
    transition: ease-in-out; 
    transition-duration: 0.2s; 
}

.contacto_email button:active {  border: 1px solid var(--letras_link);  }

/* Corrije el espaciado entre el titulo y el icono del curriculum */
.fa-solid {  color: var(--letras_link); margin-right: 10px; }



/* ////////// CURRICULUM ////////// */
.botonCV { 

    display: block;

    width: 90%;
    padding: 15px;
    border-radius: 10px;

    margin-top: 1rem;

    border: 1px solid var(--moregray); 
    background-color: var(--moregray);

    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--white);
}

.botonCV:hover { 
    
    background-color: var(--gray); 
    border: 1px solid var(--letras_link);
    transition: ease-in-out; 
    transition-duration: 0.2s; 
}

.botonCV:active { border: 1px solid var(--letras_link); }




/* ////////////////////////////////////////////////////////////////////// SECCION 2.3 - SCROLLER //////////////////////////////// */
.scroller-section {

    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-block: 2rem;
}

.scroller {

    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    padding: 1rem;
    width: 100%;
    height: 3rem;

    mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0)
    );
}

@keyframes scrollleft {  to { left: -200px }  }

.logos {

    max-width: 100%;
    height: 3rem;
    position: absolute;

    /* No rompe los logos con responsive */
    left: max(calc(200px * 9), 100%);  

    animation-name: scrollleft;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Agregar un item por cada marca nueva que se sume */
.item1 { animation-delay: calc(40s / 9 * (9 - 1) * -1); }
  
.item2 { animation-delay: calc(40s / 9 * (9 - 2) * -1); }
  
.item3 { animation-delay: calc(40s / 9 * (9 - 3) * -1); }
  
.item4 { animation-delay: calc(40s / 9 * (9 - 4) * -1); }
  
.item5 { animation-delay: calc(40s / 9 * (9 - 5) * -1); }
  
.item6 { animation-delay: calc(40s / 9 * (9 - 6) * -1); }
  
.item7 { animation-delay: calc(40s / 9 * (9 - 7) * -1); }
  
.item8 { animation-delay: calc(40s / 9 * (9 - 8) * -1); } 

.item9 { animation-delay: calc(40s / 9 * (9 - 9) * -1); } 







/* ////////////////////////////////////////////////////////////////////// SECCION 4 - FOOTER //////////////////////////////// */
.footer { 
    
    display: flex;
    flex-direction: row;
    padding: 1rem;
    justify-content: space-between;
}

.footer_caja_botones { 
    
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 1rem;
    width: 30%;
    list-style: none;
}

.boton_footer { 
    
    font-size: smaller;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
}

.boton_footer:hover { color: var(--letras_link); transition: ease-in-out; transition-duration: 0.2s; } 

.footer p { font-size: small; color: var(--moremoregray); }



/* ////////////////////////////////////////////////////////////////////// PROYECTOS - PAG2 //////////////////////////////// */
.proyectos { 
    
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 1rem;
}

.proyectos_card { 
    
    width: 93%;
    height: auto;
    padding: 1rem 2rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;

    border-radius: 15px;
    border: 1px solid var(--moregray);
}

.proyectos_card_info { 
    
    color: var(--white);
    max-width: 500px; 
    height: auto; 
    text-align: justify; 
}

.proyectos_card_tecnologias {

    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.proyectos_card_tecnologias_iconos {

    max-width: 2rem;
    object-fit: contain;
}

.proyectos_card:hover { background-color: var(--moregray); transition: ease-in-out; transition-duration: 0.2s; }

.proyectos_card_texto p { color: var(--letras_parrafo); font-size: small;  }

.proyectos_card_texto h2, .proyectos_card_texto h3 { color: var(--white); }

.img_proyectos { 

    width: 100%; 
    max-width: 350px;
    height: auto;

    border-radius: 15px;
    object-fit: cover;

    transition: transform 0.5s ease;
}

.imagen_web_1:hover { transform: scale(1.05); transition: transform 0.3s ease-in-out; content: url('img/proyectos/web2.jpg');  object-fit: contain;  }

.imagen_web_2:hover { transform: scale(1.05); transition: transform 0.3s ease-in-out; content: url('img/proyectos/web4.jpg');  object-fit: contain; }

.imagen_web_3:hover { transform: scale(1.05); transition: transform 0.3s ease-in-out; object-fit: contain; }

.imagen_web_5:hover { transform: scale(1.05); transition: transform 0.3s ease-in-out; object-fit: contain; }

.imagen_web_7:hover { transform: scale(1.05); transition: transform 0.3s ease-in-out; content: url('img/proyectos/web8.jpg');  object-fit: contain; }

.imagen_web_9:hover { transform: scale(1.05); transition: transform 0.3s ease-in-out; content: url('img/proyectos/web10.jpg');  object-fit: contain; }


/* ////////////////////////////////////////////////////////////////////// TECNOLOGÍAS - PAG3 //////////////////////////////// */
.tecnologias { 
    
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    box-sizing: border-box;

    width: 100%;
    padding: 1rem;
}

.tecnologias_card {

    width: 70%;
    height: auto;
    margin-bottom: 2rem;

    display: flex;
    flex-direction: column;

    padding: 2rem 2rem;
    border-radius: 15px;
    border: 1px solid var(--moregray);
    color: var(--letras_parrafo);

    text-align: justify;
}

.tecnologias_card:hover {  background-color: var(--moregray); transition: ease-in-out; transition-duration: 0.2s; }

.tecnologias_card_titulo {

    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.tecnologias_card_titulo h2 {  color: var(--white); }

.tecnologias_card p {  color: var(--letras_parrafo); }

.tecnologias_card_titulo img { max-width: 50px; }



/* ////////////////////////////////////////////////////////////////////// MEDIA QUERYS //////////////////////////////// */


/* ///////////////////// NOTEBOOK ///////////////////// */ 
@media only screen and (min-width: 1025px) and (max-width: 1226px) {

    /* BODY */
    .centro_body { align-items: center; }

    /* NAV */
    .nav_caja_botones { width: 100%; }
    .boton_nav li { font-size: 90%; }


    /* INICIO */
    .inicio_body { width: 80%; }
    .inicio_body_caja_contacto { width: 50%; }


    /* CARDS DER Y IZQ */
    .cards_body { flex-direction: column; width: 100%; }
    .cards_body_izq, .cards_body_der { width: 95%; }
    .card_info_der { margin-top: 1rem; }
    .contacto_email input{  width: 60%;}
    .contacto_email button { width: 25%; font-size: 60%; }


    /* FOOTER */
    .footer { width: 90%; flex-direction: column;  justify-content: center;  align-items: center; }
    .footer_caja_botones { width: 100%; font-size: 1rem; margin-right: 5px; justify-content: center; align-items: center; }
    .boton_footer li { font-size: 80%; margin: 5px; }


    /* PROYECTOS */
    .proyectos { align-items: center; }
    .proyectos_card { width: 70%; max-width: 500px; flex-direction: column; align-items: center; }
    

    /* TECNOLOGIAS */
    .tecnologias {  align-items: center;  }
    .tecnologias_card { width: 70%; max-width: 600px; }
}

/* ///////////////////// TABLET  ///////////////////// */
@media only screen and (min-width: 769px ) and (max-width: 1024px) {

    /* BODY */
    body { width: 100%;}
    .centro_body { justify-content: center; align-items: center; }


    /* NAV */
    .nav_caja_botones { width: 110%; height: auto; }
    .boton_nav li { font-size: 80%; font-weight: 600; }
    #github { display: none; }


    /* INTRO */
    .inicio_body { width: 90%; align-items: center; }


    /* BOTONES CONTACTO */
    .inicio_body_caja_contacto { width: 60%; display: flex; justify-content: space-between; align-items: center; }


    /* CARDS DER Y IZQ */
    .cards_body { flex-direction: column; width: 100%; align-items: center; padding: 0; }
    .cards_body_izq, .cards_body_der { width: 100%; padding: 0; }
    .card_info_der { margin-top: 1rem; }
    .contacto_email input{ width: 60%;}
    .contacto_email button { width: 25%; font-size: 60%; }
    .contacto_email button:hover { width: 25%; font-size: 60%; }


    /* FOOTER */
    .footer { width: 130%; flex-direction: column;  justify-content: flex-start;  align-items:center; }
    .footer_caja_botones {  width: 100%;  padding: 0; justify-content: center; align-items: center; }
    .boton_footer li { font-size: 100%; margin: 5px; font-weight: 700; }
    .footer p { text-align: center; }


    /* PROYECTOS */
    .proyectos { width: 100%; align-items: center; justify-content: center; }
    .proyectos_card { width: 80%; flex-direction: column; align-items: center;  }


    /* TECNOLOGIAS */
    .tecnologias {  width: 100%; align-items: center; } 
    .tecnologias_card { width: 80%; }
}

/* ///////////////////// CELULAR GRANDE ///////////////////// */
@media only screen and (min-width: 426px ) and (max-width: 768px) {

    /* BODY */
    body { width: 100%;}
    .centro_body { justify-content: center; align-items: center; }

    /* NAV */
    .nav_caja_botones { width: 100%; height: auto; }
    .boton_nav li { font-size: 80%; font-weight: 600; }
    #github { display: none; }

    /* INTRO */
    .inicio_body { width: 100%;  }
    .inicio_body h1 { font-size: 1.5rem; }
    .inicio_body p { font-size: 85%; }

    /* BOTONES CONTACTO */
    .inicio_body_caja_contacto { width: 70%; display: flex; justify-content: space-between; align-items: center; }


    /* CARDS DER Y IZQ */
    .cards_body { flex-direction: column; width: 100%; align-items: center; padding: 0; }
    .cards_body_izq, .cards_body_der { width: 100%; padding: 0; }
    .card_info_der { margin-top: 1rem; }
    .contacto_email input{ width: 60%;}
    .contacto_email button { width: 25%; font-size: 60%; }
    .contacto_email button:hover { width: 25%; font-size: 60%; }


    /* FOOTER */
    .footer { width: 130%; flex-direction: column;  justify-content: flex-start;  align-items:center; }
    .footer_caja_botones {  width: 100%;  padding: 0; justify-content: center; align-items: center; }
    .boton_footer li { font-size: 100%; margin: 5px; font-weight: 700; }
    .footer p { text-align: center; }


    /* PROYECTOS */
    .proyectos { width: 100%; align-items: center; }
    .proyectos_card { width: 80%; flex-direction: column; align-items: center; }
    

    /* TECNOLOGIAS */
    .tecnologias {  width: 100%; align-items: center; } 
    .tecnologias_card { width: 80%; }
}

/* ///////////////////// CELULAR ///////////////////// */
@media only screen and (min-width: 376px ) and (max-width: 425px) {

    /* BODY */
    body { width: 100%;}
    .centro_body { justify-content: center;  align-items: center;   width: 100%;  }

    /* NAV */
    .nav_caja_botones { width: 100%; height: auto; }
    .boton_nav li { font-size: 80%; font-weight: 600; }
    #github { display: none; }

    /* INTRO */
    .inicio_body { width: 100%; }
    .inicio_body h1 { font-size: 1.5rem; }
    .inicio_body p { font-size: 85%; }

    /* BOTONES CONTACTO */
    .inicio_body_caja_contacto { width: 90%; align-items: center; justify-content: space-between; }

    /* CARDS DER Y IZQ */
    .cards_body { flex-direction: column; width: 110%; align-items: center; padding: 0; }
    .cards_body_izq, .cards_body_der { width: 110%; padding: 0;  }
    .contacto_email input{ width: 60%;}
    .contacto_email button { width: 25%; font-size: 60%; }
    .contacto_email button:hover { width: 25%; font-size: 60%; }


    /* FOOTER */
    .footer { width: 130%; flex-direction: column;  justify-content: flex-start;  align-items:center; }
    .footer_caja_botones {  width: 100%;  padding: 0; justify-content: center; align-items: center; }
    .boton_footer li { font-size: 100%; margin: 5px; font-weight: 700; }
    .footer p { text-align: center; }


    /* PROYECTOS */
    .proyectos { width: 120%; align-items: center; }
    .proyectos_card { width: 90%; flex-direction: column; align-items: center; }
    

    /* TECNOLOGIAS */
    .tecnologias { width: 120%; align-items: center; } 
    .tecnologias_card { width: 90%; align-items: center; }
}

/* ///////////////////// CELULAR CHICO ///////////////////// */
@media only screen and (max-width: 375px) {

    /* BODY */
    body { width: 100%; }
    .centro_body { justify-content: center; align-items: center; width: 100%; }


    /* NAV */
    .nav_body { width: 130%; }
    .nav_caja_botones { width: 110%; margin: 0.5rem; }
    .boton_nav li  { font-size: 80%; font-weight: 600; }
    #github { display: none; }


    /* INTRO */
    .inicio_body { width: 110%; align-items: center; }
    .inicio_body h1 { font-size: 120%; }
    .inicio_body p { text-align: justify; font-size: 85%; }


    /* BOTONES CONTACTO */
    .inicio_body_caja_contacto { width: 100%; align-items: center; justify-content: space-between; }


    /* CARDS DER Y IZQ */
    .cards_body { flex-direction: column; width: 130%; align-items: center; padding: 0; }
    .cards_body_izq, .cards_body_der { width: 110%; }
    .contacto_email input { width: 70%; padding: 1px;}
    .contacto_email button { width: 25%; font-size: 60%; }
    .contacto_email button:hover { width: 25%; font-size: 60%; }


    /* FOOTER */
    .footer { width: 130%; flex-direction: column;  justify-content: flex-start;  align-items:center; }
    .footer_caja_botones { width: 100%; padding: 0; justify-content: center; align-items: center; }
    .boton_footer li { font-size: 100%; margin: 5px; font-weight: 700;}
    .footer p { text-align: center; }


    /* PROYECTOS */
    .proyectos { width: 130%; align-items: center; }
    .proyectos_card { flex-direction: column; align-items: center; }
    

    /* TECNOLOGIAS */
    .tecnologias {  width: 110%; align-items: center; } 
    .tecnologias_card { width: 95%; }
}