/********************************************* GLOBAL STYLES **********************************************/
@font-face {
    font-family: OCR-A;
    font-display: swap;
    src: url('../fonts/OCR-A.ttf');
}

/********************************************* GLOBAL STYLES **********************************************/
* {
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

:root {
    --color-main: #00d0e0;
    --color-comp: #111;
    --color-dark: #222;
    --color-back: #eee;
    --color-text: #ddd;
    --font-h1: 2rem;
    --font-h2: 1.6rem;
    --font-h3: 1.2rem;
    --font-dc: 1rem;
    --font-sm: 0.9rem;
    font-size: 18px;
    font-family: "Work Sans", sans-serif;
}

body {
    overflow-x: clip;
    background-image: linear-gradient(#0001, #0001), url('../assets/imgs/back-hero.png');
    background-position: top;
    background-size: cover;
    background-attachment: fixed;
}

/* .parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 300vh;
    max-width: 100dvw;
}

.parallax-bg {
    width: 100%;
    transform: translateZ(-10px) scale(2);
}

.parallax-surf {
    position: relative;
    transform: translateZ(0) scale(1);
} */

.animate-enter {
    transform: translateX(0) scale(1) !important;
}

.animate-exit {
    transform: translateX(-20rem) scale(0.6) !important;
}

.main {
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--padding);
}

.section-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 6rem;
    max-width: 30rem;
    filter:drop-shadow( 0 0 0.5rem #000);
    animation: fade-in-right linear both;
    animation-timeline: view();
}

.section-header__title {
    font-size: var(--font-h2);
    font-weight: 700;
    text-align: center;
    text-wrap: balance;
    letter-spacing: .2rem;
    line-height: 1.4em;
}

.section-header__desc {
    font-size: var(--font-dc);
    text-align: center;
    text-wrap: pretty;
    letter-spacing: 0.1rem;
    line-height: 1.4em;
}

/********************************************* LOGO STYLES **********************************************/
#logo {
    overflow: visible;
}

.cls-1 {
    fill: #00d0e0;
}

.cls-1, .cls-2, .cls-3 {
    stroke-width: 0px;
}

.cls-6 {
    stroke: #111111;
    stroke-miterlimit: 10;
}

.cls-7 {
    stroke: #00d0e0;
    stroke-miterlimit: 10;
}

.cls-6, .cls-2 {
    fill: #eeeeee;
}

.cls-7, .cls-3 {
    fill: #111111;
}

.yin, .yang {
    animation: appear 1s 3s both;
}

.cls-2, .cls-3, .cls-6, .cls-7 {
    animation: appear 2s var(--delay) both;
}

.cls-1 {
    animation: appear 1s 1s both;
}

/********************************************* HEADER STYLES **********************************************/
.header {
    overflow-x: clip;
}

.header-firm {
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
    animation: fade-in-right linear both;
    animation-timeline: view();
    animation-range-start: contain -40%;
}

.header-firm__logo {
    width: calc(var(--font-h1)*3);
}

.header-firm__title {
    display: flex;
    flex-direction: column;
    color: var(--color-back);
    font-size: var(--font-h1);
    font-family: OCR-A;
    font-weight: 700;
    letter-spacing: 0.2rem;
    animation: appear 2s ease 1s both;
}

.header-firm__title span {
    display: block;
    color: var(--color-main);
}

.header__text {
    max-width: 20rem;
    font-size: var(--font-dc);
    font-weight: 600;
    letter-spacing: 0.2rem;
    line-height: 1.8rem;
}

.header__slogan {
    align-self: flex-end;
    display: flex;
    place-items: center;
    padding: 1rem;
    aspect-ratio: 500/576;
    color: var(--color-text);
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
    text-align: center;
    animation: fade-in-right linear both;
    animation-timeline: view();
    animation-range-start: contain -80%;
}

.header-nav {
    align-self: flex-start;
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #0008);
    animation: fade-in-right linear both;
    animation-timeline: view();
    animation-range-start: contain -60%;
}

.header-nav__list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    min-height: 8rem;
    aspect-ratio: 500/576;
    position: relative;
}

.header-nav__item:nth-child(1) {
    align-self: center;
}

