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

:root {
    --negro: #181516;
    --negro-suave: #211d1d;

    --hueso: #e8dfd5;
    --papel: #d9cec2;

    --gris: #8d8580;
    --gris-claro: #b9afa8;

    --vino: #632832;
    --vino-oscuro: #401b22;

    --blanco: #f2eee9;

    --max-width: 1200px;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--negro);
    color: var(--hueso);

    font-family: Georgia, "Times New Roman", serif;

    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================
   HEADER
========================= */

.header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 10;
}

.header__container {
    width: min(90%, var(--max-width));

    margin: 0 auto;

    padding: 30px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* LOGO */

.logo {
    font-size: 18px;
    letter-spacing: 4px;
    font-weight: bold;
}

.logo span {
    display: block;

    font-size: 10px;
    letter-spacing: 6px;

    margin-top: -5px;

    color: var(--gris-claro);
}


/* NAV */

.nav {
    display: flex;
    gap: 30px;

    font-family: Arial, sans-serif;

    font-size: 12px;
    text-transform: uppercase;

    letter-spacing: 2px;
}

.nav a {
    transition: color .3s ease;
}

.nav a:hover {
    color: var(--papel);
}

.nav__button {
    display: none;

    background: none;
    border: none;

    color: var(--hueso);

    font-size: 24px;
}


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

.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    position: relative;

    padding: 120px 5%;

    background:
        radial-gradient(circle at 70% 40%,
            rgba(99, 40, 50, .18),
            transparent 35%),
        var(--negro);
}

.hero__content {
    width: min(800px, 100%);
    margin: 0 auto;
}

.hero__eyebrow {
    font-family: Arial, sans-serif;

    text-transform: uppercase;

    letter-spacing: 5px;

    font-size: 11px;

    color: var(--gris-claro);

    margin-bottom: 25px;
}

.hero h1 {
    font-size: clamp(60px, 10vw, 150px);

    line-height: .85;

    letter-spacing: -5px;

    font-weight: normal;
}

.hero h1 span {
    color: var(--vino);

    font-style: italic;
}

.hero__description {
    max-width: 420px;

    margin-top: 40px;

    color: var(--gris-claro);

    font-size: 17px;
}

.hero__link {
    display: inline-block;

    margin-top: 45px;

    font-family: Arial, sans-serif;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 11px;

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

    padding-bottom: 7px;
}


/* =========================
   SECTIONS
========================= */

.section {
    width: min(90%, var(--max-width));

    margin: 0 auto;

    padding: 130px 0;
}

.section__heading {
    display: flex;
    align-items: flex-start;

    gap: 25px;

    margin-bottom: 70px;
}

.section__number {
    font-family: Arial, sans-serif;

    font-size: 11px;

    color: var(--vino);

    letter-spacing: 2px;
}

.section__eyebrow {
    font-family: Arial, sans-serif;

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: 10px;

    color: var(--gris-claro);

    margin-bottom: 10px;
}

.section h2 {
    font-size: clamp(45px, 7vw, 85px);

    line-height: 1;

    font-weight: normal;
}


/* =========================
   OBRA
========================= */

.obra__intro {
    display: flex;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 60px;
}

.obra__intro p {
    max-width: 450px;

    color: var(--gris-claro);
}

.text-link {
    display: inline-block;

    font-family: Arial, sans-serif;

    text-transform: uppercase;

    font-size: 10px;

    letter-spacing: 2px;

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

    padding-bottom: 6px;

    height: fit-content;
}

.obra__featured {
    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 70px;

    align-items: center;
}

.obra__image {
    aspect-ratio: 4 / 5;

    background: var(--negro-suave);

    overflow: hidden;
}

.obra__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition: transform .5s ease;
}

.obra__image:hover img {
    transform: scale(1.03);
}

.placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--gris);

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 3px;
}

.obra__category,
.book__year,
.writing__type {
    font-family: Arial, sans-serif;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 10px;

    color: var(--vino);
}

.obra__info h3 {
    font-size: 42px;

    font-weight: normal;

    line-height: 1.1;

    margin: 15px 0 25px;
}

