/* =========================================================
   TOKENS
========================================================= */
:root{
    --bg: #FAF9F6;
    --ink: #17130F;
    --red: #D7263D;
    --red-deep: #7A0D1D;
    --pink: #F5DEE0;
    --graphite: #6B6560;
    --line: rgba(23,19,15,.12);

    --display: "Bricolage Grotesque", sans-serif;
    --body: "Instrument Sans", sans-serif;

    --wrap: 1240px;
    --pad: 6vw;
}

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

html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3{
    font-family:var(--display);
    font-weight:700;
    letter-spacing:-.01em;
    text-wrap:balance;
}

/* quebras de texto: títulos com linhas equilibradas, parágrafos sem palavra sozinha no fim */
p, dd, li, figcaption, blockquote{ text-wrap:pretty; }
.projeto-lead, .desafio-frase, .projeto-destaque p, .vitrine-titulo, .sobre-p-grande{ text-wrap:balance; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
    outline:3px solid var(--red);
    outline-offset:3px;
    border-radius:4px;
}

.eyebrow{
    font-size:.95rem;
    color:var(--red);
    font-weight:600;
    margin-bottom:14px;
}

/* =========================================================
   HEADER
========================================================= */
.site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px var(--pad);
    background:rgba(250,249,246,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}

.mark img{ width:34px; height:34px; }

.nav{
    display:flex;
    align-items:center;
    gap:34px;
    font-weight:500;
}

.nav a{ 
    position:relative; 
    padding:10px 20px; 
}
.nav a:not(.nav-cta)::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    height:2px;
    width:0;
    background:var(--red);
    transition:width .25s ease;
}
.nav a:not(.nav-cta):hover::after{ width:100%; }

.nav-cta{
    background:var(--ink);
    color:var(--bg);
    padding:10px 20px;
    border-radius:100px;
    transition:background .25s ease;
}
.nav-cta:hover{ background:var(--red); }

.menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px; height:34px;
    background:none; border:none; cursor:pointer;
}
.menu-toggle span{
    height:2px; width:100%;
    background:var(--ink);
    border-radius:2px;
    transition:.3s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
========================================================= */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:120px var(--pad) 80px;
    overflow:hidden;
}

