/* ═══════════════════════════════════════════
   1. RESET E CONFIGURAÇÕES BASE
   ═══════════════════════════════════════════ */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body, html {
    font-family: 'Geist', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.8s ease;
    cursor: none; 
}

a, button { 
    cursor: none; 
}

/* ── SKIP LINK (acessibilidade) ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #E0FF22;
    color: #050505;
    padding: 1rem 1.5rem;
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    z-index: 10000;
    text-decoration: none;
    transition: top 0.2s ease;
    cursor: auto;
}
.skip-link:focus {
    top: 0;
}

.app-container {
    display: flex;
    width: 100vw;
}

/* ── SCROLL INVISÍVEL DA DIREITA ── */
.right-scroll {
    width: 50vw;
    margin-left: 50vw;
}

.scroll-section { 
    height: 100vh; 
}

/* ═══════════════════════════════════════════
   2. INTERFACES GLOBAIS (CURSOR & AURORA)
   ═══════════════════════════════════════════ */
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 16px; height: 16px;
    background-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference; 
    opacity: 0;
    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, opacity 0.2s ease;
}

.cursor-hover {
    width: 8px; 
    height: 8px;
    background-color: #fff;
    border: none;
}

/* ── AURORA BLOBS ── */
.bg-aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    transition: opacity 0.8s ease;
}

.blob {
    position: absolute;
    border-radius: 50%;
    transition: transform 1.4s cubic-bezier(0.2,0.8,0.2,1);
    will-change: transform;
}

.blob-1 {
    width: 55vw; height: 55vw;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    top: -20vw; left: -15vw;
    opacity: 0.45;
    animation: drift-1 28s ease-in-out infinite alternate;
}

.blob-2 {
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, #2563eb 0%, transparent 70%);
    bottom: -18vw; right: -12vw;
    opacity: 0.4;
    animation: drift-2 34s ease-in-out infinite alternate;
}

.blob-3 {
    width: 30vw; height: 30vw;
    background: radial-gradient(circle, #db2777 0%, transparent 70%);
    top: 35%; left: 55%;
    opacity: 0.2;
    animation: drift-3 22s ease-in-out infinite alternate;
}

.blob-4 {
    width: 38vw; height: 38vw;
    background: radial-gradient(circle, #0891b2 0%, transparent 70%);
    bottom: 5%; left: -10vw;
    opacity: 0.25;
    animation: drift-4 40s ease-in-out infinite alternate;
}

@keyframes drift-1 { from{transform:translate(0,0) scale(1)} to{transform:translate(8vw,6vw) scale(1.1)} }
@keyframes drift-2 { from{transform:translate(0,0) scale(1)} to{transform:translate(-6vw,-8vw) scale(1.15)} }
@keyframes drift-3 { from{transform:translate(0,0) scale(1)} to{transform:translate(-5vw,7vw) scale(0.9)} }
@keyframes drift-4 { from{transform:translate(0,0) scale(1)} to{transform:translate(10vw,-5vw) scale(1.2)} }

/* ═══════════════════════════════════════════
   3. HEADER FIXO E NAVEGAÇÃO
   ═══════════════════════════════════════════ */
.pf-header, .main-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    background: transparent !important;
    /* Força uma camada de composição GPU própria: evita que headers fixos com
       fundo semi-opaco mostrem conteúdo "colado" da posição de scroll anterior
       (bug conhecido em Chrome/Safari mobile durante scroll rápido). */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.nav-small-logo {
    width: 52px; height: 52px;
    filter: invert(1);
    transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}

.nav-logo-link {
    pointer-events: auto !important;
    position: relative;
    z-index: 9999 !important;
}

.nav-logo-link:hover .nav-small-logo { 
    transform: rotate(90deg); 
}

.pf-nav, .header-nav { 
    display: flex; 
    align-items: baseline;
    gap: 2rem; 
    pointer-events: auto;
}

.lang-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Geist', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: inherit;
    cursor: pointer;
    vertical-align: baseline;
}
.lang-toggle-pt, .lang-toggle-en { opacity: 1; transition: opacity 0.3s ease; }
.lang-toggle-en { opacity: 0.45; }
.lang-toggle-sep { opacity: 0.35; font-weight: 400; }
.lang-toggle--en .lang-toggle-pt { opacity: 0.45; }
.lang-toggle--en .lang-toggle-en { opacity: 1; }
body.dark-theme .lang-toggle { color: #FFFFFF; }

.pf-nav .nav-link, .header-nav .nav-link {
    font-size: 0.78rem; 
    font-weight: 500;
    letter-spacing: 0.1em; 
    text-transform: uppercase;
    color: #000; 
    text-decoration: none;
    opacity: 0.7; 
    position: relative;
    transition: opacity 0.3s ease, color 0.8s ease;
}

.pf-nav .nav-link::after, .header-nav .nav-link::after {
    content: ''; 
    position: absolute;
    bottom: -3px; left: 0; width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0); 
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.25,1,0.5,1);
}