.obra__info p:not(.obra__category) {
    color: var(--gris-claro);

    margin-bottom: 30px;
}
.obra__card {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* =========================
   ESCRITURA
========================= */

.section--writing {
    border-top: 1px solid rgba(232, 223, 213, .1);
}

.writing__content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 100px;
}


/* =========================
   TEXTO DESTACADO
========================= */

.writing__featured {
    padding-right: 60px;
    border-right: 1px solid rgba(232, 223, 213, .1);
}

.writing__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--vino);
}

.writing__featured h3 {
    font-size: 56px;
    line-height: 1.05;
    font-weight: normal;
    margin: 25px 0 30px;
    max-width: 650px;
}

.writing__excerpt {
    max-width: 480px;
    color: var(--gris-claro);
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 35px;
}


/* =========================
   LISTADO
========================= */

.writing__list {
    display: flex;
    flex-direction: column;
}

.writing__item {
    display: grid;
    grid-template-columns: 40px 1fr 30px;
    gap: 20px;
    align-items: center;

    padding: 25px 0;

    border-bottom: 1px solid rgba(232, 223, 213, .1);

    transition: padding-left .3s ease;
}

.writing__item:first-child {
    border-top: 1px solid rgba(232, 223, 213, .1);
}

.writing__item:hover {
    padding-left: 10px;
}

.writing__item-number {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--gris);
}

.writing__category {
    display: block;

    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--vino);
}

.writing__list h4 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1.2;
    font-weight: normal;
    margin: 7px 0 0;
}

.writing__arrow {
    font-size: 18px;
    color: var(--gris);
    transition: transform .3s ease;
}

.writing__item:hover .writing__arrow {
    transform: translateX(5px);
    color: var(--blanco);
}


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

@media (max-width: 900px) {

    .writing__content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .writing__featured {
        padding-right: 0;
        padding-bottom: 50px;
        border-right: none;
        border-bottom: 1px solid rgba(232, 223, 213, .1);
    }

    .writing__featured h3 {
        font-size: 48px;
    }

}


@media (max-width: 650px) {

    .writing__content {
        gap: 45px;
    }

    .writing__featured {
        padding-bottom: 40px;
    }

    .writing__featured h3 {
        font-size: 38px;
    }

    .writing__excerpt {
        font-size: 17px;
    }

    .writing__item {
        grid-template-columns: 30px 1fr 20px;
        gap: 12px;
        padding: 22px 0;
    }

    .writing__list h4 {
        font-size: 20px;
    }

}

/* =========================
   LIBROS
========================= */

.section--books {
    background: var(--papel);

    color: var(--negro);

    width: 100%;

    padding-left: 5%;
    padding-right: 5%;
}

.books__content {
    width: min(100%, var(--max-width));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}

.books__cover {
    max-width: 420px;

    aspect-ratio: 3 / 4;

    background: var(--negro);
}

.books__info h3 {
    font-size: 55px;

    line-height: 1;

    font-weight: normal;

    margin: 15px 0 25px;
}

.books__info p:not(.book__year) {
    color: #665e59;

    max-width: 420px;

    margin-bottom: 30px;
}

.button {
    display: inline-block;

    background: var(--vino);

    color: var(--blanco);

    padding: 14px 25px;

    font-family: Arial, sans-serif;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 10px;
}

.button--light {
    background: var(--hueso);

    color: var(--negro);
}
.books__actions {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-top: 40px;
}

