/* Landing Embalo · Fluxo azul grafite; base compartilhada em public-ui.css */
.hero {
  display:grid;
  grid-template-columns:minmax(0,1.07fr) minmax(360px,.93fr);
  gap:clamp(28px,5vw,80px);
  align-items:center;
  padding-top:70px;
  padding-bottom:73px
}

.hero-copy h1 {
  font-size:clamp(40px,5.1vw,70px);
  letter-spacing:-.055em;
  line-height:1.07;
  margin:15px 0 21px;
  max-width:13ch;
  font-weight:760;
  text-wrap:balance
}

.hero-copy>p {
  font-size:17px;
  color:var(--muted);
  max-width:55ch;
  margin:0
}

.hero-actions {
  display:flex;
  gap:11px;
  flex-wrap:wrap;
  margin:32px 0 30px
}

.hero-actions .button {
  min-height:50px
}

.hero-caption {
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
  max-width:500px
}

.caption-mark {
  background:var(--orange);
  width:22px;
  height:4px;
  box-shadow:0 7px 0 var(--orange),0 14px 0 var(--orange);
  transform:skewX(-22deg);
  margin-right:8px;
  align-self:flex-start;
  margin-top:2px
}

.hero-photo {
  margin:0;
  position:relative;
  height:min(575px,43vw);
  min-height:390px;
  border-radius:14px;
  overflow:hidden;
  background:var(--nav)
}

.hero-photo:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(9,23,38,.92),transparent 45%)
}

.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.68)
}

.hero-photo figcaption {
  position:absolute;
  z-index:1;
  bottom:25px;
  left:26px;
  right:26px;
  color:#fff;
  font-size:18px;
  font-weight:650;
  max-width:22ch;
  line-height:1.3
}

.attention-band {
  background:var(--nav);
  color:var(--nav-ink)
}

.attention-inner {
  display:grid;
  grid-template-columns:1fr 1.2fr auto;
  align-items:center;
  gap:35px;
  padding-top:30px;
  padding-bottom:30px
}

.attention-band .eyebrow {
  color:var(--nav-muted)
}

.attention-band h2 {
  font-size:22px;
  line-height:1.23;
  letter-spacing:-.02em;
  margin:6px 0 0;
  max-width:19ch
}

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

.attention-band a {
  font-size:13px;
  color:var(--nav-ink);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap
}

.section {
  padding-top:85px;
  padding-bottom:85px;
  scroll-margin-top:85px
}

.section-alt {
  background:var(--surface-2)
}

.section-heading {
  max-width:680px;
  margin-bottom:34px
}

.section-heading h2,.visual-copy h2,.install h2,.final-cta h2 {
  font-size:clamp(29px,3vw,43px);
  line-height:1.15;
  letter-spacing:-.04em;
  margin:8px 0 13px;
  text-wrap:balance
}

.section-heading p,.visual-copy p,.install p {
  color:var(--muted);
  max-width:63ch;
  margin:0;
  line-height:1.6
}

.audience-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}

.audience-grid article {
  border-top:2px solid var(--accent);
  padding:23px 22px 26px;
  background:var(--surface);
  min-height:205px
}

.audience-grid article>span,.plan-kicker {
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--accent)
}

.audience-grid h3 {
  font-size:22px;
  letter-spacing:-.03em;
  margin:22px 0 6px
}

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

.feature-list {
  border-top:1px solid var(--line)
}

.feature {
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 165px;
  gap:18px;
  align-items:center;
  padding:23px 0;
  border-bottom:1px solid var(--line)
}

.feature-num {
  font-size:12px;
  font-weight:800;
  color:var(--accent)
}

.feature h3 {
  font-size:20px;
  letter-spacing:-.02em;
  margin:0 0 4px
}

.feature p {
  font-size:14px;
  color:var(--muted);
  margin:0;
  max-width:62ch
}

.feature-tag {
  justify-self:end;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 11px;
  color:var(--muted);
  font-size:12px
}

.visual-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,88px);
  align-items:center
}

.visual-section.reverse {
  grid-template-columns:1fr 1fr
}

.visual-copy h2 {
  max-width:15ch
}

.visual-copy p {
  font-size:16px
}

.visual-copy ul {
  list-style:none;
  margin:25px 0;
  padding:0;
  max-width:500px
}

.visual-copy li {
  border-top:1px solid var(--line);
  padding:10px 0 10px 20px;
  color:var(--ink);
  font-size:14px;
  position:relative
}

.visual-copy li:before {
  content:"";
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  position:absolute;
  left:0;
  top:17px
}

