:root {
  --tur-cla: #0bd3ac;
  --tur-osc: #008b8b;
  --mor-osc: #630b68;
  --mor-cla: #8b008b;
  --mor-fon: #320034;
}

/* Basic */
* {
    margin: 0;
    padding: 0;
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

body {
    width: 100%;
    height: 100dvh;
    background-color: var(--mor-fon);
    color: var(--tur-cla);
    text-align: center;
}

.bloque {
    overflow-y: hidden;
    overflow-x: hidden;
}

.bloque_no {
    overflow-y: scroll;
    overflow-x: scroll;
}

h1 {
    color: aliceblue;
    font-size: 50px;
    margin-block: 60px;
}

h2 {
    color: aliceblue;
}

a {
    text-decoration: none;
    color: aliceblue;
    letter-spacing: 2px;
}

mark {
    background-color: transparent;
    color: var(--tur-osc);
}

button {
    border: none;
    background-color: transparent;
    img {width: 25px;}
}

/* Base */
header {
    font-size: 20px;
    letter-spacing: 4px;
    margin-top: 15px;
    margin-bottom: 5px;
}

nav {
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 25px;
    margin-inline: 15%;
}

main {
    letter-spacing: 1.2px;
}

section {
    margin-block: 5px;
}

article {
    display: none;
    position: fixed;
    top: 33%;
    width: 250px;
    gap: 0;
    /* transition: top 2s; */
        /* transform: translateX(-150%); /* Oculto a la izquierda */
        /* opacity: 0;
        transition: transform 5s ease, opacity 0.5s ease; */
    .bor_inline{display: none;}
    .bor_block{display: block; width: 100%;}
}
/* article.active {
  transform: translateX(0); /* Posición normal */
  /* opacity: 1;
} */ 

aside {
    letter-spacing: 1.25px;
    margin-block: 50px;
}

footer {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: var(--mor-osc);
    display: flex;
    justify-content: center;
    letter-spacing: 1.25px;
    padding-block: 15px;
    gap: 10px;
}

/* Index */

.name {
    margin-bottom: 10px;
}

.ofi {
    margin: 20px;
    letter-spacing: 1px;
    color: aliceblue;
}

.text {
    p{margin-block: 15px;}
    strong{color: var(--tur-cla);}
    color: aliceblue;
    line-height: 1.5;
    margin-block: 100px;
    padding-inline: 10%;
    max-width: 80%;
}



/* Home */
.destino {
    margin-bottom: 10px;
}

.main_work {
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    justify-content: center;
    margin-bottom: 75px;
    gap: 12px;
}

.work_map {
    height: 100px;
    margin: 5px;
    margin-bottom: 15px;
    position: relative;
    object-fit: cover;
    object-position: center;
    img {height: 100%;}
}

.btn_mini {
    width: 70px;
    a{color: var(--tur-osc);}
    p{font-size: 1.1em; letter-spacing: 1.5px;}
}

/* Home / Info */
.info_max {
    margin-bottom: 10px;
}
.info_icon{
    margin-block: 10px;
}
.info_btn {
    background-color: var(--mor-osc);
    color: var(--tur-cla);
    margin-top: 10px;
    padding-inline: 12px;
    padding-block: 6px;
    animation: pulsar 1.25s ease-in-out infinite;
}
.info_box{
    background-color: var(--tur-cla);
    color: var(--mor-osc);
    padding-inline: 20px;
    button{margin-inline: 10px;}
    p{letter-spacing: 0.25px;}
}

/* datos */
.correo{
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    p{margin-top: 12px;margin-bottom: 3px;}
    input, textarea{
        background-color: var(--tur-osc);
        color: var(--mor-cla);
        padding: 7.5px;
        width: 90%;
    }
    .input_max {height: 50px;}
}   
.rrss{
    p{margin-block: 10px;}
    strong{color: var(--tur-cla);}
    color: aliceblue;
    padding-inline: 10%;
    max-width: 80%;
}
.btn_ok {
    font-size: 0.8em;
    background-color: var(--tur-cla);
    color: var(--mor-osc);
    padding-inline: 10px;
    padding-block: 7.5px;
    margin-block: 15px;
}


/* skills */
.skill{margin-top: 0px; margin-bottom: ;}
.barras p{margin: 0;}
.barras h3{margin-top: 10px; color: var(--tur-cla)}

/* Efectos */
.info_pop {
        p{margin-block: 15px;}
    strong{color: var(--tur-cla);}
    color: aliceblue;
    line-height: 1.5;
    margin-block: -100px;
    padding-inline: 10%;
    max-width: 80%;
}
.pulse {
    p{color: var(--mor-cla);}
    font-size: 15px;
    animation: pulsar 1.25s ease-in-out infinite;
    border: none;
    /* padding-block: 6px;
    padding-inline: 10px;
    background-color: var(--mor-cla); */
}

@keyframes pulsar {
    0%, 100% {transform: scale(1);}
    50% {transform: scale(1.2);}
}

.pulse_2 {
    animation: pulsar_2 1.5s ease-in-out infinite;
    border: none;
}

@keyframes pulsar_2 {
    0%, 100% {transform: scale(1);}
    50% {transform: scale(1.025);}
}

/* Activaciones */
.info_off {
    display: none;
}
.info_on {
    display: block;
}

@media only screen and (min-width: 900px) {
    input {
        max-width: 400px;
    }
    .input_max {max-width: 600px;}
    body{
        /* overflow-y: scroll;
        overflow-x: scroll; */
    }
    main{
        width: 100%;
        height: 100dvh;
    }
    .work_map {
        height: 150px;
        margin: 10px;
        margin-bottom: 20px;
        img {height: 100%;}
    }
    .work_map:hover {
        opacity: 75%;
        cursor: pointer;
        scale: 1.11;
    }
    .btn_mini:hover {
        p{color: var(--mor-fon);}
        img{scale: 1.25; transform: rotate(90deg);transition: 0.5s;}   
    }
    .btn_mini {
        img{transition: 0.5s;}   
    }
    aside{
        position: absolute;
        left: 46%;
        bottom: 75px;
    }
    article {
        display: flex;
        flex-direction: row;
        width: 850px;
        top: 20%;
        .bor_block{display: none;}
        .bor_inline{display: flex;}
        margin-top: 250px;
    }
    .info_max {
        margin-bottom: 0px;
    }
    .info_icon{
        margin-block: 0px;
        width: 300px;
    }
    .info_pop{ margin-block: 200px;}
    .info_btn {
        margin-top: 0px;
        padding: 12px;
    }
    .info_box{
        display: flex;
        align-items: center;
        padding: 20px;
        gap: 12px;
        background-color: var(--tur-cla);
        color: var(--mor-osc);
        padding-inline: 20px;
        button{margin-inline: 10px;}
        h5{margin-block: 7.5px;}
    }
    footer{
        display: absolute;
        top: 0;
    }
    /* .text {margin-inline: 20%;} */
    .barras {
        display: flex;
        gap: 25px;
        justify-content: center;
    }
}