/* ============================================================================= vistas/catalogo/producto.css — Ficha de producto (catalogo/producto.php) ----------------------------------------------------------------------------- Barra sticky, galería, caja de compra, acabados, características colapsables, banners y la calculadora de Cetelem. ============================================================================= */ /* ---------- BARRA STICKY ---------- */ /* Barra "frosted glass" translúcida estilo Apple (casi transparente + desenfoque). */ #barra-producto-sticky{position:fixed;top:0;left:0;right:0;z-index:1035; background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.08); transform:translateY(-100%);transition:transform .25s ease;will-change:transform} #barra-producto-sticky.visible{transform:translateY(0)} #barra-producto-sticky .bps-titulo{font-size:1rem;line-height:1.15} #barra-producto-sticky .bps-volver{cursor:pointer} #barra-producto-sticky .bps-volver:hover{color:var(--ss-first-color)} #barra-producto-sticky .bps-precios{line-height:1.1;margin-top:.1rem} #barra-producto-sticky .bps-precio{color:var(--ss-first-color);white-space:nowrap} #barra-producto-sticky .bps-precio-ant{color:#888;white-space:nowrap;font-weight:400;font-size:.85em} #barra-producto-sticky .bps-precio-ant:empty{display:none} #barra-producto-sticky .bps-anclas{display:flex;align-items:center;gap:1rem} #barra-producto-sticky .bps-caract{color:#555;white-space:nowrap;text-decoration:none} #barra-producto-sticky .bps-caract:hover{color:var(--ss-first-color)} #barra-producto-sticky .bps-toggle{display:none;background:none;border:0;color:#333;padding:.25rem .5rem;line-height:1} #barra-producto-sticky .bps-toggle i{transition:transform .2s ease} #barra-producto-sticky .bps-toggle.abierto i{transform:rotate(180deg)} #caracteristicas,#documentos,#wrapper-videos,#wrapper_valoraciones{scroll-margin-top:90px} /* Móvil: en lugar de todas las anclas, un chevron que despliega el listado. */ @media (max-width:767.98px){ #barra-producto-sticky .bps-titulo{font-size:.9rem} #barra-producto-sticky .bps-toggle{display:inline-flex} #barra-producto-sticky .bps-anclas{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:.25rem; background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.08);padding:.6rem 1rem;display:none} #barra-producto-sticky .bps-anclas.abierto{display:flex} } /* ---------- GALERÍA ---------- */ /* Foto grande. Pulsarla abre el lightbox, y lo avisa el cursor. */ .ficha-foto{max-height:440px} .ficha-imagen .ss-zoom{cursor:zoom-in} /* Tira de miniaturas de la ficha. SIN caja ni borde, igual que la foto grande: las fotos de catálogo ya vienen recortadas sobre blanco y el recuadro solo añadía ruido. object-fit:contain es imprescindible — con la altura y la anchura fijadas y sin él, el navegador estira la foto (que es lo que pasaba al reutilizar aquí .prod-thumb). */ .ficha-thumb{width:64px;height:64px;object-fit:contain;cursor:pointer; opacity:.75;transition:opacity .15s ease} .ficha-thumb:hover,.ficha-thumb:focus-visible{opacity:1} /* ---------- BANNERS PROMOCIONALES ---------- */ /* Van sobre la foto del producto (site-25: _banner-producto.asp). Si la imagen no existe, el onerror del marcado retira el bloque entero para no dejar un hueco. */ .banner-producto { width:100%; margin-bottom:1rem; } .banner-producto img { width:100%; border-radius:.5rem; } /* ---------- CAJA DE COMPRA ---------- */ /* Dentro del modal Comprar ocultamos financiación y compartir (via clase js-no-modal). */ .en-modal .js-no-modal{display:none!important} /* Franja de descuento por cupón: la cifra ("-5 %") más gruesa que el "DESCUENTO" de al lado. El aspecto de la franja (degradado, mayúsculas, tamaño) viene de custom-25.css; .h1 le pondría el peso de un titular, de ahí el selector doble. */ .franja-descuento .franja-descuento__cifra{font-weight:bolder} /* Logo de la marca sobre el nombre del producto. */ .ficha-marca-logo{max-height:30px} /* Icono de "garantía gratis". */ .ficha-garantia-icono{max-height:48px} /* Acabados: swatches clicables. El borde es SIEMPRE visible (gris) para que los acabados blancos/claros se distingan del fondo; al seleccionar cambia al color corporativo. */ .imgAcabados{width:38px;height:38px;object-fit:cover;cursor:pointer; background:#fff;border:2px solid #ced4da;box-shadow:0 0 0 1px rgba(0,0,0,.04)} .imgAcabados:hover{border-color:#6c757d} .imgAcabados.activo{border-color:var(--ss-first-color);box-shadow:0 0 0 2px rgba(0,0,0,.12)} /* ---------- ACCIONES (compartir · guardar · comparar) ---------- Los tres son SOLO ICONO dentro de un círculo del mismo tamaño y color, para que se lean como un grupo. El botón de compartir trae de serie un círculo negro metálico (.ssh__btn, componentes/compartir.css); aquí se le iguala al resto. La regla lleva `.ss-acciones` delante para ganar en especificidad al estilo del componente. */ .ss-acciones .ss-accion, .ss-acciones .ssh__btn { width:38px; height:38px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid #dee2e6; background:#fff; color:#8a9199; box-shadow:none; font-size:1rem; line-height:1; transition:color .15s ease, border-color .15s ease, background .15s ease; } .ss-acciones .ss-accion:hover, .ss-acciones .ssh__btn:hover { color:var(--ss-first-color); border-color:var(--ss-first-color); background:#fff; transform:none; } .ss-acciones .ss-accion.activo { color:#fff; background:var(--ss-first-color); border-color:var(--ss-first-color); } /* El abanico de compartir abierto ya se tiñe de corporativo en su propio componente. */ .ss-acciones .ssh.is-open .ssh__btn { border-color:var(--ss-first-color); } /* Los círculos de redes, en REPOSO, blancos como el resto de acciones (vienen negros metálicos del componente). Al pasar por encima NO se tocan a propósito: ahí cada red se pinta de su color de marca (X negro, Facebook azul, WhatsApp verde) con el icono en blanco. El :not(:hover) es lo que lo garantiza sin depender de qué hoja va antes (cuando el componente emitía su