/* ============================================================
   Kembeke v2 — Theme CSS
   Estilo Studio Fifty: header oscuro, tipografía bold, grids limpios,
   abundante whitespace, rounded corners suaves.
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }

/* --- Tokens --- */
:root {
    --color-bg: #EFEFED;
    --color-bg-alt: #FFFFFF;
    --color-ink: #1A1A1A;
    --color-ink-inverse: #FAFAFA;
    --color-mute: #777777;
    --color-line: #DBDBD6;
    --color-accent: #1A1A1A;
    --color-dark: #111111;

    --font-display: 'Archivo', 'Inter', sans-serif;
    --font-serif: 'Fraunces', Georgia, serif;
    --font-sans: 'Inter', -apple-system, sans-serif;

    --r-card: 14px;
    --r-pill: 999px;

    --gutter: clamp(1rem, 3vw, 2.5rem);
    --container: 1440px;

    --t-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --t-med: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Base --- */
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-ink);
    background: var(--color-bg);
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-mute);
    font-weight: 500;
}
.eyebrow--inverse { color: var(--color-ink-inverse); opacity: 0.7; }

/* --- Typography --- */
.display-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: none;
}
.display-title--smaller { font-size: clamp(2rem, 4vw, 3.5rem); }
.display-title--centered { text-align: center; }

.display-quote {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    max-width: 22ch;
    margin: 0 auto;
    text-align: center;
}

.page-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-top: 0.75rem;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

p { line-height: 1.6; }
p + p { margin-top: 0.75rem; }

/* --- Header --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-dark);
    color: var(--color-ink-inverse);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem var(--gutter);
    max-width: var(--container);
    margin: 0 auto;
}
.brand a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-ink-inverse);
}
.brand__mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--color-ink-inverse);
    color: var(--color-dark);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    border-radius: 8px;
}
.brand__wordmark {
    display: flex; flex-direction: column;
    line-height: 1;
}
.brand__top {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
}
.brand__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
}

.nav {
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
}
.nav a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-inverse);
    position: relative;
    padding: 4px 0;
    transition: opacity var(--t-fast);
}
.nav a:hover { opacity: 0.65; }
.nav a.is-active::before {
    content: '';
    position: absolute;
    inset: -6px -10px;
    border: 1px solid currentColor;
    border-radius: var(--r-pill);
    opacity: 0.55;
}

.menu-toggle {
    display: none;
    width: 32px; height: 32px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.menu-toggle span {
    height: 1.5px;
    background: var(--color-ink-inverse);
    transition: transform var(--t-fast), opacity var(--t-fast);
}

@media (max-width: 860px) {
    .menu-toggle { display: flex; }
    .nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(85%, 360px);
        background: var(--color-dark);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 5rem 2rem 2rem;
        gap: 1.25rem;
        transform: translateX(100%);
        transition: transform var(--t-med);
        border-left: 1px solid rgba(255,255,255,0.1);
    }
    .nav.is-open { transform: translateX(0); }
    .nav a { font-size: 22px; }
    .menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
    .menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* --- Home Hero --- */
.home-hero {
    background: var(--color-dark);
    color: var(--color-ink-inverse);
    padding: clamp(4rem, 10vw, 8rem) 0;
}
.home-hero .container { text-align: left; }
.home-headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    max-width: 18ch;
    margin: 1.5rem 0 2.5rem;
}
.home-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    background: var(--color-ink-inverse);
    color: var(--color-dark);
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.1em;
    transition: transform var(--t-fast), background var(--t-fast);
}
.home-cta:hover { transform: translateY(-2px); background: #fff; }
.home-cta--inline {
    margin-top: 1.5rem;
    background: var(--color-dark);
    color: var(--color-ink-inverse);
}
.home-cta--inline:hover { background: var(--color-ink); }

.home-featured { padding: clamp(3rem, 6vw, 5rem) 0; }
.home-about {
    background: var(--color-bg-alt);
    /* Mantener el gutter horizontal y el centrado del .container para que
       el contenido alinee con el hero también por encima de 1440px de ancho. */
    padding: clamp(3rem, 6vw, 5rem) var(--gutter);
    margin: clamp(2rem, 5vw, 4rem) auto;
    border-radius: var(--r-card);
}
.home-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.home-about__body p { font-size: 17px; }
@media (max-width: 760px) {
    .home-about__grid { grid-template-columns: 1fr; }
}

/* --- Archive Intro --- */
.archive-intro {
    padding: clamp(2rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.archive-intro__row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: end;
}
.archive-intro__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}
@media (max-width: 760px) {
    .archive-intro__row { grid-template-columns: 1fr; }
    .archive-intro__filters { justify-content: flex-start; }
}

.toolbar__select {
    padding: 0.55rem 1.2rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 32px;
}

/* --- Archive: Standard / Gallery / Masonry / Slider --- */
.archive-grid { padding-bottom: clamp(3rem, 6vw, 5rem); }

.grid-standard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
}
.grid-standard--home {
    /* 6 cards en home: 3 col en desktop, 2 en tablet */
}
@media (max-width: 960px) { .grid-standard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-standard { grid-template-columns: 1fr; } }

