/* ==========================================================================
   A JVF — apresentação institucional
   Narrativa em rolagem: abertura → legado → linha do tempo → CEO →
   missão/visão → valores → fecho.
   O movimento é acionado pela rolagem (ver js/institucional-motion.js).
   ========================================================================== */

:root{--navy:#34363a;--navy2:#46494e;--deep:#26282b;--gold:#ffd100;--ink:#1c2a35;--muted:#8a97a1;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;font-weight:300;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.serif-h{font-family:var(--serif);font-weight:500;line-height:1.1}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#b99400;margin-bottom:16px}
.btn{display:inline-block;padding:15px 40px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--navy);color:var(--navy);transition:.35s}
.btn:hover{background:var(--navy);color:#fff}
.btn-gold{border-color:var(--gold);color:var(--gold)}
.btn-gold:hover{background:var(--gold);color:var(--navy)}

/* ---- BARRA DE PROGRESSO DE LEITURA ------------------------------------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:80;transition:width .1s linear}

/* ---- NAV (compartilhada com o resto do site) --------------------------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s;background:linear-gradient(180deg,rgba(52,54,58,.92),rgba(52,54,58,.5) 45%,rgba(52,54,58,0))}
.nav{display:flex;align-items:center;justify-content:center;gap:40px;padding:22px 44px;position:relative}
.nav .left,.nav .right{display:flex;align-items:center;gap:34px;flex:1 1 0;min-width:0}
  /* Os dois lados ocupam metade cada, e o conteúdo de cada um encosta na
     logo: é o que deixa os links agrupados no meio E a logo no centro
     exato. Só centralizar o conjunto (justify-content:center no .nav)
     empurrava a logo 85px para o lado do bloco menor. */
  .nav .left{justify-content:flex-end}
  .nav .right{justify-content:flex-start}
.nav a.link{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:400;position:relative;padding:6px 0}
.nav a.link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.35s}
.nav a.link:hover::after,.nav a.link.active::after{width:100%}
.nav .logo img{height:60px;display:block;transition:.4s}
.nav .search{position:absolute;right:44px;top:50%;transform:translateY(-50%);color:#fff;font-size:19px;opacity:.85}
header.scrolled{background:var(--navy);box-shadow:0 6px 30px rgba(0,0,0,.28)}
header.scrolled .nav{padding:12px 44px}
header.scrolled .nav .logo img{height:44px}

/* ---- MOTION: estado inicial e revelação -------------------------------- */
/* Os elementos com .reveal entram quando cruzam a viewport. O atraso vem de
   --d, aplicado item a item para a entrada acontecer em cascata.           */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.reveal.mostrar{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-36px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.reveal-r{opacity:0;transform:translateX(36px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.reveal-l.mostrar,.reveal-r.mostrar{opacity:1;transform:none}
/* imagem que se revela por trás de uma cortina */
.reveal-img{position:relative;overflow:hidden}
.reveal-img img{transform:scale(1.12);transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.reveal-img.mostrar img{transform:scale(1)}
.reveal-img::after{content:"";position:absolute;inset:0;background:var(--navy);transform:scaleY(1);transform-origin:bottom;transition:transform 1.1s cubic-bezier(.76,0,.24,1)}
.reveal-img.mostrar::after{transform:scaleY(0)}

/* Quem pediu menos movimento no sistema recebe a pagina sem animacao. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-l,.reveal-r{opacity:1;transform:none;transition:none}
  .reveal-img img{transform:none;transition:none}
  .reveal-img::after{display:none}
  .parallax{transform:none!important}
}

/* ---- 1. ABERTURA ------------------------------------------------------- */
.abertura{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--navy);color:#fff;overflow:hidden;padding:140px 44px 120px}
/* O parallax escreve transform no elemento, então a centralização não pode
   depender de transform: fica no wrapper, que só é deslocado no eixo Y. */
.abertura .marca-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform}
.abertura .marca{width:min(58vw,620px);opacity:.07;display:block}
.abertura .conteudo{position:relative;z-index:2;max-width:940px}
.abertura .eyebrow{color:var(--gold)}
.abertura h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6.4vw,86px);line-height:1.06;letter-spacing:-.01em}
.abertura h1 .l2{display:block;color:var(--gold)}
.abertura .sub{margin-top:30px;font-size:16px;letter-spacing:.05em;color:rgba(255,255,255,.62);max-width:520px;margin-left:auto;margin-right:auto;line-height:1.8}
.scrollcue{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.scrollcue i{width:1px;height:54px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.4);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* ---- 2. LEGADO --------------------------------------------------------- */
.legado{max-width:1220px;margin:0 auto;padding:120px 44px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.legado h2{font-size:clamp(32px,4.2vw,54px);margin-bottom:28px}
.legado p{font-size:16.5px;line-height:1.9;color:#42505c;margin-bottom:22px}
.legado .pic{aspect-ratio:4/5}
.legado .pic img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.legado .cap{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}

/* ---- 3. LINHA DO TEMPO ------------------------------------------------- */
.tempo{background:#f7f8f9;padding:110px 44px;border-top:1px solid #eef1f3;border-bottom:1px solid #eef1f3}
.tempo .head{text-align:center;max-width:620px;margin:0 auto 70px}
.tempo .head h2{font-size:clamp(28px,3.6vw,46px)}
.tempo .rule{width:56px;height:2px;background:var(--gold);margin:20px auto 0}
.marcos{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.marcos::before{content:"";position:absolute;left:0;right:0;top:46px;height:1px;background:#dfe5ea}
.marco{position:relative;padding:0 22px;text-align:center}
.marco .dot{width:13px;height:13px;border-radius:50%;background:var(--gold);margin:40px auto 0;position:relative;z-index:2;box-shadow:0 0 0 6px #f7f8f9}
.marco b{display:block;font-family:var(--serif);font-size:clamp(34px,3.4vw,44px);color:var(--navy);line-height:1;margin-top:26px}
.marco .t{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#b99400;margin-top:10px}
.marco p{font-size:14.5px;line-height:1.7;color:#5a6672;margin-top:14px}

/* ---- 4. O CEO ---------------------------------------------------------- */
.ceo{background:var(--navy);color:#fff;padding:120px 44px;position:relative;overflow:hidden}
.ceo .marca-bg{position:absolute;right:-6%;top:12%;width:min(38vw,430px);opacity:.05;pointer-events:none;will-change:transform}
.ceo .conteudo{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:76px;align-items:center;position:relative;z-index:2}
.ceo .retrato{aspect-ratio:3/4}
.ceo .retrato img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.ceo .eyebrow{color:var(--gold)}
.ceo h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.08}
.ceo .cargo{margin-top:14px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ceo ul{list-style:none;margin-top:38px}
.ceo li{position:relative;padding:18px 0 18px 30px;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px;line-height:1.7;color:rgba(255,255,255,.82)}
.ceo li::before{content:"";position:absolute;left:0;top:27px;width:12px;height:1px;background:var(--gold)}
.ceo li:last-child{border-bottom:0}

/* ---- 5. MISSÃO / VISÃO ------------------------------------------------- */
.mv{padding:120px 44px;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:70px}
.mv .col h3{font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:500;margin-bottom:18px;color:var(--navy);line-height:1.2}
.mv .col p{font-size:16.5px;line-height:1.9;color:#42505c}

/* ---- 6. VALORES -------------------------------------------------------- */
.valores{background:var(--deep);color:#fff;padding:120px 44px}
.valores .head{text-align:center;max-width:620px;margin:0 auto 64px}
.valores .head .eyebrow{color:var(--gold)}
.valores .head h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,46px)}
.valores .rule{width:56px;height:2px;background:var(--gold);margin:20px auto 0}
.vgrid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.vitem{background:var(--deep);padding:38px 26px;transition:background .45s;
       display:flex;align-items:center;justify-content:center;
       text-align:center;min-height:132px}
/* No hover o card acende em amarelo. O texto escurece junto: sobre o
   amarelo, o branco do titulo e o dourado do numero sumiriam. */
.vitem:hover{background:var(--gold)}
.vitem:hover h4{color:var(--navy)}
/* O numero de ordem (01, 02...) saiu a pedido do cliente: a lista nao e uma
   classificacao, e numerar sugeria que fosse. Sem ele, a frase fica centrada
   no cartao em vez de encostada embaixo. */
.vitem h4{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.25}

/* ---- 7. FECHO ---------------------------------------------------------- */
.fecho{position:relative;padding:140px 44px;text-align:center;overflow:hidden;background:#fff}
.fecho .marca{width:88px;margin:0 auto 40px;display:block;will-change:transform}
.fecho h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.8vw,50px);line-height:1.35;max-width:900px;margin:0 auto;color:var(--navy)}
.fecho h2 em{font-style:normal;color:#b99400}
.fecho .assin{margin-top:34px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.fecho .acoes{margin-top:46px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---- NEWSLETTER / CALLBAR / FOOTER ------------------------------------- */
.newsletter{background:var(--navy2);color:#fff;text-align:center;padding:72px 44px}
.newsletter h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);font-weight:600;margin-bottom:10px}
.newsletter p{font-size:15px;margin-bottom:28px;color:rgba(255,255,255,.72)}
.newsletter form{display:inline-flex;max-width:520px;width:100%;border:1px solid rgba(255,255,255,.4)}
.newsletter input{flex:1;border:0;background:transparent;padding:16px 20px;font-size:15px;font-family:var(--sans);color:#fff;outline:none}
.newsletter input::placeholder{color:rgba(255,255,255,.5)}
.newsletter button{background:var(--gold);color:var(--navy);border:0;padding:0 34px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(52,54,58,.92);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);text-align:center;padding:15px 20px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.callbar b{color:#fff;font-weight:500}
.callbar a{color:var(--gold)}
footer{background:var(--deep);color:rgba(255,255,255,.6);padding:60px 44px 100px;font-size:13px}
.foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:26px;margin-bottom:22px}
.foot-top img{height:56px}
.foot-top nav a{margin-left:26px;color:rgba(255,255,255,.72);letter-spacing:.12em;text-transform:uppercase;font-size:12px}
footer .copy{text-align:center}

/* ---- RESPONSIVO -------------------------------------------------------- */
@media(max-width:1000px){
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .marcos{grid-template-columns:repeat(2,1fr);gap:48px 0}
  .marcos::before{display:none}
}
@media(max-width:860px){
  .nav{gap:0}   /* a logo fica centralizada pelo justify-content:center da regra base */
  .nav .left,.nav .right{display:none}
  .abertura{padding:120px 22px 100px;min-height:88vh}
  .legado{grid-template-columns:1fr;gap:44px;padding:70px 22px}
  .legado .cap{text-align:left}
  .tempo,.ceo,.valores,.fecho{padding:70px 22px}
  .ceo .conteudo{grid-template-columns:1fr;gap:44px}
  .ceo .retrato{max-width:380px}
  .mv{grid-template-columns:1fr;gap:44px;padding:70px 22px}
  .newsletter{padding:56px 22px}
  footer{padding:48px 22px 96px}
  .foot-top{justify-content:center;text-align:center}
  .foot-top nav a{margin:0 12px}
}
@media(max-width:560px){
  .marcos{grid-template-columns:1fr;gap:40px 0}
  .vgrid{grid-template-columns:1fr}
}

/* ---- 3b. LINHA DO TEMPO DOS EMPREENDIMENTOS ---------------------------- */
/* Carrossel que roda sozinho, mostrando só as logos. O item do meio cresce e
   revela nome e data; os vizinhos ficam menores e esmaecidos, para o olho ir
   direto ao centro sem precisar de seta ou moldura.

   A largura de cada item é fixa (--pf-larg) porque o JS calcula o deslocamento
   a partir dela. Mudar aqui muda lá, e o arquivo é um só. */
/* O color:#fff nao e detalhe: sem ele o titulo herda --ink, que e quase preto,
   e fica invisivel sobre o fundo escuro. O nome do empreendimento aparecia
   porque .pf-nome declara a cor; o h2 nao declarava. */
/* A linha no topo separa esta secao de "Nossos valores", que vem logo acima e
   tem o mesmo fundo escuro -- sem ela as duas se leem como um bloco so. */
.portfolio{padding:110px 0 120px;background:var(--deep);color:#fff;overflow:hidden;
           border-top:1px solid rgba(255,255,255,.08)}
.portfolio .head{text-align:center;margin-bottom:64px;padding:0 44px}
/* O sobretitulo em dourado, como nas outras secoes de fundo escuro. Sem isto
   ele herdaria a cor que vale no fundo claro, que aqui some. */
.portfolio .head .eyebrow{color:var(--gold)}
.portfolio .head h2{font-size:clamp(28px,3.6vw,46px)}

/* O padding vertical existe por causa da escala: o item em destaque cresce
   20%%, e sem essa folga ele ultrapassava o palco em ~25px de cada lado --
   medido. A conta e altura do item x 1,2, menos a altura do item, dividido
   por dois. */
.pf{--pf-larg:236px;position:relative;padding:38px 0}
/* as bordas somem no escuro: o carrossel parece continuar além da tela */
.pf::before,.pf::after{content:"";position:absolute;top:0;bottom:0;width:22%;z-index:2;pointer-events:none}
.pf::before{left:0;background:linear-gradient(90deg,var(--deep),transparent)}
.pf::after{right:0;background:linear-gradient(270deg,var(--deep),transparent)}

/* O cursor diz que da para arrastar, antes de a pessoa tentar. */
.pf{cursor:grab}
.pf.pf--arrastando{cursor:grabbing}
/* Arrastar nao seleciona o texto dos nomes pelo caminho. */
.pf-trilho{user-select:none;-webkit-user-select:none;touch-action:pan-y}
.pf-trilho{display:flex;align-items:center;will-change:transform;
           /* longa e com saída macia: o movimento é para ser notado de canto de
              olho, não para chamar atenção */
           transition:transform 1.15s cubic-bezier(.33,0,.15,1)}
.pf-trilho.sem-transicao{transition:none}

/* Escala, opacidade e desfoque saem do JS (js/portfolio.js): variam conforme a
   distância até o centro, a cada quadro, para o item crescer e ganhar foco
   enquanto se aproxima em vez de saltar de estado ao chegar. Os valores abaixo
   são só o ponto de partida, antes do primeiro quadro. */
.pf-item{flex:0 0 var(--pf-larg);display:flex;flex-direction:column;align-items:center;
         justify-content:center;gap:16px;height:328px;text-decoration:none;color:inherit;
         opacity:.3;transform:scale(.6);will-change:transform,opacity,filter}

/* A moldura de vidro fosco dá um limite de tamanho à logo e um fundo constante
   atrás dela — sem isso, logo clara e logo escura pareciam de tamanhos
   diferentes, cada uma respirando o quanto o próprio desenho permitia.

   A proporção segue a da logo no painel, que é vertical (exibida em 60 × 100).
   A moldura é maior que isso de propósito: no carrossel a logo é o assunto, e
   no tamanho de cadastro ela ficava pequena demais para se reconhecer. */
.pf-marca{display:flex;align-items:center;justify-content:center;
          width:172px;height:196px;border-radius:11px;
          background:rgba(255,255,255,.055);
          border:1px solid rgba(255,255,255,.1);
          backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
          transition:background .9s ease,border-color .9s ease}
.pf-item.destaque .pf-marca{background:rgba(255,255,255,.1);
                            border-color:rgba(255,255,255,.2)}

.pf-marca img{max-width:142px;max-height:168px;object-fit:contain;display:block;
              filter:grayscale(1) brightness(1.7);transition:filter .9s ease}
.pf-item.destaque .pf-marca img{filter:grayscale(0) brightness(1)}

/* nome e data só existem para o item em destaque */
.pf-nome,.pf-data{opacity:0;transform:translateY(6px);
                  transition:opacity .7s ease,transform .7s ease;white-space:nowrap}
.pf-item.destaque .pf-nome,.pf-item.destaque .pf-data{opacity:1;transform:none}
.pf-nome{font-family:var(--serif);font-size:19px;color:#fff;letter-spacing:.01em}
.pf-data{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
/* "FUTURO LANÇAMENTO" tem 17 letras, contra 7 de "03/2019". Com o mesmo
   espaçamento ele media 164 px num item de 168 no celular -- quatro pixels de
   folga, que qualquer fonte de aparelho real consome. O texto longo respira
   menos entre as letras e sobra espaço de verdade. */
.pf-data--rotulo{letter-spacing:.1em}

/* quem está no ar é clicável, e o cursor precisa dizer isso */
a.pf-item{cursor:pointer}
a.pf-item.destaque:hover .pf-marca img{transform:translateY(-3px)}
a.pf-item .pf-marca img{transition:filter .6s,transform .4s}

@media(max-width:860px){
  .portfolio{padding:80px 0 88px}
  .portfolio .head{margin-bottom:44px;padding:0 22px}
  .pf{--pf-larg:168px;padding:26px 0}
  .pf-item{height:246px;gap:11px}
  .pf-marca{width:122px;height:140px;border-radius:9px}
  .pf-marca img{max-width:100px;max-height:120px}
  .pf-nome{font-size:16px}
  .pf::before,.pf::after{width:16%}
}