/* Área do anfitrião (entrar.html e perfil.html) · mesma identidade da página inicial v4:
   areia como chão, petróleo como mar fundo, coral como sol/destaque.
   Archivo condensada nos títulos, Atkinson Hyperlegible no texto, IBM Plex Mono nos dados.
   Assinatura: cada imóvel é uma placa de parede (branca, com parafusos), como a placa do QR na home. */
[hidden]{display:none !important}
:root{color-scheme:light;
  --areia:#F6F1E7; --areia-2:#EFE7D8; --papel:#FFFFFF; --espuma:#E4EFEC;
  --petroleo:#0F4C5C; --petroleo-esc:#0A3540; --mar:#0B2F38;
  --coral:#E8875A; --coral-esc:#D9713F; --coral-txt:#A4502A;
  --tinta:#10262C; --suave:#4E6469; --fraco:#6E7F82; --linha:#E2D9C8; --linha-forte:#CFC4B0;
  --erro:#B3261E; --ok:#1E6B4A; --coral-forte:#8A3F1F; /* coral escuro: texto sobre fundo coral claro (contraste AA) */
  --disp:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --sans:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --r:18px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
body{margin:0; background:var(--areia); color:var(--tinta); font-family:var(--sans); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh}
h1,h2,h3{margin:0; font-family:var(--disp); font-weight:800; font-stretch:78%; letter-spacing:-.012em; line-height:1; text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px; border-radius:8px}
.mono{font-family:var(--mono)}
.rotulo{display:inline-flex; align-items:center; gap:10px; font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--coral-txt)}
.rotulo::before{content:""; width:22px; height:2px; background:currentColor; border-radius:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

/* ---------- marca e topo */
.marca{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:800 22px var(--disp); font-stretch:85%; letter-spacing:-.01em}
.marca b{color:var(--coral); font-weight:800}
.marca .fo{stroke:var(--petroleo)} .marca .fi{fill:var(--petroleo)}
.marca svg{transition:rotate .5s var(--ease)} .marca:hover svg{rotate:-8deg}
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--areia) 90%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--linha)}
.top .in{max-width:1120px; margin:auto; padding:0 16px; height:68px; display:flex; align-items:center; gap:18px}
@media (min-width:760px){.top .in{padding:0 32px}}
.top .marca{margin-right:auto}
.top-link{font-size:16px; font-weight:700; text-decoration:none; color:var(--suave); padding:8px 4px; background:none; border:0; cursor:pointer; font-family:var(--sans)}
.top-link:hover{color:var(--coral-txt)}

/* ---------- botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 17px var(--sans); text-decoration:none; cursor:pointer; border:0;
  background:var(--coral); color:var(--tinta); padding:13px 24px; border-radius:999px; min-height:52px;
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 10px 22px -12px rgba(201,95,50,.75);
  transition:background .2s, translate .2s var(--ease), box-shadow .2s}
.btn:hover{background:var(--coral-esc); translate:0 -2px}
.btn:active{translate:0 0}
.btn:disabled{opacity:.6; cursor:default; translate:0 0}
.btn.sec{background:var(--papel); color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linha-forte)}
.btn.sec:hover{background:var(--areia-2)}
.btn.linha{background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 2px var(--tinta)}
.btn.linha:hover{background:var(--tinta); color:var(--areia)}
.btn.peq{min-height:42px; padding:8px 16px; font-size:15px}
.btn.cheio{width:100%}
.link-btn{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--petroleo); text-decoration:underline; text-decoration-color:var(--coral); text-decoration-thickness:2px; text-underline-offset:3px; cursor:pointer}
.link-btn:hover{color:var(--coral-txt)}

/* ---------- campos */
.campo{display:grid; gap:6px; margin-bottom:18px}
.campo label{font-weight:700; font-size:16px}
.campo small{font-size:14px; color:var(--suave)}
.campo input{font:18px var(--sans); color:var(--tinta); background:var(--papel); border:1.5px solid var(--linha-forte); border-radius:12px; padding:13px 15px; width:100%; transition:border-color .15s, box-shadow .15s}
.campo input:focus{outline:none; border-color:var(--petroleo); box-shadow:0 0 0 4px color-mix(in srgb, var(--petroleo) 16%, transparent)}
.campo input[readonly]{background:var(--areia-2); color:var(--suave)}
.campo input[aria-invalid="true"]{border-color:var(--erro); box-shadow:0 0 0 4px color-mix(in srgb, var(--erro) 12%, transparent)}
/* neutraliza o destaque amarelo/azul que o navegador coloca no preenchimento automático (ex.: campo de e-mail) */
.campo input:-webkit-autofill, .campo input:-webkit-autofill:hover, .campo input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tinta); caret-color:var(--tinta);
  -webkit-box-shadow:0 0 0 1000px var(--papel) inset; box-shadow:0 0 0 1000px var(--papel) inset;
  transition:background-color 9999s}
