/* Cartão digital — modelo para consultores
   Cores vêm do dados.json (fundo + destaque) · mobile-first, coluna de 480px no desktop */

/* Fontes auto-alojadas (só o subconjunto latin, que cobre o português). */
@font-face{font-family:'Montserrat Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(./fonts/montserrat-latin-wght-normal.woff2) format('woff2-variations')}
@font-face{font-family:'Playfair Display Variable';font-style:normal;font-display:swap;font-weight:400 900;
  src:url(./fonts/playfair-display-latin-wght-normal.woff2) format('woff2-variations')}

:root{
  /* Diz ao browser que a página é escura: o popup nativo do select, as
     barras de deslocamento e os controlos passam a usar o tema escuro. */
  color-scheme:dark;

  --navy:#0B1424;
  --ouro:#3579B5;
  --ouro-claro:color-mix(in srgb,var(--ouro) 75%,#fff);
  --texto:#F4F2ED;
  --suave:color-mix(in srgb,#fff 68%,var(--navy));
  --linha:color-mix(in srgb,var(--ouro) 28%,transparent);
  --linha-fina:rgba(255,255,255,.08);
  --raio:14px;
  --titulo:#fff;
  --ouro-texto:var(--ouro);          /* dourado usado como cor de texto */
  --btn-ouro-texto:color-mix(in srgb,var(--navy) 90%,#000);
  --btn-linha:rgba(255,255,255,.045);
  --campo:rgba(255,255,255,.05);
  --campo-borda:rgba(255,255,255,.14);
  --serif:'Playfair Display Variable','Playfair Display',Georgia,serif;
  --sans:'Montserrat Variable',Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* O atributo hidden tem de ganhar aos display:grid/flex definidos abaixo */
[hidden]{display:none!important}

body{
  margin:0;
  background:radial-gradient(130% 55% at 50% 0,color-mix(in srgb,var(--navy) 88%,#fff) 0%,var(--navy) 58%) no-repeat var(--navy);
  color:var(--texto);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.cartao{max-width:480px;margin:0 auto;padding:34px 20px 44px}

h1,h2{font-family:var(--serif);font-weight:600;color:var(--titulo);margin:0}
a{color:var(--ouro-texto)}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:6px}

/* ---------- 1. Topo ---------- */
.topo{text-align:center}
/* O logotipo fecha o cartão, por cima do rodapé, em tamanho que se lê (pedido do Sérgio, 2026-10-22). */
.logo{display:block;max-width:240px;max-height:120px;margin:6px auto 24px;object-fit:contain}
.retrato{
  width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:2px solid var(--ouro);
  box-shadow:0 12px 34px rgba(0,0,0,.42);
}
.topo h1{font-size:36px;line-height:1.1;letter-spacing:.01em;margin:20px 0 8px}
.funcao{
  margin:0 0 14px;color:var(--ouro-texto);
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.agencia,.zona{margin:3px 0;color:var(--suave);font-size:14px}
.logo-topo{display:block;width:150px;height:auto;margin:10px auto 2px}
.zona{font-size:13.5px}
.mote{
  margin:22px 0 0;padding-top:22px;border-top:1px solid var(--linha);
  font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--titulo);
}

/* ---------- 2. Botões ---------- */
.acoes{display:grid;gap:12px;margin:30px 0 4px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;padding:14px 18px;
  border:1px solid transparent;border-radius:var(--raio);
  font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .12s ease,filter .12s ease;
}
.btn-ouro{
  --b:var(--botao,var(--ouro));  /* --botao: a "cor dos botões" escolhida, posta pelo build no <html> */
  background:linear-gradient(180deg,color-mix(in srgb,var(--b) 85%,#fff),var(--b));color:var(--botao-texto,var(--btn-ouro-texto));
  box-shadow:0 8px 22px color-mix(in srgb,var(--b) 20%,transparent);
}
.btn-linha{background:var(--btn-linha);border-color:var(--linha);color:var(--texto)}
.btn .ic{flex:0 0 20px;width:20px;height:20px}
.btn:active{transform:translateY(1px)}
.btn:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.55;cursor:progress}

/* ---------- Blocos ---------- */
.bloco{margin-top:42px;padding-top:34px;border-top:1px solid var(--linha-fina)}
.bloco h2{font-size:27px;line-height:1.2;text-align:center}
.bloco h2::after{
  content:"";display:block;width:34px;height:1px;margin:14px auto 0;background:var(--ouro);
}
.sub{margin:14px 0 20px;text-align:center;color:var(--suave);font-size:15px}

/* ---------- 3/4. Formulários ---------- */
form{display:grid;gap:2px}
label{margin-top:14px;font-size:13px;color:var(--suave)}
input,select{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--campo-borda);border-radius:10px;
  background:var(--campo);color:var(--texto);
  font:400 16px var(--sans); /* 16px evita o zoom automático no iPhone */
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233579B5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
/* No Windows o popup do select abre branco e herda a cor clara do campo —
   as opções ficavam texto branco sobre branco. Forçar as duas cores. */
select option{background-color:var(--navy);color:var(--texto)}

input::placeholder{color:color-mix(in srgb,var(--suave) 50%,transparent)}
input:focus,select:focus{
  border-color:var(--ouro);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ouro) 20%,transparent);
}
input:user-invalid{border-color:#E2725B}

.rgpd{display:flex;gap:11px;align-items:flex-start;margin:20px 0 4px;font-size:13.5px;line-height:1.5;color:var(--suave)}
.rgpd input{flex:0 0 22px;width:22px;height:22px;min-height:22px;margin:2px 0 0;accent-color:var(--ouro)}
form .btn{margin-top:22px}
.bloco > .btn + .btn{margin-top:12px}
.erro{margin:12px 0 0;color:#F3A9A0;font-size:14px}
.mel{position:absolute;left:-9999px}           /* honeypot anti-spam */

.sucesso{
  padding:22px 20px;text-align:center;
  border:1px solid var(--linha);border-radius:var(--raio);
  background:color-mix(in srgb,var(--ouro) 7%,transparent);
}
.sucesso p{margin:0 0 16px;font-size:15px;color:var(--texto)}

/* ---------- Premium: números, vídeo, crédito, testemunhos ---------- */
.numeros{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 0;padding:0}
.numeros li{display:grid;gap:2px;padding:12px 4px;border:1px solid var(--linha);border-radius:12px}
.numeros strong{font:600 24px/1.1 var(--serif);color:var(--titulo)}
.numeros span{font-size:12px;line-height:1.3;color:var(--suave)}
.video{position:relative;aspect-ratio:16/9;margin-top:20px;border-radius:var(--raio);overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.calc{display:grid;gap:2px}
.resultado{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 0;padding:16px 18px;
  border:1px solid var(--linha);border-radius:var(--raio);color:var(--suave);font-size:14px}
.resultado strong{font:600 28px var(--serif);color:var(--titulo)}
.nota-calc{margin:8px 0 0;font-size:12px;color:var(--suave)}
.calc .btn{margin-top:18px}
.testemunhos{display:grid;gap:12px;margin-top:20px}
.testemunhos figure{margin:0;padding:18px;border:1px solid var(--linha);border-radius:var(--raio)}
.testemunhos blockquote{margin:0;font-size:15px;line-height:1.55}
.testemunhos figcaption{margin-top:10px;font-size:13px;font-weight:600;color:var(--ouro-texto)}
.claro .numeros li,.claro .testemunhos figure,.claro .resultado{background:#fff;border-color:var(--ouro-linha)}

/* ---------- Imóveis em destaque (Premium) ---------- */
/* Desenho da app Sado: galeria a deslizar com o dedo (scroll-snap, setas por cima para o rato),
   preço grande, título em duas linhas, e a tira com área, quartos e casas de banho. */
.imoveis{display:grid;gap:16px;margin-top:20px}
.imovel{border-radius:var(--raio);overflow:hidden;background:var(--btn-linha);border:1px solid var(--linha);
  box-shadow:0 6px 18px rgba(0,0,0,.18)}
.imovel-moldura{position:relative}
.imovel-fotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;background:rgba(0,0,0,.2)}
.imovel-fotos::-webkit-scrollbar{display:none}
.imovel-fotos > a{flex:0 0 100%;scroll-snap-align:start;display:block}
.imovel-fotos img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.imovel-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:32px;height:44px;border:0;border-radius:10px;
  background:rgba(18,18,18,.45);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.imovel-seta:hover{background:rgba(18,18,18,.72)}
.imovel-seta.esq{left:8px}
.imovel-seta.dir{right:8px}
.imovel-info{padding:14px 16px 10px}
.preco-imovel{margin:0;font:800 26px/1.1 var(--sans);letter-spacing:-.02em;color:var(--titulo);white-space:nowrap}
.imovel h3{margin:6px 0 0;font:500 15px/1.35 var(--sans);color:var(--suave);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.imovel-tira{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 16px;font-size:13px;
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.imovel-tira .genero{font-weight:700;color:var(--titulo)}
.imovel-tira .numeros{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;color:var(--suave)}
.imovel-tira .numeros span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.imovel-tira svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.imovel .imovel-ver{width:auto;margin:12px 16px 16px;min-height:46px}
.claro .imovel{background:#fff;border-color:var(--ouro-linha);box-shadow:0 6px 18px rgba(18,18,18,.08)}
.claro .imovel-tira{border-color:var(--ouro-linha)}

/* ---------- Botão PT|EN (Premium) ---------- */
.cartao{position:relative}
.botao-lingua{position:absolute;top:14px;right:14px;z-index:2;min-width:44px;min-height:32px;padding:4px 10px;
  border:1px solid var(--linha);border-radius:999px;background:var(--btn-linha);color:var(--texto);
  font:600 13px var(--sans);letter-spacing:.06em;cursor:pointer}

/* ---------- 8. Redes ---------- */
.lista-redes{list-style:none;margin:0;padding:0}
.lista-redes a{
  display:flex;align-items:center;min-height:52px;
  border-bottom:1px solid var(--linha-fina);
  color:var(--texto);text-decoration:none;font-size:15px;
}
.lista-redes a:hover{color:var(--ouro-texto)}
.lista-redes .ic{flex:0 0 20px;width:20px;height:20px;margin-right:12px;color:var(--ouro-texto)}

/* ---------- 9. Rodapé ---------- */
.rodape{margin-top:46px;padding-top:26px;border-top:1px solid var(--linha-fina);text-align:center;font-size:13px;color:var(--suave)}
.rodape p{margin:6px 0}
.nota{font-size:11.5px;opacity:.72}

/* ---------- Toast (fallback da partilha) ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  padding:12px 20px;border-radius:999px;
  background:#fff;color:var(--navy);font:600 14px var(--sans);
  box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:9;
}

/* ---------- Páginas de texto (privacidade, qr) ---------- */
.legal{text-align:left}
.legal h1{font-size:30px;text-align:center;margin-bottom:6px}
.legal h2{font-size:21px;text-align:left;margin:30px 0 8px}
.legal h2::after{display:none}
.legal p,.legal li{color:var(--suave);font-size:15px}
.legal ul{padding-left:20px}
.legal .data{text-align:center;font-size:13px}

/* ---------- Tema claro — CENTURY 21 (por omissão nos consultores) ----------
   Como o site century21.pt: fundo branco, texto #121212, dourado #BEAF87 e letra
   Barlow (a Typold da marca é paga; a Barlow é a alternativa livre que o site também usa).
   Sobre branco o dourado não se lê como texto: aí usa-se #7A6A42. */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(./fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(./fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(./fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:500;font-display:swap;src:url(./fonts/barlow-semi-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:600;font-display:swap;src:url(./fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2')}
.claro{
  color-scheme:light;
  --serif:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --navy:#FFFFFF;
  --texto:#121212;
  --titulo:#121212;
  --suave:#6B6B6B;
  --ouro-texto:color-mix(in srgb,var(--ouro) 55%,#000);
  --btn-ouro-texto:#121212;
  --btn-linha:#fff;
  --campo:#fff;
  --campo-borda:#E2E2E3;
  --linha:#E5E5E5;
  --linha-fina:#EDEDED;
  --ouro-linha:color-mix(in srgb,var(--ouro) 28%,#fff);
  --ouro-fundo:color-mix(in srgb,var(--ouro) 6%,#fff);
}
.claro body{background:var(--navy);font-size:17px}
.claro .topo h1{font-size:38px;letter-spacing:0}
.claro .funcao{letter-spacing:.2em}
.claro .mote{font-family:var(--sans);font-weight:500;font-size:19px;border-top-color:var(--linha)}
.claro .retrato{box-shadow:0 10px 30px rgba(18,18,18,.12)}
.claro .btn{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.01em}
.claro .btn-ouro{background:var(--b);box-shadow:none}
.claro .btn-linha{border-color:var(--linha)}
.claro .bloco h2{font-size:28px}
.claro .sucesso{background:var(--ouro-fundo);border-color:var(--ouro-linha)}
.claro .toast{background:#121212;color:#fff}
.claro .legal h1,.claro .legal h2{color:var(--titulo)}

/* Tons de branco em camadas + tira dourada à volta do cartão:
   fundo branco-pérola → cartão branco com moldura dourada (tira + fio fino por dentro)
   → secções num branco quente. */
.claro body{background:color-mix(in srgb,var(--ouro) 12%,#fff);padding:12px}
.claro .cartao{
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFCF9 100%);
  border-radius:24px;box-shadow:0 18px 40px rgba(18,18,18,.08);
  padding:30px 18px 34px;
}
.claro .topo{padding:6px 4px 0}
.claro .bloco{
  background:var(--ouro-fundo);border:1px solid var(--ouro-linha);border-radius:18px;
  margin-top:20px;padding:26px 16px 22px;
}
.claro .btn-linha{background:#FDFCFA}
.claro .campo,.claro input,.claro select{background:#FFFFFF}
.claro .lista-redes a{border-bottom-color:var(--ouro-linha)}
.claro .rodape{border-top-color:var(--ouro-linha)}

/* ---------- Molduras (classe no <html>; por omissão: larga no claro, sem no escuro) ----------
   A cor é a do cartão, ou a escolhida em "corMoldura" (variável --moldura, posta pelo build no <html>). */
html{--cor-moldura:var(--moldura,var(--ouro))}
.moldura-dourada .cartao{border:4px solid var(--cor-moldura);border-radius:24px;
  box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 6px color-mix(in srgb,var(--cor-moldura) 45%,var(--navy)),0 18px 40px rgba(18,18,18,.08)}
.moldura-fina .cartao{border:1px solid var(--cor-moldura);border-radius:24px}
.moldura-dupla .cartao{border:3px double var(--cor-moldura);border-radius:6px;outline:1px solid color-mix(in srgb,var(--cor-moldura) 40%,transparent);outline-offset:5px}
.escuro:is(.moldura-dourada,.moldura-fina,.moldura-dupla) body{padding:14px}
.claro.moldura-dourada .cartao{box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px color-mix(in srgb,var(--cor-moldura) 30%,#fff),0 18px 40px rgba(18,18,18,.08)}

/* ---------- Tipos de letra (html.letra-x ganha ao .claro) ---------- */
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-display:swap;src:url(./fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-display:swap;src:url(./fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
html.letra-moderna{--serif:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;--sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif}
html.letra-classica{--serif:'Playfair Display Variable','Playfair Display',Georgia,serif;--sans:'Montserrat Variable',Montserrat,system-ui,sans-serif}
html.letra-elegante{--serif:'Cormorant Garamond',Georgia,serif;--sans:'Montserrat Variable',Montserrat,system-ui,sans-serif}
html.letra-simples{--serif:'Montserrat Variable',Montserrat,system-ui,sans-serif;--sans:'Montserrat Variable',Montserrat,system-ui,sans-serif}
html.letra-elegante .topo h1{font-size:44px}
html.letra-elegante .bloco h2{font-size:32px}
html.letra-simples h1,html.letra-simples h2{font-weight:700;letter-spacing:-.01em}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url(./fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url(./fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';font-weight:400;font-display:swap;src:url(./fonts/dm-serif-display-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Dancing Script';font-weight:600;font-display:swap;src:url(./fonts/dancing-script-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(./fonts/oswald-latin-500-normal.woff2) format('woff2')}
html.letra-geometrica{--serif:'Poppins',system-ui,sans-serif;--sans:'Poppins',system-ui,sans-serif}
html.letra-geometrica body{font-size:15.5px}
html.letra-editorial{--serif:'DM Serif Display',Georgia,serif;--sans:'Barlow',system-ui,sans-serif}
html.letra-editorial h1,html.letra-editorial h2{font-weight:400}
/* Manuscrita: só o nome em letra de assinatura; os títulos ficam legíveis (Playfair). */
html.letra-manuscrita{--serif:'Playfair Display Variable','Playfair Display',Georgia,serif;--sans:'Montserrat Variable',Montserrat,system-ui,sans-serif}
html.letra-manuscrita .topo h1{font-family:'Dancing Script',cursive;font-size:50px;font-weight:600}
html.letra-impacto{--serif:'Oswald','Barlow Semi Condensed',sans-serif;--sans:'Barlow',system-ui,sans-serif}
html.letra-impacto h1,html.letra-impacto h2{font-weight:500;text-transform:uppercase;letter-spacing:.02em}

/* ---------- Formatos do topo (classe no <html>; por omissão: clássico, foto redonda ao centro) ---------- */
html.formato-capa .retrato{width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--raio);border:0}
html.formato-quadrado .retrato{width:150px;height:150px;border-radius:22px}
/* Lado a lado: foto à esquerda a ocupar duas linhas (nome e função), o resto por baixo, alinhado à esquerda. */
html.formato-lado .topo{display:grid;grid-template-columns:96px 1fr;column-gap:16px;align-items:center;text-align:left}
html.formato-lado .topo > *{grid-column:1 / -1}
html.formato-lado .topo .retrato{grid-column:1;grid-row:span 2;width:96px;height:96px}
html.formato-lado .topo h1{grid-column:2;margin:0;font-size:30px;align-self:end}
html.formato-lado .topo .funcao{grid-column:2;margin:6px 0 0;align-self:start}
html.formato-lado .topo .agencia{margin-top:16px}
html.formato-lado.letra-manuscrita .topo h1{font-size:38px}

/* ---------- Premium: os quatro extras de design (2026-10-22) ---------- */

/* Formato Imóvel: a capa é o imóvel mais recente dele, e a foto dele fica por cima, a meio da margem. */
.capa-imovel{display:block;position:relative;border-radius:var(--raio);overflow:hidden;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.25)}
.capa-imovel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.capa-etiqueta{position:absolute;top:10px;left:10px;padding:6px 11px;border-radius:999px;
  background:rgba(0,0,0,.6);color:#fff;font:600 12px/1.2 var(--sans);letter-spacing:.02em}
html.formato-imovel .retrato{position:relative;width:104px;height:104px;margin-top:-52px}

/* Fotografia da zona por trás do topo, a desvanecer na cor do cartão para o nome continuar a ler-se. */
html.com-zona .cartao{position:relative;overflow:hidden}
/* Máscara e não um degradê para a cor do cartão: no escuro o fundo da página também é um degradê, e
   acabar numa cor lisa deixava um corte a direito à altura da agência. */
.zona-fundo{position:absolute;top:0;left:0;right:0;height:340px;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 25%,transparent),
    color-mix(in srgb,var(--navy) 70%,transparent)),url(./zona.jpg) center/cover;
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
html.com-zona .topo{position:relative}

/* A assinatura: na letra Manuscrita o nome desenha-se da esquerda para a direita, uma vez.
   fit-content para a "caneta" começar na primeira letra e não no espaço vazio à esquerda. */
html.assina .topo h1{width:fit-content;margin-left:auto;margin-right:auto;
  animation:assinar 2.6s cubic-bezier(.45,.05,.3,1) .3s both}
html.assina.formato-lado .topo h1{margin-left:0}
@keyframes assinar{from{clip-path:inset(-25% 100% -25% -5%)}to{clip-path:inset(-25% -5% -25% -5%)}}

/* Entrada animada (Premium): o cartão abre logo, sem nada à frente, e aparece por partes em ~1 s —
   a foto surge, o nome aparece (ou escreve-se, na Manuscrita), o resto sobe e os botões entram um a um.
   Substituiu o cartão de papel (2026-10-22), que tapava o cartão e pedia dois toques antes do Ligar. */
@keyframes surgir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes foto-entra{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
html.entrada .retrato,html.entrada .capa-imovel{animation:foto-entra .6s cubic-bezier(.2,.8,.2,1) both}
html.entrada:not(.assina) .topo h1{animation:surgir .5s ease .15s both}
html.entrada .topo > :not(.retrato):not(h1):not(.capa-imovel){animation:surgir .5s ease .3s both}
html.entrada .acoes > *{animation:surgir .45s ease both}
html.entrada .acoes > :nth-child(1){animation-delay:.45s}
html.entrada .acoes > :nth-child(2){animation-delay:.52s}
html.entrada .acoes > :nth-child(3){animation-delay:.59s}
html.entrada .acoes > :nth-child(4){animation-delay:.66s}
html.entrada .acoes > :nth-child(5){animation-delay:.73s}

/* Efeito (Premium, campo "efeito"). Substituiu o "brilho" (2026-10-23): um reflexo branco numa moldura de
   5px não se via no telemóvel, sobretudo nos cartões claros. Os três são na cor da moldura, que contrasta sempre. */
/* Luz na moldura: um cometa de luz dá a volta ao cartão, sem parar. Só na moldura (a máscara corta o miolo).
   A volta é à roda do topo (at 50% 260px) e não do meio: o cartão tem ~3000px e o cometa passava quase todo fora do ecrã;
   e são três cometas (repeating-conic, um a cada 120°), para haver sempre luz à vista. */
@property --volta{syntax:'<angle>';inherits:false;initial-value:0deg}
html.efeito-luz .cartao{position:relative}
html.efeito-luz .cartao::after{content:"";position:absolute;inset:-5px;padding:5px;border-radius:inherit;pointer-events:none;z-index:3;
  --luz:color-mix(in srgb,var(--cor-moldura) 45%,#fff);
  background:repeating-conic-gradient(from var(--volta) at 50% 260px,transparent 0deg 62deg,
    color-mix(in srgb,var(--cor-moldura) 80%,transparent) 96deg,var(--luz) 112deg,#fff 117deg,transparent 119deg 120deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 4px var(--cor-moldura)) drop-shadow(0 0 10px var(--cor-moldura));animation:volta 9s linear infinite}
/* No cartão claro, luz branca sobre fundo branco não se via: o cometa é a cor da moldura, mais forte. */
html.claro.efeito-luz .cartao::after{--luz:color-mix(in srgb,var(--cor-moldura) 70%,#000)}
@keyframes volta{to{--volta:360deg}}
/* Sem moldura, ou com a fotografia da zona (overflow:hidden corta tudo o que sai), a luz corre por dentro da borda. */
html.efeito-luz:is(.moldura-sem,.com-zona) .cartao::after{inset:0}
/* Nome metálico: o nome em folha metálica na cor do cartão, com um reflexo que o atravessa. */
html.efeito-metal .topo h1{
  --metal:var(--ouro);
  background:linear-gradient(105deg,color-mix(in srgb,var(--metal) 55%,#000) 0%,var(--metal) 30%,color-mix(in srgb,var(--metal) 25%,#fff) 46%,
    var(--metal) 58%,color-mix(in srgb,var(--metal) 55%,#000) 100%) 0 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:metal 4.5s ease-in-out infinite}
/* No cartão claro o destaque é claro de mais para letra: vai-se ao tom de texto, mais escuro. */
html.claro.efeito-metal .topo h1{--metal:color-mix(in srgb,var(--ouro) 60%,#000)}
html.efeito-metal.entrada:not(.assina) .topo h1{animation:surgir .5s ease .15s both,metal 4.5s ease-in-out infinite}
html.efeito-metal.assina .topo h1{animation:assinar 2.6s cubic-bezier(.45,.05,.3,1) .3s both,metal 4.5s ease-in-out 3s infinite}
@keyframes metal{0%,100%{background-position:100% 0}50%{background-position:0 0}}
/* Halo na foto: a fotografia larga ondas de luz suaves, como um sinal. */
html.efeito-halo :is(.retrato,.capa-imovel){animation:halo 2.8s ease-out infinite}
html.efeito-halo.entrada :is(.retrato,.capa-imovel){animation:foto-entra .6s cubic-bezier(.2,.8,.2,1) both,halo 2.8s ease-out .6s infinite}
@keyframes halo{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cor-moldura) 70%,transparent),0 0 18px 2px color-mix(in srgb,var(--cor-moldura) 45%,transparent)}
  70%,100%{box-shadow:0 0 0 22px transparent,0 0 18px 2px color-mix(in srgb,var(--cor-moldura) 45%,transparent)}}
/* Reflexo nos botões: um brilho atravessa o Ligar e depois o WhatsApp, e chama o dedo para lá. */
html.efeito-botoes .acoes .btn-ouro{position:relative}
/* border-radius:inherit e não overflow:hidden no botão: esse cortava a onda do "Halo nos botões" quando vão juntos. */
html.efeito-botoes .acoes .btn-ouro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) 0 0/250% 100% no-repeat;
  animation:reflexo 4s ease-in-out 1s infinite}
html.efeito-botoes .acoes .btn-ouro + .btn-ouro::after{animation-delay:1.35s}
@keyframes reflexo{0%{background-position:150% 0}30%,100%{background-position:-60% 0}}
/* Halo nos botões: a onda de luz desce por todos os botões, um a seguir ao outro, na cor dos botões.
   Num ::before (e não no botão) para não chocar com a entrada animada, que anima o próprio botão. */
html.efeito-ondas .acoes > .btn{position:relative}
html.efeito-ondas .acoes > .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  --o:var(--b,var(--botao,var(--ouro)));animation:ondas 4s ease-out calc(1s + var(--i,0) * .35s) infinite}
html.efeito-ondas .acoes > :nth-child(2){--i:1}
html.efeito-ondas .acoes > :nth-child(3){--i:2}
html.efeito-ondas .acoes > :nth-child(4){--i:3}
html.efeito-ondas .acoes > :nth-child(5){--i:4}
html.efeito-ondas .acoes > :nth-child(6){--i:5}
@keyframes ondas{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--o) 65%,transparent),0 0 14px 1px color-mix(in srgb,var(--o) 35%,transparent)}
  45%,100%{box-shadow:0 0 0 14px transparent,0 0 14px 1px transparent}}
/* Pó de estrelas: pontinhos de luz na cor da moldura cintilam à volta da foto (duas camadas, desencontradas). */
html.efeito-estrelas .topo{position:relative}
html.efeito-estrelas .topo::before,html.efeito-estrelas .topo::after{content:"";position:absolute;left:0;right:0;top:-12px;height:260px;
  pointer-events:none;--p:color-mix(in srgb,var(--cor-moldura) 70%,#fff);
  background:radial-gradient(circle,var(--p) 0 2.4px,transparent 3.4px) 10% 16%/16px 16px no-repeat,
    radial-gradient(circle,var(--p) 0 1.8px,transparent 2.8px) 88% 10%/14px 14px no-repeat,
    radial-gradient(circle,#fff 0 2px,transparent 3.4px) 20% 60%/16px 16px no-repeat,
    radial-gradient(circle,var(--p) 0 3px,transparent 4.2px) 82% 48%/18px 18px no-repeat,
    radial-gradient(circle,var(--p) 0 1.6px,transparent 2.6px) 5% 86%/12px 12px no-repeat,
    radial-gradient(circle,#fff 0 1.8px,transparent 3px) 95% 82%/14px 14px no-repeat,
    radial-gradient(circle,var(--p) 0 1.4px,transparent 2.4px) 30% 4%/12px 12px no-repeat,
    radial-gradient(circle,var(--p) 0 2px,transparent 3px) 70% 92%/14px 14px no-repeat;
  filter:drop-shadow(0 0 3px var(--cor-moldura));animation:cintilar 3.2s ease-in-out infinite}
html.efeito-estrelas .topo::after{transform:scaleX(-1) translateY(30px);animation-delay:1.6s}
html.claro.efeito-estrelas .topo::before,html.claro.efeito-estrelas .topo::after{--p:color-mix(in srgb,var(--cor-moldura) 75%,#000)}
@keyframes cintilar{0%,100%{opacity:0;translate:0 6px}50%{opacity:1;translate:0 0}}
/* Selo C21 (no lugar da chave, a pedido do Sérgio, 2026-10-23): o C21 redondo colado ao nome (dentro do h1, para
   seguir o nome em todos os formatos). Entra e dá uma volta para o lado, como uma moeda (rotateY), de tempos a tempos.
   Na Assinatura espera que a caneta chegue ao fim do nome. */
html.efeito-selo .topo h1 .selo{display:inline-block;width:.9em;height:.9em;margin-left:.22em;vertical-align:-.12em;
  animation:selo-entra .8s cubic-bezier(.2,.8,.2,1) .9s both,selo-roda 6s ease-in-out 1.8s infinite}
html.efeito-selo.assina .topo h1 .selo{animation-delay:2.9s,3.8s}
@keyframes selo-entra{from{opacity:0;transform:translateX(-.5em)}to{opacity:1;transform:none}}
/* Uma volta inteira de seguida, lenta, logo a seguir à entrada, e só para de frente: parado de costas o «21»
   ficava ao espelho (o Sérgio não gostou, 2026-10-23). */
@keyframes selo-roda{0%{transform:perspective(60px) rotateY(0)}40%,100%{transform:perspective(60px) rotateY(360deg)}}

@media (min-width:520px){
  .claro body{padding:28px 12px}
  .cartao{padding:52px 24px 56px}
  .topo h1{font-size:42px}
}
/* Movimento reduzido (quem o pede no telemóvel ou no computador): sem animações -- menos na pré-visualização
   do formulário (html.previa, posto pelo app.js), onde o consultor está a escolher o efeito e tem de o ver.
   O Sérgio tem os "Efeitos de animação" do Windows desligados e não via nada (2026-10-22). */
@media (prefers-reduced-motion:reduce){
  html:not(.previa) *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* Empresa: a equipa no rodapé */
.pessoas{list-style:none;display:flex;justify-content:center;gap:28px;margin:18px 0 6px;padding:0}
.pessoas img{display:block;width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid var(--cor-moldura)}
.pessoas span{display:block;margin-top:6px;font-size:.85rem;font-weight:600}
/* corBotoesLinha: fundo dos botões de linha do topo (Email, Guardar contacto) */
html[style*="--botao-linha"] .acoes .btn-linha{background:var(--botao-linha);border-color:color-mix(in srgb,var(--botao-linha) 75%,#000 8%)}