/* Heroes of every branch, drawn with container units so the same composition works in a window or filling the frame. */
.hv{position:absolute;inset:0;container-type:inline-size;overflow:hidden;background:var(--v-bg);color:var(--v-fg);font-family:var(--ui)}
.hv__foto{position:absolute;inset:0}
.hv__foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--v-foco,50% 50%);filter:var(--v-filtro,none)}
.hv__nav{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;align-items:center;gap:max(10px,2.4cqw);padding:max(10px,1.7cqw) max(14px,3.6cqw);font-size:max(10px,1.2cqw)}
.hv__nav strong{font:600 max(14px,1.9cqw)/1 var(--v-letra);font-stretch:var(--v-largura);letter-spacing:.14em;text-transform:uppercase;margin-right:auto}
.hv__nav b{padding:max(5px,.8cqw) max(10px,1.5cqw);border-radius:99px;background:var(--v-ac);color:var(--v-acfg);font-weight:500;white-space:nowrap}
.hv__menu{display:flex;gap:max(10px,2.4cqw)}
.hv--claro .hv__menu{padding:max(4px,.7cqw) max(10px,1.5cqw);border-radius:99px;background:color-mix(in srgb,var(--v-bg) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hv__texto{position:absolute;z-index:2}
.hv h3{margin:0;font-family:var(--v-letra);font-weight:var(--v-peso);font-stretch:var(--v-largura);letter-spacing:var(--v-ls);font-size:clamp(24px,6.1cqw,92px);line-height:1;text-wrap:balance}
.hv p{margin:max(8px,1.5cqw) 0 0;font:400 max(12px,1.5cqw)/1.42 var(--ui);max-width:max(240px,38cqw);opacity:.88}
.hv__cta{display:inline-flex;margin-top:max(10px,2cqw);padding:max(8px,1.1cqw) max(13px,2.1cqw);border-radius:max(5px,.6cqw);background:var(--v-ac);color:var(--v-acfg);font:500 max(12px,1.35cqw)/1.2 var(--ui)}
.hv__oco{position:absolute;right:-1cqw;bottom:-2.6cqw;z-index:1;font:700 19cqw/.8 var(--display);font-stretch:118%;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px #ffffff55;white-space:nowrap;pointer-events:none}

/* tela: the photo fills everything, the text rests on a veil in the tenant's own dark */
.hv--tela .hv__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--v-bg) 0,color-mix(in srgb,var(--v-bg) 72%,transparent) 36%,transparent 72%),linear-gradient(0deg,color-mix(in srgb,var(--v-bg) 70%,transparent),transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--v-bg) 60%,transparent),transparent 20%)}
.hv--tela .hv__texto{left:max(14px,3.6cqw);bottom:max(14px,6cqw);width:58%}
.hv__oco~.hv__texto,.hv--tela .hv__oco~.hv__texto{bottom:max(14px,16cqw)}

/* direita: dark photos with the subject on the left; the text answers from the right */
.hv--direita .hv__foto{left:-15%;right:15%}
.hv--direita .hv__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,var(--v-bg) 0,color-mix(in srgb,var(--v-bg) 66%,transparent) 40%,transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--v-bg) 60%,transparent),transparent 20%)}
.hv--direita .hv__texto{right:max(14px,3.6cqw);top:50%;transform:translateY(-44%);width:48%}

/* claro: light page, the photo melts into it from the right */
.hv--claro .hv__foto{left:45%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.hv--claro .hv__texto{left:max(14px,3.6cqw);top:52%;transform:translateY(-46%);width:45%}
.hv--claro h3{font-size:clamp(22px,5.5cqw,84px)}
.hv--espelho .hv__foto img{transform:scaleX(-1)}
.hv--multiplica .hv__foto{-webkit-mask-image:none;mask-image:none}
.hv--multiplica .hv__foto img{mix-blend-mode:multiply}

/* centro: the name of the house in the middle of a dark photo */
.hv--centro .hv__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--v-bg) 78%,transparent) 0,color-mix(in srgb,var(--v-bg) 56%,transparent) 55%,color-mix(in srgb,var(--v-bg) 30%,transparent))}
.hv--centro .hv__texto{left:10%;right:10%;top:17%;text-align:center}
.hv--centro p{margin-inline:auto}
.hv--centro h3{font-size:clamp(24px,6.6cqw,100px)}
.hv--calmo .hv__foto img{filter:saturate(.72)}
.hv--calmo h3{font-size:clamp(22px,5.4cqw,84px)}

