/* Dom Banana — pacote visual da V3.4 aplicado à V1.0 (24/09/2026).
   Fonte: 07_MARCA_LOGOTIPO_E_DESIGN (rota canônica §16, lógica visual, tokens-visuais.json)
   e o app do hóspede da V3.4 (guest-experience: fundos, avatares, ícones, planta).
   Regras: uma biblioteca de componentes; contexto → estado → decisão → detalhe;
   corpo 16/24; espaçamento em múltiplos de 4; alvos de toque ≥ 44 px; foco visível;
   cor nunca sozinha (sempre rótulo); a fita prateada é detalhe e nunca cruza conteúdo.
   Modo visual por tela: hospitalidade (banana), loja (cacau), carteira (petróleo),
   compartilhado (grafite). */

@font-face{font-family:Inter;src:url(fonte/Inter-latin.ttf) format("truetype");font-weight:100 900;font-display:swap}

:root{
  --ink:#151515;--canvas:#FCFAF5;--surface:#FFFFFF;--line:#E9E6DF;--line-strong:#D8D0BD;
  --banana:#F6C945;--cocoa:#5B382C;--caramel:#C9874D;--silver:#A9A7A1;--petroleum:#174A5C;--teal:#168B8B;
  --success:#2F7D5B;--alert:#C85B3C;--info:#3568B8;--muted:#5F5A50;--paper:#FFFAF0;
  --action:var(--banana);--action-text:var(--ink);--accent-soft:#FBEFC4;
  --r-panel:12px;--r-control:8px;--r-chip:999px;--cut:24px;
  --sombra:0 12px 32px rgba(20,27,37,.14);
}
.modo-loja{--action:var(--cocoa);--action-text:#fff;--accent-soft:#EFE3DA}
.modo-carteira{--action:var(--petroleum);--action-text:#fff;--accent-soft:#DCEBEB;--canvas:#F5F8F8}
.modo-compartilhado{--action:var(--ink);--action-text:#fff}

*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-padding-top:96px;scroll-padding-bottom:96px}
body.casa{margin:0;min-height:100dvh;color:var(--ink);font:400 16px/24px Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#2a2f28}
/* papel de parede: camada fixa atrás de tudo (não "background-attachment:fixed", que falha no iPhone
   e emenda a imagem em página comprida) -- a arte cobre a tela inteira, sem repetir e sem esticar */
body.casa::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#2a2f28 var(--fundo,url(fundos/02-estadia-dourada.webp)) center/cover no-repeat}
body.casa[data-grupo=entrada]{--fundo:url(fundos/01-entrada-amarela.webp)}
body.casa[data-grupo=estadia]{--fundo:url(fundos/02-estadia-dourada.webp)}
body.casa[data-grupo=casa]{--fundo:url(fundos/03-casa-verde.webp)}
body.casa[data-grupo=espaco]{--fundo:url(fundos/04-espacos-terracota.webp)}
body.casa[data-grupo=mural]{--fundo:url(fundos/05-mural-lousa.webp)}
body.casa[data-grupo=pessoas]{--fundo:url(fundos/06-pessoas-coral.webp)}
body.casa[data-grupo=loja]{--fundo:url(fundos/07-loja-cacau.webp)}
body.casa[data-grupo=carteira]{--fundo:url(fundos/08-carteira-petroleo.webp)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--info);outline-offset:3px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* -- moldura: topo, navegação, papel ---------------------------------------------------- */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:72px;padding:8px 24px;background:#FFFCF3;border-bottom:1px solid rgba(36,37,31,.14)}
.topo .marca{display:block;height:52px}
.topo .marca img{height:100%;width:auto;display:block}
.topo .direita{display:flex;align-items:center;gap:8px}
.topo .voltar{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:1px solid #C3BAA5;border-radius:var(--r-panel);
  background:#FFF8E8;text-decoration:none;font-size:14px;font-weight:600}
.topo .voltar img{width:22px;height:22px}
.topo .saldo{display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:6px 14px;border-radius:var(--r-panel);
  background:var(--petroleum);color:#F5FFFB;text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}
.topo .saldo small{font-size:11px;line-height:14px;font-weight:500;color:#CFE6E0}
.topo .idioma{display:flex;gap:2px}
.topo .idioma button{min-width:44px;min-height:44px;border:0;background:none;border-radius:var(--r-control);font-size:14px;color:var(--muted);cursor:pointer}
.topo .idioma button[aria-pressed=true]{color:var(--ink);font-weight:700;background:rgba(246,201,69,.35)}

.corpo{display:grid;grid-template-columns:232px minmax(0,1fr);max-width:1440px;margin:0 auto;min-height:calc(100dvh - 72px)}
.lateral{padding:28px 16px;background:rgba(252,246,233,.92);border-right:1px solid rgba(41,40,31,.14)}
.nav-item{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px;margin:4px 0;border-radius:14px;text-decoration:none;font-weight:600}
.nav-item img{width:40px;height:40px;flex-shrink:0}
.nav-item[aria-current=page]{background:var(--banana);box-shadow:0 3px 0 rgba(52,59,48,.14)}
/* marca e ícones têm fundo transparente feito para superfícies claras: sobre a banana, o ícone ganha a sua plaquinha marfim */
.nav-item[aria-current=page] img{background:#FFFCF3;border-radius:12px;padding:3px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.nav-item:hover{background:rgba(246,201,69,.28)}
.lateral .eu{margin-top:28px;padding-top:20px;border-top:1px solid rgba(41,40,31,.14);display:flex;align-items:center;gap:12px;font-size:14px}
.area{padding:32px 40px 64px;min-width:0}
.rodape-nav{display:none}

.papel{position:relative;max-width:960px;margin:0 auto;padding:32px;background:rgba(255,250,240,.97);
  border:1px solid #FFF8E3;border-radius:24px;box-shadow:var(--sombra)}
/* a fita: faixa curta, fora do conteúdo (canto superior), nunca sobre texto */
.papel::before{content:"";position:absolute;left:32px;top:-11px;width:84px;height:22px;transform:rotate(-5deg);
  background:repeating-linear-gradient(165deg,#B7BAB7,#DEDFD9 3px,#939995 5px,#C8CBC8 7px);box-shadow:0 1px 3px rgba(0,0,0,.2);opacity:.92;pointer-events:none}
.papel+.papel{margin-top:24px}

.titulo{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.titulo+.lead{margin:0 0 24px}
.titulo h1{margin:0}
.titulo .arte{width:88px;height:88px;flex-shrink:0}
.titulo .av{width:88px;height:88px}
.titulo .sobre{margin:0 0 4px;font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#665D4A}
h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:800;overflow-wrap:anywhere}
h2{margin:0 0 12px;font-size:20px;line-height:28px;letter-spacing:-.01em;font-weight:700}
h3{margin:0 0 4px;font-size:16px;line-height:24px;font-weight:700}
p{margin:0 0 16px}
.lead{max-width:560px}
.mudo,.muted{color:var(--muted)}
small{font-size:14px;line-height:20px}

/* -- blocos --------------------------------------------------------------------------- */
.bloco,.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:20px;margin:0 0 16px;min-width:0}
.bloco>h2:first-child,.card>b:first-child{display:block;margin-bottom:8px}
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.estadia-resumo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.estadia-resumo div small{display:block;color:var(--muted)}
.estadia-resumo div b{font-size:18px;line-height:24px}
.passo{display:flex;gap:12px;align-items:flex-start}
.passo .dot{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--line);color:var(--muted)}
.passo .dot.feito{background:var(--success);color:#fff}
.faixa{padding:12px 16px;border-radius:var(--r-panel);background:#EEE7D7;margin:12px 0}
.faixa.aviso{border-left:4px solid var(--alert);background:#FFF0E6}
.faixa.ok{border-left:4px solid var(--success);background:#EAF4EE}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--r-chip);background:#EEE8D8;font-size:13px;line-height:22px;font-weight:600}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}
.chip.ok{background:#E3F1E8;color:#1F5E43}.chip.alerta{background:#F9E3DA;color:#8A3A22}.chip.info{background:#E2EAF7;color:#28508C}
.err{color:#9A3A22}.okmsg{color:var(--success)}

/* -- ações ------------------------------------------------------------------------------ */
.btn,button.main,a.main{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;
  border-radius:var(--r-panel);border:1px solid rgba(21,21,21,.2);background:var(--action);color:var(--action-text);
  font-weight:700;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer}
button.main,a.main{width:100%;margin-top:16px}
.btn.sec,button.sec{background:var(--surface);color:var(--ink);border-color:#C3BAA5}
.btn.perigo{background:#8D3030;color:#fff}
.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.acoes>.btn{flex:1 1 180px}
.link{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;min-height:44px}

/* -- formulários -------------------------------------------------------------------------- */
label{display:block;margin:12px 0 4px;font-size:14px;font-weight:600}
input,select,textarea{display:block;width:100%;min-height:48px;padding:12px;border:1px solid #A39E8F;border-radius:10px;background:#FFFEF9}
textarea{min-height:96px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px}
.check input{width:20px;min-height:20px;margin-top:2px;flex:none}

/* -- senha da porta ------------------------------------------------------------------------ */
.senha{font:800 44px/1.1 Inter,ui-monospace,monospace;letter-spacing:.14em;text-align:center;padding:16px;margin-top:12px;
  border:2px dashed var(--ink);border-radius:var(--r-panel);background:var(--accent-soft);font-variant-numeric:tabular-nums}
.como-abrir{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.como-abrir figure{margin:0;text-align:center}
.como-abrir img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--r-panel);border:1px solid var(--line)}
.como-abrir figcaption{font-size:13px;line-height:18px;margin-top:6px}

/* -- mapa da casa --------------------------------------------------------------------------- */
.mapa{margin:0 0 16px}
.mapa .pisos{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;margin:0 0 12px}
.mapa .pisos img{width:40px;height:40px}
.mapa .pisos img{flex:none}
.mapa .pisos button{flex:1 1 0;min-width:0;white-space:nowrap;font-size:14px;min-height:44px;padding:8px 10px;border:1px solid #B9AD93;border-radius:var(--r-chip);background:#FFFCF4;cursor:pointer;font-weight:600}
.mapa .pisos button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.mapa .pisos .seta{flex:none;width:48px;min-width:48px;padding:0;font-size:18px;line-height:1}
.mapa .pisos .seta.todos{font-size:22px}
.mapa .pisos .seta:disabled{opacity:.3;cursor:default}
.mapa .pisos .piso-nome{flex:1;text-align:center;font-weight:700;font-size:16px}
.mapa .planta{background:#F8F4EF;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden}
.mapa svg{display:block;width:100%;height:auto;max-height:72vh}
.mapa .esp{cursor:pointer;outline:none}
.mapa .esp rect.hit{fill:transparent;stroke:transparent;stroke-width:2;transition:fill .15s,stroke .15s}
.mapa .esp:not(.estado):hover rect.hit,.mapa .esp:not(.estado):focus-visible rect.hit{fill:rgba(246,201,69,.35);stroke:#FFFFFF;stroke-width:4}
.mapa .esp.estado:hover rect.hit,.mapa .esp.estado:focus-visible rect.hit{stroke-width:7}
.mapa .esp.meu rect.hit{fill:rgba(246,201,69,.42);stroke:var(--banana);stroke-width:5}
.mapa .esp.sel rect.hit{stroke:var(--ink);stroke-width:5}
.mapa .esp.inativo{cursor:default}
.mapa .rotulo{font-family:Inter,sans-serif;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:#FFFDF8;stroke-width:5px;pointer-events:none}
.mapa .estado rect.hit{stroke-width:4}
.mapa .estado-ok rect.hit{fill:rgba(47,125,91,.28);stroke:var(--success)}
.mapa .estado-atencao rect.hit{fill:rgba(200,91,60,.30);stroke:var(--alert)}
.mapa .estado-andamento rect.hit{fill:rgba(53,104,184,.26);stroke:var(--info)}
.mapa .estado-neutro rect.hit{fill:rgba(255,253,248,.4);stroke:#8D877A}
.mapa .legenda{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mapa .dica{font-size:14px;color:var(--muted);margin:8px 0 0}

/* -- espaço (fotos) ------------------------------------------------------------------------ */
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#EEE7D7}
.fotos img:first-child:nth-last-child(1){grid-column:1/-1;aspect-ratio:16/9}

/* -- avatar escolha --------------------------------------------------------------------------- */
.av-grade{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:520px}
.av-op{border:2px solid transparent;border-radius:14px;background:transparent;padding:6px;cursor:pointer;min-height:44px}
.av-op .av{width:100%;height:auto;aspect-ratio:1}
.av-op[aria-pressed=true]{border-color:#5C7130;background:#E6EDCE}
.av-familias{display:flex;gap:8px;margin:8px 0 12px;flex-wrap:wrap}
.av-familias button{min-height:44px;padding:8px 16px;border:1px solid #B9AD93;border-radius:var(--r-chip);background:#FFFCF4;cursor:pointer;font-weight:600}
.av-familias button[aria-pressed=true]{background:var(--ink);color:#fff}

/* -- carteira ------------------------------------------------------------------------------- */
.dinheiro{background:var(--petroleum);color:#F8FFF5;padding:24px;border-radius:18px}
.dinheiro .valor{font-size:40px;line-height:48px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:8px 0}
.dinheiro small{color:#C6E1DB}

/* -- camadas de aviso ------------------------------------------------------------------------- */
#aviso{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:40;max-width:calc(100vw - 32px);width:max-content;
  padding:12px 20px;border-radius:14px;background:#252D27;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.35);display:none}

@media (max-width:760px){
  .topo{height:64px;padding:8px 12px}
  .topo .marca{height:44px}
  .corpo{display:block;min-height:calc(100dvh - 64px)}
  .lateral{display:none}
  .area{padding:16px 12px 112px}
  .papel{padding:24px 16px;border-radius:20px}
  .titulo{gap:12px}.titulo .arte,.titulo .av{width:64px;height:64px}
  .grade{grid-template-columns:1fr}
  .estadia-resumo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,252,244,.97);border-top:1px solid #D3C7A9;box-shadow:0 -3px 14px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
  .rodape-nav .nav-item{flex:1;min-width:0;flex-direction:column;gap:2px;min-height:60px;margin:0 2px;padding:4px 2px;font-size:12px;line-height:14px;border-radius:12px}
  .rodape-nav .nav-item img{width:32px;height:32px}
  .av-grade{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .av-op{padding:2px}
  .como-abrir{grid-template-columns:1fr;gap:10px}
  .mapa .pisos img{display:none}
  .como-abrir figure{display:grid;grid-template-columns:44% 1fr;gap:12px;align-items:center;text-align:left}
  .como-abrir figcaption{margin:0;font-size:14px;line-height:20px}
}
@media (max-width:360px){.topo .idioma button{min-width:36px}.rodape-nav .nav-item span{font-size:11px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.corpo.sem-lateral{display:block}

/* -- Minha Casa: telas, planta com detalhe, cartões de acesso ------------------------------- */
.tela[hidden]{display:none}
.casa-mapa{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;align-items:start}
.casa-mapa .detalhe{position:sticky;top:96px}
.casa-mapa .detalhe h2{margin-bottom:4px}
.atalho{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.atalho img.arte{width:72px;height:72px;flex:none}
.atalho .marca-loja{height:64px;width:auto;flex:none}
.wifi{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:8px}
.wifi .qr{width:150px;max-width:40%;background:#fff;padding:8px;border-radius:10px;border:1px solid var(--line)}
.wifi .qr svg{display:block;width:100%;height:auto}
.linha{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.linha:first-child{border-top:0}
.estrelas button{font-size:28px;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;opacity:.35}
.estrelas button[aria-pressed=true]{opacity:1}
div.camas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
div.camas button{display:block;width:100%;margin-top:6px;min-height:48px;border-radius:10px;border:1px solid #B9AD93;background:#fff;font-weight:700;cursor:pointer}
div.camas button.sua{background:var(--success);color:#fff;border-color:var(--success)}
div.camas button:disabled:not(.sua){background:#EEE8D8;color:#8D877A}
.fotos-pronto{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.fotos-pronto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
@media (max-width:980px){.casa-mapa{grid-template-columns:1fr}.casa-mapa .detalhe{position:static}}
@media (max-width:760px){.atalho{flex-direction:column;align-items:flex-start;gap:12px}}

/* -- Casa Viva: abas, mural, conversa --------------------------------------------------------- */
.abas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;margin:16px 0;border-radius:var(--r-chip);background:#EEE7D7}
.abas button{min-height:44px;border:0;border-radius:var(--r-chip);background:transparent;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.abas button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.eu-cv{display:flex;align-items:center;gap:16px}
.quem{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.quem small{margin-left:auto}
.post p{margin:0 0 4px;overflow-wrap:anywhere}
.conversa{display:flex;flex-direction:column;gap:8px;margin:12px 0;max-height:52vh;overflow:auto;padding:4px}
.balao{max-width:80%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#F1ECE0;overflow-wrap:anywhere}
.balao.meu{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--accent-soft)}
.balao img{display:block;max-width:100%;min-height:60px;border-radius:10px;cursor:pointer}
.borrada{filter:blur(18px)}
.emojis{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.emojis button{font-size:24px;min-width:44px;min-height:44px;background:none;border:0;border-radius:10px;cursor:pointer}
.emojis button:hover{background:#F1ECE0}
.faixa.aviso{font-size:14px;line-height:20px}
@media (max-width:760px){
  .topo .voltar span{display:none}
  .topo .voltar{padding:6px 10px}
  .abas button{font-size:14px;padding:0 4px}
}

/* v1.0.40: troca de piso deslizando o dedo na planta */
@keyframes plantaEsq{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes plantaDir{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
.planta.vai-esq svg{animation:plantaEsq .18s ease-out}.planta.vai-dir svg{animation:plantaDir .18s ease-out}
.planta{touch-action:pan-y pinch-zoom}
@media (prefers-reduced-motion:reduce){.planta.vai-esq svg,.planta.vai-dir svg{animation:none}}