/* Page-specific styles: servicos-domicilio */

/* ── ROUTE HUD ── */
    .hero {
      min-height: 80vh
    }

    .hero-left {
      padding: 6rem 3.5rem 5rem;
      padding-left: max(3.5rem, calc((100vw - 1400px) / 2 + 3.5rem))
    }

    .hero-right {
      min-height: 80vh;
      position: relative
    }

    .route-hud {
      position: absolute;
      bottom: 3rem;
      right: max(3rem, calc((100vw - 1400px) / 2 + 3rem));
      background: var(--s1);
      border: 1px solid rgba(238, 234, 222, .1);
      border-radius: 12px;
      padding: 1.2rem;
      width: 276px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(232, 83, 10, .06);
      opacity: 0;
      z-index: 2;
    }

    [data-theme="light"] .route-hud {
      background: var(--s1);
      border-color: rgba(26, 23, 19, .15);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .1)
    }

    .rhud-hdr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .9rem;
      padding-bottom: .8rem;
      border-bottom: 1px solid var(--border)
    }

    .rhud-t {
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .rhud-live {
      display: flex;
      align-items: center;
      gap: .35rem;
      font-size: .6rem;
      color: var(--accent)
    }

    .rhud-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      animation: rpulse 1.8s ease-in-out infinite
    }

    @keyframes rpulse {

      0%,
      100% {
        opacity: .5
      }

      50% {
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(63, 221, 187, .15)
      }
    }

    .rhud-rows {
      display: flex;
      flex-direction: column;
      gap: .3rem;
      margin-bottom: .8rem
    }

    .rhud-row {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .46rem .58rem;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--s2)
    }

    .rhud-row.done {
      border-color: rgba(63, 221, 187, .2);
      background: rgba(63, 221, 187, .04)
    }

    .rhud-row.now {
      border-color: rgba(196, 163, 90, .3);
      background: rgba(196, 163, 90, .06)
    }

    .rhud-num {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--s3);
      font-size: .55rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .rhud-row.done .rhud-num {
      background: rgba(63, 221, 187, .15);
      color: var(--accent)
    }

    .rhud-row.now .rhud-num {
      background: rgba(196, 163, 90, .15);
      color: var(--warm)
    }

    .rhud-c {
      font-size: .7rem;
      color: var(--text);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .rhud-t2 {
      font-size: .6rem;
      color: var(--muted);
      white-space: nowrap
    }

    .rhud-ft {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: .7rem;
      border-top: 1px solid var(--border);
      font-size: .62rem;
      color: var(--muted)
    }

    .rhud-fv {
      color: var(--accent);
      font-family: var(--Fd);
      font-size: 1rem
    }

    /* ── MOCK AGENDA ── */
    .mock-agenda {
      background: var(--s1);
      border: 1px solid rgba(238, 234, 222, .1);
      border-radius: 12px;
      padding: 1.4rem;
      width: 310px;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(63, 221, 187, .06)
    }

    [data-theme="light"] .mock-agenda {
      background: var(--s1);
      border-color: rgba(26, 23, 19, .15);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
    }

    .mag-h {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding-bottom: .8rem;
      border-bottom: 1px solid var(--border)
    }

    .mag-t {
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .mag-today {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .5rem;
      margin-bottom: .9rem
    }

    .mag-stat {
      background: var(--s2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: .65rem .5rem;
      text-align: center
    }

    .mag-sv {
      font-family: var(--Fd);
      font-size: 1.2rem;
      font-weight: 300;
      color: var(--text)
    }

    .mag-sl {
      font-size: .54rem;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: .1rem
    }

    .mag-list {
      display: flex;
      flex-direction: column;
      gap: .32rem;
      margin-bottom: .8rem
    }

    .mag-r {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .5rem .62rem;
      background: var(--s2);
      border-radius: 6px;
      border: 1px solid var(--border)
    }

    .mag-r.active {
      border-color: rgba(196, 163, 90, .3);
      background: rgba(196, 163, 90, .06)
    }

    .mag-hr {
      font-family: var(--Fd);
      font-size: .88rem;
      font-weight: 300;
      color: var(--muted);
      min-width: 38px
    }

    .mag-r.active .mag-hr {
      color: var(--warm)
    }

    .mag-info {
      flex: 1
    }

    .mag-cn {
      font-size: .73rem;
      color: var(--text)
    }

    .mag-ad {
      font-size: .58rem;
      color: var(--muted)
    }

    .mag-st {
      font-size: .58rem;
      padding: .1rem .38rem;
      border-radius: 100px
    }

    .mag-st.ok {
      background: rgba(63, 221, 187, .1);
      color: var(--accent);
      border: 1px solid rgba(63, 221, 187, .2)
    }

    .mag-st.go {
      background: rgba(196, 163, 90, .1);
      color: var(--warm);
      border: 1px solid rgba(196, 163, 90, .2)
    }

    /* ── MOCK ORCAMENTO ── */
    .mock-orc {
      background: var(--s1);
      border: 1px solid rgba(238, 234, 222, .1);
      border-radius: 12px;
      padding: 1.4rem;
      width: 298px;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .5)
    }

    [data-theme="light"] .mock-orc {
      background: var(--s1);
      border-color: rgba(26, 23, 19, .15);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
    }

    .morc-h {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding-bottom: .8rem;
      border-bottom: 1px solid var(--border)
    }

    .morc-t {
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .morc-client {
      background: var(--s2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: .8rem 1rem;
      margin-bottom: .9rem
    }

    .morc-cn {
      font-size: .8rem;
      color: var(--text);
      margin-bottom: .2rem
    }

    .morc-ca {
      font-size: .62rem;
      color: var(--muted)
    }

    .morc-lines {
      display: flex;
      flex-direction: column;
      gap: .28rem;
      margin-bottom: .8rem
    }

    .morc-l {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .44rem .6rem;
      background: var(--s2);
      border-radius: 6px;
      border: 1px solid var(--border)
    }

    .morc-ln {
      font-size: .72rem;
      color: var(--text)
    }

    .morc-lv {
      font-family: var(--Fd);
      font-size: .9rem;
      color: var(--warm)
    }

    .morc-total {
      background: rgba(196, 163, 90, .06);
      border: 1px solid rgba(196, 163, 90, .2);
      border-radius: 6px;
      padding: .7rem 1rem;
      display: flex;
      justify-content: space-between;
      align-items: baseline
    }

    .morc-tl {
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .morc-tv {
      font-family: var(--Fd);
      font-size: 1.8rem;
      font-weight: 300;
      color: var(--warm)
    }

    /* ── MOCK PAGAMENTO ── */
    .mock-pay {
      background: var(--s1);
      border: 1px solid rgba(238, 234, 222, .1);
      border-radius: 12px;
      padding: 1.4rem;
      width: 292px;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .5)
    }

    [data-theme="light"] .mock-pay {
      background: var(--s1);
      border-color: rgba(26, 23, 19, .15);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
    }

    .mpay-h {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding-bottom: .8rem;
      border-bottom: 1px solid var(--border)
    }

    .mpay-t {
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .mpay-tag {
      font-size: .6rem;
      color: var(--accent);
      border: 1px solid rgba(63, 221, 187, .3);
      padding: .15rem .5rem;
      border-radius: 100px
    }

    .mpay-val {
      text-align: center;
      padding: 1.2rem 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: .8rem
    }

    .mpay-v {
      font-family: var(--Fd);
      font-size: 2.8rem;
      font-weight: 300;
      color: var(--text);
      letter-spacing: -.04em
    }

    .mpay-l {
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .mpay-methods {
      display: flex;
      flex-direction: column;
      gap: .3rem;
      margin-bottom: .8rem
    }

    .mpay-m {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .5rem .62rem;
      background: var(--s2);
      border-radius: 6px;
      border: 1px solid var(--border);
      cursor: pointer
    }

    .mpay-m.sel {
      border-color: rgba(63, 221, 187, .3);
      background: rgba(63, 221, 187, .06)
    }

    .mpay-ico {
      font-size: 1rem
    }

    .mpay-mn {
      font-size: .73rem;
      color: var(--text)
    }

    .mpay-chk {
      margin-left: auto;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .55rem;
      color: var(--accent)
    }

    .mpay-btn {
      width: 100%;
      background: var(--accent);
      color: #0a0c10;
      border: none;
      border-radius: 8px;
      padding: .7rem;
      font-size: .8rem;
      font-weight: 500;
      cursor: pointer;
      font-family: var(--Fb);
      letter-spacing: .04em
    }

.servicos-domicilio-inline-1 { font-size:.62rem;color:var(--muted); }
.servicos-domicilio-inline-2 { color:var(--accent); }
.servicos-domicilio-inline-3 { color:var(--warm); }
.servicos-domicilio-inline-4 { background:var(--s3);color:var(--muted);border:1px solid var(--border); }
.servicos-domicilio-inline-5 { font-size:.6rem;color:var(--accent);border:1px solid rgba(232,83,10,.3);padding:.12rem .45rem;border-radius:100px; }