/* EDITA AQUÍ los tonos y las fuentes principales del portafolio. */
:root {
    --paper: #f7f7f4;
    --ink: #191a18;
    --muted: #777973;
    --line: #ddded9;
    --accent: #e2ff62;
    --sans: 'DM Sans', sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --mono: 'DM Mono', monospace;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

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

.site-header {
    height: 8vh;
    padding: 0 5.5%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    border-bottom: 1.5px solid var(--line);
}

.brand {
    font-size: 3vh;
    font-weight: 700;
    letter-spacing: -.055em;
}

.brand span {
    font: 1.7vh var(--mono);
    vertical-align: top;
    margin-left: 3px;
}

.site-header nav {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.site-header nav a,
.availability {
    font-size: 1.6vh;
    font-weight: 500;
}

.site-header nav a {
    position: relative;
}

.site-header nav a:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 100%;
    height: 1px;
    background: var(--ink);
    transition: right .25s;
}

.site-header nav a:hover:after {
    right: 0;
}

.availability {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

.availability i {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #81a930;
    box-shadow: 0 0 0 4px #81a9301c;
}

.masthead {
    padding: 94px 8% 40px;
}


.eyebrow,
.section-label,
.contact-kicker {
    font: 9px var(--mono);
    letter-spacing: .07em;
    color: var(--muted);
}

.masthead .eyebrow {
    margin: 0 0 21px;
    text-align: center;
}

.masthead h1 {
    display: block;
    width: 100%;
    max-width: none;
    font-size: clamp(42px, 8.2vw, 118px);
    line-height: .9;
    letter-spacing: -.085em;
    font-weight: 500;
    margin: 0;
    text-wrap: balance;
}

.masthead h1 span {
    color: #bbbdb6;
    font-family: var(--serif);
    font-weight: 400;
    margin-left: .08em;
}

.masthead-bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-top: 33px;
}

.masthead-bottom p {
    max-width: 330px;
    font-size: 13px;
    line-height: 1.65;
    color: #676962;
    margin: 0;
}

.masthead-bottom a {
    font: 8px var(--mono);
    letter-spacing: .04em;
}

.masthead-bottom a span {
    font-size: 15px;
    margin-left: 12px;
    display: inline-block;
    animation: arrow-down 1.6s ease-in-out infinite;
}

@keyframes arrow-down {
    50% {
        transform: translateY(5px);
    }
}

.gallery {
    padding: 15px 5.5% 105px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(58px, 7.5vw, 108px);
    gap: 13px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background: #d9dad5;
    isolation: isolate;
}

.gallery-item:before {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    z-index: 1;
    background: linear-gradient(transparent, #090b0bb8);
    opacity: .62;
    transition: opacity .35s;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .7, .25, 1), filter .5s;
    filter: saturate(.75);
}

.gallery-item:hover img {
    transform: scale(1.045);
    filter: saturate(1);
}

.gallery-item:hover:before {
    opacity: .85;
}

.gallery-item--tall {
    grid-column: span 5;
    grid-row: span 4;
}

.gallery-item--wide {
    grid-column: span 7;
    grid-row: span 3;
}

.gallery-item--short {
    grid-column: span 3;
    grid-row: span 3;
}

.gallery-item:nth-child(4) {
    grid-column: span 4;
}

.gallery-item:nth-child(5) {
    grid-column: span 7;
    grid-row: span 3;
}

.gallery-item:nth-child(6) {
    grid-column: span 5;
    grid-row: span 4;
}

.image-index,
.image-title,
.image-open {
    position: absolute;
    z-index: 2;
    color: #fff;
}

.image-index {
    left: 17px;
    top: 16px;
    font: 8px var(--mono);
    letter-spacing: .08em;
}

.image-title {
    left: 18px;
    bottom: 17px;
    font-size: clamp(15px, 2vw, 25px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.055em;
    transform: translateY(6px);
    opacity: .8;
    transition: transform .3s, opacity .3s;
}

.gallery-item:hover .image-title {
    transform: translateY(0);
    opacity: 1;
}

.image-open {
    right: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid #ffffffa0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    transition: color .25s, background .25s, transform .25s;
}

.gallery-item:hover .image-open {
    background: var(--accent);
    color: var(--ink);
    border-color: var(--accent);
    transform: rotate(45deg);
}

.section-shell {
    padding: 72px 10%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5%;
    border-top: 1px solid var(--line);
}

.section-label {
    padding-top: 8px;
}

.about-copy {
    display: grid;
    grid-template-columns: 1.1fr .8fr;
    gap: 9%;
    align-items: start;
}

.about h2,
.contact h2 {
    font-size: clamp(36px, 5.3vw, 69px);
    line-height: .98;
    letter-spacing: -.075em;
    font-weight: 500;
    margin: 0;
}

.about h2 em,
.contact h2 em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.045em;
}

.about-text {
    font-size: 12px;
    line-height: 1.8;
    color: #686a63;
}

.about-text p {
    margin: 0 0 14px;
}

.under-link {
    display: inline-flex;
    gap: 14px;
    margin-top: 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink);
}

