/* Layout de cada seção. Cada cena acrescenta o seu bloco aqui, sempre sob html.com-js. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;visibility:hidden}
.ops label{display:inline-block;margin:0 6px 6px 0}
.cp{display:block;font-weight:700;margin-bottom:10px}
.cp input{display:block;width:100%;max-width:420px;margin-top:4px;font:inherit;padding:8px 10px}

/* ===== Topo ===== */
html.com-js #topo{background:var(--ceu);min-height:56.25cqw;padding-bottom:0}
html.com-js #topo .palco{position:absolute;left:0;right:0;bottom:0;aspect-ratio:16/9}
#topo .barra{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,2.2cqw,34px) max(5cqw,calc(50cqw - 590px)) 0}
#topo .marca{font:800 clamp(18px,1.65cqw,26px) Exo,system-ui,sans-serif;text-decoration:none}
#topo .fala{font:700 clamp(14px,1.1cqw,17px) Inter,system-ui,sans-serif;text-decoration:none}
#topo .fala:hover{text-decoration:underline}
#topo .etiqueta{display:inline-block;font:700 clamp(12px,1cqw,15px) Inter,system-ui,sans-serif;background:#fff;padding:.4em .9em;border-radius:99px;margin-bottom:clamp(10px,1.3cqw,20px)}
#topo h1{margin-bottom:clamp(10px,1.4cqw,20px)}
#topo .txt p{font-size:clamp(15px,1.3cqw,20px);color:var(--cinza);max-width:36cqw;margin-bottom:clamp(14px,1.8cqw,28px)}
#topo .botoes{display:flex;flex-wrap:wrap;gap:10px}
html.com-js #topo .txt{position:relative;z-index:2;margin-left:max(5cqw,calc(50cqw - 590px));width:calc(43.5cqw - max(5cqw,50cqw - 590px));padding-top:clamp(20px,5cqw,90px);padding-bottom:7.5cqw}
@container pagina (max-width:759px){
  html.com-js #topo{min-height:0;display:flex;flex-direction:column}
  #topo .barra{order:0}
  html.com-js #topo .txt{order:1}
  html.com-js #topo .palco{order:2}
  html.com-js #topo .palco{position:relative;left:auto;right:auto;bottom:auto;aspect-ratio:620/636}
  html.com-js #topo .txt{margin:0;width:auto;padding:22px 20px 8px}
  #topo .barra{padding:14px 20px 0}
  #topo .txt p{max-width:none}
  #topo .botoes .bt{flex:1 1 100%}
}

/* ===== Lista clicável com a cena ao lado ===== */
html.com-js .it{cursor:pointer;padding-left:30px}
html.com-js .it::before{content:"";position:absolute;left:13px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--navy);opacity:.3;transition:background .2s,opacity .2s,transform .2s}
html.com-js .it:hover::before{opacity:.7}
html.com-js .it.on{background:rgba(255,255,255,.88)}
html.com-js .it.on::before{background:var(--ciano);opacity:1;transform:scale(1.35)}
html.com-js .it .d{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .35s ease,opacity .25s ease,margin .35s ease}
html.com-js .it.on .d{max-height:120px;opacity:1;margin-top:3px}
html.com-js .exemplo{position:absolute;right:14px;bottom:12px;z-index:4}
.apoio{color:var(--cinza);margin:10px 0 16px}

/* ===== Funcionalidades: a vila ===== */
html.com-js #funcionalidades{background:var(--ceu);min-height:56.25cqw;padding-bottom:18px}
html.com-js #funcionalidades .palco{position:absolute;left:0;right:0;bottom:0;aspect-ratio:16/9}
html.com-js #funcionalidades .txt{position:relative;z-index:2;margin-left:max(3.4cqw,calc(50cqw - 590px));width:calc(36.6cqw - max(3.4cqw,50cqw - 590px));padding-top:clamp(64px,6.5cqw,110px);padding-bottom:7.5cqw}
@container pagina (max-width:759px){
  html.com-js #funcionalidades{min-height:0;display:flex;flex-direction:column;padding-bottom:0}
  html.com-js #funcionalidades .txt{order:1;margin:0;width:auto;padding:72px 18px 6px}
  html.com-js #funcionalidades .palco{order:2;position:relative;left:auto;right:auto;bottom:auto;aspect-ratio:780/900}
}

