/* ==========================================================
   NATALY MÉNDEZ
   PORTAFOLIO PERSONAL
   Identidad editorial
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {

    --marfil: #F8F5EF;
    --papel: #FCFAF7;

    --azul: #4D578C;
    --rosa: #F2529D;
    --turquesa: #4BBFB4;
    --durazno: #F2AB6D;
    --coral: #F28A80;

    --texto: #4E4E4E;
    --texto-sec: #777;

    --linea: #E8E1D9;

    --font-display:
        'Cormorant Garamond',
        serif;

    --font-body:
        'DM Sans',
        sans-serif;

    --transition:
        .4s ease;

}


/* ==========================================================
   RESET
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: var(--font-body);

    color: var(--texto);

    background:

        radial-gradient(circle at 10% 10%,
            rgba(242, 82, 157, .07),
            transparent 25%),

        radial-gradient(circle at 90% 80%,
            rgba(75, 191, 180, .07),
            transparent 25%),

        var(--marfil);

    line-height: 1.7;

}


/* ==========================================================
   SELECCIÓN
   ========================================================== */

::selection {

    background: var(--rosa);

    color: white;

}


/* ==========================================================
   NAVEGACIÓN
   ========================================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 24px 6vw;

    background: rgba(248, 245, 239, .92);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--linea);

}


.brand {

    font-family: var(--font-display);

    font-size: 1.7rem;

    color: var(--azul);

    text-decoration: none;

}


.brand-role {

    margin-left: auto;

    margin-right: 40px;

    font-size: .65rem;

    letter-spacing: .18em;

    color: var(--azul);

}


.main-nav {

    display: flex;

    gap: 28px;

}


.main-nav a {

    color: var(--texto);

    text-decoration: none;

    font-size: .8rem;

    transition: var(--transition);

}


.main-nav a:hover {

    color: var(--rosa);

}


/* ==========================================================
   HERO
   ========================================================== */

.hero {

    min-height: calc(100vh - 90px);

    padding: 90px 8vw;

    display: grid;

    grid-template-columns:
        70px minmax(300px, .9fr) 1.1fr;

    gap: 50px;

    align-items: center;

}


.hero-number,
.section-number {

    font-family: var(--font-display);

    font-size: 1.2rem;

    color: var(--rosa);

}


.hero-content {

    max-width: 650px;

}


.eyebrow {

    font-size: .7rem;

    letter-spacing: .2em;

    color: var(--azul);

    margin-bottom: 25px;

}


.hero h1 {

    font-family: var(--font-display);

    color: var(--azul);

    font-size: clamp(4rem, 7vw, 7.5rem);

    font-weight: 400;

    line-height: .85;

    margin-bottom: 40px;

}


.hero h1 em {

    display: block;

    color: var(--rosa);

    font-weight: 300;

}


.hero-description {

    max-width: 500px;

    font-size: 1rem;

    color: var(--texto-sec);

    margin-bottom: 35px;

}


.hero-link {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    color: var(--azul);

    text-decoration: none;

    border-bottom: 1px solid var(--rosa);

    padding-bottom: 8px;

    transition: var(--transition);

}


.hero-link span {

    color: var(--rosa);

    font-size: 1.4rem;

}


.hero-link:hover {

    gap: 30px;

}


.hero-image {

    position: relative;

}


.hero-image::before {

    content: "";

    position: absolute;

    width: 80px;

    height: 20px;

    background: #E7D7A4;

    top: -12px;

    right: 50px;

    transform: rotate(-5deg);

}


.hero-image img {

    width: 100%;

    max-height: 650px;

    object-fit: cover;

    display: block;

    border-radius: 4px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .12);

}


/* ==========================================================
   SECCIONES
   ========================================================== */

.projects,
.about,
.process,
.contact {

    padding: 120px 8vw;

    border-top: 1px solid var(--linea);

}


.section-intro {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    margin-bottom: 70px;

}


.section-intro h2 {

    font-family: var(--font-display);

    font-size: 4rem;

    font-weight: 400;

    color: var(--azul);

    line-height: 1;

}


.section-intro p {

    max-width: 420px;

    color: var(--texto-sec);

    align-self: end;

}


/* ==========================================================
   PROYECTOS
   ========================================================== */

.projects-grid {

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 60px 35px;

}


.project {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.project.visible {

    opacity: 1;

    transform: translateY(0);

}


.project-large {

    grid-row: span 2;

}


.project-wide {

    grid-column: 1 / -1;

}


.project a {

    color: inherit;

    text-decoration: none;

}


.project-image {

    overflow: hidden;

    background: var(--papel);

}


.project-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform .8s ease;
}


.project-large .project-image img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}


.project-wide .project-image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}


.project:hover .project-image img {
    transform: scale(1.02);
}


.project-info {

    padding: 20px 4px;

}


.project-info span {

    font-size: .65rem;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: var(--rosa);

}


.project-info h3 {

    font-family: var(--font-display);

    font-size: 2rem;

    font-weight: 400;

    color: var(--azul);

    margin: 5px 0;

}


.project-info p {

    font-size: .8rem;

    color: var(--texto-sec);

}


