/* =====================================================================
   Fabrizzio Lima — audiovisual, drone FPV e VR
   Dark cinematográfico. O material dele é a cor; a interface é neutra.
   ===================================================================== */

:root {
    --bg:         #0b0b0c;
    --bg-2:       #121214;
    --superficie: #1a1a1d;
    --linha:      rgba(255,255,255,.10);
    --linha-forte:rgba(255,255,255,.20);

    --texto:      #ffffff;
    --texto-2:    #a3a3ab;   /* claro o bastante pra ler sobre o escuro */

    --acao:       #ffffff;   /* CTA: branco. É cinema, não anúncio. */
    --acao-texto: #101012;
    --brasa:      #e9a14b;   /* o dourado do pôr do sol das fotos dele */

    --raio:       16px;
    --raio-g:     24px;
    --easing:     cubic-bezier(.16, 1, .3, 1);

    /* bordas em gradiente — branco vivo virando âmbar e sumindo no escuro.
       Dão a impressão de luz batendo na quina do painel. */
    --borda-gradiente: linear-gradient(135deg,
        rgba(255,255,255,.55) 0%,
        rgba(233,161,75,.42) 32%,
        rgba(255,255,255,.10) 58%,
        rgba(255,255,255,.03) 100%);
    --borda-gradiente-sutil: linear-gradient(135deg,
        rgba(255,255,255,.30) 0%,
        rgba(233,161,75,.20) 40%,
        rgba(255,255,255,.04) 100%);

    --fonte:      'Outfit', system-ui, sans-serif;
    --margem:     clamp(20px, 5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    font-family: var(--fonte);
    background-color: var(--bg);
    color: var(--texto);
    overflow-x: hidden;
    /* a malha herdada do Vectorline/Aura — discreta, só dá textura */
    background-image:
        linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 4rem 4rem;
}

/* =====================================================================
   LANTERNA — a luz âmbar que segue o cursor e ilumina o fundo

   Vive em body::before, atrás de tudo: como as seções não têm fundo próprio,
   a luz atravessa e acende o preto por baixo do texto. Onde há mídia (hero,
   quem sou, acervo), a imagem naturalmente a cobre — e é assim que deve ser:
   lanterna ilumina parede, não fotografia.

   A posição vem de --mx/--my, que o JS persegue com lerp. É o amortecimento
   que dá peso à luz; sem ele, ela cola no cursor e vira um adesivo.
   ===================================================================== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(560px circle at var(--mx, 50%) var(--my, 35%),
            rgba(233,161,75,.13), rgba(233,161,75,.05) 42%, transparent 68%),
        radial-gradient(220px circle at var(--mx, 50%) var(--my, 35%),
            rgba(255,214,160,.07), transparent 70%);
}

img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- tipografia compartilhada ---------- */
.eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--brasa);
    margin-bottom: 18px;
}

.headline {
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 300;           /* leve e grande passa mais autoridade que pesado e médio */
    line-height: 1.05;
    letter-spacing: -.02em;     /* relativo: não gruda texto pequeno */
    margin-bottom: 22px;
}

.subtitle {
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    font-weight: 300;
    color: var(--texto-2);
    line-height: 1.65;
    max-width: 46ch;
    margin-bottom: 32px;
}
.subtitle.centro { margin-inline: auto; text-align: center; }

/* ---------- botões ---------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--acao);
    color: var(--acao-texto);
    padding: 15px 30px;
    border-radius: 100px;
    font-weight: 600;
    font-size: .95rem;
    width: fit-content;
    transition: transform .3s var(--easing), box-shadow .3s var(--easing);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 24px rgba(0,0,0,.35);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 34px rgba(255,255,255,.18);
}
.btn-primary.grande { padding: 18px 40px; font-size: 1.05rem; }
.btn-primary i { width: 18px; height: 18px; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 22px 10px 10px;
    border-radius: 100px;
    border: 1px solid var(--linha-forte);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    font-weight: 500;
    transition: background .3s var(--easing), border-color .3s var(--easing);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }

.play-circulo {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--acao);
    color: var(--acao-texto);
    display: grid;
    place-items: center;
    flex: none;
}
.play-circulo i { width: 16px; height: 16px; margin-left: 2px; }
.play-circulo.grande { width: 62px; height: 62px; }
.play-circulo.grande i { width: 24px; height: 24px; }

/* ---------- glow ---------- */
.glow-radial {
    position: absolute;
    width: min(620px, 90vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(233,161,75,.18) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
    top: 50%; left: 50%;
    translate: -50% -50%;
}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px var(--margem);
    transition: background .4s var(--easing), border-color .4s var(--easing);
    border-bottom: 1px solid transparent;
}
.navbar.rolado {
    background: rgba(12,12,14,.72);
    backdrop-filter: blur(20px);
    border-bottom-color: var(--linha);
}

