/* base */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,video{max-width:100%}
[hidden]{display:none!important}
/* Layout: abertura escura em tela cheia com o símbolo da ALLO em 3D, que é o próprio menu (cada peça leva a um caminho).
   Depois, faixas alternadas claro/escuro com movimento ligado à rolagem. Visual único da marca: grafite, concreto, sálvia; laranja só no "agora". */
:root{
  --concreto:#F5F5F0; --papel:#FBFBF8; --grafite:#2F2D2A; --noite:#1C1B19; --noite-2:#262422; --salvia:#4E7A75; --salvia-clara:#A1C1BE;
  --agora:#FF4C2B; --texto:#2F2D2A; --texto-2:#66635D; --linha:#DCDCD3; --linha-noite:#3B3936; --claro:#F5F5F0; --claro-2:#A8A69E;
  --display:"Archivo","IBM Plex Sans",system-ui,sans-serif; --corpo:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --larg:1200px; --curva:cubic-bezier(.16,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--noite);color:var(--claro);font:400 16px/1.6 var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p{margin:0}
a{color:inherit}
h1,h2,.d{font-family:var(--display);font-stretch:118%;font-weight:700;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
:focus-visible{outline:2px solid var(--salvia-clara);outline-offset:3px;border-radius:4px}
.w{max-width:var(--larg);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.rot{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--claro-2)}
.claro{background:var(--concreto);color:var(--texto)}
.claro .rot{color:var(--texto-2)}
.marca{display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.m-allo{--m:url(/assets/img/marca-allo.png);aspect-ratio:480/90}
.m-hub{--m:url(/assets/img/marca-hub.png);aspect-ratio:480/118}
.sim{display:block;aspect-ratio:767/900}
#s-allo .a{fill:var(--salvia-clara)} #s-allo .b{fill:currentColor}
.seta{transition:transform .25s var(--curva)}

.bt{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--corpo);text-decoration:none;padding:15px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bt:hover .seta{transform:translateX(4px)}
.bt-s{background:var(--salvia);color:#fff}.bt-s:hover{background:#5B8A85}
.bt-c{background:var(--claro);color:var(--grafite)}.bt-c:hover{background:#fff}
.bt-l{border-color:var(--linha-noite);color:var(--claro)}.bt-l:hover{border-color:var(--claro-2)}
.claro .bt-l{border-color:var(--linha);color:var(--texto)}.claro .bt-l:hover{border-color:var(--texto-2)}

/* topo */
.topo{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto 0;z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.topo.rolou{background:color-mix(in srgb,var(--noite) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--linha-noite)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--noite)}
.topo .w{display:flex;align-items:center;gap:26px;padding-block:16px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--claro)}
.logo .sim{width:24px}.logo .marca{width:76px}
.topo nav{display:flex;gap:28px;margin-left:auto;font-size:14.5px}
.topo nav a{text-decoration:none;color:var(--claro-2);position:relative;padding-block:6px;transition:color .2s}
.topo nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--claro);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--curva)}
.topo nav a:hover{color:var(--claro)}.topo nav a:hover::after{transform:scaleX(1);transform-origin:left}
.topo .bt{padding:10px 16px;font-size:14px}
@media (max-width:780px){.topo nav{display:none}.topo .bt{margin-left:auto}}

/* abertura */
.palco{position:relative;min-height:min(100vh,920px);min-height:min(100svh,920px);display:grid;overflow:hidden;
  background:radial-gradient(55% 55% at 73% 48%,#34322F 0%,var(--noite-2) 45%,var(--noite) 100%)}
.cena{position:absolute;inset:0 0 0 47%;touch-action:pan-y}
.cena canvas{display:block;width:100%;height:100%}
.cena .sim{display:none;position:absolute;inset:18% 22%;margin:auto;max-height:64%;color:var(--claro)}
.sem3d .cena .sim{display:block}
.palco .w{position:relative;width:100%;display:grid;align-content:end;padding-block:120px 54px;pointer-events:none}
.palco h1{font-size:clamp(44px,6.6vw,98px);max-width:8.5em;margin-block:18px 22px}
.palco h1 span{display:block;overflow:hidden}
.palco h1 span i{display:block;font-style:normal;transform:translateY(105%);animation:sobe 1s var(--curva) forwards}
.palco h1 span:nth-child(2) i{animation-delay:.12s;color:var(--salvia-clara)}
@keyframes sobe{to{transform:none}}
.palco .lead{font-size:clamp(16.5px,1.4vw,19px);color:var(--claro-2);max-width:27em;line-height:1.55}
.dica{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--claro)}
.dica b{width:34px;height:34px;border-radius:50%;border:1px solid var(--claro-2);display:grid;place-items:center;position:relative}
.dica b::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--salvia-clara);animation:pulso 2.2s ease-out infinite}
@keyframes pulso{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
/* etiquetas das peças */
.et{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:9px;padding:8px 13px 8px 10px;border-radius:999px;border:1px solid var(--linha-noite);background:color-mix(in srgb,var(--noite) 72%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--claro);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;will-change:transform;opacity:0;transition:opacity .5s,background .2s,border-color .2s,color .2s}
.pronto .et{opacity:1}
.et::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--salvia-clara);transition:transform .25s var(--curva)}
.et.on{background:var(--claro);color:var(--grafite);border-color:var(--claro)}
.et.on::before{background:var(--salvia);transform:scale(1.5)}
.et .seta{width:0;opacity:0;transition:width .25s var(--curva),opacity .2s}
.et.on .seta{width:14px;opacity:1}
.sem3d .et{position:static;opacity:1}
.sem3d .ets{position:absolute;left:0;right:0;bottom:8%;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.painel{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:54px;z-index:3;width:min(300px,42vw);border-top:1px solid var(--linha-noite);padding-top:14px;min-height:92px}
.painel .rot{display:block;margin-bottom:10px}
.painel p{font:600 20px/1.25 var(--display);font-stretch:112%;letter-spacing:-.01em;transition:opacity .2s}
.assin{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:96px;font:400 11.5px/1.5 var(--mono);color:var(--claro-2);text-align:right;letter-spacing:.04em}
@media (max-width:860px){
  .palco{min-height:0}
  .cena{position:relative;inset:auto;height:min(52vh,430px);height:min(52svh,430px);margin-top:64px;grid-row:1}
  .palco .w{grid-row:2;padding-block:6px 40px}
  .painel,.assin{display:none}
  .et{font-size:10.5px;padding:7px 10px 7px 8px}
}

/* faixa que corre */
.corre{border-block:1px solid var(--linha-noite);overflow:hidden;background:var(--noite)}
.corre div{display:flex;width:max-content;animation:corre 38s linear infinite}
.corre span{display:flex;align-items:center;gap:34px;padding:22px 17px;font:600 clamp(20px,2.6vw,34px)/1 var(--display);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase;color:var(--claro);white-space:nowrap}
.corre span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--claro-2)}
.corre .sim{width:22px;color:var(--claro);animation:gira 9s linear infinite}
@keyframes corre{to{transform:translateX(-50%)}}
@keyframes gira{to{transform:rotate(360deg)}}

