/* responsive.css — versión móvil (se carga al final para sobrescribir).
   Breakpoint principal: ≤720px (teléfonos). El escritorio queda intacto por encima. */
@media (max-width:720px){
  /* La página deja de estar "fija": scroll vertical natural en el teléfono.
     El recorte horizontal va con overflow-x:clip (no overflow:hidden) para que el
     body NO se vuelva contenedor de scroll — así el visualizador sticky del
     configurador puede anclarse al viewport. */
  html{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  body{height:auto;min-height:100%;overflow-x:clip;overflow-y:visible;display:block}

  /* ── Cabecera compacta ──────────────────────────────────────── */
  .top{position:sticky;top:0;z-index:40;gap:8px;padding:8px 12px;flex-wrap:wrap}
  .top .logo img{width:104px}
  .top .tabs{margin-left:auto;order:2;flex:1 1 100%;margin-top:6px}
  .top .tab{flex:1;min-height:38px;font-size:11px;padding:8px 4px}
  .topwa,.topig{display:none} /* en móvil el WhatsApp vive en la barra fija de venta (configurador) */

  .app{display:block}
  .main{min-height:auto}

  /* ── Galería de murales: 2 columnas para comparar sin bajar tanto ── */
  .mgal{padding:16px 12px 30px}
  .mgalhead{margin-bottom:16px}
  .mgalhead h2{font-size:20px}
  .mgalhead p{font-size:13px;margin-top:6px}
  .mgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  /* El mockup final es cuadrado: mantiene aspect-ratio 1/1 (heredado) sin recortar. */
  .gthumb .mthumb{width:88px;height:74px}
  .gcbody{padding:11px 12px 13px}
  .gcname{font-size:14px}
  .gcdesc{font-size:11px;min-height:44px;margin-top:4px}
  .gcprice{font-size:14px;margin-top:6px}
  .gctag{top:-11px;right:8px;font-size:9px;padding:3px 8px}

  /* ── Configurador: en celular el visualizador queda FIJO arriba mientras
     se desplazan las opciones, para comparar tamaño/marco/estilo en vivo ── */
  .mcfg:not(.hidden){flex-direction:column;min-height:auto}
  /* El visualizador se mantiene pegado arriba (sticky) al bajar por las opciones.
     Para que pueda anclarse en top:0, la cabecera deja de ser sticky en el configurador
     (el botón "← Todos los murales" sigue visible dentro del preview). */
  body[data-mural="config"] .top{position:static}
  .cfgpreview{display:block;padding-bottom:0;position:sticky;top:0;z-index:20;
    background:var(--color-fondo);box-shadow:0 6px 14px rgba(13,28,81,0.10)}
  .cfgpreview .room{min-height:46vh}
  .cfgpreview .backbtn{font-size:11px;padding:7px 11px}
  /* Barra del cartel "sube tu pared" más compacta: el visualizador va anclado y no
     debe robarle espacio a las opciones. El botón "← Todos" ya no flota aquí. */
  .cfgpreview .wallhintbar{padding:6px 12px 4px}
  .cfgpreview .wallhint{font-size:11.5px;padding:7px 14px}
  .cfgpanel{flex:none;overflow:visible;border-left:none;border-top:1px solid rgba(214,167,122,0.35);padding-bottom:0}

  .cfghd{padding:12px 16px 10px}
  .cfghd .bna{font-size:18px}
  /* Número de catálogo + nombre en la MISMA línea para ganar espacio (ej. "03 Editorial
     Premium"). El número va compacto e inline; el !important gana al font-size que upd()
     fija por estilo. */
  .cfghd-top{display:inline;margin:0}
  .cfghd .bn{display:inline-block;font-size:13px !important;padding:2px 8px !important;line-height:1.25;margin-right:7px;vertical-align:middle}
  .cfghd .bna{display:inline;vertical-align:middle}
  /* El precio ya vive (grande y fijo) en la barra inferior de venta: se oculta
     el precio duplicado del encabezado para no repetirlo. */
  .cfghd .cfghd-price{display:none}
  .cfgextra{margin:12px 16px 0}

  .cfgpanel #sizeBar,.cfgpanel #paspBar{gap:8px 12px;padding:11px 16px}
  .pbl{font-size:12.5px}

  .room{min-height:46vh}
  .mz{padding:14px 34px 12px 14px}

  .cfgctl{padding:14px 16px}
  .cfgrow-extra{padding:2px 16px 12px;justify-content:space-between}

  /* Espacio extra al final: que las últimas opciones puedan subir por encima
     de la barra fija de venta (el visualizador anclado ocupa la parte superior). */
  body[data-mural="config"] .main{padding-bottom:90px}

  /* ── Barra fija de venta: en celular, nombre sobre precio ── */
  .mcta.show{justify-content:space-between;gap:12px;padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
  /* flex:1 + min-width:0 dejan la descripción a la izquierda del botón (que no se encoge).
     La descripción se muestra en HASTA 2 líneas (line-clamp) y el precio va debajo, en vez
     de recortarse con "…" — así se lee completa sin que el botón la tape. */
  .mcta .mctaInfo{flex:1;min-width:0;overflow:hidden;flex-direction:column;align-items:flex-start;gap:1px;margin-right:0}
  .mcta .mctaName{font-size:12px;width:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.22}
  .mcta .mctaPrice{font-size:21px}
  .mcta .mctaBtn{font-size:14px;padding:12px 18px}

  /* ── Pestaña Precios · "Crea tu cuadro" ──────────────────────
     El visualizador (armprev) queda FIJO arriba mientras se desplazan las
     opciones (marco/formato/tamaño/estilo), igual que en el configurador de
     murales. La barra fija "Pedir por WhatsApp" (#mCta) acompaña al pie con el
     precio en vivo. Para anclar el preview en top:0, la cabecera deja de ser
     sticky en esta pestaña. */
  body[data-view="precios"] .top{position:static}
  /* overflow:visible para que .precios NO sea contenedor de scroll y el armprev
     sticky pueda anclarse al viewport (igual que el body en móvil).
     padding inferior extra: deja aire para la barra fija #mCta. */
  .precios{padding:20px 14px 118px;overflow:visible}
  .armtitle{font-size:16px}
  .arm{grid-template-columns:1fr;gap:18px}
  .armprev{position:sticky;top:0;z-index:20;min-height:auto;padding:14px;
    box-shadow:0 6px 14px rgba(13,28,81,0.09)}
  .armstage{min-height:auto}
  .armminibox{margin-top:12px;padding-top:12px}
  .armbar{flex-direction:column;align-items:stretch;text-align:center;gap:12px}
  .armprice{font-size:23px}
  .armwa{justify-content:center}
  .armchips{gap:7px}
  .pgobtns{flex-direction:column}
  .pgobtn{max-width:none}

  /* ── Pestaña Info ──────────────────────────────────────────── */
  .info{padding:20px 14px 40px}
  .ihero h1{font-size:23px}
  .ihero p{font-size:14px}
  .isteps{flex-direction:column}
  .istep{min-width:0}
  .icontact{padding:18px 16px}

  /* ── Portada ───────────────────────────────────────────────── */
  /* Se apila: muro de obras arriba (carrusel deslizable), contenido debajo */
  .phero{flex-direction:column;gap:24px;padding:22px 0 28px;justify-content:flex-start}

  .pgallery-wrap{order:1;flex:none;width:100%;gap:11px}
  .pgcap{font-size:10.5px;letter-spacing:1.3px;padding:0 20px;text-align:center}
  /* Carrusel: se desliza en horizontal con "peek" del siguiente cuadro para invitar a explorar */
  .pgallery{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;padding:6px 22px 14px;width:100%;-webkit-overflow-scrolling:touch}
  .pgallery::-webkit-scrollbar{display:none}
  .pgallery{scrollbar-width:none}
  .pf{height:216px;scroll-snap-align:center}
  .pf:hover{transform:none} /* sin hover en táctil */

  .pcontent{order:2;flex:none;width:100%;text-align:center;padding:0 22px}
  .pbrand{font-size:13px;letter-spacing:4px;margin-bottom:12px}
  .ph1{font-size:29px}
  .ph1 br{display:none}
  .psub{font-size:14.5px;margin-left:auto;margin-right:auto}
  .pmains{justify-content:center;margin-top:22px}
  .pmain{font-size:15px;padding:14px 28px}
  .plinks{justify-content:center}
  .pcore{font-size:15px;margin-top:20px;margin-left:auto;margin-right:auto;max-width:340px;text-align:center}
  .ptrust{gap:6px 16px;padding:12px 16px;font-size:11.5px}
}

/* Tablet: 2 columnas de galería */
@media (min-width:721px) and (max-width:1000px){
  .mgrid{grid-template-columns:repeat(2,1fr)}
}

/* Teléfonos muy angostos */
@media (max-width:400px){
  .top .tab{font-size:10px;padding:8px 2px}
  .bn{font-size:18px;padding:4px 8px}
  .gcname{font-size:13px}
  .ph1{font-size:26px}
  .pf{height:196px}
  .pbrand{font-size:12.5px;letter-spacing:3.5px}
}