/* ==========================================================================
   123 BUSQUEI — COMPONENTES DO SITE INSTITUCIONAL (VÁRIAS PÁGINAS)
   Menu com "Soluções", topo das páginas internas, celulares ilustrados,
   grades de recursos, passos e blocos de contato.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MENU COM SUBMENU "SOLUÇÕES"
   -------------------------------------------------------------------------- */
.main-nav ul { align-items: center; }
.main-nav a[aria-current="page"], .sub-toggle.current { color: var(--navy); background: var(--surface-2); }

.has-sub { position: relative; }
.sub-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px;
  font-family: var(--font-title); font-weight: 600; font-size: .9rem; color: var(--text-muted);
}
.sub-toggle:hover, .sub-toggle[aria-expanded="true"] { color: var(--navy); background: var(--surface-2); }
.sub-toggle i { font-size: .7rem; transition: transform .2s; }
.sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 340px;
  padding: 10px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.submenu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.has-sub.open .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 961px) {
  .has-sub:hover .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
.submenu a.sub-item {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; color: var(--text);
}
.submenu a.sub-item:hover, .submenu a.sub-item[aria-current="page"] { background: var(--surface-2); }
.submenu .icon-box { width: 42px; height: 42px; font-size: 1.05rem; border-radius: 12px; }
.submenu strong { display: block; font-family: var(--font-title); font-size: .92rem; color: var(--navy-900); }
.submenu small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--text-muted); }

@media (max-width: 960px) {
  .main-nav ul { align-items: stretch; }
  .sub-toggle { width: 100%; justify-content: space-between; font-size: 1.1rem; padding: 14px 12px; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--text); }
  .submenu {
    position: static; width: auto; transform: none; box-shadow: none; border: 0; padding: 0 0 8px;
    display: none; opacity: 1; visibility: visible;
  }
  .has-sub.open .submenu { display: block; transform: none; }
  .submenu a.sub-item { border-bottom: 0; padding: 10px 12px; }
}

/* --------------------------------------------------------------------------
   TOPO DAS PÁGINAS INTERNAS (FAIXA AZUL)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dark-bg); color: var(--dark-text);
  padding: 40px 0 64px;
}
.page-hero .fx-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .7; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--dark-muted); margin-bottom: 18px; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--gold); }
.page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 900; letter-spacing: -0.02em; color: #fff; margin: 16px 0 16px; }
.page-hero h1 em { font-style: normal; color: var(--gold); }
.page-hero .lead { font-size: 1.08rem; color: var(--dark-muted); max-width: 580px; }
.page-hero .hero-ctas { justify-content: flex-start; margin-top: 28px; }
.page-hero .hero-proof { color: var(--dark-muted); }
.page-hero .hero-proof i { color: #34d399; }
.page-hero .eyebrow { background: rgba(233,196,106,.14); color: var(--gold); border-color: rgba(233,196,106,.4); }

@media (max-width: 1020px) {
  .page-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .page-hero .lead { margin: 0 auto; }
  .page-hero .hero-ctas, .page-hero .hero-proof, .crumbs { justify-content: center; }
}
@media (max-width: 560px) { .page-hero { padding: 36px 0 52px; } .page-hero .hero-ctas .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   CELULAR ILUSTRADO (CATÁLOGO E APP DO ENTREGADOR)
   -------------------------------------------------------------------------- */
.phone-stage { position: relative; display: flex; justify-content: center; padding: 10px 0; }
.phone {
  position: relative; width: 260px; aspect-ratio: 9 / 17.5; flex-shrink: 0;
  border-radius: 42px; padding: 11px; background: #0b1220;
  box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.08), inset 0 0 0 2px #1f2a3d;
  transform: rotate(-3deg); transition: transform .5s ease;
}
.phone:hover { transform: rotate(0); }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; width: 90px; height: 22px; margin-left: -45px; border-radius: 20px; background: #0b1220; z-index: 3; }
.screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #fff; color: var(--navy-900); font-size: .78rem; display: flex; flex-direction: column; }

