@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --line: rgba(0,0,0,.09);
    --gold: #0e8fae;
    --gold-soft: rgba(14,143,174,.10);
    --gold-strong: #0e8fae;
    --fog: #667085;
    --bg-deep: #f7f8fa;
    --bg-panel: #ffffff;
    --ivory: #171a21;
  }

  /* Garante que nunca aparece fundo branco por trás da galeria,
     mesmo antes das fontes/imagens carregarem ou fora da secção.
     (galeria.css só é carregado nesta página, por isso é seguro
     aplicar diretamente ao html/body.) */
  html, body{
    background: var(--bg-deep);
    overflow-x: hidden;
    max-width: 100%;
  }

  .fly-gallery, .fly-gallery *{ box-sizing:border-box; }
  .fly-gallery{
    background: var(--bg-deep);
    color: var(--ivory);
    font-family:'Inter', sans-serif;
    padding: 0;
    border-radius: 34px;
    text-transform: uppercase;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  @media (prefers-reduced-motion: reduce){
    .fly-gallery *{ transition:none !important; animation:none !important; }
  }

  .fly-gallery :focus-visible{
    outline: 1px solid var(--gold);
    outline-offset: 3px;
  }

  /* ============================================
     CABEÇALHO
  ============================================ */
  .fg-head{
    max-width:1600px;
    margin:0 auto;
    padding: 96px 48px 40px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    border-bottom:1px solid var(--line);
    flex-wrap: wrap;
  }
  .fg-eyebrow{
    font-family:'Inter', monospace;
    font-size:.68rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold);
    opacity:.85;
    margin:0 0 18px;
  }
  .fg-title{
    font-family:'Inter', serif;
    font-weight:300;
    font-size:clamp(1.9rem, 3.4vw, 3rem);
    line-height:1.14;
    letter-spacing:-0.01em;
    margin:0;
    color: var(--ivory);
  }
  .fg-title em{
    font-style:italic;
    font-weight:400;
    color:var(--gold);
  }
  .fg-head-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink: 0; }
  .fg-sub{
    max-width:320px;
    text-align:right;
    font-size:.85rem;
    font-weight:300;
    line-height:1.7;
    color:var(--fog);
    margin:0;
  }
  .fg-tally{
    font-family:'Inter', monospace;
    font-size:.66rem;
    letter-spacing:.1em;
    color:var(--fog);
    opacity:.7;
    display:flex;
    gap:14px;
    flex-wrap: wrap;
  }
  .fg-tally span i{ color:var(--gold); margin-right:5px; opacity:.8; }

  /* ============================================
     CORPO — quadro de diretório + palco
  ============================================ */
  .fg-body{
    max-width:1600px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 260px 1fr;
    min-width: 0;
  }

  /* --- quadro de diretório (estilo placard de hotel) --- */
  .fg-directory{
    border-right:1px solid var(--line);
    padding: 8px 0;
    min-width: 0;
  }
  .fg-directory-label{
    font-family:'Inter', monospace;
    font-size:.62rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--fog);
    opacity:.6;
    padding: 22px 32px 14px;
  }
  .fg-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:16px;
    padding: 16px 32px;
    background:transparent;
    border:none;
    border-left:2px solid transparent;
    cursor:pointer;
    text-align:left;
    color: var(--fog);
    transition: background .25s ease, border-color .25s ease, color .25s ease;
    position:relative;
  }
  .fg-item:hover{
    background: rgba(0,0,0,.025);
    color: var(--ivory);
  }
  .fg-item.active{
    background: var(--gold-soft);
    border-left-color: var(--gold);
    color: var(--ivory);
  }
  .fg-item-icon{
    width:34px; height:34px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.035);
    border:1px solid var(--line);
    flex-shrink:0;
    font-size:.8rem;
    color: var(--fog);
    transition: all .25s ease;
  }
  .fg-item.active .fg-item-icon{
    background: rgba(198,161,91,.16);
    border-color: var(--gold);
    color: var(--gold);
  }
  .fg-item-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .fg-item-name{
    font-family:'Inter', serif;
    font-size:.92rem;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-transform: uppercase;
  }
  .fg-item-floor{
    font-family:'Inter', monospace;
    font-size:.6rem;
    letter-spacing:.08em;
    color: var(--gold);
    opacity:.65;
  }
  .fg-item.active .fg-item-floor{ opacity:1; }
  .fg-item-count{
    margin-left:auto;
    font-family:'Inter', monospace;
    font-size:.66rem;
    color: var(--fog);
    opacity:.5;
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:5px;
  }
  .fg-item-count i{ font-size:.6rem; opacity:.8; }

  .fg-item.is-video-cat{ border-bottom:1px dashed var(--line); margin-bottom:6px; padding-bottom:20px; }

  /* --- chips mobile (substituem o quadro em ecrãs pequenos) --- */
  .fg-chips{ display:none; }

  /* --- palco --- */
  .fg-stage{ padding: 0 0 0 36px; min-width: 0; }

  .fg-hero{
    position:relative;
    margin-top: 22px;
    width:100%;
    height: clamp(240px, 44vw, 560px);
    border-radius: 2px;
    overflow:hidden;
    cursor: zoom-in;
    background: var(--bg-deep);
  }
  .fg-hero-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transition: opacity .5s ease;
  }
  .fg-hero-img.show{ opacity:1; }
  .fg-hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(5,7,12,0) 62%, rgba(5,7,12,.5) 100%);
    pointer-events:none;
  }
  .fg-hero-info{
    position:absolute; left:28px; bottom:22px; right:28px;
    display:flex; justify-content:space-between; align-items:flex-end;
    gap: 12px;
    z-index:2;
  }
  .fg-hero-name{
    font-family:'Inter', serif;
    font-weight:400;
    font-size:1.3rem;
    color:#fff;
    margin:0 0 4px;
    overflow-wrap: anywhere;
  }
  .fg-hero-floor{
    font-family:'Inter', monospace;
    font-size:.64rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color: var(--gold);
    opacity:.85;
  }
  .fg-hero-expand{
    width:40px; height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background: rgba(5,7,12,.4);
    backdrop-filter: blur(6px);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:.75rem;
    flex-shrink:0;
  }

  /* --- setas de navegação do slide (hero) — sempre visíveis --- */
  .fg-hero-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:5;
    width:44px; height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background: rgba(5,7,12,.55);
    backdrop-filter: blur(6px);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    opacity:1;
    transition: background .2s ease, border-color .2s ease;
  }
  .fg-hero-nav:hover{ background: rgba(82,210,237,.28); border-color: var(--gold); }
  .fg-hero-prev{ left:20px; }
  .fg-hero-next{ right:20px; }

  /* --- pontos do slide (hero) --- */
  .fg-hero-dots{
    position:absolute; top:20px; left:50%; transform:translateX(-50%);
    z-index:3;
    display:flex; gap:7px;
    max-width: calc(100% - 140px);
    overflow-x: auto;
  }
  .fg-hero-dot{
    width:7px; height:7px;
    border-radius:50%;
    background: rgba(255,255,255,.35);
    cursor:pointer;
    transition: background .2s ease, transform .2s ease;
    flex-shrink: 0;
  }
  .fg-hero-dot:hover{ background: rgba(255,255,255,.6); }
  .fg-hero-dot.active{ background: var(--gold); transform: scale(1.25); }

  /* --- indicadores de vídeo no palco --- */
  .fg-hero-tag{
    position:absolute; top:20px; left:20px; z-index:3;
    display:flex; align-items:center; gap:7px;
    padding:7px 12px;
    border-radius:20px;
    background: rgba(5,7,12,.55);
    border:1px solid rgba(198,161,91,.4);
    backdrop-filter: blur(6px);
    font-family:'Inter', monospace;
    font-size:.62rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color: var(--gold);
  }
  .fg-hero-tag i{ font-size:.6rem; }
  .fg-hero-duration{
    position:absolute; top:20px; right:20px; z-index:3;
    padding:6px 10px;
    border-radius:4px;
    background: rgba(5,7,12,.55);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    font-family:'Inter', monospace;
    font-size:.66rem;
    letter-spacing:.04em;
    color:#fff;
  }
  .fg-hero-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:3;
    width:64px; height:64px;
    border-radius:50%;
    background: var(--gold);
    display:flex; align-items:center; justify-content:center;
    color: #fff;
    font-size:1.1rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 12px 30px rgba(0,0,0,.35);
    transition: transform .2s ease;
  }
  .fg-hero:hover .fg-hero-play{ transform:translate(-50%,-50%) scale(1.06); }
  .fg-hero-play i{ margin-left:3px; }

  /* --- filme de miniaturas --- */
  .fg-filmstrip{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding: 16px 0 28px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .fg-filmstrip::-webkit-scrollbar{ height:4px; }
  .fg-filmstrip::-webkit-scrollbar-thumb{ background: var(--line); }

  .fg-thumb{
    position:relative;
    flex: 0 0 auto;
    width: clamp(120px, 15vw, 180px);
    aspect-ratio: 3 / 2;
    border-radius:2px;
    overflow:hidden;
    cursor:pointer;
    scroll-snap-align:start;
    border:1px solid transparent;
    background: var(--bg-panel);
    transition: border-color .2s ease, opacity .2s ease;
    opacity:.62;
  }
  .fg-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .fg-thumb:hover{ opacity:.9; }
  .fg-thumb.active{ opacity:1; border-color: var(--gold); }

  .fg-thumb-play{
    position:absolute; left:8px; bottom:8px;
    width:22px; height:22px; border-radius:50%;
    background: rgba(5,7,12,.65);
    border:1px solid rgba(198,161,91,.6);
    display:flex; align-items:center; justify-content:center;
    color: var(--gold);
    font-size:.5rem;
  }
  .fg-thumb-play i{ margin-left:1px; }
  .fg-thumb-duration{
    position:absolute; right:6px; top:6px;
    font-family:'Inter', monospace;
    font-size:.56rem;
    padding:3px 6px;
    border-radius:3px;
    background: rgba(5,7,12,.65);
    color:#fff;
  }

  /* --- fallback quando a imagem/vídeo ainda não existe no servidor --- */
  .img-fallback{
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 30% 20%, rgba(14,143,174,.10), transparent 60%),
      linear-gradient(135deg, #eef1f4, #e2e6eb);
  }
  .img-fallback img, .img-fallback video{ display:none; }
  .img-fallback .fg-fallback-icon{
    display:flex !important;
    color: rgba(14,143,174,.55);
  }
  .fg-fallback-icon{ display:none; font-size:1.1rem; }
  .fg-hero .fg-fallback-icon{ font-size:2rem; }

  /* ============================================
     LIGHTBOX
     (setas e botão fechar agora fixos ao viewport,
     por isso funcionam em QUALQUER largura de ecrã,
     em vez de dependerem da largura do frame)
  ============================================ */
  .fg-lightbox{
    position:fixed; inset:0; z-index:999;
    background: rgba(247,248,250,.97);
    display:none;
    align-items:center; justify-content:center;
    padding: clamp(16px, 5vw, 40px);
  }
  .fg-lightbox.open{ display:flex; }
  .fg-lightbox-frame{ position: relative; max-width:1500px; width:100%; text-align:center; }
  .fg-lightbox-img-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    max-height:80vh;
    border-radius:2px;
    overflow:hidden;
    background: var(--bg-deep);
  }
  .fg-lightbox-img-wrap img,
  .fg-lightbox-img-wrap video{ width:100%; height:100%; object-fit:cover; display:block; }
  .fg-lightbox-caption{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top:18px;
    font-family:'Inter', monospace;
    font-size:.7rem;
    letter-spacing:.08em;
    color: var(--fog);
  }
  .fg-lightbox-caption strong{
    font-family:'Inter', serif;
    font-size:.98rem;
    font-weight:500;
    color: var(--ivory);
    letter-spacing:normal;
    text-transform:none;
  }
  .fg-lb-btn{
    position:fixed; top:50%; transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    backdrop-filter: blur(6px);
    color: var(--ivory);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index: 1000;
  }
  .fg-lb-prev{ left: clamp(10px, 3vw, 24px); }
  .fg-lb-next{ right: clamp(10px, 3vw, 24px); }
  .fg-lb-close{
    position:fixed; top: clamp(10px, 3vw, 24px); right: clamp(10px, 3vw, 24px);
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    backdrop-filter: blur(6px);
    color: var(--ivory);
    cursor:pointer;
    z-index: 1000;
  }

  /* ============================================
     RESPONSIVO — ecrãs grandes/desktop estreito
  ============================================ */
  @media (max-width: 1180px){
    .fg-body{ grid-template-columns: 220px 1fr; }
    .fg-stage{ padding: 0 0 0 24px; }
    .fg-directory{ padding: 4px 0; }
    .fg-item{ padding: 12px 20px; gap:12px; }
    .fg-directory-label{ padding: 16px 20px 10px; }
  }

  /* ============================================
     RESPONSIVO — tablet / mobile
  ============================================ */
  @media (max-width: 880px){
    .fg-head{ flex-direction:column; align-items:flex-start; padding:64px 24px 32px; gap:16px; }
    .fg-head-right{ align-items:flex-start; }
    .fg-sub{ text-align:left; max-width: 100%; }
    .fg-body{ grid-template-columns:1fr; }
    .fg-directory{ display:none; }
    .fg-chips{
      display:flex; gap:8px; overflow-x:auto; padding: 18px 24px;
      border-bottom:1px solid var(--line);
      background: var(--bg-deep);
      -webkit-overflow-scrolling: touch;
    }
    .fg-chip{
      flex:0 0 auto;
      font-family:'Inter', monospace;
      font-size:.68rem; letter-spacing:.05em;
      padding:9px 14px; border-radius:20px;
      border:1px solid var(--line);
      background:transparent; color:var(--fog);
      display:flex; align-items:center; gap:6px;
      white-space:nowrap;
    }
    .fg-chip.active{ border-color:var(--gold); color: var(--ivory); background:var(--gold-soft); }
    .fg-stage{ padding: 0 24px; }
    .fg-hero{ height: clamp(200px, 62vw, 340px); }
    .fg-hero-info{ right: 76px; left: 16px; bottom: 14px; }
    .fg-hero-name{ font-size: 1.05rem; }
    .fg-hero-expand{ width:34px; height:34px; }
    .fg-thumb{ width: clamp(96px, 30vw, 140px); }
    .fg-filmstrip{ padding-bottom: 28px; }
    .fg-hero-nav{ width:38px; height:38px; }
    .fg-hero-prev{ left:10px; }
    .fg-hero-next{ right:10px; }
    .fg-hero-play{ width:54px; height:54px; font-size:.95rem; }
  }

  /* ============================================
     RESPONSIVO — telemóveis pequenos
  ============================================ */
  @media (max-width: 480px){
    .fg-head{ padding: 48px 16px 24px; }
    .fg-title{ font-size: clamp(1.4rem, 7vw, 1.8rem); }
    .fg-tally{ gap: 10px; font-size: .6rem; }
    .fg-stage{ padding: 0 16px; }
    .fg-hero{ height: clamp(180px, 68vw, 260px); border-radius: 0; }
    .fg-hero-info{ right: 60px; left: 12px; bottom: 10px; }
    .fg-hero-name{ font-size: .92rem; }
    .fg-hero-floor{ font-size: .58rem; }
    .fg-hero-tag, .fg-hero-duration{ top: 10px; font-size: .58rem; padding: 5px 8px; }
    .fg-hero-tag{ left: 10px; }
    .fg-hero-duration{ right: 10px; }
    .fg-hero-dots{ top: 10px; max-width: calc(100% - 100px); }
    .fg-hero-play{ width:46px; height:46px; }
    .fg-thumb{ width: clamp(84px, 38vw, 120px); }
    .fg-filmstrip{ gap: 8px; }
    .fg-lightbox{ padding: 12px; }
    .fg-lightbox-img-wrap{ aspect-ratio: 4/3; max-height: 70vh; }
    .fg-lb-btn{ width: 38px; height: 38px; }
    .fg-lb-close{ width: 34px; height: 34px; }
    .fg-lightbox-caption{ font-size: .62rem; }
    .fg-lightbox-caption strong{ font-size: .85rem; }
  }