/* ══════════════════════════════════════════════════════════
   Imabox — estilos compartidos de páginas de proyecto
   (header, galería masonry, video hover, badge 360, footer)
   Las posiciones del masonry (#img-*) viven en cada página.
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0e0e0e; color: #fff; font-family: 'Poppins', sans-serif; }
*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ── PROJECT HEADER ── */
.project-header {
    padding: 120px 48px 48px;
    display: flex; align-items: flex-end;
    justify-content: space-between; gap: 32px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    max-width: 1400px; margin: 0 auto;
}
.back-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'aktiv-grotesk', sans-serif;
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); text-decoration: none;
    transition: color 0.2s; margin-bottom: 20px;
}
.back-link:hover { color: #c9a96e; }
.project-eyebrow {
    font-family: 'aktiv-grotesk', sans-serif;
    font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: #c9a96e; margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
}
.project-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: #c9a96e; }
.project-header h1 {
    font-family: 'aktiv-grotesk', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 200; letter-spacing: -0.02em; line-height: 1; color: #fff;
}
.project-header h1 span { color: #c9a96e; }
.project-meta { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.meta-item {
    font-family: 'aktiv-grotesk', sans-serif;
    font-size: 0.7rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.35);
}
.meta-item strong { color: rgba(255,255,255,0.7); font-weight: 400; margin-left: 6px; }

/* ── GALLERY ── */
.gallery-section { padding: 8px; margin-top: 8px; }
.hes-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 18vw;
    gap: 2px;
}
.img { position: relative; overflow: hidden; background: #1a1a1a; cursor: pointer; }
.img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.img:hover img { transform: scale(1.03); }
.img:hover { opacity: 0.88; }

/* ── VIDEO items ── */
.img video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.img.video-item:hover video { opacity: 1; }
.img.video-item img { transition: opacity 0.4s ease; }
.img.video-item:hover img { opacity: 0; }
.video-badge {
    position: absolute; bottom: 12px; left: 12px;
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(201,169,110,0.4);
    padding: 5px 10px; z-index: 5; pointer-events: none; transition: opacity 0.3s;
}
.img.video-item:hover .video-badge { opacity: 0; }
.video-badge i { color: #c9a96e; font-size: 0.7rem; }
.video-badge span {
    font-family: 'aktiv-grotesk', sans-serif;
    font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.8);
}
#noselectgrid { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

/* ── 360 BADGE ── */
.badge-360 {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; z-index: 10;
}
.badge-360-inner {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px 20px; transition: background 0.3s;
}
.badge-360:hover .badge-360-inner { background: none; }
.badge-360-sphere {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid #c9a96e;
    display: flex; align-items: center; justify-content: center;
    color: #c9a96e; font-size: 1.1rem;
    background: rgba(0,0,0,0.35);
    transition: background 0.3s, transform 0.3s;
}
.badge-360:hover .badge-360-sphere { background: rgba(201,169,110,0.2); transform: scale(1.1); }
.badge-360-label {
    font-family: 'aktiv-grotesk', sans-serif;
    font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #c9a96e; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ── FOOTER ── */
footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 28px 48px; display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px;
}
footer .logo { font-family: 'aktiv-grotesk', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
footer p { font-size: 0.7rem; color: rgba(255,255,255,0.18); letter-spacing: 0.08em; }
.footer-social { display: flex; gap: 18px; align-items: center; }
.footer-social a { color: #c9a96e; font-size: 1.15rem; text-decoration: none; transition: opacity 0.2s; }
.footer-social a:hover { opacity: 0.65; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .hes-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 28vw; }
    .hes-gallery > .img { grid-row: auto !important; grid-column: auto !important; }
    .project-header { padding: 100px 24px 36px; }
    .project-meta { text-align: left; }
}
@media (max-width: 600px) {
    .hes-gallery { grid-template-columns: 1fr; grid-auto-rows: 60vw; gap: 3px; }
    .gallery-section { padding: 4px; }
    footer { flex-direction: column; text-align: center; padding: 28px 24px; }
}