:root {
    --ink: #171717;
    --paper: #f1eee8;
    --orange: #ff5a1f;
    --gray: #686868;
    --light-gray: #dfdbd3;
    --line: rgba(23, 23, 23, .18);
    --max: 1280px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
}

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

img {
    display: block;
    width: 100%;
    max-width: 100%;
}


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

.site-header {
    height: 76px;

    padding: 0 4vw;

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

    background: var(--paper);

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

    position: relative;
    z-index: 50;
}

.brand {
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -2px;
}

.brand span {
    color: var(--orange);
}

.nav {
    display: flex;
    align-items: center;
    gap: 34px;

    font-family: "DM Mono", monospace;
    font-size: 14px;
    text-transform: uppercase;
}

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

.nav-cta {
    padding: 12px 17px;

    border: 1px solid var(--ink);
}

.nav-cta span {
    color: var(--orange);
}

.menu-toggle {
    display: none;

    border: 0;

    background: transparent;

    font-size: 25px;

    cursor: pointer;
}


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

.hero {
    max-width: var(--max);

    min-height: 680px;

    margin: auto;

    padding: 7vw 5vw 6vw;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 6vw;

    align-items: center;
}

.eyebrow,
.section-kicker {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
}

.hero h1 {
    max-width: 780px;

    margin: 25px 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(54px, 6.6vw, 105px);

    font-weight: 600;

    line-height: .92;

    letter-spacing: -.065em;
}

.hero h1 em,
.intro h2 em,
.about h2 em,
.work h2 em,
.contact h2 em {
    color: #29434E;
    font-style: italic;
}

.hero-lead {
    max-width: 570px;

    font-size: 19px;

    line-height: 1.5;
}

.hero-actions {
    display: flex;
    align-items: center;

    gap: 28px;

    margin-top: 38px;
}

.button {
    display: inline-flex;
    align-items: center;

    gap: 28px;

    padding: 17px 20px;

    font-family: "DM Mono", monospace;

    font-size: 14px;

    text-transform: uppercase;
}

.button-dark {
    color: var(--paper);

    background: var(--ink);
}

.text-link {
    font-size: 13px;
}

.text-link strong {
    display: block;

    margin-top: 5px;
}


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

.hero-visual {
    min-height: 550px;

    position: relative;
}

.photo-frame {
    position: absolute;

    inset: 5% 7% 3% 8%;

    overflow: hidden;

    background: #d5d0c7;
}

.photo-frame img {
    height: 100%;

    object-fit: cover;
}

.placeholder-label {
    position: absolute;

    left: 16px;
    bottom: 16px;

    padding: 10px;

    background: rgba(241, 238, 232, .92);

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: .05em;
}

.placeholder-label small {
    opacity: .55;
}

.scribble {
    position: absolute;

    z-index: 5;

    color: var(--orange);

    font-family: "DM Mono", monospace;

    font-size: 15px;

    line-height: 1.3;
}

.scribble-one {
    top: 4%;
    right: 0;

    transform: rotate(-7deg);
}

.scribble-two {
    left: 0;
    bottom: 2%;

    transform: rotate(4deg);
}

.orange-square {
    position: absolute;

    right: 1%;
    bottom: 13%;

    width: 55px;
    height: 55px;

    background: var(--orange);
}


/* ==================================================
   TICKER
================================================== */

.ticker {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
    contain: paint;

    padding: 13px 0;

    background: var(--orange);

    white-space: nowrap;

    font-family: "DM Mono", monospace;

    font-size: 13px;

    font-weight: 700;
}

.ticker-track {
    display: flex;
    width: max-content;

    will-change: transform;

    animation: marquee 28s linear infinite;
}

.ticker-track span {
    flex: 0 0 auto;

    margin: 0 15px;
}

@keyframes marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* ==================================================
   GENERIC SECTION
================================================== */

.section {
    max-width: var(--max);

    margin: auto;

    padding: 125px 5vw;
}

.section-number {
    margin-bottom: 50px;

    font-family: "DM Mono", monospace;

    font-size: 14px;
}

.intro-grid {
    display: grid;

    grid-template-columns: 25% 1fr;

    gap: 5vw;
}

.intro h2 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(38px, 4.5vw, 70px);

    font-weight: 600;

    line-height: 1;

    letter-spacing: -.05em;
}

.intro h2 span {
    display: inline;

    color: #777;
}


/* ==================================================
   CAPABILITIES
================================================== */

.capability-list {
    margin-top: 80px;

    border-top: 1px solid var(--line);
}

.capability-list article {
    display: grid;

    grid-template-columns: 45px 1fr 1.5fr;

    gap: 20px;

    padding: 27px 0;

    border-bottom: 1px solid var(--line);
}

.cap-number {
    font-family: "DM Mono", monospace;

    font-size: 14px;
}

