/* Versión para celular de /talleres. 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-talleres.css"> en el <head>. */
@media (max-width:640px){
  /* Respiración general: menos espacio vacío entre secciones */
  html body .sec{padding:64px 0 !important}
  html body h2{font-size:30px !important;line-height:1.08 !important}
  html body .sub{font-size:15px !important}

  /* Encabezado más corto */
  html body .hero{min-height:600px !important;padding-top:48px !important}
  html body .hero .herospace{height:210px !important}
  html body .hero .herobg{inset:auto 0 0 0 !important;height:300px !important;object-position:center 60% !important}
  html body .hero .links2{font-size:16px !important;margin-top:22px !important}
  html body .hero .sub{font-size:15px !important;max-width:320px;margin-left:auto;margin-right:auto}

  /* Se ocultan en celular (el video ya muestra lo mismo / repiten el mensaje) */
  html body .stagesec,
  html body .statement,
  html body #cambio{display:none !important}

  /* Video: más compacto */
  html body .msvsec{padding:56px 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}

  /* Funciones: tarjetas que se deslizan de lado */
  html body .bento{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:36px -24px 0 !important;padding:0 24px 10px;scrollbar-width:none;text-align:left}
  html body .bento::-webkit-scrollbar{display:none}
  html body .bento > .tile{flex:0 0 82%;scroll-snap-align:center;min-height:0 !important;padding:24px !important;opacity:1 !important;transform:none !important}
  html body .bento .tile h3{font-size:19px !important}
  html body .bento .tile .tx{font-size:14px !important}
  html body .bento .tileimg{max-height:150px;object-fit:cover}
  html body .bento .ppftile .ppfimg,
  html body .bento .ppftile > div:last-child{display:none !important}
  html body .bento .ppftile > div{flex:1 1 auto !important}
  html body #funciones .wrap::after{content:"Desliza para ver más →";display:block;margin-top:14px;font-size:13px;opacity:.55}

  /* ¿Te suena?: lista más compacta */
  html body .painlist{grid-template-columns:minmax(0,1fr) !important;gap:8px !important;margin-top:28px !important}
  html body .painlist button{padding:12px 14px !important;font-size:14px !important}

  /* Giros: pestañas en una fila deslizable, sin foto ni lista de problemas */
  html body #giros .seg{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;justify-content:flex-start;max-width:100%;margin-top:28px !important;scrollbar-width:none;border-radius:16px}
  html body #giros .seg::-webkit-scrollbar{display:none}
  html body #giros .seg button{flex:0 0 auto;white-space:nowrap}
  html body #giros .giroimg{display:none !important}
  html body #giros .panel{grid-template-columns:minmax(0,1fr) !important;gap:12px !important;margin-top:20px !important}
  html body #giros .panel > .pblock:first-child:not(:only-of-type) .painsm,
  html body #giros .panel > .pblock:first-child:not(:only-of-type) .plabel{display:none !important}
  html body #giros .pblock{padding:20px !important}
  html body #giros .pblock h3{margin:0 !important;font-size:19px !important}
  html body #giros .feats li{font-size:14px !important;padding-top:4px !important;padding-bottom:4px !important}
  html body #giros .pprice{padding:22px !important}

  /* Demo y cotizador: menos aire */
  html body #demo .seg{margin-top:28px !important}
  html body .qform{gap:26px !important}
  html body #cotizar .pills{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  html body #cotizar .pills button{padding:12px !important;font-size:13px !important}
  html body #cotizar .pills button:last-child{grid-column:1/-1}
  html body #cotizar .stepn small{display:none}

  /* Visita y preguntas */
  html body #visita{padding:72px 0 !important}
}