.card-standard {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.card-standard__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-card);
    background: var(--color-line);
}
.card-standard__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-med);
}
.card-standard:hover .card-standard__media img { transform: scale(1.04); }
.card-arrow {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-dark);
    display: grid; place-items: center;
    transform: translateY(8px);
    opacity: 0;
    transition: transform var(--t-fast), opacity var(--t-fast);
}
.card-standard:hover .card-arrow {
    transform: translateY(0);
    opacity: 1;
}
.card-standard__title {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.card-standard__meta {
    margin-top: 0.4rem;
    font-size: 13.5px;
    color: var(--color-mute);
}

.card-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #2a2a2a, #1A1A1A);
    color: var(--color-ink-inverse);
    display: grid; place-items: center;
    text-align: center;
    padding: 1rem;
}
.card-placeholder span {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.2;
    opacity: 0.6;
}

/* Gallery layout — info al hover */
.grid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
@media (max-width: 960px) { .grid-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-gallery { grid-template-columns: 1fr; } }

.card-gallery { cursor: pointer; }
.card-gallery__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-card);
    background: var(--color-line);
}
.card-gallery__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-med);
}
.card-gallery:hover .card-gallery__media img { transform: scale(1.04); }
.card-gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%);
    color: var(--color-ink-inverse);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity var(--t-med);
}
.card-gallery:hover .card-gallery__overlay { opacity: 1; }
.card-gallery__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
}
.card-gallery__meta {
    margin-top: 0.35rem;
    font-size: 13px;
    opacity: 0.85;
}

/* Masonry — alturas mezcladas */
.grid-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
}
@media (max-width: 960px) { .grid-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-masonry { grid-template-columns: 1fr; } }

.card-masonry { cursor: pointer; display: flex; flex-direction: column; }
.card-masonry__media {
    overflow: hidden;
    border-radius: var(--r-card);
    background: var(--color-line);
}
.card-masonry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.card-masonry:hover .card-masonry__media img { transform: scale(1.04); }
.card-masonry--tall .card-masonry__media { aspect-ratio: 3 / 4.4; }
.card-masonry--mid .card-masonry__media { aspect-ratio: 4 / 5; }
.card-masonry--short .card-masonry__media { aspect-ratio: 5 / 4; }
.card-masonry__title {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
    line-height: 1.1;
}
.card-masonry__meta {
    margin-top: 0.3rem;
    font-size: 13px;
    color: var(--color-mute);
}

/* Slider layout */
.grid-slider { position: relative; padding-bottom: 4rem; }
.kembeke-archive-swiper { overflow: visible; }
.kembeke-archive-swiper .swiper-slide { width: 320px; }
.card-slider {
    display: flex; flex-direction: column;
    cursor: pointer;
}
.card-slider__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-card);
    background: var(--color-line);
}
.card-slider__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.card-slider:hover .card-slider__media img { transform: scale(1.04); }
.card-slider__title {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
}
.card-slider__meta {
    margin-top: 0.3rem;
    font-size: 13px;
    color: var(--color-mute);
}

.swiper-controls {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
}
.swiper-controls button {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-dark);
    display: grid; place-items: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.swiper-controls button:hover {
    background: var(--color-dark);
    color: var(--color-ink-inverse);
}

/* --- Single Project layouts --- */
.project-hero {
    width: 100%;
    margin-top: 0;
}
.project-hero--full {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.project-hero--full img {
    width: 100%; height: 100%; object-fit: cover;
}

.project-intro {
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.project-intro__grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1.5fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}
.project-intro__grid--simple {
    grid-template-columns: 1fr 1.5fr;
}
.project-intro--centered { text-align: center; }
.project-intro--centered .project-intro__lead { max-width: 60ch; margin: 1.5rem auto 0; }
.project-intro__lead--centered { text-align: center; }
.project-intro--top { padding-top: clamp(3rem, 8vw, 6rem); }
@media (max-width: 860px) {
    .project-intro__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.meta-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}
.meta-value {
    font-size: 17px;
    color: var(--color-mute);
}
.meta-value p + p { margin-top: 0.2rem; }

.project-intro__lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.45;
    margin-bottom: 1rem;
    color: var(--color-ink);
}
.project-intro__body p { margin-bottom: 1rem; line-height: 1.65; font-size: 16px; color: var(--color-mute); }
.project-intro__body-section { padding: clamp(2rem, 4vw, 3rem) 0; }
.project-intro__body-section .project-intro__body { max-width: 720px; margin: 0 auto; }

