:root{
  --infra-graphite:#101820;
  --infra-blue:#173e64;
  --infra-steel:#3f6f8d;
  --infra-cyan:#37c4d4;
  --infra-orange:#e8873a;
  --infra-yellow:#e7be4a;
  --infra-concrete:#e9eceb;
  --infra-white:#f6f8f8;
  --infra-black:#050a0e;
  --infra-ink:#1e2b35;
  --infra-muted:#6d7880;
  --infra-line:rgba(16,24,32,.12);
  --infra-radius:22px;
}

.infra-page{
  overflow:hidden;
  background:var(--infra-white);
  color:var(--infra-ink);
}

.infra-page *{
  box-sizing:border-box;
}

.infra-shell{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

.infra-section{
  position:relative;
  padding:112px 0;
}

.infra-section--light{
  background:linear-gradient(180deg,#f7f9f9,#e9edee);
}

.infra-section--dark,
.infra-section--availability,
.infra-section--lifecycle{
  color:#fff;
  background:
    radial-gradient(circle at 82% 10%,rgba(55,196,212,.12),transparent 30%),
    linear-gradient(135deg,#050a0e,#151f27);
}

.infra-section--steel{
  color:#fff;
  background:
    radial-gradient(circle at 16% 8%,rgba(232,135,58,.13),transparent 28%),
    linear-gradient(135deg,#142a3d,#294f68);
}

.infra-section--energy{
  color:#fff;
  background:
    radial-gradient(circle at 80% 18%,rgba(231,190,74,.18),transparent 30%),
    linear-gradient(135deg,#222a1e,#4c4a24);
}

.infra-section--automation{
  color:#fff;
  background:
    radial-gradient(circle at 18% 20%,rgba(55,196,212,.14),transparent 28%),
    linear-gradient(135deg,#132b38,#1e5361);
}

.infra-section--environments{
  color:#fff;
  background:
    radial-gradient(circle at 85% 12%,rgba(232,135,58,.13),transparent 28%),
    linear-gradient(135deg,#111a22,#283947);
}

.infra-section--ecosystem{
  color:#fff;
  background:
    radial-gradient(circle at 50% 40%,rgba(55,196,212,.13),transparent 35%),
    linear-gradient(135deg,#050a0e,#173148);
}

.infra-section--value{
  background:linear-gradient(135deg,#eef4f6,#f5f1e8);
}

.infra-kicker,
.infra-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--infra-blue);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.infra-section--dark .infra-kicker,
.infra-section--steel .infra-kicker,
.infra-section--energy .infra-kicker,
.infra-section--automation .infra-kicker,
.infra-section--availability .infra-kicker,
.infra-section--lifecycle .infra-kicker,
.infra-section--environments .infra-kicker,
.infra-section--ecosystem .infra-kicker,
.infra-cta .infra-kicker{
  color:var(--infra-cyan);
}

.infra-kicker::before,
.infra-eyebrow::before{
  content:"";
  width:34px;
  height:2px;
  background:currentColor;
}

.infra-hero{
  display:flex;
  min-height:92vh;
  align-items:center;
  padding:150px 0 100px;
  color:#fff;
  background:
    radial-gradient(circle at 76% 45%,rgba(55,196,212,.18),transparent 24%),
    radial-gradient(circle at 68% 70%,rgba(232,135,58,.12),transparent 32%),
    linear-gradient(135deg,#04090d,#132532);
}

.infra-hero__grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:68px;
}

.infra-hero h1{
  max-width:900px;
  margin:24px 0 28px;
  font-size:clamp(3rem,6vw,6.15rem);
  line-height:.94;
  letter-spacing:-.05em;
}

.infra-hero p{
  max-width:760px;
  color:rgba(255,255,255,.76);
  font-size:1.07rem;
  line-height:1.75;
}

.infra-manifesto{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.infra-manifesto strong{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-size:.82rem;
}

.infra-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.infra-actions--center{
  justify-content:center;
}

.infra-btn{
  display:inline-flex;
  min-height:50px;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  transition:.25s ease;
}

.infra-btn--primary{
  color:#091117;
  background:linear-gradient(135deg,var(--infra-cyan),var(--infra-orange));
  box-shadow:0 14px 38px rgba(55,196,212,.20);
}

.infra-btn--primary:hover{
  transform:translateY(-3px);
}

.infra-btn--ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.04);
}

.infra-hero__visual{
  position:relative;
  min-height:560px;
  transition:transform .25s ease;
}

.infra-blueprint{
  position:absolute;
  inset:5%;
  background-image:
    linear-gradient(rgba(63,111,141,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,111,141,.10) 1px,transparent 1px);
  background-size:42px 42px;
  transform:perspective(800px) rotateX(62deg) rotateZ(-10deg);
  mask-image:radial-gradient(circle,#000 28%,transparent 75%);
}

.infra-foundation{
  position:absolute;
  left:50%;
  bottom:16%;
  width:310px;
  height:160px;
  transform:translateX(-50%) skewY(-8deg);
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(63,111,141,.12));
}

.infra-foundation span{
  position:absolute;
  width:44px;
  height:120px;
  bottom:0;
  background:linear-gradient(180deg,rgba(232,135,58,.22),rgba(16,24,32,.16));
}

.infra-foundation span:nth-child(1){left:20px}
.infra-foundation span:nth-child(2){left:95px}
.infra-foundation span:nth-child(3){right:95px}
.infra-foundation span:nth-child(4){right:20px}

.infra-layer{
  position:absolute;
  left:50%;
  width:360px;
  height:90px;
  border:1px solid rgba(255,255,255,.16);
  transform:translateX(-50%) skewY(-7deg);
  background:linear-gradient(135deg,rgba(55,196,212,.08),rgba(255,255,255,.03));
}

.infra-layer--1{top:15%}
.infra-layer--2{top:31%;width:320px}
.infra-layer--3{top:47%;width:280px}

.infra-core{
  position:absolute;
  left:50%;
  top:39%;
  z-index:5;
  display:grid;
  width:170px;
  height:170px;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.14),rgba(23,62,100,.14));
  box-shadow:0 0 80px rgba(55,196,212,.20);
}

.infra-core img{
  width:122px;
}

.infra-flow{
  position:absolute;
  left:50%;
  top:50%;
  width:190px;
  height:2px;
  transform-origin:left;
  background:linear-gradient(90deg,transparent,currentColor,transparent);
  animation:infraFlow 2.8s linear infinite;
}

.infra-flow--energy{
  color:var(--infra-yellow);
  transform:rotate(30deg);
}

.infra-flow--network{
  color:var(--infra-cyan);
  transform:rotate(150deg);
  animation-delay:.9s;
}

.infra-flow--data{
  color:var(--infra-orange);
  transform:rotate(320deg);
  animation-delay:1.8s;
}

.infra-node{
  position:absolute;
  z-index:6;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--infra-cyan);
  box-shadow:0 0 18px currentColor;
  animation:infraNode 2.2s ease-in-out infinite;
}

.infra-node--1{left:14%;top:18%;color:var(--infra-cyan)}
.infra-node--2{right:13%;top:20%;color:var(--infra-yellow);animation-delay:.5s}
.infra-node--3{left:17%;bottom:17%;color:var(--infra-orange);animation-delay:1s}
.infra-node--4{right:16%;bottom:15%;color:var(--infra-cyan);animation-delay:1.5s}

.infra-editorial{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
}

.infra-editorial h2,
.infra-heading h2,
.infra-cta h2{
  margin:20px 0 0;
  font-size:clamp(2.2rem,4.5vw,4.8rem);
  line-height:1.02;
  letter-spacing:-.045em;
}

.infra-editorial__text p,
.infra-heading>p,
.infra-cta p{
  color:var(--infra-muted);
  font-size:1.06rem;
  line-height:1.8;
}

.infra-section--dark .infra-heading>p,
.infra-section--steel .infra-heading>p,
.infra-section--energy .infra-heading>p,
.infra-cta p{
  color:rgba(255,255,255,.72);
}

.infra-heading{
  max-width:940px;
  margin-bottom:50px;
}

.infra-heading--center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.infra-grid{
  display:grid;
  gap:22px;
}

.infra-grid--3{
  grid-template-columns:repeat(3,1fr);
}

.infra-grid--4{
  grid-template-columns:repeat(4,1fr);
}

.infra-grid--5{
  grid-template-columns:repeat(5,1fr);
}

.infra-card{
  padding:28px;
  border:1px solid rgba(16,24,32,.09);
  border-radius:var(--infra-radius);
  background:rgba(255,255,255,.88);
  box-shadow:0 20px 60px rgba(16,24,32,.08);
  transition:.3s ease;
}

.infra-card:hover{
  transform:translateY(-7px);
  box-shadow:0 28px 74px rgba(16,24,32,.13);
}

.infra-card h3{
  margin:0 0 12px;
  font-size:1.14rem;
}

.infra-card p{
  margin:0;
  color:var(--infra-muted);
  line-height:1.64;
}

.infra-card--accent{
  border-top:4px solid var(--infra-cyan);
}

.infra-card--dark{
  border-color:rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
  box-shadow:none;
}

.infra-card--dark>span{
  color:var(--infra-orange);
  font-size:.75rem;
  font-weight:900;
}

.infra-card--dark p{
  color:rgba(255,255,255,.67);
}

.infra-card--glass{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.065);
  box-shadow:none;
}

.infra-card--glass i{
  display:block;
  width:34px;
  height:34px;
  margin-bottom:24px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--infra-cyan),var(--infra-orange));
}

.infra-card--glass p{
  color:rgba(255,255,255,.68);
}

.infra-architecture{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:10px;
}

.infra-architecture__item{
  min-height:246px;
  padding:20px 14px;
  border:1px solid var(--infra-line);
  border-radius:18px;
  background:#fff;
  transition:.3s ease;
}

.infra-architecture__item span{
  color:var(--infra-blue);
  font-weight:900;
}

.infra-architecture__item h3{
  margin:18px 0 10px;
  font-size:1rem;
}

.infra-architecture__item p{
  color:var(--infra-muted);
  font-size:.82rem;
  line-height:1.55;
}

.infra-architecture__item.is-active{
  color:#fff;
  transform:translateY(-10px);
  background:linear-gradient(155deg,var(--infra-blue),var(--infra-steel));
  box-shadow:0 18px 44px rgba(23,62,100,.22);
}

.infra-architecture__item.is-active span,
.infra-architecture__item.is-active p{
  color:#fff;
}

.infra-lead,
.infra-tagline{
  margin-top:42px;
  font-size:1.12rem;
  font-weight:800;
  line-height:1.6;
  text-align:center;
}

.infra-card--physical{
  border-top:4px solid var(--infra-steel);
}

.infra-energy-flow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
  position:relative;
}

