/* ReDeal's — final mobile override layer.
   Loaded after page styles so these rules win the cascade. */
@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }

  body,
  main,
  section,
  header,
  footer,
  nav,
  .grid,
  .reveal,
  .svc-card,
  .glass,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl,
  .max-w-xl {
    min-width: 0;
  }

  #main-view,
  #main-view > section,
  #main-view > header,
  #catalog-view,
  #catalog-view > div,
  #main-view .max-w-7xl,
  #main-view .max-w-6xl,
  #main-view .max-w-4xl,
  #main-view .max-w-3xl,
  #main-view .max-w-2xl,
  #main-view .grid,
  #main-view .grid > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #main-view > section,
  #main-view > .nfc-section {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  /* Compact floating header: keeps the UI available without eating the screen. */
  body.relative > nav {
    top: max(6px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto;
    max-width: calc(100vw - 16px);
    border-radius: 18px !important;
  }

  body.relative > nav > div:first-child {
    min-height: 56px !important;
    padding: 8px 11px !important;
    gap: 10px;
  }

  body.relative > nav > div:first-child > a {
    min-width: 0;
    gap: 9px !important;
  }

  body.relative > nav > div:first-child > a img {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px;
  }

  body.relative > nav > div:first-child > a span {
    overflow: hidden;
    max-width: min(58vw, 220px);
    font-size: clamp(1.12rem, 5.7vw, 1.35rem);
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #mobile-menu {
    display: grid;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    place-items: center;
    border-radius: 13px !important;
    font-size: 1.35rem;
  }

  #mobile-nav {
    right: 0 !important;
    left: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  #main-view > section[id],
  #main-view > header[id] {
    scroll-margin-top: 84px;
  }

  /* Prevent long labels/large accessibility fonts from widening CSS grids. */
  #main-view h1,
  #main-view h2,
  #main-view h3,
  #main-view p,
  #main-view .badge,
  #main-view .nfc-feature span,
  #main-view .nfc-price-card,
  #main-view .svc-card,
  #main-view .svc-card p {
    max-width: 100%;
  }

  #main-view h1,
  #main-view h2,
  #main-view h3,
  #main-view p,
  #main-view .nfc-feature span,
  #main-view .svc-card p {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* NFC: eliminate collisions and keep product chips inside the viewport. */
  #nfc-reviews .max-w-7xl,
  #nfc-reviews .reveal,
  #nfc-reviews .nfc-feature-grid,
  #nfc-reviews .nfc-price-row,
  #nfc-reviews .nfc-visual-wrap,
  #nfc-reviews .nfc-float-layer,
  #nfc-reviews .nfc-product-card {
    min-width: 0;
    max-width: 100%;
  }

  #nfc-reviews h2 {
    font-size: clamp(2rem, 10vw, 2.55rem) !important;
    line-height: 1.03 !important;
  }

  .nfc-eyebrow {
    width: fit-content;
    max-width: 100%;
    white-space: normal !important;
  }

  .nfc-feature-grid,
  .nfc-price-row {
    grid-template-columns: 1fr !important;
  }

  .nfc-feature {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 12px 13px !important;
    line-height: 1.35;
  }

  .nfc-feature i {
    flex: 0 0 18px;
  }

  .nfc-price-card {
    width: 100%;
    min-height: 0;
    padding: 15px 16px !important;
  }

  .nfc-price-card.featured {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .nfc-save {
    position: static !important;
    order: -1;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 11px;
    white-space: normal;
  }

  .nfc-price {
    font-size: clamp(2rem, 11vw, 2.55rem) !important;
  }

  .nfc-cta {
    display: flex !important;
    width: 100% !important;
    max-width: 100%;
    min-height: 54px;
    padding: 13px 16px !important;
    font-size: clamp(.96rem, 4.7vw, 1.08rem);
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .nfc-note {
    font-size: .82rem !important;
    line-height: 1.55 !important;
  }

  .nfc-visual-wrap {
    margin-top: 32px !important;
    padding: 0 4px 14px !important;
  }

  .nfc-float-layer {
    width: 100% !important;
  }

  .nfc-product-card {
    transform: none !important;
  }

  .nfc-chip {
    max-width: calc(100% - 8px);
    transform: none !important;
    font-size: .58rem !important;
    line-height: 1.15;
    white-space: normal;
  }

  .nfc-chip.c1 { left: 4px !important; }
  .nfc-chip.c2 { right: 4px !important; }
  .nfc-chip.c3 { left: 5% !important; bottom: -12px !important; }

  /* Ecosystem / crypto: avoid badge and canvas overflow on narrow devices. */
  #ecosistema .bg-rd-bg {
    width: 100%;
    min-width: 0;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  #ecosistema .grid,
  #ecosistema .grid > *,
  #ecosistema .flex,
  #ecosistema .flex > * {
    min-width: 0;
    max-width: 100%;
  }

  #ecosistema .flex.items-center.gap-4 {
    align-items: flex-start;
  }

  #ecosistema .font-mono,
  #ecosistema .badge {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #ecosistema .space-y-2 > .flex {
    align-items: flex-start;
  }

  #ecosistema .space-y-2 > .flex i {
    flex: 0 0 auto;
    margin-top: .48em;
  }

  #ecosistema .space-y-2 > .flex span {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .crypto-visual {
    width: min(100%, 300px) !important;
    border-radius: 24px !important;
  }

  .crypto-chip {
    bottom: 14px !important;
    width: max-content;
    max-width: calc(100% - 24px);
    justify-content: center;
    padding: .48rem .7rem !important;
    font-size: .61rem !important;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  /* Milanuncios: this section was being clipped on real Android devices. */
  #milanuncios {
    overflow: clip;
  }

  #milanuncios > .max-w-7xl,
  #milanuncios .reveal,
  #milanuncios .reveal > div,
  #milanuncios .grid,
  #milanuncios .grid > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #milanuncios .reveal.grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  #milanuncios h2 {
    width: 100%;
    font-size: clamp(2rem, 10.2vw, 2.45rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
  }

  #milanuncios p.text-lg {
    width: 100%;
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere;
  }

  #milanuncios .badge {
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
  }

  #milanuncios .flex.flex-wrap {
    gap: 8px !important;
  }

  #milanuncios .btn-primary {
    display: flex !important;
    width: 100% !important;
    max-width: 100%;
    min-height: 52px;
    justify-content: center;
    padding: 13px 14px !important;
    font-size: .94rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  #milanuncios .grid.sm\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #milanuncios .svc-card {
    width: 100%;
    min-height: 0;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  #milanuncios .marketplace-icon {
    margin-bottom: 14px !important;
  }

  #milanuncios .svc-card h3 {
    margin-bottom: 7px !important;
    font-size: 1.2rem !important;
    line-height: 1.2;
  }

  #milanuncios .svc-card p {
    font-size: .9rem !important;
    line-height: 1.5 !important;
  }

  /* Catalog: make every track shrinkable and keep sticky filters under the header. */
  #catalog-view .grid,
  #catalog-view .grid > *,
  #catalog-view .svc-card,
  #catalog-view .glass {
    min-width: 0;
    max-width: 100%;
  }

  #catalog-view .glass.sticky {
    top: 76px !important;
  }

  /* Standalone SEO/service/legal pages also get a proper mobile layout. */
  body > main.wrap {
    width: 100%;
    max-width: 100% !important;
    padding: 14px 16px 56px !important;
    overflow-x: clip;
  }

  body > main.wrap .top {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    padding: 13px !important;
    border: 1px solid rgba(0, 0, 0, .075);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
  }

  body > main.wrap .top .brand {
    min-width: 0;
    padding: 2px;
    font-size: 1.18rem !important;
    line-height: 1.2;
  }

  body > main.wrap .top .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100%;
    min-width: 0;
  }

  body > main.wrap .top .nav a {
    display: flex;
    min-width: 0;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    padding: 8px 7px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 11px;
    background: #f8f9fa;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
  }

  body > main.wrap .crumb,
  body > main.wrap .hero,
  body > main.wrap section,
  body > main.wrap .grid,
  body > main.wrap .grid > *,
  body > main.wrap .card,
  body > main.wrap .lead,
  body > main.wrap .copy,
  body > main.wrap .faq {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body > main.wrap h1 {
    font-size: clamp(2.15rem, 10.5vw, 2.8rem) !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere;
  }

  body > main.wrap h2 {
    margin-top: 44px !important;
    font-size: clamp(1.65rem, 8vw, 2rem) !important;
    overflow-wrap: anywhere;
  }

  body > main.wrap .lead {
    font-size: 1.04rem !important;
    line-height: 1.65;
  }

  body > main.wrap .copy {
    font-size: .98rem !important;
  }

  body > main.wrap .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body > main.wrap .card {
    padding: 19px !important;
    border-radius: 18px !important;
  }

  body > main.wrap .cta {
    display: flex !important;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 12px 14px !important;
    text-align: center;
    white-space: normal;
  }

  body > main.wrap .secondary {
    display: block !important;
    margin: 13px 0 0 !important;
    text-align: center;
  }

  body > main.wrap img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  #back-top {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 360px) {
  #main-view > section,
  #main-view > .nfc-section {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  #milanuncios h2,
  #nfc-reviews h2 {
    font-size: clamp(1.88rem, 9.8vw, 2.2rem) !important;
  }

  body.relative > nav > div:first-child > a span {
    max-width: 52vw;
  }

  .nfc-price {
    font-size: 2rem !important;
  }
}

