.eco{
  --h:calc(100svh - var(--topo));
  --u:min(calc(100vw / 1956), calc(var(--h) / 1148));
  --cel:max(calc(100vw / 12), calc(var(--h) / 7)); 
  --vao:calc(var(--u) * 20);
  --fio:max(1px, calc(var(--u) * 1.5));
  --curva:cubic-bezier(.76,0,.24,1);
  position:relative;isolation:isolate;overflow:hidden;height:var(--h);min-height:30rem;background:var(--noite);color:#fff;
}
:where(.eco) *{margin:0}
.eco a:focus-visible,.eco button:focus-visible{outline:.2rem solid var(--ciano);outline-offset:.2rem}
.eco .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eco-fundo{position:absolute;inset:0;z-index:0;overflow:hidden}
.eco-grade{--gw:calc(12 * var(--cel) + 11 * var(--vao));--bh:calc(7 * var(--cel) + 6 * var(--vao));position:absolute;left:50%;top:50%;width:var(--gw);margin-left:calc(var(--gw) / -2);margin-top:calc(var(--bh) / -2);display:flex;flex-direction:column;gap:var(--vao);will-change:transform}
.eco-grade.loop{margin-top:calc(-1.5 * var(--bh) - var(--vao));transform-origin:50% calc(1.5 * var(--bh) + var(--vao))}
.eco-bloco{display:grid;grid-template-columns:repeat(12,var(--cel));grid-template-rows:repeat(7,var(--cel));gap:var(--vao)}
.eco-sonda{position:absolute;left:0;top:0;width:calc(100 * var(--u));height:0;visibility:hidden;pointer-events:none} 
.ft{overflow:hidden;border-radius:calc(var(--u) * 14);background:#0b0f11}
.ft img{display:block;width:100%;height:100%;object-fit:cover}

.eco-sombra{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(ellipse 55% 60% at 44% 64%,rgb(0 0 0 / .321),rgb(0 0 0 / 0)),
  linear-gradient(to bottom,rgb(0 0 0 / 0),rgb(0 0 0 / .042) 12.5%,rgb(0 0 0 / .067) 25%,rgb(0 0 0 / .125) 37.5%,rgb(0 0 0 / .182) 50%,rgb(0 0 0 / .264) 62.5%,rgb(0 0 0 / .37) 75%,rgb(0 0 0 / .466) 87.5%,rgb(0 0 0 / .541))}
.eco-tom{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgb(1 5 8 / .36)}

.eco-quadro{position:absolute;z-index:3;left:50%;top:50%;width:calc(1956 * var(--u));height:calc(1148 * var(--u));transform:translate(-50%,-50%)}

.eco-intro,.eco-formas{display:none}
.eco[data-anim] .eco-intro,.eco[data-anim] .eco-formas{display:block}
.eco[data-anim="pronto"] .eco-intro,.eco[data-anim="pronto"] .eco-formas{display:none}
.eco-intro{position:absolute;inset:0}
.il{position:absolute;width:fit-content;white-space:nowrap;clip-path:inset(-.06em -100vw -.06em -100vw)} 
.ic{display:block;will-change:transform}
.il-1{left:calc(427 * var(--u));top:calc(385 * var(--u))}
.il-1 .ic{font:500 calc(176 * var(--u))/1 var(--f-texto);letter-spacing:-.045em;color:#fff}
.il-2{left:calc(678 * var(--u));top:calc(548 * var(--u))}
.il-2 svg{display:block;width:calc(882 * var(--u));height:auto;fill:var(--ciano)}
.il-3{left:calc(680 * var(--u));top:calc(753 * var(--u))}
.il-3 .ic{display:flex;align-items:center;gap:calc(60 * var(--u));color:#fff}
.il-3 svg{display:block;height:auto}
.il-3 .g-ci{width:calc(308 * var(--u))}
.il-3 .g-ph{width:calc(297 * var(--u))}
.il-3 .pt{display:block;width:calc(10 * var(--u));height:calc(10 * var(--u));background:currentColor}

.eco-formas{position:absolute;inset:0;z-index:4;pointer-events:none}
.fm{position:absolute;left:0;top:0;width:1px;height:1px;background:var(--ciano);transform-origin:0 0;opacity:0;will-change:transform}

.eco-cards{position:absolute;inset:0}
.ec{position:absolute;top:calc(137 * var(--u));width:calc(720 * var(--u));height:calc(880 * var(--u));overflow:hidden}
.ec-citiloc{left:calc(210 * var(--u))}
.ec-ph{left:calc(1026 * var(--u))}
.ec-a{position:absolute;inset:0;z-index:0;display:block}
.eco[data-anim]:not([data-anim="pronto"]) .ec,.eco[data-anim]:not([data-anim="pronto"]) .ec-btn{pointer-events:none}

.ec-base{position:absolute;inset:0;z-index:1;color:#fff;transition:color .25s ease;pointer-events:none}
.ec-c{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(128 * var(--u)) calc(102 * var(--u)) calc(102 * var(--u)) calc(148 * var(--u))}
.ec-t{font:italic 500 calc(52 * var(--u))/calc(62 * var(--u)) var(--f-texto);text-transform:uppercase}
.mk{display:block;width:fit-content;overflow:hidden;padding-right:.12em;margin-right:-.12em} 
.tl{display:block;will-change:transform}
.ec-p{margin-top:calc(25 * var(--u));max-width:calc(470 * var(--u));font:500 calc(28 * var(--u))/calc(42.5 * var(--u)) var(--f-texto)}
.ec-btn{position:relative;isolation:isolate;display:flex;align-items:center;gap:.55em;width:fit-content;height:calc(74 * var(--u));margin-top:auto;padding:0 calc(16 * var(--u));border:var(--fio) solid currentColor;color:inherit;font:600 calc(21 * var(--u))/1 var(--f-texto);text-transform:uppercase;text-decoration:none;pointer-events:auto;transition:padding .45s var(--ease),color .2s ease}
.ec-cheio .ec-btn{pointer-events:none} 
.ec-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ciano);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ec-seta{flex:none;width:.5em;height:.72em;fill:none;stroke:currentColor;stroke-width:1.9}
.ec-logo{display:block;overflow:hidden;height:calc(112 * var(--u));margin-top:calc(58 * var(--u))}
.ec-logo svg{display:block;height:auto}
.ec-citiloc .ec-logo svg{width:calc(404 * var(--u))}
.ec-ph .ec-logo svg{width:calc(385 * var(--u))}

.ec-borda{position:absolute;inset:0;z-index:3;border:var(--fio) solid var(--ciano);opacity:0;pointer-events:none}
.ec-cheio{position:absolute;inset:0;z-index:2;overflow:hidden;transform:translate3d(0,101%,0);transition:transform .62s var(--curva);pointer-events:none}
.ec-cheio-in{position:absolute;inset:0;background:#fff;color:var(--tinta);transform:translate3d(0,-101%,0);transition:transform .62s var(--curva)}
@keyframes ec-fio{0%{opacity:0}18%{opacity:1}72%{opacity:1}100%{opacity:0}}
.ec:has(.ec-base .ec-btn:focus-visible) .ec-base{color:var(--ciano)}
.ec:has(.ec-base .ec-btn:focus-visible) .ec-borda{animation:ec-fio .9s both}
.ec:has(.ec-base .ec-btn:focus-visible) .ec-cheio,.ec:has(.ec-base .ec-btn:focus-visible) .ec-cheio .ec-cheio-in{transform:none}
.ec:has(.ec-base .ec-btn:focus-visible) .ec-btn{color:var(--tinta);padding-inline:calc(28 * var(--u));transition:padding .45s var(--ease),color .2s ease .1s}
.ec:has(.ec-base .ec-btn:focus-visible) .ec-btn::before{transform:scaleX(1)}
@media (hover:hover){
  .ec:hover .ec-base{color:var(--ciano)}
  .ec:hover .ec-borda{animation:ec-fio .9s both}
  .ec:hover .ec-cheio,.ec:hover .ec-cheio .ec-cheio-in{transform:none}
  .ec:has(.ec-base .ec-btn:hover) .ec-btn{color:var(--tinta);padding-inline:calc(28 * var(--u));transition:padding .45s var(--ease),color .2s ease .1s}
  .ec:has(.ec-base .ec-btn:hover) .ec-btn::before{transform:scaleX(1)}
}

@media (max-width:820px){
  .eco{--u:calc(100vw / 760);height:auto;min-height:var(--h)}
  .eco-quadro{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;padding:calc(56 * var(--u)) calc(40 * var(--u))}
  .eco-intro{inset:0;flex-direction:column;justify-content:center;gap:calc(34 * var(--u));padding-inline:calc(40 * var(--u))}
  .eco[data-anim] .eco-intro{display:flex}
  .eco[data-anim="pronto"] .eco-intro{display:none}
  .il{position:relative;left:auto;top:auto}
  .il-1 .ic{font-size:calc(124 * var(--u))}
  .il-2 svg{width:calc(560 * var(--u))}
  .il-3 .ic{gap:calc(36 * var(--u))}
  .il-3 .g-ci{width:calc(200 * var(--u))}
  .il-3 .g-ph{width:calc(190 * var(--u))}
  .eco-cards{position:relative;inset:auto;display:grid;gap:calc(32 * var(--u))}
  .ec{position:relative;left:auto;top:auto;width:100%;height:auto}
  .ec-base{position:relative;inset:auto}
  .ec-c{position:relative;inset:auto;padding:calc(64 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u))}
  .ec-t{font-size:calc(58 * var(--u));line-height:calc(70 * var(--u))}
  .ec-p{font-size:calc(30 * var(--u));line-height:calc(44 * var(--u));max-width:none;margin-top:calc(28 * var(--u))}
  .ec-btn{margin-top:calc(44 * var(--u));height:calc(76 * var(--u));font-size:calc(24 * var(--u));padding:0 calc(22 * var(--u))}
  .ec-logo{height:auto;margin-top:calc(40 * var(--u))}
  .ec-citiloc .ec-logo svg{width:calc(300 * var(--u))}
  .ec-ph .ec-logo svg{width:calc(290 * var(--u))}
}