@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Questrial&family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Questrial&family=Syne:wght@400..800&display=swap');
:root{
    --color-principal: #33B09D;
    --color-fondo: #F8F9FA;
    --color-texto: #2D2D2D;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    background-color: var(--color-fondo);
}
body {
    display: flex;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    padding: 3vw;
    color: var(--color-texto);
    overflow: hidden;
    justify-content: center;
}
.container{
    display: flex;
    gap: 3vh;
    justify-content: center;
    align-items: center;
}
.left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 823px; 
    width: auto;
    height: 100%;
}
.textBlock{
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
.blocks {           
    align-items: center;
    max-height: 185px;
}
#block01 {
    display: flex;
}
#block02{
    display: flex;
}
p{
    text-align: justify;
}
body h1 {
    font-family: 'League Gothic', sans-serif;
    font-size: 6rem;
    line-height: 96%;
}
body h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    padding-bottom: 0.8vw;
}
.autoBlock{
    display: flex;
    width: auto;
    justify-content: space-between;
}
.summary{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}
#links-mobile{
    display: none;
}
.blocks-wrap{
    justify-content: space-between;
}
.grid{
    display: grid;
    width: auto;
    max-height: 86px;
    row-gap: 3vh;
    column-gap: 1vh;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
a:hover{
    transform: scale(1.00);
    font-weight: 500;
}
.footer a{
    display: flex;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
    color: var(--color-texto);
}
a:hover svg *{
    transition: 0.3s;
    fill: var(--color-principal);
}
.subtitle{
    font-weight: 500;
}
/*Right panels*/
.right{
    display: flex;
    height: 100%;
    width: auto;
    gap: 15px;
}
.panelGrp {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.panelDos, .panelTres {
    width: 355px;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 20px;
    position: relative;
    transition: flex 0.6s ease-in, filter 0.5s ease-in;
    cursor: pointer;
}
.panelDos {
    flex: 1;
    background-position: top;
    filter: grayscale(100%);
}
.panelTres {
    flex: 3;
    background-position: left;
    filter: grayscale(100%);
}
.panelTres:hover{
    background-size: 103%;
    filter: grayscale(0%);
    transition: background-size 0.8s ease, filter 0.5s ease-in;
}
.panelDos:hover {
    flex: 3;
    filter: grayscale(0%);
    background-position: top;
}
.panelDos:hover ~ .panelTres {
    filter: grayscale(100%);
    flex: 1;
}
.panelUno {
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    border-radius: 20px;
    min-width: 250px;
    position: relative;
    filter: grayscale(100%);
    transition: filter 0.5s ease-in;
    cursor: pointer;
}
.panelUno:hover {
    filter: grayscale(0%);
} 

.icon-tooltip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-tooltip::after {
    content: attr(data-label);
    position: absolute;
    bottom: -25px;
    background-color: var(--color-texto);
    color: white;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.icon-tooltip:hover::after {
    opacity: 1;
    transform: translateY(0);
}
/* skill bar */ 
.container-bar {
    position: relative;
    max-width: 500px;
    width: 100%;
    background: var(--color-fondo);
    margin: 0 15px;
    padding: 10px 20px;
    border-radius: 7px;
}

.container-bar .skill-box {
    width: 100%;
    margin: 25px 0;
}

.skill-box .title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-texto);
}

.skill-box .skill-bar {
    height: 8px;
    width: 100%;
    border-radius: 6px;
    margin-top: 6px;
    background: rgba(0,0,0,0.1);
}

.skill-bar .skill-per {
    position: relative;
    display: block;
    height: 100%;
    width: 90%;
    border-radius: 6px;
    background: var(--color-texto);
    animation: progress 1s ease-in-out forwards;
    opacity: 0;
}

.skill-per.spanish {
    width: 100%;
    animation-delay: 0.5s;
}

.skill-per.english {
    width: 90%;
    animation-delay: 0.5s;
}

@keyframes progress {
    0% {
        width: 0;
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.skill-per .tooltip {
    position: absolute;
    right: -14px;
    top: -28px;
    font-size: 9px;
    font-weight: 500;
    color: var(--color-fondo);
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--color-texto);
    z-index: 1;
    opacity: 0;
}
.skill-per .tooltip {
    animation: bounce 2s ease infinite;
    opacity: 100%;
}
.tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 10px;
    width: 10px;
    z-index: -1;
    background-color: var(--color-texto);
    transform: translateX(-50%) rotate(45deg);
}
.tooltip {
    transition: all 1s;
}

.tooltip::before {
    transition: all 1s;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-2px);
    }
}
/*Logo*/
.logo {
    position: relative;
    border: none;
    height: 180px;
    padding: 0px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}
