:root{
  --cream:#F3EFE6; --cream-2:#EAE3D6; --white:#FBFAF6;
  --ink:#3d372e; --ink-2:#413B33;
  --taupe:#6B6256; --taupe-d:#5A5249; --taupe-soft:#938A7B;
  --olive:#AEA935; --olive-d:#8F8B2A;
  --line:rgba(61,55,46,.14); --line-soft:rgba(61,55,46,.07);
  --side:0px;
  --topbar-h:100px;
  --topbar-line:6px;      /* altura da linha 3-verdes (o que assoma no topo antes do scroll) */
  --gutter:clamp(24px,6vw,96px);
  --content:1360px;
  --brand-hero-w:425px;   /* largura do logo no hero */
  --brand-park-h:55px;    /* altura do logo estacionado na barra (dentro da barra de 100px) */
  --hero-logo-top:16%;    /* centro vertical do logo no hero (zona superior-esquerda) */
  --geo:'Jost',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  --label:'Quicksand',system-ui,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{background:var(--cream); color:var(--ink); font-family:var(--body); font-weight:300;
  line-height:1.7; overflow-x:hidden; letter-spacing:.01em}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--olive);color:#fff}

/* container único a que tudo se alinha (barra, hero, secções, footer); breakouts = full-bleed */
.wrap{width:min(100% - 2 * var(--gutter), var(--content));margin-inline:auto}

.geo{font-family:var(--geo)}
.eyebrow{font-family:var(--label);font-weight:400;font-size:.8rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--olive-d)}
.h-xl{font-family:var(--geo);font-weight:300;line-height:1.04;letter-spacing:.005em;
  text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.6rem);color:var(--ink)}
.h-lg{font-family:var(--geo);font-weight:400;line-height:1.1;letter-spacing:.02em;
  text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--ink)}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--taupe);max-width:50ch;font-weight:300}
p.body{color:var(--taupe);max-width:60ch}
p.body+p.body{margin-top:1em}

