:root {
  --navy: #091a39;
  --ink: #132547;
  --blue: #214fcc;
  --blue-dark: #15369b;
  --lime: #d9f66c;
  --muted: #52637c;
  --paper: #f4f7fc;
  --line: #dce4f0;
}
* {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 20px}
body {margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 system-ui, sans-serif}
a {color: inherit; text-decoration: none}
img {display: block; max-width: 100%; height: auto}
.wrap {width: min(1180px, calc(100% - 48px)); margin-inline: auto}
header, footer {background: var(--navy); color: white}
.top {min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px}
.logo {flex: 0 0 144px}
nav {display: flex; align-items: center; gap: 26px; font-size: .92rem}
nav a {color: #c4d2ef}
nav a:hover, nav [aria-current] {color: white; text-decoration: underline; text-underline-offset: 7px}
.button {display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 16px; border-radius: 9px; border: 1px solid transparent; font-size: .91rem; font-weight: 740; line-height: 1.4}
.button span {font-size: 1.1em}
.primary {background: var(--blue); color: white}
.primary:hover {background: var(--blue-dark)}
.central, .ghost {border-color: #7184b0; color: white}
.central:hover, .ghost:hover {background: #ffffff18}
.outline {border-color: #b4c3dc; color: var(--blue-dark); background: white}
.outline:hover {border-color: var(--blue); background: #eef3ff}
a:focus-visible, summary:focus-visible {outline: 3px solid #648cff; outline-offset: 4px}
.skip {position: fixed; top: -80px; left: 16px; padding: 8px 12px; background: white; z-index: 10}
.skip:focus {top: 12px}
.hero {background: radial-gradient(ellipse at 83% 45%, #214b9f, transparent 52%), var(--navy); color: white; overflow: hidden}
.hero-grid {display: grid; grid-template-columns: 1.13fr .87fr; align-items: center; min-height: 530px; padding-block: 52px 72px; gap: 20px}
.eyebrow {font-size: .72rem; font-weight: 790; letter-spacing: .14em; color: var(--blue); margin: 0 0 12px}
.hero .eyebrow {color: #b9cbff}
h1, h2, h3 {letter-spacing: -.038em; line-height: 1.08; margin: 0 0 14px}
h1 {font-size: clamp(2.45rem, 5vw, 4.6rem); max-width: 15ch}
h1 em {font-style: normal; color: var(--lime)}
h2 {font-size: clamp(1.7rem, 3vw, 2.55rem)}
.lead {max-width: 49ch; color: var(--muted); font-size: 1.05rem}
.hero .lead {color: #d4def4}
.hero-actions {display: flex; flex-wrap: wrap; gap: 10px; margin-block: 25px 20px}
.hero .primary {background: var(--lime); color: var(--navy)}
.hero .primary:hover {background: #ebffab}
.hero-price {font-size: .9rem; color: #c5d4f3}
.hero-price strong {font-size: 1.1rem; color: white}
.hero-art {position: relative; display: grid; place-items: center; min-width: 0; isolation: isolate}
.hero-art img {width: min(100%, 470px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 22px 24px #07132d73)}
.orbit {position: absolute; z-index: -1; width: 81%; aspect-ratio: 1; border: 1px solid #7ea3ff7a; border-radius: 50%; box-shadow: 0 0 0 22px #8cafff16, 0 0 0 46px #8cafff0e}
.art-tag {position: absolute; bottom: 8%; right: 1%; display: flex; gap: 9px; align-items: center; padding: 10px 14px; border-radius: 10px; background: white; color: var(--navy); font-weight: 700; box-shadow: 0 8px 30px #05143365}
.art-tag span {color: var(--blue)}
.quick {position: relative; margin-top: -28px; display: grid; grid-template-columns: repeat(3, 1fr); background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 9px 35px #1229540e}
.quick a {padding: 19px 22px}
.quick a + a {border-left: 1px solid var(--line)}
.quick span, .quick strong {display: block}
.quick span {font-size: .64rem; letter-spacing: .1em; color: var(--muted)}
.quick strong {margin-top: 3px}
.quick a:hover strong {color: var(--blue)}
.section {padding-block: 38px}
.quick + .section {padding-top: 58px}
.section-head {display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 18px}
.plans, .services, .split {display: grid; gap: 16px}
.plans {grid-template-columns: repeat(3, minmax(0, 1fr))}
.plan, .service {background: white; border: 1px solid var(--line); border-radius: 14px}
.plan {padding: 24px; display: flex; flex-direction: column; align-items: start}
.plan.spot {border-color: #6c90f4; box-shadow: inset 0 3px 0 var(--blue)}
.plan h3 {font-size: 2.65rem}
.plan h3 small {font-size: .94rem; letter-spacing: 0}
.plan .extra-title {font-size: 1.35rem}
.tag {color: var(--blue-dark); background: #eaf0ff; font-size: .74rem; font-weight: 720; border-radius: 20px; padding: 4px 10px; margin: 0 0 17px}
.price {font-size: 1.75rem; letter-spacing: -.04em; font-weight: 780; margin: 0 0 9px}
.price small {font-size: .85rem; letter-spacing: 0; color: var(--muted)}
.plan ul {padding-left: 18px; color: var(--muted); margin: 4px 0 20px; font-size: .9rem}
.plan .button {margin-top: auto}
.fine {color: var(--muted); font-size: .82rem}
.services {grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px}
.service {overflow: hidden}
.service a {display: block; height: 100%}
.service img {width: 100%; aspect-ratio: 1.8; object-fit: cover}
.service a > div {padding: 17px}
.service h3 {font-size: 1.2rem}
.service p {color: var(--muted); font-size: .88rem}
.service span {color: var(--blue); font-weight: 700; font-size: .86rem}
.energy {background: #e9f4e8; border: 1px solid #cde4ce; border-radius: 15px; padding: 25px; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-block: 18px 28px}
.energy .eyebrow {color: #246747}
.energy p:last-child {margin-bottom: 0}
.faq {max-width: 850px}
details {border-bottom: 1px solid var(--line); padding: 14px 0}
summary {cursor: pointer; font-weight: 720}
details p {color: var(--muted)}
details a {text-decoration: underline}
footer {margin-top: 30px}
.footer {padding-block: 34px; display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 20px; font-size: .88rem}
.footer a, .footer p {display: block; color: #c4d2ef; margin-top: 7px}
.footer a:hover {text-decoration: underline}
.page-intro {padding-block: 55px 24px}
.page-intro h1 {max-width: 22ch}
.split {grid-template-columns: 1fr 1fr}
.feature {border-radius: 14px; width: 100%; max-height: 350px; object-fit: cover}
.back {display: inline-block; margin-bottom: 18px; color: var(--blue)}
@media(max-width: 820px) {
  .top {flex-wrap: wrap; gap: 10px; padding-block: 12px}
  nav {order: 3; width: 100%; justify-content: space-between; gap: 10px}
  .hero-grid {grid-template-columns: 1fr 0.8fr; min-height: 0}
  .services, .footer {grid-template-columns: repeat(2,minmax(0,1fr))}
  .plans {grid-template-columns: repeat(2,minmax(0,1fr))}
}
@media(max-width: 560px) {
  .wrap {width: calc(100% - 32px)}
  .logo {flex-basis: 118px}
  .central {font-size: .76rem; padding: 8px 10px}
  .hero-grid {grid-template-columns: 1fr; padding-block: 35px 44px}
  .hero-art {max-width: 305px; margin: 0 auto}
  .art-tag {font-size: .79rem}
  .quick {grid-template-columns: 1fr}
  .quick a {padding: 12px 16px}
  .quick a + a {border-left: 0; border-top: 1px solid var(--line)}
  .quick + .section {padding-top: 36px}
  .section {padding-block: 24px}
  .section-head, .energy {align-items: start; flex-direction: column}
  .plans, .split {grid-template-columns: 1fr}
  .services {gap: 10px}
  .service a > div {padding: 12px}
  .page-intro {padding-block: 33px 14px}
}
@media(prefers-reduced-motion: reduce) {html {scroll-behavior: auto}}

/* Azul marinho e azul principal do hotsite da Skynet. */
:root {
  --navy: #003065;
  --ink: #122c4d;
  --blue: #1650a9;
  --blue-dark: #003065;
  --paper: #f4f8fd;
  --brand-light: #a7dbff;
}
[hidden] {display: none !important}
header {border-bottom: 1px solid #ffffff24}
.hero {
  background: radial-gradient(ellipse at 83% 44%, #286dc2 0%, #10488f 38%, #003065 78%);
  color: white;
}
.hero-grid {min-height: 500px; padding-block: 32px 20px}
.hero h1, .slide-title {font-size: clamp(2.5rem, 5vw, 4.6rem); max-width: 15ch}
.hero h1 em, .slide-title em {font-style: normal; color: var(--brand-light)}
.hero .primary {background: #fff; color: var(--navy)}
.hero .primary:hover {background: #e2f2ff}
.hero .ghost {border-color: #a1c7ed}
.hero-art img {width: min(100%, 430px)}
.slide .hero-art {min-height: 410px}
.graphic {position: relative; display: grid; justify-items: center; align-content: center; width: min(80%, 360px); min-height: 215px; border: 1px solid #b6deff78; border-radius: 23px; background: linear-gradient(145deg, #174f9a, #073163); box-shadow: 0 25px 70px #001a4180; text-align: center}
.graphic small {letter-spacing: .2em; color: #a7dbff; font-size: .86rem; font-weight: 750}
.tv-graphic strong {font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.1; letter-spacing: -.045em; margin: 10px 0}
.play {display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: #003065; background: #c4eaff}
.speed-graphic strong {font-size: clamp(5.2rem, 9vw, 8.1rem); line-height: .98; letter-spacing: -.085em}
.speed-graphic span {margin-top: 12px; font-size: .75rem; letter-spacing: .1em; border: 1px solid #b6deff78; padding: 3px 12px; border-radius: 20px}
.slider-controls {display: flex; justify-content: center; align-items: center; gap: 13px; padding-bottom: 49px}
.slider-controls button {cursor: pointer; color: white; border: 1px solid #b6deff75; background: #083365; border-radius: 50%; width: 44px; height: 44px; font: 26px/1 system-ui}
.slider-controls button:hover {background: #2469b4}
.slider-controls button:focus-visible, select:focus-visible {outline: 3px solid #74baff; outline-offset: 3px}
.slider-dots {display: flex; align-items: center; gap: 3px}
.slider-dots button {position: relative; width: 36px; height: 40px; background: transparent; border: 0}
.slider-dots button::before {content: ""; display: block; margin: auto; width: 12px; height: 6px; border-radius: 8px; background: #9ab9dc}
.slider-dots button[aria-current]::before {width: 23px; background: #fff}
.slide-status {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
.registration label {font-weight: 700; margin-top: 10px}
.registration select {width: 100%; min-height: 46px; margin: 8px 0 18px; padding: 9px; border: 1px solid #a5bad5; border-radius: 8px; color: var(--ink); background: white; font: inherit}
.registration p.fine {margin-bottom: 0}
@media (max-width: 820px) {
  .hero-grid {min-height: 430px}
  .slide .hero-art {min-height: 300px}
  nav {flex-wrap: wrap}
}
@media (max-width: 560px) {
  .hero-grid {grid-template-rows: minmax(275px, auto) 204px; min-height: 0; gap: 14px; padding-block: 29px 12px}
  .hero h1, .slide-title {font-size: clamp(2.35rem, 10vw, 3.2rem)}
  .slide .hero-art {width: 100%; min-height: 0}
  .hero-art img {width: 205px}
  .orbit {width: 170px}
  .art-tag {right: 2%; bottom: 5%}
  .graphic {min-height: 175px}
  .slider-controls {padding-bottom: 43px}
  nav {font-size: .81rem; gap: 8px}
}