.books__actions .button {
    display: inline-block;
    padding: 14px 22px;
    border: 1px solid var(--vino);
    background: transparent;
    color: var(--vino);
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.books__actions .button:hover {
    background: var(--vino);
    color: var(--blanco);
}
@media (max-width: 650px) {
    .books__actions {
        flex-direction: column;
        align-items: center;
        gap: 22px;
        margin-top: 35px;
    }

    .books__actions .button {
        width: auto;
    }
}


/* =========================
   SOBRE
========================= */

.about__content {
    display: grid;

    grid-template-columns: 1.3fr 1fr;

    gap: 100px;
}

.about__statement {
    font-size: clamp(35px, 5vw, 65px);

    line-height: 1.05;
}

.about__text {
    color: var(--gris-claro);

    max-width: 420px;
}

.about__text p {
    margin-bottom: 30px;
}


/* =========================
   ENCARGOS
========================= */

.section--commissions {
    width: 100%;
    background: var(--vino-oscuro);
    padding: 120px 5%;
}


/* =========================
   INTRO
========================= */

.commissions__intro {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 100px;
    align-items: end;

    max-width: var(--max-width);
    margin: 0 auto 100px;
}

.commissions__statement {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.05;
    font-style: italic;
    margin: 0;
}

.commissions__text {
    max-width: 480px;
}

.commissions__text p {
    color: var(--papel);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 20px;
}


/* =========================
   TIPOS DE ENCARGO
========================= */

.commissions__types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;

    max-width: var(--max-width);
    margin: 0 auto;

    border-top: 1px solid rgba(232, 223, 213, .15);
}

.commission__type {
    padding: 35px 30px 35px 0;
    border-right: 1px solid rgba(232, 223, 213, .15);
}

.commission__type:not(:first-child) {
    padding-left: 30px;
}

.commission__type:last-child {
    border-right: none;
}

.commission__type>span {
    display: block;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;

    color: var(--papel);
    margin-bottom: 35px;
}

.commission__type h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: normal;
    margin: 0 0 15px;
}

.commission__type p {
    max-width: 230px;

    color: var(--papel);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}


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

.commissions__contact {
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: var(--max-width);
    margin: 90px auto 0;
    padding-top: 35px;

    border-top: 1px solid rgba(232, 223, 213, .15);
}

.commissions__contact p {
    color: var(--papel);
    font-size: 18px;
    margin: 0;
}

.commissions__contact .link-arrow {
    color: var(--blanco);
    border-bottom-color: var(--papel);
}


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

@media (max-width: 900px) {

    .section--commissions {
        padding: 100px 7%;
    }

    .commissions__intro {
        grid-template-columns: 1fr;
        gap: 45px;
        margin-bottom: 75px;
    }

    .commissions__types {
        grid-template-columns: 1fr 1fr;
    }

    .commission__type:nth-child(2) {
        border-right: none;
    }

    .commission__type:nth-child(3),
    .commission__type:nth-child(4) {
        border-top: 1px solid rgba(232, 223, 213, .15);
    }

    .commission__type:nth-child(3) {
        padding-left: 0;
    }

    .commission__type:nth-child(4) {
        padding-left: 30px;
    }

    .commissions__contact {
        margin-top: 70px;
    }

}


@media (max-width: 650px) {

    .section--commissions {
        padding: 80px 7%;
    }

    /* ENCABEZADO */

    .section--commissions .section__header {
        margin-bottom: 55px;
    }


    /* INTRO */

    .commissions__intro {
        display: block;
        margin: 0 0 65px;
    }

    .commissions__statement {
        font-size: 42px;
        line-height: 1.08;
        margin-bottom: 35px;
    }

    .commissions__text {
        max-width: none;
    }

    .commissions__text p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* TIPOS DE ENCARGO */

    .commissions__types {
        display: block;
        margin: 0;
    }

    .commission__type,
    .commission__type:not(:first-child),
    .commission__type:nth-child(3),
    .commission__type:nth-child(4) {
        padding: 28px 0;
        border: none;
        border-top: 1px solid rgba(232, 223, 213, .15);
    }

    .commission__type:first-child {
        border-top: none;
    }

    .commission__type>span {
        margin-bottom: 16px;
    }

    .commission__type h3 {
        font-size: 25px;
        margin-bottom: 10px;
    }

    .commission__type p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.6;
    }


    /* CONTACTO */

    .commissions__contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 25px;
        margin-top: 55px;
        padding-top: 30px;
    }

    .commissions__contact p {
        font-size: 17px;
        line-height: 1.5;
    }

}

/* =========================
   SUPPORT
========================= */

.support {
    width: min(90%, 700px);

    margin: 0 auto;

    padding: 140px 0;

    text-align: center;
}

.support h2 {
    font-size: clamp(50px, 8vw, 90px);

    line-height: .95;

    font-weight: normal;

    margin-bottom: 25px;
}

.support>p:not(.section__eyebrow) {
    color: var(--gris-claro);

    margin-bottom: 30px;
}


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