/* Scrim: no topo do hero o vídeo tem trechos de céu claro e o menu sumia
   dentro deles. Este véu vive atrás do menu e desaparece quando a barra
   ganha o próprio fundo sólido. */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(8,8,9,.75), transparent);
    transition: opacity .4s var(--easing);
}
.navbar.rolado::before { opacity: 0; }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.logo-icon { width: 22px; height: 22px; color: var(--brasa); }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: var(--texto-2); font-size: .95rem; transition: color .3s; }
.nav-links a:hover { color: var(--texto); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texto) !important;
    border: 1px solid var(--linha-forte);
    border-radius: 100px;
    padding: 9px 18px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    transition: background .3s var(--easing);
}
.nav-cta:hover { background: rgba(255,255,255,.14); }
.nav-cta i { width: 16px; height: 16px; }

.nav-burger { display: none; }
.nav-burger i { width: 26px; height: 26px; }

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero {
    position: relative;
    min-height: 100svh;          /* svh: não briga com a barra do navegador no celular */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px var(--margem) 80px;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* o véu existe pra o texto ser legível sobre imagem em movimento */
.hero-veu {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.72) 42%, rgba(11,11,12,.35) 70%, rgba(11,11,12,.6) 100%),
        linear-gradient(to top, var(--bg) 2%, transparent 30%);
}

.hero-conteudo { position: relative; z-index: 2; max-width: 640px; }

.hero-titulo {
    font-size: clamp(2.8rem, 7vw, 5.6rem);
    font-weight: 200;
    line-height: 1.02;
    letter-spacing: -.03em;
    margin-bottom: 26px;
}
.hero-titulo em {
    font-style: normal;
    font-weight: 500;
    /* o "É contar." é a promessa — ela recebe o dourado */
    background: linear-gradient(100deg, var(--brasa), #f6d9a8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub { font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 300; color: #cfcfd6; line-height: 1.65; max-width: 50ch; margin-bottom: 38px; }

.hero-acoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.scroll-indicator {
    position: absolute;
    bottom: 28px; left: 50%;
    translate: -50% 0;
    z-index: 2;
    color: var(--texto-2);
    animation: pulo 2.4s infinite;
}
.scroll-indicator i { width: 24px; height: 24px; }
@keyframes pulo {
    0%, 100% { transform: translateY(0); opacity: .55; }
    50%      { transform: translateY(-8px); opacity: 1; }
}

/* =====================================================================
   SEÇÕES GENÉRICAS
   ===================================================================== */
.section {
    position: relative;
    padding: clamp(80px, 12vh, 140px) var(--margem);
}

.secao-cabecalho {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(40px, 6vh, 68px);
}
.secao-cabecalho .eyebrow { text-align: center; }

.duas-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}
.duas-colunas.invertida .coluna-media { order: -1; }

.lista-provas { list-style: none; margin-bottom: 34px; display: grid; gap: 14px; }
.lista-provas li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--texto-2);
    font-size: .98rem;
    font-weight: 300;
}
.lista-provas i { width: 18px; height: 18px; color: var(--brasa); flex: none; }

/* card de vídeo (showreel) */
.card-video {
    position: relative;
    border-radius: var(--raio-g);
    overflow: hidden;
    /* borda em gradiente: o fundo do padding-box tapa o gradiente por dentro,
       sobrando só a moldura luminosa */
    border: 1px solid transparent;
    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,
        var(--borda-gradiente) border-box;
    aspect-ratio: 16 / 10;
    transition: transform .5s var(--easing), box-shadow .5s var(--easing);
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
    width: 100%;
}
.card-video img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--easing); }
.card-video:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.card-video:hover img { scale: 1.04; }

.card-veu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.12));
}
.card-label { font-weight: 500; letter-spacing: .02em; }

/* foto solta com glow (seção VR) */
.foto-solta { position: relative; display: grid; place-items: center; }
.foto-solta img {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: var(--raio-g);
    border: 1px solid transparent;
    background: var(--borda-gradiente) border-box;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* a foto é de estúdio, com fundo cinza claro: cru, ela abre um buraco
       branco na página escura. Escurecer e dessaturar traz ela pro filme. */
    filter: brightness(.72) contrast(1.08) saturate(.85);
}
/* e uma sombra interna funde a borda da foto com o fundo, em vez de deixar
   o retângulo colado por cima */
.foto-solta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--raio-g);
    pointer-events: none;
    box-shadow: inset 0 0 90px 30px rgba(11,11,12,.75);
}

/* =====================================================================
   CARDS DE PROVA — cada promessa mostra a imagem que a sustenta
   No hover o card cresce (rouba largura dos irmãos) e a mídia entra
   por trás do texto.
   ===================================================================== */
.cards {
    display: flex;
    gap: 16px;
    margin-top: clamp(50px, 8vh, 90px);
    padding-top: 44px;
    border-top: 1px solid var(--linha);
}

.card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;                  /* sem isso o flex-basis não encolhe e o card estoura */
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: var(--raio);
    border: 1px solid transparent;
    background:
        linear-gradient(var(--superficie), var(--superficie)) padding-box,
        var(--borda-gradiente-sutil) border-box;
    cursor: pointer;
    /* o crescimento é o efeito: flex-grow animado */
    transition: flex-grow .65s var(--easing), box-shadow .65s var(--easing);
}

/* o irmão de baixo do mouse cresce; os outros cedem espaço */
.card:hover, .card:focus-visible {
    flex-grow: 2.6;
    box-shadow: 0 26px 60px rgba(0,0,0,.55);
    outline: none;
}
.card:focus-visible { border-color: var(--brasa); }

