/* /marca-propria — hero em camadas (marca na frente, core por trás) + seções no padrão r2 (src/styles/brand.css).
   Motions (src/routes/marca-propria/page.js): pacote de marca (peças que se encaixam), caixa de entrada do cliente,
   melhoria no core chegando a todas as marcas (diagrama). Estados ocultos só com .sx.is-armed. */

/* Logotipo tipográfico da marca fictícia (neutro, não imita nenhuma marca real) */
.mp-ce{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);color:var(--ink);line-height:1}
.mp-ce i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--acc,#0E6B68);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.02em;transition:background .35s}
.mp-ce b{font-weight:600;font-size:12.5px;letter-spacing:-.01em;line-height:1.1}
.mp-ce-lg i{width:40px;height:40px;border-radius:9px;font-size:14px}
.mp-ce-lg b{font-size:15px}

/* ---------- Hero ---------- */
.mp-hero{padding-block:clamp(48px,6vw,104px) var(--space-section)}
.mp-hero-text{display:flex;flex-direction:column;align-items:center;text-align:center}
.mp-hero .eyebrow{margin-bottom:24px}
.mp-h1{font-size:clamp(2.35rem,1.15rem + 3.6vw,4.6rem);line-height:1.04}
.mp-h1 .lines span + span{color:var(--ink-2)}
.mp-lead{max-width:52ch;margin-top:clamp(24px,3vw,36px)}
.mp-hero-cta{justify-content:center;margin-top:32px}