/* ===== Quem traz o cliente: a vila à noite ===== */
html.com-js #quem-traz{background:var(--navy);color:#fff}
/* A cena começa embaixo do texto: os 19,5cqw de céu do desenho entram atrás dele, e o que é desenho nunca sobe até o texto. */
html.com-js #quem-traz .palco{position:relative;aspect-ratio:1600/1030;margin-top:-19.5cqw}
html.com-js #quem-traz .txt{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:40px;align-items:start;min-height:19.5cqw;margin-inline:max(3.7cqw,calc(50cqw - 590px));padding:clamp(70px,7cqw,110px) 0 0}
#quem-traz h2{font-size:clamp(30px,3.4cqw,50px)}
html.com-js #quem-traz h2{color:#fff}
html.com-js #quem-traz p{color:#D5DAEA;max-width:60ch}
@container pagina (max-width:759px){
  html.com-js #quem-traz{min-height:0;display:flex;flex-direction:column}
  html.com-js #quem-traz .txt{order:1;display:block;min-height:0;margin:0;padding:72px 18px 6px}
  html.com-js #quem-traz h2{margin-bottom:12px}
  html.com-js #quem-traz .palco{order:2;aspect-ratio:800/900;margin-top:0}
}

/* ===== Quem somos ===== */
.foco{font:800 clamp(17px,1.5cqw,22px)/1.3 Exo,system-ui,sans-serif;color:var(--navy);margin-top:14px}
.ramos{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ramos li{font:700 13.5px Exo,system-ui,sans-serif;padding:5px 11px;border-radius:99px;background:#fff;border:2px solid var(--navy)}
html.com-js #quem-somos{background:var(--ceu);min-height:55cqw}
html.com-js #quem-somos .palco{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1600/880}
html.com-js #quem-somos .txt{position:relative;z-index:2;margin-left:max(3.5cqw,calc(50cqw - 590px));width:calc(46.5cqw - max(3.5cqw,50cqw - 590px));padding:clamp(70px,6.5cqw,110px) 0 7cqw}
#quem-somos h2{margin-bottom:12px}
#quem-somos p{color:var(--cinza);max-width:50ch}
#quem-somos p.foco{color:var(--navy)}
@container pagina (max-width:759px){
  html.com-js #quem-somos{min-height:0;display:flex;flex-direction:column}
  html.com-js #quem-somos .txt{order:1;margin:0;width:auto;padding:72px 18px 8px}
  html.com-js #quem-somos .palco{order:2;position:relative;left:auto;right:auto;bottom:auto;aspect-ratio:860/838}
}

/* ===== Pra que tipo de negócio: a rua ===== */
html.com-js #negocios{background:var(--ceu);display:flex;flex-direction:column}
html.com-js #negocios .topo-secao{padding:84px max(44px,calc(50cqw - 590px)) 0;position:relative;z-index:2}
html.com-js #negocios .topo-secao h2{margin:0 0 4px}
html.com-js #negocios .topo-secao .apoio{margin:0;max-width:none}
html.com-js #negocios .palco{aspect-ratio:1600/500;width:100%;margin-top:-1cqw}
html.com-js #negocios .ed{cursor:pointer}
html.com-js #negocios .placas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0 14px 20px;background:#41C0F0;position:relative;z-index:2}
html.com-js #negocios .it{background:#fff;border-radius:99px;padding:10px 8px 12px;text-align:center;transition:background .2s,color .2s}
html.com-js #negocios .it::before{display:none}
html.com-js #negocios .it b{font-size:14.5px;line-height:1.15}
html.com-js #negocios .it .d{display:none}
html.com-js #negocios .it.on{background:#212C52;color:#fff}
html.com-js #negocios .it .t{left:20px;right:20px;bottom:4px;height:3px}
html.com-js #negocios .corpo{background:#F4F5FB;padding:28px max(28px,calc(50cqw - 590px)) 46px;position:relative}
html.com-js #negocios .painel{position:relative;background:#fff;border:3px solid #212C52;border-radius:26px;padding:24px 28px;min-height:214px}
html.com-js #negocios .caso{display:none;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:28px;align-items:center}
html.com-js #negocios .caso.ativo{display:grid}
html.com-js #negocios .bico{position:absolute;top:-16px;left:50%;width:26px;height:26px;background:#fff;border:3px solid #212C52;border-right:0;border-bottom:0;border-radius:7px 0 0 0;transform:translateX(-50%) rotate(45deg);transition:left .4s cubic-bezier(.3,1.5,.5,1)}
html.com-js #negocios .painel h3{font:800 24px/1.15 Exo,system-ui;margin:0 0 6px;color:#212C52;text-wrap:balance}
html.com-js #negocios .painel .sub{font:600 14.5px Inter,system-ui;color:#4A5578;margin:0 0 6px}
html.com-js #negocios .caso-t p{font-size:16px;color:#4A5578;margin:0;max-width:44ch}
html.com-js #negocios .extras{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:28px;margin-top:24px;padding:0 6px}
html.com-js #negocios .extras h4{font:800 17px Exo,system-ui;margin:0 0 9px;color:#212C52}
html.com-js #negocios .extras p{font-size:15px;color:#4A5578;margin:0;max-width:62ch}
html.com-js #negocios .selos{display:flex;flex-wrap:wrap;gap:7px}
html.com-js #negocios .selos li{font:700 13.5px Exo,system-ui;padding:6px 12px;border-radius:99px;background:#fff;border:2px solid #212C52;color:#212C52}

/* o que cada casa vê */
html.com-js #negocios .w{font-family:Exo,system-ui;color:#212C52}
html.com-js html.com-js #negocios .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
html.com-js #negocios .chip{font:700 15px Exo,system-ui;padding:8px 15px;border-radius:99px;background:#EEF1F8;transition:background .2s}
html.com-js #negocios .chip.sel{background:#41C0F0}
html.com-js #negocios .chip.off{color:#7B85A3;text-decoration:line-through}
html.com-js #negocios .tot{display:flex;justify-content:space-between;align-items:baseline;font:600 15px Inter,system-ui;color:#4A5578;border-top:3px solid #EEF1F8;margin-top:4px;padding-top:8px}
html.com-js #negocios .tot b{font:900 30px Exo,system-ui;color:#212C52}
html.com-js #negocios .lin{display:grid;grid-template-columns:64px minmax(0,1fr) 72px;gap:10px;align-items:center;font:700 15px Exo,system-ui;padding:6px 0;overflow:hidden}
html.com-js #negocios .lin b{text-align:right;font-weight:800}
html.com-js #negocios .tr{display:block;height:15px;border-radius:9px;background:#EEF1F8;overflow:hidden}
html.com-js #negocios .tr u{display:block;height:100%;width:0;border-radius:9px;background:#41C0F0}
html.com-js #negocios .tr u.cheio{background:#FFD66B}
html.com-js #negocios .nota{display:inline-flex;align-items:center;gap:7px;font:800 14.5px Exo,system-ui;background:#212C52;color:#fff;border-radius:99px;padding:7px 14px;margin-top:7px}
html.com-js #negocios .estacao{display:inline-flex;background:#EEF1F8;border-radius:99px;padding:3px;margin-bottom:8px}
html.com-js #negocios .estacao span{font:700 14px Exo,system-ui;padding:6px 14px;border-radius:99px;transition:background .2s}
html.com-js #negocios .estacao span.sel{background:#41C0F0}
html.com-js #negocios .turno{display:grid;grid-template-columns:70px minmax(0,1fr) 84px 76px;gap:6px;align-items:center;font:700 15px Exo,system-ui;padding:7px 0;border-top:3px solid #EEF1F8}
html.com-js #negocios .turno span{font:600 14px Inter,system-ui;color:#4A5578}
html.com-js #negocios .turno b{text-align:right;font-weight:900;font-size:17px}
html.com-js #negocios .duas{display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:18px;align-items:center}
html.com-js #negocios .lote{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 15px Exo,system-ui;padding:8px 13px;border-radius:14px;background:#EEF1F8;margin-bottom:6px;transition:background .2s,color .2s}
html.com-js #negocios .lote i{font:600 13.5px Inter,system-ui;color:#4A5578}
html.com-js #negocios .lote.ativo{background:#41C0F0}
html.com-js #negocios .lote.ativo i{color:#212C52}
html.com-js #negocios .lote.fim{color:#7B85A3;text-decoration:line-through}
html.com-js #negocios .lote.fim i{text-decoration:none}
html.com-js #negocios .cracha{background:#fff;border:3px solid #212C52;border-radius:18px;padding:10px;text-align:center;font:800 15px/1.2 Exo,system-ui}
html.com-js #negocios .cracha .qr svg{width:84px;height:84px;display:block;margin:0 auto 5px}
html.com-js #negocios .cracha small{display:block;font:600 12.5px Inter,system-ui;color:#4A5578;margin-top:2px}
html.com-js #negocios .divide{display:flex;height:26px;border-radius:13px;overflow:hidden;background:#EEF1F8;margin:6px 0 8px}
html.com-js #negocios .divide .on-line{position:relative;width:60%;background:#BFE6F7}
html.com-js #negocios .divide .on-line u{position:absolute;inset:0 auto 0 0;width:0;background:#41C0F0}
html.com-js #negocios .divide .balcao{width:40%;background:#FFD66B}
html.com-js #negocios .leg{display:flex;justify-content:space-between;gap:12px;font:700 15px Exo,system-ui}
html.com-js #negocios .leg span{font:600 14px Inter,system-ui;color:#4A5578}

@container pagina (max-width:759px){
  html.com-js #negocios .topo-secao{padding:72px 18px 8px}
  html.com-js #negocios .placas{order:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:4px 18px 12px;background:transparent}
  html.com-js #negocios .it{background:#fff}
  html.com-js #negocios .it:last-child{grid-column:1/-1}
  html.com-js #negocios .it b{font-size:14px}
  html.com-js #negocios .palco{order:2;aspect-ratio:520/460;margin-top:0}
  html.com-js #negocios .corpo{order:3;padding:24px 14px 46px}
  html.com-js #negocios .painel{padding:20px 18px}
  html.com-js #negocios .caso.ativo{grid-template-columns:minmax(0,1fr);gap:14px}
  html.com-js #negocios .painel h3{font-size:22px}
  html.com-js #negocios .caso-t p{font-size:15px}
  html.com-js #negocios .extras{grid-template-columns:minmax(0,1fr);gap:18px}
  html.com-js #negocios .turno{grid-template-columns:58px minmax(0,1fr) 62px;font-size:14px}
  html.com-js #negocios .turno .so-pc{display:none}
  html.com-js #negocios .duas{grid-template-columns:minmax(0,1fr) 112px;gap:10px}
  html.com-js #negocios .cracha .qr svg{width:66px;height:66px}
}

html.com-js #negocios .it{padding-left:8px;cursor:pointer}
html.com-js #negocios .it::before{display:none}
#negocios .cracha .qr{display:block}
html.com-js #negocios .corpo .exemplo{right:14px;bottom:12px}

/* ===== Como funciona o preço ===== */
#preco .qd{display:inline-block;font:800 13.5px Exo,system-ui,sans-serif;padding:4px 11px;border-radius:99px;background:var(--navy);color:#fff;margin-bottom:8px;transition:background .2s,color .2s}
#preco .acao{margin-top:18px}
html.com-js #preco{background:var(--ceu);display:flex;flex-direction:column}
html.com-js #preco .topo-secao{margin-inline:max(44px,calc(50cqw - 590px));padding:84px 0 0;position:relative;z-index:2}
html.com-js #preco .palco{aspect-ratio:1600/600;width:100%;margin-top:-1cqw}
html.com-js #preco .corpo{background:var(--fundo);padding:14px max(16px,calc(50cqw - 590px)) 34px}
html.com-js #preco .caps{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,27fr) minmax(0,27fr);gap:8px;align-items:start}
html.com-js #preco .it{padding:12px 14px 17px}
html.com-js #preco .it::before{display:none}
html.com-js #preco .it.on .qd{background:var(--ciano);color:var(--navy)}
html.com-js #preco .it b{font-size:18px}
html.com-js #preco .it .d{max-height:none;opacity:1;margin-top:5px;font-size:15px}
@container pagina (max-width:759px){
  html.com-js #preco .topo-secao{margin:0;padding:72px 18px 6px}
  html.com-js #preco .palco{aspect-ratio:680/560;margin-top:0}
  html.com-js #preco .corpo{padding:10px 8px 28px}
  html.com-js #preco .caps{display:flex;flex-direction:column;gap:2px}
  html.com-js #preco .it .d{max-height:0;opacity:0;margin:0}
  html.com-js #preco .it.on .d{max-height:190px;opacity:1;margin-top:4px}
  #preco .acao{display:block;margin:14px 10px 0}
}

/* ===== Perguntas: o quiosque ===== */
.lista-q details{background:#fff;border-radius:18px;margin-bottom:6px;overflow:hidden}
.lista-q summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;font:700 16.5px/1.25 Exo,system-ui,sans-serif;list-style:none;transition:background .2s,color .2s}
.lista-q summary::-webkit-details-marker{display:none}
.lista-q summary::after{content:"+";flex:none;width:24px;height:24px;border-radius:50%;background:var(--trilha);color:var(--navy);display:grid;place-items:center;font:800 17px/1 Exo,system-ui,sans-serif;transition:transform .25s,background .2s}
.lista-q summary:hover{background:#D9F2FC}
.lista-q details[open] summary{background:var(--navy);color:#fff}
.lista-q details[open] summary::after{background:var(--ciano);transform:rotate(45deg)}
.lista-q details p{margin:0;padding:12px 16px 15px;font-size:15.5px;color:var(--cinza)}
html.com-js #perguntas{background:var(--ceu);min-height:65cqw}
html.com-js #perguntas .palco{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1600/1040}
html.com-js #perguntas .tit{position:absolute;left:max(44px,calc(50cqw - 590px));top:84px;z-index:2}
#perguntas h2{font-size:clamp(28px,3cqw,44px)}
html.com-js #perguntas .lista-q{position:relative;z-index:2;margin-left:calc(50cqw - 2cqw);margin-right:max(28px,calc(50cqw - 590px));padding:84px 0 40px}
@container pagina (max-width:759px){
  html.com-js #perguntas{min-height:0;display:flex;flex-direction:column}
  html.com-js #perguntas .tit{order:0;position:relative;left:auto;top:auto;padding:72px 18px 10px}
  html.com-js #perguntas .palco{order:1;position:relative;left:auto;right:auto;bottom:auto;aspect-ratio:780/800}
  html.com-js #perguntas .lista-q{order:2;margin:0;padding:12px 12px 30px;background:var(--fundo)}
}

/* ===== Conversa e formulário ===== */
.carta form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.carta .cp{margin:0;font:700 15px Exo,system-ui,sans-serif}
.carta .tudo{grid-column:1/-1}
.carta input[type=text],.carta input[type=tel]{display:block;width:100%;max-width:none;margin-top:5px;font:500 16px Inter,system-ui,sans-serif;color:var(--navy);background:var(--fundo);border:2px solid #C9D0E3;border-radius:14px;padding:10px 13px}
.carta input[type=text]:focus,.carta input[type=tel]:focus{border-color:var(--navy);background:#fff}
.carta fieldset{border:0;margin:0;padding:0;grid-column:1/-1;min-width:0}
.carta legend{font:700 15px Exo,system-ui,sans-serif;padding:0;margin-bottom:6px}
.carta .ops{display:flex;flex-wrap:wrap;gap:6px}
.carta .ops label{cursor:pointer;margin:0}
.carta .ops input{position:absolute;opacity:0;width:1px;height:1px}
.carta .ops span{display:block;font:600 14px Inter,system-ui,sans-serif;padding:7px 13px;border-radius:99px;background:var(--trilha);transition:background .15s}
.carta .ops label:hover span{background:#D9F2FC}
.carta .ops input:checked+span{background:var(--ciano);font-weight:700}
.carta .ops input:focus-visible+span{outline:3px solid var(--roxo);outline-offset:2px}
.carta .qual{display:none;margin-top:8px}
.carta .qual.on{display:block}
.carta .erro{display:none;grid-column:1/-1;font:600 14.5px Inter,system-ui,sans-serif;background:var(--sol);border-radius:12px;padding:8px 12px}
.carta .erro.on{display:block}
.carta .envia{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.carta .bt-env{font-size:17px;padding:13px 36px}
.carta .bt-env:disabled{opacity:.7;cursor:progress}
.carta .priv{font-size:13px;color:var(--cinza);margin:0;flex:1 1 200px;max-width:36ch}
.carta .ok{display:none;padding:10px 2px}
.carta .ok:focus{outline:none}
.carta .ok svg{width:58px;height:58px;display:block}
.carta .ok strong{display:block;font:900 34px/1.1 Exo,system-ui,sans-serif;margin:12px 0 6px}
.carta .ok p{font-size:17px;color:var(--cinza);margin:0;max-width:38ch}
.carta.feito form{display:none}
.carta.feito .ok{display:block}
.zap b{display:block;font:800 19px/1.2 Exo,system-ui,sans-serif;margin-bottom:10px}
html.com-js #conversa{background:var(--ceu);min-height:62cqw;padding:84px 0 40px}
html.com-js #conversa .palco{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1600/810}
html.com-js #conversa .col{position:relative;z-index:2;margin-left:max(40px,calc(50cqw - 590px));width:calc(52cqw - max(40px,50cqw - 590px))}
#conversa h2{font-size:clamp(28px,3cqw,44px)}
html.com-js #conversa .apoio{margin:10px 0 18px;max-width:52ch}
html.com-js #conversa .carta{background:#fff;border:3px solid var(--navy);border-radius:26px;padding:22px 24px}
html.com-js #conversa .zap{position:absolute;z-index:2;right:max(40px,calc(50cqw - 590px));top:84px;width:300px;max-width:40cqw;background:#fff;border:3px solid var(--navy);border-radius:22px;padding:16px 18px}
html.com-js #conversa .zap .bt{display:block;padding:11px 16px}
@container pagina (max-width:759px){
  html.com-js #conversa{min-height:0;padding:72px 0 0;display:flex;flex-direction:column}
  html.com-js #conversa .col{order:1;margin:0;width:auto;padding:0 14px}
  html.com-js #conversa .carta{padding:18px 16px}
  html.com-js #conversa .carta form{grid-template-columns:minmax(0,1fr)}
  html.com-js #conversa .zap{order:2;position:relative;right:auto;top:auto;width:auto;max-width:none;margin:14px 14px 0}
  html.com-js #conversa .palco{order:3;position:relative;left:auto;right:auto;bottom:auto;aspect-ratio:720/628;margin-top:10px}
  .carta .bt-env{width:100%}
}