.capability-list h3 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: 17px;
}

.capability-list p {
    margin: 0;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.5;
}


/* ==================================================
   MANIFESTO
================================================== */

.manifesto,
.collaborate {
    position: relative;

    overflow: hidden;

    color: var(--paper);

    background: var(--ink);
}

.manifesto {
    padding: 125px 10vw;
}

.light {
    color: #aaa;
}

.light-text {
    color: #aaa;
}

.manifesto-inner {
    max-width: 1050px;

    margin: auto;
}

.manifesto h2 {
    max-width: 1050px;

    margin: 0 0 45px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(52px, 7vw, 105px);

    font-weight: 600;

    line-height: .92;

    letter-spacing: -.06em;
}

.manifesto-text {
    max-width: 650px;

    color: #bcbab5;

    font-size: 18px;

    line-height: 1.55;

    z-index: 999;
}

.manifesto-mark {
    position: absolute;

    right: 4vw;
    bottom: -5vw;

    color: #252525;

    font-family: "Space Grotesk", sans-serif;

    font-size: 25vw;

    font-weight: 700;
}


/* ==================================================
   WORK
================================================== */

.section-head {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 70px;
}

.work h2 {
    margin: 15px 0 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(60px, 7vw, 105px);

    font-weight: 600;

    line-height: .86;

    letter-spacing: -.065em;
}

.section-note {
    font-family: "DM Mono", monospace;

    font-size: 12px;

    line-height: 1.5;
}

.projects {
    display: grid;

    grid-template-columns: 1.35fr .65fr;

    gap: 70px 30px;
}

.project-image {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #d5d0c7;
}

.project-image img {
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

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

.image-placeholder {
    position: absolute;

    left: 16px;
    bottom: 16px;

    padding: 10px;

    background: rgba(241, 238, 232, .92);

    font-family: "DM Mono", monospace;

    font-size: 9px;
}

.image-placeholder small {
    opacity: .55;
}

.project-meta {
    display: flex;

    justify-content: space-between;

    margin: 16px 0 9px;

    font-family: "DM Mono", monospace;

    font-size: 10px;
}

.project h3 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: 32px;

    letter-spacing: -.04em;
}

.project p {
    margin: 5px 0;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.5;
}

.project-side.offset {
    margin-top: 110px;
}

.project-bottom {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    align-items: end;
}

.project-bottom.flow {
    margin-top: 80px;
}

.project-bottom h3 {
    font-size: 44px;
}


/* ==================================================
   EXPERIENCE
================================================== */

.experience {
    max-width: none;

    padding-left: max(
        5vw,
        calc((100vw - var(--max)) / 2 + 5vw)
    );

    padding-right: max(
        5vw,
        calc((100vw - var(--max)) / 2 + 5vw)
    );

    background: var(--light-gray);
}

.experience-top {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;
}

.stamp {
    width: 150px;
    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border: 1px solid var(--ink);

    border-radius: 50%;

    transform: rotate(8deg);
}

.stamp strong {
    font-family: "Space Grotesk", sans-serif;

    font-size: 47px;
}

.stamp span {
    font-family: "DM Mono", monospace;

    font-size: 8px;

    line-height: 1.2;
}

.experience-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10vw;

    margin-top: 40px;
}

.experience-grid h2 {
    margin: 0 0 35px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(50px, 6vw, 90px);

    font-weight: 600;

    line-height: .9;

    letter-spacing: -.06em;
}

.experience-grid > div > p {
    max-width: 560px;

    font-size: 17px;

    line-height: 1.55;
}

.experience-list {
    border-top: 1px solid var(--line);
}

.experience-list div {
    padding: 24px 0;

    border-bottom: 1px solid var(--line);
}

.experience-list span {
    display: block;

    margin-bottom: 9px;

    font-family: "DM Mono", monospace;

    font-size: 10px;
}

.experience-list strong {
    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.35;
}


/* ==================================================
   ABOUT
================================================== */

.about {
    display: grid;

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

    gap: 9vw;

    align-items: center;
}

.about-photo {
    height: 650px;

    position: relative;

    overflow: hidden;

    background: #d5d0c7;
}

.about-photo img {
    height: 100%;

    object-fit: cover;
}

.about-copy h2 {
    margin: 20px 0 40px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(52px, 6vw, 92px);

    font-weight: 600;

    line-height: .9;

    letter-spacing: -.06em;
}

.about-copy > p:not(.section-kicker) {
    max-width: 610px;

    color: #555;

    font-size: 17px;

    line-height: 1.55;
}


/* ==================================================
   COLLABORATE
================================================== */

.collaborate {
    padding: 130px 10vw;
}

.collaborate-inner {
    max-width: 1000px;

    margin: auto;
}

