/* Exemplo Tanya Katzow · página inicial em portal (versão 2, 28 set 2026)
   Marfim e grafite, champanhe como único acento, Bodoni Moda e Outfit. Pensado primeiro para o telemóvel.
   As animações só se ligam com a classe .js no <html>; sem JavaScript fica tudo visível.
   A versão 1 (página com os serviços desenvolvidos) está em fontes/versao-1-28set. */

:root {
  --marfim: #F7F4EF;
  --papel: #FFFFFF;
  --areia: #EFE8DD;
  --grafite: #1D1D21;
  --texto: #3A3935;
  --pedra: #7D776E;
  --champanhe: #A8845A;
  --champanhe-claro: #D9C4A3;
  --linha: rgba(29, 29, 33, .12);
  --linha-clara: rgba(255, 255, 255, .16);
  --titulo: "Bodoni Moda", "Didot", Georgia, serif;
  --corpo: "Outfit", system-ui, -apple-system, sans-serif;
  --raio: 4px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--corpo); font-size: 1.02rem; line-height: 1.65; color: var(--texto); background: var(--marfim); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.travado { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--champanhe); outline-offset: 3px; }
.saltar { position: fixed; top: 8px; left: 16px; z-index: 300; padding: 10px 16px; background: var(--papel); transform: translateY(-200%); }
.saltar:focus { transform: none; }
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 20px; }