.aviso{border-radius:14px; padding:13px 16px; font-size:16px; margin-bottom:18px; background:var(--espuma); color:var(--petroleo-esc); border:1px solid color-mix(in srgb, var(--petroleo) 18%, transparent)}
.aviso.erro{background:color-mix(in srgb, var(--erro) 8%, var(--papel)); color:var(--erro); border-color:color-mix(in srgb, var(--erro) 25%, transparent); font-weight:700}
.cartao{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:28px; box-shadow:0 24px 40px -30px rgba(11,47,56,.35)}
@media (max-width:520px){.cartao{padding:22px}}

/* ---------- abas (pílulas) */
.abas{display:inline-flex; gap:4px; background:var(--areia-2); border-radius:999px; padding:5px; max-width:100%; overflow-x:auto}
.abas button{font:700 16px var(--sans); color:var(--suave); background:none; border:0; padding:10px 20px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:color .15s, background .15s}
.abas button:hover{color:var(--tinta)}
.abas button[aria-selected="true"]{background:var(--petroleo); color:#fff}
.abas{scrollbar-width:none}
@media (max-width:560px){.ola .abas{display:flex; width:100%} .ola .abas button{flex:1; padding:10px 6px; font-size:15px}}

/* =================== ENTRAR =================== */
/* Versão limpa: um cartão centralizado, sem painel escuro nem placa. */
.entrar{padding:48px 16px 72px}
@media (min-width:760px){.entrar{padding:72px 32px 96px}}
.entrar .form-in{width:100%; max-width:440px; margin:0 auto}
.entrar .rotulo{display:none}
.entrar h2{font-size:34px; font-weight:700; font-stretch:88%; line-height:1.1}
.entrar .sub{color:var(--suave); margin:8px 0 24px}
.entrar .abas{display:flex; width:100%; margin-bottom:16px}
.entrar .abas button{flex:1}
.entrar .cartao{border-radius:16px; box-shadow:none}
.entrar .btn{box-shadow:none}
.entrar .btn:hover{translate:0 0}
.rodape-form{margin-top:16px; text-align:center; font-size:16px; color:var(--suave)}
.esqueci{text-align:right; margin:-6px 0 18px; font-size:15px}
.seguro{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; font-size:14px; color:var(--suave)}
.seguro svg{width:14px; height:14px; flex:none}

/* =================== PERFIL =================== */
.perfil{max-width:1120px; margin:0 auto; padding:40px 16px 80px}
@media (min-width:760px){.perfil{padding:56px 32px 96px}}
.ola{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 32px; margin-bottom:40px}
.ola h1{font-size:clamp(44px,6vw,76px); font-stretch:72%; line-height:.95; margin-top:12px}
.ola h1 span{color:var(--petroleo); background:linear-gradient(var(--coral),var(--coral)) left 92% / 100% .12em no-repeat}
.ola .email{font:400 15px var(--mono); color:var(--suave); margin-top:12px; overflow-wrap:anywhere}
.painel{animation:entra .35s var(--ease) both}
@keyframes entra{from{opacity:0; translate:0 10px}}
.painel-cab{margin-bottom:24px}
.painel-cab h2{font-size:clamp(30px,3.4vw,40px); font-stretch:78%}
.painel-cab p{color:var(--suave); max-width:56ch; margin-top:8px}

/* placas dos imóveis */
.lista-placas{display:contents}
.imoveis{display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); align-items:start}
.placa{position:relative; background:var(--papel); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; min-width:0;
  box-shadow:0 0 0 1px var(--linha), 0 26px 40px -30px rgba(11,47,56,.45); transition:translate .25s var(--ease), box-shadow .25s}
