/* Todo queda limitado a la ficha Billion Hands. */
.bh-project {
    --bh-paper: #f3f2ee;
    --bh-band: #878783;
    --bh-space: clamp(24px, 5vw, 76px);
    width: 100%; max-width: none; margin: 0; padding: 24px 0 56px;
    color: #080808; font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(#d7d6d0 0.65px, transparent 0.8px) center / 7px 7px, var(--bh-paper);
    overflow: clip;
}
.bh-project *, .bh-modal * { box-sizing: border-box; }
.bh-project .bh-inner, .bh-project .bh-top, .bh-project .bh-prevnext {
    width: min(100% - var(--bh-space) * 2, 1280px); max-width: 1280px;
    margin-left: auto; margin-right: auto;
}
.bh-project .bh-top { padding: 0; margin-bottom: 32px; display: flex; align-items: center; justify-content: space-between; }
.bh-project .bh-top .monogram { color: #000; text-decoration: none; }
.bh-project .bh-top .hamb { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 64px; height: 46px; padding: 0; border: 0; border-radius: 40px; background: #000; cursor: pointer; }
.bh-project .bh-top .hamb i { display: block; flex-shrink: 0; width: 34px; height: 3px; margin: 0; background: #fff; }
.bh-project .bh-marquee { width: 100%; overflow: hidden; margin: 0 0 clamp(40px, 6vw, 88px); }
.bh-project .bh-marquee-track { display: flex; width: max-content; animation: bh-marquee 24s linear infinite; }
.bh-project .bh-marquee-track span { flex: none; white-space: nowrap; font-size: clamp(52px, 7vw, 112px); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; }
@keyframes bh-marquee { to { transform: translateX(-50%); } }
.bh-project .bh-intro h1 {
    font-size: clamp(42px, 6.4vw, 100px); font-weight: 900; line-height: .98;
    letter-spacing: -.05em; margin: 0 0 26px; max-width: none; padding: 0;
}
.bh-project .bh-category { font-size: 16px; line-height: 1.5; margin: 0 0 8px; }
.bh-project .bh-meta { font-size: 16px; line-height: 1.5; border-bottom: 1px solid #333; margin: 0 0 30px; padding: 0 0 12px; }
.bh-project .bh-lead { font-size: clamp(23px, 2.7vw, 42px); font-weight: 700; line-height: 1.2; margin: 0 0 28px; max-width: none; }
.bh-project .bh-challenge { font-size: clamp(42px, 6.3vw, 98px); font-weight: 900; line-height: 1; letter-spacing: -.035em; margin: 0; text-transform: none; }
.bh-project .bh-adaptations { margin-top: clamp(52px, 7vw, 110px); }
.bh-project .bh-collage { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: center; gap: clamp(16px, 2.5vw, 48px); padding: 0 clamp(16px, 2vw, 40px); position: relative; z-index: 1; }
.bh-project .bh-collage-column { display: grid; gap: clamp(20px, 4vw, 72px); }
.bh-project .bh-collage-middle { transform: translateY(-30px); }
.bh-project img { display: block; max-width: 100%; height: auto; }
.bh-project .bh-collage img { width: 100%; }
.bh-project .bh-band { position: relative; background: var(--bh-band); color: #fff; text-align: right; padding: clamp(120px, 13vw, 230px) max(var(--bh-space), calc((100% - 1280px) / 2)) 42px; margin-top: clamp(-130px, -8vw, -50px); }
.bh-project .bh-band h2 { font-size: clamp(30px, 4.5vw, 70px); line-height: 1.12; font-weight: 800; letter-spacing: .005em; margin: 0; color: #fff; }
.bh-project .bh-band p { font-size: clamp(19px, 2.5vw, 34px); font-weight: 700; line-height: 1.3; margin: 8px 0 0; }
.bh-project .bh-process { margin-top: clamp(42px, 6vw, 88px); margin-bottom: clamp(60px, 8vw, 120px); }
.bh-project .bh-process p { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.5; max-width: none; width: 100%; margin: 0 0 28px; }
.bh-project .bh-chart { width: 100%; margin: clamp(48px, 6vw, 90px) 0 0; }
.bh-project .bh-video-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 3vw, 64px); align-items: start; position: relative; z-index: 1; }
.bh-project .bh-card-vertical { grid-row: 1 / 3; }
.bh-project .bh-video-card { display: block; position: relative; overflow: hidden; background: #16242b; }
.bh-project .bh-video-card img { width: 100%; transition: transform .4s ease, filter .4s ease; }
.bh-project .bh-card-horizontal img { aspect-ratio: 16 / 9; object-fit: cover; }
.bh-project .bh-play { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; background: rgb(0 0 0 / 35%); color: white; font-size: 50px; opacity: 0; transition: opacity .3s; }
.bh-project .bh-play small { font-size: 14px; letter-spacing: .08em; font-weight: bold; }
.bh-project .bh-video-card:hover img, .bh-project .bh-video-card:focus-visible img { transform: scale(1.035); filter: brightness(.85); }
.bh-project .bh-video-card:hover .bh-play, .bh-project .bh-video-card:focus-visible .bh-play { opacity: 1; }
.bh-project .bh-video-card:focus-visible { outline: 3px solid #000; outline-offset: 5px; }
.bh-project .bh-animation .bh-band { padding-top: clamp(130px, 14vw, 240px); }
.bh-project .bh-prevnext { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 44px; font-size: 14px; }
.bh-project .bh-prevnext a { color: inherit; }
/* El contenido se mantiene visible si JavaScript no está disponible. */
.bh-project .bh-reveal.bh-reveal-ready { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s ease; }
.bh-project .bh-reveal.bh-visible { opacity: 1; transform: translateY(0); }
dialog.bh-modal {
    border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh;
    max-width: none; max-height: none; color: white; background: transparent;
    inset: 0; overflow: auto;
}
dialog.bh-modal[open] { display: grid; place-items: center; }
dialog.bh-modal::backdrop { background: rgba(0, 0, 0, .7); }
.bh-modal .bh-modal-panel { width: fit-content; max-width: calc(100vw - 40px); margin: 20px; }
.bh-modal .bh-modal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.bh-modal .bh-modal-toolbar p { color: #fff; font: 14px/1.4 Arial, sans-serif; margin: 0; }
.bh-modal .bh-close { background: #fff; color: #111; border: 0; border-radius: 50%; font: 22px Arial, sans-serif; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0; }
.bh-modal video.bh-player { display: block; width: auto !important; height: auto !important; max-width: calc(100vw - 40px) !important; max-height: calc(100dvh - 120px) !important; object-fit: contain; background: #000; margin: auto; }
.bh-modal .bh-video-error { max-width: 600px; font: 16px/1.5 Arial,sans-serif; }
.bh-modal .bh-video-error a { color: #fff; text-decoration: underline; }
html.bh-modal-open { overflow: hidden; }
@media (max-width: 767px) {
    .bh-project { --bh-space: 22px; padding-top: 20px; }
    .bh-project .bh-top { margin-bottom: 24px; }
    .bh-project .bh-desktop-break { display: none; }
    .bh-project .bh-intro h1 { font-size: clamp(40px, 9vw, 68px); }
    .bh-project .bh-challenge { font-size: clamp(38px, 8.8vw, 64px); }
    .bh-project .bh-collage { gap: 12px; padding: 0 12px; }
    .bh-project .bh-collage-column { gap: 16px; }
    .bh-project .bh-collage-middle { transform: translateY(-12px); }
    .bh-project .bh-band { padding-top: 80px; padding-bottom: 30px; margin-top: -35px; }
    .bh-project .bh-video-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .bh-project .bh-animation .bh-band { padding-top: 90px; }
    .bh-project .bh-band h2 { font-size: clamp(25px, 5.5vw, 40px); }
}
@media (hover: none) { .bh-project .bh-play { opacity: 1; background: rgb(0 0 0 / 15%); font-size: 32px; } }
@media (prefers-reduced-motion: reduce) {
    .bh-project .bh-marquee-track { animation: none; }
    .bh-project .bh-reveal.bh-reveal-ready { opacity: 1; transform: none; transition: none; }
    .bh-project .bh-video-card img, .bh-project .bh-play { transition: none; }
}

/* Versión compacta: pegar al final de CSS adicional si el plugin ya está activo. */
.bh-project { padding-top: 16px; padding-bottom: 32px; }
.bh-project .bh-top { margin-bottom: 20px; }
.bh-project .bh-top .monogram { font-size: 34px; }
.bh-project .bh-marquee { margin-bottom: clamp(24px, 3.5vw, 48px); }
.bh-project .bh-marquee-track span { font-size: clamp(40px, 5vw, 80px); }
.bh-project .bh-intro h1 { font-size: clamp(34px, 5.1vw, 80px); margin-bottom: 18px; }
.bh-project .bh-category { font-size: 14px; margin-bottom: 4px; }
.bh-project .bh-meta { font-size: 14px; margin-bottom: 20px; padding-bottom: 8px; }
.bh-project .bh-lead { font-size: clamp(20px, 2.1vw, 32px); margin-bottom: 18px; }
.bh-project .bh-challenge { font-size: clamp(32px, 5vw, 76px); }
.bh-project .bh-adaptations { margin-top: clamp(32px, 4vw, 64px); }

/* Reducir la maquetación, en lugar de usar transform: scale(), elimina
   también el espacio que antes ocupaban las imágenes. */
.bh-project .bh-collage {
    box-sizing: border-box;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(9.6px, 1.2vw, 24px);
    padding-right: clamp(9.6px, 1.2vw, 24px);
    gap: clamp(9.6px, 1.5vw, 28.8px);
}
.bh-project .bh-collage-column { gap: clamp(12px, 2.4vw, 43.2px); }
.bh-project .bh-collage-middle { transform: translateY(-18px); }
.bh-project .bh-band {
    padding-top: clamp(72px, 7.8vw, 138px);
    padding-bottom: 28px;
    margin-top: clamp(-78px, -4.8vw, -30px);
}
.bh-project .bh-band h2 { font-size: clamp(26px, 3.3vw, 50px); }
.bh-project .bh-band p { font-size: clamp(17px, 1.8vw, 26px); margin-top: 6px; }
.bh-project .bh-process { margin-top: clamp(28px, 3.5vw, 48px); margin-bottom: clamp(36px, 4.5vw, 68px); }
.bh-project .bh-process p { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; margin-bottom: 18px; }
.bh-project .bh-chart { width: 60%; margin: clamp(28px, 3.5vw, 48px) auto 0; }
.bh-project .bh-video-grid {
    width: min(calc((100% - var(--bh-space) * 2) * .6), 768px);
    gap: clamp(12px, 1.8vw, 38.4px);
}
.bh-project .bh-animation .bh-band { padding-top: clamp(78px, 8.4vw, 144px); }
.bh-project .bh-play { font-size: 32px; gap: 8px; }
.bh-project .bh-play small { font-size: 11px; }
.bh-project .bh-prevnext { margin-top: 28px; }

@media (max-width: 767px) {
    .bh-project { --bh-space: 18px; padding-top: 14px; }
    .bh-project .bh-top { margin-bottom: 16px; }
    .bh-project .bh-intro h1 { font-size: clamp(32px, 7.2vw, 54px); }
    .bh-project .bh-challenge { font-size: clamp(30px, 7vw, 50px); }
    .bh-project .bh-collage { padding-left: 7.2px; padding-right: 7.2px; gap: 7.2px; }
    .bh-project .bh-collage-column { gap: 9.6px; }
    .bh-project .bh-collage-middle { transform: translateY(-7.2px); }
    .bh-project .bh-band { padding-top: 48px; padding-bottom: 22px; margin-top: -21px; }
    .bh-project .bh-band h2 { font-size: clamp(22px, 4.5vw, 32px); }
    .bh-project .bh-video-grid { gap: 9.6px; }
    .bh-project .bh-animation .bh-band { padding-top: 54px; }
    .bh-project .bh-play { font-size: 24px; }
    .bh-project .bh-play small { font-size: 9px; letter-spacing: 0; }
}

/* Miniatura cuadrada más pequeña y alineada con la base de la vertical. */
.bh-project .bh-video-grid {
    grid-template-rows: auto 1fr;
}

.bh-project .bh-card-square {
    width: calc(75.150966% - clamp(12px, 1.8vw, 38.4px));
    max-width: 100%;
    align-self: end;
    justify-self: start;
}

@media (max-width: 767px) {
    .bh-project .bh-card-square {
        width: 80%;
    }
}

/* Mantener el logo y el botón por encima del menú, como en la home. */
.bh-project .bh-top {
    position: relative;
    z-index: 1002;
}

.bh-project .bh-top .monogram {
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 1003;
}

.bh-project .bh-top .monogram img.psg-logo {
    display: block;
    width: 90px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(0);
}

.bh-project .bh-top:has(.hamb.is-active) .monogram img.psg-logo {
    filter: brightness(0) invert(1);
}

.bh-project .bh-top .hamb {
    position: relative;
    z-index: 1003;
}

.bh-project .bh-top .hamb i {
    transform-origin: center;
    transition: transform 550ms cubic-bezier(.16, 1, .3, 1), opacity 200ms;
}

.bh-project .bh-top .hamb.is-active i:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.bh-project .bh-top .hamb.is-active i:nth-child(2) {
    opacity: 0;
}

.bh-project .bh-top .hamb.is-active i:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .bh-project .bh-top .hamb i { transition-duration: .01ms; }
}

/* Mantener los últimos ajustes solicitados de móvil y visor. */
@media (max-width: 767px) {
 .bh-project .bh-collage, .bh-project .bh-video-grid { width:100%; max-width:none; padding-left:0; padding-right:0; margin-left:0; margin-right:0; }
 .bh-project .bh-chart { width:100%; max-width:none; }
}
@media (min-width: 768px) {
 dialog.bh-modal::backdrop { background:rgba(0,0,0,.8); }
 .bh-modal .bh-modal-panel { padding:16px; background:#161616; border:1px solid #555; border-radius:6px; box-shadow:0 20px 70px rgba(0,0,0,.5); }
 .bh-modal video.bh-player { width:auto !important; height:auto !important; max-width:calc((100vw - 40px) * .6) !important; max-height:calc((100dvh - 120px) * .6) !important; object-fit:contain; }
}