.card-midia {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    scale: 1.12;
    transition: opacity .7s var(--easing), scale 1.1s var(--easing);
}
.card:hover .card-midia,
.card:focus-visible .card-midia { opacity: 1; scale: 1; }

/* o véu nasce com o card e escurece a mídia o bastante pro texto sobreviver */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,8,9,.92) 12%, rgba(8,8,9,.55) 55%, rgba(8,8,9,.25));
    opacity: 0;
    transition: opacity .7s var(--easing);
}
.card:hover::after, .card:focus-visible::after { opacity: 1; }

.card-corpo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
}
.card-icone {
    width: 24px; height: 24px;
    color: var(--brasa);
    transition: scale .5s var(--easing);
}
.card:hover .card-icone { scale: 1.15; }

.card-titulo { font-size: 1.02rem; font-weight: 600; }
.card-texto {
    font-size: .85rem;
    font-weight: 300;
    color: var(--texto-2);
    line-height: 1.55;
    transition: color .5s var(--easing);
}
.card:hover .card-texto { color: #d8d8de; }

/* Sem movimento: nada cresce e nada desliza, mas o card continua entregando
   a prova — a mídia aparece na hora que o mouse encosta. */
html.sem-movimento .card { transition: none; }
html.sem-movimento .card:hover { flex-grow: 1; }
html.sem-movimento .card-midia,
html.sem-movimento .card::after { transition: none; scale: 1; }

/* =====================================================================
   4. PORTFÓLIO
   ===================================================================== */
/* respiro: a fita precisa terminar antes de o acervo começar, senão os dois
   viram um borrão só — foi o que aconteceu quando estavam colados */
.section-portfolio { padding-bottom: clamp(90px, 14vh, 170px); }

/* A galeria sangra até as bordas da tela: a faixa some pelos lados em vez de
   parar numa margem, que é o que faz parecer fita e não carrossel de site. */
.galeria {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    /* as pontas dissolvem no fundo, em vez de cortarem no seco */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.galeria-fita {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 8px 9px;               /* respiro pro hover não cortar a peça */
    animation: desfilar 64s linear infinite;
}

/* -50% = exatamente uma cópia da lista. Como a fita tem a lista duas vezes,
   ao chegar aqui o desenho é idêntico ao do quadro zero — e o corte some. */
@keyframes desfilar {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* passar o mouse pausa: sem isso, clicar numa peça em movimento é uma caçada */
.galeria:hover .galeria-fita,
.galeria:focus-within .galeria-fita { animation-play-state: paused; }

.peca {
    position: relative;
    overflow: hidden;
    border-radius: var(--raio);
    border: 1px solid transparent;
    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,
        var(--borda-gradiente-sutil) border-box;
    display: block;
    padding: 0;
    transition: transform .5s var(--easing), box-shadow .5s var(--easing);
}
.peca:hover { box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.peca img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--easing); }
.peca:hover { transform: translateY(-4px); }
.peca:hover img { scale: 1.05; }

/* na fita todas as peças têm a MESMA altura; o que muda é a largura, pela
   proporção. Assim a linha de cima e a de baixo ficam retas. */
.peca-larga, .peca-alta {
    height: clamp(240px, 34vh, 340px);
    flex: none;
}
.peca-larga { aspect-ratio: 16 / 10; }
.peca-alta  { aspect-ratio: 3 / 4; }

.peca-veu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
    padding: 22px;
    text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.peca-info { display: flex; flex-direction: column; gap: 3px; }
.peca-info strong { font-weight: 500; font-size: 1rem; }
.peca-info small { font-size: .78rem; color: var(--texto-2); }

/* .peca figcaption, não .peca-foto: as figures perderam aquela classe quando
   o grid virou fita, e a legenda sumia sem avisar. */
.peca figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,.85) 10%, transparent);
}

/* =====================================================================
   5. O ACERVO — o campo infinito, agora numa seção só dele

   A ideia: o portfólio acima é a obra escolhida — nítida, com nome, clicável.
   Aqui embaixo é o arquivo bruto. Escuro, sem cor, guardado. E ele ACENDE
   quando a pessoa passa o mouse: a cor volta, o brilho sobe. É a recompensa
   por mexer, e é o que impede os dois de parecerem o mesmo carrossel.
   ===================================================================== */
.section-acervo {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(80px, 12vh, 140px) var(--margem);
    overflow: hidden;
    isolation: isolate;
}

.acervo-campo {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: grab;
}
.acervo-campo:active { cursor: grabbing; }

/* o arquivo dorme apagado; acender é o prêmio de explorar */
.campo-canvas {
    display: block;
    width: 100%;
    height: 100%;
    filter: saturate(.12) brightness(.38) contrast(1.06);
    transition: filter 1.4s var(--easing);
}
.section-acervo.aceso .campo-canvas {
    filter: saturate(1) brightness(.78) contrast(1);
}

/* A bruma faz três trabalhos: escurece a esquerda pro texto viver, abre uma
   clareira à direita pras fotos aparecerem, e funde topo e base no fundo da
   página — o acervo emerge do preto, não é uma caixa colada nele. */