.placa:hover{translate:0 -3px; box-shadow:0 0 0 1px var(--linha-forte), 0 30px 46px -28px rgba(11,47,56,.5)}
.placa::after{content:""; position:absolute; inset:10px; pointer-events:none; z-index:2;
  background:radial-gradient(circle at 0 0,#CFC4B0 2.6px,transparent 3.2px),radial-gradient(circle at 100% 0,#CFC4B0 2.6px,transparent 3.2px),radial-gradient(circle at 0 100%,#CFC4B0 2.6px,transparent 3.2px),radial-gradient(circle at 100% 100%,#CFC4B0 2.6px,transparent 3.2px)}
.placa-foto{aspect-ratio:16/9; background:var(--areia-2) center/cover; display:grid; place-items:center; gap:6px; color:var(--suave); font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase}
.placa-foto svg{width:40px; height:40px; opacity:.45; display:block; margin:0 auto 6px}
.placa-corpo{padding:20px 22px 24px; display:grid; gap:14px; min-width:0}
.placa h3{font-size:30px; font-stretch:76%; line-height:1}
.placa .cidade{color:var(--suave); font-size:16px; margin-top:6px}
.placa .nota{color:var(--suave); font-size:16px}
.placa.exemplo{background:color-mix(in srgb, var(--papel) 65%, var(--areia))}
.status{justify-self:start; display:inline-flex; align-items:center; gap:7px; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.status.pronto{background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok)}
.status.montagem{background:color-mix(in srgb, var(--coral) 18%, transparent); color:var(--coral-forte)}
.status.exemplo{background:var(--areia-2); color:var(--suave)}

/* validade: a etiqueta da placa */
.validade{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; border-radius:12px; padding:12px 14px; background:var(--espuma); border:1px dashed color-mix(in srgb, var(--petroleo) 30%, transparent)}
.validade b{font:800 20px var(--disp); font-stretch:82%; color:var(--petroleo); letter-spacing:0}
.validade small{display:block; font:400 13px var(--mono); color:var(--suave); margin-top:3px}
.validade .btn{margin-left:auto}
.validade.alerta{background:color-mix(in srgb, var(--coral) 14%, var(--papel)); border-color:color-mix(in srgb, var(--coral) 55%, transparent)}
.validade.alerta b{color:var(--coral-forte)}
.validade.expirado{background:color-mix(in srgb, var(--erro) 7%, var(--papel)); border-color:color-mix(in srgb, var(--erro) 40%, transparent)}
.validade.expirado b{color:var(--erro)}

.link-guia{display:flex; gap:8px; align-items:center; background:var(--areia); border-radius:12px; padding:6px 6px 6px 14px; min-width:0}
.link-guia code{flex:1; min-width:0; font:400 13px var(--mono); color:var(--suave); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acoes{display:flex; flex-wrap:wrap; gap:8px}

/* placa vazia: cadastrar imóvel */
.nova-placa{display:grid; place-items:center; align-content:center; gap:10px; min-height:240px; border:2px dashed var(--linha-forte); border-radius:20px; background:transparent; cursor:pointer;
  font:800 26px var(--disp); font-stretch:80%; color:var(--petroleo); transition:border-color .2s, background .2s, color .2s; padding:24px; width:100%}
a.nova-placa{text-decoration:none}
.nova-placa:hover{border-color:var(--coral); background:color-mix(in srgb, var(--coral) 7%, transparent); color:var(--coral-txt)}
.nova-placa i{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--coral); color:var(--tinta); font:700 30px/1 var(--sans); font-style:normal}
.nova-placa small{font:400 15px var(--sans); color:var(--suave)}
.novo{background:var(--papel); border:2px dashed var(--coral); border-radius:20px; padding:24px; margin-top:22px}
.novo h3{font-size:30px; font-stretch:78%; margin-bottom:18px}
.grade2{display:grid; gap:0 18px; align-items:start}
@media (min-width:640px){.grade2{grid-template-columns:1fr 1fr}}
.cartao.estreito{max-width:520px}
.erro-geral{max-width:560px; margin:48px auto; padding:0 16px}

/* formulário do imóvel (prévia do guia) */
.campo textarea{font:17px/1.45 var(--sans); color:var(--tinta); background:var(--papel); border:1.5px solid var(--linha-forte); border-radius:12px; padding:12px 15px; width:100%; resize:vertical; transition:border-color .15s, box-shadow .15s}
.campo textarea:focus{outline:none; border-color:var(--petroleo); box-shadow:0 0 0 4px color-mix(in srgb, var(--petroleo) 16%, transparent)}
.campo .opcional{font-weight:400; font-size:14px; color:var(--suave); margin-left:6px}
.novo fieldset{border:0; padding:0; margin:0 0 8px}
.novo legend{font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--coral-txt); padding:0; margin:8px 0 14px}
.novo .sub-form{color:var(--suave); margin:-8px 0 18px; font-size:16px}
.foto-campo{display:flex; align-items:center; gap:14px}
.foto-mini{flex:none; width:72px; height:54px; border-radius:10px; background:var(--areia-2) center/cover; border:1px solid var(--linha)}
.foto-campo input{font:15px var(--sans); min-width:0}
.whats-link{background:#1F7A4D; color:#fff}
.whats-link:hover{background:#17623D}

.toast{position:fixed; left:50%; bottom:24px; translate:-50% 0; z-index:50; background:var(--mar); color:var(--areia); padding:13px 22px; border-radius:999px; font-weight:700;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s, translate .2s var(--ease); max-width:calc(100% - 32px); text-align:center}
.toast.on{opacity:1; translate:-50% -6px}

/* aceite dos termos (cadastro) */
.aceite{display:flex; gap:12px; align-items:flex-start; margin:4px 0 18px; font-size:16px; line-height:1.45; cursor:pointer}
.aceite input{flex:none; width:24px; height:24px; margin:0; accent-color:var(--petroleo)}
.aceite input[aria-invalid="true"]{outline:3px solid var(--erro); outline-offset:2px}
.aceite a{color:var(--petroleo); text-decoration-color:var(--coral)}