/* ==========================================================
   SOBRE MÍ
   ========================================================== */

.about {

    display: grid;

    grid-template-columns:
        80px 1fr 1fr;

    gap: 50px;

    background: var(--papel);

}


.about-content {

    opacity: 0;

    transform: translateY(30px);

    transition: 1s ease;

}


.about-content.visible {

    opacity: 1;

    transform: none;

}


.about-content h2 {

    font-family: var(--font-display);

    color: var(--azul);

    font-size: 4rem;

    line-height: .95;

    font-weight: 400;

    margin-bottom: 40px;

}


.about-content h2 em {

    color: var(--rosa);

}


.about-content p {

    max-width: 600px;

    margin-bottom: 20px;

    color: var(--texto-sec);

}


.skills {

    display: grid;

    grid-template-columns: 1fr;

    align-content: center;

    opacity: 0;

    transform: translateY(30px);

    transition: 1s .15s ease;

}


.skills.visible {

    opacity: 1;

    transform: none;

}


.skill {

    padding: 18px 0;

    border-bottom: 1px solid var(--linea);

    font-family: var(--font-display);

    font-size: 1.5rem;

    color: var(--azul);

}


.skill span {

    font-family: var(--font-body);

    font-size: .65rem;

    color: var(--rosa);

    margin-right: 15px;

}


/* ==========================================================
   PROCESO
   ========================================================== */

.process-list {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top: 1px solid var(--linea);

}


.process-item {

    padding: 40px 25px;

    border-right: 1px solid var(--linea);

    opacity: 0;

    transform: translateY(25px);

    transition: 1s ease;

}


.process-item.visible {

    opacity: 1;

    transform: none;

}


.process-item:last-child {

    border-right: none;

}


.process-item span {

    color: var(--rosa);

    font-family: var(--font-display);

}


.process-item h3 {

    font-family: var(--font-display);

    color: var(--azul);

    font-size: 2rem;

    font-weight: 400;

    margin: 15px 0;

}


.process-item p {

    font-size: .85rem;

    color: var(--texto-sec);

}


/* ==========================================================
   CONTACTO
   ========================================================== */

.contact {

    text-align: center;

    padding-top: 160px;

    padding-bottom: 160px;

}


.contact .eyebrow {

    margin-top: 30px;

}


.contact h2 {

    max-width: 900px;

    margin: 0 auto 40px;

    font-family: var(--font-display);

    font-size: clamp(3.5rem, 6vw, 6rem);

    font-weight: 400;

    color: var(--azul);

    line-height: .9;

}


.contact h2 em {

    color: var(--rosa);

    display: block;

}


.contact-email {

    display: inline-block;

    font-family: var(--font-display);

    font-size: 2rem;

    color: var(--azul);

    text-decoration: none;

    border-bottom: 1px solid var(--rosa);

    padding-bottom: 5px;

}


.contact-links {

    margin-top: 50px;

    display: flex;

    justify-content: center;

    gap: 30px;

}


.contact-links a {

    color: var(--texto-sec);

    text-decoration: none;

    font-size: .75rem;

    text-transform: uppercase;

    letter-spacing: .12em;

}


.contact-links a:hover {

    color: var(--rosa);

}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer {

    padding: 50px 8vw;

    border-top: 1px solid var(--linea);

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.footer-brand {

    font-family: var(--font-display);

    color: var(--azul);

    font-size: 2rem;

}


.footer p {

    font-size: .65rem;

    letter-spacing: .15em;

    color: var(--azul);

}


.footer span {

    font-size: .7rem;

    color: var(--texto-sec);

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px) {

    .hero {

        grid-template-columns:
            40px 1fr;

    }


    .hero-image {

        grid-column: 2;

    }


    .projects-grid {

        grid-template-columns: 1fr;

    }


    .project-large,
    .project-wide {

        grid-row: auto;

        grid-column: auto;

    }


    .about {

        grid-template-columns:
            40px 1fr;

    }


    .skills {

        grid-column: 2;

    }


    .process-list {

        grid-template-columns:
            1fr 1fr;

    }


}


@media(max-width:650px) {

    .site-header {

        padding: 18px 5vw;

    }


    .brand-role {

        display: none;

    }


    .main-nav {

        gap: 15px;

    }


    .main-nav a {

        font-size: .7rem;

    }


    .hero {

        padding: 70px 7vw;

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .hero-number {

        display: none;

    }


    .hero-image {

        grid-column: auto;

    }


    .hero h1 {

        font-size: 4.5rem;

    }


    .section-intro {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .section-intro h2 {

        font-size: 3rem;

    }


    .projects,
    .about,
    .process,
    .contact {

        padding: 80px 7vw;

    }


    .about {

        display: block;

    }


    .about .section-number {

        margin-bottom: 40px;

    }


    .skills {

        margin-top: 50px;

    }


    .process-list {

        grid-template-columns: 1fr;

    }


    .process-item {

        border-right: none;

        border-bottom: 1px solid var(--linea);

    }


    .footer {

        flex-direction: column;

        gap: 15px;

        text-align: center;

    }


    .contact-email {

        font-size: 1.4rem;

    }

}