.infra-energy-flow::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:32px;
  height:3px;
  background:linear-gradient(90deg,var(--infra-yellow),var(--infra-orange),var(--infra-yellow));
}

.infra-energy-flow article{
  position:relative;
  padding:22px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.06);
  transition:.3s ease;
}

.infra-energy-flow article>span{
  display:block;
  margin-bottom:28px;
  color:var(--infra-yellow);
  font-weight:900;
}

.infra-energy-flow article p{
  color:rgba(255,255,255,.68);
  font-size:.86rem;
  line-height:1.55;
}

.infra-energy-flow article.is-active{
  transform:translateY(-9px);
  background:linear-gradient(150deg,rgba(231,190,74,.18),rgba(232,135,58,.12));
}

.infra-card--communication{
  border-left:4px solid var(--infra-cyan);
}

.infra-automation-flow{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

.infra-automation-flow article{
  padding:22px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.06);
  transition:.3s ease;
}

.infra-automation-flow article>span{
  color:var(--infra-cyan);
  font-weight:900;
}

.infra-automation-flow article p{
  color:rgba(255,255,255,.68);
  font-size:.86rem;
  line-height:1.55;
}

.infra-automation-flow article.is-active{
  transform:translateY(-8px);
  background:linear-gradient(150deg,rgba(55,196,212,.18),rgba(63,111,141,.12));
}

