/* + =>------------------------------------------------- GUScode | Portafolio */

@font-face {
    font-family: 'Open Sans';
    src: url('Fuente/OpenSans-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Fira Code';
    src: url('Fuente/FiraCodeNerdFont-Regular.ttf') format('truetype');
    font-display: swap;
}

:root {

    /* + => Paleta de colores */
    --salmon: hsla(14, 88%, 80%, 1);
    --yellow: hsla(53, 82%, 69%, 1);
    --green: hsla(75, 55%, 60%, 1);
    --cyan: hsla(178, 47%, 67%, 1);
    --purple: hsla(261, 91%, 79%, 1);
    --fuente: hsla(222, 11%, 87%, 1);
    --body: hsla(222, 11%, 18%, 1);
    --panel: hsla(220, 8%, 14%, 1);
    --task: hsla(54, 69%, 64%, 1);

    /* + => fuentes - 2 fuentes */
    --fuente-1: 'Open Sans', sans-serif; 
    --fuente-2: 'Fira Code';
    --size-1: 2.3em;
    --size-2: 2em;
    --size-3: 1.5em;
    --size-4: 1em;
    --size-5: 0.9em;
    --size-6: 4em;
    --size-7: 3em;
    --size-8: 0.7em;
    /* task: organizar las dimensiones em */

    --root-size: 1em;
}


* {
    font-family: var(--fuente-1);
    color: var(--fuente);
}

html { scroll-behavior: smooth; }

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

a { text-decoration: none; }


/* Líneas de separación entre secciones */
.linea-1 {
    width: 100%;
    height: 0.3em;
    background-color: var(--panel);
}

.linea-2 {
    width: 80%;
    height: 0.1em;
    background-color: var(--panel);
}

/* Contenedores de Secciones */
.section-box {
    margin: 3% 0 3% 19%; 
}



/* ------------------------------------------------------------ Panel Lateral */

.top {
    display: none;
    margin: 0;
    justify-content: center;
    align-items: center;
    height: 19%;
}

.top-avatar {
    display: block;
    margin: 5px auto;
    height: 30%;
    width: 50%;
    border-radius: 50%;
}

.panel {
    background-color: var(--panel);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 16%; 
    height: 100%;
}

.panel-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 1.3em;
    grid-row-gap: 1.3em;
    justify-items: stretch;
    align-items: stretch;
}
    
.panel-box-avatar {
    display: block;
    border-radius: 50%;
    margin: auto;
    width: 9.3em;;
    height: 9.3em;
}

.panel-box-menu {
    display: block;
    margin: auto;
    list-style-type: none;
}

.panel-box-menu ul {
    list-style-type: none;
    padding-left: 0;   
}

.panel-box-menu ul li {
    padding-bottom: 0.5em;
}

.panel-menu {
    font-size: var(--size-4);
}

.visitado {
    color: var(--cyan);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



/* --------------------------------------------------------- Sección | Inicio */

.inicio-titulo {
    font-size: calc(var(--root-size) * 3.5);
    font-weight: 400;
    margin-top: var(--size-1);
}
.inicio-cursor {
    display:block;
    font-size: var(--size-3);
    white-space: nowrap;
    border-right: 4px solid;
    width: 31ch;
    animation: typing 3s steps(31), blink .5s infinite step-end alternate;
    overflow: hidden;
    color: var(--yellow);
}

@keyframes typing {
    from {width: 0}
}

@keyframes blink {
    50% {border-color: transparent}
}

.parrafo {
    line-height: var(--size-3);
}

.curriculo {
    display:inline-block;
    background-color: var(--cyan);
    width: 11.25em;
    height: 2em;
    margin-top: 2%;
    padding: 0.4em;
    text-align: center;
    border-radius: 0.5em;
    vertical-align: middle;
    color: var(--body);
}

.curriculo:hover {
    background-color: var(--panel);
    color: var(--cyan);
}

.curriculo:hover .ico-download::before {
    color: var(--cyan);
}

.inicio-redes {
    margin: 3% auto 15% auto;
    list-style-type: none;
}


.inicio-redes-lista {
    display: flex;
    list-style-type: none;
    padding-left: 0;
}

.inicio-redes-lista li {
    padding-right: 0;
}

.boton-redes {
    background-color: var(--body);
    border-radius: 100%;
    border: none;
    margin-right: 5%;
    padding: 10px 13px;
}

.boton-redes:hover {
    background-color: var(--panel);
    border-color: none;
}



/* ------------------------------------------------------ Sección | Proyectos */

.contenedor-imagenes {
    display: flex;
    width: 85%;
    margin: auto !important;
    margin-left: 19%;
    justify-content: center;
    flex-wrap: wrap;
}
  
.contenedor-imagenes .imagen {
    width: 45%;
    position: relative;
    height: 300px;
    margin: 1%;
}
  
.imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
  
.imagen:hover .overlay {
    height: 100%;
    cursor: pointer;
}
  
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--panel);
    width: 100%;
    height: 0;
    transition: 0.5s ease;
    overflow: hidden;
}

.overlay-content {
    margin: 10% 1% 1% 1%;
    text-align: center;
}

.etiqueta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 40%;
    height: 30%;
}

.etiqueta p {
    margin: 0;
}

.github {
    background-color: var(--body);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    margin: var(--size-3) var(--size-1);
    padding: 10px 13px;  
}


.github:hover {
    background-color: var(--panel);
    border-color: none;
}

.espacio {
    display: inline-block;
    width: var(--size-1);
    margin: 0;
}

/* Colores para texto e íconos de tarjetas de proyectos */
.task {
    color: var(--task);
}

.usuario {
    color: var(--cyan);
}

.django {
    color: var(--green);
}

.link {
    color: var(--salmon);
}



/* ------------------------------------------------- Sección | Capacitaciones */

.capacitaciones-item {
    margin-top: var(--size-7);
    margin-bottom: var(--size-7);
}

.small {
    font-size: var(--size-8);
}


.certificacion {
    background-color: var(--panel);
    width: fit-content;
    height: var(--size-7);
    padding: 0 var(--size-4);
    border-radius: 5px;
    font-size: var(--size-5);
}



/* --------------------------------------------------------- Sección | Skills */

.skills-lista {
    margin-left: 10%;
}

.skills-titles {
    margin-top: 5%;
}

.skills-logos {
    display: flex;
    flex-wrap: wrap;
}

.skills-logos-box {
    width: var(--size-6);
    text-align: center;
}

.skills-logos-box-p {
    font-family: var(--fuente-2);
    font-size: var(--size-8);
}



/* ------------------------------------------------------- Sección | Contacto */

.contacto-redes {
    display: flex;
    justify-content: center;
    margin: auto;
    list-style-type: none;
}

.fuente-contacto {
    font-family: var(--fuente-2);
}