/* ==========================================================
   PORTFOLIO NEO JAPÓN
   Archivo y casos de estudio: tinta editorial, papel crema,
   geometría shoji y acentos cobre/sakura.
========================================================== */

body.portfolio-archive,
body.project-study {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-body);
}

body.portfolio-archive main,
body.project-study main { overflow: clip; }

/* ---------- Archivo: portada editorial, sin imaginería espacial ---------- */
.portfolio-archive .hero-archive {
    position: relative;
    min-height: 760px;
    display: grid;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    padding: 180px max(5vw, 24px) 90px;
    color: var(--paper-strong);
    background:
        radial-gradient(circle at 82% 36%, rgba(201, 75, 58, .22) 0 11%, transparent 11.2%),
        radial-gradient(circle at 82% 36%, rgba(229, 166, 181, .07) 0 22%, transparent 22.2%),
        linear-gradient(125deg, #061019 0%, #0b1a25 58%, #101e27 100%);
}

.portfolio-archive .hero-archive::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .65;
    background:
        linear-gradient(90deg, transparent 0 67%, rgba(243, 235, 221, .1) 67% 67.08%, transparent 67.08%),
        linear-gradient(90deg, transparent 0 82%, rgba(243, 235, 221, .08) 82% 82.08%, transparent 82.08%),
        linear-gradient(0deg, transparent 0 31%, rgba(243, 235, 221, .08) 31% 31.12%, transparent 31.12%),
        linear-gradient(0deg, transparent 0 62%, rgba(243, 235, 221, .06) 62% 62.12%, transparent 62.12%);
}

.portfolio-archive .hero-archive::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(4, 11, 17, .3), transparent 58%),
        linear-gradient(0deg, rgba(4, 11, 17, .55), transparent 44%);
}

.portfolio-archive .hero-bg,
.portfolio-archive .hero-space { display: none !important; }

.portfolio-archive .hero-inner {
    position: relative;
    z-index: 2;
    width: min(1240px, 100%);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    align-items: end;
    gap: clamp(54px, 8vw, 120px);
    margin: 0 auto;
}

.portfolio-archive .hero-copy { max-width: 780px; }

.portfolio-archive .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 30px;
    padding: 0;
    color: var(--paper-muted);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    font: 600 .72rem/1.4 var(--font-mono);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.portfolio-archive .hero-badge::before {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--copper), var(--sakura));
}

.portfolio-archive .hero-badge .dot { display: none; }

.portfolio-archive .hero-title {
    max-width: 870px;
    margin: 0 0 28px;
    color: var(--paper-strong);
    font: 700 clamp(3.5rem, 7vw, 7rem)/.96 var(--font-display);
    letter-spacing: -.075em;
    text-shadow: none;
    text-wrap: balance;
}

.portfolio-archive .hero-title .grad {
    color: var(--sakura);
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
}

.portfolio-archive .hero-desc {
    max-width: 690px;
    margin: 0;
    color: #c2cbcd;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.75;
}

