/* Página do aplicativo — herda tokens do site */

.app-page .app-hero{
  position:relative;
  min-height:560px;
  color:#fff;
  overflow:hidden;
  background:var(--deep);
}

.app-hero-photo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(105deg, rgba(7,82,115,.94) 0%, rgba(8,117,169,.78) 48%, rgba(7,82,115,.55) 100%),
    url("assets/posto-jarjour.webp") center/cover no-repeat;
}

.app-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:end;
  padding:110px 0 56px;
  min-height:560px;
}

.app-hero-copy h1{
  font:700 58px/.96 Outfit,sans-serif;
  margin:0;
  letter-spacing:-2.2px;
  max-width:14ch;
}

.app-hero-copy h1 em{
  color:#78d1ed;
  font-style:normal;
}

.app-hero-copy > p:not(.eyebrow){
  margin:22px 0 0;
  max-width:42ch;
  font-size:17px;
  line-height:1.55;
  color:#dff4fc;
}

.app-download{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.app-download a{
  display:block;
  transition:transform .2s ease;
}

.app-download a:hover{transform:translateY(-2px)}
.app-download a:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}

.app-download img{
  display:block;
  width:158px;
  height:auto;
}

.app-hero-device{
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

.app-hero-device img{
  display:block;
  width:min(280px,72%);
  height:auto;
  filter:drop-shadow(0 25px 24px rgba(0,0,0,.35));
}

/* Vantagens */
.app-benefits{
  background:var(--cream);
  padding:88px 0;
}

.app-benefits-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:64px;
  margin-bottom:42px;
  align-items:end;
}

.app-benefits-head h2{
  font:700 48px/.98 Outfit,sans-serif;
  margin:0;
  letter-spacing:-1.8px;
}

.app-benefits-head h2 em{
  color:var(--red);
  font-style:normal;
}

.app-benefits-head > p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}

.app-benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.app-benefit{
  background:#fff;
  padding:28px 24px 26px;
  border-top:3px solid var(--blue);
  min-height:188px;
}

.app-benefit:nth-child(2){border-top-color:var(--red)}
.app-benefit:nth-child(3){border-top-color:#55bd78}
.app-benefit:nth-child(4){border-top-color:var(--deep)}

.app-benefit strong{
  display:block;
  font:700 34px/.9 Outfit,sans-serif;
  color:var(--blue);
  letter-spacing:-1px;
  margin-bottom:18px;
}

.app-benefit strong span{
  display:block;
  margin-top:8px;
  font:700 11px/1.25 "DM Sans",sans-serif;
  letter-spacing:1.1px;
  text-transform:uppercase;
  opacity:.78;
}

.app-benefit:nth-child(2) strong{color:var(--red)}
.app-benefit:nth-child(3) strong{color:#2f9a55}
.app-benefit:nth-child(4) strong{color:var(--deep)}

.app-benefit h3{
  font:700 20px/1.15 Outfit,sans-serif;
  margin:0 0 10px;
}

.app-benefit p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

/* Como usar */
.app-howto{
  padding:100px 0;
}

.app-howto-head{
  max-width:640px;
  margin-bottom:40px;
}

.app-howto-head h2{
  font:700 48px/.98 Outfit,sans-serif;
  margin:0;
  letter-spacing:-1.8px;
}

.app-howto-head h2 em{
  color:var(--red);
  font-style:normal;
}

.app-howto-head > p{
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
  max-width:52ch;
}

.app-steps{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}

.app-step{
  display:grid;
  grid-template-columns:88px 1fr 1.1fr;
  gap:28px;
  align-items:start;
  padding:28px 0;
  border-bottom:1px solid var(--line);
}

.app-step-num{
  font:700 42px/.9 Outfit,sans-serif;
  color:var(--blue);
  letter-spacing:-1.5px;
}

.app-step h3{
  font:700 24px/1.15 Outfit,sans-serif;
  margin:4px 0 10px;
}

.app-step p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  max-width:42ch;
}

.app-step-tip{
  margin:0;
  padding:18px 20px;
  background:var(--cream);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
}

.app-step-tip b{
  display:block;
  font:700 11px/1.25 DM Sans,sans-serif;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:6px;
}

/* Telas */
.app-screens{
  background:var(--blue);
  color:#fff;
  padding:96px 0 88px;
}

.app-screens-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:36px;
}

