/* Marketplace Cellfy — UX limpia + PWA */
.mp {
  --mp-accent: var(--cf-accent, #9BC65A);
  --mp-accent-deep: var(--cf-accent-deep, #7aa83f);
  --mp-ink: var(--cf-ink, #f4f8fc);
  --mp-muted: var(--cf-muted, #93a4b8);
  --mp-line: var(--cf-line, rgba(255,255,255,.1));
  --mp-panel: rgba(12, 28, 38, 0.92);
  --mp-panel-2: rgba(18, 40, 52, 0.96);
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2.25rem) 5.5rem;
  color: var(--mp-ink);
}
.mp-steps[hidden],
.mp-step[hidden],
.mp-panel[hidden],
.mp-intent[hidden],
.mp-hub[hidden],
.mp-app[hidden],
.mp-install-banner[hidden],
.mp-gps-banner[hidden],
.mp-gps-chip[hidden],
[hidden] { display: none !important; }

/* —— Intent —— */
.mp-intent {
  position: relative;
  min-height: min(82vh, 720px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 0 2.5rem;
  animation: mpFadeIn .45s ease;
  overflow: hidden;
}
.mp-intent-bg {
  position: absolute; inset: -20% -10% auto;
  height: 70%; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(155,198,90,.18), transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 40%, rgba(94,200,255,.08), transparent 60%);
}
.mp-intent-inner { position: relative; width: min(560px, 100%); text-align: center; z-index: 1; }
.mp-intent-hero {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  margin-bottom: 1.15rem;
}
.mp-device-viz { perspective: 600px; }
.mp-device-phone {
  width: 72px; height: 118px; border-radius: 14px;
  border: 2px solid rgba(155,198,90,.55);
  background: linear-gradient(160deg, #163040, #0c1c26);
  box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(155,198,90,.12);
  padding: 8px 7px 10px; transform: rotateX(6deg) rotateY(-8deg);
  animation: mpPhoneFloat 4.5s ease-in-out infinite;
}
.mp-device-screen {
  position: relative; height: 100%; border-radius: 8px; overflow: hidden;
  background: #071018; display: grid; place-items: center;
}
.mp-device-scan {
  position: absolute; left: 0; right: 0; height: 28%;
  background: linear-gradient(180deg, transparent, rgba(155,198,90,.35), transparent);
  animation: mpScan 2.2s ease-in-out infinite;
  pointer-events: none;
}
.mp-device-chip[data-state="ready"] .mp-device-scan,
.mp-device-viz.is-ready .mp-device-scan { animation: none; opacity: 0; }
@keyframes mpPhoneFloat {
  0%, 100% { transform: rotateX(6deg) rotateY(-8deg) translateY(0); }
  50% { transform: rotateX(4deg) rotateY(-4deg) translateY(-6px); }
}
@keyframes mpScan {
  0% { top: -10%; }
  100% { top: 90%; }
}
.mp-device-chip {
  display: flex; align-items: center; gap: .65rem; text-align: left;
  width: min(100%, 420px); padding: .7rem .85rem;
  border-radius: 1rem; border: 1px solid rgba(155,198,90,.28);
  background: rgba(12, 28, 38, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: border-color .2s, box-shadow .2s;
}
.mp-device-chip[data-state="ready"] {
  border-color: rgba(155,198,90,.5);
  box-shadow: 0 10px 28px rgba(155,198,90,.12);
}
.mp-device-chip[data-state="off"] { opacity: .85; border-color: var(--mp-line); }
.mp-device-chip-dot {
  width: .65rem; height: .65rem; border-radius: 50%; flex-shrink: 0;
  background: var(--mp-accent);
  box-shadow: 0 0 0 0 rgba(155,198,90,.45);
  animation: mpDot 1.2s ease-out infinite;
}
.mp-device-chip[data-state="ready"] .mp-device-chip-dot { animation: none; }
.mp-device-chip[data-state="off"] .mp-device-chip-dot { background: var(--mp-muted); box-shadow: none; animation: none; }
@keyframes mpDot {
  0% { box-shadow: 0 0 0 0 rgba(155,198,90,.5); }
  70% { box-shadow: 0 0 0 8px rgba(155,198,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(155,198,90,0); }
}
.mp-device-chip-txt { flex: 1; min-width: 0; }
.mp-device-chip-txt strong {
  display: block; font-family: Syne, sans-serif; font-size: .98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-device-chip-txt span { font-size: .75rem; color: var(--mp-muted); line-height: 1.3; }
.mp-device-edit {
  border: 0; background: rgba(155,198,90,.12); color: var(--mp-accent);
  border-radius: .55rem; padding: .35rem .55rem; font-size: .72rem; font-weight: 700; cursor: pointer;
}
.mp-intent h1 {
  font-family: var(--cf-display, Syne, sans-serif);
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  margin: 0 0 .45rem; letter-spacing: -.03em;
}
.mp-intent-lead { color: var(--mp-muted); margin: 0 0 1.35rem; line-height: 1.45; }
.mp-intent-cards { display: grid; gap: .75rem; }
@media (min-width: 560px) {
  .mp-intent-cards { grid-template-columns: 1fr 1fr; }
}
.mp-intent-card {
  text-align: left; cursor: pointer;
  border: 1px solid var(--mp-line);
  background: linear-gradient(145deg, rgba(155,198,90,.1), transparent 50%), var(--mp-panel-2);
  border-radius: 1.1rem; padding: 1.15rem 1.2rem;
  color: var(--mp-ink); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mp-intent-card:hover, .mp-intent-card:focus-visible {
  border-color: rgba(155,198,90,.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  outline: none;
}
.mp-intent-card em { font-style: normal; color: var(--mp-accent); }
.mp-intent-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; margin-bottom: .5rem;
  background: rgba(155,198,90,.15); color: var(--mp-accent);
}
.mp-intent-card strong {
  display: block; font-family: Syne, sans-serif; font-size: 1.15rem; margin-bottom: .25rem;
}
.mp-intent-card > span { font-size: .88rem; color: var(--mp-muted); line-height: 1.4; }
.mp-intent-links {
  display: flex; gap: .5rem; justify-content: center; align-items: center;
  margin-top: 1.25rem; color: var(--mp-muted); font-size: .85rem;
}
.mp-linkish,
.mp-soft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  margin: 0;
  padding: .38rem .7rem;
  border-radius: .55rem;
  border: 1px solid rgba(155,198,90,.35);
  background: rgba(155,198,90,.1);
  color: #d7f0a8;
  font: inherit;
  font-size: .74rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.mp-linkish:hover,
.mp-linkish:focus-visible,
.mp-soft-btn:hover,
.mp-soft-btn:focus-visible {
  background: rgba(155,198,90,.18);
  border-color: rgba(155,198,90,.55);
  color: #e8f5c8;
  outline: none;
  transform: translateY(-1px);
}
.mp-intent-legal {
  margin: 1.35rem auto 0;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--mp-muted);
  max-width: 34rem;
}
.mp-intent-legal .mp-linkish,
.mp-intent-legal a {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mp-accent);
  font-size: inherit;
  font-weight: 650;
  text-decoration: none;
  border-radius: 0;
  transform: none;
}
.mp-intent-legal .mp-linkish:hover,
.mp-intent-legal a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  transform: none;
}
.mp-rail-head .mp-linkish,
.mp-rail-head .mp-soft-btn {
  flex-shrink: 0;
  padding: .32rem .7rem;
  font-size: .72rem;
  border: 1px solid rgba(155,198,90,.65);
  border-radius: 999px;
  color: var(--mp-accent);
  background: rgba(155,198,90,.06);
  text-decoration: none;
}
.mp-rail-head .mp-linkish:hover,
.mp-rail-head .mp-linkish:focus-visible {
  background: rgba(155,198,90,.14);
  border-color: var(--mp-accent);
}
.mp-hub-head-actions .mp-linkish {
  padding: .32rem .6rem;
  font-size: .72rem;
}
.mp-detail-dismiss.mp-linkish {
  width: 100%;
  margin-top: .45rem;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.7);
  font-weight: 650;
}
.mp-detail-dismiss.mp-linkish:hover {
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

/* —— Hub Mi celular —— */
.mp-hub {
  min-height: auto;
  padding: 0 0 5.5rem;
  animation: mpFadeIn .35s ease;
}
.mp-hub-inner { width: min(520px, 100%); margin: 0 auto; padding: 0 .85rem; }
.mp-hub-intro {
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 0;
}
.mp-hub-logo {
  display: block;
  width: min(148px, 48vw);
  height: auto;
  margin: 0 auto .55rem;
}
.mp-hub-brandline {
  margin: 0 auto .45rem;
  max-width: 22rem;
  font-family: Outfit, system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(244, 248, 252, 0.92);
  text-align: center;
}
.mp-hub-geo {
  margin: 0 auto .75rem;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--mp-accent);
  min-height: 1.2em;
}
.mp-hub-geo[data-state="loading"] { color: var(--mp-accent); opacity: .9; }
.mp-hub-geo strong { color: #c8ea8a; font-weight: 800; }

.mp-brand-dexter {
  margin: 1.15rem 0 1.25rem;
  scroll-margin-top: 1rem;
}
.mp-hub-province-map {
  margin: 0 0 1.35rem;
  scroll-margin-top: 1rem;
}
.mp-hub-province-map .mp-rail-head h2 {
  font-family: Syne, sans-serif;
  font-size: 1.05rem;
  margin: 0;
  color: #e8f0f4;
}
.mp-hub-province-map-frame {
  position: relative;
  margin-top: .55rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(155,198,90,.22);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(155,198,90,.1), transparent 55%),
    linear-gradient(165deg, #0c1c26 0%, #102633 55%, #0a1620 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: min(56vh, 26rem);
  min-height: 16rem;
  height: auto;
}
.mp-hub-province-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}
.mp-hub-province-map-canvas .leaflet-container {
  background: #0a1620;
  font: inherit;
}
.mp-hub-province-map-canvas .leaflet-control-attribution {
  background: rgba(10,22,32,.72) !important;
  color: rgba(200,220,230,.55) !important;
  font-size: .58rem !important;
  max-width: 55%;
}
.mp-hub-province-map-canvas .leaflet-control-zoom {
  border: 0 !important;
  box-shadow: none !important;
}
.mp-hub-province-map-canvas .leaflet-control-zoom a {
  background: rgba(15,36,48,.9) !important;
  color: #c8ea8a !important;
  border: 1px solid rgba(155,198,90,.28) !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  font-size: 14px !important;
}
.mp-hub-province-map-skel {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 30%, rgba(155,198,90,.06) 48%, transparent 65%),
    radial-gradient(circle at 35% 40%, rgba(155,198,90,.12), transparent 42%),
    radial-gradient(circle at 68% 58%, rgba(94,200,255,.08), transparent 38%);
  animation: mpHubMapShimmer 2.4s ease-in-out infinite;
}
.mp-hub-province-map.is-ready .mp-hub-province-map-skel {
  opacity: 0;
  transition: opacity .45s ease;
  animation: none;
}
@keyframes mpHubMapShimmer {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* Pre-registro tiendas (CTA + modal) */
.mp-hub-store-join {
  margin: 0 0 1.35rem;
  scroll-margin-top: 1rem;
}
.mp-hub-store-join-card {
  border-radius: 1rem;
  border: 1px solid rgba(155,198,90,.22);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(155,198,90,.1), transparent 55%),
    linear-gradient(165deg, #0c1c26 0%, #102633 55%, #0a1620 100%);
  padding: 1rem 1rem 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.mp-hub-store-join-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.1rem;
  flex-wrap: wrap;
}
.mp-hub-store-join-cta-txt {
  flex: 1;
  min-width: min(100%, 14rem);
}
.mp-hub-store-join-cta h2 {
  font-family: Syne, sans-serif;
  font-size: 1.05rem;
  margin: 0;
  color: #e8f0f4;
}
.mp-hub-store-join-cta .mp-rail-lead {
  margin: .3rem 0 0;
}
.mp-hub-store-join-cta > .cf-btn {
  flex-shrink: 0;
  font-weight: 750;
  min-height: 2.55rem;
  padding: .55rem 1.15rem;
}
.mp-hub-store-join-dialog {
  width: min(28rem, calc(100vw - 1.5rem));
  max-width: min(28rem, calc(100vw - 1.5rem));
  max-height: min(92vh, 40rem);
  padding: 1.1rem 1rem 1rem;
  overflow: auto;
  border: 1px solid rgba(155,198,90,.28);
  background: #102633;
  color: var(--mp-ink);
  border-radius: 1rem;
}
.mp-hub-store-join-dialog::backdrop {
  background: rgba(6, 14, 20, .72);
}
.mp-hub-store-join-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.mp-hub-store-join-dialog-head h3 {
  margin: 0;
  font-family: Syne, sans-serif;
  font-size: 1.1rem;
}
.mp-hub-store-join-dialog-x {
  border: 0;
  background: transparent;
  color: var(--mp-muted);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  padding: .1rem .35rem;
  border-radius: .4rem;
}
.mp-hub-store-join-dialog-x:hover {
  color: #e8f0f4;
  background: rgba(255,255,255,.06);
}
.mp-hub-store-join-dialog .mp-sub {
  margin: .45rem 0 .85rem;
}
.mp-hub-store-join-form .mp-field {
  margin: 0;
  text-align: left;
  display: grid;
  gap: .3rem;
}
.mp-hub-store-join-form .mp-field span {
  font-size: .72rem;
  font-weight: 650;
  color: rgba(200,220,230,.72);
}
.mp-hub-store-join-form .mp-field input,
.mp-hub-store-join-form .mp-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(8,18,26,.72);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--mp-ink);
  border-radius: .65rem;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .9rem;
}
.mp-hub-store-join-form .mp-field input:focus,
.mp-hub-store-join-form .mp-field textarea:focus {
  outline: none;
  border-color: rgba(155,198,90,.55);
  box-shadow: 0 0 0 2px rgba(155,198,90,.15);
}
.mp-hub-store-join-form .mp-field textarea {
  resize: vertical;
  min-height: 3.2rem;
}
.mp-hub-store-join-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem .7rem;
}
.mp-hub-store-join-span { grid-column: 1 / -1; }
.mp-hub-store-join-offers {
  margin: .85rem 0 .55rem;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
}
.mp-hub-store-join-offers legend {
  width: 100%;
  font-size: .72rem;
  font-weight: 650;
  color: rgba(200,220,230,.72);
  margin: 0 0 .35rem;
  padding: 0;
}
.mp-hub-store-join-offers .mp-check {
  margin: 0;
  font-size: .82rem;
  color: #d5e2ea;
}
.mp-hub-store-join-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .65rem;
  margin-top: .55rem;
}
.mp-hub-store-join-actions .cf-btn {
  min-height: 2.5rem;
  padding: .55rem 1.1rem;
  font-weight: 750;
}
.mp-hub-store-join-actions .cf-btn[disabled] {
  opacity: .65;
  cursor: wait;
}
.mp-hub-store-join-note {
  font-size: .72rem;
  color: var(--mp-muted);
  line-height: 1.35;
  margin: .55rem 0 0;
}
.mp-hub-store-join-status {
  margin: .55rem 0 0;
  font-size: .8rem;
  color: #f0b4b4;
}
.mp-hub-store-join-status.is-ok {
  color: #c8ea8a;
}
.mp-hub-store-join-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.mp-hub-store-join-done {
  margin-top: .15rem;
  padding: .85rem .9rem;
  border-radius: .75rem;
  border: 1px solid rgba(155,198,90,.35);
  background: rgba(155,198,90,.1);
}
.mp-hub-store-join-done strong {
  display: block;
  font-size: .95rem;
  color: #e8f6c8;
}
.mp-hub-store-join-done p {
  margin: .25rem 0 0;
  font-size: .82rem;
  color: rgba(220,230,236,.85);
  line-height: 1.4;
}
@media (max-width: 560px) {
  .mp-hub-store-join-grid { grid-template-columns: 1fr; }
  .mp-hub-store-join-cta { flex-direction: column; align-items: stretch; }
  .mp-hub-store-join-cta > .cf-btn { width: 100%; }
  .mp-hub-store-join-actions { flex-direction: column; align-items: stretch; }
}

