/* ---------------------------------------------------------------- open-albano/hotsite.css — folha própria do hotsite. Não usa a vslz.css do portal de propósito: a página tem identidade do empreendimento (bordô + dourado da campanha da Open), não a do portal. A única coisa emprestada do site é a fonte Viga. Paleta extraída dos criativos oficiais da campanha. ---------------------------------------------------------------- */ @font-face { font-family: Viga; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/viga-v9-latin-regular.woff2) format("woff2"), url(/fonts/viga-v9-latin-regular.woff) format("woff"), url(/fonts/viga-v9-latin-regular.ttf) format("truetype"); } :root { --vinho: #49181c; --vinho-esc: #2e0a10; --vinho-claro: #5e2126; --ouro: #c5ab3f; --ouro-claro: #e3cd76; --creme: #f7f2ec; --areia: #ebe0d2; --tinta: #2a1a18; --tinta-suave: #6b5a56; --linha: #e2d7c8; --verde: #1f6b4a; --branco: #fff; --raio: 14px; --raio-g: 22px; --sombra: 0 2px 10px rgba(46, 10, 16, .06); --sombra-g: 0 18px 44px rgba(46, 10, 16, .14); --largura: 1160px; --display: Viga, "Trebuchet MS", system-ui, sans-serif; --corpo: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } /* overflow-x mora no : no ele transforma o body em contêiner de rolagem e a página trava depois do hero. */ html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--corpo); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* O do WebP não pode virar uma caixa no meio do caminho, senão regras como .foto img e .hero__bg img perdem o pai certo. */ picture { display: contents; } a { color: inherit; } .wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 22px; } h1, h2, h3, .display { font-family: var(--display); font-weight: 400; letter-spacing: .2px; } h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 0 0 14px; } h3 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; } .secao { padding: clamp(56px, 8vw, 96px) 0; } .secao--escura { background: var(--vinho); color: var(--creme); } .secao--areia { background: var(--areia); } .secao--branca { background: var(--branco); } .olho { font-family: var(--display); font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ouro); margin: 0 0 10px; } .secao--areia .olho, .secao--branca .olho { color: #94742a; } .sub { font-size: 18px; color: var(--tinta-suave); max-width: 62ch; margin: 0 0 34px; } .secao--escura .sub { color: rgba(247, 242, 236, .78); } /* ---------- Topo ---------- */ .topo { position: sticky; top: 0; z-index: 60; background: rgba(46, 10, 16, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(197, 171, 63, .22); } .topo__in { display: flex; align-items: center; gap: 16px; height: 64px; } .topo__marca { display: flex; align-items: center; text-decoration: none; } /* Logo de verdade, não o nome redigitado noutra fonte. O arquivo é monocromático cinza; o filtro deixa ele branco sobre o bordô sem precisar de uma segunda versão do arquivo. */ .topo__marca img { height: 27px; width: auto; filter: brightness(0) invert(1); opacity: .94; } .topo__nav { margin-left: auto; display: flex; align-items: center; gap: 26px; } .topo__nav a { color: rgba(247, 242, 236, .8); text-decoration: none; font-size: 15px; } .topo__nav a:hover { color: var(--ouro-claro); } .btn { white-space: nowrap; } @media (max-width: 900px) { .topo__nav a:not(.btn) { display: none; } } @media (max-width: 460px) { .topo__marca img { height: 22px; } .topo__nav .btn { padding: 9px 15px; font-size: 13px; } .wrap { padding: 0 18px; } .hero__in { padding-left: 18px; padding-right: 18px; } } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border: 0; border-radius: 999px; font-family: var(--display); font-size: 16px; letter-spacing: .3px; text-decoration: none; cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s; } .btn:hover { transform: translateY(-2px); } .btn--ouro { background: var(--ouro); color: var(--vinho-esc); box-shadow: 0 8px 22px rgba(197, 171, 63, .3); } .btn--ouro:hover { background: var(--ouro-claro); } .btn--zap { background: #1f9d55; color: #fff; box-shadow: 0 8px 22px rgba(31, 157, 85, .28); } .btn--zap:hover { background: #1cae5c; } .btn--linha { background: transparent; color: var(--creme); border: 1.5px solid rgba(247, 242, 236, .45); } .btn--linha:hover { border-color: var(--ouro); color: var(--ouro-claro); } .btn--peq { padding: 10px 18px; font-size: 14px; } .btn--full { width: 100%; } /* ---------- Hero ---------- */ .hero { position: relative; color: var(--creme); overflow: hidden; background: var(--vinho-esc); } .hero__bg { position: absolute; inset: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 10, 16, .92) 0%, rgba(46, 10, 16, .60) 42%, rgba(46, 10, 16, .88) 100%), linear-gradient(90deg, rgba(46, 10, 16, .82) 0%, rgba(46, 10, 16, .18) 70%); } .hero__in { position: relative; /* 22px nas laterais repete o padding do .wrap de propósito: o shorthand de três valores zeraria o respiro lateral herdado. */ padding: clamp(56px, 9vw, 104px) 22px clamp(48px, 7vw, 84px); } .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } @media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 34px; } } .tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(197, 171, 63, .55); border-radius: 999px; padding: 7px 16px; font-family: var(--display); font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ouro-claro); } .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); animation: pulsa 2.2s infinite; } @keyframes pulsa { 0%,100% { opacity: 1; } 50% { opacity: .25; } } .hero h1 { font-size: clamp(40px, 8.2vw, 88px); line-height: .95; margin: 20px 0 6px; } .hero h1 span { color: var(--ouro); } .hero__registro { font-family: var(--display); font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: rgba(247, 242, 236, .55); margin: 0 0 22px; } .hero__claim { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.4; max-width: 30ch; margin: 0 0 26px; color: rgba(247, 242, 236, .93); } .hero__claim b { color: var(--ouro-claro); font-weight: 600; } .hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; } .hero__chips li { background: rgba(247, 242, 236, .1); border: 1px solid rgba(247, 242, 236, .16); border-radius: 999px; padding: 8px 16px; font-size: 14px; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; } .hero__card { background: rgba(247, 242, 236, .97); color: var(--tinta); border-radius: var(--raio-g); padding: 28px; box-shadow: var(--sombra-g); } .hero__card .olho { color: #94742a; } .hero__preco { font-family: var(--display); font-size: 44px; line-height: 1; color: var(--vinho); margin: 4px 0 2px; } .hero__preco small { font-size: 17px; color: var(--tinta-suave); } @media (max-width: 560px) { .hero__preco small { display: block; margin-top: 4px; } } .hero__parcela { font-size: 15px; color: var(--tinta-suave); margin: 0 0 18px; } .hero__lista { list-style: none; margin: 0 0 20px; padding: 0; font-size: 15px; } .hero__lista li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linha); } .hero__lista li:last-child { border-bottom: 0; } .hero__lista b { color: var(--verde); } /* ---------- Faixa de prova ---------- */ .provas { background: var(--vinho-esc); color: var(--creme); padding: 34px 0; border-top: 1px solid rgba(197,171,63,.18); } .provas__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } @media (max-width: 860px) { .provas__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } .provas__item strong { display: block; font-family: var(--display); font-size: 27px; color: var(--ouro); line-height: 1.1; } .provas__item span { font-size: 13.5px; color: rgba(247, 242, 236, .7); line-height: 1.45; display: block; margin-top: 5px; } /* ---------- Âncora de preço ---------- */ .ancora__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; } @media (max-width: 900px) { .ancora__grid { grid-template-columns: 1fr; gap: 30px; } } .barra { margin: 0 0 20px; } .barra__rot { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 7px; } .barra__rot b { font-family: var(--display); font-size: 22px; } .barra__trilho { height: 15px; border-radius: 999px; background: rgba(42, 26, 24, .1); overflow: hidden; } .barra__preenche { height: 100%; border-radius: 999px; } .barra--nossa .barra__preenche { background: linear-gradient(90deg, var(--verde), #3fa377); } .barra--nossa .barra__rot b { color: var(--verde); } .barra--media .barra__preenche { background: rgba(42, 26, 24, .28); } .economia { background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--verde); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra); } .economia strong { font-family: var(--display); font-size: 30px; color: var(--verde); display: block; line-height: 1.1; } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 960px) { .cards { grid-template-columns: 1fr; } } .tipo { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra); transition: transform .18s, box-shadow .18s; } .tipo:hover { transform: translateY(-4px); box-shadow: var(--sombra-g); } .tipo__selo { background: var(--vinho); color: var(--ouro-claro); font-family: var(--display); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; padding: 9px 20px; } .tipo__corpo { padding: 22px; flex: 1; display: flex; flex-direction: column; } .tipo__titulo { font-family: var(--display); font-size: 25px; margin: 0 0 2px; } .tipo__meta { font-size: 14.5px; color: var(--tinta-suave); margin: 0 0 16px; } .tipo__preco { font-family: var(--display); font-size: 33px; color: var(--vinho); line-height: 1; } .tipo__precoleg { font-size: 13px; color: var(--tinta-suave); margin: 4px 0 16px; } .tipo__itens { list-style: none; margin: 0 0 20px; padding: 0; font-size: 14.5px; } .tipo__itens li { padding: 5px 0 5px 21px; position: relative; } .tipo__itens li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; } .tipo__rodape { margin-top: auto; } /* ---------- Plantas ---------- */ .abas { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 26px; } .aba { background: transparent; border: 1.5px solid var(--linha); color: var(--tinta); border-radius: 999px; padding: 11px 22px; font-family: var(--display); font-size: 15px; cursor: pointer; transition: .16s; } .aba:hover { border-color: var(--vinho); } .aba[aria-selected="true"] { background: var(--vinho); border-color: var(--vinho); color: var(--creme); } .planta { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 20px; box-shadow: var(--sombra); } .planta[hidden] { display: none; } .planta__grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: 28px; align-items: center; } @media (max-width: 860px) { .planta__grid { grid-template-columns: 1fr; } } .planta__img { border-radius: var(--raio); overflow: hidden; background: #fff; } .planta__dados dt { font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tinta-suave); } .planta__dados dd { margin: 2px 0 15px; font-family: var(--display); font-size: 23px; color: var(--vinho); } /* ---------- Simulador ---------- */ .sim { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 940px) { .sim { grid-template-columns: 1fr; gap: 28px; } } .campo { margin-bottom: 22px; } .campo > label { display: block; font-size: 14px; letter-spacing: .4px; margin-bottom: 8px; color: rgba(247,242,236,.85); } .campo__valor { float: right; font-family: var(--display); color: var(--ouro-claro); } .campo select, .campo input[type="text"], .campo input[type="tel"], .campo input[type="email"] { width: 100%; padding: 13px 15px; border-radius: 11px; border: 1px solid rgba(247, 242, 236, .22); background: rgba(247, 242, 236, .07); color: var(--creme); font-size: 16px; font-family: var(--corpo); } .campo select option { color: #1a1a1a; } .campo input[type="range"] { width: 100%; accent-color: var(--ouro); height: 26px; } .campo__nota { font-size: 12.5px; color: rgba(247, 242, 236, .5); margin-top: 6px; } .resultado { background: rgba(247, 242, 236, .97); color: var(--tinta); border-radius: var(--raio-g); padding: 30px; box-shadow: var(--sombra-g); } .resultado__parcela { font-family: var(--display); font-size: clamp(40px, 6vw, 56px); color: var(--vinho); line-height: 1; margin: 6px 0 4px; } .resultado__legenda { font-size: 14px; color: var(--tinta-suave); margin: 0 0 22px; } .resultado__linhas { list-style: none; margin: 0 0 22px; padding: 0; font-size: 15px; } .resultado__linhas li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linha); } .resultado__linhas li:last-child { border-bottom: 0; } .resultado__linhas b { font-family: var(--display); font-size: 18px; } .faixa-tag { display: inline-block; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; } .faixa-ok { background: #dff3e8; color: #14663f; } .faixa-att { background: #fdf0d8; color: #8a5b09; } .miudo { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.5; } /* ---------- Galeria ---------- */ .galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 760px) { .galeria { grid-template-columns: 1fr; } } .foto { position: relative; border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra); background: #ddd; } .foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; transition: transform .5s; } .foto:hover img { transform: scale(1.04); } .foto__cap { position: absolute; inset: auto 0 0 0; padding: 20px; background: linear-gradient(transparent, rgba(46, 10, 16, .9)); color: var(--creme); } .foto__cap b { font-family: var(--display); font-size: 20px; display: block; } .foto__cap span { font-size: 13.5px; color: rgba(247, 242, 236, .8); } .pastilhas { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; } .pastilhas li { background: var(--branco); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; } .secao--escura .pastilhas li { background: rgba(247, 242, 236, .09); border-color: rgba(247, 242, 236, .16); } .pastilhas--previsto li { opacity: .72; border-style: dashed; } /* ---------- Localização ---------- */ .local { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .local { grid-template-columns: 1fr; } } .mapa { border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra-g); position: relative; } .mapa__pin { position: absolute; left: 73%; top: 62%; transform: translate(-50%, -100%); background: var(--vinho); color: var(--ouro-claro); font-family: var(--display); font-size: 12.5px; letter-spacing: 1.4px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); } .mapa__pin::after { content: ""; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--vinho); } .entorno { list-style: none; margin: 0; padding: 0; } .entorno li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--linha); } .secao--escura .entorno li { border-color: rgba(247, 242, 236, .14); } .entorno__d { font-family: var(--display); font-size: 14px; color: var(--ouro); min-width: 92px; } .entorno__n { font-weight: 600; } .entorno__t { display: block; font-size: 13px; color: var(--tinta-suave); font-weight: 400; } .secao--escura .entorno__t { color: rgba(247, 242, 236, .6); } /* ---------- FAQ ---------- */ .faq { max-width: 820px; margin: 0 auto; } .faq details { border-bottom: 1px solid var(--linha); } .faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font-family: var(--display); font-size: 19px; line-height: 1.35; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 6px; top: 17px; font-size: 27px; color: var(--ouro); transition: transform .2s; line-height: 1; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin: 0 0 22px; color: var(--tinta-suave); } /* ---------- Formulário ---------- */ .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form__grid .campo--full { grid-column: 1 / -1; } @media (max-width: 700px) { .form__grid { grid-template-columns: 1fr; } } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } .form__msg { margin-top: 14px; font-size: 15px; min-height: 22px; } .form__msg.erro { color: #ffcbbd; } .form__msg.ok { color: #b9f0cf; font-weight: 600; } .form__ok { background: rgba(31, 157, 85, .14); border: 1px solid rgba(185, 240, 207, .35); border-radius: var(--raio-g); padding: 32px; text-align: center; } .form__ok h3 { color: var(--ouro-claro); font-size: 26px; } /* ---------- Rodapé ---------- */ .rodape { background: var(--vinho-esc); color: rgba(247, 242, 236, .62); padding: 52px 0 120px; font-size: 13.5px; } .rodape__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; margin-bottom: 32px; } @media (max-width: 820px) { .rodape__grid { grid-template-columns: 1fr; gap: 24px; } } .rodape b { color: var(--creme); font-family: var(--display); font-weight: 400; font-size: 16px; display: block; margin-bottom: 8px; } .rodape a { color: rgba(247, 242, 236, .8); } .rodape__legal { border-top: 1px solid rgba(247, 242, 236, .12); padding-top: 22px; font-size: 12.2px; line-height: 1.65; color: rgba(247, 242, 236, .45); } /* ---------- Barra fixa mobile ---------- */ .fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(46, 10, 16, .97); border-top: 1px solid rgba(197, 171, 63, .25); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; } .fixa__txt { color: var(--creme); font-size: 12.5px; line-height: 1.3; flex: 1; } .fixa__txt b { display: block; font-family: var(--display); color: var(--ouro-claro); font-size: 15px; } @media (min-width: 861px) { .fixa { display: none; } .rodape { padding-bottom: 52px; } } /* ---------- Revelação ---------- */ /* A revelação só entra em cena depois que o JS marca . Sem JS (ou se o script falhar), o conteúdo nasce visível — 44 blocos presos em opacity:0 seriam uma página em branco para o usuário e para o robô do buscador. */ .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .rv.vis { opacity: 1; transform: none; } /* ================================================================ LIZE — janela flutuante do hotsite Mesmo formato do portal: bolha no canto, painel que abre por cima. O rotulo do botao carrega o beneficio ("Cabe no meu bolso?") em vez do nome da ferramenta — e a pergunta que a pessoa ja esta fazendo sozinha enquanto olha o preco. ================================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Bolha de chamada ---------- */ .lize-fab { position: fixed; right: 20px; bottom: 20px; z-index: 75; display: inline-flex; align-items: center; gap: 11px; padding: 7px 20px 7px 7px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--vinho-esc), var(--vinho-claro)); color: var(--creme); cursor: pointer; font-family: var(--display); font-size: 15px; letter-spacing: .2px; box-shadow: 0 14px 34px rgba(46, 10, 16, .4); transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease; } .lize-fab:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(46, 10, 16, .5); } .lize-fab img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ouro); } .lize-fab[hidden] { display: none; } /* Anel pulsando: chama o olho sem piscar a tela inteira. */ .lize-fab-ping { position: absolute; left: 7px; top: 7px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ouro); animation: lizePing 2.6s cubic-bezier(0, 0, .2, 1) infinite; pointer-events: none; } @keyframes lizePing { 0% { transform: scale(1); opacity: .85; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lize-fab-ping { display: none; } } /* ---------- Convite que aparece sozinho ---------- */ .lize-oi { position: fixed; right: 20px; bottom: 84px; z-index: 74; max-width: 290px; padding: 16px 18px 16px 17px; background: var(--creme); color: var(--tinta); border-radius: 16px 16px 4px 16px; box-shadow: 0 16px 40px rgba(46, 10, 16, .3); font-size: 14.5px; line-height: 1.5; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; transition: opacity .3s ease, transform .3s ease; } .lize-oi.vis { opacity: 1; transform: none; } .lize-oi[hidden] { display: none; } .lize-oi b { color: var(--vinho); } .lize-oi-x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: var(--tinta-suave); padding: 4px; } .lize-oi-x:hover { color: var(--vinho); } /* ---------- Janela ---------- */ .lize-janela { position: fixed; right: 20px; bottom: 20px; z-index: 78; width: 380px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: 0 26px 70px rgba(46, 10, 16, .42); opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom right; transition: opacity .22s ease, transform .22s ease; } .lize-janela.vis { opacity: 1; transform: none; } .lize-janela[hidden] { display: none; } .lize-topo { display: flex; align-items: center; gap: 11px; padding: 13px 14px; flex: none; background: linear-gradient(135deg, var(--vinho-esc), var(--vinho)); color: var(--creme); } .lize-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(197, 171, 63, .55); } .lize-quem { flex: 1; min-width: 0; } .lize-quem b { font-family: var(--display); font-size: 16px; display: block; line-height: 1.1; } .lize-quem span { font-size: 12px; color: rgba(247, 242, 236, .72); display: flex; align-items: center; gap: 6px; } .lize-quem i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; flex: none; } .lize-zap { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #1f9d55; color: #fff; text-decoration: none; transition: background .16s, transform .16s; } .lize-zap:hover { background: #1cae5c; transform: scale(1.08); color: #fff; } .lize-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(247, 242, 236, .12); color: var(--creme); cursor: pointer; font-size: 13px; line-height: 1; } .lize-x:hover { background: rgba(247, 242, 236, .22); } .lize-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: #faf7f3; overscroll-behavior: contain; } .lize-bolha { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .lize-bolha a { color: var(--vinho); font-weight: 600; } .lize-bolha--bot { align-self: flex-start; background: var(--branco); border: 1px solid var(--linha); border-bottom-left-radius: 5px; } .lize-bolha--user { align-self: flex-end; background: var(--vinho); color: var(--creme); border-bottom-right-radius: 5px; } .lize-bolha--user a { color: var(--ouro-claro); } .lize-bolha--erro { align-self: center; background: #fdecea; color: #8a2b1f; font-size: 13px; border-radius: 10px; } .lize-digitando { align-self: flex-start; font-size: 13px; color: var(--tinta-suave); font-style: italic; padding: 4px; } .lize-atalhos { display: flex; gap: 7px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; flex: none; } .lize-atalhos::-webkit-scrollbar { display: none; } .lize-atalhos button { flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linha); background: var(--branco); font-size: 13px; color: var(--tinta); cursor: pointer; white-space: nowrap; transition: border-color .16s, background .16s; } .lize-atalhos button:hover { border-color: var(--vinho); background: #fdf9f4; } .lize-atalhos[hidden] { display: none; } .lize-entrada { display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--linha); flex: none; } .lize-entrada input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--linha); border-radius: 999px; font-size: 15px; font-family: var(--corpo); background: #faf7f3; color: var(--tinta); } .lize-entrada input:focus { outline: 2px solid var(--ouro); outline-offset: 1px; background: var(--branco); } .lize-entrada button { flex: none; width: 43px; height: 43px; border: 0; border-radius: 50%; background: var(--vinho); color: var(--creme); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .16s; } .lize-entrada button:hover:not(:disabled) { background: var(--vinho-claro); } .lize-entrada button:disabled { opacity: .5; cursor: default; } .lize-rodape { margin: 0; padding: 0 14px 12px; font-size: 11px; line-height: 1.4; color: var(--tinta-suave); flex: none; } @media (max-width: 860px) { /* A barra fixa do rodape ja ocupa a base: a Lize sobe acima dela. */ .lize-fab { bottom: 80px; right: 14px; padding: 6px 16px 6px 6px; font-size: 14px; } .lize-fab img { width: 36px; height: 36px; } .lize-fab-ping { left: 6px; top: 6px; width: 36px; height: 36px; } .lize-oi { bottom: 138px; right: 14px; left: 14px; max-width: none; } .lize-janela { right: 10px; left: 10px; bottom: 76px; width: auto; height: auto; max-height: calc(100vh - 150px); min-height: 60vh; } } /* ---------- Aviso de cookies ---------- */ /* Usa o mesmo cookie do portal (purecookieDismiss), então quem já aceitou no site não leva o aviso de novo aqui. */ .oa-cookie { position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: 340px; padding: 18px 20px; background: var(--vinho-esc); color: rgba(247, 242, 236, .82); border: 1px solid rgba(197, 171, 63, .3); border-radius: var(--raio); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); font-size: 13.5px; line-height: 1.5; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; } .oa-cookie.vis { opacity: 1; transform: none; } .oa-cookie b { display: block; font-family: var(--display); color: var(--creme); font-size: 15px; margin-bottom: 5px; } .oa-cookie a { color: var(--ouro-claro); } .oa-cookie button { margin-top: 12px; padding: 9px 20px; border: 0; border-radius: 999px; background: var(--ouro); color: var(--vinho-esc); font-family: var(--display); font-size: 14px; cursor: pointer; } .oa-cookie button:hover { background: var(--ouro-claro); } @media (max-width: 860px) { /* Sobe acima da bolha da Lize (que ja esta acima da barra fixa), senao os tres brigam pelo mesmo canto da tela. */ .oa-cookie { left: 12px; right: 12px; max-width: none; bottom: 152px; } } /* Chamada da Lize dentro do resultado do simulador: onde a dúvida nasce, sem precisar de uma seção inteira só para ela. */ .sim-lize { margin: 16px 0 0; padding-top: 16px; border-top: 1px dashed var(--linha); font-size: 14px; color: var(--tinta-suave); line-height: 1.5; } .sim-lize em { color: var(--tinta); font-style: italic; } .sim-lize-btn { display: inline-block; margin-top: 9px; padding: 9px 18px; border: 1.5px solid var(--vinho); border-radius: 999px; background: transparent; color: var(--vinho); font-family: var(--display); font-size: 14px; cursor: pointer; transition: background .16s, color .16s; } .sim-lize-btn:hover { background: var(--vinho); color: var(--creme); } /* ---------- Mapa Leaflet ---------- */ /* Mesmo par que o imovel.php usa no portal: Leaflet + OpenStreetMap. */ #mapa { height: 420px; border-radius: var(--raio-g); box-shadow: var(--sombra-g); background: #ddd; z-index: 1; } @media (max-width: 700px) { #mapa { height: 330px; } } .leaflet-container { font-family: var(--corpo); border-radius: var(--raio-g); } .leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.45; } .leaflet-popup-content b { font-family: var(--display); font-size: 15px; color: var(--vinho); } .leaflet-popup-content span { color: var(--tinta-suave); } /* Pinos desenhados em CSS: nada de imagem extra para carregar. */ .oa-pin { background: transparent; border: 0; } .oa-pin i { display: block; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: transform .16s; } .oa-pin.on i { transform: scale(1.45); } .oa-pin--emp { display: flex; flex-direction: column; align-items: center; font-family: var(--display); font-size: 11px; letter-spacing: 1.2px; color: var(--ouro-claro); white-space: nowrap; } .oa-pin--emp b { background: var(--vinho); border: 1.5px solid var(--ouro); padding: 5px 11px; border-radius: 999px; font-weight: 400; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); } .oa-pin--emp u { width: 13px; height: 13px; margin-top: -3px; border-radius: 50%; background: var(--ouro); border: 2.5px solid var(--vinho); text-decoration: none; } .mapa-legenda { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 14px; font-size: 13px; } .mapa-legenda span { display: inline-flex; align-items: center; gap: 7px; color: rgba(247, 242, 236, .78); } .mapa-legenda i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); } .entorno li { cursor: pointer; transition: background .16s; border-radius: 8px; padding-left: 8px; padding-right: 8px; } .entorno li:hover, .entorno li:focus-visible { background: rgba(247, 242, 236, .08); outline: none; } .entorno__cor { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; } /* A lista do entorno cresceu com os pontos reais do OSM e ficava o dobro da altura do mapa no desktop. Passa a rolar dentro da própria altura do mapa, com um esmaecido no pé avisando que tem mais. */ @media (min-width: 901px) { .local > div:last-child { position: relative; } .entorno { max-height: 420px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(197,171,63,.5) transparent; } .entorno::-webkit-scrollbar { width: 6px; } .entorno::-webkit-scrollbar-thumb { background: rgba(197,171,63,.5); border-radius: 3px; } .local > div:last-child::after { content: ""; position: absolute; left: 0; right: 8px; top: 388px; height: 42px; background: linear-gradient(transparent, var(--vinho)); pointer-events: none; } } .entorno li { padding-top: 10px; padding-bottom: 10px; } .entorno__t { margin-top: 1px; }