.infra-card--technical{
  border-bottom:4px solid var(--infra-orange);
}

.infra-observability{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:12px;
}

.infra-observability article{
  padding:20px 14px;
  border:1px solid var(--infra-line);
  border-radius:17px;
  background:#fff;
  transition:.3s ease;
}

.infra-observability article span{
  color:var(--infra-blue);
  font-weight:900;
}

.infra-observability article h3{
  margin:16px 0 0;
  font-size:.92rem;
}

.infra-observability article.is-active{
  color:#fff;
  transform:translateY(-8px);
  background:linear-gradient(150deg,var(--infra-blue),var(--infra-cyan));
}

.infra-observability article.is-active span{
  color:#fff;
}

.infra-engineering{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

.infra-engineering article{
  padding:20px 14px;
  border:1px solid var(--infra-line);
  border-radius:17px;
  background:#fff;
  transition:.3s ease;
}

.infra-engineering article span{
  color:var(--infra-blue);
  font-weight:900;
}

.infra-engineering article h3{
  margin:16px 0 0;
  font-size:.9rem;
}

.infra-engineering article.is-active{
  color:#fff;
  transform:translateY(-8px);
  background:linear-gradient(150deg,var(--infra-blue),var(--infra-orange));
}

.infra-engineering article.is-active span{
  color:#fff;
}

.infra-card--environment{
  border-color:rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
  box-shadow:none;
}

.infra-card--environment p{
  color:rgba(255,255,255,.68);
}

.infra-ecosystem{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}

.infra-ecosystem__node{
  padding:24px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:rgba(255,255,255,.06);
  text-align:center;
}

.infra-ecosystem__logo{
  display:flex;
  height:58px;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}

.infra-ecosystem__logo img{
  max-width:125px;
  max-height:42px;
}

.infra-ecosystem__node p{
  color:rgba(255,255,255,.68);
  font-size:.88rem;
  line-height:1.55;
}

.infra-card--value{
  border-bottom:4px solid var(--infra-orange);
  background:linear-gradient(160deg,#fff,#f6f2ea);
}

.infra-cta{
  padding:130px 0;
  color:#fff;
  background:
    radial-gradient(circle at 15% 30%,rgba(55,196,212,.20),transparent 25%),
    radial-gradient(circle at 85% 60%,rgba(232,135,58,.17),transparent 28%),
    linear-gradient(135deg,#050a0e,#1b3b4f);
}

.infra-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s ease,transform .75s ease;
}

.infra-reveal.is-visible{
  opacity:1;
  transform:none;
}

@keyframes infraFlow{
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  25%{opacity:1}
  100%{opacity:0;clip-path:inset(0 0 0 0)}
}

@keyframes infraNode{
  0%,100%{transform:scale(.8);opacity:.6}
  50%{transform:scale(1.35);opacity:1}
}

@media(max-width:1060px){
  .infra-hero__grid,
  .infra-editorial{
    grid-template-columns:1fr;
  }

  .infra-grid--4,
  .infra-grid--5{
    grid-template-columns:repeat(2,1fr);
  }

  .infra-architecture{
    grid-template-columns:repeat(3,1fr);
  }

  .infra-energy-flow{
    grid-template-columns:repeat(3,1fr);
  }

  .infra-energy-flow::before{
    display:none;
  }

  .infra-automation-flow,
  .infra-observability{
    grid-template-columns:repeat(3,1fr);
  }

  .infra-engineering{
    grid-template-columns:repeat(3,1fr);
  }

  .infra-ecosystem{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:760px){
  .infra-shell{
    width:min(100% - 24px,1180px);
  }

  .infra-section{
    padding:78px 0;
  }

  .infra-hero{
    padding:110px 0 72px;
  }

  .infra-hero__visual{
    min-height:410px;
  }

  .infra-core{
    width:132px;
    height:132px;
  }

  .infra-core img{
    width:92px;
  }

  .infra-grid--3,
  .infra-grid--4,
  .infra-grid--5,
  .infra-architecture,
  .infra-energy-flow,
  .infra-automation-flow,
  .infra-observability,
  .infra-engineering,
  .infra-ecosystem{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .infra-flow,
  .infra-node{
    animation:none;
  }

  .infra-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* AW4_015_16_INFRA_CARDS_SPACING_START */
.infra-editorial-cards{
    margin-top:56px;
}
/* AW4_015_16_INFRA_CARDS_SPACING_END */

/* AW4_015_17_INFRA_HUB_REV05_START */

/*
 * Ecossistema consolidado de infraestrutura.
 *
 * Layout desktop:
 *
 * INDÚSTRIA                         HOSPITAL
 *
 *                  ARANOX
 *
 * DATACENTER                        UTILITIES
 */

.infra-hub{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    min-height:580px;
    overflow:hidden;
    transform-style:preserve-3d;
    perspective:1100px;
    will-change:transform;
}

.infra-hub__canvas{
    --hub-cyan:#3bcbdc;
    --hub-blue:#1680d8;
    --hub-bg:#071b29;
    --hub-panel:rgba(9,39,56,.94);
    --hub-line:rgba(59,203,220,.34);

    position:relative;
    width:min(100%,620px);
    height:520px;
    max-width:620px;
    margin:0 auto;
    isolation:isolate;
    transform-style:preserve-3d;
    animation:infraHubFloat 8s ease-in-out infinite;
}

.infra-hub__canvas::before{
    content:"";
    position:absolute;
    inset:8%;
    z-index:-3;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(59,203,220,.18) 0,
            rgba(22,128,216,.08) 36%,
            transparent 72%
        );
    filter:blur(12px);
    animation:infraHubAura 5s ease-in-out infinite;
}

.infra-hub__background{
    position:absolute;
    inset:4%;
    z-index:-2;
    border-radius:50%;
    opacity:.22;
    background-image:
        linear-gradient(
            rgba(59,203,220,.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(59,203,220,.11) 1px,
            transparent 1px
        );
    background-size:32px 32px;
    mask-image:radial-gradient(
        circle,
        #000 24%,
        transparent 72%
    );
    animation:infraHubGrid 20s linear infinite;
}

/* Órbitas */

.infra-hub__orbit{
    position:absolute;
    left:50%;
    top:50%;
    pointer-events:none;
    border:1px solid rgba(59,203,220,.25);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.infra-hub__orbit--outer{
    width:72%;
    height:84%;
    border-style:dashed;
    animation:infraHubOrbit 32s linear infinite;
}

.infra-hub__orbit--inner{
    width:42%;
    height:50%;
    border-color:rgba(59,203,220,.38);
    box-shadow:
        0 0 30px rgba(59,203,220,.06),
        inset 0 0 30px rgba(59,203,220,.05);
    animation:infraHubOrbitReverse 24s linear infinite;
}

/* Painéis */

.infra-hub-card{
    position:absolute;
    z-index:7;
    box-sizing:border-box;
    width:172px;
    height:126px;
    padding:13px 14px;
    overflow:hidden;
    border:1px solid rgba(59,203,220,.30);
    border-radius:17px;
    background:
        linear-gradient(
            145deg,
            rgba(13,54,74,.96),
            rgba(5,25,38,.98)
        );
    box-shadow:
        0 20px 42px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035);
    animation:infraHubPanel 6s ease-in-out infinite;
}

.infra-hub-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            112deg,
            transparent 25%,
            rgba(59,203,220,.10) 48%,
            transparent 72%
        );
    transform:translateX(-135%);
    animation:infraHubPanelScan 7s ease-in-out infinite;
}

.infra-hub-card--industry{
    top:22px;
    left:22px;
    animation-delay:0s;
}

.infra-hub-card--hospital{
    top:22px;
    right:22px;
    animation-delay:.8s;
}

.infra-hub-card--datacenter{
    left:22px;
    bottom:22px;
    animation-delay:1.6s;
}

.infra-hub-card--utilities{
    right:22px;
    bottom:22px;
    animation-delay:2.4s;
}

.infra-hub-card__header{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:18px;
    margin-bottom:7px;
}

.infra-hub-card__header strong{
    display:block;
    overflow:hidden;
    color:rgba(226,249,252,.9);
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:.12em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.infra-hub-card__header span{
    flex:0 0 auto;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--hub-cyan);
    box-shadow:0 0 12px rgba(59,203,220,.86);
    animation:infraHubStatus 2.4s ease-in-out infinite;
}

/* Indústria */

.infra-hub-industry{
    position:relative;
    height:78px;
}

.infra-hub-industry__body{
    position:absolute;
    left:8%;
    right:3%;
    bottom:3px;
    height:48px;
    border:1px solid rgba(79,213,228,.31);
    border-radius:5px 5px 8px 8px;
    background:
        linear-gradient(
            180deg,
            rgba(22,77,99,.89),
            rgba(5,26,39,.98)
        );
}

.infra-hub-industry__roof{
    position:absolute;
    z-index:2;
    left:7%;
    right:2%;
    bottom:50px;
    height:20px;
    clip-path:polygon(
        0 100%,
        0 60%,
        18% 0,
        35% 60%,
        52% 0,
        69% 60%,
        86% 0,
        100% 58%,
        100% 100%
    );
    background:rgba(43,145,168,.45);
}

.infra-hub-industry__body i{
    position:absolute;
    top:13px;
    width:14px;
    height:13px;
    border:1px solid rgba(59,203,220,.32);
    border-radius:3px;
    background:rgba(59,203,220,.07);
    animation:infraHubWindow 4s ease-in-out infinite;
}

.infra-hub-industry__body i:nth-child(1){left:8%}
.infra-hub-industry__body i:nth-child(2){left:29%;animation-delay:.6s}
.infra-hub-industry__body i:nth-child(3){left:50%;animation-delay:1.2s}
.infra-hub-industry__body i:nth-child(4){left:71%;animation-delay:1.8s}

.infra-hub-industry__body b{
    position:absolute;
    right:6%;
    bottom:0;
    width:20%;
    height:24px;
    background:rgba(4,18,27,.8);
    border:1px solid rgba(59,203,220,.18);
}

.infra-hub-industry__chimney{
    position:absolute;
    z-index:1;
    bottom:64px;
    width:8px;
    border:1px solid rgba(59,203,220,.25);
    background:rgba(8,39,54,.95);
}

.infra-hub-industry__chimney--1{
    left:17%;
    height:25px;
}

.infra-hub-industry__chimney--2{
    left:27%;
    height:19px;
}

/* Hospital */

.infra-hub-hospital{
    position:relative;
    height:78px;
}

.infra-hub-hospital__building{
    position:absolute;
    left:29%;
    bottom:2px;
    width:42%;
    height:72px;
    border:1px solid rgba(59,203,220,.31);
    border-radius:7px 7px 4px 4px;
    background:
        linear-gradient(
            180deg,
            rgba(20,72,94,.91),
            rgba(5,25,38,.98)
        );
}

.infra-hub-hospital__cross{
    position:absolute;
    top:11px;
    left:50%;
    width:24px;
    height:7px;
    border-radius:2px;
    background:var(--hub-cyan);
    box-shadow:0 0 12px rgba(59,203,220,.55);
    transform:translateX(-50%);
    animation:infraHubCross 2.8s ease-in-out infinite;
}

.infra-hub-hospital__cross::after{
    content:"";
    position:absolute;
    left:8px;
    top:-8px;
    width:7px;
    height:24px;
    background:inherit;
    border-radius:2px;
}

.infra-hub-hospital__building i{
    position:absolute;
    width:9px;
    height:9px;
    border-radius:2px;
    border:1px solid rgba(59,203,220,.25);
    background:rgba(59,203,220,.09);
    animation:infraHubWindow 4s ease-in-out infinite;
}

.infra-hub-hospital__building i:nth-of-type(1){
    left:9px;
    bottom:23px;
}

.infra-hub-hospital__building i:nth-of-type(2){
    right:9px;
    bottom:23px;
    animation-delay:.7s;
}

.infra-hub-hospital__building i:nth-of-type(3){
    left:9px;
    bottom:8px;
    animation-delay:1.4s;
}

.infra-hub-hospital__building i:nth-of-type(4){
    right:9px;
    bottom:8px;
    animation-delay:2.1s;
}

.infra-hub-hospital__pulse{
    position:absolute;
    left:4%;
    right:4%;
    bottom:5px;
    height:2px;
    overflow:hidden;
}

.infra-hub-hospital__pulse::before{
    content:"";
    position:absolute;
    left:-100%;
    top:0;
    width:200%;
    height:2px;
    background:
        linear-gradient(
            90deg,
            transparent 0 20%,
            var(--hub-cyan) 21% 31%,
            transparent 32% 36%,
            var(--hub-cyan) 37% 43%,
            transparent 44%
        );
    filter:drop-shadow(0 0 5px rgba(59,203,220,.82));
    animation:infraHubHospitalPulse 4s linear infinite;
}

/* Datacenter */

.infra-hub-datacenter{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    height:78px;
    padding:1px 5%;
}

.infra-hub-rack{
    display:grid;
    gap:4px;
    height:69px;
    padding:6px 5px;
    border:1px solid rgba(59,203,220,.27);
    border-radius:5px;
    background:
        linear-gradient(
            180deg,
            rgba(17,61,80,.94),
            rgba(3,19,29,.99)
        );
}

.infra-hub-rack i{
    position:relative;
    display:block;
    border:1px solid rgba(59,203,220,.16);
    border-radius:2px;
    background:rgba(2,15,23,.86);
}

.infra-hub-rack i::after{
    content:"";
    position:absolute;
    right:3px;
    top:50%;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--hub-cyan);
    box-shadow:0 0 6px rgba(59,203,220,.9);
    transform:translateY(-50%);
    animation:infraHubRackLed 1.8s ease-in-out infinite;
}

.infra-hub-rack:nth-child(1) i:nth-child(2)::after{animation-delay:.2s}
.infra-hub-rack:nth-child(1) i:nth-child(3)::after{animation-delay:.4s}
.infra-hub-rack:nth-child(1) i:nth-child(4)::after{animation-delay:.6s}

.infra-hub-rack:nth-child(2) i:nth-child(1)::after{animation-delay:.8s}
.infra-hub-rack:nth-child(2) i:nth-child(2)::after{animation-delay:1s}
.infra-hub-rack:nth-child(2) i:nth-child(3)::after{animation-delay:1.2s}
.infra-hub-rack:nth-child(2) i:nth-child(4)::after{animation-delay:1.4s}

.infra-hub-rack:nth-child(3) i:nth-child(1)::after{animation-delay:1.6s}
.infra-hub-rack:nth-child(3) i:nth-child(2)::after{animation-delay:1.8s}
.infra-hub-rack:nth-child(3) i:nth-child(3)::after{animation-delay:2s}
.infra-hub-rack:nth-child(3) i:nth-child(4)::after{animation-delay:2.2s}

/* Utilities */

.infra-hub-utilities{
    position:relative;
    height:78px;
}

.infra-hub-utilities__mast{
    position:absolute;
    left:50%;
    top:3px;
    width:2px;
    height:63px;
    background:rgba(59,203,220,.52);
    transform:translateX(-50%);
}

.infra-hub-utilities__arm{
    position:absolute;
    left:50%;
    height:2px;
    background:rgba(59,203,220,.48);
    transform:translateX(-50%);
}

.infra-hub-utilities__arm--1{
    top:20px;
    width:60px;
}

.infra-hub-utilities__arm--2{
    top:37px;
    width:43px;
}

.infra-hub-utilities__leg{
    position:absolute;
    top:15px;
    width:2px;
    height:56px;
    background:rgba(59,203,220,.42);
    transform-origin:top center;
}

.infra-hub-utilities__leg--1{
    left:50%;
    transform:rotate(20deg);
}

.infra-hub-utilities__leg--2{
    right:50%;
    transform:rotate(-20deg);
}

.infra-hub-utilities__flow{
    position:absolute;
    left:2%;
    top:19px;
    width:8px;
    height:4px;
    border-radius:10px;
    background:#f2a347;
    box-shadow:0 0 11px rgba(242,163,71,.85);
    animation:infraHubPower 3.3s linear infinite;
}

/* Núcleo */

.infra-hub-core{
    position:absolute;
    z-index:12;
    left:50%;
    top:50%;
    width:178px;
    height:178px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(59,203,220,.43);
    border-radius:50%;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(25,83,106,.98),
            rgba(4,23,36,.99) 70%
        );
    box-shadow:
        0 0 42px rgba(59,203,220,.19),
        inset 0 0 32px rgba(59,203,220,.09);
    transform:translate(-50%,-50%) translateZ(42px);
    animation:infraHubCore 4.8s ease-in-out infinite;
}

.infra-hub-core__content{
    position:relative;
    z-index:3;
    width:68%;
    text-align:center;
}

.infra-hub-core__content img{
    display:block;
    width:100%;
    max-width:116px;
    max-height:43px;
    margin:0 auto 9px;
    object-fit:contain;
}

.infra-hub-core__content small{
    display:block;
    color:rgba(220,248,251,.75);
    font-size:7px;
    font-weight:800;
    letter-spacing:.13em;
    line-height:1.3;
}

.infra-hub-core__ring{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid rgba(59,203,220,.34);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.infra-hub-core__ring--1{
    width:83%;
    height:83%;
    animation:infraHubCoreRing 4s ease-out infinite;
}

.infra-hub-core__ring--2{
    width:61%;
    height:61%;
    animation:infraHubCoreRing 4s ease-out infinite 2s;
}

.infra-hub-core__scan{
    position:absolute;
    z-index:2;
    left:-45%;
    top:0;
    width:34%;
    height:100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59,203,220,.28),
            transparent
        );
    transform:skewX(-14deg);
    animation:infraHubCoreScan 5s ease-in-out infinite;
}