.text-link {
  font-size:14px;
  font-weight:700;
  text-decoration:none
}

.text-link:hover {
  text-decoration:underline
}

.visual-image {
  margin:0;
  position:relative;
  background:var(--nav);
  min-height:360px;
  border-radius:13px;
  overflow:hidden
}

.visual-image img {
  width:100%;
  height:420px;
  object-fit:cover;
  filter:saturate(.75)
}

.visual-image figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,rgba(9,23,38,.87));
  padding:36px 21px 18px;
  color:#fff;
  font-size:12px
}

.route-preview {
  min-height:420px;
  margin:0;
  padding:32px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 24px 60px rgba(9,23,38,.09)
}

.route-preview-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:30px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em
}

.route-preview-top span:first-child {
  color:var(--accent)
}

.route-preview ol {
  list-style:none;
  margin:0;
  padding:0
}

.route-preview li {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 0;
  border-top:1px solid var(--line)
}

.route-preview li div {
  flex:1;
  min-width:0
}

.route-preview li strong,.route-preview li small {
  display:block
}

.route-preview li strong {
  font-size:15px
}

.route-preview li small {
  margin-top:4px;
  color:var(--muted);
  font-size:12px
}

.route-number {
  display:grid;
  place-items:center;
  flex:0 0 36px;
  height:36px;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--accent);
  font-weight:800;
  font-size:12px
}

.route-status {
  padding:6px 9px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--accent);
  font-size:11px;
  font-weight:700
}

.route-status.current {
  background:var(--warning-bg);
  color:var(--warning-ink)
}

.route-status.pending {
  background:var(--surface-2);
  color:var(--muted)
}

.route-preview figcaption {
  margin-top:24px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}


/* Seletor Mensal / Anual da vitrine de planos */
.billing-switcher-wrap {
  display:flex;
  justify-content:center;
  margin:0 0 32px;
}

.billing-switcher {
  display:inline-flex;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  padding:4px;
  border-radius:10px;
  box-shadow:var(--shadow);
  gap:4px;
}

.billing-btn {
  background:transparent;
  border:0;
  padding:8px 18px;
  border-radius:7px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .15s ease;
}

.billing-btn:hover {
  color:var(--ink);
}

.billing-btn.active {
  background:var(--nav);
  color:#ffffff;
  box-shadow:0 2px 6px rgba(21,37,54,.15);
}

:root[data-tema="escuro"] .billing-btn.active {
  background:var(--orange);
  color:var(--on-orange);
}

.billing-discount-badge {
  background:#2E7D32;
  color:#ffffff;
  font-size:10px;
  font-weight:800;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:.02em;
}

:root[data-tema="escuro"] .billing-discount-badge {
  background:#1B5E20;
  color:#E8F5E9;
}

.plan-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch
}

.plan-card {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:28px 24px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow);
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.plan-card:hover {
  transform:translateY(-2px)
}

.plan-card.featured {
  border:2px solid var(--orange);
  box-shadow:0 14px 34px rgba(245,104,32,.12)
}

:root[data-tema="escuro"] .plan-card.featured {
  border-color:var(--orange);
  box-shadow:0 14px 34px rgba(245,104,32,.22)
}

.plan-badge {
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--orange);
  color:#ffffff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 14px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 3px 10px rgba(245,104,32,.35)
}

.plan-card h3 {
  font-size:27px;
  letter-spacing:-.04em;
  margin:5px 0 4px
}

.plan-card p {
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.45
}

.plan-pricing-block {
  display:flex;
  flex-direction:column;
  gap:4px
}

.plan-price {
  font-size:31px;
  letter-spacing:-.04em;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.plan-price small {
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted)
}

.plan-annual {
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  min-height:36px
}

.plan-annual strong {
  color:var(--ink)
}

.plan-tag-save {
  display:inline-block;
  background:#E8F5E9;
  color:#1B5E20;
  font-size:10px;
  font-weight:800;
  padding:1px 6px;
  border-radius:4px;
  margin-left:4px;
  vertical-align:middle
}

:root[data-tema="escuro"] .plan-tag-save {
  background:rgba(46,125,50,.3);
  color:#81C784
}

.plan-card ul {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:11px;
  border-top:1px solid var(--line);
  padding-top:19px;
  flex:1
}

.plan-card li {
  font-size:13px;
  padding-left:17px;
  position:relative;
  line-height:1.45
}

.plan-card li:before {
  content:"";
  width:7px;
  height:7px;
  border:1.5px solid var(--accent);
  border-radius:50%;
  position:absolute;
  left:0;
  top:7px
}