/* reveals */
.rv{opacity:0;transform:translateY(20px);transition:opacity 1.5s ease,transform 1.5s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.d2{transition-delay:.12s}.d3{transition-delay:.24s}.d4{transition-delay:.36s}.d5{transition-delay:.48s}
.clip{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path 1.6s cubic-bezier(.22,.61,.36,1),opacity 1.5s ease}
.clip.in{clip-path:inset(0 0 0 0);opacity:1}
.clipL{clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path 1.6s cubic-bezier(.22,.61,.36,1),opacity 1.5s ease}
.clipL.in{clip-path:inset(0 0 0 0);opacity:1}

/* ===== TOP BAR ===== (efeito gaveta: sobre o hero só a linha verde; no scroll desliza p/ baixo com o logo) */
.topbar{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--topbar-h);color:#fff;
  background:rgba(107,98,86,.92);
  transform:translateY(calc(-1 * (var(--topbar-h) - var(--topbar-line))));  /* recuada p/ cima: só a linha verde à mostra */
  will-change:transform;transition:box-shadow .5s var(--ease)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
/* a sombra aparece quando a gaveta chega ao fim (secção 01) */
.topbar.solid{box-shadow:0 6px 30px rgba(61,55,46,.16)}
/* linha de identidade com os 3 verdes — na BASE da barra (é o "só a linha verde" que assoma no topo) */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--topbar-line);
  background:linear-gradient(90deg,#778530 0 34%,#929731 34% 64%,#AEAB2D 64% 100%)}
/* slot reservado à esquerda — o logo viajante (#brand) encaixa aqui na secção 01 */
.tb-logo{flex:0 0 auto;width:calc(var(--brand-park-h) * 4.6);height:var(--topbar-h)}
/* links + CTA + hambúrguer: entram junto com a gaveta (fazem parte da barra) */
.tb-right{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.tb-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.tb-links a{position:relative;font-family:var(--geo);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;opacity:.92;transition:color .5s var(--ease),opacity .5s var(--ease)}
/* nav link hover: growing underline + lift to olive */
.tb-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:currentColor;opacity:.75;transition:right .4s var(--ease)}
.tb-links a:hover{color:var(--olive);opacity:1}
.tb-links a:hover::after{right:0}
.tb-cta{flex:0 0 auto;white-space:nowrap;font-family:var(--geo);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--olive-d);background:#fff;
  border:1px solid #fff;padding:9px 18px;border-radius:100px;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.tb-cta:hover{background:var(--olive);border-color:var(--olive);color:#fff}

/* ===== LOGO VIAJANTE (o mesmo logo do hero desloca-se/encolhe até à barra via JS) ===== */
.brand{position:fixed;top:0;left:0;z-index:80;width:var(--brand-hero-w);line-height:0;
  transform-origin:0 0;will-change:transform;opacity:0;transition:opacity .3s var(--ease)}
.brand.ready{opacity:1}
.brand img{display:block;width:100%;height:auto;object-fit:contain}

/* hamburger (mobile only) */
.tb-burger{display:none;position:relative;width:40px;height:40px;flex:0 0 auto}
.tb-burger span{position:absolute;left:9px;right:9px;height:2px;background:#fff;border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease),top .4s var(--ease)}
.tb-burger span:nth-child(1){top:13px}.tb-burger span:nth-child(2){top:19px}.tb-burger span:nth-child(3){top:25px}
.topbar.menu-open .tb-burger span:nth-child(1){top:19px;transform:rotate(45deg)}
.topbar.menu-open .tb-burger span:nth-child(2){opacity:0}
.topbar.menu-open .tb-burger span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* ===== SECTION RAIL (right vertical dots) ===== */
.rail{position:fixed;top:50%;right:clamp(14px,1.6vw,26px);transform:translateY(-50%);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.rail.show{opacity:1;pointer-events:auto}
.rail .dots{list-style:none;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* traços verticais (limpos): alvo de clique 24px, o traço cresce quando ativo */
.rail .dot{position:relative;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;background:none}
.rail .dot::after{content:"";width:3px;height:15px;border-radius:2px;
  background:rgba(147,138,123,.85);transition:background .4s var(--ease),height .4s var(--ease),width .4s var(--ease)}
.rail .dot:hover::after{background:var(--taupe);height:19px}
.rail .dot.on::after{background:var(--olive);width:3px;height:30px}
.rail .dlabel{position:absolute;right:100%;top:50%;margin-right:8px;transform:translateY(-50%) translateX(6px);
  font-family:var(--geo);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;background:var(--white);padding:5px 10px;border-radius:4px;
  box-shadow:0 8px 24px rgba(61,55,46,.16);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rail .dot:hover .dlabel,.rail .dot:focus-visible .dlabel{opacity:1;transform:translateY(-50%)}

/* ===== HERO ===== */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;color:#fff}

/* ===== SPLASH / animação de entrada (e modo "Brevemente") ===== */
.splash{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(rgba(17,13,9,.85),rgba(17,13,9,.88)),url(/assets/EXTERIOR_2_V2.jpg) center/cover no-repeat;
  transition:opacity 1.1s var(--ease),visibility 1.1s}
.splash.hide{opacity:0;visibility:hidden}

/* ENTRADA: 4 camadas do logo, cada uma recortada a uma região e revelada em sequência
   (ícone fade → "SÃO" esq→dir → "ROMÃO" esq→dir → "RESIDENCE" cima→baixo) — só opacity/clip-path (GPU) */
.intro-logo{position:relative;width:min(74vw,540px);aspect-ratio:557 / 116}
.intro-logo .il{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* estado inicial: cada parte colapsada + invisível (clip + fade combinados = revelação suave) */
.il-icon {clip-path:inset(0 67% 0 0);opacity:0}           /* ícone: x0–33% */
.il-sao  {clip-path:inset(0 67% 30% 33%);opacity:0}       /* SÃO:   x33–59%, y0–70% */
.il-romao{clip-path:inset(0 41% 30% 59%);opacity:0}       /* ROMÃO: x59–100%, y0–70% */
.il-res  {transform:translateY(-34px);opacity:0}         /* RESIDENCE (só a palavra) — parte de trás da wordmark */
/* lento, sobreposto e macio (easeOutCubic) + zoom subtil do conjunto = dinâmico, não "robótico" */
.splash.play .intro-logo{animation:ilZoom 5.2s cubic-bezier(.16,1,.3,1)  .3s both}
.splash.play .il-icon {animation:ilIcon 1.5s cubic-bezier(.33,1,.68,1)  .5s both}
.splash.play .il-sao  {animation:ilSao  1.4s cubic-bezier(.33,1,.68,1) 1.4s both}
.splash.play .il-romao{animation:ilRomao 1.5s cubic-bezier(.33,1,.68,1) 2.3s both}
.splash.play .il-res  {animation:ilRes 1.8s cubic-bezier(.33,1,.68,1) 3.3s both}
@keyframes ilZoom {from{transform:scale(.94)}to{transform:scale(1)}}
@keyframes ilIcon {to{opacity:1}}
@keyframes ilSao  {to{clip-path:inset(0 41% 30% 33%);opacity:1}}   /* revela x33→59% + fade */
@keyframes ilRomao{to{clip-path:inset(0 0 30% 59%);opacity:1}}     /* revela x59→100% + fade */
/* desce de trás da wordmark; fade tardio p/ ficar ténue enquanto está por trás */
@keyframes ilRes  {0%{transform:translateY(-34px);opacity:0} 55%{opacity:1} 100%{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .il-icon,.il-sao,.il-romao{opacity:1}
  .il-sao{clip-path:inset(0 41% 30% 33%)}
  .il-romao{clip-path:inset(0 0 30% 59%)}
  .il-res{transform:none;opacity:1}
}
.slogo{width:min(560px,86vw);height:auto;overflow:visible}
.slogo .sketch{opacity:.6}
.slogo .sk{stroke-dasharray:1;stroke-dashoffset:1}
.slogo.animate .sk{animation:sDraw 1.1s ease forwards}
.slogo.animate .sketch{animation:sFade 1s ease 1.3s forwards}
.slogo .block{transform-box:fill-box;transform-origin:50% 55%}
.slogo .block path{fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:1}
.slogo.animate .block-l{animation:sBlkL 1.5s cubic-bezier(.22,1,.3,1) 1.15s both}
.slogo.animate .block-r{animation:sBlkR 1.5s cubic-bezier(.22,1,.3,1) 1.2s both}
.slogo.animate .block path{animation:sDraw 1.4s ease 1.15s forwards, sFill 1s ease 2.5s forwards}
.slogo .g-text path{fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:1}
.slogo.animate .g-text path{animation:sDraw 1.4s ease 1.15s forwards, sFill 1s ease 2.5s forwards}
@keyframes sDraw{to{stroke-dashoffset:0}}
@keyframes sFill{to{fill-opacity:1;stroke-opacity:0}}
@keyframes sFade{to{opacity:0}}
@keyframes sBlkL{0%{transform:translate(-30px,10px) rotate(-5deg)}100%{transform:none}}
@keyframes sBlkR{0%{transform:translate(30px,-8px) rotate(5deg)}100%{transform:none}}
/* mensagem "Brevemente" (modo manutenção) */
.maint-msg{margin-top:42px;text-align:center;opacity:0;transform:translateY(8px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.splash.reveal .maint-msg{opacity:1;transform:none}
.maint-msg span{display:block;font-family:var(--geo);font-weight:300;letter-spacing:.3em;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.6rem);color:#F3EFE6}
.maint-msg small{display:block;margin-top:14px;font-family:var(--label);font-weight:300;letter-spacing:.05em;
  font-size:.82rem;color:rgba(243,239,230,.68)}
@media(prefers-reduced-motion:reduce){
  .slogo path{fill-opacity:1;stroke:none;stroke-dashoffset:0;animation:none}
  .slogo .block{transform:none;animation:none}
  .slogo .sketch{display:none}
}
.hero .bg{position:absolute;inset:-8% 0 0 0;height:116%;will-change:transform}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,24,20,.52),rgba(28,24,20,.32) 45%,rgba(28,24,20,.66))}
/* texto do hero: alinhado à esquerda, por baixo do logo (que fica a ~var(--hero-logo-top)) */
/* hero: descritor + frase à DIREITA do logo, centrados na vertical do logo (~var(--hero-logo-top)) */
.hero-in{position:absolute;left:0;right:0;top:var(--hero-logo-top);transform:translateY(-50%);z-index:2;
  text-align:left;padding-left:calc(var(--brand-hero-w) + clamp(30px,3.5vw,64px))}
.hero-title{font-family:var(--geo);font-weight:300;font-size:clamp(.85rem,1.5vw,1.08rem);
  letter-spacing:.06em;color:#fff;opacity:.94;line-height:1.4;text-transform: uppercase;}
.hero-line{margin-top:-6px;font-family:var(--geo);font-weight:500;font-style:italic;
  font-size:clamp(.95rem,1.7vw,1.2rem);letter-spacing:.005em;color:#fff;opacity:.9}
.cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--geo);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;gap:11px}
.cue .ln{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== CONTENT LAYOUT ===== */
main{position:relative;z-index:1}
.sec{position:relative;padding:clamp(88px,12vh,150px) var(--gutter);scroll-margin-top:var(--topbar-h)}
.sec.alt{background:var(--cream-2)}
.sec.dark{background:var(--ink);color:#EDE7DA}
.sec.dark .h-xl,.sec.dark .h-lg{color:#F3EFE6}
.sec.dark p.body{color:rgba(237,231,218,.72)}
.sec.dark .eyebrow{color:var(--olive)}
/* ghost number (Wittig-style layered type) */
.ghost{position:absolute;top:clamp(30px,6vh,80px);right:clamp(20px,4vw,70px);
  font-family:var(--geo);font-weight:200;font-size:clamp(7rem,20vw,17rem);line-height:.8;
  color:var(--ink);opacity:.05;pointer-events:none;user-select:none;z-index:0}
.sec.dark .ghost{color:#fff;opacity:.06}
.sec .inner{position:relative;z-index:2;max-width:var(--content);margin-inline:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.grid2.top{align-items:start}
/* 02 localização: texto (topo-esq) + pins (baixo-esq) + mapa (direita, a ocupar as duas linhas) */
.locgrid{display:grid;gap:clamp(30px,5vw,72px);align-items:start;
  grid-template-columns:1.05fr .95fr;grid-template-areas:"text map" "pins map"}
.locgrid .lg-text{grid-area:text}
.locgrid .lg-pins{grid-area:pins}
.locgrid .lg-map{grid-area:map;align-self:center}

/* figures + overlaps */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cgrid .fig{aspect-ratio:4/3}
.fig{overflow:hidden;position:relative}
.fig img{transition:transform 1.3s var(--ease)}
.fig:hover img{transform:scale(1.04)}
.fig.tall{aspect-ratio:3/4}.fig.wide{aspect-ratio:16/10}.fig.sq{aspect-ratio:1/1}
/* overlapping composition */
.stack{position:relative}
.stack .a{width:100%}
.stack .b{position:absolute;right:-60px;bottom:-20%;width:46%;border:8px solid var(--cream);z-index:3;
  box-shadow:0 22px 50px rgba(61,55,46,.22)}
.sec.alt .stack .b{border-color:var(--cream-2)}
/* 05: inset landscape crop, nested closer to the aerial for better harmony */
#s05 .stack .b{width:52%;right:-48px;bottom:-14%}
/* 05: reframe images inside the frames — aerial zoomed onto the villas, inset less sky */
#s05 .a img{transform:scale(1.22);transform-origin:100% 40%}
#s05 .a:hover img{transform:scale(1.32);transform-origin:100% 40%}
#s05 .b img{transform:scale(1.3);transform-origin:center 72%}
#s05 .b:hover img{transform:scale(1.4);transform-origin:center 72%}
.card-ov{position:relative}
.card-ov .card{position:absolute;left:-34px;bottom:-30px;background:var(--taupe);color:#fff;
  padding:26px 30px;max-width:300px;z-index:4;box-shadow:0 24px 60px rgba(61,55,46,.28)}
.card-ov .card .k{font-family:var(--geo);font-weight:200;font-size:2.6rem;line-height:1}
.card-ov .card .l{font-family:var(--geo);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  margin-top:6px;color:rgba(255,255,255,.82)}

/* full bleed (passes under the fixed column) */
.fb{position:relative;height:88vh;min-height:540px;overflow:hidden;z-index:1}
.fb .bg{position:absolute;inset:-10% 0;height:120%;will-change:transform}
.fb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,17,14,.55),transparent 55%)}
.fb .cap{position:absolute;left:50%;transform:translateX(-50%);bottom:40px;
  width:min(var(--content),calc(100% - 2*var(--gutter)));z-index:3;color:#fff}
.fb .cap>*{max-width:46ch}
.fb .cap .eyebrow{color:#fff;opacity:.9}.fb .cap h3{color:#fff;margin-top:12px}

/* indicators */
.kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.kpi{flex:1 1 180px;border:1px solid var(--line);padding:28px 24px;background:var(--white);text-align:center}
.sec.alt .kpi{background:var(--cream)}
.kpi .k{font-family:var(--geo);font-weight:600;font-size:3rem;line-height:1;color:var(--ink)}
.kpi .l{font-family:var(--geo);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-soft);margin-top:8px}
.table{border-top:1px solid var(--line)}
.table .r{display:flex;justify-content:space-between;gap:20px;padding:15px 2px;border-bottom:1px solid var(--line-soft)}
.table .r span:first-child{color:var(--taupe)}
.table .r span:last-child{font-family:var(--geo);letter-spacing:.04em;color:var(--ink);white-space:nowrap}

/* amenities */
.amen{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:8px}
.amen li{display:flex;align-items:center;gap:14px;padding:16px 2px;border-bottom:1px solid var(--line-soft);
  font-size:.95rem;color:var(--taupe)}
.amen li svg{width:20px;height:20px;flex:0 0 auto;color:var(--olive-d)}

/* location pins */
.pins{list-style:none;margin-top:24px}
.pins li{display:flex;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line-soft);
  font-size:.92rem;color:var(--taupe)}
.pins li span:last-child{font-family:var(--geo);letter-spacing:.05em;color:var(--ink)}

/* ===== GALLERY w/ nav ===== */
.gal{position:relative;margin-top:10px}
.gal .track{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;
  -ms-overflow-style:none;scrollbar-width:none}
.gal .track::-webkit-scrollbar{display:none}
.gal .item{flex:0 0 auto;scroll-snap-align:start}
.gal .item .fig{height:clamp(300px,50vh,520px);width:auto}
.gal .item .fig img{width:100%;height:100%}
.gal .item.landscape .fig{width:clamp(420px,58vh,640px)}
.gal .item.portrait .fig{width:clamp(280px,38vh,420px)}
.gal figcaption{font-family:var(--label);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe-soft);margin-top:14px}
.sec.dark .gal figcaption{color:rgba(237,231,218,.55)}
.galnav{display:flex;gap:10px;margin-top:26px}
.galnav button{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;color:var(--ink);
  display:grid;place-items:center;transition:all .4s var(--ease)}
.galnav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.galnav button svg{width:20px;height:20px}
.sec.dark .galnav button{border-color:rgba(255,255,255,.25);color:#EDE7DA}
.sec.dark .galnav button:hover{background:var(--olive);border-color:var(--olive);color:#fff}
.galnav button:disabled{opacity:.32;pointer-events:none}

/* contact */
.form{display:grid;gap:20px;margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--geo);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-soft)}
.field label .req{color:var(--olive-d);margin-left:3px;font-weight:600}
.form-note{font-family:var(--label);font-size:.72rem;letter-spacing:.02em;color:var(--taupe-soft);margin-top:-6px}
.field input,.field textarea{background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:10px 2px;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--ink);transition:border-color .4s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--olive)}
.field textarea{resize:vertical;min-height:70px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--taupe-soft);line-height:1.5}
.consent input{margin-top:3px;accent-color:var(--olive)}
.btn{justify-self:end;align-self:start;background:var(--ink);color:var(--cream);font-family:var(--geo);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;padding:13px 30px;border-radius:100px;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.btn:hover{background:var(--olive);transform:translateY(-2px)}
.cinfo{display:flex;flex-direction:column;gap:24px;margin-top:6px}
.cinfo .l{font-family:var(--geo);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-soft)}
.cinfo .v{font-family:var(--geo);font-weight:300;font-size:1.4rem;color:var(--ink);margin-top:4px}
.cinfo .v a{color:inherit;transition:color .3s var(--ease)}
.cinfo .v a:hover{color:var(--olive)}

/* footer */
footer{background:var(--ink);color:rgba(237,231,218,.62);padding:64px var(--gutter) 40px}
footer .fw{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;max-width:var(--content);margin-inline:auto}
footer .fm{width:170px;opacity:.92;margin-bottom:14px}
footer small{font-size:.72rem;letter-spacing:.03em;line-height:1.7}

/* floating */
.fab{position:fixed;right:24px;bottom:24px;z-index:65;background:var(--ink);color:#fff;font-family:var(--geo);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 26px;border-radius:100px;
  box-shadow:0 14px 40px rgba(61,55,46,.3);opacity:0;transform:translateY(18px);transition:all .5s var(--ease)}
.fab.show{opacity:1;transform:none}.fab:hover{background:var(--olive)}

@media(max-width:1024px){
  :root{--side:0px;--gutter:clamp(22px,4.6vw,50px);--topbar-h:74px;  /* barra mais alta em tablet */
    --brand-hero-w:clamp(320px,48vw,480px);  /* TABLET: logo ~metade do hero */
    --brand-park-h:46px}                      /* logo estacionado maior, centrado na barra de 74px */
  .rail{display:none}
  /* top bar collapses: logo + CTA + hamburger stay in the bar, links drop into a panel */
  .tb-burger{display:block;width:36px;height:36px}
  .tb-right{gap:10px}
  .tb-logo img{height:22px}
  /* CTA compacto para caber com o logo + hambúrguer em ecrãs estreitos */
  .tb-cta{padding:8px 13px;font-size:.62rem;letter-spacing:.1em}
  .topbar.menu-open{background:var(--taupe)}
  .tb-links{position:fixed;top:var(--topbar-h);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--taupe);padding:6px var(--gutter) 18px;box-shadow:0 22px 40px rgba(61,55,46,.24);
    transform:translateY(-14px);opacity:0;visibility:hidden;transition:transform .4s var(--ease),opacity .4s var(--ease),visibility .4s}
  .topbar.menu-open .tb-links{transform:none;opacity:1;visibility:visible}
  .tb-links a{padding:14px 0;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.12)}
  .tb-links a::after{display:none}
  .sec{padding:80px var(--gutter)}
  /* HERO: logo em cima (fica no seu sítio via JS), texto empilhado logo por baixo — sem padding-left do logo */
  /* texto do hero posiciona-se logo abaixo do logo, seja qual for o tamanho do logo */
  .hero-in{top:calc(var(--hero-logo-top) + var(--brand-hero-w) / 9.6 + 24px);transform:none;padding-left:0;padding-right:0}
  .hero-title{font-size:clamp(.86rem,3.2vw,1.05rem);line-height:1.35}
  .hero-line{margin-top:3px;font-size:clamp(.95rem,3.8vw,1.18rem)}
  .fb .cap{width:calc(100% - 2 * var(--gutter))}
  .grid2,.grid2.top{grid-template-columns:1fr;gap:34px}
  /* mantém a composição sobreposta (inset POR CIMA da imagem grande) também em responsivo,
     mas contida no ecrã — protrusão pequena p/ não causar scroll horizontal */
  .stack{margin-bottom:24px}
  .stack .a{width:100%}
  .stack .b{position:absolute;right:-10px;bottom:-24px;width:50%;margin-top:0;border-width:6px}
  #s05 .stack .b{right:-10px;bottom:-24px;width:52%;margin-top:0}
  .card-ov .card{position:static;margin-top:16px;left:0;max-width:none}
  .amen{grid-template-columns:1fr}.row2{grid-template-columns:1fr}
  /* galeria/carousel: alturas e larguras ajustadas ao ecrã (mantém scroll horizontal) */
  .gal .item .fig{height:clamp(240px,42vh,380px)}
  .gal .item.landscape .fig{width:min(86vw,520px)}
  .gal .item.portrait .fig{width:min(64vw,340px)}
  .galnav button{width:46px;height:46px}
  .cinfo .v{font-size:1.2rem}
  /* footer empilhado verticalmente pela ordem dos elementos */
  footer .fw{flex-direction:column;align-items:flex-start;gap:18px}
  footer .fm{margin-bottom:0}
}

/* ===== clickable figures + lightbox + cursor + scrollbar ===== */
[data-gal] .fig{cursor:pointer}
.fig .zoom{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  background:rgba(61,55,46,0);opacity:0;transition:opacity .45s var(--ease),background .45s var(--ease);pointer-events:none}
.fig:hover .zoom{opacity:1;background:rgba(61,55,46,.14)}
.fig .zoom span{position:relative;width:56px;height:56px;border:1px solid rgba(255,255,255,.85);border-radius:50%;
  color:#fff;transform:scale(.8);transition:transform .45s var(--ease)}
.fig:hover .zoom span{transform:scale(1)}
.fig .zoom span::before,.fig .zoom span::after{content:"";position:absolute;top:50%;left:50%;background:#fff}
.fig .zoom span::before{width:16px;height:1px;transform:translate(-50%,-50%)}
.fig .zoom span::after{width:1px;height:16px;transform:translate(-50%,-50%)}

/* custom cursor */
body.cursor-on{cursor:none}
body.cursor-on a,body.cursor-on button,body.cursor-on .fig,body.cursor-on input,body.cursor-on textarea,body.cursor-on label{cursor:none}
.cursor{position:fixed;top:0;left:0;z-index:300;width:12px;height:12px;border-radius:50%;
  background:var(--olive);pointer-events:none;display:grid;place-items:center;text-align:center;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s}
.cursor.ring{background:transparent;border:1px solid rgba(107,98,86,.7);width:26px;height:26px}
.cursor.hoverlink{width:40px;height:40px;background:rgba(174,169,53,.18);border:1px solid var(--olive)}
.cursor.hoverimg{width:76px;height:76px;background:rgba(174,169,53,.95);border:none}
.cursor .cl{font-family:var(--label);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  opacity:0;transition:opacity .3s}
.cursor.hoverimg .cl{opacity:1}
/* sobre áreas escuras (hero / secções .dark) só o ANEL fica claro para não desaparecer;
   os estados de hover (imagem "Ver" olive / link) mantêm-se para não ficarem brancos */
body.cursor-light .cursor.ring{background:transparent;border-color:var(--olive)}
body.cursor-light .cursor.hoverlink{background:rgba(174,169,53,.22);border-color:var(--olive)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(24,21,17,.95);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;backdrop-filter:blur(3px)}
.lb.open{opacity:1;visibility:visible}
.lb figure{margin:0;max-width:90vw;max-height:86vh;position:relative;transform:scale(.97);transition:transform .5s var(--ease)}
.lb.open figure{transform:scale(1)}
.lb img{max-width:90vw;max-height:80vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.55);display:block;margin:0 auto}
.lb figcaption{margin-top:16px;text-align:center;font-family:var(--label);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.lb .lbx,.lb .lbn{position:absolute;z-index:3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  color:#fff;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s}
.lb .lbx:hover,.lb .lbn:hover{background:var(--olive);border-color:var(--olive)}
.lb .lbx{top:26px;right:28px}
.lb .lbx::before,.lb .lbx::after{content:"";position:absolute;width:18px;height:1.4px;background:#fff}
.lb .lbx::before{transform:rotate(45deg)}.lb .lbx::after{transform:rotate(-45deg)}
.lb .lbn{top:50%;transform:translateY(-50%)}
.lb .lbn svg{width:22px;height:22px}
.lb .lbn.prev{left:26px}.lb .lbn.next{right:26px}
.lb .lbcount{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--label);
  font-size:.66rem;letter-spacing:.2em;color:rgba(255,255,255,.55)}
@media(hover:none){.cursor{display:none!important}body.cursor-on,body.cursor-on *{cursor:auto}}
@media(max-width:1024px){
  /* setas por cima da imagem (que ocupa ~90vw) com fundo visível — deixam de ficar escondidas atrás dela */
  .lb .lbn{width:42px;height:42px;background:rgba(20,17,14,.55);border-color:rgba(255,255,255,.35)}
  .lb .lbn.prev{left:10px}.lb .lbn.next{right:10px}
  .lb .lbx{background:rgba(20,17,14,.55);border-color:rgba(255,255,255,.35)}
}

.toTop{position:fixed;right:24px;bottom:76px;z-index:66;width:46px;height:46px;border-radius:50%;
  background:rgba(61,55,46,.9);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(61,55,46,.3);opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s var(--ease)}
.toTop.show{opacity:1;transform:none;pointer-events:auto}
.toTop:hover{background:var(--olive)}
.toTop svg{width:18px;height:18px}

/* ===== som ambiente (percurso: convite → ícone → a tocar → pausa) ===== */
.amb{position:fixed;right:24px;bottom:24px;z-index:66;font-family:var(--geo);color:#fff;pointer-events:none}
.amb-compact,.amb-panel{position:absolute;right:0;bottom:0;pointer-events:auto}

/* --- pílula compacta (convite / a tocar) --- */
.amb-compact{display:inline-flex;align-items:center;gap:4px;padding:10px 14px 10px 13px;border-radius:100px;
  background:rgba(28,23,18,.68);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 28px rgba(0,0,0,.28);
  transform-origin:bottom right;will-change:opacity;
  transition:opacity .55s ease,visibility .55s,transform .6s cubic-bezier(.4,0,.2,1)}
.amb-toggle{display:inline-flex;align-items:center;gap:11px;color:#fff;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.amb-ico{display:inline-flex;align-items:center;gap:8px;flex:none}
.amb-spk,.amb-mute{width:19px;height:19px;display:block;flex:none}
.amb-spk svg,.amb-mute svg{width:100%;height:100%}
/* ícone reflete o estado real: altifalante (a tocar, em olive) / altifalante com traço (pausa ou silêncio) */
.amb-mute{display:none}
.amb[data-play="false"] .amb-spk{display:none}
.amb[data-play="false"] .amb-mute{display:block}
.amb[data-play="true"] .amb-spk{color:var(--olive)}
.amb-label{display:inline-flex;white-space:nowrap}
.l-invite,.l-on{display:none}
.amb-x{width:26px;height:26px;border-radius:50%;display:none;place-items:center;color:rgba(255,255,255,.7);
  flex:none;margin-left:-2px;transition:color .3s,background .3s}
.amb-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.amb-x svg{width:13px;height:13px}

/* --- estados do compacto --- */
/* rótulo/× dependem só de data-on (NÃO de .mini) — assim não saltam por display no colapso;
   desvanecem suavemente com a pílula, tal como no estado já-clicado */
.amb[data-on="false"] .l-invite{display:inline}
.amb[data-on="false"] .amb-x{display:grid}
.amb[data-on="true"] .l-on{display:inline}
/* ícone recolhido — cross-fade com escala (só opacity+transform na GPU, sem reflow → suave) */
.amb-mini{position:absolute;right:0;bottom:0;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;pointer-events:auto;color:#fff;
  background:rgba(28,23,18,.72);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 28px rgba(0,0,0,.28);
  transform-origin:bottom right;opacity:0;visibility:hidden;transform:scale(.5);will-change:opacity,transform;
  transition:opacity .55s ease,visibility .55s,transform .6s cubic-bezier(.4,0,.2,1)}
/* recolhido (scroll/dispensado) e NÃO aberto: ícone entra (com escala), pílula só desvanece (sem escalar o blur) */
.amb.mini:not(.open) .amb-compact,
.amb[data-dismissed="true"]:not(.open) .amb-compact{opacity:0;visibility:hidden}
.amb.mini:not(.open) .amb-mini,
.amb[data-dismissed="true"]:not(.open) .amb-mini{opacity:1;visibility:visible;transform:none}
/* aberto: some tudo menos o painel */
.amb.open .amb-compact,.amb.open .amb-mini{opacity:0;visibility:hidden}
/* anel pulsante pré-criado (invisível) — evita o hitch de gerar o pseudo a meio do scroll;
   só fica visível + anima quando DESLIGADO (convida a ativar); não intercepta cliques */
.amb-mini::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(174,169,53,.5);
  pointer-events:none;opacity:0}
.amb[data-on="false"].mini .amb-mini::after,
.amb[data-on="false"][data-dismissed="true"] .amb-mini::after{opacity:1;animation:ambpulse 2.6s var(--ease) infinite}
@keyframes ambpulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}

/* --- painel expandido (pausa / retomar + estado) — abre com fade suave no hover/clique --- */
.amb-panel{display:flex;align-items:center;gap:11px;
  background:rgba(28,23,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);border-radius:13px;padding:11px 16px 11px 11px;color:#fff;
  opacity:0;visibility:hidden;transform:translateY(8px);transform-origin:bottom right;
  transition:opacity .4s var(--ease),transform .45s var(--ease),visibility .4s}
.amb.open .amb-panel{opacity:1;visibility:visible;transform:none}
.amb-play{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;color:#fff;transition:background .3s,border-color .3s}
.amb-play:hover{background:rgba(255,255,255,.12)}
.amb-play svg{width:14px;height:14px}
.amb-play .ic-play{display:none}
.amb[data-play="false"] .amb-play .ic-pause{display:none}
.amb[data-play="false"] .amb-play .ic-play{display:block}
.amb-meta{min-width:0}
.amb-title{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.amb-status{display:block;font-size:.58rem;color:rgba(255,255,255,.6);margin-top:2px;white-space:nowrap}
.st-play,.st-pause{display:none}
.amb[data-play="true"] .st-play{display:inline}
.amb[data-play="false"] .st-pause{display:inline}

/* enquanto o painel de som está aberto, esconde o back-to-top (evita sobreposição no canto) */
body.sound-open .toTop{opacity:0;visibility:hidden;pointer-events:none}
/* responsivo do widget de som (o resto do responsivo é validado depois) */
@media(max-width:1024px){
  .amb{right:16px;bottom:16px}
  .toTop{right:16px;bottom:68px}
}
@media(max-width:440px){
  /* garante que a pílula de som fica ancorada à direita e nunca transborda o ecrã */
  .amb{right:14px;left:auto;max-width:calc(100vw - 28px)}
  .amb-compact{right:0;gap:2px;padding:9px 12px;max-width:calc(100vw - 28px)}
  .amb-toggle{font-size:.6rem;letter-spacing:.06em;gap:8px;min-width:0}
  .amb-spk{width:17px;height:17px}
  .amb-label{overflow:hidden;text-overflow:ellipsis}
}

.ghint{position:relative;height:2px;background:rgba(61,55,46,.12);margin-top:24px;overflow:hidden;border-radius:2px}
.sec.dark .ghint{background:rgba(255,255,255,.14)}
.ghint i{position:absolute;top:0;height:100%;width:24%;border-radius:2px;background:var(--olive);
  animation:ghint 3.4s var(--ease) infinite}
@keyframes ghint{0%{left:-26%}100%{left:102%}}

/* styled scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--taupe) var(--cream-2)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--taupe);border-radius:20px;border:3px solid var(--cream-2)}
::-webkit-scrollbar-thumb:hover{background:var(--olive)}

/* ===== utility ===== */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ===== manifesto band (full-width, centrado — a barra lateral só surge depois) ===== */
.manifesto{position:relative;background:var(--cream-2);text-align:center;z-index:1;
  padding:clamp(70px,11vh,130px) clamp(28px,6vw,80px)}
.manifesto .mk{display:block;width:34px;height:2px;background:var(--olive);margin:0 auto 30px}
.manifesto p{max-width:42ch;margin:0 auto;font-family:var(--geo);font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.6;color:var(--ink);letter-spacing:.01em}

/* ===== card grids (features + media) ===== */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.6vw,22px);margin-top:40px}
.fcard{background:var(--white);border:1px solid var(--line);padding:32px 30px;display:flex;flex-direction:column;
  transition:opacity 1s ease var(--rd,0s),transform .5s var(--ease),box-shadow .5s var(--ease)}
.sec.alt .fcard{background:var(--cream)}
/* reveal dos cards = fade puro (opacity), com atraso de cascata via --rd;
   o transform fica livre para o hover (sem atraso) */
.fcard.rv{opacity:0;transform:none}
.fcard.rv.in{opacity:1}
.fcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(61,55,46,.10)}
.fcard .fc-ic{width:60px;height:60px;color:var(--olive-d);margin-bottom:18px}
.fcard .fc-ic svg{width:100%;height:100%;display:block}
.fcard .fc-sub{font-family:var(--label);font-weight:400;font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--olive-d)}
.fcard .fc-title{font-family:var(--geo);font-weight:600;font-size:1.28rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);margin:10px 0 14px}
.fcard .fc-body{font-family:var(--body);font-weight:300;font-size:.95rem;line-height:1.66;color:var(--taupe)}
/* media card: image on top */
.fcard.media{padding:0;overflow:hidden}
.fcard.media .fig{aspect-ratio:16/10}
.fcard.media .fc-inner{padding:30px 30px 32px}
.fcard.media .fc-title{margin-top:8px}

/* ===== promoters (coluna centrada e equilibrada) ===== */
.promoters{max-width:820px}   /* alinhado à esquerda (uniforme com as outras secções) */
.promoters .pr-rule{display:block;width:34px;height:2px;background:var(--olive);margin-bottom:26px}
.promoters .pr-body{font-family:var(--geo);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.62;color:var(--ink);letter-spacing:.005em}
.promoters .pr-sign{font-family:var(--label);font-weight:500;font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--olive-d);margin-top:26px}

/* ===== footer legal ===== */
.flegal{max-width:var(--content);margin-inline:auto;margin-top:44px;padding-top:26px;border-top:1px solid rgba(237,231,218,.14);
  display:flex;justify-content:space-between;align-items:center;gap:20px 30px;flex-wrap:wrap}
.flinks{display:flex;gap:24px;flex-wrap:wrap}
.flink{font-family:var(--label);font-weight:400;font-size:.72rem;letter-spacing:.05em;
  color:rgba(237,231,218,.62);background:none;border:none;cursor:pointer;padding:0;
  transition:color .35s var(--ease)}
.flink:hover{color:var(--olive)}
.fcompany{color:rgba(237,231,218,.42);font-size:.68rem;letter-spacing:.03em}
.fcompany a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .3s var(--ease)}
.fcompany a:hover{color:var(--olive)}