.pf-nav .nav-link:hover, .header-nav .nav-link:hover { 
    opacity: 1; 
}

.pf-nav .nav-link:hover::after, .header-nav .nav-link:hover::after { 
    transform: scaleX(1); 
}

/* ═══════════════════════════════════════════
   4. ESQUERDA: ANIMAÇÃO CINEMÁTICA DO LOGO
   ═══════════════════════════════════════════ */
.left-fixed {
    position: fixed;
    top: 0; left: 0;
    width: 50vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none; 
}

.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticky-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 480px; 
    transition: filter 0.6s ease; 
    z-index: 15;
    will-change: transform;
}

.logo-branco {
    filter: invert(1) brightness(2);
}

/* ═══════════════════════════════════════════
   5. DIREITA: SISTEMA DE BLOCO EDITORIAL
   ═══════════════════════════════════════════ */
.right-display {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.text-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding-left: calc(25vw + 230px) !important; 
    padding-right: 4vw;
}

.slide-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    text-align: left;
    margin-left: 0 !important;
    max-width: 650px; 
    z-index: 20;
}

.slide-number, .slide-tags, .slide-brief {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-number {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-bottom: 0.5rem;
}

.slide-tags {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.slide-brief {
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 400;
    margin-top: 1.5rem;
    max-width: 28em; 
}

/* Layout partilhado por .cta-pill — aqui só a reveal-on-scroll (opacity)
   e o cursor específicos desta secção. */
.slide-cta {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 2rem;
    cursor: none;
}

.slide-title {
    font-size: 6.5vw !important; 
    font-weight: 500;
    text-transform: uppercase;
    line-height: 0.95; 
    letter-spacing: -0.04em;
    white-space: nowrap; 
    margin: 0;
}

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(80px); 
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                opacity 0.8s ease, 
                color 0.8s ease;
}
/* Ao carregar a pagina, o IntersectionObserver que decide qual slide esta
   ativo pode disparar 2-3 vezes em sequencia muito rapida enquanto calibra
   a posicao inicial (ex: corrige de "slide 0" para o slide onde o scroll
   realmente estava). Cada chamada arranca uma transicao de 0.8s nos
   caracteres -- se isso acontecer com titulos diferentes quase ao mesmo
   tempo, via-se os dois textos misturados a meio da transicao. Anulamos a
   transicao so nesta janela inicial (a classe e removida pelo JS pouco
   depois), para qualquer correcao acontecer instantaneamente em vez de
   com crossfade visivel. */
body:not(.hero-ready) .char { transition: none !important; }

.char-in         { opacity: 1; transform: translateY(0); }
.char-out-top    { opacity: 0; transform: translateY(-80px); }
.char-out-bottom { opacity: 0; transform: translateY(80px); }

/* ═══════════════════════════════════════════
   6. INTERFACES DE RODAPÉ (1º FRAME)
   ═══════════════════════════════════════════ */
.home-footer {
    position: fixed;
    bottom: 2.5rem;
    left: 0;
    width: 100vw;
    padding: 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-first-slide .home-footer {
    opacity: 1;
    pointer-events: auto;
}

.home-footer-left {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.5s ease;
}

.home-footer .scroll-hint {
    position: static;
    transform: none;
    padding-left: 0;
    align-items: flex-end;
    pointer-events: auto;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.scroll-hint-text {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-footer .scroll-hint .scroll-hint-icon {
    animation: hint-bounce 1.6s ease-in-out infinite;
}

@keyframes hint-bounce {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(5px); }
}

.home-footer-left, .scroll-hint-text, .scroll-hint .scroll-hint-icon {
    color: #050505;
    transition: color 0.6s ease;
}
body.dark-theme .home-footer-left, 
body.dark-theme .scroll-hint-text, 
body.dark-theme .scroll-hint .scroll-hint-icon {
    color: #FFFFFF;
}

/* ═══════════════════════════════════════════
   7. PÁGINA PORTFÓLIO & EDITORIAL LIST
   ═══════════════════════════════════════════ */
:root {
    --indigo:     #3730a3;
    --white:      #FFFFFF;
    --white-dim:  rgba(255,255,255,0.65);
    --white-line: rgba(255,255,255,0.12);
}

.page-social-media {
    background-color: var(--indigo);
    color: var(--white);
    min-height: 100vh;
    cursor: none;
    overflow-x: hidden;
}

.floating-img {
    position: fixed;
    top: 0; left: 0;
    width: 18vw; 
    max-width: 260px; 
    aspect-ratio: 9 / 19; 
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: transform;
    overflow: hidden;
    clip-path: inset(100% 0 0 0);
}

.floating-img.visible {
    opacity: 1;
    clip-path: inset(0% 0 0 0);
    transition: opacity 0.4s ease, clip-path 0.6s cubic-bezier(0.2,0.8,0.2,1);
}

.floating-img img {
    width: 100%; 
    height: 100%;
    object-fit: contain; 
    display: block;
}

.pf-main {
    position: relative;
    z-index: 1;
    padding: 18vh 8vw 12vh 8vw;
}

.pf-page-header {
    margin-bottom: 6vh;
    animation: header-in 0.9s cubic-bezier(0.2,0.8,0.2,1) both;
}

@keyframes header-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-eyebrow {
    display: block;
    font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--white-dim); margin-bottom: 0.75rem;
}

.pf-title {
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 800; text-transform: uppercase;
    letter-spacing: -0.04em; line-height: 0.92;
    color: var(--white);
}

.project-list {
    border-top: 1px solid var(--white-line);
    margin-top: 4vh;
}

.project-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--white-line);
    text-decoration: none;
    color: var(--white);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.2,0.8,0.2,1), transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}