.acervo-bruma {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            rgba(11,11,12,.97) 0%,
            rgba(11,11,12,.88) 26%,
            rgba(11,11,12,.42) 52%,
            rgba(11,11,12,.30) 72%,
            rgba(11,11,12,.72) 100%),
        linear-gradient(to bottom,
            var(--bg) 0%, transparent 16%,
            transparent 84%, var(--bg) 100%);
    transition: opacity 1.4s var(--easing);
}
/* com o acervo aceso, a bruma recua um pouco e deixa mais imagem passar */
.section-acervo.aceso .acervo-bruma { opacity: .82; }

/* ---------- o bloco de vidro ---------- */
.acervo-vidro {
    position: relative;
    z-index: 2;
    max-width: 540px;
    padding: clamp(28px, 3vw, 44px);
    border-radius: var(--raio-g);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(20,20,23,.62), rgba(11,11,12,.55)) padding-box,
        var(--borda-gradiente) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 40px 90px rgba(0,0,0,.6);
}

.acervo-titulo {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 200;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: 20px;
}
.acervo-vidro .subtitle { margin-bottom: 30px; }

.acervo-acoes {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.acervo-dica {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 26px;
    font-size: .78rem;
    color: var(--texto-2);
    transition: opacity .8s var(--easing);
}
.acervo-dica i { width: 15px; height: 15px; color: var(--brasa); flex: none; }
/* a dica já cumpriu o papel: a parede acendeu */
.section-acervo.aceso .acervo-dica { opacity: 0; }

@media (max-width: 860px) {
    .section-acervo { min-height: 92svh; }
    .acervo-vidro { max-width: 100%; }
    .acervo-bruma {
        background:
            linear-gradient(to bottom,
                var(--bg) 0%, rgba(11,11,12,.55) 22%,
                rgba(11,11,12,.86) 55%, var(--bg) 100%);
    }
    .acervo-acoes { flex-direction: column; align-items: stretch; }
    .acervo-acoes .btn-primary, .acervo-acoes .btn-ghost { justify-content: center; }
}


/* =====================================================================
   5. QUEM SOU
   ===================================================================== */
.section-quem {
    position: relative;
    min-height: 90svh;
    display: flex;
    align-items: center;
    padding: clamp(80px, 12vh, 140px) var(--margem);
    overflow: hidden;
}
.quem-foto {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 65% center;   /* mantém a silhueta à direita, texto à esquerda */
    z-index: 0;
}
.quem-veu {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(95deg, rgba(11,11,12,.95) 0%, rgba(11,11,12,.78) 40%, rgba(11,11,12,.15) 75%),
        linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
}
.quem-conteudo { position: relative; z-index: 2; max-width: 560px; }
.assinatura {
    font-size: 1.05rem;
    font-weight: 300;
    font-style: italic;
    color: var(--brasa);
    line-height: 1.6;
    margin-bottom: 32px;
    padding-left: 18px;
    border-left: 2px solid var(--brasa);
    max-width: 42ch;
}

/* =====================================================================
   6. EQUIPAMENTO — controlador de drone interativo
   Tudo que parece clicável, clica. O feed é a câmera; o REC grava e gasta
   bateria; os filtros mudam a imagem; o d-pad gira a bússola; e o botão de
   power desliga a tela como uma TV de tubo.
   ===================================================================== */
.dashboard {
    /* borda em gradiente: pinta-se dois fundos — a superfície no padding-box
       e o gradiente no border-box — com a borda transparente deixando o
       segundo aparecer. */
    border: 1px solid transparent;
    background:
        linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
        var(--borda-gradiente) border-box;
    border-radius: var(--raio-g);
    padding: 16px;
    display: grid;
    grid-template-columns: 64px 2fr 1fr;
    grid-template-rows: minmax(300px, 48vh) auto;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- sidebar ---------- */
.dash-sidebar {
    grid-row: 1 / 3;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--superficie), var(--superficie)) padding-box,
        var(--borda-gradiente-sutil) border-box;
    border-radius: var(--raio);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 10px;
}
.dash-icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    color: var(--texto-2);
    transition: color .25s var(--easing), background .25s var(--easing),
                scale .35s var(--easing), box-shadow .35s var(--easing);
}
.dash-icon i { width: 20px; height: 20px; }
.dash-icon:hover { color: var(--texto); background: rgba(255,255,255,.06); }
.dash-icon.active {
    color: var(--texto);
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.spacer { flex: 1; }

/* botão de power: em repouso é o mais apagado do painel. Com a tela
   desligada, ele é a única coisa acesa — vermelho, maior, pulsando. */
.dash-icon.power { color: #6a6a72; }
.dash-icon.power:hover {
    color: #ff5a4d;
    background: rgba(255,90,77,.10);
    box-shadow: inset 0 0 0 1px rgba(255,90,77,.35);
}
.dash-icon.power.desligado {
    color: #ff5a4d;
    scale: 1.18;
    background: rgba(255,90,77,.14);
    box-shadow:
        inset 0 0 0 1px rgba(255,90,77,.85),
        0 0 22px rgba(255,90,77,.5);
    animation: brasa-power 2s ease-in-out infinite;
}
@keyframes brasa-power {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,90,77,.85), 0 0 22px rgba(255,90,77,.5); }
    50%      { box-shadow: inset 0 0 0 1px rgba(255,90,77,1),   0 0 34px rgba(255,90,77,.85); }
}

