/* Etapa 1: entrada visual da central de servicos. Isolada para nao afetar o wizard. */
body.km-step-service-active{
  min-height:100dvh;
  background:#111419;
}

body.km-step-service-active::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("../images/km-tow-service-bg.jpg") center center / cover no-repeat;
}

body.km-step-service-active::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(7,10,14,.76);
  backdrop-filter:blur(2px);
}

body.km-step-service-active .app-header{
  background:rgba(11,14,18,.72);
  border-color:rgba(255,255,255,.1);
}

body.km-step-service-active .app-main{
  min-height:calc(100dvh - 60px);
  padding:24px 0 36px;
}

body.km-step-service-active .content{
  width:min(100% - 24px,620px);
  max-width:620px;
  padding:0;
}

body.km-step-service-active .app-head,
body.km-step-service-active .criteria-card,
body.km-step-service-active .km-wizard-top{
  display:none!important;
}

body.km-step-service-active .km-wizard-shell{
  display:grid;
  gap:14px!important;
  margin:0!important;
  padding:22px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(18,22,28,.93);
  box-shadow:0 28px 80px rgba(0,0,0,.46);
  backdrop-filter:blur(18px);
}

body.km-step-service-active .km-wizard-service{
  display:grid;
  gap:17px;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.km-step1-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
}

.km-step1-mark{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#ffb321;
  color:#16120a;
  font-size:16px;
  font-weight:950;
  box-shadow:0 10px 28px rgba(255,179,33,.2);
}

.km-step1-wordmark{
  display:grid;
  gap:2px;
}

.km-step1-wordmark strong{
  color:#fff;
  font-size:15px;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
}

.km-step1-wordmark small{
  color:#aeb7c2;
  font-size:10.5px;
  line-height:1.3;
}

.km-step1-heading{
  text-align:center;
}

.km-step1-kicker{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border:1px solid rgba(49,199,122,.34);
  border-radius:999px;
  background:rgba(49,199,122,.1);
  color:#69e3a3;
  font-size:10px;
  line-height:1;
  font-weight:850;
  text-transform:uppercase;
}

.km-step1-heading h2{
  margin:10px 0 5px;
  color:#fff;
  font-size:clamp(22px,5vw,28px);
  line-height:1.14;
  font-weight:850;
  letter-spacing:0;
}

.km-step1-heading p{
  margin:0;
  color:#b5bec8;
  font-size:13px;
  line-height:1.45;
}

.km-step1-progress{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
}

.km-step1-progress span{
  color:#d4dae1;
  font-size:10.5px;
  font-weight:750;
}

.km-step1-progress i{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.11);
}

.km-step1-progress b{
  display:block;
  width:var(--km-initial-progress,20%);
  height:100%;
  border-radius:inherit;
  background:#ffb321;
}

body.km-step-service-active .km-service-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}

body.km-step-service-active .km-service-card.km-service-primary{
  position:relative;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr) auto!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:15px!important;
  width:100%;
  min-height:138px!important;
  padding:18px!important;
  border:1px solid rgba(255,179,33,.5)!important;
  border-radius:8px!important;
  background:#26231d!important;
  color:#fff;
  text-align:left;
  cursor:pointer;
  box-shadow:0 14px 36px rgba(0,0,0,.22);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

body.km-step-service-active .km-service-card.km-service-primary:hover{
  transform:translateY(-2px);
  border-color:#ffc24d!important;
  background:#2f291d!important;
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}

body.km-step-service-active .km-service-card.km-service-primary.active{
  border-color:#ffbd3d!important;
  background:#322a1b!important;
  box-shadow:0 0 0 2px rgba(255,179,33,.14),0 18px 42px rgba(0,0,0,.28)!important;
}

body.km-step-service-active .km-service-card.km-service-primary>span{
  grid-row:auto!important;
}

.km-service-tow-icon{
  width:92px;
  height:82px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#ffb321;
  color:#17130b;
  font-size:inherit!important;
}