.collaborate h2 {
    margin: 20px 0 25px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(60px, 8vw, 115px);

    font-weight: 600;

    line-height: .87;

    letter-spacing: -.07em;
}

.collaborate-lead {
    max-width: 780px;

    font-size: 27px;

    line-height: 1.2;
}

.collaborate .small {
    max-width: 700px;

    margin-top: 50px;

    color: #aaa;

    font-size: 15px;

    line-height: 1.5;
}


/* ==================================================
   CONTACT
================================================== */

.contact {
    display: grid;

    grid-template-columns: 1fr 1.2fr;

    min-height: 650px;

    background: var(--orange);
}

.contact-image {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background: #d5d0c7;
}

.contact-image img {
    height: 100%;

    object-fit: cover;
}

.contact-copy {
    align-self: center;

    padding: 90px 8vw;
}

.contact-copy h2 {
    margin: 25px 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(55px, 6vw, 92px);

    font-weight: 600;

    line-height: .9;

    letter-spacing: -.065em;
}

.contact-copy > p:not(.section-kicker) {
    max-width: 570px;

    font-size: 17px;

    line-height: 1.5;
}

.contact-button {
    margin-top: 25px;
}


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

footer {
    display: flex;

    justify-content: space-between;

    padding: 22px 4vw;

    color: #aaa;

    background: var(--ink);

    font-family: "DM Mono", monospace;

    font-size: 10px;
}


/* ==================================================
   REVEAL
================================================== */

.reveal {
    opacity: 0;

    transform: translateY(28px);

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

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.whatsapp-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
}

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

@media (max-width: 800px) {

    .site-header {
        height: 65px;
    }

    .nav {
        display: none;

        position: absolute;

        top: 65px;
        left: 0;
        right: 0;

        padding: 25px 5vw;

        flex-direction: column;

        align-items: flex-start;

        background: var(--paper);

        border-bottom: 1px solid var(--line);
    }

    .nav.open {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }


    .hero {
        display: block;

        min-height: auto;

        padding-top: 60px;
    }

    .hero h1 {
        font-size: clamp(52px, 15vw, 84px);
    }

    .hero-lead {
        font-size: 17px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }

    .hero-visual {
        min-height: 480px;

        margin-top: 55px;
    }


    .section {
        padding: 85px 6vw;
    }


    .intro-grid,
    .experience-grid,
    .about {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .capability-list {
        margin-top: 55px;
    }

    .capability-list article {
        grid-template-columns: 30px 1fr;
    }

    .capability-list p {
        grid-column: 2;
    }


    .manifesto,
    .collaborate {
        padding: 90px 7vw;
    }

    .manifesto h2,
    .collaborate h2 {
        font-size: clamp(50px, 14vw, 78px);
    }

    .manifesto-mark {
        font-size: 35vw;
    }


    .section-head {
        display: block;

        margin-bottom: 50px;
    }

    .section-note {
        margin-top: 30px;
    }


    .projects {
        display: block;
    }

    .project {
        display: block;

        margin-bottom: 60px;
    }

    .project-side.offset,
    .project-bottom.flow {
        margin-top: 0;
    }

    .project-bottom {
        display: block;
    }

    .project-bottom > div:last-child {
        margin-top: 22px;
    }


    .experience-top {
        display: block;
    }

    .stamp {
        margin: 35px 0 0 auto;
    }


    .experience-grid h2 {
        font-size: clamp(55px, 14vw, 82px);
    }


    .about-photo {
        height: 380px;
    }


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

    .contact-image {
        min-height: 380px;
    }

    .contact-copy {
        padding: 75px 7vw;
    }

    .contact-copy h2 {
        font-size: clamp(52px, 14vw, 80px);
    }


    footer {
        flex-direction: column;

        gap: 9px;
    }

}


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

@media (max-width: 430px) {

    .hero {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .hero h1 {
        font-size: 51px;
    }

    .hero-visual {
        min-height: 400px;
    }

    .scribble {
        font-size: 12px;
    }

    .orange-square {
        width: 35px;
        height: 35px;
    }

    .capability-list article {
        gap: 12px;
    }

    .project-image {
        aspect-ratio: 4 / 3;
    }

    .contact-image {
        min-height: 300px;
    }

}

/* Fix desborde sección About en móvil */
.about > * {
    min-width: 0;
}

.about-copy h2 {
    overflow-wrap: break-word;
}

@media (max-width: 800px) {

    .about {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-copy h2 {
        font-size: clamp(40px, 12vw, 64px);
    }

    .about-photo {
        width: 100%;
    }
}

/* Fix desplazamiento horizontal en móvil */
html,
body {
    overflow-x: clip;
}

.hero,
.hero-visual {
    overflow-x: clip;
}

@media (max-width: 800px) {

    .scribble-one {
        right: 4vw;
    }

    .scribble-two {
        left: 4vw;
    }
}