.confirmar { background: rgba(251, 191, 36, .34); outline: 1px dashed rgba(200, 145, 10, .9); outline-offset: 2px; border-radius: 2px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.escuro .confirmar { background: rgba(251, 191, 36, .42); color: #fff; }

/* ---------- Faixa da demo e barra de progresso ---------- */
.demo-barra { position: relative; z-index: 70; background: #FACC15; color: #2B2100; font-size: .84rem; line-height: 1.45; }
.demo-barra .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 8px; padding-bottom: 8px; }
.demo-barra strong { font-weight: 600; }
.demo-barra a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.progresso-pagina { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; background: var(--champanhe); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- Tipografia e botões ---------- */
h1, h2, h3 { font-family: var(--titulo); font-weight: 500; color: var(--grafite); line-height: 1.08; letter-spacing: -.01em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--champanhe); }
h2 { font-size: clamp(2.1rem, 7vw, 3.6rem); }
.rotulo { display: inline-flex; align-items: center; gap: 12px; font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--champanhe); margin-bottom: 16px; }
.rotulo::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.lead { font-size: 1.06rem; max-width: 34em; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; font-size: .84rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; overflow: hidden; isolation: isolate; transition: color .4s var(--ease), border-color .4s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--champanhe); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-escuro { background: var(--grafite); color: #fff; }
.btn-claro { background: #fff; color: var(--grafite); }
.btn-claro:hover { color: #fff; }
.btn-linha { border-color: currentColor; color: inherit; background: transparent; }
.btn-linha:hover { border-color: var(--champanhe); color: #fff; }

/* ---------- Abertura (monograma) ---------- */
.abertura { display: none; }
.js .abertura { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.abertura-painel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--grafite); }
.abertura-painel.cima { top: 0; }
.abertura-painel.baixo { bottom: 0; }
.abertura-marca { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: #fff; text-align: center; }
.abertura-marca svg { width: 96px; height: 96px; overflow: visible; }
.abertura-marca rect { fill: none; stroke: var(--champanhe-claro); stroke-width: 1.5; stroke-dasharray: 400; stroke-dashoffset: 400; }
.abertura-marca text { font-family: var(--titulo); font-size: 34px; fill: #fff; opacity: 0; }
.abertura-nome { font-family: var(--titulo); font-size: 1.9rem; letter-spacing: .02em; overflow: hidden; line-height: 1.2; }
.abertura-nome span { display: inline-block; transform: translateY(110%); }
.abertura-sub { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--champanhe-claro); opacity: 0; }
.abertura-linha { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--champanhe); transform: scaleX(0); z-index: 3; }

/* ---------- Navegação ---------- */
.nav { position: fixed; left: 0; right: 0; top: 0; z-index: 60; color: #fff; transition: background .45s var(--ease), color .45s, box-shadow .45s, transform .45s var(--ease); }
.nav.solida { background: rgba(247, 244, 239, .94); color: var(--grafite); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--linha); }
.nav.escondida { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 70px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca-mono { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid currentColor; font-family: var(--titulo); font-size: 1.05rem; }
.marca-textos { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nome { font-family: var(--titulo); font-size: 1.18rem; }
.marca-sub { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.nav-links { display: none; align-items: center; gap: 26px; font-size: .84rem; letter-spacing: .06em; }
.nav-links a:not(.btn) { position: relative; padding: 6px 0; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--champanhe); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .btn { min-height: 42px; padding: 0 20px; font-size: .74rem; }
.nav:not(.solida) .nav-links .btn-escuro { background: #fff; color: var(--grafite); }
.nav:not(.solida) .nav-links .btn-escuro:hover { color: #fff; }
.nav-burger { display: grid; place-content: center; width: 46px; height: 46px; background: none; border: 0; color: inherit; }
.nav-burger span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.nav-burger span + span { margin-top: 7px; }
.menu-aberto .nav { color: var(--grafite); background: var(--marfim); transform: none; }
.menu-aberto .nav-burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-aberto .nav-burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.nav-mobile { position: fixed; inset: 70px 0 0; bottom: 0; z-index: 59; background: var(--marfim); padding: 18px 20px 40px; display: flex; flex-direction: column; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s .6s; overflow-y: auto; }
.menu-aberto .nav-mobile { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease); }
.nav-mobile a:not(.btn) { display: flex; align-items: baseline; gap: 14px; font-family: var(--titulo); font-size: 1.95rem; color: var(--grafite); padding: 11px 0; border-bottom: 1px solid var(--linha); }
.nav-mobile a small { font-family: var(--corpo); font-size: .72rem; color: var(--champanhe); letter-spacing: .1em; }
.nav-mobile .btn { margin-top: 24px; }
.nav-mobile p { margin-top: 18px; font-size: .9rem; color: var(--pedra); }

/* ---------- Topo em ecrã inteiro ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--grafite); }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.ativo { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hero-slide.ativo img { animation: kenburns 7.5s linear forwards; }
.hero-slide:nth-child(even).ativo img { animation-name: kenburns2; }
@keyframes kenburns { from { transform: scale(1.14) translate(1.5%, 0); } to { transform: scale(1.02) translate(-1%, -1%); } }
@keyframes kenburns2 { from { transform: scale(1.02) translate(-1%, 1%); } to { transform: scale(1.14) translate(1.5%, -1%); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 23, .6) 0%, rgba(20, 20, 23, .12) 28%, rgba(20, 20, 23, .38) 52%, rgba(20, 20, 23, .9) 100%); pointer-events: none; }
.hero-conteudo { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: 30px; text-shadow: 0 1px 22px rgba(0, 0, 0, .35); }
.hero .rotulo { color: var(--champanhe-claro); }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 9.4vw, 5.6rem); max-width: 12.5em; margin-bottom: 18px; }
.hero h1 em { color: var(--champanhe-claro); }
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.palavra > span { display: inline-block; }
.hero-sub { max-width: 32em; color: rgba(255, 255, 255, .86); margin-bottom: 24px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-ctas .btn-linha { color: #fff; }
.hero-rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--linha-clara); }
.slide-info { display: grid; gap: 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); min-width: 0; }
.slide-info b { font-family: var(--titulo); font-weight: 400; font-style: italic; font-size: 1rem; letter-spacing: 0; text-transform: none; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-barra { width: 150px; max-width: 100%; height: 1px; background: var(--linha-clara); overflow: hidden; }
.slide-barra span { display: block; height: 100%; background: var(--champanhe-claro); transform-origin: 0 50%; transform: scaleX(0); }
.slide-barra.corre span { animation: barra 6s linear forwards; }
@keyframes barra { to { transform: scaleX(1); } }
.hero-retrato { display: flex; align-items: center; gap: 12px; flex: none; }
.hero-retrato img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 1px solid var(--champanhe-claro); }
.hero-retrato span { display: none; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.hero-retrato b { display: block; font-family: var(--titulo); font-weight: 500; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #fff; }
.descer { display: none; }

/* ---------- Faixa das zonas ---------- */
.zonas { background: var(--grafite); color: var(--champanhe-claro); overflow: hidden; padding: 18px 0; border-top: 1px solid var(--linha-clara); }
.zonas-trilho { display: flex; width: max-content; animation: faixa 40s linear infinite; }
.zonas-trilho span { font-family: var(--titulo); font-style: italic; font-size: clamp(1.8rem, 6vw, 3.2rem); line-height: 1.2; white-space: nowrap; padding-right: .9em; }
.zonas-trilho span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--champanhe-claro); }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ---------- O portal ---------- */
.seccao { padding: 84px 0; }
.cabeca { max-width: 640px; margin-bottom: 34px; }
.portal-grelha { display: grid; gap: 12px; }
.porta { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 24px 22px; border-radius: var(--raio); overflow: hidden; color: #fff; isolation: isolate; background: var(--grafite); }
.porta-img { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.porta-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.porta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 20, 23, .05) 15%, rgba(20, 20, 23, .84) 100%); transition: opacity .6s; }
.porta:hover .porta-img img { transform: scale(1.14); }
.porta-num { position: absolute; top: 20px; left: 22px; font-family: var(--titulo); font-style: italic; font-size: 1.05rem; color: var(--champanhe-claro); }
.porta h3 { color: #fff; font-size: clamp(1.8rem, 6vw, 2.5rem); margin-bottom: 6px; }
.porta p { font-size: .95rem; color: rgba(255, 255, 255, .84); max-width: 26em; }
.porta-seta { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); transition: background .45s var(--ease), border-color .45s, transform .45s var(--ease); }
.porta-seta svg { width: 18px; height: 18px; }
.porta:hover .porta-seta { background: var(--champanhe); border-color: var(--champanhe); transform: rotate(-45deg); }
.porta-sobre { background: var(--areia); color: var(--grafite); }
.porta-sobre::before { background: linear-gradient(90deg, rgba(239, 232, 221, 1) 42%, rgba(239, 232, 221, .15) 78%); }
.porta-sobre h3 { color: var(--grafite); }
.porta-sobre p { color: var(--texto); max-width: 15em; }
.porta-sobre .porta-num { color: var(--champanhe); }
.porta-sobre .porta-seta { border-color: var(--linha); color: var(--grafite); background: rgba(255, 255, 255, .7); }
.porta-sobre:hover .porta-seta { color: #fff; }
.porta-sobre .porta-img { left: 38%; }
.porta-sobre .porta-img img { object-position: 50% 12%; }

/* ---------- Números ---------- */
.numeros { background: var(--grafite); color: #fff; padding: 56px 0; }
.numeros-grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; }
.numero b { display: block; font-family: var(--titulo); font-weight: 400; font-size: clamp(2.6rem, 11vw, 4.4rem); line-height: 1; color: #fff; margin-bottom: 10px; }
.numero > span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.numeros-nota { margin-top: 28px; font-size: .82rem; color: rgba(255, 255, 255, .6); }

/* ---------- Reconhecimento ---------- */
.reconhecimento { background: var(--papel); overflow: hidden; }
.rec-grelha { display: grid; gap: 44px; }
.rec-retrato { position: relative; width: min(86%, 400px); aspect-ratio: 4 / 5; margin-left: 4px; }
.rec-retrato .arco { position: absolute; inset: 0; border-radius: 999px 999px var(--raio) var(--raio); overflow: hidden; background: #cfcbc6; }
.rec-retrato .arco img { width: 100%; height: 116%; object-fit: cover; object-position: 50% 10%; }
.rec-retrato::after { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--champanhe-claro); border-radius: 999px 999px var(--raio) var(--raio); z-index: -1; }
.selo-rodar { position: absolute; right: -40px; bottom: 28px; width: 116px; height: 116px; border-radius: 50%; background: var(--grafite); color: var(--champanhe-claro); display: grid; place-items: center; }
.selo-rodar svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: rodar 18s linear infinite; }
.selo-rodar text { font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; fill: currentColor; font-family: var(--corpo); }
.selo-rodar b { font-family: var(--titulo); font-weight: 400; font-size: 1.45rem; color: #fff; }
@keyframes rodar { to { transform: rotate(360deg); } }
.linha-tempo { position: relative; list-style: none; margin-top: 30px; padding-left: 30px; display: grid; gap: 20px; }
.linha-tempo::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--linha); }
.linha-tempo .traco { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--champanhe); transform-origin: 50% 0; }
.js .linha-tempo .traco { transform: scaleY(0); }
.linha-tempo li { position: relative; }
.linha-tempo li:not(.traco)::before { content: ""; position: absolute; left: -31px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--papel); border: 1px solid var(--champanhe); transition: background .4s, transform .4s var(--ease); }
.linha-tempo li.aceso::before { background: var(--champanhe); transform: scale(1.25); }
.linha-tempo b { display: block; font-family: var(--titulo); font-weight: 500; font-size: 1.35rem; color: var(--grafite); line-height: 1.2; }
.linha-tempo span { font-size: .92rem; color: var(--pedra); }
.rec-nota { margin-top: 26px; font-size: .88rem; color: var(--pedra); }

/* ---------- Convite ---------- */
.convite { position: relative; background: var(--grafite); color: #fff; overflow: hidden; }
.convite-arcos { position: absolute; right: -260px; top: -200px; width: 640px; height: 640px; opacity: .55; pointer-events: none; }
.convite-arcos circle { fill: none; stroke: var(--champanhe); stroke-width: 1; }
.convite .rotulo { color: var(--champanhe-claro); }
.convite h2 { position: relative; color: #fff; font-size: clamp(2.4rem, 9.5vw, 5.2rem); max-width: 11em; margin-bottom: 26px; }
.convite h2 em { color: var(--champanhe-claro); }
.js .convite h2 .pal { opacity: .16; transition: opacity .35s; }
.js .convite h2 .pal.acesa { opacity: 1; }
.convite .lead { position: relative; color: rgba(255, 255, 255, .8); margin-bottom: 30px; }
.convite-ctas { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.convite .btn-linha { color: #fff; }

/* ---------- Mapa ---------- */
.mapa-grelha { display: grid; gap: 20px; }
.mapa-moldura { position: relative; min-height: 340px; border-radius: var(--raio); overflow: hidden; background: #ddd; }
.mapa-moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .6s; }
.mapa-moldura:hover iframe { filter: grayscale(.15); }
.mapa-cartao { padding: 28px 24px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.mapa-cartao h3 { font-size: 1.8rem; margin-bottom: 10px; }
.mapa-dados { list-style: none; display: grid; margin: 16px 0 24px; }
.mapa-dados li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--linha); }
.mapa-dados span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pedra); }
.mapa-dados a, .mapa-dados p { font-size: 1.04rem; color: var(--grafite); }
.mapa-cartao .btn { width: 100%; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--grafite); color: rgba(255, 255, 255, .7); padding: 56px 0 110px; font-size: .9rem; }
.rodape-grelha { display: grid; gap: 30px; }
.rodape .marca { color: #fff; }
.rodape h4 { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--champanhe-claro); margin-bottom: 12px; }
.rodape ul { list-style: none; display: grid; gap: 8px; }
.rodape a:hover { color: #fff; }
.rodape-legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--linha-clara); font-size: .78rem; line-height: 1.6; color: rgba(255, 255, 255, .5); }
.rodape-demo { margin-top: 12px; }
.rodape-demo a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Barra de baixo no telemóvel ---------- */
.barra-movel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(247, 244, 239, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); transform: translateY(110%); transition: transform .5s var(--ease); }
.barra-movel.visivel { transform: none; }
.barra-movel .btn { min-height: 48px; padding: 0 12px; font-size: .78rem; }
.barra-movel .btn-linha { color: var(--grafite); }

/* ---------- Janela "no site completo" ---------- */
.janela { position: fixed; inset: 0; z-index: 150; display: grid; place-items: end center; background: rgba(20, 20, 23, .55); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.janela.aberta { opacity: 1; visibility: visible; }
.janela-caixa { position: relative; width: 100%; max-width: 560px; max-height: 88svh; overflow-y: auto; background: var(--marfim); border-radius: 18px 18px 0 0; padding: 30px 22px 30px; transform: translateY(40px); transition: transform .5s var(--ease); }
.janela.aberta .janela-caixa { transform: none; }
.janela-caixa h3 { font-size: 2rem; margin-bottom: 10px; padding-right: 40px; }
.janela-caixa ul { margin: 14px 0 20px 18px; display: grid; gap: 6px; }
.janela-nota { font-size: .84rem; color: var(--pedra); margin-bottom: 20px; }
.janela-fechar { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha); background: var(--papel); font-size: 1.3rem; line-height: 1; color: var(--grafite); }
.janela-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.janela-acoes .btn-linha { color: var(--grafite); }

/* ---------- Cursor (só com rato) ---------- */
.cursor, .cursor-ponto { display: none; }

/* ---------- Estados iniciais das animações (só com JS) ---------- */
.js [data-revela] { opacity: 0; transform: translateY(28px); }
.js .porta { clip-path: inset(100% 0% 0% 0%); }

/* ---------- Ecrãs maiores ---------- */
@media (min-width: 640px) {
  .wrap { padding: 0 32px; }
  .portal-grelha { grid-template-columns: 1fr 1fr; }
  .porta { min-height: 300px; }
  .porta-vender, .porta-sobre { grid-column: span 2; }
  .numeros-grelha { grid-template-columns: repeat(4, 1fr); }
  .hero-retrato span { display: block; }
  .janela { place-items: center; padding: 20px; }
  .janela-caixa { border-radius: 18px; padding: 38px; }
}

@media (min-width: 980px) {
  .nav-inner { height: 82px; }
  .nav-links { display: flex; }
  .nav-burger, .nav-mobile { display: none; }
  .hero-conteudo { padding-bottom: 42px; }
  .descer { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
  .descer i { position: relative; width: 1px; height: 46px; background: var(--linha-clara); overflow: hidden; }
  .descer i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--champanhe-claro); animation: descer 2s var(--ease) infinite; }
  .seccao { padding: 120px 0; }
  .portal-grelha { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 290px; gap: 16px; }
  .porta { min-height: 0; padding: 30px; }
  .porta-vender { grid-column: 1 / 8; grid-row: span 2; }
  .porta-comprar, .porta-avaliar { grid-column: 8 / 13; }
  .porta-imoveis { grid-column: 1 / 6; }
  .porta-sobre { grid-column: 6 / 13; }
  .porta-vender h3 { font-size: 3.6rem; }
  .rec-grelha { grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; }
  .linha-tempo { gap: 24px; }
  .mapa-grelha { grid-template-columns: 1.4fr .9fr; gap: 24px; align-items: stretch; }
  .mapa-moldura { min-height: 460px; }
  .rodape { padding-bottom: 56px; }
  .rodape-grelha { grid-template-columns: 1.4fr 1fr 1fr; }
  .barra-movel { display: none; }
  .cursor, .cursor-ponto { display: block; position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none; border-radius: 50%; }
  .cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--champanhe); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, opacity .3s; }
  .cursor.grande { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: rgba(217, 196, 163, .22); border-color: var(--champanhe-claro); }
  .cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--champanhe); }
  .sem-cursor .cursor, .sem-cursor .cursor-ponto { opacity: 0; }
}