/* Crypto visual — animated fallback while the WebGL scene loads. */
.crypto-visual::before {
  content: "";
  position: absolute;
  inset: 27%;
  z-index: 0;
  border: 1px solid rgba(108, 92, 231, .2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 36%, #8fd8ff 0 1.5%, transparent 4%),
    radial-gradient(circle at 50% 48%, #171a31 0 56%, #0a0c18 75%, #05060c 100%);
  box-shadow:
    0 0 0 34px rgba(108, 92, 231, .055),
    0 0 0 70px rgba(0, 184, 217, .035),
    0 24px 50px -25px rgba(108, 92, 231, .65);
  animation: crypto-fallback 5s ease-in-out infinite;
  transition: opacity .3s ease;
}
.crypto-visual.crypto-rendered::before { opacity: 0; }
.crypto-visual #crypto-canvas { position: relative; z-index: 1; }
.crypto-visual::after { z-index: 0; }
.crypto-visual .crypto-chip { z-index: 2; }
@keyframes crypto-fallback {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.025); }
}

/* Xygox product — active product presentation */
.xygox-product {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 5rem;
  border: 1px solid rgba(108, 92, 231, .22);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(108, 92, 231, .34), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(0, 184, 217, .14), transparent 36%),
    linear-gradient(145deg, #0b0b11, #12111d 58%, #0e1019);
  box-shadow: 0 36px 90px -55px rgba(52, 31, 151, .85);
}
.xygox-product__glow { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.035) 45%, transparent 66%); pointer-events: none; }
.xygox-product__content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 5vw, 4.75rem); }
.xygox-product__copy { position: relative; z-index: 2; min-width: 0; }
.xygox-product__status { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: .5rem .75rem; border: 1px solid rgba(121, 239, 207, .26); border-radius: 999px; color: #b8ffe9; background: rgba(0, 184, 148, .1); font: 700 .7rem/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
.xygox-product__status span { width: 7px; height: 7px; border-radius: 50%; background: #6ef2ce; box-shadow: 0 0 0 5px rgba(110, 242, 206, .09), 0 0 18px rgba(110, 242, 206, .75); }
.xygox-product__division { margin: 0 0 1.1rem; color: rgba(255,255,255,.5); font: 600 .68rem/1.5 "JetBrains Mono", monospace; letter-spacing: .08em; }
.xygox-product h3 { max-width: 690px; margin: 0 0 1.25rem; color: #fff; font-size: clamp(2.35rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.055em; }
.xygox-product__lead { max-width: 680px; margin: 0 0 1.6rem; color: rgba(255,255,255,.68); font-size: 1.04rem; line-height: 1.75; }
.xygox-product__features { display: grid; gap: .7rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.xygox-product__features li { display: flex; align-items: flex-start; gap: .85rem; padding: .82rem .9rem; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.035); font-size: .88rem; line-height: 1.55; }
.xygox-product__features i { width: 18px; margin-top: .17rem; color: #9e91ff; text-align: center; }
.xygox-product__features strong { color: #fff; }
.xygox-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.xygox-product__primary, .xygox-product__secondary { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: .65rem; padding: .8rem 1.15rem; border-radius: 14px; font-weight: 800; text-decoration: none; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; }
.xygox-product__primary { color: #0b0b11; background: #fff; box-shadow: 0 18px 50px -30px rgba(255,255,255,.75); }
.xygox-product__secondary { border: 1px solid rgba(255,255,255,.15); color: #fff; background: rgba(255,255,255,.04); }
.xygox-product__primary:hover, .xygox-product__secondary:hover { transform: translateY(-2px); }
.xygox-product__secondary:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.xygox-product__note { margin: 1rem 0 0; color: rgba(255,255,255,.43); font-size: .74rem; line-height: 1.5; }
.xygox-product__note strong { color: rgba(255,255,255,.66); }
.xygox-product__visual { position: relative; width: 100%; min-width: 0; min-height: 460px; display: grid; place-items: center; perspective: 900px; }
.xygox-product__logo-shell { position: relative; z-index: 2; width: min(64%, 290px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 34%; background: radial-gradient(circle, rgba(108,92,231,.22), rgba(255,255,255,.03) 56%, transparent 72%); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 34px 80px -48px rgba(108,92,231,.95); transform: rotate(-3deg); animation: xygox-float 7s ease-in-out infinite; }
.xygox-product__logo-shell img { width: 76%; height: auto; filter: drop-shadow(0 24px 38px rgba(51,28,142,.45)); }
.xygox-product__orbit { position: absolute; border: 1px solid rgba(143,128,255,.16); border-radius: 50%; pointer-events: none; }
.xygox-product__orbit.orbit-a { width: 88%; aspect-ratio: 1; transform: rotate(18deg); }
.xygox-product__orbit.orbit-b { width: 68%; aspect-ratio: 1; border-color: rgba(0,184,217,.13); transform: rotate(-22deg); }
.xygox-product__chip { position: absolute; z-index: 3; max-width: calc(100% - 8px); display: inline-flex; align-items: center; gap: .5rem; padding: .62rem .75rem; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: rgba(255,255,255,.72); background: rgba(14,14,23,.76); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 50px -28px rgba(0,0,0,.8); font: 600 .63rem/1 "JetBrains Mono", monospace; letter-spacing: .055em; }
.xygox-product__chip i { color: #a699ff; }
.xygox-product__chip.chip-a { top: 17%; left: 0; }
.xygox-product__chip.chip-b { top: 34%; right: 0; }
.xygox-product__chip.chip-c { bottom: 15%; left: 8%; }
@keyframes xygox-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-1deg); } }

@media (max-width: 860px) {
  .xygox-product__content { grid-template-columns: 1fr; }
  .xygox-product__visual { min-height: 360px; order: -1; }
  .xygox-product__logo-shell { width: min(58vw, 250px); }
  .xygox-product__orbit.orbit-a { width: min(82vw, 430px); }
  .xygox-product__orbit.orbit-b { width: min(64vw, 330px); }
}
@media (max-width: 560px) {
  .xygox-product { border-radius: 24px; margin-bottom: 3.5rem; }
  .xygox-product__content { padding: 1.35rem; gap: 1.5rem; }
  .xygox-product__visual { min-height: 280px; }
  .xygox-product__chip { font-size: .56rem; padding: .52rem .6rem; }
  .xygox-product__chip.chip-a { left: -4px; }
  .xygox-product__chip.chip-b { right: 8px; }
  .xygox-product__chip.chip-c { left: 2%; bottom: 10%; }
  .xygox-product__actions { align-items: stretch; flex-direction: column; }
  .xygox-product__primary, .xygox-product__secondary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xygox-product__logo-shell { animation: none; }
}