/* ============================================================ * ficha-mobile-accordion v9.css * * v9: Oculta en móvil el banner IA y el hero morado de campaña * para acceso rápido al configurador. * * Rediseño 100% MOBILE-ONLY del configurador de productos. * Convierte las secciones largas del configurador en un * acordeón numerado tipo prototype Claude Design (mayo 2026). * * Aplica a TODAS las familias (rótulos, lonas, vinilos, letras...). * El JS de acompañamiento (ficha-mobile-accordion.js) detecta los * .form-group.row del configurador y los agrupa en acordeones. * * Se activa SOLO con la clase .ficha-acordeon-mobile añadida al * por el JS cuando window.innerWidth <= 760. * ============================================================ */ @media (max-width: 760px) { /* ---- Variables ---- */ body.ficha-acordeon-mobile { --fma-accent: #90439e; --fma-accent-soft: #f4ecf5; --fma-accent-deep: #6b2d77; --fma-ink: #1a1a1a; --fma-ink-2: #3a3631; --fma-muted: #7c7565; --fma-bg: #faf8f4; --fma-line: #ece8e0; --fma-card-bg: #ffffff; background:#faf8f4; } /* ---- Reset ligero dentro del panel ---- */ body.ficha-acordeon-mobile #panel-config-prod hr { display:none; /* el acordeón aporta su propio separador */ } body.ficha-acordeon-mobile #panel-config-prod .card, body.ficha-acordeon-mobile #panel-config-prod .panel-config > .card { border:none; box-shadow:none; background:transparent; } body.ficha-acordeon-mobile #panel-config-prod .card-body { padding: 8px 6px 110px; } body.ficha-acordeon-mobile #panel-config-prod .listado-configs { display:flex; flex-direction:column; gap:10px; } /* ---- Tarjeta acordeón ---- */ body.ficha-acordeon-mobile .fma-section { background:var(--fma-card-bg); border:.5px solid var(--fma-line); border-radius:16px; overflow:hidden; transition: box-shadow .25s ease, border-color .25s ease; } body.ficha-acordeon-mobile .fma-section.open { box-shadow: 0 1px 0 #f3efe6, 0 10px 30px -16px rgba(38,30,14,0.18); border-color:#dcd6c9; } body.ficha-acordeon-mobile .fma-head { display:flex; align-items:center; padding:14px 16px; gap:12px; cursor:pointer; user-select:none; -webkit-tap-highlight-color: transparent; } body.ficha-acordeon-mobile .fma-num { width:28px;height:28px;border-radius:8px; background:#f4efe5;color:#7c7565; font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center;flex-shrink:0; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing:.5px; transition: background .2s ease, color .2s ease; } body.ficha-acordeon-mobile .fma-num.done { background:var(--fma-accent);color:#fff; } body.ficha-acordeon-mobile .fma-num.active { background:var(--fma-ink);color:#fff; } body.ficha-acordeon-mobile .fma-titles { flex:1;min-width:0; } body.ficha-acordeon-mobile .fma-title { font-size:15px;font-weight:600;color:var(--fma-ink); line-height:1.2;letter-spacing:-0.005em; margin:0; } body.ficha-acordeon-mobile .fma-summary { font-size:12px;color:var(--fma-muted); margin-top:3px;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } body.ficha-acordeon-mobile .fma-section.open .fma-summary { /* Cuando está abierta, el summary se vuelve más etéreo */ opacity:.7; } body.ficha-acordeon-mobile .fma-chev { width:28px;height:28px; display:flex;align-items:center;justify-content:center; color:#9a9485; transition: transform .25s ease, color .25s ease; flex-shrink:0; } body.ficha-acordeon-mobile .fma-section.open .fma-chev { transform: rotate(180deg); color:var(--fma-ink); } body.ficha-acordeon-mobile .fma-body { overflow:hidden; max-height:0; transition: max-height .35s cubic-bezier(.2,.8,.2,1); } body.ficha-acordeon-mobile .fma-section.open .fma-body { max-height: 9999px; } body.ficha-acordeon-mobile .fma-body-inner { padding: 0 16px 18px; border-top:.5px dashed var(--fma-line); margin: 4px 0 0; padding-top:14px; } /* ---- Cuando el body-inner contiene un form-group de Bootstrap legacy, re-maquillamos los labels para que respiren mejor en mobile ---- */ body.ficha-acordeon-mobile .fma-body-inner .form-group.row, body.ficha-acordeon-mobile .fma-body-inner .form-group { margin:0; display:block; } body.ficha-acordeon-mobile .fma-body-inner .col-form-label, body.ficha-acordeon-mobile .fma-body-inner > label, body.ficha-acordeon-mobile .fma-body-inner .col-sm-4.col-form-label { width:100% !important; max-width:100% !important; flex:0 0 100% !important; text-align:left !important; font-size:13px; font-weight:600; color:var(--fma-ink); margin-bottom:8px; padding:0 !important; } body.ficha-acordeon-mobile .fma-body-inner .col-sm-8, body.ficha-acordeon-mobile .fma-body-inner .col-sm-9, body.ficha-acordeon-mobile .fma-body-inner > .col-sm-12 { width:100% !important; max-width:100% !important; flex:0 0 100% !important; padding:0 !important; } /* ---- Inputs medidas (dimensiones) ---- */ body.ficha-acordeon-mobile .fma-body-inner input.acc-numerico, body.ficha-acordeon-mobile .fma-body-inner input.quantity-number, body.ficha-acordeon-mobile .fma-body-inner input[name="ancho"], body.ficha-acordeon-mobile .fma-body-inner input[name="alto"], body.ficha-acordeon-mobile .fma-body-inner input[type="number"] { background:#faf8f4; border:.5px solid #e8e4dc; border-radius:12px; padding:12px 14px; font-size:16px; /* evita zoom iOS */ font-weight:700; width:100%; color:var(--fma-ink); } body.ficha-acordeon-mobile .fma-body-inner input.acc-numerico:focus, body.ficha-acordeon-mobile .fma-body-inner input.quantity-number:focus, body.ficha-acordeon-mobile .fma-body-inner input[type="number"]:focus { outline:none; border-color:var(--fma-accent); background:#fff; box-shadow: 0 0 0 4px rgba(144,67,158,0.10); } /* Quitar spinners */ body.ficha-acordeon-mobile .fma-body-inner input[type="number"]::-webkit-outer-spin-button, body.ficha-acordeon-mobile .fma-body-inner input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none;margin:0; } body.ficha-acordeon-mobile .fma-body-inner input[type="number"] { -moz-appearance:textfield; } /* ---- Acabados (ojales, refuerzo, vaina...) — listado de iconos ---- */ body.ficha-acordeon-mobile .fma-body-inner .grupo-acabados, body.ficha-acordeon-mobile .fma-body-inner .form-check-inline, body.ficha-acordeon-mobile .fma-body-inner [class*="acabado"] .row { display:grid !important; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:8px; } body.ficha-acordeon-mobile .fma-body-inner .acab-card, body.ficha-acordeon-mobile .fma-body-inner .form-check-inline label { border-radius:12px; border:1.5px solid var(--fma-line); padding:10px; background:#fff; cursor:pointer; transition: border-color .15s, box-shadow .15s; } body.ficha-acordeon-mobile .fma-body-inner .acab-card:hover { border-color:var(--fma-accent); } body.ficha-acordeon-mobile .fma-body-inner .acab-card.selected, body.ficha-acordeon-mobile .fma-body-inner .acab-card[aria-selected="true"] { border-color:var(--fma-accent); background:var(--fma-accent-soft); box-shadow: 0 0 0 3px rgba(144,67,158,.10); } /* ---- Botón ANYADIR (in-form) — oculto en mobile (lo sustituye sticky bar) ---- */ body.ficha-acordeon-mobile #btn-add-cart3 { display:none !important; } /* ---- Header del panel (h1 / título producto) ---- */ body.ficha-acordeon-mobile #panel-config-prod h1, body.ficha-acordeon-mobile #panel-config-prod .product-title { font-size:20px; line-height:1.2; letter-spacing:-0.01em; margin:0 0 8px; padding: 0 8px; } /* ---- Plazos de entrega ---- */ /* Reset del wrapper btn-group de Bootstrap que aplica negative-margin */ body.ficha-acordeon-mobile .plazo-entrega-box { display:grid !important; grid-template-columns: 1fr 1fr 1fr; gap:8px; overflow:visible !important; width:100% !important; max-width:100% !important; flex:0 0 auto !important; padding:0 14px !important; margin:10px 0 !important; float:none !important; position:relative !important; left:0 !important; right:0 !important; box-sizing:border-box !important; } /* El .row que envuelve plazos (Bootstrap) tiene margin-right:-15px → neutralizar */ body.ficha-acordeon-mobile #panel-config-prod .row, body.ficha-acordeon-mobile .fma-extras .row { margin-left:0 !important; margin-right:0 !important; } /* Anular el btn-group de Bootstrap que usa display:inline-flex y position absoluta */ body.ficha-acordeon-mobile .btn-group.plazo-entrega-box { display:grid !important; } body.ficha-acordeon-mobile .btn-group.plazo-entrega-box > .btn, body.ficha-acordeon-mobile .btn-group.plazo-entrega-box > label.btn { margin-left:0 !important; border-radius:12px !important; flex:1 1 0 !important; } body.ficha-acordeon-mobile .btn-group.plazo-entrega-box > .btn:not(:first-child), body.ficha-acordeon-mobile .btn-group.plazo-entrega-box > .btn-group:not(:first-child) { margin-left:0 !important; } /* Contenedor padre del plazo-entrega-box: si es .row con margin-right negative, neutralizar */ body.ficha-acordeon-mobile .fma-extras > .row, body.ficha-acordeon-mobile .fma-extras .row { margin-left:0 !important; margin-right:0 !important; } body.ficha-acordeon-mobile .plazo-entrega-box label.btn, body.ficha-acordeon-mobile .plazo-entrega-box label.panel-fecha { border-radius:14px; border:1.5px solid var(--fma-line); background:#fff; padding:16px 8px !important; margin:0 !important; min-height:120px; height:auto; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; text-align:center; box-shadow:none; overflow:visible !important; box-sizing:border-box; position:relative !important; } body.ficha-acordeon-mobile .plazo-entrega-box label.btn.active, body.ficha-acordeon-mobile .plazo-entrega-box label.btn.fecha-selected, body.ficha-acordeon-mobile .plazo-entrega-box label.panel-fecha.active, body.ficha-acordeon-mobile .plazo-entrega-box label.panel-fecha.fecha-selected { background:var(--fma-accent) !important; border-color:var(--fma-accent) !important; color:#fff !important; } /* CRITICAL FIX v5: header-fecha original es position:absolute; top:0; left:0; background:white en main.css (1161) — tapaba los precios. Forzar estático. */ body.ficha-acordeon-mobile .plazo-entrega-box .header-fecha { position:static !important; top:auto !important; left:auto !important; width:auto !important; height:auto !important; background:transparent !important; background-color:transparent !important; padding:0 !important; margin:0 0 2px 0 !important; font-size:13.5px !important; font-weight:800 !important; font-style:normal !important; color:#1a1a1a !important; text-transform:none !important; letter-spacing:0 !important; line-height:1.2 !important; } body.ficha-acordeon-mobile .plazo-entrega-box label.active .header-fecha, body.ficha-acordeon-mobile .plazo-entrega-box label.fecha-selected .header-fecha { background:transparent !important; background-color:transparent !important; color:#fff !important; } /* Ocultar radios visibles que generan ruido */ body.ficha-acordeon-mobile .plazo-entrega-box input[type="radio"] { position:absolute !important; opacity:0 !important; pointer-events:none !important; width:0 !important; height:0 !important; margin:0 !important; } body.ficha-acordeon-mobile .plazo-entrega-box .panel-body, body.ficha-acordeon-mobile .plazo-entrega-box .precio-debajo-fecha { padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:3px !important; background:transparent !important; position:static !important; width:100% !important; } /* CRITICAL FIX v5: forzar máxima visibilidad de los precios */ body.ficha-acordeon-mobile .plazo-entrega-box .precio-fechas, body.ficha-acordeon-mobile #pr-fecha-1, body.ficha-acordeon-mobile #pr-fecha-2, body.ficha-acordeon-mobile #pr-fecha-3 { display:block !important; visibility:visible !important; opacity:1 !important; font-size:19px !important; font-weight:800 !important; font-style:normal !important; color:#1a1a1a !important; line-height:1.15 !important; letter-spacing:0 !important; margin:2px 0 !important; padding:0 !important; } body.ficha-acordeon-mobile .plazo-entrega-box label.active .precio-fechas, body.ficha-acordeon-mobile .plazo-entrega-box label.fecha-selected .precio-fechas { color:#fff !important; } body.ficha-acordeon-mobile .plazo-entrega-box .iva-fecha-box { background:#1a1a1a !important; color:#fff !important; padding:2px 8px !important; border-radius:99px; font-size:9px; font-weight:700; letter-spacing:.3px; margin-top:2px; line-height:1.2; transform:none !important; position:static !important; } body.ficha-acordeon-mobile .plazo-entrega-box label.active .iva-fecha-box, body.ficha-acordeon-mobile .plazo-entrega-box label.fecha-selected .iva-fecha-box { background:rgba(255,255,255,.25) !important; } body.ficha-acordeon-mobile .plazo-entrega-box .iva-fecha-content { position:static !important; right:auto !important; left:auto !important; top:auto !important; width:auto !important; background:transparent !important; background-color:transparent !important; padding:0 !important; color:inherit !important; font-size:9px !important; } body.ficha-acordeon-mobile .plazo-entrega-box .precio-old { display:none !important; } /* ---- Mini galería de imágenes del producto (encima del panel) ---- */ body.ficha-acordeon-mobile .producto-img, body.ficha-acordeon-mobile .galeria-imagenes, body.ficha-acordeon-mobile #carouselExampleControls { border-radius:18px; overflow:hidden; } } /* ============================================================ * STICKY CTA INFERIOR MOBILE * Sustituye al carro-pie-movil tradicional con un diseño tipo * prototype Claude (mini preview + total + barra envío gratis). * ============================================================ */ @media (max-width: 760px) { body.ficha-acordeon-mobile .carro-pie-movil-original { display:none !important; } .fma-sticky-cta { position:fixed;left:0;right:0;bottom:0;z-index:1100; background:#fff;border-top:1px solid #ece8e0; box-shadow: 0 -8px 24px rgba(0,0,0,.10); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display:none; /* JS lo enciende solo en mobile */ } body.ficha-acordeon-mobile .fma-sticky-cta { display:block; } .fma-sticky-progress { display:flex;align-items:center;gap:8px; font-size:11.5px;color:#6c685e; margin-bottom:6px;line-height:1.3; } .fma-sticky-progress .bar { flex:1;height:5px;background:#ece8e0;border-radius:99px;overflow:hidden; } .fma-sticky-progress .bar > i { display:block;height:100%;background:linear-gradient(90deg,#90439e,#b06abc); border-radius:99px;transition:width .25s ease; } .fma-sticky-progress b {color:#1a1a1a;font-weight:600;} .fma-sticky-row { display:flex;align-items:center;gap:12px; } /* v23: ocultar siempre el thumbnail por si quedara renderizado */ .fma-sticky-prev, .fma-sticky-no-thumb .fma-sticky-prev { display:none !important; } .fma-sticky-total { flex:1;min-width:0;line-height:1.2; display:flex;flex-direction:column;align-items:flex-start; } .fma-sticky-total .lbl { font-size:12px;color:#7c7565;font-weight:600; margin-bottom:2px; } .fma-sticky-total .val { font-size:24px;font-weight:800;color:#1a1a1a; letter-spacing:-0.01em; display:inline-block; } .fma-sticky-total .iva { font-size:11px;color:#7c7565;margin-left:6px;font-weight:500; } .fma-sticky-cta-btn { background:#90439e;color:#fff;border:none; padding:13px 18px;border-radius:12px; font-weight:800;font-size:13px;letter-spacing:.4px; text-transform:uppercase;cursor:pointer; box-shadow: 0 4px 12px rgba(144,67,158,.32); transition: background .15s, transform .1s; white-space:nowrap; } .fma-sticky-cta-btn:active { transform: scale(.97);background:#7a3786; } } /* ============================================================ * HERO MORADO MOBILE (solo lonas) — refuerza el de campaña ya existente * No hace nada en otras familias. * ============================================================ */ @media (max-width: 760px) { body.ficha-acordeon-mobile #rlm-campaign-hero { margin-bottom:14px !important; } } /* ============================================================ * FIX visuales reportados * ============================================================ */ @media (max-width: 760px) { /* La columna 3 (resumen, total, CTA grande) queda oculta en mobile porque su info está en la sticky bar. Evita duplicación y los huecos blancos enormes que aparecían cuando solo la columna tenía contenido. */ body.ficha-acordeon-mobile .fma-col3-hide, body.ficha-acordeon-mobile #resumenCosteNoMovil { display:none !important; } /* Sin ese contenedor, el panel principal debe ocupar 100% */ body.ficha-acordeon-mobile #panel-config-prod .col-md-9, body.ficha-acordeon-mobile #panel-config-prod .col-12 { flex: 0 0 100% !important; max-width:100% !important; } /* Los plazos de entrega NO deben tapar el precio: añadir margen inferior generoso */ body.ficha-acordeon-mobile .plazo-entrega-box { margin-bottom:10px; } /* La caja "El pedido llegará entre..." vuelve a ancho completo */ body.ficha-acordeon-mobile .info-pedido, body.ficha-acordeon-mobile .text-pedido-llegara, body.ficha-acordeon-mobile [class*="fecha-entrega"] { width:100%; padding:14px; font-size:13px; } /* v25: cero padding/margin al INICIO y FINAL del panel para eliminar huecos */ body.ficha-acordeon-mobile #panel-config-prod { padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; } /* La section que envuelve todo: sin padding-top en móvil */ body.ficha-acordeon-mobile section.flat-row.main-shop, body.ficha-acordeon-mobile section.flat-row.shop-detail, body.ficha-acordeon-mobile section.flat-row.style-1 { padding-top:0 !important; margin-top:0 !important; } /* Breadcrumb compacto */ body.ficha-acordeon-mobile .rlm-breadcrumb { margin:4px 8px 6px !important; padding:0 !important; font-size:12px !important; } /* Hero morado (lonas campaña): margen inferior reducido */ body.ficha-acordeon-mobile #rlm-campaign-hero { margin:0 4px 8px !important; } /* Cualquier elemento con m-t-lg / m-t-md de Bootstrap debajo del header */ body.ficha-acordeon-mobile #panel-config-prod .m-t-lg, body.ficha-acordeon-mobile #panel-config-prod .m-t-md, body.ficha-acordeon-mobile #panel-config-prod .mt-3, body.ficha-acordeon-mobile #panel-config-prod .mt-4, body.ficha-acordeon-mobile #panel-config-prod .mt-5 { margin-top:0 !important; } /* La row del configurador y simple-banner1 (carrusel): sin margen vertical */ body.ficha-acordeon-mobile #panel-config-prod > .row, body.ficha-acordeon-mobile #panel-config-prod > .container > .row { margin-top:0 !important; margin-bottom:0 !important; } body.ficha-acordeon-mobile #simple-banner1 { margin-top:0 !important; padding-top:0 !important; } /* v26: producto-asistido-select (modal-alt-config) puede dejar espacio en rótulos/letras */ body.ficha-acordeon-mobile #modal-alt-config:not(.modal-alt-config-visible), body.ficha-acordeon-mobile .modal-alt-config:not(.modal-alt-config-visible) { display:none !important; } /* Cualquier wrapper col-12 con margen-top vacío en el panel */ body.ficha-acordeon-mobile #panel-config-prod > div.col-12.m-t-lg:empty, body.ficha-acordeon-mobile #panel-config-prod .col-12.m-t-lg:empty { display:none !important; margin:0 !important; padding:0 !important; } /* En lonas con hero morado, evitar margen extra en el wrapper post-hero */ body.ficha-acordeon-mobile #rlm-campaign-hero + .row, body.ficha-acordeon-mobile #rlm-campaign-hero + div { margin-top:0 !important; } /* Mantener fin del panel sin margen (legacy v24) */ body.ficha-acordeon-mobile #panel-config-prod { padding-bottom:0 !important; margin-bottom:0 !important; } body.ficha-acordeon-mobile #panel-config-prod .panel-config { padding-bottom:0 !important; margin-bottom:0 !important; } body.ficha-acordeon-mobile #panel-config-prod .panel-config > .card { margin-bottom:0 !important; padding-bottom:0 !important; } body.ficha-acordeon-mobile #panel-config-prod .panel-config > .card > .card-body { padding-bottom:0 !important; } /* Elementos detectados como vacíos por JS v24 */ body.ficha-acordeon-mobile .fma-empty-hidden { display:none !important; } /* v30: ELIMINADO .fma-ojales-hide — "Distancia entre ojales" debe estar SIEMPRE visible en el acordeón. El observer de v27 generaba falsos positivos y la ocultaba sin necesidad. */ /* DENTRO del acordeón, anular el display:none que el script v2.1 pone con .distancia-ojales-hidden — porque la VISIBILIDAD se controla en la fma-section, no en el contenido. Si la sección no debe verse, JS le pone fma-ojales-hide. */ body.ficha-acordeon-mobile .fma-section .distancia-ojales-hidden, body.ficha-acordeon-mobile .fma-section .distancia-ojales-visible { display:block !important; visibility:visible !important; opacity:1 !important; height:auto !important; overflow:visible !important; pointer-events:auto !important; margin:0 !important; padding:0 !important; } /* v28 FIX CRÍTICO: el CSS original oculta los

de .lista-acc con display:none (solo se muestran al hacer click en el seleccionado). En móvil queremos TODAS las opciones visibles en grid 2 columnas. */ body.ficha-acordeon-mobile .listado-configs .lista-acc { background:transparent !important; border:none !important; display:grid !important; grid-template-columns: 1fr 1fr !important; gap:10px !important; padding:6px 4px !important; margin:0 !important; list-style:none !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc li { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; border:1.5px solid #e6e0d6 !important; border-radius:10px !important; background:#fff !important; margin:0 !important; padding:10px 6px !important; cursor:pointer !important; min-height:64px !important; text-align:center !important; list-style:none !important; width:100% !important; box-sizing:border-box !important; visibility:visible !important; opacity:1 !important; height:auto !important; overflow:visible !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc li.selected { border-color:#90439e !important; background:#faf5ff !important; box-shadow:0 0 0 2px rgba(144,67,158,.15) !important; } /* Última opción impar ocupa 2 columnas */ body.ficha-acordeon-mobile .listado-configs .lista-acc > li:nth-child(2n+1):last-child { grid-column: span 2 !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc .acc-no-img, body.ficha-acordeon-mobile .listado-configs .lista-acc .acc-img-box { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:4px !important; width:100% !important; text-align:center !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc .acc-no-img { font-size:13px !important; font-weight:600 !important; color:#1a1a1a !important; line-height:1.25 !important; padding:8px 4px !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc .acc-img-text { font-size:11.5px !important; font-weight:600 !important; color:#1a1a1a !important; line-height:1.2 !important; padding:4px 2px 0 !important; flex:0 0 auto !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc .img-acc-box { width:50px !important; height:50px !important; margin:0 auto !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc img.imagen-config { max-width:100% !important; max-height:50px !important; width:auto !important; height:auto !important; display:block !important; margin:0 auto !important; } body.ficha-acordeon-mobile .listado-configs .lista-acc .recomendado { display:inline-block !important; font-size:9px !important; background:#90439e !important; color:#fff !important; padding:1px 6px !important; border-radius:99px !important; margin-left:4px !important; vertical-align:middle !important; } /* v29: sección "ACCESORIOS" — grid 4 columnas con tarjetas más pequeñas */ body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .sec-acabados, body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .sec-acabados.row, body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .listado-configs .lista-acc, body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .lista-acc { grid-template-columns: repeat(4, 1fr) !important; gap:6px !important; } body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .sec-acabados .img-box { padding:4px !important; border-radius:8px !important; } body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .sec-acabados img.img-centered-of, body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .lista-acc img.imagen-config { max-height:34px !important; } body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .sec-acabados .centered, body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .lista-acc .acc-img-text { font-size:9.5px !important; line-height:1.15 !important; padding:2px 1px 0 !important; } body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .lista-acc li { padding:6px 4px !important; min-height:54px !important; } body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .lista-acc .acc-no-img { font-size:10.5px !important; padding:4px 2px !important; } body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .lista-acc .img-acc-box { width:34px !important; height:34px !important; } /* Anular "última opción impar span 2" en 4 columnas */ body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .sec-acabados > [class*="col-"]:nth-child(2n+1):last-child, body.ficha-acordeon-mobile .fma-section.fma-section-accesorios .lista-acc > li:nth-child(2n+1):last-child { grid-column: auto !important; } /* v23 — TODOS los .flat-row en móvil deben tener padding ajustado, no el de desktop (que suele ser ~80px arriba/abajo). */ body.ficha-acordeon-mobile section.flat-row { padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; } body.ficha-acordeon-mobile section.flat-row > .container, body.ficha-acordeon-mobile section.flat-row > .container-fluid { padding-top:0 !important; padding-bottom:0 !important; } body.ficha-acordeon-mobile section.flat-row.shop-detail-content { padding:0 !important; margin:0 !important; } body.ficha-acordeon-mobile section.flat-row.shop-detail-content .product-detail { margin:0 !important; padding:0 !important; } body.ficha-acordeon-mobile .mensaje-imagenes-final { margin:14px 8px !important; padding:18px !important; } /* Bloques de campaña entre panel y "Recuerda..." */ body.ficha-acordeon-mobile #rlm-campaign-power, body.ficha-acordeon-mobile #rlm-campaign-trust { margin:8px 4px !important; } /* Las pestañas inferiores "El producto / Descripción / Características / Condiciones" se ven gigantes en mobile — compactar */ body.ficha-acordeon-mobile .pestanya-detalles-prod, body.ficha-acordeon-mobile .nav-tabs { margin-top:10px; } body.ficha-acordeon-mobile .pestanya-detalles-prod .tab-pane, body.ficha-acordeon-mobile .tab-content .tab-pane { padding:14px 4px !important; font-size:14px; line-height:1.55; } /* Pestañas detalles (El producto / Descripción / Condiciones / etc): COMPACT */ body.ficha-acordeon-mobile .pestanya-detalles-prod ul.nav-tabs, body.ficha-acordeon-mobile .pestanya-detalles-prod .nav-tabs { flex-wrap:wrap; border-bottom:1.5px solid #ece8e0; margin:0; padding:0 4px; } body.ficha-acordeon-mobile .pestanya-detalles-prod .nav-item { flex:1 1 auto; min-width:0; } body.ficha-acordeon-mobile .pestanya-detalles-prod .nav-link { font-size:12px !important; padding:10px 4px !important; text-align:center; border:none !important; color:#6c685e !important; } body.ficha-acordeon-mobile .pestanya-detalles-prod .nav-link.active { color:#90439e !important; border-bottom:2.5px solid #90439e !important; font-weight:700 !important; } body.ficha-acordeon-mobile .tab-content ul { padding-left:18px; } /* Plazos de entrega: las tarjetas con precio en negrita */ body.ficha-acordeon-mobile .plazo-entrega-box label.btn .precio-plazo, body.ficha-acordeon-mobile .plazo-entrega-box label.btn b { display:block; font-size:14px; font-weight:800; color:#1a1a1a; margin-top:4px; } body.ficha-acordeon-mobile .plazo-entrega-box label.btn.active .precio-plazo, body.ficha-acordeon-mobile .plazo-entrega-box label.btn.active b { color:#fff; } /* Quitar espacios blancos enormes — pero SIN borrar contenidos */ body.ficha-acordeon-mobile section.flat-row.main-shop { padding:6px 0 !important; } body.ficha-acordeon-mobile section.flat-row { padding-top:6px !important; padding-bottom:6px !important; } body.ficha-acordeon-mobile .container { padding-left:8px !important; padding-right:8px !important; } /* La cinta morada "Recuerda: podrás enviar tus archivos al final del proceso de compra" suele ir DENTRO de un section vacío con padding 40-80px. Compactarlo: */ body.ficha-acordeon-mobile .archivos-fondo-box, body.ficha-acordeon-mobile .pre-container { padding:10px 6px !important; margin-top:0 !important; } body.ficha-acordeon-mobile .archivos-fondo-box .text-pedido, body.ficha-acordeon-mobile .archivos-fondo-box h3, body.ficha-acordeon-mobile [class*="aviso-pie"], body.ficha-acordeon-mobile [class*="recuerda"] { margin:8px 4px !important; padding:14px !important; font-size:14px; } /* Eliminar márgenes verticales gigantes del fix de plazos */ body.ficha-acordeon-mobile .info-pedido, body.ficha-acordeon-mobile [class*="fecha-entrega"] { margin: 10px 0 !important; } /* ========== v9: ocultar SOLO el banner IA en móvil ========== NO se oculta #rlm-campaign-hero (el bloque morado de campaña). */ body.ficha-acordeon-mobile #rlm-cta-generar-ia, body.ficha-acordeon-mobile .rlm-ia-generator-cta { display:none !important; } } /* v9: Fallback puro por media query — solo banner IA */ @media (max-width: 760px) { #rlm-cta-generar-ia, .rlm-ia-generator-cta { display:none !important; } } /* ============================================================ v21: OPCIONES DEL ACORDEÓN EN GRID 2x2 + envío portado a móvil ============================================================ */ @media (max-width: 760px) { /* Forzar grid 2 columnas en .sec-acabados (tipo de lona, características, etc.) */ body.ficha-acordeon-mobile .fma-section .sec-acabados.row, body.ficha-acordeon-mobile .fma-section .sec-acabados { display:grid !important; grid-template-columns: 1fr 1fr !important; gap:10px !important; margin:0 !important; padding:6px 4px !important; justify-content:stretch !important; } /* Cada opción ocupa 1 celda completa (anular Bootstrap col-*) */ body.ficha-acordeon-mobile .fma-section .sec-acabados > .col-6, body.ficha-acordeon-mobile .fma-section .sec-acabados > .col-md-2, body.ficha-acordeon-mobile .fma-section .sec-acabados > .col-md-3, body.ficha-acordeon-mobile .fma-section .sec-acabados > [class*="col-"] { max-width:100% !important; width:100% !important; flex:0 0 100% !important; padding:0 !important; margin:0 !important; } /* Si la cantidad es impar, la última ocupa 2 columnas */ body.ficha-acordeon-mobile .fma-section .sec-acabados > [class*="col-"]:nth-child(2n+1):last-child { grid-column: span 2 !important; } /* En secciones con MUCHAS opciones (>=6) → 3 columnas más compactas */ body.ficha-acordeon-mobile .fma-section .sec-acabados.fma-many-options { grid-template-columns: repeat(3, 1fr) !important; gap:8px !important; } body.ficha-acordeon-mobile .fma-section .sec-acabados.fma-many-options > [class*="col-"]:nth-child(2n+1):last-child { grid-column: auto !important; } body.ficha-acordeon-mobile .fma-section .sec-acabados.fma-many-options > [class*="col-"]:nth-child(3n+1):last-child { grid-column: span 3 !important; } body.ficha-acordeon-mobile .fma-section .sec-acabados.fma-many-options > [class*="col-"]:nth-child(3n+2):last-child { grid-column: span 2 !important; } /* Cards de opción más compactas */ body.ficha-acordeon-mobile .fma-section .sec-acabados .img-box { margin:0 !important; border-radius:10px !important; border:1.5px solid #e6e0d6 !important; padding:6px !important; background:#fff !important; transition: all .15s; } body.ficha-acordeon-mobile .fma-section .sec-acabados .img-box:has(img.selected) { border-color:#90439e !important; background:#faf5ff !important; box-shadow:0 0 0 2px rgba(144,67,158,.15) !important; } body.ficha-acordeon-mobile .fma-section .sec-acabados img.img-centered-of { max-width:100% !important; width:auto !important; height:auto !important; max-height:55px !important; object-fit:contain !important; margin:0 auto !important; display:block !important; } body.ficha-acordeon-mobile .fma-section .sec-acabados.fma-many-options img.img-centered-of { max-height:42px !important; } body.ficha-acordeon-mobile .fma-section .sec-acabados .centered { font-size:11.5px !important; line-height:1.2 !important; text-align:center !important; color:#1a1a1a !important; font-weight:600 !important; padding:4px 2px 2px !important; word-break:break-word !important; } body.ficha-acordeon-mobile .fma-section .sec-acabados.fma-many-options .centered { font-size:10.5px !important; } /* v21: Barra de envío gratis PORTADA a móvil */ .fma-envio-portal { margin:14px 4px !important; border-radius:14px !important; border:1.5px solid #e6e0d6 !important; background:#fff !important; box-shadow:none !important; } .fma-envio-portal .card-body { padding:14px !important; } .fma-envio-portal #progressBar { height:12px !important; border-radius:6px !important; } .fma-envio-portal #envio-texto, .fma-envio-portal #envio-gratis { font-size:12.5px !important; line-height:1.4 !important; } } /* ============================================================ v13: SECCIÓN "TAMAÑO Y CANTIDAD" Estilos para el wrapper .fma-tc que reemplaza visualmente los inputs nativos de Dimensiones + Cantidad. ============================================================ */ @media (max-width: 760px) { /* Ocultar contenido original de la sección Dimensiones */ body.ficha-acordeon-mobile .fma-tc-original-hide { display:none !important; } /* Ocultar la sección Cantidad original (su input #unidades-prod sigue en DOM) */ body.ficha-acordeon-mobile .fma-tc-cantidad-hide { display:none !important; } .fma-tc { display:flex; flex-direction:column; gap:14px; padding: 6px 4px 4px; font-family: inherit; } .fma-tc-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .fma-tc-box { background:#fff; border:1.5px solid #e6e0d6; border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; } .fma-tc-lbl { font-size:10.5px; font-weight:700; letter-spacing:.6px; color:#7a7568; text-transform:uppercase; } .fma-tc-val-row { display:flex; align-items:baseline; gap:6px; justify-content:space-between; } .fma-tc-val { font-size:28px; font-weight:800; color:#1a1a1a; line-height:1; cursor:pointer; user-select:none; border-bottom:2px dashed transparent; transition:border-color .15s; } .fma-tc-val:hover, .fma-tc-val:active { border-bottom-color:#90439e; } .fma-tc-unit { font-size:13px; color:#7a7568; font-weight:600; } .fma-tc-info { display:flex; align-items:center; gap:8px; padding:0 6px; font-size:12.5px; color:#555; line-height:1.45; } .fma-tc-info-i { font-size:11px; color:#90439e; flex-shrink:0; background:#f0e6f4; border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; } .fma-tc-info-t b { color:#1a1a1a; font-weight:700; } .fma-tc-info-t .fma-tc-area { color:#90439e; font-weight:800; } /* v19: chips de medidas en formato SLIDER horizontal — ahorra espacio vertical */ .fma-tc-chips { display:flex !important; grid-template-columns:none !important; gap:8px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 8px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .fma-tc-chips::-webkit-scrollbar { display:none; } .fma-tc-chip { flex:0 0 auto; background:#fff; border:1.5px solid #e6e0d6; border-radius:99px; padding:10px 18px; font-size:13.5px; font-weight:700; color:#1a1a1a; cursor:pointer; white-space:nowrap; font-family:inherit; text-align:center; line-height:1.25; transition: all .15s; } .fma-tc-chip:hover { border-color:#90439e; color:#90439e; } .fma-tc-chip.selected, .fma-tc-chip.popular.selected { background:#90439e !important; border-color:#90439e !important; color:#fff !important; } .fma-tc-chip.popular { border-color:#90439e; color:#90439e; font-weight:700; } .fma-tc-chip.popular:not(.selected) { background:#f5ecf7; } .fma-tc-qty-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 4px 2px; border-top:1px dashed #e6e0d6; margin-top:2px; padding-top:14px; } .fma-tc-qty-lbl { display:flex; flex-direction:column; gap:2px; } .fma-tc-qty-lbl strong { font-size:11px; font-weight:700; letter-spacing:.6px; color:#7a7568; text-transform:uppercase !important; /* v17: evita "CANT IDAD" cortado */ white-space:nowrap !important; word-break:keep-all !important; display:block !important; } .fma-tc-qty-row { flex-wrap:nowrap !important; } .fma-tc-qty-lbl { flex:1 1 auto; min-width:0; } .fma-tc-qty-ctrl { flex-shrink:0; } /* v15: en familias que NO son lonas, info y chips no se renderizan */ body.ficha-acordeon-mobile .fma-tc.fma-tc-no-lonas .fma-tc-info, body.ficha-acordeon-mobile .fma-tc.fma-tc-no-lonas .fma-tc-chips { display:none !important; } .fma-tc-qty-lbl small { font-size:11.5px; color:#9a9484; font-weight:400; } .fma-tc-qty-ctrl { display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #e6e0d6; border-radius:99px; padding:4px; } .fma-tc-qty-btn { width:32px; height:32px; border:none; background:transparent; color:#1a1a1a; font-size:18px; font-weight:700; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:inherit; transition: background .15s; } .fma-tc-qty-btn:hover, .fma-tc-qty-btn:active { background:#f0e6f4; color:#90439e; } .fma-tc-qty-val { min-width:24px; text-align:center; font-size:15px; font-weight:700; color:#1a1a1a; } } /* v12: Compactar #simple-banner2 (entre carrusel y configurador). Antes: título h2 + subtítulo + descripción larga + categorias + videos YouTube. Ahora: SOLO título + máximo 3 líneas de descripción. Solo móvil. Se ocultan: subtítulo redundante, categorías (ya en breadcrumb) y videos YouTube. */ @media (max-width: 760px) { #simple-banner2 { margin: 8px 0 12px !important; } #simple-banner2 .product-detail, #simple-banner2 .card { background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } #simple-banner2 .card-header { padding: 6px 12px !important; border: none !important; background: transparent !important; } #simple-banner2 h2.product-title { font-size: 18px !important; line-height: 1.25 !important; margin: 0 0 6px !important; font-weight: 700 !important; color: #1a1a1a !important; } /* PRIMER

dentro de card-header = subtítulo $p->getTitulo() → ocultar (redundante) */ #simple-banner2 .card-header > p:nth-of-type(1) { display: none !important; } /* SEGUNDO

= $p->getHeadDescription() → limitar a 3 líneas con elipsis */ #simple-banner2 .card-header > p:nth-of-type(2), #simple-banner2 .card-header > p:not(:first-of-type) { font-size: 13px !important; line-height: 1.5 !important; color: #4a4a4a !important; margin: 0 0 4px !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Categorías ya están en breadcrumb → ocultar */ #simple-banner2 .product-categories { display: none !important; } /* Videos YouTube: pesados, ocultar en móvil */ #simple-banner2 .card-body, #simple-banner2 .ytb-video, #simple-banner2 iframe[src*="youtube"], #simple-banner2 .content-detail { display: none !important; } } @media (max-width: 760px) { /* La info-pedido / fecha entre días no debe romper layout */ body.ficha-acordeon-mobile .info-pedido h4, body.ficha-acordeon-mobile .info-pedido .lead { font-size:14px; line-height:1.45; } }