/* Puntos del mapa de provincia (hub): círculo centrado en lat/lng */
.leaflet-div-icon.mp-hub-dot-wrap {
  background: transparent !important;
  border: 0 !important;
}
.mp-hub-dot-wrap {
  width: 10px;
  height: 10px;
  margin: 0 !important; /* Leaflet ya aplica iconAnchor; no duplicar margen */
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
}
.mp-hub-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9BC65A;
  border: 1.5px solid rgba(15, 36, 48, .9);
  box-shadow: 0 0 0 1px rgba(155, 198, 90, .35);
}
@media (prefers-reduced-motion: reduce) {
  .mp-hub-province-map-skel { animation: none; }
}
.mp-rail-lead-inline {
  font-size: .72rem;
  color: var(--mp-muted);
  font-weight: 600;
}
.mp-brand-dexter-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: .25rem 0;
}
.mp-brand-dexter-track {
  display: flex;
  align-items: center;
  gap: .55rem;
  overflow-x: auto;
  padding: .45rem .35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mp-brand-dexter-track::-webkit-scrollbar { display: none; height: 0; }
.mp-brand-dexter-track.is-marquee {
  overflow: visible;
  width: max-content;
  animation: mpBrandDexterScroll 55s linear infinite;
}
.mp-brand-dexter-viewport:hover .mp-brand-dexter-track.is-marquee {
  animation-play-state: paused;
}
@keyframes mpBrandDexterScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Marca: altura visual uniforme; wordmarks anchos sin aplastar en cuadrado */
.mp-brand-logo-btn {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  min-width: 3.1rem;
  height: 2.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 0.65rem;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  padding: 0.45rem 0.7rem;
  font-family: inherit;
  box-shadow: none;
  opacity: .9;
  transition: opacity .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.mp-brand-logo-btn:hover,
.mp-brand-logo-btn:focus-visible {
  opacity: 1;
  color: #fff;
  outline: none;
  background: rgba(255,255,255,.09);
  border: 0;
}
.mp-brand-logo-btn.is-priority {
  opacity: 1;
  color: #d7f0a8;
  border: 0;
  background: rgba(155,198,90,.14);
  box-shadow: none;
}
.mp-brand-logo-btn.is-priority::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: rgba(155,198,90,.85);
}
.mp-brand-logo-btn.has-logo {
  min-width: 3.4rem;
  padding: 0.4rem 0.75rem;
}
.mp-brand-logo-btn.has-logo img {
  display: block;
  width: auto;
  height: 1.35rem;
  max-width: 5.75rem;
  max-height: 1.45rem;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  opacity: .95;
  margin: 0 auto;
  flex-shrink: 0;
}
.mp-brand-logo-btn.is-priority.has-logo img {
  opacity: 1;
}
.mp-brand-logo-btn .mp-brand-mono {
  display: none;
}
.mp-brand-logo-btn span.mp-brand-name {
  font-family: Outfit, system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: inherit;
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  line-height: 1.1;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .mp-brand-dexter-track.is-marquee { animation: none; }
  .mp-brand-dexter-viewport { mask-image: none; -webkit-mask-image: none; }
}

.mp-hub-jump {
  /* 2×2 grid: ver bloque “Pills: 2×2” más abajo */
  margin: 0 0 1.1rem;
}
.mp-hub-jump-btn {
  text-align: center;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  padding: .55rem .35rem;
  border-radius: 999px;
  border: 1px solid var(--mp-line);
  background: var(--mp-panel-2);
  color: var(--mp-ink);
}
.mp-hub-jump-btn:hover,
.mp-hub-jump-btn:focus-visible {
  border-color: rgba(155,198,90,.55);
  color: var(--mp-accent);
  outline: none;
}
.mp-hub-credit-wrap {
  margin-top: .75rem;
  display: grid;
  gap: .3rem;
}
.mp-hub-credit-wrap[hidden] { display: none !important; }
.mp-hub-credit-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: .75rem 1rem;
  font-weight: 800;
  font-size: .92rem;
  font-family: Syne, sans-serif;
  color: #0F2430;
  background: linear-gradient(135deg, #c8ea8a, #9BC65A);
}
.mp-hub-credit-btn:hover { filter: brightness(1.05); }
.mp-hub-credit-hint {
  margin: 0;
  text-align: center;
  font-size: .72rem;
  color: var(--mp-muted);
}
.mp-hub-repair-morefails {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: .55rem auto 0;
  padding: .4rem .85rem;
  border: 1px solid rgba(155,198,90,.35);
  border-radius: .55rem;
  background: rgba(155,198,90,.1);
  color: #d7f0a8;
  font-size: .74rem;
  font-weight: 750;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mp-hub-repair-morefails:hover,
.mp-hub-repair-morefails:focus-visible {
  background: rgba(155,198,90,.18);
  border-color: rgba(155,198,90,.55);
  outline: none;
}
.mp-hub-repair-morefails[hidden] { display: none !important; }

.mp-hub-head { text-align: center; margin-bottom: .85rem; display: flex; justify-content: center; }
.mp-hub-device-row {
  display: flex; flex-direction: row; align-items: center; gap: .65rem;
  text-align: left;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
}
.mp-hub-device-img-wrap {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: .65rem; background: rgba(155,198,90,.1);
  border: 1px solid rgba(155,198,90,.2);
  display: grid; place-items: center; overflow: hidden;
  margin: 0;
}
.mp-hub-device-img { width: 100%; height: 100%; object-fit: contain; }
.mp-hub-device-ph { font-size: 1.05rem; opacity: .8; }
.mp-hub-device-txt { min-width: 0; flex: 1; width: auto; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.mp-hub-kicker {
  margin: 0 0 .12rem; font-size: .62rem; font-weight: 750;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mp-accent);
}
.mp-hub-title {
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(.95rem, 3.2vw, 1.05rem);
  margin: 0 0 .1rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  font-weight: 650;
}
.mp-hub-sub { margin: 0 0 .35rem; color: var(--mp-muted); font-size: .72rem; max-width: 15.5rem; }
.mp-hub-head-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-start; }
.mp-hub-head .mp-device-edit { margin: 0; font-size: .72rem; padding: .2rem .5rem; }

.mp-hub-cta {
  display: flex; align-items: center; gap: .75rem;
  text-align: left; cursor: pointer; width: 100%;
  border: 1px solid rgba(155,198,90,.45);
  background: linear-gradient(145deg, rgba(155,198,90,.14), transparent 60%), var(--mp-panel-2);
  border-radius: 1rem; padding: .85rem 1rem; color: var(--mp-ink);
  margin-bottom: 1.1rem;
  transition: transform .15s, border-color .15s;
}
.mp-hub-cta:hover, .mp-hub-cta:focus-visible {
  transform: translateY(-1px); outline: none;
  border-color: rgba(155,198,90,.75);
}
.mp-hub-cta .mp-intent-ico {
  flex: 0 0 auto; margin: 0; opacity: .9;
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(155,198,90,.12);
}
.mp-hub-cta-copy { min-width: 0; }
.mp-hub-cta strong {
  display: block; font-family: Syne, sans-serif; font-size: 1rem; margin-bottom: .1rem;
}
.mp-hub-cta > span,
.mp-hub-cta-copy > span { font-size: .8rem; color: var(--mp-muted); }

/* Hub repair problems */
.mp-hub-repair,
.mp-hub-rail-block {
  scroll-margin-top: 1rem;
}
.mp-rail-card--repair {
  min-height: 118px;
  border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(160deg, rgba(155,198,90,.08), transparent 55%),
    var(--mp-panel-2);
}
.mp-rail-card--repair .mp-rail-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(155,198,90,.14);
  color: #c8ea8a;
}
.mp-rail-card--acc.mp-rail-card--more {
  border-color: rgba(155,198,90,.4);
  background:
    linear-gradient(145deg, rgba(155,198,90,.16), transparent 60%),
    var(--mp-panel-2);
}
.mp-rail-card--acc.mp-rail-card--more strong { color: #d7f0a8; }
/* Solo el texto hint — no el icono (.mp-rail-ico también es span) */
.mp-rail-card--acc > span:not(.mp-rail-ico) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  opacity: .78;
}
.mp-hub-repair .mp-rail-track {
  margin-top: .15rem;
}
.mp-hub-repair-lead {
  margin: -.15rem 0 .55rem; font-size: .8rem; color: var(--mp-muted);
}
.mp-hub-repair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}
.mp-hub-repair-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  text-align: left; cursor: pointer; width: 100%;
  border: 1px solid var(--mp-line); background: var(--mp-panel-2);
  border-radius: 12px; padding: .7rem .75rem; color: var(--mp-ink);
  transition: border-color .15s, background .15s, transform .12s;
}
.mp-hub-repair-card:hover,
.mp-hub-repair-card:focus-visible {
  border-color: rgba(155,198,90,.55);
  background: rgba(155,198,90,.08);
  outline: none; transform: translateY(-1px);
}
.mp-hub-repair-card strong {
  font-size: .88rem; font-family: Syne, sans-serif; font-weight: 700;
}
.mp-hub-repair-card span { font-size: .72rem; color: var(--mp-muted); line-height: 1.25; }
.mp-hub-repair-card .mp-hub-repair-ico {
  width: 28px; height: 28px; border-radius: 8px; margin-bottom: .2rem;
  display: grid; place-items: center;
  background: rgba(155,198,90,.12); color: var(--mp-accent);
  font-size: .85rem;
}
.mp-hub-repair-card.is-extra { display: none; }
.mp-hub-repair.is-expanded .mp-hub-repair-card.is-extra { display: flex; }
.mp-hub-repair-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .65rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .75rem;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mp-hub-repair-all:hover,
.mp-hub-repair-all:focus-visible {
  color: #fff;
  border-color: rgba(155,198,90,.45);
  background: rgba(155,198,90,.1);
  outline: none;
}

.mp-hub-rail-block { margin-bottom: 1rem; }

/* Buscador hub (antes de marcas) */
.mp-hub-search {
  margin: 0 0 1.15rem;
  position: relative;
  z-index: 40;
}
.mp-hub-search-field {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .2rem .2rem .85rem;
  border: 1px solid rgba(155,198,90,.28);
  border-radius: 999px;
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(155,198,90,.1), transparent 55%),
    rgba(8, 18, 26, .88);
  color: rgba(200,220,230,.7);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-hub-search-field:focus-within {
  border-color: rgba(155,198,90,.6);
  box-shadow: 0 0 0 3px rgba(155,198,90,.14);
  color: #c8ea8a;
}
.mp-hub-search-field > svg {
  flex-shrink: 0;
}
.mp-hub-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #e8f0f4;
  font: inherit;
  font-size: .92rem;
  padding: .65rem 0;
  outline: none;
}
.mp-hub-search-field input::placeholder {
  color: rgba(160,180,195,.72);
}
.mp-hub-search-go {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: .62rem 1.05rem;
  font: inherit;
  font-weight: 800;
  font-size: .84rem;
  cursor: pointer;
  background: linear-gradient(135deg, #c8ea8a, #9BC65A);
  color: #0F2430;
}
.mp-hub-search-go:active {
  transform: scale(.98);
}
.mp-hub-search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - .15rem);
  margin: 0;
  padding: .35rem;
  border-radius: .9rem;
  border: 1px solid rgba(155,198,90,.28);
  background: #102633;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  max-height: min(48vh, 17rem);
  overflow: auto;
  z-index: 8;
}
.mp-hub-search-suggest[hidden] { display: none !important; }
.mp-hub-search-suggest button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  text-align: left;
  border: 0;
  background: transparent;
  color: #e8f0f4;
  font: inherit;
  font-size: .86rem;
  padding: .62rem .7rem;
  border-radius: .65rem;
  cursor: pointer;
}
.mp-hub-search-suggest button:hover,
.mp-hub-search-suggest button:focus-visible,
.mp-hub-search-suggest button.is-on {
  background: rgba(155,198,90,.12);
  outline: none;
}
.mp-hub-search-suggest strong {
  font-weight: 700;
}
.mp-hub-search-suggest span {
  font-size: .72rem;
  color: var(--mp-muted);
  flex-shrink: 0;
}
.mp-hub-search-suggest-empty {
  padding: .7rem .75rem;
  font-size: .82rem;
  color: var(--mp-muted);
}