/* Wrappers só usados para agrupar em 2 linhas no mobile (ver media query);
   em desktop ficam "invisíveis" ao grid, os filhos continuam a ser items
   diretos do grid de 5 colunas acima. */
.row-line1, .row-line2 { display: contents; }

.project-row::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.04);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}

.project-row:hover::before { transform: scaleX(1); }
.row--visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .project-row { transition: none; opacity: 1; transform: none; }
    .floating-img { transition: none; }
}

/* ═══════════════════════════════════════════
   CTA PILL — desenho único partilhado por TODOS os
   CTAs do site (hero, secção "sobre", linhas de
   serviços, painel de galeria, formulário de
   contacto). Mesmo padding/tamanho/seta em todo o
   lado — só a cor herda do contexto (currentColor).
   ═══════════════════════════════════════════ */
.cta-pill {
    display: inline-flex; align-items: center; gap: .6rem; width: fit-content;
    font-family: 'Geist', sans-serif;
    font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: inherit; text-decoration: none;
    background: transparent;
    border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
    border-radius: 999px;
    padding: 1rem 2.2rem;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, gap .3s ease, transform .2s ease;
}
.cta-pill:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; gap: 1rem; }
.cta-pill:active { transform: scale(.98); }
.cta-pill svg { flex-shrink: 0; }

/* Índice (01, 02...) e categoria (Social Media) removidos da vista —
   redundantes com o título da página e sem adicionar informação útil. */
.row-index, .row-tag { display: none; }

/* Pill de CTA — tier 1 (badges/links pequenos). Mesmo desenho em todo o
   site: fundo transparente, borda 1px, cantos totalmente arredondados,
   texto bold uppercase. Usado em .row-badge, .slide-cta, .servico-arrow. */