/* manifesto */
.manif .w{padding-block:clamp(90px,13vw,170px)}
.manif p.d{font-size:clamp(30px,5vw,68px);font-weight:600;line-height:1.08;max-width:17em;margin-top:26px}
.manif p.d span{opacity:var(--o,1);transition:opacity .25s linear}
.manif p.d em{font-style:normal;color:var(--salvia)}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--linha)}
.tres div{padding:26px 26px 0 0;border-right:1px solid var(--linha);margin-right:26px}
.tres div:last-child{border:0;margin:0}
.tres h3{font:700 21px/1.15 var(--display);font-stretch:112%;margin-bottom:10px}
.tres p{color:var(--texto-2);font-size:15.5px}
.tres .n{font:500 11.5px/1 var(--mono);color:var(--salvia);letter-spacing:.14em;display:block;margin-bottom:28px}
@media (max-width:760px){.tres{grid-template-columns:1fr}.tres div{border-right:0;margin-right:0;padding-bottom:22px;border-bottom:1px solid var(--linha)}.tres div:last-child{border-bottom:0}}

/* HUB */
.hub .w{padding-block:clamp(80px,11vw,150px)}
.hub .cab{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:30px}
.hub .cab .marca{width:clamp(150px,20vw,250px);color:var(--claro)}
.selo{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--linha-noite);border-radius:999px;padding:8px 12px;color:var(--claro)}
.selo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--agora)}
.hub h2{font-size:clamp(32px,5vw,68px);max-width:12em}
.hub .lead{color:var(--claro-2);font-size:18px;max-width:34em;margin-top:24px}
.vitrine{perspective:1600px;margin-top:clamp(48px,7vw,84px);position:relative}
.janela{border-radius:12px;overflow:hidden;border:1px solid var(--linha-noite);background:#fff;box-shadow:0 60px 120px -50px rgba(0,0,0,.9);transform-origin:50% 100%;transform:rotateX(calc((1 - var(--p,1))*22deg)) scale(calc(.86 + var(--p,1)*.14));will-change:transform}
.janela .barra{display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--noite-2);border-bottom:1px solid var(--linha-noite)}
.janela .barra i{width:8px;height:8px;border-radius:50%;background:var(--linha-noite)}
.janela .barra span{margin-left:10px;font:400 11.5px/1 var(--mono);color:var(--claro-2)}
.janela img{display:block;width:100%;height:auto}
.fone{position:absolute;right:5%;bottom:-40px;width:18%;min-width:112px;border-radius:20px;overflow:hidden;border:5px solid #0F0F0E;box-shadow:0 30px 60px -18px rgba(0,0,0,.85);background:#fff;transform:translateY(calc((1 - var(--p,1))*120px));will-change:transform}
.fone img{display:block;width:100%}
.frentes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:92px;border-top:1px solid var(--linha-noite)}
.frentes a{display:block;text-decoration:none;padding:24px 20px 26px 0;border-right:1px solid var(--linha-noite);margin-right:20px;position:relative}
.frentes a:last-child{border:0;margin:0}
.frentes a::before{content:"";position:absolute;left:0;right:20px;top:-1px;height:2px;background:var(--salvia-clara);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--curva)}
.frentes a:hover::before{transform:scaleX(1)}
.frentes h3{font:700 19px/1.2 var(--display);font-stretch:112%;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
.frentes a:hover .seta{transform:translate(3px,-3px)}
.frentes p{color:var(--claro-2);font-size:14.5px;line-height:1.55}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:46px}
@media (max-width:860px){.frentes{grid-template-columns:1fr 1fr}.frentes a{border-right:0;margin-right:0}.frentes a::before{right:0}}
@media (max-width:460px){.frentes{grid-template-columns:1fr}.frentes a{border-bottom:1px solid var(--linha-noite)}}