.app-screens-head h2{
  font:700 48px/.98 Outfit,sans-serif;
  margin:0;
  letter-spacing:-1.8px;
  max-width:14ch;
}

.app-screens-head h2 em{
  color:#78d1ed;
  font-style:normal;
}

.app-screens-head > p{
  margin:0;
  max-width:36ch;
  color:#dff4fc;
  font-size:15px;
  line-height:1.6;
}

.app-screens-rail{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.app-screen{
  margin:0;
}

.app-screen img{
  display:block;
  width:100%;
  height:auto;
  border-radius:3px;
  background:#054d70;
  box-shadow:0 18px 40px rgba(0,30,44,.28);
}

.app-screen figcaption{
  margin-top:14px;
  font:700 14px/1.35 Outfit,sans-serif;
}

.app-screen figcaption span{
  display:block;
  margin-top:4px;
  font:400 13px/1.5 DM Sans,sans-serif;
  color:#bfe6f3;
  font-weight:400;
}

/* CTA final */
.app-cta{
  background:var(--deep);
  color:#fff;
  padding:88px 0;
}

.app-cta-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
}

.app-cta h2{
  font:700 46px/.98 Outfit,sans-serif;
  margin:0;
  letter-spacing:-1.8px;
  max-width:16ch;
}

.app-cta h2 em{
  color:#78d1ed;
  font-style:normal;
}

.app-cta > .wrap > .app-cta-grid > div > p{
  margin:18px 0 0;
  color:#dff4fc;
  font-size:16px;
  line-height:1.6;
  max-width:42ch;
}

.app-cta .app-download{margin-top:26px}

.app-cta-note{
  padding:4px 0 4px 0;
  color:#c5e8f4;
  font-size:15px;
  line-height:1.6;
}

.app-cta-note a{
  color:#fff;
  text-underline-offset:3px;
}

.app-cta-note a:focus-visible{
  outline:2px solid #78d1ed;
  outline-offset:3px;
}

.app-cta-note strong{
  display:block;
  font:700 12px/1.3 DM Sans,sans-serif;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#78d1ed;
  margin-bottom:8px;
}

@media (max-width:800px){
  .app-hero-grid{
    grid-template-columns:1fr;
    gap:28px;
    padding:92px 0 36px;
    min-height:0;
    align-items:start;
  }

  .app-hero-copy h1{font-size:42px;letter-spacing:-1.6px}
  .app-hero-copy > p:not(.eyebrow){font-size:16px}

  .app-hero-device{order:-1;justify-content:flex-start}
  .app-hero-device img{width:min(210px,58vw)}

  .app-download img{width:142px}

  .app-benefits{padding:72px 0}
  .app-benefits-head{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:28px;
  }
  .app-benefits-head h2{font-size:38px}
  .app-benefits-grid{grid-template-columns:1fr 1fr}
  .app-benefit{min-height:0}

  .app-howto{padding:72px 0}
  .app-howto-head h2{font-size:38px}
  .app-step{
    grid-template-columns:56px 1fr;
    gap:14px 18px;
  }
  .app-step-num{font-size:32px}
  .app-step h3{font-size:20px;margin-top:0}
  .app-step-tip{grid-column:1 / -1}

  .app-screens{padding:72px 0 64px}
  .app-screens-head{
    display:block;
    margin-bottom:28px;
  }
  .app-screens-head h2{font-size:38px;margin-bottom:14px}
  .app-screens-rail{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .app-screens-rail .app-screen:last-child{
    grid-column:1 / -1;
    max-width:70%;
    justify-self:center;
  }

  .app-cta{padding:68px 0}
  .app-cta-grid{grid-template-columns:1fr;gap:28px}
  .app-cta h2{font-size:36px}
}

@media (max-width:440px){
  .app-benefits-grid{grid-template-columns:1fr}
  .app-screens-rail{grid-template-columns:1fr}
  .app-screens-rail .app-screen:last-child{
    grid-column:auto;
    max-width:none;
  }
  .app-hero-copy h1{font-size:36px}
  .app-download{gap:10px}
  .app-download img{width:132px}
}