/* inline link (ex.: consentimento do formulário) */
.ilink{display:inline;font:inherit;color:var(--olive-d);background:none;border:none;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;transition:color .3s var(--ease)}
.ilink:hover{color:var(--olive)}

/* ===== modal legal (pop-up) ===== */
.modal{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(24,21,17,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s}
.modal.open{opacity:1;visibility:visible}
.modal-panel{position:relative;background:var(--cream);color:var(--ink);width:min(720px,100%);max-height:86vh;
  display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.4);
  transform:translateY(14px);transition:transform .45s var(--ease)}
.modal.open .modal-panel{transform:none}
.modal-title{font-weight:600;font-size:clamp(1.2rem,2.4vw,1.7rem);text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);padding:34px 72px 18px 40px;border-bottom:1px solid var(--line)}
.modal-body{overflow-y:auto;padding:24px 40px 40px;font-family:var(--body);font-weight:300;
  font-size:.95rem;line-height:1.7;color:var(--taupe)}
.modal-body h3{font-family:var(--geo);font-weight:600;font-size:.92rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);margin:22px 0 8px}
.modal-body p{margin-bottom:10px}
.modal-body ul{margin:8px 0 12px 18px}
.modal-body li{margin-bottom:6px}
.modal-body a{color:var(--olive-d);text-decoration:underline;text-underline-offset:2px}
.modal-body .doc-upd{font-family:var(--label);font-size:.72rem;letter-spacing:.06em;color:var(--taupe-soft);margin-bottom:14px}
/* variante: modal de mensagem (sucesso) — centrado, pequeno */
.modal-panel-sm{width:min(460px,100%);text-align:center;padding-bottom:10px}
.modal-msg .modal-title{border-bottom:none;padding:6px 40px 4px;text-align:center}
.modal-msg .modal-body{overflow:visible;text-align:center;padding:4px 40px 34px;color:var(--taupe)}
.msg-ico{width:66px;height:66px;margin:40px auto 4px;border-radius:50%;display:grid;place-items:center;
  background:rgba(174,169,53,.15);color:var(--olive-d)}