.header-nav__item:nth-child(2) {
    align-self: center;
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
}

.header-nav__item:nth-child(3) {
    align-self: center;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
}

.header-nav__item:nth-child(4) {
    align-self: center;
}

.header-nav__img {
    width: 1.5rem;
}

.header__cta-text {
    justify-self: flex-end;
    display: flex;
    place-items: center;
    padding: 1rem;
    color: var(--color-comp);
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
    text-align: center;
    animation: fade-in-right linear both;
    animation-timeline: view();
    /* animation-range-start: contain -40%; */
}

.header__cta {
    align-self: flex-end;
    padding: 0.5rem 1rem;
    color: var(--color-main);
    font-size: var(--font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    aspect-ratio: 500/576;
    background-color: transparent;
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
    border: none;
    animation: fade-in-right linear both;
    animation-timeline: view();
    /* animation-range-start: contain -30%; */
}

/********************************************* SKILLS STYLES **********************************************/
.skills .section-header {
    align-self: flex-start;
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.skills-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 25rem;
    gap: 1rem;
    padding: 3rem;
}

.skills-container:nth-child(2) {
    align-self: flex-end;
    color: var(--color-comp);
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #0008);
    animation: fade-in-right linear both;
    animation-timeline: view();
}

.skills-container:last-child {
    align-self: flex-start;
    color: var(--color-text);
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
    animation: fade-in-right linear both;
    animation-timeline: view();
}

.skills-container__title {
    padding: 0.7rem 0;
    font-size: var(--font-h3);
    letter-spacing: 0.1rem;
}

.skills-container-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.skills-container:last-child .skills-container-list {
    gap: 0.7rem;
}

.skills-container-list__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: .5rem;
}

.skills-container:nth-child(2) .skills-container-list__item {
    border: 1px solid var(--color-comp);
}

.skills-container:last-child .skills-container-list__item {
    border: 1px solid var(--color-text);
}

.skills-container-list__name {
    font-size: var(--font-sm);
    text-transform: lowercase;
    letter-spacing: 0.1rem;
}

.skills-container-list__icon {
    width: 1rem;
    height: 1rem;
}

/********************************************* PROJECTS STYLES **********************************************/
.projects {
    align-items: stretch;
    color: var(--color-text);
}

.projects .section-header {
    align-self: flex-end;
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
}

.projects-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 1.5rem;
}

.projects-list__item {
    flex: 0 0 min(90vw, 20rem);
    max-width: 20rem;
    aspect-ratio: 500/576;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: fade-in-right linear both;
    animation-timeline: view();
    transition: scale 0.3s;
}

.projects-list__link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
    padding: 5rem 3rem;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.projects-list__item:hover {
    scale: 1.1;
}