.hero-word{
    width:min(1100px, 92vw);
    opacity:0;
    transform:translateY(28px);
    animation:subir .9s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.hero-word img{ width:100%; }

.hero-meta{
    margin-top:34px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    max-width:var(--wrap);
    opacity:0;
    animation:subir .9s cubic-bezier(.2,.8,.2,1) .4s forwards;
}

.hero-line{
    font-size:clamp(1rem, .85rem + .7vw, 1.4rem);
    color:var(--graphite);
    max-width:34ch;
}

.hero-loc{
    font-weight:600;
    white-space:nowrap;
    padding-bottom:4px;
}

@keyframes subir{
    to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
    transition:opacity .3s ease;
    position:absolute;
    bottom:36px; left:var(--pad);
    width:42px; height:42px;
    border:2px solid var(--ink);
    border-radius:7px;
    opacity:.45;
}
.scroll-cue span{
    position:absolute; top:8px; left:50%;
    width:8px; height:8px;
    background:var(--red);
    border-radius:2px;
    transform:translateX(-50%);
    animation:pinga 1.8s ease infinite;
}
@keyframes pinga{
    0%{ top:8px; opacity:1; }
    70%{ opacity:0; }
    100%{ top:20px; opacity:0; }
}

/* =========================================================
   FAIXA (marquee de habilidades)
========================================================= */
.faixa{
    background:var(--ink);
    color:var(--bg);
    overflow:hidden;
    padding:18px 0;
    white-space:nowrap;
}
.faixa-track{
    display:inline-flex;
    align-items:center;
    gap:14px;
    animation:rolar 96s linear infinite;
    font-family:var(--display);
    font-weight:600;
    font-size:1.15rem;
}
.faixa-track i{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--red);
    display:inline-block;
}
@keyframes rolar{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

/* =========================================================
   PROJETOS
========================================================= */
.projetos{
    padding:120px var(--pad);
    max-width:var(--wrap);
    margin:0 auto;
}
.projetos-intro{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:56px;
    flex-wrap:wrap;
}
.projetos-intro h2{ font-size:clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.projetos-intro p{
    max-width:38ch;
    color:var(--graphite);
}

.grid-projetos{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:180px;
    grid-auto-flow:dense;
    gap:18px;
}
.proj{
    border-radius:26px;
    background:var(--pink);
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px;
    overflow:hidden;
    cursor:default;
    transition:transform .35s ease;
}
.proj:nth-child(5n+1){ background:var(--red); color:var(--bg); }
.proj:nth-child(5n+1) .proj-tag{ opacity:.85; }
.proj:hover, .proj:focus-visible{ transform:translateY(-6px); }

a.proj{ cursor:pointer; }
a.proj::after{
    content:"↗";
    position:absolute;
    top:20px; right:22px;
    font-size:1.4rem;
    line-height:1;
    opacity:0;
    transform:translate(-6px, 6px);
    transition:opacity .3s ease, transform .3s ease;
}
a.proj:hover::after, a.proj:focus-visible::after{ opacity:1; transform:none; }

.proj-a{ grid-column:span 3; grid-row:span 2; }

/* card com a capa do projeto como imagem de fundo (--capa no style do card) */
.proj.proj-com-capa{ background:#0A1F44; color:#fff; isolation:isolate; }
.proj-com-capa::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(to top, rgba(10,31,68,.92) 0%, rgba(10,31,68,.55) 28%, rgba(10,31,68,0) 60%),
        var(--capa) var(--capa-pos, 50% 45%) / cover no-repeat;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.proj-com-capa:hover::before,
.proj-com-capa:focus-visible::before{ transform:scale(1.05); }
.proj-com-capa .proj-tag{ opacity:.85; }
/* capa do Memória Amorfa: rosto mais acima, em preto e branco */
.proj.proj-capa-amorfa{ background:#0E0E0E; color:#F4F4F4; }
.proj-capa-amorfa::before{
    background:
        linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 60%),
        var(--capa) var(--capa-pos, 50% 28%) / cover no-repeat;
    filter:grayscale(1);
}
.proj-b{ grid-column:span 3; grid-row:span 2; }
.proj-c{ grid-column:span 2; grid-row:span 2; }
.proj-d{ grid-column:span 2; grid-row:span 2; }
.proj-e{ grid-column:span 2; grid-row:span 2; }

.proj-tag{
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    opacity:.65;
}
.proj-nome{
    font-family:var(--display);
    font-size:1.15rem;
    font-weight:600;
}

/* =========================================================
   TRAJETÓRIA
========================================================= */
.trajetoria{ padding:120px 0; }
.trajetoria-trilho{ position:relative; }
.trajetoria-palco{
    max-width:var(--wrap);
    margin:0 auto;
    padding:0 var(--pad);
}
.trajetoria-topo{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
}
.trajetoria h2{ font-size:clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.trajetoria-dica{ font-size:.95rem; font-weight:700; color:var(--graphite); white-space:nowrap; }
.trajetoria-dica .so-rolagem{ display:none; }
.trajetoria.horizontal .trajetoria-dica .so-rolagem{ display:inline; }
.trajetoria.horizontal .trajetoria-dica .so-arrastar{ display:none; }

/* linha do tempo horizontal: uma linha no topo e um cartão por etapa */
.linha-do-tempo{
    position:relative;
    display:flex;
    gap:28px;
    padding-top:44px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.linha-do-tempo::-webkit-scrollbar{ display:none; }
.linha-do-tempo::before,
.linha-progresso{
    content:"";
    position:absolute;
    top:7px; left:0;
    height:2px;
    background:var(--line);
}
.linha-do-tempo::before{ width:var(--largura-linha, 100%); }
.linha-progresso{ width:0; background:var(--red); z-index:1; }

.item-tempo{
    position:relative;
    flex:0 0 min(340px, 78vw);
    scroll-snap-align:start;
    padding:24px;
    border-radius:26px;
    background:var(--pink);
}
.item-tempo::before{
    content:"";
    position:absolute;
    left:24px; top:-44px;
    width:12px; height:12px;
    border-radius:50%;
    background:var(--red);
    border:3px solid var(--bg);
    box-shadow:0 0 0 2px var(--red);
    z-index:2;
}
.item-formacao{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--line); }
.item-formacao::before{ background:var(--bg); box-shadow:0 0 0 2px var(--ink); }

.tempo-data{
    display:block;
    font-family:var(--display);
    font-size:1.5rem;
    font-weight:700;
    color:var(--red);
    line-height:1.1;
}
.tempo-tipo{
    display:block;
    margin:6px 0 18px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--graphite);
}
.item-tempo h3{ font-size:1.3rem; line-height:1.2; margin-bottom:4px; }
.tempo-org{ color:var(--graphite); font-weight:500; }
.tempo-desc{ margin-top:12px; font-size:.95rem; color:var(--ink); }

/* computador: a rolagem da página move a linha para o lado (classe posta pelo script) */
.trajetoria.horizontal{ padding:0; }
.trajetoria.horizontal .trajetoria-trilho{ height:calc(100vh + var(--distancia, 0px)); }
.trajetoria.horizontal .trajetoria-palco{
    max-width:none;
    padding-left:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    padding-right:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:80px;
    overflow:hidden;
}
.trajetoria.horizontal .linha-do-tempo{
    overflow:visible;
    width:max-content;
    will-change:transform;
}
.trajetoria.horizontal .item-tempo{ flex-basis:360px; }

/* =========================================================
   SOBRE
========================================================= */
.sobre{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    padding:100px var(--pad) 140px;
    max-width:var(--wrap);
    margin:0 auto;
    align-items:center;
}
.sobre-p{ margin-bottom:20px; max-width:56ch; color:var(--ink); }
.sobre-p-grande{
    font-family:var(--display);
    font-size:clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
    font-weight:600;
    line-height:1.25;
}
.sobre-skills{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}
.sobre-skills li{
    position: relative;

    border:1.5px solid var(--line);
    border-radius:100px;
    padding:8px 16px;

    font-size:.9rem;
    font-weight:600;

    transition: transform .35s ease;
    color: .35s ease;
    background: .35s ease;
}

.sobre-skills li:hover, li:focus-visible{ 
transform:translateY(-6px); 
color:var(--bg);
background: var(--red);
}

/* Thumb */
.skill-preview {
    position: absolute;

    width: 180px;
    aspect-ratio: 16 / 9;

    left: 50%;
    bottom: calc(100% + 16px);

    transform:
        translateX(-50%)
        translateY(10px)
        scale(.9);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    overflow: hidden;

    border-radius: 12px;

    background: #111;

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;

    z-index: 20;
}


/* Vídeo */
.skill-preview video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* Aparece no hover */
.sobre-skills li:hover .skill-preview {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}


.sobre-objeto{
    aspect-ratio:1/1;
    border-radius:32px;
    background:var(--pink);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
.sobre-objeto canvas{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
}
.objeto-status{
    color:var(--red-deep);
    font-weight:600;
    font-size:.9rem;
}
.objeto-fallback{ width:50%; }
/* =========================================================
   CONTATO
========================================================= */
.contato{
    background:var(--ink);
    color:var(--bg);
    padding:120px var(--pad);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}
.contato h2{
    font-size:clamp(2rem, 1.2rem + 3.4vw, 3.2rem);
    line-height:1.08;
    margin:10px 0 40px;
}
.contato-dados{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:1.1rem;
    margin-bottom:32px;
}
.contato-dados a:hover{ color:var(--red); }

.social-links{ display:flex; gap:12px; }
.social-links a{
    width:44px; height:44px;
    border:1.5px solid rgba(250,249,246,.3);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700;
    transition:.25s;
}
.social-links a:not([aria-disabled]):hover{
    background:var(--red);
    border-color:var(--red);
}
.social-links a[aria-disabled="true"]{ opacity:.35; cursor:default; }

.contato-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.contato-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:.85rem;
    color:rgba(250,249,246,.6);
    font-weight:600;
}
.contato-form input,
.contato-form textarea{
    background:transparent;
    border:none;
    border-bottom:1.5px solid rgba(250,249,246,.3);
    color:var(--bg);
    font-family:var(--body);
    font-size:1.05rem;
    padding:10px 2px;
    resize:vertical;
}
.contato-form input:focus,
.contato-form textarea:focus{
    outline:none;
    border-color:var(--red);
}
.form-status{ font-size:.9rem; min-height:1.2em; }
.form-status.success{ color:#8FD19E; }
.form-status.error{ color:#F2A0A0; }

.contato-form button{
    margin-top:10px;
    align-self:flex-start;
    background:var(--red);
    color:var(--bg);
    border:none;
    padding:16px 32px;
    border-radius:100px;
    font-family:var(--body);
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    transition:.25s;
}
.contato-form button:hover{ background:var(--bg); color:var(--ink); }
.contato-form button[disabled]{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:32px var(--pad);
    background:var(--ink);
    color:rgba(250,249,246,.5);
    font-size:.85rem;
    flex-wrap:wrap;
}
.site-footer img{ width:22px; height:22px; opacity:.7; }
.site-footer a:hover{ color:var(--bg); }

/* =========================================================
   PÁGINA DE PROJETO
========================================================= */
.pagina-projeto{ --cor-projeto:var(--red); }

.projeto-hero,
.projeto-capa,
.projeto-bloco,
.projeto-galeria,
.projeto-destaque,
.projeto-navegacao{
    max-width:var(--wrap);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--pad);
    padding-right:var(--pad);
}

/* Abertura */
.projeto-hero{ padding-top:150px; padding-bottom:56px; }
.voltar{
    display:block;
    width:fit-content;
    margin-bottom:48px;
    color:var(--graphite);
    font-weight:600;
    font-size:.9rem;
    transition:color .25s, transform .25s;
}
.voltar:hover{ color:var(--cor-projeto); transform:translateX(-4px); }

.projeto-hero-topo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.projeto-hero .proj-tag{
    display:inline-block;
    padding:8px 16px;
    border-radius:999px;
    background:var(--cor-projeto);
    color:var(--bg);
    opacity:1;
}
.projeto-numero{
    white-space:nowrap;
    font-family:var(--display);
    font-weight:700;
    font-size:1.1rem;
}
.projeto-numero i{ font-style:normal; color:var(--graphite); font-weight:500; }

.projeto-hero h1{
    margin:28px 0 24px;
    font-size:clamp(2.8rem, 1.2rem + 6.5vw, 7rem);
    line-height:.95;
    letter-spacing:-.03em;
    max-width:14ch;
}
.projeto-resumo{
    max-width:52ch;
    color:var(--graphite);
    font-size:clamp(1.05rem, 1rem + .4vw, 1.3rem);
}
.projeto-ficha{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    margin-top:56px;
    border-top:1px solid var(--line);
}
.projeto-ficha div{
    padding:20px 20px 0 0;
    border-right:1px solid var(--line);
}
.projeto-ficha div + div{ padding-left:20px; }
.projeto-ficha div:last-child{ border-right:0; }
.projeto-ficha dt{
    margin-bottom:6px;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--graphite);
}
.projeto-ficha dd{ font-weight:600; }

/* Capa */
.projeto-capa{ margin-bottom:120px; }
.projeto-capa-moldura{
    position:relative;
    aspect-ratio:16 / 9;
    border-radius:26px;
    overflow:hidden;
    background:var(--pink);
}

/* Imagens com parallax: ficam maiores que a moldura para ter folga ao se mover */
.projeto-capa-moldura img,
.galeria-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.12);
    will-change:transform;
}

/* Imagem que não carregou: some e deixa só a moldura com um aviso */
.img-vazia{ visibility:hidden; }
.projeto-capa-moldura:has(.img-vazia),
.galeria-item:has(.img-vazia){
    display:grid;
    place-items:center;
}
.projeto-capa-moldura:has(.img-vazia)::after,
.galeria-item:has(.img-vazia)::after{
    content:"Imagem do projeto";
    position:absolute;
    color:var(--red-deep);
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.45;
}

/* Blocos de texto: rótulo à esquerda, texto à direita */
.projeto-bloco{
    display:grid;
    grid-template-columns:minmax(180px, 1fr) 2fr;
    gap:40px;
    margin-bottom:120px;
}
.projeto-rotulo{
    position:sticky;
    top:110px;
    align-self:start;
    font-size:1.4rem;
}
.projeto-rotulo span{
    display:block;
    margin-bottom:6px;
    font-size:.8rem;
    color:var(--cor-projeto);
    letter-spacing:.06em;
}
.projeto-bloco-texto{
    display:grid;
    gap:20px;
    max-width:62ch;
    font-size:1.08rem;
    line-height:1.65;
}
.projeto-lead{
    font-family:var(--display);
    font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight:600;
    line-height:1.25;
}

/* Galeria em mosaico */
.projeto-galeria{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:220px;
    gap:18px;
    margin-bottom:120px;
}
.galeria-item{
    position:relative;
    grid-column:span 3;
    grid-row:span 2;
    border-radius:26px;
    overflow:hidden;
    background:var(--pink);
}
.galeria-larga{ grid-column:span 6; grid-row:span 3; }
.galeria-alta{ grid-column:span 2; grid-row:span 3; }
.galeria-media{ grid-column:span 4; grid-row:span 3; }
.galeria-item figcaption{
    position:absolute;
    left:16px; bottom:16px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(250,249,246,.9);
    backdrop-filter:blur(8px);
    font-size:.8rem;
    font-weight:600;
}

/* Frase de destaque */
.projeto-destaque{ margin-bottom:120px; }
.projeto-destaque p{
    max-width:20ch;
    font-family:var(--display);
    font-size:clamp(2rem, 1rem + 4vw, 4.2rem);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-.02em;
}
.projeto-destaque p::before{
    content:"“";
    display:block;
    height:.55em;
    color:var(--cor-projeto);
    font-size:1.6em;
    line-height:1;
}
.projeto-destaque cite{
    display:block;
    margin-top:24px;
    font-style:normal;
    color:var(--graphite);
}

/* Números do resultado */
.projeto-numeros{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:20px;
    list-style:none;
}
.projeto-numeros li{
    padding:22px;
    border-radius:26px;
    background:var(--pink);
}
.projeto-numeros strong{
    display:block;
    font-family:var(--display);
    font-size:clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
    line-height:1;
    color:var(--cor-projeto);
}
.projeto-numeros span{ display:block; margin-top:8px; font-size:.9rem; line-height:1.35; color:var(--graphite); }

/* Próximo projeto */
.projeto-navegacao{
    display:grid;
    gap:24px;
    padding-top:40px;
    padding-bottom:100px;
    border-top:1px solid var(--line);
}
.projeto-anterior{
    width:fit-content;
    color:var(--graphite);
    font-weight:600;
    transition:color .25s;
}
.projeto-anterior:hover{ color:var(--cor-projeto); }
.projeto-seguinte{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:260px;
    padding:32px;
    border-radius:26px;
    background:var(--cor-projeto);
    color:var(--bg);
    overflow:hidden;
    transition:transform .35s ease;
}
.projeto-seguinte:hover{ transform:translateY(-6px); }
.projeto-seguinte-rotulo{
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    opacity:.8;
}
.projeto-seguinte-nome{
    font-family:var(--display);
    font-size:clamp(2rem, 1.2rem + 3.5vw, 4rem);
    font-weight:700;
    line-height:1;
    letter-spacing:-.02em;
}
.projeto-seguinte-seta{
    position:absolute;
    top:28px; right:32px;
    font-size:2.4rem;
    line-height:1;
    transition:transform .35s ease;
}
.projeto-seguinte:hover .projeto-seguinte-seta{ transform:translateX(8px); }

/* Lista de frentes de trabalho (dentro de um bloco de texto) */
.frentes{
    display:grid;
    gap:14px;
    margin-top:8px;
    list-style:none;
    counter-reset:frente;
}
.frentes li{
    display:grid;
    gap:6px;
    padding:22px 22px 22px 64px;
    border-radius:26px;
    background:var(--pink);
    position:relative;
    counter-increment:frente;
    line-height:1.5;
}
.frentes li::before{
    content:counter(frente, decimal-leading-zero);
    position:absolute;
    left:22px; top:22px;
    font-family:var(--display);
    font-weight:700;
    color:var(--cor-projeto);
}
.frentes b{ font-family:var(--display); font-size:1.15rem; }
.frentes span{ color:var(--graphite); font-size:.98rem; }

/* =========================================================
   CAPÍTULOS — título grande + uma linha (páginas de projeto)
========================================================= */
.capitulo{
    max-width:var(--wrap);
    margin:0 auto 40px;
    padding:0 var(--pad);
}
.capitulo-num{
    display:block;
    margin-bottom:12px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--cor-projeto);
}
.capitulo h2{
    font-size:clamp(2.6rem, 1.2rem + 5vw, 5.2rem);
    line-height:.95;
    letter-spacing:-.035em;
    margin-bottom:12px;
}
.capitulo > p{ max-width:52ch; font-size:1.15rem; color:var(--graphite); }
.capitulo > p + p{ margin-top:12px; }
.capitulo h2{ max-width:19ch; margin-bottom:20px; }
/* mantém palavras juntas na mesma linha (ex.: "Soluções Fiscais") */
.junto{ display:inline-block; }

/* Desafio: faixa de cor com a frase que abre a história */
.desafio{
    margin-bottom:120px;
    padding:110px max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    background:var(--ink);
    color:var(--bg);
}
.desafio .capitulo-num{ color:var(--sieg-ciano, var(--pink)); }
.desafio-frase{
    max-width:18ch;
    font-family:var(--display);
    font-size:clamp(2.2rem, 1rem + 4.4vw, 4.6rem);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.03em;
}
.desafio-linha{ margin-top:24px; max-width:56ch; font-size:1.15rem; opacity:.75; }

