/* ============================================================ NOBRE IMÓVEIS — Design System (mockup) Estética: editorial documental da serra Paleta de marca: navy / cinza / amarelo • Poppins + Inter ============================================================ */ /* fontes carregadas via no de cada página (evita render-blocking @import) */ :root { /* —— marca (paleta oficial Nobre) —— */ --navy: #14213D; /* estrutura / texto principal */ --navy-80: #2a3a5c; --navy-60: #5a6885; --petroleo: #033749; /* fundos escuros / profundidade */ --teal: #1c798b; /* secundária: links, detalhes, ícones */ --teal-soft: #e7f1f3; --cinza: #F7F9FB; /* fundo */ --cinza-2: #ECEFF4; --linha: #e5e5e5; /* divisórias (paleta) */ --amarelo: #FCA311; /* accent — só CTA/destaque pontual (10%) */ --amarelo-ink: #8a5500; --branco: #ffffff; --ok: #1f9d6b; --whats: #25D366; /* —— tipografia —— */ --display: 'Poppins', sans-serif; --body: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace; /* —— métrica —— */ --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --radius: 6px; --radius-lg: 12px; /* —— escala de espaço (8px) —— */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 64px; --sp-8: 96px; --sp-10: 120px; /* —— sombras sutis (premium) —— */ --shadow-sm: 0 1px 2px rgba(20,33,61,.05), 0 2px 6px rgba(20,33,61,.04); --shadow-md: 0 6px 20px rgba(20,33,61,.08); --shadow-lg: 0 18px 50px rgba(20,33,61,.12); --ease: cubic-bezier(.4, 0, .2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body); color: var(--navy); background: var(--cinza); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* —— grão de filme global, sutil —— */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ::selection { background: var(--amarelo); color: var(--navy); } /* —— layout helpers —— */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .lower { text-transform: lowercase; } .mono { font-family: var(--mono); } /* tag documental (timestamp/coordenada/código) */ .doc { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--navy-60); text-transform: uppercase; } /* mira / cruz decorativa */ .mira { position: relative; width: 14px; height: 14px; flex: none; } .mira::before, .mira::after { content: ""; position: absolute; background: var(--amarelo); } .mira::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); } .mira::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); } /* —— headings —— */ .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy-60); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--amarelo); } h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; } .display { font-family: var(--display); font-weight: 200; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.035em; } .display b { font-weight: 700; } .display .em { font-style: italic; font-weight: 300; color: var(--navy-80); } /* ============================================================ HEADER ============================================================ */ .site-head { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--cinza) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); } .site-head .wrap { display: flex; align-items: center; gap: 28px; height: 72px; } .brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: .14em; text-transform: uppercase; } .brand small { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .18em; color: var(--navy-60); text-transform: uppercase; } .nav { display: flex; gap: 26px; margin-left: auto; } .nav a { font-size: 14px; color: var(--navy-80); position: relative; padding: 4px 0; } .nav a:hover { color: var(--navy); } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--amarelo); transition: width .25s ease; } .nav a:hover::after { width: 100%; } .head-cta { margin-left: 6px; } @media (max-width: 860px) { .nav { display: none; } } @media (max-width: 560px) { .brand small { display: none; } .head-cta { white-space: nowrap; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--body); font-weight: 500; font-size: 15px; padding: 13px 22px; border-radius: var(--radius); transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--navy); color: var(--branco); } .btn-primary:hover { background: #0d182c; box-shadow: var(--shadow-md); } .btn-accent { background: var(--amarelo); color: var(--navy); font-weight: 600; box-shadow: 0 6px 22px rgba(252,163,17,.35); } .btn-accent:hover { filter: brightness(1.04); box-shadow: 0 10px 30px rgba(252,163,17,.45); } .btn-ghost { border: 1px solid var(--navy); color: var(--navy); } .btn-ghost:hover { background: var(--navy); color: var(--branco); } .btn-whats { background: var(--whats); color: #052e16; font-weight: 600; } .btn-whats:hover { filter: brightness(1.05); box-shadow: 0 10px 30px rgba(37,211,102,.35); } .btn-sm { padding: 9px 14px; font-size: 13px; } .btn-lg { padding: 16px 28px; font-size: 16px; } .btn-block { width: 100%; } /* ============================================================ HERO (home) ============================================================ */ .hero { position: relative; padding-top: clamp(40px, 7vw, 86px); padding-bottom: clamp(40px, 6vw, 70px); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 70px); align-items: end; } .hero-copy .eyebrow { margin-bottom: 26px; } .hero-copy .display { margin-bottom: 22px; } .hero-poem { font-size: 17px; color: var(--navy-80); max-width: 30ch; line-height: 1.7; margin-bottom: 32px; } .hero-poem .bar { display:block; border-left: 2px solid var(--amarelo); padding-left: 14px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero-meta { margin-top: 40px; display: flex; gap: 34px; } .hero-meta .num { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; } .hero-meta .lbl { font-size: 12.5px; color: var(--navy-60); margin-top: 6px; } /* moldura vertical com foto */ .frame { display: block; position: relative; aspect-ratio: 3/4; border: 1px solid var(--navy); padding: 12px; background: var(--branco); box-shadow: var(--shadow-md); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .frame:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .frame::after { /* mira no canto */ content: "+"; position: absolute; top: -9px; right: -9px; font-family: var(--mono); color: var(--amarelo); font-size: 20px; line-height: 1; } .frame .ph { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.02); } .frame .cap { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-end; padding: 10px 12px; background: linear-gradient(0deg, rgba(20,33,61,.78), transparent); color: #fff; } .frame .cap .t { font-family: var(--display); font-weight: 500; font-size: 15px; } .frame .cap .doc { color: rgba(255,255,255,.75); } /* faixa de busca */ .searchbar { margin-top: clamp(34px, 5vw, 56px); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: stretch; } .searchbar .field { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: var(--radius); transition: background .2s; } .searchbar .field:hover { background: var(--cinza); } .searchbar .field + .field { border-left: 1px solid var(--linha); } .searchbar .field label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-60); } .searchbar .field .val { font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; } .searchbar .field .val::after { content: "▾"; color: var(--navy-60); font-size: 12px; } .searchbar .go { align-self: stretch; } @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 360px; } .searchbar { grid-template-columns: 1fr 1fr; } .searchbar .field + .field { border-left: none; } .searchbar .go { grid-column: 1 / -1; } } /* ============================================================ INTENT — busca em 1 clique (operação + tipo combinados) "Easy Order" do imóvel: o que mais se procura vira 1 botão. ============================================================ */ .intent { margin-top: clamp(30px, 5vw, 52px); } .intent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .intent-head .q { font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 2.4vw, 1.35rem); } .intent-head .q b { font-weight: 700; } .intent-head .adv { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--navy-60); display: inline-flex; align-items: center; gap: 6px; } .intent-head .adv:hover { color: var(--navy); } .intent-head .adv .arr { transition: transform .2s; } .intent-head .adv:hover .arr { transform: translateX(3px); } .intent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 920px) { .intent-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .intent-grid { grid-template-columns: 1fr; } } .intent-btn { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius-lg); padding: 18px 18px 16px; min-height: 104px; justify-content: flex-end; transition: transform .18s ease, box-shadow .2s ease, border-color .2s, background .2s; overflow: hidden; } .intent-btn::before { /* glyph documental no topo */ content: attr(data-ic); position: absolute; top: 12px; left: 16px; font-family: var(--mono); font-size: 17px; color: var(--navy-60); transition: color .2s; } .intent-btn .op { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-60); } .intent-btn .tp { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; line-height: 1.1; } .intent-btn .go { position: absolute; right: 16px; bottom: 16px; font-family: var(--mono); color: var(--navy-60); transition: transform .25s, color .2s; } .intent-btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--navy); } .intent-btn:hover::before { color: var(--navy); } .intent-btn:hover .go { transform: translateX(4px); color: var(--navy); } /* os 2 atalhos mais procurados (personas) ganham destaque amarelo */ .intent-btn.hot { border-color: color-mix(in srgb, var(--amarelo) 55%, var(--linha)); background: linear-gradient(180deg, color-mix(in srgb, var(--amarelo) 9%, #fff), #fff); } .intent-btn.hot::after { content: "popular"; position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: var(--amarelo); padding: 3px 7px; border-radius: 100px; } .intent-btn.hot:hover { border-color: var(--amarelo); box-shadow: 0 10px 30px rgba(252,163,17,.22); } /* pill "continuar última busca" — Easy Order / retomar em 1 clique */ .resume-pill { margin-top: 14px; display: inline-flex; align-items: center; gap: 11px; background: var(--navy); color: var(--cinza); border-radius: 100px; padding: 9px 9px 9px 16px; font-size: 13.5px; transition: transform .18s, box-shadow .2s; } .resume-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .resume-pill .lb { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(246,248,251,.6); } .resume-pill b { font-weight: 600; } .resume-pill .chip-go { background: var(--amarelo); color: var(--navy); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; } /* ============================================================ FINDER — segmentado (alugar/comprar) + grade de tipos com ícones ============================================================ */ .finder { margin-top: clamp(28px, 5vw, 50px); } .finder-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } /* controle segmentado */ .segmented { position: relative; display: inline-flex; background: var(--cinza-2); border: 1px solid var(--linha); border-radius: 100px; padding: 4px; } .segmented .seg { position: relative; z-index: 2; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--navy-60); padding: 10px 28px; border-radius: 100px; transition: color .25s; } .segmented .seg.active { color: var(--navy); } .segmented .seg-ind { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; border-radius: 100px; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.4,1.2,.4,1); } .segmented[data-op="locacao"] .seg-ind { transform: translateX(100%); } .segmented .seg.active::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 2px; background: var(--amarelo); border-radius: 2px; } .finder-top .adv { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--navy-60); display: inline-flex; align-items: center; gap: 6px; } .finder-top .adv:hover { color: var(--navy); } .finder-top .adv .arr { transition: transform .2s; } .finder-top .adv:hover .arr { transform: translateX(3px); } /* grade de tipos */ .typegrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; } @media (max-width: 1080px) { .typegrid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 520px) { .typegrid { grid-template-columns: repeat(3, 1fr); } } .type-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius-lg); padding: 18px 8px 14px; cursor: pointer; text-align: center; transition: transform .18s ease, box-shadow .2s, border-color .2s, background .2s; } .type-tile svg { width: 28px; height: 28px; stroke: var(--navy); transition: transform .25s, stroke .2s; } .type-tile .lb { font-size: 12.5px; font-weight: 500; color: var(--navy-80); } .type-tile:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: var(--shadow-md); } .type-tile:hover svg { transform: scale(1.08) translateY(-1px); } .type-tile:hover .lb { color: var(--navy); } .type-tile:active { transform: translateY(-1px) scale(.98); } /* canto com mira amarela ao focar/hover */ .type-tile:hover::after { content: "+"; position: absolute; } .finder-hint { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--navy-60); display: inline-flex; align-items: center; gap: 8px; } .finder-hint .k { background: var(--cinza-2); border: 1px solid var(--linha); border-radius: 4px; padding: 2px 7px; color: var(--navy); } /* ============================================================ FILTER-STICKY — barra de filtro fixa na listagem ============================================================ */ .filter-sticky { position: sticky; top: 71px; z-index: 90; background: color-mix(in srgb, var(--cinza) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter); transition: box-shadow .25s; } .filter-sticky.stuck { box-shadow: 0 10px 30px rgba(20,33,61,.08); } .filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .segmented.sm .seg { padding: 7px 18px; font-size: 13.5px; } .filter-row .divider { width: 1px; align-self: stretch; background: var(--linha); margin: 2px 2px; } .typechips { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .typechips::-webkit-scrollbar { display: none; } .typechip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--linha); background: #fff; border-radius: 100px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--navy-80); transition: all .18s; flex: none; } .typechip svg { width: 16px; height: 16px; stroke: var(--navy-60); } .typechip:hover { border-color: var(--navy-60); } .typechip.on { background: var(--navy); color: #fff; border-color: var(--navy); } .typechip.on svg { stroke: var(--amarelo); } .filter-row .spacer { margin-left: auto; } @media (max-width: 760px){ .filter-row .sort { display: none; } } /* ============================================================ SECTION HEADERS ============================================================ */ .section { padding: clamp(64px, 9vw, 120px) 0; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; } .sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 300; } .sec-head h2 b { font-weight: 700; } .sec-head .doc { white-space: nowrap; } /* ============================================================ CARD DE IMÓVEL ============================================================ */ .grid-imoveis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 980px) { .grid-imoveis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-imoveis { grid-template-columns: 1fr; } } .card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--navy-60); } .card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cinza-2); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .card:hover .card-media img { transform: scale(1.06); } .card-media .badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--navy) 90%, transparent); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 3px; backdrop-filter: blur(4px); } .card-media .badge.op-venda { background: color-mix(in srgb, var(--amarelo) 92%, transparent); color: var(--navy); } .card-media .fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; font-size: 15px; transition: transform .2s, background .2s; } .card-media .fav:hover { transform: scale(1.12); background: #fff; } .card-media .count { position: absolute; bottom: 10px; right: 10px; font-family: var(--mono); font-size: 10px; color: #fff; background: rgba(20,33,61,.6); padding: 4px 7px; border-radius: 3px; } .card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .card-loc { display: flex; align-items: center; gap: 7px; } .card-loc .doc { color: var(--navy-60); } .card-title { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; } .card-specs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--navy-80); margin-top: auto; } .card-specs span { display: inline-flex; align-items: center; gap: 5px; } .card-specs i { font-style: normal; color: var(--navy-60); font-family: var(--mono); } .card-foot { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--linha); } .price .v { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; } .price .l { font-size: 11.5px; color: var(--navy-60); font-family: var(--mono); } .card-go { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--teal); } .card-go .arr { transition: transform .25s; } .card:hover .card-go .arr { transform: translateX(4px); } /* ============================================================ FAIXA "POR QUE NOBRE" / conceito 3 cliques ============================================================ */ .pizza { background: var(--navy); color: var(--cinza); border-radius: var(--radius-lg); padding: clamp(30px,5vw,60px); position: relative; overflow: hidden; } .pizza::before { content: "+"; position: absolute; top: 18px; right: 24px; color: var(--amarelo); font-family: var(--mono); font-size: 26px; } .pizza .eyebrow { color: rgba(246,248,251,.7); } .pizza .eyebrow::before { background: var(--amarelo); } .pizza h2 { color: #fff; font-weight: 300; font-size: clamp(1.7rem,3.6vw,2.7rem); margin: 16px 0 10px; max-width: 18ch; } .pizza h2 b { font-weight: 700; color: var(--amarelo); } .pizza p { color: rgba(246,248,251,.78); max-width: 52ch; } .steps3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 38px; } @media (max-width: 720px){ .steps3 { grid-template-columns: 1fr; } } .step3 { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 22px; position: relative; } .step3 .n { font-family: var(--display); font-weight: 800; font-size: 40px; color: var(--amarelo); line-height: 1; } .step3 .tt { font-family: var(--display); font-weight: 500; font-size: 17px; margin: 12px 0 6px; color:#fff; } .step3 .dd { font-size: 13.5px; color: rgba(246,248,251,.7); } /* ============================================================ BUSCA / LISTAGEM ============================================================ */ .list-head { padding: 30px 0 6px; } .crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--navy-60); text-transform: uppercase; margin-bottom: 14px; display:flex; gap:8px; } .crumb a:hover { color: var(--navy); } .list-title { font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem,3.4vw,2.4rem); } .list-title b { font-weight: 700; } .list-sub { color: var(--navy-60); font-size: 14px; margin-top: 6px; } .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linha); margin-bottom: 28px; } .chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linha); background: var(--branco); padding: 9px 14px; border-radius: 100px; font-size: 13.5px; font-weight: 500; transition: border-color .2s, background .2s, color .2s; } .chip:hover { border-color: var(--navy-60); } .chip.on { background: var(--navy); color: #fff; border-color: var(--navy); } .chip.on .x { opacity: .7; } .chip .ic { font-family: var(--mono); color: var(--navy-60); font-size: 12px; } .chip.on .ic { color: var(--amarelo); } .filters .spacer { margin-left: auto; } .sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--navy-60); } .sort select { font-family: var(--body); font-size: 13.5px; font-weight: 500; color: var(--navy); border: 1px solid var(--linha); background:#fff; border-radius: var(--radius); padding: 8px 10px; } .list-layout { display: grid; grid-template-columns: 1fr; gap: 26px; } /* ============================================================ PÁGINA DO IMÓVEL ============================================================ */ .pdp { padding-top: 22px; } .pdp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .pdp-top .doc-row { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; } .pdp h1 { font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.7rem); } .pdp h1 b { font-weight: 700; } .pdp .addr { color: var(--navy-80); margin-top: 8px; display:flex; align-items:center; gap: 8px; } .pdp-headprice { text-align: right; flex: none; } .pdp-headprice .v { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem,3vw,2.3rem); letter-spacing: -.02em; } .pdp-headprice .l { font-family: var(--mono); font-size: 11px; color: var(--navy-60); text-transform: uppercase; } @media (max-width: 600px) { .pdp-top { flex-direction: column; } .pdp-headprice { text-align: left; } .pdp-actions { justify-content: flex-start; } } /* galeria */ .gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(320px, 46vw, 520px); border-radius: var(--radius-lg); overflow: hidden; } .gallery .g { position: relative; overflow: hidden; background: var(--cinza-2); cursor: pointer; } .gallery .g img { width:100%; height:100%; object-fit: cover; transition: transform .6s; } .gallery .g:hover img { transform: scale(1.05); } .gallery .g.main { grid-row: 1 / 3; } .gallery .g .more { position: absolute; inset: 0; background: rgba(20,33,61,.55); color:#fff; display:grid; place-items:center; font-family: var(--mono); font-size: 13px; letter-spacing: .05em; } .tourtag { position:absolute; left:14px; top:14px; display:inline-flex; gap:7px; align-items:center; background: rgba(20,33,61,.82); color:#fff; padding: 7px 11px; border-radius: 4px; font-family: var(--mono); font-size: 11px; letter-spacing:.06em; } .tourtag .dot { width:7px; height:7px; border-radius:50%; background: var(--amarelo); } @media (max-width: 760px){ .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; } .gallery .g.main { grid-column: 1 / 3; grid-row: 1; } .gallery .g.h { display:none; } } /* corpo PDP */ .pdp-body { display: grid; grid-template-columns: 1fr 380px; gap: 40px; margin-top: 36px; align-items: start; } .pdp-body > * { min-width: 0; } /* evita blowout do grid no mobile (min-content) */ @media (max-width: 980px){ .pdp-body { grid-template-columns: 1fr; } } .specbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px,1fr)); gap:1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--radius-lg); overflow: hidden; } .specbar .s { background:#fff; padding: 16px 8px; text-align: center; display:flex; flex-direction:column; align-items:center; gap:7px; } .specbar .s svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .specbar .s .n { font-family: var(--display); font-weight: 700; font-size: 20px; line-height:1; } .specbar .s .l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-60); } /* descrição rica + ficha técnica */ .pdp-desc { color: var(--navy-80); font-size: 15.5px; line-height: 1.85; max-width: 68ch; white-space: pre-line; } .ficha { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin-top: 24px; border-top: 1px solid var(--linha); } @media (max-width: 520px) { .ficha { grid-template-columns: 1fr; } } .ficha .fi { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: 14px; } .ficha .fi .k { color: var(--navy-60); } .ficha .fi .vv { font-weight: 600; text-align: right; } /* LIGHTBOX (galeria em tela cheia) */ .gallery .g { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10,16,28,.95); display: none; align-items: center; justify-content: center; } .lightbox.open { display: flex; animation: lbfade .2s var(--ease); } @keyframes lbfade { from { opacity: 0; } to { opacity: 1; } } .lightbox img#lbImg { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 70px rgba(0,0,0,.55); } .lb-close, .lb-nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; display: grid; place-items: center; transition: background .2s, transform .15s; } .lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.24); } .lb-close:active, .lb-nav:active { transform: scale(.94); } .lb-close { top: 18px; right: 20px; width: 44px; height: 44px; font-size: 20px; } .lb-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 26px; } .lb-prev { left: 16px; } .lb-next { right: 16px; } .lb-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.82); font-family: var(--mono); font-size: 13px; } .lb-thumbs { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; max-width: 90vw; overflow-x: auto; padding: 6px; scrollbar-width: none; } .lb-thumbs::-webkit-scrollbar { display: none; } .lb-thumbs img { width: 56px; height: 40px; object-fit: cover; border-radius: 3px; opacity: .5; cursor: pointer; border: 2px solid transparent; transition: opacity .2s; flex: none; } .lb-thumbs img:hover { opacity: .85; } .lb-thumbs img.on { opacity: 1; border-color: var(--amarelo); } @media (max-width: 600px) { .lb-thumbs { display: none; } .lb-nav { width: 42px; height: 42px; } .lb-counter { bottom: 14px; } } /* itens do imóvel (só os que tem, em grade) */ .amen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 11px 24px; } .amen-item { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--navy-80); } .amen-item .mk { color: var(--ok); font-family: var(--mono); flex: none; } /* botão de vídeo na galeria */ .gallery .gallery-video { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: rgba(20,33,61,.85); color: #fff; padding: 9px 15px; border-radius: 100px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, transform .15s; } .gallery .gallery-video svg { width: 15px; height: 15px; fill: currentColor; } .gallery .gallery-video:hover { background: var(--amarelo); color: var(--navy); } .gallery .gallery-video:active { transform: scale(.96); } /* modal de vídeo */ .videobox { position: fixed; inset: 0; z-index: 1000; background: rgba(10,16,28,.95); display: none; align-items: center; justify-content: center; } .videobox.open { display: flex; animation: lbfade .2s var(--ease); } .video-wrap { width: min(92vw, 1100px); aspect-ratio: 16 / 9; } .video-wrap iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; box-shadow: var(--shadow-lg); } .block { margin-top: 34px; } .block h2 { font-family: var(--display); font-weight: 600; font-size: 18px; margin-bottom: 14px; display:flex; align-items:center; gap:10px; letter-spacing: normal; } .block h2::before { content:""; width: 20px; height: 1px; background: var(--amarelo); } .block p { color: var(--navy-80); font-size: 15.5px; line-height: 1.75; } .amen { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 6px; } @media (max-width: 560px){ .amen { grid-template-columns: 1fr 1fr; } } .amen li { list-style: none; display:flex; align-items:center; gap:9px; font-size: 14px; padding: 11px 13px; border:1px solid var(--linha); border-radius: var(--radius); background:#fff; } .amen li .mk { color: var(--ok); font-family: var(--mono); } .mapbox { margin-top: 14px; border:1px solid var(--linha); border-radius: var(--radius-lg); overflow:hidden; height: 240px; position: relative; background: linear-gradient(120deg,#e9eef6,#dfe6f1); } .mapbox .pin { position:absolute; left:50%; top:46%; transform: translate(-50%,-100%); } .mapbox .pin .dot { width: 18px; height:18px; border-radius:50%; background: var(--amarelo); border:3px solid var(--navy); box-shadow: 0 6px 16px rgba(20,33,61,.3); } .mapbox .gra { position:absolute; inset:0; background-image: radial-gradient(rgba(20,33,61,.06) 1px, transparent 1px); background-size: 22px 22px; } .mapbox .co { position:absolute; left:14px; bottom:12px; } /* mapa real (Leaflet) */ #pdpMap { height: 340px; border: 1px solid var(--linha); border-radius: var(--radius-lg); overflow: hidden; position: relative; z-index: 0; isolation: isolate; background: var(--cinza-2); } @media (max-width: 600px) { #pdpMap { height: 260px; } } .nobre-pin span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--amarelo); border: 3px solid var(--navy); box-shadow: 0 4px 12px rgba(20,33,61,.45); } .leaflet-popup-content { font-family: var(--body); font-size: 13px; } .leaflet-popup-content b { font-family: var(--display); } .leaflet-control-attribution { font-size: 9px; } .leaflet-bar a { color: var(--navy); } /* ====== AGENDADOR (sticky card) ====== */ .scheduler { position: sticky; top: 92px; background: #fff; border: 1px solid var(--linha); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .sch-head { padding: 18px 20px; border-bottom: 1px solid var(--linha); display:flex; align-items:center; justify-content: space-between; } .sch-head .ttl { font-family: var(--display); font-weight: 600; font-size: 16px; } .sch-head .clk { font-family: var(--mono); font-size: 10.5px; color: var(--amarelo-ink); background: color-mix(in srgb, var(--amarelo) 22%, #fff); padding: 5px 9px; border-radius: 100px; letter-spacing: .03em; } .sch-body { padding: 18px 20px 20px; } .sch-step { display:none; } .sch-step.active { display: block; animation: rise .35s ease both; } @keyframes rise { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} } .sch-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-60); display:flex; align-items:center; gap:8px; margin-bottom: 12px; } .sch-label .i { color: var(--amarelo-ink); } /* faixa de dias */ .daystrip { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; } .day { border: 1px solid var(--linha); border-radius: var(--radius); padding: 11px 6px; text-align: center; transition: all .18s; background:#fff; } .day:hover { border-color: var(--navy-60); } .day.sel { background: var(--navy); border-color: var(--navy); color:#fff; } .day .dow { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-60); } .day.sel .dow { color: rgba(255,255,255,.7); } .day .dnum { font-family: var(--display); font-weight: 700; font-size: 19px; margin-top: 3px; } .day .mon { font-size: 10px; color: var(--navy-60); } .day.sel .mon { color: rgba(255,255,255,.7); } /* horários */ .slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .slot { border:1px solid var(--linha); border-radius: var(--radius); padding: 11px 6px; text-align:center; font-weight: 600; font-size: 14px; transition: all .18s; background:#fff; } .slot:hover { border-color: var(--navy-60); } .slot.sel { background: var(--amarelo); border-color: var(--amarelo); color: var(--navy); } .slot.suggest { position: relative; border-color: var(--amarelo); } .slot.suggest::after { content:"sugerido"; position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:8px; background:var(--amarelo); color:var(--navy); padding:2px 6px; border-radius:100px; letter-spacing:.04em; white-space:nowrap; } /* form telefone */ .sch-field { margin-bottom: 12px; } .sch-field input { width:100%; font-family: var(--body); font-size: 15px; color: var(--navy); border:1px solid var(--linha); border-radius: var(--radius); padding: 13px 14px; transition: border-color .2s, box-shadow .2s; } .sch-field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20,33,61,.08); } .sch-field .hint { font-size: 11.5px; color: var(--navy-60); margin-top: 6px; } .sch-resume { display:flex; align-items:center; justify-content:space-between; gap: 10px; background: var(--cinza); border-radius: var(--radius); padding: 11px 13px; margin-bottom: 14px; font-size: 13.5px; } .sch-resume b { font-family: var(--display); } .sch-resume .chg { font-family: var(--mono); font-size: 11px; color: var(--navy-60); text-decoration: underline; } .lgpd { display:flex; gap:9px; align-items:flex-start; font-size: 11.5px; color: var(--navy-60); margin-top: 12px; line-height: 1.5; } .lgpd input { margin-top: 2px; accent-color: var(--amarelo); } .sch-or { text-align:center; font-family: var(--mono); font-size: 10.5px; letter-spacing:.1em; text-transform: uppercase; color: var(--navy-60); margin: 16px 0 12px; position: relative; } .sch-or::before, .sch-or::after { content:""; position:absolute; top:50%; width: 32%; height:1px; background: var(--linha); } .sch-or::before { left: 0; } .sch-or::after { right: 0; } /* sucesso */ .success { text-align: center; padding: 6px 4px; } .success .ring { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, #fff); display:grid; place-items:center; margin: 0 auto 16px; color: var(--ok); font-size: 30px; animation: pop .4s ease both; } @keyframes pop { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.1);} 100%{transform:scale(1); opacity:1;} } .success h4 { font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 6px; } .success p { font-size: 14px; color: var(--navy-80); } .tracker { display:flex; align-items:center; gap: 0; margin: 22px 0; } .tracker .t { flex:1; text-align:center; position: relative; } .tracker .t .pt { width: 14px; height:14px; border-radius:50%; background: var(--linha); margin: 0 auto 8px; position: relative; z-index:2; } .tracker .t.done .pt { background: var(--ok); } .tracker .t.now .pt { background: var(--amarelo); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amarelo) 30%, transparent); } .tracker .t::before { content:""; position:absolute; top:7px; left:-50%; width:100%; height:2px; background: var(--linha); z-index:1; } .tracker .t:first-child::before { display:none; } .tracker .t.done::before { background: var(--ok); } .tracker .t .lb { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing:.04em; color: var(--navy-60); } .tracker .t.now .lb { color: var(--amarelo-ink); } /* ====== STICKY CTA mobile ====== */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); padding: 12px var(--gutter); display: none; align-items: center; gap: 12px; box-shadow: 0 -8px 30px rgba(20,33,61,.10); } .sticky-cta .pr { display:flex; flex-direction:column; line-height:1.1; } .sticky-cta .pr .v { font-family: var(--display); font-weight:700; font-size: 18px; } .sticky-cta .pr .l { font-family: var(--mono); font-size: 10px; color: var(--navy-60); text-transform: uppercase; } .sticky-cta .btns { margin-left:auto; display:flex; gap: 8px; } @media (max-width: 980px){ .sticky-cta { display: flex; } .scheduler { position: static; } body.pdp-page { padding-bottom: 84px; } } /* ============================================================ FOOTER ============================================================ */ .site-foot { background: var(--navy); color: var(--cinza); margin-top: clamp(50px,8vw,110px); } .site-foot .wrap { padding: clamp(44px,6vw,72px) var(--gutter) 30px; } .foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } @media (max-width: 760px){ .foot-grid { grid-template-columns: 1fr 1fr; } } .foot-grid h2 { font-family: var(--mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase; color: rgba(246,248,251,.55); margin-bottom: 16px; font-weight: 500; } .foot-grid a { display:block; color: rgba(246,248,251,.82); font-size: 14px; padding: 5px 0; } .foot-grid a:hover { color: var(--amarelo); } .foot-brand .display { font-size: 30px; color:#fff; margin-bottom: 14px; } .foot-poem { color: rgba(246,248,251,.6); font-size: 14px; max-width: 26ch; line-height: 1.7; } .foot-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 22px; display:flex; justify-content: space-between; gap:14px; flex-wrap:wrap; } .foot-base .doc { color: rgba(246,248,251,.5); } /* ============================================================ HUB / index dos mockups ============================================================ */ .hub { min-height: 100vh; padding: clamp(40px,7vw,90px) var(--gutter); max-width: 1100px; margin-inline:auto; } .hub-head { margin-bottom: 50px; } .hub-head .display { margin: 18px 0; } .hub-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; } @media (max-width:720px){ .hub-grid { grid-template-columns: 1fr; } } .hub-card { border:1px solid var(--linha); border-radius: var(--radius-lg); background:#fff; overflow:hidden; transition: transform .25s, box-shadow .25s; display:flex; flex-direction:column; } .hub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .hub-card .thumb { aspect-ratio: 16/10; background: var(--navy); position: relative; overflow:hidden; } .hub-card .thumb img { width:100%; height:100%; object-fit: cover; opacity:.92; } .hub-card .thumb .n { position:absolute; top:14px; left:14px; font-family: var(--mono); font-size: 11px; color: var(--amarelo); letter-spacing:.1em; } .hub-card .b { padding: 20px; } .hub-card .b h3 { font-weight:600; font-size: 19px; margin-bottom: 6px; } .hub-card .b p { font-size: 13.5px; color: var(--navy-60); } .hub-note { margin-top: 40px; border-left: 2px solid var(--amarelo); padding: 4px 0 4px 18px; color: var(--navy-80); font-size: 14.5px; max-width: 70ch; } /* ============================================================ CONFIANÇA — faixa de métricas reais (petróleo) ============================================================ */ .stripe { background: var(--petroleo); color: #eaf3f5; border-radius: var(--radius-lg); padding: clamp(40px,5vw,68px) clamp(28px,5vw,72px); position: relative; overflow: hidden; } .stripe .eyebrow { color: rgba(234,243,245,.6); } .stripe .eyebrow::before { background: var(--amarelo); } .stripe h2 { color:#fff; font-weight:300; font-size: clamp(1.7rem,3.6vw,2.6rem); margin: 18px 0 10px; max-width: 22ch; letter-spacing: -.02em; } .stripe h2 b { font-weight:700; } .stripe .sub { color: rgba(234,243,245,.72); max-width: 56ch; font-size: 15.5px; line-height: 1.7; } .stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: clamp(34px,4vw,52px); } @media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; gap: 28px 20px; } } .stat .n { font-family: var(--display); font-weight:700; font-size: clamp(2rem,4vw,2.9rem); color:#fff; line-height:1; letter-spacing:-.02em; } .stat .n b { color: var(--amarelo); font-weight:700; } .stat .l { font-size: 13.5px; color: rgba(234,243,245,.7); margin-top: 10px; line-height: 1.4; } /* ============================================================ DIFERENCIAIS — cards claros, ícone teal ============================================================ */ .diffs { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; } @media (max-width:820px){ .diffs{ grid-template-columns:1fr; } } .diff { background:#fff; border:1px solid var(--linha); border-radius: var(--radius-lg); padding: clamp(24px,3vw,34px); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; } .diff:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal); } .diff .ic { width:48px; height:48px; border-radius: 12px; background: var(--teal-soft); display:grid; place-items:center; margin-bottom: 20px; } .diff .ic svg { width:24px; height:24px; stroke: var(--teal); fill:none; } .diff h3 { font-weight:600; font-size: 19px; margin-bottom: 9px; letter-spacing:-.01em; } .diff p { color: var(--navy-80); font-size: 14.5px; line-height: 1.68; } /* ============================================================ PDP — extras inspirados em referência (QuintoAndar) ============================================================ */ /* breakdown de custos */ .costs { background:#fff; border:1px solid var(--linha); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .costs h4 { font-family: var(--display); font-weight:600; font-size:15px; margin-bottom:10px; } .costs .row { display:flex; align-items:center; justify-content:space-between; font-size:14px; padding:8px 0; color: var(--navy-80); } .costs .row + .row { border-top:1px solid var(--linha); } .costs .row .lbl { display:inline-flex; align-items:center; gap:6px; } .costs .row .lbl .q { font-family:var(--mono); font-size:10px; color:var(--navy-60); border:1px solid var(--linha); border-radius:50%; width:15px; height:15px; display:inline-grid; place-items:center; } .costs .total { font-family: var(--display); font-weight:700; font-size:16px; color: var(--navy); border-top:2px solid var(--navy); margin-top:4px; padding-top:11px; } .costs .total .v { font-size:18px; } /* itens disponíveis × indisponíveis */ .amen-cols { display:grid; grid-template-columns:1fr 1fr; gap: 30px; } @media (max-width:560px){ .amen-cols{ grid-template-columns:1fr; gap:22px; } } .amen-cols h3 { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-60); margin-bottom:14px; font-weight:500; } .amen-list { list-style:none; display:flex; flex-direction:column; gap:10px; } .amen-list li { display:flex; align-items:center; gap:10px; font-size:14px; color: var(--navy-80); } .amen-list li .mk { color: var(--ok); font-family:var(--mono); flex:none; } .amen-list.off li { color: var(--navy-80); } .amen-list.off li .mk { color: var(--navy-60); } .amen-list.off li .t { text-decoration: line-through; } /* similares na região (carrossel) */ .similar-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 22px; } .similar-head h2 { font-family:var(--display); font-weight:300; font-size: clamp(1.4rem,3vw,2rem); } .similar-head h2 b { font-weight:700; } .similar-scroll { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(250px, 84vw); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin; } @media (min-width:760px){ .similar-scroll { grid-auto-columns: minmax(290px, 320px); } } .similar-scroll .card { scroll-snap-align:start; } /* links de cauda longa (SEO) */ .seolinks { border-top:1px solid var(--linha); padding-top: 30px; margin-top: 46px; } .seolinks .grp + .grp { margin-top: 22px; } .seolinks h3 { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-60); margin-bottom:14px; font-weight:500; } .seolinks .links { display:flex; flex-wrap:wrap; gap: 10px 20px; } .seolinks a { font-size:13.5px; color: var(--navy-80); } .seolinks a:hover { color: var(--teal); text-decoration:underline; } /* ações do topo da PDP (compartilhar/favoritar) */ .pdp-actions { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; } .pdp-actions button { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--linha); background:#fff; border-radius:100px; padding:8px 14px; font-size:13px; font-weight:500; color:var(--navy-80); transition: border-color .2s, color .2s; } .pdp-actions button:hover { border-color: var(--teal); color: var(--teal); } .freshness { font-family:var(--mono); font-size:11px; color:var(--navy-60); display:inline-flex; align-items:center; gap:7px; } .freshness .dot { width:6px; height:6px; border-radius:50%; background: var(--ok); } /* utilidades */ .flexbtns { display:flex; gap:10px; flex-wrap: wrap; } .mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px} .hide-desktop{display:none} @media (max-width:980px){ .hide-desktop{display:block} .hide-mobile{display:none} } /* ============================================================ A11Y / UX — foco visível, galeria acessível, formulário ============================================================ */ /* foco de teclado consistente (não afeta clique/mouse) */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible, .card:focus-visible, .type-tile:focus-visible, .typechip:focus-visible, .day:focus-visible, .slot:focus-visible, .seg:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; border-radius: 4px; } /* botão que abre o lightbox: cobre a célula toda, transparente */ .gallery .g-open { position: absolute; inset: 0; z-index: 2; background: transparent; border: 0; cursor: zoom-in; color: #fff; font-family: var(--mono); font-size: 13px; letter-spacing: .05em; display: grid; place-items: center; } .gallery .g-open:not(:empty) { background: rgba(20,33,61,.55); } /* badge "+N fotos" */ .gallery .g-open:hover:empty { background: rgba(20,33,61,.12); } .gallery .g-open:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -3px; } .gallery .tourtag { z-index: 3; } .gallery .gallery-video { z-index: 4; } /* galeria com poucas fotos: destaque em cima, miniaturas em grade 2 col */ .gallery[data-n="1"], .gallery[data-n="2"], .gallery[data-n="3"], .gallery[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 1fr; height: clamp(300px, 44vw, 460px); } .gallery[data-n="1"] .g.main, .gallery[data-n="2"] .g.main, .gallery[data-n="3"] .g.main, .gallery[data-n="4"] .g.main { grid-column: 1 / -1; grid-row: auto; } .gallery[data-n="1"] .g.main { grid-row: 1 / -1; } /* botão em forma de link (trocar dia etc.) */ .linkbtn, .chg { background: none; border: 0; padding: 0; font: inherit; color: var(--navy-60); cursor: pointer; } .linkbtn:hover, .chg:hover { color: var(--navy); text-decoration: underline; } /* rótulo + erro do campo de telefone */ .sch-flabel { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-60); margin-bottom: 6px; } .field-err { color: #c0392b; font-size: 12.5px; line-height: 1.4; margin-top: 7px; font-weight: 500; } .sch-field input.is-invalid { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.14) !important; } /* respeita quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .readbar i { transition: none !important; } } /* ============================================================ BLOG — índice, artigo, índice de leitura (TOC), progresso (só adiciona; não altera tokens/componentes existentes) ============================================================ */ /* barra de progresso de leitura */ .readbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 300; pointer-events: none; } .readbar i { display: block; height: 100%; width: 0; background: var(--amarelo); transition: width .1s linear; } /* skip-link (pular para o conteúdo) */ .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 400; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--radius); font-size: 14px; } .skip-link:focus { left: 16px; } /* —— hero curto do blog —— */ .blog-hero { padding: clamp(26px,4vw,50px) 0 clamp(18px,3vw,30px); } .blog-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 300; letter-spacing: -.02em; margin: 16px 0 14px; } .blog-hero h1 b { font-weight: 700; } .blog-hero .lead { font-size: 17px; color: var(--navy-80); max-width: 56ch; line-height: 1.7; } /* —— post em destaque —— */ .blog-feat { margin-bottom: clamp(32px,5vw,54px); } .post-feat { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px,3vw,40px); align-items: stretch; background: #fff; border: 1px solid var(--linha); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; } .post-feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--navy-60); } .post-feat-media { position: relative; overflow: hidden; background: var(--cinza-2); min-height: 260px; } .post-feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .post-feat:hover .post-feat-media img { transform: scale(1.05); } .post-feat-body { padding: clamp(24px,3vw,44px) clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0; align-self: center; } .post-feat-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.12; letter-spacing: -.02em; margin: 14px 0 12px; } .post-feat-dek { color: var(--navy-80); font-size: 15.5px; line-height: 1.62; max-width: 46ch; margin-bottom: 16px; } .post-feat-body .post-meta { margin-bottom: 18px; } @media (max-width: 860px){ .post-feat { grid-template-columns: 1fr; } .post-feat-media { aspect-ratio: 16/9; min-height: 0; } .post-feat-body { padding: 22px; } } /* —— grade de posts —— */ .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; } @media (max-width: 980px){ .blog-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .blog-grid { grid-template-columns: 1fr; } } /* card de post (herda .card) */ .post-card .card-media { aspect-ratio: 16/9; } .post-card .card-body { gap: 10px; } .post-cat { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: color-mix(in srgb, var(--amarelo) 92%, transparent); padding: 5px 9px; border-radius: 3px; backdrop-filter: blur(4px); } .post-meta { font-family: var(--mono); display: flex; align-items: center; gap: 10px; } .post-card-title { font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.22; letter-spacing: -.01em; } .post-card-dek { color: var(--navy-80); font-size: 14px; line-height: 1.6; } .post-card .card-go { margin-top: auto; padding-top: 4px; } /* —— artigo: cabeçalho —— */ .article-head { padding: clamp(16px,3vw,28px) 0 clamp(12px,2vw,20px); max-width: 54rem; } .article-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); } .article-head h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.08; margin: 14px 0 16px; } .article-head h1 b { font-weight: 700; } .article-dek { font-size: 18px; color: var(--navy-80); line-height: 1.6; max-width: 60ch; } .article-meta { display: flex; gap: 16px; align-items: center; margin-top: 16px; } /* capa do artigo */ .article-cover { border-radius: var(--radius-lg); overflow: hidden; margin: clamp(16px,3vw,28px) 0; aspect-ratio: 16/9; background: var(--cinza-2); } .article-cover img { width: 100%; height: 100%; object-fit: cover; } /* layout 2 colunas */ .post-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: clamp(28px,4vw,64px); align-items: start; } @media (max-width: 900px){ .post-layout { grid-template-columns: 1fr; } } /* —— coluna de leitura (.prose) —— */ .prose { max-width: 44rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.75; color: #26324a; } .prose > * + * { margin-top: 1.3em; } .prose h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem,3vw,2rem); line-height: 1.2; letter-spacing: -.02em; color: var(--navy); margin: 2em 0 .6em; scroll-margin-top: 92px; } .prose h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem,2.2vw,1.4rem); line-height: 1.25; color: var(--navy); margin: 1.6em 0 .5em; scroll-margin-top: 92px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-top: .5em; } .prose li::marker { color: var(--amarelo); } .prose a:not(.btn) { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } .prose a:not(.btn):hover { color: var(--navy); } .prose strong { font-weight: 600; color: var(--navy); } .prose blockquote { border-left: 3px solid var(--amarelo); padding: 2px 0 2px 20px; margin: 1.6em 0; font-size: 1.12em; color: var(--navy-80); font-style: italic; } .prose figure { margin: 1.6em 0; } .prose figure img { border-radius: var(--radius-lg); width: 100%; } .prose figcaption { margin-top: 8px; } /* callout / caixa de destaque */ .callout { background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--linha)); border-radius: var(--radius-lg); padding: 18px 20px; margin: 1.6em 0; } .callout .callout-t { font-family: var(--display); font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--navy); display: flex; align-items: center; gap: 8px; } .callout p { font-size: 14.5px; color: var(--navy-80); margin: 0; } /* CTA inline (meio do artigo) */ .inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--navy); color: var(--cinza); border-radius: var(--radius-lg); padding: 20px 22px; margin: 1.9em 0; } .inline-cta .t { font-family: var(--display); font-weight: 500; font-size: 16px; color: #fff; max-width: 42ch; line-height: 1.4; } .inline-cta .btn { flex: none; } /* aside sticky (índice + mini-CTA) */ .post-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; } @media (max-width: 900px){ .post-aside { position: static; top: auto; margin-bottom: 8px; } } /* índice do artigo (TOC) */ .toc { border: 1px solid var(--linha); border-radius: var(--radius-lg); background: #fff; padding: 16px 18px; } .toc-head { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-60); } .toc-desktop { display: block; } #tocToggle { display: none; background: none; border: 0; } .toc-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; } .toc-item a { display: block; padding: 7px 0 7px 12px; font-size: 13.5px; color: var(--navy-60); border-left: 2px solid var(--linha); line-height: 1.4; min-height: 24px; } .toc-item.lvl-h3 a { padding-left: 24px; font-size: 13px; } .toc-item a:hover { color: var(--navy); } .toc-item a.active { color: var(--navy); border-left-color: var(--amarelo); font-weight: 600; } @media (max-width: 900px){ #tocToggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); min-height: 24px; } #tocToggle::after { content: "▾"; color: var(--navy-60); transition: transform .2s; } .toc.open #tocToggle::after { transform: rotate(180deg); } .toc-desktop { display: none; } .toc .toc-list { display: none; } .toc.open .toc-list { display: flex; } } /* mini-CTA no aside */ .aside-cta { border: 1px solid var(--linha); border-radius: var(--radius-lg); background: var(--cinza); padding: 18px; } .aside-cta h3 { font-family: var(--display); font-weight: 600; font-size: 16px; margin-bottom: 6px; } .aside-cta p { font-size: 13.5px; color: var(--navy-60); line-height: 1.55; margin-bottom: 14px; } .aside-cta .btn { width: 100%; } .aside-cta .btn + .btn { margin-top: 8px; } /* fecho de conversão + relacionados */ .post-cta { margin-top: clamp(34px,5vw,58px); } .related-sec { padding-top: clamp(34px,5vw,58px); }