/* gallery.css — pestañas de la cabecera, galería de murales y controles del configurador */

/* Pestañas sobre la cabecera clara (antes vivían en la barra lateral oscura) */
.top .tab{background:rgba(13,28,81,0.05);border:1px solid rgba(13,28,81,0.15);color:rgba(13,28,81,0.6);min-height:40px;padding:9px 18px;font-size:12px}
.top .tab:hover{background:rgba(13,28,81,0.09)}
.top .tab.on{background:var(--color-azul);color:var(--color-dorado);border-color:var(--color-azul)}
.topwa{font-size:13px}

/* ── Galería de murales: grilla comparable de un vistazo ── */
.mgal{background:var(--color-fondo);padding:26px 34px 44px}
.mgalhead{text-align:center;max-width:640px;margin:0 auto 26px}
.mgalhead h2{font-size:26px;font-weight:700;color:var(--color-azul);letter-spacing:-0.5px}
.mgalhead p{font-size:14.5px;color:#8a7d6a;margin-top:8px;line-height:1.5}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto}
.gcard{position:relative;display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid #e6ddd0;border-radius:14px;overflow:hidden;cursor:pointer;font-family:inherit;padding:0;transition:transform .12s,box-shadow .12s,border-color .12s}
.gcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(13,28,81,0.13);border-color:var(--color-dorado)}
/* Cada tarjeta muestra el mural montado en un AMBIENTE real (dormitorio, living, pasillo…),
   como cuadros colgados en esa pared, para que el cliente imagine dónde ponerlo en su casa.
   El ambiente del configurador va en blanco para que suba la foto de SU pared. */
.gthumb{position:relative;overflow:hidden;aspect-ratio:1/1;
  background:radial-gradient(120% 95% at 50% 18%,#f6f1e8 0%,#ece4d6 58%,#e2d8c7 100%);
  border-bottom:1px solid #e6ddd0}
.gthumb .gbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Número correlativo (01–10) del mural dentro de la grilla — badge en la esquina del ambiente. */
.gcnum{display:inline-block;vertical-align:middle;background:var(--color-azul);color:var(--color-dorado);font-size:12px;font-weight:700;line-height:1;letter-spacing:0.5px;padding:4px 7px;border-radius:5px;margin-right:8px}
/* Velo suave para que los cuadros claros/oscuros se lean sobre cualquier pared */
.gthumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,252,247,0.10) 0%,rgba(40,30,15,0.06) 100%)}
/* Overlay del mural: left/top marcan el CENTRO; width = tamaño del mural respecto a la tarjeta */
.goverlay{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex}
.goverlay .mthumb{width:100%;height:auto;filter:drop-shadow(2px 6px 7px rgba(30,22,10,0.34))}
.gcbody{position:relative;padding:16px 18px 18px}
.gcname{display:block;font-size:17px;font-weight:700;color:var(--color-azul);letter-spacing:-0.3px}
.gcdesc{display:block;font-size:12.5px;color:#7a7266;margin-top:5px;line-height:1.45;min-height:35px}
.gcprice{display:block;font-size:15px;font-weight:700;color:var(--color-acento);margin-top:8px}
.gctag{position:absolute;top:-13px;right:14px;font-size:10px;font-weight:700;letter-spacing:0.3px;padding:4px 10px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,0.14)}
.gctag.pop{background:var(--color-dorado);color:var(--color-azul)}
.gctag.promo{background:var(--color-acento);color:#fff}

/* ── Configurador: preview (izquierda) + panel de opciones/detalle (derecha) ── */
.backbtn{background:none;border:1px solid rgba(13,28,81,0.22);color:var(--color-azul);font-family:inherit;font-size:12px;font-weight:700;padding:8px 13px;border-radius:20px;cursor:pointer;letter-spacing:0.2px}
.backbtn:hover{background:var(--color-crema)}
/* El botón "← Todos los murales" fluye bajo el título del mural (ya no es un overlay
   absoluto sobre la imagen): el título encabeza el configurador y el botón va justo debajo. */
.cfgpreview .backbtn{align-self:flex-start;margin:10px 0 2px 14px;z-index:6;background:#fff;box-shadow:0 2px 8px rgba(13,28,81,0.12)}

/* Cabecera del panel COMPACTA: número + nombre + precio en una sola línea, medidas debajo.
   Así el título no quita espacio y las opciones (Marco, Tamaño…) quedan a la vista de inmediato. */
.cfghd{padding:13px 20px 11px;border-bottom:1px solid rgba(214,167,122,0.3)}
.cfghd-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.cfghd .bn{font-size:15px;padding:3px 10px}
.cfghd .bpr{position:static}
.cfghd .bna{font-size:19px;font-weight:700;color:var(--color-azul);letter-spacing:-0.4px;line-height:1.1}
.cfghd .cfghd-price{margin-left:auto;display:flex;align-items:baseline;gap:8px}
.cfghd .bde{font-size:12.5px;color:#7a7266;margin-top:2px;font-weight:600}
.cfghd .bpc{font-size:22px;font-weight:700;color:var(--color-acento);margin:0;letter-spacing:-0.5px}
/* Nota de upsell "cuadro extra 25% dcto" bajo el título (sets asimétricos) */
.cfgextra{margin:14px 20px 0;font-size:12px;line-height:1.5;color:#9A7B52;background:rgba(214,167,122,0.12);border:1px solid rgba(214,167,122,0.4);border-radius:8px;padding:9px 13px}
.cfgextra b{color:var(--color-azul);font-weight:700}

/* Barras de tamaño/paspartú dentro del panel: alineadas a la izquierda y compactas */
.cfgpanel #sizeBar,.cfgpanel #paspBar{justify-content:flex-start;flex-wrap:wrap;gap:8px 12px;padding:12px 20px}

/* Controles: marco / estilo / pared (columna) */
.cfgctl{display:flex;flex-direction:column;gap:15px;padding:16px 20px}
.cfgrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cfglbl{flex:0 0 100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9A7B52;margin-bottom:-3px}
.cfgctl .wallbtn{display:inline-block;width:auto;padding:9px 14px}
.cfgctl .wallclr{display:inline-block;width:auto;padding:0;color:#9A7B52}
.cfgrow-extra{gap:16px;padding:2px 20px 12px}
.cfgrow-extra .sendhelp{display:inline-block;width:auto;margin:0;color:var(--color-azul);border-color:rgba(13,28,81,0.25)}
.cfgrow-extra .sendhelp:hover{background:var(--color-crema);color:var(--color-azul)}
.cfgrow-extra .clr{display:inline-block;width:auto;padding:0;color:rgba(13,28,81,0.45)}
.cfgrow-extra .clr:hover{color:var(--color-azul)}

/* Detalle "qué incluye" por cuadro */
.cfgincludes{padding:4px 20px 8px}
.cfginct{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9A7B52;margin-bottom:6px}
.cfginc{list-style:none;padding:0;margin:0}
.cfginc li{padding:9px 0;border-top:1px solid rgba(214,167,122,0.25)}
.cfginc li b{display:block;color:var(--color-azul);font-weight:700;font-size:12.5px}
.cfginc li span{display:block;color:#7a7266;font-size:11.5px;margin-top:2px;line-height:1.4}
.cfgsep6{font-size:11.5px;color:#7a7266;margin-top:12px;line-height:1.5;background:rgba(214,167,122,0.1);border-radius:8px;padding:10px 12px}
.cfgsep6 b{color:var(--color-azul)}

/* Barra fija de venta también en escritorio (al cliente le gusta tenerla siempre visible) */
.mcta.show{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
  align-items:center;justify-content:flex-end;gap:20px;
  padding:10px 26px calc(10px + env(safe-area-inset-bottom));background:#fff;
  border-top:1px solid rgba(13,28,81,0.12);box-shadow:0 -4px 18px rgba(13,28,81,0.12)}
.mcta .mctaInfo{flex-direction:row;align-items:baseline;gap:10px;margin-right:auto}
.mcta .mctaName{font-size:14px}
.mcta .mctaPrice{font-size:24px}