/* ==========================================================================
   LAVRE — estilos da página inicial (index.html)
   Cores, fonte e peças compartilhadas ficam no base.css.
   3. Peças da página   4. Topo e navegação   5. Seções (desktop)   6. Celular

   O desktop é o padrão. Tudo que muda no celular (abaixo de 900px) fica
   na parte 6, dentro de um único @media.
   ========================================================================== */

/* A página inicial não rola: o script.js troca de seção em tela cheia. */
html, body { height: 100%; overflow: hidden; }

/* 3. Peças da página ---------------------------------------------------------- */

/* Etiqueta verde no topo de cada seção */
.tag { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font-size: 14px; font-weight: 700; }

.title { margin: 0; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.lead { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* Pílula pequena de texto */
.chip { flex: none; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip--blue { background: var(--blue-soft); color: var(--blue); }
.chip--teal { background: var(--teal-soft); color: var(--teal-ink); }
.chip--lg { font-size: 14px; }

/* Variações do botão principal (a base está no base.css) */
.cta--hero { width: 340px; }
.cta--wide { --d: 54px; --i: 27px; min-height: 70px; max-width: 420px; }
.cta--wide .cta__label { font-size: 20px; }

/* Layout */
.split { width: 100%; max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split--servico { gap: 48px; }
.split--ciclo { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.split--track { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.stack { display: flex; flex-direction: column; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
.gap-22 { gap: 22px; }
.gap-24 { gap: 24px; }
/* Etiqueta + título de cada seção. Herda o espaçamento da coluna onde está. */
.heading { display: flex; flex-direction: column; gap: inherit; }
.heading--narrow { gap: 16px; max-width: 760px; }

/* 4. Topo e navegação ------------------------------------------------------ */
.topbar { position: fixed; top: 12px; left: 0; right: 0; z-index: 20; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.topbar__inner { pointer-events: auto; width: 100%; max-width: 1220px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 7px 7px 20px; border-radius: 999px; background: rgba(249,250,252,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.95); box-shadow: 0 4px 16px rgba(22,44,96,0.06); }
.topbar__logo { display: flex; align-items: center; }
.topbar__logo img { height: 22px; width: auto; display: block; }
.topbar__nav { display: flex; align-items: center; gap: 2px; }
.topbar__link { display: block; padding: 10px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; background: transparent; transition: background .3s, color .3s; }
.topbar__link, .topbar__link:hover { color: var(--ink); }
.topbar__link.is-active { background: var(--blue-soft); }
.topbar__link.is-active, .topbar__link.is-active:hover { color: var(--blue); }
.topbar__link:hover { background: #E9EEF6; }
.topbar__cta { --i: 16px; display: flex; align-items: center; gap: 8px; padding: 12px 18px; margin-left: 6px; border: none; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700; background: var(--grad-blue); color: #fff; box-shadow: var(--shadow-cta); }
.topbar__cta, .topbar__cta:hover { color: #fff; }
.topbar__cta:hover { filter: brightness(1.07); }

/* Bolinhas de navegação na lateral direita */
/* O botão é uma área de clique de 30x24; a bolinha visível é o ::before */
.dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: flex-end; }
.dots__dot { width: 30px; height: 24px; border: none; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; }
.dots__dot::before { content: ""; width: 10px; height: 10px; border-radius: 10px; background: var(--gray); box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); transition: width .45s ease, background .45s ease; }
.dots__dot.is-active::before { width: 30px; background: var(--blue); }
.is-native .dots { display: none; }

/* Área rolável e trilho das seções (o script.js move o trilho) */
.viewport { position: fixed; inset: 0; overflow: hidden; }
.track { will-change: transform; }

.screen { height: 100vh; position: relative; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 104px 6vw 48px; }
.screen--agendar { padding-bottom: 84px; }

/* 5. Seções (desktop) ------------------------------------------------------ */

/* 01 Início */
.hero__copy { display: flex; flex-direction: column; gap: 20px; }
.badge { --i: 18px; align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); }
.badge .icon { color: var(--teal); }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.hero__title { margin: 0; font-size: clamp(44px, 5vw, 74px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.hero__lead { max-width: 500px; }
.slogan { align-self: flex-start; display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 999px; }
.slogan strong { font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.01em; color: var(--ink); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-ghost { --i: 18px; display: flex; align-items: center; gap: 10px; padding: 0 24px; min-height: 58px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--blue); }
.btn-ghost:hover { color: var(--blue); background: #fff; }
.hero__panel { display: flex; flex-direction: column; gap: 18px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { height: 100%; padding: 22px 14px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.stat .orb { --d: 58px; --i: 28px; }
.stat__value { font-size: 19px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.stat__label { font-size: 14px; line-height: 1.3; color: var(--muted); }

.order { padding: 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 18px; }
.order__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.order__head strong { font-size: 17px; color: var(--teal-ink); }
.order__status { display: flex; align-items: center; gap: 16px; }
.order__status .orb { --d: 60px; --i: 28px; }
.order__text { display: flex; flex-direction: column; gap: 2px; }
.order__text strong { font-size: 18px; color: var(--ink); }
.order__text span { font-size: 15px; color: var(--muted); }

.progress { --dot: 24px; --dot-idle: 20px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.progress__rail, .progress__fill { position: absolute; left: 12.5%; top: calc(var(--dot) / 2 - 1.5px); height: 3px; border-radius: 3px; }
.progress__rail { right: 12.5%; background: var(--rail); }
.progress__fill { width: 25%; background: var(--teal); transform-origin: left center; }
.progress__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.progress__slot { height: var(--dot); display: flex; align-items: center; }
.progress__dot { width: var(--dot-idle); height: var(--dot-idle); border-radius: 50%; background: var(--gray); }
.progress__step.is-done .progress__dot { --i: 14.88px; width: var(--dot); height: var(--dot); display: flex; align-items: center; justify-content: center; background: var(--grad-teal); box-shadow: var(--shadow-teal); color: #fff; }
.progress__step.is-done .icon { stroke-width: 2.6; }
.progress__step.is-current .progress__dot { width: var(--dot); height: var(--dot); background: var(--teal); box-shadow: 0 0 0 5px var(--teal-soft); }
.progress__label { font-size: 13px; line-height: 1.3; color: var(--muted); font-weight: 500; }
.is-done .progress__label, .is-current .progress__label { color: var(--ink); font-weight: 600; }

.scroll-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.scroll-hint__mouse { width: 22px; height: 34px; border-radius: 12px; border: 2px solid #B9C2D3; display: flex; justify-content: center; padding-top: 6px; }
.scroll-hint__mouse span { width: 3px; height: 7px; border-radius: 2px; background: var(--blue); }

/* 02 Como funciona */
.how { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 52px; }
.how__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.how-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.how-step__link { position: absolute; top: 66px; left: calc(50% + 84px); right: calc(-50% + 72px); border-top: 2px dashed var(--line); transform-origin: left center; }
.how-step__tile { --i: 52px; position: relative; width: 132px; height: 132px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: var(--blue); }
.how-step__tile .icon { stroke-width: 1.6; }
.how-step__num { position: absolute; top: -12px; left: -12px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--teal-ink); background: var(--teal-soft); box-shadow: 0 2px 6px rgba(20,177,155,0.14), inset 0 1px 0 #fff; }
.how-step__text { display: flex; flex-direction: column; gap: 8px; max-width: 250px; }
.how-step__text h3 { font-size: 19px; line-height: 1.3; color: var(--ink); }
.how-step__text span { font-size: 15px; line-height: 1.5; color: var(--muted); }

.notice { align-self: center; display: flex; align-items: center; gap: 18px; padding: 18px 28px 18px 18px; border-radius: 22px; max-width: 820px; }
.notice .orb { --d: 52px; --i: 28px; }
.notice__text { font-size: 17px; line-height: 1.5; color: var(--muted); }
.notice__text strong { color: var(--ink); }

/* 03 O que lavamos */
.service { padding: 22px 24px; border-radius: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.service .orb { --d: 72px; --i: 34px; }
.service__body { flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.service__body strong { font-size: 18px; color: var(--ink); }
.service__what { font-size: 19px; color: var(--muted); }
.service__note { font-size: 14px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { padding: 18px 10px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tile .orb { --d: 52px; --i: 24px; }
.tile strong { font-size: 15px; color: var(--ink); }

.panel { padding: 26px; border-radius: 24px; display: flex; flex-direction: column; gap: 16px; }
.panel__head { display: flex; align-items: center; gap: 18px; }
.panel__head .orb { --d: 56px; --i: 28px; }
.panel__head .orb--red { --i: 26px; }
.panel__text { display: flex; flex-direction: column; gap: 4px; }
.panel__text h3 { font-size: 21px; color: var(--ink); }
.panel__text span { font-size: 16px; line-height: 1.5; color: var(--muted); }
.soft-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.soft-tag { padding: 9px 15px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); background: #F7F8FB; box-shadow: var(--shadow-neu); }

.alert { padding: 16px 22px 16px 16px; border-radius: 24px; display: flex; align-items: center; gap: 14px; background: #EAF8F5; border: 1px solid #CDEFE8; }
.alert .orb { --d: 42px; --i: 22px; }
.alert__text { font-size: 16px; line-height: 1.45; color: var(--ink); }

/* 04 Preço */
.price { display: flex; align-items: baseline; gap: 10px; color: var(--blue); }
.price__value { font-size: clamp(56px, 6.4vw, 96px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.price__unit { font-size: 26px; font-weight: 700; }

.rules { padding: 6px 22px; border-radius: 22px; display: flex; flex-direction: column; }
.rule { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.rule + .rule { border-top: 1.5px dashed var(--line); }
.rule .orb { --d: 42px; --i: 20px; }
.rule__text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rule__text span { font-size: 16px; font-weight: 600; color: var(--ink); }
.rule__text small { font-size: 13px; color: var(--muted); }
.rule strong { font-size: 16px; color: var(--ink); white-space: nowrap; }

.calc-intro { display: flex; flex-direction: column; gap: 4px; }
.calc-intro h3 { font-size: 22px; color: var(--ink); }
.calc-intro span { font-size: 15px; color: var(--muted); }

.scale-box { padding: 22px 24px 18px; border-radius: 24px; border: 2px solid #3B78EE; background: var(--surface); box-shadow: 0 6px 18px rgba(11,82,224,0.07); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scale-box__label { font-size: 16px; font-weight: 600; color: var(--ink); }
.scale-box__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kg-btn { --d: 62px; --i: 26px; flex: none; width: var(--d); height: var(--d); border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: none; background: #F7F8FB; box-shadow: var(--shadow-neu); color: var(--ink); }
.kg-btn .icon { stroke-width: 2.2; }
.kg-btn:active { transform: scale(0.94); }
.kg { display: flex; align-items: baseline; gap: 6px; color: var(--blue); }
.kg strong { font-size: 76px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kg span { font-size: 28px; font-weight: 700; }
.scale-box__note { --i: 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }

.calc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calc-head h3 { font-size: 18px; color: var(--ink); }

.bill { padding: 10px 22px 18px; border-radius: 22px; display: flex; flex-direction: column; }
.bill__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.bill__row .orb { --d: 40px; --i: 20px; }
.bill__label { flex: 1; font-size: 16px; color: var(--ink); }
.bill__row strong { font-size: 16px; color: var(--ink); }
.bill__sep { border-top: 1.5px dashed var(--line); margin: 4px 0; }
.bill__total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
.bill__total-text { display: flex; flex-direction: column; gap: 1px; }
.bill__total-text span { font-size: 22px; font-weight: 700; color: var(--blue); }
.bill__total-text small { font-size: 13px; color: var(--muted); }
.bill__total > strong { font-size: 44px; letter-spacing: -0.03em; color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 05 O ciclo */
.departures { --i: 24px; padding: 20px 10px; border-radius: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--grad-blue); color: #fff; box-shadow: var(--shadow-cta); }
.departure { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.departure + .departure { border-left: 1px solid rgba(255,255,255,0.28); }
.departure strong { font-size: 32px; letter-spacing: -0.03em; line-height: 1; }
.departure span { font-size: 14px; opacity: 0.92; }

/* Aviso dos dias de funcionamento, logo abaixo dos horários de saída */
.schedule { --i: 16px; display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.schedule .icon { margin-top: 2px; color: var(--blue); }
.schedule strong { color: var(--ink); }

.picker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.picker__label { font-size: 16px; font-weight: 600; color: var(--ink); }
.seg { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 22px; }
.seg__btn { min-height: 46px; border-radius: 16px; border: none; cursor: pointer; font-size: 16px; font-weight: 700; background: transparent; color: var(--muted); box-shadow: none; transition: all .3s ease; }
.seg__btn.is-active { background: var(--grad-blue); color: #fff; box-shadow: 0 4px 10px rgba(11,82,224,0.18); }

.eta { padding: 18px 22px 18px 18px; border-radius: 22px; display: flex; align-items: center; gap: 16px; }
.eta .orb { --d: 60px; --i: 30px; }
.eta__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.eta__text span { font-size: 14px; color: var(--muted); }
.eta__text strong { font-size: 22px; color: var(--teal-ink); }

.timeline { --num: 44px; --inset: 66px; position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: var(--inset); }
.timeline__line { position: absolute; left: 21px; top: 30px; bottom: 30px; width: 2px; background: var(--line); transform-origin: top center; }
.timeline__item { position: relative; }
.timeline__num { position: absolute; left: calc(var(--inset) * -1); top: 22px; width: var(--num); height: var(--num); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 800; }
.timeline__num--blue { background: var(--grad-blue); box-shadow: var(--shadow-blue); }
.timeline__num--teal { background: var(--grad-teal); box-shadow: var(--shadow-teal); }

/* Cartão de cada saída. O script.js marca qual é a coleta e qual é a entrega. */
.trip { padding: 20px 22px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .35s ease; }
.trip.is-pickup { outline-color: var(--blue); }
.trip.is-return { outline-color: var(--teal); }
.trip__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trip__flag { display: none; margin-left: auto; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; }
.is-pickup .trip__flag { display: inline-block; background: var(--blue); }
.is-return .trip__flag { display: inline-block; background: var(--teal); }
.trip__time { display: flex; align-items: baseline; gap: 12px; }
.trip__time strong { font-size: 34px; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.trip__time span { font-size: 15px; font-weight: 600; color: var(--muted); }
.trip__desc { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* 06 Acompanhamento */
.pay { padding: 22px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; }
.pay__head { display: flex; flex-direction: column; gap: 2px; }
.pay__head h3 { font-size: 18px; color: var(--ink); }
.pay__head span { font-size: 14px; color: var(--muted); }
.pay-opt { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 20px; border: 1.5px solid var(--field-border); background: var(--surface); cursor: pointer; text-align: left; box-shadow: 0 6px 14px rgba(22,44,96,0.05); transition: all .3s ease; }
.pay-opt.is-active { border-color: var(--blue); background: #EEF3FE; }
.pay-opt__icon { --i: 24px; flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #F7F8FB; box-shadow: var(--shadow-neu); }
.pay-opt__text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pay-opt__text strong { font-size: 16px; color: var(--ink); }
.pay-opt__text span { font-size: 13px; color: var(--muted); }
.radio { --i: 15px; flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--gray); color: #fff; transition: all .3s; }
.radio .icon { stroke-width: 2.8; opacity: 0; }
.is-active .radio { background: var(--blue); border: none; }
.is-active .radio .icon { opacity: 1; }

.tracker { padding: 24px 26px; border-radius: 24px; display: flex; flex-direction: column; gap: 16px; }
.tracker__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tracker__title { display: flex; flex-direction: column; gap: 2px; }
.tracker__title h3 { font-size: 19px; color: var(--ink); }
.tracker__title span { font-size: 13px; color: var(--muted); }
.live-pill { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--teal-soft); color: var(--teal-ink); }
.live-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.tracker__list { display: flex; flex-direction: column; gap: 6px; }

/* Etapa do acompanhamento: sem classe = pendente, .is-done = feita, .is-current = atual */
.tstep { --dot: 24px; position: relative; display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; min-height: 40px; }
.tstep__line { position: absolute; left: 11px; top: 34px; bottom: -12px; width: 2px; background: var(--rail); transition: background .4s ease; }
.tstep:last-child .tstep__line { display: none; }
.tstep__dot { --i: 14px; position: relative; margin-top: 8px; width: var(--dot); height: var(--dot); border-radius: 50%; background: #fff; border: 2px solid var(--gray); color: #fff; display: flex; align-items: center; justify-content: center; transition: all .35s ease; }
.tstep__dot .icon { stroke-width: 2.8; opacity: 0; transition: opacity .3s; }
.tstep__icon { --d: 40px; --i: 20px; color: var(--faint); }
.tstep__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 9px; }
.tstep__title { font-size: 16px; font-weight: 500; color: #6B7489; transition: color .3s; }
.tstep__desc { display: none; font-size: 13px; line-height: 1.4; color: var(--muted); }
.tstep__meta { padding-top: 11px; font-size: 13px; font-weight: 600; color: #A3ABBD; }

.tstep.is-done .tstep__line { background: var(--teal); }
.tstep.is-done .tstep__dot { background: var(--teal); border: none; }
.tstep.is-done .tstep__dot .icon { opacity: 1; }
.tstep.is-done .tstep__icon { color: var(--teal); }
.tstep.is-done .tstep__title { font-weight: 700; color: var(--ink); }
.tstep.is-done .tstep__meta { color: var(--teal-ink); }

.tstep.is-current .tstep__dot { background: var(--blue); border: none; box-shadow: 0 0 0 5px #DCE7FD; }
.tstep.is-current .tstep__icon { color: var(--blue); }
.tstep.is-current .tstep__title { font-weight: 700; color: var(--blue); }
.tstep.is-current .tstep__desc { display: block; }
.tstep.is-current .tstep__meta { color: var(--blue); }

/* 07 Agendar */
.lead--agendar { max-width: 460px; }
.need-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.need-label.t-blue { color: var(--blue); }
.need { padding: 16px 20px 16px 16px; border-radius: 20px; display: flex; align-items: center; gap: 16px; }
.need .orb { --d: 58px; --i: 26px; }
.need .orb--blue { --i: 28px; }
.need__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.need__text h3 { font-size: 17px; color: var(--ink); }
.need__text span { font-size: 14px; color: var(--muted); }
.need__chev { --i: 22px; color: var(--blue); stroke-width: 2; }

.summary { margin-top: 6px; padding: 16px 20px 16px 16px; border-radius: 20px; display: flex; align-items: center; gap: 16px; }
.summary .orb { --d: 52px; --i: 24px; }
.summary__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary__text strong { font-size: 15px; color: var(--teal-ink); }
.summary__text span { font-size: 14px; color: var(--muted); }
.summary__text b { color: var(--ink); }
.summary__price { display: flex; flex-direction: column; align-items: flex-end; }
.summary__price > span { font-size: 12px; color: var(--muted); }
.summary__price strong { font-size: 22px; color: var(--ink); white-space: nowrap; }
.summary__price small { font-size: 14px; }

.footer { position: absolute; left: 6vw; right: 6vw; bottom: 0; margin: 0 auto; max-width: 1200px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 0 24px; border-top: 1px solid #DFE4EE; font-size: 14px; color: var(--muted); }
.footer img { height: 20px; width: auto; display: block; }
.footer__info { --i: 16px; display: flex; align-items: center; gap: 8px; }
.footer__info .icon { color: var(--teal); }


/* 6. Celular ---------------------------------------------------------------
   O HTML é o mesmo do desktop. Aqui as duas colunas viram uma pilha só e
   cada peça ganha tamanhos menores. O script.js ajusta o zoom de cada seção
   para caber em uma tela e esconde os blocos data-extra se faltar espaço. */
@media (max-width: 899.98px) {
  .topbar__link, .dots, .scroll-hint, .btn-ghost { display: none; }

  .screen { flex-direction: column; align-items: normal; justify-content: flex-start; padding: 84px 18px 20px; }
  .screen[data-key="inicio"] { padding-top: 86px; }
  .screen--agendar { justify-content: center; gap: 14px; padding-bottom: 0; }

  /* Uma coluna: os blocos das duas colunas do desktop entram na mesma pilha.
     A ordem pode ser trocada com "order" (ver ciclo, acompanhamento e agendar). */
  .split, .how { display: flex; flex-direction: column; align-items: stretch; justify-content: space-evenly; gap: 12px; flex: 1 0 auto; max-width: none; }
  .split > .stack { display: contents; }
  .heading, .heading--narrow { gap: 10px; max-width: none; }

  .tag { font-size: 12px; }
  .title { font-size: clamp(24px, 7.4vw, 30px); line-height: 1.1; }
  .chip, .chip--lg { font-size: 12px; }
  .lead { font-size: clamp(14px, 4.1vw, 16px); line-height: 1.5; }
  .hero__lead, .lead--agendar { max-width: none; }
  .cta, .cta--hero, .cta--wide { --d: 42px; --i: 21px; width: 100%; max-width: none; min-height: 58px; }
  .cta__label, .cta--wide .cta__label { font-size: 17px; }

  /* 01 Início */
  .split--hero { justify-content: flex-start; }
  .hero__copy { gap: 12px; }
  .hero__panel { margin-top: auto; gap: 12px; padding-top: 2px; }
  .badge { --i: 15px; gap: 6px; padding: 6px 12px 6px 8px; font-size: 12px; }
  .kicker { font-size: 11px; letter-spacing: 0.08em; }
  .hero__title { font-size: clamp(32px, 10.4vw, 42px); line-height: 1.03; text-wrap: wrap; }
  .slogan { gap: 10px; padding: 7px 16px 7px 7px; }
  .slogan .orb { --d: 32px; --i: 16px; }
  .slogan strong { font-size: 15px; }

  .stats { gap: 8px; }
  .stat { padding: 12px 6px; border-radius: 20px; gap: 7px; }
  .stat .orb { --d: 38px; --i: 19px; }
  .stat__value { font-size: 13px; }
  .stat__label { font-size: 11px; }

  .order { padding: 16px; gap: 12px; }
  .order__head strong { font-size: 15px; }
  .order__status { gap: 12px; }
  .order__status .orb { --d: 44px; --i: 22px; }
  .order__text strong { font-size: 15px; }
  .order__text span { font-size: 13px; }
  .progress { --dot: 18px; --dot-idle: 14px; }
  .progress__step { gap: 6px; }
  .progress__step.is-done .progress__dot { --i: 11.16px; }
  .progress__step.is-current .progress__dot { box-shadow: 0 0 0 4px var(--teal-soft); }
  .progress__label { font-size: 11px; }

  /* 02 Como funciona: os quatro passos viram uma lista vertical */
  .how__steps { display: flex; flex-direction: column; gap: 12px; }
  .how-step { flex-direction: row; align-items: flex-start; gap: 14px; text-align: left; }
  .how-step__link { top: 56px; bottom: -12px; left: 27px; right: auto; border-top: none; border-left: 2px dashed #C9D2E1; }
  .how-step__tile { --i: 26px; flex: none; width: 56px; height: 56px; border-radius: 18px; }
  .how-step__tile .icon { stroke-width: 1.7; }
  .how-step__num { top: -8px; left: -8px; width: 24px; height: 24px; font-size: 12px; box-shadow: 0 2px 5px rgba(20,177,155,0.14); }
  .how-step__text { gap: 2px; max-width: none; min-width: 0; padding-top: 6px; }
  .how-step__text h3 { font-size: clamp(14px, 4.2vw, 16px); }
  .how-step__text span { font-size: clamp(12px, 3.6vw, 13.5px); line-height: 1.4; }
  .notice { align-self: auto; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 20px; max-width: none; }
  .notice .orb { --d: 38px; --i: 20px; }
  .notice__text { font-size: 13px; line-height: 1.45; }

  /* 03 O que lavamos */
  .service { padding: 14px; border-radius: 22px; flex-wrap: nowrap; gap: 12px; }
  .service .orb { --d: 48px; --i: 24px; }
  .service__body { flex: 1; gap: 1px; }
  .service__body strong { font-size: 15px; }
  .service__what { font-size: clamp(12px, 3.6vw, 14px); }
  .service__note, .service .chip { display: none; }
  .tiles { gap: 8px; }
  .tile { padding: 10px 4px; border-radius: 18px; gap: 6px; }
  .tile .orb { --d: 36px; --i: 18px; }
  .tile strong { font-size: clamp(10.5px, 3.1vw, 12px); }
  .panel { padding: 14px; border-radius: 22px; gap: 10px; }
  .panel__head { gap: 12px; }
  .panel__head .orb { --d: 38px; --i: 20px; }
  .panel__head .orb--red { --i: 18px; box-shadow: none; }
  .panel__text { gap: 1px; }
  .panel__text h3 { font-size: 15px; }
  .panel__text span { font-size: 13px; line-height: 1.35; }
  .soft-tags { gap: 6px; }
  .soft-tag { padding: 6px 11px; font-size: 12.5px; }
  .alert { gap: 12px; padding: 12px 14px 12px 12px; border-radius: 20px; }
  .alert .orb { --d: 34px; --i: 18px; }
  .alert__text { font-size: 12.5px; line-height: 1.4; }

  /* 04 Preço */
  .price { gap: 6px; white-space: nowrap; }
  .price__value { font-size: clamp(40px, 13vw, 54px); line-height: 1; }
  .price__unit { font-size: 17px; }
  .rules { padding: 4px 14px; border-radius: 20px; }
  .rule { gap: 10px; padding: 7px 0; }
  .rule .orb, .rule__text small { display: none; }
  .rule__text span, .rule strong { font-size: 13px; }
  .calc-intro { gap: 1px; }
  .calc-intro h3 { font-size: 15px; }
  .calc-intro span { font-size: 12px; }
  .scale-box { padding: 12px 14px; border-radius: 22px; gap: 4px; }
  .scale-box__label { font-size: 13px; }
  .kg-btn { --d: 46px; --i: 20px; }
  .kg strong { font-size: 52px; }
  .kg span { font-size: 20px; }
  .scale-box__note { --i: 14px; font-size: 12px; }
  .calc-head { flex-wrap: wrap; gap: 6px 10px; }
  .calc-head h3 { font-size: 15px; }
  .bill { padding: 6px 14px 12px; }
  .bill__row { padding: 8px 0; }
  .bill__row .orb { display: none; }
  .bill__label, .bill__row strong { font-size: 14px; }
  .bill__total { padding-top: 8px; }
  .bill__total-text span { font-size: 17px; }
  .bill__total-text small { font-size: 11px; }
  .bill__total > strong { font-size: 30px; }

  /* 05 O ciclo: a previsão de entrega vai para depois da linha do tempo */
  .departures { --i: 18px; padding: 12px 6px; border-radius: 20px; }
  .departure { gap: 3px; }
  .departure strong { font-size: 22px; letter-spacing: normal; }
  .departure span { font-size: 11.5px; }
  .schedule { --i: 14px; font-size: 12px; line-height: 1.4; }
  .picker { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; }
  .picker__label { font-size: 13px; }
  .seg { flex: none; min-width: 0; gap: 5px; padding: 5px; border-radius: 18px; }
  .seg__btn { min-height: 44px; border-radius: 14px; }
  .timeline { --num: 30px; --inset: 40px; gap: 8px; order: 1; }
  .timeline__line { left: 14px; top: 20px; bottom: 20px; }
  .timeline__num { top: 14px; font-size: 13px; }
  .trip { display: grid; grid-template-columns: 52px auto minmax(0, 1fr); align-content: center; align-items: center; gap: 3px 8px; min-height: 76px; padding: 10px 14px; border-radius: 20px; }
  .trip__head, .trip__time { display: contents; }
  .trip__head .chip { display: none; }
  .trip__time strong { grid-column: 1; grid-row: 1 / span 2; font-size: 26px; }
  .trip__time span { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
  .trip__flag { grid-column: 3; grid-row: 1; justify-self: start; margin-left: 0; padding: 3px 9px; font-size: 11px; white-space: nowrap; }
  .trip__desc { grid-column: 2 / -1; grid-row: 2; font-size: 12.5px; line-height: 1.35; }
  .eta { order: 2; padding: 12px 14px 12px 12px; border-radius: 20px; gap: 12px; }
  .eta .orb { --d: 42px; --i: 22px; }
  .eta .chip { display: none; }
  .eta__text { gap: 1px; }
  .eta__text span { font-size: 12px; }
  .eta__text strong { font-size: 17px; }

  /* 06 Acompanhamento: a lista de etapas vem antes do pagamento */
  .tracker { order: 1; padding: 16px; gap: 10px; }
  .tracker__head { gap: 10px; }
  .tracker__title h3 { font-size: 15px; }
  .tracker__title span, .tstep__icon { display: none; }
  .live-pill { gap: 6px; padding: 5px 11px; font-size: 12px; }
  .live-pill__dot { width: 7px; height: 7px; }
  .tracker__list { gap: 4px; }
  .tstep { --dot: 20px; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; min-height: 26px; }
  .tstep__line { left: 9px; top: 24px; bottom: -8px; }
  .tstep__dot { --i: 12px; margin-top: 3px; }
  .tstep__text { gap: 1px; padding-top: 2px; }
  .tstep__title { font-size: 14px; }
  .tstep__desc { font-size: 12px; line-height: 1.35; }
  .tstep__meta { padding-top: 4px; font-size: 12px; }

  .pay { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 20px; }
  .pay__head { grid-column: 1 / -1; }
  .pay__head h3 { font-size: 13px; }
  .pay__head span, .pay-opt .radio { display: none; }
  .pay-opt { gap: 6px; padding: 6px; border-radius: 14px; box-shadow: none; }
  .pay-opt__icon { --i: 15px; width: 28px; height: 28px; border-radius: 50%; }
  .pay-opt__text { min-width: 0; }
  .pay-opt__text strong { font-size: 13px; }
  .pay-opt__text span { font-size: 11px; line-height: 1.25; }

  /* 07 Agendar: os três itens numerados, o resumo e por último o botão */
  .needs { counter-reset: need; }
  .need-label { display: none; }
  .need { order: 1; counter-increment: need; min-height: 72px; padding: 10px 14px 10px 12px; gap: 12px; }
  .need .orb { --d: 44px; --i: 21px; }
  .need .orb--blue { --i: 22px; }
  .need__text { gap: 1px; min-width: 0; }
  .need__text h3 { font-size: clamp(13.5px, 4vw, 15px); line-height: 1.25; }
  .need__text h3::before { content: counter(need) ". "; }
  .need__text span { font-size: 12.5px; }
  .need__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .need__chev { display: none; }
  .summary { order: 2; margin-top: 0; padding: 12px 14px 12px 12px; gap: 12px; }
  .summary .orb { --d: 40px; --i: 20px; }
  .summary__text { gap: 1px; }
  .summary__text strong { font-size: 13px; }
  .summary__text span { font-size: 12px; }
  .summary__price span { display: none; }
  .summary__price strong { font-size: 16px; }
  .summary__price strong span { display: inline; }
  .summary__price small { font-size: 12px; }
  .cta-wrap { order: 3; padding-top: 4px; }
  .footer { position: static; margin: 0; max-width: none; gap: 4px 10px; padding: 12px 0 16px; font-size: 12px; }
  .footer img { height: 16px; }
  .footer__info { --i: 14px; order: 3; width: 100%; font-size: 11px; }
}