.mp-rail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; margin-bottom: .25rem;
}
.mp-rail-lead {
  margin: 0 0 .45rem;
  font-size: .72rem;
  color: var(--mp-muted);
}
.mp-rail-head h2,
.mp-rail-head h3 {
  margin: 0; font-size: .95rem; font-family: Syne, sans-serif; font-weight: 700;
}
.mp-rail-track {
  display: flex; gap: .65rem; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .15rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.mp-rail-track--auto {
  scroll-behavior: auto;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.mp-rail-track::-webkit-scrollbar { display: none; height: 0; } /* Chrome/Safari */
.mp-rail-card {
  flex: 0 0 min(42vw, 148px); scroll-snap-align: start;
  background: var(--mp-panel-2); border: 1px solid var(--mp-line);
  border-radius: 12px; padding: .65rem; color: var(--mp-ink);
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: .3rem;
  min-height: 88px;
  text-decoration: none;
}
.mp-rail-card img,
.mp-rail-card .mp-rail-photo {
  width: 100%; height: 96px; object-fit: contain;
  background: rgba(15,28,36,.55); border-radius: 8px;
}
.mp-rail-card--phone {
  min-height: 156px;
  flex: 0 0 min(44vw, 156px);
}
.mp-rail-card--phone strong {
  font-size: .78rem;
  text-transform: none;
  letter-spacing: -0.01em;
}
.mp-rail-card--acc {
  min-height: 108px;
  align-items: flex-start;
}
.mp-rail-card--acc strong {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-weight: 650;
  letter-spacing: 0;
}
#mpHubSectionAcc .mp-rail-head h2 {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
.mp-rail-ico {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  aspect-ratio: 1 / 1;
  flex: 0 0 42px;
  box-sizing: border-box;
  border-radius: 11px;
  display: grid !important;
  place-items: center;
  place-content: center;
  background: rgba(155,198,90,.14);
  color: #c8ea8a;
  margin: 0 auto .2rem;
  overflow: hidden;
  opacity: 1 !important;
  font-size: inherit;
  line-height: 0;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  text-overflow: unset;
  white-space: normal;
}
.mp-rail-ico svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  margin: 0 auto;
}
.mp-rail-card--repair .mp-rail-ico,
.mp-rail-card--acc .mp-rail-ico {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  aspect-ratio: 1 / 1;
  border-radius: 11px;
}
.mp-hub-repair-card .mp-hub-repair-ico,
.mp-hub-repair-card .mp-rail-ico {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  margin-bottom: .2rem;
  display: grid;
  place-items: center;
  background: rgba(155,198,90,.12);
  color: var(--mp-accent);
}
.mp-rail-card strong { font-size: .82rem; line-height: 1.25; }
.mp-rail-card > span:not(.mp-rail-ico) { font-size: .72rem; opacity: .7; }
.mp-rail-ph {
  display: grid; place-items: center;
  width: 100%; height: 84px; border-radius: 8px;
  background: rgba(15,28,36,.55); font-size: 1.4rem; opacity: .65;
}
.mp-rail-ph--soft { color: var(--mp-accent); opacity: .85; }
.mp-rail-skel {
  flex: 0 0 min(42vw, 148px); height: 88px; border-radius: 12px;
  background: linear-gradient(90deg, #162834 25%, #1c3342 50%, #162834 75%);
  background-size: 200% 100%;
  animation: mpShimmer 1.2s ease-in-out infinite;
  border: 1px solid var(--mp-line);
}
.mp-rail-skel-tall { height: 140px; }
@keyframes mpShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.mp-hub-install {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: 12px;
  border: 1px solid var(--mp-line); background: var(--mp-panel-2);
  margin-top: .35rem;
}
.mp-hub-install[hidden] { display: none !important; }
.mp-hub-install-txt { flex: 1; min-width: 0; }
.mp-hub-install-txt strong { display: block; font-size: .86rem; }
.mp-hub-install-txt p { margin: .1rem 0 0; font-size: .74rem; color: var(--mp-muted); }

/* Sticky nav footer — siempre visible */
.mp-hub-footer {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: min(560px, 100%); bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .35rem; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(15, 36, 48, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(42, 60, 72, .9);
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.mp-hub-foot-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; padding: .4rem .15rem; text-decoration: none;
  color: var(--mp-muted); font-size: .65rem; font-weight: 600;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 10px;
}
.mp-hub-foot-btn svg { opacity: .85; }
.mp-hub-foot-btn:hover,
.mp-hub-foot-btn:focus-visible,
.mp-hub-foot-btn.is-on {
  color: var(--mp-accent); outline: none;
}
.mp-hub-foot-btn--credit.is-on,
.mp-hub-foot-btn--credit:hover {
  color: #c8ea8a;
}
.mp-hub-foot-btn--home.is-on,
.mp-hub-foot-btn--home:hover,
.mp-hub-foot-btn--home:focus-visible {
  color: #d7f0a8;
}
.mp-hub-foot-btn span { line-height: 1.1; }

.mp-hub-jump-btn.is-on {
  color: #0F2430;
  background: linear-gradient(135deg, #c8ea8a, #9BC65A);
  border-color: transparent;
}
.mp-hub-pay-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin: 0 0 .85rem;
}
.mp-hub-pay-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-decoration: none;
  color: inherit;
  padding: .85rem .75rem;
  border-radius: .9rem;
  border: 1px solid var(--mp-line);
  background: rgba(255,255,255,.04);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.mp-hub-pay-card:hover,
.mp-hub-pay-card:focus-visible {
  border-color: rgba(155,198,90,.45);
  background: rgba(155,198,90,.08);
  outline: none;
  transform: translateY(-1px);
}
.mp-hub-pay-card strong {
  font-family: Syne, sans-serif;
  font-size: .95rem;
  color: #fff;
}
.mp-hub-pay-card span {
  font-size: .72rem;
  line-height: 1.35;
  color: var(--mp-muted);
}
.mp-hub-pay-card--credit {
  border-color: rgba(155,198,90,.4);
  background:
    linear-gradient(135deg, rgba(155,198,90,.14), transparent 65%),
    rgba(255,255,255,.03);
}
.mp-hub-pay-card--credit strong { color: #d7f0a8; }
.mp-hub-phones-block .mp-hub-credit-wrap {
  margin: 0 0 .85rem;
}
.mp-intent-cards--phones {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 520px) {
  .mp-intent-cards--phones {
    grid-template-columns: 1fr 1fr;
    max-width: 560px;
  }
}
@media (max-width: 420px) {
  .mp-hub-pay-ways { grid-template-columns: 1fr; }
}

/* legacy hub bits kept for JS hooks */
.mp-hub-actions, .mp-hub-section, .mp-hub-tips, .mp-hub-links, .mp-hub-near { display: none !important; }
.mp-hub-actions-secondary { display: none !important; }
.mp-hub-near-card {
  display: flex; align-items: center; justify-content: space-between; gap: .65rem;
  text-align: left; width: 100%; cursor: pointer;
  border: 1px solid var(--mp-line); background: var(--mp-panel);
  border-radius: .85rem; padding: .75rem .9rem; color: var(--mp-ink); font: inherit;
}
.mp-hub-near-card:hover { border-color: rgba(155,198,90,.4); background: rgba(155,198,90,.06); }
.mp-hub-near-card strong { display: block; font-size: .92rem; }
.mp-hub-near-card span { font-size: .75rem; color: var(--mp-muted); }
.mp-hub-tips {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;
}
.mp-hub-tips li {
  border: 1px solid var(--mp-line); border-radius: .85rem;
  padding: .75rem .9rem; background: rgba(12,28,38,.7);
  font-size: .86rem; line-height: 1.4; color: var(--mp-ink);
}
.mp-hub-tips li strong {
  display: block; color: var(--mp-accent); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: .25rem;
}
.mp-hub-install {
  display: flex; align-items: center; gap: .75rem;
  margin: .5rem 0 0; padding: .7rem .85rem;
  border-radius: 12px; border: 1px solid var(--mp-line);
  background: var(--mp-panel-2);
}
.mp-hub-install[hidden] { display: none !important; }
.mp-hub-install-ico { display: none; }
.mp-hub-install-txt { flex: 1; min-width: 0; }
.mp-hub-install-txt strong { display: block; font-size: .86rem; }
.mp-hub-install-txt p { margin: .1rem 0 0; font-size: .74rem; color: var(--mp-muted); line-height: 1.3; }
.mp-hub-links { display: none !important; }
.mp.is-hub .mp-install-float { display: none !important; }

/* Install CTAs */
.mp-install-fab {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(155,198,90,.45); background: rgba(155,198,90,.14);
  color: var(--mp-accent); border-radius: .75rem; padding: .42rem .75rem;
  font-weight: 700; font-size: .8rem; cursor: pointer;
}
.mp-install-fab svg { flex-shrink: 0; }
.mp-install-float {
  position: fixed; z-index: 45; right: max(1rem, env(safe-area-inset-right));
  bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 3.85rem));
  display: inline-flex; align-items: center; gap: .5rem;
  border: 0; cursor: pointer; font-weight: 700; font-size: .88rem;
  color: #0F2430; background: linear-gradient(135deg, #c8ea8a, var(--mp-accent));
  border-radius: 999px; padding: .7rem 1.05rem .7rem .85rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(155,198,90,.25);
  animation: mpFadeIn .4s ease;
}
.mp-install-float[hidden] { display: none !important; }
.mp-install-banner {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 3.85rem));
  width: min(520px, calc(100% - 1.5rem));
  display: flex; gap: .75rem; align-items: center;
  padding: .85rem 1rem; border-radius: 1rem;
  border: 1px solid rgba(155,198,90,.4);
  background: rgba(12, 28, 38, 0.96); backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  animation: mpFadeIn .3s ease;
}
.mp-install-banner-ico {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  display: grid; place-items: center; color: var(--mp-accent);
  background: rgba(155,198,90,.15);
}
.mp-install-banner strong { display: block; font-size: .92rem; }
.mp-install-banner p { margin: .15rem 0 0; font-size: .78rem; color: var(--mp-muted); }
.mp-install-banner-actions { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; flex-shrink: 0; margin-left: auto; }
.mp-device-dialog {
  width: min(26rem, calc(100vw - 1.5rem));
  max-width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(92vh, 42rem);
  padding: 1.1rem 1rem 1rem;
  overflow: auto;
}
.mp-device-dialog .mp-field {
  text-align: left;
  margin-top: .55rem;
  display: block;
}
.mp-pick-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--mp-line);
  border-radius: .75rem;
  background: rgba(0,0,0,.22);
  color: #e8f0f4;
  padding: .65rem .8rem;
  font: inherit;
  font-size: .9rem;
  margin: 0;
}
.mp-pick-search:focus {
  outline: none;
  border-color: rgba(155,198,90,.55);
}
.mp-pick-list {
  margin: .55rem 0 0;
  max-height: min(40vh, 15.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  padding: .15rem .1rem .35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(155,198,90,.35) transparent;
  -webkit-overflow-scrolling: touch;
}
.mp-pick-list > button {
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #e8f0f4;
  border-radius: .75rem;
  padding: .72rem .85rem;
  margin: 0;
  min-height: 2.9rem;
  height: auto;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  cursor: pointer;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  position: relative;
  z-index: 0;
  transform: none;
}
/* Fallback si el navegador no soporta gap en flex */
@supports not (gap: .55rem) {
  .mp-pick-list > button { margin-bottom: .55rem; }
  .mp-pick-list > button:last-child { margin-bottom: 0; }
}
.mp-pick-list > button:hover,
.mp-pick-list > button:focus-visible {
  border-color: rgba(155,198,90,.5);
  background: rgba(155,198,90,.12);
  outline: none;
  z-index: 1;
}
.mp-pick-list > button.is-on {
  border-color: rgba(155,198,90,.7);
  background: rgba(155,198,90,.18);
  color: #d7f0a8;
  z-index: 1;
}
.mp-pick-back {
  border: 0;
  background: transparent;
  color: var(--mp-accent);
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  padding: 0;
  margin: 0 0 .4rem;
  cursor: pointer;
  line-height: 1.3;
}
.mp-pick-chosen {
  margin: 0 0 .5rem;
  font-size: .82rem;
  color: #d7f0a8;
  font-weight: 650;
  line-height: 1.3;
}
.mp-pick-miss {
  display: inline-block;
  margin-top: .65rem;
  font-size: .78rem;
  line-height: 1.3;
}
.mp-pick-manual { margin-top: .35rem; }
.mp-pick-selection {
  margin: .75rem 0 0;
  padding: .6rem .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(155,198,90,.35);
  background: rgba(155,198,90,.1);
  color: #d7f0a8;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.35;
}
.mp-device-dialog-actions {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.mp-device-dialog-actions .cf-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.mp-device-dialog-hint {
  margin: .45rem 0 0;
  color: #f0b4b4;
  font-size: .78rem;
}
.mp-cards--stack {
  display: grid;
  gap: .65rem;
}
.mp-card--choice {
  text-align: left;
  width: 100%;
}
.mp-step[data-step="7"] .mp-pick-list {
  max-height: min(36vh, 14rem);
}
.mp-step[data-step="7"] .mp-pick-list > button {
  min-height: 2.7rem;
}

/* —— Top bar / chips —— */
.mp-partner-bar {
  display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline;
  margin-bottom: .75rem; padding: .65rem .85rem; border-radius: .75rem;
  border: 1px solid color-mix(in srgb, var(--mp-partner, var(--mp-accent)) 40%, transparent);
  background: color-mix(in srgb, var(--mp-partner, var(--mp-accent)) 12%, transparent);
}
.mp-partner-bar strong { color: var(--mp-partner, var(--mp-accent)); font-family: Syne, sans-serif; }
.mp-partner-bar span { color: var(--mp-muted); font-size: .88rem; }

/* Sticky Cellfy bar inside catalog shell (reemplaza al hub navbar) */
.mp-app-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: -.15rem -.15rem .85rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(155,198,90,.18);
  border-radius: .95rem;
  background:
    linear-gradient(180deg, rgba(16,38,48,.97), rgba(10,24,34,.98));
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.mp-app-navbar-brand {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.mp-app-navbar-brand img {
  display: block;
  height: 26px;
  width: auto;
}
.mp-app-navbar-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.mp-app-navbar-back {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: #c8ea8a;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}
.mp-app-navbar-title {
  display: block;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 800;
  color: #e8f0f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-app-navbar-share {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .65rem;
  border: 1px solid rgba(155,198,90,.32);
  background: rgba(8,18,26,.88);
  color: #9BC65A;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mp-app-navbar-share:hover,
.mp-app-navbar-share:focus-visible {
  border-color: rgba(155,198,90,.58);
  background: rgba(155,198,90,.12);
  outline: none;
}
.mp-app.is-phone-detail .mp-topbar { display: none !important; }
.mp-detail-brand {
  margin: -.35rem 0 .65rem;
  font-size: .82rem;
  color: rgba(200,214,224,.82);
  font-weight: 600;
}

.mp-topbar {
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  margin-bottom: .75rem; flex-wrap: wrap;
}
.mp-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.mp-chips button {
  border: 1px solid var(--mp-line); background: transparent; color: var(--mp-muted);
  padding: .42rem .85rem; border-radius: .7rem; cursor: pointer; font-weight: 600; font-size: .86rem;
}
.mp-chips button.is-on {
  background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-deep));
  border-color: transparent; color: #0F2430;
}
.mp-chips button.mp-chip-hub {
  border-color: rgba(155,198,90,.28);
  color: var(--mp-muted);
  background: transparent;
  font-size: .8rem;
}
.mp-chips button.mp-chip-hub:hover {
  color: var(--mp-accent);
  border-color: rgba(155,198,90,.45);
}
.mp-chips button.mp-chip-soft { opacity: .75; font-size: .8rem; padding: .36rem .7rem; }
.mp-chips button.mp-chip-soft.is-on { opacity: 1; }

.mp-steps {
  display: flex; gap: .4rem; flex-wrap: wrap; list-style: none;
  padding: 0; margin: 0 0 1rem;
}
.mp.is-map .mp-steps:not(.is-visible) { display: none !important; }
.mp-steps.is-visible { display: flex !important; }
.mp-steps li {
  display: flex; align-items: center; gap: .35rem;
  opacity: .4; font-size: .8rem; font-weight: 600; color: var(--mp-muted);
}
.mp-steps li.is-on { opacity: 1; color: var(--mp-ink); }
.mp-steps span {
  display: inline-grid; place-items: center;
  width: 1.45rem; height: 1.45rem; border-radius: 999px;
  background: rgba(255,255,255,.08); font-weight: 800; font-size: .75rem;
}
.mp-steps li.is-on span { background: var(--mp-accent); color: #0F2430; }

.mp-map-toolbar {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .65rem;
}
.mp-map-toolbar input,
.mp-map-toolbar select,
.mp-field input,
.mp-field select,
.mp-field textarea,
.mp-catalog-bar input {
  background: var(--mp-panel); border: 1px solid var(--mp-line); color: var(--mp-ink);
  border-radius: .65rem; padding: .5rem .75rem; font: inherit;
}
.mp-map-toolbar input { min-width: min(180px, 100%); flex: 1; }
.mp-count {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mp-accent); background: rgba(155,198,90,.12);
  padding: .35rem .65rem; border-radius: 999px;
}

.mp-map-shell {
  border: 1px solid var(--mp-line);
  border-radius: 1.15rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(155,198,90,.14), transparent 55%),
    var(--mp-panel);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.mp-map-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  min-height: 520px;
}
.mp-map-wrap { position: relative; min-height: 520px; }
.mp-map {
  position: absolute; inset: 0;
  height: 100% !important;
  background: #0a1620;
}
.mp-map-gps-gate {
  position: absolute;
  inset: 0;
  z-index: 850;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(6, 14, 22, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.mp-map-gps-gate[hidden] { display: none !important; }
.mp-map-gps-gate-card {
  width: min(22rem, 100%);
  text-align: center;
  padding: 1.25rem 1.1rem 1.15rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(155, 198, 90, 0.35);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(155,198,90,.16), transparent 60%),
    rgba(15, 36, 48, 0.96);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.mp-map-gps-gate-ico {
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--mp-accent);
  background: rgba(155,198,90,.14);
  border: 1px solid rgba(155,198,90,.28);
}
.mp-map-gps-gate-card strong {
  display: block;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 .4rem;
}
.mp-map-gps-gate-card p {
  margin: 0 0 1rem;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--mp-muted);
}
.mp-map-gps-gate-card .cf-btn {
  width: 100%;
  border-radius: 999px;
}
.mp-map-gps-gate-card .mp-linkish {
  display: inline-block;
  margin-top: .7rem;
  font-size: .72rem;
  color: rgba(232,240,244,.7);
}
.mp-map-shell.is-gps-locked .mp-gps-chip,
.mp-map-shell.is-gps-locked .mp-map-legend {
  display: none !important;
}
.mp-map-shell.is-gps-locked #mpSide {
  display: none !important;
}
.mp-map-shell.is-gps-locked .mp-map {
  filter: saturate(.7) brightness(.72);
  pointer-events: none;
}
.mp-map-legend {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 500;
  display: flex; gap: .65rem; flex-wrap: wrap;
  background: rgba(15,36,48,.88); backdrop-filter: blur(8px);
  border: 1px solid var(--mp-line); border-radius: .65rem;
  padding: .4rem .65rem; font-size: .72rem; color: var(--mp-muted);
}
.mp-dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 999px;
  margin-right: .25rem; vertical-align: middle;
}
.mp-dot.you { background: #5ec8ff; box-shadow: 0 0 0 3px rgba(94,200,255,.25); }
.mp-dot.shop { background: var(--mp-accent); }
.mp-dot.claimed { background: #c8f06a; }

/* Soft GPS chip (compact, always near top of map) */
.mp-gps-chip {
  position: absolute; left: 50%; top: .65rem; transform: translateX(-50%);
  z-index: 700; width: min(360px, calc(100% - 1.25rem));
  display: flex; align-items: center; gap: .55rem;
  background: rgba(15,36,48,.94); border: 1px solid rgba(155,198,90,.4);
  border-radius: 999px; padding: .4rem .45rem .4rem .85rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

/* Location prompt — always above wizard/map, responsive */
.mp-location-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 .85rem;
  padding: .7rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(155,198,90,.45);
  background: linear-gradient(135deg, rgba(155,198,90,.14), rgba(15,36,48,.92));
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.mp-location-bar[hidden] { display: none !important; }
.mp-location-bar-txt {
  flex: 1 1 180px;
  min-width: 0;
  line-height: 1.25;
}
.mp-location-bar-txt strong {
  display: block;
  font-size: .88rem;
  font-family: Syne, sans-serif;
  color: var(--mp-ink);
}
.mp-location-bar-txt span {
  display: block;
  margin-top: .15rem;
  font-size: .75rem;
  color: var(--mp-muted);
}
.mp-location-bar .cf-btn {
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
}
.mp-steps {
  flex-wrap: wrap;
  gap: .35rem .5rem;
}
.mp-steps li {
  font-size: .72rem;
}
.mp-gps-chip-txt {
  flex: 1; min-width: 0; text-align: left; line-height: 1.2;
}
.mp-gps-chip-txt strong {
  display: block; font-size: .78rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mp-gps-chip-txt span {
  display: block; font-size: .68rem; color: var(--mp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-gps-chip .cf-btn { flex-shrink: 0; border-radius: 999px; padding: .35rem .7rem; font-size: .75rem; }
.mp-gps-chip[hidden] { display: none !important; }

.mp-locate-card {
  display: grid;
  justify-items: start;
  gap: .35rem;
  padding: .85rem .9rem !important;
  border-color: rgba(155,198,90,.35) !important;
  background: linear-gradient(160deg, rgba(155,198,90,.1), rgba(0,0,0,.18)) !important;
}
.mp-locate-clock {
  position: relative;
  width: 42px; height: 42px;
  margin-bottom: .25rem;
}
.mp-locate-ring {
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(155,198,90,.35);
  border-top-color: #9BC65A;
  animation: mpSpin .9s linear infinite;
}
.mp-locate-mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.mp-locate-mark img { width: 22px; height: 22px; opacity: .95; }
@keyframes mpSpin { to { transform: rotate(360deg); } }
#mpCatalogMapIntro:not([hidden]) {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mp-gps-banner { display: none !important; } /* legacy */

.mp-side {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--mp-line);
  background: var(--mp-panel-2);
  max-height: 560px;
}
.mp-sheet-handle { display: none; }
.mp-list {
  flex: 1; overflow: auto; min-height: 160px;
  scrollbar-width: thin; scrollbar-color: rgba(155,198,90,.35) transparent;
}
.mp-item {
  padding: .85rem 1rem; border-bottom: 1px solid var(--mp-line);
  cursor: pointer; transition: background .15s;
}
.mp-item:hover { background: rgba(155,198,90,.06); }
.mp-item.is-on {
  background: rgba(155,198,90,.12);
  box-shadow: inset 3px 0 0 var(--mp-accent);
}
.mp-item-top { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.mp-item strong {
  display: block; font-size: .95rem; line-height: 1.3;
  font-family: var(--cf-display, Syne, sans-serif); letter-spacing: -.02em;
}
.mp-dist {
  flex-shrink: 0; font-size: .72rem; font-weight: 700;
  color: #0F2430; background: var(--mp-accent);
  padding: .18rem .45rem; border-radius: .4rem; white-space: nowrap;
}
.mp-item .meta { font-size: .78rem; color: var(--mp-muted); margin-top: .35rem; line-height: 1.45; }
.mp-item .meta-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.mp-item .line {
  display: flex; align-items: flex-start; gap: .35rem;
  margin-top: .25rem; font-size: .78rem; color: var(--mp-muted);
}
.mp-item .line a { color: var(--mp-accent); }
.mp-badge {
  display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .04em;
  padding: .14rem .42rem; border-radius: .35rem; background: rgba(255,255,255,.08); color: var(--mp-muted);
}
.mp-badge.claimed { background: rgba(155,198,90,.2); color: var(--mp-accent); }
.mp-badge.special { background: rgba(90,198,180,.22); color: #9eefe0; border: 1px solid rgba(90,198,180,.35); }

.mp-detail {
  border-top: 1px solid var(--mp-line);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(155,198,90,.08), transparent 40%), rgba(8, 22, 30, .95);
  max-height: 240px; overflow: auto;
}
.mp-detail h3 {
  margin: 0 0 .35rem; font-family: Syne, sans-serif; font-size: 1.05rem;
}
.mp-detail .mp-detail-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.mp-detail-grid { display: grid; gap: .35rem; margin-top: .55rem; }
.mp-detail-grid dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mp-accent); font-weight: 700; margin: 0;
}
.mp-detail-grid dd { margin: 0 0 .25rem; font-size: .86rem; }

.mp-expand-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; background: rgba(155,198,90,.06);
}
.mp-expand-row .meta { margin: 0; }
.mp-selected.is-picked { color: var(--mp-ink); background: rgba(155,198,90,.08); }

.mp-dock {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; gap: .5rem; justify-content: space-between;
  margin-top: .75rem; padding: .65rem 0 .15rem;
  background: linear-gradient(180deg, transparent, rgba(8,18,26,.95) 30%);
}
.mp-dock .cf-btn { flex: 1; }

.mp-nav { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.mp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin: .75rem 0; }
.mp-card {
  text-align: left; border: 1px solid var(--mp-line); background: var(--mp-panel);
  color: var(--mp-ink); border-radius: .85rem; padding: .75rem; cursor: pointer;
}
.mp-card.is-on {
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 1px var(--mp-accent);
}
.mp-card strong { display: block; }
.mp-card span { font-size: .75rem; color: var(--mp-muted); }
.mp-field { display: grid; gap: .3rem; margin: .65rem 0; font-size: .9rem; }
.mp-summary {
  background: var(--mp-panel); border: 1px solid var(--mp-line);
  border-radius: .85rem; padding: 1rem; margin: .75rem 0; line-height: 1.55;
}
.mp-check {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: .65rem 0; font-size: .88rem; color: var(--mp-muted); cursor: pointer;
}
.mp-check input { margin-top: .2rem; accent-color: var(--mp-accent); }
.mp-check a { color: var(--mp-accent); }
.mp-catalog-bar { display: flex; gap: .5rem; margin-bottom: .75rem; }
.mp-catalog-bar input { flex: 1; }
.mp-catalog-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.mp-catalog-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid rgba(155,198,90,.35);
  background: rgba(155,198,90,.1);
  color: #d7f0a8;
  font: inherit;
  font-weight: 750;
  font-size: .74rem;
  padding: .38rem .7rem;
  margin: 0 0 .55rem;
  border-radius: .55rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.mp-catalog-back:hover,
.mp-catalog-back:focus-visible {
  background: rgba(155,198,90,.18);
  border-color: rgba(155,198,90,.55);
  outline: none;
  text-decoration: none;
}

.mp-catalog { display: grid; gap: .55rem; }
.mp-catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .65rem;
}
.mp-cat-card {
  border: 1px solid var(--mp-line); border-radius: .85rem; padding: .85rem; background: var(--mp-panel);
  text-align: left; color: inherit; width: 100%;
  display: flex; flex-direction: column; gap: .35rem; position: relative;
  animation: mpFadeIn .35s ease both;
}
button.mp-cat-pick {
  cursor: pointer; font: inherit;
  transition: border-color .2s, transform .2s;
}
button.mp-cat-pick:hover,
button.mp-cat-pick.is-on {
  border-color: rgba(155, 198, 90, .55);
  transform: translateY(-1px);
}
.mp-cat-ico {
  font-size: 1.55rem; line-height: 1; margin-bottom: .15rem;
}
.mp-cat-img {
  width: 100%; height: 88px; object-fit: contain; border-radius: .5rem;
  background: rgba(0,0,0,.2); margin-bottom: .25rem;
}
.mp-cat-badge {
  position: absolute; top: .5rem; right: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(135deg, #c8ea8a, #9BC65A); color: #0F2430;
  border-radius: .4rem; padding: .15rem .4rem;
}
.mp-cat-price { font-weight: 700; color: var(--mp-accent); font-size: .9rem; }
.mp-cat-cta {
  margin-top: auto; font-size: .78rem; font-weight: 700; color: #0F2430;
  background: var(--mp-accent); align-self: flex-start;
  border-radius: .45rem; padding: .3rem .55rem;
}
.mp-catalog-pick {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: .65rem 0 0; padding: .65rem .85rem;
  border: 1px solid rgba(155, 198, 90, .35); border-radius: .75rem;
  background: rgba(155, 198, 90, .08);
}
.mp-catalog-pick strong { font-size: .92rem; }
.mp-specs-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem;
}
.mp-specs-list li,
.mp-specs-row {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .45rem .65rem; border-radius: .55rem;
  background: var(--mp-panel); border: 1px solid var(--mp-line);
  font-size: .85rem;
}
.mp-specs-list li span,
.mp-specs-row span { color: var(--mp-muted); }
.mp-specs-all { max-height: 42vh; overflow: auto; display: grid; gap: .35rem; margin-bottom: .75rem; }
.mp-specs-dialog { max-width: 420px; width: min(420px, calc(100vw - 1.5rem)); }
.mp-specs-hero {
  display: flex; align-items: center; gap: .85rem;
  margin: 0 0 1rem;
}
.mp-specs-hero-img {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border-radius: 1rem;
  border: 1px solid var(--mp-line);
  background: rgba(255,255,255,.04);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--mp-accent);
}
.mp-specs-hero-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.mp-specs-hero-txt { min-width: 0; }
.mp-specs-hero-txt h3 {
  margin: 0 0 .2rem;
  font-family: Syne, sans-serif;
  font-size: 1.15rem;
  line-height: 1.2;
}
.mp-specs-highlights {
  display: grid; gap: .35rem;
  margin: 0 0 .85rem;
}
.mp-specs-highlights:empty { display: none; }
.mp-specs-actions {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  justify-content: space-between;
  margin-top: .35rem;
}
.mp-specs-actions form { margin: 0; }
.mp-sub { color: var(--mp-muted); font-size: .9rem; }
.mp-step h2 { margin: .2rem 0 .35rem; font-size: 1.2rem; font-family: Syne, sans-serif; }

.mp-ios-dialog {
  border: 1px solid var(--mp-line); border-radius: 1rem; padding: 1.25rem;
  background: #102633; color: var(--mp-ink); max-width: 360px; width: calc(100% - 2rem);
}
dialog.mp-ios-dialog:not([open]) { display: none !important; }
.mp-ios-dialog h3 { margin: 0 0 .45rem; font-family: Syne, sans-serif; }
.mp-ios-dialog ol { margin: 0 0 .75rem; padding-left: 1.2rem; color: var(--mp-muted); line-height: 1.55; }
.mp-ios-lead {
  margin: 0 0 .85rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--mp-muted);
}
.mp-ios-note {
  margin: 0 0 1rem;
  font-size: .72rem;
  line-height: 1.4;
  color: rgba(200, 220, 230, .7);
}
.mp-ios-share {
  display: inline-flex;
  vertical-align: -2px;
  margin: 0 .15rem;
  color: var(--mp-accent, #9bc65a);
}
.mp-ios-url {
  margin: 0 0 .85rem;
  padding: .55rem .65rem;
  border-radius: .65rem;
  border: 1px solid var(--mp-line);
  background: rgba(0, 0, 0, .22);
  font-size: .72rem;
  word-break: break-all;
  color: #d7e6ef;
}
.mp-ios-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .65rem;
}
.mp-ios-actions .cf-btn { flex: 1 1 auto; text-align: center; text-decoration: none; }
.mp-ios-dismiss { display: block; margin: .15rem auto 0; }