.row-badge {
    grid-column: 2;
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: .5rem 1.1rem; border-radius: 999px; white-space: nowrap; justify-self: start;
    color: #FFFFFF; background: transparent; border: 1px solid rgba(255,255,255,.5);
    transition: background .25s ease, border-color .25s ease;
}
.project-row:hover .row-badge { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.85); }

.row-name {
    grid-column: 1;
    font-size: clamp(1.4rem, 2.8vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.project-row:hover .row-name { transform: translateX(12px); }

.row-arrow {
    grid-column: 3;
    font-size: 1.4rem;
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.project-row:hover .row-arrow { opacity: 1; transform: translate(0, 0); }

/* ═══════════════════════════════════════════
   8. MOBILE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    body, html, a, button { cursor: auto; }
    .custom-cursor { display: none; }

    /* Header sempre por cima de tudo em mobile */
    .pf-header, .main-header {
        padding: 1.4rem 1.5rem;
        z-index: 9998;
        background: transparent !important;
    }
    /* Fundo opaco no header em mobile (mesmo efeito do servicos.html) para o
       menu ficar sempre legível ao fazer scroll — em todas as páginas exceto
       a index.html, que mantém o header transparente sobre o logo/hero.
       :not(.page-index) é necessário porque a index.html também alterna a
       classe "dark-theme" no body via JS (para a cor do texto por secção),
       o que sem esta exclusão fazia o header ficar preto sobre qualquer
       secção clara/colorida. */
    body.dark-theme:not(.page-index) .pf-header { background: rgba(5,5,5,.97) !important; }
    .page-social-media .pf-header { background: rgba(55,48,163,.97) !important; }

    .nav-desktop { display: none !important; }

    /* Botão MENU sempre branco em mobile */
    .menu-btn {
        display: block;
        background: none;
        border: none;
        font-family: 'Geist', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #FFFFFF;
        padding: 0.4rem 0;
        cursor: pointer;
    }

    .left-fixed { width: 100vw; height: 100vh; align-items: flex-start; justify-content: flex-start; }
    .logo-wrapper { position: absolute; top: -10vw; left: -15vw; }
    .sticky-logo { transition: filter 0.6s ease; width: 65vw; }
    .home-footer {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        bottom: 2rem; padding: 0; gap: 0.5rem;
    }
    .home-footer .scroll-hint { align-items: center; }
    .right-display { left: 0; top: 0; width: 100vw; height: 100vh; }
    .text-slide { align-items: flex-end; padding-left: 2rem !important; padding-right: 2rem !important; }
    .slide-content { margin-left: 0 !important; padding-bottom: 6rem; max-width: 100%; width: 100%; }
    /* .portfolio-link é inline-block por defeito (cresce ao tamanho do texto), o que
       fazia o h1 medir-se sempre contra o próprio conteúdo em vez do ecrã disponível
       — por isso o encolhimento automático (fit-text.js) nunca detetava overflow real
       em títulos longos como MERCHANDISING. Ao torná-lo bloco a 100%, o h1 passa a
       medir-se corretamente contra a largura real do ecrã. */
    .portfolio-link { display: block; width: 100%; }
    .slide-title { font-size: 14vw !important; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
    .right-scroll { width: 100vw; margin-left: 0; }
    .pf-main { padding: 16vh 5vw 8vw 5vw; }
    /* Lista de projetos em mobile: cartões em vez de linhas de grid.
       O grid de 1 linha (índice + nome + badge + seta) espremia o @handle
       contra o botão, obrigando o texto a encolher demasiado e ficava
       visualmente pobre. Cada projeto é um cartão com 2 zonas (via
       .row-line2, display:contents em desktop) — índice e categoria
       ficam escondidos em mobile por serem repetitivos/redundantes:
       — topo: o @handle, grande, é o único protagonista do cartão
       — fundo: badge + botão de seta circular, alinhados nas pontas */
    .project-list { border-top: none; margin-top: 3vh; }
    .project-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.5rem 1.3rem;
        margin-bottom: .9rem;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 20px;
        background: rgba(255,255,255,.035);
        transition: opacity 0.6s cubic-bezier(0.2,0.8,0.2,1), transform 0.6s cubic-bezier(0.2,0.8,0.2,1), background 0.25s ease, border-color 0.25s ease;
    }
    .project-row:last-child { margin-bottom: 0; }
    .project-row:active { background: rgba(255,255,255,.065); border-color: rgba(255,255,255,.18); }

    .row-line1 { display: none; }

    .row-name { min-width: 0; overflow-wrap: normal; font-size: 1.6rem; line-height: 1.2; }

    .row-line2 { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .row-badge { justify-self: auto; }
    .row-arrow {
        flex-shrink: 0;
        width: 2.5rem; height: 2.5rem;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
        font-size: 1rem;
        opacity: 1 !important; transform: none !important;
    }

    .floating-img { display: none; }
    .slide-cta { margin-top: 1.4rem; }
}

@media (min-width: 769px) {
    .menu-btn { display: none !important; }
}

/* ── OVERLAY FULL-SCREEN ── */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8vw 6vh;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.5s cubic-bezier(0.2,0.8,0.2,1),
                clip-path 0.5s cubic-bezier(0.2,0.8,0.2,1);
}

.mobile-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0 0 0% 0);
}