/* Conexões */

.infra-hub__links{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
}

.infra-hub__link{
    position:absolute;
    left:50%;
    top:50%;
    width:132px;
    height:2px;
    background:
        linear-gradient(
            90deg,
            rgba(59,203,220,.74),
            rgba(59,203,220,.07)
        );
    transform-origin:left center;
}

.infra-hub__link::after{
    content:"";
    position:absolute;
    left:4%;
    top:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--hub-cyan);
    box-shadow:0 0 13px rgba(59,203,220,.9);
    transform:translate(-50%,-50%);
    animation:infraHubLinkPacket 3s ease-in-out infinite;
}

.infra-hub__link--industry{
    transform:rotate(-139deg);
}

.infra-hub__link--hospital{
    transform:rotate(-41deg);
}

.infra-hub__link--datacenter{
    transform:rotate(139deg);
}

.infra-hub__link--utilities{
    transform:rotate(41deg);
}

.infra-hub__link--hospital::after{animation-delay:.75s}
.infra-hub__link--datacenter::after{animation-delay:1.5s}
.infra-hub__link--utilities::after{animation-delay:2.25s}

/* Pulsos externos */

.infra-hub__packet{
    position:absolute;
    z-index:13;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--hub-cyan);
    box-shadow:
        0 0 0 0 rgba(59,203,220,.35),
        0 0 13px rgba(59,203,220,.82);
    animation:infraHubPacket 3.2s ease-out infinite;
}