/* Fotos de evento: grade de retratos verticais com duas fotos em destaque */
.fotos-evento{
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.fotos-grade{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-flow:dense;
    gap:14px;
}
.fotos-grade .foto{
    grid-column:auto;
    grid-row:auto;
    aspect-ratio:2 / 3;
    border-radius:18px;
}
.fotos-grade .foto-grande{
    grid-column:span 2;
    grid-row:span 2;
    aspect-ratio:auto;
}
.fotos-grade .foto-grande-dir{ grid-column:3 / span 2; }
.fotos-legenda{
    margin-top:18px;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--graphite);
}
@media (max-width:900px){
    .fotos-grade{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .fotos-grade .foto-grande,
    .fotos-grade .foto-grande-dir{ grid-column:1 / -1; }
    .fotos-evento{ margin-bottom:80px; }
}

/* Ferramentas: print + problema / solução */
.ferramentas{
    display:grid;
    gap:64px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.ferramenta{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    align-items:center;
    gap:48px;
}
.ferramenta:nth-child(even){ grid-template-columns:1fr 1.4fr; }
.ferramenta:nth-child(even) .ferramenta-print{ order:2; }
.ferramenta-print.galeria-item{ grid-column:auto; grid-row:auto; aspect-ratio:16 / 10; }
.ferramenta-texto h3{ font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin-bottom:18px; }
.ferramenta-texto dl{ display:grid; gap:6px; }
.ferramenta-texto dt{
    margin-top:10px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--cor-projeto);
}
.ferramenta-texto dd{ font-size:1.08rem; line-height:1.5; }

/* Vídeo de ferramenta dentro de uma janela de navegador */
.ferramenta-video.galeria-item{
    display:flex;
    flex-direction:column;
    aspect-ratio:auto;
    background:#fff;
    box-shadow:0 30px 60px -30px rgba(10,31,68,.35), 0 0 0 1px var(--line);
}
.janela-barra{
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 14px;
    background:#f4f5f8;
    border-bottom:1px solid var(--line);
}
.janela-barra i{ width:10px; height:10px; border-radius:50%; background:#d5d8df; }
.janela-barra span{ margin:0 auto; padding-right:48px; font-size:.75rem; font-weight:600; color:var(--graphite); }
.ferramenta-video video{ display:block; width:100%; aspect-ratio:1424 / 884; height:auto; background:#f2f4f8; }

/* Ferramenta ainda em desenvolvimento */
.ferramenta-embreve{
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:16 / 10;
    border-radius:26px;
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 15%, rgba(255,255,255,.18), transparent 45%),
        linear-gradient(135deg, var(--cor-projeto), var(--red-deep));
}
.embreve-selo{
    padding:6px 12px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.embreve-selo-texto{
    display:inline-block;
    margin-bottom:12px;
    background:var(--pink);
    color:var(--cor-projeto);
}
/* mini calendário ilustrativo, com alguns dias marcados */
.embreve-cal{
    width:min(60%, 320px);
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
    color:#fff;
}
.embreve-cal b{ display:block; margin-bottom:12px; font-size:1.1rem; }
.embreve-cal div{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.embreve-cal i{ aspect-ratio:1; border-radius:6px; background:rgba(255,255,255,.16); }
.embreve-cal i:nth-child(3), .embreve-cal i:nth-child(9),
.embreve-cal i:nth-child(12), .embreve-cal i:nth-child(17){ background:#fff; }
.embreve-cal i:nth-child(5), .embreve-cal i:nth-child(15){ background:var(--sieg-ciano, var(--pink)); }

/* Depoimento: fecha a história */
.depoimento{
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.depoimento p{
    max-width:22ch;
    font-family:var(--display);
    font-size:clamp(2rem, 1rem + 3.6vw, 3.8rem);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.02em;
}
.depoimento cite{ display:block; margin-top:20px; font-style:normal; color:var(--graphite); font-weight:600; }

@media (max-width:900px){
    .desafio{ padding-top:80px; padding-bottom:80px; margin-bottom:80px; }
    .ferramenta, .ferramenta:nth-child(even){ grid-template-columns:1fr; gap:20px; }
    .ferramenta:nth-child(even) .ferramenta-print{ order:0; }
    .ferramentas{ gap:48px; margin-bottom:80px; }
}

/* =========================================================
   VITRINE DE FEED — celular 3D controlado pela rolagem
========================================================= */
.vitrine{ margin-bottom:120px; }

.vitrine-intro{
    max-width:var(--wrap);
    margin:0 auto 20px;
    padding:0 var(--pad);
}

/* No modo 3D o trilho é alto e o palco fica preso na tela enquanto se rola por ele */
.vitrine-trilho{ position:relative; }
.modo-3d .vitrine-trilho{ height:calc(var(--unidades, 12) * 55vh + 100vh); margin-top:-64px; }
/* o texto fica por cima do palco (que sobe um pouco) para os botões continuarem clicáveis */
.vitrine-intro{ position:relative; z-index:2; }

.vitrine-palco{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:40px;
    max-width:var(--wrap);
    margin:0 auto;
    padding:0 var(--pad);
}
.modo-3d .vitrine-palco{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    position:sticky;
    top:0;
    height:100vh;
    padding-top:104px;
    padding-bottom:20px;
    perspective:1700px;
}

/* Painel ao lado do celular */
.vitrine-info{ display:none; }
.modo-3d .vitrine-info{ display:grid; justify-items:center; gap:4px; text-align:center; }
.vitrine-contador{
    font-family:var(--display);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--graphite);
}
.vitrine-contador b{ color:var(--cor-projeto); }
.vitrine-titulo{
    font-family:var(--display);
    font-size:1.35rem;
    font-weight:700;
    line-height:1.15;
}
.vitrine-pontos{ display:flex; gap:6px; min-height:8px; margin-top:6px; }
.vitrine-pontos i{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--line);
    transition:background .25s ease, transform .25s ease;
}
.vitrine-pontos i.ativo{ background:var(--cor-projeto); transform:scale(1.15); }
.vitrine-slide{ margin-top:2px; color:var(--graphite); font-weight:600; }
.vitrine-progresso{
    height:3px;
    margin-top:16px;
    border-radius:3px;
    background:var(--line);
    overflow:hidden;
}
.vitrine-progresso span{
    display:block;
    height:100%;
    background:var(--cor-projeto);
    transform:scaleX(0);
    transform-origin:left;
}
.vitrine-dica{
    margin-top:14px;
    font-size:1.15rem;
    font-weight:700;
    color:var(--ink);
    transition:opacity .4s ease;
}
.vitrine-iniciada .vitrine-dica{ opacity:0; }

/* texto de instrução muda conforme o modo */
.vitrine .so-3d{ display:none; }
.vitrine.modo-3d .so-3d{ display:inline; }
.vitrine.modo-3d .so-toque{ display:none; }

/* Alternar entre celular e grade */
.vitrine-alternar{
    display:inline-flex;
    gap:4px;
    margin-top:16px;
    padding:4px;
    border-radius:999px;
    background:var(--pink);
}
.vitrine-alternar button{
    padding:10px 18px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--ink);
    font:600 .92rem var(--body);
    cursor:pointer;
    transition:background .25s ease, color .25s ease;
}
.vitrine-alternar button[aria-pressed="true"]{ background:var(--cor-projeto); color:#fff; }
.vitrine.ver-grade .so-3d,
.vitrine.ver-grade .so-toque{ display:none; }

/* "No feed": grade do perfil do Instagram */
.vitrine-grade{
    max-width:935px;
    margin:0 auto;
    padding:0 var(--pad);
}
.vitrine-grade[hidden]{ display:none; }

.perfil{
    display:flex;
    align-items:center;
    gap:clamp(20px, 5vw, 56px);
    padding:8px 0 28px;
}
.perfil-avatar{
    display:grid;
    place-items:center;
    flex:none;
    width:clamp(72px, 14vw, 120px);
    aspect-ratio:1;
    border-radius:50%;
    background:var(--cor-projeto);
    color:#fff;
    font-family:var(--display);
    font-size:clamp(1.8rem, 1rem + 3vw, 3rem);
    font-weight:800;
    box-shadow:0 0 0 4px var(--bg), 0 0 0 6px #e1306c;
}
.perfil div{ display:grid; gap:4px; }
.perfil b{ font-size:1.25rem; }
.perfil strong{ font-weight:700; }
.perfil small{ color:var(--graphite); font-size:.92rem; }

.perfil-abas{
    display:flex;
    justify-content:center;
    border-top:1px solid var(--line);
    margin-bottom:4px;
}
.perfil-abas span{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:-1px;
    padding:14px 0;
    border-top:1px solid var(--ink);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.perfil-abas svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }

.feed-grade{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:4px;
}
.feed-item{
    position:relative;
    aspect-ratio:3 / 4;
    overflow:hidden;
    background:var(--pink);
    touch-action:pan-y;
    user-select:none;
}
.feed-faixa{
    display:flex;
    height:100%;
    transition:transform .6s cubic-bezier(.65,0,.35,1);
}
.feed-arte{ position:relative; flex:0 0 100%; height:100%; }
.feed-arte img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.feed-arte.vazia img{ visibility:hidden; }
.feed-arte.vazia::after{
    content:attr(data-rotulo);
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-family:var(--display);
    font-weight:700;
    font-size:.9rem;
    color:var(--red-deep);
    opacity:.55;
}

.feed-icone{
    position:absolute;
    top:10px; right:10px;
    color:#fff;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
    pointer-events:none;
}
.feed-icone svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }

.feed-seta{
    position:absolute;
    top:50%;
    width:30px; height:30px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    color:#000;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    opacity:0;
    transform:translateY(-50%);
    transition:opacity .25s ease;
}
.feed-seta-ant{ left:8px; }
.feed-seta-prox{ right:8px; }
.feed-item:hover .feed-seta,
.feed-seta:focus-visible{ opacity:1; }

.feed-pontos{
    position:absolute;
    left:0; right:0; bottom:10px;
    display:flex;
    justify-content:center;
    gap:4px;
    pointer-events:none;
}
.feed-pontos i{
    width:6px; height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    transition:background .2s ease;
}
.feed-pontos i.ativo{ background:#fff; }

/* nome do post aparece ao passar o mouse, como as curtidas no Instagram */
.feed-titulo{
    position:absolute;
    left:0; right:0; top:0;
    padding:12px 40px 28px 12px;
    background:linear-gradient(rgba(0,0,0,.45), transparent);
    color:#fff;
    font-size:.85rem;
    font-weight:700;
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
}
.feed-item:hover .feed-titulo{ opacity:1; }

@media (max-width:560px){
    .feed-grade{ grid-template-columns:repeat(2, 1fr); gap:3px; }
    .feed-seta{ display:none; }
    .vitrine-grade{ padding:0; }
    .perfil, .perfil-abas{ margin-left:var(--pad); margin-right:var(--pad); }
}

/* ---------- O aparelho ---------- */
.celular-cena{
    position:relative;
    height:min(720px, calc(100vh - 260px));
    aspect-ratio:9 / 19.5;
    flex-shrink:0;
    margin:0 auto;
}
.celular{
    --espessura:14px;
    --raio:13% / 6%;
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    will-change:transform;
}
.celular-face,
.celular-camada{
    position:absolute;
    inset:0;
    border-radius:var(--raio);
}
.celular-frente{
    transform:translateZ(calc(var(--espessura) / 2));
    backface-visibility:hidden;
    padding:2.6%;
    background:#0d0d0f;
    box-shadow:inset 0 0 0 2px #3b3b42, inset 0 0 0 4px #0d0d0f;
}
.celular-verso{
    transform:rotateY(180deg) translateZ(calc(var(--espessura) / 2));
    backface-visibility:hidden;
    background:linear-gradient(150deg, #43434a, #1d1d21 60%, #2c2c31);
    box-shadow:inset 0 0 0 2px #55555d;
}
.celular-camada{ background:linear-gradient(90deg, #26262b, #4a4a52 50%, #26262b); }

.celular-ilha{
    position:absolute;
    top:2.5%; left:50%;
    width:27%; height:2.9%;
    border-radius:99px;
    background:#000;
    transform:translateX(-50%);
    z-index:3;
}
/* reflexo de vidro que acompanha o giro */
.celular-brilho{
    position:absolute;
    inset:0;
    border-radius:var(--raio);
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%) var(--brilho, 50%) 0 / 300% 100%;
    pointer-events:none;
    z-index:4;
}
.celular-cameras{
    position:absolute;
    top:4%; left:7%;
    width:40%;
    aspect-ratio:1;
    border-radius:28%;
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.celular-cameras i{
    position:absolute;
    width:38%; aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%, #2f3a4a, #08080a 60%);
    box-shadow:0 0 0 3px #1a1a1e, 0 0 0 4px #4a4a52;
}
.celular-cameras i:nth-child(1){ top:8%; left:8%; }
.celular-cameras i:nth-child(2){ top:54%; left:8%; }
.celular-cameras i:nth-child(3){ top:31%; left:54%; }
.celular-cameras b{
    position:absolute;
    top:12%; right:14%;
    width:12%; aspect-ratio:1;
    border-radius:50%;
    background:#e9e2cf;
}
.celular-logo{
    position:absolute;
    top:50%; left:50%;
    width:18%;
    transform:translate(-50%, -50%);
    opacity:.75;
}
.celular-sombra{
    position:absolute;
    left:8%; right:8%;
    bottom:-34px;
    height:26px;
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(23,19,15,.28), transparent);
    filter:blur(4px);
}

/* Fora do modo 3D: só a frente, sem perspectiva */
.vitrine:not(.modo-3d) .celular-verso,
.vitrine:not(.modo-3d) .celular-camada{ display:none; }
.vitrine:not(.modo-3d) .celular-frente{ transform:none; }

/* ---------- Tela: perfil do Instagram em modo "Publicações" ---------- */
.celular-tela{
    position:relative;
    height:100%;
    display:grid;
    grid-template-rows:auto auto 1fr auto;
    overflow:hidden;
    border-radius:11% / 5.2%;
    background:#fff;
    color:#000;
    font-family:-apple-system, BlinkMacSystemFont, "Instrument Sans", sans-serif;
    font-size:12px;
    line-height:1.35;
}
.celular-tela svg{
    width:22px; height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ig-status{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:7px 18px 5px 22px;
    font-weight:700;
    font-size:11px;
}
.ig-status-icones{ display:flex; align-items:center; gap:5px; }
.ig-status-icones i{ display:block; background:#000; }
.ig-sinal{ width:12px; height:7px; clip-path:polygon(0 100%, 100% 0, 100% 100%); }
.ig-wifi{ width:11px; height:7px; clip-path:polygon(50% 100%, 0 25%, 20% 0, 80% 0, 100% 25%); }
.ig-bateria{ width:18px; height:8px; border-radius:3px; box-shadow:inset 0 0 0 1.5px #fff, 0 0 0 1px #000; }

.ig-topo{
    display:grid;
    grid-template-columns:28px 1fr 28px;
    align-items:center;
    padding:2px 8px 5px;
    border-bottom:1px solid #efefef;
    text-align:center;
}
.ig-topo svg{ width:18px !important; height:18px !important; }
.ig-topo small{ display:block; font-size:9px; font-weight:600; color:#737373; letter-spacing:.02em; }
.ig-topo b{ font-size:13px; }

.ig-rolagem{ position:relative; overflow:hidden; }
.ig-feed{ position:relative; will-change:transform; }

.ig-post{ padding-bottom:10px; }
.ig-post-topo{
    display:flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    font-size:12px;
}
.ig-avatar{
    display:grid;
    place-items:center;
    width:24px; height:24px;
    border-radius:50%;
    background:var(--cor-projeto);
    color:#fff;
    font-weight:800;
    font-size:12px;
    box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #e1306c;
}
.ig-mais{ margin-left:auto; font-size:10px; letter-spacing:1px; }

.ig-carrossel{
    width:var(--arte-largura, 100%);
    margin:0 auto;
    position:relative;
    overflow:hidden;
    background:#f2f2f2;
}
.ig-slides{ display:flex; will-change:transform; }
.ig-slide{
    position:relative;
    flex:0 0 100%;
    aspect-ratio:3 / 4;
    overflow:hidden;
}
.ig-slide img{ width:100%; height:100%; object-fit:cover; user-select:none; }
/* Arte ainda não enviada: mostra um bloco com o nome do slide */
.ig-slide.vazia{
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(215,38,61,.06) 14px 28px),
        var(--pink);
}
.ig-slide.vazia img{ visibility:hidden; }
.ig-slide.vazia::after{
    content:attr(data-rotulo);
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-family:var(--display);
    font-size:15px;
    font-weight:700;
    color:var(--red-deep);
    opacity:.6;
}
.ig-selo{
    position:absolute;
    top:10px; right:10px;
    padding:3px 8px;
    border-radius:99px;
    background:rgba(0,0,0,.65);
    color:#fff;
    font-size:11px;
    font-weight:600;
}

.ig-acoes{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:6px 10px 2px;
}
.ig-acoes svg{ width:20px; height:20px; }
.ig-acoes > svg{ justify-self:end; }
.ig-acoes-esq{ display:flex; gap:12px; }
.ig-acoes-esq svg:first-child{ transition:fill .3s ease, stroke .3s ease, transform .3s ease; }
/* o post em destaque ganha a curtida */
.ig-post-ativo .ig-acoes-esq svg:first-child{ fill:#ff3040; stroke:#ff3040; transform:scale(1.08); }
.ig-pontos{ display:flex; gap:4px; }
.ig-pontos i{
    width:6px; height:6px;
    border-radius:50%;
    background:#c7c7c7;
    transition:background .2s ease, transform .2s ease;
}
.ig-pontos i.ativo{ background:#0095f6; transform:scale(1.1); }

/* legenda cortada em 2 linhas, como no Instagram */
.ig-legenda{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    margin:4px 10px 0;
    font-size:12px;
}
/* foto de perfil */
.ig-avatar img, .ig-nav-avatar img, .perfil-avatar img{
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
}
.ig-avatar:has(img), .ig-nav-avatar:has(img), .perfil-avatar:has(img){ background:#fff; overflow:hidden; }
.ig-legenda b{ font-weight:700; }

.ig-nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:6px 6px 12px;
    border-top:1px solid #efefef;
    background:#fff;
}
.ig-nav svg{ width:19px; height:19px; }
.ig-nav-avatar{
    width:19px; height:19px;
    border-radius:50%;
    background:var(--cor-projeto);
    box-shadow:0 0 0 1.5px #000 inset, 0 0 0 1.5px #fff inset;
}

/* Fora do modo 3D o feed e os carrosséis rolam com o dedo */
.vitrine:not(.modo-3d) .ig-rolagem{
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
}
.vitrine:not(.modo-3d) .ig-carrossel{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.vitrine:not(.modo-3d) .ig-rolagem::-webkit-scrollbar,
.vitrine:not(.modo-3d) .ig-carrossel::-webkit-scrollbar{ display:none; }
.vitrine:not(.modo-3d) .ig-slide{ scroll-snap-align:start; }
.vitrine:not(.modo-3d) .vitrine-palco{ grid-template-columns:1fr; }
.vitrine:not(.modo-3d) .celular-cena{ height:min(700px, 82svh); }

/* =========================================================
   ANIMAÇÕES AO ROLAR (index e páginas de projeto)
========================================================= */
/* Usa "translate" (e não "transform") para não brigar com o hover dos cards
   nem com a animação de entrada do topo. A classe .js-revelar é colocada pelo script. */
.js-revelar .revelar{
    opacity:0;
    translate:0 60px;
    transition:
        opacity .9s ease var(--atraso, 0s),
        translate 1.1s cubic-bezier(.22,1,.36,1) var(--atraso, 0s),
        transform .35s ease;
}
.js-revelar .revelar.visivel{ opacity:1; translate:none; }

/* Chegando por transição de página, a entrada em camadas já cuida do movimento */
body.entrando .revelar{ transition:none; }

/* Parallax do topo do index (valores definidos pelo script) */
.hero-word, .hero-meta{ will-change:translate; }

/* =========================================================
   TRANSIÇÃO DE PÁGINA (parallax)
========================================================= */
.cortina{
    position:fixed;
    inset:0;
    z-index:100;
    pointer-events:none;
}

/* Saída: o elemento clicado se expande e a página sobe mais devagar */
.cortina-saida{ transition:clip-path .7s cubic-bezier(.76,0,.24,1); }
body.saindo main{
    transform:translateY(-8vh) scale(.97);
    opacity:.6;
    transition:transform .7s cubic-bezier(.76,0,.24,1), opacity .7s ease;
}

/* Entrada: a cortina sobe rápido e o conteúdo vem em camadas */
.cortina-entrada{ animation:cortina-sobe .9s cubic-bezier(.76,0,.24,1) .1s both; }
@keyframes cortina-sobe{
    to{ transform:translateY(-100%); }
}
@keyframes camada-sobe{
    from{ transform:translateY(var(--desloc, 80px)); opacity:0; }
    to{ transform:none; opacity:1; }
}
body.entrando .projeto-hero > *,
body.entrando .projeto-capa,
body.entrando .projetos-intro,
body.entrando .grid-projetos .proj{
    animation:camada-sobe 1.1s cubic-bezier(.22,1,.36,1) both;
}
/* página de projeto */
body.entrando .voltar{ --desloc:40px; animation-delay:.45s; }
body.entrando .projeto-hero-topo{ --desloc:70px; animation-delay:.5s; }
body.entrando .projeto-hero h1{ --desloc:110px; animation-delay:.55s; }
body.entrando .projeto-resumo{ --desloc:150px; animation-delay:.62s; }
body.entrando .projeto-ficha{ --desloc:190px; animation-delay:.7s; }
body.entrando .projeto-capa{ --desloc:260px; animation-delay:.75s; }
/* volta ao index */
body.entrando .projetos-intro{ --desloc:60px; animation-delay:.45s; }
body.entrando .grid-projetos .proj:nth-child(1){ --desloc:120px; animation-delay:.5s; }
body.entrando .grid-projetos .proj:nth-child(2){ --desloc:180px; animation-delay:.55s; }
body.entrando .grid-projetos .proj:nth-child(3){ --desloc:220px; animation-delay:.6s; }
body.entrando .grid-projetos .proj:nth-child(4){ --desloc:260px; animation-delay:.65s; }
body.entrando .grid-projetos .proj:nth-child(5){ --desloc:300px; animation-delay:.7s; }

/* =========================================================
   RESPONSIVO
========================================================= */
@media (max-width:900px){
    .nav{
        position:fixed;
        top:78px; left:0; right:0;
        background:var(--bg);
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:10px var(--pad) 20px;
        border-bottom:1px solid var(--line);
        transform:translateY(-130%);
        transition:transform .3s ease;
    }
    .nav.open{ transform:translateY(0); }
    .nav a{ padding:14px 0; width:100%; border-bottom:1px solid var(--line); }
    .nav-cta{ margin-top:14px; text-align:center; }
    .menu-toggle{ display:flex; }

    .grid-projetos{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
    .proj-a, .proj-b, .proj-c, .proj-d, .proj-e{ grid-column:span 2; grid-row:span 2; }

    .sobre{ grid-template-columns:1fr; }
    .sobre-objeto{ order:-1; max-width:340px; margin:0 auto; }

    .contato{ grid-template-columns:1fr; }

    .projeto-ficha{ grid-template-columns:repeat(2, 1fr); }
    .projeto-ficha div{ padding:20px 20px 20px 0; border-right:0; border-bottom:1px solid var(--line); }
    .projeto-ficha div + div{ padding-left:0; }
    .projeto-bloco{ grid-template-columns:1fr; gap:20px; margin-bottom:80px; }
    .projeto-rotulo{ position:static; }
    .projeto-capa, .projeto-galeria, .projeto-destaque{ margin-bottom:80px; }
    .projeto-galeria{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:160px; }
    .galeria-item, .galeria-alta, .galeria-media{ grid-column:span 1; grid-row:span 2; }
    .galeria-larga{ grid-column:span 2; grid-row:span 2; }
}

@media (max-width:560px){
    .hero-meta{ flex-direction:column; align-items:flex-start; gap:14px; }
    .trajetoria-topo{ flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:32px; }
    .linha-do-tempo{ margin:0 calc(var(--pad) * -1); padding-left:var(--pad); padding-right:var(--pad); scroll-padding-left:var(--pad); }
    .projeto-hero{ padding-top:120px; }
    .projeto-ficha{ grid-template-columns:1fr; }
    .projeto-galeria{ grid-template-columns:1fr; grid-auto-rows:220px; }
    .galeria-item, .galeria-larga, .galeria-alta, .galeria-media{ grid-column:span 1; grid-row:span 1; }
    .projeto-numeros{ grid-template-columns:1fr; }
    .projeto-seguinte{ min-height:200px; padding:24px; }
}

/* =========================================================
   ACESSIBILIDADE — MOVIMENTO REDUZIDO
========================================================= */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hero-word, .hero-meta{ animation:none; opacity:1; transform:none; }
    .faixa-track{ animation:none; }
    .scroll-cue span{ animation:none; }
    .proj{ transition:none; }
    .projeto-capa-moldura img, .galeria-item img{ transform:none; }
    .projeto-seguinte, .projeto-seguinte-seta, .voltar{ transition:none; }
}

/* =========================================================
   TEMA SIEG — identidade visual da SIEG na página do projeto
   Paleta institucional: Primária #005FE9 · Clara #2F8CFF · Acento #69ACFF
   Ciano #4FC3F7 · Profunda #13346F · Base #0A1F44 · Neutro claro #F2F4F8
   Cinza #88919E · Grafite #2A2F3A — fonte Figtree
========================================================= */
.tema-sieg{
    --sieg-primaria:#005FE9;
    --sieg-clara:#2F8CFF;
    --sieg-acento:#69ACFF;
    --sieg-ciano:#4FC3F7;
    --sieg-profunda:#13346F;
    --sieg-base:#0A1F44;
    --sieg-neutro:#F2F4F8;
    --sieg-cinza:#88919E;
    --sieg-grafite:#2A2F3A;

    /* os tokens do site passam a apontar para a paleta da SIEG */
    --bg:var(--sieg-neutro);
    --ink:var(--sieg-base);
    --red:var(--sieg-primaria);
    --red-deep:var(--sieg-profunda);
    --pink:#DFE9FB;               /* azul bem claro para cards, tirado da Primária sobre o Neutro claro */
    --graphite:var(--sieg-grafite);
    --line:rgba(10,31,68,.12);
    --cor-projeto:var(--sieg-primaria);

    --display:"Figtree", sans-serif;
    --body:"Figtree", sans-serif;
}
.tema-sieg h1,
.tema-sieg h2,
.tema-sieg h3{ font-weight:800; letter-spacing:-.02em; }
.tema-sieg .site-header{ background:rgba(242,244,248,.9); }
.tema-sieg .site-footer{ background:var(--sieg-base); }
.tema-sieg ::selection{ background:var(--sieg-acento); color:var(--sieg-base); }

/* Capa de abertura em tela cheia */
.capa-cheia{
    position:relative;
    max-width:none;
    height:100vh;
    min-height:520px;
    padding:0;
    margin:0;
}
.capa-cheia .projeto-capa-moldura{
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    background:var(--sieg-base);
}
/* imagem com sobra em cima e embaixo para o parallax nunca mostrar o fundo */
.capa-cheia .projeto-capa-moldura img{
    position:absolute;
    left:0; top:-12%;
    height:124%;
    object-position:40% 50%;
}
.capa-cheia .projeto-capa-moldura::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:22%;
    background:linear-gradient(transparent, rgba(10,31,68,.55));
    pointer-events:none;
}
.capa-seta{
    position:absolute;
    bottom:32px; left:50%;
    width:40px; height:40px;
    border:2px solid rgba(255,255,255,.7);
    border-radius:50%;
    transform:translateX(-50%);
    z-index:2;
}
.capa-seta span{
    position:absolute;
    top:9px; left:50%;
    width:9px; height:9px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:translateX(-50%) rotate(45deg);
    animation:capa-seta 1.8s ease infinite;
}
@keyframes capa-seta{
    0%{ top:9px; opacity:1; }
    80%{ opacity:0; }
    100%{ top:19px; opacity:0; }
}
.tema-sieg .projeto-hero{ padding-top:90px; }

/* Entrada pela transição: a capa chega primeiro */
body.tema-sieg.entrando .capa-cheia{ --desloc:40px; animation-delay:.3s; }

/* Detalhes da marca */
.tema-sieg .projeto-hero .proj-tag{ background:var(--sieg-primaria); }
.tema-sieg .projeto-rotulo span{ color:var(--sieg-clara); }
.tema-sieg .ig-slide.vazia{
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,95,233,.07) 14px 28px),
        var(--pink);
}
.tema-sieg .ig-avatar,
.tema-sieg .ig-nav-avatar{ background:var(--sieg-primaria); }

/* Frase de destaque vira uma faixa em azul Base */
.tema-sieg .projeto-destaque{
    max-width:none;
    padding:110px max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    background:var(--sieg-base);
    color:#fff;
}
.tema-sieg .projeto-destaque p::before{ color:var(--sieg-ciano); }
.tema-sieg .projeto-destaque cite{ color:var(--sieg-acento); }

/* Próximo projeto com degradê da marca */
.tema-sieg .projeto-seguinte{
    background:linear-gradient(120deg, var(--sieg-primaria), var(--sieg-profunda));
}

@media (max-width:900px){
    .capa-cheia{ height:auto; min-height:0; margin-top:78px; }
    .capa-cheia .projeto-capa-moldura{ height:auto; aspect-ratio:16 / 9; }
    .capa-seta{ display:none; }
    .tema-sieg .projeto-hero{ padding-top:56px; }
    .tema-sieg .projeto-destaque{ padding-top:80px; padding-bottom:80px; }
}
@media (prefers-reduced-motion: reduce){
    .capa-seta span{ animation:none; }
}

/* =========================================================
   TROCA DE IDV — abertura das páginas de projeto (troca-idv.js)
   A identidade do portfólio é repintada pela do cliente.
========================================================= */
body.idv-abrindo{ overflow:hidden; }

.idv-troca{
    position:fixed;
    inset:0;
    z-index:120;
    cursor:pointer;
    clip-path:inset(0 0 0 0);
    transition:clip-path .9s cubic-bezier(.76,0,.24,1);
}
.idv-troca.idv-revelar{ clip-path:inset(0 0 100% 0); pointer-events:none; }

.idv-camada{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    padding:0 var(--pad);
    background:var(--idv-fundo);
    color:var(--idv-texto);
    text-align:center;
}

/* origem: chega na cor do card clicado e assenta no fundo do portfólio */
.idv-camada-origem{ animation:idv-assentar .5s ease both; }
@keyframes idv-assentar{ from{ background:var(--idv-entrada); } }

/* destino: a cor do cliente se espalha a partir do centro como uma onda */
.idv-camada-destino{
    clip-path:circle(0% at 50% 50%);
    transition:clip-path 1.1s cubic-bezier(.65,0,.35,1);
}
.idv-repintar .idv-camada-destino{ clip-path:circle(150% at 50% 50%); }

.idv-rotulo{
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--idv-destaque);
}

.idv-marca{ display:grid; justify-items:center; gap:10px; }
.idv-marca img{ width:min(420px, 70vw); }
.idv-marca b{
    max-width:90vw;
    text-wrap:balance;
    font-size:clamp(3rem, 1.5rem + 8vw, 9rem);
    font-weight:800;
    line-height:.9;
    letter-spacing:-.03em;
}
.idv-ponto{ color:var(--idv-destaque); }
.idv-marca small{ font-size:clamp(1rem, .9rem + .5vw, 1.35rem); font-weight:500; opacity:.8; }

.idv-paleta{ display:flex; align-items:center; gap:10px; }
.idv-paleta i{
    width:34px; height:34px;
    border-radius:50%;
    box-shadow:0 0 0 1.5px rgba(127,127,127,.25);
}
.idv-amostra{ margin-left:10px; font-size:1.6rem; font-weight:700; }
.idv-amostra small{ font-size:.8rem; font-weight:500; opacity:.7; }

/* entrada dos elementos de cada camada */
/* (esperam o fundo assentar antes de subir) */
.idv-camada-origem > *{ opacity:0; }
.idv-iniciar .idv-camada-origem > *{ animation:idv-subir .7s cubic-bezier(.22,1,.36,1) .3s both; }
.idv-iniciar .idv-camada-origem > :nth-child(2){ animation-delay:.38s; }
.idv-iniciar .idv-camada-origem > :nth-child(3){ animation-delay:.46s; }

.idv-camada-destino > *{ opacity:0; translate:0 30px; transition:opacity .6s ease, translate .8s cubic-bezier(.22,1,.36,1); }
.idv-repintar .idv-camada-destino > *{ opacity:1; translate:none; }
.idv-repintar .idv-camada-destino > :nth-child(1){ transition-delay:.35s; }
.idv-repintar .idv-camada-destino > :nth-child(2){ transition-delay:.45s; }
.idv-repintar .idv-camada-destino > :nth-child(3){ transition-delay:.55s; }

/* a paleta do cliente entra bolinha por bolinha */
.idv-camada-destino .idv-paleta i{ scale:0; transition:scale .5s cubic-bezier(.34,1.56,.64,1); }
.idv-repintar .idv-camada-destino .idv-paleta i{ scale:1; }
.idv-repintar .idv-camada-destino .idv-paleta i:nth-child(1){ transition-delay:.6s; }
.idv-repintar .idv-camada-destino .idv-paleta i:nth-child(2){ transition-delay:.67s; }
.idv-repintar .idv-camada-destino .idv-paleta i:nth-child(3){ transition-delay:.74s; }
.idv-repintar .idv-camada-destino .idv-paleta i:nth-child(4){ transition-delay:.81s; }
.idv-repintar .idv-camada-destino .idv-paleta i:nth-child(n+5){ transition-delay:.88s; }

@keyframes idv-subir{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }

@media (max-width:560px){
    .idv-paleta i{ width:26px; height:26px; }
    .idv-amostra{ font-size:1.3rem; }
}

/* =========================================================
   TEMA MEMÓRIA AMORFA — identidade da instalação
   Preto #0E0E0E · Branco #F4F4F4 · Cinzas #9A9A9A / #3A3A3A · Manrope
========================================================= */
.tema-amorfa{
    --amorfa-preto:#0E0E0E;
    --amorfa-branco:#F4F4F4;
    --amorfa-cinza:#9A9A9A;
    --amorfa-escuro:#000000;

    --bg:var(--amorfa-preto);
    --ink:var(--amorfa-branco);
    --red:var(--amorfa-branco);
    --red-deep:var(--amorfa-branco);
    --pink:#1C1C1C;                 /* cinza bem escuro: molduras e fundos de imagem */
    --graphite:rgba(244,244,244,.62);
    --line:rgba(244,244,244,.16);
    --cor-projeto:var(--amorfa-branco);

    --display:"Manrope", sans-serif;
    --body:"Manrope", sans-serif;
}
.tema-amorfa h1,
.tema-amorfa h2,
.tema-amorfa h3{ font-weight:800; letter-spacing:-.04em; }
.tema-amorfa .site-header{ background:rgba(14,14,14,.9); }
.tema-amorfa .site-footer{ background:var(--amorfa-escuro); }
.tema-amorfa ::selection{ background:var(--amorfa-branco); color:var(--amorfa-preto); }
.tema-amorfa .projeto-hero .proj-tag{ color:var(--amorfa-preto); }
.tema-amorfa .projeto-seguinte{ color:var(--amorfa-preto); }

/* capa com o título do memorial por cima do rosto */
.capa-amorfa .projeto-capa-moldura::after{ background:linear-gradient(transparent 40%, rgba(0,0,0,.75)); height:100%; }
.capa-amorfa .projeto-capa-moldura img{ object-position:50% 30%; filter:grayscale(1) contrast(1.05); }
.capa-titulo{
    position:absolute;
    inset:0;
    z-index:1;
    display:grid;
    place-content:center;
    justify-items:center;
    color:var(--amorfa-branco);
    font-family:var(--display);
    line-height:.85;
    pointer-events:none;
}
.capa-titulo span{ font-size:clamp(2rem, 1rem + 4vw, 5rem); font-weight:400; letter-spacing:-.03em; }
.capa-titulo b{ font-size:clamp(4.5rem, 1rem + 15vw, 16rem); font-weight:800; letter-spacing:-.06em; }
body.tema-amorfa.entrando .capa-cheia{ --desloc:40px; animation-delay:.3s; }

/* faixa do desafio: creme sobre marrom, invertida */
.tema-amorfa .desafio .capitulo-num{ color:var(--amorfa-preto); opacity:.75; }

/* três pilares */
.pilares{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    max-width:var(--wrap);
    margin:0 auto 64px;
    padding:0 var(--pad);
}
.pilar{
    padding:32px 28px;
    border-radius:26px;
    background:var(--cartao-fundo, var(--ink));
    color:var(--cartao-texto, var(--bg));
}
.pilar h3{ font-size:clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); line-height:1; margin-bottom:16px; }
.pilar p{ font-size:1.02rem; line-height:1.55; }

/* moodboard */
.moodboard{
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.moodboard-imagem.galeria-item{ grid-column:auto; grid-row:auto; aspect-ratio:1088 / 806; border-radius:26px; }
.moodboard figcaption{ margin-top:14px; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); }

/* renders da instalação */
.renders{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    max-width:var(--wrap);
    margin:0 auto 80px;
    padding:0 var(--pad);
}
.renders .galeria-item{ grid-column:auto; grid-row:auto; aspect-ratio:16 / 9; border-radius:22px; }
.renders .render-largo{ grid-column:1 / -1; }

/* jornada do visitante */
.jornada{
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.jornada-titulo{ font-size:1.6rem; margin-bottom:20px; }
.jornada ol{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}
.jornada li{
    display:grid;
    align-content:start;
    gap:8px;
    padding:24px;
    border-radius:22px;
    background:var(--cartao-fundo, var(--ink));
    color:var(--cartao-texto, var(--bg));
}
.jornada li span{ font-family:var(--display); font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-.04em; opacity:.35; }
.jornada li b{ font-family:var(--display); font-size:1.35rem; font-weight:800; letter-spacing:-.03em; }
.jornada li p{ font-size:.95rem; line-height:1.5; }

/* a entidade: render grande + duas fotos de processo */
.entidade{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:18px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.entidade .galeria-item{ grid-column:auto; grid-row:auto; border-radius:22px; aspect-ratio:9 / 16; }
.entidade .entidade-principal{ aspect-ratio:auto; background:#000; }
.entidade .entidade-principal img{ object-fit:cover; object-position:50% 40%; }

/* fecho: a frase final sobre o rosto */
.fecho-amorfa{
    position:relative;
    display:grid;
    place-items:center;
    min-height:90vh;
    margin-bottom:120px;
    overflow:hidden;
    text-align:center;
    color:var(--amorfa-branco);
}
.fecho-amorfa img{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 35%;
    filter:grayscale(1) brightness(.4);
}
.fecho-amorfa div{ position:relative; padding:0 var(--pad); }
.fecho-amorfa p{ font-size:clamp(1.1rem, .9rem + .8vw, 1.6rem); margin-bottom:10px; }
.fecho-amorfa strong{
    display:block;
    font-family:var(--display);
    font-size:clamp(2.6rem, 1rem + 6vw, 6.4rem);
    font-weight:800;
    line-height:.95;
    letter-spacing:-.05em;
    text-wrap:balance;
}

/* tudo em preto, branco e cinza: as imagens também perdem a cor */
.tema-amorfa main img{ filter:grayscale(1); }
.tema-amorfa .proj-tag{ background:var(--amorfa-branco); }
.tema-amorfa .desafio{ background:var(--amorfa-branco); color:var(--amorfa-preto); }

/* papel do Luís na abertura */
.projeto-papel{
    margin-top:18px;
    max-width:52ch;
    padding-left:16px;
    border-left:2px solid var(--cor-projeto);
    font-size:1.05rem;
    font-weight:600;
}

/* créditos da equipe */
.equipe{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:18px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.equipe-destaque{
    display:grid;
    align-content:end;
    gap:10px;
    min-height:220px;
    padding:28px;
    border-radius:26px;
    background:var(--cartao-fundo, var(--ink));
    color:var(--cartao-texto, var(--bg));
}
.equipe-destaque b{ font-family:var(--display); font-size:clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.equipe-destaque span{ font-size:1rem; line-height:1.45; }
.equipe ul{
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.equipe li{
    display:flex;
    align-items:flex-end;
    padding:22px;
    border-radius:22px;
    box-shadow:inset 0 0 0 1.5px var(--line);
    font-family:var(--display);
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:-.02em;
}

@media (max-width:900px){
    .pilares, .equipe{ grid-template-columns:1fr; }
    .jornada ol{ grid-template-columns:1fr 1fr; }
    .entidade{ grid-template-columns:1fr 1fr; }
    .entidade .entidade-principal{ grid-column:1 / -1; aspect-ratio:4 / 5; }
    /* celular: a moldura dos modelos 3D tem a altura do próprio canvas (nada fica cortado) */
    .renders .render-largo:has(.visualizador3d){ aspect-ratio:1 / 1; }
    .visualizador3d{ min-height:0; }
    .renders{ grid-template-columns:1fr; }
    .moodboard, .jornada, .entidade, .equipe{ margin-bottom:80px; }
    .fecho-amorfa{ min-height:70vh; margin-bottom:80px; }
}
@media (max-width:560px){
    .jornada ol{ grid-template-columns:1fr; }
}

/* =========================================================
   VISUALIZADOR 3D (visualizador3d.js)
========================================================= */
.visualizador3d{
    position:relative;
    width:100%;
    height:100%;
    min-height:320px;
    background:radial-gradient(circle at 50% 40%, #242424, #000 70%);
    cursor:grab;
    touch-action:pan-y;
}
.visualizador3d:active{ cursor:grabbing; }
.visualizador3d canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.visualizador3d > img{ transition:opacity .6s ease; }
.visualizador3d.carregado > img{ opacity:0; pointer-events:none; }
.visualizador3d-dica{
    position:absolute;
    left:50%; bottom:16px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.04em;
    transform:translateX(-50%);
    opacity:0;
    transition:opacity .4s ease;
    pointer-events:none;
    z-index:1;
}
.visualizador3d.carregado .visualizador3d-dica{ opacity:1; }
.visualizador3d.mexeu .visualizador3d-dica{ opacity:0; }
/* na página em preto e branco, as cenas com materiais coloridos também perdem a cor */
.tema-amorfa .visualizador3d canvas{ filter:grayscale(1); }

/* =========================================================
   TEMA BETWEEN BUBBLES — identidade do jogo
   Azul-marinho #002C8F · Azul #41A5DD · Rosa #E074A2 · Roxo #6A1A54
   Claro #E9F5FD · Readex Pro
========================================================= */
.tema-bb{
    --bb-marinho:#002C8F;
    --bb-azul:#41A5DD;
    --bb-azul-medio:#3F95C5;
    --bb-rosa:#E074A2;
    --bb-roxo:#6A1A54;
    --bb-claro:#E9F5FD;

    --bg:var(--bb-marinho);
    --ink:var(--bb-claro);
    --red:var(--bb-rosa);
    --red-deep:var(--bb-rosa);
    --pink:#123E9E;                 /* azul um pouco mais claro: molduras e fundos de imagem */
    --graphite:rgba(233,245,253,.7);
    --line:rgba(233,245,253,.18);
    --cor-projeto:var(--bb-azul);

    --display:"Readex Pro", sans-serif;
    --body:"Readex Pro", sans-serif;
}
.tema-bb h1, .tema-bb h2, .tema-bb h3{ font-weight:700; letter-spacing:-.03em; }
.tema-bb .site-header{ background:rgba(0,44,143,.9); }
.tema-bb .site-footer{ background:#001E66; }
.tema-bb ::selection{ background:var(--bb-rosa); color:#fff; }
.tema-bb .projeto-hero .proj-tag{ background:var(--bb-rosa); color:#fff; }
.tema-bb .capitulo-num{ color:var(--bb-azul); }
.tema-bb .desafio{ background:var(--bb-claro); color:var(--bb-marinho); }
.tema-bb .desafio .capitulo-num{ color:var(--bb-rosa); }
.tema-bb .projeto-seguinte{ background:var(--bb-azul); color:var(--bb-marinho); }
.tema-bb .projeto-papel{ border-left-color:var(--bb-rosa); }

/* capa: logo pixelado, a dupla e bolhas flutuando */
.capa-bb{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px;
    min-height:100vh;
    padding:120px max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))) 80px;
    overflow:hidden;
    background:radial-gradient(circle at 75% 45%, #0B3CAB, var(--bb-marinho) 60%);
}
.capa-bb-conteudo{ position:relative; z-index:1; }
.capa-bb-logo{ width:min(520px, 100%); image-rendering:pixelated; }
.capa-bb-slogan{
    margin-top:18px;
    font-size:clamp(1.1rem, .9rem + 1vw, 1.8rem);
    font-weight:600;
    color:var(--bb-claro);
}
.capa-bb-dupla{ position:relative; z-index:1; width:100%; max-width:620px; justify-self:center; animation:bb-flutuar 5s ease-in-out infinite; }
@keyframes bb-flutuar{ 50%{ transform:translateY(-14px) rotate(-1.5deg); } }
.bolha{
    position:absolute;
    width:var(--t, 60px);
    aspect-ratio:1;
    border-radius:22%;
    background:rgba(65,165,221,.35);
    box-shadow:inset -8px -8px 0 rgba(255,255,255,.08), inset 10px 10px 0 rgba(255,255,255,.18);
    animation:bb-subir var(--d, 9s) linear infinite;
    opacity:.8;
}
.bolha-1{ --t:70px; left:8%; bottom:-80px; --d:11s; }
.bolha-2{ --t:44px; left:46%; bottom:-60px; --d:8s; animation-delay:-3s; }
.bolha-3{ --t:90px; right:10%; bottom:-100px; --d:13s; animation-delay:-6s; background:rgba(224,116,162,.3); }
.bolha-4{ --t:36px; right:38%; bottom:-50px; --d:9s; animation-delay:-1s; }
@keyframes bb-subir{ to{ transform:translateY(calc(-100vh - 160px)) rotate(25deg); } }
.capa-bb .capa-seta{ border-color:rgba(233,245,253,.6); }

/* a ideia: personagens ao lado da tela inicial */
.bb-ideia{
    display:grid;
    grid-template-columns:1fr 2.6fr 1fr;
    align-items:end;
    justify-items:center;
    gap:24px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.bb-personagem img{ width:auto; max-width:100%; max-height:clamp(140px, 22vw, 300px); image-rendering:pixelated; }
.bb-tela.galeria-item{ grid-column:auto; grid-row:auto; aspect-ratio:16 / 9; border-radius:22px; }

/* identidade: paleta + elenco */
.bb-identidade{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    align-items:center;
    gap:40px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.bb-paleta{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.bb-paleta span{
    display:flex;
    align-items:flex-end;
    aspect-ratio:3 / 4;
    padding:10px;
    border-radius:16px;
    background:var(--c);
    box-shadow:inset 0 0 0 1.5px rgba(233,245,253,.25);
    color:#fff;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.04em;
}
.bb-paleta span.claro{ color:var(--bb-marinho); }
.bb-elenco{ display:flex; align-items:flex-end; justify-content:space-around; gap:20px; }
.bb-elenco img{ width:auto; max-width:30%; max-height:clamp(110px, 18vw, 240px); image-rendering:pixelated; }
.bb-paleta span{ min-width:0; overflow:hidden; }

/* etapas do desenvolvimento */
.bb-etapas{ grid-template-columns:1fr 1fr; }
.bb-etapa-num{ display:block; margin-bottom:12px; font-size:2.4rem; font-weight:700; line-height:1; color:var(--bb-rosa); }

/* as quatro fases, lado a lado como no memorial */
.bb-fases{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.bb-fases img{
    width:100%;
    aspect-ratio:9 / 26;
    object-fit:cover;
    object-position:bottom;
    border-radius:16px;
    image-rendering:pixelated;
}
.bb-fases figcaption{ margin-top:10px; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite); }

/* equipe: nomes com o papel de cada um */
.equipe li small{ display:block; margin-top:6px; font-family:var(--body); font-size:.85rem; font-weight:400; letter-spacing:0; color:var(--graphite); }
.equipe li{ flex-direction:column; align-items:flex-start; justify-content:flex-end; }
.tema-bb .equipe ul{ grid-template-columns:1fr; }

/* fecho */
.fecho-bb{
    display:grid;
    justify-items:center;
    gap:24px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:80px var(--pad);
    text-align:center;
}
.fecho-bb img{ width:min(420px, 80%); animation:bb-flutuar 5s ease-in-out infinite; }
.fecho-bb strong{ font-family:var(--display); font-size:clamp(2.4rem, 1rem + 5vw, 5.4rem); font-weight:700; line-height:1; letter-spacing:-.04em; }

@media (max-width:900px){
    .capa-bb{ grid-template-columns:1fr; text-align:center; justify-items:center; padding-top:110px; }
    .capa-bb-dupla{ max-width:420px; }
    .bb-ideia{ grid-template-columns:1fr 1fr; }
    .bb-ideia .bb-tela{ grid-column:1 / -1; grid-row:1; }
    .bb-ideia .bb-personagem{ max-width:150px; justify-self:center; }
    .bb-identidade{ grid-template-columns:1fr; }
    .bb-etapas{ grid-template-columns:1fr; }
    .bb-fases{ grid-template-columns:1fr 1fr; }
    .bb-paleta{ gap:6px; }
    .bb-paleta span{ aspect-ratio:1 / 1.3; padding:6px; border-radius:12px; font-size:0; }
    .bb-ideia, .bb-identidade, .bb-fases, .fecho-bb{ margin-bottom:80px; }
}
@media (prefers-reduced-motion: reduce){
    .bolha, .capa-bb-dupla, .fecho-bb img{ animation:none; }
}

/* card do Between Bubbles no index: a dupla sobre o azul do jogo */
.proj.proj-capa-bb{ background:#002C8F; color:#E9F5FD; }
.proj-capa-bb::before{
    background:
        linear-gradient(to top, rgba(0,30,102,.9), rgba(0,30,102,0) 55%),
        var(--capa) 50% 35% / 82% auto no-repeat,
        radial-gradient(circle at 50% 40%, #0B3CAB, #002C8F 70%);
}

/* imagens com width/height no HTML: a altura acompanha a largura do CSS (sem esticar).
   :where mantém a especificidade baixa, para galerias com height:100% continuarem valendo */
:where(.tema-bb) img{ height:auto; }
.bb-personagem img, .bb-elenco img, .capa-bb-dupla, .fecho-bb img, .capa-bb-logo{ object-fit:contain; }

/* =========================================================
   JOGO UNITY NA PÁGINA (jogo-unity.js)
========================================================= */
[data-jogo-unity]{ position:relative; isolation:isolate; }
[data-jogo-unity] > img{ transition:filter .3s ease; }
/* com o botão "Jogar", a capa escurece e desfoca um pouco para o botão se destacar */
[data-jogo-unity]:has(.jogo-jogar) > img{ filter:brightness(.5) blur(2px); }
[data-jogo-unity]:has(.jogo-jogar):hover > img{ filter:brightness(.4) blur(3px); }
.jogo-capa{
    position:absolute;
    inset:0;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:10px;
    z-index:2;
    pointer-events:none;
}
.jogo-capa[hidden]{ display:none; }
.jogo-jogar{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    border:0;
    border-radius:999px;
    background:var(--red);
    color:#fff;
    font:700 1.15rem var(--display);
    box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
    cursor:pointer;
    transition:transform .25s ease;
}
.jogo-jogar:hover{ transform:scale(1.05); }
.jogo-capa small{
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:.75rem;
    font-weight:600;
}
.jogo-aviso{
    margin-top:auto;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:.85rem;
    font-weight:600;
    text-align:center;
}
[data-jogo-unity] .jogo-capa:has(.jogo-aviso){ place-content:end center; padding-bottom:14px; }
.jogo-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    background:#000;
    outline:none;
}
.jogo-carregando{
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:12px;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-weight:600;
}
.jogo-carregando[hidden], .jogo-controles[hidden]{ display:none; }
.jogo-barra{ width:min(320px, 60vw); height:8px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; }
.jogo-barra i{ display:block; height:100%; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.jogo-controles{
    position:absolute;
    right:12px; bottom:12px;
    z-index:3;
    display:flex;
    gap:8px;
}
.jogo-controles button{
    padding:7px 14px;
    border:0;
    border-radius:999px;
    background:rgba(0,0,0,.6);
    color:#fff;
    font:600 .8rem var(--body);
    cursor:pointer;
}
.jogo-controles button:hover{ background:rgba(0,0,0,.85); }

/* =========================================================
   TEMA CARTÕES POSTAIS MUSICAIS
   Branco #FFFFFF · Marinho #0C1B2D · Vermelho #D0372A
   Amarelo #FCBD2C · Azul #009CBE · Archivo Black / Archivo
========================================================= */
.tema-cp{
    --cp-marinho:#0C1B2D;
    --cp-vermelho:#D0372A;
    --cp-amarelo:#FCBD2C;
    --cp-azul:#009CBE;
    --cp-papel:#F3EFE6;

    --bg:var(--cp-papel);
    --ink:var(--cp-marinho);
    --red:var(--cp-vermelho);
    --red-deep:var(--cp-vermelho);
    --pink:#E6E0D2;
    --graphite:#4A5260;
    --line:rgba(12,27,45,.14);
    --cor-projeto:var(--cp-vermelho);

    --display:"Story Script", "Archivo Black", sans-serif;
    --body:"Archivo", sans-serif;
}
/* títulos em Story Script: sem caixa-alta, que deixa a fonte manuscrita ilegível */
.tema-cp h1, .tema-cp h2, .tema-cp h3{ font-weight:400; letter-spacing:0; line-height:1; }
.tema-cp .pilar h3{ font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.tema-cp .site-header{ background:rgba(243,239,230,.92); }
.tema-cp .site-footer{ background:var(--cp-marinho); }
.tema-cp ::selection{ background:var(--cp-amarelo); color:var(--cp-marinho); }
.tema-cp .desafio{ background:var(--cp-marinho); color:#fff; }
.tema-cp .desafio .capitulo-num{ color:var(--cp-amarelo); }
.tema-cp .projeto-seguinte{ background:var(--cp-azul); color:#fff; }
.tema-cp .pilar:nth-child(1){ --cartao-fundo:var(--cp-vermelho); --cartao-texto:#fff; }
.tema-cp .pilar:nth-child(2){ --cartao-fundo:var(--cp-amarelo); --cartao-texto:var(--cp-marinho); }
.tema-cp .pilar:nth-child(3){ --cartao-fundo:var(--cp-azul); --cartao-texto:#fff; }
:where(.tema-cp) img{ height:auto; }

/* capa: cartões espalhados numa mesa */
.capa-cp{
    position:relative;
    display:grid;
    place-items:center;
    min-height:100vh;
    padding:110px var(--pad) 70px;
    overflow:hidden;
    background:var(--cp-marinho);
}
.capa-cp-mesa{ position:absolute; inset:0; }
.capa-cp-mesa img{
    position:absolute;
    left:50%; top:52%;
    width:min(46vw, 620px);
    border:10px solid #fff;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r));
    animation:cp-cair .9s cubic-bezier(.22,1,.36,1) both;
}
.capa-cp-mesa img:nth-child(2){ animation-delay:.1s; }
.capa-cp-mesa img:nth-child(3){ animation-delay:.2s; }
.capa-cp-mesa img:nth-child(4){ animation-delay:.3s; }
.capa-cp-mesa img:nth-child(5){ animation-delay:.45s; }
@keyframes cp-cair{ from{ opacity:0; translate:0 -60px; rotate:8deg; } }
.capa-cp-titulo{
    position:relative;
    z-index:1;
    text-align:center;
    color:#fff;
    pointer-events:none;
    transform:rotate(-4deg);
}
.capa-cp-titulo p{
    display:inline-block;
    margin-bottom:10px;
    padding:6px 14px;
    background:var(--cp-amarelo);
    color:var(--cp-marinho);
    font:700 clamp(.9rem, .8rem + .4vw, 1.2rem) var(--body);
    letter-spacing:.06em;
    text-transform:uppercase;
}
.capa-cp-titulo h2{
    font-size:clamp(3.6rem, 1rem + 11vw, 11rem);
    line-height:.9;
    color:#fff;
    -webkit-text-stroke:3px var(--cp-marinho);
    paint-order:stroke fill;
    text-shadow:8px 8px 0 var(--cp-vermelho);
}
.capa-cp .capa-seta{ border-color:rgba(255,255,255,.7); }

/* player do Spotify */
.cp-player{
    max-width:var(--wrap);
    margin:0 auto 48px;
    padding:0 var(--pad);
}
.cp-player p{ margin-bottom:12px; font-weight:700; }
.cp-player iframe{ display:block; border-radius:12px; box-shadow:0 18px 40px -22px rgba(12,27,45,.5); }

/* mesa com os 10 cartões que viram */
.mesa-postais{
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.mesa-dica{ margin-bottom:22px; font-weight:700; color:var(--graphite); }
.mesa-postais ol{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:44px 36px;
}
.postal{ rotate:var(--giro, 0deg); transition:rotate .4s ease; }
.postal:hover{ rotate:0deg; }
.postal-virar{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:3 / 2;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    perspective:1600px;
}
.postal-frente, .postal-verso{
    position:absolute;
    inset:0;
    border:8px solid #fff;
    backface-visibility:hidden;
    box-shadow:0 18px 40px -18px rgba(12,27,45,.55);
    transition:transform .8s cubic-bezier(.3,1.3,.5,1);
}
.postal-verso{ transform:rotateY(180deg); }
.postal-frente img, .postal-verso img{ width:100%; height:100%; object-fit:cover; }
.postal-virar[aria-pressed="true"] .postal-frente{ transform:rotateY(-180deg); }
.postal-virar[aria-pressed="true"] .postal-verso{ transform:rotateY(0deg); }
.postal-legenda{ margin-top:14px; font-weight:600; }
.postal-legenda b{ margin-right:8px; font-family:var(--display); font-weight:400; color:var(--cp-vermelho); }

/* direção visual */
.cp-direcao{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:24px;
    max-width:var(--wrap);
    margin:0 auto 40px;
    padding:0 var(--pad);
}
.cp-moodboard.galeria-item{ grid-column:auto; grid-row:auto; aspect-ratio:1600 / 1132; border-radius:6px; }
.cp-paleta{ display:grid; gap:10px; }
.cp-paleta span{
    display:flex;
    align-items:flex-end;
    padding:12px;
    border-radius:6px;
    background:var(--c);
    box-shadow:inset 0 0 0 1.5px var(--line);
    color:#fff;
    font-weight:700;
    font-size:.85rem;
}
.cp-paleta span.claro{ color:var(--cp-marinho); }
.cp-tecnicas{ margin-bottom:120px; }

/* versos */
.cp-versos{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
}
.cp-versos img{ width:100%; border:8px solid #fff; rotate:var(--r); box-shadow:0 18px 40px -18px rgba(12,27,45,.5); }

/* fecho */
.fecho-cp{
    max-width:var(--wrap);
    margin:0 auto 120px;
    padding:0 var(--pad);
    text-align:center;
}
.fecho-cp strong{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(2.6rem, 1rem + 5.4vw, 6rem);
    line-height:1;
    color:var(--cp-marinho);
    text-shadow:6px 6px 0 var(--cp-amarelo);
}

/* card no index */
.proj.proj-capa-cp{ background:#0C1B2D; color:#fff; }
.proj-capa-cp::before{
    background:
        linear-gradient(to top, rgba(12,27,45,.95) 0%, rgba(12,27,45,.7) 26%, rgba(12,27,45,0) 62%),
        var(--capa) var(--capa-pos, 40% 30%) / cover no-repeat;
}

@media (max-width:900px){
    .capa-cp-mesa img{ width:70vw; border-width:6px; }
    .capa-cp{ min-height:min(100vh, 620px); }
    .capa-cp-mesa img{ top:55%; }
    .mesa-postais ol{ grid-template-columns:1fr; gap:32px; }
    .cp-direcao{ grid-template-columns:1fr; }
    .cp-paleta{ grid-template-columns:repeat(5, 1fr); }
    .cp-paleta span{ aspect-ratio:1; font-size:0; }
    .cp-versos{ grid-template-columns:1fr; }
    .mesa-postais, .cp-versos, .fecho-cp, .cp-tecnicas{ margin-bottom:80px; }
}
@media (prefers-reduced-motion: reduce){
    .capa-cp-mesa img{ animation:none; }
    .postal-frente, .postal-verso{ transition:none; }
}
/* dupla: os dois cards com o mesmo peso */
.tema-cp .equipe{ grid-template-columns:1fr 1fr; }
.tema-cp .equipe-destaque{ --cartao-fundo:var(--cp-marinho); --cartao-texto:#fff; }
.tema-cp .equipe ul{ grid-template-columns:1fr; }
.tema-cp .equipe li{ min-height:220px; padding:28px; border-radius:26px; background:var(--cp-vermelho); color:#fff; box-shadow:none; font-size:clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }
.tema-cp .equipe li small{ color:rgba(255,255,255,.85); font-size:1rem; }
@media (max-width:900px){ .tema-cp .equipe{ grid-template-columns:1fr; } }

/* enquadramento das capas nos cards do index (por projeto e por tamanho de tela) */
.proj-a.proj-com-capa{ --capa-pos:72% 40%; }      /* SIEG: a pessoa no centro, logo à esquerda */
.proj-capa-amorfa{ --capa-pos:50% 30%; }
.proj-capa-cp{ --capa-pos:38% 22%; }
@media (max-width:900px){
    .proj-a.proj-com-capa{ --capa-pos:78% 40%; }
    .proj-capa-cp{ --capa-pos:35% 20%; }
}

/* ===== Cursor personalizado (ver o fim do script.js) =====
   A cor segue a IDV da página: vermelho no portfólio, a cor de destaque em cada projeto. */
body{
    --cursor-cor:var(--cor-projeto, var(--red));
    --cursor-texto:var(--bg);
}
html.cursor-invertido :is(.cursor-ponto, .cursor-anel){
    --cursor-cor:var(--bg);
    --cursor-texto:var(--cor-projeto, var(--red));
}

html.cursor-ativo :is(*, *::before, *::after):not(input, textarea, select, iframe, .jogo-canvas, [contenteditable]){
    cursor:none !important;
}

.cursor-ponto,
.cursor-anel{
    position:fixed;
    top:0;
    left:0;
    z-index:2147483000;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s ease;
    will-change:transform;
}
html.cursor-visivel:not(.cursor-nativo) :is(.cursor-ponto, .cursor-anel){ opacity:1; }

.cursor-ponto::before{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    translate:-50% -50%;
    border-radius:50%;
    background:var(--cursor-cor);
    box-shadow:0 0 0 1.5px color-mix(in srgb, var(--bg) 70%, transparent);
    transition:scale .25s ease;
}

.cursor-anel b{
    position:absolute;
    width:34px;
    height:34px;
    translate:-50% -50%;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1.5px solid var(--cursor-cor);
    color:transparent;
    font:600 11px/1 var(--body);
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1),
               background-color .25s ease, color .2s ease, scale .2s ease;
}

html.cursor-link .cursor-anel b{
    width:54px;
    height:54px;
    background:color-mix(in srgb, var(--cursor-cor) 15%, transparent);
}

html.cursor-rotulo .cursor-anel b{
    width:96px;
    height:96px;
    background:var(--cursor-cor);
    color:var(--cursor-texto);
}
html.cursor-rotulo .cursor-ponto::before{ scale:0; }

html.cursor-pressionado .cursor-anel b{ scale:.82; }

@media (prefers-reduced-motion: reduce){
    .cursor-anel b{ transition:background-color .2s ease, color .2s ease; }
}