/* ---------- feed da câmera ---------- */
.dash-feed {
    position: relative;
    border-radius: var(--raio);
    overflow: hidden;
    padding: 0;                 /* o padding foi pra .feed-tela */
    border: 1px solid transparent;
    background:
        linear-gradient(#000, #000) padding-box,
        var(--borda-gradiente) border-box;
}

/* A TELA. É ela que colapsa no desligar — por isso envolve vídeo, foto e
   HUD. A linha branca e o ruído ficam FORA dela, senão colapsariam junto. */
.feed-tela {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 18px;
    transform-origin: center center;
    will-change: transform, filter, opacity;
    backface-visibility: hidden;
}

.feed-video, .feed-foto {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: filter .5s var(--easing);
}
.feed-video[hidden], .feed-foto[hidden] { display: none; }

/* filtros da câmera — é aqui que HDR+, Noite e Abertura viram imagem */
.dash-feed.f-hdr   .feed-video,
.dash-feed.f-hdr   .feed-foto { filter: saturate(1.45) contrast(1.18) brightness(1.06); }
/* noite: escurece e tira a cor. hue-rotate aqui era erro — ele girava o azul
   do mar até o marrom e o resultado saía sépia, não noturno. O frio vem do
   véu azul abaixo, não de torcer a matiz da imagem. */
.dash-feed.f-noite .feed-video,
.dash-feed.f-noite .feed-foto { filter: brightness(.4) contrast(1.45) saturate(.25); }
.dash-feed.f-noite .feed-tela::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(46, 96, 190, .26);
    mix-blend-mode: screen;
}
.dash-feed.f-abertura .feed-video,
.dash-feed.f-abertura .feed-foto { filter: blur(3px) brightness(1.05); }
/* abertura = profundidade de campo: as bordas escurecem e borram */
.dash-feed.f-abertura .feed-tela::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 120px 40px rgba(0,0,0,.55);
}

.feed-topo, .feed-mira, .feed-contador { position: relative; z-index: 2; }
.feed-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.feed-esq { display: flex; gap: 12px; align-items: center; }

.badge {
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    padding: 4px 9px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
}
.res { font-size: .8rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.9); }

/* REC de verdade: clica, conta e come bateria */
.rec {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px 13px;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;   /* o cronômetro não pode tremer */
    transition: border-color .3s var(--easing), background .3s var(--easing);
}
.rec:hover { background: rgba(0,0,0,.75); border-color: rgba(255,255,255,.3); }
.rec-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #6a6a72;     /* parado = cinza. Vermelho só quando grava mesmo. */
    transition: background .3s var(--easing);
}
.rec.gravando { border-color: rgba(255,59,48,.6); }
.rec.gravando .rec-dot { background: #ff3b30; animation: pulsar 1.1s ease-in-out infinite; }
@keyframes pulsar {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255,59,48,.5); }
    50%      { opacity: .45; box-shadow: 0 0 0 6px rgba(255,59,48,0); }
}

.feed-mira { flex: 1; display: grid; place-items: center; position: relative; }
.focus-box {
    width: 84px; height: 84px;
    border: 1px solid rgba(233,161,75,.9);
    box-shadow: 0 0 0 1px rgba(0,0,0,.35);
    transition: translate .4s var(--easing);
}
.horizonte {
    position: absolute;
    width: 130px; height: 2px;
    background: rgba(255,255,255,.6);
    rotate: 4deg;
}