.infra-hub__packet--1{
    left:20%;
    top:22%;
}

.infra-hub__packet--2{
    right:20%;
    top:22%;
    animation-delay:.8s;
}

.infra-hub__packet--3{
    left:20%;
    bottom:22%;
    animation-delay:1.6s;
}

.infra-hub__packet--4{
    right:20%;
    bottom:22%;
    animation-delay:2.4s;
}

/* Animações */

@keyframes infraHubFloat{
    0%,
    100%{
        transform:translate3d(0,0,0);
    }

    50%{
        transform:translate3d(0,-10px,0);
    }
}

@keyframes infraHubAura{
    0%,
    100%{
        opacity:.55;
        transform:scale(.96);
    }

    50%{
        opacity:1;
        transform:scale(1.05);
    }
}

@keyframes infraHubGrid{
    from{
        background-position:0 0,0 0;
    }

    to{
        background-position:32px 32px,32px 32px;
    }
}

@keyframes infraHubOrbit{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes infraHubOrbitReverse{
    from{
        transform:translate(-50%,-50%) rotate(360deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(0deg);
    }
}

@keyframes infraHubPanel{
    0%,
    100%{
        border-color:rgba(59,203,220,.25);
        box-shadow:
            0 20px 42px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.035);
    }

    50%{
        border-color:rgba(59,203,220,.46);
        box-shadow:
            0 23px 48px rgba(0,0,0,.31),
            0 0 20px rgba(59,203,220,.07),
            inset 0 1px 0 rgba(255,255,255,.05);
    }
}

@keyframes infraHubPanelScan{
    0%,
    18%{
        transform:translateX(-135%);
    }

    60%,
    100%{
        transform:translateX(155%);
    }
}

@keyframes infraHubStatus{
    0%,
    100%{
        opacity:.45;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.25);
    }
}