.km-service-tow-icon svg{
  width:78px;
  height:54px;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.km-step-service-active .km-service-copy{
  display:grid!important;
  grid-column:auto!important;
  gap:6px;
  min-width:0;
  font-size:inherit!important;
}

body.km-step-service-active .km-service-copy strong{
  grid-column:auto;
  color:#fff;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
}

body.km-step-service-active .km-service-copy small{
  grid-column:auto;
  color:#c3cad2;
  font-size:12px;
  line-height:1.42;
}

body.km-step-service-active .km-service-primary .km-service-status{
  align-self:start;
  min-height:26px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:rgba(255,179,33,.12);
  color:#ffc75c;
  font-size:10px!important;
  line-height:1;
  font-weight:850;
}

body.km-step-service-active .km-service-primary.active .km-service-status{
  background:#ffb321;
  color:#17130b;
}

.km-future-services{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.km-future-service{
  min-height:70px;
  display:grid;
  grid-template-columns:31px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  column-gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#8f98a4;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}

.km-future-service:hover,
.km-future-service:focus-visible{
  border-color:rgba(255,179,33,.48);
  background:rgba(255,179,33,.08);
}

.km-future-service.active{
  border-color:#ffb321;
  background:rgba(255,179,33,.14);
  box-shadow:0 0 0 1px rgba(255,179,33,.16) inset;
}

.km-future-service.active>span,
.km-future-service.active strong,
.km-future-service.active small{
  color:#ffc75c;
}

.km-future-service>span{
  grid-row:1/3;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  color:#7f8995;
}

.km-future-service svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.km-future-service strong{
  align-self:end;
  overflow-wrap:anywhere;
  color:#aab2bc;
  font-size:11.5px;
  line-height:1.2;
  font-weight:800;
}

.km-future-service small{
  align-self:start;
  color:#69737f;
  font-size:9.5px;
  line-height:1.25;
  font-weight:750;
  text-transform:uppercase;
}

body.km-step-service-active .km-safe-note{
  margin:0;
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid rgba(120,154,193,.22);
  border-radius:8px;
  background:rgba(78,113,153,.1);
  color:#becada;
  font-size:10.5px;
  line-height:1.4;
  font-weight:600;
}

body.km-step-service-active .km-safe-note svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:#8fb7e5;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.km-step-service-active .km-wizard-footer{
  position:relative!important;
  bottom:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

body.km-step-service-active .km-wizard-footer #kmWizardBack{
  display:none!important;
}

body.km-step-service-active .km-wizard-footer #kmWizardNext{
  min-height:54px;
  border-radius:8px!important;
  background:#ffb321;
  color:#17130b;
  font-size:14px;
  font-weight:900;
  box-shadow:0 13px 30px rgba(255,179,33,.2);
}

body.km-step-service-active .km-wizard-footer #kmWizardNext:disabled{
  background:#3a3f46;
  color:#8e97a1;
  box-shadow:none;
  cursor:not-allowed;
}

body.km-step-service-active .trust-row{
  margin:14px auto 0;
  color:rgba(224,230,236,.66);
  font-size:10.5px;
}

@media(max-width:560px){
  body.km-step-service-active .app-main{padding:14px 0 24px}
  body.km-step-service-active .content{width:min(100% - 16px,620px)}
  body.km-step-service-active .km-wizard-shell{padding:16px;gap:12px!important}
  body.km-step-service-active .km-wizard-service{gap:14px}
  .km-step1-mark{width:42px;height:42px;flex-basis:42px}
  .km-step1-heading h2{font-size:23px}
  body.km-step-service-active .km-service-card.km-service-primary{grid-template-columns:76px minmax(0,1fr)!important;min-height:120px!important;padding:14px!important;gap:12px!important}
  .km-service-tow-icon{width:76px;height:72px}
  .km-service-tow-icon svg{width:65px;height:46px}
  body.km-step-service-active .km-service-primary .km-service-status{position:absolute;right:10px;top:10px;min-height:22px;padding:0 7px;font-size:9px!important}
  body.km-step-service-active .km-service-copy strong{padding-right:62px;font-size:16px}
  body.km-step-service-active .km-service-copy small{font-size:11px}
}

@media(max-width:370px){
  body.km-step-service-active .km-wizard-shell{padding:13px}
  .km-step1-wordmark small{display:none}
  .km-future-service{grid-template-columns:25px minmax(0,1fr);column-gap:7px;padding:8px}
  .km-future-service>span{width:25px}
  .km-future-service strong{font-size:10.5px}
}

@media(min-width:900px){
  body.km-step-service-active::after{background:rgba(7,10,14,.68)}
  body.km-step-service-active .app-main{display:grid;align-items:center}
}

@media(prefers-reduced-motion:reduce){
  body.km-step-service-active .km-service-card.km-service-primary{transition:none}
}