/* Gallery 2-col (Custom layout) */
.project-gallery-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.gallery-figure {
    overflow: hidden;
    border-radius: var(--r-card);
}
.gallery-figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery-figure.g-full { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery-figure.g-half { aspect-ratio: 4 / 5; }
@media (max-width: 760px) {
    .project-gallery-2col { grid-template-columns: 1fr; }
    .gallery-figure.g-full { aspect-ratio: 4 / 3; }
}

/* Quote */
.project-quote {
    padding: clamp(3rem, 6vw, 5rem) 0;
    text-align: center;
}

/* Sections numbered */
.project-sections {
    padding: clamp(2rem, 5vw, 4rem) 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 760px) { .project-sections { grid-template-columns: 1fr; } }

.section-item {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
}
.section-item__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    -webkit-text-stroke: 1.5px var(--color-ink);
    color: transparent;
    margin-bottom: 0.5rem;
    display: inline-block;
}
.section-item__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
}
.section-item__text {
    margin-top: 1rem;
    color: var(--color-mute);
    font-size: 16px;
    line-height: 1.6;
    max-width: 50ch;
}

/* Project meta block (común a todas las plantillas) */
.project-meta {
    padding: clamp(2rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--color-line);
}
.meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.meta-item--wide { grid-column: span 2; }
@media (max-width: 860px) {
    .meta-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .meta-item--wide { grid-column: span 2; }
}

/* Project nav */
.project-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 7vw, 6rem);
    border-top: 1px solid var(--color-line);
    border-bottom: 0;
    gap: 1rem;
}
.project-nav__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 40%;
    transition: opacity var(--t-fast);
}
.project-nav__link:hover { opacity: 0.65; }
.project-nav__link--next { text-align: right; align-items: flex-end; }
.project-nav__direction {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-mute);
}
.project-nav__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    line-height: 1.1;
}
.project-nav__all {
    color: var(--color-ink);
    transition: transform var(--t-fast);
}
.project-nav__all:hover { transform: rotate(45deg); }

/* Thumbnail Slider single */
.project-thumb-slider {
    padding-top: clamp(2rem, 5vw, 4rem);
}
.kembeke-main-slider {
    border-radius: var(--r-card);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.kembeke-main-slider .swiper-slide {
    aspect-ratio: 16 / 9;
    background: var(--color-line);
}
.main-slide-img { width: 100%; height: 100%; object-fit: cover; }
.kembeke-thumb-slider { padding: 0; }
.kembeke-thumb-slider .swiper-slide {
    width: 130px;
    aspect-ratio: 5 / 3;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--t-fast);
    border-radius: 6px;
    overflow: hidden;
}
.kembeke-thumb-slider .swiper-slide-thumb-active { opacity: 1; }
.thumb-slide-img { width: 100%; height: 100%; object-fit: cover; }
.thumb-intro__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
@media (max-width: 760px) { .thumb-intro__grid { grid-template-columns: 1fr; } }

/* Carousel single */
.project-carousel {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}
.kembeke-carousel { overflow: visible; padding-left: var(--gutter); }
.kembeke-carousel .swiper-slide {
    width: 380px;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--color-line);
}
.kembeke-carousel .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .kembeke-carousel .swiper-slide { width: 280px; } }

/* Masonry single — patrón de ladrillos en 3 columnas.
   Cada ciclo de 4 imágenes alterna: (wide-left + square-right) en una fila y
   (square-left + wide-right) en la siguiente. Para que wide y square queden a
   la MISMA altura dentro de una fila, la altura del wide se fija explícitamente
   al ancho de una columna (= a la altura del square 1:1). Aspect-ratio del wide
   se convierte así en lo que salga (~2.07:1 incluyendo el gap), pero alinea
   perfectamente con el cuadrado adyacente. Necesita container queries. */
.project-masonry {
    container-type: inline-size;
    --masonry-gap: clamp(1rem, 2vw, 2rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--masonry-gap);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.masonry-figure {
    overflow: hidden;
    border-radius: var(--r-card);
}
.masonry-figure img { width: 100%; height: 100%; object-fit: cover; }

.masonry-figure--square-left,
.masonry-figure--square-right {
    aspect-ratio: 1 / 1;
}
.masonry-figure--wide-left,
.masonry-figure--wide-right {
    /* aspect-ratio actúa como fallback para navegadores sin soporte de cqw. */
    aspect-ratio: 2 / 1;
    /* height explícita = ancho de 1 columna = (container - 2 gaps) / 3.
       Iguala exactamente la altura del square adyacente (1:1). */
    height: calc((100cqw - 2 * var(--masonry-gap)) / 3);
}

.masonry-figure--wide-left    { grid-column: 1 / 3; }
.masonry-figure--square-right { grid-column: 3 / 4; }
.masonry-figure--square-left  { grid-column: 1 / 2; }
.masonry-figure--wide-right   { grid-column: 2 / 4; }

/* Tablet: 2 columnas — las anchas ocupan toda la fila propia, las cuadradas se
   emparejan. No comparten fila con cuadrados, así que no necesitan calc. */
@media (max-width: 960px) {
    .project-masonry { grid-template-columns: repeat(2, 1fr); }
    .masonry-figure--wide-left,
    .masonry-figure--wide-right {
        grid-column: 1 / -1;
        aspect-ratio: 2 / 1;
        height: auto;
    }
    .masonry-figure--square-left,
    .masonry-figure--square-right { grid-column: auto; aspect-ratio: 1 / 1; }
}

/* Móvil: 1 columna apilada. */
@media (max-width: 560px) {
    .project-masonry { grid-template-columns: 1fr; }
    .masonry-figure--wide-left,
    .masonry-figure--wide-right {
        grid-column: 1 / -1;
        aspect-ratio: 4 / 3;
        height: auto;
    }
    .masonry-figure--square-left,
    .masonry-figure--square-right { grid-column: 1 / -1; aspect-ratio: 1 / 1; }
}

/* Square Images single */
.project-squares {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.square-figure {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--r-card);
}
.square-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .project-squares { grid-template-columns: 1fr; } }