.footer {
    border-top: 1px solid rgba(232, 223, 213, .1);

    padding: 40px 5%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family: Arial, sans-serif;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--gris-claro);
}

.footer__brand {
    color: var(--hueso);
}


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

@media (max-width: 768px) {

    .nav {
        display: none;
    }

    .nav__button {
        display: block;
    }

    .hero {
        padding-left: 7%;
        padding-right: 7%;
    }

    .hero h1 {
        letter-spacing: -3px;
    }

    .section {
        padding: 90px 0;
    }

    .obra__intro {
        display: block;
    }

    .obra__intro .text-link {
        margin-top: 25px;
    }

    .obra__featured,
    .writing__content,
    .books__content,
    .about__content {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .writing__featured {
        padding-right: 0;

        border-right: none;
    }

    .writing__featured h3 {
        font-size: 38px;
    }

    .books__cover {
        max-width: 300px;
    }

    .books__info h3 {
        font-size: 42px;
    }

    .about__statement {
        font-size: 42px;
    }

    .footer {
        flex-direction: column;

        gap: 15px;

        text-align: center;
    }
}
/* =========================
   MOBILE MENU
========================= */

@media (max-width: 768px) {

    .header__container {
        position: relative;
    }

    .nav {
        position: absolute;

        top: 90px;
        left: 0;

        width: 100%;

        padding: 30px;

        background: var(--negro-suave);

        display: none;

        flex-direction: column;

        gap: 20px;

        border: 1px solid rgba(232, 223, 213, .1);
    }

    .nav.active {
        display: flex;
    }

    .nav a {
        font-size: 11px;
    }

}
/* =========================
   TABLET — LIBROS
========================= */

@media (max-width: 900px) {

    .books__content {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .books__cover {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .books__info h3 {
        font-size: 44px;
    }

}
/* =========================
   MOBILE — LIBROS
========================= */

@media (max-width: 650px) {

    .section--books {
        padding-left: 7%;
        padding-right: 7%;
    }

    .books__content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .books__cover {
        width: min(75%, 280px);
        margin: 0 auto;
    }

    .books__info {
        text-align: center;
    }

    .books__info h3 {
        font-size: 40px;
    }

    .books__info p:not(.book__year) {
        margin-left: auto;
        margin-right: auto;
    }

}
/* =========================
   OBRA — GALERÍA
========================= */

.obra__intro {
    max-width: 600px;
    margin-bottom: 60px;
}

.obra__intro p {
    font-size: 20px;
    line-height: 1.7;
    color: var(--gris-claro);
}


/* GRID */

.obra__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px 40px;
}


/* TARJETA */

.obra__card {
    cursor: pointer;
}

.obra__card-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--negro-suave);
    margin-bottom: 22px;
}
.obra__card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 20px;
}

.obra__card-image .placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(232, 223, 213, .1);

    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gris);
}


/* INFORMACIÓN */

.obra__card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.obra__category {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--vino);
}

.obra__card-info h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: normal;
}


/* EFECTO */

.obra__card-image {
    transition: transform .4s ease;
}

.obra__card:hover .obra__card-image {
    transform: translateY(-5px);
}

.obra__card:hover .obra__category {
    color: var(--blanco);
}


/* FOOTER DE LA SECCIÓN */

.obra__footer {
    margin-top: 70px;
    text-align: center;
}
/* =========================
   OBRA — RESPONSIVE
========================= */

@media (max-width: 768px) {

    .obra__grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .obra__intro {
        margin-bottom: 45px;
    }

    .obra__intro p {
        font-size: 18px;
    }

    .obra__card-image {
        aspect-ratio: 4 / 5;
    }

    .obra__card-info h3 {
        font-size: 25px;
    }

    .obra__footer {
        margin-top: 55px;
    }
}
/* =========================
   OBRA — DETALLES EDITORIALES
========================= */

.obra__card:nth-child(2) {
    margin-top: 80px;
}

.obra__card:nth-child(3) {
    margin-top: -20px;
}

.obra__card:nth-child(4) {
    margin-top: 60px;
}


/* Línea sutil sobre la información */

