/* ========================================================================= FICHA PREMIUM — sistema de diseño para los componentes de la ficha de producto/servicio (suscripción, combos, packs, stock, countdown, regalo, retiro, link-cards, confianza, barra de envío, sticky bar). Usa las variables de marca del tenant (--color-primario y variantes) definidas en head.php. Prefijo .fp- para no colisionar con el theme. ========================================================================= */ :root{ --fp-radius: 16px; --fp-radius-sm: 12px; --fp-border: #e7e7e9; --fp-border-strong: #d9d9dd; --fp-ink: #1d1d1f; --fp-muted: #6b6b73; --fp-soft: #f6f6f4; --fp-green: #1a8f52; --fp-green-bg: rgba(26, 143, 82, 0.10); --fp-shadow: 0 1px 2px rgba(20,20,25,.04), 0 6px 20px rgba(20,20,25,.06); --fp-shadow-hover: 0 2px 4px rgba(20,20,25,.06), 0 14px 34px rgba(20,20,25,.10); } /* ---------- galería fija en desktop ---------- El theme pone overflow-x:hidden en html y body (en body con !important); eso convierte a body en scroller y rompe position:sticky (mismo fix que carta.css: clip recorta el desborde horizontal sin crear scroller). */ @media (min-width: 992px){ html:has(div.container[id^="divProducto_"]){ overflow: visible; } body:has(div.container[id^="divProducto_"]){ overflow-x: clip !important; overflow-y: visible !important; } div.container[id^="divProducto_"] > .row > .col-lg-6:has(#swiperProductos){ position: sticky; top: 90px; align-self: flex-start; } div.container[id^="divServicio_"] > .row > .col-lg-6:has(#swiperProductos){ position: sticky; top: 90px; align-self: flex-start; } /* thumbnails verticales a la izquierda de la imagen principal */ div.container[id^="divProducto_"] #swiperProductos{ display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; } div.container[id^="divServicio_"] #swiperProductos{ display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; } div.container[id^="divProducto_"] #swiperProductos > .swiper-main{ grid-column: 2; grid-row: 1; min-width: 0; } div.container[id^="divServicio_"] #swiperProductos > .swiper-main{ grid-column: 2; grid-row: 1; min-width: 0; } div.container[id^="divProducto_"] #swiperThumbsProducto{ grid-column: 1; grid-row: 1; width: 84px; height: 100%; margin: 0; align-self: stretch; } div.container[id^="divServicio_"] #swiperThumbsProducto{ grid-column: 1; grid-row: 1; width: 84px; height: 100%; margin: 0; align-self: stretch; } /* Producto con una sola foto: no hay miniaturas, asi que la imagen toma todo el ancho. */ div.container[id^="divProducto_"] #swiperProductos.sin-miniaturas{ grid-template-columns: minmax(0, 1fr); column-gap: 0; } div.container[id^="divServicio_"] #swiperProductos.sin-miniaturas{ grid-template-columns: minmax(0, 1fr); column-gap: 0; } div.container[id^="divProducto_"] #swiperProductos.sin-miniaturas > .swiper-main{ grid-column: 1; } div.container[id^="divServicio_"] #swiperProductos.sin-miniaturas > .swiper-main{ grid-column: 1; } div.container[id^="divProducto_"] #swiperProductos.sin-miniaturas #swiperThumbsProducto{ display: none; } div.container[id^="divServicio_"] #swiperProductos.sin-miniaturas #swiperThumbsProducto{ display: none; } div.container[id^="divProducto_"] #swiperThumbsProducto .swiper-slide{ width: 84px !important; height: 84px !important; } div.container[id^="divServicio_"] #swiperThumbsProducto .swiper-slide{ width: 84px !important; height: 84px !important; } div.container[id^="divProducto_"] #swiperThumbsProducto .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; } div.container[id^="divServicio_"] #swiperThumbsProducto .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; } } /* chevrones de los thumbnails de la galeria (vertical en desktop, horizontal en mobile) */ .fp-thumbs-chevron{ position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: var(--fp-ink); padding: 0; } .fp-thumbs-chevron i{ font-size: 26px; line-height: 1; } .fp-thumbs-chevron:hover{ color: var(--color-primario); } .fp-thumbs-chevron-arriba, .fp-thumbs-chevron-abajo{ left: 0; width: 84px; height: 34px; } .fp-thumbs-chevron-arriba{ top: 0; background: linear-gradient(to bottom, #fff 60%, rgba(255,255,255,0)); } .fp-thumbs-chevron-abajo{ bottom: 0; background: linear-gradient(to top, #fff 60%, rgba(255,255,255,0)); } .fp-thumbs-chevron-izquierda, .fp-thumbs-chevron-derecha{ top: 0; height: 100%; width: 30px; } .fp-thumbs-chevron-izquierda{ left: 0; background: linear-gradient(to right, #fff 60%, rgba(255,255,255,0)); } .fp-thumbs-chevron-derecha{ right: 0; background: linear-gradient(to left, #fff 60%, rgba(255,255,255,0)); } /* video de youtube del slide: mantiene la proporcion cuadrada de las fotos y centra el video */ div.container[id^="divProducto_"] #swiperProductos .swiper-slide[data-video-slide="true"]{ display: flex; align-items: center; } div.container[id^="divProducto_"] #swiperProductos .swiper-slide[data-video-slide="true"] figure{ width: 100%; margin: 0; aspect-ratio: 1 / 1; display: flex; align-items: center; } div.container[id^="divProducto_"] #swiperProductos .swiper-slide[data-video-slide="true"] figure .video-container{ width: 100%; } div.container[id^="divProducto_"] .video-container{ position: relative; } div.container[id^="divProducto_"] .video-container .fp-video-captura{ position: absolute; inset: 0; z-index: 12; cursor: pointer; background: transparent; pointer-events: auto; } /* ---------- primitivos ---------- */ .fp-label{ display:flex; align-items:center; gap:.5rem; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fp-muted); margin-bottom:.6rem; } .fp-label .fp-num{ display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:var(--color-primario); color:#fff; font-size:11px; font-weight:800; letter-spacing:0; } .fp-save{ display:inline-flex; align-items:center; gap:.25rem; background:var(--fp-green-bg); color:var(--fp-green); font-size:12px; font-weight:800; line-height:1; padding:.32rem .5rem; border-radius:999px; white-space:nowrap; } .fp-badge-dark{ display:inline-flex; align-items:center; gap:.25rem; background:var(--fp-ink); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.03em; line-height:1; padding:.3rem .5rem; border-radius:6px; text-transform:uppercase; white-space:nowrap; } .fp-badge-accent{ display:inline-flex; align-items:center; gap:.25rem; background:var(--color-primario); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.03em; line-height:1; padding:.3rem .5rem; border-radius:6px; text-transform:uppercase; white-space:nowrap; } .fp-price{ font-size:20px; font-weight:800; color:var(--fp-ink); line-height:1; } .fp-price-old{ font-size:13px; color:var(--fp-muted); text-decoration:line-through; } /* ---------- card genérica ---------- */ .fp-card{ border:1.5px solid var(--fp-border); border-radius:var(--fp-radius); background:#fff; box-shadow:var(--fp-shadow); } /* Los componentes de la ficha son hijos directos del flex del precio/cantidad; sin width:100% no ocupan el ancho completo y se acomodan mal. */ #divSuscripcionProducto, #divCombosProducto, #divCuentaRegresivaPromocion, .fp-pickup, .fp-gift, .fp-combo, .fp-countdown{ width:100%; } /* ========================================================================= SUSCRIPCIÓN — radio plan cards (F14) ========================================================================= */ .fp-plans{ display:flex; flex-direction:column; gap:.65rem; margin:.25rem 0 .5rem; } .fp-plan{ position:relative; display:flex; gap:.75rem; align-items:flex-start; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius); background:#fff; padding:.9rem 1rem; cursor:pointer; transition:border-color .16s ease, background .16s ease, box-shadow .16s ease; } .fp-plan:hover{ border-color:var(--fp-border-strong); box-shadow:var(--fp-shadow); } .fp-plan.is-selected{ border-color:var(--color-primario); background:var(--color-primario-10); box-shadow:0 0 0 1px var(--color-primario); } .fp-plan-radio{ flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%; border:2px solid var(--fp-border-strong); background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:border-color .16s ease; } .fp-plan.is-selected .fp-plan-radio{ border-color:var(--color-primario); } .fp-plan.is-selected .fp-plan-radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--color-primario); } .fp-plan-body{ flex:1 1 auto; min-width:0; } .fp-plan-head{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.3rem; } .fp-plan-title{ font-size:15px; font-weight:800; color:var(--fp-ink); } .fp-plan-desc{ font-size:12.5px; color:var(--fp-muted); margin-top:.2rem; line-height:1.35; } .fp-plan-prices{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; text-align:right; white-space:nowrap; } .fp-plan-prices .fp-price small{ font-size:12px; font-weight:600; color:var(--fp-muted); } .fp-plan-save{ font-size:12px; font-weight:800; color:var(--fp-green); margin-top:.15rem; } /* ========================================================================= PACKS POR CANTIDAD — tier cards seleccionables (F11) ========================================================================= */ #divDescuentosCantidadProducto{ width:100%; } .fp-packs{ display:flex; flex-wrap:wrap; gap:.55rem; margin:.25rem 0 .4rem; } .fp-pack{ flex:0 0 auto; min-width:175px; position:relative; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm); background:#fff; padding:.85rem .9rem .7rem; text-align:center; cursor:pointer; transition:border-color .16s ease, background .16s ease, transform .12s ease; } .fp-pack:hover{ border-color:var(--fp-border-strong); transform:translateY(-1px); } .fp-pack.is-selected{ border-color:var(--color-primario); background:var(--color-primario-10); box-shadow:0 0 0 1px var(--color-primario); } .fp-pack-qty{ font-size:15px; font-weight:800; color:var(--fp-ink); line-height:1.1; } .fp-pack-off{ display:inline-block; margin-top:.35rem; font-size:12px; font-weight:800; color:var(--fp-green); } .fp-pack-unit{ font-size:11.5px; color:var(--fp-muted); margin-top:.2rem; } .fp-pack-tag{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--color-primario); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:.18rem .45rem; border-radius:999px; white-space:nowrap; } /* ========================================================================= COMBOS — bundle visual (F12) ========================================================================= */ .fp-combo{ border:1.5px solid var(--fp-border); border-radius:var(--fp-radius); background:linear-gradient(180deg, var(--color-primario-10), #fff 42%); padding:1rem; margin-top:.9rem; } .fp-combo-title{ display:flex; align-items:center; gap:.4rem; font-size:14.5px; font-weight:800; color:var(--fp-ink); margin-bottom:.75rem; } .fp-combo-title i{ color:var(--color-primario); } .fp-combo-items{ display:flex; align-items:center; justify-content:center; gap:.35rem; flex-wrap:wrap; margin-bottom:.75rem; } .fp-combo-thumb{ width:64px; height:64px; border-radius:12px; border:1.5px solid var(--fp-border); background:#fff center/cover no-repeat; flex:0 0 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; } .fp-combo-thumb img{ width:100%; height:100%; object-fit:cover; } .fp-combo-thumb .fp-combo-qty{ position:absolute; } .fp-combo-plus{ color:var(--fp-muted); font-size:18px; font-weight:700; } .fp-combo-list{ font-size:12.5px; color:var(--fp-muted); margin-bottom:.6rem; } .fp-combo-list-row{ display:flex; justify-content:space-between; gap:1rem; padding:.12rem 0; } .fp-combo-total{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px dashed var(--fp-border-strong); padding-top:.65rem; } .fp-combo-total .fp-combo-now{ font-size:20px; font-weight:800; color:var(--fp-ink); } .fp-combo-btn{ display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; margin-top:.8rem; padding:.8rem 1rem; border:none; border-radius:12px; background:var(--color-primario); color:#fff; font-size:14px; font-weight:800; cursor:pointer; transition:filter .15s ease; } .fp-combo-btn:hover{ filter:brightness(.94); } /* ========================================================================= STOCK BAJO — chip + barra (F1) ========================================================================= */ .fp-qty-stock{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.6rem .75rem; flex:1 1 100%; min-width:0; } .fp-qty-stock > *{ flex:0 0 auto; } [data-fp-bloque="precio"] > .d-flex{ gap:0; } [data-fp-bloque="precio"] > .d-flex > [id^="txtDescuento_"]{ margin-left:.45rem; } .fp-qty-stock .fp-stock{ margin:0; } [id^="preciosProducto_"] .number-picker .input-group{ width:140px !important; } [id^="preciosProducto_"] .number-picker .input-group input.form-control{ padding-left:.25rem !important; padding-right:.25rem !important; text-align:center; } .fp-qty-stock [id^="divStockProducto_"] .mb-4{ margin-bottom:0 !important; } .fp-stock{ margin:.5rem 0; } .fp-stock-chip{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(214,69,42,.10); color:#c0341c; font-size:13px; font-weight:800; padding:.4rem .7rem; border-radius:999px; } .fp-stock-chip i{ font-size:16px; } .fp-stock-bar{ height:6px; border-radius:999px; background:rgba(214,69,42,.14); margin-top:.5rem; overflow:hidden; max-width:260px; } .fp-stock-bar > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#e0592f,#c0341c); } /* ========================================================================= FAQ — preguntas desplegables con transicion (F3) ========================================================================= */ .fp-faq-item{ border-bottom:1px solid var(--fp-border); } .fp-faq-item:last-child{ border-bottom:0; } .fp-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:none; border:0; padding:.85rem 0; text-align:left; cursor:pointer; font-size:15px; font-weight:700; color:var(--fp-ink); } .fp-faq-q i{ color:var(--color-primario); font-size:18px; flex:0 0 auto; transition:transform .3s ease; } .fp-faq-item.is-open .fp-faq-q i{ transform:rotate(180deg); } .fp-faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; } .fp-faq-item.is-open .fp-faq-a{ grid-template-rows:1fr; } .fp-faq-a-inner{ overflow:hidden; } .fp-faq-a-inner > :last-child{ margin-bottom:.9rem; } /* ========================================================================= COUNTDOWN — cajas HRS/MIN/SEG (F4) ========================================================================= */ .fp-countdown{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; border:1.5px solid var(--color-primario-30); border-radius:var(--fp-radius); background:linear-gradient(120deg, var(--color-primario-20), var(--color-primario-10)); color:var(--fp-ink); padding:.7rem .9rem; margin-bottom:1rem; } .fp-countdown-left{ display:flex; flex-direction:column; gap:.15rem; } .fp-countdown-label{ display:flex; align-items:center; gap:.4rem; font-size:14px; font-weight:800; color:var(--fp-ink); } .fp-countdown-label i{ color:var(--color-primario); } .fp-countdown-link{ display:inline-flex; align-items:center; gap:.15rem; font-size:12.5px; font-weight:700; color:var(--color-primario); text-decoration:none; } .fp-countdown-link:hover{ opacity:.75; } .fp-countdown-boxes{ display:flex; align-items:center; gap:.35rem; } .fp-countdown-der{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; margin-left:auto; } .fp-countdown.fp-countdown-apilado .fp-countdown-der{ width:100%; margin-left:0; align-items:center; } .fp-countdown-titulo{ font-size:14.5px; font-weight:800; color:var(--fp-ink); } .fp-cd-box{ display:flex; flex-direction:column; align-items:center; background:#fff; color:var(--color-primario); border:1.5px solid var(--color-primario-30); border-radius:8px; padding:.35rem .5rem; min-width:40px; } .fp-cd-num{ font-size:16px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; } .fp-cd-unit{ font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.7; margin-top:.15rem; } .fp-cd-sep{ font-weight:800; color:var(--fp-muted); } /* ========================================================================= REGALO — gift card (F13) ========================================================================= */ .fp-gift{ display:flex; align-items:center; gap:.75rem; border:1.5px solid var(--color-primario-30); border-radius:var(--fp-radius); background:linear-gradient(120deg, var(--color-primario-20), var(--color-primario-10)); padding:.8rem 1rem; margin-bottom:1rem; } .fp-gift-ico{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--color-primario); box-shadow:var(--fp-shadow); } .fp-gift-ico i{ font-size:22px; } .fp-gift-txt{ font-size:13.5px; color:var(--fp-ink); line-height:1.35; } .fp-gift-txt b{ font-weight:800; } /* ========================================================================= RETIRO EN LOCAL — card expandible (F5) ========================================================================= */ .fp-pickup{ border:1.5px solid var(--fp-border); border-radius:var(--fp-radius); background:#fff; padding:.85rem 1rem; margin-top:1rem; } .fp-pickup-head{ display:flex; align-items:flex-start; gap:.7rem; } .fp-pickup-ico{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--color-primario-10); color:var(--color-primario); display:flex; align-items:center; justify-content:center; } .fp-pickup-ico i{ font-size:19px; } .fp-pickup-title{ font-size:13.5px; font-weight:800; color:var(--fp-ink); line-height:1.3; } .fp-pickup-sub{ display:block; font-size:12.5px; color:var(--fp-muted); line-height:1.4; } .fp-pickup-toggle{ font-size:12.5px; font-weight:700; color:var(--color-primario); cursor:pointer; } .fp-pickup-list{ margin-top:.7rem; border-top:1px solid var(--fp-border); padding-top:.6rem; } .fp-pickup-item{ font-size:12.5px; color:var(--fp-ink); padding:.25rem 0; } .fp-pickup-item b{ font-weight:700; } /* ========================================================================= LINK-CARDS — medios de pago, guía de talles (F8, F10) ========================================================================= */ .fp-linkrow{ display:flex; align-items:center; gap:.7rem; width:100%; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm); background:#fff; padding:.7rem .9rem; margin:.4rem 0; cursor:pointer; text-align:left; transition:border-color .15s ease, background .15s ease; } .fp-linkrow:hover{ border-color:var(--color-primario); background:var(--color-primario-10); } .fp-linkrow-ico{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--color-primario-10); color:var(--color-primario); display:flex; align-items:center; justify-content:center; } .fp-linkrow-ico i{ font-size:19px; } .fp-linkrow-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .fp-linkrow-title{ display:block; font-size:13.5px; font-weight:800; color:var(--fp-ink); line-height:1.25; } .fp-linkrow-sub{ display:block; font-size:11.5px; color:var(--fp-muted); line-height:1.2; } .fp-linkrow-chev{ flex:0 0 auto; color:var(--fp-muted); } /* ========================================================================= CONFIANZA — franja envío/garantía/pago (trust badges) ========================================================================= */ .fp-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem; margin:.9rem 0; width:100%; } .fp-trust-item{ display:flex; align-items:center; gap:.4rem; font-size:12px; color:var(--fp-muted); font-weight:600; } .fp-trust-item i{ font-size:17px; color:var(--color-primario); } /* ========================================================================= COMPARTIR — botón junto al título que abre "Compartí este producto" (assets/php/compartir_ficha.php). En la compu la ventana sale centrada; en el celular sube desde abajo, como el menú de compartir del teléfono. Cada red es un círculo con su color y su logo, y el nombre abajo. SMS y "Más" solo se ven en el celular. Los colores neutros salen de currentColor para servir igual en modo oscuro. ========================================================================= */ .fp-compartir-boton{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 0 0 auto; padding:0; border-radius:50%; border:1.5px solid rgba(127,127,127,.28); background:transparent; color:var(--color-primario); font-size:19px; line-height:1; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease; } .fp-compartir-boton:hover{ border-color:var(--color-primario); background:var(--color-primario-10); } .fp-compartir-boton:active{ transform:scale(.92); } /* El título no se pega al botón, y el corazón de favoritos queda al lado */ .d-flex:has(> .fp-compartir-boton){ column-gap:.75rem; } .fp-compartir-boton + .material-symbols-rounded{ margin-bottom:0 !important; } /* WhatsApp directo: a la izquierda del de compartir, más pegado a él y con su mismo estilo. El logo lleva la flechita de compartir superpuesta (iconoWhatsappCompartirFicha en assets/php/compartir_ficha.php). */ .fp-compartir-boton + .fp-compartir-boton{ margin-left:-.25rem; } .fp-compartir-boton-whatsapp, .fp-compartir-boton-whatsapp:hover, .fp-compartir-boton-whatsapp:focus{ color:var(--color-primario); text-decoration:none; } .fp-compartir-boton-whatsapp svg{ width:21px; height:21px; } /* ========================================================================= FAVORITOS (assets/js/favoritos.js) El corazón de la ficha es un botón redondo igual al de compartir, a su derecha, y se llena cuando el producto está guardado: con los favoritos del navegador (parámetro apagado) y con Lo quiero / Lo tengo (MENU_FAVORITOS_TENGO_QUIERO). Con Lo quiero / Lo tengo abre el popover para elegir la lista (#popFavoritosTengoQuiero en footer.php), que también abre el corazón de cada tarjeta de la pantalla de Favoritos (favoritos.php). El panel de la barra (#favoritosMenu) lleva las pestañas del sitio, siempre una al lado de la otra. Los colores salen de las variables del sitio y, en los sitios oscuros, de su paleta --oscuro-*. ========================================================================= */ .fp-favoritos-boton i{ font-size:21px; line-height:1; } /* Los íconos de Lo quiero / Lo tengo son SVG en línea (iconoTengoQuieroFavoritos en assets/ajax/secciones/favoritos/_tengo_quiero_favoritos.php), no la fuente de ligaduras: con la fuente el ícono es una palabra que se ve como texto hasta que el archivo de la fuente llena termina de bajar, y eso era el parpadeo al elegir. El corazón y el de Lo tengo traen el trazo vacío y el lleno, y acá se muestra uno u otro según el estado del botón: el JS sólo cambia la clase o el aria-pressed, nunca el ícono. Miden 1em, como el glifo de la fuente. */ .icono-favoritos-tq{ display:inline-block; flex:0 0 auto; width:1em; height:1em; fill:currentColor; vertical-align:middle; pointer-events:none; } .icono-favoritos-tq .icono-favoritos-tq-lleno{ display:none; } .fp-favoritos-boton-activo .icono-favoritos-tq .icono-favoritos-tq-vacio, .pop-favoritos-tq-chip[aria-pressed="true"] .icono-favoritos-tq .icono-favoritos-tq-vacio{ display:none; } .fp-favoritos-boton-activo .icono-favoritos-tq .icono-favoritos-tq-lleno, .pop-favoritos-tq-chip[aria-pressed="true"] .icono-favoritos-tq .icono-favoritos-tq-lleno{ display:inline; } .fp-favoritos-boton .icono-favoritos-tq{ font-size:21px; } .fp-favoritos-boton-activo{ border-color:var(--color-primario); } .fp-favoritos-boton[aria-expanded="true"]{ border-color:var(--color-primario); background:var(--color-primario-10); } .btn-tengo-quiero-favoritos.favoritos-latido .icono-favoritos-tq{ animation:favoritosLatido .5s cubic-bezier(.3,1.6,.5,1); } @keyframes favoritosLatido{ 0%{ transform:scale(1); } 40%{ transform:scale(1.28); } 70%{ transform:scale(.92); } 100%{ transform:scale(1); } } @keyframes favoritosOnda{ 0%{ opacity:.75; transform:scale(1); } 100%{ opacity:0; transform:scale(1.9); } } /* El popover: una tarjeta chica anclada al corazón, con flecha. Arriba el estado y una X discreta; en el medio las dos listas como un control segmentado, con un indicador que se desliza hasta la elegida mientras el color y el ícono del chip cambian; abajo, en la misma fila, "Quitar de favoritos" discreto a la izquierda y "Ver todos" a la derecha. Abre con un leve desplazamiento desde el corazón y queda abierto después de elegir. */ .pop-favoritos-tq{ --ftq-fondo:#fff; --ftq-texto:#1d2026; --ftq-suave:#6b7079; --ftq-borde:rgba(24,28,38,.12); --ftq-carril:rgba(24,28,38,.05); --ftq-acento:var(--color-primario); --ftq-sobre-acento:#fff; --ftq-peligro:#c2413b; --ftq-sombra:0 18px 40px -14px rgba(16,20,32,.32), 0 3px 10px -4px rgba(16,20,32,.12); --ftq-borde-caja:var(--ftq-borde); /* Por encima de los botones flotantes (WhatsApp, chat) */ position:fixed; top:0; left:0; z-index:10000; width:252px; max-width:calc(100vw - 24px); margin:0; padding:8px 10px 6px 12px; border:1px solid var(--ftq-borde-caja); border-radius:14px; background:var(--ftq-fondo); color:var(--ftq-texto); box-shadow:var(--ftq-sombra); text-align:left; font-size:13px; line-height:1.3; opacity:0; transform:translateY(-5px) scale(.97); transform-origin:var(--flecha-x, 50%) 0; transition:opacity .15s ease, transform .2s cubic-bezier(.2,.9,.25,1.15); } .pop-favoritos-tq[hidden]{ display:none; } .pop-favoritos-tq[data-lado="arriba"]{ transform:translateY(5px) scale(.97); transform-origin:var(--flecha-x, 50%) 100%; } .pop-favoritos-tq.abierto{ opacity:1; transform:none; } .pop-favoritos-tq.sin-transicion, .pop-favoritos-tq.sin-transicion *{ transition:none !important; } .pop-favoritos-tq::before{ content:""; position:absolute; top:-6px; left:calc(var(--flecha-x, 50%) - 6px); width:12px; height:12px; border-top:1px solid var(--ftq-borde-caja); border-left:1px solid var(--ftq-borde-caja); border-top-left-radius:3px; background:var(--ftq-fondo); transform:rotate(45deg); } .pop-favoritos-tq[data-lado="arriba"]::before{ top:auto; bottom:-6px; transform:rotate(225deg); } .pop-favoritos-tq[data-lado="centro"]::before{ display:none; } .pop-favoritos-tq-cabecera{ display:flex; align-items:center; gap:6px; min-height:26px; margin-bottom:7px; } .pop-favoritos-tq-titulo{ flex:1 1 auto; min-width:0; margin:0; font-size:12.5px; font-weight:600; line-height:1.3; color:var(--ftq-suave); } .pop-favoritos-tq[data-tipo="1"] .pop-favoritos-tq-titulo, .pop-favoritos-tq[data-tipo="2"] .pop-favoritos-tq-titulo{ color:var(--ftq-texto); } .pop-favoritos-tq.error .pop-favoritos-tq-titulo{ color:var(--ftq-peligro); } /* El control segmentado: un carril con los dos chips y el indicador que se desliza abajo de ellos */ .pop-favoritos-tq-segmento{ position:relative; display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid var(--ftq-borde); border-radius:999px; background:var(--ftq-carril); } .pop-favoritos-tq-indicador{ position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:999px; background:var(--ftq-acento); box-shadow:0 3px 10px -3px color-mix(in srgb, var(--ftq-acento) 70%, transparent); opacity:0; transform:translateX(0) scale(.9); transition:transform .34s cubic-bezier(.34,1.3,.5,1), opacity .18s ease; } .pop-favoritos-tq[data-indicador="2"] .pop-favoritos-tq-indicador{ transform:translateX(100%) scale(.9); } .pop-favoritos-tq[data-tipo="1"] .pop-favoritos-tq-indicador{ opacity:1; transform:translateX(0); } .pop-favoritos-tq[data-tipo="2"] .pop-favoritos-tq-indicador{ opacity:1; transform:translateX(100%); } .pop-favoritos-tq .pop-favoritos-tq-chip{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:32px; margin:0; padding:0 8px; border:0; border-radius:999px; background:transparent; box-shadow:none; color:var(--ftq-texto); font:inherit; font-size:13px; font-weight:600; letter-spacing:0; white-space:nowrap; cursor:pointer; transition:color .22s ease; } .pop-favoritos-tq .pop-favoritos-tq-chip:not([aria-pressed="true"]):hover{ color:var(--ftq-acento); } .pop-favoritos-tq .pop-favoritos-tq-chip[aria-pressed="true"]{ color:var(--ftq-sobre-acento); } .pop-favoritos-tq .pop-favoritos-tq-chip:focus{ outline:none; } .pop-favoritos-tq .pop-favoritos-tq-chip:focus-visible{ outline:2px solid var(--ftq-acento); outline-offset:2px; } .pop-favoritos-tq-chip .icono-favoritos-tq{ font-size:17px; } .pop-favoritos-tq-chip.confirmada .icono-favoritos-tq{ animation:favoritosLatido .5s cubic-bezier(.3,1.6,.5,1); } .pop-favoritos-tq.guardando .pop-favoritos-tq-chip{ cursor:progress; } /* "Ver todos", arriba a la derecha, al lado del texto */ .pop-favoritos-tq .pop-favoritos-tq-enlace{ display:inline-flex; flex:0 0 auto; align-items:center; gap:1px; min-height:30px; margin-left:auto; padding:0 0 0 2px; font-size:12.5px; font-weight:600; white-space:nowrap; color:var(--ftq-acento); text-decoration:none; } .pop-favoritos-tq .pop-favoritos-tq-enlace .icono-favoritos-tq{ font-size:17px; transition:transform .15s ease; } .pop-favoritos-tq .pop-favoritos-tq-enlace:hover{ color:var(--ftq-acento); } .pop-favoritos-tq .pop-favoritos-tq-enlace:hover .icono-favoritos-tq{ transform:translateX(2px); } .pop-favoritos-tq .pop-favoritos-tq-enlace:focus-visible{ outline:2px solid var(--ftq-acento); outline-offset:1px; } html.sitio-oscuro .pop-favoritos-tq{ --ftq-fondo:var(--oscuro-panel-2); --ftq-texto:var(--oscuro-texto); --ftq-suave:var(--oscuro-texto-suave); --ftq-borde:var(--oscuro-borde); --ftq-borde-caja:var(--oscuro-borde-acento); --ftq-carril:rgba(255,255,255,.04); --ftq-acento:var(--oscuro-acento); --ftq-sobre-acento:var(--oscuro-texto-inverso); --ftq-peligro:#ef8f88; --ftq-sombra:0 22px 48px -16px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.4); } /* Celular: el mismo popover anclado al corazón, apenas más ancho y con chips más altos para el dedo */ @media (max-width:575.98px){ .pop-favoritos-tq{ width:272px; } .pop-favoritos-tq .pop-favoritos-tq-chip{ height:38px; font-size:13.5px; } .pop-favoritos-tq .pop-favoritos-tq-enlace{ min-height:36px; } } @media (prefers-reduced-motion:reduce){ .pop-favoritos-tq, .pop-favoritos-tq[data-lado="arriba"]{ transform:none; transition:opacity .12s linear; } .pop-favoritos-tq-indicador{ transition:opacity .12s linear; } .pop-favoritos-tq-chip.confirmada .icono-favoritos-tq, .btn-tengo-quiero-favoritos.favoritos-latido .icono-favoritos-tq{ animation:none; } } #favoritosMenu .favoritos-tengo-quiero-tabs{ flex-direction:row; flex-wrap:nowrap; gap:.5rem; } #favoritosMenu .favoritos-tengo-quiero-tabs .nav-item{ flex:1 1 0; margin-bottom:0; } #favoritosMenu .favoritos-tengo-quiero-tabs .nav-link{ justify-content:center; margin-right:0; white-space:nowrap; background:transparent; color:rgba(255,255,255,.75); border:1.5px solid rgba(255,255,255,.22); box-shadow:none; transition:border-color .15s ease, color .15s ease; } #favoritosMenu .favoritos-tengo-quiero-tabs .nav-link:hover{ color:#fff; border-color:rgba(255,255,255,.45); } #favoritosMenu .favoritos-tengo-quiero-tabs .nav-link.active{ color:var(--color-primario); border-color:var(--color-primario); background:rgba(255,255,255,.04); } /* El vacío de cada lista del panel: el título con el color del texto y la ayuda un poco más suave */ #favoritosMenu .div-favorito-vacio .favoritos-tengo-quiero-vacio-texto{ opacity:.8; } html.sitio-oscuro #favoritosMenu .div-favorito-vacio .favoritos-tengo-quiero-vacio-titulo{ color:var(--oscuro-texto); } html.sitio-oscuro #favoritosMenu .div-favorito-vacio .favoritos-tengo-quiero-vacio-texto{ color:var(--oscuro-texto-suave); opacity:1; } /* La pantalla de Favoritos (favoritos.php): las pestañas, el corazón de cada tarjeta, la tarjeta que se va a la otra lista y los vacíos. El resto es el catálogo tal cual (productos.php), también en el modo oscuro. */ .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina{ flex-direction:row; flex-wrap:nowrap; gap:.5rem; } .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-item{ margin-bottom:0; } .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-link{ margin-right:0; white-space:nowrap; border:1.5px solid rgba(127,127,127,.25); background:transparent; box-shadow:none; color:inherit; transition:border-color .15s ease, color .15s ease, background-color .15s ease; } .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-link:hover{ border-color:var(--color-primario); } .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-link.active{ border-color:var(--color-primario); background:var(--color-primario-10); color:var(--color-primario); } html.sitio-oscuro .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-link{ border-color:var(--oscuro-borde); color:var(--oscuro-texto-suave); } html.sitio-oscuro .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-link:hover{ border-color:var(--oscuro-borde-acento); color:var(--oscuro-texto); } html.sitio-oscuro .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-link.active{ border-color:var(--oscuro-acento); background:color-mix(in srgb, var(--oscuro-acento) 10%, transparent); color:var(--oscuro-acento); } .favoritos-tengo-quiero-cantidad{ display:inline-block; opacity:.75; font-weight:500; } .favoritos-tengo-quiero-cantidad-salto{ animation:favoritosLatido .5s cubic-bezier(.3,1.6,.5,1); } @media (max-width:575.98px){ .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-item{ flex:1 1 0; min-width:0; } .nav-tabs.nav-pills.favoritos-tengo-quiero-tabs-pagina .nav-link{ justify-content:center; padding-left:.6rem; padding-right:.6rem; } } .item-tengo-quiero-favoritos, .item-navegador-favoritos{ transition:opacity .22s ease, transform .22s ease; } .item-tengo-quiero-favoritos.favoritos-tengo-quiero-saliendo, .item-navegador-favoritos.favoritos-tengo-quiero-saliendo{ opacity:0; transform:scale(.94); } /* El corazón de las tarjetas: el de la pantalla de Favoritos y el de todas las tarjetas de producto del sitio (corazonTengoQuieroFavoritos), arriba a la derecha de la foto. Las etiquetas (Nuevo, Promo) van arriba a la izquierda y el botón de agregar abajo, así que no se pisan. */ .favoritos-tengo-quiero-corazon{ position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin:0; padding:0; border:1.5px solid rgba(127,127,127,.28); border-radius:50%; background:rgba(255,255,255,.92); color:var(--color-primario); line-height:1; cursor:pointer; transition:border-color .15s ease, transform .15s ease; } .favoritos-tengo-quiero-corazon:hover, .favoritos-tengo-quiero-corazon[aria-expanded="true"]{ border-color:var(--color-primario); } .favoritos-tengo-quiero-corazon:active{ transform:scale(.92); } .favoritos-tengo-quiero-corazon .icono-favoritos-tq{ font-size:20px; } html.sitio-oscuro .favoritos-tengo-quiero-corazon{ border-color:var(--oscuro-borde-acento); background:color-mix(in srgb, var(--oscuro-fondo) 82%, transparent); color:var(--oscuro-acento); } html.sitio-oscuro .favoritos-tengo-quiero-corazon:hover, html.sitio-oscuro .favoritos-tengo-quiero-corazon[aria-expanded="true"]{ border-color:var(--oscuro-acento); } .favoritos-tengo-quiero-vacio{ max-width:440px; margin:0 auto; padding:48px 0 24px; text-align:center; } .favoritos-tengo-quiero-vacio-icono{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:18px; border-radius:50%; background:var(--color-primario-10); color:var(--color-primario); font-size:28px; } .favoritos-tengo-quiero-vacio p{ color:inherit; opacity:.85; } html.sitio-oscuro .favoritos-tengo-quiero-vacio h2, html.sitio-oscuro .favoritos-tengo-quiero-vacio h3{ color:var(--oscuro-texto); } html.sitio-oscuro .favoritos-tengo-quiero-vacio p{ color:var(--oscuro-texto-suave); opacity:1; } html.sitio-oscuro .favoritos-tengo-quiero-vacio-icono{ background:color-mix(in srgb, var(--oscuro-acento) 14%, transparent); color:var(--oscuro-acento); } /* La lista de deseos compartida (compartirListaTengoQuieroFavoritos en _tengo_quiero_favoritos.php, assets/js/favoritos.js): la barra para compartir arriba de Los quiero, en la pantalla de Favoritos y, compacta, en el panel de la barra. El botón de WhatsApp es el de la ficha (.fp-compartir-boton-whatsapp, con la flechita) y el de copiar, su mismo círculo, que en la pantalla se estira con el texto. La línea de abajo del título dice si está compartida (con Dejar de compartir) o muestra un aviso corto (.con-aviso). */ .favoritos-compartir-lista{ --fcl-borde:rgba(127,127,127,.2); --fcl-fondo:rgba(127,127,127,.05); --fcl-acento:var(--color-primario); --fcl-icono:var(--color-primario-10); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin-bottom:2rem; padding:14px 16px; border:1px solid var(--fcl-borde); border-radius:14px; background:var(--fcl-fondo); } .favoritos-compartir-lista-texto{ display:flex; flex:1 1 260px; align-items:center; gap:12px; min-width:0; } .favoritos-compartir-lista-icono{ display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--fcl-icono); color:var(--fcl-acento); font-size:20px; line-height:1; } .favoritos-compartir-lista-icono i{ color:inherit; } .favoritos-compartir-lista-cuerpo{ min-width:0; } .favoritos-compartir-lista-titulo{ margin:0; font-size:15px; font-weight:700; line-height:1.3; } .favoritos-compartir-lista-estado{ margin:2px 0 0; font-size:13px; line-height:1.45; opacity:.8; } .favoritos-compartir-lista-con, .favoritos-compartir-lista-aviso{ display:none; } .favoritos-compartir-lista.compartida .favoritos-compartir-lista-sin{ display:none; } .favoritos-compartir-lista.compartida .favoritos-compartir-lista-con{ display:inline; } .favoritos-compartir-lista.con-aviso .favoritos-compartir-lista-sin, .favoritos-compartir-lista.con-aviso .favoritos-compartir-lista-con{ display:none; } .favoritos-compartir-lista.con-aviso .favoritos-compartir-lista-aviso{ display:inline; font-weight:600; color:var(--fcl-acento); } /* "Compartida": un punto verde delante, como un estado encendido */ .favoritos-compartir-lista-con > span:first-child::before{ content:""; display:inline-block; width:7px; height:7px; margin:0 6px 1px 0; border-radius:50%; background:#2fb26b; vertical-align:middle; } /* Separados por la derecha: si no entran en la línea, bajan sin sangría */ .favoritos-compartir-lista-con > span:first-child{ margin-right:8px; } .favoritos-compartir-lista .favoritos-compartir-lista-ver, .favoritos-compartir-lista .favoritos-compartir-lista-dejar{ margin:0 10px 0 0; padding:0; border:0; background:none; box-shadow:none; font:inherit; font-weight:600; color:var(--fcl-acento); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; cursor:pointer; } .favoritos-compartir-lista .favoritos-compartir-lista-ver:hover, .favoritos-compartir-lista .favoritos-compartir-lista-dejar:hover{ color:var(--fcl-acento); text-decoration-thickness:2px; } .favoritos-compartir-lista-acciones{ display:flex; flex:0 0 auto; align-items:center; gap:8px; } .favoritos-compartir-lista .fp-compartir-boton{ margin:0; } .favoritos-compartir-lista .fp-compartir-boton:focus-visible{ outline:2px solid var(--fcl-acento); outline-offset:2px; } .favoritos-compartir-lista .favoritos-compartir-lista-copiar{ gap:6px; font-size:18px; } .favoritos-compartir-lista-pagina .favoritos-compartir-lista-copiar{ width:auto; padding:0 16px 0 13px; border-radius:999px; } .favoritos-compartir-lista-copiar span{ font-size:14px; font-weight:600; white-space:nowrap; } .favoritos-compartir-lista-copiar .uil-check{ display:none; } .favoritos-compartir-lista-copiar.copiado .uil-link-alt{ display:none; } .favoritos-compartir-lista-copiar.copiado .uil-check{ display:inline; } .favoritos-compartir-lista .favoritos-compartir-lista-copiar.copiado{ border-color:var(--fcl-acento); background:var(--fcl-icono); } @media (max-width:575.98px){ .favoritos-compartir-lista-pagina{ padding:14px; } .favoritos-compartir-lista-pagina .favoritos-compartir-lista-acciones{ width:100%; } .favoritos-compartir-lista-pagina .favoritos-compartir-lista-copiar{ flex:1 1 auto; } } /* En el panel de la barra (fondo oscuro, como sus pestañas): una sola fila, con los dos círculos a la derecha */ #favoritosMenu .favoritos-compartir-lista-menu{ --fcl-borde:rgba(255,255,255,.16); --fcl-fondo:rgba(255,255,255,.04); --fcl-icono:rgba(255,255,255,.08); flex-wrap:nowrap; gap:10px; margin-bottom:1.5rem; padding:10px 10px 10px 12px; color:#fff; } #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-texto{ flex:1 1 auto; gap:10px; } #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-icono{ width:34px; height:34px; font-size:17px; } #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-titulo{ font-size:14px; color:#fff; } #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-estado{ font-size:12px; color:rgba(255,255,255,.75); opacity:1; } #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-dejar{ display:block; margin:1px 0 0; } #favoritosMenu .favoritos-compartir-lista-menu .fp-compartir-boton{ width:36px; height:36px; border-color:rgba(255,255,255,.28); font-size:17px; } #favoritosMenu .favoritos-compartir-lista-menu .fp-compartir-boton:hover{ border-color:var(--fcl-acento); background:rgba(255,255,255,.06); } #favoritosMenu .favoritos-compartir-lista-menu .fp-compartir-boton-whatsapp svg{ width:19px; height:19px; } #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-copiar span{ display:none; } #favoritosMenu .favoritos-compartir-lista-menu i{ color:inherit; } /* Sitios oscuros: la paleta --oscuro-* (el panel del corazón ya tiene su fondo) */ html.sitio-oscuro .favoritos-compartir-lista{ --fcl-borde:var(--oscuro-borde); --fcl-fondo:var(--oscuro-panel); --fcl-acento:var(--oscuro-acento); --fcl-icono:color-mix(in srgb, var(--oscuro-acento) 14%, transparent); } html.sitio-oscuro .favoritos-compartir-lista-titulo{ color:var(--oscuro-texto); } html.sitio-oscuro .favoritos-compartir-lista-estado{ color:var(--oscuro-texto-suave); opacity:1; } html.sitio-oscuro .favoritos-compartir-lista .fp-compartir-boton{ border-color:var(--oscuro-borde-acento); color:var(--oscuro-acento); } html.sitio-oscuro .favoritos-compartir-lista .fp-compartir-boton:hover{ border-color:var(--oscuro-acento); background:color-mix(in srgb, var(--oscuro-acento) 10%, transparent); } html.sitio-oscuro #favoritosMenu .favoritos-compartir-lista-menu{ --fcl-fondo:var(--oscuro-panel-2); --fcl-borde:var(--oscuro-borde); } html.sitio-oscuro #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-titulo{ color:var(--oscuro-texto); } html.sitio-oscuro #favoritosMenu .favoritos-compartir-lista-menu .favoritos-compartir-lista-estado{ color:var(--oscuro-texto-suave); } html.sitio-oscuro #favoritosMenu .favoritos-compartir-lista-menu .fp-compartir-boton{ border-color:var(--oscuro-borde-acento); } html.sitio-oscuro #favoritosMenu .favoritos-compartir-lista-menu i{ color:inherit; } /* La ventana para dejar de compartir (footer.php): angosta, como un aviso. Si se abre desde el panel de la barra (z-index 1045), su fondo oscuro (1040 en el tema) sube por encima del panel mientras está abierta (favoritos.js). */ body.favoritos-compartir-lista-confirmando .modal-backdrop{ z-index:1050; } /* La misma ventana chica sirve para el aviso de stock del visitante desde una miniatura (footer.php, #modalAvisoStockInvitado) */ .modal-favoritos-compartir-lista .modal-dialog, .modal-aviso-stock-invitado .modal-dialog{ max-width:420px; } .modal-favoritos-compartir-lista .modal-body, .modal-aviso-stock-invitado .modal-body{ padding:2.25rem 2rem 2rem; } .modal-favoritos-compartir-lista .favoritos-tengo-quiero-vacio-icono, .modal-aviso-stock-invitado .favoritos-tengo-quiero-vacio-icono{ margin-bottom:14px; } .modal-favoritos-compartir-lista p, .modal-aviso-stock-invitado p{ opacity:.85; } html.sitio-oscuro .modal-favoritos-compartir-lista h3, html.sitio-oscuro .modal-aviso-stock-invitado h3{ color:var(--oscuro-texto); } html.sitio-oscuro .modal-favoritos-compartir-lista p, html.sitio-oscuro .modal-aviso-stock-invitado p{ color:var(--oscuro-texto-suave); opacity:1; } html.sitio-oscuro .modal-aviso-stock-invitado p strong{ color:var(--oscuro-texto); } /* La lista compartida (favoritos.php por productos?favoritos&lista=): el título con el regalo y, si la mira su dueño, un aviso discreto. El mosaico es el de la pantalla de Favoritos, sin corazones. */ .favoritos-lista-compartida-cabecera{ display:flex; align-items:center; gap:16px; } .favoritos-lista-compartida-icono{ display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--color-primario-10); color:var(--color-primario); font-size:26px; line-height:1; } .favoritos-lista-compartida-aviso{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:10px 14px; border:1px dashed rgba(127,127,127,.35); border-radius:12px; font-size:14px; } .favoritos-lista-compartida-aviso i{ font-size:18px; color:var(--color-primario); } .favoritos-lista-compartida-aviso a{ margin-left:auto; font-weight:600; color:var(--color-primario); } html.sitio-oscuro .favoritos-lista-compartida-icono{ background:color-mix(in srgb, var(--oscuro-acento) 14%, transparent); color:var(--oscuro-acento); } html.sitio-oscuro .favoritos-lista-compartida-cabecera h2{ color:var(--oscuro-texto); } html.sitio-oscuro .favoritos-lista-compartida-cabecera p{ color:var(--oscuro-texto-suave) !important; } html.sitio-oscuro .favoritos-lista-compartida-aviso{ border-color:var(--oscuro-borde-acento); color:var(--oscuro-texto-suave); } html.sitio-oscuro .favoritos-lista-compartida-aviso i, html.sitio-oscuro .favoritos-lista-compartida-aviso a{ color:var(--oscuro-acento); } @media (max-width:575.98px){ .favoritos-lista-compartida-cabecera{ gap:12px; } .favoritos-lista-compartida-icono{ width:44px; height:44px; font-size:21px; } .favoritos-lista-compartida-aviso a{ margin-left:0; } } .fp-modal-compartir{ overscroll-behavior:contain; } .fp-modal-compartir .modal-dialog{ max-width:460px; } .fp-compartir-asa{ display:none; } .fp-compartir-producto{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.35rem; padding:.65rem; border:1px solid rgba(127,127,127,.2); border-radius:var(--fp-radius-sm); background:rgba(127,127,127,.06); } .fp-compartir-producto img{ flex:0 0 auto; width:58px; height:58px; object-fit:contain; border-radius:10px; background:#fff; } .fp-compartir-producto-body{ display:flex; flex-direction:column; gap:.2rem; min-width:0; } .fp-compartir-producto-titulo{ font-size:13.5px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .fp-compartir-producto-url{ font-size:11.5px; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fp-compartir-redes{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1.1rem .25rem; } .fp-compartir-red{ --fp-red:#3f3f46; display:flex; flex-direction:column; align-items:center; gap:.45rem; min-width:0; margin:0; padding:0; border:0; background:none; color:inherit !important; font-size:11px; font-weight:600; line-height:1.2; text-decoration:none !important; cursor:pointer; } .fp-compartir-logo{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:var(--fp-red); color:#fff; font-size:22px; line-height:1; box-shadow:0 4px 12px -4px rgba(20,20,25,.35); transition:transform .15s ease, box-shadow .15s ease; } .fp-compartir-logo svg{ width:20px; height:20px; } .fp-compartir-red:hover .fp-compartir-logo, .fp-compartir-red:focus-visible .fp-compartir-logo{ transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(20,20,25,.45); } .fp-compartir-red:active .fp-compartir-logo{ transform:scale(.92); } .fp-compartir-nombre{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fp-compartir-whatsapp{ --fp-red:#25d366; } .fp-compartir-instagram{ --fp-red:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 40%, #d6249f 62%, #285aeb 100%); } .fp-compartir-facebook{ --fp-red:#1877f2; } .fp-compartir-x, .fp-compartir-threads{ --fp-red:#0f1419; } .fp-compartir-x .fp-compartir-logo, .fp-compartir-threads .fp-compartir-logo{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 12px -4px rgba(20,20,25,.35); } .fp-compartir-telegram{ --fp-red:#229ed9; } .fp-compartir-pinterest{ --fp-red:#e60023; } .fp-compartir-linkedin{ --fp-red:#0a66c2; } .fp-compartir-sms{ --fp-red:#34c759; display:none; } .fp-compartir-email{ --fp-red:#64748b; } .fp-compartir-copiar{ --fp-red:#3f3f46; } .fp-compartir-nativo{ --fp-red:var(--color-primario); display:none; } .fp-compartir-copiar.is-copiado, .fp-compartir-instagram.is-copiado{ --fp-red:var(--fp-green); } .fp-compartir.con-nativo .fp-compartir-nativo{ display:flex; } @media (pointer: coarse){ .fp-compartir-sms{ display:flex; } } @media (max-width: 575.98px){ /* Sube desde abajo y ocupa el ancho de la pantalla */ .fp-modal-compartir.modal.fade .modal-dialog{ position:fixed; left:0; right:0; bottom:0; display:block; width:100%; max-width:none; min-height:0; margin:0; transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); } .fp-modal-compartir.modal.show .modal-dialog{ transform:none; } .fp-modal-compartir .modal-content{ border-radius:22px 22px 0 0; padding-bottom:env(safe-area-inset-bottom); } .fp-compartir-asa{ display:block; width:40px; height:4px; margin:.6rem auto 0; border-radius:99px; background:currentColor; opacity:.2; } .fp-modal-compartir .modal-header{ padding-top:.55rem !important; } /* La cruz del tema va a 14px del borde, y la barrita de arriba baja el título: se alinea con él */ .fp-modal-compartir .btn-close{ top:38px; } .fp-compartir-redes{ gap:1rem .15rem; } .fp-compartir-logo{ width:48px; height:48px; font-size:21px; } } /* ========================================================================= BARRA DE ENVÍO GRATIS — drawer (F6) ========================================================================= */ .fp-shipbar{ padding:.2rem 0 .1rem; } .fp-shipbar-txt{ display:flex; align-items:center; gap:.4rem; font-size:12.5px; font-weight:700; color:var(--fp-ink); margin-bottom:.4rem; } .fp-shipbar-txt i{ color:var(--color-primario); font-size:17px; } .fp-shipbar-txt b{ color:var(--color-primario); } .fp-shipbar-track{ height:8px; border-radius:999px; background:var(--color-primario-10); overflow:hidden; } .fp-shipbar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--color-primario), var(--color-primario)); transition:width .4s ease; } .fp-shipbar.is-free .fp-shipbar-fill{ background:linear-gradient(90deg,#1a8f52,#22b566); } .fp-shipbar.is-free .fp-shipbar-txt, .fp-shipbar.is-free .fp-shipbar-txt i, .fp-shipbar.is-free .fp-shipbar-txt b{ color:var(--fp-green); } /* ========================================================================= ACCORDION — FAQ (F3) ========================================================================= */ .fp-acc{ border:1.5px solid var(--fp-border); border-radius:var(--fp-radius); overflow:hidden; background:#fff; } .fp-acc-item + .fp-acc-item{ border-top:1px solid var(--fp-border); } .fp-acc-q{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; cursor:pointer; font-size:14.5px; font-weight:700; color:var(--fp-ink); } .fp-acc-q i{ flex:0 0 auto; color:var(--color-primario); transition:transform .2s ease; } .fp-acc-item.is-open .fp-acc-q i{ transform:rotate(45deg); } .fp-acc-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; } .fp-acc-a-inner{ padding:0 1.1rem 1.1rem; font-size:13.5px; color:var(--fp-muted); line-height:1.5; } /* ========================================================================= NAV ANCLAS — chips sticky que saltan a las secciones (F7) ========================================================================= */ .fp-anclas{ display:flex; gap:.5rem; overflow-x:auto; padding:.6rem 0; margin-bottom:.5rem; position:sticky; top:70px; z-index:20; background:#fff; border-bottom:1px solid var(--fp-border); -webkit-overflow-scrolling:touch; } .fp-anclas::-webkit-scrollbar{ display:none; } .fp-ancla{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--fp-ink); border:1.5px solid var(--fp-border); border-radius:999px; padding:.4rem .9rem; text-decoration:none; white-space:nowrap; transition:border-color .15s ease, background .15s ease, color .15s ease; } .fp-ancla:hover, .fp-ancla.is-active{ border-color:var(--color-primario); background:var(--color-primario-10); color:var(--color-primario); } [id="divTextos"], [id="divCalificacionesProducto"]{ scroll-margin-top: 96px; } /* ========================================================================= MODALES — override del padding gigante del theme + estilo limpio ========================================================================= */ .fp-modal .modal-content{ border:none; border-radius:var(--fp-radius); overflow:hidden; box-shadow:0 20px 60px rgba(20,20,25,.25); } .fp-modal .modal-header{ padding:1.05rem 1.3rem !important; border-bottom:1px solid var(--fp-border); align-items:center; } .fp-modal .modal-title{ font-size:17px; font-weight:800; color:var(--fp-ink); display:flex; align-items:center; gap:.5rem; } .fp-modal .modal-title i{ color:var(--color-primario); font-size:22px; } .fp-modal .modal-body{ padding:1.3rem !important; color:var(--fp-ink); } .fp-modal .modal-body p{ margin-bottom:.55rem; line-height:1.5; } .fp-modal .modal-body p:last-child{ margin-bottom:0; } #divEtiquetasProducto{ width:100%; justify-content:flex-start !important; margin-right:auto; } /* ========================================================================= MENSAJE DE ALERTA — pastilla de urgencia (Fase 1 Wigy) ========================================================================= */ .fp-alerta-wrap{ display:block; width:100%; margin:.65rem 0 .85rem; } .fp-alerta-wrap.fp-alerta-wrap-precio{ margin:0; } .fp-alerta{ display:inline-flex; align-items:center; gap:.5rem; width:fit-content; max-width:100%; background:var(--fp-alerta-bg, #f59e0b); color:#fff; font-size:13px; font-weight:700; line-height:1.25; padding:.5rem 1rem .5rem .75rem; border-radius:999px; margin:0; transform-origin:left center; } .fp-alerta i{ font-size:16px; line-height:1; flex:0 0 auto; } .fp-alerta-dot{ flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.9); } .fp-alerta.fp-efecto-pulse{ animation:fpAlertaPulse 2s ease-out infinite; } .fp-alerta.fp-efecto-zoom{ animation:fpAlertaZoom 1.5s ease-in-out infinite; } @keyframes fpAlertaPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--fp-alerta-bg, #f59e0b) 55%, transparent); } 100%{ box-shadow:0 0 0 12px transparent; } } @keyframes fpAlertaZoom{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.04); } } /* ========================================================================= MENSAJE DE GARANTÍA — caja de confianza post-formulario (Fase 1 Wigy) ========================================================================= */ .fp-garantia{ display:flex; align-items:center; gap:.9rem; width:100%; max-width:720px; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm); background:#fff; padding:1rem 1.1rem; margin:1.1rem 0 0; } .fp-garantia-ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:var(--color-primario-10); } .fp-garantia-ico i{ font-size:24px; color:var(--color-primario); } .fp-garantia-ico img{ width:46px; height:46px; object-fit:contain; border-radius:12px; } .fp-garantia-titulo{ font-size:14.5px; font-weight:800; color:var(--fp-ink); margin-bottom:.15rem; } .fp-garantia-texto{ font-size:13.5px; color:var(--fp-muted); line-height:1.5; } .fp-garantia-texto p{ margin:0; } /* ========================================================================= LISTA DE BENEFICIOS — card bajo el precio (Fase 1 Wigy) ========================================================================= */ .fp-beneficios{ display:flex; flex-direction:column; gap:.65rem; width:100%; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm); background:#fff; padding:.95rem 1.05rem; margin:.9rem 0 0; } .fp-beneficio{ display:flex; align-items:center; gap:.7rem; line-height:1.35; } .fp-beneficio-ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--color-primario-10); } .fp-beneficio-ico i{ font-size:17px; color:var(--color-primario); } .fp-beneficio-body{ min-width:0; display:flex; flex-direction:column; } .fp-beneficio-titulo{ font-size:13.5px; font-weight:700; color:var(--fp-ink); } .fp-beneficio-desc{ font-size:12px; color:var(--fp-muted); } /* ========================================================================= BADGES DE PAGO Y ENVÍO — cuotas / transferencia / envío (Fase 1 Wigy) ========================================================================= */ .fp-badges{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; width:100%; } .fp-badge-info{ position:relative; display:inline-flex; align-items:center; gap:.5rem; width:fit-content; max-width:100%; background:var(--fp-ink); color:#fff !important; font-size:12.5px !important; font-weight:700; line-height:1; padding:.5rem 1rem .5rem .75rem; border-radius:999px; margin:0; } .fp-badge-info::before{ font-family:Unicons; font-weight:400; font-size:15px; line-height:1; flex:0 0 auto; } .fp-badge-cuotas::before{ content:"\ea74"; } .fp-badge-transferencia::before{ content:"\ec10"; } .fp-badge-envio::before{ content:"\ed52"; } .fp-badge-info b{ font-weight:800; font-size:inherit !important; } .fp-badge-envio{ background:var(--fp-green); } /* ========================================================================= CUPÓN DE DESCUENTO — ticket troquelado (Fase 1 Wigy) ========================================================================= */ .fp-cupon{ position:relative; display:flex; align-items:center; gap:1.1rem; width:100%; background:var(--color-primario); color:#fff; border-radius:var(--fp-radius-sm); padding:1.25rem 1.5rem; margin:1.1rem 0 0; overflow:hidden; } .fp-cupon-marco{ position:absolute; inset:9px; border:2px dashed rgba(255,255,255,.45); border-radius:9px; pointer-events:none; } .fp-cupon-cut{ position:absolute; width:24px; height:24px; border-radius:50%; background:#fff; z-index:1; } .fp-cupon-cut-1{ top:-13px; left:-13px; } .fp-cupon-cut-2{ top:-13px; right:-13px; } .fp-cupon-cut-3{ bottom:-13px; left:-13px; } .fp-cupon-cut-4{ bottom:-13px; right:-13px; } .fp-cupon-info{ flex:1 1 auto; min-width:0; position:relative; z-index:2; } .fp-cupon-titulo{ font-size:16.5px; font-weight:800; margin-bottom:.2rem; } .fp-cupon-texto{ font-size:13px; opacity:.92; line-height:1.45; } .fp-cupon-codigo{ flex:0 0 auto; min-width:128px; max-width:40%; position:relative; z-index:2; text-align:center; } .fp-cupon-codigo-valor{ display:block; background:#fff; color:var(--fp-ink); font-family:monospace; font-size:17px; font-weight:700; letter-spacing:1px; padding:.55rem .8rem; border-radius:8px 8px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fp-cupon-copiar{ display:block; width:100%; border:none; background:rgba(0,0,0,.45); color:#fff; font-size:12px; font-weight:700; padding:.45rem .8rem; border-radius:0 0 8px 8px; cursor:pointer; transition:background .15s ease; } .fp-cupon-copiar:hover{ background:rgba(0,0,0,.6); } .fp-cupon-copiar.is-copiado{ background:var(--fp-green); } .fp-cupon-countdown{ display:flex; gap:.35rem; margin-top:.6rem; } .fp-cupon-cd-box{ min-width:40px; text-align:center; background:rgba(255,255,255,.16); border-radius:7px; padding:.3rem .35rem; } .fp-cupon-cd-num{ display:block; font-size:15px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; } .fp-cupon-cd-lbl{ display:block; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.85; } /* ========================================================================= INFORMACIÓN DE DESPACHO — barra "se despacha HOY" (Fase 1 Wigy) ========================================================================= */ .fp-despacho{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; width:100%; background:var(--color-primario-10); border:1.5px solid var(--color-primario-20); border-radius:var(--fp-radius-sm); padding:.75rem 1rem; margin:.9rem 0 0; } .fp-despacho-txt{ display:flex; align-items:center; gap:.55rem; font-size:13.5px; color:var(--fp-ink); line-height:1.35; } .fp-despacho-txt i{ flex:0 0 auto; font-size:18px; color:var(--color-primario); } .fp-despacho-dia{ display:inline-block; background:var(--color-primario); color:#fff; font-size:12px; font-weight:800; padding:.15rem .55rem; border-radius:999px; white-space:nowrap; } .fp-despacho-countdown{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1.5px solid var(--color-primario-20); border-radius:999px; font-size:12.5px; font-weight:800; color:var(--fp-ink); padding:.35rem .75rem; font-variant-numeric:tabular-nums; } .fp-despacho-countdown i{ font-size:15px; color:var(--color-primario); } /* Combos armables (Fase 3 Wigy) */ input[type="checkbox"].fp-combo-chk{ -webkit-appearance:checkbox !important; appearance:auto !important; width:15px; height:15px; accent-color:var(--color-primario); margin-right:.35rem; vertical-align:-2px; cursor:pointer; background:none; border:0; } input[type="checkbox"].fp-combo-chk:disabled{ opacity:.55; } .fp-combo-incluido{ background:var(--fp-green-bg); color:var(--fp-green); font-size:10px; font-weight:800; text-transform:uppercase; padding:.12rem .4rem; border-radius:999px; margin-left:.3rem; } .fp-shipbar-hito{ position:absolute; top:50%; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:#fff; border:2.5px solid var(--color-primario-30); z-index:2; } .fp-shipbar-hito.is-logrado{ border-color:var(--color-primario); background:var(--color-primario); } .fp-shipbar-track{ position:relative; overflow:visible; } .fp-shipbar-labels{ position:relative; height:1.1em; margin-top:.35rem; font-size:10.5px; color:var(--fp-muted); } .fp-shipbar-labels span{ position:absolute; top:0; white-space:nowrap; } .fp-shipbar-labels b{ color:var(--fp-ink); } /* ========================================================================= ANTES Y DESPUÉS — comparador con divisor arrastrable (Fase 3 Wigy) ========================================================================= */ .fp-antesdespues-seccion{ width:100%; } .fp-antesdespues{ position:relative; width:100%; max-width:600px; margin:0 auto; aspect-ratio:1/1; border-radius:var(--fp-radius-sm); overflow:hidden; cursor:grab; touch-action:none; background:var(--fp-soft); } .fp-antesdespues.is-arrastrando{ cursor:grabbing; } .fp-antesdespues-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; } .fp-antesdespues-img-despues{ clip-path:inset(0 0 0 50%); } .fp-antesdespues-linea{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); box-shadow:0 0 8px rgba(0,0,0,.25); pointer-events:none; } .fp-antesdespues-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; gap:0; pointer-events:none; } .fp-antesdespues-handle i{ font-size:16px; color:#8a8a90; } .fp-antesdespues-label{ position:absolute; top:12px; background:rgba(20,20,25,.75); color:#fff; font-size:11.5px; font-weight:700; padding:.25rem .6rem; border-radius:6px; pointer-events:none; transition:opacity .12s ease; } .fp-antesdespues-label-a{ left:12px; } .fp-antesdespues-label-d{ right:12px; } .fp-nxm-nota{ font-size:11.5px; color:var(--fp-muted); margin-top:.35rem; } .fp-pack-nxm .fp-pack-unit{ margin-top:.35rem; } .fp-pack-nxm .fp-nxm-precio{ color:var(--fp-ink); font-weight:800; font-size:13px; } /* ========================================================================= RESEÑAS — header, masonry, wizard (Fase 2 Wigy) ========================================================================= */ .fp-resenas-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .fp-resenas-score{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; } .fp-resenas-num{ font-size:2.4rem; font-weight:800; color:var(--fp-ink); line-height:1; } .fp-resenas-stars i{ color:#fab758; font-size:15px; } .fp-resenas-stars .far{ color:#e0e0e0; } .fp-resenas-cant{ display:block; font-size:12.5px; color:var(--fp-muted); } .fp-resenas-dist-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1.5px solid var(--fp-border); border-radius:10px; background:#fff; cursor:pointer; color:var(--fp-ink); font-size:17px; transition:border-color .15s ease; } .fp-resenas-dist-btn:hover{ border-color:var(--fp-border-strong); } .fp-resenas-calce-btn{ display:inline-flex; align-items:center; gap:.35rem; border:1.5px solid var(--fp-border); border-radius:999px; background:#fff; cursor:pointer; color:var(--fp-ink); font-size:13px; padding:.45rem .9rem; transition:border-color .15s ease; } .fp-resenas-calce-btn:hover{ border-color:var(--fp-border-strong); } .fp-resenas-acciones{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; } .fp-resenas-orden{ border:1.5px solid var(--fp-border); border-radius:999px; font-size:13px; font-weight:600; color:var(--fp-ink); padding:.5rem 2.2rem .5rem 1rem; appearance:none; -webkit-appearance:none; cursor:pointer; background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center; background-size:11px 7px; } .fp-resenas-escribir{ display:inline-flex; align-items:center; gap:.4rem; border:none; background:var(--color-primario); color:#fff; font-size:13.5px; font-weight:700; padding:.6rem 1.3rem; border-radius:999px; cursor:pointer; transition:opacity .15s ease; } .fp-resenas-escribir:hover{ opacity:.88; } .fp-resenas-ya{ display:inline-flex; align-items:center; gap:.4rem; background:var(--fp-soft); color:var(--fp-muted); font-size:13px; font-weight:700; padding:.6rem 1.1rem; border-radius:999px; } .fp-resenas-ya i{ color:var(--fp-green); } .fp-resenas-incentivo{ display:inline-flex; align-items:center; gap:.4rem; width:fit-content; background:var(--fp-green-bg); color:var(--fp-green); font-size:12.5px; font-weight:800; padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem; } .fp-resenas-dist{ max-width:420px; background:var(--fp-soft); border-radius:var(--fp-radius-sm); padding:.9rem 1rem; margin-bottom:1rem; } .fp-resenas-dist-fila{ display:flex; align-items:center; gap:.6rem; padding:.15rem 0; } .fp-resenas-dist-lbl{ flex:0 0 auto; width:44px; font-size:12.5px; font-weight:700; color:var(--fp-ink); white-space:nowrap; } .fp-resenas-dist-lbl i{ color:#fab758; font-size:11px; } .fp-resenas-dist-lbl-calce{ width:110px; } .fp-resenas-dist-track{ flex:1 1 auto; height:8px; border-radius:999px; background:#e9e9ec; overflow:hidden; } .fp-resenas-dist-fill{ display:block; height:100%; border-radius:999px; background:#fab758; transition:width .4s ease; } .fp-resenas-dist-cant{ flex:0 0 auto; width:26px; text-align:right; font-size:12.5px; color:var(--fp-muted); } .fp-resenas-grid{ columns:3 260px; column-gap:1rem; } .fp-resena-card{ break-inside:avoid; margin-bottom:1rem; overflow:hidden; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm); background:#fff; transition:transform .25s ease, box-shadow .25s ease; } .fp-resena-card:hover{ transform:translateY(-3px); box-shadow:var(--fp-shadow-hover); } .fp-resena-media{ display:block; width:100%; max-height:340px; object-fit:cover; cursor:zoom-in; } .fp-resena-body{ padding:.9rem 1rem; } .fp-resena-head{ display:flex; align-items:center; gap:.25rem .6rem; margin-bottom:.4rem; flex-wrap:wrap; } .fp-resena-quien{ min-width:0; display:flex; flex-direction:column; } .fp-resena-quien .fp-resena-nombre{ line-height:1.25; } .fp-resena-quien .fp-resena-fecha{ line-height:1.2; } .fp-resena-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 auto; } .fp-resena-nombre{ display:block; font-size:13.5px; font-weight:800; color:var(--fp-ink); } .fp-resena-verificado{ display:inline-flex; align-items:center; gap:.2rem; color:var(--fp-green); font-size:11px; font-weight:800; margin-left:.25rem; } .fp-resena-fecha{ font-size:11.5px; color:var(--fp-muted); } .fp-resena-stars{ display:flex; align-items:center; gap:2px; margin-bottom:.35rem; flex-wrap:wrap; row-gap:.3rem; } .fp-resena-stars i{ color:#fab758; font-size:13px; } .fp-resena-stars .far{ color:#e0e0e0; } .fp-resena-calce{ margin-left:.5rem; background:var(--fp-soft); color:var(--fp-muted); font-size:10.5px; font-weight:700; padding:.15rem .5rem; border-radius:999px; white-space:nowrap; } .fp-resena-stars .fp-resena-calce:first-child{ margin-left:0; } .fp-resena-texto{ width:100%; font-size:13.5px; color:var(--fp-ink); line-height:1.5; margin-top:.15rem; overflow-wrap:break-word; } .fp-resenas-mas{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; border:1.5px solid var(--fp-border-strong); border-radius:999px; background:#fff; color:var(--fp-ink); font-size:13.5px; font-weight:700; padding:.6rem 1.5rem; cursor:pointer; transition:border-color .15s ease, background .15s ease; } .fp-resenas-mas:hover{ border-color:var(--color-primario); background:var(--color-primario-10); } .fp-wizard-incentivo{ background:var(--fp-green-bg); color:var(--fp-green); text-align:center; font-size:13px; font-weight:800; padding:.55rem .8rem; border-radius:10px; margin-bottom:1rem; } .fp-wizard-dots{ display:flex; align-items:center; justify-content:center; gap:.45rem; margin-bottom:1.2rem; } .fp-wizard-dot{ width:9px; height:9px; border-radius:50%; background:var(--fp-border-strong); transition:background .2s ease, transform .2s ease; } .fp-wizard-dot.is-activo{ background:var(--color-primario); transform:scale(1.25); } .fp-wizard-paso{ text-align:center; padding:.5rem 0 1rem; } .fp-wizard-pregunta{ font-size:18px; font-weight:800; color:var(--fp-ink); margin-bottom:.3rem; } .fp-wizard-sub{ font-size:13px; color:var(--fp-muted); margin-bottom:1rem; } .fp-wizard-estrellas{ display:flex; align-items:center; justify-content:center; gap:.6rem; } .fp-wizard-estrellas i{ font-size:38px; color:#e0e0e0; cursor:pointer; transition:transform .15s ease; } .fp-wizard-estrellas i:hover{ transform:scale(1.15); } .fp-wizard-error{ display:block; color:#dc2626; font-weight:700; margin-top:.6rem; } .fp-wizard-calce{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; } .fp-wizard-calce-btn{ border:1.5px solid var(--fp-border); border-radius:999px; background:#fff; color:var(--fp-ink); font-size:13px; font-weight:600; padding:.5rem 1rem; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; } .fp-wizard-calce-btn:hover{ border-color:var(--fp-border-strong); } .fp-wizard-calce-btn.is-activo{ border-color:var(--color-primario); background:var(--color-primario-10); color:var(--color-primario); font-weight:800; } .fp-wizard-textarea{ width:100%; border:1.5px solid var(--fp-border-strong); border-radius:var(--fp-radius-sm); padding:.75rem 1rem; font-size:14px; color:var(--fp-ink); outline:none; resize:vertical; } .fp-wizard-textarea:focus{ border-color:var(--color-primario); } .fp-wizard-dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; border:2px dashed var(--fp-border-strong); border-radius:var(--fp-radius-sm); padding:1.6rem 1rem; cursor:pointer; color:var(--fp-muted); font-size:13px; transition:border-color .15s ease, background .15s ease; margin-bottom:0; } .fp-wizard-dropzone:hover{ border-color:var(--color-primario); background:var(--color-primario-10); } .fp-wizard-dropzone i{ font-size:26px; color:var(--color-primario); } .fp-wizard-footer{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:.4rem; } .fp-wizard-exito{ text-align:center; padding:1rem 0; } .fp-wizard-exito > i{ font-size:52px; color:var(--fp-green); } .fp-wizard-cupon{ display:flex; flex-direction:column; align-items:center; gap:.5rem; border:2px dashed var(--color-primario); border-radius:var(--fp-radius-sm); padding:1rem; margin-top:1rem; } .fp-wizard-cupon-codigo{ font-family:'Courier New', monospace; font-size:20px; font-weight:800; letter-spacing:2px; color:var(--fp-ink); } .fp-wizard-cupon .fp-cupon-copiar{ border-radius:8px; background:var(--color-primario); max-width:160px; } @media (max-width: 767.98px){ .fp-resenas-grid{ columns:2 160px; } } /* ========================================================================= GUÍA DE TALLES — botón pill + modal restyleada (Fase 2 Wigy) ========================================================================= */ .fp-talles-btn{ display:inline-flex; align-items:center; gap:.5rem; width:fit-content; background:var(--color-primario); color:#fff; border:none; font-size:14px; font-weight:700; padding:.7rem 1.4rem; border-radius:999px; cursor:pointer; margin:.7rem 0 0; transition:transform .25s ease, box-shadow .25s ease; } .fp-talles-btn i{ font-size:17px; line-height:1; } .fp-talles-btn:hover{ transform:translateY(-2px); box-shadow:var(--fp-shadow-hover); color:#fff; } .fp-talles-btn:active{ transform:translateY(0); } .fp-modal-talles .modal-dialog{ transform:scale(.7); transition:transform .3s ease, opacity .15s linear !important; } .fp-modal-talles.show .modal-dialog{ transform:scale(1); } .fp-modal-talles .modal-header{ background:#fff; border-bottom:1px solid var(--fp-border); } .fp-modal-talles .modal-title{ color:var(--fp-ink); } .fp-modal-talles .modal-title i{ color:var(--color-primario); } .fp-modal-talles .modal-body{ max-height:70vh; overflow-y:auto; } .fp-talles-tabla thead th{ background:var(--fp-soft); color:var(--fp-muted); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; text-align:center; border-bottom:2px solid var(--fp-border-strong) !important; padding:.65rem .5rem; } .fp-talles-tabla tbody td{ text-align:center; padding:.65rem .5rem; border-bottom:1px solid var(--fp-border); } .fp-talles-tabla tbody tr:hover td{ background:var(--fp-soft); } .fp-talles-tabla tbody td:first-child, .fp-talles-tabla thead th:first-child{ font-weight:800; background:var(--fp-soft); color:var(--fp-ink); } .fp-talles-quetalle{ background:var(--fp-soft); border-radius:var(--fp-radius-sm); padding:1rem 1.1rem; margin-top:1rem; } /* ========================================================================= TABLA COMPARATIVA — título/subtítulo lateral en desktop (Fase 2 Wigy) ========================================================================= */ .fp-comparativa-wrap{ display:flex; align-items:center; gap:3rem; width:100%; } .fp-comparativa-wrap.sin-texto{ display:block; } .fp-comparativa-info{ flex:0 0 38%; max-width:500px; text-align:left; } .fp-comparativa-info p{ margin-bottom:0; } .fp-comparativa-tabla{ flex:1 1 auto; min-width:0; } @media (max-width: 991.98px){ .fp-comparativa-wrap{ flex-direction:column; gap:1.5rem; } .fp-comparativa-info{ flex:0 0 auto; max-width:100%; text-align:center; } } /* ========================================================================= AVISO DE STOCK PARA INVITADOS — captura de email sin sesión (Fase 2 Wigy) ========================================================================= */ .fp-avisostock{ display:flex; flex-direction:column; gap:.5rem; width:100%; max-width:420px; margin-top:.4rem; } .fp-avisostock-input{ width:100%; padding:.75rem 1rem; font-size:14px; color:var(--fp-ink); border:1.5px solid var(--fp-border-strong); border-radius:var(--fp-radius-sm); background:#fff; outline:none; transition:border-color .15s ease; } .fp-avisostock-input:focus{ border-color:var(--color-primario); } .fp-avisostock-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .fp-avisostock-btn{ width:100%; border:none; background:var(--color-primario); color:#fff; font-size:14px; font-weight:700; padding:.8rem 1rem; border-radius:var(--fp-radius-sm); cursor:pointer; transition:opacity .15s ease; } .fp-avisostock-btn:hover{ opacity:.88; } .fp-avisostock-btn:disabled{ opacity:.6; cursor:default; } .fp-avisostock-error{ font-size:12.5px; font-weight:700; color:#dc2626; margin:0; } .fp-avisostock-ok{ display:inline-flex; align-items:center; gap:.4rem; font-size:13.5px; font-weight:700; color:var(--fp-green); margin:0; } .fp-avisostock-ok i{ font-size:17px; } /* Sitios oscuros: el tema pinta el texto de los campos claro, y sobre el fondo blanco no se leía lo que se escribía */ html.sitio-oscuro .fp-avisostock-input{ background:var(--oscuro-panel-2); color:var(--oscuro-texto); border-color:var(--oscuro-borde); } html.sitio-oscuro .fp-avisostock-input::placeholder{ color:var(--oscuro-texto-suave); } html.sitio-oscuro .fp-avisostock-input:focus{ border-color:var(--oscuro-acento); } /* ========================================================================= TEXTO LIBRE — sección full-width con contenido TinyMCE (Fase 1 Wigy) ========================================================================= */ .fp-textolibre{ margin-top:2rem; width:100%; } .fp-textolibre table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; } .fp-textolibre table td, .fp-textolibre table th{ border:1px solid var(--fp-border); padding:.6rem .8rem; } .fp-textolibre table th{ background:var(--fp-soft); } .fp-textolibre img{ max-width:100%; height:auto; border-radius:var(--fp-radius-sm); } .fp-textolibre iframe{ max-width:100%; } /* ========================================================================= DATOS TÉCNICOS — cuadro de columnas definidas por el tenant ========================================================================= */ /* Va en la columna del precio, entre los demás bloques: sin marco propio, para que no parezca una caja pegada. Una tarjeta por forma de uso, con el dato clave destacado sobre el color del sitio y el rendimiento al lado. */ /* El margen de los bloques de esta columna lo anula la regla de mas abajo (el aire lo da el gap del contenedor): para separarlo un poco mas del bloque de arriba y del de abajo se usa padding */ .fp-datostecnicos{ width:100%; display:flex; flex-direction:column; gap:.55rem; padding:.7rem 0; } .fp-datostecnicos-item{ display:flex; align-items:center; gap:.5rem; font-size:13px; font-weight:600; color:var(--fp-ink); } .fp-datostecnicos-item i{ font-size:19px; color:var(--color-primario); flex:0 0 auto; } .fp-datostecnicos-envase{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.45rem; margin:.65rem 0 .1rem; padding-left:.6rem; border-left:3px solid var(--color-primario); } .fp-datostecnicos-envase b{ font-size:15px; font-weight:800; color:var(--fp-ink); overflow-wrap:anywhere; } .fp-datostecnicos-envase small{ font-size:12px; font-weight:600; color:var(--fp-muted); overflow-wrap:anywhere; } .fp-datostecnicos-card{ display:flex; align-items:stretch; overflow:hidden; background:#fff; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm); } .fp-datostecnicos-num{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--color-primario); color:#fff; text-align:center; padding:.85rem 1rem; min-width:92px; max-width:45%; } .fp-datostecnicos-num b{ font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.1; overflow-wrap:anywhere; } .fp-datostecnicos-num span{ font-size:9px; text-transform:uppercase; letter-spacing:.09em; opacity:.75; margin-top:2px; } .fp-datostecnicos-txt{ flex:1 1 auto; min-width:0; padding:.8rem 1rem; display:flex; flex-direction:column; justify-content:center; gap:.25rem; } .fp-datostecnicos-txt b{ font-size:14px; font-weight:800; color:var(--fp-ink); line-height:1.3; overflow-wrap:anywhere; } .fp-datostecnicos-txt span{ display:flex; align-items:center; gap:.35rem; font-size:12px; color:var(--fp-muted); line-height:1.3; overflow-wrap:anywhere; } .fp-datostecnicos-txt span i{ font-size:15px; color:var(--color-primario); flex:0 0 auto; } /* ========================================================================= VIDEO FLOTANTE — burbuja + modal reels (Fase 4 Wigy) ========================================================================= */ .fp-videoflotante{ position:fixed; left:20px; bottom:90px; z-index:1040; width:110px; height:110px; border-radius:50%; background-size:cover; background-position:center; background-color:var(--fp-ink); box-shadow:0 6px 24px rgba(20,20,25,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s ease; animation:fpVideoPulse 1.8s ease-out infinite; } .fp-videoflotante.fp-videoflotante-abajo{ bottom:20px; } .fp-videoflotante:hover{ transform:scale(1.08); } @keyframes fpVideoPulse{ 0%{ box-shadow:0 6px 24px rgba(20,20,25,.35), 0 0 0 0 color-mix(in srgb, var(--color-primario) 55%, transparent); } 100%{ box-shadow:0 6px 24px rgba(20,20,25,.35), 0 0 0 16px transparent; } } .fp-videoflotante-play{ width:46px; height:46px; border-radius:50%; background:rgba(20,20,25,.6); display:flex; align-items:center; justify-content:center; } .fp-videoflotante-play i{ color:#fff; font-size:22px; margin-left:2px; } .fp-videoflotante-cerrar{ position:absolute; bottom:-4px; left:-4px; width:26px; height:26px; border-radius:50%; border:none; background:#fff; color:var(--fp-ink); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 6px rgba(20,20,25,.3); } .fp-videoflotante-modal{ position:fixed; inset:0; z-index:2000; background:rgba(10,10,14,.78); display:flex; align-items:center; justify-content:center; } .fp-videoflotante-modal video{ max-height:85vh; max-width:92vw; border-radius:14px; background:#000; } .fp-videoflotante-modal-cerrar{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .fp-videoflotante-modal-cerrar:hover{ background:rgba(255,255,255,.3); } @media (max-width: 575.98px){ .fp-videoflotante{ width:88px; height:88px; left:14px; bottom:80px; } .fp-videoflotante.fp-videoflotante-abajo{ bottom:16px; } .fp-videoflotante-modal video{ max-width:100vw; max-height:100vh; border-radius:0; } } /* Video flotante con un enlace de YouTube o de un reel de Instagram (assets/php/video_flotante.php). La ventana se arma al abrirla (abrirVideoFlotanteProducto, assets/js/productos.js). Los marcos dejan 70px arriba y abajo en el celular para que la cruz de cerrar nunca quede encima del video. */ .fp-videoflotante.fp-videoflotante-portada-ancha{ background-size:auto 135%; } /* la miniatura de YouTube trae franjas negras arriba y abajo */ .fp-videoflotante-modal-cerrar{ z-index:2; } .fp-videoflotante-marco{ position:relative; overflow:hidden; flex:0 0 auto; border-radius:14px; background:#000; box-shadow:0 18px 60px rgba(0,0,0,.45); } .fp-videoflotante-marco-vertical{ aspect-ratio:9/16; height:min(85vh, 760px, calc(92vw * 16 / 9)); } .fp-videoflotante-marco-horizontal{ aspect-ratio:16/9; width:min(92vw, 1100px, calc(85vh * 16 / 9)); } /* El reproductor es más alto que el marco: el video calza justo en el marco y la franja del título (arriba) y la del logo (abajo) de YouTube quedan afuera, recortadas. En un Short YouTube pone abajo el canal, el título y los botones de me gusta y compartir, pegados al borde del reproductor: con un 35% de cada lado quedan afuera. */ .fp-videoflotante-recorte{ position:absolute; left:0; right:0; top:-64px; bottom:-64px; } .fp-videoflotante-marco-vertical .fp-videoflotante-recorte{ top:-35%; bottom:-35%; } .fp-videoflotante-recorte iframe{ display:block; width:100%; height:100%; border:0; } /* La capa se queda con los toques: el reproductor nunca recibe el mouse ni los clics */ .fp-videoflotante-capa{ position:absolute; inset:0; z-index:1; cursor:pointer; display:flex; align-items:center; justify-content:center; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:0 0; transition:background-color .2s ease; } .fp-videoflotante-capa .fp-videoflotante-play{ width:68px; height:68px; background:rgba(20,20,25,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transform:scale(.85); transition:opacity .2s ease, transform .2s ease; } .fp-videoflotante-capa .fp-videoflotante-play i{ font-size:34px; margin-left:4px; } .fp-videoflotante-cargando .fp-videoflotante-capa{ background-color:#000; background-size:cover; } .fp-videoflotante-pausado .fp-videoflotante-capa{ background-color:rgba(0,0,0,.45); } .fp-videoflotante-cargando .fp-videoflotante-play, .fp-videoflotante-pausado .fp-videoflotante-play{ opacity:1; transform:scale(1); } .fp-videoflotante-libre .fp-videoflotante-capa{ pointer-events:none; background-color:transparent; background-size:0 0; } .fp-videoflotante-libre .fp-videoflotante-play{ opacity:0; } /* Instagram: el embed oficial, que crece hasta su alto; si no entra, se desplaza adentro de la tarjeta */ .fp-videoflotante-marco-instagram{ width:min(92vw, 420px); max-height:calc(100vh - 140px); overflow-y:auto; background:#fff; -webkit-overflow-scrolling:touch; } .fp-videoflotante-marco-instagram .instagram-media, .fp-videoflotante-marco-instagram iframe{ margin:0 !important; width:100% !important; max-width:100% !important; min-width:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } @media (max-width: 575.98px){ /* La cruz de la burbuja quedaba apoyada sobre el botón de WhatsApp (que va abajo a la izquierda) */ .fp-videoflotante:not(.fp-videoflotante-abajo){ bottom:92px; } body.fp-barra-visible .fp-videoflotante:not(.fp-videoflotante-abajo){ bottom:172px; } .fp-videoflotante-marco{ border-radius:10px; } .fp-videoflotante-marco-vertical{ height:min(calc(100vh - 140px), calc(100vw * 16 / 9)); } .fp-videoflotante-marco-horizontal{ width:100vw; border-radius:0; } .fp-videoflotante-marco-instagram{ width:calc(100vw - 24px); } } /* ========================================================================= BARRA DE PROGRESO — ficha y flotante (pendientes Wigy) ========================================================================= */ .fp-progreso-ficha{ width:100%; margin:.9rem 0 0; } .fp-progreso-ficha:empty{ display:none; } .fp-progreso-flotante{ position:fixed; right:20px; bottom:20px; z-index:1038; width:300px; max-width:calc(100vw - 40px); background:#fff; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm); box-shadow:var(--fp-shadow-hover); padding:.9rem 1rem .8rem; } .fp-progreso-flotante .fp-shipbar-labels{ display:none; } .fp-progreso-flotante-cerrar{ position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:none; background:var(--fp-soft); color:var(--fp-muted); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; } /* Que no tape los botones flotantes: en la compu va a la izquierda de la columna de la derecha (chatbot, volver arriba, WhatsApp) y en el celular por encima de ellos. */ @media (min-width: 576px){ .fp-progreso-flotante{ right:108px; } } @media (max-width: 575.98px){ .fp-progreso-flotante{ right:10px; bottom:104px; } } /* ========================================================================= SLIDER DE VIDEOS — círculos tipo stories + playlist (pendientes Wigy) ========================================================================= */ .fp-reels{ width:100%; } .fp-reels-fila{ display:flex; gap:1rem; justify-content:center; flex-wrap:nowrap; overflow-x:auto; padding:.5rem .25rem; -webkit-overflow-scrolling:touch; } .fp-reels-fila::-webkit-scrollbar{ display:none; } .fp-reel-circulo{ position:relative; flex:0 0 auto; width:104px; height:104px; border-radius:50%; border:3px solid var(--color-primario); padding:3px; background:#fff; cursor:pointer; overflow:hidden; transition:transform .2s ease; } .fp-reel-circulo::before{ content:""; position:absolute; inset:0; z-index:2; border-radius:50%; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform:translateX(-150%); animation:fpReelShine 2.5s ease-in-out infinite; pointer-events:none; } @keyframes fpReelShine{ 0%{ transform:translateX(-150%); } 60%, 100%{ transform:translateX(150%); } } .fp-reel-circulo:hover{ transform:scale(1.08); } .fp-reel-circulo video{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; pointer-events:none; } .fp-reel-play{ position:absolute; inset:0; margin:auto; width:34px; height:34px; border-radius:50%; background:rgba(20,20,25,.55); display:flex; align-items:center; justify-content:center; z-index:1; } .fp-reel-play i{ color:#fff; font-size:16px; margin-left:2px; } .fp-reels-video-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; } .fp-reels-video-wrap video{ max-height:82vh; max-width:92vw; border-radius:14px; background:#000; } .fp-reels-cta{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:88%; text-align:center; background:rgba(255,255,255,.95); color:#1d1d1f; font-size:14px; font-weight:800; padding:.65rem 1rem; border-radius:999px; text-decoration:none; } .fp-reels-cta:hover{ color:#1d1d1f; opacity:.9; } .fp-reels-nav{ width:44px; height:44px; border-radius:50%; border:none; margin:0 .8rem; background:rgba(255,255,255,.15); color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s ease; } .fp-reels-nav:hover{ background:rgba(255,255,255,.3); } .fp-reels-contador{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.15); color:#fff; font-size:12.5px; font-weight:700; padding:.25rem .7rem; border-radius:999px; } @media (max-width: 575.98px){ .fp-reel-circulo{ width:84px; height:84px; } .fp-reels-nav{ margin:0 .25rem; } } /* ========================================================================= POP-UP DE ANUNCIOS — overlay promocional (Fase 4 Wigy) ========================================================================= */ .fp-popup{ position:fixed; inset:0; z-index:2100; background:rgba(10,10,14,.72); display:flex; align-items:center; justify-content:center; padding:1rem; } .fp-popup-card{ position:relative; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; border-radius:16px; padding:2.1rem 1.9rem 1.4rem; text-align:center; box-shadow:0 24px 70px rgba(10,10,14,.45); animation:fpPopupEntrada .35s cubic-bezier(.22,1,.36,1); } @keyframes fpPopupEntrada{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } .fp-popup-cerrar{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:inherit; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .fp-popup-cerrar:hover{ background:rgba(255,255,255,.3); } .fp-popup-imagen{ max-width:150px; max-height:120px; object-fit:contain; margin:0 auto .8rem; display:block; } .fp-popup-titulo{ font-size:22px; font-weight:800; line-height:1.2; margin-bottom:.5rem; } .fp-popup-texto{ font-size:14px; opacity:.92; line-height:1.5; margin-bottom:1rem; } .fp-popup-countdown{ display:flex; justify-content:center; gap:.45rem; margin-bottom:1.1rem; } .fp-popup-cd-box{ min-width:52px; background:rgba(255,255,255,.12); border-radius:9px; padding:.45rem .3rem; } .fp-popup-cd-num{ display:block; font-size:22px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; } .fp-popup-cd-lbl{ display:block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.85; } .fp-popup-form{ display:flex; flex-direction:column; gap:.55rem; } .fp-popup-input{ width:100%; padding:.75rem 1rem; font-size:14px; border-radius:10px; border:1.5px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:inherit; outline:none; } .fp-popup-input::placeholder{ color:inherit; opacity:.65; } .fp-popup-input:focus{ border-color:rgba(255,255,255,.75); } .fp-popup-btn{ display:block; width:100%; border:none; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.95); color:#1d1d1f; font-size:14px; font-weight:800; padding:.75rem 1rem; text-decoration:none; transition:opacity .15s ease; } .fp-popup-btn:hover{ opacity:.88; color:#1d1d1f; } .fp-popup-error{ font-size:12.5px; font-weight:700; color:#ffb4b4; margin:0; } .fp-popup-exito{ font-size:14px; font-weight:700; } .fp-popup-exito > i{ font-size:20px; vertical-align:-2px; } .fp-popup-cupon{ display:flex; flex-direction:column; align-items:center; gap:.45rem; border:2px dashed rgba(255,255,255,.55); border-radius:12px; padding:.9rem; margin-top:.8rem; } .fp-popup-cupon-codigo{ font-family:'Courier New', monospace; font-size:19px; font-weight:800; letter-spacing:2px; } .fp-popup-cupon .fp-cupon-copiar{ border-radius:8px; max-width:150px; background:rgba(0,0,0,.4); } .fp-popup-cerrar-link{ display:inline-block; margin-top:.9rem; font-size:12.5px; color:inherit; opacity:.7; text-decoration:underline; cursor:pointer; } .fp-popup-cerrar-link:hover{ opacity:1; color:inherit; } /* ========================================================================= RASPÁ Y GANÁ — juego de cupones raspables (Fase 4 Wigy, premium) ========================================================================= */ .fp-raspadita-card{ background:linear-gradient(160deg, #1d1d22, #3a3324); color:#fff; } .fp-raspadita-zona{ position:relative; height:180px; border-radius:12px; overflow:hidden; margin-bottom:1rem; background:#111; user-select:none; } .fp-raspadita-premio{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:19px; font-weight:800; color:#e6c877; } .fp-raspadita-zona canvas{ position:absolute; inset:0; cursor:crosshair; touch-action:none; } .fp-raspadita-flotante{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:1039; display:inline-flex; align-items:center; gap:.45rem; border:none; cursor:pointer; background:var(--color-primario); color:#ffffff; font-size:13.5px; font-weight:800; padding:.65rem 1.4rem; border-radius:999px; box-shadow:0 6px 22px rgba(20,20,25,.35); animation:fpVideoPulse 2s ease-out infinite; } .fp-raspadita-flotante i{ font-size:17px; } /* ========================================================================= Ajustes responsivos ========================================================================= */ @media (max-width: 575.98px){ .fp-plan-prices{ text-align:right; } .fp-countdown-boxes{ margin-left:0; } .fp-countdown{ justify-content:space-between; } .fp-cd-box{ min-width:38px; } .fp-cupon{ flex-direction:column; align-items:stretch; text-align:center; } .fp-cupon-codigo{ max-width:100%; min-width:0; } .fp-cupon-countdown{ justify-content:center; } .fp-despacho{ align-items:flex-start; } } /* ========================================================================= DRAG DE BLOQUES EN EL PREVIEW — reordenar la ficha (solo preview=1) ========================================================================= */ body.fp-preview-drag [data-fp-bloque]:not([data-fp-fijo="1"]){ cursor: grab; } body.fp-preview-drag [data-fp-bloque]:not([data-fp-fijo="1"]):hover{ outline: 1.5px dashed rgba(0,0,0,.2); outline-offset: 3px; } body.fp-preview-drag [data-fp-bloque].fp-drag-origen{ opacity: .35; } body.fp-preview-drag [data-fp-bloque].fp-drop-antes{ box-shadow: 0 -3px 0 0 var(--color-primario); } /* ========================================================================= Espaciado uniforme de bloques reordenables — el ritmo lo pone el gap del contenedor, no los margenes de cada bloque (si no, al reordenar sobra o falta aire segun el vecino) ========================================================================= */ [id^="preciosProducto_"] > div > [data-fp-bloque]{ margin-top: 0 !important; margin-bottom: 0 !important; } [data-fp-bloque="mercadolibre"] > *{ margin-top: 0 !important; margin-bottom: 0 !important; } [data-fp-bloque="countdown"], [data-fp-bloque="gift"], [data-fp-bloque="atributos"]{ width: 100%; } div.container[id^="divProducto_"]{ display: flex; flex-direction: column; row-gap: 2.5rem; } div.container[id^="divProducto_"] > [data-fp-bloque]{ margin-top: 0 !important; margin-bottom: 0 !important; } [data-fp-bloque="countdown"] > *{ margin-top: 0 !important; margin-bottom: 0 !important; } [data-fp-bloque] > :first-child{ margin-top: 0 !important; } [data-fp-bloque] > :first-child > :first-child{ margin-top: 0 !important; } [data-fp-bloque] > :last-child{ margin-bottom: 0 !important; } [data-fp-bloque] > :last-child > :last-child{ margin-bottom: 0 !important; } [data-fp-bloque] > :last-child > :last-child > :last-child{ margin-bottom: 0 !important; } div.container[id^="divProducto_"] > section:not([data-fp-bloque]){ order: 9999; } [data-fp-bloque="reels"] > .fp-reels-fila{ margin-top: -.5rem !important; margin-bottom: -.5rem !important; } .fp-reel-play{ inset: auto; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); } .fp-reel-play i{ line-height: 1; display: block; } [data-fp-bloque="comparativa"] table, [data-fp-bloque="comparativa"] .table{ margin-bottom: 0 !important; } [data-fp-bloque="resenas"] .fp-resenas-grid{ margin-bottom: -1rem !important; } div.container[id^="divProducto_"] > section[data-fp-bloque]{ padding-top: 0 !important; padding-bottom: 0 !important; } div.container[id^="divProducto_"] > section[data-fp-bloque] > .container{ padding-top: 0 !important; padding-bottom: 0 !important; } .fp-countdown-img{ width: 46px; height: 46px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; } .fp-despacho-dia{ line-height: 15px; margin-left: 3px; margin-top: 4px; } h2.post-title.display-5:empty{ min-height: 1.2em; } body.fp-preview-drag .item-link span{ display: none !important; } @media (max-width: 575.98px){ del[id^="txtAnterior_"]{ order: 10; } } /* En el celular el botón de ampliar tapa la foto, así que no se muestra */ @media (max-width: 767.98px){ #swiperProductos .swiper-slide figure .item-link{ display: none !important; } } /* ========================================================================= PUNTOS — cuantos puntos suma la compra ========================================================================= */ .fp-puntos{ display:flex; align-items:center; gap:.55rem; border:1.5px solid var(--color-primario-30); border-radius:var(--fp-radius); background:var(--color-primario-10); color:var(--fp-ink); padding:.6rem .8rem; margin-bottom:1rem; font-size:14px; } .fp-puntos-ico{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:#fff; color:var(--color-primario); } .fp-puntos-ico i{ font-size:17px; line-height:1; } .fp-puntos-txt{ line-height:1.25; } .fp-puntos-txt b{ color:var(--color-primario); } .fp-puntos-link{ color:var(--color-primario); font-weight:700; text-decoration:underline; cursor:pointer; } /* ========================================================================== Perfumería — perfil de la fragancia (puntajes, barras y pirámide de notas) Se muestra cuando el producto tiene cargado el panel Perfumería. ========================================================================== */ .fp-perfumeria{ margin-top: 2.5rem; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .fp-perfumeria-titulo{ margin: 0; font-size: 1.25rem; color: var(--fp-ink); } /* Los puntajes van como una tira de un renglon, separados por una linea fina: cuatro tarjetas con borde y relleno para cuatro pares de estrellas pesaban mucho mas de lo que dicen. */ .fp-perfumeria-puntajes{ display: flex; flex-wrap: wrap; gap: 0 1.6rem; } .fp-perfumeria-puntaje{ display: flex; align-items: center; gap: .5rem; padding: .35rem 0; } .fp-perfumeria-icono{ display: inline-flex; align-items: center; justify-content: center; color: var(--color-primario); opacity: .85; flex: 0 0 auto; } .fp-perfumeria-icono i{ font-size: 17px; line-height: 1; } .fp-perfumeria-puntaje-label{ font-size: .85rem; color: var(--fp-muted); line-height: 1.25; } .fp-perfumeria-estrellas{ display: flex; gap: 1px; font-size: .82rem; line-height: 1; } .fp-perfumeria-estrella-llena{ color: #fab758; } .fp-perfumeria-estrella-vacia{ color: var(--fp-border-strong); } .fp-perfumeria-cuerpo{ display: grid; gap: 1rem; } /* Ocasion, Genero y Estacion en una sola fila a todo el ancho. Apilados en la columna derecha estiraban el bloque al doble y dejaban media pantalla vacia al lado de las notas. */ .fp-perfumeria-grupos{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; } @media (min-width: 992px){ .fp-perfumeria-cuerpo{ grid-template-columns: 1.35fr 1fr; align-items: start; } } /* Relleno apenas tenido y sin borde: la separacion la hace el aire, no una caja dibujada. */ .fp-perfumeria-grupo{ background: var(--fp-soft); border-radius: var(--fp-radius-sm); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .45rem; } .fp-perfumeria-grupo-titulo{ font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fp-muted); margin-bottom: .15rem; } .fp-perfumeria-acordes{ background: var(--fp-soft); border-radius: var(--fp-radius-sm); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; } .fp-perfumeria-acorde{ min-width: 22%; max-width: 100%; border-radius: 999px; padding: .28rem .8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .fp-perfumeria-acorde:hover, .fp-perfumeria-acorde:focus-visible{ transform: translateX(3px); box-shadow: 0 2px 8px rgba(0, 0, 0, .28); } .fp-perfumeria-acorde-nombre{ font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: capitalize; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-perfumeria-acorde-claro .fp-perfumeria-acorde-nombre{ color: #2a2a2a; text-shadow: none; } /* La barra es un riel fino con el nombre a la izquierda y el numero a la derecha, en vez de una capsula gruesa con el numero adentro: dice lo mismo ocupando un tercio y sin gritar. */ .fp-perfumeria-barra-fila{ display: grid; grid-template-columns: 1.1rem 5.4rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .5rem; } /* Cada fila lleva al catalogo con los perfumes de ese valor. El margen negativo compensa el relleno, asi el fondo del hover no corre las barras de lugar. */ a.fp-perfumeria-barra-fila{ margin: 0 -.4rem; padding: .12rem .4rem; border-radius: var(--fp-radius-sm); color: inherit; text-decoration: none; transition: background-color .18s ease; } a.fp-perfumeria-barra-fila:hover, a.fp-perfumeria-barra-fila:focus-visible{ background: color-mix(in srgb, var(--color-primario) 12%, transparent); color: inherit; } a.fp-perfumeria-barra-fila:hover .fp-perfumeria-barra-label, a.fp-perfumeria-barra-fila:focus-visible .fp-perfumeria-barra-label{ color: var(--color-primario); } a.fp-perfumeria-barra-fila:focus-visible{ outline: 2px solid var(--color-primario); outline-offset: 1px; } /* El icono va del mismo tono que su barra: el color deja de ser decoracion y pasa a ser lo que identifica cada item de un vistazo, como en la ficha de fragrantica. */ .fp-perfumeria-barra-icono{ display: inline-flex; align-items: center; justify-content: center; color: var(--tono, var(--fp-muted)); line-height: 1; } .fp-perfumeria-barra-icono i{ font-size: 15px; line-height: 1; } .fp-perfumeria-barra-label{ font-size: .82rem; color: var(--fp-ink); } .fp-perfumeria-barra-pista{ background: rgba(125, 125, 135, .16); border-radius: 999px; height: 8px; overflow: hidden; } .fp-perfumeria-barra{ height: 100%; border-radius: 999px; background: var(--tono, var(--fp-border-strong)); transition: width .4s ease; } .fp-perfumeria-barra-valor{ font-size: .76rem; color: var(--fp-muted); font-variant-numeric: tabular-nums; text-align: right; } /* Un tono por item, en el mismo registro pastel que usa fragrantica en su ficha. Los cuatro de Estacion son literalmente los suyos, leidos de la pagina; los de Ocasion y Genero se eligieron en esa misma familia para que las tres tarjetas se vean como una sola cosa. */ .fp-perfumeria-item-especial{ --tono: rgb(203, 166, 247); } .fp-perfumeria-item-casual{ --tono: rgb(146, 214, 186); } .fp-perfumeria-item-cita{ --tono: rgb(244, 133, 155); } .fp-perfumeria-item-oficina{ --tono: rgb(139, 184, 212); } .fp-perfumeria-item-mujer{ --tono: rgb(247, 158, 196); } .fp-perfumeria-item-hombre{ --tono: rgb(122, 172, 232); } .fp-perfumeria-item-unisex{ --tono: rgb(186, 164, 230); } .fp-perfumeria-item-primavera{ --tono: rgb(159, 229, 132); } .fp-perfumeria-item-verano{ --tono: rgb(252, 149, 138); } .fp-perfumeria-item-otonio{ --tono: rgb(249, 190, 110); } .fp-perfumeria-item-invierno{ --tono: rgb(120, 214, 240); } .fp-perfumeria-item-dia{ --tono: rgb(245, 158, 11); } .fp-perfumeria-item-noche{ --tono: rgb(139, 184, 212); } .fp-perfumeria-piramide{ display: flex; flex-direction: column; gap: .9rem; background: var(--fp-soft); border-radius: var(--fp-radius-sm); padding: .9rem 1rem; } .fp-perfumeria-nivel{ display: flex; flex-direction: column; gap: .8rem; } .fp-perfumeria-nivel-titulo{ font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fp-muted); } .fp-perfumeria-notas{ display: flex; flex-wrap: wrap; gap: 1.4rem; } /* Cada nota lleva al catálogo filtrado por ese ingrediente. */ .fp-perfumeria-nota{ width: 5.5rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; text-decoration: none; color: inherit; padding: .35rem .2rem; border-radius: var(--fp-radius-sm); transition: background-color .18s ease, transform .18s ease; } .fp-perfumeria-nota:hover, .fp-perfumeria-nota:focus-visible{ background: color-mix(in srgb, var(--color-primario) 12%, transparent); color: inherit; transform: translateY(-2px); } .fp-perfumeria-nota:hover .fp-perfumeria-nota-img{ border-color: var(--color-primario); } .fp-perfumeria-nota:hover .fp-perfumeria-nota-nombre{ color: var(--color-primario); } .fp-perfumeria-nota:focus-visible{ outline: 2px solid var(--color-primario); outline-offset: 2px; } .fp-perfumeria-nota-img{ transition: border-color .18s ease; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--fp-border); background: #fff; } .fp-perfumeria-nota-sinimg{ display: inline-flex; align-items: center; justify-content: center; color: var(--fp-muted); font-size: 1.5rem; } .fp-perfumeria-nota-nombre{ font-size: .82rem; line-height: 1.25; color: var(--fp-ink); } @media (max-width: 575.98px){ .fp-perfumeria-barra-fila{ grid-template-columns: 1rem 4.6rem minmax(0, 1fr) 2.1rem; gap: .4rem; } .fp-perfumeria-barra-label, .fp-perfumeria-barra-valor{ font-size: .76rem; } .fp-perfumeria-notas{ gap: 1rem; } .fp-perfumeria-nota{ width: 4.6rem; } .fp-perfumeria-nota-img{ width: 3.4rem; height: 3.4rem; } } /* ========================================================================== Casa (marca) en la ficha — logo enlazado al listado de esa marca ========================================================================== */ /* Encabezado del perfil: el titulo a la izquierda y el logo de la casa a la derecha. En el titulo del producto el logo competia con el nombre; aca acompaña a los datos de la fragancia, que es donde el visitante lo busca. */ .fp-perfumeria-cab{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .fp-casa{ display: inline-flex; align-items: center; text-decoration: none; opacity: .9; transition: opacity .18s ease; } .fp-casa:hover{ opacity: 1; } .fp-casa-logo{ max-height: 42px; max-width: 160px; width: auto; object-fit: contain; } .fp-casa-nombre{ font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fp-muted); } /* ========================================================================== Perfume al que imita — recuadro "Inspirado en" del perfil de la fragancia La foto del frasco va sobre un fondo blanco propio: las de fragrantica traen fondo blanco, y asi quedan como una tarjeta prolija tambien en un sitio oscuro. ========================================================================== */ .fp-perfumeria-imita{ display: flex; align-items: center; gap: 1rem; align-self: flex-start; max-width: 100%; min-width: min(100%, 340px); padding: .75rem 1.1rem .75rem .75rem; background: var(--fp-soft); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-sm); text-decoration: none; color: inherit; transition: border-color .18s ease; } .fp-perfumeria-imita:hover{ border-color: var(--color-primario); color: inherit; } .fp-perfumeria-imita:focus-visible{ outline: 2px solid var(--color-primario); outline-offset: 2px; } .fp-perfumeria-imita-img{ flex: 0 0 auto; width: 4.75rem; height: 4.75rem; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .fp-perfumeria-imita-img img{ width: 100%; height: 100%; object-fit: contain; padding: .3rem; } .fp-perfumeria-imita-texto{ display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; } .fp-perfumeria-imita-label{ font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primario); } .fp-perfumeria-imita-nombre{ font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--fp-ink); overflow-wrap: anywhere; } .fp-perfumeria-imita-ir{ flex: 0 0 auto; margin-left: .25rem; color: var(--fp-muted); font-size: 1.3rem; line-height: 1; transition: transform .18s ease, color .18s ease; } .fp-perfumeria-imita:hover .fp-perfumeria-imita-ir{ color: var(--color-primario); transform: translateX(3px); } @media (max-width: 575.98px){ .fp-perfumeria-imita{ align-self: stretch; min-width: 0; } .fp-perfumeria-imita-img{ width: 4rem; height: 4rem; } .fp-perfumeria-imita-nombre{ font-size: 1.05rem; } }