/* --- Page intros (Estudio / Premios / Contacto) --- */
.page-intro {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
}
.page-intro__lead {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    margin-top: 1.5rem;
    max-width: 60ch;
    color: var(--color-mute);
}

/* Studio */
.studio-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--color-line);
}
.studio-section__head {
    display: grid;
    grid-template-columns: 80px 1fr 2fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: baseline;
    margin-bottom: 2.5rem;
}
.section-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-mute);
}
.section-lead {
    color: var(--color-mute);
    font-size: 17px;
    max-width: 55ch;
}
@media (max-width: 760px) {
    .studio-section__head { grid-template-columns: 1fr; gap: 0.75rem; }
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card__photo {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-card);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #D4C9B5, #A85C3F);
}
.team-card__photo--b { background: linear-gradient(135deg, #3F4E4F, #A8B2A9); }
.team-card__photo--c { background: linear-gradient(135deg, #6E6A63, #C9B79C); }
.team-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.15;
}
.team-card__role { font-size: 13px; color: var(--color-mute); margin-top: 0.25rem; }
.team-card__email {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 14px;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 1px;
}

.disciplines-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
.discipline-item {
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-line);
    display: grid;
    grid-template-columns: 40px 1fr 2fr;
    gap: 1rem;
    align-items: baseline;
}
.discipline-item__num { font-size: 13px; color: var(--color-mute); font-variant-numeric: tabular-nums; }
.discipline-item__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
}
.discipline-item__desc { font-size: 14px; color: var(--color-mute); }
@media (max-width: 760px) {
    .disciplines-grid { grid-template-columns: 1fr; }
    .discipline-item { grid-template-columns: 30px 1fr; grid-template-rows: auto auto; }
    .discipline-item__desc { grid-column: 2; }
}

.clients-list {
    columns: 4;
    column-gap: 2rem;
}
.clients-list li {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    break-inside: avoid;
}
@media (max-width: 1024px) { .clients-list { columns: 3; } }
@media (max-width: 760px) { .clients-list { columns: 2; } }
@media (max-width: 480px) { .clients-list { columns: 1; } }

/* Awards */
.awards-section { padding: clamp(2rem, 5vw, 4rem) 0; }
.awards-group { margin-bottom: 3rem; }
.awards-group__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin-bottom: 1rem;
}
.awards-table { border-top: 1px solid var(--color-ink); }
.award-row {
    display: grid;
    grid-template-columns: 80px 100px 1fr 1.5fr 1fr;
    gap: 1.5rem;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-line);
    align-items: baseline;
    font-size: 14px;
}
.award-row__year { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-mute); }
.award-row__medal {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--color-line);
    color: var(--color-ink);
    display: inline-block;
    width: fit-content;
}
.award-row__medal--oro { background: #E8B83A; color: var(--color-dark); }
.award-row__medal--plata { background: #C8C8C8; color: var(--color-dark); }
.award-row__medal--bronce { background: #CD7F32; color: #fff; }
.award-row__category { color: var(--color-mute); }
.award-row__titlecol {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
}
.award-row__publication { color: var(--color-mute); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
@media (max-width: 860px) {
    .award-row { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
    .award-row__titlecol { grid-column: 1 / -1; }
}

/* Contact */
.contact-section { padding: clamp(2rem, 5vw, 4rem) 0; }
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 560px) { .contact-people { grid-template-columns: 1fr; } }
.contact-person__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
}
.contact-person__role {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-mute);
    margin: 4px 0 0.75rem;
}
.contact-person__detail { font-size: 14px; line-height: 1.6; }
.contact-person__detail a { border-bottom: 1px solid var(--color-line); }

.contact-block { margin-bottom: 2rem; }
.contact-block__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.2;
}
.contact-block__hint { font-size: 13px; color: var(--color-mute); font-style: italic; margin-top: 0.4rem; }

/* Mapa del estudio — vive en la columna izquierda del grid de contacto,
   en blanco y negro para encajar con la paleta */
.contact-grid { align-items: start; }
.contact-map {
    margin: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--r-card);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-line);
}
.contact-people + .contact-map { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Blanco y negro */
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.6s var(--ease-out-quart, ease);
}
@media (hover: hover) and (pointer: fine) {
    .contact-map:hover iframe { filter: grayscale(0.15) contrast(1); }
}
@media (prefers-reduced-motion: reduce) {
    .contact-map iframe { transition: none; }
}