.services {
    padding-top: 48px;
    padding-bottom: 88px;
}

.service-list article {
    display: grid;
    grid-template-columns: 36px 1fr 1fr 22px;
    gap: 12px;
    align-items: center;
    padding: 19px 0;
    border-top: 1px solid var(--line);
}

.service-list article:last-child {
    border-bottom: 1px solid var(--line);
}

.service-list article>span {
    font: 9px var(--mono);
    color: var(--muted);
}

.service-list h3 {
    font-size: 15px;
    letter-spacing: -.04em;
    font-weight: 500;
    margin: 0;
}

.service-list p {
    font-size: 10px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.service-list b {
    font-size: 15px;
    text-align: right;
    font-weight: 400;
    transition: transform .25s;
}

.service-list article:hover b {
    transform: translate(3px, -3px);
}

.contact {
    background: #20211f;
    color: var(--paper);
    position: relative;
    overflow: hidden;
    padding: 76px 10% 68px;
}

.contact-kicker {
    color: #a5a69e;
    margin-bottom: 27px;
}

.contact h2 {
    font-size: clamp(50px, 8vw, 100px);
    position: relative;
    z-index: 1;
}

.contact h2 em {
    color: var(--accent);
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 44px;
    margin-top: 37px;
    border-bottom: 1px solid #ffffff70;
    padding-bottom: 10px;
    font-size: 11px;
    position: relative;
    z-index: 1;
}

.contact-link span {
    font-size: 16px;
    transition: transform .2s;
}

.contact-link:hover span {
    transform: translate(3px, -3px);
}

.contact-mark {
    position: absolute;
    right: 10%;
    top: 14%;
    font-size: clamp(100px, 23vw, 300px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.15em;
    color: #ffffff08;
    transform: rotate(-8deg);
    pointer-events: none;
}

.site-footer {
    min-height: 76px;
    padding: 18px 5.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-footer>p,
.site-footer>div {
    font: 9px var(--mono);
    color: var(--muted);
    margin: 0;
}

.site-footer>div {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-footer>div a {
    color: var(--ink);
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .75s cubic-bezier(.2, .7, .25, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-item:nth-child(2),
.service-list article:nth-child(2) {
    transition-delay: .08s;
}

.gallery-item:nth-child(3),
.service-list article:nth-child(3) {
    transition-delay: .15s;
}

.gallery-item:nth-child(4) {
    transition-delay: .22s;
}

.gallery-item:nth-child(5) {
    transition-delay: .1s;
}

.gallery-item:nth-child(6) {
    transition-delay: .18s;
}

@media(max-width:760px) {
    .site-header {
        height: 66px;
        padding: 0 5%;
        grid-template-columns: 1fr auto;
    }

    .site-header nav {
        grid-column: 2;
        grid-row: 1;
        gap: 16px;
    }

    .availability {
        display: none;
    }

    .site-header nav a {
        font-size: 9px;
    }

    .masthead {
        padding: 72px 7% 30px;
    }

    .masthead h1 {
        font-size: clamp(38px, 9vw, 68px);
    }

    .masthead-bottom {
        gap: 20px;
    }

    .masthead-bottom p {
        font-size: 11px;
    }

    .masthead-bottom a {
        font-size: 7px;
        white-space: nowrap;
    }

    .gallery {
        padding: 12px 4% 75px;
        grid-auto-rows: 70px;
        gap: 8px;
    }

    .gallery-item--tall {
        grid-column: span 6;
        grid-row: span 4;
    }

    .gallery-item--wide {
        grid-column: span 6;
        grid-row: span 3;
    }

    .gallery-item--short {
        grid-column: span 6;
        grid-row: span 3;
    }

    .gallery-item:nth-child(4) {
        grid-column: span 6;
    }

    .gallery-item:nth-child(5) {
        grid-column: span 6;
        grid-row: span 3;
    }

    .gallery-item:nth-child(6) {
        grid-column: span 6;
        grid-row: span 4;
    }

    .section-shell {
        padding: 56px 7%;
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .about-copy {
        grid-template-columns: 1fr 1fr;
        gap: 6%;
    }

    .service-list article {
        grid-template-columns: 28px 1fr 22px;
    }

    .service-list p {
        grid-column: 2;
        grid-row: 2;
    }

    .service-list b {
        grid-column: 3;
        grid-row: 1/3;
    }

    .contact {
        padding: 62px 7% 55px;
    }

    .site-footer {
        padding: 18px 5%;
        gap: 12px;
    }

    .site-footer>p {
        display: none;
    }

    .site-footer>div {
        gap: 12px;
        font-size: 8px;
    }
}

@media(max-width:480px) {
    .brand {
        font-size: 13px;
    }

    .site-header nav {
        gap: 12px;
    }

    .site-header nav a {
        font-size: 8px;
    }

    .masthead {
        padding-top: 58px;
    }

    .masthead h1 {
        font-size: clamp(34px, 9.5vw, 46px);
    }

    .masthead-bottom {
        align-items: start;
        flex-direction: column;
        gap: 15px;
    }

    .gallery {
        grid-auto-rows: 54px;
        gap: 7px;
        padding-left: 3%;
        padding-right: 3%;
        padding-bottom: 58px;
    }

    .gallery-item--tall,
    .gallery-item:nth-child(6) {
        grid-column: span 12;
        grid-row: span 4;
    }

    .gallery-item--wide,
    .gallery-item:nth-child(5) {
        grid-column: span 12;
        grid-row: span 3;
    }

    .gallery-item--short,
    .gallery-item:nth-child(4) {
        grid-column: span 6;
        grid-row: span 3;
    }

    .image-index {
        font-size: 7px;
        left: 10px;
        top: 10px;
    }

    .image-title {
        left: 11px;
        bottom: 11px;
        font-size: 18px;
    }

    .image-open {
        right: 9px;
        bottom: 9px;
        width: 26px;
        height: 26px;
    }

    .about-copy {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .about h2 {
        font-size: 45px;
    }

    .service-list h3 {
        font-size: 13px;
    }

    .service-list p {
        font-size: 9px;
    }

    .contact h2 {
        font-size: 53px;
    }

    .contact-mark {
        top: 31%;
    }

    .site-footer .brand {
        font-size: 12px;
    }

    .site-footer>div {
        gap: 9px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    .masthead-bottom a span {
        animation: none;
    }

    .reveal,
    .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.gallery-item--video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #d9dad5;
}

.gallery-item--video .image-title {
    bottom: 58px;
}

.gallery-item--video .image-open {
    top: 13px;
    right: 13px;
    bottom: auto;
    pointer-events: none;
}

.gallery-item--video:before {
    pointer-events: none;
}

.video-toggle {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border: 1px solid #fff;
    background: #171916b8;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: opacity .2s, background .2s, scale .2s;
}

.video-toggle:hover {
    background: #171916;
    color: #fff;
    scale: 1.08;
}

.gallery-item--video.is-playing .video-toggle {
    opacity: 0;
    pointer-events: none;
}

.video-status {
    display: none;
    position: absolute;
    z-index: 5;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px;
    background: #191a18e8;
    color: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
}

.gallery-item--video.has-error .video-status {
    display: block;
}

.gallery-item--video.has-error .video-toggle {
    display: none;
}

/* Galería nueva: combina video vertical/horizontal, proyectos web y fotografía. */
.gallery-section {
    padding: 24px 8% 105px;
}

.gallery-heading {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 360px);
    align-items: end;
    gap: 32px;
    margin-bottom: 28px;
}

.gallery-kicker {
    margin: 0 0 12px;
    color: var(--muted);
    font: 9px var(--mono);
    letter-spacing: .08em;
}

.gallery-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 58px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.07em;
}

.gallery-heading > p {
    margin: 0 0 3px;
    color: #676962;
    font-size: 12px;
    line-height: 1.65;
}

.gallery-filters {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gallery-filters::-webkit-scrollbar {
    display: none;
}

.gallery-filter {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: transparent;
    color: var(--ink);
    font: 9px var(--mono);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.gallery-filter:hover,
.gallery-filter.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(38px, 4.2vw, 58px);
    gap: 12px;
}

.gallery-grid > .gallery-item {
    min-width: 0;
    min-height: 0;
}

.gallery-grid > .gallery-item.gallery-item--portrait {
    grid-column: span 3;
    grid-row: span 9;
}

.gallery-grid > .gallery-item.gallery-item--landscape {
    grid-column: span 6;
    grid-row: span 5;
}

.gallery-grid > .gallery-item.gallery-item--digital {
    grid-row: span 5;
    background: #e6e7e2;
}

.gallery-grid > .gallery-item.gallery-item--digital.gallery-item--portrait {
    grid-row: span 7;
}

.gallery-grid > .gallery-item.gallery-item--digital img {
    object-fit: contain;
    padding: 10px;
    filter: none;
}

.gallery-grid > .gallery-item.gallery-item--photo.gallery-item--portrait {
    grid-row: span 7;
}

.gallery-grid > .gallery-item.gallery-item--photo.gallery-item--landscape {
    grid-row: span 5;
}

.gallery-grid > .gallery-item.gallery-item--video video {
    object-fit: contain;
}

.gallery-grid > .gallery-item .image-index {
    max-width: calc(100% - 28px);
    line-height: 1.5;
}

.image-format {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 15px;
    color: #ffffffd9;
    font: 8px var(--mono);
    letter-spacing: .06em;
}

.gallery-grid > .gallery-item--video .image-title {
    max-width: calc(100% - 35px);
}

.gallery-grid > .gallery-item.is-filter-hidden {
    display: none !important;
}

@media (max-width: 760px) {
    .gallery-section {
        padding: 22px 7% 75px;
    }

    .gallery-heading {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 22px;
    }

    .gallery-heading > p {
        max-width: 520px;
    }

    .gallery-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: 48px;
        gap: 9px;
    }

    .gallery-grid > .gallery-item.gallery-item--portrait {
        grid-column: span 3;
        grid-row: span 12;
    }

    .gallery-grid > .gallery-item.gallery-item--landscape {
        grid-column: span 6;
        grid-row: span 5;
    }

    .gallery-grid > .gallery-item.gallery-item--digital.gallery-item--portrait {
        grid-row: span 9;
    }

    .gallery-grid > .gallery-item.gallery-item--photo.gallery-item--portrait {
        grid-row: span 8;
    }

    .gallery-grid > .gallery-item.gallery-item--photo.gallery-item--landscape {
        grid-row: span 5;
    }
}

@media (max-width: 480px) {
    .gallery-section {
        padding: 18px 7% 58px;
    }

    .gallery-heading h2 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .gallery-grid {
        grid-auto-rows: 48px;
        gap: 7px;
    }

    .gallery-grid > .gallery-item.gallery-item--portrait {
        grid-column: span 6;
        grid-row: span 14;
    }

    .gallery-grid > .gallery-item.gallery-item--landscape {
        grid-column: span 6;
        grid-row: span 5;
    }

    .gallery-grid > .gallery-item.gallery-item--digital.gallery-item--portrait {
        grid-row: span 10;
    }

    .gallery-grid > .gallery-item.gallery-item--photo.gallery-item--portrait {
        grid-row: span 9;
    }

    .image-format {
        right: 10px;
        bottom: 10px;
        font-size: 7px;
    }
}

/* Mosaico compacto: las columnas apilan tarjetas de distinta altura sin dejar huecos. */
.gallery-grid {
    display: block;
    column-count: 4;
    column-gap: 12px;
}

.gallery-grid > .gallery-item {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    break-inside: avoid;
    vertical-align: top;
}

.gallery-grid > .gallery-item.gallery-item--landscape {
    aspect-ratio: 16 / 10;
}

.gallery-grid > .gallery-item.gallery-item--portrait {
    aspect-ratio: 9 / 14;
}

.gallery-grid > .gallery-item.gallery-item--digital.gallery-item--landscape {
    aspect-ratio: 4 / 3;
}

.gallery-grid > .gallery-item.gallery-item--digital.gallery-item--portrait {
    aspect-ratio: 3 / 4;
}

.gallery-grid > .gallery-item.gallery-item--photo.gallery-item--landscape {
    aspect-ratio: 4 / 3;
}

.gallery-grid > .gallery-item.gallery-item--photo.gallery-item--portrait {
    aspect-ratio: 3 / 4;
}

@media (max-width: 900px) {
    .gallery-grid {
        column-count: 3;
    }
}

@media (max-width: 560px) {
    .gallery-grid {
        column-count: 2;
        column-gap: 8px;
    }

    .gallery-grid > .gallery-item {
        margin-bottom: 8px;
    }
}

/* Etiquetas y títulos legibles sobre portadas claras u oscuras. */
.gallery-grid > .gallery-item .image-index {
    top: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: clamp(9px, 1.35vh, 13px);
    line-height: 1.35;
    letter-spacing: .065em;
    text-shadow: 0 1px 1px #000, 1px 0 2px #000, -1px 0 2px #000, 0 0 7px #000c;
    -webkit-text-stroke: .55px #151515;
    paint-order: stroke fill;
}

.gallery-grid > .gallery-item .image-title {
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    color: #fff;
    font-size: clamp(18px, 2.65vh, 30px);
    line-height: 1.08;
    text-shadow: 0 1px 2px #000, 1px 0 2px #000, -1px 0 2px #000, 0 3px 13px #000b;
    -webkit-text-stroke: .45px #151515;
    paint-order: stroke fill;
}

.gallery-grid > .gallery-item--video .image-title {
    bottom: 58px;
    max-width: calc(100% - 34px);
}

.gallery-grid > .gallery-item .image-format {
    font-size: clamp(8px, 1.15vh, 11px);
    text-shadow: 0 1px 3px #000, 0 2px 8px #000b;
}

@media (max-width: 560px) {
    .gallery-grid > .gallery-item .image-index {
        top: 9px;
        left: 9px;
        max-width: calc(100% - 18px);
        padding: 0;
        font-size: clamp(8px, 1.3vh, 10px);
    }

    .gallery-grid > .gallery-item .image-title {
        left: 11px;
        bottom: 11px;
        max-width: calc(100% - 22px);
        font-size: clamp(16px, 2.7vh, 24px);
    }

    .gallery-grid > .gallery-item--video .image-title {
        bottom: 46px;
    }

    .gallery-grid > .gallery-item .image-format {
        right: 9px;
        bottom: 9px;
        font-size: clamp(7px, 1.15vh, 9px);
    }
}