/* Versión para celular de /nfc. Solo aplica en pantallas de hasta 640 px;
   la versión de computadora no cambia. Si se vuelve a exportar del canvas,
   reagregar <link rel="stylesheet" href="/movil-nfc.css"> en el <head>. */
@media (max-width:640px){
  html body .sec{padding:64px 0 !important}
  html body h2{font-size:28px !important;line-height:1.1 !important}
  html body .sub{font-size:15px !important}

  /* Carrusel deslizable (reutilizado abajo) */
  html body .trio,
  html body .ugrid,
  html body .steps,
  html body .prods,
  html body .demo2{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-24px !important;margin-right:-24px !important;padding:0 24px 10px;scrollbar-width:none;grid-template-columns:none !important}
  html body .trio::-webkit-scrollbar,
  html body .ugrid::-webkit-scrollbar,
  html body .steps::-webkit-scrollbar,
  html body .prods::-webkit-scrollbar,
  html body .demo2::-webkit-scrollbar{display:none}
  html body .trio > *,
  html body .ugrid > *,
  html body .steps > *,
  html body .prods > *{flex:0 0 82%;scroll-snap-align:center;min-width:0}

  /* Encabezado: sin la foto grande (sale en la portada y en el video) */
  html body .hero{padding:48px 0 56px !important}
  html body .hero .vis,
  html body .hero .trust{display:none !important}
  html body .hero .sub{font-size:15px !important}
  html body .hero h1{font-size:34px !important}

  /* Video */
  html body .msvsec{padding:48px 0 !important}
  html body .msvsec .msvin{gap:28px !important}
  html body .msvsec p.msvt{font-size:15px !important;margin-bottom:20px !important}
  html body .msvsec .msvf{max-width:270px !important}

  /* Lo que ofrecemos: 3 tarjetas que se deslizan */
  html body .trio{margin-top:32px !important}
  html body .tcard{padding:24px !important}
  html body .tcard ul{display:none}

  /* Así se ven en tu negocio */
  html body .usos{padding:56px 0 !important}
  html body .ugrid{margin-top:28px !important}
  html body .ugrid .u{min-height:260px !important}

  /* Demo: celular y panel lado a lado, se desliza para ver el panel */
  html body #demo .demo2{margin-top:32px !important;align-items:flex-start}
  html body #demo .demo2 > *{flex:0 0 92%;scroll-snap-align:center;min-width:0}
  html body #demo .cphone{width:100% !important;max-width:330px}
  html body #demo .cscreen{height:560px !important}
  html body #demo .sub{display:none}
  html body #demo .wrap::after{content:"Desliza para ver tu panel →";display:block;margin-top:12px;font-size:13px;opacity:.55}

  /* Panel del menú en la demo: filas compactas */
  html body #demo .mrow{gap:8px !important}
  html body #demo .mrow .swl,
  html body #demo .mrow .nm small{display:none !important}
  html body #demo .mrow .nm{font-size:13px;line-height:1.25}
  html body #demo .mthumb{width:38px;height:38px;font-size:19px}
  html body #demo .prin{height:32px;padding:0 4px}
  html body #demo .prin input{width:40px;font-size:13px}
  html body #demo .panel .pcard{padding:12px !important}
  html body #demo .mcan span{font-size:11px;padding:4px 8px}

  /* Software: plan base sin descripciones y sin el reporte de ejemplo */
  html body .planbox{margin-top:32px !important}
  html body .pb{padding:24px !important}
  html body .blist li span{display:none !important}
  html body .blist{gap:6px !important}
  html body .elist{display:flex !important;flex-wrap:wrap;gap:6px !important}
  html body .elist span{width:auto !important;font-size:12px !important}
  html body .report .rcard{display:none !important}
  html body .report{margin-top:40px !important}
  html body .report h2{font-size:24px !important}

  /* Cómo funciona */
  html body .howimg{display:none !important}
  html body .steps{margin-top:28px !important}
  html body .step{padding:24px !important}

  /* Productos: tarjetas que se deslizan */
  html body .prods{margin-top:32px !important}
  html body .prods > *{padding:18px !important}
  html body .prods .pvis{max-height:180px;overflow:hidden}
  html body .prods .ideal{display:none}
  html body .prods .prod.full .pdesc{font-size:14px !important}
  html body #productos .shapes{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;margin-top:24px !important}
  html body #productos .shapes-note span:last-child{display:none}
  html body #productos > .wrap > h3{margin-top:48px !important}
  html body #productos .wrap > .prods + h3 + .ugrid .u{min-height:220px !important}

  /* Cotizador: sin textos de ayuda */
  html body #cotizar .stepn small{display:none}
  html body #cotizar .qgrid{gap:28px !important}

  html body .final{padding:64px 0 !important}
}