/* --- Footer --- */
.site-footer__cta {
    background: var(--color-dark);
    color: var(--color-ink-inverse);
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
    margin-top: clamp(3rem, 6vw, 5rem);
}
.cta-headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}
.cta-line { display: block; }
.cta-line--outline {
    -webkit-text-stroke: 1.5px var(--color-ink-inverse);
    color: transparent;
}
.cta-text {
    margin-top: 1.5rem;
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    max-width: 40ch;
}
.cta-socials {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
}
.cta-socials a {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.08em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-ink-inverse);
}

.site-footer__cols { background: var(--color-dark); color: var(--color-ink-inverse); padding-bottom: clamp(2rem, 4vw, 3rem); }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-bottom: 2rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.footer-col__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.75rem;
}
.footer-col p { font-size: 14px; opacity: 0.9; }
.footer-col a { border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
.footer-col a:hover { border-bottom-color: rgba(255,255,255,0.5); }
.footer-legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-ink-inverse);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.back-to-top:hover { transform: translateY(-3px); }

/* Page body */
.page-content { padding: clamp(3rem, 7vw, 6rem) 0; }
.page-body p { font-size: 17px; line-height: 1.65; margin-bottom: 1rem; max-width: 720px; }
.page-body-section { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* 404 */
.error-404 { padding: clamp(4rem, 10vw, 8rem) 0; text-align: center; }
.error-404__body { margin-top: 1.5rem; color: var(--color-mute); }
.error-404 a { border-bottom: 1px solid currentColor; }

/* Utilities */
.hidden { display: none !important; }

/* Fade in on scroll */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   v2.2 — REFINEMENTS LAYER
   Capa de pulido encima del CSS base. Las reglas de abajo
   ganan por cascada y refinan tipografía, microinteracciones,
   animaciones y espaciados.
   ============================================================ */

/* ---- Tokens v2.2 ---- */
:root {
    /* Curvas de easing más sofisticadas */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --t-snap: 0.18s var(--ease-out-quart);
    --t-flow: 0.55s var(--ease-out-expo);
    --t-slow: 0.9s var(--ease-out-expo);

    /* Tokens tipográficos baseline 8px */
    --lh-tight: 0.92;
    --lh-snug: 1.08;
    --lh-body: 1.62;

    /* Spacing tokens basados en stack de 4px */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.75rem;
    --space-lg: 3rem;
    --space-xl: clamp(4rem, 8vw, 7rem);
    --space-2xl: clamp(6rem, 12vw, 10rem);

    /* Color accents finos */
    --color-ink-soft: #2A2A2A;
    --color-line-soft: #E5E5E0;
    --color-warm: #C6A77A; /* acento cálido editorial */
}

/* ---- Selección global, scrollbar fina ---- */
::selection { background: var(--color-ink); color: var(--color-bg); }
html { scrollbar-width: thin; scrollbar-color: var(--color-ink) transparent; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Body refinements ---- */
body {
    font-feature-settings: "kern", "liga", "calt", "ss01";
    font-variant-numeric: oldstyle-nums proportional-nums;
    text-rendering: optimizeLegibility;
}

/* ---- Display titles: editoriales con Fraunces opsz ---- */
.display-title,
.page-title,
.home-headline,
.cta-headline,
.section-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-variation-settings: "opsz" 144;
    font-feature-settings: "ss01", "kern", "liga";
    letter-spacing: -0.028em;
    line-height: var(--lh-tight);
}

/* Tamaños/escala revisada para tipografía editorial */
.display-title {
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    text-wrap: balance;
    /* Holgura inferior para descendentes (p, g, y, j, q) — evita que se peguen
       al elemento siguiente, sobre todo en layouts apilados / móvil. */
    padding-bottom: 0.15em;
}
.home-headline {
    font-size: clamp(2.75rem, 7.5vw, 6.5rem);
    max-width: 17ch;
    margin: var(--space-md) 0 var(--space-lg);
    text-wrap: balance;
}
.page-title { font-size: clamp(2.5rem, 6vw, 5.5rem); }
.cta-headline {
    font-size: clamp(3rem, 9.5vw, 7.5rem);
    letter-spacing: -0.035em;
    text-transform: none; /* quitamos uppercase para un tono más editorial */
    font-style: italic;
    font-variation-settings: "opsz" 144;
}

/* Optical hanging — el punto se sale levemente para alinear visualmente */
.display-title { hanging-punctuation: first last; }

/* Display quote refinement */
.display-quote {
    font-style: italic;
    font-variation-settings: "opsz" 96;
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.18;
    letter-spacing: -0.018em;
    max-width: 24ch;
}

/* Card titles, meta labels, navegación: se quedan en Archivo geométrico */
.card-standard__title,
.card-gallery__title,
.card-masonry__title,
.card-slider__title,
.team-card__name,
.contact-person__name,
.contact-block__value,
.discipline-item__title,
.section-item__title,
.project-nav__title,
.award-row__titlecol {
    font-family: var(--font-display);
    font-feature-settings: "ss01", "kern", "liga";
    letter-spacing: -0.012em;
}

/* ---- Container: padding garantizado y max-width refinado ---- */
.container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---- Header refinements: condensación al hacer scroll ---- */
.site-header {
    transition: background var(--t-flow), backdrop-filter var(--t-flow);
    backdrop-filter: saturate(140%);
}
.site-header__inner {
    transition: padding-top var(--t-flow), padding-bottom var(--t-flow);
}
.site-header.is-scrolled {
    background: rgba(17, 17, 17, 0.85);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
.site-header.is-scrolled .site-header__inner {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.site-header.is-scrolled .brand__mark {
    width: 32px; height: 32px; font-size: 18px;
}
.site-header.is-scrolled .brand__top { opacity: 0.5; font-size: 9px; }
.site-header.is-scrolled .brand__name { font-size: 15px; }

/* Brand mark hover */
.brand a { transition: opacity var(--t-snap); }
.brand a:hover { opacity: 0.78; }

/* ---- Nav: underline grow + active pill refinada ---- */
.nav a {
    transition: opacity var(--t-snap), color var(--t-snap);
    overflow: visible;
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0; right: auto;
    bottom: -3px;
    height: 1.5px;
    width: 0;
    background: currentColor;
    transition: width var(--t-flow);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { width: 100%; }
.nav a.is-active::before {
    border-color: rgba(255,255,255,0.55);
    transition: opacity var(--t-flow), border-color var(--t-flow);
}
.nav a.is-active:hover::before { opacity: 0.9; }

/* Bullet separator antes de cada nav item — usamos pseudo-element propio */
.nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.nav a > span.bullet,
.nav a::marker { display: none; }

/* ---- Home hero refinements ---- */
.home-hero {
    padding: clamp(5rem, 12vw, 10rem) 0 clamp(4rem, 10vw, 8rem);
    background:
        radial-gradient(ellipse at top right, rgba(255,255,255,0.04), transparent 60%),
        var(--color-dark);
}
.home-hero .eyebrow {
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: 0.22em;
}

/* Reveal "lift" del headline letra a letra (con CSS only via animation-delay en spans) */
.home-headline {
    opacity: 0;
    animation: headlineRise 1.1s var(--ease-out-expo) 0.2s forwards;
}
@keyframes headlineRise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CTA principal: flecha que se desliza al hover */
.home-cta {
    position: relative;
    padding-right: 1.2rem;
    overflow: hidden;
    transition: transform var(--t-snap), background var(--t-snap), padding var(--t-flow);
}
.home-cta svg,
.home-cta::after {
    transition: transform var(--t-flow);
}
.home-cta:hover {
    transform: translateY(-2px);
    padding-right: 1.6rem;
}
.home-cta:hover svg {
    transform: translateX(4px);
}
.home-cta:active { transform: translateY(0); }

/* ---- Eyebrow refinement ---- */
.eyebrow {
    letter-spacing: 0.2em;
    font-weight: 600;
}

/* ---- Filter dropdowns: chip refinada ---- */
.toolbar__select {
    padding: 0.6rem 2.4rem 0.6rem 1.2rem;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-line);
    transition: border-color var(--t-snap), background var(--t-snap), transform var(--t-snap);
    font-weight: 500;
}
.toolbar__select:hover {
    border-color: var(--color-ink);
    transform: translateY(-1px);
}
.toolbar__select:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
}

/* ---- Cards: hover envuelto + arrow rotation ---- */
.card-standard,
.card-gallery,
.card-masonry,
.card-slider {
    transition: transform var(--t-flow);
}
.card-standard__media,
.card-gallery__media,
.card-masonry__media,
.card-slider__media {
    position: relative;
}
.card-standard__media::after,
.card-gallery__media::after,
.card-masonry__media::after,
.card-slider__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-flow);
}
.card-standard:hover .card-standard__media::after,
.card-gallery:hover .card-gallery__media::after,
.card-masonry:hover .card-masonry__media::after,
.card-slider:hover .card-slider__media::after {
    opacity: 1;
}
.card-standard:hover .card-standard__media img,
.card-gallery:hover .card-gallery__media img,
.card-masonry:hover .card-masonry__media img,
.card-slider:hover .card-slider__media img {
    transform: scale(1.06);
}