.portfolio-archive .archive-principle {
    display: block;
    margin-top: 28px;
    color: rgba(255, 249, 237, .5);
    font: .68rem/1.6 var(--font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.portfolio-archive .stats-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border: 1px solid rgba(243, 235, 221, .13);
    background: rgba(243, 235, 221, .12);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
}

.portfolio-archive .stat-item {
    min-height: 132px;
    display: grid;
    align-content: end;
    gap: 10px;
    padding: 24px;
    background: rgba(6, 16, 25, .78);
    backdrop-filter: blur(18px);
}

.portfolio-archive .stat-number {
    color: var(--paper-strong);
    font: 700 clamp(2rem, 4vw, 3.15rem)/1 var(--font-display);
    letter-spacing: -.06em;
}

.portfolio-archive .stat-label {
    color: #829198;
    font: 600 .65rem/1.45 var(--font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.portfolio-archive .hero-japanese-mark {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(255, 249, 237, .34);
    font: .64rem/1.4 var(--font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

/* ---------- Archivo: filtros y rejilla ---------- */
.portfolio-archive .filter-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 42px max(5vw, 24px) 22px;
    text-align: left;
    color: var(--ink);
    background: var(--paper);
}

.portfolio-archive .filter-tabs {
    width: min(1240px, 100%);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto;
    padding: 7px;
    background: rgba(255, 249, 237, .72);
    border: 1px solid rgba(7, 17, 26, .12);
    border-radius: 999px;
    box-shadow: 0 16px 45px rgba(7, 17, 26, .07);
    backdrop-filter: blur(14px);
}

.portfolio-archive .filter-tab {
    min-height: 44px;
    padding: 10px 20px;
    color: #596770;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 650 .78rem/1 var(--font-body);
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.portfolio-archive .filter-tab:hover {
    color: var(--ink);
    background: rgba(201, 121, 61, .09);
}

.portfolio-archive .filter-tab.active,
.portfolio-archive .filter-tab[aria-pressed='true'] {
    color: var(--paper-strong);
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: none;
}

.portfolio-archive .projects-section {
    position: relative;
    width: min(1370px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 54px max(5vw, 24px) 120px;
    color: var(--ink);
    background: var(--paper);
}

.portfolio-archive .cat-group { margin-bottom: 94px; }
.portfolio-archive .cat-group:last-child { margin-bottom: 0; }

.portfolio-archive .cat-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    margin: 0;
    padding: 0 0 18px;
}

.portfolio-archive .cat-icon {
    color: var(--vermilion-ink);
    font: 700 .72rem/1 var(--font-mono);
    letter-spacing: .12em;
}

.portfolio-archive .cat-title {
    margin: 0;
    color: var(--ink);
    font: 700 clamp(1.75rem, 3vw, 2.65rem)/1.1 var(--font-display);
    letter-spacing: -.055em;
}

.portfolio-archive .cat-count {
    padding: 0;
    color: #66757d;
    background: transparent;
    font: .68rem/1.2 var(--font-mono);
    letter-spacing: .06em;
}

.portfolio-archive .cat-line {
    height: 1px;
    margin: 0 0 30px;
    background: linear-gradient(90deg, rgba(7, 17, 26, .34), rgba(201, 121, 61, .25), transparent 80%);
}

.portfolio-archive .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

.portfolio-archive .project-card {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    background: rgba(255, 249, 237, .82);
    border: 1px solid rgba(7, 17, 26, .12);
    border-radius: 3px;
    box-shadow: 0 18px 55px rgba(7, 17, 26, .07);
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .45s ease;
}

.portfolio-archive .project-card::before {
    inset: auto 0 0;
    height: 4px;
    border-radius: 0;
    background: linear-gradient(90deg, var(--vermilion), var(--copper), var(--sakura));
    opacity: 0;
    transition: opacity .3s ease;
}

.portfolio-archive .project-card:hover,
.portfolio-archive .project-card:focus-visible {
    color: var(--ink);
    transform: translateY(-8px);
    border-color: rgba(201, 121, 61, .45);
    box-shadow: 0 30px 70px rgba(7, 17, 26, .15);
}

.portfolio-archive .project-card.is-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition-delay: var(--reveal-delay, 0ms);
}

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

.portfolio-archive .project-card.is-reveal.is-visible:hover,
.portfolio-archive .project-card.is-reveal.is-visible:focus-visible {
    transform: translateY(-8px);
    transition-delay: 0ms;
}

.portfolio-archive .project-card:hover::before,
.portfolio-archive .project-card:focus-visible::before { opacity: 1; }

.portfolio-archive .card-img-wrap {
    height: 245px;
    background:
        linear-gradient(rgba(243,235,221,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243,235,221,.04) 1px, transparent 1px),
        var(--ink-soft);
    background-size: 28px 28px;
}

.portfolio-archive .card-img-wrap img {
    filter: saturate(.82) contrast(1.02);
    transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

.portfolio-archive .project-card:hover .card-img-wrap img,
.portfolio-archive .project-card:focus-visible .card-img-wrap img {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.02);
}

.portfolio-archive .card-img-overlay {
    background: linear-gradient(to top, rgba(7, 17, 26, .54), transparent 52%);
}

.portfolio-archive .card-status {
    top: 14px;
    right: 14px;
    color: var(--paper-strong);
    background: rgba(7, 17, 26, .78);
    border: 1px solid rgba(255, 249, 237, .16);
    border-radius: 999px;
    font: 650 .62rem/1.3 var(--font-mono);
    letter-spacing: .06em;
}

.portfolio-archive .card-status.online {
    color: #ccebd9;
    background: rgba(13, 52, 40, .86);
    border-color: rgba(126, 201, 158, .35);
}

.portfolio-archive .card-status.private {
    color: #f3d2b5;
    background: rgba(68, 38, 25, .86);
    border-color: rgba(201, 121, 61, .38);
}

.portfolio-archive .card-body { padding: 28px 28px 30px; }

.portfolio-archive .card-type {
    color: var(--vermilion-ink);
    font: 650 .66rem/1.4 var(--font-mono);
    letter-spacing: .12em;
}

.portfolio-archive .card-name {
    margin-bottom: 13px;
    color: var(--ink);
    font: 700 clamp(1.25rem, 2vw, 1.5rem)/1.2 var(--font-display);
    letter-spacing: -.04em;
}

.portfolio-archive .card-desc {
    color: #52616a;
    font-size: .91rem;
    line-height: 1.7;
}

.portfolio-archive .card-tags { gap: 7px; }

.portfolio-archive .card-tag {
    padding: 5px 9px;
    color: #59666d;
    background: rgba(7, 17, 26, .035);
    border: 1px solid rgba(7, 17, 26, .1);
    border-radius: 2px;
    font-family: var(--font-mono);
}

.portfolio-archive .card-footer {
    padding-top: 18px;
    border-top: 1px solid rgba(7, 17, 26, .09);
}

.portfolio-archive .card-cta {
    color: var(--ink);
    font: 650 .82rem/1.2 var(--font-body);
}

.portfolio-archive .card-cta .arrow { color: var(--vermilion-ink); }

.portfolio-archive .projects-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 70px 32px;
    text-align: center;
    background: var(--paper-strong);
    border: 1px solid var(--line-paper);
}

.portfolio-archive .projects-empty span {
    color: var(--copper-ink);
    font: .68rem var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.portfolio-archive .projects-empty h2 {
    margin: 16px 0 12px;
    color: var(--ink);
    font: 700 clamp(1.8rem, 4vw, 2.7rem)/1.1 var(--font-display);
    letter-spacing: -.055em;
}

.portfolio-archive .projects-empty p { color: #5c6a72; line-height: 1.75; }

/* El archivo recibe títulos, etiquetas y descripciones desde administración. */
.portfolio-archive .hero-copy,
.portfolio-archive .cat-header,
.portfolio-archive .project-card,
.portfolio-archive .card-body,
.portfolio-archive .projects-empty { min-width: 0; }

.portfolio-archive .hero-title,
.portfolio-archive .hero-desc,
.portfolio-archive .cat-title,
.portfolio-archive .card-type,
.portfolio-archive .card-name,
.portfolio-archive .card-desc,
.portfolio-archive .card-tag,
.portfolio-archive .card-cta,
.portfolio-archive .projects-empty :is(h2, p) {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ---------- Caso de estudio ---------- */
.project-study .cs-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 168px max(5vw, 24px) 86px;
    color: var(--paper-strong);
    background: linear-gradient(135deg, #050d14, #0b1a24 68%, #13242d);
}

.project-study .cs-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 14%, rgba(243,235,221,.055) 14% 14.08%, transparent 14.08% 86%, rgba(243,235,221,.055) 86% 86.08%, transparent 86.08%),
        linear-gradient(0deg, transparent 0 30%, rgba(243,235,221,.05) 30% 30.1%, transparent 30.1%);
}

.project-study .cs-hero-bg { z-index: -2; }

.project-study .cs-hero-bg .bg-img {
    opacity: .15;
    filter: blur(24px) saturate(.55) contrast(1.05);
    transform: scale(1.1);
}

.project-study .cs-hero-bg .veil {
    background: linear-gradient(110deg, rgba(5, 13, 20, .97), rgba(5, 13, 20, .76) 58%, rgba(5, 13, 20, .92));
}

.project-study .cs-hero-inner {
    width: min(1120px, 100%);
    max-width: none;
    margin: 0 auto;
    text-align: left;
}

.project-study .cs-hero-text { max-width: 870px; }

.project-study .cs-breadcrumb {
    justify-content: flex-start;
    margin-bottom: 32px;
    color: #788890;
    font-size: .66rem;
    letter-spacing: .12em;
}

.project-study .cs-breadcrumb a { color: #a6b2b6; }
.project-study .cs-breadcrumb a:hover { color: var(--sakura); }
.project-study .cs-breadcrumb .sep { color: var(--copper); }
.project-study .cs-breadcrumb-current { color: var(--paper-muted); }

.project-study .cs-cat-badge {
    margin-bottom: 22px;
    padding: 0;
    color: var(--copper);
    background: transparent;
    border: 0;
    border-radius: 0;
    font: 650 .68rem/1.4 var(--font-mono);
    letter-spacing: .14em;
}

.project-study .cs-title {
    max-width: 900px;
    margin: 0 0 22px;
    color: var(--paper-strong);
    font: 700 clamp(3.2rem, 7vw, 6.6rem)/.98 var(--font-display);
    letter-spacing: -.075em;
    text-wrap: balance;
}

.project-study .cs-subtitle {
    max-width: 740px;
    margin: 0;
    color: #bec8cb;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.75;
}

.project-study .cs-hero-visual {
    max-width: 1040px;
    margin: 58px 0 0;
}

.project-study .cs-img-glow {
    inset: -20px;
    background: radial-gradient(circle at 50% 30%, rgba(201, 121, 61, .16), transparent 68%);
}

.project-study .cs-img-frame {
    border: 1px solid rgba(243, 235, 221, .17);
    border-radius: 3px;
    box-shadow: 0 36px 90px rgba(0, 0, 0, .4);
}

.project-study .cs-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.project-study .cs-img-bar {
    padding: 12px 16px;
    background: linear-gradient(to bottom, rgba(4, 11, 17, .78), transparent);
}

.project-study .cs-img-dot { width: 7px; height: 7px; opacity: .7; }

.project-study .cs-layout {
    width: min(1220px, 100%);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(42px, 7vw, 90px);
    margin: 0 auto;
    padding: 96px max(5vw, 24px) 110px;
    color: var(--ink);
}

.project-study .cs-content { min-width: 0; }

.project-study .content-block {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 38px 0 42px 36px;
    color: #394950;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(7, 17, 26, .12);
    border-radius: 0;
    overflow-wrap: anywhere;
}

.project-study .content-block:first-child { padding-top: 0; }
.project-study .content-block:last-child { border-bottom: 0; }

.project-study .content-block::before {
    content: '';
    position: absolute;
    top: 43px;
    left: 0;
    width: 14px;
    height: 1px;
    background: var(--vermilion-ink);
}

.project-study .content-block:first-child::before { top: 6px; }

.project-study .content-block-title {
    display: block;
    margin: 0 0 16px;
    color: var(--ink);
    font: 700 clamp(1.35rem, 2.5vw, 1.8rem)/1.2 var(--font-display);
    letter-spacing: -.04em;
}

.project-study .content-block-title::after { display: none; }

.project-study .content-block strong { color: var(--ink); }

.project-study .content-block p,
.project-study .content-block div:not(.content-block-title),
.project-study .content-block li {
    color: #46565e;
    font-size: .98rem;
    line-height: 1.82;
}

.project-study .content-block a { color: #8f442e; text-decoration: underline; text-underline-offset: 3px; }

/* Contención para HTML enriquecido procedente del CMS. */
.project-study .content-block :is(h1, h2, h3, h4, h5, h6, p, li, a, code, blockquote) {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.project-study .content-block :is(img, picture, video, svg, canvas) {
    display: block;
    max-width: 100%;
    height: auto;
}

.project-study .content-block iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

.project-study .content-block pre,
.project-study .content-block table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.project-study .content-block code {
    white-space: break-spaces;
    word-break: break-word;
}

.project-study .content-block pre code {
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
}

.project-study .case-study-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-study .case-study-list li {
    position: relative;
    padding-left: 24px;
}

.project-study .case-study-list li::before {
    content: '◇';
    position: absolute;
    left: 0;
    color: var(--copper-ink);
}

.project-study .cs-sidebar {
    position: sticky;
    top: 112px;
    height: fit-content;
}

.project-study .sidebar-card {
    padding: 28px;
    color: var(--paper-muted);
    background:
        linear-gradient(rgba(243,235,221,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243,235,221,.035) 1px, transparent 1px),
        var(--ink);
    background-size: 30px 30px;
    border: 1px solid rgba(7, 17, 26, .18);
    border-radius: 3px;
    box-shadow: 0 24px 65px rgba(7, 17, 26, .17);
}

.project-study .sidebar-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(243, 235, 221, .1);
}

.project-study .sidebar-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.project-study .sidebar-label {
    display: block;
    margin-bottom: 8px;
    color: #72838b;
    font: .62rem/1.4 var(--font-mono);
    letter-spacing: .13em;
}

.project-study .sidebar-value { color: var(--paper-strong); }

.project-study .sidebar-tags { gap: 7px; }

.project-study .sidebar-tag {
    min-width: 0;
    padding: 5px 9px;
    color: var(--paper-muted);
    background: rgba(243, 235, 221, .045);
    border: 1px solid rgba(243, 235, 221, .1);
    border-radius: 2px;
    font: .66rem/1.4 var(--font-mono);
    overflow-wrap: anywhere;
}

.project-study .cs-hero-text,
.project-study .cs-breadcrumb,
.project-study .cs-breadcrumb-current,
.project-study .cs-title,
.project-study .cs-subtitle,
.project-study .sidebar-card,
.project-study .sidebar-section,
.project-study .sidebar-value,
.project-study .visit-btn {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.project-study .visit-btn {
    min-height: 52px;
    margin-top: 12px;
    color: var(--paper-strong);
    background: linear-gradient(135deg, var(--vermilion-ink), var(--copper-ink));
    border: 0;
    border-radius: 999px;
    box-shadow: 0 14px 35px rgba(201, 75, 58, .2);
    font-weight: 700;
}

.project-study .visit-btn:hover { color: var(--ink); background: var(--paper-strong); }

.project-study .visit-btn.disabled {
    color: #67777f;
    background: #d9cfc0;
    box-shadow: none;
}

.project-study .gallery-section {
    width: min(1220px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 0 max(5vw, 24px) 120px;
    color: var(--ink);
}

.project-study .gallery-header {
    justify-content: flex-start;
    gap: 18px;
    margin-bottom: 26px;
    color: var(--ink);
    font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--font-display);
    letter-spacing: -.045em;
}

.project-study .gallery-header::before {
    width: 22px;
    background: var(--vermilion-ink);
}

.project-study .gallery-header::after { display: none; }

.project-study .gallery-grid { gap: 18px; }

.project-study .gallery-item {
    overflow: hidden;
    background: var(--paper-strong);
    border: 1px solid rgba(7, 17, 26, .12);
    border-radius: 3px;
    box-shadow: 0 18px 50px rgba(7, 17, 26, .09);
}

.project-study .gallery-item:hover {
    border-color: rgba(201, 121, 61, .42);
    box-shadow: 0 26px 60px rgba(7, 17, 26, .14);
}

.project-study .floating-back-btn {
    color: var(--paper-strong);
    background: rgba(7, 17, 26, .9);
    border: 1px solid rgba(201, 121, 61, .4);
    box-shadow: 0 16px 45px rgba(7, 17, 26, .22);
    backdrop-filter: blur(16px);
}

.project-study .floating-back-btn:hover {
    color: var(--paper-strong);
    background: var(--vermilion-ink);
    border-color: var(--vermilion-ink);
    box-shadow: 0 18px 42px rgba(168, 59, 47, .24);
}

/* Los cursores artificiales antiguos no forman parte del sistema. */
.portfolio-archive .cursor-dot,
.portfolio-archive .cursor-outline,
.project-study .cursor-dot,
.project-study .cursor-outline { display: none !important; }

@media (max-width: 1050px) {
    .portfolio-archive .hero-inner { grid-template-columns: 1fr; }
    .portfolio-archive .stats-bar { max-width: 680px; }
    .portfolio-archive .hero-japanese-mark { display: none; }
    .portfolio-archive .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-study .cs-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 44px; }
}

@media (max-width: 820px) {
    .portfolio-archive .hero-archive {
        min-height: auto;
        padding-top: 150px;
        padding-bottom: 72px;
        background:
            radial-gradient(circle at 84% 18%, rgba(201, 75, 58, .22) 0 9%, transparent 9.3%),
            linear-gradient(135deg, #061019, #10212b);
    }

    .portfolio-archive .hero-title { font-size: clamp(3rem, 12vw, 5rem); }
    .portfolio-archive .projects-grid { grid-template-columns: 1fr; }
    .portfolio-archive .card-img-wrap { height: clamp(220px, 52vw, 330px); }

    .project-study .cs-layout { grid-template-columns: 1fr; }
    .project-study .cs-sidebar { position: static; }
}

@media (max-width: 580px) {
    .portfolio-archive .hero-archive { padding-inline: 20px; }
    .portfolio-archive .hero-inner { gap: 44px; }
    .portfolio-archive .hero-title { font-size: clamp(2.85rem, 14vw, 4.4rem); }
    .portfolio-archive .stats-bar { grid-template-columns: 1fr 1fr; }
    .portfolio-archive .stat-item { min-height: 112px; padding: 18px; }
    .portfolio-archive .filter-section { padding: 26px 16px 12px; }
    .portfolio-archive .filter-tabs { border-radius: 18px; }
    .portfolio-archive .filter-tab { flex: 1 1 calc(50% - 8px); min-width: 0; padding-inline: 12px; }
    .portfolio-archive .projects-section { padding: 42px 20px 88px; }
    .portfolio-archive .cat-header { grid-template-columns: auto minmax(0, 1fr); }
    .portfolio-archive .cat-count { grid-column: 2; }
    .portfolio-archive .cat-group { margin-bottom: 72px; }
    .portfolio-archive .card-body { padding: 24px 22px 26px; }

    .project-study .cs-hero { padding: 142px 20px 62px; }
    .project-study .cs-title { font-size: clamp(2.8rem, 14vw, 4.5rem); }
    .project-study .cs-hero-visual { margin-top: 38px; }
    .project-study .cs-layout { padding: 70px 20px 86px; }
    .project-study .content-block { padding-left: 25px; }
    .project-study .gallery-section { padding: 0 20px 90px; }
    .project-study .floating-back-btn { bottom: 18px; }
}

@media (max-width: 380px) {
    .portfolio-archive .hero-title { font-size: clamp(2.45rem, 13.5vw, 3.4rem); }
    .project-study .cs-title { font-size: clamp(2.35rem, 13vw, 3.3rem); }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-archive .project-card,
    .portfolio-archive .card-img-wrap img,
    .project-study .gallery-item { transition: none !important; }
}

/* ========================================================================
   PORTFOLIO V8 · métricas compactas, filtros sin costura y caso accionable
   ======================================================================== */
.portfolio-archive .hero-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
    align-items: end;
}
.portfolio-archive .stats-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0;
    width: min(100%, 500px);
    margin: 0 0 6px auto;
    overflow: hidden;
    border: 1px solid rgba(255,245,227,.18);
    border-radius: 4px 24px 4px 24px;
    background: rgba(5,15,20,.62);
    box-shadow: 0 22px 60px rgba(0,0,0,.24);
    backdrop-filter: blur(15px);
}
.portfolio-archive .stat-item,
.portfolio-archive .stat-item:first-child {
    grid-row: auto;
    min-height: 94px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 13px;
    align-content: center;
    align-items: center;
    padding: 17px 19px;
    border-right: 1px solid rgba(255,245,227,.11);
    border-bottom: 1px solid rgba(255,245,227,.11);
    background: transparent;
}
.portfolio-archive .stat-item:nth-child(2n) { border-right: 0; }
.portfolio-archive .stat-item:nth-last-child(-n+2) { border-bottom: 0; }
.portfolio-archive .stat-item:first-child { background: rgba(185,69,44,.22); }
.portfolio-archive .stat-item:first-child::after { content: none; }
.portfolio-archive .stat-number,
.portfolio-archive .stat-item:first-child .stat-number {
    font-size: clamp(2rem,3vw,3.1rem);
    line-height: 1;
}
.portfolio-archive .stat-label,
.portfolio-archive .stat-item:first-child .stat-label {
    max-width: 16ch;
    color: #dce4e2;
    font-size: .62rem;
}
.portfolio-archive .filter-section {
    margin-bottom: 0;
    transform: translateY(50%);
}
.portfolio-archive .filter-status { top: calc(100% + 7px); }
.portfolio-archive .projects-section {
    margin-top: 0;
    padding-top: 112px;
}
.portfolio-archive .projects-section::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(187,77,47,.18), transparent);
}
.portfolio-archive .card-body::after {
    content: 'A.N';
    color: rgba(177,70,43,.13);
    font-size: 2rem;
    letter-spacing: -.07em;
}
.portfolio-archive .card-img-wrap::before { content: none; display: none; }
.portfolio-archive .project-card:hover .card-img-wrap img,
.portfolio-archive .project-card:focus-visible .card-img-wrap img { transform: scale(1.045); }

.project-study .cs-hero-inner,
.project-study .cs-hero-text { text-align: left; }
.project-study .cs-breadcrumb { justify-content: flex-start; }
.project-study .cs-subtitle { margin-inline: 0; }
.project-study .cs-hero-actions { justify-content: flex-start; }

.case-quick-contact {
    display: grid;
    gap: 11px;
    margin-top: 14px;
    padding: 17px;
    color: #f7eee0;
    border: 1px solid rgba(239,132,82,.23);
    border-radius: 4px 22px 4px 22px;
    background: linear-gradient(145deg, rgba(7,19,24,.97), rgba(14,35,40,.95));
    box-shadow: 0 22px 55px rgba(0,0,0,.22);
}
.case-quick-contact > .contact-v2__honeypot { display: none !important; }
.case-quick-contact__eyebrow { color: #ef8756; font: 760 .65rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.case-quick-contact label { display: grid; gap: 5px; min-width: 0; }
.case-quick-contact label > span { color: #aebbbc; font-size: .65rem; }
.case-quick-contact :is(input,textarea) {
    width: 100%; min-width: 0; padding: 10px 11px; color: #f8f2e7;
    border: 1px solid rgba(255,255,255,.12); border-radius: 3px 11px;
    background: rgba(255,255,255,.045); outline: 0;
}
.case-quick-contact textarea { resize: vertical; }
.case-quick-contact :is(input,textarea):focus { border-color: #e67b4d; box-shadow: 0 0 0 3px rgba(230,123,77,.1); }
.case-quick-contact__privacy { grid-template-columns: auto 1fr; align-items: start; }
.case-quick-contact__privacy input { width: 16px; margin-top: 2px; accent-color: #df7047; }
.case-quick-contact__privacy a { color: #ef8a5d; text-decoration: underline; }
.case-quick-contact .sidebar-contact-btn { width: 100%; margin: 2px 0 0; border: 0; }
.case-quick-contact__message { padding: 9px; color: #dfe9e6; font-size: .72rem; border: 1px solid rgba(255,255,255,.1); border-radius: 3px 10px; }

@media (max-width: 1020px) {
    .portfolio-archive .hero-inner { grid-template-columns: 1fr; }
    .portfolio-archive .stats-bar { margin-left: 0; }
}
@media (max-width: 620px) {
    .portfolio-archive .stats-bar { width: 100%; }
    .portfolio-archive .stat-item,
    .portfolio-archive .stat-item:first-child { min-height: 82px; padding: 14px; }
    .portfolio-archive .filter-section { transform: translateY(42%); }
    .portfolio-archive .projects-section { padding-top: 126px; }
}

html[data-motion='reduced'] .portfolio-archive .project-card,
html[data-motion='reduced'] .project-study .gallery-item { transition: none !important; }

/* ==========================================================
   REFINAMIENTO EDITORIAL 2026-07
   Portada cinematográfica, archivo compacto y casos conectados.
========================================================== */

.portfolio-archive .hero-archive {
    min-height: min(860px, 92svh);
    align-items: center;
    padding-block: 170px 86px;
    background: #061019;
}

.portfolio-archive .archive-hero-art {
    position: absolute;
    inset: 0;
    z-index: -3;
    display: block;
    pointer-events: none;
}

.portfolio-archive .archive-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
    opacity: .64;
    filter: saturate(.72) contrast(1.08);
    transform: scale(1.015);
}

.portfolio-archive .hero-archive::before {
    z-index: -2;
    opacity: 1;
    background:
        linear-gradient(90deg, rgba(4, 11, 17, .98) 0%, rgba(4, 11, 17, .9) 38%, rgba(4, 11, 17, .3) 70%, rgba(4, 11, 17, .72) 100%),
        linear-gradient(0deg, rgba(4, 11, 17, .92), transparent 55%);
}

.portfolio-archive .hero-archive::after {
    z-index: -1;
    background:
        radial-gradient(circle at 78% 43%, transparent 0 16%, rgba(201, 75, 58, .16) 16.2% 16.5%, transparent 16.8%),
        linear-gradient(90deg, transparent 0 74%, rgba(243, 235, 221, .11) 74% 74.07%, transparent 74.07%);
}

.portfolio-archive .archive-hero-sun {
    position: absolute;
    top: 18%;
    right: 9%;
    z-index: -1;
    width: clamp(130px, 16vw, 240px);
    aspect-ratio: 1;
    border: 1px solid rgba(201, 75, 58, .3);
    border-radius: 50%;
    box-shadow: 0 0 90px rgba(201, 75, 58, .09);
}

.portfolio-archive .hero-title .grad { color: #f08a55; }

.portfolio-archive .stats-bar {
    border-color: rgba(240, 138, 85, .25);
    background: rgba(240, 138, 85, .15);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

.portfolio-archive .stat-item { background: rgba(4, 13, 20, .74); }

.portfolio-archive .filter-section {
    padding-block: 38px 14px;
    background: #f5eee3;
}

.portfolio-archive .filter-tabs {
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    padding: 6px;
    border-color: rgba(7, 17, 26, .13);
    background: rgba(255, 253, 248, .84);
}

.portfolio-archive .filter-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.portfolio-archive .filter-tab.active,
.portfolio-archive .filter-tab[aria-pressed='true'] {
    background: linear-gradient(135deg, #0a1821, #152a33);
    border-color: rgba(240, 138, 85, .54);
    box-shadow: inset 0 0 0 1px rgba(255, 249, 237, .03), 0 8px 20px rgba(7, 17, 26, .13);
}

.portfolio-archive .projects-section {
    isolation: isolate;
    width: 100%;
    padding-inline: max(5vw, calc((100vw - 1240px) / 2));
    background: #f5eee3;
}

.portfolio-archive .projects-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(245, 238, 227, .92), rgba(245, 238, 227, .985) 36%, #f5eee3 72%),
        url('/assets/footer-neo-tattoo-full-v9.webp') top center / min(1680px, 100vw) auto no-repeat;
    opacity: .9;
}

.portfolio-archive .cat-group { position: relative; width: min(1240px, 100%); margin-inline: auto; }

.portfolio-archive .cat-header {
    align-items: center;
    padding-bottom: 16px;
}

.portfolio-archive .cat-icon {
    display: grid;
    width: 34px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--paper-strong);
    background: var(--vermilion-ink);
    border-radius: 50%;
}

.portfolio-archive .project-card {
    background: rgba(255, 252, 246, .9);
    border-color: rgba(7, 17, 26, .13);
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 18px 54px rgba(50, 42, 32, .09);
}

.portfolio-archive .project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    pointer-events: none;
}

.portfolio-archive .card-img-wrap { height: clamp(225px, 19vw, 270px); background: #0a151d; }

.portfolio-archive .card-index {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;
    color: rgba(255, 249, 237, .82);
    font: 650 .67rem/1 var(--font-mono);
    letter-spacing: .12em;
}

.portfolio-archive .card-featured {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 10px;
    color: #07111a;
    background: #f08a55;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(7, 17, 26, .22);
    font: 750 .59rem/1.2 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portfolio-archive .card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.portfolio-archive .card-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.portfolio-archive .card-body { padding: 27px 26px 28px; }
.portfolio-archive .card-name { font-size: clamp(1.3rem, 2vw, 1.62rem); }
.portfolio-archive .card-footer { margin-top: 4px; }

/* ---------- Caso individual: cabecera y dossier ---------- */
.project-study .cs-hero {
    min-height: min(880px, 96svh);
    display: grid;
    align-items: center;
    padding: 150px max(5vw, 24px) 82px;
    background: #051019;
}

.project-study .cs-hero::after {
    background:
        radial-gradient(circle at 88% 18%, rgba(201, 75, 58, .16), transparent 28%),
        linear-gradient(90deg, transparent 0 8%, rgba(243, 235, 221, .06) 8% 8.06%, transparent 8.06% 92%, rgba(243, 235, 221, .06) 92% 92.06%, transparent 92.06%);
}

.project-study .cs-hero-bg .bg-img {
    opacity: .24;
    filter: saturate(.55) contrast(1.12);
    transform: scale(1.04);
}

.project-study .cs-hero-bg .veil {
    background: linear-gradient(100deg, rgba(3, 10, 16, .98) 0%, rgba(3, 10, 16, .88) 45%, rgba(3, 10, 16, .52) 72%, rgba(3, 10, 16, .88));
}

.project-study .cs-hero-inner {
    width: min(1240px, 100%);
    display: grid;
    grid-template-columns: minmax(0, .83fr) minmax(420px, 1.17fr);
    align-items: center;
    gap: clamp(50px, 8vw, 110px);
}

.project-study .cs-hero-visual {
    width: 100%;
    max-width: none;
    margin: 0;
}

.project-study .cs-img-frame {
    overflow: hidden;
    border-radius: 18px 18px 3px 18px;
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
    transform-origin: center right;
}

.project-study .cs-img-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.project-study .cs-title {
    font-size: clamp(3.2rem, 6.3vw, 6.2rem);
    line-height: .94;
}

.project-study .cs-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.project-study .cs-hero-facts span {
    padding: 7px 10px;
    color: #aab7bb;
    border: 1px solid rgba(243, 235, 221, .13);
    border-radius: 999px;
    background: rgba(243, 235, 221, .035);
    font: .62rem/1.2 var(--font-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.project-study .cs-layout { align-items: start; }

.project-study .case-media {
    position: relative;
    margin: 32px 0 0;
    overflow: hidden;
    background: var(--ink);
    border-radius: 3px 20px 3px 3px;
    box-shadow: 0 18px 48px rgba(43, 35, 28, .12);
}

.project-study .case-media img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

.project-study .case-media figcaption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 7px 10px;
    color: rgba(255, 249, 237, .82);
    background: rgba(5, 13, 20, .78);
    border: 1px solid rgba(255, 249, 237, .14);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    font: .6rem/1.2 var(--font-mono);
    letter-spacing: .06em;
}

.project-study .sidebar-card {
    overflow: hidden;
    padding: 0;
    background:
        radial-gradient(circle at 100% 0, rgba(201, 75, 58, .18), transparent 34%),
        linear-gradient(145deg, #07141d, #0c2029);
    background-size: auto;
    border-color: rgba(201, 121, 61, .28);
    border-radius: 3px 22px 3px 3px;
}

.project-study .sidebar-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    color: #9aa8ad;
    border-bottom: 1px solid rgba(243, 235, 221, .1);
    font: .6rem/1.3 var(--font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}

.project-study .sidebar-section {
    margin: 0 22px;
    padding: 21px 0;
}

.project-study .sidebar-value { font-size: .92rem; line-height: 1.55; }

.project-study .sidebar-status { display: inline-flex; align-items: center; gap: 9px; }
.project-study .sidebar-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #79d7a2;
    box-shadow: 0 0 13px rgba(121, 215, 162, .7);
}

.project-study .sidebar-tag {
    border-radius: 999px;
    background: rgba(243, 235, 221, .055);
}

/* ---------- Relaciones entre casos y contenido editorial ---------- */
.project-study .project-connections {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(84px, 10vw, 132px) max(5vw, 24px);
    color: var(--paper-strong);
    background: #06131c;
}

.project-study .project-connections::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .16;
    background: url('/assets/footer-neo-tattoo-full-v9.webp') center / cover no-repeat;
}

.project-study .project-connections::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(6, 19, 28, .98), rgba(6, 19, 28, .74), rgba(6, 19, 28, .96));
}

.project-study .project-connections-head,
.project-study .connections-grid,
.project-study .connections-actions {
    width: min(1180px, 100%);
    margin-inline: auto;
}

.project-study .project-connections-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
    gap: clamp(30px, 6vw, 80px);
    align-items: end;
    margin-bottom: 46px;
}

.project-study .connections-kicker,
.project-study .connection-kind {
    color: #f08a55;
    font: 650 .65rem/1.4 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.project-study .project-connections h2 {
    max-width: 760px;
    margin: 12px 0 0;
    font: 700 clamp(2.4rem, 5vw, 5.1rem)/.98 var(--font-display);
    letter-spacing: -.065em;
}

.project-study .project-connections-head p { color: #9eabb0; line-height: 1.75; }

.project-study .connections-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.project-study .connection-card {
    min-width: 0;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    color: var(--paper-strong);
    background: rgba(255, 249, 237, .045);
    border: 1px solid rgba(255, 249, 237, .11);
    border-radius: 3px 18px 3px 3px;
    transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}

.project-study .connection-card:hover,
.project-study .connection-card:focus-visible {
    color: var(--paper-strong);
    transform: translateY(-6px);
    border-color: rgba(240, 138, 85, .48);
    background: rgba(255, 249, 237, .075);
}

.project-study .connection-card h3 {
    margin: 22px 0 12px;
    font: 700 clamp(1.25rem, 2vw, 1.65rem)/1.15 var(--font-display);
    letter-spacing: -.035em;
}

.project-study .connection-card p {
    display: -webkit-box;
    overflow: hidden;
    color: #99a7ad;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.project-study .connection-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: auto;
    padding-top: 22px;
    color: #e8d9c9;
    font-size: .84rem;
    font-weight: 700;
}

.project-study .connection-link b { color: #f08a55; transition: transform .25s ease; }
.project-study .connection-card:hover .connection-link b { transform: translateX(4px); }

.project-study .connections-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.project-study .connections-primary,
.project-study .connections-secondary {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 750;
}

.project-study .connections-primary { color: #07111a; background: #f08a55; }
.project-study .connections-secondary { color: var(--paper-strong); border: 1px solid rgba(255, 249, 237, .19); }

@media (max-width: 1050px) {
    .project-study .cs-hero-inner { grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); gap: 48px; }
    .project-study .connections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .portfolio-archive .hero-archive { min-height: 760px; }
    .portfolio-archive .archive-hero-art img { object-position: 66% center; opacity: .42; }
    .portfolio-archive .hero-archive::before { background: linear-gradient(180deg, rgba(4, 11, 17, .5), rgba(4, 11, 17, .97) 64%); }
    .portfolio-archive .filter-tabs { width: 100%; }

    .project-study .cs-hero { min-height: auto; }
    .project-study .cs-hero-inner { grid-template-columns: 1fr; }
    .project-study .cs-hero-visual { margin-top: 4px; }
    .project-study .cs-img-frame { transform: none; }
    .project-study .project-connections-head { grid-template-columns: 1fr; }
    .project-study .floating-back-btn { display: none; }
}

@media (max-width: 580px) {
    .portfolio-archive .hero-archive { min-height: 720px; padding-block: 138px 58px; }
    .portfolio-archive .filter-tab { flex: 1 1 calc(50% - 8px); white-space: normal; }
    .portfolio-archive .projects-section::before { background-size: auto, auto 390px; background-position: center, center top; }

    .project-study .cs-title { font-size: clamp(2.65rem, 13vw, 4.25rem); }
    .project-study .cs-hero-facts span { flex: 1 1 auto; text-align: center; }
    .project-study .connections-grid { grid-template-columns: 1fr; }
    .project-study .connection-card { min-height: 230px; }
    .project-study .connections-actions > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-archive .archive-hero-art img,
    .project-study .cs-img-frame,
    .project-study .connection-card,
    .project-study .connection-link b { transform: none !important; transition: none !important; }
}

/* ==========================================================
   AJUSTE DE ARCHIVO 2026-07-20
   Filtros a caballo entre portada y casos, fondos continuos
   por especialidad y tarjetas con mayor profundidad cromática.
========================================================== */

.portfolio-archive .hero-archive { overflow: visible; }
.portfolio-archive .archive-hero-art { overflow: hidden; }

.portfolio-archive .filter-section {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    margin: 0;
    padding: 0 max(5vw, 24px);
    color: var(--ink);
    background: transparent;
    transform: translateY(50%);
}

.portfolio-archive .filter-tabs {
    width: fit-content;
    max-width: min(1240px, 100%);
    min-height: 58px;
    margin-inline: auto;
    padding: 7px;
    border-color: rgba(240, 138, 85, .38);
    background: rgba(255, 252, 246, .94);
    box-shadow: 0 20px 56px rgba(2, 10, 16, .22);
}

.portfolio-archive .filter-tab {
    min-height: 44px;
    color: #4d5c64;
}

.portfolio-archive .filter-tab:hover {
    color: #07111a;
    background: rgba(240, 138, 85, .12);
}

.portfolio-archive .filter-tab.active,
.portfolio-archive .filter-tab[aria-pressed='true'] {
    color: #fff9ed;
    background: linear-gradient(135deg, #0a1821, #18303a);
    border-color: rgba(240, 138, 85, .62);
    box-shadow: inset 0 -2px 0 #f08a55, 0 9px 24px rgba(7, 17, 26, .18);
}

.portfolio-archive .projects-section {
    padding-top: 104px;
    background: #f5eee3;
}

.portfolio-archive .projects-section::before {
    opacity: 1;
    background:
        radial-gradient(circle at 50% 0, rgba(240, 138, 85, .07), transparent 34%),
        linear-gradient(180deg, #f5eee3, #f5eee3);
}

.portfolio-archive .cat-group {
    --category-accent: #c94b3a;
    position: relative;
    isolation: isolate;
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: 48px 0 78px;
}

.portfolio-archive .cat-group::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    pointer-events: none;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}

.portfolio-archive .cat-group[data-category='webs']::before {
    background:
        linear-gradient(90deg, rgba(245, 238, 227, .7), rgba(245, 238, 227, .42) 46%, rgba(245, 238, 227, .13)),
        url('/assets/portfolio-corner-v4.webp') center / cover no-repeat;
}

.portfolio-archive .cat-group[data-category='tiendas'] {
    --category-accent: #d47a38;
}

.portfolio-archive .cat-group[data-category='tiendas']::before {
    background:
        linear-gradient(90deg, rgba(245, 238, 227, .32), rgba(245, 238, 227, .82) 45%, #f5eee3 84%),
        url('/assets/services-crescent-v7.webp') left center / min(560px, 46vw) 100% no-repeat,
        #f5eee3;
}

.portfolio-archive .cat-group[data-category='apps'] {
    --category-accent: #b9505e;
}

.portfolio-archive .cat-group[data-category='apps']::before {
    background:
        linear-gradient(90deg, #f5eee3 0 42%, rgba(245, 238, 227, .88) 64%, rgba(245, 238, 227, .77)),
        url('/assets/technical-dragon-v7.webp') right center / cover no-repeat,
        #f5eee3;
}

.portfolio-archive .cat-group:not([data-category='webs']):not([data-category='tiendas']):not([data-category='apps'])::before {
    background:
        linear-gradient(90deg, rgba(245, 238, 227, .88), rgba(245, 238, 227, .7)),
        url('/assets/footer-neo-tattoo-full-v9.webp') center / cover no-repeat;
}

.portfolio-archive .cat-icon { background: var(--category-accent); }

.portfolio-archive .cat-line {
    background: linear-gradient(90deg, color-mix(in srgb, var(--category-accent) 68%, transparent), rgba(7, 17, 26, .16), transparent 84%);
}

.portfolio-archive .project-card {
    background: linear-gradient(145deg, rgba(255, 253, 248, .98), rgba(255, 248, 239, .91));
    border-color: color-mix(in srgb, var(--category-accent) 24%, rgba(7, 17, 26, .13));
    box-shadow: 0 20px 60px rgba(50, 42, 32, .11), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.portfolio-archive .project-card::before {
    background: linear-gradient(90deg, var(--category-accent), #d48a43, #e5a6b5);
}

.portfolio-archive .project-card:hover,
.portfolio-archive .project-card:focus-visible {
    border-color: color-mix(in srgb, var(--category-accent) 58%, transparent);
    box-shadow: 0 32px 76px rgba(43, 34, 26, .18), 0 0 0 1px color-mix(in srgb, var(--category-accent) 12%, transparent);
}

.portfolio-archive .card-img-wrap img { filter: saturate(.96) contrast(1.035) brightness(.96); }
.portfolio-archive .project-card:hover .card-img-wrap img,
.portfolio-archive .project-card:focus-visible .card-img-wrap img { filter: saturate(1.12) contrast(1.04) brightness(1.02); }

.portfolio-archive .card-img-overlay {
    background:
        linear-gradient(to top, rgba(7, 17, 26, .62), transparent 58%),
        linear-gradient(115deg, color-mix(in srgb, var(--category-accent) 16%, transparent), transparent 42%);
}

.portfolio-archive .card-featured { background: color-mix(in srgb, var(--category-accent) 72%, #f6ab62); }
.portfolio-archive .card-type,
.portfolio-archive .card-cta .arrow { color: var(--category-accent); }

.portfolio-archive .card-tag {
    color: color-mix(in srgb, var(--category-accent) 65%, #25343b);
    background: color-mix(in srgb, var(--category-accent) 7%, rgba(255, 255, 255, .66));
    border-color: color-mix(in srgb, var(--category-accent) 18%, transparent);
}

@media (max-width: 820px) {
    .portfolio-archive .projects-section { padding-top: 112px; }
    .portfolio-archive .cat-group { padding-block: 38px 66px; }
    .portfolio-archive .cat-group[data-category='tiendas']::before { background-size: auto, min(470px, 84vw) 100%, auto; }
}

@media (max-width: 580px) {
    .portfolio-archive .filter-section { padding-inline: 16px; }
    .portfolio-archive .filter-tabs { width: 100%; min-height: 104px; border-radius: 20px; }
    .portfolio-archive .projects-section { padding-top: 126px; }
    .portfolio-archive .cat-group { padding-block: 30px 58px; }
    .portfolio-archive .cat-group::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); }
    .portfolio-archive .cat-group[data-category='apps']::before { background-position: center, 68% center, center; }
}

/* Las conexiones son visibles desde el primer caso y ganan contenido desde el CMS. */
.project-study .connection-card {
    overflow: hidden;
    padding: 0;
}

.project-study .connection-media {
    position: relative;
    min-height: 138px;
    display: block;
    overflow: hidden;
    background: #0a1821;
}

.project-study .connection-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 19, 28, .68), transparent 70%);
}

.project-study .connection-media img {
    width: 100%;
    height: 100%;
    min-height: 138px;
    object-fit: cover;
    filter: saturate(.92) contrast(1.04);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

.project-study .connection-card:hover .connection-media img,
.project-study .connection-card:focus-visible .connection-media img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.04);
}

.project-study .connection-card-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 27px;
}

.project-study .connection-placeholder {
    background:
        radial-gradient(circle at 88% 15%, rgba(240, 138, 85, .2), transparent 33%),
        linear-gradient(145deg, rgba(255, 249, 237, .055), rgba(255, 249, 237, .025));
}

.project-study .connection-placeholder .connection-kind::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    background: #f08a55;
    box-shadow: 0 0 16px rgba(240, 138, 85, .7);
}

@media (max-width: 580px) {
    .project-study .connection-media,
    .project-study .connection-media img { min-height: 126px; }
}

/* ==========================================================
   PORTFOLIO / CASO — REFINAMIENTO DE INTERACCIÓN 2026-08
   Los filtros quedan por encima de ambas superficies; el
   dossier gana navegación y las relaciones reducen su altura.
========================================================== */

/* Archivo: filtros siempre visibles y estadísticas con profundidad. */
.portfolio-archive .hero-archive {
    z-index: 2;
    overflow: visible;
}

.portfolio-archive .archive-hero-art { overflow: hidden; }

.portfolio-archive .filter-section {
    z-index: 20;
    transform: translateY(46%);
}

.portfolio-archive .filter-tabs {
    justify-content: center;
    border: 1px solid rgba(240, 138, 85, .48);
    background: rgba(255, 252, 246, .97);
    box-shadow:
        0 22px 62px rgba(2, 10, 16, .24),
        0 0 0 5px rgba(255, 252, 246, .2);
}

.portfolio-archive .filter-tab {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    white-space: nowrap;
    transition:
        color .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.portfolio-archive .filter-tab::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 7px;
    left: 18px;
    z-index: -1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f08a55, transparent);
    opacity: 0;
    transform: scaleX(.25);
    transition: opacity .28s ease, transform .28s ease;
}

.portfolio-archive .filter-tab:hover::after,
.portfolio-archive .filter-tab:focus-visible::after {
    opacity: .8;
    transform: scaleX(1);
}

.portfolio-archive .filter-tab:focus-visible {
    outline: 3px solid rgba(240, 138, 85, .34);
    outline-offset: 3px;
}

.portfolio-archive .filter-tab.active::after,
.portfolio-archive .filter-tab[aria-pressed='true']::after { opacity: 0; }

.portfolio-archive .projects-section {
    z-index: 1;
    isolation: isolate;
}

.portfolio-archive .stat-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: background-color .3s ease, border-color .3s ease;
}

.portfolio-archive .stat-item::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 54%;
    background: linear-gradient(0deg, rgba(240, 138, 85, .13), transparent);
    opacity: 0;
    transition: opacity .35s ease;
}

.portfolio-archive .stat-item:hover::before { opacity: 1; }

.portfolio-archive .stat-number {
    min-width: 1.2ch;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 9px 30px rgba(0, 0, 0, .28);
}

/* Las ramas del primer capítulo nacen fuera del lienzo y alcanzan ambos lados. */
.portfolio-archive .cat-group[data-category='webs']::before {
    top: -124px;
    bottom: -42px;
    background:
        linear-gradient(90deg, rgba(245, 238, 227, .6), rgba(245, 238, 227, .32) 48%, rgba(245, 238, 227, .12)),
        url('/assets/portfolio-corner-v4.webp') center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 86%, transparent 100%);
}

.portfolio-archive .project-card {
    transform-origin: center bottom;
    will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-archive .project-card:hover { will-change: transform; }
}

.portfolio-archive .card-img-wrap::before {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -75%;
    z-index: 2;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 249, 237, .3), transparent);
    transform: skewX(-18deg);
    transition: left .72s cubic-bezier(.22, 1, .36, 1);
}

.portfolio-archive .project-card:hover,
.portfolio-archive .project-card:focus-visible {
    transform: translateY(-7px) scale(1.008);
}

.portfolio-archive .project-card:hover .card-img-wrap::before,
.portfolio-archive .project-card:focus-visible .card-img-wrap::before { left: 135%; }

.portfolio-archive .project-card:hover .card-img-wrap img,
.portfolio-archive .project-card:focus-visible .card-img-wrap img { transform: scale(1.065); }

.portfolio-archive .project-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--category-accent) 42%, transparent);
    outline-offset: 4px;
}

.portfolio-archive .card-cta,
.portfolio-archive .card-cta .arrow { transition: color .25s ease, transform .25s ease; }

.portfolio-archive .project-card:hover .card-cta,
.portfolio-archive .project-card:focus-visible .card-cta { color: #17252c; }

/* Caso individual: acciones inmediatas en portada. */
.project-study .cs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
}

.project-study .cs-hero-action {
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.2;
    transition:
        color .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease;
}

.project-study .cs-hero-action span,
.project-study .visit-btn span,
.project-study .sidebar-contact-btn span,
.project-study .connections-actions a span { transition: transform .25s ease; }

.project-study .cs-hero-action-primary {
    color: #08141b;
    background: linear-gradient(135deg, #f5a366, #e6764d);
    box-shadow: 0 14px 34px rgba(226, 112, 67, .2);
}

.project-study .cs-hero-action-secondary {
    color: #fff9ed;
    border-color: rgba(255, 249, 237, .24);
    background: rgba(255, 249, 237, .07);
}

.project-study .cs-hero-action-text {
    min-height: 40px;
    padding-inline: 8px;
    color: #aab8bc;
}

.project-study .cs-hero-action:hover,
.project-study .cs-hero-action:focus-visible {
    color: #07111a;
    border-color: #fff9ed;
    background: #fff9ed;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
    transform: translateY(-3px);
}

.project-study .cs-hero-action:hover span,
.project-study .cs-hero-action:focus-visible span { transform: translateX(3px); }

.project-study .cs-hero-action-text:hover span,
.project-study .cs-hero-action-text:focus-visible span { transform: translateY(3px); }

.project-study .cs-hero-action:focus-visible {
    outline: 3px solid rgba(240, 138, 85, .4);
    outline-offset: 3px;
}

.project-study .cs-img-frame {
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease, border-color .35s ease;
}

.project-study .cs-hero-visual:hover .cs-img-frame {
    transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-5px);
    border-color: rgba(240, 138, 85, .42);
    box-shadow: 0 44px 100px rgba(0, 0, 0, .48), 0 0 0 1px rgba(240, 138, 85, .08);
}

/* Dossier modular: legible con textos cortos o extensos. */
.project-study .cs-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    align-items: stretch;
    gap: 18px;
}

