@font-face{font-family:Poppins;src:url('../assets/fonts/poppins-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('../assets/fonts/poppins-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url('../assets/fonts/poppins-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url('../assets/fonts/archivo-latin-var.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../assets/fonts/source-serif-4-latin-var.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../assets/fonts/source-serif-4-latin-italic-var.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap}
:root{
  --grafite:#1D2125;--chumbo:#3B434A;--andar:#525B62;--concreto:#8A9197;--nevoa:#D6D9DA;--prata:#EEF1F2;--luz:#E2AE62;--muted:#B9C0C5;
  --falha:#F09A7E;--gutter:clamp(20px,6vw,104px);--max:1360px;
  --display:Archivo,'Arial Narrow',Arial,sans-serif;--text:'Source Serif 4',Georgia,serif;--ui:Poppins,Arial,Helvetica,sans-serif;
  /* silhouette of the building measured on the photo, so no skyline is left around it */
  --sil:polygon(33.16% 0,74.77% 0,74.77% 8.48%,80.62% 8.48%,80.62% 14.62%,81.66% 14.62%,81.66% 33.33%,82.96% 33.33%,82.96% 38.16%,81.14% 38.16%,81.14% 47.66%,90.77% 47.66%,90.77% 57.31%,93.5% 58.19%,93.5% 62.13%,95.19% 62.13%,95.19% 100%,4.94% 100%,4.94% 62.13%,8.58% 62.13%,8.58% 59.65%,13% 52.92%,12.48% 52.92%,12.48% 47.66%,19.25% 47.66%,19.25% 38.16%,16.38% 38.16%,16.38% 33.33%,18.86% 33.33%,18.86% 14.62%,19.5% 14.62%,19.5% 8.48%,33.16% 8.48%);
  scrollbar-color:var(--andar) var(--grafite);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grafite);color:var(--prata);font:400 18px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--luz);color:#1D2125}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--luz);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-stretch:118%;font-weight:500;letter-spacing:-.02em;line-height:1.02;margin:0;text-wrap:balance}
h2{font-size:clamp(38px,4.8vw,70px)}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border-radius:99px;background:linear-gradient(145deg,#fff,#d0d4dc);color:#15171c;font:500 15px/1.3 var(--ui);box-shadow:inset 0 1px #fff,0 6px 20px #0004;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pill:hover{transform:translateY(-2px)}
.pill--dark{background:var(--grafite);color:var(--prata);box-shadow:0 6px 20px #0003}
.tag-ex{font:400 13px/1.4 var(--ui);color:var(--muted)}

/* header: the floors are the navigation */
.pular{position:absolute;left:16px;top:-80px;z-index:60;background:var(--prata);color:var(--grafite);font:500 14px var(--ui);padding:12px 16px;border-radius:8px}
.pular:focus{top:16px}
.bar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1240px,calc(100% - 24px));min-height:62px;display:flex;align-items:center;gap:16px 24px;padding:8px 12px 8px 22px;border-radius:9px;background:#080d16e0;border:1px solid #ffffff14;font:500 14px var(--ui);backdrop-filter:blur(10px)}
.bar__brand{display:flex;align-items:center;gap:10px;font:700 13px Arial,sans-serif;letter-spacing:.15em;white-space:nowrap}
.bar__brand b{font:italic 900 26px Arial,sans-serif;letter-spacing:0;border-left:1.5px solid #EDF1F6;padding-left:6px}
.bar__floors{display:flex;gap:4px;margin:0 auto 0 8px}
.bar__floors a{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:99px;color:#C5CBD3;transition:color .2s,background .2s}
.bar__floors a:hover{color:#fff;background:#ffffff0f}
.bar__floors a::before{content:"";width:6px;height:6px;border-radius:50%;background:#ffffff33}
.bar__floors a[aria-current]{color:#fff}
.bar__floors a[aria-current]::before{background:var(--luz);box-shadow:0 0 0 4px #e2ae6226}
.bar__ramo{margin-left:auto;min-width:0}
.bar__idiomas{display:flex;gap:2px;font:500 12px/1 var(--ui);letter-spacing:.04em}
.bar__idiomas a{padding:8px 7px;border-radius:99px;color:#8F98A1;transition:color .2s,background .2s}
.bar__idiomas a:hover{color:#fff}
.bar__idiomas a[aria-current]{color:#fff;background:#ffffff14}
@media (max-width:720px){.bar__idiomas{display:none}}
.bar__wa{flex:none;border:1px solid #ffffff30;border-radius:99px;padding:10px 17px;white-space:nowrap;transition:border-color .2s}
.bar__wa:hover{border-color:#ffffff80}
@media (max-width:1180px){.bar__floors{margin-left:0}.bar__floors a{padding:9px 9px}.bar__long{display:none}}
@media (max-width:980px){.bar__ramo{display:none}}
@media (max-width:860px){.bar__floors{display:none}.bar__wa{margin-left:auto;font-size:13px;padding:9px 13px}.bar__long{display:none}}

/* como começa: same cloud crossing the home uses, with the concepts given real size */
.clouds{position:relative;height:300px;margin:-150px 0;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent 22%,#9aa1a6 40%,var(--nevoa) 58%)}
.clouds::before{content:"";position:absolute;inset:0;background:url('../assets/find-fog.webp') center 40%/cover no-repeat;filter:grayscale(1) brightness(.93);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 55%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 55%,transparent)}
.start{position:relative;background:var(--nevoa);color:var(--grafite);padding:clamp(190px,17vw,240px) 0 clamp(70px,8vw,120px)}
.start__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.start h2{font-size:clamp(46px,6vw,92px);line-height:.98}
.start p.lead{margin:0 0 30px;max-width:30em;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:#2d3338}
@media (max-width:860px){.start__grid{grid-template-columns:1fr}}

/* the elevator: the same building cut in three, each slice is a door to that floor */
.elev{background:var(--grafite);padding:clamp(70px,8vw,120px) 0 clamp(60px,7vw,100px);overflow:hidden}
.elev__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center}
.elev__tower{position:relative;display:flex;flex-direction:column;gap:14px;width:min(100%,720px);margin-left:auto}
.elev__floor{position:relative;display:block;height:var(--h);isolation:isolate}
.elev__cut{position:absolute;right:0;top:0;bottom:0;width:62%;overflow:hidden;transform:translateX(var(--dx));transition:filter .45s,transform .6s cubic-bezier(.2,.8,.2,1);filter:saturate(.55) brightness(.62)}
.elev__cut img{position:absolute;left:0;width:100%;max-width:none;clip-path:var(--sil)}
.elev__floor:hover .elev__cut,.elev__floor:focus-visible .elev__cut,.elev__floor[aria-current] .elev__cut{filter:none}
.elev__floor:hover .elev__cut{transform:translateX(calc(var(--dx) - 10px))}
.elev__label{position:absolute;left:0;top:50%;transform:translateY(-50%);width:36%;z-index:2}
.elev__label b{display:block;font:500 clamp(19px,1.9vw,27px)/1.12 var(--display);font-stretch:118%;letter-spacing:-.015em}
.elev__label small{display:block;margin-top:7px;font:400 13px/1.35 var(--ui);color:var(--muted)}
.elev__floor[aria-current] .elev__label small{color:var(--luz)}
@media (max-width:860px){.elev__grid{grid-template-columns:1fr}.elev__cut{width:58%}.elev__label{width:40%}}

.foot{background:var(--grafite);color:#B4BBC0;padding:30px 0;font:400 14px var(--ui);border-top:1px solid #ffffff12}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot small{margin-left:auto;font-size:14px}

/* elevator doors between the three pages */
.doors{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;visibility:hidden}
.doors i{display:block;background:linear-gradient(90deg,#14171a,#1d2125);transform:scaleX(0);transition:transform .52s cubic-bezier(.7,0,.2,1)}
.doors i:first-child{transform-origin:left;box-shadow:inset -1px 0 #ffffff24}
.doors i:last-child{transform-origin:right;background:linear-gradient(270deg,#14171a,#1d2125)}
.doors b{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:500 clamp(30px,4vw,56px)/1 var(--display);font-stretch:118%;letter-spacing:-.02em;color:var(--prata);opacity:0;transition:opacity .25s}
.doors.is-shut,.doors.is-opening{visibility:visible}
.doors.is-shut{pointer-events:auto}
.doors.is-shut i{transform:none}
.doors.is-shut b{opacity:1}
@media (prefers-reduced-motion:reduce){.doors i,.doors b,.pill,.concepts img,.elev__cut{transition:none}}

/* the label with the current branch, the variation buttons and the chooser */
/* the example label: what is shown, and a small button inside it to change it */
.ramo{display:inline-flex;align-items:center;gap:9px;height:42px;max-width:100%;padding:0 5px 0 17px;border-radius:99px;background:linear-gradient(180deg,#ffffff14,#ffffff08);box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px #ffffff14,0 10px 28px -12px #000a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:400 13.5px/1 var(--ui);color:#C5CBD3;text-align:left;white-space:nowrap;transition:background .2s,box-shadow .2s}
.ramo>span{color:#8F98A1;font-size:12.5px}
.ramo b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:#fff}
.ramo em{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;margin-left:5px;padding:0 13px 0 10px;border-radius:99px;background:#E2AE621c;box-shadow:inset 0 0 0 1px #E2AE6233;font-style:normal;font-weight:500;color:var(--luz);transition:background .2s,color .2s}
.ramo em svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ramo:hover{box-shadow:inset 0 0 0 1px #ffffff38,inset 0 1px #ffffff1f,0 10px 28px -12px #000a}
.ramo:hover em{background:var(--luz);color:#1D2125}
.ramo--curto{height:40px;padding-left:15px}
.ramo--curto em{height:30px}
.ramo em i{font-style:normal}
[data-ramo]{min-width:0;max-width:100%}
/* on a phone the change button keeps only its symbol, so the name of the business fits */
@media (max-width:480px){.ramo{padding-left:14px;gap:7px}.ramo em{width:32px;padding:0;justify-content:center;margin-left:2px}.ramo--curto em{width:30px}.ramo em i{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.ramo-linha{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.vars{display:flex;flex-wrap:wrap;gap:6px}
.vars[hidden]{display:none}
.vars button{min-height:34px;padding:6px 13px;border-radius:99px;font:400 13px/1.2 var(--ui);color:#C5CBD3;box-shadow:inset 0 0 0 1px #ffffff1f;transition:color .2s,background .2s,box-shadow .2s}
.vars button:hover{color:#fff;box-shadow:inset 0 0 0 1px #ffffff55}
.vars [aria-pressed=true],.vars [aria-pressed=true]:hover{background:var(--prata);color:#15171c;box-shadow:none}
.exemplo-nota{font:400 13px/1.45 var(--ui);color:var(--muted)}
.exemplo-nota a{color:var(--luz);text-decoration:underline;text-underline-offset:3px;margin-left:6px;white-space:nowrap}
.exemplo-nota a[hidden]{display:none}

.por{width:min(1120px,calc(100vw - 24px));max-height:calc(100vh - 24px);margin:auto;padding:0;border:0;border-radius:14px;background:#14181c;color:var(--prata);box-shadow:0 40px 90px -20px #000;overflow:auto;scrollbar-color:var(--andar) transparent}
.por::backdrop{background:#080d16c9;backdrop-filter:blur(6px)}
.por__in{position:relative;padding:clamp(26px,4vw,52px)}
.por__x{position:absolute;right:16px;top:16px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#C5CBD3;transition:background .2s,color .2s}
.por__x:hover{background:#ffffff14;color:#fff}
.por__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.por h2{font-size:clamp(34px,4.4vw,62px);padding-right:48px}
.por__busca{display:flex;align-items:center;gap:12px;margin:clamp(18px,3vh,28px) 0;padding:12px 2px;border-bottom:1px solid #ffffff40;transition:border-color .2s}
.por__busca:focus-within{border-color:var(--luz)}
.por__busca svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.por__busca input{flex:1;min-width:0;border:0;background:none;outline:0;color:#fff;font:400 clamp(18px,1.8vw,24px)/1.3 var(--text);caret-color:var(--luz)}
.por__busca input::placeholder{color:#8e979d}
.por__busca input::-webkit-search-cancel-button{display:none}
.por__vazio{font:400 18px/1.5 var(--text);color:#dfe3e6;margin-bottom:12px}
.por__vazio[hidden]{display:none}
.por__vazio a{color:var(--luz);text-decoration:underline;text-underline-offset:3px}
.por__grupos{columns:3 280px;column-gap:clamp(24px,3vw,44px)}
.por__grupos section{break-inside:avoid;margin-bottom:24px}
.por__grupos section[hidden]{display:none}
.por h3{font:500 13px/1.3 var(--ui);font-stretch:100%;letter-spacing:0;color:var(--muted);margin-bottom:6px}
.por ul{list-style:none;margin:0;padding:0}
.por li[hidden]{display:none}
.por li button{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:36px;padding:6px 8px;margin-left:-8px;border-radius:7px;text-align:left;font:500 15px/1.3 var(--ui);color:#fff;transition:background .15s}
.por li button:hover{background:#ffffff12}
.por li i{flex:none;width:14px;height:14px;margin-top:3px;border-radius:4px;background:linear-gradient(135deg,var(--d) 50%,var(--c) 50%);box-shadow:0 0 0 1px #ffffff2e}
.por li span{flex:1}
.por li small{flex:none;font:400 12px/1.6 var(--ui);color:#8e979d}
.por li .is-breve{color:#aeb6bb;font-weight:400}
.por li.is-atual button{background:#e2ae6222}

.fn-portas{position:absolute;inset:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.fn-portas i{display:block;background:linear-gradient(90deg,#14171a,#1d2125)}
.fn-portas i:first-child{transform-origin:left;box-shadow:inset -1px 0 #ffffff2e}
.fn-portas i:last-child{transform-origin:right;background:linear-gradient(270deg,#14171a,#1d2125)}
.fn-portas b{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:500 clamp(24px,3.4vw,46px)/1 var(--display);font-stretch:118%;letter-spacing:-.02em;color:var(--prata);opacity:0;transition:opacity .2s}
.fn-aviso{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:95;margin:0;padding:11px 18px;max-width:calc(100vw - 28px);border-radius:9px;background:var(--prata);color:#15171c;font:500 14px/1.35 var(--ui);box-shadow:0 14px 40px #0009;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.fn-aviso.on{opacity:1;transform:translate(-50%,0)}

/* ?mini: one example alone, filling the frame, so its thumbnail can be photographed */
html.mini .bar,html.mini .doors{display:none}
@media (prefers-reduced-motion:reduce){.ramo,.vars button,.fn-aviso,.por__x,.por li button{transition:none}}

/* Abaixo de 800px a cena vem das cópias de 1280px que já existem no projeto. Só muda
   de qual arquivo o pixel vem: posição, tamanho, máscara e filtro continuam os da regra de cima. */
@media (max-width:800px){
  .clouds::before{background-image:url('../assets/find-fog-mobile.webp')}
}