@keyframes mpFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Leaflet */
.mp .leaflet-container { background: #0a1620; font: inherit; }
.mp .leaflet-control-zoom a {
  background: rgba(15,36,48,.92) !important; color: var(--mp-ink) !important;
  border-color: var(--mp-line) !important;
}
.mp .leaflet-popup-content-wrapper {
  background: #102633; color: #f4f8fc; border-radius: .85rem;
  border: 1px solid rgba(155,198,90,.25);
}
.mp .leaflet-popup-tip { background: #102633; }
.mp-popup-actions { margin-top: .55rem; }
.mp-popup-actions button {
  border: 0; border-radius: .5rem; padding: .35rem .7rem; cursor: pointer;
  font-weight: 700; font-size: .78rem; background: var(--mp-accent); color: #0F2430;
}
.mp-pin {
  width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--mp-accent);
  border: 2px solid #0F2430;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.mp-pin.is-claimed { background: #c8f06a; }
.mp-pin.is-special { background: #6ee7d2; box-shadow: 0 0 0 2px rgba(110,231,210,.45); }
.mp-pin.is-on { background: #fff; box-shadow: 0 0 0 3px var(--mp-accent); }
.mp-pin-inner {
  width: 8px; height: 8px; border-radius: 999px; background: #0F2430;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 960px) {
  .mp { padding-bottom: 6rem; }
  .mp-map-grid { grid-template-columns: 1fr; min-height: 0; }
  .mp-map-wrap { min-height: 58vh; }
  .mp-map-shell.is-gps-locked .mp-map-wrap {
    min-height: min(78vh, 640px);
  }
  .mp-map-shell.is-gps-locked .mp-map-grid {
    min-height: min(78vh, 640px);
  }
  .mp-side {
    border-left: 0; border-top: 1px solid var(--mp-line);
    max-height: 34vh; border-radius: 1rem 1rem 0 0;
    transition: max-height .25s ease;
  }
  .mp-side[hidden] { display: none !important; }
  .mp-side.is-expanded { max-height: 68vh; }
  .mp-sheet-handle {
    display: block; width: 42px; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,.25); margin: .55rem auto .15rem; cursor: pointer;
  }
  .mp-dock {
    position: fixed; left: 0; right: 0; bottom: 0;
    margin: 0; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(8,18,26,.96); border-top: 1px solid var(--mp-line);
    backdrop-filter: blur(10px);
  }
  .mp-map-shell.is-gps-locked ~ .mp-dock,
  .mp-step:has(.mp-map-shell.is-gps-locked) .mp-dock {
    display: none !important;
  }
  .mp-map-legend { bottom: auto; top: .65rem; left: .65rem; font-size: .65rem; }
  /* GPS chip siempre arriba en móvil (antes estaba abajo y tapaba la lista) */
  .mp-gps-chip {
    top: .55rem;
    bottom: auto;
    width: min(420px, calc(100% - 1rem));
    border-radius: 14px;
    flex-wrap: wrap;
    padding: .55rem .65rem;
  }
  .mp-gps-chip-txt strong,
  .mp-gps-chip-txt span {
    white-space: normal;
  }
  .mp-location-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 0 .75rem;
  }
  .mp-map-toolbar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem;
  }
  .mp-map-toolbar #mpSearch {
    grid-column: 1 / -1;
  }
  .mp-steps {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .mp-steps::-webkit-scrollbar { display: none; }
  .mp-steps li { flex: 0 0 auto; }
}

.mp-hub-device-row {
  /* layout compacto definido más abajo en “Mi celular — compacto” */
}
.mp-hub-device-img {
  width: 100%; height: 100%; object-fit: contain; background: transparent;
}
.mp-device-viz-photo {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: contain; margin: auto; display: block; z-index: 2;
  background: #fff; border-radius: 6px;
}
.mp-device-viz.has-photo .mp-device-scan { display: none; }
.mp-device-viz.has-photo #mpDeviceVizMark { display: none !important; }

.mp-brand-picker {
  margin: 0 0 .85rem;
  padding: .75rem;
  border: 1px solid var(--mp-line);
  border-radius: .85rem;
  background: rgba(255,255,255,.03);
}
.mp-brand-picker-grid {
  display: flex; flex-wrap: wrap; gap: .4rem;
  max-height: 42vh; overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: .55rem;
}
.mp-brand-chip {
  border: 1px solid var(--mp-line);
  background: rgba(255,255,255,.05);
  color: var(--mp-ink);
  border-radius: .65rem;
  padding: .45rem .7rem;
  font: inherit; font-weight: 650; font-size: .82rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.mp-brand-chip span {
  font-size: .7rem; color: var(--mp-muted); font-weight: 600;
}
.mp-brand-chip.is-on,
.mp-brand-chip:hover {
  border-color: rgba(155,198,90,.55);
  background: rgba(155,198,90,.12);
  color: var(--mp-accent);
}

.mp-cat-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-top: .45rem;
  width: 100%;
}
.mp-cat-btn {
  border: 0;
  border-radius: .5rem;
  padding: .5rem .4rem;
  font: inherit;
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
}
.mp-cat-btn-ghost {
  background: rgba(255,255,255,.08);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
}
.mp-cat-btn-wa {
  background: #25D366;
  color: #062816;
}
.mp-cat-cta { display: none; }

/* —— Página detalle celular (no modal) —— */
.mp-panel.is-phone-detail {
  padding-bottom: 6.5rem;
}

.mp-phone-page {
  animation: mpFadeIn .35s ease;
  padding-bottom: .5rem;
}
.mp-phone-page[hidden] { display: none !important; }
.mp-phone-page-top {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .85rem;
}
.mp-phone-page-hero {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.1rem;
  padding: 1rem .9rem 1.15rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(155,198,90,.22);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(155,198,90,.14), transparent 65%),
    linear-gradient(165deg, rgba(18,42,54,.96), rgba(10,24,34,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
@media (min-width: 720px) {
  .mp-phone-page-hero {
    grid-template-columns: minmax(160px, 220px) 1fr;
    align-items: center;
    gap: 1.35rem;
    padding: 1.25rem 1.35rem;
  }
}
.mp-phone-page-media {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: .75rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
}
.mp-phone-page-media img {
  width: min(160px, 42vw);
  height: min(160px, 42vw);
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.35));
}
@media (min-width: 720px) {
  .mp-phone-page-media img {
    width: 180px;
    height: 180px;
  }
}
.mp-phone-page-ph {
  width: min(140px, 40vw);
  height: min(140px, 40vw);
  border-radius: 1rem;
}
.mp-phone-page-intro .mp-detail-kicker {
  margin: 0 0 .15rem;
}
.mp-phone-page-intro .mp-detail-title {
  margin: 0 0 .75rem;
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
}
.mp-phone-page .mp-detail-score {
  text-align: left;
  margin-bottom: .65rem;
}
.mp-phone-page .mp-detail-chips {
  justify-content: flex-start;
}
.mp-phone-page .mp-detail-pair[hidden] { display: none !important; }
.mp-similar {
  margin: 0 0 1.15rem;
  padding: .85rem 0 .15rem;
  border-top: 1px solid var(--mp-line);
}
.mp-similar .mp-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .2rem;
}
.mp-similar .mp-rail-head h3 {
  margin: 0;
  font-family: Syne, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.mp-similar .mp-rail-lead {
  margin: 0 0 .65rem;
  font-size: .78rem;
  color: var(--mp-muted);
}
.mp-similar .mp-rail-track {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  padding: .15rem .1rem .55rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.mp-similar .mp-rail-card--phone {
  flex: 0 0 auto;
  width: 132px;
  scroll-snap-align: start;
  text-align: left;
  padding: .55rem .55rem .65rem;
  border-radius: .85rem;
  border: 1px solid var(--mp-line);
  background: rgba(0,0,0,.2);
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.mp-similar .mp-rail-card--phone:hover {
  border-color: rgba(155,198,90,.45);
  background: rgba(155,198,90,.08);
  transform: translateY(-2px);
}
.mp-similar .mp-rail-card--phone .mp-rail-photo,
.mp-similar .mp-rail-card--phone .mp-rail-ph {
  width: 100%;
  height: 88px;
  object-fit: contain;
  border-radius: .55rem;
  background: #fff;
  display: grid;
  place-items: center;
  margin-bottom: .45rem;
}
.mp-similar .mp-rail-card--phone strong {
  display: block;
  font-size: .78rem;
  line-height: 1.25;
  margin: 0 0 .2rem;
}
.mp-similar .mp-rail-card--phone span {
  font-size: .68rem;
  color: #c8ea8a;
  font-weight: 700;
}
.mp-phone-page-actions {
  position: sticky;
  bottom: calc(3.85rem + env(safe-area-inset-bottom));
  z-index: 8;
  margin: 1rem -0.15rem 0;
  padding: .75rem .85rem .85rem;
  border-radius: 1rem;
  border: 1px solid var(--mp-line);
  background: linear-gradient(180deg, rgba(12,30,40,.94), rgba(8,20,28,.98));
  backdrop-filter: blur(12px);
  box-shadow: 0 -12px 32px rgba(0,0,0,.28);
}
html.mp-in-phone-detail .mp-phone-page-actions--sticky {
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
}
html.mp-in-phone-detail #mpHubFooter,
html.mp-in-phone-detail .mp-hub-footer {
  display: none !important;
}
/* Evitar doble “Volver” bajo el navbar de app */
.mp-app .mp-panel[data-mp-mode="phones"] .mp-catalog-back,
.mp-app .mp-panel[data-mp-mode="accessories"] .mp-catalog-back {
  display: none;
}
@media (max-width: 719px) {
  .mp-app .mp-phones-pay {
    gap: .4rem;
  }
  .mp-app .mp-phones-pay-btn {
    padding: .55rem .65rem .6rem;
  }
  .mp-app .mp-phones-titleblock .mp-sub {
    display: none;
  }
}
.mp-phone-page-actions--inline {
  position: static;
  margin: 0 0 1rem;
  box-shadow: none;
  background:
    linear-gradient(165deg, rgba(18,42,54,.9), rgba(10,24,34,.96));
}
.mp-phone-page-actions--sticky .mp-detail-actions {
  display: none;
}
@media (max-width: 719px) {
  .mp-phone-page-actions--sticky .mp-detail-actions {
    display: grid;
  }
  .mp-phone-page-actions--inline {
    display: none;
  }
}
@media (min-width: 720px) {
  .mp-phone-page-actions--sticky {
    position: static;
    box-shadow: none;
    margin-top: 1.25rem;
  }
}
.mp-phone-sheet {
  display: block;
}
.mp-similar .mp-rail-head h2 {
  margin: 0;
  font-family: Syne, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.mp-panel.is-phone-detail {
  padding-bottom: calc(9.5rem + env(safe-area-inset-bottom));
}
.mp-phone-page .mp-detail-specs {
  margin-top: .25rem;
}
.mp-phone-page .mp-detail-specs .mp-detail-table-wrap {
  max-height: min(48vh, 360px);
}

.mp-phone-detail-dialog {
  max-width: min(560px, calc(100vw - 1rem));
  width: 100%;
  max-height: min(92vh, 780px);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--mp-line);
  border-radius: 1.1rem;
  background: #102633;
  color: var(--mp-ink);
  position: relative;
  flex-direction: column;
}
dialog.mp-phone-detail-dialog:not([open]) {
  display: none !important;
}
dialog.mp-phone-detail-dialog[open] {
  display: flex;
}
.mp-phone-detail-dialog::backdrop { background: rgba(0,0,0,.62); }
.mp-detail-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1.05rem 1.05rem .5rem;
  -webkit-overflow-scrolling: touch;
}
.mp-detail-kicker {
  margin: 0 2rem 0 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mp-muted);
}
.mp-detail-title {
  margin: .2rem 2rem .55rem 0;
  font-family: Syne, sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 700;
}
.mp-detail-close {
  position: absolute; top: .55rem; right: .65rem; z-index: 2;
  width: 2rem; height: 2rem;
  border: 1px solid var(--mp-line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--mp-muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.mp-detail-close:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.mp-detail-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .45rem;
  align-items: stretch;
  margin: .15rem 0 .75rem;
}
.mp-compare-vs {
  align-self: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-muted);
  opacity: .7;
}
.mp-compare-side {
  position: relative;
  text-align: center;
  padding: .65rem .45rem .55rem;
  border-radius: .75rem;
  border: 1px solid var(--mp-line);
  background: rgba(0,0,0,.18);
}
.mp-compare-side-tag {
  display: inline-block; margin-top: .3rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mp-muted);
}
.mp-compare-side.is-focus {
  border-color: rgba(155,198,90,.5);
  background: rgba(155,198,90,.1);
  box-shadow: inset 0 0 0 1px rgba(155,198,90,.12);
}
.mp-compare-side.is-focus .mp-compare-side-tag { color: #c8ea8a; }
.mp-compare-side img,
.mp-compare-ph {
  width: 72px; height: 72px;
  object-fit: contain;
  background: #fff;
  border-radius: .5rem;
  display: inline-block;
}
.mp-compare-ph {
  background: linear-gradient(145deg, #e8eef2, #c5d0d8);
}
.mp-compare-side strong {
  display: block;
  font-size: .78rem;
  margin-top: .4rem;
  line-height: 1.25;
  font-weight: 700;
}
.mp-detail-score {
  text-align: center;
  margin: 0 0 .55rem;
  padding: .55rem .75rem .65rem;
  border-radius: .85rem;
  background: rgba(155,198,90,.08);
  border: 1px solid rgba(155,198,90,.22);
}
.mp-detail-score .mp-compare-pct {
  margin: 0;
  font-size: clamp(1.85rem, 5vw, 2.35rem);
  line-height: 1;
}
.mp-detail-score .mp-compare-pct.is-down { color: #ff8f8f; }
.mp-detail-score .mp-sub {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: rgba(255,255,255,.72);
}
.mp-detail-chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
  justify-content: center; margin: 0 0 .75rem;
}
.mp-detail-chip {
  font-size: .74rem; font-weight: 700;
  border-radius: .5rem; padding: .28rem .55rem;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.06);
}
.mp-detail-chip.is-win {
  background: rgba(155,198,90,.2);
  color: #d4f0a0;
  border-color: rgba(155,198,90,.28);
}
.mp-detail-chip.is-lose {
  background: rgba(255,120,120,.12);
  color: #ffb0b0;
  border-color: rgba(255,120,120,.2);
}
.mp-detail-options {
  display: grid;
  gap: .55rem;
  margin: 0 0 .85rem;
  padding: .65rem .7rem;
  border-radius: .75rem;
  border: 1px solid var(--mp-line);
  background: rgba(0,0,0,.14);
}
.mp-detail-options[hidden] { display: none !important; }
.mp-detail-opt-group[hidden] { display: none !important; }
.mp-detail-opt-label {
  display: block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mp-muted);
  margin-bottom: .35rem;
}
.mp-detail-opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.mp-detail-opt {
  font-size: .76rem;
  font-weight: 700;
  padding: .28rem .55rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
}
.mp-detail-opt.is-color {
  border-color: rgba(155,198,90,.28);
  background: rgba(155,198,90,.1);
  color: #e8f5c8;
}
.mp-detail-specs {
  margin: 0 0 .35rem;
  border: 1px solid var(--mp-line);
  border-radius: .75rem;
  overflow: hidden;
  background: rgba(0,0,0,.12);
}
.mp-detail-specs > summary {
  cursor: pointer;
  list-style: none;
  padding: .65rem .75rem;
  font-size: .8rem;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  user-select: none;
}
.mp-detail-specs > summary::-webkit-details-marker { display: none; }
.mp-detail-specs > summary::after {
  content: '▾';
  float: right;
  color: var(--mp-muted);
  font-weight: 400;
}
.mp-detail-specs[open] > summary::after { content: '▴'; }
.mp-detail-specs .mp-detail-table-wrap {
  border: 0;
  border-top: 1px solid var(--mp-line);
  border-radius: 0;
  max-height: min(36vh, 280px);
  margin: 0;
}
.mp-detail-table-wrap {
  overflow: auto;
  max-height: 42vh;
  border: 1px solid var(--mp-line);
  border-radius: .75rem;
  margin-bottom: .85rem;
}
.mp-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.mp-detail-table th,
.mp-detail-table td {
  padding: .55rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  vertical-align: top;
}
.mp-detail-table th {
  position: sticky; top: 0;
  background: #0d222e;
  color: var(--mp-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  z-index: 1;
}
.mp-detail-table th:nth-child(2),
.mp-detail-table th:nth-child(3),
.mp-detail-table td:nth-child(2),
.mp-detail-table td:nth-child(3) { width: 32%; }
.mp-detail-table td:first-child {
  color: var(--mp-muted);
  font-weight: 600;
}
.mp-detail-table td.is-best {
  color: #c8ea8a;
  font-weight: 700;
}
.mp-detail-table tr.is-other td:nth-child(3).is-best,
.mp-detail-table tr.is-mine td:nth-child(2).is-best {
  background: rgba(155,198,90,.08);
}
.mp-delta {
  display: block;
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  margin-top: .15rem;
}
.mp-delta.is-up { color: #9BC65A; }
.mp-delta.is-down { color: #ff8f8f; }
.mp-detail-footer {
  flex: 0 0 auto;
  padding: .7rem 1.05rem calc(.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mp-line);
  background: linear-gradient(180deg, rgba(16,38,51,.92), #0c1f2a);
  box-shadow: 0 -10px 28px rgba(0,0,0,.25);
}
.mp-detail-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: .5rem;
  margin: 0;
}
.mp-detail-actions.is-triple {
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .mp-detail-actions.is-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mp-detail-actions .cf-btn {
  min-height: 2.75rem;
  font-size: .92rem;
}
.mp-tradein-btn {
  background: rgba(155,198,90,.16) !important;
  border: 1px solid rgba(155,198,90,.45) !important;
  color: #d7f0a8 !important;
  font-weight: 800 !important;
}
.mp-tradein-btn:hover,
.mp-tradein-btn:focus-visible {
  background: rgba(155,198,90,.24) !important;
  outline: none;
}
.mp-tradein-btn[hidden] { display: none !important; }
.mp-detail-actions-full {
  grid-column: 1 / -1;
}
.mp-detail-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .45rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 650;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .55rem;
  padding: .4rem .7rem;
  cursor: pointer;
  text-decoration: none;
}
.mp-detail-dismiss:hover {
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.mp-credit-btn {
  background: linear-gradient(135deg, #c8ea8a, #9BC65A) !important;
  border-color: transparent !important;
  color: #0F2430 !important;
  font-weight: 800 !important;
}
.mp-credit-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.25);
}
.mp-wa-btn { background: #25D366 !important; border-color: transparent !important; color: #062816 !important; font-weight: 800 !important; }
.mp-detail-credit-hint {
  margin: .4rem 0 0;
  font-size: .7rem;
  color: var(--mp-muted);
  text-align: center;
  line-height: 1.35;
}
.mp-detail-credit-hint[hidden] { display: none !important; }
.mp-detail-credit-hint.is-warn { color: #ffb4a8; }

@media (max-width: 420px) {
  .mp-detail-pair { gap: .25rem; }
  .mp-compare-side img,
  .mp-compare-ph { width: 58px; height: 58px; }
  .mp-compare-side strong { font-size: .72rem; }
  .mp-detail-actions {
    grid-template-columns: 1fr;
  }
}

.mp-wa-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(8,18,26,.96);
  border-top: 1px solid rgba(37,211,102,.35);
  backdrop-filter: blur(10px);
}
.mp-wa-footer[hidden] { display: none !important; }
.mp-wa-footer-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: .75rem;
  padding: .85rem 1rem;
  font: inherit; font-weight: 800; font-size: 1rem;
  background: #25D366; color: #062816;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37,211,102,.25);
}
.mp-wa-footer-txt {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(70vw, 320px);
}
.mp-wa-footer-txt strong { font-weight: 800; }
.mp-cat-card.is-selected {
  border-color: rgba(37,211,102,.65);
  box-shadow: 0 0 0 1px rgba(37,211,102,.35), 0 10px 28px rgba(0,0,0,.25);
  background: rgba(37,211,102,.08);
}
.mp-cat-card {
  cursor: pointer;
}
.mp.has-wa-footer { padding-bottom: 5.5rem; }
.mp.has-wa-footer .mp-install-float { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }

.mp-compare-dialog { max-width: 420px; }
.mp-compare-pct {
  font-family: Syne, sans-serif; font-size: 2rem; font-weight: 700;
  color: var(--mp-accent); text-align: center; margin: .5rem 0 .75rem;
}
.mp-compare-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .75rem;
}
.mp-compare-pair .mp-compare-side {
  text-align: center; padding: .55rem; border-radius: .65rem;
  border: 1px solid var(--mp-line); background: var(--mp-panel);
}
.mp-compare-pair .mp-compare-side img {
  width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: .45rem;
}
.mp-compare-pair .mp-compare-side strong { display: block; font-size: .78rem; margin-top: .35rem; line-height: 1.25; }
.mp-compare-wins {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .85rem;
}
.mp-compare-wins li { color: var(--mp-muted); }
.mp-compare-wins li.is-win { color: #9BC65A; }
.mp-compare-wins li.is-lose { color: #ff8f8f; }
.mp-cat-img-skel {
  width: 100%; height: 88px; border-radius: .5rem;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: mpSkel 1.2s ease infinite;
}
@keyframes mpSkel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.mp-cat-pct { font-size: .72rem; font-weight: 700; color: var(--mp-accent); }

/* Filtros de marca (fuera de .mp-chips; sin esto salen como botones nativos blancos) */
.mp-catalog-filters {
  display: flex;
  gap: .4rem;
  margin: 0 0 .85rem;
}
.mp-catalog-filters button {
  flex: 1;
  border: 1px solid var(--mp-line);
  background: rgba(255,255,255,.04);
  color: var(--mp-muted);
  padding: .5rem .75rem;
  border-radius: .7rem;
  cursor: pointer;
  font-weight: 650;
  font-size: .86rem;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.mp-catalog-filters button.is-on {
  background: linear-gradient(135deg, #c8ea8a, #9BC65A);
  border-color: transparent;
  color: #0F2430;
}

.mp-catalog-bar {
  display: flex;
  gap: .45rem;
  align-items: stretch;
  margin-bottom: .65rem;
}
.mp-catalog-bar input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--mp-line);
  background: rgba(0,0,0,.25);
  color: var(--mp-ink);
  border-radius: .7rem;
  padding: .55rem .75rem;
  font: inherit;
}
.mp-catalog-bar .cf-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.mp-cat-card strong {
  font-size: .9rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-cat-cta {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  align-self: stretch;
  padding: .45rem .55rem;
  margin-top: .35rem;
}

@media (max-width: 640px) {
  .mp-topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .65rem;
  }
  .mp-chips {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .3rem;
    padding-bottom: 2px;
  }
  .mp-chips::-webkit-scrollbar { display: none; }
  .mp-chips button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: .4rem .7rem;
    font-size: .8rem;
  }
  .mp-install-fab {
    flex-shrink: 0;
    padding: .42rem .5rem;
    border-radius: .65rem;
  }
  .mp-install-fab span { display: none; }

  .mp-catalog-head h2 {
    font-size: 1.15rem;
    margin-bottom: .15rem;
  }
  .mp-catalog-head .mp-sub {
    font-size: .8rem;
    margin-bottom: .65rem;
  }

  /* Una columna en móvil: evita cards aplastadas */
  .mp-catalog-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .mp-cat-card {
    padding: .85rem;
    gap: .4rem;
  }
  .mp-cat-img,
  .mp-cat-img-skel {
    height: 150px;
    margin: 0 0 .15rem;
    background: #fff;
    border-radius: .6rem;
  }
  .mp-cat-badge {
    top: .65rem;
    right: .65rem;
  }
  .mp-cat-card strong {
    font-size: 1rem;
    -webkit-line-clamp: 2;
  }
  .mp-cat-cta {
    width: 100%;
    text-align: center;
    padding: .55rem .75rem;
    border-radius: .55rem;
    font-size: .88rem;
  }

  .mp-panel[data-mp-mode="phones"],
  .mp-panel[data-mp-mode="accessories"] {
    padding-bottom: 1.25rem;
  }
}



/* —— Phones catalog redesign —— */
.mp-panel[data-mp-mode="phones"] .mp-phones-head {
  margin-bottom: .85rem;
}
.mp-panel[data-mp-mode="phones"] .mp-phones-head .mp-catalog-back {
  margin-bottom: .55rem;
}
.mp-phones-titleblock {
  display: grid;
  gap: .2rem;
}
.mp-phones-kicker {
  margin: 0;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-muted);
}
.mp-panel[data-mp-mode="phones"] .mp-phones-head h2 {
  margin: 0;
  font-family: Syne, sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.mp-panel[data-mp-mode="phones"] .mp-phones-head .mp-sub {
  margin: .15rem 0 0;
  font-size: .86rem;
  line-height: 1.35;
  max-width: 36rem;
}

.mp-phones-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin: 0 0 .85rem;
}
.mp-phones-pay-btn {
  display: grid;
  gap: .15rem;
  text-align: left;
  border: 1px solid var(--mp-line);
  background: rgba(0,0,0,.22);
  color: var(--mp-ink);
  border-radius: 1rem;
  padding: .7rem .8rem .75rem;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, background .15s, transform .15s;
}
.mp-phones-pay-btn:hover {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
}
.mp-phones-pay-label {
  font-weight: 800;
  font-size: .95rem;
  font-family: Syne, sans-serif;
}
.mp-phones-pay-hint {
  font-size: .72rem;
  color: var(--mp-muted);
  line-height: 1.25;
}
.mp-phones-pay-btn.is-on {
  border-color: rgba(155,198,90,.55);
  background: linear-gradient(145deg, rgba(155,198,90,.18), rgba(155,198,90,.06));
  box-shadow: inset 0 0 0 1px rgba(155,198,90,.12);
}
.mp-phones-pay-btn.is-on .mp-phones-pay-label { color: #d7f0a8; }
.mp-phones-pay-btn--credit.is-on {
  border-color: rgba(200,234,138,.55);
  background: linear-gradient(145deg, rgba(200,234,138,.2), rgba(15,36,48,.4));
}

.mp-phones-credit-panel {
  margin: 0 0 .9rem;
  padding: .8rem .85rem .85rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(155,198,90,.28);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(155,198,90,.14), transparent 55%),
    linear-gradient(165deg, rgba(18,42,54,.96), rgba(10,24,34,.98));
}
.mp-phones-credit-panel[hidden] { display: none !important; }
.mp-phones-credit-banner {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .7rem;
}
.mp-phones-credit-banner-ico {
  flex-shrink: 0;
  width: 2.15rem; height: 2.15rem;
  display: grid; place-items: center;
  border-radius: .65rem;
  background: rgba(155,198,90,.16);
  color: #c8ea8a;
}
.mp-phones-credit-banner-txt {
  min-width: 0;
  display: grid;
  gap: .1rem;
}
.mp-phones-credit-banner-txt strong {
  font-size: .92rem;
  font-family: Syne, sans-serif;
}
.mp-phones-credit-banner-txt span {
  font-size: .74rem;
  color: var(--mp-muted);
  line-height: 1.3;
}
.mp-phones-age {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.mp-phones-age-btn {
  display: grid;
  gap: .12rem;
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: inherit;
  border-radius: .8rem;
  padding: .55rem .65rem;
  cursor: pointer;
  font: inherit;
}
.mp-phones-age-btn strong {
  font-size: .82rem;
  font-weight: 800;
}
.mp-phones-age-btn span {
  font-size: .68rem;
  color: var(--mp-muted);
  line-height: 1.25;
}
.mp-phones-age-btn.is-on {
  border-color: rgba(155,198,90,.5);
  background: rgba(155,198,90,.16);
}
.mp-phones-age-btn.is-on strong { color: #d7f0a8; }
.mp-phones-credit-note {
  margin: .55rem 0 0;
  font-size: .72rem;
  color: rgba(255,255,255,.62);
  line-height: 1.35;
}

.mp-phones-toolbar {
  display: grid;
  gap: .55rem;
  margin: 0 0 .65rem;
}
.mp-phones-search {
  display: flex;
  gap: .4rem;
  align-items: stretch;
  margin: 0;
}
.mp-phones-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .75rem;
  border: 1px solid var(--mp-line);
  border-radius: .8rem;
  background: rgba(0,0,0,.28);
  color: var(--mp-muted);
  transition: border-color .15s, box-shadow .15s;
}
.mp-phones-search-field:focus-within {
  border-color: rgba(155,198,90,.55);
  box-shadow: 0 0 0 3px rgba(155,198,90,.12);
  color: var(--mp-accent);
}
.mp-phones-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--mp-ink);
  padding: .55rem 0;
  font: inherit;
  font-size: .9rem;
  outline: none;
}
.mp-phones-search-go {
  flex-shrink: 0;
  border: 0;
  border-radius: .8rem;
  padding: 0 .95rem;
  font: inherit;
  font-weight: 800;
  font-size: .84rem;
  cursor: pointer;
  background: linear-gradient(135deg, #c8ea8a, #9BC65A);
  color: #0F2430;
}
.mp-phones-search .cf-btn {
  flex-shrink: 0;
  border-radius: .85rem;
  padding-inline: 1.1rem;
}
.mp-phones-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  margin: 0;
  padding: .25rem;
  border-radius: .85rem;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--mp-line);
}
.mp-phones-seg button {
  border: 0;
  background: transparent;
  color: var(--mp-muted);
  padding: .42rem .65rem;
  border-radius: .65rem;
  cursor: pointer;
  font-weight: 700;
  font-size: .8rem;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.mp-phones-seg button.is-on {
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: none;
}
.mp-panel.is-credit-catalog .mp-phones-seg button.is-on {
  background: rgba(155,198,90,.22);
  color: #e8f5c8;
}
.mp-cat-badge.is-credit {
  background: rgba(15,36,48,.88) !important;
  color: #d7f0a8 !important;
  border: 1px solid rgba(155,198,90,.45);
}
.mp-ico-btn-credit {
  background: linear-gradient(135deg, #c8ea8a, #9BC65A) !important;
  color: #0F2430 !important;
  border-color: transparent !important;
}
.mp-cat-card.is-credit-card {
  border-color: rgba(155,198,90,.22);
}


/* Hide marketing chrome on marketplace */
body.cf-public:has(#marketplaceApp) .cf-mkt-nav,
body.cf-public:has(#marketplaceApp) .cf-footer {
  display: none !important;
}
body.cf-public:has(#marketplaceApp) {
  background: #0F2430;
}


/* Hide marketing chrome on marketplace */
body.cf-marketplace .cf-mkt-nav,
body.cf-marketplace .cf-footer,
body.cf-public:has(#marketplaceApp) .cf-mkt-nav,
body.cf-public:has(#marketplaceApp) .cf-footer {
  display: none !important;
}
body.cf-marketplace,
body.cf-public:has(#marketplaceApp) {
  background: #0F2430;
  min-height: 100dvh;
}
.mp.is-hub .mp-app { display: none !important; }


/* —— Hub sticky navbar (full-bleed, flush top) —— */
.mp-hub-navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  z-index: 60;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(15,36,48,.99) 55%, rgba(15,36,48,.94) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(155,198,90,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.mp-hub-navbar-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: .5rem clamp(.85rem, 3vw, 1.75rem);
  box-sizing: border-box;
}
.mp-hub-navbar-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: nowrap;
  min-height: 2.65rem;
  width: 100%;
}
.mp-hub-menu {
  order: 0;
}
.mp-hub-navbar-brand {
  order: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.mp-hub-navbar-links--desk {
  order: 2;
}
.mp-hub-equipo-cluster {
  order: 3;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  max-width: min(58vw, 14.5rem);
}
.mp-hub-equipo {
  margin-left: 0;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.mp-hub-navbar-brand img {
  display: block;
  width: auto;
  height: 28px;
}
/* Desktop links live in the sticky bar; mobile keeps section nav under intro */
/* Desktop-only links: hide on mobile (must beat .mp-hub-navbar-links { display:grid }) */
.mp-hub-navbar-links.mp-hub-navbar-links--desk {
  display: none !important;
}
.mp-hub-section-nav {
  margin: 0 0 .55rem;
}
.mp-hub-navbar-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  width: 100%;
}
.mp-hub-navbar-links::-webkit-scrollbar { display: none; }
.mp-hub-navbar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(232,240,244,.9);
  border-radius: 999px;
  padding: .52rem .4rem;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: clamp(.68rem, 2.8vw, .78rem);
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  line-height: 1.15;
  transition: border-color .15s, background .15s, color .15s;
}
.mp-hub-navbar-link:hover,
.mp-hub-navbar-link:focus-visible {
  border-color: rgba(155,198,90,.45);
  color: #e8f6c8;
  outline: none;
}
.mp-hub-navbar-link.is-on {
  border-color: rgba(155,198,90,.5);
  background: rgba(155,198,90,.14);
  color: #d7f0a8;
}
.mp-hub-navbar-link--credit {
  border-color: rgba(155,198,90,.4);
  color: #c8ea8a;
}
.mp-hub-equipo {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  max-width: 100%;
  border: 1px solid rgba(155,198,90,.32);
  background: rgba(8,18,26,.88);
  color: #e8f0f4;
  border-radius: .85rem;
  padding: .28rem .5rem .28rem .34rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.mp-hub-equipo:hover,
.mp-hub-equipo:focus-visible {
  border-color: rgba(155,198,90,.58);
  background: rgba(155,198,90,.1);
  outline: none;
}
.mp-hub-share {
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .65rem;
  border: 1px solid rgba(155,198,90,.32);
  background: rgba(8,18,26,.88);
  color: #9BC65A;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mp-hub-share:hover,
.mp-hub-share:focus-visible {
  border-color: rgba(155,198,90,.58);
  background: rgba(155,198,90,.12);
  color: #d7f0a8;
  outline: none;
}
.mp-hub-share-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: calc(100vw - 2rem);
}
.mp-hub-share-dialog::backdrop {
  background: rgba(4, 12, 18, .62);
  backdrop-filter: blur(3px);
}
.mp-hub-share-dialog-card {
  width: min(20rem, 92vw);
  margin: auto;
  border-radius: 1rem;
  border: 1px solid rgba(155,198,90,.22);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(155,198,90,.12), transparent 55%),
    #102633;
  box-shadow: 0 18px 48px rgba(0,0,0,.4);
  padding: 1rem 1rem 1.15rem;
  color: #e8f0f4;
  text-align: center;
}
.mp-hub-share-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.mp-hub-share-dialog-head h3 {
  margin: 0;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 800;
}
.mp-hub-share-dialog-x {
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #e8f0f4;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.mp-hub-share-dialog-lead {
  margin: 0 0 .85rem;
  font-size: .82rem;
  color: rgba(160,180,195,.9);
  line-height: 1.4;
}
.mp-hub-share-qr-wrap {
  display: grid;
  place-items: center;
  padding: .75rem;
  border-radius: .85rem;
  background: #fff;
  margin: 0 auto .75rem;
  width: fit-content;
}
.mp-hub-share-qr {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}
.mp-hub-share-url {
  margin: 0 0 .85rem;
  font-size: .72rem;
  color: rgba(200,214,224,.85);
  word-break: break-all;
  line-height: 1.35;
}
.mp-hub-share-dialog-card .cf-btn {
  width: 100%;
}
.mp-hub-equipo-ico {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: .45rem;
  display: grid;
  place-items: center;
  background: rgba(155,198,90,.12);
  color: #9BC65A;
}
.mp-hub-equipo-txt {
  min-width: 0;
  display: grid;
  gap: .02rem;
  line-height: 1.12;
}
.mp-hub-equipo-kicker {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(160,180,195,.88);
}
.mp-hub-equipo-name {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  color: #f4f8fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8.5rem;
}
.mp-hub-navbar .mp-hub-menu {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .65rem;
  border: 1px solid var(--mp-line);
  background: rgba(255,255,255,.04);
  color: var(--mp-ink);
  font-size: .95rem;
  cursor: pointer;
}
/* —— Drawer lateral (hamburguesa) —— */
.mp-hub-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4, 12, 18, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.mp-hub-drawer-backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
.mp-hub-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 85;
  width: min(88vw, 20rem);
  height: 100dvh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(155,198,90,.2);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(155,198,90,.14), transparent 55%),
    linear-gradient(180deg, #132a38 0%, #0c1c28 48%, #09151e 100%);
  box-shadow: 16px 0 48px rgba(0,0,0,.4);
  transform: translateX(-105%);
  transition: transform .26s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mp-hub-drawer:not([hidden]) {
  transform: translateX(0);
}
.mp-hub-drawer[hidden] {
  display: flex !important;
  transform: translateX(-105%);
  pointer-events: none;
}
.mp-hub-drawer-backdrop[hidden] {
  display: block !important;
  opacity: 0;
  pointer-events: none;
}
.mp-hub-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1rem .95rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(155,198,90,.06), transparent);
}
.mp-hub-drawer-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.mp-hub-drawer-brand img {
  width: 2.15rem;
  height: 2.15rem;
  flex-shrink: 0;
  border-radius: .55rem;
  background: rgba(8,18,26,.55);
  box-shadow: 0 0 0 1px rgba(155,198,90,.25);
}
.mp-hub-drawer-brand-txt {
  display: grid;
  gap: .08rem;
  line-height: 1.15;
  min-width: 0;
}
.mp-hub-drawer-brand-txt strong {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #f4f8fc;
}
.mp-hub-drawer-brand-txt span {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(155,198,90,.9);
}
.mp-hub-drawer-close {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(232,240,244,.88);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mp-hub-drawer-close:hover,
.mp-hub-drawer-close:focus-visible {
  border-color: rgba(155,198,90,.45);
  background: rgba(155,198,90,.1);
  color: #e8f6c8;
  outline: none;
}
.mp-hub-drawer-nav {
  display: grid;
  gap: .35rem;
  padding: .85rem .85rem .5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.mp-hub-drawer-label {
  margin: .55rem .35rem .2rem;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(160,180,195,.72);
}
.mp-hub-drawer-group {
  display: grid;
  gap: .28rem;
  padding: .2rem;
  border-radius: .9rem;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.06);
}
.mp-hub-drawer-group--soft {
  background: transparent;
  border-color: transparent;
  gap: .1rem;
  padding: 0;
}
.mp-hub-drawer-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(232,240,244,.94);
  text-decoration: none;
  font: inherit;
  padding: .62rem .65rem;
  border-radius: .7rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.mp-hub-drawer-link:hover,
.mp-hub-drawer-link:focus-visible {
  background: rgba(155,198,90,.12);
  color: #e8f6c8;
  outline: none;
}
.mp-hub-drawer-link--accent {
  border: 1px solid rgba(155,198,90,.28);
  background: rgba(155,198,90,.08);
}
.mp-hub-drawer-link--accent:hover,
.mp-hub-drawer-link--accent:focus-visible {
  border-color: rgba(155,198,90,.5);
  background: rgba(155,198,90,.16);
}
.mp-hub-drawer-ico {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  display: grid;
  place-items: center;
  background: rgba(155,198,90,.1);
  color: #9BC65A;
  border: 1px solid rgba(155,198,90,.18);
}
.mp-hub-drawer-link-txt {
  min-width: 0;
  display: grid;
  gap: .1rem;
  line-height: 1.15;
}
.mp-hub-drawer-link-txt strong {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: inherit;
}
.mp-hub-drawer-link-txt em {
  font-style: normal;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .7rem;
  font-weight: 500;
  color: rgba(160,180,195,.82);
}
.mp-hub-drawer-link--soft {
  padding: .5rem .7rem;
  color: rgba(200,214,224,.82);
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .86rem;
  font-weight: 600;
}
.mp-hub-drawer-link--soft:hover,
.mp-hub-drawer-link--soft:focus-visible {
  color: #d7f0a8;
  background: rgba(255,255,255,.04);
}
.mp-hub-drawer-foot {
  padding: .85rem 1rem calc(.95rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.mp-hub-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.7rem;
  border-radius: .75rem;
  background: #9BC65A;
  color: #0F2430;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .01em;
  transition: filter .15s, transform .15s;
}
.mp-hub-drawer-cta:hover,
.mp-hub-drawer-cta:focus-visible {
  filter: brightness(1.06);
  outline: none;
}
.mp-hub-drawer-cta:active {
  transform: translateY(1px);
}
body.mp-hub-menu-open {
  overflow: hidden;
}
.mp-hub-menu-action {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--mp-ink);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  padding: .35rem 0;
  cursor: pointer;
}
.mp-hub-menu-action:hover { color: var(--mp-accent); }

.mp-hub-topbar {
  display: none !important;
}
.mp-hub-topbar .mp-hub-logo { margin: 0; width: 110px; height: auto; }
.mp-hub-menu {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1px solid var(--mp-line); background: rgba(255,255,255,.04);
  color: var(--mp-ink); font-size: 1.1rem; cursor: pointer;
}
.mp-hub-menu-panel {
  display: none !important;
}
.mp-hub-intro .mp-hub-logo { display: none; }
.mp-hub-hero-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.15rem auto .7rem;
  width: min(78vw, 280px);
}
.mp-hub-hero-mark-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.28));
}
.mp-hub-c-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: mpHubCSpin 2.6s linear infinite;
}
@keyframes mpHubCSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hub-c-spin { animation: none; }
}
.mp-hub-brandline {
  text-align: center;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(.9rem, 3.1vw, 1.05rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin: .1rem 0 .35rem;
  color: rgba(244, 248, 252, 0.88);
}
.mp-hub-rail-block,
.mp-hub-repair,
#mpHubSectionPhones,
#mpHubSectionRepair,
#mpHubSectionAcc {
  scroll-margin-top: 4.5rem;
}
@media (min-width: 720px) {
  .mp-hub-navbar-link {
    padding: .55rem .7rem;
    font-size: .8rem;
  }
  .mp-hub-equipo-cluster { max-width: 18rem; }
  .mp-hub-equipo { max-width: none; }
  .mp-hub-equipo-name { max-width: 11rem; font-size: .82rem; }
  .mp-hub-navbar-brand img { height: 32px; }
  .mp-hub-section-nav { margin-bottom: .65rem; }
}
@media (min-width: 900px) {
  .mp-hub-navbar-shell {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: .65rem clamp(1.25rem, 3.5vw, 2.5rem);
  }
  .mp-hub-navbar-bar {
    min-height: 3.1rem;
    gap: .75rem;
  }
  .mp-hub-navbar-brand { order: 0; }
  .mp-hub-navbar-links--desk { order: 1; }
  .mp-hub-equipo-cluster { order: 2; }
  .mp-hub-menu { order: 3; }
  .mp-hub-navbar-brand img { height: 36px; }
  .mp-hub-navbar-links.mp-hub-navbar-links--desk {
    display: flex !important;
    flex: 1 1 auto;
    grid-template-columns: none;
    width: auto;
    max-width: none;
    justify-content: center;
    gap: .45rem;
    margin: 0 .5rem;
  }
  .mp-hub-navbar-links--desk .mp-hub-navbar-link {
    flex: 0 0 auto;
    padding: .5rem .95rem;
    font-size: .82rem;
  }
  .mp-hub-section-nav {
    display: none;
  }
  .mp-hub-equipo {
    max-width: 18rem;
    margin-left: 0;
  }
  .mp-hub-equipo-name { max-width: 14rem; }
  .mp-hub-rail-block,
  .mp-hub-repair,
  #mpHubSectionPhones,
  #mpHubSectionRepair,
  #mpHubSectionAcc {
    scroll-margin-top: 5rem;
  }
}

