:root{color-scheme:light;--ink:#062d59}
*{box-sizing:border-box}
html{min-height:100%;background:#b8dffc}
body{margin:0;min-height:100vh;min-height:100svh;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:linear-gradient(125deg,#a6d5fa 0%,#d4effd 45%,#b4dcfa 75%,#9ccef6 100%)}
main{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:70px 32px 50px}
.identity{text-align:center}
h1{margin:0;line-height:0}
.brand{width:270px;height:auto;display:block}
.status{margin:30px 0 0;font-size:18px;font-weight:400;letter-spacing:.34em;padding-left:.34em}
.status:before{content:"";display:block;width:70px;height:1px;background:#78a9d0;margin:0 auto 30px;position:relative;left:-.17em}
.areas{list-style:none;padding:0;margin:68px 0 0;display:grid;grid-template-columns:1fr 1fr 1.55fr 1.15fr 1fr 1.15fr;width:min(100%,1080px)}
.areas li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:19px;font-size:12px;letter-spacing:.23em;line-height:1.5;text-transform:uppercase;padding:0 18px}
.areas li+li:before{content:"";position:absolute;left:0;top:2px;width:1px;height:50px;background:#78a9d0}
.areas svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1000px) and (min-height:850px){main{padding-top:130px}}
@media(max-width:700px){main{padding:48px 20px}.brand{width:215px}.status{font-size:12px;margin-top:22px}.status:before{margin-bottom:25px;width:54px}.areas{grid-template-columns:repeat(3,minmax(0,1fr));max-width:480px;row-gap:35px;margin-top:48px}.areas li{font-size:10px;letter-spacing:.14em;padding:0 8px;gap:13px}.areas svg{width:34px;height:34px}.areas li:nth-child(4):before{display:none}.areas li+li:before{height:38px}}
@media(max-width:360px){.areas li{font-size:9px;letter-spacing:.1em}}
/* Centralização óptica do traço e do aviso sob a marca. */
.status{padding-left:0;text-indent:.34em}
.status:before{left:0}
/* Áreas distribuídas igualmente e rótulos centrados sob os ícones. */
.areas{grid-template-columns:repeat(6,minmax(0,1fr));margin-left:auto;margin-right:auto}
.areas li span{position:relative;left:.115em}
@media(max-width:700px){.areas{grid-template-columns:repeat(3,minmax(0,1fr))}.areas li span{left:.07em}}
@media(max-width:360px){.areas li span{left:.05em}}