.obra__card-info {
    position: relative;
    padding-top: 16px;
}

.obra__card-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 1px;
    background: var(--vino);
}


/* El enlace final */

.obra__footer .link-arrow {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vino);
}
@media (max-width: 768px) {

    .obra__card:nth-child(2),
    .obra__card:nth-child(3),
    .obra__card:nth-child(4) {
        margin-top: 0;
    }

}
/* =========================
   ESCRITURA
========================= */

.writing__content {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 100px;
    align-items: start;
}


/* DESTACADO */

.writing__featured {
    padding: 50px;
    border: 1px solid rgba(232, 223, 213, .12);
    background: var(--negro-suave);
}

.writing__meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--vino);
}

.writing__featured h3 {
    max-width: 700px;
    margin: 0 0 30px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: normal;
    line-height: 1;
}

.writing__excerpt {
    max-width: 600px;
    margin-bottom: 40px;

    font-size: 18px;
    line-height: 1.8;
    color: var(--gris-claro);
}


/* LISTADO */

.writing__list {
    border-top: 1px solid rgba(232, 223, 213, .15);
}

.writing__item {
    display: grid;
    grid-template-columns: 45px 1fr 25px;
    gap: 20px;
    align-items: center;

    padding: 28px 0;

    border-bottom: 1px solid rgba(232, 223, 213, .15);

    cursor: pointer;
}

.writing__item-number {
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: var(--gris);
}

.writing__category {
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--vino);
}

.writing__item h4 {
    margin: 7px 0 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: normal;
}

.writing__arrow {
    font-size: 18px;
    transition: transform .3s ease;
}

.writing__item:hover .writing__arrow {
    transform: translateX(6px);
}
@media (max-width: 768px) {

    .writing__content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .writing__featured {
        padding: 30px;
    }

    .writing__meta {
        margin-bottom: 40px;
    }

    .writing__featured h3 {
        font-size: 42px;
    }

    .writing__excerpt {
        font-size: 16px;
    }

}
/* =========================
   PORTADA REAL — LIBROS
========================= */

.books__cover {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.books__cover img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
/* =========================
   PROYECTO — LIBRO
========================= */

.project {
    overflow: hidden;
}


/* =========================
   HERO DEL PROYECTO
========================= */

.project__hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 150px 5% 100px;
}

.project__label {
    margin-bottom: 35px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--vino);
}

.project__hero h1 {
    max-width: 950px;
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(60px, 9vw, 130px);
    font-weight: normal;
    line-height: .9;
    letter-spacing: -3px;
}

.project__author {
    margin: 50px 0 8px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.project__date {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;

    color: var(--gris);
}


/* =========================
   PORTADA
========================= */

.project__cover {
    width: min(760px, 90%);
    margin: 0 auto 160px;

    display: flex;
    justify-content: center;
}

.project__cover img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================
   PRESENTACIÓN
========================= */

.project__intro {
    max-width: var(--max-width);
    margin: 0 auto 150px;
    padding: 0 5%;

    display: grid;
    grid-template-columns: .6fr 1.4fr;
    gap: 80px;
}

.project__intro-label {
    padding-top: 10px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--vino);
}

.project__intro-content {
    max-width: 700px;
}

.project__intro-content h2 {
    margin: 0 0 45px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5vw, 70px);
    font-weight: normal;
    line-height: 1;
}

.project__intro-content p {
    max-width: 620px;
    margin-bottom: 25px;

    font-size: 18px;
    line-height: 1.8;

    color: var(--gris-claro);
}


/* =========================
   IMAGEN / SINOPSIS
========================= */

.project__image {
    width: min(1000px, 90%);
    margin: 0 auto 170px;
}

.project__image img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================
   CIERRE
========================= */

.project__closing {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 5% 170px;

    text-align: center;
}

.project__closing span {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--vino);
}