/* planos */
.planos .w{padding-block:clamp(80px,11vw,140px)}
.planos .topo-p{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end}
.planos h2{font-size:clamp(34px,6vw,84px)}
.planos h2 b{font-weight:800;color:var(--salvia);font-variant-numeric:tabular-nums}
.planos .lead{color:var(--texto-2);font-size:18px;max-width:30em}
.cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:14px;transition:transform .35s var(--curva),border-color .2s,box-shadow .35s}
.cartao:hover{transform:translateY(-6px);border-color:var(--salvia);box-shadow:0 26px 40px -30px rgba(47,45,42,.5)}
.cartao h3{font:700 19px/1.2 var(--display);font-stretch:112%}
.cartao .preco{font:800 46px/1 var(--display);font-stretch:112%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cartao .preco small{font:400 14px/1 var(--corpo);letter-spacing:0;color:var(--texto-2)}
.cartao p{color:var(--texto-2);font-size:14.5px;line-height:1.5;flex:1}
.cartao .cabe{font:400 12px/1.4 var(--mono);color:var(--texto-2);border-top:1px solid var(--linha);padding-top:14px}
.pe-p{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;margin-top:28px;color:var(--texto-2);font-size:14.5px}
@media (max-width:860px){.planos .topo-p,.cartoes{grid-template-columns:1fr}}

/* contato */
.contato .w{padding-block:clamp(80px,11vw,150px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.contato h2{font-size:clamp(40px,7vw,104px)}
.contato h2 em{font-style:normal;color:var(--salvia-clara)}
.contato .lead{color:var(--claro-2);font-size:18px;max-width:26em;margin-top:24px}
form{display:grid;gap:16px;align-content:start}
label{display:grid;gap:7px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--claro-2)}
input,textarea{font:400 17px/1.4 var(--corpo);color:var(--claro);background:transparent;border:0;border-bottom:1px solid var(--linha-noite);border-radius:0;padding:10px 0 12px;width:100%;transition:border-color .2s}
input:focus,textarea:focus{outline:0;border-color:var(--salvia-clara)}
textarea{min-height:110px;resize:vertical}
.retorno{font-size:14px;color:var(--claro-2);min-height:1.5em}
@media (max-width:860px){.contato .w{grid-template-columns:1fr;gap:36px}}

/* rodapé */
.rodape{border-top:1px solid var(--linha-noite);overflow:hidden}
.rodape .w{padding-block:34px 0}
.rodape .linha{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:14px;color:var(--claro-2)}
.rodape nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-left:auto}
.rodape a{text-decoration:none}.rodape nav a:hover{color:var(--claro)}
.rodape .giga{width:100%;margin-top:44px;color:var(--noite-2);transform:translateY(calc(18% + (1 - var(--p,1))*30%));will-change:transform}
.rodape .fim{font:400 12px/1.5 var(--mono);color:var(--claro-2);margin-top:18px}

/* entrada ao rolar (só o que estava abaixo da dobra recebe .pre) */
.pre{opacity:0;transform:translateY(34px)}
.entra{opacity:1;transform:none;transition:opacity .8s var(--curva),transform .8s var(--curva);transition-delay:var(--at,0s)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .palco h1 span i{transform:none}
  .janela,.fone,.rodape .giga{transform:none}
  .pre{opacity:1;transform:none}
}

/* cortina de troca de página */
.cortina{position:fixed;inset:0;z-index:60;background:var(--salvia);transform:translateY(101%);pointer-events:none;display:grid;place-items:center}
.cortina .sim{width:64px;color:var(--claro);animation:gira 1.2s linear infinite}
.cortina.sobe{transform:none;transition:transform .42s cubic-bezier(.7,0,.3,1)}
.cortina.sai{transform:translateY(-101%);transition:transform .46s cubic-bezier(.7,0,.3,1)}
.chegando .cortina{transform:none}