.mp-layers{margin:var(--space-head) auto 0;max-width:980px;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.mp-layer{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px 28px;align-items:center;padding:22px 26px;border-radius:18px}
.mp-layer-front{background:var(--white);box-shadow:var(--shadow-ui),0 0 0 1px var(--line);position:relative;z-index:1}
.mp-layer-core{background:var(--ink);color:var(--paper)}
.mp-seam{height:14px;margin-inline:40px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);background-size:100% 1px;background-repeat:no-repeat;background-position:center}
.mp-lk{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-2)}
.mp-lk b{font-weight:500;font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text)}
.mp-layer-core .mp-lk{color:var(--paper-2)}
.mp-layer-core .mp-lk b{color:var(--paper)}
.mp-front-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;font-family:var(--f-ui);--acc:#0E6B68}
.mp-fact{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:500}
.mp-fact small{font-size:11px;font-weight:400;color:var(--ink-2)}
.mp-fact .mp-v{display:inline-flex;align-items:center}
.mp-fact .mp-sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:#0E6B68;margin-right:6px;vertical-align:0}
.mp-core-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-ui)}
.mp-core-chips li{height:28px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;background:rgba(245,245,247,.08);font-size:12.5px;color:var(--paper)}
.is-armed .mp-layer-front{opacity:0;transform:translateY(-22px)}
.mp-layer-front{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.is-armed .mp-layer-front.in{opacity:1;transform:none}
@media (max-width:760px){
  .mp-layer{grid-template-columns:minmax(0,1fr);padding:20px}
  .mp-seam{margin-inline:24px}
}


/* ---------- Fechamento ---------- */
.mp-close{display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px}
.mp-close .h2{max-width:22ch}
.mp-close .lines span + span{color:var(--ink-2)}
.mp-close .btn-row{justify-content:center}

/* ---------- A · pacote de marca: peças soltas se encaixam ---------- */
.mpk{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px 20px 18px}
.mpk-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mpk-k{font-size:12.5px;color:var(--sx-ink3)}
.mpk-t{font-family:var(--f-brand);font-size:17px;font-weight:500;letter-spacing:-.015em}
.mpk-slots{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.mpk-slots li{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px}
.mpk-slots small{font-size:13px;color:var(--sx-ink2)}
.mpk-slot{position:relative;height:48px;border-radius:12px;border:1.5px dashed var(--sx-line2);display:flex;align-items:center;padding:0 4px;min-width:0;transition:border-color .3s,background .3s}
.mpk-slots li.is-ok .mpk-slot{border-style:solid;border-color:transparent;background:var(--paper)}
.mpk-p{display:flex;align-items:center;height:38px;padding:0 10px;border-radius:10px;background:#fff;border:1px solid var(--sx-line);min-width:0;max-width:100%;box-shadow:0 12px 24px -14px rgba(10,20,60,.4);transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform .6s var(--sx-ease),box-shadow .4s,background .3s,border-color .3s}
.mpk-p.in{transform:none;box-shadow:none;background:transparent;border-color:transparent}
.mpk-ce{display:inline-flex;align-items:center;gap:8px;min-width:0}
.mpk-ce i{width:28px;height:28px;border-radius:8px;background:#0E6B68;color:#fff;font-style:normal;font-family:var(--f-brand);font-weight:600;font-size:12px;display:grid;place-items:center;flex:none}
.mpk-ce b{font-family:var(--f-brand);font-weight:500;font-size:14px;white-space:nowrap}
.mpk-sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.mpk-sw i{width:20px;height:20px;border-radius:6px;background:#0E6B68;flex:none}
.mpk-tx{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpk-tx svg{width:15px;height:15px;fill:none;stroke:var(--sx-ink3);stroke-width:1.6;flex:none}
.mpk-env{margin-top:16px;padding-top:14px;border-top:1px solid var(--sx-line);display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.mpk-env p{font-size:12.5px;color:var(--sx-ink3)}
.mpk-env div{display:flex;flex-wrap:wrap;gap:6px}
.mpk-env .sx-badge{background:rgba(14,107,104,.1);color:#0E5E5B}

/* ---------- B · caixa de entrada do cliente ---------- */
.mpm{--row:64px;display:flex;flex-direction:column;gap:12px}
.mpm-box{background:#fff;border:1px solid var(--sx-line);border-radius:18px;overflow:hidden}
.mpm-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--sx-line);position:relative;z-index:1;background:#fff}
.mpm-h b{font-family:var(--f-brand);font-weight:500;font-size:15px}
.mpm-h span{font-size:12.5px;color:var(--sx-ink3)}
.mpm-list{transition:transform .5s var(--sx-ease)}
.mpm-it{height:var(--row);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 18px;border-top:1px solid var(--sx-line);transition:opacity .4s var(--sx-ease),background .3s}
.mpm-it:first-child{border-top:0}
.mpm-it time{font-size:12px;color:var(--sx-ink3)}
.mpm-it:not(.is-new) .mv-tt b{font-weight:400;color:var(--sx-ink2)}
.mpm-it.is-new.in{background:rgba(14,107,104,.06)}
.mpm-av{width:34px;height:34px;border-radius:10px;background:#0E6B68;color:#fff;display:grid;place-items:center;font-family:var(--f-brand);font-weight:600;font-size:12px}
.sx.is-armed .mpm:not(.is-in) .mpm-list{transform:translateY(calc(-1 * var(--row)))}
.sx.is-armed .mpm-it.is-new:not(.in){opacity:0}
.mpm-open{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:16px 18px;transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.sx.is-armed .mpm-open:not(.in){opacity:0;transform:translateY(8px)}
.mpm-from{display:flex;gap:8px;font-size:12.5px;align-items:baseline}
.mpm-from span{color:var(--sx-ink3)}
.mpm-from b{font-weight:500;overflow-wrap:anywhere}
.mpm-msg{font-size:14px;line-height:1.5;margin:8px 0 12px !important}
.mpm-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mpm-go{background:#0E6B68;border-color:#0E6B68;color:#fff;height:34px;padding:0 14px}
.mpm-url{font-size:12.5px;color:var(--sx-ink3)}

/* ---------- C · mesma base, melhoria para todas as marcas ---------- */
.mpc{display:flex;flex-direction:column}
.mpc-brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mpc-b{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:136px;min-width:0}
.mpc-b > b{font-family:var(--f-brand);font-weight:500;font-size:14px;line-height:1.3}
.mpc-b .sx-badge{margin-top:auto}
.mpc-m{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--paper);flex:none}
.mpc-m img{width:18px;height:auto;display:block}
.mpc-m i{font-style:normal;font-family:var(--f-brand);font-weight:600;font-size:12px;color:#fff}
.mpc-ce .mpc-m{background:#0E6B68}
.mpc-ot .mpc-m{background:#8A2D3B}
.mpc-wires{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;height:64px}
.mpc-w{position:relative;display:block}
.mpc-w::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.22)}
.sx:not(.dark *) .mpc-w::before{background:var(--sx-line2)}
.mpc-w b{position:absolute;left:50%;bottom:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--sx-blue);opacity:0}
.mpc-w.go b{animation:mpcUp .6s var(--sx-ease) forwards}
@keyframes mpcUp{0%{opacity:1;transform:translateY(0)}85%{opacity:1}100%{opacity:0;transform:translateY(-54px)}}
.mpc-core{background:#fff;border-radius:16px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mpc-k{font-size:12.5px;color:var(--sx-ink3)}
.mpc-t{font-family:var(--f-brand);font-size:15px;font-weight:500;letter-spacing:-.01em}
.mpc-up{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--sx-blue);color:#fff;font-size:12.5px;font-weight:500;white-space:nowrap}
.mpc-up svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}

@media (max-width:720px){
  .mp-hero{padding-top:36px}
  .mp-hero .eyebrow{margin-bottom:18px}
  .mp-lead{margin-top:20px}
  .mp-hero-cta{margin-top:24px}
  .mp-layers{margin-top:36px}
  .mp-layer{padding:18px;gap:14px}
  .mp-front-row{gap:12px 22px}
  .mp-close{gap:28px}
  .mpk{padding:16px}
  .mpk-slots li{grid-template-columns:minmax(0,1fr);gap:6px}
  .mpk-slots{gap:12px}
  .mpm{--row:64px}
  .mpm-it{padding:0 14px;gap:10px}
  .mpm-h{padding:12px 14px;flex-direction:column;gap:0}
  .mpc-brands{grid-template-columns:minmax(0,1fr);gap:8px}
  .mpc-b{min-height:0;flex-direction:row;align-items:center;padding:12px 14px}
  .mpc-b .sx-badge{margin:0 0 0 auto}
  .mpc-wires{grid-template-columns:minmax(0,1fr);height:44px}
  .mpc-w:not(:first-child){display:none}
  @keyframes mpcUp{0%{opacity:1;transform:translateY(0)}85%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
}
@media (max-width:430px){
  .mp-close .btn-row{flex-direction:column;align-items:stretch;width:100%}
  .mp-close .btn-row .btn{width:100%;justify-content:center}
}
@media (max-width:640px){.mp-ce i,.mp-fact small{font-size:12px}}
.mp-nw{white-space:nowrap}
/* celular: peças do kit começam dentro da tela */
@media (max-width:720px){.mpk-p:not(.in){transform:translate(calc(var(--x) * .3),calc(var(--y) * .7)) rotate(calc(var(--r) * .6))}}
@media (max-width:720px){.mp-hero-text{align-items:flex-start !important;text-align:left !important}.mp-hero-text .x-pill{margin-inline:0 !important;align-self:flex-start !important}}
@media (max-width:720px){#inicio :is(.x-pill,.eyebrow):not(.sx *){margin-bottom:16px !important}}
@media (max-width:720px){.mp-hero-text .btn-row{margin-top:24px !important}}