.mobile-overlay__close {
    position: absolute;
    top: 1.4rem; right: 1.5rem;
    background: none; border: none;
    font-family: 'Geist', sans-serif;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    cursor: pointer; padding: 0.4rem 0;
    transition: color 0.25s ease;
}
.mobile-overlay__close:hover { color: #FFFFFF; }

.mobile-overlay__nav {
    display: flex;
    flex-direction: column;
}

.mob-link {
    font-size: clamp(3rem, 15vw, 6.5rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0.4rem 0;
    display: block;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease,
                transform 0.5s cubic-bezier(0.2,0.8,0.2,1),
                color 0.25s ease;
}

.mobile-overlay.is-open .mob-link { opacity: 1; transform: translateY(0); }
.mobile-overlay.is-open .mob-link:nth-child(1) { transition-delay: 0.06s; }
.mobile-overlay.is-open .mob-link:nth-child(2) { transition-delay: 0.12s; }
.mobile-overlay.is-open .mob-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-overlay.is-open .mob-link:nth-child(4) { transition-delay: 0.24s; }

.mob-link:hover { color: #E0FF22; }

.mobile-overlay__footer {
    position: absolute;
    bottom: 3rem; left: 8vw; right: 8vw;
    display: flex; gap: 2rem; flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.2rem;
}

.mobile-overlay__footer a {
    font-size: 0.68rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.3); text-decoration: none;
    transition: color 0.25s ease;
}
.mobile-overlay__footer a:hover { color: rgba(255,255,255,0.7); }

/* Logo fica por baixo do footer */
.sticky-logo {
    z-index: 15;
}

.site-footer {
    position: relative;
    z-index: 60; /* acima do sticky-logo (15) e right-display (5) */
}

/* ═══════════════════════════════════════════
   9. EXTENSÕES DA PÁGINA "SOBRE"
   ═══════════════════════════════════════════ */
.page-sobre {
    background-color: #050505;
    color: #FFFFFF;
    min-height: 100vh;
    overflow-x: hidden;
}

.page-sobre .portfolio-header {
    justify-content: space-between !important;
}
.page-sobre .portfolio-header .nav-link {
    color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════
   10. EFEITOS DE HOVER NOS LINKS DE PORTFÓLIO
   ═══════════════════════════════════════════ */
.portfolio-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    cursor: none; 
    margin: 0.5rem 0;
}

.portfolio-link .slide-title {
    margin: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-link:hover .slide-title .char {
    color: var(--hover-color, #FF3300) !important;
    transition: color 0.2s ease !important;
}

.portfolio-link:hover .slide-title {
    transform: translateX(8px);
}

.slide-title.cta-active .char {
    color: var(--hover-color, #FF3300) !important;
    transition: color 0.2s ease !important;
}

.slide-title.cta-active {
    transform: translateX(8px);
}

.page-social-media .pf-nav .nav-link,
.page-social-media .header-nav .nav-link {
    color: #FFFFFF !important;
}

.page-social-media .pf-nav .nav-link::after,
.page-social-media .header-nav .nav-link::after {
    background: #FFFFFF !important;
}

/* ═══════════════════════════════════════════
   11. CONTROLO DE TEMA DINÂMICO
   ═══════════════════════════════════════════ */
.pf-nav .nav-link, 
.header-nav .nav-link {
    color: #050505;
    transition: opacity 0.3s ease, color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-nav .nav-link::after, 
.header-nav .nav-link::after {
    background: #050505;
}

body.dark-theme .pf-nav .nav-link, 
body.dark-theme .header-nav .nav-link {
    color: #FFFFFF !important;
}
body.dark-theme .pf-nav .nav-link::after, 
body.dark-theme .header-nav .nav-link::after {
    background: #FFFFFF !important;
}

/* ═══════════════════════════════════════════
   COOKIE BANNER
   ═══════════════════════════════════════════ */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1.4rem 2.4rem;
    background: rgba(5,5,5,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.12);
    font-family: 'Geist', sans-serif;
    color: #FFFFFF;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .5s cubic-bezier(0.2,0.8,0.2,1), opacity .5s ease;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner__text {
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(255,255,255,.75);
    max-width: 62ch;
    margin: 0;
}
.cookie-banner__text a { color: #E0FF22; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.cookie-banner__btn {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap; border-radius: 999px; padding: .7rem 1.5rem;
    cursor: pointer; border: 1px solid rgba(255,255,255,.4);
    background: transparent; color: #FFFFFF; font-family: inherit;
    transition: background .25s ease, border-color .25s ease;
}
.cookie-banner__btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.cookie-banner__btn--accept { border-color: #E0FF22; color: #E0FF22; }
.cookie-banner__btn--accept:hover { background: rgba(224,255,34,.12); border-color: #E0FF22; }
@media (max-width: 768px) {
    .cookie-banner { padding: 1.3rem 1.5rem; gap: 1.2rem; }
    .cookie-banner__text { font-size: .78rem; max-width: none; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__btn { flex: 1; justify-content: center; padding: .8rem 1rem; }
}


/* ═══════════════════════════════════════════
   PÁGINAS LEGAIS (Privacidade / Cookies)
   ═══════════════════════════════════════════ */
.page-legal { background-color: #050505; color: #FFFFFF; min-height: 100vh; overflow-x: hidden; }
.page-legal .pf-header { background: linear-gradient(to bottom, rgba(5,5,5,.95) 0%, transparent 100%); }
.page-legal .nav-small-logo { filter: invert(1); }
.page-legal .pf-nav .nav-link { color: #FFFFFF; }
.page-legal .pf-nav .nav-link::after { background: #FFFFFF; }
.page-legal .menu-btn { color: #FFFFFF; }
.page-legal .bg-aurora { opacity: .35; }
.page-legal .blob-1 { background: radial-gradient(circle, #7c3aed 0%, transparent 70%); }
.page-legal .blob-2 { background: radial-gradient(circle, #3730a3 0%, transparent 70%); }

.legal-main { position: relative; z-index: 1; padding: 20vh 8vw 14vh; }
.legal-header { max-width: 62ch; margin: 0 auto 8vh; }
.legal-eyebrow { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 1.2rem; }
.legal-title { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 1.2rem; }
.legal-updated { font-size: .8rem; color: rgba(255,255,255,.45); }

.legal-body { max-width: 62ch; margin: 0 auto; }
.legal-section { padding: 3.2rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.legal-section:first-child { border-top: none; padding-top: 0; }
.legal-section h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; margin: 0 0 1.2rem; color: #E0FF22; }
.legal-section p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0 0 1.1rem; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; transition: color .25s ease; }
.legal-section a:hover { color: #E0FF22; }
.legal-section ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.legal-section li { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.78); margin-bottom: .5rem; }

@media (max-width: 768px) {
    body.page-legal { cursor: auto; }
    .page-legal .custom-cursor { display: none; }
    .page-legal .pf-header { background: rgba(5,5,5,.97) !important; }
    .legal-main { padding: 16vh 6vw 10vh; }
    .legal-section { padding: 2.2rem 0; }
}


/* ═══════════════════════════════════════════
   PAINEL DE GALERIA POR SERVIÇO (partilhado)
   Usado em index.html e servicos.html — cartão
   arredondado, coluna de conteúdo + imagem
   emoldurada (não full-bleed), inspirado em
   referências editoriais com bastante "breathing
   room" e cantos suaves.
   ═══════════════════════════════════════════ */
.service-panel-overlay {
    position: fixed; inset: 0; z-index: 10040;
    background: transparent;
    display: flex; align-items: stretch; justify-content: flex-end;
    padding: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .45s ease;
    cursor: auto;
}
.service-panel-overlay.is-open { opacity: 1; pointer-events: auto; }

.service-panel {
    position: relative;
    width: 80vw; max-width: 1400px;
    height: 100vh; max-height: none;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--panel-accent,#E0FF22) 26%, transparent) 0%, transparent 45%),
        linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 35%, rgba(255,255,255,.08) 100%),
        rgba(20,20,26,.22);
    /* Blur reduzido de 26px para 16px — muito mais barato de compor no GPU,
       visualmente quase idêntico. */
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,.3);
    border-left: 1px solid rgba(255,255,255,.3);
    border-radius: 28px 0 0 28px;
    overflow: hidden;
    box-shadow:
        0 50px 120px rgba(0,0,0,.5),
        0 20px 60px -10px color-mix(in srgb, var(--panel-accent,#E0FF22) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 0 60px rgba(255,255,255,.04);
    /* IMPORTANTE: opacity fica sempre a 1, nunca anima. Um painel com
       backdrop-filter "esbate" o próprio blur enquanto a opacity sobe (a
       0.2 de opacity o vidro fosco está genuinamente só 20% visível) — é
       isso que parecia um glitch de "aparece transparente e só depois fica
       fosco". A revelação é feita só por transform (slide a partir de fora
       do ecrã), para o painel estar sempre 100% fosco assim que qualquer
       parte dele é visível. */
    transform: translateX(100%) translateZ(0);
    opacity: 1;
    will-change: transform;
    transition: transform .6s cubic-bezier(0.16,1,0.3,1);
}
.service-panel-overlay.is-open .service-panel { transform: translateX(0) translateZ(0); }

.service-panel__close {
    position: absolute; top: 1.3rem; right: 1.3rem; z-index: 6;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    color: #FFFFFF; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .25s ease, transform .3s ease, border-color .25s ease;
}
.service-panel__close:hover { background: rgba(255,255,255,.24); border-color: var(--panel-accent,#E0FF22); transform: rotate(90deg); }

/* ── Coluna única: título → galeria dupla → descrição → clientes → CTA ── */
.service-panel__content {
    position: relative;
    padding: clamp(1.5rem, 3.4vw, 2.6rem);
    display: flex; flex-direction: column;
    height: 100%; overflow: hidden;
    color: #FFFFFF;
}
.service-panel__title {
    font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 500; text-transform: uppercase;
    line-height: .96; letter-spacing: -.02em; color: #FFFFFF; margin: 0 0 1.1rem;
}

/* ── Galeria: blocos quadrados + glimpse (1/5) do terceiro ── */
.service-panel__gallery-row {
    display: flex; gap: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 1.4rem;
}
.service-panel__tile {
    position: relative; border-radius: 20px; overflow: hidden;
    background: #000;
    aspect-ratio: 1 / 1;
    flex: 0 0 calc((100% - 2rem) / 2.2); /* fallback antes do JS medir o espaço disponível */
}
.service-panel__tile.tile-full { flex: 1 1 100%; aspect-ratio: auto; height: min(34vw, 44vh); }
.service-panel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.service-panel__slide.is-active { opacity: 1; }
.service-panel__slide img, .service-panel__slide video { width: 100%; height: 100%; object-fit: cover; display: block; }

.service-panel__desc {
    font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.65); max-width: 62ch; margin: 0;
}
.service-panel__clients { margin-top: 1.1rem; }
.service-panel__clients-label {
    display: block; font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.4); margin-bottom: .6rem;
}
.service-panel__clients-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .45rem;
    max-width: none;
}
.service-panel__clients-list li {
    font-size: .72rem; color: rgba(255,255,255,.78); line-height: 1;
    padding: .42rem .8rem; border-radius: 999px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
}
.service-panel__clients-list li.is-more {
    background: transparent;
    border-style: dashed;
    color: rgba(255,255,255,.5);
    font-style: italic;
}
.service-panel__footer {
    margin-top: auto; padding-top: 1.1rem;
    display: flex; align-items: center; justify-content: flex-end;
}
/* Layout vem de .cta-pill — aqui só o acabamento "vidro" do painel. */
.service-panel__cta {
    color: #FFFFFF;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.service-panel__cta:hover { background: color-mix(in srgb, var(--panel-accent,#E0FF22) 30%, rgba(255,255,255,.12)); border-color: var(--panel-accent,#E0FF22); }

/* ── Placeholder "em breve": aurora contida no bloco de galeria ── */
.service-panel__placeholder { position: absolute; inset: 0; z-index: 1; background: #0a0a0a; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.service-panel__placeholder-aurora { position: absolute; inset: 0; overflow: hidden; }
.ppb { position: absolute; border-radius: 50%; filter: blur(1px); }
.ppb-1 { width: 70%; height: 70%; top: -20%; left: -15%; background: radial-gradient(circle, var(--panel-accent,#E0FF22) 0%, transparent 70%); opacity: .22; animation: drift-1 26s ease-in-out infinite alternate; }
.ppb-2 { width: 60%; height: 60%; bottom: -18%; right: -14%; background: radial-gradient(circle, #7c3aed 0%, transparent 70%); opacity: .3; animation: drift-2 32s ease-in-out infinite alternate; }
.ppb-3 { width: 42%; height: 42%; top: 32%; left: 52%; background: radial-gradient(circle, #2563eb 0%, transparent 70%); opacity: .2; animation: drift-3 22s ease-in-out infinite alternate; }
.service-panel__placeholder-mark {
    position: relative; z-index: 2;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 500; text-transform: uppercase;
    line-height: .95; letter-spacing: -.01em; text-align: center;
    color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.42);
}

@media (max-width: 900px) {
    .service-panel-overlay { padding: 0; }
    .service-panel {
        width: 100%; height: 100%; max-height: none; border-radius: 0;
        /* Em mobile o painel cobre o ecrã inteiro — um blur de fundo a essa
           escala é o pior caso possível para o GPU (é a causa principal do
           atraso "fica fosco devagar"). Em vez de blur, deixamos a cor da
           página transparecer através de um fundo semitransparente (sem
           blur o custo é praticamente zero) — mantém o encanto do vidro
           colorido sem pagar o preço do blur em ecrã inteiro. A dupla
           abertura de painéis (causa do "texto fantasma") já está resolvida
           à parte, via guarda no JS — por isso voltar a ter transparência
           aqui é seguro. */
        background:
            linear-gradient(160deg, color-mix(in srgb, var(--panel-accent,#E0FF22) 26%, transparent) 0%, transparent 45%),
            linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.06) 100%),
            rgba(14,14,18,.90);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .service-panel__content { padding: 1.4rem 1.2rem 1.6rem; overflow: hidden; }
    .service-panel__gallery-row { gap: .6rem; margin-bottom: 1rem; }
    /* Ecrã estreito: uma única imagem a toda a largura (sem glimpse), a
       preencher todo o espaço vertical sobrante — em vez de 3 blocos
       apertados lado a lado. */
    .service-panel__tile.tile-secondary,
    .service-panel__tile.tile-glimpse { display: none; }
    .service-panel__tile.tile-main { flex: 1 1 100%; aspect-ratio: auto; border-radius: 16px; }
    .service-panel__tile.tile-full { height: min(42vw, 32vh); }
    .service-panel__title { font-size: clamp(1.5rem, 7vw, 2rem); margin-bottom: .8rem; }
    .service-panel__desc { font-size: .82rem; }
    .service-panel__footer { justify-content: flex-start; margin-top: auto; padding-top: .8rem; }
    .service-panel__clients { margin-top: .8rem; }
}