/* MonteSite Vitrine. Mundo: o navegador como rua de vitrines. Ver DESIGN.md */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Bricolage Fallback";src:local("Arial");size-adjust:104%;ascent-override:92%;descent-override:26%}

:root{
  --night:#0b1730;      /* oklch(.19 .045 255) */
  --night-2:#12213f;
  --night-3:#1b2c50;
  --paper:#f4f7fb;      /* oklch(.975 .006 250) */
  --paper-2:#e8eef6;
  --white:#fcfdff;
  --ink:#0f1d36;
  --ink-2:#4a5a74;
  --line:#d3dce8;
  --blue:#0080ff;       /* cor da marca MonteSite */
  --blue-ink:#0062cc;   /* texto/botão azul sobre claro (AA) */
  --blue-soft:#d9ebff;
  --on-night:#eef3fb;
  --on-night-2:#a9b8cf;
  --r:12px;
  --nav-h:68px;
  --shot:1345/600;      /* proporção dos prints cadastrados (~2,24:1): mostra o site inteiro, sem cortar as laterais */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --sans:"Bricolage","Bricolage Fallback",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-optical-sizing:auto;overflow-x:clip;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
a,button,[role=button],label{touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button,.btn,.tab,.switch{user-select:none;-webkit-touch-callout:none}
input,select,textarea{font:inherit;font-size:16px}
h1,h2,h3{margin:0;line-height:1.05;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{list-style:none;margin:0;padding:0}
svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:6px}
html{accent-color:var(--blue);caret-color:var(--blue);scrollbar-color:#9fb1c9 transparent}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
#vitrine{scroll-margin-top:var(--nav-h)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.num,.n{font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.h2{font-size:clamp(2rem,4.2vw,3.5rem);font-weight:750;letter-spacing:-.03em;font-variation-settings:"opsz" 96}
.lead{margin-top:12px;color:var(--ink-2);font-size:1.0625rem;max-width:52ch}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;font-weight:650;font-size:1rem;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-blue{background:var(--blue-ink);color:#fff}
.btn-night{background:var(--night);color:#fff}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-lg{min-height:56px;padding:0 30px;font-size:1.0625rem}
.btn-sm{min-height:38px;padding:0 14px;font-size:.9rem}
.btn svg{width:1.1em;height:1.1em}
@media (hover:hover) and (pointer:fine){
  .btn-blue:hover{background:#004fa6}
  .btn-night:hover{background:var(--night-3)}
  .btn-line:hover{border-color:var(--ink);}
}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:inherit;transition:background-color .15s ease,transform .16s var(--ease-out)}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:rgb(127 145 175/.16)}}

/* ---------- nav ---------- */
.logo{display:inline-flex;font-weight:800;font-size:1.5rem;letter-spacing:-.035em;text-decoration:none;line-height:1}
.logo-a{color:var(--blue)}
.logo-b{color:currentColor}
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);color:var(--on-night);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.nav-in{height:100%;max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.nav-links{display:flex;gap:clamp(16px,2.4vw,32px);margin-left:auto}
.nav-links a{text-decoration:none;font-weight:550;font-size:.98rem;opacity:.86;transition:opacity .15s ease;white-space:nowrap}
.nav-links a:hover{opacity:1}
.nav-cta{min-height:42px}
.nav.is-solid{background:rgb(244 247 251/.86);color:var(--ink);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
@media (prefers-reduced-transparency:reduce){.nav.is-solid{background:var(--paper)}}
@media (max-width:560px){
  .nav-links{gap:12px}
  .nav-cta{min-height:40px;padding:0 16px;font-size:.92rem}
}
@media (max-width:380px){.nav-links{display:none}.nav-cta{margin-left:auto}}
@keyframes fade{from{opacity:0}}

/* ---------- 1. hero: parede de prints ---------- */
.hero{position:relative;overflow:hidden;min-height:100svh;background:var(--night);color:var(--on-night);display:flex;align-items:center;isolation:isolate}
.wall{position:absolute;inset:0;z-index:-2;perspective:1600px;pointer-events:none}
.wall-tilt{position:absolute;top:-30%;left:34%;width:110%;height:170%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;transform:rotateX(22deg) rotateZ(-14deg);transform-origin:50% 40%}
.wall-col{display:flex;flex-direction:column;animation:wall-up var(--dur,90s) linear infinite}
.wall-col:nth-child(even){animation-name:wall-down}
.wall-tile{margin-bottom:18px;border-radius:8px;overflow:hidden;background:var(--night-2);box-shadow:0 18px 40px -18px rgb(0 0 0/.7);flex-shrink:0}
.wall-tile::before{content:"";display:block;height:14px;background:#1e2f52}
.wall-tile img{width:100%;aspect-ratio:var(--shot);object-fit:cover;object-position:top;opacity:.92}
@keyframes wall-up{to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,var(--night) 0%,var(--night) 30%,rgb(11 23 48/.86) 46%,rgb(11 23 48/.25) 72%,rgb(11 23 48/.1) 100%),
  linear-gradient(0deg,var(--night) 0%,transparent 22%)}
.hero-in{width:100%;max-width:1320px;margin-inline:auto;padding:calc(var(--nav-h) + 40px) clamp(16px,4vw,40px) 64px}
.hero-t{font-size:clamp(2.25rem,4.6vw,4rem);font-weight:780;letter-spacing:-.04em;line-height:1.02;max-width:17ch;font-variation-settings:"opsz" 96}
.hero-t .n{color:var(--blue)}
.hero-t2{display:block;color:var(--on-night-2);font-weight:600}
.hero-sub{margin-top:24px;max-width:44ch;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--on-night-2);line-height:1.5}
.hero-alt{display:inline-flex;align-items:center;gap:.4em;margin-top:18px;color:var(--on-night);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgb(238 243 251/.35);padding-bottom:2px;transition:border-color .15s ease}
.hero-alt:hover{border-color:var(--on-night)}
.hero-alt svg{width:1em;height:1em}

/* barra de endereço (busca) */
.addr{display:flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:5px 5px 5px 18px;transition:border-color .15s ease,box-shadow .15s ease}
.addr:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgb(0 128 255/.18)}
.addr input{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:10px 0;color:var(--ink)}
.addr input::placeholder{color:#6a7891}
.addr input::-webkit-search-cancel-button{display:none}
.addr-ico{color:var(--ink-2)}
.addr-hero{margin-top:36px;max-width:600px;border-color:transparent;box-shadow:0 20px 50px -20px rgb(0 0 0/.6)}
.addr-hero .btn{min-height:48px}
.addr-clear{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:999px;background:var(--paper-2)}
.addr-clear[hidden]{display:none}

@media (max-width:900px){
  .wall-tilt{left:-10%;width:150%;top:-20%;grid-template-columns:repeat(4,minmax(0,1fr))}
  .wall-col:nth-child(5){display:none}
  .hero::before{background:linear-gradient(180deg,rgb(11 23 48/.7) 0%,rgb(11 23 48/.88) 40%,var(--night) 85%)}
  .hero{align-items:flex-end}
}
@media (max-width:560px){
  .addr-hero{flex-wrap:wrap;border-radius:20px;padding:8px}
  .addr-hero .addr-ico{margin-left:10px}
  .addr-hero .btn{width:100%}
}

/* ---------- 2. segmentos ---------- */
.segs{padding:clamp(80px,10vw,136px) 0 clamp(64px,8vw,104px)}
.segwall{display:flex;flex-wrap:wrap;gap:6px clamp(14px,2vw,28px);margin-top:40px;align-items:baseline}
.segwall button{border:0;background:none;padding:2px 0;font-weight:720;letter-spacing:-.03em;line-height:1.1;color:var(--ink);text-align:left;font-variation-settings:"opsz" 72;transition:color .15s ease}
.segwall .t1{font-size:clamp(2rem,4.6vw,4rem)}
.segwall .t2{font-size:clamp(1.6rem,3.2vw,2.75rem)}
.segwall .t3{font-size:clamp(1.25rem,2.2vw,1.875rem);font-weight:650;color:var(--ink-2)}
.segwall sup{font-family:var(--mono);font-size:.38em;font-weight:500;color:var(--blue-ink);letter-spacing:0;margin-left:.2em;vertical-align:.95em;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.segwall button:hover{color:var(--blue-ink)}}
.segwall li.is-extra{display:none}
.segwall.is-open li.is-extra{display:list-item;animation:fade .3s ease}
#seg-more{margin-top:36px}

/* ---------- 3. vitrine ---------- */
.vit{padding:clamp(56px,7vw,96px) 0 clamp(80px,9vw,128px);background:var(--white);border-top:1px solid var(--line)}
.vit-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.vit-count{color:var(--ink-2);font-variant-numeric:tabular-nums}
.vit-count b{color:var(--ink);font-weight:650}
.tool{position:sticky;top:var(--nav-h);z-index:20;margin-top:24px;background:rgb(252 253 255/.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s ease}
.tool.is-stuck{border-color:var(--line)}
@media (prefers-reduced-transparency:reduce){.tool{background:var(--white)}}
.tool-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding-top:12px;padding-bottom:12px}
.addr-tool{background:var(--paper)}
.tool-opts{display:flex;align-items:center;gap:16px}
.switch{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap;min-height:44px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-ui{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:background-color .2s ease;flex-shrink:0}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.2);transition:transform .2s var(--ease-out)}
.switch input:checked+.switch-ui{background:var(--blue-ink)}
.switch input:checked+.switch-ui::after{transform:translateX(18px)}
.switch input:focus-visible+.switch-ui{outline:2.5px solid var(--blue);outline-offset:3px}
.select{min-height:44px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);padding:0 36px 0 16px;color:var(--ink);font-weight:550;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a74' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;cursor:pointer}
/* abas = segmentos */
.tabs{grid-column:1/-1;display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-4px;padding:2px 4px;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex-shrink:0;scroll-snap-align:start;border:0;background:transparent;padding:10px 14px 12px;font-weight:600;font-size:.95rem;color:var(--ink-2);white-space:nowrap;border-radius:10px 10px 0 0;transition:color .15s ease,background-color .15s ease}
.tab .c{font-family:var(--mono);font-size:.75em;font-weight:500;margin-left:6px;opacity:.75;font-variant-numeric:tabular-nums}
.tab[aria-pressed=true]{color:var(--ink);background:var(--paper)}
.tab[aria-pressed=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--blue)}
@media (hover:hover) and (pointer:fine){.tab:hover{color:var(--ink)}}
.tab-more{display:inline-flex;align-items:center}
.tab-more select{border:0;background:transparent;font-weight:600;font-size:.95rem;color:var(--ink-2);padding:10px 26px 12px 14px;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a74' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:14px;max-width:220px}
.tab-more select.is-on{color:var(--ink);background-color:var(--paper);border-radius:10px 10px 0 0}
@media (max-width:760px){
  .tool-in{grid-template-columns:minmax(0,1fr)}
  .tool-opts{justify-content:space-between}
}

/* grade de janelas */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(20px,2.4vw,32px);margin-top:36px}
.card{min-width:0}
.card.is-wide{grid-column:span 2}
.card.is-in{animation:float-up .5s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes float-up{from{opacity:0;transform:translateY(14px)}}
.win{border-radius:var(--r);overflow:hidden;background:var(--white);border:1px solid var(--line);box-shadow:0 1px 2px rgb(15 29 54/.05),0 14px 34px -22px rgb(15 29 54/.35);transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.win-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.win-bar>i{width:9px;height:9px;border-radius:50%;background:#c5cfdd;flex-shrink:0}
.win-url{flex:1;min-width:0;margin-left:8px;height:22px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:999px;background:var(--white);font-family:var(--mono);font-size:.75rem;color:var(--ink-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win-url svg{width:11px;height:11px}
.win-url span{overflow:hidden;text-overflow:ellipsis}
.win-tag{flex-shrink:0;font-size:.6875rem;font-weight:650;color:var(--blue-ink);background:var(--blue-soft);padding:3px 8px;border-radius:999px;white-space:nowrap}
.win-shot{display:block;width:100%;padding:0;border:0;background:var(--paper-2);position:relative;cursor:zoom-in;overflow:hidden}
.win-shot img{width:100%;aspect-ratio:var(--shot);object-fit:cover;object-position:top center;transition:transform .5s var(--ease-out)}
.win-shot::after{content:"Ver prévia";position:absolute;right:12px;bottom:12px;background:var(--night);color:#fff;font-weight:600;font-size:.85rem;padding:8px 14px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .card:hover .win{box-shadow:0 1px 2px rgb(15 29 54/.05),0 24px 44px -24px rgb(15 29 54/.5);transform:translateY(-2px)}
  .card:hover .win-shot img{transform:scale(1.025)}
  .win-shot:hover::after,.win-shot:focus-visible::after{opacity:1;transform:none}
}
.img-ph{position:absolute;inset:0;display:grid;place-items:center;color:#9aa8bd;font-family:var(--mono);font-size:.8rem}
.card-meta{display:flex;align-items:flex-start;gap:12px;padding:14px 2px 0}
.card-txt{flex:1;min-width:0}
.card-name{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;line-height:1.2;overflow-wrap:anywhere}
.card-cat{margin-top:3px;font-size:.875rem;color:var(--ink-2)}
.card-cat button{border:0;background:none;padding:0;color:inherit;font-size:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}
.card-cat button:hover{color:var(--blue-ink);text-decoration-color:currentColor}
.card-desc{margin-top:8px;font-size:.92rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-go{flex-shrink:0;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.card-go svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.card-go:hover{background:var(--blue-ink);border-color:var(--blue-ink);color:#fff}}
.sk .win-shot{aspect-ratio:var(--shot);background:linear-gradient(100deg,var(--paper-2) 40%,var(--paper) 50%,var(--paper-2) 60%) 0 0/300% 100%;animation:sk 1.2s linear infinite}
.sk .card-name{height:18px;width:60%;border-radius:6px;background:var(--paper-2)}
@keyframes sk{to{background-position:-150% 0}}
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .card.is-wide{grid-column:auto}
}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:72px 16px;color:var(--ink-2)}
.empty[hidden]{display:none}
.empty svg{width:40px;height:40px;color:#9aa8bd}
.more{display:flex;justify-content:center;margin-top:48px}
.more[hidden]{display:none}

/* ---------- 4. vitrine online ---------- */
.online{padding:clamp(80px,10vw,136px) 0;background:var(--paper)}
.online-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rail-ctrl{display:flex;gap:8px}
.rail-ctrl .icon-btn{border:1.5px solid var(--line)}
.rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(clamp(16px,4vw,40px),calc((100vw - 1320px)/2 + 40px));padding:40px max(clamp(16px,4vw,40px),calc((100vw - 1320px)/2 + 40px)) 32px;scrollbar-width:thin;overscroll-behavior-x:contain}
.rail>li{flex:0 0 min(440px,82vw);scroll-snap-align:start;min-width:0}
.online .wrap>.btn{margin-top:8px}
@media (max-width:640px){.rail-ctrl{display:none}}

/* ---------- 5. diferenciais: bento sem gap ---------- */
.why{padding:clamp(80px,10vw,136px) 0}
.bento{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:auto auto;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.b{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:10px}
.b h3{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:720;letter-spacing:-.025em}
.b p{max-width:40ch}
.b>svg{width:32px;height:32px;margin-bottom:auto;padding-bottom:28px;box-sizing:content-box}
.b-big{grid-row:span 2;background:var(--white);overflow:hidden;border-right:1px solid var(--line)}
.b-big p{color:var(--ink-2)}
.b-blue{background:var(--blue);color:var(--night)}
.b-ink{background:var(--night);color:var(--on-night)}
.b-ink p{color:var(--on-night-2)}
.devices{position:relative;margin-top:36px;padding-right:12%;padding-bottom:28px}
.dev-desk{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 50px -28px rgb(15 29 54/.5);background:var(--paper-2)}
.dev-desk .win-bar{height:26px}
.dev-desk img{width:100%;aspect-ratio:var(--shot);object-fit:cover;object-position:top}
.dev-phone{position:absolute;right:0;bottom:0;width:26%;min-width:110px;aspect-ratio:9/18.5;border-radius:22px;border:7px solid var(--night);overflow:hidden;background:var(--night);box-shadow:0 24px 40px -18px rgb(15 29 54/.55)}
.dev-phone iframe{position:absolute;top:0;left:0;width:390px;height:802px;border:0;background:#fff;transform-origin:0 0;pointer-events:none}
@media (max-width:860px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .b-big{grid-row:auto;border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- 6. fechamento ---------- */
.close{background:var(--blue);color:var(--night);padding:clamp(80px,10vw,144px) 0;position:relative;overflow:hidden}
.close::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 46px,rgb(11 23 48/.07) 46px 47px);pointer-events:none}
.close-in{position:relative;display:grid;gap:24px;justify-items:start}
.close h2{font-size:clamp(2.25rem,5.6vw,5rem);font-weight:780;letter-spacing:-.04em;max-width:16ch;line-height:1}
.close p{font-size:1.1875rem;max-width:48ch;font-weight:500}
.close .btn{margin-top:12px}

/* ---------- rodapé = barra de status ---------- */
.foot{background:var(--night);color:var(--on-night)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding-top:72px;padding-bottom:56px}
.foot p{color:var(--on-night-2)}
.foot-brand p{margin-top:14px;max-width:32ch}
.logo-lg{font-size:2rem}
.foot-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.foot-col h3{font-size:.95rem;font-weight:650;color:var(--on-night);margin-bottom:6px}
.foot-col a{color:var(--on-night-2);text-decoration:none;overflow-wrap:anywhere;padding:2px 0}
.foot-col a:hover{color:#fff;text-decoration:underline}
.social{display:flex;gap:4px;margin-top:20px;margin-left:-10px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--on-night-2);transition:color .15s ease,background-color .15s ease}
.social a:hover{color:#fff;background:var(--night-3)}
.status{background:#070f22;border-top:1px solid var(--night-3);font-size:.85rem;color:var(--on-night-2)}
.status-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;min-height:52px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.status-ok{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem}
.status-ok svg{color:#4fb0ff;width:16px;height:16px}
.status-by{display:inline-flex;align-items:center;gap:10px}
.status-by img{height:18px;width:auto;background:#fff;padding:5px 8px;border-radius:6px;box-sizing:content-box}
@media (max-width:900px){.foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- prévia ao vivo ---------- */
.pv{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(0px,1.6vw,20px);border:0;background:transparent;overscroll-behavior:contain}
.pv[open]{display:flex}
.pv::backdrop{background:rgb(5 10 22/.72)}
.pv[open]::backdrop{animation:fade .25s ease}
.pv-win{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--paper-2);box-shadow:0 40px 90px -30px rgb(0 0 0/.7)}
.pv[open] .pv-win{animation:pv-in .26s var(--ease-out)}
@keyframes pv-in{from{opacity:0;transform:scale(.97)}}
.pv-bar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;background:var(--white);border-bottom:1px solid var(--line)}
.pv-dots{display:flex;gap:7px}
.pv-dots i{width:11px;height:11px;border-radius:50%;background:#c5cfdd}
.pv-nav{display:flex}
.pv-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:var(--paper);font-family:var(--mono);font-size:.85rem;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.pv-url span{overflow:hidden;text-overflow:ellipsis}
.pv-url svg{width:14px;height:14px;color:#2a8a4a}
.seg-dev{display:flex;background:var(--paper);border-radius:999px;padding:3px}
.seg-dev button{display:grid;place-items:center;width:40px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);transition:background-color .15s ease,color .15s ease}
.seg-dev button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgb(15 29 54/.15)}
.pv-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(0,1fr) auto}
.pv-info{grid-row:1/-1;grid-column:2}
.pv-hint-m{display:none;margin:0;padding:8px 16px;font-size:.85rem;color:var(--ink-2);background:var(--white);border-top:1px solid var(--line);text-align:center}
.pv-stage{min-height:0;display:flex;justify-content:center;background:var(--paper-2);overflow:hidden}
.pv-stage iframe{border:0;width:100%;height:100%;background:#fff;transition:width .3s var(--ease-in-out)}
.pv-win[data-device=phone] .pv-stage{padding:20px 0}
.pv-win[data-device=phone] .pv-stage iframe{width:390px;max-width:calc(100% - 24px);border-radius:28px;border:10px solid var(--night);box-shadow:0 30px 60px -30px rgb(0 0 0/.6)}
.pv-info{padding:28px 24px;background:var(--white);border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;gap:12px}
.pv-info h2{font-size:1.75rem;font-weight:750;letter-spacing:-.025em;overflow-wrap:anywhere}
.pv-info p{color:var(--ink-2);font-size:.95rem}
.pv-cat{font-weight:600;color:var(--blue-ink)!important}
.pv-hint{margin-top:auto;font-size:.85rem!important;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:1100px){.pv-body{grid-template-columns:minmax(0,1fr)}.pv-info{display:none}.pv-hint-m{display:block}}
@media (max-width:640px){
  .pv-dots,.pv-nav{display:none}
  .pv-win{border-radius:0}
  .pv-bar{flex-wrap:wrap;padding:8px}
  .pv-url{order:5;flex-basis:100%}
  .pv-bar .btn{margin-left:auto}
}

/* ---------- modo público (/vitrine-publica) ---------- */
.is-publica [data-mkt]{display:none!important}
.is-publica .nav{background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.is-publica .vit{padding-top:calc(var(--nav-h) + 40px);border-top:0}
.is-publica .foot-in{display:none}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wall-col{animation:none}
  .card.is-in{animation:fade .2s ease both}
  .pv[open] .pv-win{animation:fade .2s ease}
  .sk .win-shot{animation:none}
  *{transition-duration:.01ms!important}
}