/* Panorama, identidade compartilhada: tokens, topo, menu flutuante, botões, transição entre páginas e páginas internas */
:root {
  --papel: #f5f6f4;
  --papel-2: #e8ebe7;
  --grade: rgba(20, 34, 58, .06);
  --tinta: #14223a;
  --lapis: #8a93a0;
  --lapis-2: #5a6577;
  --noite: #0e1625;
  --noite-2: #152035;
  --noite-linha: #26334a;
  --bronze: #a8743f;
  --bronze-claro: #d8a774;
  --vidro: #c9d6e2;
  --f: 'Archivo', system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 56px);
  --max: 1180px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --larg-titulo: 110%;   /* uma só largura para todos os títulos do site; o resto do texto fica em 100% */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--f); font-stretch: 100%; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bronze-claro); outline-offset: 3px; border-radius: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quadriculado { background-color: var(--papel);
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 36px 36px; background-position: center top; }

/* ---------- topo: barra de vidro em toda a largura, com logo, menu e o botão de agendar ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  padding: 11px var(--gut); background: rgba(245, 246, 244, .62); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(20, 34, 58, .09); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; transition: background .45s var(--ease), border-color .45s var(--ease); }
.topo.escuro { background: rgba(14, 22, 37, .42); border-bottom-color: rgba(255, 255, 255, .1); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.marca { display: block; position: relative; height: 42px; width: calc(42px * 403 / 96); flex: none; }
.marca img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .45s var(--ease); }
.marca .branca { opacity: 0; }
.topo.escuro .marca .azul { opacity: 0; }
.topo.escuro .marca .branca { opacity: 1; }
.topo .acao { flex: none; text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: #fff; transition: background .2s; }
.topo .acao:hover { background: #0a1528; }
.topo.escuro .acao { background: var(--bronze-claro); color: var(--noite); }
.topo.escuro .acao:hover { background: #e6b886; }
@media (max-width: 560px) { .topo .longo { display: none; } .marca { height: 34px; width: calc(34px * 403 / 96); } .topo .acao { font-size: 14px; padding: 8px 13px; } }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 12px 20px; border-radius: 999px;
  border: 1.5px solid currentColor; background: transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.btn.bronze { background: var(--bronze-claro); border-color: var(--bronze-claro); color: var(--noite); }
.btn.bronze:hover { background: #e6b886; border-color: #e6b886; }
.btn.claro { color: #fff; }
.btn.claro:hover { background: rgba(255,255,255,.1); }
.btn.tinta { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn.tinta:hover { background: #0a1528; }
.btn.contorno { color: var(--tinta); }
.btn.contorno:hover { background: rgba(20,34,58,.06); }

/* ---------- menu (dentro da barra do topo) ---------- */
.dock { min-width: 0; }
.dock ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.dock ul::-webkit-scrollbar { display: none; }
.dock li { flex: none; scroll-snap-align: start; }
.dock ul a { display: block; text-decoration: none; color: var(--tinta); font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 999px;
  white-space: nowrap; transition: background .2s, color .2s; }
