/** * ============================================================================== * TARJETAS DE PRODUCTOS - CATÁLOGO DE INICIO (IORO TIENDA) * ============================================================================== * Archivo: recursos-clientes/productos/tarjetas-productos.css * Propósito: Controlar de forma exclusiva y aislada el diseño visual, dimensiones, * tipografías, animaciones y botones de las tarjetas de productos en la página principal. * ============================================================================== */ /* ============================================================================== 1. CONTENEDOR PRINCIPAL DE LA TARJETA (.producto) ============================================================================== */ /* ========================================================================== TARJETAS DE PRODUCTOS MODERNAS (GLASSMORPHYS PREMIUM & MIDNIGHT THEME) ========================================================================== */ .contenedor > div, .producto { width: 290px; max-width: 100%; border-radius: 20px; background: rgba(17, 26, 46, 0.94); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease; box-sizing: border-box; position: relative; content-visibility: visible; contain-intrinsic-size: none; contain: none; animation: fadeIn 0.4s ease-out forwards; } /* Ocultar producto cuando no coincide con la búsqueda en tiempo real (máxima prioridad) */ .producto.oculto-busqueda, div.producto.oculto-busqueda, .contenedor .producto.oculto-busqueda, .contenedor.modo-movil-1_columna .producto.oculto-busqueda, body.scroll-snap-activo .contenedor .producto.oculto-busqueda, body.scroll-snap-activo .producto.oculto-busqueda { display: none !important; } @media (hover: hover) and (pointer: fine) { .contenedor > div:hover, .producto:hover { transform: translateY(-7px); background: rgba(22, 34, 60, 0.92); border-color: rgba(56, 189, 248, 0.4); box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.15); } } .informacion { flex-grow: 1; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; box-sizing: border-box; width: 100%; } .informacion .nombre-producto, .informacion > p:first-child { font-family: 'Space Grotesk', 'Montserrat', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 !important; line-height: 1.35 !important; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 0; height: auto; letter-spacing: 0.2px; } .informacion .descripcion-producto { font-size: 0.82rem; color: #94a3b8; text-align: center; line-height: 1.38; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 0; height: auto; max-height: 5.6em; word-break: break-word; white-space: pre-line; transition: color 0.2s ease; } /* Asegura hasta 4 líneas completas de descripción */ .producto:not(:has(.variantes-container)) .informacion .descripcion-producto { -webkit-line-clamp: 4; line-clamp: 4; } .producto:hover .informacion .descripcion-producto { color: #cbd5e1; } /* Enlace interactivo "leer más" integrado directamente como texto en la descripción */ .informacion .descripcion-producto .leer-mas-inline { color: #38bdf8 !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; display: inline !important; white-space: nowrap !important; margin-left: 3px !important; transition: color 0.2s ease, opacity 0.2s ease !important; } .informacion .descripcion-producto .leer-mas-inline:hover, .informacion .descripcion-producto .leer-mas-inline:active { color: #7dd3fc !important; opacity: 0.85 !important; } /* ============================================================================== OVERLAY FLOTANTE PARA "LEER MÁS" (SE ABRE HASTA LA MITAD - NO TAPA LA IMAGEN) ============================================================================== */ .producto-overlay-desc { position: absolute; bottom: 0; left: 0; right: 0; top: auto; /* Se abre hasta la mitad del ítem para cubrir la información sin tapar la foto */ height: 52%; min-height: 220px; max-height: calc(100% - 250px); background: rgba(11, 17, 32, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 40; border-radius: 16px 16px 20px 20px; padding: 12px 14px 10px 14px; display: flex; flex-direction: column; box-sizing: border-box; transform: translateY(105%); opacity: 0; pointer-events: none; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease; box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.65), inset 0 0 20px rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.35); border-bottom: none; } .producto-overlay-desc.activo { transform: translateY(0); opacity: 1; pointer-events: auto; } .overlay-desc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .overlay-desc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; color: #38bdf8; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Space Grotesk', sans-serif; } .btn-cerrar-overlay-desc { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #f1f5f9; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; transition: all 0.2s ease; padding: 0; } .btn-cerrar-overlay-desc:hover { background: #ef4444; border-color: #ef4444; color: #ffffff; transform: scale(1.1); } .overlay-desc-content { flex: 1; overflow-y: auto; padding-right: 4px; margin-bottom: 8px; text-align: left; min-height: 0; } /* Scrollbar fino y moderno para la descripción */ .overlay-desc-content::-webkit-scrollbar { width: 4px; } .overlay-desc-content::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.4); border-radius: 4px; } .overlay-desc-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); } .overlay-desc-titulo { font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 700; color: #ffffff; margin: 0 0 6px 0; line-height: 1.3; } .overlay-desc-cuerpo { font-size: 0.82rem; color: #cbd5e1; line-height: 1.5; white-space: pre-line; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .overlay-desc-footer { padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; gap: 6px; flex-shrink: 0; } .btn-cerrar-desc-cta { width: 100%; height: 30px; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 8px; color: #38bdf8; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.2s ease; } .btn-cerrar-desc-cta:hover { background: #38bdf8; color: #0b1120; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.35); } .informacion .precio { font-family: 'Space Grotesk', 'Montserrat', sans-serif !important; font-size: 1.25rem !important; font-weight: 800 !important; color: #d2dad5 !important; margin: 4px 0 !important; letter-spacing: 0.3px !important; text-shadow: 0 2px 10px rgba(34, 197, 94, 0.25); display: flex; align-items: center; justify-content: center; gap: 4px; } .informacion .precio span { font-size: 0.95rem; font-weight: 600; } /* Valoración con estrellas */ .rating-container { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0; } .rating-stars { display: flex; gap: 2px; } .rating-stars .fa-star { font-size: 13px; color: #334155; transition: color 0.2s; } .rating-stars .fa-star.filled, .rating-stars:hover .fa-star:hover, .rating-stars .fa-star:hover ~ .fa-star { color: #f59e0b; } /* Fila combinada para Reseñas y Alerta de Escasez */ .resenas-alerta-fila { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } /* Botón de Reseñas */ .resenas-btn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.25); color: #38bdf8; padding: 3px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; font-family: 'Space Grotesk', sans-serif; margin-top: 2px; transition: all 0.25s ease; } .resenas-btn:hover { background: rgba(56, 189, 248, 0.2); border-color: #38bdf8; color: #ffffff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(56, 189, 248, 0.25); } /* Variantes dinámicas */ .variantes-label-dinamico { font-size: 11.5px !important; color: #94a3b8 !important; margin: 4px 0 2px 0 !important; font-family: 'Space Grotesk', sans-serif !important; } .variantes-container { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 4px 0 8px 0; background-color: transparent; width: 100%; flex-wrap: wrap; } /* Acciones del Producto (Botones Comprar y 3D) */ .producto-acciones { display: flex; gap: 8px; width: 100%; justify-content: center; margin-top: auto; padding-top: 8px; } .btn-comprar, .informacion button.btn-comprar, .informacion button:not(.btn-personalizar):not(.btn-contactar-servicio):not(.variante-btn):not(.btn-cerrar-overlay-desc):not(.btn-cerrar-desc-cta) { flex: 1; width: 100%; height: 40px !important; background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-top: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 10px !important; color: #ffffff !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; box-sizing: border-box !important; } .btn-comprar:hover, .informacion button.btn-comprar:hover, .informacion button:not(.btn-personalizar):not(.btn-contactar-servicio):not(.variante-btn):not(.btn-cerrar-overlay-desc):not(.btn-cerrar-desc-cta):hover { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important; } .btn-comprar:active, .informacion button.btn-comprar:active, .informacion button:not(.btn-personalizar):not(.btn-contactar-servicio):not(.variante-btn):not(.btn-cerrar-overlay-desc):not(.btn-cerrar-desc-cta):active { transform: scale(0.96); } .btn-contactar-servicio, .informacion button.btn-contactar-servicio, .producto .informacion button.btn-contactar-servicio, .producto-acciones button.btn-contactar-servicio { flex: 1; width: 100%; height: 40px !important; background: linear-gradient(135deg, #03792e 0%, #128C7E 100%) !important; background-color: #03792e !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.45) !important; border-radius: 10px !important; color: #ffffff !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; box-sizing: border-box !important; } .btn-contactar-servicio:hover, .informacion button.btn-contactar-servicio:hover, .producto .informacion button.btn-contactar-servicio:hover, .producto-acciones button.btn-contactar-servicio:hover { background: linear-gradient(135deg, #058034 0%, #0d5a29 100%) !important; background-color: #058034 !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(9, 104, 43, 0.5) !important; color: #ffffff !important; } .btn-contactar-servicio:active, .informacion button.btn-contactar-servicio:active, .producto .informacion button.btn-contactar-servicio:active, .producto-acciones button.btn-contactar-servicio:active { background: linear-gradient(135deg, #03792e 0%, #0d5a29 100%) !important; background-color: #03792e !important; transform: scale(0.96); color: #ffffff !important; } .btn-contactar-servicio i { font-size: 16px !important; color: #ffffff !important; } .btn-personalizar, .informacion button.btn-personalizar { flex: 1; width: 100%; height: 40px !important; background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(37, 99, 235, 0.25) 100%) !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; border-radius: 10px !important; color: #38bdf8 !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; box-sizing: border-box !important; } .btn-personalizar:hover, .informacion button.btn-personalizar:hover { background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important; color: #ffffff !important; border-color: #38bdf8 !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(56, 189, 248, 0.45) !important; } .btn-personalizar:active, .informacion button.btn-personalizar:active { transform: scale(0.96); } .soldOut, .informacion .soldOut, .producto-acciones .soldOut { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.35) !important; color: #f87171 !important; padding: 0 16px !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 13.5px !important; font-family: 'Space Grotesk', sans-serif !important; margin: 0 !important; margin-top: auto !important; width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; flex-shrink: 0 !important; user-select: none !important; letter-spacing: 0.5px !important; } .variante-tipo { font-size: 14px; font-weight: 50; } .variante-btn { background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28) !important; color: #ffffff !important; padding: 3px 8px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; font-family: 'Space Grotesk', 'Montserrat', sans-serif !important; line-height: 1 !important; min-width: 24px !important; height: 26px !important; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: all 0.2s ease; margin: 2px !important; box-sizing: border-box !important; } .variante-btn:hover:not(:disabled) { background-color: rgba(37, 211, 102, 0.25); border-color: #25d366 !important; color: #ffffff !important; } .variante-btn.selected { background-color: #25d366 !important; color: #0b101e !important; border-color: #25d366 !important; font-weight: 700 !important; box-shadow: 0 0 10px rgba(37, 211, 102, 0.4) !important; } /* ============================================================================== 6B. INSIGNIAS Y ETIQUETAS SOBRE LA IMAGEN (.etiqueta-nuevo, .etiqueta-servicio) ============================================================================== */ /* Pestaña de Producto Nuevo (Esquina superior IZQUIERDA exclusiva) */ .etiqueta-nuevo { position: absolute; top: 15px; left: -8px; background-color: #25D366; color: #ffffff; padding: 6px 12px; border-radius: 0 20px 20px 0; font-weight: 700; font-size: 13.5px; z-index: 10; box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4); text-transform: uppercase; letter-spacing: 0.5px; animation: pop-in 0.4s ease-out; pointer-events: none; } /* Insignia de Servicio (Esquina superior DERECHA - nunca interfiere con ¡Nuevo!) */ .etiqueta-servicio { position: absolute; top: 12px; right: 12px; left: auto; z-index: 8; padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, rgba(37, 211, 102, 0.95), rgba(18, 140, 126, 0.95)); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); letter-spacing: 0.3px; pointer-events: none; animation: pop-in 0.35s ease-out; } .etiqueta-servicio i { color: #ffffff; font-size: 11px; } /* Insignia de Video Preview sobre la imagen */ .producto-media .video-badge { position: absolute !important; top: 15px !important; right: 15px !important; bottom: auto !important; left: auto !important; height: auto !important; max-height: 34px !important; width: auto !important; display: inline-flex !important; align-items: center; gap: 6px; z-index: 5; pointer-events: none; } /* Insignia de Servicio dentro del cuerpo de información */ .tag-badge-servicio { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #25d366; background: rgba(37, 211, 102, 0.12); border: 1px solid rgba(37, 211, 102, 0.3); padding: 3px 9px; border-radius: 12px; letter-spacing: 0.3px; margin-left: 6px; } .tag-badge-servicio i { font-size: 10px; } /* ============================================================================== 6C. ALERTA DE ESCASIEZ («🔥 ¡Casi agotado!» - EFECTO FOMO) ============================================================================== */ .alerta-escasez { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 4px auto 2px auto; padding: 4px 12px; background: linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0%, rgba(249, 115, 22, 0.22) 100%); border: 1px solid rgba(249, 115, 22, 0.55); border-radius: 20px; color: #ff9800; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; box-shadow: 0 2px 10px rgba(249, 115, 22, 0.2); animation: pulso-escasez 2.2s infinite ease-in-out; user-select: none; box-sizing: border-box; width: fit-content; max-width: 92%; pointer-events: none; } .alerta-escasez-fuego { font-size: 13px; line-height: 1; display: inline-block; animation: fuego-flotante 1.8s infinite ease-in-out alternate; } .alerta-escasez-texto { line-height: 1; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } @keyframes pulso-escasez { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); border-color: rgba(249, 115, 22, 0.4); } 50% { box-shadow: 0 0 12px 2px rgba(249, 115, 22, 0.25); border-color: rgba(249, 115, 22, 0.85); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); border-color: rgba(249, 115, 22, 0.4); } } @keyframes fuego-flotante { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.15) translateY(-1px); } 100% { transform: scale(1) translateY(0); } } /* ========================================================================== Fin de TARJETAS DE PRODUCTOS MODERNAS (GLASSMORPHYS PREMIUM & MIDNIGHT THEME) ========================================================================== */ /* ============================================================================== 7. ADAPTABILIDAD RESPONSIVA PARA DISPOSITIVOS MÓVILES (<= 768px) ============================================================================== */ @media (max-width: 768px) { /* Ocultar barra de scroll vertical en móviles */ html, body, #contenedor, .contenedor, main { scrollbar-width: none !important; -ms-overflow-style: none !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, #contenedor::-webkit-scrollbar, .contenedor::-webkit-scrollbar, main::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } .producto { width: 100%; max-width: 348px; height: 525px !important; min-height: 525px !important; max-height: 525px !important; display: flex !important; flex-direction: column !important; border-radius: 20px; margin: 0 auto; overflow: hidden; box-sizing: border-box; transform: translateZ(0) !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; content-visibility: visible !important; contain-intrinsic-size: none !important; contain: none !important; animation: fadeInMobile 0.35s ease-out forwards !important; } @keyframes fadeInMobile { from { opacity: 0; } to { opacity: 1; } } .contenedor > div:hover, .producto:hover, .contenedor > div:active, .producto:active { transform: translateZ(0) !important; } .btn-comprar:hover, .informacion button.btn-comprar:hover, .btn-contactar-servicio:hover, .informacion button.btn-contactar-servicio:hover, .btn-personalizar:hover, .informacion button.btn-personalizar:hover { transform: none !important; } .producto-media, .producto-media.has-swiper, .producto--has-swiper .producto-media, .producto:has(.swiper) .producto-media { height: 275px !important; min-height: 275px !important; max-height: 275px !important; flex-shrink: 0 !important; border-radius: 19px 19px 0 0; position: relative; overflow: hidden; } .etiqueta-nuevo { top: 12px; font-size: 12px; padding: 5px 10px; } .etiqueta-servicio { top: 12px; right: 12px; font-size: 11px; padding: 4px 9px; } .etiqueta-servicio ~ .etiqueta-origen { top: 40px; } .etiqueta-origen { top: 12px; right: 12px; font-size: 11px; padding: 4px 9px; } .informacion { flex: 1 1 auto !important; height: 250px !important; min-height: 250px !important; max-height: 250px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 10px 14px 12px 14px !important; gap: 3px !important; box-sizing: border-box !important; overflow: hidden !important; } .informacion .nombre-producto, .informacion > p:first-child { font-size: 0.98rem !important; line-height: 1.25 !important; height: auto !important; min-height: 0 !important; max-height: 2.6em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; } .producto-tienda-tag { margin: 1px 0 2px 0 !important; } .tag-badge-vendedor { font-size: 10px !important; padding: 2px 7px !important; } .informacion .descripcion-producto, .producto:not(:has(.variantes-container)) .informacion .descripcion-producto { font-size: 0.77rem !important; line-height: 1.3 !important; height: auto !important; min-height: 0 !important; max-height: 2.7em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; } .informacion .descripcion-producto .leer-mas-inline { color: #e2e8f0 !important; font-weight: 600 !important; cursor: pointer !important; display: inline !important; white-space: nowrap !important; text-decoration: none !important; margin-left: 3px !important; opacity: 0.95 !important; } .informacion .descripcion-producto .leer-mas-inline:active { color: #ffffff !important; opacity: 0.75 !important; } .informacion .precio { font-size: 1.20rem !important; margin: 2px 0 !important; font-weight: 800 !important; } .rating-container { margin: 1px 0 !important; gap: 4px !important; } .rating-stars .fa-star { font-size: 11.5px !important; } .resenas-btn { font-size: 10.5px !important; padding: 2px 7px !important; margin-top: 1px !important; } .variantes-label-dinamico { font-size: 10.5px !important; margin: 1px 0 !important; } .variantes-container { margin: 2px 0 !important; gap: 4px !important; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: center !important; width: 100% !important; padding: 1px 0 !important; scrollbar-width: none !important; } .variantes-container::-webkit-scrollbar { display: none !important; } .variante-btn { height: 24px !important; min-height: 24px !important; font-size: 10.5px !important; padding: 2px 7px !important; line-height: 1 !important; margin: 1px !important; flex-shrink: 0 !important; } .alerta-escasez { font-size: 10px !important; padding: 2px 7px !important; gap: 4px !important; margin: 1px 0 !important; } .alerta-escasez-fuego { font-size: 11px !important; } .producto-acciones, .soldOut, .informacion .soldOut, .producto-acciones .soldOut { padding-top: 4px !important; margin-top: auto !important; gap: 6px !important; flex-shrink: 0 !important; width: 100% !important; } .btn-comprar, .btn-comprar-servicio, .btn-contactar-servicio, .btn-personalizar, .informacion button.btn-comprar, .informacion button.btn-contactar-servicio, .soldOut, .informacion .soldOut, .producto-acciones .soldOut { height: 38px !important; min-height: 38px !important; max-height: 38px !important; font-size: 13.5px !important; width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; box-sizing: border-box !important; } .producto-overlay-desc { height: 62% !important; min-height: 180px !important; max-height: 82% !important; border-radius: 14px 14px 18px 18px !important; padding: 10px 12px !important; } } /* ============================================================================== AJUSTE EXCLUSIVO PARA PANTALLAS DE PC (>= 769px): CENTRADO PERFECTO DE RESEÑAS E INSIGNIA DE ESCASIEZ EN TARJETAS CON VARIANTES ============================================================================== */ @media (min-width: 769px) { /* En tarjetas con variantes en PC: apilar verticalmente en columna para que la insignia no empuje el botón de reseñas a la izquierda */ .tarjeta-variantes .resenas-alerta-fila, .producto:has(.variantes-container) .resenas-alerta-fila, .producto.tarjeta-variantes .resenas-alerta-fila { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: 100% !important; margin: 4px auto 3px auto !important; padding: 0 !important; text-align: center !important; } /* Botón de reseñas perfectamente centrado */ .tarjeta-variantes .resenas-alerta-fila .resenas-btn, .producto:has(.variantes-container) .resenas-alerta-fila .resenas-btn, .producto.tarjeta-variantes .resenas-alerta-fila .resenas-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; align-self: center !important; font-size: 11.5px !important; padding: 3px 12px !important; border-radius: 6px !important; text-align: center !important; width: fit-content !important; max-width: 90% !important; } /* Insignia de escasez perfectamente centrada sin márgenes auto que empujen hacia los lados */ .tarjeta-variantes .resenas-alerta-fila .alerta-escasez, .producto:has(.variantes-container) .resenas-alerta-fila .alerta-escasez, .producto.tarjeta-variantes .resenas-alerta-fila .alerta-escasez { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; align-self: center !important; width: fit-content !important; max-width: 90% !important; padding: 3px 11px !important; font-size: 11px !important; text-align: center !important; } .tarjeta-variantes .resenas-alerta-fila .alerta-escasez .alerta-escasez-fuego { font-size: 12px !important; line-height: 1 !important; } .tarjeta-variantes .resenas-alerta-fila .alerta-escasez .alerta-escasez-texto { font-size: 11px !important; line-height: 1 !important; } } @media (max-height: 680px) { .producto { height: 480px !important; min-height: 480px !important; max-height: 480px !important; } .producto-media, .producto-media.has-swiper, .producto--has-swiper .producto-media, .producto:has(.swiper) .producto-media { height: 240px !important; min-height: 240px !important; max-height: 240px !important; } .informacion { height: 240px !important; min-height: 240px !important; max-height: 240px !important; } } /* ========================================================================== AJUSTE PARA CELULARES GRANDES (448px del emulador, iPhone Pro Max, Plus, Galaxy Ultra) Cubre desde 420px hasta 768px (incluyendo los 448px de tu emulador de celular) ========================================================================== */ @media (min-width: 445px) and (max-width: 768px) { /* 1. TAMAÑO TOTAL DE LA TARJETA (Ancho y Alto) */ .producto, body.scroll-snap-activo .contenedor > div, body.scroll-snap-activo .contenedor .producto, body.scroll-snap-activo .producto, .contenedor.modo-movil-1_columna .producto { max-width: 380px !important; /* <-- Modifica aquí el ANCHO (ej: 380px) */ height: 740px !important; /* <-- Modifica aquí el ALTO TOTAL */ min-height: 450px !important; max-height: 740px !important; display: flex !important; flex-direction: column !important; } /* 2A. ALTURA DE LA FOTO INDIVIDUAL (SOLO 1 foto fija, SIN tocar el Swiper) */ .producto-media:not(.has-swiper), body.scroll-snap-activo .producto-media:not(.has-swiper), .producto:not(.producto--has-swiper) .producto-media, body.scroll-snap-activo .producto:not(.producto--has-swiper) .producto-media { height: 380px !important; /* <-- Modifica aquí el ALTO del recuadro de la foto individual */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } .producto-media:not(.has-swiper) > img, body.scroll-snap-activo .producto-media:not(.has-swiper) > img { width: 100% !important; /* <-- Ancho de la foto individual */ height: 100% !important; /* <-- Alto de la foto individual */ max-height: 100% !important; object-fit: cover !important; /* 'cover' llena el espacio | 'contain' muestra foto completa sin recortar */ object-position: center !important; display: block !important; } /* 2B. ALTURA DEL CONTENEDOR DEL SWIPER (Carrusel de fotos) */ .producto-media.has-swiper, body.scroll-snap-activo .producto-media.has-swiper, .producto--has-swiper .producto-media, body.scroll-snap-activo .producto--has-swiper .producto-media, .producto:has(.swiper) .producto-media, body.scroll-snap-activo .producto:has(.swiper) .producto-media { height: 380px !important; /* <-- Modifica aquí el ALTO del carrusel Swiper */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } /* 2C. CONTROL DE LAS IMÁGENES DENTRO DEL SWIPER */ .producto-media .swiper, .producto-media .swiper-slide { width: 100% !important; height: 100% !important; } .producto-media .swiper-slide img, .producto-media.has-swiper .swiper-slide img { width: 100% !important; /* <-- Ancho de la foto en el Swiper */ height: 100% !important; /* <-- Alto de la foto en el Swiper (100% llena el contenedor) */ max-height: 100% !important; object-fit: cover !important; /* 'cover' llena el espacio | 'contain' muestra foto completa sin recortar */ object-position: center !important; } /* 3. ZONA DE INFORMACIÓN (Llena automáticamente todo el alto restante de la tarjeta) */ .informacion, .producto .informacion, body.scroll-snap-activo .informacion, .contenedor.modo-movil-1_columna .informacion, body.scroll-snap-activo .contenedor .informacion, body.scroll-snap-activo .contenedor.modo-movil-1_columna .informacion { flex: 1 1 auto !important; height: auto !important; min-height: 270px !important; max-height: none !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; overflow: hidden !important; } /* 3B. ELEMENTOS INTERNOS DE INFORMACIÓN (TAMAÑOS PROPORCIONALES PARA PANTALLAS DE 448px) */ /* --- TÍTULO --- */ .informacion .nombre-producto, .informacion > p:first-child, .contenedor.modo-movil-1_columna .informacion .nombre-producto { font-size: 1.08rem !important; line-height: 1.25 !important; height: auto !important; min-height: 0 !important; max-height: 2.6em !important; margin: 0 !important; } /* --- INSIGNIA OFICIAL / TIENDA --- */ .producto-tienda-tag { margin: 2px 0 !important; } .tag-badge-vendedor { font-size: 11.5px !important; padding: 3px 10px !important; border-radius: 8px !important; } /* --- DESCRIPCIÓN --- */ .informacion .descripcion-producto, .contenedor.modo-movil-1_columna .informacion .descripcion-producto { font-size: 0.85rem !important; line-height: 1.32 !important; height: auto !important; min-height: 0 !important; max-height: 2.8em !important; margin: 0 !important; } /* --- PRECIO --- */ .informacion .precio, .contenedor.modo-movil-1_columna .informacion .precio { font-size: 1.34rem !important; font-weight: 800 !important; margin: 2px 0 !important; } /* --- ESTRELLAS DE VALORACIÓN --- */ .rating-container { margin: 2px 0 !important; gap: 5px !important; } .rating-stars .fa-star { font-size: 13.5px !important; } /* --- BOTÓN DE RESEÑAS --- */ .resenas-btn { font-size: 12px !important; padding: 3px 10px !important; margin-top: 1px !important; border-radius: 8px !important; } /* --- TEXTO DINÁMICO DE VARIANTES --- */ .variantes-label-dinamico { flex-shrink: 0 !important; font-size: 12.5px !important; margin: 3px 0 2px 0 !important; text-align: center !important; } /* --- CONTENEDOR Y BOTONES DE VARIANTES --- */ .variantes-container, .contenedor.modo-movil-1_columna .variantes-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: center !important; align-items: center !important; gap: 6px !important; margin: 3px 0 !important; padding: 2px 0 !important; width: 100% !important; flex-shrink: 0 !important; min-height: 32px !important; scrollbar-width: none !important; } .variantes-container::-webkit-scrollbar { display: none !important; } .variante-btn, .contenedor.modo-movil-1_columna .variante-btn { height: 30px !important; min-height: 30px !important; font-size: 12.5px !important; padding: 3px 12px !important; line-height: 1 !important; margin: 1px !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; font-weight: 600 !important; } .alerta-escasez { flex-shrink: 0 !important; margin: 2px 0 !important; font-size: 11px !important; padding: 3px 10px !important; } /* 4. BOTONES EN LA ZONA DE ABAJO (Comprar, Solicitar Servicio, Diseño 3D, Agotado) */ .producto-acciones, .contenedor.modo-movil-1_columna .producto-acciones, body.scroll-snap-activo .producto-acciones, .soldOut, .informacion .soldOut, .producto-acciones .soldOut { margin-top: auto !important; /* <-- EMPUJA TODOS LOS BOTONES A LA BASE INFERIOR */ padding-top: 6px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-shrink: 0 !important; } .btn-comprar, .btn-comprar-servicio, .btn-contactar-servicio, .btn-personalizar, .informacion .btn-comprar, .informacion .btn-contactar-servicio, .informacion .btn-personalizar, .producto-acciones .btn-comprar, .producto-acciones .btn-contactar-servicio, .producto-acciones .btn-personalizar, .soldOut, .informacion .soldOut, .producto-acciones .soldOut { width: 100% !important; /* Mismo ancho en todos los botones */ height: 42px !important; /* Mismo alto en todos los botones */ min-height: 42px !important; max-height: 42px !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; box-sizing: border-box !important; } /* ============================================================================== CONTROL DE DISEÑO E IMÁGENES INDEPENDIENTE POR CADA TIPO DE TARJETA (Modifica aquí el tamaño de la tarjeta y la altura de su foto sin afectar a las demás) ============================================================================== */ /* -------------------------------------------------------------------------- TIPO 1: TARJETA NORMAL (Producto estándar con botón Comprar) -------------------------------------------------------------------------- */ /* 1.1 Alto Total de la Tarjeta Normal */ .tarjeta-normal, .producto.tarjeta-normal, body.scroll-snap-activo .tarjeta-normal, body.scroll-snap-activo .producto.tarjeta-normal { height: 740px !important; /* <-- Modifica aquí el ALTO TOTAL de la tarjeta normal */ max-height: 740px !important; } /* 1.2 Altura de la Imagen (Foto fija o Carrusel Swiper) en Tarjeta Normal */ .tarjeta-normal .producto-media, .tarjeta-normal.producto .producto-media, body.scroll-snap-activo .tarjeta-normal .producto-media, body.scroll-snap-activo .producto.tarjeta-normal .producto-media, body.scroll-snap-activo .tarjeta-normal .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-normal .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-normal:not(.producto--has-swiper) .producto-media { height: 380px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN TARJETA NORMAL */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } .tarjeta-normal .informacion { justify-content: flex-start !important; gap: 6px !important; transform: translateY(24px) !important; } .tarjeta-normal .descripcion-producto { margin: 2px 0 !important; } .tarjeta-normal .precio { margin: 3px 0 !important; } .tarjeta-normal .rating-container { margin: 4px 0 !important; } .tarjeta-normal .resenas-btn { margin: 4px 0 !important; } .tarjeta-normal .alerta-escasez { margin: 4px 0 !important; } .tarjeta-normal .producto-acciones, .tarjeta-normal .soldOut, .tarjeta-normal .informacion .soldOut { margin-top: auto !important; padding-top: 10px !important; } .tarjeta-normal .btn-comprar, .tarjeta-normal .soldOut, .tarjeta-normal .informacion .soldOut, .tarjeta-normal .producto-acciones .soldOut { height: 44px !important; transform: translateY(-24px) !important; } /* -------------------------------------------------------------------------- TIPO 2: TARJETA DE SERVICIOS (Con botón WhatsApp «Solicitar Servicio») -------------------------------------------------------------------------- */ /* 2.1 Alto Total de la Tarjeta de Servicio */ .tarjeta-servicio, .producto.tarjeta-servicio, body.scroll-snap-activo .tarjeta-servicio, body.scroll-snap-activo .producto.tarjeta-servicio { height: 740px !important; /* <-- Modifica aquí el ALTO TOTAL */ max-height: 740px !important; } /* 2.2 Altura de la Imagen en Tarjeta de Servicio */ .tarjeta-servicio .producto-media, .tarjeta-servicio.producto .producto-media, body.scroll-snap-activo .tarjeta-servicio .producto-media, body.scroll-snap-activo .producto.tarjeta-servicio .producto-media, body.scroll-snap-activo .tarjeta-servicio .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-servicio .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-servicio:not(.producto--has-swiper) .producto-media { height: 380px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN SERVICIOS */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } .tarjeta-servicio .informacion { justify-content: flex-start !important; gap: 6px !important; } .tarjeta-servicio .precio { margin: 4px 0 !important; } .tarjeta-servicio .rating-container { margin: 4px 0 !important; } .tarjeta-servicio .resenas-btn { margin: 4px 0 !important; } .tarjeta-servicio .producto-acciones { margin-top: auto !important; padding-top: 10px !important; } .tarjeta-servicio .btn-contactar-servicio { height: 44px !important; } /* -------------------------------------------------------------------------- TIPO 3: TARJETA PERSONALIZABLE (Con botón «Diseño 3D») -------------------------------------------------------------------------- */ /* 3.1 Alto Total de la Tarjeta Personalizable 3D */ .tarjeta-personalizable, .producto.tarjeta-personalizable, body.scroll-snap-activo .tarjeta-personalizable, body.scroll-snap-activo .producto.tarjeta-personalizable { height: 740px !important; /* <-- Modifica aquí el ALTO TOTAL */ max-height: 740px !important; } /* 3.2 Altura de la Imagen en Tarjeta Personalizable 3D */ .tarjeta-personalizable .producto-media, .tarjeta-personalizable.producto .producto-media, body.scroll-snap-activo .tarjeta-personalizable .producto-media, body.scroll-snap-activo .producto.tarjeta-personalizable .producto-media, body.scroll-snap-activo .tarjeta-personalizable .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-personalizable .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-personalizable:not(.producto--has-swiper) .producto-media { height: 380px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN PERSONALIZABLES 3D */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } .tarjeta-personalizable .informacion { justify-content: flex-start !important; gap: 6px !important; } .tarjeta-personalizable .rating-container { margin: 4px 0 !important; } .tarjeta-personalizable .resenas-btn { margin: 4px 0 !important; } .tarjeta-personalizable .producto-acciones { margin-top: auto !important; padding-top: 10px !important; } .tarjeta-personalizable .btn-personalizar { height: 44px !important; } /* -------------------------------------------------------------------------- TIPO 4: TARJETA CON VARIANTES (Tallas / Colores + Botón Comprar) -------------------------------------------------------------------------- */ /* 4.1 Alto Total de la Tarjeta con Variantes */ .tarjeta-variantes, .producto.tarjeta-variantes, body.scroll-snap-activo .tarjeta-variantes, body.scroll-snap-activo .producto.tarjeta-variantes { height: 740px !important; /* <-- Modifica aquí el ALTO TOTAL */ max-height: 740px !important; } /* 4.2 Altura de la Imagen en Tarjeta con Variantes */ .tarjeta-variantes .producto-media, .tarjeta-variantes.producto .producto-media, body.scroll-snap-activo .tarjeta-variantes .producto-media, body.scroll-snap-activo .producto.tarjeta-variantes .producto-media, body.scroll-snap-activo .tarjeta-variantes .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-variantes .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-variantes:not(.producto--has-swiper) .producto-media { height: 340px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN VARIANTES/TALLAS */ min-height: 340px !important; max-height: 340px !important; flex-shrink: 0 !important; } .tarjeta-variantes .informacion { justify-content: flex-start !important; gap: 2px !important; } .tarjeta-variantes .descripcion-producto { margin: 2px 0 !important; } .tarjeta-variantes .precio { margin: 3px 0 !important; } .tarjeta-variantes .rating-container { margin: 2px 0 !important; } .tarjeta-variantes .resenas-alerta-fila { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; margin: 2px 0 !important; } .tarjeta-variantes .resenas-alerta-fila .resenas-btn { margin: 0 !important; } .tarjeta-variantes .resenas-alerta-fila .alerta-escasez { margin: 0 !important; } .tarjeta-variantes .variantes-label-dinamico { margin: 2px 0 !important; } .tarjeta-variantes .variantes-container { margin: 2px 0 !important; } .tarjeta-variantes .producto-acciones, .tarjeta-variantes .soldOut, .tarjeta-variantes .informacion .soldOut { margin-top: auto !important; padding-top: 4px !important; } .tarjeta-variantes .btn-comprar, .tarjeta-variantes .soldOut, .tarjeta-variantes .informacion .soldOut, .tarjeta-variantes .producto-acciones .soldOut { height: 40px !important; } /* -------------------------------------------------------------------------- TIPO 5: TARJETAS CON CARRUSEL SWIPER (.tarjeta-con-swiper / .producto--has-swiper) Control exclusivo e independiente de estructura, tamaño, fotos y paginación -------------------------------------------------------------------------- */ /* 5.1 Alto Total y Ancho de la Tarjeta con Swiper */ .tarjeta-con-swiper, .producto--has-swiper, .producto.tarjeta-con-swiper, .producto.producto--has-swiper, body.scroll-snap-activo .tarjeta-con-swiper, body.scroll-snap-activo .producto--has-swiper, body.scroll-snap-activo .producto.tarjeta-con-swiper, body.scroll-snap-activo .producto.producto--has-swiper { max-width: 380px !important; /* <-- Modifica aquí el ANCHO TOTAL */ height: 740px !important; /* <-- Modifica aquí el ALTO TOTAL de la tarjeta con Swiper */ min-height: 450px !important; max-height: 740px !important; display: flex !important; flex-direction: column !important; } /* 5.2 Altura del Recuadro del Swiper */ .tarjeta-con-swiper .producto-media, .producto--has-swiper .producto-media, .tarjeta-con-swiper .producto-media.has-swiper, .producto--has-swiper .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-con-swiper .producto-media, body.scroll-snap-activo .producto--has-swiper .producto-media, body.scroll-snap-activo .tarjeta-con-swiper .producto-media.has-swiper, body.scroll-snap-activo .producto--has-swiper .producto-media.has-swiper, body.scroll-snap-activo .producto.tarjeta-con-swiper .producto-media, body.scroll-snap-activo .producto.producto--has-swiper .producto-media { height: 380px !important; /* <-- MODIFICA AQUÍ EL ALTO DEL RECUADRO SWIPER */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } /* 5.3 Control de las Imágenes dentro del Swiper */ .tarjeta-con-swiper .producto-media .swiper, .producto--has-swiper .producto-media .swiper, .tarjeta-con-swiper .producto-media .swiper-slide, .producto--has-swiper .producto-media .swiper-slide { width: 100% !important; height: 100% !important; } .tarjeta-con-swiper .producto-media .swiper-slide img, .producto--has-swiper .producto-media .swiper-slide img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; /* 'cover' llena el espacio | 'contain' muestra foto completa */ object-position: center !important; display: block !important; } /* 5.4 Paginación / Puntitos Indicadores del Swiper */ .tarjeta-con-swiper .swiper-pagination, .producto--has-swiper .swiper-pagination { bottom: 8px !important; /* <-- Distancia desde el borde inferior de la foto */ z-index: 6 !important; } .tarjeta-con-swiper .swiper-pagination-bullet, .producto--has-swiper .swiper-pagination-bullet { width: 6px !important; /* <-- Ancho de los puntitos inactivos */ height: 6px !important; /* <-- Alto de los puntitos inactivos */ background: rgba(255, 255, 255, 0.6) !important; opacity: 0.8 !important; margin: 0 3px !important; border-radius: 4px !important; } .tarjeta-con-swiper .swiper-pagination-bullet-active, .producto--has-swiper .swiper-pagination-bullet-active { width: 18px !important; /* <-- Ancho de la pastilla activa */ background: #38bdf8 !important; /* <-- Color del puntito activo */ opacity: 1 !important; box-shadow: 0 0 8px rgba(56, 189, 248, 0.8) !important; } /* 5.5 Cuerpo de Información en Tarjetas con Swiper */ .tarjeta-con-swiper .informacion, .producto--has-swiper .informacion, body.scroll-snap-activo .tarjeta-con-swiper .informacion, body.scroll-snap-activo .producto--has-swiper .informacion { flex: 1 1 auto !important; height: auto !important; min-height: 270px !important; max-height: none !important; display: flex !important; flex-direction: column !important; padding: 10px 14px 12px 14px !important; box-sizing: border-box !important; overflow: hidden !important; } /* 5.6 Botones en Tarjetas con Swiper */ .tarjeta-con-swiper .producto-acciones, .producto--has-swiper .producto-acciones { margin-top: auto !important; padding-top: 6px !important; width: 100% !important; } /* 5.7 Ajuste Específico por si la Tarjeta con Swiper es de Variantes, Servicio o Normal */ /* Tarjeta Normal con Swiper: */ .tarjeta-normal.tarjeta-con-swiper .producto-media, .tarjeta-normal.producto--has-swiper .producto-media { height: 380px !important; /* <-- Altura si es Normal + Swiper */ } /* Tarjeta con Variantes con Swiper (ej: 340px para dar más espacio a los botones de tallas): */ .tarjeta-variantes.tarjeta-con-swiper .producto-media, .tarjeta-variantes.producto--has-swiper .producto-media { height: 340px !important; /* <-- Altura si es Variantes + Swiper */ } /* Tarjeta de Servicio con Swiper: */ .tarjeta-servicio.tarjeta-con-swiper .producto-media, .tarjeta-servicio.producto--has-swiper .producto-media { height: 380px !important; /* <-- Altura si es Servicio + Swiper */ } /* Tarjeta Personalizable con Swiper: */ .tarjeta-personalizable.tarjeta-con-swiper .producto-media, .tarjeta-personalizable.producto--has-swiper .producto-media { height: 380px !important; /* <-- Altura si es Personalizable 3D + Swiper */ } } /* ========================================================================== PANTALLAS DE MÓVIL MENORES A 445px (Hasta 444px: iPhone, Galaxy, Pixel, etc.) DISEÑO SIMÉTRICO, UNIFORME Y SIN ESPACIOS VACÍOS ENTRE ELEMENTOS ========================================================================== */ @media (max-width: 444px) { /* -------------------------------------------------------------------------- REGLAS GLOBALES PARA TODAS LAS TARJETAS EN CELULARES <= 444px Garantiza que todas las tarjetas tengan el mismo ancho y alto uniforme y que NO existan espacios vacíos entre el título, precio y botón. -------------------------------------------------------------------------- */ .producto, body.scroll-snap-activo .contenedor > div, body.scroll-snap-activo .contenedor .producto, body.scroll-snap-activo .producto, .contenedor.modo-movil-1_columna .producto { width: 100% !important; max-width: 360px !important; /* <-- Ancho centrado uniforme en móviles */ height: 640px !important; /* <-- ALTO TOTAL UNIFORME DE LAS TARJETAS */ min-height: 640px !important; max-height: 640px !important; display: flex !important; flex-direction: column !important; margin: 0 auto !important; content-visibility: visible !important; contain-intrinsic-size: none !important; contain: none !important; transform: translateZ(0) !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } /* Recuadro general de medios */ .producto-media, body.scroll-snap-activo .producto-media { width: 100% !important; border-radius: 19px 19px 0 0 !important; overflow: hidden !important; flex-shrink: 0 !important; } /* Imagen estática general */ .producto-media > img, .producto-media img, body.scroll-snap-activo .producto-media > img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* CONTENEDOR DE INFORMACIÓN: Agrupa los elementos sin huecos artificiales */ .informacion, .producto .informacion, body.scroll-snap-activo .informacion, body.scroll-snap-activo .producto .informacion, body.scroll-snap-activo .contenedor .informacion, .contenedor.modo-movil-1_columna .informacion, body.scroll-snap-activo .contenedor.modo-movil-1_columna .informacion { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; /* Elimina la dispersión que creaba huecos vacíos */ padding: 8px 12px 10px 12px !important; gap: 4px !important; /* Espaciado ordenado y continuo entre elementos */ box-sizing: border-box !important; overflow: hidden !important; transform: none !important; /* Restaura cualquier desplazamiento anterior */ } /* Título del Producto: Reserva 2 líneas para que los precios queden alineados */ .informacion .nombre-producto, .informacion > p:first-child { font-size: 0.95rem !important; line-height: 1.25 !important; min-height: 2.4em !important; max-height: 2.5em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; text-align: center !important; } /* Insignia de Tienda */ .producto-tienda-tag { margin: 1px 0 !important; text-align: center !important; } .tag-badge-vendedor { font-size: 10.5px !important; padding: 2px 7px !important; } /* Descripción del Producto: Se auto-adapta a 1 o 2 líneas según la cantidad de texto */ .informacion .descripcion-producto { font-size: 0.76rem !important; line-height: 1.25 !important; height: auto !important; min-height: 0 !important; max-height: 2.6em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 1px 0 !important; text-align: center !important; } .informacion .descripcion-producto .leer-mas-inline { color: #e2e8f0 !important; font-weight: 600 !important; cursor: pointer !important; display: inline !important; white-space: nowrap !important; text-decoration: none !important; margin-left: 3px !important; opacity: 0.95 !important; } .informacion .descripcion-producto .leer-mas-inline:active { color: #ffffff !important; opacity: 0.75 !important; } /* Precio */ .informacion .precio { font-size: 1.18rem !important; font-weight: 800 !important; margin: 2px 0 !important; text-align: center !important; line-height: 1.2 !important; } /* Estrellas y Calificación */ .rating-container { margin: 1px 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 4px !important; } .rating-stars .fa-star { font-size: 12px !important; } /* Fila de Reseñas y Alerta de Escasez */ .resenas-alerta-fila { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; margin: 2px 0 !important; flex-shrink: 0 !important; } .resenas-btn { font-size: 11px !important; padding: 2px 8px !important; margin: 0 !important; border-radius: 6px !important; } .alerta-escasez { font-size: 10.5px !important; padding: 2px 8px !important; margin: 0 !important; border-radius: 6px !important; gap: 4px !important; } /* Texto Dinámico de Variantes */ .variantes-label-dinamico { font-size: 11px !important; margin: 2px 0 1px 0 !important; text-align: center !important; line-height: 1.2 !important; flex-shrink: 0 !important; } /* Botones de Tallas / Variantes */ .variantes-container, .contenedor.modo-movil-1_columna .variantes-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: center !important; align-items: center !important; gap: 5px !important; margin: 2px 0 !important; padding: 1px 0 !important; width: 100% !important; min-height: 28px !important; flex-shrink: 0 !important; scrollbar-width: none !important; } .variantes-container::-webkit-scrollbar { display: none !important; } .variante-btn, .contenedor.modo-movil-1_columna .variante-btn { height: 26px !important; min-height: 26px !important; font-size: 11px !important; padding: 2px 8px !important; line-height: 1 !important; border-radius: 6px !important; flex-shrink: 0 !important; margin: 0 !important; } /* Botones de Acción (Comprar, WhatsApp, Diseño 3D): Anclados abajo sin huecos */ .producto-acciones, .producto .producto-acciones, body.scroll-snap-activo .producto-acciones, .soldOut, .informacion .soldOut { margin-top: auto !important; padding-top: 4px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; flex-shrink: 0 !important; } .btn-comprar, .btn-comprar-servicio, .btn-contactar-servicio, .btn-personalizar, .informacion .btn-comprar, .informacion .btn-contactar-servicio, .informacion .btn-personalizar, .producto-acciones .btn-comprar, .producto-acciones .btn-contactar-servicio, .producto-acciones .btn-personalizar, .soldOut, .informacion .soldOut { width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; font-size: 13.5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 10px !important; transform: none !important; } /* ============================================================================== CONTROL INDEPENDIENTE POR CADA TIPO DE TARJETA EN PANTALLAS <= 444px (Equilibrio perfecto: Foto más grande en productos sin variantes para llenar la tarjeta sin dejar espacios vacíos, y foto calibrada en productos con tallas) ============================================================================== */ /* -------------------------------------------------------------------------- TIPO 1: TARJETA NORMAL (Producto estándar con botón Comprar) -------------------------------------------------------------------------- */ /* 1.1 Alto Total de la Tarjeta Normal */ .tarjeta-normal, .producto.tarjeta-normal, body.scroll-snap-activo .tarjeta-normal, body.scroll-snap-activo .producto.tarjeta-normal { height: 640px !important; /* <-- Modifica aquí el ALTO TOTAL de la tarjeta normal */ max-height: 640px !important; } /* 1.2 Altura de la Imagen en Tarjeta Normal (Foto más amplia para llenar la tarjeta sin hueco) */ .tarjeta-normal .producto-media, .tarjeta-normal.producto .producto-media, body.scroll-snap-activo .tarjeta-normal .producto-media, body.scroll-snap-activo .producto.tarjeta-normal .producto-media, body.scroll-snap-activo .tarjeta-normal .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-normal .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-normal:not(.producto--has-swiper) .producto-media { height: 380px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN TARJETA NORMAL */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } /* -------------------------------------------------------------------------- TIPO 2: TARJETA DE SERVICIOS (Con botón WhatsApp «Solicitar Servicio») -------------------------------------------------------------------------- */ /* 2.1 Alto Total de la Tarjeta de Servicio */ .tarjeta-servicio, .producto.tarjeta-servicio, body.scroll-snap-activo .tarjeta-servicio, body.scroll-snap-activo .producto.tarjeta-servicio { height: 640px !important; /* <-- Modifica aquí el ALTO TOTAL */ max-height: 640px !important; } /* 2.2 Altura de la Imagen en Tarjeta de Servicio */ .tarjeta-servicio .producto-media, .tarjeta-servicio.producto .producto-media, body.scroll-snap-activo .tarjeta-servicio .producto-media, body.scroll-snap-activo .producto.tarjeta-servicio .producto-media, body.scroll-snap-activo .tarjeta-servicio .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-servicio .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-servicio:not(.producto--has-swiper) .producto-media { height: 380px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN SERVICIOS */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } /* -------------------------------------------------------------------------- TIPO 3: TARJETA PERSONALIZABLE (Con botón «Diseño 3D») -------------------------------------------------------------------------- */ /* 3.1 Alto Total de la Tarjeta Personalizable 3D */ .tarjeta-personalizable, .producto.tarjeta-personalizable, body.scroll-snap-activo .tarjeta-personalizable, body.scroll-snap-activo .producto.tarjeta-personalizable { height: 640px !important; /* <-- Modifica aquí el ALTO TOTAL */ max-height: 640px !important; } /* 3.2 Altura de la Imagen en Tarjeta Personalizable 3D */ .tarjeta-personalizable .producto-media, .tarjeta-personalizable.producto .producto-media, body.scroll-snap-activo .tarjeta-personalizable .producto-media, body.scroll-snap-activo .producto.tarjeta-personalizable .producto-media, body.scroll-snap-activo .tarjeta-personalizable .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-personalizable .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-personalizable:not(.producto--has-swiper) .producto-media { height: 380px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN PERSONALIZABLES 3D */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } /* Personalizable con Variantes (deja espacio para selector de tallas) */ .tarjeta-personalizable.tarjeta-con-variantes .producto-media, .tarjeta-personalizable.tarjeta-variantes .producto-media { height: 300px !important; min-height: 300px !important; max-height: 300px !important; } /* -------------------------------------------------------------------------- TIPO 4: TARJETA CON VARIANTES (Tallas / Colores + Botón Comprar) -------------------------------------------------------------------------- */ /* 4.1 Alto Total de la Tarjeta con Variantes */ .tarjeta-variantes, .producto.tarjeta-variantes, body.scroll-snap-activo .tarjeta-variantes, body.scroll-snap-activo .producto.tarjeta-variantes { height: 640px !important; /* <-- Modifica aquí el ALTO TOTAL */ max-height: 640px !important; } /* 4.2 Altura de la Imagen en Tarjeta con Variantes (300px da el espacio ideal a los botones de tallas) */ .tarjeta-variantes .producto-media, .tarjeta-variantes.producto .producto-media, body.scroll-snap-activo .tarjeta-variantes .producto-media, body.scroll-snap-activo .producto.tarjeta-variantes .producto-media, body.scroll-snap-activo .tarjeta-variantes .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-variantes .producto-media:not(.has-swiper), body.scroll-snap-activo .producto.tarjeta-variantes:not(.producto--has-swiper) .producto-media { height: 300px !important; /* <-- MODIFICA AQUÍ EL ALTO DE LA IMAGEN EN VARIANTES/TALLAS */ min-height: 300px !important; max-height: 300px !important; flex-shrink: 0 !important; } /* -------------------------------------------------------------------------- TIPO 5: TARJETAS CON CARRUSEL SWIPER (.tarjeta-con-swiper / .producto--has-swiper) -------------------------------------------------------------------------- */ /* 5.1 Alto Total y Ancho de la Tarjeta con Swiper */ .tarjeta-con-swiper, .producto--has-swiper, .producto.tarjeta-con-swiper, .producto.producto--has-swiper, body.scroll-snap-activo .tarjeta-con-swiper, body.scroll-snap-activo .producto--has-swiper, body.scroll-snap-activo .producto.tarjeta-con-swiper, body.scroll-snap-activo .producto.producto--has-swiper { max-width: 360px !important; height: 640px !important; /* <-- ALTO TOTAL de la tarjeta con Swiper */ min-height: 450px !important; max-height: 640px !important; display: flex !important; flex-direction: column !important; } /* 5.2 Altura del Recuadro del Swiper */ .tarjeta-con-swiper .producto-media, .producto--has-swiper .producto-media, .tarjeta-con-swiper .producto-media.has-swiper, .producto--has-swiper .producto-media.has-swiper, body.scroll-snap-activo .tarjeta-con-swiper .producto-media, body.scroll-snap-activo .producto--has-swiper .producto-media, body.scroll-snap-activo .tarjeta-con-swiper .producto-media.has-swiper, body.scroll-snap-activo .producto--has-swiper .producto-media.has-swiper, body.scroll-snap-activo .producto.tarjeta-con-swiper .producto-media, body.scroll-snap-activo .producto.producto--has-swiper .producto-media { height: 380px !important; /* <-- ALTURA BASE DEL SWIPER */ min-height: 380px !important; max-height: 380px !important; flex-shrink: 0 !important; } /* 5.3 Control de las Fotos dentro del Swiper */ .tarjeta-con-swiper .producto-media .swiper, .producto--has-swiper .producto-media .swiper, .tarjeta-con-swiper .producto-media .swiper-slide, .producto--has-swiper .producto-media .swiper-slide { width: 100% !important; height: 100% !important; } .tarjeta-con-swiper .producto-media .swiper-slide img, .producto--has-swiper .producto-media .swiper-slide img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* 5.4 Paginación del Swiper */ .tarjeta-con-swiper .swiper-pagination, .producto--has-swiper .swiper-pagination { bottom: 6px !important; } .tarjeta-con-swiper .swiper-pagination-bullet, .producto--has-swiper .swiper-pagination-bullet { width: 6px !important; height: 6px !important; margin: 0 3px !important; } .tarjeta-con-swiper .swiper-pagination-bullet-active, .producto--has-swiper .swiper-pagination-bullet-active { width: 18px !important; background: #38bdf8 !important; } /* 5.5 Información en Tarjetas con Swiper */ .tarjeta-con-swiper .informacion, .producto--has-swiper .informacion { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding: 8px 12px 10px 12px !important; gap: 4px !important; box-sizing: border-box !important; overflow: hidden !important; } /* 5.6 Altura del Swiper según el Tipo de Tarjeta */ .tarjeta-normal.tarjeta-con-swiper .producto-media, .tarjeta-normal.producto--has-swiper .producto-media { height: 380px !important; /* <-- Normal con Swiper */ min-height: 380px !important; max-height: 380px !important; } .tarjeta-variantes.tarjeta-con-swiper .producto-media, .tarjeta-variantes.producto--has-swiper .producto-media { height: 300px !important; /* <-- Variantes con Swiper (300px deja espacio ideal a botones de tallas) */ min-height: 300px !important; max-height: 300px !important; } .tarjeta-servicio.tarjeta-con-swiper .producto-media, .tarjeta-servicio.producto--has-swiper .producto-media { height: 380px !important; /* <-- Servicio con Swiper */ min-height: 380px !important; max-height: 380px !important; } .tarjeta-personalizable.tarjeta-con-swiper .producto-media, .tarjeta-personalizable.producto--has-swiper .producto-media { height: 380px !important; /* <-- Personalizable con Swiper */ min-height: 380px !important; max-height: 380px !important; } .tarjeta-personalizable.tarjeta-con-variantes.tarjeta-con-swiper .producto-media { height: 300px !important; /* <-- Personalizable con Variantes + Swiper */ min-height: 300px !important; max-height: 300px !important; } } /* ========================================================================== SUB-RANGO: CELULARES ENTRE 435px Y 444px (Galaxy A52, Pixel 7, iPhone Pro Max) ========================================================================== */ @media (min-width: 435px) and (max-width: 443px) { /* ALTO TOTAL DE TODAS LAS TARJETAS (640px para consistencia exacta) */ .tarjeta-normal, .producto.tarjeta-normal, body.scroll-snap-activo .tarjeta-normal, body.scroll-snap-activo .producto.tarjeta-normal, .tarjeta-servicio, .producto.tarjeta-servicio, body.scroll-snap-activo .tarjeta-servicio, body.scroll-snap-activo .producto.tarjeta-servicio, .tarjeta-personalizable, .producto.tarjeta-personalizable, body.scroll-snap-activo .tarjeta-personalizable, body.scroll-snap-activo .producto.tarjeta-personalizable, .tarjeta-variantes, .producto.tarjeta-variantes, body.scroll-snap-activo .tarjeta-variantes, body.scroll-snap-activo .producto.tarjeta-variantes, .tarjeta-con-swiper, .producto--has-swiper, body.scroll-snap-activo .tarjeta-con-swiper, body.scroll-snap-activo .producto--has-swiper { height: 640px !important; max-height: 640px !important; content-visibility: visible !important; contain-intrinsic-size: none !important; contain: none !important; } /* FOTO TARJETA NORMAL, SERVICIO Y PERSONALIZABLE (380px) */ .tarjeta-normal .producto-media, .tarjeta-servicio .producto-media, .tarjeta-personalizable:not(.tarjeta-con-variantes) .producto-media, .tarjeta-normal.tarjeta-con-swiper .producto-media, .tarjeta-servicio.tarjeta-con-swiper .producto-media, .tarjeta-personalizable:not(.tarjeta-con-variantes).tarjeta-con-swiper .producto-media { height: 380px !important; min-height: 380px !important; max-height: 380px !important; } /* FOTO TARJETA VARIANTES (300px para dar espacio perfecto a tallas) */ .tarjeta-variantes .producto-media, .tarjeta-personalizable.tarjeta-con-variantes .producto-media, .tarjeta-variantes.tarjeta-con-swiper .producto-media, .tarjeta-personalizable.tarjeta-con-variantes.tarjeta-con-swiper .producto-media { height: 300px !important; min-height: 300px !important; max-height: 300px !important; } /* BOTÓN COMPRAR Y BOTÓN AGOTADO (Misma altura y posición exacta en la base) */ .producto-acciones, .producto .producto-acciones, body.scroll-snap-activo .producto-acciones, .soldOut, .informacion .soldOut, .producto-acciones .soldOut { margin-top: auto !important; padding-top: 4px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; flex-shrink: 0 !important; } .btn-comprar, .btn-comprar-servicio, .btn-contactar-servicio, .btn-personalizar, .informacion .btn-comprar, .informacion .btn-contactar-servicio, .informacion .btn-personalizar, .producto-acciones .btn-comprar, .producto-acciones .btn-contactar-servicio, .producto-acciones .btn-personalizar, .soldOut, .informacion .soldOut, .producto-acciones .soldOut { width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; font-size: 13.5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 10px !important; transform: none !important; } } /* ========================================================================== SUB-RANGO: CELULARES ENTRE 360px Y 434px (iPhone 12/13/14, Galaxy estándar) ========================================================================== */ /* ========================================================================== SECCIÓN EXCLUSIVA: PANTALLAS MÓVILES HASTA 400px (Samsung S21 Ultra = 384px) Modifica aquí el tamaño de las tarjetas. Aplica a celulares <= 400px. ========================================================================== */ @media (max-width: 400px) { /* ========================================================================== 0. CONTENEDOR GENERAL: ESPACIO CON EL HEADER Y SEPARACIÓN ENTRE TARJETAS ========================================================================== */ html body #contenedor, html body.scroll-snap-activo #contenedor { padding-top: 6px !important; gap: 20px !important; } /* ========================================================================== 1. CONTROL GENERAL: ALTO TOTAL DE TODAS LAS TARJETAS (Cualquier tipo) Modifica el alto aquí y cambiará todas las tarjetas de la tienda. ========================================================================== */ html body #contenedor .producto, html body #contenedor > div, html body #contenedor .tarjeta-normal, html body #contenedor .tarjeta-servicio, html body #contenedor .tarjeta-personalizable, html body #contenedor .tarjeta-variantes, html body #contenedor .tarjeta-con-swiper, html body #contenedor .producto--has-swiper, html body.scroll-snap-activo #contenedor .producto, html body.scroll-snap-activo #contenedor > div, html body.scroll-snap-activo #contenedor .tarjeta-normal, html body.scroll-snap-activo #contenedor .tarjeta-servicio, html body.scroll-snap-activo #contenedor .tarjeta-personalizable, html body.scroll-snap-activo #contenedor .tarjeta-variantes, html body.scroll-snap-activo #contenedor .tarjeta-con-swiper, html body.scroll-snap-activo #contenedor .producto--has-swiper, html body.scroll-snap-activo .contenedor .producto, html body.scroll-snap-activo .contenedor > div, html body.scroll-snap-activo .producto, html body.scroll-snap-activo .producto.tarjeta-normal, html body.scroll-snap-activo .producto.tarjeta-servicio, html body.scroll-snap-activo .producto.tarjeta-personalizable, html body.scroll-snap-activo .producto.tarjeta-variantes, html body.scroll-snap-activo .producto.tarjeta-con-swiper, html body.scroll-snap-activo .producto--has-swiper, html body .contenedor.modo-movil-1_columna .producto, .producto, .tarjeta-normal, .tarjeta-servicio, .tarjeta-personalizable, .tarjeta-variantes, .tarjeta-con-swiper { width: 100% !important; max-width: 330px !important; /* >>> MODIFICA AQUÍ EL ALTO TOTAL DE TODAS LAS TARJETAS <<< */ height: 580px !important; min-height: 0 !important; max-height: 580px !important; display: flex !important; flex-direction: column !important; margin: 0 auto !important; box-sizing: border-box !important; overflow: hidden !important; /* >>> ALINEACIÓN VERTICAL (Auto-centrado magnético de vitrina en pantalla móvil) <<< */ scroll-snap-align: center !important; scroll-snap-stop: normal !important; touch-action: pan-y !important; /* Distancia exacta al tope (el header mide 64px, 68px deja 4px limpios debajo) */ scroll-margin-top: -15px !important; /* >>> MODIFICA AQUÍ PARA MOVER LA TARJETA VERTICALMENTE (Arriba o Abajo) <<< */ /* Valores negativos la SUBEN (ej: -20px) | Valores positivos la BAJAN (ej: 20px) */ transform: translateY(0px) !important; } /* ========================================================================== 2. CONTROL GENERAL: ALTO DE LA FOTO DE TODAS LAS TARJETAS Modifica 180px aquí y cambiará el alto de las fotos de todas las tarjetas. ========================================================================== */ html body #contenedor .producto-media, html body #contenedor .producto .producto-media, html body #contenedor .tarjeta-normal .producto-media, html body #contenedor .tarjeta-servicio .producto-media, html body #contenedor .tarjeta-personalizable .producto-media, html body #contenedor .tarjeta-variantes .producto-media, html body #contenedor .tarjeta-con-swiper .producto-media, html body.scroll-snap-activo #contenedor .producto-media, html body.scroll-snap-activo #contenedor .producto .producto-media, html body.scroll-snap-activo #contenedor .tarjeta-normal .producto-media, html body.scroll-snap-activo #contenedor .tarjeta-servicio .producto-media, html body.scroll-snap-activo #contenedor .tarjeta-personalizable .producto-media, html body.scroll-snap-activo #contenedor .tarjeta-variantes .producto-media, html body.scroll-snap-activo #contenedor .tarjeta-con-swiper .producto-media, html body.scroll-snap-activo .contenedor .producto-media, html body.scroll-snap-activo .producto-media, html body.scroll-snap-activo .producto .producto-media, html body.scroll-snap-activo .tarjeta-normal .producto-media, html body.scroll-snap-activo .tarjeta-servicio .producto-media, html body.scroll-snap-activo .tarjeta-personalizable .producto-media, html body.scroll-snap-activo .tarjeta-variantes .producto-media, html body.scroll-snap-activo .tarjeta-con-swiper .producto-media, html body.scroll-snap-activo .producto.tarjeta-normal .producto-media, html body.scroll-snap-activo .producto.tarjeta-servicio .producto-media, html body.scroll-snap-activo .producto.tarjeta-personalizable .producto-media, html body.scroll-snap-activo .producto.tarjeta-variantes .producto-media, html body.scroll-snap-activo .producto.tarjeta-con-swiper .producto-media, html body.scroll-snap-activo .producto--has-swiper .producto-media, html body.scroll-snap-activo .producto-media.has-swiper, html body.scroll-snap-activo .producto-media:not(.has-swiper), html body.scroll-snap-activo .producto:not(.producto--has-swiper) .producto-media, html body.scroll-snap-activo .producto.tarjeta-normal:not(.producto--has-swiper) .producto-media, html body.scroll-snap-activo .producto.tarjeta-servicio:not(.producto--has-swiper) .producto-media, html body.scroll-snap-activo .producto.tarjeta-personalizable:not(.producto--has-swiper) .producto-media, html body.scroll-snap-activo .producto.tarjeta-variantes:not(.producto--has-swiper) .producto-media, .producto-media { width: 100% !important; /* >>> MODIFICA AQUÍ EL ALTO DE LA FOTO EN TODAS LAS TARJETAS <<< */ height: 310px !important; min-height: 0 !important; max-height: 310px !important; border-radius: 18px 18px 0 0 !important; overflow: hidden !important; flex-shrink: 0 !important; } .producto-media img, .producto-media .swiper, .producto-media .swiper-slide, .producto-media .swiper-slide img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* ========================================================================== 3. ESTRUCTURA INTERNA LIMPIA (Sin desfases que deformen la tarjeta) ========================================================================== */ html body #contenedor .informacion, html body.scroll-snap-activo #contenedor .informacion, html body.scroll-snap-activo .contenedor .informacion, html body.scroll-snap-activo .informacion, html body.scroll-snap-activo .producto .informacion, .informacion { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding: 5px 12px 6px 12px !important; gap: 2px !important; box-sizing: border-box !important; overflow: hidden !important; transform: none !important; } .informacion .nombre-producto { font-size: 0.85rem !important; line-height: 1.2 !important; max-height: 2.4em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; text-align: center !important; } .informacion .descripcion-producto { font-size: 0.70rem !important; line-height: 1.2 !important; max-height: 2.4em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; text-align: center !important; } .informacion .precio { font-size: 1.05rem !important; margin: 0 !important; text-align: center !important; flex-shrink: 0 !important; } /* Botón anclado abajo automáticamente */ html body #contenedor .producto-acciones, html body.scroll-snap-activo #contenedor .producto-acciones, html body.scroll-snap-activo .producto-acciones, .producto-acciones, .producto .producto-acciones, .soldOut, .informacion .soldOut { margin-top: auto !important; padding-top: 2px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transform: none !important; } .btn-comprar, .btn-comprar-servicio, .btn-contactar-servicio, .btn-personalizar, .soldOut { width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; border-radius: 9px !important; transform: none !important; } /* Tallas / Variantes compactas */ .variantes-container { min-height: 22px !important; gap: 4px !important; margin: 1px 0 !important; } .variante-btn { height: 20px !important; min-height: 20px !important; font-size: 9.5px !important; padding: 1px 5px !important; } /* ========================================================================== 4. CONTROLES INDIVIDUALES POR TIPO DE TARJETA (OPCIONAL) Si alguna vez deseas darle un alto distinto a un tipo específico de tarjeta, descomenta y ajusta el valor aquí: ========================================================================== */ /* --- TIPO 1: TARJETA NORMAL (Estándar) --- */ /* html body #contenedor .producto.tarjeta-normal { height: 310px !important; } html body #contenedor .producto.tarjeta-normal .producto-media { height: 180px !important; } */ /* --- TIPO 2: TARJETA DE SERVICIOS (WhatsApp) --- */ /* html body #contenedor .producto.tarjeta-servicio { height: 310px !important; } html body #contenedor .producto.tarjeta-servicio .producto-media { height: 180px !important; } */ /* --- TIPO 3: TARJETA PERSONALIZABLE (3D) --- */ /* html body #contenedor .producto.tarjeta-personalizable { height: 310px !important; } html body #contenedor .producto.tarjeta-personalizable .producto-media { height: 180px !important; } */ /* --- TIPO 4: TARJETA CON TALLAS / VARIANTES --- */ /* html body #contenedor .producto.tarjeta-variantes { height: 310px !important; } html body #contenedor .producto.tarjeta-variantes .producto-media { height: 180px !important; } */ /* --- TIPO 5: TARJETA CON CARRUSEL DE FOTOS (SWIPER) --- */ /* html body #contenedor .producto.tarjeta-con-swiper { height: 310px !important; } html body #contenedor .producto.tarjeta-con-swiper .producto-media { height: 180px !important; } */ }