@keyframes descer { to { top: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-revela], .js .porta { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .abertura { display: none; }
}

/* =========================================================================
   Páginas interiores (2 out 2026): vender, comprar, avaliação, imóveis e sobre mim.
   Mesma marca da página inicial. O JavaScript delas está em js/paginas.js.
   ========================================================================= */

.nav-links a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.nav-mobile a[aria-current="page"] { color: var(--champanhe); }

/* ---------- Topo de página ---------- */
.topo-pagina { position: relative; min-height: 82svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--grafite); }
.topo-img { position: absolute; inset: 0; overflow: hidden; }
.topo-img img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 14s linear forwards; }
.topo-pagina::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 23, .62) 0%, rgba(20, 20, 23, .2) 32%, rgba(20, 20, 23, .5) 60%, rgba(20, 20, 23, .92) 100%); pointer-events: none; }
.topo-conteudo { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 54px; text-shadow: 0 1px 22px rgba(0, 0, 0, .35); }
.topo-pagina .rotulo { color: var(--champanhe-claro); }
.topo-pagina h1 { color: #fff; font-size: clamp(2.3rem, 8.4vw, 5rem); max-width: 13em; margin-bottom: 18px; }
.topo-pagina h1 em { color: var(--champanhe-claro); }
.topo-sub { max-width: 34em; color: rgba(255, 255, 255, .86); margin-bottom: 26px; }
.topo-pagina .btn-linha { color: #fff; }

.topo-sobre { min-height: auto; align-items: center; }
.topo-sobre::after { display: none; }
.topo-sobre .topo-conteudo { display: grid; gap: 40px; padding-top: 140px; text-shadow: none; }
.topo-sobre-retrato { position: relative; width: min(78%, 380px); aspect-ratio: 4 / 5; }
.topo-sobre-retrato .arco { position: absolute; inset: 0; border-radius: 999px 999px var(--raio) var(--raio); overflow: hidden; background: #3a3936; }
.topo-sobre-retrato .arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.topo-sobre-retrato::after { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--champanhe); border-radius: 999px 999px var(--raio) var(--raio); z-index: -1; }
.topo-sobre-retrato .selo-rodar { right: -34px; bottom: 22px; background: var(--champanhe); color: var(--grafite); }
.topo-sobre-retrato .selo-rodar b { color: var(--grafite); }

/* ---------- Secções comuns ---------- */
.seccao-papel { background: var(--papel); }
.seccao-areia { background: var(--areia); }
.seccao-escura { background: var(--grafite); color: rgba(255, 255, 255, .78); overflow: hidden; }
.seccao-escura h2, .seccao-escura h3 { color: #fff; }
.seccao-escura h2 em { color: var(--champanhe-claro); }
.seccao-escura .rotulo { color: var(--champanhe-claro); }
.nota-pagina { margin-top: 26px; font-size: .86rem; color: var(--pedra); }
.seccao-escura .nota-pagina { color: rgba(255, 255, 255, .6); }

.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pills li { font-size: .76rem; letter-spacing: .04em; padding: 6px 13px; border: 1px solid var(--linha); border-radius: 999px; color: var(--pedra); background: rgba(255, 255, 255, .5); }

/* ---------- O método (vender) ---------- */
.metodo-grelha { display: grid; gap: 34px; }
.metodo-contador { display: none; }
.metodo-passos { list-style: none; }
.metodo-passo { position: relative; padding: 30px 0 30px 62px; border-top: 1px solid var(--linha); transition: opacity .6s var(--ease); }
.metodo-passo:last-child { border-bottom: 1px solid var(--linha); }
.metodo-passo .num { position: absolute; left: 0; top: 28px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--champanhe); font-family: var(--titulo); font-style: italic; font-size: 1.05rem; color: var(--champanhe); transition: background .5s var(--ease), color .5s; }
.metodo-passo.aceso .num { background: var(--champanhe); color: #fff; }
.metodo-passo h3 { font-size: clamp(1.5rem, 5vw, 2.1rem); margin-bottom: 10px; }
.metodo-passo p { max-width: 36em; }
.js .metodo-passo:not(.aceso) { opacity: .4; }

/* ---------- Documentos (vender) ---------- */
.docs { display: grid; gap: 12px; }
.doc { padding: 24px 22px; background: var(--marfim); border: 1px solid var(--linha); border-radius: var(--raio); transition: transform .5s var(--ease), border-color .5s; }
.doc:hover { transform: translateY(-4px); border-color: var(--champanhe-claro); }
.doc svg { width: 30px; height: 30px; color: var(--champanhe); margin-bottom: 16px; }
.doc h3 { font-size: 1.4rem; margin-bottom: 6px; }
.doc p { font-size: .95rem; }

/* ---------- Bloco com imagem em arco (Collection, estrangeiros) ---------- */
.duo { display: grid; gap: 44px; align-items: center; }
.duo-img { position: relative; width: min(86%, 420px); aspect-ratio: 4 / 5; }
.duo-img .arco { position: absolute; inset: 0; border-radius: 999px 999px var(--raio) var(--raio); overflow: hidden; }
.duo-img .arco img { width: 100%; height: 118%; object-fit: cover; }
.duo-img::after { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--champanhe); border-radius: 999px 999px var(--raio) var(--raio); pointer-events: none; }
.lista-traco { list-style: none; display: grid; margin-top: 26px; }
.lista-traco li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--linha); }
.seccao-escura .lista-traco li { border-color: var(--linha-clara); color: rgba(255, 255, 255, .86); }
.lista-traco li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--champanhe); transform: translateY(-4px); }