.mp-hub-geo {
  text-align: center; color: var(--mp-accent); font-size: .82rem; font-weight: 600;
  margin: 0;
}
.mp-hub-geo[data-state="loading"] { opacity: .9; }
.mp-hub-jump {
  /* 2×2 grid: ver bloque “Pills: 2×2” más abajo */
  margin: 0 0 1.1rem;
}
.mp-hub-jump-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  color: var(--mp-ink);
  border-radius: 999px;
  padding: .5rem .9rem;
  font-size: .8rem; font-weight: 700;
  text-decoration: none;
}
.mp-hub-jump-btn.is-on {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
}
.mp-hub-jump-btn--credit {
  border-color: rgba(155,198,90,.55);
  color: #d7f0a8;
}
.mp-hub-repair-morefails {
  display: block; margin: .65rem auto .15rem;
  border: 0; background: transparent; color: var(--mp-accent);
  font-weight: 700; font-size: .88rem; cursor: pointer; text-decoration: none;
}
.mp-hub-repair-morefails:hover { text-decoration: underline; }
.mp-hub-repair-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .65rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .75rem;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mp-hub-repair-all:hover,
.mp-hub-repair-all:focus-visible {
  border-color: rgba(155,198,90,.45);
  color: #d7f0a8;
  outline: none;
}
.mp-hub-footer {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.mp-hub-footer .mp-hub-foot-btn {
  font-size: .68rem;
  gap: .2rem;
  padding: .45rem .15rem;
}
.mp-hub-footer .mp-hub-foot-btn svg { width: 18px; height: 18px; }
.mp-hub-install {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: 1.1rem 0 1.5rem; padding: .85rem 1rem;
  border-radius: 1rem; border: 1px solid rgba(155,198,90,.28);
  background:
    linear-gradient(135deg, rgba(155,198,90,.1), transparent 55%),
    rgba(8,18,26,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mp-hub-install-txt { margin: 0; flex: 1; min-width: 0; }
.mp-hub-install-txt strong {
  display: block;
  font-family: Syne, sans-serif;
  font-size: .92rem;
  color: #f4f8fc;
}
.mp-hub-install-txt > p {
  margin: .15rem 0 0;
  font-size: .76rem;
  color: var(--mp-muted);
  line-height: 1.3;
}
.mp-hub-install-platforms {
  margin-top: .55rem;
}
.mp-hub-install-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.mp-hub-install-icon {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .22rem .48rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #d7f0a8;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
}
.mp-hub-install-icon svg {
  flex: 0 0 auto;
  display: block;
  opacity: .95;
}
.mp-hub-install-icon span { white-space: nowrap; }
.mp-hub-install-avail {
  margin: .4rem 0 0;
  font-size: .68rem;
  line-height: 1.35;
  color: rgba(200, 220, 230, .72);
  max-width: 22rem;
}
.mp-hub-install .cf-btn {
  flex: 0 0 auto;
  align-self: center;
}
@media (max-width: 420px) {
  .mp-hub-install {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .mp-hub-install .cf-btn {
    width: 100%;
  }
}

/* —— Accessories catalog —— */
.mp-panel[data-mp-mode="accessories"] {
  max-width: 720px;
  margin: 0 auto;
  padding: .35rem .15rem 1.5rem;
}
.mp-panel[data-mp-mode="accessories"] .mp-phones-head {
  margin-bottom: .85rem;
}
.mp-panel[data-mp-mode="accessories"] .mp-phones-head .mp-catalog-back {
  margin-bottom: .55rem;
}
.mp-panel[data-mp-mode="accessories"] .mp-phones-head h2 {
  margin: 0;
  font-family: Syne, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.mp-panel[data-mp-mode="accessories"] .mp-phones-head .mp-sub {
  margin: .25rem 0 0;
  font-size: .82rem;
}

.mp-acc-device {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .85rem;
  padding: .7rem .85rem;
  border-radius: 1rem;
  border: 1px solid var(--mp-line);
  background: linear-gradient(135deg, rgba(155,198,90,.1), rgba(255,255,255,.03));
}
.mp-acc-device[hidden] { display: none !important; }
.mp-acc-device-media {
  width: 48px; height: 48px; border-radius: .75rem;
  background: rgba(0,0,0,.25);
  display: grid; place-items: center;
  overflow: hidden; flex-shrink: 0;
}
.mp-acc-device-media img {
  width: 100%; height: 100%; object-fit: contain;
}
.mp-acc-device-txt { min-width: 0; flex: 1; }
.mp-acc-device-kicker {
  display: block;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-accent);
}
.mp-acc-device-txt strong {
  display: block;
  font-family: Syne, sans-serif;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-acc-toolbar { margin-bottom: .65rem; }
.mp-acc-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: 0 0 1rem;
}
.mp-acc-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 1px solid var(--mp-line);
  border-radius: 1rem;
  padding: .85rem .9rem;
  background: rgba(255,255,255,.035);
  transition: border-color .15s, background .15s, transform .12s;
}
.mp-acc-cat:hover,
.mp-acc-cat:focus-visible {
  border-color: rgba(155,198,90,.5);
  background: rgba(155,198,90,.08);
  outline: none;
  transform: translateY(-1px);
}
.mp-acc-cat.is-on {
  border-color: rgba(155,198,90,.65);
  background: rgba(155,198,90,.14);
  box-shadow: 0 0 0 1px rgba(155,198,90,.25);
}
.mp-acc-cat .mp-acc-ico,
.mp-acc-cat .mp-rail-ico {
  margin: 0 0 .15rem;
}
.mp-acc-cat strong {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: 0;
}
.mp-acc-cat .mp-acc-hint {
  font-size: .75rem;
  color: var(--mp-muted);
  line-height: 1.35;
}
.mp-acc-note-field {
  margin: .25rem 0 .35rem;
}
.mp-acc-note-field textarea {
  width: 100%;
  min-height: 5.2rem;
  resize: vertical;
}
.mp-acc-note-hint {
  margin: 0 0 .85rem;
}
.mp-acc-note-nav {
  margin: 0 0 1.25rem;
}
@media (min-width: 720px) {
  .mp-acc-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mp-acc-kinds {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: 0 0 .55rem;
  margin: 0 0 .35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mp-acc-kinds::-webkit-scrollbar { display: none; }

.mp-phones-chiprow {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .15rem 0 .45rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mp-phones-chiprow::-webkit-scrollbar { display: none; }
.mp-pchip {
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: .42rem .85rem;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.mp-pchip:hover,
.mp-pchip:focus-visible {
  border-color: rgba(155,198,90,.45);
  color: #d7f0a8;
  outline: none;
}
.mp-pchip.is-on {
  background: linear-gradient(135deg, #c8ea8a, #9BC65A);
  border-color: transparent;
  color: #0F2430;
}
.mp-pchip-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,.12);
  margin: .15rem .1rem;
  flex-shrink: 0;
}
.mp-phones-meta {
  margin: 0 0 .65rem;
  font-size: .78rem;
  color: var(--mp-muted);
}

.mp-acc-grid {
  display: grid;
  gap: .65rem;
}
.mp-acc-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 1px solid var(--mp-line);
  border-radius: 1rem;
  padding: .75rem;
  background: rgba(255,255,255,.035);
  transition: border-color .15s, background .15s, transform .12s;
}
.mp-acc-card:hover,
.mp-acc-card:focus-visible {
  border-color: rgba(155,198,90,.5);
  background: rgba(155,198,90,.08);
  outline: none;
  transform: translateY(-1px);
}
.mp-acc-media {
  width: 64px; height: 64px;
  border-radius: .85rem;
  background: rgba(0,0,0,.28);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--mp-accent);
}
.mp-acc-img {
  width: 100%; height: 100%; object-fit: contain;
  background: #fff;
}
.mp-acc-ico .mp-rail-ico,
.mp-acc-ico svg { display: block; }
.mp-acc-body {
  min-width: 0;
  display: grid;
  gap: .15rem;
}
.mp-acc-kind {
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mp-accent);
}
.mp-acc-body strong {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
}
.mp-acc-hint,
.mp-acc-store {
  font-size: .75rem;
  color: var(--mp-muted);
  line-height: 1.35;
}
.mp-acc-side {
  display: grid;
  gap: .35rem;
  justify-items: end;
  align-content: center;
}
.mp-acc-price {
  font-weight: 800;
  font-size: .95rem;
  color: var(--mp-accent);
}
.mp-acc-price--ask {
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  font-weight: 700;
}
.mp-acc-cta {
  font-size: .72rem;
  font-weight: 800;
  color: #0F2430;
  background: var(--mp-accent);
  border-radius: .5rem;
  padding: .35rem .65rem;
}
.mp-acc-empty {
  display: grid;
  gap: .25rem;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  border: 1px dashed var(--mp-line);
  text-align: center;
}
.mp-acc-empty strong {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-weight: 650;
}
#mpCatalogStepAcc .mp-catalog-head h2 {
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.mp-phones-loader {
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding: 2.2rem 1rem;
  text-align: center;
}
.mp-phones-loader-clock {
  position: relative;
  width: 72px; height: 72px;
}
.mp-phones-loader-ring,
.mp-phones-loader-ring-soft {
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid transparent;
  border-top-color: var(--mp-accent);
  animation: mpSpin 1s linear infinite;
}
.mp-phones-loader-ring-soft {
  inset: 8px;
  border-top-color: rgba(155,198,90,.35);
  animation-duration: 1.6s;
  animation-direction: reverse;
}
.mp-phones-loader-mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.mp-phones-loader-txt {
  margin: .35rem 0 0;
  font-family: Syne, sans-serif;
  font-weight: 700;
}
.mp-phones-loader-sub {
  margin: 0;
  font-size: .78rem;
  color: var(--mp-muted);
}
@keyframes mpSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
  .mp-acc-card {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "media body"
      "media side";
  }
  .mp-acc-media { grid-area: media; width: 56px; height: 56px; }
  .mp-acc-body { grid-area: body; }
  .mp-acc-side {
    grid-area: side;
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    margin-top: .15rem;
  }
}

/* —— Hub: estructura aprobada + responsive —— */
.mp.is-hub {
  position: relative;
  background: #0F2430;
  isolation: isolate;
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 0 5.5rem !important;
  overflow-x: clip;
}
.mp-hub {
  position: relative;
  padding: 0 0 6rem;
  z-index: 1;
}
.mp:not(.is-hub) .mp-hub-ambiance,
.mp-hub[hidden] .mp-hub-ambiance {
  display: none !important;
}
.mp-hub-ambiance {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(155,198,90,.14), transparent 55%),
    radial-gradient(700px 380px at 85% 35%, rgba(61,140,180,.12), transparent 50%),
    radial-gradient(600px 320px at 10% 70%, rgba(155,198,90,.07), transparent 45%),
    linear-gradient(165deg, #0c1c26 0%, #0F2430 42%, #0a1620 100%);
}
.mp-hub-ambiance-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: .55;
  animation: mpHubOrb 16s ease-in-out infinite;
}
.mp-hub-ambiance-glow--a {
  width: min(52vw, 380px);
  height: min(52vw, 380px);
  top: 4%;
  right: -6%;
  background: rgba(155,198,90,.26);
}
.mp-hub-ambiance-glow--b {
  width: min(42vw, 300px);
  height: min(42vw, 300px);
  bottom: 12%;
  left: -8%;
  background: rgba(61,140,180,.2);
  animation-delay: -7s;
}
.mp-hub-ambiance-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(155,198,90,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,198,90,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 28%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 28%, #000 15%, transparent 72%);
  opacity: .7;
  animation: mpHubGridDrift 28s linear infinite;
}
.mp-hub-ambiance-scan {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 28%;
  top: -30%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(155,198,90,.045) 45%,
    rgba(200,234,138,.08) 50%,
    rgba(155,198,90,.04) 55%,
    transparent 100%
  );
  animation: mpHubScan 9s ease-in-out infinite;
  mix-blend-mode: screen;
}
.mp-hub-ambiance-ring {
  position: absolute;
  border: 1px solid rgba(155,198,90,.18);
  border-radius: 50%;
  opacity: .55;
  animation: mpHubRing 12s ease-out infinite;
}
.mp-hub-ambiance-ring--a {
  width: min(70vw, 420px);
  height: min(70vw, 420px);
  top: 8%;
  left: 50%;
  margin-left: calc(min(70vw, 420px) / -2);
}
.mp-hub-ambiance-ring--b {
  width: min(48vw, 280px);
  height: min(48vw, 280px);
  top: 18%;
  left: 50%;
  margin-left: calc(min(48vw, 280px) / -2);
  animation-delay: -4s;
  border-color: rgba(94,200,255,.16);
}
.mp-hub-ambiance-nodes {
  position: absolute;
  inset: 0;
}
.mp-hub-ambiance-nodes span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #9BC65A;
  box-shadow: 0 0 10px rgba(155,198,90,.65);
  opacity: .55;
  animation: mpHubNode 4.8s ease-in-out infinite;
}
.mp-hub-ambiance-nodes span:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.mp-hub-ambiance-nodes span:nth-child(2) { top: 28%; right: 14%; animation-delay: -.8s; }
.mp-hub-ambiance-nodes span:nth-child(3) { top: 46%; left: 8%; animation-delay: -1.6s; width: 4px; height: 4px; }
.mp-hub-ambiance-nodes span:nth-child(4) { top: 52%; right: 10%; animation-delay: -2.2s; }
.mp-hub-ambiance-nodes span:nth-child(5) { top: 68%; left: 22%; animation-delay: -3s; width: 4px; height: 4px; }
.mp-hub-ambiance-nodes span:nth-child(6) { top: 72%; right: 20%; animation-delay: -3.6s; }
@keyframes mpHubOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 5%) scale(1.08); }
}
@keyframes mpHubGridDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 48px, 0); }
}
@keyframes mpHubScan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .9; }
  55% { opacity: .55; }
  100% { transform: translateY(320%); opacity: 0; }
}
@keyframes mpHubRing {
  0% { transform: scale(.72); opacity: .55; }
  70% { opacity: .12; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes mpHubNode {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: .85; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hub-ambiance-glow,
  .mp-hub-ambiance-grid,
  .mp-hub-ambiance-scan,
  .mp-hub-ambiance-ring,
  .mp-hub-ambiance-nodes span {
    animation: none !important;
  }
  .mp-hub-ambiance-scan { display: none; }
}
.mp-hub-inner {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 0 clamp(.85rem, 3vw, 1.25rem);
}
.mp-hub-topbar {
  display: none !important;
}
.mp-hub-topbar .mp-hub-logo,
.mp-hub .mp-hub-topbar img.mp-hub-logo {
  display: none !important;
}
/* —— Hub intro (logo grande + frase + conteo) —— */
.mp-hub-intro {
  text-align: center;
  margin: 0 0 .55rem;
  padding: 1rem 0 .55rem;
  border-bottom: 0;
}
.mp-hub-intro .mp-hub-logo { display: none !important; }
.mp-hub-intro > img.mp-hub-hero-logo {
  display: none !important;
}
.mp-hub-hero-mark {
  display: flex;
  justify-content: center;
  margin: 1.1rem auto .75rem;
  width: min(82vw, 300px);
}
.mp-hub-hero-mark-svg {
  width: 100%;
  height: auto;
  display: block;
}
.mp-hub-c-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: mpHubCSpin 2.6s linear infinite;
}
@keyframes mpHubCSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hub-c-spin { animation: none; }
}
.mp-hub-brandline {
  text-align: center;
  font-family: Outfit, Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(.88rem, 3vw, 1.02rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0 auto .35rem;
  max-width: 24rem;
  color: rgba(244, 248, 252, 0.9);
}
.mp-hub-geo {
  text-align: center;
  color: var(--mp-accent);
  font-size: clamp(.76rem, 2.8vw, .88rem);
  font-weight: 650;
  line-height: 1.35;
  margin: 0 auto 0;
  max-width: 22rem;
  min-height: 1.2em;
}
.mp-hub-geo[data-state="loading"] {
  color: var(--mp-accent);
  opacity: .85;
}
.mp-hub-geo strong {
  color: #c8ea8a;
  font-weight: 800;
}

/* Pills: 2×2 en móvil (4 botones, 2 por fila) */
.mp-hub-jump {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  justify-content: stretch;
  align-items: stretch;
  overflow: visible;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 22rem;
}
.mp-hub-jump::-webkit-scrollbar { display: none; }
.mp-hub-jump-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: .62rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}
.mp-hub-jump-btn.is-on {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.42);
  color: #fff;
}
.mp-hub-jump-btn--credit {
  border-color: rgba(155,198,90,.55);
  color: #d7f0a8;
}
.mp-hub-jump-btn--credit.is-on,
.mp-hub-jump-btn--credit:hover,
.mp-hub-jump-btn--credit:focus-visible {
  background: rgba(155,198,90,.14);
  border-color: rgba(155,198,90,.7);
  color: #d7f0a8;
  outline: none;
}