/* solar: a house in the mist, or one panel on graphite */
.hv--solar{background:#0C0E11}
.solc{position:absolute;inset:0;transition:opacity .55s ease,visibility .55s}
.hv--solar[data-cena=casa] .sol--empresa,.hv--solar[data-cena=empresa] .sol--casa{opacity:0;visibility:hidden}
.sol--casa{background:#22272B}
.sol__foto{position:absolute;inset:6% -2% -7% -2%}
.sol__foto::after{content:"";position:absolute;inset:0;background:radial-gradient(21% 15% at 47% 45%,#6C93E06b,transparent);mix-blend-mode:screen}
.sol__foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--v-foco,50% 50%);filter:brightness(1.16)}
/* the house stays sharp in the middle and dissolves towards the edges */
.sol__nevoa{position:absolute;inset:0;-webkit-backdrop-filter:blur(1.1cqw) saturate(.82);backdrop-filter:blur(1.1cqw) saturate(.82);-webkit-mask-image:radial-gradient(58% 46% at 50% 58%,transparent 62%,#000 100%);mask-image:radial-gradient(58% 46% at 50% 58%,transparent 62%,#000 100%)}
.sol--casa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#1D2226 0,#1D2226fa 22%,#1D2226d9 33%,transparent 49%),linear-gradient(0deg,#15191Cf2 0,#15191C8c 11%,transparent 28%),radial-gradient(34% 40% at 0 62%,#3A3F41b3,transparent),radial-gradient(34% 40% at 100% 62%,#3A3F41b3,transparent)}
.sol--casa h3{position:absolute;z-index:1;left:8%;right:8%;top:8.8cqw;text-align:center;font:500 clamp(18px,5.6cqw,84px)/1.1 var(--display);font-stretch:100%;letter-spacing:-.02em;color:#F0F2F3}
.sol--casa h3 span{display:block}
.sol--casa h3 span+span{color:#A9B0B6}
.sol--casa p{position:absolute;z-index:1;left:50%;transform:translateX(-50%);bottom:max(10px,2.2cqw);width:52cqw;max-width:none;margin:0;text-align:center;text-wrap:balance;font:400 max(11px,1.3cqw)/1.4 var(--ui);color:#C6CBCF;opacity:1}
.sol__troca{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:6.2cqw;display:flex;gap:.3cqw;width:38cqw;padding:.35cqw;border-radius:1cqw;background:#464B47a6;box-shadow:inset 0 0 0 1px #ffffff1f,0 1.4cqw 3cqw -1cqw #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sol__seg{flex:1 1 0;display:grid;justify-items:center;align-content:center;gap:.25cqw;padding:max(6px,1cqw) max(6px,.8cqw);border-radius:.75cqw;color:#E6E8E9;text-align:center;transition:background .35s,color .35s,box-shadow .35s}
.sol__seg b{font:500 max(12px,1.65cqw)/1.15 var(--display);font-stretch:104%;background:none;padding:0;color:inherit}
.sol__seg small{font:400 max(10px,1.02cqw)/1.2 var(--ui);opacity:.78}
.sol__seg:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hv--solar[data-cena=casa] .sol__seg:nth-child(1),.hv--solar[data-cena=empresa] .sol__seg:nth-child(2){background:linear-gradient(180deg,#F5F7DC,#DCE3B2);color:#1B1F0C;box-shadow:0 0 0 1px #ffffff80,0 .6cqw 2cqw -.4cqw #DFE6B588}
.sol--empresa{background:#15181C}
.sol__placa{position:absolute;inset:-2%;display:block;width:104%;height:104%;max-width:none;object-fit:cover;object-position:50% 50%;transform:translate(calc(var(--gx,0)*-.6cqw),calc(var(--gy,0)*-.4cqw));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hv--solar[data-cena=casa] .sol__placa{transform:scale(1.05)}
.sol--empresa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#ffffff0a 1px,transparent 1px) 0 0/100% 33.4%,linear-gradient(90deg,#ffffff0a 1px,transparent 1px) 0 0/16.67% 100%}
.hv .sol__titulo{margin:0;font:200 13.6cqw/.9 var(--display);font-stretch:100%;letter-spacing:-.045em;color:#F5F6F7}
.sol__titulo span{position:absolute;white-space:nowrap;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sol__titulo .sol__pa{left:4.2cqw;top:6.8cqw;z-index:1}
.sol__titulo .sol__pb{right:4.6cqw;top:34.4cqw;z-index:3;padding-right:.1em;background:linear-gradient(95deg,#fff 30%,#7D858E 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hv--solar[data-cena=casa] .sol__titulo .sol__pa{transform:translateX(-2cqw)}
.hv--solar[data-cena=casa] .sol__titulo .sol__pb{transform:translateX(2cqw)}
.sol__fio{position:absolute;z-index:2;left:70cqw;top:8.4cqw;width:19.6cqw;height:6.2cqw;overflow:visible}
.sol__ponto{position:absolute;z-index:2;left:89.2cqw;top:8cqw;width:.8cqw;height:.8cqw;border-radius:50%;background:#D9A93F}
.sol__chamada{position:absolute;z-index:3;left:74.4cqw;top:10cqw;width:21.6cqw;max-width:none;margin:0;font:400 max(11px,1.45cqw)/1.35 var(--ui);color:#D9DDE1;opacity:1}
.sol__chip{position:absolute;z-index:3;padding:max(4px,.7cqw) max(8px,1.2cqw);border-radius:.5cqw;background:#1A1E23d9;box-shadow:inset 0 0 0 1px #ffffff2b;font:400 max(10px,1.1cqw)/1.2 var(--ui);color:#DDE1E5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sol__chip--a{left:12cqw;top:33cqw}
.sol__chip--b{left:40cqw;top:30cqw}
.sol__canto{position:absolute;z-index:1;bottom:4cqw;width:3cqw;height:3cqw;border:solid #ffffff3d;border-width:0 0 1px 1px}
.sol__canto--e{left:4cqw}
.sol__canto--d{right:4cqw;border-width:0 1px 1px 0}
.hv--mini.hv--solar .sol__foto{inset:21% -3% -8% -3%}
.hv--mini.hv--solar .hv__texto{left:8%;right:8%;top:8cqw;z-index:2;text-align:center;color:#F0F2F3}
.hv--mini.hv--solar .hv__h4{font-size:7.4cqw}

/* a window: nothing but the photo, the name and the first line, at scale */
.hv--mini .hv__texto strong{display:block;margin-bottom:3.4cqw;font:600 4.6cqw/1 var(--v-letra);font-stretch:var(--v-largura);letter-spacing:.12em;text-transform:uppercase}
.hv--mini .hv__h4{margin:0;font-family:var(--v-letra);font-weight:var(--v-peso);font-stretch:var(--v-largura);letter-spacing:var(--v-ls);font-size:8.6cqw;line-height:1.02;text-wrap:balance}
.hv--mini.hv--tela .hv__texto{left:6cqw;bottom:7cqw;width:66%}
.hv--mini.hv--direita .hv__texto{right:6cqw;width:54%}
.hv--mini.hv--claro .hv__texto{left:6cqw;width:46%}
.hv--mini.hv--centro .hv__texto{left:8%;right:8%;top:14%}

@container (max-width:520px){
  .hv__nav span,.hv__nav b,.hv p,.hv__oco{display:none}
  .hv__oco~.hv__texto,.hv--tela .hv__oco~.hv__texto{bottom:12px}
  .hv--tela .hv__texto{width:74%;bottom:12px}
  .hv--direita .hv__texto{width:58%}
  .hv--claro .hv__texto{width:47%}
  .sol--casa p,.sol__chamada,.sol__chip,.sol__fio,.sol__ponto,.sol__canto,.sol__seg small{display:none}
  .sol--casa h3{top:40px}
  .sol__troca{width:auto;min-width:74cqw;bottom:10px;padding:3px;border-radius:9px}
  .sol__seg{min-height:30px;padding:4px 8px;border-radius:7px}
  .sol__seg b{white-space:nowrap}
  .hv .sol__titulo{font-size:14cqw}
  .sol__titulo .sol__pa{top:34px}
  .sol__titulo .sol__pb{top:33cqw}
}

/* the large view */
.vit{width:min(1160px,calc(100vw - 20px));max-height:calc(100vh - 20px);margin:auto;padding:clamp(12px,2vw,22px);border:0;border-radius:14px;background:#14181c;color:var(--prata);box-shadow:0 40px 90px -20px #000;overflow:auto;scrollbar-color:var(--andar) transparent}
.vit::backdrop{background:#080d16d6;backdrop-filter:blur(6px)}
.vit__topo{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.vit h2{font-size:clamp(18px,2.2vw,28px);line-height:1.15}
.vit__botoes{display:flex;gap:4px;flex:none}
.vit__botoes button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff26;color:#C5CBD3;transition:background .2s,color .2s}
.vit__botoes button:hover{background:#ffffff14;color:#fff}
.vit__botoes svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vit__quadro{position:relative;width:min(100%,calc((100vh - 190px)*1.56));margin:0 auto;border-radius:10px;overflow:hidden;background:#0c0f12}
.vit__barra{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px}
.vit__barra i{width:7px;height:7px;border-radius:50%;background:#ffffff30}
.vit__corpo{position:relative;aspect-ratio:1.62}
.vit__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:12px}
.vit__pe p{font:400 clamp(14px,1.2vw,16px)/1.4 var(--text);color:var(--muted);max-width:46ch}
.vit__acoes{display:flex;flex-wrap:wrap;gap:8px}
.vit .pill--s{min-height:44px;padding:10px 20px;font-size:14px}
.vit .pill--s[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.vit__botoes button,.solc,.sol__seg,.sol__titulo span,.sol__placa{transition:none}.hv--solar[data-cena=empresa] .sol__brilho::after{animation:none}}
