@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;800;900&family=Playfair+Display:ital,wght@1,500&family=Questrial&family=Montserrat:wght@300;400;600&display=swap');
/* Páginas de projeto (filhas de "Trabalhos"), montadas com widgets do Elementor.
   Cada projeto troca as cores e as fontes nas variáveis --pj-* do arquivo pages/{slug}.css.
   Classes em Avançado > Classes CSS: pj (cada dobra), pj-topo, pj-capa, pj-conceito, pj-mood, mood-linha, pj-folha (fim, na cor da Salt). */

:root{
  --pj-fundo:var(--noite); --pj-fundo2:var(--mata); --pj-texto:var(--sal); --pj-acento:var(--limao);
  --pj-linha:rgba(247,242,228,.14); --pj-titulo:var(--f-display); --pj-corpo:var(--sans);
  --pj-caixa:none; --pj-track:-.04em; --pj-peso:500; --pj-grao:none; --pj-raio:6px;
}
body{background:var(--pj-fundo)}

/* containers sem espaçamento próprio (igual à home) */
.salt-conteudo .e-con{--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0;--gap:0;--row-gap:0;--column-gap:0;--margin-top:0;--margin-bottom:0}
.salt-conteudo .e-con.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.salt-conteudo .elementor-widget{--kit-widget-spacing:0}
.salt-conteudo .elementor-widget:not(:last-child){margin-block-end:0}
:where(.salt-conteudo .elementor-heading-title),:where(.salt-conteudo .elementor-widget-text-editor){font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;color:inherit}
.salt-conteudo .elementor-widget-text-editor p+p{margin-top:14px}
.salt-conteudo .btn-w .elementor-button{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.2;padding:15px 24px;border-radius:999px;background:transparent;color:inherit;border:1px solid currentColor;opacity:.85;white-space:nowrap}
.salt-conteudo .btn-w .elementor-button:hover{opacity:1;color:var(--pj-acento)}

/* dobras */
.salt-conteudo .pj{position:relative;background:var(--pj-fundo);color:var(--pj-texto);font-family:var(--pj-corpo);padding:120px 0}
.salt-conteudo .pj::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--pj-grao);background-size:512px;mix-blend-mode:overlay;opacity:.45}
.salt-conteudo .pj > .e-con{position:relative;z-index:1}
.pj .pj-tit,.pj h1,.pj h2,.pj h3{font-family:var(--pj-titulo);font-weight:var(--pj-peso);text-transform:var(--pj-caixa);letter-spacing:var(--pj-track);line-height:1.05}
.pj .mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}

/* topo */
.salt-conteudo .pj-topo{padding:170px 0 64px}
.pj-voltar a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.pj-voltar a:hover{color:var(--pj-acento);opacity:1}
.pj-h1{font-size:clamp(44px,6.4vw,104px);margin-top:56px}
.salt-conteudo .pj-linha{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;margin-top:48px;align-items:end}
.pj-resumo{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:600px;opacity:.85}
.pj-ficha .ficha{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--pj-linha)}
.pj-ficha .ficha div{padding:14px 0;border-bottom:1px solid var(--pj-linha);font-size:15px}
.pj-ficha .ficha div:last-child:nth-child(odd){grid-column:span 2}
.pj-ficha .ficha span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.5;margin-bottom:4px}

/* capa larga com parallax */
.salt-conteudo .pj-capa-sec{padding:0}
.pj-capa{margin:0 32px;border-radius:var(--raio);overflow:hidden;aspect-ratio:2400/1094;max-height:86vh}
.pj-capa img{width:100%;height:110%;object-fit:cover;will-change:transform}