.feed-contador {
    align-self: flex-end;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    padding: 5px 12px;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.feed-contador[hidden] { display: none; }

/* =====================================================================
   CRT — desligar e ligar como televisão de tubo
   ===================================================================== */
.crt {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* a linha branca horizontal que sobra quando a imagem colapsa */
.crt-linha {
    width: 0;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    opacity: 0;
    box-shadow: 0 0 18px 4px rgba(255,255,255,.85);
}

/* o clarão / ruído da religada */
.crt-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
}

/* --- desligando --- */
.dash-feed.desligando .feed-tela { animation: tv-off .5s cubic-bezier(.3,0,.1,1) forwards; }
.dash-feed.desligando .crt-linha { animation: linha-off 1s ease-out forwards; }

@keyframes tv-off {
    0%   { transform: scaleY(1);     filter: brightness(1) contrast(1); }
    45%  { transform: scaleY(1);     filter: brightness(2.6) contrast(1.5); }
    70%  { transform: scaleY(.014);  filter: brightness(5) contrast(2); }
    100% { transform: scaleY(.014);  filter: brightness(5); opacity: 0; }
}
@keyframes linha-off {
    0%, 42%  { width: 0;   opacity: 0; }
    55%      { width: 88%; opacity: 1; }
    72%      { width: 88%; opacity: 1; }
    100%     { width: 0;   opacity: 0; }
}

/* --- desligado (estado parado) ---
   a cor entra como linear-gradient e não como <color>: numa shorthand de
   várias camadas, só a última pode trazer background-color — escrever
   `#000 padding-box, ...` invalida a declaração inteira, calada. */
.dash-feed.desligado {
    background:
        linear-gradient(#000, #000) padding-box,
        var(--borda-gradiente-sutil) border-box;
}
.dash-feed.desligado .feed-tela { opacity: 0; visibility: hidden; }

/* --- ligando --- */
.dash-feed.ligando .feed-tela {
    animation: tv-on .9s cubic-bezier(.2,.7,.2,1) forwards,
               tv-tremor .45s steps(2, end) 2;
}
.dash-feed.ligando .crt-linha  { animation: linha-on .32s ease-out forwards; }
.dash-feed.ligando .crt-flash  { animation: flash-on .9s ease-out forwards; }

@keyframes tv-on {
    0%   { transform: scaleX(.55) scaleY(.012); opacity: 0; filter: brightness(8) contrast(2); }
    12%  { transform: scaleX(1)   scaleY(.012); opacity: 1; filter: brightness(8) contrast(2); }
    30%  { transform: scaleX(1)   scaleY(.06);              filter: brightness(6) contrast(1.8); }
    48%  { transform: scaleX(1)   scaleY(1);                filter: brightness(3.4) contrast(1.7) saturate(.4); }
    58%  {                                                  filter: brightness(.45) contrast(1.2); }
    68%  {                                                  filter: brightness(2.2) contrast(1.4); }
    80%  {                                                  filter: brightness(.75); }
    90%  {                                                  filter: brightness(1.35); }
    100% { transform: scaleX(1)   scaleY(1);                filter: brightness(1) contrast(1); }
}
/* o tranco horizontal do sinal se ajustando */
@keyframes tv-tremor {
    0%   { translate: 0 0; }
    25%  { translate: -6px 0; }
    50%  { translate: 4px 0; }
    75%  { translate: -2px 0; }
    100% { translate: 0 0; }
}
@keyframes linha-on {
    0%   { width: 0;   opacity: 1; }
    45%  { width: 92%; opacity: 1; }
    100% { width: 92%; opacity: 0; }
}
@keyframes flash-on {
    0%   { opacity: 0; }
    10%  { opacity: .85; }
    22%  { opacity: 0; }
    32%  { opacity: .35; }
    45%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Com o movimento desligado no botão, a TV liga e apaga na hora, sem o
   teatro do tubo. O estado final é o mesmo — só não tem espetáculo. */
html.sem-movimento .dash-feed.desligando .feed-tela,
html.sem-movimento .dash-feed.ligando .feed-tela,
html.sem-movimento .dash-feed.desligando .crt-linha,
html.sem-movimento .dash-feed.ligando .crt-linha,
html.sem-movimento .dash-feed.ligando .crt-flash { animation: none; }
html.sem-movimento .dash-feed.desligando .feed-tela { opacity: 0; }
html.sem-movimento .dash-icon.power.desligado { animation: none; }

/* ---------- painel lateral ---------- */
.dash-painel {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--superficie), var(--superficie)) padding-box,
        var(--borda-gradiente-sutil) border-box;
    border-radius: var(--raio);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.painel-topo { display: flex; justify-content: space-between; align-items: flex-start; }
/* letter-spacing relativo: o -2px fixo antigo grudava as letras */
.drone-nome { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.drone-sub { font-size: .8rem; font-weight: 300; color: var(--texto-2); margin-top: 4px; }
.wifi { width: 20px; height: 20px; color: var(--texto-2); }

.medidor-label {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    margin-bottom: 10px;
}
.medidor-label .destaque {
    color: var(--brasa);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color .3s var(--easing);
}
.destaque.critica { color: #ff5a4d; }

.barra { position: relative; height: 4px; background: #333; border-radius: 100px; }
.barra-fill {
    height: 100%;
    border-radius: 100px;
    transition: width .5s var(--easing), background .3s var(--easing);
}
.barra-fill.bateria { width: 75%; background: var(--brasa); }
.barra-fill.bateria.critica { background: #ff5a4d; }
.medidor-nota { font-size: .72rem; color: var(--texto-2); margin-top: 8px; }

/* slider real: input[type=range]. A barra desenhada de antes não arrastava. */
.alt-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 100px;
    background: linear-gradient(to right,
        var(--texto-2) var(--preenchido, 50%),
        #333 var(--preenchido, 50%));
    cursor: pointer;
}
.alt-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    transition: scale .2s var(--easing);
}
.alt-slider:hover::-webkit-slider-thumb { scale: 1.25; }
.alt-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: none;
}
.alt-valor { font-variant-numeric: tabular-nums; }

.ferramentas { display: flex; justify-content: center; gap: 14px; margin-top: auto; }
.tool {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #252529;
    display: grid;
    place-items: center;
    font-size: .74rem;
    font-weight: 600;
    color: var(--texto-2);
    border: 1px solid transparent;
    transition: all .25s var(--easing);
}
.tool:hover { background: #2f2f36; color: var(--texto); }
.tool i { width: 18px; height: 18px; }
.tool.active {
    background: rgba(233,161,75,.16);
    color: var(--brasa);
    border-color: rgba(233,161,75,.5);
    box-shadow: 0 0 18px rgba(233,161,75,.22);
}

/* ---------- telemetria ---------- */
.dash-telemetria {
    grid-column: 2 / 4;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--superficie), var(--superficie)) padding-box,
        var(--borda-gradiente-sutil) border-box;
    border-radius: var(--raio);
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.modos { display: flex; gap: 8px; }
.modo {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #252529;
    color: var(--texto-2);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: .84rem;
    border: 1px solid transparent;
    transition: all .25s var(--easing);
}
.modo:hover { background: #2f2f36; color: var(--texto); }
.modo.active {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.22);
}
.modo i { width: 15px; height: 15px; }

.telemetria { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 36px; }
.telemetria dt {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-2);
}
.telemetria dd {
    font-size: .95rem;
    font-weight: 600;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ---------- d-pad + bússola ---------- */
.controles { display: flex; align-items: center; gap: 22px; }

.dpad {
    position: relative;
    width: 104px; height: 104px;
    border-radius: 50%;
    background: #252529;
    border: 1px solid rgba(255,255,255,.07);
    flex: none;
}
.dpad-dir {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    color: var(--texto-2);
    transition: color .2s var(--easing), background .2s var(--easing);
}
.dpad-dir i { width: 16px; height: 16px; }
.dpad-dir:hover { color: var(--texto); background: rgba(255,255,255,.1); }
.dpad-dir:active { scale: .9; }
.dpad-dir.top    { top: 3px;    left: 50%; translate: -50% 0; }
.dpad-dir.bottom { bottom: 3px; left: 50%; translate: -50% 0; }
.dpad-dir.left   { left: 3px;   top: 50%;  translate: 0 -50%; }
.dpad-dir.right  { right: 3px;  top: 50%;  translate: 0 -50%; }
.dpad-centro {
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #1a1a1d;
    border: 1px solid rgba(255,255,255,.08);
    transition: background .2s var(--easing), box-shadow .2s var(--easing);
}
.dpad-centro:hover { background: #14141a; box-shadow: inset 0 0 0 1px rgba(233,161,75,.4); }
.dpad-centro:active { scale: .92; }

.bussola { display: flex; align-items: center; gap: 14px; }
.bussola-anel {
    position: relative;
    width: 92px; height: 92px;
    border: 1px solid #333;
    border-radius: 50%;
    flex: none;
}
.bussola-centro {
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
}
.bussola-ponteiro {
    position: absolute;
    bottom: 50%; left: 50%;
    width: 2px; height: 34px;
    translate: -50% 0;
    transform-origin: bottom center;
    rotate: 91deg;
    background: #ff3b30;
    box-shadow: 0 0 10px rgba(255,59,48,.5);
    transition: rotate .45s var(--easing);
}
.bussola-anel span { position: absolute; font-size: .66rem; color: var(--texto-2); }
/* o N ficava escondido atrás do badge de graus — o badge agora vive fora do anel */
.pn { top: 4px;    left: 50%; translate: -50% 0; color: #ff3b30; }
.ps { bottom: 4px; left: 50%; translate: -50% 0; }
.pl { right: 6px;  top: 50%;  translate: 0 -50%; }
.po { left: 6px;   top: 50%;  translate: 0 -50%; }
.bussola-grau {
    background: rgba(255,255,255,.10);
    border: 1px solid var(--linha);
    padding: 5px 12px;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   7. CONTATO
   ===================================================================== */
.section-contato {
    position: relative;
    text-align: center;
    padding: clamp(100px, 16vh, 180px) var(--margem);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid var(--linha);
}
.glow-contato {
    background: radial-gradient(circle, rgba(233,161,75,.22) 0%, transparent 65%);
    top: 20%;
}
/* :not(.glow-radial) é obrigatório — sem ele este seletor tem a mesma
   especificidade de .glow-radial, vence por vir depois, e o position:absolute
   do brilho vira relative: ele passa a ocupar 620px de altura e empurra o
   conteúdo pra fora da tela. */
.section-contato > *:not(.glow-radial) { position: relative; z-index: 1; }
.contato-titulo {
    font-size: clamp(2rem, 5.5vw, 4rem);
    font-weight: 200;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: 22px;
}
.contato-social { display: flex; gap: 28px; margin-top: 38px; }
.contato-social a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-2);
    font-size: .9rem;
    transition: color .3s;
}
.contato-social a:hover { color: var(--texto); }
.contato-social i,
.contato-social .icone-ig { width: 17px; height: 17px; flex: none; }

.rodape {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 28px var(--margem);
    border-top: 1px solid var(--linha);
    font-size: .82rem;
    color: var(--texto-2);
}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6,6,7,.92);
    backdrop-filter: blur(14px);
    display: grid;
    place-items: center;
    padding: var(--margem);
}
.lightbox[hidden] { display: none; }
.lightbox-palco { width: min(1100px, 100%); }
.lightbox-palco video {
    width: 100%;
    max-height: 82vh;
    border-radius: var(--raio);
    background: #000;
}
.lightbox-fechar {
    position: absolute;
    top: 24px; right: 24px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid var(--linha-forte);
    display: grid;
    place-items: center;
}
.lightbox-fechar i { width: 20px; height: 20px; }

/* =====================================================================
   SCRUB DE SCROLL
   O estado neutro aqui é VISÍVEL. Quem esconde é o JS, ao adicionar .scrub —
   e ele só faz isso se a pessoa não pediu menos movimento. Se o script
   falhar, a página aparece inteira. Uma entrega já nasceu 100% estática por
   depender de animação pra existir; não se repete.
   ===================================================================== */
.scrub {
    opacity: 0;
    will-change: opacity, translate;
}

/* entrada do hero: ele já está na tela quando a página abre, então não tem
   rolagem pra amarrar. Ganha a própria entrada, em cascata. */
.hero-conteudo > * {
    animation: subir .9s var(--easing) backwards;
}
.hero-conteudo > :nth-child(1) { animation-delay: .10s; }
.hero-conteudo > :nth-child(2) { animation-delay: .20s; }
.hero-conteudo > :nth-child(3) { animation-delay: .32s; }
.hero-conteudo > :nth-child(4) { animation-delay: .44s; }
@keyframes subir {
    from { opacity: 0; translate: 0 24px; }
    to   { opacity: 1; translate: 0 0; }
}

/* O movimento é ligado por padrão — inclusive para quem tem "reduzir
   movimento" no sistema. Ler prefers-reduced-motion aqui apagava o site
   inteiro na máquina do Matheus (Windows com efeitos desligados) e nos
   clientes dele. Quem desliga é o botão do rodapé, e só ele. */
html.sem-movimento * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}
html.sem-movimento .hero-conteudo > * { animation: none; }
html.sem-movimento .scrub { opacity: 1 !important; translate: 0 !important; }
html.sem-movimento { scroll-behavior: auto; }

/* o botão que faz a escolha */
.botao-movimento {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-2);
    font-size: .8rem;
    transition: color .3s var(--easing);
}
.botao-movimento:hover { color: var(--texto); }
.botao-movimento i { width: 15px; height: 15px; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1100px) {
    /* cinco cards lado a lado ficam finos demais: duas fileiras */
    .cards { flex-wrap: wrap; }
    .card { flex: 1 1 30%; min-height: 260px; }

    .dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .dash-sidebar {
        grid-row: auto;
        flex-direction: row;
        justify-content: center;
        padding: 14px;
    }
    .dash-sidebar .spacer { display: none; }
    .dash-feed { min-height: 300px; }
    .dash-telemetria { grid-column: auto; justify-content: center; }
}

/* No celular não existe "passar o mouse". Sem isso, a prova de cada card
   simplesmente nunca apareceria — o card viraria só um texto numa caixa.
   Então a mídia fica ligada o tempo todo, em cards empilhados. */
@media (hover: none) {
    .card { flex: 1 1 100%; min-height: 300px; }
    .card-midia { opacity: .5; scale: 1; }
    .card::after { opacity: 1; }
    .card-texto { color: #d8d8de; }
}

@media (max-width: 860px) {
    .cards { flex-direction: column; }
    .card, .card:hover { flex: 1 1 auto; }
    .duas-colunas { grid-template-columns: 1fr; }
    /* no empilhado, a mídia vem sempre depois do texto — inclusive na invertida */
    .duas-colunas.invertida .coluna-media { order: 0; }

    .nav-links {
        position: fixed;
        inset: 0 0 auto 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 96px var(--margem) 32px;
        background: rgba(12,12,14,.96);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--linha);
        translate: 0 -100%;
        transition: translate .45s var(--easing);
    }
    .navbar.aberto .nav-links { translate: 0 0; }
    .nav-links a { padding: 14px 0; font-size: 1.15rem; }
    .nav-cta { margin-top: 14px; }
    .nav-burger { display: block; z-index: 101; }
    .navbar { background: rgba(12,12,14,.72); backdrop-filter: blur(20px); }

    .hero { padding-top: 120px; }
    .hero-acoes { flex-direction: column; align-items: stretch; }
    .hero-acoes .btn-primary { justify-content: center; }
    .btn-ghost { justify-content: center; }

    .quem-foto { object-position: 70% center; }
    .quem-veu {
        background:
            linear-gradient(to top, rgba(11,11,12,.96) 30%, rgba(11,11,12,.55) 100%),
            linear-gradient(to bottom, var(--bg) 0%, transparent 20%);
    }
    .section-quem { align-items: flex-end; min-height: 100svh; }

    .telemetria { grid-template-columns: repeat(2, auto); }
    .dash-telemetria { flex-direction: column; align-items: stretch; }
    .bussola { justify-content: center; }
    .modos { justify-content: center; }
}

@media (max-width: 560px) {
    .rodape { flex-direction: column; }
    .peca-larga, .peca-alta { height: 210px; }
}

/* Movimento desligado: a fita PARA — mas parar sozinha esconderia metade do
   portfólio pra sempre. Então ela vira uma galeria de arrastar, com o dedo
   ou o trackpad. O conteúdo continua todo alcançável. */
html.sem-movimento .galeria {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
html.sem-movimento .galeria-fita { animation: none; }
html.sem-movimento .peca { scroll-snap-align: center; }