.color-h1{
    color: var(--color-principal);
    letter-spacing: -0.03em;
}
.color-span{
    color: var(--color-texto);
}
.logo .title {
position: relative;
width: 100%;
height: 100%;
padding: 0px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
transition-delay: 0.6s;
}
@keyframes slide-up-once {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
.logo .title:nth-child(1) {
    animation: slide-up-once 1s ease forwards;
    animation-delay: 5s;
}

.logo .title:nth-child(2) {
    animation: slide-up-once 1s ease forwards;
    animation-delay: 5s;
}

/*li-ul*/
.li-custom{
    list-style: none;
    display: flex;
    align-items: center;
}
.punto {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.5em;
    height: 0.5em;
    background-color: var(--color-principal);
    border-radius: 50%;
    margin-right: 0.5em;
}
.punto::after{
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: var(--color-principal);
    animation: pulse 2s infinite;
}
@keyframes pulse{
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
/*footer*/
.footer{
    display: flex;
    justify-content: space-between;
}
.footerBlock{
    display: flex;
    align-items: center; 
    gap: 10px;
}
.icon-footer p{
    padding-left: 5px;
    font-size: 1rem;
}

/* ===== Responsive ===== */
/* 1250px: Tablet horizontal */
@media (max-width: 1250px) {
    .panelDos, .panelTres {
        width: 300px;
        background-size: 108%;
        background-repeat: no-repeat;
        border-radius: 20px;
        position: relative;
        transition: flex 0.6s ease-in, filter 0.5s ease-in;
        cursor: pointer;
    }
    .panelUno {
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
        border-radius: 20px;
        min-width: 230px;
        position: relative;
        filter: grayscale(100%);
        transition: filter 0.5s ease-in;
        cursor: pointer;
    }
    .textBlock{
        font-size: 1rem;
    }
    body h2 {
        font-family: 'League Gothic', sans-serif;
        font-size: 1.8rem;
        padding-bottom: 0.8vw;
    }
    .text-footer{
        font-size: 1rem;
    }
    .grid{
        row-gap: 1vh;
        column-gap: 1vh;
    }
}
/* 1080px: Tablet horizontal */
@media (max-width: 1080px) {
    .container{
        display: flex;
        gap: 1vh;
        justify-content: center;
        align-items: center;
    }
    .textBlock{
        display: flex;
        flex-direction: column;
        gap: 2vh;
    }
    body h1 {
        font-family: 'League Gothic', sans-serif;
        font-size: 5rem;
        line-height: 96%;
    }
    body h2 {
        font-family: 'League Gothic', sans-serif;
        font-size: 2rem;
        padding-bottom: 0.8vw;
    }
    .text-footer{
        display: none;
    }
    #links-web{
        display: none;
    }
    #links-mobile{
        display: flex;
        padding: 5px;
    }
    .grid{
        row-gap: 0.5vh;
        column-gap: 0.5vh;
    }
}
/*1000px*/
@media (max-width: 1000px) {
    body {
        display: flex;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.25rem;
        padding: 50px;
        color: var(--color-texto);
        overflow: scroll;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .mobileBtn{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .panelMobile{
        height: 160px;
        width: 100%;
        border-radius: 10px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    body h1 {
        font-family: 'League Gothic', sans-serif;
        font-size: 15vw;
        line-height: 96%;
    }
    #panel-web{
        display: none;
    }
    .container{
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
    }
    .blocks{
        flex-direction: column;
    }

    #block02{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .summary{
        height: auto;
    }
  
    #links-web{
        display: none;
    }
    #links-mobile{
        display: flex;
        padding: 5px;
    }

    .grid{
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }    
/*Logo*/
    .logo {
        position: relative;
        border: none;
        height: 150px;
        width: 100%;
        padding: 0px;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        overflow: hidden;
    }
    .color-h1{
        color: var(--color-principal);
        letter-spacing: -0.03em;
    }
    .color-span{
        color: var(--color-texto);
    }
    .logo .title {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 5px;
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        gap: 0.3em; 
        transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
        transition-delay: 0.6s;
    }
    .footer{
        padding: 40px 0 20px 0;
    }
    .footer a{
        transform: scale(1.2);
    }
    #titleTwo{
        display: none;
    }
    .logo .title,
    .logo .title:nth-child(1),
    .logo .title:nth-child(2) {
        animation: none !important;
    }
}
@media (max-width: 600px){
    body h1 {
        font-family: 'League Gothic', sans-serif;
        font-size: 14vw;
        line-height: 96%;
    }
    .logo {
        height: auto;
        overflow: visible; 
    }
    #links-mobile{
        padding: 10px;
    }        
}