@keyframes infraHubWindow{
    0%,
    100%{
        background:rgba(59,203,220,.06);
        box-shadow:none;
    }

    50%{
        background:rgba(59,203,220,.31);
        box-shadow:0 0 8px rgba(59,203,220,.38);
    }
}

@keyframes infraHubCross{
    0%,
    100%{
        opacity:.58;
        filter:brightness(.85);
    }

    50%{
        opacity:1;
        filter:brightness(1.35);
    }
}

@keyframes infraHubHospitalPulse{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(50%);
    }
}

@keyframes infraHubRackLed{
    0%,
    65%,
    100%{
        opacity:.25;
    }

    72%,
    88%{
        opacity:1;
    }
}

@keyframes infraHubPower{
    from{
        left:1%;
    }

    to{
        left:95%;
    }
}

@keyframes infraHubCore{
    0%,
    100%{
        box-shadow:
            0 0 35px rgba(59,203,220,.14),
            inset 0 0 30px rgba(59,203,220,.07);
    }

    50%{
        box-shadow:
            0 0 54px rgba(59,203,220,.27),
            inset 0 0 39px rgba(59,203,220,.12);
    }
}

@keyframes infraHubCoreRing{
    0%{
        opacity:.9;
        transform:translate(-50%,-50%) scale(.72);
    }

    100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(1.27);
    }
}

