:root{--ink:#090e12;--gold:#ffb443;--white:#f1efea;--hand:'Patrick Hand',cursive;--title:'Caveat',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--ink);color:var(--white);font:18px/1.35 var(--hand);overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.skip{position:fixed;top:-80px;left:10px;z-index:100;background:var(--gold);padding:10px;color:#111}.skip:focus{top:10px}.hero{position:relative;height:46.1vw;max-height:738px;min-height:490px;isolation:isolate}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03090d26,transparent 62%)}.nav{position:relative;width:88%;margin:auto;min-height:80px;height:7vw;max-height:112px;padding:7px 2%;display:flex;align-items:center;gap:5%;background:linear-gradient(100deg,#080e13ee,#070d10e0 74%,#0b0e0e26);border-radius:0 0 12% 8%;z-index:5}.brand{font-family:'Barlow Condensed',sans-serif;font-size:clamp(23px,2.8vw,40px);font-weight:700;white-space:nowrap;line-height:.8}.brand-house{font-size:1.4em;vertical-align:-.04em}.brand small{display:block;color:var(--gold);font:700 .8em/1 var(--title);letter-spacing:2px;text-align:right;margin-top:5px}.nav-links{display:flex;align-items:center;justify-content:space-between;gap:2.5vw;flex:1;font-size:clamp(14px,1.2vw,18px);white-space:nowrap}.nav-links button{background:none;border:0;color:inherit;padding:0}.nav-links a{padding:10px 0;position:relative}.nav-links a:hover,.nav-links button:hover{color:var(--gold)}.nav-links .active:after{content:'';position:absolute;bottom:0;height:2px;left:0;right:0;background:var(--gold)}.cart{padding:6px;color:var(--gold);background:#241c1477;border:1px solid #d9bc8c;border-radius:7px;flex:none;width:38px;height:38px}.cart svg{width:100%;height:100%}.menu-toggle{display:none}.hero-copy{position:absolute;top:21%;left:8%;width:36%}.hero h1{margin:0 0 1.65vw;font:700 clamp(50px,6.6vw,104px)/.85 var(--title);text-transform:uppercase;transform:rotate(-3deg);white-space:nowrap;letter-spacing:1px}.hero h1 span{position:relative;display:block;color:var(--gold);font-size:.92em;line-height:1.05;margin-left:3%}.hero h1 span:after{content:'';display:block;width:84%;height:5px;margin-top:2px;background:var(--gold);clip-path:polygon(0 75%,22% 10%,92% 20%,100% 85%,35% 66%)}.hero-copy p{font-size:clamp(17px,1.72vw,26px);line-height:1.12;margin:2.2vw 0 1.6vw 4%;letter-spacing:.5px}.primary{display:flex;align-items:center;justify-content:space-between;gap:15px;width:19.4vw;min-width:210px;max-width:310px;margin-left:4%;padding:9px 19px;background:linear-gradient(105deg,#ffbb45,#ffd482 75%,#efac3c);border:1px solid #efb34e;border-radius:8px 5px 9px 3px;color:#16100b;box-shadow:0 4px 12px #0008;font-size:clamp(23px,2.1vw,32px)}.primary svg{width:29px;height:29px;stroke-width:2.8}.primary>span{font:34px Arial}.primary:hover{filter:brightness(1.1);transform:translateY(-2px)}.chest-writing{position:absolute;left:48.5%;top:70%;color:#b9a296b8;font:700 2.7vw var(--title);transform:rotate(-5deg)}.chest-note{position:absolute;left:66.9%;top:65.2%;color:#17110d;line-height:1.12;font-size:1.5vw;transform:rotate(-9deg)}.chest-note b{display:block;text-align:right;font-size:1.9em}.wall-note{position:absolute;left:86%;top:13%;color:#1b100a;transform:rotate(5deg);font:700 1.7vw/1.1 var(--title);text-align:center}.wall-note span{display:block;text-align:right;font-size:2em}.mug-writing{position:absolute;left:83.7%;top:69%;color:#1d1510;font-size:1.5vw;line-height:.95;text-align:center;transform:rotate(3deg)}.games-section{position:relative;padding:0 4.4% 31px;background:radial-gradient(ellipse at 40% 30%,#15202755,transparent 65%),linear-gradient(#0a0e11e8,#10100de0),url('assets/desk.webp') center/cover;isolation:isolate}.games-section:before,.features:before,.features:after{content:'';position:absolute;left:0;right:0;background:#0a0e11;height:30px;z-index:-1;clip-path:polygon(0 45%,3% 20%,7% 40%,10% 3%,14% 12%,17% 55%,21% 32%,25% 50%,29% 11%,34% 47%,38% 7%,43% 26%,47% 3%,52% 40%,56% 19%,60% 57%,64% 28%,69% 12%,73% 35%,78% 13%,82% 49%,87% 24%,91% 43%,95% 11%,100% 50%,100% 100%,0 100%)}.games-section:before{top:-23px}.section-title{position:relative;font:600 clamp(27px,2.8vw,40px)/1 var(--title);text-transform:uppercase;text-align:center;margin:0 0 24px;transform:rotate(-1deg)}.section-title:after{content:'';display:block;height:4px;width:17%;background:var(--gold);margin:5px auto 0;clip-path:polygon(0 80%,19% 20%,82% 0,100% 70%,25% 100%)}.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6vw}.card{position:relative;min-height:31.3vw;max-height:500px;border:1px solid #797b7b;border-radius:15px;background:#080c0f;box-shadow:0 12px 20px #0009;overflow:visible;display:flex;flex-direction:column;isolation:isolate}.card:after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(transparent 16%,#050a0c22 32%,#060a0dda 55%,#0b0b0ce8);z-index:-1}.game-art{position:absolute;inset:0;width:100%;height:58%;object-fit:cover;border-radius:14px 14px 0 0;z-index:-2}.card-content{padding:7.8vw 2.8vw 1.6vw;display:flex;flex-direction:column;height:100%;flex:1}.card h3{position:relative;font:800 clamp(30px,3.8vw,58px)/.9 'Barlow Condensed',sans-serif;margin:2.1vw -15px 1.5vw;text-align:center;text-shadow:1px 3px 5px #000;letter-spacing:.3px}.bio{position:absolute;bottom:90%;left:0;width:100%;font:normal 6vw/1 Arial;color:#b4201e;text-shadow:0 2px 9px #000}.card h3 small{display:block;font-size:.58em;line-height:1.1;color:#df2529}.remaster h3{margin-top:.6vw;margin-bottom:1.4vw}.coming h3{margin-top:1.5vw;white-space:nowrap}.coming h3 em{font-style:normal;font-size:1.55em;color:#aa191d;vertical-align:-.08em}.card p{margin:0 0 1vw;font-size:clamp(16px,1.38vw,22px);line-height:1.34;letter-spacing:.25px;min-height:4.15vw}.meta{display:flex;justify-content:space-between;align-items:center;gap:6px;list-style:none;margin:auto -4px 1.45vw;padding:0;font-size:clamp(12px,1vw,16px);white-space:nowrap}.play{border:1px solid #ffffff1a;background:linear-gradient(110deg,#bc2425,#d3302c,#b82220);color:white;border-radius:8px;padding:8px 12px;text-align:center;font-size:clamp(17px,1.5vw,24px);width:72%;align-self:center;box-shadow:0 3px 14px #0004;transition:filter .2s,transform .2s}.play span{margin-left:8px}.play:hover:not(:disabled){filter:brightness(1.2);transform:translateY(-2px)}.remaster .play{background:linear-gradient(100deg,#0a6db9,#168bd4,#156aab)}.sticker{position:absolute;right:0;top:1px;background:linear-gradient(110deg,#ffdd9b,#e6b866);color:#15120d;transform:translateY(-3px) rotate(-8deg);padding:7px 11px;font-size:clamp(14px,1.45vw,21px);box-shadow:1px 2px 3px #0006;clip-path:polygon(1% 3%,98% 0,100% 96%,0 100%);z-index:2}.coming .sticker{background:#ccc5b9}.coming p{text-align:center}.coming .play{background:#646464;color:#c1bfba}.lock{margin:auto auto 1.1vw;width:35px;height:42px;color:#7a7a77}.lock svg{width:100%;height:100%;stroke-width:3}.lock rect{fill:currentColor;stroke:none}.lock .keyhole{stroke:#0a0d0f;stroke-width:4}.evidence{position:absolute;width:4.6%;height:91%;object-fit:cover;top:8%;z-index:-1;filter:drop-shadow(2px 5px 4px #000)}.evidence-left{left:0;transform:rotate(-4deg)}.evidence-right{right:0;transform:rotate(180deg)}.features{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);padding:28px 1.5% 36px;background:radial-gradient(ellipse,#101418,#080c0f);gap:0;margin:0;isolation:isolate}.features:before{top:-23px}.features:after{bottom:-23px;transform:rotate(180deg)}.feature{text-align:center;border-right:2px dotted #847d6d88;padding:0 10px}.feature:last-child{border:none}.feature svg{color:var(--gold);height:42px;max-width:65px;width:48px;stroke-width:2.2}.feature h3{margin:5px 0 2px;font-size:clamp(17px,1.55vw,24px);font-weight:400}.feature p{margin:0;font-size:clamp(14px,1.2vw,18px)}.clue{position:relative;height:22.1vw;min-height:230px;max-height:355px;isolation:isolate}.clue>img{position:absolute;width:100%;height:100%;object-fit:cover;z-index:-1}.clue-copy{position:absolute;left:12%;top:15%;width:24.5%;color:#17100b;transform:rotate(-7deg)}.clue-copy h2{margin:0 0 13px;white-space:nowrap;font:700 clamp(20px,2.3vw,34px)/1.1 var(--title);border-bottom:1px solid #1f160b;padding-bottom:8px}.clue-copy p{font-size:clamp(14px,1.2vw,19px);line-height:1.3;margin:0 0 0 14%;}.clue-motto{position:absolute;left:67.3%;top:14%;transform:rotate(-8deg);font:600 clamp(18px,1.8vw,29px)/1.3 var(--title);text-align:center;color:#17100d;margin:0}.clue-motto span{display:block;text-align:right;font-size:1.6em}.boo-secret{position:absolute;left:39%;top:10%;width:23%;height:69%;background:none;border:0;border-radius:50%}.boo-secret:hover{box-shadow:0 0 25px #ffb44324}.boo-secret:focus-visible{outline-offset:-15px}footer{text-align:center;font-size:13px;padding:12px;color:#b3aaa0;background:#080c0f}dialog{color:var(--white);background:#111a20;border:1px solid #a77d42;border-radius:14px;width:min(500px,90vw);padding:30px;box-shadow:0 20px 100px #000;max-height:85vh}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{font:700 32px var(--title);color:var(--gold);padding-right:25px;margin:0 0 15px}dialog p{font-size:18px}dialog .close{position:absolute;right:12px;top:8px;color:white;border:0;background:transparent;font:30px Arial}.dialog-done{background:var(--gold);border:0;padding:9px 22px;border-radius:5px;color:#15100c}.dialog-link{color:var(--gold);display:inline-block;margin-bottom:20px}details{border-bottom:1px solid #ffffff25;padding:13px 0}summary{cursor:pointer}details p{color:#ccc}.menu-toggle{color:var(--gold)}
@media(min-width:1600px){body{max-width:1600px;margin:auto}.hero{height:738px}.card{min-height:500px}.hero-copy p{margin-top:35px}.card-content{padding-top:125px}.clue{height:355px}}
@media(max-width:900px) and (min-width:701px){.nav{width:94%;gap:3%}.nav-links{gap:16px}.hero{min-height:420px}.hero-copy{left:6%;top:25%}.card-content{padding-left:18px;padding-right:18px}.meta{flex-wrap:wrap;justify-content:center;min-height:36px}.card{min-height:370px}.card h3{margin-bottom:17px}.card p{min-height:84px}.play{width:90%}.clue-copy{left:10%;width:27%}.clue-copy p{margin-left:0}.clue-motto{left:68%}}
@media(max-width:700px){.hero{height:760px;min-height:0;max-height:none;background:#080f15}.hero-art{height:430px;top:auto;bottom:0;object-fit:cover;object-position:68% center}.hero:after{background:linear-gradient(#080f15 35%,transparent 65%)}.nav{height:78px;min-height:78px;width:94%;padding:10px 3%;gap:15px;background:#080f15e6;border-radius:0 0 20px 20px}.brand{font-size:25px;margin-right:auto}.cart{width:36px;height:36px}.menu-toggle{display:block;background:none;border:1px solid #947342;border-radius:6px;font-size:22px;width:38px;height:36px;line-height:1}.nav-links{display:none;position:absolute;left:0;right:0;top:75px;background:#0c151cf5;border:1px solid #b38b5144;border-radius:10px;padding:20px;box-shadow:0 15px 25px #000b;white-space:normal;font-size:19px}.nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;gap:10px}.nav-links button{text-align:left;padding:10px 0}.nav-links .active:after{width:30px}.hero-copy{top:108px;left:8%;width:84%;text-align:center}.hero h1{font-size:clamp(48px,11vw,70px);line-height:.9;white-space:normal}.hero h1 span{margin:0}.hero h1 span:after{width:75%;margin:4px auto 0}.hero-copy p{font-size:19px;line-height:1.2;margin:20px auto;max-width:330px;letter-spacing:0}.desktop{display:none}.primary{width:218px;min-width:0;font-size:25px;margin:0 auto;padding:7px 17px}.chest-writing,.chest-note,.wall-note,.mug-writing{display:none}.games-section{padding:3px 6% 35px}.section-title{font-size:33px;margin-bottom:25px}.section-title:after{width:165px}.games{grid-template-columns:1fr;gap:28px;max-width:420px;margin:auto}.card{min-height:420px;max-height:none}.card-content{padding:119px 28px 25px}.card h3{font-size:48px;margin:28px -10px 21px}.bio{font-size:72px}.remaster h3{margin:13px -10px 18px}.coming h3{margin:15px -10px 20px}.card p{font-size:18px;line-height:1.3;min-height:70px;margin:0 0 20px}.meta{font-size:13px;gap:5px;margin:0 -8px 20px;min-height:24px}.play{font-size:21px;width:78%;padding:10px}.sticker{font-size:18px;padding:8px 12px}.lock{margin:0 auto 22px;height:43px}.coming .play{margin-top:auto}.evidence{height:90%;width:6%;opacity:.85}.features{grid-template-columns:1fr 1fr;gap:25px 0;padding:25px 4% 30px}.feature{padding:0 8px}.feature:nth-child(2n){border:none}.feature:last-child{grid-column:1/-1}.feature h3{font-size:20px}.feature p{font-size:15px}.clue{height:470px;max-height:none;background:#1b100b;overflow:hidden}.clue>img{height:260px;bottom:0;width:1180px;max-width:none;left:50%;transform:translateX(-50%);object-fit:cover}.clue-copy{left:10%;top:35px;width:80%;max-width:370px;transform:rotate(-3deg);background:#d8af76;box-shadow:0 5px 15px #0009;padding:20px 22px;clip-path:polygon(1% 4%,95% 0,100% 15%,97% 36%,100% 60%,94% 94%,73% 100%,38% 97%,3% 100%,0 64%,2% 24%)}.clue-copy h2{font-size:29px;margin-bottom:10px}.clue-copy p{font-size:17px;margin-left:0}.clue-motto{display:none}.boo-secret{top:auto;bottom:30px;left:20%;width:60%;height:190px}footer{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Ajustes tras la comparación visual. */
.primary{white-space:nowrap;gap:10px;padding-inline:15px}.primary svg{flex-shrink:0;width:27px}.primary>span{font-size:29px}
@media(min-width:701px){.hero h1{font-size:6.1vw}.hero-copy{top:23%}.hero-copy p{font-size:1.8vw}.clue-copy{width:22.5%;left:12.5%}.clue-copy p{margin-left:6%;font-size:1.2vw}.section-title{margin-bottom:20px}.games-section{padding-bottom:35px}.game-art{height:100%;object-fit:cover}.card:after{background:linear-gradient(transparent 10%,#050a0c18 30%,#060a0c99 55%,#0b0b0caa)}.card h3{letter-spacing:1px}.card-content{padding-top:8vw}}
.game-art{height:100%;object-fit:cover}
@media(min-width:701px){.hero{min-height:0}.features{padding-top:23px;padding-bottom:27px}.card-content{padding-bottom:1.6vw}.card{min-height:31.3vw}.clue{min-height:0}}
.card .game-art{border-radius:14px}.card:after{background:linear-gradient(transparent 15%,#050a0c22 32%,#060a0cb8 55%,#0b0b0cd9)}
@media(max-width:360px){.meta{font-size:12px;gap:3px}.card-content{padding-inline:22px}.clue-copy h2{font-size:24px}}
/* Navegación: tipografía más legible */
.nav-links {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.25vw, 19px);
    letter-spacing: .4px;
}

.nav-links button {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
}

/* =========================================
   SOBRE EL PROYECTO
   ========================================= */

.project-history {
    position: relative;
    padding: 70px 8% 80px;
    background:
        radial-gradient(ellipse at 50% 20%, #18232a 0%, transparent 60%),
        linear-gradient(180deg, #090e12, #0d1215);
    overflow: hidden;
    isolation: isolate;
}

/* Mancha/luz ambiental */
.project-history::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #ffb4430c, transparent 68%);
    pointer-events: none;
    z-index: -1;
}

/* Documento */
.project-history-copy {
    position: relative;
    width: min(760px, 90%);
    margin: auto;
    padding: 42px 55px 38px;

    color: #24180f;

    background:
        radial-gradient(circle at 15% 20%, #8d5f2b16 0 2px, transparent 3px),
        radial-gradient(circle at 80% 70%, #68421d12 0 2px, transparent 3px),
        linear-gradient(105deg, #d7b77f, #e4c994 48%, #cba66d);

    box-shadow:
        0 18px 35px #000a,
        inset 0 0 35px #76501f42;

    transform: rotate(-0.8deg);

    clip-path: polygon(
        1% 3%,
        8% 1%,
        19% 2%,
        32% 0,
        45% 2%,
        61% 1%,
        76% 3%,
        90% 1%,
        99% 3%,
        98% 18%,
        100% 33%,
        98% 49%,
        100% 66%,
        98% 82%,
        99% 97%,
        86% 99%,
        70% 98%,
        55% 100%,
        38% 98%,
        21% 100%,
        3% 97%,
        2% 82%,
        0 65%,
        2% 47%,
        0 28%
    );
}

.project-history-copy h2 {
    margin: 0 0 25px;
    text-align: center;

    font: 700 clamp(34px, 3vw, 48px)/1 var(--title);
    text-transform: uppercase;

    color: #1d140e;
}

/* Subrayado dibujado */
.project-history-copy h2::after {
    content: '';
    display: block;
    width: 190px;
    height: 4px;
    margin: 8px auto 0;

    background: #9b301f;

    clip-path: polygon(
        0 60%,
        17% 20%,
        39% 65%,
        62% 10%,
        83% 45%,
        100% 20%,
        97% 85%,
        73% 65%,
        51% 95%,
        25% 70%
    );
}

.project-history-copy p {
    margin: 0 0 18px;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.45;
}

.project-history-copy strong {
    font-weight: 700;
}

/* Enlace al Pandemia original */
.project-history-copy a {
    position: relative;
    display: inline-block;

    margin-top: 5px;
    padding-bottom: 3px;

    color: #7e2119;
    font-weight: 700;
    font-size: 1.08em;

    transition:
        color .2s,
        transform .2s;
}

.project-history-copy a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;

    background: #9b301f;

    transform: scaleX(.75) rotate(-1deg);
    transform-origin: left;
    transition: transform .2s;
}

.project-history-copy a:hover {
    color: #b32d20;
    transform: translateX(3px);
}

.project-history-copy a:hover::after {
    transform: scaleX(1) rotate(-1deg);
}


/* =========================================
   TABLET
   ========================================= */

@media(max-width:900px) {

    .project-history {
        padding: 60px 6% 70px;
    }

    .project-history-copy {
        width: min(700px, 94%);
        padding: 38px 45px 34px;
    }

}


/* =========================================
   MÓVIL
   ========================================= */

@media(max-width:700px) {

    .project-history {
        padding: 55px 5% 65px;
    }

    .project-history-copy {
        width: 96%;
        padding: 35px 27px 32px;
        transform: rotate(-0.4deg);
    }

    .project-history-copy h2 {
        font-size: 35px;
        margin-bottom: 22px;
    }

    .project-history-copy h2::after {
        width: 150px;
    }

    .project-history-copy p {
        font-size: 17px;
        line-height: 1.4;
    }

    .project-history-copy a {
        font-size: 18px;
    }

}
/* =========================================
   METADATOS DE LAS FICHAS
   ========================================= */

/* Un poco más grandes y legibles */
.meta {
    font-size: clamp(14px, 1.15vw, 18px);
    gap: 8px;
}

/* Iconos PC / tablet / móvil */
.devices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    color: var(--gold);
}

.devices svg {
    width: 23px;
    height: 23px;
    flex-shrink: 0;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================
   MÓVIL
   ========================================= */

@media(max-width:700px) {

    .meta {
        font-size: 15px;
        gap: 7px;
    }

    .devices {
        gap: 6px;
    }

    .devices svg {
        width: 24px;
        height: 24px;
    }

}


/* Pantallas especialmente pequeñas */
@media(max-width:360px) {

    .meta {
        font-size: 14px;
        gap: 5px;
    }

    .devices svg {
        width: 22px;
        height: 22px;
    }

}	


.meta {
    font-size: clamp(16px, 1.3vw, 20px);
    gap: 8px;
    color: var(--gold);
    font-weight: 600;
}

@media(max-width:700px) {
    .meta {
        font-size: 17px;
        gap: 7px;
    }
}


/* =========================================
   BOTONES DESGASTADOS
   ========================================= */

.play,
.primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Manchas / desgaste superficial */
.play::before,
.primary::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 14% 25%, #00000024 0 2px, transparent 3px),
        radial-gradient(circle at 73% 72%, #00000020 0 3px, transparent 4px),
        radial-gradient(circle at 42% 15%, #ffffff17 0 1px, transparent 2px),
        radial-gradient(circle at 88% 30%, #00000018 0 2px, transparent 3px),
        linear-gradient(97deg,
            transparent 0 18%,
            #ffffff0d 19%,
            transparent 20% 67%,
            #00000012 68%,
            transparent 70%
        );

    opacity: .8;
    mix-blend-mode: multiply;
}

/* Bordes ligeramente gastados */
.play::after,
.primary::after {
    content: '';
    position: absolute;
    inset: 2px;
    pointer-events: none;

    border: 1px solid #ffffff18;
    border-radius: 5px 7px 4px 6px;

    clip-path: polygon(
        0 5%,
        8% 2%,
        19% 4%,
        31% 1%,
        45% 3%,
        59% 0,
        72% 3%,
        87% 1%,
        100% 5%,
        98% 25%,
        100% 48%,
        98% 72%,
        100% 96%,
        84% 98%,
        67% 97%,
        49% 100%,
        30% 97%,
        14% 100%,
        1% 95%
    );
}


/* =========================================
   PERGAMINO ENVEJECIDO
   ========================================= */

.project-history-copy {
    isolation: isolate;
}

/* Manchas, humedad y marcas */
.project-history-copy::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 8% 12%,
            #633b1860 0,
            #633b1825 8%,
            transparent 18%
        ),

        radial-gradient(
            ellipse at 92% 82%,
            #70451c48 0,
            transparent 17%
        ),

        radial-gradient(
            circle at 75% 18%,
            #4d301727 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 27% 73%,
            #4d301722 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 63% 57%,
            #4d30171c 0 2px,
            transparent 3px
        );
}

/* Bordes oscurecidos por el paso del tiempo */
.project-history-copy::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    box-shadow:
        inset 0 0 18px #57331045,
        inset 0 0 45px #57331025,
        inset 12px 0 22px #4a2b151c,
        inset -10px 0 20px #4a2b151c;
}
/* =========================================
   CORTE IRREGULAR EN LA IMAGEN DE BOO
   ========================================= */


.clue {
    background: #0d1215;
    overflow: hidden;
}

@media(min-width:701px) {

    .clue > img {
        clip-path: polygon(
            0 18px,
            4% 9px,
            9% 15px,
            14% 4px,
            20% 12px,
            27% 2px,
            34% 14px,
            41% 7px,
            48% 16px,
            55% 5px,
            62% 12px,
            69% 2px,
            76% 14px,
            83% 6px,
            90% 13px,
            96% 4px,
            100% 12px,
            100% 100%,
            0 100%
        );
    }

}

.primary > span {
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    transform: scaleX(1.15);
}
.primary .boo-key {
    width: 44px;
    height: 36px;
    flex-shrink: 0;

    color: #4b2d12;

    transform: rotate(128deg);
    transform-origin: center;
}

.primary .arrow {
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.primary {
    justify-content: space-between;
    gap: 10px;
}


.duration {
    display: flex;
    align-items: center;
    gap: 6px;
}

.duration svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.players {
    display: flex;
    align-items: center;
    gap: 6px;
}

.players svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}