/* conceito */
.salt-conteudo .pj-conc{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.pj-conc h2{font-size:clamp(32px,3.4vw,52px);margin-top:18px}
.salt-conteudo .pj-conc-p{margin-top:28px;font-size:18px;line-height:1.6;opacity:.85;max-width:560px}
.salt-conteudo .pj-pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.salt-conteudo .pilar{border-top:1px solid var(--pj-acento);padding-top:18px}
.pilar h3{font-size:17px;color:var(--pj-acento)}
.pilar p{font-size:14px;line-height:1.5;opacity:.75;margin-top:8px}
.pj-conc-img img{width:100%;border-radius:var(--pj-raio)}

/* moodboard: cada linha é justificada, e cada imagem cresce na proporção dela (o projeto.js põe --ar) */
.salt-conteudo .pj-mood-cab{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px}
.pj-mood-cab h2{font-size:clamp(32px,3.4vw,52px);margin-top:18px}
.salt-conteudo .mood-linha{display:flex;flex-direction:row;gap:12px;margin-bottom:12px}
.salt-conteudo .mood-linha > .elementor-widget-image{flex:var(--ar,1) 1 0;min-width:0;width:auto;max-width:none;aspect-ratio:var(--ar,1);border-radius:var(--pj-raio);overflow:hidden;position:relative}
.salt-conteudo .mood-linha > .elementor-widget-image::after{content:"";position:absolute;inset:0;border:1px solid var(--pj-linha);border-radius:inherit;pointer-events:none}
.mood-linha .elementor-widget-image a,.mood-linha .elementor-widget-container{display:block;height:100%}
.mood-linha img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mood-linha .elementor-widget-image:hover img{transform:scale(1.035)}

/* fim: a "folha" da Salt sobe por cima da cor do projeto, com cantos arredondados,
   e a volta para o verde vira um gesto em vez de um corte seco. Nela ficam os outros trabalhos e o contato. */
.salt-conteudo .e-con.pj-folha{--margin-top:-44px;position:relative;z-index:2;background:var(--noite);color:var(--sal);border-radius:44px 44px 0 0;padding:110px 0 0;box-shadow:0 -30px 60px -30px rgba(0,0,0,.6)}
.salt-conteudo .pj-mood{padding-bottom:164px}
.salt-conteudo .pj-folha .cab{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px}
/* o título ocupava 100% e empurrava o botão para fora da tela perto de 1000 px */
.salt-conteudo .pj-folha .cab > .e-con{width:auto;flex:1 1 auto;min-width:0}
.salt-conteudo .pj-folha .cab > .btn-w{flex:0 0 auto}
.pj-folha .rot{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.pj-folha .h2{font-size:clamp(34px,4.2vw,60px);margin-top:14px}
.salt-conteudo .pj-folha .final{padding:120px 0 150px;background:transparent}
.salt-conteudo .pj-folha .final .wrap{align-items:center;text-align:center}
.salt-conteudo .pj-folha .final h2{font-size:clamp(30px,3.6vw,52px)}
.salt-conteudo .pj-folha .final p{margin:20px auto 36px}
.salt-conteudo .pj-folha .final .form-contato{width:100%;max-width:640px}

@media (max-width:900px){
  .salt-conteudo .pj{padding:80px 0}
  .salt-conteudo .pj-topo{padding:130px 0 48px}
  .pj-h1{font-size:clamp(28px,8.2vw,56px)}
  .salt-conteudo .e-con.wrap{padding:0 18px}
  .salt-conteudo .pj-linha,.salt-conteudo .pj-conc{grid-template-columns:1fr;gap:36px}
  .salt-conteudo .pj-pilares{grid-template-columns:1fr;gap:18px}
  .pj-capa{margin:0 18px;aspect-ratio:4/3}
  .salt-conteudo .pj-mood-cab{flex-direction:column;align-items:flex-start}
  /* no celular: as horizontais ocupam a linha inteira, as verticais andam em dupla */
  .salt-conteudo .mood-linha{flex-wrap:wrap;gap:8px;margin-bottom:8px}
  .salt-conteudo .mood-linha > .elementor-widget-image{flex:1 1 100%}
  .salt-conteudo .mood-linha > .elementor-widget-image.alto{flex:1 1 calc(50% - 4px)}
  .salt-conteudo .e-con.pj-folha{--margin-top:-28px;border-radius:28px 28px 0 0;padding-top:72px}
  .salt-conteudo .pj-folha .cab{flex-direction:column;align-items:flex-start;gap:24px}
  .salt-conteudo .pj-folha .final{padding:90px 0 110px}
}

/* ===== Projetos de 31/10/2026: as cores de cada um vão por page-id (os arquivos por slug só existem para os primeiros cinco) ===== */

/* Cotare (353): laranja e índigo, vidro lilás; Funnel Display + Geist, as fontes do DNA */
body.page-id-353{--pj-fundo:#FFF5E8;--pj-texto:#230558;--pj-acento:#FF5C00;--pj-linha:rgba(35,5,88,.14);--pj-titulo:'Funnel Display',sans-serif;--pj-corpo:'Geist',sans-serif;--pj-peso:600;--pj-track:-.03em;--pj-raio:14px}
body.page-id-353 .salt-conteudo .pj-conceito{background:#230558;color:#FFF5E8;--pj-acento:#D2B9FF;--pj-linha:rgba(255,245,232,.16)}
body.page-id-353 .pj-h1 img{width:min(460px,78vw);height:auto}

/* Dr. Oto (354): papel, eucalipto e tinta; Nunito arredondada */
body.page-id-354{--pj-fundo:#FEFCF3;--pj-texto:#2D2D27;--pj-acento:#748E5C;--pj-linha:rgba(45,45,39,.12);--pj-titulo:'Nunito',sans-serif;--pj-corpo:'Nunito',sans-serif;--pj-peso:900;--pj-track:-.01em;--pj-raio:16px}
body.page-id-354 .pj-mood h2{color:#748E5C}
body.page-id-354 .pj .mono,body.page-id-354 .pj-ficha .ficha span,body.page-id-354 .pj-voltar a{font-family:'Nunito',sans-serif;font-weight:800;letter-spacing:.18em}
body.page-id-354 .salt-conteudo .pj-conceito{background:#748E5C;color:#FEFCF3;--pj-acento:#FEE9D6;--pj-linha:rgba(254,252,243,.22)}
body.page-id-354 .pj-h1 img{width:min(360px,68vw);height:auto}

/* Dra. Camilla (356 é a Ana; esta é a 355): creme, lavanda e lilás; Playfair itálica nas frases e Questrial no lugar da Century Gothic */
body.page-id-355{--pj-fundo:#FBF8F2;--pj-texto:#3E3350;--pj-acento:#8E7AA3;--pj-linha:rgba(62,51,80,.14);--pj-titulo:'Playfair Display',serif;--pj-corpo:'Questrial',sans-serif;--pj-peso:500;--pj-track:0;--pj-raio:18px}
body.page-id-355 .pj h2,body.page-id-355 .pj h3{font-style:italic;color:#8E7AA3}
body.page-id-355 .salt-conteudo .pj-conceito{background:linear-gradient(160deg,#E6DDF1,#FBF8F2 55%,#F6C9B0)}
body.page-id-355 .pj-h1 img{width:min(280px,58vw);height:auto}

/* Dra. Ana (356): creme, cinza Ana e grafite; Montserrat Light */
body.page-id-356{--pj-fundo:#FEFCF4;--pj-texto:#1F1F1F;--pj-acento:#9C9C9C;--pj-linha:rgba(31,31,31,.12);--pj-titulo:'Montserrat',sans-serif;--pj-corpo:'Montserrat',sans-serif;--pj-peso:300;--pj-track:-.01em;--pj-raio:12px}
body.page-id-356 .pj .mono,body.page-id-356 .pj-ficha .ficha span,body.page-id-356 .pj-voltar a{font-family:'Montserrat',sans-serif;letter-spacing:.22em}
body.page-id-356 .salt-conteudo .pj-conceito{background:#1F1F1F;color:#FEFCF4;--pj-linha:rgba(254,252,244,.16)}
body.page-id-356 .pj-h1 img{width:min(440px,78vw);height:auto}