@keyframes infraHubCoreScan{
    0%{
        left:-45%;
    }

    55%,
    100%{
        left:115%;
    }
}

@keyframes infraHubLinkPacket{
    0%{
        left:5%;
        opacity:0;
    }

    18%{
        opacity:1;
    }

    82%{
        opacity:1;
    }

    100%{
        left:100%;
        opacity:0;
    }
}

@keyframes infraHubPacket{
    0%{
        opacity:0;
        transform:scale(.65);
        box-shadow:
            0 0 0 0 rgba(59,203,220,.38),
            0 0 13px rgba(59,203,220,.75);
    }

    30%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:scale(1.05);
        box-shadow:
            0 0 0 22px rgba(59,203,220,0),
            0 0 7px rgba(59,203,220,0);
    }
}

/* Desktop intermediário */

@media (max-width:1250px){

    .infra-hub{
        min-height:540px;
    }

    .infra-hub__canvas{
        width:min(100%,570px);
        height:490px;
        max-width:570px;
    }

    .infra-hub-card{
        width:157px;
        height:119px;
        padding:11px 12px;
    }

    .infra-hub-card--industry,
    .infra-hub-card--datacenter{
        left:15px;
    }

    .infra-hub-card--hospital,
    .infra-hub-card--utilities{
        right:15px;
    }

    .infra-hub-core{
        width:166px;
        height:166px;
    }

    .infra-hub__link{
        width:118px;
    }
}

