/* Top Office — páginas por serviço (salas executivas, coworking, escritório virtual, salas de reunião, auditório).
   Complementa o site.css: usa as mesmas variáveis de cor, fonte e espaçamento. Nenhuma cor nova aqui.
   As páginas são geradas por gerador/gera_paginas.py e levam class="pgs" no <body>. */

/* ---------- ritmo: o que na capa é ajuste na própria marcação, aqui é regra ---------- */
.pgs .lbl+.h2,.pgs .lbl+.h3{margin-top:16px}
.pgs .h2+.lead{margin-top:18px}
.pgs .launch .lbl+.h3{margin-top:12px}
.pgs .try .lbl+.h3{margin-top:10px}

/* ---------- topo ---------- */
/* No celular é o da capa: foto ao fundo, texto embaixo. O título é a busca de quem chegou, então é menor. */
.hero.pg .h1{font-size:clamp(34px,4.1vw,58px);line-height:1.05;letter-spacing:-.04em;margin:14px 0 0}
.crumb a{border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.crumb a:hover{border-color:#fff}
.hero.pg .ctas .btn{padding:0 24px}
/* No computador: texto à esquerda, foto à direita. As fotos são de celular, em pé; assim não esticam. */
@media (min-width:901px){
  .hero.pg{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);height:auto;min-height:min(100svh,840px);max-height:none}
  .hero.pg .ph{position:relative;inset:auto;grid-column:2;grid-row:1;min-height:580px}
  .hero.pg .ph img{position:absolute;inset:0}
  .hero.pg .ph::after{background:linear-gradient(180deg,rgba(20,26,43,.6) 0%,rgba(20,26,43,0) 24%)}
  .hero.pg .in{grid-column:1;grid-row:1;height:auto;max-width:none;margin:0;justify-content:center;
    padding:calc(var(--hdr) + 36px) clamp(28px,4vw,64px) clamp(40px,5vw,64px) max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)))}
  .hero.pg .base{grid-template-columns:1fr;gap:22px}
  .hero.pg .base p{max-width:500px;font-size:17.5px}
  .hero.pg .ctas{flex-wrap:wrap;margin-top:4px}
}
/* No celular a foto sobe um pouco: o que aparece entre o cabeçalho e o título é a sala, não o teto. */
@media (max-width:900px){
  .hero.pg .ph img{position:absolute;left:0;top:-18%;height:118%;object-position:50% center}
  /* o texto ocupa quase a tela toda: a foto escurece mais cedo que na capa, para o título ler bem */
  .hero.pg .ph::after{background:linear-gradient(180deg,rgba(20,26,43,.5) 0%,rgba(20,26,43,.28) 12%,rgba(20,26,43,.62) 30%,rgba(20,26,43,.86) 56%,rgba(20,26,43,.96) 100%)}
}