/* Telinha do catálogo */
.cat-top { padding: 44px 16px 14px; background: linear-gradient(160deg, var(--red), #b81d2a); color: #fff; }
.cat-store { display: flex; align-items: center; gap: 10px; }
.cat-logo { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 1.2rem; }
.cat-store strong { display: block; font-family: var(--font-title); font-size: .95rem; }
.cat-store span { font-size: .7rem; opacity: .9; }
.cat-chips { display: flex; gap: 6px; padding: 12px 14px 4px; overflow: hidden; }
.cat-chips span { padding: 5px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: .68rem; white-space: nowrap; }
.cat-chips span.on { background: var(--navy); color: #fff; }
.cat-list { padding: 6px 14px; display: grid; gap: 9px; flex: 1; }
.cat-item { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 12px; border: 1px solid var(--border); }
.cat-item > div:not(.price) { min-width: 0; }
.cat-item .ph { width: 36px; height: 36px; border-radius: 10px; background: #fef3c7; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; }
.cat-item strong { display: block; font-size: .72rem; line-height: 1.25; }
.cat-item small { color: var(--text-muted); font-size: .66rem; }
.cat-item .price { margin-left: auto; text-align: right; font-weight: 800; font-size: .72rem; white-space: nowrap; flex-shrink: 0; }
.cat-item .add { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--red); color: #fff; font-size: .7rem; margin-top: 3px; }
.cat-cart {
  margin: 8px 12px 14px; padding: 11px 14px; border-radius: 14px; background: var(--green-700); color: #fff;
  display: flex; justify-content: space-between; font-weight: 800; font-size: .76rem;
  animation: cartPop 4s ease-in-out infinite;
}
@keyframes cartPop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.05); } }

/* Telinha do app do entregador */
.screen.dark { background: #0f1c2e; color: #e2e8f0; }
.app-map { position: relative; height: 46%; background: #13284a; }
.app-map svg { width: 100%; height: 100%; display: block; }
.app-map .route { animation: routeFlow 1.6s linear infinite; }
.app-status { position: absolute; top: 40px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; }
.app-status span { padding: 5px 10px; border-radius: 999px; background: rgba(16,185,129,.2); color: #6ee7b7; font-weight: 800; font-size: .66rem; }
.app-status b { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .66rem; }
.ride {
  margin: -26px 12px 0; position: relative; padding: 14px; border-radius: 18px;
  background: #fff; color: var(--navy-900); box-shadow: 0 14px 30px rgba(0,0,0,.35);
  animation: rideIn 5s ease-in-out infinite;
}
@keyframes rideIn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ride-head { display: flex; justify-content: space-between; align-items: baseline; }
.ride-head span { font-size: .66rem; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .05em; }
.ride-head strong { font-family: var(--font-title); font-size: 1.35rem; color: var(--green-700); }
.ride-line { display: flex; gap: 8px; margin-top: 8px; font-size: .7rem; }
.ride-line i { width: 14px; text-align: center; margin-top: 2px; }
.ride-meta { display: flex; gap: 12px; margin-top: 8px; font-size: .68rem; color: var(--text-muted); }
.ride-btns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; margin-top: 12px; }
.ride-btns span { padding: 9px; border-radius: 10px; text-align: center; font-weight: 800; font-size: .74rem; }
.ride-btns .no { background: var(--surface-2); color: var(--text-muted); }
.ride-btns .yes { background: var(--green-700); color: #fff; }
.wallet { margin: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.wallet small { color: #94a3b8; font-size: .66rem; }
.wallet strong { display: block; font-family: var(--font-title); font-size: 1.1rem; color: #fff; }
.wallet-rows { display: grid; gap: 5px; margin-top: 8px; font-size: .68rem; }
.wallet-rows div { display: flex; justify-content: space-between; color: #cbd5e1; }
.wallet-rows b { color: #6ee7b7; }

/* Selinhos flutuando ao lado do celular */
.float-badge {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--navy-900);
  box-shadow: 0 14px 34px rgba(0,0,0,.3); font-size: .78rem; line-height: 1.3; z-index: 2;
  animation: floaty 6s ease-in-out infinite;
}
.float-badge strong { display: block; font-family: var(--font-title); font-size: .84rem; }
.float-badge span { color: var(--text-muted); }
.float-badge .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.fb-1 { bottom: 26%; left: 0; }
.fb-2 { top: 10%; right: 0; animation-delay: -3s; }
@media (max-width: 560px) {
  .phone { width: 250px; }
  .float-badge { font-size: .7rem; padding: 8px 10px; }
  .phone-stage { padding: 46px 0 52px; }
  .fb-1 { bottom: 0; left: 4px; } .fb-2 { top: 0; right: 4px; }
}

/* --------------------------------------------------------------------------
   GRADE DE RECURSOS (FUNDO CLARO)
   -------------------------------------------------------------------------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card {
  position: relative; padding: 28px 24px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 1.12rem; color: var(--navy-900); margin: 16px 0 8px; }
.card p { font-size: .94rem; color: var(--text-muted); }
.card .mini-list { margin-top: 12px; }
.card .tag-plan { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: rgba(230,57,70,.1); color: var(--red-700); }
.section-dark .card { background: var(--dark-surface); border-color: var(--dark-border); }
.section-dark .card h3 { color: #fff; }
.section-dark .card p { color: var(--dark-muted); }
.section-dark .card .mini-list li { color: var(--dark-text); }
.section-dark .card .mini-list i { color: #34d399; }
@media (max-width: 960px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards-3, .cards-2 { grid-template-columns: 1fr; } }

/* Problema x solução */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 0 auto; }
.versus-col { padding: 28px; border-radius: var(--radius-lg); }
.versus-col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 16px; }
.versus-col ul { display: grid; gap: 12px; }
.versus-col li { display: flex; gap: 10px; font-size: .95rem; }
.versus-col li i { margin-top: 4px; }
.versus-bad { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
.versus-bad i { color: var(--red-700); }
.versus-good { background: #ecfdf5; border: 1px solid #a7f3d0; color: #064e3b; }
.versus-good i { color: var(--green-700); }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } }

/* Passos numerados em lista (como começar) */
.how { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; counter-reset: how; }
.how li {
  position: relative; display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
}
.how li::before {
  counter-increment: how; content: counter(how);
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-title); font-weight: 900;
  background: linear-gradient(145deg, #4a78b5, var(--navy)); color: #fff;
  box-shadow: 0 8px 18px rgba(29,53,87,.3);
}
.how h3 { font-size: 1.05rem; color: var(--navy-900); margin-bottom: 4px; }
.how p { font-size: .94rem; color: var(--text-muted); }
.section-dark .how li { background: var(--dark-surface); border-color: var(--dark-border); }
.section-dark .how h3 { color: #fff; }
.section-dark .how p { color: var(--dark-muted); }

/* --------------------------------------------------------------------------
   INÍCIO: "O QUE VOCÊ PROCURA?" E CALCULADORA RÁPIDA
   -------------------------------------------------------------------------- */
.path-card { text-decoration: none; color: inherit; cursor: pointer; }
.path-card .go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--font-title); font-weight: 800; font-size: .92rem; color: var(--navy);
}
.path-card .go i { transition: transform .2s; }
.path-card:hover .go i { transform: translateX(5px); }

.teaser {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.teaser-left { padding: 36px; }
.teaser-left h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--navy-900); margin: 10px 0 10px; }
.teaser-left p { color: var(--text-muted); margin-bottom: 20px; }
.teaser-right {
  padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: linear-gradient(160deg, var(--navy), var(--navy-900)); color: #fff;
}
.teaser-right .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.teaser-right .row span { color: var(--dark-muted); font-size: .92rem; }
.teaser-right .row strong { font-family: var(--font-title); font-size: 1.5rem; }
.teaser-right .loss { color: #ff8a93; }
.teaser-right .save { color: #6ee7b7; font-size: 2rem !important; }
.teaser-right small { color: var(--dark-muted); font-size: .78rem; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } .teaser-left, .teaser-right { padding: 26px 22px; } }

/* Diferenciais (3 pilares) */
.pillars-3 .card { text-align: center; }
.pillars-3 .icon-box { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 18px; }

/* --------------------------------------------------------------------------
   DÚVIDAS AGRUPADAS
   -------------------------------------------------------------------------- */
.faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.faq-tabs a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-family: var(--font-title); font-weight: 700; font-size: .9rem; color: var(--navy);
}
.faq-tabs a:hover { border-color: var(--navy); }
.faq-group { max-width: 820px; margin: 0 auto 48px; }
.faq-group > h2 { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; color: var(--navy-900); margin-bottom: 16px; }
.faq-group > h2 .icon-box { width: 40px; height: 40px; font-size: 1rem; border-radius: 12px; }

/* --------------------------------------------------------------------------
   SOBRE E CONTATO
   -------------------------------------------------------------------------- */
.story { max-width: 760px; margin: 0 auto; font-size: 1.05rem; }
.story p { color: var(--text-muted); margin-bottom: 18px; }
.story p:first-child::first-letter { float: left; font-family: var(--font-title); font-weight: 900; font-size: 3.4rem; line-height: .9; margin: 6px 10px 0 0; color: var(--red); }
.quote {
  margin: 30px 0; padding: 24px 28px; border-left: 5px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface); font-family: var(--font-title); font-size: 1.2rem; font-weight: 700; color: var(--navy-900);
}

.channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.channel {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.channel h3 { font-size: 1rem; color: var(--navy-900); margin-top: 6px; }
.channel p { font-size: .88rem; color: var(--text-muted); flex: 1; }
.channel strong { font-size: .92rem; color: var(--navy-900); word-break: break-word; }
@media (max-width: 960px) { .channels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .channels { grid-template-columns: 1fr; } }

.brand-card {
  position: relative; padding: 36px; border-radius: 24px; text-align: center;
  background: #fff; color: var(--navy-900); box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: rotate(2deg);
}
.brand-card img { width: 220px; margin: 0 auto 18px; }
.brand-card .facts-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.brand-card .facts-mini div { padding: 12px; border-radius: 12px; background: var(--surface-2); font-size: .78rem; color: var(--text-muted); }
.brand-card .facts-mini strong { display: block; font-family: var(--font-title); font-size: .95rem; color: var(--navy-900); }
.brand-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 24px 24px;
  background: linear-gradient(90deg, var(--navy) 0 33.3%, var(--red) 33.3% 66.6%, var(--gold) 66.6%);
}

/* Mapa de região (parceria) */
.region { position: relative; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #13284a, var(--navy-900)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px rgba(0,0,0,.35); aspect-ratio: 5 / 4; }
.region svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.region .link { fill: none; stroke: rgba(233,196,106,.55); stroke-width: 2; stroke-dasharray: 4 8; animation: routeFlow 1.6s linear infinite; }
.region .city { fill: #fff; }
.region .city-label { fill: #e2e8f0; font-family: var(--font-title); font-size: 13px; font-weight: 700; }
.region .hub { fill: var(--gold); }

/* Seção de conteúdo com texto + visual em fundo claro */
.split-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-visual h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy-900); margin: 12px 0 14px; }
.split-visual > div > p { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 18px; }
.section-dark .split-visual h2 { color: #fff; }
.section-dark .split-visual > div > p { color: var(--dark-muted); }
@media (max-width: 960px) { .split-visual { grid-template-columns: 1fr; gap: 36px; } }

.page-cta { padding-top: 0; }

/* --------------------------------------------------------------------------
   PAINEL DE ENTREGAS REALISTA (vitrine do produto na Início e em Entregas)
   -------------------------------------------------------------------------- */
.dash {
  position: relative; border-radius: 16px; overflow: hidden; font-size: 11px; line-height: 1.35;
  background: #fff; color: var(--navy-900);
  box-shadow: 0 40px 90px rgba(15,28,46,.35), 0 0 0 1px rgba(15,28,46,.08);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transition: transform .5s ease;
}
.dash:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.dash-chrome { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #eef1f5; border-bottom: 1px solid #dfe4ea; }
.dash-chrome .dots { display: flex; gap: 5px; }
.dash-chrome .dots i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.dash-chrome .dots i:nth-child(1) { background: #ff5f57; }
.dash-chrome .dots i:nth-child(2) { background: #febc2e; }
.dash-chrome .dots i:nth-child(3) { background: #28c840; }
.dash-url { flex: 1; padding: 4px 10px; border-radius: 7px; background: #fff; color: #5b6577; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-url i { color: var(--green-700); font-size: 9px; margin-right: 4px; }
.dash-tag { font-size: 9.5px; font-weight: 700; color: #5b6577; white-space: nowrap; }

.dash-app { display: flex; }
.dash-rail { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 0; background: var(--navy-900); color: #64748b; font-size: 13px; }
.dash-rail .on { color: var(--gold); }
.dash-logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--navy); font-family: var(--font-title); font-weight: 900; font-size: 10px; letter-spacing: -.5px; margin-bottom: 4px; }
.dash-main { flex: 1; min-width: 0; background: #f6f8fb; }

.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; }
.dash-kpis div { padding: 8px 9px; border-radius: 10px; background: #fff; border: 1px solid #e5e9ef; }
.dash-kpis small { display: block; color: #6b7280; font-size: 9.5px; }
.dash-kpis strong { display: block; font-family: var(--font-title); font-size: 15px; color: var(--navy-900); }
.dash-kpis em { font-style: normal; font-size: 9px; color: #6b7280; }
.dash-kpis em.up { color: var(--green-700); font-weight: 700; }

.dash-body { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 0 10px 10px; }
.dash-orders { display: flex; flex-direction: column; gap: 7px; }
.dash-orders-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.dash-orders-head strong { font-family: var(--font-title); font-size: 12px; }
.dash-orders-head span { color: #6b7280; font-size: 9.5px; }
.order { padding: 8px 9px; border-radius: 10px; background: #fff; border: 1px solid #e5e9ef; }
.order-top { display: flex; justify-content: space-between; align-items: center; }
.order-top b { font-size: 10.5px; }
.order p { margin: 2px 0 3px; font-size: 10px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order small { color: #6b7280; font-size: 9.5px; }
.order small i { width: 11px; }
.chip { padding: 1px 7px; border-radius: 999px; font-size: 8.5px; font-weight: 800; }
.c-new { background: #fee2e2; color: #b91c1c; }
.c-prep { background: #fef3c7; color: #92400e; }
.c-route { background: #dbeafe; color: #1d4ed8; }
.c-done { background: #d1fae5; color: #065f46; }
.order.is-new { border-color: #fca5a5; animation: newOrder 4s ease-in-out infinite; }
@keyframes newOrder { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,46,61,0); } 50% { box-shadow: 0 0 0 4px rgba(214,46,61,.18); } }
.order-bar { height: 4px; border-radius: 4px; background: #e5e9ef; overflow: hidden; margin: 3px 0 4px; }
.order-bar span { display: block; height: 100%; width: 35%; border-radius: 4px; background: #2563eb; animation: orderBar 14s linear infinite; }
@keyframes orderBar { from { width: 20%; } to { width: 95%; } }

.dash-map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #e5e9ef; min-height: 250px; }
.dash-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dash-route-dash { animation: routeFlow 1.2s linear infinite; }
.map-ctrl { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.map-ctrl span { width: 22px; height: 22px; display: grid; place-items: center; background: #fff; color: #374151; font-weight: 700; font-size: 13px; }
.map-ctrl span + span { border-top: 1px solid #e5e9ef; }
.map-live { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: #fff; color: var(--green-700); font-weight: 800; font-size: 9.5px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.map-live .live-dot { width: 6px; height: 6px; color: #10b981; }
.map-legend { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.92); font-size: 9px; color: #374151; }
.map-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.map-toast {
  position: absolute; right: 8px; bottom: 8px; display: flex; gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: 10px; background: var(--navy-900); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  animation: mapToast 9s ease-in-out infinite;
}
.map-toast i { color: #34d399; font-size: 13px; }
.map-toast strong { display: block; font-size: 9.5px; }
.map-toast span { font-size: 8.5px; color: #b6c2d2; }
@keyframes mapToast { 0%, 12% { opacity: 0; transform: translateY(8px); } 18%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(8px); } }

/* No celular: só indicadores + mapa (a lista de pedidos e o menu lateral somem) */
@media (max-width: 1020px) { .dash { transform: none; width: 100%; max-width: 640px; margin: 0 auto; } }
@media (max-width: 600px) {
  .dash-rail, .dash-orders, .dash-tag { display: none; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-map { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .dash { transform: none; } }

/* --------------------------------------------------------------------------
   SOBRE: CELULAR COM A MARCA
   -------------------------------------------------------------------------- */
.screen.brand-screen { background: linear-gradient(180deg, #fff 0%, #f6f7f9 100%); padding: 40px 14px 14px; gap: 10px; }
.brand-screen .bs-logo { width: 150px; margin: 6px auto 0; }
.brand-screen .bs-slogan { text-align: center; font-family: var(--font-title); font-weight: 800; font-size: .8rem; color: var(--navy-900); }
.brand-screen .bs-sub { text-align: center; font-size: .66rem; color: var(--text-muted); margin-top: -6px; }
.bs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.bs-tile { padding: 10px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(15,28,46,.05); text-align: center; }
.bs-tile .icon-box { width: 34px; height: 34px; font-size: .85rem; border-radius: 10px; margin: 0 auto 6px; }
.bs-tile strong { display: block; font-size: .68rem; color: var(--navy-900); line-height: 1.2; }
.bs-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--navy); color: #fff; font-size: .66rem; }
.bs-foot img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gold); }
.bs-foot strong { display: block; font-size: .7rem; }
.bs-bar { height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--navy) 0 33.3%, var(--red) 33.3% 66.6%, var(--gold) 66.6%); }

/* --------------------------------------------------------------------------
   Ian: IMAGENS OFICIAIS (Ficha B — avatar 3D)
   -------------------------------------------------------------------------- */
.welcome-img { width: 96px; height: 96px; max-width: none; border-radius: 50%; margin: 0 0 12px; box-shadow: 0 8px 20px rgba(15,28,46,.25); }
.ian-fab img, .chat-head img { background: var(--navy); }

/* ==========================================================================
   v5.2 — CANAL PRÓPRIO, VITRINE DE APARELHOS, VÍDEO E CENTRAL DE DÚVIDAS
   ========================================================================== */

/* --- "Mesmo pedido de R$ 100" ------------------------------------------- */
.why-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; margin-bottom: 28px; }
.order-compare {
  padding: 30px 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 22px;
}
.order-compare h3 { font-size: 1.3rem; color: var(--navy-900); }
.order-compare > p { color: var(--text-muted); font-size: .95rem; margin-top: -12px; }
.oc-row { display: grid; gap: 8px; }
.oc-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--navy-900); }
.oc-head span { display: inline-flex; align-items: center; gap: 8px; }
.oc-head strong { font-family: var(--font-title); font-size: 1.5rem; }
.oc-bar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; background: var(--surface-2); font-size: .82rem; font-weight: 800; }
.oc-bar span { display: flex; align-items: center; justify-content: center; white-space: nowrap; color: #fff; width: 0; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.oc-bar .you { background: linear-gradient(90deg, #047857, #10b981); }
.oc-bar .fee { background: repeating-linear-gradient(-45deg, #D62E3D 0 10px, #c62835 10px 20px); }
.reveal.visible .oc-bar .you.w80 { width: 80%; }
.reveal.visible .oc-bar .fee.w20 { width: 20%; }
.reveal.visible .oc-bar .you.w100 { width: 100%; }
.no-js .oc-bar .w80 { width: 80%; } .no-js .oc-bar .w20 { width: 20%; } .no-js .oc-bar .w100 { width: 100%; }
.oc-row.bad .oc-head strong { color: var(--red-700); }
.oc-row.good .oc-head strong { color: var(--green-700); }
.oc-result {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4); border: 1px solid #a7f3d0; color: #064e3b; font-size: .92rem;
}
.oc-result strong { font-family: var(--font-title); font-size: 1.25rem; color: var(--green-700); white-space: nowrap; }
.oc-note { font-size: .78rem; color: var(--text-muted); }

/* --- Vitrine de aparelhos + vídeo ---------------------------------------- */
.showcase {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 420px;
  background: radial-gradient(500px 300px at 70% 20%, rgba(233,196,106,.25), transparent 70%), linear-gradient(160deg, #16294a, var(--navy-900));
  box-shadow: var(--shadow); isolation: isolate;
}
.showcase-label { position: absolute; left: 20px; top: 18px; z-index: 3; color: #fff; }
.showcase-label small { display: block; color: var(--gold); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.showcase-label strong { font-family: var(--font-title); font-size: 1.15rem; }
.devices { position: absolute; inset: 70px 10px 10px; }

.laptop { position: absolute; left: 4%; bottom: 14%; width: 66%; }
.laptop-screen { aspect-ratio: 16 / 10; border-radius: 12px 12px 0 0; padding: 8px; background: #0b1220; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.laptop-base { height: 12px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#cbd5e1, #94a3b8); }
.web { height: 100%; border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-size: 7px; color: var(--navy-900); }
.web-top { display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: var(--red-btn); color: #fff; font-weight: 800; font-size: 8px; }
.web-top i { width: 16px; height: 16px; border-radius: 5px; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 9px; }
.web-top em { margin-left: auto; font-style: normal; font-weight: 600; opacity: .9; }
.web-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; flex: 1; }
.web-card { border-radius: 6px; border: 1px solid var(--border); padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.web-card .ph { height: 38%; min-height: 18px; border-radius: 4px; background: #fef3c7; display: grid; place-items: center; font-size: 12px; }
.web-card b { font-size: 7px; } .web-card span { color: var(--green-700); font-weight: 800; }

.tablet { position: absolute; right: 3%; top: 2%; width: 40%; aspect-ratio: 4 / 3; padding: 7px; border-radius: 14px; background: #0b1220; box-shadow: 0 20px 50px rgba(0,0,0,.45); transform: rotate(3deg); }
.kds { height: 100%; border-radius: 8px; background: #111827; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; font-size: 6.5px; color: #e5e7eb; }
.kds-col h6 { font-size: 6.5px; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; }
.kds-col:nth-child(1) h6 { color: #fca5a5; } .kds-col:nth-child(2) h6 { color: #fcd34d; } .kds-col:nth-child(3) h6 { color: #6ee7b7; }
.kds-tk { border-radius: 4px; padding: 3px 4px; margin-bottom: 3px; background: #1f2937; border-left: 2px solid #f87171; }
.kds-col:nth-child(2) .kds-tk { border-color: #fbbf24; } .kds-col:nth-child(3) .kds-tk { border-color: #34d399; }
.kds-tk.pop { animation: kdsPop 3.5s ease-in-out infinite; }
@keyframes kdsPop { 0%, 70%, 100% { background: #1f2937; } 80% { background: #7f1d1d; } }

.mini-phone { position: absolute; right: 12%; bottom: 4%; width: 22%; aspect-ratio: 9 / 18; padding: 5px; border-radius: 18px; background: #0b1220; box-shadow: 0 20px 50px rgba(0,0,0,.5); transform: rotate(-5deg); }
.mini-phone .scr { height: 100%; border-radius: 13px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-size: 6px; }
.mini-phone .s-top { padding: 12px 6px 6px; background: var(--red-btn); color: #fff; font-weight: 800; font-size: 7px; }
.mini-phone .s-item { display: flex; gap: 4px; align-items: center; margin: 4px 5px 0; padding: 3px; border: 1px solid var(--border); border-radius: 5px; }
.mini-phone .s-item i { font-style: normal; font-size: 9px; }
.mini-phone .s-cart { margin: auto 5px 6px; padding: 4px; border-radius: 5px; background: var(--green-700); color: #fff; font-weight: 800; text-align: center; }

.device-tag {
  position: absolute; z-index: 2; padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800;
  background: rgba(255,255,255,.95); color: var(--navy-900); box-shadow: 0 6px 16px rgba(0,0,0,.25); white-space: nowrap;
}
.dt-laptop { left: 6%; bottom: 6%; } .dt-tablet { right: 6%; top: 0; } .dt-phone { right: 3%; bottom: 0; }

/* Botão de play (só aparece quando há vídeo configurado) */
.video-play {
  position: absolute; left: 50%; top: 52%; z-index: 4; transform: translate(-50%, -50%);
  display: none; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 999px;
  background: rgba(255,255,255,.96); color: var(--navy-900); font-family: var(--font-title); font-weight: 800; font-size: .95rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.video-play .pb { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--red-btn); color: #fff; font-size: 1.1rem; box-shadow: 0 0 0 0 rgba(214,46,61,.6); animation: playPulse 2s infinite; }
.video-play img { width: 40px; height: 40px; border-radius: 50%; margin-left: -6px; border: 2px solid #fff; }
@keyframes playPulse { 70% { box-shadow: 0 0 0 16px rgba(214,46,61,0); } 100% { box-shadow: 0 0 0 0 rgba(214,46,61,0); } }
.video-slot.has-video .video-play { display: inline-flex; }
.video-slot.has-video .devices { filter: brightness(.75); }
.video-slot.has-video { cursor: pointer; }

.modal-video .modal-box { max-width: 960px; padding: 0; background: #000; overflow: hidden; }
.modal-video .modal-close { color: #fff; z-index: 2; background: rgba(0,0,0,.4); }
.video-frame { aspect-ratio: 16 / 9; width: 100%; }
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* --- Vantagens do canal próprio ------------------------------------------ */
.why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-card { position: relative; padding: 24px 20px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.why-card h3 { font-size: 1.05rem; color: var(--navy-900); margin: 14px 0 6px; }
.why-card > p { font-size: .9rem; color: var(--text-muted); flex: 1; }
.why-vs { display: grid; gap: 6px; margin-top: 14px; font-size: .8rem; }
.why-vs div { display: flex; gap: 8px; padding: 7px 10px; border-radius: 8px; }
.why-vs .m { background: #fef2f2; color: #7f1d1d; }
.why-vs .b { background: #ecfdf5; color: #064e3b; font-weight: 700; }
.why-vs i { margin-top: 2px; }
.both-strip {
  margin-top: 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--radius-lg);
  background: var(--navy); color: #fff;
}
.both-strip .icon-box { flex-shrink: 0; }
.both-strip p { flex: 1 1 380px; color: var(--dark-muted); }
.both-strip strong { color: #fff; font-family: var(--font-title); font-size: 1.05rem; display: block; margin-bottom: 2px; }

@media (max-width: 1020px) { .why-grid { grid-template-columns: 1fr; } .why-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .why-cards { grid-template-columns: 1fr; }
  .showcase { min-height: 330px; }
  .order-compare { padding: 22px 18px; }
  .oc-bar { font-size: .72rem; }
}

/* --- Central de dúvidas (todas as páginas) -------------------------------- */
.faq-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; max-width: 1080px; margin: 0 auto; }
.faq-layout .faq { max-width: none; margin: 0; }
.faq-help {
  position: sticky; top: calc(var(--header-h) + var(--ticker-h, 0px) + 20px);
  padding: 26px 22px; border-radius: var(--radius-lg); text-align: center; color: #fff;
  background: radial-gradient(300px 200px at 50% 0%, rgba(233,196,106,.25), transparent 70%), linear-gradient(160deg, var(--navy), var(--navy-900));
  box-shadow: var(--shadow);
}
.faq-help img { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.faq-help h3 { font-size: 1.15rem; margin-bottom: 6px; }
.faq-help p { font-size: .88rem; color: var(--dark-muted); margin-bottom: 16px; }
.faq-help .btn + .btn { margin-top: 10px; }
.faq-help small { display: block; margin-top: 14px; color: var(--dark-muted); font-size: .78rem; }

/* Perguntas numeradas em cartões */
.faq { counter-reset: faq; }
.faq details { position: relative; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s; }
.faq details:hover { border-color: #c7d2e0; transform: translateY(-1px); }
.faq details[open] { border-color: transparent; box-shadow: 0 0 0 2px var(--navy), var(--shadow); }
.faq summary { padding: 18px 20px 18px 18px; gap: 14px; justify-content: flex-start; font-size: 1rem; }
.faq summary::before {
  counter-increment: faq; content: counter(faq, decimal-leading-zero);
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 900; font-size: .85rem; color: var(--navy);
  background: rgba(29,53,87,.08); transition: background .2s, color .2s;
}
.faq details[open] summary::before { background: linear-gradient(145deg, #4a78b5, var(--navy)); color: #fff; }
.faq summary > i { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: .8rem; }
.faq details[open] summary > i { background: var(--gold); color: var(--navy-900); }
.faq .answer { padding: 0 22px 20px 70px; font-size: .96rem; line-height: 1.7; }
.faq .answer a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.faq details.hide { display: none; }
mark.hl { background: rgba(233,196,106,.55); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Busca e filtros da página Dúvidas */
.faq-search { position: relative; max-width: 640px; margin: 26px auto 0; }
.faq-search i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.05rem; }
.faq-search input {
  width: 100%; padding: 18px 20px 18px 52px; border-radius: 16px; border: 0; font-size: 1.05rem;
  background: #fff; color: var(--navy-900); box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.faq-search input:focus { outline: 3px solid var(--gold); }
.faq-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; font-size: .82rem; color: var(--dark-muted); }
.faq-popular button { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: .8rem; }
.faq-popular button:hover { background: rgba(255,255,255,.16); }
.faq-tabs button {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-family: var(--font-title); font-weight: 700; font-size: .9rem; color: var(--navy);
}
.faq-tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.faq-tabs button.on i { color: var(--gold) !important; }
.faq-tabs .count { font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.faq-tabs button.on .count { background: rgba(255,255,255,.15); color: #fff; }
.faq-results { text-align: center; color: var(--text-muted); font-size: .9rem; margin: -20px 0 26px; min-height: 1.2em; }
.faq-group.hide { display: none; }
.faq-empty { display: none; text-align: center; padding: 40px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px dashed var(--border); }
.faq-empty.show { display: block; }
.faq-empty img { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px; }
.faq-empty h3 { color: var(--navy-900); margin-bottom: 6px; }
.faq-empty p { color: var(--text-muted); margin-bottom: 16px; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-help { position: static; order: 2; }
}
@media (max-width: 560px) {
  .faq summary { padding: 14px; font-size: .95rem; }
  .faq summary::before { width: 32px; height: 32px; font-size: .78rem; }
  .faq .answer { padding: 0 16px 16px 16px; }
}

/* Celular do catálogo trocando de segmento (Lojistas) */
[data-segmentos] { transition: opacity .35s ease; }
[data-segmentos].trocando { opacity: 0; }

/* --- Recursos da plataforma em grupos ------------------------------------- */
.feat-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat-group { padding: 26px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.feat-group header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.feat-group header h3 { font-size: 1.1rem; color: var(--navy-900); }
.feat-group header small { display: block; color: var(--text-muted); font-size: .8rem; }
.feat-group ul { display: grid; gap: 9px; }
.feat-group li { display: flex; gap: 10px; font-size: .9rem; color: var(--text); }
.feat-group li i { color: var(--green-700); margin-top: 4px; font-size: .8rem; }
.feat-group li b { color: var(--navy-900); }
.feat-note { text-align: center; color: var(--text-muted); font-size: .85rem; margin-top: 22px; }
@media (max-width: 960px) { .feat-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feat-groups { grid-template-columns: 1fr; } }

/* --- Segmentos (para todo comércio que vende e entrega) ------------------ */
.segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.segment {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.segment:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.segment .icon-box { width: 46px; height: 46px; font-size: 1.15rem; border-radius: 14px; }
.segment h3 { font-size: .98rem; color: var(--navy-900); margin-bottom: 3px; }
.segment p { font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
.segments-more { text-align: center; margin-top: 22px; color: var(--text-muted); }
.segments-more strong { color: var(--navy-900); }
@media (max-width: 1020px) { .segments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .segments { grid-template-columns: 1fr; } }

.seg-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.seg-strip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: .9rem; color: var(--navy-900); box-shadow: var(--shadow-sm);
}
.seg-strip i { color: var(--red); }

/* --- v5.3: "E não é só comida" — outros nichos em bloco separado ---------- */
.nicho-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nicho { position: relative; padding: 22px 20px; border-radius: var(--radius-lg); background: var(--dark-surface); border: 1px solid var(--dark-border); }
.nicho h3 { color: #fff; font-size: 1.02rem; margin: 14px 0 6px; }
.nicho p { color: var(--dark-muted); font-size: .86rem; }
.nicho:hover { border-color: rgba(233,196,106,.4); }
@media (max-width: 1020px) { .nicho-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nicho-grid { grid-template-columns: 1fr; } }

.nicho-cta {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 22px; padding: 12px 18px 12px 12px; border-radius: 999px;
  background: var(--navy); color: #fff; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.nicho-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.nicho-cta-tag { padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--navy-900); font-family: var(--font-title); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.nicho-cta-txt { font-size: .9rem; color: var(--dark-text); }
.nicho-cta i { color: var(--gold); }
@media (max-width: 560px) { .nicho-cta { border-radius: 18px; padding: 14px; } }

/* --- v5.4: preço promocional e condição após a promoção ------------------ */
.plan-price .was { display: block; font-size: .95rem; font-weight: 700; color: var(--text-muted); text-decoration: line-through; margin-bottom: 2px; }
.plan-after { text-align: center; font-size: .78rem; color: var(--text-muted); margin: -2px 0 6px; }
.plan-alt { display: block; text-align: center; margin-top: 10px; font-size: .85rem; color: var(--navy); text-decoration: underline; }

/* ==========================================================================
   v5.6 — SELETOR "ESCOLHA O SEU RAMO" E PÁGINA MARKETPLACE
   ========================================================================== */

/* --- Escolha o seu ramo (abas verticais + painel) ------------------------ */
.ramos { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; }
.ramos-tabs { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ramo-tab {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; text-align: left;
  font-family: var(--font-title); font-weight: 700; font-size: .93rem; color: var(--text); transition: background .2s, color .2s;
}
.ramo-tab .icon-box { width: 36px; height: 36px; font-size: .9rem; border-radius: 11px; }
.ramo-tab:hover { background: var(--surface-2); }
.ramo-tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.ramo-tab[aria-selected="true"]::after { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: .7rem; color: var(--gold); }

.ramo-panel {
  position: relative; overflow: hidden; padding: 32px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); min-height: 100%;
  animation: ramoIn .35s ease;
}
.ramo-panel[hidden] { display: none; }
@keyframes ramoIn { from { opacity: 0; transform: translateY(8px); } }
.ramo-panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ramo-cor, var(--navy)); }
.ramo-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.ramo-head .icon-box { width: 58px; height: 58px; font-size: 1.45rem; border-radius: 16px; }
.ramo-head h3 { font-size: 1.45rem; color: var(--navy-900); }
.ramo-head small { display: block; color: var(--text-muted); font-size: .88rem; }
.ramo-pitch { font-size: 1.04rem; color: var(--text-muted); margin-bottom: 20px; max-width: 640px; }
.ramo-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.ramo-feats li { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: .92rem; }
.ramo-feats i { color: var(--green-700); margin-top: 4px; }
.ramo-feats b { color: var(--navy-900); }
.ramo-exemplos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; font-size: .85rem; color: var(--text-muted); }
.ramo-exemplos span.tag { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--navy-900); font-weight: 600; }

@media (max-width: 900px) {
  .ramos { grid-template-columns: 1fr; }
  .ramos-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ramos-tabs::-webkit-scrollbar { display: none; }
  .ramo-tab { flex-shrink: 0; }
  .ramo-tab[aria-selected="true"]::after { display: none; }
  .ramo-feats { grid-template-columns: 1fr; }
  .ramo-panel { padding: 24px 20px; }
}

/* --- Ilustração do Marketplace ------------------------------------------- */
.mkt { border-radius: 16px; overflow: hidden; background: #f6f8fb; color: var(--navy-900); font-size: 11px; box-shadow: 0 40px 90px rgba(0,0,0,.4); transform: perspective(1400px) rotateY(-6deg); transition: transform .5s; }
.mkt:hover { transform: none; }
.mkt-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #0a1aa8; }
.mkt-logo { width: 38px; height: 24px; border-radius: 4px; background: #fff; display: grid; place-items: center; font-family: var(--font-title); font-weight: 900; font-size: 10px; color: var(--navy); }
.mkt-search { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border-radius: 8px; background: #fff; color: #6b7280; }
.mkt-search b { margin-left: auto; padding: 3px 9px; border-radius: 6px; background: var(--red-btn); color: #fff; font-size: 9.5px; }
.mkt-sell { padding: 5px 10px; border-radius: 999px; background: #fff; color: #0a1aa8; font-weight: 800; font-size: 9.5px; white-space: nowrap; }
.mkt-body { padding: 12px; }
.mkt-city { display: flex; justify-content: center; margin-bottom: 10px; }
.mkt-city span { padding: 6px 14px; border-radius: 999px; border: 1.5px solid #0a1aa8; color: #0a1aa8; font-weight: 800; font-size: 10px; background: #fff; }
.mkt-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mkt-pills span { padding: 4px 10px; border-radius: 999px; border: 1px solid #dfe4ea; background: #fff; font-size: 9.5px; font-weight: 700; color: #4b5563; }
.mkt-pills span.on { background: #0a1aa8; border-color: #0a1aa8; color: #fff; }
.mkt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mkt-card { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #e5e9ef; }
.mkt-cover { position: relative; height: 54px; display: grid; place-items: center; font-size: 26px; }
.mkt-status { position: absolute; right: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; font-size: 8.5px; font-weight: 800; color: #fff; background: #10b981; }
.mkt-status.off { background: #6b7280; }
.mkt-info { position: relative; padding: 16px 9px 9px; }
.mkt-avatar { position: absolute; left: 9px; top: -16px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.mkt-info strong { display: block; font-size: 10.5px; }
.mkt-info small { display: inline-block; margin: 3px 0 6px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); font-size: 8.5px; font-weight: 700; color: #4b5563; }
.mkt-info em { font-style: normal; font-size: 8.5px; color: #6b7280; margin-left: 4px; }
.mkt-btn { display: block; padding: 6px; border-radius: 7px; background: #0a1aa8; color: #fff; text-align: center; font-weight: 800; font-size: 9.5px; }
@media (max-width: 1020px) { .mkt { transform: none; max-width: 560px; margin: 0 auto; } }
@media (max-width: 560px) { .mkt-sell { display: none; } }

/* Faixa de chamada para o Marketplace na Início */
.mkt-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 26px 30px; border-radius: var(--radius-lg);
  background: radial-gradient(400px 200px at 90% 0%, rgba(233,196,106,.25), transparent 70%), linear-gradient(135deg, #0a1aa8, var(--navy));
  color: #fff; box-shadow: var(--shadow);
}
.mkt-banner .icon-box { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 18px; }
.mkt-banner h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 4px; }
.mkt-banner p { color: var(--dark-muted); }
@media (max-width: 760px) { .mkt-banner { grid-template-columns: 1fr; text-align: center; } .mkt-banner .icon-box { margin: 0 auto; } }

/* Ilustrações sempre alinhadas à esquerda (o topo centraliza o texto no celular) */
.screen, .mkt, .dash { text-align: left; }


/* --- v5.7: Ian oficial (Ficha B) ------------------------------------------ */
.ian-fab img, .chat-head img, .bs-foot img, .video-play img, .faq-empty img { object-fit: cover; object-position: 50% 30%; background: #dddddd; }
.welcome-img { object-fit: cover; object-position: 50% 6%; background: #dddddd; border: 3px solid var(--gold); }
.faq-help img.ian-pose {
  width: 150px; height: 190px; border-radius: 18px; object-fit: cover; object-position: 50% 0;
  border: 3px solid var(--gold); background: #dddddd; box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Destaque dourado no título da chamada final */
.final-cta h2 em { font-style: normal; color: var(--gold); }


/* ==========================================================================
   v5.8 — PAINEL DA PRAÇA (PARCERIA) E CHAMADA COM O Ian (CENA 14)
   ========================================================================== */
.praca {
  position: relative; border-radius: 16px; overflow: hidden; background: #fff; color: var(--navy-900); text-align: left;
  box-shadow: 0 40px 90px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .5s ease;
}
.praca:hover { transform: none; }
.praca-map { position: relative; aspect-ratio: 520 / 330; }
.praca-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* rodovias: rota planejada (pontilhada) que se desenha em dourado quando a cidade é ativada */
.pc-road { stroke: #b6c0cd; stroke-width: 4; stroke-dasharray: .015 .025; }
.pc-road.on { stroke: #f3c34f; stroke-width: 7; stroke-dasharray: 1; animation: desenhaRota 1.1s ease forwards; }
@keyframes desenhaRota { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pc-moto { opacity: 0; transition: opacity .5s ease .9s; }
.pc-moto.on { opacity: 1; }

/* cidades vizinhas: cinza -> dourado */
.pc-city .pc-dot { fill: #94a3b8; stroke: #fff; stroke-width: 2.5; }
.pc-city { transform-box: fill-box; }
.pc-city.on .pc-dot { animation: cidadeAcende .5s ease .8s both; }
@keyframes cidadeAcende { from { fill: #94a3b8; } to { fill: #E9C46A; } }
.pc-city .pc-ico { fill: #fff; }
.pc-city .pc-ring { fill: none; stroke: #E9C46A; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pc-city .pc-label { font-family: var(--font-title); font-weight: 800; font-size: 10px; fill: #64748b; }
.pc-city.on .pc-dot { fill: #E9C46A; }
.pc-city.on .pc-ico { fill: #1D3557; }
.pc-city.on .pc-label { fill: #1D3557; }
.pc-city.on .pc-ring { animation: pinPulse 2.2s ease-out 1s infinite; }

/* cartão "Rode com: Sua Marca / 123 Busquei" */
.praca-brand {
  position: absolute; left: 10px; top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.96);
  box-shadow: 0 8px 20px rgba(0,0,0,.18); text-align: center; min-width: 118px;
}
.praca-brand small { display: block; font-size: 9px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
.brand-swap { position: relative; height: 40px; }
.brand-swap span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bs-a { gap: 6px; font-family: var(--font-title); font-weight: 900; font-size: 14px; color: #6d28d9; animation: brandA 8s ease-in-out infinite; }
.bs-b { animation: brandB 8s ease-in-out infinite; }
.bs-b img { height: 34px; width: auto; }
@keyframes brandA { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes brandB { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }

/* aviso de cada etapa */
.praca-toast {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 10px; background: var(--navy-900); color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: opacity .3s, transform .3s;
}
.praca-toast i { color: #34d399; }
.praca-toast.troca { opacity: 0; transform: translate(-50%, 6px); }

.praca-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--navy-900); }
.praca-stats div { padding: 12px 8px; text-align: center; color: var(--dark-muted); font-size: 11px; }
.praca-stats div + div { border-left: 1px solid rgba(255,255,255,.08); }
.praca-stats strong { display: block; font-family: var(--font-title); font-size: 1.35rem; color: #fff; font-variant-numeric: tabular-nums; }
.praca-stats strong.flash { animation: numPula .6s ease; }
@keyframes numPula { 0% { transform: scale(1); } 40% { transform: scale(1.22); color: var(--gold); } 100% { transform: scale(1); } }

@media (max-width: 1020px) { .praca { transform: none; width: 100%; max-width: 640px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .praca { transform: none; } .bs-a, .bs-b { animation: none; } .bs-b { opacity: 0; } }

/* --- Chamada final com o Ian apontando (cena 14) -------------------------- */
.ian-cta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; border-radius: var(--radius-lg);
  background: #0b2463 url("../Imagens/ian-cena-parceria.webp") left center / cover no-repeat; box-shadow: var(--shadow-lg);
}
.ian-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #4a78b5 0 33.3%, var(--red) 33.3% 66.6%, var(--gold) 66.6%); }
.ian-cta-text { grid-column: 2; align-self: center; padding: 48px 48px 48px 8px; color: #fff; }
.ian-cta-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 14px 0 12px; }
.ian-cta-text h2 em { font-style: normal; color: var(--gold); }
.ian-cta-text p { color: #c7d4ea; font-size: 1.05rem; margin-bottom: 24px; max-width: 460px; }
.ian-cta-text .eyebrow { background: rgba(233,196,106,.16); color: var(--gold); border-color: rgba(233,196,106,.45); }
@media (max-width: 860px) {
  .ian-cta { grid-template-columns: 1fr; min-height: 0; background-position: 18% top; background-size: auto 340px; background-color: #0b2463; }
  .ian-cta-text { grid-column: 1; padding: 300px 22px 30px; background: linear-gradient(180deg, transparent 0, rgba(11,36,99,.85) 260px, #0b2463 300px); text-align: center; }
  .ian-cta-text p { margin-left: auto; margin-right: auto; }
  .ian-cta-text .btn-row { justify-content: center; }
}

/* Painel da praça no celular: cartão da marca menor para não cobrir o mapa */
@media (max-width: 560px) { .praca-brand { transform: scale(.68); transform-origin: top left; } .praca-toast { font-size: 10px; padding: 6px 10px; } }


/* ==========================================================================
   v5.9 — APP DO ENTREGADOR INTERATIVO
   ========================================================================== */
.app-demo { position: relative; }
.app-demo .app-map { height: 40%; }
.app-rota { animation: routeFlow 1.4s linear infinite; }

/* notificação que desce no topo da tela */
.app-push {
  position: absolute; left: 8px; right: 8px; top: 30px; z-index: 5; display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.97); color: var(--navy-900);
  box-shadow: 0 12px 26px rgba(0,0,0,.45); font-size: .62rem; line-height: 1.3;
  transform: translateY(-140%); opacity: 0; transition: transform .45s cubic-bezier(.34,1.4,.64,1), opacity .3s;
}
.app-push.show { transform: none; opacity: 1; animation: pushVibra .5s ease .45s 2; }
@keyframes pushVibra { 0%, 100% { margin-left: 0; } 25% { margin-left: -3px; } 75% { margin-left: 3px; } }
.app-push strong { display: block; font-size: .6rem; color: #6b7280; }
.app-push span { font-weight: 800; font-size: .7rem; }
.app-push-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--green-700); color: #fff; font-size: .7rem; }

/* área que muda */
.app-panel { min-height: 158px; margin: -24px 12px 0; position: relative; z-index: 2; }
.app-wait, .app-result, .app-trip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px;
  padding: 14px; border-radius: 18px; background: #fff; color: var(--navy-900); text-align: center; font-size: .74rem;
  box-shadow: 0 14px 30px rgba(0,0,0,.35); animation: rideIn .4s ease;
}
.app-radar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(16,185,129,.15); }
.app-radar::before, .app-radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #10b981; animation: livePing 1.8s ease-out infinite; }
.app-radar::after { animation-delay: .9s; }
.app-demo .ride { margin: 0; animation: rideIn .35s ease; }
.app-demo .ride-btns button { padding: 9px; border-radius: 10px; font-weight: 800; font-size: .74rem; border: 0; cursor: pointer; transition: transform .15s, filter .15s; }
.app-demo .ride-btns button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.app-demo .ride-btns button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.app-demo .ride-btns .no { background: var(--surface-2); color: #4b5563; }
.app-demo .ride-btns .yes { background: var(--green-700); color: #fff; animation: btnGlow 2.2s ease-in-out infinite; }
.app-timer { margin-left: auto; color: var(--red-700); font-weight: 800; }
.app-bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.app-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--red-btn), var(--gold)); transform-origin: left; animation: appPrazo linear forwards; }
@keyframes appPrazo { to { transform: scaleX(0); } }

.app-trip { align-items: stretch; text-align: left; }
.app-trip-head { display: flex; justify-content: space-between; align-items: baseline; }
.app-trip-head strong { font-family: var(--font-title); font-size: .82rem; }
.app-trip-head span { font-family: var(--font-title); font-weight: 900; color: var(--green-700); }
.app-steps { display: grid; gap: 5px; }
.app-steps li { display: flex; gap: 8px; align-items: center; font-size: .68rem; color: #9ca3af; }
.app-steps li i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .55rem; background: var(--surface-2); flex-shrink: 0; }
.app-steps li.ok { color: var(--navy-900); }
.app-steps li.ok i { background: var(--green-700); color: #fff; }
.app-steps li.now { color: var(--navy-900); font-weight: 800; }
.app-steps li.now i { background: var(--gold); color: var(--navy-900); animation: livePing 0s; box-shadow: 0 0 0 3px rgba(233,196,106,.35); }

.app-result i { font-size: 1.6rem; }
.app-result.ok i { color: var(--green-700); }
.app-result.warn i { color: var(--red-700); }
.app-result strong { font-size: .76rem; line-height: 1.4; }

.app-demo .wallet strong.flash { animation: numPula .6s ease; }
.app-demo .wallet-rows .novo { animation: linhaNova 1.2s ease; border-radius: 4px; }
@keyframes linhaNova { 0% { background: rgba(52,211,153,.35); } 100% { background: transparent; } }

/* no celular de verdade o selo de baixo fica menor */
@media (max-width: 560px) { .app-panel { min-height: 150px; } }

/* Selos ao redor do celular interativo: nada por cima dos botões Aceitar/Recusar */
[data-app-demo] .fb-1 { display: none; }
[data-app-demo] .fb-2 { top: auto; bottom: 3%; left: 0; right: auto; }
@media (max-width: 560px) { [data-app-demo] .fb-2 { left: 4px; bottom: 0; } }


/* v5.10 — Ian da chamada final mais afastado: imagem inteira na altura, azul continua à direita */
.ian-cta {
  background:
    url("../Imagens/ian-cena-parceria.webp") left bottom / auto 100% no-repeat,
    linear-gradient(180deg, #0d2d64 0%, #09295f 50%, #072559 100%);
  min-height: 460px;
}
@media (max-width: 860px) {
  .ian-cta { background-size: auto 320px, auto; background-position: 12% top, 0 0; }
}

/* ==========================================================================
   v5.10 — CATÁLOGO INTERATIVO (FAZER UM PEDIDO NO CELULAR DO LOJISTA)
   ========================================================================== */
[data-segmentos] button { font: inherit; border: 0; cursor: pointer; }
[data-segmentos] button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cat-item .price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cat-item .qtd { display: inline-flex; align-items: center; gap: 4px; }
.cat-item .qtd b { min-width: 14px; text-align: center; font-size: .72rem; }
.cat-item .add, .cat-item .menos { width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 900; font-size: .85rem; line-height: 1; }
.cat-item .add { background: var(--red-btn); color: #fff; animation: addPulsa 2.4s ease-in-out infinite; }
.cat-item .menos { background: var(--surface-2); color: var(--navy-900); }
.cat-item.tem { border-color: var(--green-700); background: #f0fdf4; }
.cat-item.tem .add { animation: none; }
@keyframes addPulsa { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(214,46,61,.45); } 85% { box-shadow: 0 0 0 6px rgba(214,46,61,0); } }
button.cat-cart { width: calc(100% - 24px); border: 0; }
.cat-cart.vazio { background: var(--surface-2); color: var(--text-muted); justify-content: center; animation: none; cursor: default; font-weight: 700; }

/* carrinho / checkout */
.ck-top { position: relative; padding: 40px 14px 12px; color: #fff; text-align: center; }
.ck-top strong { display: block; font-family: var(--font-title); font-size: .92rem; }
.ck-top span { font-size: .66rem; opacity: .9; }
.ck-voltar { position: absolute; left: 10px; top: 40px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: .9rem; }
.ck-body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: .72rem; overflow: hidden; }
.ck-itens { display: grid; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.ck-itens div, .ck-linha { display: flex; justify-content: space-between; gap: 8px; }
.ck-linha.total { font-family: var(--font-title); font-size: .86rem; color: var(--navy-900); }
.ck-linha.total b { color: var(--green-700); }
.ck-end { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .68rem; }
.ck-end i { color: var(--red-btn); margin-right: 4px; }
.ck-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ck-pag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ck-pag button { padding: 8px 4px; border-radius: 10px; background: #fff; border: 1.5px solid var(--border); font-weight: 800; font-size: .7rem; color: var(--navy-900); }
.ck-pag button.on { border-color: var(--green-700); background: #ecfdf5; color: var(--green-700); }

/* pedido enviado / acompanhamento */
.ck-pedido { gap: 14px; }
.ck-ok { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 6px 0; }
.ck-ok i { font-size: 1.8rem; color: var(--green-700); animation: rideIn .5s ease; }
.ck-ok strong { font-family: var(--font-title); font-size: .95rem; color: var(--navy-900); }
.ck-ok span { color: var(--text-muted); font-size: .66rem; }
.ck-pedido .app-steps li { font-size: .72rem; }

/* O convite some quando o visitante começa a usar o celular (não cobre botões) */
.phone-stage .fb-1 { transition: opacity .3s ease; }
.phone-stage.usou .fb-1 { opacity: 0; pointer-events: none; }


/* Cartão azul do Marketplace: texto sempre claro, mesmo dentro de seção de fundo claro */
.mkt-banner h2, .split-visual .mkt-banner h2 { color: #fff; }
.mkt-banner p, .split-visual .mkt-banner p { color: #c7d4ea; margin-bottom: 0; }


/* Barras verdes do 'Mesmo pedido de R$ 100': verde mais escuro para o texto branco ficar legível */
.oc-bar .you { background: linear-gradient(90deg, #065f46, #047857); }


/* Celular do Sobre: atalhos clicáveis */
a.bs-tile { color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.bs-tile:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: 0 8px 18px rgba(15,28,46,.14); }
a.bs-tile:focus-visible, button.bs-foot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button.bs-foot { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: left; transition: filter .2s ease; }
button.bs-foot:hover { filter: brightness(1.12); }
.bs-seta { margin-left: auto; font-size: .6rem; color: var(--gold); }

/* Ian da chamada final: pequeno zoom (ancorado no topo para não cortar a cabeça) */
.ian-cta { background-size: auto 116%, auto; background-position: 0 0, 0 0; }
@media (max-width: 860px) { .ian-cta { background-size: auto 340px, auto; background-position: 14% 0, 0 0; } }


/* Sobre: selo 'Suporte humano' na altura do logo, longe dos atalhos clicáveis */
.phone-stage:has(.brand-screen) .fb-1 { top: 30%; bottom: auto; }


/* v5.11 — Ian com o rosto centralizado nos círculos (recortes quadrados já centrados) */
.ian-fab img, .chat-head img, .bs-foot img, .video-play img, .faq-empty img, .welcome-img { object-fit: cover; object-position: 50% 50%; }
/* v5.12 — Suporte e Diretoria (Sobre): fotos quadradas do Ian, mesmo enquadramento (olhos na mesma altura) */
.contact-card .img-wrap:has(img[src*='suporte']),
.contact-card .img-wrap:has(img[src*='diretoria']) { aspect-ratio: 1 / 1; overflow: hidden; }
.contact-card .img-wrap img[src*='suporte'],
.contact-card .img-wrap img[src*='diretoria'] { position: absolute; inset: 0; object-fit: cover; object-position: 50% 50%; padding: 0; }



/* --- v5.14: planos reais, calculadora com o Ian, marketplace interativo --------- */
.hero-home .dash { margin-top: 0; }
.trial-rules { margin-top: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.trial-rules summary { cursor: pointer; padding: 16px 20px; font-weight: 800; color: var(--navy); list-style: none; display: flex; align-items: center; gap: 10px; }
.trial-rules summary::-webkit-details-marker { display: none; }
.trial-rules summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: .75rem; transition: transform .2s; }
.trial-rules[open] summary::after { transform: rotate(180deg); }
.trial-rules-body { padding: 4px 22px 20px; font-size: .92rem; color: var(--text-muted); max-height: 420px; overflow-y: auto; }
.trial-rules-body h4 { color: var(--navy-900); font-size: 1.05rem; margin: 6px 0 10px; }
.trial-rules-body p { margin: 0 0 8px; }
.trial-rules-body p strong { color: var(--navy-900); }

.calc2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 36px; align-items: center; max-width: 920px; margin: 0 auto; }
.calc2-ian { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.calc2-ian img.ian-pose { width: 190px; height: 240px; border-radius: 20px; object-fit: cover; object-position: 50% 0; border: 3px solid var(--gold); background: #dddddd; box-shadow: var(--shadow-lg); }
.calc2-bubble { position: relative; padding: 14px 18px; border-radius: 18px; background: var(--navy); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.4; max-width: 320px; box-shadow: var(--shadow); }
.calc2-bubble::before { content: ''; position: absolute; top: -9px; left: 50%; margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--navy); }
.calc2-bubble b { color: var(--gold); }
.calc2-phone { width: 100%; max-width: 380px; margin: 0 auto; padding: 12px; border-radius: 40px; background: #0b1220; box-shadow: 0 30px 70px rgba(11,18,32,.35); }
.calc2-screen { position: relative; border-radius: 30px; background: #fff; padding: 22px 18px 18px; display: grid; gap: 16px; }
.calc2-screen::before { content: ''; position: absolute; top: 8px; left: 50%; width: 70px; height: 16px; margin-left: -35px; border-radius: 12px; background: #0b1220; }
.calc2-top { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--navy); font-family: var(--font-title); }
.calc2-top .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.calc2-top i { margin-left: auto; color: var(--gold-700, #b8892a); }
.calc2-screen .calc-field label { font-size: .88rem; }
.calc2-screen .calc-field output { font-size: 1.6rem; }
.calc2-chips { display: flex; gap: 6px; margin-top: 10px; }
.calc2-chips button { flex: 1; padding: 7px 0; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-weight: 800; color: var(--navy); cursor: pointer; transition: all .15s; }
.calc2-chips button:hover, .calc2-chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.calc2-results { display: grid; gap: 10px; }
.calc2-results .calc-card { padding: 14px 16px; }
.calc2-results .calc-card .big { font-size: 1.6rem; }
@media (max-width: 820px) { .calc2 { grid-template-columns: 1fr; gap: 26px; } .calc2-ian img.ian-pose { width: 150px; height: 190px; } }

/* Marketplace interativo */
.mkt { transform: none; }
.mkt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--navy-900); }
.mkt-search { cursor: text; }
.mkt-sell { text-decoration: none; }
.mkt-body { min-height: 430px; }
.mkt-pills button { padding: 4px 10px; border-radius: 999px; border: 1px solid #dfe4ea; background: #fff; font: inherit; font-size: 9.5px; font-weight: 700; color: #4b5563; cursor: pointer; }
.mkt-pills button.on { background: #0a1aa8; border-color: #0a1aa8; color: #fff; }
.mkt-card { text-align: left; padding: 0; font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.mkt-card:hover, .mkt-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(10,26,168,.18); outline: 0; }
.mkt-card.fechado { opacity: .75; }
.mkt-empty, .mkt-hint { text-align: center; color: #6b7280; margin: 12px 0 0; font-size: 10.5px; }
.mkt-hint { animation: mktDica 1.6s ease-in-out infinite; font-weight: 700; color: #0a1aa8; }
@keyframes mktDica { 50% { transform: translateY(-3px); } }
.mkt-back { border: 0; background: transparent; color: #0a1aa8; font: inherit; font-weight: 800; cursor: pointer; padding: 2px 0 8px; }
.mkt-store-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: #fff; margin-bottom: 10px; }
.mkt-store-head .emo { font-size: 26px; }
.mkt-store-head strong { display: block; font-size: 12.5px; }
.mkt-store-head small { opacity: .9; }
.mkt-prod { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: #fff; border: 1px solid #e5e9ef; }
.mkt-prod .emo { font-size: 20px; }
.mkt-prod div { flex: 1; }
.mkt-prod strong { display: block; font-size: 10.5px; }
.mkt-prod span { color: #047857; font-weight: 800; }
.mkt-prod button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #0a1aa8; color: #fff; font-weight: 900; font-size: 14px; cursor: pointer; }
.mkt-prod .qtd { min-width: 14px; text-align: center; font-weight: 800; color: #0a1aa8; }
.mkt-prod .ctrl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mkt-cart { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 10px; border-radius: 12px; background: #0a1aa8; color: #fff; font-weight: 700; }
.mkt-cart span { flex: 1; }
.mkt-cart button, .mkt-done button { border: 0; border-radius: 8px; background: #E9C46A; color: #0b1220; padding: 7px 12px; font: inherit; font-weight: 800; cursor: pointer; }
.mkt-done { text-align: center; padding: 26px 8px; }
.mkt-done-icon { font-size: 44px; color: #10b981; }
.mkt-done h4 { font-size: 15px; margin: 8px 0 6px; }
.mkt-done p { margin: 0 0 8px; font-size: 11px; }
.mkt-done small { display: block; color: #6b7280; margin-bottom: 14px; }
.mkt-done button { display: block; margin: 0 auto 10px; background: #0a1aa8; color: #fff; }
.mkt-real { display: inline-block; color: #0a1aa8; font-weight: 800; text-decoration: underline; }
.mkt-view[hidden] { display: none; }

/* --- v5.18: celulares virtuais menores no mobile ------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 560px) {
  .phone-stage { padding: 0; }
  .phone { transform: scale(.88); transform-origin: center top; margin: 0 0 -58px; }
  .phone:hover { transform: scale(.88); }
  .mkt-body { min-height: 360px; }
  .calc2-phone { max-width: 320px; padding: 9px; border-radius: 34px; }
  .calc2-screen { padding: 18px 14px 14px; gap: 12px; border-radius: 26px; }
  .calc2-screen .calc-field output { font-size: 1.35rem; }
  .calc2-results .calc-card { padding: 11px 13px; }
  .calc2-results .calc-card .big { font-size: 1.35rem; }
  .calc2-ian img.ian-pose { width: 120px; height: 152px; }
}

/* --- v5.18: telas do celular rolam por dentro e o botão de pedido fica sempre visível --- */
.screen[data-segmentos] .cat-top, .screen[data-segmentos] .cat-chips, .screen[data-segmentos] .ck-top { flex-shrink: 0; }
.screen[data-segmentos] .cat-list, .screen[data-segmentos] .ck-body {
  min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start;
  overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.screen[data-segmentos] .ck-body { display: flex; }
.screen[data-segmentos] .cat-cart { flex-shrink: 0; margin: 6px 12px 12px; padding: 12px 14px; font-size: .8rem; }
.screen[data-segmentos] .cat-list::-webkit-scrollbar, .screen[data-segmentos] .ck-body::-webkit-scrollbar { width: 3px; }
.screen[data-segmentos] .cat-list::-webkit-scrollbar-thumb, .screen[data-segmentos] .ck-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
@media (max-width: 560px) {
  .screen[data-segmentos] .cat-top { padding: 34px 14px 10px; }
  .screen[data-segmentos] .ck-top { padding-top: 32px; }
  .screen[data-segmentos] .ck-voltar { top: 30px; }
}