.dock ul a:hover { background: rgba(20, 34, 58, .07); }
.topo.escuro .dock ul a { color: #e8edf3; }
.topo.escuro .dock ul a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.dock ul a[aria-current="page"], .topo.escuro .dock ul a[aria-current="page"] { background: var(--bronze-claro); color: var(--noite); font-weight: 600; }
/* telas estreitas: o menu vai para uma segunda linha da mesma barra */
@media (max-width: 1060px) {
  .dock { order: 3; flex-basis: 100%; display: flex; justify-content: center; }
}
@media (max-width: 640px) {
  .dock { justify-content: flex-start; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
  .dock ul a { font-size: 14px; padding: 7px 12px; }
  .dock ul { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}

/* ---------- transição entre páginas: a página atual sobe e a próxima surge de baixo ---------- */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
::view-transition-old(root) { animation: pagina-sai .5s cubic-bezier(.55,0,.45,1) both; }
::view-transition-new(root) { animation: pagina-entra .56s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 -30px 60px rgba(14,22,37,.22); }
::view-transition-group(topo) { animation-duration: .4s; }
@keyframes pagina-sai { to { transform: translateY(-18%); opacity: .3; } }
@keyframes pagina-entra { from { transform: translateY(100%); } }
/* sem View Transitions: a página nova só sobe ao chegar */
html.surge main, html.surge .abertura { animation: surge .5s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes surge { from { transform: translateY(56px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.surge main, html.surge .abertura { animation: none; }
}

/* ---------- páginas internas ---------- */
.pagina { min-height: 100svh; padding: calc(96px + 2vw) var(--gut) calc(64px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1060px) { .pagina { padding-top: calc(132px + 2vw); } }
@media (max-width: 640px) { .pagina { padding-top: 122px; } }
.pagina.escuro { background: var(--noite); color: #fff; }
.miolo { max-width: var(--max); margin: 0 auto; }
.cab { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.cab h1 { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: 1; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.02em; }
.cab p { margin: 16px 0 0; color: var(--lapis-2); font-size: 18px; max-width: 58ch; }
.escuro .cab p { color: #b9c4d3; }

/* Produtos */
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.prod { border-radius: 12px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; }
.prod.classic { background: #fff; border: 1.5px solid var(--tinta); }
.prod.experience { background: var(--noite); color: #fff; }
.prod h2 { margin: 0; font-weight: 700; font-stretch: var(--larg-titulo); font-size: clamp(30px, 3.2vw, 44px); line-height: .98; letter-spacing: -.02em; }
.prod h2 small { display: block; font-size: 15px; letter-spacing: 0; font-weight: 500; font-stretch: 100%; margin-bottom: 12px; }
.prod.classic h2 small { color: var(--bronze); }
.prod.experience h2 small { color: var(--bronze-claro); }
.prod .lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.3; font-weight: 500; margin: 18px 0 0; }
.prod .texto { margin: 12px 0 0; color: var(--lapis-2); }
.prod.experience .texto, .prod.experience dd { color: #cfd8e4; }
.prod dl { margin: 22px 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; }
.prod dt, .prod dd { padding: 10px 0; border-top: 1px solid #d5d9de; font-size: 15px; }
.prod.experience dt, .prod.experience dd { border-color: var(--noite-linha); }
.prod dt { font-weight: 600; }
.prod dd { margin: 0; }
.prod .acoes { margin-top: auto; padding-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.qual { margin-top: clamp(40px, 6vw, 72px); }
.qual h2 { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.015em; }
@media (max-width: 860px) { .dois { grid-template-columns: 1fr; } }

/* vídeo logo abaixo do título de cada produto */
.prod .midia { margin: 20px 0 0; border-radius: 9px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papel-2); }
.prod.classic .midia { border: 1px solid #e1e4e8; }
.prod.experience .midia { background: var(--noite-2); }
.prod .midia video { width: 100%; height: 100%; object-fit: cover; }

/* Qual escolher: cada card alterna Classic e Experience, com a ilustração e a linha do texto em sincronia */
.compara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.cmp { background: #fff; border: 1px solid #d5d9de; border-radius: 12px; padding: 22px 22px 18px; --ciclo: 7s; }
.cmp:nth-child(2) { --atraso: -.6s; } .cmp:nth-child(3) { --atraso: -1.2s; }
.cmp .ilus { width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--papel); border-radius: 8px; margin-bottom: 16px; overflow: visible; }
.cmp h3 { margin: 0 0 10px; font-size: 21px; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.01em; }
.cmp p { margin: 0; padding: 9px 10px; border-radius: 8px; font-size: 15.5px; line-height: 1.4; color: var(--lapis-2); }
.cmp p b { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.cmp p.c { animation: vez-c var(--ciclo) var(--ease) var(--atraso, 0s) infinite; }
.cmp p.e { animation: vez-e var(--ciclo) var(--ease) var(--atraso, 0s) infinite; }
.cmp .lado-c { animation: lado-c var(--ciclo) var(--ease) var(--atraso, 0s) infinite; }
.cmp .lado-e { animation: lado-e var(--ciclo) var(--ease) var(--atraso, 0s) infinite; }
@keyframes vez-c { 0%, 44% { background: var(--papel-2); color: var(--tinta); } 50%, 94% { background: transparent; color: var(--lapis-2); } 100% { background: var(--papel-2); color: var(--tinta); } }
@keyframes vez-e { 0%, 44% { background: transparent; color: var(--lapis-2); } 50%, 94% { background: var(--noite); color: #e8edf3; } 100% { background: transparent; color: var(--lapis-2); } }
.cmp p.e b { animation: inherit; animation-name: vez-e-b; }
@keyframes vez-e-b { 0%, 44% { color: var(--tinta); } 50%, 94% { color: var(--bronze-claro); } 100% { color: var(--tinta); } }
@keyframes lado-c { 0%, 44% { opacity: 1; transform: none; } 50%, 94% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes lado-e { 0%, 44% { opacity: 0; transform: translateY(6px); } 50%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
/* desenhos */
.cmp .fc1 { fill: #e9e2d6; } .cmp .fc2 { fill: #c9b79c; } .cmp .fc3 { fill: #a8916f; }
.cmp .fc1, .cmp .fc2, .cmp .fc3 { stroke: var(--tinta); stroke-width: 1.2; stroke-linejoin: round; }
.cmp .sombra { fill: rgba(14,22,37,.18); filter: blur(3px); }
.cmp .brilho { fill: #fff; opacity: .8; filter: blur(2px); animation: brilho var(--ciclo) ease-in-out var(--atraso, 0s) infinite; }
@keyframes brilho { 0%, 55% { transform: translate(0, 0); } 90%, 100% { transform: translate(26px, 10px); } }
.cmp .tela { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cmp .carga { fill: var(--bronze); transform-box: fill-box; transform-origin: left; animation: carga var(--ciclo) var(--ease) var(--atraso, 0s) infinite; }
@keyframes carga { 0% { transform: scaleX(.1); } 18%, 100% { transform: scaleX(1); } }
.cmp .sinal { stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; } .cmp .sinal.fraco { stroke: #c9ced6; }
.cmp .onda { fill: none; stroke: var(--bronze); stroke-width: 3; stroke-linecap: round; animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; } }
.cmp .planta { fill: none; stroke: var(--tinta); stroke-width: 2; }
.cmp .piso { stroke: var(--tinta); stroke-width: 1.2; }
.cmp .p1 { fill: #e8d9c0; animation: piso1 3.5s steps(1) var(--atraso, 0s) infinite; } .cmp .p2 { fill: #a0aab6; }
@keyframes piso1 { 50% { fill: #c79a68; } }
.cmp .lado-c .planta:first-child { animation: tipologia 3.5s var(--ease) var(--atraso, 0s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tipologia { 0%, 40% { transform: none; } 50%, 90% { transform: scaleX(.86); } }
.cmp .parede { animation: parede 3.5s var(--ease) var(--atraso, 0s) infinite; }
@keyframes parede { 0%, 40% { fill: #ece9e2; } 50%, 90% { fill: #b9c8b4; } 100% { fill: #ece9e2; } }
.cmp .sofa { animation: sofa 3.5s var(--ease) var(--atraso, 0s) infinite; }
@keyframes sofa { 0%, 15% { fill: #c4c6c9; } 25%, 65% { fill: #3b3f47; } 75%, 100% { fill: #c4c6c9; } }
.cmp .sofa-pe { stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; }
.cmp .astro { animation: astro 3.5s var(--ease) var(--atraso, 0s) infinite; }
@keyframes astro { 0%, 40% { fill: #f0b85a; } 50%, 90% { fill: #c9d6e2; } 100% { fill: #f0b85a; } }
@media (max-width: 860px) { .compara { grid-template-columns: 1fr; } .cmp { display: grid; grid-template-columns: 150px 1fr; column-gap: 16px; } .cmp .ilus { grid-row: span 3; margin: 0; align-self: start; } }
@media (max-width: 480px) { .cmp { display: block; } .cmp .ilus { margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .cmp *, .cmp p { animation: none !important; }
  .cmp .lado-e { opacity: 0; }
}

/* ---------- textos entrando: títulos palavra por palavra, blocos sobem; as cenas só se animam quando aparecem ---------- */
.rev-t .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .03em .1em; margin: -.12em -.03em -.1em; }
.rev-t .w > span { display: inline-block; transform: translateY(110%); transition: transform .85s cubic-bezier(.2, .75, .15, 1) calc(var(--d, 0ms) + var(--i, 0) * 45ms); }
.rev-t.vis .w > span { transform: none; }
.rev { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .9s cubic-bezier(.2, .75, .15, 1) var(--d, 0ms); }
.rev.vis { opacity: 1; transform: none; }
.cena, .cena *, .linha-tempo, .linha-tempo *, .checa li::before, .ciclo { animation-play-state: paused !important; }
.vis .cena, .vis .cena *, .linha-tempo.vis, .linha-tempo.vis *, .vis .checa li::before, .vis .ciclo { animation-play-state: running !important; }

/* Benefícios: cada um com a sua cena animada */
.bnfs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.bnf { background: #fff; border: 1px solid #d5d9de; border-radius: 12px; padding: 14px 14px 22px; }
.bnf h2 { margin: 18px 8px 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.15; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.01em; }
.bnf p { margin: 8px 8px 0; color: var(--lapis-2); font-size: 15.5px; }
.cena { position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background-color: var(--papel);
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); background-size: 18px 18px; }
/* 1. obra + celular com o decorado */
.cena-obra svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cena-obra .chao, .cena-obra .viga, .cena-obra .grua path { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; }
.cena-obra .tracejada { stroke-dasharray: 3 4; stroke: var(--lapis); }
.cena-obra .grua rect { fill: var(--bronze); }
.cena-obra .braco { transform-origin: 150px 16px; animation: grua 6s ease-in-out infinite; }
.cena-obra .cabo { stroke-width: 1 !important; }
@keyframes grua { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.cena-obra .fone { position: absolute; left: 50%; top: 14%; width: 25%; aspect-ratio: 9 / 18; border: 3px solid var(--tinta); border-radius: 12px; overflow: hidden; background: #000;
  box-shadow: 0 14px 30px rgba(14, 22, 37, .25); animation: fone 6s cubic-bezier(.2, .75, .15, 1) infinite; }
.cena-obra .fone img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: anda 6s ease-in-out infinite; }
@keyframes fone { 0% { transform: translate(-50%, 40%); opacity: 0; } 14%, 86% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -6%); opacity: 0; } }
@keyframes anda { 0%, 15% { transform: scale(1.05); object-position: 75% 50%; } 85%, 100% { transform: scale(1.25); object-position: 35% 50%; } }
/* 2. conversa no WhatsApp */
.cena-chat { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px 16px; background: #e9e4dc; }
.msg { max-width: 76%; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.3; opacity: 0; transform: translateY(10px) scale(.96); animation: msg 9s var(--ease) infinite; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.msg.eu { align-self: flex-end; background: #d9f7c9; border-top-right-radius: 3px; }
.msg.ele { align-self: flex-start; background: #fff; border-top-left-radius: 3px; animation-name: msg2; }
.msg.sis { align-self: center; background: var(--tinta); color: #fff; font-weight: 600; border-radius: 999px; padding: 5px 12px; animation-name: msg3; }
.msg.sis::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze-claro); margin-right: 7px; vertical-align: 1px; }
.cartao { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; margin-top: 6px; background: rgba(255, 255, 255, .7); border-radius: 7px; padding: 4px; }
.cartao img { width: 52px; height: 34px; object-fit: cover; border-radius: 4px; }
.cartao b { font-size: 12px; }
@keyframes msg { 0%, 4% { opacity: 0; transform: translateY(10px) scale(.96); } 10%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes msg2 { 0%, 26% { opacity: 0; transform: translateY(10px) scale(.96); } 32%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes msg3 { 0%, 46% { opacity: 0; transform: translateY(10px) scale(.9); } 52%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
/* 3. interessados */
.cena-leads { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 14px 16px; }
.interessado { display: grid; grid-template-columns: 112px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid #e1e4e8; border-radius: 8px; padding: 7px 10px; font-size: 13.5px; font-weight: 600; }
.interessado small { display: block; font-size: 11.5px; font-weight: 400; color: var(--lapis-2); }
.interessado .barra { height: 6px; border-radius: 3px; background: var(--papel-2); overflow: hidden; }
.interessado .barra i { display: block; height: 100%; background: var(--tinta); transform-origin: left; animation: barra 7s cubic-bezier(.2, .75, .15, 1) infinite; }
.interessado.l1 .barra i { --fim: 1; background: var(--bronze); } .interessado.l2 .barra i { --fim: .62; animation-delay: .15s; } .interessado.l3 .barra i { --fim: .38; animation-delay: .3s; }
@keyframes barra { 0% { transform: scaleX(0); } 30%, 88% { transform: scaleX(var(--fim)); } 100% { transform: scaleX(0); } }
.interessado .selo { font-size: 11.5px; color: #fff; background: #c2552d; border-radius: 999px; padding: 3px 9px; animation: selo 7s var(--ease) infinite; }
@keyframes selo { 0%, 30% { opacity: 0; transform: scale(.6); } 36% { opacity: 1; transform: scale(1.12); } 40%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
/* 4. espelho de vendas */
.cena-espelho { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; padding: 14px 18px 30px; }
.cena-espelho .lado small { display: block; font-size: 11.5px; font-weight: 600; color: var(--lapis-2); margin-bottom: 6px; }
.unid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.unid i { aspect-ratio: 1.4; border-radius: 3px; background: #6c9a6e; }
.unid.predio { padding: 6px; background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px 4px 0 0; }
.unid.predio i { border-radius: 1px; }
.unid .u1, .unid .u6, .unid .u12, .unid .u15 { background: #c9ced6; } .unid .u3, .unid .u10 { background: var(--bronze-claro); }
.unid .u9 { animation: vende 6s steps(1) infinite; }
@keyframes vende { 0%, 32% { background: #6c9a6e; } 33%, 65% { background: var(--bronze-claro); } 66%, 100% { background: #c9ced6; } }
.unid .u9 { box-shadow: 0 0 0 2px var(--tinta); }
.cena-espelho .seta { height: 2px; background: var(--tinta); position: relative; margin: 0 6px; }
.cena-espelho .seta::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--tinta); border-right: 0; }
.cena-espelho .seta::before { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); animation: corre 2s ease-in-out infinite; }
@keyframes corre { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(14px); opacity: 0; } }
.cena-espelho .aviso { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; background: var(--tinta); color: #fff; border-radius: 999px; padding: 3px 11px; white-space: nowrap; animation: aviso 6s var(--ease) infinite; }
@keyframes aviso { 0%, 64% { opacity: 0; transform: translate(-50%, 8px); } 70%, 95% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
/* 5. Experience em vídeo */
.cena-video video { width: 100%; height: 100%; object-fit: cover; }
.cena-video .tag { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 600; color: var(--noite); background: var(--bronze-claro); border-radius: 999px; padding: 3px 10px; }
/* 6. formatos de campanha */
.cena-campanha { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.fmt { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 8px 20px rgba(14, 22, 37, .18); animation: fmt 7.5s cubic-bezier(.2, .75, .15, 1) infinite; }
.fmt img { width: 100%; height: 100%; object-fit: cover; animation: kb 7.5s ease-in-out infinite; }
.fmt figcaption { position: absolute; left: 5px; bottom: 5px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(14, 22, 37, .7); border-radius: 4px; padding: 1px 6px; }
.f916 { height: 82%; aspect-ratio: 9 / 16; } .f916 img { object-position: 70% 50%; }
.f11 { height: 56%; aspect-ratio: 1; animation-delay: .15s; } .f11 img { object-position: 55% 50%; }
.f169 { height: 40%; aspect-ratio: 16 / 9; animation-delay: .3s; }
@keyframes fmt { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes kb { 0% { transform: scale(1); } 100% { transform: scale(1.14); } }
.tambem { margin-top: 26px; padding-top: 22px; border-top: 1.5px solid var(--tinta); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15.5px; font-weight: 500; }
.tambem span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); margin-right: 9px; vertical-align: 2px; }
.painel-demo { margin-top: 30px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.painel-demo p { margin: 0; color: var(--lapis-2); }
@media (max-width: 980px) { .bnfs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bnfs { grid-template-columns: 1fr; } }

/* Projetos */
.projetos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.projeto { text-decoration: none; display: block; }
.projeto figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--papel-2); border: 1.5px solid var(--tinta); }
.projeto video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.projeto:hover video { transform: scale(1.02); }
.projeto h2 { margin: 16px 0 0; font-stretch: var(--larg-titulo); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.projeto p { margin: 6px 0 0; color: var(--lapis-2); font-size: 15.5px; }
.projeto .ver { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 15px; border-bottom: 1.5px solid var(--bronze); padding-bottom: 1px; }
.proximo { margin-top: clamp(28px, 4vw, 44px); padding: 22px 0 0; border-top: 1px solid #d5d9de; display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.proximo p { margin: 0; max-width: 60ch; }
@media (max-width: 700px) { .projetos { grid-template-columns: 1fr; } }

/* Preços: linha do tempo, listas que se marcam, proposta montada na hora */
.linha-tempo { position: relative; display: grid; grid-template-columns: minmax(120px, .9fr) 3fr; gap: 6px; margin: 0 0 clamp(22px, 3vw, 34px); padding-top: 30px; }
.lt-imp, .lt-men { position: relative; height: 44px; border-radius: 8px; display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 600; overflow: hidden; }
.lt-imp { background: var(--tinta); color: #fff; transform-origin: left; animation: cresce .9s cubic-bezier(.2, .75, .15, 1) .2s both; }
.lt-men { background: #fff; border: 1.5px solid var(--tinta); }
.lt-men span { position: relative; z-index: 1; }
.meses { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.meses i { border-left: 1px solid #e1e4e8; background: rgba(168, 116, 63, .14); opacity: 0; animation: mes 6s linear infinite; }
.meses i:first-child { border-left: 0; }
.meses i:nth-child(1) { animation-delay: 0.90s; }
.meses i:nth-child(2) { animation-delay: 1.15s; }
.meses i:nth-child(3) { animation-delay: 1.40s; }
.meses i:nth-child(4) { animation-delay: 1.65s; }
.meses i:nth-child(5) { animation-delay: 1.90s; }
.meses i:nth-child(6) { animation-delay: 2.15s; }
.meses i:nth-child(7) { animation-delay: 2.40s; }
.meses i:nth-child(8) { animation-delay: 2.65s; }
.meses i:nth-child(9) { animation-delay: 2.90s; }
.meses i:nth-child(10) { animation-delay: 3.15s; }
.meses i:nth-child(11) { animation-delay: 3.40s; }
.meses i:nth-child(12) { animation-delay: 3.65s; }
@keyframes mes { 0% { opacity: 0; } 4%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes cresce { from { transform: scaleX(0); } }
.lt-marca { position: absolute; left: calc((100% - 6px) * .9 / 3.9 + 3px); top: 0; bottom: 0; border-left: 1.5px dashed var(--bronze); }
.lt-marca b { position: absolute; top: 0; left: 8px; font-size: 13px; color: var(--bronze); white-space: nowrap; }
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.plano { position: relative; border-radius: 12px; padding: clamp(22px, 3vw, 34px); background: #fff; border: 1.5px solid var(--tinta); }
.plano.imp { background: var(--tinta); color: #fff; }
.plano.imp li { border-color: var(--noite-linha); }
.plano h2 { margin: 0; font-stretch: var(--larg-titulo); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.01em; }
.plano .quando { margin: 4px 0 0; color: var(--bronze); font-weight: 600; font-size: 15px; }
.plano.imp .quando { color: var(--bronze-claro); }
.plano ul { margin: 18px 0 0; padding: 0; list-style: none; }
.plano li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid #e1e4e8; font-size: 15.5px; }
.checa li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border-left: 2px solid var(--bronze); border-bottom: 2px solid var(--bronze); transform: rotate(-45deg) scale(0); transform-origin: 30% 70%;
  animation: checa .45s cubic-bezier(.2, .75, .15, 1) both; }
.plano.imp .checa li::before { border-color: var(--bronze-claro); }
.checa li:nth-child(1)::before { animation-delay: .3s; } .checa li:nth-child(2)::before { animation-delay: .5s; } .checa li:nth-child(3)::before { animation-delay: .7s; }
.checa li:nth-child(4)::before { animation-delay: .9s; } .checa li:nth-child(5)::before { animation-delay: 1.1s; }
@keyframes checa { to { transform: rotate(-45deg) scale(1); } }
.ciclo { position: absolute; right: clamp(22px, 3vw, 34px); top: clamp(22px, 3vw, 34px); width: 34px; height: 34px; fill: none; stroke: var(--bronze); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: gira 4s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.monte { margin-top: clamp(30px, 4vw, 48px); border-radius: 14px; background: #fff; border: 1px solid #d5d9de; padding: clamp(20px, 3vw, 36px); }
.monte-cab h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.015em; }
.monte-cab p { margin: 6px 0 0; color: var(--lapis-2); max-width: 60ch; }
.monte-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(18px, 3.5vw, 48px); margin-top: 22px; align-items: start; }
.monte-opcoes { display: grid; gap: 18px; }
.monte-opcoes fieldset { border: 0; margin: 0; padding: 0; }
.monte-opcoes legend { font-size: 14px; font-weight: 600; color: var(--lapis-2); padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid #c9ced6; font-size: 15px; font-weight: 500; transition: background .2s, border-color .2s, color .2s, transform .15s; }
.chips label:hover span { border-color: var(--tinta); }
.chips label:active span { transform: scale(.96); }
.chips input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.passo { display: inline-flex; align-items: center; border: 1.5px solid #c9ced6; border-radius: 999px; }
.passo button { width: 42px; height: 40px; border: 0; background: transparent; font-size: 20px; cursor: pointer; border-radius: 999px; }
.passo button:hover { background: var(--papel-2); }
.passo output { min-width: 34px; text-align: center; font-size: 18px; font-weight: 700; }
.proposta { background: var(--noite); color: #e8edf3; border-radius: 12px; padding: clamp(18px, 2.4vw, 28px); }
.prop-tit { margin: 0; font-size: 14px; font-weight: 600; color: var(--bronze-claro); }
.tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.tipos i { position: relative; width: 38px; height: 38px; border-radius: 7px; background: var(--noite-2); border: 1px solid var(--noite-linha); display: grid; place-items: center; animation: tipo .4s cubic-bezier(.2, .75, .15, 1.3) both; }
.tipos svg { width: 22px; height: 22px; fill: none; stroke: #cfd8e4; stroke-width: 1.6; }
.tipos .gratis { border-color: var(--bronze-claro); }
.tipos .gratis::after { content: 'grátis'; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; color: var(--noite); background: var(--bronze-claro); border-radius: 999px; padding: 0 5px; }
@keyframes tipo { from { transform: scale(.5); opacity: 0; } }
.proposta ul { list-style: none; margin: 14px 0 20px; padding: 0; }
.proposta li { padding: 8px 0 8px 22px; border-top: 1px solid var(--noite-linha); font-size: 15px; position: relative; }
.proposta li::before { content: ''; position: absolute; left: 1px; top: 15px; width: 9px; height: 5px; border-left: 2px solid var(--bronze-claro); border-bottom: 2px solid var(--bronze-claro); transform: rotate(-45deg); }
.proposta li.novo { animation: novo .5s cubic-bezier(.2, .75, .15, 1) both; }
@keyframes novo { from { opacity: 0; transform: translateX(-12px); background: rgba(216, 167, 116, .15); } }
.oferta { margin-top: clamp(26px, 3.4vw, 40px); border-radius: 12px; background: var(--tinta); color: #fff; padding: clamp(22px, 3vw, 34px);
  display: flex; justify-content: space-between; align-items: center; gap: 18px 30px; flex-wrap: wrap; }
.oferta h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.015em; }
.oferta p { margin: 6px 0 0; color: #c9d3e0; max-width: 56ch; }
@media (max-width: 760px) { .planos, .monte-grade { grid-template-columns: 1fr; } .linha-tempo { grid-template-columns: 1fr 2.2fr; } .lt-marca { left: calc((100% - 6px) / 3.2 + 3px); } .lt-men span { font-size: 12.5px; } }

/* rodapé das páginas internas */
.rodape { max-width: var(--max); margin: clamp(48px, 7vw, 88px) auto 0; padding: 18px 0 0; border-top: 1px solid #d5d9de; display: flex; justify-content: space-between; gap: 10px 20px;
  flex-wrap: wrap; font-size: 13.5px; color: var(--lapis-2); }
.pagina.escuro .rodape { border-color: var(--noite-linha); color: #8f9bab; }
.rodape .links { display: flex; gap: 18px; }

/* ---------- tour ao vivo numa janela sobre a página ---------- */
.tour-modal { width: min(1180px, 100vw - 32px); height: min(820px, 100svh - 48px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--noite); box-shadow: 0 40px 100px rgba(0, 0, 0, .45); }
.tour-modal::backdrop { background: rgba(14, 22, 37, .72); backdrop-filter: blur(4px); }
.tour-modal[open] { animation: modal-entra .45s cubic-bezier(.2, .75, .15, 1); }
.tour-modal[open]::backdrop { animation: aparece-fundo .3s ease; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes aparece-fundo { from { opacity: 0; } }
.tour-modal .barra-modal { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 18px; color: #e8edf3; font-size: 15px; font-weight: 600; }
.tour-modal .barra-modal span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5fc27a; margin-right: 9px; vertical-align: 1px; animation: pulsa 1.4s ease-in-out infinite; }
.tour-modal .fechar { border: 0; background: rgba(255, 255, 255, .1); color: #fff; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; }
.tour-modal .fechar:hover { background: rgba(255, 255, 255, .2); }
.tour-modal iframe { display: block; width: 100%; height: calc(100% - 48px); border: 0; background: var(--papel); }
.tour-modal .carregando { position: absolute; inset: 48px 0 0; display: grid; place-items: center; color: #c9d6e2; font-size: 15px; pointer-events: none; transition: opacity .4s; }
.tour-modal.pronto .carregando { opacity: 0; }
@media (max-width: 640px) { .tour-modal { width: 100vw; height: 100svh; border-radius: 0; } }

/* ---------- antes e depois: planta em PDF x apartamento em 3D ---------- */
.antes-depois { margin-top: clamp(44px, 6vw, 80px); }
.ad-cab h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.015em; }
.ad-cab p { margin: 6px 0 18px; color: var(--lapis-2); max-width: 60ch; }
.ad { position: relative; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--tinta); background: var(--papel); user-select: none; touch-action: pan-y; }
.ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ad-linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 22, 37, .25); pointer-events: none; }
.ad-alca { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(14, 22, 37, .3); }
.ad-alca::before, .ad-alca::after { content: ''; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.ad-alca::before { left: 8px; border-right: 8px solid var(--tinta); border-left: 0; }
.ad-alca::after { right: 8px; border-left: 8px solid var(--tinta); border-right: 0; }
.ad-rot { position: absolute; top: 14px; font-size: 13.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; pointer-events: none; }
.ad-rot.r1 { left: 14px; background: #fff; color: var(--tinta); border: 1px solid #d5d9de; }
.ad-rot.r2 { right: 14px; background: var(--tinta); color: #fff; }
.ad input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ad:has(input:focus-visible) .ad-alca { outline: 3px solid var(--bronze); outline-offset: 2px; }
@media (max-width: 640px) { .ad { aspect-ratio: 4 / 3; } .ad img { object-position: 40% 50%; } }

/* ---------- dúvidas frequentes ---------- */
.duvidas { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 10px clamp(24px, 5vw, 64px); align-items: start; }
.duvidas h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.015em; }
.duvidas .mais { grid-column: 2; margin: 14px 0 0; color: var(--lapis-2); }
.duvidas .mais a { color: var(--tinta); font-weight: 600; text-decoration-color: var(--bronze); text-underline-offset: 3px; }
.lista-duvidas { border-top: 1.5px solid var(--tinta); }
.duvida { border-bottom: 1px solid #d5d9de; }
.duvida summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 2px; font-size: 17px; font-weight: 600; }
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after { content: ''; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--tinta), var(--tinta)) center / 12px 2px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2px 12px no-repeat;
  transition: transform .3s var(--ease); }
.duvida[open] summary::after { transform: rotate(135deg); }
.duvida summary:hover { color: var(--bronze); }
.duvida .resp { overflow: hidden; }
.duvida .resp p { margin: 0 0 18px; color: var(--lapis-2); max-width: 64ch; }
.duvida[open] .resp p { animation: abre-resp .4s cubic-bezier(.2, .75, .15, 1); }
@keyframes abre-resp { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 760px) { .duvidas { grid-template-columns: 1fr; } .duvidas .mais { grid-column: 1; } }

/* ---------- orçamento em etapas ---------- */
.orc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.orc-cab h1 { margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.02em; }
.orc-cab p { margin: 14px 0 0; color: var(--lapis-2); max-width: 44ch; }
.orc-caixa { background: #fff; border: 1px solid #d5d9de; border-radius: 14px; padding: clamp(20px, 3vw, 32px); min-height: 380px; box-shadow: 0 30px 60px -40px rgba(20, 34, 58, .35); }
.orc-topo { display: flex; justify-content: space-between; align-items: center; min-height: 30px; font-size: 13.5px; color: var(--lapis-2); font-weight: 600; }
.orc-topo .voltar { border: 0; background: none; padding: 4px 0; cursor: pointer; font-weight: 600; color: var(--tinta); }
.orc-topo .voltar::before { content: '←'; margin-right: 6px; }
.orc-topo #passo { margin-left: auto; }
.orc-barra { height: 4px; border-radius: 2px; background: var(--papel-2); margin: 10px 0 24px; overflow: hidden; --p: 0%; }
.orc-barra::after { content: ''; display: block; height: 100%; width: var(--p); background: var(--bronze); transition: width .45s cubic-bezier(.2, .75, .15, 1); }
.etapa h2 { margin: 0 0 18px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.015em; outline: none; }
.etapa.entra { animation: etapa-entra .45s cubic-bezier(.2, .75, .15, 1); }
.etapa.volta { animation: etapa-volta .45s cubic-bezier(.2, .75, .15, 1); }
@keyframes etapa-entra { from { opacity: 0; transform: translateX(28px); } }
@keyframes etapa-volta { from { opacity: 0; transform: translateX(-28px); } }
.opcoes-orc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcoes-orc button { text-align: left; padding: 16px 16px; border-radius: 10px; border: 1.5px solid #c9ced6; background: #fff; font-size: 16px; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .15s; }
.opcoes-orc button:hover { border-color: var(--tinta); }
.opcoes-orc button:active { transform: scale(.98); }
.opcoes-orc button.on { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dados { display: grid; gap: 14px; }
.dados label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--lapis-2); }
.dados label small { font-weight: 400; }
.dados input { font: inherit; font-size: 16px; font-weight: 400; color: var(--tinta); padding: 12px 14px; border: 1.5px solid #c9ced6; border-radius: 9px; background: #fff; }
.dados input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(168, 116, 63, .25); }
.dados .btn { justify-self: start; margin-top: 4px; }
.aviso-wa { margin: 0; font-size: 13.5px; color: var(--lapis-2); }
.fim-orc { color: var(--lapis-2); }
.fim-orc a { color: var(--tinta); font-weight: 600; }
@media (max-width: 860px) { .orc { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .opcoes-orc { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .etapa.entra, .etapa.volta, .tour-modal[open], .duvida[open] .resp p { animation: none; } }

/* ---------- Painel (topo de Benefícios) ---------- */
.pn { margin-bottom: clamp(56px, 8vw, 110px); }
.pn-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.pn-incl { display: inline-block; margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--bronze); background: rgba(168, 116, 63, .1); border-radius: 999px; padding: 4px 12px; }
.pn-txt h1 { margin: 0; font-size: clamp(36px, 4.6vw, 62px); line-height: 1; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.02em; }
.pn-lead { margin: 16px 0 22px; font-size: clamp(17px, 1.4vw, 19px); color: var(--lapis-2); max-width: 44ch; }
.pn-nota { margin: 12px 0 0; font-size: 14px; color: var(--lapis-2); max-width: 42ch; }
.pn-tela { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #c9ced6; box-shadow: 0 40px 80px -40px rgba(14, 22, 37, .45), 0 2px 6px rgba(14, 22, 37, .06); }
.pn-barra { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--papel-2); border-bottom: 1px solid #d5d9de; font-size: 12px; color: var(--lapis-2); }
.pn-barra i { width: 9px; height: 9px; border-radius: 50%; background: #c9ced6; }
.pn-barra span { margin-left: 10px; }
.pn-tela video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* funil: as barras afinam a cada etapa e os números contam */
.funil { margin: clamp(36px, 5vw, 60px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.etapa-f { position: relative; padding: 18px 16px 16px; border-radius: 10px; background: #fff; border: 1px solid #d5d9de; overflow: hidden; }
.etapa-f::before { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--tinta); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .75, .15, 1) .2s; }
.etapa-f:nth-child(3)::before, .etapa-f:nth-child(4)::before { background: var(--bronze); }
.funil.vis .etapa-f::before { transform: scaleX(var(--l)); }
.etapa-f b { display: block; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; font-weight: 700; font-stretch: var(--larg-titulo); font-variant-numeric: tabular-nums; }
.etapa-f span { display: block; margin-top: 6px; font-size: 15px; color: var(--lapis-2); }
.etapa-f + .etapa-f::after { content: ''; position: absolute; left: -1px; top: 50%; width: 10px; height: 10px; border-top: 1.5px solid #c9ced6; border-right: 1.5px solid #c9ced6; transform: translate(-50%, -50%) rotate(45deg); background: var(--papel); }
.funil-nota { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--lapis-2); }
/* recursos, alternando imagem e texto */
.pn-item { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 64px); align-items: center; margin-top: clamp(48px, 7vw, 96px); }
.pn-item.inverte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.pn-item.inverte .pn-img { order: 2; }
.pn-img { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #c9ced6; background: #fff; box-shadow: 0 30px 60px -36px rgba(14, 22, 37, .4); }
.pn-img img { width: 100%; height: auto; transition: transform 1.4s cubic-bezier(.2, .75, .15, 1); transform: scale(1.04); }
.pn-img.vis img, .vis .pn-img img, .pn-item.vis .pn-img img { transform: none; }
.pn-img.ficha { max-width: 420px; justify-self: center; width: 100%; }
.pn-desc h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.015em; }
.pn-desc p { margin: 12px 0 0; color: var(--lapis-2); max-width: 50ch; }
.pn-desc ul { list-style: none; margin: 18px 0 0; padding: 0; }
.pn-desc li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid #d5d9de; font-size: 15.5px; }
.pn-desc li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--bronze); border-bottom: 2px solid var(--bronze); transform: rotate(-45deg); }
/* vendas x procura: as duas vistas do prédio se alternam */
.pn-img.troca .b { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; animation: troca-vista 7s ease-in-out infinite; animation-play-state: paused; }
.pn-item.vis .pn-img.troca .b, .pn-item.vis .modo i { animation-play-state: running; }
@keyframes troca-vista { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.modo { position: absolute; right: 14px; top: 14px; display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(14, 22, 37, .15); font-size: 13px; font-weight: 600; }
.modo i { font-style: normal; padding: 5px 12px; border-radius: 999px; animation: modo-v 7s ease-in-out infinite; animation-play-state: paused; }
.modo i.p { animation-name: modo-p; }
@keyframes modo-v { 0%, 42% { background: var(--tinta); color: #fff; } 50%, 92% { background: transparent; color: var(--lapis-2); } 100% { background: var(--tinta); color: #fff; } }
@keyframes modo-p { 0%, 42% { background: transparent; color: var(--lapis-2); } 50%, 92% { background: var(--bronze); color: #fff; } 100% { background: transparent; color: var(--lapis-2); } }
.pn-tambem { margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; border-top: 1.5px solid var(--tinta); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15.5px; font-weight: 500; }
.pn-tambem span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); margin-right: 9px; vertical-align: 2px; }
.cab-2 { padding-top: clamp(36px, 5vw, 60px); border-top: 1px solid #d5d9de; }
.titulo-secao { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.02em; }
@media (max-width: 900px) {
  .pn-hero, .pn-item, .pn-item.inverte { grid-template-columns: 1fr; }
  .pn-item.inverte .pn-img { order: 0; }
  .funil { grid-template-columns: 1fr 1fr; }
  .etapa-f:nth-child(3)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-img img { transform: none; transition: none; }
  .pn-img.troca .b, .modo i { animation: none !important; }
  .etapa-f::before { transform: scaleX(var(--l)); transition: none; }
}

/* ---------- Sobre ---------- */
.como-trab { margin-top: clamp(40px, 6vw, 72px); }
.ct-cab h2, .quem-txt h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.02em; max-width: 22ch; }
.ct-cab p { margin: 12px 0 0; color: var(--lapis-2); max-width: 62ch; }
.passos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); position: relative; }
.passo-ct { position: relative; background: #fff; border: 1px solid #d5d9de; border-radius: 12px; padding: 22px 22px 24px; }
.passo-ct svg { width: 48px; height: 48px; margin-bottom: 14px; }
.passo-ct .tr { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .75, .15, 1) calc(var(--d, 0ms) + 250ms); }
.passo-ct.vis .tr { stroke-dashoffset: 0; }
.passo-ct .tr:last-child { stroke: var(--bronze); }
.passo-ct h3 { margin: 0; font-size: 20px; line-height: 1.15; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.01em; }
.passo-ct p { margin: 8px 0 0; color: var(--lapis-2); font-size: 15.5px; }
.passo-ct + .passo-ct::before { content: ''; position: absolute; left: calc(-1 * clamp(14px, 2vw, 24px)); top: 46px; width: clamp(14px, 2vw, 24px); height: 2px; background: var(--bronze); }
.quem { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.quem-txt p { margin: 14px 0 0; color: var(--lapis-2); max-width: 48ch; font-size: 17px; }
.pessoas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.pessoa { margin: 0; }
.pessoa img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; filter: grayscale(.15); transition: filter .4s, transform .6s var(--ease); }
.pessoa:hover img { filter: none; transform: translateY(-4px); }
.pessoa figcaption { margin-top: 10px; }
.pessoa b { display: block; font-size: 17px; }
.pessoa span { font-size: 14.5px; color: var(--lapis-2); }
.quem + .duvidas { margin-top: clamp(48px, 7vw, 96px); }
@media (max-width: 860px) { .passos, .quem { grid-template-columns: 1fr; } .passo-ct + .passo-ct::before { left: 46px; top: calc(-1 * clamp(14px, 2vw, 24px)); width: 2px; height: clamp(14px, 2vw, 24px); } }
@media (prefers-reduced-motion: reduce) { .passo-ct .tr { stroke-dashoffset: 0; transition: none; } }

/* Sobre: título com vídeo ao lado; cabeçalho das etapas em duas colunas */
.sobre-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4.5vw, 64px); align-items: center; }
.sobre-topo .cab { margin: 0; }
.fatos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fatos li { border-top: 2px solid var(--tinta); padding-top: 10px; }
.fatos b { display: block; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; font-stretch: var(--larg-titulo); }
.fatos span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--lapis-2); }
.sobre-video { margin: 0; border-radius: 14px; overflow: hidden; background: var(--noite); box-shadow: 0 40px 80px -40px rgba(14, 22, 37, .5); }
.sobre-video video { width: 100%; aspect-ratio: 1366 / 688; object-fit: cover; }
.sobre-video figcaption { padding: 10px 14px; font-size: 13.5px; color: #c9d6e2; }
.ct-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(24px, 4.5vw, 64px); align-items: end; }
.ct-cab p { margin: 0; }
@media (max-width: 860px) { .sobre-topo, .ct-cab { grid-template-columns: 1fr; } .fatos { grid-template-columns: 1fr; } }

/* Preços: o vídeo do produto escolhido aparece no lugar dos extras */
.monte-midia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.monte-midia .mm { margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: var(--papel-2); aspect-ratio: 4 / 3;
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.2, .75, .15, 1); }
.monte-midia .mm video { width: 100%; height: 100%; object-fit: cover; }
.monte-midia .mm.classic { border: 1px solid #d5d9de; }
.monte-midia .mm.classic figcaption { background: var(--tinta); color: #fff; }
.monte-midia .mm figcaption { position: absolute; left: 8px; top: 8px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--tinta); }
.monte-midia .mm.experience figcaption { background: var(--bronze-claro); color: var(--noite); }
.monte-midia[data-prod="classic"] .mm.classic, .monte-midia[data-prod="experience"] .mm.experience { grid-column: 1 / -1; grid-row: 1; }
.monte-midia[data-prod="classic"] .mm.experience, .monte-midia[data-prod="experience"] .mm.classic { display: none; }
.monte-midia .mm { animation: mm-entra .55s cubic-bezier(.2, .75, .15, 1); }
@keyframes mm-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .monte-midia .mm { animation: none; } }

/* ---------- Agendar ---------- */
.agendar { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ag-txt { position: sticky; top: 120px; }
.ag-txt h1 { margin: 0; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; font-weight: 700; font-stretch: var(--larg-titulo); letter-spacing: -.02em; }
.ag-lead { margin: 16px 0 0; font-size: clamp(17px, 1.4vw, 19px); color: var(--lapis-2); max-width: 46ch; }
.ag-lista { list-style: none; margin: 22px 0 26px; padding: 0; }
.ag-lista li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid #d5d9de; }
.ag-lista li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--bronze); border-bottom: 2px solid var(--bronze); transform: rotate(-45deg); }
.btn.claro-escuro { color: var(--tinta); border: 1.5px solid var(--tinta); background: transparent; }
.btn.claro-escuro:hover { background: var(--tinta); color: #fff; }
.agenda-cartao { background: #fff; border: 1px solid #d5d9de; border-radius: 14px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 30px 60px -40px rgba(20, 34, 58, .35);
  --fg: var(--tinta); --bg: #f5f6f4; --surface: #fff; --line: #c9ced6; --mute: var(--lapis-2); --accent: var(--bronze);
  --f-body: var(--f); --f-display: var(--f); --f-mono: var(--f); }
.agenda-cartao.ag .ag-passos { text-transform: none; letter-spacing: 0; font: 600 .8rem var(--f); }
.agenda-cartao.ag .ag-bt { background: var(--tinta); border-color: var(--tinta); }
.agenda-cartao.ag .ag-bt:hover { background: var(--bronze); border-color: var(--bronze); }
.agenda-cartao.ag .ag-bt { border-radius: 999px; }
.agenda-cartao.ag input, .agenda-cartao.ag select, .agenda-cartao.ag textarea { border-radius: 9px; border-width: 1.5px; background: #fff; font-size: 16px; }
.agenda-cartao.ag .ag-dia, .agenda-cartao.ag .ag-hora { border-radius: 9px; }
.agenda-cartao.ag h3 { font-stretch: var(--larg-titulo); letter-spacing: -.01em; }
@media (max-width: 860px) {
  .agendar { grid-template-columns: 1fr; gap: 0; }
  /* no celular o formulário vem logo depois do título; o texto de apoio desce para baixo dele */
  .ag-txt { display: contents; }
  .ag-txt > .pn-incl { order: 1; justify-self: start; }
  .ag-txt > h1 { order: 2; font-size: clamp(30px, 8.6vw, 40px); margin-bottom: 20px; }
  .agendar > .agenda-cartao { order: 3; }
  .ag-txt > .ag-lead { order: 4; margin-top: 32px; }
  .ag-txt > .ag-lista { order: 5; }
  .ag-txt > .btn { order: 6; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .rev, .rev-t .w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cena *, .linha-tempo *, .checa li::before, .ciclo, .tipos i, .proposta li.novo { animation: none !important; }
  .checa li::before { transform: rotate(-45deg); }
  .msg, .fmt, .interessado .selo, .cena-espelho .aviso, .cena-obra .fone { opacity: 1 !important; }
  .cena-obra .fone { transform: translate(-50%, 0); }
  .interessado .barra i { transform: scaleX(var(--fim)); }
}