.msg-ico svg{width:30px;height:30px}

.modal-x{position:absolute;top:22px;right:24px;width:40px;height:40px;border-radius:50%;background:var(--cream);
  border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s}
.modal-x:hover{background:var(--olive);border-color:var(--olive)}
.modal-x::before,.modal-x::after{content:"";position:absolute;width:16px;height:1.4px;background:var(--ink)}
.modal-x:hover::before,.modal-x:hover::after{background:#fff}
.modal-x::before{transform:rotate(45deg)}.modal-x::after{transform:rotate(-45deg)}

@media(max-width:1024px){
  .manifesto{padding-left:var(--gutter);padding-right:var(--gutter)}
  .cardgrid{grid-template-columns:1fr}
  .modal-title{padding:26px 60px 16px 24px}
  .modal-body{padding:20px 24px 28px}
}
/* TABLET: onde há largura para 2 colunas, evita cartões/listas esticados a toda a largura */
@media(min-width:600px) and (max-width:1024px){
  .cardgrid{grid-template-columns:1fr 1fr;gap:26px}
  .amen{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr 1fr}   /* telefone + email lado a lado */
  /* insets sobrepostas mais próximas do desktop (s01 quadrada, s05 landscape) */
  .stack .b{right:-20px;bottom:-16%;width:46%}
  #s05 .stack .b{right:-20px;bottom:-14%;width:52%}
  /* 03: 2 colunas com as fotos alinhadas em baixo (não tapam o número de fundo; cria equilíbrio) */
  #s03 .grid2{grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:end}
  /* 04: tabela ao lado da infografia */
  #s04 .grid2.top{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
  /* 02: texto em cima (linha inteira), pins ao lado do mapa */
  .locgrid{grid-template-areas:"text text" "pins map";gap:clamp(26px,4vw,44px)}
}
/* TELEMÓVEL */
@media(max-width:599px){
  /* logo do hero quase à largura do ecrã; barra mais alta e logo estacionado */
  :root{--topbar-h:66px;--brand-hero-w:min(84vw,360px);--brand-park-h:34px}
  /* CTA + hambúrguer mais compactos p/ o logo caber sem colidir em ecrãs estreitos */
  .tb-cta{padding:6px 10px;font-size:.56rem;letter-spacing:.05em}
  .tb-right{gap:8px}
  .tb-burger{width:32px;height:32px}
  /* inset da 01 com a MESMA altura da 05 (landscape 16/10), alinhada ao fundo (corta o céu, não a moradia) */
  #s01 .stack .b{width:52%;aspect-ratio:16/10}
  #s01 .stack .b img{object-position:center 82%}
  /* 02 localização: tudo empilhado (texto, pins, mapa) */
  .locgrid{grid-template-columns:1fr;grid-template-areas:"text" "pins" "map"}
  /* 04 indicadores: destaque ao 1.º (linha inteira) e os 2 seguintes lado a lado */
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .kpi{flex:none}
  .kpi:first-child{grid-column:1 / -1}
}
/* ecrãs muito estreitos: logo estacionado ainda mais pequeno p/ garantir folga ao CTA */
@media(max-width:360px){
  :root{--brand-park-h:30px}
}