/* Tablet */

@media (max-width:900px){

    .infra-hub{
        min-height:570px;
        margin-top:30px;
    }

    .infra-hub__canvas{
        width:min(100%,600px);
        height:510px;
        max-width:600px;
    }

    .infra-hub-card{
        width:164px;
        height:122px;
    }

    .infra-hub-core{
        width:170px;
        height:170px;
    }
}

/* Celular */

@media (max-width:620px){

    .infra-hub{
        min-height:600px;
        margin-top:25px;
    }

    .infra-hub__canvas{
        width:100%;
        height:570px;
        max-width:none;
    }

    .infra-hub-card{
        width:43%;
        height:124px;
        padding:10px;
    }

    .infra-hub-card--industry{
        top:10px;
        left:4%;
    }

    .infra-hub-card--hospital{
        top:10px;
        right:4%;
    }

    .infra-hub-card--datacenter{
        left:4%;
        bottom:10px;
    }

    .infra-hub-card--utilities{
        right:4%;
        bottom:10px;
    }

    .infra-hub-card__header strong{
        font-size:7px;
        letter-spacing:.07em;
    }

    .infra-hub-card__header span{
        width:5px;
        height:5px;
    }

    .infra-hub-core{
        width:150px;
        height:150px;
    }

    .infra-hub-core__content img{
        max-width:95px;
        max-height:34px;
        margin-bottom:6px;
    }

    .infra-hub-core__content small{
        font-size:6px;
        letter-spacing:.08em;
    }

    .infra-hub__orbit--outer{
        width:89%;
        height:67%;
    }

    .infra-hub__orbit--inner{
        width:56%;
        height:39%;
    }

    .infra-hub__link{
        width:25%;
    }
}

/* Celular estreito */

@media (max-width:430px){

    .infra-hub{
        min-height:555px;
    }

    .infra-hub__canvas{
        height:530px;
    }

    .infra-hub-card{
        width:44%;
        height:113px;
        padding:8px;
        border-radius:13px;
    }

    .infra-hub-card--industry,
    .infra-hub-card--datacenter{
        left:3%;
    }

    .infra-hub-card--hospital,
    .infra-hub-card--utilities{
        right:3%;
    }

    .infra-hub-card__header{
        margin-bottom:4px;
    }

    .infra-hub-card__header strong{
        font-size:6px;
    }

    .infra-hub-industry,
    .infra-hub-hospital,
    .infra-hub-datacenter,
    .infra-hub-utilities{
        transform:scale(.88);
        transform-origin:center top;
    }

    .infra-hub-core{
        width:134px;
        height:134px;
    }

    .infra-hub-core__content img{
        max-width:84px;
        max-height:29px;
    }

    .infra-hub-core__content small{
        font-size:5px;
    }
}

/* Movimento reduzido */

@media (prefers-reduced-motion:reduce){

    .infra-hub__canvas,
    .infra-hub__canvas::before,
    .infra-hub__background,
    .infra-hub__orbit,
    .infra-hub-card,
    .infra-hub-card::before,
    .infra-hub-card__header span,
    .infra-hub-industry__body i,
    .infra-hub-hospital__cross,
    .infra-hub-hospital__pulse::before,
    .infra-hub-rack i::after,
    .infra-hub-utilities__flow,
    .infra-hub-core,
    .infra-hub-core__ring,
    .infra-hub-core__scan,
    .infra-hub__link::after,
    .infra-hub__packet{
        animation:none !important;
    }

    .infra-hub{
        transform:none !important;
    }
}

/* AW4_015_17_INFRA_HUB_REV05_END */