.projects-list__item:first-child {
    background: linear-gradient(#0002, #000e 90%), url("../assets/imgs/sofispa.png");
    background-position: center;
    background-size: contain;
    filter: drop-shadow( 0 0 0.5rem #000);
}

.projects-list__item:nth-child(2) {
    background: linear-gradient(#0006, #000e 90%), url("../assets/imgs/a3y.png");
    background-position: center;
    background-size: contain;
    filter: drop-shadow( 0 0 0.5rem #000);
}

.projects-list__item:last-child {
    background: linear-gradient(#0006, #000e 90%), url("../assets/icons/blackflow.svg");
    background-position: center;
    background-size: contain;
    filter: drop-shadow( 0 0 0.5rem #000);
}

.projects-list__title {
    font-size: var(--font-h3);
    letter-spacing: 0.1rem;
    text-align: center;
}

.projects-list__desc {
    text-align: center;
}

/********************************************* CERTIFICATES STYLES **********************************************/
.certificates {
    color: var(--color-comp);
    gap: 6rem;
    padding: 4rem 0;
    overflow: clip;
}

.certificates .section-header {
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.certificates-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2rem;
    max-width: 40rem;
}

.certificates-list__item {
    flex: 0 0 min(10rem, 40vw);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 2rem;
    aspect-ratio: 500/576;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: #eee;
    filter:drop-shadow( 0 0 0.5rem #000);
    border-radius: 1rem;
    border: 1px solid #0004;
    box-shadow: 0 0 1rem #0004;
    animation: fade-in-right linear both;
    animation-timeline: view();
    transition: scale 0.3s;
}

.certificates-list__item:hover {
    scale: 1.1;
}

.certificates-list__item:nth-child(1) {
    background-image: linear-gradient(#eee1, #eee 90%), url("../cert/animaciones.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.certificates-list__item:nth-child(2) {
    background-image: linear-gradient(#eee1, #eee 90%), url("../cert/design.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.certificates-list__item:nth-child(3) {
    background-image: linear-gradient(#eee1, #eee 90%), url("../cert/frontend.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.certificates-list__item:nth-child(4) {
    background-image: linear-gradient(#eee1, #eee 90%), url("../cert/HTML-CSS.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.certificates-list__item:nth-child(5) {
    background-image: linear-gradient(#eee1, #eee 90%), url("../cert/responsive.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.certificates-list__name {
    opacity: 0;
    color: var(--color-comp);
    font-size: var(--font-dc);
    font-weight: 500;
    text-align: center;
    transition: opacity 0.3s;
}

.certificates-list__item:hover .certificates-list__name {
    opacity: 1;
}

/********************************************* CONTACT STYLES **********************************************/
.contact {
    color: var(--color-text);
}

.contact .section-header {
    align-self: flex-start;
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
}

.contact-form {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 8rem;
    max-width: 35rem;
    color: var(--color-comp);
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #0008);
    animation: fade-in-right linear both;
    animation-timeline: view();
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contact-form__field:last-of-type {
    grid-row: span 3;
    align-self: stretch;
}

.contact-form__label {
    font-size: var(--font-sm);
    font-weight: 600;
}

.contact-form__input {
    padding: 0.7rem;
    height: 100%;
    font-size: var(--font-dc);
    font-family: inherit;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-dark);
}

.contact-form__field:last-of-type .contact-form__input {
    resize: none;
    overflow-y: auto;
}

.contact-form__button {
    margin: auto auto 0 auto;
    padding: 0.5rem 3rem;
    color: var(--color-text);
    font-size: var(--font-dc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    background-color: var(--color-comp);
    border-radius: 0.5rem;
    border:  none;
    transition: outline 0.1s, outline-offset 0.1s;
}

.contact-form__button:hover {
    outline: 2px solid var(--color-comp);
    outline-offset: 5px;
}

/********************************************* FOOTER STYLES **********************************************/
.footer {
    overflow-x: clip;
}

.footer-firm {
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #0008);
    animation: fade-in-right linear both;
    animation-timeline: view();
}

.footer-firm__logo {
    width: calc(var(--font-h2)*3);
}

.footer-firm__title {
    font-size: var(--font-h2);
    font-family: OCR-A;
}

.footer-firm__title span {
    display: block;
    color: var(--color-main);
}

.footer-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-grid__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    aspect-ratio: 500/576;
}

.footer-grid__cell:first-child {
    align-self: flex-end;
    background-image: url('../assets/icons/white-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #0008);
    animation: fade-in-right linear both;
    animation-timeline: view();
}

.footer-grid__cell:last-child {
    align-self: flex-start;
    color: var(--color-text);
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:drop-shadow( 0 0 0.5rem #000);
    animation: fade-in-right linear both;
    animation-timeline: view();
}

.footer-grid__title {
    padding: 0.5rem 2rem;
    text-align: center;
}

.footer-grid__cell:first-child .footer-grid__title {
    border-bottom: 1px solid var(--color-comp);
}

.footer-grid__cell:last-child .footer-grid__title {
    border-bottom: 1px solid var(--color-text);
}

.footer-grid__list {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.footer-grid__link {
    display: block;
    padding: 0.7rem;
    color: inherit;
    text-decoration: none;
}

.footer-rights {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--color-text);
    aspect-ratio: 500/576;
    background-image: url('../assets/icons/black-hex.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    filter:drop-shadow( 0 0 0.5rem #000);
    animation: fade-in-right linear both;
    animation-timeline: view();
    animation-range-end: 60%;
}

.footer-rights__copy {
    font-size: var(--font-dc);
    text-transform: uppercase;
}