.project__closing h2 {
    margin: 35px 0 50px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 85px);
    font-weight: normal;
    line-height: 1;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .project__hero {
        padding-top: 110px;
        padding-bottom: 70px;
    }

    .project__hero h1 {
        font-size: clamp(48px, 14vw, 75px);
        letter-spacing: -2px;
    }

    .project__author {
        margin-top: 40px;
    }

    .project__cover {
        width: 90%;
        margin-bottom: 100px;
    }

    .project__intro {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 100px;
    }

    .project__intro-content h2 {
        font-size: 42px;
        margin-bottom: 30px;
    }

    .project__intro-content p {
        font-size: 16px;
    }

    .project__image {
        width: 92%;
        margin-bottom: 100px;
    }

    .project__closing {
        padding-bottom: 100px;
    }

    .project__closing h2 {
        font-size: 48px;
    }

}
/* =========================================
   PÁGINA INDIVIDUAL — OBRA
========================================= */

.artwork {
    padding-top: 120px;
}

/* HERO */

.artwork__hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 5% 90px;
}

.artwork__back {
    display: inline-block;
    margin-bottom: 70px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gris);
    transition: color .3s ease;
}

.artwork__back:hover {
    color: var(--blanco);
}

.artwork__label {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vino);
    margin-bottom: 20px;
}

.artwork__hero h1 {
    max-width: 900px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(60px, 10vw, 150px);
    line-height: .9;
    font-weight: normal;
}

.artwork__author {
    margin: 35px 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.artwork__date {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gris);
}


/* IMAGEN PRINCIPAL */

.artwork__main-image {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--negro-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

.artwork__main-image img {
    display: block;
    width: 100%;
    max-height: 850px;
    object-fit: contain;
}


/* INTRODUCCIÓN */

.artwork__intro {
    max-width: var(--max-width);
    margin: 150px auto;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 100px;
}

.artwork__intro-label {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vino);
}

.artwork__intro-content {
    max-width: 700px;
}

.artwork__intro-content h2 {
    margin: 0 0 45px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.05;
    font-weight: normal;
}

.artwork__intro-content p {
    max-width: 600px;
    margin: 0 0 22px;
    color: var(--gris-claro);
    font-size: 18px;
    line-height: 1.8;
}


/* CIERRE */

.artwork__closing {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 5% 150px;
    border-top: 1px solid rgba(232, 223, 213, .1);
}

.artwork__closing span {
    display: block;
    margin-bottom: 30px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vino);
}

.artwork__closing h2 {
    max-width: 600px;
    margin: 0 0 45px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(50px, 7vw, 90px);
    line-height: .95;
    font-weight: normal;
}


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

@media (max-width: 900px) {

    .artwork {
        padding-top: 100px;
    }

    .artwork__hero {
        padding-bottom: 70px;
    }

    .artwork__back {
        margin-bottom: 55px;
    }

    .artwork__main-image {
        width: 86%;
        padding: 35px;
    }

    .artwork__intro {
        grid-template-columns: 1fr;
        gap: 35px;
        margin: 110px auto;
    }

    .artwork__closing {
        padding-bottom: 110px;
    }
}


@media (max-width: 650px) {

    .artwork {
        padding-top: 80px;
    }

    .artwork__hero {
        padding: 0 7% 55px;
    }

    .artwork__back {
        margin-bottom: 45px;
        font-size: 9px;
    }

    .artwork__label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .artwork__hero h1 {
        font-size: 58px;
        line-height: .95;
    }

    .artwork__author {
        font-size: 19px;
        margin-top: 28px;
    }

    .artwork__main-image {
        width: 86%;
        padding: 20px;
    }

    .artwork__main-image img {
        max-height: 600px;
    }

    .artwork__intro {
        display: block;
        margin: 90px auto;
        padding: 0 7%;
    }

    .artwork__intro-label {
        margin-bottom: 30px;
    }

    .artwork__intro-content h2 {
        font-size: 40px;
        margin-bottom: 35px;
    }

    .artwork__intro-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .artwork__closing {
        padding: 70px 7% 90px;
    }

    .artwork__closing h2 {
        font-size: 52px;
    }
}
/* =========================================
   ARCHIVO DE OBRA
========================================= */

.archive {
    padding-top: 120px;
}


/* HERO */

.archive__hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 5% 110px;
}

.archive__back {
    display: inline-block;
    margin-bottom: 75px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gris);
    transition: color .3s ease;
}

.archive__back:hover {
    color: var(--blanco);
}