.project-study .content-block,
.project-study .content-block:first-child,
.project-study .content-block:last-child {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: clamp(26px, 3.2vw, 38px);
    overflow: hidden;
    color: #394950;
    background:
        radial-gradient(circle at 100% 0, rgba(240, 138, 85, .07), transparent 30%),
        rgba(255, 252, 247, .75);
    border: 1px solid rgba(30, 48, 56, .12);
    border-radius: 4px 22px 4px 4px;
    box-shadow: 0 16px 46px rgba(50, 42, 32, .065);
    transition: border-color .32s ease, box-shadow .32s ease, transform .32s ease;
}

.project-study .content-block::before,
.project-study .content-block:first-child::before {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, #c94b3a, #f08a55 44%, transparent 90%);
    opacity: .62;
}

.project-study .content-block:hover {
    border-color: rgba(201, 75, 58, .25);
    box-shadow: 0 24px 58px rgba(50, 42, 32, .1);
    transform: translateY(-3px);
}

.project-study .content-block--wide { grid-column: 1 / -1; }

.project-study .content-block--feature {
    background:
        linear-gradient(120deg, rgba(255, 252, 247, .96), rgba(247, 233, 218, .78)),
        rgba(255, 252, 247, .86);
}

.project-study .content-block.content-block--result {
    color: #e6ddd0;
    background:
        radial-gradient(circle at 92% 20%, rgba(240, 138, 85, .18), transparent 34%),
        linear-gradient(135deg, #0b2029, #132f38);
    border-color: rgba(201, 121, 61, .3);
}

.project-study .content-block.content-block--result :is(.content-block-title, p, div, li, strong) { color: #eef0eb; }

.project-study .content-block-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.project-study .content-block--summary .content-block-title {
    font-size: clamp(1.14rem, 1.7vw, 1.48rem);
    letter-spacing: -.045em;
}

.project-study .content-block-index {
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: #fff9ed;
    background: #c94b3a;
    border-radius: 50%;
    font: 700 .62rem/1 var(--font-mono);
    letter-spacing: .05em;
    box-shadow: 0 8px 20px rgba(168, 59, 47, .18);
}

.project-study .content-block p + p,
.project-study .content-block div > p + p { margin-top: 1em; }

.project-study .content-block :is(ul, ol):not(.case-study-list) {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding-left: 1.3rem;
}

.project-study .case-study-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.project-study .case-study-list li {
    padding: 15px 16px 15px 42px;
    background: rgba(201, 75, 58, .045);
    border: 1px solid rgba(201, 75, 58, .11);
    border-radius: 3px 14px 3px 3px;
}

.project-study .case-study-list li::before {
    top: 15px;
    left: 17px;
}

/* Ficha lateral que funciona también como índice del proyecto. */
.project-study .sidebar-card {
    box-shadow: 0 28px 78px rgba(7, 17, 26, .2);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.project-study .sidebar-card:hover {
    border-color: rgba(240, 138, 85, .45);
    box-shadow: 0 34px 90px rgba(7, 17, 26, .25);
}

.project-study .sidebar-section {
    padding-block: 15px;
}

.project-study .sidebar-case-nav {
    display: grid;
    gap: 5px;
    padding: 15px 14px 14px;
    border-top: 1px solid rgba(243, 235, 221, .1);
}

.project-study .sidebar-case-nav > .sidebar-label { margin: 0 8px 7px; }

.project-study .sidebar-case-nav a {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 33px;
    padding: 5px 9px;
    color: #93a2a7;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: .78rem;
    transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

.project-study .sidebar-case-nav a span {
    color: #d68455;
    font: 650 .58rem/1 var(--font-mono);
    letter-spacing: .06em;
}

.project-study .sidebar-case-nav a:hover,
.project-study .sidebar-case-nav a:focus-visible,
.project-study .sidebar-case-nav a.is-active {
    color: #fff9ed;
    background: rgba(255, 249, 237, .07);
    border-color: rgba(240, 138, 85, .2);
}

.project-study .sidebar-case-nav a.is-active { box-shadow: inset 3px 0 0 #f08a55; }

.project-study .visit-btn,
.project-study .sidebar-contact-btn {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 750;
    transition: color .28s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.project-study .visit-btn { margin-top: 14px; }

.project-study .sidebar-contact-btn {
    margin-top: 9px;
    color: #24363d;
    background: rgba(255, 252, 247, .72);
    border: 1px solid rgba(30, 48, 56, .18);
}

.project-study .visit-btn:hover,
.project-study .visit-btn:focus-visible,
.project-study .sidebar-contact-btn:hover,
.project-study .sidebar-contact-btn:focus-visible {
    color: #07111a;
    background: #fff9ed;
    border-color: #f08a55;
    box-shadow: 0 16px 38px rgba(7, 17, 26, .16);
    transform: translateY(-3px);
}

.project-study .visit-btn:hover span,
.project-study .visit-btn:focus-visible span,
.project-study .sidebar-contact-btn:hover span,
.project-study .sidebar-contact-btn:focus-visible span { transform: translateX(4px); }

/* Recorrido conectado: más compacto, luminoso y claramente clicable. */
.project-study .project-connections {
    padding: clamp(52px, 6vw, 78px) max(5vw, 24px);
    background: #102a34;
}

.project-study .project-connections::before {
    opacity: .25;
    background-position: center 43%;
}

.project-study .project-connections::after {
    background: linear-gradient(90deg, rgba(11, 34, 43, .91), rgba(15, 44, 54, .68), rgba(11, 34, 43, .88));
}

.project-study .project-connections-head {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr);
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    margin-bottom: 22px;
}

.project-study .project-connections h2 {
    max-width: 720px;
    margin-top: 8px;
    font-size: clamp(2rem, 3.8vw, 3.7rem);
}

.project-study .project-connections-head p {
    margin: 0;
    color: #bdc8c9;
    line-height: 1.65;
}

.project-study .connections-grid { gap: 12px; }

.project-study .connection-card {
    min-height: 0;
    border-color: rgba(255, 249, 237, .16);
    background: rgba(255, 249, 237, .07);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .09);
}

.project-study .connection-card:hover,
.project-study .connection-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(240, 138, 85, .65);
    background: rgba(255, 249, 237, .11);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .2);
}

.project-study .connection-card:focus-visible,
.project-study .connections-actions a:focus-visible {
    outline: 3px solid rgba(240, 138, 85, .42);
    outline-offset: 3px;
}

.project-study .connection-media,
.project-study .connection-media img {
    height: 116px;
    min-height: 0;
}

.project-study .connection-media { flex: 0 0 116px; }

.project-study .connection-card-copy {
    min-height: 160px;
    padding: 18px;
}

.project-study .connection-card h3 {
    margin: 13px 0 8px;
    font-size: clamp(1.12rem, 1.7vw, 1.42rem);
}

.project-study .connection-card p {
    font-size: .87rem;
    line-height: 1.55;
    -webkit-line-clamp: 2;
}

.project-study .connection-link { padding-top: 14px; }

.project-study .connections-actions { margin-top: 20px; }

.project-study .floating-back-btn {
    right: 30px;
    left: auto;
    width: 52px;
    height: 52px;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    font-size: 0;
}

.project-study .floating-back-btn:hover { transform: translateY(-3px); }
.project-study .floating-back-btn:hover svg { transform: translateX(-2px); }

.project-study .connections-primary,
.project-study .connections-secondary {
    gap: 9px;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.project-study .connections-primary:hover,
.project-study .connections-primary:focus-visible,
.project-study .connections-secondary:hover,
.project-study .connections-secondary:focus-visible {
    color: #07111a;
    background: #fff9ed;
    border-color: #fff9ed;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    transform: translateY(-3px);
}

.project-study .connections-actions a:hover span,
.project-study .connections-actions a:focus-visible span { transform: translateX(4px); }

@media (max-width: 900px) {
    .project-study .cs-layout { grid-template-columns: 1fr; }
    .project-study .cs-sidebar {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(210px, .55fr);
        gap: 12px;
    }
    .project-study .sidebar-card { grid-row: span 2; }
    .project-study .visit-btn,
    .project-study .sidebar-contact-btn { margin-top: 0; }
}

@media (max-width: 720px) {
    .portfolio-archive .filter-section { transform: translateY(42%); }
    .portfolio-archive .filter-tabs { width: 100%; }
    .portfolio-archive .filter-tab { white-space: normal; }
    .portfolio-archive .cat-group[data-category='webs']::before {
        top: -88px;
        background-position: 58% top;
    }

    .project-study .cs-content { grid-template-columns: 1fr; }
    .project-study .content-block--wide { grid-column: auto; }
    .project-study .case-study-list { grid-template-columns: 1fr; }
    .project-study .cs-sidebar { grid-template-columns: 1fr; }
    .project-study .sidebar-card { grid-row: auto; }
    .project-study .project-connections-head { grid-template-columns: 1fr; }
    .project-study .project-connections { padding-block: 44px; }
    .project-study .connections-grid {
        width: calc(100% + max(5vw, 24px));
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 3px max(5vw, 24px) 12px 0;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(240, 138, 85, .75) rgba(255, 249, 237, .08);
    }
    .project-study .connection-card {
        flex: 0 0 min(82vw, 310px);
        scroll-snap-align: start;
    }
}

@media (max-width: 520px) {
    .portfolio-archive .hero-archive {
        min-height: 0;
        padding-top: 112px;
        padding-bottom: 62px;
    }
    .portfolio-archive .hero-inner { gap: 22px; }
    .portfolio-archive .hero-badge { margin-bottom: 18px; }
    .portfolio-archive .hero-title {
        margin-bottom: 16px;
        font-size: clamp(2.6rem, 12.8vw, 3.35rem);
    }
    .portfolio-archive .hero-desc {
        font-size: .95rem;
        line-height: 1.62;
    }
    .portfolio-archive .archive-principle {
        margin-top: 16px;
        font-size: .58rem;
    }
    .portfolio-archive .stat-item {
        min-height: 88px;
        padding: 14px;
    }
    .portfolio-archive .stat-number { font-size: 2rem; }
    .portfolio-archive .stat-label { font-size: .58rem; }

    .project-study .cs-hero-actions { align-items: stretch; }
    .project-study .cs-hero-action-primary,
    .project-study .cs-hero-action-secondary { flex: 1 1 100%; }
    .project-study .cs-hero-action-text { flex: 1 1 100%; }
    .project-study .content-block,
    .project-study .content-block:first-child,
    .project-study .content-block:last-child { padding: 24px 20px; }
    .project-study .connections-actions > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-archive .filter-tab,
    .portfolio-archive .filter-tab::after,
    .portfolio-archive .stat-item,
    .portfolio-archive .stat-item::before,
    .portfolio-archive .project-card,
    .portfolio-archive .card-img-wrap::before,
    .project-study .cs-hero-action,
    .project-study .cs-img-frame,
    .project-study .content-block,
    .project-study .sidebar-card,
    .project-study .sidebar-case-nav a,
    .project-study .visit-btn,
    .project-study .sidebar-contact-btn,
    .project-study .connection-card,
    .project-study .connections-actions a,
    .project-study .connections-actions a span { transition: none !important; }

    .portfolio-archive .project-card:hover,
    .portfolio-archive .project-card:focus-visible,
    .project-study .cs-hero-visual:hover .cs-img-frame,
    .project-study .content-block:hover,
    .project-study .connection-card:hover,
    .project-study .connection-card:focus-visible,
    .project-study .connections-actions a:hover,
    .project-study .connections-actions a:focus-visible { transform: none !important; }

    .portfolio-archive .card-img-wrap::before { display: none; }
}

/* ==========================================================
   CIERRE · ARCHIVO Y DOSSIER CRONOLÓGICO
   ========================================================== */

.portfolio-archive .filter-status {
    width: fit-content;
    margin: 10px auto 0;
    padding: 5px 11px;
    color: #4d5c64;
    background: rgba(255, 252, 246, .9);
    border: 1px solid rgba(7, 17, 26, .1);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(2, 10, 16, .1);
    font: 600 .62rem/1.3 var(--font-mono);
    letter-spacing: .045em;
}

.portfolio-archive .projects-section { padding-top: 128px; }
.portfolio-archive .cat-group { scroll-margin-top: 112px; }

.portfolio-archive .card-img-wrap {
    aspect-ratio: 16 / 10;
    height: auto;
}

.portfolio-archive .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-archive .project-card[hidden],
.portfolio-archive .cat-group[hidden] { display: none !important; }

.project-study .content-block {
    grid-column: auto;
    scroll-margin-top: 118px;
}

.project-study .content-block-copy {
    min-width: 0;
    max-width: 76ch;
}

.project-study .content-block--solution .content-block-copy,
.project-study .content-block--process .content-block-copy,
.project-study .content-block--result .content-block-copy { max-width: 86ch; }

.project-study .content-block:focus-within {
    border-color: rgba(201, 75, 58, .28);
    box-shadow: 0 24px 58px rgba(50, 42, 32, .1);
    transform: translateY(-3px);
}

.project-study .case-media,
.project-study .gallery-item,
.project-study .connection-media {
    aspect-ratio: 16 / 10;
}

.project-study .case-media img,
.project-study .gallery-item img,
.project-study .connection-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-study .gallery-item { flex-basis: min(72%, 780px); }

.project-study :is(.cs-hero-action, .visit-btn, .sidebar-contact-btn, .sidebar-case-nav a, .connection-card, .connections-actions a, .floating-back-btn):focus-visible {
    outline: 3px solid rgba(240, 138, 85, .42);
    outline-offset: 4px;
}

@media (max-width: 820px) {
    .portfolio-archive .projects-section { padding-top: 136px; }
    .project-study .content-block { scroll-margin-top: 96px; }
}

@media (max-width: 580px) {
    .portfolio-archive .projects-section { padding-top: 154px; }
    .portfolio-archive .filter-status { font-size: .57rem; }
    .project-study .gallery-item { flex-basis: 88%; }
}

@media (prefers-reduced-motion: reduce) {
    .project-study .content-block:focus-within { transform: none; }
}

/* ========================================================================
   PORTFOLIO V6 · ÍNDICE EDITORIAL, FILTROS 50/50 Y CASOS CON PROFUNDIDAD
   ======================================================================== */
.portfolio-archive .hero-inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    align-items: end;
}

.portfolio-archive .stats-bar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: min(100%, 560px);
    margin: 0 0 8px auto;
    overflow: hidden;
    border: 1px solid rgba(255, 245, 227, .2);
    border-radius: 5px 28px 5px 28px;
    background: rgba(255, 245, 227, .18);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.portfolio-archive .stat-item {
    position: relative;
    min-height: 132px;
    padding: 24px;
    border: 0;
    border-radius: 0;
    background: rgba(4, 13, 20, .74);
    backdrop-filter: blur(16px);
}

.portfolio-archive .stat-item:first-child {
    grid-row: span 2;
    min-height: 265px;
    align-content: end;
    background: linear-gradient(155deg, rgba(195, 73, 44, .84), rgba(113, 36, 31, .86));
}

.portfolio-archive .stat-item:first-child::after {
    content: 'ARCHIVO';
    position: absolute;
    top: 22px;
    right: 18px;
    color: rgba(255, 247, 232, .24);
    font: 700 .55rem/1 var(--font-mono);
    letter-spacing: .24em;
    writing-mode: vertical-rl;
}

.portfolio-archive .stat-number {
    font-size: clamp(2.35rem, 4vw, 4.5rem);
    line-height: .9;
}

.portfolio-archive .stat-item:first-child .stat-number { font-size: clamp(4.5rem, 8vw, 7.4rem); }
.portfolio-archive .stat-label { max-width: 15ch; color: #dce3e0; line-height: 1.4; }
.portfolio-archive .stat-item:first-child .stat-label { color: #fff2df; }

.portfolio-archive .filter-section {
    transform: translateY(50%);
}

.portfolio-archive .filter-tabs {
    border-radius: 999px;
    box-shadow: 0 22px 62px rgba(2, 10, 16, .26), inset 0 0 0 1px rgba(255,255,255,.55);
}

.portfolio-archive .filter-tab { border-radius: 999px; }

.portfolio-archive .filter-status {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.portfolio-archive .projects-section { padding-top: 142px; }

.portfolio-archive .cat-group[data-category='apps']::before {
    background:
        linear-gradient(90deg, rgba(245, 238, 227, .97) 0 18%, rgba(245, 238, 227, .78) 50%, rgba(245, 238, 227, .35)),
        url('/assets/portfolio-software-workshop-v2.webp') center / cover no-repeat,
        #f5eee3;
}

.portfolio-archive .project-card {
    border-radius: 5px 27px 5px 27px;
    transform-style: preserve-3d;
}

.portfolio-archive .project-card::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: 13px;
    left: 13px;
    width: 22px;
    height: 22px;
    pointer-events: none;
    border-top: 1px solid rgba(255, 245, 228, .72);
    border-left: 1px solid rgba(255, 245, 228, .72);
    opacity: .55;
    transition: width .4s ease, height .4s ease, opacity .4s ease;
}

.portfolio-archive .project-card:hover::after,
.portfolio-archive .project-card:focus-visible::after { width: 45px; height: 45px; opacity: 1; }
.portfolio-archive .card-body { position: relative; }
.portfolio-archive .card-body::after { content: 'CASE'; position: absolute; right: 22px; bottom: 18px; color: rgba(18, 34, 39, .11); font: 800 2.2rem/1 var(--font-display); letter-spacing: -.08em; pointer-events: none; }
.portfolio-archive .card-footer { position: relative; z-index: 1; }

@media (max-width: 1020px) {
    .portfolio-archive .hero-inner { grid-template-columns: 1fr; }
    .portfolio-archive .stats-bar { width: 100%; margin-left: 0; }
    .portfolio-archive .stat-item:first-child { min-height: 220px; }
}

@media (max-width: 720px) {
    .portfolio-archive .filter-section { transform: translateY(50%); }
    .portfolio-archive .filter-tabs { border-radius: 22px; }
    .portfolio-archive .filter-tab { border-radius: 14px; }
    .portfolio-archive .projects-section { padding-top: 162px; }
}

@media (max-width: 520px) {
    .portfolio-archive .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-archive .stat-item:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 150px; }
    .portfolio-archive .stat-item:first-child .stat-number { font-size: 4rem; }
    .portfolio-archive .filter-status { top: calc(100% + 7px); max-width: 86vw; white-space: normal; text-align: center; }
}

/* ========================================================================
   CASO DE ESTUDIO V7 · FICHA / RELATO / RUTA
   ======================================================================== */
.project-study .cs-hero-inner { max-width: 1180px; }
.project-study .cs-hero-visual { max-width: 1080px; }
.project-study .cs-hero-actions { justify-content: center; }

.project-study .cs-img-frame--linked { display: block; cursor: pointer; }
.project-study .cs-img-visit {
    position: absolute;
    z-index: 4;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #fff7e8;
    font-size: .72rem;
    font-weight: 760;
    letter-spacing: .06em;
    border: 1px solid rgba(255, 245, 227, .38);
    border-radius: 999px;
    background: rgba(3, 11, 15, .72);
    backdrop-filter: blur(13px);
    transition: color .35s ease, background .35s ease, transform .35s ease;
}
.project-study .cs-img-visit i { color: #f28a56; font-style: normal; transition: transform .35s ease; }
.project-study .cs-img-frame--linked:hover .cs-img-visit { color: #091419; background: #fff2dd; transform: translateY(-4px); }
.project-study .cs-img-frame--linked:hover .cs-img-visit i { transform: translate(3px, -3px); }

.project-study .cs-layout {
    display: grid;
    grid-template-columns: minmax(190px, 14vw) minmax(560px, 1fr) minmax(200px, 15vw);
    gap: clamp(24px, 3.2vw, 54px);
    width: min(1540px, 94vw);
    max-width: none;
    margin: 0 auto;
    padding: clamp(72px, 8vw, 118px) 0;
    align-items: start;
}

.project-study .cs-content { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.project-study .cs-sidebar--meta { grid-column: 1; grid-row: 1; }
.project-study .cs-sidebar--nav { grid-column: 3; grid-row: 1; }
.project-study .cs-sidebar { position: sticky; top: 112px; }

.project-study .sidebar-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(30, 45, 48, .14);
    border-radius: 4px 24px 4px 24px;
    background: linear-gradient(155deg, rgba(255, 251, 241, .97), rgba(235, 227, 213, .93));
    box-shadow: 0 24px 60px rgba(48, 34, 23, .12);
}

.project-study .sidebar-card-head {
    margin: 0;
    padding: 17px 18px;
    color: #f7eee0;
    background: linear-gradient(135deg, #0a171c, #173037);
}
.project-study .sidebar-card-head span:last-child { color: #d9754d; }

.project-study .sidebar-project-name {
    padding: 22px 18px;
    border-bottom: 1px solid rgba(16, 36, 40, .12);
}
.project-study .sidebar-project-name strong,
.project-study .sidebar-project-name span { display: block; }
.project-study .sidebar-project-name strong { color: #152329; font-size: 1rem; line-height: 1.3; }
.project-study .sidebar-project-name span { margin-top: 7px; color: #a54d34; font-size: .62rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }

.project-study .sidebar-section { margin: 0; padding: 18px; border-bottom: 1px solid rgba(16, 36, 40, .1); }
.project-study .sidebar-label { color: #8a4b37; }
.project-study .sidebar-value { color: #233238; }
.project-study .sidebar-status { color: #233238; }
.project-study .sidebar-tag { color: #26363b; border-color: rgba(38, 60, 64, .18); background: rgba(255,255,255,.45); }

.project-study .sidebar-card--route { padding: 14px; background: rgba(7, 18, 23, .94); border-color: rgba(239, 132, 82, .22); box-shadow: 0 24px 64px rgba(0,0,0,.24); }
.project-study .sidebar-card--route .sidebar-label { padding: 9px 10px 14px; color: #d37a55; }
.project-study .sidebar-case-nav { margin: 0; padding: 0; border: 0; }
.project-study .sidebar-case-nav a {
    position: relative;
    margin: 0 0 3px;
    padding: 11px 10px;
    color: #94a2a5;
    border: 0;
    border-radius: 3px 12px 3px 12px;
    background: transparent;
}
.project-study .sidebar-case-nav a::after { content: ''; position: absolute; top: 50%; right: 8px; width: 4px; height: 4px; border-radius: 50%; background: #e0794d; transform: translateY(-50%) scale(0); transition: transform .3s ease; }
.project-study .sidebar-case-nav a.is-active { color: #fff4e4; background: rgba(221, 106, 64, .16); }
.project-study .sidebar-case-nav a.is-active::after { transform: translateY(-50%) scale(1); }
.project-study .sidebar-contact-btn { margin-top: 12px; border-radius: 3px 18px 3px 18px; }

.project-study .content-block {
    padding: clamp(30px, 4vw, 54px);
    margin-bottom: 18px;
    border: 1px solid rgba(39, 54, 56, .11);
    border-radius: 4px 30px 4px 30px;
    background: rgba(255, 252, 245, .82);
}
.project-study .content-block-copy { max-width: 82ch; }
.project-study .content-block p,
.project-study .content-block div { font-size: clamp(1rem, 1.08vw, 1.12rem); line-height: 1.82; }

.project-study .project-connections {
    min-height: 0;
    padding-block: clamp(54px, 6vw, 86px);
    background:
        linear-gradient(90deg, rgba(5, 15, 19, .94), rgba(5, 15, 19, .76)),
        url('/assets/portfolio-software-workshop-v2.webp') center / cover no-repeat;
}
.project-study .project-connections-head,
.project-study .connections-shell { width: min(1240px, 90vw); }
.project-study .connection-card { backdrop-filter: blur(9px); }

.project-study .floating-back-btn {
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.project-study .floating-back-btn svg { width: 17px; height: 17px; }

@media (max-width: 1220px) {
    .project-study .cs-layout { grid-template-columns: minmax(0, 1fr) 270px; width: min(1120px, 92vw); }
    .project-study .cs-content { grid-column: 1; }
    .project-study .cs-sidebar--meta,
    .project-study .cs-sidebar--nav { grid-column: 2; position: static; }
    .project-study .cs-sidebar--meta { grid-row: 1; }
    .project-study .cs-sidebar--nav { grid-row: 2; }
}

@media (max-width: 820px) {
    .project-study .cs-layout { grid-template-columns: 1fr; width: min(92vw, 720px); }
    .project-study .cs-content,
    .project-study .cs-sidebar--meta,
    .project-study .cs-sidebar--nav { grid-column: 1; grid-row: auto; }
    .project-study .cs-content { order: 2; }
    .project-study .cs-sidebar--meta { order: 1; }
    .project-study .cs-sidebar--nav { order: 3; }
    .project-study .cs-img-visit { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .project-study .cs-img-visit,
    .project-study .cs-img-visit i,
    .project-study .sidebar-case-nav a::after { transition: none; }
}

/* Títulos largos (p. ej. «Memorias Automático») no se parten a mitad de palabra
   en la cabecera de dos columnas. */
@media (min-width: 821px) {
    .project-study .cs-title {
        font-size: clamp(2.4rem, 3.6vw, 4.4rem);
        letter-spacing: -.05em;
        overflow-wrap: break-word;
        hyphens: none;
    }
}