/* Patrícia Rezende Arquitetura — manual de marca v1.1 */

@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/marcellus-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/montserrat-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2")}

:root{
  /* paleta oficial */
  --navy:#12284A;
  --cream:#F1E6CF;
  --gold:#D2B06E;
  --olive:#8E9663;
  /* derivados para leitura em tela (contraste AA) */
  --paper:#F7F2E7;          /* creme claro: campo de leitura */
  --olive-text:#5E6540;     /* rótulos sobre creme */
  --text-soft:#46536B;      /* texto corrido sobre creme */
  --line:#DCCFB3;
  --on-navy-soft:#C9B98F;
  --wa:#5B6534;             /* WhatsApp: oliva escuro */
  --wa-dark:#4E5A2B;
  --gutter:56px;
  --title:"Marcellus",Georgia,serif;
  --body:"Montserrat",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,p,figure{margin:0}
button{font-family:inherit}

.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--olive-text)}
.on-navy .eyebrow,.eyebrow.gold{color:var(--gold)}
.h-section{font-family:var(--title);font-weight:400;font-size:52px;line-height:1.12}

/* Header: fundo marinho liso (assinatura nunca sobre foto) */
.site-header{background:var(--navy);padding-top:26px;padding-bottom:26px}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:inline-block;line-height:0;min-width:0;max-width:100%}
.brand img{width:360px;max-width:100%;height:auto}
.since{font-size:11px;letter-spacing:.45em;text-transform:uppercase;color:var(--gold)}