/* Arrow refinement: aparece con rotación sutil */
.card-arrow {
    width: 46px; height: 46px;
    transform: translateY(12px) rotate(-12deg);
    transition: transform var(--t-flow), opacity var(--t-flow);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.card-standard:hover .card-arrow {
    transform: translateY(0) rotate(0deg);
}

/* Placeholder card refinement: subtle hover */
.card-placeholder {
    transition: background var(--t-flow);
    background: linear-gradient(135deg, #262626, #131313);
}
.card-standard:hover .card-placeholder,
.card-gallery:hover .card-placeholder {
    background: linear-gradient(135deg, #2f2f2f, #181818);
}
.card-placeholder span {
    font-style: italic;
    font-variation-settings: "opsz" 96;
    transition: opacity var(--t-flow), transform var(--t-flow);
}
.card-standard:hover .card-placeholder span {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* Card title smooth color shift on hover */
.card-standard__title,
.card-masonry__title,
.card-slider__title {
    transition: opacity var(--t-snap);
}
.card-standard:hover .card-standard__title,
.card-masonry:hover .card-masonry__title,
.card-slider:hover .card-slider__title {
    opacity: 0.72;
}

/* ---- Archive intro: alignment refinements ---- */
.archive-intro__row {
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
}
.archive-intro__main .eyebrow {
    margin-bottom: 0.75rem;
}

/* ---- Single project hero: subtle parallax via clip-path safety ---- */
.project-hero--full {
    position: relative;
    overflow: hidden;
}
.project-hero--full img {
    transition: transform var(--t-slow);
    transform: scale(1.02);
}
.is-loaded .project-hero--full img { transform: scale(1); }

/* Section item numbers more refined */
.section-item__num {
    font-family: var(--font-serif);
    font-weight: 700;
    font-style: italic;
    font-variation-settings: "opsz" 144;
    -webkit-text-stroke: 1px var(--color-ink);
    letter-spacing: -0.02em;
}

/* ---- Project meta block: spacing & type ---- */
.meta-label { letter-spacing: 0.14em; }
.meta-grid { gap: 2.5rem 2rem; }

/* ---- Studio sections refinement ---- */
.section-num {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 1.35rem;
    font-variation-settings: "opsz" 36;
}

/* Disciplines item: hover reveal */
.discipline-item {
    transition: background var(--t-flow), padding var(--t-flow);
    padding: 1.75rem 0;
}
.discipline-item:hover { padding-left: 0.5rem; padding-right: 0.5rem; }
.discipline-item__title {
    transition: transform var(--t-flow);
    transform-origin: left;
}
.discipline-item:hover .discipline-item__title { transform: translateX(4px); }

/* Clients list refinement: hover state */
.clients-list li {
    transition: color var(--t-snap), padding-left var(--t-flow);
    cursor: default;
}
.clients-list li:hover {
    color: var(--color-ink);
    padding-left: 4px;
}

/* ---- Awards table refinement ---- */
.awards-table { border-top: 1px solid var(--color-ink-soft); }
.award-row {
    transition: background var(--t-flow), padding-left var(--t-flow);
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 8px;
}
.award-row:hover {
    background: rgba(0,0,0,0.025);
    padding-left: 1rem;
}
.award-row__year {
    font-style: italic;
    font-variation-settings: "opsz" 36;
}

/* Medal pill: subtle inner shadow */
.award-row__medal {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* ---- Footer CTA refinement ---- */
.site-footer__cta {
    padding: clamp(5rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(ellipse at bottom left, rgba(255,255,255,0.05), transparent 60%),
        var(--color-dark);
}
.cta-headline {
    text-transform: none;
}
.cta-line--outline {
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: var(--color-ink-inverse);
}
.cta-socials a {
    position: relative;
    border-bottom: 0;
    padding-bottom: 6px;
}
.cta-socials a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--color-ink-inverse);
    transform-origin: right;
    transform: scaleX(1);
    transition: transform var(--t-flow);
}
.cta-socials a:hover::after { transform-origin: left; transform: scaleX(0.3); }

/* ---- Project navigation refinement ---- */
.project-nav__link {
    transition: transform var(--t-flow), opacity var(--t-flow);
}
.project-nav__link--prev:hover { transform: translateX(-6px); }
.project-nav__link--next:hover { transform: translateX(6px); }
.project-nav__all {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-dark);
    display: grid;
    place-items: center;
    transition: transform var(--t-flow), background var(--t-flow);
}
.project-nav__all:hover {
    transform: rotate(90deg);
    background: var(--color-dark);
    color: var(--color-ink-inverse);
}

/* ---- Back-to-top refinement ---- */
.back-to-top {
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: opacity var(--t-flow), transform var(--t-flow), background var(--t-snap);
}
.back-to-top:hover {
    transform: translateY(-4px) scale(1.05);
    background: var(--color-ink-soft);
}

/* ---- Reveal-on-scroll: choreography refinada con stagger ---- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger en grids: cada hijo retrasa */
.grid-standard .reveal,
.grid-gallery .reveal,
.grid-masonry .reveal {
    transition-delay: 0s;
}
.grid-standard > a:nth-child(2).reveal,
.grid-gallery > a:nth-child(2).reveal,
.grid-masonry > a:nth-child(2).reveal { transition-delay: 0.08s; }
.grid-standard > a:nth-child(3).reveal,
.grid-gallery > a:nth-child(3).reveal,
.grid-masonry > a:nth-child(3).reveal { transition-delay: 0.16s; }
.grid-standard > a:nth-child(4).reveal,
.grid-gallery > a:nth-child(4).reveal,
.grid-masonry > a:nth-child(4).reveal { transition-delay: 0.24s; }

/* Stagger reveal de cards: SOLO se aplica si el grid contenedor tiene la clase
   .is-grid-visible (la añade el JS cuando el grid entra en viewport). Si no,
   las cards son visibles por defecto — más robusto. */
.grid-standard.is-grid-revealing > a,
.grid-gallery.is-grid-revealing > a,
.grid-masonry.is-grid-revealing > a {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.grid-standard.is-grid-visible > a,
.grid-gallery.is-grid-visible > a,
.grid-masonry.is-grid-visible > a {
    opacity: 1;
    transform: translateY(0);
}
.is-grid-visible > a:nth-child(1) { transition-delay: 0s; }
.is-grid-visible > a:nth-child(2) { transition-delay: 0.07s; }
.is-grid-visible > a:nth-child(3) { transition-delay: 0.14s; }
.is-grid-visible > a:nth-child(4) { transition-delay: 0.21s; }
.is-grid-visible > a:nth-child(5) { transition-delay: 0.28s; }
.is-grid-visible > a:nth-child(6) { transition-delay: 0.35s; }
.is-grid-visible > a:nth-child(n+7) { transition-delay: 0.42s; }

/* ---- Focus visible (accesibilidad) ---- */
*:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 4px;
    border-radius: 4px;
}
.site-header *:focus-visible,
.site-footer__cta *:focus-visible {
    outline-color: var(--color-ink-inverse);
}

/* ---- Custom cursor (sutil, solo desktop con puntero fino) ----
   No usamos mix-blend-mode: falla cuando un ancestro crea un stacking context.
   En su lugar el cursor lleva una clase .is-on-dark que el JS aplica cuando
   está sobre secciones oscuras. Cambia el color de forma explícita. */
@media (hover: hover) and (pointer: fine) {
    body { cursor: none; }
    .kembeke-cursor {
        position: fixed;
        top: 0; left: 0;
        width: 10px; height: 10px;
        background: var(--color-ink);
        border: 1.5px solid var(--color-bg-alt);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width var(--t-flow), height var(--t-flow),
                    background var(--t-snap), border-color var(--t-snap);
    }
    .kembeke-cursor.is-on-dark {
        background: var(--color-bg-alt);
        border-color: var(--color-ink);
    }
    .kembeke-cursor.is-hover {
        width: 42px; height: 42px;
        background: transparent;
        border-width: 1.5px;
        border-color: var(--color-ink);
    }
    .kembeke-cursor.is-hover.is-on-dark {
        border-color: var(--color-bg-alt);
    }
    a, button, [role="button"], select, input, textarea, .menu-toggle, .swiper-slide { cursor: none; }
}

/* ---- Gallery images en proyecto: hover scale sutil ---- */
.gallery-figure,
.masonry-figure,
.square-figure {
    overflow: hidden;
}
.gallery-figure img,
.masonry-figure img,
.square-figure img {
    transition: transform var(--t-slow);
}
.gallery-figure:hover img,
.masonry-figure:hover img,
.square-figure:hover img {
    transform: scale(1.025);
}

/* ---- Swiper controls refinement ---- */
.swiper-controls button {
    transition: background var(--t-snap), color var(--t-snap), transform var(--t-snap);
    border: 1px solid var(--color-line);
}
.swiper-controls button:hover {
    transform: translateY(-2px);
    border-color: var(--color-ink);
}

/* ---- Page intros: más respiro entre eyebrow → title → lead ---- */
.page-intro {
    padding: clamp(4rem, 9vw, 8rem) 0 clamp(2rem, 5vw, 4rem);
}
.page-intro .eyebrow { margin-bottom: 1rem; }
.page-intro__lead { margin-top: var(--space-md); font-style: italic; font-variation-settings: "opsz" 36; }

/* ---- Footer columns refinement ---- */
.footer-col__title {
    letter-spacing: 0.22em;
    font-size: 11px;
}

/* Footer link with subtle underline */
.footer-col a {
    position: relative;
    border-bottom: 0;
    padding-bottom: 1px;
}
.footer-col a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.65;
    transition: width var(--t-flow);
}
.footer-col a:hover::after { width: 100%; }

/* ---- Project intro 3-col alignment ---- */
.project-intro__grid {
    align-items: start;
}
.project-intro__date,
.project-intro__about {
    padding-top: 0.5rem;
}
.project-intro__about .meta-label { margin-bottom: 0.75rem; }

/* ---- Small touch on contact emails ---- */
.contact-person__detail a,
.team-card__email {
    position: relative;
    padding-bottom: 2px;
    border-bottom: 0;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--t-flow);
}
.contact-person__detail a:hover,
.team-card__email:hover {
    background-size: 100% 2px;
}

/* ---- Edge polish ---- */
img { -webkit-user-drag: none; }
.brand a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* ---- Custom logo (Apariencia → Personalizar → Identidad del sitio) ----
   Cuando el usuario sube un logo desde el Customizer, WP lo envuelve en
   <a class="custom-logo-link"><img class="custom-logo">. Lo estilamos para
   que quepa en el header oscuro respetando proporción. */
.brand .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.brand .custom-logo {
    max-height: 48px;
    width: auto;
    display: block;
    transition: max-height var(--t-flow);
}
.site-header.is-scrolled .brand .custom-logo {
    max-height: 36px;
}
@media (max-width: 560px) {
    .brand .custom-logo { max-height: 40px; }
}