/* ---------- faixa de confiança: tempo de casa, nota do Google, prédio ---------- */
.trust{background:var(--night);border-top:1px solid var(--line-d)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.trust .it{display:flex;flex-direction:column;gap:3px;padding:18px 0;min-width:0}
.trust .it+.it{padding-left:clamp(12px,3vw,40px);border-left:1px solid var(--line-d)}
.trust .it:not(:last-child){padding-right:clamp(8px,2vw,24px)}
.trust b{font-weight:600;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.01em;line-height:1.25}
.trust b i{font-style:normal;color:var(--brass-2)}
.trust span{font-size:13px;line-height:1.35;color:rgba(255,255,255,.66)}
.trust a.it:hover span{color:#fff}
@media (max-width:520px){.trust span{font-size:12.5px}}

/* a faixa da oferta vem logo depois: uma linha a separa */
.pgs .offer a{border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}

/* ---------- salas disponíveis ---------- */
.rooms{padding:clamp(80px,10vw,150px) 0;background:var(--paper);border-block:1px solid var(--line)}
.rooms .head .lead{max-width:440px}
.rooms .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.room{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;scroll-margin-top:calc(var(--hdr) + 16px)}
.shots{position:relative}
.shots .trk{display:flex;aspect-ratio:4/5;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--line)}
.shots .trk::-webkit-scrollbar{display:none}
.shots img{flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
/* só a 1ª foto de cada sala é baixada com a página; as outras chegam quando a pessoa mexe no cartão
   (paginas.js). Sem script, elas nem aparecem. */
html:not(.js) .shots img[data-src]{display:none}
/* setas e contador só aparecem quando o paginas.js liga a galeria; sem ele, as fotos deslizam com o dedo */
.shots .nv,.shots .ct{position:absolute;background:rgba(20,26,43,.62);color:#fff}
.shots .nv{display:none;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;font-size:26px;line-height:1;padding-bottom:3px;place-items:center;transition:background-color .3s var(--ease)}
.shots .nv:hover{background:var(--ink)}
.shots .pv{left:10px}.shots .nx{right:10px}
.shots.on .nv{display:grid}
.shots .ct{right:12px;bottom:12px;padding:5px 10px 4px;border-radius:999px;font-family:var(--label);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.12em}
.room .tx{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.room .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.room h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.room .m2{font-family:var(--label);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.12em;color:var(--brass-t);white-space:nowrap}
.room .v{font-weight:600;font-size:32px;letter-spacing:-.03em;line-height:1.1;margin-top:10px;white-space:nowrap}
.room .v small{font-size:14.5px;font-weight:400;letter-spacing:0;color:var(--muted)}
.room .s{font-size:14px;color:var(--muted);margin-top:4px}
.room .of{font-size:14.5px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.room .of b{font-weight:600;color:var(--brass-t);white-space:nowrap}
.room .btn{width:100%}
.room .tx>.btn{margin-top:auto}
.room .tx>p:last-of-type{margin-bottom:18px}
@media (max-width:1040px){.rooms .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .rooms .grid{grid-template-columns:1fr;gap:18px}
  .shots .trk{aspect-ratio:5/4}
  .shots img{object-position:50% 56%}
  .room .tx{padding:18px 18px 20px}
  .room .v{font-size:28px}
}
/* no toque não há seta: quem desliza é o dedo */
@media (hover:none){.shots.on .nv{display:none}}

/* ---------- preços: cartões de apoio (pacotes e diárias; comercial e fiscal) ---------- */
.pgs .stack{display:grid;gap:16px;align-content:start}
.pgs .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pgs .small-card p{color:var(--muted)}
.pgs .small-card li b{font-weight:600;white-space:nowrap;padding-left:12px}
.pgs .note a,.pgs .incl .plus a{border-bottom:1px solid currentColor}
@media (max-width:900px){.pgs .duo{grid-template-columns:1fr}}

/* ---------- objeções ---------- */
.obj{padding:clamp(80px,10vw,140px) 0}
.obj .g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.obj .card{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:28px 26px 30px}
.obj .card h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.obj .card p{font-size:15.5px;color:var(--muted)}
@media (max-width:760px){.obj .g{grid-template-columns:1fr}.obj .card{padding:22px 20px 24px}}

/* ---------- prova ---------- */
.pgs .intro{background:var(--paper);border-block:1px solid var(--line);padding:clamp(72px,9vw,130px) 0}
.pgs .intro h2.lbl{font-size:10.5px}
.pgs .intro .link{margin-top:26px}
.pgs .nums span{display:block}

/* ---------- localização ---------- */
.pgs .atr ul{margin-top:26px}
.pgs .atr .link{margin-top:22px;align-self:flex-start}

/* ---------- contato e formulário ---------- */
.pgs form h3+.fnote{margin-top:6px}
.pgs form button.btn{width:100%}
.pgs .fnote a{border-bottom:1px solid currentColor}

/* ---------- outros formatos: no fim da página, sem a foto que segue o mouse da capa ---------- */
.pgs .svc{border-bottom:0}
.pgs .swipe-meta .count{color:var(--muted)}