/* Mi celular — compacto, no hero */
.mp-hub-head {
  margin-bottom: .75rem;
  display: flex;
  justify-content: center;
}
.mp-hub-device-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: .65rem;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
  padding: .55rem .7rem;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(8,18,26,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.mp-hub-device-img-wrap {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: .65rem;
  background: rgba(155,198,90,.1);
  border: 1px solid rgba(155,198,90,.2);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
}
.mp-hub-device-img { width: 100%; height: 100%; object-fit: contain; }
.mp-hub-device-ph {
  font-size: 1.05rem;
  opacity: .8;
  color: #c8ea8a;
  display: grid;
  place-items: center;
  line-height: 0;
}
.mp-hub-device-ph svg {
  width: 20px;
  height: 20px;
}
.mp-hub-device-txt {
  min-width: 0;
  flex: 1;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.mp-hub-title {
  margin: 0 0 .1rem;
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(.95rem, 3.2vw, 1.05rem);
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: #fff;
}
.mp-hub-kicker {
  margin: 0 0 .12rem;
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mp-accent);
  font-weight: 750;
  line-height: 1.2;
}
.mp-hub-sub {
  margin: 0 0 .35rem;
  color: var(--mp-muted);
  font-size: .72rem;
  line-height: 1.3;
  max-width: 15.5rem;
}
.mp-hub-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  justify-content: flex-start;
}
.mp-hub-head .mp-device-edit {
  margin: 0;
  font-size: .72rem;
  padding: .2rem .5rem;
  border-radius: 999px;
}
.mp-hub-device-pick {
  width: 100%;
  margin-top: .35rem;
  text-align: left;
}
.mp-hub-device-pick[hidden] { display: none !important; }
.mp-hub-device-pick-lead {
  margin: 0 0 .4rem;
  font-size: .7rem;
  color: var(--mp-muted);
  line-height: 1.3;
}
.mp-hub-device-pick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  justify-content: flex-start;
}
.mp-hub-device-pick-grid button {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #e8f0f4;
  border-radius: 999px;
  padding: .38rem .7rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 650;
  cursor: pointer;
}
.mp-hub-device-pick-grid button:hover,
.mp-hub-device-pick-grid button:focus-visible {
  border-color: rgba(155,198,90,.55);
  background: rgba(155,198,90,.12);
  color: #d7f0a8;
  outline: none;
}
.mp-hub-device-row.is-desktop .mp-hub-device-img-wrap {
  opacity: .9;
}
.mp-hub-device-row.is-pick {
  flex-wrap: wrap;
  max-width: min(22rem, 100%);
}
.mp-hub-device-row.is-pick .mp-hub-device-txt {
  flex: 1 1 12rem;
}
.mp-hub-device-row.is-pick .mp-hub-sub {
  max-width: 18rem;
}
.mp-hub-device-row.is-pick .mp-hub-device-pick {
  flex: 1 1 100%;
}

