/* Bellini Arquitetura — estilos comuns a todas as páginas */
html,body{margin:0}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#3F4A34}a:hover{color:#2A3322}
a:focus-visible{outline:2px solid #C9A97A;outline-offset:3px}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}

/* barra do topo */
.topnav{position:fixed;left:0;right:0;top:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(20px,4vw,56px);mix-blend-mode:difference;color:#fff}
.topnav a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.topnav a:hover{opacity:.7;color:#fff}
.brand{gap:10px;align-items:baseline;font-size:26px}
.brand .b{font-size:32px;-webkit-text-stroke:.4px currentColor}
.brand .sep{width:1px;height:15px;background:currentColor;opacity:.45;align-self:center}
.brand .d{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
.navlinks{display:flex;gap:clamp(16px,3vw,40px);font-size:13px;letter-spacing:.16em;text-transform:uppercase;align-items:center}
.talk{border:1px solid #fff;border-radius:999px;padding:0 18px}
@media (max-width:860px){
  .navlinks .nl{display:none}
  .brand .sep,.brand .d{display:none}
  .navlinks{font-size:11px;letter-spacing:.12em;gap:12px}
  .talk{padding:0 14px}
}
@media (max-width:420px){
  .talk{font-size:0;letter-spacing:0}
  .talk::after{content:"Agendar";font-size:11px;letter-spacing:.12em}
}

/* menu do celular */
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;flex-direction:column;gap:7px}
.menu-btn span{display:block;width:24px;height:1px;background:currentColor}
.mnav{position:fixed;inset:0;z-index:40;background:#1F2419;color:#F4F0E8;display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top,0px)) 24px max(32px,env(safe-area-inset-bottom,0px));box-sizing:border-box;overflow-y:auto}
.mnav[hidden]{display:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.mnav-top .serif{font-size:32px}
.mnav-close{width:44px;height:44px;border:1px solid rgba(244,240,232,.45);border-radius:50%;background:transparent;color:#F4F0E8;font-size:26px;line-height:1;cursor:pointer}
.mnav-links{display:flex;flex-direction:column;margin:auto 0;padding:40px 0}
.mnav-links a{font-family:'Instrument Serif',Georgia,serif;font-size:44px;line-height:1;color:#F4F0E8;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(244,240,232,.15)}
.mnav-cta{align-self:flex-start;color:#F4F0E8;font-size:13px;letter-spacing:.16em;text-transform:uppercase;min-height:52px;display:inline-flex;align-items:center;padding:0 30px;border:1px solid #F4F0E8;border-radius:999px;text-decoration:none}
@media (max-width:860px){.menu-btn{display:inline-flex}}

/* traço fino sob os títulos */
.rule{display:block;height:1px;background:currentColor;opacity:.55;transform-origin:left center}
.rule.mid{transform-origin:center}
.cue{width:1px;height:56px;background:#F4F0E8}

/* animações ao rolar: só nos navegadores que suportam; nos outros, tudo aparece parado */
@keyframes slidein{from{opacity:0;transform:translateX(-14vw)}to{opacity:1;transform:none}}
@keyframes ruleout{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes lift{from{transform:translateY(0);opacity:1}to{transform:translateY(-18vh);opacity:0}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cue{animation:cue 2.4s ease-in-out infinite}
@supports (animation-timeline: view()){
  .slidein{animation:slidein linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .rule{animation:ruleout linear both;animation-timeline:view();animation-range:entry 25% cover 50%}
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  .drift{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .lift{animation:lift linear both;animation-timeline:view();animation-range:exit 0% exit 70%}
}
@media (prefers-reduced-motion:reduce){.slidein,.rule,.rise,.drift,.lift,.cue{animation:none!important}}

/* faixa final com convite */
.endcta{background:#3F4A34;color:#F4F0E8;padding:clamp(70px,9vw,130px) clamp(24px,6vw,96px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.pill{color:#F4F0E8;font-size:13px;letter-spacing:.16em;text-transform:uppercase;min-height:48px;display:inline-flex;align-items:center;padding:0 28px;border:1px solid #F4F0E8;border-radius:999px;text-decoration:none}
.pill:hover{background:#F4F0E8;color:#3F4A34}
.foot{background:#1F2419;color:#BDB6A4;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:22px clamp(24px,6vw,96px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.foot a{color:#BDB6A4;text-decoration:none}

/* imagens ampliáveis */
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:2px solid #C9A97A;outline-offset:4px}
.zoom-box{position:fixed;inset:0;z-index:50;background:rgba(18,20,16,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out}
.zoom-box[hidden]{display:none}
.zoom-box img{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.zoom-cap{margin:0;color:#DCD3C2;font-size:14px;letter-spacing:.04em;text-align:center;max-width:70ch}
.zoom-close{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));width:44px;height:44px;border:1px solid rgba(244,240,232,.5);border-radius:50%;background:transparent;color:#F4F0E8;font-size:26px;line-height:1;cursor:pointer}
.zoom-close:hover{background:rgba(244,240,232,.12)}