.archive__label {
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vino);
}

.archive__hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(70px, 11vw, 160px);
    line-height: .85;
    font-weight: normal;
}

.archive__intro {
    max-width: 560px;
    margin: 45px 0 0;
    color: var(--gris-claro);
    font-size: 19px;
    line-height: 1.7;
}


/* GALERÍA */

.archive__grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 5% 120px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 100px 50px;
}


/* TARJETAS */

.archive__item {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.archive__item--featured {
    grid-column: 1 / -1;
    max-width: 760px;
}


/* IMÁGENES */

.archive__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--negro-suave);
    display: flex;
    align-items: center;
    justify-content: center;
}

.archive__item--featured .archive__image {
    aspect-ratio: 16 / 10;
}

.archive__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 30px;

    transition:
        transform .5s ease,
        opacity .5s ease;
}

.archive__item:hover .archive__image img {
    transform: scale(1.03);
    opacity: .9;
}


/* INFORMACIÓN */

.archive__info {
    position: relative;
    padding-top: 22px;
}

.archive__info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 35px;
    height: 1px;

    background: var(--vino);
}

.archive__info>span {
    display: block;
    margin-bottom: 10px;

    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--vino);
}

.archive__info h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    line-height: 1.1;
    font-weight: normal;

    transition: color .3s ease;
}

.archive__info p {
    margin: 12px 0 0;

    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: var(--gris);
}

.archive__item:hover .archive__info h2 {
    color: var(--vino);
}


/* DESFASE EDITORIAL */

.archive__item:nth-child(2) {
    margin-top: 80px;
}

.archive__item:nth-child(3) {
    margin-top: -20px;
}

.archive__item:nth-child(4) {
    margin-top: 70px;
}


/* CIERRE */

.archive__closing {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 5% 150px;

    border-top: 1px solid rgba(232, 223, 213, .1);
}

.archive__closing span {
    display: block;
    margin-bottom: 30px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--vino);
}

.archive__closing h2 {
    max-width: 600px;
    margin: 0 0 45px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(50px, 7vw, 90px);
    line-height: .95;
    font-weight: normal;
}


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

@media (max-width: 900px) {

    .archive {
        padding-top: 100px;
    }

    .archive__hero {
        padding-bottom: 80px;
    }

    .archive__back {
        margin-bottom: 55px;
    }

    .archive__grid {
        gap: 70px 30px;
    }

    .archive__item--featured {
        max-width: 100%;
    }

    .archive__item:nth-child(2),
    .archive__item:nth-child(3),
    .archive__item:nth-child(4) {
        margin-top: 0;
    }

    .archive__closing {
        padding-bottom: 110px;
    }
}


@media (max-width: 650px) {

    .archive {
        padding-top: 80px;
    }

    .archive__hero {
        padding: 0 7% 65px;
    }

    .archive__back {
        margin-bottom: 45px;
        font-size: 9px;
    }

    .archive__label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .archive__hero h1 {
        font-size: 65px;
    }

    .archive__intro {
        margin-top: 35px;
        font-size: 17px;
        line-height: 1.7;
    }


    .archive__grid {
        display: block;
        padding: 0 7% 90px;
    }


    .archive__item,
    .archive__item:nth-child(2),
    .archive__item:nth-child(3),
    .archive__item:nth-child(4) {
        margin: 0 0 65px;
    }


    .archive__image,
    .archive__item--featured .archive__image {
        aspect-ratio: 4 / 5;
    }

    .archive__image img {
        padding: 20px;
    }


    .archive__info {
        padding-top: 18px;
    }

    .archive__info h2 {
        font-size: 27px;
    }

    .archive__info p {
        font-size: 8px;
    }


    .archive__closing {
        padding: 70px 7% 90px;
    }

    .archive__closing h2 {
        font-size: 52px;
    }

}
.commissions__contact .link-arrow {
    display: inline-block;
    padding: 14px 20px;
    border: 1px solid var(--papel);
    color: var(--blanco);
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.commissions__contact .link-arrow:hover {
    background: var(--blanco);
    color: var(--vino-oscuro);
    border-color: var(--blanco);
    transform: translateY(-2px);
}