/* Hero */
.hero{position:relative;height:780px;overflow:hidden;background:var(--navy)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;overflow:hidden}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.slide.on img{animation:kb 8s ease-out forwards}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.08)}}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,40,74,0) 30%,rgba(18,40,74,.55) 58%,rgba(18,40,74,.92) 100%)}
.hero-content{position:absolute;left:0;right:0;bottom:0;padding-bottom:52px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.hero-text{max-width:900px}
.hero .eyebrow{color:var(--cream);margin-bottom:22px}
.hero-title{font-family:var(--title);font-weight:400;font-size:80px;line-height:1.04;color:var(--cream)}
.hero-controls{display:flex;gap:12px}

.ctl{width:52px;height:52px;border-radius:999px;border:1px solid rgba(241,230,207,.55);background:rgba(18,40,74,.25);color:var(--cream);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,border-color .3s;padding:0}
.ctl:hover{background:rgba(241,230,207,.16);border-color:var(--gold)}
.ctl.dark{border-color:var(--line);background:transparent;color:var(--navy)}
.ctl.dark:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.no-js .hero-controls,.no-js .track-controls{display:none}

.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:end}
.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}
.eg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:56px}
.e4{grid-column:span 4}.e8{grid-column:span 8}
.visit-foto{width:100%;height:100%;object-fit:cover}
.visit{flex:1;background:var(--cream);color:var(--navy);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.visit-body{display:flex;flex-direction:column;gap:10px}
.visit-label{display:flex;align-items:center;gap:10px}
.on-navy .visit .eyebrow{color:var(--olive-text)}
.visit-city{font-family:var(--title);font-size:28px;line-height:1.2}
.visit-addr{color:var(--text-soft);font-style:normal;font-weight:300}
.visit-hours{color:var(--text-soft);font-size:14px;font-weight:300;margin-top:4px}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;text-decoration:none;font-family:var(--body);font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border:0}
.btn-outline{align-self:flex-start;min-height:48px;padding:0 26px;border:1px solid var(--navy);background:transparent;color:var(--navy);font-size:12px;transition:background .3s,color .3s}
.btn-outline:hover{background:var(--navy);color:var(--cream)}
.btn-gold{min-height:50px;padding:0 28px;background:var(--gold);color:var(--navy);font-size:12px;transition:background .3s}
.btn-gold:hover{background:var(--cream)}
.btn-wa{min-height:56px;padding:0 32px;background:var(--wa);color:#FFFFFF;font-size:13px;transition:background .3s}
.btn-wa:hover{background:var(--wa-dark);color:#FFFFFF}
.btn-ig{min-height:52px;padding:0 30px;color:#FFFFFF;font-size:12px;background:linear-gradient(45deg,#C13584 0%,#833AB4 60%,#5851DB 100%);transition:filter .3s}
.btn-ig:hover{filter:brightness(.88);color:#FFFFFF}

/* Projetos */
.projetos{background:var(--navy);color:var(--cream)}
.projetos .wrap{padding-top:104px;padding-bottom:104px}
.projetos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.projetos-head .eyebrow{margin-bottom:16px}
.projetos-head p.note{color:var(--on-navy-soft);font-weight:300;max-width:420px}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.track::-webkit-scrollbar{display:none}
.track.auto{scroll-snap-type:none;scroll-behavior:auto}
@media (hover:hover) and (pointer:fine){.track{scroll-snap-type:none}}
.pcard{position:relative;flex:0 0 calc((100% - 40px) / 2.35);aspect-ratio:3/2;scroll-snap-align:start;overflow:hidden;border:0;padding:0;margin:0;cursor:pointer;background:#0E2140;color:var(--cream)}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,40,74,0) 65%,rgba(18,40,74,.65) 100%);opacity:0;transition:opacity .4s}
.pcard-cta{position:absolute;left:24px;bottom:22px;z-index:1;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.pcard:hover img,.pcard:focus-visible img{transform:scale(1.04)}
.pcard:hover::after,.pcard:focus-visible::after,.pcard:hover .pcard-cta,.pcard:focus-visible .pcard-cta{opacity:1;transform:none}
.pcard:focus-visible{outline-offset:-4px}
.pcard-static{cursor:default}
@media (hover:none){.pcard::after,.pcard-cta{opacity:1;transform:none}}
.track-controls{display:flex;gap:12px}
.projetos-note{margin-top:14px;color:var(--on-navy-soft);font-weight:300;max-width:460px}
.center{display:flex;justify-content:center;margin-top:44px}

/* Painel do projeto */
.pj{margin:0 0 0 auto;width:min(1080px,100%);max-width:100%;height:100%;max-height:100%;padding:0;border:0;background:var(--paper);color:var(--navy);overflow:hidden}
.pj[open]{display:flex;flex-direction:column;animation:pjin .45s cubic-bezier(.2,.7,.2,1)}
.pj::backdrop{background:rgba(18,40,74,.72)}
@keyframes pjin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.pj-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line);background:var(--paper)}
.pj-bar img{width:48px;height:48px}
.pj-actions{display:flex;gap:10px}
.pj-scroll{overflow-y:auto;flex:1;overscroll-behavior:contain}
.pj-body{padding:48px 56px 64px}
.pj-title{font-family:var(--title);font-weight:400;font-size:44px;line-height:1.1;margin-bottom:16px}
.pj-desc{color:var(--text-soft);font-weight:300;font-size:17px;max-width:620px;margin-bottom:36px}
.pj-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pj-photos img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--cream)}
.pj-photos img:first-child{grid-column:span 2;aspect-ratio:16/9}
.no-scroll{overflow:hidden}

/* Sobre */
.sobre{background:var(--cream)}
.sobre .wrap{padding-top:104px;padding-bottom:104px}
.sobre .split{align-items:center}
.sobre-fig{justify-self:end;width:100%;max-width:480px}
.sobre-foto{width:100%;max-width:480px;height:auto}
.sobre-text{display:flex;flex-direction:column;gap:22px;max-width:640px}
.pessoas{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:20px}
.pessoas > div:last-child{text-align:right}
.pessoa-nome{font-family:var(--title);font-size:24px;line-height:1.2}
.pessoa-papel{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--olive-text);margin-top:4px}
.sobre-text p.txt{color:var(--text-soft);font-weight:300;font-size:17px}

/* Contato */
.contato{background:var(--navy);color:var(--cream)}
.contato .wrap{padding-top:104px;padding-bottom:88px}
.contato .eyebrow{margin-bottom:24px}
.contato-title{font-family:var(--title);font-weight:400;font-size:64px;line-height:1.08;margin-bottom:44px}
.info{display:flex;flex-direction:column;gap:28px}
.info-item{border-top:1px solid rgba(210,176,110,.35);padding-top:18px}
.info-label{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.info-value{color:var(--cream);text-decoration:none;font-size:19px;font-weight:300;overflow-wrap:break-word}
a.info-value:hover{color:var(--gold)}
.footer{border-top:1px solid var(--gold)}
.footer .wrap{padding-top:36px;padding-bottom:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-size:12px;color:var(--on-navy-soft);letter-spacing:.06em}
.footer img{width:280px;height:auto}
.footer-tag{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}

/* WhatsApp flutuante */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:20;width:60px;height:60px;border-radius:999px;background:var(--wa);color:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(18,40,74,.3);transition:background .3s}
.wa-float:hover{background:var(--wa-dark);color:#FFFFFF}

/* 404 */
.nf{min-height:100vh;background:var(--navy);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:40px 20px;text-align:center}
.nf-logo{width:min(300px,70vw);height:auto}
.nf p{color:var(--on-navy-soft);font-weight:300}
.nf .btn-outline{border-color:var(--gold);color:var(--cream);align-self:center}
.nf .btn-outline:hover{background:var(--gold);color:var(--navy)}

/* Responsivo */
@media (max-width:860px){
  :root{--gutter:20px}
  .s5,.s6,.s7,.e4,.e8{grid-column:span 12}
  .split{gap:32px 0}
  .since{display:none}
  .hero{height:600px}
  .hero-title{font-size:44px}
  .h-section{font-size:36px}
  .contato-title{font-size:40px}
  .projetos .wrap,.contato .wrap,.sobre .wrap{padding-top:72px;padding-bottom:64px}
  .eg{margin-top:40px}
  .sobre-foto{max-width:none}
  .pessoa-nome{font-size:18px}
  .pessoa-papel{letter-spacing:.22em;font-size:10px}
  .sobre-fig{justify-self:start;max-width:none}
  .pj-bar{padding:14px 20px}
  .pj-body{padding:32px 20px 48px}
  .pj-title{font-size:32px}
  .pcard{flex-basis:85%}
  .track-controls{display:none}
  .pj-photos{grid-template-columns:minmax(0,1fr)}
  .pj-photos img:first-child{grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide.on img{animation:none}
  .track{scroll-behavior:auto}
  .pj[open]{animation:none}
}