/* Generado por herramientas/construir.py desde PORTFOLIO PROTOTYPE.html: el estilo del contenido de los casos,
   con las fuentes de la familia (Instrument Serif, Plex Mono, Helvetica Neue). No se edita a mano. */

        /* ===== CASE STUDY CONTENT ===== */
        .case-main { min-width: 0; }
        .case-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 0.5px solid rgba(232,230,224,0.12); margin-bottom: 36px; }
        .case-title { font-size: 64px; font-family: var(--serif); color: #F2F0EA; letter-spacing: -0.02em; font-weight: 400; line-height: 1; margin: 0; }
        .case-meta { text-align: right; font-family: var(--mono); font-size: 10px; color: #DCD8CE; letter-spacing: 0.06em; line-height: 1.8; text-transform: uppercase; }
        .case-meta b { color: #CFCBC1; font-weight: 400; }
        .case-desc { font-family: var(--serif); font-size: 22px; color: #D8D4CA; line-height: 1.45; letter-spacing: -0.01em; margin: 0 0 56px; max-width: 640px; font-style: italic; font-weight: 400; }

        /* ===== CHAPTERS ===== */
        .chapter { padding: 52px 0 64px; border-top: 0.5px dashed rgba(232,230,224,0.1); scroll-margin-top: 74px; }
        .chapter:first-of-type { border-top: none; padding-top: 0; }
        .ch-headrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 0.5px solid rgba(232,230,224,0.12); }
        .ch-label { font-family: var(--mono); font-size: 10px; color: #CFCBC1; letter-spacing: 0.1em; text-transform: uppercase; }
        .ch-label b { color: #DCD8CE; font-weight: 400; }
        .ch-pagelabel { font-family: var(--mono); font-size: 9px; color: #CFCBC1; letter-spacing: 0.1em; text-transform: uppercase; }
        .ch-title { font-family: var(--serif); font-size: 44px; color: #F2F0EA; letter-spacing: -0.02em; font-weight: 400; line-height: 1.05; margin: 20px 0 32px; }
        .ch-body { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
        .ch-prose { font-family: var(--sans); font-size: 15px; color: #DCD8CE; line-height: 1.65; letter-spacing: 0.005em; max-width: 480px; }
        .ch-prose p { margin: 0 0 15px; }
        .ch-prose em { font-style: italic; color: #D8D4CA; font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; }
        .ch-placeholder { background: #141316; border-radius: 2px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        .ch-placeholder::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 4px); }
        .ch-placeholder-label { font-family: var(--mono); font-size: 9px; color: #CFCBC1; letter-spacing: 0.08em; text-transform: uppercase; }
        .ch-placeholder-center { font-family: var(--serif); font-size: 22px; color: #AAA69D; letter-spacing: -0.01em; }
        .ch-placeholder-center em { font-style: italic; }

        /* ===== ABOUT PAGE ===== */
        .about-body { display: grid; grid-template-columns: 130px 1fr; gap: 56px; align-items: start; margin-top: 40px; }
        .about-leftcol { padding-top: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: #CFCBC1; text-transform: uppercase; line-height: 1.7; }
        .about-leftcol b { color: #DCD8CE; font-weight: 400; display: block; margin-top: 16px; margin-bottom: 2px; }
        .about-leftcol .first { margin-top: 0; }
        .about-lead { font-family: var(--serif); font-size: 48px; color: #F2F0EA; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 28px; font-weight: 400; }
        .about-lead .dot { color: #CFCBC1; }
        .about-sub { font-size: 17px; color: #DCD8CE; max-width: 540px; font-family: var(--sans); letter-spacing: 0.005em; line-height: 1.6; margin: 0 0 14px; }
        .about-sub.dim { color: #CFCBC1; }
        .services { margin-top: 48px; padding-top: 24px; border-top: 0.5px solid rgba(232,230,224,0.12); }
        .services-header { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #CFCBC1; margin-bottom: 22px; font-family: var(--mono); }
        .svc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
        .svc-item { padding-top: 14px; border-top: 0.5px solid rgba(232,230,224,0.15); }
        .svc-num { font-family: var(--mono); font-size: 10px; color: #CFCBC1; margin-bottom: 10px; letter-spacing: 0.06em; }
        .svc-name { font-family: var(--serif); font-size: 20px; color: #F2F0EA; margin-bottom: 10px; letter-spacing: -0.01em; line-height: 1.1; }
        .svc-desc { font-family: var(--mono); font-size: 10px; color: #DCD8CE; letter-spacing: 0.02em; line-height: 1.6; }
        .contact-bar { margin-top: 40px; padding-top: 20px; border-top: 0.5px solid rgba(232,230,224,0.12); display: flex; justify-content: space-between; align-items: baseline; }
        .contact-email { font-family: var(--serif); font-size: 22px; color: #F2F0EA; letter-spacing: -0.01em; }
        .contact-socials { display: flex; gap: 20px; font-size: 11px; color: #DCD8CE; font-family: var(--mono); letter-spacing: 0.04em; }

        /* ===== PRESSKIT STYLES ===== */
        .s1-stage { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
        .s1-left { padding-top: 8px; }
        .s1-kicker { font-family: var(--mono); font-size: 9px; color: #CFCBC1; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
        .s1-thesis { font-family: var(--serif); font-size: 30px; color: #F2F0EA; line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 24px; font-weight: 400; }
        .s1-thesis em { font-style: italic; color: #D8D4CA; }
        .s1-body { font-family: var(--mono); font-size: 11px; color: #DCD8CE; line-height: 1.7; margin: 0 0 28px; max-width: 320px; letter-spacing: 0.01em; }
        .s1-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 0.5px solid rgba(232,230,224,0.12); }
        .s1-stat { padding: 14px 0; font-family: var(--mono); border-right: 0.5px solid rgba(232,230,224,0.12); padding-right: 14px; }
        .s1-stat:nth-child(2) { padding-left: 14px; }
        .s1-stat:nth-child(3) { padding-left: 14px; border-right: none; }
        .s1-stat-label { font-size: 8px; color: #CFCBC1; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
        .s1-stat-num { font-family: var(--serif); font-size: 28px; color: #F2F0EA; letter-spacing: -0.015em; line-height: 1; }
        .s1-stat-sub { font-size: 8px; color: #DCD8CE; letter-spacing: 0.04em; margin-top: 4px; line-height: 1.4; }

        .s2-stage { margin-top: 24px; }
        .s2-section { margin-bottom: 36px; }
        .s2-section-header { font-family: var(--mono); font-size: 9px; color: #CFCBC1; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 0.5px solid rgba(232,230,224,0.12); display: flex; justify-content: space-between; }
        .s2-label-demo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
        .s2-label-card { background: #141316; padding: 22px; border-radius: 2px; position: relative; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; }
        .s2-label-kicker { font-family: 'Helvetica', sans-serif; font-size: 9px; font-weight: 700; padding: 2px 6px; display: inline-block; letter-spacing: 0.04em; }
        .s2-label-main { font-family: 'Helvetica', sans-serif; font-size: 22px; font-weight: 800; padding: 6px 12px; display: inline-block; letter-spacing: -0.02em; margin-top: 6px; }
        .s2-label-demo-caption { font-family: var(--mono); font-size: 8px; color: #CFCBC1; letter-spacing: 0.06em; margin-top: 14px; text-transform: uppercase; }
        .s2-kk-1, .s2-km-1 { background: #C8A555; color: #0A0A0C; }
        .s2-kk-2, .s2-km-2 { background: #CEFF3D; color: #0A0A0C; }
        .s2-kk-3, .s2-km-3 { background: #E8E6E0; color: #0A0A0C; }
        .s2-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 14px; }
        .s2-flow-item { background: #141316; border: 0.5px solid rgba(232,230,224,0.12); border-radius: 2px; padding: 10px 6px; text-align: center; }
        .s2-flow-num { font-family: var(--mono); font-size: 8px; color: #CFCBC1; letter-spacing: 0.08em; margin-bottom: 6px; }
        .s2-flow-name { font-family: var(--serif); font-size: 11px; color: #F2F0EA; letter-spacing: -0.01em; line-height: 1.1; }
        .s2-palette { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
        .s2-pal-card { background: #141316; border-radius: 2px; overflow: hidden; }
        .s2-pal-chip { height: 80px; }
        .s2-pal-chip-1 { background: #C8A555; }
        .s2-pal-chip-2 { background: #CEFF3D; }
        .s2-pal-chip-3 { background: #E8E6E0; }
        .s2-pal-body { padding: 14px; }
        .s2-pal-artist { font-family: var(--serif); font-size: 16px; color: #F2F0EA; letter-spacing: -0.01em; line-height: 1; }
        .s2-pal-hex { font-family: var(--mono); font-size: 9px; color: #CFCBC1; letter-spacing: 0.08em; margin-top: 6px; }
        .s2-pal-name { font-family: var(--mono); font-size: 9px; color: #DCD8CE; letter-spacing: 0.04em; margin-top: 2px; }

        .s3-stage { margin-top: 24px; }
        .s3-artist { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 0.5px solid rgba(232,230,224,0.12); }
        .s3-artist:last-of-type { border-bottom: none; margin-bottom: 0; }
        .s3-artist-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
        .s3-artist-name { font-family: var(--serif); font-size: 32px; color: #F2F0EA; letter-spacing: -0.015em; line-height: 1; }
        .s3-artist-meta { font-family: var(--mono); font-size: 9px; color: #DCD8CE; letter-spacing: 0.06em; text-align: right; line-height: 1.6; text-transform: uppercase; }
        .s3-artist-tag { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
        .s3-artist-bio { font-family: var(--serif); font-size: 18px; font-style: italic; color: #D8D4CA; line-height: 1.4; margin-bottom: 18px; max-width: 560px; }
        .s3-spreads { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
        .s3-spread { aspect-ratio: 3/4; border-radius: 2px; position: relative; overflow: hidden; }
        .s3-spread img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
        .s3-spread-cap { position: absolute; bottom: 6px; left: 8px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: #F5F0E0; background: rgba(0,0,0,0.45); padding: 3px 6px; border-radius: 1px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; }
        .s3-full { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 0.5px solid rgba(245,240,224,0.08); border-radius: 3px; }
        .s3-full-thumb { width: 56px; height: 56px; border-radius: 2px; overflow: hidden; flex-shrink: 0; cursor: zoom-in; }
        .s3-full-thumb img { width: 100%; height: auto; display: block; }
        .s3-full-text { flex: 1; min-width: 0; }
        .s3-full-title { font-family: var(--serif); font-size: 15px; color: #F2F0EA; }
        .s3-full-meta { font-family: var(--mono); font-size: 9px; color: #DCD8CE; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
        .s3-full-arr { font-family: var(--mono); font-size: 14px; color: #DCD8CE; }
        .s3-closing { margin-top: 36px; padding-top: 24px; border-top: 0.5px solid rgba(232,230,224,0.12); display: flex; justify-content: space-between; align-items: baseline; }
        .s3-closing-line { font-family: var(--serif); font-size: 20px; color: #F2F0EA; font-style: italic; letter-spacing: -0.01em; }
        .s3-closing-meta { font-family: var(--mono); font-size: 9px; color: #DCD8CE; letter-spacing: 0.06em; text-transform: uppercase; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            /* Layout containers */
            .section { padding: 24px 20px 36px; }
            .case-grid { grid-template-columns: 1fr; gap: 24px; }
            .toc-sticky { position: static; margin-bottom: 32px; }
            .ch-body { grid-template-columns: 1fr; gap: 24px; }
            .about-body { grid-template-columns: 1fr; gap: 32px; }
            .case-content { padding: 0 20px; }

            /* Big headlines scale down */
            .case-title { font-size: 48px; }
            .ch-title { font-size: 36px !important; }

            /* Index hero — name + watermark */
            #index > div:first-child { padding: 40px 0 32px !important; }
            #index p[style*="font-size: 120px"] { font-size: 52px !important; line-height: 1 !important; }
            #index p[style*="font-size: 28px"] { font-size: 16px !important; }
            .idx-watermark { font-size: 10vw !important; line-height: 0.9 !important; }

            /* Project list rows — stack info vertically inside each row */
            .idx-header { display: none !important; }
            .proj-row {
                display: grid !important;
                grid-template-columns: 28px 1fr auto !important;
                grid-template-areas: "num name arrow" "num tag year" !important;
                row-gap: 2px !important;
                column-gap: 12px !important;
                padding: 14px 0 !important;
            }
            .proj-row .proj-num { grid-area: num; font-size: 9px !important; }
            .proj-row .proj-name { grid-area: name; font-size: 22px !important; }
            .proj-row .proj-tag { grid-area: tag; font-size: 9px !important; }
            .proj-row .proj-year { grid-area: year; font-size: 9px !important; align-self: end; }
            .proj-row .arr { grid-area: arrow; align-self: start; }

            /* Sidebar foot inline */
            .foot { flex-wrap: wrap; gap: 8px 12px; }

            /* Index nav — tighter */
            .nav { padding: 14px 20px !important; flex-wrap: wrap; gap: 8px 12px; }
            .mark { font-size: 13px !important; }
            .nav-links { gap: 14px !important; }

            /* Browser bar URL — wrap */
            .browser-bar { flex-wrap: wrap; }
            .url { font-size: 9px; word-break: break-all; }

            /* 4-column grids → 2-column on mobile (Contact, AEPLMV fact panel) */
            [style*="grid-template-columns: repeat(4, 1fr)"] {
                grid-template-columns: 1fr 1fr !important;
                gap: 20px !important;
            }
            [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
                grid-template-columns: 1fr 1fr !important;
                gap: 12px !important;
            }
            /* 3-column grids → 1-column on mobile (logos, mockup grids, etc.) */
            [style*="grid-template-columns: 1fr 1fr 1fr"] {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
            /* 8-col flow halves to 4 */
            [style*="grid-template-columns: repeat(8, 1fr)"] {
                grid-template-columns: repeat(4, 1fr) !important;
            }
            /* 2-column grids stay but smaller gap */
            [style*="grid-template-columns: 1fr 1fr"] {
                gap: 14px !important;
            }
            /* Asymmetric 2-col layouts (Komando Flyers/Motion/In context, etc.) collapse to single column on mobile */
            [style*="grid-template-columns: 1.2fr 1fr"],
            [style*="grid-template-columns: 1fr 1.2fr"],
            [style*="grid-template-columns: 1.4fr 1fr"],
            [style*="grid-template-columns: 1fr 1.4fr"],
            [style*="grid-template-columns: 2fr 1fr"],
            [style*="grid-template-columns: 1fr 2fr"],
            [style*="grid-template-columns: 1fr 340px"] {
                grid-template-columns: 1fr !important;
                gap: 24px !important;
            }

            /* Komando + Salut Games Identity stages — collapse to flowing column */
            [style*="position: relative; height: 780px"] {
                height: auto !important;
                min-height: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 24px !important;
                padding: 16px 0 !important;
                margin-top: 16px !important;
            }
            [style*="position: relative; height: 780px"] > * {
                position: static !important;
                transform: none !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                width: auto !important;
                max-width: 100% !important;
            }
            /* Process bg no longer overlaps the logo on mobile — show at full brightness */
            [style*="position: relative; height: 780px"] > div[style*="opacity: 0.18"] {
                width: 100% !important;
                opacity: 1 !important;
                order: -1;
            }
            /* Big logo images scale to fit */
            [style*="position: relative; height: 780px"] img {
                max-width: 100% !important;
                width: 100% !important;
                height: auto !important;
                max-height: 380px !important;
                object-fit: contain !important;
            }
            /* Wordmark + corner markers — keep but inline */
            [style*="position: relative; height: 780px"] [style*="border: 0.5px solid #AAA69D"] { display: none !important; }
            /* Logo Design header inside dark inset block */
            h3[style*="font-size: 52px"] { font-size: 32px !important; }
            h3[style*="font-size: 52px"] + div { font-size: 32px !important; }

            /* Big serif Contact headline */
            h1[style*="font-size: 96px"] { font-size: 48px !important; line-height: 1 !important; }
            h1[style*="font-size: 88px"] { font-size: 44px !important; line-height: 1 !important; }

            /* Big italic taglines / pull quotes */
            p[style*="font-size: 28px"] { font-size: 20px !important; }
            p[style*="font-size: 24px"] { font-size: 18px !important; }
            p[style*="font-size: 22px"] { font-size: 17px !important; }

            /* Komando inset block padding */
            section.chapter > div[style*="padding: 48px 56px 64px"] {
                padding: 24px 20px 32px !important;
            }

            /* Hide the wordmark typeset on mobile (Salut Games) — will move to caption area */
            div[style*="font-size: 64px"][style*="text-transform: uppercase"] {
                font-size: 32px !important;
                text-align: center !important;
            }

            /* Salut Games anatomy logo — height-based */
            img[alt*="primary mark, isolated"] {
                height: auto !important;
                max-height: 360px !important;
                width: auto !important;
                max-width: 100% !important;
            }

            /* Mockup tag — smaller on mobile */
            .mockup-tag { font-size: 6px !important; padding: 2px 5px !important; }
        }

        @media (max-width: 480px) {
            /* Even tighter for narrow phones */
            .section { padding: 18px 14px 28px; }
            .case-content { padding: 0 14px; }
            #index p[style*="font-size: 120px"] { font-size: 40px !important; }
            .case-title { font-size: 36px; }
            .ch-title { font-size: 28px !important; }
            h1[style*="font-size: 96px"] { font-size: 36px !important; }
            h3[style*="font-size: 52px"] { font-size: 26px !important; }
            h3[style*="font-size: 52px"] + div { font-size: 26px !important; }
            .nav { padding: 12px 14px !important; }
            .mark { font-size: 12px !important; }
            .nav-links { gap: 10px !important; }
            .nav-link { font-size: 10px !important; }
            .proj-row .proj-name { font-size: 18px !important; }
        }

        /* Mockup-disclaimer badge — corner tag for rendered/mocked imagery, low-key */
        .mockup-tag {
            position: absolute;
            bottom: 8px;
            right: 8px;
            z-index: 2;
            font-family: var(--mono);
            font-size: 7px;
            color: rgba(232,230,224,0.55);
            letter-spacing: 0.16em;
            text-transform: uppercase;
            background: rgba(0,0,0,0.28);
            padding: 3px 6px;
            border-radius: 1px;
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            pointer-events: none;
        }

        /* ───────── Lightbox (image zoom on tap/click) ───────── */
        img.zoomable { cursor: zoom-in; }
        img.zoomable:hover { opacity: 0.94; transition: opacity 180ms ease; }
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            align-items: safe center;
            justify-content: center;
            padding: 32px;
            background: rgba(8, 8, 7, 0.88);
            -webkit-backdrop-filter: blur(14px) saturate(120%);
            backdrop-filter: blur(14px) saturate(120%);
            opacity: 0;
            visibility: hidden;
            transition: opacity 240ms cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0s linear 240ms;
            cursor: zoom-out;
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        .lightbox.is-open {
            opacity: 1;
            visibility: visible;
            transition: opacity 240ms cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0s linear 0s;
        }
        .lightbox-img {
            max-width: min(92vw, 1800px);
            width: auto;
            height: auto;
            display: block;
            border-radius: 4px;
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
            transform: scale(0.96);
            opacity: 0;
            transition: transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 260ms ease;
            margin: auto 0;
        }
        .lightbox.is-open .lightbox-img {
            transform: scale(1);
            opacity: 1;
        }
        .lightbox-close {
            position: fixed;
            top: 20px;
            right: 24px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(245, 240, 224, 0.18);
            color: #F5F0E0;
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--mono);
            transition: background 180ms ease, transform 180ms ease;
            -webkit-tap-highlight-color: transparent;
        }
        .lightbox-close:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: scale(1.05);
        }
        .lightbox-close:active { transform: scale(0.96); }
        .lightbox-caption {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #DCD8CE;
            max-width: 86vw;
            text-align: center;
            pointer-events: none;
        }
        body.lightbox-open { overflow: hidden; }
        @media (max-width: 768px) {
            .lightbox { padding: 16px; }
            .lightbox-img { max-width: 96vw; max-height: 84vh; }
            .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 22px; }
            .lightbox-caption { bottom: 14px; font-size: 10px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .lightbox, .lightbox-img { transition: opacity 80ms linear !important; transform: none !important; }
        }