/* ---------- Perguntas ---------- */
.perguntas { max-width: 860px; }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas details:last-child { border-bottom: 1px solid var(--linha); }
.perguntas summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--titulo); font-size: clamp(1.25rem, 4.2vw, 1.6rem); line-height: 1.25; color: var(--grafite); cursor: pointer; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha); font-family: var(--corpo); font-size: 1.2rem; color: var(--champanhe); transition: transform .45s var(--ease), background .45s, color .45s; }
.perguntas details[open] summary::after { transform: rotate(45deg); background: var(--champanhe); color: #fff; border-color: var(--champanhe); }
.perguntas details p { padding: 0 0 24px; max-width: 40em; }

/* ---------- Faixa de chamada ---------- */
.chamada { padding: 70px 0; }
.chamada .wrap { display: grid; gap: 22px; }
.chamada h2 { font-size: clamp(2rem, 6.4vw, 3.2rem); max-width: 14em; }
.chamada-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.chamada .btn-linha { color: var(--grafite); }

/* ---------- Cartões (comprar, sobre) ---------- */
.cartoes { display: grid; gap: 12px; }
.cartao { padding: 28px 24px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.seccao-papel .cartao { background: var(--marfim); }
.cartao svg { width: 34px; height: 34px; color: var(--champanhe); margin-bottom: 18px; }
.cartao h3 { font-size: 1.55rem; margin-bottom: 8px; }
.cartao p { font-size: .97rem; }

/* ---------- Zonas e fatores ---------- */
.grelha-itens { display: grid; gap: 0 40px; }
.item-linha { padding: 24px 0; border-top: 1px solid var(--linha); }
.item-linha h3 { font-size: 1.45rem; margin-bottom: 6px; }
.item-linha p { font-size: .97rem; }
.item-linha .item-num, .cartao .item-num { display: block; font-family: var(--titulo); font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--champanhe-claro); margin-bottom: 12px; }

/* ---------- Formulários ---------- */
.form-grelha { display: grid; gap: 40px; align-items: start; }
.form-cartao { position: relative; padding: 30px 22px; background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 30px 60px -40px rgba(29, 29, 33, .35); }
.form-corpo { display: grid; gap: 20px; }
.campo { display: grid; gap: 4px; }
.campo label, .campo-titulo { font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pedra); }
.campo input, .campo select, .campo textarea { width: 100%; font: inherit; font-size: 1.02rem; color: var(--grafite); background: transparent; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; padding: 10px 0; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.campo select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8845A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 18px; padding-right: 26px; }
.campo textarea { min-height: 90px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--champanhe); }
.campo .erro { display: none; font-size: .8rem; color: #B4532A; }
.campo.invalido .erro { display: block; }
.campo.invalido input, .campo.invalido select { border-color: #B4532A; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips button { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha); background: transparent; font-size: .88rem; color: var(--grafite); transition: background .35s var(--ease), color .35s, border-color .35s; }
.chips button:hover { border-color: var(--champanhe); }
.chips button[aria-pressed="true"] { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.form-cartao .btn { width: 100%; }
.form-nota { font-size: .8rem; color: var(--pedra); }
.form-ok { display: none; text-align: center; padding: 20px 0; }
.form-ok svg { width: 64px; height: 64px; color: var(--champanhe); margin: 0 auto 18px; }
.form-ok svg path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.form-ok h3 { font-size: 2rem; margin-bottom: 8px; }
.form-ok .form-demo { margin-top: 18px; padding: 12px 14px; font-size: .84rem; background: rgba(251, 191, 36, .2); border: 1px dashed rgba(200, 145, 10, .8); border-radius: 6px; text-align: left; }
.enviado .form-corpo, .enviado .form-progresso { display: none !important; }
.enviado .form-ok { display: block; }
.enviado .form-ok svg path { animation: tracar 1s .2s var(--ease) forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }

/* passos do pedido de avaliação (só se separam com JavaScript) */
.form-progresso { display: none; }
.passos-ligados .form-progresso { display: block; margin-bottom: 24px; }
.form-progresso p { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pedra); margin-bottom: 10px; }
.form-progresso div { display: flex; gap: 6px; }
.form-progresso span { flex: 1; height: 2px; background: var(--linha); position: relative; overflow: hidden; }
.form-progresso span::after { content: ""; position: absolute; inset: 0; background: var(--champanhe); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.form-progresso span.feito::after { transform: none; }
.form-passo { display: grid; gap: 20px; border: 0; min-width: 0; }
.form-passo + .form-passo { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--linha); }
.form-passo legend { font-family: var(--titulo); font-size: 1.7rem; color: var(--grafite); margin-bottom: 4px; padding: 0; }
.form-navega { display: none; }
.passos-ligados .form-passo + .form-passo { margin-top: 0; padding-top: 0; border-top: 0; }
.passos-ligados .form-passo:not(.ativo) { display: none; }
.passos-ligados .form-navega { display: flex; gap: 10px; }
.passos-ligados .form-navega .btn { flex: 1; width: auto; }
.passos-ligados .form-navega .btn-linha { color: var(--grafite); flex: 0 0 auto; }
.passos-ligados .so-sem-passos { display: none; }

.lista-check { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.lista-check li { display: flex; gap: 12px; align-items: center; }
.lista-check svg { width: 20px; height: 20px; flex: none; color: var(--champanhe); }

/* ---------- Imóveis ---------- */
.filtros { margin-bottom: 30px; }
.imoveis-lista { display: grid; gap: 18px; }
.imovel { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.imovel:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -40px rgba(29, 29, 33, .45); }
.imovel[hidden] { display: none; }
.imovel-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.imovel-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.imovel:hover .imovel-foto img { transform: scale(1.08); }
.imovel-etiqueta { position: absolute; top: 14px; left: 14px; padding: 6px 12px; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; background: rgba(29, 29, 33, .78); color: #fff; border-radius: 999px; }
.imovel-corpo { display: flex; flex-direction: column; gap: 8px; padding: 22px; flex: 1; }
.imovel-local { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--champanhe); }
.imovel h3 { font-size: 1.5rem; }
.imovel-dados { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem; color: var(--pedra); }
.imovel-preco { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); font-family: var(--titulo); font-size: 1.45rem; color: var(--grafite); }

/* ---------- Testemunhos ---------- */
.testemunhos-grelha { display: grid; gap: 14px; }
.testemunho { padding: 30px 26px; border: 1px solid var(--linha-clara); border-radius: var(--raio); }
.testemunho .estrelas { color: var(--champanhe-claro); letter-spacing: .2em; margin-bottom: 14px; }
.testemunho blockquote { font-family: var(--titulo); font-size: 1.35rem; line-height: 1.4; color: #fff; margin-bottom: 18px; }
.testemunho figcaption { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

/* ---------- Ecrãs maiores (páginas interiores) ---------- */
@media (min-width: 640px) {
  .docs, .cartoes, .imoveis-lista, .testemunhos-grelha, .grelha-itens { grid-template-columns: 1fr 1fr; }
  .form-cartao { padding: 38px 34px; }
  .chamada .wrap { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 980px) {
  .topo-conteudo { padding-bottom: 72px; }
  .topo-sobre .topo-conteudo { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 80px; padding-bottom: 100px; }
  .topo-sobre-retrato { width: 100%; max-width: 420px; justify-self: end; }
  .metodo-grelha { grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; }
  .metodo-lado { position: sticky; top: 130px; }
  .metodo-contador { display: flex; align-items: baseline; gap: 12px; margin-top: 40px; font-family: var(--titulo); color: var(--champanhe); }
  .metodo-contador b { font-weight: 400; font-size: 7rem; line-height: 1; }
  .metodo-contador span { font-size: 1.6rem; font-style: italic; color: var(--pedra); }
  .metodo-passo { padding: 40px 0 40px 80px; }
  .metodo-passo .num { top: 38px; width: 50px; height: 50px; font-size: 1.2rem; }
  .docs { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .duo { grid-template-columns: .85fr 1.15fr; gap: 100px; }
  .duo-direita { grid-template-columns: 1.15fr .85fr; }
  .duo-direita .duo-img { order: 2; justify-self: end; }
  .cartoes { grid-template-columns: repeat(var(--colunas, 3), 1fr); gap: 16px; }
  .grelha-itens { grid-template-columns: repeat(3, 1fr); }
  .imoveis-lista { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .form-grelha { grid-template-columns: .9fr 1.1fr; gap: 80px; }
  .form-grelha > div:first-child { position: sticky; top: 130px; }
  .chamada { padding: 90px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .metodo-passo:not(.aceso) { opacity: 1 !important; }
  .form-ok svg path { stroke-dashoffset: 0; }
}

/* =========================================================================
   Alterações de 6 out 2026 (reunião com a Tanya): passos de vender na horizontal,
   destaque à RE/MAX Collection com o diploma, imóveis vendidos e WhatsApp flutuante.
   ========================================================================= */

/* ---------- Faixa que desliza com o dedo no telemóvel e fica em linha no computador ---------- */
.deslizar { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 4px 20px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.deslizar::-webkit-scrollbar { display: none; }
.deslizar > * { scroll-snap-align: start; min-width: 0; }
.deslizar-rodape { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.deslizar-conta { flex: none; min-width: 4.4em; font-family: var(--titulo); font-style: italic; font-size: 1.05rem; color: var(--champanhe); }
.deslizar-barra { position: relative; flex: 1; height: 1px; background: var(--linha); overflow: hidden; }
.deslizar-barra span { position: absolute; inset: 0; background: var(--champanhe); transform-origin: 0 50%; transform: scaleX(.2); transition: transform .4s var(--ease); }
.deslizar-seta { display: none; }
@media (min-width: 640px) { .deslizar-seta { display: grid; } }
.deslizar-seta { flex: none; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha); background: var(--papel); color: var(--grafite); transition: background .35s, color .35s, border-color .35s, opacity .35s; }
.deslizar-seta svg { width: 16px; height: 16px; }
.deslizar-seta:hover { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.deslizar-seta:disabled { opacity: .35; pointer-events: none; }

/* ---------- Os cinco passos de vender ---------- */
.passo-h { display: flex; flex-direction: column; padding: 26px 22px 28px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); transition: border-color .5s var(--ease); }
.passo-h .num { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 50%; border: 1px solid var(--champanhe); font-family: var(--titulo); font-style: italic; font-size: 1.1rem; color: var(--champanhe); transition: background .5s var(--ease), color .5s; }
.passo-h.aceso { border-color: var(--champanhe-claro); }
.passo-h.aceso .num { background: var(--champanhe); color: #fff; }
.passo-h h3 { font-size: 1.45rem; margin-bottom: 10px; }
.passo-h p { font-size: .95rem; }

/* ---------- RE/MAX Collection em destaque, com o diploma ---------- */
.collection { position: relative; isolation: isolate; }
.collection-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.collection-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.collection-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--grafite) 0%, rgba(29, 29, 33, .7) 45%, var(--grafite) 100%); }
.collection h2 { font-size: clamp(2.5rem, 8.6vw, 4.8rem); max-width: 11em; }
.collection-grelha { display: grid; gap: 46px; margin-top: 34px; align-items: center; }
.collection .btn { margin-top: 28px; }
.collection-exclusivo { margin-top: 22px; padding-left: 16px; border-left: 1px solid var(--champanhe); font-size: .95rem; max-width: 34em; color: rgba(255, 255, 255, .82); }
.collection-exclusivo b { font-weight: 500; color: var(--champanhe-claro); }
.diploma { margin: 0; }
.diploma-moldura { position: relative; aspect-ratio: 1.414 / 1; padding: 14px; background: linear-gradient(145deg, #2C2B30, #141417); border: 1px solid var(--champanhe); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9); }
.diploma-moldura::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(217, 196, 163, .3); pointer-events: none; }
.diploma-moldura > img { width: 100%; height: 100%; object-fit: contain; background: var(--papel); }
.diploma-vazio { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; background: radial-gradient(circle at 50% 40%, #FFFFFF, var(--marfim) 70%); color: var(--grafite); }
.diploma-vazio small { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--champanhe); }
.diploma-vazio b { font-family: var(--titulo); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1; }
.diploma-vazio i { width: 46px; height: 1px; background: var(--champanhe); }
.diploma-vazio > span { font-family: var(--titulo); font-size: 1.05rem; }
.diploma-vazio .diploma-aviso { margin-top: 6px; font-family: var(--corpo); font-size: .7rem; letter-spacing: .06em; color: #6B5300; background: rgba(251, 191, 36, .22); border: 1px dashed rgba(200, 145, 10, .7); border-radius: 999px; padding: 4px 12px; }
.diploma figcaption { margin-top: 18px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--champanhe-claro); }
.diploma-retrato .diploma-moldura { aspect-ratio: 1 / 1; }
.diploma-retrato .diploma-moldura > img { object-fit: cover; background: #14213D; }
/* A fotografia da entrega do diploma (21 out 2026): vertical, 4:5, sem cortar o diploma. */
.diploma-foto { width: 100%; max-width: 440px; justify-self: center; }
.diploma-foto .diploma-moldura { aspect-ratio: 4 / 5; }
.diploma-foto .diploma-moldura > img { object-fit: cover; background: #14213D; }
.collection-logo { display: block; width: min(240px, 62vw); height: auto; margin-bottom: 26px; }
.reconhecimento-foto { margin: 30px 0 0; max-width: 300px; }
.reconhecimento-foto img { width: 100%; height: auto; border-radius: var(--raio); box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .55); }
.reconhecimento-foto figcaption { margin-top: 12px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--champanhe); }
.testemunhos-grelha.um { grid-template-columns: 1fr; max-width: 860px; }
.testemunho .testemunho-longo { font-size: 1.12rem; line-height: 1.55; }
.testemunho .testemunho-longo p + p { margin-top: 12px; }

/* ---------- Imóveis vendidos (vender) ---------- */
.vendido { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.vendido-foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #EEE8DE 0 14px, #E7E0D4 14px 28px); }
.vendido-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vendido-provisoria { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pedra); }
.vendido-provisoria svg { width: 34px; height: 34px; color: var(--champanhe); }
.vendido-provisoria span { padding: 5px 12px; background: rgba(251, 191, 36, .25); border: 1px dashed rgba(200, 145, 10, .8); border-radius: 999px; color: #6B5300; }
.vendido-etiqueta { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 13px; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; background: var(--grafite); color: var(--champanhe-claro); border-radius: 999px; }
.vendido-corpo { display: grid; gap: 6px; padding: 20px 22px 24px; }
.vendido-zona { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--champanhe); }
.vendido h3 { font-size: 1.4rem; }

/* ---------- Ligação dentro do texto ---------- */
.ligacao { color: var(--champanhe); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font-weight: 500; }
.seccao-escura .ligacao { color: var(--champanhe-claro); }
.ligacao:hover { color: var(--grafite); }
.seccao-escura .ligacao:hover { color: #fff; }

/* ---------- WhatsApp flutuante (todas as páginas) ---------- */
.wa-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--grafite); color: #25D366; border: 1px solid rgba(217, 196, 163, .55); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); transition: transform .5s var(--ease), background .35s, color .35s, border-color .35s, opacity .35s; }
.wa-flutuante svg { width: 28px; height: 28px; }
.wa-flutuante:hover { background: #25D366; color: #fff; border-color: #25D366; }
.barra-visivel .wa-flutuante { transform: translateY(-70px); }
.menu-aberto .wa-flutuante { opacity: 0; pointer-events: none; }

@media (min-width: 640px) {
  .deslizar { grid-auto-columns: 46%; margin: 0 -32px; padding: 4px 32px 10px; scroll-padding: 0 32px; }
}
@media (min-width: 980px) {
  .deslizar { grid-auto-flow: row; grid-template-columns: repeat(var(--colunas, 5), 1fr); gap: 16px; overflow: visible; margin: 0; padding: 0; }
  .deslizar-rodape { display: none; }
  /* Os vendidos ficam em carrossel também no computador: três de cada vez, com setas e contador. */
  .deslizar.sempre { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 32px) / 3); overflow-x: auto; padding: 4px 0 10px; scroll-padding: 0; }
  .deslizar.sempre + .deslizar-rodape { display: flex; margin-top: 22px; }
  .passo-h { padding: 26px 20px 30px; }
  .passo-h h3 { font-size: 1.32rem; }
  .passo-h p { font-size: .92rem; }
  .collection-grelha { grid-template-columns: 1fr 1.05fr; gap: 90px; }
  .wa-flutuante { right: 28px; bottom: 28px; width: 60px; height: 60px; }
  .barra-visivel .wa-flutuante { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .passo-h .num { background: var(--champanhe); color: #fff; }
}

/* ---------- Formulários a sério (21 out 2026): consentimento RGPD, campo armadilha e aviso de erro ---------- */
.campo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo-consentimento { grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; }
.campo-consentimento input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; padding: 0; border: 1px solid var(--pedra); border-radius: 3px; accent-color: var(--grafite); -webkit-appearance: auto; appearance: auto; cursor: pointer; }
.campo-consentimento label { font-size: .86rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--texto); cursor: pointer; }
.campo-consentimento label a { color: var(--grafite); text-decoration: underline; text-underline-offset: 3px; }
.campo-consentimento .erro { grid-column: 1 / -1; }
.form-estado { font-size: .86rem; color: #B4532A; }
.form-estado:empty { display: none; }
.form-estado a { color: var(--grafite); text-decoration: underline; text-underline-offset: 3px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 14px; font-size: .78rem; }
.rodape-links a { color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 3px; }
.rodape-links a:hover { color: #fff; }