.plan-card.featured li:before {
  border-color:var(--orange);
  background:var(--orange)
}

.plan-card .button {
  width:100%
}

.plan-footnote {
  color:var(--muted);
  font-size:12.5px;
  margin:24px 0 0;
  line-height:1.6;
  border-top:1px solid var(--line);
  padding-top:16px
}

.install-layout {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(290px,.6fr);
  gap:70px;
  align-items:center
}

.install h2 {
  max-width:16ch
}

.install-steps {
  margin:25px 0;
  max-width:570px
}

.install-steps>div {
  display:flex;
  gap:15px;
  align-items:flex-start;
  border-top:1px solid var(--line);
  padding:12px 0
}

.install-steps span {
  font-size:11px;
  font-weight:800;
  color:var(--accent)
}

.install-steps p {
  font-size:14px
}

.install-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.install-mark {
  min-height:330px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:23px
}

.install-mark img {
  width:170px;
  height:170px
}

.install-mark span {
  font-size:13px;
  color:var(--muted)
}

.faq-list {
  max-width:850px;
  border-top:1px solid var(--line)
}

.faq details {
  border-bottom:1px solid var(--line);
  padding:0
}

.faq summary {
  padding:20px 0;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.faq summary:after {
  content:"+";
  font-size:23px;
  color:var(--accent);
  font-weight:400
}

.faq details[open] summary:after {
  content:"−"
}

.faq summary::-webkit-details-marker {
  display:none
}

.faq details p {
  font-size:14px;
  color:var(--muted);
  margin:0;
  padding:0 30px 19px 0;
  line-height:1.6
}

.final-cta {
  background:var(--nav);
  color:var(--nav-ink);
  padding:65px 0
}

.final-cta .eyebrow {
  color:var(--nav-muted)
}

.final-cta h2 {
  max-width:18ch;
  margin:10px 0 24px
}

.final-cta+.public-footer {
  margin-top:0
}

@media(max-width:1000px) {
  .hero {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .hero-copy h1 {
    font-size:clamp(38px,5vw,58px)
  }
  .attention-inner {
    grid-template-columns:1fr 1.2fr
  }
  .attention-inner a {
    grid-column:2
  }
  .plan-price {
    font-size:26px
  }
  .install-layout {
    gap:25px
  }
}

@media(max-width:780px) {
  .hero {
    padding-top:45px;
    padding-bottom:47px;
    grid-template-columns:1fr
  }
  .hero-copy h1 {
    max-width:17ch
  }
  .hero-photo {
    height:400px;
    min-height:0
  }
  .attention-inner {
    display:block
  }
  .attention-inner p {
    margin:17px 0
  }
  .section {
    padding-top:62px;
    padding-bottom:62px
  }
  .audience-grid {
    grid-template-columns:1fr 1fr
  }
  .visual-section,.visual-section.reverse {
    grid-template-columns:minmax(0,1fr);
    gap:28px
  }
  .reverse .visual-image {
    order:2
  }
  .plan-grid {
    grid-template-columns:1fr
  }
  .plan-card {
    display:grid;
    grid-template-columns:1fr auto;
    gap:14px
  }
  .plan-card ul,.plan-card .button {
    grid-column:1/-1
  }
  .plan-pricing-block {
    text-align:right
  }
  .install-layout {
    grid-template-columns:1fr
  }
  .install-mark {
    min-height:250px
  }
  .install-mark img {
    width:130px;
    height:130px
  }
}

@media(max-width:520px) {
  .route-preview {
    padding:20px
  }
  .route-preview-top {
    flex-wrap:wrap;
    gap:4px 12px
  }
  .route-preview li {
    gap:10px
  }
  .route-status {
    padding:5px 6px;
    font-size:10px
  }
  .hero-copy h1 {
    font-size:40px
  }
  .hero-copy>p {
    font-size:16px
  }
  .hero-actions {
    flex-direction:column
  }
  .hero-actions .button {
    width:100%
  }
  .hero-photo {
    height:300px
  }
  .hero-photo figcaption {
    font-size:16px
  }
  .audience-grid {
    grid-template-columns:1fr
  }
  .audience-grid article {
    min-height:0
  }
  .feature {
    grid-template-columns:36px 1fr;
    gap:8px
  }
  .feature-tag {
    display:none
  }
  .visual-image {
    min-height:245px
  }
  .visual-image img {
    height:280px
  }
  .plan-card {
    display:flex
  }
  .plan-pricing-block {
    text-align:left
  }
  .plan-price {
    font-size:29px
  }
}