/* Rails siempre visibles */
.mp-hub-rail-block {
  margin: 1.15rem 0;
  min-height: 0;
}
.mp-rail-track,
.mp-rail-track--auto {
  display: flex !important;
  gap: .65rem;
  overflow-x: auto;
  min-height: 118px;
  padding: .15rem 0 .35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: none;
  -webkit-mask-image: none;
}
.mp-rail-track--auto {
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.mp-rail-track::-webkit-scrollbar { display: none; }
.mp-rail-card {
  flex: 0 0 min(42vw, 152px);
  min-height: 112px;
  visibility: visible;
  opacity: 1;
}
.mp-rail-card--acc {
  min-height: 118px;
}
.mp-rail-card--phone {
  flex: 0 0 min(44vw, 160px);
  min-height: 168px;
}
.mp-rail-card--phone img {
  height: 110px;
  background: #fff;
}

/* Footer 5 cols siempre */
.mp-hub-footer {
  width: min(640px, 100%);
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Tablet */
@media (min-width: 720px) {
  .mp-hub-inner {
    width: min(720px, 94vw);
  }
  .mp-hub-brandline {
    font-size: 1.15rem;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
  .mp-hub-jump {
    max-width: 24rem;
    gap: .5rem;
  }
  .mp-hub-jump-btn {
    padding: .65rem .85rem;
    font-size: .82rem;
  }
  .mp-hub-repair-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mp-hub-repair-card.is-extra { display: none; }
  .mp-hub-repair.is-expanded .mp-hub-repair-card.is-extra {
    display: flex;
  }
  .mp-rail-card,
  .mp-rail-card--acc {
    flex-basis: 168px;
  }
  .mp-rail-card--phone {
    flex-basis: 180px;
  }
  .mp-hub-footer {
    width: min(720px, 100%);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .mp.is-hub {
    min-height: 100dvh;
    padding: 0 0 6.5rem !important;
  }
  .mp-hub {
    padding: 0 0 6.5rem;
  }
  .mp-hub-inner {
    width: min(980px, 92vw);
  }
  .mp-hub-topbar .mp-hub-logo {
    width: 124px;
  }
  .mp-hub-intro {
    padding: 2rem 0 1.35rem;
    margin-bottom: 1.25rem;
  }
  .mp-hub-hero-mark {
    margin: 1.5rem auto 1.1rem;
    width: min(36vw, 360px);
  }
  .mp-hub-brandline {
    font-size: 1.28rem;
    max-width: 34rem;
    font-weight: 500;
  }
  .mp-hub-device-row {
    max-width: 22rem;
  }
  .mp-hub-repair,
  .mp-hub-rail-block,
  .mp-brand-dexter {
    max-width: 100%;
  }
  /* En desktop: rails más anchos y cards más grandes */
  .mp-rail-track,
  .mp-rail-track--auto {
    min-height: 140px;
    gap: .85rem;
  }
  .mp-rail-card,
  .mp-rail-card--acc {
    flex-basis: 190px;
    min-height: 132px;
    padding: .85rem;
  }
  .mp-rail-card--phone {
    flex-basis: 200px;
    min-height: 200px;
  }
  .mp-rail-card--phone img {
    height: 130px;
  }
  .mp-hub-footer {
    width: min(980px, 100%);
    border-radius: 1rem 1rem 0 0;
  }
}

/* Móvil estrecho */
@media (max-width: 380px) {
  .mp-hub-jump {
    max-width: 100%;
    gap: .4rem;
  }
  .mp-hub-jump-btn {
    padding: .58rem .5rem;
    font-size: .74rem;
  }
  .mp-hub-repair-grid {
    gap: .4rem;
  }
  .mp-rail-card {
    flex-basis: 46vw;
  }
}

/* —— Phone catalog Ficha / Elegir —— */
.mp-cat-ico-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-top: .55rem;
  width: 100%;
}
.mp-cat-ico-actions--2 { grid-template-columns: 1fr 1fr; }
.mp-ico-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: 3.1rem;
  padding: .45rem .35rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #e8f0f4;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.mp-ico-btn svg { width: 18px; height: 18px; opacity: .95; }
.mp-ico-btn-ghost {
  border-color: rgba(255,255,255,.16);
  background: rgba(15,36,48,.55);
  color: rgba(255,255,255,.9);
}
.mp-ico-btn-pick {
  border-color: rgba(155,198,90,.55);
  background: rgba(155,198,90,.14);
  color: #d7f0a8;
}
.mp-ico-btn:hover,
.mp-ico-btn:focus-visible {
  outline: none;
  border-color: rgba(155,198,90,.7);
  background: rgba(155,198,90,.2);
  color: #fff;
}
.mp-phone-media {
  position: relative;
  background: #fff;
  border-radius: .75rem;
  overflow: hidden;
  aspect-ratio: 1 / 1.05;
  display: grid;
  place-items: center;
}
.mp-phone-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mp-phone-body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: .35rem;
}
.mp-phone-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.mp-phone-stat {
  font-size: .68rem;
  padding: .12rem .4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--mp-muted);
}
.mp-detail-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  cursor: pointer;
}
.mp-detail-opt.is-on,
button.mp-detail-opt.is-on {
  border-color: rgba(155,198,90,.65);
  background: rgba(155,198,90,.16);
  color: #d7f0a8;
}

/* Hub rails: centrar accesorios y reparaciones */
.mp-rail-card--acc,
.mp-rail-card--repair {
  align-items: center !important;
  justify-content: flex-start;
  text-align: center !important;
  gap: .35rem;
}
.mp-rail-card--acc .mp-rail-ico,
.mp-rail-card--repair .mp-rail-ico {
  margin-left: auto;
  margin-right: auto;
}
.mp-rail-card--acc strong,
.mp-rail-card--repair strong,
.mp-rail-card--acc > span:not(.mp-rail-ico),
.mp-rail-card--repair > span:not(.mp-rail-ico) {
  text-align: center;
  width: 100%;
}
.mp-rail-card--phone {
  text-align: center;
  align-items: center;
}
.mp-rail-card--phone strong,
.mp-rail-card--phone > span {
  text-align: center;
  width: 100%;
}